You are on page 1of 82

HTML 5 + CSS 3

Introducción y aplicación desde hoy

QUE VAMOS A VER

HTML 5

CSS 3







Introducción e Historia
Estado Actual
Beneficios
Novedades

28 de Octubre de 2010

HTML 5 y CSS 3

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

2

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. <div id=“header”> <header> <div id=“menu”> <nav> <div> <article> <div> <div> <div id=“footer”> 28 de Octubre de 2010 <section> <aside> <footer> HTML 5 y CSS 3 5 .

QUE ES HTML 5 Estandarización video canvas 28 de Octubre de 2010 1/2 geolocalización audio HTML 5 y CSS 3 drag & drop 6 .

sencha.com/deploy/touch/examples/kitchensink/ 28 de Octubre de 2010 HTML 5 y CSS 3 7 .QUE ES HTML 5 Estandarización 2/2 http://dev.

HISTORIA DE HTML 5

28 de Octubre de 2010

HTML 5 y CSS 3

8

HISTORIA HTML 5

2004

Apple, Mozilla & Opera no consiguieron crear un estándar 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

Finalización del borrador
Gracias a Google, Apple y los dispositivos móviles HTML5 surge con
fuerza

2012

Primer Release Candidate de HTML5 [previsión W3C]

2020

Finalización de test [previsión W3C]

2022

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

28 de Octubre de 2010

HTML 5 y CSS 3

9

ESTADO
ACTUAL

28 de Octubre de 2010

HTML 5 y CSS 3

10

ESTADO ACTUAL
¿Está HTML 5 preparado ya?



Faltan más de 10 años
Soporte actual limitado
Partes controvertidas (video)
Navegadores obsoletos
Alto número de usuarios usa
versiones viejas de IE

www.ishtml5readyyet.com

28 de Octubre de 2010

HTML 5 y CSS 3

11

findmebyip.com 28 de Octubre de 2010 HTML 5 y CSS 3 12 .caniuse.com/litmus/#target-selector www.ESTADO ACTUAL ¡NO HACE FALTA ESPERAR HASTA 2022 ! Actualmente (2010) • • • • Terminando borrador Partes ya disponibles Adaptación rápida en navegadores Mayor número de dispositivos soportados • Google y Apple lo apoyan 9 mejorará considerablemente) • (IE Microsoft adopta estándares www.

ESTADO ACTUAL www.caniuse.com 28 de Octubre de 2010 HTML 5 y CSS 3 13 .findmebyip.com/litmus/#html5-web-applications www.

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 .

NOVEDADES 28 de Octubre de 2010 HTML 5 y CSS 3 17 .

w3.dtd"> 28 de Octubre de 2010 <!DOCTYPE html> HTML 5 y CSS 3 18 .org/TR/xhtml1/DT D/xhtml1-strict.0 HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” "http://www.ETIQUETADO DEL DOCUMENTO DOCTYPE XHTML 1.

ETIQUETADO DEL DOCUMENTO META HTML 4.01 HTML5 <meta http-equiv=”Content-Type” content=”text/html. charset=UTF8”> 28 de Octubre de 2010 <meta charset=”UTF8”> HTML 5 y CSS 3 19 .

ETIQUETADO DEL DOCUMENTO SCRIPT HTML 4.js”> </script> <script type=”text/javascript”> ……… </script> 28 de Octubre de 2010 HTML5 <script src=”file.01 <script type=”text/javascript” src=”file.js”></script> <script> ……… </script> HTML 5 y CSS 3 20 .

css”> 28 de Octubre de 2010 HTML 5 y CSS 3 21 .01 HTML5 <link rel=”stylesheet” href=”estilos.ETIQUETADO DEL DOCUMENTO HOJAS DE ESTILO HTML 4.css”> <link rel=”stylesheet” type=”text/css” href=”estilos.

