HTML5 y CSS3

5,901 views

Published on

Published in: Technology
1 Comment
13 Likes
Statistics
Notes
No Downloads
Views
Total views
5,901
On SlideShare
0
From Embeds
0
Number of Embeds
121
Actions
Shares
0
Downloads
0
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

HTML5 y CSS3

  1. 1. HTML5 y CSS3
  2. 2. ¿Qué es HTML5? <ul><li>&quot;A fully open, uncontrolled platform forged by  widely respected standards bodies&quot; </li></ul><ul><li>steve jobs </li></ul><ul><ul><li>La mayor revisión de HTML </li></ul></ul><ul><ul><li>El siguiente estandar para HTML 4.01, XHTML 1.0 and DOM Level 2 HTM </li></ul></ul><ul><ul><li>Su objetivo es reducir la necesidad de utilizar plugins propietarios </li></ul></ul>
  3. 3. Algo de Contexto sobre HTML5 <ul><ul><li>Se comenzó a trabajar en junio de 2004 por WHATWG </li></ul></ul><ul><ul><li>  Adoptado por el W3C en 2007 </li></ul></ul><ul><ul><li>Ian Hickson Editor de HTML5 a dicho que espera completar el pliegue de condiciones para el W3C Candidate Realease duranbte el 2012 y la recomendación para el 2020 o más tarde. </li></ul></ul><ul><ul><li>Sin embargo muchas partes de la espeficicación son estables y pueden ser usadas. </li></ul></ul>
  4. 4. Semántica en HTML5 <ul><li>Los elementos, atributos y valores de los atributos están definidos para tener ciertos significados. Por ejemplo el elemento ol  respresenta una lista desorganizada y el atributo lang el idioma del contenido. </li></ul>
  5. 5. Estructura basica de un sitio HTML <ul><li>Uso de div para la distrubición del contenido. Ninguno de estos div s tiene significado semántico. </li></ul>
  6. 6. Estructura basica de un sitio en HTML5 <ul><li>La tendencia se convirtió en el estandar. Y como este caso aparecen muchas otras etiquetas nuevas, con contenido semanticas. </li></ul>
  7. 7. Etiquetas en HTML5 <ul><ul><li>Elementos estructurales:  section, header, footer, nav, article. </li></ul></ul><ul><ul><li>Elementos en bloque semanticos : aside, figure, dialog. </li></ul></ul><ul><ul><li>Elementos en linea semánticos:  mark, time, meter, progress </li></ul></ul><ul><ul><li>Embeber medios : Video, audio  </li></ul></ul><ul><ul><li>Interactividad:  details, datagrid, menu, command </li></ul></ul><ul><ul><li>http://www.w3schools.com/html5/   http://www.box.net/shared/gr6c5ufn9a </li></ul></ul>
  8. 8. ¿Qué se puede hacer? <ul><li>Comunicación </li></ul><ul><ul><li>Web Workers (ejecutar Javascript en background en multimples hilos) </li></ul></ul><ul><ul><li>Web Sockets </li></ul></ul><ul><li>Experiencia Desktop </li></ul><ul><ul><li>Notificaciones </li></ul></ul><ul><ul><li>Drag and Drop </li></ul></ul>
  9. 9. <Video>  <ul><ul><li>Ejemplos </li></ul></ul><ul><ul><ul><li>http://www.apple.com/html5/showcase/video/ </li></ul></ul></ul><ul><ul><ul><li>http://videojs.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.youtube.com/html5 </li></ul></ul></ul><ul><ul><ul><li>http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/ </li></ul></ul></ul><ul><ul><ul><li>http://jilion.com/sublime/video </li></ul></ul></ul><ul><ul><li>Cual es el problema con los codecs? </li></ul></ul><ul><ul><ul><li>WebM  (abierto) </li></ul></ul></ul><ul><ul><ul><li>H.264 (cerrado) </li></ul></ul></ul><ul><ul><ul><li>Ogg Theora (abierto) </li></ul></ul></ul><ul><ul><ul><li>MPEG-4  </li></ul></ul></ul><ul><ul><li>Solución: </li></ul></ul><ul><li>http://camendesign.com/code/video_for_everybody </li></ul>
  10. 10. <Video>  <ul><ul><li>Funciona en: </li></ul></ul><ul><ul><ul><li>Firefox 3.5+ </li></ul></ul></ul><ul><ul><ul><li>Chrome 3.0+ </li></ul></ul></ul><ul><ul><ul><li>Safari 3.1+ </li></ul></ul></ul><ul><ul><ul><li>Opera 10.5+ </li></ul></ul></ul><ul><ul><ul><li>Ademas en </li></ul></ul></ul><ul><ul><ul><ul><li>iPhone </li></ul></ul></ul></ul><ul><ul><ul><ul><li>iPod Touch </li></ul></ul></ul></ul><ul><ul><ul><ul><li>iPad </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Android OS  </li></ul></ul></ul></ul><ul><ul><li>Características </li></ul></ul><ul><ul><ul><li>Uso de controles nativos de browser </li></ul></ul></ul><ul><ul><ul><li>customización con CSS y tags HTML y Javascript </li></ul></ul></ul><ul><ul><li>Mas información: </li></ul></ul><ul><ul><ul><li>http://www.slideshare.net/jimjeffers/building-an-html5-video-player </li></ul></ul></ul>
  11. 11. <Audio> <ul><ul><li>Ejemplos: </li></ul></ul><ul><ul><ul><li>http://www.happyworm.com/jquery/jplayer/latest/demos.htm </li></ul></ul></ul><ul><ul><li>Cual es el problema con los codecs? </li></ul></ul><ul><ul><ul><li>PCM </li></ul></ul></ul><ul><ul><ul><li>MP3 </li></ul></ul></ul><ul><ul><ul><li>AAC </li></ul></ul></ul><ul><ul><ul><li>Ogg Vorbis </li></ul></ul></ul><ul><ul><ul><li>WebM  </li></ul></ul></ul>
  12. 12. <Canvas>   <ul><li>Puede ser usado para dibujar gráficos de forma dinámica, hacer composiciones a fotos, animaciones. </li></ul><ul><li>Ejemplos: aplicaciones Web como Paint y Photoshop, Tetris, Mario Bross, Navesitas, etc  http://www.phpguru.org/static/html5-examples </li></ul><ul><li>SVG  (Scalable Vector Graphics)   es un lenguaje para describir graficos 2D y aplicaciones graficas en XML </li></ul><ul><li>Si queremos graficos 3D entonces?   </li></ul><ul><li>WebGL. soportado por: Firefox, Chrome and Safari </li></ul><ul><li>http://www.youtube.com/watch?v=2rpKpj6ZO9w </li></ul>SVG
  13. 13. <Geolocalización> <ul><ul><li>Ejemplo: </li></ul></ul><ul><li>http://maxheapsize.com/static/html5geolocationdemo.html </li></ul><ul><ul><li>Funciona en: </li></ul></ul><ul><ul><ul><li>Firefox 3.5+ </li></ul></ul></ul><ul><ul><ul><li>Safari 5 </li></ul></ul></ul><ul><ul><ul><li>iPhone/iPod/iPad </li></ul></ul></ul><ul><ul><ul><li>Android </li></ul></ul></ul><ul><ul><li>Que opcion hay si no es soportado? </li></ul></ul><ul><ul><ul><li>Google Gears </li></ul></ul></ul><ul><ul><ul><ul><li>  funciona en Windows, Mac, Linux, Windows Mobile, y Android. </li></ul></ul></ul></ul>
  14. 14. Formularios <ul><ul><li><input type=&quot;search&quot;> for search boxes </li></ul></ul><ul><ul><li><input type=&quot;number&quot;> for spinboxes </li></ul></ul><ul><ul><li><input type=&quot;range&quot;> for sliders </li></ul></ul><ul><ul><li><input type=&quot;color&quot;> for color pickers </li></ul></ul><ul><ul><li><input type=&quot;tel&quot;> for telephone numbers </li></ul></ul><ul><ul><li><input type=&quot;url&quot;> for web addresses </li></ul></ul><ul><ul><li><input type=&quot;email&quot;> for email addresses </li></ul></ul><ul><ul><li><input type=&quot;date&quot;> for calendar date pickers </li></ul></ul><ul><ul><li><input type=&quot;month&quot;> for months </li></ul></ul><ul><ul><li><input type=&quot;week&quot;> for weeks </li></ul></ul><ul><ul><li><input type=&quot;time&quot;> for timestamps </li></ul></ul><ul><ul><li><input type=&quot;datetime&quot;> for precise, absolute date+time stamps </li></ul></ul><ul><ul><li><input type=&quot;datetime-local&quot;> for local dates and times </li></ul></ul><ul><li>placeholder text in an input field y form autofocus </li></ul>
  15. 15. Almacenamiento del lado del cliente <ul><ul><li>Almacenamiento Web,  </li></ul></ul><ul><ul><li>Base de datos SQL Web SQL  </li></ul></ul><ul><ul><li>Cache de aplicaciones </li></ul></ul><ul><li>Ejemplos: </li></ul><ul><ul><li>http://jsbin.com/iqura/4/   </li></ul></ul><ul><ul><li>http://webkit.org/demos/sticky-notes/index.html </li></ul></ul><ul><li>Aplicaciones de esta caracteristica: </li></ul><ul><ul><li>ahorrar tiempo de carga </li></ul></ul><ul><ul><li>trabajar offline </li></ul></ul><ul><ul><li>guardar archivos HTML, JavaScript, imagenes, inclusive videos </li></ul></ul>
  16. 16. En estructura que se podría hacer para local <ul><ul><li>Cambiar el doctype </li></ul></ul><ul><ul><li>Simplificar la linea del charset </li></ul></ul><ul><ul><li>Simplificar los elementos de llamado de script y estilos </li></ul></ul><ul><ul><li>Se pueden usar links en bloque </li></ul></ul><ul><ul><li>Usar los nuevos elementos de formulario con gracefull degradation para los navegadores que no lo soportan </li></ul></ul><ul><ul><li>Usar etiquetas semánticas como <header> , <section> , <footer> , <nav> , <time> , etc. Utilizando un script para los navegadores que no lo soportan. </li></ul></ul><ul><ul><li>Usar log tags <video> y <audio>  con gracefull degradation para los navegadores que no lo soportan. </li></ul></ul><ul><ul><li>Form 2.0 con gracefull degradation </li></ul></ul>
  17. 17. Beneficios adicionales de usar HTML5  <ul><ul><li>Moviles (Smart Phones) </li></ul></ul><ul><ul><ul><li>Aplicaciones Web (Desarrollo cross-device): </li></ul></ul></ul><ul><ul><ul><ul><li>Soporte Offline  </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Canvas y Video </li></ul></ul></ul></ul><ul><ul><ul><ul><li>API de Geolocalización </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Formularios Avanzados </li></ul></ul></ul></ul><ul><ul><ul><li>Frameworks de Aplicaciones: </li></ul></ul></ul><ul><ul><ul><ul><li>Phone Gap </li></ul></ul></ul></ul><ul><ul><ul><ul><li>QuickConnect </li></ul></ul></ul></ul><ul><ul><ul><ul><li>RhoMobile   </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Titanium Mobile </li></ul></ul></ul></ul><ul><ul><ul><ul><li>JQTouch </li></ul></ul></ul></ul>
  18. 18. Beneficios adicionales de usar HTML5  <ul><li>Los móviles van a impulsar la adopción de HTML5 . El iPhone, Google Android, Nokia, y el Palm Pre estan todos basados en el Browser de codigo abierto Webkit . Estos telefonos representaban el año pasado alrededor del 65% mercado de smart phones. </li></ul><ul><li>Quienes estan por fuera por ahora: </li></ul><ul><li>Windows Mobile y Blackberry (a menos que utilizen el browser de Opera) </li></ul><ul><ul><li>Semantica </li></ul></ul><ul><ul><ul><li>Microformatos  http://microformats.org/code-tools </li></ul></ul></ul><ul><ul><ul><li>SEO </li></ul></ul></ul>
  19. 19. ¿Es soportada por el browser? (1/2) <ul><ul><li>Averiguamos que características son soportadas por cada browser </li></ul></ul><ul><ul><ul><li>http://html5test.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.findmebyip.com/litmus/ </li></ul></ul></ul><ul><ul><li>Realizamos la validación </li></ul></ul><ul><ul><ul><li>Con alguna herramienta </li></ul></ul></ul><ul><ul><ul><ul><li>http://www.modernizr.com/ </li></ul></ul></ul></ul><ul><ul><ul><li>De forma manual </li></ul></ul></ul><ul><ul><ul><ul><li>mediante Javascript </li></ul></ul></ul></ul><ul><ul><ul><ul><li>http://diveintohtml5.org/everything.html </li></ul></ul></ul></ul><ul><ul><ul><ul><li>http://remysharp.com/2009/01/07/html5-enabling-script/ </li></ul></ul></ul></ul><ul><ul><ul><ul><li>  http://code.google.com/p/fiks-html5/ </li></ul></ul></ul></ul>
  20. 20. ¿Es soportada por el browser? (2/2) <ul><li>3.    Internet Explorer </li></ul><ul><ul><ul><li>  ¿debemos esperar hasta que IE decida soportar 100% HTML5? </li></ul></ul></ul><ul><ul><ul><li>  ¿debemos esperar hasta que IE pierda la mayoria de la participación del mercado? </li></ul></ul></ul><ul><ul><ul><li>  http://ie.microsoft.com/testdrive/ </li></ul></ul></ul>
  21. 21. Que es CSS3 <ul><ul><li>La nueva versión de CSS </li></ul></ul><ul><ul><li>Un nuevo set de propiedades visuales enfocadas en permitir mejor control y flexibilidad de los elementos. </li></ul></ul><ul><ul><li>CSS3 permite realizar efectos que en CSS2 no eran posibles y que implicaban usar imagenes y código innecesario para lograr la apariencia deseada. </li></ul></ul><ul><ul><li>CSS3 incluye también sintaxis nueva para manipular algunos elementos como las transformaciones y gradaciones. </li></ul></ul><ul><ul><li>CSS3 no remplaza sino que extiende a CSS2, CSS3 implica más funcionalidades, su soporte depende de cada navegador. </li></ul></ul>
  22. 22. CSS3 en acción <ul><ul><li>text-shadow </li></ul></ul><ul><ul><li>border-radius and box-shadow </li></ul></ul><ul><ul><li>webkit-transform ,  </li></ul></ul><ul><ul><li>transición de fade </li></ul></ul><ul><ul><li>Esquinas redondeadas </li></ul></ul><ul><ul><li>@font-face </li></ul></ul>
  23. 23. Progressive enhancement y CSS3 para local <ul><li>Respetando las funcionalidades y sin entorpecer los objetivos del usuario podemos hacer que los usuario con navegadores modernos obtengan una mejor experiencia. </li></ul><ul><ul><li>Esquinas redondeadas, Sombras, Sombras de texto, transiciones </li></ul></ul>
  24. 24. Sitios en HTML5 y CSS3 <ul><ul><li>Desktop </li></ul></ul><ul><ul><ul><li>http://tv.clicker.com/ </li></ul></ul></ul><ul><ul><ul><li>http://mugtug.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.youtube.com/watch?v=fyfu4OwjUEI&feature=player_embedded </li></ul></ul></ul><ul><ul><ul><li>http://vimeo.com/blog:268 </li></ul></ul></ul><ul><ul><ul><li>http://html5gallery.com/ </li></ul></ul></ul><ul><ul><li>Moviles </li></ul></ul><ul><ul><ul><li>http://www.nextstop.com/m2/ </li></ul></ul></ul><ul><ul><ul><li>  </li></ul></ul></ul><ul><ul><li>Otros ejemplos en HTML5, javascript y CSS3 </li></ul></ul><ul><ul><ul><li>http://mrdoob.com/ </li></ul></ul></ul><ul><ul><ul><li>http://html5demos.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.chromeexperiments.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.apple.com/html5/ </li></ul></ul></ul>
  25. 25. Para Resumir.. <ul><ul><li>http://apirocks.com/html5/html5.html#slide1 </li></ul></ul><ul><ul><li>http://vimeo.com/9680041 </li></ul></ul><ul><ul><li>http://diveintohtml5.org/ </li></ul></ul><ul><ul><li>http://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3 </li></ul></ul>

×