Introducción a HTML5 y CSS3 AWGR

6,009 views

Published on

Diapositivas utilizadas en la charla de introducción a HTML5 y CSS3 organizada por la Asociación de Webmasters de Granada

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,009
On SlideShare
0
From Embeds
0
Number of Embeds
2,008
Actions
Shares
0
Downloads
341
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introducción a HTML5 y CSS3 AWGR

  1. 1. HTML5 Y CSS 3 Antonio Valverde Rodríguez Twitter: @valgreensvalverde@webmastergranada.es
  2. 2. INTRODUCCIÓN HTML 5 ES LA EVOLUCIÓN DEL HTML 4 YXHTML 1 AÚN EN DESARROLLO POR EL W3C HTML5 ~= HTML + CSS + JS
  3. 3. INTRODUCCIÓN
  4. 4. INTRODUCCIÓN5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5
  5. 5. INTRODUCCIÓN 5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 51. HTML5 NO ES UN GRAN BLOQUE
  6. 6. INTRODUCCIÓN 5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 51. HTML5 NO ES UN GRAN BLOQUE2. NO NECESITAS TIRAR NADA ANTERIOR AHTML 5
  7. 7. INTRODUCCIÓN 5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 51. HTML5 NO ES UN GRAN BLOQUE2. NO NECESITAS TIRAR NADA ANTERIOR AHTML 53. ES MUY FÁCIL EMPEZAR
  8. 8. INTRODUCCIÓN 5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 51. HTML5 NO ES UN GRAN BLOQUE2. NO NECESITAS TIRAR NADA ANTERIOR AHTML 53. ES MUY FÁCIL EMPEZAR4. YA FUNCIONA
  9. 9. INTRODUCCIÓN 5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 51. HTML5 NO ES UN GRAN BLOQUE2. NO NECESITAS TIRAR NADA ANTERIOR AHTML 53. ES MUY FÁCIL EMPEZAR4. YA FUNCIONA5. HA LLEGADO PARA QUEDARSE
  10. 10. NOVEDADES EN HTML 5
  11. 11. NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos
  12. 12. NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos●Conjunto de APIs
  13. 13. NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos●Conjunto de APIs●Posibilidad de acceder a dispositivos: <device>
  14. 14. NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos●Conjunto de APIs●Posibilidad de acceder a dispositivos: <device>●Canvas y microdatos
  15. 15. NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos●Conjunto de APIs●Posibilidad de acceder a dispositivos: <device>●Canvas y microdatos●WebWorkers, WebStorage, WebSockets y Web SQLDatabase
  16. 16. NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos●Conjunto de APIs●Posibilidad de acceder a dispositivos: <device>●Canvas y microdatos●WebWorkers, WebStorage, WebSockets y Web SQLDatabase●Geolocalización
  17. 17. NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos●Conjunto de APIs●Posibilidad de acceder a dispositivos: <device>●Canvas y microdatos●WebWorkers, WebStorage, WebSockets y Web SQLDatabase●Geolocalización●Mejoras en los formularios
  18. 18. NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos●Conjunto de APIs●Posibilidad de acceder a dispositivos: <device>●Canvas y microdatos●WebWorkers, WebStorage, WebSockets y Web SQLDatabase●Geolocalización●Mejoras en los formularios●Retrocompatible
  19. 19. ¿SE PUEDE USAR YA? Sí pero...
  20. 20. ¿SE PUEDE USAR YA? Sí pero...✔ Hay que preocuparse de la retrocompatibilidad
  21. 21. ¿SE PUEDE USAR YA? Sí pero...✔ Hay que preocuparse de la retrocompatibilidad ✔ Algunas tecnologías no están preparadas aún
  22. 22. ¿SE PUEDE USAR YA? Sí pero...✔ Hay que preocuparse de la retrocompatibilidad ✔ Algunas tecnologías no están preparadas aún ✔ El contenido tiene que ser siempre accesible
  23. 23. ¿SE PUEDE USAR YA? Sí pero...✔ Hay que preocuparse de la retrocompatibilidad ✔ Algunas tecnologías no están preparadas aún ✔ El contenido tiene que ser siempre accesible ✔ Se pueden complementar con javascript
  24. 24. ¿SE PUEDE USAR YA? Sí pero...✔ Hay que preocuparse de la retrocompatibilidad ✔ Algunas tecnologías no están preparadas aún ✔ El contenido tiene que ser siempre accesible ✔ Se pueden complementar con javascript (polyfills)
  25. 25. !DOCTYPEXTML 1.1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/ xhtml11/DTD/xhtml11.dtd">HTML5: <!DOCTYPE html>
  26. 26. CODIFICACIÓNXTML 1.1: <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />HTML5: <meta charset=utf-8>
  27. 27. LINK / SCRIPTXTML 1.1: <link rel=”stylesheet” type=”text/css” href=”ejemplo.css” /> <script type=”text/javascript” src=”jquery.js”></script>HTML5:<link rel=”stylesheet” href=”ejemplo.css”> <script src=jquery.js>
  28. 28. VIEJA ESTRUCTURA <div id=”header”> <div id=”nav”> <div id=”main”> <div <div <div id=”sidebar”>class=”post”> class=”post”> <div id=”footer”>
  29. 29. NUEVA ESTRUCTURA <header> <nav> <section> <aside><article> <article> <footer>
  30. 30. <HEADER>• Logo y título• Navegación• Varios encabezados
  31. 31. <NAV>• Puede haber más de uno• Migas de pan• Blogroll
  32. 32. <ARTICLE>• Artículos de blog y periódico• Comentarios y productos• Sindicable
  33. 33. <SECTION>• Agrupa contenido semánticamente• Sirve tanto para páginas y artículos
  34. 34. <ASIDE>• Sidebar• Anuncios
  35. 35. <FOOTER>• Puede haber varios• Licencia, enlaces, etc
  36. 36. FIGURE/FIGCAPTION
  37. 37. FIGURE/FIGCAPTION<figure> <img src="imagen.jpg" alt=" "> <figcaption>Wheel</figcaption></figure>
  38. 38. <HGROUP> Ha desaparecido de la especificación de HTML5 recientementeOriginariamente se utilizaba para agrupar encabezados con más de una etiqueta <h1>...<h6>
  39. 39. <TIME><time>2011-05-05</time>
  40. 40. <TIME> <time>2011-05-05</time>datetime: permite declarar la fecha en un formato legible por una máquina
  41. 41. <TIME> <time>2011-05-05</time>datetime: permite declarar la fecha en un formato legible por una máquina pubdate: especifica que es una fecha de publicación
  42. 42. ADIÓS A... applet big center font frame blink marquee
  43. 43. 3, 2, 1... ACCIÓN! <audio> <video>
  44. 44. <AUDIO> Y <VIDEO><audio src="cancion.???" > </audio><video src="video.???" > </video>
  45. 45. ATRIBUTOS
  46. 46. ATRIBUTOSautoplay: reproducción automática.
  47. 47. ATRIBUTOSautoplay: reproducción automática.controls: muestra los controles de vídeo nativos de cadanavegador. No aparecen por defecto.
  48. 48. ATRIBUTOSautoplay: reproducción automática.controls: muestra los controles de vídeo nativos de cadanavegador. No aparecen por defecto.poster: imagen de previsualización. Si no se especifica, elnavegador coge el primer fotograma.
  49. 49. ATRIBUTOSautoplay: reproducción automática.controls: muestra los controles de vídeo nativos de cadanavegador. No aparecen por defecto.poster: imagen de previsualización. Si no se especifica, elnavegador coge el primer fotograma.width, height: si no se especifican, se toman las del poster;si no, serán 300px por 150px.
  50. 50. ATRIBUTOSautoplay: reproducción automática.controls: muestra los controles de vídeo nativos de cadanavegador. No aparecen por defecto.poster: imagen de previsualización. Si no se especifica, elnavegador coge el primer fotograma.width, height: si no se especifican, se toman las del poster;si no, serán 300px por 150px.loop: reproduce el vídeo en bucle.
  51. 51. ATRIBUTOSautoplay: reproducción automática.controls: muestra los controles de vídeo nativos de cadanavegador. No aparecen por defecto.poster: imagen de previsualización. Si no se especifica, elnavegador coge el primer fotograma.width, height: si no se especifican, se toman las del poster;si no, serán 300px por 150px.loop: reproduce el vídeo en bucle.preload: precarga el vídeo.
  52. 52. ATRIBUTOSautoplay: reproducción automática.controls: muestra los controles de vídeo nativos de cadanavegador. No aparecen por defecto.poster: imagen de previsualización. Si no se especifica, elnavegador coge el primer fotograma.width, height: si no se especifican, se toman las del poster;si no, serán 300px por 150px.loop: reproduce el vídeo en bucle.preload: precarga el vídeo.src: indica la fuente del vídeo.
  53. 53. LA FORMA CORRECTA<video controls width="360" height="240"poster="caratula.jpg" > <source src="vid.mp4" type="video/mp4" > <source src="vid.ogv" type="video/ogg" > <p> Tu navegador no sorporta vídeo. Puedesdescargar este vídeo en formato <a href="vid.mp4">mp4<a> o en formato<a href="vid.ogv">Ogg<a>. </p></video>
  54. 54. GUERRA DE FORMATOSFormato IE Firefox Safari Chrome Opera Ogg NO 3.4+ NO 5.0+ 10.5+ H264 9.0+ NO 3.0+ 5.0+ NOWebM 9.0+ 4.0+ NO 5.0+ 10.6+
  55. 55. SOPORTE HTML5 Chrome Firefox Safari Opera Internet Explorer 9
  56. 56. SOPORTE HTML5Creamos los elementos nuevos con Javascript: document.CreateElement(nav);document.CreateElement(header);document.CreateElement(footer);document.CreateElement(article);document.CreateElement(section);
  57. 57. HTML5 SHIV<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/ svn/trunk/html5.js" type="text/javascript"></ script><![endif]-->
  58. 58. FORMULARIOS<input type=email> <input type=url> <input type=tel>
  59. 59. FORMULARIOSMás novedades y tipos de input
  60. 60. FORMULARIOSMás novedades y tipos de input <input type=search>
  61. 61. FORMULARIOSMás novedades y tipos de input <input type=search> <input type=number>
  62. 62. FORMULARIOSMás novedades y tipos de input <input type=search> <input type=number> <input type=range>
  63. 63. FORMULARIOSMás novedades y tipos de input <input type=search> <input type=number> <input type=range> <input type=color>
  64. 64. FORMULARIOSMás novedades y tipos de input <input type=search> <input type=number> <input type=range> <input type=color> <input type=date>
  65. 65. FORMULARIOSMás novedades y tipos de input <input type=search> <input type=number> <input type=range> <input type=color> <input type=date> <input type=time>
  66. 66. FORMULARIOSMás novedades y tipos de input <input type=search> <input type=number> <input type=range> <input type=color> <input type=date> <input type=time> <input type=datetime>
  67. 67. FORMULARIOSMás novedades y tipos de input <input type=search> <input type=number> <input type=range> <input type=color> <input type=date> <input type=time> <input type=datetime> <input type=month>
  68. 68. FORMULARIOSMás novedades y tipos de input <input type=search> <input type=number> <input type=range> <input type=color> <input type=date> <input type=time> <input type=datetime> <input type=month> <input type=week>
  69. 69. LISTAS DONDE ELEGIR<input type=text list=payasos><datalist id=payasos> <option value=Miliki> <option value=Fofó> <option value=Gaby></datalist>
  70. 70. ATRIBUTOS
  71. 71. ATRIBUTOS autofocus
  72. 72. ATRIBUTOS autofocus placeholder
  73. 73. ATRIBUTOS autofocus placeholder pattern
  74. 74. ATRIBUTOS autofocus placeholder pattern multiple
  75. 75. ATRIBUTOS autofocus placeholder pattern multiple autocomplete
  76. 76. ATRIBUTOS autofocus placeholder pattern multiple autocomplete min/max
  77. 77. ATRIBUTOS autofocus placeholder pattern multiple autocomplete min/max step
  78. 78. ATRIBUTOS autofocus placeholder pattern multiple autocomplete min/max step required
  79. 79. CSS 3
  80. 80. CSS 3Nuevas posibilidades de decoración
  81. 81. CSS 3Nuevas posibilidades de decoración Menos markup
  82. 82. CSS 3Nuevas posibilidades de decoración Menos markup Menos dependencia de javascript
  83. 83. CSS 3Nuevas posibilidades de decoración Menos markup Menos dependencia de javascript Mayor control
  84. 84. BACKGROUND Multiple backgrounds:html{ background: url(img/arena.png) no-repeat 70% 20%, url(img/wall.png) repeat left top; }
  85. 85. RGBA Y HSLA RGBa = RGB + alpha#foo {Background: rgba(0, 0, 0, .5); Texto}#foo {Background: rgba(255, 0, 0, .7); Texto}
  86. 86. RGBA Y HSLA HSLa = HSL + alpha#foo {Background: hsla(324, 100%, 75%, .5);}#foo {Background: hsla(324, 100%, 25%, .2);}
  87. 87. RGBA Y HSLA
  88. 88. @FONT-FACE Permite incorporar tipografías no instaladas@font-face {font-family: lobster;src: url(lobster.ttf) format(truetype);font-weight: normal;font-style: normal;}
  89. 89. @FONT-FACE
  90. 90. @FONT-FACE Google Font Directoryhttp://code.google.com/webfonts Fontsquirrel http://www.fontsquirrel.com/ Typekit http://typekit.com/
  91. 91. TEXT-SHADOWh1 {text-shadow: 3px 3px 5px black;}h1 {text-shadow: 5px 5px 0px blue;}
  92. 92. TEXT-SHADOW
  93. 93. BOX-SHADOW#foo { box-shadow: 5px 5px 10pxblack;}#foo { box-shadow: inset 3px 3px 5pxblack;}
  94. 94. BOX-SHADOW
  95. 95. BORDER-RADIUS#foo { border-radius: 10px;}#foo { border-radius: 50px 0 50px 0;}
  96. 96. BORDER-RADIUS
  97. 97. TRANSFORMS#foo { transform: rotate(45deg);}#foo { transform: scale(0.5);}
  98. 98. TRANSFORMS#foo { transform: skew(45deg);}#foo { transform: translate (20px,-20px);}
  99. 99. CSS 3 SHAPES#circle { width: 140px; height: 140px; background: red; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px;}
  100. 100. CSS 3 SHAPES#oval { width: 200px; height: 100px; background: purple; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px;}
  101. 101. CSS 3 SHAPES#left-triangle { width: 0; height: 0; border-right: 100px solid orange; border-top: 50px solid transparent; border-bottom: 50px solid transparent;}
  102. 102. Y MUCHAS MÁS http://css3shapes.com/
  103. 103. PARA TERMINAR... Polyfills: Modernizr HTML5 shiv Google Chrome Frame Frameworks: HTML5 boilerplate Switch to HTML5
  104. 104. RECURSOSOnline: - HTML5doctor - Dive into HTML5 - HTML5 Rocks - W3C HTML5 spec - Edition for Web Authors - WHATWG HTML5 spec - Edition for Web Developers - HTML5 gurus en Twitter, por Bruce Lawson - Can I Use?
  105. 105. MÁS RECURSOSLibros:- HTML5 for web designers, de Jeremy Keith- Introducing HTML5, de Bruce Lawson y Remy Sharp- HTML5: Up and Running, de Mark Pilgrim- Pro HTML5 Programming, de Peter Lubbers, BrianAlbers y Frank Salim- Foundation HTML5 Canvas, de Rob Hawkes
  106. 106. PARA OJEAR Presentaciones (@htmlboy y @martuishere):http://swwweet.com/presentaciones/html5hoyhttp://www.slideshare.net/Martulina/conoce- html5-y-css3-6893390 Página de Javier Casares: http://javiercasares.com/html5/
  107. 107. ¡GRACIAS! :)

×