WYSIWYG: Io vedo quello che vedi tu

WYSIWYG è l’acronimo per l’espressione “What you see is what you get”, cioè “quello che vedi ottieni”. Un principio che divide i diversi editor: è davvero una buona idea lavorare a testi e sito solo sull’interfaccia e lasciare che il programma scriva da solo il codice corrispondente in background? In questo articolo ci proponiamo di illuminarvi su vantaggi e svantaggi di questa idea e di presentarvi gli editor HTML WYSIWYG più affermati.

Questo groviglio di lettere sta a significare, detto semplicemente, che il testo nel risultato finale apparirà esattamente come si vede nell’editor; la maggior parte degli utenti che conosce soltanto Word o simili come programma per la creazione e modifica di testi farebbe fatica a concepire qualcosa di diverso. E infatti nel caso di Word e degli altri software simili si tratta proprio di un editor WYSIWYG: testo, caratteri, grassetti, divisione di paragrafi risulteranno esattamente come li vedete mentre li elaborate: se volete mettere una determinata parola in corsivo, vi basta evidenziarla e cliccare sul tasto relativo.

In realtà anche simili testi sono da vedere come frutto di codici. Senza un programma come Word, dovreste scrivere nel vostro testo il codice corrispondente (ad esempio “<corsivo>Parola</corsivo>”), che viene poi interpretato e applicato nella finalizzazione del testo ad opera del terminale, che nel nostro caso è la stampante. Tuttavia anche la conversione del documento Word in un file PDF o la rappresentazione del documento su un browser può essere vista come output: la pubblicazione digitale. Per gli editor HTML l’eventuale scelta di un WYSIWYG riveste una certa importanza. Prima di addentrarci nei dettagli, è opportuno illustrare brevemente la storia di questi editor.

Prima dell’era dei computer tutto era WYSIWYG, poiché non era necessaria alcuna compilazione: se scrivete su un foglio di carta o utilizzate una macchina da scrivere, ottenete il risultato finale senza intermediazioni. Soltanto con lo sviluppo dei computer e dei programmi di scrittura è diventato necessario occuparsi di come quello che viene scritto sullo schermo debba apparire una volta stampato. Le schede perforate hanno presto raggiunto i propri limiti per la programmazione, perciò gli sviluppatori e gli studiosi di software hanno dovuto cercare un’altra soluzione per inserire i codici: un editor di testo. I primi programmi di elaborazione testi consistevano quindi in editor per i programmatori. Le stringhe di simboli inserite in questi programmi non erano, però, concepiti con la finalità di essere finalizzati come documenti.

Uno dei primi programmi di elaborazione di testi è stato WordStar, comparso nel 1978 e che ha ancora oggi utenti di primo piano come l’autore della famosa serie TV “Games of Thrones” George R. R. Martin. Originariamente WordStar si appoggiava al sistema operativo CP/M e aveva poche funzioni. Nella prima versione gli scrittori dovevano ancora lavorare con i marcatori per il set di stampa; secondo l’opinione generale questo è il primo editor WYSIWYG. Con questo editor era possibile mettere il corsivo o il grassetto visualizzando direttamente sul monitor il risultato. A quell’epoca risultava però problematico il fatto che i computer non erano molto evoluti in fatto di grafica: non potevano ancora mostrare a monitor l’autentica immagine che sarebbe risultata dalla stampa.

Con l’evolversi dei PC e dei Mac i testi cominciarono ad apparire sempre meglio sul monitor nelle loro sfaccettature grafiche. Ma il WYSIWYG non si ferma all’elaborazione dei testi: gli editor hanno un ruolo rilevante, in particolare per la creazione di siti web, mostrando l’output non appena immesso l’input. La maggior parte delle pagine su Internet sono scritte mediante Hypertext Markup Language (HTML). Come per i linguaggi di markup e di programmazione in generale, prima che il risultato divenga visibile, occorre compilare il codice.

Chi crea un sito servendosi del linguaggio HTML, deve avere già in mente l’output successivo: gli editor HTML e WYSIWYG servono proprio ad alleggerire questo lavoro. Il primo nel suo genere è WebMagic, rilasciato nel 1995 da Silicon Graphics. Nei due anni successivi uscirono i famosi editor FrontPage di Microsoft (che nel frattempo non sono più disponibili sul mercato) e Dreamweaver di Macromedia (oggi parte di Adobe). La richiesta di buoni editor è ampia, ma cosa deve essere in grado di fare un software di questo tipo?

