¡Impresione sus clientes con un cóctel eficiente de tecnologías!

Introducción

MQL5 proporciona a los programadores un conjunto muy completo de funciones y API orientados a objetos, permitiéndoles hacer todo lo que quieran en el entorno de MetaTrader. Sin embargo, hoy en día, la tecnología web es una herramienta extremadamente versátil y puede resultar útil cuando le surge la necesidad de hacer algo muy específico, quiere sorprender sus clientes con algo diferente o simplemente no dispone del tiempo suficiente para dominar una parte concreta de la librería estándar de MQL5. A través del ejercicio de hoy, vamos a recorrer un ejemplo práctico acerca de cómo puede manejar el tiempo que dedica al desarrollo al mismo tiempo que crea un impresionante cóctel tecnológico.

Este tutorial le muestra cómo puede crear un archivo CSV desde una impresionante interfaz gráfica de usuario "GUI" (Graphical User Interface) basada en la web. En concreto, crearemos el calendario de noticias utilizado por el Asesor Experto descrito en el artículo Implementar un trader de noticias automático. Las tecnologías web con las que vamos a trabajar son HTML5, CSS y JQuery. Este ejercicio es especialmente interesante para los desarrolladores MQL5 que ya tengan conocimientos web o quieran aprender algunas de estás tecnologías con el fin de combinarlas con sus programas desarrollados en MQL5. Durante los últimos años, he tenido personalmente la oportunidad de trabajar con JQuery, HTML5 y CSS, por lo que estoy muy familiarizado con todas estas tecnologías. A todo esto, se le conoce como el lado del cliente de una aplicación web.

Figura 1. Cócteles. Imagen distribuida por mountainhiker bajo una licencia de Creative Commons en Flickr

Este mes, no tengo tiempo para estudiar las clases para la creación de paneles de control y diálogos, por lo que he decidido utilizar el método descrito en Gráficos y diagramas en HTML. Es por ello que he abierto el hilo EA's GUIs to enter data (GUI de Asesores Expertos para introducir datos).

1. El cóctel de tecnologías

El lenguaje HTML y la web nacieron en 1989, no hace mucho tiempo, para describir y compartir algunos documentos científicos en el CERN (Organización Europea para la Investigación Nuclear). Inicialmente, se diseñó HTML como un medio de comunicación para la comunidad científica. Desde entonces, HyperText Markup Language (lenguaje de marcas de hipertexto) ha estado en constante evolución, permitiendo compartir informaciones entre personas de todo el mundo. No quiero aburrirle con la historia de la ciencia y tecnología, así que no voy a entrar en más detalles.

Al principio, cuando los creadores acababan de crear HTML y se dedicaron a hacer cosas interesantes, solían escribir el código HTML, el código del estilo CSS y el JavaScript todo junto en un solo documento. Así que lo mezclaban todo, y pronto se dieron cuenta de que tienen que dividir las cosas de modo que hayan menos errores en el funcionamiento de las aplicaciones web. Es por eso que hoy en día separamos siempre la estructura (HTML), la presentación visual (CSS) y la capa del comportamiento (JavaScript) cuando trabajamos en el lado del cliente de una aplicación web. Siempre que quiera hacer un ejercicio como el de hoy, debe conocer estas tres tecnologías interdependientes.

2. Y ¿qué pasa con la usabilidad?

Usabilidad significa fácil de usar. Quiere decir lo fácil que es aprender a usar algo, el grado de eficiencia que se siente al usarlo, lo fácil que es cometer un error usando algo, o cuántos usuarios les gusta usarlo. Hagamos un breve recordatorio. Estamos desarrollando una interfaz gráfica de usuario basada en la web, para que nuestros clientes puedan hacer un calendario de noticias para nuestro producto MQL5, es decir, el Asesor Experto descrito en el artículo Implementar un trader de noticias automático. El aspecto de la usabilidad es muy importante, ya que estamos incorporando varias tecnologías. Pero tenemos que ir con cuidado, ¡todo esto tiene que quedar muy claro para el cliente! Tendremos éxito, cuando los clientes usan nuestra solución basada en la web y acaban diciendo, "¡Cómo mola utilizar este producto!", "¡Me encanta!".

El diseño de nuestra interfaz gráfica de usuario (GUI) sigue una serie de pautas conocidas de usabilidad:

• Tiene un color de fondo claro y un color de fuente oscuro para que el texto sea legible.
• El tamaño de la fuente es lo suficientemente grande para que se pueda leer el texto por un público normal.
• No hay que tener en cuenta solo los iconos, sino también el texto que los describe.
• Los enlaces están subrayados y de color azul. Esto los hace más visibles.

3. La interfaz gráfica de usuario para la creación de un CSV de noticias

El código entero de este ejercicio está disponible en news-watcher-csv.html. Es lo que entregamos a nuestro cliente, junto con nuestro Asesor Experto. Por cierto, le recomiendo primero echar un vistazo a este archivo que voy a explicar en detalle a continuación.

3.1. Cargar la capa de comportamiento (JS) y la capa de presentación (CSS)

Google Hosted Libraries es una red de distribución de contenidos para las librerías JavaScript de código abierto más populares. Puede coger las librerías JS que necesita a partir de los servidores de Google y así no tiene que copiarlas en su ordenador para trabajar con ellas, su aplicación web solicitará en la primera petición HTTP a Google las librerías que indica. Este es el planteamiento que se utiliza en este ejercicio para que el navegador pueda cargar la librería JQuery y sus CSS correspondientes.

Cargamos todos los elementos necesarios en la etiqueta del encabezado del documento:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="jquery.timepicker.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="jquery.timepicker.min.js"></script>

No obstante, también incluimos los CSS y JavaScript de jquery.timepicker, el widget que permite a los clientes seleccionar una hora concreta. Se hace así, por no existir soluciones mágicas. JQuery UI no viene con ningún widget visual para seleccionar la hora del día, así que tenemos que recurrir a este tipo de componentes de terceros. Los archivos jquery.timepicker.css y jquery.timepicker.min.js no están disponibles en los servidores de Google, de modo que tenemos que copiarlos en nuestro equipo local y enlazarlos a un documento HTML.

Esto puede ser un inconveniente para nuestros clientes, por lo que en el contexto de este ejercicio, le recomiendo primero cargar estos dos archivos a un servidor público fiable y luego enlazarlos a partir de cualquier documento HTML, justo como hicimos con la librería JQuery alojada en Google. Menos archivos ve nuestro cliente, mejor. ¡Recuerde lo que habíamos comentado antes acerca de la usabilidad! Le dejo esta tarea como un ejercicio adicional. En cualquier caso, para todas estas operaciones, estamos suponiendo que nuestro cliente dispone de una conexión a internet para poder utilizar nuestra interfaz gráfica de usuario.

3.2. Los widgets JQuery utilizados en nuestra interfaz gráfica de usuario

Nuestra interfaz gráfica de usuario contiene los siguientes controles visuales JQuery. ¡Recuerde que todo esto ya está programado en este marco de trabajo (framework) JavaScript! Consulte la documentación oficial para profundizar sus conocimientos en JQuery y JQuery UI. Explicaré más adelante cómo funciona el programa principal jQuery.

3.2.1. Datepicker

Este control permite a los usuarios introducir fácilmente una fecha concreta.

Figura 2. jQuery datepicker

3.2.2. Timepicker

Este plugin ayuda los usuarios a introducir una hora específica. Está basado en Google Calendar.

Figura 3. jQuery timepicker. Esta extensión ha sido diseñado por John Thornton

3.2.3. Sortable

Sirve para reordenar las noticias en una lista o cuadrícula usando el ratón.

Figura 4. jQuery sortable

3.2.4. Dialog

Este control sirve para mostrar algunos contenidos en una ventana superpuesta. Los puristas de la usabilidad no lo recomiendan porque parece un poco invasivo para el cliente. También obliga los usuarios a mover sus manos con cuidado para interactuar con él, por lo que puede que las personas con problemas de habilidades motoras no se sientan cómodas interactuando con el cuadro de diálogo jQuery, sin embargo, se puede usar este widget en algunos casos. Soy consciente de ello. Como ejercicio, le dejo la tarea de mejorar esta interfaz gráfica de usuario para que se muestre el contenido CSV de un modo menos invasivo.

Figura 5. jQuery dialog

