Notas desde el navegador

JMiur [E]

El artículo de Jose Jesus Perez Aguinaga llamado One line browser notepad me llamó la atención, no sólo por lo original de la idea sino por el grado de participación y aportes de los lectores, algo que, no suele ser habitual en estos tiempos donde sólo vale la inmediatez y la "practicidad" de las cosas.

Seguramente, no es algo que maraville ya que es posible que haya decenas de sistemas similares pero, no deja de ser interesante ya que demuestra dos cosas: que siempre se puede darle una vuelta de tuerca más a algo y que vale la pena hacerlo.

La idea es simple; usar el navegador para tomar notas rápidas sin necesidad de agregar plugins o aplicaciones extras, valiéndose sólo de un bookmarklet, algo que puede ser agregado a los marcadores.

¿Cómo funcionaría? Basta abrir una ventana o pestaña y escribir lo siguiente en la barra de direcciones:

data:text/html, <html contenteditable>

Haciendo eso, la ventana se convertirá en un editor de textos sencillo donde podremos escribir cualquier cosa. Bastaría guardarla así en los marcadores para no tener que tipear eso cada vez que lo necesitemos.

De ahí en más, comenzaron a aparecer variaciones de todo tipo:

data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />

data:text/html, <body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

data:text/html;charset=utf-8, <html contenteditable>

data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false">

data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;font-family:monaco;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false"><h1>Text Editor</h1><p>Start Here.

data:text/html, <style>html,body{margin: 0; padding: 0;}</style><textarea style="font-size: 1.5em; line-height: 1.5em; background: %23000; color: %23EEE; width: 100%; height: 100%; border: none; outline: none; margin: 0; padding: 90px;" autofocus placeholder="empezar a escribir" />

data:text/html,<pre onkeyup="(function(d,t){d[t]('iframe')[0].contentDocument.body.innerHTML = d[t]('pre')[0].textContent;})(document,'getElementsByTagName')" style="width:100%;height:48%;white-space:pre-wrap;overflow:auto;" contenteditable></pre><iframe style="width:100%;height:48%">

Una vez que terminamos de escribir, sólo necesitamos guardar el resultado como haríamos con cualquier página web.

Incluso hay quien llevó la idea al extremo de crear un bookmarklet que guarda cualquier contenido seleccionado.

boingPic: Sólo un experimento

Que nadie se crea que esto tiene alguna utilidad práctica inmediata, es para pasar el rato, un experimento que usa jQuery y que no tiene mayores pretensiones. Creado por kelvinluck.com/.

¿Será que todo tiene que tener alguna utilidad?

<style>
  /* este es el formulario superior */
  #boing-container { text-align: center; }
  #boing-container input {
    background: #000;
    border: 2px solid #444;
    border-radius: 4px;
    color: #CCC;
    padding: 5px;
  }
  #boing-container input[type=text] {
    text-align: center;
    width: 400px;
  }
  #boing-container input[type=submit]{
    background-image: -moz-linear-gradient(#888, #222);
    background-image: -webkit-linear-gradient(#888, #222);
    background-image: -o-linear-gradient(#888, #222);
    background-image: -ms-linear-gradient(#888, #222);
    background-image: linear-gradient(#888, #222);
    cursor: pointer;
    width: 80px;
  }
  #boing-container input[type=submit].loading{visibility:hidden;}
  .error{
    color: #F00;
    font-style: italic;
    margin: 5px 0;
  }
  /* este es el contenedor con la imagen y el efecto */
  #picHolder{
    height: 200px;
    margin: 50px auto;
    position: relative;
    width: 200px;
  }
  .block {position: absolute;}
  .default { /* los cuadraditos iniciales */
    border: 1px solid #FFF;
    height: 18px;
    width: 18px;
  }
</style>

<script>
  // recordar que se debe tener jQuery cargado */
  // boingPic.js - a javascript experiment by Kelvin Luck - http://www.kelvinluck.com/
  $(function(){
      var divs;
      var $picHolder = $('#picHolder');
      function initGrid(w, h, backgroundImage){
        $picHolder.empty();
        $picHolder.css({'width' : w,'height' : h});
        w /= 10; h /= 10;
        divs = [];
        for (var i=0; i<10; i++) {
          var t = i * h; var l = 0;
          for (var j=0; j<10; j++){
            var css = {top:t, left:l};
            if (backgroundImage){
              css.background = 'url(' + backgroundImage + ') no-repeat -' + l + 'px -' + t + 'px';
              css.width = w; css.height = h;
            }
            var d = $('<div class="' + (backgroundImage ? '' : 'default ') + 'block" />').css(css);
            d.data('t', t); d.data('l', l);
            divs.push(d);
            $picHolder.append(d);
            l+=w;
          }
        }
      }
      initGrid(200, 200);
      var mouseX = 1000; var mouseY = 1000;
      $(document).bind(
        'mousemove',
        function(e){
          var po = $picHolder.offset();
          mouseX = e.pageX - po.left; mouseY = e.pageY - po.top;
        }
      );
      var force = 1500;
      setInterval(
        function(){
          var po = $picHolder.offset();
          for (var i=0; i<divs.length; i++) {
            var $d = divs[i];
            var o = $d.offset();
            var x = o.left - po.left; var y = o.top - po.top;
            var xDif = mouseX - x; var yDif = mouseY - y;
            var distance = Math.sqrt(xDif*xDif+yDif*yDif);
            var tempX = x - (force/distance)*(xDif/distance); var tempY = y - (force/distance)*(yDif/distance);
            $d.css('left', ($d.data('l') - x)/2+tempX); $d.css('top', ($d.data('t') - y)/2+tempY);
          }
        },
        100
      );
      $imageUrl = $('#imageUrl');
      $imageUrl.bind(
        'focus',
        function(e){if ($imageUrl.val() == 'direccion url de una imagen y click en cargar ...') {$imageUrl.val('');}}
      ).bind(
        'blur',
        function(e){if ($imageUrl.val() == '') {$imageUrl.val('direccion url de una imagen y click en cargar ...');}}
      );
      var $submitButton = $('#loadImage');
      $submitButton.bind(
        'click',
        function(e){
          $submitButton.addClass('loading');
          var i = new Image();
          $(i).bind(
            'load',
            function(e){
              $submitButton.removeClass('loading');
              var w = i.width; var h = i.height;
              initGrid(w, h, $imageUrl.val());
            }
          ).bind(
            'error',
            function(){
              $submitButton.removeClass('loading');
              var $errorMessage = $('<div class="error">la URL de la imagen no es valida</div>');
              $submitButton.after($errorMessage);
              $errorMessage.hide().slideDown('normal').animate(
                  {'opacity': .9}, 2000
                ).slideUp(
                  'normal', function(){$errorMessage.remove();}
                );
              initGrid(20, 20);
            }
          );
          i.src = $imageUrl.val() || 'theresnoimagebythatname!';
          return false;
        }
      );
    }
  );
</script>

<div id="boing-container">
<form>
<input type="text" id="imageUrl" value="direccion url de una imagen y click en cargar ..." />
<input type="submit" id="loadImage" value="cargar" />
</form>
</div>

<div id="picHolder"></div>

Vagabundia

Notas desde el navegador

boingPic: Sólo un experimento

Espejito espejito

Jugando con fontBomb

Cursores mostacho y otras rarezas

últimas entradas

la puerta abierta

las etiquetas

Páginas