Your SlideShare is downloading. ×
Introducción a HTML5 y CSS3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introducción a HTML5 y CSS3

6,387

Published on

Curso de introducción a HTML5 y CSS3 impartido el 1 junio de 2012 a clientes de Paradigma Tecnológico …

Curso de introducción a HTML5 y CSS3 impartido el 1 junio de 2012 a clientes de Paradigma Tecnológico
http://www.paradigmatecnologico.com/blog/curso-de-html5-y-css3/

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,387
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
395
Comments
0
Likes
5
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. Introducción aHTML 5 / CSS 3 HTML 5 / CSS 3
  • 2. INTRODUCCIÓNHTML 5 / CSS 3
  • 3. OFFLINEOfflineAlmacenamientoConectividadAcceso a ficheros WEB ONLINESemánticaAudio/Video Permite realizar aplicaciones web offline3D/Gráficos - application cache - web SQL y BBDD - localStorage - online/offline eventsPresentaciónRendimientoHTML 5 / CSS 3
  • 4. ALMACENAMIENTOOfflineAlmacenamientoConectividadAcceso a ficheros Permite que las aplicaciones web guarden datos en el dispositivoSemántica -Web Storage: sessionStorage/localStorageAudio/Video - Web SQL Database3D/Gráficos - IndexedDBPresentaciónRendimientoHTML 5 / CSS 3
  • 5. CONECTIVIDADOfflineAlmacenamientoConectividadAcceso a ficheros Mejora el rendimiento del acceso en tiempo real entre aplicaciones / dispositivos /Semántica servidorAudio/Video - Cross Document Messaging3D/Gráficos -XMLHTTPRequest 2 - Web SocketsPresentación - Server-Sent EventsRendimientoHTML 5 / CSS 3
  • 6. ACCESO A FICHEROSOfflineAlmacenamiento Permite que las aplicaciones webs puedan acceder (a)sincronamente a ficheros delConectividad dispositivoAcceso a ficheros - File API - FileReader APISemántica - Filesystem & FileWritter APIAudio/Video - BlobBuilder API - Blob URLs3D/GráficosPresentaciónRendimiento File API FilerReader API Filesystem & FileWritter API BlobBuilder API Blob URLsHTML 5 / CSS 3
  • 7. SEMÁNTICAOfflineAlmacenamientoConectividadAcceso a ficheros Permite el uso de nuevas etiquetas / atributos que determinan la naturaleza del contenido.Semántica - Elementos multimediaAudio/Video - Elementos estructurales - Atributos semánticos3D/Gráficos - Nuevos tipos / atributos de campos de formulario - Sintaxis de Microformatos / microdataPresentación --EtcRendimientoHTML 5 / CSS 3
  • 8. AUDIO / VIDEOOfflineAlmacenamientoConectividad Permite no solo incluir contenido multimediaAcceso a ficheros (audio / video) sino acceder, controlar y mani- pular determinados aspectos de los mismosSemánticaAudio/Video3D/GráficosPresentaciónRendimiento Video AudioHTML 5 / CSS 3
  • 9. 3D/GRÁFICOSOfflineAlmacenamientoConectividadAcceso a ficherosSemántica Permite crear animaciones y/o efectos visualesAudio/Video en websites/aplicaciones web sin necesidad3D/Gráficos de plugins adicionales (por ej: flash) - 2D CanvasPresentación - WebGL - SVGRendimiento - 3D CSS transformsHTML 5 / CSS 3
  • 10. PRESENTACIÓNOfflineAlmacenamiento Permite crear sitios web/aplicaciones vistosasConectividad y visualmente enriquecidas que producen mejores experiencias de usuario.Acceso a ficheros - CSS3 3D TransformsSemántica - CSS3 Transforms - CSS3 AnimationAudio/Video - CSS3 Transition - Webfonts3D/GráficosPresentaciónRendimiento 3D transforms CSS3 Transforms CSS3 Animation CSS3 TransitionsHTML 5 / CSS 3
  • 11. RENDIMIENTOOfflineAlmacenamientoConectividadAcceso a ficheros Permite crear aplicaciones que rivalizan enSemántica rendimiento a las aplicaciones nativas, másAudio/Video responsivas que las aplicaciones tradicionales - Webworkers (procesos en background)3D/Gráficos - Almacenamiento local - Carga asíncronaPresentación - App caché - WebfontsRendimientoHTML 5 / CSS 3
  • 12. HISTORIA DE 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]HTML 5 / CSS 3
  • 13. ESTADO ACTUAL (MAYO 2012) www.findmebyip.com/litmus/#html5-web-applicationsHTML 5 / CSS 3
  • 14. BENEFICIOS HTML5 = Evolución Mejor manejo de errores Mayor estandarización Código más semántico Más accesible Soporte multimediaHTML 5 / CSS 3
  • 15. BENEFICIOS Acceso a recursos como webcams o micrófonos Almacenamiento Local Webworkers Geolocalización Gestión de formularios Menor dependencia de plugins y JavascriptHTML 5 / CSS 3
  • 16. NOVEDADES Etiquetado del documento DOCTYPE XHTML 1.0 HTML5<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN‛ "http://www.w3.org/TR/xhtml1/DTD/x <!DOCTYPE html> html1-strict.dtd">HTML 5 / CSS 3
  • 17. NOVEDADES Etiquetado del documento META HTML 4.01 HTML5<meta http-equiv=‛Content-Type‛ content=‛text/html; charset=UTF-8‛> <meta charset=‛UTF-8‛>HTML 5 / CSS 3
  • 18. NOVEDADES Etiquetado del documento SCRIPT HTML 4.01 HTML5 <script type=‛text/javascript‛ <script src=”file.js”></script> src=‛file.js‛> </script> <script type=‛text/javascript‛> <script> ……… </script> ……… </script>HTML 5 / CSS 3
  • 19. NOVEDADES Etiquetado del documento HOJAS DE ESTILO HTML 4.01 HTML5<link rel=‛stylesheet‛ type=‛text/css‛ <link rel=‛stylesheet‛ href=‛estilos.css‛> href=‛estilos.css‛>HTML 5 / CSS 3
  • 20. NOVEDADES Etiquetado del documento ETIQUETA “A” HTML 4.01 HTML5 <h2> <a href=‛acercaDe.htm‛> <a href=‛acercaDe.htm‛>Acerca <h2>Acerca de</h2> de</a> <p>Conoce quiénes somos</p> </h2> </a> <p> <a href=‛acercaDe.htm‛>Conoce quiénes somos</a> </p>HTML 5 / CSS 3
  • 21. NOVEDADES Nuevas etiquetas de presentación <div id=“header”> <header> <div id=“menu”> <nav> <div> <article> <div> <aside> <div> <section> <div id=“footer”> <footer>HTML 5 / CSS 3
  • 22. NUEVAS ETIQUETAS DE PRESENTACIÓN <header> <hgroup> <header> <nav> representa la cabecera de un documento o sección <article> <hgroup> <aside> <section> representa el título de una sección. Se usa para agrupar conjuntos de elementos h1-h6 (títulos y <footer> subtítulos) <header> <hgroup> <h1>Mi Blog</h1> <h2>Esforzándome para trabajar menos</h2> </hgroup> </header>HTML 5 / CSS 3
  • 23. NUEVAS ETIQUETAS DE PRESENTACIÓN <header> <hgroup> <nav> <nav> representa una sección del documento que contiene navegación <article> <aside> <section> <nav> <ul> <footer> <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>HTML 5 / CSS 3
  • 24. NUEVAS ETIQUETAS DE PRESENTACIÓN <header> <hgroup> <article> <nav> representa una pieza de contenido <article> independiente dentro de un documento <aside> <section> <section> representa una sección del <footer> documento (un capítulo, un apartado, etc) agrupa una serie de contenidos con una temática comúnHTML 5 / CSS 3
  • 25. NUEVAS ETIQUETAS DE PRESENTACIÓN <header> <hgroup> <article> <hgroup> <nav> <h1>Título del artículo</h1> <h2>Subtítulo del artículo</h2> <article> </hgroup> <p>Lorem ipsum dolor sit amet, consectetur <aside> adipiscing elit.</p> <section> <section> <h1>Capítulo 1</h1> <p>Lorem ipsum dolor sit amet, consectetur <footer> 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>HTML 5 / CSS 3
  • 26. NUEVAS ETIQUETAS DE PRESENTACIÓN <header> <hgroup> <figure> <nav> representa un diagrama, una ilustración, una fotografía, etc <article> <aside> <figcaption> <section> representa la “nota al pie” del elemento incluido en <figure> <footer> <figure> <img src=‚javier.jpg" alt=‚Javier González"> <figcaption> Javier González impartiendo seminarios sobre tecnologías web</figcaption> </figure>HTML 5 / CSS 3
  • 27. NUEVAS ETIQUETAS DE PRESENTACIÓN <header> <hgroup> <aside> representa contenidos que no están <nav> directamente relacionados con el resto <article> de contenido de la página o que aporta información adicional <aside> <section> <article> <footer> <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 / CSS 3
  • 28. NUEVAS ETIQUETAS DE PRESENTACIÓN <header> <hgroup> <footer> <nav> representa el pie de una sección o página. Suele contener información <article> sobre el autor, copyright, etc <aside> <section> <footer> <footer> <p>© 2012 Bla bla bla bla</p> </footer>HTML 5 / CSS 3
  • 29. CANVAS Lienzo utilizado para representar imágenes, gráficos, dibujos y/o elementos visuales “al vuelo” con Javascript No requiere plugins, ni codecs <canvas id="miLienzo" width="360" height="240"> <p>Tu navegador no soporta canvas</p> Mapa de bits (no hay reescalado) </canvas> <script> var lienzo = El contenido no se añade al DOM document.getElementById(‘miLienzo’) var context = lienzo.getContext(2d); </script Puede ser exportado • http://www.whatwg.org/specs/web-apps/current-work/#2dcontext http://code.google.com/p/explorercanvas/ http://billmill.org/static/canvastutorial/index.htmlHTML 5 / CSS 3
  • 30. VIDEO width & height poster autoplay controls loop Autobuffer preload sourceHTML 5 / CSS 3
  • 31. 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> Ejemplo de videoHTML 5 / CSS 3
  • 32. AUDIO autoplay source loop autobuffer controls preloadHTML 5 / CSS 3
  • 33. 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> Ejemplo de audioHTML 5 / CSS 3
  • 34. FORMULARIOS search Email phone <input> type url tel range (*) number (*) min (*) max (*) date datetime datetime-local month colour http://www.findmebyip.com/litmus/#html5-forms-inputsHTML 5 / CSS 3
  • 35. FORMULARIOS placeholder autofocus required <input> autocomplete on off pattern Expresiones regulares http://www.findmebyip.com/litmus/#html5-forms-inputs Ejemplo de formularioHTML 5 / CSS 3
  • 36. ELEMENTOS QUE DESAPARECEN ETIQUETAS ATRIBUTOS <acronym> <frameset> abbr codetype scheme <applet> <isindex> align compact scope alink compact shape <basefont> <noframes> archive declare size axis hspace standby <big> <s> background link target <center> <strike> bgcolor longdesc text border marginheight type <dir> <tt> cellpadding marginwidth type cellspacing name valign <font> <u> char nohref valuetype <frame> charoff noshade version charset nowrap vlink classid profile vspace clear rev width REDEFINIDAS codebase rules <small> <cite> <b> <i> <a>HTML 5 / CSS 3
  • 37. 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 <script> var elementos1 = document.querySelectorAll("section div.wrapper"); var elementos2 = document.querySelectorAll("div.content, div.wrapper"); var inputsText = document.querySelectorAll([type=text]); </script> document.querySelector(selector): acceso al primer elemento del DOM con el selector especificado <script> var elemento = document.querySelector("section div.wrapper"); </script>HTML 5 / CSS 3
  • 38. DRAG & DROP draggable (true|false): el elemento puede ser arrastrado hacia otro elemento EVENTOS • dragstart • dragenter • drop • drag • dragover • dragend • dragleave Ejemplo de drag&dropHTML 5 / CSS 3
  • 39. ALMACENAMIENTO LOCAL Cache VS Bases de datos Locales Lógica de la aplicación data generada por el usuario, e interfaz de usuario o recursos solicitadosHTML 5 / CSS 3
  • 40. ALMACENAMIENTO LOCAL Técnicas de Almacenamiento Offline Previas Cookies Se fuerza a tener Navegador Instalado el plugin. Problemas con Firewalls Poca información (4 Kb) Se fuerza a usar un Navegador Reduce velocidad determinado Basado en PluginsHTML 5 / CSS 3
  • 41. 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. Información solo accesible desde el propio navegador. Interacción de la API y la Base de Datos es asíncronaHTML 5 / CSS 3
  • 42. ALMACENAMIENTO LOCAL Web Storage El más compatible. Integridad de los datos. Estructura clave-valor Race conditions TIPOS DE DATOS: localStorage Permanecen hasta que el usuario los borra sessionStorage Desaparecen al cerrarse el navegador http://html5demos.com/storage http://playground.html5rocks.com/#localstorage http://playground.html5rocks.com/#sessionstorageHTML 5 / CSS 3
  • 43. ALMACENAMIENTO LOCAL Web SQL Database Como las DDBB tradicionales. Estructura relacionada (joins) Más complejas. IE y Firefox no son compatibles http://playground.html5rocks.com/#async_transactionsHTML 5 / CSS 3
  • 44. ALMACENAMIENTO LOCAL IndexedDB Mezcla entre Web Storage y Web SQL Database Estructura relacionada (joins) Transacciones de información. Pocos navegadores lo soportan, pero está previsto ser soportado por todosHTML 5 / CSS 3
  • 45. ALMACENAMIENTO LOCAL 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ónHTML 5 / CSS 3
  • 46. ALMACENAMIENTO LOCAL ¡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 datosHTML 5 / CSS 3
  • 47. WebSockets Permite la comunicación bidireccional con cualquier servidor mediante un determinado protocolo de red. La conexión con el servidor se establece de forma asíncrona, en segundo plano, y la gestión del todo su ciclo de vida se realiza a través de callbacks que reciben eventos <script> var ws = new WebSocket("ws://echo.websocket.org"); </script> Debemos utilizar "ws://" para establecer conexiones con el protocolo websocket. El constructor admite además un parámetro adicional para que indicar un conjunto de subprotocolos, pero aún está sin definir. la URL del código de ejemplo es válida muy útil para pruebas, es un sencillo servidor websocket que actúa como eco (reenvía al cliente lo mismo que recibe).HTML 5 / CSS 3
  • 48. WebSockets EVENTOS FUNCIONES <script> <script> ws.onopen = function(event){ ws.send("ping"); //Conexión abierta //mandar mensaje al servidor } ws.close(); ws.onmessage = function(event){ // cerrar la conexión //Mensaje recibido en event.data; } </script> ws.onclose = function(event){ //Conexión cerrada } ws.onerror = function(event){ ATRIBUTOS //Error en la conexión -url (string con la dirección) } - protocol (string con el protocolo) </script> - readyState -Conectando (0) -Abierto (1) -Cerrando (2) - Cerrado (3) -bufferedAmount (nº de bytes pendientes de enviar al server) http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-todayHTML 5 / CSS 3
  • 49. WEB WORKERS Tareas JavaScript que pueden lanzarse en segundo plano, a modo de threads. Su objetivo es permitir que las aplicaciones web puedan lanzar hilos de ejecución concurrentes con una gran carga de trabajo y duración indeterminada. Las tareas funcionan al margen del proceso normal de gestión de eventos de los controles de la interface de usuario, evitando bloquear la página durante su ejecución. <script> var worker = new Worker("worker.js"); </script> <button type="button" onclick="worker.terminate();"> Kill</button>HTML 5 / CSS 3
  • 50. WEB WORKERS Pueden procesar eventos, callbacks, e incluso es posible crear otros workers. Limitación: no tienen un contexto de navegación asociado. No pueden acceder al DOM, window, document o parent, Pero sí a navigator, location, XMLHttpRequest, timers, applicationCache o Web SQL database. Permiten la posibilidad de ejecutar el código de otros scripts <script> importScripts("script1.js"); //De uno en uno... importScripts("script2.js"); importScripts("script3.js", "script4.js"); //.. o varios a la vez </script>HTML 5 / CSS 3
  • 51. WEB WORKERS Permite comunicar el hilo padre principal con el worker hijo. La comunicación se realiza a través de "postMessage", y el manejador "onmessage". Una comunicación básica entre padre e hijo tendría cuatro pasos: 1) El hilo padre manda un mensaje (evento) al worker: 3) El worker termina su proceso y envía un mensaje (evento) al padre: <script> <script> worker.postMessage("Información self.postMessage("Información para para el worker"); el padre"); </script> </script> 2) El worker recibe el mensaje en el atributo "data" del evento 4) El padre recibe el mensaje en el atributo "data" del evento <script> <script> self.onmessage = function(event){ worker.onmessage = function(event){ //Recibe "Información para el worker" //Recibe "Info para el padre" en event.data en event.data }; }; </script> </script>HTML 5 / CSS 3
  • 52. CSS 3 HTML 5 CSS 3 estructura presentaciónHTML 5 / CSS 3
  • 53. HISTORIA DE CSS 3 1996 CSS 1: permite dar estilos independientemente del navegador y del HTML 1998 CSS2: nuevas funcionalidades, pero implementación lenta Semilla del CSS3. 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 CSS3HTML 5 / CSS 3
  • 54. 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!HTML 5 / CSS 3
  • 55. NOVEDADES DE CSS 3 • Bordes • Fondos • Color • Text effects • Layout multicolumna • Transiciones • Animaciones • Selectores • Media QueriesHTML 5 / CSS 3
  • 56. NOVEDADES DE CSS 3 BORDES border-radius border-color border-radius: 15px; border: 5px solid #000; border-colors:#e00 #c30 #c50 #c60 #c70 border-image box-shadow / text-shadow border-image: url(border.png) box-shadow: 10px 10px 5px #888; 27 27 27 27 round round; http://www.webdesignerwall.com/demo/css3-dropdown-menu/HTML 5 / CSS 3
  • 57. NOVEDADES DE CSS 3 MULTIPLE BACKGROUNDS 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 http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.htmlHTML 5 / CSS 3
  • 58. NOVEDADES DE CSS 3 TRANSFORM• rotate : • skew : transform: rotate(30deg); transform: skew(-30deg); http://www.ejhansel.com/transform/• scale : • translate transform: scale(0.5,2.0); transform: translate(30px,10px); http://www.the-art-of-web.com/css/css-animation/HTML 5 / CSS 3
  • 59. NOVEDADES DE CSS 3 COLOR• Opacity • HSL: (Hue, Saturation, Lightness) Opacity: 1.0 Opacity: 0.5 hsl(21,97%,52%)• RGBA: • HSLA: (Red, Green, Blue, Alpha) (Hue, Saturation, Lightness, Alpha) rgb(255,192,0,1); rgb(255,192,0,0.5); hsla(21,97%,52%,1); hsla(21,97%,52%,0.5);HTML 5 / CSS 3
  • 60. NOVEDADES DE CSS 3 MULTI-COLUMN LAYOUT • column-count • column-width • column-gap • column-ruleHTML 5 / CSS 3
  • 61. NOVEDADES DE CSS 3 WEBFONTS @font-face { WebFonts 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.fontsquirrel.com/fontface/generatorHTML 5 / CSS 3
  • 62. NOVEDADES DE CSS 3 TEXTOS Text-shadow Text-shadow: Xpos Ypos Blur Color; ejemplo de sombra Word-wrap word-wrap: break-word; http://lab.simurai.com/flashlight This paragraph has long words thisisaveryverylongwordthatisntreall yoneword and again a Text-overflow longwordwithnospacesinit Text-overflow: ellipsis-word; Lorem ipsum dolor sit…HTML 5 / CSS 3
  • 63. NOVEDADES DE CSS 3 NUEVAS PSEUDO-CLASES • :enabled • :disabled • :checkedHTML 5 / CSS 3
  • 64. NOVEDADES DE CSS 3 SELECTORES DE ATRIBUTOS [att*=val] [att^=val] [att$=val] contiene val empieza por val termina por val <a href=“http://web.com/home.html”> a[href^=“http://web”] <a href=“http://web.com/img.jpg”> <a href=“http://web.com/img.gif”> a[href*=“.es”] <a href=“http://site.com/file.pdf”> <a href=“http://site.es/home/index.pdf”> a[href$=“.pdf”] <a href=“http://site.es/about.html”> <a href=“http://site.com/home.html”>HTML 5 / CSS 3
  • 65. NOVEDADES DE CSS 3 MEDIA QUERIES min-width & max-width diferentes estilos según el tamaño de la pantalla http://mediaqueri.es/HTML 5 / CSS 3
  • 66. ESTADO ACTUAL DE CSS 3 http://www.w3.org/Style/CSS/current-work#table http://www.findmebyip.com/litmus/#target-selectorHTML 5 / CSS 3
  • 67. ESTADO ACTUAL DE CSS 3 -o-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; ¡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.comHTML 5 / CSS 3

×