Usando el navegador web como un Bloc de Notas online

Leyendo mis RSS me encuentro con un artículo en MuyComputer que a su vez nos lleva a un post de José Jesús Pérez Aguinaga, donde nos muestra como usar el formato Data URI el cual junto a la potencia de HTML5 y un nuevo elemento llamado ‘contenteditable‘, nos permite crear una página HTML que podremos usar como Bloc de Notas..

Solo tenemos que poner en la barra de direcciones:

data:text/html, <html contenteditable>

En el post de José Jesús Pérez Aguinaga aparecen mediante los comentarios algunos otros ejemplos que vale la pena mirar:

data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />
data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
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;">

Lo probé en Firefox y Chromium y funciona perfectamente.. Supongo que deba funcionar en cualquier otro navegador con soporte para HTML5 


Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

      Rots87 dijo

    jajaja curiosidades del html5 supongo que me servira en algun momento en lugar de estar abriendo otro editor… thanks

      Woqer dijo

    Hombre la verdadera utilidad que le veo es ver cómo quedaría un código html (si estás diseñando algo en html). Me explico: en la barra de direcciones metes todas las opciones de html y luego escribes lo que sea, así puedes ver una «preview en caliente», sin necesidad de usar algún editor con opciones de visualizacion de html ni tener que andar guardando archivos y abriendolos con el navegador.

      sieg84 dijo

    también funciona en Opera

         cristianhcd dijo

      prefiero una y mil veces las notas integradas en el navegador, cosa de costumbre

      ecoslacker dijo

    Tal vez no les interese a muchos pero en Konqueror funciona.

    Saludos.

      Elynx dijo

    ummm… el arte de innovar 😉

    Bien (y)… Saludos!

      cronos dijo

    Muy interesante, todo integrado en el navegador no es mala idea, y al parecer ello se dara con HTML5.

      daniel c dijo

    esta buinisiimooo, me vino re bien andaba buscando algo asi sin tener q instalar algo google web store

      dae dijo

    funciona con vivaldi, y también le funciona el explorador de archivos:
    file://localhost/