buenas prácticas en xhtml, css y accesibilidad

FRONTDAYS

Buenas prácticas enXHTML, CSS y AccesibilidadBorja DelgadoMadrid · Jueves 10 Septiembre 2009

www.frontdays.com

jueves 10 de septiembre de 2009

http://www.frontdays.com


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 | [email protected]


mailto:[email protected]



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 especificaciones o estándares.

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






• WYSIWYGʼs

• Editores de código

• Pruebas

Programando






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 fiables 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 fiables y con menos errores.

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






Definició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">



http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd

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>. Borja Delgado | [email protected]





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.Borja Delgado | [email protected]





CSS






Herencia y cascada

Herencia

Las reglas definidas 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.Borja Delgado | [email protected]





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 especifica 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 especificidad 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 define 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 definir 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áfico 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áfico• Programación Front.End• Programación Back.End






Gestión de proyectos. Objetivos

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

• Definir 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 finales.

• Detección de problemas.

• Planteamiento de soluciones.






Gestión de proyectos. Actualizaciones

• Definir los mecanismos de actualización de contenidos.

• Definir 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

www.frontdays.com

Los mejores cursos en desarrollo frontendimpartidos por los mejores profesionales




buenas prácticas en xhtml, css y accesibilidad

Technology