HTML5 Y CSS 3  Antonio Valverde Rodríguez      Twitter: @valgreensvalverde@webmastergranada.es
INTRODUCCIÓN HTML 5 ES LA EVOLUCIÓN DEL HTML 4 YXHTML 1 AÚN EN DESARROLLO POR EL W3C    HTML5 ~= HTML + CSS + JS
INTRODUCCIÓN
INTRODUCCIÓN5 COSAS QUE DEBES SABER ANTES DE      EMPEZAR CON HTML 5
INTRODUCCIÓN   5 COSAS QUE DEBES SABER ANTES DE         EMPEZAR CON HTML 51. HTML5 NO ES UN GRAN BLOQUE
INTRODUCCIÓN    5 COSAS QUE DEBES SABER ANTES DE          EMPEZAR CON HTML 51. HTML5 NO ES UN GRAN BLOQUE2. NO NECESITAS T...
INTRODUCCIÓN    5 COSAS QUE DEBES SABER ANTES DE          EMPEZAR CON HTML 51. HTML5 NO ES UN GRAN BLOQUE2. NO NECESITAS T...
INTRODUCCIÓN    5 COSAS QUE DEBES SABER ANTES DE          EMPEZAR CON HTML 51. HTML5 NO ES UN GRAN BLOQUE2. NO NECESITAS T...
INTRODUCCIÓN    5 COSAS QUE DEBES SABER ANTES DE          EMPEZAR CON HTML 51. HTML5 NO ES UN GRAN BLOQUE2. NO NECESITAS T...
NOVEDADES EN HTML 5
NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos
NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos●Conjunto de APIs
NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos●Conjunto de APIs●Pos...
NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos●Conjunto de APIs●Pos...
NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos●Conjunto de APIs●Pos...
NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos●Conjunto de APIs●Pos...
NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos●Conjunto de APIs●Pos...
NOVEDADES EN HTML 5●Los tags ”únicos” ya no es obligatorio cerrarlos●Nuevos elementos, más semánticos●Conjunto de APIs●Pos...
¿SE PUEDE USAR YA?      Sí pero...
¿SE PUEDE USAR YA?                 Sí pero...✔ Hay que preocuparse de la retrocompatibilidad
¿SE PUEDE USAR YA?                 Sí pero...✔ Hay que preocuparse de la retrocompatibilidad ✔ Algunas tecnologías no está...
¿SE PUEDE USAR YA?                 Sí pero...✔ Hay que preocuparse de la retrocompatibilidad ✔ Algunas tecnologías no está...
¿SE PUEDE USAR YA?                 Sí pero...✔ Hay que preocuparse de la retrocompatibilidad ✔ Algunas tecnologías no está...
¿SE PUEDE USAR YA?                 Sí pero...✔ Hay que preocuparse de la retrocompatibilidad ✔ Algunas tecnologías no está...
!DOCTYPEXTML 1.1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/       xhtml11/DTD/xhtml11.dtd"...
CODIFICACIÓNXTML 1.1:     <meta http-equiv=”Content-Type”  content=”text/html; charset=utf-8” />HTML5:            <meta ch...
LINK / SCRIPTXTML 1.1:  <link rel=”stylesheet” type=”text/css”          href=”ejemplo.css” />      <script type=”text/java...
VIEJA ESTRUCTURA                <div id=”header”>                 <div id=”nav”>        <div id=”main”>                   ...
NUEVA ESTRUCTURA                    <header>                        <nav>            <section>                            ...
<HEADER>• Logo   y título• Navegación• Varios   encabezados
<NAV>• Puede   haber más de uno• Migas   de pan• Blogroll
<ARTICLE>• Artículos   de blog y periódico• Comentarios    y productos• Sindicable
<SECTION>• Agrupa    contenido semánticamente• Sirve   tanto para páginas y artículos
<ASIDE>• Sidebar• Anuncios
<FOOTER>• Puede   haber varios• Licencia, enlaces, etc
FIGURE/FIGCAPTION
FIGURE/FIGCAPTION<figure>   <img src="imagen.jpg" alt=" ">   <figcaption>Wheel</figcaption></figure>
<HGROUP>     Ha desaparecido de la especificación de HTML5                    recientementeOriginariamente se utilizaba par...
<TIME><time>2011-05-05</time>
<TIME>             <time>2011-05-05</time>datetime: permite declarar la fecha en un formato legible                    por...
<TIME>             <time>2011-05-05</time>datetime: permite declarar la fecha en un formato legible                    por...
ADIÓS A...   applet     big   center    font    frame    blink   marquee
3, 2, 1... ACCIÓN!    <audio>    <video>
<AUDIO> Y <VIDEO><audio src="cancion.???" > </audio><video src="video.???" > </video>
ATRIBUTOS
ATRIBUTOSautoplay: reproducción automática.
ATRIBUTOSautoplay: reproducción automática.controls: muestra los controles de vídeo nativos de cadanavegador. No aparecen ...
ATRIBUTOSautoplay: reproducción automática.controls: muestra los controles de vídeo nativos de cadanavegador. No aparecen ...
ATRIBUTOSautoplay: reproducción automática.controls: muestra los controles de vídeo nativos de cadanavegador. No aparecen ...
ATRIBUTOSautoplay: reproducción automática.controls: muestra los controles de vídeo nativos de cadanavegador. No aparecen ...
ATRIBUTOSautoplay: reproducción automática.controls: muestra los controles de vídeo nativos de cadanavegador. No aparecen ...
ATRIBUTOSautoplay: reproducción automática.controls: muestra los controles de vídeo nativos de cadanavegador. No aparecen ...
LA FORMA CORRECTA<video controls width="360" height="240"poster="caratula.jpg" >  <source src="vid.mp4" type="video/mp4" >...
GUERRA DE FORMATOSFormato    IE    Firefox   Safari   Chrome   Opera Ogg      NO      3.4+     NO        5.0+    10.5+ H26...
SOPORTE HTML5        Chrome        Firefox         Safari         Opera  Internet Explorer 9
SOPORTE HTML5Creamos los elementos nuevos con Javascript:  document.CreateElement(nav);document.CreateElement(header);docu...
HTML5 SHIV<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/ svn/trunk/html5.js" type="text/javascript"></ sc...
FORMULARIOS<input type=email> <input type=url> <input type=tel>
FORMULARIOSMás novedades y tipos de input
FORMULARIOSMás novedades y tipos de input   <input type=search>
FORMULARIOSMás novedades y tipos de input   <input type=search>   <input type=number>
FORMULARIOSMás novedades y tipos de input   <input type=search>   <input type=number>   <input type=range>
FORMULARIOSMás novedades y tipos de input   <input   type=search>   <input   type=number>   <input   type=range>   <input ...
FORMULARIOSMás novedades y tipos de input   <input type=search>   <input type=number>   <input type=range>   <input type=c...
FORMULARIOSMás novedades y tipos de input   <input type=search>   <input type=number>   <input type=range>   <input type=c...
FORMULARIOSMás novedades y tipos de input  <input type=search>  <input type=number>  <input type=range>  <input type=color...
FORMULARIOSMás novedades y tipos de input  <input type=search>  <input type=number>  <input type=range>  <input type=color...
FORMULARIOSMás novedades y tipos de input  <input type=search>  <input type=number>  <input type=range>  <input type=color...
LISTAS DONDE ELEGIR<input type=text list=payasos><datalist id=payasos>  <option value=Miliki>  <option value=Fofó>  <optio...
ATRIBUTOS
ATRIBUTOS  autofocus
ATRIBUTOS  autofocus placeholder
ATRIBUTOS  autofocus placeholder   pattern
ATRIBUTOS  autofocus placeholder   pattern  multiple
ATRIBUTOS  autofocus placeholder   pattern   multiple autocomplete
ATRIBUTOS  autofocus placeholder   pattern   multiple autocomplete   min/max
ATRIBUTOS  autofocus placeholder   pattern   multiple autocomplete   min/max     step
ATRIBUTOS  autofocus placeholder   pattern   multiple autocomplete   min/max     step   required
CSS 3
CSS 3Nuevas posibilidades de decoración
CSS 3Nuevas posibilidades de decoración         Menos markup
CSS 3Nuevas posibilidades de decoración         Menos markup Menos dependencia de javascript
CSS 3Nuevas posibilidades de decoración         Menos markup Menos dependencia de javascript         Mayor control
BACKGROUND             Multiple backgrounds:html{ background: url(img/arena.png) no-repeat 70% 20%, url(img/wall.png) repe...
RGBA Y HSLA             RGBa = RGB + alpha#foo {Background: rgba(0, 0, 0, .5);     Texto}#foo {Background: rgba(255, 0, 0,...
RGBA Y HSLA          HSLa = HSL + alpha#foo {Background: hsla(324, 100%, 75%, .5);}#foo {Background: hsla(324, 100%, 25%, ...
RGBA Y HSLA
@FONT-FACE     Permite incorporar tipografías no instaladas@font-face {font-family: lobster;src: url(lobster.ttf) format(t...
@FONT-FACE
@FONT-FACE      Google Font Directoryhttp://code.google.com/webfonts          Fontsquirrel  http://www.fontsquirrel.com/  ...
TEXT-SHADOWh1 {text-shadow: 3px 3px 5px black;}h1 {text-shadow: 5px 5px 0px blue;}
TEXT-SHADOW
BOX-SHADOW#foo { box-shadow: 5px 5px 10pxblack;}#foo { box-shadow: inset 3px 3px 5pxblack;}
BOX-SHADOW
BORDER-RADIUS#foo { border-radius: 10px;}#foo { border-radius: 50px 0 50px 0;}
BORDER-RADIUS
TRANSFORMS#foo { transform: rotate(45deg);}#foo { transform: scale(0.5);}
TRANSFORMS#foo { transform: skew(45deg);}#foo { transform: translate (20px,-20px);}
CSS 3 SHAPES#circle {   width: 140px;   height: 140px;   background: red;   -moz-border-radius: 70px;   -webkit-border-rad...
CSS 3 SHAPES#oval {   width: 200px;   height: 100px;   background: purple;   -moz-border-radius: 100px / 50px;   -webkit-b...
CSS 3 SHAPES#left-triangle {   width: 0;   height: 0;   border-right: 100px solid orange;   border-top: 50px solid transpa...
Y MUCHAS MÁS http://css3shapes.com/
PARA TERMINAR...         Polyfills:       Modernizr      HTML5 shiv  Google Chrome Frame     Frameworks:   HTML5 boilerplat...
RECURSOSOnline: - HTML5doctor - Dive into HTML5 - HTML5 Rocks - W3C HTML5 spec - Edition for Web Authors - WHATWG HTML5 sp...
MÁS RECURSOSLibros:- HTML5 for web designers, de Jeremy Keith- Introducing HTML5, de Bruce Lawson y Remy Sharp- HTML5: Up ...
PARA OJEAR Presentaciones (@htmlboy y @martuishere):http://swwweet.com/presentaciones/html5hoyhttp://www.slideshare.net/Ma...
¡GRACIAS!    :)
Upcoming SlideShare
Loading in...5
×

Introducción a HTML5 y CSS3 AWGR

5,397

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
5,397
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
289
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! :)
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×