Crear un portal web con OpenCms 7.0.3

3
41945

Crear un portal web con OpenCms 7.0.3

  1. Crear un Portal Web con OpenCms 7.0.3
    1. Introducción a OpenCms
    2. Objetivos del tutorial
    3. Diseño del portal web
    4. Desarrollo con OpenCms
      1. Paso 1. Crear el site AUTENTIA en el gestor
      2. Paso 2. Añadir los recursos
        básicos
      3. Paso 3. Crear las
        plantillas, componentes y navegación
      4. Paso 4. Añadir los contenidos de texto e
        imágenes a las páginas
    5. Conclusión

Introducción a OpenCms

El uso de gestores de contenidos o
CMS (Content Management System) está ampliamente extendido en
websites corporativos de medianas y grandes empresas. En esta ocasión vamos a trabajar
con OpenCms, un
potente gestor de contenidos open source basado en Java y XML, apoyado
por una amplia comunidad de usuarios. En castellano, la comunidad de
referencia es OpenCmsHispano.

En esta misma web de adictos al trabajo dispones de algunos tutoriales
que recomiendo leer si estás comenzando con OpenCms:

El entorno
en el que realizaremos este tutorial será el mismo que aparece en el
tutorial Instalación de OpenCms 7.

Objetivos del tutorial

Vamos a construir un sitio web que
nos introduzca, hasta un nivel intermedio, a los fundamentos de
OpenCms. Diseñaremos la estructura del portal, usando
plantillas JSP, la API de OpenCms y añadiremos contenidos con el administrador gestor.

La release 7 incluye lo aquí
explicado y añade potentes mejoras basadas en XML, que abordaremos
en próximos tutoriales.

Diseño
del portal web

Al escribir estas líneas, nuestro portal de
Autentia www.autentia.com está desarrollado en HTML estático; a medida que los contenidos
aumenten, la usabilidad y la mantenibilidad irán en detrimento… a si
que vamos a migrarla a un gestor de contenidos.

Nuestro mapa
de navegación se compondrá de las siguientes secciones (adjunto el tipo
de recurso o contenido más apropiado):

  • Portada
    • Quiénes somos
      • Quiénes somos [texto]
      • Política de
        Empresa [texto]
      • Enlaces recomendados
        [componente Link List]
    • Formación
      • Formación [texto]
      • Cursos [componente
        nuevo: curso]
    • Soporte al desarrollo
      • Soporte al desarrollo [texto]
      • FAQ [componente FAQ
        article]
    • Soluciones
      • Soluciones [texto]
      • Descargas [componente Download
        Gallery]
    • Empleo [componente Job Offering]
    • Contactar
      • Contactar [texto]
      • Formulario [componente Email
        Form]
    • Mapa web [contenido dinámico]
    • Recomiéndanos
      [texto]
    • Texto Legal [texto]
    • Autentia Cómic
      [componente Photo Album]

Desarrollo con OpenCms

El material de partida será:

  • El contenido de la web de Autentia
  • Una plantilla de
    estilo obtenida de http://getfreetemplates.com y modificada a nuestro gusto.

Paso
1. Crear el site AUTENTIA en el gestor