3.3. Lo impresionante; añadir valores personalizados a su producto

Tal vez usted, ya sea como profesional independiente o como empresa, está ofreciendo soluciones basadas en MT5 y tiene una base de datos con las preferencias de sus clientes en cuanto a temas de marketing. En este caso, puede aprovecharse de esta información para personalizar su GUI basada en la web:

Figura 6. Puede incorporar un vídeo de Scarlatti para que Bob pueda crear su calendario en un ambiente relajado

En este ejemplo, su cliente Bob le encanta Domenico Scarlatti, el famoso compositor barroco italo-español, así que incorpora un vídeo de Scarlatti para que Bob pueda crear su calendario en un ambiente relajado.

3.4. El código JQuery de nuestra interfaz gráfica de usuario

Abra ahora el archivo news-watcher-csv.html y observe las tres partes que hemos comentado anteriormente en este tutorial. Recuerde que la aplicación web del cliente consiste en la presentación (CSS), la estructura (HTML) y el comportamiento (JavaScript/jQuery). Con todo esto en mente, entenderás fácilmente lo que hace el programa jQuery.

el programa principal jQuery es bastante sencillo. En primer lugar, hace una pequeña modificación en el marco flotante (iframe) de YouTube, de modo que se pueda validar el código HTML5 del documento correctamente. Después, la aplicación inicializa los widgets que hemos comentado anteriormente, y por último, programa el comportamiento del botón para añadir las noticias y el enlace para crear el contenido CSV. ¡Y eso es todo!

$(function() { 

    // fix YouTube's zIndex iframes issue

    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });

    // Init GUI elements

    $("#datepicker").datepicker({ 'dateFormat': 'yy.m.dd' });
    $("#timepicker").timepicker({ 'timeFormat': 'H:i:s' });                 
    $("#sortable").sortable().disableSelection();
    $("#news-calendar").hide();

    // Buttons behavior

    $("#add-new").click(function() {

        $("#news-calendar").fadeIn("500");

        $("#sortable").append('<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + 
            $('#base-currency').val() + ';' + 
            $('#datepicker').val() + ';' + 
            $('#timepicker').val() + ';' + 
            $('#description').val() + '</li>');

    });

    $("#get-csv").click(function() {

        var csv = "Country;Time;Event\n";

        $("#sortable li").each(function(){

            csv += $(this).text() + "\n";

        });

        $("#dialog").empty().dialog({
            modal: true,
            width: 650,
            show: {
                effect: "blind",
                duration: 400
            },
            hide: {
                effect: "explode",
                duration: 400
            },
            buttons: {
                Ok: function() {
                $( this ).dialog( "close" );
                }
            }
        }).append(csv.replace(/\n/g, '<br/>'));

        return false;

    });

});

El código jQuery anterior manipula dinámicamente la siguiente estructura HTML:

<div id="csv-generator">
    <p>Dear Bob, please, generate the CSV file for NewsWatcher EA while you listen to your favourite music:</p>
    <iframe id="video" width="400" height="280" src="https://www.youtube.com/embed/4pSh8kHKuYw" allowfullscreen></iframe>
    <div id="form">
        <p>Enter news in your CSV calendar:</p>
        <div class="form-field">
            <label>Base currency:</label>
            <select id="base-currency">
                <option>AUD</option>
                <option>CAD</option>
                <option>CHF</option>
                <option>CNY</option>
                <option>EUR</option>
                <option>GBP</option>
                <option>JPY</option>
                <option>NZD</option>
                <option>USD</option>
            </select>
        </div>
        <div class="form-field">
            <label>Date:</label>
            <input type="text" id="datepicker"/>
        </div>
        <div class="form-field">
            <label>Time:</label>
            <input type="text" id="timepicker"/>
        </div>
        <div class="form-field">
            <label>Description:</label>
            <input id="description" type="text"/>
        </div>
        <div id="add-new-button" class="form-field">
            <label></label>
            <button id="add-new">+ Add new</button>
        </div>
    </div>
</div><!-- end of csv-generator -->
<div id="news-calendar">
    <p><a id="get-csv" href="#">Get CSV</a></p>
    <ul id="sortable"></ul>
</div>
<div id="dialog" title="Please, copy and paste in data_folder\MQL5\FILES\news_watcher.csv"></div>

