Your SlideShare is downloading. ×
Introducción a HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introducción a HTML5

2,617

Published on

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

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,617
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
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. conceptos básicos patricio rodríguez m. @taller_mediadomingo 27 de mayo de 2012
  • 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. 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. 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. 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. 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. 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. 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. ¿QUÉ ES HTML5? Nuevos elementos, más semánticos Un conjunto de APIs Retrocompatible Una nueva filosofíadomingo 27 de mayo de 2012
  • 10. soporte HTML5 *última betadomingo 27 de mayo de 2012
  • 11. aplicable dispositivos móvilesdomingo 27 de mayo de 2012
  • 12. cambios y mejorasdomingo 27 de mayo de 2012
  • 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. 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. 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. 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. 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. menos códigodomingo 27 de mayo de 2012
  • 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. alumno felizdomingo 27 de mayo de 2012
  • 21. nueva estructuradomingo 27 de mayo de 2012
  • 22. HTML SEMÁNTICOdomingo 27 de mayo de 2012
  • 23. domingo 27 de mayo de 2012
  • 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. domingo 27 de mayo de 2012
  • 26. domingo 27 de mayo de 2012
  • 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. domingo 27 de mayo de 2012
  • 29. domingo 27 de mayo de 2012
  • 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. domingo 27 de mayo de 2012
  • 32. domingo 27 de mayo de 2012
  • 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. domingo 27 de mayo de 2012
  • 35. domingo 27 de mayo de 2012
  • 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. domingo 27 de mayo de 2012
  • 38. domingo 27 de mayo de 2012
  • 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. domingo 27 de mayo de 2012
  • 41. domingo 27 de mayo de 2012
  • 42. queda mas pero eso es tema para nuestra siguiente clase... Ahora a trabajardomingo 27 de mayo de 2012
  • 43. preguntas??domingo 27 de mayo de 2012

×