Construyendo la Web del mañana

Taller sobre Estándares Web W3C - Tenerife
Oficina W3C España,
Fundación CTIC,
Grupo Taro, E.S. de Ingeniería Informática (U. de La Laguna)
La Laguna, 25 Nov 2009

La Web sigue evolucionando

• Expandiéndose desde la Web de documentos (1.0)...
• ...hasta la Web Única...
  • para todo el mundo
  • desde cualquier dispositivo
  • de creadores y consumidores (2.0)
  • de los datos y servicios (3.0)
  • ...(X.0)

¿Web Única?

...ofrece la misma información y servicios a los usuarios, independientemente de quienes son, donde están, los sistemas que usan o la forma mediante la que se conectan

La Web sigue evolucionando

• Expandiéndose desde la Web de documentos (1.0)...
• ...hasta la Web Única...
  • para todo el mundo
  • desde cualquier dispositivo
  • de creadores y consumidores (2.0)
  • de los datos y servicios (3.0)
  • ...(X.0)

Una Web para todo el mundo

...acceso universal

Acceso independientemente de...

• ...características de los dispositivos de acceso
  • PCs, teléfonos, TVs, PDAs, dispositivos en electrodomésticos o en automóviles...
  • limitación en: ancho de banda, pantalla, colores, sonido...

...acceso independientemente de...

• ...las discapacidades de los usuarios
  • distinción de colores, ceguera, ...
  • dificultades de manejo de teclados, ratón, ...
  • dislexia, dificultades cognitivas o neurológicas, ...

...acceso independientemente de...

• ...diferencias culturales, geográficas o lingüísticas
  • sentidos de escritura, diferentes tipos de teclados, ...
  • formato de fechas, números de teléfono, códigos postales, IDs,...

¿Cómo se consigue esta Universalidad?

Accesibilidad Web

...personas con discapacidades puedan usar la Web

Diseñar para usuarios con discapacidad en un entorno ordinario es igual que diseñar para personas sin discapacidad en entornos extraordinarios

Ventajas para todos/as todo

• Información accesible a robots de indexación
  • Mejora semántica y de estructuración de contenidos
  • Independencia de dispositivo y multimodalidad
  • Mejora de la indexación

Información accesible a todos/as todo

Información accesible a todos/as todo

Información accesible a todos/as todo

Información accesible a todos/as todo

Información accesible a todos/as todo

Desde otros dispositivos...

Page has eleven headings and fifty-four linksWthree C Oficina Española dash Documentos y Guías Divulgativas dash Internet ExplorerHeading level oneLinkGraphicLogo oficina española del Wthree C Documentos y Guías Estás en colon List of one itembulletLink Oficina EspañolaList of one itembullet right double angle bracket Documentos y GuíasList endList endHeading level two Tarjetas de ReferenciaDefinition list of one itemLink Buenas Prácticas en Web Móvilequals Referencias a las Buenas Prácticas en Web Móvil, en forma de tarjetas resumidas con las pautas agrupadas por temáticasList endHeading level two GuíasDefinition list of three itemsLink Guías de referencia rápidaequals Guías de Referencia left paren imprimibles right paren destinadas a desarrolladores de tecnologías Wthree CLink Guías Breves de Tecnologías Wthree Cequals [...]

Página de la Oficina W3C España a través de Fangs (screen reader emulator)

No siempre se puede acceder a esa información

Sin Javascript

No siempre se puede acceder a esa información

Con Javascript /Sin Flash

¿Por dónde empiezo?

Utiliza los estándares de forma correcta

Valida el código de tu sitio

Valida tu HTML, XHTML, SMIL, MathML,...

Validador del HTML de tu sitio - OK

Validador del HTML de tu sitio - Informes

• Ayuda para solucionar los errores

No sólo el etiquetado (X)HTML de tu sitio

• Hojas de estilo (CSS),
• Canales RSS/Atom,
• Comprueba los enlaces rotos...
• ...mucho más

