Fredy José Sagastume
HTML5 es una combinación de nuevas
etiquetas de markup (lenguaje) HTML,
propiedades CSS3, JavaScript y algunas
tecnologías...
La familia HTML5 incluye las nuevas etiquetas y
tecnologías como:
◦ CSS3
◦ Geolocalización
◦ Almacenamiento Web (Web Stora...
 HTML4 se dio en 1998
 Los diseñadores y desarrolladores lo han
utilizado por muchos años, combinándola
con CSS y JavaSc...
 En 2004 se creó el grupo WHATWG (Web
Hypertext Application Technology Working
Group) integrado por representantes de
fab...
 Durante unos dos años y medio el W3C y el
grupo WHATWG trabajaron en paralelo y de
manera independiente
 En 2006, Tim B...
 No obstante, conviene recordar que HTML5
empezó siendo Web Applications 1.0, y eso
nos da una pista muy clara para enten...
 <article>
 <mark>
 <aside>
 <meter>
 <audio>
 <nav>
 <canvas>
 <output>
 <command>
 <progress>
 <datalist>
 <...
 <acronym>
 <applet>
 <basefont>
 <big>
 <center>
 <dir>
 <font>
 <frame>
 <frameset>
 <noframes>
 <strike>
 <...
 El DOCTYPE, también llamado DTD, sirve para indicar al
navegador a qué reglas de escritura obedece el código fuente de
l...
 La etiqueta <html> indica al navegador que se trata de un
documento Html.
 La etiqueta <html> puede incluir el atributo...
 En la etiqueta Script cambia de la siguiente manera:
<script type="text/javascript">
….
</script>
ó
<script type="text/j...
 En la etiqueta Style, usada para los css, quedaría de la
siguiente manera:
<style type="text/css">
...
</style>
Ó
<link ...
 El juego de caracteres determina la forma en
que los caracteres de un alfabeto se
convierten en bytes en un archivo info...
La etiqueta <header> es
para la información de la
cabecera (logo, texto
introductorio...)
<nav> para los menús de
navegaci...
<aside> para los
contenidos
secundarios, como
anotaciones laterales
o espacios
publicitarios
<footer> para incluir la
info...
 Antes de la llegada de HTML5 dependíamos
del uso de complementos instalables, como
Flash, QuickTime o Silverlight para p...
 Algunos atributos de la etiqueta:
 Autoplay: sirve para que el video comience
automáticamente.
 Controls: activa los c...
 Existen otras características importantes, que
pueden consultar en las referencias que se
encuentran al final, las cuale...
Las ventajas de un código fuente perfecto y por tanto de la
validación son:
 Comprensión y verificación en profundidad de...
 Los validadores Html5 (en línea) disponibles son:
 El validador de W3C:
W3C presenta un validador de código (validator....
 El validador de W3Québec
W3Québec es un organismo sin ánimo de lucro cuya labor
consiste en promover el conjunto de norm...
 El validador validator.nu
El sitio Web validator.nu proporciona, también en
estado experimental, un validador de Html5
(...
 Si quieres saber que tan eficiente es el
navegador que usas, puedes ingresar a la
siguiente dirección:
 http://www.html...
 http://msdn.microsoft.com/es-
es/ie/hh749019
 Libro: HTML5 y CSS3 Domine los estándares
de las aplicaciones Web, Luc VA...
Próxima SlideShare
Cargando en…5
×

Html5

294 visualizaciones

Publicado el

Todo sobre html5

Publicado en: Software
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
294
En SlideShare
0
De insertados
0
Número de insertados
16
Acciones
Compartido
0
Descargas
2
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Html5

  1. 1. Fredy José Sagastume
  2. 2. HTML5 es una combinación de nuevas etiquetas de markup (lenguaje) HTML, propiedades CSS3, JavaScript y algunas tecnologías complementarias de apoyo, pero que técnicamente son independientes de la propia especificación HTML5.
  3. 3. La familia HTML5 incluye las nuevas etiquetas y tecnologías como: ◦ CSS3 ◦ Geolocalización ◦ Almacenamiento Web (Web Storage) ◦ Web Workers ◦ Web Sockets Todas ellas suponen una actualización de gran potencia al conjunto de herramientas ya existente, y con ellas se pueden crear páginas web más sofisticadas y útiles.
  4. 4.  HTML4 se dio en 1998  Los diseñadores y desarrolladores lo han utilizado por muchos años, combinándola con CSS y JavaScript para mayor funcionalidad  Continuando con la evolución de la Web, se comenzó con XHTML1.0 el cual era más estricto y más valorado por los desarrolladores
  5. 5.  En 2004 se creó el grupo WHATWG (Web Hypertext Application Technology Working Group) integrado por representantes de fabricantes de navegadores y desarrolladores web Su misión consistía en crear una especificación de lenguaje HTML mejor, orientada a crear un nuevo tipo de aplicaciones web pero manteniendo la compatibilidad con las versiones en activo de los navegadores existentes.
  6. 6.  Durante unos dos años y medio el W3C y el grupo WHATWG trabajaron en paralelo y de manera independiente  En 2006, Tim Berners-Lee, creador de la World Wide Web y fundador del W3C, anunció que el W3C y WHATWG trabajarían juntos en la elaboración del estándar.  Como resultado de ello, se abandonó el desarrollo de XHTML 2.0 y la especificación HTML 4.0 se reformó con el nombre HTML5.
  7. 7.  No obstante, conviene recordar que HTML5 empezó siendo Web Applications 1.0, y eso nos da una pista muy clara para entender para qué fue diseñado realmente HTML5.  Gracias a que el W3C tomó el liderazgo para el desarrollo de HTML5, ahora los desarrolladores tenemos la garantía de que HTML5 será realmente un estándar gratuito y con las suficientes garantías de no incurrir en problemas de propiedad intelectual.
  8. 8.  <article>  <mark>  <aside>  <meter>  <audio>  <nav>  <canvas>  <output>  <command>  <progress>  <datalist>  <rp>  <details>  <rt>  <embed>  <ruby>  <figcaption>  <section>  <figure>  <source>  <footer>  <summary>  <header>  <time>  <hgroup>  <video>  <keygen>  <wbr>
  9. 9.  <acronym>  <applet>  <basefont>  <big>  <center>  <dir>  <font>  <frame>  <frameset>  <noframes>  <strike>  <tt>  <u>  <xmp>
  10. 10.  El DOCTYPE, también llamado DTD, sirve para indicar al navegador a qué reglas de escritura obedece el código fuente de la página Html o Xhtml.  En ausencia de un doctype el navegador no sabe según qué reglas debe procesar la página. Se conforma con acogerse a reglas genéricas para renderizar a toda costa la página Html.  Doctype Antes: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">  Ahora: <!DOCTYPE html>
  11. 11.  La etiqueta <html> indica al navegador que se trata de un documento Html.  La etiqueta <html> puede incluir el atributo lang="es“. Especifica que el documento está en lengua española.  Esta información es muy valiosa para los motores de búsqueda como Google y para los programas de síntesis de voz usados por personas con dificultades visuales.  Quedaría algo así: <!DOCTYPE html> <html lang="es"> ... </html>
  12. 12.  En la etiqueta Script cambia de la siguiente manera: <script type="text/javascript"> …. </script> ó <script type="text/javascript" src="archivo.js"></script> Por: <script> … </script> Ó <script src="archivo"></script>
  13. 13.  En la etiqueta Style, usada para los css, quedaría de la siguiente manera: <style type="text/css"> ... </style> Ó <link rel="stylesheet" type="text/css" href="archivo.css"> Por: <style> ... </style> Ó <link rel="stylesheet" href="archivo.css">
  14. 14.  El juego de caracteres determina la forma en que los caracteres de un alfabeto se convierten en bytes en un archivo informático (y viceversa).  Con HTML 4.0: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  Con HTML 5.0: <meta charset="iso-8859-1">
  15. 15. La etiqueta <header> es para la información de la cabecera (logo, texto introductorio...) <nav> para los menús de navegación <section> y<article> para organizar los contenidos principales,
  16. 16. <aside> para los contenidos secundarios, como anotaciones laterales o espacios publicitarios <footer> para incluir la información a pie de web (año, autor, información legal, etc.).
  17. 17.  Antes de la llegada de HTML5 dependíamos del uso de complementos instalables, como Flash, QuickTime o Silverlight para poder mostrar contenidos de vídeo.  Con HTML5 se resuelve esta necesidad ya que especifica un elemento HTML llamado <video> que funciona de manera nativa en el navegador y se integra con Javascript.
  18. 18.  Algunos atributos de la etiqueta:  Autoplay: sirve para que el video comience automáticamente.  Controls: activa los controles de reproduccion del video.  Poster: permite poner una imagen antes de reproducir el video. Una vez comience, la imagen desaparece.  Width, Height: permite definir un tamaño para el video  Ejemplo:  <video src='videos/BigBuck.mp4' controls poster='poster320.png' width='320' height='180'>
  19. 19.  Existen otras características importantes, que pueden consultar en las referencias que se encuentran al final, las cuales son mas complejas. Estas son:  Drag&Drop  Canvas  Geolocalización
  20. 20. Las ventajas de un código fuente perfecto y por tanto de la validación son:  Comprensión y verificación en profundidad de Html5 por parte de programadores iniciados (y avanzados).  Asegurar que la página se mostrará siempre de forma correcta en la mayoría de los navegadores. Una página inválida puede llevar a los navegadores a interpretarla de forma muy distinta.  Demostración de su propia capacidad y profesionalidad a la hora de realizar un código de calidad, conforme a los estándares de Html5.  Los programas de síntesis vocal y otras ayudas técnicas dirigidas a personas con problemas de accesibilidad se basan en un código válido a la hora de procesar las páginas de la red.
  21. 21.  Los validadores Html5 (en línea) disponibles son:  El validador de W3C: W3C presenta un validador de código (validator.w3c.org). Lo cual es garantía de calidad. No obstante la validación de Html5 se anuncia todavía en un estado experimental. Destaquemos:  Que está en inglés.  Que ofrece la validación de un archivo a partir de su dirección http, un archivo que esté alojado en su ordenador o código que insertemos en una zona de texto.  Que es muy potente.  Que sus notas y explicaciones son muy técnicas o a veces incluso sibilinas.  Que es "la" referencia de los profesionales.
  22. 22.  El validador de W3Québec W3Québec es un organismo sin ánimo de lucro cuya labor consiste en promover el conjunto de normas, estándares abiertos y buenas prácticas de la Web y del mundo multimedia. Proporciona un validador:  En francés.  Con la posibilidad de validar un archivo a partir de su dirección http, un archivo que esté alojado en su ordenador o código que insertemos en una zona de texto.  Las advertencias y errores proporcionados están en francés.  Le faltan explicaciones más explícitas para corregir el código enviado.  Se trata de una traducción al francés del sitio Web de W3C. No existe una versión española a día de hoy.  El validador de W3Québec (www.w3qc.org/validateur/)
  23. 23.  El validador validator.nu El sitio Web validator.nu proporciona, también en estado experimental, un validador de Html5 (html5.validator.nu/). Fue el primero en proporcionar un validador de Html5. Se puede subrayar:  Que está en inglés.  Que su interfaz es muy sencilla.  Que ofrece la posibilidad de validar un archivo a partir de su dirección http, un archivo que esté alojado en su ordenador o código que insertemos en una zona de texto.  Que parece de excelente calidad.
  24. 24.  Si quieres saber que tan eficiente es el navegador que usas, puedes ingresar a la siguiente dirección:  http://www.html5test.com/  Ésta página califica al navegador desde el cual estés accediendo.
  25. 25.  http://msdn.microsoft.com/es- es/ie/hh749019  Libro: HTML5 y CSS3 Domine los estándares de las aplicaciones Web, Luc VAN LANCKER  PC ACTUAL: http://www.pcactual.com/articulo/zona_prac tica/paso_a_paso/paso_a_paso_internet/968 4/haz_tus_primeros_pinitos_con_html5.html? utm_source=dlvr.it&utm_medium=twitter

×