UN

ER IV

ARIA, FOR SIT TA L

EZ

MEX ICO DE

EXC

ELEN CI

AR

D E M A TA M

O
R

IZ

Eduardo Tenango Cadenas Nmero de control: 03292267 Miguel Angel Ruiz Aguilar Nmero de control: 03292243 Isabel Pastrana Lavana Nmero de control: 03292341 Angela Gonzlez Olivar Nmero de control: 03292125 Proyecto Creacin de la Pgina Web de la UTIM Empresa Universidad Tecnolgica de Izcar de Matamoros Como requerimiento parcial para obtener el ttulo de Tcnico Superior Universitario en INFORMTICA Asesor Interno Ing. Sergio Valero Orea Asesor Externo Lic. Maria del Pilar Gonzlez Arellano

Izcar de Matamoros, Pue., Agosto del 2005

DEDICATORIAS

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

Dedicamos tambin este proyecto en especial a nuestros padres, que nos ayudaron con sus consejos, en lo econmico 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
Pgina

RESUMEN....................................................................................................1 INTRODUCCIN..........................................................................................3 1. ANTECEDENTES.....................................................................................5 2. JUSTIFICACIN.......................................................................................7 3. OBJETIVOS..............................................................................................8 3.1 General................................................................................................8 3.2 Especficos ..........................................................................................8 4. MARCO TERICO ...................................................................................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 Pgina Principal.................................................................................36 5.2 Diseo y Creacin de la Base de los Botones...................................39 5.3 Diseo y Creacin de los Botones.....................................................40 5.4 Mapa de la UTIM ...............................................................................49 5.5 Localizacin 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 creacin de la pgina Web de la Universidad Tecnolgica de Izcar de Matamoros, se llev a cabo recopilando informacin, a travs de entrevistas, revisin de documentos, informes, gacetas informativas, toma de fotos, entre otros; a pesar de muchos contratiempos; en algunos casos se les tuvo que mandar algn memorndum a los diferentes departamentos para que se nos facilitara la informacin. Para optar que informacin bamos a manejar solicitbamos 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 realizacin de este proyecto. Para la elaboracin de este proyecto utilizamos herramientas multimedia como Macromedia Flash MX Professional 2004, Macromedia Dreamweaver MX Professional 2004 y de diseo, tales como Corel Photo Paint 11. En el inicio de este proyecto se obtuvieron muchos problemas en el diseo de la pgina como: la falta de comunicacin entre asesores y alumnos, y ms que nada en la planeacin del diseo del sitio Web; por estos percances se perdieron das de trabajo. Otra contrariedad fue, que no tenamos equipo de trabajo necesario para laborar individualmente, slo contbamos con un equipo; no fue si no hasta semanas despus, que conseguimos equipos personales de cmputo. Para un correcto avance del proyecto acudamos con nuestros asesores constantemente, con el fin de hacer correcciones de ortografa y diseo, contenido y anexar alguna otra informacin nueva que existiera. Continuamente realizbamos respaldos de avances para evitar accidentalmente la prdida del trabajo, en otra computadora o en unidades extrables USB. Otro problema importante que consideramos, fue que no se encontraban los plugins de actualizacin de Flash en cada mquina para que se visualizaran o modificaran las animaciones creadas. Para ello se descargaron de Internet y fueron instalados para visualizar mejor nuestras pginas. Como ya se dijo, unos de los problemas que se nos presentaron fue el diseo de la pgina para esto se realizaron equipos en los cuales iban a trabajar en una sola 1

cosa, los equipos quedaron as: uno realizara los mens que llevaran las pginas, dos realizaran los encabezados de todas las pginas y el otro se encargara del diseo de la pgina principal con esto se solucion un problema y se tuvo mas comunicacin entre nosotros.

INTRODUCCIN

En la actualidad si las empresas, instituciones y

dependencias quieren ser

competitivos; lograr la satisfaccin de sus clientes y posicionarse arriba de la competencia, es importante crear programas innovadores de difusin y promocin del quehacer de cada institucin. Es por ello que la Universidad Tecnolgica de Izcar de Matamoros (UTIM) a travs de cada direccin de carrera se opt por la creacin de una pgina Web para cada una de ellas. Ya que sabemos que el Internet hoy en da es una alternativa para obtener informacin ms accesible no slo de Universidades sino tambin de muchos temas ms. La Universidad Tecnolgica de Izcar de Matamoros se cre en el ao de 1997, empez con cuatro carreras que fueron: Informtica (hoy Tecnologas de la Informacin y Comunicacin rea Sistemas Informticos), Procesos Agroindustriales, Produccin Alimentara (hoy Tecnologas de Alimentos), Proyectos Productivos y Comercializacin (hoy Administracin), Hoy en da esta Universidad cuenta con cinco carreras: Sistemas Informticos, Tecnologas de Alimentos, Agrobiotecnologa, Contadura y Administracin, cada una ellas contar con su pgina, donde se mostrar temas de importancia como su objetivo, plan de estudios, proyectos, campo de trabajo, reas de estudio entre otros puntos. La creacin de la pgina de esta Universidad se ha llevado acabo desde hace unos aos con el fin de que cada da se actualice y sea ms novedosa para los usuarios. Con nuestro proyecto la pgina de la Universidad tendr ms interactividad e informacin actualizada. Dentro de la pgina de la Universidad se encuentra la Intranet, 3

que antes accesaba cualquier usuario, para acceder a ella se solicitarn algunos datos, como Nombre de Usuario y Contrasea y slo as podrn acceder.

1. ANTECEDENTES

La Universidad Tecnolgica de Izcar de Matamoros ha traspasado fronteras, siendo hoy en da una competencia para muchas Universidades afines, sin embargo se presenta un problema, Cmo llevar hasta los estudiantes la oferta educativa de dicha Universidad?, Cmo 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, adems 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. Adems de sus instalaciones, infraestructura y proyectos. Adems de las opciones que tiene para seguir estudiando, como una alternativa la Universidad Tecnolgica de Izcar de Matamoros opt por este proyecto La creacin del sitio Web de la UTIM. Con el fin de llevar hasta los estudiantes una opcin ms para su preparacin. La Universidad ya contaba con un sitio Web desde hace algunos aos; con pginas no tan formales o al menos el diseo adecuado como Institucin Educativa, con este proyecto se pretende actualizar toda la informacin y mejorar el diseo, tener ms interactividad con el usuario. Algo nuevo que hay en la Universidad es la creacin de la Incubadora de Empresas que tiene fideicomisos con diferentes empresas privadas, este departamento tambin estar incluido en la pgina. Tambin se ha agregado al sitio Web una liga que mandar hacia la pgina de Ley de Transparencia donde contendr informacin acerca de reglamentos, normas y convenios de la Universidad.

La pgina anterior contaba con la Intranet donde contena informacin de Manuales, informacin sobre el sistema de certificacin de la calidad: Certificacin ISO 9001:2000, Software para Descargar y CIIES; ahora la pgina de la UTIM tendr un enlace hacia la pgina de la Intranet que se abrir en otra ventana y contar con un sistema de Autentificacin, es decir, ahora el usuario tendr que autentificarse, dando como datos un nombre de usuario, cosa que en la anterior pgina no suceda, conservar algunos datos anteriores y algunos otros ya actualizados, como por ejemplo en el Software para descargar.

2. JUSTIFICACIN

