Intro HTML 5

HTML5HTML5HTML5HTML5 Que es HTML5?Que es HTML5?

HTML5 es el nuevo estndar de HTML

La versin anterior HTML 4.01 apareci en 1999. El web ha cambiado mucho desde 1999. El web ha cambiado mucho desde entonces.

HTML5 todava esta en desarrollo, pero muchos browsers ya soportan algunas de sus caractersticas.

Que es HTML5?Que es HTML5?

TML5 es el nuevo estndar de HTML

La versin anterior HTML 4.01 apareci en 1999. El web ha cambiado mucho desde 1999. El web ha cambiado mucho desde

HTML5 todava esta en desarrollo, pero muchos browsers ya soportan algunas de sus

DesarrolloDesarrollo

HTML5 es el resultado de la cooperacin HTML5 es el resultado de la cooperacin entre el World Wide Web Consortium (W3C) y el Web Hypertext Application Technology Working Group (WHATWG).

de HTML5de HTML5

HTML5 es el resultado de la cooperacin HTML5 es el resultado de la cooperacin entre el World Wide Web Consortium (W3C) y el Web Hypertext Application Technology Working Group (WHATWG).

PrincipiosPrincipios bsicosbsicos

Basarse en HTML, CSS, DOM, y JavaScript Reducir la necesidad de plugins Mejor manejo de errores Remplazar scripting con etiquetas Independiente del dispositivo de visualizacin Proceso de desarrollo transparente para el pblico

bsicosbsicos de HTML5de HTML5

Basarse en HTML, CSS, DOM, y JavaScriptReducir la necesidad de pluginsMejor manejo de erroresRemplazar scripting con etiquetasIndependiente del dispositivo de visualizacinProceso de desarrollo transparente para el pblico

NuevasNuevas caractersticascaractersticas

Elemento Canvas para dibujar Elementos de video y audio Almacenamiento de datos offline Almacenamiento de datos offline Elementos asociados con el contenido: article,

footer, header, nav, section Nuevos controles en las formas: calendar, date, time, email, url, search

caractersticascaractersticas de HTML5de HTML5

Elemento Canvas para dibujarElementos de video y audioAlmacenamiento de datos offlineAlmacenamiento de datos offlineElementos asociados con el contenido: article,footer, header, nav, sectionNuevos controles en las formas: calendar, date,

Estatus actual de HTML5Estatus actual de HTML5

HTML5 no es todava un estndar oficial y ningn browser lo soporta completamente pero es en general bien soportado por los principales navegadores: Firefox, Safari, Chrome, Opera, Internet Explorer 9, ...

Se puede detectar si el navegador utilizado tiene soporte Se puede detectar si el navegador utilizado tiene soporte para caracteristicas individuales como canvas, video, etc.

Se recomienda utilizar las caractersticas disponibles conforme vayan apareciendo.

Estatus actual de HTML5Estatus actual de HTML5

HTML5 no es todava un estndar oficial y ningn browser lo soporta completamente pero es en general bien soportado por los principales navegadores: Firefox, Safari, Chrome, Opera, Internet Explorer 9, ...

Se puede detectar si el navegador utilizado tiene soporte Se puede detectar si el navegador utilizado tiene soporte para caracteristicas individuales como canvas, video, etc.

Se recomienda utilizar las caractersticas disponibles conforme vayan apareciendo.

Deteccin de HTML5Deteccin de HTML5Cuando un browser despliega una pgina web, se construye un Document Object Model (DOM), el cual consiste en una coleccin de objetos que representan los elementos HTML de la pgina. Cada elemento es representado en el DOM por un objeto.objeto.En los browsers que soportan HTML5, ciertos objetos tendrn propiedades nicas que pueden servir para saber que caractersticas de HTML5 estn soportadas.

Deteccin de HTML5Deteccin de HTML5Cuando un browser despliega una pgina web, se construye un Document Object Model (DOM), el cual consiste en una coleccin de objetos que representan los elementos HTML de la pgina. Cada elemento es representado en el DOM por un

En los browsers que soportan HTML5, ciertos objetos tendrn propiedades nicas que pueden servir para saber que caractersticas de HTML5

