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.