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:

• OpenCms (instalación de OpenCms 5), de Roberto Canales
• OpenCms (tutorial y taller de OpenCms 6), de OpenCmsHispano
• Fuentes de Documentación para OpenCms 7
• Instalación de OpenCms 7

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:

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

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/:

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):

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:  

<%@page buffer="none" session="false" import="java.util.*" %>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>
<%--
	Plantilla de portada de la web de Autentia
	OpenCms 7
	
--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
	<title>:: AUTENTIA Real Business Solutions :: - Soluciones Reales para su Negocio</title>
	<link rel="STYLESHEET" type="text/css" href="<cms:link>../resources/estilos/autentia.css</cms:link>"/>
</head>
<body leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0">
	<cms:include file="../elements/cabecera.jsp" />
	<cms:include file="../elements/barraEnlaces.jsp" />
	<cms:include file="../elements/pie.jsp" />
</body>
</html>

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

<%@page buffer="none" session="false" import="java.util.*" %>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>
<%--
	Plantilla de secciones de la web de Autentia
	OpenCms 7
--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
	<title>:: AUTENTIA Real Business Solutions :: - Soluciones Reales para su Negocio</title>
	<link rel="STYLESHEET" type="text/css" href="<cms:link>../resources/estilos/autentia.css</cms:link>"/>
</head>
<body leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0">
	<cms:include file="../elements/cabecera.jsp" />
	<cms:include file="../elements/barraEnlaces.jsp" />
	<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="17">&nbsp;</td>
		<td width="130" valign="top"><br/><cms:include file="../elements/menuIzquierdo.jsp" /></td>
		<td width="15">&nbsp;</td>
		<td width="627" valign="top"><cms:include file="../elements/migas.jsp" />
			<br/><cms:include element="text1"></cms:include>
		</td>
	</tr>
	</table>
	
	<cms:include file="../elements/pie.jsp" />
</body>

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:

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

<%@page buffer="none" session="false" import="java.util.*" %>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>
<%--
	Cabecera de la web de Autentia
	OpenCms 7
--%>
<table width="777" cellspacing="0" cellpadding="0" border="0">
<tbody>
 <tr height="16">
  <td width="15" height="16"/>
  <td width="211" valign="bottom" height="60"><a href="<cms:link>index.html</cms:link>">
    <img width="170" height="47" border="0" src="<cms:link>../resources/img/autentia.gif</cms:link>"/></a>
  </td>
  <td width="23" height="16"/>
  <td width="96" height="16" background="<cms:link>../resources/img/arriba1b.jpg</cms:link>" rowspan="2"></td>
  <td width="234" height="16" background="<cms:link>../resources/img/arriba2b.jpg</cms:link>" rowspan="2"></td>
  <td width="198" height="16" background="<cms:link>../resources/img/arriba3b.jpg</cms:link>" rowspan="2"></td>
  </tr>
  <tr>
  <td width="11"/>
  <td width="211"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
     codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" 
        height="30" width="211"> 
      <param name="movie" value="<cms:link>../resources/media/sublogo.swf</cms:link>"> 
      <param name="quality" value="high">
  <embed src="<cms:link>../resources/media/sublogo.swf</cms:link>" quality="high"
  pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" 
  height="30" width="211">
  </object>
  </td>
  </tr>
</tbody>
</table>

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

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

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

<%@page buffer="none" session="false" import="java.util.*" %>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>
<%--
	Barra de enlaces de la web de Autentia
	OpenCms 7
