JMiur [E]

Cuando usamos una plantilla de Blogger, lo que vemos en común con todas ellas es que tienen definido un ancho, generalmente escaso para estos tiempos en que los monitores tienen resoluciones de pantalla cada vez más grandes; están pensadas para 800x600 y si bien podemos cambiar ese ancho, siempre, estamos hablando de algún valor fijo.

Una forma diferente de encarar el diseño de una web es utilizar los llamados anchos fluidos es decir, que los distintos sectores del blog cambien de tamaño según sea la resolución de pantalla que utilice quien lo visite.

La forma estandard de hacer una plantilla fluida es utilizar anchos establecidos como porcentajes en lugar de valores en pixeles, de esa manera, del 100% de la pantalla, las entradas podrían tener el 70% del ancho y la sidebar el 30% o cualquier otra proporción. Pero hay que aclarar antes que nada que no hay un diseño bueno y uno malo, dependerá del tipo de contenido y del gusto personal. Ninguno de ellos es perfecto; los anchos fluidos tienen el inconveniente de su propia definición, si todo es variable, no sabemos si este es excesivo o escaso para ubicar determinado elemento, sobre todo, esos que solemos colocar en la sidebar.

Para minimizar estos problemas, hay opciones de diseño que combinan ambas cosas, estableciendo anchos fijos para determinados sectores y anchos variables para otros.

Un ejemplo muy interesante de este sistema es el que se muestra en un artículo de A list apart que ya tiene sus años pero que, con modificaciones, podemos adaptar a un blog de Blogger.

La idea es diseñar una plantilla con tres columnas, una sidebar a la izquierda, el área de entradas al centro y otra sidebar a la derecha. Ambas sidebars tendrán tamaños fijos definidos y el área de entradas será fluida, adaptando su ancho a la resolución del monitor de tal manera que el blog ocupara siempre el 100% de la pantalla.

Un detalle que lo vuelve aún más interesante: como los navegadores muestran las páginas webs en orden, el uso de sidebars a la izquierda suele ser problemático ya que esta se carga antes que las entradas y, como en general los navegantes no tienen (tenemos) mucha paciencia, si el contenido de esa sidebar es excesivo, hay visitantes que simplemente se irán porque todos queremos ver el contenido rápidamente. En este caso, la columna central se mostrará antes que las sidebars, sin importar la disposición de estas.

Blogger tiene una diagramación sencilla (no se rian) que podemos ver en una plantilla mínima si no expandimos los artilugios; el contenido del body es algo así:
<div id='outer-wrapper'><div id='wrap2'>
<div id='header-wrapper'>
....... este es el header .......
</div>
<div id='content-wrapper'>
<div id='main-wrapper'>
....... esta son las entradas y se muestran a la izquierda .......
</div>
<div id='sidebar-wrapper'>
....... esta es la sidebar y se muestra a la derecha .......
</div>
<div class='clear'>&#160;</div>
</div>
<div id='footer-wrapper'>
....... este es el footer .......
</div>
</div></div>
A este esquema simplemente le vamos a agregar una sidebar extra (la izquierda). Eliminaremos esto:
<div class='clear'>&#160;</div>
y en su lugar, pondremos esto:
<div id='sidebar-wrapper-2'>
<b:section class='sidebar' id='sidebar2' />
</div>
De aquí en adelante, el resto es puro CSS así que vamos a las definiciones elementales.

El body sólo tiene un dato importante a definir, el ancho mínimo y esto lo podemos calcular sumando el ancho de las dos sidebars (que tendrán anchos fijos) y un poco más, tanto como se nos ocurra que puede ser contraida la columna central, por ejemplo, digamos que será de 300 pixeles; entonces, tendremos:

sidebar izquierda + sidebar derecha + 300 que en este ejemplo dará 250 + 200 + 300 = 750
body {
margin:0;
padding:0;
min-width: 750px;
}

#navbar { /* oculto la navbar */
display: none;
height:0;
visibility: hidden;
}

#content-wrapper {
padding-left: 200px; /* es igual al ancho de la sidebar izquierda */
padding-right: 250px; /* es igual al ancho de la sidebar derecha */
}

#content-wrapper #main-wrapper,
#content-wrapper #sidebar-wrapper,
#content-wrapper #sidebar-wrapper-2 { /* propiedades comunes a las tres columnas */
float: left;
position: relative;
}

#header-wrapper { /* cualquier propiedad */
/* no debe tener un ancho definido */
text-align:center;
}

