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.
Quanto sono ottimizzate le pagine del tuo sito web?
Lavorando su un sito web quanto tempo dedichi all’ottimizzazione? Definisci una fase del progetto dedicata a quest’operazione oppure crei il sito seguendo a priori determinati standard di produzione per garantire un buon risultato?
In entrambi i casi dovresti pensare al fatto che prima o poi dovrai accertarti di tempi di caricamento, peso delle pagine e numero di elementi presenti.
Per fare questo ti occorrono stime certe da poter confrontare con il tuo target di utenti e valutare le possibili soluzioni.
Tag: css, html, seo, web design
20 frameworks per sviluppare temi su Wordpress
Ho già scritto qualche giorno fa un articolo su come scegliere il miglior framework, capita dunque a proposito questa lista di 20 frameworks per sviluppare temi su Wordpress.
Non una semplice lista di risorse ma un articolo completo, con qualche nuova proposta e contenuti pertinenti tra cui un sondaggio sui frameworks più usati, alcuni tutorial sulla creazione di temi sui vari frameworks presentati e un po’ di consigli su come creare il proprio framework perfetto.
Una lettura di sicuro interesse per tutti coloro che usano wordpress.
Tag: wordpress
Wordpress 2.8 finalmente disponibile in versione beta
Non si è fatta attendere la nuova versione del cms più usato dai blogger, ecco dunque che si presenta una prima beta, con numerose migliorie e qualche novità.
Per il momento sono ancora molti i bug presenti e la versione beta ha appunto lo scopo di verificare e risolvere queste problematiche, grazie anche all’aiuto degli utenti.
Per una versione più stabile bisognerà aspettare la fine di maggio, nell’attesa consiglio come lettura il documento fornito da wordpress codex sulle novità presenti in Wordpress 2.8. Se questo non fosse sufficiente, è possibile scaricare la beta dal Development blog di Wordpress.
Tag: wordpress
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
