Usare PageMill

Adobe PageMill è uno di quei programmi che ci ricordano (se ce ne fosse bisogno) quanto sia semplice e piacevole lavorare con Macintosh.
Tra l'altro PageMill è in dotazione con tutti gli iMac dalla rev.C in poi. Grazie ad un'interfaccia utente davvero intuitiva, Adobe PageMill rende possibile per chiunque creare pagine per il World Wide Web per Internet.
Con la terza versione del programma Adobe ha notevolmente incrementato le già ottime potenzialità del prodotto fornendo all'utilizzatore efficaci strumenti per creare "frames", lavorare con le tabelle ed anche inserire "applets" di Java.
Alcune note di carattere generale, utili per chiunque si accinga a sviluppare un qualsiasi progetto HTML:
Prima regola: 800x600 a 256 colori. Pensate sempre in funzione di questo standard di risoluzione, se avete un monitor a scansione multipla, portatelo a 800*600, aprite Netscape, ampliatene la finestra a tutto schermo e tornate a risoluzione superiore, in questo modo avrete modo di verificare in Netscape che la vostra pagina entri perfettamente nella dimensione di schermo prefissata.
Seconda regola: Scegliete i giusti formati files. Quando salvate file grafici da collocare sul web scegliete sempre il formato più adatto. Salvo rare eccezioni il formato più adatto è senz'altro quello più piccolo come dimensione (in K). Una dimensione minore porta ovviamente un minore tempo di scaricamento. I files GIF sono adatti per immagini con tinte piatte come loghi o grafica generata da programmi vettoriali e convertita in bitmap. Il formato JPEG è in grado di comprimere meglio le fotografie, o comunque files ricchi di sfumature.
Terza regola: Usare le tabelle. Imparate ad usare le tabelle per formattare le pagine HTML, otterrete pagine migliori ed allineamenti perfetti.
Quarta regola: Usare un browser per le verifiche. Anche se PageMill ha una sua modalità "browser" (chiamata preview mode), verificate sempre il vostro lavoro mano a mano che procede usando un "vero" browser Internet. Vi risparmierete sgradevoli sorprese a fine lavoro. L'importante in ogni caso è che "puliate" spesso la cache, o meglio ancora che la disabilitiate del tutto (almeno mentre verificate le pagine costruite).
Quinta regola: Processate i file grafici prima di importarli in PageMill. Anche se il programma permette di cambiare la dimensione di un file importato usando direttamente il mouse, otterrete sempre un risultato migliore portando il documento alla sua giusta misura in un programma di grafica. Riducendo la dimensione di un file con PageMill infatti, questo conserverà la stessa dimensione (in K) dell'originale (se invece viene ridotto con un software grafico diventa anche più piccolo in k.). Se prevedete poi di avere molti visitatori con piattaforma Windows sul vostro sito processate i file in modo che la loro palette sia ottimizzata per quel sistema operativo. Debabelizer, un editor grafico della software house Equilibrium, è in grado di farlo con il comando "Remap palette".
Anche Image Ready di Adobe e Photoshop comprendono questa funzione.




La prima cosa da fare è impostare nelle preferenze del programma i parametri adeguati. Cominciamo col fare clic sull'icona "Page" e scegliamo il tipo di testo che PageMill dovrà generare. In pratica è necessario sapere su quale tipo di server collocheremo le nostre pagine, nell'esempio abbiamo supposto di avere a che fare con un server DOS ed è stato scelto quindi il suffisso .htm (estensione di 3 sole lettere) anziché .html.
Da questa finestra possiamo anche impostare una immagine di sfondo da utilizzare per tutte le pagine, in questo caso - poiché desideriamo avere sfondi diversi per ogni pagina - ignoriamo questa possibilità.



Tramite l'icona "resouces" possiamo impostare la cartella dove desideriamo vengano salvati i file grafici incollati direttamente sulle pagine. In pratica il programma converte in GIF qualunque file grafico venga posto sulla pagina tramite copia ed incolla, ed utilizza questa copia per compilare il file HTML (rendendo superflua la conservazione dell'originale). PageMill tuttavia rinomina i files importati in questo modo con nomi poco significativi (Image1.GIF, Image2.GIF ecc). E' consigliabile quindi che siate voi a salvare (con nomi più esplicativi) tutti i files grafici da importare (già nel formato grafico adatto) in una medesima cartella. In pratica vi consigliamo di seguire sempre la seguente regola quando create un sito, anche se molto piccolo come la vostra Home Page: Creare una cartella principale (ad esempio "Mia_Home") ed all'interno una seconda cartella (es."Images"). Rispettando questa gerarchia collocherete i files HTML dentro la prima e tutte le immagini dentro la seconda. Rispettare questa semplice regola vi consentirà di non perdere tempo a fine lavoro per cercare sull'HD tutti i files utilizzati. Chiudete la finestra "preferences" e scrivete - nel campo "Title" - il titolo della pagina, (nell'esempio "My Home"). Quello che scrivete nel campo del titolo è ciò che il Browser mostrerà nella barra del titolo della sua finestra di navigazione.

