Crear un portal web con OpenCms 7.0.3
- Crear un Portal Web con OpenCms 7.0.3
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
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 htmlPUBLIC
"-//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 htmlPUBLIC
"-//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"
> </td> <td width="130"
valign="top"
><br/><cms:include file="../elements/menuIzquierdo.jsp"
/></td> <td width="15"
> </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
OpenCms no define En nuestro |
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>"
><fontclass
="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>"
> <fontclass
="textobarra"
>Quié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>"
> <fontclass
="textobarra"
>Formació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=""
> <fontclass
="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=""
> <fontclass
="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=""
> <fontclass
="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>"
> <fontclass
="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/"
> <fontclass
="txt2"
face="Tahoma"
size="1"
color="#122F5E"
> Su empresa de soporte a desarrollo en nuevas tecnologí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>"
> <fontclass
="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>"
> <fontclass
="textobarra"
>Recomié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>"
> <fontclass
="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>"
> <fontclass
="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%>"
><fontclass
="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"
> </td> <td> <fontclass
="txt5"
face="Tahoma"
size="1"
color="#ffffff"
>Autentia en cómic</font> </td> <td width="7"
> </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"
> </td> <td> <fontclass
="txt1"
face="Tahoma"
size="1"
>Vea escenarios de servicios ofrecidos por Autentia en formato cómic. Imágenes y PDF en alta resolución...</font> </td> <td width="6"
> </td> </tr> </tbody> </table> <table cellspacing="0"
cellpadding="0"
border="0"
> <tbody> <tr> <td width="6"
> </td> <td> <div align="right"
> <a href="<cms:link>/AUTENTIA/comic</cms:link>"
> <fontclass
="txt5"
face="Tahoma"
size="1"
>>>></font></a> </div> </td> <td width="6"
> </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\"> > </font>"
); } %> <a href="<%=link%>"
><fontclass
="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:
- 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 - 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.
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
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.
Hola, la plantilla a la que se hace referencia, «Una plantilla de estilo obtenida de http://getfreetemplates.com (6.zip) y modificada a nuestro gusto.» no está disponible.