Flexionar o no flexionar al crear un sitio web
Flex es una tecnología que escala y reposiciona automáticamente elementos web para que funcionen en dispositivos de cualquier tamaño y forma. Esto se denomina diseño web receptivo y utiliza una característica integrada de HTML5 llamada «flexbox». No necesita saber esto para usarla. Casi todos los sitios web en estos días son «responsivos» y la mayoría usa Flex.
Probablemente vea una de las trampas de esto de inmediato: si el dispositivo cambia la escala y remodela el sitio web, ¿cómo sabe que se preservará la integridad de su diseño?
Hay dos respuestas a esto. La primera es probando, probando y volviendo a probar en una variedad de dispositivos. A veces, es posible que desee dibujar una línea y decir, «solo teléfonos inteligentes, tabletas y computadoras». La segunda es no usar Flex, sino el método anterior de crear una serie de diseños fijos. Puede crearlos en QuarkXPress usando ‘fijo’ en lugar de ‘flexible’ para insertar un script en su sitio web para que el dispositivo elija automáticamente el tamaño más cercano. Esta es también una forma de diseño web receptivo.
En última instancia, si desea un control absoluto sobre su sitio web, la creación de un conjunto de diseños usando «fijo» le dará el mejor resultado posible, pero también llevará más tiempo crearlo y actualizarlo.
La mayoría de los sitios web optan por Flex.
¿Cómo se usa Flex en QuarkXPress 2022?
Cuando crea un diseño nuevo, si hace clic en «digital» en lugar de «imprimir», obtendrá la opción Fijo o Flexible. Elige Flexión. Puede saltar directamente creando cosas y especificándolas como Flex, pero es mejor trabajar en etapas. Flex hace todo lo posible por parecerse a una impresión, pero no es una impresión y se comporta de una manera fundamentalmente diferente.
Esencialmente, con Flex, y la mayoría de las cosas en HTML5, todo está contenido dentro de otra cosa, en lugar de estar colocado en la página como lo está con la impresión. Si tiene esto en cuenta, su viaje Flex será más fácil.
La forma más sencilla de ver esto es abrir Ventana>Explorador de objetos flexibles y Ventana>Generador de páginas flexibles y arrastrar una de las plantillas al documento principal. Aunque estas plantillas pueden parecer un poco específicas o incluso quisquillosas, en realidad son muy poderosas y se pueden personalizar utilizando las herramientas de Quark que conoce de una manera que las plantillas de WordPress (por ejemplo) generalmente no pueden.
Haga clic en cualquier cuadro y verá que el Explorador de objetos Flex cambia para mostrarle dónde está. En el nivel superior tienes el Contenedor Raíz, y luego una serie de contenedores, filas, columnas y objetos.
En este momento, no necesitas jugar con ellos, solo saber que están ahí. Personalizar la plantilla le llevará un largo camino para producir un sitio web rápido cuando tiene que hacerse no solo rápido sino también correctamente.
Fundamentos de Flex en QuarkXPress
Dos tipos de diseño de sitios web son populares en este momento. Uno es el diseño estructurado tradicional con varias páginas. La otra es una sola página que se desplaza hacia abajo. Este tipo es en realidad más fácil de crear porque solo diseña una página muy larga con elementos colocados secuencialmente. Con las plantillas de QuarkXPress Flex, puede arrastrar plantillas adicionales una tras otra. Si se ve o se comporta de manera extraña, verifica que no hayas arrastrado uno dentro del otro; el navegador de objetos de Flex te permitirá verlo.
Para el diseño de varias páginas, cree varias páginas en QuarkXPress y luego, usando el panel de diseño de página y haciendo clic con el botón derecho o presionando Ctrl y haciendo clic, use Propiedades de la página para darles un nombre web y un nombre para mostrar.
Su página de inicio debe llamarse index.html por su nombre web. De lo contrario, el navegador no lo encontrará. Puede dar a otras páginas los nombres que desee, pero cíñase a letras, números, guiones y rayas. La mayoría de los servidores web distinguen entre mayúsculas y minúsculas, pero es mejor ceñirse a las minúsculas.
Cuando crea hipervínculos, mediante el panel de hipervínculos, elige «página» en lugar de «URL».
Por lo demás, puede aplicar cualquier interacción que desee desde la paleta Ventana>HTML5, pero tenga cuidado. Los días de la interacción multimedia en los sitios web quedaron atrás y la gente está acostumbrada a la filosofía de «menos es más». Mi recomendación personal es ceñirse a los botones y videos de YouTube y dejar todo lo demás.
Vista previa y publicación
Puede mover el controlador a la derecha del diseño para ver cómo cambiará a medida que cambie la forma, pero realmente necesita comprobarlo en un navegador. En la parte inferior de la pantalla, hay un pequeño «globo» que le ofrece una vista previa de la página HTML. Esto abrirá la página en su navegador predeterminado y podrá ver cómo aparecerá. Los enlaces no funcionarán, es una sola página. Para verificar los enlaces, abra la vista previa del diseño. Esto realmente lo abrirá como una publicación HTML5 en lugar de un sitio web, pero estará bien para consultarlo.
Para publicar, necesitará algo de espacio web, una URL (es decir, un nombre web) y un cargador FTP. Para el cargador, puede probar CyberDuck, que es gratis para una donación. Entonces es solo una cuestión de Archivo> Exportar como> HTML5 y luego arrastrar los archivos a su sitio web a través de CyberDuck (o lo que sea que use). Siempre que su URL ya esté funcionando, debería poder verla de inmediato. Si no puede, verifique que su página de inicio se llame index.html, y no Index.html o cualquier otra variación.
Si acaba de comprar la URL, o simplemente la apuntó a su espacio web (pídale instrucciones a su proveedor), generalmente demora 24 horas en estar disponible.
¿Cuándo usar Flex?
Las plantillas de QuarkXPress le permiten crear rápidamente un sitio web sencillo y elegante.
Para tener más control, puede crear el sitio desde cero utilizando el panel Bloques de diseño flexible y la herramienta Contenedor, que se encuentra en la paleta Herramientas. Más control, por supuesto, permite que más cosas salgan mal. Probablemente sea mejor experimentar primero con las plantillas integradas. Cuando construyas con Flex Layout Blocks y Container Tool, usa el Flex Object Browser para asegurarte de que todo esté en el lugar correcto.
Sin embargo, cuando se está desarrollando más allá de una simple página de desplazamiento o un sitio web estructurado pequeño, a menudo es el momento de redefinir el proyecto. Herramientas como PineGrow pueden convertir un diseño de QuarkXPress en un diseño de WordPress (un tercio de todos los sitios web y la mitad de todos los sitios web de sistemas de administración de contenido usan WordPress). En este punto, se está metiendo en un gran proyecto y probablemente ya no sea efectivo crear el código final en QuarkXPress.
Esta es la etapa en la que se puede usar mejor QuarkXPress para desarrollar un prototipo (los sitios web grandes pasan por meses de creación de prototipos antes de que estén listos para codificar). Los prototipos a menudo se hacen en PowerPoint, pero ese enfoque solo produce estructuras planas y puede haber una gran brecha entre las expectativas y la realidad. Al permitirle crear un prototipo de un sitio web Flex con elementos interactivos, QuarkXPress puede ser su arma secreta para comunicarse de manera efectiva con el equipo de codificación en todo momento.
Mira el tutorial sobre cómo crear un «Sitio web de 10 minutos».