Scribd
Cargar
138 vistas18 páginas

Modulo 2 - HTML5

Este documento presenta una introducción a HTML5. Explica que HTML5 incluye nuevas características multimedia como <canvas>, video y audio. También incluye nuevos elementos semánticos como <article>, <aside>, <header> y <section> para mejorar la estructura del contenido. HTML5 también mejora los formularios con nuevos tipos de entrada de datos y atributos.

Cargado por

Ramiro Rodelo Del Valle
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
138 vistas18 páginas

Modulo 2 - HTML5

Este documento presenta una introducción a HTML5. Explica que HTML5 incluye nuevas características multimedia como <canvas>, video y audio. También incluye nuevos elementos semánticos como <article>, <aside>, <header> y <section> para mejorar la estructura del contenido. HTML5 también mejora los formularios con nuevos tipos de entrada de datos y atributos.

Cargado por

Ramiro Rodelo Del Valle
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 18

HTML5

Alejandro de Arriba
[email protected] @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
[email protected] @lex0712 www.adearriba.com/blog

También podría gustarte