Para llevar a los estudiantes est oferta educativa se plane en la realizacin de las pginas 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 realizacin de la pgina Web de la Universidad Tecnolgica de Izcar de Matamoros. Se asignarn diseos para realizar la Pgina Web de la Universidad y cambiar la anterior, en la forma de cmo esta diseada y actualizar la informacin; para presentar en forma prctica la informacin, y as poner de forma laboral los conocimientos que hemos adquirido durante nuestra instancia en esta Universidad. Con el proyecto de la Pgina Web se busca aportar un beneficio a la Universidad Tecnolgica de Izcar de Matamoros y al mismo tiempo somos favorecidos en egresar de dicha Universidad con conocimientos en sentido prctico. 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 algn da sirva de ejemplo y sepa como actuar en das de problemas para que la solucin sea la ms eficaz y eficiente ante nuestros sucesores.

3. OBJETIVOS

3.1 General Crear la pgina Web de la Universidad, para difundir su oferta educativa, instalaciones, infraestructura, entre otros; utilizando herramientas multimedia como Macromedia flash, Dreamweaver Mx y de diseo como Corel Photo-Paint 11.

3.2 Especficos

Desarrollar en el proyecto las habilidades que se obtuvieron durante su periodo escolar y encuentre un perfil adecuado, para que su formacin futura sea la mejor en Universidades prximas. Manejo de nuevas y conocidas herramientas de multimedia para la incrustacin de imgenes. Desarrollar y poner en prctica los diferentes diseos que fueron establecidos en un primer plano. Comprender que el trabajo en equipo es una forma ms de salir de un problema y emprender negocios e ideas nuevas. Que el alumno demuestre que puede dar solucin a un problema informtico y puede aportar ideas con el fin de llegar a posibles soluciones. Conseguir la informacin previa y actualizada de las diferentes carreras con que cuenta la Universidad, as como sus diferentes reas. Poner la informacin adecuada y actualizada en la pgina Web. Entregar en el tiempo previsto el proyecto.

4. MARCO TERICO

4.1 Internet

Internet es un conjunto de redes, redes de computadoras y equipos fsicamente unidos mediante medios que conectan puntos de todo el mundo. Se presenta en muchas formas: desde cables de red local (varas mquinas conectadas en una oficina o campus) a cables telefnicos convencionales, digitales y canales de fibra ptica que forman las carreteras principales de la informacin. En Internet las comunicaciones concretas se establecen entre dos puntos: computadora personal y servidores. El fundamento de Internet es el TCP/IP, Protocolo de Transmisin que asigna a cada mquina que se conecta un nmero especfico, llamado nmero IP. El Protocolo TCP/IP sirve para establecer una comunicacin entre dos puntos remotos mediante el envo de informacin en paquetes.

Servicios de Internet El Correo Electrnico (e-mail): Es tal vez el principal servicio de Internet, y sin duda el de mayor importancia histrica. La primera parte de una direccin identifica habitualmente a la persona y a la segunda a la empresa u organizacin para la que trabaja, o al proveedor de Internet a travs del que recibe la informacin; y entre la letra arroba (@).

La World Wide Web Puede definirse bsicamente 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, grficos, video y otros) en Internet, las bases sobre las que se transmite la informacin. El aspecto exterior de WWW son las conocidas pginas Web. Las pginas de las WWW estn 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 pginas y los enlaces. Cada pgina Web tiene una direccin nica en Internet, en forma de URL. Un URL indica un tipo de documento (Pgina Web o documento en formato HTML). Html Es un Lenguaje para la definicin de estilos lgicos en documentos de hipertexto. La estructura bsica de un documento en html es: cabecera y cuerpo del documento. <html> <head> <body> Limitan el documento e indican lenguaje. Especifica el prlogo del resto del archivo, son pocas las tags que van por los marcadores del navegador e identificar el contenido de la pgina. Encierra el resto del documento, el contenido. que se encuentra escrito en este

En la estructura de la pgina podemos ver ms opciones como: <h1> <p> <br> Sirve para dividir el texto en secciones. Prrafos, se dise para resaltar el prrafo por lo que puede ir sola. saltos de lnea, puede poner tantas como desee y realizar un salto por cada uno de ellos. 10

Para la creacin de vnculos 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 direccin URL). Y el texto que servira de punto de activacin 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 adems <A HREF = > o <A NAME = > entre comillas ir la direccin del documento o la pgina especifica de ella. <table></table> <tr></tr> <td></td> Realizacin de tablas. Indica cada fila de la tabla. Indica las celdas de la tabla.

Qu compone una pgina Web La expresin de Pgina Web viene de World Wide Web (WWW Tela de araa de mbito mundial), siglas que suelen utilizarse al comienzo de una direccin de pgina Web. Una pgina Web puede contener texto e imgenes. Pero tambin se le puede aadir sonido, animaciones o interactividad a las pginas, lo cual le da atractivo a una pgina Web no importando la informacin que presente. Este lenguaje consiste en colocar instrucciones (etiquetas), cada una de las cuales destinada a aadir un elemento en la Pgina Web (un prrafo de texto, una imagen, una tabla, etc.) o enlazar esos elementos mediante vnculos que hacen referencia a otros elementos u otras pginas. As, cuando se hace clic sobre un objeto de la pgina para seleccionarlo, el lenguaje se encarga de llevarnos a ese otro objeto o pgina. Herramientas que se utilizarn para el diseo de la pgina Web En el diseo de la pgina se manejaron diversas herramientas de diseo como Corel Photo Paint 11, Macromedia Flash MX Professional 2004, Dreamweaver. Con estas herramientas trabajamos sobre el diseo y platicremos de ellas un poco. 11

4.2 Corel Photo Paint 11

Es una amplia aplicacin de edicin de imgenes que permite retocar y mejorar fotografas. Prctico para corregir el efecto de los ojos rojos o problemas de exposicin, recortar reas de la imagen o crear y publicar imgenes en Web, COREL PHOTO PAINT 11 proporciona potentes herramientas que son rpidas y fciles de usar. COREL PHOTO PAINT 11 es una aplicacin de edicin de imgenes de mapa de bits que permite retocar fotografas existentes o crear grficos originales. COREL PHOTOPAINT proporciona las herramientas y los medios de un estudio de diseo grfico profesional. Asimismo, permite elegir entre un vasto conjunto de medios y texturas, as como utilizar varios colores y pinceles y una biblioteca de imgenes ya preparadas. Tambin es posible aplicar animacin a las imgenes y publicar el trabajo en la Web.

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

Funciones Nuevo aspecto Edicin de fotografas Funciones para Web Efectos creativos

12

Interfaz mejorada Las mejoras de la interfaz permiten centrarse en las tareas ms comunes, como la edicin de imgenes. Los nuevos iconos proporcionan un aspecto de uniformidad y coherencia en toda la aplicacin. rea de control de color El rea de control del color incluida en la caja de herramientas permite ver y elegir rpidamente 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 funcin de la herramienta activa. Por ejemplo, si utiliza la herramienta Texto, el contenido de la Barra de propiedades cambia para mostrar la configuracin del texto, como el tipo y el tamao de fuente y la alineacin. En la Barra de propiedades ampliada hay opciones ms avanzadas para la herramienta activa. Un botn de flecha doble situado en el extremo de la Barra de propiedades permite abrir y cerrar la Barra de propiedades ampliada.

Edicin de fotografas 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 adems puedes encimar tus fotos como tu desees.

13

