html5 en acción
DESCRIPTION
Presentación de HTML5 que se hizo en Arequipa en el Instituto del Sur el 19.11.2011TRANSCRIPT
HTML5 en Acción
Guisella Acuña
¿Quién soy?
Guisella AcuñaDiseñadora web
IETF hasta W3C: El camino a HTML4
HTML 2.0IETF
La etiqueta <img> aparece en esta especificación
IETF hasta W3C: El camino a HTML4
HTML 4.01W3C
Especificación publicada en 1999
XHTML1: HTML como XML
XHTML 1.0W3C
Especificación idéntica a la de HTML 4.01, excepto por la sintaxis
WHATWG
WHATWG
Conformado por representantes de Opera, Apple y Mozilla
Editor Ian Hickson
Web Apps 1.0 a HTML5
Web Forms 1.0 & Web Apps 1.0
Se busca permitir la creación de aplicaciones web
Web Apps 1.0 a HTML5
HTML5
Reunificación
HTML5
WHATWG une fuerzas con la W3C
¿Cuándo estará listo?
2022Según Ian Hickson
2012Draft terminado
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Cool</title>
</head>...
Doctype Pre-HTML5
Doctype HTML5
<!DOCTYPE html>
<html><meta charset="UTF-8"><title>Cool</title>
</head>...
No necesitamos atributo Type
<script type=”text/javascript”src=”script.js”></script><link type=”text/css” href=”style.css”></link>
<script src=”script.js”></script><link href=”style.css”></link>
Pre-HTML5
HTML5
XHTML
XHTML nos dejó:
• Etiquetas en minúscula
• Cerrar las etiquetas
• No dejar atributos en blanco (disabled=”disabled”)
• Siempre poner valores de atributos en comillas dobles
HTML5
Tú eliges
Mantén un código limpio, te lo agradecerás más tarde
Le decimos adiós a:
• frames (marcos)
• acronym, basefont, big, center, font, s strike, tt, u
• Atributo language en script y type en link
• Más atributos de presentación: cellpadding, cellspacing, width,
height en tablas y celdas, align, valign, size en inputs...
HTML5 nos trae:
• Web Applications 1.0
• Describe el comportamiento del navegador
• Describe estructura de página
• Nuevas etiquetas
• Nuevos atributos
• Nuevas habilidades en Javascript
• Definición del DOM
SEMÁNTICA
Semántica
Semántica
Nuevas etiquetas semánticas:
• section, article, aside, header, footer, nav, menu, hgroup, command, dialog, figure, details
Semántica
IE no reconoce las nuevas etiquetas
Semántica
JavaScript al rescate!
Semántica
Habilitar etiquetas HTML5http://remysharp.com/2009/01/07/html5-enabling-script/
CSS3http://css3pie.com/
Canvashttp://excanvas.sourceforge.net/
Modernizrhttp://www.modernizr.com
Web Forms 2.0
• Input types: date, time, email, url, color, search, number...
• Validación lado cliente
• El navegador provee una interfaz de usuario
• Atributos: placeholder, autofocus, autocomplete, required, min, max,...
• Validación con expresiones regulares
Web Forms 2.0
http://www.coreservlets.com/html5-tutorial/input-types.html
OFFLINE & ALMACENAMIENTO
Offline & Almacenamiento
DOM Storage
sessionStorage.setItem(key, value);sessionStorage.getItem(key);
localStorage.setItem(key,value);localStorage.getItem(key);
Offline & Almacenamiento
<html manifest=”cache.manifest”>
Detección online / offline
window.addEventListener(‘online’,online, true);window.addEventListener(‘offline’,online, true);
Offline & Almacenamiento
WebSQL Storage
Bases de datos de lado cliente usando SQL
Offline & Almacenamiento
http://www.jstorage.info/
ACCESO A DISPOSITIVOS
Acceso a dispositivos
• Geolocalización http://html5demos.com/geo
• Acceso a cámara y micrófono
• Acceso a contactos, calendario e inclinación del dispositivo
CONECTIVIDAD
Conectividad
• Conectividad más efectiva
• Web Sockets
• Mensajería en tiempo real, juegos más rápidos y mejor comunicación
• Intercambio de data entre cliente y servidor nunca fue tan rápida.
RENDIMIENTO E INTEGRACIÓN
Rendimiento e Integración
• Web Workers
• XMLHttpRequest 2
• Acceso a archivos locales
MULTIMEDIA
Multimedia
• Video y Audio
• Audio Data API
• Time Track API
3D, GRÁFICOS, EFECTOS
3D, Gráficos, Efectos
• 2D Canvas
• WebGL
• SVG
• 3D CSS Transforms
• SMIL
CSS3
CSS3
• Transformaciones 2D y 3D
• Transiciones
• Web Fonts
• Multiples backgrounds
• text-shadow, box-shadow, border-radius
Adopten las nuevas tecnologías y sigan adelante
Links Demos y Recursos
• http://www.chromeexperiments.com/
• http://html5demos.com/
• http://www.html5rocks.com/en/
• http://www.coreservlets.com/html5-tutorial/input-types.html
• http://jsbin.com/#javascript,html,live (para probar código en el
navegador)
• http://html5test.com/ (testing de compatibilidad)
Links HTML5 y CSS3
• http://www.nikebetterworld.com/ (ver como se hizo en http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-
better-world/ )
• http://www.culturalsolutions.co.uk/
• http://robedwards.org/
• http://www.viniltec.com.br
• http://www.netlashproject.be/
• http://teamviget.com/
• http://www.trifermed.com/
• http://www.nintendo.com.au/gamesites/mariokartwii/
• http://beta.theexpressiveweb.com/
• http://www.webkit.org/blog-files/3d-transforms/poster-circle.html
Experimentos HTML5
• http://mrdoob.com/
• http://nouvellevague.ultranoir.com/
• http://www.drawastickman.com/
• http://lights.elliegoulding.com
• http://www.thewildernessdowntown.com/
• http://www.chromeexperiments.com/
Gracias ^_^