Ir al contenido principal

Edición Web con el Gestor Web Institucional de la UCM

Guía de apoyo a la edición Web

Primeros pasos con un nuevo espacio web

Introducción

El Gestor Web institucional UCM es una herramienta CMS (Content Mangement Systems) o "Sistema de Gestión de Contenidos" de desarrollo propio. Los gestores de contenidos son aplicaciones que ofrecen una serie de herramientas para facilitar la creación, edición y publicación de contenido web. El hecho de ser un desarrollo propio presenta algunas ventajas, aunque también algunos inconvenientes: 

  • Ventajas: gratuito, permite la creación de páginas web de forma rápida y sencilla, cumple criterios de usabilidad y accesibilidad, se encuentra adaptado al Entorno Complutense, permite la implementación de mejoras y aporta ventajas a nivel de seguridad.
  • Desventajas: no admite la ejecución de código propio (como JavaScript) ni la interacción directa con bases de datos externas, lo cual limita los efectos visuales y el uso de aplicaciones de terceros. No admite la importación y carga de páginas web externas, el contenido debe ser editado mediante las herramientas que ofrece el propio gestor. Tampoco ofrece la opción de exportar, duplicar páginas o hacer copias de seguridad de los sitios web. Por último, el abanico de herramientas es más limitado y menos flexible que otros gestores de contenido web como WordPress, que tienen un amplio soporte internacional.

Nuevos espacios Web

Podemos solicitar la creación de un nuevo espacio Web mediante el siguiente formulario (navegando identificado y en la red UCM o VPN):

Si hemos solicitado un nuevo espacio web, es importante que tener que:

  • El espacio web no dispone de contenido y se encuentra en modo borrador, es decir, su visibilidad no es pública. Los editores del Website identificados en la Web UCM (correo electrónico UCM y contraseña) tienen acceso para dotarlo de contenido. En la pantalla de edición, el desplegable Estado indica: EN PRUEBAS.
    Website en pruebas
  • Para que el espacio web sea visible de manera pública, es necesario que los editores lo doten de portada y contenido y que soliciten su activación en el formulario indicado anteriormente.
    Una vez activada el Website, el desplegable Estado mostrará que la Web está PUBLICADAtodo contenido que no haya sido configurado como privado será visible de manera pública.
    Website publicado
     

Permisos de edición

Control de acceso

Podemos solicitar permisos para editar nuestras webs, si somos los responsables directos de las mismas, cumplimentando el siguiente formulario:

Si no somos los responsables de la web para la que queremos pedir permisos de edición, deberá ser dicho responsable el que pida los permisos de edición para nosotros. Por ejemplo, el director de Departamento, responsable del Grupo de investigación, director de Biblioteca, etc.

Acceso a la edición web

Una vez identificados en la web UCM, clicamos en nuestro nombre (arriba a la derecha) y accedemos a "Mi escritorio" que contiene los siguiente accesos directos:

Mis Webs icono del escritorio Mis Webs : listado de las Webs sobre las que tenemos permisos de edición.

Aplicaciones Web. Icono Escritorio Aplicaciones Web: listado de aplicaciones autorizadas (herramientas para la creación de contenido web).

 

APLICACIONES WEB

  1. Gestor UCM: contiene las herramientas para la creación, edición y publicación de contenido web.
  2. Galerías de imágenes: nos permite subir imágenes y organizarlas en galerías (carpetas), para después insertarlas en nuestras páginas web con los widgets "Texto" y "Galería de imágenes" del Gestor UCM.
  3. Archivos: nos permite subir archivos para después incorporarlos a nuestra web con el widget "Documentos y Enlaces" del Gestor UCM.
  4. Formularios: nos permite crear formularios para después insertarlos en nuestra web con el widget "Formulario" del Gestor UCM.

Gestor Web UCM

Cuando navegamos identificados en la Web UCM y nos situamos en una página web sobre la que tenemos permisos de edición, vemos en la parte superior izquierda el botón "Editar":

Botón "editar" Web UCM

Pulsando el botón editar accedemos al Gestor Web UCM:

Gestor Web UCM

El Gestor UCM nos da acceso a las herramientas para la creación, edición y publicación de contenido web.

La dinámica básica de la edición web consiste en:

  1. Crear páginas con una estructura organizada de manera jerárquica. De lo general a lo particular.

     
  2. PlantillaElegir una plantilla para cada página para que el contenido quede organizado en secciones o apartados. La página de portada del Website dispone de plantillas especiales que no están disponibles para el resto de las páginas: permiten añadir imágenes de fondo de portada, noticias destacadas, noticias normales, avisos...
      
  3. ContenidoIncorporar contenido contenido (texto, vídeos, documentos...) arrastrando los widgets a los contenedores (secciones) de las plantillas.
     
  4. Establecer la navegación entre las páginas por medio de menús  y/o por medio de enlaces. El campo "título corto" de la configuración de las páginas será el texto de los menús principales y de los menús desplegables.
    Menús de navegación

Elementos del Gestor Web UCM

Cuando accedemos al modo edición (pulsando en el botón Editar) se abrirá, en la parte izquierda, la columna de herramientas del Gestor web UCM.

El Gestor UCM consta de las siguientes herramientas:

Estructura del Gestor

 

1. Vista previa

Vista previa Pulsando en este icono se mostrará una vista en la pantalla del contenido tal y como se verá de manera pública, sin necesidad de publicarlo. La página mostrará el aviso: ATENCIÓN: esto es una vista previa.

 

2. Estado / Visibilidad

Pulsando en el desplegable "Estado / Visibilidad" podemos actualizar (publicar) los cambios realizados.
Desplegable Estado Visibilidad

  • Si estamos en la portada podemos actualizar los menús y el contenido de la portada.
  • Si estamos en cualquier otra página podemos gestionar su publicación y su visibilidad.

 

Portada

Estado portada Website

En ella encontraremos:

  • El Estado del Website (portada y todas las páginas):
    • Publicada: accesible de manera pública.
    • En Pruebas: sólo es accesible a los editores autorizados.
  • La Visibilidad: pública: accesible para todos los usuarios.
  • Actualizar menús: pulsamos este botón para reflejar los cambios realizados en los menús de navegación.
  • Actualizar portada: pulsamos este botón para reflejar los cambios realizados en el contenido de la portada.
    • El punto de color rojo o verde nos indica si la página o portada está actualizada o está pendiente de realizar la actualización

Página

Estado de página web

Del mismo modo que en la portada, en cada página podremos ver el estado en que se encuentra y su visibilidad:

  • El Estado de la página Web:
    • Borrador: sólo es accesible a los editores autorizados.
      Publicada: accesible de manera pública.
      Programada: no visible hasta la Fecha y hora de publicación señalada.
  • La Visibilidad:
    • Pública: accesible para todos los usuarios.
    • Privada: accesible solo para un grupo de usuarios definido.
  • El Botón "Actualizar la página en la web" permite reflejar los cambios realizados en esta.
     

3. Añadir contenido

Cuando desplegamos el menú Añadir se muestran los widgets (herramientas para añadir distintos tipo de contenido). Según el tipo de contenido que deseamos añadir elegiremos el widget correspondiente (texto, Documentos PDF, vídeos...) y clicando sobre este lo arrastramos y soltamos en el lugar deseado de la página.

Añadir Widgets

 

Las posiciones donde insertar los widgets vienen marcadas, según la plantilla de página elegida,  por un fino recuadro que nos indica dónde podemos insertarlo y qué ancho de columna va a ocupar. En cada uno de los cuadros de la página podemos insertar tantos widgets como deseemos. Si ya hay presente un componente en ese marco podremos insertarlo encima o debajo, posición que será resaltada en gris.

Agregar widgets según plantillas

 

Al soltarlo aparecerá un recuadro con una barra superior naranja y el tipo de widget insertado. En principio estará vacío: tan sólo aparecerá el mensaje "Debe pulsar en configuración para poder utilizar este widget". Vamos, pues, a dotarlo de contenido.

Para introducir la información necesaria en el widget debemos acceder a la configuración del mismo. Hay dos maneras:

  1. La primera vez, cuando aún no lo hemos modificado, podemos pulsar en la palabra "configuración" del mensaje.
  2. Pulsando en la rueda dentada.

