Taller impartido en la Asociación de Webmasters de Málaga en 2010

1. XHTML + CSS
Raúl Jiménez Ortega -
rjimenez@webmastersmalaga.com

2. Programa
Entrega de documentación y presentación.
Introducción Histórica
Accesibilidad
XHTML 1.0
1er descanso
Amaya
Ejercicio
2º descanso
CSS
Firebug y validaciones

3. Presentación
Asociación de Webmasters de Málaga
http://www.webmastersmalaga.com

4. Objetivos del taller
● Dar una visión global de cómo se crea una página web
estática.
● Adquirir aptitudes para evaluar la calidad de una web.
● Conocer las herramientas de validación de estándares.
● Justificar la necesidad de usar estándares de accesibilidad.
● Aprender mediante la práctica a crear una página web
estática básica.
● Un repaso a algunas herramientas de depuración.

5. Qué no vamos a ver en el taller
Al tener tan poco tiempo hay cosas que no podremos ver:
● No estudiaremos en profundidad XHTML ni CSS.
● No estudiaremos usabilidad ni posicionamiento.
● No aprenderemos a publicar una página web.

6. Introducción Histórica

7. ¿Qué es XHTML y para qué se usa?
eXtensible HiperText Markup Language
Lenguaje extensible de marcado de hipertexto
Se usa para estructurar los contenidos de los documentos
de hipertexto.
Hipertexto: texto que se muestra en un computador y que se
caracteriza por tener enlaces a otros textos.
La popularidad de estos lenguajes (HTML/XHTML/SGML,...)se
debe al amplio uso que tiene en Internet.

8. Introdución histórica
Standard Generalized Markup Language (1986 ISO normaliza)
World Wide Web Consortium (W3C)
HTML 3.2 - W3C, 14/01/1997 HTML 4.01 W3C, 24/12/1999
XHTML 1.0 - W3C, 26/01/2000
XML 1.0 - W3C, 26/11/2008
XML 1.1 - W3C, 16/08/2006

9. XHTML ó HTML 4.0
HTML 4.01 XHTML 1.0
<img alt="Portrait Murakami Haruki" <img alt="Portrait Murakami Haruki"
src="/images/murakami.jpg"> src="/images/murakami.jpg" />
<p lang="fr"> <p xml:lang="fr">
Je levai la tête pour regarder Je levai la tête pour regarder
les étoiles. Leur vue apaisa les étoiles. Leur vue apaisa
peu à peu les battements de peu à peu les battements de
mon coeur. mon coeur.
</p> </p>
<p> <p>
<cite class="title"> <cite class="title">
Chroniques de l'oiseau à Chroniques de l'oiseau à
ressort ressort
</cite> </cite>
- <cite class="author"> - <cite class="author">
Haruki Murakami Haruki Murakami
</cite> </cite>
</p> </p>

10. XHTML - HTML 4.0
Hay 3 tipos de documentos (DOCTYPE):
Strict:
Separa completamente el contenido de la presentación. No
permite usar elementos desaprobados.
Transitional:
Permite el uso de elementos desaprobados.
Frameset:
Permite usar elementos desaprobados como los marcos
(frames e iframes).

11. Accesibilidad
¿Qué es?, ¿por qué? y ¿en que consiste?

12. Accesibilidad - ¿Qué es?
No es más que una serie de pautas y recomendaciones que
han sido creadas para garantizar el acceso a la información.
Estas facilitan la navegación a:
● Personas: con algún tipo de discapacidad: visual, auditiva,
cognitiva, ...
● Navegadores: al usar un lenguaje universal.
● Buscadores: al estar bien estructurado facilita la búsqueda
de información.

13. Accesibilidad - No es un capricho
Las Naciones Unidas en la declaración sobre los Derechos de las
Personas con Discapacidad (2006) reconoció que la Accesibilidad es
un derecho humano básico.
En España por la ley 34/2002 de 11 de Julio de Servicios de la
Sociedad de la Información y Comercio Electrónico establece que las
Administraciones públicas tienen que adoptar las medidas
necesarias para que la información disponible en sus respectivas
páginas de Internet pueda ser accesible a personas con discapacidad
y de edad avanzada.
Leyes vigentes:
http://www.sidar.org/recur/direc/legis/espa.php

