Cuando se procede a la realización de un Sitio Web Adaptable es importante establecer para cada Página una jerarquía de contenidos a fin de poder identificar qué contenidos deben permanecer y cómo deben situarse cuando el Sitio está siendo consultado en resoluciones inferiores a la del entorno escritorio.
En WebSite X5 la definición de cómo cada Página debe cambiar en relación a los puntos de interrupción establecidos se efectúa en la ventana Ajustes de Adaptabilidad.
Esta ventana presenta una Barra de Adaptabilidad con la lista de los puntos de interrupción activados y una Rejilla que reproduce la configuración de Página definida para el punto de interrupción seleccionado: lo primero que es preciso hacer es definir la ordenación de los Objetos presentes.
Definir la ordenación de los Objetos significa establecer en qué orden estos deben colocarse en el momento en que el ancho de la ventana del Explorador ya no es suficiente para permitir su visionado en modo escritorio.
En la Rejilla cada Objeto añadido muestra el icono asociado al tipo de contenido (Texto, Imagen, etc.) y un número que indica la posición que ocupa en la ordenación.
En realidad los Objetos están ordenados automáticamente por el programa, pero este orden por defecto podría no ser el deseado, por lo tanto es aconsejable comprobar su corrección sobre la base de los contenidos, y si fuese necesario, intervenir modificándolo manualmente.
Para activar el modo de ordenación de los Objetos es necesario seleccionar la Vista Escritorio y pulsar el botón 
Ordenación: los Objetos añadidos se vuelven semitransparentes y algunos aparecen bordeados en rojo para indicar que pueden ser seleccionados.
|
El objetivo del proceso de ordenación es disponer todos los Objetos que haya en una Página de modo que puedan ser alineados en el orden correcto. El programa valora todas las posibilidades de ordenación, y en cada momento realza en rojo solo los Objetos que pueden ser seleccionados sin causar discontinuidades en el proceso de ordenación que impidan un correcto alineado de todos los Objetos. |
En este momento ya es posible empezar, pulsando sobre un Objeto de entre los bordeados en rojo, para establecer cuál debe ser el primer Objeto. Tras seleccionar un Objeto, este vuelve a ser completamente opaco y muestra el número adoptado. Todos los demás Objetos permanecen todavía semitransparentes, y si el caso lo requiriese, el número que indican se actualiza.
En función del Objeto sobre el que se ha pulsado y de cómo todos los Objetos están introducidos en la Rejilla de maquetación, cada vez cambian los Objetos bordeados entre los que es posible elegir cuál debe ser el siguiente en el orden.
Para comprender mejor esta parte, obsérvese la imagen de ejemplo:
Imagen 1. Estructura inicial
Con esta configuración de Página, cuando se inicia el modo Ordenación, el programa bordea en rojo todos los Objetos de la primera línea porque solo es posible elegir entre estos el que debe considerarse el primero de la lista.
Pulsando sobre el Objeto 1 la situación en la Rejilla cambia como se ve a continuación:
Imagen 2. Clic sobre 1: elección entre 2, 3 y 4
Como se puede ver, pulsando sobre el Objeto 1 se confirma su posición y el programa pide elegir el segundo entre los Objetos 2, 3 y 4.
El descrito es solo uno de los órdenes posibles: sobre la base de los contenidos podría ser más apropiado establecer como primer Objeto del orden uno cualquiera de los otros Objetos presentes en la primera línea de la Rejilla.
Continuando con el ejemplo, imaginemos que hemos confirmado la posición de los Objetos 1, 2 y 3. En este punto, el programa ofrece la posibilidad de elegir entre pulsar sobre el Objeto 4 o sobre el Objeto 5.
Imagen 3. Elegir entre 4 o 5
Decidirse por pulsar sobre el Objeto 4 en lugar de sobre el Objeto 5 tiene consecuencias en las elecciones sucesivas. En el primer caso, en efecto, se determina una estructura de Página que se articula en dos líneas, en el segundo caso, en cambio, una estructura que se articula en dos columnas.
Imagen 4. Clic sobre 4: estructura en líneas
Imagen 5. Clic sobre 5: estructura en columnas
Durante el proceso de ordenación se pueden configurar estructuras en las que se crean Bloques de Objetos: en la Imagen 5, por ejemplo, los Objetos 1, 2, 3 y 4 forman un Bloque, así como los Objetos 5 y 6 forman otro. Un Bloque de Objetos se comporta como si fuese un Objeto único, y para mayor claridad aparece señalado en la Rejilla apenas se forma.
Imagen 6.
Imagen 7.
Las imágenes 6 y 7 muestran cómo diferentes elecciones de ordenación crean Bloques de Objetos diferentes, que al final determinan estructuras de Página alternativas.
En líneas generales, un Bloque de Objetos no tiene por qué permanecer como tal en todas las Vistas.
Imagen 8. Bloque de Objetos
en la vista Escritorio
Imagen 9. Haciendo no visible el Objeto 4, en la vista sucesiva el Bloque ya no se forma
En la Imagen 8, por ejemplo, los Objetos 1, 2 y 3 forman un Bloque porque están al lado del Objeto 4, situado sobre ambas líneas. Pero si como se observa en la Imagen 9 se inserta una interrupción de línea entre el Bloque y el Objeto 4 (lo cual es posible trabajando con la edición Pro) o si se hace invisible el Objeto 4 en la Vista siguiente los Objetos 1, 2 y 3 ya no tienen al lado otros y ya no forman un Bloque.
Cuando un Bloque de Objetos permanece como tal en todas las Vistas (con la excepción de la Vista Smartphone, en la que los contenidos de la Página se presentan alineados) y no hay modo de intervenir para deshacerlo, se lo llama Bloque Indivisible. También los Bloques Indivisibles aparecen en la Rejilla y están resaltados con un color diferente respecto al utilizado para los Bloques normales.
Imagen 10. Ejemplo de Bloque Indivisible
La imagen 10 muestra un ejemplo de Bloque Indivisible. Como se puede ver, la disposición "en forma de flor" de los Objetos no permite identificar una estructura en líneas o en columnas: esto reduce significativamente las posibilidades de ordenación , no permite la inserción de interrupciones de línea entre los Objetos afectados (función disponible en la edición Pro) y no permite hacer invisible uno de los Objetos sin hacer automáticamente invisibles también a todos los demás Objetos del Bloque. Por lo tanto, aunque es posible gestionarlos, cuando se presentan Bloques Indivisibles es aconsejable revisar la disposición de los Objetos para intentar simplificarla y tener así mayor libertad de acción.
En conclusión, no es posible afirmar genéricamente que un orden sea más correcto o mejor que otro: todo depende de los contenidos que haya y de los resultados que se quieran obtener. Una vez establecida una ordenación es conveniente comprobar en el Navegador local cómo se ve la Página en los diferentes puntos de interrupción definidos. Si los contenidos siguen colocándose de manera coherente, significa que la ordenación configurada es funcional y puede ser mantenida.
Best practice:
