Introducción a HTML5

conceptos
básicos
patricio rodríguez m.
@taller_media

domingo 27 de mayo de 2012

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


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


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


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


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


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


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


¿QUÉ ES HTML5?
Nuevos elementos, más semánticos
Un conjunto de APIs
Retrocompatible
Una nueva filosofía


soporte HTML5

*última beta


aplicable

dispositivos
móviles

cambios y
mejoras


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.


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>


CODIFICACIÓN

ELEMENTO RAIZ
HTML 4.01
<html xmlns="http://www.w3.org/1999/xhtml">

HTML 5

<html lang=”en”>


CODIFICACIÓN

CODIFICACIÓN
HTML 4.01
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

HTML 5

<meta charset=”utf-8”/>


CODIFICACIÓN

LINK
HTML 4.01
<link rel=”stylesheet” type=”text/css” href=”style.css” />

HTML 5

<link rel=”stylesheet” href=”style.css”/>


menos código


MENOS CÓDIGO

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8”>
<title>foo</title>
<link rel=”stylesheet” href=”style.css”/>
</head>


alumno feliz


nueva estructura


HTML SEMÁNTICO


NUEVA ESTRUCTURA

<header>

Contiene la información introductoria de
cada página desde encabezados a tablas
de contenidos completas


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


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


NUEVA ESTRUCTURA

<section>

Representa un documento genérico o
porción de una aplicación. Actúa como DIV
separando porciones del documento


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”.


NUEVA ESTRUCTURA

<footer>

Sirve para cerrar no sólo la página sino para
culminar bloques de contenido también.


queda mas pero eso es tema para nuestra
siguiente clase...

Ahora a trabajar


preguntas??


Introducción a HTML5

Recomendados

Recomendados

Más contenido relacionado

Similar a Introducción a HTML5

Similar a Introducción a HTML5 (20)

Más de iConstruye

Más de iConstruye (20)

Último

Último (20)

Introducción a HTML5