© SAGA SOLUCIONES TÉCNOLOGICAS

1
PUNTO DE PARTIDA: PLANTILLAS DE HTML ESTÁTICO

© SAGA SOLUCIONES TÉCNOLOGICAS

2
VISIÓN GLOBAL DEL PROCESO
1.Analizar Templates  Definición de conenedores
2.Adaptar las plantillas a OpenCms ContainerPag...
ESQUEMA DE RENDERIZADO

© SAGA SOLUCIONES TÉCNOLOGICAS

4
•

Creación del site

•

Creación Módulo Frontend

•

Copiar ejemplo estático

•

Adaptar template

1.
2.

Html estático
A...
CONTAINERS
La parte más importante es determinar los contenedores necesarios según
No es necesario modificar el HTML de la...
ANÁLISIS DE TEMPLATES
Inicio.shtml

presentacion.shtml

© SAGA SOLUCIONES TÉCNOLOGICAS

7
1. Incluir Jumbotrones
en el lugar dónde se
ubicará un container

© SAGA SOLUCIONES TÉCNOLOGICAS

8
MARCADO DE CONTAINERS
En el punto anterior hemos recortado el template, marcando con recursos
Jumbotron de Bootstrap cada ...
CONTAINER TYPES 1
Dentro de un container se
uncluiran los distintos
recursos del portal mediante
un Formatter.

Es posible...
CONTAINER TYPES 2: IDENTIFICADORES
En nuestro caso particular vamos a definir los containers por tipo,
distinguiendo:

Hea...
CONTAINER DE DETAIL
Las páginas de detalle o “detail pages” es el elemento que
hace que no sea necesario crear una nueva p...
•

Inclusión de los containers

•

Sustituimos cada Jumbotron
por el Tag container,
indicando su id y el tipo que
correspo...
RECURSOS Y FORMATTERS
Los recursos son los elementos dinámicos del portal
El hecho de usar bootstrap en el renderizado del...
NUEVOS TIPOS
Cajatexto (demo_texto)
 1 Visualización: Contenedores tipo Content
Menu (demo_menu)
 2 visualizaciones
 Ma...
•

Definición de Recursos

1.

XSD

2.

Jsp – Tag Formatter

3.

Config Xml

© SAGA SOLUCIONES TÉCNOLOGICAS

16
CONFIGURACIÓN DE RECURSOS
¿Qué recursos tenemos disponibles?
En principio todos los incluidos en el sistema…. Si bien no t...
•

Definir los recursos Disponibles

•

Crear paginas Modelo

•
•

Pagina Interior
Pagina Home

•

Incluir nuevas Seccione...
PAGINAS DE DETALLE
Las páginas de detalle o “detail pages” es el elemento que hace que no sea
necesario crear una nueva pá...
LISTADOS DE RECURSOS

Opciones
1. Function: jsp que implemente el listado. Éste recurso function se
incluirá en el contain...
•

Añadir SolrList a .Config

•

Crear Elements

•

Incluir Listados

© SAGA SOLUCIONES TÉCNOLOGICAS

21
•

Añadir SolrList a .Config

•

Crear Elements

•

Incluir Listados

© SAGA SOLUCIONES TÉCNOLOGICAS

22
© SAGA SOLUCIONES TÉCNOLOGICAS

23
Upcoming SlideShare
Loading in …5
×

Templating OpenCms 9

1,727 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,727
On SlideShare
0
From Embeds
0
Number of Embeds
528
Actions
Shares
0
Downloads
27
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Templating OpenCms 9

  1. 1. © SAGA SOLUCIONES TÉCNOLOGICAS 1
  2. 2. PUNTO DE PARTIDA: PLANTILLAS DE HTML ESTÁTICO © SAGA SOLUCIONES TÉCNOLOGICAS 2
  3. 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. 4. ESQUEMA DE RENDERIZADO © SAGA SOLUCIONES TÉCNOLOGICAS 4
  5. 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. 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. 7. ANÁLISIS DE TEMPLATES Inicio.shtml presentacion.shtml © SAGA SOLUCIONES TÉCNOLOGICAS 7
  8. 8. 1. Incluir Jumbotrones en el lugar dónde se ubicará un container © SAGA SOLUCIONES TÉCNOLOGICAS 8
  9. 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. 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. 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. 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. 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. 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. 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. 16. • Definición de Recursos 1. XSD 2. Jsp – Tag Formatter 3. Config Xml © SAGA SOLUCIONES TÉCNOLOGICAS 16
  17. 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. 18. • Definir los recursos Disponibles • Crear paginas Modelo • • Pagina Interior Pagina Home • Incluir nuevas Secciones © SAGA SOLUCIONES TÉCNOLOGICAS 18
  19. 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. 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. 21. • Añadir SolrList a .Config • Crear Elements • Incluir Listados © SAGA SOLUCIONES TÉCNOLOGICAS 21
  22. 22. • Añadir SolrList a .Config • Crear Elements • Incluir Listados © SAGA SOLUCIONES TÉCNOLOGICAS 22
  23. 23. © SAGA SOLUCIONES TÉCNOLOGICAS 23

×