Tre addon per firefox che miglioreranno il vostro lavoro
Facendo una stima dei programmi più usati durante il lavoro, mi sono reso conto che il passaggio tra browser, editor e programmi di grafica è la principale perdita di tempo e che può essere facilmente ridotta con tre semplici addon per firefox.
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.
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.
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.
Tre ottimi strumenti per velocizzare il lavoro, se ancora non li usate non vi resta che provarli.
Tag: browser, Risorse, web design
44 esempi di layout a larghezza fissa da non perdere
Uno dei primi passi nella realizzazione di un buon sito web è la progettazione del layout. Normalmente questa è influenzata dalla quantità di contenuti di un sito, dal design della pagina e dall’usabilità dei vari elementi presenti.
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 1024×768px con i diversi browser. La misura in realtà è di 968px ma viene arrotondata per comodità. Essendo la risoluzione minima più usata dagli utenti di 1024×768px 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.
5 ottimi links sui css che non puoi perderti
La domenica è un buon giorno da dedicare alla lettura di tutto ciò che ci è passato sotto al naso ma non si è potuto leggere a causa del poco tempo durante la settimana.
Per oggi ti propongo 5 spunti interessanti sui css che penso possano interessarti:
Leggi l’articolo completo
Tag: css, html, Risorse, statistiche
15 consigli su come scegliere il Framework migliore
Si è molto parlato negli ultimi tempi di Frameworks, questo termine legato in origine alla programmazione è ormai diventato di uso comune anche per i web designer che identificano con questa parola le numerose librerie javascript come Jquery o Prototype e i vari progetti di css preformatti secondo una griglia con il quale è possibile semplificare la realizzazione del layout.
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.
Leggi l’articolo completo
40 esempi di Infografica da non perdere
Six Revision ha proposto recentemente 40 infografiche utili e creative come fonte d’ispirazione e spunto per ogni designer. A chi non fosse chiaro il legame tra infografica e web design suggerisco la definizione da wikipedia per comprenderne meglio la stretta parentela:
“L’infografica si occupa principalmente dell’organizzazione e della rappresentazione di dati e informazioni in forma grafica”
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.
Tag: grafica, Risorse, web design
Ultimi articoli
- Internet Explorer come Google Chrome con Google Chrome Frame
- 91 bellissimi esempi di form creativi per ispirarvi
- I migliori links della settimana
- Integrare le API di Youtube con PrettyPhoto
- Come utilizzare qualunque font nelle pagine web con Cufon
- Realizzare slideshow complessi con jquery cycle
- Tre addon per firefox che miglioreranno il vostro lavoro
- Realizzare layout al 100% di altezza con i css
- 44 esempi di layout a larghezza fissa da non perdere
- Realizzare una semplice galleria immagini con jquery
Tag cloud
-
blog
browser
css
eventi
Google
grafica
html
immagini
info
javascript
jquery
professione web designer
Risorse
seo
statistiche
web design
wordpress
youtube
