<?xml version="1.0" encoding="ISO-8859-1"?><article xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<front>
<journal-meta>
<journal-id>1684-1859</journal-id>
<journal-title><![CDATA[Revista Cubana de Informática Médica]]></journal-title>
<abbrev-journal-title><![CDATA[RCIM]]></abbrev-journal-title>
<issn>1684-1859</issn>
<publisher>
<publisher-name><![CDATA[Universidad de Ciencias Médicas de La Habana]]></publisher-name>
</publisher>
</journal-meta>
<article-meta>
<article-id>S1684-18592016000100003</article-id>
<title-group>
<article-title xml:lang="es"><![CDATA[Propuesta de arquitectura cliente de la aplicación de interfaz de usuario del sistema xavia ris 2.0]]></article-title>
<article-title xml:lang="en"><![CDATA[Proposal for client architecture for user interface application of systems ris xavia 2.0]]></article-title>
</title-group>
<contrib-group>
<contrib contrib-type="author">
<name>
<surname><![CDATA[Duque García]]></surname>
<given-names><![CDATA[Eddy Yanier]]></given-names>
</name>
<xref ref-type="aff" rid="A01"/>
</contrib>
</contrib-group>
<aff id="A01">
<institution><![CDATA[,Universidad de las Ciencias Informáticas Centro de Informática Médica ]]></institution>
<addr-line><![CDATA[La Habana Boyeros]]></addr-line>
<country>Cuba</country>
</aff>
<pub-date pub-type="pub">
<day>15</day>
<month>06</month>
<year>2016</year>
</pub-date>
<pub-date pub-type="epub">
<day>15</day>
<month>06</month>
<year>2016</year>
</pub-date>
<volume>8</volume>
<numero>1</numero>
<fpage>30</fpage>
<lpage>45</lpage>
<copyright-statement/>
<copyright-year/>
<self-uri xlink:href="http://scielo.sld.cu/scielo.php?script=sci_arttext&amp;pid=S1684-18592016000100003&amp;lng=en&amp;nrm=iso"></self-uri><self-uri xlink:href="http://scielo.sld.cu/scielo.php?script=sci_abstract&amp;pid=S1684-18592016000100003&amp;lng=en&amp;nrm=iso"></self-uri><self-uri xlink:href="http://scielo.sld.cu/scielo.php?script=sci_pdf&amp;pid=S1684-18592016000100003&amp;lng=en&amp;nrm=iso"></self-uri><abstract abstract-type="short" xml:lang="es"><p><![CDATA[El Sistema de Información Radiológica (RIS, por sus siglas en inglés) es el encargado de la gestión de la información del Departamento de Radiología en una Institución Sanitaria, así como la Gestión de los Informes médicos y la creación de listas de trabajo para equipos DICOM compatibles.1 Dicho sistema está concebido como un sistema web por las ventajas de accesibilidad que brinda la Web y el indetenible crecimiento y desarrollo de las tecnologías que la sustentan. La presente investigación tiene como objetivo proponer las tecnologías, herramientas, estructuras y finalmente la arquitectura cliente para la aplicación de Interfaz de Usuario del Sistema XAVIA RIS, acorde a las tendencias actuales del desarrollo Web.]]></p></abstract>
<abstract abstract-type="short" xml:lang="en"><p><![CDATA[Radiological Information System is in charge of information management in the radiology department in a health institution, and the management of medical records and the creation of work lists for equipment DICOM compatible. This system is designed as a web system due to the benefits of accessibility offered by the Web and the unstoppable growth and development of technologies that support it. This research aims to propose technologies, tools, structures and ultimately the client architecture for User Interface Application of the XAVIA RIS System, according to current trends in Web development.]]></p></abstract>
<kwd-group>
<kwd lng="es"><![CDATA[interfaz de usuario]]></kwd>
<kwd lng="es"><![CDATA[radiología]]></kwd>
<kwd lng="es"><![CDATA[tecnologías]]></kwd>
<kwd lng="es"><![CDATA[web]]></kwd>
<kwd lng="es"><![CDATA[arquitectura]]></kwd>
<kwd lng="es"><![CDATA[marco de trabajo]]></kwd>
<kwd lng="en"><![CDATA[user interface]]></kwd>
<kwd lng="en"><![CDATA[radiology]]></kwd>
<kwd lng="en"><![CDATA[technologies]]></kwd>
<kwd lng="en"><![CDATA[web]]></kwd>
<kwd lng="en"><![CDATA[architecture]]></kwd>
<kwd lng="en"><![CDATA[framework]]></kwd>
</kwd-group>
</article-meta>
</front><body><![CDATA[ <p align="right"><font size="2" face="Verdana"><b>ART&Iacute;CULO ORIGINAL</b></font></p>     <p align="right">&nbsp;</p>     <p align="left"><font size="4" face="Verdana"><strong>Propuesta de arquitectura    cliente de la aplicaci&oacute;n de interfaz de usuario del sistema xavia ris    2.0</strong></font></p>     <p align="left">&nbsp;</p>     <p align="left"><font size="2" face="Verdana"> <strong><font size="3">Proposal    for client architecture for user interface application of systems ris xavia    2.0</font></strong></font></p>     <p align="left">&nbsp;</p>     <p align="left">&nbsp;</p>     <p align="left"><font size="2" face="Verdana"><strong>Ing. Eddy Yanier Duque Garc&iacute;a</strong></font></p>     <P><font size="2" face="Verdana">Ingeniero en Ciencias Inform&aacute;ticas, Centro    de Inform&aacute;tica M&eacute;dica, Universidad de las Ciencias Inform&aacute;ticas.    Carretera San Antonio de los Ba&ntilde;os Km 2 &#189;, Boyeros, La Habana, Cuba.    E-mail: <a href="mailto:eyduque@uci.cu">eyduque@uci.cu</a> </font>      <P>&nbsp;     ]]></body>
<body><![CDATA[<P>&nbsp; <hr> <font size="2" face="Verdana"><strong>RESUMEN</strong></font>      <P><font size="2" face="Verdana">El Sistema de Informaci&oacute;n Radiol&oacute;gica    (RIS, por sus siglas en ingl&eacute;s) es el encargado de la gesti&oacute;n    de la informaci&oacute;n del Departamento de Radiolog&iacute;a en una Instituci&oacute;n    Sanitaria, as&iacute; como la Gesti&oacute;n de los Informes m&eacute;dicos    y la creaci&oacute;n de listas de trabajo para equipos DICOM compatibles.<sup><a href="#1">1</a></sup>    Dicho sistema est&aacute; concebido como un sistema web por las ventajas de    accesibilidad que brinda la Web y el indetenible crecimiento y desarrollo de    las tecnolog&iacute;as que la sustentan. </font><font size="2" face="Verdana">La    presente investigaci&oacute;n tiene como objetivo proponer las tecnolog&iacute;as,    herramientas, estructuras y finalmente la arquitectura cliente para la aplicaci&oacute;n    de Interfaz de Usuario del Sistema XAVIA RIS, acorde a las tendencias actuales    del desarrollo Web. </font>      <P><font size="2" face="Verdana"><strong>Palabras clave:</strong> interfaz de    usuario, radiolog&iacute;a, tecnolog&iacute;as, web, arquitectura, marco de    trabajo.</font> <hr> <font size="2" face="Verdana"><strong>ABSTRACT</strong></font>      <P><font size="2" face="Verdana">Radiological Information System is in charge    of information management in the radiology department in a health institution,    and the management of medical records and the creation of work lists for equipment    DICOM compatible. This system is designed as a web system due to the benefits    of accessibility offered by the Web and the unstoppable growth and development    of technologies that support it. </font><font size="2" face="Verdana">This research    aims to propose technologies, tools, structures and ultimately the client architecture    for User Interface Application of the XAVIA RIS System, according to current    trends in Web development. </font>     <P><font size="2" face="Verdana"><strong>Key words:</strong> user interface, radiology,    technologies, web, architecture, framework. </font>  <hr>     <p>&nbsp;</p>     <p>&nbsp;</p>     <p><font size="3" face="Verdana"><strong>INTRODUCCI&Oacute;N</strong> </font></p>     <P><font size="2" face="Verdana">La medicina es uno de los sectores de la sociedad que m&aacute;s    se ha beneficiado con el desarrollo y potenciamiento de la Web, aumentando considerablemente    en las instituciones sanitarias la capacidad de procesamiento de informaci&oacute;n    para la generaci&oacute;n de estad&iacute;sticas y reportes, as&iacute; como    la comunicaci&oacute;n entre los especialistas y profesionales del sector. </font>     <P><font size="2" face="Verdana">El Departamento de Imagenolog&iacute;a, es el encargado de la    realizaci&oacute;n de los estudios m&eacute;dicosimagenol&oacute;gicos en los    cuales se utilizan equipos de gama alta que generan im&aacute;genes del cuerpo    humano de relevancia para la creaci&oacute;n del Diagn&oacute;sticom&eacute;dico.    </font>     ]]></body>
<body><![CDATA[<P><font size="2" face="Verdana">Las Im&aacute;genes M&eacute;dicas obtenidas    son distribuidas y almacenadas a trav&eacute;s de la red Imagenol&oacute;gica    por los Sistemas PACS<sup><a href="#2">2</a></sup> usando el est&aacute;ndar    DICOM,<sup>1</sup> mientras que la informaci&oacute;ndemogr&aacute;fica de los    pacientes, personal m&eacute;dico y listas de trabajo es gestionada por los    Sistemas RIS.<sup>2</sup> </font>      <P><font size="2" face="Verdana">Los sistemas web son aplicaciones inform&aacute;ticas que se    despliegan en servidores Web a las cuales se accede mediante el Protocolo de    Transferencia de Hipertexto (HTTP, por sus siglas en ingl&eacute;s) haciendo    uso de un Navegador Web o cliente Web con soporte para dicho protocolo. </font>     <P><font size="2" face="Verdana">Las aplicaciones de interfaz de usuario (UI)    de los Sistemas Web se desarrollan con tecnolog&iacute;as soportadas por el    cliente Web; algunas de estas tecnolog&iacute;as se encargan de la Presentaci&oacute;n    como por ejemplo: las Hojas de estilos en Cascada y Lenguaje de Marcado de Hipertexto    (CSS y HTML, por sus siglas en ingl&eacute;s respectivamente); mientras que    otras como JavaScript y AJAX<sup><a href="#3">3</a></sup> se encargan de manejar    la interacci&oacute;n de la aplicaci&oacute;n con el usuario, la l&oacute;gica    de negocio cliente y la comunicaci&oacute;n asincr&oacute;nica con &eacute;l    Back-end.<sup><a href="#4">4</a></sup> </font>      <P><font size="2" face="Verdana">El auge y popularidad de la Web ha contribuido    al desarrollo acelerado de las tecnolog&iacute;as clientes que la sustentan;    evidenciadocon el surgimiento de Framework<sup><a href="#5">5</a></sup> JavaScript    que implementan patrones como MVC, MVVM<sup><a href="#6">6</a></sup>; librer&iacute;as    para el soporte modular y la abstracci&oacute;ndel cliente Web o el dispositivo.    </font>      <P><font size="2" face="Verdana">El Sistema XAVIA RIS en su versi&oacute;n 1.0 fue desarrollado    sobre el Framework .NET usando en enfoque de desarrollo ASP .NET Web Forms;    entorno que provee una magn&iacute;fica productividad, administraci&oacute;n    de memoria, manejo de excepciones y todas las fortalezas del Lenguaje de Programaci&oacute;n    Orientado a objetos C#. Sin embargo, este entorno de desarrollo no explota al    m&aacute;ximo las potencialidades de los lenguajes y herramientas nativos del    cliente web, debido a que las p&aacute;ginas son escritas en lenguajes de servidor    que se especializan m&aacute;s en la l&oacute;gica de negocio de la p&aacute;gina    que en la forma en que esta se muestra. </font>     <P><strong><font size="2" face="Verdana">OBJETIVOS</font></strong><font size="2" face="Verdana">    </font>      <P><font size="2" face="Verdana">Proponer las tecnolog&iacute;as, herramientas,    estructuras y finalmente la arquitectura cliente para la aplicaci&oacute;n de    Interfaz de Usuario del Sistema XAVIA RIS, acorde a las tendencias actuales    del desarrollo Web. </font>     <P>&nbsp;     <P><font size="3" face="Verdana"><strong>MATERIALES Y M&Eacute;TODOS</strong>    </font>      <P><font size="2" face="Verdana">Durante el desarrollo de la investigaci&oacute;n    se utilizaron los siguientes m&eacute;todos cient&iacute;ficos: </font>      ]]></body>
<body><![CDATA[<P><font size="2" face="Verdana"><strong>Hist&oacute;rico L&oacute;gico:</strong>    al realizar un an&aacute;lisis cr&iacute;tico valorativo de la informaci&oacute;n    contenida en las fuentes bibliogr&aacute;ficas consultadas, con el objetivo    de conocer cu&aacute;les son las tendencias y c&oacute;mo se ha comportado el    desarrollo de software en torno a la identificaci&oacute;n de n&oacute;dulos    pulmonares solitarios en im&aacute;genes de tomograf&iacute;a de t&oacute;rax.    </font>      <P><font size="2" face="Verdana"><strong>Anal&iacute;tico Sint&eacute;tico:</strong>    para descomponer el problema de la investigaci&oacute;n en elementos concretos    de la soluci&oacute;n. </font>      <P><font size="2" face="Verdana"><strong>Inductivo Deductivo:</strong> teniendo    en cuenta el funcionamiento del proceso de diagn&oacute;stico por im&aacute;genes    m&eacute;dicas se eval&uacute;a la problem&aacute;tica existente, para determinar    aspectos particulares o caracter&iacute;sticos y desarrollar una propuesta de    soluci&oacute;n. </font>      <P><font size="2" face="Verdana"><strong>Experimento:</strong> para realizar la    validaci&oacute;n de los resultados obtenidos se realizaron pruebas de caja    blanca a la aplicaci&oacute;n base obtenida. </font>      <P>    <br>   <font size="2" face="Verdana"><strong>Herramienta y tecnolog&iacute;as inform&aacute;ticas    empleadas</strong> </font>      <P><font size="2" face="Verdana"><strong>C# 5.0:</strong> es un lenguaje de programaci&oacute;n    orientado a objetos y permite a los desarrolladores crear una amplia gama de    aplicaciones que se ejecuten en la plataforma .NET Framework, su sintaxis es    sencilla, f&aacute;cil de utilizar y permite los conceptos de encapsulaci&oacute;n,    herencia y polimorfismo.<sup>3</sup> </font>      <P><font size="2" face="Verdana"><strong>Visual Studio 2013:</strong> es un Entorno    de Desarrollo Integrado (IDE, por sus siglas en ingl&eacute;s), que soporta    varios lenguajes de programaci&oacute;n incluido Visual C#. Incluye herramientas    que simplifican todo el proceso de desarrollo de aplicaciones, de principio    a fin. Permite realizar una administraci&oacute;n del ciclo de vida de las aplicaciones    e incorpora otras pruebas que ayudan a garantizar la calidad del c&oacute;digo    en todo momento.<sup>4</sup> </font>      <P><font size="2" face="Verdana"><strong>.NET Framework 4.5:</strong> es un marco    de trabajo desarrollado por Microsoft que incluye una amplia Librer&iacute;a    de Clases y provee interoperabilidad de lenguajes a trav&eacute;s de varios    lenguajes de programaci&oacute;n. Los programas escritos en .NET se ejecutan    en un ambiente de software manejado, conocido como Entorno de Ejecuci&oacute;n    Manejado (CLR, por sus siglas en ingl&eacute;s) y que constituye una M&aacute;quina    Virtual que provee servicios de seguridad, administraci&oacute;n de memoria    y manejo de excepciones.<sup>5</sup> </font>      <P><font size="2" face="Verdana"><strong>ASP .NET MVC 5:</strong> es un marco    de trabajo para la construcci&oacute;n escalable y basada en est&aacute;ndar    de aplicaciones web, usando patrones de dise&ntilde;o bien establecidos y todas    las caracter&iacute;sticas de ASP .NET y el marco de trabajo .NET.<sup>6</sup> </font>      ]]></body>
<body><![CDATA[<P><font size="2" face="Verdana"><strong>ASP .NET Web API:</strong> es un marco    de trabajo para el desarrollo sencillo de servicios HTTP que incluye un amplio    rango de cliente, incluyendo navegadores y dispositivos m&oacute;viles. Brinda    grandes facilidades para la creaci&oacute;n de aplicaciones RESTFul sobre .NET.<sup>7</sup>    </font>      <P>    <br>   <font size="2" face="Verdana"><strong>XAVIA RIS 1.0</strong> </font>      <P><font size="2" face="Verdana">Est&aacute; desarrollado sobre el Framework ASP .NET 3.5 siguiendo    el enfoque ASP .NET Web Forms. Dicho marco de trabajo est&aacute; dise&ntilde;ado    para lograr una alta productividad haciendo uso de las ventajas de los lenguajes    .NET orientados a objetos y la experiencia en el desarrollo con Windows Forms    para sistemas de escritorio. Los sistemas desarrollados usando este enfoque    generalmente presentan: </font>     <P><font size="2" face="Verdana">- Fuerte acoplamiento entre la Capa de Presentaci&oacute;n    y la Capa de Negocio.    <br>   </font><font size="2" face="Verdana">- Bajo rendimiento del sistema con el uso    del Renderizado Parcial<sup><a href="#7">7</a></sup> y el Mantenimiento de Estado    de la Vista.<sup><a href="#8">8</a></sup>    <br>   </font><font size="2" face="Verdana">- Soporte limitado para plataformas Unix.    <br>   </font><font size="2" face="Verdana">- Incompatibilidad de controles antiguos    en navegadores y dispositivos modernos.    <br>   </font><font size="2" face="Verdana">- Complejo ciclo de vida de aplicaci&oacute;n    que dificulta la integraci&oacute;n con tecnolog&iacute;as clientes de terceros.    <br>   </font><font size="2" face="Verdana">- Esquema poco flexible para exponer y    proveer servicios de datos de Transferencia de Estado Representacional (REST    o RESTFul, por sus siglas en ingl&eacute;s). </font>      ]]></body>
<body><![CDATA[<P><font size="2" face="Verdana"><strong>Aplicaci&oacute;n en un sola P&aacute;gina</strong>    </font>      <P><font size="2" face="Verdana">En las aplicaciones tradicionales, el cliente inicia la comunicaci&oacute;n    con el servidor solicitando una p&aacute;gina. El servidor por su parte procesa    la solicitud y env&iacute;a el HTML de la p&aacute;gina al cliente. En las siguientes    iteraciones con la p&aacute;gina, ej.: el usuario navega a un enlace o somete    un formulario con datos, una nueva solicitud es enviada al servidor, y el flujo    comienza nuevamente: el servidor procesa la solicitud y env&iacute;a la nueva    p&aacute;gina al cliente en respuesta a la nueva acci&oacute;n solicitada. </font>     <P><font size="2" face="Verdana">Se puede definir una Aplicaci&oacute;n en un    sola P&aacute;gina (SPA, por sus siglas en ingl&eacute;s) como una aplicaci&oacute;n    web que se ejecuta en una &uacute;nica p&aacute;gina, logrando as&iacute; una    experiencia de usuario m&aacute;s cercana a una aplicaci&oacute;n de escritorio.<sup>8</sup>    En una SPA el usuario no navega por un engorroso sistema de enlaces tradicionales    si no que, en su lugar, mediante el uso cada vez m&aacute;s extendido de JavaScript,    AJAX, HTML5 o una combinaci&oacute;n de las anteriores, se actualiza lo que    el usuario ve siempre desde la misma p&aacute;gina (sin cambiar de URL ni refrescar    el contenido entero). </font>      <P><font size="2" face="Verdana">En una SPA, la p&aacute;gina es cargada en el    cliente despu&eacute;s de la solicitud inicial, pero las siguientes solicitudes    tienen lugar a trav&eacute;s de solicitudes AJAX, como se muestra en la <a href="/img/revistas/rcim/v8n1/f0103116.jpg">figura    1</a>. Esto significa que el cliente solo tiene que actualizar la porci&oacute;n    de la p&aacute;gina que tiene que ser cambiada; sin necesidad de recargar toda    la p&aacute;gina. El enfoque SPA reduce el tiempo tomado por la aplicaci&oacute;n    en responder a las acciones de los usuarios, lo que resulta en una experiencia    m&aacute;s fluida. </font>      <P>      <P><strong><font size="2" face="Verdana">El patr&oacute;n MVVM</font></strong><font size="2" face="Verdana">    </font>      <P><font size="2" face="Verdana">Este patr&oacute;n intenta brindar una limpia    separaci&oacute;n de responsabilidades entre los controles de la interfaz de    usuario y su l&oacute;gica. Hay tres componentes principales cada uno de los    cuales sirve a un rol distinto y separado. El modelo, la vista y el modelo de    la vista, en la <a href="/img/revistas/rcim/v8n1/f0203116.jpg">figura 2</a>. </font>      <P><font size="2" face="Verdana">Los componentes est&aacute;n desacoplados unos    de otros, permitiendo: </font>      <P><font size="2" face="Verdana">- Los componentes pueden ser intercambiados.    <br>   </font><font size="2" face="Verdana">- La implementaci&oacute;n interna puede    ser cambiada sin que afecte a los dem&aacute;s.    ]]></body>
<body><![CDATA[<br>   </font><font size="2" face="Verdana">- Componentes que trabajan de forma independiente.    <br>   </font><font size="2" face="Verdana">- Pruebas unitarias aisladas. </font>      <P><font size="2" face="Verdana"><strong>Vista</strong> </font>      <P><font size="2" face="Verdana">Es la encargada de definir la estructura, dise&ntilde;o y apariencia    de lo que el usuario ve en la pantalla y no implementa l&oacute;gica de negocio,    solo de presentaci&oacute;n. </font>     <P><font size="2" face="Verdana"><strong>Modelo</strong> </font>      <P><font size="2" face="Verdana">Es una implementaci&oacute;n del modelo de dominio de la aplicaci&oacute;n    que incluye un modelo de datos junto con la l&oacute;gica de negocio y validaci&oacute;n.    </font>     <P><font size="2" face="Verdana"><strong>Modelo de la Vista</strong> </font>      <P><font size="2" face="Verdana">Act&uacute;a como intermediario entre la vista y el modelo,    y es responsable de manejar la l&oacute;gica de la vista. T&iacute;picamente,    interact&uacute;a con el modelo invocando funciones en el modelo de clases y    provee los datos a la vista. Recupera los datos del modelo y los pone a disposici&oacute;n    de la vista, y puede reformatear los datos de alguna manera que haga su manipulaci&oacute;n    m&aacute;s simple a la vista. Tambi&eacute;n provee implementaci&oacute;n de    comandos que un usuario de la aplicaci&oacute;n inicia con su interacci&oacute;n    en la vista. </font>     <P><font size="2" face="Verdana"><strong>Beneficios de MVVM </strong></font>      <P><font size="2" face="Verdana">MVVM permite un gran flujo de trabajo de desarrollador-dise&ntilde;ador,    proporcionando los siguientes beneficios: </font>     ]]></body>
<body><![CDATA[<P><font size="2" face="Verdana">- Durante el proceso de desarrollo, los desarrolladores    y dise&ntilde;adores pueden trabajar de manera m&aacute;s independiente y al    mismo tiempo en sus componentes. Los dise&ntilde;adores pueden concentrarse    en la vista, mientras que los desarrolladores puedan trabajar en los componentes    de modelo de vista y modelo.    <br>   </font><font size="2" face="Verdana">- Los desarrolladores pueden crear pruebas    unitarias para el modelo de vista y el modelo sin utilizar la vista. Las pruebas    unitarias para el modelo de vista pueden ejercer exactamente la misma funcionalidad    como si fueran usadas por la vista.    <br>   </font><font size="2" face="Verdana">- Es f&aacute;cil de redise&ntilde;ar la    interfaz de usuario de la aplicaci&oacute;n sin tocar el c&oacute;digo porque    la vista se implementa generalmente con lenguaje de marcado. Una nueva versi&oacute;n    de la vista debe trabajar con el modelo de vista existente.    <br>   </font><font size="2" face="Verdana">- Si hay una implementaci&oacute;n existente    del modelo que encapsula la l&oacute;gica de negocio existente, puede ser dif&iacute;cil    o arriesgado cambiar. En este escenario, el modelo de vista act&uacute;a como    un adaptador para las clases del modelo y le permite evitar hacer cambios importantes    en el c&oacute;digo del modelo. </font>      <P><font size="2" face="Verdana"><strong>M&oacute;dulos JavaScript</strong> </font>      <P><font size="2" face="Verdana">Los m&oacute;dulos son una parte integral de    la arquitectura de cualquier aplicaci&oacute;n robusta y por lo general ayudan    a mantener las unidades de c&oacute;digo para un proyecto de manera limpia separada    y organizada. </font>      <P><font size="2" face="Verdana">Opciones para implementar m&oacute;dulos en JavaScript    </font>      <P><font size="2" face="Verdana">- El patr&oacute;n de M&oacute;dulo.    <br>   </font><font size="2" face="Verdana">- Notaci&oacute;n de Objeto Literal.    <br>   </font><font size="2" face="Verdana">- Definici&oacute;n Asincr&oacute;nica    de M&oacute;dulos (AMD, por sus siglas en ingl&eacute;s).    ]]></body>
<body><![CDATA[<br>   </font><font size="2" face="Verdana">- M&oacute;dulos CommonJS.    <br>   </font><font size="2" face="Verdana">- M&oacute;dulos ECMAScript Harmony. </font>      <P><font size="2" face="Verdana">En JavaScript, el patr&oacute;n del m&oacute;dulo se utiliza    para emular a&uacute;n m&aacute;s el concepto de clases de tal manera que puede    incluir ambos m&eacute;todos p&uacute;blicos y privados y variables dentro de    un &uacute;nico objeto, protegiendo de este modo partes particulares del &aacute;mbito    global. Lo que esto resulta en una reducci&oacute;n en la probabilidad de quelosnombres    de funciones entren en conflicto con otras funciones definidas en script adicionales    en la p&aacute;gina. </font>     <P><font size="2" face="Verdana">El patr&oacute;n del m&oacute;dulo encapsula &quot;privacidad&quot;,    el estado y la organizaci&oacute;n utilizando cierres. Proporciona una forma    de envolver una mezcla de m&eacute;todos y variables p&uacute;blicas y privadas,    evitando que las partes se filtren en el &aacute;mbito global y colisionen accidentalmente    con una interfaz de otro desarrollador. Con este patr&oacute;n, solamente se    devuelve una API p&uacute;blica, manteniendo todo lo dem&aacute;s dentro del    &aacute;mbito privada. </font>     <P><font size="2" face="Verdana">Cabe se&ntilde;alar que no existe un concepto    expl&iacute;cito de verdadero sentido de &quot;privacidad&quot; dentro de JavaScript    porque a diferencia de algunos lenguajes tradicionales, no tiene modificadores    de acceso. Las variables no pueden ser declaradas t&eacute;cnicamente como p&uacute;blicoso    privadas y por eso usan &aacute;mbito de funci&oacute;n para simular este concepto.    Dentro del modelo de m&oacute;dulo, las variables o m&eacute;todos declarados    s&oacute;lo est&aacute;n disponibles dentro del propio m&oacute;dulo gracias    a su cierre. Las variables o m&eacute;todos definidos dentro del objeto retornado,    sin embargo, est&aacute;n disponibles en el &aacute;mbito global.</font>     <P>&nbsp;     <P><font size="3" face="Verdana"><strong>RESULTADOS Y DISCUSI&Oacute;N</strong>    </font>      <P><font size="2" face="Verdana">Se propone una arquitectura basada en la implementaci&oacute;n    SPA y el soporte MVVM de DurandalJS, se muestra en la <a href="/img/revistas/rcim/v8n1/f0303116.jpg">figura    3</a>. En la base de la arquitectura se anida RequireJS como sustento para la    carga asincr&oacute;nica de m&oacute;dulos y dependencias; KnockoutJS para realizar    el Databinding<sup><a href="#9">9</a></sup> y la composici&oacute;n de vistas    de Interfaz de Usuario y JQuery para el manejo del DOM.<sup><a href="#10">10</a></sup>    El Bootstraper es el encargado de instanciar e inicializar las librer&iacute;as    base, que incluye adem&aacute;s i18next responsable de la localizaci&oacute;n    de las vistas y toastrJS para el manejo de notificaciones. El n&uacute;cleo    de DurandalJS brinda un ciclo de vida de aplicaci&oacute;n simple pero muy flexible    que permite al desarrollador insertar c&oacute;digo personalizado en cada una    de las fases del ciclo, en la <a href="/img/revistas/rcim/v8n1/t0103116.gif">tabla 1</a>. Uno    de los objetos del n&uacute;cleo de DurandalJS es el Binder, que se encarga    de unir una instancia de objeto y un &aacute;rbol de elementos del DOM<sup>9</sup>    aplicando Databinding e invocando llamadas de retorno del ciclo de vida de Databinding.    Esto permite insertar l&oacute;gica personalizada una vez que el Databinding    est&aacute; completo permitiendo a i18next localizar cada vista una vez que    est&eacute; totalmente compuesta. El Router es otro de los objetos del n&uacute;cleo    y se encarga de conectar el historial de URL de m&oacute;dulo y el soporte del    seguimiento del historial al motor de activaci&oacute;n y composici&oacute;n    del framework, brindando adem&aacute;s la capacidad de extender la l&oacute;gica    base del enrutamiento; ya sea restringiendo el acceso a ciertos m&oacute;dulos,    la redirecci&oacute;n o evitando la navegaci&oacute;n. </font>      <P><font size="2" face="Verdana"><strong>DurandalJS</strong> </font>      <P><font size="2" face="Verdana">Es un framework JavaScript ligero dise&ntilde;ado para hacer    simple y elegante la construcci&oacute;n de una SPA. Est&aacute; desarrollado    como un conjunto de m&oacute;dulos AMD sobre las librer&iacute;as JQuery, KnockoutJS    y RequireJS. </font>     ]]></body>
<body><![CDATA[<P><font size="2" face="Verdana"><strong>Arquitectura</strong> </font>      <P><font size="2" face="Verdana">Brinda fuerte soporte para MVC, MVP y MVVM. Con    RequireJS como base y una fina capa de convenciones, provee una incre&iacute;ble    productividad y ayuda a mantener pr&aacute;cticas de codificaci&oacute;ns&oacute;lidas.    Aparejado a esto tambi&eacute;n provee una rica composici&oacute;n de Interfaz    de Usuario (UI, por sus siglas en ingl&eacute;s), di&aacute;logos modales, eventing/messaging,<sup><a href="#11">11</a></sup>    widgets,<sup><a href="#12">12</a></sup> transiciones, enrutamiento etc. </font>      <P>      <P><font size="2" face="Verdana">Caracter&iacute;sticas fundamentales: </font>     <P><font size="2" face="Verdana">1. Arquitectura MV* limpia.    <br>   </font><font size="2" face="Verdana">2. Modularidad JavaScript y HTML.    <br>   </font><font size="2" face="Verdana">3. Ciclo de vida de Aplicaci&oacute;n Simple.    <br>   </font><font size="2" face="Verdana">4. Eventing, Di&aacute;logos Modales, Cuadros    de Mensaje, etc.    <br>   </font><font size="2" face="Verdana">5. Administraci&oacute;n de Navegaci&oacute;n    y Estado de la Pantalla.    <br>   </font><font size="2" face="Verdana">6. Programaci&oacute;n asincr&oacute;nica    consistente con Promesas.    ]]></body>
<body><![CDATA[<br>   </font><font size="2" face="Verdana">7. Optimizaci&oacute;n de la aplicaci&oacute;n.    <br>   </font><font size="2" face="Verdana">8. Uso de cualquier tecnolog&iacute;a backend.    <br>   </font><font size="2" face="Verdana">9. Construido sobre jQuery, Knockout y    RequireJS.    <br>   </font><font size="2" face="Verdana">10. Integraci&oacute;n con otras librer&iacute;as    como Bootstrap. </font>      <P><font size="2" face="Verdana"><strong>Compatibilidad</strong> </font>     <br>   <font size="2" face="Verdana">IE 6+ </font>     <br>   <font size="2" face="Verdana">Firefox 2+ </font>     <br>   <font size="2" face="Verdana">Safari 3.2+ </font>     <br>   <font size="2" face="Verdana">Chrome 3+ </font>     <br>   <font size="2" face="Verdana">Opera 10+    ]]></body>
<body><![CDATA[<br>       <br>   <strong>RequireJS    <br>   </strong></font><font size="2" face="Verdana">Es una librer&iacute;a JavaScript    para la definici&oacute;n, resoluci&oacute;n de dependencias y carga asincr&oacute;nica    de m&oacute;dulos AMD, ver la <a href="/img/revistas/rcim/v8n1/f0403116.jpg">figura 4</a>. </font>      <P><font size="2" face="Verdana"><strong>KnockoutJS    <br>   </strong></font><font size="2" face="Verdana">Es una librer&iacute;a JavaScript    que permite crear ricas y sensibles interfaces de usuario con un limpio modelo    de datos subyacente. </font>      <P><font size="2" face="Verdana">Principales caracter&iacute;sticas </font>      <P><font size="2" face="Verdana">1. Librer&iacute;a puramente JavaScript - funciona    con cualquier tecnolog&iacute;a cliente o servidor.    <br>   </font><font size="2" face="Verdana">2. Puede ser adicionada a una Aplicaci&oacute;n    Web existente sin mucho impacto.    <br>   </font><font size="2" face="Verdana">3. Elegante seguimiento de dependencias    - autom&aacute;ticamente actualiza las partes apropiadas de la Interfaz de Usuario    siempre que cambie el modelo de datos.    <br>   </font><font size="2" face="Verdana">4. Bindings declarativos - una v&iacute;a    simple y obvia de conectar partes de la Interfaz de Usuario al modelo de datos.    Se pueden construir UI din&aacute;micas complejas f&aacute;cilmente haciendo    uso de bindings arbitrariamente anidados.    ]]></body>
<body><![CDATA[<br>   </font><font size="2" face="Verdana">5. Trivialmente extensible - implementar    nuevos comportamientos, widgets y binding declarativos de f&aacute;cil reutilizaci&oacute;n,    ver la <a href="/img/revistas/rcim/v8n1/f0503116.jpg">figura 5</a>. </font>      <P><font size="2" face="Verdana"><strong>Seguridad</strong> </font>      <P><font size="2" face="Verdana">Cuando el n&uacute;cleo de DurandalJS est&aacute;    listo se intenta obtener la informaci&oacute;n del usuario localmente en el    cliente, en caso de no estar disponible se redirecciona al m&oacute;dulo de    Login; la Web API<sup><a href="#13">13</a></sup> proveer&aacute; un token de    seguridad<sup><a href="#14">14</a></sup> para el usuario que se almacenar&aacute;    localmente para ser usado en cada una de la solicitudes posteriores, ver la    <a href="/img/revistas/rcim/v8n1/f0603116.jpg">figura 6</a>. Una vez autenticado se instancia    la Sesi&oacute;n del usuario de manera global y &uacute;nica para toda la aplicaci&oacute;n    lo que garantiza la unicidad de la informaci&oacute;n, as&iacute; como el Proveedor    de Roles y el Proveedor de Membres&iacute;a con la informaci&oacute;n obtenida    de la Web API. </font>      <P><strong><font size="2" face="Verdana">Gesti&oacute;n de la Informaci&oacute;n    </font> </strong>     <P><font size="2" face="Verdana">Se propone la implementaci&oacute;n del Patr&oacute;n    Repositorio queest&aacute; &iacute;ntimamente relacionado con el acceso a datos    y permite tener una abstracci&oacute;n de la implementaci&oacute;n de acceso    a datos en las aplicaciones, de modo que la l&oacute;gica de negocio no conozca    ni est&eacute; acoplada a la fuente de datos, ve la <a href="/img/revistas/rcim/v8n1/f0703116.jpg">figura    7</a>. En pocas palabras esto quiere decir que el repositorio act&uacute;a como    un intermediario entre la l&oacute;gica de negocio y la l&oacute;gica de acceso    a datos para que se centralice en un solo punto, y de esta forma se logre evitar    redundancia de c&oacute;digo. Y como se mencion&oacute; anteriormente, al ser    una abstracci&oacute;n del acceso a datos permite desacoplar y probar de una    forma m&aacute;s sencilla el c&oacute;digo mediante pruebas unitarias. Adicionalmente,    al estar centralizado en un solo punto de acceso, se puede reutilizar la l&oacute;gica    de acceso a datos desde cualquier cliente, es decir desde otras aplicaciones    presentes en el entorno corporativo. </font>      <P><font size="2" face="Verdana">Uno de los escenarios donde m&aacute;s se suele usar el patr&oacute;n    repositorio, es cuando se tienen m&uacute;ltiples fuentes de datos. Por ejemplo,    se obtiene gran parte de la informaci&oacute;n de una base de datos relacional,    otros datos desde un servicio web o RESTFul y algunos desde una base de datos    No SQL (Lenguaje de Consulta Estructurado). </font>     <P><font size="2" face="Verdana">En el entorno SPA, los datos se solicitan al    servidor y pueden ser almacenados localmente de manera inteligente para su uso    posterior. Esta arquitectura propone el uso de Dataservices y la implementaci&oacute;n    AJAX de AmplifyJS para el acceso de los datos remotos y el caching<sup><a href="#15">15</a></sup>    inteligente de la informaci&oacute;n. Los Dataservices deber&aacute;n implementar    los M&eacute;todos HTTP: POST, PUT, GET y DELETE. La Web API env&iacute;a las    respuestas en formato JSON, los Dataservices invocan a los Mappers<sup><a href="#16">16</a></sup>    para instanciar los objetos de negocio y se crea el Contexto de Datos disponible    globalmente para toda la aplicaci&oacute;n. </font>      <P><font size="2" face="Verdana">A continuaci&oacute;n, se brindan algunas de    las principales funcionalidades de la arquitectura base obtenida en la <a href="/img/revistas/rcim/v8n1/f0803116.jpg">figura    8</a>, <a href="/img/revistas/rcim/v8n1/f0903116.jpg">figura 9</a>, <a href="/img/revistas/rcim/v8n1/f1003116.jpg">figura    10</a> y ver <a href="#fig11">Anexo</a>: </font>      <P><font size="2" face="Verdana">- Infraestructura de Localizaci&oacute;n e Internacionalizaci&oacute;n.    <br>   </font><font size="2" face="Verdana">- Mecanismo de gesti&oacute;n de Notificaciones    y Mensajes entre m&oacute;dulos.    ]]></body>
<body><![CDATA[<br>   </font><font size="2" face="Verdana">- Carga din&aacute;mica de m&oacute;dulos    basado en convenciones y composici&oacute;n de vistas.    <br>   </font><font size="2" face="Verdana">- Mecanismo de gesti&oacute;n de datos    remotos basado en el Patr&oacute;n Repositorio y Binding de Modelo.    <br>   </font><font size="2" face="Verdana">- Controles de Usuario, Comportamientos    y DataBindings personalizados; y Widgets comunes: GridView, DropDownList, ListView,    DetailView y EditView etc.    <br>   </font><font size="2" face="Verdana">- Patr&oacute;n de Navegaci&oacute;n y    Enrutamiento.    <br>   </font><font size="2" face="Verdana">- Estructura de directorios y archivos.    <br>   </font><font size="2" face="Verdana">- Infraestructura de Autenticaci&oacute;n    y Gesti&oacute;n de Roles.    <br>   </font><font size="2" face="Verdana">- Prototipo de Interfaz de Usuario. </font>     <P>&nbsp;     <P><font size="3" face="Verdana"><strong>CONCLUSIONES</strong> </font>      <P><font size="2" face="Verdana">Al utilizar la arquitectura propuesta se evidencia    gran productividad en el desarrollo, el uso de los controles de usuarios, los    bindings personalizados e Widgets permiti&oacute; desarrollar vistas de alta    complejidad con mucha facilidad. La infraestructura de Localizaci&oacute;n autom&aacute;ticamente    acopla los recursos de las vistas obtenidas, textos e im&aacute;genes al local    deseado por el usuario. El compositor de m&oacute;dulos dispone los m&oacute;dulos,    men&uacute;s y barra de herramientas solo con la implementaci&oacute;n de un    grupo de convenciones. El prototipo de Interfaz de Usuario aprovecha las fortalezas    de JQuery UI y Bootstrap brind&aacute;ndole al usuario una experiencia al interactuar    con el software. La estructura de archivos y carpetas brindar&aacute; una organizaci&oacute;n    y estructura l&oacute;gica y sugerente a los desarrolladores. </font>     ]]></body>
<body><![CDATA[<P>&nbsp;     <P><strong><font size="3" face="Verdana">REFERENCIAS BIBLIOGR&Aacute;FICAS </font>    </strong>     <!-- ref --><P><font size="2" face="Verdana">1. DICOM Standards Committee. DICOM PS3.1 2015c    - Introduction and Overview [Internet]. Digital Imaging and Communication in    Medicine [Internet]. Citado: 08 de Septiembre de 2015. Disponible en: <a href="http://dicom.nema.org/medical/dicom/current/output/docx/part01.docx" target="_blank">http://dicom.nema.org/medical/dicom/current/output/docx/part01.docx</a></font>      <!-- ref --><P><font size="2" face="Verdana">2. Nance Jr JW, Meenan C, Nagy PG. The Future    of the Radiology Information System [Internet]. AJR. 2013 May; 200(5). Citado:    04 de Septiembre de 2015 Disponible en: <a href="http://www.ajronline.org/doi/pdf/10.2214/AJR.12.10326" target="_blank">http://www.ajronline.org/doi/pdf/10.2214/AJR.12.10326</a></font>      <!-- ref --><P><font size="2" face="Verdana">3. MVP Award Program. An Introduction to New    Features in C# 5.0 [Internet]. 2012. Citado: 12 de Septiembre de 2015. Disponible    en: <a href="http://blogs.msdn.com/b/mvpawardprogram/archive/2012/03/26/introduction-of-new-features-in-c-5-0.aspx" target="_blank">http://blogs.msdn.com/b/mvpawardprogram/archive/2012/03/26/introduction-of-new-features-in-c-5-0.aspx</a></font>      <!-- ref --><P><font size="2" face="Verdana">4. Microsoft. Bienvenido a Visual Studio 2015    [Internet]. 2015. Citado: 08 de Septiembre de 2015. Disponible en: <a href="https://msdn.microsoft.com/es-es/library/dd831853.aspx" target="_blank">https://msdn.microsoft.com/es-es/library/dd831853.aspx</a>    </font>      <!-- ref --><P><font size="2" face="Verdana">5. Microsoft. NET Framework 4.5 [Internet]. Citado:    14 de Septiembre de 2015. Disponible en: <a href="https://www.microsoft.com/es-es/download/details.aspx?id=30653" target="_blank">https://www.microsoft.com/es-es/download/details.aspx?id=30653</a>    </font>      <!-- ref --><P><font size="2" face="Verdana">6. Scott G, Scott H, Anderson R. Getting Started    with ASP.NET MVC 5 [Internet]. 2015. Citado: 15 de Septiembre de 2015. Disponible    en: <a href="http://www.asp.net/mvc/overview/getting-started/introduction/getting-started" target="_blank">http://www.asp.net/mvc/overview/getting-started/introduction/getting-started</a></font>      <!-- ref --><P><font size="2" face="Verdana">7. Wasson M. Getting Started with ASP.NET Web    API 2 [Internet]. 2015.Citado: 07 de Septiembre de 2015. Disponible en:<a href="http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api" target="_blank">http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api</a></font>      <!-- ref --><P><font size="2" face="Verdana">8. Takada M. Single page apps in depth [Internet].    Citado: 16 de Septiembre de 2015. </font> <font size="2" face="Verdana">Disponible    en: <a href="http://singlepageappbook.com/" target="_blank">http://singlepageappbook.com/</a>    <BR>       <!-- ref --><br>   </font><font size="2" face="Verdana">9. Document Object Model (DOM) [Internet].    World Wide Web Consortium. 2009. Citado: 17 de Septiembre de 2015. Disponible    en: <a href="http://www.w3.org/DOM/" target="_blank">http://www.w3.org/DOM/</a>    </font>     <P>&nbsp;     <P><font size="3" face="Verdana"><strong>ANEXO </strong></font>      <P align="center"><img src="/img/revistas/rcim/v8n1/f1103116.jpg" width="539" height="460">    <a name="fig11"></a>      <P align="center">&nbsp;     <P align="center">&nbsp;     <P align="left"><font size="2" face="Verdana">Recibido: 3 de diciembre de 2015.    <br>   Aprobado: 6 de mayo de 2016.</font>     <P align="left"><font size="2" face="Verdana"><sup><a name="1"></a>1</sup>Se refiere    a equipos que implementan parcial o totalmente el Est&aacute;ndar DICOM.</font>        ]]></body>
<body><![CDATA[<br>   <font size="2" face="Verdana"><sup><a name="2"></a>2</sup>Se refiere a los Sistemas    de Archivado y Comunicaci&oacute;n de Im&aacute;genes.</font>     <br>   <font size="2" face="Verdana"><sup><a name="3"></a>3</sup>Se refiere a la tecnolog&iacute;a    JavaScript que permite la comunicaci&oacute;n asincr&oacute;nica con el servidor    web.    <br>   <sup><a name="4"></a>4</sup>Se refiere al actor encargado la proveer servicios    de datos, restricciones de seguridad y que accede a la fuente de datos subyacente.    <br>   <sup><a name="5"></a>5</sup>Se refiere a un marco de trabajo, que generalmente    es una pieza de software subyacente y brinda un Kit de Herramientas de Desarrollo.    <br>   <sup><a name="6"></a>6</sup>Se refiere a los Patrones Arquitect&oacute;nicos    Modelo-Vista-Controlador y Modelo-Vista-Vista-Modelo respectivamente.    <br>   <sup><a name="7"></a>7</sup>Se refiere a la actualizaci&oacute;n parcial de    la p&aacute;gina que generalmente ocurre como consecuencia de una solicitud    asincr&oacute;nica al servidor.    <br>   <sup><a name="8"></a>8</sup>En ASP .NET se conoce como ViewState (Estado de    la Vista) y se usa para simular mantenimiento de estado de la vista propio de    aplicaci&oacute;n de escritorio.    <br>   <sup><a name="9"></a>9</sup>Se refiera a la capacidad de una pieza de software    de enlazar o rellenar objetos desde otra estructura de datos. En la Web muy    a menudo se usa esto para crear objetos con la informaci&oacute;n obtenida del    servidor en formato JSON o enlazar piezas de marcado HTML con objetos, resultando    la vista final.    <br>   <sup><a name="10"></a>10</sup>Se refiere a la interfaz dela plataforma yde lenguaje    neutroque permitir&aacute; alos programas yscripts accederdin&aacute;micamentey    actualizar elcontenido, la estructuray el estilo delos documentos. El documentose    puede procesar adicionalmentey los resultados deque el procesamientose puede    incorporarde nuevo enla p&aacute;ginapresentada.    <br>   <sup><a name="11"></a>11</sup>Se refiere al manejo de eventos y la comunicaci&oacute;n    entre piezas de software mediante mensajes asincr&oacute;nicos.    ]]></body>
<body><![CDATA[<br>   <sup><a name="12"></a>12</sup>Se refiere a una peque&ntilde;a pieza de software    queentre sus objetivos est&aacute;n dar f&aacute;cil acceso a funciones frecuentemente    usadas y proveer de informaci&oacute;n visual.    <br>   <sup><a name="13"></a>13</sup>Se refiere al Back-end que provee servicios de    datos y seguridad.    <br>   <sup><a name="14"></a>14</sup>Se refiere a una clave que otorga al Back-end    a un usuario autenticado para su identificaci&oacute;n en transacciones posteriores.    <br>   <sup><a name="15"></a>15</sup>Se refiere a la capacidad de una pieza de software    para almacenar y administrar datos localmente por cierto tiempo y bajo circunstancias    espec&iacute;ficas antes de volver a solicitarlos al servidor.    <br>   <sup><a name="16"></a>16</sup>Se refiere a una pieza de software capaz de obtener    de una estructura de datos, una instancia de un objeto.</font><font size="2" face="Verdana">    </font>       ]]></body><back>
<ref-list>
<ref id="B1">
<label>1</label><nlm-citation citation-type="">
<collab>DICOM Standards Committee</collab>
<source><![CDATA[Introduction and Overview]]></source>
<year></year>
</nlm-citation>
</ref>
<ref id="B2">
<label>2</label><nlm-citation citation-type="journal">
<person-group person-group-type="author">
<name>
<surname><![CDATA[Nance]]></surname>
<given-names><![CDATA[Jr JW]]></given-names>
</name>
<name>
<surname><![CDATA[Meenan]]></surname>
<given-names><![CDATA[C]]></given-names>
</name>
<name>
<surname><![CDATA[Nagy]]></surname>
<given-names><![CDATA[PG]]></given-names>
</name>
</person-group>
<article-title xml:lang="en"><![CDATA[The Future of the Radiology Information System]]></article-title>
<source><![CDATA[AJR]]></source>
<year>2013</year>
<month> M</month>
<day>ay</day>
<volume>200</volume>
<numero>5</numero>
<issue>5</issue>
</nlm-citation>
</ref>
<ref id="B3">
<label>3</label><nlm-citation citation-type="">
<collab>MVP Award Program</collab>
<source><![CDATA[An Introduction to New Features in C# 5.0]]></source>
<year>2012</year>
</nlm-citation>
</ref>
<ref id="B4">
<label>4</label><nlm-citation citation-type="">
<collab>Microsoft</collab>
<source><![CDATA[Bienvenido a Visual Studio 2015]]></source>
<year>2015</year>
</nlm-citation>
</ref>
<ref id="B5">
<label>5</label><nlm-citation citation-type="">
<collab>Microsoft .NET.</collab>
<source><![CDATA[Framework 4.5]]></source>
<year></year>
</nlm-citation>
</ref>
<ref id="B6">
<label>6</label><nlm-citation citation-type="">
<person-group person-group-type="author">
<name>
<surname><![CDATA[Scott]]></surname>
<given-names><![CDATA[G]]></given-names>
</name>
<name>
<surname><![CDATA[Scott]]></surname>
<given-names><![CDATA[H]]></given-names>
</name>
<name>
<surname><![CDATA[Anderson]]></surname>
<given-names><![CDATA[R]]></given-names>
</name>
</person-group>
<source><![CDATA[Getting Started with ASP.NET MVC 5]]></source>
<year>2015</year>
</nlm-citation>
</ref>
<ref id="B7">
<label>7</label><nlm-citation citation-type="">
<person-group person-group-type="author">
<name>
<surname><![CDATA[Wasson]]></surname>
<given-names><![CDATA[M]]></given-names>
</name>
</person-group>
<source><![CDATA[Getting Started with ASP.NET Web API 2]]></source>
<year>2015</year>
</nlm-citation>
</ref>
<ref id="B8">
<label>8</label><nlm-citation citation-type="">
<person-group person-group-type="author">
<name>
<surname><![CDATA[Takada]]></surname>
<given-names><![CDATA[M]]></given-names>
</name>
</person-group>
<source><![CDATA[Single page apps in depth]]></source>
<year></year>
</nlm-citation>
</ref>
<ref id="B9">
<label>9</label><nlm-citation citation-type="">
<collab>Document Object Model (DOM)</collab>
<source><![CDATA[World Wide Web Consortium]]></source>
<year>2009</year>
</nlm-citation>
</ref>
</ref-list>
</back>
</article>
