W3C y los Estándares en la Web

Día W3C en Uruguay

Martín Álvarez-Espinar (W3C Spain OfficeCTIC)

Montevideo por la noche

Un mundo en transición

La Web está cambiando el comercio, la forma de gobernar, el ocio, la educación...

Historia de la Web

Historia del W3C

La "Web" en 1989

Historia del W3C (señalado 1989)

(1989) El primer boceto

Propuesta de organización de la información de Tim Berners-LeeInformation Management: A Proposal — Tim Berners-Lee, CERN

La Web en 1990

Historia del W3C (señalado 1990)

(1990) WorldWideWeb

Pantallazo del WorldWideWeb, primer navegador de la historia

La Web crece

Historia del W3C (señalado 1994)

World Wide Web Consortium

Tim Berners-Lee

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

W3C #1 out of MIT150

Los 150 del MIT

Los fundamentos de la Web

Beneficios de los estándares

Beneficios de los estándares

Cómo se construyen

La Web evoluciona

Desde la Web de documentos (1.0) hacia una Web...

Pero con un objetivo claro

Una Web única y universal

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

Acceso universal

Independiente de las características de los dispositivos de acceso

Urinario conectado a un videojuego
Toylet - Foto: Wired

...independientemente de...

Portátil con teclado Braille

...independientemente de...

Panel informativo sobre un mercado de valores

Muy importante la Web Móvil

En el desierto con el móvilhttp://www.flickr.com/photos/dos82/4045946783/

Y cada vez más

Crecimiento del número de dispositivos conectados en el mundo

¿Por qué estándares?

Firefox OS, iOS, Android, Tizen

La solución

La Plataforma Web Abierta como base de todos los sectores

La Plataforma Web Abierta

La Web de la Interacción

Modelando la interfaz de usuario para mejorar la interacción

HTML5: la estrella

HTML5

HTML5, no sólo presentación

Semántica en los documentos (RDFa)

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

Las máquinas lo entienden

Búsqueda de la palabra AVATAR en Google, con un resultado adecuado a la película

Las máquinas lo entienden

Resultado de la búsqueda Montevideo en Yahoo, donde interpreta que es una ciudad

Datos en los Documentos


<p typeof="foaf:Person" xmlns:foaf="http://xmlns.com/foaf/0.1/">
  Este es el sitio web de <em property="foaf:name">John Smith</em> y...
</p>	

Llevar la semántica a la Web

Las aplicaciones podrán intercambiar datos comprendiendo su concepto

<video> de forma natural

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

Párrafo 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].

<canvas> en el documento


Ejemplos: Gantt, Canvas Painter, Canvas and Audio

Interacción

Reloj con el visor de la webcam integrado

shinydemos.com/clock/

HTML5 <canvas> + <video>

Interacción con ratón sobre una pantalla con luces

field-project.com, Video Destruction

WebGL + Web Workers + Video + ...

Histagrama de los colores captados por la webcam

shinydemos.com/3d-color-histogram/

No todo es HTML5

WOFF

@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

W3C Spain

SVG: Gráficos Vectoriales

W3C Spain

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

System Applications WG

www.w3.org/2012/sysapps/

Muchas más piezas...

Participa en el W3C

Twitter

Nuevas actividades en W3C

Publicación Digital

Tableta mostrando contenidos digitales

Nuevas actividades en W3C

Plataforma Web y Automóviles

Velocidades de un automóvil describiendo: mobile, safety, html5...

Nuevas actividades en W3C

Pagos en la Web

Paga ahorahttp://www.flickr.com/photos/recreahq/9269432364/

Nuevas actividades en W3C

Web & TV

Web and TV con conjuntos donde se intersecan: Web, Content, Broadcasting, Device

Nuevas actividades en W3C

Oil, Gas and Chemicals

Petróleohttp://www.flickr.com/photos/gpmarsh/477502736/

Muchos otros grupos

Working Groups Audio, Authoring Tool Accessibility Guidelines, Browser Testing and Tools, Cascading Style Sheets (CSS), Device APIs, Education and Outreach, Efficient XML Interchange, Evaluation and Repair Tools, Forms, Geolocation, Government Linked Data, HTML, Independent User Interface (Indie UI), Internationalization, Linked Data Platform (LDP), Math, Media Annotations, Media Fragments, Model-Based User Interfaces, MultilingualWeb-LT, Multimodal Interaction, Near Field Communications, Pointer Events, Protocols and Formats, RDF, RDFa, Research and Development, SVG, System Applications, Timed Text, Tracking Protection, User Agent Accessibility Guidelines, Voice Browser, Web Application Security, Web Applications, Web Content Accessibility Guidelines, Web Cryptography, Web Events, Web Notification, Web Performance, Web Real-Time Communications, WebFonts, XML Core, XML Processing Model, XML Query, XML Security, XSLT Interest Groups, Digital Publishing, HTML5 Chinese, HTML5 Japanese, HTML5 Korean, Internationalization (I18n), Internationalization Tag Set (ITS), Patents and Standards, Privacy, Semantic Web Health Care and Life Sciences, Semantic Web, WAI, Web Security, Web Testing, Web and Mobile, Web and TV Coordination Groups, Hypertext, Semantic Web, WAI, XML

WebPlatform.org

WebPlatform.org

W3DevCampus

W3DevCampus

Cursos oficiales W3C para desarrolladores

Suite de validación de estándares

W3C Suite Validator

¡Muchas gracias!

Esta presentación
http://www.w3c.es/Presentaciones/2013/0927-Estandares-uy-MA
Escríbeme
martin@w3.org
@espinr

Foto Skyline Uruguay: http://www.flickr.com/photos/jikatu/6091132032/