Tema: Juguemos a Diagramar 2
Ver Mensaje Individual
  #13 (permalink)  
Antiguo 25/02/2012, 08:34
Avatar de ryugen
ryugen
Colaborador
  
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 15 años, 7 meses
Puntos: 187
Respuesta: Juguemos a Diagramar 2
Bueno aquí mi diagrama:
Código HTML: 
Ver original
  1. <body>
  2.     <h1><img src="lelogo" alt="LeLogo" /></h1>
  3.     <section title="introduccion" data-role="main">
  4.         <p>Introdución: LELOGO (...)</p>
  5.         <a href="...">Descargar</a>
  6.         <a href="...">Docs</a>
  7.     </section>
  8.     <section>
  9.         <h2>LELOGO en la industria</h2>
  10.         <section class="empresa">
  11.             <h3>Empresa X</h3>
  12.             <p>Contenido</p>
  13.         </section>
  14.         <section class="empresa">
  15.             <h3>Empresa Y</h3>
  16.             <p>Contenido</p>
  17.         </section>
  18.         <section class="empresa">
  19.             <h3>Empresa Z</h3>
  20.             <p>Contenido</p>
  21.         </section>
  22.     </section>
  23.     <section>
  24.         <h2>Un Ejemplo de uso</h2>
  25.         <code></code>
  26.     </section>
  27.     <aside>
  28.         <ul class="contenidos">
  29.             <li><a href="#">Acerca de</a> Más acerca de mi</li>
  30.             <li><a href="#">Descarga</a> Descarga todo el contenido</li>
  31.             <li><a href="#">Documentación</a> Accede a la documentación</li>
  32.             <li><a href="#">Foros</a> Un encuentro más cercano</li>
  33.             <li><a href="#">Contacto</a> Comunicate directamente con nostros</li>
  34.         </ul>
  35.     </aside>
  36.     <footer>
  37.         <nav>
  38.             <menu>
  39.                 <li><a href="#">Acerca de</a></li>
  40.                 <li><a href="#">Descarga</a></li>
  41.                 <li><a href="#">Documentación</a></li>
  42.                 <li><a href="#">Foros</a></li>
  43.                 <li><a href="#">Contacto</a></li>
  44.             </menu>
  45.         </nav>
  46.     </footer>
  47. </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.