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:

El componente Navbar desde Dreamweaver CC2017

Insertando una barra de navegación responsiva desde DW 2017

Esta es la primera de varias entradas orientadas a ayudar al estudiante inicial de diseño web con Dreamweaver a insertar y visualizar el resultado funcional de estos componentes responsivos que utilizan Bootstrap.

Cabezal cubo isométrico con Adobe Illustrator

Dibujando un cubo isométrico

En una entrada anterior vimos como crear un retícula isométrica en Illustrator CC 2015; en esta oportunidad veremos, rápidamente, una forma de dibujar un cubo isométrico sin necesidad de utilizar una retícula previa, en respuesta a una consulta de clases.

Publicado en Imágenes vectoriales
Viernes, 25 Noviembre 2016 16:49

Mobirise: Tutorial de uso (v)

Cabezal Tutorial Mobirise

Tutorial Mobirise: Exportación y publicación del proyecto (sitio)

Exportación y publicación de un sitio en Mobirise

Llegado a este punto ya hemos visto las opciones generales de Mobirise [1], la gestión de extensiones y temas [2], la administración de sitios y páginas [3] y la administración y configuración de bloques de contenidos [4]; en esta última entrada veremos como exportar y publicar nuestro proyecto de modo que podamos enviar nuestro sitio a otro equipo o usuario para continuar con su edición en Mobirise, ó publicar nuestras páginas en formato HTML, CSS y JavaScript para publicarlas en Internet, o editar éstos códigos con el software de edición externo que nos resulte más adecuado (Dreamweaver, Sublime Text, Atom, Brackets, etc.):

Viernes, 25 Noviembre 2016 14:12

Mobirise: Tutorial de uso (iv)

Cabezal Tutorial Mobirise

Tutorial Mobirise: Administrando bloques de contenidos

Los bloques de contenidos en Mobirise

En la primera parte de este tutorial vimos, de modo general, vimos que Mobirise permite manejar varios tipos de bloques con los cuales generar las estructuras para los contenidos de nuestras páginas.

En esta entrada veremos las opciones de configuración de algunos de estos bloques para personalizar al máximo nuestros diseños dentro Mobirise, con los recursos gratuitos que éste ofrece, ya luego, una vez publicado el proyecto podremos trabajar los códigos HTML, CSS y JavaScript generados por el programa usando cualquier editor que nos resulte conveniente (Dreamweaver, Sublime Text, Atom, Brackets, etc.):

Jueves, 24 Noviembre 2016 22:57

Mobirise: Tutorial de uso (iii)

Cabezal Tutorial Mobirise

Tutorial Mobirise: Administrando sitios y páginas

Tercera parte de este tutorial sobre Mobirise [ver primera parte aquí], programa gratuito para el diseño rápido de sitios web en la que veremos rápidamente las opciones de administración de sitios y páginas disponibles en el programa:

Página 1 de 5