SlideShare a Scribd company logo
1 of 82
Download to read offline
HTML 5 + CSS 3
Introducción y aplicación desde hoy
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
QUÉ ES HTML 5
28 de Octubre de 2010 HTML 5 y CSS 3 3
QUE ES HTML 5
Es una evolución.
28 de Octubre de 2010 HTML 5 y CSS 3 4
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>
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
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/
HISTORIA DE HTML 5
28 de Octubre de 2010 HTML 5 y CSS 3 8
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]
ESTADO ACTUAL
28 de Octubre de 2010 HTML 5 y CSS 3 10
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
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)
ESTADO ACTUAL
28 de Octubre de 2010 HTML 5 y CSS 3 13
www.findmebyip.com/litmus/#html5-web-applications
www.caniuse.com
BENEFICIOS
28 de Octubre de 2010 HTML 5 y CSS 3 14
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
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
28 de Octubre de 2010 HTML 5 y CSS 3 17
NOVEDADES
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>
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”>
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>
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”>
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>
28 de Octubre de 2010 HTML 5 y CSS 3 23
ETIQUETADO
DE DOCUMENTOS
28 de Octubre de 2010 HTML 5 y CSS 3 24
<header>
<hgroup>
<nav>
<footer>
<article>
<section>
<aside>
ELEMENTOS ESTRUCTURALES
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>
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>
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 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>
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>
???
!!!!!
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>
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>
28 de Octubre de 2010 HTML 5 y CSS 3 32
<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
28 de Octubre de 2010 HTML 5 y CSS 3 33
CANVAS
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
28 de Octubre de 2010 HTML 5 y CSS 3 35
ELEMENTOS
MULTIMEDIA
28 de Octubre de 2010 HTML 5 y CSS 3 36
VIDEO
• width & height
• autoplay
• loop
• source
• poster
• controls
• Autobuffer
• preload
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>
28 de Octubre de 2010 HTML 5 y CSS 3 38
AUDIO
• autoplay
• source
• loop
• autobuffer
• controls
• preload
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>
28 de Octubre de 2010 HTML 5 y CSS 3 40
FORMULARIOS
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
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
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
28 de Octubre de 2010 HTML 5 y CSS 3 44
DRAG & DROP
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
28 de Octubre de 2010 HTML 5 y CSS 3 46
ELEMENTOS
QUE DESAPARECEN
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>
ALMACENAMIENTO LOCAL
28 de Octubre de 2010 HTML 5 y CSS 3 48
ALMACENAMIENTO LOCAL
Web != online
28 de Octubre de 2010 HTML 5 y CSS 3 49
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
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
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
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
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
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
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
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
CSS 3
28 de Octubre de 2010 HTML 5 y CSS 3 58
CSS 3
HTML 5 CSS 3
28 de Octubre de 2010 HTML 5 y CSS 3 59
vs
estructura presentación
www.paradigmatecnologico.com
HISTORIA DE CSS 3
28 de Octubre de 2010 HTML 5 y CSS 3 60
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
CSS 3 VS CSS 2
28 de Octubre de 2010 HTML 5 y CSS 3 62
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
NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 64
• Bordes
• Fondos
• Color
• Text effects
• Layout multicolumna
• Transiciones
• Selectores
• Media Queries
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/
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
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/
NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 68
Un gran poder
conlleva una gran
responsabilidad
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
NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 70
• column-count
• column-width
• column-gap
• column-rule
MULTI-COLUMN LAYOUT
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/
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
NOVEDADES
28 de Octubre de 2010 HTML 5 y CSS 3 73
• :enabled
• :disabled
• :checked
NUEVAS PSEUDO-CLASES
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
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/
ESTADO ACTUAL
28 de Octubre de 2010 HTML 5 y CSS 3 76
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
PROPIEDADES DE
NAVEGADOR
28 de Octubre de 2010 HTML 5 y CSS 3 78
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;
CONCLUSIONES
28 de Octubre de 2010 HTML 5 y CSS 3 80
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
MUCHAS GRACIAS!
¿ALGUNA PREGUNTA?
28 de Octubre de 2010 HTML 5 y CSS 3 82

More Related Content

What's hot (20)

C3 lenguaje de presentación.
C3 lenguaje de presentación.C3 lenguaje de presentación.
C3 lenguaje de presentación.
 
