Le pagine HTML (Tratto dal corso WEB dic. ‘97 di Luigi Muzii)

Le pagine HTMLLe pagine HTML

(Tratto dal corso WEB dic. ‘97 di Luigi Muzii)(Tratto dal corso WEB dic. ‘97 di Luigi Muzii)


(Tratto dal corso WEB dic. ‘97 di Luigi Muzii)(Tratto dal corso WEB dic. ‘97 di Luigi Muzii)

© Sergio Gherdol ‘99 © Sergio Gherdol ‘99 (Tratto dal corso WEB dicembre ‘97 di Luigi Muzii)


Gli ipertesti e la Gli ipertesti e la documentazione elettronicadocumentazione elettronica

Gli ipertesti e la Gli ipertesti e la documentazione elettronicadocumentazione elettronica

Un autore di pagine è tanto più bravo quanto più sa porsi in un’ottica “di servizio”, ovvero sa allargare il campo delle informazioni e favorire libertà di

navigazione.

Nel progettare e realizzare un ipertesto, indicare sempre un percorso di lettura indipendentemente dalla struttura, palese o meno, del documento in modo da consentire al lettore di individuarne l’ordine logico, tenendo traccia della sequenza degli argomenti esaminati, anche se, pur aiutando il lettore, soprattutto quello meno esperto, costituirebbe una prevalenza dell’autore

dell’ipertesto.



Le unità di informazioneLe unità di informazioneLe unità di informazioneLe unità di informazione

La mente umana lavora meglio con modeste quantita’ di informazioni distinte!

Queste unità di informazione in sostanza sono componenti di un documento che

rispondono appieno al quesito dell’utente; si leggono nella loro interezza; sono accessibili singolarmente; sono percepite come un tutt’uno.

Da ricerche condotte nel campo della comunicazione elettronica, un utilizzatore alla ricerca di informazioni su un determinato argomento cesserà di cercarle, anche senza averle trovate, dopo aver esaminato tre unità di informazione.



Le unità di informazioneLe unità di informazioneLe unità di informazioneLe unità di informazione predisporre unità distinte e separate; evitare le prolissità; arricchire il più possibile l’unità inserendo i rimandi alle altre unità

correlate; corredare l’unità di espliciti percorsi e strumenti di navigazione; non vincolarsi a un determinato ordine di lettura. limitare la lunghezza delle pagine: la lettura di un testo a video è

circa il 25% più lenta rispetto alla carta e una pagina di ipertesto dovrebbe perciò essere del 50% più breve rispetto a un analogo documento cartaceo .

associare a ogni unità di informazione una semplice illustrazione dalla quale sia possibile dedurre il modo in cui essa e tutto il documento sono strutturati;

assegnare a ogni unità di informazione un titolo e un nome distinti e univoci per evitare che scegliendo tra un elenco di titoli, l’utente possa confondersi tra unità di informazione aventi titoli e nomi simili;



Principi fondamentaliPrincipi fondamentaliPrincipi fondamentaliPrincipi fondamentaliIl supporto utilizzato per un documento di per sé non ne garantisce il successo o il fallimento.

Il principale difetto di molti documenti elettronici è invece quello di riflettere un’impostazione tipicamente cartacea come se fosse stato progettato per essere diffuso su carta invece che consultato a video.

la lettura di un testo a video è decisamente poco confortevole per via delle ridotte dimensioni in cui appare il documento, della minore risoluzione o dei riflessi causati dallo schermo per cui è sconsigliabile per documenti che richiedano una lettura attenta;

la lettura di un testo a video è circa il 25% più lenta rispetto alla carta per cui il contenuto della pagina di un ipertesto dovrebbe essere inferiore del 50% rispetto a un omologo documento cartaceo;

gli utenti tendono in generale a non scorrere le pagine e a valutare la qualità di un sito dalle informazioni che appaiono subito sulla parte centrale dello schermo all’atto del caricamento, per cui dalla percezione di queste informazioni dipende anche la possibilità che si addentrino nella lettura delle altre;

