hidden bullet

Construyendo la Web del mañana

Movilidad, Semántica, nuevas tecnologías Web

Martín Álvarez Espinar, < martin@w3.org>

Letras W3C en tres teclas de un teclado

Construyendo la Web del mañana

Taller sobre Estándares Web W3C - Murcia
Oficina W3C España,
Fundación CTIC,
Dep. T.S.T.C. (Universidad de Granada)
Granada, 12 Nov 2009

La Web sigue evolucionando

¿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

Una Web para todo el mundo

Mano sujetando una bola del mundo

...acceso universal

Acceso independientemente de...

One Laptop per Child

...acceso independientemente de...

Portátil con teclado Braille

...acceso independientemente de...

Panel informativo sobre un mercado de valores

¿Cómo se consigue esta Universalidad?

Pila de las tecnologías, sólo visible la parte de las tecnologías horizontales

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 todos/as todo

Sección de Divulgación de W3C Oficina en España

Información accesible a todos/as todo

Página de W3C Oficina en España. Resaltado el h1 sobre la página

Información accesible a todos/as todo

Sección de Divulgación de W3C Oficina en España. Resaltado el h1 y el h2 sobre la página

Información accesible a todos/as todo

Página web con el h1, el h2, un dt y un dd sobre la página

Información accesible a todos/as todo

Página web con el h1, el h2, dt, dd y un strong sobre la página

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

Página web que solicita tener instalado Flash, tras deshabilitar JavaScript en el navegador
Sin Javascript

No siempre se puede acceder a esa información

Página web que solicita tener instalado Flash, tras deshabilitar el reproductor Flash en el navegador
Con Javascript /Sin Flash

¿Por dónde empiezo?

Utiliza los estándares de forma correcta

Valida el código de tu sitio

I love validator

Validador de HTML del W3C

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

Validador del HTML de tu sitio - OK

Validador de HTML del W3C

Validador del HTML de tu sitio - Informes

Informe del resultado erróneo de una validación de HTML

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

Di: yo uso correctamente los estándares

Iconos de conformidad de las tecnologías W3C
http://www.w3.org/QA/Tools/Icons

Estándares del W3C para la Accesibilidad

Web Accessibility Initiative (WAI)

WCAG

Logos de conformidad WAI A, doble A y triple A

WCAG: Relaciones con otras pautas

Especificaciones WAI

WAI-ARIA

Control de tipo árbol de navegación
(Control Árbol de Navegación)

Accessible Rich Internet Applications (Borrador)

Una Web para todos los públicos (I18n)

Codificación incorrecta

La Web sigue evolucionando

Desde cualquier lugar, cualquier dispositivo

Usuario de la Web Móvil consultando su dispositivo dentro de un tren

...desde cualquier lugar

Persona comunicándose con un teléfono móvil en el desierto

Desde cualquier dispositivo

Frigorífico con un navegador webNavegador en un salpicadero de un automóvilUrinarios tecnológicos

La estandarización es importante

Muchos dispositivos móviles de diversos tipos

Importancia del mercado Móvil

Porcentajes globales de las líneas telefónicas y conexiones a Internet por años

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

Mercado Móvil: las Economías Emergentes

Distribución de abonados de telefonía móvil por regiones en el mundo
(ITU World Telecommunication/ICT Indicators Database) * Estimación

Limitaciones de los dispositivos móviles

SVG en un teléfono móvil
(SVG Population Pyramid on iPhone)

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

Comparación de la vista de un navegador móvil y un navegador de escritorio con la misma página
(http://www.efront.com.au/web-design-melbourne/uploaded_images/iphone-776924.jpg)

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

Las buenas prácticas en tarjetitas
http://www.w3c.es/Divulgacion/Tarjetas/MWBP

Mobile Web Best Practices 1.0:

Buenas Prácticas en Web Móvil - Ejemplo

Sin Buenas Prácticas

escritorio (bien)
Beethoven - correcto - escritorio
móvil (mal)
Beethoven - incorrecto - teléfono Beethoven - incorrecto - teléfono

Con Buenas Prácticas

escritorio (¡sigue bien!)
Beethoven - correcto - escritorio
móvil (bien)
Beethoven - correcto - teléfono Beethoven - correcto - teléfono

La marca mobileOK

mobileOK

El "Checker" de mobileOK

Pantallazo del Checker de mobileOK

http://validator.w3.org/mobile

Categorías y severidad

Pantallazo del Resultado de una validación del Checker de mobileOK

Cuantifica la mejora de tu sitio

Resumen del Resultado de una validación del Checker de mobileOK con porcentajes de buenas prácticas correctas

Otras herramientas

La Web sigue evolucionando

La Web de los Creadores y Consumidores

Web 2.0

Una Web de confianza

Logos Web 2.0

Promover

Entorno colaborativo

La Web sigue evolucionando

La Web de los Datos y Servicios

Mapa de líneas de metro, donde se representan conceptos y la unión entre distintos servicios que comparten datos

Lenguaje para personas no para máquinas

Las máquinas son ignorantes

Evolución de la Web Tradicional...

Representación de la Web tradicional como un conjunto de enlaces a documentos

... a la Web Semántica

Relaciones entre recursos que tienen incluida semántica

¿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

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

Modelado estándar de los datos

Tripleta obtenida con los datos de los servidores, gráficos y de los documentos XHTML

Las Bases de Datos clásicas

Una fila, columna y celda de una base de datos, que se corresponden con un sujeto, propiedad y un valor.

El elemento de la Web Semántica

El origen de la flecha es el sujeto, el cuerpo es la propiedad y el destino es el valor

Ejemplo de tripleta RDF

Ejemplo de tripleta página creada por un autor

La Web Semántica incluye tablas,...

Las flechas pueden construir una tabla, una flecha desde cada fila hacia cada valor

...árboles

Las flechas pueden componer un árbol. De los nodos salen flechas hacia los otros, haciendo un árbol

... cualquier cosa

Las flechas pueden componer grafos, tablas, árboles, todo compuesto

Tecnologías de la Web Semántica

Pila de tecnologías de la Web Semántica de Tim (2006)

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

Solución en Redes Sociales

logos de aplicaciones sociales

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

Captura de pantalla del resultado de una búsqueda de la etiqueta chips en Google

Bucadores semánticos

Pantallazo del buscador semántico de la DBPedia con la consulta del objeto Gijón

La Web sigue evolucionando

Muchas gracias

Esta presentación está en
http://www.w3c.es/Presentaciones/2009/1112-estandaresUGR-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)

Búsqueda inteligente para servicios online

Pantallazo del buscador de servicios al ciudadano del Ayto. de Zaragoza

Mejora de las búsquedas (BOPA)

Pantallazo del buscador del BOPA

Integración de conocimiento de Medicina China

Pantallazo de la aplicación de integración del conocimiento de la Medicina China

Fiabilidad en las búsquedas

Pantallazo del funcionamiento del plugin Thresher para Firefox

Resultados enriquecidos

Pantallazo del funcionamiento de SearchMonkey

Organización de recursos de distinta naturaleza

Pantallazo del buscador de cultura semántico ClioPatria

Mejora la búsqueda y navegación en portales

Pantallazo de Oracle Technology Network