Tag Archives: javascript

contentEditable e i suoi demoni

Nell’ultimo anno, prima per lavoro e in questo periodo per esperimenti personali, mi sto addentrando nella programmazione Javascript, e l’ho fatto scalando la parete più ripida della montagna: contentEditable.

Ho deciso quindi di riassumere qui le varie idosincrasie che ho trovato, sperando che mi servano in futuro per evitare di sbattere di nuovo la testa a sangue contro il muro. Per tutti gli esperimenti ho usato Firefox (tra la 8 e la 10, più o meno)

Preparare l’ambiente

Ci sono due modi per usare contentEditable: definire tutto il documento contentEditable (di solito si usa con un iframe), o definire solo un elemento (la strada che ho seguito io). Nel primo caso basta, da Javascript:

document.contentEditable = true;

Nel secondo basta creare un elemento HTML con la proprietà contenteditable:

<article contenteditable="true"></article>

Fatto questo, io personalmente imposto tre proprietà:

document.execCommand("useCSS", false, true);
document.execCommand("styleWithCSS", false, false);
document.execCommand("enableObjectResizing", false, false);

La prima serve a usare <B> e <I> per fare grassetto e corsivo in Firefox, mentre Explorer (da quel che leggo) usa <STRONG> e <EM>. Se non la si specifica, Firefox riesce a fare peggio che non seguire la semantica di HTML: usa <span style=”font-weight: bold;”></span> e <span style=”font-style: italic;”></span>

La seconda fa la stessa cosa, ma una delle due è deprecata. Per compatibilità io le uso entrambi.

La terza serve ad evitare che, se ci sono oggetti come <img> o simili, l’utente possa ridimensionarli trascinandoli. Si può anche non specificarla, ma io preferisco controllare cosa fa l’utente tramite plugin jQuery che controllano gli spostamenti e i ridimensionamenti.

La cosa importante da notare è che TUTTI i comandi dati tramite execCommand() vanno eseguiti DOPO che c’è un elemento con contentEditable presente e visibile nel DOM. Se state creando l’elemento da Javascript, e fate (con jQuery)

var $el = $('<article />').attr('contenteditable', true');
document.execCommand("useCSS", false, true);
$('body').append($el);

Riceverete una bella eccezione nella console di Firefox. Basta spostare l’execCommand dopo l’append.

Non basta un contentEditable vuoto

Naturalmente non basta un <article contenteditable=”true”></article>, perché, come tutti gli elementi senza contenuto, le sue dimensioni sono 0x0, quindi è invisibile e soprattutto “incliccabile”, e perciò non c’è modo di scriverci dentro. Basta aggiungerci un figlio. Alcuni ci mettono un <br />, ma io preferisco un <p>, che però ha gli stessi problemi, quindi la sintassi completa è:

<article contenteditable="true">
  <p>
    <br />
  </p>
</article>

Perché questa tiritera? Perché Firefox, se state scrivendo dentro un <p>, quando premete Invio chiuderà automaticamente il <p> e ne aprirà un altro identico. In qualsiasi punto siate. Se siete fuori da un <p>, inserirà semplicemente un <br />, con buona pace della semantica (e per la gioia dei cialtroni che fanno spaziature verticali premendo Invio n volte).

Ma ancora non basta! Ma cosa vuole??

Se avete predisposto tutto il suddetto, e avere fatto la vostra toolbar (magari in un prossimo articolo vedremo come) con la possibilità di inserire grassetti, corsivi, liste, ecc., vi scontrerete con un problema assurdo: Se tentate di rendere “lista” il primo elemento del contentEditable, Firefox solleva un’eccezione. Bold e Italic funzionano perfettamente, solo le liste (e gli allineamenti, e forse qualcos’altro che non ho ancora scoperto) danno errore. E` un bug di Firefox, presente fin dalla 2.0, pare. Io l’ho aggirato così:

<article contenteditable="true">
  <p></p>
  <p>
    <br />
  </p>
</article>
Con un <p> vuoto (quindi dimensioni 0x0, quindi incliccabile) prima del contenuto vero. Brutto, ma funziona. Poi il codice si ripulisce lato server, perché ha TANTO bisogno di essere ripulito.

Gnome 3, mezzo disastro

L’ho visto in experimental, l’ho tenuto d’occhio per un po’ e finalmente una decina di giorni fa ho deciso di installarlo. Ma me ne sto pentendo.

L’ambiente è stato completamente rivoluzionato. Per alcune cose (poche) in meglio, per altre (molte) in peggio. In generale si nota una spiccatissima tendenze ad assomigliare più possibile a OSX. Per non dire che lo stanno copiando a man bassa. Continue reading

PHPday 2009, Verona, 15 e 16 maggio

L’evento italiano dedicato a PHP.

Il PHPday quest’anno si sposta a Verona, e cerca di dare un taglio ancora più ampio all’evento, allungando la durata a due giorni e introducendo il canale “community” per la presentazione di prodotti opensource. Ci saranno inoltre dei lightning talk, dei “dibattiti” improvvisati dai partecipanti.

Consultate il sito per il programma completo, tuttora non definitivo, ma già con diversi argomenti interessanti sul piatto, almeno per me. Inoltre sarà una buona occasione per incontrare sviluppatori preparati e competenti, merce abbastanza rara, purtroppo.

La novità mal recepita (al punto da generare un post molto risentito del presidente del GrUSP, il gruppo organizzatore) dai partecipanti, invece, è il prezzo di iscrizione, fissato in € 100 per la partecipazione a entrambe le giornate (60 per una sola), che aumenta a 160 (e 90) se ci si iscrive dopo il 16 aprile.

Secondo me, visto quello che viene offerto (soprattutto il pranzo e due buffet per ogni giornata) non è per niente alto, ma posso capire che, per chi è abituato a parteciparvi gratis dagli eventi precedenti, rappresenti un po’ un trauma.

Probabilmente l’affluenza sarà inferiore agli anni scorsi, ma di contro il pubblico sarà più mirato e interessato.

Credo che farò il possibile per partecipare.

FCKEditor + Galeon

= BOOOOOOOOOOM

Oggi, dopo un mese di sviluppo di un sito, lo metto in produzione e mi accorgo che con Galeon le textarea non vengono “trasformate” in editor wysiwyg da FCKeditor.

Subito penso che sia un bug nel plugin per jquery che integra FCK e vado sul suo sito ( http://www.fyneworks.com/jquery/FCKEditor/ ), e infatti nemmeno lì la demo funziona. Ma prima di scavare nel javascript, vado anche sul sito di FCK ( http://www.fckeditor.net/ ) . E nemmeno lì funziona.

E, naturalmente, la persona che deve usare quel sito usa sempre Galeon…

La cosa strana è che Epiphany (che usa la stessa versione di libnspr e di xulrunner) e Firefox/Iceweasel funzionano perfettamente. E che (Tiny)MCE funziona senza problemi anche in Galeon, visto che lo sto usando per scrivere questo post.

Toccherà scrivere un plugin per Zend Framework anche per MCE…

Nel frattempo, se qualcuno ha suggerimenti su come integrare FCK in Galeon, sono i benvenuti.

Alternative al CAPTCHA

Lo SPAM imperversa sempre di più, e sempre più spesso gli spammer sfruttano i form dei siti.

Ormai la percentuale di SPAM nelle mail ricevute ha raggiunto il 90% e gli spammer, non contenti, da alcuni anni sfruttano anche i Blog e i CMS per impestare la rete con le loro schifezze.

Per quanto riguarda le mail è un continuo inseguimento: blacklist, filtri bayesiani, OCR sulle immagini, ecc. Ma anche i siti hanno dovuto rincorrere le continue innovazioni da parte degli spammer.

CAPTCHA

CAPTCHASono quindi nati i CAPTCHA di vario tipo, che si basano sulla (presunta) incapacità dei bot di spam di “leggere” il testo contenuto in un’immagine. Il sistema ha funzionato per un po’, finché i sistemi si sono evoluti e hanno iniziato a usare tecniche di OCR sui CAPTCHA stessi, facendone perdere efficacia: sono diventati via via più difficili da decodificare, ma anche per l’occhio umano oltre che per i bot.

Ne sono nati quindi nuovi tipi: dal CAPTCHA matematico (che potete ammirare nel form dei commenti di questo Blog :) ) a quello “sexy”, che si basa sulla capacità di una persona di distinguere un rappresentante bello del sesso opposto da uno brutto.

Purtroppo hanno tutti lo stesso problema: una persona con problemi di vista o qualcuno che naviga con browser testuali non li può utilizzare. Sono allora nati gli aiuti sonori ai CAPTCHA (che “pronunciano” le lettere nel CAPTCHA, per esempio), ma si scontrano col problema dell’audio sui siti: se l’utente sta ascoltando musica in sottofondo deve spegnerla, ascoltare il CAPTCHA, compilare il form, quindi riaccendere la musica

In un periodo in cui bisogna rendere la vita più semplice possibile all’utente, tutte queste complicazioni sono anacronistiche, e allontanano gli utenti.

Vediamo quindi alcune alternative, magari non perfette, ma con una buona percentuale di sicurezza. Continue reading

I buoni propositi per il 2008

Buon 2008 a tutti!

Dopo il post per gli auguri di Natale sicuramente non ve ne aspettavate uno per gli auguri di buon anno, vero? :)

Voevo postarlo poco dopo mezzanotte, ma la baldoria prima e la stanchezza poi mi hanno fatto desistere. Non credo sareste comunque stati lì a quell’ora a leggerlo, quindi non penso vi cambi molto la vita. ;)

Siccome a capodanno si elencano i buoni propositi per l’anno che sta arrivando, ho pensato di raccogliere qui i miei. Magari qualcuno è d’ispirazione anche per voi. Sono in ordine sparso, man mano che mi vengono in mente. Continue reading

Lista di plugin per jQuery

Come raccappezzarsi nel mare di plugin per jQuery.

jQuery è una libreria in javascript per semplificare lo sviluppo client-side di siti, che offre in pochissimo spazio (20 Kb compressa, meno di 100 non compressa) funzioni utilissime per la navigazione e la modifica del DOM, per le richieste AJAX e per alcune animazioni di base (fading, folding, ecc.).

Per mantenere minimo l’impatto sui download è stato scelto di lasciare a plugin esterni la gestione di funzionalità aggiuntive, e di inglobare solo le più usate nel core. Uno dei plugin più famosi è UI, per la realizzazione di interfacce interattive.

Koller Juenger, nel suo blog, ha raccolto una lista di più di 240 plugin per jQuery, suddivisi anche per categoria e uso. Un lavoro titanico e molto utile.