Eduardo Tenango Cadenas Número de control: 03292267

Miguel Angel Ruiz Aguilar

Número de control: 03292243

Isabel Pastrana Lavana Número de control: 03292341

Angela González Olivar

Número de control: 03292125

Proyecto “Creación de la Página Web de la UTIM”

Empresa

Universidad Tecnológica de Izúcar de Matamoros

Como requerimiento parcial para obtener el título de

Técnico Superior Universitario en

INFORMÁTICA

Asesor Interno

Ing. Sergio Valero Orea

Asesor Externo Lic. Maria del Pilar González Arellano

Izúcar de Matamoros, Pue., Agosto del 2005

EX

CE

LE

NC

IA U

NIVERSITARIA, FORTALEZA

DE

ME

XIC

O

IZ

UC A R D E M ATA M O R

OS

DEDICATORIAS

A Dios, por la vida que nos ha permitido hasta este momento.

Dedicamos también este proyecto en especial a nuestros padres, que nos

ayudaron con sus consejos, en lo económico y por amor.

A nuestros profesores, que nos brindaron su paciencia y su entrega al

impartirnos las clases.

A amigos, al brindarnos ayuda en los momentos de dificultad.

CCOONNTTEENNIIDDOO

Página

RESUMEN....................................................................................................1

INTRODUCCIÓN..........................................................................................3

1. ANTECEDENTES.....................................................................................5

2. JUSTIFICACIÓN.......................................................................................7

3. OBJETIVOS..............................................................................................8

3.1 General................................................................................................8

3.2 Específicos ..........................................................................................8

4. MARCO TEÓRICO...................................................................................9

4.1 Internet ...............................................................................................9

4.2 Corel Photo Paint 11 .......................................................................12

4.3 Macromedia Flash MX Professional 2004 .........................................16

4.4 Macromedia Dreamweaver MX Professional 2004 ...........................24

5. DESARROLLO ......................................................................................35

5.1 Página Principal.................................................................................36

5.2 Diseño y Creación de la Base de los Botones...................................39

5.3 Diseño y Creación de los Botones.....................................................40

5.4 Mapa de la UTIM ...............................................................................49

5.5 Localización de la UTIM.....................................................................50

5.6 Intranet ..............................................................................................53

6. RESULTADOS .......................................................................................56

7. CONCLUSIONES...................................................................................57

8. REFERENCIAS .....................................................................................58

9. LISTA DE FIGURAS...............................................................................59

10. GLOSARIO...........................................................................................61

1

RESUMEN

La creación de la página Web de la Universidad Tecnológica de Izúcar de Matamoros,

se llevó a cabo recopilando información, a través de entrevistas, revisión de

documentos, informes, gacetas informativas, toma de fotos, entre otros; a pesar de

muchos contratiempos; en algunos casos se les tuvo que mandar algún memorándum a

los diferentes departamentos para que se nos facilitara la información. Para optar que

información íbamos a manejar solicitábamos ayuda a nuestros asesores, corrigiendo

errores o alguna otra sugerencia que resultara. Siempre tomando en cuenta los puntos

de vista de todos, cada una de las opiniones era importante para la realización de este

proyecto. Para la elaboración de este proyecto utilizamos herramientas multimedia

como Macromedia Flash MX Professional 2004, Macromedia Dreamweaver MX

Professional 2004 y de diseño, tales como Corel Photo Paint 11. En el inicio de este

proyecto se obtuvieron muchos problemas en el diseño de la página como: la falta de

comunicación entre asesores y alumnos, y más que nada en la planeación del diseño

del sitio Web; por estos percances se perdieron días de trabajo. Otra contrariedad fue,

que no teníamos equipo de trabajo necesario para laborar individualmente, sólo

contábamos con un equipo; no fue si no hasta semanas después, que conseguimos

equipos personales de cómputo. Para un correcto avance del proyecto acudíamos con

nuestros asesores constantemente, con el fin de hacer correcciones de ortografía y

diseño, contenido y anexar alguna otra información nueva que existiera. Continuamente

realizábamos respaldos de avances para evitar accidentalmente la pérdida del trabajo,

en otra computadora o en unidades extraíbles USB. Otro problema importante que

consideramos, fue que no se encontraban los plugins de actualización de Flash en

cada máquina para que se visualizaran o modificaran las animaciones creadas. Para

ello se descargaron de Internet y fueron instalados para visualizar mejor nuestras

páginas. Como ya se dijo, unos de los problemas que se nos presentaron fue el diseño

de la página para esto se realizaron equipos en los cuales iban a trabajar en una sola

2

cosa, los equipos quedaron así: uno realizaría los menús que llevarían las páginas, dos

realizarían los encabezados de todas las páginas y el otro se encargaría del diseño de

la página principal con esto se solucionó un problema y se tuvo mas comunicación entre

nosotros.

3

INTRODUCCIÓN

En la actualidad si las empresas, instituciones y dependencias quieren ser

competitivos; lograr la satisfacción de sus clientes y posicionarse arriba de la

competencia, es importante crear programas innovadores de difusión y promoción del

quehacer de cada institución.

Es por ello que la Universidad Tecnológica de Izúcar de Matamoros (UTIM) a través de

cada dirección de carrera se optó por la creación de una página Web para cada una de

ellas.

Ya que sabemos que el Internet hoy en día es una alternativa para obtener información

más accesible no sólo de Universidades sino también de muchos temas más.

La Universidad Tecnológica de Izúcar de Matamoros se creó en el año de 1997,

empezó con cuatro carreras que fueron: Informática (hoy Tecnologías de la Información

y Comunicación Área Sistemas Informáticos), Procesos Agroindustriales, Producción

Alimentaría (hoy Tecnologías de Alimentos), Proyectos Productivos y Comercialización

(hoy Administración), Hoy en día esta Universidad cuenta con cinco carreras: Sistemas

Informáticos, Tecnologías de Alimentos, Agrobiotecnología, Contaduría y

Administración, cada una ellas contará con su página, donde se mostrará temas de

importancia como su objetivo, plan de estudios, proyectos, campo de trabajo, áreas de

estudio entre otros puntos.

La creación de la página de esta Universidad se ha llevado acabo desde hace unos

años con el fin de que cada día se actualice y sea más novedosa para los usuarios.

Con nuestro proyecto la página de la Universidad tendrá más interactividad e

información actualizada. Dentro de la página de la Universidad se encuentra la Intranet,

4

que antes accesaba cualquier usuario, para acceder a ella se solicitarán algunos datos,

como Nombre de Usuario y Contraseña y sólo así podrán acceder.

5

1. ANTECEDENTES

La Universidad Tecnológica de Izúcar de Matamoros ha traspasado fronteras, siendo

hoy en día una competencia para muchas Universidades afines, sin embargo se

presenta un problema, ¿Cómo llevar hasta los estudiantes la oferta educativa de dicha

Universidad?, ¿Cómo dar a conocer el plan de estudios de cada carrera?.

Dando a conocer la oferta educativa, plan de estudios, nivel de sus profesores con sus

especialidades, además de sus objetivos, campo de trabajo y áreas de estudio esto con

el fin de que el estudiante se dé una idea del trabajo de la Universidad en sus

diferentes carreras. Además de sus instalaciones, infraestructura y proyectos. Además

de las opciones que tiene para seguir estudiando, como una alternativa la Universidad

Tecnológica de Izúcar de Matamoros optó por este proyecto “La creación del sitio Web

de la UTIM”. Con el fin de llevar hasta los estudiantes una opción más para su

preparación.

La Universidad ya contaba con un sitio Web desde hace algunos años; con páginas no

tan formales o al menos el diseño adecuado como Institución Educativa, con este

proyecto se pretende actualizar toda la información y mejorar el diseño, tener más

interactividad con el usuario.

Algo nuevo que hay en la Universidad es la creación de la Incubadora de Empresas

que tiene fideicomisos con diferentes empresas privadas, este departamento también

estará incluido en la página.

También se ha agregado al sitio Web una liga que mandará hacia la página de Ley de

Transparencia donde contendrá información acerca de reglamentos, normas y

convenios de la Universidad.

6

La página anterior contaba con la Intranet donde contenía información de Manuales,

información sobre el sistema de certificación de la calidad: Certificación ISO 9001:2000,

Software para Descargar y CIIES; ahora la página de la UTIM tendrá un enlace hacia la

página de la Intranet que se abrirá en otra ventana y contará con un sistema de

Autentificación, es decir, ahora el usuario tendrá que autentificarse, dando como datos

un nombre de usuario, cosa que en la anterior página no sucedía, conservará algunos

datos anteriores y algunos otros ya actualizados, como por ejemplo en el Software para

descargar.

7

2. JUSTIFICACIÓN

Para llevar a los estudiantes está oferta educativa se planeó en la realización de las

páginas de esta, pero ya que la Universidad cuenta con cinco carreras se tendrá que

realizar un sitio para cada carrera, es por ello que este proyecto se llevó acabo la

realización de la página Web de la Universidad Tecnológica de Izúcar de Matamoros.

Se asignarán diseños para realizar la Página Web de la Universidad y cambiar la

anterior, en la forma de cómo esta diseñada y actualizar la información; para presentar

en forma práctica la información, y así poner de forma laboral los conocimientos que

hemos adquirido durante nuestra instancia en esta Universidad.

Con el proyecto de la Página Web se busca aportar un beneficio a la Universidad

Tecnológica de Izúcar de Matamoros y al mismo tiempo somos favorecidos en egresar

de dicha Universidad con conocimientos en sentido práctico.

Con esto se pretende que el joven aprenda sobre las cosas y problemas reales que se

enfrenta un profesional ya egresado y se beneficiará ya que dejará una experiencia que

tal vez algún día sirva de ejemplo y sepa como actuar en días de problemas para que la

solución sea la más eficaz y eficiente ante nuestros sucesores.

8

3. OBJETIVOS

3.1 General

Crear la página Web de la Universidad, para difundir su oferta educativa, instalaciones,

infraestructura, entre otros; utilizando herramientas multimedia como Macromedia flash,

Dreamweaver Mx y de diseño como Corel Photo-Paint 11.

3.2 Específicos

� Desarrollar en el proyecto las habilidades que se obtuvieron durante su periodo

escolar y encuentre un perfil adecuado, para que su formación futura sea la

mejor en Universidades próximas.

� Manejo de nuevas y conocidas herramientas de multimedia para la incrustación

de imágenes.

� Desarrollar y poner en práctica los diferentes diseños que fueron establecidos en

un primer plano.

� Comprender que el trabajo en equipo es una forma más de salir de un problema

y emprender negocios e ideas nuevas.

� Que el alumno demuestre que puede dar solución a un problema informático y

puede aportar ideas con el fin de llegar a posibles soluciones.

� Conseguir la información previa y actualizada de las diferentes carreras con

que cuenta la Universidad, así como sus diferentes áreas.

� Poner la información adecuada y actualizada en la página Web.

� Entregar en el tiempo previsto el proyecto.

9

4. MARCO TEÓRICO

4.1 Internet

Internet es un conjunto de redes, redes de computadoras y equipos físicamente unidos

mediante medios que conectan puntos de todo el mundo. Se presenta en muchas

formas: desde cables de red local (varías máquinas conectadas en una oficina o

campus) a cables telefónicos convencionales, digitales y canales de fibra óptica que

forman las carreteras principales de la información.

En Internet las comunicaciones concretas se establecen entre dos puntos: computadora

personal y servidores. El fundamento de Internet es el TCP/IP, Protocolo de

Transmisión que asigna a cada máquina que se conecta un número específico, llamado

“número IP”. El Protocolo TCP/IP sirve para establecer una comunicación entre dos

puntos remotos mediante el envío de información en paquetes.

Servicios de Internet

El Correo Electrónico (e-mail): Es tal vez el principal servicio de Internet, y sin duda el

de mayor importancia histórica. La primera parte de una dirección identifica

habitualmente a la persona y a la segunda a la empresa u organización para la que

trabaja, o al proveedor de Internet a través del que recibe la información; y entre la letra

arroba (@).

10

La World Wide Web

Puede definirse básicamente como dos cosas: hipertexto, que es un sistema de enlaces

que permite saltar de unos lugares a otros; multimedia, que hace referencia al tipo de

contenidos que puede manejar (texto, gráficos, video y otros) en Internet, las bases

sobre las que se transmite la información.

El aspecto exterior de WWW son las conocidas páginas Web. Las páginas de las WWW

están situadas en servidores de todo el mundo (sitios Web), y se accede a ellas

mediante un programa denominado “navegador” (Browser). Este programa emplea un

protocolo llamado HTTP, que funciona sobre TCP/IP, y que se encarga de gestionar el

aspecto de las páginas y los enlaces.

Cada página Web tiene una dirección única en Internet, en forma de URL. Un URL

indica un tipo de documento (Página Web o documento en formato HTML).

Html

Es un Lenguaje para la definición de estilos lógicos en documentos de hipertexto. La

estructura básica de un documento en html es: cabecera y cuerpo del documento.

<html> Limitan el documento e indican que se encuentra escrito en este

lenguaje.

<head> Especifica el prólogo del resto del archivo, son pocas las tags que van por

los marcadores del navegador e identificará el contenido de la página.

<body> Encierra el resto del documento, el contenido.

En la estructura de la página podemos ver más opciones como:

<h1> Sirve para dividir el texto en secciones.

<p> Párrafos, se diseñó para resaltar el párrafo por lo que puede ir sola.

<br> saltos de línea, puede poner tantas como desee y realizar un salto por

cada uno de ellos.

11

Para la creación de vínculos en html o hipertexto, para enlazar con ellos todos sus

documentos en Web y para generar un enlace a otro documento necesitamos el

nombre de un archivo (o su dirección URL). Y el texto que serviría de punto de

activación del otro documento, este segundo elemento será el que veamos en la

pantalla y que servirá del primero para saltar del documento. Estos enlaces se generan

mediante la tag <A>…</A>, pero este llevará además <A HREF = “ ” > o <A NAME =”

” > entre comillas irá la dirección del documento o la página especifica de ella.

<table></table> Realización de tablas.

<tr></tr> Indica cada fila de la tabla.

<td></td> Indica las celdas de la tabla.

Qué compone una página Web

La expresión de Página Web viene de World Wide Web (WWW Tela de araña de

ámbito mundial), siglas que suelen utilizarse al comienzo de una dirección de página

Web. Una página Web puede contener texto e imágenes. Pero también se le puede

añadir sonido, animaciones o interactividad a las páginas, lo cual le da atractivo a una

página Web no importando la información que presente.

Este lenguaje consiste en colocar instrucciones (etiquetas), cada una de las cuales

destinada a añadir un elemento en la Página Web (un párrafo de texto, una imagen,

una tabla, etc.) o enlazar esos elementos mediante vínculos que hacen referencia a

otros elementos u otras páginas. Así, cuando se hace clic sobre un objeto de la página

para seleccionarlo, el lenguaje se encarga de llevarnos a ese otro objeto o página.

Herramientas que se utilizarán para el diseño de la página Web

En el diseño de la página se manejaron diversas herramientas de diseño como Corel

Photo Paint 11, Macromedia Flash MX Professional 2004, Dreamweaver. Con estas

herramientas trabajamos sobre el diseño y platicáremos de ellas un poco.

12

4.2 Corel Photo Paint 11

Es una amplia aplicación de edición de imágenes que permite retocar y mejorar

fotografías. Práctico para corregir el efecto de los ojos rojos o problemas de exposición,

recortar áreas de la imagen o crear y publicar imágenes en Web, COREL PHOTO

PAINT 11 proporciona potentes herramientas que son rápidas y fáciles de usar.

COREL PHOTO PAINT 11 es una aplicación de edición de imágenes de mapa de bits

que permite retocar fotografías existentes o crear gráficos originales. COREL PHOTO-

PAINT proporciona las herramientas y los medios de un estudio de diseño gráfico

profesional. Asimismo, permite elegir entre un vasto conjunto de medios y texturas, así

como utilizar varios colores y pinceles y una biblioteca de imágenes ya preparadas.

También es posible aplicar animación a las imágenes y publicar el trabajo en la Web.

FIGURA 1. Entorno de la estructura de Corel Photo Paint 11

Funciones

• Nuevo aspecto

• Edición de fotografías

• Funciones para Web

• Efectos creativos

13

Interfaz mejorada

Las mejoras de la interfaz permiten centrarse en las tareas más comunes, como la

edición de imágenes. Los nuevos iconos proporcionan un aspecto de uniformidad y

coherencia en toda la aplicación.

Área de control de color

El área de control del color incluida en la caja de herramientas permite ver y elegir

rápidamente los colores de fondo, primer plano y relleno.

Barra de propiedades

La Barra de propiedades muestra los comandos de uso frecuente, afines a la

herramienta activa. A diferencia de las barras de herramientas, el contenido de la Barra

de propiedades cambia en función de la herramienta activa. Por ejemplo, si utiliza la

herramienta Texto, el contenido de la Barra de propiedades cambia para mostrar la

configuración del texto, como el tipo y el tamaño de fuente y la alineación.

En la Barra de propiedades ampliada hay opciones más avanzadas para la herramienta

activa. Un botón de flecha doble situado en el extremo de la Barra de propiedades

permite abrir y cerrar la Barra de propiedades ampliada.

Edición de fotografías

Herramienta de goma. Esta tiene muchas opciones que da efecto a las fotos para el

aspecto que tu le quieras dar como borrar la foto o dar el efecto de que tu foto tome

alguna forma que tu desees asta que la foto tome el color de fondo de tu papel y

además puedes encimar tus fotos como tu desees.

14

Recorte o extracción de áreas de imagen

Para separar áreas de la imagen de fondos: se utiliza la herramienta Resaltar para

vectorizar el exterior del objeto, rellenar el interior del objeto y procesar la imagen.

Funciona bien incluso en imágenes con alto nivel de detalle como son las de humo o

cabello.

A continuación se presentan algunas herramientas mas utilizadas en el programa de

Corel Photo Paint 11.

� Herramienta Selección de Objetos.- Se utiliza para seleccionar, mover y

transformar objetos.

� Herramienta Mascara de Rectángulo.- Se utiliza para definir áreas rectangulares

editables.

� Herramienta Zoom.- Permite ampliar áreas de la imagen.

� Herramienta Cuentagotas.- Permite seleccionar colores de una imagen abierta.

Haga clic para seleccionar un color de primer plano. Haga clic con el botón

derecho del ratón (Windows) o presione Control + clic (Mac OS) para seleccionar

un color de relleno. Presione la tecla Control (Windows) o Comando (Mac OS) y

haga clic para seleccionar un color de fondo.

� Herramienta borrador.- Deja transparentes los píxeles de los objetos para poder

ver el objeto o el fondo de imagen que hay debajo. Permite borrar partes del área

resaltada.

� Herramienta texto.- Permite añadir texto a la imagen.

� Herramienta rectángulo.- Permite dibujar formas cuadradas o rectangulares. Para

redondear las esquinas de un rectángulo se escribe un valor en el cuadro Radio

de la Barra de propiedades.

� Herramienta relleno.- Permite rellenar áreas con alguno de estos tipos de relleno:

uniforme, degradado, mapa de bits y textura.

15

� Herramienta pintar.- Permite pintar en una imagen utilizando el color de primer

plano.

� Herramienta efecto.- Permite realizar correcciones locales de tono y color en la

imagen.

Mejoras en el ensamblado de imágenes

Ahora se pueden ensamblar varias imágenes para crear una imagen grande o

panorámica. Gire o arrastre las imágenes para colocarlas en la posición adecuada;

desplácelas y auméntelas para ajustar la posición con exactitud. Las áreas

superpuestas quedan resaltadas para poder ver al instante la alineación de las

imágenes. La imagen ensamblada se puede guardar como una sola imagen o como

objetos, lo que permite efectuar ajustes posteriores en las distintas imágenes.

Mejoras en la optimización de la imagen

La optimización de imágenes permite ajustar la calidad de la visualización y el tamaño

de los archivos. El optimizado de imágenes Web ayuda a ahorrar tiempo ya que permite

guardar la configuración de cada ventana de previsualización para su posterior uso.

También es posible optimizar las imágenes segmentadas.

Mejora de las sombras

Ahora es más sencillo controlar la creación de sombras interactivas: arrastre el cursor

desde el centro del objeto para crear sombras planas o arrástrelo desde el borde

exterior del objeto para crear sombras con perspectiva. El nuevo fundido preestablecido

con desenfoque Gaussiano permite crear sombras de aspecto muy realista.

16

4.3 Macromedia Flash MX Professional 2004

Hace aproximadamente siete años Macromedia ya estaba considerada entre líderes

del mercado mundial de gráficos y animaciones con su director, verdadero estándar de

la industria compraría FutureSplash para acrecentar sus posibilidades y convertirlo en el

programa de animación para la Web por excelencia, denominándolo FLASH.

Definición:

El nombre técnico para Flash es Authoring, o sea una plataforma de desarrollo para

otros Software y para Multimedia.

En práctica el Flash es un programa que permite desarrollar objetos Multimediales,

visibles no sólo en Internet.

Para poder ver algún trabajo realizado en Flash, éste se graba como proyector legible

con Shockwave, el cual es: .swf. Este proyector de Flash fue inicialmente el proyector

de Director. Macromedia Flash, que ejecuta las aplicaciones creadas, se instala de

forma predeterminada junto con Flash. Flash garantiza que todo el contenido SWF

pueda visualizarse y esté disponible en las mismas condiciones en todas las

plataformas, los navegadores y los dispositivos.

Flash MX

Esta herramienta está concebida para los diseñadores de páginas Web y los creadores

de aplicaciones avanzados. Flash MX Professional 2004 incluye todas las funciones de

Flash MX 2004, así como varias herramientas nuevas de grandes prestaciones.

Proporciona herramientas de gestión de proyectos para optimizar el flujo de trabajo

entre los miembros de un equipo Web formado por diseñadores y desarrolladores.

Funciones tales como la creación externa de scripts y la gestión de datos dinámicos de

17

bases de datos, entre otras, hacen que esta herramienta sea muy útil para proyectos

complejos a gran escala que deban desarrollarse mediante Flash Player junto con una

combinación de contenido HTML.

Cualidades técnicas fundamentales de este programa

Este programa llamado Flash, que nos permite crear y animar gráficos Vectoriales

compactos. También nos permite importar y manipular Vectores y gráficos Bitmap que

hayan sido creados en otras aplicaciones, o sea cualquier tipo de gráficos.

Características fundamentales del flash

Flash es un programa que contiene muchas herramientas de trabajo similares y en

algunos casos igual a las de la mayoría de programas de diseño gráfico, o al menos de

los más conocidos y mejores en el mercado. Entre algunas de las herramientas y

funciones diferentes que este programa contiene están:

• El Publish, que es un visualizador de nuestro trabajo ya sea en Html o en Flash.

Y dependiendo de la orden que le demos, en este formato lo veremos, previo a

nuestra edición final. Este se encuentra en Archivo. Otra forma de visualizar

nuestro trabajo es por medio de Test Movie que se encuentra en Controles.

• Luego en Edit, tenemos varias opciones de Frames o Marcos, que son los

fotogramas en dónde se organizan los objetos y movimientos en manera

temporal.

• También en Edit, encontramos una opción de Edit Symbols, que sirve para

transformar en Vectorial los objetos, nombrándolos de una forma diferente, que

se guardan automáticamente en una librería de símbolos. En Insert, encontramos

también esta opción.

• En Insert la mayoría de opciones son diferentes porque son especiales para este

programa, entre ellas tenemos la de Layer. Que es la “página en blanco” en

dónde se trabaja. Esta opción permite agregar o eliminar hojas de trabajo.

18

• Otra es Scene o Escena, que es en dónde se trabaja. Aquí podemos agregar o

eliminar escenas, las cuales se pueden unir formando una animación, como una

película.

FIGURA 2. Ventana de inicio de Flash MX Professional 2004

Figura 3. Entorno de trabajo Flash MX Professional 2004

El entorno de flash MX, (figura 3) la zona de trabajo la muestra de color gris y el

escenario de (con su fondo blanco por defecto). También se aprecian la línea de tiempo

19

y los cuatro paneles principales. En ambas superficies se puede trabajar insertando

objetos y figuras pero solamente aparecerán en la película aquellos que están dentro

del escenario. También tiene la barra de herramientas de dibujo que esto permite a los

que por primera vez interactúan con este sistema.

Esta es la pantalla principal cuando se abre el flash se puede ver claramente 4 partes

distintas.

1. Es el MENU clásico de todas las aplicaciones de Windows.

2. Es la LINEA DE TIEMPO o temporalidad, donde podemos realizar diseños,

movimientos con tiempo, como en una película para el cine.

3. La BARRA DE DIBUJO es la que contiene los instrumentos colores, lápices,

texto, borradores, diseño de formas, etc.…

4. Es el STAGE o área de trabajo dónde se realizan los diseños.

A la izquierda encontramos la LINEA DE TIEMPO, en donde se encuentran pequeñas

líneas, llamadas FOTOGRAMAS, o sea fracciones de segundo en dónde se pueden

grabar objetos y sus movimientos, construyendo así una película.

Debe representar también los movimientos intermedios entre los dos puntos para

representar el movimiento en la pantalla (o página).

Para trabajar con Flash por primera vez podemos hacerlo con la barra de herramientas

de dibujo ella nos facilitará muchas cosas, con ella podemos insertar imágenes

prediseñadas o también realizarlas con el lápiz, pincel, pluma etc. (Figura 4).

20

Figura 4. Barra de herramientas de Flash

Utilizando la herramienta de flecha.

1 2 3

Estos diferentes estados del cursor se corresponden con sendos “estados” de la

herramienta de flecha.

1. El icono de navegación aparece cuando situamos el cursor encima del objeto con

este estado del cursor, podemos trasladar o cambiar de sitio en el escenario el

objeto que este ya seleccionado presionando encima y arrastrando con el ratón.

2. Al pasar cerca de la esquina del objeto de un extremo de un segmento, o de un

vértice de una línea quebrada, aparece junto al cursor un icono en forma de

ángulo con este estado el cursor, podemos modificar o reformar una esquina o

vértice de un objeto apropiado.

3. Pasando el cursor cerca de la línea o cerca de las líneas que forma el rectángulo

aparece junto al cursor una pequeña curva, con este estado podemos modificar

la forma de un objeto fácilmente.

21

Herramienta de texto

Tecla de acceso rápido: T.

La herramienta de texto de flash aumenta las capacidades del programa para realizar

labores combinadas de programas de dibujo y paginación. Todos los atributos y

opciones están disponibles a través del panel de propiedades. El panel tiene todos los

comandos para que podamos editar el campo de texto sin salir del mismo.

Las opciones de texto.

En el panel de propiedades del texto encontramos el la parte izquierda un pequeño

menú que nos muestra las opciones de texto que tenemos para trabajar.

El tipo de texto Estático.

Este tipo de texto se refiere al texto que incluimos en la película y que no va a variar en

ninguna forma, tanto sea por parte del cliente como por medio de variables. Quedará

siempre como lo hayamos diseñado. Además podemos editarlo como un texto

cualquiera el tamaño, fuente, color etc.

El panel de propiedades

En la parte mas inferior de la ventana de flash se encuentra en panel de propiedades

(figura 5) disponibles basta hacer clic sobre su barra gris para que se habrá y también

hace lo mismo para cerrarla.

Una vez abierta esta ventana podemos trabajar con ella, al dibujar obtener un objeto ya

en el escenario podemos realizar deferentes cambios con las propiedades del panel

como el grosor de las líneas, el color de ellas y el tamaño en píxeles, pulgadas

centímetros, etc..

22

Figura 5. Panel de propiedades

El panel de mezclador de colores

Nos sirve para rellenar una figura cerrada, principalmente las que se realizan con las

herramientas de ovalo y rectángulo y tienen varias opciones.

Los selectores de colores nos sirven para establecer los colores iniciales en cualquier

relleno degradado. Si no se trata de un degradado podemos intercambiar dos colores

en la figura.

Al pulsar cualquiera de estos dos selectores, se abre la carta de colores de flash para

que podamos seleccionar el color que queremos.

Debajo de los selectores se encuentra tres botones:

• Blanco y negro. Pulsándolo se establecen solamente un blanco y un negro para

los dos selectores.

• Sin color. Se puede eliminar el color para el entorno o para el relleno

seleccionando el botón “sin color”, con lo que queda efectivamente eliminado.

• Pero para que sea posible antes hay que establecer esta opción y después

dibujar la figura (con la herramienta ovalo y rectángulo).

• Intercambiar colores. Pulsando se intercambian los colores de los dos sectores

de color.

23

La línea de tiempo

La línea de tiempo (figura 6) no es otra cosa que un dispositivo grafico en la interfaz de

flash que contiene todos los fotogramas y las capas de la película en forma secuencial

con sus objetos y órdenes. De manera que con ella podemos dar un vistazo podemos

conocer la formación de la película, y también es la utilidad que nos permite ir creando

la misma.

FIGURA 6. Línea de tiempo

Los fotogramas se dividen en dos clases: los estáticos y los dinámicos. Pueden estar

llenos o vacíos, toda película comienza con un fotograma dinámico, llamado en el

entorno flash fotograma clave, a un que este vació. Si que remos señalar un fotograma

determinado en la línea de tiempo como clave lo tenemos que establecer

específicamente. Si queremos convertir un fotograma estático en un fotograma clave en

cualquiera de las versiones de flash, tenemos que hacerlo mediante el comando

insertar, fotograma clave, o presionando la tecla F7 (para un fotograma clave vació) o

F6 (para un fotograma clave lleno).

En la línea de tiempo se distinguen los siguientes elementos:

• Iconos del cambio de estado de las capas.

• Indicador del fotograma actual, también llamado cabeza lectora.

24

• Las carpetas. Su nombre aparece por defecto carpeta 1, carpeta2, etc. Si

queremos cambiarlo, se hace doble clic sobre el nombre y se escribe el texto que

queramos.

El método miMovieClicp.getURL ()

Este método no se diferencia en nada de lo que la acción Get URL proporciona. Los

parámetros de aquella acción se incluyen aquí como argumentos del método su

sintaxis es:

