Firebug

E’ l’addon più gettonato di sempre, velocizza il lavoro e la verifica permettendo di analizzare nel dettaglio la pagina html, il dom e javascript. Uno strumento utile per html e css, permette infatti di analizzare un elemento della pagina e vedere quali regole sono attribuite e quali eredita. Per chi invece utilizza javascript mette a disposizione una comoda console che riporta errori e anomalie. Oltre a questo Firebug permette la modifica da browser dei css oltre ad una comoda rappresentazione del box model per valutare i parametri di ogni elemento. Uno strumento indispensabile quando si lavora con ajax anche se diventa eccessivo per la normale navigazione web.

link al sito del progetto

Web developer toolbar

Un ottimo addon dai molteplici utilizzi, consente di visualizzare separatamente javascript, css e html. Permette la modifica da browser di css e html con rendering immediato, analizza il peso della pagina fornendo un report sulle dimensioni dei files, compila automaticamente i campi di un form, valida pagine online e offline tramite il validatore w3c, permette l’anteprima a diverse risoluzioni e fornisce un righello per misurare in pixel ogni parte della pagina. Oltre a questo semplifica le normali operazioni da browser come disabilitare immagini o css e cancellare i cookie.

linka mozilla add-ons

Fireshot

E’ un addon per firefox che salva in formato png l’immagine del sito, ma non solo, permette l’aggiunta di note e commenti direttamente da browser salvando il tutto come immagine. L’opzione “capture entire page” permette di salvare un’immagine della pagina per intero e le opzioni di condivisione permettono di velocizzare la stampa, l’invio tramite mail o l’upload.

Link a mozilla add-ons

Tre ottimi strumenti per velocizzare il lavoro, se ancora non li usate non vi resta che provarli.

Una volta definiti questi aspetti si può partire definendo una griglia per il nostro layout. Questo permettà di mantenere ordine e conformità grafica nelle varie pagine.

Per realizzare una griglia è necessario definire almeno tre dimensioni:

-Larghezza della pagina

-Numero di colonne

-Spaziatura tra i vari elementi

Larghezza della pagina

Per questa dimensione è consigliabile utilizzare una misura uguale o inferiore ai 960px che rappresenta l’area visibile dall’utente ad una risoluzione di 1024x768px con i diversi browser. La misura in realtà è di 968px ma viene arrotondata per comodità. Essendo la risoluzione minima più usata dagli utenti di 1024x768px garantisce un ottima compatibilità con i monitor degli utenti.

Numero di colonne

Il numero di colonne deve essere definito in base alla quantità e alla varietà di contenuti del sito. E’ utile ricordare che un minor numero di colonne lascerà più spazio per immagini e grafiche mentre un numero eccessivo renderà il contenuto difficilmente leggibile. Bisogna sempre valutare a priori quale soluzione sia opportuna per un determinato contesto.

Spaziatura tra gli elementi

In qualunque contesto grafico è utile lasciare un minimo di spazio tra i contenuti per migliorare la leggibilità e soprattutto definire aree differenti con diversi elementi. Facendo attenzione che lo spazio sia proporzionale ai contenuti e non faccia prevalere il “vuoto” che porterebbe solo disturbo e confusione nella pagina. E’ utile ricordare che una volta definita una spaziatura è opportuno mantenerla su tutto il sito per garantire una migliore leggibilità all’utente.

Viste queste premesse ho creato 44 esempi di layout a larghezza fissa da 960px con differente numero di colonne e differenti spaziature. Gli esempi sono visibili su questa pagina.

Per oggi ti propongo 5 spunti interessanti sui css che penso possano interessarti:

Regole css applicate di default agli elementi delle pagine html

Senza dubbio non è una nuova risorsa ma questa settimana ho scoperto che sono in molti a non leggere i documenti del w3c, nel caso ti sei mai chiesto quali sono le proprietà di default sugli elementi html questo documento riassume per ogni elemento le varie regole che gli sono attribuite di default.

10 proprietà css molto utili ma non supportate da internet explorer

Il titolo dice tutto, nel caso non ti bastasse questo articolo per abbandonare Internet Explorer leggi questo articolo, se invece hai già abbandonato da tempo il browser microsoft ti consiglio questa iniziativa molto simpatica.

Creare thumbnail grazie alla proprrietà clip

Un bel tutorial, che spiega come realizzare semplici thumbnail da immagini più grandi grazie alla proprietà clip dei css, in alternativa ripropongo questo articolo sulla gestione delle thumbnail con i css e questo su come realizzare una thumbnail grazie a canvas.

