*Linux Guide

Fare Web - Bluefish

*

Premessa

Uno degli strumenti disponibili per la costruzione, per il controllo, per la correzione delle pagine web, disponibili per ambiente Linux è Bluefish.
Bluefish è un editor html con interfaccia grafica, ma senza capacità WYSIWYG, che consente un controllo totale del codice, non solo html, ma anche del codice CSS e di altri linguaggi legati al mondo del web, come il PHP ed altri.
Provvisto di numerosi strumenti e di facilitazioni per la corretta realizzazione del codice html/css, è uno strumento che presuppone la conoscenza delle regole e della sintassi dei linguaggi html e css, da parte del suo utilizzatore. Bluefish non è uno strumento per web designer improvvisati, o privi delle adeguate conoscenze tecniche.
Nella illustrazione dello strumento, daremo per scontata la lettura e l'apprendimento delle parti riguardanti i linguaggi di cui sopra.

Installazione e Configurazione

Installare Bluefish è alquanto facile in Linux Mint, ma anche in Ubuntu, openSUSE, Kororaa, Fedora, Arch Linux, ecc. Tratteremo della installazione in Linux Mint/Ubuntu e può avvenire da Terminale o dal Software Manager. Il metodo più semplice è impiegare il Terminale. In esso vanno incollati i seguenti comandi;

sudo apt-get update

e premete INVIO. Questo per ricaricare l'elenco dei pacchetti e le informazioni relative.

sudo apt-get install bluefish

e premete INVIO. Questo per installare il programma.
Il programma verrà collocato automaticamente nella categoria "Programmazione" del menù principale di Linux Mint.

Particolarmente importante è l'installazione abbinata di Tidy, per il controllo della sintassi e di aspell-it per il controllo della ortografia. Per la loro installazione basta incollare questo comando nel Terminale:

sudo apt-get install tidy aspell-it

e premere INVIO.
Naturalmente verranno installati altri pacchetti necessari ai programmi per lavorare al meglio, le cosiddette "dipendenze".

Interfaccia grafica

L'interfaccia grafica di Bluefish ha una certa complessità e quello che viene mostrato non è tutto quello che il programma può offrire. Vediamo quindi di identificare le varie aree della sua finestra principale, con l'aiuto di una immagine.

La finestra di Bluefish

  1. Barra dei menù - Qui troverete numerosi menù con decine e decine di strumenti per la formattazione, la costruzione, il controllo e la correzione del codice. In questi menù sono racchiuse le funzioni previste nella Barra degli strumenti speciali ed altro. Di particolare interesse è il menù "Strumenti" dove sono racchiuse delle funzioni avviabili in associazione a programmi esterni, come browser e strumenti di controllo, come Tidy, Weblint ed altri. Sono disponibili anche numerosi filtri ed altre interessanti funzioni tutte da scoprire.
  2. Barra degli strumenti generici - Si tratta della barra present in quasi tutti i normali editor di testo. Sono quindi disponibili strumenti per aprire file già presenti, per crearne di nuovi, per copia/incollare, per trovare e sostituire delle righe o delle semplici parole, per annullare le ultime modifiche (virtualmente all'infinito), per lanciare il browser web e per configurare l'editor stesso.
  3. Barra degli strumenti speciali - Questa barra è il vero centro operativo del programma. Gli strumenti speciali messi in campo da Bluefish sono molto numerosi e sono suddivisi in schede, che illustrerò brevemente. Quando l'utente clicca su uno dei pulsanti presenti nelle varie schede, viene immediatamente prodotto il corrispondente elemento html nel documento.
    1. Standard - Che è quella che contiene i comandi più comuni per la produzione di tag ed elementi di maggior impiego. Si va dal comando per l'avvio rapido di una nuova pagina con le caratteristiche base, ai comandi per inserire links e immagini ed altro. Tutti i comandi sono provvisti di testo illustrativo.

      *

    2. Caratteri - Che presenta i comandi per la formattazione del testo anche in funzione di migliorare accessibilità e usabilità. Particolare interesse rivestono i comandi per la produzione di caratteri dalla forte enfasi (<strong></strong>), per i caratteri con enfasi (<em></em>), per i caratteri preformattati (<pre></pre>) e per l'aggiunta dei capitoli (<h1></h1> ... <h6></h6>)

      *

    3. Formattazione - Che contiene i comandi per la formattazione del contenuto. Sono tutti comandi che consentono di applicari elementi di formattazione come le abbreviazioni (<abbr></abbr>), le citazioni (<cite></cite>), elementi di codice (<code></code>), definizioni (<dfn></dfn>) ed altro.

      *

    4. Tabelle - Che contiene i comandi per la realizzazione delle tabelle (<table></table>), con i vari elementi che la compongono, come le intestazioni (<th></th>), le righe (<tr></tr>), le celle (<td></td>), la didascalia (<caption></caption>)

      *

    5. Frame - Che contiene i comandi per la produzione di frame, ma dato che si tratta di elementi disapprovati dal W3C, non mi dilungherò nella loro illustrazione
    6. Form - Che contiene i comandi per la produzione di moduli interattivi (<form></form>), con tutti gli elementi possibili come i pulsanti di input (<input />), le aree di testo (<textarea></textarea>), le opzioni (<option></option>) ed altro. In questo caso la immissione dei vari elementi, prevede la comparsa di finestre di dialogo dove inserire dei valori e delle opzioni specifiche.

      *

    7. Liste - Che contiene tutti i comandi per produrre degli elenchi puntati (<ul></ul>), numerati (<ol></ol>) e di definizione (<dl></dl>). Naturalmente sono presenti i comandi per produrre le singole voci degli elenchi (<li></li>) e delle definizioni (<dt></dt> e <dd></dd>)

      *

    8. CSS - Che contiene i comandi per creare un foglio di stile, da includere nella pagina web, per applicare una formattazione singola (<span></span>) e per inserire un box (<div></div>)

      *

    9. HTML 5 - Che contiene i comandi per applicare alcuni elementi nuovi inseriti nelle specifiche di questa versione del glorioso linguaggio a marcatori. HTML 5 è stato creato per fornire alle pagine web un maggior valore semantico ed una maggiore accessibilità dei contenuti. E' bene quindi consultare la documentazione al riguardo

      *

  4. Schede dei documenti - In questa barra vengono elencate le etichette di tutti i documenti aperti in Bluefish, per facilitare il passaggio da un documento all'altro. Quando il numero di documenti eccede la larghezza della finestra, compaiono due pulsanti per potersi spostare a destra e a sinistra nell'elenco. Nella foto allegata la barra è posta in alto, ma in una nuova installazione queste sono collocate in basso. E' quindi possibile modificare la loro collocazione nello strumento di personalizzazione.
  5. Barra laterale - A sua volta suddivisa in quattro sezioni. La prima mostra l'albero della directory /home ed i documenti conservati in essa. E' possibile selezionare diverse directories ed avere una panoramica delle sottodirectories. La seconda è il segnalibri. La terza è utile per l'inserimento di piccoli ritagli di codice, utili nella costruzione della pagina web. La quarta è la mappa dei caratteri presenti nel sistema
  6. Area del codice - E' l'area principale del programma, dove viene stilato il codice della pagina web. Predefinitamente il codice viene mostrato con una colorazione specifica che consente all'utente di riconoscere gli elementi ed i tag. E' presente anche la pratica barra verticale con i numeri di riga, che consente di rintracciare un errore segnalato o di memorizzare la posizione di elementi della pagina.
  7. Area dell'output - In quest'area viene mostrato il risultato dell'azione degli strumenti esterni disponibili in Bluefish. Ad esempio il controllo di sistassi di Tidy, viene mostrato in questa area.
  8. Barra di stato - In questa barra vengono mostrate alcune informazioni, come la posizione del cursore (per riga e colonna), o la codifica dei caratteri (UTF-8, ISO-9660, ecc.)

Uso dello strumento

Se l'utente è conoscitore delle regole e della sintassi del linguaggio a marcatori, potrà trovare Bluefish molto semplice e pratico da impiegare. Si tratta inizialmente di personalizzare lo strumento sulle proprie necessità. Per farlo basta andare nella finestra delle preferenze (Modifica → Preferenze)) e impostare le proprie scelte. La finestra delle preferenze è pratica e ben suddivisa, come potete osservare qui sotto.

*

Ricordate che è molto importante stabilire bene la codifica dei caratteri, nella scheda "File", in modo che sia selezionata la codifica UTF-8, che consente al documento di essere riprodotto dal browser con le lettere accentate ben visualizzate.
Creazione di pagine html
Tratteremo ora della creazione di una pagina web di base, con la corretta DocType Declaration (DTD), il corretto titolo, i giusti e utili metatag, i link ai fogli di stile ed agli script. Seguite questi passaggi:
  1. Lanciate Bluefish e nella barra degli strumenti speciali, alla scheda "Standard", cliccate sul primo comando a sinistra (Avvio rapido...)
  2. Si aprirà una finestra di dialogo, come quella mostrata sotto.

    *

    Nella colonna sinistra (1) sono presenti tre voci (Meta, Style, Script) e si parte con la prima
  3. Scegliete la DTD che volete, dal menù a discesa posto accanto alla voce "DTD". Quindi digitate il titolo della pagina nel campo di immissione relativo. Poi date una occhiata ai MetaTag presenti nella relativa area. Se ne volete rimuovere qualcuno, selezionatelo e poi rimuovetelo con l'apposito tasto (2). Fatto ciò selezionate la voce "Style"
  4. Qui potete indicare un foglio di stile importato o linkato. Scegliete quale fa al caso vostro, dal menù a discesa e nell'area di immissione scrivetene il percorso, come mostrato in figura. Indicate il media a cui è dedicato il foglio di stile (screen per lo schermo, print per la stampante, aural per i lettori di schermo, ecc.) e poi indicatene un titolo

    *

  5. Selezionate ora la voce "Script" e potrete indicare la presenza di uno script di vostra scelta. Incicatene il percorso nell'area di immissione o scelgietelo dal menù a discesa, se elencato.

    *

  6. A questo punto premete su OK e il gioco è fatto. La struttura base della pagina è fatta, ma non è proprio finita. Dovrete indicare i contenuti nei MetaTag vuoti. Fatto ciò, potreste avere un risultato simile al seguente:


    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Pagina di prova</title>
    <meta name="generator" content="Bluefish"/>
    <meta name="author" content="borgio3"/>
    <meta name="date" content="24 gennaio 2012"/>
    <meta name="keywords" content="webdesign"/>
    <meta name="description" content="Produrre pagine web corrette e accessibili"/>
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
    <meta http-equiv="content-style-type" content="text/css"/>
    <meta http-equiv="expires" content="0"/>
    <link href="../stili/miostile.css" rel="stylesheet" type="text/css" media="screen" title="Mio Stile"/>
    <script language="JavaScript" src="linuxguide-skins.js" type="text/javascript"></script>
    </head>
    <body>

    </body>
    </html>

  7. Tra i due Tag <body></body> andranno sistemati i vostri contenuti, come indicato in questa pagina e seguenti.
Controllo della sintassi

Per controllare che l'intera pagina abbia un codice corretto e ben strutturato, è possibile impiegare il validatore di sintassi Tidy, o Weblint. Il primo è in grado di valutare codici HTML 4, xhtml 1.0, 1.1, strict e transitional. Il secondo è adatto al solo controllo della sintassi di HTML 4.
Come abbiamo visto ad inizio articolo, è bene installare Tidy per poter controllare la correttezza del codice. Per vederlo in azione andate nel menù "Strumenti", quindi in "Riquadro output" e infine in "tidy validatore HTML", come illustrato sotto.

*

Se il codice contiene degli errori, verranno mostrati nell'area dell'output, nella parte bassa della pagina. Se si clicca due volte su uno degli errori segnalati, si verrà rimandati alla riga nella quale è segnalato l'errore. Dovrete cercarlo anche in base alle indicazioni dell'output stesso. Se invece il codice non contiene errori, l'area di output rimane bianca.

Controllo ortografico
Allo stesso modo è bene controllare l'ortografia del testo che volete pubblicare, in modo da ovviare ai refusi ed agli errori ortografici. Per farlo, potete usare aspell-it, che avete installato insieme a Bluefish. Dovrete anzitutto abilitare il controllo ortografico automatico.
Andate quindi nel menù "Documento" e selezionate la voce "Controllo ortografico".
Questo farà si che se nel testo c'è una parola errata o straniera, non riconosciuta da aspell, questa verrà sottolineata da una riga ondulata rossa.
Per correggere l'errore, cliccate con il destro sulla parola errata e cliccate sulla voce corretta, oppure se la parola non è elencata ed è scritta correttamente, potete aggiungerla al dizionario cliccando sulla voce "Aggiungi al dizionario", come mostrato nella immagine sotto.

*

Trucchi e Consigli
Nell'uso di Bluefish, possono essere utili dei piccoli accorgimenti per migliorare il risultato del vostro lavoro.
  • Aprire i file recenti - Se volete aprire gli ultimi file modificati o creati, potete usare la funzione "Apri recente", che potete avviare dal menù "File". Vi verrà elencato un certo numero dei file ultimamente modificati in ordine cronologico discendente. Può essere selezionato e aperto un file alla volta.
  • Scorcfiatoie da tastiera - Utilissime per ogni programma per computer, ancor più per Bluefish. Ecco quelle più utili:
    • Ctrl + a - Evidenzia tutto
    • Ctrl + s - Salva il documento
    • Ctrl + w - Chiudi la scheda in evidenza
    • Ctrl + z - Annulla operazione
    • Ctrl + x - Taglia
    • Ctrl + c - Copia
    • Ctrl + v - Incolla
    • Ctrl + f - Trova all'interno del documento
    • Ctrl + h - Sostituisci un termine o un frammento di riga, con un altro
    • Ctrl + l - Vai alla riga x, nell'ambito del documento attivo
  • Menù contestuale per file multipli - Se avete aperto molte schede per altrettanti file, potreste dover saltare dall'uno all'altro e per fare ciò in modo rapido cliccate con il destro su una delle etichette delle schede aperte. Comparirà un menù contestuale con tutte le schede aperte. Raggiungete quella che vi interessa e cliccateci sopra per raggiungerla immediatamente.
  • Menù contestuale dei tag - Nell'ambito della produzione del codice è possibile che sia necessario applicare degli stili inline, ovvero all'interno del marcatore stesso. Per farlo, fate come segue:
    1. Posizionate il puntatore del mouse all'interno del tag di apertura di un marcatore:

      <li|>

    2. Premete la barra spaziatrice e digitate "sty" (senza virgolette)

      <li sty>

    3. Comaprirà immediatamente un menù contestuale con il selettore adeguato

      *

    4. Premete INVIO e il selettore verrà inserito nel tag di apertura

      <li style="">

    5. Inserite ora gli attributi che volete e i relativi valori
  • Cerca Sostituisci su più file - Se avete più file aperti che contengono una informazione uguale, che volete sostituire, basta aprire tutti i file con quella informazione, poi premete i tasti Ctrl + h per far apparire la finestra seguente.

    *

    Inserite l'informazione che volete sostituire nel campo "Ricerca".
    Inserite l'informazione di sostituzione nel campo "Sostituisci con".
    Cliccate nel menù a discesa accanto alla voce "Ambito" e selezionate la voce "Tutti i documenti aperti".
    Ed infine cliccate sul tasto "Sostituisci tutto", poi chiudete.

Linux Guide | Torna in alto