Tutoriales
Martes, 10 Mayo 2016 17:53

The Walking Bear (i)

Valora este artículo
(1 Voto)

Anidando clips de películas: Oso Animado

"The Walking Bear" (i)

Continuación de las entradas Animate: Anidando clips de películas (i) y Animate: Anidando clips de películas (ii), donde vimos como anidar tres clips de película para generar el movimiento de un automóvil que se desplaza sobre el escenario, mientras sus ruedas giran acompañando el movimiento, en este tutorial veremos una forma básica de animar un personaje más orgánico; puntualmente, la sìntesis de un oso, haciendo que, a medida que el personaje avanza, haremos mover los siguentes elementos:

  • Cabeza,
  • Las dos manos y los dos brazos delanteros,
  • Las dos patas y las dos "piernas" traceras, 
  • y la cola del oso.

Para esto, utilizaremos una ilustraciòn realizada en Adobe Illustrator, la que importaremos en Adobe Animate para trabajar de la siguiente manera:

Valora este artículo
(3 votos)

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:

Valora este artículo
(4 votos)

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:

Valora este artículo
(1 Voto)

Cabezal anidando clips de película (ii)

Anidando MovieClips en Animate + Animaciones básicas (ii)

Como vimos en la primera parte de este tutorial, llegamos a anidar dos instancias de un símbolo de clip de película junto a otros símbolos gráficos dentro de un nuevo movieclip que creamos con el fin de desplazarlo sobre el escenario, sin usar la línea de tiempo principal.

El hecho de animar dentro de múltiples clips de películas en lugar de utilizar la línea de tiempo facilita los procesos de edición, y posibles modificaciones posteriores, de gran manera; el uso de múltiples elementos en una sola línea de tiempo imposibilita, además, poder establecer animaciones asincrónicas de elementos diferentes, generando animaciones repetitivas y monótonas.

Vamos con el desarrollo de esta segunda parte:

Valora este artículo
(1 Voto)

Cabezal anidando clips de película

Anidando MovieClips en Animate + Animaciones básicas

Este tutorial, está dirigido a quienes están iniciando con la animación en Adobe Animate, suponiendo que el estudiante ya tiene manejos adecuados en el uso de las herramientas de ilustración (pluma, óvalo y similares) con el programa, así como la creación de símbolos gráficos y clips de películas básicas, entendiendo entre símbolos e instancias de símbolos. También se supone que quien siga el tutorial conoce las diferencias entre archivos de extensión .fla, .swf y conceptos básicos con ActionScript.

Partiendo de los supuestos arriba mencionado alcanzaremos los siguientes objetivos:

  • Dibujar los distintos elementos que conformarán nuestro vehículo (en lugar de formas también podríamos usar la foto con vista lateral de cualquier automóvil, mostrando sus ruedas completas; más abajo hablaremos de ésto).
  • Convertir las formas logradas en símbolos gráficos y de clips de película.
  • Usar la línea de tiempo para animar objetos dentro de cada clip de película.
  • Crear interpolaciones clásicas e interpolaciones de movimiento básicas.

Comencemos entonces:

Lunes, 02 Mayo 2016 14:10

Introducción a Dreamweaver (iii)

Valora este artículo
(2 votos)

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)

Valora este artículo
(1 Voto)

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:

Lunes, 18 Abril 2016 18:24

Introducción a Dreamweaver (i)

Valora este artículo
(1 Voto)

Introducción a DW (01)

Tutorial de introducción a Dreamweaver: La interfaz

Este es el primero de una serie de tutoriales de introducción a Dreamweaver CC; en nuestro caso comenzaremos con una breve descripción sobre sobre "qué es Dreamweaver" , un repaso rápido de su interfaz de usuario, y algunos enlaces importantes con ayuda de Adobe sobre este programa:

Valora este artículo
(2 votos)

Efecto mosaico y convertir en forma en Adobe Illustrator

Efecto Mosaico y convertir en forma en AI

 En el siguiente tutorial veremos como convertir una imagen en una retícula de puntos mediante el efecto Crear mosaico de objetos, y Convertir en forma usando Adobe Illustrator CC2015.

El tutorial muestra dos formas básicas de trabajar y un resultado final supoerponiendo uno y otro resultado luego de aplicar una máscara de opacidad, pero los efectos correctamente aplicados pueden tener una variedad de usos posibles, los que se amplían aún más si los combinamos con otros efectos y recursos que nos ofrece el programa.

Comencemos entonces:

Valora este artículo
(1 Voto)

Configurando CF Builder en WordPress

Configurando Contact Form Builder en WP (ii)

En la primera parte de este tutorial instalamos el plugin Contact Form Builder en WordPress como herramienta para la creación y publicación de un formulario de contacto en WordPress; en esta segunda parte configuraremos el plugin que ya tenemos instalado: