Your SlideShare is downloading. ×
  • Like
Html5 g@tv
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Html5 g@tv

  • 209 views
Published

Presentación básica sobre HTML5

Presentación básica sobre HTML5

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
209
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Programación Web Iago Fdez-Cedrón Fdez-Maquieira
  • 2. G@TV - HTML 5 • Introducción • Herramientas • Nuevas funcionalidades • Javascript • CSS3 Índice
  • 3. 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
  • 4. 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>
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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; };
  • 11. 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!)
  • 12. 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)
  • 13. 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
  • 14. 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