Sábado, 04 Marzo 2017 22:13

Bootstrap desde Dreamweaver: Imágenes y columnas responsivas

Valora este artículo
(1 Voto)

Tutorial imagen responsiva con Bootstrap desde Dreamweaver

Insertar una imagen responsive desde Dreamweaver CC2017

Esta entrada forma parte de una serie de microtutoriales llamados "Bootstrap desde Dreamweaver..." creados como material de apoyo a los cursos de diseño web y Dreamweaver, por lo que, como en todos ellos, los procedimientos son tratados de forma descriptiva, aunque de manera rápida y breve; los detalles de edición más avanzados son tratados en cada una de las clases, sean éstas presenciales o remotas.

Veamos como insertar imágenes responsivas desde Dreamweaver, con Bootstrap:

Antes de insertar algunos de los cuatro tipos de imágenes responsivas disponibles en Dreamweaver debemos partir de un documento html, nuevo ó existente; para el primero de los casos debemos seguir los pasos 1 a 3 de esta entrada.

a. Imagen responsiva por defecto:

a1. Posicionados dentro de la etiqueta body del código, y más específicamente, dentro del lugar del código html donde vayamos a insertar una imagen responsiva, debemos elegir Insertar -> Componentes de Bootstrap -> Responsive Image -> Default, desde el menú principal de Dreamweaver CC2017:

Insertar una imagen responsiva desde el menu de Bootstrap

Este simple procedimiento hará que Dreamweaver inserte todos los códigos necesarios para insertar una imagen responsiva dentro de nuestra página.

a2. ¿Qué entendemos por imagen responsiva?

En este caso será una imagen cuyo tamaño se adapte a las dimensiones de su contenedor, de acuerdo a las dimensiones que, para nuestro ejemplo, Bootstrap evalúa por defecto (dispositivos de dimensiones muy pequeñas, pequeñas, medianas y grandes, de acuerdo a los siguientes estilos y medidas: col-xs-, col-sm-, col-md-, col-xl-, con medidas menores a 768px, mayores o iguales a 768px, mayores o iguales a 992px y mayores o iguales a 1200px, respectivamente.

Debido a la sencillez de uso de este componente resulta más facil ver los códigos en vivo para entender su utilidad, que explicarlo paso a paso:

Nota importante: Como dijimos arriba, debemos entender que la imagen responsiva se adaptará al contenedor; en los ejemplos anteriores este contenedor es la etiqueta body, pero veremos más adelante cómo estas imágenes trabajan dentro de una fila que contiene cuatro columnas responsivas.


b. Imágenes responsivas circulares

Veremos en este ejemplo cómo insertar una imagen responsiva de forma sencilla, dentro del body de un documento nuevo:

b1. Desde el menú principal de Dreamweaver elegimos la opción Insertar -> Componentes de Bootstrap -> Responsive Image -> Circular:

Insertar imagen responsiva circular

Visualmente veremos una imagen con sus bordes redondeados; en caso de usar imagenes cuadradas veremos que la imagen queda contenida dentro de un círculo. La mejor forma de entender este comportamiento es ver el código en vivo, ó descargar el ejemplo comprimido, haciendo clic aquí.

Veamos ahora como utilizar este tipo de imágenes responsivas circulares, esta vez, contenidas dentro de una fila de de cuatro columnas, también responsivas:

b2. Partiendo de un documento vacío, o colocando el puntero de inserción en el sector del código donde necesitemos, incrustaremos la fila de cuatro columnas responsivas, de acuerdo al estilo de Bootstrap col-md-3 (3 columas de las 12 del ancho total del contenedor):

Insertar columnas responsivas en Dreamweaver

b3. Dreamweaver preguntará sobre las opciones para insertar la fila de columnas responsivas:

Parámetros para las columnas resonsivas

En nuestro caso, debido a que no tenemos otros componentes, tenemos deshabilitadas las opciones de como insertar la nueva fila; cambiaremos el número de columnas a 4.

b4. El código HTML generado por Dreamweaver es el siguiente:

Códigos para las columnas responsivas

b5. Insertando una imagen responsiva circular dentro de cada div tendremos, visualmente, el siguiente resultado (cuatro columnas para 768 pixeles y más de ancho; 1 columna para dispositivos menores de esta medida):

Resultado de colocar 4 fotos responsivas dentro de 4 columnas resonsivas

b6. Vistas en vivo y descarga de los códigos: Vista en vivo / Descarga del ejemplo


c. Imágenes resonsivas de puntas redondeadas

c1. Accediendo a Insertar -> Componentes de Bootstrap -> Responsive Image -> Rounded Corner podremos insertar el componente (conjunto de códigos necesarios) de imagen responsiva de puntas redondeadas:

Insertar imagen responsiva de puntas redondeadas

c2. El comportamiento es similar al del ejemplo anterior; visualmente es el siguiente (en este caso para 3 fotos responsivas dentro de 3 columnas responsivas):

Imagen responsiva de puntas redondeadas

c3. Vistas en vivo y descarga de los códigos:


d. Thumbnails responsivos

d1. Finalmente, eligiendo la opción Componentes de Bootstrap -> Responsive Image -> Thumbnail del menú principal de Dreamweaver podremos insertar una imagen en miniatura (thumbnail) que podremos usar luego como enlace a una imagen mayor (éstos solo cambia algunos aspectos visuales, pero tienen el mismo comportamiento de las imágenes anteriores):

Insertar thumbnail responsivo

 Vistas en vivo y descarga de los códigos para insertar Thumbnails responsivos desde DW:


Notas importantes finales: Las características visuales de las imágenes responsivas, las imágenes responsivas redondeadas, las imágenes responsivas de puntas redondeadas y los thumbnails redondeados están determinados por los estilos CSS definidos en la hoja de estilos bootstrap.css que Dreamweaver aplica a las imágenes; específicamente:

  • La clase img-responsive para las imágenes reponsivas básicas, y los tres siguientes ejemplos.
  • Las clases img-circle e img-responsive para las imágenes reponsivas circulares (la clase correspondiente a la responsividad, a la que se le agrega la clase img-circle.
  • De forma similar, las clases img-rounded e img-responsive para las imágenes de puntas redondeadas.
  • Por último: img-thumbnail e img-responsive para los thumbnails responsivos (los que reciben un filete a su alrededor a través del estilo img-thumbnail)

Saludos para todos!
Plácido Luna.

 

 

Visto 513 veces Modificado por última vez en Domingo, 05 Marzo 2017 01:30