ricerca
montagna

Come ti costruisco un Sito Web

Palmiero Corrado

Va da sé che questa mini guida, non vuole ne essere esaustiva, ne definitiva, ma semplicemente un esempio tra mille modi e programmi differenti su come creare un Sito Web.

Parte Prima – La bozza in Photoshop

Al giorno d’oggi costruire un Sito Web è relativamente facile, sul web esistono infinite risorse che ti permettono di implementare un Sito Web anche senza nessuna conoscenza di codice HTML o CSS, anche se poi in realtà non sarà mai completo. Un Sito Web dovrebbe essere veloce nel caricamento della pagina, avere il codice sia HTML che CSS validato dal W3C (World Wide Web Consortium), essere responsive e accessibile a tutti i dispositivi (sistemi vocali per persone non vedenti…).
Esistono poi diverse tipologie di Siti Web, i principali sono: sito web statico (vetrina), sito web dinamico, blog, sito web di commercio elettronico, portale web. Negli ultimi tempi si usano quasi esclusivamente CMS: software gestionali che consentono di aggiornare e modificare i contenuti del sito web in autonomia, senza ulteriori interventi da parte del web designer.
Personalmente io preferisco lavorare con Siti Vetrina, i quali attraverso la semplice struttura che li caratterizza li rende leggeri e quindi molto graditi agli utenti e ai motori di ricerca. In questo esempio vedremo come affiancare un Sito Vetrina a un Sito Dinamico


Attrezzi del Mestiere:

TopStyleTopStyle Lite è un editor di Cascading Style Sheet (CSS), cioè un programma Free che offre una serie di strumenti per scrivere o modificare i fogli di stile. Per chi non lo sapesse, questi ultimi sono dei file di testo scritti con una determinata sintassi, che al giorno d'oggi accompagnano le pagine web e, come suggerisce il nome, si occupano del loro stile. Ad esempio stabilendo il colore con cui devono essere scritti tutti i titoli.


EditPadEditPad Lite è un editor di testo free, utile “Indispensabile” per modificare facilmente qualsiasi tipo di file di testo normale (anche CSS). Dispone di tutte le funzionalità essenziali per la modifica del testo, con supporto completo Unicode, inclusi script complessi e scripts da destra a sinistra. Modifica diretta di file di testo utilizzando codifiche di testo (pagine di codice) di Windows, UNIX e Mac …..


Photoshop Adobe Photoshop CS4 Questo programma è in grado di effettuare ritocchi e compressione di qualità professionale alle immagini, offrendo enormi possibilità creative grazie ai numerosi filtri e strumenti che permettono di emulare le tecniche utilizzate nei laboratori fotografici per il trattamento delle immagini, le tecniche di pittura e di disegno.


Dreamweaver

Adobe Dreamweaver CS4 è un programma per la realizzazione dei Siti Web. E’ utile per la possibilità di configurare “FTPFile Transfer Protocol(protocollo di trasferimento file), quindi di caricare immediatamente i file sul server dove risiede l’host del sito.


Cominciamo

Il primo passo è fare una bozza su come potrebbe essere la Home Page del nostro sito, già immaginando cosa potrebbe volere un cliente, oppure nel nostro caso, quello che voglio io. Apriamo Photoshop ed iniziamo a creare un Layout.

primoliv Il primo passo in Photoshop è ovviamente creare un file nuovo che contenga la miniatura dei livelli successivi, e quindi la nostra bozza.

Il secondo passo dopo aver definito la struttura del file, è creare un secondo livello a cui diamo un colore e una sfumatura pensata per le nostre future pagine Web.

secondoliv
Per ogni componente aggiunto creiamo sempre un nuovo livello, cosicché se dobbiamo fare qualche modifica sappiamo dove mettere le mani.
Quindi terzo livello struttura per logo, quarto livello testo logo.
quartoliv

Nei successivi tre livelli abbiamo impostato la barra del menù insieme ad un’icona che richiama la pagina di ricerca.
Il colore scelto è il medesimo del logo, seppur tuttavia potrebbe cambiare in corso d’opera.
quintoliv

La mia idea è quella di una immagine che copra lo schermo all’apertura del Sito e diverse sezioni sottostanti; quindi al sesto livello scegliamo un’immagine che sia compatibile con i contenuti del Sito.
sestoliv

Con Photoshop abbiamo la possibilità di sovrapporre diverse immagini, sfocarle o renderle più lucide.

Il passo successivo, è la creazione di tre sezioni, dove inseriremo per ogni sezione un’immagine, e nella parte inferiore un link che rimandi alle rispettive pagine.
ottavoliv

Nello spazio rimasto inserirò una sezione di presentazione personale, e nel fondo pagina il footer, cioè la parte dove generalmente ci sono i dati anagrafici dell’azienda.
footer

Bene, la nostra bozza è finita, a grandi linee abbiamo una prospettiva di come potrebbe essere la Home Page del nostro sito. Con Photoshop abbiamo anche la possibilità di rendere vivo il nostro lavoro e di passare al codice HTML, ma io preferisco fare un lavoro separato.
Qui trovate una guida completa e dettagliata su come creare una bozza in Photoshop e trasformarla in HTML
marchettidesign.net - come costruire un sito web da photoshop al codice html5 e css3/



paginaweb



Home Page

Indice

Seconda Parte

Terza Parte

Quarta Parte

Quinta Parte

Sesta Parte