studi recenti sulle reazioni degli utenti ai tempi di risposta dei sistemi informativi suggeriscono una soglia massima di accettabilità non superiore ai 20 secondi per servizi di particolare complessità, interesse e utilità e inferiore ai 5 per attività elaborative considerate di routine;

un documento elettronico è pur sempre qualcosa di intangibile e astratto, quasi “virtuale”, per cui urterà sempre con il generale atteggiamento di rifiuto dovuto alla necessità che impone di abbandonare vecchie e consolidate abitudini di consultazione.



Principi fondamentaliPrincipi fondamentaliPrincipi fondamentaliPrincipi fondamentali

Ricerche nel campo dell’interazione uomo-macchina hanno dimostrato che facilità e rapidità di reperimento delle informazioni determinano in massima parte il successo di un documento elettronico: gli utenti che non saranno in grado di trovare rapidamente e facilmente una risposta alle loro domande semplicemente lo rifiuteranno, indipendentemente dalla ricchezza con cui sarà loro offerto.

Perché un documento elettronico sia considerato fruibile, l’accessibilità alle informazioni contenute in esse deve essere almeno due volte più rapida ed efficace di una eventuale corrispondente versione cartacea.

Maggiori sono le dimensioni del documento migliore deve essere l’accessibilità alle informazioni che contiene.

Perché la ricerca di un documento o di un argomento all’interno di un documento sia efficace occorre sapere con esattezza cosa si sta cercando ed essere in grado di esprimersi nei termini in cui il documento è organizzato. Inoltre è necessario esser certi che ciò che si sta cercando sia esattamente dove lo si sta cercando, e in questo caso conoscerne possibilmente anche il nome.

Tuttavia, se di un documento o di un’informazione si conoscono l’ubicazione e la descrizione con tutta probabilità essi non sono di alcuna utilità.



Organizzazione di un sito WebOrganizzazione di un sito WebOrganizzazione di un sito WebOrganizzazione di un sito WebOrdine e organizzazione sono gli elementi caratteristici di un buon sito, ma oltre che per gli utenti che vi accedono in consultazione, sono utili anche per chi lo gestisce. La gestione di un sito risulta infatti di molto facilitata dall’adozione di una struttura logica e coerente per i documenti e le directory in cui sono conservati.

utilizzare un file system gerarchico annidando le directory; isolare le directory contenenti script ; conservare tutti gli elementi grafici comuni nella stessa directory (Es. Image); predisporre altre directory per quegli elementi grafici pertinenti a documenti

specifici all’interno delle directory che contengono questi ultimi; per documenti lunghi e/o complessi, creare per ciascun documento una directory

riservata a contenere le varie pagine del documento e un’altra contenente i file grafici da utilizzare al loro interno.

Collocando gli elementi grafici comuni nella stessa directory si semplifica l’inserimento dei relativi rimandi degli appositi marcatori e si aumenta la velocità di composizione delle pagine che utilizzano questi elementi giacché si evita al browser di doverle scaricare ogni volta e di prelevarle invece dalla propria memoria temporanea (la cache).



Organizzazione di un sito WebOrganizzazione di un sito WebOrganizzazione di un sito WebOrganizzazione di un sito Web WebRoot

Immagini Sfondi Icone

PuntiElenco GIFAnimati

... Progetto1 (alias)

Immagini Progetto1 Progetto2 (alias)

Immagini Progetto2 Script (alias)

Script Progetto1 Script Progetto2

FtpRoot



ConsultazioneConsultazioneConsultazioneConsultazioneSe si desidera favorire un’eventuale consultazione off-line anche su macchine DOS, e permettere al browser di interpretare correttamente i rimandi, attribuire ai file nomi di 8 caratteri con estensione di 3 caratteri e limitare al massimo i rimandi esterni all’ambiente di consultazione principale per evitare il rischio di dover dipendere da altri per informazioni che potrebbero rendersi non più disponibili.Se si sviluppa su piattaforme DOS-Windows o Macintosh e si progetta il successivo trasferimento su piattaforma Unix, ricordare che il file system Unix distingue tra lettere maiuscole e lettere minuscole e che, per convenzione, in Unix, ai nomi delle directory viene assegnata l’iniziale maiuscola, mentre i nomi dei file sono scritti in minuscolo.

utilizzare la barra normale “/” non quella inversa “\”; utilizzare le estensioni appropriate; utilizzare solo i caratteri ASCII base (A-Z, 0-9, “_”, “-”); non utilizzare caratteri ANSI o caratteri speciali; non utilizzare il carattere maiuscolo per il testo: è di difficile lettura, è più lungo e nel

linguaggio di Internet significa gridare; non usare parole sottolineate che potrebbero sembrare rimandi ipertestuali; non utilizzare l’apostrofo o gli apici per l’accentazione: usare la relativa sequenza &; organizzare i titoli per livelli e con un ordine strutturale coerente; non utilizzare i marcatori di titolo per formattare il testo; indicare il set di caratteri per le impostazioni del browser (ISO 8859-1 Latin-1).



ProgettazioneProgettazioneProgettazioneProgettazione

non utilizzare colori scuri per lo sfondo delle pagine che renderebbero necessario cambiare anche il colore del testo perché non risulti illeggibile;

indicare il titolo del documento per non far comparire “UntitledUntitled” sulla zona superiore della finestra del browser o lo stesso titolo su decine di pagine;

indicare copyrightcopyright e nome dell’autore con collegamento all’eventuale indirizzo di posta elettronica;

inserire almeno un rimando alla home page in ogni file; predisporre una barra di navigazione con rinvii alla pagina di ingresso,

all’indice generale del documento, all’argomento precedente e a quello successivo e magari all’indice analitico, al glossario e a una guida di consultazione;

inserire la data dell’ultimo aggiornamento indicando il mese per esteso per evitare ambiguità.



Home pageHome pageHome pageHome page

La home page dovrebbe contenere i puntatori ai documenti presenti sul sito o i puntatori alle “pagine” che costituiscono gli elementi dei documenti complessi: volumi, sezioni, capitoli.

predisporre una mappa con la struttura ad albero del sito in modo da garantire la navigazione verticale e trasversale tra i vari documenti appartenenti logicamente a categorie omologhe;

dichiarare la versione di HTML utilizzata.



I coloriI coloriI coloriI colori

Attenzione all’uso dei colori per il testo e lo sfondo delle pagine:

i browser di prima e seconda generazione non prevedono l’uso del colore per il testo o per lo sfondo;

lo sfondo scuro costringe a modificare il colore del testo e può quindi creare problemi di leggibilità;

lo sfondo non viene stampato: se si usa un’immagine questa non apparirà in stampa;

il colore nero per lo sfondo, nel metalinguaggio del World Wide Web ha un significato particolare: i provider di tutto il mondo vi hanno fatto ricorso per protestare contro il CDA (Common Decency Act) che limitava la libertà di espressione in Rete.



I coloriI coloriI coloriI colori

Colore Nome Codiceesadecimale

Codice decimale

AQUA #00FFFF 255, 255, 14

BLACK #000000 0, 0, 0

BLUE #0000FF 0, 0, 255

FUCHSIA #FF00FF 255, 0, 255

GRAY #808080 128, 128, 128

GREEN #008000 0, 128, 0

LIME #00FF00 0, 255, 0

MAROON #800000 128, 0, 0

NAVY #000080 0, 0, 128

OLIVE #808000 128, 128, 0

PURPLE #800080 128, 0, 128

RED #FF0000 255, 0, 0

SILVER #C0C0C0 192, 192, 192

TEAL #008080 0, 128, 128

WHITE #FFFFFF 255, 255, 255



CopyrightCopyrightCopyrightCopyright

L’imitazione fa parte del processo di ricerca della propria voce (Raymond Carver).

prendere spunti da altre pagine Web catturare elementi

sfondi immagini statiche e animate testo codice HTML programmi e script

Non inserire elementi protetti da Non inserire elementi protetti da copyrightcopyright senza aver prima ottenuto senza aver prima ottenuto esplicita autorizzazione dal titolare del esplicita autorizzazione dal titolare del copyrightcopyright, citando sempre e , citando sempre e comunque la fonte di eventuali “prestiti”.comunque la fonte di eventuali “prestiti”.

