MANUAL TECNICO

TABLA DE CONTENIDO

1.

INTRODUCCION. Pg. 1

2.

OBJETIVO... Pg. 2

3.

CONTENIDO Pg. 3

INTRODUCCION:
La finalidad de todo manual tcnico es la de proporcionar al lector la lgica con
la que se ha desarrollado una aplicacin, la cul se sabe que es propia de cada
programador; por lo que se considera necesario ser documentada.

Aclarando que este manual no pretende ser un curso de aprendizaje de cada

una de las herramientas empleadas para el desarrollo del sitio, sino
documentar su aplicacin en el desarrollo del sitio. Para un mayor detalle
acerca de cada una de las herramientas utilizadas, y su forma de operacin y
aplicacin, se recomienda consultar los manuales respectivos de cada una de
ellos.

OBJETIVO:
Proporcionar una gua para el lector, del desarrollo de la interfaz
instalacin del sitio web del ISTU.

CONTENIDO:
DESARROLLO DE LA INTERFAZ
Desarrollo de pginas maestras e interfaces de usuario
Software utilizado: Visual Studio 2005 Professional Edition
Ejemplo: pgina maestra

y de la

Pginas maestras
Una pgina maestra es una pgina ASP.NET que tiene la extensin de nombre
de archivo .master. Las pginas maestras permiten crear un aspecto coherente
para las pginas de un sitio o aplicacin.
Mediante pginas maestras puede crear una nica plantilla de pgina y,
despus, usarla como base de varias pginas de una aplicacin, en lugar de
tener que crear cada pgina desde el principio.
Para representar en el explorador las pginas maestras, en realidad se
requieren dos partes independientes: la propia pgina maestra y una pgina de
contenido. Una pgina maestra define el diseo comn y la forma de
exploracin, adems del contenido predeterminado comn, para todas las
pginas de contenido asociadas. Una pgina maestra es nica. Cuando se
representa en el explorador, proporciona el contenido comn y la pgina de
contenido proporciona el contenido especfico de la pgina.
Primero se crea una pgina maestra para definir tanto el aspecto como el
comportamiento estndar de todas las pginas del sitio o de un grupo concreto
de pginas. Despus, se pueden crear pginas de contenido individuales con el
contenido nico que se desea mostrar en cada pgina. La pgina maestra se
combina con las pginas de contenido para producir una pgina final que se
representa y combina el diseo de la pgina maestra con el contenido de la
pgina de contenido.
Por ejemplo, si se desea que cada pgina de un sitio use el mismo diseo de
tres columnas junto con un encabezado estndar y un men de exploracin,
puede crear una pgina maestra con el diseo deseado y despus, asociar
todas las pginas del sitio a esa pgina maestra. Mediante la creacin de una
sola pgina maestra, se evita tener que volver a crear el contenido comn de
cada pgina. Adems, si en algn momento decide cambiar el diseo de todas
las pginas, slo tiene que modificar la pgina maestra.

Ejemplo: interfaz de usuario

Componentes bsicos de una pgina ASP.NET:

En la primera lnea destaca la directiva
<%@ Page Language="Vb" %>
que dice al servidor Web que se trata de una pgina ASP .NET y que usa
Visual Basic .NET como lenguaje de programacin. Tambin podra ser
<%@ Page Language="Cs" %>
en caso de usar C# como lenguaje de programacin.

Despus de la directiva @ Page vienen bloques de declaracin de cdigo, en

lenguaje Visual Basic .NET, incluidos en la etiqueta.
<script runat=server><script>
Aqu es donde debe ir todo o la mayor parte del cdigo Visual Basic.
Despus comienza el cdigo HTML. Este cdigo, junto con el resultado del
cdigo ASP.NET, es enviado al cliente. En esta seccin puede haber bloques
proveedores de cdigo con instrucciones adicionales en ASP .NET, estos
bloques van entre las etiquetas <% y %> y no son compilados por lo que son
menos eficientes que los bloques de declaracin de cdigo.
Es fundamental tener una etiqueta Form con el atributo runat=server, ello
convierte al formulario en un Formulario Web que es supervisado por ASP
.NET
A lo largo de la pgina pueden aparecer elementos conocidos de HTML pero
que se declaran de manera especial:
<asp:textbox runat=server></asp:textbox>

