Pubblicato su Logistica Management – Dicembre 2009

Grazie alle evoluzioni e sperimentazioni continue, possiamo trovare la “linguetta” giusta per svariati utilizzi.

Alcuni esempi:

• - Suddivisione di contenuti per argomenti (http://www.gruppocarige.it/grp/carigesgr/jsp/fondi_comuni_tipologia.jsp?cod=36&tipologia=1)
• - Flussi grafici (http://www.gruppocarige.it/ws/gruppo/jsp/index.jsp)
• - Utilizzo di un piccolo box per più argomenti (http://www.fintyre.it/)
• - Slide show di immagini con thumbnails

Inoltre, grazie all’utilizzo dei frame work di JavaScript come jQuery, MooTools, Prototype, possiamo sbizzarrirci nei più svariati effetti grafici.

Alcuni esempi:

• dimensioni dei box di contenuto fissi o variabili
• effetti di fade in e fade out
• effetti di zoom
• effetti sui background
• effetti sui bordi
• effetti di comparsa da parti differenti dello schermo
• effetti di scorrimento

Gio

• Utilizzo di elementi che identificano immediatamente l’appartenenza di cio’ che si vuole comunicare attraverso texture che ricordano il contesto del posizionamento del cliente
•  Suddividere il layout con linee immaginarie per dare un’impaginazione che segua una logica di navigazione
•  Posizionare gli elementi fondamentali (logo e menu) nel loro spazio convenzionale
•  Utilizzare testi esplicativi per rafforzare le immagini
•  Essere sempre chiari su cio’ che si vuole comunicare
•  Rendere alcuni elementi interattivi per coinvolgere maggiormente l’utente creando affordance su di essi
•  Utilizzare immagini con focus sul soggetto senza sfondi troppo ampi che possano distrarre l’utente
•  Tenere un uniformità tra i font utilizzati sia grafici che testuali
•  Motivare l’utilizzo di ogni colore

Ultimo consiglio, ma forse il più utile, confrontarsi sempre con lo sviluppatore prima di presentare la bozza al cliente.

Gio

Quali sono i veri vantaggi nell’utilizzo di un CSS fatto per bene?

• Terminato e pubblicato il sito, il cliente cambia idea e decide di cambiare tutti i font da Arial a Verdana –> Velocità di aggiornamento totale sul sito cambiando un unico file
• L’architettura informativa prevede una marea di voci di menu grafici nei tre tipici stati: attivo, inattivo, visitato –> Caricamento di un’unica immagine in background che cambia il suo posizionamento, comandata dal css
• La bozza grafica prevede la sovrapposizione di più elementi con trasparenze, sovrapposizione di colori ed ombre –> Utilizzando i <div> possiamo posizionare a “livelli” ogni singolo elemento e con i css determinarne i bordi, i colori e gli effetti senza l’utilizzo di immagini che appesantirebbero il caricamento della pagina
• Il titolo della pagina è grafico e penalizza l’indicizzazione nei motori di ricerca –> Personalizzando il css dell’H1 si puo’ nascondere il testo fuori dal monitor e rimpiazzarlo con un’immagine di background, facendo però indicizzare dai motori di ricerca in maniera corretta il titolo e mantenendo la possibilità di lettura anche per le tecnologie assistive.
• Il logo aziendale si è evoluto ed ha cambiato un codice colore che deve essere cambiato in tutto il sito che è stato fatto da terzi –> Grazie a strumenti gratuiti di debug posso agevolmente variare il colore avendo un’anteprima veritiera ed in tempo reale del layout, riducendo i tempi di realizzazione
• Il cliente vuole il suo sito internet visualizzato su un palmare per poterlo monitorare mentre è in vacanza, ma mi ha comunicato che partirà tra un paio di giorni –> clonando il css e personalizzandolo, a seconda di dove viene visualizzato il sito, verrà caricato quello più consono

Questi sono solo alcuni dei vantaggi nell’utilizzare correttamente la combinazione dei css applicata ai div, ma se vi state chiedendo se le tabelle siano state bandite, la risposta è no.
Le tabelle si continueranno ad utilizzare nel modo per cui sono state inventate, ovvero per formattare dati.

Gio

• Utilizzo di immagini o forme grafiche come background, stando sempre attenti ai contrasti colore, qualora si inserisse sopra del testo
• Inserimento di animazioni flash con i seguenti accorgimenti:
  •  Seguire le regole dei contrasti colore e delle dimensioni dei testi
  • non utilizzare transizioni troppo veloci e mai dei flash o passaggi di luci e obre troppo violenti
  • Dare la possibilità di poter navigare l’animazione, nel caso ci siano eventuali bottoni al suo interno, attraverso il tab index, eventuale shortcut per poter navigare con la tastiera, e il testo alternativo 
  • Dare un nome sensato ad ogni oggetto annidato all’interno della navigazione
  • Non mandare in loop l’animazione
  • Ricordarsi sempre di creare un’immagine alternativa .jpg o .gif per chi naviga con in javascript disabilitati

Che aggiungere ancora?   Sotto con la creatività!

gio

Gio