JMiur [E]

Los blogs suelen tener una estructura clásica donde vemos el contenido principal a la izquierda y el contenido secundario a la derecha; en las plantillas de Blogger, están definidos como dos DIVs identificados como main-wrapper y sidebar-wrapper respectivamente pero, eso sólo es una convención y pueden tener cualquier otro ID.

Si se ven uno a un lado del otro es porque se les agrega la propiedad float con un valor left para el de la izquierda y un valor right para el de la derecha.

Hasta ahí, todo es normal, si pudieramos abstraernos del resto de las etiquetas, tendríamos un contenedor (en Blogger se llama content-wrapper) y los dos rectángulos interiores:
<div id="contenedor">
  <div id="principal"> ....... </div>
  <div id="secundario"> ....... </div>
</div>
En este ejemplo, el CSS diría algo así:
#contenedor {margin: 0 auto; width:515px;}
#principal {background-color: #456; float: left; width: 300px;}
#secundario {background-color: #234; float: right; width: 200px;}


Como los navegadores arman la página, leyendo las etiquetas de arriba hacia abajo y de izquierda a derecha, primero se ubica el DIV de la izquierda y luego el de la derecha; como el contenedor mide 515 pixeles de ancho y los contenidos 300 y 200, sobran 15 pixeles que es lo que se separan entre si.

Podría conseguir el mismo resultado haciendo que ambos flotaran a la izquierda y en ese caso, quedarían "pegados" y debería usar un margen de 15 pixeles para separarlos pero, si en lugar de colocarles float: left a ambos, les coloco float: right, las cosas cambian, la posición se invierte pese a que el HTML sigue siendo el mismo:



Esta es la característica principal de la propiedad float: deshace el orden natural de las etiquetas, re-ubicándolas.

¿Para que podría servir esto si bastaría cambiar el orden del HTML para que la sidebar apareciera a la izquierda?
<div id="contenedor">
  <div id="secundario"> ....... </div>
  <div id="principal"> ....... </div>
</div>
</div>

#contenedor {margin: 0 auto; width:515px;}
#principal {background-color: #456; float: right; width: 300px;}
#secundario {background-color: #234; float: left; width: 200px;}

Me parece que el punto clave es que el orden en que están las etiquetas es fundamental cuando se trata de optimizar un sitio ya que hay algo de sentido común, así como las personas leen de arriba hacia abajo y de izquierda a derecha, lo mismo ocurre con los motores de búsqueda y como estos motores ignoran las propiedades, si el HTML tiene "arriba" el contenido secundario (la sidebar por ejemplo) y debajo, el contenido principal (las entradas), lo secundario tendrá prioridad; es lo mismo que ocurriría con un periódico que colocara el titular debajo del artículo y no arriba.

Los motores de búsqueda no entienden de derechas e izquierdas, leen las cosas de manera secuencial, una debajo de la otra y se sabe que no son pacientes así que, simplemente, toman lo primero que encuentran y lo usan para indexar el sitio. Si lo que está primero, es lo secundario, el resultado podría no ser el mejor.

Si lo que queremos es tener una sidebar a la derecha en lugar de tener una a la izquierda, deberíamos colocar el HTML de modo natural, poner el contenido primero y luego el secundario y establecer las propiedades CSS para invertirlos gráficamente.
<div id="contenedor">
  <div id="principal"> ....... </div>
  <div id="secundario"> ....... </div>
</div>
</div>

#contenedor {margin: 0 auto; width:515px;}
#principal {background-color: #456; float: right; width: 300px;}
#secundario {background-color: #234; float: left; width: 200px;}

17 comentarios:

Eulalia  

Entonces, si se tienen 2 sidebares y en el html están colocadas
sidebar
main
newsidebar

¿indexarán el contenido de la sidebar y no las entradas?

Responder
JMiur  

No, Eulalia. Se indexará igual pero, habrás notado que a veces, tanto en los buscadores como en algunos gadgets de servicios, en lugar de mostrarse el contenido, se muestra algún otro texto poco relevante o de la sidebar o de algún otro elemento. En principio, los buscadores intentan descubir cuál es el contenido real pero no siempre lo consiguen.

También desde el punto de vista del usuario, que un sitio se cargue mostrando primero lo secundario en lugar de lo principal, es molesto; de allí que lo ideal es que el orden siempre sea el mismo: header, contenido, sidebar, footer y que la diagramación se realice con CSS, ubicando las cosas en distintas partes pero, que el código fuente tenga ese orden que es igual al orden natural con el que leemos, de arriba hacia abajo y de izquierda a derecha.

