INTRODUZIONE AGLI EDITOR WEB: WYSIWYG Vs CODICE
Le pagine web, o meglio i documenti HTML sono semplici documenti di
testo che contengono particolari istruzioni di formattazione, dette TAG, che
istruiscono i browser su come visualizzare il contenuto del documento.
Per questo motivo sarebbe possibile (e generalmente a livello professionale
così avviene) comporre una pagina con un semplice editor di testi, o con i
più sofisticati editor orientati al codice, che facilitano il nostro compito
rendendo più leggibile il documento e fornendoci evolute funzioni per
aumentare la produttività (balance, grep, ecc…).
Essendo questo un corso introduttivo ci pare più efficace come approccio
rivolgerci invece ai cosiddetti editor WYSIWYG, cioè a quei programmi che ci
permettono di comporre le pagine anche senza conoscere il linguaggio
HTML, manipolando direttamente gli elementi del contenuto testuale e gli altri
oggetti necessari (ad es. le immagini).
Tuttavia avere una idea generale di come è composto un documento HTML è
in ogni caso molto utile, anche solo come verifica.
EDITOR VISUALI DI PAGINE WEB: Netscape Composer
Volendo introdurre l’editing di pagine web la scelta è caduta su Netscape
Composer per alcuni semplici motivi:
• È gratuito
• È disponibile praticamente per ogni piattaforma (Win, Mac, Linux)
• È dotato di tutti i comandi basilari e può essere un valido approccio prima
di passare all’utilizzo di strumenti professionali più complessi
Esistono svariati software con caratteristiche simili (ad esempio MS FrontPage
Express, anch’esso distribuito gratuitamente insieme a MS Explorer, ma non
disponibile in versione MAC), possiamo comunque presumere che una volta
acquisita familiarità con le funzioni base di Composer sia possibile utilizzare
anche questi strumenti senza troppi problemi.
APRIRE Netscape Composer
Partiamo dall’inizio: COME APRIRE NETSCAPE COMPOSER
Essendo un componente di
Netscape Communicator
Possiamo aprire Composer
dal menu:
Tasks / Composer
LA PAGINA DI COMPOSER
La pagina di composer si presenta così:
GLI STRUMENTI: BARRA DI COMPOSIZIONE
Vediamo innanzi tutto gli strumenti che il programma ci mette a disposizione:
Innanzi tutto vediamo come i pulsanti della Barra di Composizione
corrispondono in larga parte ad operazioni gestibili anche da menu:
GLI STRUMENTI: BARRA DI FORMATTAZIONE
Analogamente per i pulsanti presenti sulla Barra di Formattazione e il menu
Format:
generalmente i menu consentono di regolare un numero superiore di
parametri.
GLI STRUMENTI: MODALITA’ DI LAVORO
Una serie di pulsanti nella parte inferiore della pagina ci permettono di
scegliere tra diverse modalità di lavoro:
Normal (WYSIWYG);
Show all tags (una utile modalità tutta
testuale che evidenzia i tag html con
particolari etichette);
HTML Source (che permette di
lavorare come in un semplice editor di
testi);
Preview (simula la resa della pagina
in Navigator)
Composer (e la gran parte degli editor
WYSIWYG) sono una buona palestra
anche per chi voglia apprendere
l’HTML vero e proprio: basta vedere
cosa cambia nel codice in seguito ad
una operazione…
SALVARE LA PAGINA
Iniziamo col salvare su disco il file (file/save as), creiamo una cartella nella quale
inseriremo tutti i file necessari al lavoro:
Compare una finestra che ci
permette di operare alcune scelte:
scriviamo il nome del file nel
campo editabile, e salviamo
cliccando su SAVE
PROPRIETA’ DI PAGINA
Vediamo ora le PROPRIETA’ DELLA PAGINA, ad esempio il “title”
È importante ricordare che il titolo di una pagina
web non corrisponde al nome del file,
dipende invece dal contenuto del tag <title>:
è il testo che appare in alto nella finestra del
browser e contrassegna l’eventuale bookmark
IMPOSTARE LO STILE DEL TESTO
Iniziamo vedendo come si applica il grassetto (il testo ovviamente lo abbiamo
già inserito, come se stessimo usando un programma di videoscrittura)
Dopo aver selezionato il teso scegliamo il bottone “B” dalla barra di
formattazione.
Essendo un titolo possiamo anche optare per una delle intestazioni predefinite
dell’HTML (*formattazione logico-funzionale), dall’apposita tendina,
ad es. Heading1
IMPOSTARE LO STILE DEL TESTO
Cambiamo adesso il carattere del
testo:ricordiamo sempre di selezionare
un carattere che abbia buone
probabilità di essere presente sul
computer di chi guarderà la pagina, tra
i più diffusi:
Times (del tipo graziato), Arial,
Helvetica (senza grazie), Courier
(monospaziato)
Anche i caratteri sono tra gli elementi suscettibili di variazione a seconda del
browser e della configurazione di chi guarderà la pagina:
l’HTML infatti non include i font, indica semplicemente al browser quali dovrà
utilizzare per la resa del testo
INSERIRE UNA RIGA ORIZZONTALE
Dopo aver scritto un po’ di testo possiamo avere la
necessità di separare gli elementi che saranno
interattivi (i link) dal resto del testo, la cosa più
semplice è l’uso di una riga
PROPRIETA’ DI <HR>
Possiamo impostare anche altre caratteristiche
di una riga orizzontale
In questo caso
abbiamo ridotto
la larghezza ad
80%
PREDISPONIAMO IL TESTO PER I LINK
Tra le due righe che abbiamo precedentemente inserito andiamo ad scrivere il
testo che utilizzeremo come navigazione per il sito
ALLINEAMENTO
Già che cisiamo
impariamo anche ad
allineare il testo, per
esempio centrandolo:
Dopo averlo
selezionato usiamo il
pulsante della barra di
formattazione
INSERIRE UN LINK
Adesso inseriamo un link selezionando
la parte di testo che vogliamo rendere
attiva e successivamente cliccando sul
bottone (oppure dal menu Insert / Link)
INSERIRE UN LINK (location)
Ora possiamo operare sul pannello Link
Properties e inserire l’URL della pagina a
cui desideriamo puntare.
N.B.: se la destinazione è una pagina
Web è importante ricordare di scrivere
l’URL completo di protocollo*,
se non lo facciamo Composer attribuisce
alla pagina una localizzazione relativa
(cioè pensa che il file sia nella stessa
cartella in cui si trova la pagina che
stiamo creando)
Il risultato:
ANCORA SUI PROTOCOLLI
Per collegarci ad un indirizzo remoto, cioè ad una pagina che non risiede
sul nostro compuer, è necessario specificare il protocollo utilizzato (come
sappiamo i protocolli sono accordi fra un mittente e un ricevente sul modo in
cui i dati vengono inviati e interpretati.)
Quello che servirà più spesso è:
“http://www.google.com”
(per le pagine web)
Ma ne esistono altri:
“mailto:[email protected]”
“ftp://login:password@server…”
(per gli indirizzi di e-mail)
(per fare scaricare ai
navigatori un file da server remoto)
E ancora altri usati più raramente: gopher, https, news, telnet.
ANCORA SUGLI URL (Uniform Resource Locator)
Diamo quindi un’occhiata alla forma corretta di un URL (l’indirizzo che
permette di identificare in modo univoco una pagina sul Web)
L’aspetto classico di un url:
Se inseriamo solo il nome di dominio del server Web, senza indicare il nome
del file HTML, il server Web invia la sua pagina principale predefinita.
LA PREVIEW DI COMPOSER
Le parole attive vengono
segnalate col caratteristico
blu e la sottolineatura
INSERIRE UN LINK (file)
1) Selezioniamo una nuova
parola, clicchiamo sul bottone,
ma questa volta scegliamo:
“choose file”
2) …supponendo di aver già
creato precedentemente la
pagina “PROGRAMMA.html”
potremmo individuare il file nella
cartella e selezionarlo.
INSERIRE UN’ANCORA
Per creare un ritorno all’inizio della
pagina possiamo inserire un’ancora,
cioè un punto del nostro documento che
sarà raggiungibile attraverso un link
• Selezioniamo il punto nella
pagina e clicchiamo sul bottone a
forma di ancora (o scegliamo dal
menu “Insert / Anchor”)
• Composer ci chiede di
specificare un nome per l’ancora
A segnalare l’avvenuto inserimento
appare una iconcina gialla nel punto che
avevamo scelto.
INSERIRE UN LINK (ancora interna)
Ripetiamo la procedura ormai
nota per inserire i link,
selezionando questa volta il
testo a fondo pagina, poi
clicchiamo sul bottone “more
properties”
Il pannello si apre e troviamo
elencate le ancore interne
precedentemente inserite da
cui selezioniamo “top”
Ecco fatto:
ORA CONTROLLIAMO CIÒ CHE SI VEDE NEL BROWSER
Periodicamente è meglio controllare in un vero
browser ciò che stiamo facendo
(meglio non fidarsi troppo della semplice preview di
Composer).
Dalla barra di composizione selezioniamo “browse”
A differenza di quanto accade utilizzando la preview interna di Composer, prima
di vedere la pagina su browser ci viene chiesto di salvarla
TORNA A INIZIO PAGINA
Ora possiamo
verificare il
corretto
funzionamento
del link interno
che abbiamo
inserito.
Dimensioniamo
la finestra* in
modo che non
possa
contenere tutto
il testo, poi
“scrolliamo” fino
a trovare “torna a
inizio pagina”,
clicchiamo…
I COLORI: IL TESTO
Selezionare dal menu Format / Text Colors, o cliccare sul pulsante nella barra
di formattazione, ci permette di impostare il colore del testo:
Il pannello ci permette di
selezionare direttamente il
colore con un click
oppure di inserire il codice
esadecimale corrispondente
I COLORI: LO SFONDO
In modo analogo possiamo impostare il colore di sfondo:
Usando il bottone
oppure il menu
Format / Page Colors…
I COLORI IMPOSTATI
Ecco cosa vediamo dopo aver cambiato il colore di testo e sfondo
INSERIRE IMMAGINI
Anche per INSERIRE UN’IMMAGINE
possiamo cliccare sul bottone nella
barra di composizione o scegliere il
comando da menu
Insert / Image
(ma potremmo anche trascinare
direttamente il file sulla pagina di
Composer, cioè attuare un Drag and
Drop)
Ricordiamoci sempre che le immagini
dovranno essere caricate (UPLOAD)
sul server insieme alla pagina e nella
stessa posizione relativa, l’HTML non
include le immagini
INSERIRE IMMAGINI
Una volta scelto il file che
vogliamo caricare…
possiamo impostare alcune
caratteristiche come:
un testo da far visualizzare al
browser finché l’immagine non è
stata caricata
Le dimensioni in pixel se
differenti da quelle reali.
l’allineamento relativamente al
testo e la distanza dal testo
stesso
La presenza del bordo
L’IMMAGINE INSERITA
Ricordiamoci sempre che le pagine web supportano solo i formati GIF e JPEG
INSERIMENTO DI TABELLE
Per inserire una TABELLA
possiamo:
cliccare sul bottone nella barra
dal menu Insert / Table
Dallo specifico menu
Table / Insert / Table
INSERIMENTO DI TABELLE 2
Il pannello Insert Table ci permette
di impostare le caratteristiche della
tabella che stiamo creando:
Il numero di righe e di colonne
La dimensione generale
(in percentuale rispetto alla finestra
oppure in pixel)
Il bordo (che potremmo eliminare
impostando su “0”)
ELIMINARE O AGGIUNGERE TABELLE, RIGHE E COLONNE
In seguito sarà possibile, da
differenti menu, aggiungere ulteriori
righe, colonne, celle… oppure
eliminarle
Ad esempio togliamo una delle
colonne utilizzando i menu
contestuali:
Click col pulsante destro del mouse
(per i Mac “ctrl + click”)
UNIRE LE CELLE
Ora uniamo le due celle
della prima riga (sempre
click col destro su Win o
ctrl+click su Mac)
Così possiamo scrivere
il titolo della tabella e
inserire il testo
DEFINIRE ALTRE PROPRIETA’ DELLA TABELLA
Dal menu Table / Table Properties si accede ad
un pannello che permette di impostare ulteriori
opzioni per le tabelle
In questo caso abbiamo
impostato il colore di
sfondo della tabella e tolto
il bordo
(adesso Composer ci fa
vedere un bordo
tratteggiato in rosso)
PREVIEW DELLA TABELLA
Ecco come appare invece in modalità PREVIEW, il bordo tratteggiato è
scomparso
LAVORARE IN MODALITA’ “SHOW ALL TAGS”
Una ulteriore possibilità di editing è data dalla modalità “Show all tags”, che
potremmo definire una forma intermedia tra il codice puro ed il WYSIWYG
TAG PROPERTIES
Se facciamo doppio click su uno dei tag, ad esempio <body> appare un pannello
Come vedete da qui
possiamo editare in maniera
più raffinata le proprietà, ad
esempio il colore dei link, dei
link visitati, ecc…
TAG PROPERTIES
Ecco come si impostano i valori:
se non ci ricordiamo il codice
esadecimale Composer ci
aiuta suggerendo una serie di
colori predefiniti
VEDERE ED EDITARE IL CODICE HTML
Volendo accedere al codice
HTML è sufficiente
selezionare il pulsante
“<HTML> Source”
in basso a sinistra nella
finestra:
LO STRUMENTO “FIND AND REPLACE”
Nel caso in cui volessimo trovare una specifica parola in un testo lungo
potremmo avvalerci del comando “Find and Replace” sotto il menu “Edit”
Basterà digitare la parola da trovare nel campo
superiore presente nel pannello, quella da
sostiuire in quello inferiore, poi scegliere se
rimpiazzare soltanto la prima trovata (replace) o
tutte le occorrenze nel documento (replace all)
QUALCHE SUGGERIMENTO SULLE IMMAGINI
Quando si devono preparare le immagini da utilizzare in una pagina web:
passarle allo scanner e salvarle in formato .gif oppure .jpg ( le prime servono
per le immagini con colori uniformi, in genere le clipart, le seconde per le
immagini con colori sfumati, le fotografie), possibilmente già delle dimensioni
che utilizzeremo:
- Se usiamo l’ipertesto solo sul computer come file o lo salviamo sul Cdrom,
possiamo anche utilizzare immagini di grandi dimensioni,
- Mentre se l’utilizziamo su internet occorre che siano le più piccole possibili, in
un giusto rapporto tra dimensioni in pixel e qualità della visione.
- In ogni caso è consigliabile fare attenzione alle dimensioni in Kbyte
ORGANIZZARE E PROGETTARE IL SITO
Nella nostra carrellata sulle funzioni di Composer non abbiamo parlato
della progettazione del sito.
In genere è buona norma fare una accurata progettazione,
rappresentando in un grafico abbozzato la struttura logica, prevedendo
quali saranno i file necessari sia testuali che grafici, pensando a come
rendere accessibili i contenuti (la Home Page, i link da una pagina
all’altra), ecc…
Tutte queste cose si possono fare tranquillamente con un foglio ed una
matita, a prescindere dal software che useremo in fase di sviluppo:
è meglio chiarirsi le idee prima di partire, sapendo che certamente in
corso d’opera ci accorgeremo di qualcosa che non avevamo previsto,
fortunatamente il mezzo digitale ci permette di modificare in ogni
momento il nostro lavoro…
PUBBLICARE IL SITO
È meglio costruire il nostro sito in una cartella sull'hard disk in modo da
avere il tutto sottomano (tutte le pagine e le immagini) e fare le prove
necessarie.
Per verificare se realmente è tutto funzionante possiamo collegarci al
server (molti ormai danno gratis lo spazio) ed inviare via FTP le nostre
pagine.
Una volta inviate le pagine, dopo aver provato se il nostro sito si apre,
usando l'indirizzo assegnatoci, potremo in seguito collegarci ed inviare
solo le nuove pagine e le nuove immagini.
Ovviamente tutto quello che inseriremo di nuovo dovrà essere sempre
salvato nella cartella dell'Hard disk che contiene il sito.