Foros del web, comunidad de entusiastas web

Rafael · 20/02/2012, 13:46

Como antes, las instruicciones están aquí.

Pues como va, acá pongo un ejercicio menos obvio quizá.
Algunos notarán un parecido a cierta página de Js. Zerokilled me la propuso como candidato.

Y los invito a que comenten un poco de su código, ¡por que creen ustedes que podría ser de esa manera!

Jime25 · 20/02/2012, 14:57

Si no me equivoco, podría ser así:

Código HTML:

Ver originalCopiar<header> 
    <hgroup>
        <h1>Logo</h1> 
        <h2>Descripción</h2>
    </hgroup> 
</header>
 
<nav>
    <ul>
        <li>Descargar</li> 
        <li>Docs</li> 
    </ul>
</nav>
 
<article>
    <section>Empresa X</section>
    <section>Empresa Y</section>
    <section>Empresa Z</section>
</article>
 
<article>
    Un ejemplo del uso... 
</article>
 
<article> 
    <nav>
        <ul>
            <li>Acerca de:</li> 
            <li>Descarga:</li> 
            <li>Documentación:</li> 
            <li>Foros:</li> 
            <li>Contacto:</li> 
        </ul>
    </nav>
</article>
 
<footer>
    <nav>
        <ul>
            <li>Acerca de</li> 
            <li>Descarga</li> 
            <li>Documentación</li> 
            <li>Foros</li> 
            <li>Contacto</li> 
        </ul>
    </nav>
</footer>

carlos_belisario · 20/02/2012, 15:26

Código HTML:

Ver originalCopiar<!DOCTYPE html>
<html>
    <head>  
        <meta charset="utf8">
        <title>LELOGO</title>
    </head>
    <body>
        <header>
            <figure>
                <img src="logo" alt="logo" />
            </figure>
            <hgroup>
                <h1>LELOGO</h1>
                <h2>Site-Description</h2>
            </hgroup>
            <nav>
                <ul>
                    <li><a href="#">Descargar</a></li>
                    <li><a href="#">Docs</a></li>
                </ul>               
            </nav>
        </header>
        <section>
            <hgroup>
                <h1>LELOGO en la Industria</h1>
            </hgroup>
                <article>
                    <hgroup>
                        <h1>Empresa X</h1>
                    </hgroup>
                    <p>parrafo de x</p>
                </article>
                <article>
                    <hgroup>
                        <h1>Empresa Y</h1>
                    </hgroup>
                    <p>parrafo de Y</p>
                </article>
                <article>
                    <hgroup>
                        <h1>Empresa Z</h1>
                    </hgroup>
                    <p>parrafo de Z</p>
                </article>
        </section>
        <section>
            <hgroup>
                <h1>Ejemplo de Uso</h1>
            </hgroup>
            <p>text del ejemplo</p>
        </section>
        <aside>
            <ul>
                <li><h3>Acerca de:</h3></li>
                <li>text</li>
            </ul>
            <ul>
                <li><h3>Descarga:</h3></li>
                <li>text</li>
            </ul>
            <ul>
                <li><h3>Documentación:</h3></li>
                <li>text</li>
            </ul>
            <ul>
                <li><h3>Foro:</h3></li>
                <li>text</li>
            </ul>
                        <ul>
                <li><h3>Contacto:</h3></li>
                <li>text</li>
            </ul>
        </aside>
        <footer>
            <nav>
                <ul>
                    <li><a href="#">Acerca de</a></li>
                    <li><a href="#">Descargas</a></li>
                    <li><a href="#">Documentación</a></li>
                    <li><a href="#">Foro</a></li>
                    <li><a href="#">Contacto</a></li>
                </ul>               
            </nav>  
        </footer>
    
    </body>
</html>

mi aporte, sugerencias bien recibidas, saludos

mborja00 · 20/02/2012, 15:46

¿Existe algo como una guía para diagramación web ?
He visto tantos modos diferentes, cientos de miles de templates .... yo soy programador no diseñador ... ¿ pero es necesaria tanta especialización para que una pinche página web se vea ordenada y que el usuario pueda encontrar lo que quiere con el menor número de clicks posible? Digo, yo solo quiero que mi site se vea ordenado no concursar para obtener el mejor "concepto".

emprear · 20/02/2012, 23:20

@mborja00
Antes que nada, bienvenido a Foros de Web
Vos, como programador, crees que es lo mismo escribir 20 líneas de código para conseguir un resultado, que conseguir el mismo resultado con 5 líneas?

Aquí no cambia mucho la cosa, la nueva semántica que propone html5 (sin entrar en el análisis de características mucho más avanzadas, y por que el momento pueden considerarse como experimentales), simplifica la relación estructura-contenido.

Un código html5 optimizado y respetuoso de los estándares, va a simplificar la interpretación del mismo por toda una serie de nuevos dispositivos y sistemas operativos, que son en definitiva los que vinculan a nuestro trabajo con el ciente/usuario, te aseguro, que como se presenta el panorama, es un desafío monumental.