Responder
Eulalia  

Es cierto, a veces veo frases que no son de entradas, pero es que a veces incluso he visto frases de comentarios.

El caso que te digo es el de Tuneando y el de varios blogs que tengo a 3 columnas. La posición en el HTML es la que digo y luego en el css dos están a la izquierda y otra a la derecha y mediante margin posiciono la del centro.

Un abrazo.

Responder
ártabro  

Te quiero expresar mi reconocimiento por tu trabajo y desinterés hacia los, que como yo, visitamos tu página en busca de ayuda al objeto de hacer más presentable las nuestras.
Muchas gracias y un afectuoso saludo.

Responder
JMiur  

Eulalia
No creo que ese blog tenga problemas de indexación ¿has notado algo raro?
Lo dicho acá es, digamos que la teoría ideal, eso no significa que armados de otro modo no funcionen porque sobre estas cosas no hay reglas tan generales.
Si no has visto problemas, no me preocuparía por el tema.

Gracias, ártabro :D

Responder
María José Moya (Mariajo)  

JMiur, pues me he inquietado con lo que dices, porque lo cierto es que cuando hasta hace año y medio tenía la plantilla original (tuneada, pero con columna central y sidebar a la derecha) tenía un 6 de pagerank, y sin embargo a los meses de cambiar a ponerle una sidebar más (quedando una columna central y una sidebar a cada lado), bajó a 5, y hará un par de meses a 4. Podría pensar que hay menos entradas de la gente, etc., pero lo cierto es que es todo lo contrario, asi que no me lo explico mucho, la verdad.

He leido tu entrada pero no consigo enterarme mucho para mis límites informáticos. ¿Te importaría entrar a mi espacio y ver si hay algún error o algo que podria optimizar? ¿Qué puede haber pasado? (es raro, creo yo, pasar de un 6 a un 4 en año y medio). Lo cierto es que llevo el blog con mucho mimo... aunque eso sí, por el tema de mi salud no puedo actualizarlo más que una vez a la semana. A veces algunos días más (pero lo mismo me pasaba antes. Eso sí, a trancas y barrancas, pero soy constante, desde 2006 que empecé con él).

Muchas gracias por tu amabilidad y paciencia (como siempre)

http://mi-estrella-de-mar.blogspot.com/

Responder
Eulalia  

No, no, no he notado nada raro en Tuneando, cuando dije; "El caso a que me refiero" hablaba de la posición de los div en el HTML. Lo de ver palabras incluso de los comentarios suele ser si hago una búsqueda de algún tema, que las palabras que aparecen a veces suelen estar en un comentario.

Un abrazo.

Responder
leda  

hola
Pues fíjate que justo hoy me levanto y mi blog ha dejado de tener la columna en la derecha y aparece abajo de los comentarios.... siguiendo al principal...
No he tocado nada de nada.

¿Cómo ha pasado eso?

De verdad desde que cambié a la nueva plantilla todo son problemas. Estoy hasta las narices.

He buscado los anchos, y no hay nada modificado, pero claro, es que para novatos como yo, ahora es tarea de chinos modificar las plantillas nuevas.

¿Alguna idea?

Responder
leda  

Bueno, es que encima es sólo en la página principal, si veo una entrada en concreto, o le doy al resumen de las entradas anteriores, sí que aparece.
Esto es para volverse loco.
Gracias por tu ayuda, porque si no fuera por sitios como el tuyo, alguno habíamos vuelto a escribir en las cuevas con velas y carbón, mucho más seguro y fácil.

Responder
JMiur  

Tampoco vi nada problemático en tu blog, Eulalia así que preguntaba por las dudas. Yo no me preocuparía por el tema.

leda
No veo ese error pero, por lo que describes, lo más probable es que sea un error en una de las entradas; alguna etiqueta mal cerrada por ejemplo. Si sigues viendo eso y n oencuentras dónde está el error, ve colocándolas como borrador hasta dar con la que causa el inconveniente.

Responder
JMiur  

María José Moya (Mariajo)

Lamento que te haya inquietado pero, no es algo que deba ser tomado al pie de la letra, sólo es una sugerencia general.
En tu blog no veo nada erróneo y el valor del PageRank es algo bastante oscuro que carece de importancia real.
También es cierto que muchos sitios han sufrido improtantes disminuciones en su trafico desde que Google comenzó a utilizar su nuevo sistema de indexación

