Posts Tagged ‘CSS’

Meglio destra o sinistra?

martedì, gennaio 5th, 2010

html 300x225 Meglio destra o sinistra?Tranquilli, non parliamo di politica, ma di sidebar, cioè le barre laterali tipiche dei siti web. La domanda è questa: meglio mettere la sidebar a destra o a sinistra?

Forse non c’è una risposta giusta. E’ un antico dilemma del web-design e più o meno tutti quelli che sviluppano siti web o realizzano template hanno la propria opinione sull’argomento. Vediamo di prendere brevemente in considerazione le due opzioni e le relative ragioni.

Prima cosa: leggiamo da sinistra verso destra

Come si può notare anche grazie allo strumento di Google Browser Size, la maggior parte degli utenti si concentra soprattutto sulla parte centrale e su quella sinistra della pagina, un po’ per la risoluzione dello schermo e poi perché è così che leggiamo noi occidentali, da sinistra verso destra. Proprio per questo motivo la sidebar dei blog di solito è a destra, dato che viene data maggiore importanza ai contenuti, ovvero l’ultimo post pubblicato, che viene posizionato a sinistra. Se però nel vostro sito il menù di navigazione contiene molte voci – e il contenuto centrale resta sostanzialmente invariato – allora la sidebar a sinistra avrà più senso. Ma non è sempre così.

Cosa mettere nella sidebar?

web grafica Meglio destra o sinistra?Ecco perché forse non c’è una risposta giusta alla domanda “meglio a destra o a sinistra?”, almeno per quanto riguarda l’argomento sidebar. Ogni sito, infatti, è un caso a sè.

Tutto dipende da cosa decidete di inserire nella sidebar e a quali contenuti date maggiore importanza. Se ad esempio cercate di guadagnare con degli annunci pubblicitari allora sarà sensato posizionarli nella parte alta della sidebar sinistra, là dove siete sicuri che cadrà l’occhio del visitatore appena visualizzerà la pagina.

Nei blog, come abbiamo detto, il contenuto vero e proprio (i post) normalmente è a sinistra – o nella parte centrale – mentre la sidebar è a destra, dove, come prima cosa, sarebbe intelligente mettere il link al feed RSS e altre informazioni che meritano rilievo.

Se invece il vostro è un sito dove il menù di navigazione è particolarmente importante per la consultazione delle pagine in sequenza, allora sarà meglio riservargli la parte superiore della sidebar sinistra, spostando gli altri contenuti in quella destra o nel footer se si tratta di un template con una sola colonna. A volte capita di posizionare la sidebar sulla destra ma poi di doverla spostare a sinistra su richiesta del cliente perché così è abituato. Anche siti importanti come quelli dei grossi giornali hanno spostato solo di recente la sidebar a destra adeguandosi alla struttura grafica tipica dei blog.

E i motori di ricerca cosa ne pensano?

Al momento in realtà non pensano, dunque quando realizzate un template e dovete decidere dove posizionare la sidebar è meglio pensare come prima cosa all’effettiva usabilità del sito. Però è giusto tenere conto che lo spider dei motori di ricerca legge la pagina così com’è presentata nel codice HTML, senza gli effetti dei fogli di stile. Dunque il contenuto sulla sinistra verrà letto prima di quello sulla destra se così presentato nel codice della pagina. Ma proprio grazie ai fogli di stile è possibile realizzare template su misura dove il contenuto sarà in cima alla pagina HTML nonostante sia visualizzato nella sidebar destra.

10 estensioni di Firefox per chi sviluppa siti web

giovedì, dicembre 10th, 2009

logo add ons half 10 estensioni di Firefox per chi sviluppa siti webFirefox è sicuramente uno dei browser più utilizzati dai web-designer e da chi sviluppa siti web, se non addirittura il più utilizzato. Uno dei motivi è sicuramente la possibilità di implementare i componenti aggiuntivi: utili strumenti che rendono Firefox il programma ideale per chi lavora con la grafica, il codice e la struttura dei siti.

Ecco quindi 10 plugin di Firefox consigliati a chi sviluppa siti internet.

arrow 10 estensioni di Firefox per chi sviluppa siti web 1) Firebug