Di: yo uso correctamente los estándares

http://www.w3.org/QA/Tools/Icons

Estándares del W3C para la Accesibilidad

(WAI)

• WCAG (Pautas de Accesibilidad para Contenido Web)
• WAI-ARIA (Accesibilidad en Aplicaciones Enriquecidas)

WCAG

• Pautas de Accesibilidad para Contenido Web
• Recomendaciones y ayudas técnicas
• Basadas en estándares (HTML, CSS, etc.)
• WCAG 1.0: 1999 - WCAG 2.0 el estándar actual

WCAG: Relaciones con otras pautas

• ATAG (Pautas de Accesibilidad para Herramientas de Autor)
• UAAG (Pautas de Accesibilidad para Agentes de Usuario)

WAI-ARIA

(Control Árbol de Navegación)

Accessible Rich Internet Applications (Borrador)

• Aplicaciones y Contenido Web más accesible
  • Tipo de Widget (menú, barra de progreso, etc.)
  • Estructura de la página (regiones, grids, etc.)
  • Drag-and-drop
  • Navegación con teclado
• Contenido Dinámico
• Controles de interfaz de usuario complejos (Ajax, DHTML)
• Herramientas de JavaScript con soporte WAI-ARIA

Una Web para todos los públicos (I18n)

• Guiando a web ata o seu máximo potencial…
• Leading the Web to its Full Potential…
• Duent la Web al seu ple potencial…
• Het Web tot zijn volle potentieel ontwikkelen…
• Amener le Web vers son plein potentiel…
• Alle Möglichkeiten des Web erschließen…
• Οδηγώντας τον παγκόμιο ιστό στο μέγιστο των δυνατοτήτων του…
• Hogy kihasználhassuk a Web nyújtotta összes lehetőséget…
• वेब की सम्पूर्ण क्षमता के उपयोग की दिशा में अग्रणी…
• Sviluppare al massimo il potenziale del Web…
• 引发网络的全部潜能…
• 웹의 모든 잠재력을 이끌어 내기 위하여…
• Levando a Web em direcção ao seu potencial màximo…
• Pаскрывая весь потенциал Сети…
• Se till att Webben når sin fulla potential…
• Ohjaamassa Webin kehittymistä täyteen mittaansa…
• Webの可能性を最大限に導き出すために⋮
• لإيصال الشبكة المعلوماتية إلىأقصى إمكانياتها…
• להוביל את הרשת למיצוי הפוטנציאל שלה…
• 引發網絡的全部潛能⋮

Codificación incorrecta

La Web sigue evolucionando

• Expandiéndose desde la Web de documentos (1.0)...
• ...hasta la Web Única...
  • para todo el mundo
  • desde cualquier dispositivo
  • de creadores y consumidores (2.0)
  • de los datos y servicios (3.0)
  • ...(X.0)

Desde cualquier lugar, cualquier dispositivo

...desde cualquier lugar

Desde cualquier dispositivo

La estandarización es importante

Importancia del mercado Móvil

• Mercado extremadamente dinámico
• Muchos usuarios potenciales
• > 4.600M de conexiones de telefonía móvil en el mundo (finales 2009)
• ...67% de la población mundial

Fuente: ITU World Telecommunication/ICT Indicators Database. Datos de 2009 estimados

Mercado Móvil: las Economías Emergentes

• Implantación de redes inalámbricas
• Suscripciones de banda ancha móvil por regiones (ojo a Asia y Pacífico):

(ITU World Telecommunication/ICT Indicators Database) * Estimación

Limitaciones de los dispositivos móviles

(SVG Population Pyramid on iPhone)

• Debe tenerse en cuenta:
  • Pantalla reducida
  • Coste del tráfico de datos
  • Tiempo limitado del usuario
• El diseño debe adecuarse a un contexto
  • Sitios Web Móviles (Pautas)
  • Adecuación al dispositivo (DDR)
  • Geolocalización

La Iniciativa de Web Móvil

