Video en slider responsivo

Colocar un video responsivo en un slider responsivo

Respuesta a consulta en clases: Insertar un video responsivo en un slider responsivo, usando Bootstrap desde Dreamweaver. Veamos como:

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:

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.

Sábado, 10 Septiembre 2016 18:59

Diario de clases (ii) / Dreamweaver y PS Web

Diario de profesor

Diario de clases: Dreamweaver y Photoshop Web

En esta segunda entrada del diario de clases toca el turno a la clase de cierre del curso de DW de agosto/septiembre y a PS Web:

Dreamweaver, clase final (2hs.):

  • Recepción de trabajos finales.
  • Repaso y correcciones a dos visuales que presentaban errores de algún tipo.
  • Repaso sobre registro de dominios.
  • Repaso sobre configuración de formularios (fuera de horario).

Photoshop Web (3hs):

  • Planificación del trabajo final.
  • Conceptos básicos para el rediseño de un sitio web.
    • Interfaz gráfica (cabecera, cuerpo principal y pie de página, menús, colores, tipografía, imágenes).
    • UX (conceptos básicos).
  • Preparación del brief de diseño.
  • Comienzo de bocetados.

Saludos y buen fin de semana para todos.
Plácido Luna.

Publicado en Blog

Insertar una barra de navegación responsive en DW CC2015

Menú responsivo con Bootstrap desde Dreamweaver CC2015

En este tutorial veremos que el procedimiento de insertar una barra de navegación responsiva usando Bootstrap desde Dreamweaver CC2015 lleva apenas unos cuandos pasos, luego de los cuales solo le siguen algunos pasos adicionales de configuración, algunos de los cuales se detallan a continuación:

Miércoles, 24 Agosto 2016 15:07

Diseñando un sitio web con Dreamweaver

Cabezal Diseñando un sitio con Dreamweaver

Pautas para el diseño de sitios con Dreamweaver

Este tutorial busca orientar técnicamente al alumno para el diseño de un sitio web en Dreamweaver, teniendo en cuenta aspectos relacionados con:

Lunes, 22 Agosto 2016 09:35

Introducción a la maquetación web (i)

Cabezal art. Introducción a la maquetación web

Conceptos básicos: Códigos de una página en blanco

Antes de comenzar con la codificación necesaria para la maquetación de una página web, debemos entender cual es la estructura básica de un documento html vacío. - Lectura recomendada: Introducción al HTML y CSS (i)

Así, todo documento comienza con una declaración que indicará de qué tipo de documento se trata; para un documento HTML5, esta declaración se reduce al código correspondiente a la línea 1 del siguiente código:

HTML5Up

 HTML UP! Templates responsivos en HTML5 and CSS3

Un buen sitio del que descargar recursos para diseño web en el formato de templates responsivos, diseñados y distribuidos bajo licencia Creative Commons Attribution 3.0 por ajlkn, quien, como podemos ver en su cuenta de Twitter, distribuye plantillas de pago de muy buena calidad en esta dirección: https://pixelarity.com/

Saludos para todos!
Plácido Luna.

 

Publicado en Blog
Página 1 de 3