Archivio marzo, 2007


Plugin per WordPress: risultati ricerca

È stato davvero difficile, forse per mia assoluta incapacità, ma non sono riuscito a trovare un Plugin decente per migliorare i risultati della ricerca all’interno di un Blog WordPress (ovvero il mio undolog).
Alla fine, dopo estenuanti ricerche, ho trovato Search Hilite! La documentazione è fatta male in quanto non esplicita da nessuna parte che oltre all’installazione del Plugin bisogna modificare il file search.php di WordPress! Insomma alla fine l’ho capito da solo! Riporto quindi il codice da inserire nel file search.php, così da vedere – finalmente – i risultati della ricerca evidenziati. Le righe da inserire sono la 6,7 e 8!

1
2
3
4
5
6
7
8
9
10
11
12
<?php while (have_posts()) : the_post(); ?>
     <div class="post">
         <h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink per <?php the_title(); ?>"><?php the_title(); ?></a></h3>
        <small><?php the_time('j F Y') ?></small>
       
        <div class="entry">
  <?php the_content('Continua &raquo;'); ?>
        </div>
       
<p class="postmetadata">Pubblicato in <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Modifica','','<strong>|'); ?>  <?php comments_popup_link('Nessun commento &#187;', '1 commento &#187;', '% commenti &#187;','','Commenti disabilitati'); ?></p>
</div>
<?php endwhile; ?>

Se qualcuno ne conosce di migliori… fatemelo sapere! ;)

Continua...

Difetti dell’unobtrusive Javascript

Visto che ne abbiamo parlato bene nei Post precedenti, è giunto il momento di parlarne male (scherzo), o quantomeno di evidenziare alcuni difetti della tecnica di unobtrusive Javascript.
Se il codice unobtrusive Javascript viene eseguito quando la pagina è completamente caricata, ne deriva che maggiore sarà la quantità di dati (HTML) che forma la nostra pagina e maggiore sarà il tempo di attesa prima che il nostro codice venga eseguito.

Tutto ciò può tradursi in ritardi di esecuzione con un conseguente e fastidioso effetto di sfarfallio se si opera su elementi visivi della pagina. Prendiamo ad esempio il codice usato da Ryan Johnson per creare degli oggetti TabStrip. Se guardate attentamente il demo online vi accorgerete che per un secondo circa, al caricamento della pagina, si vede chiaramente un layout standard sostituito subito dopo da oggetti TabStrip. Ricaricando nuovamente la pagina, grazie alla cache del browser, il problema tende a diminuire (provate a pulire tutta la cache del browser per verificare i tempi).

Tutto questo ci deve far riflettere sui limiti di questa tecnica. Lo stesso Snap soffre esattamente dello stesso rallentamento, soprattutto in pagine spesso estremamente alte come quella di undolog.com. Caricando la home page di questo Blog risultà evidente che Snap viene eseguito qualche secondo dopo, ovvero quando la pagina è completamente caricata.

Per definizione dell’unobtrusive Javascript questo problema è difficilmente risolvibile a livello generale. Tuttavia nello sviluppo di un sito proprietario si possono prendere alcuni accorgimenti tesi a eliminare o ridurre tali difetti. Un modo abbastanza semplice è quello di creare una sorta di preload, elemento diffuso in ambiente Adobe Flash. Si può quindi impostare il Tag body – che contiene tutti gli elementi della pagina – in modo che risulti invisibile, lasciando al codice Javascript il compito di renderlo visibile quando ha terminato le – eventuali – modifiche al DOM:

1
<body id="ibody" style="display:none">

Il codice unobtrusive Javascript, al termine delle sue operazioni:

1
2
3
document.getElementById("ibody").style.display="";
// Se usate prototype
$("ibody").style.display="";

Soluzione, tuttavia, banale e non sempre applicabile. Inoltre, anche se abbiamo in qualche modo risolto il problema del primo caricameno, navigare in un tal modo a lungo andare potrebbe davvero risultare fastidioso per i navigatori. Non essere intrusivi, quindi, ha un prezzo da pagare. Anche operando a livello di oggetto, per esempio impostando solo gli elementi interessanti in modalità nascosta, il fatto che il codice parta alla fine del caricamento dell’intera pagina porta inevitabilmente con sè le stesse identiche problematiche.

Continua...

Esempi di unobtrusive Javascript

Come promesso ecco qualche esempio concreto di unobtrusive Javascript, strumento davvero potente e versatile se usato a dovere. Sul sito/Blog di Ryan Johnson è possibile scaricare due esempio davvero ottimi di unobtrusive Javascript:

Ryan Johnson, nei suoi script, fa uso della libreria Prototype, come molti del resto. Ha scritto anche alcune estensioni relativamente alla Prototype, poi introdotte – in forma diversa – nell’ultima versione della libreria.
Usare Prototype per illustrare il funzionamento di codice unobtrusive Javascript è generalmente più comodo – come vedremo più avanti, tuttavia ecco un primo esempio grezzo che non richiede nessuna librerie esterna. Cominciamo ricordando che il concetto che sta alla base del unobtrusive Javascript è quello di partire da una qualsiasi pagina HTML (standard e non necessariamente scritta da noi – altro importantissimo punto di forza) e sfruttare Javascript per apportare alcune modifiche.

Schematimamente il concetto è quello di eseguire una funzione che analizza il codice HTML, attraversa quindi il DOM e in punti particolare aggiunge o modifica funzionalità. Normalmente si sfruttano due metodi per eseguire codice Javascript al caricamento di una pagina: il primo è quello che non racchiudere il codice in nessuna funzione e quindi lasciare che il browser esegua immediatamente il codice caricato nel punto in cui compare la chiamata:

1
<script>alert("Hello");</script>

Stesso risultato lo si ottiene includendo il codice:

1
<script src="http://miosito.com/miocodice.js"></script>

Tuttavia quando si deve operare sul DOM di una pagina si presuppone che essa si a completamente caricata, cioè che tutti i TAG della pagina sia presenti e disponibili per essere rintracciati. Così la soluzione migliore diventa quella di essere sicuri che la pagina sia completa. Ciò è possibile agganciandosi all’evento onload del TAG body ad esempio, che viene rilasciato quando il caricamento della pagina è completo.

1
2
3
window.onload = miafunzione;
// oppure, che è lo stesso
window.onload = function() { alert("Hello"); }

Da evitare, ovviamente, la soluzione canonica che definirla intrusiva sarebbe un eufemismo:

1
<body onload="miafunzione()">

Altra tecnica, più rozza e ugualmente intrusiva (in quanto costringerebbe l’utente finale a posizionare il codice in un punto particolare), è quella di inserire il nostro script alla fine del documento, prima della chiusura del Tag body; tecnica oramai obsoleta e usata in rari casi (vedi Google Analytics!).

Ancora meglio è usare il metodo qui sotto:

1
2
3
4
5
6
7
if (window.addEventListener) {
    window.addEventListener("load", miafunzione, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", miafunzione);
} else {
    window.onload = createSubMenus;
}

Anche questo frammento di codice non è racchiuso in una funzione. Esso aggiungerà un event listener per l’evento load della finestra, richiamando la nostra funzione miafunzione(). I browser moderni, come FireFox ad esempio, useranno la funzione addEventListener() definita nella specifica DOM Level 2, mentre Internet Explorer userà la sua funzione proprietaria attachEvent(). Tuttavia non siamo ancora alla perfezione: in questa maniera, infatti, si rimpiazzeranno tutti gli – eventuali – eventi onload creati da altri script, il che non è proprio “non intrusivo”.

Per risolvere rapidamente la questione, che per via dei diversi comportamenti dei browser sarebbe quantomeno complicata da esporre qui, conviene usare libreirie come Prototype che forniscono un’elengantissimo metodo per superare il problema:

1
Event.observe(window, 'load', function() { alert("Hello"); } );

La sintassi è davvero ovvia e spettacolare! Il vantaggio, per chi non lo avesse capito, è quello di poter scrivere:

1
2
Event.observe(window, 'load', function() { alert("Hello 1"); } );
Event.observe(window, 'load', function() { alert("Hello 2"); } );

Al caricamento della pagina verrà mostrato prima l’alert “Hello 2″ e poi l’alert “Hello 1″. In pratica si carica in modo FILO (First Input Last Output) un stack, garantendo comunque l’esecuzione di tutti gli eventi agganciati al load del documento, esattamente quello che si voleva ottenere. In questo modo una pagina può caricare – virtualmente – infiniti unobtrusive Javascript che si agganciano alla load del documento.

Ma cosa si può fare con questa tecnica? Molte cose interessanti. Un esempio che possiamo commentare (vedi anche Prototype: l’uso del doppio dollaro ($$)) ci viene da Tobie Langel. Con poche righe di codice e scaricando le librerie Prototype e Scriptaculous si può dare un simpatico effetto ai classici anchor delle nostre pagine. Prima di tutto create una pagina HTML con il seguente codice:

1
2
3
4
5
6
7
8
<p><a href="#capitolo1">Vai al capitolo 1</a></p>

<p>&nbsp;</p>
<p>&nbsp;</p>

.... un bel po' di <p>&nbsp;</p> .... giusto come esempio

<h1 id="capitolo1">Capitolo 1</h1>

Includete nella pagina:

1
2
3
4
5
6
7
8
9
10
11
12
<script src="prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="scriptaculous-js-1.7.0/src/effects.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" language="javascript1.2">
     Event.observe(window, 'load', function() {
         $$('a[href^=#]:not([href=#])').each(function(element) {
                element.observe('click', function(event) {new Effect.ScrollTo(this.hash.substr(1));
                                                Event.stop(event);
                                                bindAsEventListener(element))
          })
     })
</script>

Grazie all”uso di Event.observe() e alla funzione doppio-dollaro ($$) è possibile modificare in modo semplice il comportamento del classico anchor. In questo caso viene agganciata una nuova funzione al caricamento della pagina HTML. Quando scatta l’evento load vengono rintracciati nel DOM tutti i link (Tag <A>) con l’href che inizia con cancelletto (#, escludendo quello con solo cancelletto!). A questi elementi viene agganciata una funzione all’evento click, similmente a quanto fatto con la load del documento. A questo punto entra in gioco Scriptaculous che produce un effetto di scroll verso l’elemento punatato dal nostro link – modificato!

Continua...

Accessibilità e Usabilità: unobtrusive Javascript

Permettere agli utenti di interagire con una pagina Web ha prodotto negli ultimi anni un notevole aumento nell’uso di script lato client: codice Javascript in grado di rispondere e manipolare in tempo reale tutta una serie di informazioni. Il Web2.0 è la massima espressione di questa capacità di interazione, dove l’utente finale – il navigatore -partecipa attivamente alla costruzione e all’evoluzione del sito Web, interagendo con esso e contribuendo personalmente. Si parla quindi di User-Generated Content (o UGC – contenuto generato dagli utenti) che vede il “navigatore” sicuramente meno passivo!

Per realizzare questa interazione, per permettere quindi all’utente finale di aggiungere il suo contributo, sono state sviluppate una serie di tecniche che hanno modificato l’aspetto e il comportamento delle pagine Web (statiche sino ad oggi, mentre adesso simili alle tradizionali applicazioni dei Desktop) negli ultimi anni. Modificare il contenuto di una pagina, inviare dei file, dare il proprio voto ad un video o a un documento, registrarsi o modificare i propri dati, sono solo alcune delle operazioni richeste in tanti servizi (2.0 beta) presenti sul Web.

Continua...

Vocal Fruits

Il servizio XFruits, che uso su questo Blog per la versione in PDF, si arricchisce di un nuovo e interessante strumento: VocalFruit.
Ora i nostri feed rss possono essere ascoltati.
Il nuovo servizio è disponibile per gli utenti registrati con un credito iniziale di 100 vocals. In realtà mi sono dovuto registrare nuovamente, piccolo mistero, tuttavia l’ho provato e funziona davvero bene.
Probabilmente la scelta dei crediti dipende dal costo della tecnologia usata per lo speaker, quindi deduco che potrebbe presto diventare a pagamento! Sul sito le informazioni sono ancora relativamente poche, a dire il vero, ma l’idea sembra interessante.

Per adesso sono disponibili le lingue Inglese, Francese e Spagnolo, per l’Italiano temo si dovrà aspettare un po’ (al limite non lo faranno mai, come spesso accade). Le caratteristiche del servizio permettono di utilizzare la sintesi vocale generata, a partire dei feed rss, sul Web o sul nostro sito, sul cellulare o su un lettore MP3.

Continua...

Plugin per WordPress

Come aggiornamento e scambio di opinioni, ecco la lista dei Plugin per WordPress utilizzati in undolog.com:

  • Akismet 1.8
    Noto a tutti, in quanto preinstallato su tutte le versione di WordPress, è il Plugin più importante in quanto proteggio dallo spam indiscriminato
  • Feedburner Feed Replacement 2.2
    Se siete registrati su FeedBurner, ridirigere i vostri feed direttamente su FeedBurner.com
  • Get Recent Comments 1.5.4
    Permette di elencare gli ultimi commenti ai vostrio Post, abbastanza configurabile e ben fatto
  • Google Sitemaps 2.7.1
    Vitale per l’indicizzazione sui motori di ricerca e in particolare su Google: creare il file sitemap.xml – ottimamente configurabile
  • iG:Syntax Hiliter 3.5
    Se avete necessità di inserire codice (C, C++, Assembly, ActionScript, PHP, Ruby, Javascript … emolto altro) questo Plugin è davvero fantastico.
  • Math Comment Spam Protection 2.0
    Permette di proteggere i commenti da Spam indesiderato. Inserisce una domanda matematica, del tipo: quanto fa 1+3? Io l’ho travato abbastanza utile, almeno fino adesso.
  • Reinvigorate 1.0
    Questo può interessare solo a chi è registrato al servizio di statistiche Web Reinvigorate.
  • Ultimate Tag Warrior 3.141592
    Permette di inserire i TAG (etichette) nei Post e nelle Pagine di WordPress. È uno dei più famosi, immagino. Simpatico il numero di versione che è, evidentemente, il valore del pi-greco!
  • WP-PageNavi 2.03
    Aggiunge una nuova navigazione nelle pagine, permettendo di muoverso all’interno dei Post in maniera più efficiente; con tasto di ‘inizio’, ‘fine’ e pagine numerate!
  • WP-PostRatings 1.05
    Gestione delle votazioni a stelline. Diffuso, ottimo da configurare, con tanto di statiche dei più votati e dei Post che hanno ricevuto più voti. Non è vitale ma può risultare simpatico.
  • WP-PostViews 1.02
    Mostra i Post più visti. Questo è utile come statistica interna e personale. Da avere…
  • WP-UserOnline 2.06
    Mostra gli utenti in linea, quasi in presa diretta. Utile, in alcune situazioni e simpatico da vedere!

Commentate e suggerite…;)

Continua...

Apollo, Firefox 3 e Rails: tutti offline

Magnetk e Joyent hanno creato Slingshot, un tool che permette ad una applicazione Rails di funzionare offline! Contemporaneamente è stata rilasciata la Alpha 3 di Gran Paradiso, ovvero FireFox 3, anch’esso pronto a sfidare questa nuova frontiera dell’offline. Possiamo affermare senza esagerazione, almeno da quanto si legge sulla rete, che è iniziata una vera e propria competizione che vede schierati Adobe Apollo, FireFox 3 e nuovi contendenti come Slingshot.

Slingshot, tuttavia, si propone di far sviluppare (o portare) applicazioni Rails direttamente sul Desktop  e di farle girare in modo “semplice e trasparente“;

Joyent Slingshot allows developers to deploy Rails applications that work the same online and offline (with synchronization) and with drag into and out of the application just like a standard desktop application.

Per una dimostrazione di Slingshot vedi il filmato Quicktime.

Non esiste, quindi, una vera e proprio diretta concorreza tra Slingshot e Apollo. Quest’ultimo, infatti, ha in definitiva un target diverso, come indicato da Wikipedia ;)

“A cross-OS runtime that allows developers to employ their existing web development skills (Flash, Flex, HTML, Ajax) to build and deploy desktop Rich Internet Applications.”

Interessanti – invece - sono le caratteristiche di FireFox 3 (come gli Animated PNG – APNG), che si pone in maniera diversa dalle soluzioni sopra esposte.  

La caratteristica che condividono i contendenti, quindi, è questa nuova tendenza a lavorare – o a permettere di lavorare – offline! È curioso che questo interesse sia esploso quasi all’improvviso, in un momento storico che vede la rete al centro di molti interessi. Inoltre, proprio in questi ultimi anni, la diffusione della banda larga ha portato gli utenti a rimanere continuamente connessi in rete, un cordone ombellicale impensabile sino a pochi anni fa; l’era del Dial-Up è ormai finita.

Proprio questa necessità di connessione perpetua ha dato il via alla generazione 2.0 (web2.0), al contributo sociale di tutti in quanto tutti connessi. L’offline è, nonstante tutto questo, un esigenza tecnica, non un cambio di tendenza. Probabilmente è di sicuro interesse poter investire su tecnologie di questo tipo. Il Wireless, molto probabilmente, dominerà nel prossimo futuro, ma a differenza di un cavo potrebbe essere maggiormente soggetto a improvvisi mancamenti (!

Poter lavorare sconnessi ha evidentemente tutta una serie di vantaggi che – come spesso accade – oggi non riusciamo nemmeno a vedere chiaramente.

Continua...

What is in the box?

Presumo Adobe Photoshop CS3? Io mi sono registrato, comunque…


Se non vedi il video clicca qui

Continua...

Aggiornamenti e Snap

Come avrete notato ho dato qualche ripulita al Blog, sia a livello grafico che a livello di strumenti e Plugin. Dato che Snap ha recentemente aggiunto alcune configurazioni, ho eliminato l’anteprima direttamente dal link! Per ottenere l’anteprima bisogna passare con il mouse sopra l’iconcina snap che appare in alto a destra. Inoltre ho impostato l’anteprima in modalità “large”, così si vede meglio!

Continua...

MyToons Shared

Dopo essermi iscritto a MyToons, ho voluto provare alcune funzioni di sharing. Ecco come si presenta il codice embed:

Continua...