Rueda Dentada Widgets

Al acceder a su configuración veremos normalmente tres pestañas (según el tipo de widget o contenido):

  1. Configuración: permite introducir la información básica (URL de videos, mapas o calendarios, selección los iconos, texto...). 
  2. Apariencia: esta pestaña permite modificar el aspecto del contenido en la página web: visibilidad del marco del widget (borde alrededor del contenido), disposición horizontal o vertical, noticias en vista clásica o carrusel, etc. Como en el caso de la configuración, el contenido de la pestaña y sus opciones varían con el tipo de widget.
  3. Permisos: normalmente aparecerá el mensaje "Este Widget no necesita de personalización de permisos para su funcionamiento." y no necesitaremos realizar ninguna acción.

Pantalla Configuración Widget Documentos y Enlaces
Pantalla de configuración del widget Documentos y enlaces

 

Pestaña Apariencia del Widget Documentos y Enlaces
Pestaña Apariencia del widget Documentos y enlaces
 

Cuando hayamos configurado e introducido la información en el widget, pulsaremos en los botones Aceptar y Cerrar y quedará guardado automáticamente en la web a la espera de publicarlo mediante la actualización de la página o portada. Para volver a acceder pulsaremos sobre el icono de la rueda dentada.

Eliminar o desactivar el widget

Tenemos dos opciones a las que accedemos pulsando sobre el icono aspa de cierre :

Desactivar o eliminar widget

  • Desactivar y guardar el widget: podemos desactivarlo y dejará de mostrarse en la web, pero queda almacenado y disponible en el botón "Contenido inactivo". De este modo podremos volver a incorporarlo a la web en otro momento.
    Contenido inactivo
  • Eliminar definitivamente: borraremos el widget con todos su contenido. Esta operación es irreversible y ya no podremos recuperar dichos datos.
     

4. Configuración de página y de portada

Configuración de página

Las opciones de configuración de página nos permiten administrar varios aspectos esenciales de la misma:

Configuración de Página con opciones numeradas

  1. Cambiar título y atributos:
    • Cambiar el título de la página.
    • Añadir un título corto que aparecerá en los menús principales o menús desplegable de navegación.
    • Establecer su orden dentro del conjunto de páginas del Website.
    • Buscador: incluirla en la búsqueda UCM.
    • Añadir una descripción.
    • modificar la URL de la página.
    • Redireccionar la página a otra página web.
      Título y atributos de la página
       
  2. Cambiar su plantilla: para organizar el contenido de la página.
  3. Mover la página: desplazarla a otra posición dentro del Website o a otro Website.
  4. Idioma: vincular la página a otra equivalente en otra lengua. Por ejemplo, podemos tener una versión en español y otra en inglés de nuestro sitio web.

 

Configuración de portada

En el caso de las portadas la configuración depende del tipo de plantilla. Tenemos dos tipos de plantillas:

  • Plantillas de noticias: marcadas como NEWS. Permiten gestionar las noticias de portada.
  • Resto de plantillas: permiten incluir imágenes de fondo.
Portada Noticias

Configuración Portada de Noticias

Las opciones de configuración de portada de noticias nos permiten:

  • Cambiar plantilla.
  • Gestionar noticias de portada.
  • Etiquetas HTML (Metatags): permite definir algunos parámetros a nivel de Website para mejorar el posicionamiento en buscadores. También permite comprobar si tenemos configurado un código de Google Analytics para obtener estadísticas de uso del Website.
    • Título del Website: sólo hace referencia a una etiqueta de la página web y no al nombre del Website, el cambio solo tiene impacto en la indexación de  buscadores.
    • Descripción: por defecto, se cumplimenta de manera genérica, pero podemos modificar la información para que, cuando sea indexada, aparezca como un resumen del Website en los resultados de búsqueda.
    • Keywords: palabras clave que permiten identificar la temática del Website para que pueda ser clasificado e indexado.
    • Código de Google Analytics: nos permite comprobar el código de seguimiento de Google Analytics que tenemos cargado en nuestra Web.
  • Gestionar avisos de portada.
Portada Imágenes de fondo

Configuración Portada de imágenes

Las opciones de configuración de portada de imágenes de fondo nos permiten:

  • Cambiar plantilla.
  • Gestionar fotografías de portada.
  • Etiquetas HTML (Metatags): de la misma manera que la portada de noticias permite definir algunos parámetros a nivel de Website para mejorar el posicionamiento en buscadores: Título del Website, Descripción y Keywords. También permite comprobar si tenemos configurado un código de Google Analytics para obtener estadísticas de uso del Website.
  • Gestionar avisos de portada.

 

5. Jerarquía de páginas

Los sitios web se componen de páginas con una estructura organizada de manera jerárquica. Para movernos por dicha estructura contamos con el menú desplegable Jerarquía de páginas. Desde este menú podemos desplazarnos por todas las páginas del sitio web, independientemente de su estado de publicación o visibilidad, siempre que tengamos los permisos adecuados. De este modo, podremos llegar a una página que, por ejemplo, esté en modo Borrador, para seguir trabajando en ella, mientras que desde la vista pública no tiene acceso.

Jerarquía de páginas

Cuando nos movemos por las páginas del Website desde "Jerarquía de páginas" lo hacemos por niveles, es decir, si estamos en la portada veremos solo las páginas hijas de la portada (páginas de primer nivel). Para ver las páginas hijas de una página tendremos que situarnos en esa página y así sucesivamente. Debemos ir navegando, seleccionándolas y descendiendo hasta la página a la que deseemos acceder.:

  • La página marcada en "negrita azul" es la página donde nos encontramos.
  • La página marcada en "verde" es su página superior, de la que cuelga.
  • Las páginas marcadas en negro son las páginas hijas, a las que podemos acceder pulsando sobre su título. Para volver a subir, pulsaremos sobre la página superior en verde, salvo en el caso de la portada que, obviamente, no tiene página superior.

Jerarquía de páginas anotada

En la parte inferior encontramos el botón "Gestionar páginas hijas" que nos permite:

  • Cambiar el orden en el que las páginas aparecerán en los menús y submenús desplegables de navegación
  • Gestionar los permisos de visibilidad de la página para restringirlos a: Estudiantes, PDI o/y PAS.

 

6. Contenido inactivo

Esta herramienta está disponible y visible solamente cuando hemos desactivado y guardado un componente (un widget de texto, un widget de redes sociales, etc.). Aparecerá aquí identificado por el tipo de componente desactivado. Para reactivarlo y recuperarlo solamente hemos de pulsar sobre él y arrastrarlo hasta el marco de la página donde deseemos insertarlo. Cuando hay más de un componente desactivado éstos se van "apilando" en orden, de forma que los desactivados más recientemente quedan "encima". Para llegar a uno concreto debemos retirar primero los desactivados más recientemente.

 

Contenido inactivo

 

 

7. Botones de acciones

  1. Contenido actualizado: sirve para guardar cambios. Adopta dos formas:
    • Disquete Hay cambios pendientes de guardar.
    • Tick Todos los cambios han sido guardados.
       
  2. Crear página Crear página: permite la creación de una nueva página web que colgará de aquella en la que estamos situados.
     
  3. Papelera Eliminar página: nos permite eliminar la página actual siempre que ésta no tenga páginas hijas colgando de ella.
     
  4. Interrogación Ayuda: ayuda sobre el gestor web. Redirige a las FAQs de la Web Institucional.
     

8. Aplicaciones

Acceso a las aplicaciones web mediante el Gestor UCM

