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