Verificare preventivamente attentamente il materiale proveniente da Internet, da CD-ROM e floppy disk acquistati in edicola o ricevuti in omaggio dai fornitori.



Pagine HTML e documenti WordPagine HTML e documenti WordPagine HTML e documenti WordPagine HTML e documenti WordLe “pagine” HTML sono file ASCII che possono essere realizzati anche utilizzando Word e al cui interno possono essere inseriti anche oggetti grafici e multimediali.

Le “pagine” HTML devono essere

brevi semplici strutturate facilmente leggibili

Un primo livello di strutturazione si può ottenere redigendo i documenti utilizzando gli stili.

Le pagine HTML devono anche poter essere stampate.

Con Microsoft Office 95 e Microsoft Office 97 sono disponibili dei modelli che consentono di realizzare documenti HTML direttamente o tramite conversione; è anche disponibile un driver stampante per Windows 95 che consente di produrre documenti HTML a partire da qualunque formato tramite una semplice operazione di stampa; tuttavia è opportuno non limitarsi a trasformare semplicemente un è opportuno non limitarsi a trasformare semplicemente un documento Word in un documento HTMLdocumento Word in un documento HTML.



Modalità di lavoroModalità di lavoroModalità di lavoroModalità di lavoro

ognuno con il suo ambiente abituale (Notepad, FrontPage etc.)

una postazione di conversione e sviluppo per effettuare le conversioni in HTML, ritoccare e/o realizzare le immagini, realizzare gli script

editor HTML editor grafici ambienti di sviluppo



Microsoft Word 97Microsoft Word 97 Trasformazione di documenti Word in documenti HTMLTrasformazione di documenti Word in documenti HTML

Microsoft Word 97Microsoft Word 97 Trasformazione di documenti Word in documenti HTMLTrasformazione di documenti Word in documenti HTML

realizzare il documento Word da convertire facendo attenzione a non utilizzare elementi di formattazione estranei all’HTML quali:

testo bordatotesto bordato ombreggiatureombreggiature elementi grafici liberielementi grafici liberi rientri e tabulazionirientri e tabulazioni

copiare il contenuto del file da convertire; aprire un nuovo documento utilizzando il modello Pagina Web vuotaPagina Web vuota nella

cartella Pagine WebPagine Web; incollare il contenuto del file da convertire; riapplicare gli stili del modello propri dell’HTML agli elementi del documento

ai quali sono stati applicati stili propri di Word (p. es. Titolo1 H1 ecc.): non limitarsi a salvare semplicemente in formato HTMLnon limitarsi a salvare semplicemente in formato HTML;

utilizzare l’opzione ProprietàProprietà del menu FileFile per impostare gli elementi di intestazione.



ImmaginiImmaginiImmaginiImmagini

inserire solo componenti grafiche significative, poiché le immagini, per quanto piccole, sono sempre lente da caricare e difficili da creare;

associare un’immagine ad una funzione ed usare sempre le stesse immagini per le stesse funzioni per facilitarne la corretta interpretazione da parte dell’utente;

nel caso delle mappe sensibili, inserire una o più stringhe di testo sotto o sopra la mappa contenenti gli stessi rimandi presenti all’interno di essa; per evitare che qualora l’utente non abbia impostato il caricamento automatico delle immagini pur non visualizzando la mappa, la navigazione sia ugualmente possibile;

contenere dimensioni e risoluzione delle immagini e limitare il numero di colori;

assegnare sempre un nome ad ogni immagine tramite l’attributo ALTALT in modo che serva da riferimento per gli utenti che non desiderino visualizzare le immagini.



ImmaginiImmagini GIF o JPEG?GIF o JPEG?

ImmaginiImmagini GIF o JPEG?GIF o JPEG?

Il formato JPEG offre alta fedeltà di resa ed è l’ideale per le immagini di origine e qualità fotografica, ricche di colori o di toni di grigio (si tratta di un formato a 24 bit quindi a 16 milioni di colori); inoltre, se compresso, consente di produrre file di dimensioni anche molto ridotte, ma è “a perdita di informazioni” ed è soggetto ad alonatura.

Il formato GIF, invece, è più adatto ad immagini povere di colori e di toni (ne prevede un massimo di 256), ma se i colori sono netti e precisi, la compressione operata nel salvataggio può rivelarsi migliore.

In generale, comunque, il rapporto tra le dimensioni originali di un file in formato GIF e di uno in formato JPEG contenenti la stessa immagine è di quattro a uno. Quindi, nella realizzazione di immagini da inserire in documenti HTML ricordarsi sempre di:

ridurre le dimensioni dell’immagineridurre le dimensioni dell’immagine: a parità di altri fattori, dimezzando la grandezza dell’immagine le dimensioni del relativo file si ridurranno a un quarto;

ridurre il numero di coloriridurre il numero di colori: anche se il formato GIF prevede fino a 256 colori, riducendoli a 16 si riducono della metà le dimensioni del file corrispondente.



ImmaginiImmagini Conversione da GIF a JPEGConversione da GIF a JPEG

ImmaginiImmagini Conversione da GIF a JPEGConversione da GIF a JPEG

limitari a convertire immagini di grandi dimensioni e di qualità fotografica che offrono sensibili possibilità di compressione (evitando immagini GIF 100 Kbyte);

eliminare i bordi dell’immagine: sono inutili, “costano” diversi byte di file JPEG e possono tradursi in bordi “fantasma” a scapito della velocità e della qualità di visualizzazione;

prima di cancellare l’immagine GIF originale fare una prova di visualizzazione con l’immagine JPEG prodotta per procedere, se necessario, a un nuovo tentativo di conversione;

prima di cancellare l’immagine GIF originale confrontarne la dimensione in byte con quella dell’immagine JPEG prodotta per verificare la convenienza della conversione.



Immagini animateImmagini animateImmagini animateImmagini animate

Il formato GIF89a è multifotogramma, vale a dire che può contenere più di un blocco di dati che un visualizzatore può mostrare in sequenza; ogni blocco è associato a uno o più parametri di controllo, compreso un intervallo di visualizzazione in modo da determinare la velocità della sequenza, o di aggiornamento dell’immagine.

Per realizzare un’immagine GIF animata è necessario innanzitutto produrre le immagini di ogni singolo elemento della sequenza avendo cura di assegnare loro le stesse dimensioni e, possibilmente, gli stessi colori in modo da evitare sfarfallamenti, quindi combinarle in un unico file utilizzando un apposito editor.

Le immagini GIF animate possono essere visualizzate solo da Netscape Navigator 2.0 e successivi e da Microsoft Internet Explorer 3.0 e successivi.

Ricordarsi di utilizzare come prima immagine della sequenza un’immagine Ricordarsi di utilizzare come prima immagine della sequenza un’immagine che sia significativa anche se statica.che sia significativa anche se statica.



I frameI frameI frameI frameI frame consentono di suddividere un documento HTML in più pagine da scorrere anche separatamente, quindi di presentare le informazioni in modo più flessibile, gradevole ed efficace. A ciascun frame è possibile:

assegnare un URL separato in modo che da esso sia possibile passare ad altre informazioni in un altro frame sulla stessa pagina o su un’altra pagina;

assegnare un nome, per fare in modo che vi si possa puntare da altri URL; fare in modo che la dimensione di un frame cambi automaticamente al

modificarsi delle dimensioni della finestra di visualizzazione oppure che resti fissa.

L’uso dei frame è particolarmente indicato per visualizzare elementi che si desidera far apparire in tutte le pagine, come le barre di navigazione, le informazioni sul copyright o testo ed elementi grafici ricorrenti. O ancora per contenere gli indici generali dai quali sia possibile accedere a tutti gli elementi correlati da visualizzare nel frame adiacente.

Tuttavia i frame possono essere stampati solo singolarmente e riducono l’area dello schermo a disposizione. Inoltre il comportamento dei browser che li supportano non è omogeneo.



Fogli di stileFogli di stileGeneralitàGeneralità

