Creare pulsanti web 2.0


PULSANTI WEB PER IL SITO

 bottoni Web 2.0La separazione tra contenuto e presentazione,  in ambito web, sta diventando una condizione indispensabile per il corretto sviluppo di software e, ancor di più, di siti e portali. La  reazione di una struttura software  che consenta di separare in maniera netta i dati dalla loro rappresentazione grafica consente di fruire degli stessi anche utilizzando mezzi non  convenzionali di consultazione, come potrebbero essere i PDA e i telefoni cellulari.  Usare i fogli di stile, poi, accelera il lavoro di mantenimento di un sito. Pensate, per esempio, al tempo che serve per sviluppare un pulsante con  effetto rollover, ossia che cambi aspetto al passaggio del mouse, utilizzando la tecnica classica.

Dovreste innanzitutto preparare due immagini grafiche con un  programma apposito, come Photoshop, quindi scrivere o recuperare del codice Javascript che vi consenta l’applicazione dell’effetto desiderato, con i noti  problemi di compatibilità con le varie versioni di browser. Quello che complica però è il fatto che ogni ulteriore modifica del bottone comporta la creazione ex-novo di tutto l’impianto grafico.

 TUTTA LA POTENZA DEI CSS 

 stile Web 2.0Utilizzando le potenzialità dei CSS tutto  risulterà più semplice. Per applicare questo metodo dovrete sfruttare il sistema che prevede l’utilizzo delle voci LINK, VISITED, HOVER e ACTIVE, che rappresentano  lo stato di un collegamento ipertestuale. Userete le funzionalità specifiche  di Dreamweaver per la creazione di fogli di stile e pertanto inizierete facendo clic sul percorso FINESTRA/STILI  CSS. In quella PROGETTAZIONE selezionate il comando NUOVO STILE CSS e create uno STILE PERSONALIZZATO (classe) che chiamerete BOTTONE1.
Nella categoria TIPO, impostate il font  che desiderate e mettete il segno di spunta accanto alla voce NESSUNO nella sezione EFFETTI. Passate poi alla categoria SFONDO e impostate il colore dello  sfondo che dovrà avere il vostro bottone.  Quindi andate alla categoria BLOCCO DI TESTO, scegliendo come allineamentodel testo quello centrato e, cosa molto importante, impostate la voce VISUALIZZA  con l’opzione BLOCCO.

Nella categoria ELEMENTI DI PAGINA, nella sezione  MARGINE, mettete quindi un segno di spunta accanto alla voce UGUALE PER  TUTTO e impostate la spaziatura che   dovrà separare il nuovo pulsante dagli altri elementi contigui. Come ultimo sforzo passate poi alla categoria BORDO, mettete un segno di spunta accanto alla voce UGUALE PER  TUTTO sia nella sezione STILE sia in quella  LARGHEZZA, quindi impostate i colori che dovranno delineare i bordi del bottone, selezionandoli a coppie. Se il pulsante  non viene premuto avrà il bordo superiore e quello di sinistra chiari,  mentre gli altri due bordi saranno di colore scuro. UN’OCCHIATA AL CODICE Una volta impostato il primo pulsante,  fate clic su OK e passate in VISUALIZZAZIONE  CODICE. Vedrete che ci sarà, solitamente subito dopo il tag , il codice che gestisce la visualizzazione del  bottone. Ricopiate il codice tre volte, in modo da potere rappresentare i quattro  aspetti del pulsante, quindi aggiungete, a seguire per ogni singola voce BOTTONE1, queste indicazioni:

a: link
a: visited
a: hover
a: active

In questo modo avrete cambiato il  codice del bottone nello stato HOVER, invertendo il colore dei bordi. Adesso  vi basterà richiamare il vostro pulsante, all’interno del body della pagina, con la semplice sintassi:

<div class="bottone1"><a href="[l’indirizzo a cui il link deve puntare]">Bottone 1</a></div>

e vedrete premiati i vostri sforzi. Come potrete notare, ogni modifica  all’aspetto del pulsante avverrà semplicemente intervenendo sul codice del CSS e se poi avrete intenzione di cambiare la scritta del bottone vi basterà  modificare la sola stringa di testo del codice di pagina.

GENERATORI DI BOTTONI E PULSANTI ONLINE

As Button Generator – Creare bottoni editabili.  È possibile modificare l’icona che vedete,  allocare un’ immagine personalizzata scegliendo il testo digitato,  i pulsanti sono mobili dal trascinamento del mouse. È possibile inserire  questo servizio per il tuo sito

Button Maker –  Chiamalo  come meglio preferisci: antipixel, distintivo, adesivo, pulsante o bottone divisi in due parti.  Puoi personalizzarlo come meglio credi scegliendo colore e testo.

Button Factory – Creare dei pulsanti bei bottoni.  Progetta la tua tasto molto personale (tutto è sintonizzabile,dal testo e font alla dimensione e il colore) o adattare uno degli esempi predefiniti!

Cool Archivio  – Generatore di pulsanti, generatore di logo on-line e Button Maker per creare la propria grafica! Pulsanti animati.

Cool Text - Generatore di pulsanti, logo e grafica

CSS Trick Button Maker – genera bottoni web 2.0 utilizzando il con codice CSS.

DevDude CSS Button Generator - Pulsanti personalizzati utilizzando i CSS.