Introducción a HTML5 y CSS3 AWGR

HTML5 Y CSS 3

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

INTRODUCCIÓN

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
5 COSAS QUE DEBES SABER ANTES DE
EMPEZAR CON HTML 5

INTRODUCCIÓN
EMPEZAR CON HTML 5

1. HTML5 NO ES UN GRAN BLOQUE

INTRODUCCIÓN
EMPEZAR CON HTML 5

2. NO NECESITAS TIRAR NADA ANTERIOR A
HTML 5

INTRODUCCIÓN
EMPEZAR CON HTML 5

HTML 5
3. ES MUY FÁCIL EMPEZAR

INTRODUCCIÓN
EMPEZAR CON HTML 5

HTML 5
4. YA FUNCIONA

INTRODUCCIÓN
EMPEZAR CON HTML 5

HTML 5
4. YA FUNCIONA
5. HA LLEGADO PARA QUEDARSE

NOVEDADES EN HTML 5
●Los tags ”únicos” ya no es obligatorio cerrarlos
●Nuevos elementos, más semánticos

NOVEDADES EN HTML 5
●Conjunto de APIs

NOVEDADES EN HTML 5
●Conjunto de APIs
●Posibilidad de acceder a dispositivos: <device>

NOVEDADES EN HTML 5
●Conjunto de APIs
●Canvas y microdatos

NOVEDADES EN HTML 5
●Conjunto de APIs
●WebWorkers, WebStorage, WebSockets y Web SQL
Database

NOVEDADES EN HTML 5
●Conjunto de APIs
Database
●Geolocalización

NOVEDADES EN HTML 5
●Conjunto de APIs
Database
●Geolocalización
●Mejoras en los formularios

NOVEDADES EN HTML 5
●Conjunto de APIs
Database
●Geolocalización
●Mejoras en los formularios
●Retrocompatible

¿SE PUEDE USAR YA?

Sí pero...

¿SE PUEDE USAR YA?

Sí pero...

✔ Hay que preocuparse de la retrocompatibilidad

¿SE PUEDE USAR YA?

Sí pero...

✔ Algunas tecnologías no están preparadas aún

¿SE PUEDE USAR YA?

Sí pero...

✔ El contenido tiene que ser siempre accesible

¿SE PUEDE USAR YA?

Sí pero...

✔ Se pueden complementar con javascript

¿SE PUEDE USAR YA?

Sí pero...

✔ Se pueden complementar con javascript
(polyﬁlls)

!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>

CODIFICACIÓN

XTML 1.1:
<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>

VIEJA ESTRUCTURA
<div id=”header”>
<div id=”nav”>
<div id=”main”>

<div
<div <div id=”sidebar”>
class=”post”> class=”post”>

<div id=”footer”>

NUEVA ESTRUCTURA
<header>
<nav>
<section>

<aside>
<article> <article>

<footer>

<HEADER>

• Logo y título

• Navegación

• Varios encabezados

<NAV>

• Puede haber más de uno

• Migas de pan

• Blogroll

<ARTICLE>

• Artículos de blog y periódico

• Comentarios y productos

• Sindicable

<SECTION>

• Agrupa contenido semánticamente

• Sirve tanto para páginas y artículos

<ASIDE>

• Sidebar

• Anuncios

<FOOTER>

• Puede haber varios

• Licencia, enlaces, etc

FIGURE/FIGCAPTION

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

<HGROUP>
Ha desaparecido de la especiﬁcación de HTML5
recientemente

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

<TIME>

<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: especiﬁca que es una fecha de publicación

ADIÓS A...

applet
big
center
font
frame
blink
marquee

3, 2, 1... ACCIÓN!

<audio>

<video>

ATRIBUTOS
autoplay: reproducción automática.

ATRIBUTOS
controls: muestra los controles de vídeo nativos de cada
navegador. No aparecen por defecto.

ATRIBUTOS
poster: imagen de previsualización. Si no se especiﬁca, el
navegador coge el primer fotograma.

ATRIBUTOS
width, height: si no se especiﬁcan, se toman las del poster;
si no, serán 300px por 150px.

ATRIBUTOS
loop: reproduce el vídeo en bucle.

ATRIBUTOS
preload: precarga el vídeo.

ATRIBUTOS
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

Creamos los elementos nuevos con Javascript:

document.CreateElement('nav');
document.CreateElement('header');
document.CreateElement('footer');
document.CreateElement('article');
document.CreateElement('section');

HTML5 SHIV

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

FORMULARIOS
Más novedades y tipos de input

FORMULARIOS
<input type=search>

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

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

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

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

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

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

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

FORMULARIOS
<input type=search>
<input type=number>
<input type=range>
<input type=color>
<input type=date>
<input type=time>
<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>

ATRIBUTOS

autofocus
placeholder

ATRIBUTOS

autofocus
placeholder
pattern

ATRIBUTOS

autofocus
placeholder
pattern
multiple

ATRIBUTOS

autofocus
placeholder
pattern
multiple
autocomplete

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
required

CSS 3

Nuevas posibilidades de decoración

CSS 3

Menos markup

CSS 3

Menos markup
Menos dependencia de javascript

CSS 3

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;
}

RGBA Y HSLA
RGBa = RGB + alpha

#foo {
Background: rgba(0, 0, 0, .5); Texto
}

#foo {
Background: rgba(255, 0, 0, .7); Texto
}

RGBA Y HSLA

HSLa = HSL + alpha

#foo {
Background: hsla(324, 100%, 75%, .5);
}

#foo {
Background: hsla(324, 100%, 25%, .2);
}

@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;
}

@FONT-FACE
Google 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;}

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

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

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

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

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

#foo { transform: scale(0.5);}

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;
}

CSS 3 SHAPES
#oval {
width: 200px;
height: 100px;
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;
}

Y MUCHAS MÁS

http://css3shapes.com/

PARA TERMINAR...
Polyﬁlls:
Modernizr
HTML5 shiv
Google Chrome Frame

Frameworks:
HTML5 boilerplate
Switch to HTML5

RECURSOS
Online:
- HTML5doctor
- Dive into HTML5
- HTML5 Rocks
- W3C HTML5 spec - Edition for Web Authors
- WHATWG HTML5 spec - Edition for Web
Developers
- HTML5 gurus en Twitter, por Bruce Lawson
- Can I Use?

MÁS RECURSOS

Libros:
- HTML5 for web designers, de Jeremy Keith
- Introducing HTML5, de Bruce Lawson y Remy Sharp
- HTML5: Up and Running, de Mark Pilgrim
- Pro HTML5 Programming, de Peter Lubbers, Brian
Albers y Frank Salim
- Foundation HTML5 Canvas, de Rob Hawkes

PARA OJEAR
Presentaciones (@htmlboy y @martuishere):
http://swwweet.com/presentaciones/html5hoy

http://www.slideshare.net/Martulina/conoce-
html5-y-css3-6893390

Página de Javier Casares:
http://javiercasares.com/html5/

Introducción a HTML5 y CSS3 AWGR

Más contenido relacionado

La actualidad más candente (20)

Similar a Introducción a HTML5 y CSS3 AWGR (20)

Último (20)

Introducción a HTML5 y CSS3 AWGR