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