Diciamo che questo grafico mi ha fatto venire voglia di tornare a postare…

via sixrevisions

Quello che vedete è il messaggio di conferma, dell’avvenuto acquisto di un volo su edreams.it.

A mio avviso sono del tutto inappropriati l’icona di allerta (pericolo generico…?) e soprattutto del colore rosso per indicare una transazione che in realtà è avvenuta correttamente.
Questo lunghissimo messaggio rosso lascia del tutto disorientato l’utente.

Vero è che in questo caso il messaggio si riferiva ad una transazione avvenuta con un’altra compagnia e che sarebbe seguita un’ulteriore mail di conferma, per cui era necessario attirare l’attenzione dell’utente. Eppure sicuramente il rosso è adatto a messaggi di errore o a situazioni di “pericolo”, piuttosto che a comunicazioni del tipo “il processo di acquisto procede regolarmente”.

(Ora speriamo che i webmaster di edreams non siano permalosi come quelli di Ryanair).

Questo strano uso del rosso nei messaggi di conferma non è poi così raro: se ne lamentava anche Roberto Dadda, qualche tempo fa, dopo un acquisto sul sito di trenitalia.

Tornando al mio ultimo acquisto su edreams, devo dire che il riepilogo delle prenotazioni nella pagina del mio profilo esibisce invece un verde decisamente più “rassicurante”.

In questo post di dicembre 2008 Dave Ward ci ricorda tre buoni motivi per richimare jQuery dai server di Google, anzichè dal nostro server.
Ci sono almeno tre valide ragioni per farlo.

Innanzitutto sfruttare il Content Delivery Network di Google. Il CDN è un network di computer “che collaborano in maniera trasparente per distribuire contenuti [...] agli utenti finali al fine di ottimizzarne il processo di consegna” [wikipedia]. Tra i vantaggi di questa tecnolgia anche la possibiltà che il contenuto venga servito dal nodo del network che può soddisfare la richiesta nel minor tempo possibile.

In secondo luogo  si riducono le connessioni simultanee al server (maggiori info su questo punto potete trovarle qui) .

Terzo vantaggio, probabilmente il più importante, se l’utente ha già navigato su siti internet che includevano jQuery dai server Google, la libreria è già memorizzata nella cache del browser e non deve essere nuovamente scaricata.

Si può utilizzare il tag <script>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

oppure utilizzando le API di Google e il mettodo google.load

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

    // Load jQuery
    google.load("jquery", "1.2.6");

    google.setOnLoadCallback(function() {
        // Your code goes here.
    });
       
</script>

Nello stesso modo possono essere richiamate tutte le principali librerie javascript; se vi interessa, la documentazione è qui.

Proprio mentre sto nuovamente impazzendo per far funzionare uno script su Internet Explorer 6, sembra che anche nel team di Gmail qualcuno abbia cominciato a stancarsi di quel broswer diabolico.
Così Gmail suggerise agli utenti del vecchio browser di passare una gmail più veloce (semplicemente cambiando browser – via)…

In effetti gli oppositori di  IE6 in questo periodo sembrano essere tornati alla carica. Se si smette di supportare IE6 è sempre corretto invitare agli utenti che ancora lo adottano, di aggiornarlo alla versione 7, oppure passare a un altro browser.
(Oppure si può far sempre notare che ogni volta che lo si usa… si ammazza un gattino.)

Ho una segnalzaione importante per tutti color che si imbattono in una schermata praticamente vuota quando provano a pubblicare un post sul proprio blog su piattaforma wordpress. Mi è capitato infatti nelle ultime settimane uno strano fenomeno: di tanto in tanto quando provavo ad accedere alla pagina post-new.php, quello che mi trovavo davanti era questo:

Fare l’upgrade e disattivare tutti i plugin non è servito. Dopo diverse ipotesi e numerose ricerche inutili, ho realizzato che è Firebug ad impedire alla pagina di caricare correttamente. Una volta disattivato, post-new.php viene aperta in maniera normale.

