html5 en acción
DESCRIPTION
Presentación de HTML5 que se hizo en Arequipa en el Instituto del Sur el 19.11.2011TRANSCRIPT
![Page 1: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/1.jpg)
HTML5 en Acción
Guisella Acuña
![Page 2: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/2.jpg)
¿Quién soy?
Guisella AcuñaDiseñadora web
![Page 3: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/3.jpg)
IETF hasta W3C: El camino a HTML4
HTML 2.0IETF
La etiqueta <img> aparece en esta especificación
![Page 4: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/4.jpg)
IETF hasta W3C: El camino a HTML4
HTML 4.01W3C
Especificación publicada en 1999
![Page 5: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/5.jpg)
XHTML1: HTML como XML
XHTML 1.0W3C
Especificación idéntica a la de HTML 4.01, excepto por la sintaxis
![Page 6: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/6.jpg)
WHATWG
WHATWG
Conformado por representantes de Opera, Apple y Mozilla
Editor Ian Hickson
![Page 7: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/7.jpg)
Web Apps 1.0 a HTML5
Web Forms 1.0 & Web Apps 1.0
Se busca permitir la creación de aplicaciones web
![Page 8: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/8.jpg)
Web Apps 1.0 a HTML5
HTML5
![Page 9: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/9.jpg)
Reunificación
HTML5
WHATWG une fuerzas con la W3C
![Page 10: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/10.jpg)
¿Cuándo estará listo?
![Page 11: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/11.jpg)
2022Según Ian Hickson
![Page 12: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/12.jpg)
2012Draft terminado
![Page 13: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/13.jpg)
![Page 14: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/14.jpg)
<!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
![Page 15: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/15.jpg)
Doctype HTML5
<!DOCTYPE html>
<html><meta charset="UTF-8"><title>Cool</title>
</head>...
![Page 16: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/16.jpg)
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
![Page 17: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/17.jpg)
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
![Page 18: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/18.jpg)
HTML5
Tú eliges
![Page 19: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/19.jpg)
Mantén un código limpio, te lo agradecerás más tarde
![Page 20: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/20.jpg)
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...
![Page 21: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/21.jpg)
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
![Page 22: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/22.jpg)
SEMÁNTICA
![Page 23: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/23.jpg)
Semántica
![Page 24: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/24.jpg)
Semántica
Nuevas etiquetas semánticas:
• section, article, aside, header, footer, nav, menu, hgroup, command, dialog, figure, details
![Page 25: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/25.jpg)
Semántica
![Page 26: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/26.jpg)
IE no reconoce las nuevas etiquetas
Semántica
![Page 27: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/27.jpg)
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
![Page 28: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/28.jpg)
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
![Page 29: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/29.jpg)
Web Forms 2.0
http://www.coreservlets.com/html5-tutorial/input-types.html
![Page 30: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/30.jpg)
OFFLINE & ALMACENAMIENTO
![Page 31: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/31.jpg)
Offline & Almacenamiento
DOM Storage
sessionStorage.setItem(key, value);sessionStorage.getItem(key);
localStorage.setItem(key,value);localStorage.getItem(key);
![Page 32: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/32.jpg)
Offline & Almacenamiento
<html manifest=”cache.manifest”>
Detección online / offline
window.addEventListener(‘online’,online, true);window.addEventListener(‘offline’,online, true);
![Page 33: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/33.jpg)
Offline & Almacenamiento
WebSQL Storage
Bases de datos de lado cliente usando SQL
![Page 34: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/34.jpg)
Offline & Almacenamiento
http://www.jstorage.info/
![Page 35: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/35.jpg)
ACCESO A DISPOSITIVOS
![Page 36: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/36.jpg)
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
![Page 37: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/37.jpg)
CONECTIVIDAD
![Page 38: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/38.jpg)
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.
![Page 39: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/39.jpg)
RENDIMIENTO E INTEGRACIÓN
![Page 40: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/40.jpg)
Rendimiento e Integración
• Web Workers
• XMLHttpRequest 2
• Acceso a archivos locales
![Page 41: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/41.jpg)
MULTIMEDIA
![Page 42: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/42.jpg)
Multimedia
• Video y Audio
• Audio Data API
• Time Track API
![Page 43: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/43.jpg)
3D, GRÁFICOS, EFECTOS
![Page 44: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/44.jpg)
3D, Gráficos, Efectos
• 2D Canvas
• WebGL
• SVG
• 3D CSS Transforms
• SMIL
![Page 45: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/45.jpg)
CSS3
![Page 46: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/46.jpg)
CSS3
• Transformaciones 2D y 3D
• Transiciones
• Web Fonts
• Multiples backgrounds
• text-shadow, box-shadow, border-radius
![Page 47: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/47.jpg)
Adopten las nuevas tecnologías y sigan adelante
![Page 48: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/48.jpg)
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)
![Page 49: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/49.jpg)
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
![Page 50: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/50.jpg)
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/
![Page 51: HTML5 en Acción](https://reader034.vdocuments.site/reader034/viewer/2022052321/555da859d8b42a45788b5a68/html5/thumbnails/51.jpg)
Gracias ^_^