0
Andrés Felipe Montoya Ríos     re.vu/AndresMontoya             @montoya118
HTML5 es una combinación de nuevas etiquetas      de      markup      (lenguaje) HTML, propiedades CSS3, JavaScript y algu...
La familia HTML5 incluye las nuevas etiquetas y tecnologías como: ◦   CSS3 ◦   Geolocalización ◦   Almacenamiento Web (Web...
   HTML4 se dio en 1998   Los diseñadores y desarrolladores lo han    utilizado por muchos años, combinándola    con CSS...
   En 2004 se creó el grupo WHATWG (Web    Hypertext Application Technology Working    Group) integrado por representante...
   Durante unos dos años y medio el W3C y el    grupo WHATWG trabajaron en paralelo y de    manera independiente   En 20...
   No obstante, conviene recordar que HTML5    empezó siendo Web Applications 1.0, y eso    nos da una pista muy clara pa...
   <article>       <datalist>        <footer>   <mark>          <rp>              <summary>   <aside>         <det...
   <acronym>       <noframes>   <applet>        <strike>   <basefont>      <tt>   <big>           <u>   <center> ...
   El DOCTYPE, también llamado DTD, sirve para indicar al    navegador a qué reglas de escritura obedece el código fuente...
   La etiqueta <html> indica al navegador que se trata de un    documento Html.   La etiqueta <html> puede incluir el at...
   En la etiqueta Script cambia de la siguiente manera:<script type="text/javascript">….</script>ó<script type="text/java...
   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 arch...
La etiqueta <header> es  para la información de la  cabecera (logo, texto  introductorio...)<nav> para los menús de navega...
<aside> para los contenidos secundarios, como anotaciones laterales o espacios publicitarios<footer> para incluir la infor...
   Antes de la llegada de HTML5 dependíamos    del uso de complementos instalables, como    Flash, QuickTime o Silverligh...
   Algunos atributos de la etiqueta:   Autoplay: sirve para que el video comience    automáticamente.   Controls: activ...
   Existen otras características importantes, que    pueden consultar en las referencias que se    encuentran al final, l...
Las ventajas de un código fuente perfecto y por tanto de la  validación son:   Comprensión y verificación en profundidad ...
   Los validadores Html5 (en línea) disponibles son:   El validador de W3C:W3C presenta un validador de código (validato...
   El validador de W3QuébecW3Québec es un organismo sin ánimo de lucro cuya labor consiste en promover el conjunto de nor...
   El validador validator.nuEl 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:/...
   http://msdn.microsoft.com/es-    es/ie/hh749019   Libro: HTML5 y CSS3 Domine los estándares    de las aplicaciones We...
Upcoming SlideShare
Loading in...5
×

Todo sobre HTML5

8,513

Published on

Conceptos Fundamentales sobre HTML5:

- Definición
- Historia
- Etiquetas Nuevas
- Etiquetas Eliminadas
- Doctype
- Etiqueta HTML
- Encabezado
- La Codificación
- Nueva Organización del Sitio
- Incorporar Video
- Otras Características
- Validación de HTML5
- Soporte De Los Navegadores
- Referencias

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
  • no megusta Andres Felipe Montoya Rios,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,513
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
375
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Todo sobre HTML5"

  1. 1. Andrés Felipe Montoya Ríos re.vu/AndresMontoya @montoya118
  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 SocketsTodas 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 webSu 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>  <datalist>  <footer> <mark>  <rp>  <summary> <aside>  <details>  <header> <meter>  <rt>  <time> <audio>  <embed>  <hgroup> <nav>  <ruby>  <video> <canvas>  <figcaption>  <keygen> <output>  <section>  <wbr> <command>  <figure> <progress>  <source>
  9. 9.  <acronym>  <noframes> <applet>  <strike> <basefont>  <tt> <big>  <u> <center>  <xmp> <dir> <font> <frame> <frameset>
  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ébecW3Qué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.nuEl 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×