MANUAL TECNICO MANUAL TECNICO

MANUAL TECNICO
TABLA DE CONTENIDO
1.
INTRODUCCION……………………………………………………. Pág. 1
2.
OBJETIVO………..…………………………………………………. Pág. 2
3.
CONTENIDO………………………………………………………… Pág. 3
INTRODUCCION:
La finalidad de todo manual técnico es la de proporcionar al lector la lógica con
la que se ha desarrollado una aplicación, la cuál 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 aplicación en el desarrollo del sitio. Para un mayor detalle
acerca de cada una de las herramientas utilizadas, y su forma de operación y
aplicación, se recomienda consultar los manuales respectivos de cada una de
ellos.
OBJETIVO:
Proporcionar una guía para el lector, del desarrollo de la interfaz
instalación del sitio web del ISTU.
CONTENIDO:
DESARROLLO DE LA INTERFAZ
Desarrollo de páginas maestras e interfaces de usuario
Software utilizado: Visual Studio 2005 Professional Edition
Ejemplo: página maestra
y de la
Páginas maestras
Una página maestra es una página ASP.NET que tiene la extensión de nombre
de archivo .master. Las páginas maestras permiten crear un aspecto coherente
para las páginas de un sitio o aplicación.
Mediante páginas maestras puede crear una única plantilla de página y,
después, usarla como base de varias páginas de una aplicación, en lugar de
tener que crear cada página desde el principio.
Para representar en el explorador las páginas maestras, en realidad se
requieren dos partes independientes: la propia página maestra y una página de
contenido. Una página maestra define el diseño común y la forma de
exploración, además del contenido predeterminado común, para todas las
páginas de contenido asociadas. Una página maestra es única. Cuando se
representa en el explorador, proporciona el contenido común y la página de
contenido proporciona el contenido específico de la página.
Primero se crea una página maestra para definir tanto el aspecto como el
comportamiento estándar de todas las páginas del sitio o de un grupo concreto
de páginas. Después, se pueden crear páginas de contenido individuales con el
contenido único que se desea mostrar en cada página. La página maestra se
combina con las páginas de contenido para producir una página final que se
representa y combina el diseño de la página maestra con el contenido de la
página de contenido.
Por ejemplo, si se desea que cada página de un sitio use el mismo diseño de
tres columnas junto con un encabezado estándar y un menú de exploración,
puede crear una página maestra con el diseño deseado y después, asociar
todas las páginas del sitio a esa página maestra. Mediante la creación de una
sola página maestra, se evita tener que volver a crear el contenido común de
cada página. Además, si en algún momento decide cambiar el diseño de todas
las páginas, sólo tiene que modificar la página maestra.
Ejemplo: interfaz de usuario
Componentes básicos de una página ASP.NET:
En la primera línea destaca la directiva
<%@ Page Language="Vb" %>
que dice al servidor Web que se trata de una página ASP .NET y que usa
Visual Basic .NET como lenguaje de programación. También podría ser
<%@ Page Language="Cs" %>
en caso de usar C# como lenguaje de programación.
Después de la directiva @ Page vienen bloques de declaración de código, en
lenguaje Visual Basic .NET, incluidos en la etiqueta.
<script runat=server><script>
Aquí es donde debe ir todo o la mayor parte del código Visual Basic.
Después comienza el código HTML. Este código, junto con el resultado del
código ASP.NET, es enviado al cliente. En esta sección puede haber bloques
proveedores de código 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 declaración de código.
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 página pueden aparecer elementos conocidos de HTML pero
que se declaran de manera especial:
<asp:textbox runat=server></asp:textbox>
Separación de Código VB y contenido Html
Se puede mantener todo el código, tanto Visual Basic .NET como HTML, en un
mismo archivo con extensión aspx; el código Visual Basic iría sobre todo en
bloques de declaración de código (en la cabecera del documento) y el código
HTML iría en el cuerpo del documento. Esta situación provoca, en caso de
archivos largos, código que se lee y modifica con dificultad. Por ello, en muchas
ocasiones es útil mantener el contenido HTML de las páginas aspx fuera del
código Visual Basic, aumenta la legibilidad del código fuente de los archivos y
facilita su modificación por el programador. Se pueden usar formularios con
código de apoyo, llevando a estos formularios o archivos de código con
extensión vb todo el código Visual Basic y declarando en ellos versiones de los
controles de servidor que se usan en la página. Por ejemplo, para una etiqueta
llamada lbEtiqueta en el archivo aspx, se puede escribir en el archivo de
código vb:
Public lbEtiqueta As Label
De esa manera, el control de servidor lbEtiqueta (Label) de la página aspx es
una instancia de la variable lbEtiqueta de la clase declarada en el archivo vb y,
desde el código de la clase, se puede acceder a las propiedades del control a
pesar de encontrarse en 2 archivos diferentes.
Programación del lado del cliente: Javascript
JavaScript permite crear aplicaciones específicamente orientadas a su
funcionamiento en la red Internet. Usando JavaScript, se pueden crear páginas
HTML dinámicas 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 varían desde la gestión
de la información corporativa interna y su publicación en Intranets hasta la
gestión masiva de transacciones de comercio electrónico.
Los clientes Web que soportan JavaScript, tales como el Netscape
Navigator/Communicator (desde la versión 2.0) o el Microsoft Internet Explorer
(desde la versión 3.0) pueden interpretar sentencias JavaScript colocadas en
un documento HTML.
Cuando el cliente Web solicita una página de este tipo, el servidor envía por la
red al cliente el contenido completo del documento; incluyendo todos los
códigos HTML y las sentencias JavaScript que pudieran existir en éste.
El cliente lee entonces la página de forma secuencial, desde el principio hasta
el final, representando visualmente los códigos HTML y ejecutando las
sentencias JavaScript conforme avanza el proceso de lectura e interpretación.
Las sentencias JavaScript colocadas en una página Web pueden dar respuesta
a eventos de usuario, tales como la pulsación de un botón del ratón (clic), la
entrada de datos en un formulario y la navegación por una página.
Ejemplo de código Javascript
<SCRIPT LANGUAGE="JavaScript">
document.write('Texto generado desde Javascript')
</SCRIPT>
Diseño de Animaciones
Software utilizado: Adobe Flash CS3, Adobe Fireworks CS3
Ejemplo: Animación de entrada al sitio
Las películas de Flash son imágenes y animaciones para los sitios Web.
Aunque están compuestas principalmente por imágenes vectoriales, también
pueden incluir imágenes de mapa de bits y sonidos importados. Las películas
Flash pueden incorporar interacción para permitir la introducción de datos de
los espectadores, creando películas no lineales que pueden interactuar con
otras aplicaciones. Los diseñadores de la Web utilizan Flash para crear
controles de navegación, logotipos animados, animaciones de gran formato con
sonido sincronizado e incluso sitios Web con capacidad sensorial. Las películas
Flash son gráficos vectoriales compactos que se descargan y se adaptan de
inmediato al tamaño de la pantalla del usuario.
Ver una película de Flash en Flash Player es similar a ver una cinta de vídeo en
un aparato de vídeo, siendo Flash Player el dispositivo que se utiliza para ver
las películas creadas con la aplicación de creación de Flash.
Flash le permite animar objetos para dar la impresión de que se mueven por el
Escenario, así como cambiar su forma, tamaño, color, opacidad, rotación y
otras propiedades. También puede crear animación fotograma a fotograma,
creando una imagen diferente para cada fotograma. Otra posibilidad consiste
en crear animación interpolada, es decir, crear los fotogramas primero y último
de una animación y dejar que Flash cree los fotogramas intermedios.
Ejemplo: Mapa de Parques Recreativos
Flash incorpora varias herramientas para dibujar formas libres o líneas
precisas, formas, y trazados, así como para pintar objetos rellenos.
Para dibujar líneas y formas libres de manera muy similar a un lápiz real se
utiliza la herramienta Lápiz.
Para dibujar trazados precisos como líneas rectas o curvas se utiliza la
herramienta Pluma.
Para dibujar formas geométricas básicas, se utilizan las herramientas Línea,
Óvalo y Rectángulo.
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 líneas de
numerosas maneras. Los rellenos y los trazos son tratados como objetos
independientes.
Ejemplo: Animación de menú lateral
Linea de Tiempo
Elementos:
•
Fotograma: Un fotograma es un espacio en cual podemos tener objetos
vectoriales, imágenes o símbolos, un conjunto de fotogramas conforman
una animación.
•
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 posición 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 Línea de tiempo permite ver los fotogramas interpolados de una animación.
La Línea de tiempo organiza y controla el contenido de una película a través
del tiempo, en capas y fotogramas. Los componentes principales de la Línea de
tiempo son las capas, los fotogramas y la cabeza lectora.
Las capas de una película aparecen en una columna situada a la izquierda de
la Línea de tiempo. Los fotogramas contenidos en capa cada aparecen en una
fila a la derecha del nombre de la capa. El encabezado de la Línea de tiempo
situado en la parte superior de la Línea de tiempo indica los números de
fotogramas. La cabeza lectora indica el fotograma actual que se muestra en el
Escenario.
La información de estado de la Línea de tiempo situada en la parte inferior de la
Línea de tiempo indica el número de fotograma actual, la velocidad de
fotogramas actual y el tiempo transcurrido hasta el fotograma actual.
Cuando se realiza una acción cualquiera con el puntero del ratón sobre un
botón, se inserta automáticamente un manejador de eventos.
Eventos
Los eventos de ratón que Flash reconoce son los siguientes:
Presionar (Press):
Se produce al hacer clic con el ratón sobre el botón, mientras el puntero se
encuentra sobre el botón.
Liberar (Release):
Se produce al soltar el botón del ratón mientras el puntero se encuentra sobre
la instancia de botón. Equivalente a onClick. Es el evento por defecto en Flash.
Liberar fuera (Release Outside):
Se produce, una vez hemos hecho clic sobre el botón, al soltar el botón del
ratón fuera de la instancia del botón.
Situar sobre objeto (Roll Over):
Se produce al desplazar el puntero del ratón sobre el botón. equivalente a
onMouseOver.
Situar fuera de objeto (Roll Out):
Se produce al desplazar el puntero del ratón fuera del botón. Equivalente a
onMouseOut
Arrastrar sobre (Drag Over):
Se produce al presionar el botón del ratón mientras el puntero se encuentra
sobre el botón, se desplaza fuera del botón y, a continuación, vuelve a
desplazarse sobre el botón.
Arrastrar fuera (Drag Out):
Se produce cuando el botón del ratón se presiona con el puntero sobre el botón
y, a continuación, el puntero se desplaza fuera del botón.
Presión de tecla (Key Press):
Se produce cuando se presiona la tecla especificada en el campo asociado.
Ejemplo: diseño gráfico 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 sólido. Además,
también 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 dirección y longitud de la zona degradada.
Desarrollo de script: ActionScript
ActionScript es un lenguaje de programación orientado a objetos (OOP),
utilizado en especial en aplicaciones web animadas realizadas en el entorno
Adobe Flash, la tecnología de Adobe para añadir dinamismo al panorama web.
Fue lanzado con la versión 4 de Flash, y desde entonces hasta ahora, ha ido
ampliándose poco a poco, hasta llegar a niveles de dinamismo y versatilidad
muy altos en la versión 9 (Adobe Flash CS3) de Flash.
ActionScript es un lenguaje de script, esto es, no requiere la creación de un
programa completo para que la aplicación alcance los objetivos. El lenguaje
está basado en especificaciones de estándar de industria ECMA-262, un
estándar para Javascript de ahí que ActionScript se parezca tanto a Javascript.
La versión más extendida actualmente es ActionScript 3.0, que incluye clases y
es utilizada en la última versión de Adobe Flash. Incluye, además, 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
información definida anticipadamente acerca de los parques recreativos
que se encontraban al momento de la creación de este documento.
SERVIDOR WEB
1. Copiar todos los archivos y carpetas de la aplicación web a la carpeta
C:\Inetpub\wwwroot (si no se desea tener en el directorio raíz del
servidor web, deberá crearse un directorio virtual).
2. Abrir la configuración de equipos.
Clic derecho en Mi PC ->Administrar, o bien, en ejecutar, escriba el
comando compmgmt.msc
3. Configure la aplicación web. En Servicios y Aplicaciones -> Servicios de
Internet Information Server -> Sitios Web -> Sitio web predeterminado,
haga clic derecho y en seleccione la opción Propiedades.
4. Cambie las opciones predeterminadas del directorio donde se aloja la
aplicación web, añadiéndole la opción de Escritura. Nos aseguramos
que la carpeta esté configurada como aplicación.
5. Asegúrese de configurar la versión de ASP.NET como .NET Framework
2.0