comunidades

Cómo hacer adaptables a cualquier dispositivo las imágenes en Blogger



Hoy día una web o un Blog no sólo se visualiza en ordenadores, ahora es necesario cuidar también su presentación en dispositivos móviles. Los usuarios utilizan pantallas de toda clase y tamaño para adentrarse en nuestros contenidos, debemos cuidar la manera en que mostramos la información para que sea fácilmente accesible desde cualquier aparato.
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.¿Qué es "Responsive Design"?


"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í.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
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.

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 {
max-width:100%;height: auto;}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.
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.

Personalización de 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.

Pulsamos en Avanzado para editar css
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.

Sobreescritura de css
4) En la caja de texto grande en blanco sobreescribirás la clase o propiedad de la plantilla de Blogger del .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> 

Fuente: este post proviene de Diarios de la nube, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

SEO con imágenes

Las imágenes que utilizas en tu Blog, en tu web, no son sólo un reclamo o un añadido decorativo para tus contenido. Pueden servir a los buscadores web para comprender mejor la información que proporci ...

Etiquetas: generalpropuestas

Recomendamos

Relacionado

general desde0

Cómo utilizar las imágenes en Blogger

Si quieres aprender cómo utilizar las imágenes en Blogger, esta guía te ayudará paso a paso a controlarlas y almacenarlas adecuadamente. La guía está pensada para que personas con nula o escasa experiencia en informática puedan realizar las tareas básicas para poner imágenes en sus entradas o incluso algunas más complejas como llegar a optimizar las mismas para resolver problemas de rendimiento. C ...

icono botón redes sociales ...

Cómo insertar botones de Redes Sociales en Blogger

Hoy les traigo el Tutorial de cómo insertar los botones de las Redes Sociales en Blogger. Lo primero que vamos a hacer es Descargarnos los Botones que más nos gusten y alojarlos en hosting (hay muchos gratuitos), pero yo uso el Google Drive, que me parece más sencillo y más completo. Una vez tengamos las imágenes subidas a Google Drive, tenemos que averiguar su URL, (si no sabes cómo hacerlo, te l ...

general diseño

Ajustar las imágenes automáticamente al tamaño de nuestro blog con CSS

Han sido varias personas ya las que me han preguntado cómo hacen en el blog Los Tragaldabas para poner las fotos de esa manera: Así que he querido hacer un post explicandolo, así como otro sobre cómo hacerlo para ajustar las imágenes de manera autómatica por si puedo ayudar a más personas. Primero vemos cómo lo hacen ellos, y luego cómo hacerlo de manera automática. Eso sí, lo primero que quiero a ...

general

Personaliza tu plantilla Blogger para móviles. Claves y fundamentos necesarios para lucir tu blog en estos dispositivos.

El enorme incremento en el uso de dispositivos móviles o tabletas como medio para navegar por Internet es un factor fundamental a tener en cuenta a la hora de crear páginas web o blogs. Si bien inicialmente ha tendido a ser un factor "olvidado" hoy día se ha tornado fundamental. El cliente, el usuario, ya no utiliza exclusivamente un ordenador de sobremesa o portátil para visualizar las ...

propuestas

Qué es AMPHTML

Al navegar por Internet con nuestro móvil, muchas veces nos encontramos con pequeños bloqueos, interrupciones en el dibujado de la página porque se están cargando anuncios, o imágenes... en diversas ocasiones percibimos la navegación como algo poco fluido o inmediato. La iniciativa de código abierto AMP (Accelerated Mobile Pages) viene a crear un nuevo "ecosistema" de programación que pe ...

general propuestas

Cómo añadir un botón para imprimir en tu web

Muchos creadores de contenidos web, especialmente Bloggers, siempre pueden complementar sus entradas con valor añadido: permitir al usuario descargarse las instrucciones en un archivo de lo que explican en sus entradas o la posibilidad de que el usuario se las imprima en papel. Aunque en Diarios de la nube hemos explicado con anterioridad cómo imprimir en Blogger de una manera más o menos sencilla ...

general vivir las fotos

¿CUÁNTOS PÍXELES SE NECESITAN PARA IMPRIMIR?

Desde siempre, el tema de la resolución resulta ingrato para los aficionados a la fotografía (y también para muchos profesionales). No es complicado, pero entran en juego números y cálculos que parecen estar a años luz de la creatividad y la expresión artística (pero que nos condicionan a la hora de hacer buenas fotografías). Los problemas técnicos y científicos estaban aún más presentes en la fot ...

móviles android htc ...

Filtradas imágenes del HTC One M9 versión Oro

En los últimos meses hemos visto muchas imágenes y filtraciones que supuestamente nos mostraban  el próximo buque insignia de HTC. Y aunque las fuentes eran diferentes, la similitud entre las distintas imágenes es notable. La últimas imágenes publicadas por Nowhereelse, nos muestran la parte posterior de un HTC ONE M9 edición Oro. Como podemos ver en la imagen a continuación, el interior del chasi ...

Laboratorio Photoshop

INTERPOLACIÓN: AMPLIAR LAS IMÁGENES

En fotografía digital, la resolución de una imagen nos permite saber hasta qué punto podemos ampliarla o visualizarla. Las cámaras digitales de última generación captan las fotografías a una resolución suficiente para cualquier aplicación (incluso para imprimir carteles de gran tamaño). Pero si en alguna situación necesitas más píxeles de los que te ofrece la cámara, puedes, desde cualquier progra ...

general

Curso Blogger: aprende a utilizar las hojas de estilo

En anteriores entregas aprendimos un poco de HTML básico que nos sirviera de base para luego comprender mejor la plantilla Blogger. Después pasamos a la acción creando nuestra primera plantilla y por último los contenedores de la cabecera, el cuerpo, una barra lateral y el pie del Blog. La idea es no copiar y pegar el código que "nos dan hecho", esta vez se trata de conseguir entender ...