Paso 1. Creamos nuestro módulo frontend el cual nos sirve para alojar todas la plantillas, hojas de estilo, javascript, definición de contenidos estructurado y clases java de nuestro nuevo proyecto. La estructura de carpeta será la siguiente:

• classes
• elements
• lib
• pages
• resources
• schemas
• templates

Mirar articulo de OpenCms Hispano donde se define la estructura del módulo: http://www.opencmshispano.es/nav/blog/articulo_0008.html

Paso 2. Damos forma al esqueleto de nuestra web. Previamente, durante la fase de análisis deberíamos haber detallado el tipo de web que requiere el cliente, con 2 o 3 columnas, cabecera, pie, ...
La tarea de maquetación podremos optar por varios caminos, dependiendo de nuestras necesidades y de nuestros recursos:

• Maquetación estandar desde cero en el que alguno de nuestros maquetadores realice una maquetación html estática, siempre teniendo bien separada cada una de las partes de la web.
• Uso de un framework de generación de código html llamado yaml, el cual nos permite configurar este tipo de parámetros y nos generará un código html optimizado para todos los navegadores y listo para ser usado.
  • http://www.yaml.org: Web oficial del proyecto.
  • http://builder.yaml.de/ : Aplicación web para la construcción de las plantillas.

Paso 3. Un vez creado el código html que forma el esqueleto lo partimos en 3 bloque:

• Template head: trozo de html que va desde la primera linea de definición html, hasta la capa donde comienza el cuerpo central de nuestra página.
• Template body: Trozo de html correspondiente al cuerpo de nuestra página.
• Template foot: Trozo de html correspondiente al pie de la página, que comenzará con el cierre de la capa del cuerpo y finalizará con la etiqueta de cierre del html </html>

NOTA: Si nuestra web cambia de estructura según la sección en la que nos encontremos tendremos que desarrollar tantas plantillas como estructuras tengamos. Existe otra opción que es la generación de plantillas configurables, las cuales veremos con detalle en otro momento.

Paso 4. Ya tenemos la estructura partida de forma que podamos hacer nuestra primera plantilla, para ello creamos dentro nuestra carpeta templates una jsp con nombre: template1.jsp. (No olvidar poner un título en las propiedades de la jsp ya que este título será el visible cuando vayamos a indicarle la plantilla a usar en un contenido). Dentro de esta plantilla, marcamos el código divido anteriormente con el tag cms:template:

<cms:template element=”head”>CODIGO HTML HEAD</cms:template>

<cms:template element=”body”>CODIGO HTML BODY</cms:template>

<cms:template element=”foot”>CODIGO HTML FOOT</cms:template>

Recordar que debemos incluir como cabecera de la jsp la definición del tag cms para el correcto funcionamiento de la plantilla.

Paso 5. El bloque marcado como body es el que se mostrará en el caso de usar un recurso de texto libre (WYSIWYG) con el default body. De esta forma, dentro de ese trozo de código deberemos incluir dicho bloque con <cms:include element=”body”/>

Paso 6. Antes de probar nuestra plantilla nos falta subir nuestra hoja de estilo la cual nos define la estructura que acabamos de crear. Para ello, dentro de la carpeta resources creamos una carpeta CSS y dentro creamos dicha hoja de estilo. A la hora de incluirla en la plantilla usamos el tag <cms:link> para que opencms se encargue de montar la ruta correcta según el proyecto y el site en el que nos encontremos en todo momento.

Paso 7. Vamos a probar nuestra plantilla, para ello vamos a irnos a la sección de contenidos y vamos a crear un recurso de texto libre, le asignamos un titulo al recurso y le indicamos que use la plantilla que acabamos de crear. Al visualizar el contenido debemos ver como se ha creado toda la estructura del portal (columnas, cabecera y pie indicados previamente) y en la sección de contenido central debe aparecer el contenido de nuestro recurso creado.

Paso 8. A partir de este momento damos por hecha la plantilla, vamos a pasar a crear nuestra estructura del portal. Para ello creamos una carpeta como base de navegación, por ejemplo “/nav/” y a partir de aquí creamos una estructura de carpetas igual al mapa web de nuestro portal. Una vez creada la estructura de carpetas asignamos navegación a aquellas secciones que deseamos que aparezcan en el menú. En este momento debemos decidir también el orden de la navegación, es decir, la posición que dicha sección ocupará dentro del menú.

Paso 9. Para dar como plantilla por defecto nuestra plantilla1.jsp copiamos la ruta absoluta del jsp y lo ponemos como valor de la propiedad “template” en la carpeta raiz (nav)

Paso 10. Una vez creado nuestra estructura de carpetas vamos a crear un menú en la columna de la izquierda, para ello creamos una jsp en la carpeta elements que llamaremos “menu.jsp”. En esta jsp debemos realizar los import de las clases necesaria, en este caso nos vale con incluir java.util y org.opencms.jsp. Igualmente será necesario incluir los tag de OpenCms. Una vez que disponemos de los includes necesarios, tan solo debemos utilizar la clase CmsJspActionElement para obtener la navegación: cms.getNavigationForFolder(“carpetaraiz”, ...).

Para ahorranos trabajo, vamos a copiar el element que ya nos da OpenCms en su código de demo, y nos los llevamos a nuestro proyecto, así tan solo deberemos adaptar dicho código a nuestras necesidades.

Paso 11. A continuacíón vamos a crear otro elemento importante de nuestra web, el rastro de migas, para ello podemos utilizar la jsp que nos ofrece de demo el propio OpenCms. Nos vamos al módulo org.opencms.templatetwo y dentro de la carpeta elements copiamos el recurso breadcrumb.jsp y lo llevamos a nuestro proyecto a esa misma carpeta. Una vez copiado, lo que vamos a hacer es un include de dicho elemento, para ello realizamos un cms:include. Para mayor seguridad realizamos un enlazado debil del recurso, indicándole al include que es una relación WEAK. De esta forma, si por algún motivo movemos o borramos dicho elemento el template se enterará de dicho cambio.

Paso 12. Llega el momento de darle formato a nuestra web, para ello debemos modificar nuestra hoja de estilo que contenía hasta ahora la estructura, para añadirle los estilos previamente diseñados.

Paso 13.Llegado a este punto, disponemos de la estructura creada y con estilo dado, ahora solo debemos ir creando cada una de las secciones interiores que ya dependerá del contenido propio de nuestra web. Entre los elementos más usado tenemos:

• Listados: Usaremos el tag cms:contentload para realizar listado de nuestros recursos, y cms:contentshow, cms:contentcheck y cms:contentloop para mostrar los contenidos de cada uno. Según el orden que deseemos se utilizará un collector u otro (consultas documentación para ver todos los collectors disponibles)
• Detalle: Usaremos los mismos tag anteriores, pero con collector singleFile indicando que no se trata de un listado sino de un simple recurso.

Paso 14. A modo de ejemplo vamos a crear una sección de noticias que constará de 2 elementos, un listado de noticias recientes con paginación, y el detalle de las noticias propiamente dicha. En primer lugar es aconsejable crearnos un recurso de OpenCms que nos permita gestionar otro tipo de funcionalidades (ver guía en OpenCms Hispano). Este recurso podría tenerla siguiente estructura:

• Titulo
• Texto de cabecera
• Texto de pie
• plantilla a usar: Este campo debe apuntar al page correspondiente que implementa la funcionalidad, y debe ser mapeado en la propiedad template-elements para que OpenCms en base al template por defecto y a dicho pages genere el código necesario.

El siguiente paso será crear nuestra carpeta pages en nuestros módulo que nos permitirá alojar todas estas jsp de contenidos internos. Dentro de dicha carpeta pages, creamos listado_noticia.jsp. Lo primero que deberemos hacer en esta nueva jsp es introducir la cabecear jsp con los import necesarios, e incluir el template head y foot, de esta forma habremos montado el esqueleto de nuestra página por defecto.

A continuación, y entre medio de los dos include nos disponemos a escribir el código del listado paginado (consultar código útil de OpenCms Hispano).
Puede ser interesante en este punto plantearse la creación de un recurso de configuración de listado que nos permita configurar de una forma más amigable (sin necesidad de tocar código) elementos como el tipo de collector a usar, el número de elementos a mostrar por página, o incluso el tipo de recurso a listar.

Paso 15. Ya disponemos de nuestro recurso de listado, pero necesitamos el detalle del contenido. Para ello creamos un nuevo pages detalle_noticia.jsp. Montamos la estructura al igual que antes, y copiaremos el html que hemos preparado para pintar nuestro detalle de noticia, y substituimos cada elemento por su valor. Para que todas las noticias tengan ya asignada la plantilla del detalle de noticia la podemos asignar a la carpeta padre de forma que, gracias al sistema de propiedades heredadas todas las noticias que se introduzcan en dicha carpeta estarán utilizando el detalle correspondiente.

Paso 16. Otro tipo de funcionalidad:

• Buscador: Uso de lucene.
• Formulario: Uso del módulo WebForm del paquete Alkacon OAMP
• Registro de usuarios y login: Uso del módulo de registro de usuarios del paquete Alkacon OAMP
• Newsletter: Alkacon OAMP
• Mapa web: Componente de demo de OpenCms
• Encuesta: Alkacon OAMP
• Calendario: Alkacon OAMP

Perfilando nuestra plantilla:

• Accesibilidad: El tema de la accesibilidad es muy importante en el actual marco de internet ya que la nueva legislación han impuesto cumplir ciertos requisitos de accesibilidad a todo tipo de web pública. De esta forma deberemos tener en cuenta algunas cosas a la hora de generar nuestro contenido estructurado y nuestras plantillas:
  • Las imágenes deben ir acompañadas de un texto descriptivo de la misma, por lo tanto, será necesario que a la hora de añadir un elemento imagen en un contenido estructurado siempre vaya acompañado de una descripción, para ello generamos un contenido complejo que esté formado por un campo OpenCmsVfsFile (con widget de galería de imágenes para hacerlo más sencillo) y un campo de texto con la descripción de la imagen que pondremos como Title y alt de la imagen (la plantilla debe estar preparada para ello)
  • Seguir el orden lógico de los encabezados: Las etiquetas h1, h2, h3 ..., son más importante de lo que nos pensamos, ya no solo para la accesibilidad de nuestro portal sino para la correcta indexación de los buscadores como google. De esta forma debemos ser muy estrictos en nuestra plantilla con este tema.
• Buscadores:
  • Uso correcto de etiquetas de encabezado como ya he comentado antes.
  • Etiqueta Title del html una de las más importante, para ello utilizar la propiedad Title de los contenidos.
  • Posicionamiento de las palabras clave uniformemente distribuidas en nuestros contenidos. Adicionalmente usar metatags keywords para las mismas aunque estas son poco usadas actualmente (propiedad keywords). Para destacar aún más estas palabras clave suele ser buena práctica el ponerlas en negrita (entre etiquetas <strong></strong>)
  • Title en los enlaces.
  • Alt y title en las imágenes.

Funciones de OpenCms a tener en cuenta

• Propiedades heredadas: OpenCms dispone de un mecanismo de herencia de propiedades de forma que, podemos usarla para la configuración de distintas secciones de forma que, si indicamos una propiedad a la carpeta padre, este será el valor por defecto, y en el caso que deseemos modificarla para alguna sección en concreto tan solo tenemos que cambiarla en la carpeta o recurso correspondiente.
• Ingeniería de relaciones para categorizar información
• Uso del tag jquery: OpenCms dispone de un mecanismo para usar los pluggins de jquery, para ello ha diseñado un tag cms:jquery. Para poder usar dicho tag tendremos que subir nuestros pluggins jquery a la carpeta /system/workplace/resources/jquery/. Dentro de esta carpeta tendremos 3 subcarpetas: unpacket (para el código original del pluggin), packet (para el código javascript enpaquetado, de forma que pese lo menos posible), y css para guardar las hojas de estilo en caso de ser necesarias. Luego, con la siguiente linea importamos el pluggin: <cms:jquery js=”nombre pluggin” css=”nombre css”/>
• OpenCms se encargará de coger el pluggin comprimido a sin comprimir según se encuentre en offline u online. Para que este sistema funcionen todos los pluggins deben estar publicados y exportados a disco correctamente.
• Asignación de plantillas por defecto a los contenidos como propiedad shared: A la hora de definir un recurso xsd en nuestro OpenCms podemos indicarle las propiedades por defecto con las que se crea. De esta forma, damos una configuración por defecto a cada uno de los recursos de forma que disponemos de la opción de cambiarlo si fuera necesario.
• Parseador de XHTML por defecto: OpenCms dispone de una herramienta de parseado a XHTML por defecto de forma que si se introduce código que no sigue el estándar xhtml, el parseador elimina aquellos componentes que incumplen las directrices marcadas.

Documentación de referencia

• OpenCms Hispano (http://www.opencmshispano.com)
• Documentación oficial de OpenCms
• OpenCms Wiki (http://www.opencms-wiki.com)
• Libro OpenCms 7