HTML 5 | Ejemplo práctico III

Hasta donde recuerdo, nuestro código de la “Sala de Prensa”, había llegado a este punto:
<!doctype html>
<html>
<head>
<title>Prueba de html 5</title>
</head>
<body>
<header>
<h1>Aprendizaje de HTML 5</h1>
</header>
<nav> 
    <ul> 
        <li><a href=”#”>Notas</a></li> 
        <li><a href=”#”>La empresa</a></li> 
        <li><a href=”#”>Archivero</a></li> 
        <li><a href=”#”>Contacto</a></li> 
        <li class=”subscribe”><a href=”#”>Notas vía RSS</a></li> 
    </ul> 
</nav>
<section id=”principal”>
<header> 
        <h2>In nova fert animus mutatas</h2> 
    </header> 
    <p>In nova fert animus mutatas dicere formas corpora; di, coeptis (nam vos mutastis et illas) adspirate meis primaque ab origine mundi ad mea perpetuum deducite tempora carmen! Ante mare et terras et quod tegit omnia caelum unus erat toto naturae vultus in orbe, quem dixere chaos: rudis indigestaque moles nec quicquam nisi pondus iners congestaque eodem non bene iunctarum discordia semina rerum.</p>
</section>
<section> 
    <article class=”notas”> 
        <header> 
            <h2>Título de la nota</h2> 
            <p>Escrita en <time datetime=”2011-09-29T12:45:45-06:00″>Septiembre 29 de 2011</time> por <a href=”#”>Jefatura de Información</a> – <a href=”#comments”>1 comentario</a></p>
        </header> 
        <p>Hanc deus et melior litem natura diremit. nam caelo terras et terris abscidit undas et liquidum spisso secrevit ab aere caelum. quae postquam evolvit caecoque exemit acervo, dissociata locis concordi pace ligavit: ignea convexi vis et sine pondere caeli emicuit summaque locum sibi fecit in arce; proximus est aer illi levitate locoque; densior his tellus elementaque grandia traxit et pressa est gravitate sua; circumfluus umor ultima possedit solidumque coercuit orbem.</p><p>Sic ubi dispositam quisquis fuit ille deorum congeriem secuit sectamque in membra coegit, principio terram, ne non aequalis ab omni parte foret, magni speciem glomeravit in orbis. tum freta diffundi rapidisque tumescere ventis iussit et ambitae circumdare litora terrae; addidit et fontes et stagna inmensa lacusque fluminaque obliquis cinxit declivia ripis, quae, diversa locis, partim sorbentur ab ipsa, in mare perveniunt partim campoque recepta liberioris aquae pro ripis litora pulsant. iussit et extendi campos, subsidere valles, fronde tegi silvas, lapidosos surgere montes,
utque duae dextra caelum totidemque sinistra parte secant zonae, quinta est ardentior illis, sic onus inclusum numero distinxit eodem cura dei, totidemque plagae tellure premuntur. quarum quae media est, non est habitabilis aestu; nix tegit alta duas; totidem inter utramque locavit temperiemque dedit mixta cum frigore flamma.</p>
    </article>
</section>
<section id=”comentarios”> 
    <header> 
        <h3>La gente ha dicho</h3> 
    </header> 
    <article> 
        <header> 
            <a href=”#”>Octavio Paz</a> | <time datetime=”2011-09-29T13:45:45-06:00″>Septiembre 29 de 2011</time> 
        </header> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> 
    </article> 
    <article> 
        <header> 
            <a href=”#”>Javier Sicilia</a> | <time datetime=”2011-09-29T17:45:45-06:00″>Septiembre 29 de 2011</time> 
        </header> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> 
    </article> 
