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:
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.
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:
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:
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:
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" , para que elimine todo formato o el de "Pegar de
Word"
, 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, ) o a
páginas externas y correo electrónico
, así como subir y añadir imágenes
.
Recuerde que también hay un botón de "Fuente
HTML" o "Source code" (el botón ) 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.
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" 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.
Para añadir un enlace el procedimiento es el mismo
(botón de enlace externo ),
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).
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 ) 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 correspondiente a esa página en la
sección "Pages".
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.
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.
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.
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;
Para saber más, puedes consultar directamente la Web oficial de Website Baker. Estos son otros temas que te pueden interesar: