Usant el navegador web com un Bloc de Notes en línia

Llegint els meus RSS em trobo amb un article en MuyComputer que al seu torn ens porta a un enviar de José Jesús Pérez Aguinaga, on ens mostra com usar el format data URI el qual al costat de la potència d'HTML5 i un nou element anomenat 'contenteditable', Ens permet crear una pàgina HTML que podrem usar com Bloc de Notes ..

Només hem de posar a la barra d'adreces:

data:text/html, <html contenteditable>

El enviar de José Jesús Pérez Aguinaga apareixen mitjançant els comentaris alguns altres exemples que val 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;">

El vaig provar en Firefox y Crom i funciona perfectament .. Suposo que hagi de funcionar en qualsevol altre navegador amb suport per HTML5 😀


El contingut d'l'article s'adhereix als nostres principis de ètica editorial. Per notificar un error punxa http://secbcaixabank.info/SECB-COVIDXNUMX-DENUNCIA-INSPECCION-PROTOCOLO-.pdf.

9 comentaris, deixa el teu

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.

  1.   Rots87 va dir

    jajaja curiositats de l'html5 suposo que em servira en algun moment en lloc d'estar obrint un altre editor ... thanks

  2.   Woqer va dir

    Home la veritable utilitat que li veig és veure com quedaria un codi html (si estàs dissenyant alguna cosa en html). M'explico: a la barra d'adreces fiques totes les opcions de html i després escrius el que sigui, així pots veure una «preview en calent», sense necessitat d'usar algun editor amb opcions de visualització d'HTML ni haver de caminar guardant arxius i obrint-amb el navegador.

  3.   sieg84 va dir

    també funciona en Opera

    1.    cristianhcd va dir

      prefereixo una i mil vegades les notes integrades en el navegador, cosa de costum

  4.   ecoslacker va dir

    Potser no els interessi a molts però al Konqueror funciona.

    Salutacions.

  5.   Elynx va dir

    ummm ... l'art d'innovar 😉

    Bé (i) ... Salutacions!

  6.   cronos va dir

    Molt interessant, tot integrat en el navegador no és mala idea, i a el parer això es donarà amb HTML5.

  7.   daniel c va dir

    aquesta buinisiimooo, em va venir re bé caminava buscant alguna cosa asi sense tenir q instal·lar alguna cosa google web store

  8.   dae va dir

    funciona amb vivaldi, i també li funciona el navegador de fitxers:
    file: // localhost /