Recorte o extraccin 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 imgenes con alto nivel de detalle como son las de humo o cabello. A continuacin se presentan algunas herramientas mas utilizadas en el programa de Corel Photo Paint 11. Herramienta Seleccin de Objetos.- Se utiliza para seleccionar, mover y transformar objetos. Herramienta Mascara de Rectngulo.- 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 botn derecho del ratn (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 pxeles 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 aadir texto a la imagen. Herramienta rectngulo.- Permite dibujar formas cuadradas o rectangulares. Para redondear las esquinas de un rectngulo 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 imgenes Ahora se pueden ensamblar varias imgenes para crear una imagen grande o panormica. Gire o arrastre las imgenes para colocarlas en la posicin adecuada; desplcelas y aumntelas para ajustar la posicin con exactitud. Las reas superpuestas quedan resaltadas para poder ver al instante la alineacin de las imgenes. La imagen ensamblada se puede guardar como una sola imagen o como objetos, lo que permite efectuar ajustes posteriores en las distintas imgenes.

Mejoras en la optimizacin de la imagen La optimizacin de imgenes permite ajustar la calidad de la visualizacin y el tamao de los archivos. El optimizado de imgenes Web ayuda a ahorrar tiempo ya que permite guardar la configuracin de cada ventana de previsualizacin para su posterior uso. Tambin es posible optimizar las imgenes segmentadas. Mejora de las sombras Ahora es ms sencillo controlar la creacin de sombras interactivas: arrastre el cursor desde el centro del objeto para crear sombras planas o arrstrelo 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 aos Macromedia ya estaba considerada entre lderes del mercado mundial de grficos y animaciones con su director, verdadero estndar de la industria comprara FutureSplash para acrecentar sus posibilidades y convertirlo en el programa de animacin para la Web por excelencia, denominndolo FLASH. Definicin: El nombre tcnico para Flash es Authoring, o sea una plataforma de desarrollo para otros Software y para Multimedia. En prctica el Flash es un programa que permite desarrollar objetos Multimediales, visibles no slo en Internet. Para poder ver algn 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 diseadores de pginas 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 gestin de proyectos para optimizar el flujo de trabajo entre los miembros de un equipo Web formado por diseadores y desarrolladores. Funciones tales como la creacin externa de scripts y la gestin de datos dinmicos 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 combinacin de contenido HTML.

Cualidades tcnicas fundamentales de este programa Este programa llamado Flash, que nos permite crear y animar grficos Vectoriales compactos. Tambin nos permite importar y manipular Vectores y grficos Bitmap que hayan sido creados en otras aplicaciones, o sea cualquier tipo de grficos. Caractersticas fundamentales del flash Flash es un programa que contiene muchas herramientas de trabajo similares y en algunos casos igual a las de la mayora de programas de diseo grfico, o al menos de los ms conocidos y mejores en el mercado. Entre algunas de las herramientas y funciones diferentes que este programa contiene estn: 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 edicin 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 dnde se organizan los objetos y movimientos en manera temporal. Tambin en Edit, encontramos una opcin de Edit Symbols, que sirve para transformar en Vectorial los objetos, nombrndolos de una forma diferente, que se guardan automticamente en una librera de smbolos. En Insert, encontramos tambin esta opcin. En Insert la mayora de opciones son diferentes porque son especiales para este programa, entre ellas tenemos la de Layer. Que es la pgina en blanco en dnde se trabaja. Esta opcin permite agregar o eliminar hojas de trabajo.

17

Otra es Scene o Escena, que es en dnde se trabaja. Aqu podemos agregar o eliminar escenas, las cuales se pueden unir formando una animacin, como una pelcula.

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). Tambin se aprecian la lnea de tiempo

18

y los cuatro paneles principales. En ambas superficies se puede trabajar insertando objetos y figuras pero solamente aparecern en la pelcula aquellos que estn dentro del escenario. Tambin tiene la barra de herramientas de dibujo que esto permite a los que por primera vez interactan con este sistema. Esta es la pantalla principal cuando se abre el flash se puede ver claramente 4 partes distintas. 1. Es el MENU clsico de todas las aplicaciones de Windows. 2. Es la LINEA DE TIEMPO o temporalidad, donde podemos realizar diseos, movimientos con tiempo, como en una pelcula para el cine. 3. La BARRA DE DIBUJO es la que contiene los instrumentos colores, lpices, texto, borradores, diseo de formas, etc. 4. Es el STAGE o rea de trabajo dnde se realizan los diseos. A la izquierda encontramos la LINEA DE TIEMPO, en donde se encuentran pequeas lneas, llamadas FOTOGRAMAS, o sea fracciones de segundo en dnde se pueden grabar objetos y sus movimientos, construyendo as una pelcula. Debe representar tambin los movimientos intermedios entre los dos puntos para representar el movimiento en la pantalla (o pgina). 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 imgenes prediseadas o tambin realizarlas con el lpiz, 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 navegacin 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 ratn. 2. Al pasar cerca de la esquina del objeto de un extremo de un segmento, o de un vrtice de una lnea quebrada, aparece junto al cursor un icono en forma de ngulo con este estado el cursor, podemos modificar o reformar una esquina o vrtice de un objeto apropiado. 3. Pasando el cursor cerca de la lnea o cerca de las lneas que forma el rectngulo aparece junto al cursor una pequea curva, con este estado podemos modificar la forma de un objeto fcilmente.

20

Herramienta de texto Tecla de acceso rpido: T. La herramienta de texto de flash aumenta las capacidades del programa para realizar labores combinadas de programas de dibujo y paginacin. Todos los atributos y opciones estn disponibles a travs 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 pequeo men que nos muestra las opciones de texto que tenemos para trabajar. El tipo de texto Esttico. Este tipo de texto se refiere al texto que incluimos en la pelcula 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 diseado. Adems podemos editarlo como un texto cualquiera el tamao, 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 tambin 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 lneas, el color de ellas y el tamao en pxeles, pulgadas centmetros, 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 rectngulo 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. Pulsndolo 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 botn sin color, con lo que queda efectivamente eliminado. Pero para que sea posible antes hay que establecer esta opcin y despus dibujar la figura (con la herramienta ovalo y rectngulo). Intercambiar colores. Pulsando se intercambian los colores de los dos sectores de color.

22

La lnea de tiempo La lnea 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 pelcula en forma secuencial con sus objetos y rdenes. De manera que con ella podemos dar un vistazo podemos conocer la formacin de la pelcula, y tambin es la utilidad que nos permite ir creando la misma.

FIGURA 6. Lnea de tiempo

Los fotogramas se dividen en dos clases: los estticos y los dinmicos. Pueden estar llenos o vacos, toda pelcula comienza con un fotograma dinmico, llamado en el entorno flash fotograma clave, a un que este vaci. Si que remos sealar un fotograma determinado en la lnea de tiempo como clave lo tenemos que establecer especficamente. Si queremos convertir un fotograma esttico 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 lnea de tiempo se distinguen los siguientes elementos: Iconos del cambio de estado de las capas. Indicador del fotograma actual, tambin 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 mtodo miMovieClicp.getURL () Este mtodo no se diferencia en nada de lo que la accin Get URL proporciona. Los parmetros de aquella accin se incluyen aqu como argumentos del mtodo su sintaxis es: miMovieClic.getURL (URL [, ventana, variables]). El significado de los argumentos es: URL. La direccin 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 pelcula o documento extrado con el URL. Las palabras reservadas _ self, _ parent, _top, y blank puede utilizarse, lo mismo con la accin. Variables Opcional en este argumento se especifica el mtodo de envi de las

variables, si hay variables se sigue un mtodo de envi que podemos seleccionar entre GET y POST. GET anexa las variables al final de la direccin URL y se utiliza para un nmero pequeo de variables. Si las variables son muchas, es mejor el mtodo POST, que enva las variables en un encabezado HTTP aparte.

4.4 Macromedia Dreamweaver MX Professional 2004

Macromedia Dreamweaver MX es un sistema para crear pginas Web de forma rpida para red de Internet. Con el programa de Dreamweaver no es necesario conocer 24

