Juguemos a Diagramar 1

Rafael · #1 (**permalink**) 17/02/2012, 17:23

Pues este es el primer ejercicio. Las instrucciones de esta actividad están aquí
Así que ¡comenzamos!

SCY-FOX · #2 (**permalink**) 17/02/2012, 17:53

Cita:

Iniciado por Rafael

Pues este es el primer ejercicio. Las instrucciones de esta actividad están aquí
Así que ¡comenzamos!

<header>
<h1>Le Logo</h1>
<nav>Menú</nav>
</header>

<section>
<h1>Las flores más lindas</h1>
<p>Texto y texto</p>
<div>Fotos</div>
</section>

<section>
<aside>Ad1</aside>
<aside>Ad2</aside>
<aside>Ad3</aside>
</section>

<footer>
<p>Tel.</p>
<aside>F T</aside>
</footer>

Ésa es mi idea, aunque no me convence la segunda sección. Podría ser un aside con varios divs dentro de Section "1". ¿Qué dicen?

#3 (**permalink**) 17/02/2012, 18:56

HTML5 propone ser más semántico, asi que hago uso de las etiquetas article, figure y hgroup (además de las ya anteriormente mencionadas).

Código HTML:

Ver original<header>
    <hgroup>
        <h1>Le Logo</h1>
    </hgroup>
    <nav>Menú</nav>
</header>
 
<article>
    <hgroup>
        <h1>Las flores más lindas</h1>
    </hgroup>
    <p>Texto y texto</p>
</article>
 
<figure>Foto</figure>
 
<aside>
    <article>Anuncio 1</article>
    <article>Anuncio 2</article>
    <article>Anuncio 3</article>
</aside>
 
<footer>
    <p>Tel</p>
    <p>Social</p>
</footer>

SCY-FOX · #4 (**permalink**) 17/02/2012, 21:07

Hola.

No será demasiados niveles para tan poco contenido, al usar hgroup??

Si fueran varias lineas de código encuentro que es ideal, pero solo para un h1 es como demasiado, creo yo.

#5 (**permalink**) 18/02/2012, 02:45

Pues acá es cuestión de semántica, ya que por SEO no se es permitido tener mas de un h1 por documento, pero muchas veces necesitamos mas h1, es aquí donde entra el hgroup, permite tener mas de un h1 por documento sin afectar el SEO de la página.

ryugen · #6 (**permalink**) 18/02/2012, 08:33

Código HTML:

Ver original<body>
    <header>
        <h1><img src="http://www.forosdelweb.com/f175/juguemos-diagramar-1-a-976615/..." alt="LeLogo" /></h1>
        <nav title="navigation">
            <menu>
                <li><a href="#">Items</a></li>
            </menu>
        </nav>
    </header>
    <div class="content" role="main">
        <article>
            <h2>¡Las Flores más Bonitas!</h2>
            <p>Contenido del articulo</p>
            <figure>
                <img src="http://www.forosdelweb.com/f175/juguemos-diagramar-1-a-976615/..." alt="" title="" />
            </figure>
            <aside>
                <h4>Algunas publicidades</h4>
                <div class="ad"></div>
            </aside>
        </article>
    </div>
    <footer>
        <div class="tel-contact">
        </div>
        <div class="social-contact">
            <a href="fb"><img src="fb" alt="My Facebook profile" title="" /></a>
            <a href="tw"><img src="tw" alt="Follome on Twitter" title="" /></a>
        </div>
    </footer>
</body>

alivan · #7 (**permalink**) 18/02/2012, 09:30

Yo opto por una estructura así:

Código HTML:

Ver original<header>
    <h1>LeLogo</h1>
    <nav>
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Productos</a></li>
            <li><a href="#">Servicio</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
</header>
 
<section>
    <article>
        <h2>¡Las flores más bonitas!</h2>
        <p>Texto blablabla</p>
    </article>
    <figure>
        <img src="img/flowers.jpg" alt="Image" />
    </figure>
</section>
 
<aside>
    <div>
        <h3>Anuncio</h3>
        <p>Contenido anuncio</p>
    </div>
    <div>
        <h3>Anuncio</h3>
        <p>Contenido anuncio</p>
    </div>
    <div>
        <h3>Anuncio</h3>
        <p>Contenido anuncio</p>
    </div>
</aside>
 
<footer>
    <p>Tel. 555-55-55</p>
    <aside>
        <a href="http://twitter.com"><img src="img/twitter.png" alt="Twitter" /></a>
        <a href="http://facebook.com"><img src="img/facebook.png" alt="Facebook" /></a>
    </aside>
</footer>

#8 (**permalink**) 19/02/2012, 08:15

Yo sigo optando por mi propuesta, les explico

HTML5 propone de una forma ser más semántico y por otro lado, dejar el uso de div's que declaren role="main" o [COLOR="rgb(65, 105, 225)"]id="header"[/COLOR], etc.

Los div esta propuestos a usarse como un objeto útil en diseño, no para establecer estructura.

Código HTML:

Ver original<header><!-- cabecera -->
    <hgroup><!-- de esta forma podras tener mas de un h1 -->
        <h1>Le Logo</h1><!-- obbviamente la tecnica que uses para tu logo, pero por cuestiones de accesibilidad seria recomendable usar solo texto -->
    </hgroup>
    <nav>Menú</nav><!-- menu, obviamente con listas desordenadas, y obviamente dentro de un ul cada list -->
</header>
 
<article><!-- siendo el unico tema, no hace falta declarar seccion, article lo hace por si solo -->
    <hgroup><!-- aqui esta el otro h1 -->
        <h1>Las flores más lindas</h1>
    </hgroup>
    <p>Texto y texto</p>
</article>
 
<figure>Foto</figure><!-- igualmente la unica fgura en el tema -->
 
<aside><!-- contenido que no tine que ver con el articulo principal -->
    <article>Anuncio 1</article><!-- cada uno es un articulo -->
    <article>Anuncio 2</article>
    <article>Anuncio 3</article>
</aside>
 
<footer><!-- footer, seria ideal que usaras ntd-child con el css -->
    <p>Tel</p>
    <p>Social</p>
</footer>

leonidasesteban · #9 (**permalink**) 19/02/2012, 18:51

Cita:

<header>
<h2>Le Logo</h2>
<nav>Menú</nav>
</header>

<article>
<h1>Las flores más lindas</h1>
<p>Texto y texto</p>
</article>

<figure><img src="Foto" alt="Las flores más lindas"></figure>

<aside>
<div>Anuncio 1</div>
<div>Anuncio 2</div>
<div>Anuncio 3</div>
</aside>

<footer>
<p><a href="tel:+55 555 555"></a>(55) 555 555</p>
<aside>Social</aside>
</footer>

ryugen · #10 (**permalink**) 20/02/2012, 05:53

Cita:

Iniciado por danneg

Yo sigo optando por mi propuesta, les explico

HTML5 propone de una forma ser más semántico y por otro lado, dejar el uso de div's que declaren role="main" o [COLOR="rgb(65, 105, 225)"]id="header"[/COLOR], etc.

El atributo WAI-ARIA role="main" sigue siendo necesario porque en HTML5 no existe ninguna tag para representar al contenido principal del sitio.
Desde el punto de vista de accesibilidad, este rol le permitirá a los navegadores y a las tecnologías de apoyo implementar mecanismo para ir (enlace "skip to main content") al contenido principal.

Rafael · #11 (**permalink**) 20/02/2012, 10:53

Están saliendo cosas muy interesantes.
Quiero comentar una cosa. No creo que haya una manera correcta o incorrecta, sino justamente estamos experimentando colectivamente.

memoadian · #12 (**permalink**) 20/02/2012, 14:00

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Las flores más bonitas</title>
    </head>
    <body>
        <header>
            <h2>LeLogo</h2>
        <header>
        <nav>
            <ul>
                <li>Inicio</li>
                <li>Productos</li>
                <li>Servicios</li>
                <li>Contacto</li>
            </ul>
        </nav>
        <section>
            <article>
                <header>
                    <h1>¡Las flores más Bonitas!</h1>
                </header>
                <section>
                    <span>Lorem ipsum amet</span>
                    <figure>imágen flores</figure>
                </section>
            </article>
            <aside>
                <figure>AD1</figure>
                <figure>AD2</figure>
                <figure>AD3</figure>
            </aside>
        </section>
        <footer>
            <span>TEL</span>
            <figure>F</figure>
            <figure>T</figure>
        </footer>
    </body>
</html>

opzina · #13 (**permalink**) 20/02/2012, 17:42

Código HTML:

Ver original<section role="index">
 
    <header>
 
        <h1>
            <a href="#">LeLogo</a>
        </h1>
 
        <nav>
            <ul>
                <li><a href="#">INICIO</a></li>
                <li><a href="#">PRODUCTOS</a></li>
                <li><a href="#">SERVICIOS</a></li>
                <li><a href="#">CONTACTO</a></li>
            </ul>
        </nav>
    </header>
 
    <section class="content">
        <article>
            <header>
                <h2>Las flores más bonitas</h2>
            </header>
 
            <p>Párrafo 1</p>
            <p>Párrafo 2</p>
            <p>Párrafo n...</p>
 
            <figure>
                <img alt="" src="" />
            </figure>
        </article>
 
        <section class="adv">
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </section>
    </section>
 
    <footer>
        <ul>
            <li>5555-5555</li>
            <li><a href="facebook">Facebook</a></li>
            <li><a href="facebook">Facebook</a></li>
        </ul>
    </footer>
 
</section>

#14 (**permalink**) 24/02/2012, 23:16

Cita:

Iniciado por ryugen

El atributo WAI-ARIA role="main" sigue siendo necesario porque en HTML5 no existe ninguna tag para representar al contenido principal del sitio.
Desde el punto de vista de accesibilidad, este rol le permitirá a los navegadores y a las tecnologías de apoyo implementar mecanismo para ir (enlace "skip to main content") al contenido principal.

Entiendo lo que dices, este método es muy utilizado en varias librerias, por ejemplo jQuery Mobil, el cual usa el atributo HTML5 data.

Código HTML:

Ver original<div data-role="main"></div>

Esa seria la forma correcta, ya que seria un atributo valido, y no te hace crearte tus propios atributos.

Por otro lado, este ejemplo solo representa un articulo, lo que por lógica significa que el articulo en si seria el "main", no haría falta declararlo, seria como decirle que es un negro oscuro.

daPhyre · #15 (**permalink**) 27/02/2012, 12:55

Cita:

Iniciado por danneg

Pues acá es cuestión de semántica, ya que por SEO no se es permitido tener mas de un h1 por documento, pero muchas veces necesitamos mas h1, es aquí donde entra el hgroup, permite tener mas de un h1 por documento sin afectar el SEO de la página.

Creí que para usar más de un H1 se utilizaba como divisor el <section>, como en este ejemplo: http://www.w3.org/TR/html5/sections....ection-element

Hablando del mismo. Ahí muestra que <section> funciona para dividir varias partes de un mismo <article>, y veo que en los ejemplos se envuelven varias etiquetas (incluyendo el article) en un solo section... Mera curiosidad, ¿Qué está bien y que mal?

#16 (**permalink**) 27/02/2012, 13:08

Cita:

Notice how the use of section means that the author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.

- http://www.w3.org/TR/html5/sections....ection-element

Bien, en el primer ejemplo de esa página muestran los h1 dentro de hgroup. En el segundo ejemplo es algo particular, pues creo que seria correcto, asi lo explica el texto que cité

Por otra parte, regresando a la semántica, el section es para ofrecer una sección (dah!) ... este no tiene como objetivo reemplazar al div, ya que el div se debe seguir utilizando como apoyo en diseño grafico (como los layers de photoshop). En el ejemplo de esta imagen no habria por que utilizar un section, al menos eso creo yo.

daPhyre · #17 (**permalink**) 27/02/2012, 13:10

Aquí mi contribución:

Código HTML:

<body>
<header>
	<h1>LeLogo</h1>
	<nav><ul>
		<li>Inicio</li>
		<li>Productos</li>
		<li>Servicios</li>
		<li>Contacto</li>
	</ul></nav>
</header>

<article>
	<h2>¡Las flores más bonitas!</h2>
	<p>Lorem ipsum...</p>
	<figure><img src="flores.jpg" alt="flores" /></figure>
</article>

<aside>
	<nav><ul>
		<li>Anuncio</li>
		<li>Anuncio</li>
		<li>Anuncio</li>
	</ul></nav>
</aside>

<footer>
	<p>Tel. 5555-5555</p>
	<nav><ul>
		<li><img src="twitter.png" alt="Twitter" /></li>
		<li><img src="facebook.png" alt="Facebook" /></li>
	</ul></nav>
</footer>
</body>

En cuanto a la imagen del logo, considero lo mejor sustituirla en el H1 via CSS. Creo que aun sigue vigente este método para buscadores y navegadores solo-texto, ¿No?.

daPhyre · #18 (**permalink**) 27/02/2012, 13:19

Cita:

Iniciado por danneg

Bien, en el primer ejemplo de esa página muestran los h1 dentro de hgroup. En el segundo ejemplo es algo particular, pues creo que seria correcto, asi lo explica el texto que cité.

Si, el segundo ejemplo es bastante extraño, diría yo también

