graphic with four colored squares
Teclas W 3 C

Search Congress Barcelona

The Open Web Platform

Martín Álvarez-Espinar (Oficina W3C EspañaCTIC)

The Open Web Platform

Search Congress Barcelona

Barcelona, 3 de marzo 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

¿Qué hace el W3C?

Especificaciones, directrices y herramientas:

Voice 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

¿Datos en la Web?

Una web como base del conocimiento

Las aplicaciones podrán intercambiar datos comprendiendo su concepto

Todas las cosas representadas en la Web

Caja abierta

http://.../cosa

Todas las cosas tienen un URI

Foto aérea de BarcelonaFoto de Google

http://dbpedia.org/resource/Barcelona

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:

SEO semántico

¿SEO semántico?

RDFa como tecnología más simple para incrustar datos en la Web actual

La Web de la Interacción

Modelando la interfaz de usuario para mejorar la interacción

HTML5: la estrella

HTML5

HTML5: ¿HTML o XML?

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

No es HTML5 todo lo que reluce

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

Google los interpreta e indexa

W3C Spain

HTML5 + CSS3 + SVG + MathML + ...

Ejemplos (Philippe Le Hégaret):

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 buscador sí lo entiende

Dos páginas enlazadas mediante la propiedad license

RDFa y Facebook

Facebook

RDFa y Facebook

Página de la IMDB de la serie 'Perdidos'

RDFa y Facebook

<html xmlns:og="http://opengraphprotocol.org/schema/">
 <head>
  ...
  <title>Perdidos (TV Series 2004–2010) - IMDb</title>
  <meta property='og:url' content='http://www.imdb.com/title/tt0411008/' />
  <meta property='og:type' content='tv_show' />
  <meta property='og:title' content='Perdidos (TV Series 2004–2010)' />
  <meta property='og:image' content='http://ia.media-imdb.com/ima...jpg' />
  <meta property='og:site_name' content='IMDb' />
  ...
 </head>
...
</html>
    

RDFa y Facebook

Botón de 'me gusta' en Facebook

RDFa y Facebook

RDFa en Goggle

Google lo llama Rich Snippets

Resultado de una búsqueda en Google, donde se muestra un restaurante con una valoración de críticas
“With rich snippets, webmasters with sites containing structured content—for example, review sites or business listings—can label their content to make it clear that each labeled piece of text represents a certain type of data [...]”

RDFa en Goggle

Resultado de una búsqueda en Google, donde se muestra un restaurante con una valoración de críticas
<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

SearchMonkey de Yahoo!

Resultado de la consulta de Search Monkey de Yahoo!

SearchMonkey de Yahoo!

Diagrama de funcionamiento de Search Monkey de Yahoo!
“Add a few lines of markup to your pages and SearchMonkey will use that code to extract structured data from your pages. After your site has been reindexed, your enhanced results will appear in search results.”

RDFa en SearchMonkey de Yahoo!

RDFa en SearchMonkey de Yahoo!

Resultado de SearchMonkey de Yahoo!, donde muestra un producto
<div typeof="product:Product"
  xmlns:product="http://search.yahoo.com/searchmonkey/product/"
  xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#">

  <span property="rdfs:label">Pinball Maven...</span>
  
  <span property="product:currency" content="USD">$</span>
  <span property="product:listPrice">49.99</span>
  <span property="product:salePrice">33.99</span>

  ...
</div>		
	

Objetivo: semántica e interoperabilidad

¿Ejemplos?

Cada vez más RDFa

Best Buy

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. Contexto espacial

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

Muchas más piezas...

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