HTML 5

<
M.I. Edgar Alfonso Prez Garca
>
<HTML5>
HTML5 (HyperText Markup Language, versin 5) es la quinta revisin importante del lenguaje bsico de la World Wide Web, HTML. HTML5 = HTML + CSS + JS
Todava se encuentra en modo experimental, lo cual indica la misma W3C; aunque ya es usado por mltiples desarrolladores web.
Tecnologas WEB M.I. Edgar Alfonso Prez Garca
VENTAJAS E INOVACIONES
MANEJO DE ERRORES
En HTML se pueden declarar inconsistencias en el lenguaje y etiquetas (tag soup) y an as mostrar un resultado (no siempre deseado) en el Navegador. Esto debido a que HTML es un lenguaje interpretado. HTML5 intenta estandarizar estas definiciones as como un apropiado manejo de errores.
PGINAS MEJOR ESTRUCTURADAS

HTML hacia un uso excesivo de la etiqueta <div>. HTML5 contiene nuevas etiquetas que permiten una mejor comprensin y estructuracin.
Ejemplo : article, header, footer, nav, hgroup, aside, article

PLATAFORMA DE APLICACIONES
HTML5 incorpora una variedad de herramientas para convertir al Navegador en una Plataforma API (application programming interfaces) . Mdulos anteriormente desarrollados en javascritp, jQuery o AJAX se incorporan como parte de HTML5. Drag and drop Off-Line API. Permite descargar todos los contenidos necesarios y trabajar de forma local. Web SQL database Cache de Aplicaciones Manipulacin de archivos Barras de Progreso Nuevos Elementos de Formulario Validacin de elementos de Formulario Formularios para Moviles etc
GEOLOCALIZACIN
Las aplicaciones web pueden tener acceso a la latitud y longitud donde se encuentre el usuario que accede a un website.
GRFICOS y VIDEOJUEGOS
HTML5 proporciona soporte para grficos vectoriales SVG y la nueva etiqueta <canvas> proporciona un lienzo para dibujar en el, permitiendo as grficos en 2D y 3D.
VIDEO NATIVO
La reproduccin de vdeos en la web iba ligada hasta hace bien poco a la instalacin de Flash en nuestro navegador. HTML5 proporciona un estndar comn que permitir la reproduccin de sin tener que instalar elementos adicionales.
API STORAGE
Facilidad de almacenamiento persistente en local, con bases de datos (basadas en SQLite) o con almacenamiento de objetos por aplicacin o por dominio Web (Local Storage y Global Storage). Se dispone de una Base de datos con la posibilidad de hacer consultas SQL.
WEBSOCKETS
Proporciona canales de comunicacin FULL DUPLEX entre los Servidores.
WEBWORKERS
Hilos de ejecucin en paralelo.
JAVASCRIPT
Permite a Javascript correr en 2 plano o background.
COMPATIBILIDAD
Por el momento no todas las caractersticas de HTML5 son soportadas por todos los navegadores. Se hace una evaluacin de los 5 navegadores ms
Antes de proceder a la parte de los ejemplos se deber verificar la compatibilidad del navegador en el siguiente sitio y/o descargar la versin ms reciente. http://html5test.com/index.html Para mayores informes de la compatibilidad visitar el siguiente sitio http://html5demos.com/
La compatibilidad se ha venido dando gradualmente desde el ao 2009. El ao 2011 fue considerado el ao del auge de HTML5
<EJEMPLOS>
ESTRUCTURA
Las nuevas etiquetas nos permiten generar una mejor y ms legible estructuracin de las pginas web
ESTRUCTURA GENERAL DE HTML5

La declaracin del doctype en HTML5 es ms simple.
<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>
<!DOCTYPE HTML> <html> <head></head> <body> <header>PAGE HEADER</header> <nav>PAGE NAV</nav> <article> ARTICLE <header>Article Header</header> <section>Section 1</section> <section>Section 2</section> <footer>Article Footer</footer> </article> <div class="rightAside"> DIV <aside>Aside 1</aside> <aside>Aside 2</aside> </div> <footer>PAGE FOOTER</footer> </body> </html>
GEOLOCALIZACIN
<!DOCTYPE HTML> <html> <head> </head> <body> <script language="javascript"> function obtener_localizacion() { navigator.geolocation.getCurrentPosition(coordenadas); } function coordenadas(position) { var latitud = position.coords.latitude; var longitud = position.coords.longitude; alert('Tus coordenadas son: ('+latitud+','+longitud+')'); } </script> <a href="javascript:obtener_localizacion();">Mostrar Posicin</a> </body> </html>
*Probar con Mozilla Firefox Tecnologas WEB M.I. Edgar Alfonso Prez Garca
AUDIO Y VIDEO
Las nuevas etiquetas <audio> y <video> nos permiten reproducir respectivamente los elementos sin la necesidad de tener instalados complementos adicionales. Anteriormente se dependa mucho de FLASH, Quick-Time o cualquier otro reproductor disponible y previamente instalado.
FORMATOS DE AUDIO SOPORTADOS
FORMATOS DE VIDEO SOPORTADOS
AUDIO Y VIDEO
<!DOCTYPE HTML> <html> <head> </head> <body> <audio id="audio" src="media/sientate_gorda.mp3" controls></audio> <script language="javascript"> document.getElementById("audio").muted = false; </script>
<video id="video" src="media/homero1.mp4" autoplay controls></video> <script language="javascript"> document.getElementById("video").play(); </script>

</body> </html>
*Probar con Google Chrome Tecnologas WEB M.I. Edgar Alfonso Prez Garca
FORMULARIOS
La validacin de Formularios del lado del cliente siempre ha sido necesaria. Los nuevos campos de formulario y caractersticas permiten fcilmente validar el formulario, mostrar los campos requeridos as como indicar algn error en cualquiera de sus campos TIPO DE CAMPO text DESCRIPCIN Campo de Texto
email
date range search tel color number url
Correo electrnico
Fecha Rango Resultados de Bsqueda Telfono Paleta de Colores Numeric UpDown Url Tecnologas WEB M.I. Edgar Alfonso Prez Garca
ATRIBUTO autocomplete autofocus pattern placeholder required

