HTML 5 / CSS 3 Introducción a HTML 5 / CSS 3

HTML 5 / CSS 3 INTRODUCCIÓN

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

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

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

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

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

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

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

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

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

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

HTML 5 / CSS 3 ESTADO ACTUAL (MAYO 2012) www.findmebyip.com/litmus/#html5-web-applications

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

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

HTML 5 / CSS 3 NOVEDADES Etiquetado del documento DOCTYPE XHTML 1.0 HTML5

HTML 5 / CSS 3 NOVEDADES Etiquetado del documento META HTML 4.01 HTML5

HTML 5 / CSS 3 NOVEDADES Etiquetado del documento SCRIPT ……… HTML 4.01 HTML5 ………

HTML 5 / CSS 3 HOJAS DE ESTILO HTML 4.01 HTML5 NOVEDADES Etiquetado del documento

HTML 5 / CSS 3 NOVEDADES Etiquetado del documento ETIQUETA “A”

Acerca de

Conoce quiénes somos

HTML 4.01 HTML5

Acerca de

Conoce quiénes somos

HTML 5 / CSS 3 Nuevas etiquetas de presentación

HTML 5 / CSS 3 representa la cabecera de un documento o sección representa el título de una sección. Se usa para agrupar conjuntos de elementos h1-h6 (títulos y subtítulos)

Mi Blog

Esforzándome para trabajar menos

NUEVAS ETIQUETAS DE PRESENTACIÓN

HTML 5 / CSS 3 representa una sección del documento que contiene navegación

• home
• blog
• galería
• contacto

NUEVAS ETIQUETAS DE PRESENTACIÓN

HTML 5 / CSS 3 NUEVAS ETIQUETAS DE PRESENTACIÓN representa una pieza de contenido independiente dentro de un documento representa una sección del documento (un capítulo, un apartado, etc) agrupa una serie de contenidos con una temática común

HTML 5 / CSS 3 NUEVAS ETIQUETAS DE PRESENTACIÓN

Título del artículo

Subtítulo del artículo

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Capítulo 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum scelerisque neque, ac facilisis neque

Capítulo 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum scelerisque neque, ac facilisis neque

HTML 5 / CSS 3 representa un diagrama, una ilustración, una fotografía, etc Javier González impartiendo seminarios sobre tecnologías web representa la “nota al pie” del elemento incluido en NUEVAS ETIQUETAS DE PRESENTACIÓN

HTML 5 / CSS 3 NUEVAS ETIQUETAS DE PRESENTACIÓN representa contenidos que no están directamente relacionados con el resto de contenido de la página o que aporta información adicional

Tecnologías web

bla bla bla

• Links sobre HTML5
• Links sobre CSS3

HTML 5 / CSS 3 NUEVAS ETIQUETAS DE PRESENTACIÓN representa el pie de una sección o página. Suele contener información sobre el autor, copyright, etc

© 2012 Bla bla bla bla

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 •

Tu navegador no soporta canvas

var lienzo = document.getElementById(‘miLienzo’) var context = lienzo.getContext('2d');

HTML 5 / CSS 3 width & height autoplay loop source poster controls Autobuffer preload VIDEO

HTML 5 / CSS 3 Descargar vídeo VIDEO Ejemplo de video

HTML 5 / CSS 3 autoplay source loop autobuffer controls preload AUDIO

HTML 5 / CSS 3 Descargar canción Ejemplo de audio AUDIO

HTML 5 / CSS 3 FORMULARIOS type search Email phone url tel range (*) number (*) date datetime datetime-local month colour min (*) max (*) http://www.findmebyip.com/litmus/#html5-forms-inputs

HTML 5 / CSS 3 FORMULARIOS autofocus required autocomplete pattern placeholder on off Expresiones regulares http://www.findmebyip.com/litmus/#html5-forms-inputs Ejemplo de formulario

HTML 5 / CSS 3 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 REDEFINIDAS ELEMENTOS QUE DESAPARECEN

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 var elementos1 = document.querySelectorAll("section div.wrapper"); var elementos2 = document.querySelectorAll("div.content, div.wrapper"); var inputsText = document.querySelectorAll('[type=text]'); var elemento = document.querySelector("section div.wrapper"); JAVASCRIPT

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

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

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

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

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

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

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

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

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

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. var ws = new WebSocket("ws://echo.websocket.org"); 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 WebSockets 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 } ws.send("ping"); //mandar mensaje al servidor ws.close(); // cerrar la conexión 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

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. var worker = new Worker("worker.js"); Kill

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 importScripts("script1.js"); //De uno en uno... importScripts("script2.js"); importScripts("script3.js", "script4.js"); //.. o varios a la vez

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: worker.postMessage("Información para el worker"); self.onmessage = function(event){ //Recibe "Información para el worker" en event.data }; self.postMessage("Información para el padre"); worker.onmessage = function(event){ //Recibe "Info para el padre" en event.data }; 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

HTML 5 / CSS 3 CSS 3 HTML 5 CSS 3 estructura presentación

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

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

HTML 5 / CSS 3 NOVEDADES DE CSS 3 • Bordes • Fondos • Color • Text effects • Layout multicolumna • Transiciones • Animaciones • Selectores • Media Queries

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

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

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

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

HTML 5 / CSS 3 NOVEDADES DE CSS 3 • column-count • column-width • column-gap • column-rule MULTI-COLUMN LAYOUT

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

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

HTML 5 / CSS 3 NOVEDADES DE CSS 3 • :enabled • :disabled • :checked NUEVAS PSEUDO-CLASES

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 SELECTORES DE ATRIBUTOS

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/

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

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