Utilizar el editor visual

Secciones de este artículo:

Interfaz del editor visual

Antes de crear su primera variante de Optimize, familiarícese con el editor visual. Consta de dos componentes principales que se describen a continuación: la barra de aplicaciones y la paleta del editor.

Barra de aplicaciones

La barra de aplicaciones es una barra de navegación que se ubica en la parte superior de la página al crear una variante. Se divide en dos secciones: la superior contiene el nombre y estado del experimento, el nombre de la variante e iconos de acceso a la vista previa, la lista de cambios, diagnósticos y ayuda. La sección inferior contiene el selector de elementos, la ruta y los botones de acceso al editor de CSS, al modo interactivo y a la configuración de traslado.

Cada uno de los elementos de la barra de aplicaciones se describe con más detalle en el artículo Presentamos el editor visual.

Paleta del editor

La paleta del editor se ubica en la esquina inferior derecha de la página y contiene controles de edición del elemento que esté seleccionado en ese momento. La barra azul incluye botones para deshacer, rehacer y cerrar ("x"). Haga clic en el botón MODIFICAR ELEMENTO para editar su texto o HTML, o agregar un fragmento de JavaScript que se ejecute al cargarse dicho elemento. La parte inferior de la paleta contiene controles que varían dependiendo del elemento que esté seleccionado. Por ejemplo, al seleccionar un elemento de texto, puede editar sus dimensiones, ubicación, tipografía, fondo, borde y diseño.

Obtenga más información sobre todas las herramientas de la barra de aplicaciones y de la paleta del editor en el artículo Presentamos el editor visual.

Utilizar el editor de código CSS

Además de poder realizar cambios de estilo con el editor visual de Optimize, también puede ver y editar cambios de estilo CSS en las variantes con el editor de código CSS. Al guardar las ediciones realizadas en el editor de código CSS, estas se traducen en cambios de estilo en Optimize. El texto, el HTML y cualquier otro cambio de estilo que no sea de CSS (p. ej., el estilo de un elemento) no son visibles y no se ven afectados por el editor de código CSS.

Para acceder al editor de código CSS, haga clic en el botón de inserción ("Incrustar") situado en la sección inferior derecha de la barra de aplicaciones.

Al hacer clic en el icono, se abrirá el editor de código CSS de Optimize:

Optimize CSS code editor screenshot.

Compatibilidad con condicionales

El editor de código CSS es compatible con módulos que utilizan condicionales, como media queries, lo que facilita la implementación de variantes de páginas adaptables. Por ejemplo, puede agregar el siguiente código CSS para disminuir un tamaño de fuente a 14 píxeles en pantallas de menos de 500 píxeles de ancho:

@media(max-width: 500px) {
  body {
     font-size: 14px;
  }
}

Editor de código CSS avanzado

Si sabe trabajar con CSS, puede implementar la variante por completo en el editor de código CSS. El código CSS que se agrega aquí se traduce en cambios de estilo individuales visibles en la lista de cambios.

Del mismo modo, puede implementar una variante líder copiando el código desde el editor de código CSS y pegándolo en el sitio web de producción.

Editor visual de diseño web adaptable

El editor visual de Optimize le permite asegurarse de que las variantes sean compatibles con distintos tamaños de pantalla y tipos de dispositivos. También permite realizar cambios de estilo adaptable para anchos de pantalla específicos.

Hay dos formas de hacerlo:

  1. Elija uno de los dispositivos predefinidos del menú de dispositivos, situado en la parte superior del editor visual, para probar su variante en ese modelo específico. Esta opción, que simula el agente de usuario del navegador correspondiente, es la más adecuada si su sitio web tiene una versión móvil dedicada.
  2. Elija la opción Adaptable, situada en la parte inferior del menú de dispositivos, y, a continuación, uno de los métodos de vista previa adaptable que se explican más abajo para simular diferentes tamaños de pantalla. Esta opción es adecuada si el sitio web adaptable se ajusta de forma dinámica al ancho y alto de la pantalla del navegador, incluso en navegadores web de ordenadores, y permite realizar cambios de estilo adaptable utilizando el editor visual.

Editor: Device menu screenshot

El menú de dispositivos del editor visual.

Vista previa de diseño web adaptable