Es como si hablásemos de las normas ISO, vos podés ir por la calle y comprar en cualquier esquina un adaptador de corriente, seguramente por menos precio que en un local serio, el hecho de que al llegar a tu casa, lo primero que necesites sea un cuchillo para separarle las patitas al adaptador para que entre en el tomacorriente de la pared, es sólo una anécdota, total, funciona.

Yo pretendo que mi código entre lo más suavemente posible en la mayor cantidad de destinatarios posibles.

Y que conste, que la palabra "concurso" la instalaste vos en forma caprichosa, el autor del post fue muy claro, nos invitó a "jugar" a diagramar, y esto del juego obedece simplemente a que como html5 aún está en desarrollo y es una experiencia relativamente nueva para muchos, comparar nuestros trabajos, y el intercambio de ideas que de ello deriva, es una actividad ideal para aprender y mejorar.

Como consejo final te diría que sigas en la programación, que es lo tuyo, y nos dejes a los diseñadores (aunque reconozco que programo bastante también), con nuestros "juegos" irrelevantes

Saludos

rogertm · 22/02/2012, 10:38

Aquí va mi código:

Código HTML:

Ver originalCopiar<header>
    <hgroup>
        <h1>LeLogo</h1>
    </hgroup>
    <div id="description">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <nav>
        <ul>
            <li><a href="#" title="Descargas">Descargas</a></li>
            <li><a href="#" title="Docs">Docs</a></li>
        </ul>
    </nav>
</header>
<section id="lelogo-industria">
    <h2>LeLogo en la Industria</h2>
    <article id="I">
        <h2>Empresa I</h2>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Quisque vehicula nisi nec magna adipiscing adipiscing.
            Quisque diam nunc, volutpat ut tincidunt quis, fringilla eu sapien.</p>
        </div>
    </article>
    <article id="II">
        <h2>Empresa III</h2>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Quisque vehicula nisi nec magna adipiscing adipiscing.
            Quisque diam nunc, volutpat ut tincidunt quis, fringilla eu sapien.</p>
        </div>
    </article>
    <article id="III">
        <h2>Empresa III</h2>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Quisque vehicula nisi nec magna adipiscing adipiscing.
            Quisque diam nunc, volutpat ut tincidunt quis, fringilla eu sapien.</p>
        </div>
    </article>
</section>
<div id="content">
    <article>
        <h2>Un ejemplo de uso</h2>
        <pre>
            Code is poetry, and CSS is Art
        </pre>
    </article>
    <aside>
        <div id="widget-1">
            <h3>Acerca de</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div id="widget-2">
            <h3>Descargas</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div id="widget-3">
            <h3>Documentacion</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div id="widget-4">
            <h3>Foros</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div id="widget-5">
            <h3>Contacto</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
    </aside>
</div>
<footer>
    <nav>
        <ul>
            <li>Acerca de</li>
            <li>Descargas</li>
            <li>Documentacion</li>
            <li>Foros</li>
            <li>Contacto</li>
        </ul>
    </nav>
</footer>

Les explico algo sobre mi trabajo. A diferencia de los otros compas que han hecho sus propuestas, he sacado la descripción del hgroup, pues considero que ahí debería ir algo como:

Código HTML:

Ver originalCopiar<hgroup>
        <h1>LeLogo</h1>
        <h2>LeLogo es la solución</h2>
    </hgroup>
    <div id="description">
        <p>Lorem ipsum dolor sit amet</p>
    </div>

Osea, para mi una descripción de este tipo es algo corto, como un slogan o algo así. Por lo demás no discrepo, solo que cada cual hace las cosas como las entiende

Aquí me tomé la libertad de agregar algunos IDs, pues normalmente lo hago claro, y aquí me aclara un poco el asunto

Igual, no usaría un hgroup para cada elemento h que ponga. En este sentido le hago un señalamiento a @carlos_belisario, pues además de eso, no debes, por cuestiones de SEO, usar tantos elementos h1 en tu página, el h1 es el elemento de mayor jerarquía en una página web, por ende, debes tener uno solo.

Me explico un poquito más, si estamos en el home de un sitio, el elemento h1 debería ser en título del mismo, pero si pasamos a leer un post, debería ser el título del post el de mayor jerarquía, pues es lo más importante en esa página, algo así:

Código HTML:

Ver originalCopiar<div id="site-title">Nombre de mi sitio</div>
<div id="content">
    <article>
        <h1>Lorem ipsum dolor sit amet</h1>
    </article>
</div>

Yo normalmente hago esto, puedes usar, en lugar de un div, una etiqueta h de menor jerarquía, h3, por ejemplo...

Esta es mi experiencia en estos asuntos, no estoy pretendiendo ser un experto ni mucho menos, pues esto es un asunto más de SEO que otra cosa, pero siempre lo hago así y siempre tengo buenos resultados

Por otro lado @Jime25, creo que abusas del article, por ejemplo, en lugar de:

Código HTML:

Ver originalCopiar<article>
    <section>Empresa X</section>
    <section>Empresa Y</section>
    <section>Empresa Z</section>
</article>

Habría hecho esto:

Código HTML:

Ver originalCopiar<section>
    <article>Empresa X</article>
    <article>Empresa Y</article>
    <article>Empresa Z</article>
</section>

Pues para mi, es una sección que tiene tres artículos dentro, y así sucesivamente.

Lo mejor de HTML5 es la semántica que tiene, para mi ha sido muy fácil aprenderlo. Y espero que las sugerencias que les doy les sirvan, de igual manera podemos debatir el asunto...

Un abrazo a todos, a ver si me embullo y hago mi propuesta de diagrama

carlos_belisario · 22/02/2012, 17:41

rogertm gracias por la sugerencia creeme que la tomaré en cuenta, aunque tengo que preguntar porque es una de las cosas que todavía no veo claro, en teoría he leído en varios sitios que cada section o article pueden tener su título (que es lo mas resaltante de la seccion que se esta creando) en h1, esto según leí y es lo que quiero aclarar que semanticamente este h1 que es lo relevante del hijo sigue siendo menos significantes que el principal (no se si lo enrede mucho suelo hacerlo), mi duda es que pasa cuando hay secciones bien sean article o section en el mismo nivel que pasa??, cual h1 pasa a ser mas significante?? eso no lo he podido encontrar aunque tampoco me he puesto en una super busqueda, pero sería bueno ya que salió la sugerencia por mi abuso del h1

, saludos y gracias rogertm por la sugerencia

P.D: si es necesario mover esta intervención o que cree un tema nuevo para no desvirtuar el tema me indican

edit viendo un poco http://www.w3schools.com/html5/tag_section.asp y http://www.w3schools.com/html5/tag_article.asp, si vemos ellos usan el article con h3 y el section con h1

emprear · 22/02/2012, 21:00

Bueno, aqui les dejo el mio. Aclaro que me aparté un poco de la premisa original y le di al html el css correspondiente. Vi muy por arriba los demás códigos y me dá la sensación que hay un cierto abuso de etiquetas, incluyo comentarios en el código.

Código HTML:

Ver originalCopiar<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Ejercicio 2</title>
</head>
<body>
<div class="arriba">
<header id="inicio">
<!-- dado que la imagen corresponde a un logo, no se justifica el uso de figure 
... mejor entonces un svg que ahora tiene soporte nativo en html5 (menos en safari), y usemos figure...-->
<!--img src="logo" alt="Empresa Lelogo" -->
<figure class="logo">
<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
 <title>Lelogo</title>
 <g>
  <rect id="svg_1" height="100" width="320" y="0" x="0" stroke-width="5" stroke="#333333" fill="#333333"/>
  <rect transform="rotate(90.5045, 43, 60.498)" id="svg_2" height="47.41625" width="51.2038" y="36.79084" x="17.39817" stroke-width="5" stroke="#7fff00" fill="#7fff00"/>
  <text font-weight="bold" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="52" id="svg_4" y="76" x="193" stroke-width="0" stroke="#7fff00" fill="#ffffff">LELOGO</text>
 </g>
</svg>
</figure>
<h1>
Lorem ipsum dolor  sit amet, puto  suam in modo  compungi mulierem.
</h1>
<div class="botones des">Descargar</div><div class="botones doc">Docs</div>
</header>
</div>
<!-- ahora una sección con tres artículos bien definidos -->
<section class="empresas">
<!-- agregamos otro header, ya que bien pueden aplicarse a el documento completo como a secciones -->
<header>
<!-- repetimos otro encabezado de nivel 1, al estar dentro de otro header no tiene correspondencia con el 
primer h1 que utilizamos -->
<h1>Lelogo en la indusrtria</h1>
</header>
<!-- podría englobarse todo en un article, pero creo correcto usar tres y aprovechar para posicionar los tres bloques
con css -->
<article>
<p>Empresa Y</p>
Animae tuae infami cum unde non potentiae Apollonium
</article>
<article class="x">
<p>Empresa X</p>
Animae tuae infami cum unde non potentiae Apollonium
</article>
<article>
<p>Empresa Z</p>
Animae tuae infami cum unde non potentiae Apollonium
</article>
</section>
 
<!-- aqui recurrimos aun par divs auxiliares que contendrá la sección de ejemplo y un nav a manera de menu lateral,
además de permitirnos manejar el color de fondo... a quien escuché decir que los divs no son necesarios? -->
<div class="cien">
<div class="abajo">
<!-- iniciamos la seccion de ejemplo -->
<section class="cod">
<!-- se repite lo ya indicado para los headers y el h1 -->
<header>
    <!-- Para darle sentido a este encabezado vamos a agregar la palabra Lelogo a la frase, de lo contrario pierde sentido -->
<h1>Ejemplo de uso de Leleogo</h1>
</header>
<code>
&lt;script type=&quot;text/javascript&quot;&gt;
function cambia() {
if ((document.getElementById('miParrafo').style.color) == 'green') {
document.getElementById('miParrafo').style.color = 'red';
}else {
document.getElementById('miParrafo').style.color = 'green';
}}
&lt;/script&gt;
</code>
</section>
<!-- el menú de navegación lateral no creo que corresponda a un aside sino estrictamente a un menú de navegación,
este menu tiene float right en el css, y también recuerdo haber escuchado a alguien que el float estaba mas o menos como muerto
 -->
<nav class="derecha">
<ul>
<li>Acerca de:<br /><a href="#">Los que hacemos Lelogo</a></li>
<li>Descarga<br /><a href="#">Ultima versión</a></li>
<li>Documentación:<br /><a href="#">Documentación completa</a></li>
<li>Foro<br /><a href="#">Encontrá respuestas y ayuda</a></li>
<li>Contacto<br /><a href="#">Formulario de consulta</a></li>       
</ul>
</nav>
</div>
</div>
<!-- finalmente repetimos nuestro menu, que aparecerá como footer en el resto de las páginas -->
<footer>
<nav>
<ul>
<li><a href="#">Acerca de</a> |</li>
<li><a href="#">Descarga</a> |</li>
<li><a href="#">Documentación</a> |</li>
<li><a href="#">Foro</a> |</li>
<li><a href="#">Contacto</a></li>       
</ul>
</nav>  
</footer>
</body>
</html>

La versión con css la pueden ver en
http://foros.emprear.com/html5/ejercicio2.html
Tiene un diseño bastante fluido
La hice para ie9+, y el resto (la unica falla es el SVG en safari5(win)

Ah, les dejo una pregunta, que incluso dá para un post en si misma...
Aparte de Google y algún uno que otro motor de búsqueda, ¿quién va a interpretar estas "etiquetas semánticas"?
¿Alguno lo sabe?
¿y cuando?
Esto me hace pensar en una metáfora con el tema de la ecología y el agotamiento de los recursos, el litro de agua que hoy nos ahorremos, será un litro más que nuestros nietos, bisnietos, o los nietos y bisnietos de estos podrán disfrutar. Y si, cuesta un poco hacer un esfuerzo cuyos frutos se verán en un futuro que no va a ser el nuestro.
Espero que mis "etiquetas semánticas" no tarden tanto en ser aprovechadas...

Saludos

alivan · 24/02/2012, 19:04

Bueno, presento mi propuesta a continuación:

Código HTML:

Ver originalCopiar<!-- Una cabecera con un <h1>, la descripción y los enlaces principales de navegación del sitio. -->
<header>
    <h1>LELOGO</h1>
    <p>Descripción del sitio</p>
    <nav>
        <a>Descargar</a>
        <a>Docs</a>
    </nav>
</header
 
<!-- Sección importante, remarcados los <article> con <h3> siguiendo la jerarquía. -->
<section>
    <h2>LeLogo en la industria</h2>
    <article>
        <h3>Empresa X</h3>
        <p>Comentario empresa X</p>
    </article>
    <article>
        <h3>Empresa Y</h3>
        <p>Comentario empresa Y</p>
    </article>
    <article>
        <h3>Empresa Z</h3>
        <p>Comentario empresa Z</p>
    </article>
</section>
 
<!-- Creamos una sección que muestra un ejemplo de uso, un código, englobado por una etiqueta <code> -->
<article>
    <h2>Ejemplo de uso</h2>
    <code>Código de ejemplo</code>
</article>
 
<!-- La sección de información básica del sitio. La pongo en un <aside> pues no lo considero contenido suficientemente relevante y además ya vamos a incluir en el footer los links que toman importancia. Lo mismo con el uso de <h4>, considero que los nombres de las empresas de arriba son más importantes que el contenido en concreto de este <aside> -->
<aside>
    <ul>
        <li>
            <h4>Acerca de:<h4>
            <p>Lorem ipsum...</p>
        </li>
        <li>
            <h4>Descargas:<h4>
            <p>Lorem ipsum...</p>
        </li>
        <li>
            <h4>Documentación:<h4>
            <p>Lorem ipsum...</p>
        </li>
        <li>
            <h4>Foros:<h4>
            <p>Lorem ipsum...</p>
        </li>
        <li>
            <h4>Contacto:<h4>
            <p>Lorem ipsum...</p>
        </li>
</aside>
 
<!-- Y por último el footer en el que van los enlaces de información principales del sitio. -->
<footer>
    <a>Acerca de</a> | <a>Descargas</a> | <a>Documentación</a> | <a>Foros</a> | <a>Contacto</a>
</footer>

Y si me dejan, ya se que soy el novato aquí, criticaré un poco a los que publicaron antes :P.
Jime25 usa sections dentro de articles. La verdad es que yo considero que un artículo va dentro de una sección (Sección de deportes > Artículo de baloncesto; Sección de tecnologías > Artículo Windows 8 incorpora la nueva interfaz Metro). Por ese motivo yo lo pongo al revés, el section englobando a los articles.

Por otro lado: "If it makes sense to separately syndicate the content of a <section> element, use an <article> element instead." Por lo que sí que usaría un article para el siguiente elemento.

Tampoco me gusta usar tanto hgroup tal y como hace el siguiente compañero. Un h1 que diga "Este es el título de la web!" y lo demás a partir de h2. Hgroup lo usaría únicamente para definir 2 o 3 h1's juntos, nunca separados. Y aun así serían casos extraños.

A Rogertm, de acuerdo en algunas cosas que dice, aunque yo omito directamente el hgroup. Además considero innecesario ese <div><p>...<//> que haces dentro de los articles. Con el párrafo sólo creo que es suficiente.

Sobre los enlaces de Carlos_belisario simplemente son ejemplos. Piensa que esos extractos van incluidos en un todo. No te fijes expresamente en ello, pues en el fondo hay infinitas combinaciones y tipos de webs.

Emprear, lo siento pero estoy tan acostumbrado a las tabulaciones(y añado que tngo sueño xD) y me lio al leer xD. Bueno, entendí que había que tratar el tema desde la semántica así que omito los divs. No sé si es que estoy dormido pero contñe 3 headers... Teniendo en cuenta la simplificidad, ¿por qué no usar simplemente hx? ¿Y los articles por dentro pueden ir así estructurados? Lo siento, pero lo veo un poco engorroso :S

Me gusta este juego, critiquen mi aporte, por favor ^^

emprear · 24/02/2012, 21:20

Más que una crítica @alivan. una proposición, sin modificar en nada tu html, presentame un css para conseguir el resultado que se muestra en el ejemplo.

Saludos

ryugen · 25/02/2012, 05:50

@emprear cual sería el resultado a obtener?? Ya se que esta la imagen de ejemplo, pero puntualmente cual sería?
Otra cosa, por que utilizas "DIV"s para los botones? Siendo que existen muchos elementos más semánticos que "DIV"

emprear · 25/02/2012, 06:38

Cita:

Iniciado por ryugen

@emprear cual sería el resultado a obtener?? Ya se que esta la imagen de ejemplo, pero puntualmente cual sería?
Otra cosa, por que utilizas "DIV"s para los botones? Siendo que existen muchos elementos más semánticos que "DIV"

Muy sencillo @ryugen, ver como lo harían otros, para analizar, comparar, aprender, hasta dónde he entendido, ese es el propósito de ese este juego.
Con respecto a los botones, un error/omisión de mi parte, debería ser

Código HTML:

Ver originalCopiar<div class="botones des"><a href="#">Descargar</a></div><div class="botones doc"><a href="#">Docs</a></div>

Ya que a mi juicio son sencillamente 2 links, que ni siquiera merecen la categoría de menú.

Redondeo la idea general, como habrás visto he explicitado:

Cita:

Aclaro que me aparté un poco de la premisa original y le di al html el css correspondiente

, ya que la propuesta parte de una imagen. Muy diferente hubiese sido el resultado, si el ejercicio hubira sido algo como.... como trasladarías ente código xhtml a la semántica de html5

dicho sea de paso, me encantaría ver tu propuesta de como hacerlo

Saludos

ryugen · 25/02/2012, 07:34

Bueno aquí mi diagrama:

Código HTML:

Ver originalCopiar<body>
    <h1><img src="lelogo" alt="LeLogo" /></h1>
    <section title="introduccion" data-role="main">
        <p>Introdución: LELOGO (...)</p>
        <a href="...">Descargar</a>
        <a href="...">Docs</a>
    </section>
    <section>
        <h2>LELOGO en la industria</h2>
        <section class="empresa">
            <h3>Empresa X</h3>
            <p>Contenido</p>
        </section>
        <section class="empresa">
            <h3>Empresa Y</h3>
            <p>Contenido</p>
        </section>
        <section class="empresa">
            <h3>Empresa Z</h3>
            <p>Contenido</p>
        </section>
    </section>
    <section>
        <h2>Un Ejemplo de uso</h2>
        <code></code>
    </section>
    <aside>
        <ul class="contenidos">
            <li><a href="#">Acerca de</a> Más acerca de mi</li>
            <li><a href="#">Descarga</a> Descarga todo el contenido</li>
            <li><a href="#">Documentación</a> Accede a la documentación</li>
            <li><a href="#">Foros</a> Un encuentro más cercano</li>
            <li><a href="#">Contacto</a> Comunicate directamente con nostros</li>
        </ul>
    </aside>
    <footer>
        <nav>
            <menu>
                <li><a href="#">Acerca de</a></li>
                <li><a href="#">Descarga</a></li>
                <li><a href="#">Documentación</a></li>
                <li><a href="#">Foros</a></li>
                <li><a href="#">Contacto</a></li>
            </menu>
        </nav>
    </footer>
</body>

Algunas consideraciones
BODY --> Ya forma una section en si misma (en esto caso la general)
Introducion, Ejemplo y Empresas, son secciones de la seccion general.
ASIDE --> Es contenido complementario a la seccion general osea a la pagina completa
FOOTER --> Es el pie de la seccion general.
Las empresas entán dentro de un SECTION, porque no representan contenido que pueda ser interpretado como contenido aislado (ARTICLE). Esta parte fue la de mayor duda, ya que inicialmente consideré ponerlas dentro de un DIV y con un h3 en su interior, pero me di cuenta que para el algoritmo de outline de documento estaría generando una nueva seccion, por lo que me definí por utilizar SECTION

No hay muchos más comentarios, se esperan sugerencias.

Aca pueden verlo estilado, tal cual ese markup:
http://jsfiddle.net/p4bl1t0/MN8jH/embedded/result/
Sufre del algunas deficiencias, porque no tengo mucho tiempo para dedicarle. Se recomienda mirarlo en FF.

alivan · 25/02/2012, 20:13

@emprear, propuesta concluida: http://alivan.es/proyects/lelogo/ (Nota: Vale, no le da la gana de aparecer como enlace)
No lo he calcado (ni tengo intención de calcarlo dX) pero se le parece mucho.

A Ryugen, te has equivocado en el footer, te olvidaste el <ul>. Además ese <menu> no lo veo claro... Entendí que la etiqueta <menu> era para botones de acción sobre alguna parte del sitio, tales como los botones de un reproductor, pero no para situar los enlaces de un menú de navegación. Además aquí ya estarías metiendo la etiqueta <nav> y resultaría una redundancia.

ryugen · 26/02/2012, 06:08

Cita:

Iniciado por alivan

@emprear, propuesta concluida: http://alivan.es/proyects/lelogo/ (Nota: Vale, no le da la gana de aparecer como enlace)
No lo he calcado (ni tengo intención de calcarlo dX) pero se le parece mucho.

A Ryugen, te has equivocado en el footer, te olvidaste el <ul>. Además ese <menu> no lo veo claro... Entendí que la etiqueta <menu> era para botones de acción sobre alguna parte del sitio, tales como los botones de un reproductor, pero no para situar los enlaces de un menú de navegación. Además aquí ya estarías metiendo la etiqueta <nav> y resultaría una redundancia.

Es verdad, tienes razón, estuve investigando y es como tu dices, está mal usado.

Especificacion: http://www.whatwg.org/specs/web-apps...nts.html#menus

Ejemplo para crear context menu: http://davidwalsh.name/html5-context...ything+Else%29

20/02/2012, 13:46	#1 (permalink)
Rafael Moderador Mensajes: 4.748 Karma: 74648	Juguemos a Diagramar 2 Como antes, las instruicciones están aquí. Pues como va, acá pongo un ejercicio menos obvio quizá. Algunos notarán un parecido a cierta página de Js. Zerokilled me la propuso como candidato. Y los invito a que comenten un poco de su código, ¡por que creen ustedes que podría ser de esa manera! Última edición por Rafael; 20/02/2012 a las 23:27

20/02/2012, 15:46	#4 (permalink)
mborja00 Mensajes: 1 Karma: n/a	Respuesta: Juguemos a Diagramar 2 ¿Existe algo como una guía para diagramación web ? He visto tantos modos diferentes, cientos de miles de templates .... yo soy programador no diseñador ... ¿ pero es necesaria tanta especialización para que una pinche página web se vea ordenada y que el usuario pueda encontrar lo que quiere con el menor número de clicks posible? Digo, yo solo quiero que mi site se vea ordenado no concursar para obtener el mejor "concepto".

20/02/2012, 23:20	#5 (permalink)
emprear Colaborador Mensajes: 4.694 Karma: 23233 Ubicación: Castelar	Respuesta: Juguemos a Diagramar 2 @mborja00 Antes que nada, bienvenido a Foros de Web Vos, como programador, crees que es lo mismo escribir 20 líneas de código para conseguir un resultado, que conseguir el mismo resultado con 5 líneas? Aquí no cambia mucho la cosa, la nueva semántica que propone html5 (sin entrar en el análisis de características mucho más avanzadas, y por que el momento pueden considerarse como experimentales), simplifica la relación estructura-contenido. Un código html5 optimizado y respetuoso de los estándares, va a simplificar la interpretación del mismo por toda una serie de nuevos dispositivos y sistemas operativos, que son en definitiva los que vinculan a nuestro trabajo con el ciente/usuario, te aseguro, que como se presenta el panorama, es un desafío monumental. Es como si hablásemos de las normas ISO, vos podés ir por la calle y comprar en cualquier esquina un adaptador de corriente, seguramente por menos precio que en un local serio, el hecho de que al llegar a tu casa, lo primero que necesites sea un cuchillo para separarle las patitas al adaptador para que entre en el tomacorriente de la pared, es sólo una anécdota, total, funciona. Yo pretendo que mi código entre lo más suavemente posible en la mayor cantidad de destinatarios posibles. Y que conste, que la palabra "concurso" la instalaste vos en forma caprichosa, el autor del post fue muy claro, nos invitó a "jugar" a diagramar, y esto del juego obedece simplemente a que como html5 aún está en desarrollo y es una experiencia relativamente nueva para muchos, comparar nuestros trabajos, y el intercambio de ideas que de ello deriva, es una actividad ideal para aprender y mejorar. Como consejo final te diría que sigas en la programación, que es lo tuyo, y nos dejes a los diseñadores (aunque reconozco que programo bastante también), con nuestros "juegos" irrelevantes Saludos __________________ La voz de las antenas va, sustituyendo a Dios. Cuando finalice la mutación, nueva edad media habrá S.R. Última edición por emprear; 21/02/2012 a las 06:30

22/02/2012, 17:41	#7 (permalink)
carlos_belisario Colaborador Mensajes: 2.544 Karma: 17395 Ubicación: Venezuela Maracay Aragua	Respuesta: Juguemos a Diagramar 2 rogertm gracias por la sugerencia creeme que la tomaré en cuenta, aunque tengo que preguntar porque es una de las cosas que todavía no veo claro, en teoría he leído en varios sitios que cada section o article pueden tener su título (que es lo mas resaltante de la seccion que se esta creando) en h1, esto según leí y es lo que quiero aclarar que semanticamente este h1 que es lo relevante del hijo sigue siendo menos significantes que el principal (no se si lo enrede mucho suelo hacerlo), mi duda es que pasa cuando hay secciones bien sean article o section en el mismo nivel que pasa??, cual h1 pasa a ser mas significante?? eso no lo he podido encontrar aunque tampoco me he puesto en una super busqueda, pero sería bueno ya que salió la sugerencia por mi abuso del h1 , saludos y gracias rogertm por la sugerencia P.D: si es necesario mover esta intervención o que cree un tema nuevo para no desvirtuar el tema me indican edit viendo un poco http://www.w3schools.com/html5/tag_section.asp y http://www.w3schools.com/html5/tag_article.asp, si vemos ellos usan el article con h3 y el section con h1 __________________ aprende d tus errores e incrementa tu conocimientos php para todos blog personal

24/02/2012, 19:04	#9 (permalink)
alivan Mensajes: 13 Karma: 54	Respuesta: Juguemos a Diagramar 2 Bueno, presento mi propuesta a continuación: Código HTML: Ver original Copiar <!-- Una cabecera con un <h1>, la descripción y los enlaces principales de navegación del sitio. --> <header> <h1>LELOGO</h1> <p>Descripción del sitio</p> <nav> <a>Descargar</a> <a>Docs</a> </nav> </header <!-- Sección importante, remarcados los <article> con <h3> siguiendo la jerarquía. --> <section> <h2>LeLogo en la industria</h2> <article> <h3>Empresa X</h3> <p>Comentario empresa X</p> </article> <article> <h3>Empresa Y</h3> <p>Comentario empresa Y</p> </article> <article> <h3>Empresa Z</h3> <p>Comentario empresa Z</p> </article> </section> <!-- Creamos una sección que muestra un ejemplo de uso, un código, englobado por una etiqueta <code> --> <article> <h2>Ejemplo de uso</h2> <code>Código de ejemplo</code> </article> <!-- La sección de información básica del sitio. La pongo en un <aside> pues no lo considero contenido suficientemente relevante y además ya vamos a incluir en el footer los links que toman importancia. Lo mismo con el uso de <h4>, considero que los nombres de las empresas de arriba son más importantes que el contenido en concreto de este <aside> --> <aside> <ul> <li> <h4>Acerca de:<h4> <p>Lorem ipsum...</p> </li> <li> <h4>Descargas:<h4> <p>Lorem ipsum...</p> </li> <li> <h4>Documentación:<h4> <p>Lorem ipsum...</p> </li> <li> <h4>Foros:<h4> <p>Lorem ipsum...</p> </li> <li> <h4>Contacto:<h4> <p>Lorem ipsum...</p> </li> </aside> <!-- Y por último el footer en el que van los enlaces de información principales del sitio. --> <footer> <a>Acerca de</a> \| <a>Descargas</a> \| <a>Documentación</a> \| <a>Foros</a> \| <a>Contacto</a> </footer> Y si me dejan, ya se que soy el novato aquí, criticaré un poco a los que publicaron antes :P. Jime25 usa sections dentro de articles. La verdad es que yo considero que un artículo va dentro de una sección (Sección de deportes > Artículo de baloncesto; Sección de tecnologías > Artículo Windows 8 incorpora la nueva interfaz Metro). Por ese motivo yo lo pongo al revés, el section englobando a los articles. Por otro lado: "If it makes sense to separately syndicate the content of a <section> element, use an <article> element instead." Por lo que sí que usaría un article para el siguiente elemento. Tampoco me gusta usar tanto hgroup tal y como hace el siguiente compañero. Un h1 que diga "Este es el título de la web!" y lo demás a partir de h2. Hgroup lo usaría únicamente para definir 2 o 3 h1's juntos, nunca separados. Y aun así serían casos extraños. A Rogertm, de acuerdo en algunas cosas que dice, aunque yo omito directamente el hgroup. Además considero innecesario ese <div><p>...<//> que haces dentro de los articles. Con el párrafo sólo creo que es suficiente. Sobre los enlaces de Carlos_belisario simplemente son ejemplos. Piensa que esos extractos van incluidos en un todo. No te fijes expresamente en ello, pues en el fondo hay infinitas combinaciones y tipos de webs. Emprear, lo siento pero estoy tan acostumbrado a las tabulaciones(y añado que tngo sueño xD) y me lio al leer xD. Bueno, entendí que había que tratar el tema desde la semántica así que omito los divs. No sé si es que estoy dormido pero contñe 3 headers... Teniendo en cuenta la simplificidad, ¿por qué no usar simplemente hx? ¿Y los articles por dentro pueden ir así estructurados? Lo siento, pero lo veo un poco engorroso :S Me gusta este juego, critiquen mi aporte, por favor ^^

24/02/2012, 21:20	#10 (permalink)
emprear Colaborador Mensajes: 4.694 Karma: 23233 Ubicación: Castelar	Respuesta: Juguemos a Diagramar 2 Más que una crítica @alivan. una proposición, sin modificar en nada tu html, presentame un css para conseguir el resultado que se muestra en el ejemplo. Saludos __________________ La voz de las antenas va, sustituyendo a Dios. Cuando finalice la mutación, nueva edad media habrá S.R.

25/02/2012, 05:50	#11 (permalink)
ryugen Mensajes: 219 Karma: 4660	Respuesta: Juguemos a Diagramar 2 @emprear cual sería el resultado a obtener?? Ya se que esta la imagen de ejemplo, pero puntualmente cual sería? Otra cosa, por que utilizas "DIV"s para los botones? Siendo que existen muchos elementos más semánticos que "DIV"

25/02/2012, 06:38	#12 (permalink)
emprear Colaborador Mensajes: 4.694 Karma: 23233 Ubicación: Castelar	Respuesta: Juguemos a Diagramar 2 Cita: Iniciado por ryugen @emprear cual sería el resultado a obtener?? Ya se que esta la imagen de ejemplo, pero puntualmente cual sería? Otra cosa, por que utilizas "DIV"s para los botones? Siendo que existen muchos elementos más semánticos que "DIV" Muy sencillo @ryugen, ver como lo harían otros, para analizar, comparar, aprender, hasta dónde he entendido, ese es el propósito de ese este juego. Con respecto a los botones, un error/omisión de mi parte, debería ser Código HTML: Ver original Copiar <div class="botones des"><a href="#">Descargar</a></div><div class="botones doc"><a href="#">Docs</a></div> Ya que a mi juicio son sencillamente 2 links, que ni siquiera merecen la categoría de menú. Redondeo la idea general, como habrás visto he explicitado: Cita: Aclaro que me aparté un poco de la premisa original y le di al html el css correspondiente , ya que la propuesta parte de una imagen. Muy diferente hubiese sido el resultado, si el ejercicio hubira sido algo como.... como trasladarías ente código xhtml a la semántica de html5 dicho sea de paso, me encantaría ver tu propuesta de como hacerlo Saludos __________________ La voz de las antenas va, sustituyendo a Dios. Cuando finalice la mutación, nueva edad media habrá S.R.

25/02/2012, 20:13	#14 (permalink)
alivan Mensajes: 13 Karma: 54	Respuesta: Juguemos a Diagramar 2 @emprear, propuesta concluida: http://alivan.es/proyects/lelogo/ (Nota: Vale, no le da la gana de aparecer como enlace) No lo he calcado (ni tengo intención de calcarlo dX) pero se le parece mucho. A Ryugen, te has equivocado en el footer, te olvidaste el <ul>. Además ese <menu> no lo veo claro... Entendí que la etiqueta <menu> era para botones de acción sobre alguna parte del sitio, tales como los botones de un reproductor, pero no para situar los enlaces de un menú de navegación. Además aquí ya estarías metiendo la etiqueta <nav> y resultaría una redundancia.

26/02/2012, 06:08	#15 (permalink)
ryugen Mensajes: 219 Karma: 4660	Respuesta: Juguemos a Diagramar 2 Cita: Iniciado por alivan @emprear, propuesta concluida: http://alivan.es/proyects/lelogo/ (Nota: Vale, no le da la gana de aparecer como enlace) No lo he calcado (ni tengo intención de calcarlo dX) pero se le parece mucho. A Ryugen, te has equivocado en el footer, te olvidaste el <ul>. Además ese <menu> no lo veo claro... Entendí que la etiqueta <menu> era para botones de acción sobre alguna parte del sitio, tales como los botones de un reproductor, pero no para situar los enlaces de un menú de navegación. Además aquí ya estarías metiendo la etiqueta <nav> y resultaría una redundancia. Es verdad, tienes razón, estuve investigando y es como tu dices, está mal usado. Especificacion: http://www.whatwg.org/specs/web-apps...nts.html#menus Ejemplo para crear context menu: http://davidwalsh.name/html5-context...ything+Else%29

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Modo lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado