graphic with four colored squares
Teclas W 3 C

La Plataforma Web Abierta

Martín Álvarez-Espinar (W3C Spain Office – CTIC)

ADWYS CON '11

La Plataforma Web Abierta

ADWYS CON '11

Cádiz, 23 de febrero de 2011

World Wide Web Consortium

Mapa del mundo World Paper Map

Realmente WorldWide

El mundo, con puntos que indican las sedes centrales y las oficinas

W3C.es @ CTIC

Vista del edificio de CTIC donde se encuentra la Oficina del W3C en España

¿Qué hace el W3C?

Especificaciones, directrices y herramientas:

Voice WebCGM PICS HTMLTidy Databinding WebOntology HTML CompoundDocumentFormats SPARQL WAI Web APIs Libwww PatentPolicy OWL TimedText XMLEncryption Multimodal XML RichWebClients XMLProcessing DeviceIndependence URI/URL DOM HTTP Accessibility RDF WebApplicationFormats XMLBase Jigsaw XLink I18N P3P QualityAssurance XMLKeyManagement UbiquitousWeb InkML Incubator XPath WebServices XForms CSS SOAP Mobile SMIL Rules SVG Amaya SemanticWeb MathML

Recomendaciones tecnológicas abiertas del W3C, probablemente con la política de patentes más transparente en Internet

Breve historia de la Web...

Tela de araña húmedaFrosty Morning Web

Web 0.1

Pantallazo del WorldWideWeb, primer navegador de la historia

Web 1.0

Pantallazo del Navegador Mosaic (1993) navegando por una página de Yahoo!

Web 1.0

Pantallazo del Navegador AMosaic (1994)

Una Web para navegar

...Experiencia de usuario “pasiva”

Web 2.0

Pantallazo de Youtube

Una Web para interactuar

...Experiencia de usuario “interactiva”

Web 3.0... 4.0... x.0...

Mejorando la Plataforma Web

Going to the Opera in the year 2000, by Albert Robida (1882)Albert Robida, 1882

La Web Única como base

Diferentes dispositivos y personas alrededor de una nube (One Web)

La Web Única como base

Diferentes dispositivos y personas alrededor de una nube (One Web)

¿La Web de los datos?

Una web como base del conocimiento

Tripleta que representa el símbolo de RDF, donde en cada nodo aparecen datos en distintos formatos

Todas las cosas representadas en la Web

Caja abierta

http://.../cosa

Todas las cosas tienen un URI

Foto aérea de CádizFoto de Google

http://dbpedia.org/resource/Cadiz

Todas las cosas se enlazan en la Web

cosas enlazadas

Se definen las relaciones entre las cosas

Una cosa es parte de otra

La realidad modelada en la Web

Se define que una persona (John) vive en Cádiz

Objetivo: Linked Data

(AKA Web Semántica)

Usar los datos en la Web de la misma forma que los documentos:

Objetivo: Llevar la semántica a la Web

Las aplicaciones podrán intercambiar datos comprendiendo su concepto

Materializando el Linked Data

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

El panorama actual del Linked Data

Nube de Linked Data coloreada por sectoreshttp://richard.cyganiak.de/2007/10/lod/

¿Esto se usa?

Resultado de una búsqueda facetada sobre el término Cádiz

La base de la interoperabilidad

Agregación de indicadores estádísticos

Lo usamos diariamente

Resultado de una búsqueda en Google, donde se muestra un restaurante con una valoración de críticas

Google usa RDFa (lo llama Rich Snippets)

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate">
  <div rel="v:itemreviewed">
    <span typeof="v:Organization">
      <h1 property="v:name">Pizza Suprema...</h1>
      ...
      <img rel="v:rating" class="stars_5" src="stars.png" alt="5 stars"/>
      <em>based on <span property="v:count">39</span> reviews</em>
      ...
    </span>
  </div>		
</div>

RDFa en Google

Resultado del análisis de los snippets en una página web

Search Monkey de Yahoo!

Resultado de la consulta de Search Monkey de Yahoo!

Web 3.0... 4.0... x.0...

Mejorando la Plataforma Web

WWW

La Web de la Interacción

Modelando la interfaz de usuario para mejorar la interacción

Breve historia del HTML

HTML5: la estrella

HTML5

HTML5: ¿HTML o XML?

Nuevos Formularios Web

<input type='range' min='3' max='18' />
<input type='search' placeholder="Busca aquí">
<input type='tel' >
<input type='url' >
<input type='email' >
<input type='date' >
<input type='time' >
<input type='color' >
<input type='number' >

HTML5, no sólo presentación

Dotar de semántica los documentos

2 Documentos donde se incluye información de presentación en uno y en el otro información semántica (capítulo, autor, etc.)

Semántica en la estructura

<body>
  <header>
   <hgroup>
    <h1>W3C</h1>
    <h2>Llevando la Web a
        su máximo potencial</h2>
   </hgroup>

   <nav>
    <ul>
      Menú de navegación…
    </ul>
   </nav>
  </header>

  <section>
  
   <article>
     <h1>El W3C participa…</h1>
     <section>
       Contenido…
     </section>
   </article>

   <article>
     <header>
       <h1>Título</h1>
     </header>
     <section>
        <figure>
          <img src='…' alt='…'>
          <figcaption>Ilustración…</figcaption>
        </figure>
     </section>
   </article>

  </section>

  <aside>
   Enlaces superiores
  </aside>

  <footer>
   Copyright…
  </footer>

