Multivistas

Las multivistas te permiten tener varias versiones del mismo sitio, como por ejemplo: el sitio en varias resoluciones, en varios idiomas, versión móvil, versión de accesibilidad, entre otros.

Publicado: Miércoles 10 de octubre de 2018 por David García
Última modificación: Domingo 29 de agosto de 2021

La multivista es una función de Prontus que permite tener varias versiones del mismo sitio, como por ejemplo: el sitio en varias resoluciones, en varios idiomas, versión móvil, versión de accesibilidad, etc. Prontus permite reutilizar los artículos ya creados, por lo que no es necesario duplicar los artículos para cada vista: simplemente establezca los campos para cada idioma y asegúrese de reemplazar las marcas por las de la vista correspondiente.

El servidor usa una Cookie, la cual definirá la vista a mostrar. Al apretar un link que permita el cambio de vista (por ejemplo, un botón "Sitio en Inglés"), se ejecuta una función JavaScript que cambia la cookie y redirige al sitio en la vista correspondiente. El servidor, por tanto, requiere el uso de una cookie. Dependiendo del valor, redirigirá a la vista correspondiente.

Configuración del servidor web en nginx

server {
    listen 192.168.14.20:80;
    server_name ejemplo.cl www.ejemplo.cl;
    root /var/www/ejemplo.cl/web;
    index index.html;
  error_log /var/wlog/ejemplo.cl/nginx-error.log;
    access_log /var/wlog/ejemplo.cl/access-nginx.log;   client_max_body_size 50M;   location ~ \.php {
        include global/php.conf;
    }     include global/restrictions.conf;
  include global/multivistas.conf;
    include global/prontus.conf; }

Es importante que el orden de los includes sea el indicado acá para el correcto funcionamiento de la multivista, debido que en “multivistas.conf” se definen variables utilizadas en la siguiente configuración.

El archivo multivistas.conf debe poseer la siguiente configuración:


if ($http_user_agent ~* '(Mobile|BlackBerry|Opera Mini|Opera/9\.50|PalmSource|Palm|Ericsson|lg-|MOT-|Motorola|Nokia|Sony CMD|Panasonic|PHILIPS|SAMSUNG|sec-|Sanyo|Siemens|Samsung|Philips|Rainbow|AvantGo|DoCoMo|Vodafone|J-PHONE|DDIPOCKET|PDXGW|ASTEL|PalmOS|Blazer|Windows CE|Minimo|Plucker|PalmSource|NetFront|iPhone|iPAQ|Symbian|UP.Link|Google Wireless Transcoder|iPod)') {
   set $vista '-movil';
}
 
if ($http_user_agent ~* ipad) {
   set $vista '';
}
 
if ($http_cookie ~* "vista=es") {
   set $vista '-es';
}
 
if ($http_cookie ~* "vista=en") {
   set $vista '-en';
}
 
if ($http_cookie ~* "vista=pt") {
   set $vista '-pt';
}
 
if ($http_cookie ~* "vista=de") {
   set $vista '-de';
}
 
if ($http_cookie ~* "vista=fr") {
   set $vista '-fr';
}
 
if ($http_cookie ~* "vista=movil") {
   set $vista '-movil';
}
 
if ($http_cookie ~* "vista=normal") {
   set $vista '';
}
if ($vista) {
rewrite ^(.*)site/artic/([0-9\_\-]*)/pags/(.*)$ $1site/artic/$2/pags$vista/$3 last;
rewrite ^(.*)site/edic/base/port/(.*)$ $1site/edic/base/port$vista/$2 last;
rewrite ^(.*)site/tax/port/([a-z0-9\_]*)/(.*)$ $1site/tax/port/$2$vista/$3 last;
rewrite ^(.*)site/tax/port/all/(.*)$ $1site/tax/port/all$vista/$2 last;
}

La primera condición define que si el navegador es móvil, cambia a la versión móvil. En el caso que se esté navegando desde un ipad, muestra la versión de escritorio. Las siguientes condiciones definen el caso que el sitio posea múltiples idiomas.

Configuración de Prontus para soporte multivista

En el archivo de configuración de Prontus debes especificar las multivistas a utilizar. Para ello. en el panel administración del sitio, debes ir a: 

Administrar → Configuración → Configuración Global

En la sección multivistas, debes agregar el nombre de la nueva multivista y presione "Agregar". Finalmente, guarda los cambios.

Convención de nombres
-en, -de, -es, -pt, -ja

Vista en un idioma en particular. Se sigue el formato ISO 639-1 para establecer el nombre.

res800, res1024

Resolución de pantalla, donde el número indica la resolución horizontal. -res800 indica la vista 800x600, -res1024 indica la vista 1024x768, -res1920 indica la vista 1920x1080

acc

Vista de accesibilidad

movil

Vista móvil, en caso que el sitio no sea responsivo.

en-acc, de-acc, en-movil, de-movil

Vista de accesibilidad o móvil en un idioma en particular.

Por lo general, trabajarás con macros a la hora de modificar los FID, por lo que para diferenciarlos de las otras vistas, se recomienda anteponer el nombre de la vista antes del nombre de la macro (por ej. “en_general_cabecera.html”).

Con la configuración anterior ya  puedes comenzar a trabajar con multivistas. Los directorios en los que debes comenzar a trabajar son los siguientes:

  • cpan

    • fid

  • plantillas

    • artic

      • fecha

        • pags-[nombre de multivista]

    • edic

      • nroedic

        • port-[nombre de multivista]

    • extra

      • yyyy

        • pags-[nombre de multivista]

    • tax

      • port

        • all-[nombre de multivista]

En la carpeta “cpan” están todos los FID de los artículos, los cuales debe modificar para agregar los campos multivista. Dentro de la carpeta plantillas están todas las vistas. En la carpeta artic debe agregar la carpeta pags-[nombre de multivista], donde [nombre de multivista] es el nombre de la multivista. En la carpeta edic debe agregar la carpeta port-[nombre de multivista]. En la carpeta extra están las plantillas de formularios, búsqueda, impresión, etc. Dentro de cada una de ellas, debe agregar la carpeta pags-[nombre de multivista]. En la carpeta tax/port debe agregar la carpeta all-[nombre de multivista].

Creación de artículos multivistas

Para crear un artículo multivista debe modificar el FID correspondiente a dicho artículo y agregar las nuevas marcas Prontus para dicha vista. A modo de convención de nombre, se recomienda usar el mismo nombre de la variable en la vista normal, añadiendo el nombre de la multivista separado por un guión bajo (por ej, para la marca “titular”, su marca en inglés debe ser “titular_en”). Esto sirve para cualquier tipo de variable, tales como fotos, campos de texto, editor de texto, archivos adjuntos, etc.

El ciclo de trabajo común para la creación de un artículo multivista es el siguiente:

  1. Modificar el FID del artículo correspondiente.

  2. Crear plantillas, colocando a las marcas el nombre de la multivista (ej. %%titular_en%%).

  3. Modificar los artículos existentes con los nuevos datos a agregar.

  4. Guardar y verificar que las marcas están siendo aceptadas.

Ver Multivistas en Plantillas de Artículos.

Creación de portada multivista

En el caso de las portadas se debe crear la plantilla de la nueva multivista y agregar las nuevas marcas. Cabe destacar que debe agregar artículos con las nuevas marcas, por lo que se recomienda tener artículos multivistas antes de crear las portadas.

El ciclo de trabajo común para la creación de una portada multivista es el siguiente:

  1. Crear plantilla, reemplazando las marcas por las de la multivista, Ejemplo, %%titular_en%%.

  2. Guardar la portada en Prontus y verificar que las marcas están siendo aceptadas.

Ver Multivistas en Portadas.