come realizzare siti internet

Durante la creazione dei vostri siti web potrebbe capitarvi di aver bisogno di un'immagine senza il suo sfondo.

Ci sono tanti metodi, tutto dipende dal risultato che si vuole ottenere, dalla qualità dell'immagine, dal tipo di immagine e da altri fattori.

Questo breve tutorial vorrebbe aiutarvi a "esplorare" qualche sistema. Ovviamente ognuno potrà personalizzare ciò che è scritto in questa pagina.

Lo scopo del tutorial è comunque quello di farvi vedere un maggior numero di comandi che potrebbero esservi di una qualche utilità.

Cominciamo da una cosa semplice.

METODO 1 - UTILIZZARE LA BACCHETTA MAGICA

Procuratevi un'immagine che abbia uno sfondo di colore abbastanza differente dal soggetto principale.

Io ho scelto questa (clicca per ingrandire):

Come potete vedere ho scelto un'immagine "marroncina" e nera (il cagnolino) posta su di uno sfondo totalmente differente azzurro e bianco.

Io utilizzerò il programma di Photoshop CS4 ver. 11.0 ma se utilizzate altri programmi (per esempio GIMP) riuscite ad ottenere la stessa cosa.

Aprite la vostra immagine con il vostro programma di grafica digitale.

Fate una copia del vostro cagnolino su di un altro livello (sempre utile averne una..) e rendete invisibile l'originale.

Create un nuovo livello, coloratelo di un colore sgargiante (nel mio caso ho scelto il rosso) e mettetelo sotto la copia di prima.

Questo livello ci servirà per vedere se abbiamo "scontornato" bene il nostro amichetto a quattro zampe.

Tornate sul livello di copia che per comodità chiamerò "livello cagnolino".

Selezionate la bacchetta magica.

Questo strumento permette di selezionare tutta l'area che ha un determinato colore (quando noi clicchiamo su di un colore viene selezionata l'area che ha quel colore).

Funziona bene su superfici che hanno un colore abbastanza omogeneo, se abbiamo invece troppe variazioni tonali è meglio utilizzare altri strumenti.

Quando seleziono la bacchetta magica mi appare la sua barra delle opzioni subito sotto la barra dei menù.

Ci vuole un po' di pratica per capirla tutta ma per questo esempio consiglio di settarla nel seguente modo:

• Cliccate sulla seconda icona dei quadrati sovrapposti (che significa che continuiamo ad aggiungere delle selezioni). In questo modo se clicchiamo più volte le selezioni si aggiungeranno una all'altra.
• Impostate la tolleranza circa a 20. Questo valore indica che variazione di colore viene selezionata. In questo caso una variazione di +20 e -20.
• Mettete la spunta in anti-alias. Questo serve per rendere meno netto il contorno che si sta selezionando.
• Mettete la spunta in contigui. Questo è importante. se non è selezionata quando cliccheremo sul bianco la bacchetta magica selezionerà non solo la nuvola ma anche il bianco negli occhi del cagnolino. Selezionando contigui invece la bacchetta seleziona solo le aree in prossimità di dove clicchiamo.

Per imparare le potenzialità della bacchetta magica l'unico sistema è la pratica. Provate sulla stessa immagine a selezionare la stessa area impostando in maniera differente le varie opzioni.

Torniamo al nostro cagnolino.

Cliccate su una parte dello sfondo e vedrete che apparirà una selezione.

Continuate a cliccare nelle parti non selezionate dello sfondo e pian piano vedrete che riuscirete a selezionare tutto il cielo.

A questo punto potete direttamente cancellare lo sfondo cliccando sul tasto della vostra tastiera CANC.

Facendolo però vi accorgete subito che rimane un alone azzurro antiestetico attorno al cagnolino.

Proviamo quindi ad utilizzare un altro sistema.

Premete ctrl + z oppure andate su modifica-passo indietro in modo da tornare alla situazione dello sfondo presente e selezionato.

Ora premete ctrl + shift + i oppure andate su selezione - inversa.

Ora avete selezionato il cagnolino e non lo sfondo.

Ora creiamo una maschera cliccando sul pulsante apposito posto in basso nella barra dei livelli.

Vedrete apparire a fianco all'icona del livello una sagoma nera (dove c'era il cielo) e l'immagine ora ha lo sfondo rosso.

Siamo nella stessa situazione di prima, abbiamo ancora l'alone azzurro attorno al cagnolino.

Questa volta però possiamo lavorare sulla maschera per diminuire questo problema.

Clicchiamo con il tasto destro sulla maschera e selezioniamo "aggiungi maschera a selezione". In questo modo il nostro cagnolino ritorna ad essere selezionato.

Andiamo ora sul menù selezione e poi su migliora bordo.

si aprirà una finestra come quella che potete vedere qui sotto:

Giocando un po' sui vari valori (io li ho impostati come potete vedere qui sopra) e con un po' di pratica si può ottenere una selezione molto interessante per noi.

Facendo ora un altra volta ctrl + shift + i per fare nuovamente selezione inversa e passando con un pennello nero sul bordo del nostro cagnolino (facendo attenzione di avere selezionato la maschera), otterremo una cosa come questa qui sotto:

Volendo noi potremmo sostituire lo sfondo rosso con lo sfondo che desideriamo.. Per esempio potrete fare delle cose come queste:

Per renderlo più reale bisognerebbe modificare un po' i colori, le ombre ed aggiungere dei peli ma non è lo scopo di questo piccolo tutorial.

METODO 2 - UTILIZZARE SOLO LA MASCHERA

Il metodo che vi sto per spiegare è più adatto per immagini che hanno uno sfondo non omogeneo oppure con lo sfondo troppo uguale al soggetto stesso.

Scegliete un'immagine adatta a questo (soggetto dellos tesso colore dello sfondo o sfondo non omogeneo).

Io ho scelto questo cucciolo (clicca sull'immagine per ingrandirla):

Aprite l'immagine con il programma di grafica digitale, fate un livello di copia in modo da tenere da parte l'originale e lavorare su questo.

Sotto il livello di copia creare un livello interamente riempito di un colore sgargiante, io sceglierò il verde.

D'ora in poi (salvo altre indicazioni) lavoreremo sul livello di copia quindi spegnete quello originale.

Sul livello di copia create una maschera con l'apposito pulsante (vedi sopra).

Ora facendo attenzione di avere la maschera selezionata, colorate di nero tutte le zone dello sfondo che non vi interessano (utilizzate un pennello per esempio).

Pian piano vedrete trasparire il colore del vostro livello sotto (nel mio caso verde).

Se sbagliate vi basterà colorare di bianco la parte che volete vedere e magicamente vi riapparirà.

Se volete un consiglio inizialmente "sbozzate" il tutto utilizzando un pennello di grandi dimensioni e avendo l'immagine a tutto schermo. Successivamente prendete un pennello più piccolo e zoomate sulla zona da sistemare.

Dovrete ottenere una cosa di questo tipo:

Tenete conto che l'immagine scelta da me è relativamente semplice da scontornare, ma ce ne saranno alcune molto ma molto più complesse.

Ora procediamo come fatto precedentemente per migliorare il bordo.

Aggiungiamo la maschera alla selezione ed utilizziamo lo strumento migliora bordo e questa volta lo ingrandiamo pun po' invece di ridurlo.

Io ho usato le seguenti impostazioni, ma voi le dovrete variare in base all'immagine che state trattando:

Ora Passando con il pennello bianco attorno al cucciolo (tenendo la maschera selezionata) potrete migliorare di un po' i contorni Ottenendo una cosa come questa:

Ora non ci resta altro che spostare il nostro amico a quattro zampe in un altro posto come per esempio in mezzo a un prato.

Ora sta a voi provare e riprovare. L'unico sistema per migliorare è sperimentare.

Questo piccolo tutorial vi vuole spiegare una sequenza da eseguire per ottenere un effetto nevicata. Si danno per scontate le basi del Photoshop.

Ovviamente non è l'unico modo e probabilmente ce ne sono anche di migliori, se volete potete segnalarne anche voi inviando una mail.

Per gli esempi viene utilizzato Photoshop CS4 nella versione 11.0.

L'immagine di partenza che sceglierete dovrebbe essere un paesaggio innevato, non scegliete immagini troppo soleggiate, a lavoro concluso probabilmente risulterebbero finte.

L'immagine scelta da me è questa:

La prima cosa da fare è scurire un po' il cielo altrimenti risulta innaturale per una nevicata.

Faccio una copia della foto e la chiamo cielo. In questo modo ho da parte una copia dell'originale.

Seleziono la parte del cielo con la bacchetta magica opportunamente calibrata (voi utilizzate il metodo che più preferite) e creo una maschera che mi faccia vedere solo questa parte selezionata.

Creo una "regolazione livelli" che sia associata SOLO al livello cielo. (cliccare sull'apposito pulsante posto in basso che indica due cerchi con la parte in comune annerita).

Sposto il segnalino che era sul bianco verso sinistra in modo che il cielo si scurisca. Ogni foto è a se quindi ci vuole un po' di occhio per decidere di quanto modificare i livelli.

Quello che ottengo nel mio caso è questo:

Si possono notare delle parti che rimangono troppo chiare e danno un senso di "finto". (Per esempio fra le fronde degli alberi, la montagna piena di alberi sullo sfondo..)

Per sistemare questo problemino basta selezionare la maschera del livello "cielo" e utilizzando un pennello con colore bianco ma con poca opacità, passare su queste zone che diverranno quindi più scure.

Fare più passaggi fino a quando non ottenete un effetto più reale possibile.

Il mio risultato è questo:

La differenza vi sembra poca ma aiuta a dare un'impressione di "realismo".

Ora che abbiamo preparato lo sfondo dobbiamo pensare a creare la nevicata vera e propria.

Dopo aver fatto un nuovo livello ho creato un pennello apposito.

Ho selezionato un pennello tondo normale e poi modificando le impostazioni e regolazioni ho creato un pennello che in modo casuale cambia leggermente sfumatura, dimensione e posizione al passaggio.

Per questa parte ci vuole un po' di pratica e conoscenza di ogni possibile opzione (forma punta del pennello, dinamica forme, dispersione, dinamica colori, disturbo, bordi bagnati ecc). Vi consiglio di provare su di un altro file tutte le varie opzioni in modo da poterle sfruttare al meglio.

Dopo aver creato il pennello lo riduco a 1 px, utilizzo un colore bianco in primo piano e grigio di sfondo.

Lo passo in senso diagonale dall'alto a destra fino basso a sinistra. In modo casuale e senza riempire troppo l'immagine.

Cerco di riempire più la parte alta che la parte bassa.

Sfoco questo livello (utilizzando filtro - sfocatura - controllo sfocatura) e successivamente do anche un effetto movimento (utilizzando filtro - sfocatura - effetto movimento).

Come vedete qui sopra ho scelto di fare una sfocatura che va dall'alto a destra al basso a sinistra. Questo sarà il senso della mia nevicata.

Creo un altro livello, aumento il pennello di qualche pixel (per esempio 4 px) e faccio gli stessi passaggi.

Io ho fatto questi passaggi per 5 volte, cambiando la dimensione del pennello: 1px, 4px, 7px, 12px, 22px.

Più il pennello è grande e più dovete essere parsimoniosi con le pennellate e cercate di non coprire troppo lo sfondo.

Io ottengo una cosa come questa:

Ci sono ancora delle cose che non mi convincono come per esempio il fatto che ho troppi fiocchi di neve davanti agli alberi in primo piano.

Per eliminarne un po' creo delle maschere per ogni livello della neve dove elimino dei fiocchi da questa zona (in basso a sinistra) specialmente elimino i fiocchi che hanno le dimensioni più piccole (che quindi saranno più lontani) lasciando quelli più grandi.

Questo è ciò che riesco ad ottenere. Cosa ne pensate?
Assomiglia almeno un po' ad una nevicata?

E' giunto il momento di realizzare il nostro primo file HTML.

Prima però volevo solo spiegare a grandi linee come funzionano i siti internet. Ecco i principali passaggi (semplificati al massimo).

• Un utente apre il suo browser (il programma per visualizzare i siti internet)
• L'utente digita un indirizzo nella barra degli indirizzi (per esempio www.abcwebegrafica.altervista.org)
• Il browser "chiama" questo indirizzo fino a che trova il server dove è salvato il sito
• Il sito è in formato HTML, il quale viene interpretato dal browser
• Il sito viene visualizzato dall'utente tramite il browser.

Molti inorridirebbero da questa spiegazione da quanto è imprecisa ma era solo per far capire che ha tantissima importanza il browser.

I browser riescono a visualizzare solamente alcuni tipi di file. Fra questi vi sono le immagini web (JPG, GIF, PNG) e l'HTML.

E' per questo motivo che i siti vengono realizzati utilizzando questo linguaggio.

L'HTML sono delle scritte che vengono poi interpretate dal broswer che mostra il risultato "tradotto".

Ora passiamo alle cose pratiche che vi renderanno il tutto molto più chiaro.

Prima di cominciare verificate che sul vostro PC siano visibili tutte le estensioni dei file. (Se non le visualizzate andate su impostazioni, pannello di controllo, opzioni cartella e nella sezione visualizzazione dovete togliere la spunta da "Nascondi le estensioni per i tipi di file conosciuti". Chiudete tutto, se avete fatto questi passaggi correttamente ora dovreste vedere le estensioni dei file.)

Create una cartella in una posizione che per voi sia facile da raggiungere. Per esempio sul Desktop. Io la chiamerò "sito" ma non è importante il nome che le date.

Aprite il vostro editor di testi (io utilizzerò blocco note).

Scrivete le seguenti cose (poi verranno spiegate in dettaglio). Consiglio di scriverle e di non copiare e incollare in modo che vi entrino in testa.

‹ html ›
    ‹ head ›
    ‹ /head ›

    ‹ body ›
    ‹ /body ›
‹ /html ›

Otterrete una cosa come in questo esempio (si apre in un altra finestra).

Soffermiamoci un attimo su quello che abbiamo appena fatto.

Le cose che abbiamo scritto (cioè ‹ html › ‹ head › ‹ body › ) si chiamano TAG.

Ogni tag ha il suo preciso significato.

• ‹ html › : indica che stiamo scrivendo un file html
• ‹ head › : indica una parte dell'html dove andranno inseriti dei "parametri" utili ma non visibili all'utente
• ‹ body › : indica la parte vera e propria in cui inseriremo le cose che dovrà vedere l'utente.

Ne esistono moltissimi altri che vedremo un po' alla volta.

In generale (esistono delle eccezioni) ogni tag ha anche la sua chiusura. I tag si chiudono riscrivendo lo stesso tag e poi aggiungendo una barra appena prima del nome (per esempio ‹ /body ›).

Con un po' di pratica potrete presto capire che il tag ‹ html › contiene i tag ‹ head › e ‹ body › in quanto la sua chiusura è dopo head e body.

E' molto importante mantenere i rientri come li ho segnati io. Li potete fare comodamente utilizzando il tasto tab. Servono per mantenere ordine (ora sono solamente poche righe di codice, ma quando sarà una pagina intera sarebbe impensabile metterci mano senza le tabulazioni)

Salvate il file nella cartella creata prima con il nome index e l'estensione html.

Questo è un passaggio fondamentale, il vostro file dovrà avere l'estensione html e NON txt.

Ora vedrete che l'icona del file appena creato sarà quella del vostro browser predefinito.

Se ci cliccate sopra due volte vi si aprirà il browser e vedrete solo una pagina bianca.

Vi parrà strano ma avete appena creato il vostro primo file html. E' ancora vuoto e per questo rimediamo fra un attimo.

Forse ora sembra tutto nebuloso ma andando avanti diverrà più chiaro.

Inseriamo ora all'interno del body (cioè fra ‹ body › e ‹ /body ›) una frase qualsiasi.

Ecco un esempio (si apre in un altra finestra).

Salvate e ora cliccate di nuovo sull'icona di index.html.

Vi si aprirà il browser e potrete leggere ciò che avete appena scritto in alto a sinistra. Vedi esempio (si apre in un altra finestra).

Questa parte termina qui.

Nella prossima verranno spiegati dei nuovi tag.

Vai alla parte 4 - Tag h1, h2, h3, h4, h5, h6

Dopo aver riguardato (e modificato se necessario) ciò che si è fatto durante la parte 01 del corso, è ora di tirare fuori la parte artistica che è in noi.

Prendete un foglio e delle matite colorate e cominciate a schizzare la composizione della pagina del vostro futuro sito.

Non vi dovete preoccupare troppo dei colori e delle forme ma la cosa più importante al momento è la posizione di ogni cosa che volete inserire.

Per la parte grafica dei siti non esistono delle norme vere e proprie da rispettare ma vi sono delle regole dettate dal buon senso.

Qui di seguito vi segno i passaggi principali da affrontare e dei consigli per una corretta composizione. (Sono passaggi e consigli personali, qualcuno potrebbe non pensarla allo stesso modo)

• Studiate una grafica semplice e schematica. La grafica deve essere omogenea in tutte le parti del sito oppure navigando all'interno dello stesso l'utente crederà di cambiare portale quando non è così.
• Partite dalla Home Page che di solito è la più difficile.
• Nella parte alta del sito dovrebbe andare l'header, una striscia orizzontale che solitamente è ripetuta sempre uguale in tutte le pagine del sito. E' molto sconsigliato modificarla di pagina in pagina
• All'interno dell'header andrà inserito il logo del sito (meglio se a sinistra), il nome del sito e in alcuni casi anche il motto
• Il menù di navigazione di solito è posto in due posizioni (ma va scelta una delle due, non entrambe):
  • ORIZZONTALE: subito sotto l'header. Questa tipologia spesso è associata al "menù a tendina". Per il vostro primo sito è sconsigliata in quanto non verrà spiegata nelle lezioni future.
  • VERTICALE: una colonna posta di solito a sinistra. Per semplicità di realizzazione consiglio di utilizzare questa tipologia per il vostro primo sito, in quanto è quella che verrà spiegata nelle future lezioni. Questa tipologia è leggermente più semplice da realizzare e solitamente più flessibile in quanto teoricamente si può "allungare" all'infinito.
• Il menù di navigazione principale dovrà essere ripetuto uguale in ogni pagina in modo da creare omogeneità nel sito e anche in modo da permettere agli utenti un orientamento
• In basso sotto tutti i contenuti di solito è presente il così detto footer. Si tratta di una striscia orizzontale in fondo alla pagina che contiene il link al Copyright e ad altre informazioni importanti.
• Potete scegliere se volete creare una colonna anche a destra (in questo caso dovrete anche avere in mente il suo eventuale utilizzo, per esempio: link utili, pubblicità, news, argomenti correlati...)
• La parte centrale del sito comprende i contenuti.

Qui sopra uno schema delle parti principali presenti in una pagina web.

Questi erano consigli che vanno più o meno bene in ogni occasione. Di seguito quelli per relativi al nostro piccolo "progettino".

• Per questo vostro primo sito evitate cose troppo "artistiche" e strampalate, cercate la semplicità.
• Consiglio colori tenui per gli sfondi e colori decisi per le scritte
• Per il momento evitate sfumature e figure tondeggianti, cercate di creare una grafica schematica, creata da rettangoli dentro altri rettangoli che si distinguono solo per il loro colore

Fate più schizzi di prova. Servono solo per avere un'idea di partenza.

Vi dico fin da ora che probabilmente non sarete in grado di realizzare il sito come ve lo state immaginando perché ci vuole un po' di esperienza per creare ciò che si vuole ma non vi preoccupate, l'importante per ora sono i concetti.

Per la prossima parte è necessario che voi abbiate installato sul vostro PC un elaboratore di testi. Il più comodo da utilizzare sarà il semplice blocco note e le spiegazioni faranno riferimento proprio a questo.

Vi servirà anche un browser (cosa che ovviamente già avete altrimenti non stareste leggendo questa pagina). Un browser è il programma che vi occorre per visualizzare un sito internet. In questo momento state leggendo queste parole utilizzando IE Explorer, Modzilla Firefox, Opera o qualcos'altro di similare.

Io sono particolarmente portata ad utilizzare Modzilla Firefox (gratuito e scaricabile da qui) perché "lavora" meglio ma anche gli altri vanno bene.

Vai alla parte 3 - Primo HTML di esempio

Questo articolo è il primo di una serie e parlerà di come organizzarsi e di cosa occorre prima di cominciare a realizzare materialmente un sito web. L'idea è creare un sito passo per passo facendo vedere i vari passaggi con tutte le spiegazioni del caso ed esempi che potrebbero essere utili per capire meglio l'argomento trattato.

Se possibile non verrà spiegata troppa teoria ma si passerà fin da subito alla pratica.

Alcune cose nel corso del tempo potranno essere aggiornate, modificate o cancellate perché il web è un mondo in continuo mutamento e, ovviamente, è anche possibile sbagliarsi su qualche cosa.

PREREQUISITI e MATERIALE per questa parte:

• saper leggere e scrivere
• avere un minimo di conoscenza base del computer
• passione e voglia di imparare seriamente
• curiosità e creatività
• foglio e penna

Se state leggendo vuol dire che siete intenzionati a creare voi stessi un sito web o comunque che vi incuriosisce questo argomento.

I primi articoli saranno di sicuro per principianti quindi verranno dette delle cose che per altri potrebbero sembrare ovvie. Nessuno pensi che leggendo qui diverrà mago dell'HTML o chissà che altro. Per prendere confidenza con i siti web ci vuole passione, esperienza ma sopratutto una montagna di pratica. Queste cose nessuno ve le può regalare.

Ma ora basta ciancie e cominciamo.

Da dove si parte? Dall'organizzazione generale.

Bisogna avere ben chiaro in testa di che cosa si ha bisogno e di che cosa si vuole creare.

La prima risposta è semplice, gli unici "strumenti" di cui si ha bisogno nella primissima fase di realizzazione di un sito sono dei semplici fogli ed una penna.

Non esiste metodo migliore del creare degli schemi per chiarirsi le idee.

Dovrete avere ben chiaro in testa le risposte alle seguenti domande prima di poter continuare la nostra avventura:

• Quale sarà l'argomento principale del mio sito?
• Quante e quali parti lo compongono ? Quale sarà il loro contenuto?
• Che tipo di categoria di persone vorrei attrarre (il così detto target)?

E' strettamente consigliato scegliere un argomento di vostro interesse, una passione, un hobby, qualche cosa di cui non vi stufiate a parlare. Potete anche solo inventarvi l'argomento ma facendo ciò vi mancherà il materiale per fare alcune fasi future.

Per i primi passi cercate di creare qualche cosa di più sempliciotto (sito della squadra del cuore, sito del cantante preferito, sito di cucina, periodo storico, fotografia...).

Per avere un'idea di cosa inserire nel sito visitate i portali dedicati allo stesso argomento per prendere spunti ed idee (non per copiare!!!). Questa fase di ricerca è molto importante.

Per mostrarvi degli esempi concreti verrà creato passo per passo un sito che conterrà delle recensioni di siti/libri/articoli riguardanti il mondo del web.

Tornando a noi.. sul vostro foglio dovreste avere una cosa simile a questa:

Il mio sito:

• argomento: raccolta di recensioni riguardanti il mondo del web. Recensioni di libri/articoli/siti.
• componenti sito:
  • Home page:
    • veloce descrizione del sito
    • ultime recensioni inserite
    • Feed RSS di altri siti
  • Siti:
    • suddivisione per categorie (per esempio: siti utili, novità, informazione ecc) e quindi su pagine differenti
    • ogni recensione di ogni sito avrà la sua pagina web con collegamenti ad altre dello stesso genere.
  • Libri:
    • suddivisione per categorie (per esempio: manuali, storie di personaggi della rete, novità, ecc) e quindi su pagine differenti
    • ogni recensione di ogni libro avrà la sua pagina web con collegamenti ad altre dello stesso genere.
  • Articoli:
    • suddivisione per categorie (per esempio: manuali, storie di personaggi della rete, novità, ecc) e quindi su pagine differenti
    • ogni recensione di ogni articolo avrà la sua pagina web con collegamenti ad altre dello stesso genere.
  • Forum:
    • Molto utile per interagire con chi visita il sito
    • Da inserire una sezione per eventuali segnalazioni di argomenti da inserire nel sito
• Tipo di utenza: persone interessate a siti web e alla rete internet.

In questo momento queste mi paiono le cose principali da stabilire per creare il mio sito. Probabilmente rileggendo queste cose fra qualche ora o giorno verranno nuove idee. Se ciò accadesse mi prenderò la libertà di apportare modifiche.

Sarà lo stesso per voi, non abbiate fretta di stabilire immediatamente ed esattamente di che cosa volete trattare e come, prendetevi il vostro tempo. Un sito va ragionato.

Il prossimo passo è quello di creare uno schema visuale, non scritto. Il classico diagramma di flusso. Mettete ogni pagina che dovrà essere creata in un riquadro e collegate fra di loro le varie "pagine" con delle freccie.

A fare bene per cominciare il vostro sito dovrebbe contenere massimo una decina di pagine. Se vi sentite di arrischiarvi superate pure questo numero.

Una volta creato il diagramma di flusso dovrebbero esservi abbastanza chiare le voci ed i sottomenù che andranno a formare il vostro futuro menù di navigazione.

Fate un elenco per averlo più chiaro. Nel mio caso il menù principale che sarà presente in tutte le pagine è il seguente:

• Home Page
• Recensioni:
  • Siti
  • Libri
  • Articoli
• Forum
• Chi sono

Questa fase è terminata.

Se volete un consiglio ora lasciate passare almeno un paio di ore se non un giorno intero e poi rileggete quello che avete creato. Apportate le modifiche che vi potrebbero venire in mente e poi passate alla parte successiva.

Per la prossima parte vi occorrerà nuovamente un foglio bianco, una penna e possibilmente delle matite colorate.

Vai alla parte 2 - Composizione della pagina

=> In questo articolo si farà riferimento a dei CSS esterni all'HTML.

!!! articolo ancora da completare !!!

Oltre al float esiste un altro sistema per posizionare gli oggetti utilizzando i fogli di stile: POSITION.

°°°POSITION°°° Utilizzando la qualità position possiamo posizionare gli oggetti in qualunque punto della pagina.

Ci sono 5 possibili attributi per questa proprietà:

• relative: l'oggetto sta nella posizione in cui dovrebbe stare "naturalmente" ma se aggiungiamo top, bottom, left oppure right l'oggetto si sposterà da quella posizione della misura indicata.
• absolute: dando dei valori a top e/o bottom e/o left e/o right l'oggetto si posizionerà a tot distanza dal suo contenitore esterno, indipendentemente dalla sua posizione "naturale".
• fixed: Se vengono dati dei valori a top e/o bottom e/o left e/o right l'oggetto viene posizionato in base alla finestra che visualizziamo, non in base al contenuto.
• inherit: l'oggetto eredita la qualità position dal suo contenitore.
• static:

Qui sotto viene proposto qualche esempio di sintassi.

La classe .alto_dx verrà posizionata in alto a destra utilizzando un position di tipo assoluto.

La classe .venti_px_più_in_basso verrà posizionata 20 pixel più in basso rispetto alla sua posizione "naturale" utilizzando un position di tipo relative.

Ecco alcuni esempi pratici riguardanti il position:absolute; (si apre in altra finestra)

Qui invece trovate quelli relativi al position:relative; (link non ancora attivo)

E qui quelli riguardanti il position:fixed; (link non ancora attivo)

I tre attributi visti qui sopra sono i più utilizzati.

Va ricordato che se si vuole che un oggetto abbia una determinata posizione il contenitore che lo contiene dovrà avere la position assegnata, non importa quale, se così non fosse potrebbero verificarsi dei problemi di visualizzazione.

Se non volete che il contenitore si sposti dalla posizione in cui è basta che assegnate position:relative; senza assegnare altri valori a top, bottom, left o right e il contenitore rimarrà nella sua posizione naturale.

=> In questo articolo si farà riferimento a dei CSS esterni all'HTML.

Quando si comincia a mettere le mani in pasta nell'HTML e nel CSS ci si imbatte certamente nel posizionamento degli oggetti nella pagina.

Vi sono due principali sistemi per ottenerlo: l'utilizzo del "float" e quello del "position".

In questo articolo tratterò solo della qualità float.

°°° FLOAT °°°
Il float si utilizza per posizionare un oggetto a destra oppure a sinistra del resto del documento. Se "flottiamo" un oggetto tutto il resto del contenuto gli "girerà" attorno.

Qui sotto viene vista la sintassi del CSS per un ipotetica classe .sinistra . L'oggetto che prende questa proprietà verrà visualizzato come in questo esempio (si apre in altra pagina).

Ecco tutti i possibili attributi di float:

• left: posiziona l'oggetto a sinistra rispetto al resto del contenuto della pagina esempio (si apre in altra pagina)
• right: posiziona l'oggetto a destra rispetto al resto del contenuto della pagina esempio (si apre in altra pagina)
• inherit: eredita il float del padre (in pratica eredita questa proprietà dal "contenitore" esterno). Se il padre è flottato a sinistra anche il figlio se ha float:inherit flotterà a sinistra.
• none: nessun tipo di float.

I float vengono utilizzati moltissimo con le immagini all'interno del testo. Con i dovuti accorgimenti infatti (un po' di margine attorno all'immagine per esempio) si ottengono delle cose gradevoli e semplici da realizzare.

Il sistema del float (associato alla proprietà margin) spesso viene utilizzato anche per creare i menù laterali oppure i layout su più colonne.

Questo ultimo caso viene realizzato creando un menù verticale che viene "flottato" (per esempio a sinistra) e alla colonna del contenuto viene associato un margine sufficientemente grande da non "circondare" il menù. Questo esempio renderà il tutto più chiaro (si apre in altra pagina).

Utilizzando il float potrebbero venire a formarsi alcuni sgradevoli inconvenienti dovuti al fatto che il float non viene "visto" dagli elementi in cui è contenuto.

Per ovviare a questo problema si ricorre al clear che viene utilizzato per "stoppare" il float. (questo argomento verrà trattato in altro momento)

Le tipologie di immagini supportate dal web sono sostanzialmente 3: JPG, GIF e PNG che a loro volta si possono suddividere in varie tipologie. Ho creato questo piccolo articolo al solo scopo di confrontarle fra di loro.

°°°JPG°°°
Le JPG supportano una grande gamma cromatica ed è particolarmente adatta per visualizzare fotografie o grafiche con molte variazioni cromatiche. Solitamente è più pesante delle altre tipologie di immagini e non supporta nè l'animazione nè la trasparenza. Come si può vedere qui a destra lo sfondo infatti non è trasparente ma bianco. Le JPG sono sempre dei rettangoli.

°°°GIF "normale"°°°
Le immagini GIF sono state create appositamente per il web e in linea generale sono meno pesanti delle jpg. Questa tipologia ha una minor scala cromatica rispetto alle jpg ma supporta la trasparenza. Ha infatti un solo bit per la trasparenza e per tanto non ha "gradazioni" di trasparente al contrario delle png24. Come si può vedere dall'immagine qui a sinistra il non avere gradazioni di trasparenza puà creare antiestetici aloni attorno all'immagine (non si ha con le png24 ma con le png8 si). Può inoltre supportare animazioni (vedi gif animate).

°°°GIF animata°°°
Le GIF animate, come si può vedere dall'esempio qui a sinistra, hanno la possibilità di supportare animazioni. Si possono creare con programmi appositi e non con i più classici programmi di grafica base. Supportano la trasparenza ma non ha gradazioni di trasparenza per tanto un pixel o è visibile o non lo è. Spesso le GIF animate vengono utilizzate per creare banner.

°°°PNG8°°°
Le PNG8 sono una tipologia di PNG. Supportano la trasparenza ma senza gradazioni come le gif. Come si può vedere dall'esempio qui a sinistra può quindi capitare che si venga a creare un antiestetico alone attorno all'immagine. Non supporta le animazioni.

°°°PNG24°°°
Le PNG24 sono una tipologia di PNG. Hanno a disposizione ben 24 byte per gestire la trasparenza e questo determina varie gradazioni di questo tipo. Come si può vedere dall'immagine qui a sinistra in questo modo l'immagine si fonde bene con lo sfondo e non vengono creati antiestetici aloni. Questo comporta però un maggior peso dell'immagine.

°°°PNG animate°°°
E' da poco tempo che sono in circolazione le PNG animate. Sono supportate solamente da alcuni browser (IE ancora le visualizza come immagini statiche) e non sono tanti gli elaboratori di immagini che permettono di realizzarle. E' per questi motivi che ancora non sono molto diffuse. La trasparenza è supportata ma ha solamente 1 grado di trasparenza. Non appare però l'alone bianco attorno all'immagine perché viene riempito con i colori dell'immagine stessa. Nell'esempio qui a sinistra potete infatti vedere che la parte rossa è molto più estesa. Se visualizzate un'immagine non animata state usando un browser che non la supporta. Se utilizzate Modzilla Firefox oppure Opera non dovreste avere questo problema.