Assicuriamoci di essere nel modo "Edit", (cioè di poter effettivamente lavorare sulla pagina) il programma è in questa modalità quando la grossa icona in alto a destra nella finestra di PageMill raffigura una penna che scrive su un documento. L'altra opzione ("Browse") serve solo per verificare e testare le pagine create (potete imporre al programma un metodo da impostare all'avvio usando le preferenze).

Dal menu "Windows" apriamo la palette "Inspector" che costituisce il cuore del programma. Da questa palette possiamo intervenire sugli elementi generali del documento cliccando sulle relative icone. Clicchiamo su quella rappresentante una pagina vedremo apparire un quadrato con scritta "background Image". Trasciniamo dalla nostra cartella immagini un file grafico precedentemente predisposto per lo sfondo e salvato in GIF.



Con lo stesso metodo trasciniamo un secondo file grafico, questa volta non sulla casella rappresentante lo sfondo ma direttamente sulla pagina. Utilizzando il pulsante "Center align" (posto in alto nella barra delle icone di PageMill) lo centriamo sulla pagina. Sempre mentre il file è selezionato - dalla palette "Inspector" - compiliamo il campo "Alternate label" per questa immagine. Questo campo serve per chi utilizza un Browser a cui sia stata disabilitata la capacità di mostrare le immagini (alcuni utenti lo fanno per avere una risposta più rapida). Utilizzando "Alternate label" verrà almeno visualizzato il nome dell'immagine, dando modo all'utente di capire meglio il contesto.



L'immagine appena importata ha uno sfondo bianco che copre la pagina e nasconde il pattern di sfondo. Possiamo rimediare a questo inconveniente utilizzando una funzione dell'editor grafico di PageMill. Selezioniamo "Open" dal menu "File" ed apriamo il file grafico collocato sulla pagina. Nella finestra dell'editor selezioniamo la bacchetta magica e facciamo clic su un qualunque punto nell'area bianca. Voilà…lo sfondo è rimosso all'istante dal file, ed alla chiusura della finestra l'immagine importata sarà aggiornata correttamente. Questa tecnica funziona con tutti i colori (cliccando nell'area blu dei caratteri avremmo fatto sparire la scritta e conservato lo sfondo). Chiudiamo l'editor salvando il file.



La finestra dell'editor grafico permette anche la creazione di GIF "interlacciati". I GIF interlacciati sono GIF standard codificati tuttavia con un metodo particolare che li fa apparire per "strati". In pratica questi vengono visualizzati nel browser via via a risoluzione maggiore man mano che il file arriva all'utente. Il vantaggio di questo tipo di files è che danno la sensazione di una risposta più veloce della rete, poiché l'utente non è obbligato ad aspettare lo scaricamento di tutto il file prima di poterlo vedere. Per trasformare un GIF semplice in interlacciato basta fare un clic sull'ultima icona in basso a sinistra nella finestra dell'editor grafico, quella che rappresenta un dischetto con dietro una figura.



In PageMill esistono due metodi di battere un "a capo". Il primo metodo non spezza il paragrafo e quindi (poiché gli attributi di testo si applicano a tutto il paragrafo) ci consente di formattare uniformemente un 'intero paragrafo. Questo "a capo" si ottiene premendo contemporaneamente i tasti maiuscole e return. Il secondo "a capo" si ottiene più semplicemente premendo "return". In pratica il primo implementa il tag <BR> che permette di andare a capo senza inserire una linea vuota, il secondo implementa il tag <P> che aggiunge anche una linea vuota. Nel nostro esempio le prime tre righe di testo sono un primo paragrafo intero, la quarta linea è un secondo paragrafo. Formattiamo il primo come "Large Heading" dal menu "Format" ed il secondo come "Largest Heading". Ovviamente progettando pagine HTML è necessario tener conto delle limitazioni insite nel linguaggio, non avete ad esempio modo di imporre un certo tipo di carattere se non collocandolo sulla pagina come file grafico (anche se qualcosa in questo senso sta cambiando) dovete quindi accontentarvi degli stili standard.


Al paragrafo "Buona consultazione" oltre alla formattazione come "Largest Heading" è stata imposta una dimensione relativa di +1 (i comandi della dimensione relativa sono nella barra dei comandi di PageMill). In questo modo qualunque carattere il nostro potenziale utente abbia impostato nel suo Browser, possiamo star certi che quel paragrafo apparirà nello stile standard "Largest Heading" con dimensione (relativa) maggiore di un punto.


Ecco come appare la pagina sino ad ora realizzata con il programma Netscape.




Dalla palette "Color Panel" nel menu "Windows" è possibile assegnare un colore al testo, selezioniamo il testo da colorare e trasciniamoci sopra il colore desiderato. Passiamo adesso alla creazione di collegamenti semplici.



Le due voci aggiunte in questa figura sono state formattate con lo stile "preformatted" (che assicura l'utilizzo di un carattere monospazio) ed allineate a sinistra (si trovavano inizialmente a contatto del bordo sinistro del monitor). Per farle rientrare utilizziamo il comando "Indent Right" dal menu "Format" (verifichiamo con Netscape di aver ottenuto l'effetto voluto). Questo consente di spostarle verso il centro senza dover usare l'allineamento al centro vero e proprio, che non avrebbe permesso di conservare l'allineamento delle due scritte sul margine sinistro.


Creiamo una nuova pagina senza chiudere quella appena fatta, (se avete letto sin qui dovreste esserne capaci). L'immagine importata è un documento JPEG cui è stato aggiunto un bordo di due punti utilizzando l'apposito campo "border" della palette "inspector". Sopra e sotto la figura sono state inserite due linee orizzontali con il pulsante "Insert horizontal rule" dalla barra degli strumenti di PageMill. Dopo aver inserito un nome nel campo "Title" salviamo il file. Le righe orizzontali possono essere rese più spesse direttamente trascinandole col mouse.


dal menu "Windows" selezioniamo "Tile" per visualizzare le due pagine affiancate. Nella nostra pagina home selezioniamo il testo che rappresenta la prima voce dell'indice e facciamo un clic nel campo "Link to" (in basso a sinistra nella stessa pagina). In questo campo scriviamo il nome del file da collegare a quel primo testo (completo dell'estensione .htm). In alternativa possiamo prendere l'iconcina che raffigura la pagina posta accanto al campo "Title" (nella pagina da collegare) e trascinarla nel campo "Link to" della home (prima ovviamente dobbiamo selezionare il testo che desideriamo attivi il collegamento). Prima di effettuare tutti i collegamenti assicuratevi di aver salvato i file con il comando "Save everithing". Chiudete il secondo file, ponete PageMill in modalità preview e fate clic sul link appena realizzato. Se tutto è a posto apparirà la pagina collegata.