CSS
DESCRIPCIN Habilita o Deshabilita el modo de autocompletar Indica que un elemento obtendr el foco al cargar la pgina Expresin regular para evaluar el contenido de un campo Pista o sugerencia para el valor del campo Indica si un campo es requerido (no vaco)
Se agregan dos elementos tiles que interactan con los <input> del formulario para denotar los campos requeridos y los campos invlidos.
<style> [required] { border-color: #F00; -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);} :invalid { border-color: #F88; -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);} </style>
<form >
Text</br><input type="text" required />*</br>

Email</br><input type="email" value="some@email.com" required />*</br> Date</br><input type="date" min="2010-08-14" max="2012-12-21" value="2012-12-21"/></br> Range</br><input type="range" min="0" max="50" value="10" /></br> Search</br><input type="search" results="10" placeholder="Search..." /></br> Tel</br><input type="tel" placeholder="(444) 111-1111" pattern="^$?\d{3}$?[-\s]\d{3}[-\s]\d{4}.*?$" /></br> Color</br><input type="color" placeholder="e.g. #bbbbbb" /></br> Number</br><input type="number" step="1" min="-5" max="10" value="0" /></br>
Url</br><input type="url" name="homepage" required />*</br>

<input type="submit" value="Submit"> </form>
*Probar con Google Chrome
CANVAS 2d y 3d
El canvas o lienzo de HTML5 nos permite dibujar en tiempo de ejecucin (on the fly) usando javascrit. Anteriormente el dibujo sobre un navegador implicaba mucha codificacin en javascript o usando elementos jQuery o tecnologa de servidor para generar imgenes. Para el canvas 3d es un poco m{as de programacin en javascript, se puede encontrar muchos ejemplos y referencias en internet. (Correr ejemplo 7)
<!DOCTYPE HTML> <html> <head> <title>HTML5 Canvas example</title> <script> function drawPicture(){ // Se recupera el objeto canvas a modificar var canvas = document.getElementById('example'); // Luego se le indicar la forma de trabajar 2D o 3D var context = canvas.getContext('2d'); // Se comienza a dibujar en el lienzo utilizando objetos // grficos
context.lineTo(225,150); context.fill(); } </script> <style type="text/css"> canvas { border: 2px solid black; } </style> </head> <body onload="drawPicture();"> <canvas id="example" width="260" height="200"> </canvas> </body> </html>
context.fillStyle = "rgb(0,255,0)"; context.fillRect (25, 25, 100, 100);

context.fillStyle = "rgba(255,0,0, 0.6)"; context.beginPath(); context.arc(125,100,50,0,Math.PI*2,true); context.fill(); context.fillStyle = "rgba(0,0,255,0.6)"; context.beginPath(); context.moveTo(125,100); context.lineTo(175,50);
*Probar con Google Chrome
OTROS CONTROLES
METER
Medida escalar con rango fijo o fraccionario
PROGRESS
Representa el Progreso de alguna tarea.
SPEECH
Reconocimiento de voz como entrada
<!DOCTYPE HTML> <html> <head> </head> <body> </br>METER</br> <meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter></br> </br>PROGRESS</br> <progress>working...</progress></br> </br>PROGRESS 75%</br> <progress value="75" max="100">3/4 complete</progress></br> </br>SPEECH</br> <input type="text" x-webkit-speech /></br></body> </html>
*Probar con Google Chrome Tecnologas WEB M.I. Edgar Alfonso Prez Garca
BOILERPLATE
HTML5 Boilerplate nos ofrece simplificar el proceso de construccin de sitios web en HTML5 y para ello nos permite descargar una especie de template o plantilla que puede ayudar no solo a los desarrolladores web novatos, sino tambin a los ms expertos. Con H5BP podemos obtener cdigo de los mejores gurus y programadores web.
Ofrece una serie de tcnicas, templates, modelos y archivos de configuracin con las mejores prcticas de programacin.
HTML5 BOILERPLATE nos ofrece entre otras cosas Normalizacin para todos los navegadores (cross-browsing) Optimizacin de performance Optimizaciones para navegadores en dispositivos mviles Clases especficas para IE, clases no-js y js para estilos basados en capacidades del navegador Manejo y redireccin de errores http Un archivo .htaccess que permite el uso correcto de caractersticas HTML5 y carga de pgina ms rpida Un archivo style.css Un archivo reset.css Un archivo robots.txt Un archivo humans.txt
TCNICAS Y STANDARES POPULARES PARA HTML5
http://humanstxt.org/ http://www.robotstxt.org/ http://meyerweb.com/eric/tools/css/reset/
http://en.wikipedia.org/wiki/Htaccess
http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html
<REFERENCIAS>
HTML5 http://www.html5rocks.com/en/ http://html5boilerplate.com/ http://www.w3schools.com/ http://html5test.com/index.html http://html5demos.com/ http://slides.html5rocks.com/#web-sql-db http://platform.html5.org/ http://www.w3.org/TR/html5-diff/ http://es.wikipedia.org/wiki/HTML5 http://www.css3.info/ BLOGS http://blog.magnoninternational.com/html5-benefits-and-comparison/ http://www.techsutram.com/2010/09/html-vs-html5.html http://www.matuk.com/2012/01/14/2011-el-ano-de-html5/ http://www.techrepublic.com/blog/10things/10-new-html5-tags-you-need-to-know-about/3219 http://www.basewebmaster.com/html/html5-page-structure.php CANVAS 3D http://www.kevs3d.co.uk/dev/canvask3d/k3d_test.html http://www.arc.id.au/Canvas3DGraphics.html http://www.script-tutorials.com/how-to-create-3d-canvas-object-in-html5/

HTML 5

Cargado por

Copyright:

Formatos disponibles

HTML 5

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML 5

Cargado por

Copyright:

Formatos disponibles

<

M.I. Edgar Alfonso Prez Garca

PGINAS MEJOR ESTRUCTURADAS

Ejemplo : article, header, footer, nav, hgroup, aside, article

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

ESTRUCTURA GENERAL DE HTML5

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

FORMATOS DE VIDEO SOPORTADOS

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

<video id="video" src="media/homero1.mp4" autoplay controls></video> <script language="javascript"> document.getElementById("video").play(); </script>

ATRIBUTO autocomplete autofocus pattern placeholder required

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

Text</br><input type="text" required />*</br>

Url</br><input type="url" name="homepage" required />*</br>

*Probar con Google Chrome

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

context.fillStyle = "rgb(0,255,0)"; context.fillRect (25, 25, 100, 100);

*Probar con Google Chrome

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

Medida escalar con rango fijo o fraccionario

Representa el Progreso de alguna tarea.

Reconocimiento de voz como entrada

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

TCNICAS Y STANDARES POPULARES PARA HTML5

http://humanstxt.org/ http://www.robotstxt.org/ http://meyerweb.com/eric/tools/css/reset/

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

Tecnologas WEB M.I. Edgar Alfonso Prez Garca

También podría gustarte