30.7.06

Vacanze

Cari i miei (pochi) lettori fino al 7 agosto 2006 sono in vacanza e dubito di produrre contenuti significativi per questo blog.

Per cui buon divertimento a tutti e a presto.

Le foto delle mie vacanze saranno probabilmente pubblicate sul blog personale ( www.b0sh.net ) quindi se siete affetti da una curiosità morbosa potrete soddisfarla li.

28.7.06

Flash

L'utilizzo eccessivo di flash continua, da anni, a essere un grosso problema di usabilità, e gli eccessi di questi anni andrebbero abbondonati. Flash dovrebbe, come è nelle sue potenzialità, essere usato per creare interfacce utente utili e non fastidiose animazioni.

La maggior parte del Flash che si incontra sul web tutti i giorni è flash inutile, con nessuno scopo se non quello di annoiare le persone. Un solo punto positivo è che le "intro" stanno lentamente scomparendo. Sono talmente inutili che ora anche i peggiori Designers non li raccomandano, anche sei i clienti, spesso disinformati e con una visione del web fallata, continuano a richiederli.

Flash è un ambiente di programmazione e dovrebbe essere utilizzato per offrire agli utenti maggiore potenza e funzionalità che non sono realizzabile con pagine statiche. Flash non va usato per vivacizzare una pagina. Se il contenuto della pagina è noioso, vanno riscritti i testi e rifatte le foto, magari da un fotografo professionista. Non bisogna far muovere la pagina. Questo non aumenta l'attenzione degli utenti, ma la dirige solo altrove. La maggior parte delle persone equipara i contenuti animati a contenuti inutili.

Infine usare flash per la navigazione è l'utilizzo peggiore che se ne possa fare. Le persone preferiscono una navigazione prevedibile e menù statici

26.7.06

Disabilitare la cache coi metatags

I linguaggi server-side come php o asp permettono di settare gli header e disabilitare la cache locale del browser, ma a volte puo essere servire disabilitarla da pagine html classiche.

Ecco cosa inserire nell'header :

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

In realta basterebbe il primo, ma su alcuni browers serve anche il secondo che con un work-around ottiene lo stesso risultato ( setta la scadenza della cache sulla pagine a 1 secondo prima dell'istante in cui viene scaricata )

25.7.06

Effetti di transizione tra le pagine

Attraverso questa direttiva

<meta equiv="Page-Enter" content="RevealTrans(Duration=Y,Transition=X)">

E' possibile definire un effetto di transizione tra le pagine tipo quelli delle presentazioni.

Sostituire a Y il numero di secondi di durata e a X il numero dell'effetto.

Due effetti gradevoli sono il 5 e il 12 ma ce ne sono molti altri.

Da sottolineare che Firefox non sembra supportare questa funzione, ma non causa errori, semplicemente la ignora.

23.7.06

Motore di ricerca

I motori di ricerca letterali riducono l'usabilità in quanto trasformano il linguaggio in un insieme di gruppi di caratteri. Cosa che non è ovviamente vera. Un buon motore di ricerca deve essere in grado di correggere piccoli errori ortografici e automaticamente effettuare ricerche sia per il plurale che per il singolare.

Un problema correlato sempre ai motori di ricerca è quello per cui il motore di ricerca stabilisce una priorità solo in base a quante volte una pagina contiene la stringa ricercata, invece che sull'importanza della pagina. Infatti sarebbe preferibile dirigere gli utenti verso nodi interni dell'albero del sito piuttosto che alle foglie, in quanto difficilmente un motore di ricerca indovina perfettamente la pagina desiderata dall'utente, quindi suggergli nodi interni permette all'utente di affinare il suo interesse e, molto probabilmente, arrivare in 2 clik alla pagina desiderata.

Un altra pratica molto consigliata è quella del "Best Bets" letteralmente la scommessa migliore. Illustrata in questo paper

Un ultimo consiglio è quello di proporre come come primissima interfaccia solo una casella di testo con un pulsante "Cerca". E' esattamente quello che gli utente si aspettano e cercano in un momento di "disperazione". Una ricerca piu avanza sarà poi raggiungibile con un secondo click.
Infatti gli utenti utilizzano il motore di ricerca solo quando la navigazione fallisce e si riservano come ultima possibilità il motore di ricerca. Visto dalla parte del designer di un sito, il motore di ricerca è l'ultima carta prima di perdere un visitatore. Ed è bene che questa carta sia buona !

21.7.06

I 10 peggiori errori di web design

L'usabilità e l'utilità di un sito sono due concetti chiave.
Il sito deve essere utile, offrire effettivamente un servizio, anche solo informativo come questo mio piccolo blog, e questo servizio deve essere di facile comprensione e utilizzo.

Quindi utilità e usabilità.

C'è chi parla di usabilità citando gli errori degli altri. Ovvero Jakob Nielsen. Le sue top10 sono leggendarie. Prima o poi ne tradurrò completamente una. Per questa sera accontentatevi di un elenco dei peggiori errori del 2005 e di un link alle spiegazioni.

1. Problemi di leggibilità

2. Link non comprensibili e non identificabili come tali

3. Abuso di Flash

4. Contenuto non scritto appositamente per il web

5. Motore di ricerca semplicistico e inefficace

6. Incompatibilità tra browser

7. Form enormi

8. Nessun contatto o informazioni aziendali

9. Layout grafico a larghezza fissa

10. Ingrandimento delle foto inadeguato

Scagli la prima pietra chi non ne ha mai commesso almeno 1...

16.7.06

Riabilitare FON

Il mio router ha ora il firmware DD-WRT perfettamente funzionante, ma, visto che tengo al progetto FON, voglio riabilitarlo.

Ho trovato queste prime informazioni su come settare la modalita hospot:

ChillispotEnable
Primary Radius Server IP/DNS213.194.149.226
Backup Radius Server IP/DNS213.194.149.226
DNS IPDNS primario del vostro provider
Redirect URLhttps://login.fon.com/cp/index.php
Shared Keygarrafon
DHCP InterfaceLAN & WLAN
Radius NAS IDIl WAN MAC address del vostro router
('-' tra le cifre , tipo XX-XX-XX- etc.)
UAM Secretgarrafon
UAM Any DNS1
UAM Allowed

www.fon.com,acceso.fon.com,
en.fon.com,es.fon.com



E funzionano.
L'unico problema è che ora FON crede che io abbia 2 router ... probabilmente devo aver sbagliato a digitare il mac.

Vabbe.

Il prossimo passo è creare una separazione netta tra la mia rete domestica ed eventuali ospiti FON.

15.7.06

DD-WRT flashing

Si parte con l'operazione di Flashing.

Il Firmware dd-wrt ha molte possibilità in piu rispetto a quello fornito da FON.
Il mio obbiettivo rimane cmq quello di mantenere la piena funzionalità di condivisione del WiFi proposta da FON. Però far annoiare un povero processore MIPS da 200mhz è veramente uno spreco.
E per poterlo utilizzare al meglio la prima cosa da fare è ottenere uno spazio di archiviazione per programmi e dati. Un disco ethernet è una buona soluzione, e il firmware dd-wrt ha quello che serve per poterlo sfruttare. Ovvero Samba.

Versione utilizzate v23-sp1.generic

... 5 minuti di panico ...

Ok fatto ! Non è diventato un mattoncino.

Connessione a internet ripristinata. Il prossimo passo è riattivare il collegamento con FON.


Link:
dd-wrt wiki : http://www.dd-wrt.com/wiki/index.php/DD-WRT_Docu_%28IT%29
recover from a bad flash : http://www.dd-wrt.com/wiki/index.php/Recover_from_a_Bad_Flash_%28IT%29
dd-wrt download: http://www.dd-wrt.com/dd-wrtv2/downloads.php

14.7.06

Up and running

Nessun particolare problema. Il social router FON è attivo e funzionante.
Non posso offrire un grande raggio d'azione ma sono felice che funzioni. Magari prenderò una antenna esterna in futuro.

La configurazione è stata realmente semplicissima. Nonostante la configurazione "strana".

La mia rete domestica era gia dotata di router/modem/accesspoint. Però il progetto mi piaceva troppo per non parteciparci.

Cosa ho fatto ?
Ho preso il mio portatile aggangiato alla prima rete wifi, lo ho scollegato, ho accesso il router FON.
Ho agganciato il portatile al router FON e attivato internet explorer. Come prima pagina mi ha presentato lo stato del router. Ancora non era collegato a internet quindi ho dovuto configurarlo in modo da essere un elemento della LAN del mio precendente router. Fino qua tutto bene.

Riassunto della situazione:



INTERNET->Router1(192.168.1.1)-> Pc Fisso (192.168.1.xxx).
.. [FON]Router2 (192.168.1.10) -> Portatile (192.168.182.xxx)


Fatto questo registro il l'apparecchietto linksys presso fon e via.

Avrei potuto fermarmi qui ma per maggior ordine ho disattivato la componente wifi del mio vecchio router, ho collegato il pc fisso alle porte del Linksys WRT54GL e attivato un port forward per alcuni servizi interessanti dal primo router al secondo.

Tutto ok e tutto facile.

Tra poco si passa allo smanettamento selvaggio del povero WRT.

Il primo passo è installarci samba.
Il secondo è attaccargli un disco esterno ethernet.

Poi ogni via è possibile.

Eccolo ... è arrivato !



12.7.06

Ancora niente router

Sono passati 15 giorni dalla mia richiesta e niente router.
La spedizione è internazionale, ok, ma... quanto ci mette?

Aggiornamenti presto. Spero.

11.7.06

Qualità della pagina di arrivo

Spiegazioni sul cambio dell'algoritmo "Landing Page Quality" da parte di Andrew C.,

Come forse protrete ricordare, abbiamo incominciato a consideare la qualità della pagina di arrivare del inserzionista nel Quality Score gia dallo scorso Dicembre. In seguito a questo cambiamento, gli inserzionisti che non forniscono page di arrivo utili per i nostri utenti avranno un Quality Score piu basso, con la conseguenza di una piu alta offerta minima richiesta per le loro keywords. Noi comprendiamo che alcune offerte minime potrebbero essere troppo alte per avere un buon rapporto qualità prezzo, ma queste alte offerte minime sono il nostro modo di motivare gli inserzionisti a migliorare le loro pagine di arrivo o semplicemente smettere di usare Adwords per quelle pagine, e nello stello tempo dare il controllo su quali keywords utilizzare con adwords. Anche se è poco intuitivo per alcuni, noi preferiremmo mostrare meno pubblicità che mostrare un annuncio che porta ad una cattiva esperienze per l'utente, in quanto, sul lungo periodo, la fiduca dell'utente verso Adwords è di vitale importanza.

Col passare del tempo abbiamo migliorato i nostri algoritmi per valutare la qualità delle pagine di arrivo ( spesso basandoci sul feedback dei nostri utenti ), e la prossima settimana lancieramo un altro miglioramento. Quindi, durante i prossimi giorni un piccolo numero di inserzionisti, che forniscono un servizio di bassa qualità ai propri utente, vedrano salire le proprie offerte minime.
E' importante notare che la maggior parte degli inserzionisti non subirà alcuna conseguenza per via di questo cambiamento.

Se vedrete un incremento nelle vostre offerte minime e credere che la vostra pagina di arrivo è di ottima qualità, contattate il supporto AdWords e noi controlleremo.
Delle indicazioni di massima circa la qualità delle pagine si possono trovare qua: landing page and site quality guidelines.

Collezione di Mini-Icone

Tornano sempre utili delle piccole icone, sia per i siti web che per i programmi.

Ce ne sono per i tipi di file (Word, Excel, PDF) che per le azioni piu tipiche (Ricerca, Aggiungi, Modifica ...) in diverse varianti di colore.

Eccole

10.7.06

FadeIn e FadeOut con javascript

Effetto carino da usare sul web.
Problema : Flash è uno sperco per una cosa cosi semplice, le gif animate pesano troppo.

Soluzione: Javascript e CSS !


Funzione de inizializzazione :


function initImage() {
// start
imageId = 'uno';
var uno = document.getElementById(imageId);
imageId = 'due';
var due = document.getElementById(imageId);
imageId = 'tre';
var tre = document.getElementById(imageId);
imageId = 'quattro';
var quattro = document.getElementById(imageId);
setOpacity(uno, 100);
setOpacity(due, 100);
setOpacity(tre, 100);
setOpacity(quattro, 100);
loop();
}


Prendiamo ad esempio 4 immagini con ID uno, due, tre e quattro. La prima, l'immagine di partenza avrà opacità 100, le altre 0.


L'opacità la andiamo a settare con questa funzione, che con particolari accorgimenti funziona sul 99.9% dei browser


function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}