El acceso a la Web desde un dispositivo móvil tan simple, fácil y adecuado como el acceso desde un dispositivo de escritorio

(http://www.efront.com.au/web-design-melbourne/uploaded_images/iphone-776924.jpg)

Buenas Prácticas en Web Móvil - Introducción

http://www.w3c.es/Divulgacion/Tarjetas/MWBP

Mobile Web Best Practices 1.0:

• Estándar del W3C desde julio de 2008
• 60 buenas prácticas a tener en cuenta al crear contenido Web
• Explica las restricciones comunes de los móviles:
  • pantalla, teclado, red, ...
• Muestra el potencial de los dispositivos móviles:
  • personal, siempre disponible, en cualquier lugar...
• Audiencia: autores de sitios Web
  • desarrolladores, diseñadores, gestores de proyectos, testers
• ¡Resumidas en tarjetas!

Buenas Prácticas en Web Móvil - Ejemplo

La marca mobileOK

• Mi sitio tiene en cuenta las restricciones de los móviles
• Algunas buenas prácticas pueden ser comprobadas automáticamente
• Con un sólo click, desde el validador de mobileOK del W3C

El "Checker" de mobileOK

http://validator.w3.org/mobile

Categorías y severidad

• Los errores categorizados y con niveles de severidad
• pretende informar (y educar) de los problemas que afectan a la Web Móvil
• Soluciona primero los críticos

Cuantifica la mejora de tu sitio

• Valores para comparar con anteriores comprobaciones

Otras herramientas

• http://www.w3.org/2009/cheatsheet
• http://www.w3.org/Amaya
• http://qa-dev.w3.org/unicorn (alpha)
• http://www.w3.org/QA/Tools

La Web sigue evolucionando

• Expandiéndose desde la Web de documentos (1.0)...
• ...hasta la Web Única...
  • para todo el mundo
  • desde cualquier dispositivo
  • de creadores y consumidores (2.0)
  • de los datos y servicios (3.0)
  • ...(X.0)

La Web de los Creadores y Consumidores

Una Web de confianza

La Web sigue evolucionando

• Expandiéndose desde la Web de documentos (1.0)...
• ...hasta la Web Única...
  • para todo el mundo
  • desde cualquier dispositivo
  • de creadores y consumidores (2.0)
  • de los datos y servicios (3.0)
  • ...(X.0)

La Web de los Datos y Servicios

Lenguaje para personas no para máquinas

• Representa la información usando
  • lenguaje natural (español, inglés, chino,...),
  • gráficos, multimedia, diseños de las páginas
• Los humanos podemos procesar esta información (fácilmente)
  • Deducimos hechos desde información parcial
  • Creamos asociaciones mentales
  • Asimilamos información desde distintos sentidos
    • aunque, existen personas con ciertas limitaciones

Las máquinas son ignorantes

• La información parcial es inútil
• Hacer que ciertos recursos tengan sentido es difícil (multimedia)
• Describir analogías automáticamente es difícil
• La combinación de información automáticamente es difícil
  • ¿Es igual <b1:creator>, que <b2:author>, o que <b3:저자>?
  • Cómo combinar distintos niveles jerárquicos del XML

Evolución de la Web Tradicional...

• Los humanos podemos entenderlo (más o menos)

... a la Web Semántica

• Lo entendemos nosotros y las máquinas

¿Cómo funciona esto?

1. Se aplica el potencial de las URIs a conceptos
2. Modelado de las cosas reales (conceptos y sus relaciones)
   • no documentos ni tablas de las bases de datos
3. Se enlazan los datos entre sí
4. Se exponen

Web Semántica: Todo tiene un URI

• No digas "Nueva York"
  • ni "La Gran Manzana",
  • ni "New York",
  • ni "Nova York",
  • ni "Niujorkas",
  • ni "뉴욕",
  • ...

di http://sws.geonames.org/5128581/

Modelado estándar de los datos

• Hacer accesible lo que quieras ...
  • ... dentro de una empresa o entre varias ...
  • ... en la Web

Las Bases de Datos clásicas

El elemento de la Web Semántica

• Simplicidad y consistencia matemática
• Resource Description Framework (RDF)
  • RDF -> Datos
  • HTML -> Documentos
• Se puede codificar en XML

Ejemplo de tripleta RDF

• Sujeto: http://example.org/info.html
• Predicado o propiedad: http://purl.org/dc/terms/creator
• Valor: http://www.w3c.ec/Personal/Martin

La Web Semántica incluye tablas,...

...árboles

... cualquier cosa

Tecnologías de la Web Semántica

• Mecanismos específicos para las máquinas:
  • Evita la ambigüedad en la identificación (URI)
  • Describir los recursos (RDF)
  • Modelar ontologías (OWL)
  • Realizar búsquedas (SPARQL)
  • Expresar reglas y su intercambio (RIF)
  • establecer lógica, comprobaciones, certificados de confianza, etc.
• = Web 3.0 (Markoff, NYT Nov 2006)

Comenzando por lo sencillo: RDFa

• RDF incrustado en HTML

Presentación publicada por Oficina W3C España

  <p ... >
    Presentación publicada por 
      <span property="dc:publisher">
        Oficina W3C España
      </span>
  </p>        
    

Solución a la integración de Bases de Datos

• Las BBDD son diferentes en estructura y en contenidos
• Muchas aplicaciones necesitan manejar varias BBDD
  • Tras la fusión de compañías
  • Combinación de información administrativa (e-Government)
  • Investigación bioquímica, genética, farmacéutica
  • ...
• El caso es que la mayoría de estos datos están en la Web
  • (aunque no necesariamente públicos)

Solución en Redes Sociales

• Omnipresentes en estos días
  • LinkedIn, eConozco, Friendster, Facebook,...
• Los datos no son intercambiables
  • ¿Cuántas veces has tenido que introducir los contactos?
• Las aplicaciones deberían poder intercambiar los datos de una forma estándar
  • Teniendo en cuenta las cuestiones de seguridad y privacidad

Solución a la ambigüedad en las búsquedas

Bucadores semánticos

Búsqueda inteligente para servicios online

• Case Study: An Intelligent Search Engine for Online Services for Public Administrations

La Web sigue evolucionando

• Expandiéndose desde la Web de documentos (1.0)...
• ...hasta la Web Única...
  • para todo el mundo
  • desde cualquier dispositivo
  • de creadores y consumidores (2.0)
  • de los datos y servicios (3.0)
  • ...(X.0)

Muchas gracias

Esta presentación está en

http://www.w3c.es/Presentaciones/2009/1125-estandaresULL-MA

The W3C mobileOK™ Checker (François Daoust)

http://www.w3.org/2009/Talks/09-nem-mobileok/

Oficina Española del W3C

http://www.w3c.es

martin@w3.org (yo)

Fotos

Japón Economía Artemuestra), Stock OLPC XO-1 (One Laptop per Child), BrailleNote (bknittle), LOGO2.0 (Stabilo Boss), theworld (Skelekitten), Communicating in the desert (John & Mel Kots)

Mejora de las búsquedas (BOPA)

• Use Case: Enhancing Web Searches within the Principality of Asturias

Integración de conocimiento de Medicina China

• Sobre 80 bases de datos, con 200.000 registros en cada una
• Usa una capa semántica

Fiabilidad en las búsquedas

• Case Study: Improving the Reliability of Internet Search Results Using Search Thresher

Resultados enriquecidos

• Case Study: Improving Web Search Using Metadata

Organización de recursos de distinta naturaleza

• Otros: Boeing, MITRE Corp., Elsevier, proyectos europeos como Sculpteur y Artiste, proyectos nacionales como MuseoSuomi, o DartGrid,...

Mejora la búsqueda y navegación en portales

• Case Study: Enhancing Content Search Using the Semantic Web