Tesis Terminada - Universidad Tecnológica de Izúcar de Matamoros

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
[email protected]). 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