Con la creciente difusión de los dispositivos móviles y su cada vez más frecuente empleo para acceder a Internet, antes de proceder a la realización de un nuevo Sitio Web es preciso tener en cuente el público al que se dirigirá y decidir conscientemente si diseñarlo de manera que esté optimizado solo para su consulta en entorno Escritorio, más que para la navegación desde cualquier tipo de dispositivo. Un Sitio Web en el que aspecto gráfico y contenidos son capaces de adaptarse al tamaño del dispositivo en el que este está siendo consultado, ya sea un equipo de escritorio, una tableta o un smartphone; se lo define como adaptable.
|
Aún siendo la solución aconsejada, no es obligatorio que un sitio web sea adaptable. En función del Proyecto podría ser más conveniente, por ejemplo, optar por la realización de una versión doble escritorio/dispositivo móvil del Sitio. Por otro lado, podrían darse circunstancias en las que bastase la optimización básica que WebSite X5 garantiza, que se sirve de la capacidad de los exploradores de hacer zoom en las páginas para permitir verlas en dispositivos móviles. Para mayor información, ver Cómo crear un Sitio Web optimizado para dispositivos móviles |
Así pues, en esta sección es posible definir el tipo de Sitio web que se desea realizar, eligiendo entre:
| ▪ | Sitio web Escritorio: el Sitio web estará optimizado para su consulta en entorno Escritorio. Esto significa que el Sitio web se mostrará en dispositivos móviles de la misma manera en que se muestra en Escritorio: estructura y contenidos no sufrirán modificaciones en función de la resolución, sino que se podrá hacer zoom sobre ellos mediante el navegador. |
| ▪ | Sitio web Adaptable: el Sitio web estará optimizado para mostrarse en cualquier tipo de dispositivo, desde un equipo de Escritorio a un smartphone, de modo que se logre la mayor satisfacción posible de los Usuarios en la navegación, independientemente del dispositivo que empleen para ello. |
En caso de elegir realizar un Sitio web Escritorio, es preciso definir la:
| ▪ | Resolución del Sitio web: indica el valor expresado en píxeles de la anchura de las Páginas del Sitio web. El valor por defecto varía según la Plantilla elegida, pero en cualquier caso se puede modificar libremente. |
|
El valor de la Resolución del Sitio web predeterminado por defecto está calculado para obtener un Sitio web optimizado para verse a 1024x768 píxeles. |
En caso de elegir realizar un Sitio web Escritorio, es preciso definir los puntos de interrupción.
Un punto de interrupción es un punto sobre la línea imaginaria que expresa la resolución de los posibles dispositivos en los que se podrá ver un sitio web, en los que se produce alguna modificación del aspecto gráfico de la página.
Para mayor claridad, en la ventana se muestra un esquema que pone en escala los principales tipos de dispositivos.
Sobre la línea de las Resoluciones de Referencia están indicados los puntos de interrupción que corresponden a las resoluciones generalmente empleadas por cada dispositivo:
| ▪ | Escritorio: 960px |
| ▪ | Tabletas con orientación apaisada: 720px |
| ▪ | Tabletas con orientación retrato: 600px |
| ▪ | Smartphone con orientación apaisada: 480px |
| ▪ | Smartphone con orientación retrato: inferior a 480px |
Inmediatamente debajo se muestra la línea de las Resoluciones Configuradas , que por defecto, al abrir un nuevo Proyecto, propone 3 puntos de interrupción, que podemos definir como se expone a continuación:
| ▪ | Escritorio: define el tamaño a partir del cual el Sitio web se muestra siempre en modo escritorio. |
| ▪ | Intermedio: es un punto de interrupción que sirve para permitir un paso más fluido de la vista escritorio a la vista para dispositivos móviles. |
| ▪ | Smartphone: define el tamaño mínimo por debajo del cual el Sitio web se muestra en manera completamente lineal. |
Por defecto, las resoluciones asociadas a estos 3 puntos de interrupción se asumen automáticamente en función de la Plantilla actualmente seleccionada.
En las líneas de las Resoluciones Configuradas los segmentos delimitados por dos puntos de interrupción, correspondientes al intervalo de valores para el que está prevista una determinada vista, asumen colores diferentes. Para mayor claridad, los mismos colores se utilizan también para los iconos que hay en la Tabla disponible en la ventana Ajustes de Adaptabilidad y en la Barra de resoluciones disponible en el en la ventana Estructura de la Plantilla y Explorador empleado para el mostrado del Sitio web en Vista Previa.
Además de mostrarse en la línea de Resoluciones Configuradas, los puntos de interrupción aparecen enumerados en una tabla que indica los siguientes elementos:
| ▪ | Puntos de interrupción: en esta columna se enumeran todos los puntos de interrupción activados para el proyecto. Cada punto de interrupción está identificado por el valor de la resolución bajo la que se pone en funcionamiento. |
| ▪ | Vistas: en esta columna se indican todas las Vistas determinadas por los puntos de interrupción. Cada Vista tiene al lado un icono en forma de bolita, cada uno de un color diferente: ese mismo color se emplea para la línea de las Resoluciones Configuradas para el segmento correspondiente al intervalo al que se aplica esa Vista. Para mayor claridad, los mismos colores se utilizan también para los iconos que hay en la Tabla de la ventana Ajustes de Adaptabilidad y en la Barra de resoluciones disponible en en la ventana Estructura de la Plantilla y el Explorador empleado para el mostrado del Sitio web en Vista Previa. |
| ▪ | Intervalos: en esta columna se especifican los intervalos determinados por dos puntos de interrupción consecutivos para los que se ofrecerán sus Vistas correspondientes. Para la Vista Escritorio el intervalo no está comprendido entre dos puntos de interrupción sino que está definido genéricamente como superior al punto de interrupción más alto. |
Para modificar la lista de puntos de interrupción sugeridos y las Vistas que determinan, basta utilizar los comandos que hay al lado de la tabla:
| ▪ |  Agregar: añade un nuevo punto de interrupción especificando la resolución a la que debe activarse. Es posible establecer hasta un máximo de 10 puntos de interrupción en total. |
| ▪ | Editar...: permite modificar el valor de la resolución del punto de interrupción seleccionado. |
| ▪ | Eliminar: borra el punto de interrupción seleccionado. Mientras que el punto de interrupción Smartphone no puede ser eliminado, el punto de interrupción Escritorio puede ser seleccionado y eliminado, pero al hacerlo el siguiente punto de interrupción se convertirá automáticamente en el nuevo punto de interrupción Escritorio. Eliminando un punto de interrupción, todos los ajustes asociados a él (definidos mediante la ventana Ajustes de Adaptabilidad) se aplican al punto de interrupción inferior. Como mínimo deben existir al menos 2 puntos de interrupción, el de Escritorio y el de Smartphone. |
|
No es posible establecer a priori cuántos puntos de interrupción es oportuno activar: lo importante es configurar los puntos de interrupción para definir macrocategorías que cubran todos los casos y permitan garantizar un uso satisfactorio en cualquier dispositivo. |
De esta manera, tomando como ejemplo un Sitio web al que se le ha aplicado una Plantilla con un ancho de 960px, los 3 puntos de interrupción definidos por defecto determinan 4 intervalos, correspondientes a 4 diferentes modalidades de vista:
| ▪ | Punto de interrupción: 960px - Vista: Escritorio - Intervalo: Mayor o igual a 960px |
Para resoluciones superiores a las de este punto de interrupción, el Sitio web se mostrará en modo escritorio: esto significa que se emplea la Plantilla establecida para escritorio Vista escritorio (definida mediante la ventana Estructura de la Plantilla) y que los contenidos están dispuestos en función de cómo las Páginas han sido construidas en el Paso 4 - Páginas.
| ▪ | Punto de interrupción: 720px - Vista: Vista 1 - Intervalo: Comprendido entre 959px y 720px |
Para resoluciones comprendidas entre el punto de interrupción Escritorio y el punto de interrupción Intermedio, la Plantilla se presenta en función de lo definido para esta Vista en la ventana Estructura de la Plantilla. En este caso, el ancho del Contenido de la página se define en función de la resolución establecida para el punto de interrupción Intermedio: dado que la ventana del Explorador puede extenderse hasta la resolución fijada para el punto de interrupción Escritorio, el espacio sobrante lo ocupa el Fondo de la página. Los Objetos de las Páginas, en cambio, están dispuestos como en el intervalo anterior, correspondiente a la vista Escritorio.
En la edición Pro este punto de interrupción puede ser modificado o eliminado, y a diferencia de lo que sucede en la edición Evo, los Objetos de las Páginas, en cambio, están dispuestos en función de lo definido para esta Vista en la ventana Ajustes de Adaptabilidad.
| ▪ | Punto de interrupción: 480px - Vista: Vista 2 - Intervalo: Comprendido entre 719px y 480px |
Para resoluciones comprendidas entre el punto de interrupción Intermedio y el punto de interrupción Smartphone, el Sitio web se muestra a una sola columna: esto significa que todos los Objetos se muestran uno bajo el otro (respetando la ordenación y la elección de los Objetos que se quiere ocultar hecha en la ventana Ajustes de Adaptabilidad). Como para el Intervalo anterior, Este punto de interrupción puede ser modificado o eliminado. Como para el anterior, también para este intervalo la Plantilla se presenta en función de lo configurado para esta Vista en la ventana Estructura de la Plantilla: el ancho del Contenido de la página está fijado en 480px mientras que la ventana del Explorador puede alcanzar los 719px, quedando ocupada por el Fondo de la página.
En la edición Pro este punto de interrupción puede no solo ser modificado sino también eliminado, y a diferencia de lo que ocurre en la edición Evo, los Objetos de las Páginas no se disponen a una sola columna o fila sino que lo hacen conforme a lo establecido para esta Vista en la ventana Ajustes de Adaptabilidad.
| ▪ | Punto de interrupción: 0px - Vista: Smartphone - Intervalo: Menor de 479px |
El Sitio web se muestra igualmente a una sola columna. La Plantilla se presenta en función de lo establecido para esta Vista en la ventana Estructura de la Plantilla, y el ancho de la Página no está definido de manera absoluta sino relativa, a fin de que quede ocupado siempre el 100% del espacio disponible. En el Sitio web a una sola columna todos los Objetos se muestras uno bajo el otro (respetando el orden y la elección de los Objetos que se quieren ocultar hecha en la ventana Ajustes de Adaptabilidad) y estos están también configurados de modo que ocupan el 100% del espacio a lo ancho.
También en la edición Pro este punto de interrupción se muestra para ofrecer una visión completa del conjunto, pero no puede ser modificado ni eliminado.
|
Si se abre con la edición Pro un Proyecto realizado con la edición Evo para el que ha sido habilitado el Sitio Web Adaptable, automáticamente se importan todos los puntos de interrupción definidos. Trabajando con la versión Pro es posible activar nuevos puntos de interrupción y/o modificar los ya existentes. |
|
Cuando se inicia un nuevo Proyecto, el programa configura una Plantilla predefinida elegida al azar: esta Plantilla se mantiene hasta que se elige la Plantilla que se quiere usar. |
Best practice:
