Una página de Aurora no es un bloque de texto en el que se insertan imágenes. Es una cuadrícula de 48 columnas sobre la que se colocan zonas y cuyos bordes se arrastran con el ratón. La página que está leyendo se compuso así.
La cuadrícula de una página, zona por zona
La pestaña Contenido de una publicación: cada zona de la cuadrícula, su tamaño y lo que contiene, de un vistazo. Se añade, mueve y redimensiona sin escribir código.
La cuadrícula y su paleta de zonas
Cada zona toma su anchura según el tamaño de pantalla, ajustada con el ratón, con un desplazamiento para darle aire, y puede salir de la columna para cruzar la pantalla. Abajo, la paleta agrupa los 45 tipos de zona por uso: texto, imagen, publicación, vídeo, formulario, sumario, pila; el ojo junto a cada tipo abre su ejemplo. La disposición se escribe una sola vez y sirve para todos los idiomas del sitio.
El esquema del documento: lo que queda por escribir
Sobre la cuadrícula, el esquema de una plantilla de auditoría enumera sus quince secciones y cuenta, para cada una, los pasajes entre corchetes que quedan por reemplazar. Cada mosaico muestra su título y sus ajustes, como «En relieve» o «Teléfono».
Insertar una sección ya lista
En la Biblioteca, la pestaña «Secciones» propone una decena de disposiciones listas, dibujadas a la escala de sus zonas: tarjeta y teléfono, cuatro tarjetas en cuadro, tres cuentas comparadas, conservar y evitar. Las secciones que se han guardado esperan en la pestaña «Mis secciones».
Un ejemplo para cada zona
La pestaña «Zonas» de la Biblioteca muestra cada uno de los 45 tipos en acción, dibujado por el servidor con el tema del sitio y sus propias imágenes. «Insertar este ejemplo» lo coloca en la página, con sus textos entre corchetes para reemplazar.
Y para cada bloque de texto
La pestaña «Bloques» hace lo mismo con los dieciocho bloques del editor, del párrafo a la lista con iconos. Abierto desde un texto, con el botón «Ejemplos» o el menú de un bloque, el ejemplo llega a ese texto, justo después del cursor.
La vista previa: la página real, con ancho de teléfono
La pestaña Vista previa sustituye la cuadrícula por la página real, con el tema del sitio, al ancho de un ordenador, una tableta o un teléfono. Al pulsar una zona en la vista previa, se resalta y sus ajustes se abren en el panel de al lado. En el teléfono, las zonas pasan una debajo de otra, en el orden en que se colocaron.
Una zona abierta: su lugar y su aspecto
Al hacer clic en una zona de la cuadrícula se abren sus ajustes en el panel de al lado, con la cuadrícula siempre a la vista: su tipo, su anchura por tamaño de pantalla, su desplazamiento, una nueva línea, su fondo, un tema claro u oscuro forzado, su color de acento y su efecto de aparición. Lo que se ajusta aquí solo vale para ella. Una barra de herramientas se coloca sobre la propia zona: subir, bajar, duplicar, copiar, guardarla para reutilizarla, eliminarla, con la posibilidad de deshacer la eliminación.
Cuatro pestañas: Contenido, Disposición, Estilo, Visibilidad
Los ajustes de una zona se ordenan en cuatro pestañas. Disposición indica dónde se coloca: su ancho en las 48 columnas, su desplazamiento, su alineación vertical, el aire por encima, si se queda fija al desplazarse o cruza todo el ancho de la pantalla.
El estilo de una zona
La pestaña Estilo viste la zona: un fondo (tarjeta, relieve, tinte, acento o personalizado), un tema claro u oscuro impuesto, el color de los efectos al pasar el cursor y de las marcas, y su efecto de aparición.
Quién ve la zona, y cuándo
La pestaña Visibilidad programa una zona entre dos fechas, la reserva a los miembros conectados, la oculta en el teléfono o en el ordenador y le da un ancla para que un enlace lleve directamente a ella.
Un panel ancho para escribir
Para un texto, el panel se ensancha con un clic y el editor ocupa el espacio que necesita; el ancho elegido se recuerda para la próxima vez. La cuadrícula sigue al lado, con la zona en curso resaltada.
HTML escrito en un verdadero editor de código
Cuando ningún bloque hace lo que hace falta, el bloque HTML permite escribir la maquetación a mano. Se escribe en un editor de código: colores, números de línea, sangría con la tecla Tab, etiquetas que se cierran solas. Aquí, la ficha de la próxima sesión, en tres tarjetas.
El código a la izquierda, la página a la derecha
A pantalla completa, el bloque se muestra tal como lo dibujará el sitio, actualizado mientras se escribe: la misma limpieza, el mismo tema. Se ve en ordenador, tableta o teléfono, en modo claro u oscuro, sin guardar ni abrir la página.
Un fragmento de código coloreado en su lenguaje
La zona Código muestra un fragmento en la página, tal cual, como terminal animado o como antes / después. Se escribe con el mismo editor, coloreado en el lenguaje elegido entre once, y cada idioma del sitio conserva sus propios comentarios.
En el teléfono, una hoja que sube
En una pantalla pequeña, el mismo panel se convierte en una hoja que sube desde abajo sobre la cuadrícula. Se tira de su asa para desplegarla, y el gesto de volver la cierra.
Una lista, trece presentaciones
La zona Lista contiene entradas (un título, un texto, una imagen, un enlace) y las muestra como pasos numerados, cifras clave, preguntas frecuentes, testimonios, logotipos, cronología, tarjetas de ofertas, equipo, relato en imágenes, lista editorial, proceso horizontal, tarjetas con icono o escaparate de imágenes. Cambiar de presentación no pierde nada de lo escrito.
Los 45 tipos de zona y lo que sabe hacer una zona
- Texto e imágenes: texto enriquecido (títulos, listas, citas, recuadros, tablas, títulos en color), una imagen sola o en un marco de portátil, de teléfono o de navegador, una galería, un antes / después deslizable.
- Medios, código y gráficos: vídeo, muro de vídeos, audio con sus capítulos, documento para descargar, código resaltado con números de línea, integración de un servicio externo, gráfico de barras, curva, anillo o progresión.
- Las publicaciones y la navegación: una publicación elegida a mano, o una lista automática elegida por regla, que se actualiza sola; una lista libre, los términos de una taxonomía, un índice construido a partir de los títulos, una búsqueda en el sitio.
- Para estructurar la página: pestañas, un botón, un separador (línea, espacio, ola, diagonal o bisel), una cabecera en mitad de la página, un bloque compartido (escrito una vez, colocado en varias páginas, corregido en todas a la vez) y una pila, una zona que contiene otras para una imagen alta junto a dos zonas apiladas.
- Lo que rellena el visitante: un formulario del sitio, una encuesta, una reserva de citas por franjas, un simulador de presupuesto, los comentarios de la página, la suscripción al boletín y su aviso RGPD.
- La información práctica: los horarios de apertura y los próximos cierres, una disponibilidad, una cuenta atrás, una tarjeta de visita que se guarda en los contactos, una dirección con su itinerario, una carta con sus precios, un código QR.
- Las redes y las integraciones: una publicación al estilo de una red social, el feed de Instagram, las reseñas de Google, la actividad de GitHub, la última actividad del sitio, un mapa de viaje etapa por etapa, un calendario editorial, una presentación.
- Una zona puede convertirse en una banda que se desplaza más despacio que la página, o quedarse fija mientras su vecina se desplaza.
- Un fondo (tarjeta, tintado, color de acento, o un color, un degradado o una imagen elegidos), su propio contraste, su color de acento y el de sus estados al pasar el ratón, por encima de los de la página.
- Una aparición al desplazarse: fundido, deslizamiento desde abajo o un lado, zoom o desenfoque.
- Mostrarse solo entre dos fechas, o solo a los miembros conectados, y un ancla para que un enlace lleve directamente a ella.