Está en la página 1de 81

El propósito de esta unidad es

comprender las actividades


técnicas que abarca el diseño
de Aplicaciones Web y cuan
importante se torna éste en el
éxito de la misma.
Diseño para
ingeniería
Web

Diseño de
Metas de
calidad de
diseño
una WebApp
Seguridad

Tiempo en el
Disponibilidad
mercado

Escalabilidad
Una de las • Simplicidad
metas de • Consistencia
diseño de • Identidad
una • Robustez
WebApp es • Navegabilidad
abarcar lo • Apariencia visual
siguiente: • Compatibilidad
Diseño de la interfaz de usuario
Fácil de Fácil de Fácil de
usar aprender navegar

Eficiente Consistente Intuitiva

Libre de
Funcional
errores
Debe ofrecer al usuario final una
experiencia satisfactoria y gratificante.
Flexibilidad en Uso sencillo e
Uso equitativo
el uso intuitivo

Esfuerzo físico Tolerancia al Información


reducido error perceptible

Tamaño y
espacio para
acercarse y usar
Em

Ex

px
em %

• el tamaño • valor relativo


(‘font-size’) de al valor del
la fuente elemento
relevante H1 { padre P { line-
margin: 0.5em height: 140% }
}
ex px

• la ‘altura de la • pixeles,
x’ de la fuente relacionados
relevante H1 { con los
margin: 1ex } dispositivos
visuales P {
font-size: 14px }
Técnicas de diseño
Diseño fijo

Diseño liquido (o fluido)

Diseño elástico
(o flexible)

Diseño hibrido
Diseño fijo
• Diseño que utiliza dimensiones de
tamaño absoluto: inches (in),
centimetros (cm), milímetros
(mm), puntos (pt), picas (pc).
• Su efecto es bloquear el tamaño de
un elemento a un tamaño fijo.
Diseño liquido (o fluido)
• Diseño que utiliza cómo unidad de
medida el porcentaje (%).
• Su efecto es la adaptación de los
elementos y su disposición
aprovechando todo el ancho de
pantalla que será calculada en base a
la resolución del dispositivo utilizado.
Diseño elástico (o flexible)
• Diseño que utiliza cómo unidad de
medida em.
• Su efecto es adaptar el ancho de
los elementos y su disposición en
base al tamaño de texto
configurado por el usuario.
Diseño hibrido
•Diseño que utiliza
unidades de medida
absolutas, porcentaje y
em.
¿El diseño
(más)
accesible?
A favor
• Los diseñadores disfrutan de un control absoluto
en determinar tamaño y posicionamiento de los
elementos. Favorece la legibilidad.

En contra
• No adapto en pantalla: no se conoce a priori las
características del monitor utilizado por el
usuario. “Bloquea” la página según el prejuicio
del papel.
A favor
• Presentación de más informaciones en
pantalla y reducción del efecto scroll.
Adaptación al medio.

En contra
• Causa líneas de texto muy largas en caso de
resoluciones de pantalla muy altas:
dificultad en la lectura.
A favor
• Los diseñadores “controlan” tamaño y
disposición de los elementos. Evita la sobre
posición de elementos.
En contra
• Al aumentar el tamaño del texto, en
determinados diseños puede causar la
comparsa de la barra de scroll horizontal:
dificultad en la legibilidad.
A favor
•Todo lo bueno lo aporta el
diseño fijo, fluido y elástico.
En contra
•¿Hacemos una investigación?
En fin, ¿cual es diseño más accesible?
No hay un diseño más accesible que otro.

Se elije el tipo de diseño en base a las


necesidades (proyecto).

*La W3C WAI no establece cual sea el diseño


más accesible sino que sea transformable de
una manera agradable y que el contenido sea
comprensible y navegable.
Flujo de trabajo en el diseño de la interfaz
Diseño estético
El diseño estético, también llamado diseño
grafico, es un esfuerzo artístico que complementa
los aspectos técnicos de la ingeniería Web.

Sin él una WebApp puede ser funcional, pero sin


atractivo.
Diseño de contenido
El diseño de contenido se enfoca en dos
asuntos de diseño diferentes, cada uno
lo abordan individuos con distintos
conjuntos de habilidades.

El diseño de contenido desarrolla una


representación de diseño para los
objetos de contenido y representa los
mecanismos que se requieren para que
establezcan sus relaciones uno con otro.
La relación entre objetos de contenido,
Un objeto de contenido tiene atributos
define como parte del modelo de análisis
que incluyen información específica de
WebApp y los objetos de diseño que
contenido y atributos específicos de
representan contenido es análoga a la
implementación que se especifican como
relación entre las clases de análisis y los
parte del diseño.
componentes de diseño.
Diseño arquitectónico
El diseño arquitectónico está
enlazado con las metas
establecidas para la WebApp, el
contenido que se presentará, los
usuarios que la vistan y la filosofía
de navegación que se establezca.

La arquitectura de contenido se
basa en la forma en que los
objetos de contenido se
estructuran para su presentación
y navegación.
Se centra en la
definición de la
estructura
hipermedia
global de la
WebApp.
Estructuras lineales

Estructuras en retícula

Las estructuras jerárquicas

La estructura en red.
Hasta aquí 19 sept 2017

Diseño de navegación
El diseñador debe definir las rutas de navegación
que habiliten para la ruta de los usuarios el acceso
al contenido y las funciones de las WebApp.
Para ello se debe:

Identificar la semántica de
Definir la mecánica que
navegación para diferentes
logra la navegación.
usuarios del sitio
Conforme el diseño se lleva a cabo se
define la mecánica de navegación,
entre sus posibilidades tenemos:
• Vinculo de navegación individual
• Barra de navegación horizontal
• Columna de navegación vertical
• Pestañas
• Mapas del sitio
Método de diseño hipermedia orientado a
objetos (MDHOO)
OOHDM
•Object Oriented
Hipermedia Design
Method
Las metodologías tradicionales de
ingeniería de software, o las
metodologías para sistemas de desarrollo
de información, no contienen una buena
abstracción capaz de facilitar la tarea de
especificar aplicaciones hipermedia.
El tamaño, la complejidad y el número de
aplicaciones crecen en forma acelerada
en la actualidad, por lo cual una
metodología de diseño sistemática es
necesaria para disminuir la complejidad y
admitir evolución y reusabilidad.
Producir aplicaciones en las
cuales el usuario pueda
aprovechar el potencial del
paradigma de la navegación de
sitios web, mientras ejecuta
transacciones sobre bases de
información, es una tarea muy
difícil de lograr.
En primer lugar, la navegación posee algunos
problemas.

Una estructura de navegación robusta es una de las


claves del éxito en las aplicaciones hipermedia.

Si el usuario entiende dónde puede ir y cómo llegar


al lugar deseado, es una buena señal de que la
aplicación ha sido bien diseñada.
Construir la interfaz de una
aplicación web es también
una tarea compleja;

sino también la manera en la no sólo se necesita


cual estos objetos especificar cuáles son los
interactuarán con el resto de objetos de la interfaz que
la aplicación. deberían ser implementados,
En • existen requerimientos que deben ser satisfechos en
un entorno de desarrollo unificado.
hipermedia

Por un lado, • la navegación y el comportamiento funcional de la


aplicación deberían ser integrados.

Por otro • durante el proceso de diseño se debería poder


desacoplar las decisiones de diseño relacionadas con
la estructura navegacional de la aplicación, de
lado, aquellas relacionadas con el modelo del dominio.
OOHDM propone el desarrollo de aplicaciones
hipermedia a través de un proceso compuesto por
cuatro etapas:

diseño conceptual,

diseño navegacional,

diseño de interfaces abstractas e

implementación.
El diseño de navegación es
expresado en dos
esquemas:
•el esquema de clases
navegacionales y el esquema de
contextos navegacionales.
En OOHDM existe un conjunto
de tipos predefinidos de clases
navegacionales:
• Nodos,
• enlaces y
• estructuras de acceso
– en esta fase es tenido en cuenta el entorno
particular en el cual se va a correr la aplicación.
Al llegar a esta fase, el primer paso que debe realizar el
diseñador es definir los ítems de información que son parte
del dominio del problema.

Debe identificar también, cómo son organizados los ítems


de acuerdo con el perfil del usuario y su tarea; decidir qué
interfaz debería ver y cómo debería comportarse.

A fin de implementar todo en un entorno Web, el


diseñador debe decidir además qué información debe ser
almacenada.
– A4DESK
– DREAM WEAVER

– www.mex.tl
– www.1and1.mx
– www.mipaginawebgratis.es
– www.wix.com
– www.jimdo.com
– Y otras gratis que se ofrecen en la red
– Los mejores sitios:
– http://www.abc.es/tecnologia/redes/20130219/abci-
alojamiento-gratis-201302181850.html