Your SlideShare is downloading. ×
Html5 y css3: Introducción y aplicación desde hoy
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

5,369
views

Published on

Presentación del "Seminario Introducción a HTML5 y CSS3" impartido el 28 de octubre de 2010 en el CEU San Pablo por Paradigma Tecnológico. …

Presentación del "Seminario Introducción a HTML5 y CSS3" impartido el 28 de octubre de 2010 en el CEU San Pablo por Paradigma Tecnológico.

Desde Paradigma, esperamos que el seminario cumpliera con vuestras expectativas y que os haya servido para conocer dichos estándares y os sirva de punto de partida para el desarrollo de nuevas aplicaciones web.

Muchas gracias.

Published in: Technology

6 Comments
9 Likes
Statistics
Notes
  • :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • good
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hola:

    Primero de todo, felicitaros por la presentencia. Me ha gustado mucho, muy completa y muy 'dinámica', con ciertos toques de humor que creo que ayudan a que la audiencia no desconecte. Gran trabajo.

    Un par de cosas que yo cambiaría:
    - Hay una discrepancia entre 2 transparencias. Al principio, en la historia de HTML 5 decís que el borrador se concluyó en 2009 (lo cual no es correcto) y luego comentáis que aún es un borrador. Aclararía eso, porque en realidad lo segundo es lo correcto, aún hoy en un Working Draft (y lo que le queda).
    - Sobre lo de IE como navegador obsoleto, la verdad es que no parece muy clara la necesidad de hacer distinciones, ¿no? Quiero decir, que a día de hoy, en cuanto a lo que HTML 5 se refiere, todos los navegadores son obsoletos casi desde el día siguiente en que se han publicado, al ser un futuro estándar que, ahora mismo, es de todo menos estable (que se lo digan a Ian Hickson sino jeje). Entiendo que lo habéis introducido por el poco querido IE6, pero a mí me parece que puede llevar a confusión.
    - Otra puntualización: me ha sorprendido ver que IE9 no soportaba la etiqueta audio, porque me parecía haber visitado alguna web de pruebas de HTML5 en la que se ponía en funcionamiento dicha etiqueta. Os he encontrado el enlace de esa web, así que parece que IE9 sí que soporta audio, al menos en MP3 (lo de OGG no tengo ni idea la verdad): http://ie.microsoft.com/testdrive/HTML5/HTML5AudioXMLPlaylist/
    - Por último, lo que comenta el chico de Microsoft sobre CSS lo veo razonable (que sea parte interesada no le quita la razón jajaja). Si en la tabla ponéis a Firefox 4.0 que es una beta, yo creo que podrías poner al menos la beta 1 de IE9. Yo es lo que haría, porque aunque pensemos que la gente no se baja las betas o platform previews de IE, los datos oficiales son de 10 millones de descargas de la beta 1 y creo que otros 2 millones y pico (no recuerdo bien el dato) de las Platform Preview, vamos que para mí es un público lo suficientemente amplio como para empezar a considerarlo (no sé los datos, pero lo mismo es incluso mayor que los usuarios de Opera).

    En fin, gracias por vuestra presentanción y seguid así.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hola jbbonnin, en la presentación se muestra el logo de IE al lado del texto 'Navegadores obsoletos' pero lo que queríamos transmitir (las diapositivas eran el apoyo al discurso del seminario) es que hay muchos usuarios (sobretodo a nivel empresa) que siguen utilizando IE's obsoletos que no soportan las nuevas etiquetas de HMTL5. Hemos modificado la presentación para que no haya dudas al respecto.

    Respecto al soporte de cada elemento por los navegadores, en el seminario intentabamos transmitir los elementos que pueden usarse a día de hoy, y mostramos el soporte actual de cada etiqueta. IE9 está en fase beta y, aunque los desarrolladores estamos muy atentos a estas versiones y las probamos y evaluamos según se publican, la mayor parte de los usuarios no suelen instalarse dichas versiones de prueba y, por ello, aunque en el Seminario mencionamos que IE9 soportará las etiquetas, en las diapositivas mostramos el soporte de los navegadores 7 y 8.

    Aún así, hemos modificado (como comentaba) la presentación para que esto quede mucho más claro.

    Gracias por tus comentarios y tu aportación.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hola, trabajo para Microsoft y quisiera darles a conocer Internet Explorer 9.

    En la presentación se introduce el logo de IE como navegador obsoleto, lo cual es un tanto sorprendente puesto que no se hace referencia a ninguna versión en concreto. Además se marca como no soportados elementos qué sí lo están. IE9 incorpora Canvas, Video Element, Audio Element, SVG...y en la platform preview (última release para desarrolladores) también incluye los nuevos tags semánticos.

    El listado de propiedades de CSS3 también puede inducir al error al que vea la presentación, puesto que a pesar de que se incluye la beta de Firefox, en el caso de IE se hace referencia a versiones muy antiguas como IE6 que tiene 10 años. Sin embargo IE9 incorpora amplio soporte para CSS3 como los móudlos de: backgrounds & borders, color, fonts, media queries, namespaces, values and units, selectors, 2D transforms (en la platform preview).

    Pueden ampliar más información en: http://msdn.microsoft.com/en-us/ff468705.aspx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,369
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
378
Comments
6
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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