Apuntes de HTML 1
Apuntes de HTML 1Apuntes de HTML 1
Apuntes de HTML 1
 
HTML5
HTML5HTML5
HTML5
 
Lenguaje html y css ..
Lenguaje html y css ..Lenguaje html y css ..
Lenguaje html y css ..
 
Introducción a HTML5
Introducción a HTML5Introducción a HTML5
Introducción a HTML5
 
Html
HtmlHtml
Html
 
Presentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLPresentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTML
 
Entorno de Programacion
Entorno de ProgramacionEntorno de Programacion
Entorno de Programacion
 
Html basics
Html basicsHtml basics
Html basics
 
Todo sobre HTML5
Todo sobre HTML5Todo sobre HTML5
Todo sobre HTML5
 
Css - Tema 1
Css - Tema 1Css - Tema 1
Css - Tema 1
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
Tablas html
Tablas htmlTablas html
Tablas html
 
Html
HtmlHtml
Html
 
Html (ppt)
Html (ppt)Html (ppt)
Html (ppt)
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Windows.forms.ejercicios
Windows.forms.ejerciciosWindows.forms.ejercicios
Windows.forms.ejercicios
 
Introduction to css & its attributes with syntax
Introduction to css & its attributes with syntaxIntroduction to css & its attributes with syntax
Introduction to css & its attributes with syntax
 
El diseño web
El diseño webEl diseño web
El diseño web
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 

Viewers also liked

Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Hernan Beati
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño webciwmx
 
HTML5 y CSS3: como sacarles partido hoy
HTML5 y CSS3: como sacarles partido hoyHTML5 y CSS3: como sacarles partido hoy
HTML5 y CSS3: como sacarles partido hoyFRONTDAYS
 
El Gran Libro de Diseño Web
El Gran Libro de Diseño WebEl Gran Libro de Diseño Web
El Gran Libro de Diseño WebRebelBangarang
 
HTML5: empieza hoy
HTML5: empieza hoyHTML5: empieza hoy
HTML5: empieza hoyMarta Armada
 
Maquetado con HTML y CSS
Maquetado con HTML y CSSMaquetado con HTML y CSS
Maquetado con HTML y CSSManuel Razzari
 
Cuaderno de-ejercicios-y-practicas-php
Cuaderno de-ejercicios-y-practicas-phpCuaderno de-ejercicios-y-practicas-php
Cuaderno de-ejercicios-y-practicas-phplgcj1989
 
HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?Maximiliano Martin
 
Introducción al lenguaje HTML
Introducción al lenguaje HTMLIntroducción al lenguaje HTML
Introducción al lenguaje HTMLUNIVA
 
Diseño de páginas Web con HTML
Diseño de páginas Web con HTMLDiseño de páginas Web con HTML
Diseño de páginas Web con HTMLJavier
 
Manual de php con ejercicios
Manual de php con ejerciciosManual de php con ejercicios
Manual de php con ejercicioswilliam kozisck
 

Viewers also liked (20)

Introducción HTML5 y CSS3
Introducción HTML5 y CSS3Introducción HTML5 y CSS3
Introducción HTML5 y CSS3
 
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño web
 
HTML5 y CSS3: como sacarles partido hoy
HTML5 y CSS3: como sacarles partido hoyHTML5 y CSS3: como sacarles partido hoy
HTML5 y CSS3: como sacarles partido hoy
 
El Gran Libro de Diseño Web
El Gran Libro de Diseño WebEl Gran Libro de Diseño Web
El Gran Libro de Diseño Web
 
HTML5: empieza hoy
HTML5: empieza hoyHTML5: empieza hoy
HTML5: empieza hoy
 
Html+css 2013
Html+css 2013Html+css 2013
Html+css 2013
 
Maquetado con HTML y CSS
Maquetado con HTML y CSSMaquetado con HTML y CSS
Maquetado con HTML y CSS
 
Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1
 
Cuaderno de-ejercicios-y-practicas-php
Cuaderno de-ejercicios-y-practicas-phpCuaderno de-ejercicios-y-practicas-php
Cuaderno de-ejercicios-y-practicas-php
 
HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?
 
Taller maquetacion web
Taller maquetacion webTaller maquetacion web
Taller maquetacion web
 
Introducción al lenguaje HTML
Introducción al lenguaje HTMLIntroducción al lenguaje HTML
Introducción al lenguaje HTML
 
