Manual de estilo para la publicación de páginas web en el servidor de la UC3M

Manual de Estilo para crear páginas web en el servidor de la UC3M

Estructura de la página	Página con frames (marcos)
Define los elementos esenciales de la página para situarla en el sitio web de la UC3M: Cabecera, ubicar la página / Cuerpo, contenido de la página / Pie de página, propiedad intelectual y comentarios / Plantillas para nuevas páginas	Constan de dos partes: una frame izquierda para el menú de opciones y una frame derecha para el contenido de la página. Recomendaciones de estilo / Recomendaciones de redacción y diseño / Plantillas
Elementos de navegación	Fondos
Evite que los visitantes se pierdan por sus páginas. Enlaces para desplazarse por nuestro web / Iconos de navegación oficiales / Plantillas	Facilite la visualizacion de sus páginas: Fondo oficial / Recomendaciones para colores y fondos

1. Estructura de las páginas web de la UC3M
Las páginas web son documentos para publicar principalmente en Internet y en el contexto de un sitio Web concreto.
De igual forma que en una publicación en papel encontramos ciertos elementos en las páginas (el número, el nombre del capítulo etc.), que nos informan de la posición dentro del libro en la que estamos, en una página web debemos incluir elementos que nos situen dentro del sitio web que la contiene y que aporten información adicional a los lectores.
La mejor solución para crear páginas para el web de la universidad es usar las plantillas, que contienen los elementos esenciales, además de incluir la referencia a la hoja de estilo oficial de la Universidad.
Las páginas web deben constar de tres partes:
a) Cabecera b) Cuerpo c) Pie de página
a) Cabecera:
La misión de la cabecera en las páginas de la Universidad será la de ubicar la página dentro de alguna de las diferentes secciones que integran el web de la Universidad.
La información en el web de la Universidad está organizada en las siguientes secciones:

Información General

Investigación

Departamentos, Centros e Institutos

Estudios

Servicios

Entidades Colaboradoras
Existen por tanto cabeceras para cada una de estas secciones y nuestra página deberá comenzar con la cabecera bajo la cual se clasifica la información que queremos publicar.
Las cabeceras incluyen el nombre de la Universidad, así como el logotipo oficial en un gráfico, que es además un enlace a la página principal de la Universidad. Aparecen insertas en las plantillas para hacer páginas web, donde ya llevan incorporado este enlace.
b) Cuerpo:
El cuerpo es el contenido mismo de la página.
Para la confección del cuerpo de las páginas existen una serie de normas tipográficas que unifican el estilo de las páginas de la Universidad. Existe un hoja de estilo (css) que define la fuente, el color y el tamaño de determinados elementos de las páginas web. Las plantillas contienen este estilo, por lo que los diferentes elementos de la página (headings, párrafos, tablas...) se adaptarán a la tipografía oficial automáticamente.
Para enlazar la hoja de estilo de la Universidad en su página debe incluir el siguiente código entre las etiquetas <head>...</head>:
<LINK rel="stylesheet" href="http://www.uc3m.es/uc3m/estilo.css" type="text/css">
Después de enlazar la hoja de estilo, debe tener en cuenta que el aspecto que muestre la página desde su editor puede ser diferente al aspecto definitivo de la misma. Por ejemplo, si usted trabaja con el programa "Netscape Composer" y pone un título como "Encabezamiento 3" o "heading 3", en el propio editor verá este título con las características por defecto de este elemento (letra negra de gran tamaño). Para ver el aspecto definitivo deberá ir al navegador pulsando sobre el botón correspondiente, entonces verá que el título aparece en letra Arial o Helvética, en color rojo, mayúsculas y alineado a la izquierda. Para más detalles sobre el uso de "Netscape Composer" puede consultar el Manual de Netscape Composer.
Si por alguna razón no puede enlazar la hoja de estilo, las principales especificaciones de estilo de el web de la Universidad son:

Letra base debe ser Arial (helvética como segunda opción) de 10 puntos de color negro y estilo normal (sin negrita ni cursiva):

"Ejemplo de letra base"