Finalmente, no hace falta decir que la capa de presentación consiste en el siguiente código que está claramente separado de las dos otras capas:

<style>

    /* Simple CSS reset */

    * {
        margin: 0;
        padding: 0
    }


    /* HTML tags */

    body {
        font-family: Arial, Helvetica, sans-serif;
        padding: 0em 2em
    }

    header { border-bottom: 1px solid #cccccc }
    footer { border-top: 1px solid #cccccc; margin-top: 2em; padding-top: 1em }

    h1, h2, h3, h4, h5, p { padding: 1em 0em }

    label {
        width: 150px;
        display: inline-block;
        margin: 5px;
        text-align: right
    }

    input { border: 1px solid #cccccc }           
    button, option, input { padding: 4px }
    select { padding: 3px }

    /* Custom ids */

    #csv-generator {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fafafa');
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa)); 
        background: -moz-linear-gradient(top, #ffffff, #fafafa);
        width: 100%;
        clear: both;
        overflow: hidden
    }

    #video {
        width: 30%;
        float: left;
        margin-right: 1em;
        -moz-box-shadow: 0px 3px 5px #888;
        -webkit-box-shadow: 0px 3px 5px #888;
        box-shadow: 0px 3px 5px #888;
        border:0
    }  

    #dialog { font-size: 12px }

    /* Form for adding the news */

    #form { width: 65%; float: right }
    input#datepicker, input#timepicker { width: 100px }
    input#description { width: 300px } 
    #add-new-button { float: left; margin-right: 1em }

    /* Sortable */

    #news-calendar { clear: both; margin-top: 2em; padding: 0em 2em 2em 1em; background: #fafafa; border: 1px solid #cccccc }
    #sortable { list-style-type: none; margin: 0; padding: 0em; width: auto; clear: both }
    #sortable li { margin: 3px; padding: 0.4em; padding-left: 1.5em; }
    #sortable li span { position: absolute; margin-left: -1.3em; }

    a#get-csv {
        background: url('http://icons.iconarchive.com/icons/deleket/soft-scraps/24/File-New-icon.png') no-repeat 0px 8px;
        padding: 10px 58px 20px 30px;
    }

    /* Custom classes */

    .form-field { margin-bottom: 0.5em }

    /* Overwrites */

    .ui-dialog-title { font-size: 12px }

</style>

También se puede mejorar esta sencilla capa de presentación, por ejemplo, escribiendo un código CSS que tenga en cuenta todos los dispositivos móviles. Esto es actualmente posible mediante las consultas de medios (media queries) de CSS3 y un diseño web adaptable, pero no hay bastante espacio en este artículo para explorar esta técnica, de modo que lo dejamos como una tarea para los lectores.

Conclusión

Hoy en día, la tecnología web es un instrumento extremadamente versátil y puede resultar útil en algunas situaciones. Acabamos de desarrollar una interfaz gráfica de usuario basada en la web para la creación de calendarios de noticias en el formato CSV para ser utilizadas por el Asesor Experto que ya hemos desarrollado en el artículo Implementar un trader de noticias automático.

Las principales tecnologías web con las que hemos trabajado son HTML5, CSS y JQuery. A todo esto, se le conoce como el lado del cliente de una aplicación web. Además, hemos comentado brevemente la necesidad de siempre tener en cuenta las necesidades de los usuarios que van a utilizar la interfaz, haciendo un pequeño inciso acerca de las cuestiones de usabilidad.

*Observaciones muy importantes: El código HTML5 de este tutorial ha sido validado a través de W3C Markup Validation Service para garantizar la calidad del producto, y ha sido probado en las últimas versiones de los navegadores Chrome y Firefox. IE8 se está quedando obsoleto, no ejecute este ejercicio en este navegador. jQuery 2.0 no es compatible con IE6, 7 y 8. Se envían los tres archivos de este tutorial en el formato txt, ya que MQL5 no permite el envío de archivos HTML, CSS y JavaScript. Descargue y cambie el nombre de news-watcher-csv.txt a news-watcher-csv.html, jquery.timepicker.txt a jquery.timepicker.css y jquery.timepicker.min.txt a jquery.timepicker.min.js.