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.

Diseño flotante y diseño alternativo en InDesign

Diseño flotante y diseño alternativo en InDesign CC2017

Desde hace ya varias versiones InDesign permite hacer uso de las reglas de diseños flotantes y de diseños alternativos, a través de las cuales maquetar una misma publicación en más de un formato de página de forma simultánea y en un único documento, de forma más o menos automática. Veamos de que se trata:

Publicado en Diseño Editorial
Lunes, 10 Octubre 2016 21:00

Micromundos en Photoshop CC2015 (i)

Micromundos en PS CC2015 (i)

Creando microplanetas usando Photoshop CC2015

Parte de un conjunto de ejercicios de clases, la siguiente es la primera de varios tutoriales destinados a crear un microplaneta utilizando Photoshop CC2015, aunque no sea estrictamente necesario utilizar esta versión, ya que todos los efectos pueden ser logrado con versiones anteriores del programa.

Comencemos con el paso a paso:

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:

Domingo, 12 Junio 2016 13:11

Introducción a Dreamweaver (iv)

Configurando un sitio en DW (FTP)

Definiendo un nuevo sitio en Dreamweaver CC 2015 (ii)

En la primera parte de este tutorial vimos las pautas básicas para la definición de un sitio en Dreamwever, asignando un nombre y una carpeta de trabajo para el mismo; en esta segunda parte ingresaremos los datos necesarios para poder subir (cargar) y bajar (descargar) archivos a nuestro servicio de hosting usando el cliente FTP [1] [2] que Dreamwever trae incorporado:

Registrando un subdominio en 000webhost

000webhost: Registro de un subdominio gratuito

Este tutorial forma parte de una serie de entradas donde describiremos el registro de subdominios gratuitos en algunos de los sitios que ofrecen este servicio (ver también "Cinco (+1) sitios donde obtener hosting gratuito"); sitios con los que no Formación Gráfica no tiene ninguna relación comercial establecida, y que son publicados en nuestro sitio como material de apoyo a estudiantes iniciales de diseño web:

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:

Convertir un html en una plantilla de Dreamweaver

Regiones repetidas y regiones editables en Dreamweaver CC2015

Introducción

En la primera parte de este tutorial estuvimos viendo como definir, de forma básica, un sitio en Dreamweaver y la importancia que esto tenía al momento de trabajar con templates en este programa. En esta segunda parte veremos cómo convertir un un documento html existente en una plantilla de DW al insertar, directamente, un elemento de plantilla dentro de su código:

Trabajando con plantillas en DW CC 2015 (i)

Plantillas en Dreamweaver CC2015: Definiendo un nuevo sitio

Introducción

Las plantillas (templates) en Dreamweaver son documentos en formato DWT, que DW se almacenan en una carpeta llamada Templates, dentro del sitio de trabajo que tengamos activo, y que servirán luego para crear nuevas páginas web que heredarán sus diseños, y contenidos fijos presentes en estas plantillas.

Una vez que creamos un nuevo documento basado en una plantilla, DW sólo permite agregar o modificar contenidos en aquellas regiones que hayamos definido como editables, por lo que, debemos reconocer primero aquellos contenidos fijos de aquellos otros que dependerán del contenido de cada página que creemos luego a partir de nuestra plantilla.

Asimismo, y con el fin de aumentar la productividad durante los procesos de diseño y carga de datos en el sitio, es posible crear distintos tipos de "regiones espaciales"; entre las cuatro posibles en ésta y una próxima entrada veremos las siguientes:

  • Las regiones editables, sobre las cuales, al crear nuevas páginas desde una plantilla, se permitirá agregar o cambiar contenidos. Es necesario que una plantilla tenga, por lo menos, una región editable, de modo que permita trabajar luego sobre ella.
  • Las regiones repetidas en cambio, nos permitirán crear o eliminar zonas enteras de código en un documento basado en la plantilla, con lo que podremos agregar no solamente contenidos, sino repetir estructuras especiales, las que se crearán con los estilos de diseño que tengan asignados.
  • Las tablas de repetición, sobre las cuales hablaremos y veremos como trabajar en un siguiente tutorial.

Al crear múltiples páginas a partir de una de más plantillas es posible actualizar el diseño y contenidos fijos de éstas páginas cada vez que modifiquemos la plantilla ya que éstas permanecen relacionados, a menos que rompamos luego este vínculo posteriormente.

Para mostrar el proceso de creación y uso de una plantilla, trabajaremos sobre el template que podemos bajar de aquí, cuya captura de pantalla, a escala, es la siguiente:

Página 1 de 5