Los títulos principales (para la hoja de estilo h2 y h3) van también en Arial-Helvetica, de 15 puntos, en negrita, alineado a la izquierda y todo en mayúsculas. El color de la fuente debe ser Rojo (#CC0000)-->en código html o (204 0 0) -->en RGB:

Ejemplo de tÍtulo principal (H2 Y H3)

Si necesitamos un título mayor aun, seguiremos las mismas especificaciones que en el anterior punto pero con una fuente de 17 puntos (o 19 pixels). Coincide con los h1 de la hoja de estilo:

Ejemplo de Título extra-grande (H1)

Para los subtítulos (h4 en la hoja de estilo) se usa la fuente Arial-Helvetica con un tamaño de 14 puntos, en negrita, y de color azul marino (#000099):

Ejemplo de subtítulo (h4)

Podemos querer texto para datos de contacto o direcciones postales con una diferente tipografía a la del resto de la página. En html normalmente se usa la etiqueta <address></address>. La tipografía oficial que recoje la hoja de estilo en este caso es: Arial (o helvetica), de 11 px de tamaño e itálica (etiqueta <i></i>):

Ejemplo de texto para datos de contacto, fecha de actualización, citas o direcciones postales

Al margen de todas estas especificaciones de color o tipográficas es conveniente que tenga en cuenta nuestras Recomendaciones para la redacción y diseño de páginas web.
c) Pie de página:
El pie de página es la zona final del documento donde se incluye información repetitiva generalmente referida a la propiedad intelectual del mismo.
Las páginas del servidor web de la Universidad deben llevar un pie con el nombre completo de la universidad acompañado del símbolo de copy right (véase archivo gráfico de la Universidad, sección "iconos oficiales").
Existe un modelo para páginas normales (en el que se incluyen los iconos de utilidades del web) y otro modelo para páginas con frame izquierda.
En el pie de página, y por encima del copy right de la Universidad, deberá aparecer una línea de "comentarios y sugerencias" donde se debe proporcionar el correo electrónico de la persona responsable de la información de la página (aquí debería usar la etiqueta "address" mencionada anteriormente).
Otra información muy recomendable para el pie de página es la fecha de la última actualización que orientará a los lectores sobre la vigencia y validez de la información de nuestra página.

2. Páginas con frames (marcos)
Considere las peculiaridades de las frames antes de elaborar sus páginas.
Lea las "recomendaciones de estilo sobre frames" de nuestras "recomendaciones para la redacción y diseño de las páginas web".
Si después de esto está convencido de que la información que quiere publicar hace aconsejable el uso de frames puede usar las plantillas para páginas con frames y seguir las instrucciones que encontrará en la página de plantillas.
Por supuesto, todas las especificaciones del punto 1 de este manual de estilo son también válidas para este tipo de páginas.
Las páginas estándar de la Universidad basadas en frames tienen una división vertical y constan de dos partes:
- una frame izquierda para el menú de opciones cuya medida estándar es 177 pixels;
- una frame derecha para la visualización del contenido mismo de la página.
Las medidas deben especificarse en el frameset de la siguiente forma:
<FRAMESET cols="177,*" frameborder="NO" border="0" framespacing="0">
Por supuesto, en las plantillas ya viene especificado de esta manera.

3. Elementos de navegación
Identifique sus páginas y facilite la navegación a sus lectores.
Las páginas web deben de proporcionar "ayudas a la navegacíón" para facilitar el desplazamiento por el sitio web. Es importante identificar la página en la que nos encontramos dentro de la jerarquía del sitio, y señalar el camino a otras páginas de nuestro sitio.
En Internet hay muchas páginas "sin salida", esto es, llegamos a ellas navegando, pero no proporcionan ningún enlace para seguir explorando ese sitio web, lo que provoca que abandonemos estas páginas o que usemos el botón de vuelta atrás del navegador hasta encontrar una página de menú que nos permita explorar otra zona del web. Es ésta una forma incómoda de desplazarse y además presupone un cierto conocimiento de la herramienta de navegación que no tiene por que ser cierto.
Por todo esto es conveniente que proporcionemos al lector una serie de enlaces, dispuestos de igual forma en las diferentes páginas, para facilitar el desplazamiento por las distintas zonas de nuestro web. Éstas son las denominadas "herramientas o ayudas a la navegación".
La función más básica para ayudar a la navegación es la de proporcionar en todas las páginas un enlace a la "home page" de nuestro sitio. En el caso de páginas que estén en el web de la universidad es obligatorio incluir el enlace a la página principal de la Universidad. En las cabeceras que aparecen en las plantillas el logotipo de la Universidad está enlazado con la página principal.
Además de esto disponemos de "iconos de navegación". Estos iconos pueden encontrarse en el repositorio , sección "iconos oficiales", así como en las plantillas, de las que debe eliminar los que no necesite y añadir enlaces correctos en los restantes. El icono de vuelta a la página principal ya tiene hecho su correspondiente enlace en las plantillas.
Los iconos de navegación en las páginas web de la Universidad Carlos III de Madrid, deben aparecer en todas las páginas después de la cabecera y preferiblemente centrados. Solo son de uso obligado el icono de "vuelta a casa" y el de "menú anterior". Los otros se usarán según su interés para el tipo de páginas que estemos creando.
Cuando la página web que estemos creando sea larga, esto es, ocupe más de dos pantallazos, debemos poner los iconos de navegación de nuevo al final de la página, justo antes de la línea de comentarios y sugerencias y el resto de pie de página.
En caso de aparecer todos los iconos, el orden debe ser el siguiente:

El más importante es el de vuelta a casa, un enlace a la página principal de la Universidad. Siempre debe ser usado para enlazar la url "http://www.uc3m.es". No se debe usar nunca este icono para enlazar la página principal de un servicio o de otro conjunto de páginas que se encuentren en nuestro web. Es de uso obligatorio

El siguiente icono es el denominado "menú anterior". Este icono debe usarse para proporcionar un enlace a la página de menú jerárquicamente superior, es decir, aquella página que en la estructura de nuestro web está justo por encima de la actual, y por la que probablemente el lector haya pasado para llegar a la página actual. Por tanto, este icono tendrá un enlace normal a esa página. No debería ser usado con un javascript que envíe al lector a la página de la que procede, sino a la página anterior dentro de la lógica de la estructura de nuestras páginas. Así, si una persona llega a nuestra página mediante una búsqueda en un motor como Google, altavista, etc. y hemos puesto correctamente el icono de menú anterior, al pinchar en él irá a la página superior jerarquicamente de nuestro web con lo podrá contextualizar la información de la página y podrá encontrar otra información de interés dentro de nuestro web y seguir navegando por él. Si tuvieramos en el icono un javascript de vuelta atrás, el lector al pulsar sobre él volvería al buscador (Google o Altavista...) y seguiría su navegación pero fuera de nuestro web. Es de uso obligatorio

El tercer y cuarto iconos son el de "página menos" o "página anterior" y el de "página más" o "página siguiente". Estos iconos relacionan la página actual con otra que se encuentra en el mismo nivel jerárquico pero que segun la secuencia que hemos establecido se consulta bien inmediatamente antes o bien inmediatamente después. Por ejemplo, podríamos tener una pequeña obra dividida en capítulos, cada uno de los cuales estaría en una página distinta. además tendríamos una página con el índice a todos los capítulos. La página del capítulo dos tendría el icono de "menú anterior" con un enlace a la página del índice. Tendría además un icono de "página anterior" o "página menos" que enlazaría con la página del capítulo uno. Y además contaría con el icono de "página más" o "página siguiente" que enlazaría la página del capítulo 3. Su uso es muy puntual

4. Fondos
Elabore páginas que se puedan leer fácilmente. Lea el apartado colores y fondos de nuestras Recomendaciones para la redacción y diseño de páginas web.
El fondo de las páginas del servidor de la Universidad debe ser blanco, o con la imagen de fondo oficial de la Universidad (véase en esta misma página), que podrá encontrar en el repositorio de la Universidad, sección de iconos oficiales.
Si desea poner otros fondos diferentes deberán ser básicamente blancos o con alguna imagen suave que no perturbe la lectura.
Es muy importante acordarse de especificar, a la hora de confeccionar nuestras páginas, el color de fondo como blanco, con objeto de que se vea así desde cualquier navegador. La razón es que aunque algunos navegadores ponen el fondo blanco por defecto a las páginas que no lo especifican, otros no lo hacen así, y el color por defecto más habitual es el gris. Esto hace que aunque nosotros estemos viendo correctamente la página en nuestro navegador, en realidad se esté viendo con un fondo gris desagradable en otros navegadores.

comentarios y sugerencias: www-team@uc3m.es