Best practice > Paso 2 - Plantilla > Cómo crear un Sitio Web optimizado para dispositivos móviles > Cómo crear las versiones para Escritorio y dispositivos móviles de un Sitio Web

El objetivo de ofrecer a los Visitantes la mayor satisfacción posible durante la navegación de un Sitio web, independientemente del dispositivo que utilicen, puede alcanzarse de diferentes maneras. Un camino pasa por la aplicación del Diseño Web Adaptable, un criterio de diseño que contempla que se cree un único Sitoi web capaz de adaptarse automáticamente a los diferentes dispositivos. Un camino alternativo contempla en cambio que se creen versiones diferentes del mismo Sitio web, cada una publicada en un URL diferente y optimizada para su vista en un determinado dispositivo.

Respecto al Diseño Web Adaptable, la configuración con URLs separados permite gestionar proyectos más simples porque estarían pensados especialmente para determinados dispositivos, pero tiene la desventaja de que en caso de producirse actualizaciones o modificaciones, estos deberían repetirse para todos los Proyectos.

Suponiendo que queremos crear una versión Escritorio, una versión para Tableta y una versión para Smartphone de un Sitio web, es posible utilizar la Página de Entrada para configurar el reenvío en función de la resolución del dispositivo que se haya identificado.

▪	En primer lugar es preciso crear el Sitio web asociado a la versión Escritorio, definiendo su estructura y contenidos.

▪	En el Paso 1 - Ajustes del Sitio web \| Avanzadas pulsar sobre el botón Página de Entrada y, en la ventana correspondiente, activar la opción Mostrar la página de Entrada y seleccionar la opción Identificar automáticamente la resolución.

▪	Por medio de las herramientas disponibles, conformar la Lista de puntos de interrupción. A continuación, pulsar el botón Agregar... para añadir un nuevo punto de interrupción a los definidos por defecto y ajustar su valor a 480px.

De esta manera se tendrán 3 puntos de interrupción que conforman 3 diferentes intervalos: el primer intervalo comprende todas las resoluciones superiores a la de la Plantilla actualmente seleccionada, el segundo intervalo comprende las resoluciones comprendidas entre la del punto de interrupción configurado manualmente y la de la Plantilla actualmente seleccionada, y por último el tercer intervalo comprende las resoluciones inferiores a la del punto de interrupción configurado manualmente.

Para la vista "Escritorio", correspondiente al primer intervalo, se propone automáticamente el Proyecto actual y no es necesario hacer nada más. Para las demás vistas, en cambio, es necesario configurar el enlace a las versiones adecuadas del Sitio web.

▪	En la Lista de puntos de interrupción, seleccionar la "Vista 1" correspondiente al segundo intervalo y pulsar el botón Editar... para abrir la ventana Ajustes del Punto de Interrupción.

▪	En el campo URL para este Punto de Interrupción, especificar el URL del Sito web preparado para la vista en Tabletas: por ejemplo, http//www.misitio.es/tablet/, si se cuenta con publicarlo en la subcarpeta "tablet" de la carpeta principal del Servidor.

▪

Repetir las mismas operaciones para la vista "Smartphone" correspondiente al tercer intervalo, asociándolo al URL correspondiente, por ejemplo http//www.misitio.es/smartphone/, si se piensa publicarl la versión para Smartphone del Sitio web en la subcarpeta "smartphone" de la carpeta principal del Servidor.

Hecho esto, el Sitio web está preparado para el reenvío en función de la resolución del dispositivo que se haya identificado, pero faltan todavía los Sitios web correspondientes a las versiones Tableta y Smartphone.

▪

Para avanzar más rápidamente en la creación del Sitio web para la versión Tableta, crear una copia del Sitio para Escritorio: en la ventana inicial Elección del proyecto , seleccionar el Proyecto del Sitio para Escritorio y pulsar el botón Duplicar. Pulsar a continuación el botón Renombrar para cambiar el nombre del nuevo Proyecto por uno más adecuado.

▪	Abrir la copia del Proyecto y continuar aportando todos los cambios a la Plantilla y a los contenidos que se consideren oportunos.

▪	En el Paso 1 - Ajustes del Sitio web \| Avanzadas, acceder a la ventana Página de Entrada y desactivar la opción Mostrar la página de Entrada.

▪	Una vez terminado el Proyecto de la versión Tableta del Sitio web, repetir el mismo procedimiento para preparar también el Proyecto correspondiente a la versión Smartphone.

Para la publicación en el Servidor de los sitios web realizados es preciso proceder de la siguiente manera:

▪

Publicación de la versión Escritorio del Stio web: la versión Escritorio del Sitio es aquella a la que está asociada la Página de Entrada. Procediendo a la publicación se creará un archivo index.html, correspondiente a la Página de Entrada, que se guardará en la carpeta de publicación. Para respetar los URL definidos para las otras versiones del Sitio web, es preciso crear en el Servidor las subcarpetas previstas: "tablet" y "smartphone".

Una vez finalizado este paso, la versión Escritorio del Sitio web estará online y en la Página de Entrada estará activo el código que identifica la resolución del Explorador y configura en consecuencia el reenvío a las otras versiones del Sitio web.

▪	Publicación de la versión Tableta del Sitio web: para que el reenvío presente en la Página de Página de Entrada a la versión Tableta del Sitio funcione, publicar el Proyecto en la subcarpeta "tablet" previamente creada.

▪	Publicación de la versión Smartphone del Sitio web: para que el reenvío presente en la Página de Página de Entrada a la versión Smartphone del Sitio funcione, publicar el Proyecto en la subcarpeta "smartphone " previamente creada.

Google admite expresamente la configuración con URLs separados para versiones Escritorio y Dispositivos Móviles del mismo Sitio web pero se recomienda utilizar algunas anotaciones para permititr a sus algoritmos interpretarlas correctamente. En concreto, Google pide lo siguiente:

