Imágenes

Descargar las imágenes necesarias para realizar este apartado.

1. Imagen captura_01.psd: la imagen ha de tener una anchura máxima de 500px. Introducirla en el punto 4.2.2. de la unidad 5.
2. Imagen captura_02.psd: recortar de la imagen todos los componentes ajenos a la interfaz gráfica de Google. La imagen final ha de tener una anchura máxima de 500px. Introducirla en el punto 4.2.1. de la unidad 5.
3. Imagen logo_CO.psd: esta imagen será la imagen de fondo de la cabecera. Ha de tener una altura de 75px, conservar la transparencia y pesar menos de 15kb. Irá a la izquierda de la caja, y no se repetirá. El texto de la caja no ha de tapar el logotipo (es posible que tengamos que variar algún atributo de la caja de cabecera para que el logotipo se vea entero).
4. Imagen comillas.psd: como se puede apreciar, la imagen original tiene un fondo transparente. En la imagen resultante, las comillas han de tener un 50% de opacidad, ya que irán detrás de un texto, y no queremos que la imagen de fondo dificulte la lectura. Una vez preparada la imagen, situarla como imagen de fondo de la etiqueta blockquote con los siguientes atributos: no se ha de repetir, aparecerá en la esquina superior izquierda de la caja, y ha de verse en su totalidad.

A continuación se expone el enunciado del proyecto final de la asignatura, que compone el 50% de la calificación final. El enunciado se revisará cuando se reanuden las clases tras las vacaciones de Semana Santa, pero dados los plazos que manejamos es interesante que vayáis avanzando lo que podáis con el proyecto. Lee el resto de esta entrada »

Enlaces y menús

En esta fase vamos a crear la estructura de navegación interna del sitio (menús y submenús), además de una serie de enlaces a recursos externos al sitio.

1. Menú de navegación para el sitio: en la parte anterior del ejercicio había que crear una caja para albergar el menú de navegación entre unidades didácticas (documentos del sitio). Dicho menú constará de 5 enlaces a unidades didácticas y uno a una página que contendrá un test de autoevalución. Para que el menú funcione, introduciremos los enlaces correspondientes a cada uno de los documentos XHTML. Una vez que elaboremos el menú en uno de los documentos y comprobemos que funciona correctamente, será suficiente con copiar esa porción de código en el resto de los documentos (y si fuera necesario, realizar algún pequeño cambio para visualizar correctamente cuál es el archivo activo). Además, crearemos estilos CSS para obtener efectos gráficos que ayuden al usuario a interpretar qué texto es un enlace. Para ello, utilizaremos las pseudo-clases :link, :visited y :hover.
2. Menú navegación por cada documento: dado que cada uno de los documentos XHTML consta de una gran cantidad de texto, vamos a facilitar la navegación del usuario añadiendo un submenú antes del inicio del contenido propiamente dicho de cada documento XHTML. Gracias a estos submenús, formados también como listas, el usuario tendrá la posibilidad de acceder directamente a secciones y subsecciones del documento en el que se encuentra (es suficiente con enlazar las secciones de primer y de segundo nivel).
3. Navegación por puntos concretos de los documentos: en algunas ocasiones, en el texto de los documentos se hace referencia a otras secciones de los apuntes. Estas llamadas tienen que ser enlaces funcionales.
4. Enlaces externos al sitio: en la sección Bibliografía de cada unidad hay una serie de recursos disponibles en la web, con sus correspondientes enlaces. Se trata de hacer que esos enlaces, que ahora son texto simple, sean enlaces funcionales.

Algunos errores comunes o cuestiones a tener en cuenta:

• Los nombres de archivo. Es imprescindible que los nombres de archivo contengan exclusivamente letras, números y guiones. Esto excluye espacios en blanco, caracteres con tilde y eñes. No tener esto en cuenta puede hacer que los archivos terminen siendo inaccesibles en algunos casos.
• Aquéllos que tengáis los documentos ‘Tentatively Valid’ y con un aviso indicando que no se ha encontrado la codificación de caracteres, revisad vuestra delcaración. Lo más probable es que esté incorrectamente escrita (copiar y pegar no es tan difícil), así es como tiene que ser:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Aunque no es exactamente un error, sí que tenéis tendencia a hacer los documentos CSS muy repetitivos, cuando podríais resumir las propiedades utilizando agrupaciones de selectores. Por ejemplo, escribiendo

h1, h2, h3, h4 {
   font-weight: normal;
   font-family: Helvetica, Arial, sans-serif;
}
h1 {
   font-size: 3em;
   color: #68006C;
}
h2 {
   font-size: 2.5em;
   color: #7A207D;
}
h3 {
   font-size: 2em;
   color: #A101A6;
}
h4 {
   font-size: 1.2em;
   color: #CD35D3;
}

en lugar de

