Presentation Supercomputing Zulip @ IAC SIEpedia IT News

Logo SIE

Guía del administrador de contenidos web para proyectos de Investigación

Para sitios web publicados a partir de 2022 consulte la Guía actualizada V1.0.

Para crear y mantener páginas web de su proyecto de investigación, se le ha instalado un Sistema de Administración de Contenidos (CMS) llamado Website Baker, de código abierto y libre (licencia GNU/GPL) que permite crear, modificar y organizar el contenido de su sitio web directamente con el navegador y en tiempo real de manera sencilla, sin necesidad de distribuir ficheros a través de servidores.

Este CMS consta de dos partes, una zona pública donde está todo el contenido visible y una zona administración, que es un área reservada con clave y accesible sólo desde el IAC desde donde se puede añadir o modificar contenido al sitio web.

Enlaces rápidos:

Zona pública

Son las páginas web en que verá todo el mundo. Si tiene un proyecto de investigación llamado por ejemplo "galaxias", la dirección de su web será algo similar a

    http://research.iac.es/proyecto/galaxias

Recién instalada la aplicación, en la página verá la plantilla estándar para proyectos, que se muestra en la Figura 1. En ella se distinguen varias áreas como la cabecera con el logo del IAC, un banner con el título del proyecto, un menú de navegación con varias secciones de muestra a izquierda, el contenido principal a la derecha y un pié de página en la parte inferior.

Pantalla pagina principal
Figura 1

Zona de administración

Se trata de una zona privada a la que se accede con un usuario y contraseña únicamente desde el IAC. La dirección es la misma que la web principal añadiendo "admin/" al final:

       http://research.iac.es/proyecto/galaxias/admin/

una vez ahí hay que poner el nombre de usuario y la clave (si no la recuerda, utilice el enlace "forgot password?" en esa misma página). Una vez aceptado, se le redirigirá a la zona de administración (Figura 2). En ella verá una página distinta al área pública, donde hay cuatro bloques distintos:

Pantalla pagina principal
Figura 2

Pages

Es la zona que usará más habitualmente. Desde aquí puede crear nuevas páginas web para su sitio y editar las existentes, así como modificar el menú principal de navegacián de su sitio. Al entrar en "Pages", verá una pantalla como esta:

Pantalla pagina principal
Figura 3

En la parte superior verá las páginas web ya creadas (Modify/Delete pages). Si es la primera vez que accede, habrán varias páginas de muestra orientativas que puede modificar según sus necesidades. A la derecha de esta lista de páginas hay varios iconos (Actions) para cada una de ellas:

Para modificar el contenido de una página basta con pinchar en el enlace correspondiente de la lista de páginas. Por ejemplo, pinchando en la página "Presentation" tendríamos una página como esta:

Pantalla de edicion de una pagina
Figura 4

Aquí aparece un sencillo editor gráfico de HTML, similar a un Word simplificado. Puede escribir directamente en la zona de edición y utilizar los botones de la parte superior para dar formato al texto si lo desea. También puede pegar texto de documentos externo, por ejemplo de MS-Word, pero si lo hace es recomendable utilizar el botón de "Pegar como texto" editor copiar icon, para que elimine todo formato o el de "Pegar de Word" paste word icon, que manteniendo el formato (colores, fuentes, etc.) elimina etiquetas propias de MS-Word; se recomienda emplear el primero cuando sea posible y luego aplicar el formato deseado con el editor.

En la segunda línea de botones puede añadir enlaces (links) a otras páginas del mismo sitio (enlace interno, link icon) o a páginas externas y correo electrónico editor enlace icon, así como subir y añadir imágenes editor imagen icon.

Recuerde que también hay un botón de "Fuente HTML" o "Source code" (el botón source code icon) según el idioma de su navegador, arriba a la izquierda para cambiar a modo de cádigo HTML, que le dará mayor control sobre el contenido.

Cuando se hace un copiar-y-pegar de word, se insertan etiquetas de formato que pueden entrar en conflicto con el formato general de la página Web definido en la hoja de estilo, y producir efectos indeseados como por ejemplo espacios extras o cambios repentinos del tipo de fuente.
Por ello se recomienda siempre la opción de pegar como texto, y darle formato luego usando las herramientas propias del Website Baker.

El aspecto general del sitio web se controla con una hoja de estilos (CSS, ver más adelante) común a todo el sitio y los formatos de que aplique en la edición de cada página deben ser sálo casos muy puntuales. Si desea cambios globales, como un letra más grande, distintos colores, etc., debe entonces modificar la hoja de estilos como se explica más adelante.

Si desea añadir una imagen, puede hacerlo con el botón "Añadir imagen" Modificar
configuracion de la pagina icon del menú. Ahí le pedirá una dirección URL (Figura 5), si la imagen está en la web o bien tomarla de su carpeta de ficheros "media" (usando el botón "Ver servidor" o "Browse..." según el idioma de su navegador) que es una zona donde puede subir y almacenar ficheros e imágenes (ver sección siguiente).
En la pantalla de "Ver servidor" o "Browse...", que es el contenido de su carpeta "media" (figura 6) puede escojer cualquier imagen que haya puesto en "media" o subir una nueva con el formulario en la parte inferior.
Una vez escogida la imagen, se pincha en OK y se regreasa a la edición de la página, donde se habrá insertado la imagen; ésta se puede cambiar de tamaño pinchando en ella y moviendo las esquinas con el cursor del ratón.

