Ir al contenido principal

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

Guía de apoyo a la edición Web

1.1 Conceptos

1.1.1 Introducción

El gestor web institucional es una herramienta CMS (Content Mangement Systems o gestor de contenidos) de desarrollo propio. Los gestores de contenidos son unas aplicaciones que ofrecen una serie de herramientas para facilitar la creación, gestión y administración de sitios web. El hecho de ser un desarrollo propio, presenta algunas ventajas aunque también algunos inconvenientes: 

Entre las ventajas, además de ser gratuito, mencionar que permite la creación de páginas web de forma rápida y muy sencilla, cumpliendo algunos criterios de formato y accesibilidad. Se encuentra adaptado perfectamente al entorno complutense y al ser un desarrollo propio se pueden ir implementando mejoras bajo petición que sean de utilidad e interés general, además aporta ventajas a nivel de seguridad.

Entre las desventajas, comentar que no admite la ejecución de código propio (como javascript) e interacción directa con bases de datos externas, lo cual limita los efectos visuales y el uso de aplicaciones de terceros. Por otro lado, no admite la importación y carga de páginas web, las mismas sólo se pueden componer usando las herramientas que ofrece, por tanto la migración de páginas web externas al mismo resulta costosa. 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 si lo comparamos con herramientas como Wordpress que tienen un amplio soporte internacional, aunque muchos de sus complementos tengan un coste asociado.

Los materiales que han servido para la elaboración de esta biblioguía, parten del contenido del curso Edición Web con el Gestor Web  Institucional de la UCM, impartido en 2021 por  el Servicio de Edición Digital y Web (Biblioteca Complutense) y ECampus Web (Servicios informáticos). El contenido original ha sido actualizado, ampliado y adaptado.

1.1.2 Permisos de edición

Control de acceso

Podemos solicitar permisos para editar nuestras webs cumplimentando el siguiente formulario:

1.1.3 Acceso a la edición web

Desde Mi escritorio tenemos acceso a:

Mis Webs icono del escritorio "Mis Webs" o listado de las webs sobre las que tengo permisos de edición.

Aplicaciones Web. Icono Escritorio "Aplicaciones Web" o listado de aplicaciones autorizadas.

 

Las aplicaciones web necesarias para la edición son:

  • Gestión de páginas web: donde se mostrará un listado de los sitios web donde estamos autorizados.
  • Galerías de imágenes: nos permite subir imágenes y organizarlas en galerías, para después insertarlas en nuestras páginas web, mediante el Gestor UCM, con los widgets "Texto" y "Galería de imágenes".
  • Archivos: nos permite gestionar los archivos para después incorporarlos a nuestra web, mediante el Gestor UCM, con el widget "Documentos y Enlaces".
  • Formularios: nos permite crear formularios para después insertarlos en nuestra web, mediante el Gestor UCM, con el widget "Formulario".

1.1.4 Gestor Web UCM

Cuando 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 es la herramienta que nos permite realizar la tareas de edición.

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

  1. Crear páginas según la estructura lógica del conjunto de páginas Web (jerarquía semántica…).
     
  2. PlantillaElegir plantilla (estructura de la página).
     
  3. ContenidoIncorporar contenido arrastrando los widgets a los contenedores de las plantillas.

 


1. Crear Página
Cambiar plantilla. Configuración de página
2. Elegir Plantilla
Añadir Widgets
3. Añadir Widgets

El contenido se adapta al contenedor.

1.2 Recursos y solicitudes

1.2.1 ¿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.

1.2.2 Cómo contactar

Incidencias (navegar identificado):

☎ Helpdesk: 913944774

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

Idea. Bombilla1.2.3 Ayuda e información 

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

1.4 Estructura del gestor

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. El Gestor cuenta con los siguientes elementos y partes principales, a los que accederemos pulsando sobre ellos, lo cual desplagará su menú de opciones:

Estructura del Gestor

 

1.4.1 Vista previa

