<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- Googl Charts -->
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <!-- jQuery, jqPlot -->
  <script language="javascript" type="text/javascript"
    src="http://rd.unir.net/jlsantos/jquery/jqplot/jquery.min.js"></script>
  <script language="javascript" type="text/javascript"
    src="http://rd.unir.net/jlsantos/jquery/jqplot/jquery.jqplot.min.js"></script>
  <link rel="stylesheet" type="text/css"
    href="http://rd.unir.net/jlsantos/jquery/jqplot/jquery.jqplot.css" />

  <!-- Sparklines -->
  <script type="text/javascript"
    src="http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.min.js"></script>

  <!-- qTip -->
  <link rel="stylesheet"
    href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css">
  <script language="javascript" type="text/javascript"
    src="http://rd.unir.net/jlsantos/jquery/jqtip/jquery.qtip.min.js"></script>
    
  <!-- Google Charts -->
  <script type="text/javascript">
    google.load('visualization', '1', {
      packages: ['corechart', 'line', 'geochart']
    });
    google.setOnLoadCallback(drawCharts);

    //Variables globales
    var geoChart = null;
    var geoChartData = null;
    var geoChartOptions = {
      colorAxis: {
        colors: ['#FEDA00', '#B39800', '#3D9ACC', '#80D2FF'],
        minValue: 0,
        maxValue: 100
      },
      datalessRegionColor: '#E8E8E8',
      backgroundColor: {
        stroke:  '#AAA',
        strokeWidth: 3
      },
      //enableRegionInteractivity: true,
      displayMode: 'regions',
      height: 400,
      region: 'world'
      //width: 400
    };

     //https://docs.google.com/spreadsheets/d/16jlF0RRRxt-zITD9azrZ2tdYiB1KydWukWYZemBvogQ/edit?usp=sharing
    function drawCharts() {
      
      //Google Charts
      var query1 = new google.visualization.Query(
        'https://docs.google.com/spreadsheets/d/16jlF0RRRxt-zITD9azrZ2tdYiB1KydWukWYZemBvogQ/edit?usp=sharing&sheet=WebIndex'
      );
      query1.send(handleResponse1);
      
      var query2 = new google.visualization.Query(
        'https://docs.google.com/spreadsheets/d/16jlF0RRRxt-zITD9azrZ2tdYiB1KydWukWYZemBvogQ/edit?usp=sharing&sheet=UsuariosInternet'
      );
      query2.send(handleResponse2);
      
      var query3 = new google.visualization.Query(
        'https://docs.google.com/spreadsheets/d/16jlF0RRRxt-zITD9azrZ2tdYiB1KydWukWYZemBvogQ/edit?usp=sharing&sheet=UIxServidores'
      );
      query3.send(handleResponse3);
       
      var query4 = new google.visualization.Query(
        'https://docs.google.com/spreadsheets/d/16jlF0RRRxt-zITD9azrZ2tdYiB1KydWukWYZemBvogQ/edit?usp=sharing&sheet=CuestionesClave'
      );
      query4.send(handleResponse4);  
      
      //Sparklines
      var query5 = new google.visualization.Query(
        'https://docs.google.com/spreadsheets/d/16jlF0RRRxt-zITD9azrZ2tdYiB1KydWukWYZemBvogQ/edit?usp=sharing&sheet=SpaklinesCClave'
      );
      query5.send(handleResponse5);
      
    }

     //Line Chart
    function handleResponse1(response) {
      if (response.isError()) {
        alert('Error en query 1 (Índice Web): ' + response.getMessage() + ' ' +
          response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();
      data.setColumnProperty(2, 'role', 'tooltip');
      
      var options = {
        colors: ['#4176BA'],
        height: 300,
        width: 840,
        chartArea: {
          left: '8%',
          top: '10%',
          width:'80%',
          height:'70%'
        },
        hAxis: {
          title: 'PIB per capita (US $)',
          baselineColor: '#26456E',
          logScale: false,
          maxValue: 100000,
          gridlines: {
            count: 9
          },
        },
        vAxis: {
          title: 'Índice Web 2014',
          baselineColor: '#26456E',
          gridlines: {
            count: 11
          },
          maxValue: 100

        },
        //backgroundColor: '#f1f8e9',
        legend: {
          alignment: 'center',
          position: 'right',
          textStyle: {
            color: '#26456E'
          }
        },
        //aggregationTarget: 'category'
        crosshair: {
          trigger: 'both',
          color: '#6E6E6E',
          //focus: { color: '#BA9A41', opacity: 0.9 },
          selected: {
            color: '#4176BA',
            opacity: 0.9
          }
        },
        //selectionMode: 'multiple',
        //title: 'Índice Web 2014',
        titleTextStyle: {
          color: '#26456E',
          fontSize: 24
        },
        //tooltip:{trigger:'selection'},
        trendlines: {
          0: {
            type: 'linear',
            color: 'green',
            lineWidth: 2,
            opacity: 0.4,
            visibleInLegend: true,
            pointsVisible: false,
            tooltip: false
            //showR2: true,
          }
        },
        //explorer: { 
            //axis: 'horizontal',
            //keepInBounds: true
            //actions: ['dragToZoom', 'rightClickToReset'] 
          //}
      };

      var chart = new
        google.visualization.LineChart(document.getElementById('webIndex'));

      chart.draw(data, options);
      
      drawJqPlotLineChart(data);
    }

     //Geo Chart
    function handleResponse2(response) {
      if (response.isError()) {
        alert('Error en query 2 (Usuarios de Internet): ' + response.getMessage() + ' ' +
          response.getDetailedMessage());
        return;
      }

      geoChartData = response.getDataTable();
      geoChart =
        new google.visualization.GeoChart(document.getElementById('internetUsers'));

      geoChart.draw(geoChartData, geoChartOptions);
    }
    
    function updateMapRegion() {
      var x = document.getElementById("mapRegions").value;
      if (x == "000") {
        geoChartOptions.region = 'world';
      } else {
        geoChartOptions.region = x;
      }
      geoChart.draw(geoChartData, geoChartOptions);
    }
    
    //Scatter Plot
    function handleResponse3(response) {
        if (response.isError()) {
          alert('Error en query 3 (UIxServidores): ' + response.getMessage() + ' ' +
            response.getDetailedMessage());
          return;
        }
      
        var data = response.getDataTable();
        //Indicar el país correspondiente en el tooltip
        data.setColumnProperty(2, 'role', 'tooltip');
        //No es posible manipular leyendas de forma sencilla
        //data.setColumnProperty(3, 'role', 'style');
        
         
        var options = {
          //backgroundColor: 'green',
          colors: ['#4176BA'],
          height: 300,
          width: 840,
          chartArea: {
            left: '8%',
            top: '10%',
            width:'75%',
            height:'70%'
          },
          //title: 'Usuarios de Internet (por cada 100) vs. Servidores de Internet Seguros (por cada millón)',
          hAxis: {
            title: 'Usuarios de Internet (por cada 100)',
            minValue: 0, maxValue: 100,
            baselineColor: '#26456E',
            logScale: false,
            gridlines: {
              count: 11
            },
          },
          vAxis: { 
            title: 'Servidores de Internet Seguros (por cada millón)',
            minValue: 0, maxValue: 3200,
            gridlines: {
              count: 8
            },
            baselineColor: '#26456E'
          },
          pointSize: 6,
          pointShape: 'diamond',
          crosshair: {
            trigger: 'both',
            color: '#6E6E6E',
            //focus: { color: '#BA9A41', opacity: 0.9 },
            selected: {
              color: '#4176BA',
              opacity: 0.9
            },
          },
          explorer: { 
            axis: 'horizontal',
            keepInBounds: true
            //actions: ['dragToZoom', 'rightClickToReset'] 
          },
          //legend: {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
          legend: {
            alignment: 'center',
            position: 'right',
            textStyle: {
              color: '#26456E'
            }
          },
          tooltip: { 
            textStyle: {
              color: '#26456E'
          } },
          trendlines: {
            0: {
              type: 'exponential',
              color: 'green',
              lineWidth: 1,
              opacity: 0.5,
              pointSize: 1,
              visibleInLegend: true,
              pointsVisible: false,
              tooltip: false
              //showR2: true,
            }
          }
        };
        
        //Obtener el nombre del pais
        //console.table(data.Lf[0].c[2]);
        //console.log(data.Lf[0].c[0]);
        var chart = new
          google.visualization.ScatterChart(document.getElementById('usersAndServers'));

        chart.draw(data, options);
    }
    
    //Candle Stick
    function handleResponse4(response) {
        if (response.isError()) {
          alert('Error en query 4 (Cuestiones Clave): ' + response.getMessage() + ' ' +
            response.getDetailedMessage());
          return;
        }
        
        var data = response.getDataTable();
       
        //console.table(data);

        var options = {
          bar: {
            groupWidth: '50%'
          },
          colors: ['#4176BA'],
          height: 400,
          width: 800,
          chartArea: {
            left: '20%',
            top: '10%',
            width:'75%',
            height:'70%'
          },
          /*candlestick: {
          }*/
          hAxis: {
            //title: 'Cuestiones Clave',
            baselineColor: '#26456E',
            
          },
          legend: {
            position: 'none'
          },
          orientation: 'vertical',
          tooltip: { 
            textStyle: {
              color: '#26456E'
            }
          },
          vAxis: {
            title: 'Puntuación Encuestas',
            baselineColor: '#26456E',
            gridlines: {
              count: 11
            },
          },
        }; 
        
        var chart = new
          google.visualization.CandlestickChart(document.getElementById('keyQuestions'));
        chart.draw(data, options);
    }
  
    // jqPlot
    function drawJqPlotLineChart(data) {
      
      if (typeof data == 'undefined') {
        return;
      }
      
      var points = [];
      
      //data tiene 3 columnas, solamente necesitamos las dos primeras.
      //console.table(data.Lf); 
      //console.log(data.Lf.length);
      //console.log(data.Lf[0].c[0]);
      //console.log(data.Lf[0].c[1]);
      
      for (var i = 0; i<data.Lf.length; i+=1){ 
        points.push([data.Lf[i].c[0].v, data.Lf[i].c[1].v]); 
        //console.log(points[i]);
      }
      if (points.length == 0) {
        return;
      }
      //console.log(points);
      //var tickRenderer = $.jqplot.AxisTickRenderer;
      
      $.jqplot('jqWebIndex', [points],
        {
          axes: { 
            xaxis: {min: 0, max:100000.0,
              label:'PIB per capita (US $)',
              numberTicks:11
            },
            yaxis: {min: 0, max:110.0,
              label:'Índice Web 2014',
              numberTicks:12
            }
          },
          series: [
            { color: '#266E45',
              lineWidth:2, 
              markerOptions: { 
                style:'circle',
                size: 5,
                color: '#41BA76',
                shadow:false
              },
              //fill:true
            }
          ]
        }
      );
    }
    
    //Sparklines
    function handleResponse5(response) {
        if (response.isError()) {
          alert('Error en query 5 (Cuestiones Clave - Sparklines): ' + response.getMessage() + ' ' +
            response.getDetailedMessage());
          return;
        }
        
        var data = response.getDataTable();
        if (typeof data == 'undefined') {
          return;
        }
      
      //A13
      var points = data.Lf[0].c;
      var pointsA13 = [];
      for (var i = 1; i<points.length; i+=1){ 
        pointsA13.push(points[i].v); 
      }
      if (pointsA13.length > 0) {
        //console.log(pointsA13);
        //pointsA13 = [0,4,7,8,10];
        $('#A13').sparkline(pointsA13, {
          type:'box',
          raw: true,
          showOutliers: false,
          tooltipFormatFieldlist: ['lw', 'lq', 'med', 'uq', 'rw'], 
          tooltipFormatFieldlistKey: 'field' 
          });
      }
      
      //P5
      var points = data.Lf[1].c;
      var pointsP5 = [];
      for (var i = 1; i<points.length; i+=1){ 
        pointsP5.push(points[i].v); 
      }
      if (pointsP5.length > 0) {
        $('#P5').sparkline(pointsP5, {
          type:'box',
          raw: true,
          showOutliers: false,
          tooltipFormatFieldlist: ['lw', 'lq', 'med', 'uq', 'rw'], 
          tooltipFormatFieldlistKey: 'field' 
          });
      }
      
      //C1
      var points = data.Lf[2].c;
      var pointsC1 = [];
      for (var i = 1; i<points.length; i+=1){ 
        pointsC1.push(points[i].v); 
      }
      if (pointsC1.length > 0) {
        $('#C1').sparkline(pointsC1, {
          type:'box',
          raw: true,
          showOutliers: false,
          tooltipFormatFieldlist: ['lw', 'lq', 'med', 'uq', 'rw'], 
          tooltipFormatFieldlistKey: 'field' 
          });
      }
      
      //I2
      var points = data.Lf[3].c;
      var pointsI2 = [];
      for (var i = 1; i<points.length; i+=1){ 
        pointsI2.push(points[i].v); 
      }
      if (pointsI2.length > 0) {
        $('#I2').sparkline(pointsI2, {
          type:'box',
          raw: true,
          showOutliers: false,
          tooltipFormatFieldlist: ['lw', 'lq', 'med', 'uq', 'rw'], 
          tooltipFormatFieldlistKey: 'field' 
          });
      }
    }

    $(document).ready(function() {
      
      //qTips
      $('a').each(function() {
        $(this).qtip({
          content: this.href,
          style: 'qtip-blue',
          position: {
            target: 'mouse',
            adjust: {
              mouse: false
            }
          }
        });
      });
    });
  </script>
</head>

<body>

  <h1>¿Qué nos ofrece el Índice Web 2014? (II)</h1>
  
  <section>
    <h2>Introducción</h2>
    <p>Este trabajo supone una continuación a 
    <a href="https://visualizacionunir.wordpress.com/2015/05/18/que-nos-ofrece-el-indice-web-de-2014/">"¿Qué nos ofrece el Índice Web 2014?"</a>
    
    En este caso, las visualizaciones han sido adaptadas a la librería <a href="https://developers.google.com/chart/">Google Charts</a> y se han seguido,
    en la medida de lo posible, las indicaciones de los comentarios del profesor de la asignatura y de varios compañeros de Máster, de cara a mejorar la comprensión
    de las ideas que se pretenden transmitir.
    </p>
    
    <h2>Selección del dataset</h2>
    <p>
      Para la realización del trabajo se revisaron los datasets disponibles en <a href="http://visualising.org/">visualising.org</a>, resultando interesante
      <a href="http://visualising.org/datasets/web-index-2013">Web Index 2013</a>. Posteriormente, se accede al sitio web original para obtener datos
      actualizados a <a href="http://thewebindex.org/downloads/">2014</a>, en formato <a href="http://es.wikipedia.org/wiki/Office_Open_XML">Open Office XML.</a>
    </p>
    
    <h2>Introducción al Índice Web</h2>
    <p>El <b>Índice Web</b> es un estadístico diseñado y producido por la <a hred="http://webfoundation.org/">World Wide Web Foundation</a>. Se trata de
      la primera medida multidimensional de la contribución de la World Wide Web al desarrollo y los derechos humanos a nivel mundial.
      En <b>2014</b>, se han recopilado datos de <b>86</b> países, incorporando indicadores que evalúan áreas de acceso universal; libertad y apertura; contenido relevante;
      y el empoderamiento, que cubre indicadores de los impactos económicos, sociales y políticos de la Web [4].
    </p>
    <p class= "referencia">Referencia: <a id="wikiWebIndex" href="http://en.wikipedia.org/wiki/Web_index">Web Index. Wikipedia</a>
    </p>

    <h2>Tratamiento del dataset</h2>
    <p>
      Para generar las visualizaciones de este trabajo, se ha partido del tratamiento realizado en la entrega 
      <a href="https://visualizacionunir.wordpress.com/2015/05/18/que-nos-ofrece-el-indice-web-de-2014/">anterior</a>, adaptando los datos del Excel
      que se empleó como origen de datos en Tableau Public (ver <a href="https://public.tableau.com/profile/publish/HV-A1/Story#!/publish-confirm">dashboard</a>), 
      de acuerdo al formato requerido por Google Charts en primera instancia. Además, ha sido necesario generar una hoja adicional para la visualización de 
      <a href="http://omnipotent.net/jquery.sparkline/#s-about">Sparklines</a>.<br>
      Dicho Spreadsheet está disponible en este <a href="https://docs.google.com/spreadsheets/d/16jlF0RRRxt-zITD9azrZ2tdYiB1KydWukWYZemBvogQ/edit?usp=sharing">enlace</a> de Google Drive.<br>
    </p>
    
    <h2>Herramienta</h2>
    <p>
      Para la elaboración de este trabajo se ha hecho uso de <a href="http://plnkr.co/">Plunker</a>, una herramienta de desarrollo web colaborativa.
      Las <b>cuatro</b> visualizaciones principales se han generado con Google Charts. Además, se ha empleado <a href="http://www.jqplot.com/">jqPlot</a>
      para replicar una de ellas, <a href="http://omnipotent.net/jquery.sparkline/#s-about">Sparklines</a> para generar unos pequeños diagramas de caja y bigotes en línea
      y <a href="http://qtip2.com/">jqTip</a> para generar tooltips sobre los hiperenlaces de esta web.
    </p>
    
    <h2>Hipótesis sobre las visualizaciones</h2>
    <ol>
      <li>¿El Índice Web está relacionado con el nivel desarrollo del país?</li>
      <li>¿Es correcta la actuación de los gobiernos en cuestiones que afectan al desarrollo de la Web?</li>
      <li>¿Son Norteamérica y Europa las regiones que disponen de una mayor penetración de usuarios de la Internet?</li>
      <li>¿Existe una relación lineal entre la penetración del número de usuarios de la Internet y el número de servidores seguros en un país?</li>
    </ol>
  </section>
  
  <section>
      <h2>Descripción de las visualizaciones.</h2>
      <h3>Índice Web 2014</h3>
      <p>Primeramente, se plantea un <b>diagrama de línea</b> que representa, para cada uno de los países considerados en el estudio, el valor del Índice Web en 2014
      en función de su <b>PIB per cápita basado en la Paridad de Poder Adquisitivo (PPP, Purchasing-Power-Parity)</b>. Los datos de PIB actualizados a 2014 se han obtenido del
      <a href="http://www.imf.org/external/pubs/ft/weo/2014/01/weodata/index.aspx">Fondo Monetario Internacional</a>.</p>
      <p>En caso de no disponer del dato de PIB para el año 2014 se realizó una interpolación basada en el crecimiento económico en los años anteriores (2012-2013).</p>
      <p>Esta visualización se ha realizado con dos librerías diferentes: <a href="https://developers.google.com/chart/interactive/docs/gallery/linechart">Google Charts</a> (Figura 1)
      y <a href="http://www.jqplot.com/deploy/dist/examples/line-charts.html">jqPlot</a> (Figura 2).
       En la Figura 1 además, se puede observar la <i>línea de tendencia</i> que denota el comportamiento del Índice Web en función del PIB.
       En dicha Figura se incluye la leyenda para denotar la diferencia entre ambas líneas, algo que no es necesario en la Figura 2.</p>.

      <div id="webIndex"></div>
      <p class="titulo">Figura 1. Índice Web 2014. Line Chart (Google Charts).</p>
      <br>
      <div id="jqWebIndex" style="height:300px;width:800px"></div>
      <p class="titulo">Figura 2. Índice Web 2014. Line Chart (jqPlot).</p>
  </section>
  
  <section>
    <h3>Cuestiones Clave</h3>
    <p>En esta sección se presenta la puntuación que recibe una pregunta clave en cada uno de los cuatro subíndices considerados en el Índice Web.
    Para ello, se agregan las puntuaciones en todos los países considerados y se generan <b>diagramas de caja y bigotes</b> ( 
    <a href="https://developers.google.com/chart/interactive/docs/gallery/candlestickchart">Google Candlestick Charts</a>). Además, junto a cada pregunta
    se presenta un <a href="http://omnipotent.net/jquery.sparkline/#s-about">Sparkline</a>, que anticipa el resultado obtenido.</p>

    <p>Los cuatro subíndices y las preguntas planteadas son las siguientes:</p>
    
    <ul>
      <li>
        <b>Acceso Universal:</b> mide si los países han invertido en accesos económicos a infraestructuras de Internet de alta calidad,
        así como en educación y habilidades para que los ciudadanos utilicen la Web correctamente.
        <ul>
          <li>
            ¿Existen políticas específicas para promover el acceso gratuito o de bajo coste a la Internet pública,
            como asignaciones presupuestarias para el acceso a la Internet en bibliotecas públicas, escuelas y centros comunitarios,
            o disposiciones para el uso del espectro por las opciones de Wi-Fi de la comunidad? <a id="A13">A13</a>          
          </li>
        </ul>
      </li>
      <li><b>Libertad y Apertura:</b> evalúa el grado en el que los ciudadanos disfrutan de los derechos de información, opinión,
      expresión, seguridad y privacidad online.
        <ul>
          <li>
            ¿Hasta qué punto existe un marco legal o reglamentario sólido para la protección de los datos personales en su país? <a id="P5">P5</a>
          </li>
        </ul>
      </li>
      <li><b>Contenido Relevante:</b> mapea el uso de la Web por los ciudadanos y el contenido disponible en cada país, haciendo énfasis en el grado 
      en que las diferentes partes interesadas pueden acceder a la información relevante para ellos, en el idioma en que se sientan más cómodos
      y a través de las plataformas y canales ampliamente disponibles.
        <ul>
          <li>
            ¿Hasta qué punto existe una iniciativa de datos abiertos del gobierno con grandes recursos en este país? <a id="C1">C1</a>
          </li>
        </ul>
      </li>
      <li><b>Empoderamiento:</b> evalúa la diferencia que la Web produce en la gente y el grado en que el uso de la Web está impulsando un cambio positivo
      en cuatro áreas clave: sociedad, economía, política y medio ambiente.
        <ul>
          <li>
            ¿En qué medida los datos abiertos han tenido un impacto notable en el aumento de la transparencia y la rendición de cuentas en el país? <a id="I2">I2</a>
          </li>
        </ul>
      </li>
    </ul>
    <br>
    <div id="keyQuestions"></div>
    <p class="titulo">Figura 3. Cuestiones clave. Candlestick Chart.</p>
  </section>
  
  <section>
    <h3>Usuarios de Internet por cada 100</h3>
    <p>En esta sección se visualiza la penetración de usuarios de Internet (por cada 100 personas) detectada en cada uno de los países considerados
    en el Índice Web durante 2013. En este caso, se emplea un <b>mapa de coropletas</b>
    (<a href="https://developers.google.com/chart/interactive/docs/gallery/geochart">Google Geochart</a>). 
    La leyenda de colores emplea un degradado con colores opuestos que pretende destacar las diferencias entre países.</p>
    <p class="titulo">Explore el mapa: desplaze el ratón sobre cualquiera de los países coloreados para obtener información.
    Además, es posible seleccionar una región mundial empleando el selector de la parte superior del mapa.</p>
    <p class="titulo">Seleccione la región mundial de interés:
    <select id="mapRegions" onchange="updateMapRegion()">
        <option value="000">Todas</option>
        <option value="002">Africa</option>
        <option value="150">Europa</option>
        <option value="019">Americas</option>
        <option value="142">Asia</option>
        <option value="009">Oceania</option>
      </select>
    </p>
    <div id="internetUsers"></div>
    <p class="titulo">Figura 4. Usuarios de Internet por cada 100. Geochart.</p>
  </section>
  <br>

  <section>
     <h3>Comparativa Usuarios de Internet y Servidores de Internet Seguros</h3>
     <p>Finalmente, se pretende observar qué relación existe entre las variables "Usuarios de Internet (por cada 100) y
     Servidores de Internet Seguros (por cada millón). Es preciso comentar que los <b>servidores seguros</b> son aquellos que usan 
     tecnología de encriptación en las transacciones a través de Internet. Para ambas variables se consideran datos de 2013.<br>
     La visualización se ha realizado mediante un <b>diagrama de dispersión</b> (<a href="https://developers.google.com/chart/interactive/docs/gallery/scatterchart">Google Scatter Chart</a>).
     De forma similar a la Figura 1, se incluye la línea de tendencia que presentan estos datos.
     </p>
     <p class="titulo">Explore el diagrama: use la rueda del ratón para hacer zoom sobre el eje horizontal.
     Haga clic con el botón izquierdo para arrastrar a izquierda y derecha.
     Pulse el botón derecho para volver al estado incial.</p>
     <div id="usersAndServers"></div>
     <p class="titulo">Figura 5. Usuarios de Internet por cada 100. Scatter Chart.</p>
  </section>

  <section>
    <h2>Evaluación externa</h2>
    <p>Este trabajo se ha evaluado con dos personas externas al Máster. La primera de ellas realizó varios comentarios que me permitieron arreglar erratas
    que había incluido a lo largo del trabajo y redefinir algunos puntos para mejorar su entendimiento. Además, comentaba alguna posible mejora como:</p>
    <ul>
      <li>En "Índice Web 2014" la figura 1 no es intuitiva: despista no ver los puntos que sí aparecen en la figura 2. 
      Trata de meter el nombre del país junto al punto (esto ya va en un tooltip junto a las cifras exactas).
      Si además el tamaño del punto lo haces proporcional al PIB, mejor (<a href="http://junkcharts.typepad.com/.a/6a00d8341e992c53ef01b7c760b59a970b-pi">ejemplo</a>).
      </li>
      <li>
        Se echa en falta un control que permita buscar datos por país, o un país en concreto.
      </li>
    </ul>
    <p>La segunda persona no era experta en ingeniería y consideró que es un trabajo bastante logrado y vistoso, entendiendo correctamente
    las hipótesis planteadas. Además, indicó que los gráficos eran fáciles de analizar y seguir.</p>
    
    
    <h2>Estimación de horas de trabajo</h2>
    <ul>
      <li>
        Visualizaciones: 10 horas. Dos horas con cada visualización de Google Chart (4) y otras dos para jQplot y Sparklines.
        Se incluye todo lo que conlleva: adaptación del Spreadsheet, revisión de documentación, adaptación de opciones, etc.
      </li>
      <li>
        Redacción del trabajo: 3 horas.
      </li>
      <li>
        Trabajo relacionado con personas externas: 1 hora. Se considera búsqueda de personas y revisión del trabajo.
      </li>
    </ul>
    
    <h2>Conclusiones</h2>
    <p>En el segundo trabajo de la asignatura se han aplicado los comentarios de profesor y compañeros sobre la primera entrega de la asignatura.
    Esto ha permitido mejorar las visualizaciones planteadas inicialmente para intentar mejorar la comprensión del lector sobre el dataset.
    Se observa que los comentarios críticos realizados por personas afines al mundo de la Ingeniería tienen más repercusión
    en cuanto a la mejora de detalles que no son obvios en un primer desarrollo.<br>
    Se ha realizado una introducción a la generación de visualizaciones vía web mediante Google Charts y, en menor medida, jqPlot, Sparklines y qTip.
    Esto supone una buena base para el desarrollo de visualizaciones avanzadas con <a href="http://d3js.org/">D3</a>.
    </p>
  </section>
</body>
 
</html>
// Code goes here

/* Styles go here */

h1 {
    color: #26456E;
}

h2 {
  color: #4A537D;
}

.referencia {
  font-style: italic;
   font-size: 80%;
}

.titulo {
  font-style: italic;
  font-size: 90%;
  text-align: center;
}

#internetUsers {
  width:80%;
}