Desarrollo Soluciones Web

Jover Alonso Cabrales Pineda – Ingeniero Sistemas

Proceso de Desarrollo de
Soluciones Web
Ingeniería de Sistemas

Jover Alonso Cabrales Pineda – Ingeniero Sistemas 3
• ¿Qué es el proceso Ingeniería WEB?
• ¿Cuáles son las actividades estructurales generales que
están presentes en todo proceso WEB?
• ¿Cómo se modelan los procesos y cuáles son los
patrones del proceso?
• ¿Por qué la agilidad es un imperativo en la ingeniería
WEB moderna?
• ¿Qué es un desarrollo WEB ágil y en qué se diferencia de
los modelos más tradicionales del proceso?

2. Proceso de Desarrollo de Soluciones Web
✓ Requerimientos
✓ Modelado de Análisis
✓ Metodologías y Herramientas de Modelado Web
✓ Diseño Web

Fuente: Web engineering : a practitioner’s approach / Roger S. Pressman, David Lowe, McGraw-Hill, 20090
La ingeniería web es el proceso que se utiliza para
crear aplicaciones web de alta calidad. La ingeniería
web (iWeb) no es un clon perfecto de la ingeniería de
software, pero toma muchos de los conceptos y
principios fundamentales de la ingeniería de
software, enfatizando las mismas actividades
técnicas y de gestión.

Nuevos servicios que una aplicación de software
tradicional no podría gestionar
Aplicaciones web informativas
Aplicaciones web de descargas
Aplicaciones web personalizables
Aplicaciones web de Interacción
Aplicaciones web de entrada de usuario
Aplicaciones web orientadas a transacciones
Aplicaciones web orientadas a servicios

¿Qué otros servicios no podría gestionar una
aplicación de software tradicional?

Framework
Establece la base para un proceso
completo de ingeniería web al
identificar un número de
actividades que son aplicables a
todos los proyectos de aplicación
web.

Métodos que se deben incorporar en el
Framework
Framework
Comunicación
Análisis
requerimientos
Modelado
Diseño
Construcción
Pruebas
Conjunto de tareas técnicas que
permiten a un ingeniero web
comprender, caracterizar y
luego construir una aplicación
web de alta calidad .

Mejores prácticas en el desarrollo de aplicaciones
WEB
Tómese el tiempo para comprender las necesidades
comerciales y los objetivos del producto, incluso si los
detalles de la aplicación web son vagos.
Describa cómo los usuarios interactuarán con la
aplicación web utilizando un enfoque basado en
escenarios.
Desarrolle un plan de proyecto, incluso si es muy
breve.
Dedique algo de tiempo a modelar qué es lo que
vas a construir.

Mejores prácticas en el desarrollo de aplicaciones
WEB
Revise los modelos para la consistencia y la calidad.
Los recorridos de pares y otros tipos de revisiones
deben realizarse a lo largo de un proyecto WebE.
Use herramientas y tecnología que le permitan
construir el sistema con la mayor cantidad posible de
componentes reutilizables.
No reinvente cuando pueda reutilizarlo.
No confíe en los primeros usuarios para depurar la
aplicación web.

Fuente: Process fl ow with WebE actions. Roger, LOWE David

Fuente: IngenierIa de software orientado a objetos Bernd Bruegge

• Identificación de una necesidad empresarial
• Descripción de los objetivos de la aplicación web
• Define las funciones principales de la aplicación web
• Establece una base para la acción.
•Taller : Determinar el usuario

Técnicas para levantamiento de requerimientos
• Grupo focal tradicional.
• Grupo focal electrónico.
• Encuestas iterativas.
• Encuesta exploratoria.
• Construcción de escenarios.

• Clasificación de
requerimientos

Ejemplos de requerimientos funcionales de proceso o área de negocio
• El sistema enviará un correo electrónico cuando se registre alguna de las
siguientes transacciones: pedido de venta de cliente, despacho de mercancía
al cliente, emisión de factura a cliente y registro de pago de cliente.
• Se permitirá el registro de pedidos de compra con datos obligatorios
incompletos, los cuales podrán completarse posteriormente modificando el
pedido. Antes de poder aprobarse los datos del pedido deben estar
completos.
• Al aprobar un pedido, la solicitud pasará al siguiente paso del flujo de trabajo
(workflow) de aprobación configurado en el sistema.
• El sistema permitirá a los usuarios autorizados el ingresar planes y
cronogramas de proyecto.
• El sistema permitirá aprobar, cambiar o actualizar planes y cronogramas de
proyecto.

Ejemplos de requerimientos funcionales de interfaz gráfica
• La solución validara automáticamente el cliente asociado a una orden
con el sistema de gestión de contactos.
• El campo de monto acepta únicamente valores numéricos con dos
decimales.
• El campo fecha de transacción acepta únicamente fechas anteriores
al día de hoy (día actual).
• El campo nombre acepta caracteres alfabéticos únicamente.

Ejemplos de requerimientos funcionales legales o regulatorios
• El sistema controlará el acceso y lo permitirá solamente a usuarios
autorizados.
• La base de datos será implementada con trazas de auditoría.
• Las hojas de cálculo aseguraran los datos usando firmas electrónicas.
• El sistema permitirá elaborar y emitir el reporte regulatorio XX, según
los requerimientos establecidos en el reglamento y ley aplicable.

Ejemplos de requerimientos de interfaces externas (Hardware y
Software)
• El software podrá ser utilizado en los sistemas operativos Windows,
Linux y OSX.
• La aplicación debe poder utilizarse sin necesidad de instalar ningún
software adicional además de un navegador web.
• La aplicación debe poder utilizarse con los navegadores web Chrome,
Firefox e Internet Explorer.

•Taller de requerimientos

• Elicitación
https://prezi.com/uvu8hseyxfwu/elicitacion-de-requerimientos/

El arte de la negociación
Aprender a negociar de manera efectiva puede servirle bien a lo
largo de su vida personal y técnica. Vale la pena considerar las
siguientes pautas:
• 1. Reconocer que no es una competencia.
• 2. Planifica una estrategia.
• 3. Escuchar activamente.
• 4. Centrarse en los intereses de la otra parte.
• 5. No dejes que se vuelva personal.
• 6. Sé creativo.
• 7. Esté preparado para comprometerse.

•Taller de Negociación

Declaración que describe la motivación empresarial para
la aplicación web general
Declaración de objetivo general para la aplicación web.
Lista de categorías de usuarios
Lista de objetivos informativos para el incremento de la
aplicación web a planificar.
Lista de objetivos aplicativos (funcionales) para el
incremento de la aplicación web que se debe planificar
Descripción del incremento (la declaración de alcance)
Lista de objetos de contenido para el incremento.
Lista de funciones para el incremento.
Conjunto de escenarios de uso que describen cómo
interactúa cada categoría de usuario con el incremento

Entendiendo
el alcance
Refinando
conjunto de
actividades
Equipo de
trabajo
Manejando
riesgos
Desarrollando
cronograma
Criterios de
calidad
Gestión de
cambios

La acción de modelado de diseño genérico se debe
definir en la fase de planeación y podría lograrse
mediante la aplicación de algunas o todas las
siguientes tareas:
• Diseñar la interfaz.
• Diseñar la estética para la aplicación web.
• Diseñar el esquema de navegación.
• Diseñar la arquitectura de aplicaciones web.
• Diseñar el contenido y la estructura que lo soporta.
• Diseño de componentes funcionales.
• Seleccionar patrones de diseño apropiados.
• Diseñar mecanismos adecuados de seguridad y privacidad.
• Revisar el diseño.

W3C: Style Guide for Online Hypertext www.w3.org/Provider/Style
The Sevloid Guide to Web Design www.sev.com.au/webzone/design/guide.asp
Web Pages That Suck www.webpagesthatsuck.com/index.html
Resources on Web Style www.westegg.com/unmaintained/badpages
Gartner’s Web Evaluation Tool www.gartner.com/ebusiness/website-ings
IBM Corp: Web Guidelines www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/572
World Wide Web Usability http://ijhcs.open.ac.uk
Interface Hall of Shame www.iarchitect.com/mshame.htm
Art and the Zen of Web Sites www.tlc-systems.com/webtips.shtml
Designing for the Web: Empirical Studies
www.microsoft.com/usability/webconf.htm
Criterios de calidad para aplicaciones WEB