Esempi di animazione con i css

Alcuni interessanti esempi di animazione creati con solo css, attualmente funzionano solo su Chrome e Safari, vi consiglio quindi di utilizzare uno di questi browser per capire il potenziale ancora inespresso dei css.

Statistiche sul supporto dei selettori css sui vari browser

Un ottimo riassunto di tutti i selettori css e del supporto fornito da ogni browser con rispettivo sistema operativo, un utile memento quando utilizziamo molti css hacks.

Scegliere di utilizzare un framework è di norma una scelta abbastanza difficile e scegliere quale usare fra i tanti lo è ancora di più.

Se siete abituati a lavorare “a mano” una scelta standarizzata non può che suscitare qualche dubbio, è come dire ad un falegname di utilizzare i mobili dell’Ikea per i suoi lavori. La soluzione “standard” è infatti funzionale nel 99% dei casi mentre nel restante 1% rappresenta un problema in più da risolvere.

Sicuramente prima di prendere una scelta occorre fare le dovute valutazioni e porsi qualche domanda.

1) Obiettivo: Cosa posso fare con questo framework?

Il primo dubbio che devi risolvere è quale obbiettivo certo puoi raggiungere, non farti affascinare da addon, plugin, opzioni avanzate ed analizza il potenziale del framework senza aggiunte, è ciò che stavi cercando?

2) Compatibilità: funziona in tutti i contesti di utilizzo?

Pensa all’utilizzo finale, i vari contesti di utilizzo (browser, sistemi operativi, server) possono presentare problemi, verifica sempre se e come vengono risolti nelle specifiche casistiche.

3) Qualità: E’ conforme agli standard?

Nessuno parte con l’intenzione di fare un lavoro scadente, una sintassi poco elegante, prestazioni non ottimizzate e poca attenzione agli standard possono essere buoni motivi per provare altro.

4) Specifiche tecniche: Su che versione si basa questo rilascio?

Un prodotto aggiornato si basa su tecnologie aggiornate ma retrocompatibili, iniziare a lavorare con un framework obsoleto compromette seriamente le possibilità di utilizzo nell’immediato futuro.

5) Personalizzazione: Posso aggiungere parti modulari per personalizzare questo framework?

E’ corretto che esistano dei limit di utilizzo, altrimenti non servirebbe più l’essere umano per valutare e compiere scelte ma deve esistere la possibilità di superare questi limiti con un minimo di personalizzazione.

6) Utilizzo: Che licenza è stata associata a questo progetto?

Hai trovato il framework perfetto per te, ora vuoi usarlo ma puoi? Verifica la licenza e controlla se è rivendibile, modificabile ed utilizzabile e a quali condizioni. Non sempre le cose migliori sono a pagamento ma può anche essere vero il contrario, informarsi aiuta a farsi un’idea su che quali sono le offerte al momento, non è detto che domani la licenza cambi o che tu abbia un budget da investire in un valido prodotto.

7) Supporto: Esiste una documentazione per utilizzare questo framework?

Per utilizzare un framework occorre conoscerlo e bisogna avere la possibilità di avere almeno una documentazione di riferimento, se il progetto è abbastanza maturo di norma esisteranno già dei tutorial e siti specializzati nell’offrire le informazioni necessarie per iniziare. Qualche ricerca preliminare può aiutare a trovare risorse per capire la qualità e la quantità di documentazione di supporto.

Comunità: Esiste una comunità di utenti che utilizzano questo framework?

Una comunità di utenti è una dei maggiori vantaggi , oltra al supporto, documentazione ed esempi che si creano si è certi di non essere soli e che la nostra scelta è comune a molti altri sviluppatori che avranno valutato prima di noi questo framework.

9) Testimonianze: Chi ha usato questo framework me lo consiglierebbe?

Avere un feedback sulla qualità è sempre una buona cosa, dal numero e dal giudizio espresso dagli utenti si capisce al volo se il progetto merita o meno la nostra attenzione, cercare in rete o sul sito una recensione può farci risparmiare molto tempo e ci da più elementi per una scelta ponderata.

10) Limitazioni: L’utilizzo di questo framework limita in qualche modo l’utilizzo di altre tecnologie?

E’ possibile che un framework non sia compatibile con altri o limiti l’utilizzo di determinate tecnlogie, prima di usarlo sarebbe opportuno conoscere eventuali controindicazioni di norma segnalate nella documentazione.

11) Affidabilità: Chi porta avanti questo progetto?

