La Plataforma Web Abierta

Para la mejora de la UX

#edcd. I Encuentro de Diseño y Cultura Digital

Madrid, 8 abril 2014

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

Un mundo en constante cambio

I've seen the future, it's in my browser

(pre)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-Lee
Information 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 1993)

W3C?

World Wide Web Consortium

Tim Berners-Lee

Miembros en España

20 Miembros en España

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?

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

Especificaciones, directrices y herramientas abiertas con la política de patentes más transparente en Internet

+200 Recomendaciones

Más de 200 recomendaciones o estándares en estos últimos 20 años del W3C

Una Web 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

...independientemente de la forma de acceso

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

Urinario conectado a un videojuego
Toylet - Foto: Wired

...independientemente de "discapacidades"...

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

Portátil con teclado Braille

...teniendo en cuenta ls diferencias culturales

  • sentidos de escritura, diferentes tipos de teclados, ...
  • formato de fechas, números de teléfono, códigos postales, IDs,...

Panel informativo sobre un mercado de valores

Una única Web

Los estándares son clave

Construyendo la Plataforma Web Abierta

  • Interfaces: Geo-localización, giroscopios, cámaras, NFC, …
  • Multimedia: Audio y vídeo, gráficos, animaciones, fuentes de alta calidad, …
  • Multidispositivo: varias resoluciones, táctil, teclados, voz, vibración, …
  • Comunicaciones: cliente-servidor, real-time, p2p, sockets, …
  • Sociedad: privacidad, seguridad, multilingüe, accesibilidad
  • Procesam. automático: semántica, interoperabilidad, …

La estrella

HTML5

Nuevos elementos y atributos

Más semántica

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 + RDFa

El navegador comprende lo que aparece

Dos páginas enlazadas mediante la propiedad license

Semántica en la estructura

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

   <nav>
      Menú de navegación…
   </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>
		

@contenteditable

<p contenteditable='true'>

Esto es un párrafo editable (prueba).

<table contenteditable='true'>
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

<video> de forma natural

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

Permite la integración con otros elementos del documento…


P u p

http://www.polycrystal.org/lego/movies.html

<canvas>

Formas geométricas

P

Más ejemplos g

<canvas> Gantt

Diagrama gantt

<canvas> Painter

<canvas> Cycle

Paisaje hecho con Canvas
http://www.effectgames.com/demos/canvascycle/

<canvas> y Realidad Aumentada

Ejemplo de realidad aumentada con canvas
https://developer.mozilla.org/en-US/demos/detail/remixing-reality/launch

<canvas> y Audio

Ejemplo de realidad aumentada donde partículas se mezclan a ritmo de la música
http://9elements.com/io/projects/html5/canvas/

<canvas> Maze

Ejemplo de juego de laberinto hecho con canvas
http://www.spacegoo.com/maze/

HTML5 + <canvas> + <video>

Canvas donde se mostrará el vídeo procesado

P u
By Sean Christmann

Interacción con el dispositivo

Reloj con el visor de la webcam integrado
shinydemos.com/clock/

WebGL + Web Workers + Video + ...

Histagrama de los colores captados por la webcam>
shinydemos.com/3d-color-histogram/

No todo es HTML5

Technologías de la Open Web Platform

Web API

Interacción con los documentos

Web API

  • Web DOM Core API
  • Drag Drop API
  • Text Selection API
  • Undo History API
  • 2D Context API
  • Web Storage API
  • WebSockets API
  • Web Workers API
  • Web Messaging API
  • Geolocation API
  • Indexed Database API
  • Microdata API
  • RDFa API
  • Element Traversal API
  • XMLHttpRequest API
  • Web Notification API
  • DOM Level 3 Events API
  • Navigation Timing API
  • Multi-touch Events API
  • CSSOM View Module API
  • Selectors API
  • File API
  • WebGL API
  • Resource Timing API
  • User Timing API
  • Messaging API
  • Device API

Ejemplo: Geolocation

