Inicio

Willem Mulder

Consultor

• https://twitter.com/WillemMulder
• https://github.com/WillemMulder
• http://linkedin.com/in/WillemM

Cosas nuevas + largo alcance + gran impacto = ¡superior!

Visión general

• Historia (10 min)
• Qué es HTML5 (5 min)
• Demos HTML5 (50 min)
• HTML5 & móvil (5 min)
• Futuro HTML5 (5 min)
• Preguntas (10 min)
• Objeto interactivo (sin límite)
• Un vídeo de prueba (como tres minutos... creo)

Historia

• Aplicación de escritorio independiente
• Aplicación con conexiones en línea
• Problema
  • ¿Cómo actualizas tu aplicación?
  • ¿Cómo distribuyes tu aplicación? ¿Rango?
  • ¿Cómo se realiza la conexión desde internet?
• Simple: al crear tu aplicación en la web!
• Soluciones patentadas para muchas cosas (Flash, etc.)
• Más y más estandarización y apertura, liderados por grupos de trabajo, fabricantes de navegadores y ... Apple

¿Que es HTML5?

• Elementos HTML5
• Estilo CSS3
• Javascript
  • Trabajadores web
  • Almacenamiento fuera de línea
  • Drag&Drop
  • Carga de archivos XHR
  • Geolocalización
  • Contenido Editable
  • Pantalla completa
  • Mensajes cruzados de documentos
  • Web Audio
• SVG, Canvas 2D & 3D

======================= +

¿Y qué es exactamente compatible con tu navegador? http://beta.html5test.com/
¿qué características puedo usar? HTML5 Por favor
¿Y cuál es el soporte exacto del navegador?CanIUse.com

¡Demos!

• Elementos HTML5
• CSS3
• Javascript
• SVG
• Canvas 2D
• Canvas 3D

Elementos HTML5

Nuevos elementos de formulario

puedes hacer autofocus='true' para utilizar el enfoque automático

Elementos HTML5

Elementos semánticos

Elementos HTML5

Elementos semánticamente funcionales

voorbeeld

algún texto resaltado

0100 + =

Tu puntaje es uno 6,5!

24

11 november 1986

Lee http://www.html-site.nl/downloads/html5.pdf para una descripción completa

Canvas 2D

También simplemente 'canvas'

Canvas 3D

También 'WebGL'

• Streetview Stereografisch
• Experimento de ropa
• Lava
• Trigger Rally
• Pájaros en el sitio
• Hello Racer

Aplicaciones prácticas HTML5

• HTML: Formas
• HTML: Los motores de búsqueda
• CSS3: Decoración gráfica, velocidad
• Javascript: FParte frontal separada de la parte posterior, sin conexión
• Javascript: Comunicación en tiempo real
• Javascript: Integración con dispositivo
• SVG: Gráficos
• Canvas: Efectos gráficos, Lienzo de dibujo, Juegos

HTML5 & Móvil

• Diseño Responsive
• Phonegap

Futuro HTML5

• WebRTC
• Sandboxing / protección de código
• Y lo que los usuarios quieran ...

Preguntas y discusión

...

Un objeto interactivo

Un vídeo de Vimeo