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). 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. Tuttavia avere una idea generale di come è composto un documento HTML è in ogni caso molto utile, anche solo come verifica. APRIRE Netscape Composer LA PAGINA DI COMPOSER La pagina di composer si presenta così: Partiamo dall inizio: COME APRIRE NETSCAPE COMPOSER Essendo un componente di Netscape Communicator Possiamo aprire Composer dal menu: Tasks / Composer 1
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: 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: 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 Compare una finestra che ci permette di operare alcune scelte: scriviamo il nome del file nel campo editabile, e salviamo cliccando su SAVE 2
PROPRIETA DI PAGINA Vediamo ora le PROPRIETA DELLA PAGINA, ad esempio il title 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 È 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 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: 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 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 3
PROPRIETA DI <HR> Possiamo impostare anche altre caratteristiche di una riga orizzontale 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: In questo caso abbiamo ridotto la larghezza ad 80% 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: 4
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.) 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: Quello che servirà più spesso è: http://www.google.com (per le pagine web) Ma ne esistono altri: mailto:guglie@lettere.media.unisi.it ftp://login:password@server E ancora altri usati più raramente: gopher, https, news, telnet. (per gli indirizzi di e mail) (per fare scaricare ai navigatori un file da server remoto) 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 INSERIRE UN LINK (file) 1) Selezioniamo una nuova parola, clicchiamo sul bottone, ma questa volta scegliamo: choose file Le parole attive vengono segnalate col caratteristico blu e la sottolineatura 2) supponendo di aver già creato precedentemente la pagina PROGRAMMA.html potremmo individuare il file nella cartella e selezionarlo. 5
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 6
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 7
INSERIRE IMMAGINI Una volta scelto il file che vogliamo caricare L IMMAGINE INSERITA Ricordiamoci sempre che le pagine web supportano solo i formati GIF e JPEG 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 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 ) 8
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: 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 Click col pulsante destro del mouse (per i Mac ctrl + click ) DEFINIRE ALTRE PROPRIETA DELLA TABELLA Dal menu Table / Table Properties si accede ad un pannello che permette di impostare ulteriori opzioni per le tabelle PREVIEW DELLA TABELLA Ecco come appare invece in modalità PREVIEW, il bordo tratteggiato è scomparso 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) 9
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: 10
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 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. 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) 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. 11