Una parte fundamental de cualquier web o Blog son sus imágenes. Vamos a aprender en esta guía cómo prepararlas para que sean "responsive", es decir, para que se adapten a su presentación en cualquier pantalla donde queramos visualizarlas (móviles, tabletas, ordenadores, televisores, etc...).
En Diarios de la nube hemos tratado el tema del diseño adaptativo en múltipleas ocasiones. También denominado como "Responsive Design" es la técnica de diseño y desarrollo de páginas web que marcará la manera en que debe construirse cualquier contenido en Internet, tanto en el presente como en el futuro.
Puede ayudarte a entender mejor esta guía comprender qué son las CSS, el HTML y el Javascript.
"Responsive Design" o "Diseño adaptativo", es una manera de diseñar y desarrollar páginas web para que estas se visualicen correctamente en cualquier dispositivo independientemente de las características técnicas que lo conformen.
Es decir, tanto si se trata de dispositivos con grandes pantallas como los televisores o monitores de ordenador o de "pequeños" aparatos como las Tablets o los móviles, el "diseño adaptativo" permite al usuario seguir visualizando la web sin problemas a pesar de las evidentes diferencias que todos estos dispositivos presentan entre sí.
Los móviles y los ordenadores poseen pantallas de diferentes tamaños. No es lo mismo ver una pantalla en el ordenador que visualizarla en un móvil. Esto es porque al disponer de mayor tamaño los monitores de ordenador también la resolución a la que muestran los contenidos suele ser mayor que la de los móviles.
Para referirnos al tamaño de "cualquier cosa" que "dibujamos" en la pantalla de un ordenador, un móvil o una tableta solemos referirnos al espacio que ocupan en píxeles. Los píxeles son esos pequeños "puntitos" que sirven para conformar la imagen que vemos en las pantallas.
La cantidad de píxeles que una pantalla puede tener determina lo que se suele llamar "resolución". Normalmente, una pantalla de ordenador tendrá más píxeles de resolución que la pantalla de un móvil (aunque poco a poco esto está pasando a ser anecdótico).
Si tengo que mostrar el "ojo" que vemos a la izquierda formado por 250 píxeles de ancho por 202 de alto en un monitor con una resolución de 1920 píxeles de ancho por 1080 de alto, es muy posible que no tenga ningún problema en cómo aparece el ojo. Esto es porque la resolución del monitor es mucho mayor la de la imagen del ojo.
Ahora imaginemos que en lugar de hacerlo en el monitor del ordenador lo hacemos en un móvil que tiene como resolución 280 píxeles de ancho por 320 píxeles de alto si lo colocas en vertical o 320 píxeles de alto y 280 de ancho si lo pones horizontal. El ojo que prácticamente no ocupaba nada en el monitor del ordenador, en el móvil que tiene mucha menos resolución (menos píxeles para mostrar la imagen) ocupa toda la pantalla y no permite casi ver nada más.
Este es el "reto" o uno de los problemas al que tuvieron que enfrentarse los programadores y diseñadores web en el momento en el que dejaron de utilizarse sólo los ordenadores para mirar las páginas web en Internet. Conseguir que el ojo del ejemplo se vea correctamente en una pantalla con más resolución que en una pantalla con menos, en una pantalla más grande que en una menor.
Antiguamente, cuando las imágenes se representaban siempre en pantallas con la misma resolución, en ordenadores, además se añadía el tamaño en ancho (width) y alto (height):
<img src="ruta donde reside la imagen" width="tamaño en píxeles para el ancho" height="tamaño en píxeles para el alto" />
Si tenías una pantalla con una resolución de 1024x768 (1024 píxeles de ancho por 768 de ancho), no podías mostrar dentro de ella correctamente imágenes mayores de ese tamaño. Mostrabas imágenes más pequeñas, por ejemplo de 800x600 (800 píxeles de ancho por 600 de alto):
De esta manera se presentaban las imágenes con valores fijos de tamaño para todas las pantallas, indistintamente de que estas pudieran tener más resolución (más píxeles en pantalla) o ser más grandes o pequeñas (con mayor o menor número de pulgadas.
Al pasar a dispositivos con pantallas más pequeñas y con menor resolución (por ejemplo móviles), esos valores que teníamos como fijos para un monitor, no se veían correctamente en la pantalla y el usuario tenía que ir tocando la pantalla para poder visualizar la imagen al completo:
Para conseguir que la imagen sea adaptable, basta con que especifiquemos en nuestra web o blog que el tamaño de las imágenes no depende de valores fijos sino de porcentajes que se adaptan al tamaño de la pantalla:
El height: auto; indica que la altura de la imagen crece automáticamente con el tamaño del contenedor que la almacena.
Así, por medio de estas sencillas líneas en nuestras hojas de estilo, queda definido que nuestras imágenes se adapten a la presentación en cualquier dispositivo.
Puede ayudarte a entender mejor esta guía comprender qué son las CSS, el HTML y el Javascript.
¿Qué es "Responsive Design"?
Es decir, tanto si se trata de dispositivos con grandes pantallas como los televisores o monitores de ordenador o de "pequeños" aparatos como las Tablets o los móviles, el "diseño adaptativo" permite al usuario seguir visualizando la web sin problemas a pesar de las evidentes diferencias que todos estos dispositivos presentan entre sí.
Conceptos básicos sobre Responsive Design
Pongamos algunos ejemplos que clarifiquen los conceptos básicos que engloban el diseño y desarrollo de páginas web con técnicas Responsive Design. A continuación explicaré unos cuantos ejemplos que nos van a permitir entendernos durante toda la guía: píxel, resolución, sistema operativo y navegador.Los móviles y los ordenadores poseen pantallas de diferentes tamaños. No es lo mismo ver una pantalla en el ordenador que visualizarla en un móvil. Esto es porque al disponer de mayor tamaño los monitores de ordenador también la resolución a la que muestran los contenidos suele ser mayor que la de los móviles.
Para referirnos al tamaño de "cualquier cosa" que "dibujamos" en la pantalla de un ordenador, un móvil o una tableta solemos referirnos al espacio que ocupan en píxeles. Los píxeles son esos pequeños "puntitos" que sirven para conformar la imagen que vemos en las pantallas.
 |
| Imagen extraída de lohago.com |
Si tengo que mostrar el "ojo" que vemos a la izquierda formado por 250 píxeles de ancho por 202 de alto en un monitor con una resolución de 1920 píxeles de ancho por 1080 de alto, es muy posible que no tenga ningún problema en cómo aparece el ojo. Esto es porque la resolución del monitor es mucho mayor la de la imagen del ojo.
Ahora imaginemos que en lugar de hacerlo en el monitor del ordenador lo hacemos en un móvil que tiene como resolución 280 píxeles de ancho por 320 píxeles de alto si lo colocas en vertical o 320 píxeles de alto y 280 de ancho si lo pones horizontal. El ojo que prácticamente no ocupaba nada en el monitor del ordenador, en el móvil que tiene mucha menos resolución (menos píxeles para mostrar la imagen) ocupa toda la pantalla y no permite casi ver nada más.
 |
| Imagen de ejemplo de Google+ Backup |
Este es el "reto" o uno de los problemas al que tuvieron que enfrentarse los programadores y diseñadores web en el momento en el que dejaron de utilizarse sólo los ordenadores para mirar las páginas web en Internet. Conseguir que el ojo del ejemplo se vea correctamente en una pantalla con más resolución que en una pantalla con menos, en una pantalla más grande que en una menor.
El problema del tamaño en píxeles:
Las imágenes en HTML, utilizan la etiqueta <img> . Cuando las utilizamos en nuestras páginas solemos nombrarlas de esta manera:
<img src="ruta donde reside la imagen" />
Antiguamente, cuando las imágenes se representaban siempre en pantallas con la misma resolución, en ordenadores, además se añadía el tamaño en ancho (width) y alto (height):
<img src="ruta donde reside la imagen" width="tamaño en píxeles para el ancho" height="tamaño en píxeles para el alto" />
Si tenías una pantalla con una resolución de 1024x768 (1024 píxeles de ancho por 768 de ancho), no podías mostrar dentro de ella correctamente imágenes mayores de ese tamaño. Mostrabas imágenes más pequeñas, por ejemplo de 800x600 (800 píxeles de ancho por 600 de alto):
De esta manera se presentaban las imágenes con valores fijos de tamaño para todas las pantallas, indistintamente de que estas pudieran tener más resolución (más píxeles en pantalla) o ser más grandes o pequeñas (con mayor o menor número de pulgadas.
Al pasar a dispositivos con pantallas más pequeñas y con menor resolución (por ejemplo móviles), esos valores que teníamos como fijos para un monitor, no se veían correctamente en la pantalla y el usuario tenía que ir tocando la pantalla para poder visualizar la imagen al completo:
Cómo solucionar el problema del tamaño variable de las imágenes en páginas web, los contenedores:
Como hemos visto, la representación de imágenes en distintas pantallas, de diferente tamaño (en pulgadas) e incluso de diferente resolución (cantidad de píxeles en pantalla), requiere que las imágenes que en las páginas web se muestran sean adaptables a los distintos formatos de presentación.Para conseguir que la imagen sea adaptable, basta con que especifiquemos en nuestra web o blog que el tamaño de las imágenes no depende de valores fijos sino de porcentajes que se adaptan al tamaño de la pantalla:
img {De esta manera estamos indicando que la imagen se dibuje dentro del contenedor donde se encuentre al max-width:100%; Es decir, al 100% del tamaño máximo del ancho de la imagen con respecto al contenedor que la almacena.
max-width:100%;height: auto;}
El height: auto; indica que la altura de la imagen crece automáticamente con el tamaño del contenedor que la almacena.
Así, por medio de estas sencillas líneas en nuestras hojas de estilo, queda definido que nuestras imágenes se adapten a la presentación en cualquier dispositivo.
¿Cómo pongo en Blogger este código para que las imágenes sean adaptables?
Blogger, al igual que cualquier otra creación web, trabaja con Hojas de estilo que residen en sus servidores web (predefinidas) que podemos sobreescribir para darles el formato que nosotros prefiramos. Vamos a ver dos formas de cambiar la representación de imágenes para hacerlas adaptables en toda la plantilla:
A) Sobreescribe el estilo localizado en Blogger:
0) En primer lugar realiza una copia de seguridad de tu sitio. Aunque es realmente sencillo lo que vamos a hacer, recomiendo que previamente tengamos a buen recaudo nuestro código original, de manera que siempre podamos "volver atrás" ante cualquier error. No dejes de realizar esta guía paso a paso para salvaguardar tu blog.
1) Dentro de Blogger, en el menú de la izquierda, dirígete a la opción "Plantilla" y selecciona el botón "Personalizar". He marcado con reborde rojo el botón para personalizar plantilla.
2) En la página de personalización de plantilla, en el menú superior izquierdo selecciona la opción "Avanzado". La he marcado en naranja en la pantalla inferior.
Personalización de Plantilla
3) Al pulsar en avanzado nos aparece la página de personalización avanzada de plantilla. Si bajas el "scroll" del menú que ha salido tras pulsar "Avanzado" te aparecerá una última opción llamada "Añadir .css". Pulsa sobre dicha opción. En la pantalla inferior está marcada en naranja.
Pulsamos en Avanzado para editar css
4) En la caja de texto grande en blanco sobreescribirás la clase o propiedad de la plantilla de Blogger del .css:
Sobreescritura de css
img {
max-width:100%;height: auto;}
Así, todas las imágenes en tu Blog se dibujarán bajo el estilo que acabas de indicar.
B) Sobreescribe el estilo localizado en Blogger:
1) Dirígete dentro de Blogger, en el menú de la izquierda a Plantilla y después al botón "Editar HTML" para introducir el código necesario en la plantilla para que se dibuje el menú.
2) Pulsa en Editar HTML y busca pulsando CONTROL + F las etiquetas <b:skin><![CDATA. En Blogger CDATA contendrá las hojas de estilo. Copia y pega el código CSS, asegúrate que termina antes de que cierres la etiqueta CDATA con ]]></b:skin>.
Una vez localizado el código <b:skin><![CDATA[/* ve justo antes de su cierre y añades el código para hacer adaptables las imágenes de tu blog, debería quedarte como te muestro a continuación:
img {max-width:100%;height: auto;} ]]></b:skin>
Muy útil Miguel tu explicación. Éstos pasos serían los adecuados para que todas las fotos ocupen el mismo ancho de la entrada del blog, quede lindo y uniforme. Yo estaba haciendo lo siguiente: agrego una foto, la selecciono quedando en azul e iba directamente al html del post, busco la ubicación de la imagen y agrando "a ojo" y ajustando, mirando "vista previa" para no deformar la imagen...me comprendes? Si de ahora en adelante, aprovecho lo que nos enseñaste, como quedarían los post anteriores, deberían quedar bien verdad, no se pasarían del ancho? y 2) a veces yo usé algunas fotos medio mediocres rescatadas de la web para completar la nota y no son de calidad extrema...que pasa se agigantarían también?..las debería revisar post por post.y retirarlas?por ahi al agrandarse los pixeles quedarian expuestos..Es un comentario, quizás hay otros compañer@s que también usen fotos propias y ajenas.Muchas gracias, excelente tu blog, como siempre. Abrazo
ResponderEliminarHola Andy,
Eliminarcada blog es un mundo, en teoría las imágenes con esta explicación te deberían quedar bien, pero debes hacer pruebas primero. Haz copias de seguridad y así podrás probar.
Para la pregunta 2), como he puesto max-width, nunca se harán tan grandes como su contenedor sino tan grandes como su tamaño real sin pasar el tamaño del contenedor. Es decir, no se van a hacer gigantes, no te preocupes.
Un saludo!
Hola Miguel!
ResponderEliminarNo sabes lo que agradezco todo lo que escribes en tu blog. Me vuelvo majara perdida con tanta información (☺), pero hijo….. te lo curras un montón….
He podido solucionar errores de rastreo o de redireccionamento. He personalizado las página no encontradas. He sabido redireccionar cuando había eliminado alguna página, o sin saber, la había actualizado, rompiéndose con ello, algunos enlaces a esa página.
He localizado, arreglado o eliminado un montón de enlaces rotos….
He añadido o quitado propiedades de administrador de los blogs …bueno, ya me he perdido….pero gracias a ti y a tu blog he podido saber un montón de cosas que antes ni sabía que existían. Y es que lo he hecho en mis 4 blogs(aunque tengo 2 más, privados, uno de ellos, de conejillo de indias ☻. )
Vamos, que me he vuelto majareta para poder tenerlos más o menos, razonables y aunque en alguno de ellos ya no actualizo desde hace tiempo, como sigo teniendo visitas, no podía menos que tenerlo en condiciones.
Ahora mismo tengo todo un batiburrillo de cosas en mi mente, como muy desordenadas….llevo ya mucho tiempo liada con todo esto…..pero la cuestión, que de una manera u otra, he sabido tirarlas pa’lante….y lo que me queda!
Pero te quiero preguntar.
Tengo uno de mis blogs, de Esquemas y tutoriales, en el que lo que importa no son las entradas, que solo hay 5. Lo que interesa son los gadgets que hay en las columnas. Todos de HTLM y redireccionados . Empleo tiempo en tenerlos todos correctos. Ya sabes, links rotos y todo eso….la cuestión, que hasta que he podido he tenido la opción de visualizarlo a través de móvil, desactivada. Pero ahora ya tuve que activarla, ya sabes.
Tal vez sea una plantilla un tanto antigua, no sé, pero a mí me ha funcionado bien.
Ese blog no se ve nada bien a través de los móviles. Se puede escoger la opción ”Ver versión WEB”, que aunque no me soluciona mucho, algo sí que ayuda…….y me da que mucha gente no la escoge (por desconocimiento o lo que sea) porque he perdido un mogollón de visitas. Es un blog que se actualiza sólo (por los redireccionamientos a través del Pinterest y a otras pág), aunque evidentemente yo me cuido de que todo lo linkeado esté correcto.
Y es que a través del móvil las imágenes se ven muy chiquitillas y eso solo, cuando se selecciona la versión web, porque si no es así, solo se ven las entradas. Que ya te digo, éstas no interesan.
No sé si el aplicar esto que dices aquí, me solucionará algo.
Sabrías decirme?
No obstante, perdona lo largo que es el comentario y de nuevo…..MUCHAS GRACIAS por todo lo que compartes.
Un abrazo
Hola, un placer ayudar, me alegra que te guste el Blog.
EliminarPues en un tipo de blog como el que comentas, me temo que debes pensar en cambiar de plantilla. Las imágenes que yo hablo son simplemente <img no son enlaces a Pinterest o similar. Para hacer adaptable (responsive) tu Blog con esos enlaces a Pinterest, tendrías que utilizar media queries y sobreescribir los estilos para las distintas resoluciones de los móviles, tablets, etc... Es complejo y quizás te sea más sencillo buscar una plantilla pre-fabricada que te pudiera servir a tal efecto.
Pon en Google "pinterest blogger responsive" (sin comillas) y prueba a ver si te salen plantillas que te sirvan para lo que necesitas. Al ser responsive (http://www.diariosdelanube.com/2014/02/que-es-responsive-design.html) se adaptarán al móvil o las tablets sin quedar todo tan pequeño y poco usable.
Paciencia que al final encuentras lo que buscar, hazte un blog de pruebas y vas viendo si la plantilla que pilles te sirve para lo que necesitas.
Un saludo, cualquier cosa aquí estoy para ayudar.
Hola Miguel! GRACIAS por responderme y perdona la demora.
EliminarYa hace tiempo que vengo pensando que tendría que cambiarla. Me da una pereza que ni te imaginas, ya veremos qué hago, sin prisas ☺
Ya había leído tu entrada del Resoponsive design, eso fue lo que me animó a escribirte.
Miguel, MUCHÍSIMAS GRACIAS de verdad
Un abrazo!
Gracias a ti, un placer ayudar. Un abrazo.
EliminarHola Miguel , yo no puedo hacer esto porque esa opción está inhabilitada, según puede leer en losproblemas de blogger , al elegir que sea personalizada la plantilla, aunque luego elegí la plantilla para móviles ( la primera opción) se bloquea y no lo puedo usar, ¿Sabes si hay alguna forma de que funcione nuevamente?
ResponderEliminarEn la plantilla original creo que pone "b:skin" en algún punto, es el sitio de la plantilla donde van las css (las hojas de estilo). Puedes añadir al final de esta zona, justo antes de que ponga /b:skin, el código que necesitas para hacer las imágenes adaptables.
ResponderEliminarPara aprender más sobre las hojas de estilo te recomiendo esta lectura: http://www.diariosdelanube.com/2013/12/domina-blogger-sin-ser-un-experto-en_16.html y esta http://www.diariosdelanube.com/2013/07/guia-para-trabajar-con-hojas-de-estilo.html
Un saludo!
Una pregunta. ¿Esto afecta también a las imágenes de cabecera?
ResponderEliminarAdemás, cuando elijo que una imagen dentro del post aparezca en un tamaño diferente al de otra, ¿los cambios se ajustan a esto, o todas se muestran igual?
Hola Fran,
Eliminarafecta a todo lo que tenga como etiqueta <img, es decir, en la práctica a todas las imágenes. En mis pruebas no se han desajustado y todas se adaptan al tamaño de mis contenedores porque tengo la plantilla totalmente responsive. Haz pruebas primero, en principio respetaría las imágenes que tienes y la adaptaría a cualquier dispositivo. Pero dada la naturaleza tan distinta de todas las plantillas, es conveniente que primero lo pruebes y si no funciona lo quitas.
Un saludo!
Ufff, ¡muchas gracias, Miguel! Estaba desesperado porque en móviles deformaba las imágenes de las entradas, ahora se ven brutales :D
ResponderEliminar