Archive for the 'Web design' Category

Page 2 of 3

Feng-GUI: Feng Shui per interfacce grafiche

Published on September 19, 2008 in Graphic design and Web design. 0 Comments Tags: , , , .

Non so bene perché abbia aspettato così tanto prima di segnalare questo sito web (ma soprattuto questo gruppo di ricerca: Feng-GUI, Feng-GUI Lab), il quale propone un algoritmo molto interessante per la simulazione dei movimenti oculari.

Il loro software, che implementa l’algoritmo di cui parlavo, permette di determinare quale sia la sequenza dei movimenti oculari dell’utente, dando così delle indicazioni riguardo alla rilevanza degli elementi grafici di una pagina web. L’idea è quella di dare un riferimento piuttosto preciso (ma sempre teorico) per determinare cosa è più visibile e cosa non lo è, e in che ordine.

E’ molto interessante leggere quali sono i parametri che l’algoritmo utilizza per determinare il peso degli elementi grafici, ma soprattuto è molto importante provarlo.

http://www.flatiron.it/2008/09/feng-gui-feng-shui-per-interfacce-grafiche/

I tooltip in javascript

Published on September 18, 2008 in Web design. 0 Comments Tags: , , .

Di tutti gli argomenti che ho trovato in rete ne ho trovato uno particolarmente interessant: i tooltip in javscript.

I tooltip sono i balloon, le nuvolette che appaiono quando restate sopra un elemento per qualche secondo con il vostro puntatore e vi forniscono informazioni aggiuntive sull’elemento.

Realizzarli in javascript non è complicato, ma sicuramente è antipatico. Da qui la pubblicazione di una lista di librerie/plugin che permettono di inserire un tooltip in una pagina web. Scegliete quello che preferite.

http://www.flatiron.it/2008/09/i-tooltip-in-javascript/

Per evitare i CSS hacks

Published on September 17, 2008 in Web design. 2 Comments Tags: , .

Ho letto in rete un ottimo articolo per evitare l’utilizzo dei CSS hacks. Il problema è affrontato in maniera diversa da come mi sarei immaginato, ma la soluzione è funzionale ed elegante. In pratica si tratta di aggiungere del codice javascript in modo da poter creare, successivamente, degli stili personalizzati per ogni browser, in maniera semplice ed intuitiva.

Vi posto il codice sorgente:

<script type="text/javascript">
var cssFix = function(){
var u = navigator.userAgent.toLowerCase(),
addClass = function(el,val){
if(!el.className) {
el.className = val;
} else {
var newCl = el.className;
newCl+=(" "+val);
el.className = newCl;
}
},
is = function(t){return (u.indexOf(t)!=-1)};
addClass(document.getElementsByTagName(’html’)[0],[
(!(/opera|webtv/i.test(u))&&/msie (d)/.test(u))?(’ie ie’+RegExp.$1)
:is(’firefox/2&#8242;)?’gecko ff2&#8242;
:is(’firefox/3&#8242;)?’gecko ff3&#8242;
:is(’gecko/’)?’gecko’
:is(’opera/9&#8242;)?’opera opera9&#8242;:/opera (d)/.test(u)?’opera opera’+RegExp.$1
:is(’konqueror’)?’konqueror’
:is(’applewebkit/’)?’webkit safari’
:is(’mozilla/’)?’gecko’:”,
(is(’x11&#8242;)||is(’linux’))?’ linux’
:is(’mac’)?’ mac’
:is(’win’)?’ win’:”
].join(" "));
}();
</script>

Questo codice attiva i seguenti stile per i relativi browser.

.ie — Tutte le versioni di IE;
.ie8 — IE 8.?;
.ie7 — IE 7.x;
.ie6 — IE 6.x;
.ie5 — IE 5.x;
.gecko — Tutte le versioni di Firefox;
.ff2 — Firefox 2;
.ff3 — Firefox 3;
.opera — Tutte le versioni di Opera;
.opera8 — Opera 8.x;
.opera9 — Opera 9.x;
.konqueror — Konqueror;
.safari — Safari.

E questo è un piccolo esempio: in questo caso verrebbe visualizzato il testo in rosso in Opera.

.opera div {
    color:red;
}

http://www.flatiron.it/2008/09/per-evitare-i-css-hacks/

Librerie javascript

Published on September 16, 2008 in Web application and Web design. 0 Comments Tags: , , , , .

Oggi stanno diventando indispensabili per creare delle RIA, anche se qualcuno le critica perché creano alcuni problemi di accessibilità oltre a mettere il codice della pagina in secondo piano (a questo proposito, affronterò il problema delle tecnologie utilizzate nello sviluppo dei siti web in un prossimo post), ma le librerie javascript (o i framework come qualcuno li chiama) sono sicuramente il futuro.

Sono molti i “big” che ne hanno sviluppate di proprie e moltissime anche quelle dei meno big. Ormai sono una realtà dalla quale non è possibile prescindere. Io le ho utilizzate e rendono lo sviluppo delle interfacce più semplice, però ricordate: scegliete quelle che preferite all’inizio di un progetto e mantenetele resistendo alla tentazione di effettuare un mesh-up di librerie. Vi assicuro che c’è da impazzire.

Di seguito vi riporto i link di alcune delle più conosciute:

http://www.flatiron.it/2008/09/librerie-javascript/

I vantaggi di Firefox 3.0

Published on September 15, 2008 in Web design and World Wide Web. 0 Comments Tags: , , .

Nel precedente post ho parlato del nuovo browser di Google e di quanto mi abbia colpito positivamente. In questo nuovo post voglio invece parlare dei vantaggi che offre Firefox rispetto al primo.

Chrome, oltre ad una serie di migliorie tecniche (V8, processi separati e altro ancora), ha il suo punto di forza nella nuova interfaccia che definisce un nuovo approccio alla navigazione. Tutto ciò potrebbe far credere che per Firefox ormai sia tutto finito, niente affatto.

La complessità (relativamente a Chrome) dell’interfaccia di Firefox ha la sua forza nella possibilità di essere estesa con gli addons (come del resto tutto il programma), aspetto fondamentale per rendere il browser uno strumento complesso e personalizzabile che diventa un supporto per le attività legate sul web. Con Chrome, Google, ha concentrato l’attenzione sul contenuto trasmesso attraverso il web, mentre Firefox mantiene la possibilità di funzionare da tramite tra web application e computer in locale, oppure tra web application e altre applicazioni, sia online che offline.

Come esempio voglio parlare delle estensioni legate alla mia attività di web designer e web developer: web developer e firebug. Queste due estensioni, veramente impressionanti, sono delle vere e proprie applicazioni intergrate nel browser, che permettono:

  • un’analisi di tutti gli elementi della pagina che si sta visualizzando;
  • la modifica on the fly, con la visualizzazione immediata dei risultati;
  • di avere degli strumenti di supporto come il ruler per la misurazione dei pixel;
  • di utilizzare una console per il debugging;
  • di misurare le il peso delle pagine scaricate dalla rete;
  • molto altro ancora.

Questi sono solo due esempio di un vasto mondo di estensioni che danno la possibilità di effettuare praticamente qualsiasi attività che nasca dal WWW e che finisca altrove.

Nonostante la grande idea della società fondata da Page e Brin, Firefox rimane uno strumento indispensabile del quale sarà difficile fare a meno.

http://www.flatiron.it/2008/09/i-vantaggi-di-firefox-30/