cascading style sheets CSS fogli di stile
chiudi
Con il termine "layout" in genere si intende l'organizzazione e la distribuzione dei contenuti testuali e grafici di un sito in determinati spazi. Non esiste un tipo di layout ottimale di per se': cio' che infatti si dimostra molto funzionale e appopriato in un progetto, puo' rivelarsi inadeguato in un altro. Ogni scelta e' sempre legata a vari fattori tra cui il contenuto, il tipo di comunicazione, la complessita' e, infine, il gusto personale. In tutti i casi, un buon approccio e' quello che consiste nel delineare una specie di flow-chart del sito stabilendo quali sono le voci principali (menu'), le sotto-voci (submenu') e lo spazio necessario da riservare a ciascuna di esse in termini di testo, immagini e quant'altro. Con questi dati sara' poi piu' semplice decidere l'intelaiatura, se utilizzare una o due colonne laterali, se avere un "header" centrale o fare qualcosa di totalmente differente. In questi anni si e' scritto molto sulle impostazioni stilisticamente corrette che un sito web dovrebbe avere per essere considerato funzionale e molti nomi del web-design internazionale, anche illustri, hanno dato il loro contributo sull'argomento. (alcuni addirittura, presi da illuminazione celeste, hanno scritto dei decagoni di regole). Noi abbiamo umilmente letto ogni cosa con dovuta attenzione e siamo arrivati alla conclusione che, su questi temi, non esistono regole ferree ma solo dei consigli per lo piu' dettati dal buonsenso e dalla pratica quotidiana. Consiglio 1) In inglese si usa il termine "consistency" che potremmo tradurre con "uniformita' ". In parole povere, cerchiamo di sistemare gli elementi ricorrenti del nostro sito in modo che occupino sempre la stessa zona all'interno di ogni singola pagina. Se abbiamo scelto una colorazione o una decorazione particolare per i link, manteniamole costanti in tutto il sito e sara' piu' semplice per gli utenti riconoscerli e utilizzarli. Consiglio 2) Evitiamo i "vicoli ciechi" e cerchiamo di fornire il nostro progetto di una navigazione circolare in modo che da ogni pagina sia possibile accedere a tutte le altre senza dover per forza tornare indietro o ripassare da un percorso stabilito. Consiglio 3) Cerchiamo di mantenere le aree dei menu' a una distanza accettabile una dall'altra in modo che il percorso lo facciano le idee e non il mouse o peggio ancora il collo. La stessa cosa vale per quelle pagine che hanno uno sviluppo verticale; se ripetiamo il menu' orizzontale che sta in alto anche in basso, rendiamo la vita piu' facile a quegli utenti che non hanno la rotellina del mouse e devono usare lo scrolling per tornare su'. Consiglio 4) Questo sembrera' ovvio ma in realta' non lo e': non nascondiamo le cose. Uno dei motivi di maggiore frustrazione per chi naviga in un sito, e' dato dal non trovare le cose che cerca. Non e' raro trovare portali, anche importanti e rinomati, dove per avere un'informazione o peggio un'assistenza, e' necessario perdersi in labirinti magari pieni anche di pubblicita' e annunci fuori luogo. Manteniamo il nostro layout semplice e chiaro e faremo sentire i nostri utenti.ospiti graditi.

Gli ultimi lavori web

SVdati013 storeCeeBeeTecnoEXcellenceCasarredodesignOrtodenteVitamine CreativeCentro Formazione MelloniAIRF AurigaPC Aiutami
Cliente: www.svdati.com

Sito in CSS 3 realizzato per un ingegnere che si occupa di recupero dati. L'uso di "a:hover span" ormai collaudato in altri nostri siti crea una suggestiva presentazione di illustrazioni nella home page e contribuisce a esemplificare le varie attivita' con un menu' rapido e funzionale nelle pagine "servizi". La pagina "contatti" contiene un Form-email realizzato in CSS senza tabelle.

Cliente: www.013store.it

Sito in CSS 3 realizzato per un negozio di usato nell'ambito dell'abbigliamento e delle attrezzature per l'infanzia: lodevole iniziativa. I filmati flash caricano immagini e testi esterni in modo da poter essere aggiornati direttamente dal cliente senza problemi. Alcune soluzioni di overlay tipiche dei fogli di stile permettono inoltre di personalizzare headers e banners all'occorrenza.

Cliente: www.ceebee.it

Logo e sito in CSS 3 realizzati per una stilista di accessori moda. La Gallery mette in luce le possibilit creative dei fogli di stile mantenendo precisione e velocita' nei roll-over. Un raro esempio di slide-show dove il cambio immagine avviene sullo sfondo rispetto agli anchor che stanno in primo piano.

Cliente: www.tecnoexcellence.com

Logo e sito in CSS 2.1 realizzati per un gruppo che si occupa di Coaching Manageriale. Buon esempio di come anche roll-over complessi e tabelle stile Excel possano essere ottenuti utilizzando esclusivamente i Cascading Style Sheets. Velocit ed ergonomia rendono la navigazione facile e piacevole.

Cliente: www.casarredodesign.it

Sito in CSS composto da 54 pagine e 188 immagini realizzato in sole due settimane sulla base di un progetto grafico ideato da CBseeCOM. Fatta eccezione per il breve filmato Flash dell'animazione logo e per il contatore-visite, l'intero sito non contiene script. Tutti i roll-over sono ottenuti con CSS 2.0 e il layout, privo di tabelle, e' la replica fedele della brochure cartacea.

Cliente:www.ortodente.it

Sito commissionato da G&F Communications realizzato in CSS con animazione iniziale in Flash. Questo progetto e' un esempio di come i fogli di stile possono essere utilizzati profiquamente anche in casi di layout complesso. Avessimo dovuto ricorrere a una architettura a tabelle, con il posizionamento dei link circolare, avremmo ottenuto un sito pesantissimo e complicatissimo da aggiornare.

Cliente: www.vitaminecreative.com

Il sito, costruito interamente in Flash, non appartiene alla categoria "Standard Web". Il cliente (G&F Communications) voleva espressamente una sorta di brochure virtuale che contenesse tutti i lavori dell'agenzia e servisse da presentazione. Lo teniamo insieme agli altri siti se non altro per la divertente animazione iniziale e per la complessita' del progetto: 38 filmati interfacciati. (pasticca realizzata con Rhino 3D)

Cliente: www.cieffemme.com Centro Formazione Melloni

Sito in CSS 2.0 script-free, gioca tutto su i colori e su i roll-over testuali che, realizzati ad hoc, servono a mantenere il layout dell'intero sito nello spazio monitor e allo stesso tempo permettono ai motori di ricerca di leggerne interamente il contenuto come se fosse scritto per esteso all'interno delle pagine. (logo artwork Rhino 3D)

Cliente: www.airfauriga.com A.I.R.F Auriga - Associazione Riflessologhi Federati

Un sito molto lineare e pulito che rappresenta una delle Associazioni piu' interessanti nell'ambito del "Benessere". In continuo aggiornamento per quanto riguarda i contenuti, i corsi, il calendario ecc... trova nei Fogli di Stile CSS l'architettura ideale per la praticita' e la rapidita' con cui si possono apportare modifiche.

Cliente: www.pcaiutami.com

Un sito senza fronzoli ma molto funzionale per questa bella iniziativa di offrire gratuitamente assistenza informatica on-line. L'architettura e' semplicissima e si trova tutto in modo istantaneo come dovrebbe essere per chi ha bisogno di aiuto con il computer e non ha tempo da perdere con le navigazioni confuse, i log-in, le animazioni ecc.. 116 pagine e oltre un centinaio di immagini "volano" grazie ai CSS.