WEB

AIDER ING. ELIAS TASAYCO HERRERA

INTEGRANTES: ACEVEDO TORNERO, ALDAIR ALTAMIRANO DÍAZ, MILAGROS APARCANA ÁLVAREZ, PIERO AGUILAR RAMIREZ, HÉCTOR

AIDER:

p谩gina web

INTROD UCCION Nuestro proyecto consiste en realizar una p谩gina web, donde personas puedan ayudar a otras personas, ya sea con una donaci贸n de sangre, de 贸rgano, etc. En pocas palabras: Brindar una plataforma en la que las personas puedan solicitar y conseguir ayuda de otras personas en tareas de labor de social.

El grupo de trabajo

2

AIDER:

1.

pรกgina web

DESCRIPCION DE LA EMPRESA:

GIRO DE NEGOCIO DE LA EMPRESA: 3

AIDER:

página web

Es una página web gratuita que ayuda a las personas más necesitadas o con algún problema de urgencia, permite publicar su acción y que las personas voluntarias ayuden sin condición alguna. Es un medio de ayuda muy fácil y cómoda para todos aquellos que necesiten ayuda y quieran ayudar al prójimo.

CRONOGRAMA DE SECUENCIA DE ACTIVIDADES MEDIANTE MSPROJECT

4

AIDER:

página web

EDT

ETAPAS DEL PROYECTO Para poder realizar cada una de las tareas que se necesitan en el presente proyecto se ha elegido como base la metodología Proceso Unificado Racional (Rational Unified Process - RUP).

a. Elaboración del plan del proyecto 5

AIDER:

página web

Esta etapa considera la elaboración de este documento, el cual servirá de base para las siguientes etapas. b. Etapa de concepción Esta etapa considera el proceso de investigación que se realizó, incluyendo las entrevistas, levantamiento de información entre otras actividades con el fin de tener una idea clara del negocio y poder cumplir así con los objetivos del proyecto.

Posteriormente se procede a realizar un análisis, donde se construye el modelo del negocio mostrando sus propiedades importantes, durante esta de análisis se abstrae de manera precisa lo que debe hacer el sistema deseado.

Finalmente se prosigue a realizar los documentos respectivos siendo uno de los más importantes la especificación de requerimientos.

c. Etapa de elaboración La etapa de Elaboración analizará los requisitos y desarrollará el prototipo arquitectónico, que constituirá el diseño a alto nivel. Adicionalmente se realizará el diseño de la interfaz gráfica

d. Etapa de construcción En esta etapa se realiza la implementación de los casos de uso identificados utilizando la herramienta computacional previamente definida. Se desarrolla la interfaz gráfica, el motor lógico y un plan de pruebas definidas para el software.

Elaboración El propósito de la fase de elaboración en el presente proyecto es analizar el dominio del sistema, establecer los cimientos de la arquitectura y diseño, y eliminar los mayores riesgos que puedan presentarse en el sistema.

Los objetivos de esta fase son: 1.-Definir, validar y cimentar la arquitectura del sistema.

6

AIDER:

página web

Al terminar deben obtenerse los siguientes resultados para el sistema: 2.-Un modelo de Casos de Uso completo: todos los caso con sus especificaciones y actores identificados.

3.-Identificación de entidades (diagrama de clases y diseño).

4.-Descripción de la arquitectura software.

5.-Modelo inicial de la base de datos.

En la fase de elaboración se actualizan todos los productos de la fase de inicio.

Construcción Durante esta fase todos los componentes, características y requisitos deben ser implementados, integrados y probados en su totalidad, obteniendo una versión aceptable de la web.

Los objetivos concretos son: 1.-Analizar el dominio de la construcción del algoritmo.

2.-Se realizará el producto de software integrado y corriendo en la plataforma adecuada.

Los resultados de la fase de construcción deben ser: 3.-Modelos Completos (Casos de Uso, Análisis, Diseño, Despliegue e Implementación).

4-Descripción de tecnología y patrones de programación.

5.-Realización del diseño de pruebas.

6.-Arquitectura íntegra (mantenida y mínimamente actualizada).

7.-Prototipo Operacional.

FASES DEL PROYECTO Durante la fase de concepción o inicio se define la oportunidad y el alcance. En el sistema se identificarán todas las entidades 7

AIDER:

página web con las que se trata y se definirá la interacción a un nivel de abstracción.

Los objetivos de esta fase son: 1.-Establecer el ámbito del sistema y sus límites.

2.-Encontrar los Casos de Uso del sistema, los escenarios básicos que definen la funcionalidad.

Etapa de concepción

3.-Estimar el coste en recursos y tiempo de todo el proyecto. Los resultados de la fase de concepción del sistema deben ser: 4.-Plan del proyecto, mostrando fases e iteraciones.

5.-Catálogo de Requisitos completo.

6.-Modelo inicial de Casos de Uso (10-20% completado).

7.-Un modelo de negocios si fuese necesario.

Al terminar la fase de inicio se deben comprobar los criterios de evaluación para continuar: 8.-Entendimiento de los requisitos, como evidencia de la fidelidad de los Casos de Uso principales.

9.-Credibilidad en las estimaciones, prioridades, riesgos y procesos de desarrollo.

8

AIDER:

a)

página web

MISION: Es lograr facilidad a las personas que necesitan algún tipo de ayuda sin fines de lucro, y conseguir a los voluntarios que realmente quieran ayudar, es conseguir ayuda para personas que realmente lo necesiten.

b)

VISION: Esta una empresa que cuenta con personas que se ha fijado como estrategia de desarrollo una serie de diversos objetivos, desde personales, individuales, colectivos, generales, etc. pero el más importante: Llegar a ser una empresa muy importante en el país y que todos puedan conocernos, para así facilitar cualquier tipo de ayuda que la página web pueda brindar.

c)

OBJETIVOS GENERALES: El objetivo principal de nuestro proyecto es que mediante esta ayuda que estamos brindando, podamos creer en el cambio, mediante la colaboración entre personas, ayudas mutuas, para así poder lograr un mundo mejor, y ser mejores personas cada día.

Otro objetivo sería incentivar a personas a colaborar, ya sea por algo pequeño o también algo grande, que ayuden sin recibir algo a cambio que sea con una voluntad honesta.

9

AIDER:

d)

pรกgina web

ORGANIGRAMA DE LA WEB

10

AIDER:

pﾃ｡gina web

DISEﾃ前 DE LA PAGINA WEB

Portada de la pﾃ｡gina web

11

AIDER:

pรกgina web

<head> <!--<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:700' rel='stylesheet' type='text/css'>--> <link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css? family=Roboto:400,300,700,500,900' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Poly:400,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/global.css"> <noscript> <link rel="stylesheet" href="css/grid/mobile.min.css" /> </noscript> <script> var ADAPT_CONFIG = { path: 'css/grid/', dynamic: true, range: [ '0px to 760px = mobile.min.css', '760px to 980px = 720.min.css', '980px to 1280px = 960.min.css', '1280px to 1600px = 1200.min.css', '1600px = 1560.min.css', ] }; 12

AIDER:

página web

</div> <div class="grid_5"> <ul class="stats"> <li>1244 Acciones exitosas</li> <li>6584 Voluntarios</li> <li></li> </ul> </div> <div class="wrap wwhite p-tb05r shadow-top footer"> <div class="container_12"> <li><a href="">Nuestra causa <span>Conoce más sobre nosotros</span></a></li> <li><a href="">Síguenos <span><img src="img/facebook.png" width="20px" alt=""><img src="img/twitter.png" width="20px" alt=""><img src="img/youtube.png" width="20px" alt=""></span></a></li> </ul> </div> </body> </html>

13

AIDER:

pรกgina web

PORTADA PARA PARTICIPAR EN LA ACCION

<head> <!--<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:700' rel='stylesheet' type='text/css'>--> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Se parte de | Index</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css? family=Roboto:400,300,700,500,900' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Poly:400,400italic' rel='stylesheet' type='text/css'>

14

AIDER:

pรกgina web

<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/global.css"> <noscript> <link rel="stylesheet" href="css/grid/mobile.min.css" /> </noscript> <script> var ADAPT_CONFIG = { path: 'css/grid/', dynamic: true, range: [ '0px to 760px = mobile.min.css', '760px to 980px = 720.min.css', '980px to 1280px = 960.min.css', '1280px to 1600px = 1200.min.css', '1600px = 1560.min.css', ] }; <h2>Grazzie for everything!</h2> <a href="#"><img src="photo/d1.jpg" height="60px" alt=""></a> <a href="#"><img src="photo/d2.jpg" height="60px" alt=""></a> <a href="#"><img src="photo/d3.jpg" height="60px" alt=""></a> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, quos, natus, inventore, nobis quod aliquam earum possimus consectetur fugit excepturi.</p> <p>Ullam, quas, iste ducimus voluptas quidem reprehenderit autem optio aspernatur tempore...</p> 15

AIDER:

página web

</div> </div> <div class="grid_12" id="actions-wrap"> <!-- item --> <div class="item shadow-bottom"> <div class="item-info"> <h3 class="p-05r nom"> <a href="#"><img src="photo/d1.jpg" alt="" height="40px" width="40px"> Juan Arias</a> necesita <strong>personas que deseen adoptar a 3 perros</strong> en <strong>Lima</strong> </h3> <li><a href="">Nuestra causa <span>Conoce más sobre nosotros</span></a></li> <li><a href="">Síguenos <span><img src="img/facebook.png" width="20px" alt=""><img src="img/twitter.png" width="20px" alt=""><img src="img/youtube.png" width="20px" alt=""></span></a></li> </ul> </div> </div> </body> </html>

