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 illuminarti su vantaggi e svantaggi di questa idea e di presentarti gli editor HTML WYSIWYG più affermati.

I software IA di IONOS
Scopri la potenza dell'intelligenza artificiale
  • Siti web in tempo record
  • Soluzioni IA per il tuo business
  • Risparmio di tempo e risultati eccellenti

Che cosa significa esattamente WYSIWYG?

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. 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 vedi mentre li elabori: se desideri mettere una determinata parola in corsivo, ti basta evidenziarla 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 corrispondente (ad esempio <corsivo>Parola</corsivo>), che viene poi interpretato e applicato nella finalizzazione del testo dal 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, quindi una pubblicazione digitale. Per gli editor HTML l’eventuale scelta dell’approccio WYSIWYG riveste una certa importanza.

Funzioni degli editor HTML WYSIWYG

Un editor WYSIWYG per la creazione di siti web dovrebbe permettere anche a 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 per impostazione predefinita sulla maggior parte dei computer, i web designer non potevano inserire altri caratteri. Dopotutto non si poteva presumere che i browser dei visitatori e delle visitatrici 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 web designer attirano l’attenzione dei visitatori e danno uno stile particolare al sito. Senza le possibilità del WYSIWYG, i programmatori e le programmatrici 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 e la visitatrice 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 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 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 tramite drag and 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 barra laterale. Inoltre, è utile poter passare all’interno dell’editor da una rappresentazione WYSIWYG a una con il codice.

Crea il tuo sito web
Scopri le nuovi funzioni IA di MyWebsite
  • Editor facile e intuitivo con supporto IA
  • Immagini e testi d'effetto in pochi secondi
  • Dominio, indirizzo e-mail e certificato SSL inclusi

Editor WYSIWYG per HTML

Puntare su un editor HTML WYSIWYG può essere vantaggioso in molte situazioni. Anche chi è agli inizi può così creare facilmente siti web, seppur semplici. Nei paragrafi seguenti abbiamo riassunto alcuni dei programmi più conosciuti per te.

Dreamweaver

Macromedia ha immesso sul mercato Dreamweaver già nel 1997 (allora esclusivamente per Mac OS). Nel frattempo, il gigante dei software Adobe ha acquisito Macromedia.

Vantaggi Svantaggi
Sia modalità WYSIWYG che codice Disponibile solo con abbonamento
Funzione di anteprima per diversi browser Sono necessarie conoscenze in HTML e CSS

SeaMonkey Composer

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 a una rubrica, SeaMonkey Composer ha anche un proprio editor HTML integrato.

Vantaggi Svantaggi
Suite internet completa Adatta solo per progetti piuttosto semplici
Gratuito Funzionalità limitate

KompoZer

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

Vantaggi Svantaggi
Pulitore di markup integrato che verifica la compatibilità con W3C Non più sviluppato attivamente
Funzioni avanzate come editor CSS o assistente per moduli Nessun supporto per tecnologie web moderne come ad esempio HTML 5

Brackets

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 di anteprima il programma tende ad assomigliare a un software per le elaborazioni grafiche.

Vantaggi Svantaggi
Anteprima delle modifiche in tempo reale L’anteprima funziona solo con Google Chrome
I file CSS possono essere aperti e modificati nei punti appropriati Meno funzionalità rispetto agli IDE

NetObjects Fusion

La prima versione di NetObjects Fusion è comparsa già nel 1996, sviluppata dagli allora dipendenti della Apple. Il principio WYSIWYG, abbracciato da NetObjects Fusion, 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 tramite drag and drop.

Vantaggi Svantaggi
Grazie alla funzione drag and drop non sono necessarie conoscenze di HTML Le personalizzazioni al di fuori del software sono difficili
Possibilità di visualizzare il codice sorgente

openElement

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.

Vantaggi Svantaggi
Supporto degli standard web moderni Nessun supporto per Linux o MacOS
Modelli e funzione drag and drop Supporta contenuti dinamici solo in modo limitato

RocketCake

Anche per l’editor gratuito HTML e WYSIWYG RocketCake in linea generale non sono necessarie 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.

Vantaggi Svantaggi
Facile creazione di siti web responsive Non ottimale per progetti web molto estesi
Editor Breakpoint integrato

TOWeb

TOWeb di Lauyan Software segue la stessa impostazione WYSIWYG di RocketCake ed entrambi i programmi condividono il focus sul responsive design.

Vantaggi Svantaggi
Supporto per e-commerce e SEO Funzioni limitate nella versione base
L’hosting viene semplificato grazie ai servizi proposti Personalizzazioni più avanzate più difficili

Svantaggi dell’idea WYSIWYG

All’inizio, gli editor WYSIWYG sembrano la soluzione perfetta: anche senza conoscenze di HTML o programmazione, è possibile creare documenti (web) al computer che sono adatti alla pubblicazione. Tuttavia, per vari motivi, alcuni utenti preferiscono utilizzare un editor come Notepad++, in cui devono inserire il codice direttamente.

  • Mancanza di controllo: gli editor WYSIWYG applicano formattazioni che si possono modificare solo navigando attraverso numerose finestre e menu. Questo non avviene con l’inserimento di codice HTML o altri linguaggi di markup: chi crea può vedere esattamente cosa accade al testo durante la compilazione. Per questo motivo, alcune persone usano il linguaggio macro TeX o il pacchetto software basato su di esso, LaTeX, per creare testi per la stampa o file PDF. Originariamente sviluppato per lavori scientifici, TeX permette di rispettare esatte direttive di formattazione e inserire meglio formule matematiche e scientifiche nel testo.
  • Problemi specifici di internet e vari tipi di visualizzazione: 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 visualizzare i contenuti in modo diverso, a cui si aggiungono i dispositivi mobili che hanno modalità di visualizzazione differenti. Pertanto, la promessa “What you see is what you get” non viene mantenuta nel contesto dei siti web. I web designer testano solitamente le loro pagine su diversi sistemi prima di metterle online.
  • Qualità del codice: gli editor WYSIWYG creano un codice HTML in background. Tuttavia, non si può sempre presumere che il codice generato sia valido dal punto di vista professionale. In passato, i web designer hanno spesso criticato questi programmi per la produzione di codici sorgente che sono inutilmente gonfiati o difettosi. Ciò porta a lunghi tempi di caricamento e a errori di visualizzazione.
Hai trovato questo articolo utile?
Vai al menu principale