</section>
    <form action=”#” method=”post”> 
        <h3>Di lo que piensas</h3> 
        <p> 
            <label for=”name”>Nombre</label> 
            <input name=”name” id=”name” type=”text” required /> 
        </p> 
        <p> 
            <label for=”email”>E-mail</label> 
            <input name=”email” id=”email” type=”email” required /> 
        </p> 
        <p> 
            <label for=”website”>Website</label> 
            <input name=”website” id=”website” type=”url” /> 
        </p> 
        <p> 
            <label for=”comment”>Comentario</label> 
            <textarea name=”comment” id=”comment” required></textarea> 
        </p> 
        <p><input type=”submit” value=”Post comment” /></p> 
    </form>

Y para que esto quede bien, falta hacer un poco más de código (que ya no explicaré), pero que pueden ver aquí:
<!doctype html>
<html>
<head>
<title>Prueba de html 5</title>
</head>
<body>
<header>
<h1>Aprendizaje de HTML 5</h1>
</header>
<nav> 
    <ul> 
        <li><a href=”#”>Notas</a></li> 
        <li><a href=”#”>La empresa</a></li> 
        <li><a href=”#”>Archivero</a></li> 
        <li><a href=”#”>Contacto</a></li> 
        <li class=”subscribe”><a href=”#”>Notas vía RSS</a></li> 
    </ul> 
</nav>
<section id=”principal”>
<header> 
        <h2>In nova fert animus mutatas</h2> 
    </header> 
    <p>In nova fert animus mutatas dicere formas corpora; di, coeptis (nam vos mutastis et illas) adspirate meis primaque ab origine mundi ad mea perpetuum deducite tempora carmen! Ante mare et terras et quod tegit omnia caelum unus erat toto naturae vultus in orbe, quem dixere chaos: rudis indigestaque moles nec quicquam nisi pondus iners congestaque eodem non bene iunctarum discordia semina rerum.</p>
</section>
<section> 
    <article class=”notas”> 
        <header> 
            <h2>Título de la nota</h2> 
            <p>Escrita en <time datetime=”2011-09-29T12:45:45-06:00″>Septiembre 29 de 2011</time> por <a href=”#”>Jefatura de Información</a> – <a href=”#comments”>1 comentario</a></p>
        </header> 
        <p>Hanc deus et melior litem natura diremit. nam caelo terras et terris abscidit undas et liquidum spisso secrevit ab aere caelum. quae postquam evolvit caecoque exemit acervo, dissociata locis concordi pace ligavit: ignea convexi vis et sine pondere caeli emicuit summaque locum sibi fecit in arce; proximus est aer illi levitate locoque; densior his tellus elementaque grandia traxit et pressa est gravitate sua; circumfluus umor ultima possedit solidumque coercuit orbem.</p><p>Sic ubi dispositam quisquis fuit ille deorum congeriem secuit sectamque in membra coegit, principio terram, ne non aequalis ab omni parte foret, magni speciem glomeravit in orbis. tum freta diffundi rapidisque tumescere ventis iussit et ambitae circumdare litora terrae; addidit et fontes et stagna inmensa lacusque fluminaque obliquis cinxit declivia ripis, quae, diversa locis, partim sorbentur ab ipsa, in mare perveniunt partim campoque recepta liberioris aquae pro ripis litora pulsant. iussit et extendi campos, subsidere valles, fronde tegi silvas, lapidosos surgere montes,
utque duae dextra caelum totidemque sinistra parte secant zonae, quinta est ardentior illis, sic onus inclusum numero distinxit eodem cura dei, totidemque plagae tellure premuntur. quarum quae media est, non est habitabilis aestu; nix tegit alta duas; totidem inter utramque locavit temperiemque dedit mixta cum frigore flamma.</p>
    </article>
</section>
<section id=”comentarios”> 
    <header> 
        <h3>La gente ha dicho</h3> 
    </header> 
    <article> 
        <header> 
            <a href=”#”>Octavio Paz</a> | <time datetime=”2011-09-29T13:45:45-06:00″>Septiembre 29 de 2011</time> 
        </header> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> 
    </article> 
    <article> 
        <header> 
            <a href=”#”>Javier Sicilia</a> | <time datetime=”2011-09-29T17:45:45-06:00″>Septiembre 29 de 2011</time> 
        </header> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> 
    </article> 
