Successfully reported this slideshow.

HTML5 y CSS3

4,079 views

Published on

Presentación sobre HTML5 y CSS3 utilizada en los cursos de Paco Fortis.

Published in: Design
  • Be the first to comment

HTML5 y CSS3

  1. 1. HTML 5 y CSS 3
  2. 2. 2 HTML 5 ● Referencias históricas. Evolución de HTML y XHTML ● ¿Qué aporta HTML 5? ● Estructura de una página web. Semántica ● Diferencias entre HTML 5 y HTML 4.01 / XHTML 1.0 ● Formularios ● Incorporación de elementos multimedia ● Más etiquetas incorporadas en HTML 5 ● Webs offline ● ¿Únicamente para crear webs?
  3. 3. 3 Referencias históricas. Evolución de HTML y XHTML HTML HTML HTML 5.0 - Opera y Mozilla proponen HTML5 HTML 2.0 - Apple, Opera y Mozilla crean WHATWG para desarrollar HTML5 HTML 3.0 - W3C empieza a trabajar con WHATWG en HTML5 HTML 3.2 - Primer borrador de HTML5 - 1ª versión candidata HTML 4.0 - 2ª versión candidata HTML 4.01 XHTML 1.0 XHTML XHTML 1.1 XHTML 2.0 - Incompatible con todo lo anterior 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014
  4. 4. 4 ¿Qué aporta HTML 5? Algunas reglas establecidas para el desarrollo de HTML 5 ● ● ● ● ● ● Las nuevas características deben basarse en HTML, CSS, DOM y JavaScript Reducir la necesidad de plugins externos Mejor manejo de errores Algunas de las novedades más interesantes en HTML 5 ● Nuevas etiquetas para dar más significado a las páginas (semántica) ● Más control en los formularios ● Almacenamiento offline ● Soporte para audio y vídeo Más etiquetas para reemplazar scripting ● Debe ser independiente del dispositivo ● Sockets web ● Doctype sencillo ● XHTML 5 El proceso de desarrollo es visible para el público http://www.w3.org/TR/html5/ http://www.w3.org/html/wg/drafts/html/master/Overview.html El elemento canvas para crear dibujos y animaciones http://www.w3.org/TR/html5/introduction.html#html-vs-xhtml
  5. 5. 5 Estructura de una página web. Semántica Etiquetas para estructurar la web ● <header> ● <main> ● <nav> ● <section> ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/
  6. 6. 6 Estructura de una página web. Semántica Etiquetas para estructurar la web ● ● <header> Encabezados ● Títulos jerarquizados <main> ● <nav> ● <article> ● <aside> ● ● <section> ● <h1> ··· <h6> <header> <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ Encabezado del documento. Especifica una introducción o elementos de navegación ● Sectioning content: article, aside, nav, section HTML5 outliner: http://gsnedders.html5.org/outliner Advertencia: http://html5doctor.com/the-hgroup-element/
  7. 7. 7 Estructura de una página web. Semántica Etiquetas para estructurar la web ● <header> ● <main> ● <nav> ● <section> ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/
  8. 8. 8 Estructura de una página web. Semántica header Etiquetas para estructurar la web ● <header> ● <main> ● <nav> ● <section> ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/
  9. 9. 9 Estructura de una página web. Semántica header Etiquetas para estructurar la web ● <header> ● <main> ● <nav> ● <section> ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/
  10. 10. 10 Estructura de una página web. Semántica header Etiquetas para estructurar la web ● <header> ● <main> ● <nav> ● <section> ● <article> ● <aside> ● <footer> h1 Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/
  11. 11. 11 Estructura de una página web. Semántica header Etiquetas para estructurar la web ● <header> ● <main> h1 ● <nav> ● <section> ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ nav
  12. 12. 12 Estructura de una página web. Semántica header Etiquetas para estructurar la web ● <header> ● <main> ● <nav> ● <section> ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ h1 nav
  13. 13. 13 Estructura de una página web. Semántica header main Etiquetas para estructurar la web ● <header> ● <main> ● <nav> ● <section> ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ h1 nav
  14. 14. 14 Estructura de una página web. Semántica header main Etiquetas para estructurar la web ● <header> ● <main> ● <nav> ● <section> ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ h2 h1 nav
  15. 15. 15 Estructura de una página web. Semántica header main Etiquetas para estructurar la web ● <header> ● <main> ● <nav> ● <section> ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ h1 h2 div “slider” nav
  16. 16. 16 Estructura de una página web. Semántica header main Etiquetas para estructurar la web ● <main> ● <nav> ● <section> ● <article> ● <aside> ● <footer> h2 div “slider” <header> ● h1 Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ section “definitions” nav
  17. 17. 17 Estructura de una página web. Semántica header main Etiquetas para estructurar la web ● <main> ● <nav> ● <section> ● <article> ● <aside> ● <footer> h2 div “slider” <header> ● h1 Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ section “definitions” nav
  18. 18. 18 Estructura de una página web. Semántica header main article Etiquetas para estructurar la web ● <main> ● <nav> ● <section> ● <article> ● <aside> ● <footer> h2 div “slider” <header> ● h1 Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ section “definitions” nav
  19. 19. 19 Estructura de una página web. Semántica header main article Etiquetas para estructurar article la web ● <main> ● <nav> ● <section> ● <article> ● <aside> ● <footer> nav h2 div “slider” article <header> ● h1 Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ section “definitions”
  20. 20. 20 Estructura de una página web. Semántica header main article h1 Etiquetas para estructurar article la web h1 ● <main> ● <nav> ● <section> ● <article> ● <aside> ● <footer> nav h2 div “slider” article h1 <header> ● h1 Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ section “definitions”
  21. 21. 21 Estructura de una página web. Semántica header main Etiquetas para estructurar la web ● <main> nav h2 div “slider” <header> ● h1 ● <nav> ● <section> ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ section “definitions” article article article
  22. 22. 22 Estructura de una página web. Semántica header main Etiquetas para estructurar la web ● <main> nav h2 div “slider” <header> ● h1 ● <nav> ● <section> ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ section “definitions” article aside article article
  23. 23. 23 Estructura de una página web. Semántica header main Etiquetas para estructurar la web ● <main> nav h2 div “slider” <header> ● h1 ● <nav> ● <section> ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ section “definitions” article aside section “news” article article
  24. 24. 24 Estructura de una página web. Semántica header main Etiquetas para estructurar la web ● <main> nav h2 div “slider” <header> ● h1 ● <section> article <nav> ● section “definitions” ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ aside section “news” article article
  25. 25. 25 Estructura de una página web. Semántica header main Etiquetas para estructurar la web h1 nav h2 div “slider” article ● <header> ● <main> ● <section> article <nav> ● section “definitions” ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ aside section “news” article article
  26. 26. 26 Estructura de una página web. Semántica header main Etiquetas para estructurar la web h1 nav h2 div “slider” article header ● <header> ● <main> ● <section> article <nav> ● section “definitions” ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ aside section “news” article article
  27. 27. 27 Estructura de una página web. Semántica header main Etiquetas para estructurar la web h1 nav h2 div “slider” article header ●h1 <header> ● <main> ● <section> article <nav> ● section “definitions” ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ aside section “news” article article
  28. 28. 28 Estructura de una página web. Semántica header main Etiquetas para estructurar la web article header ●h1 <header> ● h2 div “slider” article header h1 h1 <section> section “definitions” article <nav> ● ● <article> ● <aside> ● nav article header <main> ● h1 <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ aside section “news” article article
  29. 29. 29 Estructura de una página web. Semántica header main Etiquetas para estructurar la web ● <main> nav h2 div “slider” <header> ● h1 ● <nav> ● <section> ● <article> ● <aside> ● <footer> Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ section “definitions” article article article article article aside section “news” article
  30. 30. 30 Estructura de una página web. Semántica header main Etiquetas para estructurar la web ● <main> nav h2 div “slider” <header> ● h1 ● <nav> ● <section> ● <article> ● <aside> ● section “definitions” article article article article aside section “news” article <footer> footer Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ article
  31. 31. 31 Estructura de una página web. Semántica header main Etiquetas para estructurar la web ● nav h2 div “slider” <header> ● h1 <main> ● <nav> ● article section “definitions” article <section> ● <article> ● <aside> ● aside section “news” article <footer> footer Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ article article article
  32. 32. 32 Estructura de una página web. Semántica header main Etiquetas para estructurar la web section ● nav h2 div “slider” <header> ● h1 <main> ● <nav> ● article section “definitions” article <section> ● <article> ● <aside> ● aside section “news” article <footer> footer Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ article article article
  33. 33. 33 Estructura de una página web. Semántica header main Etiquetas para estructurar la web section ● <header> ● h1 nav h2 div “slider” h1 <main> ● <nav> ● article section “definitions” article <section> ● <article> ● <aside> ● aside section “news” article <footer> footer Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ article article article
  34. 34. 34 Estructura de una página web. Semántica header main Etiquetas para estructurar la web section ● <header> ● h1 h1 nav h2 div “slider” section h1 section h1 <main> ● <nav> ● article section “definitions” article <section> ● <article> ● <aside> ● aside section “news” article <footer> footer Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ article article article
  35. 35. 35 Estructura de una página web. Semántica header main Etiquetas para estructurar la web ● <main> nav h2 div “slider” <header> ● h1 ● <nav> ● <section> ● <article> ● <aside> ● section “definitions” article article article article article aside section “news” article <footer> footer Advertencias: http://html5doctor.com/avoiding-common-html5-mistakes/ http://www.w3.org/TR/html5/sections.html#the-section-element http://html5doctor.com/aside-revisited/ section section section
  36. 36. 36 Diferencias entre HTML 5 y HTML 4.01 / XHTML 1.0 Estructura HTML 5 <!DOCTYPE HTML> <html lang="es"> <head> <meta charset="utf-8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <header id="cabecera"> <!-- Contenido de la cabecera --> <nav id="menuPrincipal"><!-- Menú principal --></nav> </header> <aside id="colIzq"> <!-- Contenido de la columna izquierda --> </aside> <main id="colCentro"> <!-- Contenido de la columna central --> <article> <!-- Artículo 1 --> </article> <article> <!-- Artículo 2 --> </article> </main> <footer id="pie"><!-- Contenido del pie --></footer> </div> </body> </html> Estructura HTML 4.01 / XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <div id="cabecera"> <!-- Contenido de la cabecera --> <div id="menuPrincipal"><!-- Menú principal --></div> </div> <div id="colIzq"> <!-- Contenido de la columna izquierda --> </div> <div id="colCentro"> <!-- Contenido de la columna central --> <div class="articulo"> <!-- Artículo 1 --> </div> <div class="articulo"> <!-- Artículo 2 --> </div> </div> <div id="pie"><!-- Contenido del pie --></div> </div> </body> </html>
  37. 37. 37 Diferencias entre HTML 5 y HTML 4.01 / XHTML 1.0 Estructura HTML 5 <!DOCTYPE HTML> <html lang="es"> <head> <meta charset="utf-8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <header id="cabecera"> <!-- Contenido de la cabecera --> <nav id="menuPrincipal"><!-- Menú principal --></nav> </header> <aside id="colIzq"> <!-- Contenido de la columna izquierda --> </aside> <main id="colCentro"> <!-- Contenido de la columna central --> <article> <!-- Artículo 1 --> </article> <article> <!-- Artículo 2 --> </article> </main> <footer id="pie"><!-- Contenido del pie --></footer> </div> </body> </html> Estructura HTML 4.01 / XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <div id="cabecera"> <!-- Contenido de la cabecera --> <div id="menuPrincipal"><!-- Menú principal --></div> </div> <div id="colIzq"> <!-- Contenido de la columna izquierda --> </div> <div id="colCentro"> <!-- Contenido de la columna central --> <div class="articulo"> <!-- Artículo 1 --> </div> <div class="articulo"> <!-- Artículo 2 --> </div> </div> <div id="pie"><!-- Contenido del pie --></div> </div> </body> </html>
  38. 38. 38 Diferencias entre HTML 5 y HTML 4.01 / XHTML 1.0 Estructura HTML 5 <!DOCTYPE HTML> <html lang="es"> <head> <meta charset="utf-8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <header id="cabecera"> <!-- Contenido de la cabecera --> <nav id="menuPrincipal"><!-- Menú principal --></nav> </header> <aside id="colIzq"> <!-- Contenido de la columna izquierda --> </aside> <main id="colCentro"> <!-- Contenido de la columna central --> <article> <!-- Artículo 1 --> </article> <article> <!-- Artículo 2 --> </article> </main> <footer id="pie"><!-- Contenido del pie --></footer> </div> </body> </html> Estructura HTML 4.01 / XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <div id="cabecera"> <!-- Contenido de la cabecera --> <div id="menuPrincipal"><!-- Menú principal --></div> </div> <div id="colIzq"> <!-- Contenido de la columna izquierda --> </div> <div id="colCentro"> <!-- Contenido de la columna central --> <div class="articulo"> <!-- Artículo 1 --> </div> <div class="articulo"> <!-- Artículo 2 --> </div> </div> <div id="pie"><!-- Contenido del pie --></div> </div> </body> </html>
  39. 39. 39 Diferencias entre HTML 5 y HTML 4.01 / XHTML 1.0 Estructura HTML 5 <!DOCTYPE HTML> <html lang="es"> <head> <meta charset="utf-8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <header id="cabecera"> <!-- Contenido de la cabecera --> <nav id="menuPrincipal"><!-- Menú principal --></nav> </header> <aside id="colIzq"> <!-- Contenido de la columna izquierda --> </aside> <main id="colCentro"> <!-- Contenido de la columna central --> <article> <!-- Artículo 1 --> </article> <article> <!-- Artículo 2 --> </article> </main> <footer id="pie"><!-- Contenido del pie --></footer> </div> </body> </html> Estructura HTML 4.01 / XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <div id="cabecera"> <!-- Contenido de la cabecera --> <div id="menuPrincipal"><!-- Menú principal --></div> </div> <div id="colIzq"> <!-- Contenido de la columna izquierda --> </div> <div id="colCentro"> <!-- Contenido de la columna central --> <div class="articulo"> <!-- Artículo 1 --> </div> <div class="articulo"> <!-- Artículo 2 --> </div> </div> <div id="pie"><!-- Contenido del pie --></div> </div> </body> </html>
  40. 40. 40 Diferencias entre HTML 5 y HTML 4.01 / XHTML 1.0 Estructura HTML 5 <!DOCTYPE HTML> <html lang="es"> <head> <meta charset="utf-8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <header id="cabecera"> <!-- Contenido de la cabecera --> <nav id="menuPrincipal"><!-- Menú principal --></nav> </header> <aside id="colIzq"> <!-- Contenido de la columna izquierda --> </aside> <main id="colCentro"> <!-- Contenido de la columna central --> <article> <!-- Artículo 1 --> </article> <article> <!-- Artículo 2 --> </article> </main> <footer id="pie"><!-- Contenido del pie --></footer> </div> </body> </html> Estructura HTML 4.01 / XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <div id="cabecera"> <!-- Contenido de la cabecera --> <div id="menuPrincipal"><!-- Menú principal --></div> </div> <div id="colIzq"> <!-- Contenido de la columna izquierda --> </div> <div id="colCentro"> <!-- Contenido de la columna central --> <div class="articulo"> <!-- Artículo 1 --> </div> <div class="articulo"> <!-- Artículo 2 --> </div> </div> <div id="pie"><!-- Contenido del pie --></div> </div> </body> </html>
  41. 41. 41 Diferencias entre HTML 5 y HTML 4.01 / XHTML 1.0 Estructura HTML 5 Estructura HTML 4.01 / XHTML 1.0 <!DOCTYPE HTML> <html lang="es"> <head> <meta charset="utf-8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <header id="cabecera"> <!-- Contenido de la cabecera --> <nav id="menuPrincipal"><!-- Menú principal --></nav> </header> <aside id="colIzq"> <!-- Contenido de la columna izquierda --> </aside> <main id="colCentro"> <!-- Contenido de la columna central --> <article> <!-- Artículo 1 --> </article> <article> <!-- Artículo 2 --> </article> </main> <footer id="pie"><!-- Contenido del pie --></footer> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <div id="cabecera"> <!-- Contenido de la cabecera --> <div id="menuPrincipal"><!-- Menú principal --></div> </div> <div id="colIzq"> <!-- Contenido de la columna izquierda --> </div> <div id="colCentro"> <!-- Contenido de la columna central --> <div class="articulo"> <!-- Artículo 1 --> </div> <div class="articulo"> <!-- Artículo 2 --> </div> </div> <div id="pie"><!-- Contenido del pie --></div> </div> </body> </html>
  42. 42. 42 Diferencias entre HTML 5 y HTML 4.01 / XHTML 1.0 Estructura HTML 5 <!DOCTYPE HTML> <html lang="es"> <head> <meta charset="utf-8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <header id="cabecera"> <!-- Contenido de la cabecera --> <nav id="menuPrincipal"><!-- Menú principal --></nav> </header> <aside id="colIzq"> <!-- Contenido de la columna izquierda --> </aside> <main id="colCentro"> <!-- Contenido de la columna central --> <article> <!-- Artículo 1 --> </article> <article> <!-- Artículo 2 --> </article> </main> <footer id="pie"><!-- Contenido del pie --></footer> </div> </body> </html> Estructura HTML 4.01 / XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <div id="cabecera"> <!-- Contenido de la cabecera --> <div id="menuPrincipal"><!-- Menú principal --></div> </div> <div id="colIzq"> <!-- Contenido de la columna izquierda --> </div> <div id="colCentro"> <!-- Contenido de la columna central --> <div class="articulo"> <!-- Artículo 1 --> </div> <div class="articulo"> <!-- Artículo 2 --> </div> </div> <div id="pie"><!-- Contenido del pie --></div> </div> </body> </html>
  43. 43. 43 Diferencias entre HTML 5 y HTML 4.01 / XHTML 1.0 Estructura HTML 5 <!DOCTYPE HTML> <html lang="es"> <head> <meta charset="utf-8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <header id="cabecera"> <!-- Contenido de la cabecera --> <nav id="menuPrincipal"><!-- Menú principal --></nav> </header> <aside id="colIzq"> <!-- Contenido de la columna izquierda --> </aside> <main id="colCentro"> <!-- Contenido de la columna central --> <article> <!-- Artículo 1 --> </article> <article> <!-- Artículo 2 --> </article> </main> <footer id="pie"><!-- Contenido del pie --></footer> </div> </body> </html> Estructura HTML 4.01 / XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <div id="cabecera"> <!-- Contenido de la cabecera --> <div id="menuPrincipal"><!-- Menú principal --></div> </div> <div id="colIzq"> <!-- Contenido de la columna izquierda --> </div> <div id="colCentro"> <!-- Contenido de la columna central --> <div class="articulo"> <!-- Artículo 1 --> </div> <div class="articulo"> <!-- Artículo 2 --> </div> </div> <div id="pie"><!-- Contenido del pie --></div> </div> </body> </html>
  44. 44. 44 Diferencias entre HTML 5 y HTML 4.01 / XHTML 1.0 Estructura HTML 5 <!DOCTYPE HTML> <html lang="es"> <head> <meta charset="utf-8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <header id="cabecera"> <!-- Contenido de la cabecera --> <nav id="menuPrincipal"><!-- Menú principal --></nav> </header> <aside id="colIzq"> <!-- Contenido de la columna izquierda --> </aside> <main id="colCentro"> <!-- Contenido de la columna central --> <article> <!-- Artículo 1 --> </article> <article> <!-- Artículo 2 --> </article> </main> <footer id="pie"><!-- Contenido del pie --></footer> </div> </body> </html> Estructura HTML 4.01 / XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <div id="cabecera"> <!-- Contenido de la cabecera --> <div id="menuPrincipal"><!-- Menú principal --></div> </div> <div id="colIzq"> <!-- Contenido de la columna izquierda --> </div> <div id="colCentro"> <!-- Contenido de la columna central --> <div class="articulo"> <!-- Artículo 1 --> </div> <div class="articulo"> <!-- Artículo 2 --> </div> </div> <div id="pie"><!-- Contenido del pie --></div> </div> </body> </html>
  45. 45. 45 Diferencias entre HTML 5 y HTML 4.01 / XHTML 1.0 Estructura HTML 5 <!DOCTYPE HTML> <html lang="es"> <head> <meta charset="utf-8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <header id="cabecera"> <!-- Contenido de la cabecera --> <nav id="menuPrincipal"><!-- Menú principal --></nav> </header> <aside id="colIzq"> <!-- Contenido de la columna izquierda --> </aside> <main id="colCentro"> <!-- Contenido de la columna central --> <article> <!-- Artículo 1 --> </article> <article> <!-- Artículo 2 --> </article> </main> <footer id="pie"><!-- Contenido del pie --></footer> </div> </body> </html> Estructura HTML 4.01 / XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>Título del sitio</title> </head> <body> <div id="contenedor"> <div id="cabecera"> <!-- Contenido de la cabecera --> <div id="menuPrincipal"><!-- Menú principal --></div> </div> <div id="colIzq"> <!-- Contenido de la columna izquierda --> </div> <div id="colCentro"> <!-- Contenido de la columna central --> <div class="articulo"> <!-- Artículo 1 --> </div> <div class="articulo"> <!-- Artículo 2 --> </div> </div> <div id="pie"><!-- Contenido del pie --></div> </div> </body> </html>
  46. 46. 46 Formularios ● Nuevos tipos de <input> ● Nuevos atributos ● Nuevas etiquetas: – <datalist> – <keygen> – <output>
  47. 47. 47 Nuevos tipos de <input> ● color ● date, datetime, datetime-local, month, week, time ● email ● number ● range ● search ● tel ● url
  48. 48. 48 Nuevos atributos
  49. 49. 49 Incorporación de elementos multimedia ● <video> ● <audio> ● <canvas>
  50. 50. 50 <video> Etiquetas ● <video> ● <source> ● <track> Atributos de <video> ● src ● height, width ● controls ● autoplay ● preload (auto, metadata, none) ● loop ● poster ● muted ● crossorigin ● mediagroup <video src="video.ogv" width="1024" height="436" controls="controls" preload="auto" poster="poster.jpg"> Por favor <a href="http://browsehappy.com/">actualiza el navegador</a> para mejorar la experiencia de uso. </video> http://diveintohtml5.info/video.html http://camendesign.com/code/video_for_everybody <video width="320" height="240" controls="controls"> <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <a href="webDelVideo"><img src="poster.jpg" alt="video" /></a> </video>
  51. 51. 51 <audio> Etiquetas ● <audio> ● <source> ● <audio src="rebirth.ogg" controls="controls" preload="auto" autoplay="autoplay" loop="loop"> Por favor <a href="http://browsehappy.com/">actualiza el navegador</a> para mejorar la experiencia de uso. </audio> <track> Atributos de <audio> ● src ● controls ● autoplay ● preload (auto, metadata, none) ● loop ● muted ● crossorigin ● mediagroup <audio id="rebirth" controls="controls" preload="auto"> <source src="rebirth.ogg" type="audio/ogg"> <source src="rebirth.mp3" type="audio/mpeg"> <p>Por favor <a href="http://browsehappy.com/">actualiza el navegador</a> para mejorar la experiencia de uso.</p> </audio>
  52. 52. 52 <canvas> Atributos ● width ● height Advertencia: No se puede dibujar sin utilizar JavaScript http://www.chromeexperiments.com/ http://weavesilk.com/ http://mugtug.com/sketchpad/ <canvas id="dibujo" width="400" height="400"> Su navegador no soporta HTML5.<br /> Por favor <a href="http://browsehappy.com/">actualice el navegador</a> para mejorar la experiencia de uso. </canvas> <canvas id="logotipo" width="100" height="120"> <img src="logo.png" alt="Logotipo" /> </canvas>
  53. 53. 53 Otras etiquetas incorporadas en HTML 5 <figure> <img src="img/setas_MAC.jpg" alt="Metropol Parasol en Sevilla" /> <figcaption>Fotografía de <span>Manuel Ángel Carmona</span></figcaption> </figure> Etiquetas ● <details>, <summary> ● <time> ● <meter> ● <progress> ● <figure>, <figcaption> ● <mark> <p>Compra <meter value="3" min="0" max="4">paso 3 de 4</meter></p> Curiosidad: http://www.webmonkey.com/2011/11/w3c-adds-time-element-back-to-html5/
  54. 54. 54 Webs offline The cache manifest (El manifiesto de cache) <html lang="es" manifest="cache.appcache"> CACHE MANIFEST # v:01 rev:001 CACHE: NETWORK: FALLBACK: CACHE MANIFEST /clock.css /clock.js /clock-face.jpg http://html5css3.somosalumnos.com CACHE MANIFEST NETWORK: /tracking.cgi CACHE: /clock.css /clock.js /clock-face.jpg CACHE MANIFEST FALLBACK: / /offline.html NETWORK: * Código de http://diveintohtml5.info/
  55. 55. 55 ¿Únicamente para crear webs? http://html5test.com/
  56. 56. 56 CSS 3 ● CSS Level 3 ● Selectores ● Valores y unidades ● Colores y transparencias ● Fuentes ● Nuevas propiedades ● Funciones ● Media Queries ● CSS Template Layout Module http://css3test.com/
  57. 57. 57 CSS Level 3 ● ● ● ● ● ● Las hojas de estilo en cascada (CSS) no tienen versiones en el sentido tradicional, sino niveles Cada nivel de CSS se basa en el anterior, refinando definiciones y añadiendo características CSS Level 1: Todas las características de CSS 1 pero con la sintaxis indicada en CSS 2.1 CSS Level 2: Lo define la especificación CSS 2.1 CSS Level 3: Se basa en CSS Level 2 módulo a módulo, utilizando CSS 2.1 como su núcleo. Cada módulo añade funcionalidad y/o reemplaza parte de CSS 2.1 Estado de desarrollo de CSS: http://www.w3.org/Style/CSS/current-work Guía de referencia: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
  58. 58. 58 Selectores (1/7) ● ef : Cualquier <f> incluido en <e> ● e>f : Cualquier <f> hijo de <e> ● e+f : <f> inmediatamente precedido por <e> ● e~f : <f> precedido por <e> <p>párrafo 1</p> <h1>Título</h1> <p>párrafo 2</p> <p>párrafo 3</p> <p>párrafo 4</p> <p>párrafo 5</p> http://www.w3.org/TR/css3-selectors/#selectors h1 + p { font-size: 1.5em; font-style: italic; } h1 ~ p { background-color: #FBD551; }
  59. 59. 59 Selectores (2/7) ● e[atr] : <e> si posee el atributo atr ● e[atr="v"] : <e> si posee el atributo atr con el valor "v" ● e[atr~="v"] : <e> con atr y el valor "v" dentro de una lista de valores ● e[atr^="v"] : <e> con atr y un valor que empiece por "v" ● e[atr$="v"] : <e> con atr y un valor que termine por "v" ● e[atr*="v"] : <e> con atr y un valor que contenga la subcadena "v" <a href="http://www.w3c.es/">W3C España</a><br /> <a href="http://es.wikipedia.org/wiki/World_Wide_Web_Consortium"> W3C Wikipedia</a><br /> <a href="http://www.w3.org/">W3C</a> a {color: #4364E0; text-decoration: none; font-weight: bold;} a[href*="w3"] { background: url(w3c.png) no-repeat 100% 50%; padding-right: 20px; }
  60. 60. 60 Selectores (3/7) ● :root : raíz del documento. Se corresponde con la etiqueta <html> ● e:empty : <e> sin hijos ● e:first-child : <e> cuando es el primer hijo de su elemento padre ● e:last-child : <e> cuando es el último hijo de su elemento padre ● e:only-child : <e> cuando es el único hijo de su elemento padre ● e:nth-child(n) : <e> cuando es el enésimo hijo de su elemento padre ● e:nth-last-child(n) : <e> cuando es el enésimo hijo contando desde el final <p>párrafo 1</p> <div> <h1>Título</h1> <h2>Subtítulo</h2> </div> <p>párrafo 2</p> <p>párrafo 3</p> <p>párrafo 4</p> <p>párrafo 5</p> p:nth-child(4) { color: #E5E5E5; background-color: #7F7F7F; }
  61. 61. 61 Selectores (4/7) ● e:first-of-type : <e> cuando es el primer <e> de su elemento padre ● e:last-of-type : <e> cuando es el último <e> de su elemento padre ● e:only-of-type ● e:nth-of-type(n) ● e:nth-last-of-type(n) : <e> cuando es el enésimo <e> contando desde el final ● :not(e) <p>párrafo 1</p> <div> <h1>Título</h1> <h2>Subtítulo</h2> </div> <p>párrafo 2</p> <p>párrafo 3</p> <p>párrafo 4</p> <p>párrafo 5</p> : <e> cuando es el único <e> de su elemento padre : <e> cuando es el enésimo <e> de su elemento padre : cualquier <e> que no es el indicado p:nth-of-type(4) { color: #E5E5E5; background-color: #7F7F7F; }
  62. 62. 62 Selectores (4/7) Caso práctico: Formato de tablas (1/6) <table> <tr> <th>Ventas</th> <th>Trim1</th> <th>Trim2</th> <th>Trim3</th> <th>Trim4</th> <th>Total vendedor</th> </tr> <tr> <th>Blanco</th> <td>25.488</td> <td>32.452</td> <td>16.684</td> <td>47.888</td> <td>122.512</td> </tr> …………………… <tr> <th>Total trimestre</th> <td>590.011</td> …………………… </tr> </table>
  63. 63. 63 Selectores (4/7) Caso práctico: Formato de tablas (2/6) table { border-collapse: collapse; border: 1px solid #004A4A; width: 50em; } th,td { padding: 0.2em 0.5em; } td { text-align: right; } td:after { content: " €"; }
  64. 64. 64 Selectores (4/7) Caso práctico: Formato de tablas (3/6) En nth-of-type(n) podemos sustituir n por: ● un número ● la fórmula an+b, dónde a indica el múltiplo y b un desfase ● la constante odd (impar) equivalente al valor 2n+1 ● la constante even (par) equivalente al valor 2n tr:nth-of-type(odd){ background-color: #92C4C4; } tr:nth-of-type(even){ background-color: #92D0D0; }
  65. 65. 65 Selectores (4/7) Caso práctico: Formato de tablas (4/6) tr:first-of-type th { background-color: #004A4A; color: #FFF; font-size: 1.2em; } tr:first-of-type th:first-of-type { font-size: 1.8em; } tr:first-of-type th:last-of-type { font-size: 1.5em; }
  66. 66. 66 Selectores (4/7) Caso práctico: Formato de tablas (5/6) tr td:last-child { font-weight: bold; font-size: 1.2em; } tr:nth-of-type(2n+1) td:last-child { background-color: #5FA8A8; } tr:nth-of-type(2n) td:last-child { background-color: #5EC2C2; }
  67. 67. 67 Selectores (4/7) Caso práctico: Formato de tablas (6/6) tr:last-of-type { background-color: #FFFFC4; font-size: 1.2em; font-weight: bold; } tr:last-of-type td:last-child { background-color: #FFFF00; font-size: 1.5em; }
  68. 68. 68 Selectores (5/7) ● :target : elemento referenciado por una URL ● ::selection : selección del usuario <ul> <li><a href="#t1">Ir a título 1</a></li> <li><a href="#t2">Ir a título 2</a></li> <li><a href="#t3">Ir a título 3</a></li> </ul> <article> <h1 id="t1">Título 1</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </article> <article> <h1 id="t2">Título 2</h1> <p>Sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua.</p> </article> <article> <h1 id="t3">Título 3</h1> <p>At vero eos et accusam et justo duo dolores et ea rebum.</p> </article> :target { background-color: #FBD551; } ::selection { background-color: #91E9B6; color: #E45262; }
  69. 69. 69 Selectores (6/7) ● e:enabled : <e> de la interfaz de usuario activado ● e:disabled : <e> de la interfaz de usuario desactivado ● input:checked : casilla de verificación o de opción marcada <div><input name="nombre" placeholder="Nombre" /></div> <div><input name="apellidos" placeholder="Apellidos" disabled="disabled" /></div> <div> <label>Forma de pago:</label> <ul> <li> <input id="pagoMetalico" name="pago" type="radio" value="metalico" /> <label for="pagoMetalico">En metálico</label> </li> <li> <input id="pagoVisa" name="pago" type="radio" value="visa" /> <label for="pagoVisa">Visa</label> </li> <li> <input id="pagoMastercard" name="pago" type="radio" value="mastercard" /> <label for="pagoMastercard">Mastercard</label> </li> </ul> </div> li {list-style: none;} input:enabled { background-color: #DBFFE6; } input:disabled { background-color: #FFE0DB; } input:checked { background-color: #0F0; }
  70. 70. 70 Selectores (7/7) ● input:valid : campo con un valor válido ● input:invalid : campo con un valor inválido ● input:in-range : campo con un valor dentro de rango ● input:out-of-range: campo con un valor fuera de rango ● e:required : <e> requerida ● e:optional : <e> opcional ● e:read-only : <e> de sólo lectura ● e:read-write : <e> de lectura y escritura <form action="#"> <label>correo válido:</label> <input name="correoVal" type="email" value="usuario@servidor.com" /> <label>correo inválido:</label> <input name="correoInv" type="email" value="usuario" /> </form> http://www.w3.org/TR/css3-ui/#new-user-interface-state-pseudo-classes input { border: 1px solid #FFA500; padding: 0.5em; } input:valid { background-color: #90EE90; } input:invalid { background-color: #FFC0CB; }
  71. 71. 71 Valores y unidades Unidades más interesantes ● px : píxel ● % ● em : tamaño de fuente de la caja ● rem : tamaño de fuente de la raíz ● dpi : puntos por pulgada ● dppx : puntos por píxel ● vw ● vh : viewport-percentage height ● vmin : el más pequeño de vw o vh ● vmax: el más grande de vw o vh ● deg : grados ● ms : milisegundos ● s : segundos : proporción de la caja : viewport-percentage width http://www.w3.org/TR/css3-values/
  72. 72. 72 Colores y transparencias ● RGB : Red Green Blue ● HSL : Hue, Saturation, Lightness ● opacity : Opacidad de 0 a 1 ● RGBA : RGB + Alpha ● HSLA : HSL + Alpha ● transparent : Color transparente <div id="caja1">Caja 1</div> <div id="caja2">Caja 2</div> <div id="caja3">Caja 3</div> #caja1 { background-color: hsl(60,100%,50%); color: #00F; } #caja2 { background-color: #7AC7FF; opacity: 0.5; } #caja3 { background-color: rgba(255,160,120,0.6); }
  73. 73. 73 Fuentes @font-face { font-family: nombreAsignado; src: local(fuenteInstalada), url(fuenteParaDescarga); } @font-face { font-family: 'Cabin Sketch'; src: local('CabinSketch-Bold'), url('fonts/CabinSketch-Bold.woff' format('woff'); } @font-face { font-family: Aclonica; src: local('Aclonica'), url('fonts/Aclonica.woff') format('woff'); } h1 { font-family: 'Cabin Sketch', Arial, sans-serif; } h2 { font-family: Aclonica, Arial, sans-serif; } http://www.w3.org/TR/css3-webfonts/ http://www.fontsquirrel.com/
  74. 74. 74 Nuevas propiedades ● Cajas redondeadas ● Desbordamiento de texto ● Cajas con sombras ● Columnas ● Texto con sombras ● Transiciones ● Bordes con imágenes ● Interfaz de usuario ● Imágenes de fondo http://leaverou.me/ft2010 http://www.css3.me/ http://css3generator.com/ http://westciv.com/tools/index.html Guía de referencia: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
  75. 75. 75 Cajas redondeadas border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? http://www.w3.org/TR/css3-background/#corners
  76. 76. 76 Cajas con sombras box-shadow: none | inset? && h-shadow v-shadow [blur] [spread] [color] http://www.w3.org/TR/css3-background/#box-shadow
  77. 77. 77 Texto con sombras text-shadow: none | h-shadow v-shadow [blur] [color] Pseudo-elementos :first-line y :first-letter http://www.w3.org/TR/css-text-decor-3/#text-shadow-property
  78. 78. 78 Bordes con imágenes border-image: source slice [width] [outset] repeat Propiedades individuales: ● border-image-source: none | <image> ● border-image-slice: [< number > | <%>]{1,4} && fill? ● border-image-width: [<length> | <%> | <num> | auto]{1,4} ● border-image-outset: [<length> | <number>]{1,4} ● border-image-repeat: [ stretch | repeat | round | space]{1,2} border: double orange 1em; border-image: url("border.png") 27 round stretch; http://www.w3.org/TR/css3-background/#border-images border-image-slice: 25% 30% 12% 20%
  79. 79. 79 Imágenes de fondo (1/8) El nivel 3 de CSS incorpora gran flexibilidad a las propiedades existentes permitiendo incluir múltiples valores separados por comas. ● background-color: <color> ● background-image: <bg-image> [ , <bg-image> ]* ● background-repeat: <repeat-style> [ , <repeat-style> ]* ● background-attachment: <attachment> [ , <attachment> ]* ● background-position: <position> [ , <position> ]* ● background-clip: <box> [ , <box> ]* ● background-origin: <box> [ , <box> ]* ● background-size: <bg-size> [ , <bg-size> ]* ● background: [ <bg-layer> , ]* <final-bg-layer> – <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} – <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color> http://www.w3.org/TR/css3-background/#backgrounds
  80. 80. 80 Imágenes de fondo (2/8) ● background-color: <color> ● background-image: <bg-image> [ , <bg-image> ]* ● background-repeat: <repeat-style> [ , <repeat-style> ]* – <repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} background-image: url('bola.png'); background-repeat: repeat; background-color: #FFA500; background-image: url('bola.png'); background-repeat: no-repeat; background-color: #FFA500; background-image: url('bola.png'); background-repeat: repeat-y; background-color: #FFA500;
  81. 81. 81 Imágenes de fondo (3/8) ● background-color: <color> ● background-image: <bg-image> [ , <bg-image> ]* ● background-repeat: <repeat-style> [ , <repeat-style> ]* – <repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} background-image: url('bola.png'); background-repeat: repeat; background-color: #FFA500; background-image: url('bola.png'); background-repeat: space; background-color: #FFA500; background-image: url('bola.png'); background-repeat: no-repeat space; background-color: #FFA500;
  82. 82. 82 Imágenes de fondo (4/8) ● background-position: <position> [ , <position> ]* – <position> = Cualquier combinación con top, bottom, left, center, right, <percentage> o <length> background-image: url('bola.png'); background-position: center; background-repeat: repeat-y; background-color: #FFA500; background-image: url('bola.png'); background-position: center top; background-repeat: repeat-y; background-color: #FFA500; background-image: url('bola.png'); background-position: 20% 80%; background-repeat: no-repeat; background-color: #FFA500;
  83. 83. 83 Imágenes de fondo (5/8) ● background-image: <bg-image> [ , <bg-image> ]* ● background-position: <position> [ , <position> ]* ● background-repeat: <repeat-style> [ , <repeat-style> ]* background-image: url('bola.png'), url('bola.png'); background-repeat: repeat-x, repeat-y; background-color: #FFA500; background-image: url('bola.png'), url('bola2.png'); background-position: center, 80% top; background-repeat: repeat-x, repeat-y; background-color: #FFA500; background-image: url('bola.png'), url('bola2.png'); background-position: 20% 100%, 80% top; background-repeat: no-repeat, repeat-y; background-color: #FFA500;
  84. 84. 84 Imágenes de fondo (6/8) ● background-size: <bg-size> [ , <bg-size> ]* – <bg-size> = [<length> | <percentage> | auto ]{1,2} | cover | contain background-image: url('bola.png'); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; background-image: url('bola.png'); background-position: center; background-size: contain; background-repeat: no-repeat; background-image: url('bola.png'); background-position: center; background-size: cover; background-repeat: no-repeat;
  85. 85. 85 Imágenes de fondo (7/8) ● background-clip: <box> [ , <box> ]* – <box> = border-box | padding-box | content-box border: 20px double #00f; background-image: url('bola.png'); background-clip: border-box; border: 20px double #00f; background-image: url('bola.png'); background-clip: padding-box; border: 20px double #00f; background-image: url('bola.png'); background-clip: content-box;
  86. 86. 86 Imágenes de fondo (8/8) ● background: [ <bg-layer> , ]* <final-bg-layer> – <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} – <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color> #caja { background: url("bola.png") left top repeat-x, url("bola2.png") right top repeat-y, url("bola3.png") left bottom repeat-x, url("bola4.png") left top repeat-y, url("bola.png") 15% 15% no-repeat, url("bola2.png") 85% 15% no-repeat, url("bola3.png") 85% 85% no-repeat, url("bola4.png") 15% 85% no-repeat #FFA500; background-size: auto, auto, auto, auto, 10%, 20%, 30%, 40%; }
  87. 87. 87 Desbordamiento de texto (1/2) ● overflow-wrap: normal | break-word #caja1, #caja2 { width: 200px; height: 200px; padding: 1em; border: 1px solid #FFA500; } #caja1 { overflow-wrap: normal; } http://www.w3.org/TR/css3-text/#overflow-wrap-property #caja2 { overflow-wrap: break-word; }
  88. 88. 88 Desbordamiento de texto (2/2) ● text-overflow: clip | ellipsis | <string> #caja1 { overflow: visible; } http://www.w3.org/TR/css3-ui/#text-overflow0 #caja2 { overflow: hidden; text-overflow: clip; } #caja3 { overflow: hidden; text-overflow: ellipsis; }
  89. 89. 89 Columnas (1/6) ● column-count: <integer> | auto ● column-width: <length> | auto ● columns: <column-width> || <column-count> ● column-gap: <length> | normal ● column-rule-color: <color> ● column-rule-style: <border-style> ● column-rule-width: <border-width> ● column-rule: <column-rule-width> || <column-rule-style> || [<column-rule-color> | transparent] ● column-span: none | all ● column-fill: auto | balance http://www.w3.org/TR/css3-multicol/
  90. 90. 90 Columnas (2/6) ● column-count: <integer> | auto #caja1, #caja2, #caja3 { padding: 1em; border: 1px solid #FFA500; text-align: justify; } #caja1 { column-count: 1; } #caja2 { column-count: 3; } #caja3 { height: 80px; column-count: 3; }
  91. 91. 91 Columnas (3/6) ● column-width: <length> | auto #caja1, #caja2, #caja3 { padding: 1em; border: 1px solid #FFA500; text-align: justify; text-overflow: ellipsis; overflow: hidden; } #caja1 { column-width: 150px; } #caja2 { column-width: 200px; } #caja3 { column-width: 300px; column-count: 3; }
  92. 92. 92 Columnas (4/6) ● column-gap: <length> | normal #caja1, #caja2, #caja3 { padding: 1em; border: 1px solid #FFA500; text-align: justify; text-overflow: ellipsis; overflow: hidden; } #caja1 { column-count: 3; column-gap: normal; } #caja2 { column-count: 3; column-gap: 2em; } #caja3 { column-count: 3; column-gap: 4em; }
  93. 93. 93 Columnas (5/6) ● column-rule: <column-rule-width> || <column-rule-style> || [<columnrule-color> | transparent] #caja1, #caja2, #caja3 { padding: 1em; border: 1px solid #FFA500; text-align: justify; text-overflow: ellipsis; overflow: hidden; } #caja1 { column-count: 3; column-gap: 2em; column-rule: 1px solid #FFA500; } #caja2 { column-count: 3; column-gap: 2em; column-rule: 5px dotted #7300FF; } #caja3 { column-count: 3; column-gap: 2em; column-rule: 0.5em double #FFA500; }
  94. 94. 94 Columnas (6/6) ● column-span: none | all article { padding: 1em; border: 1px solid #FFA500; column-count: 2; column-gap: 2em; column-rule: 1px solid #FFA500; text-align: justify; text-overflow: ellipsis; overflow: hidden; } article h1, article h2, article h3 { text-align: center; } article h1, article h2 { column-span: all; }
  95. 95. 95 Transiciones (1/4) ● transition-property: none | all | [ <CSSprop> ] [ ‘,’ <CSSprop > ]* ● transition-duration: <time> [, <time>]* ● ● ● transition-timing-function: <single-transition-timing-function> [ ‘,’ <single-transition-timing-function> ]* <single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<int>[, [ start | end ] ]?) | cubic-bezier(<num>, <num>, <num>, <num>) transition-delay: <time> [, <time>]* transition: [<t-property> || <t-duration> || <t-timing-function> || <tdelay> [, [<t-property> || <t-duration> || <t-timing-function> || <tdelay>]]* http://www.w3.org/TR/css3-transitions/ http://cubic-bezier.com/ http://leaverou.github.io/animatable/
  96. 96. 96 Transiciones (2/4) #caja { width: 200px; height: 200px; border: 1px solid #FFA500; transition-property: all; transition-duration: 2s; } #caja:hover { width: 400px; height: 400px; } transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s; -moz-transition: all 2s; -ms-transition: all 2s;
  97. 97. 97 Transiciones (3/4)
  98. 98. 98 Transiciones (4/4) article { margin: 1em auto; width: 600px; border: 1px solid #FFA500; } article h1 { text-align: center; margin: 0; padding: 0.5em; } article .cuerpo { padding: 0 1em; text-align: justify; } article p { margin-bottom: 1em; } .autor { border: 1px solid #FFA500; background-color: #BFBFBF; width: 50px; margin: 0 0 1em 1em; float: right; transition: all 1s; } .autor img { width: 100%; } .autor:hover { width: 150px; margin: 1em; background-color: #FFFF00; } .autor figcaption { overflow: hidden; font-size: 0.8em; text-align:center; padding: 0; height: 0; background-color: #FFA500; transition: all 0.5s; } .autor figcaption span { opacity: 0; transition: all 1s 0.5s; } .autor:hover figcaption { height: 1em; padding: 0.5em; } .autor:hover figcaption span { opacity: 1; }
  99. 99. 99 Modelo de cajas ● box-sizing: content-box | border-box | inherit .colIzq { width: 50%; float: left; padding: 0.5em; background-color: #90EE90; border: 1em solid #127B12; } .colDcha { width: 50%; float: left; padding: 0.5em; background-color: #C698E2; border: 1em solid #A020F0; } http://www.w3.org/TR/css3-ui/#box-sizing .colIzq { width: 50%; float: left; padding: 0.5em; background-color: #90EE90; border: 1em solid #127B12; box-sizing: border-box; } .colDcha { width: 50%; float: left; padding: 0.5em; background-color: #C698E2; border: 1em solid #A020F0; box-sizing: border-box; }
  100. 100. 100 Funciones ● Gradientes ● Transformaciones ● Otras funciones
  101. 101. 101 Gradientes (1/5) ● linear-gradient( [ [ <angle> | [left | right] || [top | bottom] ] ,]? <color-stop>[, <color-stop>]+ ) #caja { /* para los ejemplos */ width: 200px; height: 100px; border: 1px solid #FFA500; background: linear-gradient(parámetros); background: -webkit-linear-gradient(parámetros); background: -moz-linear-gradient(parámetros); background: -o-linear-gradient(parámetros); background: -ms-linear-gradient(parámetros); } http://dev.w3.org/csswg/css-images-3/#gradients http://lea.verou.me/css3patterns/
  102. 102. 102 Gradientes (2/5) ● linear-gradient( )
  103. 103. 103 Gradientes (3/5) ● radial-gradient( [<bg-position>,]? [[ [<shape> || <size>] | [<length> | <percentage>]{2} ],]? <color-stop>[, <color-stop>]+ ) – <shape> = [ circle | ellipse ] – <size> = [ closest-side | closest-corner | farthest-side | farthest-corner | contain | cover ] #caja { /* para los ejemplos */ width: 200px; height: 100px; border: 1px solid #FFA500; background: radial-gradient(parámetros); background: -webkit-radial-gradient(parámetros); background: -moz-radial-gradient(parámetros); background: -o-radial-gradient(parámetros); background: -ms-radial-gradient(parámetros); } http://dev.w3.org/csswg/css-images-3/#radial-gradients/
  104. 104. 104 Gradientes (4/5) ● radial-gradient( )
  105. 105. 105 Gradientes (5/5) ● repeating-linear-gradient( mismos parámetros que linear-gradient() ) ● repeating-radial-gradient( mismos parámetros que radial-gradient() ) http://dev.w3.org/csswg/css-images-3/#repeating-gradients
  106. 106. 106 Transformaciones (1/3) Propiedades de transformación: ● ● transform: none | <transform-function> [ <transform-function> ]* transform-origin: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>? http://www.w3.org/TR/css3-transforms/ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms
  107. 107. 107 Transformaciones (2/3) Funciones de transformación: ● translate(<translation-value>[, <translation-value>]) ● translateX(<translation-value>) ● translateY(<translation-value>) ● scale(<number>[, <number>]) ● scaleX(<number>) ● scaleY(<number>) ● rotate(<angle>) ● skewX(<angle>) ● skewY(<angle>) ● skew(<angle> [, <angle>])
  108. 108. 108 Transformaciones (3/3) #caja { width: 200px; height: 100px; background-color: #FFA500; transform: funcTrans(); -webkit-transform: funcTrans(); -moz-transform: funcTrans(); -o-transform: funcTrans(); -ms-transform: funcTrans(); }
  109. 109. 109 Otras funciones attr() <a href="http://www.w3.org/">W3C</a><br /> <a href="http://www.w3c.es/">W3C España</a> ● url() a{ ● counter() ● ● calc() div { float: left; margin: 1em; border: solid 1px; width: calc(100%/3 - 2*1em - 2*1px); } http://www.w3.org/TR/css3-values/#calc-notation text-decoration: none; font-weight: bold; color: #1FA646; } @media print { a:after { font-weight: normal; color: #1F93A6; content: " (" attr(href) ") "; } }
  110. 110. 110 Media Queries (1/4) Formas de llamar a estilos CSS utilizando Media Queries: ● <link rel="stylesheet" media=“MediaQuery" href=“estilos.css" /> ● @import url(estilos.css) MediaQuery; ● @media MediaQuery { … } Sintaxis: [only | not]? media_type [ and expr ]* | expr [ and expr ]* ● media_type: ‘all’, ‘screen’, ‘print’, ‘aural’, ‘braille’, ‘handheld’, ‘projection’, ‘tty’, ‘tv’ ● expr: ( [min- | max-]? feature : value ) ● features: ‘width’, ‘height’, ‘device-width’, ‘device-height’, ‘orientation’, ‘aspect-ratio’, ‘device-aspect-ratio’, ‘color’, ‘color-index’, ‘monochrome’, ‘resolution’, ‘scan’, ‘grid’ http://www.w3.org/TR/css3-mediaqueries/ http://mediaqueri.es/
  111. 111. 111 Media Queries (2/4) ● <link rel="stylesheet" type="text/css" href="estilos/estilos.css" />
  112. 112. 112 Media Queries (3/4) ● <link rel="stylesheet" type="text/css" media="only screen and (minwidth:501px) and (max-width:900px)" href="estilos/estilosM.css" />
  113. 113. 113 Media Queries (4/4) ● <link rel="stylesheet" type="text/css“ media="only all and (max-width:500px)" href="estilos/estilosP.css" />
  114. 114. 114 CSS Template Layout Module body { display: "aaaaaaa" "bccccdd“; } #cabecera { position: a; } #colIzq { position: b; } #colCentro { position: c; } #colDcha { position: d; } http://www.w3.org/TR/css3-layout/
  115. 115. 115 Soporte actual de los navegadores Ninguno de los principales navegadores soportan al 100% HTML5 o CSS3. En algunos casos, cuando el navegador no implementa propiedades o funciones CSS3, es posible utilizar prefijos para utilizar la implementación propia del motor de renderizado de cada navegador. Prefijos por navegador: ● -webkit- para Chrome y Safari ● -moz- para Firefox ● -o- para Opera ● -ms- para Internet Explorer La W3C no valida el código que utiliza estos prefijos. http://caniuse.com/
  116. 116. 116 Soporte de Internet Explorer Soporte nulo en versiones anteriores a Internet Explorer 9. Para que las versiones anteriores a IE9 puedan mostrar páginas realizadas con HTML5 de forma correcta, debemos añadir el siguiente código: En el <head> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> En el fichero CSS article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }

×