CREIAMO IL NOSTRO SITO WEB CON UBUNTU.

CREIAMO IL NOSTRO SITO WEB CON UBUNTU


Chissà quante volte abbiamo sognato di avere un sito
Internet tutto nostro.
Tuttavia la maggior parte di noi non sa nemmeno da 
dove cominciare.In effetti il problema non è solo 
come creare le nostre pagine Web,ma anche dove 
metterle su Internet e come aggiornarle.Per esempio,
per poter pubblicare un nostro sito Internet,
dobbiamo decidere se affidarci a un servizio 
gratuito,oppure acquistare un cosidetto "dominio
di primo livello".
Se scegliamo questa seconda opzione,dovremo essere
disposti a pagare alcune decine di euro,ma così
il nostro sito potrà risultare molto più visibile 
e rintracciabile nei motori di ricerca.Fatta questa 
scelta fondamentale,dobbiamo creare il sito vero e
proprio.Dovremo anche imparare a usare gli strumenti
di Ubuntu per inviarlo al server che lo pubblicherà.
A questo punto chiunque potrà collegarsi al nostro 
sito con un qualsiasi programma di navigazione Internet.




IL TEMA DEL SITO




Prima di iniziare a creare il nostro sito,dovremo 
ovviamente decidere di che cosa tratterà.Per esempio
potremmo crearne uno che si occupi principalmente di 
condividere risorse e applicazioni OpenSource,magari 
facendo dei commenti in base alle nostre esperienze 
informatiche.In questo caso,il nostro sito sarà ricco
di immagini delle schermate delle applicazioni e di 
collegamenti alle pagini principali dei loro produttori.
È logicamente importante avere le idee chiare sul tema 
del nostro sito,perché la sua progettazione dipenderà
proprio da esso.Infatti,diversamente da un sito dedicato
alle recensioni dei programmi,se ne volessimo creare uno 
che si occupi per esempio di astronomia dovremmo invece 
pensare a organizzare pagine ricche di tabelle con i 
dati relativi a questo o a quel corpo celeste.




LA PROGETTAZIONE


La prima cosa da fare per dare inizio alla progettazione 
del nostro sito Internet è....spegnere il computer!
No,non è una battuta,ma una necessità.Infatti è 
perfettamente inutile,oltre che ben poco pratico,
cominciare a creare un sito senza averlo prima progettato
su carta,almeno nelle sue linee essenziali.
Diciamo subito che una buona progettazione di base 
ci farà risparmiare un sacco di tempo nel momento
in cui dovremo creare le nostre pagine con il 
programma che abbiamo scelto di usare.Il primo
passo è decidere da quante pagine sarà composto
il sito e quale argomento verrà trattato in 
ogni relativa pagina.Naturalmente questa 
strutturazione sarà soggetta a cambiamenti
nel corso del tempo,a mano,a mano che arriccheremo
il sito con nuovi contenuti e argomenti.
Quindi facciamo in modo di non dargli un'impostazione
troppo rigida,altrimenti dovremo perdere tempo a 
fare cambiamenti radicali ogni volta che aggiungeremo
qualche nuova pagina.




LA PAGINA INIZIALE




Oltre a essere la prima pagina che viene visualizzata 
da un utente che si collega con il nostro sito,è 
anche quella che va organizzata con maggiore attenzione
per non rischiare di renderla scomoda da usare o 
addirittura caotica.Quindi concentriamoci molto sulla 
progettazione,curando sia gli aspetti estetici,sia 
quelli più tecnici.Ricordiamoci che da questa pagina
avremo accesso a tutte le pagine tematiche principali 
del nostro sito,quindi se prevediamo di aggiungere
argomenti nel tempo,cerchiamo di costruire un menu 
pratico da modificare e facilmente leggibile per 
gli utenti.Troppo spesso su Internet ci imbattiamo
in siti scritti in caratteri minuscoli,i cui 
collegamenti si confondono con il testo normale.
Quindi cerchiamo di evitare di fare simili errori.