Situándonos en la
consola de administración  (http://localhost:8080/opencms/opencms/system/login/index.html)
como administrador, en /site/default pulsamos sobre Nuevo | Carpeta
Extendida |  Microsite y ponemos como Nombre: AUTENTIA, Título:
Autentia Real Business Solutions S.L. y pulsamos sobre Terminar. Esto
nos habrá creado un espacio independiente (un contexto propio) en el
gestor para nuestra web con dos carpetas por defecto, _configuration y
modules. No las necesitaremos, pero podemos dejarlas:

Microsite de Autentia en OpenCms 7
Estructura por defecto del microsite

Ahora damos de alta un
módulo que contendrá los recursos de la web: imágenes, plantillas,
ficheros, etc. Cambiamos a la vista Administración y en Gestión de
Módulos pulsamos sobre Módulo nuevo y completamos el formulario como se
ve en la imagen (pulsar para ampliar). Los datos imprescindibles son:

  • Sitio: /
  • Paquete: com.autentia.web
  • Grupo:
    AUTENTIA
  • Activamos la creación de todas las carpetas

Modulo en OpenCms 7 para el site de Autentia
Crear un nuevo módulo

Paso 2. Añadir los recursos básicos

Dentro de resources pulsamos sobre Nuevo | Carpeta, ponemos como
nombre: estilos y título: Estilos de Site de autentia. Una vez creado,
subiremos el fichero autentia.css (modificando a nuestro gusto el que se incluye en el template descargado)a 
/system/modules/com.autentia.web/resources/estilos/:

Hola de estilo de Autentia como resource en OpenCms 7
Hoja de estilos
de nuestra web en /system/modules/com.autentia.web/resources/estilos/

Igualmente creamos la carpeta
/system/modules/com.autentia.web/resources/img/ y subimos las imáagenes, y en
/system/modules/com.autentia.web/resources/media/ el contenido multimedia (flash).

Paso
3. Crear las plantillas, componentes y navegación

El aspecto visual de nuestra web se basarán
en plantillas de componentes. Éstas determinarán cómo se organizan los
componentes y contenidos en cada página web que visite un usuario:
localización de cabeceras, menús, etc. Para nuestro ejemplo hemos
diseñado los siguientes disposiciones (o layout):

Plantilla o layout de la web de Autentia en OpenCms 7

Las plantillas o layouts en OpenCms son
código JSP. Crearemos una nueva en
/system/modules/com.autentia.web/templates/ (Nuevo | JSP) llamada
plantillaPortada.jsp con Título: Plantilla para la portada del site de
AUTENTIA y export a false. Introduciremos el siguiente código:  

Ahora crearemos la plantilla para las páginas de sección:
plantillaSecciones.jsp:

En el código se aprecia lo siguiente:

  • <cms:link>
    se utiliza para resolver el contexto de nuestro proyecto dentro del
    gestor y que los recursos se enlacen adecuadamente.
  • Con
    <cms:include file=”../elements/cabecera.jsp” /> incluimos las
    distintas partes que componen el layout, en este caso la cabecera.
  • <cms:include element=”text1″
    /> explicaré qué es “text1” un poco más adelante.

“../elements/” hace referencia a
/system/modules/com.autentia.web/elements/, que es donde colocaremos
las JSP incluidas en las plantillas, que definirán los
componentes. 

Comencemos por el componente cabecera.
Vemos su composición de contenidos imagen y flash:

Componente cabecera de la web de Autentia en OpenCms 7

creamos el siguiente código en
/system/modules/com.autentia.web/elements/cabecera.jsp:

Podemos destacar del código lo siguiente:

  • El
    logo de AUTENTIA enlaza con la página HOME. En enlace se indica
    explícitamente, index.html. Al estar en la raíz del contexto del
    microsite (/sites/default/AUTENTIA) no es necesario introducir
    directorios en la URI
  • La inserción de imágenes, objetos
    flash y cualquier componente, es el habitual en HTML

OpenCms no define
un modelo de navegación estándar en sus sites, sino que ofrece una API
muy completa para que el programador lo implemente según sus
necesidades (en OpenCMS previo a 7.0.4 existen las plantillas
templateOne y a partir de esta versión, templateTwo)

En nuestro
ejemplo estamos creando enlaces estáticos para las secciones fijas y
enlaces dinámicos para que al añadir subsecciones nuevas aparezan
automáticamente los enlaces en el menú izquierdo de cada sección; o
también para que el mapa web se autocomplete recorriendo la estructura
del site y mostrándolo en forma de árbol.

Continuamos con la barra de navegación estática.
Contendrá los enlaces a las secciones comunes de la web:

Barra de navegacion de la web de Autentia en OpenCms 7

creamos el siguiente código en
/system/modules/com.autentia.web/elements/barraEnlaces.jsp:

Podemos destacar del código lo siguiente:

  • Hacemos
    referencia a elementos de la hoja de estilos autentia.css
  • Introducimos
    un campo de entrada de texto, etiqueta input, de momento inerte. Será útil para la implementación de un buscador contextual.

Es el turno del pie de página, con algunos enlaces
genéricos:

Componente pie de la web de Autentia en OpenCms 7

creamos el
siguiente código en /system/modules/com.autentia.web/elements/pie.jsp:

Vamos ahora a crear dos componentes que servirán de ejemplo para la
generación dinámica de enlaces. Usaremos métodos de la API de OpenCms
para que al añadir subsecciones nuevas a nuestro web, los enlaces
aparezcan con nombres y direcciones correctamente resueltas. Comenzamos
con el componente Menú de Sección:

Componente Menu de seccion de la web de Autentia en OpenCms 7

Los
enlaces “Subsección 1… Subsección n” se generarán de la siguiente
manera: las secciones de la web se corresponderán con carpetas creadas
al nivel raíz del proyecto de AUTENTIA en OpenCms. En la siguiente
imagen te muestro algunas secciones que crearemos luego: cómic,
contactar, empleo, formación…

Secciones de la web de Autentia en OpenCms 7
Agrupamos las
secciones en carpetas

De esta manera, todas las páginas que
incluyamos en cada carpeta serán subsecciones. Por ejemplo, la sección
Quiénes somos tiene dos subsecciones: Quiénes somos y Política de
Empresa:

Seccion Quienes Somos de la web de Autentia en OpenCms 7
Subsecciones
de la sección Quiénes Somos

y al
final se renderizará (en el momento de la primera compilación de
la JSP) un listado con los títulos de los documentos:

Enlaces a secciones renderizados en la web de Autentia en OpenCms 7
Enlaces a las subsecciones

Veamos
el código que implementa esta manera de resolver los enlaces;
/system/modules/com.autentia.web/elements/menuIzquierdo.jsp:

Para el componente del rastro de migas optamos también por
una generación dinámica de los enlaces, que muestre el nivel de
profundidad sección/subsección en que nos encontramos:

Rastro de migas para la web de Autentia en OpenCms7

El código es sencillo: invocamos al método
getNavigationBreadCrumb() e iteramos por los elementos de la lista
resultante. La JSP será la
/system/modules/com.autentia.web/elements/migas.jsp:

Paso
4. Crear las secciones y subsecciones

En la barra de
enlaces y en el pie hemos introducido enlaces a la secciones fijas del
site que, como he explicado antes, se corresponden con carpetas a nivel
raíz del contexto de nuestro site en el CMS (/sites/default/AUTENTIA).
Hasta ahora sólo tenemos creadas las carpetas modules y _configuration.
Las ignoramos, pero a su mismo nivel vamos a crear las secciones.

En estos momentos, si pulsamos sobre un enlace (por ejemplo Mapa
Web) el CMS intentará resolver la URI /sites/default/AUTENTIA/mapaweb.
Como dicha carpeta de sección no existe, obtendremos este mensaje:

Mensaje de error en OpenCms 7
Todo enlace a
seciones sin crear producirá este tipo de error

Para crear
una carpeta de sección, estando en el panel de administración en
/sites/default/AUTENTIA, pulsamos sobre Nuevo | Carpeta |  Nombre:
quienessomos (mismo nombre que el puesto en barraEnlaces.jsp),
seleccionamos abajo No index page y dejamos activo el checkbox Edit
properties of the new folder:


Creamos una
carpeta por cada sección

Pulsamos
“Continuar >>” y en la siguiente pantalla introducimos los datos como se
observa en la imagen siguiente:


Propiedades de la carpeta quienessomos

Seguro que en este punto ya te has dado
cuenta de que la propiedad Texto de Navegación: “Quiénes Somos”
será el valor que represente la sección actual en el rastro de migas
(si tienes dudas, revisa en la API la clase CmsJspNavElement)

La carpeta ya
está creada en /sites/default/AUTENTIA/quienessomos, y por ende ya
tenemos definida esa sección.


Seccion quienessomos recien creada

 Ahora creamos las
subsecciones de la sección de esta manera:

  1. La primera
    subsección que creemos (puede que sea la única) persistirá en un
    fichero de nombre: index.html, y será la que se visualize por defecto
    al pulsarse sobre el enlace de su sección contendora
  2. El
    resto de subsecciones que se creen podrá tener cada una un fichero
    .html cada uno con el nombre que queramos. Nuestro diseño para resolver
    los enlaces de las subsecciones hace que OpenCms resuelva las URI de
    manera transparente al desarrollador.

Entramos en
/sites/default/AUTENTIA/quienessomos/ y creamos un fichero index.html
desde Nuevo | Página con texto libre, con los datos de la imagen:

Crear nueva seccion en OpenCms. Nuevo | Pagina con texto libre
Crear nueva
seccion. Nuevo | Pagina con texto libre

Pulsamos Continuar y
rellenamos el formulario subsiguiente conforme la imagen:

Propiedades del fichero index.html de la seccion quienessomos en OpenCms
Propiedades
del fichero index.html de la seccián quienessomos

Vamos ahora a
dar cuerpo a la página. Pulsamos sobre index.html y en el menú
desplegable seleccionamos Editar Página:

Editar el contenido una pagina en OpenCms 7
Editar el
contenido una página en OpenCms 7

Se abrirá un editor de texto
enriquecido embebido, mediante el cual podremos introducir texto con
formato, imágenes, etc. Añadimos texto descriptivo de Autentia, como
puede apreciarse en la imagen:

Insertar contenido en una seccion en OpenCms 7
Insertar
contenido en una seccion de la web de Autentia en OpenCms 7

Fijémonos
en dos cosas importantes:

  • La página web que estamos
    desarrollando no gestiona la i18n. Por tanto estamos añadiendo el
    contenido en el idioma por defecto de OpenCms 7, que en la imagen se
    aprecia que es Inglés. Un buen ejercicio sería adaptar el desarrollo de
    este tutorial para soportar internacionalizacion de sus contenidos.
  • Cuando
    en la plantillaSecciones.jsp hacíamos en el código un include del
    elemento “text1”, estamos viendo que se incluye el contenido de la
    imagen, porque el elemento al que asociamos el contenido se identifica
    por “text1”. Podríamos crear otros elementos para otros contenidos,
    pero de momento es suficiente.

Si en la consola de
administración (sitio /sites/default, localización /AUTENTIA/) creamos
una página con texto libre, la llamamos index.html (el punto de entrada
a nuestra web) y pulsamos sobre ella, y navegamos a la sección Quiénes
somos, veremos nuestra web de Autentia con su primer contenido añadido:

Primera pagina con contenido de Autentia en openCms 7
Primera página
con contenido de Autentia en openCms 7

Lo que se ha explicado
aquí para terner finalizada la sección y subsección Quiénes Somos
podemos reproducirlo de la misma manera para:

  • Sección
    Quiénes somos, subsección Política de Empresa
  • Sección y
    subsección Contactar
  • Sección y subsección Texto Legal

Seccion Contacto de la web de Autentia en OpenCms 7
Sección
Contacto de la web de Autentia en OpenCms 7

Seccion Texto Legal de la web de Autentia en OpenCms 7
Sección Texto
Legal de la web de Autentia en OpenCms 7

Seccion Politica de Empresa de Autentia en OpenCms 7
Seccion
Politica de Empresa de Autentia en OpenCms 7

Conclusión

Este tutorial muestra cómo hacer cosas esenciales en OpenCms: crear un contexto para un site
nuevo en el gestor, crear las secciones, subsecciones, introducir
contenido editable de texto e imágenes y resolver la generación de
enlaces y rastro de migas utilizando la API.

 

3 Comentarios

  1. Hola, excelente el tutorial, he seguido todo los pasos al momento de editar mi index.html este luego no muestra el contenido que le he escrito con el editor. ¿Porque no me aparece el contenido q le ingreso? solo muestra lo que posee plantillaportada pero no el contenido, como le ingreso contenido a mis html?

    Q me falta por configurar? Disculpar la molestia soy nueva en esto y no soy programadora de Java pero debo aprender a trabajar con opencms pronto .

    Saludos y gracias

  2. Hola soy nuevo en este CMS y tengo el siguiente problema. He bajado la plantilla 6.zip pero no contiene el fichero .css ¿Cómo puedo obtener este fichero? Aunque veo que este tema lleva abierto desde 2009 espero que todavía siga funcionando para poder obetener respuesta, gracias.

Dejar respuesta

Please enter your comment!
Please enter your name here