Html5ycss3 101029060142 Phpapp02

HTML 5 + CSS 3
Introduccin y aplicacin desde hoy
QUE VAMOS A VER
HTML 5
CSS 3
Introduccin e Historia
Estado Actual
Beneficios
Novedades
28 de Octubre de 2010
HTML 5 y CSS 3
Introduccin e Historia
CSS 3 vs. CSS 2
Novedades
Estado Actual
QU ES HTML 5
HTML 5 y CSS 3
QUE ES HTML 5
Es una evolucin.
HTML 5 y CSS 3
QUE ES HTML 5
Nuevas etiquetas de presentacin.

<div id=header>
<header>
<div id=menu>
<nav>
<div>
<article>
<div>
<div>
<div id=footer>
<section>
<aside>
<footer>
HTML 5 y CSS 3
QUE ES HTML 5
Estandarizacin
video
canvas
1/2
geolocalizacin
audio
HTML 5 y CSS 3
drag & drop
QUE ES HTML 5
Estandarizacin
2/2
http://dev.sencha.com/deploy/touch/examples/kitchensink/
HTML 5 y CSS 3
HISTORIA DE HTML 5
HTML 5 y CSS 3
HISTORIA HTML 5
2004
Apple, Mozilla & Opera no consiguieron crear un estndar HTML4.

En consecuencia forman la Web WHATWG
2005
Se publica el borrador Web Applications 1.0
2007
W3C adopta a WHATGW y publica el borrador HTML5
2009
Finalizacin del borrador

