Introducción a HTML5 ¿Qué es HTML5? ¿Por qué apostar por HTML5? ¿Qué puedo hacer con HTML5? En esta charla descubrirás todos los aspectos que hacen de estas nuevas tecnologías de desarrollo web una apuesta de presente y futuro. Los asistentes harán un recorrido por la evolución de las tecnologías web y los navegadores para saber de donde venimos. Se hará un minucioso repaso por las nuevas características y funcionalidades en HTML5, CSS3 y las nuevas Javascript API's. El momento actual es apasionante, los fabricantes de navegadores(IE, Firefox, Chrome, Opera, Safari) van a la carrera realizando nueva implementaciones de las nuevas especificaciones. La tecnología se está desarrollando en un amplio aspectro que abarca a grandes empresas, ingenieros de estas empresas, expertos, grupos de usuarios,... Existe un debate, pero la tecnología sigue evolucionando. Después de esta introducción sabrás en qué situación nos encontramos y cuales son las expectativas de cara al futuro. Toma posición y accede a un mercado con infinitas posibilidades! HTML5 es presente.

1. Bienvenidos
Introducción a HTML5
Yo soy @tessekkur y dirijo @HTML5MeetSpain

3. Introducción a HTML5
• ¿Qué es HTML5?
• ¿Por qué apostar por HTML5?
• ¿Qué puedo hacer con HTML5?

4. Qué es HTML5
• HTML5 = Buzzword
(http://www.whatwg.org/specs/)
• HTML5 es un conjunto de tecnologías de
desarrollo: HTML, CSS y Javascript
• HTML(5), CSS(3) y Javascript (API’s)
• The Web is the platform! - Mozilla.
Mozilla Rocks!

6. Qué es HTML5
• LIVING STANDARD!
• Web Semántica. Nuevas etiquetas y
atributos.
contenido: section, header, footer, nav, article.. texto: time, meter, progress..
Caution! tip: “The Truth About HTML5”
• No plugins! <VIDEO> & <AUDIO>
• 80-85% JS: Frameworks, MVC, OPP, Testing...
• Tiempo real, Almacenamiento, 3D, Games...

7. “Antes”
• IE6/10, Firefox, Chrome, Opera, Safari...
• Desktop
• W3C standard’s and rules
• HTML4, CSS 2, Javascript: jQuery,
MooTools,YUI,... validación formularios

8. No lo veo en mi navegador! - Cliente.
Antes me funcionaba, ahora no! - Cliente.
o_O
http://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg
Bye, bye IE6
Ojo! Lo dice Microsoft! http://www.ie6countdown.com/

9. Ahora!
• Modern Browser’s
• Smartphone’s, Tablet’s, SmartTV’s... y lo que
está por venir ;) > Google Glasses,
• W3C, WhatWG, IETF
• Fallbacks, Pollyfills
• Mobile First!

10. • iOS
1.0 > Jun. 2007. | 2.x > Jul. 2008 | 3.x Jun. 2009 | 4.x Jun 2010 | 5.x Jun 2011
Hace dos meses, iOS6!
tip: Experto 5 años de experiencia
• Android
Beta > Nov. 2007.
Version Comercial > Sept. 2008
2012 > 400 mill. de dispositivos
tip: Experto 4/5 años de experiencia
• Windows Phone 7 / 8
• Bada, Symbian, Blackberry10, FirefoxOS

11. Navegando por Internet:
‘MobileStyle’
- 4 Billones de dispositivos móviles.
- Sólo el 27%(1,08 Bill.) son Smartphones.
- En 2014 el uso de internet en el móvil será mayor que el uso
de Internet en el escritorio.
- El 86% usa sus dispositivos mientras ve la TV.
- 91% del acceso a Internet se realiza en redes sociales.
- Mujeres entre 35-54 años son el grupo ‘social’ más activo.

12. Por qué apostar por
HTML5
• Revolución tecnológica
• Fabricantes de navegadores, Fabricantes de
Software, Big Player’s
• Lo dijo Steve Jobs! Lo ha dicho Steve
Ballmer, lo dice... HTML5 Spain
• WebPlatform.org W3C, Adobe, Facebook, Google, HP. Opera, MS, Nokia, Mozilla, Opera
• Mobile, mobile, mobile

13. Qué puedo hacer con
HTML5
• Responsive Web Design vs Mobile
version vs Hybrid Apps vs Native Apps
• Innovar: WebRTC, WebSockets, WebGL,
CSS Regions, CSS Exclusions, Gamepad...
• Probar, probar, probar
• ¿Eres Developer?¿Eres curioso? Chrome
Flags, Canary, Aurora, Nightly Builds!

14. Referencias
• http://developers.whatwg.org/ WhatWG HTML5 For Web Developer’s
• http://dev.w3.org/html5/spec/ W3C HTML5 Spec
• http://www.w3.org/2008/webapps/ WebApps Working Group
• http://caniuse.com/ Puedo utilizarlo?
• http://html5test.com/index.html Tengo un navegador moderno?
• https://developer.mozilla.org/es/ Mozilla
• http://dev.opera.com/web Opera
• https://developer.blackberry.com/html5/ Blackberry
• http://ie.microsoft.com/testdrive/Default.html Microsoft
• http://developers.facebook.com/html5/ Facebook
• http://api.maps.nokia.com/en/index.html Mobile HTML5beta
• http://beta.theexpressiveweb.com/ Adobe: the expressive webbeta

15. Responsive
Image from: http://www.artistechnewmedia.com/thenest/2012/responsive-web-design/
Media queries > http://mediaqueri.es/

16. Mobile version
Mobile Patterns > http://www.mobile-
patterns.com
LungoJS, jQuery Mobile y muchos más!
Google Search: “html5 mobile framework” = 15 Mill. de resultados

17. Hybrid App
The hybrid approach
http://www.guardian.co.uk/info/developer-blog/2012/aug/28/html5-native-apps-hybrid-approach
Phonegap http://phonegap.com/
Titanium http://www.appcelerator.com/
Sencha http://www.sencha.com/products/touch

18. En marcha!
Layout > http://www.initializr.com/
Video/Audio > http://www.w3schools.com/tags/ref_av_dom.asp
CSS3 > http://css3generator.com/
Almacenamiento > http://www.w3schools.com/html/html5_webstorage.asp
Geolocalización > http://here.net (Nokia Maps)
Canvas > https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Basic_animations
WebGL > http://madebyevan.com/webgl-water/ | http://mrdoob.com/131/Clouds | http://
processingjs.org/exhibition/
WebRTC > http://html5-demos.appspot.com/static/getusermedia/photobooth.html | http://
webglmeeting.appspot.com/
Games > http://www.codeproject.com/Articles/396959/Mario5 | http://florian-rappl.de/News/Page/115/
supermario5

19. Y de cara al futuro?
• Device APIs WG (W3C)
http://www.w3.org/2009/dap/
• Payment API
http://www.wacapps.net/wac-apis
• Seguir Mobile HTML5!
http://mobilehtml5.org/
• Asistir a los eventos de HTML5 Spain! ;)

20. Ahora las preguntas!

21. HTML5!
¿Os he convencido?
Son muy importantes tus opiniones y
valoraciones.
Gracias!
html5spain@gmail.com