Introducción a HTML5 y CSS3
Descargar como PPTX, PDF13 recomendaciones9,112 vistas
El documento proporciona una introducción detallada a HTML5 y CSS3, destacando sus características clave como almacenamiento offline, conectividad, acceso a archivos, y mejoras en semántica y rendimiento. Se describen nuevas etiquetas y atributos que facilitan la creación de aplicaciones web ricas en multimedia y experiencias de usuario mejoradas, así como las diferencias en técnicas de almacenamiento. Además, se presentan novedades históricas y los beneficios de HTML5 frente a versiones anteriores.
![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](https://image.slidesharecdn.com/cursohtml5-121030060138-phpapp02/85/Introduccion-a-HTML5-y-CSS3-12-320.jpg)
![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](https://image.slidesharecdn.com/cursohtml5-121030060138-phpapp02/85/Introduccion-a-HTML5-y-CSS3-37-320.jpg)
![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](https://image.slidesharecdn.com/cursohtml5-121030060138-phpapp02/85/Introduccion-a-HTML5-y-CSS3-64-320.jpg)
Introducción a HTML5 y CSS3
- 1. Introducción a HTML 5 / CSS 3 HTML 5 / CSS 3
- 2. INTRODUCCIÓN HTML 5 / CSS 3
- 3. OFFLINE Offline Almacenamiento Conectividad Acceso a ficheros WEB ONLINE Semántica Audio/Video Permite realizar aplicaciones web offline 3D/Gráficos - application cache - web SQL y BBDD - localStorage - online/offline events Presentación Rendimiento HTML 5 / CSS 3
- 4. ALMACENAMIENTO Offline Almacenamiento Conectividad Acceso a ficheros Permite que las aplicaciones web guarden datos en el dispositivo Semántica -Web Storage: sessionStorage/localStorage Audio/Video - Web SQL Database 3D/Gráficos - IndexedDB Presentación Rendimiento HTML 5 / CSS 3
- 5. CONECTIVIDAD Offline Almacenamiento Conectividad Acceso a ficheros Mejora el rendimiento del acceso en tiempo real entre aplicaciones / dispositivos / Semántica servidor Audio/Video - Cross Document Messaging 3D/Gráficos -XMLHTTPRequest 2 - Web Sockets Presentación - Server-Sent Events Rendimiento HTML 5 / CSS 3
- 6. ACCESO A FICHEROS Offline Almacenamiento Permite que las aplicaciones webs puedan acceder (a)sincronamente a ficheros del Conectividad dispositivo Acceso a ficheros - File API - FileReader API Semántica - Filesystem & FileWritter API Audio/Video - BlobBuilder API - Blob URLs 3D/Gráficos Presentación Rendimiento File API FilerReader API Filesystem & FileWritter API BlobBuilder API Blob URLs HTML 5 / CSS 3
- 7. SEMÁNTICA Offline Almacenamiento Conectividad Acceso a ficheros Permite el uso de nuevas etiquetas / atributos que determinan la naturaleza del contenido. Semántica - Elementos multimedia Audio/Video - Elementos estructurales - Atributos semánticos 3D/Gráficos - Nuevos tipos / atributos de campos de formulario - Sintaxis de Microformatos / microdata Presentación --Etc Rendimiento HTML 5 / CSS 3
- 8. AUDIO / VIDEO Offline Almacenamiento Conectividad Permite no solo incluir contenido multimedia Acceso a ficheros (audio / video) sino acceder, controlar y mani- pular determinados aspectos de los mismos Semántica Audio/Video 3D/Gráficos Presentación Rendimiento Video Audio HTML 5 / CSS 3
- 9. 3D/GRÁFICOS Offline Almacenamiento Conectividad Acceso a ficheros Semántica Permite crear animaciones y/o efectos visuales Audio/Video en websites/aplicaciones web sin necesidad 3D/Gráficos de plugins adicionales (por ej: flash) - 2D Canvas Presentación - WebGL - SVG Rendimiento - 3D CSS transforms HTML 5 / CSS 3
- 10. PRESENTACIÓN Offline Almacenamiento Permite crear sitios web/aplicaciones vistosas Conectividad y visualmente enriquecidas que producen mejores experiencias de usuario. Acceso a ficheros - CSS3 3D Transforms Semántica - CSS3 Transforms - CSS3 Animation Audio/Video - CSS3 Transition - Webfonts 3D/Gráficos Presentación Rendimiento 3D transforms CSS3 Transforms CSS3 Animation CSS3 Transitions HTML 5 / CSS 3
- 11. RENDIMIENTO Offline Almacenamiento Conectividad Acceso a ficheros Permite crear aplicaciones que rivalizan en Semántica rendimiento a las aplicaciones nativas, más Audio/Video responsivas que las aplicaciones tradicionales - Webworkers (procesos en background) 3D/Gráficos - Almacenamiento local - Carga asíncrona Presentación - App caché - Webfonts Rendimiento HTML 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-applications HTML 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 multimedia HTML 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 Javascript HTML 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ún HTML 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.html HTML 5 / CSS 3
- 30. VIDEO width & height poster autoplay controls loop Autobuffer preload source HTML 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 video HTML 5 / CSS 3
- 32. AUDIO autoplay source loop autobuffer controls preload HTML 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 audio HTML 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-inputs HTML 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 formulario HTML 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&drop HTML 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 solicitados HTML 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 Plugins HTML 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íncrona HTML 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/#sessionstorage HTML 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_transactions HTML 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 todos HTML 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ón HTML 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 datos HTML 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-today HTML 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ón HTML 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 CSS3 HTML 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 Queries HTML 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.html HTML 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-rule HTML 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/generator HTML 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 • :checked HTML 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-selector HTML 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.com HTML 5 / CSS 3