Web Design

...ora mostriamo per categoria

Tutti gli aspetti nell’arte del web Design

 

Creare un Sito/Blog senza HTML

giovedì, ottobre 15th, 2009

Realizzare un sito dalla grafica accattivante, integrandolo con animazioni multimediali e filmati non è più un’operazione riservata ai soli Web Designer esperti. Grazie infatti ad alcuni programmi visuali (che non richiedono la conoscenza del codice HTML), chiunque può creare un sito completo, dallo stile moderno e facilmente aggiornabile nel tempo. In questo progetto, partiremo dal disegno del sito e aggiungeremo man mano i contenuti multimediali e testuali, per pubblicarlo infine su un server che offre spazio Web a costo zero ( ad esempio Altervista, www.altervista.org). A tal fine useremo Incomedia WebSite X1, un programma commerciale solitamente a pagamento che vedremo come ottenerlo gratuitamente. Grazie al sistema di composizione visuale delle pagine e alle schermate progressive che guidano nella composizione del sito, saremo in grado di realizzare un portale di comunicazione completo e funzionale, in meno di un’ora.

1. Portiamoci sulla seguente pagina promozionale, compiliamo i campi richiesti e clicchiamo su Proceed and Download Software.

2. Nella pagina successiva potremo direttamente scaricare Web Site X1. (Potete installarlo senza bisogno di una chiave di licenza)

3. Installiamo ed avviamo Incomedia WebSite X1 (wsx1_it.exe). Sulla sinistra della schermata principale vedremo le 5 fasi della creazione del sito. Clicchiamo Next per iniziare a definire le Impostazioni generali. Ricordiamoci che in ogni momento, in caso di difficoltà, possiamo premere il tasto F1 per accedere alla guida del programma.

4. La schermata successiva riporta una doppia opzione che permette di scegliere se realizzare un nuovo progetto o modificarne uno già creato. Poiché questo è il nostro primo sito, selezioniamo la voce Create a New Project e clicchiamo Next. Compiliamo tutti i campi del modulo che appare e proseguiamo con un clic su Next.

5. Nella pagina che si apre, scegliamo il tipo di menu che vogliamo applicare al sito, nel mio caso Vertical Menu, e procediamo con Next. Clicchiamo sui temi presenti a sinistra della schermata. Potremo così visualizzarne l’anteprima sulla destra e, quando avremo trovato uno stile di nostro gradimento, confermiamolo con Next.

6. È il momento di aggiungere (tasto New Page) tante pagine quante sono le sezioni che vogliamo far comparire nel menu principale del sito. Possiamo rinominarle in qualsiasi momento (Rename) o cambiarne l’ordine con i tasti Move Up e Move Down. Una volta inseriti i nominativi delle pagine, premiamo Next.

7. Nella schermata Inserimento degli oggetti possiamo modellare i contenuti delle singole pagine secondo le nostre esigenze. Per decidere dove collocare testi, immagini, animazioni Flash o video e suoni in una delle aree della pagina, basta trascinare col mouse il simbolo corrispondente dalla sinistra (area Objects) nella posizione desiderata.

8. Per modificare i contenuti inseriti al Passo 7 clicchiamo due volte su uno degli oggetti presenti nella griglia d’impaginazione. In caso di Testo si aprirà un editor nel quale potremo scrivere e formattare ciò che vogliamo. Per i collegamenti ipertestuali, selezioniamo una parola e clicchiamo su Inserisci collegamento: potremo così linkare file, siti esterni ed altro. Facciamo Ok per salvare.

9. Finito d’inserire tutti i contenuti (per ogni sezione della griglia e le pagine di menu stabilite al Passo 6), comparirà una pagina da cui possiamo scegliere se modificare l’aspetto di alcuni elementi del sito. Per modificare i colori del menu, clicchiamo su Main Level Menu. Allo stesso modo possiamo personalizzare l’aspetto standard dei collegamenti ipertestuali, dei titoli e delle barre di scorrimento.

10. Per salvare il nostro lavoro e poterlo così modificare in qualsiasi momento, clicchiamo sul pulsante Save nella parte alta dell’interfaccia di WebSite e scegliamo dove memorizzare i dati. A questo punto, il programma ci chiederà di esportare il sito, ovvero di salvarlo in formato compatibile per il Web. Per pubblicarlo subito on-line, è sufficiente selezionare l’opzione Export WebSite on Internet.