14. Accesibilidad - Pautas
1. Proporcione alternativas equivalentes para el contenido visual y
auditivo.
2. No se base sólo en el color.
3. Identifique el idioma usado.
4. Diseñe con indepencia del dispositivo.
5. Utilice tecnologías y pautas w3c.
6. Proporcione mecanismos claros de navegación.
7. Asegúrese de que los documentos sean claros y simples.
8. Etc.

15. Accesibilidad - Técnicas
1. Evite contenidos que se muevan y/o parpadeen. No actualice o
redireccione las páginas sin autorización del usuario.
2. Si incrusta alguna aplicación en la página asegúrese de que
también es accesible.
3. Realice soluciones compatibles con navegadores antiguos.
4. Evite utilizar elementes desaconsejados por w3c. Si es imposible
crear una página accesible, cree una alternativa que si lo sea.
5. Cree un estilo coherente, simple y claro para todas las páginas de
su web.
6. Etc.

16. XHTML 1.0
Conceptos y reglas básicas

17. Conceptos básicos
Etiquetas:
La etiquetas son palabras reservadas que se encierran entre
los símbolos "<" y ">" y que tienen un significado semántico.
Ejemplos de etiquetas pueden ser:
● <br/> - salto de linea.
● <p> ... </p>- párrafo.
Pero además algunas etiquetas pueden tener atributos,
especiales, por ejemplo:
<a href="curriculum_vitae.html">Enlace a mi CV</a>

18. Conceptos básicos (II)
Las etiquetas pueden aparecer individualmente o en parejas.
Por ejemplo para enmarcar un texto dentro de un párrafo
usamos:
<p>Aquí dentro iría el párrafo.</p>
*Estas etiquetas se cierran anteponiendo el símbolo "/" al nombre de la etiqueta.
Y por ejemplo así se insertaría una imagen:
<img src="mi_foto.jpg" alt="Foto de Raúl comiendo pipas" />

19. Conceptos básicos (III)
● Los elementos de un documento XHTML usan una
estructura de árbol.
● No se puede cerrar una etiqueta si la anterior no se ha
cerrado.
Ejemplo:
Incorrecto:
<p><strong>Texto en negrita</p></strong>
Correcto:
<p><strong>Texto en negrita</strong></p>

20. Conceptos básicos (III)
● Los elementos de un documento XHTML usan una
estructura de árbol.
● No se puede cerrar una etiqueta si la anterior no se ha
cerrado.
Ejemplo:
Incorrecto:
<p><strong>Texto en negrita</p></strong>
Correcto:
<p><strong>Texto en negrita</strong></p>
Correcto y bonito:
<p>
<strong>Texto en negrita</strong>
</p>

21. Reglas básicas
La estructura básica de un documento XHTML es la siguiente:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Nuevo</title>
<!-- Información relevante para buscadores y navegadores -->
</head>
<body>
<!-- Aquí introduciremos todo el contenido visible en la página -->
</body>
</html>

22. Juegos de caracteres
O también conocidos como "charsets":
ISO 8859-1: lenguas originarias de Europa occidental: alemán,
aragonés, asturiano, catalán, danés, escocés, español,etc.
ISO 8859-2: lenguas de Europa Oriental.
UTF-8: Unicode, es el más usado en Internet.
Ejemplo de uso:
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

23. Reglas básicas
Normas de XHTML:
● El nombre de las etiquetas y los atributos deben ir en
minúsculas.
● El valor de los atributos deben ir entre comillas.
● Todas las etiquetas tienen que ser cerradas.
● Los atributos tienen que tener siempre valores.

24. Algunas etiquetas
Algunas de las etiquetas más comunes:
● h1, h2, h3 (header): Encabezado de orden 1,2,3...
● p (paragraph): parrafo.
● a: hipervínculo/vínculo/link.
● img (image): imagen.
● strong: enérgico.
● ul (unorder list): lista desordenada.
○ li (list item): elemento de lista.

25. Hipervínculos
Algunos atributos que nos van a hacer falta:
<a href="http://www.webmastergranada.es">Enlace</a>
● href: Este atributo indica la ruta del enlace al que queremos
acceder.
Las rutas pueden ser absolutas o relativas:
● Absolutas: hay que indicar la URL completa del destino. Ejemplos:
http://miweb.com/foto.jpg, ftp://....
● Relativas: se busca el destino a partir del directorio en el que se
encuentra el fichero. Por ejemplos: fichero.html, directorio/foto.jpg,
../estilo.css.

26. Listas desordenadas e Imagen
Ejemplo de lista desordenada: Ejemplo de imágen:
Código: Código:
<ul> <img src="valor" alt="valor" />
<li>Elemento 1</li>
<li>Elemento 2</li> ● src: Indica la ruta donde se
... encuentra la imagen.
</ul>
● alt: Es un texto alternativo que
Se verá así: se usará para describir el lo
● Elemento 1 que aparece en la imagen.
● Elemento 2

27. Amaya - ¿Qué es?
Amaya es un cliente Web que actúa como navegador y
como editor. Ha sido diseñado por el W3C y el INRIA con el
principal objetivo de demostrar nuevas tecnologías Web y
ayudar a los usuarios a producir páginas Web válidas.
Ventajas frente a otras alternativas:
● Adobe Dreamweaver
● MS Frontpage
● MS Word
Y lo mejor de todo: es libre, gratuito y tiene versiones para
Windows, Linux y MacOS.
Podéis descarlo en: http://www.w3.org/Amaya

28. Ejercicio
Crear una página que contenga los siguientes
elementos.
● Encabezado 1
● Encabezado 2
● Párrafo con un enlace y un texto enérgico.
● Añadir una imagen
● Encabezado 3
● Una lista desordenada
● Encabezado 3
● Y otra lista pero esta vez ordenada.
● Añadir un párrafo con el pie de página (autor, año,...)

29. CSS
Conceptos y reglas básicas

30. Introducción

31. Introducción

32. Introducción
● Todas las páginas mostradas
tienen el mismo código
HTML.
● Por defecto, el navegador
mostraría ésto.
● Esa apariencia se puede
mejorar mediante 'hojas de
estilo'.
● Otros muchos diseños se
pueden encontrar en http:
//www.csszengarden.com

33. ¿Qué es CSS?
CSS es un lenguaje de hojas de estilos creado para controlar
la presentación de los documentos electrónicos definidos por
HTML y XHTML.
CSS es la mejor forma de separar los contenidos y su
presentación y es imprescindible para la creación de páginas
webs complejas.

34. Ventajas del CSS
La separación de los contenidos y su presentación presenta
numerosas ventajas:
● Separación de los contenidos y su presentación.
● Mejora la accesibilidad del documento.
● Reduce la complejidad de su mantenimiento.
● Permite visualizar el mismo documento en infinidad de
dispositivos diferentes.
● Facilita la reutilización, la personalización y el
mantenimiento

35. ¿Cómo funciona CSS?
Tenemos dos opciones para insertar CSS en XHTML.
1.- Archivo externo (que se llama "Hoja de Estilo") y enlazarlo
desde nuestro documento XHTML.
<link rel="stylesheet" type="text/css" href="estilo.css"/>
Ventaja: al modificar una hoja de estilos modificamos el
aspecto de los todas las páginas que enlacen esa hoja de
estilos.

36. ¿Cómo funciona CSS? (II)
Podemos inscrutarlo en el mismo archivo XHTML.
<style type="text/css">
<!--
body,td,th {
font-family: Arial;
font-size: 12px;
color: #FFE6F5;
}
-->
</style>
Se utiliza para webs poco complejas.

37. ¿Dónde se coloca CSS?
CSS se coloca entre las etiquetas <head></head> del
documento (X)HTML. (la Cabecera
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" rel="hoja_estilos.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo de Incrustación de CSS</title>
</head>
<body>
</body>
</html>

38. Importante
● Una de las características más importantes de los estilos
definidos con CSS es que se pueden agrupar en diferentes
reglas que se aplican al mismo selector.
h1 { color:red; }
h1 { font-size: 2em; }
h1 (font-family: Verdana; }
Esto es igual a la siguiente regla CSS:
h1 { color: red; font-size: 2em; font-family: Verdana; }

39. Importante
Herencia
La herencia de los estilos definidos mediante
CSS es uno de los conceptos más
característicos de este lenguaje de hojas de
estilos. Muchas de las propiedades que se
aplican a los elementos, son heredadas por los
elementos que se encuentran dentro de esos
elementos.

40. Ejemplo de Herencia
<html>
<head>
<title> Ejemplo de herencia de estilos </title>
<style type="text/css">
body { font-family: Arial; color: black; }
h1 { font-family: Verdana; }
p { color: red; }
</style >
</head>
<body>
<h1>Titular de la pagina</h1>
<p>Un párrafo de texto no muy largo</p>
</body>
</html>

41. Conceptos básicos
Regla: cada uno de los estilos que comprenden una hoja de estilos
CSS. Cada regla esta compuesta de "selectores", "llave de apertura"
({), "declaraciones" y "llave de cierre" (}).
Selector: indica el elemento o elementos HTML a los que se aplica la
regla CSS. (h1, h2, h3, body, td, img, p,... )
Declaración: la declaración específica los estilos que se aplicarán a
los elementos. ( color : black )
Propiedad: permite modificar el aspecto de una característica del
elemento. (font-family, color, margin, padding,...)
Valor: indica el nuevo valor de la característica modificada en el
elemento. (Arial, black, 20px, 0px,...)

42. Regla CSS

43. Comenzando
El color de primer plano
La propiedad color hace referencia al foreground color, es decir, el
color que está por encima del fondo.
body { color: #666; }
De esta manera nuestro web tendrá las letras de gris oscuro.
El fondo
Podemos modificar el fondo de un elemento con la propiedad
background, que tiene la siguiente sintaxis:
background: #fff;
De esta manera el color de fondo será de color blanco.

44. Continuamos
Fuente
Hay varias propiedades que nos permiten jugar con el aspecto del texto. Antes
que nada tenemos que considerar que no todos los ordenadores tienen las
mismas fuentes instaladas. Es necesario utilizar fuentes "estándar" que tengan
la mayoría de ordenadores.
font-family: define las tipografías y su orden de preferencia.
font-style: da formato a la tipografía (cursiva, oblicua y normal)
font-variant: da formato de versalitas al texto.
font-weight: grosor de la letra.
font-size: tamaño de la letra. Puede ser en pixeles (px) o puntos (pt).
font: nos permite definir simultáneamente más de una propiedad de la fuente.
El orden de los valores es importante.

45. Continuamos
Texto
Para la propiedad texto tenemos:
text-align: alineación horizontal del texto respecto un elemento.
(left, right, center, justify)
text-decoration: define decoraciones de la fuente.
(none,blink, line-through, overline, underline).
text-transform: define mayusculas/minúsculas.
(capitalize, uppercase, lowercase, none)
line-height: define el interlineado del texto. Se mide en px.
body {
text-align: left;
text-decoration: underline;
}

46. El modelo de caja
El "box model" es la característica más importante del lenguaje de
hojas de estilos CSS, ya que condiciona el diseño de todas las webs y
todos los documentos (X)HTML.
Todos los elementos que forman un documento HTML se representan
mediante cajas rectangulares, cuyas propiedades define CSS y cuya
representación visual controla CSS.
Hay dos tipos de cajas:
● Block: rompen el flujo de maquetación (un párrafo).
● Inline: siguen el flujo y estan contenidos dentro de elementos de
bloque. (un enlace).

47. El modelo de caja (II)
Las propiedades más importantes de una caja son: width
(ancho), height (alto), padding (relleno), border (borde) y
margin (margen).

48. El modelo de caja (III)
Los elementos que forman una caja son (más a menos prioridad):
Contenido (content): se trata del componente principal del elemento.
Relleno (padding): esta formado por el espacio libre (opcional) entre el
contenido y el borde que lo encierra (opcionalmente).
Borde (border): línea que encierra completamente el contenido y el
relleno.
Imagen de fondo (background image): imagen que se muestra por
debajo del contenido.
Color de fondo (background color): color que rellena el espacio por el
contenido y su posible relleno.
Margen (margin): espacio libre entre la caja y las demas cajas
adyacentes.

49. Anchura ( width )
Width (anchura)
Establece la anchura de un elemento y no admite valores
negativos.
El siguiente ejemplo establece el valor de anchura del <div>
lateral:
#lateral { width: 200px; }
<div id="lateral">
...
</div>

50. Altura ( height )
Height (altura)
Establece la altura de un elemento y no admite valores
negativos.
El siguiente ejemplo establece el valor de la altura del <div> de
cabecera:
#cabecera { height: 60px; }
<div id="cabecera">
....
</div>

51. Margen (margin)
CSS define 4 propiedades para controlar cada uno de los
margenes horizontales y verticales de un elemento.
margin-top: margen superior.
margin-right: margen derecho.
margin-botton: margen inferior.
margin-left: margen izquierdo.
# cabecera {
margin: 10px 5px 10px 5px;
}

52. Relleno ( padding )
Al igual que el margin, el padding también dispone de 4
propiedades para controlar los espacios de relleno
horizontales y verticales de un elemento.
padding-top: relleno superior.
padding-right: relleno derecho.
padding-botton: relleno inferior.
padding-left: relleno izquierdo.
Comparte las mismas características que la propiedad Margin.

53. Clases (.clase)
● Esta orientada para seleccionar elementos concretos de la página.
● Lo que se hace es asignar un atributo class especificos a los
elementos que se quieren seleccionar y en la hoja de estilos se
utiliza el selector de clase.
● El selector esta formado por un signo de punto (.) y el nombre del
atributo class que se quiere seleccionar.
.especial { color: red; }
Este ejemplo de clase define el color de la fuente de color rojo.

54. ID (#identificador)
● La principal diferencia entre este selector y el selector de
clase tiene que ver con HTML y no CSS.
● El atributo "id" debe ser único, de forma que 2 elementos
diferentes no pueden tener el mismo valor de ir.
● Comparten las mismas características, salvo por el símbolo
que utiliza ( almohadilla # ).
#especial { color: red; }
<p>Primer párrafo</p>
<p id="especial"> Segundo párrafo</p>
<p>Tercer párrafo</p>

55. Clases vs ID
Por tanto, para aplicar un mismo estilo a un sólo
elemento utilizamos el selector de "id" y para
varias estilos elementos diferentes el selector de
"clase".
.importante { color:red; } (Clase)
#importante { color:red; } (ID)

56. Ejercicio CSS
● Añadir un color de fondo
● Cambiar el tipo de fuente por defecto, de algún
elemento (h1,etc)
● Definir un color para los enlaces
● Definir una decoración para :hover de algún enlace
La imaginación al poder

57. Herramientas para la depuración
Firebug:
https://addons.mozilla.org/es-ES/firefox/addon/1843
Web Developer:
https://addons.mozilla.org/es-ES/firefox/addon/60
YSlow (Why slow?):
https://addons.mozilla.org/es-ES/firefox/addon/5369
TAW3 (Test de Accesibilidad Web)
http://www.tawdis.net
Otras: MeasureIt, ColorZilla y WebDeveloper

58. Se nos acabó el tiempo...
Si os habéis quedado con alguna duda no os preocupéis, podéis
preguntarnos cualquier cosa a través del Campus Virtual de la
Asociación de Webmasters:
http://webmastergranada.es/formacion/
Y también para profundizar más:
http://www.w3schools.com/

59. Esto ha sido todo...
¡¡MUCHAS GRACIAS!!