Víctor Podberezski | Product Manager cms-medios Follow @cmsmedios
description
Transcript of Víctor Podberezski | Product Manager cms-medios Follow @cmsmedios
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