E’ sicuramente l’estensione di Firefox che usiamo di più. Fondamentale per modificare template per siti, questa estensione permette il debug e la modifica di tutti gli elementi della pagina: i fogli di stile, il codice HTML/XHTML, la struttura DOM (Document Object Model) e il codice Javascript. Secondo Firefox circa 2 milioni e 700mila utenti hanno installato Firebug.

arrow 10 estensioni di Firefox per chi sviluppa siti web 2) Web Developer

Ecco un’estensione, che fa tutto o quasi, che è possibile utilizzare anche in coppia con Firebug. Consiste in una toolbar con numerose funzioni – dalla possibilità di disabilitare i fogli di stile o le immagini a quella di validare le pagine – talmente tante che è inutile elencarle tutte.

arrow 10 estensioni di Firefox per chi sviluppa siti web 3) Colorzilla

Semplice ma molto utile, basta puntare il cursore di Colorzilla sull’area della pagina che ci interessa per sapere di che colore si tratta e il relativo codice.

arrow 10 estensioni di Firefox per chi sviluppa siti web 4) MeasureIt

Anche questa estensione di Firefox è tanto semplice e banale quanto fondamentale: un righello che ci indica le misure esatte degli elementi di una pagina web, comprese le distanza tra un elemento e un altro.

arrow 10 estensioni di Firefox per chi sviluppa siti web 5) IE Tab

Grazie a questo popolare e scaricatissimo plugin è possibile, con un semplice clic, visualizzare una pagina così come la vede Internet Explorer, restando però all’interno di Firefox. Se si sta lavorando a un sito utilizzando Firefox e non si vuole aprire Explorer IE Tab è la soluzione ideale. Il plugin permette comunque di visualizzare la pagina anche aprendo Explorer, sempre con un semplice clic.

arrow 10 estensioni di Firefox per chi sviluppa siti web 6) Fireshot

Permette di fare degli screenshot della pagina sulla quale si sta lavorando e di aggiungere note ai singoli elementi. Utile se si lavora in un team o se si deve presentare un’anteprima del lavoro a un cliente.

arrow 10 estensioni di Firefox per chi sviluppa siti web 7) Font Finder

Semplicissima utility: selezionate un testo o parte di esso e Font Finder vi dà tutte le informazioni possibili su quel testo, a partire ovviamente dal font utilizzato.

arrow 10 estensioni di Firefox per chi sviluppa siti web 8) HTML validator

Un validatore di codice interno al browser. L’estensione vi indica gli errori presenti una pagina e suggerisce come correggerli.

arrow 10 estensioni di Firefox per chi sviluppa siti web 9) Window Resizer

Diciamo che siete sicuri che il codice sia valido e che il sito funzioni perfettamente con tutti i browser. Ma avete pensato alla risoluzione dello schermo? Window Resizer è un’estensione di Firefox che consente di ridimensionare la risoluzione del browser per poter visualizzare un sito nelle varie risoluzioni standard.

arrow 10 estensioni di Firefox per chi sviluppa siti web 10) Fire PHP

Come Firebug ma per il PHP: utile plugin dedicato agli sviluppatori per modificare e monitorare il codice PHP delle pagine web.

Un consiglio: dato che alcuni di questi componenti aggiuntivi svolgono in parte le stesse funzioni, basta semplicemente scegliere quelli che si considera più adatti alle proprie esigenze, senza doverli per forza installare tutti. Per altre estensioni dedicate ai web-developer rimandiamo all’apposita pagina del sito di Mozilla Firefox.

Le novità introdotte dai CSS3

giovedì, dicembre 3rd, 2009

pastelli 246x300 Le novità introdotte dai CSS3Nonostante se ne parli da ormai 10 anni i CSS3 non sono ancora diventati uno standard. Le novità introdotte in questi anni dai CSS3 – a partire dalla nuova struttura modulare – sono tante e tutte molto interessanti sia per gli utenti dei siti sia per i web-designer che li realizzano.

Il motivo di questo ritardo secondo alcuni va visto in Internet Explorer. Infatti alcune versioni ancora molto diffuse del popolare browser Microsoft non supportano le specifiche dei CSS3, al contrario di Explorer 9 che, secondo quanto dichiarato da Microsoft, supporterà tali specifiche. (continua…)