#outer-wrapper { /* no tiene propeidades */ }

#main-wrapper { /* la columna central con las entradas */
width: 100%;
}

#sidebar-wrapper { /* la sidebar izquierda */
/* el margen es negativo y del mismo valor que el ancho */
margin-right: -250px;
width: 250px;
}

#sidebar-wrapper-2 { /* la sidebar derecha */
/* esta es la clave de todo */
margin-left: -100%;
right: 200px;
width: 200px;
}

#footer-wrapper { /* cualquier propiedad */
/* no debe tener un ancho definido */
clear: both;
text-align:center;
}
Sólo nos faltaría algo, evitar que haya problemas en las versiones de Internet Explorer anteriores a la 8; para eso, debajo de ]]></b:skin> agregaremos lo siguiente:
<!--[if lt IE 8]>
<style type='text/css'> #sidebar-wrapper-2 {left: 250px;} </style>
<![endif]-->

43 comentarios:

Unknown  

¡¡Muchas gracia!! La verdad es que gracias a ti estoy pensando en el re-diseño de mi página. ¡¡A ver si no la cago!!

Saludos y gracias

Responder
Admin  

Está bueno JM, solo que es un poco estrecha la parte del body no? Las entradas, ocupan demasiado espacio las sidebares, se puede modificar eso?
Pierde prioridad o no se como llamarlo, estoy medio dormida ya y la neurona trabaja a media marcha, vos me entendés no? Me refiero al body, al contenido del blog...
Un abrazo, me voy a dormir proque me duermo sobre el teclado :$

Responder
Admin  

Salioooooó??? No parezco "la abuela" de Gasalla :D :D Entre Blogger que anda mal y la moderación nunca se si salen mis coments :S Por eso me suscribo :D

Responder
Raúl Montero  

Está muy bien, sólo hay que jugar con css y listo. Muchas gracias por la guía.

Responder
Bonzu Pipinpadaloxicopolis III  

No sé, no me convence, mejor que no varíe.

Responder
Unknown  

a mi me gusta que la parte de las entradas sea más grande, como tienes en tu blog, cómo se logra eso Jmiur??? besos

Responder
Gem@  

Muy bueno, ya tenemos una solución para que quede todo en su sitio aunque cambiemos de resolución.
Por cierto J.Miur los cojines de la imagen que hay en el ejemplo me encantaron, pero presté atención a los ejemplos que conste :)

Responder
José GDF  

Supongamos que hago todo esto: definir los anchos de las sidebars, dejando fluido el ancho de las entradas. Y ahora supongamos que coloco una imagen bastante grande en una entrada. En una resolución baja es probable que se quede corta de ancho la columna de las entradas. ¿Qué pasaría en tal caso? ¿Se montaría la imagen sobre la sidebar de la derecha, se quedaría oculta?

Y casi lo más importante, ¿se puede tomar alguna medida -imagino que con CSS- para que las imágenes se adapten a las resoluciones pequeñas de pantalla?

Responder
Unknown  

Saludos JMiur. Antes que nada felicitarte por tu blog, me ha ayudado mucho en varios momento que andaba perdido. Mi pregunta es la siguiente: ¿Existe en Internet un sitio similar a Blogger o Wordpress, el cual en lugar de 'blogs', provea de sitios webs "profesionales"?

Gracias

Responder
Chacien  
Este comentario ha sido eliminado por el autor.
Responder
Mandelrot  

Ya tiene bastante tiempo, pero ya que está relacionado con el tema y el truco funciona en todos los navegadores aunque sean viejos...

http://mandelrot.com/2007/02/sidebar-de-ancho-fijo-en-diseo-flexible.html

Responder
Gem@  

Menos mal que yo no soy grande porque eso de comerse las cosas :O

Responder
Unknown  

jajaja piedra preciosa, yo tampoco grrrrrrrr :X

Responder
Unknown  

menos mal que no soy una chica mayor, estoy con los tutoriales de don JM y sí me he comido varios errores en mi bella plantilla ;) guauuuuuuuuu

Responder
Unknown  

perdón JM
Gem@ me equivoqué en el pajarito hoy 'Pablo necesia volver a casa', cuando lo ví ohhh no puedo ser tan :X

Responder
JMiur  

Carlos: es una alternativa a tener en cuenta.