function showMap(position) {
	  // Muestra un mapa centrado en:
	  // - position.coords.latitude
	  // - position.coords.longitude
	}
	
	// Pide posicionamiento
	navigator.geolocation.getCurrentPosition(showMap);

System Applications WG

www.w3.org/2012/sysapps/

  • Contactos
  • Mensajería
  • Teléfono
  • Calendario ...

Tecnologías CSS

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)

Fuentes en la Web

Web Fonts

@font-face {
   font-family: 'headings';
   src: url('fonts/destroy.ttf') format('truetype');
   font-style: normal;
   font-weight: bold; 
}
p { 
   font-family: 'headings', 'franklin gothic medium', arial; 
   text-shadow: 4px 4px 4px #aaa; 
}

WOFF + Bordes

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)

CSS Fonts Module Level 3

Formatos aceptados

  • .eot Embedded Open Type Font
  • .ttf True Type Font
  • .otf Open Type Font
  • .svg Scalable Vector Graphic
  • .woff Web Open Font Format

Por si acaso…

Para asegurarnos el soporte en varios browsers, declaramos varios formatos:

@font-face {
   font-family: 'MyWebFont';
   src: url('webfont.eot') format('embedded-opentype'), 
        url('webfont.woff') format('woff'),                    
        url('webfont.ttf')  format('truetype'),                
        url('webfont.svg#svgFontName') format('svg');         
 }

Webfont Generator

CSS3: nuevos selectores

E ~ F, :first-child, :last-child, :nth-child(odd), :nth-child(3), :target

Elementos hermanos

<h2 id="siblingSel">Elementos hermanos</h2>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<p>Párrafo 3</p>
h2#siblingSel ~ p:nth-child(2) { background-color: gray; color: black; }

Párrafo 1

Párrafo 2

Párrafo 3

:not()

a:not(.externo) { background-color: pink; }
[…]
tenderloin drumstick landjaeger pig short loin sirloin 
rump capicola jowl t-bone swine meatloaf beef Pork belly […]

Bacon ipsum dolor sit amet shoulder tenderloin drumstick landjaeger pig short loin sirloin rump capicola jowl t-bone swine meatloaf beef Pork belly doner beef ribs ribeye bresaola shank, chuck bacon. Bresaola chuck jowl pig pork belly corned beef, sirloin meatloaf cow. Hamburger pork chop turkey andouille swine landjaeger beef ribs. Hamburger capicola biltong andouille doner. Prosciutto fatback meatloaf boudin.

:last-of-type

strong:last-of-type { border-bottom: 2px red solid; }
[…]
tenderloin drumstick landjaeger pig short 
loin sirloin rump capicola jowl t-bone swine meatloaf beef Pork belly doner beef ribs ribeye bresaola shank, chuck bacon. 
Bresaola chuck jowl pig pork belly corned beef, sirloin meatloaf cow. Hamburger pork chop turkey andouille 
swine landjaeger beef ribs. Hamburger capicola […]

Bacon ipsum dolor sit amet shoulder tenderloin drumstick landjaeger pig short loin sirloin rump capicola jowl t-bone swine meatloaf beef Pork belly doner beef ribs ribeye bresaola shank, chuck bacon. Bresaola chuck jowl pig pork belly corned beef, sirloin meatloaf cow. Hamburger pork chop turkey andouille swine landjaeger beef ribs. Hamburger capicola biltong andouille doner. Prosciutto fatback meatloaf boudin.

:checked

input:checked + label { color: yellow; }

:empty

td:empty { background: rgba(255,0,0,0.5); }
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

:nth-child()

tr:nth-child(odd) { background: #aaaaaa; }
tr:nth-child(even) { background: #888888; }
tr *:first-child { border-left: none; }
tr *:last-child { border-left: none; }
td:nth-child(6) { font-family: monospace; color: red}
tr:nth-child(4) td:nth-child(4) { border: 8px rgba(255,0,0,0.8) dashed; }
tr:nth-child(6) td:nth-child(2n+2) { background-color: #986dff; }
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

Transiciones

Para que el estilo se aplique lentamente.

li:hover { width: 500px; background: forestgreen; }
li.transicion { transition: 1s;}
  • Sin transición
  • Con transición

Mucho más

Más fácil, más atractivo, estándar

Muy importante la Web Móvil

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

No sólo smartphones

Responsive Web Design

A tener en cuenta

  • ¿Cuál es la resolución de un móvil?
  • ¿Cuál es el tamaño de un móvil?

Ya no hay distinción clara entre ordenador y dispositivo móvil –tablets?–

Media Types

@import url("fancyfonts.css") screen;

@media handheld {
  /* Estilos para dispositivo de mano */
}

No es nada nuevo... (CSS 2.1)

Media Queries

Aplicar estilos de forma independiente del tipo de medio

Pantallas con un ancho mayor de 420px

@media all and (min-width: 420px) {
 …
}

Pantallas pequeñas

@media all and (max-device-width: 240px) {
… }

Pantallas con orientación horizontal

@media all and (orientation: landscape) {
…}

El concepto de viewport

<meta name="viewport" content="width=500">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

En la CSS (combinado con Media Queries)

@media all and (min-width:37em) {
   @viewport {
       zoom: 2;
   }
 }

CSS Device Adaptation

Diseño adaptado para móviles

  • Diseño lineal en mente
    antes que multi-columnas
  • Diseño líquido (basado en %)
    al menos elástico (en ems)
  • Usar tablas únicamente para representar datos tabulares
    hacerlas pequeñas
  • Evitar uso de imágenes grandes
    menores que la menor pantalla
  • Diseño ligero
    HTML lo más sencillo posible
  • Usar propiedades de CSS básicas incrementando a medida que las necesitamos

Líquido?

Ancho relativo al viewport

Pantallazo de repositorio de sinfonías de Beethoven a tres columnas Pantallazo de repositorio de sinfonías de Beethoven a dos columnas Pantallazo de repositorio de sinfonías de Beethoven a una columna

http://responsive.webdemos.nl/demos/02-responsive-beethoven#

Técnicas basadas en CSS

Navegación Responsive

En cuenta los distintos modos de interación posibles

  • Basado en foco (tabulador)
  • Puntero
  • Táctil

Imágenes responsive

Ofrecer la imagen adaptada lo más posible al viewport

  • Ahorro de batería,
  • ancho de banda,
  • agilidad en carga de la página

Propuesta para responsive images

Del grupo de comunidad responsiveimages.org
(no estándar)

<img src-1="(max-width: 400px) pic-small.jpg"
    src-2="(max-width: 1000px) pic-medium.jpg"
    src="pic-large.jpg"
	alt="Paisaje espectacular">
<picture width="500" height="500">
   <source media="(min-width: 45em)" src="large.jpg">
   <source media="(min-width: 18em)" src="med.jpg">
   <source src="small.jpg">
   <img src="small.jpg" alt="description of image" lazyload>
   <p>Accessible text</p>
</picture>

Propuesta para responsive images

  • Soluciones basadas implementación en servidor (p.e. adaptive-images.com)
  • Trucos mediante CSS (ejemplos)
  • ¿La mejor solución?… Toca esperar a que HTML5 lo soporte.

La Pregunta:

¿Qué puedo/debo usar de HTML5 y CSS3?

http://www.w3.org/Mobile/mobile-web-app-state/

Participa en el W3C

WebPlatform.org

WebPlatform.org

webplatform.org

W3DevCampus

Cursos oficiales W3C para desarrolladores

  • Responsive Web Design
  • Mobile Web Best Practices
  • HTML5
  • Ahora en español

w3devcampus.com

Suite de validación de estándares

W3C Suite Validator

validator-suite.w3.org

¡Muchas Gracias!

martin@w3.org @espinr

http://www.w3c.es/Presentaciones/2014/0408-Responsive-MediaLab-MA

http://www.w3.org/Talks/2013/1001-CSS-Lyon/

http://www.w3.org/Talks/2013/0128-CSS-Utrecht/