Está en la página 1de 107

HTML5 Y CSS 3

Antonio Valverde Rodríguez Twitter: @valgreens valverde@webmastergranada.es

HTML5 Y CSS 3 Antonio Valverde Rodríguez Twitter: @valgreens valverde@webmastergranada.es

INTRODUCCIÓN

INTRODUCCIÓN HTML 5 ES LA EVOLUCIÓN DEL HTML 4 Y XHTML 1 AÚN EN DESARROLLO POR

HTML 5 ES LA EVOLUCIÓN DEL HTML 4 Y XHTML 1 AÚN EN DESARROLLO POR EL W3C

HTML5 ~= HTML + CSS + JS

INTRODUCCIÓN HTML 5 ES LA EVOLUCIÓN DEL HTML 4 Y XHTML 1 AÚN EN DESARROLLO POR

INTRODUCCIÓN

INTRODUCCIÓN

INTRODUCCIÓN

5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5

INTRODUCCIÓN 5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5

INTRODUCCIÓN

5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5

1. HTML5 NO ES UN GRAN BLOQUE

INTRODUCCIÓN 5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5 1. HTML5 NO ES

INTRODUCCIÓN

5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5

1. HTML5 NO ES UN GRAN BLOQUE 2. NO NECESITAS TIRAR NADA ANTERIOR A HTML 5

QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5 1. HTML5 NO ES UN GRAN BLOQUE

INTRODUCCIÓN

5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5

1. HTML5 NO ES UN GRAN BLOQUE 2. NO NECESITAS TIRAR NADA ANTERIOR A HTML 5 3. ES MUY FÁCIL EMPEZAR

DE EMPEZAR CON HTML 5 1. HTML5 NO ES UN GRAN BLOQUE 2. NO NECESITAS TIRAR

INTRODUCCIÓN

5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5

1. HTML5 NO ES UN GRAN BLOQUE 2. NO NECESITAS TIRAR NADA ANTERIOR A HTML 5 3. ES MUY FÁCIL EMPEZAR 4. YA FUNCIONA

HTML 5 1. HTML5 NO ES UN GRAN BLOQUE 2. NO NECESITAS TIRAR NADA ANTERIOR A

INTRODUCCIÓN

5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5

1. HTML5 NO ES UN GRAN BLOQUE

2. NO NECESITAS TIRAR NADA ANTERIOR A

HTML 5

3. ES MUY FÁCIL EMPEZAR

4. YA FUNCIONA

5. HA LLEGADO PARA QUEDARSE

BLOQUE 2. NO NECESITAS TIRAR NADA ANTERIOR A HTML 5 3. ES MUY FÁCIL EMPEZAR 4.

NOVEDADES EN HTML 5

NOVEDADES EN HTML 5

NOVEDADES EN HTML 5

Los tags ”únicos” ya no es obligatorio cerrarlos Nuevos elementos, más semánticos

NOVEDADES EN HTML 5 ● Los tags ”únicos” ya no es obligatorio cerrarlos ● Nuevos elementos,

NOVEDADES EN HTML 5

Los tags ”únicos” ya no es obligatorio cerrarlos Nuevos elementos, más semánticos Conjunto de APIs

● Los tags ”únicos” ya no es obligatorio cerrarlos ● Nuevos elementos, más semánticos ● Conjunto

NOVEDADES EN HTML 5

Los tags ”únicos” ya no es obligatorio cerrarlos Nuevos elementos, más semánticos Conjunto de APIs Posibilidad de acceder a dispositivos: <device>

Nuevos elementos, más semánticos ● Conjunto de APIs ● Posibilidad de acceder a dispositivos: <device>

NOVEDADES EN HTML 5

Los tags ”únicos” ya no es obligatorio cerrarlos Nuevos elementos, más semánticos Conjunto de APIs Posibilidad de acceder a dispositivos: <device> Canvas y microdatos

semánticos ● Conjunto de APIs ● Posibilidad de acceder a dispositivos: <device> ● Canvas y microdatos

