Lezione 5.1
Creare pagine HTML-5 con BlueGriffon     HTML-5

BlueGriffon è un editor HTML, WYSIWYG, open source, compatibile con gli standard HTML-4, HTML-5, XHTML 1.0 e XHTML5. Scritto da Daniel Glazman, lo sviluppatore principale di Nvu. BlueGriffon strizza l'occhio agli utenti di Nvu e KompoZer interessati a sperimentare le potenzialità di HTML-5 senza allontanarsi troppo dal loro modo di lavoro abituale.

Dal punto di vista tecnico BlueGriffon si basa su Gecko 2.0, la layout-engine di Mozilla FireFox 4 e XULRunner. BlueGriffon supporta pertanto pienamente gli standard W3C: HTML-4, HTML-5, XHTML 1.0 e XHTML5, CSS 2.1 e tutte le funzionalità di CSS 3 già introdotte in Gecko. BlueGriffon integra inoltre un editor di immagini vettoriali SVG, basato su XUL, che era stato originariamente distribuito come add-on per FireFox e che è stato successivamente adattato.

Per quanto concerne gli aspetti legali, BlueGriffon viene rilasciato sotto una tripla licenza open source: Mozilla Public License 1.1, GNU General Public License v2 e GNU Lesser General Public License.

La versione stabile del programma Midas 1.2.1, rilasciata 30 settembre 2011, è disponibile in tre versioni principali: Microsoft Windows, Mac OS X, e Linux (TAR o pacchetto di installazione per Ubuntu o Fedora). A queste si aggiunge il pacchetto di installazione per OS-2 BlueGriffon 1.1.1 for OS/2 realizzato da Dave Yeo. Sono inoltre disponibili pacchetti di supporto per le lingue e vari add-on (tra cui il dizionario italiano).

L'impiego di BlueGriffon è chiaramente molto appetibile per gli sviluppatori abituati a Nvu o KompoZer. Data la similitudine delle interfacce utente lo sforzo richiesto per passare da Nvu o KompoZer a BlueGriffon è molto ridotto. Si potrebbe cominciare magari a prendere confidenza con il nuovo programma adoperandolo per editare dei vecchi file in formato HTML-4, per poi passare a sperimentare le potenzialità di HTML-5.

Il "giallo" delle icone scomparse

A dispetto degli sforzi per mantenere il più possibile inalterata l'organizzazione dell'interfaccia grafica si registrano alcuni importanti cambiamenti come la scomparsa delle icone che consentivano la selezione del colore dei caratteri, dello sfondo nonché di ingrandire o ridurre la dimensioni dei caratteri, dovuta al fatto che i suddetti tag (basefont, big, center, font, eccetera) non sono più supportati dallo standard HTML-5; pertanto anche se erano tanto comode bisognerà abituarsi a farne a meno cambiando il nostro modo di lavorare.

Per quanto concerne le novità, nella barra delle icone spicca la presenza di vari nuovi elementi, tra i quali:

  • Il DOM explorer.
  • Un nuovo strumento per l'impostazione degli stili CSS.
  • Un editor grafico per la creazione e la modifica di immagini vettoriali in formato SVG.
  • Uno strumento per l'inserzione e/o la modifica dei filmati.
  • Uno strumento per l'inserzione e/o la modifica dei file audio.
  • Uno strumento per l'inserzione e/o la modifica dei moduli.

Ai suddetti si aggiungono alcune icone associate ad applicazioni add-on acquistabili con una spesa modesta.

Installiamo BlueGriffon sul nostro computer

Volendo installare BlueGriffon sul nostro computer bisogna prima di tutto scaricare dal sito www.bluegriffon.org il file di installazione corrispondente al sistema operativo utilizzato e gli add-on supplementari, in particolare, il pacchetto di supporto per la lingua italiana "langpack-it-IT@bluegriffon.org.xpi" e il dizionario italiano "it.dict.xpi". Per comodità si consiglia di salvare i tre file nella stessa directory (ad esempio Desktop).


Installazione sotto Windows


Volendo installare BlueGriffon sotto Windows (ufficialmente sono supportati XP e 7) basta cliccare sul file setup-bluegriffon.exe e seguire le istruzioni, scegliendo la lingua di installazione (ad esempio: italiano) e quindi la cartella in cui si desidera che il programma sia installato (ad esempio: C:\Programmi\BlueGriffon). Al termine quando vi sarà chiesto se desiderate creare un icona sul desktop, rispondete di sì; dopodiché se avete lasciato barrata l'apposita casella il programma si avvierà automaticamente dandovi la possibilità di completare la configurazione installando i pacchetti supplementari.

Per installare gli add-on selezionate il menu "Strumenti" e quindi la voce "Add-ons".

Cliccate sull'icona: Lingue e poi sul simbolo dell'ingranaggio che si trova a destra immediatamente sotto la barra del titolo (barra azzurra). Si aprirà un pop-up menu. Selezionate: "Installa componente aggiuntivo da file ..."

Selezionate la directory in cui avete preventivamente riposto i file di installazione e cliccate su langpack-it-IT@bluegriffon.org.xpi. Attendete il termine del conteggio alla rovescia di tre secondi e cliccate su "Installa adesso". Il file verrà installato al prossimo avvio di BlueGriffon.

Ripetete la stessa sequenza di passi installando il dizionario (file: "it.dict.xpi")e riavviate cliccando sulla "X".

Riavviando il programma l'add-on dovrebbe risultare registrato nella lista che viene visualizzata cliccando su "Strumenti", "Add-ons" e quindi su "Aggiornamenti recenti".


Installazione sotto Linux


Volendo installare BlueGriffon sotto Linux si hanno due alternative: ricorrere ai file di installazione (per Ubuntu o Fedora) oppure al TAR. Nel primo caso la procedura di installazione è molto simile a quella sotto Windows; basta cliccare sul file di installazione e seguire le istruzioni rispondendo alle domande. Nel secondo caso, aperto il pacchetto compresso (tar.bz2) si copierà la directory BlueGriffon ivi contenuta in un punto conveniente della nostra home directory; dopodiché per avviare il programma basterà cliccare sul file di shell "bluegriffon" ivi contenuto.

Volendo è possibile semplificare la procedura di avvio di BlueGriffon creando un link al file di shell ~/BlueGriffon/bluegriffon sul desktop. In tal modo per avviare BlueGriffon basterà cliccare sull'icona corrispondente al link.

La procedura di l'installazione basata sul TAR, è un po' più complicata della precedente poiché richiede di sapere cosa siano i file TAR (o meglio tar.bz2) e come si aprono, ma ha il vantaggio di essere utilizzabile ovunque, rendendo BlueGriffon compatibile con quasi ogni distribuzione recente. Usando il TAR è possibile ad esempio installare BlueGriffon sotto Mageia-1.

Installato l'eseguibile si consiglia di avviare il programma per completare la configurazione installando i pacchetti supplementari.

Per installare gli add-on selezionate il menu "Strumenti" e quindi la voce "Add-ons".

Cliccate sull'icona: Lingue e poi sul simbolo degli attrezzi incrociati che si trova a destra immediatamente sotto la barra del titolo (barra azzurra). Si aprirà un pop-up menu. Selezionate: "Installa componente aggiuntivo da file ..."

Selezionate la directory in cui avete preventivamente riposto i file di installazione e cliccate su langpack-it-IT@bluegriffon.org.xpi. Attendete il termine del conteggio alla rovescia di tre secondi e cliccate su "Installa adesso". Il file verrà installato al prossimo avvio di BlueGriffon.

Ripetete la stessa sequenza di passi installando il dizionario (file: "it.dict.xpi")e riavviate cliccando sulla "X".

Riavviando il programma l'add-on dovrebbe risultare registrato nella lista che viene visualizzata cliccando su "Strumenti", "Add-ons" e quindi su "Aggiornamenti recenti".

NOTA: nella versione Linux, indipendentemente dalla distribuzione il supporto per l'italiano al momento sembrerebbe non funzionare, nel senso che anche dopo l'installazione del supporto per le lingue continuano ad apparire i menu in inglese. Il dizionario italiano invece viene installato correttamente.


Selezione del dizionario italiano


Indipendentemente dal sistema operativo (Windows o Linux) per attivare il dizionario italiano bisogna innanzitutto creare o aprire un documento qualsiasi.

Aprite quindi il menu "Modifica" e poi cliccare su "Correttore Ortografico (S)". Quando appare la corrispondente finestra di dialogo basterà cliccare sulla freccia in giù della voce lingua e selezionare "it_IT". Nel caso in cui il correttore non si attivasse uscite e riavviate il programma.


Selezione delle preferenze


Per completare l'installazione non resta che dare uno sguardo alle preferenze. Aprite il menu Tools e cliccate su Preferences.

Suggerisco di disabilitare l'opzione Restore last session's tabs onde evitare che BlueGriffon riapra ogni volta che viene riavviato i file editati l'ultima volta.

Se volete evitare di essere costretti a reinserire tutte le volte il vostro nome come autore delle pagine HTML impostatelo una volta per tutte registrandovi come Author nel tab Documents.




Creiamo una pagina HTML con BlueGriffon.


Vi sono almeno tre modi di creare una pagina HTML utilizzando BlueGriffon: si può aprire un file HTML vuoto creato esternamente (ad esempio con Risorse del Computer), si può cliccare sulla voce "Nuovo" del menu "File" oppure si può ricorrere alla voce "Nuovo autocomposizione" sempre del menu file. In tutti e tre i casi BlueGriffon aprirà una pagina vuota tuttavia il codice HTML inserito nei tre casi sarà notevolmente diverso.
Nel primo caso BlueGriffon introdurrà i tag principali di un file in formato HTML-5

<html>
  <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
  </body>
</html>

omettendo però <!DOCTYPE html>.

Cliccando sulla voce "Nuovo" del menu "File" BlueGriffon creerà un documento vuoto in formato XHTML-5.

Nel terzo caso BlueGriffon consentirà invece di scegliere il formato del documento che si desidera creare fra le quattro possibilità HTML-4, XHTML-1, HTML-5 e XHTML-5. Qualunque sia il formato prescelto BlueGriffon inserirà il riferimento alle librerie Yui di Yahoo!

Volendo cominciare a fare esperimenti con un codice HTML-5 "pulito" bisognerà prima di tutto editare il file vuoto eliminando i riferimenti a Yui per poi, eventualmente, ripristinarli in un secondo momento.

L'editor di immagini SVG

BlueGriffon si distingue dai suoi predecessori (Nvu e KompoZer) per l'attenzione dedicata agli aspetti legati alla multimedialità, uno dei temi più caldi di HTML-5. In questo contesto ricoprono una particolare rilevanza le immagini vettoriali che in molte applicazioni si rivelano assai più versatili ed economiche in termini di risorse delle bitmap. Data la delicatezza e la complessità dell'applicazione, anziché sviluppare del codice originale gli sviluppatori di BlueGriffon hanno preferito integrare del codice già esistente, testato e funzionante, cioè  l'editor di immagini svg-edit. Si noti che per tutte le altre funzionalità gli sviluppatori sono partiti da zero scrivendo del codice originale tagliando i ponti con programmi precedenti Nvu e KompoZer. Il tool svg-edt è un programma in JavaScript che è stato realizzato nell'ambito di un progetto open source indipendente, ed è disponibile sotto forma di plug-in per tutti i principali browser (Firefox 3.6+, Chrome 6+, Safari 5+ e Opera 11.10+). Per ulteriori informazioni si rimanda al sito ufficiale http://code.google.com/p/svg-edit/.

A titolo di esempio delle potenzialità dell'editor SVG integrato, riportiamo l'immagine del logo di BlueGriffon ricostruita in forma vettoriale  utilizzando svg-edt.







Lavori in corso