Mascara de Texto

1.       Crear un archivo AS3
2.       Escribe un texto en tamaño grande
3.       Crea una nueva capa
4.       Crear un circulo de un color llamativo
5.       Crea un símbolo (F8) de tipo Grafico
6.       Te posicionas en el fotograma 40 y presionas F6
7.       Mueves el circulo hasta la posición final y creas la interpolación clásica
8.       Repites el paso con el fotograma 80
9.       La capa Texto debe estar arriba, La capa Circulo debe estar abajo
10.   Te posicionas en la capa Texto, Clic derecho y Mascara
11.   Posicionándote en cualquier fotograma de la capa circulo, le asignamos la Rotación CCW en las propiedades, con una rotación de 4°
12.   Repetimos el paso en la segunda parte del círculo, con Rotación CW 4°

13.   CTRL + J Propiedades de página, color de fondo “Negro”

Guía de Movimiento

1.       Presionamos Ctrl + F8 y creamos un símbolo llamado “electrón”  de tipo “Clip de pelicula”
2.       Dibujamos un pequeño ovalo de color rojo radial
3.       Llamamos a la capa1 “Electrón”
4.       Le damos clic derecho a la capa y seleccionamos “Añadir guía de movimiento”
5.       En la Guía dibujamos una elipse sin relleno y de contorno color negro
6.       Con la herramienta borrador, quitamos una parte de la elipse de contorno
7.       Seleccionamos la capa del electrón y no posicionamos en el fotograma 80
8.       Presionamos F6 en la capa electrón y en la capa Guía
9.       Creamos interpolación de movimiento en la capa electrón
10.   El primer fotograma del electrón lo colocamos en la posición inicial de la guía
11.   El ultimo fotograma en la posición final de la guía
12.   Seleccionamos la guía y damos Ctrl + C para copiarla
13.   Creamos una nueva capa y pegamos ahí la guía que hemos copiado
14.   Ocultamos las dos capas anteriores y empiezo a trabajar con la capa nueva
15.   Con la herramienta línea dibujo la parte del ovalo que me falta
16.   Con la herramienta selección muevo un poco la línea que dibuje para que se acomode como quiero
17.   Le damos nuevamente visibilidad a las capas
18.   Nos regresamos a la escena y arrastramos el clip de película de la biblioteca
19.   Creamos dos capas más y lo copiamos para acomodarlo de la forma de un átomo

20.   Dibujamos un ovalo en el centro.

Unidad 10. Capas


Vamos a ver algunas de las características básicas sobre las capas, para luego poder trabajar con ellas y aplicarles algún comportamiento.

1. Introducción
Las capas no son más que unos recuadros, elementos de bloque, destinados a contener y agrupar otros elementos, igual que los párrafos son elementos de bloque destinados a contener texto.

Esta es una capa con borde verde


Las capas, también llamadas layers o divisiones, se crean con la etiqueta <div></div>.
Al ser elementos contenedores, son muy útiles para organizar nuestros elementos. Si esto lo combinamos con el posicionamiento absoluto, una propiedad CSS que nos permite colocar los elementos donde queramos en nuestra página, obtenemos los elementos ideales para maquetar nuestra página, es decir, distribuir el contenido en bloques.


En la imagen de arriba vemos varias capas azules distribuidas sobre una capa gris. Si estrechas o agrandas la ventana del navegador, verás que pueden llegar a solaparse.
Cuando convertimos una capa en un elemento con posición absoluta (elemento PA), se muestra así en Dreamweaver:
Capa PA
Las capas pueden moverse de una posición a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva posición.
También pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrándolos hasta conseguir el tamaño deseado.
Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes, animaciones flash, y todos los elementos que puede contener un documento HTML.
Este icono  sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se elimina también la capa. 
Las capas, combinadas con JavaScript pueden dotar a una página de verdadero dinamismo.


2. Insertar una capa
Las capas pueden insertarse en una página a través del menú Insertar, opción Objeto de diseño, donde encontramos Etiqueta Div (división simple) y Div PA (Capa con Posición Absoluta). Para lo que vamos a comentar, nos quedamos con la segunda opción.
Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero.
Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono Descripción: http://www.aulaclic.es/dreamweaver-cs4/graficos/selector_capa.gif correspondiente, pero esto no resulta útil cuando existen muchas capas en un mismo documento, ya que todas las capas tienen asociada una imagen igual a ésta, y no es fácil seleccionar la deseada a la primera.
Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a través de la pestaña Elementos PA del panel CSS, que puede abrirse a través del menú Ventana opciónElementos PA. También puedes abrir el panel pulsando F2.
En dicho panel aparecen los nombres de todas las capas que existen en el documento actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el panel.


3. Formato de una capa
Las propiedades de la capa se especifican a través de su inspector de propiedades.
Elemento CSS-P es el nombre o ID de la capa. Desde aquí podemos asignarle otro ID, pero si lo hacemos perderá las propiedades que hayamos indicado para este elemento. SI lo que queremos es cambiar el ID por otro más descriptivo, podemos hacer clic derecho sobre el borde de la capa y elegir ID... en el menú contextual. También puede ser cambiado a través del panel Elementos PA, haciendo doble clic sobre él.
El resto de campos se refieren a las propiedades CSS que definen la posición y tamaño de la capa.
Izq y Sup indican la distancia en píxeles (también podemos introducir un valor en porcentaje) que hay entre los límites izquierdo y superior del documento y los lados superior e izquierdo de la capa respectivamente.
Por defecto se toman los lados del documento, a no ser que creemos una Capa PA dentro de otra capa posicionada. En este caso, la distancia se referirá a los lados de la capa padre, independientemente de su posición en el documento.
Si queremos que la posición se tome con respecto al elemento padre, pero este no tiene posicionamiento absoluto, podemos darle un posicionamiento relativo empleando CSS (En las propiedades de Posición del editor CSS, estableciendo position como relative). Esto no afectará a la posición del elemento padre si no cambiamos las propiedades lefttopright o bottom.
Truco: Si queremos centrar una capa con respecto al elemento que la contiene podemos hacerlo empleando CSS. Para ello, en Izq. ponemos 50%. Para que el lado izquierdo cuente a partir del centro, le damos un margen izquierdo negativo que sea la mitad del ancho de la capa. En la imagen anterior, como el ancho es 200px, añadiríamos por CSS margin-left: -100px;.
An y Al indican la anchura y la altura
Índice Z es el número de orden de colocación de las capas. Este valor también puede cambiarse a través del panel Elementos PA. Una capa será solapada por aquellas capas cuyo índice Z sea mayor que el suyo.
Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:
Default (visibilidad según el navegador),
Inherit (se muestra la capa mientras la página a la que pertenece también se esté mostrando),
Visible (muestra la capa, aunque la página no se esté viendo) y
Hidden (la capa está oculta).
La visibilidad también puede cambiarse a través del panel Elementos PA, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden.
A través de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa.
Desb. (Desbordamiento). Hasta ahora, los elementos que veíamos se ajustaban a su contenido. En el caso de las Capas PA podemos indicar un ancho y alto, por lo que puede que el contenido no quepa dentro de la capa. Con esta propiedad controlamos cómo aparecen las capas en un navegador cuando el contenido excede el tamaño especificado de la capa.
Visible indica que el contenido adicional se muestra, excediendo los límites de la capa.
Hidden (oculto) especifica que el contenido adicional no se mostrará en el navegador.
Scroll (desplazamiento) especifica que el navegador deberá añadir barras de desplazamiento a la capa tanto si se necesitan como si no.
Auto (automático) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias (es decir, cuando el contenido de la capa supere sus límites).

visible
. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
hidden. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. Éste sí cabe.
scroll. Éste sí cabe.




4. Capas prediseñadas
Al crear un nuevo documento, habrás visto que aparece la columna Diseño.
Estos diseños, que podemos elegir, están basados en capas.
Lo que harán será dividir nuestra página en las filas y columnas que elijamos, con anchos fijos o variables.
El nombre es bastante descriptivo, y además están acompañadas de gráficos que representan el diseño, por lo que no necesitan más explicación.
Una vez seleccionado un diseño, sólo tendremos que reemplazar el texto de ejemplo por el contenido que queramos.

Unidad 9. Formularios


Vamos a ver qué es un formulario, para qué se utiliza, cómo insertar uno, qué elementos puede contener y cómo pueden validarse los datos introducidos en él.

1. Introducción

Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.
Una vez el usuario rellena los datos y pulsa el botón para enviar el formulario se arrancará un programa que recibirá los datos y hará el tratamiento correspondiente.
Aquí vamos a ver cómo crear el formulario, (insertar campos y botones en el formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programación, ya sea en PHP, en JavaScript o en otro lenguaje de programación, y esto no entra en los objetivos del curso.
A la derecha tienes un ejemplo de formulario simple.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.

2. Elementos de formulario
Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Formulario, o lo que es más cómodo si vamos a insertar varios elementos, desde el panel Insertar en la sección Formularios.
A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la página.

  • Campo de texto
  • Área de texto
  • Botón
  • Casilla de verificación
  • Botón de opción
  • Lista/Menú
  • Etiqueta
Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, así como algunas de sus propiedades.


**Campo de texto y Área de texto
Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea, mientras que el Área de texto permite escribir varias.
Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades, marcando la opción Una línea o Multi línea respectivamente.
También es posible definirlo como Contraseña es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por un carácter como podrás ver en la imagen siguiente.
A continuación tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.
A través del inspector de propiedades es posible asignar también el Ancho del cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro.

**Botón
Es el botón tradicional de Windows. El botón puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).


