Post on 12-Jun-2015
description
HTML 5 + CSS 3Introducción y aplicación desde hoy
HTML 5 y CSS 3 2
QUE VAMOS A VER
28 de Octubre de 2010
HTML 5
• Introducción e Historia• Estado Actual• Beneficios• Novedades
CSS 3
• Introducción e Historia• CSS 3 vs. CSS 2• Novedades• Estado Actual
HTML 5 y CSS 3 3
QUÉ ES HTML 5
28 de Octubre de 2010
HTML 5 y CSS 3 4
QUE ES HTML 5
Es una evolución.
28 de Octubre de 2010
HTML 5 y CSS 3 5
QUE ES HTML 5
Nuevas etiquetas de presentación.
28 de Octubre de 2010
<div id=“header”>
<div id=“menu”>
<div id=“footer”>
<div>
<div><div>
<header>
<nav>
<footer>
<article>
<section><aside>
HTML 5 y CSS 3 6
QUE ES HTML 5
Estandarización 1/2
28 de Octubre de 2010
canvas
video
audio
geolocalización
drag & drop
HTML 5 y CSS 3 7
QUE ES HTML 5
Estandarización 2/2
28 de Octubre de 2010
http://dev.sencha.com/deploy/touch/examples/kitchensink/
HTML 5 y CSS 3 8
HISTORIA DE HTML 5
28 de Octubre de 2010
HTML 5 y CSS 3 9
HISTORIA HTML 5
28 de Octubre de 2010
2004
2005
2007
2009
2012
2020
2022
Apple, Mozilla & Opera no consiguieron crear un estándar HTML4.En consecuencia forman la Web WHATWG
Se publica el borrador Web Applications 1.0
W3C “adopta” a WHATGW y publica el borrador HTML5
Finalización del borrador
Gracias a Google, Apple y los dispositivos móviles HTML5 surge con fuerza
Primer Release Candidate de HTML5 [previsión W3C]
Finalización de test [previsión W3C]
Creación del estándar HTML5 [previsión W3C]
HTML 5 y CSS 3 10
ESTADO ACTUAL
28 de Octubre de 2010
HTML 5 y CSS 3 11
ESTADO ACTUAL
• Faltan más de 10 años• Soporte actual limitado• Partes controvertidas (video)• Navegadores obsoletos
28 de Octubre de 2010
www.ishtml5readyyet.com
¿Está HTML 5 preparado ya?
Alto número de usuarios usa versiones viejas de IE
HTML 5 y CSS 3 12
ESTADO ACTUAL
Actualmente (2010)
• Terminando borrador• Partes ya disponibles• Adaptación rápida en navegadores• Mayor número de dispositivos
soportados• Google y Apple lo apoyan• Microsoft adopta estándares
www.findmebyip.com/litmus/#target-selector www.caniuse.com
28 de Octubre de 2010
¡NO HACE FALTA ESPERAR HASTA 2022 !
(IE 9 mejorará considerablemente)
HTML 5 y CSS 3 13
ESTADO ACTUAL
28 de Octubre de 2010
www.findmebyip.com/litmus/#html5-web-applications www.caniuse.com
HTML 5 y CSS 3 14
BENEFICIOS
28 de Octubre de 2010
HTML 5 y CSS 3 15
BENEFICIOS 1/2
• HTML5 = Evolución
• Mejor manejo de errores
• Mayor estandarización
• Código más semántico
• Más accesible
• Soporte multimedia
28 de Octubre de 2010
HTML 5 y CSS 3 16
BENEFICIOS 2/2
• Acceso a recursos como webcams o micrófonos
• Almacenamiento Local
• Webworkers
• Geolocalización
• Gestión de formularios
• Menor dependencia de plugins y Javascript
28 de Octubre de 2010
HTML 5 y CSS 3 1728 de Octubre de 2010
NOVEDADES
HTML 5 y CSS 3 18
ETIQUETADO DEL DOCUMENTO
28 de Octubre de 2010
DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 HTML5
<!DOCTYPE html>
HTML 5 y CSS 3 1928 de Octubre de 2010
ETIQUETADO DEL DOCUMENTO
META
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
HTML 4.01 HTML5
<meta charset=”UTF-8”>
HTML 5 y CSS 3 2028 de Octubre de 2010
ETIQUETADO DEL DOCUMENTO
SCRIPT
<script type=”text/javascript” src=”file.js”> </script>
<script type=”text/javascript”>………
</script>
HTML 4.01 HTML5
<script src=”file.js”></script>
<script>………
</script>
HTML 5 y CSS 3 2128 de Octubre de 2010
ETIQUETADO DEL DOCUMENTO
HOJAS DE ESTILO
<link rel=”stylesheet” type=”text/css” href=”estilos.css”>
HTML 4.01 HTML5
<link rel=”stylesheet” href=”estilos.css”>
HTML 5 y CSS 3 2228 de Octubre de 2010
ETIQUETADO DEL DOCUMENTO
ETIQUETA “A”
<h2><a href=”acercaDe.htm”>Acerca de</a>
</h2><p>
<a href=”acercaDe.htm”>Conoce quiénes somos</a>
</p>
HTML 4.01 HTML5
<a href=”acercaDe.htm”><h2>Acerca de</h2><p>Conoce quiénes somos</p>
</a>
HTML 5 y CSS 3 2328 de Octubre de 2010
ETIQUETADODE DOCUMENTOS
HTML 5 y CSS 3 2428 de Octubre de 2010
<header><hgroup>
<nav>
<footer>
<article>
<section><aside>
ELEMENTOS ESTRUCTURALES
HTML 5 y CSS 3 2528 de Octubre de 2010
<nav>
<footer>
<article>
<section><aside>
ELEMENTOS ESTRUCTURALES
<header><hgroup> <header>
representa la cabecera de un documento o sección
<hgroup>
representa el título de una sección. Se usa para agrupar conjuntos de elementos h1-h6 (títulos y subtítulos)
<header><hgroup>
<h1>Mi Blog</h1><h2>Esforzándome para trabajar
menos</h2></hgroup>
</header>
HTML 5 y CSS 3 2628 de Octubre de 2010
<footer>
<article>
<section><aside>
ELEMENTOS ESTRUCTURALES
<header><hgroup> <nav>
representa una sección del documento que contiene navegación
<nav><ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">galería</a></li> <li><a href="#">contacto</a></li></ul>
</nav>
<nav>
HTML 5 y CSS 3 2728 de Octubre de 2010
<footer>
<aside>
ELEMENTOS ESTRUCTURALES
<header><hgroup> <article>
representa una pieza de contenido independiente dentro de un documento
<nav>
<article>
<section>
<section>
representa una sección del documento (un capítulo, un apartado, etc) agrupa una serie de contenidos con una temática común
HTML 5 y CSS 3 2828 de Octubre de 2010
<footer>
<aside>
ELEMENTOS ESTRUCTURALES
<header><hgroup>
<nav>
<article>
<section>
<article> <hgroup>
<h1>Título del artículo</h1> <h2>Subtítulo del artículo</h2>
</hgroup> <p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p> <section>
<h1>Capítulo 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum scelerisque neque, ac facilisis neque</p>
</section> <section>
<h1>Capítulo 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum scelerisque neque, ac facilisis neque</p>
</section></article>
HTML 5 y CSS 3 2928 de Octubre de 2010
ELEMENTOS ESTRUCTURALES
<dialog>
representa una transcripción de una conversación, o los subtítulos de algún elemento embebido (audio o video)
<dialog> <dt>Pedro:</dt> <dd>Toc, toc.</dd> <dt>Jaime</dt> <dd¿Sí?</dd> <dt>Pedro:</dt> <dd>¿Es aquí el Seminario de HTML5 y
CSS3?</dd> <dt>Jaime</dt> <dd>Pasa, pasa</dd></dialog>
<footer>
<aside>
<header><hgroup>
<nav>
<article>
<section>
???
!!!!!
HTML 5 y CSS 3 3028 de Octubre de 2010
ELEMENTOS ESTRUCTURALES
<figure>
representa un diagrama, una ilustración, una fotografía, etc
<figure> <img src=“fede.jpg" alt=“Federico Caro"> <figcaption>Federico Caro impartiendo
seminarios sobre tecnologías web</figcaption></figure>
<footer>
<aside>
<header><hgroup>
<nav>
<article>
<section><figcaption>
representa la “nota al pie” del elemento incluido en <figure>
HTML 5 y CSS 3 3128 de Octubre de 2010
<footer>
<aside>
ELEMENTOS ESTRUCTURALES
<header><hgroup>
<nav>
<article>
<section>
<aside>
representa contenidos que no están directamente relacionados con el resto de contenido de la página o que aporta información adicional
<article> <header><h1>Tecnologías web</h1></header> <p>bla bla bla</p> <aside>
<ul><li><a href=“#”>Links sobre
HTML5</a></li><li><a href=“#”>Links sobre
CSS3</a></li> </ul></aside>
</article>
HTML 5 y CSS 3 3228 de Octubre de 2010
<aside>
<header><hgroup>
<nav>
<article>
<section>
<footer>
representa el pie de una sección o página. Suele contener información sobre el autor, copyright, etc
<footer> <p>© 2010 Bla bla bla bla</p></footer>
<footer>
ELEMENTOS ESTRUCTURALES
HTML 5 y CSS 3 3328 de Octubre de 2010
CANVAS
HTML 5 y CSS 3 34
CANVAS
28 de Octubre de 2010
• Lienzo utilizado para representar imágenes, gráficos, dibujos y/o elementos visuales “al vuelo” con Javascript
• No requiere plugins, ni codecs
• Mapa de bits (no hay reescalado)
• El contenido no se añade al DOM
• Puede ser exportado
•
<canvas id="miLienzo" width="360" height="240"><p>Tu navegador no soporta canvas</p>
</canvas><script>var lienzo = document.getElementById(‘miLienzo’)var context = lienzo.getContext('2d');</script
http://www.whatwg.org/specs/web-apps/current-work/#2dcontext
http://code.google.com/p/explorercanvas/
http://billmill.org/static/canvastutorial/index.html
HTML 5 y CSS 3 3528 de Octubre de 2010
ELEMENTOSMULTIMEDIA
HTML 5 y CSS 3 3628 de Octubre de 2010
VIDEO
• width & height
• autoplay
• loop
• source
• poster
• controls
• Autobuffer• preload
HTML 5 y CSS 3 3728 de Octubre de 2010
VIDEO
<video controls width="360" height="240"> <source src="movie.mp4"><source src="movie.ogv" type="video/ogg codecs='theora, vorbis'">
<source src="movie.webm" type="video/webm codecs='vp8, vorbis'"> <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=movie.mp4"> <param name="movie" value="player.swf?file=movie.mp4"> <a href="movie.mp4">Descargar vídeo</a> </object>
</video>
HTML 5 y CSS 3 3828 de Octubre de 2010
AUDIO
• autoplay
• source
• loop
• autobuffer
• controls
• preload
HTML 5 y CSS 3 3928 de Octubre de 2010
AUDIO
<audio controls> <source src="song.ogg" type="audio/ogg" /><source src="song.mp3" type="audio/mpeg" /><object type="application/x-shockwave-flash“ data="player.swf?soundFile=song.mp3">
<param name="movie" value="player.swf?soundFile=song.mp3"><a href="song.mp3">Descargar canción</a>
</object> </audio>
HTML 5 y CSS 3 4028 de Octubre de 2010
FORMULARIOS
HTML 5 y CSS 3 4128 de Octubre de 2010
FORMULARIOS
autofocus
<input>required autocomplete
pattern
placeholder
onoff
Expresiones regulares
http://www.findmebyip.com/litmus/#html5-forms-inputs
HTML 5 y CSS 3 4228 de Octubre de 2010
FORMULARIOS
<input> type
searchemailurltelrange (*)number (*)datedatetimedatetime-localmonthcolor
min (*) max (*)
http://www.findmebyip.com/litmus/#html5-forms-inputs
HTML 5 y CSS 3 4328 de Octubre de 2010
JAVASCRIPT
• document.getElementByClassName: acceso a todos los elementos del DOM que compartan la clase especificada
• document.querySelectorAll(selector): acceso a todos los elementos del DOM con el selector especificado
• document.querySelector(selector): acceso al primer elemento del DOM con el selector especificado
<script>elementos = document.querySelectorAll("section div.wrapper"); elementos = document.querySelectorAll("div.content, div.wrapper");inputsText = document.querySelectorAll('[type=text]');
</script>
<script>var elemento = document.querySelector("section div.wrapper");
</script>
NUEVOS MÉTODOS
HTML 5 y CSS 3 4428 de Octubre de 2010
DRAG & DROP
HTML 5 y CSS 3 4528 de Octubre de 2010
JAVASCRIPT
• draggable (true|false): el elemento puede ser arrastrado hacia otro elemento
PROPIEDADES
EVENTOS
• dragstart• drag
• dragenter• dragover• dragleave
• drop
• dragend
HTML 5 y CSS 3 4628 de Octubre de 2010
ELEMENTOS QUE DESAPARECEN
HTML 5 y CSS 3 4728 de Octubre de 2010
ELEMENTOS QUE DESAPARECEN
<acronym><applet><basefont><big><center><dir><font><frame>
<frameset><isindex><noframes><s><strike><tt><u>
ETIQUETAS
abbralign alinkarchiveaxisbackground bgcolorborder cellpadding cellspacing charcharoffcharsetclassidclearcodebase
codetypecompact compactdeclarehspacelinklongdescmarginheight marginwidth name nohrefnoshade nowrap profilerevrules
schemescopeshapesize standbytargettexttypetype valign valuetypeversionvlinkvspacewidth
ATRIBUTOS
<small><b>
<cite><i>
REDEFINIDAS
<a>
HTML 5 y CSS 3 48
ALMACENAMIENTO LOCAL
28 de Octubre de 2010
HTML 5 y CSS 3 49
ALMACENAMIENTO LOCAL
Web != online
28 de Octubre de 2010
HTML 5 y CSS 3 50
ALMACENAMIENTO LOCAL
Bases de datosLocales
28 de Octubre de 2010
Lógica de la aplicacióne interfaz de usuario
data generada por el usuario, o recursos solicitados
VSCache
HTML 5 y CSS 3 51
Se fuerza a tenerInstalado el plugin.
Problemas con Firewalls
Se fuerza a usar unNavegador
determinado
Poca información (4 Kb)
Reduce velocidad
ALMACENAMIENTO LOCAL
Técnicas de Almacenamiento Offline Previas
28 de Octubre de 2010
Navegador
Basado en Plugins
Cookies
HTML 5 y CSS 3 52
ALMACENAMIENTO LOCAL
Técnicas de Almacenamiento con HTML5
28 de Octubre de 2010
Diferentes APIs:• Web Storage (Local Storage or DOM Storage)• Web SQL Database• IndexedDB• File Storage
PRINCIPIOS:• Normas estándar para “todos” los navegadores.• Información solo accesible desde el propio navegador.• Interacción de la API y la Base de Datos es asíncrona
HTML 5 y CSS 3 53
ALMACENAMIENTO LOCAL
Web Storage
28 de Octubre de 2010
TIPOS DE DATOS:• localStorage Permanecen hasta que el usuario los borra
• sessionStorage Desaparecen al cerrarse el navegador
El más compatible.Estructura clave-valor
Integridad de los datos.Race conditions
http://html5demos.com/storagehttp://playground.html5rocks.com/#localstoragehttp://playground.html5rocks.com/#sessionstorage
HTML 5 y CSS 3 54
ALMACENAMIENTO LOCAL
Web SQL Database
28 de Octubre de 2010
Como las DDBB tradicionales.
Estructura relacionada (joins)
Más complejas.
IE y Firefox no son compatibles
http://playground.html5rocks.com/#async_transactions
HTML 5 y CSS 3 55
ALMACENAMIENTO LOCAL
IndexedDB
28 de Octubre de 2010
Mezcla entre Web Storage y Web SQL Database
Estructura relacionada (joins)
Transacciones de información.
Ningún navegador lo soporta, pero está previsto ser soportado por todos
HTML 5 y CSS 3 56
ALMACENAMIENTO LOCAL
FileStorage
28 de Octubre de 2010
Puedes guardar información binaria (como texto), y grandes cantidades de información.
File Reader soportado solo por Chrome
FileWriter todavía no soportado por nadie
Cuando sea soportado será bueno para almacenar grandes cantidades de información
HTML 5 y CSS 3 57
ALMACENAMIENTO LOCAL
¡LO QUIERO USAR YA!
28 de Octubre de 2010
• Por defecto usar WEB STORAGE (+ simple & + compatible )
• Ayudarse de librerías como persis.js ó
• Protegerse contra la perdida de datos• No guardar información privada• Los usuarios pueden borrar los datos fácilmente• Sincronizarse con el servidor frecuentemente
• Securizar los datos• Alto riesgo en navegadores compartidos• SessionStorage mejor que LocalStorage• Encriptar información• Evitar guardar cierto tipo de datos
HTML 5 y CSS 3 58
CSS 3
28 de Octubre de 2010
HTML 5 y CSS 3 59
CSS 3
HTML 5 CSS 3
28 de Octubre de 2010
vsestructura presentación
www.paradigmatecnologico.com
HTML 5 y CSS 3 60
HISTORIA DE CSS 3
28 de Octubre de 2010
HTML 5 y CSS 3 61
HISTORIA CSS 3
28 de Octubre de 2010
1996
1998
2000
2002
2009
CSS 1: permite dar estilos independientemente del navegador y del HTML
CSS2: nuevas funcionalidades, pero implementación lenta
Semilla del CSS3.
Se plantea una lista de mejoras de CSS2
Borrador de CSS3
CSS2.1: Crea lo que ahora consideramos el estándar
Implementación en algunos navegadores de algunas partes de CSS3
2005 Empieza el desarrollo de CSS3
HTML 5 y CSS 3 62
CSS 3 VS CSS 2
28 de Octubre de 2010
HTML 5 y CSS 3 63
CSS 3 VS. CSS 2
Mejora en los selectores
Nuevos estilos • Sombra• Opacidad• esquinas redondeadas• …
Mejora en tipografías
Transformaciones
Reduce la cantidad de HTML (divitis)
Reduce las peticiones de imágenes
¡Nuestra pagina va a ser más rápida!28 de Octubre de 2010
HTML 5 y CSS 3 64
NOVEDADES
28 de Octubre de 2010
• Bordes• Fondos• Color• Text effects• Layout multicolumna• Transiciones• Selectores• Media Queries
HTML 5 y CSS 3 65
NOVEDADES
28 de Octubre de 2010
border-image: url(border.png) 27 27 27 27 round round;
border-image
box-shadow: 10px 10px 5px #888;
box-shadow / text-shadow
border-radius: 15px;
border-radius
BORDES
border: 5px solid #000;border-colors:#e00 #c30 #c50 #c60 #c70
border-color
http://www.webdesignerwall.com/demo/css3-dropdown-menu/
HTML 5 y CSS 3 66
NOVEDADES
28 de Octubre de 2010
background: url(../topImage.jpg) top left no-repeat, url(../centerImage.jpg) top right repeat-y, url(../bottomImage.jpg) bottom center no-repeat;
top image
center image
bottom image
MULTIPLE BACKGROUNDS
http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html
HTML 5 y CSS 3 67
NOVEDADES
28 de Octubre de 2010
• rotate : transform: rotate(30deg);
• skew :transform: skew(-30deg);
• translate transform: translate(30px,10px);
• scale :
transform: scale(0.5,2.0);
TRANSFORM
http://lab.simurai.com/css/tilt-shift/
http://www.ejhansel.com/transform/
HTML 5 y CSS 3 68
NOVEDADES
28 de Octubre de 2010
Un gran poderconlleva una granresponsabilidad
HTML 5 y CSS 3 69
NOVEDADES
28 de Octubre de 2010
rgb(255,192,0,1);
rgb(255,192,0,0.5);
• RGBA: (Red, Green, Blue, Alpha)
Opacity: 1.0 Opacity: 0.5
• Opacity
• HSLA: (Hue, Saturation, Lightness, Alpha)
hsla(21,97%,52%,1);
hsla(21,97%,52%,0.5);
• HSL: (Hue, Saturation, Lightness)
hsl(21,97%,52%)
COLOR
HTML 5 y CSS 3 70
NOVEDADES
28 de Octubre de 2010
• column-count
• column-width
• column-gap
• column-rule
MULTI-COLUMN LAYOUT
HTML 5 y CSS 3 71
NOVEDADES
28 de Octubre de 2010
WebFonts
WEBFONTS
@font-face { font-family: ‘FontName'; src: url('Gondola_SD-webfont.eot'); src: local('☺'), url(' FontName.woff') format('woff'), url(' FontName.ttf') format('truetype'), url(' FontName.svg#webfontsgM4b18D') format('svg'); font-weight: normal; font-style: normal;}
div { font-family: FontName;}
http://www.paradigmatecnologico.com/
HTML 5 y CSS 3 72
NOVEDADES
28 de Octubre de 2010
Text-shadowText-shadow: Xpos Ypos Blur Color;ejemplo de sombra
Text-overflowText-overflow: ellipsis-word;
Lorem ipsum dolor sit…
Word-wrapword-wrap: break-word;
This paragraph has long words thisisaveryverylongwordthatisntreallyoneword and again a longwordwithnospacesinit
TEXTOS
http://lab.simurai.com/css/flashlight
HTML 5 y CSS 3 73
NOVEDADES
28 de Octubre de 2010
• :enabled
• :disabled
• :checked
NUEVAS PSEUDO-CLASES
HTML 5 y CSS 3 74
a[href^=“http://web”]
a[href*=“.es”]
a[href$=“.pdf”]
NOVEDADES
28 de Octubre de 2010
[att$=val]termina por val
[att^=val]empieza por val
[att*=val]
contiene val
<a href=“http://web.com/home.html”>
<a href=“http://web.com/img.jpg”>
<a href=“http://web.com/img.gif”>
<a href=“http://site.com/file.pdf”>
<a href=“http://site.es/home/index.pdf”>
<a href=“http://site.es/about.html”>
<a href=“http://site.com/home.html”>
SELECTORES DE ATRIBUTOS
HTML 5 y CSS 3 75
NOVEDADES
28 de Octubre de 2010
MEDIA QUERIES
min-width & max-widthdiferentes estilos según el tamaño de la pantalla
http://dev.sencha.com/deploy/touch/examples/kitchensink/
HTML 5 y CSS 3 76
ESTADO ACTUAL
28 de Octubre de 2010
HTML 5 y CSS 3 77
ESTADO ACTUAL
• Desarrollo dividido en módulos• Selectores, fuentes, colores, …
28 de Octubre de 2010
http://www.w3.org/Style/CSS/current-work#tablehttp://www.findmebyip.com/litmus/#target-selector
6-8
HTML 5 y CSS 3 78
PROPIEDADES DE NAVEGADOR
28 de Octubre de 2010
HTML 5 y CSS 3 79
PROPIEDADES DE NAVEGADOR
28 de Octubre de 2010
¡podemos usar CSS3 desde hoy!
Aumentamos y ensuciamos el código
No todos los navegadores lo soportan
Posibles soluciones• eccstender.org• less.js• Ficheros .css para cada navegador• css3generator.com
-o-border-radius: 10px; -webkit-border-radius: 10px;
-moz-border-radius: 10px;-ms-border-radius: 10px;
HTML 5 y CSS 3 80
CONCLUSIONES
28 de Octubre de 2010
HTML 5 y CSS 3 81
CONCLUSIONES
• ES EL MOMENTO• Internet en el móvil• Aplicaciones online• Alta implantación en navegadores
• WEB = CAMBIO
• PRONTO SERÁ EL ESTANDARD
• PRACTICA E IMPLEMENTALO POCO A POCO
28 de Octubre de 2010
HTML 5 y CSS 3 82
MUCHAS GRACIAS!
¿ALGUNA PREGUNTA?
28 de Octubre de 2010