Instituto Tecnológico de Colima
Departamento de Sistemas y Computación
Ing. en Sistemas Computacionales
Residente:
09460302 Enrique Isaias Barajas Rios
Correo Electrónico:
09460302@itcolima.edu.mx
Asesor interno:
Lic. Catalina Rodríguez López
Proyecto de Residencia Profesional
Página 2
Página 3
Página 4
Villa de Álvarez, Col., Semestre Enero-Junio de 2015
Contenido
1. Introducción ...10
2. Justificación ...11
3. Objetivos ...12
3.1 General ...12
3.2 Específicos ...12
4. Caracterización del área en que se participó ...13
4.1 Descripción de la empresa ...13
4.2 Actividades del área de desarrollo ...13
5. Problemas a resolver ...14
6. Alcances y limitaciones ...15
6.1 Alcances ...15
6.2 Limitaciones...15
7. Estudio de factibilidad ...16
7.1 Factibilidad Técnica ...16
7.2 Factibilidad Operativa...16
7.3 Factibilidad Económica...17
7.4 Factibilidad legal...18
8. Análisis costo-beneficio ...18
8.1 Tiempo de procesos de registro: ...18
9. Ventaja Competitiva ...19
10. Fundamento Teórico ...20
11. Procedimientos y descripción detallada de las actividades realizadas...22
11.1 Página Principal ...23
11.1.1 Log in ...23
11.1.2 Tienda...25
11.1.3 Panel de registro...25
10.1.3.1 Inicio de Registro ...26
Página 5
Requerimientos No Funcionales ...27
Reglas de Negocio de Operación ...28
11.1.3.2 Paso 1 del Proceso de Registro - Información del Mentor ...28
Requerimientos Funcionales ...33
Requerimientos No Funcionales ...34
Reglas de Negocio de Información de Mentor ...34
Reglas de Negocio de Haga clic aquí...34
11.1.3.3 Paso 2 Información de la Cuenta ...35
11.1.3.4 Paso 3 Acuerdo ...40
11.1.3.5 Paso 4 Paquete de bienvenida ...42
11.1.3.6 Paso 5 Información de envió y autopago ...43
11.1.3.7 Paso 6 Nuestro movimiento ...51
11.1.3.8 Paso 7 Confirmación ...56
Reglas Generales...59
11.1.4 Página donativos ...60
11.2 Página del Socio...60
11.2.1 Inicio ...61
11.2.1.1 Slider ...61
11.2.1.2 Mensajes...62
11.2.1.3 Acciones comunitarias ...63
11.2.1.4 Calendario ...65
11.2.1.5 Reconocimiento mensual ...65
11.2.1.6 Contacto ...66
11.2.1.7 Contenido de una noticia ...67
11.2.1.8 Nueva acción comunitaria...67
11.2.2 Página Cuenta ...69
11.2.2.1 Notificación...71
11.2.2.2 Información de la cuenta...72
11.2.2.3 Información legal ...74
11.2.2.4 Perfil...74
11.2.2.5 Contraseña...75
11.2.2.6 Dirección ...76
11.2.2.7 Nuestro movimiento...77
Página 6
11.2.2.9 Información de coaplicante. ...79
11.2.2.10 Redes Sociales ...80
11.2.2.11 Direcciones de envió y métodos de pago ...81
11.2.2.12 Reportes ...83
11.2.3 Organización ...84
11.2.3.1 Control de desplazamiento vertical. ...85
11.2.3.2 Área de notificaciones...85
11.2.3.3 Reportes de la organización. ...86
11.2.3.3.1 Visión general ...87
11.2.3.3.2 Proyección...90
11.2.3.3.3 Emprendedores...91
11.2.3.3.4 Festejados del mes ...94
11.2.3.3.5 Emprendedores por rango ...95
11.2.3.3.6 Productividad ...97
11.2.3.3.7 Autopago ...99
11.2.3.3.8 Lista de futuros emprendedores. ...100
11.2.4 Agenda ...100
11.2.4.1 Vista Día ...104
11.2.4.2 Vista Semana...105
11.2.4.3 Vista Mes ...106
11.2.4.4 Opciones de configuración...107
Conclusiones ...110
Página 7
Índice de Tablas
Tabla 1 Comparación de equipo requerido con el equipo actual en Quantum ... 16
Tabla 2 Conocimientos d el personal de Quantum ... 17
Tabla 3 Costo en la producción del sistema ... 17
Tabla 4 Costos indirectos ... 17
Tabla 5 Costos directos ... 18
Tabla 6 Análisis de alternativas para el d esarrollo del proyecto ... 19
Tabla 7 Descripción de los campos y boton es del inicio de registro ... 26
Tabla 8 Descripción de los campos y boton es de "Información del Mento r" ... 30
Tabla 9 Descripción de los campos y boton es de "Localizador de Mento r" ... 31
Tabla 10 Descripción de los campos y botones de "No tengo Mentor" ... 32
Tabla 11 Descripción de los campos y botones de "Info rma ción de la cu enta" ... 35
Tabla 12 Descripción de los campos y botones de "Acu erdo" ... 41
Tabla 13 Descripción de los campos y botones de "Paquete de Bienvenida" ... 43
Tabla 14 Descripción de los campos y botones de "Info rma ción de autopago y envió" ... 44
Tabla 15 Descripción de los campos y botones de "Método de envió" " dentro de "Información de autopago y envió" ... 46
Tabla 16 Descripción de los campos y botones de "Información de autopago tarjeta" dentro de "Información de autopago y envió" ... 47
Tabla 17 Descripción de los campos y botones en Nu estro movimiento ... 53
Tabla 18 Descripción de los campos y botones de Confirmación ... 58
Tabla 19 Descripción de la Ba rra de info rma ción del usuario ... 60
Tabla 20 Descripción de los elementos d e la sección de Mensajes ... 62
Tabla 21 Descripción de los elementos d e Acción comunita ria en Inicio ... 64
Tabla 22 Descripción de los elementos d e Contato en Inicio ... 66
Tabla 23 Descripción de los elementos d e Agregar Nueva Acción ... 68
Tabla 24 Descripción de los elementos d el menú principal ... 70
Tabla 25 Descripción de los elementos d el control vertical de dezpla zamien to ... 85
Tabla 26 Descripción del área de notificacion es ... 86
Tabla 27 Descripción de elementos del repo rte de visión general ... 89
Tabla 28 Descripción de los elementos d el Reporte d e proyección ... 90
Tabla 29 Descripción del Reporte de Emp rendedores ... 93
Tabla 30 Descripción del reporte "festejados del mes" ... 95
Tabla 31 Descripción del reporte de emp rendores por rango... 96
Tabla 32 Descripción de los elementos d e Agenda ...101
Tabla 33 Descripción de los elementos d e Opciones de Configuración ...108
Índice de Figuras
Figura 1 Estructura General del Sistema... 22Figura 2 Diseño Gen eral de la Página Principal ... 23
Figura 3 Diseño Gen eral de Inicio de Sesión ... 24
Figura 4 Diseño general para Mensaje en contraseña al inicia r sesión ... 24
Figura 5 Diseño general para Reestablecer de contraseña ... 25
Figura 6 Diseño general del inicio de registro ... 26
Figura 7 Diseño general "Info rma ción del mentor" ... 28
Figura 8 Mensaje de erro r en Info rma ción del mentor ... 29
Figura 9 Mensaje de mentor correcto en “Info rma ción del mentor” ... 29
Figura 10 Diseño general d e “Localizador de Mentor” ... 31
Figura 11 Diseño de la Sección “No tengo Mento r” ... 32
Página 8
Figura 13 Diseño general d e "Acu erdo" ... 41
Figura 14 Diseño general d e "Paquete de Bienvenida" ... 42
Figura 15 Diseño general d e "Info rma ción de autopago y envío" ... 44
Figura 16 Diseño general "Modo de envió" d entro de "Info rma ción de autopago y envió" ... 46
Figura 17 Diseño general d e "Info rma ción de autopago" dentro de "Info rma ción de autopago y envió" ... 47
Figura 18 Diseño general de "Información de autopago tarjeta" dentro de "Información de autopago y envió" ... 47
Figura 19 Diseño general "Información Personal" en Nuestro movimiento ... 51
Figura 21 Diseño general "Información Personal-Hijos" en Nuestro movimiento ... 52
Figura 20 Diseño general "Información Personal-Talla " en Nuestro movimien to... 52
Figura 22 Diseño general "Información Personal-Redes" en Nuestro movimiento ... 53
Figura 23 Diseño general "Información Personal-2" en Nuestro movimiento ... 53
Figura 24 Diseño general d e Confirmación ... 57
Figura 25 Diseño Header de la plantilla gen eral ... 60
Figura 26 Diseño Footer de la plantilla gen eral ... 60
Figura 27 Diseño general d e Slider en Página de inicio ... 61
Figura 28 Diseño general d e Mensajes en Inicio ... 62
Figura 29 Diseño general d e Acción Comunitaria en Inicio ... 63
Figura 30 Diseño general d el calendario de Inicio ... 65
Figura 31 Diseño general d e Reconocimiento mensual en Inicio ... 66
Figura 32 Diseño general d e conta cto en Inicio ... 66
Figura 33 Diseño general d e No ticia Completa en Inicio ... 67
Figura 34 Diseño de Nu eva Acción en Inicio ... 68
Figura 35 Diseño del Menú Principal en el módulo de Cuen ta... 70
Figura 36 Diseño de No tifica ción dentro de Cuenta ... 71
Figura 37 Diseño de ventana emergente con los motivos para completar la info rma ción ... 72
Figura 38 Diseño de Información de la cuenta ... 73
Figura 39 Diseño Información Legal ... 74
Figura 40 Diseño de Perfil ... 74
Figura 41 Diseño de Contraseña ... 76
Figura 42 Diseño de Dirección ... 76
Figura 43 Diseño de "Nuestro Movimien to" ... 77
Figura 44 Diseño de "Notificaciones" ... 79
Figura 45 Diseño de "Info rmación de Coaplicante" ... 80
Figura 46 Diseño de "Redes So ciales"... 80
Figura 47 Diseño del directorio de métodos de pago ... 82
Figura 48 Diseño de "In troduce otro método de pago" ... 83
Figura 49 Diseño general d e Organización ... 84
Figura 50 Diseño del control de desplazamiento vertical ... 85
Figura 51 Diseño área de no tifica ciones ... 85
Figura 52 Lista de Fu turos Emp rendedo res ... 87
Figura 53 Diseño del reporte de visión gen eral ... 88
Figura 54 Diseño del reporte de proyección ... 90
Figura 55 Diseño del reporte de emprendedores ... 92
Figura 56 Diseño del reporte Festejado del mes ... 94
Figura 57 Diseño del reporte "Emprendedor po r rango" ... 96
Figura 58 Diseño del reporte de Productividad ... 98
Figura 59 Rangos de productividad ... 98
Figura 60 Formas de acceso a agenda ...100
Figura 61 Pantalla principal de Agenda ...101
Figura 62 Flechas de desplazamiento ...104
Página 9
Figura 64 Diseño de la vista de Semana ...106
Figura 65 Diseño general d e la vista Mes ...107
Figura 66 Diseño de Opciones de configura ción...108
Ilustración 1 Organigrama de la Emp resa Quantu m Productora de software ... 13
Página 10
1. Introducción
Los sistemas Web han tenido en los últimos años una difusión a nivel mundial porque las empresas, instituciones, universidades, entre otros, requieren brindar información a los distintos usuarios.
Antes de la construcción de una sistema Web, debemos pensar cómo debe organizarse la información y lo más importante no olvidar que la finalidad es que llegue al usuario. Como arquitectos de estas páginas debemos ponernos en el lugar de los demás, en este caso los usuarios que visitarán la Web tendrán en cuenta lo siguiente:
Se debe crear una interfaz clara y amigable
La información debe ser clara y precisa
Debe presentarse información importante y relevante
Página 11
2. Justificación
En base en el contexto que maneja el Plan de Desarrollo Nacional para el manejo de las Tecnologías de Información y Comunicación (TIC) en su apartado “México Digital” el cual es el plan de acción digital que el Gobierno de la República implementará durante los próximos años. El propósito fundamental de la esta es lograr un México Digital en el que la adopción y uso de las TIC maximicen su impacto económico, social y político en beneficio de la calidad de vida de las personas. La evidencia empírica ha mostrado que la digitalización –entendida como el concepto que describe las transformaciones sociales, económicas y políticas asociadas con la adopción masiva de las TIC impacta el crecimiento del Producto Interno Bruto, la creación de empleos, la productividad, la innovación, la calidad de vida de la población, la igualdad, la transparencia y la eficiencia en la provisión de servicios públicos. La Estrategia surge como respuesta a la necesidad de aprovechar las oportunidades que la adopción y el desarrollo de las TIC crean para potenciar el crecimiento del país.
Este proyecto pretende fomentar la compra y venta de productos mexicanos, generando así una base comercial para la creación de empleos y productividad con tecnologías web innovadoras y aprovechar esta apertura de las TIC a la ciudadanía en general para que el número de posibles usuarios del sistema se incremente, solucionando además la problemática de que este proyecto se llevara de forma manual.
Con la implementación de un sistema Web, se pretende proporcionar a los usuarios la facilidad de registrar y poder realizar los procesos necesarios de forma sistematizada y automática.
Esto facilitará el proceso, lo hará más eficiente y ahorrará tiempo.
La realización de la aplicación Web contempla diversas tareas como lo son: Registro de usuarios, ventas, etc.
Captura de información. Manejo de Usuarios.
Página 12
3. Objetivos
3.1 General
Implementar un sistema Web que permita administrar los procesos de compra – venta, agenda de citas, generación de reportes que se realizan dentro de la red de Acción Comunitaria CompromisoMX
3.2 Específicos
Realizar un diagnóstico de la situación actual de los procesos
Aplicar la metodología orientada a objetos de la Ingeniería de Software para el análisis y el diseño de la solución.
Implementar la solución.
Página 13
4. Caracterización del área en que se participó
4.1 Descripción de la Empresa
Ilustración 1 Organigrama de la Empresa Quantum Productora de software
4.2 Actividades del Área de Desarrollo
El área de desarrollo está coordinada a través de funciones, procedimientos y políticas establecidas para administrar los recursos que los proyectos requieren para operar adecuadamente, esta es la encargada de realizar las operaciones de análisis, diseño, programación y pruebas de los proyectos de la empresa.
Di rector General Jua n Pedro Casian
Ma rquez
Admi nistrador de Proyectos Fra ncisco Naranjo
Bi rrueta
Area de Soporte
Area de Desarrollo Col i ma Ra y Avi l a
Progra ma dor, Tester Enri que Isaias Barajas
Ri os
Area de Desarrollo Gua dalajara Gerente de Proyectos
Página 14
5. Problemas a resolver
Con la construcción de un sistema web para el manejo de la red de acción comunitaria CompromisoMX se pretende que los futuros integrantes de esta red, puedan realizar las actividades que se describen en este proyecto de una manera eficiente y para esto los principales punto que se pretenden desarrollar son:
Página 15
6. Alcances y limitaciones
6.1 Alcances
La empresa usará la tecnología del internet para controlar los procesos realizados dentro de la Red.
Los usuarios contarán con un sistema amigable y de fácil uso, mostrando los pasos a seguir para realizar la tarea que se requiera.
El sistema podrá ser utilizado para altas y modificaciones de los registros, citas u otras actividades solo por usuarios autorizados y/o asignados a realizar este tipo de gestiones.
El sistema informático podrá ser utilizado a través de navegadores web como: Chrome, Mozilla Firefox, Opera, Safari, etc.
6.2 Limitaciones
Página 16
7. Estudio de factibilidad
Para la realización del proyecto se determinó que es posible llevar a cabo el sitio Web para el Control de los procesos que se realizan dentro de la Red de Acción Comunitaria CompromisoMX. Se realizó el estudio de factibilidad para determinar si el proyecto es factible. A continuación se analiza con detalle el resultado de este.
7.1 Factibilidad Técnica
Actualmente, la empresa Quantum cuenta con diferentes tipos de equipo, a continuación en la Tabla 1, se describen los equipos con los que cuenta esta empresa para la implantación del sitio Web:
Tabla 1 Comparación de equipo requerido con el equipo actual en Quantum
Tomando en cuenta los recursos tecnológicos que se muestra en la tabla 1.1, el costo del proyecto es mínimo considerando los beneficios a mediano plazo que el proyecto tendrá. 7.2 Factibilidad Operativa
El personal administrativo que opera los programas informáticos actuales en Quantum, tiene conocimientos básicos de computación, en la tabla 2 se muestran los conocimientos actuales de los trabajadores.
Concepto Tipo Existencia en la empresa Cumple con los
requerimientos
Costo
Hardware Servidor Servidor Apache Tomcat No $3250.00
Computadora Computadora Si $0.00
Hosting .net No $2200.00
Software
Sistema Operativo Windows Seven Si $0.00
Lenguaje Groovy & Grails Si $0.00
Sistema Operativo Windows 8 Si $0.00
Otros Red Banda ancha de 20mb/s No $999.00
Página 17
Tabla 2 Conocimientos del personal de Quantum
Requerimientos de los Conocimientos del Software
Conocimiento del personal Medida para obtener el conocimiento Conocimientos básicos en Windows:
navegadores.
Se cuenta con ellos No aplica
Encender y apagar el equipo. Se cuenta con ellos No aplica Conocimientos básicos en Word Se cuenta con ellos No aplica Conocimiento básicos en
administración de recursos
Se cuenta con ellos No aplica
Manejo del nuevo sistema Ninguno Curso de Capacitación
Como se observa el personal cuenta con la mayoría de los conocimientos en computación y por tanto la implementación de uso de sistema no provocaría una dificultad para su manejo, se solucionaría con una capacitación del nuevo sistema. Por tanto, se declara que el proyecto es operativamente factible.
7.3 Factibilidad Económica
En la tabla 3 se muestra los costos que se generan por la producción del sistema según las ponderaciones que tiene cada fase de la metodología Programación Orientada a Objetos y la duración.
Tabla 3 Costo en la producción del sistema
Fases de la metodología Porcentaje Tiempo(hor as)1 Costo(pesos)2
Análisis y diseño de solución 32% 200 $11,340.00
Desarrollo del sistema 47% 300 $17,010.00
Pruebas 16% 100 $5,670.00
Proceso de implementación 5% 40 $2,268.00
Total 100% 640 $36,288.00
Durante el desarrollo del sistema se necesitan cubrir diversos costos como los que se muestra en las tablas 4 y 5.
Tabla 4 Costos indirectos
Concepto Precio unitario Cantidad Costo
Energía Eléctrica(horas) $0.62 640 $396.80
Transporte $12.00 100 $1,200.00
Papelería y consumibles $100.00 1 $100.00
Viáticos $2,000.00 1 $2,000.00
Total $3,696.80
1
Se consideró el tiempo para desarrollo del sistema es de 640 horas de acuerdo con los tiempos del programa de residencias profesionales.
2
Página 18
Tabla 5 Costos directos
Concepto Costo
Producción del envase del sistema $250.00
Gastos por capacitación $800.00
Total $1,050.00
7.4 Factibilidad legal
El sistema se elaborará bajo algunas plataformas que son de licencia libre; como lo es un Servidor Apache aunque sí será necesario Windows Seven que soporta Groovy & Grails y JavaScript, pero Quantum ya cuenta con licencias de este software por lo cual no generará ningún problema legal.
Además se cumplirán todos los documentos de acuerdo a las especificaciones de la Agencia de Aduanas y la Secretaría de Hacienda y Crédito Público.
8. Análisis costo-beneficio
Actualmente no se cuenta con sistema alguno que facilite el proceso en el área de ventas por lo que el sistema pretende agilizar y optimizar los procesos que se describen a continuación:
8.1 Tiempo de procesos de registro:
Con el proceso manual se pierde mucho tiempo al realizar todos los trámites correspondientes a la venta de los productos y generación de reportes y documentos que son necesarios para la empresa lo que da paso a una mayor pérdida de tiempo y más espacio a errores humanos.
Página 19
9. Ventaja Competitiva
En la tabla 6, se mencionan las alternativas, ventajas y desventajas para atender la problemática anteriormente mencionada.
Tabla 6 Análisis de alternativas para el desarrollo del proyecto
Alternativa Ventajas Desventajas
Continuar operando de la misma forma
No se requiere capacitación Mayor espacio a errores humanos
Pérdida de tiempo
Procesos repetitivos
Cuello de botella al capturar la información.
Sistema Web para la Red Comunitaria
Optimización de tiempos .
Actualizaciones.
Conocimiento del destino del producto, el comercializador y el productor.
Estadísticas de la cantidad de producto que exporta la empresa.
Comodidad para capturar y realizar la documentación
Comunicación directa durante la generación del sistema.
Atención durante el desarrollo del sistema.
Diseño basado en los requerimientos del cliente.
Interfaz amigable e intuitiva para el llenado de formato de nuevos registros
Documentación completa del sistema
Sistema adaptable al cliente
Resistencia al cambio.
Comprar un sistema similar Ahorro de tiempo de programación
Inversión monetaria
Sistema limitado
Diseño no adecuado
Poca atención al cliente
Documentación insuficiente
Página 20
10. Fundamento Teórico
Dentro de la empresa Quantum se maneja un proceso de cuatro etapas para la creación de sistemas los cuales se pueden apreciar en la siguiente figura
Ilustración 2 Descripción de los procesos de Quantum
Definición de requerimientos
Se realiza la definición de los requerimientos del proyecto en base a las peticiones del cliente, visualizando las necesidades y las propuestas que surjan en el momento, con el fin de obtener una visión general del proyecto a desarrollar.
Análisis y Diseño
De acuerdo a la primera definición de los requerimientos se realiza una análisis de la información y una división de cada elemento propuesto con el fin de obtener de manera clara los requerimientos y actividades que se realizaran, tomando en cuenta costos y esfuerzo por parte del grupo de trabajo involucrado, en esta etapa se realiza la especificación de los requisitos y diseños previos del proyecto.
Definición de requerimientos
Análisis y diseño
Implementación y mantenimiento
Página 21
Desarrollo y pruebas
Desarrollo del proyecto de forma iterativa, al grupo de desarrollo se le indican las
actividades que tiene que realizar indicando tiempos y fechas de entrega, el desarrollo se base en entregas parciales al cliente (Hitos), estas entregas deberán de cumplir la validación por parte del tester y las pruebas unitarias realizadas por los mimos programadores. Las actividades que resulten fallidas serán reasignadas hasta su finalización.
Implementación y Mantenimiento
Implementación del proyecto en el ambiente productivo del cliente, en esta fase si existen incidencias se dará el seguimiento de las mismas hasta su cierre.
El mantenimiento se le otorgara al cliente mediante los entregables otorgados y capacitaciones.
Las asignaturas que me aportaron el conocimiento para poder realizar este proyecto son:
Programación web
Interfaz Hombre Máquina
Fundamentos de desarrollo
Desarrollo de proyectos de software
Planificación y modelado
Página 22
11. Procedimientos y descripción detallada de las actividades realizadas.
En esta sección se describirá de forma detallada cada una de las actividades realizadas en esté proyecto de residencia, así mismo se indicara como se aplicaron los conocimientos previos para llegar a una solución, además contara con el análisis y diseño general de cada uno de los módulos a realizarse dentro del proyecto, así como un documento en PDF en el cual se darán los detalles de lo que se pretende hacer para completar todo el sistema, con un diccionario de datos, casos de uso, imágenes y esquemas, especificaciones técnicas, descripción de los roles del usuario y el administrador; la codificación del sistema así como los manuales pertenecen a la empresa por lo que no se incluirán dentro de este documento. El proyecto consistirá en el desarrollo de algunos de los módulos que conforman el proyecto de “Red de acción comunitaria CompromisoMX” estos son: Página Principal, Pagina de socio esta última se conformará por los sub-módulos de inicio, cuenta, organización y agenda los cuales contarán con una interfaz web dinámica que permita a los clientes y al administrador de la empresa consultar las actividades realizadas por los clientes, así como su progreso dentro de las actividades que se deben realizar, cabe mencionar que la funcionalidad de algunas secciones de los módulos a desarrollar dependen de la alimentación de datos por parte de otros módulos contemplados en la estructura general los cuales se desarrollarán posteriormente. En la figura 1 se especifican los módulos y sub-módulos a desarrollar dentro de la estructura completa del proyecto:
Figura 1 Estructura General del Sistema
Página 23
encabezados, colores, tamaño de la organización, numero de niveles, nombres de cada nivel, porcentajes de regalías, porcentajes de ganancias, edición de fórmulas, etc.
11.1 Página Principal
Es la que se mostrará al ingresar al dominio del sitio. Su función principal es de carácter informativo y debe de transmitir la imagen corporativa de la organización. Esta página tiene enlaces al log in mismo que llevara al Back office (página del socio), panel de registro el cual llevara al proceso de registro para usuarios, página donativos donde usuarios y no usuarios del sistema podrán donar al sistema y la tienda donde los usuarios podrán comprar y vender sus productos en la figura 2 se muestra el diseño general de esta sección.
Figura 2 Diseño General de la Página Principal
11.1.1 Log in
Página 24
Figura 3 Diseño General de Inicio de Sesión
En caso de que el usuario olvide su usuario o contraseña el sistema emitirá un mensaje a este para que reescriba su contraseña de manera correcta como se muestra en la figura 4.
Figura 4 Diseño general para Mensaje en contraseña al iniciar sesión
Página 25
Figura 5 Diseño general para Reestablecer de contraseña
Requerimientos Funcionales
El Sistema debe contar con un panel de log in para todos aquellos usuarios registrados. Durante el proceso de log in se deberá proporcionar el usuario y contraseña proporcionados en el proceso de registro.
Una vez que el usuario ingrese correctamente los datos requeridos se ingresa a la página del socio.
Requerimientos No Funcionales
Solo se deben poder ingresar al sistema los usuarios registrados. 11.1.2 Tienda
Este enlace nos permitirá accesar la tienda virtual en donde se podrán visualizar los productos que se tienen a la venta sin necesidad de registrarse, sin embargo solo los usuarios registrados podrán efectuar compras (la construcción de esta sección no está contemplada en este proyecto).
11.1.3 Panel de registro
Página 26
10.1.3.1 Inicio de Registro
Existen dos opciones para registrarse:
o Colaborador Social (CS)
o Emprendedor Social Independiente (ESI)
Un CS es aquella persona que se registra solo para participar en la red de acción comunitaria y en recibir mensualmente sus productos pero no está interesado en formar parte de la red de distribución.
Como ESI formas parte de la red de acción comunitaria, el sistema Red de Distribución en el cual tendrá su organización u organizaciones, recibir mensualmente el paquete de productos y muchos beneficios más.
En la figura 6 se muestra el diseño general de esta sección.
Figura 6 Diseño general del inicio de registro
En la tabla 7 se describen los elementos que componen la figura anterior. Tabla 7 Descripción de los campos y botones del inicio de registro
Tipo de Elemento Nombre Descripción
Imagen Logotipo de la Organización Es el logotipo de la organización y de la marca del producto a distribuir. (Aparece en todas las pantallas).
Select Idioma Selecciona el idioma en el que se
mostrara la página.
(Aparece en todas las pantallas). Etiqueta Mensaje de Bienvenida ¡Felicidades! Usted ha sido invitado
a formar parte del Movimiento COMPROMISOMX. Hagamos juntos que las cosas sucedan.
Página 27
como: Colaborador Social (CS) o Emprendedor Social Independiente (ESI).
Radio Select Colaborador Social Selector para activar el tipo de usuario “Colaborador Social” para
integrarse al movimiento. Radio Select Emprendedor Social Selector para activar el tipo de
usuario “Emprendedor Social Independiente” para integrarse al
movimiento.
Text Box Descripción de Colaborador Social Nuestros CS son aquellas personas generosas que contribuyen positivamente al movimiento COMPROMISOMX y reciben mensualmente productos mexicanos elaborados con prácticas de comercio justo. Su participación nos ayuda a llevar a cabo acciones sociales en beneficio de nuestro país y a generar una mejor economía para los productores mexicanos. Como Cs usted gozará de atractivos descuentas en la tienda social y podrá participar en nuestras actividades y eventos. Text Box Descripción de Emprendedor Social
Independiente.
Como usted está iniciando su propia empresa social y forma parte de nuestra red en acción. Nuestro compromiso es ayudarlo a desarrollarse personal, social, profesional y económicamente, a su vez usted tendrá la oportunidad de ayudar a más personas.
Botón Siguiente Botón que valida la información
ingresada y las selecciones que el usuario haya realizado. Si todo es correcto al dar clic sobre el botón y validar el sistema permitirá pasar a la siguiente sección del registro.
Requerimientos Funcionales
El Sistema debe contar con un panel de registro para todos aquellos interesados en formar parte del grupo social.
Durante el proceso de inscripción se deberá poder elegir el tipo de cliente que se desea ser. Una vez seleccionado el tipo de cliente, el proceso de inscripción se inicia.
Se deben describir cada uno de los pasos del proceso de inscripción. Requerimientos No Funcionales
Página 28
Reglas de Negocio de Operación
Una vez seleccionado el tipo de cliente, el proceso de inscripción se inicia. Se deben describir cada uno de los pasos del proceso.
11.1.3.2 Paso 1 del Proceso de Registro - Información del Mentor
En este primer paso del proceso el usuario debe ingresar el nombre o ID del mentor para poder continuar el proceso de registro, en la figura 7 se puede observar el diseño general de esta sección.
Figura 7 Diseño general "Información del mentor"
Página 29
Figura 8 Mensaje de error en Información del mentor
Página 30
En la tabla 8 se describen los elementos que componen la figura anterior. Tabla 8 Descripción de los campos y botones de "Información del Mentor"
Tipo de Elemento Nombre Descripción
Barra de menú Menú El menú describe los pasos
para realizar la inscripción. Se debe marcar o resaltar el paso que se esté ejecutando en ese momento.
Etiqueta Paso 1 Información del Mentor.
Form Información del Mentor Contiene los campos del
formulario a llenar. Text área Nombre de usuario o ID del Mentor Aquí se introduce el
nombre de usuario o ID del mentor..
Texto Mentor Encontrado “El nombre del Mentor es
correcto”.
Texto Mentor no encontrado “El nombre del Mentor no
existe”.
Imagen Mentor Encontrado Figura en miniatura que
represente que el nombre de Mentor que se introdujo es correcto.
Imagen Mentor no encontrado Figura en miniatura que
represente que el nombre de Mentor que se introdujo es correcto.
Text área ID del Mentor Aquí se introduce el Id del
Mentor
Texto ID de Mentor Encontrado El Id del Mentor es
correcto.
Texto ID de Mentor no Encontrado El Id del Mentor es
incorrecto.
Imagen Mentor Encontrado Figura en miniatura que
represente que el nombre de Mentor que se introdujo es correcto.
Imagen Mentor no Encontrado Figura en miniatura que
represente que el nombre de Mentor que se introdujo es incorrecto.
Texto-link En caso de no recordar el nombre de usuario o ID de su Mentor haga clic aquí.
Ayuda para buscar nombre de usuario o id de Mentor
Link En caso de no tener Mentor haga clic aquí
Liga a un formulario donde el interesado pondrá su información de contacto
Botón Siguiente Manda al siguiente paso de
registro
Página 31
Si el nuevo usuario no recuerda el nombre de su mentor, podrá dar clic en el enlace que aparecerá abajo con el texto “Click aquí”, el cual servirá para pasar a la sección de Localizador de Mentor para poder realizar una búsqueda por medio de ciertos datos de la persona para encontrarlo como se muestra en la figura 10.
Figura 10 Diseño general de “Localizador de Mentor”
En la tabla 9 se describen los elementos que componen la figura anterior. Tabla 9 Descripción de los campos y botones de "Localizador de Mentor"
Tipo de Elemento Nombre Descripción
Input Text Nombre (s) Recibe el Nombre (s).
Obligatorio
Input Text Apellido Se introduce el Apellido o
apellidos del Mentor. Obligatorio
Select Estado Se selecciona el estado en
el que está registrado. Opcional
Select Ciudad Este campo es opcional.
Opcional
TextArea Teléfono Este campo es opcional.
Opcional
TextArea Email Este campo es opcional.
Opcional
Página 32
existe alguien registrado con la información proporcionada Texto Favor de completar todos los campos
con asterisco (*), los cuales son obligatorios.
El mensaje aparecerá cuando se haga clic en el botón Buscar y no se han llenado por lo menos los dos campos obligatorios (Nombre (s) y Apellido).
Si el nuevo usuario no cuenta con un mentor, podrá dar clic en el enlace que aparecerá abajo con el texto “Click aquí”, el cual servirá para pasar a la sección de No tengo Mentor donde podrá ingresar sus datos personales al sistema para poder conseguir un Mentor y así poder integrarse a la comunidad de CompromisoMX como se muestra en la figura 11.
Figura 11 Diseño de la Sección “No tengo Mentor”
En la tabla 10 se describen los elementos que componen la figura anterior. Tabla 10 Descripción de los campos y botones de "No tengo Mentor"
Tipo de Elemento Nombre Descripción
Texto Mensaje (Va en un lado) ¿No cuenta con un Mentor?
Página 33
dentro del movimiento COMPROMISOMX. Si usted no cuenta con un Mentor favor de llenar el siguiente formulario. Formulario Formulario de contacto Contiene el conjunto de
campos y elementos para que el interesado los llene y se envíen a la
administración.
Input-Text Nombre Campo de texto para
introducir nombre completo del interesado. Obligatorio
Input-Text Número de Teléfono Campo de texto para
introducir el número telefónico del interesado. Obligatorio
Select País Mostrar la lista de países
para seleccionar. (Países de Latinoamérica).
Obligatorio
Select Estado Mostrar los estados del país
para seleccionar. Obligatorio
Text-Select Ciudad Selector Autocompletado
de las ciudades en base al CP indicado. Obligatorio
Input-Tex Código Postal Recibe el código postal y
carga las ciudades que corresponden a este para seleccionar en el siguiente campo. Obligatorio
Requerimientos Funcionales
Para inscribirse se necesita de un Mentor, es decir la persona que le invitó a formar parte del grupo. El interesado debe proporcionar el Nombre de Usuario del Mentor o bien el ID del Mentor. Se debe verificar que los datos del Mentor existan y sean los correctos, en caso de que el interesado no recuerde el nombre de usuario o id, debe existir la opción que permita hacer una búsqueda del Mentor a través de un formulario donde deberá proporcionar información personal del Mentor haciendo ver que en verdad lo conoce pero desconoce exactamente el nombre de usuario o id de este.
Para aquellas personas que no conocen el Nombre de su Mentor o quieren suscribirse y no tienen uno debe existir un link que los lleve a un formulario donde registrará su información de contacto e intereses para que posteriormente se le envíe información detallada de la empresa y alguien se ponga en contacto con él.
Página 34
Al momento de registrarse o registrar a un nuevo socio el sistema identificará automáticamente el equipo al que pertenece el Mentor y lo asignará al nuevo emprendedor; viéndolo de otra manera son 50 árboles y cada árbol inicia con sus 5 ramas y así sucesivamente.
El sistema debe registrar:
Nombre del equipo al que pertenece. Nombre del Miembro Selecto Requerimientos No Funcionales
Se debe verificar directamente en los registros de la base de datos que el Mentor exista realmente y si no es así no permitir continuar con el proceso.
Buscar en un solo campo de texto el Nombre de Usuario o ID del Mentor. Reglas de Negocio de Información de Mentor
Para verificar el Mentor o ID se debe validar al momento de terminar de escribir y a un costado marcar con un icono verde si fue encontrado y la leyenda de “Mentor Encontrado”, en caso contrario deberá aparecer un icono de alerta con la leyenda de: “Nombre de usuario o ID del Mentor no existe”. Esto debe ocurrir de manera automática sin necesidad de contar con algún botón de verificar. El botón Siguiente solo debe mostrar el siguiente paso si el nombre de usuario del Mentor o su ID es correcto, en caso de no existir no deberá realizar acción alguna.
Reglas de Negocio de Haga clic aquí
Esta ventana es de tipo modal (pop-up) de tamaño pequeño, de tal forma que no cierra la ventana principal del registro.
Se escribe el primer nombre o ambos nombres, esto va a depender de cómo se encuentre registrado el Mentor.
Al igual que el campo anterior se pueden introducir ambos apellidos o el primero ya que igual dependerá del registro del Mentor.
Al someter la búsqueda en base a esta información solo debe mostrar aquellos resultados que coincidan exactamente con la combinación de nombre y apellido, esto para evitar mostrar resultados que no tienen nada que ver.
Los campos nombre y apellido deben ser marcados con asterisco rojo como indicador de que son campos obligatorios.
Ciudad, teléfono y email son opcionales.
El mensaje “Favor de completar todos los campos con asterisco (*), los cuales son obligatorios.” aparecerá en una ventana pop-up ubicándose en la parte central de la pantalla. Tal ventana debe incluir un botón Cerrar para desaparecer el mensaje.
Página 35
11.1.3.3 Paso 2 Información de la Cuenta
En esta sección el usuario deberá proporcionar todos los datos marcados como Obligatorios por el sistema atreves de las pantallas que aparecen en este proceso (para mayor información de esta sección favor de ver el manual de usuario de este módulo) en la figura 12 se muestra el diseño general de esta sección.
Figura 12 Diseño general para "Información de la cuenta"
En la tabla 11 se describen los elementos que componen la sección de Información de la cuenta.
Tabla 11 Descripción de los campos y botones de "Información de la cuenta"
Tipo de Elemento Nombre Descripción
Frame Información de la cuenta
Input-Text CURP Clave Única de Registro
de Población. Obligatorio
Input-Text Nombre (s) Nombre o Nombres del
interesado. Obligatorio
Input-Text Primer Apellido Primer Apellido del
interesado. Obligatorio
Input-Text Segundo Apellido Segundo Apellido del
Interesado.
Texto Fecha de nacimiento Fecha de nacimiento.
Página 36
Select Fecha de Día de nacimiento Día en el que nació conforme lo marca el acta de nacimiento
Select Fecha de nacimiento Mes Mes en el que nació
conforme lo marca el acta de nacimiento
Select Fecha de nacimiento año Año en el que nació
conforme lo marca el año de nacimiento
Select Idioma Se seleccionar el idioma
de preferencia del usuario. Obligatorio
Radio buttons Genero Seleccionar el género.
Obligatorio
Texto Nota Todo el material que
usted reciba estará en el idioma seleccionado.
Select Text-Autocomplete País Seleccionar el país donde
se encuentra. Solo países de Latinoamérica. Obligatorio
Select Text-Autocomplete Estado Seleccionar el estado al que pertenece.
Obligatorio
Select Text-Autocomplete Ciudad Escribir la ciudad en la que se ubica su domicilio. Obligatorio
Input-Text Código Postal Se ingresa el código
postal. Obligatorio
Select Tipo de asentamiento Permite elegir el tipo de
asentamiento: colonia, fraccionamiento, unidad habitacional, barrio, poblado, ejido, etc., predeterminar colonia. Obligatorio
Select InputText-Autocomplete Nombre de Colonia Ingresar o seleccionar el nombre del asentamiento del usuario. Obligatorio
Input Text Calle Escribir la calle en la que
vive el usuario. Obligatorio
Input Text Lote Escribir número o lote
donde vive el usuario. Obligatorio
Input Text Numero Exterior Escribir número o lote
donde vive el usuario. Obligatorio
Input Text Numero Interior Escribir número o lote
donde vive el usuario. Obligatorio
Input Text Manzana Escribir manzana o
Página 37
Input-Text Cruzamientos Cruzamientos del
domicilio. Obligatorio
Input-Text Referencias Escribir las referencias
especificas del domicilio
Input-Text Teléfono móvil Escribir número de tel.
celular.
Botón Solicitar Clave Botón que solicita se
envíe la clave al núm. celular proporcionado. Input-Text Código de verificación Campo para introducir el
código de verificación y validar el número. Obligatorio solo en caso de proporcionar
teléfono
Botón Verificar clave Verifica que la clave del
campo código de verificación sea la misma que se generó al solicitar clave.
Texto Mensaje de verificación de clave La clave es incorrecta. Texto Mensaje de verificación de clave La clave es correcta.
Input Text Teléfono casa Escribir Número de
teléfono de casa. Opcional
Input Text Otro teléfono Escribir Otro número de
teléfono Opcional
Campo Correo electrónico Campo obligatorio. Debe
registrar el correo electrónico del usuario. Sera el correo principal con el que se activara la cuenta y se le harán llegar las notificaciones Botón Solicitar clave verificación correo
electrónico
Botón que envía clave de verificación al correo proporcionado en el campo correo electrónico Campo Ingresar clave verificación correo
electrónico.
Campo de texto para verificar que la clave recibida en el correo proporcionado es la misma que se envió mediante el botón de verificación de clave.
Frame Creación de la cuenta A partir de aquí se toman
los datos para usuario y contraseña
Input-Text Nombre de usuario Escribir el que será el
nombre de usuario del usuario. Obligatorio Texto Nombre de usuario Disponible Nombre de usuario está
disponible
Página 38
disponible
Imagen Nombre de usuario Disponible Figura en miniatura que represente que el nombre de usuario está
disponible. Obligatorio Imagen Nombre de usuario no Disponible Figura en miniatura. que
represente que el nombre de usuario no está disponible Obligatorio
Texto El nombre de usuario es demasiado
largo
El nombre de usuario es demasiado largo Obligatorio
Texto El nombre de usuario es demasiado
corto
El nombre de usuario es demasiado corto Obligatorio
Texto El nombre de usuario es incorrecto El nombre de usuario es incorrecto, verificar que cumpla con las
especificaciones. Obligatorio
Texto Especificaciones nombre de usuario Por favor elija un nombre de usuario fácil de recordar con las siguientes
especificaciones: mínimo 6 y máximo 20 caracteres, indistinto mayúsculas y minúsculas, caracteres de (A-Z) y (0-9). No se permite espacios (_-).
Input-Password Contraseña Escribir la que será la
contraseña del usuario Obligatorio
Texto La seguridad es débil Seguridad débil
Texto La seguridad es mediana Seguridad mediana
Texto La seguridad es fuerte Seguridad fuerte
Texto La contraseña es incorrecta Contraseña incorrecta, verifique las
especificaciones Especificaciones para la contraseña
Input- Password Revisar Contraseña Volver a escribir la contraseña Obligatorio Texto Indicaciones para contraseña Por su seguridad la
contraseña debe tener al menos 6 caracteres y por lo menos una letra mayúscula y un número.
Texto Aviso La información solicitada
es confidencial.
Link Aviso de Privacidad Términos, condiciones de
uso y privacidad
Texto Favor completar todos los campos
con asterisco (*), los cuales son obligatorios.
Página 39
Página 40
Requerimientos Funcionales
Recabar la información necesaria para crear la cuenta de Registro del Nuevo Emprendedor. Debe obtenerse la información suficiente para ponerse en contacto con el emprendedor su información básica y elegir su nombre de usuario y contraseña.
Requerimientos No Funcionales
La información deberá validarse y registrarse en tiempo real, haciendo lo más rápida esta operación.
Señalar los campos que sean obligatorios para poder tener el registro de ellos. Validaciones Especiales
Número Telefónico Celular: Para validar el número telefónico al momento de ingresar el número en el campo, el sistema deberá enviar a través de un mensaje de texto un código de activación al teléfono celular proporcionado en el campo “Tel Celular”.
Para que el sistema envié la clave de activación al número celular el usuario deberá dar clic en el botón “solicitar clave”.
Clave de activación: deberá ser de 4 dígitos aleatorios, combinación letras y números. Cada vez que el usuario de clic en el botón “solicitar clave” el sistema deberá enviar una clave diferente
El usuario deberá ingresar el código en el campo “código de verificación”.
Al ingresar su código en el campo, el usuario debe hacer clic en el botón verificar clave. Si el código de activación no es el correcto, debe aparecer un mensaje que indique que: “La clave de activación proporcionada es incorrecta, verifique su clave”.
Si el código de activación es correcto debe aparecer a un costado un gráfico que diga: Clave verificada correctamente.
Correo electrónico: Validar que el correo electrónico proporcionado es verídico, se enviara un correo electrónico a la cuenta de correo especificada con una clave de autentificación, el usuario deberá entrar a su cuenta copiar la clave y pegarla en el campo de validación de correo electrónico.
11.1.3.4 Paso 3 Acuerdo
Página 41
Figura 13 Diseño general de "Acuerdo"
En la tabla 12 se describen los elementos representados en la figura anterior. Tabla 12 Descripción de los campos y botones de "Acuerdo"
Tipo de Elemento Nombre Descripción
Frame Acuerdo con asociado Marco que delimita el
espacio donde ira el acuerdo
Text Area Acuerdo Redactar el acuerdo.
(PENDIENTE TAN PRONTO SE TENGA SE LE ENVIARÁ)
Frame Aceptación de asociado Marco que delimita el
espacio donde se marca que está de acuerdo
Checkbox Aceptación de asociado Acepto el reglamento
descrito en el acuerdo exhibido arriba. Obligatorio
Frame Firma Digital Área de texto para
ingresar iniciales como firma
Texto Ingresa tus Iniciales, representan una firma digital.
Favor de ingresar su nombre, tendrá el valor de una firma digital.
Texto Firma digital Favor de ingresar su
Página 42
una firma digital.
Botón Regresar Regresa al paso anterior.
Requerimientos Funcionales
En este paso se debe mostrar en pantalla el acuerdo del socio lo suficientemente legible y cómodo para la lectura del cliente.
Debe existir un botón o forma para que el cliente marque que ha leído y está de acuerdo con el acuerdo del cliente selecto.
Para finalizar este proceso se requiere que el cliente ingrese sus iniciales a manera de firma digital.
El acuerdo del cliente que se muestre en pantalla será el mismo para los dos tipos de registros.
Requerimientos No Funcionales
El acuerdo del cliente debe mostrarse en un área de texto de tamaño mediano con un scrollbar para poder ir recorriendo el contenido del acuerdo.
Utilizar un cuadro o forma para pantalla general para cada una de las 3 secciones: Acuerdo del socio, Aceptaciones del socio S, Firma Digital.
Si el usuario no marca la casilla de verificación y aceptación de que ha leído el acuerdo y lo acepta, si no cumple no podrá avanzar al siguiente paso.
Al dar clic en siguiente y validar que acepto el acuerdo pasar al paso 5. 11.1.3.5 Paso 4 Paquete de bienvenida
En esta sección el sistema otorga un paquete de bienvenida al nuevo usuario como se muestra en la figura 14.
Página 43
En la tabla 13 se describen los elementos mostrados en la figura anterior. Tabla 13 Descripción de los campos y botones de "Paquete de Bienvenida"
Tipo de Elemento Nombre Descripción
Frame CONTENEDOR En este se encontraran la lista de
productos que posiblemente se puedan incluir en el paquete de bienvenida.
Etiqueta Descripción y nombre Aquí se incluirá el nombre del producto y la información que de una breve explicación de lo que trate dicho producto.
Imagen Foto de producto Aquí se contendrá una imagen del producto para verlo como será físicamente.
Botón Siguiente Permite ir a la siguiente sección
del formulario de registro una vez que haya completado y cumplido la condición de esta sección.
Reglas de negocio
En este caso los productos para el paquete de bienvenida estarán predeterminados por la organización (por definir los productos que se podrán incluir en el paquete de bienvenida). Los productos se mostraran en forma de lista descendente contando con una barra deslizadora para la navegación de dicha lista.
11.1.3.6 Paso 5 Información de envió y autopago
Página 44
Figura 15 Diseño general de "Información de autopago y envío"
En la tabla 14 se muestra la descripción de los elementos de la figura 15.
Tabla 14 Descripción de los campos y botones de "Información de autopago y envió"
Tipo de Elemento Nombre Descripción
Checbox Utilizar información Utilizar mi información de contacto de dirección para mi Información de envío
Frame Información de Envío Esta será la dirección a la
cual enviaremos sus productos
Input-Text Nombre (s) Nombre o Nombres del
Socio Obligatorio
Input-Text Primer Apellido Primer Apellido del socio
Obligatorio
Input-Text Segundo Apellido Segundo Apellido del
socio Obligatorio
Select País Seleccionar el país donde
se encuentra Obligatorio
Select Estado Seleccionar el estado al
que pertenece Obligatorio Select Text-Autocomplete Ciudad o Municipio Escribir la ciudad en la que
se ubica su domicilio Obligatorio
Input-Text Código Postal Se ingresa el código postal
Obligatorio
Select Colonia Permite elegir el tipo de
Página 45
Select InputText-Autocomplete Nombre de Colonia Ingresar o seleccionar el nombre del asentamiento del usuario Obligatorio
Input Text Calle Escribir la calle en la que
vive el usuario Obligatorio
Input Text Lote Escribir numero o lote
donde vive el usuario Obligatorio
Input Text Numero Exterior Escribir numero o lote
donde vive el usuario Obligatorio
Input Text Numero Interior Escribir numero o lote
donde vive el usuario Obligatorio
Input Text Manzana o bloque. Escribir manzana o bloque
donde vive el usuario Obligatorio
Input-Text Cruzamientos Cruzamientos del
domicilio Obligatorio
Input-Text Referencias Escribir las referencias
especificas del domicilio Obligatorio
Input Text Teléfono Casa Escribir Número de
teléfono de casa Obligatorio
Texto Aviso La información solicitada
es confidencial.
Link Aviso de Privacidad Términos, condiciones de
uso y privacidad
Botón Atrás Regresa a la pantalla
anterior
Botón Siguiente Pasa a recoger datos de
facturación
Texto Favor de completar todos los campos
con asterisco (*), los cuales son obligatorios.
Aparece un mensaje en cada interfaz “Dirección de envío”, cuando se haga clic en el botón Siguiente y no se han llenado todos los campos obligatorios.
Página 46
Figura 16 Diseño general "Modo de envió" dentro de "Información de autopago y envió"
En la tabla 15 se describen los elementos que componen la figura anterior.
Tabla 15 Descripción de los campos y botones de "Método de envió" " dentro de "Información de autopago y envió"
Tipo de Elemento Nombre Descripción
Frame Método de Envío Se deben mostrar las opciones
de envió
Tabla Tabla de descripción de métodos Se compone de 4 campos: “Método de envío”, “envío”, “manejo”, “flete aduanal”. Aparecerán sin cargos. Radio-button Método de envió Envió terrestre Obligatorio
Envió Precio de envió Obligatorio
Manejo Precio de manejo Obligatorio
Flete aduanal Precio de flete aduanal
Obligatorio
Página 47
Figura 17 Diseño general de "Información de autopago" dentro de "Información de autopago y envió"
Figura 18 Diseño general de "Información de autopago tarjeta" dentro de "Información de autopago y envió"
En la tabla 16 se describen los elementos de las figuras anteriores.
Tabla 16 Descripción de los campos y botones de "Información de autopago tarjeta" dentro de "Información de autopago y envió"
Tipo de Elemento Nombre Descripción
Frame Información de facturación Contiene todos los
campos referentes a la facturación
Página 48
para facturar: Tarjeta de crédito o tarjeta de débito (predeterminado: tarjeta de crédito)
Chec box Guardar información de autopago para su uso en un futuro
Guardara los datos para ser utilizados en la próxima operación del cliente Opcional
Select Tipo de tarjeta El cliente debe
seleccionar el tipo de tarjeta que maneja. (American Express. VISA o MasterCard.
Obligatorio
Input-Select Banco Deben aparecer las
Instituciones Bancarias. Definir Bancos
Input-Text Número de tarjeta El cliente debe ingresar
aquí su # de tarjeta Obligatorio
botón Ayuda con el número de tarjeta Abre una ventana con una imagen que muestra donde encontrar el número de tarjeta Select Expiración de tarjeta -Mes El cliente debe poder
seleccionar el mes de expiración de la tarjeta de crédito Obligatorio. Meses en formato del 01- al 12
Select Expiración de tarjeta -Año El cliente debe poder seleccionar el año de expiración de la tarjeta Obligatorio. Años en formato 00-99
botón Ayuda con la expiración de tarjeta Abre una ventana con una imagen que muestra donde encontrar la fecha de expiración
Input-Text CVV2 Código de seguridad
Obligatorio
botón Ayuda con el código de verificación Abre un ventana con una imagen de muestra donde encontrar el código de verificación
Chec box Utilizar mi información de contacto de dirección para mi dirección de facturación
Utiliza la dirección de contacto rellenando los campos con esa dirección Input-Text Nombre (s) Titular de la tarjeta Nombre o Nombres del
Socio Obligatorio Input-Text Primer Apellido Titular de la tarjeta Primer Apellido del socio
Obligatorio
Página 49
Select País Seleccionar el país donde
se encuentra
Select Estado Seleccionar el estado al
que pertenece Obligatorio
Select Text-Autocomplete Ciudad o Municipio Escribir la ciudad en la que se ubica su domicilio
Input-Text Código Postal Se ingresa el código
postal Obligatorio
Select Asentamiento Permite elegir el tipo de
asentamiento: colonia, fraccionamiento, unidad habitacional, barrio, poblado, ejido, etc., predeterminar colonia Obligatorio
Select InputText-Autocomplete Nombre de Colonia, fraccionamiento...
Ingresar o seleccionar el nombre del asentamiento del usuario Obligatorio
Input Text Calle Escribir la calle en la que
vive el usuario Obligatorio
Input Text Lote Escribir numero o lote
donde vive el usuario Obligatorio
Input Text Numero Exterior Escribir numero o lote
donde vive el usuario Obligatorio
Input Text Numero Interior Escribir numero o lote
donde vive el usuario Opcional
Input Text Manzana Escribir manzana o
bloque donde vive el usuario Obligatorio
Input-Text Cruzamientos Cruzamientos del
domicilio Obligatorio
Input-Text Referencias Escribir las referencias
especificas del domicilio Obligatorio
Input Text Tel Residencial Escribir Número de
teléfono de casa Obligatorio
Texto Aviso La información solicitada
es confidencial.
Link Aviso de Privacidad Términos, condiciones de
uso y privacidad
Botón Siguiente Pasa a la siguiente
ventana, enviando datos a validación
Texto Favor de completar todos los campos
con asterisco (*), los cuales son obligatorios.
Página 50
Requerimientos Funcionales
Debe de recoger los datos necesarios de su domicilio postal.
Debe recoger los datos de facturación para que se le cobre el producto Este paso 6 se debe dividir en dos:
Primero se debe recoger la información de envió y una vez completa y validada solicitar la información de autopago en la misma pantalla
Requerimientos No Funcionales
Los datos se deben recoger a través de un formulario
La información debe ser validada antes de ingresarla a la Base de datos
Los campos de dirección deben ser claros, precisos y obligatorios para tener la dirección exacta.
Si la dirección de Envió es la misma que la dirección de contacto ofrecer la opción que indique que es la misma y autocompletar
Si la dirección es diferente a la de contacto mostrar los campos en blanco para rellenar Se debe validar toda la información de facturación, núm. de tarjeta, expiración, etc.
Se debe solicitar dirección de facturación, mismo proceso que el anterior, si es la misma dirección de contacto poder marcarlo, en caso contrario los campos en blanco para rellenar con la información exacta de facturación.
Antes de pedir la información específica de facturación hay que pedir que seleccione el método de envió
Es obligatorio seleccionar un método de envió, si no es así no se debe permitir continuar Reglas de negocio
Debe aparecer seleccionado y predeterminado el tipo de envío terrestre. Las otras dos opciones están para su uso en un futuro.
Cuando el usuario marque la forma de pago tarjeta de crédito, se le deberá de pedir si es VISA o MasterCard. En caso de que la información no pase por algún motivo el proceso de validación se deberá mantener en la página actual e indicar con el mensaje: “La información que nos proporciono es incorrecta, por favor revisar que:
Observación 1. No de tarjeta Incorrecto
Observación 2. Tipo de tarjeta incorrecto
Observación N” Expiración de la tarjeta Incorrecto
Observación CVV Incorrecto
Nombre del Titular de la Tarjeta Incorrecto
La información Bancaria es Incorrecta
Así por todos los campos que no cumplan con el proceso de validación
Página 51
También se debe marcar de color rojo directamente los campos que no han superado este proceso de validación.
Al realizar las correcciones se debe volver dar clic en el botón de siguiente y si cumple las condiciones pasar al paso 6: Nuestra Comunidad, si no lo cumple se repite el mismo proceso hasta que lo cumpla
11.1.3.7 Paso 6 Nuestro movimiento
En esta sección se requiere información del usuario para la configuración de la cuenta, asi como para establecer el contacto con esté. Según el género seleccionado en este paso se configurara la cuenta del usuario, la información que el usuario tendrá que proporcionar se muestra en las figuras 19, 20, 21, 22, 23.
Página 52
Figura 21 Diseño general "Información Personal-Hijos" en Nuestro movimiento
Página 53
Figura 22 Diseño general "Información Personal-Redes" en Nuestro movimiento
Figura 23 Diseño general "Información Personal-2" en Nuestro movimiento
En la tabla se muestran detalladamente los elementos que conforman las figuras anteriores. Tabla 17 Descripción de los campos y botones en Nuestro movimiento
Elemento Nombre Descripción
Información Personal