Metodología para el proceso de
creación de Aplicaciones Web

aplicaciones

aplicaciones web

aplicación = aplicación web

aplicación != aplicación web

aplicación != aplicación web
porque el mercado lo percibe así
!
lo espera
!
lo solicita
!
lo exige
!

sitios web

sitios web ~= aplicaciones web
son pero no son
!

sitios web

sitios web
caos en el proceso de desarrollo
!
¿existe uno?
!

metodologías de desarrollo de
software

metodologías de desarrollo de
software
existen
!
funcionan...
!
...o casi
!

aplicación web
front-end
!
back-end
!

back-end
se puede dar como resuelta
!
metodologías y técnicas desde 1960+
!

front-end
avances en varias direcciones
!
metodologías y técnicas desde...
!
...1960
!

front-end
GUI nacen en consolas
!
tal vez no deberían haber salido de ahí
!

front-end
limitaciones técnicas
!
resultados limitados
!

manzanas y ventanas
y fotocopias
!

manzanas y ventanas
traen el concepto de GUI
!
establecen guías de diseño
!

manzanas y ventanas
Windows Style Guide
!
Macintosh Human Interface Guide
!

manzanas y ventanas
herramientas limitadas
!
resultados limitados... pero mejores
!

leopardos, pinguinos y vistas
mayores recursos en hardware
!
mayores herramientas para desarrolladores
!

swing, gtk, qt, DirectX,
OpenGL, WPF, JavaFX
problema resuelto
!
... ¿o no?
!

front-end
ya tenemos las capacidades
!
¿no es suficiente?
!
¡NO!
!

¿qué compone el front-end?
información de un repositorio
!
interacción con el sistema
!
interacción del usuario
!
diseño y respuesta visual
!

las herramientas resuelven
información de un repositorio
!
interacción con el sistema
!
diseño y respuesta visual (o ayudan)
!

información de un repositorio
nada nuevo
!
DAO hacia BD, ActiveRecords, ORM
!
IO, SqlLite, SqlServer, MySQL, etc.
!

interacción con el sistema
interfaces claras de comunicación
!
SOAP, XML+RPC, REST
!

diseño y respuesta visual
Photoshop, CorelDraw, Visio,
!
Illustrator
¿MS Paint?
!
Toolkits (AJAX, OpenLazlo,
!
Silverlight, Flash)

¿y el usuario?

¿y cómo trabajan juntas?

tenemos las herramientas
pero no sabemos usuarlas...
!
...aún
!

metodologías
no es nada nuevo
!
pero no es waterfall
!

metodologías
aplicadas al front-end
!
fases similares a lo que conocemos
!
porque es lo mismo... sólo en un
!
contexto distinto

qué esperamos
cumplir con los cuatro aspectos
!
pensando en el usuario
!
pensando en el desarrollador
!
pensando en los stakeholders
!

la web no es algo nuevo
pero nos exige nuevas habilidades
!

tendencia principal
contenido por sobre imagen
!

diseño web != diseño gráfico

diseño web != arte
salvo exceptiones
!

empezamos

una metodología
no la única
!
pero alberga todos los pasos importantes
!

una metodología
hablaremos de fases...
!
iterativas y recurrentes
!

una metodología
lo que ya conocemos
!
pero en un nuevo formato
!

fases
análisis
!
diseño
!
desarrollo
!
pruebas
!
puesta en marcha
!

fases
suena similar
!
pero no es tan secuencial
!
orientación al paralelismo
!

fase 1: análisis

fase 1: análisis
definición de objetivos
!
identificación de los usuarios
!
requerimientos de la aplicación
!

fase 1: definición de objetivos
que se espera lograr
!
cuantificables
!
cualitativos
!

fase 1: definición de objetivos
guías para pruebas
!
expresadas en términos del negocio
!
justificables
!

fase 1: identificación
de usuarios
dos grandes grupos
!
los que crean
!
y los que acceden
!

fase 1: identificación
de usuarios
límites, accesos
!
locaciones
!
restricciones
!

