graduado en ingeniería informáticaoa.upm.es/44689/1/tfg_maria_diez_sanjuan.pdf · validación...
TRANSCRIPT
MADRID, ABRIL 2016
Graduado en Ingeniería Informática
Universidad Politécnica de Madrid
Escuela Técnica Superior de
Ingenieros Informáticos
TRABAJO FIN DE GRADO
Diseño e implementación de una interfaz web para el análisis de Historias Clínicas Electrónicas
MADRID, JUNIO 2016
Autor: María Díez Sanjuán
Director: Ernestina Menasalvas Ruiz
Tutor: Roberto Costumero Moreno
ii
iii
AGRADECIMIENTOS
A mi familia, por apoyarme en todo momento.
A mi tutora Ernestina, a Roberto y a Héctor por guiarme en la realización del trabajo de fin de grado y enseñarme los conceptos de una interfaz web.
iv
RESUMEN
El trabajo de fin de grado presente tiene como objetivo principal realizar una interfaz web sencilla que permita visualizar las HCE (historias clínicas electrónicas) y su posterior análisis.
Como el trabajo está íntimamente relacionado con el diseño y desarrollo de aplicaciones web, en primer lugar, en este trabajo se analizan los trabajos más relevantes de la literatura reciente relacionadas con desarrollo de las herramientas que existen en el mercado sobre la visualización y análisis de las HCE, teniendo como objetivo poner en contexto al lector y analizar las tendencias actuales. Posteriormente, se describen las tecnologías web empleadas para diseñar la interfaz: HTML5, CSS3, PHP, JAVASCRIPT, SQL, AJAX, JSON, JQUERY, BOOTSTRAP y DATATABLES. Para el desarrollo de la interfaz se ha utilizado WAMPSERVER y MYSQLWORKBENCH. Una vez definidos todos los conceptos, se detalla la implementación del código para generar la interfaz. Se han incluido por claridad, pantallas de visualización de la interfaz para ilustrar la solución, así como un conjunto de pruebas realizadas. Por último, se presentan las conclusiones y valoraciones tras la realización del trabajo.
PALABRAS CLAVE
Historial clínico electrónico, diseño web, HTML, CSS, PHP, AJAX
v
ABSTRACT
The present bachelor’s final project has the aim of perform a simple web interface for displaying electronic health records (EHR) and their later analysis.
As the project is closely related to web application design and development, firstly, the most important recent works related to the development of tools that nowadays exist for visualize and analyze EHR are detailed, in order to place the reader into context and survey the current trends. Then, web technologies used for designing the interface are presented, such as: HTML5, CSS3, PHP, JAVASCRIPT, SQL, AJAX, JSON, JQUERY, BOOTSTRAP and DATATABLES; and also the tools used for developing it, such as WAMPSERVER and MYSQL WORKBENCH. Once all concepts are defined, the code for developing the web interface is thoroughly described. For greater clarity, web interface screen images are included to illustrate the solution, as well a set of tests done. Finally, conclusions and evaluations are described.
KEY WORDS
Electronic health record, web design, HTML, CSS, PHP, AJAX
vi
ÍNDICE
INTRODUCCIÓN ........................................................................................................................ 1
1.1. PROBLEMA ................................................................................................................ 3
1.2. OBJETIVO ................................................................................................................... 3
1.3. RESUMEN DEL TRABAJO REALIZADO ............................................................... 4
1.4. ORGANIZACIÓN DEL DOCUMENTO .................................................................... 5
ESTADO DE LA CUESTIÓN ..................................................................................................... 6
2.1. OMI-AP® .................................................................................................................... 7
2.2. SELENE CLINIC ........................................................................................................ 7
2.3. HP-HCIS ...................................................................................................................... 8
2.4. ICIP .............................................................................................................................. 8
2.5. MILLENIUM ............................................................................................................... 8
2.6. HORUS ........................................................................................................................ 8
2.7. OTRAS HERRAMIENTAS ........................................................................................ 9
TECNOLOGÍAS ........................................................................................................................ 10
3.1. HTML5 ...................................................................................................................... 11
3.2. CSS 3 .......................................................................................................................... 12
3.3. BOOTSTRAP ............................................................................................................ 14
3.4. PHP ............................................................................................................................ 15
vii
3.5. SQL ............................................................................................................................ 16
3.6. WAMPSERVER ........................................................................................................ 16
3.7. JAVASCRIPT ............................................................................................................ 17
3.8. JQUERY .................................................................................................................... 18
3.9. AJAX ......................................................................................................................... 18
3.10. JSON ........................................................................................................................ 20
3.11. JQUERY HIGHLIGHT PLUGIN ............................................................................ 21
3.12. DATATABLES ....................................................................................................... 21
SOLUCIÓN ................................................................................................................................ 22
4.1. PROTOTIPO DE BAJA FIDELIDAD ...................................................................... 22
4.2. MAQUETACIÓN Y ESTILO ................................................................................... 23
4.2.1. ESTRUCTURA .............................................................................................. 23
4.2.1.1. <HEAD> ........................................................................................... 24
4.2.1.2. <BODY> ........................................................................................... 25
4.2.2. ESTILO ........................................................................................................... 27
4.3. CONEXIÓN ............................................................................................................... 28
4.4. SCRIPTS .................................................................................................................... 30
4.5. EJEMPLOS DE PANTALLAS ................................................................................. 32
4.6. BUENAS PRÁCTICAS ............................................................................................. 35
viii
PRUEBAS .................................................................................................................................. 37
5.1. PRUEBAS UNITARIAS ........................................................................................... 37
5.2. PRUEBAS DE INTEGRACIÓN ............................................................................... 38
5.3. VALIDACIÓN ........................................................................................................... 38
5.3.1. VALIDACIÓN DE CÓDIGO ......................................................................... 38
5.3.2. VALIDACIÓN DEL SISTEMA ..................................................................... 40
CONCLUSIONES Y LÍNEAS FUTURAS ............................................................................... 41
BIBLIOGRAFÍA ........................................................................................................................ 43
ix
ÍNDICE DE LAS FIGURAS
Figura 1. Valores medios obtenidos por países en 2016 según EMRAM. 2
Figura 2. Tabla de las aplicaciones software analizadas 7
Figura 3. Tecnologías usadas en el diseño de la web 11
Figura 4. Ejemplo código HTML 13
Figura 5. Ejemplo código HTML en navegador 13
Figura 6. Ejemplo código CSS en línea 14
Figura 7. Ejemplo código CSS en hoja de estilos interna 14
Figura 8. Ejemplo código CSS en hoja de estilos externa 15
Figura 9. Ejemplo código CSS en un navegador 15
Figura 10. Sistema de grids en Bootstrap 16
Figura 11. Comunicación cliente-servidor con intérprete PHP [23] 17
Figura 12. WampServer [24] 18
Figura 13. Comparación gráfica del modelo tradicional de aplicación web y del modelo propuesto por AJAX (imagen original de Adaptive Path)
20
Figura 14. Prototipo de baja fidelidad de la interfaz web 24
Figura 15. Cabecera de la interfaz 26
Figura 16. Estructura jerárquica de los elementos de la interfaz 27
Figura 17. Estructura jerárquica del código de la interfaz 27
x
Figura 18. Estructura de bloque en CSS 28
Figura 19. Ejemplo sin nada, con borde, relleno y margen en CSS 28
Figura 20. Tabla de los resultados de los pacientes e informes 31
Figura 21. Página inicial 33
Figura 22. Página inicial con opciones avanzadas desplegado 33
Figura 23. Resultados de búsqueda ‘infarto’ 34
Figura 24. Resultados de búsqueda ‘infarto’ desplegando los informes 34
Figura 25. Informe de la búsqueda como antecedentes ‘infarto’ y como tratamiento ‘clopidogrel’
35
Figura 26. Resultados de búsqueda ‘infarto’ y como tratamiento ‘clopidogrel’ 35
Figura 27. Resultados de búsqueda con como antecedentes ‘infarto’ y como tratamiento ‘clopidogrel’
36
Figura 28. Validación código HTML de la interfaz según W3C 40
CAPITULO 1. INTRODUCCIÓN
1
CAPÍTULO 1.
INTRODUCCIÓN Vivimos en la época de la información, donde el progreso y las nuevas tecnologías han configurado la sociedad de hoy en día. Cada vez tenemos más necesidad de obtener y compartir todos los datos e información de forma sencilla sin importar el lugar ni el momento, la información no descansa. Esta necesidad se ha visto muy influenciada en muchos ámbitos de la sociedad, como por ejemplo en el ámbito de la medicina.
Pero todo ello no sería posible sin la digitalización de la información. La incorporación de las tecnologías de la información y comunicación (TIC) en el sector sanitario tuvo sus inicios en los laboratorios, y departamentos de radiología. Esta implantación ha “revolucionado” los historiales clínicos de los pacientes. La historia clínica es el conjunto de documentos que contienen los datos, informes, valoraciones, tratamientos e informaciones de cualquier índole sobre la situación y evolución clínica de un paciente a lo largo del proceso asistencial, hasta el alta del paciente.
La historia clínica electrónica, a partir de ahora HCE, consiste en toda la información disponible en la historia en papel. Parte de esta información hoy en día se encuentra codificada, estructurada e interrelacionada pero la HCE contiene también información no estructurada como texto e imagen. La HCE tiene como objetivo la mejora de la calidad de la asistencia sanitaria a los ciudadanos aportando efectividad, eficiencia y seguridad tanto al paciente como a los profesionales.
Esta integración de la información en la HCE es una característica fundamental pues está condicionada a que exista, una interfaz sencilla para visualizar, con un tiempo de respuesta de búsqueda corto, toda la información clínica de los pacientes (los diagnósticos, las notas de evolución, los resultados de las pruebas) así como a ofrecer herramientas de ayuda a la toma de decisiones de los profesionales, permitiendo acceso a fuentes de información médica y a conjuntos de datos de la población asistida con el propósito de ayudar a la investigación clínica.
La HCE en la terminología médica anglosajona tiene varias denominaciones: electronic medical record, electronic health record, electronic patient record o computer based patient record. En
CAPITULO 1. INTRODUCCIÓN
2
España, la HCE se implantó por primera vez en Andalucía. Entre 1993 y 1994 Andalucía llevó a cabo la primera experiencia con la HCE en España [1]. Actualmente, todas las Comunidades Autónomas tienen sistemas de HCE en Atención Primaria; no obstante, quedan pocos centros que aún no lo han implantado en atenciones especializadas.
Gracias al buen desarrollo de las TIC, según una nota de prensa de la sanidad asturiana [2], tan solo en Oviedo la HCE alcanza los dos millones de consultas al año.
En el año 2014, el Hospital de Denia (Valencia) fue el primer centro clínico español y el segundo de Europa que alcanzó el nivel 7 sobre 7 de la acreditación Emram (Electronic Medical Record Adoption Model) de la Sociedad de Sistemas de Información y Gestión en Sanidad en Europa (HIMSS). El HIMSS reconoce a los centros que operan sin papel, y que representan las mejores prácticas en la implementación de HCE. Esta distinción de nivel 7 acredita que el hospital es 100% digital tras implantar la HCE para toda la documentación relativa a sus pacientes, convirtiéndose así, a día de hoy, en el hospital español con mayor grado de integración de la HCE. En la Comunidad de Madrid, el año pasado, 2015, el hospital 12 de Octubre logró el nivel 6, uniéndose a otros tres hospitales galardonados mientras que en toda España hay dieciséis [3].
En la siguiente figura, se muestra un gráfico de las puntuaciones medias obtenidas en cada país según EMRAM [4]. España supera la media de Europa, lo que nos permite afirmar que España apuesta muy fuerte por la incorporación de nuevas tecnologías de la información y comunicación a la práctica clínica diaria.
Figura 1. Valores medios obtenidos por países en 2016 según EMRAM Fuente de datos: HIMSS Analytics Database, Q1/2016 (datos desde 4/2013 – 3/2016)
CAPITULO 1. INTRODUCCIÓN 1.2. OBJETIVO
3
1.1. PROBLEMA
Este Trabajo de Fin de Grado, se enmarca dentro de un proyecto de investigación, que se realiza en el laboratorio de Minería de Datos y Simulación (MIDAS). Dicho proyecto de investigación trata de identificar y hacer una herramienta automática que permita buscar y extraer en las HCE términos clínicos, medicamentos, tratamientos que se hacen a los pacientes, etc. Es decir, toda la información estructurada y no estructurada de los pacientes.
Debido a la existencia de datos no estructurados, es necesario aplicar el procesamiento del lenguaje natural. Es decir, de todas las HCE se detectan, extraen y clasifican los conceptos para luego poder relacionarlos entre si y dotarlos de estructura y así realizar consultas o análisis o ensayos clínicos, como, por ejemplo, tratar de inferir cuales son los mejores tratamientos para un determinado grupo poblacional con una enfermedad.
Por lo tanto, el problema a resolver consiste en proporcionar una herramienta fácil e intuitiva a los profesionales de la salud o personal sanitario, que les permita consultar los historiales, así como realizar consultas más complejas para realizar medidas sobre indicadores de calidad, revisiones, análisis, investigación clínica entre otros.
1.2. OBJETIVO
Este trabajo de fin de grado comprende los campos del diseño y el desarrollo web teniendo como objetivo principal, realizar una interfaz web lo más simple posible.
La consecución de este objetivo principal, se puede desglosar en los siguientes subobjetivos:
Establecer los requisitos de la interfaz de visualización y análisis de HCE. Prototipado de la interfaz. Establecer el protocolo de comunicación entre el front-end y el sistema proveedor de los
datos, y establecer el protocolo de recepción de datos. Diseño e implementación la interfaz. Realización de pruebas unitarias, integración y de sistema; y validación.
CAPITULO 1. INTRODUCCIÓN 1.3. RESUMEN DEL TRABAJO REALIZADO
4
En cuanto al diseño, por lo tanto, la herramienta tendrá que visualizar una barra de búsqueda simple donde se pueda introducir en lenguaje natural los términos y, si se desea, añadir filtros como edad, género, secciones… Esto se transformará en una consulta que devolverá una tabla con un listado simplificado de los resultados que satisfagan los criterios de búsqueda como la información del paciente, la edad, la fecha de nacimiento, el identificador del HC, la fecha del HC y un pequeño resumen del informe. La herramienta permitirá además ampliar el informe para mostrar un informe completo junto con sus imágenes asociadas.
1.3. RESUMEN DEL TRABAJO REALIZADO A continuación, se describe brevemente todo el trabajo realizado a lo largo del desarrollo de este trabajo fin de grado.
En primer lugar, se realizó un estudio de los requisitos funcionales y mínimos que tiene que establecer la interfaz, por ejemplo, que es lo mínimo que se tiene que mostrar por pantalla, como tiene que funcionar, establecer el protocolo de la recepción de los datos y como se guardan.
En segundo lugar, se pensó un prototipado de baja fidelidad, y se diseñó con la herramienta Wireframe, estudiando la estructura del contenido y la interacción de la web, teniendo en cuenta la posible poca experiencia del futuro usuario con páginas web.
En tercer lugar, se hizo un estudio de cuales iban a ser las tecnologías a emplear para así, gracias a los tutoriales de Internet, aprenderlas, pues se parte desde cero en el mundo del diseño y desarrollo web, al no haber diseñado nunca antes una página web.
En cuarto lugar, después de estudiar la sintaxis de las tecnologías y sus conceptos básicos, se empezó a desarrollar el diseño de la web para la parte del cliente, construyendo la estructura y contenido con HTML5; para dar estilo a la web se usó CSS y el framework Bootstrap; para la interacción con el usuario JavaScript y DOM; para la interacción con los botones y checkboxes se empleó un framework de JavaScript llamado JQuery; para el diseño de la tabla se usó Datatables; para poder resaltar los términos en el informe que se han buscado se ha usado un JQuery plugin [5]; para conectarse con la base de datos y ejecutar queries se usó PHP y SQL; y por último, para no tener necesidad de recargar la página cada vez que se hace una búsqueda y se soliciten los datos al servidor, se empleó AJAX.
CAPITULO 1. INTRODUCCIÓN 1.4. ORGANIZACIÓN DEL DOCUMENTO
5
Detalladamente, el desarrollo del diseño de la web realizado hasta el momento ha sido el siguiente:
Se ha añadido una barra de búsqueda simple donde se puede introducir en lenguaje natural los términos a consultar y, si se desea, añadir filtros como secciones, género y edad, todo ello englobado en opciones avanzadas. Esta consulta devuelve una tabla con el identificador del paciente, la fecha de nacimiento y el género. Para poder observar el informe se puede desglosar otra tabla con toda la información relevante del informe, como es el identificador, la sección a la que pertenece, la edad del paciente, la fecha del informe y las dos primeras líneas del texto del informe. Si se desea ampliar el texto, basta con pinchar en el texto, se abre al lado derecho de la tabla, toda la información resaltando en color amarillo, las palabras que se introdujeron en la barra de búsqueda.
1.4. ORGANIZACIÓN DEL DOCUMENTO
Este trabajo se ha estructurado, siguiendo las recomendaciones de la asignatura, de la siguiente manera:
En el capítulo 2, se realiza un análisis de las distintas herramientas que existen para visualizar los datos de los pacientes en un centro sanitario.
En el capítulo 3, se describen los lenguajes de las tecnologías web que se han implementado, así como su sintaxis y los conceptos básicos para poder realizar la interfaz.
En el capítulo 4, se detalla la implementación de la interfaz web.
En el capítulo 5, se analizan los resultados obtenidos de la interfaz y se realiza una valoración de dichos resultados.
Para concluir, en el capítulo 6, se presentan las conclusiones obtenidas tras la realización del trabajo.
CAPITULO 2. ESTADO DE LA CUESTIÓN
6
CAPÍTULO 2.
ESTADO DE LA CUESTIÓN Para la realización del presente estudio, se ha realizado un rastreo a través de buscadores de Internet, con la finalidad de conocer las distintas aplicaciones software que existen en el mercado, para la gestión y representación de las historias clínicas electrónicas.
A continuación, se muestra una tabla comparativa con las distintas aplicaciones software que se analizarán en este capítulo.
Aplicación Arquitectura Motor BBDD Proveedor OMI-AP Web Informix Stacks
AP-MADRID Web Informix Stacks SELENE CLINIC Web Oracle Siemens
HCIS Web Oracle Hp
ICIP Cliente Servidor Allbase,
MySQLServer Philips
MILLENIUM Web Múltiples Cerner
HORUS Web Distribuidas Consejería Sanidad de
Madrid HCE-CEX
HCE-URGENCIAS Cliente Servidor Informix Indra
HEALTH INFORMATION SYSTEMS
Web Múltiples 3M
CENTRICITY CLINICAL Web Múltiples GE Healthcare
SALUS Web Informix Qsoft
DRICLOUD Web Múltiples M Bionics
Figura 2. Tabla de las aplicaciones software analizadas
CAPITULO 2. ESTADO DE LA CUESTIÓN 2.2. SELENE CLINIC
7
2.1. OMI-AP® Actualmente, el software más usado en España es OMI-AP, desarrollado por Stacks hace 25 años, contando a día de hoy con 32.000 usuarios y más de 25 millones de HCE. OMI-AP [6]
lidera la gestión de los HCE en el ámbito de la Atención Primaria, disponiendo de una cuota de mercado del 60 %. Está diseñado con las últimas tecnologías funcionando mediante navegadores web, donde cada paciente tiene una ficha, en la que se recogen sus datos administrativos y de filiación, y su historia clínica, con total integración, con independencia del profesional o ámbito asistencial que la genere. OMI-AP se ha exportado a toda la Unión Europea y a América del Sur, donde en Chile lidera varios proyectos.
En la Comunidad de Madrid, se hacía uso del modelo distribuido OMI-AP, hasta que surgió la necesidad de disponer un sistema centralizado para toda la Comunidad y Stacks desarrolló un proyecto llamado AP-Madrid[7], el Sistema de Historia Clínica Electrónica Única Centralizada de Atención Primaria, sustituyendo así desde el 2009 al OMI-AP. AP-Madrid fue el primer sistema cien por cien web, basado en el lenguaje de programación JAVA el cual da soporte a 7 millones de personas, convirtiéndose en el sistema de registro electrónico Web / Java más grande de España [8].
2.2. SELENE CLINIC Por otro lado, creada por la prestigiosa empresa Siemens en el CTS de Getafe, Madrid, existe Selene Clinic [9], un avanzado gestor de conocimiento clínico que unifica en una sola plataforma, Atención Primaria y Atención Especializada. El tipo de interfaz que emplea es web bajo el lenguaje JAVA con la tecnología RIA para darle más fluidez e interactividad a la interfaz.
Bajo el servicio madrileño de salud, Siemens lideró un proyecto pionero en su momento, en el 2013, que consistía en desarrollar una aplicación para dispositivos móviles, smartphones, tablets… que permitía a los profesionales sanitarios consultar de manera ágil y directa la HCE del paciente en cualquier lugar y momento, conectados a la red wifi del hospital. Esta aplicación, denominada Selene Mobility [10], permite a los sanitarios consultar a pie de cama la HCE del paciente, los cuidados de enfermería, la administración de medicación, la solicitud de pruebas,
CAPITULO 2. ESTADO DE LA CUESTIÓN 2.6. HORUS
8
etc. Está desarrollada sobre la plataforma Selene, por lo que también emplea interfaz web bajo HTML5 [11].
2.3. HP-HCIS La multinacional HP, Hewlett Packard, desarrolló en España y apoyada por los principales hospitales desde hace 24 años, la herramienta HCIS (Healthcare Information System) [12]. HP-HCIS cubre las HCE desde la atención primaria hasta la especializada, pasando por la salud mental y los servicios socio sanitarios, es decir, un entorno bastante completo de referencia líder en España y también en UK.
2.4. ICIP Bajo el nombre de Philips, existe ICIP, IntelliVue Clinical Information Portfolio [13], un completo sistema de monitorización y de información de pacientes usado por ejemplo en Madrid para la gestión de Unidades de Cuidados Intensivos.
2.5. MILLENIUM La multinacional norteamericana Cerner, una de las más sólidas del mercado actual en el mundo de las TIC en salud, desarrolló la herramienta Millenium [14], implantada actualmente en más de 2.600 hospitales en el mundo. Millenium permite la gestión de las HCE en cualquier ámbito, y asociarle todo tipo de exploraciones, intervenciones quirúrgicas, medicación, altas y consultas externas. Es un sistema que guía y ayuda en la toma de decisiones clínicas, y permite analizar la calidad y eficacia de los cuidados de los pacientes.
2.6. HORUS Accenture colaboró con la Comunidad de Madrid para crear el sistema de HCE de Madrid llamado Horus [15]. Es un visor de HCE unificado y centralizado para la atención primaria y atención especializada. La arquitectura empleada es .NET con interfaz web. Por ejemplo, este visor tuvo bastante relevancia y sirvió de mucha utilidad para los servicios de urgencias médicas de Madrid, el SUMMA 112, ya que accedían al HCE del paciente mediante tablet-PC de las
CAPITULO 2. ESTADO DE LA CUESTIÓN 2.7. OTRAS HERRAMIENTAS
9
unidades móviles y podían consultar los datos del paciente antes de llegar al hospital. Horus fue galardonado con un premio de la Asociación de proveedores de sistemas de red, internet y telecomunicaciones que reconoció la innovación tecnológica en la Comunidad de Madrid [16].
2.7. OTRAS HERRAMIENTAS Actualmente existen una infinidad de herramientas software para la representación de HCE. Aun así, caben destacar los siguientes:
La empresa 3M en su departamento del cuidado de la salud dispone de 3M Health Information Systems, con herramientas como 3M™ 360 Encompass™ System, 3M™ Health Data Management (HDM) System, 3M Health Record Management (HRM) Software… [17]
La empresa INDRA proporciona herramientas para HCE en urgencias y en consultas externas.
La empresa GE Healthcare con Centricity Clinical Archive que unifica las imágenes y datos del paciente a lo largo del proceso asistencial [18].
Muchos hospitales tienen su propio sistema de información clínica, como el hospital 12 de Octubre de Madrid con Hygeia [19].
El software SALUS creado por QSOFT, en el que confían más de 27 países, dispone de varios software dependiendo del tipo de gestión: HOSPISALUS para los hospitales, CMSALUS para las clínicas y SALUSSTANDARD para centros médicos. Todos ellos permiten a través de la HCE obtener en cualquier momento estadísticas y gráficas de evolución de los pacientes [20].
DriCloud desarrollado por M Bionics S.L. en Madrid, unifica todos los servicios que un profesional de la salud o clínica necesita y es un software en la nube, muy completo, rápido e intuitivo [21].
El Insituto Catalán de Salud desarrolló un programa informático llamado e-Cap [22] que gestionaba los HCE de atención primaria en Cataluña.
CAPITULO 3. TECNOLOGÍAS
10
CAPÍTULO 3.
TECNOLOGÍAS Para poder realizar el diseño e implementación de la parte del cliente de la interfaz web se han utilizado las siguientes tecnologías y herramientas que se irán describiendo brevemente a lo largo del capítulo:
HTML5, para la estructura y contenido de la página. CSS3, para dar estilo a la página. BOOTSTRAP, framework para mejorar el aspecto de la página. PHP, lenguaje de programación para comunicarse con el servidor. WAMPSERVER, servidor web Apache, SQL y PHP. SQL, lenguaje de programación para acceder a la base de datos. JAVASCRIPT, lenguaje de programación para la interacción con el usuario. JQUERY, librería de Javascript que aporta sencillez al interactuar con la página. DATATABLES, plugin de JQuery para dar dinamismo a la tabla. AJAX, para la comunicación asíncrona con el servidor. JSON, formato de datos para su intercambio entre el servidor y el cliente. JQUERY HIGHLIGHT PLUGIN, para resaltar en la página los términos buscados.
Figura 3. Tecnologías usadas en el diseño de la web
CAPITULO 3. TECNOLOGÍAS 3.1. HTML 5
11
3.1. HTML5 HTML (HyperText Markup Language) significa "Lenguaje de Marcado de Hypertexto". Se utiliza para describir y categorizar la estructura y el contenido de las páginas web para el usuario en el navegador. HTML es un lenguaje de marcas o marcado por lo que no hay que confundirlo con un lenguaje de programación; porque no cuenta con funciones aritméticas, variables o estructuras de control, aunque sí que permite usar, dentro de sí mismo, lenguajes de programación como por ejemplo JavaScript.
Fue creado por Tim Berners-Lee en 1989. El estándar lo definió la W3C (World Wide Web Consortium) y actualmente HTML se encuentra en su versión HTML5, con la que se ha trabajado.
HTML se escribe en forma de etiquetas que el navegador interpreta y da forma en la pantalla. Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares < >. Existen etiquetas de apertura y etiquetas de cierre que tienen la siguiente forma: <etiqueta> </etiqueta>. HTML dispone de una gran variedad de etiquetas para distintos usos: imágenes, videos, hipervínculos, párrafos, tablas, scripts, etc.
Todo documento HTML tiene que empezar con la etiqueta <html> para indicar al navegador que lo que viene a continuación debe ser interpretado como código HTML; a continuación, la cabecera del documento con la etiqueta <head>, y dentro de ella, la etiqueta <title> que define el título de la página que se verá en la ventana del navegador; la etiqueta <body> donde estará el cuerpo del documento que se mostrará en el navegador. Cada una de las etiquetas debe cerrarse con su etiqueta de cierre.
Un ejemplo sencillo de código HTML sería:
CAPITULO 3. TECNOLOGÍAS 3.2. CSS 3
12
Figura 4. Ejemplo código HTML
Y se mostraría por pantalla en el navegador de la siguiente manera:
Figura 5. Ejemplo código HTML en navegador
3.2. CSS 3 Una vez que tenemos la estructura básica de una página web en HTML, se le puede “embellecer” con CSS, como por ejemplo cambiar la fuente (tipos, tamaño, énfasis), colores, márgenes, espaciado, alineación (centrado, izquierda, derecha), etc.
CSS (Cascading Style Sheet) tiene como objetivo separar el contenido del diseño con el uso de hojas de estilo. Es decir, permite definir el estilo y presentación del documento HTML mediante una sintaxis muy simple. Al igual que HTML, no es un lenguaje de programación y el estándar CSS lo definió la W3C (World Wide Web Consortium). Actualmente CSS se encuentra en su versión CSS3, con la que se ha trabajado.
CAPITULO 3. TECNOLOGÍAS 3.2. CSS 3
13
Se puede aplicar de tres maneras distintas: en línea, en una hoja de estilos interna o en una hoja de estilos externa. En el presente trabajo se han usado los métodos en línea y hoja de estilos externa.
En línea significa que lo insertas directamente en la etiqueta HTML. Por ejemplo:
Figura 6. Ejemplo código CSS en línea
En una hoja de estilos interna significa que lo agregas en el mismo documento HTML en la parte del <head> entre las etiquetas <style>. Por ejemplo, para todas las etiquetas <h1> se aplicará el siguiente estilo:
Figura 7. Ejemplo código CSS en hoja de estilos interna
CAPITULO 3. TECNOLOGÍAS 3.3. BOOTSTRAP
14
En una hoja de estilos externa significa que el código CSS se escribe en un archivo aparte con extensión .css y se enlaza a la página donde se quiera cambiar el estilo con la etiqueta <link>, donde ‘rel’ especifica la relación que mantiene con el documento que enlaza (stylesheet=hoja de stilos); ‘type’ se refiere al tipo de contenido de comuento (un texto css); y por último, ‘href’ identifica la ruta a la hoja de estilos.
Figura 8. Ejemplo código CSS en hoja de estilos externa
Con cualquiera de los tres métodos descritos, el ejemplo de CSS se vería en un navegador de la siguiente manera:
Figura 9. Ejemplo código CSS en un navegador
3.3. BOOTSTRAP Bootstrap es un framework desarrollado en 2011 por Twitter que permite dar forma y estilo mediante librerías HTML, CSS y JavaScript. Este conjunto de herramientas front-end sirve para
CAPITULO 3. TECNOLOGÍAS 3.4. PHP
15
desarrollar fácilmente una web usando grids, formularios, botones, tipografías, menús, imágenes… adaptables a cualquier dispositivo y pantalla.
Bootstrap incluye un sistema de columnas, llamada cuadrícula, rejilla o grid, para diseñar la página bastante fácil de usar. El diseño de páginas basado en rejilla se realiza mediante filas y columnas donde se colocan los contenidos. Se basa en una rejilla de 12 columnas en el que se determina el ancho de la sección en base al número de columnas escogidas. Antes de todo, las filas siempre se definen dentro de un contenedor de tipo .container (anchura fija) o de tipo .container-fluid (anchura variable). Las filas se utilizan para agrupar horizontalmente a varias columnas y solo contienen columnas, no contenido (pues son las columnas quienes albergan el contenido).
Figura 10. Sistema de grids en Bootstrap
3.4. PHP PHP (Hypertext Preprocessor) es un lenguaje de programación de código abierto, gratuito y multiplataforma creado en 1995 y es usado para generar páginas web dinámicas (dinámica porque el contenido de la página puede cambiar debido a búsquedas, cambios en bases de datos, etc).
Éste código PHP se incorpora dentro del documento HTML y es el servidor el que se encarga de ejecutar el código o scripts y enviar su resultado HTML al navegador.
CAPITULO 3. TECNOLOGÍAS 3.6. WAMPSERVER
16
Figura 11. Comunicación cliente-servidor con intérprete PHP [23]
Una ventaja de PHP es que dispone de soporte nativo para la gestión y conexión a bases de datos SQL desde su propio código, muy útil para este trabajo. Por el contrario, una desventaja es que se necesita instalar un servidor web, para que un módulo de procesador de PHP lo interprete y genere la página web resultante.
3.5. SQL SQL (Structured Query Language) es el lenguaje estándar de acceso a bases de datos relacionales que permite realizar operaciones en ellas. Se ha usado este lenguaje para construir la consulta que selecciona toda la información relativa a la búsqueda realizada y devuelve los datos del paciente.
MySQL Workbench es una herramienta visual para la gestión de las bases de datos creada por la empresa Sun Microsystems. Gracias a ella, se ha logrado importar la base de datos de los HCE de los pacientes.
3.6. WAMPSERVER Wamp es un paquete de servidores web para el sistema operativo Windows, que permite instalar un único paquete con un servidor web Apache, un gestor de base de datos MySQL y un lenguaje de programación PHP o Perl para poder ejecutar en local cualquier página web que se desarrolle.
CAPITULO 3. TECNOLOGÍAS 3.7. JAVASCRIPT
17
Se ha usado el servidor web WampServer debido a que se ha programado bajo Windows y es un software gratuito, de código abierto y fácil de usar.
Figura 12. WampServer [24]
3.7. JAVASCRIPT JavaScript es un lenguaje de programación, desarrollado por Sun Microsystems en 1995, que surgió por la necesidad de ampliar las posibilidades de HTML. El objetivo fue añadir interactividad, efectos visuales, alertas, animaciones y dinamismo a las páginas web HTML.
JavaScript funciona en el lado del cliente, pues son los navegadores quienes interpretan el código JavaScript integrado en las páginas web; a diferencia de PHP, que funciona en el lado del servidor. Al ser interpretado directamente por el navegador, no es necesaria la compilación del código, por lo que no hay que confundirlo con el lenguaje Java, que si debe ser compilado; pues son dos lenguajes completamente distintos en cuanto a concepto y diseño.
Existen dos formas de usar JavaScript en documentos HTML. La primera es embeberlo
directamente en el documento HTML mediante un script <script type =
"text/javascript">…</script> y la segunda es definir un archivo de texto externo con extensión .js e incluir dicho archivo en el ‘head’ del documento HTML mediante el script
<script type="text/javascript" src="./archivoJavaScript.js" ></script>. Se recomienda separar el código HTML de JavaScript, PHP, CSS... en otro archivo externo aligerándose el documento HTML.
CAPITULO 3. TECNOLOGÍAS 3.9. AJAX
18
3.8. JQUERY Los desarrolladores web siempre están buscando otras opciones para simplificar el código. Gracias a ello aparecieron las librerías JavaScript y entre ellas la más usada es jQuery, debido a su facilidad de uso y su gran potencia.
jQuery fue creada en el año 2006 para simplificar la manera de interactuar con HTML, DOM, JavaScript y AJAX. Es decir, es una librería la cual recoge las acciones más utilizadas de JavaScript reduciendo las líneas de código y el tiempo. No en vano, su filosofía es “escribe menos, haz más”.
En este trabajo ha sido importante el uso de jQuery ya que ha aportado sencillez en la implementación de las interacciones con AJAX, sin tener que preocuparse de los detalles complejos de la programación.
3.9. AJAX El término AJAX (Asynchronous JavaScript And XML) se presentó por primera vez en un artículo llamado “Ajax: A new approach to web applications” [25] publicado por James Garret en el año 2005.
AJAX no es una tecnología, sino la unión de varias tecnologías que juntas pueden lograr cosas realmente impresionantes como GoogleMaps, Gmail, Youtube, Facebook, Flickr… Las tecnologías que lo forman son:
XHTML y CSS, para el diseño.
DOM, para interactuar y mostrar dinámicamente la información.
XML, XSLT y JSON, para intercambiar datos solicitados al servidor.
XMLHttpRequest, para el intercambio asíncrono de datos con el servidor web.
JavaScript, para unir todas las demás tecnologías.
En una web tradicional, el usuario solicita una página web completa o parcial al servidor mediante una acción como pinchar un enlace o un botón submit de un formulario, seleccionar un
CAPITULO 3. TECNOLOGÍAS 3.9. AJAX
19
valor de una lista, etc. El servidor recibe la petición, procesa la respuesta y envía la nueva página HTML al navegador del usuario. Esta técnica tradicional tiene como resultado una pérdida de tiempo para el usuario pues tiene que esperar a que llegue la petición al servidor, a que el servidor la procese, a que el servidor envíe la respuesta y a que se recargue la página.
En una web con AJAX, se evita recargar constantemente la página si se cambia el contenido de ella, pues el intercambio de datos entre el cliente y el servidor se ejecuta en segundo plano, sin que el usuario perciba estas demoras. Esto es posible gracias a una capa intermedia de AJAX entre el usuario y el servidor, y JavaScript.
A continuación, se muestra una imagen que compara ambos modelos de aplicación web.
Figura 13. Comparación gráfica del modelo tradicional de aplicación web y del modelo propuesto por AJAX (imagen original de Adaptive Path)
La diferencia más notable en el modelo con AJAX es que las peticiones HTTP al servidor son reemplazadas por peticiones JavaScript que se efectúan al elemento de la capa de AJAX. Las peticiones más simples no requieren intervención del servidor, por lo que la respuesta es inmediata. Si la petición requiere una respuesta del servidor, dicha petición se realiza de manera asíncrona mediante AJAX, sin demora del usuario.
CAPITULO 3. TECNOLOGÍAS 3.10. JSON
20
3.10. JSON JSON (JavaScript Object Notation) es un formato de texto ligero y rápido para el intercambio de datos que se usa para almacenar y enviar información, independientemente del lenguaje de programación usado. Es decir, los servicios que comparten datos mediante JSON, no necesitan el mismo lenguaje de programación; por ejemplo, el cliente puede usar JAVA y el servidor PHP, ya que cada lenguaje tiene su propia librería para codificar y decodificar cadenas de JSON. Está basado en un subconjunto de la tercera edición del estándar ECMA, del año 1999, en el que está basado JavaScript. JSON se usa frecuentemente como alternativa a XML en AJAX.
La sintaxis de JSON está constituida por una colección de pares nombre/valor (objeto literal) y/o una lista ordenada de valores (array literal).
Ejemplo de cómo definir una colección de pares atributo/valor:
{
"nombre":"maria",
"apellido":"diez",
"edad":24
}
Ejemplo de cómo crear un array literal:
["maria","diez",24]
Y combinando las dos estructuras se puede crear el siguiente dato JSON:
{
"nombre":"maria",
"apellido":"diez",
"edad":24,
"estudios":["primarios","secundarios"]
"direccion":{ "calle":"Ave. de Madrid", "numero":"16", "pais":"España" }
}
CAPITULO 3. TECNOLOGÍAS 3.12. DATATABLES
21
3.11. JQUERY HIGHLIGHT PLUGIN jQuery Highlight plugin es un framework basado en JavaScript, creado por Bartek Szopka, para resaltar texto en una página web. Lo primero que hay que hacer es descargárselo de la web [6] y enlazarlo al documento en el que se está trabajando.
Para hacer el resaltado tan solo hay que añadir la función highlight() al elemento que se desea resaltar. También se puede modificar el estilo CSS para el resaltado. Por ejemplo, si se quieren resaltar la palabra “HTML” del cuerpo de una página web tan solo bastaría con escribir
$("body").highlight("HTML");
O, por el contrario, si se quiere quitar el resaltado habría que escribir
$("body").unhighlight("HTML");
Gracias a este plugin, he simplificado la programación de como resaltar una palabra ya que sino debería haber diseñado una función compleja.
3.12. DATATABLES DataTables es un plugin para jQuery que permite dar dinamismo e interacción y cambiar la apariencia a las tablas de manera sencilla. Tan solo hay que añadir un script en lenguaje JavaScript llamando al plugin para obtener las funciones deseadas de DataTables. Con este plugin se pueden realizar las siguientes acciones:
Listar los resultados. Buscar palabras clave. Paginar resultados. Ordenar por campos. Filtrar datos. Obtener datos de forma dinámica.
CAPITULO 4. IMPLEMENTACIÓN 4.1. PROTOTIPO DE BAJA FIDELIDAD
22
CAPÍTULO 4.
SOLUCIÓN En este capítulo se detallará cómo se ha desarrollado una metodología para poder diseñar la interfaz web de forma que sea útil para los profesionales de la salud.
En primer lugar, describimos lo que se entiende por una interfaz web. Se denomina interfaz web al conjunto de elementos de identificación, navegación, contenidos, acción… del sitio web que permiten al usuario realizar acciones sobre dicha página que está visitando. Un buen diseño deberá ser comprensible, simple, fácil de usar, amigable, claro, intuitivo, rápido ante las respuestas, eficaz, funcional, consistente y de fácil aprendizaje para el usuario. Estas “pautas” se han intentado llevar a cabo, en la máxima medida, en este trabajo.
4.1. PROTOTIPO DE BAJA FIDELIDAD Antes de ponerse a programar en HTML, hay que saber cuáles son las necesidades y objetivos de los usuarios para así definir los elementos importantes que debe tener la interfaz, cómo va a estructurarse el contenido, etc. Para ello, se hizo un prototipo de baja fidelidad en papel, que posteriormente se diseñó con la herramienta online Wireframe.
A continuación, se muestra el prototipo de baja fidelidad que se diseñó para estudiar la estructura del contenido y la interacción de la web, teniendo en cuenta la posible poca experiencia del futuro usuario con páginas web. Cabe destacar que un prototipo es un boceto, no es el aspecto final de la página web; por eso a lo largo de todo el desarrollo la interfaz ha sufrido varias modificaciones, de ahí a que la siguiente figura no sea igual a la versión final de la interfaz.
CAPITULO 4. IMPLEMENTACIÓN 4.2. MAQUETACIÓN Y ESTILO
23
Figura 14. Prototipo de baja fidelidad de la interfaz web
El prototipo de la imagen tiene como elemento principal una barra de búsqueda simple donde se puede introducir en lenguaje natural los términos a consultar y, si se desea, añadir filtros como secciones (motivo ingreso, antecedentes, tratamiento…), género, edad y servicio. Esta consulta devuelve una tabla con los datos de cada paciente. Si se desea ampliar el informe del paciente, se mostraría al lado derecho de la tabla, resaltando en amarillo los términos que se han buscado, así como imágenes asociadas, etc.
4.2. MAQUETACIÓN Y ESTILO Maquetar o estructurar una página web consiste en organizar su contenido para que cada elemento aparezca en el lugar y con el formato deseado. La estructura se organiza con HTML y el formato o estilo con CSS.
4.2.1. ESTRUCTURA
Para crear la estructura hay que utilizar la plantilla común a todos los documentos HTML.
CAPITULO 4. IMPLEMENTACIÓN 4.2. MAQUETACIÓN Y ESTILO
24
4.2.1.1. <HEAD>
La etiqueta <head> es la cabecera donde se indican metadatos, es decir, información sobre el propio documento HTML. Los metadatos que se han incluido son:
El título de la pestaña en el navegador:
<title>HCE</title>
El contenido de la página que será HTML y la codificación UTF-8 con la que el navegador interpretará la página:
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
Enlaces a otros documentos o frameworks, como por ejemplo:
<link rel="stylesheet" type="text/css"
href="./stylesheet.css"/>
donde ‘rel’ indica el tipo de relación que guarda con el documento al que enlazamos (stylesheet=hoja de estilos CSS); ‘type’ el tipo de documento (texto css) y ‘href’ la ruta al documento.
Scripts para enlazar archivos JavaScript:
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.mi
n.js"></script>
donde ‘type’ indica que es un texto en lenguaje JavaScript; ‘charset’ el tipo de codificación; y ‘src’ la ruta para poder enlazarlo a un fichero externo.
CAPITULO 4. IMPLEMENTACIÓN 4.2. MAQUETACIÓN Y ESTILO
25
Figura 15. Cabecera de la interfaz
4.2.1.2. <BODY>
La etiqueta <body> es el cuerpo del documento donde se escribirá todo el código que se quiera mostrar por pantalla.
Todo el contenido de la página se ha incluido dentro de un ‘div’ aplicándole la clase ‘container-fluid’. Dentro de este gran contenedor se ha definido un ‘div’ de clase ‘row’, para poder crear dos columnas dentro del sistema de grids. La primera columna es un ‘div’ de col-md-7 que contendrá a su vez dos ‘row’; una para el formulario y otra para mostrar la tabla de los resultados. La segunda columna es otro ‘div’ de col-md-5 donde se mostrará la ampliación del texto del informe. Cabe destacar que la suma de ambas columnas tiene que ser 12, y no se puede exceder porque se descuadraría el sistema de grids. A continuación, se muestra una figura ilustrativa de todos los elementos de la interfaz.
CAPITULO 4. IMPLEMENTACIÓN 4.2. MAQUETACIÓN Y ESTILO
26
Figura 16. Estructura jerárquica de los elementos de la interfaz
Esta estructura jerárquica del código mediante etiquetas para albergar todo el contenido y las distintas secciones de la página mediante Boostrap se puede observar en la siguiente figura:
Figura 17. Estructura jerárquica del código de la interfaz
CAPITULO 4. IMPLEMENTACIÓN 4.2. MAQUETACIÓN Y ESTILO
27
4.2.2. ESTILO
Una vez creada la estructura se le añade el estilo individualmente o en grupo con CSS.
La estructura de cualquier elemento o bloque tiene los siguientes componentes:
Contenido: es el texto o la imagen. Border o borde: dibuja un borde alrededor del contenido. Padding o relleno: es el espacio entre el borde y el contenido, los “márgenes interiores”. Margin o margen: es la distancia de separación que se va a dejar entre el borde y la parte
exterior del elemento de la capa. Son como los “márgenes de toda la vida” en donde no se puede escribir nada o los “márgenes exteriores”.
Figura 18. Estructura de bloque en CSS
A continuación, se muestra un ejemplo de cómo funciona el borde, relleno y margen en un ‘div’ con el texto ‘MARIA’.
Figura 19. Ejemplo sin nada, con borde, relleno y margen en CSS
En un primer lugar, se creó un archivo externo con extensión .css para definir los estilos. Este archivo se enlazó con el documento donde reside el código HTML al que hará referencia. Por ejemplo, al ‘div’ del contenedor con identificador contenedor se le ha dado el siguiente formato:
CAPITULO 4. IMPLEMENTACIÓN 4.3. CONEXIÓN
28
#contenedor{
margin: 20px 20px 10px 20px;
}
donde la propiedad margin establece los márgenes del elemento contenedor. El primero es el margen superior, el segundo es el margen derecho, el tercero es el margen inferior y el cuarto es el margen izquierdo. Está medido en ‘px’ que significa pixeles, para que se adapte dependiendo de la pantalla del usuario.
A parte de esta propiedad, con CSS se puede cambiar el tipo de letra, el color de fondo, el color de la letra, la alineación, la altura, el ancho, agregar imágenes, ocultar elementos y un largo sin fin. Por ejemplo, todo el cuerpo de la interfaz tiene un color de fondo y varios tipos de letra, por si el navegador no encuentra alguna de ellas:
body {
background-color: #F0F8FF;
font-family: Tahoma,Verdana,Times,sans-serif;
}
4.3. CONEXIÓN Una vez realizada la estructura y el estilo de la interfaz, el siguiente paso a realizar es programar la conexión con la base de datos cuando se hace una búsqueda de un HCE.
Ajax, jQuery, PHP y JSON es la combinación responsable de que la conexión funcione perfectamente. Ajax permite a la interfaz web actualizarse de forma dinámica sin que tenga que recargarse completamente; JavaScript se encarga de comunicarse con el servidor enviando y recibiendo datos desde la página web; JSON es el formato de intercambio de datos entre la página web y el servidor.
El usuario al hacer ‘click’ en el botón ‘Buscar’ del formulario está enviando esos datos del formulario mediante AJAX a la base de datos con el método POST. Se ha escogido el método POST porque la información que es enviada por POST va en el cuerpo de la solicitud HTTP y no en la URL, por lo que es más seguro.
CAPITULO 4. IMPLEMENTACIÓN 4.3. CONEXIÓN
29
A continuación, mediante PHP se crea la conexión al host y a la base de datos. Si es correcta, se construye la query procesando los datos del formulario y se ejecuta la query en la base de datos. Los resultados son guardados en un array de pacientes. Este array de tipo paciente guarda en cada posición un paciente, y dicho paciente tiene como atributos: el identificador de paciente, la fecha de nacimiento, el género y sus informes asociados. Este objeto de tipo paciente es así:
[Paciente1, Paciente2, Paciente3, …]. El array es devuelto en formato JSON mediante la función ‘json_encode’ y se plasma en la tabla teniendo en cuenta que cada fila de la tabla es un paciente distinto y dichas filas se amplían o contraen para poder ver todos los informes asociados a dicho paciente.
Este array generado por JSON tiene la siguiente estructura:
{Paciente1: {Atributo1: ----, Atributo2: ----,
Atributo3: ----, Atributo4: ----},
Paciente2: {Atributo1: ----, Atributo2: ----,
Atributo3: ----, Atributo4: ----},
… }
La tabla gracias al framework de Datatable ha sido posible estructurarla y darle el formato y estilo deseado. Por ejemplo, te permite decidir cuantas entradas mostrar en la lista cuando se hace paginación y el número por defecto; cambiar el idioma empleado; calcular automáticamente el ancho necesario para cada columna; ajustar el ancho de la tabla, eliminando columnas si es necesario, dependiendo del dispositivo en donde se vea la tabla; añadir una barra de búsqueda para la tabla y gracias al HIGHLIGHT plugin descargado resaltar en la tabla las palabras que se busquen; y, por último, opción que ha sido de gran utilidad, establecer las columnas de la tabla y los datos de las columnas si los identificadores coinciden con los de la respuesta AJAX y también ordenar las columnas y ocultar una columna.
La tabla consta de cinco columnas: la primera sirve para ampliar/ocultar el despegable de los informes mediante una función de JavaScript, la segunda es el identificador del paciente, la tercera es la fecha de nacimiento del paciente, la cuarta es el género del paciente y la última columna, que está oculta, es la variable “records”. Esta variable es la tabla HTML que engloba los informes asociados a dicho paciente. Es decir, es una tabla con cinco columnas: el identificador del informe, la sección a la que pertenece, la edad del paciente, la fecha del informe
CAPITULO 4. IMPLEMENTACIÓN 4.4. SCRIPTS
30
y el texto completo del informe. Esta tabla es la que se amplia y oculta de la fila del paciente. A continuación, se muestra la tabla para una mejor comprensión:
Figura 20. Tabla de los resultados de los pacientes e informes
4.4. SCRIPTS Gracias al lenguaje JavaScript se ha programado una función para poder mostrar y ocultar las opciones avanzadas de la búsqueda. Las opciones avanzadas se engloban en un ‘div’ que por defecto está oculto (pues muchas veces no es necesario hacer una búsqueda tan restrictiva), y cuando la función es llamada porque se ha hecho ‘click’ en el enlace ‘Opciones avanzadas’ comprueba si el ‘div’ está oculto para mostrarlo o si está visible para ocultarlo.
CAPITULO 4. IMPLEMENTACIÓN 4.4. SCRIPTS
31
<script type="text/javascript">
function muestraOculta(div) {
if(document.getElementById(div).style.display == '') {
document.getElementById(div).style.display = 'none';
} else {
document.getElementById(div).style.display = '';
}
}
</script>
Por otro lado, cuando se muestra en la tabla la columna del texto del informe, tan solo se ven un par de líneas y para poder visualizar todo el texto, hay que hacer ‘click’ en esa columna y automáticamente se muestra todo el texto en un ‘div’. También se ha añadido la función explicada anteriormente de mostrar/ocultar un ‘div’, en este caso el ‘div’ que muestra el detalle del texto. El código empleado es el siguiente:
$("#columnaTexto").click(function() {
$("#detalle-contenido").html($(this).html());
muestraOculta("detalle");
});
El último script que se va a detallar es como resaltar las palabras de los informes que se introducen en la barra de búsqueda. Se obtiene el valor del identificador ‘BuscarTerminos’ que guarda las palabras que se han escrito en el cuadro de texto de la barra de búsqueda; se divide el string con comas y se guarda en una variable. Para cada palabra de ese string, se elimina el espacio en blanco y se resalta en el ‘div’ del detalle del informe.
var buscterm = $("#BuscarTerminos").val().split(",");
$.each( buscterm , function(index,value){
var buscterm1 = $.trim(value);
$("#detalle-contenido").highlight(buscterm1);
});
CAPITULO 4. IMPLEMENTACIÓN 4.5. EJEMPLOS DE PANTALLAS
32
4.5. EJEMPLOS DE PANTALLAS A continuación, se presenta en capturas de pantalla el diseño de la interfaz con distintas búsquedas realizadas en el navegador Google Chrome.
Cuando se accede a la página por primera vez, nos encontramos con la barra de búsqueda, las opciones avanzadas y el botón de buscar.
Figura 21. Página inicial
Se pueden desplegar las opciones avanzadas y la página quedaría de la siguiente manera:
Figura 22. Página inicial con opciones avanzadas desplegado
CAPITULO 4. IMPLEMENTACIÓN 4.5. EJEMPLOS DE PANTALLAS
33
Si se desea hacer una búsqueda de los pacientes que hayan sufrido un infarto, se escribiría en la barra de búsqueda ‘infarto’ y los resultados serían los siguientes:
Figura 23. Resultados de búsqueda ‘infarto’
Se pueden ampliar los datos del paciente pinchando en el signo y ver los informes relacionados a ese paciente que contienen la palabra ‘infarto’.
Figura 24. Resultados de búsqueda ‘infarto’ desplegando los informes
CAPITULO 4. IMPLEMENTACIÓN 4.5. EJEMPLOS DE PANTALLAS
34
Se puede leer el informe completo pinchando sobre él y ver resaltadas las palabras que se han buscado:
Figura 25. Informe de la búsqueda como antecedentes ‘infarto’ y como tratamiento ‘clopidogrel’
Si a la anterior búsqueda se le añade como tratamiento ‘clopidogrel’, solo un paciente cumple estas características, en vez de dos como en el caso anterior:
Figura 26. Resultados de búsqueda ‘infarto’ y como tratamiento ‘clopidogrel’
CAPITULO 4. IMPLEMENTACIÓN 4.6. BUENAS PRÁCTICAS
35
Y si se le añade la opción ‘antecedentes’, ese mismo paciente sigue cumpliendo las características, pues como antecedentes sufrió un infarto y como tratamiento se le administró el medicamento ‘clopidogrel’:
Figura 27. Resultados de búsqueda con antecedentes ‘infarto’ y tratamiento ‘clopidogrel’
4.6. BUENAS PRÁCTICAS En esta sección se detallan las buenas practicas extraídas del desarrollo de este trabajo fin de grado:
Las más básicas son las siguientes, independientemente del lenguaje en el que se programe:
Dar una estructura coherente al código. Hay que acostumbrarse a estructurar el código en distintos componentes.
Sangrar el código y usar espacios en blanco para hacer lo más legible posible el código y así ayudar en un futuro a otra persona a modificar o reutilizar el código de manera fácil.
Comentar el código. Esto contribuirá a hacerlo más inteligible y por tanto a incrementar su mantenibilidad a lo largo del tiempo.
Disponer del manual oficial del lenguaje en el que se esté programando.
CAPITULO 4. IMPLEMENTACIÓN 4.6. BUENAS PRÁCTICAS
36
Las páginas web lentas son un problema. La usabilidad decrementa hasta a 0 pese a todos los esfuerzos de diseño y estructura si la velocidad de carga de la página web es lenta. Esto es un aspecto importante, por lo que se señalan algunos consejos para reducir y mejorar el tiempo de carga.
Usar ficheros externos para CSS y scripts. Así se consigue tener un código HTML más claro, a la vez que se consigue que el fichero sea cacheado y que el tiempo de la carga de la web sea más rápida.
Enlazar los ficheros CSS externos al principio del documento en el ‘head’. Pues los navegadores no cargan la página hasta haber obtenido las hojas de estilos.
Enlazar los ficheros JavaScript externos al final del documento, en el ‘body’ o el cuerpo. Si no se puede evitar embeber código en el HTML, poner el script al final del documento.
Los navegadores empiezan a leer el código de arriba abajo e irá visualizando la página y cargando los elementos mientras se descargan los scripts JavaScript, haciendo que la página se cargue ligeramente más rápido.
Usar la función ‘echo’ en vez de ‘print’, pues es sensiblemente más rápida que ‘print’. Emplear comillas simples en vez de comillas dobles, pues PHP analiza el contenido de las
comillas dobles en búsqueda de variables que deban ser interpretadas, suponiendo un tiempo de ejecución y consiguientemente de carga mayor.
No aplicar la técnica ‘display:none’ a un elemento para que se oculte. Aunque no se visualice, el navegador ha descargado esa parte del código, haciendo que el tiempo de carga sea el mismo y no reducirlo.
CAPITULO 5. PRUEBAS 5.1. PRUEBAS UNITARIAS
37
CAPÍTULO 5.
PRUEBAS Este capítulo se centra en cómo se ha validado y verificado el correcto funcionamiento de la interfaz web. No obstante, es un proceso que se hace continuamente a lo largo de todo el desarrollo del código, porque la mayoría de las veces si algo no funciona no te deja continuar ni saltar al siguiente paso sin haber solucionado el error de programación.
5.1. PRUEBAS UNITARIAS Una prueba unitaria es una forma de comprobar el correcto funcionamiento de un módulo de código por separado. Así cada módulo puede funcionar por separado sin depender de otros. La idea es ir ejecutando casos de pruebas a cada módulo de manera que cada caso sea independiente del resto. Una ventaja de realizar pruebas unitarias es que los errores están acotados y son más fáciles de localizar.
La primera prueba unitaria que se realizó fue sobre la barra de búsqueda. Había que comprobar que cuando se introdujera texto en la barra de búsqueda y se pulsara sobre el botón ‘Buscar’, la acción del botón se ejecutara correctamente produciendo la conexión con la base de datos.
Con la conexión establecida, se podía hacer otra prueba: comprobar que lo devuelto por esa búsqueda era lo mismo que lo devuelto realizando la búsqueda directamente en la base de datos con MySqlWorkbench.
Una vez comprobado que la barra de búsqueda hacía lo esperado, se revisó que cada checkbox del formulario y campos de tipo numérico funcionaban uno a uno por separado y en conjunto marcando más de un checkbox con o sin el campo de tipo numérico rellenado.
CAPITULO 5. PRUEBAS 5.3. VALIDACIÓN
38
Respecto a la tabla, se revisó que en cada columna se mostraran los datos que deberían aparecer y no intercambiados con otras columnas o fuera de su sitio; así como que, al pulsar sobre el signo
de la tabla, inmediatamente apareciera el signo , con sus respectivas acciones de desplegar y contraer la tabla.
En cuanto al correcto funcionamiento de AJAX, se verificó que la página no se recargaba cuando se pulsaba sobre el botón ‘Buscar’ del formulario.
5.2. PRUEBAS DE INTEGRACIÓN Una vez realizadas las pruebas unitarias, se prosiguió con las pruebas de integración. Dichas pruebas consisten en combinar cada módulo individual y probar que funcionan juntos. Es decir, verificar que la comunicación entre los componentes del mismo sistema se realice satisfactoriamente.
Por ejemplo, se comprobó que al pulsar sobre el botón ‘Buscar’ aparezca la tabla de los resultados de los pacientes en la página.
También se verificó que cuando se hace ‘click’ en la columna de la tabla donde se muestra el resumen de un informe, aparezca el ‘div’ con el texto completo del informe, y si se hace de nuevo ‘click’, desaparece el ‘div’.
Otra prueba de integración realizada fue que, si se hace una búsqueda y se abre el ‘div’ para ampliar el texto del informe, y se realiza otra búsqueda de nuevo, que ese texto desaparezca cuando se pulse el botón ‘Buscar’ pues podría causar confusión por no saber a qué informe pertenece.
5.3. VALIDACIÓN Se han llevado a cabo dos tipos de validación, validación del código y validación del sistema.
5.3.1. VALIDACIÓN DE CÓDIGO
HTML, como se describió anteriormente, no es un lenguaje de programación, sino un lenguaje de representación y comunicación de información. Por ello, no se compila, sino que es
CAPITULO 5. PRUEBAS 5.3. VALIDACIÓN
39
interpretado por unos programas especiales, los navegadores. El ser interpretado y no compilado, hace que, si no se siguen unos estándares, cada navegador interprete el código de una manera mostrando la página diferente; o dependiendo del dispositivo (pc, tablet, smartphone…) en el que se visualice la página se haga de manera distinta.
Por lo tanto, se recomienda validar el código para comprobar que el documento cumple con las normas y restricciones del lenguaje. En este caso, el estándar que unificar el desarrollo y la visualización del código HTML y CSS es el estándar universal World Wide Web Consortium (W3C).
La herramienta que se ha empleado para validar el código HTML y CSS de la interfaz web ha sido la propia del W3C [26]. Gracias a ella, se han corregido errores, que visualmente no eran visibles, pero para efectos de interpretación del navegador podrían haber sido fatales. Por ejemplo, el valor del atributo para especificar el tipo de codificación empleada, utf8, no era una etiqueta válida, pues el correcto es utf-8. Por otro lado, algunos atributos para dar estilo estaban obsoletos y se debían usar en el archivo CSS y no en el código HTML.
Figura 28. Validación código HTML de la interfaz según W3C
Por otra parte, se ha validado el código en lenguaje PHP comprobando su sintaxis y errores gracias a una herramienta online [27].
CAPITULO 5. PRUEBAS 5.3. VALIDACIÓN
40
5.3.2. VALIDACIÓN DEL SISTEMA
La validación del sistema es el proceso de revisión que verifica que el sistema producido cumple los requerimientos y el propósito para el que se destinó.
La validación ha dado respuestas satisfactorias a:
¿La interfaz web cumple las funciones de acuerdo a los requerimientos? ¿El diseño de la interfaz web refleja los objetivos? ¿El código refleja exactamente el diseño? ¿Es un sistema correcto y válido? ¿Es utilizable para los fines propuestos?
Realizadas el conjunto de pruebas y validaciones, se ha obtenido un grado de confianza, porque es difícil tener absoluta garantía, para que la interfaz web sea válida y no contenga errores que puedan estropear el correcto funcionamiento de la interfaz.
CAPITULO 6. CONCLUSIONES Y LÍNEAS FUTURAS
41
CAPÍTULO 6.
CONCLUSIONES Y LÍNEAS FUTURAS Al concluir este trabajo fin de grado se cumplió con el principal objetivo del trabajo, diseñar e implementar una interfaz web que permitiera realizar consultas sobre un sistema que analiza las HCE.
En cuanto al desarrollo, se han seguido las pautas básicas y las tecnologías actuales de programación de una interfaz web. Primero, se organizó y estructuró su contenido para que cada elemento apareciese en el lugar correcto mediante HTML y BOOTSTRAP, para después dar un formato y estilo a la página con CSS. A continuación, se programó con el lenguaje PHP la conexión con la base de datos y con el lenguaje SQL la construcción de la consulta que selecciona toda la información en la base de datos relativa a la búsqueda realizada y devuelve los datos del paciente. Para que esta conexión funcione perfectamente, los responsables son la combinación de JavaScript, Json y Ajax; JavaScript porque es el encargado de comunicarse con el servidor enviando y recibiendo datos desde la página web; Json porque es el formato de intercambio de datos entre la página web y el servidor; y Ajax porque permite a la interfaz web actualizarse de forma dinámica sin que tenga que recargarse completamente. Gracias a los diversos plugins existentes, se le pudo dar un formato distinto a la tabla y añadirle funciones como una barra de búsqueda, paginación e idioma entre otros con Datatable; o resaltar en la página las palabras que se han buscado con Highlight plugin.
En cuanto al diseño, se ha logrado una interfaz fácil en su uso y aprendizaje, pues es una de las características más importantes de un buen diseño, ya que según un estudio el 68% de los usuarios que abandonan una página web es porque está mal diseñada [28].
La siguiente célebre frase de Steve Jobs: “El diseño no es solo la apariencia, el diseño es cómo funciona” resume que no solo hay que darle importancia al diseño de una interfaz web sino también al correcto funcionamiento de la misma.
Como línea futura se plantea mejorar y ampliar las funcionalidades de la interfaz web, como hacer consultas complejas y generar gráficas simples y complejas. Las gráficas simples según la
CAPITULO 6. CONCLUSIONES Y LÍNEAS FUTURAS
42
distribución de la edad, del género, de la fecha de los informes... mientras que las gráficas complejas mostrarían las enfermedades o medicamentos relacionadas a un síntoma, o la evolución de una enfermedad, o la distribución de un tratamiento. Por ejemplo, si el profesional de la salud ha realizado una búsqueda de “pierna rota” mostrar gráficas para ver quien ha llevado escayola, o ver si algún paciente tiene artrosis, pues puede existir una relación directa entre artrosis y tener una pierna rota.
BIBLIOGRAFÍA
43
BIBLIOGRAFÍA
[1] Clinic Cloud, https://clinic-cloud.com/historia-clinica-electronica-hce-espana/
[2] Periodico 20minutos, http://www.20minutos.es/noticia/2707385/0/historia-clinica-electronica-poblacion-asturiana-alcanza-dos-millones-consultas-al-ano/
[3] Himms, http://himss.eu/emram-stages
[4] Himms, Emram http://www.himss.eu/sites/default/files/emram/HIMSS_EU_EMRAM_Score_Distribution_Q1_2016.pdf
[5] Bartaz, http://bartaz.github.io/sandbox.js/jquery.highlight.html
[6] Stacks, http://www.stacks.es/software-atencion-primaria
[7] AP-Madrid, http://www.socinfo.es/contenido/seminarios/1415sanidad7/SermasHistoria2.pdf
[8] HCE en Comunidad de Madrid, http://www.gruposenda.es/doc/IVForoSENDA/Zaida_Sampedro-SERMAS.pdf
[9] Siemens, Selene Clinic, http://w5.siemens.com/spain/web/es/healthcare/soluciones_it/pages/selene_clinic.aspx
[10] Selene Mobility, http://www.madrid.org/cs/Satellite?cid=1354241242933&language=es&pageid=1142403638055&pagename=HospitalInfantaLeonor%2FCM_Actualidad_FA%2FHVLL_actualidad
[11] Selene Mobility, http://www.socinfo.es/contenido/seminarios/1415sanidad7/SeleneMobility.pdf
[12] HP, http://www8.hp.com/uk/en/industries/public-sector.html?compURI=1562004#.VxgJ7NSLR1v
BIBLIOGRAFÍA
44
[13] Philips, ICIP, http://incenter.medical.philips.com/doclib/enc/fetch/2000/4504/577242/577243/577247/582646/583147/IntelliVue_Clinical_Information_Portfolio_brochure.pdf%3fnodeid%3d2187397%26vernum%3d-2
[14] Cerner, http://www.cerner.com/soluciones/Sistemas_de_Salud_de_Hospitales/Historia_Clinica_Electronica/
[15] Accenture, Horus, https://www.accenture.com/es-es/success-electronic-health-records-madrid.aspx
[16] Premio Horus, http://isanidad.com/32259/premio-a-la-comunidad-de-madrid-por-la-plataforma-horus-que-auna-datos-clinicos-de-los-pacientes-y-se-pueden-consultar-en-cualquier-lugar/
[17] 3M, Health Information Systems, http://solutions.3m.com/wps/portal/3M/en_US/Health-Information-Systems/HIS/Products-and-Services/Products-List-A-Z/Health-Record-Management-Software/
[18] G3, HealthCare, http://www3.gehealthcare.es/es-es/productos/categorias/healthcare_it/enterprise_and_regional_imaging_solutions/centricity_clinical_archive
[19] Hygeia, http://www.madrid.org/cs/Satellite?cid=1354402299902&language=es&pageid=1159444389315&pagename=PortalSalud%2FCM_Actualidad_FA%2FPTSA_pintarActualidad&vest=1159444389315
[20] Salus, http://www.softwaresalus.com/
[21] Dricloud, http://dricloud.com/
[22] e-CAP, http://novaweb.idiapjordigol.org/upload/file/web_SIDIAP_FINAL_3.pdf
BIBLIOGRAFÍA
45
[23] Imagen comunicación cliente-servidor con intérprete PHP, http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=501:comunicacion-cliente-servidor-sin-php-y-con-php-interprete-php-y-gestor-de-bases-de-datos-cu00804b&catid=70:tutorial-basico-programador-web-php-desde-cero&Itemid=193
[24] Imagen WampServer, http://recursostic.educacion.es/observatorio/web/fr/software/servidores/800-monografico-servidores-wamp
[25] Artículo sobre AJAX, http://adaptivepath.org/ideas/ajax-new-approach-web-applications/
[26] Herramienta online de W3C para validar código HTML, https://validator.w3.org/
[27] Herramienta online para validar código PHP, https://es.piliapp.com/php-syntax-check/
[28] Artículo sobre porqué usuarios abandonan webs, http://www.homestead.com/blog/06/2013/ux-101-what-user-experience-infographic#.V0hxKDWLR1v
Este documento esta firmado porFirmante CN=tfgm.fi.upm.es, OU=CCFI, O=Facultad de Informatica - UPM,
C=ES
Fecha/Hora Mon Jun 06 20:05:03 CEST 2016
Emisor delCertificado
[email protected], CN=CA Facultad deInformatica, O=Facultad de Informatica - UPM, C=ES
Numero de Serie 630
Metodo urn:adobe.com:Adobe.PPKLite:adbe.pkcs7.sha1 (Adobe Signature)