Avatar for Martin Turner

by Martin Turner  |  mayo 26, 2022

Comprender los sitios web basados en el diseño y el poder de Flex

Content Design

QuarkXPress viene con una selección de plantillas cuidadosamente construidas para brindarle un comienzo rápido en la creación de un sitio web receptivo cuando el tiempo apremia.

Pero realmente puede mostrar su poder creativo cuando deja atrás las plantillas y comienza a crear sus propias páginas. Puede hacer esto usando la herramienta Flex para crear contenedores, convirtiendo elementos existentes en contenedores, o quizás lo más útil, arrastrando bloques y elementos al diseño desde la ventana Flex Layout Blocks.

El contenedor raíz

Con un diseño fijo, literalmente puede tomar una página impresa y convertirla en una página HTML5 fija. Si solo necesita obtener un documento impreso y darle alguna interacción básica, esa podría ser la solución adecuada. Sin embargo, para Flex, la estructura de la página es importante. Entender esto es lo conceptual más difícil de Flex.

Esencialmente, para que el navegador web (Safari, Chrome, Explorer, etc.) muestre correctamente la página de forma receptiva, todo debe estar dentro de otra cosa, con un contenedor raíz que contenga todas las demás cosas. Utilice la ventana Explorador de objetos flexibles para ver cómo funciona. Vale la pena explorar esto usando una plantilla primero.

Si solo hace algunos contenedores con la herramienta flexible, entonces no estarán uno dentro del otro. Puede verse bien en la página, y puede verse bien en algunos sitios web, pero cuando se muestra en un dispositivo diferente, será impredecible y casi seguro que no es lo que desea. Sin embargo, esto no tiene por qué ser un problema porque puede simplemente cortarlos en el Flex Object Browser y luego pegarlos en el contenedor que desee.

Los contenedores pueden estar dentro de otros contenedores, y luego tienes la jerarquía de filas, columnas y objetos. Las cosas pueden estar dentro de otras cosas, siempre que estén todas en el contenedor raíz.

Panel de medidas: container y flex

Si revisa el Panel de medidas con un objeto Flex seleccionado, verá dos pestañas nuevas: Contenedor y Flex. El Contenedor ocupa todo el ancho disponible; si es el Contenedor raíz, ese es el ancho de su dispositivo o de la ventana del navegador. Si está dentro de otro contenedor, es el ancho que se ha puesto a su disposición por la forma en que se divide ese Contenedor.

La pestaña Contenedor en el panel de medidas determina cómo contiene. Por ejemplo, ‘horizontal’ significa que los elementos de su interior se colocarán en orden horizontal; ‘vertical’ significa que se colocarán en orden vertical. Wrap determina lo que sucede cuando el contenedor se vuelve demasiado pequeño para las cosas que contiene. El Contenedor también puede tener relleno que actúe como margen interno.

La pestaña Flex determina cómo responde cuando el contenedor en el que se encuentra cambia de tamaño. Básicamente, está estableciendo reglas sobre lo que debe hacer: cuál es su ancho máximo, cuál es su ancho mínimo, etc.

Puede configurar todas estas propiedades de forma independiente, pero hay una forma más rápida.

Bloques de diseño flexible

Ventana>Flex Layout Blocks le brinda bloques que puede arrastrar a contenedores para crear rápidamente la página. Recuerda que, después del Layout inicial, siempre tienes que arrastrar algo dentro de algo. Si falla, simplemente córtelo y péguelo usando el Explorador de objetos Flex.

Estos bloques son elementos flexibles esenciales que ya han sido preparados con todas las propiedades de Contenedor y Flex que los harán funcionar. Estos se han realizado según los estándares web, por lo que no tiene que preguntarse «¿cuál es una buena cantidad de relleno?»

Hay un rastro útil de migas de pan en la parte inferior de este panel para que pueda ver dónde se encuentra en la jerarquía.

Fuera de la red

Notará que cuando crea el diseño, le permite especificar una cuadrícula. Esto tendrá muchas más columnas de las que normalmente usaría en un diseño de papel basado en cuadrícula. Flex usa esta cuadrícula para determinar cómo responden las cosas. Pero eso te deja con la pregunta: ¿cómo puedo hacer que mi sitio web se vea «diseñado» en lugar de simplemente ser una tabla llena de bloques y bultos?

