Modificare l’HTML delle note in Evernote Web

Evernote è un ottimo servizio dove poter memorizzare note, appunti, scansioni, file allegati e ritagli di pagine web. È qualcosa di molto più versatile di un semplice insieme di note testuali, avendo funzioni di ricerca e organizzazione ottime. Ne avevo già parlato anche in un articolo dedicato alle applicazioni per studenti:

Non è solo un sito web dove poter scrivere note, ma include anche il software client per Windows e Mac (su Linux io uso l’interfaccia web e mi trovo bene), applicazioni per cellulari e tablet ed estensioni per il browser. Le note possono essere divise in taccuini — per esempio uno per la documentazione e uno per ogni corso che seguite — e etichettate con dei tag.

Insomma vi consiglio decisamente di provarlo! Potete creare un account gratutito e attivare un mese di funzioni aggiuntive Premium gratis cliccando qui.

Proprio la funzione di ritaglio di parti di pagine web, seppur estremamente versatile, a volte può creare dei piccoli problemi. Infatti l’editor visuale di Evernote Web consente delle modifiche basilari. A volte alcune cose sono piuttosto complicate, come ad esempio:

  • rimuovere lo sfondo di un elemento
  • cancellare un pezzo di un ritaglio senza scombinare il resto
  • semplificare la struttura della pagina ritagliata

Naturalmente questi problemi non si presentano (o in maniera estremamente ridotta) con le note scritte di proprio pugno. Tuttavia, per i ritagli da pagine web sarebbe molto comodo poter modificare direttamente il codice HTML in modo da togliere o aggiungere elementi.

Evernote purtroppo non fornisce questa possibilità.

Questo è il motivo per cui mi sono imbattuto nel blog di Seb Maynard, uno sviluppatore che ha creato un bookmarklet per Evernote Web che consente di modificare l’HTML. Il bookmarklet funziona bene, però richiede di essere attivato ogni volta che si vuole fare una modifica e se si usa Evernote Web in modalità app (per esempio con Chromium) risulta molto scomodo.

Grazie alla gentilezza di Seb, che ha rilasciato il proprio codice sotto una licenza libera, ho creato uno user-script che permette di modificare il codice HTML con un bottone sulla barra degli strumenti. Insomma, un piccolo esempio di come il software libero sia di fondamentale aiuto per consentire il progresso e l’innovazione tecnologica. 🙂

La figura mostra lo script in azione proprio sulla nota che ho ritagliato con una versione precedente dell’articolo dedicato al bookmarklet.

Nuovo pulsante
Nuovo pulsante “HTML” inserito nella barra degli strumenti
Pulsante in azione nella nuova versione dell'interfaccia di Evernote Web
Pulsante in azione nella nuova versione dell’interfaccia di Evernote Web

Ho aggiunto alcune funzioni rispetto alla versione “base” di Seb. In particolare:

  • Il bottone sulla barra degli strumenti, per un’attivazione immediata
  • Ace Code Editor per facilitare le modifiche, con auto-completamento e evidenziazione della sintassi
  • Rimozione degli attributi non-standard di TinyMCE
  • Semplice formattazione automatica del codice HTML, per renderlo più leggibile

Gli ultimi due punti in particolare semplificano molto il lavoro di modifica. Come sempre, prima di installare lo script dovete procurarvi l’estensione corretta per il vostro browser:

Potete quindi scaricare lo script che ho pubblicato su GreasyFork, cliccando questo bottone:

Evernote Web HTML editor

Per attivarlo, non vi resta altro che premere il pulsante HTML sulla barra di modifica di una nota. Vi accoglierà un editor molto comodo e di bell’aspetto. 😀

Ace Code Editor in azione su una nota
Ace Code Editor in azione su una nota

Usare Jquery per gestire tabelle e altri elementi con overflow su dispositivi mobili

Qualche tempo fa mi stavo occupando di rendere un sito web mobile-friendly e mi sono trovato di fronte alla necessità di gestire delle tabelle molto larghe. Purtroppo non era possibile pretendere che le tabelle fossero tutte quante di larghezza ridotta o con poche colonne, perciò era necessario usare l’overflow orizzontale con il CSS.

Oltre alle tabelle, ci sarebbero state anche delle formule visualizzate con Mathjax che — se molto lunghe — avrebbero “sfondato” la pagina. Ho avuto modo di accorgermi ben presto che la soluzione è leggermente meno semplice di quanto si possa pensare.

Nonostante le ultime versioni di Android e di iOS per iPhone/iPad supportino lo scorrimento di parti di pagina affette da overflow, le versioni vecchie di Android non permettono di scorrere correttamente con il dito, mentre quelle di iOS richiedono due dita e ciò è poco intuitivo.

Fortunatamente, ho trovato una soluzione interessante in Javascript sul blog di Chris Barr. Leggendo i commenti, ho anche scoperto con piacere che un lettore (Jeff) ne aveva fornito una versione Jquery, mentre un altro (Cormac) suggeriva l’utilizzo del metodo .live() per consentirne un corretto utilizzo anche su elementi caricati nel DOM in un momento successivo.

Ho deciso di unire i due approcci ed è venuto fuori il seguente risultato, che potete includere all’interno della pagina:


function isTouchDevice(){
	try {
		document.createEvent("TouchEvent");
			return true;
	}
	catch(e) {
		return false;
	}
}

function touchScroll(selector) {
    if (isTouchDevice()) {
        var scrollStartPosY=0;
        var scrollStartPosX=0;
        $("body").delegate(selector, 'touchstart', function(e) {
            scrollStartPosY=this.scrollTop+e.originalEvent.touches[0].pageY;
            scrollStartPosX=this.scrollLeft+e.originalEvent.touches[0].pageX;
        });
        $("body").delegate(selector, 'touchmove', function(e) {
            if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
                this.scrollTop+e.originalEvent.touches[0].pageY < scrollStartPosY-5) ||                  (this.scrollTop != 0 && this.scrollTop+e.originalEvent.touches[0].pageY > scrollStartPosY+5))
                    e.preventDefault();
            if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
                this.scrollLeft+e.originalEvent.touches[0].pageX < scrollStartPosX-5) ||                  (this.scrollLeft != 0 && this.scrollLeft+e.originalEvent.touches[0].pageX > scrollStartPosX+5))
                    e.preventDefault();
            this.scrollTop=scrollStartPosY-e.originalEvent.touches[0].pageY;
            this.scrollLeft=scrollStartPosX-e.originalEvent.touches[0].pageX;
        });
    }
}

La cosa interessante della soluzione proposta da Jeff (e che ho riutilizzato) è quella di permettere il corretto funzionamento dei link contenuti nell’elemento che scorre.

Come potete intuire dal codice, la prima funzione controlla se il dispositivo è dotato di touchscreen oppure no, mentre la seconda accetta un selettore Jquery e associa un evento che viene azionato quando l’utente scorre con il dito sopra gli elementi corrispondenti.

Per applicare lo scorrimento alle tabelle, è necessario racchiuderle con un contenitore (in questo caso un <div>) in modo da applicare l’overflow, che con le tabelle non funziona in modo convenzionale.

La funzione deve essere richiamata dentro a $(document).ready(), e può essere utilizzata così, tenendo presente il trucco per le tabelle:


$(document).ready(function() {
    touchScroll(".MathJax_Display");
    $("table").wrap('<div class="table-scroll"></div>');
    $(".table-scroll").css('overflow', 'auto');
    touchScroll(".table-scroll");
});

La prima chiamata a touchScroll() si occupa delle formule prodotte da MathJax, i cui elementi compaiono nel DOM in un momento successivo ma sono catturati ugualmente grazie all’uso di .delegate(). Le seguenti righe si occupano invece di racchiudere le tabelle con un contenitore di classe table-scroll e applicano la funzionalità di scorrimento usando il selettore adeguato.

Questo è quanto! Come avete visto, una volta predisposta la funzione di Chris Barr modificata da Jeff, Cormac e me è sufficiente usare una chiamata per applicare l’overflow agli elementi desiderati. Nel caso delle tabelle, è necessario inserire un contenitore addizionale, ma questo si può fare con Jquery, in modo da evitare di introdurre modifiche al markup della pagina.

Utilizzare il nuovo Readability tramite bookmarklet anche su Android (2.2)

Per chi non lo conoscesse, Readability è uno strumento da utilizzare quando si naviga in internet e ci si imbatte in un sito web dal layout scomodo oppure infestato di banner colorati e lampeggianti da tutte le parti, oppure ancora con font piccolissimi. Una volta premuto un pulsante (o un segnalibro speciale, detto bookmarklet) inizia la “magia” e il contenuto principale della pagina viene portato in centro e reso comodo da leggere, mentre tutto il resto sparisce.

Vi faccio un esempio con un sito che ogni tanto leggo, il ScienceDaily. Le notizie sono interessanti, però il layout è orrendo! Più di metà pagina (in senso verticale) è dedicato a ben due barre laterali con un sacco di link ad altri articoli, e la colonnina da leggere è tutta compressa sulla sinistra (per di più inframezzata da un elenco di altri link). Ecco uno screenshot dell’articolo Mathematical Model for Moving Bottlenecks in Road Traffic:

Estrema scomodità di lettura

La stessa pagina processata da Readability si visualizza all’incirca così (c’è anche una barra laterale che ho ritagliato):

Layout semplice e leggibile

Quella che vedete è l’ultima versione, che è diventata attiva oggi (almeno per quello che ho potuto notare). Prima la funzionalità principale (cioè quella di leggere bene le pagine, appunto) era semplicemente attivata da un bookmarklet che si salvava nei segnalibri del browser (io per comodità lo tengo proprio nel menu segnalibri). Uno strumento che ha funzionalità analoghe è Notforest, il quale però elimina sempre tutte le immagini. A seconda dei casi uno può essere migliore dell’altro. 🙂

Ora hanno introdotto l’estensione per Firefox e altri browser, io però continuo a preferire il bookmarklet perché posso memorizzarlo nel menu assieme a quello di Notforest. Cercando un po’ nelle FAQ alla fine ho scoperto che l’hanno mantenuta aggiornata per chi vuole. Si trova disponibile qui.

Sul sito di Readability scrivono chiaramente che questo bookmarklet non funziona con Android e la funzionalità di lettura sul telefono è disponibile per chi paga la versione premium. Ciò è vero, ma è semplicemente perché hanno codificato il bookmarklet con un sacco di caratteri di escape! È sufficiente usare un purificatore di javascript togliendo i ritorni a capo e le tabulazioni per ottenere un bookmarklet utilizzabile con Android. Vi ricordo che avete bisogno almeno della versione 2.2, perché prima i segnalibri con codice javascript non erano supportati.

Per installarlo andate a questo indirizzo con il vostro telefono e tenete premuto sull’area di testo modificabile. A questo punto scegliete l’opzione “copia tutto” e create un nuovo segnalibro nel browser di Android. Nell’indirizzo incollate il codice che avete copiato prima. Ora non vi resta che visitare una pagina con un articolo e pubblicità varie intorno e provare a “visitare” il segnalibro di Readability. Attendete qualche istante e vedrete un risultato simile a questo:

Le eventuali immagini vengono automaticamente adattate: mai più scorrimento orizzontale!

Con i bookmarklet precedenti c’erano più possibilità di personalizzazione “permanente” nel senso che si poteva salvare uno specifico stile grafico da usare sempre, però in compenso non veniva generato un URL per la pagina ripulita, cosa che si rivela molto comoda per inviarlo ad altre persone. Il trucco di PasteBin è stato ripreso da ciò che ha suggerito Chivil sul proprio blog.

Guardare i video dal sito Rai senza Moonlight direttamente nel browser

Attenzione! Informazione importante!

Questo articolo parla della prima versione dello script, viene lasciato qui solo per i più curiosi. Se volete vedere o scaricare video dal sito Rai, vi consiglio di leggere questo mio nuovo articolo che viene sempre rivisto con gli ultimi aggiornamenti.

Da qualche tempo utilizzo l’estensione per Firefox Greasemonkey. Questo add-on fantastico consente a chi naviga di modificare il comportamento di alcuni siti web tramite piccoli pezzi di Javascript. Ho iniziato naturalmente utilizzando alcuni tra i tanti script presenti su UserScripts, e poi ho iniziato a crearne anche di miei.

Qual è lo scopo di modificare il comportamento di un sito? Ce ne possono essere diversi, ma bene o male quasi tutti rientrano nella categoria “risparmiare tempo“. Gli script aggiungono funzioni comode alle pagine, integrano servizi diversi, permettono di automatizzare delle operazioni noiose da fare a mano. Chi di voi usa ancora Facebook senza FFixer? Se vi riconoscete nella descrizione rimediate subito, installate l’estensione e poi installate lo script. 😉

Oltre a una decina di script scaricati, uso 6 script creati da me, e quando ne ho bisogno ne creo altri. Finora non ho mai condiviso nessuno di questi script perché, onestamente, sono delle sciocchezze. È vero che fanno risparmiare un mucchio di tempo, ma sono relativamente semplici (al contrario di veri “mostri” stupendi come FFixer appunto…), quasi da far ridere. 🙂

Stavolta però credo di aver realizzato qualcosa di utile, perciò ho deciso di condividerlo. Una delle cose più stressanti per chi usa Linux è indubbiamente il sito dei programmi Rai. Questo sito richiede Microsoft Silverlight (o nel nostro caso Moonlight) per vedere i video. Moonlight in sé è open source, ma richiede dei codec super-proprietari per funzionare. In ogni caso questa tecnologia non è così fantastica, e il player del sito è brutto, se andate a schermo intero non “sfoca” il video e si vedono i pixel. Insomma, un mezzo disastro. Tra l’altro scaricare il video non è facilissimo, se si vuole salvare sul PC (con i player in Flash è più semplice).

Ho pensato perciò di scrivere uno script che sostituisca il player Moonlight quando si vuole visualizzare un programma con il video originale inserito in modo “generico”. Per la precisione viene inserito un riproduttore compatibile con Windows Media Player, che funziona perfettamente sotto Linux (ad esempio col riproduttore Totem) e presumo possa funzionare anche sotto Windows (ma non m’interessa). Naturalmente avrete bisogno di avere i codec correttamente installati.

Oltre a fare questo vi inserisce di fianco al titolo della registrazione che state guardando un link al video originale, sia esso riprodotto tramite MMS o HTTP, in modo che si possa facilmente copiare e scaricare con qualche programma apposito. Vi parlerò in un altro articolo su come fare.

Esempio dell’azione dello script su questa pagina

Come side-effect piacevole questo comporta l’eliminazione della pubblicità prima di vedere il video vero!

Alcuni di voi sapranno che esistono anche modi alternativi di vedere i video dal sito di Rai. Due esempi famosi sono UbuntuWinTV e tv-player, che sono applicazioni separate per una navigazione alternativa al sito web, in sostanza vi puntano direttamente ai link di ciascun video e fanno partire un lettore multimediale. Sicuramente sono dei bei programmi, anzi vi consiglio di provarli, tuttavia io volevo qualcosa di semplice che mi permettesse di navigare direttamente sul sito, vedere le puntate registrate saltando le pubblicità e soprattutto avere i link agli stream originali.

Vi preciso anche che per ora lo script funziona solamente sulle pagine delle puntate dei programmi, mentre sul servizio “Rai replay” e sulle dirette per il momento no in quanto la struttura della pagina è diversa in entrambi i casi e la devo studiare. Probabilmente estenderò lo script per supportare anche queste funzioni in futuro (i contributi sono ben accetti 😉 ).

Basta, vi ho annoiati anche troppo per cui non mi resta che rimandarvi alla pagina su UserScripts dove potete scaricare e commentare il mio piccolo lavoro!

Download “Rai.tv native video player for programmes”

Mi raccomando, fatemi poi sapere se vi è stato utile! 😀

Aggiornamento: una piccola cosa che ho dimenticato… il sito Rai.tv è abbastanza poco navigabile se non avete installato Moonlight, però teoricamente lo script vi evita di dover installare i codec proprietari, e rimangono gli altri vantaggi descritti.