Introducción a HTML5 y CSS3

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

Transcript

1. HTML 5 / CSS 3 Introducción a HTML 5 / CSS 3
2. HTML 5 / CSS 3 INTRODUCCIÓN
3. HTML 5 / CSS 3 OFFLINE Offline WEB Conectividad Acceso a ficheros Semántica Audio/Video 3D/Gráficos Presentación Rendimiento Almacenamiento ONLINE Permite realizar aplicaciones web offline - application cache - localStorage - web SQL y BBDD - online/offline events
4. HTML 5 / CSS 3 ALMACENAMIENTO Offline Conectividad Acceso a ficheros Semántica Audio/Video 3D/Gráficos Presentación Rendimiento Almacenamiento Permite que las aplicaciones web guarden datos en el dispositivo -Web Storage: sessionStorage/localStorage - Web SQL Database - IndexedDB
5. HTML 5 / CSS 3 CONECTIVIDAD Offline Conectividad Acceso a ficheros Semántica Audio/Video 3D/Gráficos Presentación Rendimiento Almacenamiento Mejora el rendimiento del acceso en tiempo real entre aplicaciones / dispositivos / servidor - Cross Document Messaging -XMLHTTPRequest 2 - Web Sockets - Server-Sent Events
6. HTML 5 / CSS 3 ACCESO A FICHEROS Offline Conectividad Acceso a ficheros Semántica Audio/Video 3D/Gráficos Presentación Rendimiento Almacenamiento Permite que las aplicaciones webs puedan acceder (a)sincronamente a ficheros del dispositivo - File API - FileReader API - Filesystem & FileWritter API - BlobBuilder API - Blob URLs File API FilerReader API Filesystem & FileWritter API BlobBuilder API Blob URLs
7. HTML 5 / CSS 3 SEMÁNTICA Offline Conectividad Acceso a ficheros Semántica Audio/Video 3D/Gráficos Presentación Rendimiento Almacenamiento Permite el uso de nuevas etiquetas / atributos que determinan la naturaleza del contenido. - Elementos multimedia - Elementos estructurales - Atributos semánticos - Nuevos tipos / atributos de campos de formulario - Sintaxis de Microformatos / microdata --Etc
8. HTML 5 / CSS 3 AUDIO / VIDEO Offline Conectividad Acceso a ficheros Semántica Audio/Video 3D/Gráficos Presentación Rendimiento Almacenamiento Permite no solo incluir contenido multimedia (audio / video) sino acceder, controlar y mani- pular determinados aspectos de los mismos Video Audio
9. HTML 5 / CSS 3 3D/GRÁFICOS Offline Conectividad Acceso a ficheros Semántica Audio/Video 3D/Gráficos Presentación Rendimiento Almacenamiento Permite crear animaciones y/o efectos visuales en websites/aplicaciones web sin necesidad de plugins adicionales (por ej: flash) - 2D Canvas - WebGL - SVG - 3D CSS transforms
10. HTML 5 / CSS 3 PRESENTACIÓN Offline Conectividad Acceso a ficheros Semántica Audio/Video 3D/Gráficos Presentación Rendimiento Almacenamiento Permite crear sitios web/aplicaciones vistosas y visualmente enriquecidas que producen mejores experiencias de usuario. - CSS3 3D Transforms - CSS3 Transforms - CSS3 Animation - CSS3 Transition - Webfonts 3D transforms CSS3 Transforms CSS3 Animation CSS3 Transitions
11. HTML 5 / CSS 3 RENDIMIENTO Offline Conectividad Acceso a ficheros Semántica Audio/Video 3D/Gráficos Presentación Rendimiento Almacenamiento Permite crear aplicaciones que rivalizan en rendimiento a las aplicaciones nativas, más responsivas que las aplicaciones tradicionales - Webworkers (procesos en background) - Almacenamiento local - Carga asíncrona - App caché - Webfonts
12. HTML 5 / CSS 3 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] HISTORIA DE HTML 5
13. HTML 5 / CSS 3 ESTADO ACTUAL (MAYO 2012) www.findmebyip.com/litmus/#html5-web-applications
14. HTML 5 / CSS 3 HTML5 = Evolución Mejor manejo de errores Mayor estandarización Código más semántico Más accesible Soporte multimedia BENEFICIOS
15. HTML 5 / CSS 3 BENEFICIOS Acceso a recursos como webcams o micrófonos Almacenamiento Local Webworkers Geolocalización Gestión de formularios Menor dependencia de plugins y Javascript
16. HTML 5 / CSS 3 NOVEDADES Etiquetado del documento 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>
17. HTML 5 / CSS 3 NOVEDADES Etiquetado del documento META <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> HTML 4.01 HTML5 <meta charset=”UTF-8”>
18. HTML 5 / CSS 3 NOVEDADES 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>
19. HTML 5 / CSS 3 HOJAS DE ESTILO <link rel=”stylesheet” type=”text/css” href=”estilos.css”> HTML 4.01 HTML5 <link rel=”stylesheet” href=”estilos.css”> NOVEDADES Etiquetado del documento
20. HTML 5 / CSS 3 NOVEDADES 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>
21. HTML 5 / CSS 3 Nuevas etiquetas de presentación <div id=“header”> <div id=“menu”> <div id=“footer”> <div> <div> <div> <header> <nav> <footer> <article> <section> <aside> NOVEDADES
22. HTML 5 / CSS 3 <nav> <footer> <article> <section> <aside> <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> NUEVAS ETIQUETAS DE PRESENTACIÓN
23. HTML 5 / CSS 3 <footer> <article> <section> <aside> <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> NUEVAS ETIQUETAS DE PRESENTACIÓN
24. HTML 5 / CSS 3 NUEVAS ETIQUETAS DE PRESENTACIÓN <footer> <aside> <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
25. HTML 5 / CSS 3 NUEVAS ETIQUETAS DE PRESENTACIÓN <footer> <aside> <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>
26. HTML 5 / CSS 3 <figure> representa un diagrama, una ilustración, una fotografía, etc <figure> <img src=“javier.jpg" alt=“Javier González"> <figcaption> Javier González 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> NUEVAS ETIQUETAS DE PRESENTACIÓN
27. HTML 5 / CSS 3 NUEVAS ETIQUETAS DE PRESENTACIÓN <footer> <aside> <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>
28. HTML 5 / CSS 3 NUEVAS ETIQUETAS DE PRESENTACIÓN <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>© 2012 Bla bla bla bla</p> </footer> <footer>
29. HTML 5 / CSS 3 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 CANVAS
30. HTML 5 / CSS 3 width & height autoplay loop source poster controls Autobuffer preload VIDEO
31. HTML 5 / CSS 3 <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> VIDEO Ejemplo de video
32. HTML 5 / CSS 3 autoplay source loop autobuffer controls preload AUDIO
33. HTML 5 / CSS 3 <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 AUDIO
34. HTML 5 / CSS 3 FORMULARIOS <input> type search Email phone url tel range (*) number (*) date datetime datetime-local month colour min (*) max (*) http://www.findmebyip.com/litmus/#html5-forms-inputs
35. HTML 5 / CSS 3 FORMULARIOS autofocus <input> required autocomplete pattern placeholder on off Expresiones regulares http://www.findmebyip.com/litmus/#html5-forms-inputs Ejemplo de formulario
36. HTML 5 / CSS 3 <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> ELEMENTOS QUE DESAPARECEN
37. HTML 5 / CSS 3 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> var elementos1 = document.querySelectorAll("section div.wrapper"); var elementos2 = document.querySelectorAll("div.content, div.wrapper"); var inputsText = document.querySelectorAll('[type=text]'); </script> <script> var elemento = document.querySelector("section div.wrapper"); </script> JAVASCRIPT
38. HTML 5 / CSS 3 draggable (true|false): el elemento puede ser arrastrado hacia otro elemento EVENTOS • dragstart • drag • dragenter • dragover • dragleave • drop • dragend Ejemplo de drag&drop DRAG & DROP
39. HTML 5 / CSS 3 Bases de datos Locales Lógica de la aplicación e interfaz de usuario data generada por el usuario, o recursos solicitados VS Cache ALMACENAMIENTO LOCAL
40. HTML 5 / CSS 3 ALMACENAMIENTO LOCAL Se fuerza a tener Instalado el plugin. Problemas con Firewalls Se fuerza a usar un Navegador determinado Poca información (4 Kb) Reduce velocidad Técnicas de Almacenamiento Offline Previas Navegador Basado en Plugins Cookies
41. HTML 5 / CSS 3 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 ALMACENAMIENTO LOCAL
42. HTML 5 / CSS 3 Web Storage 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
43. HTML 5 / CSS 3 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
44. HTML 5 / CSS 3 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
45. HTML 5 / CSS 3 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
46. HTML 5 / CSS 3 ¡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 ALMACENAMIENTO LOCAL
47. HTML 5 / CSS 3 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 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. <script> var ws = new WebSocket("ws://echo.websocket.org"); </script> 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).
48. HTML 5 / CSS 3 WebSockets <script> ws.onopen = function(event){ //Conexión abierta } ws.onmessage = function(event){ //Mensaje recibido en event.data; } ws.onclose = function(event){ //Conexión cerrada } ws.onerror = function(event){ //Error en la conexión } </script> <script> ws.send("ping"); //mandar mensaje al servidor ws.close(); // cerrar la conexión </script> EVENTOS FUNCIONES ATRIBUTOS -url (string con la dirección) - protocol (string con el protocolo) - 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
49. HTML 5 / CSS 3 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>
50. HTML 5 / CSS 3 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>
51. HTML 5 / CSS 3 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: <script> worker.postMessage("Información para el worker"); </script> <script> self.onmessage = function(event){ //Recibe "Información para el worker" en event.data }; </script> <script> self.postMessage("Información para el padre"); </script> <script> worker.onmessage = function(event){ //Recibe "Info para el padre" en event.data }; </script> 1) El hilo padre manda un mensaje (evento) al worker: 2) El worker recibe el mensaje en el atributo "data" del evento 3) El worker termina su proceso y envía un mensaje (evento) al padre: 4) El padre recibe el mensaje en el atributo "data" del evento
52. HTML 5 / CSS 3 CSS 3 HTML 5 CSS 3 estructura presentación
53. HTML 5 / CSS 3 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 HISTORIA DE CSS 3
54. HTML 5 / CSS 3 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! CSS 3 VS CSS 2
55. HTML 5 / CSS 3 NOVEDADES DE CSS 3 • Bordes • Fondos • Color • Text effects • Layout multicolumna • Transiciones • Animaciones • Selectores • Media Queries
56. HTML 5 / CSS 3 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/ NOVEDADES DE CSS 3
57. HTML 5 / CSS 3 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 NOVEDADES DE CSS 3
58. HTML 5 / CSS 3 • rotate : transform: rotate(30deg); • skew : transform: skew(-30deg); • translate transform: translate(30px,10px); • scale : transform: scale(0.5,2.0); TRANSFORM http://www.the-art-of-web.com/css/css-animation/ http://www.ejhansel.com/transform/ NOVEDADES DE CSS 3
59. HTML 5 / CSS 3 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 NOVEDADES DE CSS 3
60. HTML 5 / CSS 3 NOVEDADES DE CSS 3 • column-count • column-width • column-gap • column-rule MULTI-COLUMN LAYOUT
61. HTML 5 / CSS 3 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.fontsquirrel.com/fontface/generator NOVEDADES DE CSS 3
62. HTML 5 / CSS 3 NOVEDADES DE CSS 3 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 thisisaveryverylongwordthatisntreall yoneword and again a longwordwithnospacesinit TEXTOS http://lab.simurai.com/flashlight
63. HTML 5 / CSS 3 NOVEDADES DE CSS 3 • :enabled • :disabled • :checked NUEVAS PSEUDO-CLASES
64. HTML 5 / CSS 3 NOVEDADES DE CSS 3 a[href^=“http://web”] a[href*=“.es”] a[href$=“.pdf”] [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
65. HTML 5 / CSS 3 NOVEDADES DE CSS 3 MEDIA QUERIES min-width & max-width diferentes estilos según el tamaño de la pantalla http://mediaqueri.es/
66. HTML 5 / CSS 3 ESTADO ACTUAL DE CSS 3 http://www.w3.org/Style/CSS/current-work#table http://www.findmebyip.com/litmus/#target-selector
67. HTML 5 / CSS 3 ¡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; ESTADO ACTUAL DE CSS 3