DISEÑO DE SISTEMAS

GRUPO 301309-20

UNIT 2 - STEP 3 - SYSTEM DESIGN AND DEVELOPMENT

PRESENTADO POR

JAVIER FELIPE ARIAS FERNANDEZ

C.C. 1018412335

DIEGO ARMANDO MOLINA OLAYA

C.C. 1019007239

MONICA ANDREA TABARES

CC 1019013676

ANDRES CAMILO TAUTIVA

C.C. 1016107393

TUTOR

MOISES DE JESUS RODRIGUEZ BOLAÑO

NOVIEMBRE – 2018

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA

Contenido

1. Enuncie los principios de diseño que “den el control al usuario”.............4

2. Enuncie los principios de diseño “reduzcan la necesidad de memorización
por parte del usuario”..........................................................................4
3. Enuncie principios de diseño que “hagan consistente a la interfaz”.........5
4. Indique como hacer distribuciones de pantalla con la definición de los
temas principales y secundarios del menú para el sistema de información.. .5
5. Desarrolle varias distribuciones de pantalla con la definición de los temas
de menú principales y secundarios para el sistema de información.............6
6. Describa el enfoque de las herramientas de ayuda para el usuario a fin
de hacer el modelo del diseño del análisis de...........................................6
7. Dé algunos ejemplos que ilustren por qué la variabilidad del tiempo de
respuesta llega a ser importante...........................................................6
8. Desarrolle un enfoque que integre de manera automática los mensajes
de error y las herramientas de ayuda para el usuario. Es decir, el sistema
reconocerá automáticamente el tipo de error y dará una ventana de ayuda
con sugerencias para corregirlo. Realice un diseño del software
razonablemente completo que tome en cuenta las estructuras de los datos y
algoritmos..........................................................................................7
9. Analice las tres “partes” de un patrón de diseño y dé un ejemplo
concreto de cada uno en algún campo distinto al del software....................7
10. ¿Cuál es la diferencia entre un patrón no generativo y uno generativo?
7
11. ¿En qué difieren los patrones arquitectónicos de los patrones de
componentes?....................................................................................7
12. ¿Qué es estructura y en qué difiere de un patrón? ¿Qué es un idioma y
en qué se diferencia de un patrón?........................................................8
13. Encuentre cinco repositorios de patrones y presente la descripción
abreviada de los tipos de patrones que contenga cada uno........................8
14. Encuentre tres repositorios de patrones de interfaz de usuario.
Seleccione uno de cada repositorio y haga una descripción breve de él.......9
15. Indique los atributos de la calidad de las webapps. Seleccione tres que
crea que son las más importantes y construya un argumento que explique
por qué debe hacerse énfasis en cada una durante el trabajo de diseño de
webapps............................................................................................9
16. El lector es un diseñador de webapps de Corporación de Aprendizaje
del Futuro, compañía de aprendizaje a distancia. Trata de implementar un
“motor de aprendizaje” basado en internet que permita entregar el
contenido de un curso a los estudiantes. El motor de aprendizaje brinda la
infraestructura básica para entregar el contenido del aprendizaje sobre
cualquier tema (los diseñadores del contenido prepararán el que sea
apropiado). Desarrolle el diseño de un prototipo de interfaz para el motor de
aprendizaje......................................................................................10
17. ¿Cuál es la diferencia entre la arquitectura del contenido y la de una
webapp?..........................................................................................11
18. Utilice UML para desarrollar tres o cuatro representaciones del diseño
de objetos de contenido.....................................................................12
19. ¿Cuál es la diferencia entre la sintaxis de navegación y la semántica de
ésta?13
20. Escriba un texto breve sobre un método de diseño de hipermedios que
no sea MDHOO..................................................................................14
BIBLIOGRAFÍA..................................................................................15
 INTRODUCCION

El siguiente trabajo describe los factores que se deben tener en cuenta en el

diseño de un sistema de información, sus procesos y generar resultados.

Con el fin de aprender y analizar los conceptos necesarios para ello los
estudiantes resolveremos distintas preguntas con respecto al diseño de
interfaz de usuario, patrones de diseño, diseño de webapps.
 OBJETIVOS

Identificar e implementar las características y elementos de la fuente de

diseño de entradas, validaciones de datos, diseño y captura de datos de
documentos para la entrada, además las características y elementos de
diseño de productos, tipos de productos y como presentar la información.
 MARCO TEORICO
1. Enuncie los principios de diseño que “den el control al usuario”.

Definir modos de interacción de manera que no se obligue al usuario a

realizar acciones innecesarias o no deseadas: Se refiere a dar la posibilidad
al usuario de usar la interfaz de acuerdo a sus necesidades sin forzar modos
o interfaces que resulten improductivas o imprácticas.
Dar una interacción flexible: Ofrecer la posibilidad al usuario de interactuar
de maneras diferentes con el programa en la medida de lo práctico y lo
posible. Ya sea la posibilidad de usar diferentes métodos de entrada como
los periféricos, así como interactuar con objetos lógicos del sistema
operativo para ajustarse a un proceso más interactivo.
Permitir la interacción del usuario sea interrumpible y también reversible: Se
refiere a dar la posibilidad al usuario de interrumpir alguna acción o acciones
sin que esto afecte el funcionamiento en general ni lo realizado por el
usuario en el programa. También debe poderse reversar o deshacer lo
realizado sin mayor perjuicio o demora.
Facilitar la interacción a medida que aumente la habilidad y permitir que
aquélla se personalice: A medida que el usuario utiliza el software puede
desarrollar interés por una interacción más avanzada o acorde a sus
necesidades que podrían requerir mayor complejidad, por esto debe
considerarse ofrecer la posibilidad de usar macros.
Ocultar los tecnicismos internos al usuario ocasional: Básicamente seguir
buenas prácticas del diseño de software que permita encapsular el
funcionamiento interno del software con el fin de que el usuario final no
tenga que ser expuesto a complejidades internas que pueden desestimular
su uso del software.
Diseñar la interacción directa con objetos que aparezcan en la pantalla: Dar
la posibilidad de interactuar con los objetos que hacen parte de la interfaz
con el fin de aumentar la interactividad. Esto aumenta la sensación de
control de los usuarios y estimula su uso gracias a la mayor familiaridad que
simula una interacción con objetos del mundo real.

2. Enuncie los principios de diseño “reduzcan la necesidad de

memorización por parte del usuario”.
Reducir la demanda de memoria de corto plazo: Se puede reducir la
necesidad de que el usuario tenga que ocupar demasiada memoria de corto
plazo en recordar acciones y procesos necesarios para la interacción con la
interfaz, por esto se deben implementar pistas visuales y señalizaciones.
Hacer que lo preestablecido sea significativo: Indica que, si bien la
personalización es conveniente y necesaria en algunos casos, aquello que se
defina como preestablecido debe ofrecer la mejor opción generalizable a las
necesidades de aquellos definidos como usuarios primarios del software.
Definir atajos que sean intuitivos: Deben usarse principio de mnemotecnia
con aquellos atajos ya sea visuales, combinaciones de teclas, sonidos u
otros. Por ejemplo, que estos atajos estén relacionados con la función que
van a realizar.
La distribución visual de la interfaz debe basarse en una metáfora del mundo
real: Claves visuales que permitan una mayor inmersión y memorización, es
decir que tengan mayor relación con el mundo real y las funciones que el
usuario va a desempeñar en el software.
Revelar la información de manera progresiva: Se refiere a los niveles de
jerarquía en los cuales se debe presentar la información al usuario.
Partiendo desde una interfaz general a interfaces específicas de acuerdo a la
interacción del usuario con el software.

3. Enuncie principios de diseño que “hagan consistente a la interfaz”.

 Principio 1: El diseño debe poderse rastrear hasta el modelo de

requerimientos.

 Principio 2: Siempre tomar en cuenta la arquitectura del sistema que

se va a construir.

 Principio 3: El diseño de los datos es tan importante como el de las

funciones de procesamiento.

 Principio 4: Las interfaces (tanto internas como externas) deben

diseñarse con cuidado.

 Principio 5: El diseño de la interfaz de usuario debe ajustarse a las

necesidades del usuario final. Sin embargo, en todo caso debe resaltar
la facilidad de uso.
  Principio 6: El diseño en el nivel de componentes debe tener
independencia funcional.

 Principio 7: Los componentes deben estar acoplados con holgura entre