lenguajes de programacin para disear pginas Web muy completas. Dreamweaver es una herramienta que nos permite programar y depurar ms fcilmente gracias a cdigos de colores y otras utilidades. Ventajas Que se puede programar sin saber lenguajes de programacin. Se utiliza como si estuviramos trabajando en un programa de autoedicin, ya que se puede incorporar elementos a la pgina, como texto, imgenes, 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 fcilmente mediante cuadros de dilogo. Tambin Dreamweaver traduce esos datos creando correspondiente programa. Dreamweaver permite colocar elementos necesarios en la pgina Web (botones, listas desplegables, cuadros de texto, etc.). En Dreamweaver se disea la pgina en la ventana ms grande. En ella vamos

tecleando y aadiendo los distintos componentes a las pginas que compongan el sitio Web mediante paneles con los que tambin se puede modificar dichos elementos segn nuestras necesidades. Novedades de Dreamweaver MX Dreamweaver MX contiene una amplia variedad de nuevas funciones, como nuevas plantillas mejoradas para ayudar a los diseadores visuales y muchas otras posibilidades de codificacin. Dreamweaver tambin incluye ahora todas las funciones de desarrollo de aplicaciones de Dreamweaver UltraDev 4 y otras nuevas, incluido un espacio de trabajo de edicin

25

de cdigo que procede de Macromedia ColdFusion Studio, cdigo de tiempo de ejecucin mejorado y asistencia para las ltimas tecnologas de aplicaciones Web. Una vez que se activa Dreamweaver, esa ventana con pgina estar rodeada de varios paneles con funciones prcticas para la creacin de sitios Web y sus pginas, como a continuacin se presentan.

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 pestaas. Los elementos que contiene esta barra incorporan diferentes objetos a la pgina Web (tablas, formularios, elementos multimedia, caracteres especiales, etc.) facilitando su insercin. 3. Barra de herramientas Documento. Contiene varios botones con las funciones ms comunes de Dreamweaver a la hora de disear la pgina Web. 26

4. Paneles. Contiene elementos especializados para disear la pgina Web. Segn el titulo de cada panel, podr ver que permite configurar el sitio Web en general. 5. Ventana de Documento. Es la ventana ms grande en la que trabajaremos diseando la pgina Web. Suele ser til maximizarla ver el contenido de la pgina de un modo mas completo. 6. Barra de estado. Muestra en todo momento la situacin en que se encuentra el usuario durante el diseo. Esta barra contiene el Selector de etiquetas con el que podemos seleccionar una etiqueta que no tenga un aspecto visible en la pgina: por ejemplo, la etiqueta Body que hace referencia a toda la pgina Web, por tanto, se selecciona ah. 7. Inspector de propiedades. Se trata de un panel que vara su contenido dependiendo del objeto que seleccionemos en la pgina. Su funcin cosiste en ofrecer los elementos que caracterizan al objeto que hayamos seleccionado en la pgina para poder modificar esas caractersticas. Microsoft Dreamweaver sistema que ha evolucionado a partir de un lenguaje de aspecto de la pgina afectan sus elementos. Uno de los paneles ms importantes es el panel Sitio, ay que nos

programacin, permitiendo disear pginas Web de forma visual en lugar de programada, permite generar y retocar partes de las pginas con lenguajes como HTML, XML, JavaScript, etc. Interactividad La interactividad en las pginas Web consiste en establecer una sencilla comunicacin entre la pgina y el usuario que la visita en ese momento: la pgina ofrece su informacin y sus elementos interactivos al usuario y ste entrega su informacin a la pgina a travs de ellos. Estas pginas interactivas son mas usualmente usadas por negocios que necesitan una cierta interrelacin con el usuario. 27

Dreamweaver cuenta con herramientas para generar esa interactividad con los usuarios de las pginas Web. Son algo limitadas debido a que exigen un mnimo de programacin con lenguajes especficos para Internet como JavaScript, PHP. En casos se tiene que programar del lado del cliente y tambin del lado del servidor. Parte del programa que se ejecuta en el navegador cuando un usuario entra en una pgina 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

