Conferencia HTML5 y CSS3 por Alexandra García Milan
•
37 gefällt mir•6,238 views
Presentación sobre HTML5 y CSS3 realizada por Alexandra García MIlan
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (15)
Ähnlich wie Conferencia HTML5 y CSS3 por Alexandra García Milan
Ähnlich wie Conferencia HTML5 y CSS3 por Alexandra García Milan (20)
Mehr von Andres Karp
Mehr von Andres Karp (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Conferencia HTML5 y CSS3 por Alexandra García Milan
- 13. <header>
- 16. <nav>
- 19. <section>
- 22. <article>
- 25. <aside>
- 28. VIDEO & AUDIO
- 29. autoplay autobuffer width controls <Video> poster height loop
- 33. • Texto de advertencia • Agregando etiquetas source • Combinar con Flash
- 34. • Texto de advertencia • Agregando etiquetas source • Combinar con Flash
- 35. • Texto de advertencia • Agregando etiquetas source • Combinar con Flash
- 36. SIN CODEC DE VIDEO Y AUDIO
- 37. OGG Vorbis (Audio) POLÉMICA OGGTheora (Video)
- 38. APPLE H.264
- 39. OPERA Y MOZILLA H.264 OGGTheora
- 40. GOOGLE OGGTheora y H.264 VP8
- 42. autobuffer autoplay <Audio> controls loop Demo: http://01audiovideo.free.fr/ogg/1vs0_JuniorGroove.ogg
- 44. INTERACCIÓN CON LA ETIQUETA VIDEO & AUDIO
- 45. • Etiqueta <device> <device type=“media”/> • Acceso del video de la webcam / audio del mic
- 46. • Mostrando el video al propio usuario
- 47. • Grabando video / audio
- 48. • Enviar y recibir imágenes
- 49. CANVAS
- 50. 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/
- 53. CODIFICACIÓN
- 54. !DOCTYPE
- 55. HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd">
- 56. 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>
- 57. ELEMENTO RAIZ
- 58. HTML 4.01 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
- 59. HTML 4.01 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> HTML 5 <html lang="en">
- 60. CODIFICACIÓN
- 61. HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- 62. HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> HTML 5 <meta charset="utf-8"/>
- 63. LINK
- 64. HTML 4.01 <link rel="stylesheet" type="text/css" href="style-original.css"/>
- 65. HTML 4.01 <link rel="stylesheet" type="text/css" href="style-original.css"/> HTML 5 <link rel="stylesheet" href="style-original.css"/>
- 72. Más control sobre la forma
- 73. NOVEDADES CSS3
- 74. BORDER
- 75. - 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;"
- 76. -‐webkit-‐border-‐image: url(images/border.png) 27 repeat; -‐moz-‐border-‐image: url(images/border.png) 27 repeat; border-image
- 77. -‐webkit-‐border-‐radius: 5px; -‐moz-‐border-‐radius: 5px; border-radius -‐webkit-‐border-‐radius:0px 5px 0px 5px; -‐moz-‐border-‐radius:0px 5px 0px 5px;
- 78. -‐moz-‐box-‐shadow:3px 3px 6px #888888; -‐webkit-‐box-‐shadow:3px 3px 6px #888888; box-shadow
- 79. BACKGROUNDS
- 80. background-‐origin: border-‐box; background-‐origin: padding-‐box; padding-box boder-box <background-origin> background-‐origin: content-‐box; content-box
- 81. 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;
- 82. -‐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;
- 85. 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; }
- 86. 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; }
- 87. COLOR
- 88. Color:#f00; opacity:1.0; opacity Color:#f00; opacity:1.0; Valores entre: - 0 (transparente) - 1 (opaco)
- 89. 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)
- 90. TEXTO
- 91. distancia vertical distancia horizontal text-‐shadow: 10px 10px 10px #333; text-shadow desenfoque color-sombra
- 92. text-‐over9low:ellipsis ; text-overflow
- 93. LAYOUT
- 94. -‐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
- 95. @font-face { font-family: Gentium; src: url(http://site/fonts/Gentium.ttf); } @font-face p { font-family: Gentium; }
- 96. TRANSFORMATION
- 99. Matrix 3D Perspective Rotate 3D 3D TRANSFORMATION Scale 3D Translate 3D
- 103. 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/
- 104. 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/
- 105. 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/