Está en la página 1de 18

HTML5

Alejandro de Arriba
adearriba@latamtechnologies.com @lex0712 www.adearriba.com/blog

HTML5 - Qu es?
HTML

CSS

HTML5

JS

HTML5 Agenda

Multimedia
Canvas Video Audio

Estructura/Semnticos
Article Aside Header Footer Nav Section

Formularios
Nuevos elementos Atributos

HTML5 - Multimedia

HTML5 - Canvas El elemento canvas permite especificar un rea de la pgina donde se puede, a travs de scripts, dibujar y renderizar imgenes.

Crear Elemento con ID

Obtener Contexto mediante JS

Utilizar contexto para Dibujar

HTML5 Entendiendo el Canvas

HTML5 Audio y Video


Soporte Video
WEBM OGG H.264 MP3

Soporte Audio
ACC

<video src="pr6.webm" width="320" height="240controls preload autoplay></video> <video width="320" height="240" controls> <source src="pr6.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2"> src="pr6.webm" type="video/webm; codecs=vp8,vorbis"> <source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis"> </video> <audio src="audio.oga" controls> audio no soportado</audio>

<source

Semntica - Estructura

HTML5 Nuevos elementos semnticos


<article> <aside> <figcaption> <figure> <footer> <header> <mark> <nav> <section> <time> Define un post, comentario, articulo, otros Define un contenido no relacionado al documento Define el a caption para un elemento <figure> Especifica contenido como ilustraciones, diagramas, etc Especifica el pie del documento o seccin Especifica el encabezado del documento o seccin Define texto remarcado Define enlaces de navegacin Define una seccin del documento Define tiempo/fecha

HTML5 Nueva estructura semntica

Formularios en HTML5

HTML Nuevos Elementos

progress

meter

datalist

keygen

output

HTML5 Nuevos tipos de entrada

tel

search

url

email

datetime time

date number

month range

week color

HTML5 Nuevos Atributos

autofocus

placeholder

form

required

autocomplete

pattern

dirname

novalidate

formaction

formenctype

formmethod

formnovalidate

formtarget

HTML5 Objeto FormData Gracias al objeto FormData, puedes crear y enviar un conjunto de pares de valores/claves y, de forma opcional, archivos mediante XMLHttpRequest.
var formData = new FormData(); formData.append("part_num", "123ABC"); formData.append("part_price", 7.95); formData.append("part_image", somefile) var xhr = new XMLHttpRequest(); xhr.open("POST", "http://some.url/"); xhr.send(formData);

HTML5 Objeto FormData Tambin puedes utilizar el objeto FormData para aadir datos adicionales a un formulario existente antes de enviarlo.
var formElement = document.getElementById("someFormElement"); var formData = new FormData(formElement); formData.append("part_description", "The best part ever!"); var xhr = new XMLHttpRequest(); xhr.open("POST", "http://some.url/"); xhr.send(formData);

HTML5 Validacin basada en navegador


Atributo Required Atributo Pattern <input type="email" id="email_addr" name="email_addr" required /> <input type="text" id="part" name="part" required pattern="[A-Z]{3}[09]{4}"/>

<label>Email:</label> <input type="email" id="email_addr" name="email_addr">


<label>Repeat Email Address:</label> <input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)"> <script> function check(input) { if (input.value != document.getElementById('email_addr').value) input.setCustomValidity(Los correos no concuerdan.'); else input.setCustomValidity(''); } </script>

Usa css para errores:


:invalid { border: 2px solid #ff0000; }

HTML5
Alejandro de Arriba
adearriba@latamtechnologies.com @lex0712 www.adearriba.com/blog