Contenedor web

Para la elaboración del 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 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
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:

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.

Otras opciones

  • WIX (sitios web “visuales”)
  • WORDPRESS (gestor de contenidos que combina sitio web y blog)
  • BLOGGER (gestor de blogs con opciones para configurar un sitio web sencillo)
  • TUMBLR (gestor de microblogging, muy utilizado para fotoblogs o videoblogs)
Shortcodes para maquetación
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.
			
Contenido primera pestaña
Contenido segunda pestaña
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.
		
Opciones:
  • Efecto de transición: Fade o Slide
  • Automatización de la transición y velocidad del auto speed
		
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.

Para saber más” state=“open/close

Texto o información incluida
Box
Las cajas permiten resaltar un contenido mediante un fondo de color en el que lo inserta, y un icono identificativo
Texto o código
Opciones tope:
  • Shadow: Gris
  • Info: Amarillo
  • Warning: Rojo
  • Download: Verde
  • Bio: Azul
Button:
Permite crear botones enlazables. 
Opciones:
  • Type: small, big, icon
  • Color:  blue, lightblue, teal, silver, black, pink, purple, orange, green, red
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.
		
Texto o código
Edición en texto
Dos columnas
Este es el texto de la primera columna
Y este es el de la segunda
Tres columnas
La primera
La segunda
La tercera
Cuatro columnas
La primera
La segunda
 
La tercera
 
La cuarta

Tooltip

Texto sobre el que se abre el tooltipTooltip Texto

 

Tabla para fuentes

Indicaciones

  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.

Ejemplo

Autores Fecha Título Recuperado de NFCF
Cafarella, J. y Menoche, K. 5 de noviembre de 2015 Russia repositions military assets in Syria as ISIS advances in Homs. Institute for the study of war http://iswresearch.blogspot.com.es/2015/11/russia-repositions-military-assets-in.html C4
Crear enlaces internos a módulos

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)

id-anclas

  •  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:

 

Fuente: Manual DIVI

Insertar popups

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.