1 / 47

a more

a more. web. ¿ Cómo hemos llegado aquí ?. Luis Guerrero Guirado Software developer at PlainConcepts lguerrero@plainconcepts.com twitter.com/ guerrerotook. Los primeros días. 1993. “I’d like to propose a new, optional HTML tag: IMG

ull
Download Presentation

a more

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. a more web ¿Cómohemosllegadoaquí? Luis Guerrero Guirado Software developer at PlainConcepts lguerrero@plainconcepts.com twitter.com/guerrerotook

  2. Los primerosdías 1993 “I’d like to propose a new, optional HTML tag:IMG This names a bitmap or pixmap file for the browser to attempt to pull over the networkand interpret as an image, to be embedded in the text at the point of the tag’s occurrence.” Marc Andressen

  3. Los primerosdías 1993 “[…]“how are we going to support embedded images” rather than “how are we going to support embedded objections in various media.” Otherwise, next week someone is going to suggest “let’s put in a new tag <AUD SRC="file://foobar.com/foo/bar/blargh.snd">” for audio.” Jay C. Webber

  4. HTML 2.0 - «retro-spec» 1994 “This specification brings together, clarifies, and formalizes a set of features that roughly corresponds to the capabilities of HTML in common use prior to June 1994.”

  5. HTML 3.X 1995 DaveRaggett propone HTML 3.0 Nunca fue implementado HTML 3.2 es estandarizado Como su predecesor es también «retro-spec»

  6. The W3C arrives 1997-1998 HTML 4.0 es publicado y el HTML WG es eliminado. XML 1.0 es publicado. “In discussions, it was agreed that further extending HTML 4.0 would be difficult, as would converting 4.0 to be an XML application. The proposed way to break free of theserestrictions is to make a fresh start with the next generation of HTML based upon a suite of XML tag-sets.”

  7. XHTML HTML es reformulado en XML con un nuevo mime type (application/xhtml+xml) Apéndice C permitió XHTML bajo text/html mime type 1998-1999

  8. XHTML 1.1 Apéndice C es borrado 2001

  9. Todo lo que sabes sobre XHTML es falso • Draconian error • Sobre el 99% de las páginas webs tienen al menos 1 error • Se usa algo que parece sintaxis XHTML, pero se mantiene el text/html MIME type • Muchas página están en XHTML 1.0, sólo unas pocas son XHTML 1.1

  10. WHAT Working Group HTML sin romper la web “W3C does not intend to put any resources into the third straw-poll topic: extensions to HTML and CSS for Web Applications, other than technologies being developed under the charter of current W3C Working Groups.” 2004

  11. WHAT Working Group Deciden trabajar fuera del W3C: “[…] to support features requested by authors, without breaking backward compatibility with existing content[…]” 2004

  12. W3C + WHAT • XHTML 2 es un borrador sin terminar • En octubre la W3C anuncia que trabajará con WHAT en HTML • Nacieron Web Applications 1.0 (HTML 5) 2006

  13. XHTM 2.0 ES ABANDONADO “While we recognize the value of the XHTML 2 Working Group’s contributions over the years, after discussion with the participants, W3C management has decided to allow the Working Group’s charter to expire at the end of 2009 and not to renew it.” 2009

  14. a more web HTML5 Alejandro Hidalgo Fernández MVP Internet Explorer. Development Advisor, Plain Concepts

  15. ¿Quées “HTML5”? • HTML5 es el futuro de la Web • HTML5 no es el asesino de Silverlight y Flash • HTML5 no es (solo) un mensaje de marketing • HTML5 no está completo, todavía • HTML5 es grande: testing no es Trivial • HTML5 necesita consenso • HTML5 no es CSS3, ni librerías de JS MostHypedTechnology

  16. ¿Debería de contarle a mi cliente que uso HTML5?

  17. En cuanto a SEO,¿Usar HTML5 puede afectar a mi web?

  18. Ventajas • Elementos semánticos • Compatibilidad hacia atrás • Orientado a aplicaciones web • Renderización muy rápida

  19. El mapa de “HTML5”

  20. Specification Status • First Public Working Draft • Working Draft • Candidate Recommendation • Proposed Recommendation • Recommendation • Call to implement • Last call HTML5

  21. Html5readiness.com

  22. ¿Es verdad que HTML5 tiene una sintaxis más permisiva? <IMG SRC=ttt.jpg> <imgsrc=ttt.jpg> <imgsrc="ttt.jpg"> <iMgSrC=ttt.jpg> <imgsrc="ttt.jpg" />

  23. !DOCTYPE <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> XHTML 1.0 Strict HTML5 • <! DOCTYPE html>

  24. Elemento raíz <html xmlns=http://www.w3.org/1999/xhtml lang=”es” xml:lang=”es”> XHTML 1.0 Strict HTML5 • <html lang=”es”>

  25. Codificación <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” /> XHTML 1.0 Strict HTML5 • <meta charset=”utf-8”>

  26. Links <link rel=”stylesheet” type =”text/css” href=”style.css”> XHTML 1.0 Strict HTML5 • <link rel=stylesheethref=style.css>

  27. Script <script type =”text/javascript” src=”jquery.js”></script> XHTML 1.0 Strict HTML5 <script src=jquery.js></script>

  28. Estructura Antigua <div id=”header”> <div id=”nav”> <div id=”main”> <div id=”sidebar”> <div class=”post”> <div class=”post”> <div id=”footer”>

  29. Etiquetas semánticas

  30. Etiquetas semánticas

  31. Polyfills <!-- [iflt IE 9]> <script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”> </script> <![endif] --> html5shim

  32. HTML5 • <Canvas> • <Audio> • <Video> • Elementossemánticos • Article, Section, Nav • Aside, Hgroup, Header, • Footer • Figure, Figcaption • Address

  33. Geolocalización • Permiteconocer la localizaciónfísica del usuario. • Forma parte del HTML5 • Essoportadopor la mayoria de los navegadores • IE9, FF3.5, Safari5, Chrome5, Opera10.6, iPhone3, Android2, WP7. • El usuariodebepermitiraccder a la información de localización function get_location() { navigator.geolocation.getCurrentPosition(show_map); } function get_location() { if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // no native support; maybe try Gears? } }

  34. demo GEO

  35. Local Storage • Permitealmacenarinformacionlocalmente en el navegador de manerapersistente. • Soportado en: • IE8, Firefox3.5, Safari4, Chrome4, Opera10.5, iPhone2, Android2, WP7.1 function supports_html5_storage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; } } if (Modernizr.localstorage) { // window.localStorage is available! } else { // no native support for HTML5 storage :( // maybe try dojox.storage or a third-party solution }

  36. Local Storage • El almacenamiento de HTML5 estábasado en pares de nombre / valor. El nombrees un string y el valor es un object. • Podemosescucharcambios en el local storage paranuestras apps • El resultadocontiene • Key • oldValue • newValue • url var foo = localStorage.getItem("bar"); // ... localStorage.setItem("bar", foo); if (window.addEventListener) { window.addEventListener("storage", handle_storage, false); } else { window.attachEvent("onstorage", handle_storage); };

  37. Offline storage • HTML5 tiene soporte para aplicaciones offline. • Las aplicaciones tienen recursos externos que son necesarios para que las aplicaciones puedan funcionar. • Para solucionar los recursos externos se ha definido un manifiesto de cache. <!DOCTYPE HTML> <html manifest="/cache.manifest"> <body> ... </body> </html> CACHE MANIFEST NETWORK: /tracking.cgi CACHE: /clock.css /clock.js /clock-face.jpg

  38. CSS3 • Bordesredondeados • Sombreado • Opacidad • Soporte de color RGBA

  39. CSS3 Media Queries • Media Queries permite definir propiedades de CSS para determinados medios, haciendo que se apliquen para determinados escenarios. • Hay definidos varios medios como screen, printer, ect • Por ejemplo en Windows8, Microsoft ha definido una serie de Media Queries para las aplicaciones portrait, landscape, ect. Full screen @media screen and (-ms-view-state: snapped) {  /* Re-arrange and hide/show content */} @media screen and (-ms-view-state: device-portrait) @media screen and (-ms-view-state: fill) @media screen and (-ms-view-state: full-screen) Fill Snap • Portrait

  40. SVG • Formasbásicas • Paths • Texto • Transformaciones • Dibujado, Relleno, Color • Scripting • Styling • Gradientes, Patrones

  41. CSS • Soportecompleto CSS 2. • Selectores • Border Radius • Backgrounds • Color & Opacidad • Fuentes WOFF • Box Shadow • Transformaciones 2D

  42. DOM/ECMA Script 262 • addEventListener • GetElementByClassName • Métodospara arrays • indexOf, lastIndexOf, forEach, every • Modelo de objetosmejorado • defineProperty,create, getPrototypeOf • Métodoscomputacionales • string.Trim, toISOString, data.parse, date.now, bind

  43. HTML5 en IE9

  44. Ejemplo de Video de HTML5

  45. Ejemplo de Canvas de HTML5

  46. Hasta el 8 de Mayo1. No Plugins. Solo HTML/CSS/JS en el lado del cliente.2. Internet Explorer 9, Firefox 4 y la última versión estable de Chrome.3. Viaje al MIX en las Vegaso 40.000$ en premios. PPT + Página de Test + Zip (5Mb Max) MÚSICA JUEGOS http://www.beautyoftheweb.com/#/unplugged

  47. Más información de HTML5 en http://www.beautyoftheweb.com/ http://geeks.ms/blogs/intensificatuexplorer/ msdn.com/ie http://dev.w3.org/html5/spec/Overview.htmlhttp://twitter.com/HTML5 http://www.html5doctor.com/ http://html5-showcase.com/ http://html5demos.com/

More Related