Imagén de cabecera en DIV o como IMG?

hey_alan · #1 (**permalink**) 12/12/2007, 18:21

Hola a todos.

Bien, es una pregunta muy estúpida pero que me inquieta:

En es sitio web que estoy haciendo (http://cybershaman.awardspace.com/new/) tengo una imagén de cabecera con el logotipo de 640px por 170px y pesa 25kb.

Ahora la pregunta: ¿Cómo que elemento debo ponerlo? ¿Cómo un DIV con estilo ó como una Imagén con ALT?

PD: Les dijé que era estúpido, pero de cualquier modo me lo preguntaba (x_X).

PD2: Tengo otro elemento, que es el final del contenido (ese que tiene degradado)... curiosamente éste sólo es decorativo (no lleva el logo) ¿Debo ponerlo en un DIV?

webosiris · #2 (**permalink**) 12/12/2007, 18:30

lo decorativo -> mediante CSS
lo que represente información -> en el html

michaelc · #3 (**permalink**) 12/12/2007, 19:17

Lo mas correcto seria en un div con estilo y una imagen con contenido ALT

Daniel Ulczyk · #4 (**permalink**) 13/12/2007, 14:15

Cita:

Lo mas correcto seria en un div con estilo y una imagen con contenido ALT

Precisamente todo lo contrario.
En este caso la imagen no trasmite información (es un logo), por lo que debiera mostrarse como fondo de un elemento.
Hay un tópico en este foro, sobre ello:

¿Qué alt poner a una imagen puramente estética?

AlZuwaga · #5 (**permalink**) 20/12/2007, 12:12

Momento... ¿Un logo no transmite información?
Todo un header completo puede que no, pero el logo SI transmite información. Es parte de la identidad corporativa.

Yo colocaría el logo, sólo el logo, como imagen y el resto como texto. Tal vez maquetaría así su header:

<h1><img src="logo" /> Cyber Shaman Studios</h1>
<p>Diseño web + Animacio... etc</p>

Mirá ese sitio sin estilos. ¿¡Bienvenido a dónde!?

Daniel Ulczyk · #6 (**permalink**) 20/12/2007, 12:43

Yo discrepo contigo.
Un logo, por más institucional y representativo que sea no trasmite información.
Muestra la imagen de la empresa, cual ícono o figura.
Desde el punto de vista de la accesibilidad aquellos dispositivos que no muestren imágenes, mostrarán su texto alternativo. En el caso que no ocupa, sería "logo de la empresa"; por ejemplo.
Daríamos un contenido alternativo pero no transmitiríamos información. Mostrar "logo de la empresa" no aporta un céntimo al contenido ni a la ausencia de la imagen.
Hay un documento en la Web, muy interesante (aunque en inglés), en formato PDF
Demasiada Accesibilidad. Buenas intenciones, gravemente implementadas
Por lo expuesto es que sigo sosteniendo que deben mostrase como elemento de fondo mediante CSS.

ssthormess · #7 (**permalink**) 20/12/2007, 21:14

Acoto que; no podemos definir si un logo transmite una informacion o no, a mi juicio, algunos logos si y otros no (segun sea el caso) y si estuviera en esta situacion seguiria lo que propone Al Zuwaga.

michaelc · #8 (**permalink**) 20/12/2007, 22:35

Cita:

Iniciado por ssthormess

Acoto que; no podemos definir si un logo transmite una informacion o no, a mi juicio, algunos logos si y otros no (segun sea el caso) y si estuviera en esta situacion seguiria lo que propone Al Zuwaga.

De acuerdo contigo ssthormess, dependiendo cual sea el caso puede o no transmitir información el logo. Pero a mi juicio personal un logo es el distintivo del sitio y a modo de marketing siempre es bueno que aparezca. Supongamos que no hay estilos, solo textos alternativos ¿donde estamos? ¿que empresa es esta?. Si bien no es algo dependiente del contenido el logo siempre es bueno destacarlo.

Pero cada uno tiene diferentes conceptos.

hey_alan · #9 (**permalink**) 28/12/2007, 23:01

Tienen razón, el logo no es importante pero sí el título.

Interesante el artículo expuesto por "Daniel Ulczyk", me hizo ver que aún me falta bastante :P.

PD: Alguien sabe como deshabilitar las imágenes en FireFox, Opera o Safari?

Daniel Ulczyk · #10 (**permalink**) 29/12/2007, 03:54

Con respecto a Firefox, la cosa es muy sencilla si se instala la extensión Web Developer Toolbar.
Lo cual es imprescindible si se somete la página a 4 escenarios para comprobar la accesibilidad.

elquique · #11 (**permalink**) 18/02/2008, 23:38

Yo estoy a favor de Al Zuwaga, el logo transmite información, es nada menos que la identidad de la empresa, mis hijos ven la M y dicen Macdonals, de no existir el nombre de la empresa o sitio en modo texto H1, pondría en el ALT el nombre de la misma.

Y hablando de SEO bueno es bueno también, y así como Accesible CSS no quiere decir diseño feo como dicen algunos, tampoco SEO es anti Accesible ;)

