Víctor Podberezski | Product Manager www.cms-medios.com Follow @cmsmedios 1

2 Quienes Somos? 2

3 Cms para medios Breve introducción 3

4 Cms para medios Content Management System especializado en medios de comunicación Basado en OpenCms v7.x Permite administrar: Medios Digitales Diarios Online Revistas Portales de Comunidad … 4

¿Qué incluye? Publicaciones Noticias Encuestas Comentarios 5 ¿Qué incluye? Publicaciones Noticias Encuestas Comentarios Estadísticas y rankings Integración con redes sociales Buscador Galería de imágenes y videos … 5

Características fundamentales 6 Características fundamentales Separación del sitio en 2: Offline – sitio de desarrollo Online – Sitio de acceso al público Almacenamiento de la información en base de datos Cache configurable por el usuario de las páginas a mostrar

Workplace Herramienta Web de Administración general (Back-End) 7 Workplace Herramienta Web de Administración general (Back-End) Permite administrar el contenido y comportamiento en forma visual Se accede previa autenticación Tiene dos vistas principales: Explorador Vista de Administración

Vista de Administración 8 Vista de Administración Permite la administración de comportamiento y de las funcionalidades de OpenCms: Usuarios Índices Tareas Proyectos Módulos Cache Galerías …

Explorador Permite administrar contenidos visualmente: 9 Explorador Permite administrar contenidos visualmente: crear, modificar, borrar y publicar Visualizar historial de cambios y de publicación

Sistema de Archivos (VFS) 1010 Sistema de Archivos (VFS) Contiene todos los contenidos que conforman el sitio web Se encuentra dentro de una base de datos Soporta altas, bajas y modificaciones de archivos Soporta Versionado Tiene un sistema de permisos y accesos

Sitios | Publicaciones 1111 Sitios | Publicaciones Permite generar y administrar múltiples sitios Cada sitio pueden tener sus propios recursos independientes Son accedidos por su propia URL Dentro de un sitio pueden convivir múltiples publicaciones Es importante evaluar la metodología de implementación para cada caso

1212 Proyectos Conjunto de recursos a administrar por un determinado grupo de usuarios Mínimamente existe el proyecto Offline Se administran y publican en forma independiente

1313 Tipos de contenidos OpenCms soporta nativamente diferentes tipos de contenidos: Texto Imágenes Archivos binarios HTML Contenidos Estructurados

Contenidos Estructurados 1414 Contenidos Estructurados Conjunto de campos y propiedades Representan un elemento Ej. “Noticia”: Titulo Cuerpo Copete … Se definen mediante un meta-lenguaje Se pueden indexar y buscar

Propiedades Meta-data que describen al contenido Ejemplo: 1515 Propiedades Meta-data que describen al contenido Ejemplo: Fecha de modificación Titulo Existen propiedades nativas y se pueden agregar nuevas. Facilitan la indexación y búsqueda

Galerías Conjunto ordenado de elementos de un mismo tipo Pueden ser: 1616 Galerías Conjunto ordenado de elementos de un mismo tipo Pueden ser: Imágenes Texto Links Tablas HTML Para contenidos que se utilizan en forma seguida en el sitio

Template Plantilla Determina cómo mostrar información 1717 Template Plantilla Determina cómo mostrar información Transforma un contenido estructurado o varios en HTML Puede subdividirse en partes llamadas elementos Se establecen como propiedad del contenido a mostrar Son archivos JSP (Java Server Pages)

Circuito de despliegue de contenido 1818 Circuito de despliegue de contenido 18

1919 Siblings Acceso directo de un recurso en otra ubicación del VFS. Similar a ‘atajo’ de Windows. El sibling comparte el contenido del archivo original, no así sus propiedades Utilizado para compartir contenidos en diferentes sitios y/o publicaciones

2020 Desarrollo en OpenCms Los desarrollos en OpenCms se realizan mediante el agregado de: Módulos Clases y librerias java Se desarrolla generalmente en un entorno diferente al productivo Se utiliza la importación y exportación de módulos para transportar las nuevas funcionalidades de entorno a entorno 20

