slide1

Alt1040. Noticias acerca de Internet, diseño, música, cine, opiniones, weblogs y medios

Es uno de los weblogs de tecnología más seguidos de la blogosfera hispana.

slide2

Bitelia. Blog de software, internet y servicios web

Software y aplicaciones para mejorar tu vida, guías de uso, trucos, listas, noticias y todo sobre tecnología.

slide3

Xataka. Publicación de noticias sobre gadgets y tecnología.

Últimas tecnologías en electrónica de consumo y novedades tecnológicas en móviles, tablets, informática, etc.

slide4

Wwwhatsnew. Aplicaciones, marketing y noticias en la web.

Servicios que os pueden ser útiles para dibujar, gestionar tareas, hacer amigos, encontrar restaurantes...

slide5

Fayerwayer. Discusiones y opiniones de lo ultimo en tecnología y gadgets

Con secciones dedicadas a Internet, Software o Redes Sociales es un referente a nivel de tecnología en español.

Mostrando entradas con la etiqueta Todo Google. Mostrar todas las entradas
Mostrando entradas con la etiqueta Todo Google. Mostrar todas las entradas

23 de enero de 2017

Alternativas a Google Feed API para añadir a tu web artículos de un blog

En el post Google Api hicimos mención a las APIs de Google que permiten acceder a múltiples servicios de forma muy sencilla. Una de las características de Google Feed Api era la posibilidad de integrar artículos publicados en cualquier blog en nuestra web, a modo de tablón de anuncios o sección de últimas noticias.


Desafortunadamente, Google ha decidido dejar de dar soporte a esta funcionalidad (Google Feed API Subject to the Deprecation Policy)

No obstante, existen otras opciones útiles para tal propósito.
En este post voy a hacer especial hincapié en estos tres servicios por su facilidad de uso:

  • FeedBurner: es un proveedor de gestión de fuentes web propiedad de Google. Proporciona herramientas de gestión de fuentes web RSS a bloggers, podcasters, y otros publicadores de contenido basado en tecnología web.
  • Yahoo Query Language: la plataforma YQL (Yahoo! Query Language) permite consultar, filtrar y combinar datos a través de la web mediante una única interfaz. Utiliza una sintaxis similar a SQL y puede leer información en formato HTML, XML, JSON, RSS, Atom y microformato devolviendo el resultado en formato xml o json.
  • Rss to Json online converter: se trata de una api creada por un desarrollador independiente que ofrece documentación en https://rss2json.com/docs con ejemplos funcionando en lenguajes de programación como Javascript, PHP, Ruby o Python.

Feedburner

El servicio FeedBurner permite convertir el Feed (Fuente o Canal web) de cualquier blog en un fragmento de código HTML para integrar en tu página web.
En el post "FeedBurner: como añadir entradas de un blog a tu web, sin plugins y en una línea de código." doy instrucciones precisas para utilizar esta api.
Vas a poder comprobar que el 100% es configuración dando como resultado un línea de código para integrar en tu blog o web.
<script src="https://feeds.feedburner.com/hipertextual/index?format=sigpro" type="text/javascript"></script>

Yahoo Query Language

Este servicio web de uso público presenta pocas limitaciones (Información de uso de esta api) y parece ser una opción válida para la visualización de canales RSS de recursos externos.
Dispone de una consola YQL Console que podemos utilizar para realizar consultas in situ y una guía YQL Guide para obtener más información sobre la creación de consultas.

<script>
  var mycallback = function(data) {
    var entry = data.query.results.rss.channel.item;
    var container = document.getElementById("feed"), date;
 for(var i = 0; i < entry.length; i++){
  dv = document.createElement("div");
  date = new Date(entry[i].pubDate);
  dv.innerHTML = '<a href="' + entry[i].link + '" target="_blank">' + entry[i].title + '</a><br/>' + date.toDateString().substr(4) + '<br/><div class="article">' + entry[i].description.substring(0,600) + '...</div>';
  dv.innerHTML += '<hr/>';
  container.appendChild(dv);
 }
  };
</script>
<div id="feed"></div>
<script src="https://query.yahooapis.com/v1/public/yql?q=select * from xml where url = 'http://feeds.feedburner.com/hipertextual'&format=json&callback=mycallback"></script>

Rss to Json online converter

La web facilita una caja de texto para introducir la url de un feed válido.
A continuación, pulsamos el botón Convert to Json y obtenemos la respuesta del documento en formato json.

<div id="feed"></div>
<script>
(function(){
 var url = "https://hipertextual.com/feed";
 var xhr = createCORSRequest("GET","https://api.rss2json.com/v1/api.json?rss_url="+url);
 if (!xhr) {
   throw new Error('CORS not supported');
 } else {
  xhr.send();
 }
 xhr.onreadystatechange = function() {
  if (xhr.readyState==4 && xhr.status==200) {
   var responseText = xhr.responseText; 
   var result = JSON.parse(responseText);
   var container = document.getElementById("feed"), entry = result.items, date;
   for(var i = 0; i < entry.length; i++){
    dv = document.createElement("div");
    date = new Date(entry[i].pubDate);
    dv.innerHTML = '<a href="' + entry[i].link + '" target="_blank">' + entry[i].title + '</a><br/>' + date.toDateString().substr(4) + '<br/><div class="article">' + entry[i].content.substring(0,600) + '...</div>';
    dv.innerHTML += '<hr/>';
    container.appendChild(dv);
   }
  }
 }
})();
function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined") {
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}
</script>


Escribimos este fragmento de código dentro del cuerpo de nuestro documento html y sustituimos la url 'https://www.tecnoblog.guru/feeds/posts/default' por la de nuestro feed. También podemos modificar el número de entradas a mostrar representado entry.length por un número entero.

Éste es el resultado final:




6 de junio de 2016

Alojar páginas web con Google Drive no será posible a partir del 31 de agosto de 2016