Separacin de Cdigo VB y contenido Html

Se puede mantener todo el cdigo, tanto Visual Basic .NET como HTML, en un
mismo archivo con extensin aspx; el cdigo Visual Basic ira sobre todo en
bloques de declaracin de cdigo (en la cabecera del documento) y el cdigo
HTML ira en el cuerpo del documento. Esta situacin provoca, en caso de
archivos largos, cdigo que se lee y modifica con dificultad. Por ello, en muchas
ocasiones es til mantener el contenido HTML de las pginas aspx fuera del
cdigo Visual Basic, aumenta la legibilidad del cdigo fuente de los archivos y
facilita su modificacin por el programador. Se pueden usar formularios con
cdigo de apoyo, llevando a estos formularios o archivos de cdigo con
extensin vb todo el cdigo Visual Basic y declarando en ellos versiones de los

controles de servidor que se usan en la pgina. Por ejemplo, para una etiqueta
llamada lbEtiqueta en el archivo aspx, se puede escribir en el archivo de
cdigo vb:
Public lbEtiqueta As Label
De esa manera, el control de servidor lbEtiqueta (Label) de la pgina aspx es
una instancia de la variable lbEtiqueta de la clase declarada en el archivo vb y,
desde el cdigo de la clase, se puede acceder a las propiedades del control a
pesar de encontrarse en 2 archivos diferentes.
Programacin del lado del cliente: Javascript

JavaScript permite crear aplicaciones especficamente orientadas a su

funcionamiento en la red Internet. Usando JavaScript, se pueden crear pginas
HTML dinmicas que procesen la entrada del usuario y que sean capaces de
gestionar datos persistentes usando objetos especiales, archivos y bases de
datos relacionales.
Con JavaScript se pueden construir aplicaciones que varan desde la gestin
de la informacin corporativa interna y su publicacin en Intranets hasta la
gestin masiva de transacciones de comercio electrnico.
Los clientes Web que soportan JavaScript, tales como el Netscape
Navigator/Communicator (desde la versin 2.0) o el Microsoft Internet Explorer
(desde la versin 3.0) pueden interpretar sentencias JavaScript colocadas en
un documento HTML.
Cuando el cliente Web solicita una pgina de este tipo, el servidor enva por la
red al cliente el contenido completo del documento; incluyendo todos los
cdigos HTML y las sentencias JavaScript que pudieran existir en ste.

El cliente lee entonces la pgina de forma secuencial, desde el principio hasta

el final, representando visualmente los cdigos HTML y ejecutando las
sentencias JavaScript conforme avanza el proceso de lectura e interpretacin.
Las sentencias JavaScript colocadas en una pgina Web pueden dar respuesta
a eventos de usuario, tales como la pulsacin de un botn del ratn (clic), la
entrada de datos en un formulario y la navegacin por una pgina.
Ejemplo de cdigo Javascript
<SCRIPT LANGUAGE="JavaScript">
document.write('Texto generado desde Javascript')
</SCRIPT>

Diseo de Animaciones

Software utilizado: Adobe Flash CS3, Adobe Fireworks CS3

Ejemplo: Animacin de entrada al sitio

Las pelculas de Flash son imgenes y animaciones para los sitios Web.
Aunque estn compuestas principalmente por imgenes vectoriales, tambin
pueden incluir imgenes de mapa de bits y sonidos importados. Las pelculas
Flash pueden incorporar interaccin para permitir la introduccin de datos de
los espectadores, creando pelculas no lineales que pueden interactuar con
otras aplicaciones. Los diseadores de la Web utilizan Flash para crear
controles de navegacin, logotipos animados, animaciones de gran formato con
sonido sincronizado e incluso sitios Web con capacidad sensorial. Las pelculas

Flash son grficos vectoriales compactos que se descargan y se adaptan de

inmediato al tamao de la pantalla del usuario.
Ver una pelcula de Flash en Flash Player es similar a ver una cinta de vdeo en
un aparato de vdeo, siendo Flash Player el dispositivo que se utiliza para ver
las pelculas creadas con la aplicacin de creacin de Flash.

Flash le permite animar objetos para dar la impresin de que se mueven por el
Escenario, as como cambiar su forma, tamao, color, opacidad, rotacin y
otras propiedades. Tambin puede crear animacin fotograma a fotograma,
creando una imagen diferente para cada fotograma. Otra posibilidad consiste
en crear animacin interpolada, es decir, crear los fotogramas primero y ltimo
de una animacin y dejar que Flash cree los fotogramas intermedios.
Ejemplo: Mapa de Parques Recreativos

Flash incorpora varias herramientas para dibujar formas libres o lneas

precisas, formas, y trazados, as como para pintar objetos rellenos.
Para dibujar lneas y formas libres de manera muy similar a un lpiz real se
utiliza la herramienta Lpiz.

Para dibujar trazados precisos como lneas rectas o curvas se utiliza la

herramienta Pluma.
Para dibujar formas geomtricas bsicas, se utilizan las herramientas Lnea,
valo y Rectngulo.
Para crear trazos similares a los obtenidos al pintar en un lienzo, se utiliza la
herramienta Pincel.
Al utilizar una herramienta de dibujo o pintura para crear un objeto, la
herramienta aplica los atributos actuales de relleno y trazo al objeto. Para
cambiar los atributos de relleno y trazo de los objetos existentes, puede utilizar
las herramientas Cubo de pintura y Bote de tinta.
Una vez creados, remodelar los contornos de las formas y las lneas de
numerosas maneras. Los rellenos y los trazos son tratados como objetos
independientes.

Ejemplo: Animacin de men lateral

Linea de Tiempo
Elementos:

Fotograma: Un fotograma es un espacio en cual podemos tener objetos

vectoriales, imgenes o smbolos, un conjunto de fotogramas conforman
una animacin.

Puede realizar las siguientes modificaciones tanto a los fotogramas

como a los fotogramas clave:
Insertar, seleccionar, eliminar y mover fotogramas y fotogramas
clave.
Arrastrar fotogramas y fotogramas clave a una nueva posicin en
la misma capa o en otra diferente.
Copiar y pegar fotogramas y fotogramas clave.
Convertir fotogramas clave en fotogramas.

Arrastrar un elemento desde la ventana Biblioteca hasta el

Escenario y agregar el elemento al fotograma clave actual.
La Lnea de tiempo permite ver los fotogramas interpolados de una animacin.
La Lnea de tiempo organiza y controla el contenido de una pelcula a travs
del tiempo, en capas y fotogramas. Los componentes principales de la Lnea de
tiempo son las capas, los fotogramas y la cabeza lectora.
Las capas de una pelcula aparecen en una columna situada a la izquierda de
la Lnea de tiempo. Los fotogramas contenidos en capa cada aparecen en una
fila a la derecha del nombre de la capa. El encabezado de la Lnea de tiempo
situado en la parte superior de la Lnea de tiempo indica los nmeros de
fotogramas. La cabeza lectora indica el fotograma actual que se muestra en el
Escenario.
La informacin de estado de la Lnea de tiempo situada en la parte inferior de la
Lnea de tiempo indica el nmero de fotograma actual, la velocidad de
fotogramas actual y el tiempo transcurrido hasta el fotograma actual.
Cuando se realiza una accin cualquiera con el puntero del ratn sobre un
botn, se inserta automticamente un manejador de eventos.
Eventos
Los eventos de ratn que Flash reconoce son los siguientes:
Presionar (Press):
Se produce al hacer clic con el ratn sobre el botn, mientras el puntero se
encuentra sobre el botn.
Liberar (Release):
Se produce al soltar el botn del ratn mientras el puntero se encuentra sobre
la instancia de botn. Equivalente a onClick. Es el evento por defecto en Flash.

Liberar fuera (Release Outside):

Se produce, una vez hemos hecho clic sobre el botn, al soltar el botn del
ratn fuera de la instancia del botn.
Situar sobre objeto (Roll Over):
Se produce al desplazar el puntero del ratn sobre el botn. equivalente a
onMouseOver.
Situar fuera de objeto (Roll Out):
Se produce al desplazar el puntero del ratn fuera del botn. Equivalente a
onMouseOut
Arrastrar sobre (Drag Over):
Se produce al presionar el botn del ratn mientras el puntero se encuentra
sobre el botn, se desplaza fuera del botn y, a continuacin, vuelve a
desplazarse sobre el botn.
Arrastrar fuera (Drag Out):
Se produce cuando el botn del ratn se presiona con el puntero sobre el botn
y, a continuacin, el puntero se desplaza fuera del botn.
Presin de tecla (Key Press):
Se produce cuando se presiona la tecla especificada en el campo asociado.

Ejemplo: diseo grfico de botones

Degradados
La herramienta Degradado est en el mismo grupo de herramientas que Cubo
de pintura. Funciona de forma similar a la herramienta Cubo de pintura, pero
rellena los objetos con un degradado y no con un color slido. Adems,
tambin mantiene las propiedades del ltimo elemento utilizado.
Para utilizar la herramienta Degradado:
Haga clic en la herramienta Cubo de pintura del panel Herramientas y elija la
herramienta Degradado en el men emergente.
Elija entre los siguientes atributos en el Inspector de propiedades:
Opciones de relleno es un men emergente en el que se puede elegir un tipo
de degradado.
Cuadro Color de relleno, cuando se hace clic en l, se muestra la ventana
emergente Editar degradado, donde se pueden definir varias opciones de color
y transparencia.
Borde determina si el degradado tiene un borde de relleno duro, suavizado o
fundido. Si elige un borde fundido, es posible decidir la cantidad del fundido.
Textura ofrece muchas opciones, entre las que se incluyen Veta, Metal, Malla
y Lija.
Haga clic y arrastre el puntero para establecer un punto inicial para el
degradado as como la direccin y longitud de la zona degradada.

Desarrollo de script: ActionScript

ActionScript es un lenguaje de programacin orientado a objetos (OOP),

utilizado en especial en aplicaciones web animadas realizadas en el entorno
Adobe Flash, la tecnologa de Adobe para aadir dinamismo al panorama web.
Fue lanzado con la versin 4 de Flash, y desde entonces hasta ahora, ha ido
amplindose poco a poco, hasta llegar a niveles de dinamismo y versatilidad
muy altos en la versin 9 (Adobe Flash CS3) de Flash.
ActionScript es un lenguaje de script, esto es, no requiere la creacin de un
programa completo para que la aplicacin alcance los objetivos. El lenguaje
est basado en especificaciones de estndar de industria ECMA-262, un
estndar para Javascript de ah que ActionScript se parezca tanto a Javascript.

La versin ms extendida actualmente es ActionScript 3.0, que incluye clases y

es utilizada en la ltima versin de Adobe Flash. Incluye, adems, Flash Player
9 que mejora notablemente el rendimiento y disminuye el uso de recursos en
las aplicaciones Flash.

INSTALACION DEL SITIO WEB

BASE DE DATOS
1. Una vez que est instalado Microsoft SQLServer 2000, abrir Enterprise
Manager para administrar las bases de datos.
2. En la estructura de rbol que aparece a lado izquierdo, seleccionar
(local)(Windows NT), dentro de Microsoft SQL Servers ->SQL Server
Group.
3. Expandir la rama del rbol en Databases, si no se encuentra la base de
datos istu, se proceder a crearla.

4. Luego se crear la estructura de tablas (esquema de la base de datos),

con el archivo ISTU.SQL desde el SQL Quero Analizer.

Ejecute la consulta para crear la estructura de las tablas.

5. Opcionalmente, puede restaurarse los datos de la base de datos con la

informacin definida anticipadamente acerca de los parques recreativos
que se encontraban al momento de la creacin de este documento.

SERVIDOR WEB
1. Copiar todos los archivos y carpetas de la aplicacin web a la carpeta
C:\Inetpub\wwwroot (si no se desea tener en el directorio raz del
servidor web, deber crearse un directorio virtual).
2. Abrir la configuracin de equipos.

Clic derecho en Mi PC ->Administrar, o bien, en ejecutar, escriba el

comando compmgmt.msc

3. Configure la aplicacin web. En Servicios y Aplicaciones -> Servicios de

Internet Information Server -> Sitios Web -> Sitio web predeterminado,
haga clic derecho y en seleccione la opcin Propiedades.

4. Cambie las opciones predeterminadas del directorio donde se aloja la

aplicacin web, aadindole la opcin de Escritura. Nos aseguramos
que la carpeta est configurada como aplicacin.

5. Asegrese de configurar la versin de ASP.NET como .NET Framework

2.0