Qualche riga di HTML e si può trasformare un form per i commenti sul proprio sito web o blog in qualcosa di originale e "old sk00l".

di Nicola D’Agostino

Qualche riga di HTML e si può trasformare un banale form sul proprio sito web o blog in qualcosa di originale e “old sk00l”.

Per chi vuole scrivere e modificare testi come un vero smanettone Unix le scelte sono poche: Emacs o Vi.
Ora chi non ne può fare a meno o vuole fare uno scherzo da geek ai suoi visitatori può infilare Vi anche nei form di una pagina web trasformando una finestra o un tab del browser in una sessione di videoscrittura a linea di comando.

Benvenuti in jsvi

L’idea è venuta al provider Internetconnection.net che ha attrezzato una pagina dimostrativa tramite cui scrivere, modificare, salvare (i comandi sono quelli di vi, ovviamente) e stampare del testo.

Qui si apprende che l’implementazione si chiama jsvi, che è rilasciata con licenza GPL3 supporta quasi tutte le combinazioni di comandi di vi ed è in gran parte compatibile con il più moderno vim (Vi improved). C’è il controllo ortografico durante la digitazione, si integra con la clipboard del sistema operativo su cui è eseguito, e il codice è compatibile con numerosi browser, tra cui Firefox, Safari e Opera.

A casa nostra

Ancora più interessante è la possibilità di usare jsvi sul proprio sito web ad esempio nel modulo per commentare. L’idea è di Hackszine che spiega gli ingredienti necessari: scaricare il file vi.js, includerlo nel documento HTML e poi richiamarlo in un form con textarea che si vuole far “gestire” da vijs. Aggiungiamo che è importante anche usare il CSS di Internetconnectione pena problemi di visualizzazione.

Nella pratica la pagina web deve avere nell’head del sorgente HTML queste due righe


<script src="https://indirizzoal/vi.js"></script>
<link rel=stylesheet href="http://indirizzoal/vi.css" type="text/css">


e dentro il body:


<form>
<textarea name="body" onfocus="editor(this);">
Testo di prova da modificare per esperimenti.
</textarea> <- Zona gestita da jsvi. Spostatevi sopra oppure <a href="" onclick="editor(document.forms[0].elements.body);return false;">lanciate jsvi</a>
</form>


Ecco la dimostrazione pratica:

<br /> Testo di prova da modificare per esperimenti. </p> <p>La tecnica qui usata per ricreare un editor tipo vi è basata sulla spiegazione<br /> in http://www.hackszine.com/blog/archive/2008/06/jsvi_javascript_vi_for_web_for.html<br /> con il codice realizzato originariamente da Internetconnection.net ed usato in<br /> http://gpl.internetconnection.net/vi/</p> <p>Questa implementazione è stata curata da Nicola D’Agostino per un articolo<br /> commissionato e pubblicato in edicola sulla testata Hacker Journal.</p> <p>Happy hacking!<br />

Questo è un form gestito da jsvi.
Per azionarlo spostatevi sopra il form oppure lanciate jsvi.

Per uscire usate :q oppure :wq se volete salvare (e vedere) nel form quanto scritto.

La rivincita del Javascript

Javascript a lungo non ha goduto di buona fama: negli ultimi anni è però salito agli onori diventando una tecnologia di primo piano su cui poggia Ajax e tutto il cosiddetto “Web 2.0”. Framework e librerie come scriptaculous o prototype hanno rivoluzionato le concezioni di cosa si poteva fare l’ECMAscript (questo il suo nome ufficiale) e questo linguaggio di scripting ha recuperato terreno non solo sul linguaggio a cui si richiamava nel nome, Java ma anche su Flash, con diversi effetti di grafica e manipolazione dell’interfaccia utente.

Una versione di questo articolo è stata pubblicata su “Hacker Journal” n. 157 del 07/08/2008