CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

of 14 /14
18 CAPITULO 2 MARCO TEORICO

Transcript of CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

Page 1: CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

18

CAPITULO 2

MARCO TEORICO

Page 2: CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

19

Definición de aplicación MVVM

El 8 de Octubre de 2005, Jhon Gossman, uno de los ingenieros

responsables del desarrollo de WPF, daba a conocer un nuevo patrón de diseño

de la capa de presentación, con las siglas MVVM, Model/View/ViewModel.

MVVM es una evolución del patrón MVC (Model/View/Controller), intenta

facilitar el trabajo en paralelo entre alguien encargado en diseñar la interfaz de

usuario y otra persona encargada de generar el código que la sustentará. [1]

Este patrón consta de 3 partes bien diferenciadas:

La View (la interfaz de usuario).

La ViewModel contendrá el lenguaje que usaremos para desarrollar la lógica

de presentación.

El Model será el encargado del acceso a datos y la lógica de negocio.

Algo que debemos tener presente es que las diferentes capas no se

comunican todas con todas, la View y la ViewModel tienen una comunicación

bidireccional, mientras que el Model sólo recibe órdenes de la ViewModel. [1]

Imagen 7. Flujo de una aplicación MVVM

Page 3: CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

20

¿Porque una aplicación web?

Una aplicación web es un conjunto de páginas que interactúan unas con

otras y con diversos recursos en un servidor web, incluidas bases de datos. Esta

interacción permite implementar características en su sitio como catálogos de

productos virtuales y administradores de noticias y contenidos. [2]

Es innegable el crecimiento que ha tenido la web hoy en día entre los

usuarios. Bastaría con solo ver el sin fin de aplicaciones online que podemos

encontrar hoy en día y que son usadas por millones de usuarios para darnos

cuenta de la magnitud que las aplicaciones web han alcanzado hoy en día.

Aquí se presentas 5 ventajas de utilizar aplicaciones basadas en la web:

1. Las aplicaciones web son sencillas para los usuarios.

Y es que todos las utilizamos cada día: manejar el correo, acceder a las

cuentas del banco, cualquier red social como Facebook o Twitter, las tiendas

de internet.

2. Las aplicaciones web son sencillas y baratas de desarrollar.

Con este tipo de aplicaciones una empresa puede ahorrarse muchos

costes de su departamento de informática ya que no hace falta instalar nada

en los ordenadores de los usuarios, solamente deben tener un navegador

web como Chrome, Internet Explorer, Firefox, y conexión a internet. Para el

desarrollo hay infinidad de recursos muy baratos e incluidos los gratuitos que

hacen que los costes bajen considerablemente.

3. Las aplicaciones web son sencillas de actualizar.

El coste de mantenimiento de los programas de escritorio es elevado, hay

que realizar la actualización en todas las maquinas que se desee trabajar y

casi siempre implican planificaciones costosas. En el caso de aplicaciones

web basta con actualizar la aplicación en el servidor e inmediatamente todo

el mundo trabaja con la nueva versión.

Page 4: CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

21

4. Las necesidades de los ordenadores de los usuarios son menores.

Da lo mismo que sea un Mac, un Linux o cualquier versión de Windows

en un ordenador que no sea el último modelo, es suficiente para utilizarlas.

5. Las aplicaciones web facilitan la centralización de datos.

El acceso a los datos desde distintos lugares, ya sea empresas que tienen

varias sedes o bien particulares accediendo desde distintos sitios, este tipo

de aplicaciones hacen que no sea necesario sincronizar o copiar datos de un

lugar a otro, sencillamente la aplicación accede siempre a los mismos datos.

Descripción y análisis de investigaciones relacionadas

En un principio la empresa MPI no cuenta con ninguna clase de sistema

ni aplicación que pudiera ayudarles a gestionar temas de organización dentro

de la misma. Todos los reportes y controles eran generados por hojas de

trabajo realizadas en Excel bajo el formato xls. Todo esto era archivado dentro

de una computadora con el riesgo de presentarse algún problema con la misma

y perder dicha información.

La manera en que MPI procesaba sus operaciones ya sea financiera o

de cualquier otra índole era mediante la utilización de funciones Excel que

calculaba los datos ingresados y proporcionaba los mismos datos en la misma

hoja.

No obstante la empresa no cuenta con ninguna clase de seguridad para

resguardar todos sus datos y archivos.

Base de Datos

Para la gestión de la base de datos será utilizado MySQL, esto debido a su

simplicidad y al conocimiento previo que se tiene al haber trabajado con la

misma. El diseño de base datos se hizo en base a las necesidades con las que

cuenta la empresa y se desarrollaron las debidas entidades necesarias para

poder guardar todos los datos requeridos dentro de nuestro sistema. Más

adelante mostraremos nuestro diseño de base de datos en un modelo de

Page 5: CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

22

entidad relación el cuál es un método del que disponemos para diseñar estos

esquemas que posteriormente debemos de implementar en un gestor

de BBDD (bases de datos).

Requerimientos para el desarrollo

Debido a la poca o nula seguridad con la que cuenta MPI en materia de

protección a sus datos, y la ineficiente manera de lleva a cabo sus procesos

internos se decidió realizar una aplicación web que cuente con todas las

especificaciones que se requieren utilizando herramientas gratuitas o de muy

bajo coste para la misma.

Durante el desarrollo de este proyecto se utilizaran las siguientes

herramientas de desarrollo con el fin de lograr nuestro propósito, cada una de

las cuales serán explicadas brevemente.

Front-End.

- HTML 5

- JavaScript

- CSS3

Back-End

- PHP

- MySQL

Frameworks Front-End

- AngularJS

- Angular Material

- JQuery

Frameworks Back-End

- Laravel

Page 6: CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

23

HTML 5

Es importante explicar qué es exactamente HTML 5, ya que no es

simplemente una nueva versión del lenguaje de marcación HTML, sino una

agrupación de diversas especificaciones concernientes a el desarrollo web. Es

decir, HTML 5 no se limita sólo a crear nuevas etiquetas, atributos y eliminar

aquellas marcas que están en desuso o se utilizan inadecuadamente, sino que

va mucho más allá. [3]

Estas características permiten incluir y controlar contenido multimedia en

la web sin tener que recurrir a plugins ni APIs propietarias.

HTML5 es un candidato potencial para ser usado en

aplicaciones multiplataforma móviles, incluso muchas de las características de

este lenguaje fueron pensadas para ser ejecutadas en dispositivos de bajo

consumo como tabletas y teléfonos inteligentes.

Imagen 8. Logo HTML 5

JavaScript

JavaScript (a veces abreviado como JS) es un lenguaje ligero e

interpretado, orientado a objetos con funciones de primera clase, más conocido

como el lenguaje de script para páginas web, pero también usado en muchos

entornos sin navegador, tales como node.js o Apache CouchDB. Es un

lenguaje script multi-paradigma, basado en prototipos, dinámico, soporta estilos

de programación funcional, orientada a objetos e imperativa. Leer más sobre

JavaScript. [4]

Page 7: CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

24

El estándar de JavaScript es ECMAScript. Desde el 2012, todos los

navegadores modernos soportan completamente ECMAScript 5.1. Los

navegadores más antiguos soportan por lo menos ECMAScript 3. La sexta

edición se liberó en Julio. Se puede seguir el progreso actual de las diferentes,

nuevas y mejoradas características en la correspondiente wiki.

Imagen 9. Logo JavaScript

CSS3

CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la

tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de

separar la estructura de la presentación. aún así se podía asegurar una

visualización correcta de la misma hoja de estilos. [5]

Mientras que HTML nos permite definir la estructura una página web, las

hojas de estilo en cascada son las que nos ofrecen la posibilidad de definir las

reglas y estilos de representación en diferentes dispositivos, ya sean pantallas

de equipos de escritorio, portátiles, móviles, impresoras u otros dispositivos

capaces de mostrar contenidos web. [6]

Las hojas de estilo nos permiten definir de manera eficiente la

representación de nuestras páginas y es uno de los conocimientos

fundamentales que todo diseñador web debe manejar a la perfección para