Pero si ves con más cuidado el primer ejemplo, el texto tiene tres h1, y solo el primero usa hgroup, ya que está agrupando dos headers (h1 y h2), según me han dado a entender sirve para agrupar varios header.

<aside>(Pregunta sobre eso: ¿El slogan de una empresa debe ir en un <h2> dentro de un <hgroup>? Así lo he visto siempre en los ejemplos, pero yo siempre he usado un <p> para el slogan... ¿Eso significa que los estoy haciendo semánticamente incorrecto? ¿Debo adoptar este modo de aquí en adelante? )</aside>

#19 (**permalink**) 27/02/2012, 15:07

Que curioso, no me había percatado de eso.

Lo que comentas sobre el slogan, seria semánticamente incorrecto ponerlo dentro de un h2, ya que no es un titulo. Yo igual lo pongo dentro de un p.

daPhyre · #20 (**permalink**) 27/02/2012, 15:25

Cierto. Encontré el ejemplo en w3schools ( http://www.w3schools.com/html5/tag_hgroup.asp ), pero parece estar incorrecto. Ya he visto ejemplos en otras páginas (incluyendo la de la W3C) y no usan el h2 como slogan, si no más bien como una continuación menos importante del título (o subtítulo).

Será entonces que w3schools tiene mal so ejemplo

. Mientras no me aseguren lo opuesto, seguiré usando entonces <p> para el slogan

zanguanga · #21 (**permalink**) 28/02/2012, 10:26

Cita:

Iniciado por daPhyre

Cierto. Encontré el ejemplo en w3schools ( http://www.w3schools.com/html5/tag_hgroup.asp ), pero parece estar incorrecto. Ya he visto ejemplos en otras páginas (incluyendo la de la W3C) y no usan el h2 como slogan, si no más bien como una continuación menos importante del título (o subtítulo).

Será entonces que w3schools tiene mal so ejemplo

. Mientras no me aseguren lo opuesto, seguiré usando entonces <p> para el slogan

Desde mi modesto punto de vista no es un error

Código:

<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>

El slogan forma parte de la marca, la etiqueta h2 sirve no tanto para indicar que se trata de un título (para eso tenemos class="title", por ejemplo) como para indicar el nivel de importancia que tiene dentro de la jerarquía de la información.

Digamos que el slogan, pues, actua como descripción de la marca o algo así... en cualquier caso, su importancia sería mayor que la de un párrafo.

Por supuesto, es solo una opinión, pero le encuentro sentido a hacerlo de esa manera, pues forma parte del "branding".

Incluso podría ponerse:

Código:

<h2 id="site-description">

agrelsoft · #22 (**permalink**) 04/03/2012, 20:39

Pues esto de ir abusando poco a poco de las propiedades, aún cuando no se oficiliza el html5, no tardará en generarnos nuevos quebraderos de cabeza a posterior. Hagamos las cosas como bien sabemos desde html4, utilizando las nuevas bondades que nos traerá html5 sin llegar a abusar.
El H1 es 1 por página así lo aprendimos en html4 y así deberíamos utilizarlo en html5, sino para cuando se oficialice esto google ya estará castigando el uso de ciertas propiedades. Hagamos un uso eficiente de la web.
Saludos.

#23 (**permalink**) 04/03/2012, 21:28

Si seguimos haciendo las cosas como en el antaño HTML4 pues, HTML5 no tendria mucho sentido

chrisdgallego · #24 (**permalink**) 13/04/2012, 10:40

Usar:
<footer>
<aside>
<p>tel:65464564</p>
<nav>
<ul>
<li>F</li>
<li>T</li>
</ul>
</nav>
</aside>
</footer>

¿Es correcto?

(disculpen pero no veo las opciones para formatear código en las respuestas de este hilo)

Carlangueitor · #25 (**permalink**) 13/04/2012, 12:11

Puedes poner código entre las etiquetas Highlight (en el editor del foro puedes seleccionar el lenguaje)

[HIGHLIGHT="HTML"][/HIGHLIGHT]

Saludos

nemesis866 · #26 (**permalink**) 16/04/2012, 12:51

Muy buenos puntos de vista, y aqui va el mio por mi parte se que el hgroup sirve para agrupar varios titulos con su respectivo grado de importancia, es decir un h1, un h2 y asi segun se requiera, pero todo esto dentro de las etiquetas header (refiriendose a la cabecera del documento), con esto, nos permitimos usar mas de un h1 en la pagina (siendo que actualmente solo se puede usar un h1 por pagina, si hay 2 o mas h1 pierde su importancia)

Código HTML:

Ver original<header>
<hgroup>
<h1>Titulo del sitio</h1>
<h2>informacion extra pero ligada al titulo</h2>
</hgroup>
</header>

Y en cuanto a las etiquetas section, estas como su nombre en ingles lo indican se utilizan para separar secciones de una pagina, el area del artiuclo debe ir en un section, el area de los comentarios en otro section, y viendo el ejemplo, no veo la necesidad de utilizar esta etiqueta ya que solo cuenta con el articulo.

Otra cosa que note es que utilizan varias etiquetas nav, cuando solo se deben usar una sola ves, ya que dentro de estas etiquetas se encuentra el menu principal de la pagina.

Saludos.

ryugen · #27 (**permalink**) 16/04/2012, 13:27

Cita:

Iniciado por nemesis866

Otra cosa que note es que utilizan varias etiquetas nav, cuando solo se deben usar una sola ves, ya que dentro de estas etiquetas se encuentra el menu principal de la pagina.

Saludos.

Esto que comentas es erroneo ya que de acuerdo a la página de la spec de HTML5 (ver: http://www.whatwg.org/specs/web-apps...he-nav-element ), contiene ejemplo de páginas con más de un elemento NAV.

Lo que comprendo es que un NAV puede utilizarse para definir la navegacion dentro de una sección.

PD: Para cuando el próximo "Juguemos a diagramar"?

nemesis866 · #28 (**permalink**) 17/04/2012, 10:02

Cita:

Iniciado por ryugen

Esto que comentas es erroneo ya que de acuerdo a la página de la spec de HTML5 (ver: http://www.whatwg.org/specs/web-apps...he-nav-element ), contiene ejemplo de páginas con más de un elemento NAV.

Lo que comprendo es que un NAV puede utilizarse para definir la navegacion dentro de una sección.

Lei y entiendo que se pueden utilizar varios nav, por ejemplo uno para la navegación primaria y otro para la navegacion secundario, pero se recomienda utilizar un solo nav para este fin y los demas bloques de navegacion utilizar otras tecnicas como un div, gracias por aclarar este punto.

ryugen · #29 (**permalink**) 17/04/2012, 10:28

Cita:

Iniciado por nemesis866

Lei y entiendo que se pueden utilizar varios nav, por ejemplo uno para la navegación primaria y otro para la navegacion secundario, pero se recomienda utilizar un solo nav para este fin y los demas bloques de navegacion utilizar otras tecnicas como un div, gracias por aclarar este punto.

Estimado nemesis podrías aclarar (principalmente con alguna referencia) lo siguiente:

Quien lo recomienda? Por que lo recomienda? Como lo recomienda?

Lo comento porque nunca he leído recomendaciones de ese tipo. Gracias

Una página que suelo usar de referencia en estos temas es HTML5 Doctor, aqui esta su post sobre nav http://html5doctor.com/nav-element/

En ese blog los autores dan su opinión, que podría discutirse sin embargo, yo la considero importante, ya que convergen varios importantes exponentes del desarrollo web (Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson, Remy Sharp, Tom Leadbetter, y Oli Studholme.).

kahlito · #30 (**permalink**) 07/11/2012, 03:33

Hola.

Viendo las buenas aportaciones subidas retomo este ejercicio ya que estoy empezando con html5 para practicar y diagramar desde ya:

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Las flores más bonitas</title>
    </head>
<body>
    <header>
        <!--<hgroup>-->
            <h1><img src="logo.png" alt="Lelogo" title="Lelogo"></h1>
        <!--</hgroup>-->
        <nav>
            <ul>
                <li>Inicio</li>
                <li>Productos</li>
                <li>Servicios</li>
                <li>Contacto</li>
            </ul>
        </nav>
    </header>
    <article>
        <h2>Las Flores más bonitas</h2>
        <p>Texto texto texto</p>
        <figure>
            <img src="foto.png" alt="Tulipanes" title="Tulipanes">
        </figure>
    </article>
    <aside>
        <article>Anuncio 1</article>
        <article>Anuncio 2</article>
        <article>Anuncio 3</article>
    </aside>
    <footer>
        <p>Tel 5555-5555</p>
        <p>Facebook</p>
        <p>Twitter</p>
    </footer>
 
</body>

Me he guiado primero por lo que he aprendido en estos días y luego sobre todo en otras aportaciones subidas por los compañeros donde incluso creo que he aprendido alguna que otra cosa nueva, aun asi también me han dejado nuevas dudas. ¿Muchos errores?

Saludos.