Fogli di stileFogli di stileGeneralitàGeneralità

Per stile si intende un gruppo di istruzioni di formattazione archiviato con un certo nome che consente di assegnare una struttura predefinita a un documento e di apportare modifiche al suo aspetto. Gli stili permettono di:

impostare i margini, la spaziatura e la posizione degli elementi omologhi di un documento

impostare il colore, il tipo e le dimensioni dei caratteri definire il documento in base agli oggetti contenuti in esso limitare il numero di marcatori all’interno dei documenti HTML impostare più attributi per ciascun oggetto e definire così delle classi di testo definire la struttura logica del documento

Una volta assegnata l’impostazione generale di uno stile o di una tipologia di documenti, cambiando il contenuto di uno stile o del foglio di stile all’interno del quale è stato definito, si riformattano tutti i paragrafi con quello stile su tutti i documenti associati.



JavaScript e VBScriptJavaScript e VBScriptJavaScript e VBScriptJavaScript e VBScript

JavaScript è un linguaggio multipiattaforma di scripting, cioè interpretato direttamente dal browser, sviluppato da Netscape per il Navigator versione 2.0 e successive.

Microsoft ha sviluppato un proprio “dialetto” compreso soltanto da Internet Explorer.

VBScript ha le stesse funzionalità del JavaScript con un linguaggio VB-like utilizzabile solamente in ambiente Microsoft.

Sono linguaggi di programmazione ad oggetti che permettono l’inserimento di script direttamente all’interno di pagine HTML e che possono rivelarsi particolarmente utile per il controllo dei dati o, tipicamente, per gestire eventi dinamici quali quelli associati alla pressione di un pulsante.

L’applicazione più tipica di JavaScript è il controllo dei dati al termine del riempimento di una scheda (form), ma il suo impiego può essere esteso alla realizzazione di vere e proprie elaborazioni.



JavaScript non è JavaJavaScript non è JavaJavaScript non è JavaJavaScript non è Java

Java è un linguaggio di programmazione ad oggetti multipiattaforma derivato dal C e sviluppato da Sun per gestire in origine piccoli dispositivi elettronici.

Le applet JAVA vengono eseguite localmente all’interno di una macchina virtuale (JAVA Virtual Machine) integrata con il browser.

La principale caratteristica di JAVA è quella di non usare codice binario ma un codice di livello intermedio con estensione .class.class detto bytecode costituito da un insieme di istruzioni lunghe un byte.

Con le applet JAVA, pur non potendo lavorare con il file system locale o accedere alle risorse di sistema, poiché il bytecode dispone di una semantica molto più ampia di quella prevista dal linguaggio stesso, scrivendo codice direttamente in bytecode, è possibile superare i controlli eseguiti dal modulo runtime della JAVA Virtual Machine.

Installando una classe nella directory contenente le classi predefinite, la JAVA Virtual Machine le considera alla pari delle proprie e non le controlla.



ActiveX - OCX - DLLActiveX - OCX - DLLActiveX - OCX - DLLActiveX - OCX - DLL

Piattaforma di sviluppo proposta da Microsoft basata sul modello COM (Component Object Module) e sulla tecnologia OLE che utilizza moduli funzionali pronti all’uso.

Il principio alla base della diffusione dei controlli ActiveX è quello di concedere loro la massima libertà operativa pur prevedendo un meccanismo di autenticazione basato su certificati software che ne attestano la provenienza e di lasciare all’utente la responsabilità di decidere se ritenerli degni di fiducia e permetterne lo scaricamento e la successiva esecuzione.

Per esempio dalla versione 5 di VB si possono costruire propri controlli OCX e librerie dinamiche DLL da usare in ambiente WEB:

questi oggetti esterni devono pero’ esser registrati nel registro del sistema Windows (Regsvr32.exe per Windows 95) prima di poter esser utilizzati.

Le pagine HTML (Tratto dal corso WEB dic. ‘97 di Luigi Muzii)

Documents

Transcript of Le pagine HTML (Tratto dal corso WEB dic. ‘97 di Luigi Muzii)