El documento presenta una línea de tiempo que resume los hitos más importantes en el desarrollo de HTML desde 1995 hasta la actualidad. Comienza con las primeras versiones formales de HTML en la década de 1990, luego describe el surgimiento de HTML5 a partir de 2004 liderado por el WHATWG, y finalmente cómo se masificó el uso de HTML5 a partir de 2010 con Apple y Google.
1. conceptos
básicos
patricio rodríguez m.
@taller_media
domingo 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 10
domingo 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 10
domingo 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 10
domingo 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 10
domingo 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
WHATWG
domingo 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
WHATWG
domingo 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
WHATWG
domingo 27 de mayo de 2012
9. ¿QUÉ ES HTML5?
Nuevos elementos, más semánticos
Un conjunto de APIs
Retrocompatible
Una nueva filosofía
domingo 27 de mayo de 2012
10. soporte HTML5
*última beta
domingo 27 de mayo de 2012
11. aplicable
dispositivos
móviles
domingo 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
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
24. NUEVA ESTRUCTURA
<header>
Contiene la información introductoria de
cada página desde encabezados a tablas
de contenidos completas
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 principal
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 blog
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 documento
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