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

Triple presión Uso de estándares: Accesibilidad: 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 Noviembre 2007

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 Noviembre 2007

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 Noviembre 2007

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 Noviembre 2007

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 Noviembre 2007

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 Noviembre 2007

Buenas prácticas Codificación semántica: Chequeo: 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 Noviembre 2007

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 Noviembre 2007

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 Noviembre 2007

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 Noviembre 2007

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 Standarsd Solutions. 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 Abdrew Kirkpatrick. Web Accessibility: Web Standards and Regulatory Compliance. Berkeley: Friendsof, 2006 Jesús Tramullas (coord.). Tendencias en documentación digital. Gijón: Trea, 2006 Ed Tittel et al. Mastering XHTML. San Francisco: Sybex, 2002. Christopher Walton. Agency and the Semantic Web. New York: Oxford, 2007 Jeffrey Zeldman. Designing with web standards (second edition). Berkeley: New Riders, 2007 L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales Noviembre 2007

Sitios web significativos The Web Standard Project http://www.webstandards.org/ A List Apart http://www.alistapart.com/ CSS Zen Garden http://www.csszengarden.com/ Microformats http://microformats.org/ L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales Noviembre 2007

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 Noviembre 2007

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 Noviembre 2007

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

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 Noviembre 2007

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 Noviembre 2007