La funzione Loop poi si preoccupa di far partire gli effetti di Fade-in e Fade-out in precisi momenti grazie alla funzionalità setTimeout.


function loop() {
fadeOut('uno',100);
fadeIn('due',0);
window.setTimeout("fadeOut('due',100)", 2000);
window.setTimeout("fadeIn('tre',0)", 2000);
window.setTimeout("fadeOut('tre',100)", 4000);
window.setTimeout("fadeIn('quattro',0)", 4000);
window.setTimeout("fadeOut('quattro',100)", 6000);
window.setTimeout("fadeIn('uno',0)", 6000);
window.setTimeout("loop()", 8000);
}


Il primo parametro è la funzione da richiamare, il secondo è il ritardo con cui farlo. Espresso in millisecondi.


Ed ecco le funzioni di fade in e fade out, molto simili tra loro. Utilizzano anch'esse il setTimeout


function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 5;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
} else {
return 0;
}
}
}


function fadeOut(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity >= 0) {
setOpacity(obj, opacity);
opacity -= 5;
window.setTimeout("fadeOut('"+objId+"',"+opacity+")", 100);
} else {
return 0;
}
}
}


Mentre per quanto riguarda l'HTML la struttura deve essere questa:


Nel body ci va :
<body bgcolor="#ffffff" onLoad="initImage()">


e nel testo si mette una cosa del genere opportunamente adattata al vostro caso:
<div id="container" style="position:relative; left:0px; top:0px; width:395px; height:322px; z-index:1; overflow:hidden; ">
<div id="Image1" style="position:relative; left:0px; top:0px; width:395px; height:322px; z-index:2;"><img id='uno' src="images/HP_img1.gif"></div>
<div id="Image2" style="position:relative; left:0px; top:-322px; width:395px; height:322px; z-index:5; overflow: hidden;"><img id='due' src="images/HP_img2.gif"></div>
<div id="Image3" style="position:relative; left:0px; top:-644px; width:395px; height:322px; z-index:10; overflow: hidden;"><img id='tre' src="images/HP_img3.gif"></div>
<div id="Image4" style="position:relative; left:0px; top:-966px; width:395px; height:322px; z-index:15; overflow: hidden;"><img id='quattro' src="images/HP_img4.gif"></div></td>
</div>


Il container non è opzionale, come anche l'overflow:hidden.
Da notare anche il top progressivamente sempre piu negativo in modo che si sovrappongano.