realizar su trabajo. [6]

Page 8: CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

25

Imagen 10. Logo CSS3

PHP

PHP está enfocado principalmente a la programación de scripts del lado

del servidor, por lo que se puede hacer cualquier cosa que pueda hacer otro

programa CGI, como recopilar datos de formularios, generar páginas con

contenidos dinámicos, o enviar y recibir cookies. Aunque PHP puede hacer

mucho más. [7]

Imagen 11. Logo PHP

MySQL

MySQL es el servidor de bases de datos relacionales más popular,

desarrollado y proporcionado por MySQL AB. MySQL AB es una empresa cuyo

negocio consiste en proporcionar servicios en torno al servidor de bases de datos

MySQL.

MySQL se ejecuta en prácticamente todas las plataformas, incluyendo

Linux, UNIX y Windows. A pesar de que se puede utilizar en una amplia gama

de aplicaciones, MySQL se asocia más con las aplicaciones basadas en la web

y la publicación en línea y es un componente importante de una pila empresarial

de código abierto llamado LAMP. LAMP es una plataforma de desarrollo web que

Page 9: CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

26

utiliza Linux como sistema operativo, Apache como servidor web, MySQL como

sistema de gestión de base de datos relacional y PHP como lenguaje de

programación orientado a objetos (a veces, Perl o Python se utiliza en lugar de

PHP). [8]

Imagen 12. Logo MySQL

AngularJS

AngularJS es un impresionante framework

javascript opensource desarrollado por Google. Un framework para crear

Webapps en lenguaje cliente con Javascript ejecutándose con el

conocido single-page applications (aplicación de una sóla página) que extiende

el tradicional HTML con etiquetas propias (directivas) como pueden ser ng-app,

ng-controller, ng-model, ng-view entre otras. [9]

Un framework basado en MVC (Modelo-Vista-

Controlador) increíblemente flexible, de muy fácil lectura y desarrollo rápido

(puedes empezar en minutos). [9]

Permite extender HTML con tags personalizados, definir y vincular (data-

binding) variables vista/controllador, consultas ajax con peticiones HTTP,

sistema óptimo de templating, manipulación de datos en JSON, inyección de

dependencias, deep linking, formularios de validación, desacoplamiento del

DOM de Javascript, internacionalización i18n y l10n, filtros, unit testing entre

otros. [9]

AngularJS es compatible con los navegadores de última generación

(Chrome, Firefox, Safari, Opera, Webkits, IE9+) y se puede hacer compatible

para Internet Explorer 8 o anterior mediante varios hacks. [9]

Page 10: CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

27

Imagen 13. Logo AngularJS

JQuery

jQuery es un framework de JavaScript para facilitar, entre otros, el acceso

a los elementos del DOM, los efectos, interactuar con los documentos HTML,

desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas

web. jQuery podría ser otro framework más como script.aculo.us, MooTools, YUI

pero en cambio disponemos una gran potencia con una facilidad mucho mayor

que sus competidores. [10]

jQuery consiste en un único fichero JavaScript que contiene las

funcionalidades comunes de DOM, eventos, efectos y AJAX. La característica

principal de la biblioteca es que permite cambiar el contenido de una página web

sin necesidad de recargarla, mediante la manipulación del árbol DOM y

peticiones AJAX. Para ello utiliza las funciones $() o jQuery(). [10]

Imagen 14. Logo JQuery

Laravel

Laravel es un nuevo y poderoso Framework PHP desarrollado por Taylor

Otwell, que promete llevar al lenguaje PHP a un nuevo nivel. [11]

Page 11: CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

28

Desarrollar aplicaciones usando Laravel es muy sencillo,

fundamentalmente debido a su expresiva sintaxis, sus generadores de código, y

su ORM incluido de paquete llamado Eloquent ORM. [11]

.

Imagen 15. Logo Laravel

Diseño responsivo

La importancia radica en que hace posible que un sitio web se pueda

visualizar de manera correcta y cómoda para el internauta en cualquier tipo de

dispositivo móvil. [12]

Es un mismo diseño que se adapta a los diferentes tamaños de pantallas,

tu sitio web se va a poder visualizar en smartphones, tablets, notebook,

ordenadores, etc. [12]

El uso de los dispositivos móviles para navegar por Internet se encuentra

en constante aumento. Hay que tener en cuenta que en el último año los usuarios

de smartphones y tablets ha sobrepasado a los que tienen una laptop. Es por

ello que siempre se recomienda el desarrollo de sitios web empleando

responsive web design. [12]

Metodología de trabajo

Page 12: CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

29

Metodología Scrum

En Scrum se realizan entregas parciales y regulares del producto final,

priorizadas por el beneficio que aportan al receptor del proyecto. Por ello, Scrum

está especialmente indicado para proyectos en entornos complejos, donde se

necesita obtener resultados pronto, donde los requisitos son cambiantes o poco

definidos, donde la innovación, la competitividad, la flexibilidad y

la productividad son fundamentales. [13]

El proceso

En Scrum un proyecto se ejecuta en bloques temporales cortos y

fijos (iteraciones de un mes natural y hasta de dos semanas, si así se necesita).

Cada iteración tiene que proporcionar un resultado completo, un incremento de

producto final que sea susceptible de ser entregado con el mínimo esfuerzo al

cliente cuando lo solicite.

Planificación de la iteración

El primer día de la iteración se realiza la reunión de planificación de la

iteración. Tiene dos partes:

-Selección de requisitos (4 horas máximo).

El cliente presenta al equipo la lista de requisitos priorizada del producto

o proyecto. El equipo pregunta al cliente las dudas que surgen y selecciona los

requisitos más prioritarios que se compromete a completar en la iteración, de

manera que puedan ser entregados si el cliente lo solicita.

-Planificación de la iteración (4 horas máximo).

El equipo elabora la lista de tareas de la iteraciónnecesarias para

desarrollar los requisitos a que se ha comprometido. La estimación de esfuerzo

se hace de manera conjunta y los miembros del equipo se autoasignan las

tareas.

Ejecución de la iteración

Page 13: CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

30

Cada día el equipo realiza una reunión de sincronización (15 minutos

máximo). Cada miembro del equipo inspecciona el trabajo que el resto está

realizando (dependencias entre tareas, progreso hacia el objetivo de la iteración,

obstáculos que pueden impedir este objetivo) para poder hacer las adaptaciones

necesarias que permitan cumplir con el compromiso adquirido. En la reunión

cada miembro del equipo responde a tres preguntas:

-¿Qué he hecho desde la última reunión de sincronización?

-¿Qué voy a hacer a partir de este momento?

-¿Qué impedimentos tengo o voy a tener?

Durante la iteración el Facilitador (Scrum Master) se encarga de que el

equipo pueda cumplir con su compromiso y de que no se merme su

productividad.

-Elimina los obstáculos que el equipo no puede resolver por sí mismo.

-Protege al equipo de interrupciones externas que puedan afectar su

compromiso o su productividad.

Durante la iteración, el cliente junto con el equipo definan la lista de

requisitos (para prepararlos para las siguientes iteraciones) y, si es necesario,

cambiar o replanificar los objetivos del proyecto para maximizar la utilidad de lo

que se desarrolla y el retorno de inversión.

Inspección y adaptación

El último día de la iteración se realiza la reunión de revisión de la iteración.

Tiene dos partes:

-Demostración (4 horas máximo).

El equipo presenta al cliente los requisitos completados en la iteración, en

forma de incremento de producto preparado para ser entregado con el mínimo

esfuerzo. En función de los resultados mostrados y de los cambios que haya

habido en el contexto del proyecto, el cliente realiza las adaptaciones necesarias

de manera objetiva, ya desde la primera iteración, replanificando el proyecto.

-Retrospectiva (4 horas máximo).

Page 14: CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx

31

El equipo analiza cómo ha sido su manera de trabajar y cuáles son los

problemas que podrían impedirle progresar adecuadamente, mejorando de

manera continua su productividad. El Facilitador se encargará de ir eliminando

los obstáculos identificados.

Imagen 16. Metodología Scrum