Abre las respectivas aplicaciones para trabajar con archivos y documentos, imágenes y formularios.

  • Archivos nos permite subir y gestionar archivos y documentos a nuestro website se cara a su inserción en nuestra página web. En ella podemos organizar, subir y borrar nuestros archivos, modificar sus atributos, otorgar o restringir permisos, elegir entre descarga o visualización o ver estadísticas de los mismos. Trataremos en detalle cómo trabajar con ellos en el apartado 4.1 Aplicación archivos.
  • Galerías de imágenes. Al igual que la gestión de archivos, nos permiten subir y gestionar las imágenes de nuestro espacio web, confeccionando galerías de imágenes y configurando su visualización. Podemos organizar las imágenes en galerías y configurar sus atributos, de cara a insertarlas individualmente o en conjunto utilizando el widget de Galerías. También podemos controlar la apariencia de la galería, si es pública o restringida, seleccionar los campos que queremos mostrar y elegir un tema de visualización (carrusel, lista, clásica o zoom). De ellas trataremos en el apartado 6.2.1. Galerías de imágenes.
  • Formularios. A diferencia de otros componentes, la creación de formularios se realiza con la aplicación web "Formularios", que requiere estar entre nuestras aplicaciones autorizadas. Si nuestro sitio web está entre los sitios autorizados para crear formularios, podremos crearlos en la aplicación e insertarlos después en la página web con el widget Formulario. Podremos diseñar el formulario incluyendo los campos necesarios y las dependencias entre los mismos, así como gestionar los datos recibidos y los correos que recibirán las notificaciones. De esta aplicación tan importante se ocupa en profundidad el tema 8. Formularios web.

Estructura de una página web. Partes

Los elementos que forman la estructura común a todos los Website UCM son:

Cabecera del Website

Común a todas las páginas y que consta de:

  • Logotipo de la UCM (incluye el enlace a https://www.ucm.es)
  • Nombre del Website o logotipo: se puede solicitar la inclusión de un logotipo (alto máximo 64 píxeles), pero sólo se puede optar por uno de los dos (o nombre o logotipo) el cual también sirve como enlace a la portada del Website en que nos encontremos.
  • Banner del dominio. Los Website se clasifican según su área funcional en dominios, aunque hay algunos que no presentan este elemento.
  • Menús del Website. Si los tiene definidos, sería lo siguiente que encontramos.

Cabecera Website

Cuerpo del website

Inmediatamente después de la cabecera, encontramos el cuerpo. Este es distinto según cada una de las páginas que formen el Website. El mismo, en general, se divide en una serie de contenedores estructurados en una o más columnas según la plantilla elegida:

  • Portada. En este caso, el cuerpo podría empezar por un área de noticias o de imágenes si así lo hemos definido en la plantilla. Inmediatamente después de esta área encontrariamos los contenedores que organizarán el contenido como cualquier otra página del Website.
    Contenedores según plantilla
     
  • Resto de páginas que no son la portada, constarán obligatoriamente de:
    • Camino de migas (o barra de localización), indica la posición relativa de la página donde nos encontremos en la jerarquía de páginas del website y ayuda a situarmos y movernos por él. Si la página esta situada en un nivel muy profundo no se mostrará el camino de migas completo, sino uno abreviado donde se visualizarán los primeros y los últimos niveles separados por "...". Esto en general no debería pasar, pues no es recomendable anidar más de 3 o 4 niveles en un website.

      Camino de migas
       
    • Título de la página, el nombre descriptivo que hemos dado a esa página.
    • Descripción de la página (opcional), de forma opcional podemos haber rellenado una descripción a modo de subtítulo de página.
    • Cuerpo de la página, estructurado según la plantilla.
       

Cuerpo de página
 

Pie de página

Común a todas las páginas del Website y consta de los siguientes elementos:

  • Área de redes sociales: con una serie de iconos que enlazan con nuestras redes sociales.
  • Enlaces de pie de página: hasta cuatro enlaces configurables.
  • Logotipos institucionales: aparecen de forma obligatoria algunos logotipos de índole institucional comunes a todas las páginas de la UCM.
  • Elementos fijos del pie:
    • Copyright UCM.
    • Localización y contacto: que enlaza con la página con URL "contacto"  del Website.
    • Aviso Legal: que enlaza con la página con URL "aviso-legal" del Website.
    • Protección de datos: que enlaza con la Web de protección de datos de la UCM.
    • RSS: enlaza con el Feed RSS de distribución del contenido del Website.

 

Pie de página

Sitios web y páginas

Uno de los conceptos básicos del mundo web y que, sin embargo, más se presta a confusión es la distinción entre sitio web y página web. Se emplean a menudo como términos intercambiables y solemos referirnos a ambos en general como "página web". Sin embargo, la distinción es esencial y tiene importantes implicaciones en el trabajo con el gestor web institucional, por lo que vamos a detenernos, aun brevemente, en ella.

A modo de metáfora, podemos decir que un sitio web es un libro completo que abarca una serie de páginas que lo componen. Es decir, un sitio web es un conjunto de páginas relacionadas que comparten una URL única común. Dentro del sitio web, estas páginas se encuentran organizadas y jerarquizadas con una estructura concreta, aunque al tener su propia URL podamos acceder y navegar a ellas separadamente.

A su vez, el sitio o espacio web tiene una portada con una serie de características propias. De ella, a modo de árbol, cuelgan las páginas de primer nivel y de éstas cuelgan sucesivamente páginas de segundo, tercer, cuarto... nivel.

Jerarquía Website
Para reorganizar las páginas según de esta estructura, podemos mover las páginas en la web, como veremos en el apartado 2.1 Operaciones básicas.

Por su parte, y siguiendo con la metáfora, del mismo modo que los libros en una biblioteca se agrupan por materias como Economía, Filosofía, etc., en la UCM los sitios web se clasifican según su área funcional en dominios, que en muchos casos podemos ver en un banner en la parte superior del sitio web: Facultades, Departamentos, Bibliotecas...

En el caso del gestor web institucional, todo esto se traduce en que los sitios web tienen una gestión de permisos propia, independiente de los otros websites, por lo que éstos se deben solicitar específicamente para el sitio concreto con el que se va a trabajar. Por defecto, las páginas heredan los permisos del espacio web en el que se encuadran. Asimismo, se pueden solicitar permisos de edición para página específicas, de forma que la persona que trabaje con ella no pueda realizar modificaciones en otras páginas del espacio web ni en su portada.

Además, se puede realizar una personalización de la cabecera y el pie de página para todo el espacio web, que se verá reflejado en cada una de las páginas que lo conforman.

Como decíamos, las portadas de los espacios web cuentan con plantillas especiales propias distintas a las de las páginas, las cuales presentan imágenes y noticias. De ellas se hablará en su apartado correspondiente.

Plantillas de Portada
Plantillas de Portada

Plantillas de Página
Plantillas de Página

Todas estas particularidades se reflejan también en las opciones de configuración del sitio web, accesibles desde su portada, diferentes de las de las páginas que lo componen. El espacio web permite la configuración, aparte de sus plantillas específicas, de:

  • Gestionar fotografías de portada: éstas aparecerán como fondo de portada en las plantillas de fotos.
  • Etiquetas HTML (Metatags): Las metatags son etiquetas HTML que se incorporan en el encabezado de una página web, no visibles para los visitantes pero de gran utilidad para buscadores, navegadores u otros programas que puedan valerse de esta información. Su propósito es el de incluir información (metadatos) de referencia sobre la página. En el caso del gestor web UCM: título, descripción, keywords, Google Analytics y Adwords (estas dos últimas solamente para administradores). Al crear el sitio web estas etiquetas vienen por defecto con algunas genéricas de la Universidad, pero pueden añadirse más para nuestro sitio web en concreto. Indican a los buscadores que indexan la página por qué términos debe ser encontrada. Junto a otros factores SEO pueden servir para mejorar su posición en el listado resultante de una búsqueda. El contenido de estas etiquetas afecta a todo el sitio web.
  • Gestionar avisos de portada: que requiere un permiso específico.

Configuración de Portada de Website
Configuración de PORTADA de un espacio web

Configuración de página Web
Configuración de una PÁGINA web.
Estos cambios solamente afectarán a dicha página.

Esta estructura se refleja, asimismo, en las aplicaciones web como Galerías o Archivos, que asocian galerías o documentos a los websites desde los que se crean.

Contacto y Ayuda

¿Quiénes somos?

Soporte web: equipo formado por tres bibliotecarios y dos informáticos (Servicio de Edición Digital y Web de la Biblioteca Complutense).

eCampus Web: Soporte a problemas de funcionamiento y cuestiones de índole técnica relacionadas con el gestor.

Cómo contactar

Incidencias (navegar identificado):

☎ Helpdesk: 913944774

Correos electrónicos:
Soporte Web (soporteweb@ucm.es)
eCampus Web (gweb@ucm.es)

Idea. BombillaAyuda e información