16

AIDER:

pรกgina web

PORTADA DONDE SE VERIFICA LA ACCIร N REALIZADA

17

AIDER:

pรกgina web <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Se parte de | Index</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css? family=Roboto:400,300,700,500,900' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Poly:400,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/global.css"> <noscript> <link rel="stylesheet" href="css/grid/mobile.min.css" /> </noscript> <script> var ADAPT_CONFIG = { path: 'css/grid/', dynamic: true, range: [ '0px to 760px = mobile.min.css', '760px to 980px = 720.min.css', '980px to 1280px = 960.min.css',

18

AIDER:

pรกgina web

'1280px to 1600px = 1200.min.css', '1600px = 1560.min.css',

19

AIDER:

pĂĄgina web ] }; <div class="item-progress"> <div class="progress-bar"> <span class="progress" style="width:88%">999 de 1000</span> </div> </div> <div class="item-stats"> <ul> <li><span>20</span> voluntarios</li> <li><span>4 dĂ­as</span> para terminar</li> <li><span>432</span>veces sugerido</li> </ul> </div> <div class="item-actions"> <a href="#" class="button white small">Sugerir a un amigo</a> <a href="#" class="button orange small">Participar</a> </div> </div> <!-- end item --> </div> </div> </div> <div class="wrap wwhite p-tb05r shadow-top footer"> <div class="container_12"> <div class="grid_2 suffix_1"> 20

AIDER:

página web

<a href="#" class="logo-small"><img src="img/logo-small.png" alt=""></a> </div> <div class="grid_9"> <ul class="menu"> <li><a href="" class="active">Historias de éxito <span>En tu ciudad y en el mundo</span></a></li> <li><a href="">¡Quiero ser parte! <span>Únete o crea acciones en tu ciudad</span></a></li> <li><a href="">Nuestra causa <span>Conoce más sobre nosotros</span></a></li> <li><a href="">Síguenos <span><img src="img/facebook.png" width="20px" alt=""><img src="img/twitter.png" width="20px" alt=""><img src="img/youtube.png" width="20px" alt=""></span></a></li> </ul> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-

21

AIDER:

pรกgina web 1.8.0.min.js"><\/script>')</script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> <script src="js/modal.js"></script> <script> (function($){ $(window).load(function(){ $("#content-actions").mCustomScrollbar(); }); })(jQuery); </script> <script> $(function(){ $('#actions-wrap').masonry({ // options itemSelector : '.item', }); }); </script> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. <script> var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s)}(document,'script'));

22

AIDER:

pรกgina web

</script>--> </body> </html>

23

AIDER:

pรกgina web

2.-MODELO DE REQUERIMIENTOS:

2.1.- ACTORES DE SISTEMA

ACTORES DEL SISTEMA

DESCRIPCION

VOLUNTARIO

Es aquella persona que ingresa a la pรกgina web y participa de la acciรณn creada por un usuario.

PLATAFORMA USUARIO

Es la pรกgina web de ayuda social donde puedes publicar tus acciones y de aportar a los que requieren ayuda.

Es aquella persona que crea una acciรณn pidiendo su ayuda requerida.

24

AIDER:

página web

2.1.1 Diagrama de casos de uso para crear una acción

El usuario crea una acción en la plataforma

Aquí el usuario puede registrarse y publicar su acción en la plataforma haciendo público su requerimiento de lo que está necesitando urgente.

2.1.2 Casos de uso para la verificar la acción

25

AIDER:

página web

Aquí la persona voluntaria verifica los datos del usuario que ha creado la acción de su pedido para poder estar seguro que está ayudando a una persona existente.

La persona voluntaria verifica la acción

2.1.3 Diagrama de casos de uso para participar de la acción

Aquí la persona ya verifico los datos de usuario y participa como participante o puede sugerir a una persona conocida en la acción requerida.

La persona voluntaria participa de la acción

26

AIDER:

página web

3.- DIAGRAMA GENERAL DE CASOS DE USO

Aquí observamos todo el procedimiento del caso de uso de la plataforma como interactúa el usuario con la web, y como la persona voluntaria verifica y participa de la acción que propone el usuario o puede sugerir a otras personas.

27

AIDER:

pรกgina web

4.- DIAGRAMA DE CLASE

28

AIDER:

pรกgina web

5.- DIAGRAMA DE SECUENCIA

/ : usuario

/ : voluntario

/ : plataforma_web

1 : escribe su problematica o evento de apoyo()

2 : reorganiza las peticiones por fecha y lugar()

3 : visita la web y reviso los casos()

4 : informacion sobre el caso()

5 : se pone en contacto con el usuario()

29