HTML5
Alejandro de Arriba
adearriba@[Link] @lex0712 [Link]/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="[Link]" 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="[Link]" type="video/webm; codecs=vp8,vorbis"> <source src="[Link]" type="video/ogg; codecs=theora,vorbis"> </video> <audio src="[Link]" 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(); [Link]("part_num", "123ABC"); [Link]("part_price", 7.95); [Link]("part_image", somefile) var xhr = new XMLHttpRequest(); [Link]("POST", "[Link] [Link](formData);
HTML5 Objeto FormData Tambin puedes utilizar el objeto FormData para aadir datos adicionales a un formulario existente antes de enviarlo.
var formElement = [Link]("someFormElement"); var formData = new FormData(formElement); [Link]("part_description", "The best part ever!"); var xhr = new XMLHttpRequest(); [Link]("POST", "[Link] [Link](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 ([Link] != [Link]('email_addr').value) [Link](Los correos no concuerdan.'); else [Link](''); } </script>
Usa css para errores:
:invalid { border: 2px solid #ff0000; }
HTML5
Alejandro de Arriba
adearriba@[Link] @lex0712 [Link]/blog