También es posible cambiar el texto del botón, a través de la propiedad Valor del inspector de propiedades.

Como mínimo tiene que haber un botón del tipo Enviar formulario, imprescindible para enviar los datos. Además le suele acompañar un botón Restablecer formulario para hacer reset en el caso de que el usuario quiera comenzar de nuevo a rellenarlo.

**Casilla de verificación
Es un cuadrito que se puede activar o desactivar, para indicar si el usuario ha elegido una opción o no.
Deseo recibir información 
Puede asignársele el Estado inicial como Activado o como Desactivado.

**Botón de opción
Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo formulario con el mismo nombre, sólo puede haber uno activado. Cuando se activa uno, automáticamente se desactivan los demás. Esto obliga al usuario a sólo poder elegir una opción.
 Superman
 Spiderman

**Lista/Menú
Una lista o menú es un elemento de formulario que lleva asociada una lista de opciones.
                                                                                                                                                        
Los elementos se añaden a través del botón Valores de lista... del Inspector de propiedades.

Cuando se trata de un menú, solo es posible elegir uno de los elementos, pero si se trata de una lista, a través de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultáneamente.

**Etiqueta
Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qué datos ha de introducir en cada uno de ellos. Además, al estar asociadas al control nos permite activarlo al pulsar sobre el texto. Esto es muy práctico en casillas de verificación y botones de opción.
 Sin etiqueta. Hay que pulsar sobre la casilla.
 Con etiqueta. Podemos pulsar en el texto.

Una propiedad muy importante de los formularios es su nombre. Ya que al recibir los datos, a través del nombre sabremos qué control los envía.


3. Crear formularios
Antes de insertar los elementos o controles del formulario, hemos de crear un formulario. Los elementos los introduciremos dentro de él, ya que cuando lo demos a enviar, sólo se enviarán los datos de los elementos de dentro del formulario.
Puedes crear formularios a través del menú Insertar  Formulario, opción Formulario, o desde el panel Insertar.
Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas naranjas discontinuas, similar al de la imagen siguiente.
Estas líneas son ayudas visuales al trabajar en diseño, pero no se verán en el formulario final.
Entre las propiedades del formulario, encontramos el campo Acción. En el indicamos a dónde se envían los datos. Normalmente, una página PHP que se encara de tratarlos.
Propiedades formulario
Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes puedes insertar a través del menú Insertar, opción Formulario o desde el panel Insertar.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.


4. Validar formularios
La validación de formularios sirve para hacer que JavaScript valide el formulario antes de que se envíe, avisando al usuario para que corrija los errores, como campos obligatorios sin rellenar. Esto es mucho más eficaz que enviar la página y validarla sólo en el servidor.
Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir  a través del menú Ventana, opción Comportamientos, o pulsando Mayús + F4. 
Comportamientos forma parte del panel Inspector de etiquetas.

En este panel hay que desplegar el botón  y pulsar sobre la opción Validar formulario, deberás haber seleccionado el formulario previamente.
Entonces se mostrará una ventana como la siguiente, donde aparecen todos los elementos del formulario.
Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir.
Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser numérico (Número) y si ha de estar en un rango, una Dirección de correo electrónico, etc.

Unidad 8: Marcos


Vamos a ver qué son los marcos y para qué se utilizan. También veremos cómo insertar un marco sencillo en una página, y cómo trabajar con él.
1. Introducción
Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.
Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la siguiente imagen puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la página de este modo, hemos tenido que abrir el documento index.htm, que es la página que contiene los marcos agrupados.

Es posible editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco.
El trabajar con marcos puede resultar una tarea algo complicada, sobre todo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos básicos y ejemplos sencillos.
Actualmente los marcos están cayendo en desuso. Aunque son realmente prácticos, crean problemas a la hora de ser indexados por los buscadores. Y estar correctamente indexado y posicionado es crucial para una web.
Por ejemplo, si vemos el código fuente de una página con marcos, vemos que realmente no hay más que las llamadas a las páginas correspondientes, por lo que no hay nada que indexar. Por otro lado, si se indexa una página, puede que el visitante llegue a ella directamente, no a través del marco. Esto hace, por ejemplo, que el usuario no pueda acceder a los elementos de navegación de nuestro sitio.
Por lo tanto, si piensas colgar tu página en internet para uso público, no te recomendamos su uso. Pero si la página es de uso privado, tal vez te facilite el trabajo emplear marcos.
2. Crear marcos
Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.

Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo o uno ya existente.
Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción puede elegirse el tipo de marco que va a crearse.
Vamos a ver el marco a la Izquierda.
Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del documento actual.
Como puedes ver en la imagen, aparece una línea que divide el documento en dos. El documento de partida era uno nuevo.
En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que teníamos inicialmente, que está en el marco conocido como marco padre (MainFrame).
Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la línea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado.

Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vacío aparecerá a la derecha del documento original.
3. Seleccionar marcos
Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos, que puede abrirse a través del menú Ventana. También puedes abrir el panel Marcos pulsando la combinación de teclas Mayúsculas + F2.
Panel marcos
En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se puede pasar de uno a otro pulsando sobre ellos en el panel. También puede seleccionarse la página de marcos pulsando sobre el borde que rodea a los marcos (el que aparece más grueso y en relieve en la imagen).
No es necesario seleccionar los marcos para editar los documentos que éstos contengan.
Sí es necesario seleccionar los marcos para especificar las propiedades específicas de cada uno de ellos.

4. Guardar
Todos los documentos que contienen marcos tienen que tener una página en cada uno de ellos. Es por esto que al crear algún marco, se cargan páginas nuevas por defecto en cada uno de ellos, a excepción del marco que contiene la página original.
Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya existentes, como ya veremos más adelante.
Es necesario guardar la página que contiene el grupo de marcos, así como cada una de las páginas que están incluidas en sus marcos.
No es conveniente guardar la primera vez los marcos con la opción Guardar todo   , ya que podemos equivocarnos al dar los nombres a los nuevos documentos.
Es preferible guardar cada documento uno por uno, a no ser que todos los marcos contengan alguna página ya existente, ya que en ese caso el único documento al que habrá que dar nombre será al que contiene el grupo de marcos.
Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo previamente.
Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor en ellos antes de pulsar sobre Guardar   .


5. Configurar marcos
Una vez seleccionado un marco a través del panel Marcos, pueden establecerse sus propiedades a través del inspector de propiedades.

Cada marco tiene asignado un nombre, que puede cambiarse a través de Nombre de marco. El nombre no puede contener espacios en blanco.
En Origen aparece el nombre del documento HTML que está contenido en el marco.
En Bordes puede elegirse si aparecerá o no una línea separando el marco del resto de marcos. En el caso de que se muestre el borde, se puede especificar un color para éste a través de Color borde.
Desplaz. indica si aparecerán o no las barras de desplazamiento cuando el documento del marco no pueda visualizarse completamente.
Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar las medidas del marco desde el navegador.
El Ancho del margen y el Alto del margen indican la separación que habrá entre el contenido del marco y sus bordes izquierdo-derecho y superior-inferior.
Si lo seleccionado es todo el conjunto de marcos (la página de marcos), el inspector de propiedades es algo diferente.

En Bordes puede elegirse si aparecerá o no una línea separando los marcos entre sí y puede especificarse un color para este a través de Color del borde. También es posible establecer un grosor para el borde a través de Ancho.
El campo Columna (o Fila dependiendo del marco elegido en Selección Fila Col.) sirve para especificar el tamaño del marco, que puede ser en PíxelesPorcentaje (de la ventana) o Relativo (proporcional al resto de marcos).
Normalmente utilizarás dos marcos, uno de ellos con tamaño en Píxeles, que será el que contenga la barra de navegación, y el otro marco con tamaño Relativo, para que se ajuste a la ventana del navegado
6. Contenido del marco
Como ya has visto, el contenido de un marco puede establecerse a través del campo Origen del inspector de propiedades.

Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras que el de otros ha de poder variar.
A través del campo Origen del inspector de propiedades, sólo es posible especificar el documento que se cargará inicialmente en el marco, pero hemos de poder cambiar este documento por otro a través de vínculos.
Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los enlaces. Estos destinos podían ser _blank, _parent, _self, y _top. Vamos a recordar para que servía cada uno de ellos, ya que ahora que ya sabes trabajar con marcos te serán más fáciles de entender.
• _blank:
Abre el documento vinculado en una ventana nueva del navegador.
• _parent:
Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. Como ya sabes, el marco padre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.
• _self:
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.
• _top:
Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecerán al abrir el vínculo en ella.
Además de estos destinos para los enlaces, también aparecerán los nombres de los distintos marcos de la página.
Podemos añadir todos estos destinos a cualquier elemento de la página que contenga algún enlace, ya sea texto, una imagen, un mapa de imagen, un elemento Flash, etc.
Gracias a todo esto podremos hacer que las barras de navegación y el resto de enlaces funcionen a nuestro antojo, cargando unas u otras páginas en alguno de los marcos, en una ventana nueva, en toda la ventana, etc.
Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados finales.