Cómo y por qué configurar las Interrupciones de Línea

Best practice > Paso 2 - Plantilla > Cómo crear un Sitio Web optimizado para dispositivos móviles > Cómo crear un Sitio Web Adaptable >

Cómo y por qué configurar las Interrupciones de Línea

Previous pageReturn to chapter overviewNext page

Mediante las herramientas que hay en la ventana Ajustes de Adaptabilidad es posible hacer que cada Página del Sitio Web se pueda adaptar a los diferentes dispositivos en los que será vista, definiendo cómo debe cambiar en relación a los puntos de interrupción establecidos.

En concreto trabajando con la edición Professional, en esta ventana, después de haber definido la ordenación de los Objetos y de haber decidido qué Objetos hacer invisibles, es posible establecer para cada punto de interrupción si añadir Interrupciones de Línea y dónde hacerlo.

Una Interrupción de Línea sirve para hacer que un Objeto o un Bloque de Objetos situados en una línea de la Rejilla de maquetación se coloquen en una nueva línea para resoluciones inferiores a la del punto de interrupción seleccionado. En la práctica, añadir una Interrupción de Línea significa insertar un "punto y aparte" forzado.

Para activar el modo que permite añadir las Interrupciones de Línea basta con pulsar el botón Interrupciones de Línea. Una vez iniciado este modo, en la Rejilla se dibuja una línea punteada gris en todos los puntos en los que es posible insertar una Interrupción de Línea. Basta pulsar sobre una de estas líneas para insertar una Interrupción de Línea, que tras esto pasará a ser de color rojo. Pulsando una segunda vez sobre una Interrupción de Línea ya añadida, esta se elimina. Una vez concluida la configuración de las Interrupciones de Lïnea, basta pulsar de nuevo el botón Interrupción de Línea para confirmar y salir del modo.

Imagen 1. La Rejilla en modo Interrupción de Línea

Imagen 1. La Rejilla en modo Interrupción de Línea

Para comprender mejor el mecanismo, obsérvese la imagen de ejemplo, donde en el punto de interrupción Escritorio han sido añadidas Interrupciones de Línea antes del Objeto 3 y tras el Objeto 7:

Immagine 2. Struttura per il breakpoint Desktop

Immagine 2. Struttura per il breakpoint Desktop

Es importante advertir que el símbolo de Interrupción de Lïnea refleja la ordenación configurada. Con esto se intenta dar la idea de que, por ejemplo, el Objeto 7 se colocará sobre el Bloque de los Objetos 8, 9 y 10, dado que el orden de los Objetos para esa línea va de derecha a izquierda.

Dada la ordenación que ha sido definida, las Interrupciones de Línea insertadas y considerando el hecho de que el Objeto 2 ha sido hecho invisible, la estructura de Página en el punto de interrupción siguiente al de Escritorio se presenta como sigue:

Imagen 3. Estructura para el punto de interrupción siguiente al de Escritorio

Imagen 3. Estructura para el punto de interrupción siguiente al de Escritorio

Como se puede ver, el Objeto 2, que había sido hecho no visible, ya no está presente, pero esto no altera la ordenación de los Objetos, que permanece inalterada. La Interrupción de Línea fuerza a los Objetos 3 y 4 a colocarse en la línea 2 de la Rejilla, dejando que el Objeto 1 ocupe completamente la línea 1. Sin la Interrupción de Línea, los Objetos 1, 3 y 4 habrían seguido dispuestos uno al lado del otro en la línea 1, ocupando cada uno 1/3 del espacio disponible a lo ancho.

De manera análoga, la segunda Interrupción de Línea lleva los Objetos 8, 9 y 10 a no ser ya parte de un único Bloque y a situarse en líneas nuevas, bajo el Objeto 7.

Es importante advertir que, cuando un Objeto se dispone en varias columnas, en el paso de un punto de interrupción al siguiente se mantiene la misma proporción a lo ancho. En la Imagen 1 se ve, por ejemplo, que en el punto de interrupción Escritorio el Objeto 5 ocupa 3 columnas de 4 disponibles: esto significa que tiene un ancho del 75% de la línea. Esta proporción se mantiene también en el punto de interrupción siguiente (Imagen 3), aunque los otros Objetos alineados en el eje a lo ancho no siguen el orden anterior.

 


Best practice:

-

Cómo crear un Sitio Web optimizado para dispositivos móviles

-

Cómo crear un Sitio Web Adaptable

-

Cómo funciona el proceso de ordenación de los Objetos