Foros del Web - Ver Mensaje Individual

emprear · #8 (**permalink**) 22/02/2012, 22: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 original<!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