Documentos de Académico
Documentos de Profesional
Documentos de Cultura
www.sagasoluciones.com
info@sagasoluciones.com
C/ Salado 11 Local 10. 41010 Sevilla
T. + 34 954 45 72 75
F. + 34 954 45 75 72
Manual del Usuario Editor de OpenCms
Realizado
(01/02/2011)
Revisado
(07/02/2011)
Control de Modificaciones
Índice de Contenido
1. ACCESO AL GESTOR DE CONTENIDOS ............................................................................6
12.5 FICHEROS PLANTILLA, DE LAS CARPETAS GALERÍA HTML Y GALERÍA DE TABLAS _______ 49
http://ipservidor:8080/opencms/opencms/system/login/
Es posible que el primer OpenCms varíe según la versión instalada por lo que dependerá de cada
proyecto.
Una vez que se abre esta ventana, tendremos un cuadro de acceso como el siguiente:
Tras introducir los datos referentes al Usuario y Contraseña, debemos pinchar en el botón
“Opciones”, lo cual, desplegará una lista en la que seleccionaremos la Unidad Organizativa de
nuestro portal.
2. Entorno de Trabajo
Una vez dentro de OpenCms, veremos como el entorno de trabajo se encuentra dividido en tres
secciones principales.
Contiene una serie de herramientas divididas en dos filas y cuyas funcionalidades serán descritas,
a grandes rasgo, en la siguiente lista:
Desplegable Proyecto
Permite ver nuestro gestor de contenidos Offline u Online si lo seleccionamos en su
desplegable. Por defecto aparece la opción Offline activa, ya que será el modo, en el cual
trabajaremos normalmente.
Botón Cola
Si hacemos clic en él podremos ver el proceso de publicación de los recursos. En caso de
existir un error en la publicación de un recurso, podemos acudir a esta sección para ver su
detalle.
Desplegable Sitio
En OpenCms podremos almacenar más de un portal. Es, a través de éste desplegable,
donde podremos ver la lista de los Sites, y seleccionar aquel en el cual vamos a editar.
Desplegable Vista
Podremos seleccionar la visualización de la pantalla de Administración, en la que podremos
manejar temas relacionados con gestión de usuarios, lista de envío de newsletter, etc.
Botón Recargar
Recarga o refresca la pantalla de OpenCms.
Botón Preferencias
Permite configurar temas relacionados con tu cuenta en OpenCms. A través de su cuadro
de diálogo podemos adaptar el entorno de trabajo a nuestras necesidades, configurar
nuestra cuenta de usuario, etc.
Botón Salir
Con él salimos del entrono de trabajo de OpenCms.
Botón Volver
Volvemos al estado anterior en cuanto a nuestra posición en la navegación.
Botón Subida
Abre un cuadro de diálogo que explora nuestro ordenador local. Sirve para la subida de
ficheros a la web, como por ejemplo, imágenes, documentos Word, Pdf, Excell o archivos
Zip, Rar, entre otros.
8
Botón Nuevo
Comando para crear recursos Template SAGA. Sus funcionalidades serán descritas
posteriormente en el apartado de creación de recursos en nuestro portal.
Campo Ruta
Muestra la ruta absoluta en la que nos encontramos.
A la izquierda en nuestro entorno de trabajo, podemos ver una columna en la cual aparece un
árbol de carpetas. Esta estructura es la que contiene todos los archivos de nuestra web.
Por defecto, la estructura de primer nivel que aparece al entrar en nuestro Site, es la siguiente:
galerias: Carpeta donde colocaremos todas las galerías del portal, tanto de imágenes como
de documentos de descargas.
nav: Carpeta con la estructura de navegación del portal
En ella podremos ver el contenido de las carpetas de nuestro entorno de trabajo. Aparecerán a
modo de lista de detalle los distintos recursos que se encuentran creados y que se corresponden
con las páginas de contenidos web.
Haciendo clic sobre ellos, abriremos una ventana nueva de nuestro navegador donde veremos el
recurso en su apariencia Online.
Varios usuarios Editores pueden estar trabajando en el contenido del mismo Site. Para alertar
existen iconos de candados que indican si un recursos lo tiene bloqueado otro editor al mismo
tiempo que me encuentro trabajando.
Candado Abierto: Aparecerá junto al icono del recurso que acabo de editar.
Candado Cerrado: Aparecerá junto al icono del recurso que esté o haya editado otro
usuario editor de OpenCms.
Los bloqueos desaparecen cuando se publican los recursos o cuando marquemos la acción de
desbloquear del menú contextual.
En el Menú contextual (que se abre haciendo clic con el botón derecho del ratón sobre un
recurso) encontraremos dos opciones relacionadas con los bloqueos:
Bloquear: Bloqueo el recurso o grupo de recursos que no están bloqueados por otro
editor. Aparecerá el icono junto a los archivos.
10
Recursos Bloqueados: Aparece una pantalla en la que se listan los recursos que se
encuentran bloqueados y porqué editor.
Borrar Bloqueo: Sirve para que los recursos bloqueados por otro usuario pasen a estarlo
por mí. Aparecerá el icono junto a los archivos.
Desbloquear: Sirve para eliminar el bloqueo de un recurso o grupo de recurso,
siempre que no se encuentren bloqueados por otro usuario editor.
Si queremos obtener información acerca del bloqueo de un recurso, podemos ponernos encima
de su icono del candado, aparecerá una etiqueta con la información de que usuario lo mantiene
bloqueado.
Los contenidos que se encuentran en el proyecto Online son aquellos que son visibles en el
exterior (la gestión de los permisos es independiente, es decir, el contenido puede estar en
Online y no estar disponible para todo tipo de usuarios, pero esta es otra cuestión a tratar en
otro momento).
Para pasar un contenido de un proyecto a otro es necesario publicarlo ( ), para ello, existen
varias formas en OpenCms:
A través del menú contextual: Al hacer clic con el botón derecho sobre cualquier recurso,
se despliega un menú contextual, en el que veremos la opción Publicar Directamente:
12
En el caso que existan recursos bloqueados por otros usuarios, estos no se podrán publicar a
menos que les robemos el bloqueo.
13
Cuando vamos a publicar un recurso que enlaza a archivos que no han sido publicados, veremos
como en el cuadro de diálogo de la publicación, éstos también serán publicados, evitando que se
rompan los enlaces.
Las opciones que ofrece éste menú, van a variar según el Proyecto en el que trabajemos, el Perfil
de Usuario con el que estemos trabajando, el Tipo de recurso que queramos editar y su estado.
14
nuevo.
o Copiado como hermano: Al copiar como hermano un recurso se crear una especie
de link interno entre ambos lo que hace que, al modificar uno estamos modificando
automáticamente el otro. De esta forma, podemos disponer del mismo contenido en
diversos puntos del VFS pero si necesitamos modificar el contenido, tan solo
16
Historial : Nos muestra el historial del recurso (según se halla configurado el historial para
el OpenCms). Desde esta ventana podremos ver el contenido del recurso en cada una de las
versiones guardadas, pudiendo compararlas e incluso restaurar una versión antigua. Tan solo
se guarda como versión en el historial las modificaciones publicadas.
Propiedades : OpenCms dispone de un mecanismo para dotar de más información a los
recursos aparte del contenido propio de cada uno. Estas son las propiedades. Cada una de
ellas tiene un significado y un uso en concreto, pero casi todos son de uso exclusivo de los
administradores por lo que no será tratado en este manual.
La configuración de los portales Template SAGA, cuentan con una estructura básica organizativa
una vez accedemos al Site. Veremos cada una de las secciones que componen el Área Árbol de
Navegación.
17
El gestor de contenidos, permite asignar categoría a todos los recursos Template SAGA., es decir,
podemos asignar un elemento común que los agrupe en torno a un aspecto determinado. Por
ejemplo, si tenemos un volumen extenso de noticias en un apartado de Sala de Prensa y
podemos seccionarlas en relación a distintas áreas de actuación de nuestra empresa, con la
asignación de categorías, podemos listar éstos recursos en base a estas áreas.
La carpeta _categories es la encargada de recoger todas las categorías que nos sean necesarias
en una web.
Dentro de ella anidaremos otros recursos carpeta, cuyo nombre será el de la categoría que
queramos incluir, y la propiedad Title será el texto real que se le asignará a la categoría.
Tendremos que crear tantas carpetas como categorías queramos.
En caso de tener grupos de categorías en nuestra web, podemos organizar las carpetas según lo
necesitemos.
Por ejemplo, si tenemos un grupo de categorías para Noticias y otro para asignarlo a Eventos,
podremos agrupar sus categorías en carpetas tal y como vemos en la siguiente imagen.
18
En la edición del contenido de recursos, veremos cómo asignar categorías a los mismos.
Contiene recursos relacionados con la distribución genérica de las distintas secciones de la web:
19
muestra las secciones de segundo nivel, tendrán dentro de la carpeta configuración dos
recursos Menús, uno por cada tipo.
Contiene las imágenes del portal, ya sean referentes al contenido de los recursos o propias del
diseño de la web y los documentos asociados a descargas.
Dentro de ella se crean Carpetas Extendidas, que pueden ser de los siguientes tipos:
20
En nuestra carpeta Galerías, podremos crear tantas Carpetas Extendidas como nos sean
necesarias.
Contiene las secciones con contenidos de la web. Es donde más trabajaremos a la hora de
mantener, crear o modificar textos, imágenes, etc.
Dentro de nav habrá Recursos Template SAGA agrupados en distintos recursos Carpeta. Estas
carpetas, son las que tendrán navegación, y por tanto, crearán el menú principal de nuestra web.
OpenCms ofrece un mecanismo con el cual podemos controlar dicha arquitectura de navegación
de nuestros sitios. Este consiste en crear una estructura en árbol que simule nuestro menú de la
siguiente forma:
Nivel 1
o Nivel 1_1
Nivel 1_1_1
Nivel 1_1_2
…
o Nivel 1_2
o Nivel 1_3
o …
Nivel 2
Nivel 3
…
21
Por lo tanto, en OpenCms dispondremos de una carpeta por cada entrada de nuestro menú, tal y
como hemos comentado anteriormente. Así, para localizar cualquier tipo de contenido de
nuestro portal tan solo debemos navegar por la estructura de carpeta buscando la sección
correspondiente.
7. Tipos de Recursos
Recurso Carpeta: Las carpetas en OpenCms, poseen una funcionalidad similar a las del
entorno de Windows. Contienen los recursos y archivos de los que se compone la web.
Las carpetas que se encuentran dentro del nav (o es, en el caso de las webs multi idioma)
son las que van a crear la navegación del portal.
22
Recurso Texto: Contiene texto escrito. Puede dividirse en párrafos, cada uno de los
cuales cuenta con subtítulo, textos, imagen principal, galería de imágenes y listas de
documentación de descarga y enlaces tanto internos como externos a otras webs. El tipo
de Párrafo se define en la edición del recurso y se encuentra configurado en el recurso
Recurso Plantilla de Texto , dentro de la carpeta configuración del Site.
Recurso Noticia: Contiene el texto escrito de una noticia de interés. A diferencia del
recurso texto, las noticias de una web aparecen en una lista, y es a través de su título
dónde accedemos al contenido de la misma.
Recurso Evento: Contiene el texto escrito de un evento o actividad de interés. Al igual
que ocurre con las Noticias, los eventos aparecen listados, o bien marcados en los día de
una caja con Calendario.
Recurso Descarga: Contiene el enlace a una documentación que el usuario puede
abrir en una nueva ventana del navegador, texto e imagen asociados a la misma. El
recurso Descarga, también aparece en un listado, a través del cual, podemos ver el
detalle del recurso o descargar el archivo directamente.
Recurso Enlace: Contiene el enlace a una dirección web externa que el usuario abre
en una nueva ventana del navegador, texto e imagen asociados al mismo. El recurso
Enlace, aparece listado, donde podemos ver el detalle del recurso o ir a la dirección
enlazada directamente.
Recurso galería de Imágenes: Muestra un listado de imágenes en miniatura, sobre las
cuales al hacer clic con el ratón de amplían en la pantalla. El tipo de Galería se define en
la edición del recurso y se encuentra configurado en el recurso Plantilla de Galerías ,
dentro de la carpeta configuración del Site.
Recurso Multimedia: Reproduce un archivo multimedia como: video externo, video
alojado en Youtube, archivos Flv o Swf. Dicho archivo ha de encontrase en una carpeta
extendida de descargas ( ) dentro de la carpeta Galerías del Site.
23
Recurso Preguntas Frecuentes: Sirve para crear una página, en la cual, podamos listar
una serie de preguntas con sus correspondientes respuestas.
Recurso Glosario: Permite crear la definición de un término. El recurso Glosario,
aparece en un listado ordenado alfabéticamente, donde podemos ver su detalle; término
y definición.
Recurso Música: Crea una página en la que se reproduce audio en formato mp3.
Dicho archivo de audio, ha de encontrase en una carpeta extendida de descargas ( )
dentro de la carpeta Galerías del Site.
8. Tipos de Edición
Con este sistema podremos editar nuestros contenidos directamente visualizando la interfaz de
nuestro portal. Para ello, conforme navegamos en Offline veremos cómo aparecen una serie de
dianas. Estas nos permiten editar el contenido al que hacen referencia (al posicionarnos encima
de estas veremos cómo este contenido se marca):
24
Una vez que pulsamos sobre la diana entraremos en el formulario de edición del contenido. Se
abrirá el formulario asociado al contenido que hemos seleccionado.
En algunos listados de contenido es posible incluso crear un nuevo contenido o borrar los ya
existente. Para ello aparecen dos iconos nuevos: Un símbolo + y una x que representan cada una
de las acciones:
25
Debemos tener en cuenta que no todos los listados de un portal ofrecen este tipo de opciones de
edición directa. Normalmente éstas opciones aparecen siempre configuradas en listados de
Recursos Noticia ( ), Evento ( ), Enlace ( ), Descarga ( ) y Glosario ( ).
Navegando por la estructura de carpetas de OpenCms podemos acceder a editar todo tipo de
contenido que deseamos
Como vimos anteriormente, cada una de las carpetas que se encuentran dentro de nav, se
equipara a una sección de nuestro portal, por lo que podremos identificar rápidamente el
contenido. Para editarlo, nos posicionamos sobre su icono y hacemos clic con el botón derecho
del ratón, desplegándose de este modo, un menú contextual en el que seleccionaremos la opción
Editar. Con ello abriremos la pantalla de edición de cualquier recurso.
Las demás opciones que ofrece el menú contextual serán descritas en el siguiente punto.
Todos los recursos Template SAGA, se crean a través del mismo procedimiento. Debemos tener
en cuenta que al crear un recurso, hemos de encontrarnos en la sección en la queremos que
esté. Es decir, si vamos a ampliar una sección de Noticias de interés, para crear el Recurso Noticia
26
( ), tendremos que estar situados en el mismo directorio en el que se encuentren las demás
noticias.
Para crear un nuevo recurso en el Site, pulsamos el comando Nuevo, que se encuentra en el Área
Barra de Herramientas de nuestro entorno de trabajo.
Aparecerá una nueva ventana en la que tenemos que activar el Grupo de Recursos en el que se
encuentre aquel que queramos añadir a nuestra sección.
En nuestro caso, al querer crear un recurso de Tipo texto ( ), accionaremos el Radiobutton del
Grupo TEMPLATE SAGA – Recursos de Contenido. Tras ello, pulsamos Continuar.
27
Se abrirá otro cuadro de diálogo, en el indicaremos el recurso que queramos crear. Activamos su
RadioButton y pulsamos Continuar.
28
Tras ello, aparecerá la ventana de Crear un nuevo Recurso, en la que editaremos el nombre del
archivo del Recurso Texto. Al ser un nombre de archivo interno, no podrá contener caracteres
extraños, como vocales acentuadas o eñes, y tampoco espacios en blanco. Le daremos un
nombre identificativo según su contenido.
Al tener marcado el checkbox inferior Insertar el sufijo al nombre, no tendremos que escribir la
extensión del archivo .html.
29
En el caso de que se trate de la página principal de una sección su nombre deberá ser index.html
para que el gestor lo reconozca como la página por defecto de dicha sección.
Pulsamos Continuar y editamos las propiedades del texto (si en el primer paso habilitamos la
casilla de Editar propiedades del nuevo fichero.)
En el campo Title redactamos el epígrafe o un texto fácil de identificar por el usuario. Podemos
describir brevemente el contenido del texto con el campo Description, así como marcar palabras
clave (identificadoras), separadas por coma, en el campo Keywords
El valor del campo Title de un recurso será usado en la propiedad homónima de la página, por lo
que es de vital importancia en el posicionamiento de buscadores que indexan esta propiedad. Lo
mismo ocurre con los campos Description y Keywords, ya que paran a formar parte de los
metadatos requeridos en los motores de búsqueda para la identificación de su contenido.
30
Una vez que hayamos editado los campos pulsamos Terminar. Volveremos a la vista del Área:
Pantalla de Recursos, donde aparecerá nuestro Recurso Texto creado. Tal y como observamos en
la siguiente imagen, irá acompañado de la Bandera amarilla y tendrá un texto de color azul, ya
que, no ha sido publicado nunca.
Dentro de un Recurso Carpeta con navegación, tiene que existir un recurso con el nombre de
archivo index.html, independientemente del tipo al que pertenezca. Será a dónde nos dirijamos
al entrar en la sección.
31
Puede existir otro caso, muy común en la mayoría de los portales webs.
Una de nuestras secciones principales, puede contener otras subsecciones dentro y queremos
que al acceder a esta sección, el usuario entre en el archivo index.html de una de las interiores.
Por ejemplo, la sección Sala de Prensa de mi web, se divide en dos sub apartados; Últimas
Noticias y Próximas Actividades y cada una de ellas posee un archivo principal index.html.
32
Queremos que el usuario que acceda a mi sección Sala de Prensa, visualice en su navegador el
archivo index.html de la carpeta Últimas Noticias.
33
A diferencia del anterior caso, no tendremos que incluir dentro de la Carpeta Sala de Prensa
ningún archivo index.html, ya que queremos que se muestre el que se encuentra dentro de la
sección Últimas Noticias.
34
Aparecerá una nueva ventana, en la que podremos visualizar todas las propiedades que podemos
dar a una carpeta.
35
En concreto, para este caso, vamos al campo default-file y en él, escribimos la ruta absoluta que
nos lleva al recurso index.html de Últimas Noticias y pulsamos OK y volveremos a la vista del
Área: Pantalla de Recursos.
Con la edición de esta propiedad en la carpeta, podremos controlar la navegación de las sub
secciones, accediendo al recurso index.html que indiquemos.
Para que una carpeta forme parte del menú de nuestra web deberemos indicárselo
explícitamente en su panel de propiedades. Accedemos a él a través de la opción Propiedades del
menú contextual.
36
37
El uso de la navegación también sirve para mantener la sección de Mapa Web, de forma que, en
el momento que marcamos una opción como elemento visible del menú, también se da de alta
automáticamente en el mapa web.
Debemos de tener presente que, cada tipo de Carpeta Extendida, ha de contener sus archivos
específicos:
Cuando editamos un recurso, al hacer una llamada desde un campo a éstas carpetas para
seleccionar un archivo que contengan, dependiendo de a qué tipo de archivo se va a llamar,
aparecerán las Carpetas Extendidas de uno u otro tipo.
En los siguientes apartados, veremos cómo subir archivos a nuestro OpenCms, usando el Applet
de Java. Su uso podemos activarlo o desactivarlo. Para ello tendremos que ir a la ventana de
38
En ciertos casos, por configuraciones del equipo o de la red empleada, el proxy nos impida su
uso, aún marcándolo en Preferencias.
39
Tras Continuar, podremos editar tanto su propiedad Title, como el Description y al Terminar
esperaremos a que se suba.
40
Antes de subir imágenes a nuestra carpeta, tendremos que posicionarnos dentro de ella
haciendo clic sobre el recurso.
En nuestro caso, hemos entrado en la Galería imagenesNoticias, en la que vamos a subir nuevas
imágenes.
41
En el desplegable Archivos de Tipo, podremos seleccionar el tipo del archivo que estamos
buscando, en nuestro caso Images.
42
Si queremos subir tan sólo una, haremos doble clic sobre su detalle, y si por el contrario,
queremos varias, podremos seleccionarlas manteniendo la tecla Ctrl del teclado presionada al
mismo tiempo que hacemos clic sobre ellas.
43
44
Una vez arriba, las imágenes se encontrarán a disposición de ser llamadas desde cualquier
recurso que creemos en nuestra web.
Recordemos que aparecerán con el icono de la bandera amarilla y texto azul asociado, puesto
que son archivos que nunca han sido publicados.
La carpeta Galería de Imágenes, posee tres opciones nuevas en su menú contextual, relacionadas
en su mayoría, con la edición de datos de los archivos que contiene:
Abrir Galería: Permite visualizar, en una nueva ventana, una lista de miniaturas de las
imágenes que contiene. Esta opción será común en los demás tipos de carpetas
Extendidas.
Renombrar Imágenes: Podremos modificar el nombre de los archivos imagen en
bloque.
45
Imágenes de comentario: Permite la modificación del Título de las imágenes, así como
la inclusión de una breve descripción de cada una de ellas.
Antes de subir documentos, tendremos que posicionarnos dentro de ella haciendo clic sobre el
recurso.
En nuestro caso, hemos entrado en la Galería descargas, en la que vamos a subir nuevos
documentos.
46
En el desplegable Archivos de Tipo, podremos seleccionar el tipo del archivo que estamos
buscando, en nuestro caso podemos seleccionar Office, para documentos de Microsoft o Todos
los Archivos, si queremos subor otro tipo.
47
Al igual que con las imágenes, podemos seleccionar uno o varios archivos al mismo tiempo. Tras
haberlos seleccionado, pulsamos OK y esperamos a que se suban.
48
Una vez arriba, los documentos se encontrarán a disposición de ser llamados desde cualquier
recurso que creemos en nuestra web.
Los Recursos Enlace Externo ( ), se crean del mismo modo que vimos anteriormente en el
apartado Creación de Recursos Template SAGA.
49
Tanto el recurso carpeta Galería de HTML ( ), como Galería de Tablas ( ), permiten que
guardemos en su interior recursos Fichero de texto ( ) que, posteriormente, nos sirvan de a
modo de plantilla en la edición de un campo Wysiwyg de los recursos Template SAGA.
Esos Fichero de texto ( ), tendrán código HTML, que será el que nos importe el editor. Podrán
ser creados desde cero, tal y como hemos visto en el apartado Creación de Recursos Template
SAG, o bien, subido, como hemos aprendido en la Subida de Archivos a la Carpeta Galería de
Descargas.
Una vez creado el recurso, abrimos la pantalla de su editor para introducir el contenido. Para ello
seleccionamos la opción Editar en su menú contextual:
El Editor de OpenCms, posee siempre una estructura similar, independientemente del recurso
que estemos editando. Variará el número y tipo de campos a rellenar por el usuario editor, ya
que sí dependen directamente del tipo de recurso.
50
Situada en el área superior de nuestro editor, la barra de herramientas del Editor contiene las
siguientes opciones:
51
Cerrar: Con él saldremos del editor, perdiendo los cambios que hayamos efectuado en
su interior.
13.2 Pestañas
Cada recurso Template SAGA cuenta con campos específicos, que conforman la distribución de la
información que muestran. Como denominador común veremos que un campo cuenta con:
Ayuda: Al posicionarnos sobre ella, podremos ver una breve descripción de qué tipo de
contenido ha de introducirse en el campo, en caso de tener alguna duda.
52
En la mayoría de los recursos existen campos que, por defecto, aparecen cerrados, ya que son
opcionales. Junto a su campo de texto, veremos una pequeña diana ( ) con distintas opciones
que van a depender de si es un campo único o puede ser repetido dentro del mismo recurso:
Mostrar Botones del Elemento: Muestra una serie de opciones, cuya disponibilidad va a
depender del estado del campo y su tipología. Los casos son los siguientes:
Si el campo está cerrado: La diana aparece con un punto verde ( ). Sólo permite abrirlo,
Si el campo es único en el recurso: La diana aparece con un punto rojo ( ). Sólo permite
cerrarlo, por tanto, tan sólo podemos seleccionar la opción Borrar ( ):
Si editamos dos o más campos similares: La diana aparece con los dos puntos, rojo y
53
Si activamos la pestaña aparecerá una nueva vista del editor, en la que tendremos acceso a la
visualización de las categorías que hemos creado en la carpeta _categories de nuestro Site:
54
Para añadir una categoría al recurso, tendremos que hacer clic en el icono más ( ) de la
categoría en concreto, en la lista que aparece en el lado derecho. Por ejemplo, vamos a añadir la
Categoría Consultoría, que pertenece al Grupo Tecnología:
55
Tal y como vernos en la imagen anterior, la categoría en la que hemos hecho clic en el más, pasa
de la columna de la derecha en la que se encontraba, a la de la izquierda quedando asignada a
nuestro recurso.
El símbolo más con el fondo negro ( ) que aparece en la columna de la derecha, indica que una
categoría de este grupo ha sido asignada al recurso.
56
Para eliminar categorías al recurso, tendremos que hacer clic en el icono menos ( ) de la
categoría en concreto en la columna de la izquierda. Volverá a estar ubicada en la columna de la
derecha:
57
Al activar la pestaña Cajas, aparecerá una nueva vista del Editor de contenidos en la que veremos
el Campo Element plegado:
Dicho campo permite introducir, al comienzo o final del recurso, tantas cajas de contenido
adicional como queramos. Por ejemplo, elementos caja pueden ser un menú lateral, una lista de
banners, un buscador avanzado, etc.
Es importante tener en cuenta que, para incluir una caja, ésta ha de haber sido creada
anteriormente dentro de la carpeta contenidoCajas, ubicada en la carpeta configuracion del Site:
58
Box: Introduce la ruta absoluta en la que se encuentra la caja. Hacemos clic en el icono
Buscar ( ), junto al campo. Se abrirá en una nueva ventana del navegador el Área: Árbol
de Navegación del entrono de trabajo. Seleccionaremos el elemento que va a contener la
caja, y cerraremos la ventana:
59
Son campos de texto muy intuitivos, ya que permiten que el usuario edite el contenido, viendo
algo muy parecido al resultado final. De echo, el término WYSIWYG, procede del inglés: What You
See Is What You Get.
Normalmente los campos que requieran de gran carga de contenido dentro de los recursos,
como por ejemplo, los textos de un párrafo de un recurso texto de Template SAGA, van a contar
con un campo de este tipo.
Se diferencian del resto en que, aparte de ser de un tamaño mayor, contienen asociada, una
barra de herramientas en su parte superior, parecida al entorno Microsoft Word.
60
61
Pegar desde Word: Abre un cuadro de diálogo con un campo de texto, en el que
debemos pegar el texto procedente de un documento Word, eliminando estilos propios y
transformando el texto en plano.
Enlace: Incluye un enlace en el texto seleccionado. El enlace puede ser tanto externo
(a otra dirección Url), como interno (a otra sección de nuestra propia web).
Abre una nueva ventana emergente con los siguientes campos:
63
Referencia: Sirve para incluir el texto seleccionado en una etiqueta con un nombre
para crear un ancla interno.
Insert/Edit image: Inserta en el flujo del texto una imagen. Abre en un cuadro de
diálogo el explorador de las Galerías de imágenes que encuentra en la Carpeta Galerías
de nuestro Site.
Insert/Edit file: Inserta en el flujo del texto una documentación para descargar. Abre
en un cuadro de diálogo el explorador de las Galerías de descarga que encuentra en la
Carpeta Galerías de nuestro Site.
Insert/Edit link: Inserta en el flujo del texto un enlace. Abre en un cuadro de diálogo el
explorador de las Galerías de enlaces que encuentra en la Carpeta Galerías de nuestro
Site.
Insert HTML: Inserta en el flujo del texto una plantilla HTML. Abre en un cuadro de
diálogo el explorador de las Galerías de tablas que encuentra en la Carpeta Galerías de
nuestro Site.
Insertar carácter especial: Inserta símbolos que no aparecen en el teclado.
Imprimir: imprime el contenido del editor WYSIWYG.
Maximizar el tamaño del editor: Amplia a pantalla completa el cuadro del editor
WYSIWYG.
64
65
Haciendo clic en cualquier galería podremos entrar y ver las imágenes que contiene.
66
Una vez que encontremos aquella que queremos adjuntar al campo la seleccionamos
(fondo azul) y pulsamos el botón Select .
En la siguiente ventana podremos ver la imagen a tamaño real.
67
.
o Free Cropping: Permite definir el área de la imagen que queramos que se
muestre. En la selección el alto y el ancho no serán proporcionales a las medidas
reales de la imagen. Para seleccionar dicha área pulsaremos el botón Crop
.
o Small Image: Reduce el tamaño de la imagen respetando un ancho fijo de 200px,
siendo la altura proporcional según las medidas reales.
o Large image: Reduce el tamaño de la imagen respetando un ancho fijo de 500px,
siendo la altura proporcional según las medidas reales.
Tanto si hemos realizado cambios en la visualización de la imagen, como si no, para
adjuntar la imagen tendremos que accionar el botón OK.
: Permite subir directamente desde esta ventana una ventana a la galería que
queramos. Para ello debemos de estar dentro de la Galería de Imágenes.
Abriremos un explorador de nuestro ordenador que, por defecto, mostrará el contenido
de la carpeta Mis Documentos. Desde aquí podremos movernos por nuestras carpetas
para buscar las imágenes que queramos añadir.
68
En el desplegable Archivos de Tipo, podremos seleccionar el tipo del archivo que estamos
buscando, en nuestro caso Images.
69
En la mayoría de los recursos Template SAGA, podemos incluir tantas imágenes como queramos.
Para ello tendríamos que añadir más campos Imagen haciendo clic en la opción Agregar Nuevo
Cuando añadimos una imagen, aparece junto al campo Imagen el icono Previsualización que
nos permite ver en una nueva ventana la imagen que se encuentra enlazada.
Por norma general, de las imágenes que incluyamos en un recurso, la primera de ellas se
considera la principal del recurso, pasando a posicionarse en un tamaño mayo junto al texto,
mientras que las demás, aparecen en la galería de imágenes del recuro.
Exceptuamos los recursos de Tipo Texto ( ), puesto que éstos cuentan en su edición, con la
posibilidad de seleccionar una serie de plantillas precofiguradas. En el caso práctico de este
manual, desarrollaremos en mayor medida este caso.
Cuando un recurso contiene una galería de Imágenes, éstas aparecen en miniaturas, aunque si
hacemos clic sobre ellas, vemos como se amplían adoptando su tamaño original. A través de éste
visor podemos navegar por todas las imágenes que hay en el recurso.
70
71
Alto: Permite introducir un tamaño al alto de las imágenes en píxeles. Su valor ha de ser
un número entero sin la extensión px.
Ancho: Permite introducir un tamaño al ancho de las imágenes en píxeles. Su valor ha de
ser un número entero sin la extensión px.
ScaleType: Se compone de un select con opciones del escalado de la imagen, con el fin de
evitar que se deforme tras introducir un alto y una ancho.
o Scale to exact target size width background padding: Muestra la imagen con las
dimensiones que hayamos introducido en el campo alto y ancho, sin deformarla.
El fondo se verá del color establecido en el campo ScaleColor.
o Create a thumbnail for the image: Creará una miniatura automática, con un valor
de 100px de ancho, siendo el alto proporcional en relación a las proporciones
reales. Esta opción se ve anulada si incluimos valores en los campos Alto y Ancho.
o Scale to exact target size, crop what does not fit: Recorta la imagen desde el
centro hasta que tenga las dimensiones indicadas en el campo Alto, Ancho o
ambos a la vez.
o Scale and keep image proportions, target size variable y Don’t keep image
proportios, use exact target size: Escalan la imagen a los valores introducidos en
el campo Alto y Ancho, deformándola.
ScalePosition: Se compone de un select con opciones acerca de la posición que debe
tomar la imagen respecto al escalado aplicado.
Archivo: Contendrá la ruta absoluta del documento, cuya descarga, que queramos añadir
al recurso.
Si accionamos el botón Galería de Descargas situado ala derecha del campo,
abriremos un cuadro de diálogo que explorará todas las Galerías de Descargas que
encuentra en la Carpeta Galerías de nuestro Site.
Por defecto, aparecerá un listado de los documentos que contiene la primera Carpeta
Galería de Descargas que encuentre en Galerías.
73
Sobre la vista aparecen una serie de botones descritos a continuación y con las mismas
características que los vistos en el campo Imagen:
74
En la mayoría de los recursos Template SAGA, podemos incluir tantos archivos de descarga como
queramos, exceptuando la edición del recurso Descarga , que tan sólo permite uno.
Para ello tendríamos que añadir más campos Descarga haciendo clic en la opción Agregar Nuevo
Al igual que ocurre con el campo Imagen, cuando añadimos una descarga, aparece junto al
campo el icono Previsualización que nos permite ver en una nueva ventana la descarga.
Las descargas de los recursos, aparecen en la Galería de Descargas titulada Documentación para
Descargar, debajo de la de Imágenes. Sus datos serán acompañados por la información acerca
del formato del archivo adjunto y por su tamaño.
75
Los recursos Template SAGA, permiten completar su contenido con una Galería de Enlaces. En
ella tendrán cabida tanto enlaces de tipo Externo, como Internos sin que exista diferenciación
visual entre ellos.
Entendemos por un enlace externo, aquel que hace una llamada a una dirección Url distinta,
mientras que un enlace interno, se produce cuando llamamos a otra sección de nuestra web.
Al desplegar el campo Enlace Externo de un recurso veremos cómo se compone de los siguientes
campos:
Al desplegar el campo Enlace Interno de un recurso veremos cómo se compone de los siguientes
campos:
76
En la mayoría de los recursos Template SAGA, podemos incluir tantos enlaces como queramos,
exceptuando la edición del recurso Enlace , que tan sólo permite uno.
Para ello tendríamos que añadir más campos Enlace Externos o Internos haciendo clic en la
Para que una web soporte varios idiomas, ha de haber sido configurada previamente por los
programadores.
En las webs que se desarrollan en varios idiomas, observaremos que la carpeta nav, pasa a
llamarse es y que junto a ella, aparecerá una carpeta por cada idioma tenga habilitado el portal;
en, de, fr, etc.
77
Dentro de las mismas, los recursos serán los mismos, puesto que estarán copiados como
hermanos.
Para crear archivos en varios idiomas el procedimiento consta de dos pasos. Vamos a explicarlos,
en relación a copiar un contenido en español e inglés:
78
En la siguiente pantalla activaremos la opción Crear un Hermano del Recurso y a través del
botón Buscar seleccionaremos la ruta en la que queramos copiarlo:
Tras pulsar OK, habremos creado éste recurso como hermano en la carpeta del Inglés.
2. Copiar el contenido en español del recurso en la opción de Inglés:
Tenemos el recurso tanto en la carpeta es, como en en, pero su contenido que se encuentra
en español, aún no ha sido copiado para su edición en inglés.
Espe paso lo realizaremos desde el editor del contenido que abrimos pulsando la opción
de su menú contextual.
79
Una vez dentro, nos centraremos en las opciones de idiomas que se encuentran en la Barra
Superior de Herramientas .
Si desplegamos el selector Idioma, veremos como aparece el idioma que se encuentra
habilitado en el Site, con los caracteres [-] a su lado:
Indican que los contenidos no han sido copiados al inglés. Además si observamos el aspa del
icono Borrar ( ) se encuentra deshabilitado, ya que no hay contenido en inglés de este
recurso en concreto.
Para copiarlos al inglés, tenemos que accionar el icono Copiar , que se encuentra a su lado
derecho.
Abrirá una ventana emergente en la que podremos seleccionar el idioma en el que queremos
que se copie el contenido del recurso. En ella aparecerán los idiomas que estén disponibles
para el Site, en nuestro caso, tan solo aparecerá la opción del inglés.
80
Este hecho indica que los contenidos sí se encuentran copiados al inglés. Además si
observamos el aspa del icono Borrar ( ) ya se encuentra activa. Con ella podremos eliminar
la copia de contenidos al idioma que seleccionemos.
Para editar los contenidos en otro idioma, seleccionaremos en el selector aquel en el que
queramos trabajar:
Los datos serán los mismos que en español, tendremos que traducirlos al inglés (siempre,
manteniendo en el selector el idioma en el que tradizcamos) y ya los tendremos en los dos idiomas.
Hay que tener en cuenta que al salir del editor y querer publicar el recurso texto, tendremos que
activar la casilla Publicar todos los hermanos, ya que también tendremos que publicar su hermano
de carpeta inglés y pulsar OK.
81
Nos situamos en la carpeta que va a contener mi recurso de Tipo Texto. Moviéndome por el Área:
Árbol de Navegación entro en la carpeta Quienes Somos.
82
Una vez que me encuentro dentro, pulso el comando del Área: Barra de Herramientas
del Entorno de Trabajo.
El siguiente paso es seleccionar el Grupo de Recursos en el que se encuentra aquel que queremos
83
Antes de pulsar Continuar, debemos tener activos los dos Checkbox inferiores al campo.
Tras rellenar estos campos pulsamos Terminar y veremos en el Área: Pantalla de Recursos del
Entorno de trabajo nuestro recurso creado.
84
De forma Exterior o Direct Edit, haciendo clic en sus dianas en la vista Online.
En los siguientes puntos tan sólo desarrollaremos la edición de los campos relativos a la Pestaña
Contenido.
85
Introduce la fecha en la que ha sido creado el recurso. La información que ofrece es de carácter
interno, por lo que no va a aparecer en la vista Online del recurso.
Resulta muy útil cuando existen varios usuarios editores en el mismo Site.
Puede utilizarse como resumen o entradilla del texto que se va a introducir en el campo párrafo,
es conveniente su utilización ya que favorece el posicionamiento en buscadores. Se mapea a la
propiedad description.
Este elemento nos permite generar bloques estructurados de información y se compone de los
siguientes campos anidados:
16.6.1 Título
16.6.2 Texto
Se compone de un editor Wysiwyg, en el que incluiremos la información del párrafo. Como vimos
anteriormente, este tipo de campo posee la peculiaridad de ser un editor en el que podemos
pegar texto procedentes de otro documento, resaltarlo, listarlo, etc.
87
Permite cambiar el titulo de los diferentes bloques que vienen establecidos por defecto en los
recursos Template SAGA.
Podemos modificarlos en los campos de los que se compone el elemento Títulos de Bloque,
introduciendo el texto que queramos.
16.6.4 Imagen
Siguiendo las indicaciones ofrecidas en el punto 13.2 Campo Imagen, incluiremos tantas
imágenes como nos sean necesarias.
88
El campo Ancho, permite introducir un valor en píxeles que afectará al ancho de la imagen a la
que está asociado. Es útil si sólo vamos a incluir una imagen en el contenido.
En nuestro caso, al introducir más, vamos a especificar las propiedades en el siguiente campo
propiedad_Imagenes, para que afecten a todas por igual.
16.6.5 Propiedad_Imagenes
Tal y como vimos en el punto 13.2.1 Campo Propiedad de las imágenes, jugaremos con las
posibilidades de escalado y opciones de las imágenes.
En nuestro caso, queremos que las imágenes aparezcan en formato cuadrado, con 100píxeles por
cada uno de sus lados y con un escalado que las recorte desde el centro para que no las deforme.
A su vez le aplicaremos un flitro en escala de grises.
89
16.6.6 Descarga
En este campo vamos a poder incluir un número determinado de elementos de descarga: Pdf´s,
documentos Word, archivos comprimidos Rar o Zip´s, Hojas de Cálculo, etc.
Siguiendo las indicaciones ofrecidas en el punto 13.3 Campo Descarga, incluiremos tantos
archivos como nos sean necesarios.
90
Siguiendo las indicaciones ofrecidas en el punto 13.4.1 Campo Enlace Externo, incluiremos tantas
llamadas como nos sean necesarias.
Siguiendo las indicaciones ofrecidas en el punto 13.4.2 Campo Enlace Interno, incluiremos tantas
llamadas como nos sean necesarias.
16.6.9 Multimedia
En este campo se puede enlazar el recurso tipo texto con recursos multimedia para su visionado
dentro de los párrafos.
Lo usaremos para reflejar aquella información que no ha sido considerada con anterioridad, pero
se entiende que es información útil para el contenido. De esta forma indicaremos dos campos:
Nombre del campo y Valor del campo.
91
16.6.11 Plantilla
El recurso de Tipo texto, cuenta con la opción de poder aplicar a su contenido una serie de
configuraciones predefinidas. Dependiendo del tipo de portal, contará con unas u otras plantillas.
En el desplegable del campo podremos ver las distintas opciones que tenemos disponibles:
Al seleccionarlas veremos una breve descripción de la disposición de elementos que ofrecen así
como un esquema del mismo.
Los párrafos contienen todos los elementos anteriormente indicados, los cuales, son opcionales.
Debemos de tener en cuenta que podremos añadir a nuestro recurso tantos párrafos como nos
sean necesarios, y a cada uno podremos darles las opciones anteriores que nos sean necesarias.
92
16.7 Keywords
En este elemento podemos indicar la lista de todas las palabras clave de cada sección, separadas
por coma.
Ya tendremos nuestro recurso completamente editado. Así que pulsamos el botón Guardar en
la Barra de Herramientas superior de nuestro editor para guardar los cambios.
Para ver el resultado sin salir de la pantalla del editor y poder revisarlo en su vista Online,
hacemos clic sobre el icono Previsualización , situado en la Barra de Herramientas superior de
nuestro editor.
Se abrirá una nueva ventana del navegador en la que podremos ver el recurso con sus datos.
93
Una vez realizada la revisión, volvemos al editor del recurso y pulsamos la opción Guardar y Salir
. Una vez que estemos en el Área: Pantalla de Recursos, podremos publicarlo con la opción
Publicar directamente ( ) del menú contextual.
94