sí y con el ambiente externo.

 Principio 8: Las representaciones del diseño (modelos) deben

entenderse con facilidad.

 Principio 9: El diseño debe desarrollarse en forma iterativa. El

diseñador debe buscar más sencillez en cada iteración.

4. Indique como hacer distribuciones de pantalla con la definición de los

temas principales y secundarios del menú para el sistema de
información.

5. Desarrolle varias distribuciones de pantalla con la definición de los

temas de menú principales y secundarios para el sistema de información.

6. Describa el enfoque de las herramientas de ayuda para el usuario a fin

de hacer el modelo del diseño del análisis de.

Entre los patrones de diseño de la interfaz de usuario se encuentran las

herramientas de ayuda para realizar un análisis. Los aspectos que se sugiere
deben tenerse en cuenta son los siguientes:
Preguntarse si habrá ayuda para todas las funciones del sistema y en todo
momento. Esto ayuda a definir qué conjunto de funciones deberían
documentarse o si todas deberían documentarse e incluirse para acceso
permanente.
Preguntarse como pediría ayuda el usuario. Pudiese ser mediante menús,
íconos, teclas, comandos y recientemente comandos de voz etc.
Preguntarse cómo se presentará al ayuda. Un punto muy importante a
considerar pues requiere analizar un diseño de la interfaz de ayuda que
pudiera tener un impacto positivo significativo en el uso del software.
Preguntarse como volverá el usuario a la interacción normal. Hace parte del
diseño de la interfaz de ayuda pues pueden considerarse varias posibilidades
para volver desde la interfaz de ayuda al trabajo que realizaba el usuario.
Los ejemplos son comandos, combinaciones de teclas, botones para cerrar
ventanas, secuencias de control entre otros.
Preguntarse como ayudaría que la información estuviera estructurada. De
acuerdo a las características del programa debe analizarse como se
desplegaría la información de ayuda, es decir, de forma plana, en modo
jerárquico y recientemente incluso reemplazando la interfaz para servir
como guía de ayuda en el uso de la misma.

7. Dé algunos ejemplos que ilustren por qué la variabilidad del tiempo de

respuesta llega a ser importante.

Un ejemplo que puede ser la respuesta inmediata que tiene uno al enviar un
mensaje de WhatsApp, entre más rápido se envié y procesé la información
en tiempo real, la sensación de comunicación inmediata la percibe
positivamente el cliente.

En una aplicación de música lo importante es la reacción de los botones en

su menú, lo cual entre más intuitivo y claro sea la selección de la música, es
más cómodo seleccionar la música que le gusta al usuario.

8. Desarrolle un enfoque que integre de manera automática los mensajes

de error y las herramientas de ayuda para el usuario. Es decir, el sistema
reconocerá automáticamente el tipo de error y dará una ventana de
ayuda con sugerencias para corregirlo. Realice un diseño del software
razonablemente completo que tome en cuenta las estructuras de los
datos y algoritmos.

9. Analice las tres “partes” de un patrón de diseño y dé un ejemplo

concreto de cada uno en algún campo distinto al del software.

Para dar un ejemplo concreto de las tres partes de un patrón de diseño se

realiza el siguiente análisis:

El contexto puede ser la necesidad de movilizarse de Fontibón hasta el

Centro de Bogotá en el menor tiempo posible para llegar al trabajo.

El problema surge cuando verifica la billetera y solo cuenta con 3000

pesos para poder desplazarse en el menor tiempo posible.
 Soluciones que dispone la persona es el desplazamiento en bicicleta, de
ese modo se ahorra 3000 pesos y los puede utilizar de otra forma, otra
solución es tomar Sitp con una ruta que valla al centro, el inconveniente
es que hay un tranco en su trayecto, o puede tomar Transmilenio en el
portal y llegar rápido pero solo tendría 700 para utilizarlo en otra forma.

De ese modo realizamos el análisis en el cual diseñamos un patrón.

10. ¿Cuál es la diferencia entre un patrón no generativo y uno generativo?

Con patrón generativo se refiere a aquellas secuencias de eventos o

patrones que constituyen una descripción de un aspecto importante y
repetitivo de un sistema que además hace posible evidenciar la
implementación de tal descripción o hallar una solución, posibilitando
mediante este patrón reproducir o crear estas mismas secuencias de eventos
dentro de un sistema de fuerzas que son únicas en un contexto
determinado.
La diferencia subyace en que si bien un patrón no generativo también
describe una secuencia de eventos para construir un patrón no ofrece una
solución ni una manera clara de implementar las descripciones que produce
para resolver un problema.

11. ¿En qué difieren los patrones arquitectónicos de los patrones de

componentes?

 Los patrones arquitectónicos, o patrones de arquitectura, ofrecen

soluciones a problemas de arquitectura de software en ingeniería de
software. Dan una descripción de los elementos y el tipo de relación
que tienen junto con un conjunto de restricciones sobre cómo pueden
ser usados.

 Un componente describe los componentes que están configurados en

una máquina virtual. Utilice los componentes para crear patrones.
Cada componente tiene un conjunto de propiedades (parámetros) que
se utilizan durante el despliegue para ayudarle a definir la
configuración global del sistema virtual. Los componentes también
pueden contener complementos y scripts que pueden tener
parámetros. Puede personalizar un componente modificando sus
parámetros, añadiendo un paquete script, o ambas cosas. Debe
 combinar uno o más componentes en un patrón para desplegar un
componente en un sistema virtual.

12. ¿Qué es estructura y en qué difiere de un patrón? ¿Qué es un idioma y

en qué se diferencia de un patrón?

 “Un patrón es un pedazo de información con nombre, instructivo y

significante, que captura la esencia de una familia exitosa y completa
de soluciones a un problema recurrente en un contexto dado”.

 “Cada patrón es una regla de tres partes, la cual expresa una relación
entre un contexto dado, un conjunto de fuerzas que ocurren
repetitivamente en ese contexto y cierta configuración de software que
permite a esas fuerzas resolverse por sí mismas”.

 Los lenguajes de patrón se utilizan para formalizar los valores de

decisiones cuya efectividad resulta obvia a través de la experiencia,
pero que es difícil de documentar y pasar a los aprendices. También
son herramientas útiles a la hora de estructurar el conocimiento y
comprender sistemas complejos sin caer en la simplificación extrema.

13. Encuentre cinco repositorios de patrones y presente la descripción

abreviada de los tipos de patrones que contenga cada uno.

 Abstract Factory: Nos provee una interfaz que delega la creación de

un conjunto de objetos relacionados sin necesidad de especificar en
ningún momento cuáles son las implementaciones concretas.

 Factory Method: Expone un método de creación, delegando en las

subclases la implementación de este método.

 Builder: Separa la creación de un objeto complejo de su estructura,

de tal forma que el mismo proceso de construcción nos puede servir
para crear representaciones diferentes.

 Singleton: limita a uno el número de instancias posibles de una clase

en nuestro programa, y proporciona un acceso global al mismo.

 Prototype: Permite la creación de objetos basados en “plantillas”. Un

nuevo objeto se crea a partir de la clonación de otro objeto.
14. Encuentre tres repositorios de patrones de interfaz de usuario.
Seleccione uno de cada repositorio y haga una descripción breve de él.

 Creacionales: Su objetivo es resolver los problemas de creación

de instancia. Por ejemplo:

 Prototype (prototipo): Clona las instancias ya existentes.

 Estructurales: Su nombre es muy descriptivo, se ocupa de

resolver problemas sobre la estructura de las clases. Por
ejemplo:

 Bridge (Puente) Separa la abstracción de la implementación.

 De comportamiento: Nos ayuda a resolver problemas

relacionados con el comportamiento de la aplicación. Ofrece
soluciones respecto a la interacción y responsabilidad entre
objetos y clases. Por ejemplo:

 Observer (Observador) “Define una dependencia de uno-a-

muchos entre objetos, de forma que cuando un objeto cambie
de estado se notifique y actualicen automáticamente todos los
objetos que dependen de él.”

15. Indique los atributos de la calidad de las webapps. Seleccione tres que
crea que son las más importantes y construya un argumento que
explique por qué debe hacerse énfasis en cada una durante el trabajo de
diseño de webapps.

 Seguridad. Dado que las WebApps están disponibles a través de1

acceso por red, es difícil, si no imposible, limitar la población de
usuarios finales que pueden acceder a la aplicación. Con objeto de
proteger el contenido confidencial y de proporcionar formas seguras de
transmisión de datos, deberán implementarse fuertes medidas de
seguridad en toda la infraestructura que apoya una WebApp y dentro
de la misma aplicación.
  Intensivas de Red. Por su propia naturaleza, una WebApp es intensiva
de red. Reside en una red y debe dar servicio a las necesidades de una
comunidad diversa de clientes. Una WebApp puede residir en Internet
(haciendo posible así una comunicación abierta para todo el mundo).
De forma alternativa, una aplicación se puede ubicar en una Intranet
(implementando la comunicación a través de redes de una
organización) o una Extranet (comunicación entre redes).

 Estética. Una parte innegable del atractivo de una WebApp es su

apariencia e interacción. Cuando se ha diseñado una aplicación con el
fin de comercializarse o vender productos o ideas, la estética puede
tener mucho que ver con el éxito del diseño técnico. Las características
generales destacadas anteriormente se aplican a todas las WebApps,
pero con un grado diferente de influencia.

16. El lector es un diseñador de webapps de Corporación de Aprendizaje

del Futuro, compañía de aprendizaje a distancia. Trata de implementar
un “motor de aprendizaje” basado en internet que permita entregar el
contenido de un curso a los estudiantes. El motor de aprendizaje brinda
la infraestructura básica para entregar el contenido del aprendizaje sobre
cualquier tema (los diseñadores del contenido prepararán el que sea
apropiado). Desarrolle el diseño de un prototipo de interfaz para el motor
de aprendizaje.

El objetivo de una IU es crear una experiencia al usuario.

Hay unas reglas básicas para diseñar una interfaz de usuario, no olvidando
que lo primordial es suplir las necesidades del usuario es decir que esto es lo
que debe impulsar el diseño, dado que el enfoque en si es el usuario.
¿Cuáles serían las necesidades del usuario?
 Cumplir la tarea con facilidad, es decir que la IU tiene que trabajar
bien y consistentemente.

 Completar la tarea rápidamente, es decir la IU debe llevar comandos

uy responder rápida e intuitivamente.

 Disfrutar la experiencia, la interfaz de usuario debe ser visualmente

interesante para el usuario.
Estas necesidades de usuario deben ser prioridad para el diseñador, por ello
el proceso de diseñar un IU puede resultar ser una tarea extenuante, puesto
que debemos centralizar completamente en el cliente potencial y la utilidad
del programa para este.
Hay unas reglas básicas que pueden ayudar a guiarnos en el diseño IU
resulte un éxito.
 Piensa en la experiencia del usuario: es importante no asumir nada lo
ideal es conversar con el cliente, una entrevista cara a cara es lo
mejor, preguntar detalladamente que es lo que quiere lograr, que
características disfruta y detesta. Hay que tener la mente abierta y
escucha activamente. Después de esto hay que reafirmar lo que has
escuchado y que te aclare si lo que entendiste es correcto.

Recuerda tendrás que ajustarte a las habilidades del usuario en el uso del
software.
 Mantenlo sencillo: al comenzar tu diseño IU, empieza con un esqueleto
inicial ponle elementos y características absolutamente necesarias.
Para añadir más características debes cuestionar si estas tienen un
propósito definido, ¿es necesario lograr la tarea solicitada?,¿hará esto
la experiencia del usuario más eficiente o simple?, ¿estoy presumiendo
con un competidor o conmigo mismo?, ¿estoy encaminando mis
decisiones o estoy permaneciendo fiel a mi objetivo de simplemente
satisfacer las necesidades del usuario?, recuerda siempre preguntarte
esto antes de aplicar cualquier elemento de diseño.

 Has el diseño familiar para el usuario: esto hace que el usuario se

sienta como si ya hubiera usado la aplicación una sensación
confortable, al mantener algunos elementos similares a otra aplicación,
si lo logras quiere decir que has logrado crear un producto intuitivo.

 La gestión etiquetas e iconos: colocar etiquetas junto al icono es mejor

que hacer que aparezcan cuando pasar por el icono ya que lo que
haces es que el usuario se detenga, recuerda que no hay que asumir
que el usuario sabe o entiende el significado de cualquier icono a
menos que sea un icono comúnmente utilizado.

 Usar una jerarquía visual: lo ideal es mantener similitud en cada

pantalla y menú con opciones consistentemente ubicadas, esto hace
que el usuario se familiarice mucho más rápido con la aplicación y le
parezca sencillo al momento de desplazarse por las otras páginas, no
te excedas en cambios de fuentes ni en características de resaltar
áreas importantes pues puede que logres lo contrario.
  Se consistente con tu diseño web: recuerda que el diseño de interfaz
del usuario consiste en la experiencia del usuario, si mantienes tu
diseño familiar, el cliente se sentirá cómodo mientras se desplaza por
la secuencia. El esqueleto, color, fuente, botones, etc, deben ser
exactamente iguales en cada página.

 Has que se vea bien: como se ha venido observando lo primordial es

su funcionalidad, si el programa no funciona bien no importa como
luzca, sin embargo, si ya has creado un producto excelente, coloca los
toques finales, la IU necesita verse bien así que las preferencias
personales del desarrollador web no son relevantes, pero ojo no te
excedas no todos tenemos los mismos gustos.

 Recuerda el diseño debe ser eficiente: el único propósito del IU es

llevar acabo tares de forma rápida y efectiva para proveer goce y
beneficios al usuario. Ten el mismo cuidado que tuviste con las
necesidades del cliente y así evaluar la eficacia del IU. Después de
tener las necesidades y luego de crear la interfaz debes determinar si
un diseño satisface eficientemente los objetivos y esto se logra con
usuarios reales para así poder ver si tu diseño necesita alguna mejora.
Puede que veas algún elemento que ralentice la tarea o frustre al
usuario, pero solo mediante la prueba podrás evaluar la eficacia del
diseño.

17. ¿Cuál es la diferencia entre la arquitectura del contenido y la de una

webapp?

A simple vista y sin mucho conocimiento parece que los dos términos
significaran lo mismo y cumplieran la misma función, sin embargo, son
plataformas con propósitos específicos que tienen como objetivo necesidades
muy diferentes.
Por ello daremos explicación de cada una de ellas para aclarar términos y
conocer sus funciones.
 Un sitio web: es un conjunto de páginas estáticas que muestran
información.
En esta los usuarios lo que hacen es adquirir contenidos de información.
Aquí hay interacción con el usuario, pero es muy mínima y usualmente se
logra después de guiar al usuario a través del contenido. Por lo general los
sitios web tienen barias paginas interconectadas y requieren un gestor d
contenidos.
  Una aplicación web: es una plataforma principalmente interactiva que
su prioridad es que los usuarios realicen acciones.
Para crearlos se usa un lenguaje CSS, HTML, java script y se puede utilizar
software gratuito de fuente abierta como Drupal, Symfony, Django o
Meteor.

18. Utilice UML para desarrollar tres o cuatro representaciones del diseño
de objetos de contenido.

El diagrama UML es un lenguaje que está compuesto por diversos elementos

gráficos que se combinan para conformar diagramas.
El propósito de los diagramas es mostrar distintas alternativas de un
sistema, a las cuales se les conoce como modelo. (Un modelo es una
representación gráfica de la realidad), el modelo UML muestra lo que
aparentemente hará el sistema, pero en ningún momento dirá como
implementar el sistema.
Los diagramas más comunes en UML son:
 Diagrama de clases: describen la estructura estática de un sistema.

 Diagrama de objetos: son instancias de un diagrama de clase, los

diagramas de objetos describen la estructura estática de un sistema en
un momento particular y son usados para probar la precisión de los
diagramas de clases.

 Diagrama de casos de uso: es una descripción de las acciones de un

sistema desde el punto de vista del usuario. Este modela la
funcionalidad del sistema usando actores y casos de uso. Los casos de
uso son servicios o funciones previstas por el sistema para los
usuarios.
 Diagrama de estados: el diagrama de estado captura cualquier estado
que suceda como por ejemplo el botón este encendido o apagado, el
auto está en movimiento o detenido.

 Diagrama de secuencias: muestra la mecánica de interacción con base

en tiempos.

 Diagrama de actividades: nos muestra la dinámica del sistema

mediante el modelo de flujo de actividad en actividad, una actividad es
una operación en alguna clase del sistema.
  Diagrama de colaboraciones: esta describe la interacción de los