Google lo lleva anunciando desde hace cerca de un año: "la función de alojamiento de páginas web desde Google Drive dejará de estar disponible a patir de agosto de 2016".
En su blog oficial, explica las razones y ofrece la posibilidad de compra de un dominio a través de su plataforma Google Domains.


Llevo haciendo uso de este servicio desde que Google lo anunció y me ha sido de mucha utilidad para compartir de forma pública algunos de los casos prácticos que expongo en los artículos de mi blog.

Y como no es conveniente dejar los deberes para el último momento, me he puesto manos a la obra y he migrado todos estos proyectos a otro repositorio de carácter público.

Como ya indicaba en el post de principios de 2014 ¿sabías que Google Drive permite alojar páginas web?:
"para la publicación de un sitio web lo ideal es disponer de hosting y dominio propios pero para compartir ficheros o páginas estáticas a modo de ejemplos, existen numerosos servicios gratuitos que cubren perfectamente esta funcionalidad".

Finalmente me he decantado por el servicio de alojamiento de repositorios de software GitHub porque cubre sobradamente mis necesidades.

Algunas razones de peso son:

  • GitHub es totalmente gratuito para alojar código open source, siendo estos repositorios de visibilidad pública.
    No obstante, cuenta con un plan de precios para los repositorios privados.
  • es el servicio elegido por proyectos de software libre como Linux, Eclipse, jQuery, reddit, Sparkle, curl, Ruby on Rails, node.js, ClickToFlash, Erlang/OTP, CakePHP, Redis, y otros muchos.
  • algunas de las grandes empresas de Internet, como Facebook, alojan ahí sus desarrollos públicos, tales como el SDK, librerías, ejemplos, etc.
  • dispone de un visor de código mediante el cual, a través del navegador, podremos consultar en un instante el contenido de un determinado fichero

¿cómo configurar Git?

Documentación de usuario: Set Up Git

