Tempo fa avevo fatto un programmino (su richiesta di una celebre tenutaria di blog) che faceva una cosa semplicissima: prendeva un testo contenente alcune mail e le estraeva.

Al tempo avevo un interesse per la piattaforma .NET e C#, per cui l’avevo programmato in quel linguaggio. Però questo hai i suoi svantaggi, uno dei quali è che se non puoi installare i framework (per esempio non sei amministratore della macchina) il programmino non funziona.

Allora ho deciso di rifarlo in puro html-css-javascript. Una specie di Cloud computing.

[Scaricalo/usalo]

Alcune soluzioni tecniche (degne di nota e poco note ai più):

Immagini auto-contenute con i Data URI scheme

Forse pochi sanno che in html è legale embeddare le immagini direttamente nell’HMTL con una schema uri particolare, il data:
Al posto dell’url dell’immagine si mette il contenuto dell’immagine stessa. Questo mi ha permesso di ridurre il tutto a un solo file standalone, senza rinunciare alla grafica.

Bisogna indicare il tipo (il mime type per la precisione) dell’immagine  ed è consigliabile encodarla in base 64 per evitare i problemi di charset.
Ci sono alcune limitazioni in base al browser (vi consiglio l’ottimo articolo di wikipedia) ma in generale funziona in tutti i browser.

Lo schema vale tanto per i tag html src=”data:image/png;base64,<dati-immagine>” quanto per i CSS url(data:image/png;base64,<dati-immagine>).

Auto-draga (che non c’è) + drag&drop

Il programmino originale  estraeva le mail automaticamente, appena veniva incollato il testo nella dropbox. Purtroppo pare che in javascript non esista un evento onpaste, in pratica non si possono intercettare operazioni di incolla e lanciare comandi.  Per cui l’estrazione va fatta a manina, schissando sul pulsantone.
Ho visto altri software javascript (per esempio tinymce) farlo tranquillamente, per cui se qualcuno ha idee (non troppo complesse ho trovato tutorial che includevano l’uso di un filmato flash nascosto. No, grazie.) in questo senso me lo faccia sapere.

HTML 5 dovrebbe introdurre il supporto al drag&drop, credo però che l’implementazione nei browser sia ancora limitata per cui mi sono astenuto dal provarci.

Local Storage & JSON (guai e problemi)

HTML 5 mette a disposizione molte nuove funzionalità, alcune delle quali sono state backportate dai browser anche se HTML5 non è ancora “ufficiale”. Tra queste alcuni metodi di storage per salvare (in maniera più o meno permanente) dati sul browser dell’utente.
Ho cercato di utilizzarli per implementare un rudimentale meccanismo di salvataggio di liste di mail estratte.

Problemi e connessi:

• Database storage: permette di salvare sul pc dell’utente un vero e proprio database, interrogabile con SQL, che resta sul client anche quanto si chiude la pagine e può essere ripreso in un secondo momento. Per saperne di più: un ottimo articolo sul client-side storage in html5.
  Purtroppo attualmente è supportato solo dalle ultime versioni di opera ( ) e chrome. Troppo poco per usarlo.
• Local storage: La versione più povera dello storage, salva coppie di chiavi-valori che restano sul client anche dopo la chiusura. La fregatura del local storage (scoperta in corso d’opera) è che sia le chiavi che i valori devono essere stringhe.
  Io dovevo salvare strutture più complesse, per cui ho pensato di encodare le strutture con JSON, e qui ho scoperto che…
• JSON: è una notazione per serializzare oggetti. Quel che ho scoperto è che tutti i browser possono trasformare una stringa JSON in un oggetto javascript basta  un eval( ) ma che ben pochi hanno le primitive per fare il contrario!
  E quel che è peggio è che nemmeno jQuery ha metodi per encodare in JSON. Ho dovuto cercare un plugin apposito, sperando che non abbia bug difficilmente individuabili.
• File locali: il local storage funziona solo su file serviti da webserver. Se si scarica il file e lo si apre dal filesystem non è disponibile, o meglio in genere viene cancellato alla chiusura del browser.
  Il perché non è difficile da capire. Come fa un browser a capire che una certa pagina può accedere a certi dati? Farà come con i cookies, tutti i files che provengono dallo stesso server e protocollo accedono agli stessi dati, perché si suppone abbiano la stessa origine.
  http://server/pag1.html e http://server/pag2.html accedono agli stessi dati. https://server/pag1.htm e http://altroserver/pag.htm accederanno a dati differenti.
  Un discorso del genere non è possibile con i files residenti sul filesystem, a meno di creare uno spazio unico per tutto quanto arriva dal protocollo file://, ma suppongo sarebbe fonte di problemi di sicurezza. Pertanto lo storage in caso di files residenti è disabilitato.

Lista delle mail simil-facebook

Per la lista delle mail raccattate ho recuperato in parte l’idea dell’input box con elementi facebook-stile.

Ho già detto di quell’idea, se vi interessa potete leggere l’articolo.

CSS3

CSS3 ha un sacco di cose figherrime, anche se il supporto è ancora lacunoso.  Ne ho usata una che in generale funziona e se non funziona pazienza, si vedono i bordi squadrati, il border-radius, che permette di fare bordi arrotondati senza impazzire con le immagini.

Funziona sicuramente con Opera 11, FF4 e Chrome 12.

Estrazione

L’estrazione delle mail è fatta con una “semplice” regExp:  /[^\\w.]*([\\w.-]+@[\\w.-]{3,}\\.[\\w.-]{2,4})[^\\w.]*/.
L’ho rubata da qualche parte su internet, la capisco solo in parte ma funziona.

TODO per le (eventuali) prossime versioni: aggiungere la possibilità di personalizzarla, così se se ne trova una più figa la si può sostituire. Il codice è predisposto, ci sarebbero modifiche da fare.

Minimizzazione di JS e CSS (YUI)

Per ridurre il peso ho minifizzato il javascript e il CSS con YUI, gratis da Yahoo. Il risparmio sui JS è notevole (50%), quello sui CSS è trascurabile.

Pare che YUI digerisca male i CSS con gli url contenenti quote: url(‘<url>’). Ho tolto le quote, dovrebbe essere legale comunque.

Internet Explorer

IE 8 mi ha provocato un tracollo nervoso, e siccome ho ancora XP non ho diritto al 9 e non vi so dire.

Sappiate che ho sviluppato principalmente con FF4. In Opera 11 e Chrome 12 si è visto identico al primo colpo (nessun aggiustamento richiesto).

IE8:

• La  textbox di inserimento testo è completamente sputtanata. Non so perché
• Il box di raccolta mail è completamente sputtanato. Non so perché
• Lamenta script ActiveX pericolosi nella pagina e piange chiedendo il permesso. Non c’è nessuno script ActiveX
• Non ci sono le immagini

Sentite, arrangiatevi, non ho ore di tempo da perdere dietro questo mezzo programma.