capitulo 2. - marco teÓrico y estado del arte
TRANSCRIPT
CAPITULO 2. - MARCO TEÓRICO Y ESTADO DEL ARTE
2.1 Marco teórico
Un sistema de información informático(Ver Figura 7) es un sistema que
permite almacenar y procesar información; es el conjunto de partes
interrelacionadas: hardware, software y personal informático. El hardware
incluye computadoras o cualquier tipo de dispositivo electrónico, que consisten
en procesadores, memoria, sistemas de almacenamiento externo, etc. El software
incluye al sistema operativo, aplicaciones, siendo especialmente importante los
sistemas de gestión de bases de datos. Por último, el soporte humano incluye al
personal técnico que crean y mantienen el sistema (analistas, programadores,
operarios, etcétera) y a los usuarios que lo utilizan.[10]
El recurso humano que interactúa con el Sistema de Información, el cual está
formado por las personas que utilizan el sistema.
Un sistema de información realiza cuatro actividades básicas:
entrada, almacenamiento, procesamiento y salida de información.
Entrada de Información: Es el proceso mediante el cual el Sistema de Información
toma los datos que requiere para procesar la información.
Almacenamiento de información: El almacenamiento es una de las actividades o
capacidades más importantes que tiene una computadora, ya que a través de
esta propiedad el sistema puede recordar la información guardada en la sección o
proceso anterior.
Procesamiento de Información: Es la capacidad del SI para efectuar cálculos de
acuerdo con una secuencia de operaciones preestablecida.
Salida de Información: La salida es la capacidad de un Sistema de Información
para sacar la información procesada o bien datos de entrada al exterior. [11]
2.1.1 ¿Qué es un sistema web?
En reingeniería de software se denomina sistema web a aquellas
aplicaciones que los usuarios pueden utilizar accediendo a un servidor web a través
de internet o de una intranet mediante un navegador. En otras palabras, es una
aplicación de software que se codifica en lenguaje soportado por los navegadores
web. [12]
Características
Algunas características principales que tienen los sistemas web son:[13]
Acceso desde cualquier ubicación con conexión a internet.
Utilización de redes internas.
Seguridad basada en usuarios y roles de acceso.
Disponibilidad las 24 horas.
Información actualizada constantemente.
Multiusuario
Ventajas
Entre sus singulares ventajas encontramos las siguientes:
Independencia de la Plataforma(Windows,Linux,Mac,etc)
Acceso a través de internet
Rápido, distribuido y escalable.
Tecnologías open-source sin costos de licencia
Los sistemas de información mejoran la efectividad gerencial y profesional
formando parte de la estrategia de un negocio. La nueva tecnología tiene un impacto
significativo sobre la línea de producción de una empresa garantizándole ventajas
competitivas sostenibles.[13]
Estas afirmaciones se basan en la experiencia de muchos autores que se
han dedicado al estudio de la influencia que tienen los sistemas de información en
el comportamiento de la productividad gerencial, entre los que destacan Meyery
Boone (1990). Ellos mencionan un gran número de casos en los cuales los sistemas
de información contribuyeron al aumento de las ganancias en forma considerable.
Citando textualmente algunos de estos ejemplos “Una hoja electrónica ganó US. $
76 millones para una compañía de productos químicos”; “El correo electrónico llevó
un producto de telecomunicaciones al mercado dos meses antes, con un retorno
sobre inversión del 1000.[14]
Figura 7. Elementos de un sistema de información.
Fuente: Google imágenes
2.1.2 Estado del arte
Existen muchos sistemas de información hoy en día en especial softwares
desarrollados para la plataforma de escritorio, uno muy conocido es el ERP SAP(Ver
Figura 8) que un sistema muy complejo y con una infinidad de módulos que permite
adaptarse a cualquier tipo de empresa, pero esto cada vez está cambiando ya que
muchas empresas están decidiendo migrar sus sistemas de escritorio a un sistema
web por todas la facilidades que les brinda.
Figura 8. Logo Sap Business One
Fuente: Google imágenes
Hay muchos sistemas de registro de visitantes y registro de actividades de
su personal en aplicaciones de escritorio desarrollados en java,c#,c++, etc estas
son aplicaciones grandes y robustas que permiten llevar el control de toda una
empresa u organización y en cuanto funcionalidad están muy bien, ya que realizan
los procesos requeridos, pero principales desventajas que yo veo en los software
de escritorio son la poca portabilidad de estos, las interfaces gráficas de la mayoría
de estos sitios se están quedando obsoleta y lo principal, la accesibilidad desde
cualquier lugar es casi imposible, lo cual es una desventaja competitiva para
cualquier organización a comparación de la accesibilidad que tendría una empresa
con un sistema web.(Ver Figura 9)
Figura 9. Usuario Móvil vs Usuario de Escritorio en los últimos años - Morgan Stanley
Durante mi investigación me encontré principalmente que los sistemas web
de visitas que existen en el mercado están muy bien desarrollados y tienen muchas
funcionalidades como la autenticación con credenciales, pero estos están
enfocados a empresas grandes, que para el registro de personas se toma más
tiempo de lo normal por la cantidad de datos a dar de alta.
A continuación se muestra una imagen de un sistema de visitas público de la
presidencia del consejo de ministros en Perú (Ver Figura 10). Esta aplicación web
es muy parecida a lo que me encuentro desarrollando, pero la diferencia que
encuentro entre la aplicación de control de visitas y personal docente y el que
comparo enseguida es que la accesibilidad al público en general y que no se usó
un diseño responsivo para adaptarse los diferentes dispositivos móviles como lo
marca la tendencia de front-end de la tecnología web.
Figura 10. Ejemplo de sistema de visitas de la presidencia del consejo de Ministros
Fuente: http://hera.pcm.gob.pe
2.1.3 Herramientas
A continuación se listan las herramientas que se utilizaron para crear el
sistema de Control de Visitas y Actividades de personal docente.
Framework CakePHP
CakePHP es un framework para el desarrollo aplicaciones web escrito
en PHP, creado sobre los conceptos de Ruby on Rails.
Historia
CakePHP empezó en 2005, cuando Ruby On Rails estaba ganando
popularidad y utiliza muchos de sus conceptos. Desde entonces la comunidad
creció y generó muchos subproyectos.
Características
CakePHP o pastelPHP es un framework o marco de trabajo que facilita el
desarrollo de aplicaciones web, utilizando el patrón de diseño MVC
(Modelo Vista Controlador). Es de código abierto y se distribuye bajo licencia MIT.
Al igual que Ruby On Rails, CakePHP facilita al usuario la interacción con la base
de datos mediante el uso de ActiveRecord. Además hace uso del patrón Modelo
Vista Controlador.
Compatible con PHP4 y PHP5
CRUD de la base de datos integrado
URLs amigables
Sistema de plantillas rápido y flexible
Ayudas para AJAX, Javascript y HTML forms
Trabaja en cualquier subdirectorio del sitio
Validación integrada
Scaffolding de las aplicaciones
Access Control Lists
Sintetización de datos
Componentes de seguridad y sesión
La última versión estable de CakePHP es la 3.0.4 [15]
PHP
PHP es un lenguaje de programación de uso general de código del lado del
servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue
uno de los primeros lenguajes de programación del lado del servidor que se podían
incorporar directamente en el documento HTML en lugar de llamar a un archivo
externo que procese los datos. El código es interpretado por un servidor web con
un módulo de procesador de PHP que genera la página Web resultante. PHP ha
evolucionado por lo que ahora incluye también una interfaz de línea de
comandos que puede ser usada en aplicaciones gráficas independientes.
PHP se considera uno de los lenguajes más flexibles, potentes y de alto
rendimiento conocidos hasta el día de hoy, lo que ha atraído el interés de múltiples
sitios con gran demanda de tráfico, como Facebook, para optar por el mismo como
tecnología de servidor.
Historia
Fue creado originalmente por Rasmus Lerdorf en 1995. Actualmente el
lenguaje sigue siendo desarrollado con nuevas funciones por el grupo PHP. Este
lenguaje forma parte del software libre publicado bajo la licencia PHP, que es
incompatible con la Licencia Pública General de GNU debido a las restricciones del
uso del término PHP.[16]
Características
Orientado al desarrollo de aplicaciones web dinámicas con acceso a
información almacenada en una base de datos.
Es considerado un lenguaje fácil de aprender, ya que en su desarrollo se
simplificaron distintas especificaciones, como es el caso de la definición de las
variables primitivas, ejemplo que se hace evidente en el uso de php arrays.
El código fuente escrito en PHP es invisible al navegador web y al cliente, ya
que es el servidor el que se encarga de ejecutar el código y enviar su resultado
HTML al navegador.
Capacidad de conexión con la mayoría de los motores de base de datos que se
utilizan en la actualidad, destaca su conectividad con MySQL y PostgreSQL.
Capacidad de expandir su potencial utilizando módulos (llamados ext's o
extensiones).
Es libre, por lo que se presenta como una alternativa de fácil acceso para todos.
Permite aplicar técnicas de programación orientada a objetos.
No requiere definición de tipos de variables aunque sus variables se pueden
evaluar también por el tipo que estén manejando en tiempo de ejecución.
Debido a su flexibilidad ha tenido una gran acogida como lenguaje base para las
aplicaciones WEB de manejo de contenido, y es su uso principal.[17]
Bootstrap
Figura 11. Logo Bootstrap
Fuente: http://getbootstrap.com/
Twitter Bootstrap (Ver Figura 11) es un framework o conjunto de
herramientas de software libre para diseño de sitios y aplicaciones web. Contiene
plantillas de diseño con tipografía, formularios, botones, cuadros, menús de
navegación y otros elementos de diseño basado en HTML y CSS, así como,
extensiones de JavaScript opcionales adicionales.
Es el proyecto más popular en GitHub y es usado por la NASA y
la MSNBC junto a demás organizaciones.
Características
Desde la versión 2.0 también soporta diseños sensibles. Esto significa que el
diseño gráfico de la página se ajusta dinámicamente (Ver Figura 12), tomando en
cuenta las características del dispositivo usado (Computadoras, tabletas, teléfonos
móviles). [18]
Figura 12. Página food sense utilizando Bootstrap
Fuente: http://foodsense.is
JavaScript
JavaScript (abreviado comúnmente "JS") es un lenguaje de programación
interpretado, dialecto del estándar ECMAScript. Se define como orientado a
objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.
Se utiliza principalmente en su forma del lado del cliente (client-side),
implementado como parte de un navegador web permitiendo mejoras en la interfaz
de usuario y páginas web dinámicas aunque existe una forma de JavaScript
del lado del servidor (Server-side JavaScript o SSJS).
JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres
y convenciones del lenguaje de programación Java. Sin embargo Java y JavaScript
no están relacionados y tienen semánticas y propósitos diferentes.
Todos los navegadores modernos interpretan el código JavaScript integrado
en las páginas web. Para interactuar con una página web se provee al lenguaje
JavaScript de una implementación del Document Object Model (DOM).
Historia
JavaScript fue desarrollado originalmente por Brendan Eich de Netscape con
el nombre de Mocha, el cual fue renombrado posteriormente a LiveScript, para
finalmente quedar como JavaScript. El cambio de nombre coincidió
aproximadamente con el momento en que Netscape agregó compatibilidad con la
tecnología Java en su navegador web Netscape Navigator en la versión 2.002 en
diciembre de 1995.[19]
Hojas de estilo en cascada (CSS)
Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets)
es un lenguaje usado para definir y crear la presentación de un documento
estructurado escrito en HTML o XML (y por extensión en XHTML). El World Wide
Web Consortium (W3C) es el encargado de formular la especificación de las hojas
de estilo que servirán de estándar para los agentes de usuario o navegadores.
La idea que se encuentra detrás del desarrollo de CSS es separar la
estructura de un documento de su presentación.
La información de estilo puede ser definida en un documento separado o en
el mismo documento HTML. En este último caso podrían definirse estilos generales
con el elemento «style» o en cada etiqueta particular mediante el atributo
«style».[20]
A continuación se muestra un ejemplo sencillo de cómo realizar un botón con
CSS. (Ver Figura 13)
Figura 13. Ejemplo de botón con efecto hover hecho con css3
HTML
HTML, siglas de HyperText Markup Language (Ver Figura 14) («lenguaje de
marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración
de páginas web. Es un estándar que sirve de referencia para la elaboración de
páginas web en sus diferentes versiones, define una estructura básica y un código
(denominado código HTML) para la definición de contenido de una página web,
como texto, imágenes, videos, entre otros. Es un estándar a cargo de la W3C,
organización dedicada a la estandarización de casi todas las tecnologías ligadas a
la web, sobre todo en lo referente a su escritura e interpretación. Se considera el
lenguaje web más importante siendo su invención crucial en la aparición, desarrollo
y expansión de la World Wide Web. Es el estándar que se ha impuesto en la
visualización de páginas web y es el que todos los navegadores actuales han
adoptado.
Figura 14. Logo Html5
Fuente: Google imágenes
El lenguaje HTML basa su filosofía de desarrollo en la diferenciación. Para
añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no
se incrusta directamente en el código de la página, sino que se hace una referencia
a la ubicación de dicho elemento mediante texto. De este modo, la página web
contiene sólo texto mientras que recae en el navegador web (interpretador del
código) la tarea de unir todos los elementos y visualizar la página final. Al ser un
estándar, HTML busca ser un lenguaje que permita que cualquier página web
escrita en una determinada versión, pueda ser interpretada de la misma forma
(estándar) por cualquier navegador web actualizado.[21]
En la figura siguiente se muestra un ejemplo básico de la sintaxis de HTML
(Ver Figura 15)
Figura 15. Ejemplo básico de estructura de html5
Fuente: Google imágenes
MySQL
MySQL (Ver figura 16) es un sistema de gestión de bases de
datos relacional, multihilo y multiusuario con más de seis millones de instalaciones.
MySQL AB desde enero de 2008 una subsidiaria de Sun Microsystems y ésta a su
vez de Oracle Corporation desde abril de 2009 desarrolla MySQL como software
libre en un esquema de licenciamiento dual.
Figura 16. Logo Mysql
Fuente: Oracle
Por un lado se ofrece bajo la GNU GPL para cualquier uso compatible con
esta licencia, pero para aquellas empresas que quieran incorporarlo en
productos privativos deben comprar a la empresa una licencia específica que les
permita este uso. Está desarrollado en su mayor parte en ANSI C.
Al contrario de proyectos como Apache, donde el software es desarrollado
por una comunidad pública y los derechos de autor del código están en poder del
autor individual, MySQL es patrocinado por una empresa privada, que posee el
copyright de la mayor parte del código. Esto es lo que posibilita el esquema de
licenciamiento anteriormente mencionado. Además de la venta de licencias
privativas, la compañía ofrece soporte y servicios. Para sus operaciones contratan
trabajadores alrededor del mundo que colaboran vía Internet. MySQL AB fue
fundado por David Axmark, Allan Larsson y Michael Widenius.[22]
Servidor HTTP Apache
El servidor HTTP Apache es un servidor web HTTP(Ver Figura 17) de código
abierto, para plataformas Unix (BSD, GNU/Linux, etc.), Microsoft
Windows, Macintosh y otras, que implementa el protocolo HTTP/1.1 y la noción de
sitio virtual. Cuando comenzó su desarrollo en 1995 se basó inicialmente en código
del popular NCSA HTTPd 1.3, pero más tarde fue reescrito por completo. Su
nombre se debe a que alguien quería que tuviese la connotación de algo que es
firme y enérgico pero no agresivo, y la tribu Apache fue la última en rendirse al que
pronto se convertiría en gobierno de EEUU, y en esos momentos la preocupación
de su grupo era que llegasen las empresas y "civilizasen" el paisaje que habían
creado los primeros ingenieros de internet. Además Apache consistía solamente en
un conjunto de parches a aplicar al servidor de NCSA. En inglés, a patchy server (un
servidor "parcheado") suena igual que Apache Server.
Apache tiene amplia aceptación en la red: desde 1996, Apache, es el servidor
HTTP más usado. Jugó un papel fundamental en el desarrollo fundamental de la
World Wide Web y alcanzó su máxima cuota de mercado en 2005 siendo el servidor
empleado en el 70% de los sitios web en el mundo, sin embargo ha sufrido un
descenso en su cuota de mercado en los últimos años. (Estadísticas históricas y de
uso diario proporcionadas por Netcraft). En 2009 se convirtió en el primer servidor
web que alojó más de 100 millones de sitios web. [23]
Figura 17. Función del protocolo HTTP
Fuente: Google imágenes
AJAX
Figura 18. Logo Ajax
Fuente: Google imágenes
AJAX(Ver Figura 18), acrónimo
de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una
técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet
Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en
el navegador de los usuarios mientras se mantiene la comunicación asíncrona con
el servidor en segundo plano. De esta forma es posible realizar cambios sobre las
páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad
y usabilidad en las aplicaciones.
Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales
se solicitan al servidor y se cargan en segundo plano sin interferir con la
visualización ni el comportamiento de la página, aunque existe la posibilidad de
configurar las peticiones como síncronas de tal forma que la interactividad de la
página se detiene hasta la espera de la respuesta por parte del servidor.
JavaScript es el lenguaje interpretado (scripting language) en el que
normalmente se efectúan las funciones de llamada de Ajax mientras que el acceso
a los datos se realiza mediante XMLHttpRequest, objeto disponible en los
navegadores actuales. En cualquier caso, no es necesario que el contenido
asíncrono esté formateado en XML.[24]
jQuery UI
Figura 19. Logo jQuery UI
Fuente: Google imágenes
jQuery UI (Ver Figura 19)es una biblioteca de componentes para
el framework jQuery que le añaden un conjunto de plug-ins, widgets y efectos
visuales para la creación de aplicaciones web. Cada componente o módulo se
desarrolla de acuerdo a la filosofía de jQuery (find something, manipulate it:
encuentra algo, manipúlalo).
Widgets
Es un conjunto completo de controles UI. Cada control tiene un conjunto de
opciones configurables y se les pueden aplicar estilos CSS.
Accordion: Menú con efecto acordeón.
Autocomplete: Caja con autocompletado.
Button: Botón.
Dialog: Ventanas con contenido.
Slider: Elemento para elegir en un rango de valores.
Tabs: Pestañas.
Datepicker: Calendario gráfico.
Progressbar: Barra de progreso.[25]
XAMPP
Figura 20. Logo Xampp, PHP, Apache, Mysql
Fuente: Google imágenes
XAMPP es un servidor independiente de plataforma, software libre, que
consiste principalmente en el sistema de gestión de bases de datos MySQL, el
servidor web Apache y los intérpretes para lenguajes de script: PHP y Perl. El
nombre proviene del acrónimo de X (para cualquiera de los diferentes sistemas
operativos), Apache, MySQL, PHP, Perl.(Ver Figura 20)
El programa está liberado bajo la licencia GNU y actúa como un servidor web
libre, fácil de usar y capaz de interpretar páginas dinámicas. Actualmente XAMPP
está disponible para Microsoft Windows, GNU/Linux, Solaris y Mac OS X.
Características y requisitos
XAMPP solamente requiere descargar y ejecutar un archivo ZIP, tar , exe o
fkl, con unas pequeñas configuraciones en alguno de sus componentes que el
servidor Web necesitará. XAMPP se actualiza regularmente para incorporar las
últimas versiones de Apache/MySQL/PHP y Perl. También incluye otros módulos
como OpenSSL y phpMyAdmin. Para instalar XAMPP se requiere solamente una
pequeña fracción del tiempo necesario para descargar y configurar los programas
por separado. Puede encontrarse tanto en versión completa, así como en una
versión más ligera que es portátil.[26]
Sublime Text
Figura 21. Logo Sublime Text
Fuente: http://www.sublimetext.com
Sublime Text (Ver Figura 21) es un editor de texto y editor de código
fuente está escrito en C++ y Python para los plugins. Desarrollado originalmente
como una extensión de Vim, con el tiempo fue creando una identidad propia, por
esto aún conserva un modo de edición tipo vi llamado Vintage mode.
Se distribuye de forma gratuita, sin embargo no es software libre o de código
abierto, se puede obtener una licencia para su uso ilimitado, pero el no disponer de
ésta no genera ninguna limitación más allá de una alerta cada cierto tiempo.[27]