Non è mai bello essere abbandonati, affidarsi ad un framework e scoprire un giorno che il progetto ha chiuso può essere davvero un grave problema, occorre appurare se questo progetto è attivo al momento e ha il potenziale per essere portato avanti. Sarebbe meglio affidarsi a progetti portati avanti da un team piuttosto che da un singolo per avere maggiori certezze sulla longevità del framework.

12) Apprendimento: Quanto tempo mi richiede imparare ad usare questo framework?

Il tempo è sempre una variabile da considerare, più è complesso ed ampio un framework più tempo richiederà per conoscerlo a fondo, se non avete molto tempo a disposizione conviene cercare qualche tutorial o una guida introduttiva per iniziare.

13) Vantaggio: Quali vantaggi presenta l’utilizzo di questo framework rispetto all’uso tradizionale della tecnologia?

Normalmente il grande vantaggio di un framework è quello di ridurre i tempi di sviluppo se dopo un periodo di prova non si riscontra nessun beneficio è meglio cercare altro.

14) Comodità: Questo framework è compatibile con il mio modo di lavorare?

Se una persona è abituata a fare siti con le tebelle difficilmente troverà comodo e intuitivo un framework css.

Bisogna sempre valutare la compatibilità della proposta con la propria metodologia di lavoro per utilizzarla senza sconvolgimenti.

15) Provare

Per quante informazioni puoi trovare l’unica soluzione per prendere una scelta è quella di provare, le domande precedenti servono a “scremare” i frameworks e a limitare la scelta a pochi se non ad uno.

Se è possibile scarica il framework ed utilizzalo per le operazioni più comuni, valutane la comodità e la semplicità di utilizzo, la compatibilità e se incontri problemi cerca delle soluzioni con il supporto nella documentazione, ti aiuterà a farti un’idea di come sia utilizzarlo nel lavoro, dedica un po’ di tempo a questa operazione soprattutto se hai già scartato altre alternative, se infine non ti trovi bene potresti provare altri frameworks oppure pensare di svilupparne uno tuo risolvendo i problemi che hai incontrato su quelli esistenti.

“L’infografica si occupa principalmente dell’organizzazione e della rappresentazione di dati e informazioni in forma grafica”

Wikipedia

L’infografica si occupa principalmente della parte funzionale della grafica dove il ruolo estetico è vincolato alla leggibilita e fruibilità dell’informazione da parte del lettore, un po’ come nei siti web dove usabilità e buon senso regolano posizioni, dimensioni, distanze e contrasti.

Per ottenere un buon risultato possiamo affidarci ai saggi consigli di Anthony Short, web designer Australiano che ha recentemente pubblicato un articolo con le più comuni soluzioni per realizzare siti web standard. L’articolo risulta molto interessante per le soluzioni proposte ma diventa ancora più utile per i commenti e gli update fatti negli ultimi giorni che valutano con criterio molte problematiche sul rendering e sulle differenze tra browser.

Una risorsa a mio parere molto utile che solleva anche qualche domanda su quanto sia davvero possibile ottenere siti perfettamente identici tra browser e sistemi operativi differenti.

Il libro è stato venduto in precedenza su amazon con grande successo e molti apprezzamenti da parte degli utenti. Nonostante sia un libro scritto nel 2001 contiene molti suggerimenti e consigli pratici che ogni web designer dovrebbe conoscere. Consiglio vivamente questa lettura a tutti coloro che stanno affrontando il passaggio dalla grafica cartacea al web design come discorso introduttivo sulla tecnologia web.

Il libro è stato venduto in precedenza su amazon con grande successo e molti apprezzamenti da parte degli utenti. Nonostante sia un libro scritto nel 2001 contiene molti suggerimenti e consigli pratici che ogni web designer dovrebbe conoscere. Consiglio vivamente questa lettura a tutti coloro che stanno affrontando il passaggio dalla grafica cartacea al web design come discorso introduttivo sulla tecnologia web.

Per tutti coloro che sono stanchi di passare tempo tra wiki, forum e motori di ricerca ecco una rassegna dei 18 cheat sheet più utili per chi lavora sul web proposti da webdesignledger in questo articolo.

Per i meno tecnici invece propongo questo altro fantastico listone di cheat sheet per photoshop con tutte le scorciatoie da tastiera e molto di più dalla versione cs4 fino alla 5, pubblicato su allgraphicdesign in questo articolo.

Ed infine per chi non si accontenta mai e non ha limite alcuno nell’approfondire qualunque cosa gli capiti a tiro ecco cheat-sheets.org un sito interamente dedicato alle quick reference con una lista molto lunga e appetibile di risorse.