I COLLEGAMENTI




Un altro aspetto importantissimo di un sito Web sono
i collegamenti tra i suoi elementi e le pagine.
Non temiamo di spendere troppo tempo a curare questo 
punto,perché non c'è niente di più frustante che fare 
clic su un collegamento e vedere che il nostro programma
di navigazione ci avverte che la pagina è inesistente.
Se abbiamo creato collegamenti a pagine che non abbiamo 
ancora costruito del tutto,abbiamo almeno l'accortezza
di mettere una pagina vuota con messaggio in cui potremo
comunicare che su quella stessa pagina ci stiamo ancora 
lavorando.Altra questione importante è la comodità di 
navigazione.Quindi facciamo in modo che da ogni pagina
si possa accedere facilmente ad altre parti del sito o,
per lo meno,che si possa tornare alla pagina iniziale
senza doverne digitare nuovamente l'indirizzo della home
page principale.
Eviteremo così a tutti gli utenti di perdersi e li invoglieremo
a continuare a navigare e ritornare nel nostro sito.




COLLEGHIAMOCI AL SERVER FTP




1)SELEZIONIAMO IL TIPO DI SERVER


Nel menu Risorse selezioniamo Connetti al server.
Nel menu "Tipo di servizio"scegliamo per esempio 
FTP (con login).Scriviamo il nome del server nel 
campo Server e confermiamo con Connetti.


2)COLLEGHIAMOCI AL SERVER


Selezioniamo "Connetti come utente",poi negli 
appositi campi,inseriamo Nome utente e Password.
Selezioniamo una delle tre opzioni relative alla 
password,quindi facciamo clic su Connetti.


3)SPEDIAMO UN FILE AL SERVER FTP


Copiamo un file.Nella finestra del server,apriamo la
cartella in cui vogliamo spedire il file,quindi 
facciamo un clic destro e selezioniamo Incolla.
Abbiamo caricato il nostro primo file sul server 
del sito!




4)COLLEGHIAMOCI AL SERVER TRAMITE TERMINALE


Per certe operazioni potremo aver bisogno di 
collegarci via Terminale.Nel menu Applicazioni 
selezioniamo Accessori e poi Terminale.Scriviamo
ftp seguito dall'indirizzo del server,poi premiamo
INVIO.


5)REGISTRIAMOCI CON NOME UTENTE E PASSWORD


Appare la riga Nome.Qui dobbiamo scrivere il Nome 
Utente e premere INVIO.Poi scriviamo la Password
e premiamo ancora INVIO.Vedremo il cursore 
lampeggiante dopo ftp>


6)SPEDIAMO UN FILE DA TERMINALE


Per provare il terminale,spediamo un file.Usiamo 
il comando put,seguito dal nome del file.Per 
controllare che il file sia stato caricato nel 
server FTP,usiamo il comando dir che mostra tutto 
il contenuto.




INSTALLIAMO KOMPOZER




1)TROVIAMO KOMPOZER NEL SOFTWARE CENTER


Apriamo il menu Applicazioni,poi facciamo clic
su Ubuntu Software Center.Nel campo in alto a 
destra scriviamo Kompozer e premiamo INVIO per 
trovare il programma.


2)INSTALLIAMO KOMPOZER


Facciamo clic sul pulsante Ulteriori informazioni 
per saperne di più.Quindi,nella pagina che si è 
aperta,facciamo clic sul pulsante Installa per 
avviare l'installazione e aspettiamo che finisca.


3)AVVIAMO KOMPOZER PER LA PRIMA VOLTA


Nel menu Applicazioni,selezioniamo Internet e poi 
KompoZer.Nella finestra Tip of the day,togliamo il 
segno di spunta accanto a Show tips at startup 
e facciamo clic su Close.


4)PER ORA È IN INGLESE...MA POSSIAMO TRADURLO!


Colleghiamoci con il sito www.kompozer.net/download.php.
Nella sezione Dictionaries and Language Packs facciamo 
clic su download nella colonna Langpack della riga Italiano.