Un editor WYSIWYG per la creazione di siti web dovrebbe permettere anche ad utenti senza approfondite conoscenze del linguaggio HTML di creare pagine web. Infatti in questi programmi gli utenti non devono inserire manualmente il codice, ma utilizzano le funzioni del software che realizzano in background il codice HTML.

• Font: all’epoca della fondazione del web le possibilità di utilizzare diversi tipi di carattere erano ancora molto limitate. Al di là di Times New Roman, Verdana e Arial, che erano installati di default sulla maggior parte dei computer, i web designer non potevano inserire altri caratteri. Dopotutto non si poteva presumere che i browser dei visitatori del sito web potessero visualizzarli. Nel frattempo questo problema è diventato di gran lunga meno rilevante. Con un editor HTML e WYSIWYG gli utenti possono scegliere tra molti caratteri.
• Caratteri tipografici: esempi di questi caratteri sono il corsivo, il grassetto, il sottolineato, il barrato o il maiuscoletto. Con l’editor WYSIWYG corrispondente, gli utenti non devono effettuare la marcatura manualmente, non importa che sia per il codice HTML o per l’elaborazione di testi, ma possono editare con un tasto la parte di testo interessata.
• Layout: la luce di composizione e gli spazi bianchi costituiscono una parte importante dell’aspetto di un sito web. Posizionando i contenuti in un posto piuttosto che in un altro, i programmatori attirano l’attenzione dei visitatori e danno uno stile particolare al sito. Senza le possibilità del WYSIWYG, i programmatori dovrebbero selezionare pixel per pixel lo spazio bianco, cioè lo spazio che non è riempito da alcun contenuto.
• Strutturazione: come per i testi stampati, anche per un sito web i contenuti devono essere strutturati sulla pagina in modo che il visitatore si trovi a proprio agio nel consultarli. Attraverso titoli e sottotitoli, facilmente impostabili negli editor WYSIWYG, i lettori vengono guidati più agevolmente attraverso il testo.
• Tabelle: con liste e tabelle si possono ulteriormente valorizzare i contenuti. Con un software che supporta WYSIWYG, i web designer possono inserire direttamente gli elementi senza dover ricorrere a codici cervellotici.
• Media: i siti web non constano soltanto di testi: video, immagini e altri elementi grafici occupano una grande fetta del World Wide Web. Per mostrare anche questo tipo di contenuti occorre impostare un codice HTML corrispondente. Ma l’editor HTML e WYSIWYG si occupa di questo automaticamente e nella maggior parte dei casi gli utenti possono collocare i contenuti che desiderano al posto che desiderano semplicemente con drag&drop.

Oltre al design dei contenuti, gli editor che supportano WYSIWYG hanno anche ulteriori funzioni; per esempio è spesso possibile pubblicare contenuti sul proprio sito web direttamente attraverso l’editor. Molti editor HTML aiutano gli utenti anche con l’organizzazione del progetto, ad esempio rendendo ben visibili le sottopagine del sito in una lista laterale. Inoltre è utile poter passare all’interno dell’editor da una rappresentazione WYSIWYG a una con il codice, poiché uno dei vantaggi principali del principio “Ottieni quel che vedi” consiste nel fatto che i programmi hanno delle limitazioni e ci possono essere errori senza che se ne capiscano le cause.

Gli editor WYSIWYG sembrano dunque essere una soluzione perfetta: si possono creare documenti, anche web, adatti alla pubblicazione pur senza avere conoscenze di HTML o di programmazione. Tuttavia per diversi motivi alcuni utenti preferiscono affidarsi a un editor come Notepad++, dove bisogna inserire direttamente il codice, perché ciò permette di avere il controllo completo sull’output finale. Ciò risulta vero anche al di fuori dell’HTML e chi si sia trovato sull’orlo della disperazione nello scrivere una lettera con Word sa di cosa stiamo parlando: il programma si fa carico della formattazione, sulla quale si può intervenire come utenti soltanto rovistando attraverso numerose finestre e menu.

Utilizzando l’HTML o altri linguaggi di markup ciò non avviene: gli utenti nel compilare il codice vedono esattamente quello che accade al testo. Per questo motivo alcuni utenti nel creare testi per documenti stampa o file PDF utilizzano il macrolinguaggio TeX o il pacchetto software LaTeX, basato su TeX. Sviluppato inizialmente per lavori di tipo scientifico, TeX consente di mantenere le specifiche di formattazione esatte e di integrare meglio le formule matematiche e scientifiche nel testo.

Su questo punto si rileva un problema specifico di internet: anche con WYSIWYG non è assicurato che l’output sia esattamente come lo vede il web designer al monitor, poiché non esiste un solo risultato finale nel World Wide Web: diversi sistemi e browserrendono i contenuti in modo diverso, senza contare i dispositivi mobili che hanno ancora un altro modo per rappresentare i contenuti. Per questo motivo la promessa “What you see is what you get”, almeno per quanto riguarda i siti web, è insensata e i web designer solitamente testano i propri siti su diversi sistemi prima di metterne online l’output.

Gli editor WYSIWYG creano in background un codice HTML, ma non si può presupporre che questo codice soddisfi requisiti professionali. In passato i web designer hanno più volte lamentato il fatto che questi programmi producono codici sorgente inutilmente ridondanti o difettosi, portando a lunghi tempi di caricamento e messaggi di errore.

Tuttavia non è sconsigliato affidarsi a un editor WYSIWYG. Perlomeno i principianti possono in questo modo creare immediatamente dei propri siti web, anche se semplici. Ecco i programmi più conosciuti:

Macromedia ha immesso sul mercato Dreamweaver già nel 1997 (allora esclusivamente per Mac OS). Nel frattempo il gigante dei software Adobe ha acquisito Macromedia e continua a sviluppare Dreamweaver e Flash, un altro progetto Macromedia. Questo editor è utilizzabile sia in modalità WYSIWYG sia con i codici e le due modalità si possono visualizzare contemporaneamente, così si vedono direttamente nell’anteprima gli effetti dei cambiamenti nel codice e viceversa.

L’anteprima funziona con diversi browser e anche sui dispositivi mobili; questi ultimi si possono collegare al progetto grazie a un codice QR. Con una funzione di publishing integrata, gli utenti possono anche spostare i contenuti creati direttamente sui propri server, mettendoli così online. Dreamweaver è parte di Creative Cloud e c’è quindi la possibilità di abbonarsi.

Con SeaMonkey l’utente si può procurare una suite Internet completa per il proprio computer: accanto al browser, ai client di posta elettronica e IRC e ad una rubrica, SeaMonkey Composer ha anche un proprio editor HTML integrato. Il pacchetto è scaturito dalla Mozilla Application Suite, ora fuori produzione, ma gli sviluppatori sono ancora in stretto contatto con Mozilla Foundation. Il Composer, come del resto l’intera suite, è molto semplice ed è adatto perciò soprattutto per progettare siti web semplici. Si può cambiare la visualizzazione da HTML a WYSIWYG, anche se questo piccolo programma gratuito non può fare molto di più. Nonostante questo, specialmente per i puristi, questo editor riveste grande interesse.

Anche KompoZer emerge dall’ambiente di Mozilla e, come per SeaMonkey, la struttura di questo editor HTML e WYSIWYG è molto semplice: gli utenti possono passare dalla rappresentazione grafica al testo sorgente. Tra le funzioni utili si possono menzionare le finestre di guida, l’editor CSS, un site manager FTP con il quale l’utente può caricare i propri progetti e un Markup Cleaner, che ricerca nel codice già scritto le eventuali parti ridondanti e controlla il sito completo per la conformità W3C. KompoZer, come SeaMonkey, non viene più sviluppato. Il progetto è stato rilasciato sotto varie licenze open source.

Lo sviluppo di KompoZer si chiama BlueGriffon e ha in serbo ulteriori funzioni. Anche qui, come per Dreamweaver, si possono avere parallelamente entrambe le visualizzazioni. Nella versione a pagamento (esiste anche una versione gratuita, più ridotta) è compreso inoltre un editor EPUB e si possono creare eBooks. Già dalla licenza base l’utente dispone di circa 2.500 template che facilitano la costruzione del proprio sito.

Brackets è commercializzato da Adobe, ma a differenza di Dreamweaver è disponibile open source e gratuitamente. Si tratta principalmente di un editor di testo e non di un editor WYSIWYG. Con la funzione anteprima il programma tende ad assomigliare ad un software per le elaborazioni di grafiche. Tutti i cambiamenti vengono mostrati in tempo reale in una finestra del browser. L’unico svantaggio consiste nel fatto che funziona soltanto con Google Chrome, per cui si può verificare soltanto a posteriori come gli altri browser presentano il sito web.

