HTML 5 / CSS 3

Introduccin a

HTML 5 / CSS 3

HTML 5 / CSS 3

INTRODUCCIN

HTML 5 / CSS 3

OFFLINE

Offline

WEBConectividadAcceso a ficheros

Semntica

Audio/Video

3D/Grficos

Presentacin

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

Semntica

Audio/Video

3D/Grficos

Presentacin

Rendimiento

Almacenamiento

Permite que las aplicaciones web guardendatos en el dispositivo

-Web Storage: sessionStorage/localStorage- Web SQL Database- IndexedDB

HTML 5 / CSS 3

CONECTIVIDAD

Offline

Conectividad

Acceso a ficheros

Semntica

Audio/Video

3D/Grficos

Presentacin

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

Semntica

Audio/Video

3D/Grficos

Presentacin

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

SEMNTICA

Offline

Conectividad

Acceso a ficheros

Semntica

Audio/Video

3D/Grficos

Presentacin

Rendimiento

Almacenamiento

Permite el uso de nuevas etiquetas / atributos que determinan la naturaleza del contenido.

- Elementos multimedia- Elementos estructurales- Atributos semnticos- Nuevos tipos / atributos de campos de formulario - Sintaxis de Microformatos / microdata--Etc

HTML 5 / CSS 3

AUDIO / VIDEO

Offline

Conectividad

Acceso a ficheros

Semntica

Audio/Video

3D/Grficos

Presentacin

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/GRFICOS

Offline

Conectividad

Acceso a ficheros

Semntica

Audio/Video

3D/Grficos

Presentacin

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

PRESENTACIN

Offline

Conectividad

Acceso a ficheros

Semntica

Audio/Video

3D/Grficos

Presentacin

Rendimiento

AlmacenamientoPermite 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

Semntica

Audio/Video

3D/Grficos

Presentacin

Rendimiento

Almacenamiento

Permite crear aplicaciones que rivalizan en rendimiento a las aplicaciones nativas, ms responsivas que las aplicaciones tradicionales

- Webworkers (procesos en background)- Almacenamiento local- Carga asncrona- App cach- Webfonts

HTML 5 / CSS 3

2004

2005

2007

2009

2012

2020

2022

Apple, Mozilla & Opera no consiguieron crear un estndar HTML4.

En consecuencia forman la Web WHATWG

Se publica el borrador Web Applications 1.0

W3C adopta a WHATGW y publica el borrador HTML5

Finalizacin del borrador

Gracias a Google, Apple y los dispositivos mviles HTML5 surge con fuerza

Primer Release Candidate de HTML5 [previsin W3C]

Finalizacin de test [previsin W3C]

Creacin del estndar HTML5 [previsin W3C]

HISTORIA DE HTML 5

HTML 5 / CSS 3

ESTADO ACTUAL (MAYO 2014)

www.findmebyip.com/litmus/#html5-web-applications

HTML 5 / CSS 3

HTML5 = Evolucin

Mejor manejo de errores

Mayor estandarizacin

Cdigo ms semntico

Ms accesible

Soporte multimedia

BENEFICIOS

HTML 5 / CSS 3

BENEFICIOS

Acceso a recursos como webcams o micrfonos

Almacenamiento Local

Webworkers

Geolocalizacin

Gestin de formularios

Menor dependencia de plugins y Javascript

HTML 5 / CSS 3

NOVEDADES

Etiquetado del documentoDOCTYPE

HTML 5 / CSS 3

NOVEDADES

Etiquetado del documentoMETA

HTML 4.01 HTML5

HTML 5 / CSS 3

NOVEDADES

Etiquetado del documentoSCRIPT

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 documentoETIQUETA A

Acerca de

Conocequines somos

HTML 4.01 HTML5

Acerca de

Conoce quines somos

HTML 5 / CSS 3

Nuevas etiquetas de presentacin

NOVEDADES

HTML 5 / CSS 3

representa la cabecera de un

documento o seccin

representa el ttulo de una seccin.

Se usa para agrupar conjuntos de

elementos h1-h6 (ttulos y

subttulos)

Mi Blog

Esforzndome para trabajar menos

NUEVAS ETIQUETAS DE PRESENTACIN

HTML 5 / CSS 3

representa una seccin del

documento que contiene navegacin

home

blog

galera

contacto

NUEVAS ETIQUETAS DE PRESENTACIN

HTML 5 / CSS 3

NUEVAS ETIQUETAS DE PRESENTACIN

representa una pieza de contenido

independiente dentro de un

documento

representa una seccin del

documento (un captulo, un

apartado, etc) agrupa una serie de

contenidos con una temtica

comn

HTML 5 / CSS 3

NUEVAS ETIQUETAS DE PRESENTACIN

Ttulo del artculo

Subttulo del artculo

Lorem ipsum dolor sit amet, consecteturadipiscing elit.

Captulo 1

Lorem ipsum dolor sit amet, consecteturadipiscing elit. Integer bibendum scelerisqueneque, ac facilisis neque

Captulo 2

Lorem ipsum dolor sit amet, consecteturadipiscing elit. Integer bibendum scelerisqueneque, ac facilisis neque

HTML 5 / CSS 3

representa un diagrama, una

ilustracin, una fotografa, etc

Javier Gonzlez impartiendo seminarios sobre tecnologas web

representa la nota al pie del elemento incluido en

NUEVAS ETIQUETAS DE PRESENTACIN

HTML 5 / CSS 3

NUEVAS ETIQUETAS DE PRESENTACIN

representa contenidos que no estn

directamente relacionados con el resto

de contenido de la pgina o que aporta

informacin adicional

Tecnologas web

bla bla bla

Links sobre HTML5

Links sobre CSS3

HTML 5 / CSS 3

NUEVAS ETIQUETAS DE PRESENTACIN

representa el pie de una seccin o

pgina. Suele contener informacin

sobre el autor, copyright, etc

2012 Bla bla bla bla

HTML 5 / CSS 3

Lienzo utilizado para representar imgenes, grficos, dibujos y/o elementos visuales al vuelo con Javascript

No requiere plugins, ni codecs

Mapa de bits (no hay reescalado)

El contenido no se aade 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 vdeo

VIDEO

Ejemplo de video

HTML 5 / CSS 3

autoplay

source

loop

autobuffer

controls

preload

AUDIO

HTML 5 / CSS 3

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 datosLocales

Lgica de la aplicacin

e interfaz de usuario

data generada por el usuario,

o recursos solicitados

VSCacheALMACENAMIENTO 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 informacin (4 Kb)

Reduce velocidad

Tcnicas de Almacenamiento Offline Previas

Navegador

Basado en Plugins

Cookies

HTML 5 / CSS 3

Tcnicas de Almacenamiento con HTML5

Diferentes APIs:

Web Storage (Local Storage or DOM Storage)

Web SQL Database

IndexedDB

File Storage

PRINCIPIOS:

Normas estndar para todos los navegadores.

Informacin solo accesible desde el propio navegador.

Interaccin de la API y la Base de Datos es asncrona

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 ms 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)

Ms 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 informacin.

Pocos navegadores lo soportan, pero est previsto ser

soportado por todos

HTML 5 / CSS 3

ALMACENAMIENTO LOCAL

FileStorage

Puedes guardar informacin binaria (como texto), y grandes

cantidades de informacin.

File Reader soportado solo por Chrome

FileWriter todava no soportado por nadie

Cuando sea soportado ser bueno para almacenar

grandes cantidades de informacin

HTML 5 / CSS 3

LO QUIERO USAR YA!

Por defecto usar WEB STORAGE (+ simple & + compatible )

Ayudarse de libreras como persis.js

Protegerse contra la perdida de datosNo guardar informacin privada

Los usuarios pueden borrar los datos fcilmente

Sincronizarse con el servidor frecuentemente

Securizar los datosAlto riesgo en navegadores compartidos

SessionStorage mejor que LocalStorage

Encriptar informacin

Evitar guardar cierto tipo de datos

ALMACENAMIENTO LOCAL

HTML 5 / CSS 3

WebSockets

Permite la comunicacin bidireccional con cualquier servidor mediante un determinado protocolo de red.

La conexin con el servidor se establece de forma asncrona, en segundo plano, y la gestin del todo su ciclo de vida se realiza a travs de callbacksque reciben eventos

Debemos utilizar "ws://" para establecer conexiones con el protocolo websocket.

El constructor admite adems un parmetro adicional para que indicar un conjunto de subprotocolos, pero an est sin definir.

var ws = new WebSocket("ws://echo.websocket.org");

la URL del cdigo de ejemplo es vlida muy til para pruebas, es un sencillo servidor websocketque acta como eco (reenva al cliente lo mismo que recibe).

HTML 5 / CSS 3

WebSockets

ws.onopen = function(event){

//Conexin abierta

}

ws.onmessage = function(event){

//Mensaje recibido en event.data;

}

ws.onclose = function(event){

//Conexin cerrada

}

ws.onerror = function(event){

//Error en la conexin

}

ws.send("ping");

//mandar mensaje al servidor

ws.close();

// cerrar la conexin

EVENTOS FUNCIONES

ATRIBUTOS-url (string con la direccin)- 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 ejecucin concurrentes con una gran carga de trabajo y duracin indeterminada.

Las tareas funcionan al margen del proceso normal de gestin de eventos de los controles de la interface de usuario, evitando bloquear la pgina durante su ejecucin.

var worker = new Worker("worker.js");

Kill

HTML 5 / CSS 3

WEB WORKERS

Pueden procesar eventos, callbacks, e incluso es posible crear otros workers.

Limitacin: no tienen un contexto de navegacin 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 cdigo 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 comunicacin se realiza a travs de "postMessage", y el manejador "onmessage".

Una comunicacin bsica entre padre e hijo tendra cuatro pasos:

worker.postMessage("Informacin para el worker");

self.onmessage = function(event){

//Recibe "Informacin para el worker" en event.data

};

self.postMessage("Informacin 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 enva 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 presentacin

HTML 5 / CSS 3

1996

1998

2000

2002

2009

CSS 1: permite dar estilos independientemente del navegador y del HTML

CSS2: nuevas funcionalidades, pero implementacin lenta

Semilla del CSS3.

Se plantea una lista de mejoras de CSS2

Borrador de CSS3

CSS2.1: Crea lo que ahora consideramos el estndar

Implementacin 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 tipografas

Transformaciones

Reduce la cantidad de HTML (divitis)

Reduce las peticiones de imgenes

Nuestra pagina va a ser ms rpida!

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);

translatetransform: 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-widthdiferentes estilos segn el tamao 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 cdigo

No todos los navegadores lo soportan

Posibles solucioneseccstender.orgless.jsFicheros .css para cada navegadorcss3generator.com

-o-border-radius: 10px; -webkit-border-radius: 10px;

-moz-border-radius: 10px;-ms-border-radius: 10px;

ESTADO ACTUAL DE CSS 3