2121 Módulos Agrupa conjunto de contenidos y templates. Por ejemplo: com.tfsla.diario.generico Se crean y gestionan dentro de la vista de administración Pueden ser importados y exportados del OpenCms Se almacenan dentro del VFS en la carpeta “/system/modules/” Son Versionables

Contenido de módulos Definición de nuevos contenidos estructurados 2222 Contenido de módulos Definición de nuevos contenidos estructurados Templates y Jsp Extensiones a la API de OpenCms Nueva pestañas de la vista de administración Integración con productos de terceros

Motor de Búsquedas OpenCms posee un motor de búsqueda flexible. Basado en Tecnología LUCENE Esta compuesto por: Indexador Motor de Búsqueda

Construcción simplificada de Templates 2424 news:tags Construcción simplificada de Templates 24

2525 Motivación SIMPLIFICAR la generación de templates para mostrar contenido DISMINUIR la cantidad de código JAVA en la elaboración de templates FACILITAR la integración de la maquetación al desarrollo REDUCIR tiempos de desarrollo y curva de aprendizaje ENCAPSULAR funcionalidad compleja MAXIMIZAR libertad de diseño 25

news:tags Formado por: Conjunto de Tags Server-side 2626 news:tags Formado por: Conjunto de Tags Server-side Expresiones para evaluaciones lógicas Modulo con funcionalidades estandarizadas configurables Funciones javascript para funcionalidad client-side 26

<nt:news> Permite recuperar una noticia Parámetros: path 2727 <%@ taglib prefix="nt" uri="http://www.tfsla.com/taglib/tfsNewsTags" %> <nt:news path="/contenidos/2012/03/29/noticia_0001.html"> <nt:title /> </nt:news> 27

<nt:news-list> 2828 <nt:news-list> Permite recuperar varias noticias En base a los parámetros solicitados decide donde buscarlas: Páginas principales. Publicaciones y ediciones índices rankings <%@ taglib prefix="nt" uri="http://www.tfsla.com/taglib/tfsNewsTags" %> <nt:news-list size="10" publication=“1” edition=“1202” section=“espectaculos”> <nt:title /> </nt:news> 28

Comparaciones Recuparar una noticia: Antes: Con news-tags: 2929 <%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %> <cms:contentload collector="singleFile" param="/contenidos/2011/04/26/noticia_0006.html"> <cms:contentshow element="titulo"/> </cms:contentload> <%@ taglib prefix="nt" uri="http://www.tfsla.com/taglib/tfsNewsTags" %> <nt:news path="/contenidos/2012/03/29/noticia_0001.html"> <nt:title /> </nt:news> 29

3030 Comparaciones (II) Obtener las 10 noticias mas leídas de la ultima hora: Antes: Con news-tags: <%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %> <cms:contentload collector="MasVisitadas" param="/contenidos/noticia_%(number).html|50|hours:1|size:10"> <cms:contentshow element="titulo"/> </cms:contentload> <%@ taglib prefix="nt" uri="http://www.tfsla.com/taglib/tfsNewsTags" %> <nt:news-list size="10" order="most-read“ from="1h"> <nt:title /> </nt:news> 30

Comparaciones (III) Obtener las ultimas 5 noticias publicadas: Antes: 3131 Comparaciones (III) Obtener las ultimas 5 noticias publicadas: Antes: Con news-tags: <%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %> < cms:contentload collector="Last" param="/contenidos/noticia_${number}.html|50|size:5 > <cms:contentshow element="titulo"/> </cms:contentload> <%@ taglib prefix="nt" uri="http://www.tfsla.com/taglib/tfsNewsTags" %> <nt:news-list size=“5" order="user-modification-date“> <nt:title /> </nt:news> 31

3232 Comparaciones (IV) Obtener las noticias “destacadas” de la home de sección “política”: Antes: Con news-tags: <%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %> <cms:contentload collector="Contenidos" param="/contenidos/noticia_${number}.html|50|target:seccion|zone:destacadas|section:politica" > <cms:contentshow element="titulo"/> </cms:contentload> <%@ taglib prefix="nt" uri="http://www.tfsla.com/taglib/tfsNewsTags" %> <nt:news-list section=“politica” onmainpage=“section” zone=“destacadas”> <nt:title /> </nt:news> 32

Comparaciones (V) Obtener noticias con palabras claves por fecha: 3333 Comparaciones (V) Obtener noticias con palabras claves por fecha: Antes: CmsJspXmlContentBean cms = new CmsJspXmlContentBean(pageContext, request, response); TfsAdvancedSearch search = new TfsAdvancedSearch(); search.init(cms.getCmsObject()); search.setIndex("DIARIO_CONTENIDOS_ONLINE"); search.setMatchesPerPage(10); Sort thisSort = new Sort(); thisSort.setSort("ultimaModificacion",true); search.setSortOrder(thisSort); String query = "keywords:(\"\TFSLA")"; search.setQuery(query); search.setPage(1); 33

Comparaciones (IV) (continuación) 3434 List result = search.getSearchResult(); ListIterator iterator = result.listIterator(); while (iterator.hasNext()) { CmsSearchResult entry = (CmsSearchResult)iterator.next(); String path = cms.link(cms.getRequestContext().removeSiteRoot(entry.getPath())); %> <cms:contentload collector="singleFile" param="<%= path %>"> <div> <cms:contentshow element="titulo"/> </div> </cms:contentload> <% } 34

Comparaciones (IV) (continuación) Con news-tags: 3535 <%@ taglib prefix="nt" uri="http://www.tfsla.com/taglib/tfsNewsTags" %> <nt:news-list size=“10" tags=“TFSLA” order="user-modification-date“> <nt:title /> </nt:news> 35

Resultados Mismo Tag para recuperar noticias 3636 Resultados Mismo Tag para recuperar noticias Parámetros más sencillos y mnemotécnicos Más variantes de consultas Más rápido para implementar Más sencillo de entender Mas práctico para modificar 36

Información de la noticia 3737 Información de la noticia Datos básicos: nt:title nt:upper-title nt:sub-title nt:section nt:tags nt:body nt:link nt:iframe 37

Información de la noticia (II) 3838 Información de la noticia (II) Datos básicos: nt:last-modified nt:categories nt:authors nt:related-news 38

Información de la noticia (III) 3939 Información de la noticia (III) Datos multimedia: nt:audio nt:files nt:preview-image nt:image-gallery nt:video-flash nt:video-download nt:video-embedded nt:video-youtube 39

Información de la noticia (IV) 4040 Información de la noticia (IV) Datos estadísticos: nt:news-views nt:news-total-comments nt:news-recommendations nt:news-average-valorations nt:news-total-valorations nt:news-positive-valorations nt:news-negative-valorations 40

Información de la noticia (V) 4141 Información de la noticia (V) Encuestas: nt:pools-fixed-position nt:pools-dynamic-position 41

Demostración 1 Detalle de una noticia mediante news:tags 4242 Demostración 1 Detalle de una noticia mediante news:tags Usando diseño Standard de un diario 42

Comentarios Se pueden insertar en cualquier página 4343 Comentarios Se pueden insertar en cualquier página Se puede definir que mostrar por cada comentarios Se pueden definir “N” niveles de respuesta Son paginables Se puede definir políticas de publicación, moderación y denuncia 43

Comentarios - tags Inicializar comentarios: Listado de comentarios: 4444 Comentarios - tags Inicializar comentarios: nt:comments-init Listado de comentarios: nt:comments-box Formularios de ingreso: nt:comments-form nt:captcha nt:share 44

<nt:pools-box> 4545 <nt:pools-box> Listado de encuestas. Se puede personalizar como mostrar una encueta abierta o cerrada Se pueden filtrar por: Tags Categorías Grupo Estado 45

4646 Demostración 2 Comentarios y encuestas en la noticia 46

<nt:image-list> 4747 <nt:image-list> Galería de imágenes Se puede filtrar por: Autor Tags Fechas de creación / última modificación Fuente <%@ taglib prefix="nt" uri="http://www.tfsla.com/taglib/tfsNewsTags" %> <nt:image-list size="10" tags="tenis" order=“modification-date”> <img src="<nt:image-path />" alt=”<nt:image-tags>” /><br/> <nt:image-source /> - <nt:image-description/> </nt:nt:image-list> 47

Información de Imágenes 4848 Información de Imágenes Datos: nt:image-path nt:image-source nt:image-author nt:image-description nt:image-tags <%@ taglib prefix="nt" uri="http://www.tfsla.com/taglib/tfsNewsTags" %> <nt:image-list size="10" tags="tenis" order=“modification-date”> <img src="<nt:image-path />" alt=”<nt:image-tags>” /><br/> <nt:image-source /> - <nt:image-description/> </nt:nt:image-list> 48

<nt:video-list> 4949 <nt:video-list> Galería de videos Se puede filtrar por: Autor Tags Fechas de creación /modificación Fuente Tipo de Video <%@ taglib prefix="nt" uri="http://www.tfsla.com/taglib/tfsNewsTags" %> <nt:video-list size="10" tags=“barcelona" order=“modification-date” type=“download”> <a href=“<nt:video-source />”> <nt:video-description/> </a> </nt:nt:image-list> 49

Información de Videos Datos: nt:video-thumbnail nt:video-title 5050 Información de Videos Datos: nt:video-thumbnail nt:video-title nt:video-tags nt:video-path nt:video-publisher nt:video-youtubeid 50

5151 Demostración 3 Home del diario 51

5252 Templates a la medida Mostrar u ocultar contenido de acuerdo a parámetros de la noticia. Para eso cuenta con: Expresiones lógicas para evaluar condiciones (JSTL) Tags de inclusion-exclusion de código 52

<nt:conditional-include> 5353 <nt:conditional-include> Permite mostrar el código contenido en su interior. Parámetros oncondition onposition <%@ taglib prefix="nt" uri="http://www.tfsla.com/taglib/tfsNewsTags" %> <nt:news-list zone="destacadas" onmainpage="home" size="5"> <nt:localpath /> - <nt:title/><br/> <nt:conditional-include oncondition=“${news.homePreview=‘image’}"> <nt:preview-image> <img src="<nt:image-path />" /><br/> </nt:preview-image > </nt:conditional-include> </nt:news-list> 53

<nt:conditional-exclude> 5454 <nt:conditional-exclude> Permite excluir el código contenido en su interior. Parámetros oncondition onposition <%@ taglib prefix="nt" uri="http://www.tfsla.com/taglib/tfsNewsTags" %> <nt:news-list zone="destacadas" onmainpage="home" size="5"> <nt:conditional-include onposition=“1”><h1></nt:conditional-include> <nt:conditional-exclude onposition=“1”><h2></nt:conditional-include> <nt:title/> <nt:conditional-include onposition=“1”></h1></nt:conditional-include> </nt:news-list> 54

Expresiones Forma de evaluar lógicamente los contenidos 5555 Expresiones Forma de evaluar lógicamente los contenidos Permiten obtener: Valores de los elementos Cantidad de elementos dentro de un listado Posición dentro de un listado Cálculos matemáticos y lógicos Permiten pasaje de parámetros de tags a tags Son expuestos por algunos de los news:tags 55

Expresiones - Noticias 5656 Expresiones - Noticias Son expuestas por los tags <nt:news>, <nt:news-list> y <nt:related-news> Permiten obtener: Valores de los elementos básicos La cantidad de autores, imágenes y videos cargados. Configuración de que mostrar. 56

5757 Demostración 4 Dinamización del contenido 57

news:tags - Documentación 5858 news:tags - Documentación Toda la información de news:tags se encuentra en: http://wiki.cms-medios.com Otros sitios de interés: http://blog.tfsla.com http://www.facebook.com/cmsmedios 58

5959 Page Builder Este módulo es un ‘constructor’ de portadas que permite agregar y quitar noticias en modo ‘drag and drop’, cambiar dinámicamente el formato y combinar diferentes tamaños de contenedores 59

