manual html y flash

Facultad de Ingeniería

Unidad de Servicios de Cómputo Académico

Temario HTML

Autor: Juan Carlos Cruz Paz

Julio César Morales Crispín Abril de 2006

Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash

1 /113

Temario HTML I. Introducción ♦ Internet ♦ Servicios de Internet ♦ La Word Wide Web ♦ Los Navegadores ♦ Como surgió HTML ♦ Esquema de funcionamiento II. Página HTML ♦ Definición ♦ Etiquetas ♦ Sintaxis ♦ Estructura Básica ♦ Elementos de Páginas III. Formato de una Página ♦ Etiquetas básicas ♦ Fuentes ♦ Caracteres especiales ♦ Encabezados IV. Listas ♦ Definición ♦ Listas Ordenadas ♦ Listas No Ordenadas ♦ Listas de Definiciones ♦ Listas Anidadas V. Tablas ♦ Definición ♦ Formato ♦ Atributos y Parámetros ♦ Ejemplos de Tablas VI. Ligas o Vínculos ♦ Definición ♦ Sintaxis ♦ Rutas Absolutas y Relativas ♦ Las Ligas ♦ Anclas


2 /113

VII. Imágenes ♦ Tipos de Imágenes utilizadas ♦ Sintaxis ♦ Modificadores de Imagen VIII. Utilerías para la Página. ♦ Etiqueta BODY ♦ Ligas con Imágenes ♦ Código de Colores IX. Formularios ♦ Definición ♦ Características ♦ Tipos de elementos X. Marcos ♦ Definición ♦ Tipos ♦ No Frames ♦ Atributos XI. Texto en Movimiento ♦ Marquesinas (Marquees) ♦ Atributos


3 /113

I. Introducción. Internet El hecho de abrir un navegador Web, teclear una dirección y empezar a navegar por la WWW es tan común y popular en nuestros días que muchas personas no saben que hace tan sólo unos pocos años una cosa así era imposible de realizar. Nos estamos acostumbrando, y cada vez más, a la presencia de las páginas Web en nuestro trabajo y en nuestras actividades cotidianas, y los medios de comunicación hablan constantemente de Internet y del comercio electrónico. Internet fue creada a partir de un proyecto del Departamento de Defensa de los Estados Unidos llamado DARPANET (Defense Advanced Research Project Network) iniciado en 1969 y cuyo propósito principal era la investigación y desarrollo de protocolos de comunicación para redes de área amplia, el objetivo fue ligar redes de transmisión de paquetes de diferentes tipos capaces de resistir las condiciones de operación más difíciles y continuar funcionando aún con la pérdida de una parte de la red (por ejemplo en caso de guerra). Estas investigaciones dieron como resultado el protocolo TCP/IP (Transmisión Control Protocol/Internet Protocol) un sistema de comunicaciones muy sólido y robusto bajo el cual se integran todas las redes que conforman lo que se conoce actualmente como Internet. Durante el desarrollo de este protocolo se incrementó notablemente el número de redes locales de agencias gubernamentales y de universidades que participaban en el proyecto, dando origen así a la red de redes más grande del mundo. Existen grupos de Instituciones que se han formado con el fin de coordinar y controlar el manejo de la información y la forma de administrar dichas redes. Internet Society Es el grupo de mayor autoridad sobre el desarrollo de la red y fue creado en 1990, está formado por miembros voluntarios, cuyo propósito principal es promover el intercambio de información global a través de la tecnología en Internet y tiene la responsabilidad de la administración técnica y dirección de Internet. Internet Architecture Board (IAB) Toma las decisiones acerca de los estándares de comunicaciones entre las diferentes plataformas para que puedan interactuar máquinas de diferentes fabricantes sin problemas.


4 /113

NIC (Network Information Center) Este grupo es responsable de cómo se deben asignar las direcciones y otros recursos en la red y es administrado por el departamento de defensa de los Estados Unidos de Norteamérica. Internet Engineering Task Force (IETF) Se encarga de recabar las opiniones de los usuarios, de cómo se deben de implementar soluciones para problemas operacionales y cómo deben de cooperar las redes para lograrlo. El principal objetivo de Internet es interconectar todas las redes en el mundo empleando líneas telefónicas de alta velocidad, cables de fibra óptica y conexiones por satélite.

Servicios de Internet Este servicio puede ser adquirido si se tiene acceso a las organizaciones antes mencionadas o bien contratando el servicio con proveedores de Internet, estos negocios establecen una conexión con Internet y posteriormente venden el servicio a personas que lo soliciten, pagando una cuota ya sea por hora, mes o anual. Esta conexión en su mayoría se realiza vía Modem. Internet ofrece los siguientes servicios:

E-Mail FTP Listas de Correo Telnet World Wide Web

A continuación se describe brevemente cada uno de ellos. E-Mail (Correo Electrónico) Una de las aplicaciones más utilizadas en la red es el correo electrónico, ya que permite mandar y recibir cartas, desde cualquier parte del mundo mucho más rápido que el correo tradicional. Así pues podemos tener comunicación con una persona, puede escribírsele a un servidor de archivos ó a un grupo de gente al mismo tiempo. El correo electrónico se basa en los nombres o direcciones de los nodos y en la cuenta de una persona en un sistema (conocido como login), hay dos maneras de formar direcciones


5 /113

de e-mail: utilizando el formato Internet que contiene una '@' que significa "en" ó bien el formato UUCP que contiene un '!'; el más utilizado es el formato Internet '@'. Por ejemplo, para escribirle al usuario Bill Gates que tiene cuenta en la red microsoft.com, se manda un mensaje a la dirección: [email protected]. FTP (File Transfer Protocol) FTP es el protocolo utilizado en Internet para transferir archivos, es uno de los primeros servicios que se implementaron junto con Telnet y el Correo Electrónico. Por este medio se pueden obtener archivos y programas de casi cualquier tema, solo hay que saber donde encontrarlos, existe un gran número de servidores de FTP que admiten a usuarios anónimos, es decir que no necesitan tener cuenta para acceder al sistema, el login es anonymous y el password es nuestra dirección de correo electrónico; obviamente no se da acceso a todos los directorios del servidor, solo a algunas áreas restringidas dedicadas al público. Listas de Correo o Grupos de interés Los grupos de interés son creados con la finalidad de comunicar a las personas que tienen un interés común. Los servidores de listas pueden ser humanos o programas, los últimos son conocidos como listserv, cuando mandamos mensajes a un administrador humano podemos escribir en lenguaje normal, pero cuando mandamos correo a un listserv hay que comunicarnos con los comandos válidos del sistema con el que nos conectamos. Telnet (Conexión Remota) Telnet es la herramienta mas utilizada para acceder a los servicios de Internet, fue hecho para establecer sesiones remotas en otras máquinas tal y como si estuviéramos enfrente de ellas. Para que la conexión funcione, como en todos los servicios de Internet, la máquina a la que se accede debe tener un programa especial que reciba y gestione las conexiones El puerto que se utiliza generalmente es el 23. Sólo sirve para acceder en modo Terminal, es decir, sin gráficos, pero fue una herramienta muy útil para arreglar fallos a distancia, sin necesidad de estar físicamente en el mismo sitio que la máquina que los tenía. También se usaba para consultar datos a distancia, como datos personales en máquinas accesibles por red, información bibliográfica, etc. Su mayor problema es de seguridad, ya que todos los nombres de usuario y contraseñas necesarias para entrar en las máquinas viajan por la red como texto plano (cadenas de texto sin cifrar). Esto facilita que cualquiera que espíe el tráfico de la red pueda obtener los


6 /113

nombres de usuario y contraseñas, y así acceder él también a todas esas máquinas. Por esta razón dejó de usarse, casi totalmente, hace unos años, cuando apareció y se popularizó el SSH (Secure Shell), que puede describirse como una versión cifrada de Telnet.

La World Wide Web La WWW es el servicio más nuevo y conocido de la Internet, y el de más repercusión social en la WEB, servicio de visualización de documentos basados en un lenguaje especial de marcas que nos permite compartir información. El HTML es un protocolo especial para la transferencia de los mismos, y el HTTP es un concepto excepcional de enlaces entre diferentes documentos llamados Hipertexto, y que nos permite presentar nuestros servicios a todo público en general que tenga acceso a Internet. ¿Qué es la WWW? El World Wide Web (Telaraña a lo ancho del Mundo) es un servicio que proporciona Internet, también conocido como Web. Internet es un conjunto de Redes Internacionales, los dueños de estas redes son usualmente grandes organizaciones como Universidades, Laboratorios de Investigación de Gobierno y Corporaciones Privadas y de Gobierno. Cabe mencionar que las Páginas HTML trabajan bajo el World Wide Web. El Web nos permite acceder a miles de computadoras del mundo a través de documentos en los cuales de manera gráfica podemos tener acceso fácilmente a la información presionando solo palabras claves o bien conocidas como ligas las cuales resaltan sobre el resto del texto. El éxito que tiene se debe a la facilidad con la cual se puede obtener información (texto, gráficos, sonido, vídeo, etc.) y a su vez también poder presentar la información que se tenga y se quiera compartir. Los Navegadores o Browser Los Browser son también conocidos como Visualizadores o Navegadores, dentro de los Navegadores más utilizados actualmente tenemos a: Internet Explorer y Netscape, que son los más populares y los utilizados. Cabe mencionar que estos dos Navegadores pueden correr bajo Windows y Macintosh. Otros Navegadores son: Mozila (Linux) Mosaic de NSCA (Windows, Macintosh y UNIX) DOS LYNX (DOS) MACWEB (Macintosh) LYNX (UNIX) y WINWEB (Windows)


7 /113

Como funcionan los Navegadores. Los Navegadores envían las solicitudes y reciben los datos necesarios para desplegar las páginas HTML en pantalla. Todo lo que sea especificado en este archivo ya sea sonido, vídeo, gráficos o simplemente texto, recupera todos los datos solicitados y formatea de acuerdo como se le indica en el archivo HTML y lo despliega. Todos los Navegadores realizan básicamente las mismas funciones tales como enviar correo, transferencia de archivos, obtener información de la red (archivos mediante Download), reproducir videos e imágenes y hacer peticiones a los servidores remotos. Nota: Las fuentes instaladas en su computadora y las preferencias de despliegue del Navegador determinan como será visualizado en texto.

Como surgió HTML Ahora bien el Desarrollo de Páginas Web mediante HTML para Internet surgió con la necesidad de poder compartir información, ya que dentro de este proyecto estaban muchas Universidades y Oficinas gubernamentales es por ello que se tuvo la necesidad de compartir información no solo mediante el uso de correos electrónicos y conexiones remotas, además se requería tenerla en el momento es por ello que surgieron los Visualizadores no-gráficos como por ejemplo Mosaic y posteriormente hubo la necesidad de compartir archivos gráficos. Para todo esto se creó un lenguaje sencillo pero eficaz que debería de contener algunas características básicas de un lenguaje formal. El HTML dio inicio al World Wide Web en Ginebra Suiza en el año de 1992, en el Laboratorio Europeo de Física Nuclear en Suiza y la Organización Europea para la Investigación Nuclear en Francia (CERN), un grupo de científicos reunieron los primeros documentos enlazados para así facilitar el compartir información a través de todo el mundo con otras organizaciones. Esta tecnología fue desarrollada por Tim Berners Lee, para ello combinó dos tecnologías ya existentes (el hipertexto y el protocolo de comunicaciones de Internet), creando un nuevo modelo de acceso a la información intuitivo e igualitario. Las famosas tres W han hecho posible que aprender a utilizar la Red sea algo al alcance de todos. Actualmente es el director del World Wide Web Consortium. Los elementos que se utilizan para crear las Páginas HTML son llamados Etiquetas o Tags, Las etiquetas dan formato al texto, vinculan archivos insertan gráficos y tablas, así como crean formularios que se emplean para recabar información de los usuarios.


8 /113

Esquema de Funcionamiento. El acceso a la Web funciona de la siguiente manera: Computadora Personal. El Visualizador de la computadora envía la solicitud de archivos HTML a los servidores remotos de Internet, utilizando direcciones llamadas URL’s (Localizadores Uniformes de Recursos). Cuando llegan los datos a la computadora el Visualizador interpreta las etiquetas de HTML y despliega el texto formateado junto con los gráficos. Modem Mediante el modem se realiza la conexión con el proveedor de Internet, el cual nos va ha dar la salida, esto se hace mediante una línea telefónica y este dispositivo convierte las peticiones, que son señales que pueden ser transmitidas y posteriormente al recibirlas las vuelve a convertir para poder ser interpretadas por la máquina. Proveedor de Acceso Es una organización Gubernamental, Educativa o Privada que nos proporciona el servicio de Internet y generalmente tiene un servidor de Web, que en ruta las solicitudes de su computadora a otros servidores de Web y posteriormente transmite los archivos HTML obtenidos a quien se lo haya solicitado. Internet Es una red mundial de Servidores. Envía la solicitud de un servidor a otro hasta encontrar la dirección URL solicitada por el archivo HTML y posteriormente regresa una respuesta, ya sea el archivo solicitado o un mensaje en el cual indica porque no ha sido encontrado dicho archivo. Servidor de Web El servidor de Web es una Computadora que contiene una serie de programas que sirven para atender las solicitudes de los usuarios no importando el Sistema Operativo (UNIX, Windows, MSDOS, Macintosh) con el cual trabaje dicho usuario ni el Visualizador utilizado. Este Servidor contiene todos los archivos necesarios que están relacionados con el archivo HTML solicitado, así como programas conocidos como GATEWAY SCRIP para enviar la solicitud a otro servidor de Web.


9 /113

Compuadora Proveedor Servidor de Web 1 c/Modem de Internet (Windows NT)

Switch

Servidor de Web 2 Servidor DNS Puerta de Enlace (UNIX) (GATEWAY)

Servidor de Web 3 Servidor de Web N ( UNIX) (LINUX) Esquema de funcionamiento


10 /113

II. Página HTML

Definición Hiper Text Markup Languaje Hyper Text Markup Language (lenguaje de marcación de hipertexto), es un lenguaje de marcas diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas Web. Gracias a Internet y a los navegadores del tipo Explorer o Netscape, el HTML se ha convertido en uno de los formatos más populares que existen para la construcción de documentos. En sus diferentes versiones, el lenguaje HTML ha ido sufriendo modificaciones que han ido adaptándolo a las necesidades y características de Internet de cada momento. De esta forma, etiquetas que inicialmente se implementaron se han ido suprimiendo luego, mientras que han ido introduciéndose etiquetas nuevas en cada versión. Y no sólo eso, sino que cada empresa fabricante de navegadores han ido implementando etiquetas y extensiones propias al lenguaje, de tal forma que llegó un momento en el que reinó un caos casi total, resultando muy difícil la creación de páginas Web que se visualizaran igual en los diferentes navegadores. Para poner un poco de orden es esta situación, diversas empresas del sector (Nestcape, Microsoft, etc.) y diferentes organismos interesados crearon, en 1996 y a instancias de Tim Berners-Lee, el World Wide Web Consortium, más conocido como W3C, que ha tomado bajo su responsabilidad la evolución de los protocolos y estándares asociados con la Web.

Etiquetas Las etiquetas son las marcas que van a contener el texto, gráfico y en general la información que necesitemos darle formato. Las etiquetas, deben estar encerradas entre signos de < y >, además la información deberá llevar una etiqueta al inicio y otra al final, la etiqueta final llevará antes del nombre de la etiqueta una diagonal normal que indica que es la etiqueta cierre. Etiqueta de inicio <ETIQUETA> Etiqueta de cierre </ETIQUETA> Nota: La etiqueta deberá ir escrita en mayúsculas. Por otro lado las etiquetas contienen atributos propios de ellas, además estos atributos pueden contener parámetros.


11 /113

Atributo = PARAMETRO o VALOR. Nota: El Atributo debe estar escrito con la primer letra mayúscula y el resto en minúsculas, el parámetro o valor debe de ir en mayúsculas y entre comillas. Sintaxis Como ya se menciono la sintaxis que se maneja en el Desarrollo de páginas HTML, debe llevar la etiqueta posteriormente la información y por último la etiqueta cierre.

<ETIQUETA> Contenido o información </ETIQUETA> La información puede ser Texto, imagen, archivo, etc. La sintaxis de una etiqueta con atributos y parámetros; en donde la etiqueta va en mayúsculas y el atributo inicia con mayúscula y el parámetro esta en mayúsculas.

<FONT Size = “5” Color = “GREEN”> Texto a modificar </FONT>

Estructura Básica Como ya se mencionó el desarrollo de páginas HTML para Internet esta basado en etiquetas (Tags). Una de las características principales de este Lenguaje es: “La Programación Estructurada”. Esto quiere decir que tenemos una estructura general que debemos seguir. Para poder diseñar una Página HTML debemos de tomar en cuenta las siguientes recomendaciones, para seguir con el estándar ya establecido por WWW Consortium. Las características siguientes están divididas en Formales e Informales, las primeras necesariamente se deben de cumplir para poder ser visualizadas y las restantes pueden funcionar o no, pero deben ser respetadas para que se puedan visualizar por cualquier Navegador bajo cualquier Sistema Operativo llámese Windows, UNIX, Macintosh, etc. Recomendaciones: 1. El contenido de una Página HTML, para poder ser desplegada por un Visualizador

(Netscape o Internet Explorer), debe ser solo texto y llevar la extensión html. 2. El contenido debe ser solo texto. 3. El nombre del archivo debe tener la extensión html.


12 /113

Consideraciones: 4. Los acentos y caracteres especiales deben ser marcados mediante etiquetas. 5. El inicio de una página y el fin debe llevar la etiqueta HTML. 6. Debe contener las etiquetas de cabecera y cuerpo de la página HTML. 7. Cada etiqueta utilizada debe de llevar su respectiva etiqueta de cierre. 8. Las Etiquetas deben ser escritas en mayúsculas. 9. Los Atributos deben ser escritos con la primera letra mayúscula. 10. Los Parámetros deben ser escritos en mayúsculas. Cabe mencionar que el lenguaje HTML, debe contener las características anteriores, ya que como este lenguaje está en constante evolución debemos respetar estas condiciones, para llevar una mejor estructura en el desarrollo de la página y así darle un mantenimiento adecuado. Para Desarrollar Páginas HTML, sólo necesitamos contar con: ♦ Un editor de textos (Block de notas, Wordpad, Word, etc.) ♦ Un Navegador (Netscape, Internet Explorer, etc.) ♦ Aprender el lenguaje de Páginas HTML ♦ No necesitamos tener una conexión a Internet. Para Desarrollar Páginas HTML, debemos de tomar en cuenta algunas consideraciones: ♦ En que tipo de Navegador será visualizado. ♦ Los tipos de Fuentes que están instalados en la computadora en que será desplegado el

archivo (en el desarrollo se pueden dar alternativas). ♦ Evitar insertar muchas imágenes en la página, ya que esto hará lenta su visualización. ♦ Que las imágenes insertadas en el documento no sean muy grandes (tamaño en bytes). ♦ Realizar un diseño llamativo, novedoso y dinámico (sin caer en la exageración). ♦ Al desarrollar se recomienda iniciar por definir el fondo de la página, ya sea utilizando

un color o bien una imagen. Y a que el contenido debe contrastar con esto. ♦ Respetar la sintaxis, ya que algunas etiquetas funcionan aun con errores pero no es

correcto hacerlo de esa manera. ♦ El más importante de todos. No existe un formato para desplegar la información. Esto

depende únicamente de la creatividad del diseñador y tener bien definido que es lo que se quiere mostrar.

Nota: Todas las páginas para el Web deben de llevar al inicio y al final la etiqueta <HTML> y </HTML>, que indica que será un archivo que podrá ser interpretado por el Visualizador en el Web de su preferencia.


13 /113

Elementos de Páginas HTML. Ahora bien después de tomar en cuenta las recomendaciones anteriores, daremos inicio con el desarrollo de una Página de Internet. Las Páginas para Internet cuentan con una estructura básica, dentro de ellas no se manejan arreglos, ni procedimientos, tampoco se declaran variables como se hace en otros lenguajes. Solamente maneja etiquetas y las más importantes son las siguientes. La etiqueta <HTML> indica el inicio de una página, la etiqueta <HEAD> indica que es la cabecera y la etiqueta <BODY> que es el cuerpo de la misma. Cada una de ellas debe llevar una etiqueta que indica el cierre de la misma, se debe de cerrar primero la última que se abrió, después la anterior y así sucesivamente. Estructura de una Página HTML. Etiquetas de la Cabecera (HEAD) Las etiquetas básicas que son contenidas dentro de la Cabecera de una Página HTML, son el título y los comentarios. • Título <TITLE> El Título es la etiqueta que nos permite darle nombre al contenido de nuestra página y debe cumplir con las siguientes características: 1. El mostrado en la parte superior del Navegador (Browser). 2. Es lo que se guarda en el Bookmarks del Visualizador como referencia. 3. Debe describir el contenido de la página. 4. Debe ser corto y no rebasar los 50 caracteres de lo contrario es truncado.

<HTML> <HEAD> </HEAD>

<BODY> </BODY> </HTML>

14 /113

5. Use títulos que tengan sentido para la gente que lo observe. Ya que generalmente son llamadas por los Bookmarks.

6. No utilice Títulos vagos, como por ejemplo página 30 ó Html2 u Hoja45a. Sintaxis <HEAD> <TITLE> Título de la página </TITLE> </HEAD> • Comentarios . Los comentarios dentro de una Página HTML generalmente se colocan en la Cabecera, ya que indican alguna consideración que se tomo al ser creada la página. Sin embargo pueden ir dentro de cualquier parte de la misma página, ya sea para documentar alguna etiqueta y/o información. Sintaxis  Ejemplo de Título y comentarios Etiquetas del Cuerpo (BODY) Actualmente las etiquetas utilizadas dentro del cuerpo de una página HTML nos permiten darle la presentación al texto de distintas formas, así como a las imágenes, lo que podemos hacer con HTML es lo siguiente.

♦ Dar Formato a un Texto. ♦ Crear listas. ♦ Establecer vínculos hacia otras páginas.

<HTML>  <HEAD> <TITLE> Título de la página </TITLE> </HEAD> <BODY>  </BODY> </HTML>


15 /113

♦ Insertar imágenes. ♦ Crear tablas. ♦ Utilizar imágenes como vínculos hacia otras páginas. ♦ Crear formularios. ♦ Crear Marcos o Frames.

• Dar formato a un texto Se pueden obtener seis diferentes tipos de tamaño de fuente para título de encabezados. Se puede dar formato al texto con negritas, cursivas, itálicas, subrayadas, etc. Se pueden emplear diferentes tipos de fuentes y tamaños dependiendo del Visualizador. Se puede dar color al texto.

• Crear Listas Si va a presentar información en la página HTML, podría ser útil desplegar los datos de manera que tengan sentido y sean fáciles de leer. Nos permite crear listas con viñetas o viñetas numeradas.

• Establecer Vínculos hacia otras páginas Nos permite acceder a otros documentos del Web de manera fácil y sin necesidad de que nosotros demos las direcciones específicas de esos archivos. Además podemos realizar ligas hacia nuestro mismo Web, un Web distinto o dentro de la misma página.

• Insertar Imágenes La mayoría de los Visualizadores nos permiten agregar imágenes a nuestra Página HTML dentro de las cuales acepta formato GIF y JPG, que son las más utilizadas.

• Crear Tablas Si necesitamos que nuestra información sea presentada en filas y columnas se pueden insertar tablas. Tenemos que tener en cuenta que un espacio en blanco en la página no significa que HTML dejara espacios en blanco o líneas.

• Utilizar imágenes como vínculos hacia otras páginas.


16 /113

Dentro de las bondades que tiene HTML, una es utilizar imágenes como vínculos hacia otras páginas; podemos analizar una imagen con algún programa y obtener los valores de las coordenadas para así utilizarla como vínculo.

• Utilizar formularios Una de las características importantes dentro del Web es poder interactuar con las personas que navegan en Internet mediante formularios.

• Crear Marcos (Frames) Los Marcos son utilizados para desplegar más de una página HTML a la vez en el Navegador.

III. Formato de una Página. Etiquetas Básicas o de Texto. Las etiquetas básicas son aquellas que se utilizan para darle formato a un texto, y pueden ser para poner encabezados negritas, cursivas, etc. Pero vamos a describirlas a continuación e incluir ejemplos ilustrativos para su mayor comprensión. ♦ Etiquetas de Texto más Utilizadas

<B>Texto </B> Negrita <I>Texto </I> Itálica <U>Texto </U> Subrayada <S>Texto </S> Tachada <BLINK> Texto </BLINK> Intermitente <TT>Texto </TT> Monoespaciada

Ejemplo:

Texto Negrita Texto Itálica Texto Subrayada Texto Tachada


17 /113

♦ Texto Predeterminado <PRE>

<PRE> Texto </PRE> Texto preformateado, respeta los saltos de línea Texto <P> Fin de párrafo (Salto de línea doble) Texto <BR> Salto de línea sencillo

Ejemplo: ♦ Texto centrado <CENTER> <CENTER> Texto </CENTER> Centra el Texto dentro del Navegador <HR> Muestra una delgada línea en el Navegador Está etiqueta tiene los siguientes Noshade Indica que la línea se rellena de color gris Size Indica el grueso de la línea en pixeles (1,2,...n) Width Indica el largo de la línea en caso de no definirlo

toma el 50% del Navegador. Ejemplo: Ahora realizaremos nuestra primera página con el siguiente ejemplo

<PRE> Por debajo de la mesa, acaricio tu rodilla, y bebo sorbo a sorbo Tu mirada angelical. </PRE> Vivo en un país libre <BR> cual solamente puede ser libre <BR> en esta tierra, en este instante <BR> Y soy feliz porque soy Gigante <BR> Amo a una mujer clara, <BR> Que amo y me ama, <BR> Sin pedir nada, o casi nada <BR> Que no es lo mismo pero es igual. <P>

<CENTER> Texto </CENTER> <HR Noshade Size=2 Width=50%>Texto </HR>


18 /113

Ejemplo numero 1:

<HTML> <HEAD> <TITLE> Mi primera página del curso HTML </TITLE> </HEAD> <BODY> <H1> <CENTER> Primera página </CENTER> </H1> <HR>

Vamos a definir una página Web como aquello que el usuario ve en la ventana de su navegador, mientras que un documento Web será el código interno que genera la página, y que por lo tanto contendrá elementos visibles en la página Web y otros elementos que no serán visibles en ningún momento en la ventana del navegador.<P>

<HR> </BODY> </HTML>

Nota: Los acentos en lenguaje HTML se ponen mediante caracteres especiales, ya que de esta forma estamos forzando a que nuestro texto se visualice acentuado en cualquier navegador donde se despliegue nuestra página, como se verá a continuación.


19 /113

Fuentes Se pueden emplear diferentes tipos de fuentes y tamaños dependiendo del navegador con el cual estemos trabajando, además se puede dar color al texto, así como definir el tamaño de la letra a utilizar. El tamaño de fuente por defecto es de 3, pero nos permite utilizar los tamaños de 1 al 7. Partiendo que el tamaño inicial es de 3 y queremos utilizar el tamaño 4 podemos hacerlo de dos maneras:

Sintaxis.

1. <FONT Size=4 > Texto </FONT>

2. <FONT Size=+1> Texto </FONT> Si queremos utilizar un tipo de fuente debemos de saber las que acepta nuestro navegador ya que dependemos de éste. Pero también podemos darle color a la letra con el Atributo Color.

Sintaxis. 1. <FONT Color = “red”> Texto </FONT> 2. <FONT Color = “#ff000”>Texto </FONT> 3. <FONT Face = "Arial"> Texto </FONT>

Caracteres especiales Los caracteres especiales utilizados para páginas HTML son: los acentos, las eñes, los distintos caracteres pueden ser &, >, <, $, etc. Sintaxis Entidad a utilizar Acentos &"vocal"acute; Eñes &"n"tilde; Ejemplo:

• á é í ó ú • generación generación • niñez niñez


20 /113

Tabla de Caracteres Especiales. Símbolo Nombre de la Entidad Referencia de Carácter Símbolo < < < Símbolo > > > Símbolo ¢ ¢ ¢ Símbolo £ £ £ Símbolo ¥ ¥ ¥ Símbolo © ® © Símbolo ® ® ® Símbolo ° ° ° Símbolo ¼ ¼ ¼ Símbolo ½ ½ ½ Símbolo ¾ ¾ ¾ Símbolo × × ×

Encabezados <H# > Texto </H#> Los encabezados dentro de la página los ponemos con la etiqueta <H#> donde los números son 1, 2, 3, 4, 5, 6. Siendo 1 el tamaño mayor y 6 el tamaño menor de Encabezado. Ejemplo:

♦ Código de Colores RGB El código esta definido por la combinación de los colores primarios que son Rojo “Red”, Verde “Green” y Azul “Blue” - RGB -, la combinación de todos los colores da como resultado el Blanco y la ausencia total de estos da como resultado el negro. Estos son algunos colores de los más utilizados, pero existe una gama de 16 millones.

COLORES COLOR EN INGLES

CODIGO HEXADECIMAL RGB

R G B Rojo Red ff 00 00

Verde Green 00 ff 00

Texto 1 Texto 2 Texto 3 Texto 4 Texto 5 Texto 6


21 /113

Azul Blue 00 00 ff Blanco White ff ff ff Negro Black 00 00 00

Amarillo Yellow ff ff 00 Gris Gray cc cc cc Rosa Pink ff 00 ff

♦ Más Etiquetas de Texto <PLAINTEXT> Texto </PLAINTEXT> Aniquila las etiquetas que estén contenidas dentro de ella. Esta etiqueta es utilizada cuando se quiere presentar en el Visualizador alguna parte de código HTML como información. <BLOCKQUOTE> Texto </BLOCKQUOTE> Esta etiqueta es utilizada para que el texto tenga una sangría de 5 columnas. <BASEFONT> Texto </BASEFONT> Define el tipo, tamaño y color de fuente que va ha ser utilizado dentro de toda la página HTML. ♦ Etiquetas Alternativas

<STRONG> Texto </ STRONG > Negrita

<EM> Texto </EM> Subrayada

<CITE> Texto </CITE> Subrayada

<CODE> Texto </CODE> Monoespaciada

<KBD> Texto </KBD> Monoespaciada

<SAMP> Texto </SAMP> Monoespaciada

<ADDRESS> Texto </ADDRESS> Cursivas

<BIG> Texto </BIG> Grandes

<SMALL> Texto </SMALL> Pequeñas

<SUB> Texto </SUB> Subíndice

<SUP> Texto </SUP> Superíndice


22 /113

Ejemplo:

IV. Listas Definición Hay ocasiones en las que debemos presentar en nuestras páginas algún tipo de índice o destacar en breves palabras los puntos fundamentales de algún tema concreto. Y en esas ocasiones necesitamos alguna forma de presentación de contenidos especialmente concebida para ello. Una forma de presentar la información dentro de páginas HTML es mediante listas y para ello contamos con cuatro tipos de listas. Cualquier tipo de lista debemos definirla antes de utilizarla. Para definir un elemento de una lista utilizamos la etiqueta <LI>. Descripción:

Listas Ordenadas Todas las listas de este tipo se construyen partiendo de la pareja de etiquetas base <OL>...</OL> (Ordered List=Lista Ordenada) Estas etiquetas base forman un bloque por sí mismas, deben siempre ir en parejas apertura-cierre y contienen en su interior un número variable de etiquetas <LI>...</LI>, que son las que van a definir los diferentes elementos textuales de las listas. OL: Lista ordenada LI: Elementos de una lista Las listas ordenadas tienen las siguientes opciones. <OL TYPE = Opción> l = Números (estándar)

Texto Subíndice Texto Superíndice Texto Grande Texto Pequeña

LI : Elementos de una lista OL: Lista ordenada UL: Lista No ordenada DL: Lista de Glosario


23 /113

a = Letras minúsculas A = Letras mayúsculas i = Números romanos en minúsculas. I = Números romanos en mayúsculas.

♦ Atributo start="x": Define el primer secuenciador de la serie de elementos de la lista, es decir, cuál va a ser el primer identificador que va a aparecer. Los valores del parámetro "x" son siempre números enteros a partir de 1. Si no se especifica este atributo, la lista empezará siempre por el primer elemento Ejemplos:


24 /113

Listas No ordenadas Este tipo de listas muestran una serie de elementos que no están dispuestos según un patrón específico de ordenación, es decir; que están definidos los diferentes elementos mediante un signo determinado común a todos ellos, signo que normalmente se denomina viñeta. Todas las listas de este tipo se construyen partiendo de la pareja de etiquetas base <UL>...</UL> (Unordered List=Lista Sin ordenar). Estas etiquetas base forman un bloque por sí mismas, deben siempre ir en parejas apertura-cierre y contienen en su interior un número variable de etiquetas <LI>...</LI>, que son las que van a definir los diferentes elementos textuales de las listas.

UL: Lista no ordenada LI: Elementos de una lista

Las listas No ordenadas tienen las siguientes opciones. <UL Type = Opción > disc = disco (estándar) circle = circulo square = cuadrado Ejemplo: Listas de Definiciones Las listas de definiciones se caracterizan por presentar los elementos que la forman dispuestos según un esquema de tipo glosario, apareciendo una serie de elementos con sus correspondientes definiciones.

El código es: <UL TYPE="disc"> <LI>primer elemento</LI> <LI>segundo elemento</LI> <LI>tercer elemento</LI> </UL> El resultado es:

• primer elemento • segundo elemento • tercer elemento


25 /113

Estas listas se construyen partiendo de la pareja de etiquetas de bloque <DL>...</DL> (Definitions List), y dentro de ellas se van estableciendo los elementos mediante la etiqueta <DT>, y su definición correspondiente mediante la etiqueta <DD>. Las etiquetas <DT> y <DD> no poseen pareja de cierre, pero la etiqueta padre <DL> se debe cerrar siempre con su correspondiente pareja </DL>. DL = Etiqueta de inicio. DT = Etiqueta de elemento. DD = Etiqueta de Co-elemento. Ejemplo: Listas Anidadas Al tener las listas características de bloque es posible anidar unas con otras sin ningún tipo de problema, al igual que ocurre con las tablas. Y esta anidación puede tener cuantos niveles queramos, con tan sólo respetar la sintaxis propia y tener cuidado de cerrar bien las etiquetas abiertas. La forma de anidar sucesivamente varias listas es siempre la misma. Dentro de una etiqueta <LI> se introduce el bloque completo de la lista anidada, cuidando de cerrar correctamente tanto el bloque hijo (con su correspondiente etiqueta </OL> p.e.) como el elemento <LI> padre (con su correspondiente etiqueta </LI>).

El Código es: <DL> <DT>Primer elemento <DD>Es el primero de la lista <DT>Segundo elemento <DD>Es el que va después del primero </DL> El resultado es: Primer elemento

Es el primero de la lista Segundo elemento

Es el que va después del primero


26 /113

Ejemplo:

El código es: <OL> <LI>primer elemento</LI> <OL type="a"> <LI>sub-elemento 1-1</LI> <LI>sub-elemento 1-2</LI> <LI>sub-elemento 1-3</LI> </OL> <LI>segundo elemento</LI> <OL type="a"> <LI>sub-elemento 2-1</LI> <UL type="disc"> <LI>sub-elemento 2-1-1</LI> <LI>sub-elemento 2-1-2</LI> </UL> <LI>sub-elemento 2-2</LI> </OL> <LI>tercer elemento</LI> </OL> El Resultado es:

1. primer elemento a. sub-elemento 1-1 b. sub-elemento 1-2 c. sub-elemento 1-3

2. segundo elemento a. sub-elemento 2-1

• sub-elemento 2-1-1 • sub-elemento 2-1-2

b. sub-elemento 2-2 3. tercer elemento


27 /113

Anidando otros elementos:

El código es: <UL> <LI>primer elemento</LI> <LI>segundo elemento</LI> <TABLE Border="1"> <TR> <TD>celda 1-1</TD> <TD>celda 1-2</TD> </TR> <TR> <TD>celda 2-1</TD> <TD>celda 2-2</TD> </TR> </TABLE> </LI> <LI>tercer elemento</LI> </UL> El Resultado es:

• primer elemento • segundo elemento

celda 1-1 celda 1-2

celda 2-1 celda 2-2

• tercer elemento


28 /113

V. Tablas

Definición Las tablas son una de las herramientas mas útiles de que disponemos en HTML, ayudándonos a situar dentro de nuestro documento los diferentes elementos que lo componen. Las tablas organizan la información en una matriz o cuadricula de columnas verticales y renglones horizontales, cada cuadro se denomina celda, una celda puede contener texto, listas o gráfico. Las Tablas son utilizadas muy a menudo ya que la mayoría de las Páginas HTML necesita presentar la información en filas y columnas. Tenemos que tener en cuenta que un espacio en blanco en la página no significa que HTML dejara espacios en blanco o líneas.

Formato Las tablas constan de tres partes básicas: Título, Encabezado y Filas de Celdas. Están formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado es una columna, definiéndose una celda como el espacio formado por la intersección de una fila y una columna. Empiece por la esquina superior izquierda, hasta llegar a la esquina inferior derecha cada celda debe contener algo; use espacios en blanco para crear celdas vacías. Título Encabezados Filas de Celdas


29 /113

A continuación se describen las etiquetas utilizadas en las tablas. Donde: TABLE : Indica que es una Tabla CAPTION : Título de la Tabla TH : Encabezados TR : Renglón TD : Datos de la Tabla Etiqueta: TABLE

Atributo Parámetro VP Descripción Border 0,1,2,..n 0 Ancho del recuadro Width % ó pixeles 30% Ancho de tabla en Navegador Cellspacing % ó pixeles 2 Espacio entre celdas Cellpadding % ó pixeles 0 Espacio interno de celda entre los bordes y su contenido

Etiqueta: CAPTION

Atributo Parámetro VP Descripción Align TOP * Título arriba de la tabla BOTTOM Título abajo de la tabla Align LEFT Izquierda CENTER * Centro RIGHT Derecha

NOTA: No acepta los dos Align, sólo sí se toma TOP por defecto. Etiqueta: TR

Atributo Parámetro VP Descripción Bgcolor Color Nulo Define el color de fondo de la celda. Background Ubicación del archivo a usar como fondo. Align RIGHT Derecha CENTER * Centro LEFT Izquierda Valign TOP Arriba MIDDLE * En medio BOTTOM Abajo


30 /113

Etiqueta: TH

Atributo Parámetro VP Descripción Bgcolor Color Nulo Define el color de fondo de la celda. Background Ubicación del archivo a usar como fondo. Colspan 1,2,3, .... 1 Define el número de columnas que afecta el encabezado Align RIGHT Derecha CENTER * Centro LEFT Izquierda Valign TOP Arriba MIDDLE * En medio BOTTOM Abajo

Etiqueta: TD

Atributo Parámetro VP Descripción Bgcolor Color Nulo Define el color de fondo de la celda. Background Ubicación del archivo a usar como fondo. Rowspan 1,2,3, .... 1 Define el número de renglones que afecta la celda. Align RIGHT Derecha CENTER * Centro LEFT Izquierda Valign TOP Arriba MIDDLE * En medio BOTTOM Abajo


31 /113

Ejemplos de Tablas Tabla Básica sin bordes <H2>Tabla Básica sin bordes</H2> <TABLE> <CAPTION> Ejemplo 1</CAPTION> <TR><TH>Columna 1</TH><TH>Columna 2</TH><TH>Columna 3</TH></TR> <TR><TD>Ren1 Dat1</TD><TD>Ren2 Dat2</TD><TD>Ren3 Dat3</TD></TR> <TR><TD>Ren2 Dat1</TD><TD>Ren2 Dat2</TD><TD>Ren2 Dat3</TD></TR> <TR><TD>Ren3 Dat1</TD><TD>Ren3 Dat2</TD><TD>Ren3 Dat3</TD></TR> </TABLE> <HR> Resultado

Con Border=1, 60% Browser, Espacio entre Celdas 3 y Datos 15 <H2>Con Border=1,60% Browser, Espacio entre Celdas 3 y Datos 15</H2> <TABLE Border=1 Width=60% Cellspacing=3 Cellpadding=15> <CAPTION> Ejemplo 2</CAPTION> <TR><TH>Columna 1</TH><TH>Columna 2</TH><TH>Columna 3</TH></TR> <TR><TD>Ren1 Dat1</TD><TD>Ren2 Dat2</TD><TD>Ren3 Dat3</TD></TR> <TR><TD>Ren2 Dat1</TD><TD>Ren2 Dat2</TD><TD>Ren2 Dat3</TD></TR> <TR><TD>Ren3 Dat1</TD><TD>Ren3 Dat2</TD><TD>Ren3 Dat3</TD></TR> </TABLE> <HR>


32 /113

Resultado

Atributo en CAPTION Align Center <H2>Atributo en CAPTION Align Center <H2> <TABLE Border=1> <CAPTION Align = “Center”>Ejemplo 3</CAPTION> <TR><TH>Columna 1</TH><TH>Columna 2</TH><TH>Columna 3</TH></TR> <TR><TD>Ren1 Dat1</TD><TD>Ren2 Dat2</TD><TD>Ren3 Dat3</TD></TR> <TR><TD>Ren2 Dat1</TD><TD>Ren2 Dat2</TD><TD>Ren2 Dat3</TD></TR> <TR><TD>Ren3 Dat1</TD><TD>Ren3 Dat2</TD><TD>Ren3 Dat3</TD></TR> </TABLE> <HR>


33 /113

Resultado

Atributos en las Celdas <H2>Atributos en las Celdas</H2> <TABLE Border=5 > <CAPTION> Ejemplo 4 </CAPTION> <TR> <TH> </TH> <TH>Arriba</TH> <TH>Centrado</TH> <TH>Abajo</TH></TR> </TR> <TR> <TH Width=100 >Arriba</TH> <TD Width=100 Height=100 Align = “LEFT” VAlign = “TOP>Ren1 Dat1</TD> <TD Width=100 Height=100 Align = “CENTER” VAlign = “TOP>Ren1 Dat1</TD> <TD Width=100 Height=100 Align = “RIGHT” VAlign = “TOP>Ren1 Dat1</TD> </TR>


34 /113

<TR> <TH> Centrado</TH> <TD Width=100 Height=100 Align = “LEFT VAlign = “MIDDLE>Ren1 Dat1</TD> <TD Width=100 Height=100 Align = “CENTER VAlign = “MIDDLE>Ren1 Dat1</TD> <TD Width=100 Height=100 Align = “RIGHT VAlign = “MIDDLE>Ren1 Dat1</TD> </TR> <TH> Izquierda</TH> <TD Width=100 Height=100 Align = “LEFT VAlign = “BOTTOM>Ren1 Dat1</TD> <TD Width=100 Height=100 Align = “CENTER VAlign = “BOTTOM>Ren1 Dat1</TD> <TD Width=100 Height=100 Align = “RIGHT VAlign = “BOTTOM>Ren1 Dat1</TD> </TR> </TABLE> <HR> Resultado


35 /113

Atributo BGCOLOR <H3>Atributo BGCOLOR </H3> <TABLE BORDER=5 Cellpadding=20> <TR> <TH Bgcolor=red > 1 </TH><TH Bgcolor=green > 2 </TH> <TH Bgcolor=gray> 3 </TH><TH Bgcolor=yellow> 4 </TH> </TR> </TABLE> <HR> Resultado

Atributo Background <H3>Atributo Backgroud </H3> <TABLE BORDER=5 Cellpadding=20> <TR> <TD Background="..\Mis imágenes\uni 1.jpg" Width="200"> Hola </TD> <TD Background="..\Mis imágenes\uni 2.jpg" Width=200 > Hola </TD> <TD Background="..\Mis imágenes\uni 3.jpg" Width=200> Hola </TD> <TD Background="..\Mis imágenes\hadas.jpg" Width=200> Hola </TD> </TR> </TABLE> <HR>


36 /113

Resultado

Nota: El atributo Background funciona para cada celda independiente, para cada fila o para toda la tabla. Solo hay que tomar en cuenta la ruta de donde vamos a tomar la imagen.


37 /113

VI. Ligas o Vínculos

Definición Las Ligas también llamadas vínculos o enlaces, nos permiten acceder o brincar a otros documentos del Web, para lo cual utiliza el concepto de Hipertexto, la cual es una palabra o frase de una página Web que, al hacer clic sobre ella nos envía hacia un documento diferente del Web. Nos podemos encontrar con tres distintos tipos de Ligas.

♦ Hacia otras páginas de nuestro Web ♦ Hacia páginas de un Web diferente ♦ Hacia la misma página.

Las ligas o enlaces son los elementos en los documentos HTML que le dan el toque de interés a las páginas de Internet.

Sintaxis. La etiqueta que se utiliza para realizar un vínculo es <A Href >, la sintaxis es la siguiente:

<A Href = “URL”> Hipertexto </A>

de donde: Href Es el atributo que nos permite indicarle al documento hacia donde se va ha realizar el hiperenlace o salto. Hipertexto Es una palabra o frase que nos servirá para acceder a otro documento. Simplemente haciendo clic sobre de él. Además de texto podemos poner imágenes que servirán de la misma manera para realizar los accesos a otros documentos. URL’s Los URL’s ( Universal Resource Locator ) indican la ubicación de un archivo, además son también llamados rutas de acceso. Existen dos tipos de Rutas Absolutas y Relativas, A continuación mencionaremos como funcionan.


38 /113

Rutas Absolutas y Relativas Rutas Absolutas Definen la ubicación del archivo, empezando desde el nivel más alto y enlistan cada directorio necesario para encontrar dicho archivo. Este tipo de ruta tiene la siguiente estructura: Protocolo://Servidor/Directorios/Archivo.html Donde: Protocolo: Es el método que se emplea para transferir los datos a través de las líneas de Internet, los protocolos utilizados en el Web son los servicios que proporciona Internet, como por ejemplo Ftp, Http, Gopher, Telnet, etc. El más utilizado es Http. Ejemplo. <A Href = “http//: www.unam.mx/...” >Hipertexto </A> Servidor: El servidor es el nombre de la computadora donde se encuentra el documento que deseamos acceder. Ejemplo: <A Href = “http//:www.ingenieria.unam.mx/ .......” >Hipertexto </A> Directorios/Archivo.html: Una vez que tenemos identificado el servidor, el siguiente paso es indicarle la posición exacta que tiene el documento dentro del servidor. Para lo cual debemos indicar la ruta exacta en donde se encuentra el archivo. <A Href = “http//:www.ingenieria.unam.mx/~unica/calendario_cursos.html” >Hipertexto </A> Nota: Si alguna de las partes antes mencionadas tiene algún error al indicarlas, nos enviará un mensaje el Navegador de que no encontró el documento y debemos de revisar que el URL este escrito correctamente.


39 /113

Rutas Relativas Definen la ubicación de un archivo tomando en cuenta como referencia la posición del archivo que tiene el vínculo. El Navegador busca el archivo en el mismo directorio en donde se encuentra el documento actual. Cuando utilizamos el nombre de un archivo como URL estamos utilizando una ruta relativa. En este caso el Navegador busca el archivo en el mismo directorio en el que está el documento actual, si no esta allí no podrá encontrar el archivo. Ejemplo: <A Href = “archivo.html.” >Hipertexto </>A Las Ligas Como ya se menciono las ligas hacia el mismo Web son aquellas que realizamos ya sea en forma relativa o Absoluta, dentro de nuestro mismo servidor de Web. Ejemplo: Ligas a Web remotos Las ligas hacia Web remotos se realizan de la misma forma que hacia nuestro Web solo que la diferencia es que la petición se realiza a otro servidor distinto, recordando el esquema de funcionamiento de las páginas HTML imaginemos como hace la petición de un servidor a otro.

El Código es: <A Href = “http//:www.ingenieria.unam.mx” > Facultad de Ingeniería</A> <A Href =”http//:www.derechos.unam.mx” > Facultad de Derecho </A> <A Href =”http//:www.fca.unam.mx” > Facultad de Contaduría y Administración </A> El resultado es: Facultad de Ingeniería Página de Ingeniería, UNAM Facultad de Derecho Página de Derecho, UNAM Facultad de Contaduría y Administración Página de contaduría, UNAM


40 /113

Ejemplo:

Anclas Conocidas como ligas a la misma página, el texto y los gráficos pueden vincularse a lugares del mismo documento. Éste tipo de ligas son utilizadas cuando tenemos documentos muy grandes, que nos obligan a acceder rápidamente a los temas importantes del documento. Estas ligas constan de dos partes:

♦ El Ancla ♦ El Vínculo mismo

El Ancla Identifica el lugar al cual nos queremos mover. Funcionará como una especie de bandera que identifica la posición exacta del lugar al cual queremos llegar, una vez que lleguemos a el ancla esta aparecerá en la parte superior del Visualizador. Sintaxis:

<A Name = “#Nombre” > Name Este atributo viene a sustituir a Href para indicarnos que el vínculo se realizará en el mismo documento.

El Código es: <A Href = “http//www.microsoft.com.” >Microsoft</A> <A Href =”http//www.presidencia.gob.mx” >Presidencia</A> <A Href =”http//www.acapulco.gob.mx.” >Acapulco</A> El resultado es: Microsoft Página de Microsoft Corporation Presidencia Página de la presidencia de la Republica Acapulco Página del Puerto de Acapulco Gro.

41 /113

#Nombre Es la palabra clave la cual nos indicará el lugar a donde se moverá la página. El Vínculo mismo El vínculo utiliza el nombre del ancla en lugar del nombre del archivo, de esta manera reconocerá que tenemos que regresar al lugar donde está ese archivo. Sintaxis:

<A Href = “#Nombre”> Hipertexto </A> Href Como se menciono anteriormente la referencia que nos permite indicarle al documento hacia donde se va ha realizar el salto dentro del mismo documento. #Nombre Es ancla utilizada para saltar al mismo documento, este nombre debe ser el mismo que se declaró anteriormente. Ejemplo:  <A NAME="POEMAS"> <BR> <BR> <BR> <B><U>PRIMER EJEMPLO DE ANCLAS</U></B> <P> <P> <FONT COLOR="#ff6040">POEMAS </FONT> <BR> <BR> <BR>  <A HREF="#POEMAUNO"> POEMA UNO </A><BR> <A HREF="#POEMADOS"> POEMA DOS </A><BR> <A HREF="#POEMATRES"> POEMA TRES </A><BR> <A HREF="#POEMACUATRO"> POEMA CUATRO </A><BR> <A HREF="#POEMACINCO"> POEMA CINCO </A><BR> <BR> <BR> <BR>  <A NAME="POEMAUNO"> <B> POEMA UNO <B><BR> <PRE> Lento, amargo animal...

42 /113

Lento, amargo animal que soy, que he sido, amargo desde el nudo de polvo y agua y viento que en la primera generación del hombre pedía a Dios. </PRE> <A HREF="#POEMAS"> REGRESA A POEMAS </A><BR>  <BR> <BR> <BR>  <A NAME="POEMADOS"> <B> POEMA DOS <B><BR> <PRE> Amargo como esos minerales amargos que en las noches de exacta soledad maldita y arruinada soledad sin uno mismo— trepan a la garganta y, costras de silencio, asfixian, matan, resucitan. </PRE> <A HREF="#POEMAS"> REGRESA A POEMAS </A><BR>  <BR> <BR> <BR>  <A NAME="POEMATRES"> <B> POEMA TRES <B><BR> <PRE> Amargo como esa voz amarga prenatal, presubstancial, que dijo nuestra palabra, que anduvo nuestro camino, que murió nuestra muerte, y que en todo momento descubrimos </PRE> <A HREF="#POEMAS"> REGRESA A POEMAS </A><BR>  <BR> <BR> <BR>  <A NAME="POEMACUATRO"> <B> POEMA CUATRO <B><BR>

43 /113

<PRE> Amargo desde dentro, desde lo que no soy —mi piel como mi lengua—, desde el primer viviente, anuncio y profecía. </PRE> <A HREF="#POEMAS"> REGRESA A POEMAS </A><BR>  <BR> <BR> <BR>

 <A NAME="POEMACINCO"> <B> POEMA CINCO <B><BR> <PRE> Lento desde hace siglos, remoto —nada hay detrás—, lejano, lejos, desconocido. Lento, amargo animal que soy, que he sido. </PRE> <A HREF="#POEMAS"> REGRESA A POEMAS </A><BR>


1 /113


2 /113

VII. Imágenes

Tipos de Imágenes Los Navegadores pueden desplegar imágenes junto con el texto, lo que hace que los documentos se vean mejor. Lo que es más importante, las imágenes comunican información que sería imposible, o muy difícil de transmitir con palabras. Los principales usos que se le pueden dar a las imágenes son:

♦ Insertar un Logotipo de una empresa en particular. ♦ Imágenes de anuncios ♦ Fotos panorámicas y personales ♦ Gráficos de Población ♦ Firmas ♦ Iconos o imágenes ya establecidas ♦ Utilizar como liga ♦ Etc.

Ahora bien los tipos de imágenes que pueden ser utilizadas dentro de una página para Internet, pueden ser del tipo:

♦ GIF ♦ JPG o JPEG

GIF (Graphics Interchange File) Este tipo de imágenes no utiliza mucho espacio de memoria y además se cargan en vídeo muy rápido. Maneja un máximo de 256 colores. JPG o JPEG (Join Photographics Expert Group) Este tipo de imágenes generalmente son fotografías digitalizadas y manejan un mayor número de colores que las GIF, hasta 16 millones de tonos. Sintaxis <IMG Src =”Nombre de la Imagen. su extensión” > Donde: IMG Es la etiqueta que define que será utilizado un archivo de imagen para desplegarlo en el documento de nuestra página (Puede ser GIF o JPG).


1 /113

Src Este es el atributo que indica el origen de donde se obtendrá el archivo imagen. Nombre de la Imagen El nombre de la imagen debe de contener la ruta relativa y/o absoluta de donde se obtendrá el archivo, así como el mismo nombre de la imagen y su extensión correspondiente. Ejemplo:

Modificadores de Imagen Atributos de una imagen sin texto.

Atributo Parámetro Acción

Alt Texto El Texto alterno que indica lo que contiene la imagen.

Width % ó Pixeles Modifica el ancho del tamaño de la imagen

Height % ó Pixeles Modifica el alto del tamaño de la imagen

Border 0,1,2, .... Indica el borde de la imagen, el default es cero.

Align Left o Right Alineado en el Browser, por defecto es Left.

Alineado de texto alrededor de la imagen.

Atributo Parámetro Acción

Align Top Texto en la parte superior de la imagen

Align Texttop Texto en la parte superior de la imagen

Align Middle Texto en la parte media de la imagen

Align Bottom Texto en la parte inferior de la imagen

Align AbsMiddle Texto en la parte media absoluta de la imagen

Align AbsBottom Texto en la parte baja absoluta de la imagen

Align Baseline Texto en la línea base de la imagen

Vspace Pixeles Espacio de arriba y abajo entre el texto y la imagen.

Hspace Pixeles Espacio der e izq entre el texto y la imagen.

<IMG Src=”.../IMAGENES/logo.jpg ”>


2 /113

VIII. Utilerías para la Página. Hasta ahora se han mencionado atributos para algunas etiquetas, no se han mencionado los demás servicios de Internet en las Ligas, comentaremos como se utiliza una imagen como liga, ya que en el siguiente tema utilizaremos una imagen como mapa de ligas.

Etiqueta BODY La etiqueta BODY también cuenta con muchos atributos y a continuación se describirán algunos, cabe mencionar que estos son muy importantes dentro de los documentos HTML, ya que dan una apariencia agradable al visitar dichos documentos.

♦ Background ♦ Código de Colores ♦ Bgcolor, Text, Link, Vlink y Alink ♦ Márgenes del Documento

ATRIBUTO PARÁMETRO ACCIÓN BgColor Color Da color de fondo a la página. Background Archivo de imagen Utiliza una imagen como fondo de la página. Text Color Da color al texto de toda la página Link Color Da color al hipertexto sin ser activado Vlink Color Da color al hipertexto cuando ha sido visitado Alink Color Da color al hipertexto mientras esta activando Leftmargin Pixeles Sirve para indicar la primer columna de margen Topmargin Pixeles Sirve para indicar el primer renglón de inicio MarginWidth Pixeles Indica el ancho del margen MarginHeight Pixeles Indica el alto del margen

Ejemplo: <BODY Background=”C:/IMAGENES/Invierno.jpg” BgColor=”Pink” Text=”Black” Link=”Red” Alink=”Green” Vlink=”White”>


3 /113

Resultado

Nota: Todos los atributos mostrados en la tabla son para darle presentación al cuerpo de nuestra página, para usar cada uno de ellos debemos de tomar en cuenta el diseño que deseamos obtener.

Ligas con Imágenes Ya vimos en capítulos anteriores la forma de crear ligas, ahora vamos a ver como se crean ligas con imágenes. SRC="ruta_imagen" que establece la localización de la imagen que queremos insertar mediante la etiqueta IMG, y en donde la ruta puede ser relativa a la estructura de carpetas del sitio Web o absoluta, en cuyo caso se debe dar la URL completa del fichero gráfico.


4 /113

Ejemplos: <IMG SRC="..IMAGENES/bandera.jpg"> (ruta relativa) <IMG SRC="http://www.yahoo.com/imagenes/bandera.jpg"> (ruta absoluta) y con cualquiera de ellas tendremos ya la imagen incluida dentro de nuestra página, como se ve a continuación: Sintaxis

<A Href = “URL” > <IMG Src = “Archivo imagen”> </A> Ejemplo Resultado

<ADDRESS> <A Href="mailto:[email protected]"> <P> <P> <IMG Src=".../IMAGENES/Unica.jpg" Border=2> <P> <P> </A> </ADDRESS>


5 /113

Nota: En este ejemplo se vemos la manera de crear una liga o enlace a nuestro correo electrónico mediante una imagen que nosotros deseemos que aparezca en nuestro Navegador, esto mediante la etiqueta ADRESS.

Código de Colores Tablas de Colores

Código Color 000000 Negro FF0000 Rojo 00FF00 Verde 0000FF Azul FF00FF Morado FFFF00 Amarillo 00FFFF Cyan 999000 Gris FFFFFF Blanco

Ejemplo

Nota: El código de colores es parte fundamental del diseño de nuestra página, con el podemos hacer millones de combinaciones, podemos empezar a probar los colores para obtener el color deseado.

<BODY Background=”#A020A0” BgColor=”#40FF20”> <FONT Size=”5” Color =”#FF2020”>


6 /113

X. Formularios

Definición. Los formularios son una de las herramientas de que disponemos a la hora de hacer nuestras paginas Web interactivas, en el sentido de que nos permiten recopilar información de la persona que ve la pagina, procesarla y responder a ella. El proceso comienza con la creación en nuestra página, de un formulario de entrada, de datos que van a contener diversos campos diferentes en su funcionalidad y que nos van a permitir recopilar toda aquella información que deseemos de la persona que ve la pagina. Estos datos, una vez completado el formulario serán enviados normalmente al servidor para su procesamiento o a nosotros directamente, mediante correo electrónico.

Características Los formularios deben colocarse dentro del cuerpo del documento HTML, esto significa que todos los formularios tienen las mismas etiquetas requeridas al principio y al final como cualquier documento HTML. Los formularios están formados por una serie de controles distintos, cada uno de los cuales está asociado a un tipo concreto de datos o una acción predeterminada: botones de envío y borrado de datos, listas de selección, cajas de entrada de texto, etc. Los formularios constan de tres partes básicas:

♦ La etiqueta de apertura ♦ El tipo de entrada. ♦ El botón de envío o cancelado.

Etiqueta <FORM> … </FORM> Estas etiquetas son las que delimitan el comienzo y el final de un formulario. Si queremos mostrar en una página un elemento aislado de un formulario, aunque sea con otra finalidad diferente a la del envío de los datos que contenga al servidor (por ejemplo para tratar esa información mediante Javascript), es necesario delimitar ese elemento de formulario mediante las etiquetas <FORM> y</FORM>. Si no lo hacemos así, I.Explorer sí mostrara el elemento, pero Nestcape no. La pareja de etiquetas se introduce en el código HTML dentro del BODY de la página, en el lugar en que queramos que nos aparezcan los elementos del formulario. Sus principales atributos o parámetros son:


7 /113

POST / GET: Indica el método según el que se van a transferir las variables del formulario. POST envía los datos, normalmente al programa CGI definido en action o por correo si en action hemos utilizado mailto. El método de uso más normal es POST, y en el caso de que estemos mandando el formulario a nuestra dirección de correo electrónico es obligado usarlo. El método GET añade los argumentos del formulario al URL recogido en action (utilizando como separador de las variables la "?"). Con el método GET los datos son encadenados al URL especificado en action, utilizando el tipo de codificación especificado en el atributo enctype. Este método se utiliza cuando los datos no modifican la base de datos.

Tipos de Elementos: Enctype ="tipo" Indica el tipo de documento que utilizaremos, el mas usado para que lleguen el contenido a través de un mail con el método post sería "text/plain". Especifica el tipo de encriptación que se va a realizar con los datos que se van a enviar. Este atributo solamente se aplica si method es POST. <INPUT> La etiqueta <INPUT> va a definir la mayoría de los diferentes elementos que va a contener el formulario. Es la etiqueta que define el tipo de contenido de entrada y pueden ser campos de textos casillas de verificación, botones de radio, y lista de selección. Sus atributos y valores son: TYPE = "tipo" Donde tipo puede ser uno cualquiera de los elementos que veremos a continuación: ♦ Text, sirve para introducir una caja de texto simple, y admite los parámetros:

name="nombre", asigna de forma unívoca un nombre identificador a la

variable que se introduzca en la caja de texto. maxlenght="n", fija el número máximo de caracteres que se pueden

introducir en la caja de texto. size="n", establece el tamaño de la caja de texto en pantalla. value="texto", establece el valor por defecto del texto que aparecerá

inicialmente en la caja de texto.


8 /113

disabled, desactiva la caja de texto, por lo que el usuario no podrá escribir nada en ella.

accept="lista de content-type", indica el tipo de contenido que aceptará el servidor. Sus posibles valores son:

• text/html • application/msexcel • application/msword • application/pdf • image/jpg • image/gif

readonly, establece que el texto no puede ser modificado por el usuario, será solo de lectura para el usuario.

tabindex="n", especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.

alt="texto", asigna una pequeña descripción al elemento.

♦ Radio, define un conjunto de elementos de formulario de tipo circular, en los que el usuario debe optar por uno solo de ellos, que se marca con el ratón o tabulador. Admite los parámetros:

name="nombre", asigna un nombre identificador único a la variable

definida por el elemento. Este identificador debe ser el mismo para todos los elementos radio de un grupo.

value ="valor", define un valor posible de la variable para cada uno de los radio botones.

checked, marca por defecto uno de los radio botones del grupo. disabled, desactiva el radio botón, por lo que el usuario no podrá

marcarlo. tabindex="n", especifica el orden de tabulador que tendrá el campo

respecto todos los elementos que incluye el formulario.

♦ Checkbox, que define una o mas casillas de verificación, pudiendo marcar el usuario las que desee del conjunto total. Si pinchamos una casilla con el ratón o la activamos con el tabulador y le damos a la barra espaciadora la casilla se marca; si volvemos a hacerlo, la casilla se desmarca. Sus parámetros complementarios son:

name="nombre", asigna un nombre identificador único a la variable

definida por el elemento. Este identificador debe ser el mismo para todos los elementos conjunto de casillas.

value="valor", define un valor posible de la variable para cada una de casillas de verificación.

checked, marca por defecto una o mas de las casillas del grupo.


9 /113

disabled, desactiva la casilla de verificación, por lo que el usuario no podrá marcarla.


♦ Button, define un botón estándar. Este botón puede ser usado para diferentes

acciones, pero normalmente se le da utilidad mediante JavaScript, mediante el evento "OnClick". Sus parámetros son:

name="nombre", asigna un nombre al botón, que nos puede servir para

acciones con lenguaje de Script. value="valor", define el texto que va a figurar en el botón. disabled, desactiva el botón, de tal forma que no se produce ninguna

acción cuando se pulsa, ya que permanece inactivo. tabindex="n", especifica el orden de tabulador que tendrá el campo

respecto todos los elementos que incluye el formulario. ♦ Password, define una caja de texto para contener una clave o password, por lo que

el texto que introduzca el usuario aparecerá como asteriscos, por motivos de seguridad. Sus parámetros opcionales son los mismos que los del tipo text.

♦ File, define un archivo que puede ser enviado junto con los datos del formulario. En

este tipo de elemento encontramos asociados una caja de texto y un botón en el que encontramos escrito bien "examinar..." bien "browser...", dependiendo del lenguaje de nuestro navegador, que al ser pulsado nos abre la típica ventana de exploración de nuestras unidades de disco, para que seleccionemos el archivo que queremos enviar al servidor. Cuando elegimos uno su ruta aparece en la caja de texto. Sus principales atributos son:

title="titulo" muestra un texto en tipo tip al situar el cursor encima del

botón de examinar (sólo en Internet Explorer). accept="tipo_archivo" determina el tipo de archivo que se admite

como para enviar. disabled desactiva tanto el botón como la caja de texto, impidiendo al

usuario seleccionar un archivo (sólo Internet Explorer y Nestcape 6x). size="numero_entero" fija la anchura de la caja de texto asociada.

♦ Submit, incorpora al formulario un botón de envío de datos. Cuando el usuario

pulsa este botón los datos que ha introducido en los diferentes campos del formulario son enviados al programa del servidor o a la dirección de correo indicada en action. Sus atributos son:

value=" valor ", define el texto que va a aparecer en el botón de envío. disabled, desactiva el botón, de tal forma que no se produce ninguna

acción cuando se pulsa, ya que permanece inactivo.


10 /113


♦ Reset, define un botón que al ser pulsado por el usuario borra todos los datos que

hubiera introducido en cualquiera de los campos del formulario. Sus atributos son los mismos que los de SUBMIT.

Nota: El botón de envío se usa para enviar al GATEWAY las opciones del formulario. Y además también cuenta con la opción de cancelar, para limpiar o reiniciar las opciones predeterminadas del formulario. Etiqueta <SELECT>...</SELECT> Mediante esta etiqueta podemos definir una entrada de datos en forma de lista desplegable, que presenta varias opciones de elección, de tal forma que el usuario puede elegir una o varias de ellas, si así se especifica. Sus atributos y valores son:

♦ name="nombre", asigna un nombre identificador al campo, de tal forma que al enviar los datos del formulario la opción elegida será asociada a este nombre.

♦ size="n", con n= nº entero, que define el número de opciones visibles. Si n=1 el campo de selección se presenta como una lista desplegable, mientras que si se indica otro valor se presenta como una caja de lista con barra de desplazamiento.

♦ multiple, permite elegir varias de las opciones a la vez. Si no se especifica este atributo solamente se podrá escoger una de las opciones. Para ello hay

♦ que mantener pulsada la tecla CONTROL mientras se seleccionan y/o deseleccionan las diversas opciones.

♦ disabled, desactiva la lista, de tal forma que no se produce ninguna acción cuando se pulsa una opción, ya que permanece inactiva.

♦ tabindex="n", especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.

♦ Para introducir cada una de las diferentes opciones de la lista se utiliza la etiqueta <OPTION>, que admite como parámetros:

♦ value, fija el valor que será asociado al parámetro name de <SELECT> cuando se envíe el formulario. Este valor debe ser único para cada opción.

♦ selected, establece la opción por defecto. Si no se especifica este parámetro en ninguna opción se tomará la primera de ellas por defecto.

Nota: La anchura de la lista desplegable vendrá determinada por el número de caracteres de la opción que mas tenga.


11 /113

Etiquetas <TEXTAREA>...</TEXTAREA> Esta pareja de etiquetas inserta una caja de texto de múltiples líneas, que normalmente se utiliza para introducir comentarios o datos largos en un formulario. Si no se introduce ningún texto entre ambas etiquetas la caja de texto aparecerá vacía, para que el usuario lo introduzca, pero si introducimos algún texto entre ambas éste aparecerá inicialmente en la caja. Si el texto que contiene supera el espacio disponible en la caja aparecerá una barra de desplazamiento vertical. Sus atributos y valores son:

♦ name="nombre", asigna un nombre identificador al campo, que será asociado en el envío del formulario al texto introducido en la caja de texto.

♦ cols="x", define el número de columnas visibles de la caja de texto. ♦ rows="y", define el número de filas visibles de la caja de texto. ♦ wrap="valor", justifica automáticamente el texto en el interior de la caja.

Este atributo es de uso complicado. Según las recomendaciones si su valor es VIRTUAL se enviará todo el texto seguido en una línea, mientras que si vale PHYSICAL el texto se enviará separado en líneas físicas, pero así como se define no lo admiten los navegadores. Usemos cual usemos de los dos el resultado es el mismo: justificación por líneas físicas, y así y todo se producen saltos de línea indeseados.

♦ disabled, desactiva la caja de texto. Su utilidad es escasa. ♦ readonly, impide que el contenido de la caja sea modificado por el usuario. ♦ tabindex="n", especifica el orden de tabulador que tendrá el campo

respecto todos los elementos que incluye el formulario. Etiquetas <BUTTON>...</BUTTON> A partir de la implementación de los estándares HTML 4.0 contamos con varias etiquetas nuevas para construir formularios, siendo BUTTON una de ellas, bastante útil por cierto. La desventaja es que las versiones 4 de Nestcape se lanzaron antes de estas implementaciones, por lo que estas nuevas etiquetas sólo se pueden visualizar correctamente con Internet Explorer 4 y superiores. Esta etiqueta proporciona un método único para la implementación de cualquier tipo de botón de formulario. Sus principales atributos son:

♦ type="tipo", puede tomar los ya conocidos valores submit (por defecto), reset y button.

♦ name="nombre", asigna un nombre identificador único al botón. ♦ value="texto", define el texto que va a aparecer en el botón

Nota: La principal ventaja que aportan estas etiquetas es que vamos a poder introducir dentro de ellas cualquier elemento de HTML, como imágenes y tablas.


12 /113

X. Marcos (Frames) Definición. Los Marcos (Frames en inglés, marcos o cuadros) es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, e incluso cada una de ellas pueden tener sus propias barras de desplazamientos. Los navegadores que lo implementan son el Netscape 2.0, y el Explorer 2.0 en adelante. Una de sus características más importantes es que pulsando un enlace situado en un Marco, se puede cargar en otro Marco una página determinada. Esto se utiliza frecuentemente para tener un Marco estrecho en la parte lateral (o superior) con un índice del contenido en forma de diferentes enlaces que, al ser pulsados cargan en la ventana principal las distintas páginas. De esta manera se facilita la navegación entre las páginas, aunque se vaya pasando de unas a otras, siempre estará a la vista el índice del conjunto. Nota: El uso de los Marcos es útil para cierto tipo de documentos, pero puede llegar a dificultar la navegación, ya que dentro de un documento con Marcos no tendrán utilidad los botones de documento previo (back) ni documento siguiente (forward), ya que ambos nos trasladaran fuera del documento con marcos. Etiqueta <FRAMESET> Las etiquetas <FRAMESET>…</FRAMESET> son las que van a decirle al navegador dónde empiezan y dónde acaban los Marcos, y el tipo y forma de estos. Entre una y otra van las definiciones de los diferentes Marcos. Estas etiquetas se deben situar entre <HTML> y </HTML>, pero podemos hacerlo también entre </HEAD> y <BODY>, recordemos que no podemos utilizar la etiqueta <BODY>… </BODY>. Sus principales atributos o parámetros son:

♦ COLS="x,y,z,…", para definir el número de columnas o Marcos verticales que va a tener la ventana, y donde las variables x,y,z… van a definir el tamaño de cada Marco vertical, pudiendo definirse en píxeles o en porcentajes. También podemos fijar el tamaño de una columna o columnas como *, y en este caso el tamaño de esta será todo aquel que quede después de definir mediante puntos o porcentajes las demás columnas.

♦ ROWS="x,y,z,…", para definir el número de filas o Marcos horizontales que

va a tener la ventana, y donde las variables x,y,z… van a definir el tamaño de cada Marco horizontal, pudiendo definirse en píxeles o en porcentajes. También podemos fijar el tamaño de una fila o filas como *, y en este caso el tamaño de esta será todo aquel que quede después de definir mediante píxeles


13 /113

o porcentajes las demás filas. Las combinaciones posibles son muchas, siendo su estructura análoga a las vistas para las columnas.

♦ FRAMEBORDER= "0 / 1 / no / yes", nos permite definir si los marcos

creados van a tener borde o no. Los valores 0 y no son equivalentes, eliminando los bordes, así como 1 y yes, que los muestran. Su valor por defecto es yes / 1, por lo que si no especificamos nada se verán los bordes de todos los marcos. Si además queremos que no se vean los huecos que originan los bordes invisibles hay que añadir el atributo FRAMESPACING=0 para Internet Explorer y BORDER=0 para Nestcape.

Ejemplo: <HTML> <HEAD> <TITLE> Ejemplo de Marcos</title> </HEAD> <FRAMESET rows="20%,*" > <FRAME name="" src="primera.html" MarginWidth="10" MarginHeight="10" scrolling="auto"> <FRAME name="" src="segunda.html" MarginWidth="10" MarginHeight="10" scrolling="auto"> </FRAMESET> </HTML> Resultado


14 /113

♦ BORDER="n", con n = número entero o en píxeles. En el caso de que se haya establecido FRAMEBORDER="1" o no se haya especificado, este atributo nos permite definir el grosor del borde. Sólo funciona con Nestcape.

♦ FRAMESPACING= "n", con n = número entero o en píxeles. Nos permite

definir el espacio entre los marcos, y en el caso de que se haya establecido FRAMEBORDER="1" o no se haya especificado, este atributo nos permite definir el grosor del borde. Sólo funciona con Explorer.

♦ BORDERCOLOR="color", el color puede venir especificado mediante su

nombre en inglés o mediante su código hexadecimal. Nos permite establecer el color de los bordes de los marcos.

Tipos de Marcos Etiqueta <FRAME> La etiqueta <FRAME> define cada uno de los marcos que va a haber en la ventana. Debe ir colocada siempre entre <FRAMESET> y </FRAMESET>, y debe haber tantas etiquetas como marcos hayamos definido con COLS y ROWS. Estas etiquetas se deben situar entre <HTML> y </HTML>, pero podemos hacerlo también entre </HEAD> y <BODY>, incluso podemos no utilizar <BODY>…</BODY>. Sus principales atributos o parámetros son:

♦ SRC="ruta pagina html", especifica que página se va a cargar en el marco. La ruta de la página debe especificar su localización en el sistema de archivos local del servidor Web o una URL completa.

Ejemplo <Frame src="principal.html"> <Frame src="http://www.yahoo.com.mx">

♦ NAME="nombre", especifica que página se va a cargar en el Marco. La ruta

de la página debe especificar su localización en el sistema local del servidor Web o una dirección URL completa.

♦ MARGINWIDTH="x", con x = número, píxeles o porcentaje. Sirve para

definir el margen horizontal que queremos que haya dentro del Marco, entre los límites de este y su contenido. Que indica al formulario al que se mandan los datos el Marco de destino del resultado de los mismos.


15 /113

♦ MARGINHEIGHT="x", con x = número, píxeles o porcentaje. Define el margen vertical que queremos haya dentro del Marco, entre los límites de este y su contenido.

♦ SCROLLING= "yes / no / auto", nos permite establecer si el marco tendrá

o no barra de desplazamiento cuando el contenido del marco exceda al tamaño de este. Sus posibles valores son:

• yes: siempre aparecerá la barra deslizamiento. • no: nunca aparecerá. Por lo tanto si el contenido es mayor que el texto

sólo podremos ver lo que quepa en el Marco. • auto: sólo aparecerá el scroll si es necesario para poder visualizar el

contenido completo del Marco. Este es el valor por defecto.

♦ NORESIZE. Este atributo impide que el marco pueda ser redimensionado por el visitante arrastrando su borde. Si no se indica este atributo el Marco podrá ser redimensionado.

♦ BORDECOLOR= "color", Color = nombre en inglés o en código

hexadecimal. Sirve para definir el color del borde del Marco concreto al que se aplica.

♦ FRAMEBORDER="1 / 0". Cuando se ha establecido BORDECOLOR, si su

valor es 0 se mostrara el borde sin efecto 3D en el Marco (se percibe mejor en Explorer), y si su valor es 1 sí se mostrara este efecto. Además, si lo igualamos a cero se eliminara el borde con todos los Marcos contiguos que tengan también este valor a cero.

Ejemplo: <HTML> <HEAD> <TITLE> Ejemplo de Marcos </title> </HEAD> <FRAMESET rows="40%, *" BorderColor="RED"> <frame src="primera.html" MarginWidth="50" MarginHeight="30" frame

border="1"> <frame src="segunda.html" MarginWidth="10" MarginHeight="0" frameborder="1">

</FRAMESET> </HTML>


16 /113

Resultado

NO-FRAMES Este par de etiquetas no son atributos de <FRAME>. Se utilizan para prevenir el caso de que el navegador del visitante no soporte Marcos. Deben situarse antes de </FRAMESET>, y dentro de ellas se incluyen <BODY> texto de aviso </BODY>. Si el navegador no reconoce el Marcos, los ignorará mostrando el mensaje de aviso. Este atributo esta actualmente en deshuso, ya que todos los modernos navegadores soportan Marcos. Marcos anidados Hasta ahora hemos definido Marcos simples, es decir, la forma de dividir una página en una serie de filas o de columnas que nos facilitan cargar una página HTML independiente dentro de cada Marco. Este diseño de página aunque es útil, es muy simple. Podemos ir mas allá anidando Marcos, es decir introduciendo los Marcos dentro de otros previamente definidos. De esta manera podemos dividir una fila en columnas, una columna en filas, etc. Pero este procedimiento es bastante complejo en su código, por lo que es conveniente ayudarse de alguno de los muchos programas de creación Web que ya existen. Veamos un ejemplo ilustrativo de ésta técnica en el siguiente código:


17 /113

<HTML> <HEAD> <TITLE>Mi página </title> </HEAD> <FRAMESET rows="10%,*" frameborder="1" bordercolor="Gray"> <FRAMESET name="top" src="top.html" MarginWidth="10" MarginHeight="10" scrolling="no" noresize frameborder="0"> <FRAMESET cols="20%,*" > <frame name="primera" src="a.html" MarginWidth="10" MarginHeight="10" scrolling="no" noresize frameborder="0"> <frame name="segunda" src="b.html" MarginWidth="10" MarginHeight="10" scrolling="auto" noresize frameborder="0"> </FRAMESET> </FRAMESET> </HTML> Que se vería de la siguiente manera:


18 /113

XI. Texto en Movimiento

Marquesinas (Marquees) Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto. Sólo son válidas para el Internet Explorer de Microsoft (en el Netscape se verá como texto fijo). Sintaxis:

<MARQUEE> Texto que se desplaza </MARQUEE> Como no se ha añadido ningún atributo dentro de la etiqueta, el comportamiento de la marquesina es el que tiene por defecto: ocupa todo el ancho de la pantalla, tiene la altura de una línea y el texto se desplaza lentamente de derecha a izquierda. A continuación se mostraran los atributos que modifican su apariencia y comportamiento:

ATRIBUTOS WIDHT, HEIGHT Ajustan la anchura y altura, respectivamente, de la marquesina. Pueden ser igual a un número de píxeles, o a un porcentaje de la pantalla. Ejemplo: <MARQUEE WIDTH=50% HEIGHT=60> Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una altura de 60 píxeles </MARQUEE> ALIGN Modifica el alineamiento del texto que rodea a la marquesina, que puede ser TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). Ejemplo: <MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>La palabra "¡Hola!" estará alineada con la parte inferior de la marquesina</MARQUEE> BEHAVIOR Este atributo (del Inglés comportamiento) sirve para definir la manera se va a efectuar el desplazamiento del texto. Y tiene los siguientes atributos:


19 /113

SCROLL (el valor por defecto), el texto aparece por un lado, se desplaza hasta el otro hasta desaparecer por él, y vuelve a empezar (como los ejemplos anteriormente señalados).

SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y se detiene.

ALTERNATE se desplaza alternativamente hacia un lado y otro, siempre dentro de los límites de la marquesina.

Sintaxis:

<MARQUEE BEHAVIOR=ALTERNATE> texto </MARQUEE> <MARQUEE BEHAVIOR=SCROLL> texto </MARQUEE> <MARQUEE BEHAVIOR=SLIDE> texto </MARQUEE>

Ejemplo: <MARQUEE BEHAVIOR=ALTERNATE> Este texto se mueve a un lado y otro, sin desaparecer </MARQUEE> BGCOLOR Con este atributo se modifica el color de fondo de la marquesina. Ejemplo:

<MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa </MARQUEE>

DIRECTION Este atributo sirve para modificar la dirección hacia la que se dirige el texto. Por defecto es LEFT (izquierda). Se puede hacer que el texto se dirija hacia la derecha igualando este atributo a RIGHT. Ejemplo: <MARQUEE DIRECTION=RIGHT> Este texto se dirige hacia la derecha </MARQUEE> SCROLLAMOUNT Define la velocidad de desplazamiento del texto en cada movimiento de avance, expresado en píxeles. Cuanto mayor es el número, más rápido avanza. Ejemplo: <MARQUEE SCROLLAMOUNT=50> Texto en movimiento </MARQUEE>


20 /113

SCROLLDELAY Define el tiempo entre cada movimiento de avance, expresado en milisegundos. Cuanto mayor es el número más lento avanza. Ejemplo: <MARQUEE SCROLLDELAY =200> Espero mucho entre cada salto </MARQUEE> LOOP Especifica el número de veces que aparecerá el texto. Es indefinido por defecto. HSPACE, VSPACE Definen, respectivamente, la separación en sentido horizontal o vertical del texto que está fuera de la marquesina. Como se mencionó anteriormente, esta etiqueta no es implementada por el Navegador Netscape. El texto que está dentro de la etiqueta de la marquesina se verá en este navegador como texto fijo normal. Normalmente, si se hace uso de este recurso es porque se quiere destacar de una manera particular de un texto, logrando plenamente este objetivo en el Explorer. Una manera de solucionar este inconveniente, al menos en parte, es introducir la etiqueta de la marquesina dentro de una tabla. De esta manera, el texto estará en cierta medida destacado en el Netscape, y en el Explorer la marquesina se verá de una manera aún más estética. Ejemplo:

<TABLE BORDER=1> <TR><TD Width=200 Height=50> <MARQUEE> Marquesina dentro de una tabla </MARQUEE> </TD></TR> </TABLE>

MOVIMIENTO CON JAVA SCRIPT El Javascript es un lenguaje distinto del HTML. En los dos ejemplos que se mostraran a continuación, únicamente se mostrará la manera de incluirlos en un documento de HTML, pero sin pretender explicar su estructura ya que es un tema avanzado para otro curso, por lo que solo se mencionará, como incluir Javascript en un documento HTML. Recordemos que la estructura de un documento HTML es:

21 /113

Sintaxis:

<HTML> <HEAD> <TITLE>titulo</TITLE> </HEAD> <BODY> </BODY> </HTML>

El script (documento) en Javascript tenemos que colocarlo dentro de la cabecera, después del título. Es decir, entre las etiquetas </TITLE> y </HEAD>, contenido dentro de la etiqueta: Sintaxis: <SCRIPT LANGUAGE="JavaScript"> </SCRIPT >

<HTML> <HEAD> <TITLE> titulo</TITLE> <SCRIPT LANGUAGE="JavaScript"> [Aquí debe ir colocado el script] </SCRIPT > </HEAD> <BODY> </BODY> </HTML>

Además de esto, se debe añadir algo dentro de la etiqueta <BODY>, como se indicará en cada caso. Scroll en la barra de estado, el script es el siguiente:

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

22 /113

Observación sobre el texto: Se puede escribir el texto en una sola línea, tan larga como se quiera, siempre que éste quepa en la línea; Pero como no debe de haber ningún salto de línea, si el texto es demasiado largo, es mejor dividirlo en distintas líneas, tal como está en el ejemplo. Al final de la última palabra del texto conviene dejar una serie de espacios en blanco, para que no esté encadenado el comienzo con el final. Dentro de la etiqueta <BODY> se debe añadir el atributo: onLoad="scroll();" quedando así:

<BODY onLoad="scroll();">

23 /113

TABLA DE APENDICES ETIQUETA EJEMPLO

CARACTERISTICA OPCIONES

<B> <B>Texto </B> Negrita

<I> <I>Texto </I> Itálica

<U> <U>Texto </U> Subrayada

<S> <S>Texto </S> Tachada

<BLINK> <BLINK> Texto </BLINK> Intermitente

<TT> <TT>Texto </TT> Monoespaciada

<PLAINTEXT> <PLAINTEXT> Texto </PLAINTEXT> Aniquila etiquetas

<BLOCKQUOTE> <BLOCKQUOTE> Texto </BLOCKQUOTE> Sangría de 5 Col.

<BASEFONT> <BASEFONT> Texto </BASEFONT> Define Tipo, tamaño y Color dentro de la página.

<STRONG> <STRONG> Texto </ STRONG > Negrita

<EM> <EM> Texto </EM> Itálica

<CITE> <CITE> Texto </CITE> Subrayada

<CODE> <CODE> Texto </CODE> Monoespaciada

<KBD> <KBD> Texto </KBD> Texto tecleado por el usuario.

<SAMP> <SAMP> Texto </SAMP> Caracteres literales

<ABBR> <ABBR>Texto </ABBR> Abreviaturas

<ADDRESS> <ADDRESS> Texto </ADDRESS> Cursivas

<BIG> <BIG> Texto </BIG> Grandes

<SMALL> <SMALL> Texto </SMALL> Pequeñas

<SUB> <SUB> Texto </SUB> Subíndice

<SUP> <SUP> Texto </SUP> Superíndice

<VAR> <VAR>Texto</VAR> Variables de Código

<PRE> <PRE> Texto </PRE> Texto preformateado, Respeta el párrafo

Width = x número de caracteres por línea.

<P> Texto <P> Fin de párrafo.

<BR> Texto <BR> Salto de línea.

<CENTER> <CENTER> Texto </CENTER> Centrado

<!-- ........... <!-- Comentario Comentarios

<HR> <HR Noshade Size = “100” Width=”20%”> Traza una línea Noshade :No sombreado Size : Altura de línea Width :Ancho de línea

<H#> <H# > Texto </H#> Encabezados # = Toma valores de 1 al 6. Align = “CENTER” Align = “LEFT” Align = “RIGHT”

<FONT> <FONT Size = “+1” Color =”RED”>texto </FONT> Fuentes de texto, color y tamaño.

Size = 3 – 1 al 7 (-/+3) Color = “Color - #RGB” Face = Fuente o Tipo

<DIV> <DIV Align =”CENTER”>Texto </DIV> Justifica el texto del Párrafo. Align = “LEFT” Align = “RIGHT” Align = “CENTER” ó Align = “JUSTIFY”

á &"vocal"acute; Acentos Aa Ee Ii Oo Uu

&ntilde, &"n"tilde; ó &"N"tilde; Ñ ñ


24 /113

Símbolo Nombre de la Entidad Referencia de Carácter < < < > > > ¢ ¢ ¢ £ £ £ ¥ ¥ ¥ © ® ó © © ® ® ® ° ° °

¼ ¼ ¼ ½ ½ ½ ¾ ¾ ¾ × × × ¿ ¿ ¡ ¡ ª ª º º

TM ™ Espacio en blanco

& & “ "

Table de Colores

Colores Color en Inglés Código Hexadecimal RGB ROJO RED FF0000

VERDE GREEN 00FF00 AZUL BLUE 0000FF

BLANCO WHITE FFFFFF NEGRO BLACK 000000

AMARILLO YELLOW FFFF00 GRIS GRAY CCCCCC ROSA PINK FF00FF

Colores Color en Inglés Colores Color en Inglés

NARANJA ORANGE CAFÉ BROWN ORO GOLD BEIGE BEIGE

SILVER PLATA VERDE OBSCURO TEAL VIOLET VIOLETA VERDE OLIVA OLIVE

PURPURA PURPLE ROJO CLARO FUSHIA AZUL CLARO CYAN VERDE LIMON LIME

GINDA MAROON AZUL REY NAVY


25 /113

Temario FLASH

XII. Introducción ♦ Flash ♦ Entorno de flash

XIII. Dibujar con Flash ♦ Dibujos ♦ La barra de herramientas ♦ Colores

XIV. Interpolación de Movimiento ♦ Definición ♦ Creación de una interpolación de movimiento

XV. Interpolación de Forma ♦ Definición ♦ Creación de una interpolación de forma

XVI. Interpolación con Capa Guía ♦ Definición ♦ Creación de una interpolación con capa guía

XVII. Importar Imagen ♦ Definición ♦ Importar imágenes

XVIII. Mascaras ♦ Definición ♦ Creación de mascaras

XIX. Efecto Alfa ♦ Definición ♦ Creación de un efecto Alfa

XX. Punto de Registro ♦ Definición ♦ Creación del punto de registro


26 /113

XXI. Escenas ♦ Definición ♦ Creación de escenas

XXII. Clip de Película ♦ Definición ♦ Creación de un clip de película


27 /113

I. Introducción ¿Qué es Flash? Flash es una herramienta de edición con la que pueden crearse desde animaciones simples hasta complejas aplicaciones Web interactivas. Las aplicaciones de Flash pueden enriquecerse añadiendo imágenes, sonido y vídeo. Flash incluye muchas funciones que la convierten en una herramienta con muchas prestaciones sin perder por ello la facilidad de uso. Entre dichas funciones destacan: la posibilidad de arrastrar y soltar componentes de la interfaz de usuario, comportamientos incorporados que añaden código ActionScript al documento y varios efectos especiales que pueden añadirse a los objetos. Esta guía constituye una introducción a Flash. El tutorial de la misma le guiará por el proceso de creación de una aplicación Flash simple. Entorno de Flash El espacio de trabajo de Macromedia Flash MX 2004 está compuesto por un escenario donde se coloca el contenido multimedia, una barra de título principal con menús y comandos para controlar las funciones de la aplicación, los paneles y un inspector de propiedades para organizar y modificar los elementos multimedia, y una barra de herramientas para crear o modificar gráficos vectoriales.

Figura 1.1 Área de trabajo


28 /113

Como se puede observar el la figura 1.1, el área de trabajo de Flash MX tiene cinco zonas bien diferenciadas:

• La barra de herramientas, situada en la parte izquierda de la pantalla, cono lo

iconos necesarios para dibujar y manipular los objetos que diseñemos. En ella encontramos cuatro bloques distintos:

1. Herramientas: el primer bloque contiene los elementos de dibujo y las

herramientas que se utilizarán para seleccionar partes de la imagen. 2. Ver: con los dos elementos del segundo bloque se puede acercar o alejar la

imagen para poder ver la zona de dibujo con más detalle, así como mover la imagen si ésta es demasiado grande.

3. Colores: esta parte permite seleccionar los colores que se utilizaran en los

dibujos, tanto color de relleno como el que se utilizará para las líneas.

4. Opciones: en este lugar aparecerán las opciones que modificarán el funcionamiento de algunas de las herramientas anteriores.

• La escena, en la zona central, es el espacio indicado para dibujar, escribir textos,

animar elementos, etc. • El panel de Propiedades, en la parte inferior, está pensado para poder modificar

los atributos de cualquier elemento de la escena. De hecho su contenido cambia en función del objeto que tengamos seleccionado.

• La línea de tiempo, está en la parte superior de la pantalla. Este elemento permite realizar animaciones y distribuir la acción de la película.

• Los paneles, en el lado derecho de la pantalla, se utilizan para modificar las características de algunos objetos, insertar componentes, modificar colores, etc.

A continuación se describirán con más detalles cada uno de estos elementos:

La Barra de Menús tiene como propósito facilitar el acceso a las distintas utilidades del programa. Es similar a la de cualquier otro programa de diseño web o gráfico, aunque tiene algunas particularidades. Veamos los principales Submenús a los que se puede acceder:

Figura 1.2 Barra de menús

Archivo: Permite crear nuevos archivos, abrirlos, guardarlos, etc. Destaca la potencia de la utilidad Importar que inserta en la película actual casi todo tipo de archivos (sonidos, vídeo, imágenes e incluso otras películas Flash), o la de Configuración de


29 /113

Publicación desde donde se pueden modificar las características de la publicación. También permite configurar la impresión de las páginas, imprimirlas, etc.

Edición: Es el clásico menú que permite Cortar, Copiar, Pegar, etc. tanto objetos o dibujos como fotogramas; también permite personalizar algunas de las opciones más comunes del programa.

Ver: Además de los típicos Zooms, permite moverse por los fotogramas y por las

escenas. También incluye la posibilidad de crear una cuadrícula y unas guías. Esto se puede seleccionar desde los submenús Cuadrícula y Guías desde donde también se pueden configurar sus opciones.

Insertar: Permite insertar objetos en la película, así como nuevos fotogramas, capas, acciones, escenas etc.

Modificar: La opción Transformar permite modificar los gráficos existentes en la

película, y la opción Trazar Mapa de Bits convierte los gráficos en mapas vectoriales. El resto de opciones permite modificar características de los elementos de la animación Suavizar, Optimizar o de la propia película (Capa, Escena etc.).

Texto: Sus contenidos afectan a la edición de texto. Control: Desde aquí se modifican las propiedades de reproducción de la película.

Reproducir, Rebobinar, Probar Película . Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las

ventanas, incluye accesos directos a todos los Paneles.

Ayuda: Desde aquí se puede acceder a toda la ayuda que nos ofrece Macromedia, desde el manual existente, hasta el diccionario de ActionScript, pasando por tutoriales, lecciones guiadas etc.

La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta de 2 partes.

Figura 1.3 Línea de tiempo


30 /113

1) Los fotogramas (frames) que vienen delimitados por líneas verticales (formando rectángulos)

2) Los números de fotograma que permiten saber qué número tiene asignado cada fotograma, cuánto dura o cuándo aparecerá en la película. Además, en la parte inferior hay herramientas para trabajar con papel cebolla e información sobre el número de fotograma actual (1 en la Fig. 1.3), la Velocidad de los Fotogramas (12.0 en la Fig. 1.3) y el Tiempo de película transcurrido (0.0s en la Fig. 1.3). A nivel conceptual, la línea de tiempo representa la sucesión de fotogramas en el tiempo.

Las Capas, el concepto de capa es fundamental para manejar Flash de forma eficiente. Una capa se puede definir como una película independiente de un único nivel. Es decir, una capa contiene su propia Línea de Tiempo (con infinitos fotogramas).

Figura 1.4 Capas

Los objetos que estén en una determinada capa comparten fotograma y por tanto, pueden "mezclarse" entre sí. Esto es interesante a menudo, pero otras veces es conveniente separar los objetos de modo que no interfieran entre sí. Para ello, crearemos tantas capas como sea necesario. El uso de múltiples capas además, da lugar a películas bien ordenadas y de fácil manejo (es conveniente colocar los sonidos en una capa independiente llamada "Sonidos", por ejemplo). El Área de Trabajo consta de numerosas partes, veámoslas: La parte más importante es el Escenario, sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película que estemos realizando. El escenario tiene unas propiedades muy importantes, ya que coinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic con el botón derecho sobre cualquier parte del escenario en la que no haya ningún objeto y después sobre Propiedades del documento:

Dimensiones: Determinan el tamaño de la película. El tamaño mínimo es de 1 x 1 px (píxeles) y el máximo de 2880 x 2880 px.

Coincidir: Provocan que el tamaño de la película coincida con el botón

seleccionado (tamaño por defecto de la Impresora, Contenidos existentes o los elegidos como Predeterminados)


31 /113

Color de Fondo: El color aquí seleccionado será el color de fondo de toda la

película. Veloc. Fotogramas: número de fotogramas por segundo que aparecerán en la

película.

Unidades de Regla: Unidad que se empleará para medir las cantidades. Las Vistas o Zooms, la herramienta Lupa se emplea para acercar o alejar la vista de un objeto, permitiendo abarcar más o menos zona del Entorno de Trabajo. Cada vez que hagamos clic en la Lupa duplicaremos el porcentaje indicado en el Panel Zooms .

Panel Zooms: Son un conjunto de accesos directos a Submenús existentes en el Menú Ver. Son muy útiles y ayudan a acelerar el trabajo cuando se emplean correctamente.

Figura 1.5 Panel Zoom

Los Paneles son conjuntos de comandos agrupados según su función (por ejemplo, todo lo que haga referencia a las acciones, irá en el Panel "Acciones"). Su misión es simplificar y facilitar el uso de los comandos.

Panel Info: Muestra el tamaño y las coordenadas de los objetos seleccionados, permitiéndonos modificarlas. Muy útil para alineaciones exactas.

Panel Transformar: Ensancha, encoge, gira etc. los objetos seleccionados. Panel Alineamiento: Coloca los objetos del modo que le indiquemos. Panel Mezclador de Colores: Mediante este panel creamos los colores que más

nos gusten.

Panel Muestras de Color: Nos permite seleccionar un color de modo rápido y gráfico. (Incluidas nuestras creaciones).

Panel Componentes: Nos permite acceder a los Componentes ya construidos y

listos para ser usados que nos proporciona Flash. Los componentes son objetos "inteligentes" con propiedades características y muchas utilidades (calendarios, scrolls etc etc.)


32 /113

Panel Respuestas: Macromedia pone a nuestra disposición ayuda y consejos accesibles desde este panel.

Panel Propiedades: Sin duda, el panel más usado y más importante. Nos muestra las propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de trazo, tamaño de los caracteres, tipografía, propiedades de los objetos (si hay interpolaciones etc etc.), coordenadas, tamaño etc.

Panel Escena: Modifica los atributos de las escenas que usemos.

Panel Acciones: De gran ayuda para emplear ActionScript y asociar acciones a

nuestra película.

Figura 1.6 Paneles básicos


33 /113

II. Dibujar con Flash Dibujos Cuando trabajamos con imágenes en cualquier programa de Windows, hay una distinción muy importante a tener en cuenta: las imágenes se pueden almacenar de dos formas completamente distintas, en modo vectorial o en modo mapa de bits. Las imágenes vectoriales se almacenan como una serie de coordenada y datos, que son interpretados por el programa de tratamiento de imagen. Esto da una serie de ventajas, como por ejemplo:

• Si modificamos el tamaño de una línea esta no perderá calidad, ya que lo que hará el programa será volverla a calcular a partir de los nuevos datos.

• El archivo ocupará muy poco espacio, puesto que se almacenan pocos datos. La desventaja de este formato es que no es bueno para imágenes muy complejas, ya que habría que guardar demasiados parámetros e interpretarlos cada vez que halla un cambio.

Cuando se utilizan mapas de bits las imágenes se guardan como un conjunto de puntos de colores. Cada punto de la imagen se almacena guardando su color. Además de que los cambios de tamaño provocan que se pierda calidad.

Lo que es cierto es que ambos formatos son necesarios. El sistema vectorial se suele utilizar para crear dibujos que van a ser modificados en algún momento, mientras que los mapas de bits se usan para manejar fotografías.

Flash utiliza el formato vectorial para almacenar sus dibujos. De esta manera podemos modificar las imágenes sin ningún problema ya que seguirán siempre fieles al original; además no importa el tamaño en que se visualice la película ya que las imágenes se ajustarán al tamaño elegido manteniendo siempre la nitidez. La Barra de Herramientas. Herramientas Básicas.

La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Veamos cuáles son las más importantes y cómo se usan:


34 /113

Figura 2.1 Barra de herramientas

Herramienta Flecha: . Es la herramienta más usada de todas. Su uso principal es para seleccionar objetos. Permite seleccionar los bordes de los objetos, los rellenos (con un sólo clic), los bordes (con doble clic), zonas a nuestra elección. Además, su uso adecuado puede ahorrarnos tiempo en el trabajo. Cuenta con las siguientes opciones:

1. Ajustar a Objetos: Se usa para obligar a los objetos a "encajar" unos con otros, es decir, para que en caso de ser posible, sus bordes se superponga, dando la sensación de estar "unidos".

2. Suavizar: Convierte los trazos rectos en líneas menos rígidas.

3. Enderezar: Realiza la labor inversa. Convierte los trazos redondeados en más rectilíneos.


35 /113

Herramienta Línea: Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la línea recta. Una vez creada la podemos modificar sin más que seleccionar situar el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla.

Herramienta Texto: Crea un texto en el lugar en el que hagamos clic.

Herramienta Óvalo: La herramienta Óvalo permite trazar círculos o elipses de manera rápida y sencilla. Para dibujar círculos perfectos mantenemos la tecla Shift presionada mientras arrastramos el puntero del ratón.

Herramienta Rectángulo: Su manejo es idéntico al de la Herramienta Óvalo, tan solo se diferencian en el tipo de objetos que crean. Para dibujar cuadrados perfectos mantenemos la tecla Shift presionada mientras arrastramos el puntero del ratón. Además podemos redondear las puntas activando la casilla de Radio de rectángulo redondeado, que se encuentra en la zona de opciones.

Herramienta Lápiz: Es la primera Herramienta de dibujo propiamente dicho. Permite dibujar líneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicará esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas. Al dibujar con esta herramienta podemos modificar el resultado final con la opción Modo lápiz, en la zona de opciones, encontraremos 3 modos:

1. Enderezar: al soltar el botón, Flash trata de convertir el dibujo en figuras geométricas.

2. Suavizar: las líneas se suavizarán, para conseguir curvas menos pronunciadas, en dibujos sencillos es el que mejor resultado suele dar.

3. Tinta: el dibujo no será modificado.

Herramienta Brocha: Su funcionalidad equivale a la del lápiz, pero su trazo es mucho más grueso. Se suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo. También cuenta con otras opciones para modificar su comportamiento:

1. Modo pincel: hace que los trazos dibujados se comporten de distinta manera según la opción seleccionada. Puede hacer que dibuje detrás de otro elemento, dentro de otro elemento, etc.

2. Tamaño del pincel: modifica el grosor del pincel, para poder dibujar zonas con más o con menos detalles.

3. Forma del pincel: varía el tipo de dibujo que deja el pincel, puede pasar del estilo circular u otros en forma de línea, cuadrado, etc.


36 /113

4. Bloquear relleno: esta casilla tiene utilidad al realizar rellenos de color basados en degradado. Si no está activada, cada dibujo que hagamos creará un degradado nuevo. En caso contrario, el degradado creado formara parte del conjunto de dibujos creados con le pincel.

Herramienta Cubo de Pintura: Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si la zona no está delimitada por un borde. El color que aplicará esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas.

Herramienta Borrador: Su funcionamiento es análogo a la Herramienta Brocha. Pero su función es la de eliminar todo aquello que "dibuje".

Herramientas Avanzadas.

Herramienta Lazo: Su función es complementaria a la de la Herramienta Flecha, pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha sólo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la selección a mano).

Al seleccionar esta Herramienta, en el Panel Opciones aparecen estas imágenes: . Esto, es la Herramienta "Varita Mágica", tan popular en otros programas de dibujo. Permite hacer selecciones según los colores de los objetos. El tercer dibujo que aparece es

este: permite hacer selecciones poligonales.

Herramienta Pluma: Crea polígonos (y por tanto rectas, rectángulos etc.) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las más potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vértices de los polígonos, lo que nos asegura una gran precisión. Para crear curvas, hay que señalar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de práctica se acaba dominando.

Herramienta Subseleccionador: Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vértices que componen los objetos creados con dicha herramienta.

Herramienta Bote de Tinta: Se emplea para cambiar rápidamente el color de un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra de Herramientas.)


37 /113

Herramienta Cuentagotas: Su misión es "Capturar" colores para que posteriormente podamos utilizarlos. Colores en Flash El Panel Mezclador de Colores Los dibujos creados con Flash suelen estar formados por dos elementos:

Trazo o borde: es el contorno, la línea que define una figura. El trazo aparece cuando dibujamos con el lápiz, la pluma, la línea recta, la elipse o el rectángulo.

Relleno: al dibujar determinadas figuras cerradas, el relleno será el color de la parte interior. Este elemento aparece al utilizar la elipse y el rectángulo, al dibujar con la herramienta brocha y al trazar figuras cerradas con la pluma.

El Panel Mezclador de Colores, como su nombre indica se usa para fabricar nuestros propios colores y para seleccionar los que más nos gusten.

Figura 2.2 Mezclador de colores

Para seleccionar un color determinado, bastará con hacer clic en las pestañas que se encuentran junto a los iconos de las Herramientas de Lápiz y de Bote de Pintura. (Si queremos modificar el color de un borde, pulsaremos sobre la pestaña que está junto a la Herramienta Lápiz y si queremos modificar un relleno, haremos clic en la pestaña que está junto a la Herramienta Bote de Pintura.) Al hacerlo aparecerá un Panel con multitud de colores para que seleccionemos el que más nos gusta. También permite introducir el código del color según el standard que establece el HTML.


38 /113

También se puede determinar el tipo de relleno que aplicaremos a los objetos creados (mediante la Herramienta Bote de Pintura). Se pueden crear diferentes tipos de rellenos:

1. Sólido: Consiste en un relleno formado por un solo color.

2. Degradado Lineal: Es un tipo especial de relleno, de modo que un color se degrada hasta convertirse en otro. Puede ir de arriba abajo o de un lado al otro

3. Degradado Radial: Es igual que el anterior, pero los degradados tiene forma circular.

4. Mapa de Bits: Permite colocar como relleno alguna imagen existente en la película.

Degradados

Los degradados (también llamados gradientes) son un tipo de relleno especial, compuesto por una transición entre dos o más colores. Al seleccionar uno de estos degradados, el relleno de la figura comenzará por u8n color y terminará por otro, realizando el paso de un color a otro de una forma progresiva.

Figura 2.3 Personalización de degradado

Podemos agregar más colores de transición haciendo clic con le ratón en cualquier punto de la barra de transición, si lo que deseamos es quitar algún color solo basta con seleccionar el pequeño cubo y arrastrarlo al cuadro de color.

Para cambiar las características del degradado disponemos de la herramienta

Transformación de relleno, en la barra de herramientas.


39 /113

Figura 2.4 Transformación de relleno

Cada uno de los símbolos que aparecen en la Fig. 2.4 tienen una función distinta. Dependiendo del tipo de degradado aparecen tres o cuatro símbolos:

1. Círculo en el centro del relleno: Permite desplazar el punto central del degradado.

2. Cuadrado en un lateral: se utiliza para cambiar la anchura del degradado.

3. Círculo en un lateral: arrastrándolo con el ratón podremos girar el degradado.

4. Segundo círculo en el lateral: moviéndolo hacia dentro o hacia fuera, variaremos la intensidad en los degradados radiales.

El Panel Muestras de Color

El Panel Muestras de Color sirve para poder ver de un modo rápido y claro los colores de que disponemos, tanto sólidos (un solo color) como degradados (lineales o radiales). Además, cuando creemos un color mediante el Panel Mezclador de Colores, podremos agregarlo a nuestro conjunto de muestras mediante Agregar Muestra (que se encuentra en un menú desplegable en la parte superior derecha del Panel Mezclador de Colores).

Una vez esté agregado el color, pasará a estar disponible en nuestro conjunto de muestras y podremos acceder a él rápidamente cada vez que trabajemos con nuestra película. Cada película tiene su propio conjunto de muestras y cada vez que la abramos para editarla, podremos usar las muestras que teníamos la última vez que trabajamos con dicha película.


40 /113

Figura 2.3 Muestras de Color

III. Interpolación de Movimiento Flash MX proporciona herramientas potentes para crear animaciones. La animación más sencilla en Flash se realiza con un proceso denominado interpolación. Interpolar es una manera de decir “intercalar” y significa rellenar los fotogramas que hay entre dos fotogramas clave de manera que un gráfico que se muestra en el primer fotograma clave se convierta en el gráfico que se muestra en el segundo fotograma clave. Existen dos tipos de interpolaciones que se pueden crear en Flash: interpolación de movimiento e interpolación de forma.

• En la interpolación de movimiento, se definen propiedades tales como la posición, el tamaño y la rotación de una instancia, un grupo o un bloque de texto en un instante específico, y después estas propiedades se pueden cambiar en otro momento. • En la interpolación de formas, se dibuja una forma en un instante específico y después se modifica o se dibuja otra forma en otro instante. Flash interpola los valores o formas de los fotogramas intermedios para crear la animación.

La animación interpolada es una forma eficaz de crear movimiento y realizar cambios ya que reduce al mínimo el tamaño del archivo. En esta animación, Flash sólo guarda los valores de los cambios producidos entre fotogramas. En este caso primero veremos la interpolación de movimiento.

Creación de una interpolación de movimiento Las interpolaciones de movimiento se crean definiendo propiedades para una instancia, un objeto agrupado o texto en un fotograma clave inicial y, a continuación, cambiando las


41 /113

propiedades del objeto en el fotograma clave posterior. Flash crea la animación que pasa de un fotograma clave al siguiente en los fotogramas intermedios. Los pasos son los siguientes:

1. Seleccionamos la herramienta de flecha del panel de herramientas y dibujamos la figura que se va a interpolar.

2. Posteriormente en la línea de tiempo insertamos el fotograma clave, y con el botón

derecho seleccionamos Crear interpolación de movimiento. 3. Después sobre la línea de tiempo insertamos con el botón derecho un fotograma

clave, por ejemplo en el fotograma 30, la línea de tiempo se debe cambiar a un color morado

4. Por ultimo seleccionamos la herramienta de flecha y movemos de lugar la figura que se dibujo previamente y la colocamos donde se desee que aparezca.

Si todo se realizo correctamente debemos de tener algo así:

Y al presionar la tecla enter se debe desplazar nuestra figura hasta el punto deseado:


42 /113

IV. Interpolación de Forma Con la interpolación de forma, se especifican atributos para una forma en un fotograma clave y, a continuación, se modifica la forma o se dibuja otra forma en un fotograma clave posterior. Como sucede con la interpolación de movimiento, Flash crea la animación en los fotogramas que hay entre los fotogramas clave.

Creación de una interpolación de forma Los pasos son los siguientes:

1. Seleccionamos la herramienta de flecha del panel de herramientas y dibujamos la figura que se va a interpolar de forma, en este caso un ovalo.

2. Posteriormente en la línea de tiempo insertamos un fotograma clave, por ejemplo en

el fotograma 30, y borramos nuestra figura con la tecla Supr. 3. Después sobre cualquier fotograma, entre el fotograma 1 y 30, en el panel de

propiedades seleccionamos la opción Animar y escogemos forma,


43 /113

la línea de tiempo se debe cambiar a un color verde.

4. Inmediatamente dibujamos la siguiente figura donde queramos que aparezca

nuestra interpolación, por ejemplo un cuadrado. Si todo se realizo correctamente debemos de tener algo así:

Y al presionar la tecla enter se debe desplazar nuestra figura hasta el punto deseado con el cambio de forma que escogimos:


44 /113

