Morton 26 de octubre de 2010 a las 08.22
   Imprimir artículo
elWebmaster.com

¬ŅColocar tu logo como img, como background o como h1?


htmlHa habido mucho debate por esta sencilla pero crucial cuesti√≥n. ¬ŅDebe tu logo estar colocado como una imagen entre lineas, o como h1 vali√©ndose de CSS?

En el art√≠culo que veremos a continuaci√≥n, se barajan algunos argumentos de por qu√© es m√°s conveniente utilizar la primera opci√≥n. ¬ŅSer√° suficiente para convencerte? ¬ŅPodr√° resolver de una vez por todas este intenso debate?

Fuente original del artículo: CSS Wizardry
Traducción realizada por elWebmaster.com

Primero que nada, evaluemos dos ejemplos de estos usos. Primero veamos cómo utilizar una imagen:

[HTML]

[/HTML]

Y ahora veremos cómo utilizar, en cambio, un h1:

[CSS]

La empresa

h1 a{
width:;
height:;
display:block;
text-indent:-9999px;
background:url(/images/logo.gif);
}
[/CSS]

Tu logo es contenido, y no estilo. El contenido, en el el sentido del término brindado por los estándares web, se refiere a la información que requiere estar presente y ser accesible, independientemente del estilo aplicado, si es que se define un estilo (estamos hablando del CSS).

Un logo, entonces, es contenido. Usemos como ejemplo el logo de tu empresa. Sin importar de que color sea el sitio, tu logo se ver√° siempre igual, ya que el logo es totalmente independiente del sitio en el que ser√° utilizado y del estilo que lo rodear√°.

Imagina que alguien visita tu sitio en un navegador que no soporta CSS. La presencia del logo, a pesar de no haber estilos, es necesaria.

Es por eso que tu logo es contenido, ya que es una representaci√≥n visual de tu marca. Es posible que el logo haya estado all√≠ incluso antes de que el sitio haya sido imaginado. Ahora, translada este pensamiento al dise√Īo del sitio en cuesti√≥n, y ser√° innegable que el logo es contenido y no estilo.

Asi que, si el logo es contenido, debe formar parte del código. Probablemente quieras colocarlo allí de esta manera:

[HTML]

[/HTML]

Tan simple como eso. Sin importar como estiles tu contenido, el logo persistir√°. Utiliza id=”logo” para darle cualquier estilo que necesite.

Y si todavía no estás lo suficientemente convencido, puedes utilizar una imagen inline.

Muchas impresoras, para conservar tinta, no imprimen los fondos, lo que significa que cualquier imagen aplicada como fondo se perderá ál imprimir la página. Como mencionamos antes, una imagen inline permitirá que el logo persista, más allá de los estilos. Esto significa que que la hoja de estilo para impresión tendrá el logo incrustado en la página como una imagen que puede imprimir.

Adem√°s, una imagen inline puede ser redimensionada, lo que no podemos lograr con una imagen de fondo en un h1. Puedes alterar el tama√Īo de h1, pero no su fondo (al menos no sin utilizar CSS3). Esto significa que no puedes adaptar f√°cilmente tu logo a diferentes tama√Īos vali√©ndote s√≥lo del CSS. Imagina tener que optimizar tu sitio para dispositivos m√≥viles. Una porci√≥n de c√≥digo muy util para un sitio mobile es:

[CSS]
img{
width:100%
max-width:100%;
}
[/CSS]

Esto hará que todas imágenes llenen la pantalla del dispositivo móvil, pero a su vez que no se salgan de los márgenes. Si tu logo está insertado como una imagen de fondo, será ignorado por este código.

En definitiva, te ser√° mucho m√°s f√°cil manipular tu logo como img que como fondo.

Fuente original del artículo: CSS Wizardry
Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. sergiomas dice:

    Puedes declarar varios estilos dependiendo del medio, y por lo tanto tener diferentes imágenes para versiones imprimibles o de dispositivos móviles.

    la cuesti√≥n tambi√©n es que con el H1 a√Īades el texto de tu marca, lo cual es indexable cara a posicionamiento m√°s que una imagen, dado que est√° dentro de un encabezado de primer nivel.

    Se podría dar una solución global que sería meter dentro del H1 tanto el texto como la imagen quedando así:
    <h1><a href="#">Mi empresa <img src="logo.png" /></a></h1>
    Y dar los siguientes estilos:
    h1{text-indent: -9999px;}
    h1 a{ position: relative;}
    h1 a img{border: 0; position:absolute; left: 9999px;}

    Así tienes lo mejos de ambos mundos. ;-)

  2. Morton dice:

    @sergiomas: ¬°Gracias por tu aporte! :)

  3. ginetagris dice:

    La solución de sergio más me parece muy acertada. Así es como lo solemos hacer.
    Saludos a todos/as.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder