En el Diseño Web Adaptable, cualquiera que sea el nivel de complejidad del Sitio web que se quiere realizar, es fundamental desarrollar una buena estrategia para la gestión de los contenidos, preguntándose no solo qué contenidos deben estar sino también cómo deben ser presentados:
▪ | ¿Qué contenidos deben incluirse en una Página? |
▪ | ¿Deben mantenerse los mismos contenidos tanto para dispositivos móviles como para el entorno escritorio? |
▪ | En caso contrario, ¿qué contenidos deben eliminarse en los dispositivos móviles? |
▪ | ¿En qué orden es oportuno colocar los contenidos? |
Una buena estrategia es hacer una lista de todos los contenidos que deben estar presentes en una Página y ordenarlos de mayor a menor importancia: de este modo es más fácil identificar los contenidos esenciales, aquellos que deben permanecer disponibles siempre, y los contenidos accesorios que en cambio pueden ser ocultados cuando, en resoluciones más bajas, es preciso presentar solo aquello que es realmente útil. Obviamente, esta operación de ordenación debe repetirse para cada Página del Sitio web.
Para comprender mejor este mecanismo, el ejemplo clásico es el del Sitio Web de un restaurante. Cuando el Sitio se ve en entorno escritorio, se puede contar mucho con imágenes y animaciones que exhiben los diferentes platos del menú para despertar el interés y las ganas de probarlos en los Usuarios. Pero cuando el mismo Sitio se visita desde un dispositivo móvil, se puede suponer que el Usuario esté más interesado en leer las valoraciones o en encontrar información de contacto más que en ver imágenes de gran tamaño. Se hace por tanto necesario ahorrar en imágenes para complacer las exigencias de un usuario que se sirve de un dispositivo menos capaz (pantalla pequeña, posible ausencia de banda ancha, etc.) y que en un contexto de movilidad tenga necesidad de informaciones rápidas y precisas.
En WebSite X5, una vez creada la Página tal como se debe mostrar en entorno escritorio (ver Cómo configurar una página a través de la rejilla de maquetación), es posible configurar qué cambios debe sufrir en función de los diferentes puntos de interrupción establecidos. En concreto, hay que proceder como se explica a continuación:
▪ | En el Paso 4 - Páginas , crear la Página arrastrando a la Rejilla de maquetación los Objetos necesarios y procediendo al añadido de los diferentes contenidos. La Página así creada es la que se mostrará para resoluciones superiores al punto de interrupción Escritorio. |
▪ | Una vez concluida la conformación de la Página, pulsar el botón Adaptable para abrir la ventana Ajustes de Adaptabilidad. En esta ventana está disponible la Barra de Adaptabilidad, que ofrece todas las Vistas determinadas por los puntos de interrupción activados para el Sitio web (mediante la ventana Resoluciones y Diseño Adaptable). Se debe proceder por orden, comenzando por seleccionar en la Barra de Adaptabilidad con la Vista Escritorio y pasando a continuación a seleccionar todas las demás hasta la Vista Smartphone. |
▪ | Una vez seleccionada la Vista Escritorio, en la Rejilla se reproduce la configuración establecida en la ventana Creación de la página. Pulsar sobre el botón Ordenación para activar el modo que permite proceder a la ordenación de los Objetos presentes en la Rejilla. Sobre cada Objeto presente en la Rejilla se muestra un número asignado en función de la ordenación efectuada de manera automática por el programa. |
▪ | Modificar la ordenación de los Objetos según la importancia que tienen los diferentes contenidos y cómo se desea que estén dispuestos en la Página. Para proceder a la ordenación es posible seguir diferentes caminos: |
• | Eligiendo Ordenación | Ordena todos los Objetos desde el principio, se debe empezar pulsando sobre el Objeto que se quiere colocar primero y después continuar pulsando en orden sobre todos los demás Objetos. |
• | Eligiendo Ordenación | Proseguir con la ordenación desde un Objeto, se debe pulsar sobre el Objeto desde el que se quiere continuar en la ordenación. Todos los Objetos anteriores se confirman mientras que para todos los Objetos siguientes es necesario pulsar sobre ellos para definir su posición en la ordenación. |
El procedimiento de ordenación termina:
• | Cuando se llega a pulsar sobre el último Objeto que hay en la Página. |
• | Pulsando en Ordenación | Completar la ordenación: termina el proceso confirmando el orden actual. |
• | Pulsando en Ordenación | Anular ordenación: termina el proceso anulando los cambios efectuados y restableciendo el orden inicial. |
WebSite X5 guía en el proceso de ordenación: al seleccionar un Objeto todos los Objetos sobre los que se puede pulsar para establecer el que debe seguirlo quedan resaltados con un borde rojo. El orden configurado para la Vista Escritorio se mantendrá también para todas las demás Vistas.
▪ | Pulsar el botón Mostrar/Ocultar Objeto para iniciar el modo que permite configurar los Objetos como invisibles. Pulsar sobre los Objetos que a resoluciones inferiores a la actualmente seleccionada no deberán mostrarse. Pulsar una segunda vez sobre el botón Mostrar/Ocultar Objeto para confirmar y salir de este modo. |
▪ | Pulsar sobre el botón para iniciar el modo en el que es posible modificar la alineación de los Objetos forzando a algunos de ellos a colocarse en una nueva línea a resoluciones inferiores a la de la Vista Escritorio (actualmente seleccionada). En todos los puntos en los que es posible insertar una Interrupción de Línea aparece una línea punteada gris: pulsar sobre estas líneas para configurar las Interrupciones de Línea deseadas. Pulsar una segunda vez sobre el botón Interrupción de Línea para confirmar y salir de este modo. |
▪ | Trabajando con la edición Pro es posible que hayan sido incluidos hasta 10 puntos de interrupción en total. Si hay Vistas intermedias, utilizar la Barra de Adaptabilidad para seleccionar la Vista siguiente a la de Escritorio. La Rejilla se actualizará en función de lo definido para la Vista Escritorio: sobre esta nueva configuración, continuar configurando, si fuese necesario, otros Objetos como no visibles y añadiendo otras interrupciones de línea. Repetir estos pasos para todas la Vistas siguientes. |
▪ | Una vez llegado a la Vista Smartphone no es necesario hacer nada más ya que todos los Objetos que hayan quedado como visibles simplemente serán alineados, es decir colocados uno bajo el otro, según el orden inicialmente definido. |
Como se deduce de lo explicado, la Rejilla reproduce la estructura que la Página asume en el intervalo de resoluciones identificado por la Vista seleccionada. Todos los cambios que se realicen determinarán, en cambio, la estructura que la Página asumirá para el intervalo de resoluciones asociado a la Vista inmediatamente sucesiva.
|
Cuando se crea una nueva Página en un Sitio web que se quiere hacer Adaptable, es aconsejable hacer que en la Rejilla de maquetación no haya Celdas vacías. El programa, de hecho, trata las Celdas vacías como si fueran Objetos (vacíos) y asigna a cada uno de ellos una posición en la ordenación: estas posiciones no podrán ser modificadas sino que influirán en las posibilidades de ordenación de los Objetos reales. Para mantener el mayor grado de libertad a la hora de ordenar los Objetos es mejor por tanto evitar tener Celdas vacías añadiendo mejor Objetos vacíos: si han sido añadidos manualmente, estos Objetos vacíos no influirán en la composición de la Página y podrán ser ordenados manualmente.
|
|