Después de seleccionar Adaptable en el menú de dispositivos, dispone de tres métodos para revisar la variante en distintos tamaños de pantalla:

  1. Haga clic en la barra de anchura automática gris, ubicada justo debajo del selector de elementos, para simular anchos de página predefinidos (p. ej., 320, 400 o 600 píxeles). Nota: Este método solo cambia el ancho, no la altura. Si el sitio web ya usa CSS adaptable, la barra utilizará sus breakpoints de anchura más comunes para comprobar fácilmente cómo se ve la variante según cada caso.
  2. Introduzca el ancho y la altura que desee (en píxeles) directamente en el modificador de tamaño de páginas, ubicado debajo de la barra de anchura automática, y presione la tecla Intro.
  3. Arrastre los puntos de dirección de cambio de tamaño gris oscuro, situados en los bordes derecho e inferior de la variante, para simular tamaños de pantalla específicos y ver cómo se adapta la página. Este método es similar a la forma en la que se renderiza la variante cuando un usuario cambia dinámicamente el tamaño de la ventana de su navegador.

editor-responsive-previewing-ss-fpo

Las opciones de vista previa de diseño web adaptable del editor visual.

Edición de diseño web adaptable

Además de proporcionar una vista previa de las variantes, la opción Adaptable, ubicada en la parte inferior del menú de dispositivos, permite realizar cambios de estilo adaptable utilizando el menú de breakpoint.

editor-device-and-breakpoint-menus

Menú de dispositivos (izquierda) y menú de breakpoint (derecha).

Las opciones del menú de breakpoint son las restricciones sencillas de adaptabilidad (es decir, media query) más comunes aplicables al sitio web (solo afectan a la anchura). Si el sitio web ya usa el estilo CSS adaptable, la barra utilizará sus breakpoints de anchura más comunes y le permitirá realizar cambios acordes con los breakpoints actuales.

Editor breakpoint menu screenshot

El menú expandido de breakpoint.

 

Al seleccionar una opción del menú de breakpoint, el editor pasa a un estado especial en el que la restricción seleccionada se aplica a todos los cambios de estilo que usen la paleta del editor. Por ejemplo, si selecciona "Hasta 600 píxeles de anchura" en el menú de breakpoint y luego cambia el tamaño de fuente de un botón, el botón usará la fuente original en los dispositivos o ventanas de navegador que tengan más de 600 píxeles de ancho. Este efecto se destacará en la paleta del editor y afecta solo a los cambios de estilo, no a los cambios de texto ni de contenido.

Editor palette constrained by the breakpoint menu.

La paleta del editor, restringida por los valores seleccionados en el menú de breakpoint.

Al usar el menú de breakpoint, los puntos de dirección de cambio de tamaño adaptable funcionarán al arrastrarlos (para crear una vista previa), pero el tamaño de la página volverá automáticamente al breakpoint seleccionado automáticamente al soltarlos.

Puede utilizar la lista de cambios y el editor de código CSS para ver y modificar los media query de cada cambio de estilo individual y para especificar restricciones de media query más complejos. Para salir del modo de edición de diseño web adaptable, seleccione Todos los tamaños en la parte superior del menú de breakpoint.

Lista de cambios

A medida que realiza cambios en el editor visual, se incluyen en una lista de cambios. Esta lista es como un conjunto de instrucciones básicas que transforman la página original en la variante que desea probar. La cantidad de cambios realizados en la variante que está modificando en ese momento se muestra en la barra de la aplicación (p. ej., "1 cambio" en la captura de pantalla que aparece más arriba). Para revisar la lista de cambios, haga clic en el número de cambios que se muestra en la barra de aplicaciones.

Optimize no carga ni usa bibliotecas externas para implementar los cambios. En su lugar, implementa las instrucciones de cambio en forma de etiquetas compactas de Google Tag Manager.

Tipos de cambio

Optimize admite los tipos de cambio siguientes:

Cambio de estilo

Se usa para implementar los cambios del atributo de estilo, incluidos el tamaño y la posición del elemento.

El cambio de estilo le permite implementar la instrucción mediante una regla de CSS:

#target { color : red }

… o usar el atributo de estilo del elemento objetivo:

<p id="target" style="color : red"> </p>

El valor predeterminado del editor visual es la sintaxis más correcta, lo que favorece la estrategia de regla de CSS.

Si hubiera una regla de CSS más específica en la página que anulara la regla nueva, el editor visual usaría la propiedad "importante". Por ejemplo:

#target { color : red !important}

El editor solo usará el estilo del elemento si la regla anterior también se sustituye por una regla más específica en la página.

La estrategia de regla de CSS minimiza el parpadeo que se produce cuando el contenido sin estilo aparece brevemente antes de que el CSS se cargue. Sin embargo, para cambiar una propiedad de estilo mediante el estilo del elemento es necesario que el elemento ya exista en la página. De esta forma, aumenta la probabilidad de que el usuario pueda verlo brevemente antes de que cambie.

Puede examinar las opciones que seleccionó el editor y modificar cualquiera de ellas editando un cambio de estilo existente.

Advanced editor – Edit style dialog screenshot

Cambio de atributo

Se utiliza para implementar cambios de atributo del elemento, como el contenido de un enlace o la fuente de una imagen. Puede examinar y modificar las propiedades, como el selector de CSS, el atributo y el valor.

Advanced editor – edit attribute screenshot

Cambio de texto

Se usa al realizar cambios de texto directos en el editor. Cuando un elemento contiene texto intercalado con elementos secundarios, el editor indica la parte del texto que se ha modificado. En el ejemplo siguiente, solo puede cambiar una de las partes, por ejemplo, "Some text". Para realizar cambios, haga clic en cada parte de forma individual o use el tabulador para pasar a la parte siguiente.

<div>
Some text 
<b> a child element </b>
Some other text
</div>

 

Los modos siguientes son compatibles:

  1. Sustituir: sustituye una parte de texto.
  2. Insertar: inserta una parte de texto nueva dentro del elemento objetivo, al principio.
  3. Agregar: inserta una parte de texto nueva dentro del elemento objetivo, al final.
  4. Antes: inserta una parte de texto nueva antes del elemento objetivo.
  5. Después: inserta una parte de texto nueva después del elemento objetivo.

Advanced editor - edit text screenshot

Un cambio de texto es más seguro y menos invasivo que un cambio de HTML. Es preferible usar este método cuando se modifica solo el texto. Un cambio de texto no tiene efectos secundarios en la estructura del documento (ni en los selectores de CSS u otros elementos) y no afecta a los gestores de eventos que puedan estar registrados en los elementos de destino.

Cambio de HTML

Se usa para sustituir HTML o insertar otro nuevo. Los modos siguientes son compatibles:

  • Sustituir: sustituye el contenido HTML.
  • Insertar: inserta contenido HTML nuevo dentro del elemento objetivo, al principio.
  • Agregar: inserta contenido HTML nuevo dentro del elemento objetivo, al final.
  • Antes: inserta contenido HTML nuevo antes del elemento objetivo.
  • Después: inserta contenido HTML nuevo después del elemento objetivo.

Advanced editor – Insert text before screenshot

Un cambio de HTML dará lugar a la pérdida de todos los gestores de eventos indirectos. Por ejemplo, este botón dejará de funcionar después de introducir un cambio de HTML (por ejemplo, Insertar HTML antes):
<button id=”button”> My button </button>
<script>
  document.getElementById("button")
    .addEventListener("click", function() {alert(‘hello’);});
</script>

Los cambios de HTML tienen lugar después de que el navegador haya analizado el contenido HTML inicial, por lo que ya se habrán ejecutado las secuencias de comandos que contenga. Por este motivo, el editor visual retira las etiquetas de secuencia de comandos al cargar el contenido HTML para editarlo. No puede incluir secuencias de comandos en el contenido HTML nuevo. Para ejecutar una secuencia de comandos como parte de una variante, use un cambio de secuencia de comandos (Ejecutar JavaScript). No puede modificar las secuencias de comandos existentes.

Cambio de reorganización

Se admiten dos estrategias para arrastrar y mover un elemento a una ubicación diferente de la página. La estrategia predeterminada produce un cambio de reorganización, que cambia la ubicación del elemento en el DOM. El elemento tendrá un elemento principal o secundario nuevo (o elementos). Esto suele dar como resultado que el elemento adopte el estilo de los elementos de su área nueva.

Use un cambio de reorganización cuando reorganice elementos de menú u otros elementos de aspecto similar.

Un cambio de reorganización implica un selector de CSS fuente y un selector objetivo que se pueden cambiar desde el cuadro de diálogo relacionado, así como un modo Mover:

  • Arriba: hace que el elemento fuente sea el primer elemento secundario del elemento objetivo.
  • Parte inferior: hace que el elemento fuente sea el último elemento secundario del elemento objetivo.
  • Antes: hace que el elemento fuente sea el elemento secundario anterior al elemento objetivo.
  • Después: hace que el elemento fuente sea el elemento secundario posterior al elemento objetivo.

Cambio de secuencia de comandos

Un cambio de secuencia de comandos permite que Optimize ejecute JavaScript arbitrario en todos los elementos que coincidan con un selector de CSS. El cambio permite que Optimize ejecute el JavaScript como el cuerpo de una función que toma el elemento como parámetro.

También puede usar "head" o "body" en el selector de CSS y ejecutar el JavaScript una única vez (ya que solo hay un elemento de este tipo en la página). El selector que use, en combinación con su opción "run at", afecta a las condiciones previas que determinan cuándo se ejecutará la secuencia de comandos. Consulte la sección Cuándo se aplican las instrucciones de cambio, más abajo.

Si un selector de CSS coincide con varios elementos, la secuencia de comandos facilitada se ejecutará varias veces, una por cada elemento. Con cada llamada, el elemento se pasa como el único argumento de la función.

Cada llamada se lleva a cabo tan pronto como sea posible en función de la opción seleccionada:

  • Después de la etiqueta de apertura: solo es necesario que se analice y esté disponible en la página la etiqueta de apertura del elemento coincidente para que la secuencia de comandos se ejecute.
  • Después de la etiqueta de cierre: es necesario analizar todos los contenidos y la etiqueta de cierre del elemento coincidente para que la secuencia de comandos se ejecute. Además, tanto los contenidos como la etiqueta tienen que estar disponibles en la página.

Por ejemplo:

  • Usar la opción "Después de la etiqueta de apertura" con el selector "head" implica que el cambio de secuencia de comandos pueda ejecutarse tan pronto como cuando el fragmento de Optimize se ejecuta por primera vez en la etiqueta <HEAD> (ejecución de bloqueo síncrona).
  • Usar la opción "Después de la etiqueta de cierre" con el selector "body" implica que el cambio de secuencia de comandos se ejecute después del evento "document ready" (DOMContentLoaded).

Advanced editor – Run JavaScript screenshot

Varios elementos objetivo

Como pasa con otros tipos de cambio, un cambio de reorganización le permite modificar sus selectores de CSS fuente y de destino para que coincidan con varios elementos. Por ejemplo, al seleccionar varios elementos de origen, puede mover todos los elementos de un menú a otro diferente.

Un cambio de reorganización también admite un selector de destino que coincida con varios elementos. Puede usarse para cambiar el orden de dos columnas de la tabla o cualquier otra estructura en forma de tabla de la página.

  • Si hay más elementos objetivo que de origen, se ignoran los elementos objetivo adicionales.
  • Si hay más elementos de origen que objetivo, se agregan los elementos de origen adicionales al último elemento objetivo.

Mover a cualquier parte

Hay una estrategia alternativa para mover elementos a otra ubicación. En Configuración de traslado, habilite la opción Mover a cualquier parte.

Optimize editor – Move anywhere switch

El uso de esta estrategia se traduce en cambios de estilo relacionados con la posición (es decir, posición izquierda, primera posición, etc.). El elemento permanece en su misma ubicación en el DOM, pero parece que se haya trasladado a una nueva. Normalmente, su estilo no se ve afectado y no hay cambios en el resto de la página.

Use Mover a cualquier parte cuando cambie la posición de botones o áreas globales (como un área de inicio de sesión) y de elementos ya posicionados.

Seleccionar automáticamente la reorganización

Esta opción está activada de forma predeterminada, por lo que es fácil seleccionar los elementos de origen y de destino correctos al arrastrarlos. El editor selecciona el elemento correcto (p. ej., un elemento de lista <li> en lugar de la imagen <img> que contiene) y limita la reorganización a lo que hay dentro del contenedor (es decir, el elemento de lista <ul>).

Puede inhabilitar esta opción para mover cualquier elemento a cualquier otro lugar del DOM. También puede cambiar el modo Mover predeterminado, de Antes/Después a Parte superior/Parte inferior, si desmarca Cambiar el orden exterior del elemento objetivo.

Compilación del selector de CSS

Al hacer clic en una zona de la página, el editor selecciona el elemento más profundo de la zona donde se haya hecho clic.

