Víctor Podberezski | Product Manager

www.cms-medios.comFollow @cmsmedios

Quienes Somos?

Breve introducción

Cms para medios

Cms para mediosContent Management System especializado en medios de comunicación

Basado en OpenCms v7.x

Permite administrar:Medios DigitalesDiarios OnlineRevistasPortales de Comunidad…

¿Qué incluye?Publicaciones

Noticias

Encuestas

Comentarios

Estadísticas y rankings

Integración con redes sociales

Buscador

Galería de imágenes y videos

…

Características fundamentalesSeparación del sitio en 2:Offline – sitio de desarrolloOnline – 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

WorkplaceHerramienta 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:ExploradorVista de Administración

Vista de AdministraciónPermite la administración de comportamiento y de las funcionalidades de OpenCms:UsuariosÍndicesTareasProyectosMódulosCacheGalerías…

ExploradorPermite administrar contenidos visualmente: crear, modificar, borrar y publicarVisualizar historial de cambios y de publicación

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 | PublicacionesPermite 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

ProyectosConjunto de recursos a administrar por un determinado grupo de usuarios

Mínimamente existe el proyecto Offline

Se administran y publican en forma independiente

Tipos de contenidosOpenCms soporta nativamente diferentes tipos de contenidos:TextoImágenesArchivos binariosHTMLContenidos Estructurados

Contenidos EstructuradosConjunto de campos y propiedades

Representan un elemento

Ej. “Noticia”:TituloCuerpoCopete…

Se definen mediante un meta-lenguaje

Se pueden indexar y buscar

PropiedadesMeta-data que describen al contenido

Ejemplo:Fecha de modificaciónTitulo

Existen propiedades nativas y se pueden agregar nuevas.

Facilitan la indexación y búsqueda

GaleríasConjunto ordenado de elementos de un mismo tipo

Pueden ser:ImágenesTextoLinksTablasHTML

Para contenidos que se utilizan en forma seguida en el sitio

TemplatePlantilla

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

SiblingsAcceso 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

Desarrollo en OpenCmsLos desarrollos en OpenCms se realizan mediante el agregado de:MódulosClases 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

MódulosAgrupa 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ódulosDefinició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úsquedasOpenCms posee un motor de búsqueda flexible.

Basado en Tecnología LUCENE

Esta compuesto por:IndexadorMotor de Búsqueda

Construcción simplificada de Templates

news:tags

MotivaciónSIMPLIFICAR 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

news:tagsFormado por:Conjunto de Tags Server-sideExpresiones para evaluaciones lógicasModulo con funcionalidades estandarizadas

configurablesFunciones javascript para funcionalidad client-side

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

<nt:news-list>Permite recuperar varias noticias

En base a los parámetros solicitados decide donde buscarlas:Páginas principales.Publicaciones y edicionesíndicesrankings<%@ 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>

ComparacionesRecuparar 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>

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>

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>

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>

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

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><%

}%>

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>

ResultadosMismo 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

Información de la noticiaDatos básicos:nt:titlent:upper-titlent:sub-titlent:sectionnt:tagsnt:bodynt:linknt:iframe

Información de la noticia (II)Datos básicos:nt:last-modifiednt:categoriesnt:authorsnt:related-news

Información de la noticia (III)Datos multimedia:nt:audiont:filesnt:preview-imagent:image-gallerynt:video-flashnt:video-downloadnt:video-embeddednt:video-youtube

Información de la noticia (IV)Datos estadísticos:nt:news-viewsnt:news-total-commentsnt:news-recommendationsnt:news-average-valorationsnt:news-total-valorationsnt:news-positive-valorationsnt:news-negative-valorations

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

Demostración 1Detalle de una noticia mediante news:tags

Usando diseño Standard de un diario

ComentariosSe 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

Comentarios - tagsInicializar comentarios:nt:comments-init

Listado de comentarios:nt:comments-box

Formularios de ingreso:nt:comments-formnt:captchant:share

<nt:pools-box>Listado de encuestas.

Se puede personalizar como mostrar una encueta abierta o cerrada

Se pueden filtrar por:TagsCategoríasGrupoEstado

Demostración 2Comentarios y encuestas en la noticia

<nt:image-list>Galería de imágenes

Se puede filtrar por:AutorTagsFechas de creación / última modificaciónFuente

<%@ 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>

Información de ImágenesDatos:nt:image-pathnt:image-sourcent:image-authornt:image-descriptionnt: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>

<nt:video-list>Galería de videos

Se puede filtrar por:AutorTagsFechas de creación /modificaciónFuenteTipo 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>

Información de VideosDatos:nt:video-thumbnailnt:video-titlent:video-tagsnt:video-pathnt:video-publishernt:video-youtubeid

Demostración 3Home del diario

Templates a la medidaMostrar 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

<nt:conditional-include>Permite mostrar el código contenido en su interior.

Parámetrosonconditiononposition

<%@ 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>

<nt:conditional-exclude>Permite excluir el código contenido en su interior.

Parámetrosonconditiononposition

<%@ 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:conditional-exclude onposition=“1”><h2></nt:conditional-include>

</nt:news-list>

ExpresionesForma de evaluar lógicamente los contenidos

Permiten obtener:Valores de los elementosCantidad de elementos dentro de un listadoPosición dentro de un listadoCálculos matemáticos y lógicos

Permiten pasaje de parámetros de tags a tags

Son expuestos por algunos de los news:tags

Expresiones - NoticiasSon expuestas por los tags <nt:news>, <nt:news-list> y <nt:related-news>

Permiten obtener:Valores de los elementos básicosLa cantidad de autores, imágenes y videos cargados.Configuración de que mostrar.

Demostración 4Dinamización del contenido

news:tags - DocumentaciónToda 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

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

Page Builder

¿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

¿Qué se guarda en el contenido estructurado?

Configuración del contenedoro Nombreo Tipo de contenido que soportao Formateador por Defectoo Formateadores disponibleso Contenidos asociados (mediante drag and

drop)

Estructura del módulo com.tfsla.templateManager

elements IncludeTypes (ABM Tipos de Contenido) PageBuilder

[NOMBRE FORMATEADORES] resources

css [NOMBRE FORMATEADORES]

schemas (XSD con la definición del contenido estructurado) templates (JSP con template de Page Builder)

¿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;}

¿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>

VentajasInterface 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

Roadmap

Cms para Medios

GeneralReducir 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

Administración CentralizadaConsolidar 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

Motor de RankingsEl 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)

news:tagsSEO tags

Banners tags

Parámetros para Facebook Open Graph

Schema.org compatible

+++ tags

Facebook AppTendencia 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)

Actualizaciones al ‘core’OpenCms v8.5

OpenCms v7.5.5 by Technology for Solutions