WYSIWYG: Io vedo quello che vedi tu

WYSIWYG è l’acronimo per l’espres­sio­ne “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’in­ter­fac­cia e lasciare che il programma scriva da solo il codice cor­ri­spon­den­te in back­ground? In questo articolo ci pro­po­nia­mo di il­lu­mi­nar­ti su vantaggi e svantaggi di questa idea e di pre­sen­tar­ti gli editor HTML WYSIWYG più affermati.

Che cosa significa esat­ta­men­te WYSIWYG?

Questo groviglio di lettere sta a si­gni­fi­ca­re, detto sem­pli­ce­men­te, che il testo nel risultato finale apparirà esat­ta­men­te 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. Infatti, nel caso di Word e degli altri software simili si tratta proprio di un editor WYSIWYG: testo, caratteri, grassetti, divisione di paragrafi ri­sul­te­ran­no esat­ta­men­te come li vedi mentre li elabori: se desideri mettere una de­ter­mi­na­ta parola in corsivo, ti basta evi­den­ziar­la e cliccare sul tasto relativo.

In realtà anche simili testi sono da vedere come frutto di codici. Senza un programma come Word, dovresti scrivere nel tuo testo il codice cor­ri­spon­den­te (ad esempio <corsivo>Parola</corsivo>), che viene poi in­ter­pre­ta­to e applicato nella fi­na­liz­za­zio­ne del testo dal terminale, che nel nostro caso è la stampante. Tuttavia, anche la con­ver­sio­ne del documento Word in un file PDF o la rap­pre­sen­ta­zio­ne del documento su un browser può essere vista come output, quindi una pub­bli­ca­zio­ne digitale. Per gli editor HTML l’eventuale scelta dell’approccio WYSIWYG riveste una certa im­por­tan­za.

Funzioni degli editor HTML WYSIWYG

Un editor WYSIWYG per la creazione di siti web dovrebbe per­met­te­re anche a utenti senza ap­pro­fon­di­te co­no­scen­ze del lin­guag­gio HTML di creare pagine web. Infatti, in questi programmi gli utenti non devono inserire ma­nual­men­te il codice, ma uti­liz­za­no le funzioni del software che rea­liz­za­no in back­ground il codice HTML.

• Font: all’epoca della fon­da­zio­ne del web le pos­si­bi­li­tà di uti­liz­za­re diversi tipi di carattere erano ancora molto limitate. Al di là di Times New Roman, Verdana e Arial, che erano in­stal­la­ti per im­po­sta­zio­ne pre­de­fi­ni­ta sulla maggior parte dei computer, i web designer non potevano inserire altri caratteri. Dopotutto non si poteva presumere che i browser dei vi­si­ta­to­ri e delle vi­si­ta­tri­ci del sito web potessero vi­sua­liz­zar­li. Nel frattempo, questo problema è diventato di gran lunga meno rilevante. Con un editor HTML e WYSIWYG gli utenti possono scegliere tra molti caratteri.
• Caratteri ti­po­gra­fi­ci: esempi di questi caratteri sono il corsivo, il grassetto, il sot­to­li­nea­to, il barrato o il ma­iu­sco­let­to. Con l’editor WYSIWYG cor­ri­spon­den­te, gli utenti non devono ef­fet­tua­re la marcatura ma­nual­men­te, non importa che sia per il codice HTML o per l’ela­bo­ra­zio­ne di testi, ma possono editare con un tasto la parte di testo in­te­res­sa­ta.
• Layout: la luce di com­po­si­zio­ne e gli spazi bianchi co­sti­tui­sco­no una parte im­por­tan­te dell’aspetto di un sito web. Po­si­zio­nan­do i contenuti in un posto piuttosto che in un altro, i web designer attirano l’at­ten­zio­ne dei vi­si­ta­to­ri e danno uno stile par­ti­co­la­re al sito. Senza le pos­si­bi­li­tà del WYSIWYG, i pro­gram­ma­to­ri e le pro­gram­ma­tri­ci do­vreb­be­ro se­le­zio­na­re pixel per pixel lo spazio bianco, cioè lo spazio che non è riempito da alcun contenuto.
• Strut­tu­ra­zio­ne: come per i testi stampati, anche per un sito web i contenuti devono essere strut­tu­ra­ti sulla pagina in modo che il vi­si­ta­to­re e la vi­si­ta­tri­ce si trovi a proprio agio nel con­sul­tar­li. At­tra­ver­so titoli e sot­to­ti­to­li, fa­cil­men­te im­po­sta­bi­li negli editor WYSIWYG, i lettori vengono guidati più age­vol­men­te at­tra­ver­so il testo.
• Tabelle: con liste e tabelle si possono ul­te­rior­men­te va­lo­riz­za­re i contenuti. Con un software che supporta WYSIWYG, i web designer possono inserire di­ret­ta­men­te gli elementi senza dover ricorrere a codici complessi.
• 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 cor­ri­spon­den­te. Ma l’editor HTML e WYSIWYG si occupa di questo au­to­ma­ti­ca­men­te e nella maggior parte dei casi gli utenti possono collocare i contenuti che de­si­de­ra­no al posto che de­si­de­ra­no sem­pli­ce­men­te tramite drag and drop.

Oltre al design dei contenuti, gli editor che sup­por­ta­no WYSIWYG hanno anche ulteriori funzioni; per esempio, è spesso possibile pub­bli­ca­re contenuti sul proprio sito web di­ret­ta­men­te at­tra­ver­so l’editor. Molti editor HTML aiutano gli utenti anche con l’or­ga­niz­za­zio­ne del progetto, ad esempio rendendo ben visibili le sot­to­pa­gi­ne del sito in una barra laterale. Inoltre, è utile poter passare all’interno dell’editor da una rap­pre­sen­ta­zio­ne WYSIWYG a una con il codice.

Editor WYSIWYG per HTML

Puntare su un editor HTML WYSIWYG può essere van­tag­gio­so in molte si­tua­zio­ni. Anche chi è agli inizi può così creare fa­cil­men­te siti web, seppur semplici. Nei paragrafi seguenti abbiamo riassunto alcuni dei programmi più co­no­sciu­ti per te.

Dream­wea­ver

Ma­cro­me­dia ha immesso sul mercato Dream­wea­ver già nel 1997 (allora esclu­si­va­men­te per Mac OS). Nel frattempo, il gigante dei software Adobe ha acquisito Ma­cro­me­dia.

SeaMonkey Composer

Con SeaMonkey l’utente si può procurare una suite internet completa per il proprio computer: accanto al browser, ai client di posta elet­tro­ni­ca e IRC e a una rubrica, SeaMonkey Composer ha anche un proprio editor HTML integrato.

KompoZer

Anche KompoZer emerge dall’ambiente di Mozilla e, come per SeaMonkey, la struttura di questo editor HTML e WYSIWYG è molto semplice.

Brackets

Brackets è com­mer­cia­liz­za­to da Adobe, ma a dif­fe­ren­za di Dream­wea­ver è di­spo­ni­bi­le open source e gra­tui­ta­men­te. Si tratta prin­ci­pal­men­te di un editor di testo e non di un editor WYSIWYG. Con la funzione di anteprima il programma tende ad as­so­mi­glia­re a un software per le ela­bo­ra­zio­ni grafiche.

Ne­tO­b­jec­ts Fusion

La prima versione di Ne­tO­b­jec­ts Fusion è comparsa già nel 1996, svi­lup­pa­ta dagli allora di­pen­den­ti della Apple. Il principio WYSIWYG, ab­brac­cia­to da Ne­tO­b­jec­ts Fusion, ricorda più un programma di desktop pu­bli­shing che un tipico editor HTML. Il software consente agli utenti di or­ga­niz­za­re gli elementi del sito web pixel per pixel tramite drag and drop.

ope­nE­le­ment