Pulsando en ella se ofrecerá una vista previa de la página o portada en la que trabajamos, la cual nos permite ver cómo está quedando sin necesidad de actualizar la página (lo cual es de utilidad especialmente si estamos realizando modificaciones en una página ya publicada y no queremos que sea pública hasta estar terminada). No todos los widgets ofrecen la vista previa exacta de cómo van a quedar, en especial las galerías. Veremos un aviso advirtiendo de que nos encontramos en el modo vista previa.

 

1.4.2 Estado

En él se configura el estado de la página o portada y se actualiza para reflejar públicamente los cambios. Como veíamos en el apartado anterior, las diferencias intrínsecas entre la portada del sitio web y las páginas conllevan también diferencias significativas entre los menús de estado.

 

1.4.2.1 Portada

Estado portada Website

En ella encontraremos:

  • El Estado del website: Publicada o En Pruebas (cuando se crea un espacio web el Estado por defecto es "En Pruebas". De este modo sólo es accesible a los editores autorizados que entren validados. Esto se hace para evitar la publicación de espacios sin contenido hasta que éstos estén terminados. Del mismo modo, un website activo puede ser desactivado temporalmente si, por algún motivo, no deseamos que aparezca públicamente en la web. Esta operación afecta a todo el sitio y, por lo tanto, a todas las páginas que lo componen.)
  • La Visibilidad del espacio web (veremos estos dos aspectos en el apartado 2.3 Visibilidad, permisos y publicación).
  • Actualizar menús: necesario para reflejar los cambios realizados en los menús o su creación.
  • Actualizar portada: necesario para reflejar los cambios realizados en la portada y los menús.
  • 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

 

1.4.2.2 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: Borrador / Publicar ahora / Programar.
  • Su visibilidad: pública o privada.
  • Botón para actualizar la página en la web y reflejar los cambios realizados en ella.

Estos elementos se tratarán de forma extensa en el apartado 2.3 Visibilidad, permisos y publicación.

 

1.4.3 Widgets

Cuando desplegamos el menú Añadir se muestran los distintos widgets que podemos insertar en nuestra página web o portada. Cada uno de estos componentes está concebido para incluir en la web un tipo de contenido o información concreta: un mapa, unos iconos que enlacen a diversos recursos, un formulario, texto... Elegiremos, por tanto, en cada ocasión el tipo de widget que se ajuste a nuestras necesidades de cara a la edición de la página web. Veremos a lo largo del curso cómo trabajar con cada uno de ellos.

Añadir Widgets

 

Para insertar un widget en nuestra página debemos pulsar sobre su icono y arrastrarlo soltándolo en la posición de la página en que deseemos insertarlo. Estas posiciones vienen marcadas en las plantillas por un fino recuadro que nos indica dónde podemos insertarlo y qué ancho de columna va a ocupar. En cada uno de los bloques de la página podremos insertar tantos widgets como deseemos. Si ya hay presente un componente en ese marco podremos insertarlo encima o debajo, posición que será resaltada por el gestor en gris.

 

Agregar widgets según plantillas

 

Al soltarlo aparecerá un recuadro con la 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:

  • Configuración: en ella es donde introduciremos propiamente los datos necesarios para incluir la información en el widget: URLs de mapas y calendarios, seleccionaremos los iconos, trabajaremos con el texto y las imágenes, etc. Por ello, varía considerablemente entre los widgets en función de sus características. Se verán en cada uno de sus apartados.
  • Apariencia: aquí podremos modificar el aspecto del widget en la página web: visibilidad del marco del widget en la web, disposición horizontal o vertical, noticias en vista clásica o carrusel... Como en el caso de la configuración, el contenido de la pestaña y sus opciones varían con el tipo de widget concreto que estemos editando.
  • Permisos: normalmente aparecerá el mensaje "Este Widget no necesita de personalización de permisos para su funcionamiento." y no necesitaremos realizar ninguna acción. Solamente en casos concretos como el widget de Noticias y avisos podremos establecer restricciones de forma que éste sólo sea visible para unos grupos de usuarios, unos colectivos o dentro de la UCM.

 

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

 

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

 

Pestaña Permisos del Widget Documentos y Enlaces
Pestaña Permisos del widget Noticias y avisos

 

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. Esto nos permitirá seguir trabajando en él hasta que lo consideremos terminado y listo para publicación. Para volver a acceder pulsaremos sobre el icono de la rueda dentada.

Si por algún motivo deseamos retirar el widget de nuestra página web tenemos dos opciones a las que accedemos pulsando sobre el icono de cierre:

  • Desactivar y guardar el widget: como comentábamos más arriba, podemos desactivarlo y dejará de mostrarse en la web, pero queda guardado y disponible en el menú de Contenido inactivo. De este modo podremos volver a incorporarlo a la web en otro momento.
  • Eliminar definitivamente: borraremos el widget con todos sus datos. Esta operación es irreversible y ya no podremos recuperar dichos datos.

 

Desactivar o eliminar widget

 

1.4.4 Configuración de página/portada

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

  1. Cambiar su título, título corto relativo a los menús y su orden de aparición, descripción, URL o bien hacer que redirija a una dirección externa, es decir, otra página web.
  2. Cambiar su plantilla, afectando a la disposición de los elementos de la página.
  3. Mover la página, modificando su posición dentro de la estructura y jerarquía dentro del website o trasladándola a otro espacio web.
  4. Idioma: vincular la página a otra equivalente a la misma 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 Página con opciones numeradas

  1. En el caso de las portadas, podremos gestionar las noticias y los avisos, así como modificar las etiquetas HTML (título, descripción, keywords...) que verán los motores de búsqueda y navegadores.

Estas opciones de configuración se explican con detalle en los apartados:

  • 2.1 Operaciones básicas
  • 2.2 Menús
  • 2.4 Plantillas

 

1.4.5 Jerarquía de páginas

Como hemos visto en el apartado 1.3, los sitios web se componen de páginas jerarquizadas en una estructura concreta. Para movernos por dicha estructura contamos con el menú Jerarquía de páginas. Nos permite 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 podremos acceder a ella.

Jerarquía de páginas

Aunque podemos concebir la jerarquía de página como un árbol, este menú solamente muestra un nivel cada vez de las páginas hijas de la portada o páginas en la que nos encontremos, de modo que debemos ir navegando seleccionándolas descendiendo hasta la página a la que deseemos acceder. Marcará en negrita azul la página en la que nos encontremos, en verde la página superior de la que cuelga y en negro 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 aportada en que, obviamente, no hay página superior.

Jerarquía de páginas anotada

En su parte inferior encontramos la opción Gestionar páginas hijas, con la que accedemos al menú para cambiar el orden en el que las páginas aparecerán en los submenús o los permisos de visibilidad.

 

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

 

 

1.4.7 Botones de acciones

 

  • Contenido actualizado: sirve para guardar cambios. Adopta dos formas:
    • Disquete Hay cambios pendientes de guardar.
    • Tick Todos los cambios han sido guardados.
       
  • 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.
     
  • Papelera Eliminar página: nos permite eliminar la página actual siempre que ésta no tenga páginas hijas colgando de ella.

    Bombilla Este botón solamente aparece en la barra de herramientas de las páginas y no en la portada. En ella no tendría sentido, dado que borrar la portada supondría la eliminación del espacio web.

     
  • Interrogación Ayuda: ayuda sobre el gestor web. Redirige a las FAQs de la Web Institucional.

 

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

1.5 Enlaces y URL. Rutas absolutas y relativas

Todo el mundo debería estar familiarizado con las partes de una URL y su empleo en los enlaces, así como las diferencias entre dominio, website y página. Sin embargo, es muy común no tener clara la diferencia entre ellos, ni lo que es una URL relativa y absoluta.

Es importante tener claros estos conceptos antes de comenzar a editar páginas web, por tanto vamos a hacer un pequeño repaso a todo esto.

 

1.5.1. ¿Qué es un dominio?

Para empezar, un dominio se define como un nombre registrado, seguido por un punto y un nombre de dominio superior. Estos dominios de nivel superior son un listado limitado y homologado por organismos internacionales como la IANA o la ICANN, sería lo que suele verse como .com, .es, .org, etc.

En nuestro caso, el nombre registrado es ucm y el dominio de nivel superior es .es, por tanto, el nombre de dominio y todas las direcciones dentro de la Universidad Complutense tienen el formato: ucm.es

El tener registrado un dominio no implica que exista una página web. Para que existan dichas páginas web tiene que haber una serie de ordenadores que las almacenen y las sirvan.

Una vez tengamos nuestro dominio ucm.es, normalmente, para tener mayor flexibilidad y poder almacenar distintos contenidos, podemos crear los llamados subdominios. Por ejemplo:becas.ucm.es, biblioteca.ucm.es, etc.

Tener distintos subdominios nos ofrece una gran flexibilidad, pues podemos usarlos para dar mayor visibilidad a un contenido albergado en un mismo servidor web. O incluso que los contenidos sean dispares y cada dominio lo gestionen servidores/ordenadores distintos.

En el caso de la web UCM, podemos encontrar de ambos tipos. Por ejemplo tribuna.ucm.es y www.ucm.es son dos páginas web, que usan la misma aplicación y estan almacenados en los mismos servidores. 

Sin embargo webs.ucm.es y becas.ucm.es son páginas que usan aplicaciones distintas que están almacenadas en servidores distintos.

Distinguir si los dominios usan distintas herramientas de gestion de contenido (CMS) y están ubicados en servidores dferentes no es inmediato y hay que inspeccionar con detalle las páginas para poder averiguarlo.

 

1.5.2. URL, carpetas y páginas

Las URL o direcciónes de las páginas, se forman con una serie de elementos, como el protocolo de comunicación, que en caso de la web puede ser http (sin cifrar) o https (cifrado), después encontramos el dominio como ya hemos comentado anteriormente y una serie de elementos separados por "/" que identifican las carpetas, hasta el último elemento que siempre corresponderá a la página en que nos encontramos.

Veamos un ejemplo:

URL, ruta

En el caso de la ruta de carpetas, según esté programada la herramienta de esa web, puede no existir y todo quedar reducido a la página.

En el caso del gestor web de la UCM, no existe una estructura de carpetas como tal. La jerarquia de páginas de un website no se ve trasladada a una ruta URL que la refleje.

En el caso de dominios propios que están dentro del gestor web (por ejemplo educacion.ucm.es), siempre serán websites y sólo tienen un primer nivel, que son las páginas que cuelgan de él, por ej: https://educacion.ucm.es/servicios-centro

En el caso del dominio principal www.ucm.es, ese primer nivel puede representar tanto un website como una página.

Si es un website, su nombre o logotipo aparecerá en la cabecera de la página. Por ejemplo: https://www.ucm.es/informacion

Logo UCM y Título de Website

Si es una página, la cabecera sólo mostrará el logotipo de la UCM.

Los websites que cuelguen de www.ucm.es tendrán un segundo nivel, que identificará la página dentro de ese website, pero no más niveles. Por ejemplo: https://www.ucm.es/informacion/facultades-1

 

Cierre admiraciónConviene recordar que por convenio y compatibilidad con todo tipo de navegadores, no se deben usar caracteres especiales en las URL. Sólo son admisibles caracteres alfanumericos y guiones medios - o a lo sumo guiones bajos _. Aunque la herramienta de edición de páginas web lo permita, nunca se deben usar caracteres acentuados ni espacios.

 

 

libro abiertoWebsites y páginas

Como ya hemos visto anteriormente, en el caso de la UCM los websites son conjuntos de páginas, que tienen las siguientes características especiales:

  • Tienen una gestión de permisos propia independiente de la de otros websites.
  • Pueden tener menús diferenciados.
  • Admiten personalizaciones en diversos elementos como por ejemplo en la cabecera y el pie de página.
  • Tienen una página de portada con plantillas especiales para noticias e imágenes, distintas a las de las restantes páginas.
  • Todas sus páginas comparten una ruta URL común.

Las páginas son simples contenedores, que heredan los elementos comunes del website (como cabecera y pie) y que por defecto también heredan sus permisos.

 

1.5.3. URL absolutas y relativas

Una URL absoluta incluye toda la ruta, desde el protocolo de comunicación https, pasando por el dominio y la ruta de carpetas hasta la página, Siguiendo con los ejemplos anteriores la siguiente URL sería absoluta: https://www.ucm.es/informacion/facultades-1

URL relativa: Cuando dentro de un website, estamos enlazando páginas que forman parte de él, podemos sustituir la parte correspondiente a la URL base que nos indica el website, por simplemente un punto "." o si quisieramos hacer referencia a un elemento que se encuentra en una jerarquia de carpetas en un nivel superior, por dos puntos ".."

Siguiendo con el ejemplo de la página de Información, si desde dentro de dicho website quisieramos realizar un enlace a una página como https://www.ucm.es/informacion/estudiantes-internacionales, podríamos usar una ruta relativa y omitir su URL base (https://www.ucm.es/información) escribiendo simplemente: ./estudiantes-internacionales. Como se puede ver, la URL base que define el website, la hemos sustituido por un punto.

No obstante, si desde dentro del website quisieramos enlazar una página externa a él, por ej: https://www.ucm.es/agenda-1 nos veriamos obligados a usar la ruta absoluta, al igual que si quisieramos hacer referencia a una página de otro dominio como por ejemplo https://www.facebook.com

 

El uso de URL relativas es el sistema más recomendable de establecer enlaces dentro de un website, pues si por cualquier motivo, su URL base cambiara, no habría que actualizar todos los enlaces que hay dentro de él.

 

Una forma muy simple de comprobar la URL a la que apunta un enlace es dejar el cursor sobre él. La mayoria de los navegadores mostrarán la dirección a la que apunta el enlace en la esquina inferior izquierda de la ventana.

 

Se puede también comprobar la dirección de un enlace, pulsando botón derecho sobre él y seleccionando la opción Copiar dirección del enlace. Luego bastará con pegar el enlace en cualquier elemento, desde la barra de direcciones a un bloc de notas.

 

1.6 Estructura de una página web. Partes

Cuando empezamos con la edición de un website, tenemos que distinguir los siguientes elementos que forman la estructura común a todos los websites que se crean con el gestor.

Empezando por la parte superior encontrariamos:

1.6.1. 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 websites se clasifican según su area funcional en dominios, aunque hay algunos que no presentan este elemento.
  • Menús del website. Si los tiene definidos, sería lo siguiente que encontrariamos.

Cabecera Website

1.6.2. Cuerpo del website

Inmediatamente después de la cabecera, encontrariamos 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 que elijamos:

  • 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
 

1.6.3. Pie de página

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

  • Área de redes sociales, donde si las configuramos apareceran una serie de iconos de las distintas redes sociales que tengamos.
  • Enlaces de pie de página. El gestor nos permite definir hasta un máximo de cuatro elementos que se pueden estructurar en un máximo de 3 columnas y que es posible cambiar su disposición.
  • Logotipos institucionales. En esta parte aparecen de forma obligatoria algunos logotipos de índole institucional comunes a todas las páginas de la UCM.
  • Enlaces obligatorios del pie, que constaría de:
    • Copyright de la UCM.
    • Enlace a Localización y contacto que va siempre a la página con URL "contacto" local al website.
    • Enlace de Aviso Legal, que va siempre a la página con URL "aviso-legal" local al website.
    • Enlace de Protección de datos que va a la página general de proteción de datos de la UCM.
    • RSS, que enlaza el feed de noticias RSS del website que nos encontramos.

 

Pie de página