Artículos que se han visto afectados por este cambio y cuyos ficheros públicos ya apuntan al nuevo directorio GitHub (ordenados de más reciente a más antiguo):

  • Como crear un índice para Blogger personalizable por Título o Categorías
    <div id="all-post" class="all-post"></div>
    <script>
    var conf = {
     sortBy:   'orderlabel',  // forma en que se muestran las artículos publicados
     lastPost: 10,            // últimos post (10) a los que les pongo una marca
     date:     1,             // 0:no aparece la fecha de publicación | 1:mostramos la fecha de publicación
     newPost: 'Nuevo!!',      // texto o marca que aparece en los últimos artículos
     newtab:   1              // 0:abre link en la misma ventana | 1:abre link en ventana nueva
    }
    </script>
    <script src="https://cdn.jsdelivr.net/gh/jmacuna/index-blogger@master/index-blogger.js"></script>
    <script src="[URL DE TU BLOG]/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
    

  • Calendario con todos los post publicados en Blogger
    <div id='calendar'><strong>Loading...</strong></div>
    <script>
    var conf = {
     bgcolor: '#1e4e7e', 
     newtab:  1,         // 0:abre link en la misma ventana | 1:abre link en ventana nueva
     tooltip: true,      // false:title por defecto | true:tooltip con css3
     start:   1,         // 0:Domingo | 1:Lunes
     days:    "Lunes|Martes|Miercoles|Jueves|Viernes|Sabado|Domingo",
     months:  "Enero|Febrero|Marzo|Abril|Mayo|Junio|Julio|Agosto|Septiembre|Octubre|Noviembre|Diciembre",
     date:    "Ir al mes actual"
    }
    </script>
    <script src='https://cdn.jsdelivr.net/gh/jmacuna/calendar-widget@master/create-calendar.js' type='text/javascript'></script>
    <script src='https://www.tecnoblog.guru/feeds/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar' type='text/javascript'></script>
    
  • Gadget para aumentar tu número de suscriptores - Blogger
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jmacuna/subscription-feedburner@master/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script>
    idleTime = 0;
    $(document).ready(function(){
     $limit = 5; //seconds
     if ($.cookie('test_status') != '1') {
      function timerIncrement() {
       idleTime = idleTime + 1;
       if (idleTime > $limit) {
        $('html, body').css('overflow', 'hidden');
        $('.subs-popup ').fadeIn('slow');
        idleTime = 0;
       }
      }
      // Increment the idle time counter every second.
      var idleInterval = setInterval(timerIncrement, 1000); // 1 second
      // Zero the idle timer on mouse movement.
      $(this).mousemove(function (e) {
       idleTime = 0;
      });
      $(this).keypress(function (e) {
       idleTime = 0;
      });
      $.cookie('test_status', '1', { expires: 30 });
     }
     $('.email-close').click(function() {
      $('.subs-popup').fadeOut('slow');
      $('html, body').css('overflow', 'auto');
      $limit = 9999;
     });
    });
    </script>
    
    <div class="subs-popup">
     <div id="newsletter">
      <div class="email-close">X</div>
      <div class="newsletter-wrap">
       <h4>Suscríbete y recibe<br/>contenido exclusivo</h4>
       <p>Las últimas novedades del blog<br/>directamente a tu email.<br/><br/></p>
       <form action="http://feedburner.google.com/fb/a/mailverify?loc=es-ES&uri=[FEED_DE_TU_BLOG]" method="post" onsubmit="$('.email-close').click();window.open('about:blank', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" novalidate="">
        <input name="uri" type="hidden" value="bloggertrix"/>
        <input name="loc" type="hidden" value="en_ES"/>
        <input type="email" value="" name="email" placeholder="Tu e-mail aqui..." required=""/><br/><br/>
        <input type="submit" value="Suscribirme" class="button-popup">
       </form>
      </div>
     </div>
    </div>
    
  • Comentarios con desplazamiento de texto para Blogger (efecto marquee)
    <table class="comments">
    <tr><td class="title">Últimos comentarios</td></tr>
    <tr><td><div class="scroller">
    <script type="text/javascript">
    var numComments  = 10,
        showAvatar  = true,
        avatarSize  = 40,
        roundAvatar = true,
        characters  = 40,
        showMorelink = false,
        moreLinktext = "More »",
        defaultAvatar  = "http://i.imgur.com/3QqaBeS.png",
        hideCredits = true;
    </script>
    <script src="https://cdn.jsdelivr.net/gh/jmacuna/comments-avatar@master/w2b_recent_comments_with_avatars.js"></script>
    <script src="[URL DE TU BLOG]/feeds/comments/default?alt=json&callback=w2b_recent_comments"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Infinite-Any-Content-Scroller-scrollForever/scrollForever.js"></script>
    </div></td></tr>
    </table>
    <script type="text/javascript">$(document).ready(function({$(".scroller").scrollForever({dir:"top",container:"ul",inner:"li",speed:1000,delayTime:10,continuous:true,num:1});});</script>
    
Todos aquellos lectores del blog que utilicen alguno de los gadgets que comparto, deberán realizar ajustes para que las url públicas estén alojadas en https://cdn.jsdelivr.net en lugar de https://www.googledrive.com/host.


21 de diciembre de 2015

¿sabías que Google paga recompensas por descubrir fallos de seguridad en sus productos?

Bug Security Google
La filosofía de seguridad de Google:
como proveedor de software y servicios para muchos usuarios, anunciantes y editores en Internet, Google apuesta fuertemente por ayudar a proteger su privacidad y seguridad.
Y lo hace proporcionando recompensas en efectivo (desde noviembre de 2010) para mejorar la calidad y seguridad de sus productos.

Google ofrece actualmente los siguientes programas de recompensa de seguridad:

En principio, cualquier servicio web propiedad de Google que maneja datos de usuario sensibles están en el alcance de estas recompensas. Esto incluye todo el contenido en los siguientes dominios:

  • *.google.com
  • *.youtube.com
  • *.blogger.com
Errores en aplicaciones y extensiones desarrolladas por Google (publicados en Google Play, en iTunes o en la Chrome Web Store) también calificarán.

Las empresas o servicios recién adquiridos están sujetos a un período de supervisión de seis meses. Los bugs reportados antes de ese periodo no califican para una recompensa.

Cualquier problema de diseño o implementación que afecta sustancialmente a la confidencialidad o integridad de los datos de usuario formará parte del programa.

Los ejemplos más comunes incluyen:

  • Cross-site scripting
  • Cross-site request forgery
  • Mixed-content scripts
  • Authentication or authorization flaws
  • Server-side code execution bugs
Cantidades de recompensa

Las recompensas por errores de clasificación van desde $100 a $20.000.
La siguiente tabla muestra las recompensas habituales elegidas para los errores más comunes:

Category Examples Applications that permit taking over a Google account [1] Other highly sensitive applications [2] Normal Google applications Non-integrated acquisitions and other sandboxed or lower priority applications [3]
Vulnerabilities giving direct access to Google servers
Remote code execution Command injection, deserialization bugs, sandbox escapes $20,000 $20,000 $20,000 $1,337 - $5,000
Unrestricted file system or database access Unsandboxed XXE, SQL injection $10,000 $10,000 $10,000 $1,337 - $5,000
Logic flaw bugs leaking or bypassing significant security controls Direct object reference, remote user impersonation $10,000 $7,500 $5,000 $500
Vulnerabilities giving access to client or authenticated session of the logged-in victim
Execute code on the client Web: Cross-site scripting
Mobile: Code execution
$7,500 $5,000 $3,133.7 $100
Other valid security vulnerabilities Web: CSRF, Clickjacking
Mobile: Information leak, privilege escalation
$500 - $7,500 $500 - $5,000 $500 - $3,133.7 $100

Además, ofrece la opción de donar tu premio a una organización benéfica. Si lo haces, Google duplicará su donación.
Cualquier recompensa sin reclamar después de 12 meses será donada a una organización benéfica de su elección.

Google no emite recompensas a las personas que están en las listas de sanciones, o que se encuentran en los países que forman parte de las listas de sanciones: Cuba, Irán, Corea del Norte, Sudán y Siria.

¿Quién determina si el informe es elegible para una recompensa?:

El panel de recompensa se compone de los miembros del equipo de seguridad de Google.
Actualmente, los miembros permanentes son Artur Janc, Eduardo Vela Nava, Jeremy Zimmer, Martin Straka, y Michal Zalewski.
También se incorporan al equipo otros miembros de forma rotativa.

¿Cómo reportar un informe de vulnerabilidad de Google?:

Accede a la siguiente dirección: Security Bug Report

¿Qué es bughunter.withgoogle.com?:

Es el tablero de instrumentos para todos los investigadores de seguridad que participan en el Programa de Recompensa de Vulnerabilidad (VRP) de Google.

Si quieres aparecer en el salón de la fama tienes que presentar un informe de error válido.
El salón de la fama se ordenan en función de una combinación de:

  • Cantidad: informes de errores válidos conducirán a una mejor clasificación. Informes falsos pueden llevar a un rango inferior.
  • Gravedad: errores más graves conducen a una mejor clasificación.
Yo he tenido la suerte de encontrar un error de seguridad en uno de sus productos y formo parte del Salón de la Fama de Google :))

Google Vulnerability Reward Program (HALL OF FAME)





Soluciones a problemas comunes de "no vulnerabilidad"::


La lista completa de programas de caza de bugs de 2019::

Recientemente, una lectora del blog me ha proporcionado información valiosa de los programas de recompensas más importantes en la actualidad(Bug Bounty): La lista completa de programas de caza de bugs de 2019.
Muchas gracias Verónica :))


17 de agosto de 2015

Gadget para aumentar tu número de suscriptores - Blogger (Web Storage de HTML5)

Ya hablamos de la importancia del boletín electrónico o newsletter como herramienta de marketing y comunicación. También mencionamos las tres opciones de programación para implementar el código del gadget: a través de la ip del visitante, utilizando cookies o los métodos de almacenamiento del W3C Web Storage.

Y como lo prometido es deuda, voy a implementar el código de programación utilizando el método localStorage de HTML5.
Pero antes de ponernos a codificar vamos a realizar una breve introducción.

En las nuevas especificaciones de la W3C, HTML5 incorpora nuevos métodos para guardar información de los usuarios en los navegadores.
Para ello entran en acción Local Storage y Session Storage: estos dos métodos nos permiten guardar en el navegador pares de nombre/valor de manera muy sencilla.

¿qué ventajas fundamentales proporciona respecto de las cookies?

  • el almacenamiento DOM (DOM Storage) está diseñado para facilitar una forma amplia, segura y sencilla para almacenar información alternativa a las cookies.
  • la información se guarda en cliente web y no viaja con cada petición.
  • la capacidad de almacenamiento varía entre 2.5 y 5Mb dependiendo del navegador mientras que en las cookies el límite es de 4Kb.
    En la siguiente página web puedes comprobar cuantos caracteres puede almacenar tu navegador: Web Storage Support Test
  • el almacenamiento local es por dominio. Todas las páginas de un dominio pueden acceder a los mismos datos.
  • están soportados por los navegadores más modernos del mercado (IE/Edge, Firefox, Chrome, Safari, Opera, iOS Safari, Opera Mini, Android Browser, Blackberry Browser, Opera Mobile, Chrome for Android, Firefox for Android, IE Mobile, UC Browser for Android).
    Toda la información en Caniuse: Web Storage - name/value pairs

Estos son los pasos a seguir para añadirlo a nuestra web o blog


  1. Selecciona la entrada Diseño del panel principal de Blogger.
  2. Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
  3. Desplazamos el scroll de la nueva ventana hacia abajo hasta llegar a la opción:

    HTML/JavascriptAñadir
    Añade una característica de un tercero u otro código a tu blog.





  4. En la caja Contenido pega el siguiente código:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jmacuna/subscription-feedburner@master/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    idleTime = 0;
    $(document).ready(function(){
    try{
     $limit = 5; //seconds
     if(!localStorage.test_status){
      function timerIncrement() {
       idleTime = idleTime + 1;
       if (idleTime > $limit) {
        $('html, body').css('overflow', 'hidden');
        $('.subs-popup ').fadeIn('slow');
        idleTime = 0;
       }
      }
      // Increment the idle time counter every second.
      var idleInterval = setInterval(timerIncrement, 1000); // 1 second
      // Zero the idle timer on mouse movement.
      $(this).mousemove(function (e) {
       idleTime = 0;
      });
      $(this).keypress(function (e) {
       idleTime = 0;
      });
      localStorage.test_status = 1;
     }
     $('.email-close').click(function() {
      $('.subs-popup').fadeOut('slow');
      $('html, body').css('overflow', 'auto');
      $limit = 9999;
     });
    }catch(e){
     alert(e.message);
    }
    });
    </script>
    <div class="subs-popup">
     <div id="newsletter">
      <div class="email-close">X</div>
      <div class="newsletter-wrap">
       <h4>Suscríbete y recibe<br/>contenido exclusivo</h4>
       <p>Las últimas novedades del blog<br/>directamente a tu email.<br/><br/></p>
       <form action="http://feedburner.google.com/fb/a/mailverify?loc=es-ES&uri=[FEED_DE_TU_BLOG]" method="post" onsubmit="$('.email-close').click();window.open('about:blank', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" novalidate="">
        <input name="uri" type="hidden" value="bloggertrix"/>
        <input name="loc" type="hidden" value="en_ES"/>
        <input type="email" value="" name="email" placeholder="Tu e-mail aqui..." required=""/><br/><br/>
        <input type="submit" value="Suscribirme" class="button-popup">
       </form>
      </div>
     </div>
    </div>
    
  5. Por último hacemos click sobre el botón Guardar

Vamos a analizar los parámetros que intervienen en el código:

  • $limit = 5: tiempo de espera en segundos (desde que se carga la página) para mostrar el popup de suscripción.
  • [FEED_DE_TU_BLOG]: feed de suscripción de tu blog.
    Más información en ¿Qué es el feed de un sitio?
Como indicación final, resaltar que la hoja de estilo que utilizo (style.css) así como el formulario son totálmente personalizables.




13 de agosto de 2015

Big data: el problema del almacenamiento de nuestros datos genéticos