NOVEDADES EN HTML 5

Los tags ”únicos” ya no es obligatorio cerrarlos Nuevos elementos, más semánticos Conjunto de APIs Posibilidad de acceder a dispositivos: <device> Canvas y microdatos WebWorkers,WebStorage,WebSockets y Web SQL Database

a dispositivos: <device> ● Canvas y microdatos ● WebWorkers,WebStorage,WebSockets y Web SQL Database

NOVEDADES EN HTML 5

Los tags ”únicos” ya no es obligatorio cerrarlos Nuevos elementos, más semánticos Conjunto de APIs Posibilidad de acceder a dispositivos: <device> Canvas y microdatos WebWorkers,WebStorage,WebSockets y Web SQL Database Geolocalización

● Canvas y microdatos ● WebWorkers,WebStorage,WebSockets y Web SQL Database ● Geolocalización

NOVEDADES EN HTML 5

Los tags ”únicos” ya no es obligatorio cerrarlos Nuevos elementos, más semánticos Conjunto de APIs Posibilidad de acceder a dispositivos: <device> Canvas y microdatos WebWorkers,WebStorage,WebSockets y Web SQL Database Geolocalización Mejoras en los formularios

NOVEDADES EN HTML 5

Los tags ”únicos” ya no es obligatorio cerrarlos Nuevos elementos, más semánticos Conjunto de APIs Posibilidad de acceder a dispositivos: <device> Canvas y microdatos WebWorkers,WebStorage,WebSockets y Web SQL Database Geolocalización Mejoras en los formularios Retrocompatible

¿SE PUEDE USAR YA?

Sí pero

¿SE PUEDE USAR YA? Sí pero

¿SE PUEDE USAR YA?

Sí pero

Hay que preocuparse de la retrocompatibilidad

¿SE PUEDE USAR YA? Sí pero ✔ Hay que preocuparse de la retrocompatibilidad

¿SE PUEDE USAR YA?

Sí pero

Hay que preocuparse de la retrocompatibilidad Algunas tecnologías no están preparadas aún

USAR YA? Sí pero ✔ Hay que preocuparse de la retrocompatibilidad ✔ Algunas tecnologías no están

¿SE PUEDE USAR YA?

Sí pero

Hay que preocuparse de la retrocompatibilidad Algunas tecnologías no están preparadas aún El contenido tiene que ser siempre accesible

✔ Algunas tecnologías no están preparadas aún ✔ El contenido tiene que ser siempre accesible

¿SE PUEDE USAR YA?

Sí pero

Hay que preocuparse de la retrocompatibilidad Algunas tecnologías no están preparadas aún El contenido tiene que ser siempre accesible Se pueden complementar con javascript

no están preparadas aún ✔ El contenido tiene que ser siempre accesible ✔ Se pueden complementar

¿SE PUEDE USAR YA?

Sí pero

Hay que preocuparse de la retrocompatibilidad Algunas tecnologías no están preparadas aún El contenido tiene que ser siempre accesible Se pueden complementar con javascript (polyfills)

!DOCTYPE

XTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/

xhtml11/DTD/xhtml11.dtd">

HTML5:

<!DOCTYPE html>

XHTML 1.1//EN" "http://www.w3.org/TR/ xhtml11/DTD/xhtml11.dtd"> HTML5: <!DOCTYPE html>

CODIFICACIÓN

XTML 1.1:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />

HTML5:

<meta charset=utf-8>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” /> HTML5: <meta charset=utf-8>

LINK / SCRIPT

XTML 1.1:

<link rel=”stylesheet” type=”text/css” href=”ejemplo.css” /> <script type=”text/javascript” src=”jquery.js”></script>

HTML5:

<link rel=”stylesheet” href=”ejemplo.css”> <script src=jquery.js>

HTML5: <link rel=”stylesheet” href=”ejemplo.css”> <script src=jquery.js>

VIEJA ESTRUCTURA

<div id=”header”>

<div id=”nav”>

<div id=”main”>

<div

class=”post”>

<div

class=”post”>

<div

id=”sidebar”>

<div id=”footer”>

NUEVA ESTRUCTURA

<header>

<nav>

<article>

<section>

<article>

<aside>

<footer>

<HEADER>

<HEADER> • Logo y título • Navegación • Varios encabezados

Logo y título

Navegación

Varios encabezados

<HEADER> • Logo y título • Navegación • Varios encabezados

<NAV>

<NAV> • Puede haber más de uno • Migas de pan • Blogroll
<NAV> • Puede haber más de uno • Migas de pan • Blogroll

Puede haber más de uno

Migas de pan

Blogroll

<NAV> • Puede haber más de uno • Migas de pan • Blogroll

<ARTICLE>

<ARTICLE> • Artículos de blog y periódico • Comentarios y productos • Sindicable

Artículos de blog y periódico

Comentarios y productos

Sindicable

<ARTICLE> • Artículos de blog y periódico • Comentarios y productos • Sindicable

<SECTION>

<SECTION> • Agrupa contenido semánticamente • Sirve tanto para páginas y artículos

Agrupa contenido semánticamente

Sirve tanto para páginas y artículos

<SECTION> • Agrupa contenido semánticamente • Sirve tanto para páginas y artículos

Sidebar

Anuncios

<ASIDE>

• Sidebar • Anuncios <ASIDE>
• Sidebar • Anuncios <ASIDE>
• Sidebar • Anuncios <ASIDE>
• Sidebar • Anuncios <ASIDE>

<FOOTER>

<FOOTER> • Puede haber varios • Licencia, enlaces, etc

Puede haber varios

Licencia, enlaces, etc

<FOOTER> • Puede haber varios • Licencia, enlaces, etc

FIGURE/FIGCAPTION

FIGURE/FIGCAPTION
FIGURE/FIGCAPTION
FIGURE/FIGCAPTION

FIGURE/FIGCAPTION

FIGURE/FIGCAPTION <figure> <img src="imagen.jpg" alt=" ">

<figure> <img src="imagen.jpg" alt=" "> <figcaption>Wheel</figcaption> </figure>

<img src="imagen.jpg" alt=" "> <figcaption>Wheel</figcaption> </figure>
<img src="imagen.jpg" alt=" "> <figcaption>Wheel</figcaption> </figure>

<HGROUP>

Ha desaparecido de la especificación de HTML5 recientemente

Originariamente se utilizaba para agrupar encabezados con más de una etiqueta <h1> <h6>

recientemente Originariamente se utilizaba para agrupar encabezados con más de una etiqueta <h1> <h6>

<TIME>

<time>2011-05-05</time>

<TIME> <time>2011-05-05</time>

<TIME>

<time>2011-05-05</time>

datetime: permite declarar la fecha en un formato legible por una máquina

<time>2011-05-05</time> datetime : permite declarar la fecha en un formato legible por una máquina

<TIME>

<time>2011-05-05</time>

datetime: permite declarar la fecha en un formato legible por una máquina

pubdate: especifica que es una fecha de publicación

: permite declarar la fecha en un formato legible por una máquina pubdate : especifica que

ADIÓS A

applet

big

center

font

frame

blink

marquee

ADIÓS A applet big center font frame blink marquee

3, 2, 1 ACCIÓN!

<audio>

<video>

3, 2, 1 ACCIÓN! <audio> <video>

<AUDIO> Y <VIDEO>

<audio src="cancion.???" > </audio>

<video src="video.???" > </video>

<audio src="cancion.???" > </audio> <video src="video.???" > </video>

ATRIBUTOS

ATRIBUTOS

ATRIBUTOS

autoplay: reproducción automática.

ATRIBUTOS autoplay : reproducción automática.

ATRIBUTOS

autoplay: reproducción automática. controls: muestra los controles de vídeo nativos de cada navegador. No aparecen por defecto.

reproducción automática. controls : muestra los controles de vídeo nativos de cada navegador. No aparecen por

ATRIBUTOS

autoplay: reproducción automática. controls: muestra los controles de vídeo nativos de cada navegador. No aparecen por defecto. poster: imagen de previsualización. Si no se especifica, el navegador coge el primer fotograma.

aparecen por defecto. poster : imagen de previsualización. Si no se especifica, el navegador coge el

ATRIBUTOS

autoplay: reproducción automática. controls: muestra los controles de vídeo nativos de cada navegador. No aparecen por defecto. poster: imagen de previsualización. Si no se especifica, el navegador coge el primer fotograma. width, height: si no se especifican, se toman las del poster; si no, serán 300px por 150px.

el primer fotograma. width , height : si no se especifican, se toman las del poster;

ATRIBUTOS

autoplay: reproducción automática. controls: muestra los controles de vídeo nativos de cada navegador. No aparecen por defecto. poster: imagen de previsualización. Si no se especifica, el navegador coge el primer fotograma. width, height: si no se especifican, se toman las del poster; si no, serán 300px por 150px. loop: reproduce el vídeo en bucle.

: si no se especifican, se toman las del poster; si no, serán 300px por 150px.

ATRIBUTOS

autoplay: reproducción automática. controls: muestra los controles de vídeo nativos de cada navegador. No aparecen por defecto. poster: imagen de previsualización. Si no se especifica, el navegador coge el primer fotograma. width, height: si no se especifican, se toman las del poster; si no, serán 300px por 150px. loop: reproduce el vídeo en bucle. preload: precarga el vídeo.

ATRIBUTOS

autoplay: reproducción automática. controls: muestra los controles de vídeo nativos de cada navegador. No aparecen por defecto. poster: imagen de previsualización. Si no se especifica, el navegador coge el primer fotograma. width, height: si no se especifican, se toman las del poster; si no, serán 300px por 150px. loop: reproduce el vídeo en bucle. preload: precarga el vídeo. src: indica la fuente del vídeo.

LA FORMA CORRECTA

<video controls width="360" height="240" poster="caratula.jpg" > <source src="vid.mp4" type="video/mp4" > <source src="vid.ogv" type="video/ogg" > <p> Tu navegador no sorporta vídeo. Puedes descargar este vídeo en formato <a href="vid.mp4">mp4<a> o en formato <a href="vid.ogv">Ogg<a>. </p> </video>

GUERRA DE FORMATOS

Formato

IE

Firefox

Safari

Chrome

Opera

Ogg

NO

3.4+

NO

5.0+

10.5+

H264

9.0+

NO

3.0+

5.0+

NO

WebM

9.0+

4.0+

NO

5.0+

10.6+

SOPORTE HTML5

Chrome Firefox Safari Opera Internet Explorer 9

SOPORTE HTML5 Chrome Firefox Safari Opera Internet Explorer 9

SOPORTE HTML5

Creamos los elementos nuevos con Javascript:

document.CreateElement('nav');

document.CreateElement('header');

document.CreateElement('footer');

document.CreateElement('article');

document.CreateElement('section');

document.CreateElement('article'); document.CreateElement('section');

HTML5 SHIV

<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/ svn/trunk/html5.js" type="text/javascript"></ script> <![endif]-->

svn/trunk/html5.js" type="text/javascript"></ script> <![endif]-->

FORMULARIOS

<input type=email> <input type=url> <input type=tel>

FORMULARIOS <input type=email> <input type=url> <input type=tel>
FORMULARIOS <input type=email> <input type=url> <input type=tel>
FORMULARIOS <input type=email> <input type=url> <input type=tel>

FORMULARIOS

Más novedades y tipos de input

FORMULARIOS Más novedades y tipos de input

FORMULARIOS

Más novedades y tipos de input

<input type=search>

FORMULARIOS Más novedades y tipos de input <input type=search>

FORMULARIOS

Más novedades y tipos de input

<input type=search> <input type=number>

FORMULARIOS Más novedades y tipos de input <input type=search> <input type=number>

FORMULARIOS

Más novedades y tipos de input

<input type=search> <input type=number> <input type=range>

Más novedades y tipos de input <input type=search> <input type=number> <input type=range>

FORMULARIOS

Más novedades y tipos de input

<input type=search> <input type=number> <input type=range> <input type=color>

de input <input type=search> <input type=number> <input type=range> <input type=color>

FORMULARIOS

Más novedades y tipos de input

<input type=search> <input type=number> <input type=range> <input type=color> <input type=date>

<input type=number> <input type=range> <input type=color> <input type=date>

FORMULARIOS

Más novedades y tipos de input

<input type=search> <input type=number> <input type=range> <input type=color> <input type=date> <input type=time>

type=number> <input type=range> <input type=color> <input type=date> <input type=time>

FORMULARIOS

Más novedades y tipos de input

<input type=search> <input type=number> <input type=range> <input type=color> <input type=date> <input type=time> <input type=datetime>

FORMULARIOS

Más novedades y tipos de input

<input type=search> <input type=number> <input type=range> <input type=color> <input type=date> <input type=time> <input type=datetime> <input type=month>

FORMULARIOS

Más novedades y tipos de input

<input type=search> <input type=number> <input type=range> <input type=color> <input type=date> <input type=time> <input type=datetime> <input type=month> <input type=week>

LISTAS DONDE ELEGIR

<input type=text list=payasos> <datalist id=payasos> <option value=Miliki> <option value=Fofó> <option value=Gaby> </datalist>

id=payasos> <option value=Miliki> <option value=Fofó> <option value=Gaby> </datalist>

ATRIBUTOS

ATRIBUTOS

ATRIBUTOS

autofocus

ATRIBUTOS autofocus

ATRIBUTOS

autofocus

placeholder

ATRIBUTOS autofocus placeholder

ATRIBUTOS

autofocus

placeholder

pattern

ATRIBUTOS autofocus placeholder pattern

ATRIBUTOS

autofocus

placeholder

pattern

multiple

ATRIBUTOS autofocus placeholder pattern multiple

ATRIBUTOS

autofocus

placeholder

pattern

multiple

autocomplete

ATRIBUTOS autofocus placeholder pattern multiple autocomplete

ATRIBUTOS

autofocus

placeholder

pattern

multiple

autocomplete

min/max

ATRIBUTOS autofocus placeholder pattern multiple autocomplete min/max

ATRIBUTOS

autofocus

placeholder

pattern

multiple

autocomplete

min/max

step

ATRIBUTOS autofocus placeholder pattern multiple autocomplete min/max step

ATRIBUTOS

autofocus

placeholder

pattern

multiple

autocomplete

min/max

step

required

ATRIBUTOS autofocus placeholder pattern multiple autocomplete min/max step required

CSS 3

CSS 3

CSS 3

Nuevas posibilidades de decoración

CSS 3 Nuevas posibilidades de decoración

CSS 3

Nuevas posibilidades de decoración Menos markup

CSS 3 Nuevas posibilidades de decoración Menos markup

CSS 3

Nuevas posibilidades de decoración Menos markup Menos dependencia de javascript

CSS 3 Nuevas posibilidades de decoración Menos markup Menos dependencia de javascript

CSS 3

Nuevas posibilidades de decoración Menos markup Menos dependencia de javascript Mayor control

CSS 3 Nuevas posibilidades de decoración Menos markup Menos dependencia de javascript Mayor control

BACKGROUND

Multiple backgrounds:

html{

background: url(img/arena.png) no-repeat 70% 20%, url(img/wall.png) repeat left top;

}

Multiple backgrounds: html{ background: url(img/arena.png) no-repeat 70% 20%, url(img/wall.png) repeat left top; }

RGBA Y HSLA

RGBa = RGB + alpha

#foo {

Background: rgba(0, 0, 0, .5);

}

#foo {

Background: rgba(255, 0, 0, .7);

}

Texto
Texto
Texto
Texto

RGBA Y HSLA

