Presentación del "Seminario Introducción a HTML5 y CSS3" impartido el 28 de octubre de 2010 en el CEU San Pablo por Paradigma Tecnológico.
Desde Paradigma, esperamos que el seminario cumpliera con vuestras expectativas y que os haya servido para conocer dichos estándares y os sirva de punto de partida para el desarrollo de nuevas aplicaciones web.
Muchas gracias.
Los mejores simuladores de circuitos electrónicos.pdf
Html5 y css3: Introducción y aplicación desde hoy
1. HTML 5 + CSS 3
Introducción y aplicación desde hoy
2. QUE VAMOS A VER
28 de Octubre de 2010 2HTML 5 y CSS 3
HTML 5
• Introducción e Historia
• Estado Actual
• Beneficios
• Novedades
CSS 3
• Introducción e Historia
• CSS 3 vs. CSS 2
• Novedades
• Estado Actual
3. QUÉ ES HTML 5
28 de Octubre de 2010 HTML 5 y CSS 3 3
4. QUE ES HTML 5
Es una evolución.
28 de Octubre de 2010 HTML 5 y CSS 3 4
5. QUE ES HTML 5
Nuevas etiquetas de presentación.
28 de Octubre de 2010 HTML 5 y CSS 3 5
<div id=“header”>
<div id=“menu”>
<div id=“footer”>
<div>
<div>
<div>
<header>
<nav>
<footer>
<article>
<section>
<aside>
6. QUE ES HTML 5
Estandarización 1/2
28 de Octubre de 2010 HTML 5 y CSS 3 6
canvas
video
audio
geolocalización
drag & drop
7. QUE ES HTML 5
Estandarización 2/2
28 de Octubre de 2010 HTML 5 y CSS 3 7
http://dev.sencha.com/deploy/touch/examples/kitchensink/
9. HISTORIA HTML 5
28 de Octubre de 2010 HTML 5 y CSS 3 9
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]
11. ESTADO ACTUAL
• Faltan más de 10 años
• Soporte actual limitado
• Partes controvertidas (video)
• Navegadores obsoletos
28 de Octubre de 2010 HTML 5 y CSS 3 11
www.ishtml5readyyet.com
¿Está HTML 5 preparado ya?
Alto número de usuarios usa
versiones viejas de IE
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 HTML 5 y CSS 3 12
¡NO HACE FALTA ESPERAR HASTA 2022 !
(IE 9 mejorará considerablemente)
13. ESTADO ACTUAL
28 de Octubre de 2010 HTML 5 y CSS 3 13
www.findmebyip.com/litmus/#html5-web-applications
www.caniuse.com
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 15
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 16
18. ETIQUETADO DEL DOCUMENTO
28 de Octubre de 2010 HTML 5 y CSS 3 18
DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN”
"http://www.w3.org/TR/xhtml1/DTD/x
html1-strict.dtd">
XHTML 1.0 HTML5
<!DOCTYPE html>
19. 28 de Octubre de 2010 HTML 5 y CSS 3 19
ETIQUETADO DEL DOCUMENTO
META
<meta http-equiv=”Content-Type”
content=”text/html; charset=UTF-8”>
HTML 4.01 HTML5
<meta charset=”UTF-8”>
20. 28 de Octubre de 2010 HTML 5 y CSS 3 20
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>
21. 28 de Octubre de 2010 HTML 5 y CSS 3 21
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”>
22. 28 de Octubre de 2010 HTML 5 y CSS 3 22
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>
23. 28 de Octubre de 2010 HTML 5 y CSS 3 23
ETIQUETADO
DE DOCUMENTOS
24. 28 de Octubre de 2010 HTML 5 y CSS 3 24
<header>
<hgroup>
<nav>
<footer>
<article>
<section>
<aside>
ELEMENTOS ESTRUCTURALES
25. 28 de Octubre de 2010 HTML 5 y CSS 3 25
<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>
26. 28 de Octubre de 2010 HTML 5 y CSS 3 26
<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>
27. 28 de Octubre de 2010 HTML 5 y CSS 3 27
<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
28. 28 de Octubre de 2010 HTML 5 y CSS 3 28
<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>
29. 28 de Octubre de 2010 HTML 5 y CSS 3 29
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>
???
!!!!!
30. 28 de Octubre de 2010 HTML 5 y CSS 3 30
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>
31. 28 de Octubre de 2010 HTML 5 y CSS 3 31
<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>
34. CANVAS
28 de Octubre de 2010 HTML 5 y CSS 3 34
• 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
35. 28 de Octubre de 2010 HTML 5 y CSS 3 35
ELEMENTOS
MULTIMEDIA
36. 28 de Octubre de 2010 HTML 5 y CSS 3 36
VIDEO
• width & height
• autoplay
• loop
• source
• poster
• controls
• Autobuffer
• preload
37. 28 de Octubre de 2010 HTML 5 y CSS 3 37
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>
38. 28 de Octubre de 2010 HTML 5 y CSS 3 38
AUDIO
• autoplay
• source
• loop
• autobuffer
• controls
• preload
39. 28 de Octubre de 2010 HTML 5 y CSS 3 39
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>
41. 28 de Octubre de 2010 HTML 5 y CSS 3 41
FORMULARIOS
autofocus
<input>
required autocomplete
pattern
placeholder
on
off
Expresiones regulares
http://www.findmebyip.com/litmus/#html5-forms-inputs
42. 28 de Octubre de 2010 HTML 5 y CSS 3 42
FORMULARIOS
<input> type
search
email
url
tel
range (*)
number (*)
date
datetime
datetime-local
month
color
min (*) max (*)
http://www.findmebyip.com/litmus/#html5-forms-inputs
43. 28 de Octubre de 2010 HTML 5 y CSS 3 43
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
45. 28 de Octubre de 2010 HTML 5 y CSS 3 45
JAVASCRIPT
• draggable (true|false): el elemento puede ser arrastrado
hacia otro elemento
PROPIEDADES
EVENTOS
• dragstart
• drag
• dragenter
• dragover
• dragleave
• drop
• dragend
46. 28 de Octubre de 2010 HTML 5 y CSS 3 46
ELEMENTOS
QUE DESAPARECEN
47. 28 de Octubre de 2010 HTML 5 y CSS 3 47
ELEMENTOS QUE DESAPARECEN
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<isindex>
<noframes>
<s>
<strike>
<tt>
<u>
ETIQUETAS
abbr
align
alink
archive
axis
background
bgcolor
border
cellpadding
cellspacing
char
charoff
charset
classid
clear
codebase
codetype
compact
compact
declare
hspace
link
longdesc
marginheight
marginwidth
name
nohref
noshade
nowrap
profile
rev
rules
scheme
scope
shape
size
standby
target
text
type
type
valign
valuetype
version
vlink
vspace
width
ATRIBUTOS
<small>
<b>
<cite>
<i>
REDEFINIDAS
<a>
50. ALMACENAMIENTO LOCAL
Bases de datos
Locales
28 de Octubre de 2010 HTML 5 y CSS 3 50
Lógica de la aplicación
e interfaz de usuario
data generada por el usuario,
o recursos solicitados
VSCache
51. Se fuerza a tener
Instalado el plugin.
Problemas con Firewalls
Se fuerza a usar un
Navegador
determinado
Poca información (4 Kb)
Reduce velocidad
ALMACENAMIENTO LOCAL
Técnicas de Almacenamiento Offline Previas
28 de Octubre de 2010 HTML 5 y CSS 3 51
Navegador
Basado en Plugins
Cookies
52. ALMACENAMIENTO LOCAL
Técnicas de Almacenamiento con HTML5
28 de Octubre de 2010 HTML 5 y CSS 3 52
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
53. ALMACENAMIENTO LOCAL
Web Storage
28 de Octubre de 2010 HTML 5 y CSS 3 53
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/storage
http://playground.html5rocks.com/#localstorage
http://playground.html5rocks.com/#sessionstorage
54. ALMACENAMIENTO LOCAL
Web SQL Database
28 de Octubre de 2010 HTML 5 y CSS 3 54
Como las DDBB tradicionales.
Estructura relacionada (joins)
Más complejas.
IE y Firefox no son compatibles
http://playground.html5rocks.com/#async_transactions
55. ALMACENAMIENTO LOCAL
IndexedDB
28 de Octubre de 2010 HTML 5 y CSS 3 55
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
56. ALMACENAMIENTO LOCAL
FileStorage
28 de Octubre de 2010 HTML 5 y CSS 3 56
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
57. ALMACENAMIENTO LOCAL
¡LO QUIERO USAR YA!
28 de Octubre de 2010 HTML 5 y CSS 3 57
• 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
61. HISTORIA CSS 3
28 de Octubre de 2010 HTML 5 y CSS 3 61
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
62. CSS 3 VS CSS 2
28 de Octubre de 2010 HTML 5 y CSS 3 62
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 63
64. NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 64
• Bordes
• Fondos
• Color
• Text effects
• Layout multicolumna
• Transiciones
• Selectores
• Media Queries
65. NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 65
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/
66. NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 66
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
67. NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 67
• 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/
68. NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 68
Un gran poder
conlleva una gran
responsabilidad
69. NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 69
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
70. NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 70
• column-count
• column-width
• column-gap
• column-rule
MULTI-COLUMN LAYOUT
71. NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 71
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/
72. NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 72
Text-shadow
Text-shadow: Xpos Ypos Blur Color;
ejemplo de sombra
Text-overflow
Text-overflow: ellipsis-word;
Lorem ipsum dolor sit…
Word-wrap
word-wrap: break-word;
This paragraph has long words
thisisaveryverylongwordthatisntr
eallyoneword and again a
longwordwithnospacesinit
TEXTOS
http://lab.simurai.com/css/flashlight
73. NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 73
• :enabled
• :disabled
• :checked
NUEVAS PSEUDO-CLASES
74. a[href^=“http://web”]
a[href*=“.es”]
a[href$=“.pdf”]
NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 74
[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
75. NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 75
MEDIA QUERIES
min-width & max-width
diferentes estilos según el tamaño de la pantalla
http://dev.sencha.com/deploy/touch/examples/kitchensink/
77. ESTADO ACTUAL
• Desarrollo dividido en módulos
• Selectores, fuentes, colores, …
28 de Octubre de 2010 HTML 5 y CSS 3 77
http://www.w3.org/Style/CSS/current-work#table
http://www.findmebyip.com/litmus/#target-selector
6-8
79. PROPIEDADES DE NAVEGADOR
28 de Octubre de 2010 HTML 5 y CSS 3 79
¡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;
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 81