Nielsen’s useit.com www.useit.com
Quality of Experience www.qualityofexperience.org
SAP Design Guide www.sapdesignguild.org
Creating Killer Web Sites www.killersites.com/core.html
All Things at Web www.pantos.org/atw
SUN’s New Web Design www.sun.com/980113/sunonnet
Tognazzini, Bruce: Homepage www.asktog.com
Webmonkey http://hotwired.lycos.com/webmonkey/design/?tw=design
World’s Best Websites www.worldbestwebsites.com
Yale University: Yale Web Style Guide http://info.med.yale.edu/caim/manual
Criterios de calidad para aplicaciones WEB

•Taller de planificación

• ¿Qué conceptos y principios guían la práctica de la ingeniería de WEB?
• ¿Qué son los requerimientos de ingeniería y cuáles son los conceptos
subyacentes que llevan a un buen análisis de requerimientos?
• ¿Cómo se crean los requerimientos del modelo y cuáles son sus elementos?
• ¿Cuáles son los elementos de un buen diseño?
• ¿Cómo establece el diseño de la arquitectura una estructura para
todas las demás acciones de diseño y qué modelos se utilizan?
• ¿Cómo se diseñan componentes de software de alta calidad?
• ¿Qué conceptos, modelos y métodos se aplican al diseñar una interfaz
de usuario?
• ¿Qué es el diseño basado en patrones?
• ¿Qué estrategias y métodos especializados se emplean para diseñar
webapps?

Principios generales proceso WEB:
1) Agregar valor para los usuarios finales
2) Mantenerlo sencillo
3) Fijar la visión (del producto y el proyecto)
4) Reconocer que otros consumen
5) Abrirse al futuro
6) Planear la reutilización
7) ¡Pensar!|

Principios fundamentales proceso WEB:
1) Principio 1. Ser ágil.
2) Principio 2. En cada etapa, centrarse en la calidad.
3) Principio 3. Estar listo para adaptar.
4) Principio 4. Formar un equipo eficaz.
5) Principio 5. Establecer mecanismos para la comunicación y coordinación.
6) Principio 6. Administrar el cambio.
7) Principio 7. Evaluar el riesgo.
8) Principio 8. Crear productos del trabajo que agreguen valor para otros.

Principios que guían la práctica:
1) Principio 1. Divide y vencerás.
2) Principio 2. Entender el uso de la abstracción.
3) Principio 3. Buscar la coherencia.
4) Principio 4. Centrarse en la transferencia de información.
5) Principio 5. Construir software que tenga modularidad eficaz.
6) Principio 6. Buscar patrones.
7) Principio 7. Cuando sea posible, representar el problema y su solución
desde varias perspectivas diferentes.
8) Principio 8. Tener en mente que alguien dará mantenimiento al software.

Principios del modelado:
1) Principio 1. El equipo de software tiene como objetivo principal
elaborar software, no crear modelos.
2) Principio 2. Viajar ligero, no crear más modelos de los necesarios.
3) Principio 3. Tratar de producir el modelo más sencillo que describa al
problema o al software.
4) Principio 4. Construir modelos susceptibles al cambio.
5) Principio 5. Ser capaz de enunciar un propósito explícito para cada
modelo que se cree.
6) Principio 6. Adaptar los modelos que se desarrollan al sistema en
cuestión.
7) Principio 7. Tratar de construir modelos útiles, pero olvidarse de
elaborar modelos perfectos.
8) Principio 8. No ser dogmático respecto de la sintaxis del modelo.
9) Principio 9. Si su instinto dice que un modelo no es el correcto a pesar
de que se vea bien en el papel, hay razones para estar preocupado.
10) Principio 10. Obtener retroalimentación tan pronto como sea posible.

Requerimientos de los principios de modelado:
1) Requerimiento 1. Debe representarse y entenderse el dominio
de información de un problema.
2) Requerimiento 2. Deben definirse las funciones que realizará
el software.
3) Requerimiento 3. Debe representarse el comportamiento del
software (como consecuencia de eventos externos).
4) Requerimiento 4. Los modelos que representen información,
función y comportamiento deben dividirse de manera que
revelen los detalles en forma estratificada (o jerárquica).
5) Requerimiento 5. El trabajo de análisis debe avanzar de la
información esencial hacia la implementación en detalle.

