Introduzione

Questo tutorial...

HTML Help Workshop è un programma Microsoft che viene utilizzato dai programmatori per creare le guide ai loro programmi (i files di help) nel formato ufficiale (.chm) di Windows.

TUTTE le guide (gli help) di Windows sono create con questo programma, che è distribuito con Visual Basic 6 ma è di libero utilizzo e può essere installato come programma a sé stante, senza alcuna modalità di registrazione.

In aggiunta a questa funzione "ufficiale", HTML Help Workshop può essere validamente utilizzato in ambito didattico per creare "ipertesti", anche molto complessi ed ricchi di materiali, in modo rapido ed afficace.

Un file di HTML Help Workshop si basa su un complesso di pagine web debitamente linkate tra di loro e le compila in un file unico, estremamente compatto e facilmente distribuibile senza alcuna operazione di installazione.

I vantaggi offerti da HTML Worhshop sostanzialmente sono questi:

1. Tutte le pagine dell'ipertesto sono raccolte e compilate in un unico file, con tutti i loro materiali.
2. Le immagini, i suoni e le musiche sono incorporati in questo file e non devono essere distribuiti a parte.
3. Non c'è bisogno di indicare la pagina iniziale (di default), quando si distribuisce il prodotto finito.
4. I pulsanti di navigazione possono essere nascosti, per creare delle interfaccia estremamente semplici, utilizzabili anche da bambini piccoli.
5. La finestra entro la quale viene visualizzato il prodotto finale può essere personalizzata nelle dimensioni, nella posizione e nella barra in alto.
6. Il tutto viene compresso in modo "robusto" in un file unico, autonomo e non danneggiabile nelle singole parti che lo compongono. Se si distribuiscono delle pagine .htm "sciolte" occorre sempre creare una nuova cartella rispettando i percorsi e se accidentalmente viene cancellato o modificato uno dei file presenti la navigazione non funziona più correttamente. Compilando il tutto con HTML Help Workshop, invece, si crea un eseguibile autonomo e compatto, creato con un grado elevatissimo di compressione.

Possiamo aqgiungere che l'utilizzo di questo programma è abbastanza semplice, per cui... passiamo a leggere l'introduzione.


    Introduzione

    Per creare "ipertesti" in formato Windows con il programma HTML Help Workshop bisogna partire da un complesso di pagine web realizzate in modo "tradizionale", includendo i necessari link per la navigazione tra le pagine, i suoni che necessitano nelle varie pagine, i filmati, le gif animate e tutti gli altri oggetti che servono.

    Per la costruzione delle pagine web ci si può servire ovviamente dei vari programmi in commercio: Front Page, DreamWeaver, Namo WebEditor...

    ATTENZIONE: le pagine vanno salvate con nomi SENZA SPAZI, altrimenti il programma HTML Help Workshop non le gestisce correttamente. Anche i nomi dei files con materiali grafici sonori devono essere costituiti da parole uniche, senza spazi vuoti al loro interno. Per cui:

    NO: indice generale.htm

    MA piuttosto: indice_generale.htm

    Quando si è terminato il lavoro di preparazione delle varie pagine, dopo avere controllato la piena funzionalità di tutti i link tra le pagine, si può passare alla Fase 1.

    Queste che seguono sono indicazioni di lavoro riservate a chi crea le pagine web con Namo WebEditor (un programma di semplice utilizzo e abbastanza fornito di vari esempi e materiali). Chi usa altri programmi per creare le pagine web può passare direttamente alla Fase 1.

    Namo WebEditor

    Quando si usa questo programma, in basso alla pagina vi sono tre linguette di scelta:

la prima è Modifica,

la seconda è Html

e la terza è Anteprima.

    Si lavora alla preparazione delle pagine sempre nella modalità Modifica; dopo aver fatto il lavoro si passa all'anteprima per analizzare se tutto fila liscio. Di norma, se si è alle prime armi, non si usa mai l'opzione html.

    Comunque sia, in html bisogna andare a fare un piccolo cambio:

    <title>Introduzione</title>;

    Tra le parole <title> e </title> va scritto il titolo della pagina che si sta creando. Questa parola di norma è sempre la prima frase della pagina; la cosa da fare è cambiarla mettendo il nome con cui salviamo la pagina; questo è un fatto tecnico: quando si va a costruire l'help, il programma usa questo nome e non il nome che abbiamo dato alla pagina creata.

    Una volta create tutte le pagine che ci interessano si passa ad aprire il programma HTML Workshop (vedi Fase 1).


Prima Parte

    Fase 1

    Dal menu Start / Programmi lanciamo il programma HTML Help Workshop. Una volta aperto, il programma si presenta con questa finestra:

    Cliccare su File Nuovo oppure usare l'icona corrispondente, appare la seguente finetra, scegliere Preject e cliccare su OK

    In questa schermata dobbiamo scegliare Avanti senza spuntare la casella.

    Ci viene chiesto di dare un nome al progetto che vogliamo fare, mettiamo il percorso dove abbiamo costruito la cartella con i nostri file web (es: c:\documenti\guida\tutorial e scegliamo avanti.

    In questa finestra dobbiamo spuntare la terza casella (HTML files) e cliccare su Avanti.

    Questo è un passaggio importante! Bisogna scegliere cliccando su Add... le pagine web che abbiamo creato; l'aggiunta va fatta cliccando ogni volta su Add... per ogni pagina, iniziando dalla prima e arrivando all'ultima. Quando si sono inserite tutte le pagine che interessano, cliccare il pulsante Avanti.

    ATTENZIONE: bisogna preoccuparsi di inserire TUTTE le pagine necessarie, ma non i materiali che fanno parte delle pagine (immagini, suoni, musiche), in quanto HTML Help Workshop provvederà a recuperare automaticamente tutti questi materiali ed a compattarli nell'unico file del prodotto finale.

    Più rapidamente, è possibile selezionare tutte le pagine da inserire, utilizzando il tasto SHIFT:

    cliccare sulla prima pagina da inserire,

    tenere premuto il tasto SHIFT,

    cliccare sull'ultima pagina da inserire.

    In questo modo si evidenziano TUTTE le pagine da inserire nel progetto HTML; a questo punto si può cliccare il pulsante Avanti.

    La schermata successiva ci fa scegliere unicamente Fine. Lo facciamo e passiamo alla Fase 2.


Seconda Parte

    Fase 2

    Siamo ora arrivati alla fase vera di preparazione dell'help.

    Clicchiamo il pulsante [image] ed entriamo nella finestra General.

    Nei riquadri delle finestra General bisogna indicare:

    nel primo riquadro (Title) il titolo che vogliamo dare al nostro lavoro finito

    nel secondo riquadro (Defaul File) il nome della pagine iniziale del nostro "ipertesto" (di solito è la pagina index.htm)

    Lasciamo in bianco il resto e passiano alla finestra Files: in questa finestra bisogna inserire il percorso dove vogliamo salvare il progetto che stiamo costruendo. Una volta fatto questo si clicca su OK. Passiamo alla Fase 3.


Terza Parte

    Fase 3

    Clicchiamo ora sul pulsante [image]. Questo pulsante ci consente di definire il nome e la tipologia della finestra in cui verrà visualizzato il nostro prodotto finito.

    Diamo un nome alla finestra: possiamo scrivere default e quindi cliccare su OK.

    Una volta inserito il nome della finestra si apre la finestra Window Types in cui si possono fare altre scelte riguardanti le caratteristiche di presentazione del nostro progetto finito.

    La prima cosa da fare è scrivere un titolo nella barra Title bar text: questo sarà il titolo che si leggerà sulla barra blu in alto nel nostro lavoro. Fatto questo NON bisogna cliccare su OK altrimenti la finestra si chiude e bisogna ricominciare.

    Cliccar e la linguetta Buttons: si apre una finestra che ci consente di scegliere quali pulsanti dovranno essere visualizzati nel nostro progetto finito. E' opportuno selezionare solo i pulsanti strettamente necessari, andando a spuntare le caselle. Scegliendo la casella Jump 1 si può inserire un pulsante personalizzato con il testo a scelta (es: autore, informazioni, ecc...). Ricordarsi sempre di NON cliccare su OK. Fatto questo scegliamo la linguettaPosition.

    La finestra Position ci consente di scegliere come sarà posizionata la finestra dell'help alla prima apertura: si possono mettere dei valori personali, tenendo sempre presente le proprietà dello schermo.

    Tenendo presente che la maggior parte dei monitor oggi sono impostati sulla risoluzione 800 x 600, scrivendo 800 e 600 nelle caselle Width e Height, il prodotto finito apparirà a tutto schermo.

    Per far sì che il nostro lavoro venga visualizzato a tutto schermo sul computer dei nostri utenti, tuttavia, il metodo più efficace è questo: clicchiamo sulla linguetta Style e quindi spuntiamo la voce Maximize:

    Clicchiamo ora sulla linguetta Navigation Pane.

    In questa finestra bisogna effettuare una scelta importante, perché spuntando la casella Windows with navigation pane, topic pane,and button bar, si crea nel nostro prodotto finale la finestra di navigazione laterale con l'indice e il sommario. E' una scelta non obbligata, anzi probabilmente da evitare se vogliamo dare al nostro lavoro finito una impronta di estrwma semplicità. Supponiamo ora che la scelta ci interessi, per cui spuntiamo la casella e andiamo avanti.

    Una volta fatta la scelta bisogna dare ulteriori indicazioni al programma: scegliamo Auto sync e clicchiamo la linguetta Files, senza premere OK.

    Nella finestra Files bisogna fare molta attenzione: qui si creano i percorsi per il sommario, l'indice, la pagina di inizio, la home page e il tasto personalizzato Jump1. TOC si riferisce al sommario (table of contents.hhc), l'indice (index.hhk) e le altre pagine che servono.

    Bisogna r icordarsi di mettere il percorso completo di estensione: l'estensione per il sommario è .hhc, per l'indice .hhk, per le altre pagine è .htm.

    A questo punto possiamo premere il pulsante OK: passiamo alla Fase 4.

    A questo punto si può cliccare sul tasto OK. Si ritorna alla finestra generale. Come potete notare si sono inserite due righe centrali: [WINDOWS]; default="Prova di Help". Per cambiare qualche cosa basta cliccare due volte su default.


Quarta Parte

    Fase 4

    Ora passiamo a costruire il sommario del nostro lavoro finito. Scegliamo dalla finestra la linguetta Contents.

    Il pulsante attivo deve essere Create a new contents file. Clicchiamo su OK.

    Ci s i chiede di salvare il file Table of Contents (Sommario). Accettiamo il nome consigliato; questo può ovviamente essere cambiato: l'importante è ricordare di linkarlo in modo corretto nella finestra Windows types che abbiamo visto prima. Salviamo cliccando il pulsante Salva.

    Siamo nella finestra dove possiamo costruire il nostro Sommario. Cominciamo.

    Clicchiamo sull'icona cartella, che serve a costruire la cartella con Nome (a scelta: es: Sommario, Libro 1, ecc...). Vediamo che si apre un'altra finestra di scelta.

    Nel box di testo Entry title dovete inserire il nome che avrà la cartella: Sommario, Introduzione, ecc. dopo aver fatto questo bisogna cliccare sul tasto Add... per inserire la pagina web che è riferita al nome dato.

    Qui avviene la scelta, le pagine preparate le avete tutte nell'elenco, scegliete quella appropriata.

    Abbiamo creato la cartella Sommario, ora si può cambiare l'icona della cartella. Cliccate, con il nome Sommario evidenziato, sul segno della matita. Appare la finestra:

    Scegliete la linguetta Advanced e si avrà la seguente finestra:

    Andare alla casella "Image index" e con le freccine scegliamo l'icona che più piace o una costruita da noi. Dopo aver fatto questo, premiamo il tasto OK e passiamo alla Fase 5.


Quinta Parte

    Fase 5

    Scegliamo la linguetta Index ed avremo:

    Scegliere Create a new index file e premere OK.

    Il programma ci chiederà di inserire il nome dell'indice, conviene lasciare quello consigliato, non ci sono problemi con altre pagine, l'estensione è diversa. Salviamo.

    Avremo la finestra dell'indice, clicchiamo sulla chiave e si aprirà una finestra di scelta:

    Nel box Keyword bisogna inserire il nome Indice o altro nome e poi premere il tasto Add.. aggiungere le varie pagine fino al completamento.

    Clicchiamo su OK, si ritorna alla pagina Idex:

    Con i tasti direzione sistemiamo l'ordine di comparsa e spostiamo le pagine di un passo verso destra. Fatto questo siamo quasi pronti per compilare il nostro progetto. Torniamo a Project e passiamo alla Fase 6.


Sesta Parte

    Fase 6

    Andiamo alla finestra Project:

    Clicchiamo 2 volte sulla scritta [WINDOWS]: si apre la finestra di Windows Types:

    Controlliamo in file i percorsi dei collegamenti e clicchiamo su OK, poi passiamo alla fase 7.


Settima Parte

    Fase 7

    Ora, se tutto è stato fatto bene, si può passare fase finale, cioè alla compilazione del nostro progetto. Andare alla finestra principale:

    Cliccare sul tasto [image] e far compilare l'ipertesto.

    A compilazione finita, si può cliccare il tasto [image] per vedere l'anteprima del nostro lavoro.

    Il file, con estensione .chm (compiled help microsoft) si trova nel percorso che avete scelto, altrimenti lo trovate in c:\ ed è contraddistinto da una icona con un punto di domanda di colore giallo.

    Questo file si avvia con un semplice doppio clic del mouse, non è necessaria alcuna operazione di installazione, occupa poco spazio ed è facilmente trasferibile su floppy disk, senza bisogno di trasferire pagine web, immagini, ecc.


Introduzione

Decompilare un progetto finito

Il programma HTML Help Workshop consente anche di DECOMPILARE un prodotto finito.

La decompilazione è una operazione semplicissima che consente di scomporre un prodotto finito in tutti gli elementi che lo compongono (pagine web, immagini, suoni, musiche, animazioni). In questo modo è possibile accedere a queste risosrse, modificarle, utilizzarle in altri progetti, oppure semplicemente studiare la struttura di un prodotto finito per utilizzare per creare nuovi progetti.

Clicchiamo sul menu File / Decompile...

Si pare la finestra Decompile .CHM file, con due box di testo: nel primo box bisogna indicare il percorso e la cartella in cui verranno salvati tutti i materiali del progetto che si vuole decompilare; nel secondo box di testo bisogna indicare la collocazione del progetto da decompilare (questo deve essere un file con estensione .CHM).

Tutto qua. Dopo queste semplici operazioni clicchiamo il pulsante OK: in pochi secondi troveremo tutti i materiali del progetto originario scompattati e disponibili, nella cartella che avremo indicato.


Autore

    Crediti

    Questo tutorial è stato realizzato da Edoardo Tortora, insegnante di Matematica e Scienze presso la Scuola Media "Andrea d'Isernia" (Isernia).

    Hanno collaborato Claudio Gucchierato, Pierluigi Farri e lo staff di vbscuola.it

    Il prodotto è di libero uso e di libera distribuzione, purché non a fini commerciali.

Per contattare l'autore:

E-mail geredo@tin.it

Sito web: www.smsandreadisernia.gozzilla.it

Versione 1, Dicembre 2002.