beautyfarm - THE BEST DESIGN
DOWNLOAD MY MUSIK,participa la concursuri,soft-uri,cool stuff,NIKON CLUB,Baruri Trendy,ScreenSavers,Accesorii Cool,Masini sexy,Bannere,Games,Aparitii Cinematografice,Tribal Farm...etc distreaza-te!Totul pentru TINE.Cele mai tari subiecte.
|
Lista Forumurilor Pe Tematici
|
beautyfarm - THE BEST DESIGN | Inregistrare | Login
POZE BEAUTYFARM - THE BEST DESIGN
Nu sunteti logat.
|
Nou pe simpatie:
Elena01 19 ani
 | Femeie
19 ani
Braila
cauta Barbat
19 - 31 ani |
|
CocaDozzer
Moderator
 Din: Garda de Fier
Inregistrat: acum 16 ani
Postari: 197
|
|
Offrire ai visitatori un modulo di ricerca nel proprio sito è un aspetto importantissimo. In questo articolo vedremo come sia possibile renderlo anche esteticamente gradevole, oltre che più funzionale, con HTML, CSS e un pizzico di Javascript. Cominciamo subito.
Il markup
Per prima cosa vediamo subito l'esempio che passo passo andremo a realizzare con HTML, CSS e Javascript e il suo screnshot:
Figura 1 - Screenshot del modulo di ricerca
<form id="search" action="" method="get">
<fieldset>
<legend>Cerca nel sito</legend>
<input type="text" id="search-in" value="cerca nel sito...">
<button><img src="search1.png" alt="Cerca" title="avvia la ricerca"></button>
</fieldset>
</form>
Dato che il form dell'esempioha un solo campo di input, per evitare ridondanze ho pensato di indicare la sua funzione attraverso una legend e raggruppare campo di input e bottone di submit attraverso un fieldset. Niente label quindi, ma per questioni di usabilità e accessibilità grazie alla legend il form è comunque esplicito. Ecco la versionedell'esempio senza CSS né Javascript.
Un po' di ridondanza in realtà nell'esempio c'è, e riguarda il valore iniziale del campo di input. È per garantire la comprensione del form nel caso in cui i CSS siano abilitati (rendendo quindi la legend non visibile) ma Javascript sia disabilitato: torneremo sull'argomento più avanti.
Prima di procedere con il CSS, alcune riflessioni sulla scelta del markup del button sono doverose. Questo elemento presenta diversi vantaggi rispetto all'input, illustrati benissimo nell'articolo Premi il button.
Per l'immagine del bottone di ricerca dell'esempio si sarebbe potuto benissimo usare una tecnica di image replacement, svincolando così totalmente il markup dalla presentazione. Ma in questo caso anche le migliori tecniche di image replacement forse non avrebbero funzionato a dovere, dato che lo spazio occupato dall'icona è decisamente limitato.
L'uso di un'immagine attraverso il tag <img> ci garantisce quindi l'accessibilità in uno scenario piuttosto raro, ma possibile: le immagini disabilitate. In questo caso, verrà mostrato il testo alternativo indicato attraverso l'attributo alt dell'immagine stessa.
Il CSS del form
Siamo giunti quindi alla parte centrale dell'esempio, ovvero il foglio di stile. È piuttosto corposo, ma composto da regole semplici e logiche.
Per prima cosa le regole sull'elemento form. Basterà dichiarare la larghezza:
form#search{width: 230px}
Per quanto riguarda il fieldset, elimineremo il bordo e il padding di default. Per la legend, è importante nasconderla mantenendo l'accessibilità verso screen reader e dispositivi alternativi.
ho pensato di usare un text-indent negativo combinato con un font-size molto piccolo. Ecco le due regole:
form#search fieldset{border: 0px solid;padding: 0}
form#search legend{text-indent: -9999px;font-size: 1px}
Arriviamo alla personalizzazione dell'input dell'esempio.
Per quanto riguarda l'input per questioni di allineamento con il bottone si è però reso necessario renderlo float. Viene poi dichiarata una larghezza di 170px, un margine superiore di 3 pixel (determinato empiricamente) per poterlo allineare con l'immagine di ricerca; specificheremo infine l'immagine di sfondo i bordi, il testo e il suo colore. Ecco la regola per intero:
form#search input{float: left;width: 170px;margin-top: 3px;
background: #FFF url(bk.png) repeat-x top left;
border: 1px solid;border-color: #999 #777 #777 #999;
font: 18px Arial,sans-serif;color: #0D56D5}
Infine il bottone di submit. Elimineremo il bordo e imposteremo il colore di sfondo, oltre che aggiungere il cursore "a manina":
form#search button{background: #FFF;
border: 0px solid;cursor: pointer}
Il CSS dell'esempio è così ultimato; rivediamolo per intero:
form#search fieldset{border: 0px solid;padding: 0}
form#search legend{text-indent: -9999px;font-size: 1px}
form#search input{float: left;width: 170px;margin-top: 3px;
background: #FFF url(bk.png) repeat-x top left;
border: 1px solid;border-color: #999 #777 #777 #999;
font: 18px Arial,sans-serif;color: #0D56D5}
form#search button{background: #FFF;
border: 0px solid;cursor: pointer}
Ora è tempo di un pizzico di Javascript.
Il Javascript
Dopo aver visto markup e foglio di stile, vediamo brevemente il Javascript dell'esempio. Come abbiamo detto, l'esempio non presenta label e il fieldset è nascosto grazie ai CSS. Per questioni di usabilità, si è reso quindi necessario replicare la funzione del form attraverso le parole "Cerca nel sito" anche nel campo di input specificando il value iniziale.
In questi casi, per migliorare l'usabilità dei form, è una pratica piuttosto diffusa cancellare il testo dell'input appena questo riceve il focus nel caso in cui ci sia il valore iniziale, che verrà poi ripristinato nel caso in cui l'utente lasci il campo vuoto cliccando altrove nella pagina.
È proprio quello di cui si occupa lo script, specificato nella sezione head della pagina attraverso la seguente riga:
<script type="text/javascript" src="caption.js"></script>
Il contenuto dello script è piuttosto breve: 19 righe in tutto, metà delle quali per la funzione AddLoadEvent realizzata da Simon Willison e presentata in Executing JavaScript on page load. Questa piccola funzione ci garantisce che lo script non dia conflitti con eventuali altri script della pagina.
Per comodità di consultazione, ecco il contenuto dello script per intero:
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function')
window.onload = func;
else
window.onload=function(){
if(oldonload)
oldonload();
func();
}
}
addLoadEvent(function(){
var inpMessage="cerca nel sito...";
var el=document.getElementById("search-in" ;
el.value=inpMessage;
el.onclick=function(){if(el.value==inpMessage) el.value=""}
el.onblur=function(){if(el.value=="" el.value=inpMessage}
});
La spiegazione dello script esula dagli scopi dell'articolo: basti sapere che per poterlo usare è necessario includere la riga con l'elemento script vista prima nella sezione head della pagina e, ovviamente, copiare il file caption.js nella stessa cartella della pagina che utilizza il modulo. In alternativa, è anche possibile specificare un percorso assoluto per lo script.
Conclusioni
In questo articolo abbiamo visto come poter rendere dal punto di vista della marcatura, della personalizzazione e dell'usabilità un elemento piccolo ma fondamentale: un mini-modulo di ricerca, attraversando le diverse scelte implementative.
La compatibilità è decisamente buona: sia la sua presentazione con i fogli di stile che il suo comportamento con javascript sono stati testati con successo sulle versioni di Internet Explorer dalla 5 alla 7, Opera, Firefox e Safari. Per quanto riguarda l'icona del bottone di ricerca, l'ho trovata su questa pagina. Molte altre risorse sulle icone si possono trovare qui sul blog.
In conclusione una piccola nota pratica: è possibile posizionare assolutamente il box di ricerca. In tal caso, è necessario posizionare relativamente il div contenitore in modo da determinare un contesto di posizionamento. Per posizionarlo ad esempio in alto a destra dell'header, le due regole CSS aggiuntive sarebbero le seguenti:
div#header{position: relative}
form#search{position: absolute;top: 20px;right: 10px}
_______________________________________
 PM-URI
 
JUST SAY THANKS-it only takes a second!!!!
|
|
| pus acum 16 ani |
|
