-
►
2009
(117)
-
►
diciembre
(10)
- Crear contenido exclusivo para suscriptores
- Felices Fiestas
- Tynt. Para controlar la copia de tus contenidos
- Una galería con orden aleatorio
- Simular una venta modal
- Technorati sólo para angloparlantes
- Pestaña vertical para usos múltiples
- Rotar botones o banners de forma aleatoria
- Bloctoc. Script para hacer un índice.
- En breve. Problemas Blogger.
-
►
noviembre
(11)
- Blogumus definitivo
- Cambiar estilo según el tipo de página
- Menús, botones, banners y textos con flash
- Menú de pestañas
- Indice por categorías (tipo sitemap)
- Indice por categorías
- Entradas relacionadas con miniaturas
- Encontrar imágenes licenciadas CC en Flickr
- Modificar la anchura en los enlaces de navegación
- Una ventana (bloque) emergente con un click
- Botón para ofrecer suscripción por correo
-
►
octubre
(12)
- IconTexto. Más iconos gratuitos.
- Modificaciones al sistema de sumarios 2
- Modificaciones al sistema de sumarios
- Gracias
- Las no-claves para tener un buen blog
- Aviso fijo al final de cada entrada.
- Probando fuentes
- Splash screen... o algo parecido
- Plantilla. Oldbook
- Barra de herramientas Wibiya
- Proteger un contenido... pero poco
- Novedades legales y de cortesía.
-
►
septiembre
(15)
- Splush. Gadget para entradas recientes.
- Feed. Qué es y para qué sirve.
- A vueltas con los avatares y con la exportación
- Decora tu blog... en menos de un minuto
- Personalizar avatares comentaristas
- Avatar en comentarios. Restaurar artilugio.
- 20blogs.Tras la tempestad...
- Plantilla Bloggerbloc
- Para que la nube de etiquetas parezca más una nube...
- Etiquetas perdidas Blogger. Cómo funcionan.
- Luz de Gas RadioBlog
- Premios Bitacoras 2009
- Linkwithin. Entradas relacionadas con imagen.
- Imágenes rotativas
- Construye tu propia tira cómica online
-
►
diciembre
(10)
-
►
2007
(57)
- ► septiembre (5)
Un problema solventable. Ancho variable del blog
21/06/2008
23
Una de las cosas a la que no prestamos mucha atención cuando comenzamos a desarrollar nuestro blog, es la que se refiere al ancho que tendrá nuestro espacio. Cogemos una plantilla, hacemos las pruebas pertinentes observando el resultado en NUESTRA PANTALLA y cuando nos gusta, la instalamos.
Lo que ocurre es que hay una importante diversidad de resoluciones y cada usuario verá la página ajustada a su propia resolución. Como leemos de arriba a abajo, el alto no supone ningún problema, ya que para eso está la barra de desplazamiento. Pero lo que ya es un poco coñazo es tener que mover el scroll horizontal cada vez que terminamos una línea o cada vez que queremos ver la barra lateral que queda oculta. Esto último ocurre, por ejemplo, cuando diseñamos un ancho de 1024 pixels y el usuario tiene una resolución de 800px. De este asunto es de lo que se queja nuestra amiga de Androides Roqueros.
Resolución de 1280px
Resolución de 800px
Actualmente, los anchos habituales son de 800, 1024, 1280 y 1440 pixels. Por tanto, si creamos una página con 800px, todo el mundo la verá correctamente. Eso sí, infrautilizamos el espacio disponible y en resoluciones muy grandes, el contenido se quedará como muy desangelado en el centro de la pantalla.
CSS nos permite una solución, pero que no está exenta de otro tipo de problemas. Existe una instrucción (WIDTH) en la que se puede indicar el ancho en pixels de cada uno de nuestros contenedores y que ya vimos en "Crear bloques de información". Si bien lo habitual es indicar un ancho fijo mediante una expresión numérica de pixels, también se puede utilizar un expresión porcentual.
Así, en lugar de usar width:200px; también podemos usar otra similar a width:80%;
El ancho así definido, expresará que tanto por ciento del ancho disponible, debe ocupar el contenedor correspondiente.
Un ejemplo. Definimos un contenedor principal (outer), en el que luego colocaremos un espacio para entradas (main) y otro con la barra lateral (sidebar). Respectivamente, 1000, 750 y 250 pixels de ancho fijo.
Cuando alguien con pantalla de 800px vea nuestro blog, el contenido que sobrepase ese ancho (200px), quedará oculto a la derecha y tendrá que usar la barra de desplazamiento horizontal del navegador para poder ver ese trozo de página. Cuando alguien con 1440px de resolución visite la misma página, verá un hueco de 440px, bien repartido a ambos lados o bien en uno de los dos lados, según el diseño de la plantilla.
Sin embargo, si hacemos esto otro...
...cualquier usuario verá una página en la que las tres cuartas partes del ancho estarán ocupadas por el contenedor de las entradas y la otra cuarta parte la ocupará la barra lateral.
Actualmente, este blog tiene una cabecera de ancho fijo y cuerpos de entradas y barra lateral variables. Si le dais al botón "restaurar" del navegador y luego abrís y cerrais la ventana manualmente en cuanto a anchura, apreciareis el resultado. Tened en cuenta que las imágenes no modifican su tamaño, pero que las líneas de texto sí lo hacen, tal y como pasa por ejemplo con Word cuando cambiais los márgenes.
Resolución de 800px
Resolución de 1280px
Fácil ¿no?... Pues la verdad es que sí y no. Ahora empiezan los problemas. En las plantillas más sencillas, no existirán mayores pegas que las relacionadas con los márgenes (margin) y los espacios (padding). Según el explorador (IE, Firefox, Opera...) el tratamiento de estas instrucciones tiene un resultado un poco distinto, lo que provocará que por un solo pixel, quizás no quepa el contenedor definido y se nos descuadre toda la estructura. En este caso con no apurar el espacio, tenemos suficiente. Usemos el 98 o el 99% del ancho total y en los bloques "interiores" al principal, pongamos por ejemplo un 74% y un 24%. Evidentemente, estos dos últimos no sumarían un 100%, pero eso es precisamente lo que queremos para evitar problemas.
Experimentando con la plantilla y probando con Vista Previa antes de salvar, esto lo solucionais con poco trabajo.
Otra cosa que ya requiere un poco más de trabajo es el rediseño de páginas con muchas florituras gráficas, como esquinas redondeadas o dibujos formados por distintos elementos.
Una cabecera con esquinas redondeadas, normalmente se hace montando una imagen que contenga las esquinas superiores, a continuación un fondo (background) plano del mismo color y por último otra imagen con las esquinas inferiores. "Encima" del conjunto, irá nuestra imagen principal o texto (el fondo negro sólo es para que se aprecien las esquinas; realmente debería ser transparente)
Este sería el resultado con anchos fijos:
Pero cuando nuestro contenedor tiene un ancho variable y el dibujo de las esquinas tiene un ancho fijo, según que la resolución del usuario sea mayor o menor que la esperada, pasan cosas como estas:
Siento no poderos dar soluciones concretas, porque dependerán del diseño gráfico de cada web y sólo hay que darse una pequeña vueltecita por internet, para ver que hay casi tantos diseños como personas.
Pero para que no desespereis, aportaré al menos que muchos casos se solucionan de una forma relativamente sencilla. Hay que usar imágenes de alto fijo y montar el resultado en vertical utilizando las propiedades de repetición y posición de BACKGROUND, tales como NO-REPEAT, LEFT, TOP, etc., sustituyendo las imágenes "base" anteriores por otras como estas:
También se puede fijar la parte superior-izquierda y colocar "imágenes complementarias" a la derecha y abajo. Pero como hemos dicho, esto es mucho más complicado de hacer y, sobre todo, de explicar aquí caso a caso.
Lo que ocurre es que hay una importante diversidad de resoluciones y cada usuario verá la página ajustada a su propia resolución. Como leemos de arriba a abajo, el alto no supone ningún problema, ya que para eso está la barra de desplazamiento. Pero lo que ya es un poco coñazo es tener que mover el scroll horizontal cada vez que terminamos una línea o cada vez que queremos ver la barra lateral que queda oculta. Esto último ocurre, por ejemplo, cuando diseñamos un ancho de 1024 pixels y el usuario tiene una resolución de 800px. De este asunto es de lo que se queja nuestra amiga de Androides Roqueros.
Resolución de 1280px
Resolución de 800px
Actualmente, los anchos habituales son de 800, 1024, 1280 y 1440 pixels. Por tanto, si creamos una página con 800px, todo el mundo la verá correctamente. Eso sí, infrautilizamos el espacio disponible y en resoluciones muy grandes, el contenido se quedará como muy desangelado en el centro de la pantalla.
CSS nos permite una solución, pero que no está exenta de otro tipo de problemas. Existe una instrucción (WIDTH) en la que se puede indicar el ancho en pixels de cada uno de nuestros contenedores y que ya vimos en "Crear bloques de información". Si bien lo habitual es indicar un ancho fijo mediante una expresión numérica de pixels, también se puede utilizar un expresión porcentual.
Así, en lugar de usar width:200px; también podemos usar otra similar a width:80%;
El ancho así definido, expresará que tanto por ciento del ancho disponible, debe ocupar el contenedor correspondiente.
Un ejemplo. Definimos un contenedor principal (outer), en el que luego colocaremos un espacio para entradas (main) y otro con la barra lateral (sidebar). Respectivamente, 1000, 750 y 250 pixels de ancho fijo.
#outer-wrapper {
width: 1000px;
...
}
#main-wrapper {
width: 750px;
...
}
#sidebar-wrapper {
width: 250px;
...
}
width: 1000px;
...
}
#main-wrapper {
width: 750px;
...
}
#sidebar-wrapper {
width: 250px;
...
}
Cuando alguien con pantalla de 800px vea nuestro blog, el contenido que sobrepase ese ancho (200px), quedará oculto a la derecha y tendrá que usar la barra de desplazamiento horizontal del navegador para poder ver ese trozo de página. Cuando alguien con 1440px de resolución visite la misma página, verá un hueco de 440px, bien repartido a ambos lados o bien en uno de los dos lados, según el diseño de la plantilla.
Sin embargo, si hacemos esto otro...
#outer-wrapper {
width: 100%;
...
}
#main-wrapper {
width: 75%;
...
}
#sidebar-wrapper {
width: 25%;
...
}
width: 100%;
...
}
#main-wrapper {
width: 75%;
...
}
#sidebar-wrapper {
width: 25%;
...
}
...cualquier usuario verá una página en la que las tres cuartas partes del ancho estarán ocupadas por el contenedor de las entradas y la otra cuarta parte la ocupará la barra lateral.
Actualmente, este blog tiene una cabecera de ancho fijo y cuerpos de entradas y barra lateral variables. Si le dais al botón "restaurar" del navegador y luego abrís y cerrais la ventana manualmente en cuanto a anchura, apreciareis el resultado. Tened en cuenta que las imágenes no modifican su tamaño, pero que las líneas de texto sí lo hacen, tal y como pasa por ejemplo con Word cuando cambiais los márgenes.
Resolución de 800px
Resolución de 1280px
Fácil ¿no?... Pues la verdad es que sí y no. Ahora empiezan los problemas. En las plantillas más sencillas, no existirán mayores pegas que las relacionadas con los márgenes (margin) y los espacios (padding). Según el explorador (IE, Firefox, Opera...) el tratamiento de estas instrucciones tiene un resultado un poco distinto, lo que provocará que por un solo pixel, quizás no quepa el contenedor definido y se nos descuadre toda la estructura. En este caso con no apurar el espacio, tenemos suficiente. Usemos el 98 o el 99% del ancho total y en los bloques "interiores" al principal, pongamos por ejemplo un 74% y un 24%. Evidentemente, estos dos últimos no sumarían un 100%, pero eso es precisamente lo que queremos para evitar problemas.
Experimentando con la plantilla y probando con Vista Previa antes de salvar, esto lo solucionais con poco trabajo.
Otra cosa que ya requiere un poco más de trabajo es el rediseño de páginas con muchas florituras gráficas, como esquinas redondeadas o dibujos formados por distintos elementos.
Una cabecera con esquinas redondeadas, normalmente se hace montando una imagen que contenga las esquinas superiores, a continuación un fondo (background) plano del mismo color y por último otra imagen con las esquinas inferiores. "Encima" del conjunto, irá nuestra imagen principal o texto (el fondo negro sólo es para que se aprecien las esquinas; realmente debería ser transparente)
Este sería el resultado con anchos fijos:
Pero cuando nuestro contenedor tiene un ancho variable y el dibujo de las esquinas tiene un ancho fijo, según que la resolución del usuario sea mayor o menor que la esperada, pasan cosas como estas:
Siento no poderos dar soluciones concretas, porque dependerán del diseño gráfico de cada web y sólo hay que darse una pequeña vueltecita por internet, para ver que hay casi tantos diseños como personas.
Pero para que no desespereis, aportaré al menos que muchos casos se solucionan de una forma relativamente sencilla. Hay que usar imágenes de alto fijo y montar el resultado en vertical utilizando las propiedades de repetición y posición de BACKGROUND, tales como NO-REPEAT, LEFT, TOP, etc., sustituyendo las imágenes "base" anteriores por otras como estas:
También se puede fijar la parte superior-izquierda y colocar "imágenes complementarias" a la derecha y abajo. Pero como hemos dicho, esto es mucho más complicado de hacer y, sobre todo, de explicar aquí caso a caso.
Si te gustó esta entrada, quizás quieras promocionarla: 
Suscribirse a:
Enviar comentarios (Atom)
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace.
Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.
El botón que no hace nada
23 comentarios:
Hola...
Tus trucos me han servido de mucho pero quisiera saber que haces para vincularte en tu mismo blog con los botones divertidos que estan arriba...
Espero tu ayuda. Gracias
Hola, una preguntota si no es molestia.
He visto en algunas páginas que cuando uno le da click a un vínculo la página se oscurece y aparece un cuadro blanco y en ese cuadro aparece la foto o el video del link y una "x" para cerrar el cuadro y volver a como estaban.
Te dejo una págin que hace eso.
No se si se pueda o no poner en blogger, en caso afirmativo me supongo que sabrás como.
Sería mucha molestia?
Un saludo y gracias.
Lo siento... el link
http://www.chistesybromas.com/news.php
Cab, Yop... No entiendo muy bien si preguntais algo más profundo o simplemente lo que parece. Si es lo segundo, aquí van sendos enlaces.
Cab: Crear un enlace
Yop: Galería de imágenes
Eso era!
Gracias.
Pero ahora ¿podrias ayudarme con otro? Es el truco de la "pagina doblada": Aqui se muestra...
http://keytrucos.blogspot.com/2008/04/efecto-pgina-doblada.html
...esta pagina explica como se hace pero no entien a que se refiere con "Google Pages o algún servicio de alojamiento para conseguir las direcciones URL de cada archivo."
Oloman, muchísimas gracias, de verdad aprecio tu ayuda. Desafortunadamente no voy a poder aplicar tus conocimientos a mi página rápidamente, porque tiene muchas florituras gráficas, como tu dices, y ahorita no tengo tiempo de quebrarme la cabeza con todas ellas :). Pero gracias, ya me diste la idea de cómo meterle mano.
Saludos!
Estoy seguro de que si es eso oloman.
Mil gracias y lo vamos a probar.
La página de Key es muy buena. Os la recomiendo.
En la entrada que citas, Key dice que hay que cargar unos ficheros previamente para poder aplicar el efecto. Esto ocurre con muchos trucos en los que hay que utilizar scripts, que no son más que unos mini-programas que realizan determinadas rutinas.
Pero estos scripts no siempre pueden alojarse en Blogger o no es práctico hacerlo. Por eso os recomienda que los subais a "Google Pages u otrso servicios de alojamiento".
Igual que subes fotos a Flickr o Imageshack, o vídeos a YouTube, hay otros sitios donde puedes subir scripts.
Google Pages no es exactamente un sitio de alojamiento, pero te permiten crear gratis una página web y subir los ficheros que necesites. Por tanto, te das de alta, creas cualquier tontería y luego subes lo que quieras. Posteriormente te fijas en la dirección que te facilitan para ese fichero y lo podrás utilizar aquí en Blogger o en cualquier sitio.
Siento no poder explicarme mejor, peor tampoco va a ser este comentario mayor que una entrada... y ya casi estoy batiendo ese récord.
Vale... Gracias!!
Hola Oloman!
Hace tiempo que empecé a configurar mi blog de esta forma que explicas aquí, con porcentajes, y la verdad es que funciona todo muy bien excepto, claro está, por las imágenes. En la cabecera nos suele gustar poner alguna imágen concreta que diseñamos nosotros o lo que sea, pero claro, al final esa imagen tiene el tamaño que tiene y sale igual con todas las resoluciones. He estado indagando y he encontrado unos tutoriales de dreamweaver en los que se explica como hacer para que con un sencillo script se carguen imágenes distintas según la resolución del ordenador (Aquí). Entonces he pensado que quizá se podría cargar ese script en la plantilla y después "llamarlo" al igual que se hace con cualquier otro script para que haga su función en la cabecera, y cargue una imagen u otra según la resolución. Pero claro, no estoy muy seguro de cómo podría hacerse, por eso te pregunto a ti que tienes más experiencia...¿se te ocurre cómo podría ser?
Un saludo!!
Agustín. La solución es más sencilla, pero cómo he preferido explicarla para todos los casos, he redactado un post. Aquí lo tienes.
Hola Oloman: No sé si estoy en la sección correcta, pero lo único que desearía que los textos de las entradas en mi blog aparecieran bien encuadrados, es decir que el texto de cada línea terminara a la misma altura tanto a la izquierda como a la derecha, formando un rectángulo perfecto.
Si me pudieras ayudar te estaría muy agradecido.
Aquí te dejo el enlace a mi blog:
LIBRO ABIERTO
http://libroabiertorudyspillman.blogspot.com
Un saludo y gracias por tu tiempo.
Rudy
Hola Rudy. Te había visto mucho por UNIBLOG, pero nunca por aquí.
Para arreglar lo de la justificación de texto, busca
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #000000;
padding-bottom:1.5em;
text-align:justify;
}
y añade la línea que te he marcado en negrita. Eso es todo.
Sí, como tú bien dices, es verdad. Pero no he tenido tiempo de ocuparme demasiado de la estética del blog.
De todas maneras, pienso revertir esto.
En relación a tus instrucciones, las llevé a cabo al pie de la letra, pero como podrás observar tú mismo si lo deseas, no ayudó.
Si tienes alguna otra idea de lo que puede estar sucediendo, bueno, aquí volveré para leer tus consejos.
Un gusto saludarte nuevamente y que empiece un buen año para ti también.
Rudy
Rudy, si no te funciona, debe ser porque al crear la entrada incluiste un div align="left" u otro atributo html similar, y eso tiene prioridad sobre la plantilla.
Eso sólo lo puedes ver tú editando una entrada ¿Lo puedes comprobar?
Sí, efectivamente, Oloman. Lo que tú dices aparece en el html de las entradas. Pero yo no lo hice. ¿Sabes cómo lo puedo extraer de allí?
Gracias por tu buena y rápida predisposición.
Rudy
Automáticamente, de ninguna manera Rudy. Hay que hacerlo a mano. Posiblemente hayas creados los posts desde la pestaña "Redactar". Ahí, no existe la justificación y sólo tiene opciones para alinear izquierda, centro y derecha.
Además, cada vez que aplicas un color o un formateo de algún tipo, el HTML se te va llenando de SPAN (no SPAM) y similares.
Yo prefiero redactarlo desde la pestaña de HTML y luego retocarlo con la otra.
Prueba con la siguiente entrada y si te va bien, ya hazlo siempre así
Muchas gracias Oloman, lo intentaré.
Oloman Coloque Todo Al Pie De La Letra, Pero Me Gustaria Que Todo Quede Centrado Porque Se Fue Ala Parte Izquierda Del Blog, Que Tengo Que Cambiar o Colocar...?
MomomonKy, busca esto:
#outer-wrapper {
margin:0;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}
Cambia el MARGIN y el TEXT-ALIGN y ponlos así:
margin:0px auto;
text-align:center;
Creo que eso será suficiente.
Disculpa La Demora Me Cortaron Mi Conección De Internet. Probe Lo Que Me Dijiste y Centro Todo Los Widget Los Títulos Las Fechas Todo, No Hay Otra Forma Sin Modificar Lo Demas...
PD: Olvide Guardar Como Lo Regreso Ah Como Estaba?
MomomonKy. Esa es la forma de centrar el contenido. No hay otra. Ahora, si hay cosas que no quieras centrar, tendrás que buscar los contenedores correspondientes e incluir las mismas líneas con otros valores. Por ejemplo:
margin:0px;
text-align:justify;
Eso lo tienes que incluir en #main-wrapper para los elementos del cuerpo de los posts y en #sidebar-wrapper para el contenido de la sidebar.
PUBLICAR UN COMENTARIO