fase 1: requerimientos
qué se espera transmitir
!
en una intranet: información
!

fase 1: requerimiento de
información
prevalencia
!
necesaria
!
pertinente
!

fase 1: prevalencia de
información
siempre presente
!
actualizada
!
“buscable”
!

fase 1: información
necesaria
concisa
!
ordenada
!
orientada al usuario
!
orientada al dominio del problema
!

fase i: información
pertinente
clasificada bajo algún criterio
!
tiempo última actualización
–
jerarquía de importancia
–
disponible
!

fase 1: entregables
lista de requerimientos
!
visible
!
parte aquella que ya exista
!

fase 1: conclusiones
énfasis en los usuarios
!
establecer las bases y dirección
!

fase 2: diseño

fase 2: diseño
diseño de contenido
!
diseño de interacción
!
diseño visual
!

fase 2: diseño
extensa
!
recurrente
!
ejecutada en paralelo
!

fase 2: diseño de contenido
ordenar la información
!
categorizarla
!
mostrarla
!

hablamos de arquitectura de
información

arquitectura de información
¿cómo definirla?
!

“The structural design of shared
information environments”

“The combination of
organization, labeling, search,
and navigation systems withing
web sites and intranets”

“The art and science of shaping
information products and
experiences to support usability
and findability”

no es fácil definirla
una de las razones por las que no
!
es tan aplicada...
...aún
!

arquitectura
convención utilizada por años
!
para Software
modelo “bottom-up”
!

arquitectura
blueprints
!
diagramas
!
guías de referencia
!

arquitectura de información
cómo acceder a la información
!
organizarla
!
buscarla
!
....
!

¿porqué es importante?
costo de encontrar la información
!
costo de no encontrarla
!
costo de educación y capacitación
!

¿porqué es importante?
costo de construcción
!
costo de mantenerla
!
valor de marca y presencia
!

Information Arquitecture –
Designing Large-Scale Web –
Sites
libro de cabecera
!

arquitectura de información
en resumen
!
revisió de los conceptos principales
!

información
no es data
!
no es conocimiento
!

información
concerniente a documentos
!
sitios web, imagénes, aplicaciones
!
metadata
!

arquitectura: estructura,
organización y etiquetas
nivel de granularidad y relación
!
cómo agruparla y categorizarla
!
como nombrar las categorías
!
y definir su navegación

sistemas de arquitectura de
información

arquitectura: sistemas de
búsqueda

arquitectura: sistema de
navegación
Navegación Global
Navegación
Navegación Contextual
Local

arquitectura: relaciones
semánticas
genérico
sinónimos acrónimos
relacionados relacionados
específico

fase 2: diseño de contenido
entregables
wireframes
!
mapas del sitio
!
lista de vocabulario
!
esquemas de metadata
!

fase 2: diseño de contenido
wireframes

fase 2: diseño de contenido
mapas del sitio

fase 2: diseño de contenido
listas de vocabulario
Términos AceptadosVariantes
Email Correo Electrónico
E-mail
Fax Facsímil
Fotocopiadora Copiadora
Xerox

fase 2: diseño de contenido
esquemas de metadata
autor de la información tamaño
! !
fecha de creación duración
! !
fecha de actualización dimensiones
! !
etiquetas formato de archivo
! !
categorías forma de visualizar
! !
versión
!
tipo
!

fase 2: diseño de interacción

fase 2: diseño de interacción
cómo el usuario utiliza el sistema
!
como el sistema responde a las consultas
!
recordemos perfiles de usuario
!

fase 2: diseño de interacción:
uso del sistema

fase 2: diseño de interacción:
uso del sistema
hablamos de usabilidad
!

fase 2: diseño de interacción
usabilidad
facilidad para utilizar una interfaz
!
!

fase 2: diseño de interacción
usabilidad
facilidad de aprendizaje
!
eficiencia en el uso
!
facilidad para recordar
!
pocos errores
!

Don't Make Me Think

fase 2: usabilidad
en cinco slides
sentido común
!
no hacer pensar al usuario
!
entender que “ojeamos”, no leemos
!

fase 2: usabilidad
en cinco slides
crear jerarquías visuales
!
utilizar convenciones
!
dejar opciones claras
!

fase 2: usabilidad
en cinco slides
eliminar la mitad del texto
!
... y luego la otra mitad
!

fase 2: usabilidad
en cinco slides
navegación clara
!
... siguiendo convenciones
!
entender cómo buscamos
!

http://www.jonespartners.com/

fase 2: usabilidad
en cinco slides
no temer al “fold”
!
reportes de buenas prácticas y guías
!
el usuario promedio
!
... no existe
!

fase 2: diseño de interacción
usabilidad
pruebas de usabilidad
!
pocos usuarios
!
cualquiera sirve
!

usabilidad
no esta en contra del diseño
!
lo complementa
!
y le da fuerza
!

usabilidad
propiamente hecho, nos evita
!

fase 2: diseño de interacción

fase 2: diseño de interacción
accesibilidad
acceso a los contenidos a todos
!
lectores de pantalla
!
dispositivos móviles o no tradicionales
!
requerido por el gobierno
!

fase 2: uso del sistema
prototipo de navegación de contenido
!

fase 2: prototipo de contenido
muestra navegación en el sistema
!
donde puede ir y cómo
!
como responderá el sistema
!
abstracción del diseño
!

fase 2: prototipo de contenido
documentos XHTML sobre contenido
!
navegable
!
PowerPoint/Keynote/Impress
!
Mock-up It!
!

fase 2: diseño de interacción
respuesta del sistema

fase 2: diseño de interacción
respuesta del sistema
comunicación con el sistema
!
¿asíncrona?
!
forma de
!
comunicación (¿XML-RPC? ¿REST?)

fase 2: diseño de interacción
respuesta del sistema
prueba de factibilidad
!
de integración con el sistema

fase 2: diseño visual

fase 2: diseño visual
iconografía y elementos gráficos
!
análisis y creación de interfaces
!
pruebas conceptuals y de factibilidad
!

fase 2: diseño visual
paralelismo
iconografía y elementos gráficos
!
análisis y creación de interfaces
!
pruebas conceptuals y de factibilidad
!

fase 2: diseño visual
iconografía y elementos
gráficos

fase 2: diseño visual
iconografía y elementos
gráficos logos, ilustraciones, pictogramas
!
íconos, infografías
!
paleta de colores comunes
!
elementos gráficos comunes
!

w

fase 2: diseño visual
análisis y creación de interfaces
entregable
!
prototipo de diseño
!

fase 2: diseño visual
análisis y creación de interfaces

fase 2: diseño visual
análisis y creación de interfaces
patrones de diseño
!
basados en guías de la organización
!
enfoque a la accesibilidad
!
basados en los requerimientos
!

fase 2: diseño visual pruebas
conceptuales y de factibilidad
implementación simple de la interfaz
!
integración con tecnologías
!
factibilidad del diseño
!
potenciales problemas
!

fase 2: pruebas de concepto y
factibilidad
prototipo del diseño armado
!
probar tecnologías
!
probar integración...
!
repetir
!

fase 2: conclusiones

fase 2: diseño

fase 2: diseño
diseño de contenido
!
diseño de interacción
!
diseño visual
!

fase 2: diseño de contenido

fase 2: diseño de interacción
informes de tests de usabilidad
!
... de accesibilidad
!
prototipo de navegación de contenido
!
documento de respuesta del sistema
!

fase 2: diseño visual
prototipo de diseño
!
elementos gráficos definidos
!
estándares visuales a seguir
!

fase 2: recomendaciones
conocer los instrumentos
!
contar con aprobación desde arriba
!
tener paciencia
!
no al diseño de comité
!

fase 3: desarrollo

fase 3: desarrollo
implementación del diseño
!
validación y pruebas en dispositivos
!
integracción con sistema
!
aplicación de interacción
!

