creazione siti web – Convertire da psd a xhtml

Creazione siti web – Trasformare le tabelle in div
9 agosto 2010
posizionamento siti web – il tag title in joomla
9 agosto 2010
Want create site? Find Free WordPress Themes and plugins.

Come convertire da psd a xhtml?
Questo tutorial, che spero troverete utile,fornisce un ipotesi di lavoro nella creazione di siti web molto diversa dagli standard, ipotesi che può essere recepita solo leggendo l’articolo ed effettuando le prove con gli strumenti segnalati, quindi preferisco invogliarvi subito alla lettura elencando benefici e svantaggi.

Benefici del sistema
I vantaggi dell’uso di questo sistema nel paragone col precedente sono tanti:

  1. Layout organizzati – non più blocchi sparsi qua e là sul video senza una normale sequenza visiva,studi conosciuti hanno infatti individuato focalizzazioni ben precise da parte dell’utente (es. logo – colonna destra – contenuti etc) e da ciò ha tratto vantaggio anche l’industria del web marketing, ma a parte questo lo sviluppo della struttura nella creazione di siti web
  2. Risoluzione a priori della maggior parte dei problemi di rendering dei vari browser, abbiamo infatti a disposizione uno schema compatibile e digeribile da IE6 – IE7 – IE8 – Firefox – Opera – Safari – Google Chrome
  3. Riduzione consistente dei tempi di realizzazione (grafica a parte ovviamente)
  4. Facile adattamento ai CMS
  5. Schemi ottimizzati per il SEO (si parla della base,non dimentichiamo infatti che la parola d’ordine in questo caso è “contenti is king”.
  6. Possibilità strutturali elevate.
  7. Ultimo e forse più importante tra tutti – fornisce soprattutto ai meno esperti un valido supporto iniziale per la carriera di web designer.

Svantaggi

  1. Non è adatto a chi ha fretta di concludere
  2. Capire le effettive potenzialità del sistema non è immediato

Photoshop e Fireworks posseggono strumenti che permettono il ritaglio delle immagini in porzioni e la successiva esportazione direttamente in html,anche se non sono proprio il massimo,sia in termini di facilità d’uso sia nella resa, in ogni caso per un buon numero di anni sono stati strumenti al top in questo settore (eccezion fatta per i designer esperti che hanno sempre preferito una codifica totalmente manuale nella realizzazione di siti internet).
Esiste però un fattore determinante che ha generato il loro declino (anche se solo in questo campo lo ribadiamo), l’EVOLUZIONE logica.
I fattori determinanti che hanno spinto alcuni sviluppatori a cercare soluzioni alternative che fossero in grado di assemblare in un unico contesto grafica, codifica e relative sottocategorie sono stati:

  1. Nascita del web 2.0 – che a mio avviso è da imputare non a tempi recenti, bensì alla comparsa dei primi sistemi di gestione dei contenuti, CMS, che facevano intravedere le prime possibilità di interazione con l’utenza.
  2. Di pari passo con l’evoluzione di internet si è avuta una diversificazione e implementazione dei programmi di fruizione, facendo sorgere nel contempo il tedioso problema della compatibilità cross browser
  3. Crescita della figura del web designer – sempre di più oggi chi realizza grafica per il web si occupa anche di codifica e ottimizzazione SEO
  4. La natura umana………. – tendiamo, giustamente poiché intelligenti, a creare metodologie lavorative tendenti al risparmio delle energie fisiche diminuendo i tempi di produzione.

Si è passati dunque da una fase lavorativa che prevedeva prima la realizzazione grafica ed in seguito la sua trasformazione in un layout adatto alla pubblicazione online ad un inversione totale della tendenza. Oggi preferiamo partire infatti da una base solida (layout in xhtml e css) e su questa costruire la nostra grafica, e questo non vuol dire assolutamente relegare la grafica pura in un ruolo secondario, o realizzare design scadenti e monotoni!
Come iniziare? E soprattutto di che stiamo parlando?
Dei GRID SYSTEM,le griglie di base
Il sistema è composto da una cartella contenente una pagina html collegata ad un foglio di stile e alle immagini e ad un file che a seconda del sistema che decideremo di usare sarà in formato psd o png.le griglie in questione possono essere scaricate da:
http://www.gridsystemgenerator.com/gs02.php
INIZIAMO!
L’idea è quella di realizzare un template minimalista ben strutturato,con pochi elementi grafici,quindi molto ottimizzato anche per il SEO (la velocità di caricamento è elemento da considerare ai fini del gradimento degli spider)

  1. Decidere la risoluzione – ormai la percentuale di utenti che utilizzano monitor con una risoluzione di 800 x 600 px è molto bassa,come risoluzione minima in larghezza utilizziamo 1024px, che in termini utili di visibilità si traduce in 960-970px.
  2. Scarichiamo la nostra griglia e scompattiamola in una cartella di nostra scelta.
  3. Apriamo in Photoshop (o fireworks) un nuovo file con dimensioni 1024px in larghezza e 1000px in altezza (quest’ultima dipende anche dalla destinazione finale del layout,se CMS o meno, e dallla quantità di elementi a sviluppo verticale che prevediamo di inserire) creiamo il primo gruppo di livelli che dovrà essere sempre nella posizione più alta della gerarchia,chiamiamolo “GRIGLIA” e al suo interno importiamo il file png.
  4. Il gruppo può essere reso visibile o meno cliccando sull’icona relativa
  5. Le righe verticali colorate fanno da guida e sono strettamente collegate alla pagina html.
  6. Impostiamo per prima cosa le guide laterali che delimitano la larghezza utile di lavoro, per fissarle esattamente è sufficiente selezionare lo strumento selezione da Photoshop fare clic destro e scegliere load selection,appariranno le linee tratteggiate che circondano l’oggetto,a questo punto è sufficiente trascinare le griglie e posizionarle.
  7. Poi le guide orizzontali in photoshop seguendo uno schema classico con header (altezza 100px),barra di navigazione (altezza 20px) e footer (altezza 50px).
  8. Apriamo il file html della griglia in firefox e utilizzando screengrab, un ottima extension che permette di salvare come file immagine qualsiasi pagina web,importiamo anche questa nel gruppo GRIGLIA in Photoshop (questo ci permetterà di visualizzare tutti i div presenti nella pagina al fine di individuare i contenitori adatti da utilizzare)
  9. prima di impostare l’immagine ho evidenziato con aardwark , i div che intendo utilizzare e precisamente una colonna left con larghezza 160px ed un mainbody di 800px,faccio presente che tutti gli elementi nella pagina hanno un margin settato a 10px.
  10. nascondiamo ora la cartella dei livelli GRIGLIA e cominciamo a disegnare utilizzando le guide impostate,controllando prima che l’opzione “snap to guide” dal menu “view” sia abilitata, in questo modo sarà il programma stesso a delimitare in maniera esatta le zone che intendiamo modificare,sarà sufficiente usare lo strumento di selezione e avvicinarsi alla guida per ottenere una selezione precisa,
  11. Creiamo livelli per ogni parte che componiamo e assegnamo i nomi corretti per una facile individuazione,per questo tutorial dovremo disporre alla fine di 5 livelli escluso il background e la cartella GRIGLIA
  12. Apriamo ora con Pspad il file html della griglia, e con il nostro editor css il foglio di stile associato per individuare le zone che ci interessano ed impostare le relatie proprietà css. Notiamo subito che tutti i div contenitori sono impostati attraverso classi (questo perché lo schema è ripetitivo ed è conveniente lavorare in questo modo) il contenitore principale è il

    lo modifichiamo in

    facendo attenzione anche alla relazione col css che trasformeremo da .main a #main

Impostiamo ora la testata o header anche in questo caso lo convertiamo da classe a id,controllando con aardwark la pagina html notiamo che è il div con classe g960, lo modifichiamo in html da

a

e nel css da .960 a #header per avere una corrispondenza che torna utile. Nel css dovremo invece modificare la classe
<p style="text-align: justify;">.g960 {display: inline;
float: left;
margin-left: 10px;}

che diventerà

#header {display: inline;
float: left;
margin-left: 10px;
height: 100px;
background-color:#f9a533;
width:950px;

nel nostro layout abbiamo anche impostato un footer che ha lo stesso sviluppo in larghezza ma altezza e colore di sfondo diverso,impostiamolo subito copiando quello appena creato e modificando i dati da

 #header {display: inline;
float: left;
margin-left: 10px;
height: 100px;
background-color:#f9a533;
width:950px;}

a #footer{display: inline;
float: left;
margin-left: 10px;
height: 50px;
background-color:#c7330b;
width:950px;} {/code}
14. per controllare apriamo il file html con il browser e verifichiamo che sia corretto
15. ripetiamo le stesse operazioni per impostare la colonna left e il mainbody, dando un altezza per ciascuno dei due elementi di 800px. le proprietà css del mainbody

  #mainbody {display: inline;
float: left;
margin-left: 10px;
background-color: #f6f4f4;
height: 800px;
width:790px;}

e per la colonna

 left #colonna_left{display: inline;
float: left;
margin-left: 10px;
background-color: #e6e4e4;
height: 800px;
width: 150px;}

16. la nostra base è pronta provvediamo solo a ripulirla dai div inutilizzati e controlliamola nuovamente nel browser
conclusioni n. 2
l’evoluzione della specie
il tutorial è alquanto banale,ma vuole solo indurre alla crescita personale e alla verifica.vi invito a fare una prova molto semplice, è sufficiente catturare una schermata con screengrab , di un sito web che è di vs gradimento,importarlo in Photoshop o altro programma di grafica,caricare la griglia e verificare la struttura. Non riuscite a trovare i riferimenti giusti?
I casi sono 2
1. il layout non si può definire ben strutturato (presenta ad esempio una discordanza di allineamento molto comune tra serie di box contenitori,succede molto spesso)
2. se proprio non c’è verso di allineare niente non bisogna dimenticare che le griglie possono essere personalizzate e quindi sarà sufficiente impostare manualmente le dimensioni nel sito segnalato
Creare un design per il web utilizzando le griglie può di sicuro aumentare la vs produttività ed eliminare i problemi di compatibilità con i browser che spesso portano via molto tempo tra hack e fix da impostare, oltre a tutti i vantaggi già elencati.
Di seguito una lista di risorse online per generare le griglie:

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