caad_2002 tutorial

Tutorial - costruzione pagine web

Prima di cominciare ad illustrare gli strumenti basilari per creare pagine web, apriamo un browser (programma per "navigare" in Internet) ed analizziamo alcune informazioni che riguardano l'indirizzamento.

I programmi che usiamo abbitualmente come Netscape o Explorer hanno il compito principale di cercare ed aprire determinati file, che a loro volta contengono informazioni affidate a diversi media.

L'indirizzo o URL (Uniform Resource Locator) che digitiamo è composto da una parte iniziale che indica il tipo di potocollo da utilizzare per metterci in comunicazione con il server remoto, che in genere è HTTP (HyperText Transfer Protocol), dall'indirizzo del web server che in genere è WWW (World Wide Web) ma che può anche essere w3, home, members ecc., e dall'indirizzo vero e proprio che termina con l'indicazione del tipo di dominio .com .net .org ecc.o della nazione di appartenenza .it .es .de .fr ecc.

Quando digitiamo un indirizzo web nel browser il nostro provider fa una risoluzione dello stesso in un indirizzo IP (Internet Protocol) statico, cioè traduce quel testo in un numero che rappresenta il vero indirizzo di una determinata pagina nel web in quanto rappresenta il nodo all'interno della rete.

Nel momento in cui il browser punta una pagina automaticamente cerca un file che rappresenta la pagina iniziale di un determinato sito.

In genere quel file si chiama index.htm o html (HyperText Markup Language). Questo significa che il primo file che dobbiamo creare del sito in costruzione deve avere questo nome ed estensione. La sigla HyperText Markup Language sta ad indicare il linguaggio che è alla base di tutti i web editor che permettono la creazione di pagine web, prima dei quali, solo fino a pochi anni fa, era necessario conocere l'html per generare ipertesti.

Apriamo adesso il programma che utilizzeremo per la creazione delle pagine cioè il Netscape Composer che è un modulo all'nterno del browser Netscape Navigator.

Per scaricare il programma Netscape 4.78, circa 23Mb (in distribuzione gratuitamente dal sito Netscape.com anche versioni più recenti) cliccare sull'icona. Il link porta ad una pagina di download della University of New Hampshire. Da qui cliccare su Download di Netscape Communicator 4.78

Una volta aperto il programma, questo si presenta come un comune editor di testo, con la finestra principale vuota dove poter digitare testi direttamente.
Nella parte alta ci sono i menu a tendina ed alcuni toolbar con le funzioni principali.

Come accennato in precedenza salviamo questa pagina con il nome di index.html. Questa sarà la homepage del nostro sito cioè la pagina di apertura.

Prima di tutto dobbiamo creare una cartella o directory che conterrà tutto il sito, cioè tutti i file html, immagini, filmati ed altri tipi di media per il web che saranno contenuti all'interno delle pagine e che dovrà essere organizzata sistematicamente con file, directory e sottodirectory (fino al necessario livello di annidamento). E' molto importante conservare una struttura chiara di questa cartella e del suo contenuto perchè questa avrà la sua copia identica depositata sul server che ospiterà le nostre pagine, e soltanto una ben organizzata struttura ci permetterà di gestire senza problemi il sito in costruzione.

Nel menù a tendina File selezioniamo Save as e dopo aver scelto la cartella di destinazione, cioè la directory principale che conterrà tutto il lavoro del sito, digitiamo index in Nome file e salviamo.

In questo web editor nel momento in cui si salva per la prima volta un file html compare una finestra di dialogo che ci chiede di specificare il titolo della pagina, modificabile in seguito. In altri software analoghi questa è una informazione che va inserita nel momento in cui si scelgono le impostazioni generali della pagina.

Il titolo della pagina è importante perchè compare in alto nel browser ad identificare la pagina ma ancora di più perchè è il titolo che verrà salvato nei bookmark e che aiuterà il visitatore a tornare più facilmentetramite appunto tramite i preferiti.