Vediamo adesso con un esempio di una pagina realmente realizzata come usare frames e tabelle.
Da questa figura in avanti utilizzeremo solo funzioni specifiche di PageMill, per utilizzare frames e tabelle. La figura mostra un sito dove era necessario avere in una parte dello schermo un indice sempre disponibile e poter visualizzare contemporaneamente i capitoli di questo indice in un'altra porzione dello schermo.



Per Creare i frames si utilizzano gli appositi comandi "Split Horizzontally" e "Split Vertically" (in questo caso è stato usato il secondo). La dimensione dei frames può essere stabilita col mouse o definita in modo più preciso dalla finestra "Inspector ". Trascinando il frame manualmente se ne imposterà la dimensione come percentuale riferita all'area dello schermo (ad esempio in questa figura il frame più grande è pari al 79% dell'area di schermo). Se si desidera maggior precisione è possibile imporre ai frames anche una dimensione fissa in pixel. Sempre dalla palette "Inspector" è possibile decidere se il nostro frame debba presentare le barre di scorrimento (la cui presenza è legata alla quantità di materiale da collocare dentro il frame stesso). PageMill salva la definizione del frame in un singolo file HTML. L'esempio di questa figura (una pagina divisa in due frames) è costituito da 3 files HTML, un file per la parte sinistra, uno per la destra ed un terzo per la posizione dei frames. Cercate di utilizzare i frames solo quando davvero necessario e comunque con moderazione, pagine con molti frames non sono molto pratiche da consultare.



I collegamenti nelle pagine che contengono frames richiedono una procedura diversa da quella descritta all'inizio per collegamenti tra pagine semplici.
In questa figura al clic sulla voce "istruzioni" nel frame indice (a sinistra), deve corrispondere una pagina nel frame di destra. Per ottenere questo collegamento si seleziona il testo "istruzioni" e nel campo "Link To" si scrive il nome del file HTML da collegare (nell'esempio "Istr.htm") e si preme "return". Si attiva così nell'angolo in basso a destra un'icona che rappresenta un bersaglio. Cliccando sul bersaglio sarà semplicissimo decidere dove vogliamo che la pagina venga visualizzata.


Con PageMill è molto facile realizzare tabelle direttamente sulla pagina.
La figura mostra un esempio di tabelle realizzate con PageMill. La figura seguente mostra i vari comandi per la formattazione delle tabelle. Per creare una tabella in sostanza si definisce il numero di colonne e di righe necessarie e si crea la tabella con lo strumento "Insert Table", poi si decidono dalla finestra "Inspector" gli attributi della tabella quali border, cell spacing, padding e dimensioni della tabella.
Nell'esempio della figura seguente alla tabella è stata imposta una dimensione fissa di 500 pixel con un bordo molto evidente (8). Sperimentate con questi valori per capire cosa potete fare, ovviamente prima di cambiare i valori assicuratevi di aver selezionato la tabella. Potete usare anche il comando "Join Cell" per unire più celle in una più grande.