A través de Microsiervos, me he encontrado con un curioso artículo de José Jesús Pérez Aguinaga llamado One line browser notepad donde nos muestra como a través del elemento 'contenteditable' podemos para crear en una pestaña del navegador una página en blanco editable que usaremos como bloc de notas.

Para utilizarlo basta abrir una nueva pestaña y pegar el siguiente elemento en la barra de dirección de nuestro navegador.

data:text/html, <html contenteditable>

Que nos cargará una pestaña en blanco que podemos utilizar para realizar apuntes.

Lo interesante de este artículo es la cantidad de elementos que nos aportan en los comentarios a fin de personalizar este bloc de notas improvisado. Así en sus comentarios encontramos bastantes variaciones de este elemento.

Por ejemplo, para cambiar el tamaño y fuente de letra podemos usar el elemento:

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

Para que el texto aparezca un poco más separado de los bordes y con un mayor tamaño en la letra:

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

Una variación del anterior que nos añade el título 'Text Editor' en la pestaña (que por cierto, también podemos cambiar quitando lo marcado en rojo y colocando el texto que nos plazca):

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;">

Otra variación del segundo elemento que viene además con un texto prediseñado:

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.

Nota: Para editar el texto de la pestaña cambiar lo marcado en rojo y para editar el texto predeterminado cambiar lo que está en verde.

Para tener un bloc de notas con fondo negro y un texto que se eliminará automáticamente al empezar a escribir:

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" />

Para tener un bloc de notas con previzualicación del código HTML (el de mayor utilidad para un diseñador web a mi parecer):

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%">

Para que el fondo blanco cambie gradualmente a un color rojo a medida que escribes, y viceversa a medida que dejas de escribir:

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;">

Y este último que creé en base algunos elementos de los anteriores códigos:

data:text/html, <title>Bloc de notas</title><h1>Editor de Textos en el Navegador</h1><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="Escribe algo..." />

Entre muchos otros que podemos encontrar entre los comentarios del artículo, Sólo hay que animarse a checar cada uno de éstos y probar el que más nos guste. También podemos guardar esta pestaña en nuestros marcadores para no tener que escribir el código cada que necesitemos usarlo.

Todos estos elementos funcionan gracias el HTML5 por lo que funcionarán en todo navegador que soporte esta versión HTML. Yo lo he probado en Opera 28.0 así como en la última versión de Chrome y funciona perfectamente bien.

¿Te fue de ayuda este artículo?

Si el artículo te agrada puedes suscribirte a La Taberna para recibir las últimas actualizaciones del blog o bien, puedes dar me gusta en Facebook, seguir en Twitter o agregar a tus círculos de Google +. También puedes expresar alguna duda, sugerencia, o comentario a través de la página de contacto o aquí en la misma entrada.