Download - HTML5 y CSS3: como sacarles partido hoy
![Page 1: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/1.jpg)
FRONTDAYS
HTML5 y CSS3:cómo sacarles partido hoyJose FloridoMadrid · Martes 22 Septiembre 2009
www.frontdays.com
![Page 2: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/2.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Mostrar el potencial de los nuevos estándares, así como de los navegadores web de nueva generación y su uso hoy en día, logrando mantener nuestras páginas web compatibles con navegadores menos avanzados.
Objetivo del curso
![Page 3: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/3.jpg)
FRONTDAYS
HTML 5
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
![Page 4: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/4.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
‣ Historia ‣ Características‣ Novedades‣ APIs‣ Ejercicio práctico: creación de una página con HTML5
Primera parte: HTML5
![Page 5: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/5.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML 5Historia de HTML 5
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
![Page 6: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/6.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
HTML41998
![Page 7: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/7.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
XHTML12000
![Page 8: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/8.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
XHTML22002
![Page 9: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/9.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
XForms2003
![Page 10: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/10.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
WHATG2004
![Page 11: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/11.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
HTML52007
![Page 12: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/12.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
Hoy día, las aplicacione web necesitan:
‣ Reproducir video y audio‣ Acceso a recursos: webcam, micrófono, etc‣ Trabajar offline‣ 3D‣ Geolocalización‣ Mejores subidas de ficheros‣ Drag and drop‣ Complejos elementos de interacción con formularios
![Page 13: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/13.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de HTML5
¿2022?
‣ Final Draft en Octubre 2009‣ Nuevos navegadores: Chrome 3, FireFox 3.5.3, Opera 10, Safari 4‣ Google Wave‣ iPhone
![Page 14: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/14.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML 5Principales características
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
![Page 15: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/15.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Principales características
CompatibilidadEvolución, no revolución
![Page 16: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/16.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Principales características
UtilidadResolver problemas reales
![Page 17: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/17.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Principales características
InteroperabilidadDefinir el comportamiento de los UA
Gestión de errores
![Page 18: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/18.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Principales características
Acceso universalIndependencia del medio, i18n, accesible
![Page 19: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/19.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML 5Novedades
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
![Page 20: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/20.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Doctype<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
![Page 21: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/21.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Doctype<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
![Page 22: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/22.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Doctype
<!DOCTYPE html> :-)
![Page 23: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/23.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Tipos de contenido‣ Metadata content‣ Flow content‣ Sectioning content‣ Heading content‣ Phrasing content‣ Embedded content‣ Interactive content
![Page 24: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/24.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Metadata contentdefine la presentación o el comportamiento del resto del documento, o relaciones del documento con otros documentos.
base, command, link, meta, noscript, script, style, title
![Page 25: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/25.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Flow contentla mayoría de los elementos usados en el cuerpo de un documento son de tipo flow.
a, abbr address, article aside, audio, dialog, div, fieldset, figure, footer, form, h1, h2, img, nav, p, script, section, select, small, span, strong, table, textarea, time, video,...
![Page 26: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/26.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Sectioning contentelementos que crean nuevas secciones en el documento
article, aside, nav, section
![Page 27: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/27.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Heading contentelementos que definen la cabecera de una sección
h1, h2, h3, h4, h5, h6, hgroup
![Page 28: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/28.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Phrasing contenttexto del documento junto con elementos que marcan el texto, dentro de un párrafo
a, b, string, span, small, time, em,...
![Page 29: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/29.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Embedded contentelementos que importan otro recurso o contenido de otro vocabulario dentro del documento
audio, canvas, embed, iframe, img, math, object, svg, video
![Page 30: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/30.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Interactive contentelementos destinados a interacción con el usuario
a, audio, button, details, embed, iframe, img, input, keygen, label,menu, object, select, textarea, video
![Page 31: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/31.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Nuevos elementos‣ Elementos estructurales‣ Canvas‣ Video‣ Audio
![Page 32: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/32.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Elementos estructurales Isection representa una sección del documento. Junto con h1, h2,..., h6 indica la estructura del documento.
article representa una pieza de contenido independiente dentro de un documento.
aside representa una pieza de contenido que esta menos relacionada con el resto de la página.
![Page 33: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/33.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Elementos estructurales IIhgroup representa el encabezado de una sección. Agrupa varios elementos h1 - h6.
header representa la cabecera de un documento o sección.
footer representa el pie de una sección y puede contener información sobre el autor, copyright, etc.
![Page 34: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/34.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
<article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p> </section></article>
![Page 35: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/35.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Elementos estructurales IIInav representa una sección del documento que contiene navegación
dialog usado para marcar una conversación
figure usado para asociar una description textual o subtítulos a algún elemento embedido, como vídeos o imágenes.
![Page 36: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/36.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
<body> <header> <h1>Web page</h1> <nav> <h1>Navigation</h1> <ul> <li><a href="articles.html">Articles</a></li> <li><a href="today.html">Today</a></li> <li><a href="successes.html">Successes</a></li> </ul> </nav> </header> <article> <p>...page content would be here...</p> </article> <footer> <p>Copyright © 2006 The Example Company</p> <p><a href="about.html">About</a> - <a href="policy.html">Privacy Policy</a> - <a href="contact.html">Contact Us</a></p> </footer></body>
![Page 37: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/37.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Nuevos elementoscanvas crea un lienzo donde es posible crear gráficos u otras imágenes visuales al vuelo, mediante scripting.
![Page 38: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/38.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Canvas - accesibilidad
Contenido alternativo<canvas id="a_canvas" width="400" height="300"> <p>Ops! No canvas support, bad browser!</p></canvas>
Problemas de accesibilidad
![Page 39: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/39.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Canvas - soporte
Soporte extenso por parte de navegadores
* IE utilizando la librería excanvas.js
![Page 40: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/40.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Canvas - aplicaciones
Efectos y transformaciones (Demo)Animaciones (Demo)Tipografías (Cufón)
![Page 41: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/41.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Nuevos elementosvideo un método único para insertar video en la web.
![Page 42: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/42.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Video - atributos
<video src="http://www.test.com/video.wmv">your browser does not support the video tag</video>
Atributos
‣ poster‣ autobuffer‣ autoplay‣ loop‣ controls
![Page 43: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/43.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Video - formato / codecs
‣ Ogg Theora (Chrome, Firefox, Opera)‣ H.264 (Chrome, Safari)
![Page 44: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/44.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Video - soporte
Soportado por las últimas versiones de casi todos los navegadores, excepto IE
![Page 45: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/45.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Video - degradación grácil<video controls><source src="zombie.ogg" type="video/ogg"/><source src="zombie.mp4" type="video/mp4"/><embed src="http://blip.tv/play/AYGLzBmU8hw" type="application/x-shockwave-flash" width="500" height="396" allowscriptaccess="always" allowfullscreen="true"/></video>
![Page 46: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/46.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Nuevos elementosaudio un método único para insertar audio en la web.
![Page 47: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/47.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Audio - atributos
<audio src="http://www.test.com/video.wmv" controls></audio>
Atributos
‣ autobuffer‣ autoplay‣ loop‣ controls
![Page 48: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/48.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Audio - demo
HTML5 Audio player
![Page 49: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/49.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Audio - soporte
Soportado por las últimas versiones de casi todos los navegadores, excepto IE
![Page 50: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/50.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Nuevos reglas para el código
En HTML4 / XHTML1:
<li> <p><a href="http://www.google.com">Ir a google.com</a></p> <a href="http://www.google.com"><img src="" alt="logo de Google" /></a></li>
![Page 51: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/51.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Nuevos reglas para el código
En HTML5:
<li> <a href="http://www.google.com"> <p>Ir a google.com</p> <img src="" alt="logo de Google" /> </a></li>
![Page 52: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/52.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Elementos que desaparecenbasefontbigcenterfontsstrikettu frame
framesetnoframes acronymappletisindexdir
![Page 53: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/53.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Novedades
Forms
Opera 10 demo
![Page 54: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/54.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML 5APIs
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
![Page 55: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/55.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: APIs
APIs en navegadores‣ getElementsByClassName‣ querySelector‣ Almacenamiento de datos en el cliente, por sesión y persistente‣ Mensajes entre documentos‣ Drag-and-drop
![Page 56: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/56.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: APIs
getElementsByClassName(“abrir”)<li id="uno"> <p>Link 1</p> <a href="#" class="abrir">Abrir link 1</a></li><li id="dos"> <p>Link 2</p> <a href="#" class="abrir">Abrir link 2</a></li><li id="tres"> <p>Link 3</p> <a href="#" class="abrir">Abrir link 3</a></li>
![Page 57: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/57.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: APIs
querySelector(“#dos .abrir”)<li id="uno"> <p>Link 1</p> <a href="#" class="abrir">Abrir link 1</a></li><li id="dos"> <p>Link 2</p> <a href="#" class="abrir">Abrir link 2</a></li><li id="tres"> <p>Link 3</p> <a href="#" class="abrir">Abrir link 3</a></li>
![Page 58: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/58.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: APIs
Almacenamiento de datos en el cliente, por sesión y persistente
‣ Aplicaciones web offline
‣ Menor latencia
‣ Mejor rendimiento
‣ Mayor privacidad
‣ Safari Notes demo
![Page 59: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/59.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: APIs
Mensajes entre documentos
‣ Cross-domain
‣ Sin necesidad de configuración
‣ postMessage()
‣ John Resig´s messaging demo
![Page 60: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/60.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: APIs
Drag-and-drop
‣ Drag and drop nativo del sistema
‣ Arrastrar objetos al navegador y entre ventanas del navegador
‣ Drag-and-drop demo
‣ 280 slides video demo
![Page 61: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/61.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Ejercicio
Estructura
![Page 62: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/62.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Ejercicio
HTML4
![Page 63: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/63.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
HTML5: Ejercicio
HTML5
![Page 64: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/64.jpg)
FRONTDAYS
CSS 3
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
![Page 65: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/65.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
‣ Historia ‣ Selectores‣ Módulos y nuevas propiedades‣ Ejercicio práctico: aplicación de CSS3 a una página
Segunda parte: CSS3
![Page 66: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/66.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS 3Historia de CSS 3
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
![Page 67: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/67.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de CSS3
CSS11996
![Page 68: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/68.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de CSS3
CSS21998
![Page 69: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/69.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de CSS3
CSS32000 (WD)
![Page 70: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/70.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
Historia de CSS3
CSS2.12002 (WD)
![Page 71: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/71.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Principios
CompatibilidadHacia delante y hacia atrás
![Page 72: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/72.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Principios
ComplementariedadCambiar CSS si cambiar HTML
![Page 73: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/73.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Principios
IndependenciaDe plataforma y de dispositivo
![Page 74: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/74.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Principios
Simplicidad, flexibilidad, riquezaSencillo y potente
![Page 75: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/75.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Principios
AccesibilidadPosibilitar acceso universal
![Page 76: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/76.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS 3Selectores
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
![Page 77: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/77.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS1‣ de elemento: h1 { color: red; }‣ de clase: h1.alert { color: red; }‣ de ID: #alert { color: red; }‣ descendientes y contextuales: h1 em { color: red; }‣ pseudo-clases: a:link, a:visited, a:active, :first-line, :first-letter‣ comodín: div * p
![Page 78: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/78.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS2‣ selector universal (*): blockquote * { ... }‣ de atributo: a[href="http://www.google.com/"] { ... }‣ más pseudo-clases: :first-child, :hover, :focus, :active, :lang,
:before, :after‣ de hijos: div > p { ... }‣ de hermanos: h1 + h2 { ... }
![Page 79: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/79.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2‣ body > ol > li p
![Page 80: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/80.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2‣ body > ol > li p - Selecciona cualquier elemento p que es
descendiente de un elemento li que es hijo de un elemento ol que es hijo de un elemento body.
![Page 81: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/81.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2‣ p > * > em
![Page 82: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/82.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2‣ p > * > em - Selecciona cualquier elemento em que es hijo de
cualquier elemento que es hijo de un elemento p.
![Page 83: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/83.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2‣ a[title~="Mail"]
![Page 84: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/84.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2‣ a[title~="Mail"] - Selecciona cualquier elemento a con un atributo
title que contiene la palabra Mail.
![Page 85: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/85.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS3 I‣ nuevos selectores de atributo:
comienzo del atributoa[href^="ftp:"] { ... }
final del atributoa[href$=".edu"] { ... }
cualquier cadena contenido img[src*="photos"] { ... }
![Page 86: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/86.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Selectores
Selectores en CSS3 II‣ nuevas pseudo-clases:
:enabled, :disabled, :checked
Permiten cambiar la apariencia de los inputs de formulario, según su estado. No soportadas en IE7 ni en IE8
![Page 87: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/87.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS 3Módulos
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
![Page 88: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/88.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Módulos
Algunos otros módulos de CSS3‣ Colores‣ Modelo de caja‣ Fondos y bordes‣ Tipografía y efectos de texto‣ Layout multicolumna‣ Animaciones y transiciones
![Page 89: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/89.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Colores
Colores en CSS2‣ Hexadecimal - #RRGGBB‣ Hexadecimal, shorthand - #RGB‣ RGB- rgb(red, green, blue)‣ Nombres de colores - white, red, black, etc.
![Page 90: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/90.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Colores
Nuevos formatos de colores en CSS3‣ HLS - hsl(hue, saturation, lightness)‣ CMYK - cmyk(cyan, magenta, yellow, black)‣ HLSA - hlsa(hue, saturation, lightness, alpha)‣ RGBA - rgba(red, green, blue, alpha)
![Page 91: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/91.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Colores
Formato HLS‣ Intensidad, luz y saturación‣ Sencillo de manipular‣ Existente en programas de edición de imágenes, como Adobe
Photoshop‣ Adecuado para crear paletas de colores: sólo tienes que elegir el
color básico y no sus variantes claras/oscuras
![Page 92: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/92.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Colores
Formato CMYK‣ Cyan, magenta, amarillo y negro‣ Formato muy bien conocido por los diseñadores‣ Nos permite definir cómo nuestros colores serán impresos
![Page 93: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/93.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Colores
Formatos RGBA y HSLA‣ Añaden un cuarto parámetro: alpha‣ El canal alpha define la transparencia del color, va de 0
(totalmente transparente) a 1 (totalmente opaco)‣ La adición del canal alpha ofrece muchas nuevas posibilidades a
los diseñadores visuales.
![Page 94: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/94.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Colores
Si no hay soporte RGBA background-color: rgb(0%, 0%, 100%); background-color: rgba(0%, 0%, 100%, 0.5);
![Page 95: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/95.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Colores
RGBA y HSLA vs OPACITY‣ Opacity es una propiedad de CSS3 que modifica la transparencia
de todo el elemento. Por ejemplo un párrafo con opacity: 0.5 tendría su fondo semitrans, pero también su contenido (texto)
‣ El canal alpha nos permite modificar la transparencia del color de fondo del elemento, con lo que el contenido del elemento no se vería afectado.
![Page 96: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/96.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Colores
Soporte en navegadores‣ Las últimas versiones de Safari, Opera, Firefox y Chrome
soportan HSL, HSLA y RGBA‣ IE no soporta ninguno de los nuevos formatos‣ Ningún navegador soporta aún CMYK
![Page 97: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/97.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Modelo de caja
Modelo de caja‣ IE box model‣ W3C box model‣ Nueva propiedad: box-sizing: content-box / border-box
Soportado en FF 1.1, Safari 3, IE 8, Opera 9.5
![Page 98: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/98.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Fondos y bordes
Fondos y bordes‣ Degradados‣ Bordes redondeados‣ Sombras‣ Imágenes de borde‣ Imágenes de fondo
![Page 99: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/99.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Fondos y bordes
Degradadosbackground: -webkit-gradient(linear, 0 0, 100% 100%, from(#d0d0d0), to(#ffffff));
background: -moz-linear-gradient(20% center, 30% center, from(blue), to (yellow)) no-repeat;
Soportado por Safari y firefox.
![Page 100: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/100.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Fondos y bordes
Bordes redondeados-moz-border-radius-topleft / -webkit-border-top-left-radius-moz-border-radius-topright / -webkit-border-top-right-radius-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
![Page 101: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/101.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Fondos y bordes
Sombras (de caja)box-shadow: 10px 10px 5px #888;
![Page 102: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/102.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Fondos y bordes
Imágenes de bordeborder-image:border-corner-image:
![Page 103: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/103.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Fondos y bordes
Imágenes de fondoTamaño-o-background-size, -webkit-background-size, -khtml-background-size, -moz-background-size
Múltiples imágenes de fondobackground: url(img1.gif) top left no-repeat, url(img2.gif) bottom left no-repeat;
Soportado por Safari
![Page 104: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/104.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Layout multicolumna
Layout multicolumna‣ Número de columnas‣ Separacón entre columnas ‣ Bordes separadores
-moz-column-count -moz-column-width -moz-column-gap
-webkit-column-count-webkit-column-width-webkit-column-gap
![Page 105: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/105.jpg)
HTML5 y CSS3: cómo sacarles partido hoy FRONTDAYS
CSS3: Tipografía y efectos de texto
Tipografía y efectos de texto‣ Sombras en texto‣ Uso de tipografías (@font-face)
![Page 106: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/106.jpg)
¡Muchas gracias por venir!
![Page 107: HTML5 y CSS3: como sacarles partido hoy](https://reader031.vdocuments.pub/reader031/viewer/2022020105/546d753cb4af9f612c8b5341/html5/thumbnails/107.jpg)
FRONTDAYS
www.frontdays.com
Los mejores cursos en desarrollo frontendimpartidos por los mejores profesionales