Buenas prácticas en XHTML, CSS y Accesibilidad

Buenas prácticas en
XHTML, CSS y Accesibilidad
Borja Delgado
Madrid · Jueves 10 Septiembre 2009

FRONTDAYS www.frontdays.com

jueves 10 de septiembre de 2009

Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS

Introducción



Introducción
La programación ajustada a estándares no es una complicada metodología de
desarrollo, ni una forma totalmente nueva de programar.

Se trata de conocer y aplicar unas reglas muy simples en su concepto, aunque algunas
de las cuales resulten de complicada aplicación.

Frente a lo que opina mucha gente, la programación ajustada a estándares nos
proporcionan ventaja competitiva y reduce costes, ya que nos proporciona ciertas
ventajas de las que hablamos en el punto siguiente.

Borja Delgado | orange@domestika.org



Ventajas del desarrollo ajustado a estándares
Universalidad: Desarrollando ajustado a estándares, no será necesario cambiar nuestro
HTML para que se adapte a multitud de plataformas (Windows, Mac, un PDA, un lector
de pantalla, etc ...).

Portabilidad: Completando el punto anterior, bastará con que cambiemos un archivo
CSS para que podamos adaptar nuestro HTML a una gran variedad de dispositivos, sin
necesidad de reprogramar la web entera.

Reducción de Peso: El peso de las páginas se reducirá considerablemente

Mejora de la Indexación en Buscadores: El hacer nuestro código más
semántico (entre otras cosas) facilitará el proceso de la optimización del
posicionamiento en buscadores.

Accesibilidad: El correcto desarrollo de páginas web facilitará el poder realizar una
página accesible




Estándares web
Internet es un gran medio de comunicación en el que se pueden utilizar múltiples
lenguajes.

El organismo encargado de dictar las reglas de estos lenguajes es el Wold Wide Web
Consortium (W3C), estas reglas se recogen en unos documentos llamados
especiﬁcaciones o estándares.

La Referencia del lenguaje (si está bien o mal), siempre tiene que ser la especiﬁcación,
nunca un navegador en concreto.




Programando
• WYSIWYGʼs
• Editores de código
• Pruebas




HTML / XHTML



Orígenes del lenguaje HTML
El HTML es un lenguaje concebido para transmitir información. Pero el auge de Internet
le llevó a dar cabida a funciones para las que no fué concebido inicialmente.

La permisividad de los navegadores en la interpretación del código, unido a los entornos
de desarrollo WYSIWYG, permitió que, prácticamente sin ningún conocimiento de
programación, se pudiera publicar una página web que se mostrara de forma aceptable
en un navegador.

La ventaja que esto nos ha ofrecido es acercar internet a la gente, posibilitando que se
produjera su gran expansión.

Pero en cambio, la poca estructuración del lenguaje mostraba carencias cuando se
trataba de desarrollar aplicaciones ﬁables y seguras.




XML + HTML = (X)HTML
Para tratar de dar una mayor consistencia al HTML se formuló un nuevo estándar
denominado (X)HTML, basado en otros dos: HTML y XML.

El (X)HTML es un lenguaje muy similar al HTML, las etiquetas utilizadas son
prácticamente las mismas, pero que va a presentar una serie de características
heredadas del XML, más estrictas en cuanto a sintaxis del lenguaje, pero que harán que
los sitios web sean más ﬁables y con menos errores.

A su vez el lenguaje (X)HTML es extensible, esto es, le podemos incorporar nuevas
etiquetas y atributos.




Deﬁnición de tipo de documento
El DTD de un documento recoje sus características y formato, es un marco de referencia
donde se reúnen las reglas que debe cumplir dicho documento.

En (X)HTML el DTD se indica mediante la etiqueta DOCTYPE. El W3C mantiene en
vigor 3 tipos distintos: Estricto, Transicional y Frameset.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">




Reglas de sintaxis
• Obligación de mantener una etiqueta de apertura y una de cierre.
• Las etiquetas deben cerrarse y abrirse en el orden correcto.
• Todas las etiquetas de XHTML deben estar en minúsculas.
• Los atributos deberán presentar sus valores entre comillas.
• Los atributos de las distintas etiquetas no podrán minimizarse, o lo que es lo mismo,
aparecer sin un valor.

• Los distintos elementos dentro de la página XHTML se distinguirán de forma única en
el ámbito de su documento, mediante el atributo ID, en vez del antiguo NAME que se
abandona (excepto en formularios).

• El primer elemento deberá ser <html>, y deberán presentar a su vez un <head> y un
<body> (ambos correctamente cerrados posteriormente).

• Asimismo el elemento <title> debe ser el primer elemento dentro de <head>.



Código con significado. La web semántica
Cuando se hace referencia a código con significado o a semántica web, realmente se
pretende que el código que forma nuestras webs ofrezca la máxima información posible,
sin más ayuda que el propio código.

El primer paso consiste en utilizar las etiquetas para aquellos usos para los que fueron
pensadas, por ejemplo si queremos introducir un titular en el código será interesante
utilizar la etiqueta <h1>, en lugar de un simple <span> con una clase asociada, que le
proporcione "visualmente", la importancia que requiere.

A su vez, para multitud de etiquetas existen infinidad de atributos que ayudan a aportar
información adicional sobre los elementos, como los alt de las etiquetas <img>, o los
lang de los enlaces.

La propia estructura del XHTML influye también en la semántica. Será interesante
posicionar primero aquellos elementos de información más relevante.




Etiquetas problemáticas
• Titulares
• Formularios
• Tablas




Algunos temas relacionados
• CMSʼs
• Frameworks
• Patrones
• Microformatos
• HTML5




Separación de contenido y presentación
Uno de los aspectos más importantes respecto a la programación con estándares es la
separación del contenido y la presentación del documento.

Dentro de la información relativa a la presentación de un documento hacemos referencia
a cualquier tipo de dato que no aporta nada al contenido propiamente dicho: estructura
visual de la página, tipos de fuentes utilizadas, colores, espacios, etc ...

Era práctica común programando en HTML utilizar etiquetas relativas a formato o
utilizarlas de forma errónea.

Como regla general podemos decir que toda la estructura e información del documento
debe estar contenida en la página (X)HTML, y el resto debe estar fuera de ella (por
ejemplo estilos y scripts).

La presentación del documento se realizará mediante CSS (Cascading Style Sheets),
que es el lenguaje mediante el cual se deben controlar todos los detalles relativos al
formato de una página web.



CSS




Herencia y cascada
Herencia

Las reglas deﬁnidas en las hojas de estilos se "heredan" de "padres a hijos" dentro de la
estructura en árbol de los elementos de un documento.

Cascada

CSS nos brinda la posibilidad de aplicar en cascada varias hojas de estilo, que se
muestran en un sólo resultado.

Reglas de preferencia

Los estilos declarados tienen un orden de prioridad en función de dónde y cómo han sido
declarados.

Hojas de estilo de autor, de usuario y de navegador.
Hojas de estilo en línea, incorporadas y enlazadas (y su orden de declaración).
Hojas de estilos persistentes, preferidas y alternativas.



Incorporar estilos
En línea

Se definen los estilos dentro de la propia etiqueta HTML a través del atributo STYLE.

Hojas de estilo incorporadas

Se especifica una hoja de estilo para un documento, para ello se definen las reglas
dentro de la etiqueta STYLE situada en el HEAD del documento.

Hojas de estilo enlazadas

En este caso vamos a definir una hoja de estilo externa que contendrá las reglas de
estilos que hay que aplicar.

Se pueden enlazar hojas de estilo a través de la etiqueta LINK o de la directiva IMPORT.




Atributos de las hojas de estilo

Para la etiqueta STYLE se pueden definir 5 atributos:

• type (obligatorio): Lenguaje de la hoja de estilos.
• media (opcional): Ámbito de aplicación de la hoja de estilos.
• title (opcional): Información adicional sobre la hoja de estilos.
• lang (opcional): Invalida en lenguaje base de un documento.
• dir (opcional): Define la direccionalidad del texto.

NOTA: Los comentarios al comienzo y final de la etiqueta STYLE no son válidos en
XHTML (1.0 strict)




Selectores CSS. Concepto y tipos
Una regla CSS tiene la siguiente estructura:

Un selector es la parte de una regla de estilo que especiﬁca sobre qué elementos se va
aplicar dicha regla.

Podemos encontrar varios tipos de selectores y formas de combinarlos, los más
comunes son estos:

• Etiquetas HTML: p {}
• Selectores descendientes: p em {}
• Selectores de clase: div.noticia
• Selectores ID: #cabecera
• Pseudo-clases de vínculo: a:hover :link :visited :active


Selectores CSS. Metodología

Los selectores y sus posibles combinaciones otorgan al CSS una amplísima potencia a
la hora de seleccionar objetivos para aplicar reglas de estilo.

La metodología de uso de selectores y su nomenclatura es un tema a tener muy
presente a la hora de programar CSS.

