REPBLICA BOLIVARIANA DE VENEZUELA

MINISTERIO DEL PODER POPULAR PARA LA

EDUCACION UNIVERSITARIA
INSTITUTO UNIVERSITARIO DE TECNOLOGA DEL ESTADO BOLVAR
PROGRAMA NACIONAL DE FORMACION EN INFORMTICA
PROYECTO SOCIOTECNOLGICO IV
TRAYECTO IV SEMESTRE VIII

DISEO DE SOFTWARE

TUTOR ACADMICO:
OSMAR GONZLEZ

BACHILLERES:
JORGE SOLANO C.I 21.264.712
EIKERBETH RODRIGUEZ C.I 20.773.558
VITTORIO LO PRESTI C.I 23.731.481
GLORIA ARADE C.I 18.947.141
NGEL PREZ C.I 20.772.408

CIUDAD BOLVAR, ENERO DE 2016

CALIDAD DE DISEO DE WEBAPPS

El diseo permite al ingeniero web crear un modelo que pueda valorarse y
mejorarse entes de que se genere el contenido y el cdigo. Es la actividad en la
ingeniera que conduce a un producto de gran calidad. Las aplicaciones webs
exigen funcionabilidad, confiabilidad, usabilidad, eficiencia y capacidad de
mantenimiento, caractersticas que proporcionan una base til para valorar su
calidad.

USABILIDAD

FUNCIONABILIDA

CALIDAD DE
WEBAPPS

FIABILIDAD

EFICIENCIA

CAPACIDAD DE
MANTENIMIENTO

Comprensibilidad Global del sitio.

Servicios de ayuda y realimentacin en lnea.
Capacidades estticas y de interfaz.
Servicios especiales.

Capacidad de recuperacin y de bsqueda.

Servicios de bsqueda y navegacin.
Servicios relacionados con el dominio de la App.

Correcto procedimiento de vnculos.

Recuperacin de errores.
Validacin y recuperacin de entrada de usuario.

Desempeo en tiempos de respuesta.

Rapidez y generacin de pginas.
Rapidez y generacin de grficos.

Fcil de corregir.
Adaptabilidad.
Extensibilidad.

METAS DEL DISEO

Se sugiere un conjunto de metas para el diseo que son aplicables
virtualmente a toda webapp, sin importar su dominio de aplicacin, tamao o
complejidad.

Simplicidad: El contenido debe ser informativo pero sucinto y debe

utilizar un modo de entrega (texto, imgenes, video o audio) que resulte
apropiado para la informacin que se enve. La esttica debe ser
agradable pero no abrumadora.

Consistencia: Esta meta del diseo se aplica virtualmente a todo

elemento del modelo del diseo. El contenido debe construirse de modo
congruente (formato y tipografa del texto deben ser los mismos en todos
los documentos de texto; las imgenes deben tener coherencia en su
aspecto, color y estilo). El diseo grfico (esttica) debe presentar una
vista consistente en todas las partes de la webapp. El diseo
arquitectnico debe establecer plantillas que generen una estructura de
hipermedios constante. El diseo de la interfaz debe definir modos
consistentes de interaccin, navegacin y despliegue del contenido.

Identidad: Identificacin con el usuario.

Robustez: Con base en la identidad que se haya establecido, es

frecuente que una webapp haga una promesa implcita al usuario. ste
espera contenido y funciones robustas que sean relevantes para sus
necesidades. Si no existen o son insuficientes, es probable que la
webapp fracase.

Navegabilidad: El diseo de la esttica y la navegacin deben ser

Simples, intuitivos, predecibles y consistentes. Es decir, el usuario debe
comprender cmo moverse por la webapp sin tener que buscar vnculos
o instrucciones para la navegacin.

Apariencia visual: De todas las categoras de software, las aplicaciones

web son indiscutiblemente las ms visuales, dinmicas y estticas. La
belleza (atractivo visual) radica sin lugar a dudas en los ojos del
espectador, pero muchas caractersticas del diseo (aspecto y
sensacin del contenido, distribucin de la interfaz, coordinacin del
color, balance del texto, imgenes y otros medios) aumentan el atractivo
visual.

Compatibilidad: Una webapp se usar en varios ambientes (distinto

hardware, tipos de conexin, sistemas operativos, navegadores, etc.) y
debe disearse para que sea compatible con cada uno.

