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

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

QUE VAMOS A VER 28 de Octubre de 2010 2
HTML 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)

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>

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 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 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 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 ETIQUETADO DE DOCUMENTOS

24 <header> <hgroup> <nav> <footer> <article> <section> <aside> ELEMENTOS ESTRUCTURALES

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

35 ELEMENTOS MULTIMEDIA

36 VIDEO • width & height • autoplay • loop • source • poster • controls • Autobuffer • preload

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 AUDIO • autoplay • source • loop • autobuffer • controls • preload

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 FORMULARIOS

41 FORMULARIOS autofocus <input> required autocomplete pattern placeholder on off Expresiones regulares http://www.findmebyip.com/litmus/#html5-forms-inputs

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 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 DRAG & DROP

45 JAVASCRIPT • draggable (true|false): el elemento puede ser arrastrado hacia otro elemento PROPIEDADES EVENTOS • dragstart • drag • dragenter • dragover • dragleave • drop • dragend

46 ELEMENTOS QUE DESAPARECEN

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

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

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/

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

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/

3 68 Un gran poder conlleva una gran responsabilidad

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

3 70 • column-count • column-width • column-gap • column-rule MULTI-COLUMN LAYOUT

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/

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

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

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/

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

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

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

More Decks by Paradigma

Other Decks in Technology

Featured

Transcript