Como apunte importante al respecto diremos que el uso de selectores ID se realizará
cuando únicamente exista un elemento en toda la página web al que aplicar el estilo
declarado (ya que el ID debe ser único en la página.

Si queremos declarar un estilo que va a ser utilizado por varios elemento en una página
lo haremos a través de etiquetas HTML, selectores descendientes o clases.

Hay que tener en cuenta la especiﬁcidad de un selector.




Flujo

Disposición natural en la que se posicionan 2 elementos sucesivos dentro del HTML.

• Elementos en bloque: las cajas se sitúan unas a continuación de las otras, en
disposición vertical.

• Elementos en línea: las cajas se sitúan unas al lado de las otras, en disposición
horizontal.




Display

La propiedad display de un elemento deﬁne cómo va a ser su comportamiento a nivel de
presentación en página. Los tipos principales de display son dos:

Bloque

Aquellos elementos que son tratados visualmente como bloques con estructura
independiente.

Un elemento de bloque comienza siempre en una línea nueva.

En línea

Aquellos elementos del documento que no forman nuevos bloques, el contenido es
distribuido en líneas. Se sitúan unos a continuación de otros.




Modelo de cuadro (boxmodel)

El modelo de cuadro es una herramienta visual de presentación. Todos los
elementos de un documento están incluidos dentro de un cuadro con una serie de
características comunes.

Las propiedades que podemos deﬁnir en los cuadros son las siguientes:




Posicionamiento CSS

• static: Valor por defecto de la propiedad position, mantiene al cuadro en flujo.

• absolute: Elimina la caja del flujo del documento y la sitúa en relación a su primer
elemento ascendente con posición absoluta o relativa. El resto de elementos se
comportan como si la caja no existiera.
Definimos su posición estableciendo valores para top|right|bottom|left.

• relative: Elimina la caja del flujo del documento visualmente y la sitúa en relación a su
primer elemento ascendente con posición absoluta o relativa. El resto de elementos se
comportan como si la caja estuviera en su posición original.
Definimos su posición añadiendo espacio para top|right|bottom|left.

• fixed: Su posición permanece fija en la pantalla aunque se mueva el documento.
Definimos su posición estableciendo valores para top|right|bottom|left. No está
soportada por Explorer 6.




Float

Float es una propiedad en si misma y no un valor de la propiedad position.

Un elemento flotante está fuera del flujo, desplazado hacia el lado que se haya definido.

El resto de elementos de la página saben de su presencia e interactúan con él.

Sólo el contenido del elemento situado a continuación, según el código HTML, se sitúa
"envolviéndolo". Se puede evitar este comportamiento utilizando la propiedad clear.




Técnicas CSS

• Centrado por CSS (horizontal y vertical)
• Alto 100%
• Reemplazo de imágenes
• Mailings con CSS
• Tipografía




Multinavegador

• Metodología de implementación.
• Problemas más comunes.




Accesibilidad



Accesibilidad

• Concepto
• Niveles de accesibilidad
• Pautas
• Implementación de tecnologías no accesibles




Gestión de proyectos



Gestión de proyectos

FUNCIONES

• Objetivos
• Contenido y Funciones
• Diseño (Gráﬁco y de Aplicación)
• Desarrollo (Front.End - Back.End - Integración)
• Auditoría
• Actualizaciones y nuevos desarrollos
• Formación

PERFILES

• Departamento Comercial
• Gestión de Cuentas
• Creatividad y Diseño Gráﬁco
• Programación Front.End
• Programación Back.End



Gestión de proyectos. Objetivos

• Deﬁnir adecuadamente los objetivos relativos a accesibilidad y el grado de compromiso
con los mismos.
• Explicar las consecuencias que dichos objetivos tienen para el desarrollo del proyecto
(importante en acciones comerciales).
• Deﬁnir niveles de soporte y escala de degradaciones.




Gestión de proyectos. Contenidos y funciones

• Analizar la utilización e implementación de tecnologías no accesibles.
• Esquema de desarrollo de las futuras maquetas.




Gestión de proyectos. Diseño

GRÁFICO

• Comprobar el cumplimiento de los puntos de accesibilidad.
• Plantear alternativas realizables.

APLICACIÓN

• Analizar las necesidades que el análisis de maquetas tienen respecto a las bases de
datos y gestores de contenidos (sobre todo WYSIWYG).
• Analizar e implementar posible redundancia de funciones llevadas a cabo con
tecnologías no accesibles.
• Analizar requerimientos en la lógica de negocio dependientes de las maquetas.
• Analizar posibles requerimientos en cuanto a directrices sobre URLs o sesiones.




Gestión de proyectos. Desarrollo

FRONT.END

• Desarrollo de maquetas maestras según las necesidades de la aplicación.

BACK.END

• Desarrollo de la aplicación.

INTEGRACIÓN

• Integración de maquetas en el sistema. Posibilidad de sesiones de trabajo conjuntas.




Gestión de proyectos. Auditoría

• Análisis del código de las páginas ﬁnales.
• Detección de problemas.
• Planteamiento de soluciones.




Gestión de proyectos. Actualizaciones

• Deﬁnir los mecanismos de actualización de contenidos.
• Deﬁnir los mecanismos de desarrollo de nuevas funcionalidades.




Gestión de proyectos. Formación

CONSULTORÍA

• Reuniones con el cliente y/o creación de documentación.
• Asesoría sobre objetivos, implicaciones y requerimientos.

ASESORÍA

• Pequeñas sesiones de formación o reuniones de trabajo acerca de aspectos concretos
del proyecto.
• Metodología de integración y desarrollo.

CURSOS

• Acciones formativas regladas.
• Metodología de desarrollo de nuevas funciones y actualización de contenidos.



¡Muchas gracias por venir!


FRONTDAYS
Los mejores cursos en desarrollo frontend
impartidos por los mejores profesionales

www.frontdays.com


Buenas prácticas en XHTML, CSS y Accesibilidad

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Buenas prácticas en XHTML, CSS y Accesibilidad

Buenas prácticas en XHTML, CSS y Accesibilidad