</body>

Datos en los Documentos HTML5

Representación e integración de datos en la Web

<div itemscope>
  <p>Nombre: <span itemprop="name">John</span></p>
  <p>Banda: 
    <span itemprop="band" itemscope>
        <span itemprop="name">Los Grandes del Jazz</span> 
        (<span itemprop="size">12</span> integrantes)
    </span>
  </p>
</div>

<p typeof="foaf:Person" xmlns:foaf="http://xmlns.com/foaf/0.1/">
  Nombre: <em property="foaf:name">John</em> y...
</p>

HTML5+RDFa

Ahora el navegador sí lo entiende

Dos páginas enlazadas mediante la propiedad license

HTML5 <video>

<video src='myMovie' id='vid' />
	
var vid = document.getElementById("vid");
vid.play();
vid.pause();
vid.currentTime = 0;

Párrafo en HTML sobre el vídeo

La opacidad de CSS permite al vídeo ser transparente parcialmente.

Pasa el ratón por encima de vid.play() para controlar (arrancar/pausar/detener) el vídeo [http://www.polycrystal.org/lego/movies.html].

HTML5 <video>

Ejemplo de utilización del elemento video en HTML5

http://chikuyonok.ru/ambilight

HTML5 <canvas>

// canvas es una referencia a un elemento de tipo <canvas>
var context = canvas.getContext('2d');
context.fillRect(0,0,50,50);
canvas.setAttribute('width', '300'); // limpia el canvas
context.fillRect(100,0,50,50);       // sólo permanece éste ... 
                                     // ... rectángulo

HTML5 <canvas>


Ejemplos: Gantt, Canvas Painter, Canvas and Audio

HTML5 <canvas> + <video>

Video Destruction

@contenteditable

 <p contenteditable='true'>
 <table contenteditable='true'>

Esto es un párrafo.

Date Description Transfer
10/08/2004 Restaurant Expenses:Foods
10/10/2004 Market Expenses:Groceries
10/11/2004 Gas Expenses:Car
10/12/2004 Payroll Income:Salary

Ejemplo

No es HTML5 todo lo que reluce

CSS3: nuevos selectores

Date Description Transfer Deposit Withdrawal Balance
10/08/2004 Restaurant Expenses:Foods 38.14 440.67
10/10/2004 Market Expenses:Groceries 123.14 317.53
10/11/2004 Gas Expenses:Car 40.00 277.53
10/12/2004 Payroll Income:Salary 2,000.00 2277.53
10/12/2004 Home depot Expenses:House Supplies 41.14 2236.39
10/14/2004 Dentist Expenses:Medical 166.20 2070.19
10/15/2004 Electricity Expenses:Utilities 27.88 2042.31
10/16/2004 Filene's Basement Expenses:Grooming 31.93 2010.38

CSS3: bordes

border 
border-image: url("img/border.png") 27 round stretch;

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla algo más de vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes y algún palomino de añadidura los domingos, consumían tres partes de su hacienda.

(Don Quijote de La Mancha. Primera parte)

WOFF: Formato de Fuente Abierto para la Web

@font-face {
  font-family: 'Pretty';
  src: url('Pretty.woff') format('woff') url('Pretty.eot') format('eot'); }

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla algo más de vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes y algún palomino de añadidura los domingos, consumían tres partes de su hacienda.

(Don Quijote de La Mancha. Primera parte)

Ofrece un formato de fuente común para los navegadores Web

MathML

<math>
  <mrow>
    <munderover>
      <mo>∑</mo>
      <mrow><mi>i</mrow>
      <mi>p</mi>
    </munderover>
    <msub>
      <mi>a</mi>
      <mrow>
        <mi>i</mi>
        <mi>j</mi>
      </mrow>
    </msub>
    <msub>
      <mi>b</mi>
      <mrow>
        <mi>j</mi>
        <mi>k</mi>
      </mrow>
    </msub>
  </mrow>
</math>

SVG: Gráficos Vectoriales Escalables

W3C Spain

SVG: Gráficos Vectoriales Escalables

W3C Spain

HTML5 + CSS3 + SVG + MathML + ...

Ejemplos (Philippe Le Hégaret):

APIs para aplicaciones Web

Todo comenzó con DOM Level 0. Entonces, el W3C creó DOM Level 1 y …

Almacenamiento en Cliente Web

window.localStorage['valor']
   = "valor a almacenar";

p.textContent
   = window.localStorage['valor'];
	
p.textContent
   = window.sessionStorage['valor'];

Timestamp: [sin valor]

Contador: [contador]

Geolocation API

Logo Geo del W3C
http://www.w3.org/TR/geolocation-API

function showMap(position) {
  // Muestra un mapa centrado en:
  // - position.coords.latitude
  // - position.coords.longitude
}

// Petición de posicionamiento
navigator.geolocation.getCurrentPosition(showMap);

Geolocation API

http://www.w3.org/2010/Talks/1001-html5-plh/geolocation.svg

APIs y Política de Dispositivos

http://www.w3.org/2009/dap

No está restringido a dispositivos móviles

Las piezas de la Plataforma Web Abierta...

Widgets

Widgets en un dispositivo móvil
http://www.flickr.com/photos/viskas/3486495936/

¡Muchas gracias!

Esta presentación
http://www.w3c.es/Presentaciones/2011/0223-OpenWebPlatform-MA
Escríbeme
martin@w3.org
Recursos
The Next Open Web Platform (Philippe Le Hégaret)