capitulo marco referencial y marco teorico
Post on 29-Jun-2022
43 Views
Preview:
TRANSCRIPT
CAPITULO 2
MARCO REFERENCIAL Y MARCO TEORICO
CAPITULO II. MARCO REFERENCIAL Y MARCO TEORICO
2.1 Análisis y requerimientos para el desarrollo
El Instituto Mexicano del Seguro Social desde su fundación, se ha constituido
como un instrumento esencial para proteger al trabajador y a su familia,
contribuyendo a mejorar su nivel de vida y bienestar social.
Para lograr este propósito, en el decreto por el que se reforman, adicionan y derogan
diversas disposiciones del Reglamento de Organización Interna del Instituto
Mexicano del Seguro Social (ROI), publicado en el Diario Oficial de la Federación el
19 de junio de 2003, se regulan las facultades y atribuciones de las Unidades
Médicas de Alta Especialidad (U.M.A.E.), de sus Juntas de Gobierno y de sus
Directores [1].
Una de esas unidades es el Hospital Magdalena de las Salinas, es por ello la
importancia de llevar a cabo un sistema con la capacidad de administrar los procesos
que llevan a cabo, dando así mejoras de servicios donde los pacientes se sientan
confortables y agradecidos de este prestigioso hospital.
No sólo los pacientes son clave para cada U.M.A.E., también lo son los cientos de
trabajadores, doctores, personal, directores, etc. que laboraran cada día
respondiendo a la enorme demanda que surge para éstas unidades. Por eso, la
urgencia y necesidad de llevar a cabo un Sistema de Información Gerencial es un
factor clave y esencial para el avance del Hospital Magdalena de las Salinas.
Gracias a la naturaleza de los sistemas de información se puede ofrecer soluciones,
mejoras de rendimiento, optimización de procesos, ahorro de recursos entre otras
cosas más. Nada sale de la nada, claro está, es por ello que es necesario una
estricta y correcta coordinación de los elementos que ofrecen las tecnologías de
información para lograr un sistema estable, robusto, modular y así aprovechar cada
ventaja que nos proporcionan.
24
2.2 Tecnologías usadas
Desarrollo
- HTML5
- CSS3
- jQuery (JavaScript)
- MySQL
- CodeIgniter 3 (Framework PHP)
- Bootstrap 3
Herramientas
- Editor de texto Sublime Text 3 y Atom
- GitHub
2.3 ¿Por qué un sistema Web?
Pleno 2015 las tecnologías Web “HTML5, CSS3, JavaScript”, han tomado una
enorme fuerza en el desarrollo, no solo de páginas de Internet, sino de una gran
variedad de soluciones como aplicaciones móviles, programas para PC etc.
Como muestra de esta capacidad enorme, el editor de texto que se usó
“Atom” está hecho con éstas tres tecnologías. Todo esto es posible gracias a la
versatilidad y flexibilidad poder desarrollar con éstas principales tecnologías.
No dejando atrás las otras, el uso de MySQL y CodeIgniter 3, que es PHP,
nos ofrecen un set de herramientas disponibles para su uso y así poder lograr los
objetivos establecidos.
2.4 HTML5 - HiperText Markup Language
HTML es lo que se conoce como "lenguaje de marcado", cuya función es preparar
documentos escritos aplicando etiquetas de formato. Las etiquetas indican cómo se
presenta el documento y cómo se vincula a otros documentos.
25
HTML se usa también para la lectura de documentos en Internet desde
diferentes equipos gracias al protocolo HTTP, que permite a los usuarios acceder, de
forma remota, a documentos almacenados en una dirección específica de la red,
denominada dirección URL [2].
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.
Hoy en día 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.
Una de sus ventajas es que nos permite una mayor interacción entre nuestras
páginas web y contenido media (video, audio, entre otros) así como una mayor
facilidad a la hora de codificar nuestro diseño básico [2].
Imagen 6. Logo de HTML5
26
2.5 CSS3 - Cascading Style Sheets
CSS es un mecanismo simple que describe cómo se va a mostrar un documento en
la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la
información presente en ese documento a través de un dispositivo de lectura. Esta
forma de descripción de estilos ofrece a los desarrolladores el control total sobre
estilo y formato de sus documentos.
Se utiliza para dar estilo a documentos HTML y XML, separando el contenido
de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y
XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de
múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para
un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las
que aparezca ese elemento [4].
CSS3 añade muchas capacidades nuevas a la especificación anterior. Aunque
aún está en proceso de estandarizado y le queda un largo camino por recorrer, ya se
ha hecho un hueco al lado de HTML5 y supone uno de los mayores adelantos en el
diseño web actual [5].
Imagen 7. Logo de CSS3
27
2.6 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.
Fue desarrollado por Netscape y hoy en día se utiliza en millones de páginas
web y aplicaciones de servidor en todo el mundo. JavaScript de Netscape es un
superconjunto del lenguaje de scripts estándar de la edición de ECMA-262 3
(ECMAScript) que presenta sólo leves diferencias respecto a la norma publicada [6].
Imagen 8. Logo de JavaScript
28
2.7 jQuery – Write less, do more
jQuery es una biblioteca gratuita de JavaScript, cuyo objetivo principal es simplificar
las tareas de creación de páginas web responsivas, acordes a lo estipulado en la
Web 2.0, la cual funciona en todos los navegadores modernos. Por otro lado, se
dice que jQuery ayuda a que nos concentremos de gran manera en el diseño del
sitio, al abstraer por completo todas las características específicas de cada uno de
los navegadores.
Otra de las grandes ventajas de jQuery es que se enfoca en simplificar los
scripts y en acceder/modificar el contenido de una página web. Finalmente, jQuery
agrega una cantidad impresionante de efectos nuevos a JavaScript, los cuales
podrán ser utilizados en tus sitios Web [7].
Escenarios que se facilitan con el uso de jQuery:
- Carga de la página -> Configuraciones de la página
- Eventos -> Agarrar contenido de la página, manipula o anima el contenido,
regresa el contenido
Beneficios del uso de jQuery:
- jQuery utiliza sintaxis muy parecida a CSS.
- Permite manipular series de elementos y modificarlas con una simple línea de
código. (Encadenamiento de enunciados).
- Te ayuda a concentrarte en el resultado final.
- jQuery es muy fácil de expandir, ya que cuenta con gran cantidad de plug-ins
que se pueden utilizar o hasta crear uno propio.
- Compatible con todos los navegadores modernos.
Imagen 9. Logo de jQuery
29
2.8 MySQL
MySQL es un sistema de administración de bases de datos (Database
Management System, DBMS) para bases de datos relacionales. Así, MySQL no es
más que una aplicación que permite gestionar archivos llamados de bases de datos.
Existen muchos tipos de bases de datos, desde un simple archivo hasta
sistemas relacionales orientados a objetos. MySQL, como base de datos relacional,
utiliza múltiples tablas para almacenar y organizar la información. MySQL fue escrito
en C y C++ y destaca por su gran adaptación a diferentes entornos de desarrollo,
permitiendo su interactuación con los lenguajes de programación más utilizados
como PHP, Perl y Java y su integración en distintos sistemas operativos.
También es muy destacable, la condición de open source de MySQL, que
hace que su utilización sea gratuita e incluso se pueda modificar con total libertad,
pudiendo descargar su código fuente. Esto ha favorecido muy positivamente en su
desarrollo y continuas actualizaciones, para hacer de MySQL una de las
herramientas más utilizadas por los programadores orientados a Internet [8].
Imagen 10. Logo de MySQL
30
2.9 PHP (acrónimo de PHP: Hypertext Pre Processor)
Es un lenguaje de script incrustado dentro del HTML. La mayor parte de su sintaxis
ha sido tomada de C, Java y Perl con algunas características específicas de sí
mismo. La meta del lenguaje es permitir rápidamente a los desarrolladores la
generación dinámica de páginas.
Con PHP se puede hacer cualquier cosa que podemos realizar con un script CGI,
como el procesamiento de información en formularios, foros de discusión,
manipulación de cookies y páginas dinámicas. Un sitio con páginas dinámicas es el
que permite interactuar con el visitante, de modo que cada usuario que visita la
página vea la información modificada para requisitos articulares.
Como producto de código abierto, PHP goza de la ayuda de un gran grupo de
programadores, permitiendo que los fallos de funcionamiento se encuentren y se
reparan rápidamente. El código se pone al día continuamente con mejoras y
extensiones de lenguaje para ampliar las capacidades de PHP. Es utilizado en
aplicaciones Web-relacionadas por algunas de las organizaciones más prominentes
tales como Mitsubishi, Redhat, Der Spiegel, MP3-Lycos, Ericsson y NASA.
Imagen 11. Logo de PHP
31
2.10 CodeIgniter 3
CodeIgniter es un framework que utiliza MVC para aplicaciones web de código
abierto para crear sitios web dinámicos con PHP. «Su objetivo es permitir que los
desarrolladores puedan realizar proyectos mucho más rápido que creando toda la
estructura desde cero, brindando un conjunto de bibliotecas para tareas comunes,
así como una interfaz simple y una estructura lógica para acceder esas bibliotecas.
También hay que destacar que CodeIgniter es más rápido que muchos otros
entornos. Incluso en una discusión sobre entornos de desarrollo con PHP, Rasmus
Lerdorf, el creador de PHP, expresó que le gustaba CodeIgniter «porque es rápido,
ligero y parece poco un entorno» [10].
Imagen 12. Logo de CodeIgniter
32
2.11 Bootstrap 3
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 [11].
Su particularidad es la de adaptar la interfaz del sitio web al tamaño del
dispositivo en que se visualice. Es decir, el sitio web se adapta automáticamente al
tamaño de una PC, una Tablet u otro dispositivo [12].
Imagen 13. Logo de Bootstrap
33
2.12 Sublime Text 3
Sublime Text es un excepcional editor de textos que aporta muchas características
útiles a la hora de programar o editar código. El editor está cargado de
funcionalidades útiles y cómodas desde el punto de la usabilidad y eficiencia,
convirtiendo nuestro trabajo de edición de texto en una experiencia cada vez más
sencilla y agradable, a medida que vamos aprendiendo a utilizar todas sus
funcionalidades [13].
Imagen 13. Logo de Sublime Text
34
2.13 Atom - A hackable text editor
Atom es un editor de texto totalmente editable, personalizable y flexible programado
en JavaScript, HTML, Node.js y CSS.
Una de las cosas más importantes de Atom es que al ser Software Libre,
puedes acceder a su código fuente cuándo desees y modificarlo en función de tus
necesidades [14].
Algunas de sus ventajas:
- Viene con un gestor de paquetes integrado, a través del cual puedes instalar
o modificar pluggins con total comodidad (o incluso crear los tuyos).
- Software Libre. Gran parte de la funcionalidad de Atom está expresada en
forma de paquetes, a los cuales podíamos acceder libremente en su versión
beta.
- Atom te ayuda a escribir el código de forma rápida y flexible a través de su
inteligente modo de autocompletado.
- Posee un navegador de archivos con el que podremos abrir un único archivo,
un proyecto entero, o múltiples proyectos en una única ventana.
- Puedes separar tu interfaz de Atom en múltiples paneles para comparar o
editar código de varios archivos.
- Podrás personalizar la apariencia de Atom (fuente, colores de ventanas, etc.)
a través de los múltiples temas de los que dispone.
Imagen 14. Logo de Atom
35
2.14 GitHub – Social Coding
GitHub es una plataforma creada para facilitar el desarrollo colaborativo de software,
nos permite alojar proyectos en la web gratuitamente, por lo general de forma
pública, aunque podemos alojar los proyectos de modo privado, si pagamos una
pequeña suscripción mensual.
Ofrece al desarrollador toda la potencia y agilidad del sistema de control de
versiones Git, más un interesante set de herramientas añadidas:
- Wiki
- Sistema de seguimiento de incidencias
- Interfaz gráfica para revisión/comparación de código
- Visor de ramas de desarrollo
Github hace el trabajo en equipo más ágil y sencillo, ayuda a la detección de
fallos, a disminuir errores humanos, al seguimiento por etapas del proyecto, al
mantenimiento de diferentes entornos, etc… [15].
Imagen 15. Logo de GitHub
36
2.15 MVC – Modelo Vista Controlador
Es un patrón en el cual se separan los componentes de una aplicación en tres
capas, la capa de datos, la capa de interfaz y la capa lógica.
La idea básica detrás de esto es separar el código, de tal manera que si necesitamos
hacer un cambio en la base de datos, esto no afecte a la lógica del programa, ahora
la función del controlador es solo ese controlar la interacción entre ambas capas [16].
- Modelo: Todo lo relacionado con la extracción de datos, ya sea a un archivo
de texto, una base de datos etc.
- Vista: La parte donde se interacciona con el usuario, se especifican cosas
como posición de datos, y como se desplegaran.
- Controlador: Pone orden entre los dos anteriores decide cuando se hace una
llamada de datos, y cuando se despliega algo.
Gracias a este paradigma se logra obtener un código desarrollado bien estructurado
que es de gran importancia para sistemas grandes como este. Así cada persona
podrá desarrollar sin problema alguno además de que CodeIgniter nos ayuda ya que
su metodología de trabajo se basa en MVC.
Imagen 16. Diagrama de MVC
37
2.16 HMVC – Vamos un poco más allá
El HMVC (Herarchical Model View Controller) es una mejora del MVC. Su más
grande beneficio de usar este estilo es la “widgetizacion” de la estructura del
contenido de una aplicación. Dividir la aplicación en sub-aplicaciones las cuales
contiene una propia terna MVC.
Actualmente es el patrón de diseño más usado para aplicaciones web e incluido en
varios frameworks de desarrollo web [17].
Principales ventajas de implementar HMVC en el ciclo de desarrollo:
- Modularización: Reduce las dependencias entre las distintas partes de la
aplicación.
- Organización: Tener una carpeta para cada una de las ternas relevantes hace
una carga de trabajo más ligera.
- Reusabilidad: Por la naturaleza del diseño es fácil de reutilizar casi cada pieza
de código.
- Extensibilidad: Hace la aplicación más extensible al añadir o remover módulos
sin sacrificar la facilidad de mantenimiento.
Imagen 17. Esquema MVC Imagen 18. Esquema HMVC
38
2.15 Sumario
En conjunto con estas tecnologías, como HVMC, podemos desarrollar
sistemas bien estructurados, modulares y que sean escalables, características de
suma importancia para un Sistema de Información de Gerencial.
Además, gracias a herramientas como GitHub nos da la posibilidad de
desarrollar el proyecto con el equipo de una manera tan sencilla que está al alcance
de unos cuantos clicks.
Utilizando editores de texto para desarrolladores como lo son Sublime Text 3 y
Atom se puede lograr un desarrollo ágil, ver el código del proyecto de manera
ordenada. Así el programador incrementa la creación de éste aumentando su
productividad.
Está claro que la elección de éstas tecnologías nos brindarán un conjunto de
soluciones para poder desarrollar el sistema.
39
top related