De HTML4 a HTML5
Transcript of De HTML4 a HTML5
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 1/34
HTML5
De HTML4 a HTML5
Sergio Luján Mora
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 2/34
DISEÑO WEB
• ¿Qué es HTML5?
• El nuevo lenguaje HTML5
• Más información
Contenido
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 4/34
DISEÑO WEB
• Vídeo:
– http://www.youtube.com/watch?v=1hR7EtD6Bns
¿Qué es HTML5?
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 5/34
EL NUEVO LENGUAJE HTML5
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 8/34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 9/34
HTML5
<!DOCTYPE html>
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 10/34
<html xmlns="http://www.w3.org/1999/xhtml"lang="en" xml:lang="en">
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 11/34
HTML5
<html lang="en">
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 12/34
<meta http-equiv="Content-Type"content="text/html; charset=utf-8">
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 13/34
HTML5
<meta charset="utf-8" />
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 14/34
HTML5
• Nuevos elementos semánticos:
<section>
<nav>
<article>
<aside>
<hgroup>
<header>
<footer>
<time><mark>
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 15/34
Compatibilidad con navegadoresantiguos
/* Para que se visualicen correctamente comobloques */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section
{
display: block;
}
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 16/34
Compatibilidad con navegadoresantiguos
• Internet Explorer < 9:<script>
document.createElement("article");
document.createElement("section");document.createElement("header");
// …
</script>
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 18/34
• Vamos a analizar la estructura típica de unapágina web de un blog:
– Cómo se escribe con HTML 4, XHTML 1.0
– Cómo se puede escribir ahora con HTML5
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 19/34
<div id="header">
<h1>My Weblog</h1>
<p class="tagline">A lot of effort went into making thiseffortless.</p>
</div>
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 20/34
HTML5
<header>
<h1>My Weblog</h1>
<p class="tagline">A lot of effort went into making thiseffortless.</p>
</header>
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 21/34
HTML5
<header>
<hgroup>
<h1>My Weblog</h1>
<h2>A lot of effort went into making this effortless.</h2></hgroup>
</header>
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 22/34
<div class="entry">
<p class="post-date">October 22, 2009</p>
<h2>
<a href="#" rel="bookmark" title="link to this post"> Travel day </a>
</h2><!-- Resto de la entrada -->
<p>…</p>
</div>
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 23/34
HTML5
<article>
<header>
<p class="post-date">October 22, 2009</p>
<h1>
<a href="#" rel="bookmark" title="link to this post"> Travel day </a></h1>
</header>
<!-- Resto de la entrada -->
<p>…</p>
</article>
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 24/34
HTML5
<article>
<header>
<time datetime="2009-10-22" pubdate> October 22, 2009 </time>
<h1>
<a href="#" rel="bookmark" title="link to this post"> Travel day </a></h1>
</header>
<!-- Resto de la entrada -->
<p>…</p>
</article>
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 25/34
<div id="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li><li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
</div>
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 26/34
HTML5
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li><li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
</nav>
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 27/34
<div id="footer">
<p>§</p>
<p>© 2001–9 <a href="#">Mark Pilgrim</a></p>
</div>
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 28/34
HTML5
<footer>
<p>§</p>
<p>© 2001–9 <a href="#">Mark Pilgrim</a></p>
</footer>
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 30/34
http://www.20thingsilearned.com/es-ES
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 31/34
http://diveintohtml5.org/
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 32/34
http://www.html5rocks.com/en/
8/10/2019 De HTML4 a HTML5
http://slidepdf.com/reader/full/de-html4-a-html5 33/34
http://introducinghtml5.com/