Use la barra de jerarquía para seleccionar cualquier elemento antecedente (que puede ocupar la misma área y puede afectar a las propiedades visibles de esa zona, como la imagen de fondo o el color). Coloque el cursor sobre los elementos antecedentes de la barra de jerarquía para inspeccionar el área que ocupa cada elemento. Haga clic en el elemento y selecciónelo, y use la paleta del editor para inspeccionar las propiedades a las que afecta.

Advanced editor – CSS selector screenshot

Cuando se selecciona un elemento para cambiarlo, una propiedad importante de ese cambio es el selector de CSS que compila el editor, ya que puede ayudar a que los elementos correctos coincidan.

El algoritmo que usa el editor para compilar el selector es el siguiente:

  • Transferir los antecedentes del DOM hasta que haya uno que pueda identificarse de forma única
    • Por su atributo de ID
    • Por una clase usada solamente por ese elemento de la página
    • Como la etiqueta <BODY> del documento
  • Volver hacia abajo al elemento seleccionado y:
    • Usar el nombre de la etiqueta si solo hay un elemento secundario con esa etiqueta
    • En caso contrario, usar el selector :nth-of-type
Consejos sobre selectores de CSS
  • Siempre es preferible dirigirse a los elementos con un ID, una clase única o un antecedente cercano que los tenga. Esto hace que sus variantes sean más fáciles de mantener cuando hay pequeños cambios en la estructura de la página.
  • Cuando use clases como identificadores únicos, asegúrese de utilizar una página representativa como su página del editor (por ejemplo, no use una página de resultados de producto con un solo producto).
  • Puede modificar siempre que quiera el selector de CSS de un cambio e introducir su propio selector. El editor destacará el elemento o los elementos que acaben de coincidir.
  • Puede inhabilitar las opciones de uso de ID o de una clase única para ajustar la jerarquía de una selección. Esto puede ser útil si los atributos usan un identificador de CMS o de base de datos y varían.

Cuándo se aplican las instrucciones de cambio

El fragmento de código de Optimize se carga en el <HEAD> de la página. Eso significa que cuando se ejecutan las instrucciones de cambio, los elementos objetivo no se han analizado y no están disponibles en la página.

Muchas páginas incluyen secuencias de comandos síncronas en el cuerpo que retrasan la puesta a punto del DOM. Para evitar el parpadeo, los cambios de Optimize monitorizan el documento cada 80 ms hasta que se puedan identificar los elementos coincidentes. Si un selector de CSS coincide con varios elementos de una página compleja con varias secuencias de comandos síncronas, el cambio puede aplicarse de forma progresiva en varias repeticiones, a medida que los elementos coincidentes se van analizando.

También se aplican tipos de cambios diferentes en fases distintas del análisis. Los cambios de texto, HTML y reorganización se aplican solo cuando todos los contenidos y la etiqueta de cierre del elemento coincidente se han analizado. Los cambios de atributo y de estilo solo necesitan la etiqueta de apertura, y los cambios de secuencia de comandos los puede configurar el usuario.

Para tomar medidas adicionales con el objetivo de minimizar el parpadeo, Optimize oculta de forma temporal elementos coincidentes (mediante el uso de etiquetas <STYLE>, que se agregan en una fase muy temprana) hasta que los elementos coinciden y se aplican los cambios.

  • Estos detalles pueden ser importantes si los cambios implican un contenedor global o el cuerpo del documento.
  • Los cambios de estilo implementados como reglas de CSS se agregan de forma síncrona en el <HEAD> cuando el fragmento de código de Optimize se ejecuta y no tienen que esperar a que los elementos coincidentes se analicen.

Orden en el que se aplican los cambios

El orden de las instrucciones de cambio se respeta cuando hay efectos secundarios (por ejemplo, un cambio posterior que modifica un elemento que se agregó en un cambio anterior). Pero Optimize puede aplicar cambios en un orden diferente cuando no hay efectos secundarios y los elementos coincidentes de un cambio posterior pasan a estar disponibles. Optimize incluso puede ejecutar cambios que coincidan con varios elementos progresivamente y en paralelo.

Aunque Optimize incluye estas funciones, es preferible editar el documento comenzando desde la parte superior y yendo hacia abajo.

Eventos de activación

Las aplicaciones web de una sola página y de páginas dinámicas suelen cargar más datos tras su carga inicial, y Optimize admite esta opción mediante los eventos de activación. Consulte más información acerca de los eventos de activación.

¿Te ha sido útil este artículo?
¿Cómo podemos mejorar esta página?