(disear elementos como botones, listas, casillas, cuadros de texto, etc., y programar la funcin que debern 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 pgina Web. Cuando una pequea parte del texto sea un vnculo, aparece subrayada indicndolo donde con un clic en l, el accede al lugar de la red indicado por el vnculo. Dreamweaver puede crear sus propios comandos y objetos, modificar mtodos abreviados del teclado. Imgenes: En Internet suele haber dos formatos: GIF y JPG. Estos pertenecen al mapa de bits. Estos formatos estn tomados como estndar por ofrecer una calidad muy alta ocupan poco espacio. 28 y

Escritura del texto. El texto es la base informativa de cualquier documento y, por tanto, de una pgina Web. Como es de suponer, el texto solo hay que escribirlo una vez que nos encontremos en l, la ventana de diccin de Dreamweaver. Sin embargo, al texto escrito podemos darle forma y hacerlo ms atractivo y presentable, ya que una pgina Web debe llamar la atencin al mismo tiempo que informar. Tipos de letras. Continuando con las funciones para el texto, los tipos de letra, tambin llamados fuentes, pueden generarse desde varios lugares distintos del programa. Para empezar podemos utilizar la opcin fuente del men texto. Tambin 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 tamao, estilo etc. Tambin podemos establecer un color de letra que queramos que aparezca tambin esto es novedoso para el usuario los colores que utilice uno. El texto puede aparecer escrito en la pgina con distintos colores. Lo primero que debemos hacer es seleccionar la porcin de texto a la que deseamos cambiar el color. Luego accederemos al men texto y seleccionremos la opcin color. Esta opcin nos ofrecer un cuadro de dilogo que nos mostrar los colores que

tenemos para seleccionar, nos es ms fcil elegirlo en la lista de colores bsicos, pero puede utilizar la paleta que aparece a la derecha o teclear los niveles de matiz, saturacin y luminosidad o los de rojos, verde y azul, cuyos valores coinciden con el 29

cdigo de color que queremos, este cdigo va desde #000000 (negro) hasta #FFFFFF (blanco). Lista y vietas Una de las herramientas de uso sencillo que aporta Dreamweaver es la creacin de esquemas de un texto. Un esquema puede encargarse de enumerar cada uno de los elementos de una lista (normalmente prrafos) de forma automtica, o bien de generar vietas. El modo ms fcil de aplicar esta funcin consiste en seleccionar los prrafos que conforman la lista y, a continuacin seleccionar lista en el men texto a parecer un submen que nos mostrara algunas opciones. Imgenes Lo que siempre da ms colorido a un Web son las imgenes como ya sabemos, las imgenes de Internet suelen aparecer en formatos GIF y JPEG que son mapas de bits con algn algoritmo de compresin que reduce su tamao 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 opcin imagen del men insertar. Para ello es necesario tener imgenes almacenadas en el disco (Dreamweaver puede leer imgenes del disco archivadas con varios formatos como GIF, JPEG, PNG, TIFF, BMP, etc.). Esta opcin nos lleva a un cuadro de dilogo (figura 8) que se maneja de forma similar al que utilizamos para abrir pginas 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 tambin podemos aadirla a la pgina 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 pgina 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 botn aceptar (OK) para incorporar la imagen elegida a la pgina. 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 diseando. Esto es recomendable en caso que la va a publicar el sitio en Internet cuando lo termine. Esto tambin se pide cuando incorpore algn otro archivo a su sitio Web.

31

Video y Pelculas Flash En Dreamweaver, pueden aadirse video clips mediante el men insertar de la ventana de diseo, seleccionando la opcin medio que a su vez ofrecer un submen que podremos elegir la opcin 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 compaa 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 aadiera una pelcula de flash necesita navegador que lo reproduzca este instalado en esa mquina. el

que el

FIGURA 9. Ventana para importar una animacin de Flash

Esto nos lleva a un cuadro de dilogo (figura 9) en el que podr establecer los datos del archivo que desee incorporar a la pgina en este caso Flash, busca el archivo y da aceptar (OK) ya una vez establecido en su pgina usted podr manipularlo con su barra de propiedades del mismo.

32

Para poder visualizar el resultado de su pgina 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 pginas 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 pgina que de otra forma nos resultara imposible. Crear tablas Podemos crear una tabla en la pgina mediante el men insertar seleccionando tabla o mediante las teclas CONTROL + ALT + T. Esto nos llevara a un cuadro de dilogo 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 nmero de filas (rows) y el nmero de columnas (columns) que debe tener la nueva tabla. 2. Con las dems 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. Adems del ancho y borde, el ancho se establece una anchura para tabla esta podr explicarse en pxeles 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 pgina de la Universidad Tecnolgica de Izcar de Matamoros se hizo primero la estructura para la pgina Web, se vio el diseo de como quedar, despus se hizo la eleccin de los programas a utilizar y optamos por Corel Photo Paint 11, Macromedia Flash MX Professional 2004, Macromedia Dreamweaver MX Professional 2004. El diseo de la pgina fue surgiendo a travs de ideas y opiniones, es decir que se hicieron varias opciones y se fueron eligiendo las ms apropiadas o las que ms agradaban a nuestros asesores, a continuacin se mostrarn algunas de las pantallas que fueron elegidas. Intro del sito Web de la Utim

FIGURA 11. Intro de la pgina En la figura 11 se muestra el intro que da inicio a la pgina 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 adems, cuenta con cdigo para que al trmino de la animacin inmediatamente aparezca la pgina principal de la UTIM.

5.1 Pgina Principal

FIGURA 12. Pgina principal

Esta pgina tambin fue la mejor de todas las propuestas que realizamos, fue hecha con el programa de macromedia FLASH MX Professional. Esta pgina cuenta con varias ligas de efecto de botn, que conllevan a otra pgina, tambin cuenta con imgenes de fondo que tienen un efecto de borrador realizadas en COREL PHOTOPAINT.

36

Pgina de Quienes Somos

1 2 4 3

FIGURA 13. Pgina 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 Repblica Mexicana resaltando el Estado de Puebla, del lado derecho se colocaron tres fotografas tomando en cuenta las instalaciones de la Universidad pero con pequeo efecto que se les hizo con el borrador para evitar que la imgenes no se vieran tan cuadradas y entrelazadas. 2. Ahora iremos explicando la elaboracin de este Men. Para su diseo utilizamos la herramienta multimedia, Macromedia Flash MX Professional 2004, (Ver Fig. 14).

37

FIGURA 14. Aplicacin de Macromedia Flash MX Professional 2004

Para abrir esta herramienta nos vamos a Botn 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 pxeles; 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, tambin ocultarlas y/o bloquearlas. A travs de la posicin de las capas, es posible localizar y manipular los contenidos dentro de ellas con ms 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. Botn Insertar capa de la seccin de Capas

38

5.2 Diseo y Creacin de la Base de los Botones

Comenzaremos a trabajar en la capa men donde realizaremos un rectngulo 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 opcin , la cual tiene un rango de redondeo que va

desde 0 a 999. Es posible crear crculos o cuadrados perfectos manteniendo presionada la tecla SHIFT mientras se dibuja la figura. Al presionar la opcin de redondeo de esquinas se observara un cuadro de dilogo (Ver fig. 16) donde le daremos un valor de 15.

FIGURA 16. Cuadro de Dilogo Configuracin de Rectngulo

Enseguida, se le dar un color de fondo, este lo seleccionaremos a travs del mezclador de colores (Ver Fig. 17), este mezclador especifica un color ya sea para relleno o lnea de contorno de un objeto. Mediante este panel es posible determinar un tipo de relleno, ya sea slido, 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 lneas de contorno mediante el cdigo RVA (Rojo, Verde y Azul), el cdigo hexadecimal o seleccionando una muestra del espectro de colores. En este panel se puede ajustar la propiedad Alpha, (que en este caso hablaremos ms 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 tamao de esta barra o rectngulo ser de 900 x 37 pxeles. Realizado lo anterior obtendremos algo como se muestra en la figura 18.

FIGURA 18. Barra de fondo de los Mens

5.3 Diseo y Creacin de los Botones

Como siguiente punto, nos encaminaremos a crear los botones. Estos tendrn el aspecto, en su estado de reposo, el mismo color de relleno de la barra de fondo y al

40

pasar sobre el botn, este tendr un color mas claro y se desplegarn unos submens si en este caso los tuviesen.

Iniciaremos a crearlos: 1. Nos situamos en la capa men, y en un solo fotograma tambin crearemos los botones que los llamaremos respectivamente segn el nombre, realizaremos un rectngulo con el tamao aproximado que tendr el texto; para su fcil manejo y que posteriormente iremos modificando, los convertiremos en smbolos; los smbolos son elementos reusables de una pelcula, 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 smbolo, es necesario seleccionar previamente el o los objetos que lo compondrn, despus abrir el men Insertar/Convertir a smbolo o presionar F8. Una vez hecho esto, aparecer un cuadro de dilogo (Ver Fig. 19) en el cual se especifican el nombre del smbolo, su comportamiento y su punto de registro, en nuestro caso, su comportamiento ser de tipo Clip de Pelcula tambin conocidos MovieClips, son animaciones que tienen su propia lnea de tiempo principal. Los controles interactivos y sonidos, funcionan en este tipo de comportamiento. Pueden contener dentro de ellos mismos a otros clips de pelculas, grficos o botones haciendo de esta manera objetos ms complejos e interaccin superior.

FIGURA 19. Cuadro de Dilogo Convertir en smbolo

41

2. Abrimos el smbolo del botn inicio, este lo encontraremos en la Biblioteca todos los smbolos, archivos de audio, mapas de bits, videos y componentes del documento se encuentran en la Biblioteca, as como los smbolos grficos, botones y clips de pelculas son albergados en sta automticamente cuando son creados. Para abrir la Biblioteca hay que seleccionar el men Ventana/Biblioteca o la combinacin de teclas CTRL+L, y abrimos el smbolo, 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 botn con tipo de fuente Verdana y un tamao de 11, con la herramienta de texto se insertar , automticamente un fotograma clave en la seccin de la lnea de tiempo, un

fotograma clave es equivalente a un cuadro en un film, estos determinan la duracin de la pelcula; 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 botn 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 rectngulo del tamao ajustado al nombre del botn de largo y de ancho igual que la barra (37 pxeles) y realizamos el mismo procedimiento como en el punto anterior, de ampliar el fotograma clave hasta el fotograma 15, adjuntado el texto al botn quedara de la siguiente manera (Ver Fig. 22).

FIGURA 22. Botn Inicio

5. Nos ubicamos en la capa movie, dejamos vaco el fotograma 1, nos ubicamos en el fotograma 2, y realizamos un rectngulo igual de dimensiones que el botn; y este ser su estado de reposo, recomendamos que se copie el rectngulo del botn y se pegue en la capa movie, para que no haya diferencia de dimensiones, enseguida copiamos el mismo rectngulo 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 botn cuando se pase con el mouse sobre l (Ver Fig. 23).

43

FIGURA 23. Diferencia de estados del botn, izquierdo cuando se pasa sobre el, derecha en reposo

Teniendo estos fotogramas realizaremos una interpolacin por forma, esta interpolacin puede mover, rotar, escalar y cambiar atributos a los objetos; este tipo de animacin puede transformar de una figura a otra totalmente diferente en nuestro caso simplemente optar por cambiar de color, para hacer esta animacin nos ubicamos en el primer fotograma clave, en el panel de propiedades esta el comando Animar y elegimos la opcin 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. Animacin por forma

6. Por ltimo, en la capa Actions creamos las acciones para este botn, nos ubicamos en el primer fotograma y en el panel de acciones le damos la 44

instruccin stop(); , lo mismo hacemos con el fotograma 7, esto con el fin de detener la pelcula en puntos especficos y en el fotograma 12 utilizaremos una instruccin de ActionScript, gotoAndStop(1); ; es un Control de instancias mediante comportamientos (una instancia es una copia de un smbolo); puede utilizar los comportamientos para controlar instancias de clips de pelcula y de grficos 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 pelcula o vincular a una URL. El propsito de la instruccin gotoAndStop (1); es que detiene un clip de pelcula; opcionalmente mueve la cabeza lectora a un fotograma concreto, en este caso en el fotograma 1. Dicho los pasos anteriores, la seccin 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 lnea al termino del botn que actuar como separador entre botones (Ver Fig. 26b).

45

FIGURA 26a. Ubicacin de escena

FIGURA 26b. Ubicacin de separador

Los dems botones se fueron elaborando de forma similar. 3. El espacio que tiene la figura 27 es el que ocupa el contenido de cada pgina 4. Los anuncios que se encuentran en la parte izquierda de la figura 27 estn elaborados en varios programas como macromedia FLASH MX profesional. El formato general de cada pgina es el que se muestra en la figura 27

FIGURA 27. Formato general de Pginas

46

Intro de oferta educativa

Logotipo girando FIGURA 28. Intro de oferta educativa

ligas

Introduccin: 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 animacin el logo nunca se queda esttico, siempre realiza una semi-vuelta en medio del circulo que lo acompaa. 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 animacin permanece el blanco.

47

Pgina de Sistemas Informticos

1 2

FIGURA 29. Pgina de la Carrera de Sistemas Informticos

1. En esta pgina podemos observar otro encabezado con el nico detalle de que esta pertenece a la carrera de Sistemas Informticos, y se muestra en la parte izquierda el logo de la carrera, a este logo se les hizo algunos arreglos como el nombre que apareca 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 fotografas. En este se tomaron en cuenta instalaciones y alumnos que se encuentran tomando clases. Este tipo de encabezado se diseo para todas las carreras teniendo en cuenta que solo se cambiarn los logos, el nombre

48

de la carrera y las fotografas. El efecto a las fotografas tambin se les dio con el borrador de la barra de herramientas de Corel Photo Paint 11. 2. La elaboracin de los botones de ste men se realizaron como el punto 2 de la figura 27, salvo que en esta situacin, los botones tienen el nombre de los aspectos importantes dentro de la carrera de Tecnologas de la Informacin y comunicacin. 3. Una vez teniendo la plantilla se coloc toda la informacin en Dreamweaver de cada carrera o departamento. Como vemos en este caso se muestra la bienvenida de la carrera de sistemas Informticos, objetivo, campo de trabajo, plan de estudios, plantilla, reas de estudios y proyectos productivos(solo si la carrera tiene se pondr ). Posteriormente, en las dems pginas de las otras carreras se visualiza algo similar. 4. En la parte del centro de la pgina se muestra un ejemplo de la imagen de fondo que se inserto en cada pgina 5. En la parte derecha de la pgina se muestra un ejemplo de cmo se visualizan los anuncios y el pequeo script del calendario dentro de cada pgina.

5.4 Mapa de la UTIM

FIGURA 30. Mapa de la Utim 49

La figura 30 solo la prediseamos ya que existe una anterior pero de gran tamao, lo que hicimos fue reducirla para que se visualizara en el nuevo formato de pgina.

5.5 Localizacin de la UTIM

Ruta Atlxco

de

Carretera modificada

Nueva especificacin de ruta FIGURA 31. Localizacin de la Universidad

Esta animacin solo la prediseamos, ya haba una versin anterior donde se mostraba claramente como tomar la ruta desde muy cerca del IMSS viniendo de Atlixco, lo nico que le cambiamos fue el diseo 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 fotografas del IMSS, ELEKTRA, CFE, IGLESIAS, PUENTE, y tambin cuenta con nombres de las principales calles de Izcar de Matamoros.

Diseo de animacin en instalaciones UTIM

FIGURA 32. Instalaciones de Universidad

Esta fue una de las animaciones ms complicadas ya que tuvimos que hacer variadas pelculas y proyectarlas cuando el cursor sea puesto encima de cada una de las fotografas, tambin colocamos una imagen de fondo para que cuando el cursor no este encima de ninguna foto, esta permaneciera esttica y mostrndose. La fotografa que esta esttica es la entrada de la Universidad, las dems se fueron escogiendo por categoras ya que colocamos las que representan las instalaciones de la Universidad.

51

Las fotografas 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 adems proyecta la imagen elegida a un tamao mucho mayor a lo que esta, junto con las dems fotografas.

Imagen a proyectar

imagen proyectada

FIGURA 33. Animacin de las instalaciones

En la (figura 19), muestra la proyeccin de una fotografa una vez que el Mouse este sobre ella. Cada fotografa cuenta con un margen especfico y nombre de cada foto.

Efecto de goma en photo-paint

FIGURA 34. Mrgenes de las fotografas de la Utim

52

Como hemos mencionado anteriormente estas fotografas 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 Intro Servicios escolares index Vinculacin index Finanzas Incubadora Intranet Ley Prensa

Index nueva pgina Ley

Historia, valores, organigrama, directorio, instalaciones, localizacin utim , mapa de la utim Tic, Agrobiotecnologa, tecnologa de alimentos, contadura, administracin Proceso de admisin, calendario escolar, becas, servicios, centro de informacin prensa

Servicio social , estada, bolsa de trabajo, convenios, visitas industriales, servicios externos, educacin, vamos a la utim, plantilla Informacin financiera

Objetivo, requisitos, servicios, informes

FIGURA 35. Mapa del Sitio

5.6 Intranet La Universidad cuenta con su Intranet, que abarca sobre la Certificacin ISO 9001:2000, manuales para las diferentes reas tales como Bases de Datos, Programacin y otras reas; algunos paquetes y utileras para descargar, y otros aspectos en general. Esta a su vez provee de cierta seguridad que permite solo el acceso autorizado. Estas pginas solo podrn ser vistas por aquellos que posean un

53

nombre de usuario y su contrasea, es decir, la Intranet posee un sistema de Autentificacin tal como se muestra en la figura 36.

FIGURA 36. Esquema del Sistema de Autentificacin Este diagrama muestra como es el proceso, inicia con la pgina donde se pide el Usuario y Contrasea (Ver Fig. 37); para acceder a la aplicacin segura, estos datos se envan hacia un script de autentificacin que comprueba los datos. Si los datos son correctos se redirecciona el navegador hacia las pginas seguras, en caso contrario se manda a la pgina inicial de introduccin de datos mostrando un texto el cual les afirma que los datos son incorrectos.

FIGURA 37. Pgina de acceso de datos 54

Si los datos son correctos el navegador se redireccionar a las pginas seguras, en este caso mandar hacia la pgina principal de la Intranet (Ver Fig. 38).

FIGURA 38. Pgina principal de la Intranet

55

6. RESULTADOS

Los resultados obtenidos al trmino de la estada con las pginas fueron los siguientes: Personalmente pudimos obtener mayor comunicacin con el personal de la institucin y mejor desempeo laboral como primer paso para el trabajo que nos espera. Mejor manejo de los programas de diseo que se ocuparon. Trabajar en equipo teniendo una buena comunicacin para lograr un buen proyecto, sabiendo que cada opinin es indispensable y debe de ser tomada en cuenta. La realizacin de un buen proyecto y la satisfaccin de terminarlo en el tiempo establecido. En la institucin se obtuvo una mejor presentacin con la pgina y mayor informacin que no se haba dado a mostrar aos atrs. La actualizacin de toda la informacin ya que sabemos que esta va cambiando con el tiempo. Mejor acceso a la informacin relevante de la Universidad, adems de mayor seguridad en ella.

56

7. CONCLUSIONES
Al trmino de este proyecto podemos decir que este fue concluido con satisfaccin y buen trabajo por toda la Universidad. Nos dimos cuenta que cada da se nos presentan retos y debemos dndoles la solucin que nos de ms satisfaccin. Lo importante aqu es lograr un buen proyecto con la satisfaccin de nosotros y de la institucin, 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 lmite, de lo que se plante en un principio. Se logr montar el sitio Web, la participacin 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 tcnica 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 ms para el xito de nuestra carrera. enfrentarlos

57

8. REFERENCIAS
Bibliografa: 1. Corel Draw 11, Gua de iniciacin. Garca Nees, P; Editorial Anaya Multimedia y Anaya Interactiva 2. Dreamweaver MX 2004 (Gua practica), Pea de San Antonio, Oscar; Anaya Multimedia y Anaya Interactiva. 3. FLASH MX, Lzaro Issi Camy. 4. Navegando en Internet. Macromedia. Dreamweaver MX, Francisco Pascual Gonzlez. 5. P.A.T Julio Heberto Gonzles Morales. Gua 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 introduccin......................................................................22 6. Lnea de tiempo....................................................................................................23 7. Entorno de trabajo de Dreamweaver....................................................................26 8. Ventana para importar una imagen......................................................................31 9. Ventana para importar una animacin de Flash..................................................32 10. Ventana para insertar una tabla...........................................................................33 11. Intro de la pgina..................................................................................................35 12. Pgina principal.................................................................................................36 13. Pgina principal de Quienes Somos..................................................................37 14. Aplicacin de Macromedia Flash MX Professional 2004......................................38 15. Botn Insertar capa de la seccin de Capas....................................................38 16. Cuadro de Dilogo Configuracin de Rectngulo.............................................39 17. Panel del Mezclador de Colores...........................................................................40 18. Barra de fondo de los Mens................................................................................40 19. Cuadro de Dilogo Convertir en smbolo...........................................................41 20. Capas de los botones...........................................................................................42 21. Fotograma de la capa text....................................................................................43 22. Botn Inicio...........................................................................................................43 23. Diferencia de estados del botn, izquierdo cuando se pasa sobre el, derecha en reposo...................................................................................................................44 24. Animacin por forma.........................................................................................44 25. Capas terminadas.................................................................................................45 26. a) Ubicacin de escena , b) Ubicacin de separador...........................................46 59

27. Formato general de Pginas................................................................................46 28. Intro de oferta educativa.......................................................................................47 29. Pgina de la Carrera de Sistemas Informticos...................................................48 30. Mapa de la UTIM..................................................................................................49 31. Localizacin de la Universidad.............................................................................50 32. Instalaciones de Universidad................................................................................51 33. Animacin de las instalaciones............................................................................52 34. Mrgenes de las fotografas de la UTIM..............................................................52 35. Mapa del Sitio......................................................................................................53 36. Esquema del Sistema de Autentificacin.............................................................54 37. Pgina de acceso de datos..................................................................................54 38. Pgina principal de la Intranet..............................................................................55

60

10. GLOSARIO A
Animacin: Animacin es el resultado del proceso de tomar una serie de imgenes individuales y concatenarlas en una secuencia temporizada de forma que den la impresin de movimiento continuo. La animacin es especialmente apropiada en Visualizacin de Informacin para representar el cambio en el transcurso del tiempo y ms especficamente para: Representar efectivamente la causalidad. Los actos que expresan comunicacin o flujo. La reorganizacin o reestructuracin se adapta bien a la animacin, siempre que la complejidad de las interacciones no sea muy alta. @ (Arroba): Signo que forma parte de las direcciones de correo electrnico 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 preposicin Inglesa at (en). ASP (Pgina de Servidor Activo): Tipo especial de pgina HTML la cual contiene unos pequeos programas, scripts, ejecutables en servidores Microsoft Internet Information Server antes de ser enviados al usuario para su visualizacin en forma de pgina HTML. Habitualmente esos programas realizan consultas a bases de datos y los resultados de esas consultas determinan la informacin que se enva a cada usuario especfico. Los archivos de este tipo llevan el sufijo .asp. 61

B Bit: Unidad mnima de informacin que puede ser transmitida o tratada. Procede del ingls, Binary Digit o Dgito Binario, y puede tener un valor de 0 (cero) 1 (uno). BMP: El formato BMP (Bit Map) es el formato de las imgenes en bitmap de Windows. Aunque muy extendido, tiene la dificultad de la escasa compresin que realiza en los archivos, por lo que stos ocupan rpidamente casi un 1 Mb. C Codificacin: Proceso en que los datos se traspasan a cdigos en lenguajes de programacin o protocolos de comunicacin con el objetivo de interpretar electrnicamente la informacin o transmitirla a travs de un medio electrnico. Aplicacin de las reglas de un cdigo. Cdigo: Las reglas que se usan para convertir una configuracin en bits en caracteres alfanumricos. El proceso de recopilacin de instrucciones de computacin en forma de un programa de computacin. El programa de computacin actual. Una lista de comandos que deben ser ejecutados sin la intervencin del usuario. Un lenguaje de cdigo, como PHP es un tipo de programacin en el cual se puede crear un determinado cdigo. 62

CSS: Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal de ordenador usado para definir la presentacin de un documento estructurado escrito en HTML o XML (y por extensin en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificacin de las hojas de estilo que servir de estndar para los agentes de usuario o navegadores. D Diseo Web: Actividad que consiste en la planificacin, diseo e implementacin de sitios Web y pginas Web. Se requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la informacin y la interaccin de medios como el audio, texto, imagen y video. E Editor: Programa que permite insertar o modificar la informacin en un archivo permanente de la computadora. Por ejemplo programas de edicin HTML son: Netscape, Macromedia Dreamweaver, etc. Estilo lgico de HTML: El estilo lgico se refiere a la lgica del documento: cabeceras, prrafos,... no se preocupa de la apariencia final, sino de la estructura del documento.

63

Estilo fsico de HTML: No se preocupa de la estructura del documento, sino por la apariencia final: prrafos con un cierto tipo de letra, tablas con un determinado color de fondo. F Fotograma: Se denomina fotograma a cada una de las imgenes impresionadas qumicamente en la tira de celuloide del cinematgrafo. Proyectadas a una cadencia de 24 por segundo producen la ilusin de movimiento. Esto se debe a la incapacidad del cerebro de ver estas imgenes como fotografas separadas. Esta persistencia en la visin hace que el cerebro mezcle estas imgenes dando la sensacin de movimiento natural. En Flash los fotogramas clave permiten producir animaciones sin tener que dibujar cada fotograma, facilitan la creacin de animaciones. Puede cambiar la longitud de una animacin interpolada arrastrando un fotograma clave en la lnea de tiempo. G GIF: El formato GIF (Graphics Interchange Format), es el formato de grfico Web ms extendido. Contienen slo 256 colores, ofrece una satisfactoria compresin de imgenes sin prdida de datos, gracias a que posee la capacidad de aparentar ms tonos de color usando una tcnica de promediacin de colores que consiste, bsicamente, en obtener un color intermedio que no est en su tabla, colocando juntos varios pxels de colores que s estn en la tabla. Adems, este formato usa un sistema de compresin sin prdida llamado LZW (Lemple - Zif - Wellch, el mismo que utiliza el ZIP), que hace que se obtengan ficheros muy pequeos. Otro aspecto a destacar es 64

que los archivos GIF pueden contener un rea transparente y varios fotogramas para animacin. Grfico: Representacin de datos numricos, en forma de lneas o dibujos, y en los que se muestra de una forma grfica la relacin que dichos datos guardan entre si. H Hardware: Se denomina hardware o soporte fsico al conjunto de elementos materiales que componen un ordenador. En dicho conjunto se incluyen los dispositivos electrnicos y electromecnicos, circuitos, cables, tarjetas, armarios o cajas, perifricos de todo tipo y otros elementos fsicos. Hipertexto: Cualquier documento que contiene vnculos con otros documentos de forma que al seleccionar un vnculo se despliega automticamente el segundo documento. Hipervnculo: Vnculo 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 pginas de hipertexto y grficos los cuales forman los contenidos de la WWW. 65

HTTP: Es el protocolo de la Web (WWW), usado en cada transaccin. Las letras significan Hyper Text Transfer Protocol, es decir, protocolo de transferencia de hipertexto. El hipertexto es el contenido de las pginas web, y el protocolo de transferencia es el sistema mediante el cual se envan las peticiones de acceder a una pgina web, y la respuesta de esa web, remitiendo la informacin que se ver en pantalla. Tambin sirve el protocolo para enviar informacin adicional en ambos sentidos. Icono: Smbolo grfico que representa una determinada accin a realizar por el usuario (ejecutar un programa, leer una informacin, imprimir un texto, etc.) o un documento, un dispositivo, un estado del sistema, etc. Imagen vectorial: Este tipo de imagen (por oposicin a imagen Bitmap) se calcula con base en sus dimensiones y puede reducirse o agrandarse sin prdida de calidad. Imagen de bitmap: Una imagen basada en pxeles (.BMP).Su calidad disminuye cuando se agranda la imagen. Internet: Es una forma de establecer comunicacin entre distintos tipos de redes. Para ello, dentro de cada red se escoge un computador que acte 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 tecnologas 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 compresin con prdida, esto quiere decir que, al guardar una imagen en este formato, parte de la informacin que contiene esa imagen se reduce, es decir, sta pierde un poco de calidad, aunque, generalmente, esta prdida de calidad es imperceptible al ojo humano. Con ello se consigue reducir el tamao del archivo. Por otro lado, el formato JPEG permite elegir el nivel de compresin 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 tamao de archivo) y una imagen de baja calidad (con un menor tamao de archivo). JavaScript: Es un lenguaje interpretado orientado a las pginas Web, con una sintaxis semejante a la del lenguaje Java. Un lenguaje de scripting usado comnmente para construir 67

