2. Capítulo 2: Marco Teórico
Transcript of 2. Capítulo 2: Marco Teórico
30
2. Capítulo 2: Marco Teórico
El siguiente capítulo brinda una visión general de los conceptos teóricos
relacionados a la investigación así como de las herramientas tecnológicas que
fueron utilizadas para su desarrollo, con el fin de facilitar su comprensión.
2.1. Marco Conceptual
En esta sección se brinda información acerca de los tecnicismos utilizados
durante la presente investigación, así como también datos sobre las herramientas
utilizadas
Internet
Para abordar este tema relacionado a las aplicaciones Web, es necesario
entender de donde surge esta arquitectura formada por millones de ordenadores
alrededor del mundo, dando paso a lo que actualmente conocemos como Internet.
2.1.1.1. Historia
Los inicios de Internet nos remontan a los años 60. En plena guerra fría,
Estados Unidos crea una red exclusivamente militar, con el objetivo de que, en el
hipotético caso de un ataque ruso, se pudiera tener acceso a la información militar
desde cualquier punto del país.
Esta red se creó en 1969 y se llamó ARPANET.
Figura 1.7: Red inicial ARPANET (1969)
Fuente: https://www.sri.com/sites/default/files/uploads/arpanet.gif
31
En principio, la red contaba con 4 ordenadores distribuidos entre distintas
universidades del país. Dos años después, ya contaba con unos 40 ordenadores
conectados. Tanto fue el crecimiento de la red que su sistema de comunicación se
quedó obsoleto. Entonces dos investigadores crearon el Protocolo TCP/IP, que se
convirtió en el estándar de comunicaciones dentro de las redes
informáticas (actualmente seguimos utilizando dicho protocolo).
ARPANET siguió creciendo y abriéndose al mundo, y cualquier persona con
fines académicos o de investigación podía tener acceso a la red.
Las funciones militares se desligaron de ARPANET y fueron a parar a MILNET, una
nueva red creada por los Estados Unidos.
Figura 1.8: Aparición de MILNET
Fuente: https://k38.kn3.net/taringa/5/1/2/2/8/8/4/matosoooolink/222.jpg?4005
La NSF (National Science Fundation) crea su propia red informática
llamada NSFNET, que más tarde absorbe a ARPANET, creando así una gran red
con propósitos científicos y académicos.
El desarrollo de las redes fue abismal, y se crean nuevas redes de libre acceso que
más tarde se unen a NSFNET, formando el embrión de lo que hoy conocemos
como INTERNET.
32
Figura 2.3: Diversificación de ARPANET
Fuente:
https://ugc.kn3.net/i/origin/http://2.bp.blogspot.com/_hKgoYpTcORA/TI10TncESNI/AAAAAAAAAA8/yqtO
nV81i-M/s1600/arpanetdividida.jpg
En 1985 la Internet ya era una tecnología establecida, aunque conocida por
unos pocos.
El autor William Gibson hizo una revelación: el término "ciberespacio".
En ese tiempo la red era básicamente textual, así que el autor se basó en los
videojuegos. Con el tiempo la palabra "ciberespacio" terminó por ser sinónimo de
Internet.
El desarrollo de NSFNET fue tal que hacia el año 1990 ya contaba con alrededor de
100.000 servidores.
En el Centro Europeo de Investigaciones Nucleares (CERN), Tim Berners
Lee dirigía la búsqueda de un sistema de almacenamiento y recuperación de datos.
Berners Lee retomó la idea de Ted Nelson (un proyecto llamado "Xanadú") de usar
hipervínculos. Robert Caillau quien cooperó con el proyecto, cuenta que en 1990
deciden ponerle un nombre al sistema y lo llamarón World Wide Web (WWW) o
telaraña mundial.
33
Figura 2.4: World Wide Web
Fuente: https://www.seoclerk.com/pics/473513-1jogrm1471964553.jpg
La nueva fórmula permitía vincular información en forma lógica y a través de
las redes. El contenido se programaba en un lenguaje de hipertexto con "etiquetas"
que asignaban una función a cada parte del contenido. Luego, un programa de
computación, un intérprete, eran capaz de leer esas etiquetas para desplegar la
información. Ese intérprete sería conocido como "navegador" o "browser".
Figura 2.5: Mosaic: Primer navegador web
Fuente: http://hsablonniere.github.io/markleft/img/mosaic.png
34
En 1993 Marc Andreesen produjo la primera versión del navegador "Mosaic",
que permitió acceder con mayor naturalidad a la WWW.
La interfaz gráfica iba más allá de lo previsto y la facilidad con la que podía
manejarse el programa abría la red a los legos. Poco después Andreesen encabezó
la creación del programa Netscape.
A partir de entonces Internet comenzó a crecer más rápido que otro medio
de comunicación, convirtiéndose en lo que hoy todos conocemos.
Figura 2.6: Servicios de Internet
Fuente: http://disenowebakus.net/imagenes/imagenes-varios/servicios-de-internet.jpg
Algunos de los servicios disponibles en Internet aparte de la WEB son el
acceso remoto a otras máquinas (SSH y telnet), transferencia de archivos (FTP),
correo electrónico (SMTP), conversaciones en línea (IMSN MESSENGER, ICQ,
YIM, AOL, jabber), transmisión de archivos (P2P, P2M, descarga directa), etc. [1]
35
2.1.1.2. Evolución
Figura 2.7: Internet Actual
Fuente: http://www.omicrono.com/wp-content/uploads/2015/12/original.jpg
Hoy en día, Internet se trata de la red de redes, por lo que contiene una gran
cantidad de computadoras que forman estas redes, con información almacenada y
en gran parte, accesible. Otra definición para este concepto es “Una red de redes
basada en los protocolos TCP/IP, una comunidad de gente que usan y desarrollan
estos protocolos y un conjunto de recursos accesibles desde esas redes (Krol,
Hoffman, 1993).
“Cada uno de los ordenadores conectados a Internet, está previamente
conectado a una gran red o WAN, pero antes de eso está también conectado a una
red LAN. Es decir, hasta que la información procedente de Internet es visible en
nuestro monitor, ésta ha tenido que viajar por diversas WANs, hasta llegar a la
nuestra, para más tarde y cruzando nuestra LAN, llegar a nuestro ordenador que
nos la muestra en pantalla” (Stallings, 2000, Mathon, 2000).
Por lo tanto, a lo largo del tiempo Internet se ha vuelto accesible a
prácticamente para todos, permitiendo comunicarnos y obtener información de
cualquier índole procedente de cualquier parte del mundo. [2]
36
2.1.2. Aplicación web
Figura 2.8: Arquitectura de una aplicación Web
Fuente: http://www.templatemonster.com/blog/wp-content/uploads/2013/07/gui.jpg?9d7bd4
Una aplicación web es un tipo especial de aplicación cliente/servidor, donde
tanto el cliente (el navegador, explorador o visualizador) como el servidor (el
servidor web) y el protocolo mediante el que se comunican (HTTP) están
estandarizados y no han de ser creados por el programador de aplicaciones.
El protocolo HTTP forma parte de la familia de protocolos de comunicaciones
TCP/IP, que son los empleados en Internet. Estos protocolos permiten la conexión
de sistemas heterogéneos, lo que facilita el intercambio de información entre
distintos ordenadores. [3]
2.1.3. Metodologías de desarrollo
Las metodologías de desarrollo de software son un conjunto de
procedimientos, técnicas y ayudas a la documentación para el desarrollo de
productos software.
Las técnicas indican cómo debe ser realizada una actividad técnica
determinada identificada en la metodología. Combina el empleo de unos modelos o
representaciones gráficas junto con el empleo de unos procedimientos detallados.
Se debe tener en consideración que una técnica determinada puede ser utilizada
37
en una o más actividades de la metodología de desarrollo de software. Además se
debe tener mucho cuidado cuando se quiere cambiar una técnica por otra. [4]
2.1.4. Metodología espiral
Figura 2.9: Metodología de desarrollo en espiral
Fuente: https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/ModeloEspiral.svg/359px-
ModeloEspiral.svg.png
El modelo en espiral del proceso del software fue originalmente propuesto
por Boehm (Boehm, 1988). Más que representar el proceso de software como una
secuencia de actividades, con retrospectiva de una actividad a otra, se representa
como una espiral. [5]
2.1.4.1. Características
Cada ciclo de la espiral representa una fase del proceso del software. Así, el
ciclo más interno podría referirse a la viabilidad del sistema, el siguiente ciclo a la
definición de requerimientos, el siguiente ciclo al diseño del sistema, y así
sucesivamente. [5]
2.1.4.2. Etapas
Cada ciclo de la espiral se divide en cuatro sectores:
Definición de objetivos: Para esta fase del proyecto se definen los objetivos
específicos. Se identifican las restricciones del proceso y el producto, y se traza
un plan detallado de gestión. Se identifican los riesgos del proyecto.
Dependiendo de estos riesgos, se planean estrategias alternativas.
38
Evaluación y reducción de riesgos. Se lleva a cabo un análisis detallado para
cada uno de los riesgos del proyecto identificados. Se definen los pasos para
reducir dichos riesgos.
Desarrollo y validación. Después de la evaluación de riesgos, se elige un
modelo para el desarrollo del sistema. El modelo de cascada puede ser el más
apropiado para el desarrollo si el mayor riesgo identificado es la integración de
los subsistemas
Planificación. El proyecto se revisa y se toma la decisión de si se debe continuar
un ciclo posterior de la espiral. Si se decide continuar, se desarrollan los planes
para la siguiente fase del proyecto [5]
2.1.4.3. Ventajas
El paradigma del modelo en espiral es actualmente el enfoque más realista
en la ingeniería del software tradicional para sistemas grandes, ya que utiliza un
enfoque evolutivo que permite al ingeniero y al cliente entender y reaccionar a los
riesgos que se detectan en cada espiral. Utiliza la creación de prototipos como un
mecanismo de reducción de riesgos y mantiene el enfoque del ciclo de vida clásica,
pero incorporándolo dentro de un proceso iterativo que refleja de forma más realista
el mundo actual. [6]
2.1.5. Herramientas
A continuación se brinda información general sobre las tecnologías utilizadas
a lo largo del proyecto para entender las funciones que cumplen hoy en día.
39
2.1.5.1. HTML5
Figura 2.10: Logo de HTML5
Fuente: https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png
HTML5 es una colección de estándares para el diseño y desarrollo de
páginas web. Esta colección representa la manera en que se presenta la
información en el explorador de internet y la manera de interactuar con ella.
HTML5 está siendo desarrollado por Ian Hickson de Google Inc. y David Hyatt de
Apple Inc. junto con todas las personas que participan en Web Hypertext Application
Technology Working Group. [7]
HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siguiera
una mejora de este lenguaje, sino un nuevo concepto para la construcción de sitios
web y aplicaciones.
HTML5 es una mejora de la combinación HTML-CSS-JavaScript. HTML5
propone estándares para cada aspecto de la web y también un propósito claro para
cada una de las tecnologías involucradas. A partir de ahora, HTML provee los
elementos estructurales, CSS se encuentra concentrado en cómo volver esa
estructura utilizable y atractiva a la vista, y JavaScript tiene todo el poder necesario
40
para proveer dinamismo y construir aplicaciones web completamente funcionales.
[8]
Figura 2.11: Estructura de página en HTML5
Fuente: http://desarrolloweb.dlsi.ua.es/cursos/2012/nuevos-estandares-desarrollo-sitios-
web/images/estructura-pagina-html5.png
2.1.5.2. CSS3
Figura 2.12: Logo de CSS3
Fuente: http://javimarcos.com/wp-content/uploads/2014/05/CSS3Logo.jpg
41
El CSS sirve para definir la estética de un sitio web en un documento externo
y eso mismo permite que modificando ese documento (la hoja CSS) podamos
cambiar la estética entera de un sitio web, el mismo sitio web puede variar
totalmente de estética cambiando solo la CSS, sin tocar para nada los documentos
HTML o JSP o ASP que lo componen.
CSS es un lenguaje utilizado para dar estética a un documento HTML
(colores, tamaños de las fuentes, tamaños de elemento, con CSS podemos
establecer diferentes reglas que indicarán como debe presentarse un documento.
Podemos indicar propiedades como el color, el tamaño de la letra, el tipo de letra,
si es negrita, si es itálica, también se puede dar forma a otras cosas que no sean
letras, como colores de fondo de una página, tamaños de un elemento (por ejemplo
el alto y el ancho de una tabla). [9]
Ventajas
Se obtiene un mayor control de la presentación del sitio al poder tener todo
el código CSS reunido en uno, lo que facilita su modificación.
Al poder elegir el archivo CSS que deseamos mostrar, puede aumentar la
accesibilidad ya que podemos asignarle un código CSS concreto a personas
con deficiencias visuales, por ejemplo. Esto lo detecta el navegador web.
Conseguimos hacer mucho más legible el código HTML al tener el código
CSS aparte (Siempre que no usemos estilos en línea, claro está).
Pueden mostrarse distintas hojas de estilo según el dispositivo que estemos
utilizando (versión impresa, versión móvil, leída por un sintetizador de voz…)
o dejar que el usuario elija.
Gracias a la técnica CSS Sprites podemos aligerar la carga de nuestro sitio
al juntar todas las imágenes en una.
Las novedades de CSS3 nos permiten ahorrarnos tiempo y trabajo al poder
seguir varias técnicas (bordes redondeados, sombra en el texto, sombra en
las cajas, etc.) sin necesidad de usar un editor gráfico. [9]
42
2.1.5.3. Bootstrap
Figura 2.13: Logo de Bootstrap
Fuente: http://txtbits.com/wp-content/uploads/2015/07/bootstrap.png
Bootstrap es un framework CSS desarrollado inicialmente (en el año 2011)
por Twitter que permite dar forma a un sitio web mediante librerías CSS que
incluyen tipografías, botones, cuadros, menús y otros elementos que pueden ser
utilizados en cualquier sitio web.
Aunque el desarrollo del Framework Bootstrap fue iniciado por Twitter, fue liberado
bajo licencia MIT en el año 2011 y su desarrollo continua en un repositorio de
GitHub.
Bootstrap es una excelente herramienta para crear interfaces de usuario
limpias y totalmente adaptables a todo tipo de dispositivos y pantallas, sea cual sea
su tamaño. Además, Bootstrap ofrece las herramientas necesarias para crear
cualquier tipo de sitio web utilizando los estilos y elementos de sus librerías. [10]
43
Figura 2.14: Ejemplo de página en Bootstrap
Fuente:
https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Twitter_Bootstrap_Under_Firefox_32.png/4
45px-Twitter_Bootstrap_Under_Firefox_32.png
2.1.5.4. Javascript
Figura 2.15: Logo de Javascript
Fuente: http://www.javatpoint.com/images/javascript/javascript_logo.png
Javascript se presenta como un lenguaje de desarrollo de aplicaciones
cliente/servidor a través de Internet.
44
El programa en Javascript tiene la particularidad de que está insertado dentro
mismo del documento HTML que lo presenta al usuario y no es por ello un programa
aparte.
El programa en Javascript reconoce eventos, son acciones de Javascript
creados por el usuario, definiendo así un sistema interactivo. Podemos por ello crear
formularios que verifiquen la validez de la información e interpreten ésta en el mismo
programa contenido en el documento HTML, sin necesidad de comunicación por la
red. También se permite por medio de un código Javascript realizar acciones
particulares como ejecutar un archivo de audio, ejecutar un applet, etc. [11]
2.1.5.5. C#
Figura 2.16: Logo de Visual C#
Fuente: http://4.bp.blogspot.com/-
AP9frXKQL5s/U7bHTCiRq8I/AAAAAAAAA3Y/hIvuoSwnh8M/s1600/visual_studio_logo.png
C# es un lenguaje orientado a objetos creado por Microsoft para su
plataforma .NET. Aunque esta plataforma permite desarrollar aplicaciones en otros
lenguajes de programación, C# ha sido creado específicamente para .NET,
adecuando todas sus estructuras a las características y capacidades de dicha
45
plataforma. Al ser posterior a C++ y Java, los lenguajes orientados a objetos más
conocidos hasta entonces, C# combina y mejora gran parte de las características
más interesantes de ambos lenguajes. Por tanto, un programador que conozca C#
a fondo no tendrá problemas para programar tanto en C++ como en Java, sus
antecesores. [12]
2.1.5.6. ASP.NET
Figura 2.17: Logo de ASP.NET
Fuente: https://www-asp.azureedge.net/v-2016-11-01-012/images/ui/asplogo-square.png
ASP.NET es una nueva y poderosa tecnología para crear páginas web
dinámicas del lado del servidor.
ASP.NET es una de un conjunto de tecnologías que contiene el Framework
.NET de Microsoft. [13]
46
2.1.5.7. Web services
Figura 2.18: Esquema de un Web service
Fuente: https://i.stack.imgur.com/SkLag.gif
El término Web Services describe una forma estandarizada de
integrar aplicaciones WEB mediante el uso de XML, SOAP, WSDL y UDDI sobre
los protocolos de la Internet. XML es usado para describir los datos, SOAP se ocupa
para la transferencia de los datos, WSDL se emplea para describir los servicios
disponibles y UDDI se ocupa para conocer cuáles son los servicios disponibles. Uno
de los usos principales es permitir la comunicación entre las empresas y entre las
empresas y sus clientes. Los Web Services permiten a las organizaciones
intercambiar datos sin necesidad de conocer los detalles de sus respectivos
Sistemas de Información.
A diferencia de los modelos Cliente/Servidor, tales como un servidor de páginas
Web, los Web Services no proveen al usuario una interfaz gráfica (GUI). En vez de
ello, los Web Services comparten la lógica del negocio, los datos y los procesos, por
medio de una interfaz de programas a través de la red. Es decir conectan
programas, por tanto son programas que no interactúan directamente con los
usuarios. Los desarrolladores pueden por consiguiente agregar a los Web Services
la interfaz para usuarios, por ejemplo mediante una página Web o un programa
ejecutable, tal de entregarles a los usuarios una funcionalidad específica que provee
un determinado Web Service.
47
Los Web Services permiten a distintas aplicaciones, de diferentes orígenes,
comunicarse entre ellos sin necesidad de escribir programas costosos, esto porque
la comunicación se hace con XML. Los Web Services no están ligados a ningún
Sistema Operativo o Lenguaje de Programación. Por ejemplo, un programa escrito
en Java puede conversar con otro escrito en Pearl; Aplicaciones Windows puede
conversar con aplicaciones Unix. Por otra parte los Web Services no necesitan usar
browsers (Explorer) ni el lenguaje de especificación HTML. [14]
2.1.5.8. Visual Studio 2015
Figura 2.19: Logo de Visual Studio
Fuente: http://jtower.com/wp-content/uploads/2015/06/visual-studio-2013-logo.png
Visual Studio 2015 es un conjunto integrado de herramientas de
productividad para desarrolladores, servicios en la nube y extensiones que permiten
a usted y a su equipo crear aplicaciones y juegos excelentes para la web, para
Windows Store, para escritorio, para Android y para iOS. [15]
48
Figura 2.20: Entorno de desarrollo Visual Studio
Fuente: https://bbvaopen4u.com/sites/default/files/img/embed/new/bbva-open4u-visual-studio.png
2.1.5.9. Archivos CSV
Figura 2.21: Ejemplo de archivo CSV
Fuente: http://www.recursosvisualbasic.com.ar/htm/trucos-codigofuente-visual-basic/imagenes/archivo-
csv.gif
49
Los archivos CSV (Comma-Separated Values) son archivos de texto cuyos
valores están separados por un delimitador. Generalmente, en la primera línea de
estos archivos se encuentra los encabezados. Estos incluyen el nombre de cada
columna de datos o campos. El nombre de los campos así como los valores están
separados por un delimitador como la coma en un entorno anglosajón y el punto y
coma en un entorno hispano. [16]
2.1.5.10. Archivos XLS
Figura 2.22: Ejemplo de archivo XLS
Fuente: https://imagenes.es.sftcdn.net/es/scrn/69000/69764/xls-viewer-1.jpg
Actualmente la extensión más usada de este formato es .xlsx (versión Excel
2007 en adelante). Los archivos .xls o .xlsx contienen hojas de cálculo que permiten
50
efectuar operaciones aritméticas y funciones con datos dispuestos en forma de
tablas (filas y columnas). También es posible incluir gráficos que se corresponden
con los datos ingresados en la hoja de cálculo. [17]
2.1.5.11. Archivos XLSX
Figura 2.23: Ejemplo de archivo XLSX
Fuente: http://jmcnamara.github.io/excel-writer-xlsx/images/examples/a_simple.jpg
El formato xlsx es la extensión de archivos que Microsoft Excel 2007 y nuevas
versiones asignan por omisión a los libros de trabajo Excel. El formato xlsx no es
compatible con versiones anteriores de Excel (97-2003).
Los archivos XLSX se comprimen automáticamente al guardarse, así una
hoja de trabajo xlsx es hasta 75 por ciento más pequeño que un documento xls que
tiene los mismos datos.
51
La última X de XLSX es sinónimo de XML (lenguaje de marcado extensible).
El formato XML es un estándar abierto que es libre y sin licencia.
Puedes convertir una hoja de cálculo xlsx a la tradicional xls utilizando el
paquete de compatibilidad de Microsoft Office que se instala con el Service Pack 3
de Microsoft Office. [18]
Este formato de archivo basado en el lenguaje XML, permite, entre otras
cosas, reducir el tamaño de los archivos y hacerlos más seguro. [19]
2.1.5.12. SQL Server
Figura 2.24: Logo de SQL Server
Fuente:
http://www.dataprix.com/files/uploads/103image/logo_sqlserver.png.pagespeed.ce.DTdhkCgf3n.png
SQL Server es un sistema de gestión de bases de datos relacionales
(RDBMS) de Microsoft que está diseñado para el entorno empresarial. SQL Server
se ejecuta en T-SQL (Transact -SQL), un conjunto de extensiones de programación
de Sybase y Microsoft que añaden varias características a SQL estándar,
52
incluyendo control de transacciones, excepción y manejo de errores, procesamiento
fila, así como variables declaradas. [20]
2.1.5.13. SQL Server 2015 Management Studio
Figura 2.25: Entorno de SQL Server 2015 Management Studio
Fuente: http://cdn.ttgtmedia.com/rms/editorial/sSQL_Fig1_SSMS_Table_Designer_101513.png
SQL Server Management Studio (SSMS) es un entorno integrado para
obtener acceso, configurar, administrar y desarrollar todos los componentes de SQL
Server. SSMS combina un amplio grupo de herramientas gráficas con una serie de
editores de script enriquecidos que permiten a desarrolladores y administradores de
todos los niveles obtener acceso SQL Server.
SSMS combina las características del Administrador corporativo, el
Analizador de consultas y Analysis Manager, herramientas incluidas en versiones
anteriores de SQL Server, en un único entorno. Además, SSMS funciona con todos
los componentes de SQL Server, como Reporting Services y Integration
Services. De este modo, los desarrolladores pueden disfrutar de una experiencia
53
familiar y los administradores de bases de datos disponen de una herramienta única
y completa que combina herramientas gráficas fáciles de usar con funciones
avanzadas de scripting. [21]
2.1.5.14. Procedimientos almacenados
Un procedimiento almacenado es básicamente un programa precompilado
que está almacenado en el sitio servidor (y que es conocido por el servidor). Es
llamado desde el cliente mediante una RPC (llamada a procedimiento remoto). [22]
Algunas de las ventajas que ofrecen los procedimientos almacenados son:
Mejora el rendimiento
Los procedimientos pueden ser usados para ocultar ante el usuario una
diversidad de detalles específicos del DBMS o de la base de datos, y por lo
tanto, proporcionan un mayor grado de independencia de datos que el que
podría obtenerse de otra forma
Un procedimiento almacenado puede ser compartido por muchos clientes
La optimización puede ser realizada en el momento de crear el procedimiento
almacenado, en lugar de hacerlo en tiempo de ejecución.
Los procedimientos almacenados pueden proporcionar mayor seguridad
2.2. Estado del arte
Previamente ha existido la necesidad de leer archivos de Excel, por ello fue
desarrollada la librería LinqToExcel, la cual fue utilizada durante este proyecto de
investigación. Se desconoce si existen trabajos de investigación publicados en los
cuales se detalle la implementación de esta tecnología en algún sitio web. Al menos
en Guadalajara, Jalisco, México no existe evidencia al respecto.
54
Por su parte, Sanmina SCI no cuenta con un módulo de estas características
por lo que esta aplicación podría ser pionera de muchas potenciales mejores a
futuro.