Gracias a Google, Apple y los dispositivos mviles HTML5 surge con
fuerza
2012
Primer Release Candidate de HTML5 [previsin W3C]
2020
Finalizacin de test [previsin W3C]
2022
Creacin del estndar HTML5 [previsin W3C]
HTML 5 y CSS 3
ESTADO
ACTUAL
HTML 5 y CSS 3
10
ESTADO ACTUAL
Est HTML 5 preparado ya?
Faltan ms de 10 aos
Soporte actual limitado
Partes controvertidas (video)
Navegadores obsoletos
Alto nmero de usuarios usa
versiones viejas de IE
www.ishtml5readyyet.com
HTML 5 y CSS 3
11
ESTADO ACTUAL
NO HACE FALTA ESPERAR HASTA
2022 !
Actualmente (2010)
Terminando borrador
Partes ya disponibles
Adaptacin rpida en navegadores
Mayor nmero de dispositivos
soportados
Google y Apple lo apoyan
9 mejorar considerablemente)
(IE
Microsoft
adopta estndares
www.findmebyip.com/litmus/#target-selector
www.caniuse.com
HTML 5 y CSS 3
12
ESTADO ACTUAL
www.findmebyip.com/litmus/#html5-web-applications
www.caniuse.com
HTML 5 y CSS 3
13
BENEFICIOS
HTML 5 y CSS 3
14
BENEFICIOS
1/2
HTML5 = Evolucin
Mejor manejo de errores
Mayor estandarizacin
Cdigo ms semntico
Ms accesible
Soporte multimedia
HTML 5 y CSS 3
15
BENEFICIOS
2/2
Acceso a recursos como webcams o

micrfonos
Almacenamiento Local
Webworkers
Geolocalizacin
Gestin de formularios
Menor dependencia de plugins y Javascript
HTML 5 y CSS 3
16
NOVEDADES
HTML 5 y CSS 3
17
ETIQUETADO DEL DOCUMENTO
DOCTYPE
XHTML 1.0
HTML5
<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Strict//EN
"http://www.w3.org/TR/xhtml1/DT
D/xhtml1-strict.dtd">
<!DOCTYPE html>
HTML 5 y CSS 3
18
META
HTML 4.01
HTML5
<meta http-equiv=Content-Type
content=text/html; charset=UTF8>
<meta charset=UTF8>
HTML 5 y CSS 3
19
SCRIPT
HTML 4.01
<script type=text/javascript
src=file.js> </script>
<script type=text/javascript>
</script>
HTML5
<script src=file.js></script>
<script>
</script>
HTML 5 y CSS 3
20
HOJAS DE ESTILO
HTML 4.01
HTML5
<link rel=stylesheet
href=estilos.css>
<link rel=stylesheet
type=text/css
href=estilos.css>
HTML 5 y CSS 3
21
ETIQUETA A
HTML 4.01
<h2>
<a href=acercaDe.htm>Acerca
de</a>
</h2>
<p>
<a href=acercaDe.htm>Conoce
quines somos</a>
</p>
HTML5
<a href=acercaDe.htm>
<h2>Acerca de</h2>
<p>Conoce quines somos</p>
</a>
HTML 5 y CSS 3
22
ETIQUETADO
DE DOCUMENTOS
HTML 5 y CSS 3
23
ELEMENTOS ESTRUCTURALES
<header>
<hgroup>
<nav>
<article>
<section>
<aside>
<footer>
HTML 5 y CSS 3
24
<header>
<hgroup>
representa la cabecera de un
documento o seccin
<nav>
<article>
<section>
<footer>
<header>
<aside>
<hgroup>
representa el ttulo de una
seccin. Se usa para agrupar
conjuntos de elementos h1-h6
(ttulos y subttulos)
<header>
<hgroup>
<h1>Mi Blog</h1>
<h2>Esforzndome para trabajar
menos</h2>
</hgroup>
</header>
HTML 5 y CSS 3
25
<header>
<hgroup>
representa una seccin del

documento que contiene
navegacin
<nav>
<article>
<section>
<footer>
<nav>
<aside>
<nav>
<ul>
<li><a
<li><a
<li><a
<li><a
</ul>
</nav>
HTML 5 y CSS 3
href="#">home</a></li>
href="#">blog</a></li>
href="#">galera</a></li>
href="#">contacto</a></li>
26
<header>
<hgroup>
<nav>
representa una pieza de

contenido independiente dentro
de un documento
<article>
<section>
<footer>
<article>
<aside>
<section>
representa una seccin del
documento (un captulo, un
apartado, etc) agrupa una serie
de contenidos con una temtica
comn
HTML 5 y CSS 3
27
<header>
<hgroup>
<nav>
<article>
<section>
<footer>
<aside>
<article>
<hgroup>
<h1>Ttulo del artculo</h1>
<h2>Subttulo del artculo</h2>
</hgroup>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p>
<section>
<h1>Captulo 1</h1>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer
bibendum scelerisque neque, ac facilisis
neque</p>
</section>
<section>
<h1>Captulo 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
28
<header>
<hgroup>
<nav>
<article>
<aside>
<section>
<footer>
???
!!!!!
<dialog>
representa una transcripcin de
una conversacin, o los subttulos
de algn elemento embebido
(audio o video)
<dialog>
<dt>Pedro:</dt>
<dd>Toc, toc.</dd>
<dt>Jaime</dt>
<ddS?</dd>
<dt>Pedro:</dt>
<dd>Es aqu el Seminario de HTML5 y CSS3?
</dd>
<dt>Jaime</dt>
<dd>Pasa, pasa</dd>
</dialog>
HTML 5 y CSS 3
29
<header>
<hgroup>
representa un diagrama, una

ilustracin, una fotografa, etc
<nav>
<article>
<section>
<figure>
<aside>
<figcaption>
representa la nota al pie del
elemento incluido en <figure>
<footer>
<figure>
<img src=fede.jpg" alt=Federico Caro">
<figcaption>Federico Caro impartiendo
seminarios sobre tecnologas web</figcaption>
</figure>
HTML 5 y CSS 3
30
<header>
<hgroup>
<nav>
<article>
<section>
<footer>
<aside>
<aside>
representa contenidos que no
estn directamente relacionados
con el resto de contenido de la
pgina o que aporta informacin
adicional
<article>
<header><h1>Tecnologas 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
31
<header>
<hgroup>
<nav>
<article>
<section>
<footer>
<aside>
<footer>
representa el pie de una seccin o
pgina. Suele contener
informacin sobre el autor,
copyright, etc
<footer>
<p> 2010 Bla bla bla bla</p>
</footer>
HTML 5 y CSS 3
32
CANVAS
HTML 5 y CSS 3
33
CANVAS
Lienzo utilizado para representar imgenes, grficos, dibujos y/o

elementos visuales al vuelo con Javascript
No requiere plugins, ni codecs
Mapa de bits (no hay reescalado)
El contenido no se aade 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
34
ELEMENTOS
MULTIMEDIA
HTML 5 y CSS 3
35
VIDEO
width & height
poster
autoplay
controls
loop
Autobuffer
preload
source
HTML 5 y CSS 3
36
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 vdeo</a>
</object>
</video>
HTML 5 y CSS 3
37
AUDIO
autoplay
source
loop
autobuffer
controls
preload
HTML 5 y CSS 3
38
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 cancin</a>
</object>
</audio>
HTML 5 y CSS 3
39
FORMULARIOS
HTML 5 y CSS 3
40
FORMULARIOS
placeholder
required
autofocus
<input>
autocomplete
on
off
pattern Expresiones regulares
http://www.findmebyip.com/litmus/#html5-forms-inputs
HTML 5 y CSS 3
41
FORMULARIOS
<input>
min (*)
max (*)
type
search
email
url
tel
range (*)
number (*)
date
datetime
datetime-local
month
color
http://www.findmebyip.com/litmus/#html5-forms-inputs
HTML 5 y CSS 3
42
JAVASCRIPT
NUEVOS MTODOS
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
<script>
elementos = document.querySelectorAll("section div.wrapper");
elementos = document.querySelectorAll("div.content,
div.wrapper");
inputsText = document.querySelectorAll('[type=text]');
</script>
document.querySelector(selector): acceso al primer

elemento del DOM con el selector especificado
<script>
var elemento = document.querySelector("section div.wrapper");
</script>
HTML 5 y CSS 3
43
DRAG & DROP
HTML 5 y CSS 3
44
JAVASCRIPT
PROPIEDADES
draggable (true|false): el elemento puede ser arrastrado

hacia otro elemento
EVENTOS
dragstart
drag
dragenter
dragover
dragleave
HTML 5 y CSS 3
drop
dragend
45
ELEMENTOS
QUE DESAPARECEN
HTML 5 y CSS 3
46
ELEMENTOS QUE DESAPARECEN

ETIQUETA
S
<acronym>
<frameset>
<applet>
<isindex>
<basefont> <noframes>
<big>
<s>
<center>
<strike>
<dir>
<tt>
<font>
<u>
<frame>
REDEFINID
AS
<small> <cite>
<a>
<b>
<i>
ATRIBUTO
S
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
HTML 5 y CSS
3
name
47
ALMACENAMIENTO LOCAL
HTML 5 y CSS 3
48
Web != online
HTML 5 y CSS 3
49
Cache
VS
Lgica de la aplicacin
e interfaz de usuario
Bases de datos
Locales
data generada por el usuario,

o recursos solicitados
HTML 5 y CSS 3
50
Tcnicas de Almacenamiento Offline Previas
Cookies
Navegador
Se fuerza a tener
Instalado el plugin.
Problemas con Firewalls
Poca informacin (4
Kb)
Reduce velocidad
Se fuerza a usar un
Navegador
determinado
Basado en Plugins
HTML 5 y CSS 3
51
Tcnicas de Almacenamiento con HTML5
Diferentes APIs:
Web Storage (Local Storage or DOM Storage)
Web SQL Database
IndexedDB
File Storage
PRINCIPIOS:
Normas estndar para todos los navegadores.
Informacin solo accesible desde el propio navegador.
Interaccin de la API y la Base de Datos es asncrona
HTML 5 y CSS 3
52
Web Storage
El ms compatible.
Estructura clave-valor
TIPOS DE DATOS:
localStorage
Integridad de los datos.

Race conditions
Permanecen hasta que el usuario los borra
sessionStorage Desaparecen al cerrarse el navegador
http://html5demos.com/storage
http://playground.html5rocks.com/#localstoragehttp://playground.html5rocks.com/#sessionstorage
HTML 5 y CSS 3
53
Web SQL Database
Como las DDBB tradicionales.
Estructura relacionada (joins)
Ms complejas.
IE y Firefox no son compatibles
http://playground.html5rocks.com/#async_transactions
HTML 5 y CSS 3
54
IndexedDB
Mezcla entre Web Storage y Web SQL Database
Estructura relacionada (joins)
Transacciones de informacin.
Ningn navegador lo soporta, pero est previsto
ser soportado por todos
HTML 5 y CSS 3
55
FileStorage
Puedes guardar informacin binaria (como texto), y
grandes cantidades de informacin.
File Reader soportado solo por Chrome
FileWriter todava no soportado por nadie
Cuando sea soportado ser bueno para almacenar
grandes cantidades de informacin
HTML 5 y CSS 3
56
LO QUIERO USAR YA!
Por defecto usar WEB STORAGE (+ simple & + compatible )
Ayudarse de libreras como persis.js
Protegerse contra la perdida de datos
No guardar informacin privada

Los usuarios pueden borrar los datos fcilmente
Sincronizarse con el servidor frecuentemente
Securizar los datos
Alto riesgo en navegadores compartidos

SessionStorage mejor que LocalStorage
Encriptar informacin
Evitar guardar cierto tipo de datos
HTML 5 y CSS 3
57
CSS 3
HTML 5 y CSS 3
58
CSS 3
HTML 5
vs
CSS 3
presentacin
estructura
www.paradigmatecnologico.com
HTML 5 y CSS 3
59
HISTORIA DE CSS 3
HTML 5 y CSS 3
60
HISTORIA CSS 3
1996
CSS 1: permite dar estilos independientemente del navegador y del

HTML
1998
CSS2: nuevas funcionalidades, pero implementacin lenta

Semilla del CSS3.
Se plantea una lista de mejoras de CSS2
2000
Borrador de CSS3
2002
CSS2.1: Crea lo que ahora consideramos el estndar
2005
Empieza el desarrollo de CSS3
2009
Implementacin en algunos navegadores de algunas partes de CSS3
HTML 5 y CSS 3
61
CSS 3 VS CSS 2
HTML 5 y CSS 3
62
CSS 3 VS. CSS 2

Mejora en los selectores
Nuevos estilos
Sombra
Opacidad
esquinas redondeadas
Mejora en tipografas
Transformaciones
Reduce la cantidad de HTML (divitis)
Reduce las peticiones de imgenes
Nuestra pagina va a ser ms rpida!
HTML 5 y CSS 3
63
NOVEDADES
Bordes
Fondos
Color
Text effects
Layout multicolumna
Transiciones
Selectores
Media Queries
HTML 5 y CSS 3
64
NOVEDADES
BORDES
border-radius
border-radius: 15px;
border-color
border: 5px solid #000;
border-colors:#e00 #c30 #c50 #c60
#c70
border-image
border-image: url(border.png)
27 27 27 27 round
round;
box-shadow / text-shadow
box-shadow: 10px 10px 5px #888;
http://www.webdesignerwall.com/demo/css3-dropdown-menu/
HTML 5 y CSS 3
65
NOVEDADES
MULTIPLE BACKGROUNDS
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
http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html
HTML 5 y CSS 3
66
NOVEDADES
TRANSFORM
rotate :
skew :
transform: rotate(30deg);
transform: skew(-30deg);
http://www.ejhansel.com/transform/
scale :
translate
transform: translate(30px,10px);
transform: scale(0.5,2.0);
http://lab.simurai.com/css/tilt-shift/
HTML 5 y CSS 3
67
NOVEDADES
Un gran poder
conlleva una gran
responsabilidad
HTML 5 y CSS 3
68
NOVEDADES
COLOR
Opacity
HSL:
(Hue, Saturation, Lightness)
Opacity: 1.0
Opacity: 0.5
hsl(21,97%,52%
)
HSLA:
RGBA:
(Hue, Saturation, Lightness, Alpha)
(Red, Green, Blue, Alpha)

rgb(255,192,0,
1);
rgb(255,192,0,0.
5);
hsla(21,97%,52%,
1);
HTML 5 y CSS 3
hsla(21,97%,52%,0.
5);
69
NOVEDADES
MULTI-COLUMN LAYOUT
column-count
column-width
column-gap
column-rule
HTML 5 y CSS 3
70
NOVEDADES
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
71
NOVEDADES
TEXTOS
Text-shadow
Text-shadow: Xpos Ypos Blur
Color;
ejemplo
ejemplo de
de sombra
sombra
http://lab.simurai.com/css/flashlight
Word-wrap
word-wrap: break-word;
This paragraph has long words
thisisaveryverylongwordthatisn
treallyoneword and again a
longwordwithnospacesinit
Text-overflow
Text-overflow: ellipsis-word;
Lorem ipsum dolor sit
HTML 5 y CSS 3
72
NOVEDADES
NUEVAS PSEUDO-CLASES
:enabled
:disabled
:checked
HTML 5 y CSS 3
73
NOVEDADES
SELECTORES DE ATRIBUTOS
[att*=val
]
[att^=val]
[att$=val]
empieza por val
termina por val
contiene val
<a href=http://web.com/home.html>
a[href^=http://web]
<a href=http://web.com/img.jpg>
<a href=http://web.com/img.gif>
a[href*=.es]
<a href=http://site.com/file.pdf>
<a href=http://site.es/home/index.pdf>
a[href$=.pdf]
<a href=http://site.es/about.html>
<a href=http://site.com/home.html>
HTML 5 y CSS 3
74
NOVEDADES
MEDIA QUERIES
min-width & max-width
diferentes estilos segn el tamao de la pantalla
http://dev.sencha.com/deploy/touch/examples/kitchensink/
HTML 5 y CSS 3
75
ESTADO ACTUAL
HTML 5 y CSS 3
76
ESTADO ACTUAL
Desarrollo dividido en mdulos
Selectores, fuentes, colores,
6-8
http://www.w3.org/Style/CSS/current-work#table
http://www.findmebyip.com/litmus/#target-selector
HTML 5 y CSS 3
77
PROPIEDADES DE
NAVEGADOR
HTML 5 y CSS 3
78
PROPIEDADES DE NAVEGADOR
-o-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
podemos usar CSS3 desde hoy!

Aumentamos y ensuciamos el cdigo
No todos los navegadores lo soportan
Posibles soluciones
eccstender.org
less.js
Ficheros .css para cada navegador
css3generator.com
HTML 5 y CSS 3
79
CONCLUSIONES
HTML 5 y CSS 3
80
CONCLUSIONES
ES EL MOMENTO
Internet en el mvil
Aplicaciones online
Alta implantacin en navegadores
WEB = CAMBIO
PRONTO SER EL ESTANDARD
PRACTICA E IMPLEMENTALO POCO A POCO
HTML 5 y CSS 3
81
MUCHAS GRACIAS!
ALGUNA PREGUNTA?
HTML 5 y CSS 3
82

Html5ycss3 101029060142 Phpapp02

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Html5ycss3 101029060142 Phpapp02

Загружено:

Авторское право:

Доступные форматы

HTML 5 + CSS 3

Introduccin y aplicacin desde hoy

QUE VAMOS A VER

Nuevas etiquetas de presentacin.

drag & drop

Apple, Mozilla & Opera no consiguieron crear un estndar HTML4.

Se publica el borrador Web Applications 1.0

W3C adopta a WHATGW y publica el borrador HTML5

Finalizacin del borrador

Primer Release Candidate de HTML5 [previsin W3C]

Finalizacin de test [previsin W3C]

Creacin del estndar HTML5 [previsin W3C]

Acceso a recursos como webcams o

ETIQUETADO DEL DOCUMENTO

<!DOCTYPE html PUBLIC "-//W3C//DTD

ETIQUETADO DEL DOCUMENTO

ETIQUETADO DEL DOCUMENTO

ETIQUETADO DEL DOCUMENTO

ETIQUETADO DEL DOCUMENTO

representa una seccin del

representa una pieza de

representa un diagrama, una

Lienzo utilizado para representar imgenes, grficos, dibujos y/o

No requiere plugins, ni codecs

Mapa de bits (no hay reescalado)

El contenido no se aade al DOM

Puede ser exportado

<canvas id="miLienzo" width="360"

width & height

pattern Expresiones regulares

document.querySelector(selector): acceso al primer

DRAG & DROP

draggable (true|false): el elemento puede ser arrastrado

ELEMENTOS QUE DESAPARECEN

data generada por el usuario,

Integridad de los datos.

Permanecen hasta que el usuario los borra

sessionStorage Desaparecen al cerrarse el navegador

Por defecto usar WEB STORAGE (+ simple & + compatible )

Ayudarse de libreras como persis.js

Protegerse contra la perdida de datos

No guardar informacin privada

Securizar los datos

Alto riesgo en navegadores compartidos

CSS 1: permite dar estilos independientemente del navegador y del

CSS2: nuevas funcionalidades, pero implementacin lenta

CSS2.1: Crea lo que ahora consideramos el estndar

Empieza el desarrollo de CSS3

Implementacin en algunos navegadores de algunas partes de CSS3

CSS 3 VS. CSS 2

(Hue, Saturation, Lightness, Alpha)

(Red, Green, Blue, Alpha)

Lorem ipsum dolor sit

empieza por val

termina por val

podemos usar CSS3 desde hoy!

Вам также может понравиться