Conferencia HTML5 y CSS3 por Alexandra García Milan

11,050 views

Published on

Presentación sobre HTML5 y CSS3 realizada por Alexandra García MIlan

Published in: Education
7 Comments
38 Likes
Statistics
Notes
No Downloads
Views
Total views
11,050
On SlideShare
0
From Embeds
0
Number of Embeds
4,763
Actions
Shares
0
Downloads
1
Comments
7
Likes
38
Embeds 0
No embeds

No notes for slide

Conferencia HTML5 y CSS3 por Alexandra García Milan

  1. 1.  HTML (Hypertext Markup Lenguage)
  2. 2.  CSS (Cascading Style Sheets)
  3. 3.  NOVEDADES HTML 5
  4. 4. MEJOR ESTRUCTURA
  5. 5. <header>
  6. 6. <nav>
  7. 7. <section>
  8. 8. <article>
  9. 9. <aside>
  10. 10. VIDEO & AUDIO
  11. 11. autoplay autobuffer width controls <Video> poster height loop
  12. 12. VIDEO Demo:  http://html5demos.com/video    
  13. 13. •  Texto de advertencia •  Agregando etiquetas source •  Combinar con Flash
  14. 14. •  Texto de advertencia •  Agregando etiquetas source •  Combinar con Flash
  15. 15. •  Texto de advertencia •  Agregando etiquetas source •  Combinar con Flash
  16. 16. SIN CODEC DE VIDEO Y AUDIO
  17. 17. OGG Vorbis (Audio) POLÉMICA OGGTheora (Video)
  18. 18. APPLE H.264
  19. 19. OPERA Y MOZILLA H.264 OGGTheora
  20. 20. GOOGLE OGGTheora y H.264 VP8
  21. 21. autobuffer autoplay <Audio> controls loop Demo:  http://01audiovideo.free.fr/ogg/1vs0_JuniorGroove.ogg  
  22. 22. INTERACCIÓN CON LA ETIQUETA VIDEO & AUDIO
  23. 23. •  Etiqueta <device> <device type=“media”/> •  Acceso del video de la webcam / audio del mic
  24. 24. •   Mostrando el video al propio usuario
  25. 25. •  Grabando video / audio
  26. 26. •  Enviar y recibir imágenes
  27. 27. CANVAS
  28. 28. Ejemplos http://www.ernestdelgado.com/public-­‐tests/canvasphoto/demo/canvas.html   http://html9ive.appspot.com/static/draw.html   http://html5demos.com/canvas-­‐grad   http://www.kevs3d.co.uk/dev/canvask3d/k3d_test.html   http://www.feedtank.com/labs/html_canvas/  
  29. 29. http://www.findmebyip.com/#target-selector
  30. 30. CODIFICACIÓN
  31. 31. !DOCTYPE
  32. 32. HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd">
  33. 33. HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd"> HTML 5 <!DOCTYPE html>
  34. 34. ELEMENTO RAIZ
  35. 35. HTML 4.01 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">  
  36. 36. HTML 4.01 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">   HTML 5 <html lang="en">  
  37. 37.  CODIFICACIÓN
  38. 38. HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  39. 39. HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   HTML 5 <meta charset="utf-8"/>  
  40. 40. LINK
  41. 41. HTML 4.01 <link rel="stylesheet" type="text/css" href="style-original.css"/>  
  42. 42. HTML 4.01 <link rel="stylesheet" type="text/css" href="style-original.css"/>   HTML 5 <link rel="stylesheet" href="style-original.css"/>  
  43. 43. Más control sobre la forma
  44. 44. NOVEDADES CSS3
  45. 45. BORDER
  46. 46. - webkit-border-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;" - moz-border-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
 border-color - border: 8px solid #000;"
  47. 47. -­‐webkit-­‐border-­‐image:  url(images/border.png)  27  repeat;   -­‐moz-­‐border-­‐image:  url(images/border.png)  27 repeat; border-image
  48. 48. -­‐webkit-­‐border-­‐radius:  5px;   -­‐moz-­‐border-­‐radius:  5px;   border-radius -­‐webkit-­‐border-­‐radius:0px  5px  0px  5px;   -­‐moz-­‐border-­‐radius:0px  5px  0px  5px;  
  49. 49. -­‐moz-­‐box-­‐shadow:3px  3px  6px  #888888;   -­‐webkit-­‐box-­‐shadow:3px  3px  6px  #888888;   box-shadow
  50. 50. BACKGROUNDS
  51. 51. background-­‐origin:  border-­‐box;   background-­‐origin:  padding-­‐box;   padding-box boder-box <background-origin> background-­‐origin:  content-­‐box;   content-box
  52. 52. background-­‐color:#456;     border:  10px  dashed  #ABC;   -­‐moz-­‐background-­‐clip:  border;     -­‐webkit-­‐background-­‐clip:  border;   boder <background-clip> padding -­‐moz-­‐background-­‐clip:  padding;     -­‐webkit-­‐background-­‐clip:  padding;  
  53. 53. -­‐moz-­‐background-­‐size:  100%  50%;     -­‐moz-­‐background-­‐size:  50%  100%;     -­‐o-­‐background-­‐size:  100%  50%;     -­‐o-­‐background-­‐size:  50%  100%;   -­‐webkit-­‐background-­‐size:  100%  50%;   -­‐webkit-­‐background-­‐size:  50%  100%;   contain (eventual) height <background-size> width auto (eventual) -­‐moz-­‐background-­‐size:  contain;   cover (eventual) -­‐moz-­‐background-­‐size:  cover;  
  54. 54. MULTIPLES BACKGROUNDS
  55. 55. HTML 4 CSS 2 #fondo1{   <div  id="fondo1">        background-­‐image:  url(fondo1.gif);        <div  id="fondo2">        width:  300px;              <div  id="fondo3">   }   #fondo2{                    ….        background-­‐image:  url(fondo2.png);                    ...        background-­‐repeat:  no-­‐repeat;              </div>        background-­‐position:  bottom  right;        </div>   }   #fondo3{   </div>          background-­‐image:  url(fondo3.png);        background-­‐repeat:  no-­‐repeat;        background-­‐position:  center;   }  
  56. 56. HTML  5 CSS3 #fondos{   <div  id="fondos">        texto  de  un  único  elemento              background:  url(fondo3.png)    bottom  right  no-­‐repeat,          ...              url(fondo2.png)  center  no-­‐repeat,                url(fondo1.gif)  center  repeat;   </div>                width:  300px;   }  
  57. 57. COLOR
  58. 58. Color:#f00;      opacity:1.0;   opacity Color:#f00;      opacity:1.0;   Valores  entre:      -­  0  (transparente)    -­  1  (opaco)  
  59. 59. HTML 4 HTML 5  -­  HLS:  color  (hue,  sturation,  lightness)    -­  RGB:  color  (red,  gren,  blue)    -­  CMYK:  color  (cyan,  magenta,  yellow,  black)    -­  Hexadecimal:  color  (#abcdef)    -­  HLSA:  color  (hue,  sturation,  lightness,  alpha)    -­  DeHinición:  color  (white,  red,  black)    -­  RGBA:  color  (red,  gren,  blue,  alpha)  
  60. 60. TEXTO
  61. 61. distancia vertical distancia horizontal text-­‐shadow:  10px  10px  10px  #333;   text-shadow desenfoque color-sombra
  62. 62. text-­‐over9low:ellipsis  ;     text-overflow
  63. 63. LAYOUT
  64. 64. -­‐moz-­‐column-­‐width:  13em;     -­‐webkit-­‐column-­‐width:  13em;     -­‐moz-­‐column-­‐gap:  1em;     -­‐webkit-­‐column-­‐gap:  1em;   column-­‐width   moz-­‐column-­‐count:  3;     -­‐webkit-­‐column-­‐count:  3;     column-­‐gap   Layout column-­‐count  
  65. 65. @font-face { font-family: Gentium; src: url(http://site/fonts/Gentium.ttf); } @font-face p { font-family: Gentium; }
  66. 66. TRANSFORMATION
  67. 67. Matrix 3D Perspective Rotate 3D 3D TRANSFORMATION Scale 3D Translate 3D
  68. 68. PREFIJOS CROSS-BROWSING
  69. 69. -moz-box-shadow -webkit-box-shadow -o-box-shadow -ms-box-shadow
  70. 70. RECURSO SHTML 5 Frameworks basados en CSS3 y HTML5 http://52framework.com/ Páginas web realizadas en HTML5 http://html5gallery.com/ Demostraciones del uso de HTML 5 a través de múltiples ejemplos. http://html5demos.com/ CSS 3 Compatibilidad de los navegadores: http://www.findmebyip.com/litmus/#target-selector Te muestra ejemplos de CSS3 http://css3please.com/ Te genera el código y te pone con que navegador es compatible: http://css3generator.com/ Blog Especializado: http://www.css3.info/ Otro blog con gran catidad de información y recursos de calidad sobre CSS3. http://www.css3.com/
  71. 71. REFERENCIAS HTML 5 http://www.neoteo.com/html-5-y-el-futuro-de-internet-16399.neoPáginas web realizadas en HTML5 http://www.elwebmaster.com/actualidad/html-5-%C2%BFque-novedades-trae-la-nueva-version-de-este- lenguaje http://www.moio.org/blog/?p=125 http://www.findmebyip.com/#target-selector http://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3 http://www.conceptopixel.com/cdigos-de-css3-mas-propiedades-que-quiz-no-conocas-y-que-te-facilitaran-la-vida http://vagabundia.blogspot.com/2010/02/las-etiquetas-audio-y-video.html http://www.geeksdesdelau.com/2009/07/las-novedades-mas-importantes-de-html-5/ http://www.programacionweb.net/articulos/articulo/?num=762 http://www.craigward.net/
  72. 72. REFERNCIAS CSS 3 http://www.moio.org/blog/?p=125 http://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3 http://www.maestrosdelweb.com/editorial/css-3-mas-social-que-nunca/ http://theproc.es/2010/1/29/12237/manual-sobre-lo-nuevo-en-css-3 http://vagabundia.blogspot.com/2010/05/la-propiedad-background-clip.html https://developer.mozilla.org/en/CSS/-moz-background-origin http://www.css3.info/preview/background-size/ http://serenomoreno.com/2010/01/font-face-incrustar-tipografias-en-una-pagina-web/

×