Principios del modelado del diseño:
1) Principio 1. El diseño debe poderse rastrear hasta el modelo de
requerimientos.
2) Principio 2. Siempre tomar en cuenta la arquitectura del sistema que
se va a construir.
3) Principio 3. El diseño de los datos es tan importante como el de las
funciones de procesamiento.
4) Principio 4. Las interfaces (tanto internas como externas) deben
diseñarse con cuidado.
5) Principio 5. El diseño de la interfaz de usuario debe ajustarse a las
necesidades del usuario final.
6) Principio 6. El diseño en el nivel de componentes debe tener
independencia funcional.
7) Principio 7. Los componentes deben estar acoplados con holgura
entre sí y con el ambiente externo.
8) Principio 8. Las representaciones del diseño (modelos) deben
entenderse con facilidad.
9) Principio 9. El diseño debe desarrollarse en forma iterativa. El
diseñador debe buscar más sencillez en cada iteración.

Actividad en Clase – Análisis caso de estudio

ANÁLISIS DE LOS REQUERIMIENTOS:
El análisis de los requerimientos permite construir sobre los
requerimientos básicos establecidos durante las tareas de concepción,
indagación y negociación para la creación de:
• Modelos basados en el escenario.
• Modelos de datos.
• Modelos orientados a clases.
• Modelos orientados al flujo.
• Modelos de comportamiento.
• Modelos de patrones
• Modelos WebApp
Trabajo de exposición
Realice investigación de los modelos de requerimientos y construya una
presentación donde exponga la metodología de cada uno, los
componentes a tener en cuenta y represente un ejemplo del modelo
asignado.

• Menús de navegación: palabras clave (organizadas
en forma vertical u horizontal) que enlistan contenido o
funciones clave.
• Iconos gráficos: botones, interruptores y otras
imágenes similares que permiten que el usuario
seleccione alguna propiedad o que especifique una
decisión.
• Imágenes: cierta representación gráfica que el
usuario selecciona para establecer un vínculo hacia
un objeto de contenido o función de la webapp.

El diseño estético, también llamado diseño
gráfico, es una actividad artística que
complementa los aspectos técnicos del
diseño de las webapps.
Sin estética, una webapp tal vez sea
funcional pero no atractiva.

El diseño del contenido se centra en dos tareas
diferentes del diseño
Se desarrolla una representación del diseño
para los objetos del contenido y los mecanismos
requeridos para establecer una relación entre
ellos.

Una vez que la arquitectura de la webapp
ha sido establecida y se han identificado
sus componentes (páginas, textos,
subprogramas y otras funciones de
procesamiento), deben definirse las rutas
de navegación que permitan a los usuarios
acceder al contenido y a las funciones de
la web app.
1) Identificar la semántica de navegación
para los distintos usuarios del sitio
2) Definir la mecánica (sintaxis) para
efectuar la navegación.

El diseño arquitectónico está ligado con las
metas establecidas para una webapp, con el
contenido que se va a presentar, con los
usuarios que la visitarán y con la filosofía de
navegación adoptada.
La arquitectura del contenido se centra en la
manera en la que los objetos de contenido (o
compuestos, como páginas web) se estructuran
para la presentación y la navegación.
La arquitectura de la webapp se enfoca a la
forma en la que la aplicación queda
estructurada para administrar la interacción con
el usuario, manejar tareas de procesamiento
interno, navegar con eficacia y presentar el
contenido.

Mediante la investigación en los medios digitales
de la universidad cada estudiante deberá
identificar tres aplicaciones para modelado del
diseño web indicando sus principales
características, esquema de trabajo,
funcionalidades y costo.
Se deberá modelar la aplicación WEB Libreta de
Contactos proponiendo los mockup.
•El documento deberá ser subido en el aula
extendida en la fecha indicada por el profesor

Jover Alonso Cabrales Pineda
Ingeniero Sistemas
Especialista en Telemática e interconexión de Redes
Master en dirección estratégica de Tecnologías de información
Master Gerencia Sistemas Información y Proyectos Tecnología
j.cabrales@unisimonbolivar.edu.co

GRACIAS

Desarrollo Soluciones Web

Recomendados

Recomendados

Más contenido relacionado

Similar a Desarrollo Soluciones Web

Similar a Desarrollo Soluciones Web (20)

Último

Último (20)

Desarrollo Soluciones Web