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

Lluís CodinaUPF

Noviembre 2007Máster Interuniversitario UB/UPF Gestión en Contenidos Digitales

Calidad del código fuente en páginas web

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

Noviembre 2007L. Codina : Máster Interuniversitario UB/UPF Gestión de Contenidos Digitales

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)


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ándaresRecomendable para sitios anteriores:

Al menos: planificar la conversión retrospectiva


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


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)


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


Buenas prácticas

Codificación semántica:1. Uso de metadatos. Ejemplos:

1. Elementos: title, meta, DC, …2. Atributos: id, alt, cite, class, name, rel, rev, …3. Metadatos vinculados: RDF

2. Marcado semántico. Ejemplos:1. abbr, address, acronym, blockquote, …2. h1, h2, ...

Chequeo: Análisis automático Análisis “manual”


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


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


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


Fuentes: Selección básica

1. John Allsopp. Microformats: Empowering your markup for Web 2.0. Berkeley: Friendsof, 2007

2. Rachel Andrew & Dan Shafer. HTML Utopia: Designing without tables using CSS. Collingwood: Sitepoint, 2006

3. Andy Budd. CSS Mastery: Advanced Web Standarsd Solutions. Berkeley: Friendsof, 20064. Nigel Chapman; Jenny Chapman. Web Design: A complete introduction. Chichester:

Wiley, 20065. Paul Haine. HTML Mastery: Semantics, Standars, and Styling. Berkeley: Friendsof, 2006.6. Rob Huddleston. XML. Hoboken: Wiley, 20077. Shirley Kaiswer. Deliver First Class Web Sites: 101 Essential checklists. Collingwood:

Sitepoint, 20068. Abdrew Kirkpatrick. Web Accessibility: Web Standards and Regulatory Compliance.

Berkeley: Friendsof, 20069. Jesús Tramullas (coord.). Tendencias en documentación digital. Gijón: Trea, 200610. Ed Tittel et al. Mastering XHTML. San Francisco: Sybex, 2002.11. Christopher Walton. Agency and the Semantic Web. New York: Oxford, 200712. Jeffrey Zeldman. Designing with web standards (second edition). Berkeley: New Riders,

2007


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/


Anexo 1: Elementos depreciados

appletbasefontcenterdirfontisindexmenusstrikeu


Alternativas: usar elementos XHTML o CSShttp://www.codehelp.co.uk/html/deprecated.html

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 attributeshttp://www.punkchip.com/2007/02/css-deprecated-attributes-1/

Anexo 3: Elementos semánticos

abbracronymaddressblockquotecaptioncitecodedddfndldt


• hn• label• legend• link• meta• option• q• select• thead• tfoot• title

Anexo 4: Atributos semánticos

altciteclasshreflang id label lang longdescrelrevsummarytitle


Anexo 4: Microformatos

hCalendarhCardrel-license rel-nofollow rel-tag VoteLinks XFN XMDP XOXO (“ecks oh ecks oh”)


Lista de microformatos:http://microformats.org/wiki/Main_Page

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

Documents