Introduzione ad HTML-5 con BlueGriffon 1.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 abituale modo di lavorare.

Dal punto di vista tecnico BlueGriffon si basa su Gecko 2.0, la layout-engine di Mozilla FireFox 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 SVG-Edit, un editor di immagini vettoriali SVG, basato su XUL, originariamente distribuito come add-on per FireFox che è stato opportunamente dattato per essere integrato nell'ambiente di sviluppo.

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.

L'ultima versione stabile del programma v 1.5.1 "Perluète Culbutée" rilasciata il 30 aprile 2012, è 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 (rilasciata il 14 giugno 2011).

Sono inoltre disponibili pacchetti di supporto per le lingue e vari add-on (tra cui il dizionario italiano). 

0.1 - Per gli utenti di KompoZer

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.

1 - 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).

NOTA: Installazione di BlueGriffon v 1.5.1 "Perluète Culbutée"

Secondo gli sviluppatori prima di procedere con l'installazione dell'ultima versione di BlueGriffon bisogna cancellare il proprio profilo di utente di BlueGriffon e poi reinstallare gli add-ons.

Avendo incontrato qualche difficoltà nell'installazione di BlueGriffon 1.5.1 invece di cancellare il vostro profilo vi consiglio di  cambiargli nome nel caso in cui l'installazione non dovesse andare a buon fine. Stesso discorso per la directory C:\Programmi\BlueGriffon (o qualcosa del genere a seconda della versione di Windows che state utilizzando) contenente gli eseguibili.

1.1 - 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.

NOTA: nelle ultime versioni di BlueGriffon per Windows purtroppo sono state introdotte delle dipendenze da librerie esterne. Se al termine dell'installazione il programma non funzionasse gli sviluppatori consigliano di provare ad installare Microsoft Visual C++ 2008 SP1 Redistributable Package (x86).

N.d.A. per quanto mi concerne, installando BlueGriffon 1.4.1 il programma ha cominciato a funzionare dopo l'installazione dell'ultima versione di LibreOffice ma forse è stato un caso!

1.1.1 - Installazione degli add-on e del dizionario italiano

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".

1.2 - 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 (usando i TAR per Fedora).

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.

1.2.1 - 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.

2 - 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.

3 - L'editor di immagini SVG

HTML-5 si distingue dai suoi predecessori per l'attenzione dedicata agli aspetti legati alla multimedialità ed in particolare alle immagini vettoriali; queste ultime, grazie alla loro parsimonia in termini  di risorse computazionali, sono il fiore all'occhiello di HTML-5, poiché consentono di integrare nelle pagine HTML-5 degli effetti grafici molto sofisticati senza sovraccaricare l'elaboratore e la linea di comunicazione.

Poiché le tematiche concernenti lo sviluppo di un un programma di grafica vettoriale sono molto differenti dalla manipolazione di documenti in formato ipertestuale gli sviluppatori di BlueGriffon hanno preferito integrare del codice già esistente, testato e funzionante:  l'editor di immagini SVG-edit. Si noti che questa decisione costituisce un'eccezione poiché per tutte le altre funzionalità gli sviluppatori di BlueGriffon sono partiti da zero, tagliando i ponti con i precedenti programmi Nvu e KompoZer.

Ma vediamo brevemente le caratteristiche di SVG-edit: si tratta di un editor di immagini in formato scalable vector graphic (SVG), realizzato in JavaScript, in modo da poter essere sempre presente a fianco dei creatori di siti Web quando ne hanno maggiormente bisogno, ossia quando occorre editare un immagine SVG lavorando in linea.

SVG-edit pur essendo nato come programma open-source indipendente è stato adattato in modo da poter essere integrato all'interno di BlueGriffon stabilendo un legame sinergico fra i due ambienti di lavoro. Per saperne di più si rimanda a  A short introduction to SVG-edit che contiene una presentazione esaustiva delle funzionalità di 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.