Html5 g@tv

Programación
Web
Iago Fdez-Cedrón Fdez-Maquieira

G@TV - HTML 5
• Introducción
• Herramientas
• Nuevas funcionalidades
• Javascript
• CSS3
Índice

G@TV - HTML 5
Introducción I
Conjunto de estándares y recomendaciones del W3C
Actualmente el estado en que se encuentran la
mayoría:
- Working Draft
- Candidate Recomendation
- Last Call Draft
Video
Forms
Geolocalization

G@TV - HTML 5
Introducción y II Diferencias HTML4
Más Sencillo:
HTML 4 HTML 5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DoctYpe HTml>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<meta charset="UTF-8">
Case Sensitive X
Estructura estricta X
Nuevas Etiquetas:
<nav> <aside> <article> <section> <header> <footer> <figure> <video> <audio>
<track> <canvas> <embed> <details> <menuitem> <time>

G@TV - HTML 5
Herramientas
Navegadores
Editores de texto
• Notepad++
• Ultraedit
• Eclipse
• SublimeText 2(Mac)
• Jsfiddle (http://jsfiddle.net/) online
Plug-ins Debug
• Firebug
• Herramientas de desarrollador de cada navegador

G@TV - HTML 5
Nuevas funcionalidades IVideo & Audio
- Introducir nativamente estos elementos
- <video></video> (Dependiendo del navegador)
- Mp4
- Ogv
- webM
- <audio></audio>
- API de control mediante Js.
- Introducción dentro del DOM
- Personalización
- Control de errores
- Librerías libres (video.js, Kaltura)
- Ejemplo http://www.barbafan.de/html5video?video=tron

G@TV - HTML 5
Nuevas funcionalidades IIGeolocalization & Forms
- GEO
- Obtener posición del navegador
- getCurrentPosition()
- Siempre hay que pedir permiso
- Forms
- Nuevos atributos para <input>
- Máximos y mínimos
- Fecha
- Validación
- Nuevos elementos
- Progress
- Output

G@TV - HTML 5
Nuevas funcionalidades IIILocal Storage & Offline Web
- Local Storage
- Cookies
- Mayor necesidad de almacenamiento
- Basado en paradigma Clave/Valor
- Dos tipos de objetos:
- localStorage
- sesionStorage
- Offline web
- <html manifest=“fichero”>
- Hasta que se borre cache nav
- Modifique el fichero
CACHE MANIFEST
# 2012-02-21 v1.0.0
/estilo.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

G@TV - HTML 5
Nuevas funcionalidades IVCanvas
- Lienzo para dibujar
- Animaciones 2D / 3D
- API Js
<canvas id=“miCanvas”> Su navegador no soporta Canvas </canvas>
var canvas = document.getElementById(‘miCanvas'); var context =
canvas.getContext('2d');
- Ejemplo
- http://www.craftymind.com/factory/html5video/CanvasVideo.html

G@TV - HTML 5
Nuevas funcionalidades VWeb Workers
- Generación de comandos en segundo plano
- Comunicación por paso de mensajes
- Es útil para:
- Procesado de gran cantidad de datos
- Llamadas AJAX (XHR  XMLHttpRequest)
- Procesos en paralelo (shareWorkers)
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
document.getElementById('result').textContent =
event.data; };

G@TV - HTML 5
Javascript Java is to Javascript like Ham is to Hamster
Basado en ECMAScript.
Interpretado en el navegador.
API’s para el control de los nuevos elementos basado en
eventos
Json (Javascript Object Notation)
Uso de Frameworks:
• jQuery
• Dojo
• Prototype
• MooTools
• Yui Library (Yahoo!)

G@TV - HTML 5
CSS3
• Diseño modular en contraposición a CSS2
• Transformaciones
• Selectores
• Animaciones
• Para algunas funcionalidades usar prefijos:
 -webkit- (Chrome, Safari)
 -ms- (iexplorer)
 -moz- (Firefox)
 -o- (Opera)

G@TV - HTML 5
http://www.w3.org/standards/techs/html#w3c_all
https://rawgithub.com/whatwg/html-differences/master/Overview.html
http://en.wikipedia.org/wiki/List_of_JavaScript_libraries
http://diveintohtml5.org/
http://html5boilerplate.com/
http://www.modernizr.com/
http://coding.smashingmagazine.com/2010/10/11/local-storage-and-how-to-
use-it/
http://webdesignish.com/best-html5-and-css3-frameworks.html
http://www.netmagazine.com/features/developer-s-guide-html5-apis
http://html5demos.com/
http://www.webappers.com/2009/08/10/70-must-have-css3-and-html5-
tutorials-and-resources/
http://net.tutsplus.com/tutorials/html-css-techniques/html5-javascript-apis/
http://www.w3schools.com/cssref/default.asp
http://caniuse.com/
Referencias y Webs de interés

G@TV - HTML 5
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-
and-audio/
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_HTML5_audio_and_video
http://www.html5rocks.com/en/
http://slides.html5rocks.com
http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
Referencias y Webs de interés

Html5 g@tv

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (11)

Destacado

Destacado (13)

Similar a Html5 g@tv

Similar a Html5 g@tv (20)

Último

Último (12)

Html5 g@tv