PIRMIDE DEL DISEO DE WEBAPPS

El diseo IWeb conduce a un modelo que contiene la mezcla adecuada de
esttica, contenido y tecnologa. La mezcla variar dependiendo de la
naturaleza de la WebApp, y, como consecuencia, las actividades de diseo
tambin variarn.

DISEO DE LA INTERFAZ
Cuando el usuario interacta con un sistema basado en computadora, se
aplica un conjunto de principios fundamentales y lineamientos generales de
diseo.
Estas caractersticas son:

Fcil de aprender

Fcil de navegar

Intuitiva

Consistente

Eficiente

Libre de errores

Funcional

Uno de los retos del diseo de la interfaz de las WebApps es la naturaleza

indeterminada del punto en el que entra el usuario. Es decir, ste puede
ingresar por una ubicacin inicial de la WebApp (la pgina de arranque, por
ejemplo) o por algn vnculo en cierto nivel inferior de la arquitectura de
aqulla. En algunos casos, la WebApp se disea de modo que redirija al
usuario a una ubicacin inicial, pero si esto es algo indeseable, entonces el
diseo debe dar caractersticas de navegacin en la interfaz que acompaen a
todos los objetos de contenido y de las cuales se disponga sin importar el modo
en el que el usuario ingrese al sistema.
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 travs de una serie de interacciones con la WebApp.
3. Organizar las opciones de navegacin y contenido disponibles para el
usuario.
Para lograr una interfaz consistente, primero debe usarse un diseo esttico
a

fin

de

establecer

un

aspecto

coherente.

Esto

incluye

muchas

caractersticas, pero debe ponerse nfasis en la distribucin y la forma de los

mecanismos de navegacin. Para guiar la interaccin del usuario, debe
establecerse una metfora apropiada que permita al usuario tener una
comprensin intuitiva de la interfaz. A fin de implementar las opciones de
navegacin, puede seleccionarse alguno de los siguientes mecanismos:

Mens de navegacin: contienen palabras clave (organizadas en forma

vertical u horizontal) que enlistan contenido o funciones clave. Estos
mens se implementan de modo que el usuario pueda elegir entre una

jerarqua de subtemas que se despliegan al seleccionar la opcin

principal en el men.

Iconos grficos: botones, interruptores y otras imgenes similares que

permiten que el usuario seleccione alguna propiedad o que especifique
una decisin.

Imgenes: cierta representacin grfica que el usuario selecciona para

establecer un vnculo hacia un objeto de contenido o funcin de la
WebApp.

DISEO DE ESTTICA
El diseo esttico, tambin llamado diseo grfico, es un esfuerzo artstico
que complementa los aspectos tcnicos de la ingeniera Web. Sin l una
WebApp puede ser funcional, pero sin atractivo. Con esttica, una webapp
lleva a sus usuarios a un mundo que los sita en un nivel tanto emocional como
intelectual.
Toda pgina web tiene una cantidad limitada de superficie que se utiliza
para dar apoyo a la esttica no funcional, caractersticas de navegacin,
contenido de informacin y funciones dirigidas al usuario. El desarrollo de dicha
superficie se planea durante el diseo esttico.
Igual que todos los temas de la esttica, cuando se disea la distribucin de
la pantalla no hay reglas absolutas. Sin embargo, es til considerar varios
lineamientos de la distribucin general:

No tema al espacio en blanco. No es aconsejable ocupar con

informacin cada centmetro cuadrado de una pgina web. El amasijo
resultante har difcil que el usuario identifique la informacin o las
caractersticas que necesita y crear un caos visual que no ser
agradable a los ojos.

Hacer nfasis en el contenido. Despus de todo, sta es la razn de

que el usuario est ah.

Organizar los elementos con una distribucin que vaya desde

arriba a la izquierda hacia abajo a la derecha. La gran mayora de

usuarios de una pgina web la recorrern en forma muy parecida a

como lo hacen con las hojas de un libro: desde arriba a la izquierda
hacia abajo a la derecha. Si los elementos de la distribucin tienen
prioridades especficas, aquellos que sean prioritarios deben colocarse
en la parte superior izquierda de la superficie de la pgina.

Agrupar la navegacin, el contenido y la funcin en forma

geogrfica dentro de la pgina. Los humanos buscamos patrones
virtualmente en todas las cosas. Si en una pgina web no hay patrones
discernibles, es probable que la frustracin del usuario aumente (debido
a la bsqueda innecesaria de la informacin requerida).

No aumente la superficie con la barra de desplazamiento. Aunque es

frecuente que se necesite el desplazamiento, la mayor parte de estudios
indican que los usuarios preferiran no hacerlo. Es mejor reducir el
contenido de la pgina o presentar en varias pginas el que sea
necesario.

Cuando se disee la distribucin hay que considerar la resolucin y

tamao de la ventana del navegador. En vez de definir tamaos fijos
dentro de una plantilla, el diseo debe especificar todos los parmetros
en trminos de porcentaje del espacio disponible.

DISEO DE CONTENIDO
El diseo de contenido se enfoca en dos asuntos de diseo diferentes, cada
uno lo abordan individuos con distintos conjuntos de habilidades. El diseo de
contenido desarrolla una representacin de diseo para los objetos de
contenido y representa los mecanismos que se requieren para que establezcan
sus relaciones uno con otro.

Objetos de contenido
La relacin entre objetos de contenido, defina como parte del modelo de
anlisis WebApp y los objetos de diseo que representan contenido es anloga
a la relacin entre las clases de anlisis y los componentes de diseo.

Un objeto de contenido tiene atributos que incluyen informacin especfica

de contenido y atributos especficos de implementacin que se especifican
como parte del diseo.

DISEO ARQUITECTNICO
El diseo arquitectnico est enlazado con las metas establecidas para la
WebApp, el contenido que se presentar, los usuarios que la vistan y la
filosofa de navegacin que se establezca.
La arquitectura de contenido se basa en la forma en que los objetos de
contenido se estructuran para su presentacin y navegacin.

Arquitectura de contenido
Se centra en la definicin de la estructura hipermedia global de la WebApp.
El diseo se puede elegir de cuatro diferentes estructuras de contenido:

Estructuras lineales.

Estructuras en retcula.

Las estructuras jerrquicas.

La estructura en red.

DISEO DE NAVEGACIN
Una vez que la arquitectura de la WebApp ha sido establecida y se han
identificado sus componentes (pginas, textos, subprogramas otras funciones
de procesamiento), deben definirse las rutas de navegacin que permitan a los
usuarios acceder al contenido y a las funciones de la WebApp. Para lograr
esto, debe hacerse lo siguiente:

Identificar la semntica de navegacin para diferentes usuarios del sitio

Definir la mecnica que logra la navegacin.

Semntica de navegacin
A medida que cada usuario interacte con la WebApp, encuentra una serie
de unidades semnticas de navegacin (USN): "conjunto de estructuras de
informacin y navegacin relacionadas que colaboran para el cumplimiento de
un subconjunto de requerimientos del usuario relacionados".

Una USN est compuesta por un conjunto de elementos de navegacin

llamados formas de navegar (FdN). Una FdN representa la mejor ruta de
navegacin a fin de logran una meta para un tipo de usuario especfico. Cada
FdN est organizada como un conjunto de nodos de navegacin (NN)
conectados por vnculos.
Durante las etapas iniciales del diseo, de navegacin se valora la
arquitectura de contenido de la WebApp para determinar una o ms FdN para
cada caso de uso. Como se anot anteriormente, una FdN identifica los nodos
de navegacin y los vnculos que permiten la navegacin entre ellos.

Sintaxis de navegacin
Conforme el diseo se lleva a cabo se define la mecnica de navegacin,
entre sus posibilidades tenemos:

Vinculo de navegacin individual: incluye vnculos basados en texto,

iconos, botones e interruptores, as como metforas grficas. Deben
elegirse vnculos que sean apropiados para el contenido y consistentes
con la heurstica que conduzca al diseo de una interfaz de alta calidad.

Barra de navegacin horizontal: enlista las categoras principales de

contenido o de funciones en una barra que contiene vnculos
apropiados. En general, se enlistan de cuatro a siete categoras.

Columna de navegacin vertical: 1) enlista las principales categoras

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 opcin, las columnas de navegacin pueden "expandirse" para
que presenten objetos de contenido como parte de una jerarqua
(seleccionar una entrada en la columna original ocasiona una expansin
que enlista una segunda capa de objetos de contenido relacionados).

Pestaas: metfora que no es ms que una variacin de la barra o

columna de navegacin y representa categoras de contenido o
funciones como pestaas que se seleccionan cuando se requiere un
vnculo.

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.

DISEO AL NIVEL DE COMPONENTES

El diseo a nivel de componentes se presenta a menudo despus que se ha
terminado la primera iteracin del diseo arquitectnico. y el objetivo de esta
fase es traducir el diseo en software operacional.
El diseo a nivel de componentes define las estructuras de datos, los
algoritmos, las caractersticas de la interfaz

y los mecanismos de

comunicacin asignados a cada componente de software. esta fase permite

revisar si los detalles de diseo son correctos y consistentes con las
representaciones iniciales de diseo

MTODOS DE DISEOS DE HIPERMEDIOS ORIENTADOS A OBJETOS

(OOHDM)
Las

metodologas

tradicionales

de

ingeniera

de

software,

las

metodologas para sistemas de desarrollo de informacin, no contienen una

buena abstraccin capaz de facilitar la tarea de especificar aplicaciones
hipermedia.
En hipermedia existen requerimientos que deben ser satisfechos en un
entorno de desarrollo unificado. Por un lado, la navegacin y el comportamiento
funcional de la aplicacin deberan ser integrados. Por otro lado, durante el
proceso de diseo se debera poder desacoplar las decisiones de diseo
relacionadas con la estructura navegacional de la aplicacin, de aquellas
relacionadas con el modelo del dominio.
OOHDM propone el desarrollo de aplicaciones hipermedia a travs de un
proceso compuesto por cuatro etapas: diseo conceptual, diseo navegacional,
diseo de interfaces abstractas e implementacin.

Diseo Conceptual
En OOHDM, el esquema conceptual est construido por clases, relaciones y
subsistemas. Las clases son descritas como en los modelos orientados a
objetos tradicionales. Sin embargo, los atributos pueden ser de mltiples tipos
para representar perspectivas diferentes de las mismas entidades del mundo
real.
Se usa notacin similar a UML (Lenguaje de Modelado Unificado) y tarjetas
de clases y relaciones similares a las tarjetas CRC (Clase Responsabilidad
Colaboracin). El esquema de las clases consiste en un conjunto de clases
conectadas por relaciones. Los objetos son instancias de las clases. Las clases
son usadas durante el diseo navegacional para derivar nodos, y las relaciones
que son usadas para construir enlaces.

Diseo Navegacional
La primera generacin de aplicaciones Web fue pensada para realizar
navegacin a travs del espacio de informacin, utilizando un simple modelo de
datos de hipermedia. En OOHDM, la navegacin es considerada un paso
crtico en el diseo aplicaciones. Un modelo navegacional es construido como
una vista sobre un diseo conceptual, admitiendo la construccin de modelos
diferentes de acuerdo con los diferentes perfiles de usuarios. Cada modelo
navegacional provee una vista subjetiva del diseo conceptual.

Diseo de Interfaz Abstracta

Una vez que las estructuras navegacionales son definidas, se deben
especificar los aspectos de interfaz. Esto significa definir la forma en la cual los
objetos navegacionales pueden aparecer, cmo los objetos de interfaz
activarn la navegacin y el resto de la funcionalidad de la aplicacin, qu
transformaciones de la interfaz son pertinentes y cundo es necesario
realizarlas.

Una clara separacin entre diseo navegacional y diseo de interfaz

abstracta permite construir diferentes interfaces para el mismo modelo
navegacional, dejando un alto grado de independencia de la tecnologa de
interfaz de usuario.

Implementacin
En esta fase, el diseador debe implementar el diseo. Hasta ahora, todos
los modelos fueron construidos en forma independiente de la plataforma de
implementacin; en esta fase es tenido en cuenta el entorno particular en el
cual se va a correr la aplicacin.
Al llegar a esta fase, el primer paso que debe realizar el diseador es definir
los tems de informacin que son parte del dominio del problema. Debe
identificar tambin, cmo son organizados los tems de acuerdo con el perfil del
usuario y su tarea; decidir qu interfaz debera ver y cmo debera
comportarse. A fin de implementar todo en un entorno Web, el diseador debe
decidir adems qu informacin debe ser almacenada.