11. Se non abbiamo uno spazio Web personale, registriamoci gratuitamente ad Altervista. Colleghiamoci al sito Internet www.altervista.org, scegliamo il nome da dare al nostro sito clicchiamo su Prosegui e compiliamo l’apposito modulo. Al termine, controlliamo la casella di posta elettronica: riceveremo i dati per il login via FTP al nostro spazio Web.

PAGINE FANTASMA: Se vogliamo che le pagine vengano visualizzate in tempo reale sul browser in fase di compilazione della mappa del sito (Passo 6) selezioniamo la voce Test, la pagina si aprira automaticamente, potermmo farci un idea del progetto realizzato.

COLLEGAMENTI INCROCIATI: Abbiamo un numero molto elevato di pagine e le voci di menu non sono sufficienti perché composte da un unico livello? Sfruttando le pagine non visibili, linkate all’interno delle pagine principali, possiamo creare delle sezioni del sito anche molto ricche e strutturate. Per inserire i link alle pagine non visibili basta comporre un testo e applicare la funzione Inserisci collegamento.

FLASH E VIDEO: Possiamo pubblicare animazioni Flash o filmati video da visualizzare nelle pagine (i file da caricare devono essere disponibili sul nostro disco fisso). Durante la composizione delle pagine, inseriamo Animazione Flash o Video/Audio nella posizione desiderata. Clicchiamo due volte su di essi per caricare i file e configurarne la visualizzazione.

ANCHE PER ESPERTI: WebSite X1 è un software visuale. Ciò non toglie che si possono modificare gli elementi grafici creati aprendo gli HTML esportati sul disco fisso, oppure sostituendo i file standard con quelli modificati (opportunamente rinominati) nelle cartelle delle immagini.

Come realizzare un menu a tendina

giovedì, giugno 25th, 2009

Le regole da seguire nella creazione di un dropdown menu usabile.

I menu a tendina sono un’ottima soluzione per rendere accessibili più pagine ai visitatori del sito. Possono essere realizzati usando solo i CSS o anche JavaScript, ma è comunque necessario rispettare alcune regole:

* Le voci devono avere un’area estesa, comodamente selezionabile, per consentire una navigazione facile. Sono sconsigliate le etichette di testo troppo lunghe.

Dropdown menu
* E’ utile un ritardo di qualche frazione di secondo su apertura e chiusura del menu, per evitare attivazioni involontarie spostando il mouse
* Il menu deve potersi riposizionare a seconda delle dimensioni della finestra del browser, spostandosi in un’area visibile quando si trova vicino ai margini della stessa. Un classico errore è mostrato nell’immagine: Un esempio di menu a tendina con comportamento errato, ai margini della finestra del browser.
* All’apertura della tendina, l’utente deve vedere tutte le voci insieme, senza necessità di effettuare scroll della pagina
* I link di primo livello devono avere una destinazione, che sarà utilizzata anche se il menu non è accessibile (ad esempio JavaScript disabilitato)
* Un menu a tendina non è una mappa del sito, è inutile e dannoso elencare tutte le pagine
* Le voci selezionate dall’utente all’interno del menu dovrebbero rimanere evidenti Menu con voci selezionate
* Il menu dovrebbe essere perfettamente navigabile anche da tastiera
* I menu realizzati esclusivamente con i CSS spesso sono poco usabili: a volte è meglio evitarli. Senza JavaScript infatti non è possibile gestire alcuni aspetti come il ritardo sull’apertura e sulla chiusura.
* Con JavaScript disabilitato il sito deve essere comunque navigabile
* Le voci dei sottomenu è bene che siano accessibili agli screen reader senza nasconderle con display: none (ma con position: absolute) Queste regole andrebbero rispettate in ogni occasione: per alcune potrebbe essere concessa qualche eccezione a seconda delle circostanze, ma alcuni requisiti come l’usabilità sono fondamentali. Un menu a tendina deve essere facile da utilizzare, perchè è il mezzo principale per far navigare gli utenti nel vostro sito. In certi casi conviene mantenere un menu classico, se l’alternativa deve essere poco usabile. Esempi di menu a tendina Esistono diverse risorse disponibili per realizzare un menu a tendina senza troppi problemi. Non tutte però seguono i principi elencati: ve ne segnalo un paio. Potete usarle come un ottimo punto di partenza per i vostri siti:
* Free CSS DropDown menu Framework: una soluzione modulare, con diversi temi grafici già pronti
* MenuMatic: un plugin per la libreria Mootools che trasforma una lista di link HTML in un menu a tendina Se conoscete altre risorse interessanti segnalatele pure nei commenti, le aggiungerò a questa lista.