LoBo2024 · #12 (**permalink**) 19/02/2008, 09:08

Yo opino que el logo es algo bastante importante de la empresa, y tienes varias formas de tratarlo, yo normalmente si se usa para cabecera pues lo pongo como si fuera un h1 y dentro del h1 la imagen con el texto alternativo comunicando slogan o frase de la empresa que normalmente siempre lo lleva y ya puestos a hilar muy fino que eso ya sería demasiada accesibilidad como se decía por arriba, podías ponerle un longdesc donde describes como es el logo en cuestión rollo ejemplo macdonald's:

El logo se constituye de una m grande redondeada amarilla con sombra negra.

Eso se podría llegar a implementar porque así quieras que no si hay algún logo gracioso los ciegos podrían llegar a imaginarse el logo y la situación graciosa que mostrase.

kahlito · #13 (**permalink**) 20/02/2008, 08:10

Hola, también considero al logotipo un elemento muy importante. Normalmente suelo hacerlo así:

Código HTML:

<div id="logo-encabezado">
<a href="http://www.web.com" class="logo" title="Nombre de la web"><img src="imagenes/logotipo.jpg" alt="Logo Web" title="Logotipo Web Actual" width="" height="" class="logo" /></a>	
</div>

Cita:

Iniciado por hey_alan

Tienen razón, el logo no es importante pero sí el título.

Interesante el artículo expuesto por "Daniel Ulczyk", me hizo ver que aún me falta bastante :P.

PD: Alguien sabe como deshabilitar las imágenes en FireFox, Opera o Safari?

Aparte de las opciones que te cita Daniel Ulczyk, tienes otra en el menú: Ver/ Estilo de página/ Sin estilo

metacortex · #14 (**permalink**) 22/02/2008, 01:14

Por supuesto que el logo debería ser ubicado como un elemento informativo, pero no como imagen sino como fondo, así:

Código:

<h1 id="logo">Nombre de la empresa - Descripción cortísima de funciones</h1>

h1#logo {
  width: 150px;
  height: 150px;
  background: url(logo.jpg);
  display: block;
  text-indent: -5000px;
}

Personalmente siempre me reservo el h1 para este fin, ya que con esto se aprovecha totalmente esta etiqueta en semántica, accesibilidad y posicionamiento. El contenido lo comienzo desde el h2. Bueno, es una forma personal de trabajar, quizás haya otras mejores.

elquique · #15 (**permalink**) 24/02/2008, 16:00

Si, o en otro H (si no te importa el orden jeje) ya que el H1 lo utilizo para el titulo de cada pagina que no es el mismo en todas, y el logo suele serlo.

metacortex · #16 (**permalink**) 24/02/2008, 16:49

Cita:

Iniciado por elquique

Si, o en otro H (si no te importa el orden jeje) ya que el H1 lo utilizo para el titulo de cada pagina que no es el mismo en todas, y el logo suele serlo.

El orden importa

. Lo que planteas se soluciona fácilmente:

Código:

<h1 id="logo"><?php echo $titulopagina ?></h1>

La variable no tiene desperdicio. Además de este caso se usaría para otras regiones de la página, tales como la etiqueta Title, menús y alguna barra inline de navegación.

elquique · #17 (**permalink**) 24/02/2008, 17:30

Si eso es lo que yo uso en PHP :)