creazione siti web JOOMLA SEO Parte seconda

Realizzazione siti web – Jsclearbox e ovverride
9 agosto 2010
Posizionamento siti web – Ottimizzare con gli strumenti per i webmaster di google
9 agosto 2010
Want create site? Find Free WordPress Themes and plugins.

Joomlaskin web agency specializzata in creazione siti web, posizionamento siti web, offriamo servizi professionali per il web a costi contenuti

Per quel che riguarda il punto 1 non credo ci sia molto da dire è fondamentale avere già idee solide al riguardo

Punto 2 – le griglie

abbiamo già parlato di questo utile sistema, il concetto espresso da una parte capovolge gli step operativi, dall’altro permette sia una notevole riduzione dei tempi di realizzazione della codifica finale sia la produzione di layout ben incolonnati, cross browser e con fogli di stile leggeri, facciamo un esempio pratico

Il risultato finale che vogliamo ottenere è un template nativo per joomla 1.5 in stile web 2.0 e che sia ottimizzato per i motori di ricerca e lavorando con questi step:

  1. Scelta della struttura di impaginazione
  2. Realizzazione grafica del layout seguendo lo schema
  3. Codifica in xhmtl
  4. Conversione da xhtml a joomla
  5. Caricamento online del template e primi test
  6. Ottimizzazione finale del template
  7. Ottimizzazione del sistema

Tengo innanzitutto a precisare che il template che costruiremo dovrà avere tempi di caricamento molto ristretti,quindi si farà ricorso ad un numero veramente esiguo di immagini, lasciando l’abbellimento al solo utilizzo di colori di sfondo e bordi attraverso i css

La prima operazione riguarda la scelta della struttura di base precompilata dal sito:

http://www.gridsystemgenerator.com/

il layout che voglio generare è un due colonne con larghezza di 970 pixel con testata, barra di navigazione e footer, e con un margine di 20px. Faccio notare che per avere una struttura a due colonne in realtà dovremo impostare nel generatore un numero delle stesse pari a 3, in caso contrario sarà generato un template con le zone divise in due parti uguali.

Generiamo dunque la griglia e scarichiamola, verrà utilizzata in seguito.

Il sito in questione permette di visualizzare online la pagina html relativa alla griglia creata cliccando sul link relativo, a questo punto e con molta semplicità non devo far altro che uno screen e importarlo in Photoshop, avendo così a disposizione una base perfetta su cui lavorare,come da figura

Apriamo in Photoshop un nuovo documento con larghezza 1100 pixel e altezza 1000 pixel e inseriamo in un livello lo screen salvato.

Una piccola considerazione,se notate in figura non sono rappresentate due zone che noi invece richiediamo, testata e barra di navigazione,ma questo non rappresenta un problema poiché in maniera molto semplice in seguito andremo a inserirle manualmente utilizzando le classi css impostate.

Ma torniamo a Photoshop adesso,dopo aver importato lo screen cominciamo a impostare le guide che utilizzeremo per la realizzazione grafica, è sufficiente avvicinarsi al righello laterale o superiore e cliccare e trascinare fino al punto desiderato

Queste sono le guide che seguiremo per ciò che riguarda lo sviluppo verticale della nostra struttura mentre per le parti a sviluppo orizzontale procediamo come segue:

sempre seguendo il righello tracciamo la barra che ospiterà il menù top impostando la prima guida a 74 pixel dall’alto e la seconda a 110px.

Per l’header invece basterà impostare una sola guida a 205 pixel dall’alto, il risultato finale sarà questo (ho colorato lo sfondo di grigio in modo da farvi notare meglio le guide,mentre il livello con la griglia base è stato nascosto):

Bene, ora comincia la parte divertente! Lavoriamo di grafica.

Impostiamo lo sfondo del nostro documento aprendo un nuovo livello che riempiremo con la tonalità #eeeeee, dopodiché creiamo il gruppo livelli che conterrà la zona header (testata – barra navigazione – logo).in questo gruppo creiamo il primo livello “header” e seguendo la guida impostata in precedenza e utilizzando lo strumento di selezione riempiamola con una sfumatura verticale da #dadada a #e5e5e5,cliccando poi due volte sul livello per aprire gli stili di livello impostiamo uno stroke di 1 pixel con colore #cbcbcb in posizione outside come da esempio:

Ottenendo un effetto molto utilizzato nel web design che vi riporto nell’immagine sottostante

Passiamo ora alla costruzione della barra di navigazione.

Il sistema dei menù in Joomla ha delle classi specifiche, ma contrariamente a quanto succedeva nella precedente versione del CMS non siamo necessariamente costretti a seguire il loro schema, tra l’altro sempre ai fini dell’ottimizzazione è molto più redditizio utilizzare le liste, quindi è proprio con questo concetto che costruiremo i nostri menu.

Utilizzeremo una sola immagine di sfondo che costruiamo in questo modo:

creiamo un nuovo gruppo livelli su Photoshop e chiamiamolo “menu_top” , al suo interno inseriamo un nuovo livello e su questo utilizziamo lo strumento selezione impostato su una dimensione fissa di 122 x 36 pixel, che riempiremo con una sfumatura da #454545 a #919191 come da figura:

con il livello ancora selezionato applichiamo uno stile che crei l’effetto 1 pixel sul bordo superiore del nostro bottone,di seguito le impostazioni

inseriamo voci di menu da esempio e in seguito sarà sufficiente duplicare questi livelli ed impostare tutti i bottoni, la costruzione grafica del template dovrebbe portarvi ad un risultato come questo:

inseriamo ora un logo molto semplice (nel file psd allegato a questa guida saranno disponibili tutti i livelli e gli stili utilizzati, da personalizzare a vs gradimento)

continuiamo a costruire la struttura passando a quella che ospiterà due zone modulo di Joomla, USER1 e USER2, anche in questo caso nella codifica faremo il minimo ricorso ad immagini gestendo sfondi e bordo attraverso il foglio di stile.

Impostiamo due nuove guide orizzontali rispettivamente a 110 pixel di distanza e 326 pixel dall’alto e seguendo queste su un nuovo livello tracciamo una selezione che riempiremo con questa sfumatura

All’interno di questo box inseriremo come detto in precedenza due zone,una dedicata ad un menù, una a un contenitore di immagini. Anche in questo caso il menù sarà costituito da una semplice lista abbellita solo da un icona, mentre la zona USER2 conterrà un immagine (in seguito ai primi test riguardanti la velocità di caricamento del template vedremo se sarà possibile inserire al posto di queste due zone un javascript con rotazione di immagini)

Il template è quasi completato,ci resta da creare solo la zona che conterrà il mainbody e la colonna laterale destra, impostiamo dunque le nuove guide orizzontali e creiamo le due zone riempiendole semplicemente di bianco e impostando un bordo di 1 pixel con colore # c4c4c4.Impostiamo anche le guide di riferimento che stabiliscono il padding del mainbody, mentre per il menù laterale sarà sufficiente copiare i livelli con voci e lista creati nella zona USER1 e posizionarli come da figura.

L’immagine mostra anche un altro box creato anche questo come il superiore facendo attenzione a impostare un margine adeguato in alto,le icone twitter e RSS inserite possono essere scaricate ed utilizzate gratuitamente e liberamente a questo indirizzo

http://www.icojoy.com/articles/45/

Ecco l’immagine finale del nostro template. Nel prossimo capitolo di questa guida ci occuperemo della codifica in html della struttura e al successivo step che prevede i primi test di velocità.

Continua………..

Did you find apk for android? You can find new Free Android Games and apps.