La respuesta es que sus elementos gráficos no tienen que ser rectangulares. Puede tener esto usando archivos PNG de fondo transparente y archivos SVG (o gráficos vectoriales de otras fuentes que QuarkXPress convertirá a SVG para la salida).

Dentro de la jerarquía de contenedores, cada contenedor puede tener su propia imagen, así como cualquier cosa que haga dentro del contenedor. En otras palabras, puede tener imágenes en capas una encima de la otra usando fondos transparentes, de modo que las capas se animen de manera diferente entre sí y se muevan de manera diferente cuando se cambia el tamaño de la ventana del navegador. Toma un par de intentos antes de que te des cuenta de lo poderoso que es esto. Después de eso, debes evitar hacerlo demasiado quisquilloso.

Manténgalo limpio

La mayoría de las animaciones disponibles en diseños fijos también están disponibles en Flex. Antes de exagerar con estos, recuerde que el diseño es intrínsecamente autoanimado porque los elementos se mueven entre sí a medida que se cambia el tamaño. Demasiado movimiento solo confundirá al ser humano que realmente está tratando de dar sentido a su sitio web. Así que mantenlo simple, mantenlo limpio.

Flujo de trabajo flexible sugerido

Al experimentar, es divertido probar todo tipo de cosas, pero en un momento determinado desea trabajar con Flex y, en ese momento, necesita un buen flujo de trabajo. Incluso más que para la impresión, es fácil perderse en las posibilidades. Así que aquí hay un flujo de trabajo que puede ayudarte:

1) Propósito

Determinar cuál es el propósito funcional de este sitio. Todo fluye de esto.

2) Público objetivo

¿Quién lo va a usar: jugadores de 15 años o gerentes de banco de 60 años? No solo cambiará el estilo, sino también el método de interacción y el grado de diversión.

3) Mensaje

El sitio debe llevar al usuario a los mensajes clave. Esto significa que, a medida que se flexiona, todavía tienen que sobresalir.

4) Miniatura

Dibuje una miniatura de cómo debería verse en una hoja de papel antes de comenzar.

5) Elementos

Ten tus elementos gráficos y de texto listos. A menudo, estos ya existirán debido al trabajo de impresión o marca. Si desea utilizar objetos transparentes, asegúrese de guardarlos con transparencia como archivos PNG.

6) Construir sobre la ventana de referencia

Cree la página utilizando los bloques de diseño para que coincida con su miniatura. Haga esto en el tamaño predeterminado y pruébelo usando la vista previa de página HTML5.

7) Flexionarlo

En un navegador de escritorio, cambie la forma de la página y observe cómo responde. Tome notas sobre cómo debería responder de manera diferente. Luego regrese a la pestaña Flex en el panel de Medidas para hacer cambios. Es posible que también deba ir al Contenedor que se encuentra arriba; recuerde que los cambios que realice en la configuración del contenedor propio de los objetos afectarán a los objetos dentro de él, no a su propio comportamiento.

8) Vincular y animar

Cuando el flex funcione como se espera, agregue enlaces y animaciones, como botones de rollover. Este es también el punto para agregar un código HTML especial que puede haber elegido como fragmentos de código. Cualquier objeto puede funcionar como un minisitio web dentro de la página, sirviendo cualquier cosa que haga ese código.

9) Establecer etiquetas alternativas y metadatos

Cada elemento gráfico debe tener su etiqueta alternativa configurada para ser compatible con HTML5. Configúrelos uno por uno desde Elemento>Opciones de exportación. Para los objetos que no tienen contenido, como gráficos de relleno, puede hacer clic en la casilla de verificación «artefactos». Configure los metadatos en Diseño>Metadatos. Esto será crucial para los motores de búsqueda.

10) Implementar y probar

Cuando el sitio (o esta parte esté lista), impleméntelo en un servidor web y pruébelo en teléfonos inteligentes, tabletas, televisores inteligentes y diferentes navegadores en Mac y PC. Con la web, asume que si no la has probado, no funciona.

Mira el tutorial sobre Sitios web de diseño.

Copied to clipboard

Recent Blogs

La automatización de contenidos es esencial en farmacovigilancia: Cómo la plataforma de publicación NextGen de Quark ayuda a garantizar una distribución de medicamentos eficaz, precisa y segura

  • |

Creatividad sin fronteras:El viaje de Chris Martin como innovador creativo

  • |

Utilice el reconocimiento de IA en las bibliotecas de imágenes locales para buscar imágenes fácilmente

  • |