conceptos                             básicos                               patricio rodríguez m.                         ...
línea de tiempo                             1995: HTML 2.0                             formalización del uso de la        ...
línea de tiempo                                  1997: HTML 3.2                                  ignorado por los desarrol...
línea de tiempo                                       1998: Proyecto Web Standars                                       Ba...
línea de tiempo                                       1999: HTML 4.0                                       Prioriza la est...
línea de tiempo                      Web Hypertext Application Technology Working Group                                   ...
línea de tiempo                                                           2007: W3C define y adopta                       ...
línea de tiempo                                                                     2010: Apple y Google                  ...
¿QUÉ ES HTML5?                       Nuevos elementos, más semánticos                       Un conjunto de APIs           ...
soporte HTML5                             *última betadomingo 27 de mayo de 2012
aplicable                             dispositivos                             móvilesdomingo 27 de mayo de 2012
cambios y   mejorasdomingo 27 de mayo de 2012
Si tenemos en cuenta el dinamismo                  de muchos sitios webs (facebook,                  twenti, etc), nos dar...
CODIFICACIÓN  !DOCTYPE    HTML 4.01    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.or...
CODIFICACIÓN  ELEMENTO RAIZ    HTML 4.01    <html xmlns="http://www.w3.org/1999/xhtml">    HTML 5    <html lang=”en”>domin...
CODIFICACIÓN  CODIFICACIÓN    HTML 4.01    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    HTML 5...
CODIFICACIÓN  LINK    HTML 4.01    <link rel=”stylesheet” type=”text/css” href=”style.css” />    HTML 5    <link rel=”styl...
menos códigodomingo 27 de mayo de 2012
MENOS CÓDIGO          <!DOCTYPE HTML>          <html>          <head>          <meta charset=”utf-8”>          <title>foo<...
alumno felizdomingo 27 de mayo de 2012
nueva estructuradomingo 27 de mayo de 2012
HTML SEMÁNTICOdomingo 27 de mayo de 2012
domingo 27 de mayo de 2012
NUEVA ESTRUCTURA  <header>  Contiene la información introductoria de  cada página desde encabezados a tablas  de contenido...
domingo 27 de mayo de 2012
domingo 27 de mayo de 2012
NUEVA ESTRUCTURA  <nav>  Reservado para la sección que contiene los  links a las demás páginas. No hace falta que  esté en...
domingo 27 de mayo de 2012
domingo 27 de mayo de 2012
NUEVA ESTRUCTURA  <article>  representa un componente de una página  que consiste en una composición autónoma  en un docum...
domingo 27 de mayo de 2012
domingo 27 de mayo de 2012
NUEVA ESTRUCTURA  <section>  Representa un documento genérico o  porción de una aplicación. Actúa como DIV  separando porc...
domingo 27 de mayo de 2012
domingo 27 de mayo de 2012
NUEVA ESTRUCTURA  <aside>  Representa contenido relacionado a la parte  principal del documento. Se lo verá  generalmente ...
domingo 27 de mayo de 2012
domingo 27 de mayo de 2012
NUEVA ESTRUCTURA  <footer>  Sirve para cerrar no sólo la página sino para  culminar bloques de contenido también.domingo 2...
domingo 27 de mayo de 2012
domingo 27 de mayo de 2012
queda mas pero eso es tema para nuestra  siguiente clase...  Ahora a trabajardomingo 27 de mayo de 2012
preguntas??domingo 27 de mayo de 2012
Upcoming SlideShare
Loading in …5
×

Introducción a HTML5

2,941 views
2,843 views

Published on

