Opencms hacer un sitio web

Opencms hacer un sitio web


Vamos a crear un sitio web llamado misitioweb , despues de haber instalado correctamente OpenCms en Linux Mandriva 2010,  ver el blog para instalación

http://cac9999.blogspot.com/2011/03/instalacion-opencms-en-linux-madriva.html).

Voy a referirme en este artículo sobre mi forma de percibir la creación de un sitio de gestión de contenido, con OpenCms, pues aunque hay  mucha información al respecto cuando uno aborda este gestor por lo menos yo quedé con  muchos vacios respecto a cómo empezar y lo que se esperaba que hiciera el gestor de contenido con mi aplicación especifica.




Creamos una carpeta con este nombre en el sitio: sites/default con vista : Explorador, que es donde quedamos una vez ingresamos la clave de administrador en Opencms.

Para cambiar a español , vamos en la barra de herramientas , ingresamos a preferencias y en la pestaña general elegimos el lenguaje : Español


Debemos familiarizarnos con tres términos básicos importantes de la barra de
herramientas y ubicarnos donde están (ver recuadros en rojo en la imagen).

NUEVO : crea un item nuevo en cualquier lugar del sistema
VISTA    : tiene dos posibilidades Explorador y Administrador
SITIO     : tiene dos posibilidades /sites/default y slash / (raíz).

Darle click a las imagenes para ampliar

Entrando en preferencias ver imagen anterior recuadro rojo mas a la derecha ,seleccione el idioma español

Iniciamos la creacon del sitio presionando Nuevo , en la barra de herramientas
(recuadro rojo mas a la izquierda) y aparece un menú con varios tipos de carpetas a crear , elegimos la primera ,  carpeta

creamos la carpeta del misitiweb

en el nombre de la carpeta colocamos misitioweb

en el titulo agregamos un breve descripción de lo que el sitio hace

si la creación fue correcta el sistema nos muestra la carpeta de misitioweb en sites/default

Vamos entonces a crear el modulo donde toda la información asociada con el sitio web va ser almacenada. La idea en opencms es que el sitio sea construido a partir de un archivo(s) de un sitio web convencionales, siguiendo una estructura una estructura simple.
En general las paginas web constan de unos elementos constitutivos básicos que por lo general se encuentran en toda, a saber ,

1. Cabecera
2. Barra de herramientas
3. Cuerpo
4. Pie de pagina
5. Menú Izquierdo
6. Menú derecho
7. Secciones

Vamos a centrarnos aquí en crear la estructura básica del sitio

En la barra de herramientas en vista seleccionamos administrador para crear el modulo contenedor de las partes del sitio , seleccionamos el icono Gestión de módulos

Seleccionamos crear modulo

Es muy importante darle el nombre correcto al paquete, se hace en la nomenclatura java, en nuestro caso donde el sitio se llama www.misitioweb.com.co le colocamos el nombre del paquete co com.com.misitioweb (asi como esta al revés del nombre del sitio), debemos seleccionar todos los directorios del modulo y terminar

Si todo quedó correcto en pantalla deberíamos ver el modulo en la ventana central del sistema.

Nos movemos hacia la raiz del sistema  con vista de explorador , el modulo de interés quedó en system que es la carpeta que debemos abrir a continuación

Vamos a crear los archivos de base sobre la estructura del modulo co.com-misitiowe para tal efecto nos salimos del menú anterior seleccionado en vista : Explorador y en sitio : / (la raíz)

Ingresamos a la carpeta modules

Entre oros módulos como son los de documentación , plantillas generales de template Two , vemos nuestro modulo en azul, porque aun no tiene datos co.com.misitioweb, ingreso en esta carpeta

El sistema despliega las carpetas básicas para la crear la estructura del sitio, en nuestro caso sencillo serán de particular interes las carpetas templates, resources y elements, de momento no usamos ni lib  ni class, en templates crearemos el cuerpo del sitio , en elements los lelementos del sitio como son cabecera , pie de pagina, y barra de herramientas y en resources las imagenes , vídeos, sonidos, presentaciones flash etc.

En este punto pensé que todo lo que había que hacer en seguida era conseguirme una plantilla opencms , como deja entrever un manual que leí, he incluso da la dirección de las plantillas para descargar , pero no señor la cosa no trabaja así, como me di cuenta después de perder el fin de semana buscando una plantilla de Opencms , para ahorrarme  el esfuerzo

Plantillas opencms como yo me las esperaba , con todo conformado donde lo único que hubiera que hacer era cambiar los títulos y las imágenes , no las encontré, a sí ,existen una plantillas en SAGA por ejemplo , pero orientadas a resolver casos muy concretos como son informes, otros permiten implantar un carrito de compras como KonaKar, hay muchas cosas en lña web en opencms pero no lo que yo pensé que debería ser una plantilla, donde las lib, class, elements, templates estuvieran listas y funcionando, no quiero decir que no existan, sinio que despúes de una semana de busqueda y ensayos no poude encontrar nada asi.


Bueno el caso es que la filosofía de OpenCms es más simple, claro cuando uno la entiende como todo en la vida.

Opencms parte del hecho de que cualquier pagina Html bien conformada, es una plantilla OpenCms , asi de simple

Se puede conseguir una pagina sencilla en Html puro ( sin llamadas a php o empotramientos de lenguajes de script) ,  yo la hice a través de una herramienta llamadaYaml (http://builder.yaml.de/) que permite maquetiar los sitios en línea, su principal ventaja es que lo que allí se hace queda en código Html puro y con código bien conformado , es decir que paso cualquier parser (analizador de W3C), en esto el Opencms es bien quisquilloso , no le gustan las libertadades y usos incorrectos que de Html que se hace a veces , como es el uso de <b>hola</b> para indicar negrillas , fuera del estándar W3C que recomienda <strong>hola</strong> , etiquetas mal cerradas , anidamiento de etiquetas incorrectos etc.. . Debemos recordar que OpenCms , viene de java , y este es un lenguaje fuertemente tipeado , y muy celoso de los fines de líneas, procedures etc.

Con la pagina diseñada, usando CSS, muy recomendado, para evitar que estar tocando todo el código, cada vez que quiera cambiar el tipo de letra, tamaño, o cualquier otra cosa que en una aplicación grandes es cosa seria. 
Cree una carpeta en resources para guardar la información del CSS, ya que el gestor de módulos no la crea por defecto.

en el co.com.mitsitioweb , le pido al sistema que cree una carpeta nueva

Le creamos la carpeta y le damos como nombre estilo e ingresamos como titulo carpeta de estilos css para co.com.sitioweb

Ya quedó la estructura basica completa.
Ingresamos a la carpeta resources para crear las carpetas de imágenes y videos donde ya debe estar la carpeta estilo para css.
Le pedimos al sistema que cree una carpeta extendida , es importante que se extendida ya que estas carpetas permiten manipular galeras de información y en nuestro caso vamos a almacenar una galería de imágenes y vídeos.

Creamos la carpeta extendida

Selecciona galería de imágenes, mas adelante  en esta carpeta importaremos imágenes tanto desde nuestro sitio como desde sitios externos a través de la opción de la barra de herramientas subir

Seleccionamos galería de imágenes

Le damos un nombre a la carpeta en este caso por ejemplo:  img

Le damos un titulo a la carpeta como por ejemplo imágenes del sitio web.

De forma similar a lo anterior procedemos a crear la carpeta de vídeos

Podemos ver ahora que las carpetas para alojar imágenes y vídeos y estilo están en la carpeta resources.


Ingreso a la carpeta templates, en opción de la barra de herramientas nuevo creo un archivo tipo jsp de nombre cuerpo. no darle ninguna extensión el sistema lo coloca automáticamente, en titulo del archivo describimos que este es archivo principal del sitio.

Aparece ya en templates el archivo que nos va alojar la información de la pagina web de nustro sitio

ahora nos ubicamos en la carpeta elements , y alli creamos los elementos de la pagina como cabvecera, pie de pagina , barra de herramientas.

Para tal efecto creamos archivos nuevos de tipo Jsp y les damos respectivamente los nombres de cabecera, pie, y barraDeHerramientas

En el archivo elements creamos un archivo tipo JSP para almacenar la cabecera del sitio

Le damos un titulo al archivo recien creado

De igual forma procedemos a la creación del archivo de pie de página

Seleccionar archivo tipo JSP

Creacion de pie de pagina en elements como un archivo jsp

Hasta aquí lo mas básico de la creación del sitio, en un próximo  articulo publicare como se van poblando los diversos archivos que dejamos en cada una de las carpetas

A partir de esto debemos colocar el código Jsp en cada uno de ellos para que active el sistema CMS y podemos ver lo que estamos haciendo y proceder a modificarlo ahora si por editor de texto, contextual y WYSIWYG es el acrónimo de What You See Is What You Get (en inglés, "lo que ves es lo que obtienes").