Transcript nt:news-list> y - Technology for Solutions

Víctor Podberezski | Product Manager
www.cms-medios.com
Follow @cmsmedios
Quienes Somos?
Cms para medios
Breve introducción
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
…
¿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 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)
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
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:
 crear, modificar, borrar y publicar
 Visualizar 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 | 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
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
Tipos de contenidos
OpenCms soporta nativamente diferentes tipos
de contenidos:
 Texto
 Imágenes
 Archivos binarios
 HTML
 Contenidos Estructurados
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:
 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:
 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
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
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
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
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
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
news:tags
Construcción
simplificada de
Templates
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
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
<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
 í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>
Comparaciones
Recuparar una noticia:
 Antes:
<%@ 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>
 Con news-tags:
<%@ 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:
<%@ 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>
 Con news-tags:
<%@ 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:
<%@ 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>
 Con news-tags:
<%@ 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:
<%@ 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>
 Con news-tags:
<%@ 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>
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
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
Información de la noticia (II)
Datos básicos:
 nt:last-modified
 nt:categories
 nt:authors
 nt:related-news
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
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
Información de la noticia (V)
Encuestas:
 nt:pools-fixed-position
 nt:pools-dynamic-position
Demostración 1
Detalle de una noticia mediante news:tags
Usando diseño Standard de un diario
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
Comentarios - tags
Inicializar comentarios:
 nt:comments-init
Listado de comentarios:
 nt:comments-box
Formularios de ingreso:
 nt:comments-form
 nt:captcha
 nt:share
<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
Demostración 2
Comentarios y encuestas en la noticia
<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>
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>
<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>
Información de Videos
Datos:
 nt:video-thumbnail
 nt:video-title
 nt:video-tags
 nt:video-path
 nt:video-publisher
 nt:video-youtubeid
Demostración 3
Home del diario
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
<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>
<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:conditional-exclude onposition=“1”><h2></nt:conditional-include>
</nt:news-list>
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
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.
Demostración 4
Dinamización del contenido
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
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
¿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 contenedor
o Nombre
o Tipo de contenido que soporta
o Formateador por Defecto
o Formateadores disponibles
o 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
.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;}
Agregar en el contenido estructurado la disponibilidad del nuevo
formateador
¿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>
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
Cms para Medios
Roadmap
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
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
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)
news:tags
SEO tags
Banners tags
Parámetros para Facebook Open Graph
Schema.org compatible
+++ tags
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)
Actualizaciones al ‘core’
OpenCms v8.5
OpenCms v7.5.5 by Technology for Solutions