--%>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td width="779" height="26" background="<cms:link>../resources/img/bg1.gif</cms:link>" 
style="background-repeat: repeat-x;">
	<table cellspacing="0" cellpadding="0" border="0">
	<form method="post" action="#"/>
  	<tbody><tr>
		<td><img width="10" height="1" border="0" alt="" 
    src="<cms:link>../resources/img/spacer.gif</cms:link>"/></td>
   		<td>
			<a href="<cms:link>/AUTENTIA</cms:link>"><font class="textobarra">Portada</font></a>
		</td><td width="16" align="center">
			<img width="5" vspace="6" height="5" border="0" alt="" 
      src="<cms:link>../resources/img/pix.gif</cms:link>" align="absmiddle"/>
		</td><td>
			<a href="<cms:link>/AUTENTIA/quienessomos</cms:link>">
			<font class="textobarra">Qui&eacute;nes somos</font></a>
		</td><td width="16" align="center">
			<img width="5" vspace="6" height="5" border="0" alt="" 
      src="<cms:link>../resources/img/pix.gif</cms:link>" align="absmiddle"/>
		</td><td>
			<a href="<cms:link>/AUTENTIA/formacion</cms:link>">
			<font class="textobarra">Formaci&oacute;n</font></a>
		</td><td width="16" align="center">
			<img width="5" vspace="6" height="5" border="0" alt="" 
      src="<cms:link>../resources/img/pix.gif</cms:link>" align="absmiddle"/>
		</td><td>
			<a href="">
			<font class="textobarra">Soporte al Desarrollo</font></a>
		</td><td width="16" align="center">
			<img width="5" vspace="6" height="5" border="0" alt="" 
      src="<cms:link>../resources/img/pix.gif</cms:link>" align="absmiddle"/>
		</td><td>
			<a href="">
			<font class="textobarra">Soluciones</font></a>
		</td><td width="16" align="center">
			<img width="5" vspace="6" height="5" border="0" alt="" 
      src="<cms:link>../resources/img/pix.gif</cms:link>" align="absmiddle"/>
		</td><td>
			<a href="">
			<font class="textobarra">Empleo</font></a>
		</td><td width="16" align="center">
			<img width="5" vspace="6" height="5" border="0" alt="" 
      src="<cms:link>../resources/img/pix.gif</cms:link>" align="absmiddle"/>
		</td><td>
			<a href="<cms:link>/AUTENTIA/contactar</cms:link>">
			<font class="textobarra">Contactar</font></a>
		</td><td>
			<img width="29" height="1" border="0" alt="" 
      src="<cms:link>../resources/img/spacer.gif</cms:link>"/>
		</td><td>
			<font size="1" face="Arial" color="#465266" class="txt2">Buscar en Autentia </font>
		</td>
		<td><img width="5" height="1" border="0" alt="" 
    src="<cms:link>../resources/img/spacer.gif</cms:link>"/></td>
		<td><input type="text" style="background: rgb(193, 200, 219) none repeat scroll 0%; 
      -moz-background-clip: -moz-initial;  -moz-background-origin: -moz-initial; 
      -moz-background-inline-policy: -moz-initial; width: 107px; height: 15px;" 
			maxlength="256" size="16" name="search"/></td>
		<td><img width="5" height="1" border="0" alt="" 
    src="<cms:link>../resources/img/spacer.gif</cms:link>"/></td>
		<td><input width="19" type="image" height="19" border="0" alt="" 
    src="<cms:link>../resources/img/arr3.gif</cms:link>"/></td>
   	</tr>
	</tbody>
	</form>
	</table>
</td></tr>
<tr>
	<td height="16" background="<cms:link>../resources/img/bg3.gif</cms:link>" 
  style="background-repeat: repeat-x;"/>
</tr>
</table>

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:

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

<%@page buffer="none" session="false" import="java.util.*" %>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>
<%--  
    Pie de la web de Autentia  
    OpenCms 7  
--%>  
<table border="0" cellpadding="0" cellspacing="0">
 <tr><td><img src="<cms:link>../resources/img/spacer.gif</cms:link>" width="1" height="20" border="0" alt="">
 </td></tr>
 <tr>
   <td width="779" height="25" background="<cms:link>../resources/img/bg2.gif</cms:link>" 
   style="background-repeat: repeat-x">
    <table border="0" cellpadding="0" cellspacing="0">
   <tr>
     <td>
        <img src="<cms:link>../resources/img/spacer.gif</cms:link>" width="10" height="1" border="0" alt="">
     </td><td>
       <a href="http://www.autentia.com/">
       <font class="txt2" face="Tahoma" size="1" color="#122F5E">
       Su empresa de soporte a desarrollo en nuevas tecnolog&iacute;as
       </font></a>
     </td><td>
        <img src="<cms:link>../resources/img/spacer.gif</cms:link>" width="175" height="1" border="0" alt="">
     </td><td>
       <a href="<cms:link>/AUTENTIA/mapaweb</cms:link>">
       <font class="textobarra">Mapa Web</font></a>
     </td><td width="16" align="center">
         <img src="<cms:link>../resources/img/pix.gif</cms:link>" width="5" height="5" border="0" alt="" 
         vspace="6" align="absmiddle">
     </td><td>
       <a href="<cms:link>/AUTENTIA/recomendar</cms:link>">
       <font class="textobarra">Recomi&eacute;ndanos</font></a>
     </td><td width="16" align="center">
        <img src="<cms:link>../resources/img/pix.gif</cms:link>" width="5" height="5" border="0" alt="" 
        vspace="6" align="absmiddle">
     </td><td>
       <a href="<cms:link>/AUTENTIA/legal</cms:link>">
       <font class="textobarra">Texto Legal</font></a>
     </td><td width="16" align="center">
       <img src="<cms:link>../resources/img/pix.gif</cms:link>" width="5" height="5" border="0" alt="" 
       vspace="6" align="absmiddle">
     </td><td>
       <a href="<cms:link>/AUTENTIA/contactar</cms:link>">
       <font class="textobarra">Contactar</font></a>
     </td>
     </tr>
   </table>
  </td>
 </tr>
</table>

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:

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…

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:

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 las subsecciones

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

<%@ page buffer="none"  session="false" import="java.util.*, org.opencms.jsp.*" %>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>
<%--  
    Menu izquiero de las secciones de Autentia  
    OpenCms 7  
--%> 
<%

CmsJspActionElement cms = new CmsJspActionElement( pageContext, request, response );
CmsJspNavBuilder navigation = cms.getNavigation();
List navItems = navigation.getNavigationForFolder();
Iterator i = navItems.iterator();
while(i.hasNext()) 
{
	CmsJspNavElement navElement = (CmsJspNavElement) i.next();
	String link = cms.link( navElement.getResourceName() );
	String title = navElement.getNavText();
	%>
	<img width="5" height="5" border="0" alt="" src="<cms:link>../resources/img/arr_s.gif</cms:link>"/> 
	<a href="<%=link%>"><font class="txt3" face="Tahoma" size="2" color="#122F5E"><%=title%></font></a><br/>
	<%
}
%>
<br/><br/>
    <!-- Tabla de destacados -->
    <table width="130" cellspacing="0" cellpadding="0" border="0">
      <tbody>
        <tr>
          <td width="130" height="25" background="<cms:link>../resources/img/suptabla.gif</cms:link>">
            <table width="130" cellspacing="0" cellpadding="0" border="0">
              <tbody>
                <tr>
                  <td width="7">
                     &nbsp;
                  </td>
                  <td>
                    <font class="txt5" face="Tahoma" size="1" color="#ffffff">Autentia en c&oacute;mic</font>
                  </td>
                  <td width="7">
                     &nbsp;
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td width="130" background="<cms:link>../resources/img/medtabla.gif</cms:link>">
            <table width="130" cellspacing="0" cellpadding="0" border="0">
              <tbody>
                <tr>
                  <td width="6">
                    &nbsp; 
                  </td>
                  <td>
                    <font class="txt1" face="Tahoma" size="1">Vea escenarios de servicios ofrecidos por Autentia 
                              en formato c&oacute;mic. Im&aacute;genes y PDF en alta resoluci&oacute;n...</font>
                  </td>
                  <td width="6">
			&nbsp;
                  </td>
                </tr>
              </tbody>
            </table>
            <table cellspacing="0" cellpadding="0" border="0">
              <tbody>
                <tr>
                  <td width="6">
                     &nbsp;
                  </td>
                  <td>
                    <div align="right">
                      <a href="<cms:link>/AUTENTIA/comic</cms:link>">
                                   <font class="txt5" face="Tahoma" size="1">&gt;&gt;&gt;</font></a>
                    </div>
                  </td>
                  <td width="6">
			&nbsp;
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr height="8">
          <td width="130" height="8" background="<cms:link>../resources/img/abtabla.gif</cms:link>">
        </tr>
      </tbody>
    </table>

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:

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:

<%@ page buffer="none"  session="false" import="java.util.*, org.opencms.jsp.*" %>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>
<%--    
    Rastro de migas de la web de Autentia       
    OpenCms 7    
--%>   
<%

// Acedemos a la funcionalidad de los taglib de openCms
CmsJspActionElement cms = new CmsJspActionElement(pageContext, request, response);

// Obtenemos el rastro de migas
CmsJspNavBuilder navigation = cms.getNavigation();
List navItems = navigation.getNavigationBreadCrumb(-2,true);

// iteramos sobre la lista de (sub)secciones
Iterator i = navItems.iterator();
boolean first=true;
while(i.hasNext()) 
{
	// elemento de navegacion
	CmsJspNavElement navElement = (CmsJspNavElement)i.next();
	String link = cms.link(navElement.getResourceName());

	// mostraremos en link con el nombre introducido en el recurso como texto de navegacion:
	String title = navElement.getNavText();
	if(first==true)
		first=false;
	else
	{
		out.print("<font class=\"textomigas\">&nbsp;&gt;&nbsp;</font>");
	}
	%>
	<a href="<%=link%>"><font class="textomigas"><%=title%></font></a>
	<%
}
%>

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:

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. Nuevo | Pagina con texto libre

Pulsamos Continuar y
rellenamos el formulario subsiguiente conforme la imagen:

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 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 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 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

Sección
Contacto 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

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.