htm”>Conoce quiénes somos</a> </p> 28 de Octubre de 2010 HTML5 <a href=”acercaDe.htm”> <h2>Acerca de</h2> <p>Conoce quiénes somos</p> </a> HTML 5 y CSS 3 22 .01 <h2> <a href=”acercaDe.ETIQUETADO DEL DOCUMENTO ETIQUETA “A” HTML 4.htm”>Acerca de</a> </h2> <p> <a href=”acercaDe.

ETIQUETADO DE DOCUMENTOS 28 de Octubre de 2010 HTML 5 y CSS 3 23 .

ELEMENTOS ESTRUCTURALES <header> <hgroup> <nav> <article> <section> <aside> <footer> 28 de Octubre de 2010 HTML 5 y CSS 3 24 .

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 25 .ELEMENTOS ESTRUCTURALES <header> <hgroup> representa la cabecera de un documento o sección <nav> <article> <section> <footer> <header> <aside> <hgroup> representa el título de una sección.

ELEMENTOS ESTRUCTURALES <header> <hgroup> representa una sección del documento que contiene navegación <nav> <article> <section> <footer> 28 de Octubre de 2010 <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="#">galería</a></li> href="#">contacto</a></li> 26 .

un apartado.ELEMENTOS ESTRUCTURALES <header> <hgroup> <nav> representa una pieza de contenido independiente dentro de un documento <article> <section> <footer> 28 de Octubre de 2010 <article> <aside> <section> representa una sección del documento (un capítulo. etc) agrupa una serie de contenidos con una temática común HTML 5 y CSS 3 27 .

ELEMENTOS ESTRUCTURALES <header> <hgroup> <nav> <article> <section> <footer> 28 de Octubre de 2010 <aside> <article> <hgroup> <h1>Título del artículo</h1> <h2>Subtítulo del artículo</h2> </hgroup> <p>Lorem ipsum dolor sit amet. Integer bibendum scelerisque neque. consectetur adipiscing elit. ac facilisis neque</p> </section> </article> HTML 5 y CSS 3 28 . ac facilisis neque</p> </section> <section> <h1>Capítulo 2</h1> <p>Lorem ipsum dolor sit amet.</p> <section> <h1>Capítulo 1</h1> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Integer bibendum scelerisque neque. consectetur adipiscing elit.

pasa</dd> </dialog> HTML 5 y CSS 3 29 . o los subtítulos de algún elemento embebido (audio o video) <dialog> <dt>Pedro:</dt> <dd>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.ELEMENTOS ESTRUCTURALES <header> <hgroup> <nav> <article> <aside> <section> <footer> ??? !!!!! 28 de Octubre de 2010 <dialog> representa una transcripción de una conversación. toc.

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 tecnologías web</figcaption> </figure> 28 de Octubre de 2010 HTML 5 y CSS 3 30 .ELEMENTOS ESTRUCTURALES <header> <hgroup> representa un diagrama. una ilustración. una fotografía.

ELEMENTOS ESTRUCTURALES <header> <hgroup> <nav> <article> <section> <footer> 28 de Octubre de 2010 <aside> <aside> representa contenidos que no están directamente relacionados con el resto de contenido de la página o que aporta información adicional <article> <header><h1>Tecnologías web</h1></header> <p>bla bla bla</p> <aside> <ul> <li><a href=“#”>Links sobre HTML5</a></li> <li><a href=“#”>Links sobre CSS3</a></li> </ul> </aside> </article> HTML 5 y CSS 3 31 .

copyright. Suele contener información sobre el autor.ELEMENTOS ESTRUCTURALES <header> <hgroup> <nav> <article> <section> <footer> 28 de Octubre de 2010 <aside> <footer> representa el pie de una sección o página. etc <footer> <p>© 2010 Bla bla bla bla</p> </footer> HTML 5 y CSS 3 32 .

CANVAS 28 de Octubre de 2010 HTML 5 y CSS 3 33 .