Diseño de páginas Web con HTML
Diseño de páginas Web con HTMLDiseño de páginas Web con HTML
Diseño de páginas Web con HTML
 
Maquetación Web
Maquetación WebMaquetación Web
Maquetación Web
 
Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2
 
01 html
01 html01 html
01 html
 
Php desde cero
Php desde ceroPhp desde cero
Php desde cero
 
JavaScript desde Cero
JavaScript desde CeroJavaScript desde Cero
JavaScript desde Cero
 
Manual de php con ejercicios
Manual de php con ejerciciosManual de php con ejercicios
Manual de php con ejercicios
 

Similar to Html5 y css3: Introducción y aplicación desde hoy

Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5joycesita
 
Dispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdfDispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdfJohnWalker603627
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbasPeter Concha
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbasAvanet
 
Introducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRIntroducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRvalgreens
 
Introducción a HTML5 para todos los públicos (UTAD, june 2013)
Introducción a HTML5 para todos los públicos (UTAD, june 2013)Introducción a HTML5 para todos los públicos (UTAD, june 2013)
Introducción a HTML5 para todos los públicos (UTAD, june 2013)Efraim Martinez
 
HTML5 en Acción
HTML5 en AcciónHTML5 en Acción
HTML5 en Accióndrarock
 

Similar to Html5 y css3: Introducción y aplicación desde hoy (20)

Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
 
Html 5
Html 5Html 5
Html 5
 
HTML5 y CSS3 ¿Imprescindibles?
HTML5 y CSS3 ¿Imprescindibles?HTML5 y CSS3 ¿Imprescindibles?
HTML5 y CSS3 ¿Imprescindibles?
 
Programacion web
Programacion webProgramacion web
Programacion web
 
Full-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScript
Full-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScriptFull-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScript
Full-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScript
 
Presentación CSS y HTML en Gummurcia
Presentación CSS y HTML en GummurciaPresentación CSS y HTML en Gummurcia
Presentación CSS y HTML en Gummurcia
 
HTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas SemanticasHTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas Semanticas
 
Hojas de Estilo en Cascada - CSS
Hojas de Estilo en Cascada - CSSHojas de Estilo en Cascada - CSS
Hojas de Estilo en Cascada - CSS
 
Dispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdfDispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdf
 
Semana 2 Arquitectura web y HTML 5
Semana 2   Arquitectura web y HTML 5Semana 2   Arquitectura web y HTML 5
Semana 2 Arquitectura web y HTML 5
 
NUEVO!!! EN HTML 5
NUEVO!!! EN HTML 5NUEVO!!! EN HTML 5
NUEVO!!! EN HTML 5
 
myprofly
myproflymyprofly
myprofly
 
Html5 g@tv
Html5 g@tvHtml5 g@tv
Html5 g@tv
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Introducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRIntroducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGR
 
Introducción a HTML5 para todos los públicos (UTAD, june 2013)
Introducción a HTML5 para todos los públicos (UTAD, june 2013)Introducción a HTML5 para todos los públicos (UTAD, june 2013)
Introducción a HTML5 para todos los públicos (UTAD, june 2013)
 
HTML5
HTML5HTML5
HTML5
 
HTML5 en Acción
HTML5 en AcciónHTML5 en Acción
HTML5 en Acción
 
Las Ventajas de usar HTML5 Y CSS3
Las Ventajas de usar HTML5 Y CSS3Las Ventajas de usar HTML5 Y CSS3
Las Ventajas de usar HTML5 Y CSS3
 

More from Paradigma Digital

Bots 3.0: Dejando atrás los bots conversacionales con Dialogflow.
Bots 3.0: Dejando atrás los bots conversacionales con Dialogflow.Bots 3.0: Dejando atrás los bots conversacionales con Dialogflow.
Bots 3.0: Dejando atrás los bots conversacionales con Dialogflow.Paradigma Digital
 
Java 8 time to join the future
Java 8  time to join the futureJava 8  time to join the future
Java 8 time to join the futureParadigma Digital
 
Programación Reactiva con Spring WebFlux
Programación Reactiva con Spring WebFluxProgramación Reactiva con Spring WebFlux
Programación Reactiva con Spring WebFluxParadigma Digital
 
Orquestando microservicios como lo hace Netflix
Orquestando microservicios como lo hace NetflixOrquestando microservicios como lo hace Netflix
Orquestando microservicios como lo hace NetflixParadigma Digital
 
Meetup microservicios: API Management
Meetup microservicios: API ManagementMeetup microservicios: API Management
Meetup microservicios: API ManagementParadigma Digital
 
Meetup de kubernetes, conceptos básicos.
Meetup  de kubernetes, conceptos básicos.Meetup  de kubernetes, conceptos básicos.
Meetup de kubernetes, conceptos básicos.Paradigma Digital
 
Docker, kubernetes, openshift y openstack, para mi abuela. techfest 2017.pptx
Docker, kubernetes, openshift y openstack, para mi abuela. techfest 2017.pptxDocker, kubernetes, openshift y openstack, para mi abuela. techfest 2017.pptx
Docker, kubernetes, openshift y openstack, para mi abuela. techfest 2017.pptxParadigma Digital
 
Implementando microservicios
Implementando microserviciosImplementando microservicios
Implementando microserviciosParadigma Digital
 
Equipo de Marketing de Paradigma Digital
Equipo de Marketing de Paradigma DigitalEquipo de Marketing de Paradigma Digital
Equipo de Marketing de Paradigma DigitalParadigma Digital
 
¿Cómo se despliega y autoescala Couchbase en Cloud? ¡Aprende de manera práctica!
¿Cómo se despliega y autoescala Couchbase en Cloud? ¡Aprende de manera práctica!¿Cómo se despliega y autoescala Couchbase en Cloud? ¡Aprende de manera práctica!
¿Cómo se despliega y autoescala Couchbase en Cloud? ¡Aprende de manera práctica!Paradigma Digital
 
Manuel Hurtado. Couchbase paradigma4oct
Manuel Hurtado. Couchbase paradigma4octManuel Hurtado. Couchbase paradigma4oct
Manuel Hurtado. Couchbase paradigma4octParadigma Digital
 
Programación Reactiva con RxJava
Programación Reactiva con RxJavaProgramación Reactiva con RxJava
Programación Reactiva con RxJavaParadigma Digital
 
¿Cómo vencer a los dragones digitales?
¿Cómo vencer a los dragones digitales?¿Cómo vencer a los dragones digitales?
¿Cómo vencer a los dragones digitales?Paradigma Digital
 

More from Paradigma Digital (20)

Ddd + ah + microservicios
Ddd + ah + microserviciosDdd + ah + microservicios
Ddd + ah + microservicios
 
Bots 3.0: Dejando atrás los bots conversacionales con Dialogflow.
Bots 3.0: Dejando atrás los bots conversacionales con Dialogflow.Bots 3.0: Dejando atrás los bots conversacionales con Dialogflow.
Bots 3.0: Dejando atrás los bots conversacionales con Dialogflow.
 
Have you met Istio?
Have you met Istio?Have you met Istio?
Have you met Istio?
 
Linkerd a fondo
Linkerd a fondoLinkerd a fondo
Linkerd a fondo
 
Horneando apis
Horneando apisHorneando apis
Horneando apis
 
Java 8 time to join the future
Java 8  time to join the futureJava 8  time to join the future
Java 8 time to join the future
 
Programación Reactiva con Spring WebFlux
Programación Reactiva con Spring WebFluxProgramación Reactiva con Spring WebFlux
Programación Reactiva con Spring WebFlux
 
Orquestando microservicios como lo hace Netflix
Orquestando microservicios como lo hace NetflixOrquestando microservicios como lo hace Netflix
Orquestando microservicios como lo hace Netflix
 
Meetup microservicios: API Management
Meetup microservicios: API ManagementMeetup microservicios: API Management
Meetup microservicios: API Management
 
Meetup de kubernetes, conceptos básicos.
Meetup  de kubernetes, conceptos básicos.Meetup  de kubernetes, conceptos básicos.
Meetup de kubernetes, conceptos básicos.
 
Docker, kubernetes, openshift y openstack, para mi abuela. techfest 2017.pptx
Docker, kubernetes, openshift y openstack, para mi abuela. techfest 2017.pptxDocker, kubernetes, openshift y openstack, para mi abuela. techfest 2017.pptx
Docker, kubernetes, openshift y openstack, para mi abuela. techfest 2017.pptx
 
Implementando microservicios
Implementando microserviciosImplementando microservicios
Implementando microservicios
 
Equipo de Marketing de Paradigma Digital
Equipo de Marketing de Paradigma DigitalEquipo de Marketing de Paradigma Digital
Equipo de Marketing de Paradigma Digital
 
¿Cómo se despliega y autoescala Couchbase en Cloud? ¡Aprende de manera práctica!
¿Cómo se despliega y autoescala Couchbase en Cloud? ¡Aprende de manera práctica!¿Cómo se despliega y autoescala Couchbase en Cloud? ¡Aprende de manera práctica!
¿Cómo se despliega y autoescala Couchbase en Cloud? ¡Aprende de manera práctica!
 
Overview atlas (1)
Overview atlas (1)Overview atlas (1)
Overview atlas (1)
 
Cómo usar google analytics
Cómo usar google analyticsCómo usar google analytics
Cómo usar google analytics
 
Transformación Digital
Transformación DigitalTransformación Digital
Transformación Digital
 
Manuel Hurtado. Couchbase paradigma4oct
Manuel Hurtado. Couchbase paradigma4octManuel Hurtado. Couchbase paradigma4oct
Manuel Hurtado. Couchbase paradigma4oct
 
Programación Reactiva con RxJava
Programación Reactiva con RxJavaProgramación Reactiva con RxJava
Programación Reactiva con RxJava
 
¿Cómo vencer a los dragones digitales?
¿Cómo vencer a los dragones digitales?¿Cómo vencer a los dragones digitales?
¿Cómo vencer a los dragones digitales?
 

Recently uploaded

Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.marianarodriguezc797
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfJoseAlejandroPerezBa
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosLCristinaForchue
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfcastrodanna185
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfalejandrogomezescoto
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....Aaron Betancourt
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxPaolaCarolinaCarvaja
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2montoyagabriela340
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidaddanik1023m
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...RaymondCode
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfymiranda2
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfOBr.global
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETGermán Küber
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfangelinebocanegra1
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...OLGAMILENAMONTAEZNIO
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx Emialexsolar
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSLincangoKevin
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfodalistar77
 

Recently uploaded (20)

Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdf
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
 
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier FolchBEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docx
 
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura SilvaBEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidad
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdf
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx E
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
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/
  • 8. HISTORIA DE HTML 5 28 de Octubre de 2010 HTML 5 y CSS 3 8
  • 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]
  • 10. ESTADO ACTUAL 28 de Octubre de 2010 HTML 5 y CSS 3 10
  • 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
  • 14. BENEFICIOS 28 de Octubre de 2010 HTML 5 y CSS 3 14
  • 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
  • 17. 28 de Octubre de 2010 HTML 5 y CSS 3 17 NOVEDADES
  • 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>
  • 32. 28 de Octubre de 2010 HTML 5 y CSS 3 32 <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
  • 33. 28 de Octubre de 2010 HTML 5 y CSS 3 33 CANVAS
  • 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>
  • 40. 28 de Octubre de 2010 HTML 5 y CSS 3 40 FORMULARIOS
  • 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
  • 44. 28 de Octubre de 2010 HTML 5 y CSS 3 44 DRAG & DROP
  • 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>
  • 48. ALMACENAMIENTO LOCAL 28 de Octubre de 2010 HTML 5 y CSS 3 48
  • 49. ALMACENAMIENTO LOCAL Web != online 28 de Octubre de 2010 HTML 5 y CSS 3 49
  • 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
  • 58. CSS 3 28 de Octubre de 2010 HTML 5 y CSS 3 58
  • 59. CSS 3 HTML 5 CSS 3 28 de Octubre de 2010 HTML 5 y CSS 3 59 vs estructura presentación www.paradigmatecnologico.com
  • 60. HISTORIA DE CSS 3 28 de Octubre de 2010 HTML 5 y CSS 3 60
  • 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/
  • 76. ESTADO ACTUAL 28 de Octubre de 2010 HTML 5 y CSS 3 76
  • 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
  • 78. PROPIEDADES DE NAVEGADOR 28 de Octubre de 2010 HTML 5 y CSS 3 78
  • 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;
  • 80. CONCLUSIONES 28 de Octubre de 2010 HTML 5 y CSS 3 80
  • 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
  • 82. MUCHAS GRACIAS! ¿ALGUNA PREGUNTA? 28 de Octubre de 2010 HTML 5 y CSS 3 82