Post on 21-May-2015
description
HTML5 en Acción
Guisella Acuña
¿Quién soy?
Guisella AcuñaDiseñadora web
@DraRockguisella@bell-n-whistle.comwww.bell-n-whistle.com
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 ^_^