h1 {
   font-size: 3em;
   color: #68006C;
   font-weight: normal;
   font-family: Helvetica, Arial, sans-serif;
}
h2 {
   font-size: 2.5em;
   color: #7A207D;
   font-weight: normal;
   font-family: Helvetica, Arial, sans-serif;
}
h3 {
   font-size: 2em;
   color: #A101A6;
   font-weight: normal;
   font-family: Helvetica, Arial, sans-serif;
}
h4 {
   font-size: 1.2em;
   color: #CD35D3;
   font-weight: normal;
   font-family: Helvetica, Arial, sans-serif;
}

todos los elementos comunes se declaran agrupados, lo cual, además de garantizar, en este caso, que todos los títulos llevarán la misma tipografía, nos ahorrará tiempo en caso de que tengamos que cambiar dichos atributos comunes.

Maquetación

Una vez estructurados los documentos XHTML, pasamos a maquetarlos para introducir una cabecera, un menú de navegación entre unidades, un submenú de navegación dentro del documento y un pie de página. Toda la maquetación se realizará con CSS, que deberá pasar la validación del W3C (http://jigsaw.w3.org/css-validator/). Elementos de la maqueta:

1. Contenedor: todo el material de la web irá dentro de un contenedor que ocupará el 80% de la anchura de la pantalla, e irá centrado (al estilo de la mayoría de los blogs). El resto de los elementos de maquetación irán dentro de este contenedor.
2. Cabecera: dispuesta en la parte superior del documento, ocupará todo el ancho que le corresponda. Llevará el nombre del sitio, y el logotipo de la universidad alineado a la izquierda. Para que la cabecera resalte sobre el resto de elementos, podemos darle un color de fondo distinto, jugar con la tipografía, etc.
3. Menú de navegación entre documentos: el sitio tendrá 5 unidades didácticas, más un test de autoevaluación. El menú de navegación irá debajo de la cabecera, sin ningún margen arriba, y tendrá un color de fondo vivo. Se elaborará con una lista dispuesta horizontal. Aplicaremos estilos CSS para indicar qué unidad es la que se está visualizando, y dónde hay enlaces a otras unidades.
4. Submenú de navegación para cada unidad: otro elemento de la maqueta del sitio será el submenú con los enlaces para navegar dentro de cada documento. Esté submenú se elaborará con una lista vertical, y se situará en la parte derecha de la ventana, debajo del menú principal. El color de fondo será del mismo color que el menú principal, pero más claro. Al igual que en el menú, haremos que los enlaces se resalten gráficamente cuando el usuario pase el ratón sobre ellos.
5. Contenido: ocupará la mayor parte del espacio del documento. Se situará a la izquierda de los menús, alineado en la parte superior con la cabecera.
6. Pie de página: donde incluiremos datos tales como autores de la maquetación, fecha de creación del documento, etc. Irá en la parte inferior de la ventana, ocupando todo el ancho, y sin margen izquierdo, derecho ni inferior.

Ejemplos de maquetación con CSS:

• Sobre diseño líquido
• Plantillas de maquetas CSS
• Experimentos con CSS
• Ejemplos y trucos para maquetar con CSS
• Plantillas de maquetas con CSS

Codificación de originales y estilos tipográficos

1. Crear la estructura física para albergar el sitio web “Apuntes de Documentación”, teniendo en cuenta que:
   • Habrá un documento XHTML en blanco (plantilla.htm) que usaremos a modo de plantilla para crear nuevos documentos.
   • El sitio contendrá un documento XHTML por cada unidad didáctica, además de un test.
   • El sitio contendrá al menos un documento CSS (dependiendo de cómo queramos gestionar los estilos, puede haber más de un documento CSS).
   • El sitio contendrá varios archivos de imagen, cuyo número desconocemos por el momento, y que se nos entregarán en el momento pertinente.
2. Crear un documento XHTML 1.0 estricto en blanco y llamarlo plantilla.htm. Incluir toda la información necesaria en la sección <head>: enlaces a documentos CSS, metadatos (con información sobre autor, palabras clave…), título del documento, etc.
3. Descargar los archivos de texto con las unidades didácticas disponibles en el archivo comprimido originales.zip.
4. Crear un documento XHTML para cada unidad didáctica a partir de la plantilla creada en el punto 2; introducir el contenido correspondiente en cada uno de ellos; estructurar el contenido con etiquetas XHTML;
5. Crear estilos en un documento CSS para mejorar aspectos tipográficos del sitio. Como mínimo han de crearse estilos para los siguientes elementos:
   • Texto normal (el primer párrafo de cada sección o subsección habrá de tener un estilo distinto al resto de párrafos).
   • Títulos de cuatro niveles.
   • Bloques de cita y citas en línea.
   • Se pueden tomar como referencia para los estilos tipográficos las indicaciones de este sitio: http://webtypography.net/toc/ (En la segunda parte del ejercicio usaremos este documento para generar la maquetación del sitio).
6. En el caso de que en el paso 5 se hayan creado selectores de clase, realizar las llamadas pertinentes en los documentos XHTML.

El siguiente video muestra cómo crear un documento XHTML válido desde cero, siempre contrastándolo con el validador oficial del W3C.

Lee el resto de esta entrada »