Deteccin de HTML5 (Deteccin de HTML5 (

Modernizer es una librera JavaScript open Modernizer es una librera JavaScript open source que detecta las caractersticas HTML5 y CSS3 que son soportadas por el browser.

Deteccin de HTML5 (Deteccin de HTML5 (contcont))

Modernizer es una librera JavaScript open Modernizer es una librera JavaScript open source que detecta las caractersticas HTML5 y CSS3 que son soportadas por el browser.


HTML5 sure is funHTML5 sure is fun

...


HTML5 sure is funHTML5 sure is fun


Modernizr se ejecuta automticamente y se crea un objeto global llamado Modernizr, el cual contiene un conjunto de propiedades cual contiene un conjunto de propiedades booleanas por cada caracterstica que puede detectar. Por ejemplo, si el browser soporta el API canvas, La propiedad Modernizr.canvas tendr el valor de true.


Modernizr se ejecuta automticamente y se crea un objeto global llamado Modernizr, el cual contiene un conjunto de propiedades cual contiene un conjunto de propiedades booleanas por cada caracterstica que puede detectar. Por ejemplo, si el browser soporta el API canvas, La propiedad Modernizr.canvas tendr el valor de true.


if (Modernizr.canvas) {// let's draw some shapes!// let's draw some shapes!

} else {// no native canvas support available :(

}


// let's draw some shapes!// let's draw some shapes!

// no native canvas support available :(

Nuevos elementos en HTML5Nuevos elementos en HTML5

Consultar:

http://www.w3schools.com/html5/http://www.w3schools.com/html5/

Nuevos elementos en HTML5Nuevos elementos en HTML5

Consultar:

http://www.w3schools.com/html5/http://www.w3schools.com/html5/

Nuevos elementos en HTML5 (cont..)Nuevos elementos en HTML5 (cont..)Nuevos elementos en HTML5 (cont..)Nuevos elementos en HTML5 (cont..) Nuevos elementos en HTML5 (cont..)Nuevos elementos en HTML5 (cont..)

Estructura semntica Nuevos controles de formularios Nuevos controles de formularios Audio y Video Grficas 2D/3D

Nuevos elementos en HTML5 (cont..)Nuevos elementos en HTML5 (cont..)

Estructura semnticaNuevos controles de formulariosNuevos controles de formularios

ANTESANTESANTESANTES Ahora, elementos semnticosAhora, elementos semnticosAhora, elementos semnticosAhora, elementos semnticos

HTML5: VideoHTML5: Video

Hasta ahora no exista un estandar para mostrar video en un a pgina web. La mayora de los videos se muestran mediante un plugin (por ejemplo Flash).

HTML5 especifica una manera estandar para incuir video mediante el elemento

HTML5: VideoHTML5: Video

Hasta ahora no exista un estandar para mostrar video en un a pgina web. La mayora de los videos se muestran mediante un plugin (por ejemplo Flash).

HTML5 especifica una manera estandar para incuir video mediante el elemento

HTML5: Video (cont ...)HTML5: Video (cont ...)

Currently, there are 3 supported video formats for the video element:


Currently, there are 3 supported video formats


HTML5: Video (cont ...)HTML5: Video (cont ...)HTML5: Video (cont ...)HTML5: Video (cont ...) AtributosAtributos de de de de

HTML5: AudioHTML5: Audio

Hasta ahora no exista un incluir audio en un a pgina web. La mayora de los audios se escuchan mediante un plugin (por ejemplo Flash).

HTML5 especifica una manera incuir audio mediante el elemento

HTML5: AudioHTML5: Audio

Hasta ahora no exista un estandar para incluir audio en un a pgina web. La mayora de los audios se escuchan mediante un

(por ejemplo Flash).

HTML5 especifica una manera estandar para audio mediante el elemento

HTML5: Audio (cont ...)HTML5: Audio (cont ...)

Currently, there are 3 supported formats for the audio element:


Currently, there are 3 supported formats for


Your browser does not support the audio element.




El elemento admite la especificacin de mltiples fuentes para que el browser utilice la primera que reconozca.



El elemento admite la especificacin de mltiples fuentes para que el browser utilice la primera que reconozca.


HTML5: Atributos de HTML5: Atributos de HTML5: Atributos de HTML5: Atributos de Nuevas funcionalidadesNuevas funcionalidades

Canvas Scalable Vector Graphics (SVG) Drag and drop Drag and drop Web Storage Geolocation App Cache Server-Sent Events (SSE) Web sockets

Nuevas funcionalidadesNuevas funcionalidades

Scalable Vector Graphics (SVG)

Sent Events (SSE)

HTML5: CanvasHTML5: Canvas

El elemento canvas de HTML 5 permite hacer dibujos utilizando javascript. Existen mtodos para dibujar lneas, rectngulos, circlos, etc.para dibujar lneas, rectngulos, circlos, etc.Un canvas es un rea rectangular en la pantalla.

HTML5: CanvasHTML5: Canvas

El elemento canvas de HTML 5 permite hacer dibujos utilizando javascript. Existen mtodos para dibujar lneas, rectngulos, circlos, etc.para dibujar lneas, rectngulos, circlos, etc.Un canvas es un rea rectangular en la

HTML5: Canvas (cont...)HTML5: Canvas (cont...)

EJEMPLO

HTML5: Canvas (cont...)HTML5: Canvas (cont...)

HTML5: Canvas (cont...)HTML5: Canvas (cont...)Para dibujar en el elemento es indispensable utilizar javascript.

var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);

HTML5: Canvas (cont...)HTML5: Canvas (cont...)Para dibujar en el elemento es indispensable

var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");

SVGSVG

DragDrag and and

div {width:120px;height:120px;padding:10px;border:1px solid #aaaaaa;}

function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}

and and DropDrop

div {width:120px;height:120px;padding:10px;border:1px solid #aaaaaa;}

function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}

ev.target.appendChild(document.getElementById(data));

DragDrag and and DropDrop

Drag the image into a square or into the body:

DropDrop ((contcont))

Drag the image into a square or into the body:

DragDrag and and DropDropDropDrop ((contcont)) HTML5: Web StorageHTML5: Web Storage

El objeto localStorage almacena datos permanentemente.

El objeto sessionStorage almacena los datos pero los borra cuando se cierra el browser.

if(typeof(Storage)!=="undefined"){localStorage.lastname="Smith";document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;}else{document.getElementById("result").innerHTML="Sorry, your browser does not support

web storage...";}

HTML5: Web StorageHTML5: Web Storagealmacena datos permanentemente.

almacena los datos pero los borra cuando se cierra el browser.

document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;

document.getElementById("result").innerHTML="Sorry, your browser does not support

GeolocationGeolocation

Click the button to get your coordinates:Try It

var x=document.getElementById("demo");function getLocation()

{if (navigator.geolocation)if (navigator.geolocation)

{navigator.geolocation.getCurrentPosition(showPosition);}

else{x.innerHTML="Geolocation is not supported by this browser.";}}

function showPosition(position){x.innerHTML="Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude;}

GeolocationGeolocation

Click the button to get your coordinates:Try It

navigator.geolocation.getCurrentPosition(showPosition);else{x.innerHTML="Geolocation is not supported by this browser.";}

x.innerHTML="Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude;

GeolocationGeolocationGeolocationGeolocation

FormasFormas HTML5: HTML5: datosdatos

HTML5 tiene nuevos tipos de entrada de datos. Los datos se validan automticamente

email url number number range date pickers (date, month, week, time,

datetime, datetime-local) search color

datosdatos de de entradaentrada

tiene nuevos tipos de entrada de datos. Los datos se validan automticamente

date pickers (date, month, week, time,local)

HTML5: Input typesHTML5: Input types

Note: Opera has the best support for the new input types. However, you can already start using them in all major browsers. If they are not supported, they will behave as regular text fields.

HTML5: Input typesHTML5: Input types

Note: Opera has the best support for the new input types. However, you can already start using them in all major browsers. If they are not supported, they will behave as regular text fields.

HTML5: Input HTML5: Input

E-mail: E-mail:

No pemite enviar un e-mailIncorrecto.

HTML5: Input HTML5: Input -- ee--mailmail

mail: mail:


Points:

HTML5: Input HTML5: Input -- rangerange

Points:

Si el browser no soporta el tipo de entrada lo despliega como tipo texto

HTMLHTML55: Input : Input

Birthday:

: Input : Input datedate

Birthday:


Select your favorite color:

HTML5: Input HTML5: Input colorcolor

listlist attributeattribute and > elementelement ((contcont))

Formas: Nuevos AtributosFormas: Nuevos Atributos

Atributos de las formas autocomplete novalidate

Atributos de los inputs autocomplete autofocus autofocus form form overrides (formaction

formmethod, formnovalidate height and width list min, max and step multiple pattern (regexp) placeholder required

Formas: Nuevos AtributosFormas: Nuevos Atributos

formas

de los inputs

formaction, formenctype, formnovalidate, formtarget)

Soporte de los browsersSoporte de los browsersInput Type IE Firefox

autocomplete 8 3.5

autofocus No 4

form No 4

form overrides No 4

height and width 8 3.5

list No 4list No 4

min, max and step No No

multiple No 3.5

novalidate No 4

pattern No 4

placeholder No 4

required No 4

Soporte de los browsersSoporte de los browsersFirefox Opera Chrome Safari

9.5 3 4

10 3 4

9.5 10 No

10.5 10 No

9.5 3 4

9.5 No No9.5 No No

9.5 3 No

11 3 4

11 10 No

9.5 3 No

11 3 3

9.5 3 No

Intro HTML 5

Documents

Transcript of Intro HTML 5