objetos en términos de mensajes secuenciales, esta toma información
de los diagramas de clases, de secuencias y casos de uso para
describir el comportamiento de la estructura estática como de la
estructura dinámica.

 Diagrama de componentes: describe la organización de los

componentes físicos del sistema.

Diagrama de distribución: este diagrama muestra la arquitectura física de un

sistema informático. Puede representar a los equipos y a los dispositivos,
también mostrar sus interconexiones y es software que se encontrara en
cada máquina.

19. ¿Cuál es la diferencia entre la sintaxis de navegación y la semántica de

ésta?

 la semántica de navegación es una etapa inicial del diseño, donde se

valora la arquitectura de navegación de contenido de la web app para
determinar uno o más casos de uso relacionados y desarrollados para
cada categoría de usuario. Cada usuario puede manejar la web App de
manera diferente, y por ello diferente tipo de navegación.

Los casos de uso de desarrolladores para cada usuario definirán un

conjunto de clases que contiene uno o más objetos de contenido o
funciones de la web App.
Mientras cada usuario interactúa con la web App, encuentra una serie
de unidades semánticas de navegación (USN), que son un conjunto de
estructuras de información y navegación relacionadas con unos
requisitos de usuarios relacionados.

La estructura de USN está compuesta por una subestructura de

navegación que se llaman formas de navegación (FdN), esta es una
ruta de navegación para los usuarios que logren lo que se requiere.

 La sintaxis de navegación es donde se define la mecánica de

navegación, entre sus posibilidades están:
 Vínculo de navegación basados en textos, iconos, botones e
interruptores.
 Barra de navegación, lista de principales categorías de contenido o
funciones de una barra.
  Columna de navegación, lista de las principales categorías de
contenido o funciones, lista de virtualmente todos los objetos de
contenido dentro de la web app.
 Pestañas, es una variación de la barra o columna de navegación,
que corresponden al contenido o funciones que seleccionan cuando
se requiere un vínculo.

Mapa del sitio, proporciona tabla de contenido que hay para la

navegación sobre todos los objetos y funcionalidad contenidos en la web
app.

20. Escriba un texto breve sobre un método de diseño de hipermedios que

no sea MDHOO

Este modelo es para diseño de aplicaciones hipermedia y web, es una

extensión de HDM, pero con un claro proceso de concepción orientada a
objetos. Propone el desarrollo de aplicaciones hipermedia mediante un
proceso de 4 etapas.

 Diseño conceptual: donde se construye un esquema conceptual

representado por los objetos o clases y las relaciones entre los
objetos. Propone el esquema (clases, relaciones y subsistemas).

 Diseño navegacional: el diseñador define clases navegacionales, tales

como nodos, enlaces y estructura de acceso (índice y vistas guiadas)
inducidas del esquema conceptual. Enlaces derivan de las relaciones y
los nodos representan ventanas lógicas (views)sobre la clase
conceptual.

 Diseño de interfaces abstractas: esta se dedica a la especificación de

la interfaz abstracta, así se es como se define la forma que deben
aparecer los contextos navegacionales, también aquí se incluye como
dichos objetos de interfaz activaran la navegación y el resto de las
funciones de la aplicación.

 Implementación: aquí se dedica a la puesta en práctica, es donde se

hacen relacionar los objetos de interfaz con los objetos de
implementación.
 CONCLUSIONES

 Debemos tener claro que un proyecto de desarrollo de sistemas de

información requiere de varios pasos durante el análisis que nos
permitirán llevar a cabo con satisfacción las necesidades del cliente, ya
que la prioridad principal siempre será el usuario. (Mónica Tabares)
 Esta actividad nos dejó claro varios conceptos en el area de la materia
de Diseño de sistemas dándonos a entender más a fondo de lo que
conocemos lo que hablamos y lo que estudiamos para aprendizaje
futuro.(Camilo Tautiva)
 Bibliografía

Pressman S. Roger. Ingeniería de software, Un enfoque práctico. 2010.

Séptima edición. Mc Graw Hill.

http://www.teatroabadia.com/es/uploads/documentos/iagramas_del_uml.pd
f

http://www.staffcreativa.pe/blog/disenar-interfaz-usuario/

http://www.staffcreativa.pe/blog/desarrollo-web-como-crear-una-interfaz-
de-usuario-personalizada/