ope­nE­le­ment è un ulteriore editor WYSIWYG e HTML gratuito e si basa sul codice Chromium, come il browser Google Chrome. Anche in questo caso la co­stru­zio­ne di un sito web avviene inserendo e spostando elementi in una vi­sua­liz­za­zio­ne grafica.

Roc­ket­Ca­ke

Anche per l’editor gratuito HTML e WYSIWYG Roc­ket­Ca­ke in linea generale non sono ne­ces­sa­rie co­no­scen­ze HTML o CSS. La struttura as­so­mi­glia a quella del con­cor­ren­te ope­nE­le­ment: al centro si trova l’area di ela­bo­ra­zio­ne, a sinistra e a destra una lista degli elementi del sito web e i file di na­vi­ga­zio­ne.

La par­ti­co­la­ri­tà del programma è che sem­pli­fi­ca la creazione di siti web re­spon­si­ve per di­spo­si­ti­vi mobili. Di questo è re­spon­sa­bi­le tra gli altri l’editor Brea­k­point, dove i web designer sta­bi­li­sco­no dei punti nel CSS, nei quali il layout varia a seconda delle di­men­sio­ni del display. Na­tu­ral­men­te anche con Roc­ket­Ca­ke è possibile elaborare di­ret­ta­men­te il codice.

TOWeb

TOWeb di Lauyan Software segue la stessa im­po­sta­zio­ne WYSIWYG di Roc­ket­Ca­ke ed entrambi i programmi con­di­vi­do­no il focus sul re­spon­si­ve design.

Svantaggi dell’idea WYSIWYG

All’inizio, gli editor WYSIWYG sembrano la soluzione perfetta: anche senza co­no­scen­ze di HTML o pro­gram­ma­zio­ne, è possibile creare documenti (web) al computer che sono adatti alla pub­bli­ca­zio­ne. Tuttavia, per vari motivi, alcuni utenti pre­fe­ri­sco­no uti­liz­za­re un editor come Notepad++, in cui devono inserire il codice di­ret­ta­men­te.

• Mancanza di controllo: gli editor WYSIWYG applicano for­mat­ta­zio­ni che si possono mo­di­fi­ca­re solo navigando at­tra­ver­so numerose finestre e menu. Questo non avviene con l’in­se­ri­men­to di codice HTML o altri linguaggi di markup: chi crea può vedere esat­ta­men­te cosa accade al testo durante la com­pi­la­zio­ne. Per questo motivo, alcune persone usano il lin­guag­gio macro TeX o il pacchetto software basato su di esso, LaTeX, per creare testi per la stampa o file PDF. Ori­gi­na­ria­men­te svi­lup­pa­to per lavori scien­ti­fi­ci, TeX permette di ri­spet­ta­re esatte direttive di for­mat­ta­zio­ne e inserire meglio formule ma­te­ma­ti­che e scien­ti­fi­che nel testo.
• Problemi specifici di internet e vari tipi di vi­sua­liz­za­zio­ne: anche con WYSIWYG non è un dato di fatto che il risultato finale sia davvero come appare al web designer sullo schermo. Nel World Wide Web non esiste infatti un unico risultato finale. Diversi sistemi e browser possono vi­sua­liz­za­re i contenuti in modo diverso, a cui si ag­giun­go­no i di­spo­si­ti­vi mobili che hanno modalità di vi­sua­liz­za­zio­ne dif­fe­ren­ti. Pertanto, la promessa “What you see is what you get” non viene mantenuta nel contesto dei siti web. I web designer testano so­li­ta­men­te le loro pagine su diversi sistemi prima di metterle online.
• Qualità del codice: gli editor WYSIWYG creano un codice HTML in back­ground. Tuttavia, non si può sempre presumere che il codice generato sia valido dal punto di vista pro­fes­sio­na­le. In passato, i web designer hanno spesso criticato questi programmi per la pro­du­zio­ne di codici sorgente che sono inu­til­men­te gonfiati o difettosi. Ciò porta a lunghi tempi di ca­ri­ca­men­to e a errori di vi­sua­liz­za­zio­ne.