Contenidos introductorios a HTML5 formativos para la asignatura de Computación Multimedia en DuocUC

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,941
On SlideShare
0
From Embeds
0
Number of Embeds
1,639
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Introducción a HTML5

  1. 1. conceptos básicos patricio rodríguez m. @taller_mediadomingo 27 de mayo de 2012
  2. 2. línea de tiempo 1995: HTML 2.0 formalización del uso de la sintaxis y la gran mayoría de las reglas que utilizamos 90 92 94 96 98 00 02 04 06 08 10domingo 27 de mayo de 2012
  3. 3. línea de tiempo 1997: HTML 3.2 ignorado por los desarrolladores de navegadores debido a que incorporaba sus propios tags 90 92 94 96 98 00 02 04 06 08 10domingo 27 de mayo de 2012
  4. 4. línea de tiempo 1998: Proyecto Web Standars Basados en W3C se comienza a hablar de una web semántica como el estándar de navegación y desarrollo 90 92 94 96 98 00 02 04 06 08 10domingo 27 de mayo de 2012
  5. 5. línea de tiempo 1999: HTML 4.0 Prioriza la estandarización de la estructura y sintaxis, dando origen a lo que hoy conocemos como una web semántica 90 92 94 96 98 00 02 04 06 08 10domingo 27 de mayo de 2012
  6. 6. línea de tiempo Web Hypertext Application Technology Working Group es una comunidad de personas interesadas en la evolución de HTML y las tecnologías conexas. El WHATWG fue fundado por integrantes de Apple, la Fundación Mozilla y Opera Software 2004: ORIGEN DE HTML 5 90 92 94 96 98 00 02 04 06 08 10 WHATWGdomingo 27 de mayo de 2012
  7. 7. línea de tiempo 2007: W3C define y adopta HTML5 como un formato estándar 90 92 94 96 98 00 02 04 06 08 10 WHATWGdomingo 27 de mayo de 2012
  8. 8. línea de tiempo 2010: Apple y Google comienzan a masificar el uso de HTML5 90 92 94 96 98 00 02 04 06 08 10 WHATWGdomingo 27 de mayo de 2012
  9. 9. ¿QUÉ ES HTML5? Nuevos elementos, más semánticos Un conjunto de APIs Retrocompatible Una nueva filosofíadomingo 27 de mayo de 2012
  10. 10. soporte HTML5 *última betadomingo 27 de mayo de 2012
  11. 11. aplicable dispositivos móvilesdomingo 27 de mayo de 2012
  12. 12. cambios y mejorasdomingo 27 de mayo de 2012
  13. 13. Si tenemos en cuenta el dinamismo de muchos sitios webs (facebook, twenti, etc), nos daremos cuenta que su aspecto y funcionalidad son más semejantes a aplicaciones webs que a documentos.domingo 27 de mayo de 2012
  14. 14. CODIFICACIÓN !DOCTYPE HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML 5 <!DOCTYPE html>domingo 27 de mayo de 2012
  15. 15. CODIFICACIÓN ELEMENTO RAIZ HTML 4.01 <html xmlns="http://www.w3.org/1999/xhtml"> HTML 5 <html lang=”en”>domingo 27 de mayo de 2012
  16. 16. CODIFICACIÓN CODIFICACIÓN HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> HTML 5 <meta charset=”utf-8”/>domingo 27 de mayo de 2012
  17. 17. CODIFICACIÓN LINK HTML 4.01 <link rel=”stylesheet” type=”text/css” href=”style.css” /> HTML 5 <link rel=”stylesheet” href=”style.css”/>domingo 27 de mayo de 2012
  18. 18. menos códigodomingo 27 de mayo de 2012
  19. 19. MENOS CÓDIGO <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8”> <title>foo</title> <link rel=”stylesheet” href=”style.css”/> </head>domingo 27 de mayo de 2012
  20. 20. alumno felizdomingo 27 de mayo de 2012
  21. 21. nueva estructuradomingo 27 de mayo de 2012
  22. 22. HTML SEMÁNTICOdomingo 27 de mayo de 2012
  23. 23. domingo 27 de mayo de 2012
  24. 24. NUEVA ESTRUCTURA <header> Contiene la información introductoria de cada página desde encabezados a tablas de contenidos completasdomingo 27 de mayo de 2012
  25. 25. domingo 27 de mayo de 2012
  26. 26. domingo 27 de mayo de 2012
  27. 27. NUEVA ESTRUCTURA <nav> Reservado para la sección que contiene los links a las demás páginas. No hace falta que esté en cada menú, sólo en el principaldomingo 27 de mayo de 2012
  28. 28. domingo 27 de mayo de 2012
  29. 29. domingo 27 de mayo de 2012
  30. 30. NUEVA ESTRUCTURA <article> representa un componente de una página que consiste en una composición autónoma en un documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido. Podría utilizarse en los artículos de los foros, una revista o el artículo de periódico, una entrada de un blogdomingo 27 de mayo de 2012
  31. 31. domingo 27 de mayo de 2012
  32. 32. domingo 27 de mayo de 2012
  33. 33. NUEVA ESTRUCTURA <section> Representa un documento genérico o porción de una aplicación. Actúa como DIV separando porciones del documentodomingo 27 de mayo de 2012
  34. 34. domingo 27 de mayo de 2012
  35. 35. domingo 27 de mayo de 2012
  36. 36. NUEVA ESTRUCTURA <aside> Representa contenido relacionado a la parte principal del documento. Se lo verá generalmente en sidebars como contenedor de “artículos relacionados”, “lista de links”.domingo 27 de mayo de 2012
  37. 37. domingo 27 de mayo de 2012
  38. 38. domingo 27 de mayo de 2012
  39. 39. NUEVA ESTRUCTURA <footer> Sirve para cerrar no sólo la página sino para culminar bloques de contenido también.domingo 27 de mayo de 2012
  40. 40. domingo 27 de mayo de 2012
  41. 41. domingo 27 de mayo de 2012
  42. 42. queda mas pero eso es tema para nuestra siguiente clase... Ahora a trabajardomingo 27 de mayo de 2012
  43. 43. preguntas??domingo 27 de mayo de 2012

×