Per questo ho creato una applicazione di una pagina, Facebook Share Counter che permette, per ogni articolo, video, immagine o indirizzo generico condiviso su Facebook, di conoscere queste statistiche:

• quante volte è stato condiviso
• quante volte qualcuno ha cliccato “mi piace“
• quanti click sono avvenuti su questo elemento

In questa maniera diventa facile per te sapere se una tua campagna ha prodotto risultati e quali!

Inoltre, come funzionalità aggiuntive, controlla sia lo stesso indirizzo due volte, una con la barra finale ed un’altra volta senza (es: www.google.com e www.google.com/ ), sommando i risultati, per avere un dettaglio più preciso delle condivisioni.

I risultati sommati per la ricerca con e senza barra finale

Infine, è possibile cercare anche ricorsivamente i percorsi a monte di un certo indirizzo, in modo che cercando per www.dominio.it/indirizzo/verso/il/contenuto, appaiano anche i risultati per

• www.dominio.it/indirizzo/verso/il
• www.dominio.it/indirizzo/verso
• www.dominio.it/indirizzo/
• www.dominio.it/

Ora hai quindi uno strumento a tutto tondo per misurare le possibilità e l’efficacia di marketing su Facebook.

Ti potrebbe interessare...

• Esclusiva: il futuro di Facebook Username
• Elenco completo delle faccine della chat di Facebook
• Il Konami Code funziona su Facebook, Google Reader e molti altri siti

Vediamo un esempio: questa semplice risposta del server deve essere inserita come HTML in un elemento del documento.

<p>Caricamento in corso</p>
<script type='text/javascript'>
  alert('azione eseguita');
</script>

Verrebbe naturale caricare questo codice con innerHTML, ad esempio:

div.innerHTML = response;

Chiaramente bisogna sempre assicurarsi che il codice sia valido e non suscettibile di XSS, ma questo discorso esula dal presente articolo.

In ogni caso, Internet Explorer, NON eseguirà il codice né quindi visualizzerà l’alert; questo è un comportamento documentato ma ugualmente molto noioso, perché difficile da ricordare e perché in altri browser, come Firefox, non si presenta.

La soluzione ha questo problema è specificare l’attributo defer all’elemento script, facendolo diventare così:

<p>Caricamento in corso</p>
<script type='text/javascript' defer='defer'>
  alert('azione eseguita');
</script>

Solo in questo modo IE interpreterà correttamente lo script e lo eseguirà alla fine della chiamata innerHTML.

Ti potrebbe interessare...

• Parole (\w+) con lettere accentate nelle regular expression Javascript
• Guida per installare l’add-on Greasemonkey su Firefox per personalizzare siti internet
• Errore con la proprietà CSS sconosciuta: filter, opacity e trasparenza

Immagine di dermiller

Per indentazione si intende l’uso degli spazi bianchi o della tabulazione, per allineare il codice in base al flusso e alle strutture del linguaggio come blocchi o istruzioni di controllo. Per parlare chiaro, questo è codice indentato.

if (condizione == true)
    esegui();
else
    exit;

Questo è indentato con gli spazi (nel numero di 4), questo metodo di scrittura rende più semplice la lettura del codice, perché seguire il flusso logico del codice è più semplice, diventa chiaro che esegui dipende dalla condizione precedente.

if (condizione == true)
esegui();
else
exit;

Questo codice sopra è chiaramente molto meno semplice da leggere, è necessario sforzarsi molto di più per capire come funziona.

Indentazione

Alcuni editor hanno già in loro la funzionalità per “rendere bello” il nostro codice, strumenti chiamati solitamente auto-indenter, ma io non mi sono mai trovato bene, poi ognuno usa il suo e difficilmente cambierà per una funzione simile, almeno io non lo farei. Per questo vi consiglio questo tool: Online beautifuller. Ha proprio questa funzione, tutto con un unico click, inoltre utilizza il io stesso stile di indentazione, a volte chiamato K&R, dal nome dei famosi Kernighan e Ritchie, inventori del C. La scelta tra spazi e tabulazione è lasciata all’utente.