dibujos y/o elementos visuales “al vuelo” con Javascript • No requiere plugins.CANVAS • Lienzo utilizado para representar imágenes.getElementById(‘miLienzo’) var context = lienzo.google.whatwg. 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.getContext('2d').org/static/canvastutorial/index.com/p/explorercanvas/ http://billmill.html 28 de Octubre de 2010 HTML 5 y CSS 3 34 . </script http://www. gráficos.org/specs/web-apps/current-work/#2dcontext http://code.

ELEMENTOS MULTIMEDIA 28 de Octubre de 2010 HTML 5 y CSS 3 35 .

VIDEO • width & height • poster • autoplay • controls • loop • • Autobuffer preload • source 28 de Octubre de 2010 HTML 5 y CSS 3 36 .

vorbis'"> <source src="movie.mp4"> <a href="movie.ogv" type="video/ogg codecs='theora. vorbis'"> <object type="application/x-shockwave-flash" width="360" height="240" data="player.VIDEO <video controls width="360" height="240"> <source src="movie.swf?file=movie.mp4"> <source src="movie.mp4"> <param name="movie" value="player.mp4">Descargar vídeo</a> </object> </video> 28 de Octubre de 2010 HTML 5 y CSS 3 37 .webm" type="video/webm codecs='vp8.swf?file=movie.

AUDIO 28 de Octubre de 2010 • autoplay • source • loop • autobuffer • controls • preload HTML 5 y CSS 3 38 .

mp3"> <param name="movie" value="player.swf? soundFile=song.swf?soundFile=song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> <object type="application/x-shockwave-flash“ data="player.mp3">Descargar canción</a> </object> </audio> 28 de Octubre de 2010 HTML 5 y CSS 3 39 .AUDIO <audio controls>  <source src="song.mp3"> <a href="song.

FORMULARIOS 28 de Octubre de 2010 HTML 5 y CSS 3 40 .

FORMULARIOS placeholder required autofocus <input> autocomplete on off pattern Expresiones regulares http://www.com/litmus/#html5-forms-inputs 28 de Octubre de 2010 HTML 5 y CSS 3 41 .findmebyip.

findmebyip.com/litmus/#html5-forms-inputs 28 de Octubre de 2010 HTML 5 y CSS 3 42 .FORMULARIOS <input> min (*) max (*) type search email url tel range (*) number (*) date datetime datetime-local month color http://www.

JAVASCRIPT NUEVOS MÉTODOS • document. </script> • document.querySelectorAll(selector): acceso a todos los elementos del DOM con el selector especificado <script> elementos = document. elementos = document.getElementByClassName: acceso a todos los elementos del DOM que compartan la clase especificada • document.querySelector("section div.querySelector(selector): acceso al primer elemento del DOM con el selector especificado <script> var elemento = document.wrapper"). inputsText = document.wrapper"). </script> 28 de Octubre de 2010 HTML 5 y CSS 3 43 .querySelectorAll('[type=text]').content. div.querySelectorAll("section div.querySelectorAll("div.wrapper").

DRAG & DROP 28 de Octubre de 2010 HTML 5 y CSS 3 44 .

JAVASCRIPT PROPIEDADES • draggable (true|false): el elemento puede ser arrastrado hacia otro elemento EVENTOS • dragstart • drag 28 de Octubre de 2010 • dragenter • dragover • dragleave HTML 5 y CSS 3 • drop • dragend 45 .

ELEMENTOS QUE DESAPARECEN 28 de Octubre de 2010 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> 28 de Octubre de 2010 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 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 Cache VS Lógica de la aplicación e interfaz de usuario 28 de Octubre de 2010 Bases de datos Locales data generada por el usuario. o recursos solicitados HTML 5 y CSS 3 50 .

ALMACENAMIENTO LOCAL Técnicas de Almacenamiento Offline Previas Cookies Navegador Se fuerza a tener Instalado el plugin. Problemas con Firewalls Poca información (4 Kb) Reduce velocidad 28 de Octubre de 2010 Se fuerza a usar un Navegador determinado Basado en Plugins HTML 5 y CSS 3 51 .