5)SCARICHIAMO LA LOCALIZZAZIONE


Nella finestra di dialogo che si apre,selezioniamo Salva file 
e confermiamo con Salva file,poi facciamo clic su Salva,assicurandoci
che in Salva nella cartella appaia Scaricati.




6)TRADUCIAMO KOMPOZER IN ITALIANO


Nel menu Tools di KompoZer,selezioniamo Add-ons.Ora 
facciamo clic su Install.Apriamo la cartella Scaricati,
selezioniamo il file salvato,facciamo clic su Install 
Now.Riavviamo KompoZer.




L'INTERFACCIA DI KOMPOZER




L'interfaccia di KompoZer è costruita in modo piuttosto 
classico,quindi ci si orienta facilmente fin dal primo avvio.
Ora vediamo nel dettaglio le parti principali che la 
compongono.




1-BARRA DEI MENU


Qui abbiamo i menu che contengono tutte le varie funzioni di 
KompoZer,File,Modifica,Visualizza,ecc.L'ultimo a destra è 
quello che ci permette di accedere alle guide online,al sito
ufficiale del programma e alle funzioni di aiuto.


2-BARRA DI COMPOSIZIONE


Questi sono i pulsanti con tutte le funzioni più importanti 
di KompoZer.Per esempio c'è quello per salvare il lavoro,
per visualizzare l'anteprima del sito Web e quelli per 
inserire immagini,tabelle e moduli.


3-BARRE DI FORMATTAZIONE


Questa doppia barra mette a disposizione tutti gli strumenti 
necessari per formattare il testo del nostro sito.Qui possiamo
scegliere il tipo di carattere,le sue dimensioni,il posizionamento
nella pagina,eccetera.Inoltre troviamo due pulsanti per creare
elenchi puntati e numerati.


4-BARRA DELLE SCHEDE


Qui vengono visualizzate tutte le schede di composizione
delle nostre pagine Internet.


5-AREA DELLA PAGINA


Quest'area serve per costruire la nostra pagina Web.Qui 
inseriamo i testi e gli elementi che la compongono.In 
pratica è la nostra area di lavoro vera e propria.


6-RIGHELLI


Grazie a questi due righelli possiamo modificare a 
piacere ma in modo sempre preciso le dimensioni 
dell'area di composizione della pagina,sia in 
verticale,sia in orizzontale.


7-GESTIONE SITI


In quest'area vengono visualizzati in modo ordinato tutti
gli elementi che compongono il nostro sito e le sue pagine.
Così possiamo selezionarli velocemente con un semplice 
ma immediato clic.


8-MENU DI VISUALIZZAZIONE


In questo menu possiamo scegliere una delle tre modalità
di visualizzazione disponibili.La Normale è quella che si
usa durante la composizione,l'Anteprima serve per vedere 
come verrà affettivamente visualizzata la pagina in Internet,
mentre la Tag HTML mostra le etichette con le note presenti
nel codice HTML della pagina stessa.


9-SCHEDE DI VISUALIZZAZIONE


La scheda Disegno mostra solo gli elementi grafici e testuali
presenti nella pagina,Sorgente ne visualizza solo il codice 
HTML mentre Spezza mostra entrambi contemporaneamente.




I MENU DI KOMPOZER 




KompoZer ci mette a disposizione 7 menu di gestione più 1
di aiuto.Ora vedremo in dettaglio quali sono le caratteristiche
principali di ognuno di loro per poterli usare senza eventuali 
problemi.




1-FILE


Oltre ai classici comandi di salvataggio e di apertura file,
troviamo anche quelli per pubblicare le nostre pagine Web.
Inoltre ci sono i comandi di esportazione come testo e per 
visualizzare l'anteprima del nostro sito Web.


2-MODIFICA


Qui ci sono i comandi per copiare,tagliare e incollare 
gli elementi delle nostre pagine Web.Abbiamo anche i 
comandi di ricerca e per attivare il controllo ortografico
durante la scrittura del testo.Infine c'è il comando 
Preferenze per personalizzare le opzioni di KompoZer.