Según un estudio publicado recientemente en la revista de ciencia biológica PLOS Biology, (http://journals.plos.org/plosbiology/) se estima que, en los próximos 10 años, generaremos entre 2 y 40 exabytes anuales de datos genéticos.

Un exabyte son 1024 petabytes o, para entendernos mejor, cada exabyte es, aproximadamente, un millón de veces el espacio de almacenamiento con que cuentan nuestros ordenadores personales domésticos.


Quizá no creyeras que nuestros genes pudieran ocupar tanto espacio, pero la verdad es que esto solo es el principio de la genética moderna.
Desde que se consiguió secuenciar el genoma humano, muchas ramas de la ciencia vieron en él una especie de panacea, un atlas supremo de conocimiento del ser humano, que contaba con el potencial de de detectar, curar e incluso erradicar genéticamente cientos de enfermedades.

Por ello, la ciencia se ha volcado en la genómica, y en los últimos años se están dando grandes pasos en este campo de investigación.
A medida que los científicos encuentran nuevas formas de relacionar la genómica con la salud, cada vez se secuencian y analizan más datos genéticos con el objetivo de obtener muestras de grupos o poblaciones específicas.
El estudio estima que, para el año 2025, más de un billón de personas habrá secuenciado su genoma.




¿cuánto ocupa en datos una secuencia genómica?

Con la tecnología y los medios con los que contamos actualmente, el conjunto de los datos relativos al genoma de una persona ocupa alrededor de 100 gigabytes de espacio. Al ritmo al que se desarrollan las investigaciones actualmente, la cantidad de datos genéticos se duplica cada siete meses.

No es necesario hacer muchas operaciones matemáticas para darnos cuenta de que, a pesar de los esfuerzos de los investigadores y las empresas que trabajan en este campo, en un espacio de tiempo relativamente corto tendremos una estratosférica (y problemática) cantidad de datos que almacenar y gestionar: lo único claro, por el momento, es que el software actual de procesamiento de datos no está preparado para la revolución genética.

El mismo problema se repite en otras ramas de la ciencia; los astrónomos, por ejemplo, llevan años de investigación incesante en busca de una solución para almacenar y tratar la enorme cantidad de información que recogen a diario. A día de hoy, la única posibilidad viable son las supercomputadoras, pero incluso éstas se quedan cortas cuando el volumen de datos continúa creciendo de forma exponencial.

El problema no solo está presente en el big data, y no somos conscientes de que nuestra vida digital deja mucho más "residuo" de lo que pensamos en forma de datos: YouTube y Twitter llevan tiempo enfrentándose a problemas similares por el almacenamiento de su ingente volumen de archivos. Aún así, los datos que cada año se recogen sobre genómica humana suman, aproximadamente, el 25% de los que produce YouTube, y los autores del estudio estiman que para 2025 el volumen anual de producción de ambos datos irá a la par.

Con estas predicciones de futuro, los investigadores genéticos necesitarán desarrollar nuevas formas de almacenar, analizar y distribuir los datos.
Ciertas organizaciones, como el New York Genome Genter, han tratado de crear su propia base de datos interna, dando prioridad a aquellos archivos que utilizan con más frecuencia, pero la solución más viable actualmente para este tipo de big data parece venir de la mano de Google y Amazon, que están desarrollando una plataforma de cloud computing para datos genéticos.


* Artículo cortesía de Marah Villaverde *



Marah Villaverde


Redactora | geekpunto.com



BIO

Bloguera, fotógrafa, traductora, inquieta por naturaleza y apasionada de la tecnología y los gadgets. Escribe en geekpunto.com, y en su vida offline disfruta de los gatos, la lluvia, el mar, el cine y las letras.


Tal vez te interese conocer los sistemas de Big Data o datos masivos:


Introducción a los sistemas de Big Data o el nuevo paradigma de los datos masivos



7 de mayo de 2015

Como crear extensiones para tu navegador Google Chrome

A modo de repaso, las extensiones son aplicaciones o pequeños programas que una vez instalados en el navegador facilitan la experiencia de usuario (más info). Google nos permite publicarlas en su tienda conocida como "Chrome Web Store".
Puedes acceder a la galería a través de la dirección https://chrome.google.com/webstore

Google Chrome es uno de los navegadores más populares y su uso se ha extendido por sus principales características:

  • fácil de instalar y utilizar
  • rápido y seguro
  • y cuenta con una serie de propiedades que le dan un valor añadido: marcadores, extensiones, temas, aplicaciones y otros recursos.
Desde esta perspectiva, contar con una extensión o aplicación de tu Blog supone una ventaja que mejorará la imagen de nuestra web o marca.

Cómo desarrollar una extensión en Google Chrome

Asegúrate de que los elementos que desarrolles sigan las directrices establecidas en las Políticas del programa para desarrolladores de Chrome Web Store y en el Acuerdo para desarrolladores de Google Chrome Web Store.

Además, Google verifica que el elemento que vas a desarrollar es un elemento oficial de un sitio web del que eres propietario (lo hace a través de las herramientas para webmasters de Google - Google Webmaster Tools).

  • lo primero que debemos hacer es crear una carpeta en el directorio que desees. Recomiendo darle el nombre de tu blog o página web.
  • a continuación crea un fichero de texto y ponle el nombre manifest con la extensión json: manifest.json
El fichero "manifest.json" contiene las siguientes variables:

{
"manifest_version": 2,
"name": "Actualidad - Blog Nuevas Tecnologías",
"author": "José María Acuña Morgado",
"version": "1.0",
"description": "Instala esta extensión para estar al día en recursos digitales, webs de referencia, SEO, Social Media, programación, smartphones.",
"browser_action":
 {
  "default_icon": "icon.png",
  "default_popup": "popup.html"
 }
}

Los valores a cambiar son:

  • name: Nombre de la extensión que se mostrará en Chrome Web Store
  • author: Este parámetro es opcional y se refiere al nombre del autor del blog o página web
  • description: Descripción de la utilidad de la extensión (máximo 132 caracteres).
Importante:

- si vamos a hacer referencia a alguna librería externa (por ejemplo <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>) tenemos que establecer permisos añadiendo la directiva permissions.
"permissions": ["https://*.googleapis.com/"]

Además, dentro de la carpeta, tenemos que añadir:

  • un icono de 128x128 píxeles con el nombre icon y la extensión png: icon.png. Es el icono que se instalará en la barra de direcciones del navegador.
  • una plantilla html con el nombre popup: popup.html. En este fichero, escribimos el código html necesario para implementar nuestra extensión.
  • también podemos insertar ficheros de presentación de estilos (css) y ficheros javascript en nuestra carpeta.

Como publicar tu aplicación en Chrome Web Store

Deberás pagar una cuota de registro de desarrollador única de 5 USD para empezar a crear tu primer tema o tu primera extensión o aplicación. Solo deberás pagar esta cuota una vez y podrás publicar hasta un máximo de 20 recursos.

Una vez creados los archivos (html e icono), empaquetamos la carpeta en un archivo comprimido o zip.

El siguiente paso es acceder al Panel para desarrolladores en https://chrome.google.com/webstore/developer/update y subir la carpeta comprimida



Si todos los pasos son correctos, Google te redirigirá a una pantalla para que especifiques los parámetros de configuración:

  • Descripción detallada
  • Imágenes de capturas de pantalla
  • Enlace a un vídeo de YouTube (opcional)
  • Mosaico pequeño (440x280)
  • Mosaico grande (920 x 680)
  • Imagen de desplazamiento (1400 x 560)
  • Sitios web
  • Categoría
  • Precios y pagos (en el caso de que pretendas vender tus elementos en Chrome Web Store)
  • Etcétera...
Al cabo de unos minutos, tu programa estará listo para usarse a través del almacén de Chrome.
Para instalarla en el navegador, pulsamos sobre el botón Añadir a Chrome



Y se instalará un icono en la barra de dirección dónde al hacer click, se desplegará un popup flotante con la funcionalidad de tu extensión.




Si te ha resultado útil el tutorial y deseas instalarte la extensión de Actualización del Blog, puedes hacerlo a través del enlace (siempre que quieras, la puedes desinstalar :)
Extensión Google Chrome - Actualización artículos del Blog Nuevas Tecnologías
También puedes valorarla o comentar lo que quieras.

Tal vez te interese conocer o utilizar algunas de las extensiones que he creado y subido a Chrome Web Store:


App/Extension for Google Chrome


Muchas gracias!!


17 de marzo de 2015

Google penalizará la web móvil sin diseño responsive a partir del 21 de abril

Google anuncia en su blog oficial que sigue adaptando sus algoritmos a los patrones de uso a medida que el número de usuarios que accede a internet a través de dispositivos móviles aumenta de forma exponencial.
A partir del 21 de abril, los contenidos web que no se adapten a la tecnología móvil sufrirán penalizaciones en su ranking de resultados de búsquedas.

Este cambio afectará a las búsquedas móviles en todos los idiomas a nivel mundial y tendrá un impacto significativo en los resultados. En consecuencia, los usuarios encontrarán más fácil obtener resultados relevantes, de alta calidad de búsqueda y optimizados para sus dispositivos.

Google pone a disposición de los usuarios una guía de sitios web optimizados para móviles: https://developers.google.com/webmasters/mobile-sites/get-started/

Enlaces de interés

  • Prueba de optimización para móviles (mobile-friendly): introduce la url de tu web y te indicará si la página tiene un diseño optimizado para móviles.



  • Personaliza el software del sitio web para usuarios de móviles: si tu web site utiliza software de terceros (WordPress, Joomla!, Drupal, Blogger, vBulletin, Tumblr, DataLife Engine, Magento, PrestaShop, Bitrix, Google Sites), esta completa guía de Google te resultará muy útil.
  • Guía SEO para móviles: te ayuda a configurar el sitio para varios dispositivos para que los motores de búsqueda comprendan la configuración y evitar errores habituales.
  • Usabilidad móvil: la usabilidad móvil resulta del todo relevante para obtener unos resultados de búsqueda óptimos.
  • PageSpeed Insights: introduce la url de tu sitio web y al pulsar el botón Analizar aparecerán los resultados de Velocidad y Experiencia de Usuario para móviles en una escala 1/100.


Aspectos básicos a tener en cuenta

  • si usas diseño web adaptativo en el que el código HTML es el mismo para todos los dispositivos y son las CSS las encargadas de modificar el procesamiento de la página, se recomienda el uso de media queries.

    Media Queries es un módulo CSS3 que permite la representación de contenido para adaptarse a condiciones como la resolución de pantalla. Se convirtió en un estándar recomendado por la W3C en junio del 2012 y es un principio básico de la tecnología de diseño web adaptaivo. Fuente Wikipedia: Media Query.

    Ejemplo: @media only screen and (max-width: 620px) {...}.

  • si optamos por la publicación dinámica de diferentes HTML en la misma URL, el servidor responderá en función del user-agent que solicite la página. Se recomienda que el servidor envíe una sugerencia para detectar el contenido móvil. Esta sugerencia se implementa mediante la cabecera Vary HTTP.

    El contenido de la respuesta variará en función del user-agent que solicite la página. Si el servidor ya utiliza la cabecera Vary HTTP, puedes añadir User-Agent a la lista que ya se ha proporcionado.

  • en el caso de URL para móviles independientes, la recomendación es la siguiente:

    1. para las páginas de escritorio, añade una etiqueta de enlace especial rel="alternate" que señale la URL para móviles.

      Ejemplo: <link rel="alternate" media="only screen and (max-width: 620px)" href="http://m.example.com/default"/>
    2. y para las páginas para móviles, añade una etiqueta de enlace rel="canonical" que señale la URL para equipos de escritorio.

      Ejemplo:<link rel="canonical" href="http://www.example.com/default"/>
Extracto de las recomendaciones para Developers de Google: Google Developers

Errores comunes en los sitios desarrollados para smartphones que debemos evitar:

  • los vídeos no se reproducen porque no usamos tecnología html5 estándar.
  • redireccionamientos defectuosos.
  • error 404 (Page Not Found) sólo para smartphones.
  • baja velocidad de carga de la página.
  • no prestar atención a la usabilidad: tamaño incorrecto de los textos e imágenes, colores inapropiados, ubicación inadecuada de las opciones de navegación, falta de implementación de los atajos de teclado, etc.
  • llamadas a enlaces externos que se abren en otras ventanas.
  • ausencia de un apartado de contacto o método de retroalimentación.
  • no proporcionar un enlace al sitio web completo.



6 de febrero de 2015

Librerías para Blogger alojadas en la CDN de Google

Una CDN (Content Delivery Network) o 'Red de Distribución de Contenidos' es un conjunto de servidores que redistribuyen localmente el contenido y guardan en caché los archivos permitiendo acelerar la carga de las páginas, mejorando los tiempos de respuesta y reduciendo el consumo de ancho de banda.

Vamos a poner como ejemplo un blog.

Todo el contenido del blog lo sirve el hosting dónde está alojado, haciendo uso de su propio ancho de banda.
Con el paso del tiempo tu blog irá creciendo en suscriptores y número de visitas.
Supongamos que publicas el post de tu vida que atrae centenares de miles de visitas y se te cae el servicio de hosting por exceso de peticiones o el acceso a tu página web es demasiado lento porque el ancho de banda se colapsa. Las consecuencias son evidentes: los usuarios acabarán no leyendo el artículo por lo que perderás clientes potenciales.

Entre otras cosas, una CDN evita esta situación:
si tu contenido (vídeos, imágenes, música, documentos, etc.) se replica en diferentes redes y países dirigiendo las solicitudes de los usuarios hasta la copia más cercana a su red, la probabilidad de que tu hosting se sature disminuye consiguiendo unos tiempos de respuesta más rápidos.


Imagen de Wikipedia: sistema tradicional de distribución de datos y CDN.

El espacio de almacenamiento que nos ofrece el servicio Blogger de Google es gratuito y está destinado exclusivamente para nuestro blog (entradas, texto, plantillas, comentarios, widgets y poco más), lo cual plantea ciertos inconvenientes.

Cuando publico un post, procuro dotarle de dinamismo añadiendo gráficos y vídeos explicativos. Blogger lo resuelve permitiendo subir imágenes en local, desde una url externa, desde su servicio Picasa, etc.
En el caso de los vídeos podemos publicarlos en Youtube y referenciarlos desde nuestra plantilla html.

Pero ¿qué ocurre si quiero utilizar ficheros de presentación css (hojas de estilo en cascada) o js (javascript) para implementar funcionalidades en mi web?

  • los alojamos en servicios externos: Google Drive, Dropbox ...
  • accedemos directamente a los que nos ofrecen las CDN de terceros
Blogger hace uso de sus CDN como podemos ver en las siguiente captura de pantalla de Firebug (haz clic en la imagen para ampliarla).



Google tiene su propia CDN con las librerías javascript de código libre y css más utilizadas por los desarrolladores web.
Ofrece un listado con el nombre de las librerías alojadas así como las versiones soportadas.

Para cargar una de sus librerías alojadas, copia y pega el fragmento HTML en tu página web. Por ejemplo, para cargar jQuery, insertamos el código <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>.

Recomienda cargar las librerías de la CDN a través del protocolo HTTPS, incluso si tu propio sitio web sólo utiliza HTTP.
Los archivos de la CDN se procesan con cabeceras CORS y Timing-Allow y permiten ser almacenados en caché durante un año.

Librerías disponibles:
(fecha de última actualización 2 de febrero de 2015)

Toda la información en https://developers.google.com/speed/libraries/devguide




Otras páginas que ofrecen librerías javascript y css en su Red de Distribución de Contenido son:


También podemos encontrar numerosas CDN para Wordpress.
Algunos plugins son gratuítos:


El siguiente vídeo (en inglés) nos habla de MaxCDN, una CDN de pago para integrar con WordPress, Drupal, Joomla, Magento, PrestaShop, Social Engine, X-Cart, IP.Board, vBulletin, OpenCart, PyroCMS, MODX, Custom.




2 de febrero de 2015

Resalta el código fuente de tu web con Google Code Prettify

¿cuántas veces hemos recurrido a internet para consultar lenguajes de programación tan conocidos como html e insertar fragmentos de código en los blogs, foros o cualquier página web?
La manera más fácil y rápida de entender el código fuente es resaltar su sintáxis con diferentes colores.


En la red podemos encontrar multitud de servicios online para resaltar bloques de código fuente. Algunos de los más conocidos son:

Otras páginas nos ofrecen la posibilidad de descargar archivos (ficheros javascript y css) para instalar en nuestra web:

De todas las opciones disponibles he decidido usar Google Code Prettify por dos razones de peso:

  • No necesito instalar ninguna librería
  • Es muy fácil de usar: para integrarlo en mi blog, voy a escribir muy pocas líneas de código (a continuación os mostraré varios ejemplos).
Las características fundamentales de este resaltador de códigos son:

  • No bloquea la carga de la página mientras se ejecuta
  • Detecta automáticamente los bloques de código y el lenguaje de programación usado
  • Reconoce los lenguajes tipo C, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Ruby, PHP, VB, y Awk
  • Es compatible con la mayoría de los navegadores web
La forma de proceder es la siguiente:

  • Escribimos la línea

    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&skin=default" defer="defer"></script>

    dónde skin es la hoja de estilos que vamos a cargar.
    skin = default
    skin = sons-of-obsidian
    skin = sunburst
    skin = desert
    skin = doxy
  • A continuación escribimos la etiqueta <pre class="prettyprint">
  • Introducimos el código que vamos a colorear dentro del tag pre.
    Importante: hay que reemplazar todos los < por &lt; y los > por &gt; para que el navegador entienda que es texto plano.
  • Por último, cerramos la etiqueta </pre>
Ejemplo con 'default':



Ejemplo con 'sons-of-obsidian':



Ejemplo con 'sunburst':



Ejemplo con 'desert':



Ejemplo con 'doxy':



Además podemos numerar las líneas de código para cada uno de los estilos mencionados.
Para ello, tenemos que añadir la clase linemus al tag pre de la siguiente manera:
<pre class="prettyprint linenums">
Ejemplo con 'default' y 'linemus':



Documentación oficial:

https://github.com/google/code-prettify/blob/master/README.md
https://github.com/google/code-prettify
https://rawgit.com/google/code-prettify/master/examples/quine.html



4 de agosto de 2014

¿Cómo funcionan los buscadores?

En España si queremos tener visibilidad en buscadores y aprovechar el potencial del canal, es necesario tener un buen posicionamiento en Google. El resto de los buscadores (Bing, Yahoo, Ask, AOL, etc) sólo se usan de forma marginal y el tráfico que generan suele ser residual.


¿Cúal es el funcionamiento de un buscador de Internet?



Más información sobre Google Adwords y posicionamiento orgánico o SEO

Operadores avanzados

Señales de calidad

  • Cuando un usuario realiza una búsqueda, el algoritmo del buscador realizará una consulta a su base de datos y valorará una serie de factores entre las páginas de su índice que contengan la palabra buscada.
  • La página que parezca más relevante aparecerá situada en lo más alto.
  • La relevancia se obtiene mostrando señales de calidad.
  • El trabajo de un buen SEO es identificar estas "señales de calidad" mediante ingeniería inversa para aplicar las conclusiones obtenidas a las webs que se estén intentando posicionar.

 Cargando gráfico circular... por favor, espere


Nivel de Autoridad y características del Dominio (Domain Level Link Authority Features):
- describe métricas relacionadas con la autoridad y calidad de los enlaces que apuntan al dominio.

Métricas de Enlaces en la Página (Page Level Link Metrics):
- este factor esta relacionado con el número de enlaces de cada una de las páginas que componen un sitio web.

Utilización de Keywords en la Pagina (Page Level Keyword Usage):
- estas características describen la utilización de palabras claves y frases en ciertas partes del código HTML (titles, atributos alt, H1, H2 etc). Esto es, los factores on-page.
Algunas herramientas para el estudio de palabras clave son: Métricas del Nivel de Marca en el Dominio (Domain Level Brand Metrics):
- estas características describen elemenetos Root-Domain relacionados con el branding y la fortaleza de la marca.

Datos de Tráfico de la Página (Page Level Traffic Data):
- estos elementos describen el comportamiento del tráfico y del usuario dentro de la página web (asumiendo que Google y Bing, a través de sus herramientas, navegadores y dispositivos móviles, tienen acceso a una gran cantidad de tráfico web para su análisis).

Métricas Sociales de la Página (Page Level Social Metrics):
- estos valores están relacionados con métricas de terceras partes (likes, +1, tweets, RTs, etc...) que miden la influencia social de la página.

Nivel de Utilización de Keywords en el Dominio (Domain Level Keyword Usage):
- este factor cubre la forma en la que las keywords son utilizadas en el Root-Domain o en el Sub-Domain y su impacto en nuestro posicionamiento.

Características Agnósticas del Nivel de Keywords (Domain Level Keywords Agnostics):
- es un análisis del dominio pero dejando las keywords de lado. Este factor agrupa otras características on-site como pueden ser la longitud del dominio en caracteres, la cantidad de errores de la página, el nivel de originalidad del contenido, velocidad de carga, etc.

Factores On-Page

Los factores on‐page son aquellos que están dentro de nuestra página y que están bajo nuestro control directo.



Factores Off-Page

El peso de los factores que influyen en el ranking de una página se basa en la Optimización Off-Page, especialmente en la cantidad y calidad de los enlaces que apuntan a nuestras páginas.
Fuentes de enlaces:



Factores del Dominio

Una combinación de factores on‐page y off‐page son los que se refieren a nuestro dominio en su conjunto.



Extracto del curso "SEO: estrategia de Posicionamiento" impartido por Plenummedia, empresa de tecnología especializada en marketing digital para PYMES

NOTA: el pasado día 7 de agosto Google anunciaba en un artículo en su blog para webmasters(ES) los beneficios de forzar comunicaciones HTTPs en las páginas. Por tanto, habrá que tomar este nuevo factor como variable o señal de ranking en la relevancia de las búsquedas.



26 de marzo de 2014

Cómo utilizar un dominio personalizado en Google Drive

Como ya indicaba en el post anterior, podemos alojar nuestro sitio web con Google Drive. Es seguro, rápido y gratis. La parte negativa es que la URL es demasiado larga y difícil de recordar. A diferencia de Blogger y Google Site, Google Drive no ha incluido la función de dominio personalizado.


Voy a proponer dos servicios de acortamiento de url especiales para Google Drive:
GDrives proporciona una dirección web acortada para la publicación de sitios con Google Drive. No necesitamos registrarnos en su página y la obtención de la url es muy sencilla y precisa de muy pocos pasos.

Para ello GDrives dispone de un formulario con dos cajas de texto en las que introduciremos el ID de Carpeta y el Alias personalizado



Si pulsamos el botón rojo "Obtener su alias gratis!", nos redirigirá a una página con la nueva url: http://gdriv.es/sociosparadisesl



A diferencia de otros acortadores de enlace como Bit.ly o Goo.gl, GDrives enmascara el ID de carpeta por lo que los visitantes siempre verán su alias; además soporta enlaces o directorios de distintos niveles.
En nuestro caso concreto hemos convertido la url https://googledrive.com/host/0B5G3cbs08P16WFFtOWI3UmJSbWM/ en http://gdriv.es/sociosparadisesl

Desafortunadamente, GDrives no permite la personalización con dominio propio.

Gweb.io es un servicio que le permite utilizar Google Drive como una solución de alojamiento web usando un subdominio gweb.io o su propio nombre de dominio.

Incluye hosting para sitios web estáticos de forma ilimitada, un formulario de contacto, SSL libre para subdominios gweb.io y la posibilidad de utilizar su propio SSL para dominios personalizados.
Puedes probarlo gratis durante 60 días y la versión de pago tiene un precio de 9.99 dólares por año, pudiendo cancelar el servicio en cualquier momento.

Los pasos a seguir son:

  • Una vez iniciada sesión con nuestra cuenta de Google, accedemos a la dirección https://gweb.io y hacemos click en la sección Login situado en la parte superior derecha.
  • Seleccionamos una carpeta del árbol de directorios My Drive y escribimos el nombre de un subdominio en la caja de texto Domain. A continuación pulsamos el botón Save.


La aplicación ha creado dos subdominios:



Si queremos obtener nuestro dominio personalizado tendremos que modificar los registros DNS. Consulta cómo apuntar un dominio a gweb para obtener información sobre cómo configurar un DNS.

El vídeo Custom Domain On Google Drive Hosted Website ilustra perfectamente lo comentado en el post: