HTML5 en Acción

HTML5 en Acción Guisella Acuña

¿Quién soy? Guisella Acuña Diseñadora web @DraRock guisella@bell-n-whistle.com www.bell-n-whistle.com

IETF hasta W3C: El camino a HTML4 HTML 2.0 IETF La etiqueta <img> aparece en esta especificación

IETF hasta W3C: El camino a HTML4 HTML 4.01 W3C Especificación publicada en 1999

XHTML1: HTML como XML XHTML 1.0 W3C 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 Pre-HTML5 <!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 HTML5 <!DOCTYPE html> <html> <meta charset="UTF-8"> <title>Cool</title> </head> ...

No necesitamos atributo Type Pre-HTML5 <script type=”text/javascript”src=”script.js”></script> <link type=”text/css” href=”style.css”></link> HTML5 <script src=”script.js”></script> <link href=”style.css”></link>

XHTMLXHTML 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ánticaNuevas etiquetas semánticas: • section, article, aside, header, footer, nav, menu, hgroup, command, dialog, figure, details

Semántica

Semántica IE no reconoce las nuevas etiquetas

Semántica JavaScript al rescate! Habilitar etiquetas HTML5 http://remysharp.com/2009/01/07/html5-enabling-script/ CSS3 http://css3pie.com/ Canvas http://excanvas.sourceforge.net/ Modernizr http://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 EINTEGRACIÓ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 • 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 ^_^

HTML5 en Acción

by drarock on Nov 22, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 1,378

Statistics

HTML5 en Acción — Presentation Transcript

http://blog.aqphost.com	1377
http://a0.twimg.com	1