▪	Que en la Página para Escritorio se añada la etiqueta link rel="alternate", que dirige al URL para dispositivos móviles correspondiente.

▪	Que en la Página para Dispositivos Móviles se añada la etiqueta link rel="canonical", que dirige al URL para Escritorio correspondiente.

Este tipo de anotación indica a los algoritmos de Google que los dos URLs tienen contenidos equivalentes y que deberían considerarse como una única entidad en lugar de como dos entidades distintas. Este punto es muy importante, ya que si las versiones Escritorio y Dispositivos Móviles de la Página son consideradas como dos entidades distintas, en los resultados de las búsquedas se mostrarán tanto el URL para escritorio como aquel para dispositivos móviles. En este caso, además, para ambas Páginas la clasificación podría bajar por una posible penalización debida a la presencia de contenidos duplicados.

Para configurar estas anotaciones es preciso prestar atención a lo siguiente:

▪	mantener una relación 1:1 entre las Páginas para Escritorio y las correspondientes Páginas para dispositivos móviles. En concreto, es necesario evitar añadir anotaciones en muchas Páginas Escritorio que se refieran a una misma Página para dispositivos móviles (y viceversa).

▪	configurar los reenvíos solo entre Páginas realmente relacionadas.

Trabajando con WebSite X5, la manera más sencilla de proceder es crear el Sitio para la versión para dispositivos móviles como una copia exacta del Sitio para la versión Escritorio. De este modo, en efecto, ambos Sitios web tienen exactamente el mismo número de Páginas (archivos con el mismo nombre) y es fácil establecer una correspondencia 1:1 entre ellas.

Retomando el ejemplo anterior y por tanto suponiendo que se deba añadir las anotaciones requeridas por Google para gestionar las versiones Escritorio, Tableta y Smartphone de un Sitio web, es necesario lo siguiente:

▪	Abrir el proyecto del Sitio web para la versión Escritorio y en el Paso 1 - Ajustes del Sitio web \| Avanzadas, ir a la ventana Estadísticas y Código y abrir la sección Código.

▪	En el campo Código personalizado, seleccionar la opción Antes del cierre de la etiqueta HEAD y escribir las siguientes anotaciones:

Después de haber guardado los cambios efectuados, se puede continuar trabajando con el Sitio web de la versión Tableta:

▪	Abrir el Proyecto del Sitio web para la versión Tableta y, al igual que para el otro Proyecto, ir al Paso 1 - Ajustes del Sitio web \| Avanzadas, acceder a la ventana Estadísticas y Código y abrir la sección Código.

▪	En el campo Código personalizado, seleccionar la opción Antes del cierre de la etiqueta HEAD y escribir la siguiente anotación:

▪	Repetir las operaciones realizadas para el Sitio para Tableta también para el Sitio para Smartphone. La anotación que hay que introducir no varía.

Para comprender mejor el funcionamiento que se acaba de describir, piénsese lo siguiente:

▪	Configurando las anotaciones mediante la ventana Estadísticas y Código estas se añaden automáticamente al código de todas las Páginas de los Sitios web.

▪	En las anotaciones, como valor del atributo href se debe introducir el URL de la Página en la que se está trabajando: usando la cadena [CURPAGE] el nombre del archivo referido a la Página lo identifica y lo introduce automáticamente el programa.

▪	En las Páginas de la versión Escritorio del Sitio web es necesario utilizar la etiqueta link rel="alternate" para declarar todas las alternativas disponibles: en este caso concreto se ha repetido 2 veces para vincular tanto la versión para Tableta como aquella para Smartphone.

▪

En la anotación de la etiqueta link rel="alternate" es necesario declarar también cuándo se deben presentar las versiones Smartphone o Tableta de un Sitio web en lugar de aquella para Escritorio. En el código de ejemplo indicado, las cadenas de media query definen que para resoluciones inferiores a 480px Google debe presentar el URL de la versión Smartphone, mientas que para resoluciones comprendidas entre 481px y 1024px debe presentar la de la versión Tableta del Sitio web.

En el caso de que los Sitios web de las versiones Escritorio, Tableta y Smartphone no contengan exactamente las mismas Páginas y/o contengan Páginas correspondientes entre sí pero con nombres diferentes, es necesario intervenir manualmente en el código de cada una de las Páginas para introducir correctamente las anotaciones necesarias.

▪	Abrir el proyecto del Sitio web para la versión Escritorio. En el Paso 3 - Mapa seleccionar la Página en la que se quiere introducir cambios y pulsar el botón Propiedades.

▪	En la ventana Propiedades de la página abrir la sección Avanzado y posicionarse en el campo Código personalizado.

▪	Seleccionar la opción Antes del cierre de la etiqueta HEAD y escribir las siguientes anotaciones:

Donde http//www.misitio.es/smartphone/page-1.html y http//www.misitio.es/tablet/page-1.html son respectivamente los URL de las Páginas del Sitio web en la versión para dispositivos móviles y de la versión para Tabletas correspondientes al URL del Sitio web de la versión Escritorio en la que se está trabajando.

▪	Repetir el último paso para todas las Páginas del Sitio web para introducir en cada una de ellas las anotaciones correspondientes con los URL de las Páginas para Smartphone y para Tableta.

Un trabajo análogo se debe hacer para las Páginas del Sitio web de la versión Smartphone y de la versión Tableta. En estos casos, la anotación que hay que introducir es la siguiente:

Donde http//www.misitio.es/desktop/page-1.html es el URL de la Página del Sitio web en la versión Desktop que corresponde al del Sitio en la versión Smartphone o Tablet con la que se está trabajando.

Best practice:

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