Pantalla de edicion de una pagina
Figura 5
Pantalla de edicion de una pagina
Figura 6

Para añadir un enlace el procedimiento es el mismo (botón de enlace externo Modificar configuracion de la pagina icon), el cual puede ser también a un documento o imagen en el directorio "media". Para esto sólo hay que seleccionar el texto o imagen que queremos que haga de enlace y usar el botón de enlace.

Si desea añadir un vídeo, debe utilizar el modo de código HTML y añadir una etiqueta HTML como esta:

<embed width="250" height="250" src="../media/demo/sol_arcos_magnet_tierra.mpg" menu="true" loop="true"></embed>

si el video no se encuentra en Internet y desea subirlo al servidor, debe hacerlo en la sección "Media" (ver sección siguiente).

Creando páginas nuevas

Además de modificar las páginas ya existentes, puede crear nuevas páginas desde la sección Pages, usando el formulario Add page de la parte inferior (Figura 3). Allí verá varios campos que debe cumplimentar:

Recuerde que no es necesario que todas las páginas tengan un enlace en el menú principal de la izquierda, sólo las más importantes; las demás se pueden enlazar desde otras páginas (botón del editor de páginas Modificar configuracion
de  la pagina icon) y marcarse como Visibility="Hidden" para que no aparezcan en el menú principal.

Todas las propiedades de las páginas, como el título, el nombre con el que aparece en el menú, visibilidad, etc. se pueden modificar con el botón modificar
propiedades pagina correspondiente a esa página en la sección "Pages".

Media: subir ficheros al servidor

En la sección de Media se pueden subir imágenes, documentos y todo tipo de archivos, hasta un máximo de unos 20 Mb cada uno, límite impuesto por el servidor; es simplemente un directorio para guardar documentos con una interfaz simple para administrarlos.

Al entrar en la zona de media (Figura 7) veremos el contenido del directorio, con sus ficheros y subdirectorios (Browse Media) pudiendo renombrar o borrar cada uno con los enlaces la derecha (Rename y Delete). Más abajo se puede crear un directorio (Create folder) y subir ficheros a cualquier directorio de Media (Upload File). Puede subir varios ficheros al mismo tiempo, siempre que en total no superen el límite de subida; si desea reemplazar uno ya existente, debe marcar la casilla "Overwrite existing Files". Desde la sección de Pages siempre tendrá acceso a esta sección para enlazar cualquier fichero o imagen.

Pantalla de seccion media
Figura 7

Admin-Tools

En esta sección tiene acceso a algunas funcionalidades de administración. En general no es conveniente modificar nada aquí, excepto la edición de plantilla (Template Edit). Entre en esa sección para modificar la hoja de estilos de su sitio (Figura 8); ahí puede marcar la hoja de estilos del sitio (project/screen.css) para modificarla (aunque es posible, no se recomienda modificar los otros ficheros de la plantilla) y guardar una copia de toda la plantilla (project.zip).

Al elegir modificar la hoja de estilos verá el documento CSS del sitio y podrá modificarla como desee; para ello necesitará algunos conocimientos de hojas de estilo para páginas web.

Recuerde que los cambios se hacen directamente en el servidor y verá el resultado del cambio simplemente recargando la página pública, por ello es conveniente conservar una copia de la plantilla o de la hoja de estilos (fichero screen.css) antes de modificarlos.

Pequeños errores en la hoja de estilo pueden destrozar completamente el aspecto de la página. Por ello, si quiere hacer cambios importantes en el "look" de la página, le aconsejamos que hable primero con nosotros.
Pantalla Admin-tool
Figura 8

Un cambio sencillo en la hoja de estilos es cambiar la imagen de banner por defecto de la galaxia M51. Seleccione modificar la hoja de estilos (project/screen.css) y busque la linea que pone

  /* IAC logo/Galaxy lower banner */

en la línea 42 aproximadamente (Figura 8) y en la linea

  background: #fff url(images/banner.jpg) top left no-repeat;

que está más abajo (línea 51, aproxiamadamente) cambie "banner.jpg" otra de las opciones posibles (banner-hudf.jpg, banner-m27.jpg, banner-spot.jpg banner-bubble.jpg, banner-cluster.jpg, banner-nebula.jpg), por ejemplo:

  background: #fff url(images/banner-cluster.jpg) top left no-repeat;

ahora guarde los cambios con el botón "Save" más abajo y ya podrá ver el resultado en la página pública.

Pantalla Editar CSS
Figura 9

También puede crear su propio banner con una imagen jpg de 900px x 100px y subirla al directorio "media". Luego enlácela con la URL adecuada:

     background: #fff url(../media/your_banner.jpg) top left no-repeat;

Más información

Para saber más, puedes consultar directamente la Web oficial de Website Baker. Estos son otros temas que te pueden interesar: