Editor web: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Nessun oggetto della modifica |
Nessun oggetto della modifica Etichette: Modifica visuale Modifica da mobile Modifica da web per mobile |
||
| (114 versioni intermedie di 73 utenti non mostrate) | |||
Riga 1:
Un '''editor web''' (detto anche '''editor [[HTML]]''') è un'applicazione utile per la creazione di [[Pagina web|pagine web]]. Il codice [[HTML]] si può anche scrivere con un normale editor di testo, tuttavia delle applicazioni create appositamente potrebbero risultare più efficaci, ad esempio evidenziando la sintassi, correggendo gli errori di sintassi o ancora consentendo di creare la pagina usando un'interfaccia e senza conoscere nemmeno le basi di HTML.
Molte di queste applicazioni non permettono solo di gestire l'HTML ma anche i fogli di stile, [[Foglio di stile|CSS]], [[XML]] e [[JavaScript]]. In alcuni casi possono anche integrare dei [[client]] FTP per comunicare con [[server]] remoti via [[File Transfer Protocol|FTP]].
Principalmente esistono due tipi di editor HTML: editor testuali e visuali, questi ultimi sono anche chiamati editor [[WYSIWYG]] che sta per "What You See Is What You Get", ovvero "ciò che vedi è ciò che ottieni".
== Pregi ==▼
==
[[File:BloccoNoteIta.png|alt=Blocco note|miniatura|[[Blocco note]]]]
Gli editor testuali generalmente presentano le seguenti caratteristiche:
*Evidenziazione della sintassi
== Editor più diffusi ==▼
*Barre degli strumenti per facilitare la gestione dei tag
*Scorciatoie da tastiera per rendere rapido l'inserimento dei tag
*Procedimenti guidati per la definizione dei layout
*Suggerimenti durante la stesura del codice
*Auto-completamento dei tag
Gli editori visuali sono caratterizzati da una comoda interfaccia attraverso la quale si possono creare le proprie pagine, il più delle volte hanno anche una sorta di browser integrato per visualizzare l'anteprima della pagine realizzate e constatare se il risultato raggiunto sia ciò che si desiderava o meno. La maggior parte di questi applicativi consente la realizzazione della pagine in tre modalità:
*[[Codice sorgente]]: si scrive normalmente il codice come se fosse un editor testuale
*[[Interfaccia utente]]: si agisce mediante un'interfaccia che genera in background il codice html necessario
*Codice sorgente/Interfaccia: In sostanza si può agire in entrambi i modi, modificando l'interfaccia e vedere cosa succede nell'[[HTML]] o modificare il sorgente e vedere subito i cambiamenti.
L'interfaccia degli editor visuali è basato sul motore di [[rendering]] del layout dei normali [[browser web|browser]], ogni cambiamento che si fa nell'interfaccia produrrà immediatamente il risultato che più si avvicina alla sua visualizzazione in un browser. Lo scopo principale di un editor visuale è quello di far risparmiare tempo allo sviluppatore che crea codice automatico tramite [[interfaccia grafica]] anziché programmare personalmente da zero<ref>{{Cita web|url=https://devlounge.net/pros-and-cons-of-wysiwigs/|titolo=Pros and Cons of WYSIWYG Editors|sito=devlounge.net|accesso=2021-02-18}}</ref>.
=== Critiche ===
[[File:Editor-vs-browser.png|alt=In alto una porzione di pagina web in un browser, in basso la stessa porzione di pagina in un editor WYGIWYS che non riesce a visualizzarla nello stesso modo del browser|miniatura|In alto una porzione di pagina web in un browser, in basso la stessa porzione di pagina in un editor WYSIWYG che non riesce a visualizzarla nello stesso modo del browser]]
Gli editor visuali sono stati spesso criticati a causa di vari motivi<ref name=":0">{{Cita web|url=https://medium.com/@levitovalex/advantages-and-disadvantages-of-a-wysiwyg-website-builders-687c3d8af2d1|titolo=Advantages and Disadvantages of a WYSIWYG Website Builders|autore=Alex Levitov|sito=Medium|data=2017-11-14|lingua=en|accesso=2021-02-18}}</ref><ref>{{Cita web|url=https://www.adamhyde.net/whats-wrong-with-wysiwyg/|titolo=What’s wrong with WYSIWYG – Adam Hyde|accesso=2021-02-18}}</ref>:
*Non producono la miglior sintassi possibile e molte volte "sporcano" il codice. Il layout ad esempio anziché servirsi dei fogli di stile tende a essere definito tramite un abuso di tag quali ''table'', ''p'', ''font'', ''center'' ecc. Vi sono anche degli ottimizzatori di codice tuttavia vengono facilmente confusi anche da una piccola intercessione da parte di chi sta creando la pagina.
*Una pagina prodotta attraverso un editor visuale solitamente è interpretata nei modi più disparati dai diversi browser. Anche la [[risoluzione dello schermo]] in questo senso potrebbe incidere. Per ovviare a questo problema alcuni browser supportano dei fogli di stile propri che sostituiscono quelli di chi ha creato la pagina.
*La sintassi prodotta da un editor visuale se non controllata adeguatamente potrebbe risultare incomprensibile ai robot dei [[motore di ricerca|motori di ricerca]] e in più potrebbe provocare un'incompatibilità con i browser di solo testo.<syntaxhighlight lang="html">
<!-- Codice prodotto da un editor WYSIWYG con elementi inutilmente vuoti-->
<h2 class="heading">
<span class="heading-text">Wikipedia</span>
<span class="heading-line"></span>
</h2>
<!-- Codice equivalente più corretto e pulito-->
<h2 class="heading">Wikipedia</h2>
</syntaxhighlight>
=== Non è sempre WYSIWYG ===
Gli editor visuali non mantengono sempre le promesse ed alcune volte l'acronimo WYSIWYG risalta agli occhi come qualcosa di relativo. Le motivazioni sono le stesse per cui questi editor vengono criticati<ref name=":0" /><ref>{{Cita web|url=http://redcloth.org/articles/wysi-dangerous-why-wysiwyg-editors-are-bad-for-your-website/|titolo=WYSI-dangerous: Why WYSIWYG editors are bad for your website - RedCloth: Textile for Ruby|sito=redcloth.org|accesso=2021-02-18}}</ref>:
*La stessa sintassi potrebbe essere interpretata in maniera diversa dai browser, o anche con lo stesso browser ma a risoluzione diversa. La più grande differenza ovviamente è possibile osservarla paragonando un browser testuale come [[Lynx (software)|Lynx]] con uno moderno. Stesso discorso vale per i browser vocali, che probabilmente non riusciranno ad interpretare nemmeno il codice.
*Se si stampa una pagina con Firefox o [[Internet Explorer]] (ora obsoleto in favore di [[Microsoft Edge]]) si potrebbero ottenere risultati diversi. Fortunatamente l'utente ha la possibilità di modificare i parametri di risoluzione, di stampa ed in più si può ovviare a molti di questi problemi facendo uso dei fogli di stile.
È quindi chiaro che ''ciò che vedi è ciò che ottieni'' potrebbe essere valido per una più o meno ampia porzione di visitatori, ma nulla potrà mai garantire la compatibilità della pagina generata con i browser di tutti i visitatori.
=== WYSIWYM ===
[[File:Meditor.png|alt=WYMeditor|miniatura|WYMeditor]]
Gli editor [[WYSIWYM]] sono una tipologia leggermente diversa da quelli WYSIWYG perché anziché far concentrare l'attenzione dell'autore sulla presentazione del documento o del suo layout, questi editor si concentrano sulla formattazione di ogni singolo elemento dell'HTML ad esempio i paragrafi e sulla loro funzione nel contesto pagina. Il suo acronimo infatti sta per: ''What you see is what you mean'', ovvero ''ciò che vedi è ciò che intendi''.{{senza fonte}}
== Editor e standard W3C ==
L'[[HTML]] è un [[linguaggio di markup]] strutturato. I [[browser]] sono in grado di riconoscere il linguaggio HTML e ''strutturare'' la pagina in base alle [[Elemento HTML|tag]] presenti all'interno del [[codice sorgente]] della pagina. L'organizzazione [[W3C]] definisce le regole di costruzione delle pagine, denominate ''standard'' o, italianizzando, ''specifiche''.
Seguire gli standard è un'operazione consigliata, per rendere le pagine accessibili al più ampio numero di utenti abbattendo i problemi di navigazione legati a situazioni di disabilità, utilizzo di risoluzioni inferiori a quelle per le quali il sito è concepito, limitazioni di banda ecc. Si è andata delineando in questo senso una linea di principio secondo cui la struttura del documento debba essere definita nel linguaggio [[HTML]] o [[XHTML]]; mentre il layout, cioè la parte d'impostazione grafica, dovrebbe essere assegnata esclusivamente a fogli di stile o [[foglio di stile|CSS]].
Alcuni vecchi editor HTML quindi non seguono le moderne direttive del [[W3C]] anche se i più recenti editor WYSIWYG hanno fatto grandi passi in questo senso, nonostante la lunga strada ancora da percorrere. Diversa è la situazione degli editor testuali, con un po' di accorgimenti e competenza, è relativamente semplice creare un codice rispondente alle specifiche.
== Editor HTML nel browser ==
Nei browser è possibile visualizzare il codice della pagina web corrente (HTML, CSS e JS), generalmente scegliendo l'opzione "''visualizza codice sorgente''" che esce cliccando con il tasto destro del mouse su un punto qualsiasi della pagina. Si può inoltre simulare modifiche del codice sorgente della pagina con i browser solitamente con l'opzione "''ispeziona''" o "''esamina''" che esce cliccando con il tasto destro del mouse su un punto qualsiasi della pagina. In questo caso il browser si comporta come un editor HTML testuale ma solo visivamente, infatti queste modifiche non verranno salvate<ref>{{Cita web|url=https://www.labnol.org/internet/design/edit-web-pages-like-wiki/3832/|titolo=How to Edit Any Web Page in your Browser|autore=Amit Agarwal|sito=Digital Inspiration|lingua=en|accesso=2021-02-18}}</ref>.
[[File:Ispeziona-codice.png|centro|miniatura|350x350px|Opzione "ispeziona elemento" o "esamina"]]
[[File:Visualizza-sorgente.png|alt=Visualizza sorgente|centro|miniatura|350x350px|Opzione "visualizza sorgente"]]
<references />
== Bibliografia ==
* {{RivistaVG|mc|171|294-298|3|1997|titolo=Gli editor HTML}}
== Voci correlate ==
*[[Editor (informatica)]]
*[[HTML]]
*[[Pagina web]]
==Altri progetti==
{{interprogetto}}
==Collegamenti esterni==
* {{cita web|https://www.w3.org/html/|Specifiche HTML dal W3C}}
* {{cita web|https://validator.w3.org/|validatore HTML del W3C}}
* {{cita web|https://jigsaw.w3.org/css-validator/|Validatore CSS del W3C}}
* {{cita web|http://graphoglrisorse.altervista.org/WebApp/Programmi/WebBrowserScreenshot/WebBrowserScreenshot.html|Web Browser Test, test per verificare la visualizzazione nei principali browser}}
* {{cita web | 1 = http://v03.browsershots.org/ | 2 = browsershots.org, utilità per valutare la visualizzazione su diversi browser | accesso = 7 settembre 2007 | urlarchivio = https://web.archive.org/web/20071011012850/http://v03.browsershots.org/ | dataarchivio = 11 ottobre 2007 | urlmorto = sì}}{{cita web|https://browsershots.org/|Ultima versione disponibile}}
{{Controllo di autorità}}
{{Portale|internet}}
▲[[en:HTML editor]]
[[
| |||