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

2. Quienes Somos?

3. Cms para medios Breve introducción

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

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

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

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

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

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

10. 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

11. 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

12. 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

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

14. 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

15. 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

16. 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

17. 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)

18. Circuito de despliegue de contenido

19. 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

20. 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

21. 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

22. 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

23. 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

24. news:tags Construcción simplificada de Templates

25. 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

26. 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

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

28. <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>

29. Comparaciones • Recuparar una noticia: • Antes: • Con news-tags: <%@ 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>

30. 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>

31. 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>

32. 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>

33. 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);

34. Comparaciones (IV) • (continuación) 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> <% } %>

35. Comparaciones (IV) • (continuación) • Con news-tags: <%@ 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>

36. 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

37. 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

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

39. 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

40. 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

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

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

43. 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

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

45. <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

46. Demostración 2 • Comentarios y encuestas en la noticia

47. <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>

48. 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>

49. <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>

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