html5 y css3: introducción y aplicación desde hoy

HTML 5 + CSS 3Introducción y aplicación desde hoy

HTML 5 y CSS 3 2

QUE VAMOS A VER

28 de Octubre de 2010

HTML 5

• Introducción e Historia• Estado Actual• Beneficios• Novedades

CSS 3

• Introducción e Historia• CSS 3 vs. CSS 2• Novedades• Estado Actual

HTML 5 y CSS 3 3

QUÉ ES HTML 5


HTML 5 y CSS 3 4

QUE ES HTML 5

Es una evolución.


HTML 5 y CSS 3 5

QUE ES HTML 5

Nuevas etiquetas de presentación.


<div id=“header”>

<div id=“menu”>

<div id=“footer”>

<div>

<div><div>

<header>

<nav>

<footer>

<article>

<section><aside>

HTML 5 y CSS 3 6

QUE ES HTML 5

Estandarización 1/2


canvas

video

audio

geolocalización

drag & drop

HTML 5 y CSS 3 7

QUE ES HTML 5

Estandarización 2/2


http://dev.sencha.com/deploy/touch/examples/kitchensink/


HTML 5 y CSS 3 8

HISTORIA DE HTML 5


HTML 5 y CSS 3 9

HISTORIA HTML 5


2004

2005

2007

2009

2012

2020

2022

Apple, Mozilla & Opera no consiguieron crear un estándar HTML4.En consecuencia forman la Web WHATWG

Se publica el borrador Web Applications 1.0

W3C “adopta” a WHATGW y publica el borrador HTML5

Finalización del borrador

Gracias a Google, Apple y los dispositivos móviles HTML5 surge con fuerza

Primer Release Candidate de HTML5 [previsión W3C]

Finalización de test [previsión W3C]

Creación del estándar HTML5 [previsión W3C]

HTML 5 y CSS 3 10

ESTADO ACTUAL


HTML 5 y CSS 3 11

ESTADO ACTUAL

• Faltan más de 10 años• Soporte actual limitado• Partes controvertidas (video)• Navegadores obsoletos


www.ishtml5readyyet.com

¿Está HTML 5 preparado ya?

Alto número de usuarios usa versiones viejas de IE

HTML 5 y CSS 3 12

ESTADO ACTUAL

Actualmente (2010)

• Terminando borrador• Partes ya disponibles• Adaptación rápida en navegadores• Mayor número de dispositivos

soportados• Google y Apple lo apoyan• Microsoft adopta estándares

www.findmebyip.com/litmus/#target-selector www.caniuse.com


¡NO HACE FALTA ESPERAR HASTA 2022 !

(IE 9 mejorará considerablemente)

HTML 5 y CSS 3 13

ESTADO ACTUAL


www.findmebyip.com/litmus/#html5-web-applications www.caniuse.com

HTML 5 y CSS 3 14

BENEFICIOS


HTML 5 y CSS 3 15

BENEFICIOS 1/2

• HTML5 = Evolución

• Mejor manejo de errores

• Mayor estandarización

• Código más semántico

• Más accesible

• Soporte multimedia


HTML 5 y CSS 3 16

BENEFICIOS 2/2

• Acceso a recursos como webcams o micrófonos

• Almacenamiento Local

• Webworkers

• Geolocalización

• Gestión de formularios

• Menor dependencia de plugins y Javascript


HTML 5 y CSS 3 1728 de Octubre de 2010

NOVEDADES

HTML 5 y CSS 3 18

ETIQUETADO DEL DOCUMENTO


DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 HTML5

<!DOCTYPE html>



META

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

HTML 4.01 HTML5

<meta charset=”UTF-8”>



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>



HOJAS DE ESTILO

<link rel=”stylesheet” type=”text/css” href=”estilos.css”>

HTML 4.01 HTML5

<link rel=”stylesheet” href=”estilos.css”>



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>


ETIQUETADODE DOCUMENTOS


<header><hgroup>

<nav>

<footer>

<article>

<section><aside>

ELEMENTOS ESTRUCTURALES


<nav>

<footer>

<article>

<section><aside>


<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>


<footer>

<article>

<section><aside>


<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>


<footer>

<aside>


<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


<footer>

<aside>


<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>



<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>

???

!!!!!



<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>


<footer>

<aside>


<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>


<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>



CANVAS

HTML 5 y CSS 3 34

CANVAS


• 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


ELEMENTOSMULTIMEDIA


VIDEO

• width & height

• autoplay

• loop

• source

• poster

• controls

• Autobuffer• preload


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>


AUDIO

• autoplay

• source

• loop

• autobuffer

• controls

• preload


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>


FORMULARIOS


FORMULARIOS

autofocus

<input>required autocomplete

pattern

placeholder

onoff

Expresiones regulares

http://www.findmebyip.com/litmus/#html5-forms-inputs


FORMULARIOS

<input> type

searchemailurltelrange (*)number (*)datedatetimedatetime-localmonthcolor

min (*) max (*)

http://www.findmebyip.com/litmus/#html5-forms-inputs


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


DRAG & DROP


JAVASCRIPT

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

PROPIEDADES

EVENTOS

• dragstart• drag

• dragenter• dragover• dragleave

• drop

• dragend


ELEMENTOS QUE DESAPARECEN


ELEMENTOS QUE DESAPARECEN

<acronym><applet><basefont><big><center><dir><font><frame>

<frameset><isindex><noframes><s><strike><tt><u>

ETIQUETAS

abbralign alinkarchiveaxisbackground bgcolorborder cellpadding cellspacing charcharoffcharsetclassidclearcodebase

codetypecompact compactdeclarehspacelinklongdescmarginheight marginwidth name nohrefnoshade nowrap profilerevrules

schemescopeshapesize standbytargettexttypetype valign valuetypeversionvlinkvspacewidth

ATRIBUTOS

<small><b>

<cite><i>

REDEFINIDAS

<a>

HTML 5 y CSS 3 48

ALMACENAMIENTO LOCAL


HTML 5 y CSS 3 49


Web != online


HTML 5 y CSS 3 50


Bases de datosLocales


Lógica de la aplicacióne interfaz de usuario

data generada por el usuario, o recursos solicitados

VSCache

HTML 5 y CSS 3 51

Se fuerza a tenerInstalado el plugin.

Problemas con Firewalls

Se fuerza a usar unNavegador

determinado

Poca información (4 Kb)

Reduce velocidad


Técnicas de Almacenamiento Offline Previas


Navegador

Basado en Plugins

Cookies

HTML 5 y CSS 3 52


Técnicas de Almacenamiento con HTML5


Diferentes APIs:• Web Storage (Local Storage or DOM Storage)• Web SQL Database• IndexedDB• File Storage

PRINCIPIOS:• Normas estándar para “todos” los navegadores.• Información solo accesible desde el propio navegador.• Interacción de la API y la Base de Datos es asíncrona

HTML 5 y CSS 3 53


Web Storage


TIPOS DE DATOS:• localStorage Permanecen hasta que el usuario los borra

• sessionStorage Desaparecen al cerrarse el navegador

El más compatible.Estructura clave-valor

Integridad de los datos.Race conditions

http://html5demos.com/storagehttp://playground.html5rocks.com/#localstoragehttp://playground.html5rocks.com/#sessionstorage

http://html5demos.com/storage

http://playground.html5rocks.com/


HTML 5 y CSS 3 54


Web SQL Database


Como las DDBB tradicionales.

Estructura relacionada (joins)

Más complejas.

IE y Firefox no son compatibles

http://playground.html5rocks.com/#async_transactions



HTML 5 y CSS 3 55


IndexedDB


Mezcla entre Web Storage y Web SQL Database

Estructura relacionada (joins)

Transacciones de información.

Ningún navegador lo soporta, pero está previsto ser soportado por todos

HTML 5 y CSS 3 56


FileStorage


Puedes guardar información binaria (como texto), y grandes cantidades de información.

File Reader soportado solo por Chrome

FileWriter todavía no soportado por nadie

Cuando sea soportado será bueno para almacenar grandes cantidades de información

HTML 5 y CSS 3 57


¡LO QUIERO USAR YA!


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

• Ayudarse de librerías como persis.js ó

• Protegerse contra la perdida de datos• No guardar información privada• Los usuarios pueden borrar los datos fácilmente• Sincronizarse con el servidor frecuentemente

• Securizar los datos• Alto riesgo en navegadores compartidos• SessionStorage mejor que LocalStorage• Encriptar información• Evitar guardar cierto tipo de datos

HTML 5 y CSS 3 58

CSS 3


HTML 5 y CSS 3 59

CSS 3

HTML 5 CSS 3


vsestructura presentación

www.paradigmatecnologico.com

HTML 5 y CSS 3 60

HISTORIA DE CSS 3


HTML 5 y CSS 3 61

HISTORIA CSS 3


1996

1998

2000

2002

2009

CSS 1: permite dar estilos independientemente del navegador y del HTML

CSS2: nuevas funcionalidades, pero implementación lenta

Semilla del CSS3.

Se plantea una lista de mejoras de CSS2

Borrador de CSS3

CSS2.1: Crea lo que ahora consideramos el estándar

Implementación en algunos navegadores de algunas partes de CSS3

2005 Empieza el desarrollo de CSS3

HTML 5 y CSS 3 62

CSS 3 VS CSS 2


HTML 5 y CSS 3 63

CSS 3 VS. CSS 2

Mejora en los selectores

Nuevos estilos • Sombra• Opacidad• esquinas redondeadas• …

Mejora en tipografías

Transformaciones

Reduce la cantidad de HTML (divitis)

Reduce las peticiones de imágenes

¡Nuestra pagina va a ser más rápida!28 de Octubre de 2010

HTML 5 y CSS 3 64

NOVEDADES


• Bordes• Fondos• Color• Text effects• Layout multicolumna• Transiciones• Selectores• Media Queries

HTML 5 y CSS 3 65

NOVEDADES


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/

http://www.webdesignerwall.com/demo/css3-dropdown-menu/

HTML 5 y CSS 3 66

NOVEDADES


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

http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html

HTML 5 y CSS 3 67

NOVEDADES


• 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/

http://lab.simurai.com/css/tilt-shift/

http://www.ejhansel.com/transform/

HTML 5 y CSS 3 68

NOVEDADES


Un gran poderconlleva una granresponsabilidad

HTML 5 y CSS 3 69

NOVEDADES


rgb(255,192,0,1);

rgb(255,192,0,0.5);

• RGBA: (Red, Green, Blue, Alpha)

Opacity: 1.0 Opacity: 0.5

• Opacity

• HSLA: (Hue, Saturation, Lightness, Alpha)

hsla(21,97%,52%,1);

hsla(21,97%,52%,0.5);

• HSL: (Hue, Saturation, Lightness)

hsl(21,97%,52%)

COLOR

HTML 5 y CSS 3 70

NOVEDADES


• column-count

• column-width

• column-gap

• column-rule

MULTI-COLUMN LAYOUT

HTML 5 y CSS 3 71

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/

http://www.paradigmatecnologico.com/

HTML 5 y CSS 3 72

NOVEDADES


Text-shadowText-shadow: Xpos Ypos Blur Color;ejemplo de sombra

Text-overflowText-overflow: ellipsis-word;

Lorem ipsum dolor sit…

Word-wrapword-wrap: break-word;

This paragraph has long words thisisaveryverylongwordthatisntreallyoneword and again a longwordwithnospacesinit

TEXTOS

http://lab.simurai.com/css/flashlight

http://lab.simurai.com/css/flashlight

HTML 5 y CSS 3 73

NOVEDADES


• :enabled

• :disabled

• :checked

NUEVAS PSEUDO-CLASES

HTML 5 y CSS 3 74

a[href^=“http://web”]

a[href*=“.es”]

a[href$=“.pdf”]

NOVEDADES


[att$=val]termina por val

[att^=val]empieza por val

[att*=val]

contiene val

<a href=“http://web.com/home.html”>

<a href=“http://web.com/img.jpg”>

<a href=“http://web.com/img.gif”>

<a href=“http://site.com/file.pdf”>

<a href=“http://site.es/home/index.pdf”>

<a href=“http://site.es/about.html”>

<a href=“http://site.com/home.html”>

SELECTORES DE ATRIBUTOS

HTML 5 y CSS 3 75

NOVEDADES


MEDIA QUERIES

min-width & max-widthdiferentes estilos según el tamaño de la pantalla



HTML 5 y CSS 3 76

ESTADO ACTUAL


HTML 5 y CSS 3 77

ESTADO ACTUAL

• Desarrollo dividido en módulos• Selectores, fuentes, colores, …


http://www.w3.org/Style/CSS/current-work#tablehttp://www.findmebyip.com/litmus/#target-selector

6-8

HTML 5 y CSS 3 78

PROPIEDADES DE NAVEGADOR


HTML 5 y CSS 3 79

PROPIEDADES DE NAVEGADOR


¡podemos usar CSS3 desde hoy!

Aumentamos y ensuciamos el código

No todos los navegadores lo soportan

Posibles soluciones• eccstender.org• less.js• Ficheros .css para cada navegador• css3generator.com

-o-border-radius: 10px; -webkit-border-radius: 10px;

-moz-border-radius: 10px;-ms-border-radius: 10px;

HTML 5 y CSS 3 80

CONCLUSIONES


HTML 5 y CSS 3 81

CONCLUSIONES

• ES EL MOMENTO• Internet en el móvil• Aplicaciones online• Alta implantación en navegadores

• WEB = CAMBIO

• PRONTO SERÁ EL ESTANDARD

• PRACTICA E IMPLEMENTALO POCO A POCO


HTML 5 y CSS 3 82

MUCHAS GRACIAS!

¿ALGUNA PREGUNTA?


html5 y css3: introducción y aplicación desde hoy

Technology