Calidad del código fuente en páginas web

Presentación del tema: "Calidad del código fuente en páginas web"— Transcripción de la presentación:

1 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

2 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

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

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

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

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

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

8 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

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

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

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

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

13 Sitios web significativos
The Web Standard Project A List Apart CSS Zen Garden Microformats L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales Noviembre 2007

14 Anexo 1: Elementos depreciados
applet basefont center dir font isindex menu s strike u Alternativas: usar elementos XHTML o CSS L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales Noviembre 2007

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 L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales Noviembre 2007

16 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

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

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