Calidad del código fuente en páginas web

1. Calidad del código fuente en páginas web Lluís CodinaUPFNoviembre 2007Máster Interuniversitario UB/UPF Gestión en Contenidos Digitales

2. Triple presión • Uso de estándares: • Procesamiento robusto • Compatibilidad • Protección de la inversión • Accesibilidad: • Web sin barreras • Ampliación de la audiencia • Imperativo legal • Web semántica / Hipertexto semántico: • Procesamiento “inteligente” • Nueva generación web (¿la web 3.0?) L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

3. La paradoja • El respeto por los estándares implica: • La creación de páginas se aleja de los usuarios • Deben ser conscientes de aspectos técnicos que antes podían obviar • Una posible solución: • Impedir que editen código fuente • La contradicción: • Pero el software WYSIWIG produce errores • Obliga a actualizar el software • Problemas generalizados con editores anteriores al año 2005 • Conversión retrospectiva • Dificultades técnicas • Altos costes en tiempo o en dinero (o ambos) L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

4. En síntesis • Imperativo para nuevos sitios nuevos: • Asegura la inversión, facilita el mantenimiento, etc. (múltiples ventajas, algunas ya señaladas) • En realidad sería irracional no crear sitios nuevos que cumplan los estándares • Recomendable para sitios anteriores: • Al menos: planificar la conversión retrospectiva L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

5. Dimensiones en la calidad del código fuente • D1.Código libre de errores: documentos bien formados • D2a.Separación de contenido y presentación: documentos compatibles y fácilmente transformables • D2b.Buenas prácticas: documentos con marcado semántico L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

6. Código libre de errores • Casuística (ejemplos): • Elementos no cerrados • Elementos mal anidados • Ausencia de elementos obligatorios • Uso de elementos depreciados • Estándares recomendados: • XHTML Strict • CSS • Chequeo: • Editores de páginas web • Validadores en línea • Analizadores (p.e. DigiDoc Spider) L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

7. Separación de contenido y presentación • Problemas típicos: • Uso de tablas para estructurar la presentación (layout) • Uso de elementos semánticos para dar formato (hx) • Estándar recomendado: • XHTML: contenido • CSS: presentación • Chequeo: • Editores • Validadores en línea • Analizadores en línea L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

8. Buenas prácticas • Codificación semántica: • Uso de metadatos. Ejemplos: • Elementos: title, meta, DC, … • Atributos: id, alt, cite, class, name, rel, rev, … • Metadatos vinculados: RDF • Marcado semántico. Ejemplos: • abbr, address, acronym, blockquote, … • h1, h2, ... • Chequeo: • Análisis automático • Análisis “manual” L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

9. Conclusiones - I • El código fuente, y no solamente su interpretación por un agente de usuario, es un componente de la calidad de un sitio. • Tecnologías implicadas: • Editores de páginas • Sistemas de gestión de contenidos • Agentes de usuario L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

10. Conclusiones - II • Ventajas generales (otra visión): • Contenido compatible con: • Diferentes agentes de usuario • Futuros agentes de usuario • Futuras formas de procesamiento y explotación • Extraordinaria facilidad de mantenimiento • Optimización SEO • Accesibilidad • Para el profesional: • Plus de competitividad diferencial L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

11. Conclusiones - III • Requerimientos: • Familiaridad con los estándares web: • Lenguajes de marcado (XML, XHTML) • Formatos de presentación (XSL, CSS) • Metadatos • Validación • Uso de tecnologías adecuadas: • Producen código fuente sin errores • Analizan el código fuente • Separan contenido de presentación • Políticas de control de calidad: • Libros de estilo • Auditorias y evaluación L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

12. Fuentes: Selección básica • John Allsopp. Microformats: Empowering your markup for Web 2.0. Berkeley: Friendsof, 2007 • Rachel Andrew & Dan Shafer. HTML Utopia: Designing without tables using CSS. Collingwood: Sitepoint, 2006 • Andy Budd. CSS Mastery: Advanced Web StandarsdSolutions. Berkeley: Friendsof, 2006 • Nigel Chapman; Jenny Chapman. Web Design: A complete introduction.Chichester: Wiley, 2006 • Paul Haine. HTML Mastery: Semantics, Standars, and Styling. Berkeley: Friendsof, 2006. • Rob Huddleston. XML. Hoboken: Wiley, 2007 • Shirley Kaiswer. Deliver First Class Web Sites: 101 Essential checklists. Collingwood: Sitepoint, 2006 • AbdrewKirkpatrick. Web Accessibility: Web Standards and Regulatory Compliance. Berkeley: Friendsof, 2006 • JesúsTramullas(coord.). Tendencias en documentación digital. Gijón: Trea, 2006 • EdTittelet al. Mastering XHTML. San Francisco: Sybex, 2002. • Christopher Walton. Agency and the Semantic Web. New York: Oxford, 2007 • Jeffrey Zeldman. Designingwith web standards(secondedition). Berkeley: New Riders, 2007 L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

13. Sitios web significativos • The Web Standard Projecthttp://www.webstandards.org/ • A List Aparthttp://www.alistapart.com/ • CSS Zen Gardenhttp://www.csszengarden.com/ • Microformatshttp://microformats.org/ L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

14. Anexo 1: Elementos depreciados • applet • basefont • center • dir • font • isindex • menu • s • strike • u Alternativas: usar elementos XHTML o CSS http://www.codehelp.co.uk/html/deprecated.html L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

15. Anexo 2: Atributos depreciados • align • alink • background • bgcolor • clear • compact • color • border • hspace • Link • name • noshade • nowrap • size • start • text • type • value • vlink • width • vspace Alternativas: CSS for deprecated attributes http://www.punkchip.com/2007/02/css-deprecated-attributes-1/ L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

16. Anexo 3: Elementos semánticos • hn • label • legend • link • meta • option • q • select • thead • tfoot • title • abbr • acronym • address • blockquote • caption • cite • code • dd • dfn • dl • dt L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

17. Anexo 4: Atributos semánticos • alt • cite • class • hreflang • id • label • lang • longdesc • rel • rev • summary • title L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

18. Anexo 4: Microformatos • hCalendar • hCard • rel-license • rel-nofollow • rel-tag • VoteLinks • XFN • XMDP • XOXO (“ecks oh ecks oh”) Lista de microformatos: http://microformats.org/wiki/Main_Page L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales