Problema con estructura de encabezados

[MarioAraque]

Buenas tardes,

Les comento que estamos en el desarrollo de una Web de Apuestas sobre Caballos. La misma esta en una fase "beta"...tirando a "omega" jaja, pero bueno, mas alla de eso, me instale el complemento de Firefox WAVE, para ver los headings de mi web, y vi que hay un salto desde H1 a H3, dejandome los titulos de los articulos que tengo (H2), debajo, dejando la Web "mal" (no como yo quisiera).

Miren, les dejo el enlace a la web, y si alguien tiene el Wave instalado se dara cuenta: http://www.apuestascaballos.net/beta/

Lo que yo quisiera es que el H3 de las opciones salga debajo de los H2, que son los titulos de los articulos que iremos subiendo. La verdad no tengo ni idea de como hacerlo, y me gustaria que me guien, se trata de cambiar el orden de aparicion?

Estare muy agradecido por la ayuda recibida. De hecho nisiquiera se si el thread esta bien ubicado en este subforo, es un tema que la verdad no se como encarar, nisiquiera se en que categoria debo ponerlo. En verdad agradecere mucho un poco de orientacion para mi aprendizaje.

Saludos.

[Daniel Ulczyk]

Tema movido desde el foro de Accesibilidad y Usabilidad

[emprear]

Mario:
Hay algo que se me escapa, en tu código, el orden que tienes es

<h1>.... logo </h1>
<h3>Menú de opciones</h3>
<h2>Artículo de ejemplo que también</h2>

Puesto así, el wave siempre te va a tirar errores y advertencias.
Eso en lo que respecta al código en sí.
Ahora que conceptualmente, los headers tienen otra funcionalidad, no se hicieron para que le pongas una imagen/link. la logica de los mismos es facilitar el estructurado y lectura de un documento. Te sugiero que leas el articulo publicado en http://cgnauta.blogspot.com/2008/06/...portancia.html .para ver algo sobre el tema.

Si lo que te preocupa es la parte visual, bien puedes manejar el formato de salida de los headres con CSS.

saludos

[MarioAraque]

Hola emprear,

Antes que nada muchas gracias por responder. Te comento que la Web esta hecha con Drupal, y la estructura viene asi por defecto. La verdad que tenes razon en cuanto a la usabilidad de los headers.
Mi intencion es solo cambiar la estructura, que primero salga el h1 con el logo, luego los h2 con los titulos de las noticias, y luego los h3 con los menus de opciones (que ahora mismo hay 1, pero bueno se iran agregando poco a poco).

Me comentaste que se puede hacer con CSS, y como es eso? Yo pense que el orden se estipulaba dependiendo de su orden de aparicion en el codigo, pero ahora estoy mas intrigado de saber como se hace.

Leere el enlace que me diste, pero estare esperando una respuesta tuya.

Muchas gracias!

Saludos.

[awesomeboy]

hola amigo pues con el css y editando la plantilla de drupal, puedes cambiar los valores que tiene por defecto tus h?, a eso se refiere el compañero de arriba

[emprear]

Mario:
te explico, en cuanto a la estructura y uso de los headers, lee el ertículo que te recomendé, alli está mucho mejor explicado de lo que yo podría hacerlo.
Con respecto al manejo del estilo de los header con css te cuento, he visto que muchos utilizan simplemente los h para destacar un texto o titulo sobre otro en cuanto a su salida visual, entonces desvirtuan la lógica del uso de los mismos, si quieres modificar el aspecto bien podrias incluir en tu CSS

h1 {
font-size: 8pt;
}

h2 {
font-size: 12pt;
}

h3 {
font-size: 16pt;
}

o lo que se te ocurra, incluso ponerle un background....

lo de la plantilla drupal, no tengo la menor idea porque no uso plantillas, pero por ejemplo


Si tu

<div class="block-top clear-block">
<h3>Menú de opciones</h3>
</div>

lo reemplazas por

<div class="block-top clear-block" style="padding-left: 40px;">
Menú de opciones
</div>

no habrá necesidad de usar un h3 y el aspecto visual es el mismo y te ahorrarás el error del Wave, si es que tanto te preocupa.


Saludos

[MarioAraque]

Es que la gente para la que trabajo si que quiere que aparezcan los H3. Ellos quieren que el orden que muestra el WAVE se invierta, y queden primero los H2 y luego los H3.
A mi lo que mas me preocupa es que no haga lo que ellos me dicen jeje, la verdad si es por mi cambio el valor del div agregandole un style como el que vos me pusiste al final, emprear, y listo, pero no es lo que ellos quieren.

El tamaño de la fuente afecta a la aparicion de los headers? Mi idea es saber como cambiar eso y yo despues me lo curro tocando las plantillas de Drupal.

Siendo sincero, aun no pude leer el articulo, estoy con unas cositas de otras webs, y la verdad no me ha dado tiempo. Prometo leerlo en un rato (1 hora o asi).

awesomeboy, puedo cambiar los valores de los Headers con css, tocando los ficheros .css de Drupal, pero me gustaria saber, tambien por aprendizaje, que es lo que afecta al orden de los mismos, y que es lo mas recomendable de tocar para hacer un buen trabajo (la web ahora si la ves da pena, pero la idea es que quede bien bonita ya que es un proyecto bueno).

Muchas gracias a ambos!

Saludos.

[emprear]

Vamos otra vez
En primer lugar convengamos que tu post original se originó en el asunto del Wave en firefox, el orden de los H es simplemente el orden en que aparecen en el código fuente, no importa si visualmente estan al tope o al pie de la página.

Me atengo al ejemplo de la página que te recomendé, esto suena lógico

<h1>Indice general</h1>

<h2>Inicio de la aviación</h2>

<h3>Davinci y el hombre pájaro </h3>
<p>Texto corriente</p>
<h3>El dirigible y el globo</h3>
<p>Texto corriente</p>
<h3>Los hermanos Wright </h3>
<p>Texto corriente</p>

<h2>Aviones de motor</h2>

<h3>Aviones de 2 y 4 alas </h3>
<p>Texto corriente</p>
<h3>Aviones de turbohélice</h3>
<p>Texto corriente</p>
<h3>Aviones de reacción</h3>
<p>Texto corriente</p>


El código de tu página nos muestra:

<h1>
un link con imágen al mismo sitio
</h1>
<h3>Menú de opciones</h3>
<h2><a href="/beta/articulo-de-ejemplo-que-tambien-lleva-acentos-y-letras-enes" title="Artículo de ejemplo que también lleva acentos y letras EÑES">Artículo de ejemplo que también lleva acentos y letras EÑES</a></h2>

Eso no tiene mucho sentido.

Si la gente que te encargó el trabajo, te lo encargó a ti, se supone que el que sabe del tema eres tú, y no ellos. Así que ponte firme y explicales. Aqui no se trata de si a ellos les gusta una combinacion de colores que a ti no. Aquí se trata de realizar un documento en lenguaje HTML que tenga la estructura más correcta posible.
espero que se entienda mi explicación
repito:
el orden de los H es simplemente el orden en que aparecen en el código fuente, no importa si visualmente estan al tope o al pie de la página.


saludos

[tokero]

Buenas Mario:

En prinicio y bajo mi opinion, el problema debería provenir del CSS.
Quiero decir que en las plantillas del drupal y no se por que razón, parece que las propiedades definidas para los H3 como el tamaño del texto, es mayor que las definidas para el H2 y esto deberia ser alrreves, por accesibilidad. H1 -> H2 -> H3...

Yo creo que si accedes a la plantilla CSS y le modificas los valores a los Headers como te ha sugerido emprear puedes tenerlo solucionado.

Otra cosa importante que puede estar influyendo es si has definido un tamaño para el texto en un apartado "superior" en la gerarquia del CSS.

Quidicir... si en tu body tienes definido un tamaño para el texto, este estará afectando a todas las partes de tu web que estén por debajo....

Espero haberte sido de ayuda!

[emprear]

tokero, como anda todo por ahi, acabo de estar por tu post sobre las contraseñas en el Firefox. Te aclaro sobre el problema de Mario, para evitar confusiones, olvidémonos pòr un momento del CSS, en tant omario ponga en su código fuente

<h1> (linea 67)
<h3> (linea 116)
<h2> (linea 215)

La extensión Wave va a mostrar advertencias y o errores
insisto:
el orden de los H es simplemente el orden en que aparecen en el código fuente, no importa si visualmente estan al tope o al pie de la página.

En estos momentos estoy trabajando en http://luzdecielo.com , si la pasas por Wave, vas a ver numerosas advertencias, sin embargo si la mandas al validador en http://wave.webaim.org/, te va a decir que supera la norma de accesibilidad.

En cambio la página de http://www.apuestascaballos.net/beta/ no es validada, no por los H sino por la falta de 2 alt="" en las imágenes y por tener un link vacio

Yo sinceramente no me preocuparía tanto
Un abrazo

Saludos

[MarioAraque]

Bueno la verdad ahora que lei el articulo todo me quedo mas claro. Sin dudas tengo que cambiar ese H3 que sale en el menu de opciones, porque no sirve de nada la verdad y me caga la estructura.

Siendo sincero nuevamente, pense que el orden de los headers se podia cambiar, pero si solo esto es representado por el orden de aparicion ... entonces voy a tener que tocar mucho la plantilla y manejar el orden que aparece a mano.

Viendo la estructura del sitio, es mejor que el menu de opciones (<h3>Menu de opciones</h3>) lo deje como un <p> (y lo elimine) o, para una mejor accesibilidad, es mejor que lo ponga como <h2>, dejando los titulares como <h3>? De paso usaria enlaces en un <h3>, cosa que, segun el articulo, es lo mas recomendable.

Muchas gracias de verdad!

Saludos.