Miércoles, 08 Marzo 2017 15:33

Bootstrap desde Mobirise: Video Responsivo

Bootstrap desde Mobirise

Videos Responsivos con Bootstrap desde Mobirise

En respuesta a una consulta de clases sobre como insertar un video responsivo, y complementado una entrada anterior en la que usamos componentes de Bootstrap desde Dreamweaver, veremos ahora las oportunidades de inserción casi directa que nos ofrece Mobirise para realizar las siguientes tareas:

Cabecera thumbnails responsivos con Bootstrap desde Dreamweaver

Thumbnails responsivos con Bootstrap desde Dreamweaver CC

En esta entrada sobre el uso de Bootstrap desde Dreamweaver CC2017 veremos como insertar imágenes de miniatura (thumbnails) responsivas en tres niveles de dificultad creciente: Insertar el componente Thumbnail en su versión más sencilla, la repetición de cuatro de estos cuatro thumbnails, y la sustitución de la imagen que Dreamweaver inserta por defecto ("Thumbnail_Placeholder.png") por cuatro imágenes de muestra, modificando el comportamiento de algunas etiquetas y agregando otras. Veamos como:

Cabecera tutorial videos responsivos

Insertar videos responsivos con Bootstrap desde DW CC2017

Esta nueva entrada forma parte de los tutoriales (muy) básicos sobre la inserción de componentes responsivos con Bootstrap desde Dreamweaver CC2017; esta vez veremos la inserción de un video responsivo.

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:

 Cabezal: Carousel Bootstrap con Dreamweaver

Bootstrap: Slider responsivo desde Dreamweaver CC2017

En esta oportunidad veremos, brevemente, cómo insertar, editar y ver los resultados de un slider responsivo basado en Bootstrap usando Dreamweaver:

Mobirise

Diseño web (casi) sin códigos

Hace ya un tiempo descubrí Mobirise, una aplicación de escritorio gratuita, desarrollada para Windows y Mac, que permite crear sitios web páginas web responsivas de forma visual, generando de forma automática los códigos necesarios.

Slider responsivo - Cabezal del tutorial

Carousel responsivo usando Bootstrap en Dreamweaver CC

En este tutorial veremos la forma de generar un slider (slideshow) con Bootstrap en Dreamweaver CC 2015, para lo cual alternaremos entre la vista de diseño y la ventana de códigos con la finalidad de mejorar la comprensión de los códigos html y, por consiguiente, la edición lo más afinada posible de los mismos, lo que genera una independencia paulatina de la plataforma usada, así como un conocimiento mayor de los comportamientos de cada etiqueta html y las propiedades CSS involucradas. En este tutorial, además del agregado del Carousel de forma casi automática en Dreamweaver hablaremos sobre etiquetas body, div, ul, ol y otras: