Estamos acostumbrados a que las propiedades CSS nos permiten controlar la forma en que se ve nuestro sitio, sin embargo, pese a que por lo general lo vemos a través de un monitor, esa no es la única forma de acceso. Obviamente, ahora, con los teléfonos móviles esto es evidente pero ya antes había otras formas tales como, por ejemplo, una impresora.

La regla llamada @media es la que permite especificar las propiedades que tendrá nuestro sitio según sea el medio en el cual se mostrará: una pantalla, un papel impreso o incluso algunos navegadores de voz. Usando eso, es posible diferenciar lo que se muestre en uno o en otro. Con este ejemplo simple haríamos que la sidebar no se imprimiera:
@media screen { /* pantalla */
#sidebar-wrapper { display: block; }
}
@media print { /* impresora */
#sidebar-wrapper { display: none; }
}
El medio está definido por palabras: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv e incluso hay propiedades exclusivas para determinados medios pero, el tema que más me interesó de esto es lo que se muestra en un artículo de CSS-Tricks donde se hace referencia a una nueva serie de palabras claves que nos permitirían controlar la forma en que mostramos nuestro sitio según sea el tipo de resolución de pantalla que tenga el visitante.

Veamos la Plantilla Mínima de Blogger. Allí, el blog queda establecido con un ancho de 660 pixeles; es lo que dice la propiedad width de tres definiciones: #header-wrapper, #outer-wrapper y #footer. Está pensada para una resolución que era la "normal" en el 2006, es decir 800x600 pero, como el tiempo pasa inexorable, si bien sigue siendo un tamaño usado, la gran mayoría fue cambiando a resoluciones mayores y en algún momento, lo "normal" era 1024x768 por lo tanto lo que veíamos era el mismo blog pero grandes espacios vacios a los lados, es decir, el blog aparecía pequeño y perdido en una pantalla grande.

De allí que hubo muchos de nosotros que a fuerza de errores fuimos modificándolos para ampliarlos un poco aunque esto termina siendo una pelea imposible de ganar ya que las resoluciones siguen aumentando constantemente.

Claro que una solución es utilizar los llamados diseños fluidos que se adaptan automáticamente a la resolución aunque en lo personal, no me convencen demasiado. También es cierto que pueden usarse scripts que permiten utilizar distintas hojas de estilo e incluso que el usuario elija cuál utilizar.

Ahora, @media viene a agregar una posibilidad extra que sería bueno explorar aunque por el momento no está implementada en Internet Explroer pero si en el resto de los navegadores (más información).

Para ver un ejemplo vamos a usar la misma Plantilla Mínima de Blogger; la dejamos tal como está aunque en el ejemplo le he agregado una sidebar extra. Los anchos que definen el blog son estos:

#header-wrapper = width:660px;
#outer-wrapper = width: 660px;
#main-wrapper = width: 410px;
#sidebar-wrapper = width: 220px;
#footer = width:660px;

Así que vamos a agregarle definiciones al estilo, por ejemplo, luego de <b/skin> pondremos tres modelos diferentes de este modo:
<style>
/* esto funcionará si la resolución de pantalla está entre 300 y 800 pixeles de ancho */
@media (max-width: 800px) and (min-width: 300px) {
#header-wrapper { width:300px; }
#outer-wrapper { width: 300px; }
#main-wrapper { width: 300px; }
#footer { width:300px; }
/* no mostraremos ninguna sidebar */
#sidebar-wrapper { display:none; }
#sidebar-wrapper2 { display:none; }
....... cualquier otra variante .......
}

/* esto funcionará si la resolución mínima de la pantalla es de 1200 pixeles de ancho */
@media (min-width: 1200px) {
#header-wrapper { width:1000px; }
#outer-wrapper { width: 1000px; }
#main-wrapper { width: 670px; }
#sidebar-wrapper { width: 300px; }
#footer { width:1000px; }
/* no mostraremos la segunda sidebar */
#sidebar-wrapper2 { display:none; }
....... cualquier otra variante .......
}

/* esto funcionará si la resolución mínima de la pantalla es de 1600 pixeles de ancho */
@media (min-width: 1600px) {
#header-wrapper { width:1400px; }
#outer-wrapper { width: 1400px; }
#main-wrapper { width: 600px; }
#sidebar-wrapper { width: 350px; }
#footer { width:1400px; }
/* mostraremos la segunda sidebar */
#sidebar-wrapper2 { display:block; }
....... cualquier otra variante .......
}
</style>
Usando max-width, min-width, max-height y min-height podemos definir las "condiciones" en las que nuestro sitio se verá, estableciendo anchos o cualquier otra propiedad general o particular.

A medida que amplien esa ventana, verán que el ancho cambia y una imagen en una sidebar se muestra de diferente tamaño. Incluso, si se llega a superar el ancho máximo, aparecerá la segunda sidebar que sino, permanece oculta; en el demo, también cambian el color de fondo, el tamaño de los textos y su color.

Hay otras palabras similares: min-device-width, max-device-width, min-device-height, max-device-height pero también muchas otras que amplian aún más las cosas.

device-aspect-ratio y orientation permiten distinguir el aspecto, por ejemplo:

@media (device-aspect-ratio: 16/9) { ... } /* para pantallas de tipo widescreen */
@media (orientation:portrait) { ... } /* para pantallas más altas que anchas */
@media (orientation:landscape) { ... } /* para pantallas más anchas que altas */

Lo mismo con la resolución de los colores:

@media (color) { ... } /* para monitores color */
@media (monochrome) { ... } /* para monitores blanco y negro */
@media (min-color-index: 256) { ... } /* para monitores con 256 colores */

Lo interesante de esto es que los cambios funcionan dinámicamente, es decir, no hay necesidad de recargar la página por lo menos, agregándolo directamente aunque también es posible hacerlo enlazando las hojas de estilo alternativas:
<link type='text/css' rel='stylesheet' media='screen' href='URL_por_defecto.css' />
<link type='text/css' rel='stylesheet' media='screen and (max-width: 800px) and (min-width: 300px)' href='URL_pequeño.css' />
<link type='text/css' rel='stylesheet' media='screen and (min-width: 1200px)' href='URL_mediano.css' />
<link type='text/css' rel='stylesheet' media='screen and (min-width: 1600px)' href='URL_grande.css' />

21 comentarios:

La hormiguita  

Maravilloso..... así uno deja de sumar restar multiplicar... o tratar de fijarse en casa de amigos con distintas resoluciones como se ve.... o con distintos monitores los colores que se ven, que bien... que buena noticia... a pesar del frio... no?
Mil gracias.:)

Responder
JMiur  

Es muy pero muy interesante, aunque aún no funciona en todos los navegadores, creo que será una de las cosas más útiles de los nuevos diseños.

Responder
Anónimo  

Ya logre hacer que desaparezca el menu de pestañas de la izquierda cuando se reduce la resolucion (es que tapaba algunas cosas en resoluciones bajas), pero me gustaria que el gadget Menu Principal se mantuviera oculto y solo apareciera cuando el menu de pestañas se oculte.

¿Que debo poner en el gadget para logralo? Tengo algo de idea de que en el CSS le pongo display: none, pero no me ha funcionado.

Responder
Anónimo  

Perdon, se me olvido poner de que blog hablaba

http://etbpruebas.blogspot.com/

Responder
JMiur  

No sé exactamente cuál es la idea pero imagino que si #cat es el menú y #navigation las pestañas, debería ocultarse el menú por defecto:

#cat {display: none;}

y que aparezca cuando la resolución sea baja:

@media (max-width: 1024px) {
#navigation {display: none;}
#cat {display: block;}
}

Responder
Anónimo  

Hola! No conocía esta forma para la medida de pantalla, me resulto muy util y quiero agradecerte mucho por esto. Aunque no entiendo muy bien. Por ejemplo, estoy trabajando en una web y quiero tener dos opciones de resolución 1280px y 1400px de ancho. Entonces la imagen de la cabecera de 1280px es más pequeña que la de 1400px entonces cómo pordía manejar esa opción para que las dos resoluciones puedan la imagen en el tamaño que les corresponde.

El máximo sería 1400px y el mínimo es 1280px que tendría que hacer?
Me puedes ayudar, por favor?

Saludos y gracias nuevamente!!

Responder
JMiur  

Lo que ocurre en ese caso es que debes pensar que pasará con todas las opciones y qué tipo de imagen mostrarás; así en general:

@media (max-width: 1280px {
.... menores a 1280 ...
}

@media (max-width: 1400px) and (min-width: 1280px) {
.... entre 1280 y 1400 ...
}

@media (min-width: 1440px {
.... mayores de 1400 ...
}

Responder
NMitra  

¿Cómo hacer plantillas nuevas?

qué elementos deben ser? :o

Responder
JMiur  

Imposible responder eso; lo mejor es que mires cómo es una plantilla mínima y partas de ella.

Responder
NMitra  

¿Qué hacer con

<b:template-skin> <b:variable default='1130px' name='content.width' type='length' value='1130px'/> <b:variable default='0' name='main.column.left.width' type='length' value='180px'/> <b:variable default='360px' name='main.column.right.width' type='length' value='360px'/>?

Responder
JMiur  

Nada. Es parte del Diseñador de plantillas.

Responder
NMitra  

se puede describir la nueva plantilla de etiquetas CSS?

Estoy muy confusa,

como se muestra http://vagabundia.blogspot.com/2008/07/blogger-lista-de-las-etiquetas-data.html

muy conveniente.

¡Gracias! gran sitio!

Responder
JMiur  

El CSS está en el mismo lugar que siempre, entre <b:skin> y </b:skin>

La mayor parte del código de las nuevas plantillas sólo sirve para que funcione el nuevo editor de plantillas de Blogger. Si que quiere personalizarlas mucho, conviene usar las plantillas anteriores ya que esos modelos, han sido pensados para no ser demasiado tocados.

No me he puesto a ver el esquema que tienen. Son muy confusas y no sé si vale la pena el esfuerzo de tratar de entenderlas ya que los códigos agregados, en nada influyen en el resultado final del blog; como dije antes, sólo sirven para que funcione en editor en si mismo.

Responder
NMitra  

esto es interesante - http://www.tweakmyblogger.com/2010/11/make-designer-templates-stretch.html

Responder
NMitra  

Perdona que te atormentan

En este tema no me da la paz

https://groups.google.com/group/blogger-template-design/web/html-structure?pli=1

no está claro por qué hay un name-outer...name-inner

Explique, si usted sabe

gracias!

Responder
JMiur  

Como dije antes, no me he puesto a ver la estructura de esas plantillas nuevas ni pienso hacerlo ya que no creo que valga la pena; cualquier diseño de esas plantillas nuevas puede ser reproducido en las viejas sin inconvenientes y con la mitad del código :D

Responder
NMitra  

Yo entiendo eso. Pero no está dispuesto a cambiar la plantilla. ¿Tenía un montón de cambios.

Barra de desplazamiento horizontal aparece incluso si sólo reducir el tamaño del blog a un mínimo. ¿Por qué? Yo no entiendo.

Responder
JMiur  

Pués yo no entiendo que quieres decir; ni siquiera sé cuál es tu blog o cuál es tu problema.

Responder
Neonius  

Tengo un portátil con una resolución de 1366x768 y en mi computador de escritorio, mi blog se ve de una forma un poco diferente.

Creo que esta será la solución a mi problema. La probaré.

Saludos JMiur.

Responder
Unknown  

Caramba, muchas gracias JMiur!! Mira que llevaba rato leyendo páginas y probando alternativas, y la tuya es la mejor, y además muy bien explicado. ¿Funciona en todos los navegadores y dispositivos?

Lo que no consigo, a ver si me puedes echar una mano, es escalar las imágenes en función de la resolución de pantalla... Te estaría muy agradecido si me ayudases. Llevo un par de días y no hay manera...

Ejemplo:

imagen1: 800x400px / imagen2: 500x100px

Cómo conseguimos que, a resoluciones mayores a 800px se muestren tal cual, pero a inferiores, por ejemplo 400px, todas las imágenes se escalen automáticamente manteniendo su proporción:

imagen1--> 400x200px / imagen2--> 400x80px

Muchas gracias de nuevo

JMiur  

Estableciendo width al 100% y colócandolas en contenedores que se dimensionen en función del ancho mediante porcentajes. El CSS no tiene otras opciones,

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