In questa immagine seguente è visibile l'organizzazione della cartella contenente i file del minisito creato in aula per il tutorial (le immagini precedenti fanno riferimento ad un altro). francescodeluca è la cartella che contiene tutto il lavoro e che può risiedere per esempio direttamente sul disco C o in altre partizioni dello stesso o in altre directory. Come si vede il file index.html risiede nel livello più alto della gerarchia della cartella francescodeluca e in questo caso i file di immagine direttamente contenuti nella pagina index.html risiedono anch'essi allo stesso livello. E' sempre buona norma, poi, creare sottocartelle, come in questo caso la paa che contengono altre pagine dello stesso sito, separate tematicamente, e raggiungibili tramite collegamenti dalla index o da altre pagine del sito stesso
Come tutti i software anche un web editor ha delle impostazioni base, cioè la possibilità di scegliere alcune caratteristiche riguardanti le pagine stesse. Nel composer raggiungiamo questi comandi dal menù a tendina Format - Page Colors and Properties.
Fra quelli più utilizzati sottolineiamo la possibilità di settare il colore di sfondo od una immagine di sfondo, l'aspetto dei testi contenenti collegamenti e nuovamente il titolo della pagina.

Vediamo adesso gli strumenti principali per pubblicare sul web. Fondamentalmente le pagine web sono dei documenti contenenti testo , immagini ma soprattutto link cioè collegamenti ad altri siti. Oltre queste cose basiche vi sono tutta una serie di media per il web come animazioni, pagine interattive ed ambienti 3D esplorabili.

Cominciamo dal testo. Nel menu Format troviamo la possibilità di scegliere il font da utilizzare.

Ed anche l'allineamento (Align). Gli stessi comandi possono essere utilizzati nella seconda riga di toolbar in primo piano.
A questo punto possiamo digitare l'intestazione della nostra pagina e passare ad analizzare il comando per inserire immagini. Nel Composer si può utilizzare il tasto Image presente sul Toolbar principale (come illustrato dall'immagine sottostante).

Iamage apre una finestra di dialogo dove fra le tante opzioni possiamo, attraverso il comando Choose File, andare a selezionare il file di immagine che vogliamo inserire nella pagina. Prima di compiere questa operazione ci sono alcuni passi fondamentali propedeutici.

1) L'immagine da utilizzare all'interno della pagina deve essere copiata o trasportata all'interno delle cartelle riguardanti i file del sito. Possibilmente nella stessa cartella dove risiede il file html della pagina che deve ospitarla o in una cartella eventualmente dedicata a contenere solo immagini di alcune pagine, simili tematicamente,del sito. Il Composer ha una opzione ( Leave image at the original location), presente in questa finestra di dialogo, che se deselezionata copia automaticamente l'immagine scelta nel folder dell'html sul quale la si inserisce. In ogni caso è sempre bene assicurarsi della disposizione dei file nelle varie cartelle.

2) Le immagini da pubblicare possono essere di due tipi, .jpg (il + usato) e .gif. In ogni caso devono essere molto leggere per rendere il caricamento della pagina veloce. La risoluzione alla quale vanno salvate è 72 Dpi (Dot per inch) in quanto questa è la risoluzione alla quale i monitor lavorano. Inoltre chi utilizza il programma di fotoritocco Photoshop può ulteriormente scegliere la qualità/risoluzione dell'immagine nel momento in cui salva in .jpg. Nella scala Image Option è sufficiente raggiungere il valore 6/8.

Scelta l'immagine questa compare nella pagina nel punto in cui si trova il cursore lampeggiante. Per poterla riposizionare, in questo software non particolarmente avanzato è necessario spostarla come un testo con i pulsanti della tastiera spaziatura (orizzontalmente) e invio e backspace (verticalmente).

Uno degli aspetti fondamentali da considerare creando pagine web è la dimensione delle stesse. Pagine troppo grandi saranno visualizzate male o navigate scomodamente dalla maggiorparte degi visitatori. La risoluzione media utilizzata per i monitor è 1024x768 pixel (larghezza x altezza ) altre possono essere 800x600 o 1280x1024. Quindi è importante che la larghezza degli oggetti o dei testi che utilizziamo all'interno delle pagine non superi i 1024 pixel. Molti portali o siti di società ed istituzioni importanti è impostato sugli 800. Siti particolarmente avanzati hanno pagine che riconoscono la risoluzione dei nostri scgermi e si adattano di conseguenza.