k_nelita: Las sidebars se dimensionan a gusto del consumidor. El cómo se verá, depende de la resolución de la pantalla, ese es el asunto, en realidad. En mi opinión si se usa 800x600, dos sidebars suelen ser demasiadas, o deberán ser muy angostas pero, todo depende del resultado final que se quiera. Y sí, los comentarios salen, de tanto en tanto, salen :D

Bonzu: No es mejor ni peor. Son herramientas. Todas sirven pero no todas sirven para hacer cualquier cosa, depende. Cuanto más conozcamos, mejores decisiones podremos tomar.

José: Tal como dije, no es ni mejor ni peor que cualquier otro sistema. Así, en teoría, es un modelo apto para sitios donde las imágenes no tengan relevancia. En todo caso, lo mismo pasaría con un ancho fijo y así comoeso debe tenerse en cuenta para evitar problemas (por ejemplo, colocando overflow:hidden o alguna cosa similar) , en este otro caso, una forma de minimizar ese problema es colocar en el main wrapper algo así como #main wrapper img { max-width:valorpx; } aunque claro, lo razonable sería establecer el ancho mínimo de todo el blog para que contemple el ancho máximo de las imágenes que vamos a utilizar. No hay reglas.

David: No sé a que llamas "profesional". Hay sitios que permiten crear webs de manera gratuita, Google Sites, por ejemplo.

Chacien: Me alegra que se solucionara. Algunos nos comemos las letras otros se comen los títulos, supongo que es mejor que comerse la uñas :D

Gem@: ¿Estarás haciendo dieta? :D

Graciela: Este es un tema raro. No, el post no, hablo de eso de comerse letras. Cuando uno come mucho, engorda y cuando uno se come letras, las palabras enflaquecen. Raro, muy raro.

Responder
Unknown  

estoy comiendo sano desde el lunes de la semana anterior, si mi médico me vé ...venga niña ;) tenemos que hablar, la consulta sale $ 150.00.
Ya no sé cúal es mi problema :S pobrecita de mi...
Ando vagabundeando por aquí hace un buen rato, tratando de aprendher...veremos si queda algo...adiosssssss
PD: a qué viene esto, espera ahhh lo de las palabras enflaquecidas!!!

Responder
Gem@  

Graciela ¿te equivocaste hoy? yo me equivoco todos los días.
El médico te manda comer sano que viene a ser lo mismo que verduritas, carne y pescado a la plancha, mientras tanto... con los 150.00 en se pone moradito a comer.
No hago dieta J.Miur soy de buen comer, y también me como alguna letra como aperitivo para solidarizarme contigo :D

Responder
JMiur  

Hoy, no me equivoqué.
Ayer sí.
Mañana también.

Lo hago día por medio excepto los años bisiestos. Soy sistemático. Mi psiquiatra me ha dicho que todo es un trauma infantil producto de haber ingerido cantidades excexivas de sopas de letras pero, vaya uno a saber si es cierto porque también me ha dicho que estoy un poco loco y yo se perfectamente que mi locura es completa ya que no me gustan las medias tintas :D

PD: lo siento, es la hora y hablar de comida me dio hambre y deliro.

Responder
Unknown  

Eso era exactamente lo que quería JMiur :D Gracias! Lo preguntaba por tener una alternativa a Blogger en caso de necesidad.

Volviendo a blogger, estuve utilizando el buscador en Vagabundia, intentando encontrar un post acerca de lo que creo que se llama un 'post anuncio', es decir, un post que queda siempre fijo entre la cabecera y los post que se van publicando.

¿Sabrías donde puedo encontrar un post que hable de ello?

Muchas gracias :)

Responder
Unknown  

es que precisamente sufro de anorexia y bulimia piedra preciosa y Jmiur, tratada por mi médico amigo desde los l9 años. Por eso el costo de la consulta. Estoy en etapa subiendo subiendo jajaja
Ya le tengo dicho, varios de esos autos usted lo ha comprado con mis consultas jajaja me mira como diciendo a ésta chica ;) le falta un tornillo.
Me equivoco a diariooooooooo, solo que justo que pedimos ayuda para Pablito, me sale en el bendito pajarito necesia en lugar de necesita.
jajaja recuerdan cuando jugábamos a encontrar palabras en la sopa de letras???

Responder
Gem@  

No lo sabía Graciela, de ser así no te habría dicho esa frase en tono de humor.
De todas formas me parece muy valiente que lo reconozcas, porque ayuda a la personas que piensan que la anorexia es algo que sólo ocurre en casos aislados y que a nosotros, o nuestro entono nunca nos va a ocurrir.
Un beso, preciosa sinpiedra :D

Responder
JMiur  

David: una alternativa para eso la puedes ver en esta entrada del Blog de Gem@

Graciela: La falta de tornillos no es problema :D

Responder
Unknown  

Gem@ está todo muy bien, estamos hablando en broma, es una enfermedad muy seria si, pocas veces bien escrito en los blogs y estas cosas.
Afecta a cualquiera, así es, hoy lo puedo decir, hasta reírme de mi misma, estoy muy bien controlada por el psiquiatra que me acompaña desde muy jovencita. Por varias razones no puedo subir mucho de peso, hoy estoy con muchos kilitos de más. El comer sano, quizás no lo dije bien: es comer cada 2 o 3 hs solo que es casi imposible que pueda lograrlo, porque no tengo apetito y luego booomm...Jmiur el terapeuta no se asusta por la falta de tornillos :D

Responder
Gem@  

¿Lo ves? me sigo equivocando :O donde entono era entorno y sinpiedra era sin piedra.
Quien no se equivoque debe ser perfecto y por lo tanto aburrido :D

Responder
Unknown  

Gracias JMiur, y gracias también a Gema! :)

Responder
Unknown  

lo entendí perfecto, pero ahora no recuerdo cómo se llama cuando a pesar de los 'errores' uno lo interpreta jajaja...el comando limpieza ha culminado 21 hs, aquí estoy tratando de robar 'ideas a J'
y a pesar que el fútbol me interesa nada: aquí estamos con mis chicas mirando Argentina y Brasil, tenemos al niño Messi de tu equipo, veremos si nos hincha de alegría MUAKCSSSSSSSSSSSSSSSSSS

Responder
Paoиyan  

Necesito ayuda, PORFAVOR!
Bueno, nada más hace semanas y abrí para mi blog realmente no entiendo mucho, yo no tengo una plantilla minima, de hecho con mucho esfuerzo encontré la plantilla TICTAC de 3 columnas, cada una de las sidebars (las columnas verdad?) estan de costado, y bueno.. todo bien, pero la verdad me gustaría que quede la pantalla completa como estas explicando aqui, la verdad no entiendo porque los códigos HTML me salen diferentes, entonces no sé como editarlos.. agradecería si me respondieras! PORFAVOR!

Saludos.

www.minnanoasianworld.blogspot.com

Responder
JMiur  

Para eso, debes modificar toda la plantilla, buscar cada parte y transformarla; quitarle los anchos, etc. Algo bastante engorroso de hacer.

Responder
sebastian giacobino  

Buenas! escribo por dos razones: una para decir que tus post son de mucha utilidad, y estan perfectamente explicados. La segunda es para manguear una ayudita, porque me metí en esto de adaptar mi blog sin ningun conocimiento del tema, así que fui usando los recursos que encontre por ahi. El problema que me surgió es que modifiqué el color del fondo, pero en los textos de las entradas me aparecen recuadros de color blanco de forma aleatoria (o sea, no en todos los textos), quisiera que me ayuden a sacar ese defecto.
dejo mi direccion para que de paso vean mi trabajo: www.sebastiangiacobino.blogspot.com
saludos y muchas gracias!

Responder
JMiur  

Lo que veo en el código fuente es que ese fondo blanco en cuiertos párrafos, está colocado directamente en la entrada:

<span class="short_text" id="result_box"><span onmouseout="this.style.backgroundColor='#fff'" onmouseover="this.style.backgroundColor='#ebeff9'" title="Ilustracion inspirada en el libro "El Rey de Amarillo", de Robert W." style="background-color: #fff;">

¿Estás escribiendolas entradas con algún editor especial? Nada de eso es parte de la plantilla ni se ve ningún script que lo genere.

Responder
sebastian giacobino  

no se si te referis a eso, pero lo que hago es traducir con la herramienta de idiomas de google, hago las correcciones ahi mismo, copio el texto y lo pego. Para editar la entrada no uso nada en especial. Será que en este proceso tambien copio el color del fondo?

Responder
sebastian giacobino  

Listo, está resuelto. Era eso. Muchas gracias!!

Responder
JMiur  

Si, era eso, es la herramienta de traducción la que agrega esos códigos.

Responder
Pacheta  

¿Cómo puedo poner un varios sidebar debajo del título de mi blog?
De manera que quede algo así:
==================TÍTULO DEL BLOG=====================
==sidebar1== ==sidebar2== ==sidebar3== ==sidebar4==

Espero explicarme y GRACIAS POR TODO.

Responder
JMiur  

Aunque en esta entrada de Gem@ se habla del footer, el concepto es el mismo para cualquier parte del blog.

Responder
Gem@  

Disculpa que me entrometa JMiur he leído este comentario tuyo y creo que lo que más se acerca a lo que trata de hacer está en esta entrada:
http://gemablog-.blogspot.com/2008/05/nuevos-elementos-en-el-header.html
Lógicamente no recordarías la entrada, yo tampoco me acordaba hasta leer el comentario.

Responder
JMiur  

No hay nada que disculpar. Apenas recuerdo mi nombre y eso sólo en si hay buen clima :D

Responder
Unknown  

Hola JMiur, ante todo felicitarte por la excelente labor que desempeñas echándonos una mano con todo esto de los blogs. También para decirte que estoy aquí gracias a las recomendaciones de Gem@ que muy gentilmente me ha pasado tu url para que despeje mis dudas (que son muchas)Por tanto gracias a ella y a tu blog es que estoy haciendo historia en esto de modificar mi plantilla. Gracias a los consejos de Gem@ y todos tus tutoriales (1-8) he llegado hasta aquí felíz porque las cosas me van saliendo. Tus explicaciones son más que claras y muy atinadas. He seguido paso a paso los tutoriales y he llegado a colocar el footer (turorial 7) pero cuando quiero colocar el fondo y la cabecera no logro visualizarlos... Cuando dices que usemos el rectángulo body y el html para insertar las imágenes, el rectángulo html no está en mi plantilla por tanto no se me ocurre mejor idea que crear un rectángulo nuevo, pero sólo he tenido suerte con el footer. Espero estar explicandome bien... Me gustaría si me puedes explicar en qué me estoy equivocando. Aprovecho para enviarte un saludo a tí y a Gem@ (espero que lea este comentario) y decirles que nada más termine con la estructuración de mi blog les dedicaré el Footer a los dos por vuestro apoyo y consejos. Gracias!!

Responder
JMiur  

Vamos de a poco. El rectángulo HTML es el contenedor principal de toda página web. Si te fijas, todo comienza con <html .......> por lo tanto, si quisiera que tuviera un color de fondo, pondría esto:
html {background-color:red;}
Lo usual, no es eso sino ponerlo en el body que es el equivalente:
html {background-color:red;}
Ambas definiciones darían el mismo resultado.

Eso es teoría, vamos a tu blog. Allí, veo que has agregado dos divs extras:

<div id='otroBODY'>
<div id='piepagina'>
<div id='outer-wrapper'>
...............................

Yo, simplemente, eliminaría uno de esos divs que me parece innecesario: id='piepagina'>

Ahora, volvemos al esquema simple y ponemos los fondos que no sé exactamente cómo quieres ver pero, sería algo así:

body {
background: #FFFFFF url(http://3.bp.blogspot.com/_dIuNU7f_S1A/S_0McUsxPII/AAAAAAAAVqI/185Atqi2Pow/s1600/bandafondo.png) repeat-y 50% top;
.......
}

#otroBODY {
transparent url(http://4.bp.blogspot.com/_dIuNU7f_S1A/S_w37I7IlJI/AAAAAAAAVp8/3TrJf_T_vik/s1600/footer.jpg") no-repeat 50% bottom:
.......
}

Necesitamos dos rectángulos para poner dos imágenes, en uno, el BODY, ponemos la que se repite y en el otro, #otroBODY ponemos la segunda, que centramos y mandamos al fondo de la página.

De ese modo, deberías ver algo como esto.

Responder
Unknown  

Gracias Jmiur, muy clara tu explicación, finalmente lo logré....era un poco distinto a lo que entendiste, pero creo que fue que no me supe explicar...no te dije nada de la cabecera. Fijate cómo lo solucione si tienes un rato, creo que ha quedado perfecto....ahora a probar con todos los exploradores posibles y todas las resoluciones!!! jejeje. Muchas gracias crack!

Responder
JMiur  

Claro, faltaba la cabecera :D Muy buena :D

La idea es siempre más o menos la misma, un DIV para cada imagen, tantos como necesites.

Responder
Predadornocturno  

soys los mejores del mundo gracias por todo

Responder

¿Quiere dejar un comentario?

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

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