Buenas prácticas en XHTML, CSS y Accesibilidad

4,091 views

Published on

Presentación usada en el curso "Buenas prácticas en XHTML, CSS y Accesibilidad" impartido por Borja Delgado en Madrid el jueves 10 de Septiembre de 2009.

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,091
On SlideShare
0
From Embeds
0
Number of Embeds
155
Actions
Shares
0
Downloads
192
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Buenas prácticas en XHTML, CSS y Accesibilidad

  1. 1. 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
  2. 2. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS Introducción jueves 10 de septiembre de 2009
  3. 3. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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 jueves 10 de septiembre de 2009
  4. 4. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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 Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  5. 5. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  6. 6. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS Programando • WYSIWYGʼs • Editores de código • Pruebas Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  7. 7. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS HTML / XHTML jueves 10 de septiembre de 2009
  8. 8. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  9. 9. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  10. 10. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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"> Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  11. 11. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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 | orange@domestika.org jueves 10 de septiembre de 2009
  12. 12. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  13. 13. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS Etiquetas problemáticas • Titulares • Formularios • Tablas Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  14. 14. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS Algunos temas relacionados • CMSʼs • Frameworks • Patrones • Microformatos • HTML5 Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  15. 15. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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 | orange@domestika.org jueves 10 de septiembre de 2009
  16. 16. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS CSS Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  17. 17. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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 | orange@domestika.org jueves 10 de septiembre de 2009
  18. 18. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  19. 19. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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) Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  20. 20. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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 jueves 10 de septiembre de 2009
  21. 21. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  22. 22. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  23. 23. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  24. 24. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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: Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  25. 25. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  26. 26. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  27. 27. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS Técnicas CSS • Centrado por CSS (horizontal y vertical) • Alto 100% • Reemplazo de imágenes • Mailings con CSS • Tipografía Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  28. 28. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS Multinavegador • Metodología de implementación. • Problemas más comunes. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  29. 29. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS Multinavegador • Metodología de implementación. • Problemas más comunes. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  30. 30. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS Accesibilidad jueves 10 de septiembre de 2009
  31. 31. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS Accesibilidad • Concepto • Niveles de accesibilidad • Pautas • Implementación de tecnologías no accesibles Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  32. 32. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS Gestión de proyectos jueves 10 de septiembre de 2009
  33. 33. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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 Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  34. 34. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  35. 35. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  36. 36. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  37. 37. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  38. 38. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS Gestión de proyectos. Auditoría • Análisis del código de las páginas finales. • Detección de problemas. • Planteamiento de soluciones. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  39. 39. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS Gestión de proyectos. Actualizaciones • Definir los mecanismos de actualización de contenidos. • Definir los mecanismos de desarrollo de nuevas funcionalidades. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  40. 40. Buenas prácticas en XHTML, CSS y Accesibilidad FRONTDAYS 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. Borja Delgado | orange@domestika.org jueves 10 de septiembre de 2009
  41. 41. ¡Muchas gracias por venir! jueves 10 de septiembre de 2009
  42. 42. FRONTDAYS Los mejores cursos en desarrollo frontend impartidos por los mejores profesionales www.frontdays.com jueves 10 de septiembre de 2009

×