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:

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:

Lunes, 02 Mayo 2016 14:10

Introducción a Dreamweaver (iii)

Cabezal Diseñador CSS en Dreamweaver 

 El diseñador de CSS en Dreamweaver CC (i)

Como vimos en la entrada HTML y CSS: Notas preliminares, el diseño web estándar exige separar contenidos de diseño, existiendo tres formas de asignar estilos a los elementos html:

  1. Asignar estilos de forma local, en la propia etiqueta:
    Ej.: <p style="color:#CCC;>Contenido del párrafo</p>
  2. Asignar un conjunto de estilos en la cabecera de cada documento HTML:
    Ej.: <head>
             <style>
                body{
                         margin:0;
                         }
                .destacados{
                         color:red;
                         }
             </style>
         </head>
  3. Vincular un documento CSS externo a uno o más documentos HTML:
    Ej.: <link href="file:///D|/Clientes Web/Demo 01/pepe.css" rel="stylesheet" type="text/css">
    Nota: También es posible importar documentos CSS, tema que veremos en una próxima entrada.

También vimos en una nota anterior algunos ejemplos de como trabajar con estilos de etiquetas, definiciones de clases e IDs en CSS: CSS: Selectores básicos.

Como dijimos en algún momento, tanto los documentos HTML, como los documentos CSS, son documentos de texto plano que pueden ser editador por cualquier editor que permita guardar en este formato con la codificación correcta, pero en el caso de Dreamweaver tendremos una herramienta de gran ayuda al momento de trabajar con estilos CSS: El Diseñador de CSS, sobre el que hablaremos a continuación:

Domingo, 01 Mayo 2016 21:13

Introducción a Dreamweaver (ii)

Cabezal tutorial Configurando Sitios en Dreamweaver

Definiendo un nuevo sitio en Dreamweaver CC 2015 (i)

Como herramienta de diseño web, DW permite crear y trabajar múltiples sitios web, realizando operaciones sobre uno, varios o todos los archivos editables de un sitio, por lo que es necesario indicarle al programa cuáles son las carpetas de cada uno de éstos sitios de forma que el programa pueda gestionar sus archivos adecuadamente; así, definir un sitio en Dreamweaver, en su forma más básica, consiste en crear o indicarle al programa la carpeta de trabajo en la que almacenaremos todos los archivos que vayamos luego a subir como parte de nuestro sitio, evitando la anidación de ésta carpeta debajo de otra carpeta donde antes ya hayamos definido un sitio, lo que podría ser causante de errores varios durantes operaciones tales como la de buscar y reemplazar contenidos globalmente en alguno de nuestros sitios.

Vayamos con el paso a paso de la definición más básica de un sitio usando Dreamweaver CC2015:

Página 1 de 4