3-VISUALIZZA


Da questo menu possiamo agire sulle modalità di visualizzazione
disponibili anche nell'interfaccia grafica.Inoltre ci permette
di personalizzare la visualizzazione delle barre degli strumenti.
Sempre in questo menu abbiamo i comandi per ingrandire o 
rimpicciolire la visualizzazione del testo e per impostare 
la codifica dei caratteri che usiamo abitualmente.


4-INSERISCI


Nel menu Inserisci troviamo tutti i comandi che servono appunto
per inserire nella pagina che stiamo componendo gli elementi 
che ci occorrono,come le immagini,il testo,le tabelle e i 
moduli.Permette anche l'inserimento di codice HTML e PHP.


5-FORMATO


Il menu è suddiviso in 6 parti.Nella prima abbiamo tutti gli 
strumenti per scegliere il tipo di carattere da usare,le sue 
dimensioni,i numerosi tipi di stile,il colore e la direzione
della scrittura.La seconda parte serve invece per rimuovere 
stili e collegamenti.Nella terza possiamo impostare il tipo 
di paragrafo mentre la quarta ci permette di gestire rientri 
e allineamenti.La quinta attiva/disattiva la griglia di 
posizionamento e la sesta ci fa gestire le proprietà avanzate,
i colori e gli sfondi della pagina.


6-TABELLA


Questo menu è completamente dedicato alla composizione e alla 
gestione delle tabelle che vogliamo inserire nelle nostre pagine
Web.Grazie ai suoi comandi possiamo crearne di qualsiasi dimensione,
con la possibilità di agire su ogni singola cella e sulle proprietà
della tabella intera.


7-STRUMENTI


Questo è il menu più tecnico di quelli a nostra disposizione.Da 
qui possiamo aprire la finestra per l'ottimizzazione dei Markup
che si fa velocemente,con un semplice clic.Abbiamo lo strumento
di convalida del codice HTML e l'editor CSS che serve per 
formattare i documenti scritti appunto in HTML.
Sempre in questo menu possiamo gestire le Estensioni di KompoZer
e aprire la console degli errori JavaScript.Il menu ci permette
anche di aprire un editor esterno.




COMINCIAMO A CREARE IL SITO


1)CREIAMO LA CARTELLA DI SALVATAGGIO DEL SITO


In Gestione siti,facciamo clic sul pulsante Modifica siti.
Nella nuova finestra,facciamo clic su Crea cartella,diamole
un nome e poi facciamo clic sul pulsante Apri.


2)IMPOSTIAMO I PARAMETRI DELLA PUBBLICAZIONE


Nella finestra Impostazioni pubblicazione,compiliamo
il campo Nome sito,poi con il pulsante Seleziona cartella
apriamo quella creata,quindi scriviamo l'indirizzo Internet
del sito e facciamo clic su Nuovo sito.


3)SALVIAMO LA PUBBLICAZIONE IN HTML


Facciamo clic su Ok,poi nel menu File selezioniamo Salva 
con nome.Diamo un nome al documento e confermiamo con Ok.
Apriamo la cartella in cui salvarlo e facciamo clic su Salva.


4)AGGIORNIAMO I CONTENUTI DEL NOSTRO LAVORO


Nella colonna Gestione siti,selezioniamo il nome della 
nostra pubblicazione,quindi facciamo clic sul pulsante
a forma di freccia gialla (Aggiorna)per visualizzare i 
nuovi elementi del sito.


5)AGGIUNGIAMO PAGINE VUOTE AL SITO


Nella Barra di composizione,facciamo clic sul pulsante Nuovo,
per esempio per tre volte,per aggiungere pagine vuote al sito.
Poi salviamo come già fatto in precedenza e aggiorniamo gli 
elementi del sito.


6)CREIAMO UNA CARTELLA PER LE IMMAGINI


In Gestione siti facciamo clic sul pulsante Nuova cartella.Nella 
finestra che si apre,diamo un nome alla cartella (es:Immagini)
e facciamo clic su OK.La nuova cartella appare nell'elenco degli 
elementi del sito.




INSERIAMO TESTO E COLLEGAMENTI


1)CREIAMO IL MENU PRINCIPALE


Selezioniamo la prima scheda del nostro sito,poi scriviamo
i titoli delle pagine,separati da un simbolo qualsiasi.A 
questo punto selezioniamo il primo titolo.




2)CREIAMO I COLLEGAMENTI TRA LE PAGINE


Facciamo clic con il pulsante destro sul titolo selezionato,
quindi facciamo poi clic su Crea collegamento.Premiamo il 
pulsante accanto al campo,troviamo il file html della pagina
e confermiamo con Apri e con Ok.


3)CONTROLLIAMO I COLLEGAMENTI FATTI


Ripetiamo l'operazione per ogni titolo del menu.Copiamo
il menu in tutte le pagine del sito,salviamole e facciamo
clic sul pulsante Anteprima per vedere se i collegamenti 
funzionano.


4)CREIAMO UN COLLEGAMENTO A UN SITO ESTERNO


Per inserire un collegamento al sito italiano di Ubuntu,
premiamo INVIO per spostare il cursore in basso,scriviamo 
Ubuntu,selezioniamolo,procediamo come al punto 3 ma nel 
campo contrariamente scriviamo l'indirizzo Web.


5)AGGIUNGIAMO LA POSTA ELETTRONICA AL MENU


Aggiungiamo una voce al menu della prima pagina (es:Contatti).
Selezioniamola e procediamo come al punto 3.Nel campo scriviamo
il nostro indirizzo e-mail e spuntiamo la voce sotto di esso.
Infine salviamo.


6)INSERIAMO IL TITOLO DELLA PAGINA


Spostiamo il cursore dove vogliamo fare apparire il titolo
della pagina.Scriviamolo,poi selezioniamolo e modifichiamone
posizione e dimensioni con i pulsanti della seconda Barra di 
formattazione.




IMMAGINI E RIFINITURE


1)COLORIAMO IL TITOLO E IL SUO SFONDO


Selezioniamo il titolo.Nella seconda Barra di formattazione
facciamo clic su Scegli il colore per il testo e poi su Scegli
il colore per lo sfondo.In entrambi i casi selezioniamo un 
colore e confermiamo con Ok.


2)TROVIAMO UN'IMMAGINE DA INSERIRE


Dopo aver salvato un'immagine nella cartella creata in precedenza,
spostiamo il cursore premendo INVIO.Quindi nel menu Inserisci 
selezioniamo Immagine.Nella nuova finestra troviamola con 
Seleziona file e apriamola.


3)INSERIAMO L'IMMAGINE IN UNA PAGINA


Nella finestra Proprietà immagine vediamo apparire l'anteprima
di quella che inseriremo.Selezioniamo l'opzione Non usare testo 
alternativo,poi facciamo clic su OK per inserirla nella nostra 
pagina.


4)CREIAMO LO SFONDO DI UNA PAGINA


Nel menu Formato,selezioniamo Sfondo e colori pagina.Nella 
nuova finestra,facciamo clic su Seleziona file e cerchiamolo 
nella cartella delle immagini del sito.Confermiamo con OK
e salviamo.


5)OCCHIO ALLE IMMAGINI SU SFONDI COLORATI


Quando usiamo uno sfondo colorato,occhio a caricare immagini 
con sfondo bianco.Per ottenere un effetto migliore cambiamo 
in un programma grafico lo sfondo dell'immagine stessa o usiamo
un PNG trasparente.


6)MODIFICHIAMO I COLORI DEL TESTO DEL SITO


Possiamo anche uniformare i colori dei testi del sito.Sempre
in Sfondo e colori pagina selezioniamo Utilizza colori personalizzati.
Facciamo clic sul pulsante accanto a una voce per selezionare un 
colore.