Per determinare la larghezza in pixel della pagina che stiamo creando ci sono diversi modi. Per esempio utilizzare immagini che a 72 Dpi non superano la dimensione desiderata in orizzontale. Alcuni programmi di impaginazione web più avanzati hanno anche strumenti di misura come righelli o la stessa dimensione della finestra di lavoro dimensionabile con precisione.

Nel Composer per avere una impostazione precisa possiamo utilizzare lo strumento tabella, comune a tutti i web editor. Per crearla utilizziamo il comando Table presente sul Toolbar principale.

Una volta selezionato Table si apre una finestra di dialogo nella quale dobbiamo scegliere alcune impostazioni. Fondamentalmente una tabella è un oggetto che rappresenta un campo della pagina di dimensioni precise con una suddivisione al suo interno in celle dimensionabili a loro volta e organizzate su righe e colonne.

Nella relativa finestra di dialogo troviamo quindi fra le molte opzioni la possibilità di scegliere il numero delle righe (Rows) e delle colonne (Columns), l'allineamento da dare alla tabella stessa (Table Alignement), lo spessore del bordo (una sorta di squadratura) che può essere impostato anche su 0 quindi renderlo invisibile, il colore o l'immagine di sfondo e soprattutto le dimensioni da impostare per la tabella nello spazio Table width e Table min height. Di default questi campi sono impostati come % della finestra. Se cambiati in pixel è possibile attribuendo valori numerici stabilire la dimensione esatta della tabella.

In questo tutorial abbiamo creato una tabella composta da una riga ed una colonna quindi da una singola cella (in quanto deve ospitare un semplice testo) di dimensioni 600x400 e l'abbiamo allineata a sinistra.

Cliccando con il tasto destro dentro la tabella si apre un menu a tendina dove è possibile selezionare la voce proprietà tabella (Table Properties) che ci riporta alle impostazioni della tabella stessa.

Nuovamente a ll'interno del menu a tendina riguardante la tabella possiamo continuare a cambiare le impostazioni della stessa. Possiamo per esempio nelle impostazioni relative a Row o Cell modificare l'allineamento orizzontale e verticale del cursore spostandolo dalla posizione di default cioè centrato a sinistra a quella in alto a sinistra, sicuramente più comoda per scrivere all'interno della tabella.
A questo punto possiamo scrivere o possiamo incollare un testo preso da un qualsiasi programma di scrittura all'interno della tabella sapendo quali sono esattamente le dimensioni di ingombro.

Passiamo adesso all'ultima parte, la più importante, quella riguardante la creazione di link cioè di collegamenti fra la vostra pagina ed altre pagine sia appartenenti al vostro stesso sito sia esterne.

All'interno dei web editor è possibile linkare un gran numero di oggetti. Fondamentalmente vedremo in queste pagine come creare collegamenti da testi o immagini.

Nell'immagine precedente sono stati inseriti preventivamente alcuni testi (al di fuori della tabella) che linkeremo. E' stata creata una sezione "VAI ALLE SEGUENTI PAGINE" con alcune righe che fanno capire quali sono i collegamenti possibili.

Ovviamente prima di poter linkare una pagina questa va creata. Quindi selezioniamo il tasto New sul Toolbar principale per poter creare una nuova pagina. Questa operazione corrisponde a creare una pagina nel momento in cui si avvia il programma, cosa che è stata descritta all'inizio del tutorial. New serve semplicemente a cominciare la nuova pagina senza dover chiudere quella sulla quale stiamo lavorando.

Nella successiva finestra di dialogo Create New Page selezioniamo Blank Page (Pagina vuota) e nei passaggi successivi ripetiamo le stesse operazioni iniziali in cui abbiamo salvato la prima pagina dando il nome al file e il titolo alla pagina. La prima l'abbiamo chiamata index.html, ovviamente questa seconda avrà un altro nome. Se questa pagina che vogliamo collegare alla prima appartiene ad un argomento insieme ad altre future come per esempio tutte le pagine relative al corso e avrà delle immagini proprie, è bane creare una cartella apposita che contenga questa pagina e le future.