Formattazione

Un altro strumento utile, da utilizzare successivamente è Online syntax highlighting. Questo formatta in codice, lo colora in particolare, in modo da evidenziare le parole chiave, quasi tutti gli editor lo fanno già da loro, se il tuo non lo fa, ti consiglio di cambiarlo :P

La sua utilità principale è per chi intende pubblicare codice online, perché fornisce l’HTML da inserire nelle pagine. Ricordarsi sempre di selezionare Javascript a sinistra, altrimenti non funzionerà benissimo!

Minimizzare e compattare

Ultime note su come disfare il lavoro fatto, molte volte si rivela utile anche questo, ma solo in fase finale. Il codice Javascript non viene compilato, ma gira così come lo scriviamo, quindi sicuramente leggibile, ma non compatto, mentre le pagine web devono essere il più leggere possibili. Sono stati creati quindi questi strumenti che minimizzano e compattano il codice, fino al minimo indispensabile e anche oltre volendo (restringendo anche i nomi delle variabili per esempio).

JS Minifier: forse uno dei migliori, permette la scelta anche di quanto comprimere.

BrainJar: uno dei primi e ancora buoni, servizi simili.

Packer: semplice semplice, ma efficace.

PHP Packer: script in PHP, da usare anche in locale.

Ti potrebbe interessare...

• Parole (\w+) con lettere accentate nelle regular expression Javascript
• Migliorare Firefox: RAM
• Tavolozza dei colori in Javascript

Gira ormai da tntissaimo tmepo la mial srctita tttua cmoe qeusto artoiclo cioè con le lterete di ogni polraa mhiicsate, eucslse la pmria e l’umlita. Ebenbe, gaizre alla REgexp per iavddiirune le poalre apenpa vsita e alla fonunize per msrhicaie un array, ho deciso di inrmlepamete un “misciothare” di prlaoe.

Ti potrebbe interessare...

• Parole (\w+) con lettere accentate nelle regular expression Javascript
• Aggiungere e togliere Classi CSS: toggleClassName
• GaiaLuna: avevo previsto bene

Fate qui sotto una prova, nell’output verrà estratta la prima “parola” cioè il primo blocco w+

Input:

Output:

Per ovviare a questo problema, mi sono sfogliato tutti i codici unicode e ho estratto il blocco esatto per i caratteri, che include quindi anche le lettere accentate e strane di ogni nazione.

[wu00C0-u017Fu1e00-u1ef9]

Sarebbe il blocco corrispettivo, cioè il classico w più il resto delle lettere (per essere preciso il blocco Latin Extended Additional, il necessario da Latin-1 Supplement e Latin Extended-A, ma magari è più utile

[A-Za-Zu00C0-u017Fu1e00-u1ef9]

Che individua solo le lettere escludendo i numeri (che non capisco perché vengano inclusi). Eccone una prova

Input:

Output:

Ti potrebbe interessare...

• Lettere scombinate
• Javascript in AJAX con Internet Explorer: l’attributo defer
• Migliorare il codice Javascript: indentazione, spazi, tabulazione, a capo e formattazioni

In ogni caso ecco le novità di questa versione, non molti a dire la verità:

• Orari negativi corretti: ora quando avete il grano "in rosso", l’orario del granaio rappresenta quanto manca all’esaurimento
• Timer sotto le risorse: sotto le risorse, in ogni pagina, è scritto tra parentesi tra quante ore si riempirà quella risorsa, in modo da avere sempre d’occhio la situazione
• Orari più leggibili: quando manca più di un giorno ora l’orario visualizza anche i giorni (prima solo le ore)
• Numerosi bug corretti

Potrei essermi dimenticato qualcosa, ci sono state le vacanze di mezzo, se vedete altro di nuovo scrivete un commento.

Buon download e buon travian!

Ti potrebbe interessare...

• Travian Più Più
• Travian Più Più 0.2
• Travian Più Più: 0.3

Un esempio per chiarire: abbiamo una serie di campi input testuali, vogliamo controllare il cambiamento di tutti quanti; classicamente dovremmo attaccare un EventListener ad ognuno di essi (oppure aggiungere una proprietà onChange o simile). Beh invece si può attaccare un solo EventListener ad un elemento che contiene tutti i campi (come l’elemento “form” ad esempio).

Questo è possibile perché gli eventi si trasmettono attraverso l’albero dei nodi, per maggiori informazioni a proposito (ma diventa piuttosto tecnico), si trovano sulla documentazione ufficiale DOM, sezione Eventi.

Potrebbe però diventare utile, a questo punto, scoprire qual’è l’elemento che ha generato l’evento, perché this farà riferimento al nodo a cui abbiamo aggiunto l’EventListener, non al campo testuale. Tra le proprietà dell’evento infatti c’è target oppure srcElement, dipende dal browser. Per essere sicuro che funzioni, io utilizzo il seguente codice: var element = e.target || e.srcElement;

[via HTML]

Ti potrebbe interessare...

• Aggiungere e togliere Classi CSS: toggleClassName
• Mischiare un array: mix()
• Parole (\w+) con lettere accentate nelle regular expression Javascript

• Corretto il bug delle risorse piene: ora vengono segnalate solo quelle giuste, inoltre ho invertito i segnali, in grassetto se si stanno per riempire, lampeggianti (e in grassetto) se piene.
• A grande richiesta ho cambiato il filtro del mercato, ora è un filtro a selezione piuttosto che ad esclusione.
• Orario preciso: quando non si hanno risorse o nel magazzino verrà visualizzato non solo il tempo da aspettare ma anche l’orario preciso.

Per questo aggiornamento devo ringraziare tutti quelli che si sono fatti vivi, anche con richieste e segnalazioni (Rulez, Jimbo, active) e anche Claudio e Chido. Mi hanno chiesto in tanti il mercato.

Già che ci sono, a proposito, aggiungo che il filtro non è "trasportabile", quando cambiate pagina dovete ri-selezionare, ora è più comodo di prima, ma il vero motivo è che se vengono passate informazioni da una pagina all’altra il signor Travian potrebbe accorgersene.

Per altre informazioni vi rimando alla pagina ufficiale.

Ti potrebbe interessare...

• Travian Più Più
• Travian Più Più 0.2
• Travian Più Più: 0.3

Sottolineo soltanto che è un aggiornamento fatto sul momento, potrebbero esserci ancora alcuni problemi, fatemeli presenti commentando questo post; tra l’altro il codice per i mercanti ora è un po’ inutile in quanto ogni click corrisponde ad un mercante per tutte le razze, vabbè, ormai era già pronto.

Buona prova, scaricate pure, oppure aggiornate tramite Firefox (andate in Strumenti, Componenti Aggiuntivi e lì cliccate su Cerca Aggiornamenti).

PS con la precedente estensione ero arrivato a circa 100 download, un grazie non farebbe male ;)

Ti potrebbe interessare...

• Travian Più Più
• Travian Più Più: 0.3
• Travian Più Più 0.4

• Cambio
  delle icone per i galli: ora le varie cavallerie hanno icone diverse,
  così si possono distinguere tra loro (vengono usate le icone delle
  altre tribù).
• Contatore di mercanti: quando andate per inviare
  le risorse, vi viene detto quanti mercanti sono necessari e quante
  risorse potete ancora mandare senza aumentarne il numero.
• Ora il link per inviare nuovamente le truppe appare sempre, troppo utile!
• Corretto ancora qualche bug dei report.
• Nel menù di sinistra ora uno spazio dedicato ai report, divisi per categoria (provate e cliccare sullo spazio bianco ;)

Infine ho creato una pagina di descrizione statica, sarà sempre valida e conterrà la descrizione aggiornata (mentre questa riporta solo i cambiamenti tra la 0.3 e la 0.4

Un ringraziamento a beppe e all’inossidabile Chiodo per le idee.

Buon download.

Ti potrebbe interessare...

• Travian Più Più
• Travian Più Più: 0.3
• Travian Più Più 0.4.1