• Interacción de la API y la Base de Datos es asíncrona 28 de Octubre de 2010 HTML 5 y CSS 3 52 . • Información solo accesible desde el propio navegador.ALMACENAMIENTO LOCAL 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.

html5rocks.com/storage http://playground.com/#sessionstorage 28 de Octubre de 2010 HTML 5 y CSS 3 53 . Estructura clave-valor TIPOS DE DATOS: • localStorage • Integridad de los datos.ALMACENAMIENTO LOCAL Web Storage El más compatible.html5rocks. Race conditions Permanecen hasta que el usuario los borra sessionStorage Desaparecen al cerrarse el navegador http://html5demos.com/#localstoragehttp://playground.

ALMACENAMIENTO LOCAL Web SQL Database Como las DDBB tradicionales. Estructura relacionada (joins) Más complejas.html5rocks. IE y Firefox no son compatibles http://playground.com/#async_transactions 28 de Octubre de 2010 HTML 5 y CSS 3 54 .

Ningún navegador lo soporta.ALMACENAMIENTO LOCAL IndexedDB Mezcla entre Web Storage y Web SQL Database Estructura relacionada (joins) Transacciones de información. pero está previsto ser soportado por todos 28 de Octubre de 2010 HTML 5 y CSS 3 55 .

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 28 de Octubre de 2010 HTML 5 y CSS 3 56 .ALMACENAMIENTO LOCAL FileStorage Puedes guardar información binaria (como texto).

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 28 de Octubre de 2010 HTML 5 y CSS 3 57 .ALMACENAMIENTO LOCAL ¡LO QUIERO USAR YA! • Por defecto usar WEB STORAGE (+ simple & + compatible ) • Ayudarse de librerías como persis.

CSS 3 28 de Octubre de 2010 HTML 5 y CSS 3 58 .

com 28 de Octubre de 2010 HTML 5 y CSS 3 59 .CSS 3 HTML 5 vs CSS 3 presentación estructura www.paradigmatecnologico.

HISTORIA DE CSS 3 28 de Octubre de 2010 HTML 5 y CSS 3 60 .

Se plantea una lista de mejoras de CSS2 2000 Borrador de CSS3 2002 CSS2.1: Crea lo que ahora consideramos el estándar 2005 Empieza el desarrollo de CSS3 2009 Implementación en algunos navegadores de algunas partes de CSS3 28 de Octubre de 2010 HTML 5 y CSS 3 61 . pero implementación lenta Semilla del CSS3.HISTORIA CSS 3 1996 CSS 1: permite dar estilos independientemente del navegador y del HTML 1998 CSS2: nuevas funcionalidades.

CSS 3 VS CSS 2 28 de Octubre de 2010 HTML 5 y CSS 3 62 .

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 .CSS 3 VS.

NOVEDADES • • • • • • • • 28 de Octubre de 2010 Bordes Fondos Color Text effects Layout multicolumna Transiciones Selectores Media Queries HTML 5 y CSS 3 64 .

png) 27 27 27 27 round round.NOVEDADES BORDES border-radius border-radius: 15px.webdesignerwall. http://www.com/demo/css3-dropdown-menu/ 28 de Octubre de 2010 HTML 5 y CSS 3 65 . border-color border: 5px solid #000. border-colors:#e00 #c30 #c50 #c60 #c70 border-image border-image: url(border. box-shadow / text-shadow box-shadow: 10px 10px 5px #888.

top image center image bottom image http://www.html 28 de Octubre de 2010 HTML 5 y CSS 3 66 ./topImage. url(. url(./bottomImage.NOVEDADES MULTIPLE BACKGROUNDS background: url(./centerImage..css3.jpg) top right repeat-y..jpg) bottom center no-repeat..jpg) top left no-repeat.info/wp-content/uploads/2007/09/multiple-backgrounds-example.

com/css/tilt-shift/ 28 de Octubre de 2010 HTML 5 y CSS 3 67 . transform: skew(-30deg).2.com/transform/ • scale : • translate transform: translate(30px.0).simurai. transform: scale(0.NOVEDADES TRANSFORM • rotate : • skew : transform: rotate(30deg). http://lab.5.10px).ejhansel. http://www.

NOVEDADES Un gran poder conlleva una gran responsabilidad 28 de Octubre de 2010 HTML 5 y CSS 3 68 .

0.NOVEDADES COLOR • Opacity • HSL: (Hue. Lightness) Opacity: 1. Alpha) rgb(255.52% ) • HSLA: • RGBA: (Hue. 69 .52%. 5). hsla(21.97%.0. Blue.97%.0. Saturation. 28 de Octubre de 2010 rgb(255.5 hsl(21. 1).0.192. Saturation. 5). 1). HTML 5 y CSS 3 hsla(21.97%.52%.192. Lightness. Alpha) (Red. Green.0 Opacity: 0.

NOVEDADES MULTI-COLUMN LAYOUT • column-count • column-width • column-gap • column-rule 28 de Octubre de 2010 HTML 5 y CSS 3 70 .

NOVEDADES WEBFONTS WebFonts @font-face { font-family: ‘FontName'. } http://www.eot'). url(' FontName. url(' FontName. font-style: normal. src: url('Gondola_SD-webfont. src: local('☺').svg#webfontsgM4b18D') format('svg'). url(' FontName. } div { font-family: FontName.ttf') format('truetype'). font-weight: normal.paradigmatecnologico.woff') format('woff').com/ 28 de Octubre de 2010 HTML 5 y CSS 3 71 .

com/css/flashlight Word-wrap word-wrap: break-word. ejemplo ejemplo de de sombra sombra http://lab. This paragraph has long words thisisaveryverylongwordthatisn treallyoneword and again a longwordwithnospacesinit Text-overflow Text-overflow: ellipsis-word.NOVEDADES TEXTOS Text-shadow Text-shadow: Xpos Ypos Blur Color. Lorem ipsum dolor sit… 28 de Octubre de 2010 HTML 5 y CSS 3 72 .simurai.

NOVEDADES NUEVAS PSEUDO-CLASES • :enabled • :disabled • :checked 28 de Octubre de 2010 HTML 5 y CSS 3 73 .

com/home.com/img.html”> 28 de Octubre de 2010 HTML 5 y CSS 3 74 .es”] <a href=“http://site.es/about.pdf”> a[href$=“.jpg”> <a href=“http://web.pdf”] <a href=“http://site.html”> <a href=“http://site.com/home.pdf”> <a href=“http://site.gif”> a[href*=“.html”> a[href^=“http://web”] <a href=“http://web.com/img.es/home/index.NOVEDADES SELECTORES DE ATRIBUTOS [att*=val ] [att^=val] [att$=val] empieza por val termina por val contiene val <a href=“http://web.com/file.

com/deploy/touch/examples/kitchensink/ 28 de Octubre de 2010 HTML 5 y CSS 3 75 .NOVEDADES MEDIA QUERIES min-width & max-width diferentes estilos según el tamaño de la pantalla http://dev.sencha.

ESTADO ACTUAL 28 de Octubre de 2010 HTML 5 y CSS 3 76 .

org/Style/CSS/current-work#table http://www. fuentes.ESTADO ACTUAL • Desarrollo dividido en módulos • Selectores. colores.com/litmus/#target-selector 28 de Octubre de 2010 HTML 5 y CSS 3 77 . … 6-8 http://www.w3.findmebyip.

PROPIEDADES DE NAVEGADOR 28 de Octubre de 2010 HTML 5 y CSS 3 78 .

org less. -ms-border-radius: 10px. -webkit-border-radius: 10px.js Ficheros . -moz-border-radius: 10px.PROPIEDADES DE NAVEGADOR -o-border-radius: 10px.com 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 • • • • 28 de Octubre de 2010 eccstender.css para cada navegador css3generator.

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 .