2. Contenedor web

¿Para qué un contenedor web?

Para la elaboración del reportaje o informe digital necesitamos una aplicación que nos permita desarrollar e integrar este. Se trata de utilizar una aplicación web que nos facilite el proceso de “unir” en un mismo espacio todos nuestros contenidos multimedia del reportaje o informe.

Actualmente existen numerosas aplicaciones para el desarrollo web. Desde los editores de código (Editra, Notepad++…), las suites dedicadas (Adobe CS6 Cloud…), Frameworks (Eclipse, Flex…), Gestores de Contenido (CMS), Aplicaciones en navegador (WebNG o Cloud Computing), que nos permiten realizar completos desarrollos web e integrar nuestros informes multimedia de forma sencilla y ágil.

Entre las diferentes soluciones, los CMS (Content Management System) nos permiten trabajar de forma rápida y sencilla. Un CMS es, básicamente, un sistema que contiene un conjunto de herramientas destinadas a la producción de contenidos multimedia de forma sencilla y dirigida.Una característica básica de los CMS es que separan el contenido de su presentación: el contenido se almacena en una base de datos mientras que su presentación en la web se diseña y define en una plantilla.Así, permiten la creación de contenidos, el mantenimiento, la publicación, el control de presentación, el control de flujos de trabajo, la asistencia de sistemas de colaboración y construcción social de conocimiento, etc.

Por lo tanto, un “contenedor web” servirá para cubrir estas necesidades (una, varias a todas):

• Para agrupar los distintos contenidos digitales que se producen o enlazan
• Para publicar en Internet nuestros productos de comunicación digital
• Para configurar un entorno personalizado de comunicación y permitir el acceso (restringido o abierto) a través de la Red

Muchas opciones para elegir

En la actualidad, existen cientos de CMS en el mercado, cada uno de ellos con características y funcionalidades muy diferentes. Por lo tanto no existe un CMS universal. A la hora de abordar un proyecto en red, deberá atenderse a las necesidades específicas del proyecto para determinar cuál será el CMS más adecuado.

Simplificando, podemos hablar de cuatro tipos de soluciones adaptadas a nuestro caso, y que se ordenan en función de su sencillez vs potencia:

• Plataformas de publicación multimedia: Atavist
• Drag-and-drop WSB (Website Builder): Weebly
• CMS sencillo: WordPress.com – wordpress.org
• CMS avanzado: Joomla – Drupal

Nuestra elección: WordPress y Divi

Como contenedor utilizaremos el servicio web WordPress. Se trata de un CMS online que trabaja contra el navegador y cuyo almacenamiento reside en un servidor bajo el modelo SaaS (Software como servicio).

Su principal virtud es que permite componer proyectos web relativamente complejos mediante una interfaz muy sencilla, lo que facilita que nuestro esfuerzo se centre en cómo aprovechar las posibilidades multimedia del informe más que en “pelearnos” con cuestiones técnicas.

Dentro de la instalación de WordPress utilizamos el framework o constructor Divi que facilita la elaboración de composiciones complejas editando una única página web.

Este Manual del constructor Divi ofrece información detallada sobre las diferentes posibilidades que da para realizar la maquetación multimedia.

Y este videotutorial se presenta el proceso básico para crear un informe.

Los shortcodes nos permiten incorporar, dentro del editor visual, pequeñas funciones que facilitan la maquetación de los artículos.Realmente no estamos escribiendo código, sino incluyendo “llamadas” al código que hace que se produzcan determinados comportamientos tales como dividir el texto en columnas, generar pestañas, etc.

Podemos ver los resultados en este enlace, y en este otro, el detalle de uso de los shortcodes.

Veamos cuáles son las principales que podremos utilizar:

Insertar pestañas. Las pestañas nos permiten estructurar mejor la información, fragmentando bloques mayores en unidades más pequeñas organizadas mediante etiquetas que la almacenan.

Los tipos de pestaña pueden ser:

• “top tabs”: las pestañas se cargan en horizontal en la parte superior
• “left labs”: las pestañas se cargan en vertical en el lado izquierdo
• “simple”: no lleva títulos y funciona como una especie de slider
• “images”: carga imágenes en las pestañas a partir de URLs; funciona como un slider de imágenes.

Learn more block. Esta funcionalidad permite crear una caja en la que se introduce información (texto, imágenes, etc.), que puede estar oculta o ocultarse a voluntad de lector.

Box. Las cajas permiten resaltar un contenido mediante un fondo de color en el que lo inserta, y un icono identificativo

Button: Permite crear botones enlazables.

Author. Incorpora una caja transparente con borde de color, que muestra una imagen alineada la izquierda más el texto o código que se desee a la derecha.

Distribuir el texto en columnas. Se pueden crear layouts complejos de texto a dos, a tres o a cuatro columnas, con distribución simétrica o proporcional o asimétrica (por ejemplo, 1/3 – 2/3)

Tooltips. Permiten incorporar texto que aparecerá sobre una palabra o frase o sobre un elemento gráfico al pasar por encima con el ratón.

Para crear enlaces internos entre elementos o contenidos del informe usaremos “anchors” o anclas.

Cada elemento que incluimos en el editor Divi es considerado un módulo. Y cada módulo puede identificarse de forma unívoca con un ID. Una vez que lo hacemos, ya podemos crear un enlace que lleve al mismo. Para ello:

• Abre el editor del módulo al que quieres enlazar.
• Abre la pestaña “CSS personalizado” y en “Identificador CSS” incluye el nombre con el que quieras nombrar ese elemento. Por ejemplo, para el título del informe podría ser “inicio” (esto nos servirá para crear enlaces, dentro del informe, que lleven a la cabecera del mismo)

• Ahora, en el lugar que quieras realizar el enlace, selecciona la opción de crear enlace del editor sobre el texto o imagen que haga de elemento hipertextual.
• En la edición del enlace incluye el símbolo de la almohadilla # seguido del nombre que le hayas dado al elemento a enlazar.

• Confirma el enlace y guarda los resultados.

Aquí puedes ver el proceso con mayor detalle:

En ocasiones resulta útil que un contenido (imagen, texto, vídeo o interactivo) se abra en un popup o ventana emergente.

A veces es necesario porque la aplicación para crear interactivos presenta algún conflicto con el framework de Divi. Por ejemplo, actualmente (mayo de 2017) sucede entre los contenidos de H5p y Divi.

En ambas situaciones podemos hacer uso del plugin WP Popup. Para ello, los pasos serán:

1. Crear el popup a través del menú de administrador. Ajustar las propiedades de tamaño, transparencia, etc. Es importante señalar que el trigger sea manual, para que se active cuando queramos.
2. En el lugar de una entrada, proyecto o página que necesitemos, debemos seleccionar en el menú del editor el icono “Add Popup” para seleccionar el que queramos. Se incluirá el shortcode correspondiente al popup. Como su fuese un enlace, podremos asociarlo a un texto o a una imagen.

Las tablas html permiten incorporar datos tabulados de forma que tenga estructura y, por lo tanto, semántica. Por defecto siempre incluiremos las tablas en formato estructurado, bien insertadas dentro del informe o reportaje, bien enlazando un fichero (hoja de cálculo, base de datos…). Por tanto, no se incluirán tablas en formato de imagen o en pdf.

Para incorporar directamente tablas, disponemos de un plugin instalado que nos facilita que las tablas estructuradas en html puedan mostrarse con un buscador incorporado y con selectores (filtros) por columna, lo que permite al usuario recuperar la información de una manera más eficiente y adaptada a sus necesidades.

Veamos los pasos para incorporar una tabla:

1. En primer lugar debéis organizar las fuentes en una hoja de cálculo de forma que la información de las fuentes quede estructurada. Deberían contener los campos básicos: autores, fecha, título, recuperado de y NFCF (o el modelo de valoración)
2. Luego se copian los datos de la hoja de cálculo y se transforman a tabla html con un servicio como Tableizer.
3. Se copia el código en vista html en el lugar del espacio correspondiente. Y se asigna la clases footable a la etiqueta table de apertura (class=”footable”)
4. El resultado es una tabla filtrable por los campos en los que se ha organizado la información y que permite buscar datos concretos.