Se siete su twitter ci sono tra gli altri  un paio di account che potete seguire (oltre il mio).
@mootols: l’account della ormai celebre libreria javascript rilancia snippet, plugin, tutorial e in generale spunti legati a mootools, appunto.

Ovviamente è da seguire anche l’omologo account, legato al framework messo a punto da John Resig (e che da queste parti si adora)  @jquery.

Se anche voi seguite qualche account twitter che raccoglie risorse per designer o sviluppatori, fatevi sotto nei commenti..

I più attenti avranno notato qualche rimescolamento nella sidebar… La novità più importante è il nuovo box “resources per designers”, una collezione di link dove potrete trovare una quantità di texture, icone, elementi vettoriali, ma anche script e plugin che potrebbero tronare utili nel design quotidiano. Sono tutte segnalazioni di articoli in cui m’imbatto navigando e leggendo i miei feed ogni giorno, e che trovo interessanti: una volta salvati tra i bookmark di delicious con il tag “resources” finiscono automaticamente nel box che vedete in questo blog. Quindi è chiaro che saranno sempre aggiorati.
Restate in ascolto: nei prossimi giorni una piccola guida per creare un box di segnalazioni come questo basato sul bookmarking on-line…

Abbiamo già visto in passato come inserire un video in formato FLV in una pagina Html, utilizzando javascript ed il player flash di Jeroen Wijering. In particolare avevamo visto come l’utilizzo di script come SWFobject, o UFO, fosse necessario per evitare importanti problemi di accessibilità legati all’embedding di un file SFW nella pagina html.

In questo tutorial scopriremo una nuova risorsa per riprodurre un file flv nel nostro sito utilizzando: FLOWplayer, ma la logica che seguiremo per embeddare il player sarà la solita: utilizzeremo javascript e il DOM per inserire il player swf all’interno di un elemento della pagina; il player quindi riprodurrà il video flv. Il risultato sarà simile a questa demo.
Read the rest of this entry »

Abbiamo visto come gli angoli arrotondati, oltre ad abbellire i nostri div, abbiano anche una qualche utilità nel momento in cui servono ad indicare un div contenitore. jQuery Corners è un plugin per jquery (occupa meno di 8 KByte), che permette di impostare agevolmente angoli arrotondati per gli elementi della pagina, senza bisogno di creare immagini. Tra i vantaggi del plugin, come è facile intuire, il fatto che se javascript non è abilitato la pagina “degrada” correttamente. Il plugin sfrutta inoltre le proprietà per gli angoli arrotondati nei browser che già le prevedono, come Firefox e Safari. Ecco il link: jQuery Corners.

Ie7.js è uno script che una volta incluso nella pagina web, obbliga Internet explorer 6 a renderizzare la pagina nello stesso modo in cui la visualizzerebbe Explorer 7. Lo script (che ovviamente non funziona se l’utente ha javascript disabilitato) pone rimedio a una serie di bug relativi ad html e css, e può rappresentare un buon compromesso per chi non ha voglia di sbattersi per arginare con i soliti hack le mille falle di un browser ormai vecchio. Sul sito dello script troverete l’elenco dei bug che vengono risolti.
Naturalmente bisognerà fare in modo che il file venga incluso nella pagina solo se effettivamente questa viene caricata con una versione inferiore rispetto a Internet Explorer 7:

<!--[if lt IE 7]>
<script src="js/IE7.js" type="text/javascript"></script>
<![endif]-->

Ecco il link: ie7.js javascript library.

È on line la quarta variante sullo scroller di feed rss, realizzato con SimplePie e jQuery.
Il primo post della serie, che contiene tutte le informazioni necessarie per creare gli scroller lo trovate qui, mentre nella pagina della demo troverete tutti i link alle risorse necessarie, nonchè fogli di stile, hmtl, codice javascript e PHP. Ecco il link: Scroller n.4

Assolutamente da mettere alla prova questo plugin per jQuery che permette di modificare l’aspetto del campo SELECT di un form. Nell’immagine si vede un SELECT così come apparirebbe normalmente (in questo caso su firefox) e – a destra – un possibile “dopo la cura” fatta con jQuery e Linkselect.

Per intervenire sull’aspetto di radiobutton e checkbox si può usare invece Pretty Checkbox.
Ecco il risultato:

A parte gli innegabili vantaggi estetici, soluzioni come queste, che passano per javascript, consentono di controllare l’aspetto di questi elementi del form in modo che risultino identici su tutti i principali browsers, che come è noto li renderizzano in maniera totalmente differente.

Esistono diverse risosrse per creare tab più o meno sofisticate con jQuery: Tabs 3 per esempio, incluso nella jQuery U.I, e che dovrebbe riuscire a soddisfare tutte le vostre esigenze (parlo di tab s’intende), fino ad arrivare a qualcosa di più corposo come Coda slider, un plugin che tra le altre cose è in grado di generare delle tab. Se invece avete bisogno di una soluzione semplice e che vi costi solo qualche kbyte di javascript potete provare il plugin idTabs.

Qui c’è una live demo

Il funzionamento del plugin è abbastanza semplice: innanzitutto come al solito includiamo jQuery ed il plugin stesso nella pagina.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.idTabs.min.js"></script>

A questo punto i link presenti all’interno dell’elemento con la classe idTabs funzionano da pulsanti per la navigazione: l’attributo href di questi specifica quale div deve essere visualizzato. il markup è semplicissimo:

<div class="tabcontainer">
<ul class="idTabs">
	<li><a href="#lorem">Lorem...</a></li>
	<li><a href="#morbi">morbi!</a></li>
	<li><a href="#fermentum">fermentum</a></li>
</ul>
<div id="lorem">contenuto del primo div</div>
<div id="morbi">contenuto del secondo div</div>
<div id="fermentum">contenuto del terzo div</div>
</div>

Evidentemente sarà necessario impostare lo stile degli elementi in gioco. Bisognerà specificare la classe selected, che il plugin assegna automaticamente alla tab corrente.

ul.idTabs li a {float: left; padding:  5px;
text-decoration: none; background: #444; color: #fff}
.tabcontainer div {clear:left; padding: 10px; background: #fff}
ul.idTabs li a.selected {background: #fff; color: #444}

Ecco il link: idTabs.

(clicca per ingrandire)

Grazie a Lauryn per questo schema che riassume perfettamente la situazione in cui molti di noi si trovano alla domanda che lavoro fai?

Eric Holter pubblica un post su Agency Critique dal titolo abbastanza esplicito: Agency Website Gaffes: #3. Flash. Già in passato su questo blog avevo espresso le mie perplessità sulla validità di Flash per realizzare interi siti internet, soprattutto dal punto di vista SEO. Ovviamente la difficoltà con cui i motori di ricerca indicizzano i contenuti flash è anche al centro del post di Holter, ma questa volta, tra i tanti svantaggi che Ageny Critique ricorda mi preme sottolineare l’aspetto del content management e dell’aggiornamento delle pagine:

Flash a volte viene utilizzato non perchè è la migliore piattaforma per il sito, ma perchè è lo strumento che il designer padroneggia meglio. Cosa che si traduce presumbilmente in un CMS povero, e quindi in meno update sui contenuti.

Ed in effetti – aggiungo io – molte volte chi si ritrova un mirabolante sito in flash è orgoglioso del suo sito, ma capita anche che qualcuno si lamenti della difficoltà con cui riesce ad aggiornarlo.
Il post di Holter continua ipotizzando le ragioni per cui le webagency preferiscono proporre Flash ai loro clienti, vale la pena leggerlo: Agency Website Gaffes: #3. Flash

(A questo punto devo dirlo: se c’è qualcosa che non sopporto nella vita sono i blog in flash).