Uploaded on

Soy HTML5 que puedo hacer por ti, es una breve introducción a lo que nos aporta HTML5 hoy en día

Soy HTML5 que puedo hacer por ti, es una breve introducción a lo que nos aporta HTML5 hoy en día

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
641
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
38
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 Autor: Samuel Ezerzer http://www.mndesign.es
  • 2. ¿Qué puedo hacer por ti?1 - ¿Qué es HTML5?2 - De HTML a HTML53 - Ventajas del HTML5 3.1 - Semántica 3.2 – Off-Line y Almacenamiento 3.4 - Acceso a dispositivos 3.5 - Conectividad 3.6 - Multimedia 3.7 - 3D, gráficos y efectos 3.8 - Rendimiento e integración4 - ¿Qué puedo hacer por ti? Autor: Samuel Ezerzer http://www.mndesign.es
  • 3. ¿Qué es HTML5?HTML5 es la 5ª revisión en el estándar que define HTML. Aunque el borrador de especificación de HTML5 está sujeto a cambios y no está finalizado.Tag, body, head, www, link... y HTML, todas son palabras o siglas que te pueden sonar raras y complicadas. Aquí te contaremos qué es HTML5, cómo funciona y por qué da tanto para hablar.Mucho se está hablando últimamente sobre esta nueva versión del conocido lenguaje HTML.Para los que aún no lo saben y siempre temieron preguntar: HTML es el lenguaje madre y básico de todos los sitios web. Se trata de un conjunto de etiquetas que sirven para dar formato a diferentes tipos de contenidos, sobre todo texto.El HTML solamente formatea y muestra contenidos, y no tiene la capacidad de interactuar con variables, bases de datos, etc.Aún los sitios web más complejos, que utilizan grandes sistema de bases de datos y realizan complejas tareas, envían al navegador (Internet Explorer, Chrome, etc.) puro código HTML.HTML5 es una nueva versión de este lenguaje universal y, si bien aún está en fase de desarrollo, ya podemos disfrutarlo en la mayoría de los navegadores. Google Chrome es pionero en soporte HTML5 y es, actualmente, el navegador que brinda mayor soporte a esta versión de HTML. Autor: Samuel Ezerzer http://www.mndesign.es
  • 4. ¿De HTML a HTML5?HTML5 es la versión 5 de HTML. Tú estarás acostumbrado a HTML4. El 5 es una nueva revisión, que tiene muchas más funcionalidades. El código HTML4 sigue siendo válido, usarás HTML5 si deseas usar dichas nuevas funcionalidades. Si quieres usarlas busca un manual de HTML versión 5 :-)DIFERENCIA ENTRE HTML Y HTML5IMPORTANTE: Si ya sabes HTML o XHTML pero no HTML5... lee bien esto...que aunque creas que ya lo sabes... es importante aclarar algunas cositas.Antes que nada... y esto es vital para comenzar Diseño Web... es entender que HTML... NO ES UN LENGUAJE DE PROGRAMACIÓN. ¿Está claro?. He oído a muchos venir a dejar un currículum y decir: Programo en HTML o hago aplicaciones HTML... ojo eh!... que con algo así, ese currículum ni se lee.EL HTML es un lenguaje de ETIQUETADO o MARCADO (de ahí Markup). ¿y esto que es?... que es una forma de diseñar con código gracias a sus "etiquetas". Autor: Samuel Ezerzer http://www.mndesign.es
  • 5. ¿De HTML a HTML5?HTML SUS INICIOS<html><head><title>HTML</title></head><body bgcolor=#ffffff cellspadding =1 size=1 cellspacing=1 border=0><table size=2 font face=verdana><tr><td><font color=#ff0000><b>M&eacute;todos</b></font></td><td><table><tr><td border=1 bgcolor=#777777><font face=verdana>B&aacute;sico</font></td><td><img></img></td></tr></table></td></tr></table></body></html> Autor: Samuel Ezerzer http://www.mndesign.es
  • 6. ¿De HTML a HTML5?HTML4.01-XHTML-Transitional-Strict-Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>HTML</title><META name="Author" content="Tomas Nogales"> <META name="Keywords" content="HTML 4.0, elementos HTML, etiquetas, tags, ejemplo, uso"><LINK title="Manual en Portugués" type="text/html" rel="alternate" hreflang="pt" href="http://manual/portug.html"></head><body><div><img src=“” /><div><p style=“background-color:#0785a; margin-left:1px; font-size:10px;”>M&eacute;todos</p><p style=“width:20px; height:30px; color:#333;”>B&aacute;sico</p></div></div></table></body></html> Autor: Samuel Ezerzer http://www.mndesign.es
  • 7. ¿Ventajas del HTML5?¿Qué nos ofrece HTML?Si bien representará una gran cantidad de mejoras, respecto a su versión anterior, éstas son las más importantes:SemánticaPáginas más comprensibles y mejor estructuradas. Hasta la llegada de HTML5, los desarrolladores hacían un uso intensivo de las etiquetas <div> dentro del código HTML para deilimitar las diferentes secciones o partes de nuestro sitio web. Con la inclusión de nuevas etiquetas dentro de HTML5, como section, article, header, footer, nav, hgroup, aside, article, etc., daremos un valor semántico añadido a la distribución del contenido para que sea fácilmente localizable desde los diferentes buscadores y pueda ser mejor entendida por los navegadores y aplicaciones que accedan a ella. Autor: Samuel Ezerzer http://www.mndesign.es
  • 8. ¿Ventajas del HTML5? Vídeo nativo sin instalaciones adicionales.La reproducción de vídeos en la web iba ligada hasta hace bien poco a la instalación de Flash en nuestro navegador. HTML5 proporciona un estándar común que permitirá la reproducción de vídeos unificando así formatos y codificaciones sin tener que instalar elementos adicionales para disfrutar de cualquier media.Cómo funciona?<video src="archivo.mp4" controls width="360" height="240"> </video>Portada del vídeo<video src="archivo.mp4" controls width="360" height="240" poster="poster.jpg"> </video>MultiFormato<video controls width="360" height="240" poster="poster.jpg"><source src="archivo.ogv" type="video/ogg" /><source src="archivo.mp4" type="video/mp4" /></video> Autor: Samuel Ezerzer http://www.mndesign.es
  • 9. ¿Ventajas del HTML5?Con Flash<video controls width="360" height="240" poster="poster.jpg"><source src="archivo.ogv" type="video/ogg" /> <source src="archivo.mp4" type="video/mp4"/><object type="application/x-shockwave-flash" width="360" height="240" data="player.swf? file=archivo.mp4"><param name="movie" value="player.swf?file=archivo.mp4" /></object> </video>Si no se desea Flash<video controls width="360" height="240" poster="poster.jpg"> <source src="archivo.ogv" type="video/ogg" /> <source src="archivo.mp4" type="video/mp4" /> <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf? file=archivo.mp4"> <param name="movie" value="player.swf?file=archivo.mp4" /> <a href="archivo.mp4">Descarga la película</a> </object> </video> Autor: Samuel Ezerzer http://www.mndesign.es
  • 10. ¿Ventajas del HTML5?Geo localización.Cada vez más presente en las redes sociales y aplicaciones móviles, la geo localización también ha sido contemplada por el estándar HTML5. A través de esta característica, las aplicaciones web pueden tener acceso a la latitud y longitud donde se encuentre el usuario que accede a un site, independientemente del sistema de geo referenciación utilizado por nuestro navegador (GPS, WiFi, 3G, etc.) Autor: Samuel Ezerzer http://www.mndesign.es
  • 11. ¿Ventajas del HTML5?Aplicaciones offline.El uso de aplicaciones web se ha enfrentado desde sus comienzos con una importante desventaja en comparación con las aplicaciones de escritorio, y era la posibilidad de estas últimas de trabajar en entornos desconectados. Además, con la utilización de dispositivos móviles, es habitual no disponer siempre de una conexión de alta velocidad de calidad para el uso de aplicaciones web. HTML5 aporta una importante mejora en este aspecto para permitir la utilización de todas las funcionalidades de las aplicaciones web “sin conexión” a través de APIs, que sincronizan sus datos cuando la conexión entre el dispositivo y la red se restablece. SessionStorage-LocalStorage (se usa, por ej., para formularios)Dibujos, animaciones y videojuegos.Con la incoporación de la etiqueta <canvas>, HTML5 abre por fin la posibilidad de representación y dibujado de formas sobre un lienzo o canvas. Esta nueva funcionalidad aparentemente complementaria abre la web al mercado del videojuego, diseño y la animación nativa, que anteriormente dependía de otras plataformas propietarias como Flash. Autor: Samuel Ezerzer http://www.mndesign.es
  • 12. HTML5Contactar:mndesign.essamuelezerzer.esLocalizatuempleo.comcreandomiempresa.com@samuelezerzer@mndesign_esEnlaces:xitrus.es/utilidades/Animacionesdesarrolloweb.comcristalab.commaestrosdelweb.comOs invito a buscar información en la web Autor: Samuel Ezerzer http://www.mndesign.es