XHTML + CSS

Raúl Jiménez Ortega - rjimenez@webmastersmalaga.com

Programa

Entrega de documentación y presentación.Introducción HistóricaAccesibilidadXHTML 1.0

1er descanso AmayaEjercicio

2º descanso CSSFirebug y validaciones

Presentación

Asociación de Webmasters de Málaga

http://www.webmastersmalaga.com

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.

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.

Introducción Histórica

¿Qué es XHTML y para qué se usa?

eXtensible HiperText Markup LanguageLenguaje 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.

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

XHTML ó HTML 4.0HTML 4.01

<img alt="Portrait Murakami Haruki"src="/images/murakami.jpg">

<p lang="fr"> Je levai la tête pour regarder les étoiles. Leur vue apaisa peu à peu les battements de mon coeur.</p>

<p> <cite class="title"> Chroniques de l'oiseau à ressort </cite>- <cite class="author"> Haruki Murakami </cite></p>

XHTML 1.0<img alt="Portrait Murakami Haruki"src="/images/murakami.jpg" />

<p xml:lang="fr"> Je levai la tête pour regarder les étoiles. Leur vue apaisa peu à peu les battements de mon coeur.</p>

<p> <cite class="title"> Chroniques de l'oiseau à ressort </cite>- <cite class="author"> Haruki Murakami </cite></p>

XHTML - HTML 4.0Hay 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).

Accesibilidad

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

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.

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

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.

Accesibilidad - Técnicas1. 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.

XHTML 1.0

Conceptos y reglas básicas

Conceptos básicosEtiquetas: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>

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" />

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>

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>

Reglas básicasLa 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>

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" />

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.

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.

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.

Listas desordenadas e Imagen

Ejemplo de lista desordenada: Código:<ul> <li>Elemento 1</li> <li>Elemento 2</li> ...</ul>

Se verá así:● Elemento 1● Elemento 2

Ejemplo de imágen:

Código:<img src="valor" alt="valor" />

● src: Indica la ruta donde se

encuentra la imagen.

● alt: Es un texto alternativo que se usará para describir el lo que aparece en la imagen.

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.

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

Ventajas frente a otras alternativas:● Adobe Dreamweaver● MS Frontpage● MS Word

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,...)

Ejercicio

CSS

Conceptos y reglas básicas

Introducción

Introducción

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

¿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.

Ventajas del CSSLa 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

¿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.

¿Cómo funciona CSS? (II)

Podemos inscrutarlo en el mismo archivo XHTML.

Se utiliza para webs poco complejas.

<style type="text/css"> <!-- body,td,th { font-family: Arial; font-size: 12px; color: #FFE6F5; } --></style>

¿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>

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; }

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.

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>

Conceptos básicosRegla: 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,...)

Regla CSS

Comenzando

El color de primer planoLa 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 fondoPodemos 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.

ContinuamosFuenteHay 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.

ContinuamosTextoPara 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;}

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).

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).

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.

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>

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>

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; }

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.

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.

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>

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)

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

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

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/

Esto ha sido todo...

¡¡MUCHAS GRACIAS!!