Creazione siti web – tutorial avanzati – la base html

Plugin indicizzazione siti web
9 agosto 2010
Creazione siti in WordPress – tutorial avanzati – un menù personalizzato
9 agosto 2010

la progettazione di un sito web ha fasi ben definite e distinte, è in sostanza un insieme di specializzazioni convergenti in un obbiettivo unico,quali ad esempio: grafica, impaginazione, SEO, usabilità etc.ed è proprio a causa di ciò che la figura del web designer oggi è molto più importante rispetto al passato.

Download della guida in formato pdf e immagine di base del layout
plugin Joomla SEO
Ma è davvero possibile gettare le fondamenta di un nuovo progetto con la sicurezza di rispettare dei parametri importanti come quelli già citati e nel contempo ridurre drasticamente i tempi di realizzazione?
Si e la risposta è nelle griglie di sviluppo.
Una griglia di sviluppo (framework) è formata da almeno due elementi distinti, un elemento grafico ed un elemento di codice. Insieme ci forniscono una struttura completa e versatile, adattabile a situazioni differenti, che rispecchia dei principi minimi di usabilità e soprattutto compatibile con tutti i browser, evitando il ricorso ai fix per internet explorer, e credo che ciò non sia da sottovalutare.
Vediamo come funziona il sistema
Esistono molti framework di sviluppo in giro per la rete, e magari forniremo un elenco più avanti,per il nostro tutorial utilizzeremo una reperibile a questo link:
http://www.gridsystemgenerator.com/
come si può vedere abbiamo la possibilità di impostare larghezza, numero di colonne di suddivisione e margini, e tenendo bene presente che la risoluzione media attuale dei monitor è almeno di 1024px (gli utenti con monitor da 800×600 sono davvero molto rari al giorno d’oggi) impostiamo come da figura, dando anche un margine di 10px.

cliccando sul bottone download ovviamente trasferiremo il pacchetto sul ns computer.
La base è dunque pronta per essere utilizzata!

STEP 1 – IL DESIGN

Come detto in precedenza il framework contiene codice xhtml e struttura grafica, noi cominceremo partendo proprio dal nostro editor di immagini per lo sviluppo del design del progetto.
Apriamo dunque in Photoshop un documento nuovo impostato per comodità a 1000px in larghezza e 1000px in altezza, per facilitare la comprensione ho creato una immagine di base che riporta anche una suddivisione visuale dei div che troverete all’interno della cartella di questa guida,il suo nome è griglia_base.JPG.

credo sia abbastanza intuitivo il funzionamento vero?
Ci troviamo di fronte ad una struttura di impaginazione precompilata certo, ma che ci offre ampi margini di intervento.
Tutto quello che dobbiamo fare è a questo punto, strutturarla impostando le guide in photoshop a seconda delle nostre necessità,facciamo un esempio:
Supponiamo di voler realizzare un design su due colonne con testata e footer,la colonna sinistra dovrà contenere una sidebar di 230px (un menù classico) in larghezza e la colonna destra (contenuti testuali) corrispondente avrà uno sviluppo in larghezza pari a710 px (considerando sempre il margin-left di 10px impostato a priori).
Quindi in photoshop impostiamo le guide corrispondenti come da figura:

Ammetto di aver esagerato un pò……ma è solo per cercare di spiegarmi meglio.
A questo punto il ns design verrà sviluppato proprio seguendo questi riferimenti (guide) impostate nel programma con diversi vantaggi immediati:
1. impaginazione coerente (non blocchi disordinati che rendono anche difficile ad esempio seguire la lettura di testi) e visivamente gradevole
2. la grafica può svilupparsi avendo dei riferimenti ben precisi (sempre di aiuto in situazioni particolari)
3. il layout lato codice…………..è già pronto!
E il terzo punto da solo vale molto ve lo assicuro, soprattutto perchè possiamo essere sicuri al 100% che sarà compatibile con i maggiori browser, è solo necessario procedere ad una pulitura dello stesso,per eliminare div e relative proprità css che non saranno utilizzate

STEP 2 – PULITURA DEL CODICE HTML E CSS

Anche questa fase non è particolarmente complicata, giacchè come mostrato in precedenza i contenitori sono marcati attraverso la loro larghezza in pixel, quindi è sufficiente cancellare tutto il resto.
Siamo partiti con l’idea di sviluppare una layout a due colonne rispettivamente di 230px e 710px, più una testata ed un footer, apriamo dunque il file html:
970_12_10.html con un editor testuale, ad esempio PSPAD, scaricabile a questo indirizzo:
http://www.pspad.com/it/download.php

non riporto per motivi ovvi tutto il listato relativo, basandomi sui nomi delle classi che dovremo mantenere
classe main (è il contenitore principale)
classe g720 (colonna destra o dei contenuti)
classe g240 (sidebar)
classe g960 (testata e footer)

classe clear (molto importante per la stabilità del sistema poiche contiene la proprietà clear: both che fissa i contenitori superiori con proprietà float.
Ecco il risultato sul browser:

Chiaramente si tratta solo di un esempio, una volta compresa questa metodologia di lavoro possiamo giocare su possibilità ampie ma ciò dipende sempre dalla nostra predisposizione ad intraprendere una strada che può rivelarsi, sotto molti aspetti, fruttuosa.

Download della guida in formato pdf e immagine di base del layout

plugin Joomla SEO

Creazione siti web