</section>
    <form action=”#” method=”post”> 
        <h3>Di lo que piensas</h3> 
        <p> 
            <label for=”name”>Nombre</label> 
            <input name=”name” id=”name” type=”text” required /> 
        </p> 
        <p> 
            <label for=”email”>E-mail</label> 
            <input name=”email” id=”email” type=”email” required /> 
        </p> 
        <p> 
            <label for=”website”>Website</label> 
            <input name=”website” id=”website” type=”url” /> 
        </p> 
        <p> 
            <label for=”comment”>Comentario</label> 
            <textarea name=”comment” id=”comment” required></textarea> 
        </p> 
        <p><input type=”submit” value=”Post comment” /></p> 
    </form>
<section>
    <header>
        <h3>Temas</h3>
    </header>
        <ul>
            <li><a href=”#”>Lorem ipsum dolor</a></li>
            <li><a href=”#”>Sit amet consectetur</a></li>
            <li><a href=”#”>Adipisicing elit sed</a></li>
            <li><a href=”#”>Do eiusmod tempor</a></li>
            <li><a href=”#”>Incididunt ut labore</a></li>
        </ul>
</section>
<aside>
<section>
    <header>
        <h3>Histórico</h3>
    </header>
        <ul>
            <li><a href=”#”>Marzo 2011</a></li>
            <li><a href=”#”>Abril 2011</a></li>
            <li><a href=”#”>Mayo 2011</a></li>
            <li><a href=”#”>Junio 2011</a></li>
            <li><a href=”#”>Julio 2011</a></li>
            <li><a href=”#”>Agosto 2011</a></li>
            <li><a href=”#”>Septiembre 2011</a></li>
        </ul>
</section>
</aside>
<footer>
    <div>
        <section id=”nosotros”>
            <header>
                <h3>Nosotros</h3>
                </header>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <a href=”#”>laboris nisi ut aliquip</a> ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
        <section id=”similares”>
            <header>
                <h3>Ligas de interés</h3>
            </header>
                <ul>
                    <li><a href=”#”>Deserunt</a></li>
                    <li><a href=”#”>Incididunt</a></li>

                    <li><a href=”#”>Labore</a></li>
                    <li><a href=”#”>Officia</a></li>
                    <li><a href=”#”>Tempor</a></li>
                </ul>
        </section>
        <section id=”popular”>
            <header>

                <h3>Lo más visto</h3>
            </header>
                <ul>
                    <li><a href=”#”>Laboris nisi ut aliquip</a></li>
                    <li><a href=”#”>Lorem ipsum dolor sit amet</a></li>
                    <li><a href=”#”>Consectetur adipisicing</a></li>
                    <li><a href=”#”>Duis aute irure dolor</a></li>
                    <li><a href=”#”>Excepteur sint occaecat</a></li>
                    <li><a href=”#”>Reprehenderit in voluptate</a></li>
                    <li><a href=”#”>Officia deserunt mollit</a></li>
                    <li><a href=”#”>Lorem ipsum dolor sit amet</a></li>
                </ul>
            </section>
        </div>

    </footer>
</body>
</html>

Y acá, lo pueden ver como queda en el navegador (en tres partes, porque no puedo desplegar todo):

Y ya es hora de entrar en materia CSS3…
Como tod@s ustedes saben, CSS 3, al igual que sus antecesores, se basa en los principios conocidos de estilos y selectores. El punto es que la nueva norma, añade muchas características nuevas (en cualquier sitio, como este, pueden tener la referencia completa), incluyendo los nuevos selectores, pseudo-clases y propiedades. El uso de estas nuevas características hace más fácil el diseño de sitios y páginas web. Basta de choros y veamos código.
Pero eso será en otra entrada. Por ahora, me dedico yo también a aprender.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *