Este documento describe el proceso de adaptar plantillas HTML estáticas a OpenCms utilizando contenedores. Se analizan las plantillas para definir los contenedores necesarios. Luego se marcan los contenedores en el código HTML y se crean en OpenCms. También se definen los recursos y formatters para renderizar contenido dinámico en los contenedores, como listados de noticias y menús. Finalmente, se crea la estructura del sitio en OpenCms con páginas modelo y detalle.

1. © SAGA SOLUCIONES TÉCNOLOGICAS
1

2. PUNTO DE PARTIDA: PLANTILLAS DE HTML ESTÁTICO
© SAGA SOLUCIONES TÉCNOLOGICAS
2

3. VISIÓN GLOBAL DEL PROCESO
1.Analizar Templates  Definición de conenedores
2.Adaptar las plantillas a OpenCms ContainerPage_template
1.Cabecera jsp
2.Revisión de Enlaces
3.Recorte HTML  Ubicación de Contenedores
4.Creación de Containers
1.Jumbotron
2.Definición de Containers
3.Análisis de Recursos
1.Configuración de Recursos y formatters
1.demo_Menu
2.demo_Texto
4.Creación del Site
1.Page Model
2.Estructura de Navegación
1.Content Config
2.Creación de Páginas
© SAGA SOLUCIONES TÉCNOLOGICAS
3

4. ESQUEMA DE RENDERIZADO
© SAGA SOLUCIONES TÉCNOLOGICAS
4

5. •
Creación del site
•
Creación Módulo Frontend
•
Copiar ejemplo estático
•
Adaptar template
1.
2.
Html estático
Adaptación header y cmslink
© SAGA SOLUCIONES TÉCNOLOGICAS
5

6. CONTAINERS
La parte más importante es determinar los contenedores necesarios según
No es necesario modificar el HTML de la
el template previsto. En este punto es dónde decidimos que partes
plantilla, es solo un ejemplo
serán estáticas dentro del template y cuales serán dinámicas.
© SAGA SOLUCIONES TÉCNOLOGICAS
6

7. ANÁLISIS DE TEMPLATES
Inicio.shtml
presentacion.shtml
© SAGA SOLUCIONES TÉCNOLOGICAS
7

8. 1. Incluir Jumbotrones
en el lugar dónde se
ubicará un container
© SAGA SOLUCIONES TÉCNOLOGICAS
8

9. MARCADO DE CONTAINERS
En el punto anterior hemos recortado el template, marcando con recursos
Jumbotron de Bootstrap cada uno de los espacios dónde vamos a incluir un
container.
En este punto debemos seguir avanzando en el desarrollo del template
incluyendo los containers necesarios.
Los containers vienen definidos por un tag Opencms:
<cms:container name="detail" type="center" width="600" maxElements="5"
detailview="true"/>
•
•
•
•
•
name: Nombre del contenedor. Debe ser único en una misma plantilla.
type: Tipo del contenedor. El tipo si puede estar repetido y es el que nos permitirá
luego indicar en la configuración de los formatter. Por ejemplo podemos indicar un
tipo "side" tanto a la columna de la izquierda como a la de la derecha, de esta
forma podremos compartir los formatter para ambas columnas.
width: Indica el ancho del contenedor. Éste ancho nos permite poder definir
distintos formatters en función del ancho del container. No se trata de un ancho
real sino un valor relativo a los container.
maxElements: número máximo de elementos que permite el contenedor. Si se
llega al máximo y se añade un nuevo elemento esto provocará que se pierda
alguno de los existentes.
detailview: Este atributo será true si el contenedor contendrá el detalle de un
recurso y false en caso contrario. Por lo tanto, lo normal es que solo se configure
a true en el contenedor central.
© SAGA SOLUCIONES TÉCNOLOGICAS
9

10. CONTAINER TYPES 1
Dentro de un container se
uncluiran los distintos
recursos del portal mediante
un Formatter.
Es posible definir distintos formatters para un recurso en función del
ancho de un container o de su tipo
Es posible definir que tipo de recurso es “Renderizable” por cada
Formatter
© SAGA SOLUCIONES TÉCNOLOGICAS
10

11. CONTAINER TYPES 2: IDENTIFICADORES
En nuestro caso particular vamos a definir los containers por tipo,
distinguiendo:
Header: Los containers de éste tipo serán los localizados en la zona superior de







nuestro template:
TopPage
Top
Menú
Content Full: Zona de contenidos que ocupan el ancho completo
Slider
TopContentFetured
BottomContentFeatured
Content: Zona central de contenidos:








ContentTopLeft
ContentBottomLeft
ContentTopRight
ContentBottomRight
ContentLeft
ContentRight
FootLeft
FootRight
Foot: Para este tipo dejaremos únicamente :
 BottomPage
© SAGA SOLUCIONES TÉCNOLOGICAS
11

12. CONTAINER DE DETAIL
Las páginas de detalle o “detail pages” es el elemento que
hace que no sea necesario crear una nueva página en el
Site Map por cada noticia, articulo o cualquier otro
contenido estructurado.
En el template es necesario indicar un container especial, al
que se le añade el atributo detailview=”True”. Cuando se
muestra un contenido de detalle, éste se incluirá
automáticamente en contenedor de detalle.
En nuestro ejemplo nuestro contenedor de detalles estará
en el template interior, en el contenedor ContentRight.
© SAGA SOLUCIONES TÉCNOLOGICAS
12

13. •
Inclusión de los containers
•
Sustituimos cada Jumbotron
por el Tag container,
indicando su id y el tipo que
corresponda
•
Marcamos el container de
detail
© SAGA SOLUCIONES TÉCNOLOGICAS
13

14. RECURSOS Y FORMATTERS
Los recursos son los elementos dinámicos del portal
El hecho de usar bootstrap en el renderizado del HTML, permite crear
recursos compatibles entre distintos templates
Tipos de Recursos Ejemplo:
• Nuevos
• demo_Textos
• demo_Menu
• demo_Noticias
• demo_Eventos
• Reutilizados
• Carrusel: slider pagina principal
• Image Slider: galería de imágenes pagina principal
• Function: Pagina interior (Titulo y Rastro de migas)
• Flexible content: Otros componentes del template
© SAGA SOLUCIONES TÉCNOLOGICAS
14

15. NUEVOS TIPOS
Cajatexto (demo_texto)
 1 Visualización: Contenedores tipo Content
Menu (demo_menu)
 2 visualizaciones
 Main_Navigation: para los contenedores de tipo Header
 Side_Navigation: para los contenedores de tipo content
Noticias (demo_noticias)
 1 Visualización: Contenedores tipo Content
Eventos (demo_eventos)
 1 Visualización: Contenedores tipo Content
© SAGA SOLUCIONES TÉCNOLOGICAS
15

16. •
Definición de Recursos
1.
XSD
2.
Jsp – Tag Formatter
3.
Config Xml
© SAGA SOLUCIONES TÉCNOLOGICAS
16

17. CONFIGURACIÓN DE RECURSOS
¿Qué recursos tenemos disponibles?
En principio todos los incluidos en el sistema…. Si bien no todos
renderizarán contenido compatible con nuestro template
Site Map (Recursos y contenidos)
A nivel de site Map definimos qué recursos están disponibles en nuestro
sitio.
Como sabemos que recursos necesitamos , debemos configurar nuestro
site Map
Páginas Modelo
Se trata de páginas preconfiguradas que nos permiten crear el sitemap del
sitio incluyendo contenidos de estructura por defecto
© SAGA SOLUCIONES TÉCNOLOGICAS
17

18. •
Definir los recursos Disponibles
•
Crear paginas Modelo
•
•
Pagina Interior
Pagina Home
•
Incluir nuevas Secciones
© SAGA SOLUCIONES TÉCNOLOGICAS
18

19. PAGINAS DE DETALLE
Las páginas de detalle o “detail pages” es el elemento que hace que no sea
necesario crear una nueva página en el Site Map por cada noticia, articulo o
cualquier otro contenido estructurado.
Se definen en el SiteMap Manager
© SAGA SOLUCIONES TÉCNOLOGICAS
19

20. LISTADOS DE RECURSOS
Opciones
1. Function: jsp que implemente el listado. Éste recurso function se
incluirá en el container como un recurso
2. Implementar un recurso tipo Listado. Ésta opción será la usada en la
demo.
Usaremos SolrList de SAGASuite
© SAGA SOLUCIONES TÉCNOLOGICAS
20

21. •
Añadir SolrList a .Config
•
Crear Elements
•
Incluir Listados
© SAGA SOLUCIONES TÉCNOLOGICAS
21

22. •
Añadir SolrList a .Config
•
Crear Elements
•
Incluir Listados
© SAGA SOLUCIONES TÉCNOLOGICAS
22

23. © SAGA SOLUCIONES TÉCNOLOGICAS
23