pginas Web. Los programadores usan JavaScript para hacer las pginas Web ms interactivas; por ejemplo, para mostrar formularios y botones. JavaScript puede usarse junto con Java, pero son dos lenguajes tcnicamente distintos. No es necesario tener Java instalado para que JavaScript funcione correctamente. N Navegador: Un navegador web, hojeador o web browser es una aplicacin software que permite al usuario recuperar y visualizar documentos de hipertexto, comnmente descritos en HTML, desde servidores web de todo el mundo a travs de Internet. Esta red de documentos es denominada World Wide Web (WWW) o Telaraa Mundial. Los navegadores actuales permiten mostrar y/o ejecutar: grficos, secuencias de vdeo, sonido, animaciones y programas diversos adems del texto y los hipervnculos o enlaces. P Pxel: El pxel (del ingls picture element, o sea, "elemento de la imagen") es la menor unidad en la que se descompone una imagen digital, ya sea una fotografa, un fotograma de vdeo o un grfico. La calidad de una imagen depende del nmero de pxeles por pulgada que la constituyen. Plataforma: Conjunto de hardware y software destinado a un uso determinado y no compatible con otras plataformas. Denominacin que se les da a diferentes sistemas operativos, por ejemplo, Windows, Macintosh, Unix, etc.

68

PNG: Las siglas PNG significan Portable Network Format. Las caractersticas de este formato son bastante prometedoras. Adems 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 nmeros) o por varios miles de rdenes (como un programa de gestin completo para una empresa). Cuando se trata de un programa ya terminado que se compra, se suele hablar de una Aplicacin Informtica. Los programas se deben escribir en un cierto lenguaje de programacin. Los lenguajes de programacin que se acercan ms al lenguaje humano que al del ordenador reciben el nombre de "lenguajes de alto nivel" (como Pascal); los que se acercan ms al ordenador. Instrucciones de computacin estructuradas y ordenadas que al ejecutarse hacen que una computadora realice una funcin particular. Plugin: Un plugin (o plug-in) es un programa de ordenador que interacta con otro programa para aportarle una funcin o utilidad especfica, generalmente muy especfica. Los plugins tpicos tienen la funcin de reproducir determinados formatos de grficos, reproducir datos multimedia, codificar/decodificar e-mails, filtrar imgenes de programas grficos... Plugins: Programas que se agregan a un navegador del WWW los cuales realizan funciones determinadas.

69

Producen la visualizacin de archivos multimedia y dan soporte a archivos grficos no estndares con el visualizador. S Servidor: Un servidor en informtica o computacin es: *Una aplicacin informtica 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 trmino. Es posible que un ordenador cumpla simultneamente las funcione. Shockwave: Programa que permite hacer presentaciones de multimedia (con audio, video, etc) a travs del Web. Software: Se refiere a todas las aplicaciones o programas que se encuentran funcionando en cualquier equipo computacional o de comunicacin. Las aplicaciones o Software ms comn es desarrollado con fines administrativos (Procesadores de palabras, hojas de clculo, 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, tambin llamados tags, trmino que proviene del ingls "etiqueta".- Estos identificadores son rdenes que das al navegador y que l interpreta para mostrar la pgina Web tal y como deseas. Cada identificador es una orden y puede indicar atributos del texto, posicin de imgenes, hipervnculos, as como cualquier otra propiedad de la pgina. TCP: Es el protocolo de transferencia entre computadores, bsicamente establece que la informacin 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 comn 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, ejecutndolo 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 grficos 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 identificacin en la red, es decir, la direccin en Internet de un site determinado. Abreviacin de "Uniform Resource Locator" o, en espaol, "Localizador de Recursos Uniforme". Es el formato usado para describir la direccin de cada pgina en la WWW. En la prctica, es lo que Ud. teclea como "http://..." o "ftp://...". V Video clip: Filmacin en vdeo con que se acompaa o se promociona una cancin. W Web: Es un servicio que ofrece un computador conectado a Internet. X XML: Extensible Markup Language. Una versin redefinida de SGML. Se le ve como el sucesor de HTML. Permite personalizar las etiquetas que describen la presentacin y el tipo de los elementos de datos. Es muy til para los sitios que mantienen grandes

72

volmenes de datos y para una intranet. Actualmente, slo Microsoft Internet Explorer 5 y Netscape 6 ofrecen un soporte para XML.

73