� miMovieClic.getURL (URL [, ventana, variables]).

El significado de los argumentos es:

� URL. La dirección de la cual se obtiene el documento.

Ventana. Este argumento es opcional, pero especifica el fotograma o la ventana del

documento HTML donde se va a cargar la película o documento extraído con el URL.

Las palabras reservadas _ self, _ parent, _top, y blank puede utilizarse, lo mismo con la

acción.

Variables Opcional en este argumento se especifica el método de envió de las

variables, si hay variables se sigue un método de envió que podemos seleccionar

entre GET y POST. GET anexa las variables al final de la dirección URL y se utiliza

para un número pequeño de variables. Si las variables son muchas, es mejor el método

POST, que envía las variables en un encabezado HTTP aparte.

4.4 Macromedia Dreamweaver MX Professional 2004

Macromedia Dreamweaver MX es un sistema para crear páginas Web de forma rápida

para red de Internet. Con el programa de Dreamweaver no es necesario conocer

25

lenguajes de programación para diseñar páginas Web muy completas. Dreamweaver es

una herramienta que nos permite programar y depurar más fácilmente gracias a códigos

de colores y otras utilidades.

Ventajas

• Que se puede programar sin saber lenguajes de programación.

• Se utiliza como si estuviéramos trabajando en un programa de autoedición, ya

que se puede incorporar elementos a la página, como texto, imágenes, sonidos,

etc.

• Consigue que un usuario “programe” sin saber programar, los comportamientos.

Se trata defunciones que se han preprogramado de modo que los datos que

necesiten pueda ofrecerlos el usuario fácilmente mediante cuadros de diálogo.

También Dreamweaver traduce esos datos creando correspondiente programa.

• Dreamweaver permite colocar elementos necesarios en la página Web (botones,

listas desplegables, cuadros de texto, etc.).

En Dreamweaver se diseña la página en la ventana más grande. En ella vamos

tecleando y añadiendo los distintos componentes a las páginas que compongan el sitio

Web mediante paneles con los que también se puede modificar dichos elementos

según nuestras necesidades.

Novedades de Dreamweaver MX

Dreamweaver MX contiene una amplia variedad de nuevas funciones, como nuevas

plantillas mejoradas para ayudar a los diseñadores visuales y muchas otras

posibilidades de codificación.

Dreamweaver también incluye ahora todas las funciones de desarrollo de aplicaciones

de Dreamweaver UltraDev 4 y otras nuevas, incluido un espacio de trabajo de edición

26

de código que procede de Macromedia ColdFusion Studio, código de tiempo de

ejecución mejorado y asistencia para las últimas tecnologías de aplicaciones Web.

Una vez que se activa Dreamweaver, esa ventana con página estará rodeada de

varios paneles con funciones prácticas para la creación de sitios Web y sus páginas,

como a continuación se presentan.

FIGURA 7. Entorno de trabajo de Dreamweaver

1. Barra de menú principal. Contiene el menú con las opciones principales del

programa.

2. Barra insertar. Contiene varios botones distribuidos en fichas con pestañas. Los

elementos que contiene esta barra incorporan diferentes objetos a la página Web

(tablas, formularios, elementos multimedia, caracteres especiales, etc.)

facilitando su inserción.

3. Barra de herramientas Documento. Contiene varios botones con las funciones

más comunes de Dreamweaver a la hora de diseñar la página Web.

1

2

3

4

5

6

7

27

4. Paneles. Contiene elementos especializados para diseñar la página Web. Según

el titulo de cada panel, podrá ver que aspecto de la página afectan sus

elementos. Uno de los paneles más importantes es el panel Sitio, ay que nos

permite configurar el sitio Web en general.

5. Ventana de Documento. Es la ventana más grande en la que trabajaremos

diseñando la página Web. Suele ser útil maximizarla ver el contenido de la

página de un modo mas completo.

6. Barra de estado. Muestra en todo momento la situación en que se encuentra el

usuario durante el diseño. Esta barra contiene el Selector de etiquetas con el que

podemos seleccionar una etiqueta que no tenga un aspecto visible en la página:

por ejemplo, la etiqueta Body que hace referencia a toda la página Web, por

tanto, se selecciona ahí.

7. Inspector de propiedades. Se trata de un panel que varía su contenido

dependiendo del objeto que seleccionemos en la página. Su función cosiste en

ofrecer los elementos que caracterizan al objeto que hayamos seleccionado en la

página para poder modificar esas características.

Microsoft Dreamweaver sistema que ha evolucionado a partir de un lenguaje de

programación, permitiendo diseñar páginas Web de forma visual en lugar de

programada, permite generar y retocar partes de las páginas con lenguajes como

HTML, XML, JavaScript, etc.

Interactividad

La interactividad en las páginas Web consiste en establecer una sencilla comunicación

entre la página y el usuario que la visita en ese momento: la página ofrece su

información y sus elementos interactivos al usuario y éste entrega su información a la

página a través de ellos.

Estas páginas interactivas son mas usualmente usadas por negocios que necesitan

una cierta interrelación con el usuario.

28

Dreamweaver cuenta con herramientas para generar esa interactividad con los usuarios

de las páginas Web. Son algo limitadas debido a que exigen un mínimo de

programación con lenguajes específicos para Internet como JavaScript, PHP.

En casos se tiene que programar del lado del cliente y también del lado del servidor.

Parte del programa que se ejecuta en el navegador cuando un usuario entra en una

página Web es la que esta programada del lado del cliente, y la parte que se ejecuta en

el ordenador servidor, es la que esta programada del lado del servidor.

Cuando se programa la interactividad se programa una parte del lado del cliente

(diseñar elementos como botones, listas, casillas, cuadros de texto, etc., y programar la

función que deberán realizar como respuesta a las acciones del usuario que los

maneje) y otra parte del lado del servidor (qué hará el programa que reciba los datos

enviados por el usuario).

Texto

En Dreamweaver podremos darle distintas apariencias como tipos de letra y colores. Y

solamente se necesita escribir tecleando en al página Web.

Cuando una pequeña parte del texto sea un vínculo, aparece subrayada indicándolo

donde con un clic en él, el accede al lugar de la red indicado por el vínculo.

Dreamweaver puede crear sus propios comandos y objetos, modificar métodos

abreviados del teclado.

Imágenes:

En Internet suele haber dos formatos: GIF y JPG. Estos pertenecen al mapa de bits.

Estos formatos están tomados como estándar por ofrecer una calidad muy alta y

ocupan poco espacio.

29

Escritura del texto.

El texto es la base informativa de cualquier documento y, por tanto, de una página Web.

Como es de suponer, el texto solo hay que escribirlo una vez que nos encontremos en

él, la ventana de dicción de Dreamweaver.

Sin embargo, al texto escrito podemos darle forma y hacerlo más atractivo y

presentable, ya que una página Web debe llamar la atención al mismo tiempo que

informar.

Tipos de letras.

Continuando con las funciones para el texto, los tipos de letra, también llamados

fuentes, pueden generarse desde varios lugares distintos del programa. Para empezar

podemos utilizar la opción fuente del menú texto. También podremos utilizar varios

botones del inspector de propiedades. Si hacemos lo primero obtendremos un menú

que nos mostrara los tipos de letras que podemos utilizar, al igual con el tamaño, estilo

etc.

También podemos establecer un color de letra que queramos que aparezca también

esto es novedoso para el usuario los colores que utilice uno. El texto puede aparecer

escrito en la página con distintos colores.

Lo primero que debemos hacer es seleccionar la porción de texto a la que deseamos

cambiar el color. Luego accederemos al menú texto y seleccionáremos la opción color.

Esta opción nos ofrecerá un cuadro de diálogo que nos mostrará los colores que

tenemos para seleccionar, nos es más fácil elegirlo en la lista de colores básicos, pero

puede utilizar la paleta que aparece a la derecha o teclear los niveles de matiz,

saturación y luminosidad o los de rojos, verde y azul, cuyos valores coinciden con el

30

código de color que queremos, este código va desde #000000 (negro) hasta #FFFFFF

(blanco).

Lista y viñetas

Una de las herramientas de uso sencillo que aporta Dreamweaver es la creación de

esquemas de un texto. Un esquema puede encargarse de enumerar cada uno de los

elementos de una lista (normalmente párrafos) de forma automática, o bien de generar

viñetas. El modo más fácil de aplicar esta función consiste en seleccionar los párrafos

que conforman la lista y, a continuación seleccionar lista en el menú texto a parecerá

un submenú que nos mostrara algunas opciones.

Imágenes

Lo que siempre da más colorido a un Web son las imágenes como ya sabemos, las

imágenes de Internet suelen aparecer en formatos GIF y JPEG que son mapas de bits

con algún algoritmo de compresión que reduce su tamaño en disco y el tiempo de

transferencia que tarda en descargarse en nuestro navegador .

Para incorporar una imagen al editor de Dreamweaver podemos utilizar la opción

imagen del menú insertar. Para ello es necesario tener imágenes almacenadas en el

disco (Dreamweaver puede leer imágenes del disco archivadas con varios formatos

como GIF, JPEG, PNG, TIFF, BMP, etc.). Esta opción nos lleva a un cuadro de diálogo

(figura 8) que se maneja de forma similar al que utilizamos para abrir páginas Web con

Dreamweaver:

31

FIGURA 8. Ventana para importar una imagen

1. La lista buscar en permite seleccionar una unidad de disco (u otro lugar) en el

que podemos elegir una imagen.

2. Si en la lista que hay debajo de buscar en aparece alguna imagen también

podemos añadirla a la página haciendo doble clic sobre ella (si seccionamos una

podemos verla en miniatura en el cuadro de la derecha de Vista previa). Esto nos

servirá para ver la imagen que queremos insertar a nuestra página y ver si es la

correcta para incorporarla.

3. Si lo queremos es seleccionar la imagen por su nombre lo que podemos hacer es

teclear el nombre de la imagen en el cuadro nombre.

4. Active el botón aceptar (OK) para incorporar la imagen elegida a la página.

5. Si la imagen que va a incorporar se encuentra en una carpeta que no esta

incluida en la de su Web, Dreamweaver le pedirá que la grabe en la carpeta del

sitio Web que esta diseñando. Esto es recomendable en caso que la va a

publicar el sitio en Internet cuando lo termine. Esto también se pide cuando

incorpore algún otro archivo a su sitio Web.

32

Video y Películas Flash

En Dreamweaver, pueden añadirse video clips mediante el menú insertar de la ventana

de diseño, seleccionando la opción medio que a su vez ofrecerá un submenú que

podremos elegir la opción que queramos en este caso flash. Las de mas opciones del

menú permiten insertar elementos de video construidos en otros formatos como plun –

in, Shockwave, (de la compañía Macromedia), Applets de java o controles de ActiveX.

Teniendo muy en cuenta que estos formatos que usted ocupe necesitan tener el

navegador de él. Por ejemplo, si añadiera una película de flash necesita que el

navegador que lo reproduzca este instalado en esa máquina.

FIGURA 9. Ventana para importar una animación de Flash

Esto nos lleva a un cuadro de diálogo (figura 9) en el que podrá establecer los datos del

archivo que desee incorporar a la página en este caso Flash, busca el archivo y da

aceptar (OK) ya una vez establecido en su página usted podrá manipularlo con su

barra de propiedades del mismo.

33

Para poder visualizar el resultado de su página usted pude ver oprimiendo la tecla F12

o seleccionando vista previa en el explorador. Si desea cambiarlo lo que puede hacer

es seleccionarlo y dar Supr.

Tablas

En una estructura de gran utilidad en cualquier tipo de texto es la tabla. En las páginas

Web pueden sernos utilices para distribuir datos de forma ordenada.

En una tabla, los datos que la rellena se disponen de filas y columnas lo que nos

permite colocar datos en la página que de otra forma nos resultara imposible.

Crear tablas

Podemos crear una tabla en la página mediante el menú insertar seleccionando tabla o

mediante las teclas CONTROL + ALT + T.

Esto nos llevara a un cuadro de diálogo en el que estableceremos los datos iniciales de

la tabla.

FIGURA 10. Ventana para insertar una tabla

34

1. Para empezar, disponemos de dos cuadros (figura 10) de texto para especificar

el número de filas (rows) y el número de columnas (columns) que debe tener la

nueva tabla.

2. Con las demás opciones podemos manipular nuestra tabla como relleno de

celda (establecemos que distancia debe haber entre los bordes de las celdas y

el texto que contenga), espacio entre celdas (se especifica la distancia que

habrá entre las celdas de al tabla).

3. Además del ancho y borde, el ancho se establece una anchura para tabla esta

podrá explicarse en píxeles o porcentaje, el borde estableceremos el grosor del

marco que Dreamweaver pone la tabla.

4. Una vez establecidas estas opciones daremos aceptar (OK). para ver nuestra

tabla en una vista previa.

35

5. DESARROLLO

Para elaborar la página de la Universidad Tecnológica de Izúcar de Matamoros se hizo

primero la estructura para la página Web, se vio el diseño de como quedará, después

se hizo la elección de los programas a utilizar y optamos por Corel Photo Paint 11,

Macromedia Flash MX Professional 2004, Macromedia Dreamweaver MX Professional

2004.

El diseño de la página fue surgiendo a través de ideas y opiniones, es decir que se

hicieron varias opciones y se fueron eligiendo las más apropiadas o las que más

agradaban a nuestros asesores, a continuación se mostrarán algunas de las pantallas

que fueron elegidas.

Intro del sito Web de la Utim

FIGURA 11. Intro de la página

En la figura 11 se muestra el intro que da inicio a la página principal de la UTIM. A pesar

que realizamos algunas propuestas para el intro, este fue el mejor de todos.

36

El intro esta hecho en macromedia FLASH MX Professional, tiene efectos en fondo y en

letras, y además, cuenta con código para que al término de la animación

inmediatamente aparezca la página principal de la UTIM.

5.1 Página Principal

FIGURA 12. Página principal

Esta página también fue la mejor de todas las propuestas que realizamos, fue hecha

con el programa de macromedia FLASH MX Professional. Esta página cuenta con

varias ligas de efecto de botón, que conllevan a otra página, también cuenta con

imágenes de fondo que tienen un efecto de borrador realizadas en COREL PHOTO-

PAINT.

37

Página de Quienes Somos

FIGURA 13. Página principal de “Quienes Somos”

1. El encabezado que se muestra en la figura 13. Fue realizado en corel photo paint

11. de color verde, en donde se muestra el logo de la Universidad del lado

izquierdo en el centro de este podemos observar como fondo un mapa de la

República Mexicana resaltando el Estado de Puebla, del lado derecho se

colocaron tres fotografías tomando en cuenta las instalaciones de la Universidad

pero con pequeño efecto que se les hizo con el borrador para evitar que la

imágenes no se vieran tan cuadradas y entrelazadas.

2. Ahora iremos explicando la elaboración de este Menú. Para su diseño utilizamos

la herramienta multimedia, Macromedia Flash MX Professional 2004, (Ver Fig.

14).

1

2

3

4

38

FIGURA 14. Aplicación de Macromedia Flash MX Professional 2004

Para abrir esta herramienta nos vamos a Botón Inicio → Todos los programas →

Macromedia → Macromedia Flash MX 2004. Abrimos un Nuevo Documento de Flash,

tendremos un escenario con un área de trabajo de 900 x 70.5 píxeles; abrimos tres

capas con la herramienta (Ver fig. 15). Las capas o layers son como hileras o niveles

de contenido, que se posicionan una encima de otra, es posible nombrar, agregar,

eliminar o mover capas, también ocultarlas y/o bloquearlas. A través de la posición de

las capas, es posible localizar y manipular los contenidos dentro de ellas con más

facilidad. Teniendo las capas procederemos por rotularlas, es decir, les asignaremos

nombres acorde a su contenido, a la primer capa le pondremos el nombre de menú, la

segunda capa se llamará actions, y la tercera separador.

FIGURA 15. Botón “Insertar capa” de la sección de Capas

39

5.2 Diseño y Creación de la Base de los Botones

Comenzaremos a trabajar en la capa menú donde realizaremos un rectángulo que será

la base de los botones, que posteriormente hablaremos, lo realizaremos con la

herramienta , esta herramienta posee un modificador, que es para el redondeado de

las esquinas. Al ser seleccionada esta herramienta, el apartado de opciones de la barra

de herramientas, aparecerá esta opción , la cual tiene un rango de redondeo que va

desde 0 a 999. Es posible crear círculos o cuadrados perfectos manteniendo

presionada la tecla SHIFT mientras se dibuja la figura. Al presionar la opción de

redondeo de esquinas se observara un cuadro de diálogo (Ver fig. 16) donde le

daremos un valor de 15.

FIGURA 16. Cuadro de Diálogo “Configuración de Rectángulo”

Enseguida, se le dará un color de fondo, este lo seleccionaremos a través del

mezclador de colores (Ver Fig. 17), este mezclador especifica un color ya sea para

relleno o línea de contorno de un objeto. Mediante este panel es posible determinar un

tipo de relleno, ya sea sólido, degradado lineal, degradado radial y relleno con imagen

de mapa de bits, en nuestro caso utilizaremos el degradado lineal. Es posible hacer un

cambio de color para rellenos o líneas de contorno mediante el código RVA (Rojo,

Verde y Azul), el código hexadecimal o seleccionando una muestra del espectro de

colores. En este panel se puede ajustar la propiedad Alpha, (que en este caso

hablaremos más adelante), u opacidad del color seleccionado, enseguida mostramos

algunos componentes de este panel.

40

FIGURA 17. Panel del Mezclador de Colores

Como se podrá observar para crear el efecto el color de relleno de la barra utilizamos

los proxys de color ubicados en diferentes partes de lo que será el ancho de la barra,

utilizamos 4, cada uno de estos proxys tiene un color independiente. El tamaño de esta

barra o rectángulo será de 900 x 37 píxeles. Realizado lo anterior obtendremos algo

como se muestra en la figura 18.

FIGURA 18. Barra de fondo de los Menús

5.3 Diseño y Creación de los Botones

Como siguiente punto, nos encaminaremos a crear los botones. Estos tendrán el

aspecto, en su estado de reposo, el mismo color de relleno de la barra de fondo y al

41

pasar sobre el botón, este tendrá un color mas claro y se desplegarán unos submenús

si en este caso los tuviesen.

Iniciaremos a crearlos:

1. Nos situamos en la capa menú, y en un solo fotograma también crearemos los

botones que los llamaremos respectivamente según el nombre, realizaremos un

rectángulo con el tamaño aproximado que tendrá el texto; para su fácil manejo y

que posteriormente iremos modificando, los convertiremos en símbolos; los

símbolos son elementos reusables de una película, que pueden ser desde un

simple texto o figura hasta un clip de video que haya sido importado; para

convertir un objeto presente en el escenario en símbolo, es necesario seleccionar

previamente el o los objetos que lo compondrán, después abrir el menú

Insertar/Convertir a símbolo o presionar F8. Una vez hecho esto, aparecerá un

cuadro de diálogo (Ver Fig. 19) en el cual se especifican el nombre del símbolo,

su comportamiento y su punto de registro, en nuestro caso, su comportamiento

será de tipo Clip de Película también conocidos MovieClips, son animaciones

que tienen su propia línea de tiempo principal. Los controles interactivos y

sonidos, funcionan en este tipo de comportamiento. Pueden contener dentro de

ellos mismos a otros clips de películas, gráficos o botones haciendo de esta

manera objetos más complejos e interacción superior.

FIGURA 19. Cuadro de Diálogo “Convertir en símbolo”

42

2. Abrimos el símbolo del botón inicio, este lo encontraremos en la Biblioteca todos

los símbolos, archivos de audio, mapas de bits, videos y componentes del

documento se encuentran en la Biblioteca, así como los símbolos gráficos,

botones y clips de películas son albergados en ésta automáticamente cuando

son creados. Para abrir la Biblioteca hay que seleccionar el menú

Ventana/Biblioteca o la combinación de teclas CTRL+L, y abrimos el símbolo,

creamos 4 capas; la primera la llamaremos button, la segunda movie, la tercera

text, por último actions (Ver Fig. 20).

FIGURA 20. Capas de los botones

3. En la capa text ponemos el texto del nombre del botón con tipo de fuente

“Verdana” y un tamaño de 11, con la herramienta de texto , automáticamente

se insertará un fotograma clave en la sección de la línea de tiempo, un

fotograma clave es equivalente a un cuadro en un film, estos determinan la

duración de la película; e insertamos un fotograma clave hasta el fotograma 15

(Ver Fig. 21), para insertar el fotograma nos situamos en el fotograma 15 damos

clic con el botón derecho del Mouse y elegir el comando Insertar fotograma

clave.

43

FIGURA 21. Fotograma de la capa text

4. Enseguida en la capa button creamos un rectángulo del tamaño ajustado al

nombre del botón de largo y de ancho igual que la barra (37 píxeles) y

realizamos el mismo procedimiento como en el punto anterior, de ampliar el

fotograma clave hasta el fotograma 15, adjuntado el texto al botón quedara de la

siguiente manera (Ver Fig. 22).

FIGURA 22. Botón Inicio

5. Nos ubicamos en la capa movie, dejamos vacío el fotograma 1, nos ubicamos en

el fotograma 2, y realizamos un rectángulo igual de dimensiones que el botón; y

este será su estado de reposo, recomendamos que se copie el rectángulo del

botón y se pegue en la capa movie, para que no haya diferencia de dimensiones,

enseguida copiamos el mismo rectángulo en el fotograma 7 pero con la

diferencia de que tendrá un color mas claro y esto lo podemos realizar con ayuda

del mezclador de colores; esto con el fin de diferenciar el aspecto del botón

cuando se pase con el mouse sobre él (Ver Fig. 23).

44

FIGURA 23. Diferencia de estados del botón, izquierdo cuando

se pasa sobre el, derecha en reposo

Teniendo estos fotogramas realizaremos una interpolación por forma, esta

interpolación puede mover, rotar, escalar y cambiar atributos a los objetos; este

tipo de animación puede transformar de una figura a otra totalmente diferente en

nuestro caso simplemente optará por cambiar de color, para hacer esta

animación nos ubicamos en el primer fotograma clave, en el panel de

propiedades esta el comando Animar y elegimos la opción Forma, lo mismo

hacemos en el fotograma 7, se observará que los fotogramas son verdes y

aparecerá una flecha (Ver Fig. 24), enseguida en la misma capa se insertará otro

fotograma clave en el fotograma12 y se animará de igual manera.

FIGURA 24. Animación por forma

6. Por último, en la capa Actions creamos las acciones para este botón, nos

ubicamos en el primer fotograma y en el panel de acciones le damos la

45

instrucción “ stop(); ” , lo mismo hacemos con el fotograma 7, esto con el fin de

detener la película en puntos específicos y en el fotograma 12 utilizaremos una

instrucción de ActionScript, “gotoAndStop(1);” ; es un Control de instancias

mediante comportamientos (una instancia es una copia de un símbolo); puede

utilizar los comportamientos para controlar instancias de clips de película y de

gráficos de un documento, para organizar el orden de apilamiento en un

fotograma, así como para cargar, descargar, reproducir, detener, duplicar o

arrastrar un clip de película o vincular a una URL. El propósito de la instrucción

“gotoAndStop (1);” es que detiene un clip de película; opcionalmente mueve la

cabeza lectora a un fotograma concreto, en este caso en el fotograma 1.

Dicho los pasos anteriores, la sección de los fotogramas quedará como se muestra en

la figura 25.

FIGURA 25. Capas terminadas

7. Nos regresamos al escenario, dando clic en el indicador de la parte superior

izquierda de nuestro escenario y damos clic en Scene 1 (Ver Fig. 36a); nos

situamos en la capa separador agregamos una línea al termino del botón que

actuará como separador entre botones (Ver Fig. 26b).

46

FIGURA 26a. Ubicación de escena FIGURA 26b. Ubicación de separador

Los demás botones se fueron elaborando de forma similar.

3. El espacio que tiene la figura 27 es el que ocupa el contenido de cada página

4. Los anuncios que se encuentran en la parte izquierda de la figura 27 están

elaborados en varios programas como macromedia FLASH MX profesional.

El formato general de cada página es el que se muestra en la figura 27

FIGURA 27. Formato general de Páginas

47

Intro de oferta educativa

Logotipo girando ligas

FIGURA 28. Intro de oferta educativa

Introducción: Aquí primeramente se desprende el logotipo de la utim formando una

semi-vuelta donde va apareciendo los nombres de las carreras con sus respectivos

logotipos y botones, en esta animación el logo nunca se queda estático, siempre realiza

una semi-vuelta en medio del circulo que lo acompaña.

Ligas: Las ligas son el nombre de cada carrera con su respectivo logotipo ya que al

pasar el cursor por encima de ellos aparece una manita que si le das clic a una de ellas

los conlleva a la interfaz seleccionada.

Botones: Los botones en esta etapa solo se encuentran brillando en la pantalla.

Fondo: El fondo de esta animación permanece el blanco.

48

Página de Sistemas Informáticos

FIGURA 29. Página de la Carrera de Sistemas Informáticos

1. En esta página podemos observar otro encabezado con el único detalle de

que esta pertenece a la carrera de Sistemas Informáticos, y se muestra en la

parte izquierda el logo de la carrera, a este logo se les hizo algunos arreglos

como el nombre que aparecía se cambio de INFORMATICA a TIC y se le

quito el contorno, en la parte de centro se muestra el mapa, y se colocó el

nombre de la carrera centrado y del lado derecho se colocaron tres

fotografías. En este se tomaron en cuenta instalaciones y alumnos que se

encuentran tomando clases. Este tipo de encabezado se diseño para todas

las carreras teniendo en cuenta que solo se cambiarán los logos, el nombre

1

2

3 5

4

49

de la carrera y las fotografías. El efecto a las fotografías también se les dio

con el borrador de la barra de herramientas de Corel Photo Paint 11.

2. La elaboración de los botones de éste menú se realizaron como el punto 2 de

la figura 27, salvo que en esta situación, los botones tienen el nombre de los

aspectos importantes dentro de la carrera de Tecnologías de la Información y

comunicación.

3. Una vez teniendo la plantilla se colocó toda la información en Dreamweaver

de cada carrera o departamento. Como vemos en este caso se muestra la

bienvenida de la carrera de sistemas Informáticos, objetivo, campo de trabajo,

plan de estudios, plantilla, áreas de estudios y proyectos productivos(solo si la

carrera tiene se pondrá ). Posteriormente, en las demás páginas de las otras

carreras se visualiza algo similar.

4. En la parte del centro de la página se muestra un ejemplo de la imagen de

fondo que se inserto en cada página

5. En la parte derecha de la página se muestra un ejemplo de cómo se

visualizan los anuncios y el pequeño script del calendario dentro de cada

página.

5.4 Mapa de la UTIM

FIGURA 30. Mapa de la Utim

50

La figura 30 solo la prediseñamos ya que existe una anterior pero de gran tamaño, lo

que hicimos fue reducirla para que se visualizara en el nuevo formato de página.

5.5 Localización de la UTIM

Ruta de

Atlíxco

Carretera

modificada

Nueva especificación de ruta

FIGURA 31. Localización de la Universidad

Esta animación solo la prediseñamos, ya había una versión anterior donde se mostraba

claramente como tomar la ruta desde muy cerca del IMSS viniendo de Atlixco, lo único

que le cambiamos fue el diseño de la carretera y le agregamos la ruta en como llegar

desde el Estado de Morelos a la Universidad.

51

Cuenta con puntos clave como las fotografías del IMSS, ELEKTRA, CFE, IGLESIAS,

PUENTE, y también cuenta con nombres de las principales calles de Izúcar de

Matamoros.

Diseño de animación en instalaciones UTIM

FIGURA 32. Instalaciones de Universidad

Esta fue una de las animaciones más complicadas ya que tuvimos que hacer

variadas películas y proyectarlas cuando el cursor sea puesto encima de cada una

de las fotografías, también colocamos una imagen de fondo para que cuando el

cursor no este encima de ninguna foto, esta permaneciera estática y mostrándose.

La fotografía que esta estática es la entrada de la Universidad, las demás se fueron

escogiendo por categorías ya que colocamos las que representan las instalaciones

de la Universidad.

52

Las fotografías que se encuentran en la parte de arriba tienen un efecto especial ya

que no se alcanzan a visualizar al 100 por ciento pero cuando pasa el cursor sobre

ellas se pone al cien por ciento y además proyecta la imagen elegida a un tamaño

mucho mayor a lo que esta, junto con las demás fotografías.

Imagen a proyectar imagen proyectada

FIGURA 33. Animación de las instalaciones

En la (figura 19), muestra la proyección de una fotografía una vez que el Mouse este

sobre ella. Cada fotografía cuenta con un margen específico y nombre de cada foto.

Efecto de goma en photo-paint

FIGURA 34. Márgenes de las fotografías de la Utim

53

Como hemos mencionado anteriormente estas fotografías fueron escogidas para

representar algunas de las instalaciones de la Universidad, dichas fotos fueron

proporcionadas por el Departamento de Prensa de esta misma Universidad. Aquí se

muestra solo un árbol de rutas en el cual se van mostrando las pantallas que eliges en

principal. Intro

Principal

Quienes somos Oferta educativa Servicios escolares Vinculación Finanzas Incubadora Intranet Ley Prensa

Index Intro index index Index nueva página Ley

Historia, valores, organigrama, directorio, instalaciones, localización utim , mapa de la utim

Tic, Agrobiotecnología, tecnología de alimentos, contaduría, administración

Proceso de admisión, calendario escolar, becas, servicios, centro de información prensa

Servicio social , estadía, bolsa de trabajo, convenios, visitas industriales, servicios externos, educación, vamos a la utim, plantilla

Información financiera

Objetivo, requisitos, servicios, informes

FIGURA 35. Mapa del Sitio

5.6 Intranet

La Universidad cuenta con su Intranet, que abarca sobre la Certificación ISO

9001:2000, manuales para las diferentes áreas tales como Bases de Datos,

Programación y otras áreas; algunos paquetes y utilerías para descargar, y otros

aspectos en general. Esta a su vez provee de cierta seguridad que permite solo el

acceso autorizado. Estas páginas solo podrán ser vistas por aquellos que posean un

54

nombre de usuario y su contraseña, es decir, la Intranet posee un sistema de

Autentificación tal como se muestra en la figura 36.

FIGURA 36. Esquema del Sistema de Autentificación

Este diagrama muestra como es el proceso, inicia con la página donde se pide el

Usuario y Contraseña (Ver Fig. 37); para acceder a la aplicación segura, estos datos se

envían hacia un script de autentificación que comprueba los datos. Si los datos son

correctos se redirecciona el navegador hacia las páginas seguras, en caso contrario se

manda a la página inicial de introducción de datos mostrando un texto el cual les afirma

que los datos son incorrectos.

FIGURA 37. Página de acceso de datos

55

Si los datos son correctos el navegador se redireccionará a las páginas seguras, en

este caso mandará hacia la página principal de la Intranet (Ver Fig. 38).

FIGURA 38. Página principal de la Intranet

56

6. RESULTADOS

Los resultados obtenidos al término de la estadía con las páginas fueron los siguientes:

� Personalmente pudimos obtener mayor comunicación con el personal de la

institución y mejor desempeño laboral como primer paso para el trabajo que nos

espera. Mejor manejo de los programas de diseño que se ocuparon.

� Trabajar en equipo teniendo una buena comunicación para lograr un buen

proyecto, sabiendo que cada opinión es indispensable y debe de ser tomada en

cuenta.

� La realización de un buen proyecto y la satisfacción de terminarlo en el tiempo

establecido.

� En la institución se obtuvo una mejor presentación con la página y mayor

información que no se había dado a mostrar años atrás.

� La actualización de toda la información ya que sabemos que esta va cambiando

con el tiempo.

� Mejor acceso a la información relevante de la Universidad, además de mayor

seguridad en ella.

57

7. CONCLUSIONES

Al término de este proyecto podemos decir que este fue concluido con satisfacción y

buen trabajo por toda la Universidad.

Nos dimos cuenta que cada día se nos presentan retos y debemos enfrentarlos

dándoles la solución que nos de más satisfacción.

Lo importante aquí es lograr un buen proyecto con la satisfacción de nosotros y de la

institución, el proyecto debe ser del agrado tanto de los directivos como del rector de la

misma. No obstante nosotros mismos debemos estar satisfechos con nuestro trabajo,

con la seguridad de que aportamos lo mejor de nuestros conocimientos. En pocas

palabras nuestra meta es realizar un buen papel, o aun mejor rebasar el límite, de lo

que se planteó en un principio.

Se logró montar el sitio Web, la participación de los directivos, personal docente y

administrativo fue muy valiosa para el desarrollo del trabajo, al mismo tiempo en las

conversaciones con cada uno de ellos surgieron ideas y propuestas que fueron

tomadas en cuenta.

Respecto a la parte técnica del trabajo, la experiencia que se obtuvo fue muy importante

para el desarrollo profesional y personal.

Dando así un buen resultado para los directivos y uno mismo teniendo en cuenta que

los retos son un paso más para el éxito de nuestra carrera.

58

8. REFERENCIAS

Bibliografía:

1. Corel Draw 11, Guía de iniciación. García Neñes, P; Editorial Anaya Multimedia

y Anaya Interactiva

2. Dreamweaver MX 2004 (Guía practica), Peña de San Antonio, Oscar; Anaya

Multimedia y Anaya Interactiva.

3. FLASH MX, Lázaro Issi Camy.

4. Navegando en Internet. Macromedia. Dreamweaver MX, Francisco Pascual

González.

5. P.A.T Julio Heberto Gonzáles Morales. Guía de Macromedia de Flash MX.

Colima,Col. Septiembre 2004.

1. http://www33.brinkster.com/hware/resumen.asp

2. http://html.rincondelvago.com/flash.html

3. http://es.Wikipedia.org/wiki/Macromedia_Flash

4. http://es.wikipedia.org/wiki/World_Wide_Web

5. http://www.desarrolloweb.com/manuales/37

59

8. LISTA DE FIGURAS

1. Entorno de la estructura de corel photo paint 11..................................................12

2. Ventana de inicio de Flash MX Professional 2004...............................................18

3. Entorno de trabajo Flash MX Professional 2004................................................18

4. Barra de herramientas de Flash...........................................................................19

5. Panel de propiedades introducción......................................................................22

6. Línea de tiempo....................................................................................................23

7. Entorno de trabajo de Dreamweaver....................................................................26

8. Ventana para importar una imagen......................................................................31

9. Ventana para importar una animación de Flash..................................................32

10. Ventana para insertar una tabla...........................................................................33

11. Intro de la página..................................................................................................35

12. Página principal.................................................................................................…36

13. Página principal de “Quienes Somos”..................................................................37

14. Aplicación de Macromedia Flash MX Professional 2004......................................38

15. Botón “Insertar capa” de la sección de Capas....................................................38

16. Cuadro de Diálogo “Configuración de Rectángulo”.............................................39

17. Panel del Mezclador de Colores...........................................................................40

18. Barra de fondo de los Menús................................................................................40

19. Cuadro de Diálogo “Convertir en símbolo”...........................................................41

20. Capas de los botones...........................................................................................42

21. Fotograma de la capa text....................................................................................43

22. Botón Inicio...........................................................................................................43

23. Diferencia de estados del botón, izquierdo cuando se pasa sobre el, derecha en

reposo...................................................................................................................44

24. Animación por forma.........................................................................................…44

25. Capas terminadas.................................................................................................45

26. a) Ubicación de escena , b) Ubicación de separador...........................................46

60

27. Formato general de Páginas................................................................................46

28. Intro de oferta educativa.......................................................................................47

29. Página de la Carrera de Sistemas Informáticos...................................................48

30. Mapa de la UTIM..................................................................................................49

31. Localización de la Universidad.............................................................................50

32. Instalaciones de Universidad................................................................................51

33. Animación de las instalaciones............................................................................52

34. Márgenes de las fotografías de la UTIM..............................................................52

35. Mapa del Sitio......................................................................................................53

36. Esquema del Sistema de Autentificación.............................................................54

37. Página de acceso de datos..................................................................................54

38. Página principal de la Intranet..............................................................................55

61

10. GLOSARIO

A

Animación:

Animación es el resultado del proceso de tomar una serie de imágenes individuales y

concatenarlas en una secuencia temporizada de forma que den la impresión de

movimiento continuo. La animación es especialmente apropiada en Visualización de

Información para representar el cambio en el transcurso del tiempo y más

específicamente para: Representar efectivamente la causalidad. Los actos que

expresan comunicación o flujo. La reorganización o reestructuración se adapta bien a la

animación, siempre que la complejidad de las interacciones no sea muy alta.

@ (Arroba):

Signo que forma parte de las direcciones de correo electrónico de forma que separa el

nombre del usuario de los nombres de dominio del servidor de correo (ejemplo

jtejeira@sinfo.net). Su uso en Internet se origina en su frecuente empleo como

abreviatura de la preposición Inglesa at (en).

ASP (Página de Servidor Activo):

Tipo especial de página HTML la cual contiene unos pequeños programas, scripts,

ejecutables en servidores Microsoft Internet Information Server antes de ser enviados al

usuario para su visualización en forma de página HTML. Habitualmente esos programas

realizan consultas a bases de datos y los resultados de esas consultas determinan la

información que se envía a cada usuario específico. Los archivos de este tipo llevan el

sufijo .asp.

62

B

Bit:

Unidad mínima de información que puede ser transmitida o tratada. Procede del inglés,

Binary Digit o Dígito Binario, y puede tener un valor de 0 (cero) ó 1 (uno).

BMP:

El formato BMP (Bit Map) es el formato de las imágenes en bitmap de Windows.

Aunque muy extendido, tiene la dificultad de la escasa compresión que realiza en los

archivos, por lo que éstos ocupan rápidamente casi un 1 Mb.

C

Codificación:

Proceso en que los datos se traspasan a códigos en lenguajes de programación o

protocolos de comunicación con el objetivo de interpretar electrónicamente la

información o transmitirla a través de un medio electrónico. Aplicación de las reglas de

un código.

Código:

Las reglas que se usan para convertir una configuración en bits en caracteres

alfanuméricos. El proceso de recopilación de instrucciones de computación en forma de

un programa de computación. El programa de computación actual. Una lista de

comandos que deben ser ejecutados sin la intervención del usuario. Un lenguaje de

código, como PHP es un tipo de programación en el cual se puede crear un

determinado código.

63

CSS:

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal

de ordenador usado para definir la presentación de un documento estructurado escrito

en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es

el encargado de formular la especificación de las hojas de estilo que servirá de estándar

para los agentes de usuario o navegadores.

D

Diseño Web:

Actividad que consiste en la planificación, diseño e implementación de sitios Web y

páginas Web. Se requiere tener en cuenta cuestiones tales como navegabilidad,

interactividad, usabilidad, arquitectura de la información y la interacción de medios

como el audio, texto, imagen y video.

E

Editor:

Programa que permite insertar o modificar la información en un archivo permanente de

la computadora. Por ejemplo programas de edición HTML son: Netscape, Macromedia

Dreamweaver, etc.

Estilo lógico de HTML:

El estilo lógico se refiere a la lógica del documento: cabeceras, párrafos,... no se

preocupa de la apariencia final, sino de la estructura del documento.

64

Estilo físico de HTML:

No se preocupa de la estructura del documento, sino por la apariencia final: párrafos

con un cierto tipo de letra, tablas con un determinado color de fondo.

F

Fotograma:

Se denomina fotograma a cada una de las imágenes impresionadas químicamente en

la tira de celuloide del cinematógrafo. Proyectadas a una cadencia de 24 por segundo

producen la ilusión de movimiento. Esto se debe a la incapacidad del cerebro de ver

estas imágenes como fotografías separadas. Esta persistencia en la visión hace que el

cerebro mezcle estas imágenes dando la sensación de movimiento natural. En Flash los

fotogramas clave permiten producir animaciones sin tener que dibujar cada fotograma,

facilitan la creación de animaciones. Puede cambiar la longitud de una animación

interpolada arrastrando un fotograma clave en la línea de tiempo.

G

GIF:

El formato GIF (Graphics Interchange Format), es el formato de gráfico Web más

extendido. Contienen sólo 256 colores, ofrece una satisfactoria compresión de

imágenes sin pérdida de datos, gracias a que posee la capacidad de aparentar más

tonos de color usando una técnica de promediación de colores que consiste,

básicamente, en obtener un color intermedio que no esté en su tabla, colocando juntos

varios píxels de colores que sí están en la tabla. Además, este formato usa un sistema

de compresión sin pérdida llamado LZW (Lemple - Zif - Wellch, el mismo que utiliza el

ZIP), que hace que se obtengan ficheros muy pequeños. Otro aspecto a destacar es

65

que los archivos GIF pueden contener un área transparente y varios fotogramas para

animación.

Gráfico:

Representación de datos numéricos, en forma de líneas o dibujos, y en los que se

muestra de una forma gráfica la relación que dichos datos guardan entre si.

H

Hardware:

Se denomina hardware o soporte físico al conjunto de elementos materiales que

componen un ordenador. En dicho conjunto se incluyen los dispositivos electrónicos y

electromecánicos, circuitos, cables, tarjetas, armarios o cajas, periféricos de todo tipo y

otros elementos físicos.

Hipertexto:

Cualquier documento que contiene vínculos con otros documentos de forma que al

seleccionar un vínculo se despliega automáticamente el segundo documento.

Hipervínculo:

Vínculo existente en un documento hipertexto que apunta o enlaza a otro documento

que puede ser o no otro documento hipertexto.

HTML:

Lenguaje utilizado para crear páginas de hipertexto y gráficos los cuales forman los

contenidos de la WWW.

66

HTTP:

Es el protocolo de la Web (WWW), usado en cada transacción. Las letras significan

Hyper Text Transfer Protocol, es decir, protocolo de transferencia de hipertexto. El

hipertexto es el contenido de las páginas web, y el protocolo de transferencia es el

sistema mediante el cual se envían las peticiones de acceder a una página web, y la

respuesta de esa web, remitiendo la información que se verá en pantalla. También sirve

el protocolo para enviar información adicional en ambos sentidos.

Icono:

Símbolo gráfico que representa una determinada acción a realizar por el usuario

(ejecutar un programa, leer una información, imprimir un texto, etc.) o un documento, un

dispositivo, un estado del sistema, etc.

Imagen vectorial:

Este tipo de imagen (por oposición a imagen Bitmap) se calcula con base en sus

dimensiones y puede reducirse o agrandarse sin pérdida de calidad.

Imagen de bitmap:

Una imagen basada en píxeles (.BMP).Su calidad disminuye cuando se agranda la

imagen.

Internet:

Es una forma de establecer comunicación entre distintos tipos de redes. Para ello,

dentro de cada red se escoge un computador que actúe como Gateway, que se

67

preocupa de traducir el lenguaje interno de la red en el lenguaje de Internet, llamado

TCP/IP.

Intranet:

Una red de empresa privada basada en tecnologías Internet: Web, e-mail, etc. Cuando

se accede a ella desde el exterior, se convierte en una extranet.

IP:

Internet Protocol. El protocolo que manipula la entrega de paquetes en las redes

TCP/IP.

J

JPEG:

El formato JPEG (que suele usar nombres de archivo con las extensiones *.JPEG o

*.JPG) JPEG es un formato de compresión con pérdida, esto quiere decir que, al

guardar una imagen en este formato, parte de la información que contiene esa imagen

se reduce, es decir, ésta pierde un poco de calidad, aunque, generalmente, esta

pérdida de calidad es imperceptible al ojo humano. Con ello se consigue reducir el

tamaño del archivo. Por otro lado, el formato JPEG permite elegir el nivel de compresión

que queremos asignar a un archivo, de modo que podamos decidir qué punto

deseamos entre una mayor calidad de imagen (y, por tanto, un mayor tamaño de

archivo) y una imagen de baja calidad (con un menor tamaño de archivo).

JavaScript:

Es un lenguaje interpretado orientado a las páginas Web, con una sintaxis semejante a

la del lenguaje Java. Un lenguaje de scripting usado comúnmente para construir

68

páginas Web. Los programadores usan JavaScript para hacer las páginas Web más

interactivas; por ejemplo, para mostrar formularios y botones. JavaScript puede usarse

junto con Java, pero son dos lenguajes técnicamente distintos. No es necesario tener

Java instalado para que JavaScript funcione correctamente.

N

Navegador:

Un navegador web, hojeador o web browser es una aplicación software que permite al

usuario recuperar y visualizar documentos de hipertexto, comúnmente descritos en

HTML, desde servidores web de todo el mundo a través de Internet. Esta red de

documentos es denominada World Wide Web (WWW) o Telaraña Mundial. Los

navegadores actuales permiten mostrar y/o ejecutar: gráficos, secuencias de vídeo,

sonido, animaciones y programas diversos además del texto y los hipervínculos o

enlaces.

P

Píxel:

El píxel (del inglés picture element, o sea, "elemento de la imagen") es la menor unidad

en la que se descompone una imagen digital, ya sea una fotografía, un fotograma de

vídeo o un gráfico. La calidad de una imagen depende del número de píxeles por

pulgada que la constituyen.

Plataforma:

Conjunto de hardware y software destinado a un uso determinado y no compatible con

otras plataformas. Denominación que se les da a diferentes sistemas operativos, por

ejemplo, Windows, Macintosh, Unix, etc.

69

PNG:

Las siglas PNG significan Portable Network Format. Las características de este formato

son bastante prometedoras. Además es un formato totalmente libre, de modo que

cualquiera puede implementarlo en sus programas. La gran desventaja que, al ser un

formato relativamente joven, es completamente irreconocible por navegadores antiguos.

Programa:

Un conjunto de órdenes para un ordenador. Un programa puede estar formado por

apenas unas pocas órdenes (por ejemplo, uno que sume dos números) o por varios

miles de órdenes (como un programa de gestión completo para una empresa). Cuando

se trata de un programa ya terminado que se compra, se suele hablar de una Aplicación

Informática. Los programas se deben escribir en un cierto lenguaje de programación.

Los lenguajes de programación que se acercan más al lenguaje humano que al del

ordenador reciben el nombre de "lenguajes de alto nivel" (como Pascal); los que se

acercan más al ordenador. Instrucciones de computación estructuradas y ordenadas

que al ejecutarse hacen que una computadora realice una función particular.

Plugin:

Un plugin (o plug-in) es un programa de ordenador que interactúa con otro programa

para aportarle una función o utilidad específica, generalmente muy específica. Los

plugins típicos tienen la función de reproducir determinados formatos de gráficos,

reproducir datos multimedia, codificar/decodificar e-mails, filtrar imágenes de programas

gráficos...

Plugins:

Programas que se agregan a un navegador del WWW los cuales realizan funciones

determinadas.

70

Producen la visualización de archivos multimedia y dan soporte a archivos gráficos no

estándares con el visualizador.

S

Servidor:

Un servidor en informática o computación es: *Una aplicación informática que realiza

algunas tareas en beneficio de otras aplicaciones llamadas clientes. Algunos servicios

habituales son los servicios de archivos, que permiten a los usuarios almacenar y

acceder a los archivos de un ordenador y los servicios de aplicaciones, que realizan

tareas en beneficio directo del usuario final. Este es el significado original del término.

Es posible que un ordenador cumpla simultáneamente las funcione.

Shockwave:

Programa que permite hacer presentaciones de multimedia (con audio, video, etc) a

través del Web.

Software:

Se refiere a todas las aplicaciones o programas que se encuentran funcionando en

cualquier equipo computacional o de comunicación. Las aplicaciones o Software más

común es desarrollado con fines administrativos (Procesadores de palabras, hojas de

cálculo, contabilidad, entre otros).La parte "que no se puede tocar" de un ordenador: los

programas y los datos.

71

T

Tags:

El lenguaje HTML se escribe utilizando identificadores, también llamados tags, término

que proviene del inglés "etiqueta".- Estos identificadores son órdenes que das al

navegador y que él interpreta para mostrar la página Web tal y como deseas. Cada

identificador es una orden y puede indicar atributos del texto, posición de imágenes,

hipervínculos, así como cualquier otra propiedad de la página.

TCP:

Es el protocolo de transferencia entre computadores, básicamente establece que la

información debe ser dividida en fragmentos o "paquetes" que se propagan de manera

separada y luego se juntan en el destino.

TCP/IP:

Es el protocolo común utilizado por todas las computadoras conectadas a Internet, de

manera que éstas puedan comunicarse entre sí. El TCP / IP es la base del Internet que

sirve para enlazar computadoras que utilizan diferentes sistemas operativos, incluyendo

PC, minicomputadoras y computadoras centrales sobre redes de área local y área

extensa. TCP / IP fue desarrollado y demostrado por primera vez en 1972 por el

departamento de defensa de los Estados Unidos, ejecutándolo en el ARPANET una red

de área extensa del departamento de defensa.

TIFF:

El formato TIFF, que corresponde a las siglas Tagged-Image File Format, se utiliza para

intercambiar archivos entre distintas aplicaciones y plataformas. Los gráficos en este

72

formato conservan muy bien los detalles de la imagen pero, al igual que el formato

BMP, son enormemente voluminosos.

U

URL:

Universal Resource Locutor: Localizador Universal de Recursos. Sistema de

identificación en la red, es decir, la dirección en Internet de un site determinado.

Abreviación de "Uniform Resource Locator" o, en español, "Localizador de Recursos

Uniforme". Es el formato usado para describir la dirección de cada página en la WWW.

En la práctica, es lo que Ud. teclea como "http://..." o "ftp://...".

V

Video clip:

Filmación en vídeo con que se acompaña o se promociona una canción.

W

Web:

Es un servicio que ofrece un computador conectado a Internet.

X

XML:

Extensible Markup Language. Una versión redefinida de SGML. Se le ve como el

sucesor de HTML. Permite personalizar las etiquetas que describen la presentación y el

tipo de los elementos de datos. Es muy útil para los sitios que mantienen grandes

73

volúmenes de datos y para una intranet. Actualmente, sólo Microsoft Internet Explorer 5

y Netscape 6 ofrecen un soporte para XML.