¿Que son los Contenedores? 6060 ¿Que son los Contenedores? Son ‘cajas’ que agrupan Contenidos Se le puede aplicar un Formateador (combinación de CSS y JSP que dan forma a un contenido específico) Especificar el límite de contenido a mostrar Configuración de Formateadores disponibles 60

¿Qué se guarda en el contenido estructurado? 6161 ¿Qué se guarda en el contenido estructurado? Configuración del contenedor Nombre Tipo de contenido que soporta Formateador por Defecto Formateadores disponibles Contenidos asociados (mediante drag and drop) 61

Estructura del módulo com.tfsla.templateManager elements 6262 Estructura del módulo com.tfsla.templateManager elements IncludeTypes (ABM Tipos de Contenido) PageBuilder [NOMBRE FORMATEADORES] resources css schemas (XSD con la definición del contenido estructurado) templates (JSP con template de Page Builder) 62

¿Cómo armo un Formateador? 6363 ¿Cómo armo un Formateador? JSP / template: Crear un JSP para cada tipo de contenido dentro de la siguiente estructura del módulo: ‘elements/PageBuilder/[NOMBRE] CSS / style: Crear un CSS para cada tipo de contenido dentro de la siguiente estructura del módulo: ‘resources/css/[NOMBRE]. También se pueden agregar otros archivos de estilos. La estructura del CSS debe ser jerárquica Agregar en el contenido estructurado la disponibilidad del nuevo formateador .zona estilo1 * .nota-destacada.nota-uno{width:100%;} .zona estilo1 * .nota-destacada.nota-uno .title{width:920px;} .zona estilo1 * .nota-destacada.nota-uno .title{font-size:40px;line-height:44px;} 63

¿Cómo armar Page Builder con News Tags? 6464 ¿Cómo armar Page Builder con News Tags? <%@ taglib prefix="nt" uri="http://www.tfsla.com/taglib/tfsNewsTags" %> <html> <head> <nt:page-builder-init /> </head> <body> <nt:page-builder> <nt:container name="caja1" /> <nt:container name="caja2" /> <nt:container name="caja3" /> </nt:page-builder> </body> </html> 64

6565 Ventajas Interface amigable para la administración del contenido mediante ‘drag and drop’ Cajas dinámicas con múltiples tamaños y estilos posibles Combinación de N cajas (ocultar / mostrar) El page builder permite realizar modificaciones a la estructura de una página de forma rápida y sin conocimientos de programación 65

6666 Cms para Medios Roadmap 66

6767 General Reducir módulos y JARs. Generar relaciones entre los módulos (simplifica la instalación)* Consolidar la configuración de la suite (XML o vista de administración) Actualizaciones mediante paquetes automáticos Nuevo look&feel para Workplace 100% multi-site / multi-publicación (Abril 2012) Migrador / Importador genérico Juego de ‘templates’ genérico 67

Administración Centralizada 6868 Administración Centralizada Consolidar la administración de las operaciones más frecuentes: Administración de Usuarios Moderación de Comentarios Moderación de Posts Administración de Noticias (modo grilla y modo visual) Rankings 68

Motor de Rankings El que leyó A, además leyó B 6969 Motor de Rankings El que leyó A, además leyó B Gráficos de evolución de los rankings Mejoras de rendimiento y modelo de almacenamiento histórico (consolidación) 69

news:tags SEO tags Banners tags Parámetros para Facebook Open Graph 7070 news:tags SEO tags Banners tags Parámetros para Facebook Open Graph Schema.org compatible +++ tags 70

7171 Facebook App Tendencia en crecimiento. The Guardian UK (pionero). 4 millones nuevos unique visitors. 1 millón de páginas vistas por día adicional. 3% a 30% en 6 meses. Múltiples formas de implementación (referral o Facebook Ads) Mejora la ‘socialización’ en el sitio Web (Social ON / OFF) 71

Actualizaciones al ‘core’ 7272 Actualizaciones al ‘core’ OpenCms v8.5 OpenCms v7.5.5 by Technology for Solutions 72