I file CSS si possono aprire e modificare attraverso il codice direttamente nelle posizioni predisposte, facilitando la scrittura del codice, poiché i web designer non devono continuare a passare da un file all’altro. Anche questi cambiamenti sono mostrati direttamente nell’anteprima live. Nel frattempo gli sviluppatori hanno già preparato centinaia di estensioni per Brackets, che vanno dall’adattamento puramente grafico dell’interfaccia utente a utili tool di completamento automatico o di debug.

La prima versione di NetObjects Fusion è comparsa già nel 1996, sviluppata dagli allora collaboratori della Apple. Il principio WYSIWYG, abbracciato da NetObjects, ricorda più un programma di desktop publishing che un tipico editor HTML. Il software consente agli utenti di organizzare gli elementi del sito web pixel per pixel con drag&drop, per cui non è necessario conoscere HTML, anche se i web designer più esperti hanno sempre la possibilità di passare al testo sorgente per effettuare i cambiamenti direttamente con il codice HTML.

Un’ulteriore particolarità è la visualizzazione del project management, dove si decide in merito alla navigazione del sito web. Gli utenti ordinano le singole sottopagine e i loro collegamenti nella forma di un diagramma ad albero. NetObjects Fusion è a pagamento e disponibile soltanto per Windows. La versione gratuita, Essentials, è rivolta principalmente agli utenti privati.

openElement è un ulteriore editor WYSIWYG e HTML gratuito e si basa sul codice Chromium, come il browser Google Chrome. Anche in questo caso la costruzione di un sito web avviene inserendo e spostando elementi in una visualizzazione grafica; la zona di elaborazione si trova al centro, mentre gli elementi disponibili si trovano in una lista laterale a destra. In questo modo gli utenti possono semplicemente trascinare gli oggetti desiderati nell’editor WYSIWYG.

Le singole pagine del progetto si trovano in Site Explorer o, quando è aperto, come tab sopra l’area di modifica e consentono di cambiare velocemente da un sito all’altro. In ogni sottopagina i web designer possono vedere il codice sorgente ed effettuare direttamente eventuali modifiche. Il software è gratuito e con licenza open source, ma al momento è disponibile soltanto per Windows.

Anche per l’editor gratuito HTML e WYSIWYG RocketCake in linea generale non sono necessarie delle conoscenze HTML o CSS. La struttura assomiglia a quella del concorrente openElement: al centro si trova l’area di elaborazione, a sinistra e a destra una lista degli elementi del sito web e i file di navigazione. La particolarità del programma è che semplifica la creazione di siti web responsive per dispositivi mobili. Di questo è responsabile tra gli altri l’editor Breakpoint, dove i web designer stabiliscono dei punti nel CSS nei quali il layout varia a seconda delle dimensioni del display. Naturalmente anche con RocketCake è possibile elaborare direttamente il codice.

TOWeb segue la stessa impostazione WYSIWYG di RocketCake ed entrambi i programmi condividono il focus sul responsive design. TOWeb offre inoltre la possibilità di costruire facilmente un proprio shop online e supporto per l’ottimizzazione per i motori di ricerca, quest’ultima ottenuta preparando alt tag e meta title da elaborare e un codice HTML conforme a W3C. Per le funzioni di publishing gli utenti possono scegliere tra i servizi di hosting predefiniti, facilitando così l’upload, caratteristica interessante in particolare per i principianti. TOWeb è un prodotto a pagamento, tuttavia se si desidera limitarsi ad un solo sito web, si può utilizzare anche gratuitamente. Per ogni ulteriore progetto (e soprattutto per le soluzioni di e-commerce) è obbligatorio l’acquisto di uno dei tre pacchetti.

Gli editor che nascondono il codice in background permettono di concentrarsi completamente sul design. Per questo gli editor WYSIWYG, siano essi elaboratori di testo o editor HTML, rivestono interesse per gli utenti che si concentrano sul prodotto finale. In molti casi si tratta di principianti, ma anche per i media designer questo approccio può risultare proficuo: invece di preoccuparsi della complessità di un singolo marcatore, ci si può concentrare totalmente sul layout e sui contenuti.

Questo porta però anche alcuni svantaggi: chi desidera attuare delle modifiche oltre alle funzioni progettuali previste dall’editor, si scontra con un limite del principio WYSIWYG e deve intervenire comunque sul codice sorgente. Solo lì l’utente dispone veramente del pieno controllo sul risultato finale.