fase 3: implementación del
diseño
y

fase 3: NO tablas
salvo para datos tabulados
!

fase 3: recomendaciones para
el desarrollo
XHTML + CSS
!

fase 3: recomendaciones para
el desarrollo
elaborar para navegadores
!
seguidores de estándares
Firefox, Safari, Opera, Konqueror,
!
Camino

fase 3: recomendaciones para
el desarrollo
hojas de estilo separadas
!
para cada medio
screen
–
print
–

fase 3: recomendaciones para
el desarrollo
hojas de estilo separadas
!
por tipo
layout
–
tipografía y colores
–
resets
–

fase 3: recomendaciones para
el desarrollo
adecuar para el resto de navegadores
!
(IE6 – IE7)
–
utilizar condicionales
!
–
<!--[if IE]><link rel=\"stylesheet\" type=\"text/css\" href=\"css/ie.css\"
media=\"screen\"/><![endif]-->

fase 3: recomendaciones para
el desarrollo
diseño fijo o líquido
!
considerar frameworks
!
seguir las recomendaciones de la W3C
!

fase 3: validaciones y
pruebas en dispositivos
validación de XHTML y CSS
!
facilita el mantenimiento
!
escalabilidad
!
mantenible en el tiempo
!

fase 3: validaciones y
pruebas en dispositivos
pruebas en dispositivos no tradicionales
!
celulares
!
dispositivos de internet
!
consolas
!

fase 3: validaciones y
pruebas en dispositivos
sólo si está en los objetivos
!
y con los perfiles identificados
pero debe soportarlo a futuro
!

fase 3: validaciones y
pruebas en dispositivos
pruebas de accesibilidad
!
seguimiento de los puntos de W3C
!
prueba con lector de pantallas
!

fase 3: integración con
el sistema

fase 3: integración con
el sistema
adaptar diseño al flujo actual
!
separar XHTML
!
WebParts / WebControls
–
Layouts / Themes
–

fase 3: integración con
el sistema
integrar las llamadas de la interfaz
!
con back-end
métodos deben haber
!
sido probados previamente

fase 3: integración con
el sistema
unit testing
!
mockup clients
!
Test-Driven Development
!
Behaviour-Driven Development
!

fase 3: integración con
el sistema
probar integración con usuarios
!
comparar con prototipo de contenido
!
corregir fallas
!
repetir
!

fase 3: aplicación de interacción

fase 3: aplicación de interacción
utilizar la tecnología definida
!
no obtrusiva
!
no obtrusiva
!
no obtrusiva
!

fase 3: aplicación de interacción
“graceful degradation”
!

fase 3: aplicación de interacción
no olvidar los requisitos
!
drag-n-drop, RIAs
!

fase 3: recomendaciones
generales
incorporar a los usuarios
!
integrarse a su SCM
!
seguridad
!
priorizar
!

fase 3: entregables
diseño válido, semántico e integrado
!
documentos de referencia
!

fase 4: pruebas

fase 5: puesta en marcha

fase 5: puesta en marcha
despliegue a producción
!
integrado a su workflow
!

fase 5: puesta en marcha
incremental
!
solicitar feedback
!
realizar más pruebas
!

fase 5: puesta en marcha
no “beta”s
!
no “en construcción”
!
pruebas pequeñas, cerradas
!
pruebas graduales
!

fase 5: conclusiones
integrado
!
sistema funcional y existente
!
... no en pruebas
!
... o en aquellas no críticas
!

metodología

metodología
no es la única
!
no es la mejor
!
... ¿o tal vez sí?
!
y funciona
!

metodología
fácil de integrarse a las existentes
!

front-end

back-end

front-end + back-end
misma –o similar- forma de trabajo
!
reutilizar los conceptos
!
adaptarse
!

en conclusión
iniciar de a pocos
!
transicionar
!
... o empezar de 0
!

gracias
alvaro.pereyra@srdperu.com
!
www.srdperu.com
!