V. Interpolación con Capa Guía Las interpolaciones de movimiento con capa guía son semejantes a una interpolación de movimiento, solo con la diferencia de que al crear la interpolación esta sigue una trayectoria fija, es decir, un recorrido que el usuario le indique.

Creación de una interpolación de movimiento con capa guía Los pasos son los siguientes:

1. Seleccionamos la herramienta de flecha del panel de herramientas y dibujamos la figura que se va a interpolar.

2. Posteriormente en la línea de tiempo insertamos el fotograma clave, y con el botón

derecho seleccionamos Crear interpolación de movimiento.

3. Después sobre la línea de tiempo insertamos con el botón derecho un fotograma clave, por ejemplo en el fotograma 30, la línea de tiempo se debe cambiar a un color morado.


45 /113

4. En seguida seleccionamos la herramienta de flecha y movemos de lugar la figura que se dibujo previamente y la colocamos donde se desee que aparezca.

5. A continuación en la parte inferior de nuestro menú, donde esta el nombre de la

capa con la cual estamos trabajando, damos click en el icono de agregar línea de movimiento para insertar la capa guía.

6. Al darle clic sobre el icono nos agrega automáticamente una capa guía, nos

colocamos en el primer fotograma de esta capa, y con la herramienta de lápiz del panel de herramientas vamos a dibujar la trayectoria que va a seguir nuestra interpolación de movimiento, por lo que nos colocamos en el centro de la figura y creamos la trayectoria a seguir hasta el otro centro de nuestro dibujo (donde termina la interpolación)

Si todo se realizo correctamente debemos de tener algo así:


46 /113

Y al presionar la tecla enter se debe desplazar nuestra figura hasta el punto deseado siguiendo la trayectoria que dibujamos:

Nota: Si no queremos ver la línea trazada, simplemente ocultamos la vista mediante el icono con forma de ojo de la capa guía, sin embargo el movimiento se va a ejecutar cuando presionemos enter.

VI. Importar Imagen Flash es la herramienta más utilizada para crear presentaciones para la Web. La idea detrás es la utilización de imágenes vectoriales, reutilización de recursos y animación interpolada, a manera de utilizar un mínimo espacio.

Importar imágenes Para importar una imagen externa a flash podemos seguir los siguientes pasos:

1. Damos click en el menú archivo, después en importar, se abre una ventana del explorador de Windows donde buscamos la imagen que queremos traer a flash y le damos abrir.

2. La imagen que seleccionamos aparecerá en el cuadro de trabajo.


47 /113

3. Después creamos un objeto, en este caso será un círculo, del tamaño que necesitemos.

4. Posteriormente seleccionamos la herramienta de flecha y damos doble click sobre el circulo, en seguida en el panel mezclador de colores,

en la opción radial la cambiamos por mapa de bits y el circulo tendrá como relleno la figura de la imagen previamente importada.


48 /113

VII. Máscaras Una mascara es un efecto que podemos lograr con los layers o capas, es decir se crea una “mira”, a través del cual es visible el contenido de una capa oculta. Varias capas pueden agruparse bajo una misma capa de máscara para crear efectos sofisticados. La capa de una máscara muestra el área de las capas vinculadas y situadas por debajo de la forma rellena y oculta todas las demás. Las capas de máscara pueden contener una sola forma, instancia u objeto de tipo.

Creación de una mascara Los pasos son los siguientes:

1. Nos colocamos en el primer fotograma de nuestra capa, después en el panel de

herramientas seleccionamos la opción Herramienta de texto del panel de herramientas, e insertamos una frase. Debemos observar que la opción en el panel de propiedades diga texto estático,

si no es así cambiarlo por esta opción.

2. Una vez insertado el texto, damos

3. click en la herramienta de flecha y nos colocamos en un fotograma, en este caso será el numero 30, y con el botón derecho seleccionamos la opción insertar fotograma.


49 /113

4. En seguida insertamos una nueva capa y eliminamos los elementos vacíos de la nueva capa, dando click en el nombre de esta y sobre los fotogramas seleccionados damos click con el botón derecho y escogemos eliminar fotogramas.

5. Posteriormente ya que se eliminaron los fotogramas, damos un click derecho sobre el

primer fotograma de la nueva capa e insertamos un fotograma clave.

6. Después dibujamos un objeto, en este caso un círculo, del mismo tamaño del texto o mayor, colocando de manera paralela con el texto.

7. A continuación damos un click derecho sobre el fotograma que contiene nuestro objeto, en este caso es el circulo, y escogemos la opción crear interpolación de movimiento y sobre el fotograma que deseemos, en este caso el 30, damos click derecho e insertamos un fotograma clave creándose la interpolación de movimiento, por lo que ahora arrastramos nuestro objeto a la posición final del texto teniendo cuidado de que el objeto pase por encima del texto.

8. En seguida sobre la capa que contiene nuestra interpolación de movimiento, damos un click sobre esta y seleccionamos la opción Mascara


50 /113

ahora observamos que el texto y el objeto han “desaparecido” de nuestro espacio de trabajo, por lo que para poder ver el efecto, damos click en el menú Control y escogemos la opción Probar película o con las teclas de acceso rápido ctrl + intro.

VIII. Efecto Alfa El efecto alfa es el resultado de desvanecimiento de un objeto a través de la modificación del brillo de este mediante una animación creada en flash.

Creación de una animación con efecto alfa Los pasos son los siguientes:

1. Creamos una interpolación de movimiento, como hemos aprendido hasta el momento, por lo que debemos de tener algo similar:


51 /113

2. Después damos un click normal sobre nuestra figura al final de nuestra interpolación y sobre el panel de propiedades en la opción Color la cambiamos por Alfa

y a lado aparece un cuadro donde podemos cambiar el porcentaje de este, por ejemplo modificamos este valor por 0% y observamos como nuestro objeto se desvanece, así que al presionar enter observamos como nuestro objeto se mueve hacia su posición final pero va desvaneciendo conforme se mueve.


52 /113

IX. Punto de Registro El punto de registro es el centro de un objeto, el cual flash toma como referencia para hacer girar a este.

Creación de una animación con punto de registro Los pasos son los siguientes:

1. Creamos una interpolación de movimiento, como hemos aprendido hasta el momento, ahora con la diferencia de que no vamos a mover de lugar nuestro objeto.

2. Después seleccionamos la herramienta de flecha y damos doble click sobre nuestro objeto, lo que nos va a mostrar una nueva ventana donde se va a poder editar el objeto.

3. Observamos que en el centro de la figura hay una cruz, la cual es el punto de registro

de nuestro objeto. En seguida movemos de lugar el objeto por lo que el centro del a figura quedo fijo, entonces debemos de tener algo similar:


53 /113

4. A continuación damos click en Escena 1 y nos regresa a nuestro espacio de trabajo, y nos colocamos en el primer fotograma de nuestra interpolación de movimiento y sobre el panel de propiedades en la opción Girar seleccionamos el valor CMR.

y le indicamos el numero de veces que va a girar mientras dura la interpolación de movimiento, por ejemplo 3.

Nota: CMR indica un giro en el sentido de las manecillas del reloj. CCMR indica un giro en el sentido contrario de las manecillas del reloj.

Al presionar Enter debemos de tener algo similar:


54 /113

X. Escenas Las escenas nos sirven para la limpieza de las animaciones ya que cada una de ellas cuenta con su línea de tiempo y sus herramientas, es decir en cada una de las escenas podemos realizar distintas animaciones como deseemos pero llevando un orden de reproducción. Como podemos observar debajo del botón agregar guía de movimiento tenemos el nombre de la escena en la cual estamos trabajando, en este caso es la Escena 1.

Creación de escenas Los pasos son los siguientes:

1. Para la Escena 1 crearemos una interpolación de movimiento.


55 /113

2. Ahora en el menú Insertar seleccionamos Escena e inmediatamente nos abre un nuevo espacio de trabajo con su línea de tiempo, herramientas, etc., la cual si observamos se llama Escena 2, en el que crearemos un interpolación de cambio de forma.


56 /113

3. Si reproducimos la película con Ctrl + Intro o menú Control y Reproducir veremos como se reproducen de forma continua las dos animaciones.

Para poder cambiar de una escena a otra simplemente damos click en el botón de Editar escena y así podremos cambiar de una escena a otra para poder realizar las animaciones que deseemos.

Si queremos personalizar nuestras escena damos click en el menú Ventana y Escena o con las teclas Mayus + F2 y nos muestra el siguiente cuadro

Donde al darle doble click sobre la escena que deseemos podemos cambiarle el nombre a esta o bien si lo que queremos es borrar la escena la seleccionamos y dando un click en el icono del bote de basura la podremos borrar de nuestra animación.

XI. Clip de Película Un Clip de Película es una película en si misma, como cualquiera de las que hemos creado hasta el momento, pero que está incluida dentro de otra película y, a su vez puede contener también películas insertadas en él. Al igual que los otros tipos de símbolos de Flash, los clips de película tienen su propia línea de tiempo. Sin embargo, y a diferencia de los Gráficos, esta línea temporal no está ligada a la línea de tiempos del documento que lo contiene, de tal forma que su ejecución es independiente.


57 /113

Este tipo de símbolos puede contener cualquier otro tipo de símbolo: gráfico, clip o botón, así como cualquier objeto creado con Flash, ya que un clip es realmente una película. Otra de las ventajas de los Clips la encontramos cuando realizamos películas de gran complejidad y tamaño, en la que intervienen un número muy elevado de fotogramas, debido a que en la vista general del documento, nosotros sólo veremos un fotograma por clip, el cual puede estar compuesto por muchos frames, lo que nos permitirá tener una mejor visión de cómo se desarrolla nuestra animación, y una barra de tiempos más clara y "limpia".

Creación de un clip de película Los pasos son los siguientes:

1. Damos click en el menú Insertar y escogemos Nuevo símbolo o con las teclas Alt + F8 y nos debe de abrir un cuadro de Crear nuevo símbolo y escogemos la opción de Clip de Película, y si así lo deseamos le cambiamos el nombre, después le damos aceptar.

2. Después verificamos que a lado del nombre de nuestra escena, en este caso Escena 1, debe de aparecer el nombre de nuestro clip de película.

3. En seguida crearemos una animación de una llanta que se mueve, en este caso

utilizaremos una animación con el punto de registro, esta debe girar 4 veces sobre si misma, la cual ya se ha explicado en el tema IX de este manual, por lo que debemos de tener algo así.


58 /113

4. Una vez que se haya realizado la animación le damos clic en Escena 1, por lo que

regresaremos al espacio de trabajo de esta escena, una vez ahí le damos clic en el menú Ventana y seleccionamos la opción Biblioteca o con la tecla F11, en donde debe de aparecer nuestra animación, en este caso se llama Llanta.

5. A continuación le damos click en nuestra animación Llanta y la arrastramos a

nuestro espacio de trabajo, podemos arrastrar tantas animaciones necesitemos, las cuales van a estar en un solo fotograma, la cual es una gran ventaja ya que podemos tener n animaciones en un solo fotograma y estas se reproducirán al mismo tiempo, solo damos click en el menú Control y escogemos Probar Película o con Ctrl. + Intro.


59 /113

XII. Botones Creación de un botón Los pasos son los siguientes:

1. Para poder aplicar un botón primero necesitamos tener dos animaciones, una por escena, para este caso en la Escena 1 tenemos una interpolación de movimiento con capa guía y en la Escena 2 una interpolación de forma.


60 /113

Escena 1

Escena 2

2. Ya que tenemos nuestras dos escenas estas deben de cumplir que al momento de reproducir la

película con Ctrl + Intro deben de reproducirse las dos animaciones de forma continua. 3. Para este ejemplo queremos insertar un botón que al terminar la Escena 1 se detenga y al

presionarlo se reproduzca la Escena 2 entonces nos colocamos en nuestra Escena 1 e insertamos una nueva capa, eliminamos todos los fotogramas y sobre el último fotograma de nuestra capa insertamos un fotograma clave, por lo que debemos de tener algo así en nuestra línea de tiempo.


61 /113

4. Enseguida damos click en el menú Ventana seleccionamos la opción Bibliotecas comunes y escogemos la opción Botones, por lo que debe de mostrarnos esta venta

5. Al dar doble click sobre cualquier icono nos muestra los botones que le pertenecen, en este

caso vamos a dar doble click en Arcade buttons y observamos la variedad de colores que nos muestra, para este caso vamos a arrastrar el botón de color azul


62 /113

6. Inmediatamente nos colocamos con un click sobre el último fotograma de nuestra interpolación con

capa guía, en este caso es el fotograma 30, con la finalidad de especificar a flash que pare la escena ya que se va a insertar la acción del botón.

7. Sobre el panel Acciones debe de aparecer Acciones – Fotograma y si es así le damos un click,

desplegando el siguiente panel.

8. Posteriormente le damos un click sobre el método Acciones, Control de película y por ultimo en stop le damos doble click para agregar esa acción a nuestro fotograma, esto es para detener nuestra animación de la Escena 1 cuando llegue a nuestro fotograma 30.

9. A continuación le damos un click sobre nuestro botón azul y seleccionamos el método Control de

película y por ultimo on le damos doble click y verificamos que el check box de Liberar este palomeado.

10. En seguida le damos un click sobre el método Acciones, Control de película y por ultimo en go to le

damos doble click

11. Debemos de observar que el radio botón este seleccionado en la opción Ir a y reproducir y en el combo de Escena seleccionamos la escena que deseemos que se reproduzca, en este caso es la Escena 2 y en el combo Fotograma le indicamos el numero del fotograma que deseemos que inicie nuestra Escena 2 para este caso dejaremos el fotograma 1


63 /113

12. Si todo salio bien al darle ctrl. + Enter y reproducir nuestra película la animación de la Escena 1 se detendrá justo cuando esta termine y al darle click sobre nuestro botón se reproducirá nuestra animación de la Escena 2.

XIII. Cambio del Mouse

Creación de cambio del Mouse Los pasos son los siguientes:

1. Creamos un clip de película, dando click en el menú Insertar seleccionamos Nuevo símbolo, o con Alt + F8, y en el cuadro de Crear un nuevo símbolo en Comportamiento escogemos la opción clip de película y le cambiamos el nombre, en este caso Mouse y le damos aceptar.


64 /113

2. Posteriormente importamos una imagen, en este caso será una imagen de un nuevo

cursor, por lo que nos vamos a menú Archivo y escogemos Importar o con las teclas Ctrl + R y buscamos nuestra imagen, de preferencia que sea .gif para que nuestro cursor este animado, por lo que debemos de tener algo similar.

3. Después damos click en Escena 1 para regresar al espacio de trabajo de esa Escena y

en el menú Ventana en la opción Biblioteca, o con F11 nos muestra el siguiente cuadro.


65 /113

4. Inmediatamente arrastramos nuestro clip de película a nuestro espacio de trabajo,

en este caso es Mouse. Debemos de tener cuidado de arrastrar nuestro clip de película y no la imagen.

5. Observamos que el punto de registro de la figura esta en la esquina superior

izquierda de nuestra imagen, por lo que ahora lo vamos a cambiar dando doble click sobre el clip de película y así lo podamos editar. Esto lo hacemos dando click en el nombre de la capa donde está la imagen por lo que se seleccionan todos sus fotogramas y ahora arrastramos la imagen conforme a nuestro punto de registro, en este caso el punto de registro se modifica para todos los fotogramas seleccionados, después colocamos el punto de registro en la punta de la flecha, por lo que debemos de tener algo así.


66 /113

6. Posteriormente nos regresamos a la Escena 1 y observamos ahora que el punto de registro esta en la punta de la flecha.

7. A continuación le damos un click en nuestra imagen y en el panel de Acciones

agregamos el siguiente código con mayúsculas y minúsculas, ya que una letra hace la diferencia

onClipEvent(Load) { Mouse.hide(); startDrag("",true); }

8. Si todo se realizo correctamente al momento de reproducir nuestra película en lugar

de un ratón como cursor tendremos nuestra imagen como cursor.


67 /113

Nota: Si queremos este cursor en todas nuestras escenas solo copiamos y pegamos el fotograma en las escenas que lo necesitemos.