Post on 18-Nov-2014
description
HTML5 Y CSS 3
Antonio Valverde RodríguezTwitter: @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
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 UN GRAN BLOQUE 2. NO NECESITAS TIRAR NADA ANTERIOR A HTML 5
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
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
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
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, más semánticos ●Conjunto de APIs
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>
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
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
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
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?
✔ Hay que preocuparse de la retrocompatibilidad
Sí pero...
¿SE PUEDE USAR YA?
✔ Hay que preocuparse de la retrocompatibilidad ✔ Algunas tecnologías no están preparadas aún
Sí pero...
¿SE PUEDE USAR YA?
✔ Hay que preocuparse de la retrocompatibilidad ✔ Algunas tecnologías no están preparadas aún ✔ El contenido tiene que ser siempre accesible
Sí pero...
¿SE PUEDE USAR YA?
✔ 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
Sí pero...
¿SE PUEDE USAR YA?
✔ 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)
Sí pero...
!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 / SCRIPTXTML 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=”footer”>
<div id=”sidebar”>
<div id=”main”>
<div class=”post”>
<div class=”post”>
NUEVA ESTRUCTURA<header>
<nav>
<footer>
<aside>
<section>
<article> <article>
<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/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>
<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>
<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
ADIÓS A...
applet
big
center
font
frame
blink
marquee
3, 2, 1... ACCIÓN!
<audio>
<video>
<AUDIO> Y <VIDEO>
<audio src="cancion.???" > </audio>
<video src="video.???" > </video>
ATRIBUTOS
ATRIBUTOSautoplay: reproducción automática.
ATRIBUTOSautoplay: reproducción automática.controls: muestra los controles de vídeo nativos de cada navegador. No aparecen por defecto.
ATRIBUTOSautoplay: 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.
ATRIBUTOSautoplay: 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.
ATRIBUTOSautoplay: 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.
ATRIBUTOSautoplay: 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.
ATRIBUTOSautoplay: 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
ChromeFirefoxSafariOpera
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
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
FORMULARIOS
<input type=email> <input type=url> <input type=tel>
FORMULARIOS
Más novedades y tipos de input
FORMULARIOS
<input type=search>
Más novedades y tipos de input
FORMULARIOS
<input type=search> <input type=number>
Más novedades y tipos de input
FORMULARIOS
<input type=search> <input type=number> <input type=range>
Más novedades y tipos de input
FORMULARIOS
<input type=search> <input type=number> <input type=range> <input type=color>
Más novedades y tipos de input
FORMULARIOS
<input type=search> <input type=number> <input type=range> <input type=color>
Más novedades y tipos de input
<input type=date>
FORMULARIOS
<input type=search> <input type=number> <input type=range> <input type=color>
Más novedades y tipos de input
<input type=date> <input type=time>
FORMULARIOS
<input type=search> <input type=number> <input type=range> <input type=color>
Más novedades y tipos de input
<input type=date> <input type=time>
<input type=datetime>
FORMULARIOS
<input type=search> <input type=number> <input type=range> <input type=color>
Más novedades y tipos de input
<input type=date> <input type=time>
<input type=datetime> <input type=month>
FORMULARIOS
<input type=search> <input type=number> <input type=range> <input type=color>
Más novedades y tipos de input
<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>
ATRIBUTOS
ATRIBUTOS
autofocus
ATRIBUTOS
autofocusplaceholder
ATRIBUTOS
autofocusplaceholder
pattern
ATRIBUTOS
autofocusplaceholder
patternmultiple
ATRIBUTOS
autofocusplaceholder
patternmultiple
autocomplete
ATRIBUTOS
autofocusplaceholder
patternmultiple
autocompletemin/max
ATRIBUTOS
autofocusplaceholder
patternmultiple
autocompletemin/maxstep
ATRIBUTOS
autofocusplaceholder
patternmultiple
autocompletemin/maxstep
required
CSS 3
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
Menos dependencia de javascript
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; }
RGBA Y HSLA
#foo {Background: rgba(0, 0, 0, .5);}
#foo {Background: rgba(255, 0, 0, .7);}
RGBa = RGB + alpha
Texto
Texto
RGBA Y HSLA
HSLa = HSL + alpha
#foo {Background: hsla(324, 100%, 75%, .5);}
#foo {Background: hsla(324, 100%, 25%, .2);}
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;}
@FONT-FACE
@FONT-FACE
Google Font Directoryhttp://code.google.com/webfonts
Fontsquirrelhttp://www.fontsquirrel.com/
Typekithttp://typekit.com/
TEXT-SHADOW
h1 {text-shadow: 3px 3px 5px black;}
h1 {text-shadow: 5px 5px 0px blue;}
TEXT-SHADOW
BOX-SHADOW
#foo { box-shadow: 5px 5px 10px black;}
#foo { box-shadow: inset 3px 3px 5px black;}
BOX-SHADOW
BORDER-RADIUS
#foo { border-radius: 10px;}
#foo { border-radius: 50px 0 50px 0;}
BORDER-RADIUS
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;}
PARA TERMINAR...
Polyfills:Modernizr
HTML5 shivGoogle Chrome Frame
Frameworks:HTML5 boilerplateSwitch 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 OJEARPresentaciones (@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/
¡GRACIAS!:)