Responder
María José Moya (Mariajo)  

Muchas gracias por comentármelo, J.Miur. La verdad es que en su momento, cuando sacaste la entrada que me pones la lei, pero como la nueva bajada de pagerank sucedió un par de meses después, pues no lo relacioné (debe ser que entre que Google hizo el tema y me afectó en la práctica, pasó un tiempo).

La verdad es que estoy bastante hartita ya de sus imposiciones dictatoriales, cada vez más arbitrarias y con una "lógica" que no sé de dónde la sacan. Están amparados en el monopolio, cada vez mayor, que ejercen, y eso desmotiva y frustra a cualquiera.

Recuerdo cuando hace años ha, a Microsoft se le multó y obligó a desligar de su software no sé qué (no sé si era el IE) porque venía incorporado a su sistema operativo y además causaba incompatibilidades con el otro navegador de entonces si se quería poner en el ordenador (Netscape).

En lo que nos ocupa, por cierto, sobre el supuesto tema de que prevalezcan los contenidos originales sobre las copias, como bien dices en tu entrada, para nada: con todos mis respetos para quien haga copias y pegas sn ánimo de apropiación del trabajo de otros, dando la fuente (en concreto sobretodo a los que porque por temas de salud no puedan estar en la red de otro modo, si quieren "actualizar" el blog con más asiduidad, por ejemplo, de lo que yo pueda hacer), hay espacios que en septiembre pasado tenían un 0 de pagerank tras un año en al red (lo que me resultaba inconcebible y escandaloso --aunque fueran posts copiados de noticias, etc., incluidos algunas entradas mías--) y en los mismos meses que Google me bajó de pagerank (teniendo contenido original y copiado en diferentes sitios), a estos otros sitios los subió a un 3 (que én dos meses es tan burrada, como un 0 con anterioridad).

Vamos, que no sé si me he explicado, pero lo que vengo a decir es que las prácticas arbitrarias y pedulantes de Google, me tienen hasta las narices... Y encima, no se puede uno quejar a ningún lado, y aunque pudiéramos, Google no escucha!. Grrr.

En fin, al menos tenemos a gente como tú, ayudándonos entre tanto desconcierto!.

Un besote,

Responder
Juan  

Hola J.Miur. Una duda. Me gustaría situar los 3 iconos que aparecen en la sidebar derecha en otro lugar. Me gustaría ponerlos en paralelo a "Página principal" "Acerca de/contacto/colabora" y pegado a la derecha. Que esté en la misma línea, a la misma altura, en paralelo, en la parte derecha.

Muchas gracias de antemano J.Miur

Un saludo

Responder
JMiur  

María José Moya (Mariajo)
Pués que Google es arbitario, no cabe la menor duda :D

Juan:
Se puede hacer pero deberás modificar varias cosas, lo primero es moverlos y ubicarlos en ese div llamado menubar, luego, habrá que ver qué propiedades CSS hay que modificar o agregar para que quede alineado. No hay una regla general.

Responder
leda  

JMiur, pues el error que te comenté sólo me pasa a mí, al otro administrador no, ve la sidebar en su sitio.
Voy a ignorarlo unos días que a veces es más sano, porque sino un día lanzo el portáril por la ventana.
Sobre page rank ni opino, porque sé que del dos no subiré nunca, tengo mi pequeño publico y me contento.

Responder
Yonkiz  

Hola JMiur como siempre muy cuidadosamente entendibles tus entradas ;)

Tengo una duda, en wordpress, el sidebar tiene un CSS que hace que todos los enlaces tengan un icono y un cierto efecto al hover, la cosa es que, al poner una imagen con enlace, tambien se le agrega ese icono y el efecto hover por la clase ya definida para todo el sidebar. ¿hay alguna manera de ignorar para esa sola imagen/codigo el css predeterminado?

Muchas gracias y saludos!

Responder
JMiur  

leda
Yo tampoco veo ese error así que, lo mejor es que borres la caché del navegador proque puede ser que haya quedado algo erróneo guardado.

Yonkiz
Depende del servicio de WP que uses, si se trata de wordpress.com, allí no tienes ningún tipo de opción para cambiar el tema el uso ya que no puede ser editado a menos que pagues.
Si se trata de un hosting propio que usa WordPress, habría que verlo para saber cuáles son las propiedades que deben ser cambiadas.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR