Ejemplo de tesina

C

AR

O

IZ

U

S

EXC

ELEN CI

MEX ICO DE

A

A

UN

ARIA, FOR SIT TA L

EZ

ER IV

D E M A TA M

O

R

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

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.

CONTENIDO 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

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 1

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.

2

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, 3

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.

4

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.

5

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.

6

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.

7

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.

8

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 (@).

9

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.

10

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.

11

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 PHOTOPAINT 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

12

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.

13

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.

14

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.

15

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 16

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.

17

•

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

18

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).

19

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.

20

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..

21

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.

22

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.

23

•

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 24

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

25

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.

1

2 4 3

5

6 7

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. 26

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.

27

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.

28

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 29

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:

30

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.

31

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 navegador de él. Por ejemplo, si añadiera una película de flash necesita

el

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.

32

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

33

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.

34

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.

35

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 PHOTOPAINT.

36

Página de Quienes Somos

1 2 4 3

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).

37

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

38

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.

39

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

40

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”

41

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 se insertará

, automáticamente

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.

42

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).

43

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 44

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).

45

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

46

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.

47

Página de Sistemas Informáticos

1 2

3

4

5

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

48

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 49

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.

50

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.

51

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

52

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 Index

Servicios escolares

Intro

index

Vinculación

Finanzas

Incubadora

index

Intranet

Ley Prensa

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

53

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 54

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

55

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.

56

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.

57

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

58

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 59

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

60

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.

61

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.

62

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.

63

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 64

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. 65

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

66

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 67

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.

68

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.

69

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.

70

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

71

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

72

volĂşmenes de datos y para una intranet. Actualmente, sĂłlo Microsoft Internet Explorer 5 y Netscape 6 ofrecen un soporte para XML.

73