HSLa = HSL + alpha

#foo {

Background: hsla(324, 100%, 75%, .5);

}

#foo {

Background: hsla(324, 100%, 25%, .2);

}

Y HSLA HSLa = HSL + alpha #foo { Background: hsla(324, 100%, 75%, .5); } #foo

RGBA Y HSLA

RGBA Y HSLA
RGBA Y HSLA

@FONT-FACE

Permite incorporar tipografías no instaladas

@font-face { font-family: 'lobster';

src: url('lobster.ttf') format('truetype'); font-weight: normal; font-style: normal;

}

'lobster'; src: url('lobster.ttf') format('truetype'); font-weight: normal; font-style: normal; }

@FONT-FACE

@FONT-FACE

@FONT-FACE

Google Font Directory http://code.google.com/webfonts

Fontsquirrel

Typekit

Font Directory http://code.google.com/webfonts Fontsquirrel http://www.fontsquirrel.com/ Typekit http://typekit.com/

TEXT-SHADOW

h1 {text-shadow: 3px 3px 5px black;}

h1 {text-shadow: 5px 5px 0px blue;}

TEXT-SHADOW h1 {text-shadow: 3px 3px 5px black;} h1 {text-shadow: 5px 5px 0px blue;}
TEXT-SHADOW h1 {text-shadow: 3px 3px 5px black;} h1 {text-shadow: 5px 5px 0px blue;}

TEXT-SHADOW

TEXT-SHADOW
TEXT-SHADOW

BOX-SHADOW

#foo { box-shadow: 5px 5px 10px black;}

#foo { box-shadow: inset 3px 3px 5px black;}

BOX-SHADOW #foo { box-shadow: 5px 5px 10px black;} #foo { box-shadow: inset 3px 3px 5px black;}
BOX-SHADOW #foo { box-shadow: 5px 5px 10px black;} #foo { box-shadow: inset 3px 3px 5px black;}
BOX-SHADOW #foo { box-shadow: 5px 5px 10px black;} #foo { box-shadow: inset 3px 3px 5px black;}

BOX-SHADOW

BOX-SHADOW
BOX-SHADOW
BOX-SHADOW

BORDER-RADIUS

#foo { border-radius: 10px;}

#foo { border-radius: 50px 0 50px 0;}

BORDER-RADIUS #foo { border-radius: 10px;} #foo { border-radius: 50px 0 50px 0;}
BORDER-RADIUS #foo { border-radius: 10px;} #foo { border-radius: 50px 0 50px 0;}
BORDER-RADIUS #foo { border-radius: 10px;} #foo { border-radius: 50px 0 50px 0;}

BORDER-RADIUS

BORDER-RADIUS
BORDER-RADIUS
BORDER-RADIUS

TRANSFORMS

#foo { transform: rotate(45deg);}

#foo { transform: scale(0.5);}

TRANSFORMS #foo { transform: rotate(45deg);} #foo { transform: scale(0.5);}
TRANSFORMS #foo { transform: rotate(45deg);} #foo { transform: scale(0.5);}

TRANSFORMS

#foo { transform: skew(45deg);}

#foo { transform: translate (20px,-20px);}

TRANSFORMS #foo { transform: skew(45deg);} #foo { transform: translate (20px,-20px);}

CSS 3 SHAPES

#circle { width: 140px; height: 140px; background: red; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px;

}
}
140px; height: 140px; background: red; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px; }

CSS 3 SHAPES

#oval { width: 200px; height: 100px; background: purple; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px;

}

background: purple; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }
background: purple; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }

CSS 3 SHAPES

#left-triangle { width: 0; height: 0; border-right: 100px solid orange; border-top: 50px solid transparent; border-bottom: 50px solid transparent;

}

height: 0; border-right: 100px solid orange; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }
height: 0; border-right: 100px solid orange; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }

Y MUCHAS MÁS

Y MUCHAS MÁS http://css3shapes.com/

¡GRACIAS!

:)

¡GRACIAS! :)