Demo Github

Uno de los principios de una Buena UX/UI es que tu aplicación o website sea muy fácil de usar.

Puede pasar que un visitante esta leyendo un articulo de una pagina web tuya y encuentra un Personaje, texto o nombre raro que no sabe su significado. Entonces el va a proceder a abrir una nueva Pestaña o Ventana del navegador para buscarlo. Pero es un poco tedioso a veces, entonces esta aplicación puede ayudar a que las búsquedas sean mas practicas y rápidas.

A continuación usare jQuery para realizar una búsqueda con solo seleccionar el texto. Vamos por ello !

Creamos un archivo llamado script.js el cual contendrá nuestra función jquery que va realizar la función de busqueda con solo seleccionar el texto.

script.js

$(function(){
  
  $(document.body).bind('mouseup', function(e){
    
    var selection;
                          
    if (window.getSelection) {
      selection = window.getSelection();
    } else if (document.selection) {
      selection = document.selection.createRange();
    }                       
    
    selection.toString() !== '' && window.open("https://www.google.com/search?q= "+ selection +" ");

  });
            
});

Ahora para nuestra vista:

index.html

<div class="row">

   <div class="col-md-4">
      <div class="texto">
         <h3>Visión de conjunto</h3>
         <p>La realidad siempre esta en plena transformación y requiere un enfoque dinámico; la publicidad “tradicional” hace ya tiempo que ha dejado de ser la única solución. Los medios de comunicación se mezclan dando lugar a nuevas formas de comunicación y la atención se centra cada vez más en proyectos articulados y complejos.</p>
      </div>
   </div>
   <div class="col-md-4">
      <div class="texto">
         <h3>Experiencia</h3>
         <p>Contamos con mas de 6 años en el mercado, siempre innovando, utilizando y promoviendo las Nuevas tecnologias que aparecen. Siempre estamos ayudando a las empresas a lograr sus metas y objetivos, somos conscientes que estos son muy importantes para su empresa.</p>
         <p>Disfrutamos mucho hacer crecer su empresa gracias a la pasión y entusiasmo que ponemos a nuestro trabajo.</p>
      </div>
   </div>
   <div class="col-md-4">
      <div class="texto">
         <h3>Nuestra Meta</h3>
         <p>Ser la Consultora N°1 en Marketing y Publicidad del País y de Latinoamérica, en ayudar a lograr los objetivos de las Empresas, obteniendo siempre buenos resultados, que acompañen a mejorar las ventas e ingresos de la empresa y que esta se desarrolle mas de lo esperado.</p>
      </div>
   </div>
   <div class="row">
      <div class="col-md-12">
         <h4>La Magia en Internet existe. A diferencia de la vida real, en la Internet podemos soñar, viajar, leer, pensar sin costo alguno. Internet nos dio la oportunidad de ser Felices.</h4>
      </div>
   </div>

</div>

Listo !

Espero les sirva de mucho el Tutorial.

Sígueme en Twitter: @pepoflex

Hasta nuestro siguiente artículo !

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.