9.

DISEÑO DE APLICACIÓN:
 Introducción

 Diseño de interfaz:
Cuando el usuario interactúa con un sistema basado en computadora, se aplica un conjunto
de principios fundamentales y lineamientos generales de diseño.
Los objetivos de la interfaz de una webapp son los siguientes: 1) establecer una ventana
congruente en el contenido y las funciones que brinda, 2) guiar al usuario a través de una
serie de interacciones con la webapp y 3) organizar las opciones de navegación y contenido
disponibles para el usuario. Para lograr una interfaz consistente, primero debe usarse un
diseño estético a fin de establecer un “aspecto” coherente. Esto incluye muchas
características, pero debe ponerse énfasis en la distribución y la forma de los mecanismos de
navegación. Para guiar la interacción del usuario, debe establecerse una metáfora apropiada
que permita al usuario tener una comprensión intuitiva de la interfaz. A fin de implementar
las opciones de navegación, puede seleccionarse alguno de los siguientes mecanismos:
• Menús de navegación: contienen palabras clave (organizadas en forma vertical u horizontal)
que enlistan contenido o funciones clave. Estos menús se implementan de modo que el
usuario pueda elegir entre una jerarquía de subtemas que se despliegan al seleccionar la
opción principal en el menú.
• Iconos gráficos: botones, interruptores y otras imágenes similares que permiten que el
usuario seleccione alguna propiedad o que especifique una decisión.
• Imágenes: cierta representación gráfica que el usuario selecciona para establecer un vínculo
hacia un objeto de contenido o función de la webapp.

 Diseño estético
También llamado diseño gráfico, es una actividad artística que complementa los aspectos
técnicos del diseño de las webapps. Sin estética, una webapp tal vez sea funcional pero no
atractiva. Con estética, una webapp lleva a sus usuarios a un mundo que los sitúa en un nivel
tanto visceral como intelectual.

Aspectos de la distribución
Toda página web tiene una cantidad limitada de “superficie” que se utiliza para dar apoyo a
la estética no funcional, características de navegación, contenido de información y funciones
dirigidas al usuario. El desarrollo de dicha superficie se planea durante el diseño estético.

Aspectos del diseño gráfico

El diseño gráfico toma en cuenta cada aspecto de la vista y sensación de la webapp. El
proceso de diseño gráfico comienza con la distribución y avanza hacia la consideración de
los esquemas de color globales; tipos, tamaños y estilos del texto; uso de medios
complementarios (audio, video y animación) y todos los demás elementos estéticos de una
aplicación.
  Diseño del contenido
El diseño del contenido se centra en dos tareas diferentes del diseño, cada una de las cuales
es dirigida por individuos que poseen habilidades distintas. En primer lugar, se desarrolla una
representación del diseño para los objetos del contenido y los mecanismos requeridos para
establecer una relación entre ellos. Además, se crea la información dentro de un objeto de
contenido específico. El trabajo posterior es llevado a cabo por escritores, diseñadores
gráficos y otros actores que generan el contenido que se usará en la webapp.

Objetos de contenido
La relación entre los objetos de contenido definidos como parte del modelo de requerimientos
para la webapp y los objetos de diseño que representan el contenido es análoga a la relación
que existe entre las clases de análisis y los componentes del diseño que se describió.

En el contexto del diseño de la webapp, un objeto de contenido se parece más a un objeto de

datos del software tradicional. Un objeto de contenido tiene atributos que incluyen
información de contenido específico (normalmente definido durante el modelado de los
requerimientos de la webapp) y atributos de implementación específica que se establecen
como parte del diseño.

Aspectos de diseño del contenido

Una vez modelados los objetos del contenido, la información que va a entregar cada objeto
debe registrar al autor y después editarse para que satisfaga del mejor modo posible las
necesidades del consumidor. La autoría del contenido es trabajo de especialistas en el área
relevante de quien diseña el objeto de contenido, dando un bosquejo de la información que
se va a entregar y una indicación de los tipos de objetos de contenido general que se usarán
para entregar la información.

 Diseño de la navegación
Una vez que la arquitectura de la webapp ha sido establecida y se han identificado sus
componentes (páginas, textos, subprogramas y otras funciones de procesamiento), deben
definirse las rutas de navegación que permitan a los usuarios acceder al contenido y a las
funciones de la web app. Para lograr esto, debe hacerse lo siguiente: 1) identificar la
semántica de navegación para los distintos usuarios del sitio y 2) definir la mecánica
(sintaxis) para efectuar la navegación.

Semántica de la navegación
Como muchas acciones del diseño de webapps, el diseño de la navegación comienza con la
consideración de la jerarquía del usuario y los casos de uso relacionados.
Sintaxis de navegación
Al avanzar en el diseño, la tarea siguiente es definir la mecánica de la navegación. Se dispone
de varias opciones para desarrollar un enfoque de implementación para cada USN:

• Vínculo de navegación individual: incluye vínculos basados en texto, iconos, botones e

interruptores, así como metáforas gráficas. Deben elegirse vínculos que sean apropiados para
el contenido y consistentes con la heurística que conduzca al diseño de una interfaz de alta
calidad.
• Barra de navegación horizontal: enlista las categorías principales de contenido o de
funciones en una barra que contiene vínculos apropiados. En general, se enlistan de cuatro a
siete categorías.
• Columna de navegación vertical: 1) enlista las principales categorías de contenido o
funciones o 2) enlista virtualmente todos los principales objetos de contenido que hay dentro
de la webapp. Si se elige la segunda opción, las columnas de navegación pueden “expandirse”
para que presenten objetos de contenido como parte de una jerarquía (seleccionar una entrada
en la columna original ocasiona una expansión que enlista una segunda capa de objetos de
contenido relacionados).
• Pestañas: metáfora que no es más que una variación de la barra o columna de navegación y
representa categorías de contenido o funciones como pestañas que se seleccionan cuando se
requiere un vínculo.
• Mapas del sitio: dan una tabla de contenido que incluye todo el contenido a fin de navegar
hacia todos los objetos y funciones contenidas dentro de la webapp.

 Diseño de la arquitectura:
El diseño arquitectónico está ligado con las metas establecidas para una webapp, con el
contenido que se va a presentar, con los usuarios que la visitarán y con la filosofía de
navegación adoptada. Como diseñador de la arquitectura, el lector debe identificar la
arquitectura del contenido y la de la webapp.

La arquitectura de la webapp se aboca a la forma en la que la aplicación queda estructurada

para administrar la interacción con el usuario, manejar tareas de procesamiento interno,
navegar con eficacia y presentar el contenido.

En la mayoría de los casos, el diseño arquitectónico se lleva a cabo en paralelo con el de la

interfaz, el estético y el del contenido. Como la arquitectura de la webapp tal vez esté muy
influida por la navegación, las decisiones que se tomen durante esta acción del diseño
influirán en el trabajo realizado durante el diseño de aquélla

Arquitectura del contenido

El diseño del contenido se centra en la definición de la estructura general de los hipermedios
de la webapp. Aunque en ocasiones se crean arquitecturas personalizadas, siempre se tiene
la opción de elegir entre cuatro distintas estructuras de contenido.
La arquitectura general de una webapp puede ser jerárquica, pero una parte de la estructura
puede tener características lineales y otra, forma de red. La meta del diseñador arquitectónico
es ajustar la estructura de la webapp con el contenido que va a presentarse y con el
procesamiento que va a efectuarse.

Arquitectura de las webapps

La arquitectura de una webapp describe una infraestructura que permite que un sistema o
aplicación basados en web alcance sus objetivos empresariales.

 Diseño de los componentes

Las webapps modernas dan funciones de procesamiento cada vez más complejas que: 1)
realizan un procesamiento localizado para generar contenido y capacidad de navegación en
forma dinámica, 2) proporcionan capacidad de cómputo o de procesamiento de datos que
resultan apropiados para el dominio del negocio de la webapp, 3) dan consulta y acceso
complejos a bases de datos y 4) establecen interfaces de datos con sistemas corporativos
externos. Para lograr estas capacidades (y muchas otras) deben diseñarse y construirse
componentes de programas con forma idéntica a los componentes del software tradicional.

Los métodos de diseño estudiados se aplican a los componentes de las webapps con poca, o
ninguna, modificación. El ambiente de implementación, los lenguajes de programación, los
patrones de diseño, estructuras y software, tal vez varíen un poco, pero el enfoque general
del diseño es el mismo.

 Casos de prueba

Un caso de prueba o test case es, en ingeniería del software, un conjunto de condiciones o
variables bajo las cuales un analista determinará si una aplicación, un sistema software
(software system), o una característica de éstos es parcial o completamente satisfactoria.
Se pueden realizar muchos casos de prueba para determinar que un requisito es
completamente satisfactorio. Con el propósito de comprobar que todos los requisitos de una
aplicación son revisados, debe haber al menos un caso de prueba para cada requisito a menos
que un requisito tenga requisitos secundarios. En ese caso, cada requisito secundario deberá
tener por lo menos un caso de prueba. Algunas metodologías como RUP recomiendan el
crear por lo menos dos casos de prueba para cada requisito. Uno de ellos debe realizar la
prueba positiva de los requisitos y el otro debe realizar la prueba negativa.
Si la aplicación es creada sin requisitos formales, entonces los casos de prueba se escriben
basados en la operación normal de programas de una clase similar.
  Detalles de instalación de paquetes y de sistema

La instalación de los programas computacionales (software) es el proceso fundamental por el

cual los nuevos programas son transferidos a un computador con el fin de ser configurados, y
preparados para ser desarrollados. Un programa recorre diferentes fases de desarrollo durante
su vida útil:

1. Programador: esto te sirve mucho para poder programar.

2. Desarrollo: cada programador necesita el programa instalado, pero con las
herramientas, códigos fuente, bancos de datos y etc, para modificar el programa.
3. Prueba: antes de la entrega al usuario, el software debe ser sometido a pruebas. Esto
se hace, en caso de software complejos, en una instalación ad hoc.
4. Producción: Para ser utilizado por el usuario final.
En cada una de esas fases la instalación cumple diferentes objetivos. En
español, programa sirve para señalar tanto un guion o archivo ejecutable.

10. PRUEBAS EFECTUADAS:

 Pruebas de diseño
 Pruebas de validación
11. IMPLANTACIÓN DEL SISTEMA
 Objetivo
 Descripción de actividades
 Conclusión
12. GARANTIA Y MANTENIMIENTO
 Objetivo
 Descripción y acuerdos
13. ESTUDIO DE MERCADO
14. METRICAS DEL PROCESO Y DEL PROYECTO
15. ADMINISTRACION DEL RIESGO
16. COSTOS Y PRECIOS
 Inversión inicial
 Precios y modelo de venta
 Tiempo de recuperación de la inversión
17. CONCLUSIONES
18. RECOMENDACIONES Y SUGERENCIAS
19. APENDICES Y NOMENCLATURAS
  Apéndice A: Grafica de Gantt de planeación inicial
 Apéndice B: Grafica de Gantt final
20. BIBLIOGRAFIA