Come già visto nell'illustrazione dell'organizzazione dei file e cartelle del minisito creato in aula per il tutorial, chiamiamo questo file corso.html e salviamolo nella cartella paa.

Una volta aperta la nuova pagina possiamo considrerare questa la homepage delle pagine dedicate al corso. Quindi digitiamo una intestazione e una frase.

Adesso torniamo sulla nostra homepage selezioniamo il testo che vogliamo debba essere cliccato per portarci a questa nuova pagina e attiviamo la finestra di dialogo che ci permetterà di collegare il testo attraverso il pulsante Link sul Toolbar principale.
La finestra di dialogo che compare è una finestra generica di gestione di diverse proprietà del testo (Character Properties) con una sezione Link che riguarda appunto la possibilità di rendere quel testo un collegamento. Nella sezione Linked text compare la frase o la parola o parte di questa che abbiamo selezionato.

A questo punto abbiamo due possibilità principali: creare un collegamento ad una altra pagina sul nostro sito (quello che vogliamo fare ora) o ad una pagina in rete. Selezionando Choose File possiamo scegliere la pagina andando a selezionare il file html da poco creato nella sua cartella.

Anche se poi tutto il lavoro sarà trasferito sul server il browser che espolrerà le vostre pagine automaticamente cercherà la pagina all'interno della vostra directory o in rete.

Dopo aver selezionato il file html nella sua cartella attraverso i pulsanti Apri nella finestra di dialogo Link to File e OK nella finestra di dialogo Character Properties il testo selezionato sarà linkato alla pagina indicata. Come conferma il testo cambierà colore e presenterà una sottolineatura, caratteristica che segnalerà al visitatore il link attivo.

Adesso proviamo a collegare un altro testo ad una pagina esterna. Dopo averlo selezionato riattiviamo il comando Link sul Toolbar principale.

Questa volta nella finestra di dialogo Character Properties non dobbiamo scegliere un file html all'interno della directory locale che contiene i file del nostro sito, come precedentemente illustrato attraverso il pulsante Choose File, ma dobbiamo digitare o incollare nell'apposito spazio Link to a page location or local file l'indirizzo web reale della pagina da collegare.

A questo punto la frase selezionata condurrà alla pagina esterna in rete.

Per finire possiamo provare a linkare altri tipi di oggetti, per esempio possiamo collegare l'immagine iniziale sulla homepage ad una altra immagine più grande senza dover necessariamente creare una nuova pagina che la contenga. C'è la possibilità di un equivoco. E' sottinteso che i testi non linkano solo pagine e immagini linkano solo altre immagini, ovviamente i collegamenti possono essere anche di tipo incrociato cioè immagini che collegano pagine o testi che collegano immagini e molte altre cose in un verso e nell'altro.

Per poter collegare l'immagine iniziale che si chiama nebula04.jpg presente sulla homepage ad una altra identica ma più grande che si chiama nebula04G.jpg , entrambi presenti al livello più alto della directory che contiene i file del nostro sito, è sufficiente selezionare l'immagine di partenza con il tasto destro del mouse e scegliere l'opzione Image/Link Properties (oppure attraversoil tasto Link sul Toolbar principale)

Nella solita finestra di dialogo, questa volta riguardante l'immagine, e nella sezione Link attraverso il pulsante Choose File andiamo a scegliere direttamente il file di immagine che vogliamo collegare e convalidiamo la scelta tramite OK.
L'immagine scelta verrà visualizzata in una nuova pagina del browser senza altri oggetti al suo interno.

Questi erano i passi fondamentali per la costruzione di semplici pagine web.

Ovviamente l'argomento è vastissimo e può essere approfondito attraverso manuali o anche cercando in rete tutorial e articoli vari. Alcuni link utili sono i seguenti.

http://www.html.it/

http://www.risorse.net/

http://www.neosintesi.com/tools/

http://www.mclink.it/docs/mcweb/ita/risorse/

http://tuttoperinternet.supereva.it/software/software_editor_html.htm?p

http://italianwebspace.com/db/informatica/manuali/

FINE