• Save
HTML5 y CSS3
Upcoming SlideShare
Loading in...5
×
 

HTML5 y CSS3

on

  • 1,158 views

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

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

Statistics

Views

Total Views
1,158
Views on SlideShare
599
Embed Views
559

Actions

Likes
7
Downloads
0
Comments
0

17 Embeds 559

http://eomblog.blogspot.com.ar 257
http://eomblog.blogspot.mx 122
http://eomblog.blogspot.com.es 74
http://cursos.openwebinars.net 30
http://eomblog.blogspot.com 28
http://www.eomblog.blogspot.com 20
https://www.blogger.com 7
http://feedly.com 5
http://digg.com 5
http://plus.url.google.com 3
http://eomblog.blogspot.de 2
http://rankhigher.io 1
http://reader.aol.com 1
https://rankhigher.io 1
https://eomblog.blogspot.com 1
http://www.eomblog.blogspot.de 1
http://www.eomblog.blogspot.fr 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 y CSS3 HTML5 y CSS3 Presentation Transcript

  • HTML 5 y CSS 3
  • 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 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 ¿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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Formularios ● Nuevos tipos de <input> ● Nuevos atributos ● Nuevas etiquetas: – <datalist> – <keygen> – <output>
  • 47 Nuevos tipos de <input> ● color ● date, datetime, datetime-local, month, week, time ● email ● number ● range ● search ● tel ● url
  • 48 Nuevos atributos
  • 49 Incorporación de elementos multimedia ● <video> ● <audio> ● <canvas>
  • 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 <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 <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 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 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 ¿Únicamente para crear webs? http://html5test.com/
  • 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Cajas redondeadas border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? http://www.w3.org/TR/css3-background/#corners
  • 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Transiciones (3/4)
  • 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 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 Funciones ● Gradientes ● Transformaciones ● Otras funciones
  • 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 Gradientes (2/5) ● linear-gradient( )
  • 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 Gradientes (4/5) ● radial-gradient( )
  • 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 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 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 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 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 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 Media Queries (2/4) ● <link rel="stylesheet" type="text/css" href="estilos/estilos.css" />
  • 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 Media Queries (4/4) ● <link rel="stylesheet" type="text/css“ media="only all and (max-width:500px)" href="estilos/estilosP.css" />
  • 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 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 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; }