From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/it/web/guide/ajax/index.html | 57 +++ files/it/web/guide/ajax/iniziare/index.html | 252 +++++++++++++ files/it/web/guide/api/index.html | 26 ++ files/it/web/guide/css/index.html | 23 ++ files/it/web/guide/graphics/index.html | 58 +++ .../guide/html/categorie_di_contenuto/index.html | 141 +++++++ .../it/web/guide/html/editable_content/index.html | 216 +++++++++++ .../rich-text_editing_in_mozilla/index.html | 420 +++++++++++++++++++++ files/it/web/guide/index.html | 39 ++ files/it/web/guide/woff/index.html | 99 +++++ 10 files changed, 1331 insertions(+) create mode 100644 files/it/web/guide/ajax/index.html create mode 100644 files/it/web/guide/ajax/iniziare/index.html create mode 100644 files/it/web/guide/api/index.html create mode 100644 files/it/web/guide/css/index.html create mode 100644 files/it/web/guide/graphics/index.html create mode 100644 files/it/web/guide/html/categorie_di_contenuto/index.html create mode 100644 files/it/web/guide/html/editable_content/index.html create mode 100644 files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html create mode 100644 files/it/web/guide/index.html create mode 100644 files/it/web/guide/woff/index.html (limited to 'files/it/web/guide') diff --git a/files/it/web/guide/ajax/index.html b/files/it/web/guide/ajax/index.html new file mode 100644 index 0000000000..5f8b87ee74 --- /dev/null +++ b/files/it/web/guide/ajax/index.html @@ -0,0 +1,57 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX + - Tutte_le_categorie +translation_of: Web/Guide/AJAX +--- +

+

+
AJAX:Iniziare
Una introduzione ad AJAX.
+

Asynchronous JavaScript and XML (AJAX) non è di per sè una tecnologia, ma è un termine che descrive un "nuovo" approccio all'utilizzo di diverse tecnologie esistenti, compresi: HTML o XHTML, CSS, JavaScript, DOM, XML, XSLT e l'oggetto XMLHttpRequest. Grazie all'utilizzo di queste tecnologie in combinazione con il modello AJAX, le applicazioni web possono eseguire aggiornamenti rapidi e incrementali dell'interfaccia utente senza ricaricare nel browser l'intera pagina. Questo rende l'applicazione più performante e più reattiva alle azioni dell'utente.
+Il W3C ha pubblicato una bozza di standard per l'oggetto XMLHttpRequest. +

+ + + + +
+

Documentazione

+
AJAX:Iniziare +
Questo articolo spiega le fondamenta di AJAX e fornisce due semplici esempi per cominciare. +
+
Compatibilità di AJAX +
Quali browser supportano AJAX? +
+
Ajax: A New Approach to Web Applications (EN) +
Jesse James Garrett, di adaptive path, ha scritto questa introduzione ad AJAX nel febbraio 2005. +
+
A Simpler Ajax Path (EN) +
"E' facile avvalersi dell'oggetto XMLHttpRequest per costruire un'applicazione web che si comporti come un'applicazione desktop utilizzando però strumenti come i web forms per ricevere input dagli utenti." +
+
Fixing the Back Button and Enabling Bookmarking for AJAX Apps (EN) +
Mike Stenhouse ha realizzato questo articolo che esamina nel dettaglio alcuni metodi che è possibile utilizzare per risolvere i problemi relativi al bottone "Indietro" e ai Bookmark nelle applicazioni AJAX. +
+
Ajax Mistakes (EN) +
Alex Bosworth ha scritto questo articolo che evidenzia alcuni errori comuni degli sviluppatori AJAX.
+		 +

Strumenti

+ +

Argomenti correlati

+ +
+

Interwiki Language Links +

{{ languages( { "ca": "ca/AJAX", "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "ja": "ja/AJAX", "ko": "ko/AJAX", "nl": "nl/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX" } ) }} diff --git a/files/it/web/guide/ajax/iniziare/index.html b/files/it/web/guide/ajax/iniziare/index.html new file mode 100644 index 0000000000..f473f64d1e --- /dev/null +++ b/files/it/web/guide/ajax/iniziare/index.html @@ -0,0 +1,252 @@ +--- +title: Iniziare +slug: Web/Guide/AJAX/Iniziare +tags: + - AJAX + - Tutte_le_categorie +translation_of: Web/Guide/AJAX/Getting_Started +--- +

 

+ +

Questo articolo spiega le fondamenta di AJAX e fornisce due semplici esempi per iniziare.

+ +

Cos'è AJAX?

+ +

AJAX (Asynchronous JavaScript and XML) è un termine coniato recentemente per descrivere due utili funzionalità che sono presenti nei browser da anni, ma che sono state sottovalutate dalla maggioranza degli sviluppatori web fino a quando, di recente, alcune applicazioni come Gmail, Google suggest e Google Maps le hanno portate in auge.

+ +

Le funzionalità di cui stiamo parlando sono:

+ + + +

Passo 1 – Dì "per favore", o Come fare una richiesta HTTP

+ +

Per effettuare una richiesta HTTP al server utilizzando JavaScript, si utilizza un'istanza di una classe che fornisce detta funzionalità. Tale classe è stata introdotta originariamente in Internet Explorer come oggetto ActiveX e si chiamava XMLHTTP. Successivamente Mozilla, Safari e altri browser hanno implementato la classe XMLHttpRequest, che supporta gli stessi metodi e le stesse proprietà della classe di Microsoft.

+ +

Il risultato è che per creare un'istanza (oggetto) da tale classe che funzioni sui diversi browser, occorre scrivere un codice simile al seguente:

+ +
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    http_request = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+ +

(Per scopi illustrativi, il codice qui riportato è una versione leggermente semplificata del codice generalmente utilizzato per creare un'istanza XMLHTTP. Per un esempio più pratico, si veda il Passo 3 di questo articolo)

+ +

Certe versioni di alcuni browser della famiglia Mozilla, non si comportano correttamente nel caso in cui la risposta del server non contiene un'intestazione HTTP mime-type. Per ovviare a questo problema, è possibile utilizzare un metodo aggiuntive per sovrascrivere l'header inviato dal server, nel caso non sia presente o non sia impostato a text/xml.

+ +
http_request = new XMLHttpRequest();
+http_request.overrideMimeType('text/xml');
+
+ +

Dopodichè occorre decidere cosa fare con la risposta inviata dal server. Quindi bisogna dire all'oggetto XMLHttpRequest quale funzione JavaScript elaborerà il codice XML. Questo si fa impostando la proprietà onreadystatechange dell'oggetto con il nome della funzione JavaScript, in questo modo:

+ +

http_request.onreadystatechange = nomeFunzione;

+ +

Si noti che non ci sono parentesi dopo il nome della funzione e non viene passato alcun parametro, perchè si sta semplicemente assegnando un riferimento alla funzione, non la si sta ancora chiamando. Inoltre, invece di passare il nome di una funzione, si potrebbe utilizzare la tecnica JavaScript di definire funzioni "al volo" e di definire le azioni che elaboreranno la risposta XML, in questo modo:

+ +
http_request.onreadystatechange = function(){
+    // azioni da eseguire...
+};
+
+ +

Dopo aver dichiarato ciò che accadrà quando si riceverà la risposta dal server, occorre inviare la richiesta. Bisogna chiamare i metodi open() e send() della classe che esegue le richieste, in questo modo:

+ +
http_request.open('GET', 'http://www.esempio.org/qualsiasi.file', true);
+http_request.send(null);
+
+ + + +

Il parametro del metodo send() è costituito dai dati che si vogliono inviare al server se la richiesta è di tipo POST. I dati vengono passati sotto forma di querystring, così:

+ +

nome1=valore1&nome2=valore2&ecc=ecc

+ +

Si noti che se si desidera inviare i dati come POST, occorre modificare il tipo MIME della richiesta con la riga seguente:

+ +
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+ +

In caso contrario, il server ignorerà la richiesta.

+ +

Step 2 – "Via!" o Come gestire la risposta del server

+ +

Come si è detto, all'atto di inviare la richiesta, si è fornito il nome della funzione JavaScript che deve elaborare la risposta.

+ +

http_request.onreadystatechange = nomeFunzione;

+ +

Ma cosa dovrebbe fare questa funzione? Primo, la funzione deve controllare lo stato della richiesta. Se lo stato ha un valore di 4, significa che la risposta è stata ricevuta per intero e si può continuare l'elaborazione:

+ +

 

+ +
if (http_request.readyState == 4) {
+    // tutto a posto, la risposta è stata ricevuta
+} else {
+    // non sono ancora pronto
+}
+
+ +

Ecco la lista completa dei possibili valori di readyState:

+ + + +

(Fonte) (1)

+ +

Bisognerà poi controllare il codice di stato della risposta HTTP. Tutti i codici possibili sono elencati nel sito del W3C. Per i nostri scopi, ci interessa soltanto il codice 200 OK.

+ +
if (http_request.status == 200) {
+    // perfetto!
+} else {
+    // c'è stato un problema nella richiesta,
+    // per esempio un codice di errore 404 (Not Found)
+    // o 500 (Internal Server Error)
+}
+
+ +

Una volta controllati lo stato della richiesta e il codice di stato HTTP della risposta, sarà lo sviluppatore a decidere cosa desidera fare con i dati ricevuti dal server. Per accedere ad essi, vi sono due possibilità:

+ + + +

Passo 3 - "Tutti insieme ora!", Un semplice esempio

+ +

Vediamo ora tutti gli elementi esaminati finora combinati insieme. Il seguente JavaScript richiede un documento HTML (test.html), che contiene il testo "Sono un test.", e farà un alert() coi contenuti di questo file.

+ +
<script type="text/javascript" language="javascript">
+
+
+
+    function eseguiRichiesta(url) {
+
+        var http_request = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari,...
+            http_request = new XMLHttpRequest();
+            if (http_request.overrideMimeType) {
+                http_request.overrideMimeType('text/xml');
+                // Vedi note sotto
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                http_request = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!http_request) {
+            alert('Giving up :( Non riesco a creare una istanza XMLHTTP');
+            return false;
+        }
+        http_request.onreadystatechange = function() { alertContents(http_request); };
+        http_request.open('GET', url, true);
+        http_request.send(null);
+
+    }
+
+    function alertContents(http_request) {
+
+        if (http_request.readyState == 4) {
+            if (http_request.status == 200) {
+                alert(http_request.responseText);
+            } else {
+                alert('Si è verificato un problema con la richiesta');
+            }
+        }
+
+    }
+</script>
+<span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="eseguiRichiesta('test.html')">
+        Fai una richiesta
+</span>
+
+ +

In questo esempio:

+ + + +

Si può provare questo esempio qui e si può leggere il file "test.html" qui.

+ +

Nota: La riga di codice http_request.overrideMimeType('text/xml'); causa degli errori nella Console JavaScript di Firefox 1.5 o superiore nel caso che la pagina chiamata non sia costituita da XML ben formato (come in questo caso). Questo comportamento è corretto ed è documentato qui: https://bugzilla.mozilla.org/show_bug.cgi?id=311724 - l'articolo verrà rivisto per correggere questo errore.

+ +

Nota 2: se si invia una richiesta con una porzione di codice che restituisce XML e non un file XML statico, bisogna impostare alcune intestazioni nella risposta perchè la pagina funzioni anche su Internet Explorer. Se non si imposta l'intestazione Content-Type: application/xml, IE lancia un errore JavaScript 'Object Expected' appena si cerca di accedere a un elemento XML. Se non si imposta l'intestazione Cache-Control: no-cache, il browser registra la risposta nella cache e non rieseguirà più la richiesta, il che fa impazzire molti sviluppatori in fase di debugging.

+ +

Nota 3: se la variabile http_request è globale, se vi sono altre funzioni che chiamano makeRequest(), possono sovrasciversi a vicenda. Per evitare questo problema, occorre dichiarare questa variabile come locale e passarla alla funzione alertContent().

+ +

Nota 4: nel registrare la funzione callback per onreadystatechange non è possibile passare alcun argomento:

+ +
http_request.onreadystatechange = function() { alertContents(http_request); };  //1 (richiesta simultanea)
+http_request.onreadystatechange = alertContents(http_request); //2 (non funziona)
+http_request.onreadystatechange = alertContents;  //3 (variabile globale)
+
+ +

Il metodo 1 permette di elaborare diverse richieste simultaneamente. Il metodo 2 non funziona. Il metodo 3 è da utilizzare se http_request è una variabile globale.

+ +

Passo 4 - "Gli X-Files", o Elaborare la risposta XML

+ +

Nell'esempio precedente, dopo che la risposta HTTP è stata ricevuta si è utilizzata la proprietà reponseText dell'oggetto richiesta, che conteneva i contenuti del file <tt>test.html</tt>. Proveremo ora a utilizzare la proprietà responseXML.

+ +

Prima di tutto, occorre creare un documento XML valido che verrà chiamato in seguito. Il documento (<tt>test.xml</tt>) contiene quanto segue:

+ +
<?xml version="1.0" ?>
+<root>
+    Sono un test.
+</root>
+
+ +

Nello script occorre cambiare soltanto la riga seguente:

+ +
...
+onclick="eseguiRichiesta('test.xml')">
+...
+
+ +

In alertContents(), bisogna poi sostituire la riga alert(http_request.responseText); con:

+ +
var xmldoc = http_request.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+
+ +

Questo codice prende l'oggetto XMLDocument fornito da responseXML e utilizza i metodi DOM per accedere ai dati contenuti nel documento XML. Si può vedere test.xml qui. Si può vedere in azione questa versione dello script qui.

+ +

Per ulteriori dettagli sui metodi DOM, si vedano i documenti sull'Implementazione DOM di Mozilla.

+ +
+

La bozza di standard del W3C indica i seguenti valori per la proprietà readystate:

+ + + +

Fonte

+ +

{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar" } ) }}

diff --git a/files/it/web/guide/api/index.html b/files/it/web/guide/api/index.html new file mode 100644 index 0000000000..3f571c0cb8 --- /dev/null +++ b/files/it/web/guide/api/index.html @@ -0,0 +1,26 @@ +--- +title: Guide to Web APIs +slug: Web/Guide/API +tags: + - API + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide/API +--- +

Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.

+ + +

Web APIs from A to Z

+ +

{{ListGroups}}

+ +

See also

+ + diff --git a/files/it/web/guide/css/index.html b/files/it/web/guide/css/index.html new file mode 100644 index 0000000000..20621b40b0 --- /dev/null +++ b/files/it/web/guide/css/index.html @@ -0,0 +1,23 @@ +--- +title: CSS developer guide +slug: Web/Guide/CSS +tags: + - CSS + - Guide + - Landing + - NeedsTranslation + - TopicStub +translation_of: Learn/CSS +--- +

{{draft}}

+

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or other markup languages such as SVG. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media. The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.

+

CSS is one of the core languages of the open Web and has a standardized W3C specification.

+

{{LandingPageListSubpages}}

+

Pages elsewhere

+

Here are other pages related to CSS that should be linked to from here.

+

See also

+ diff --git a/files/it/web/guide/graphics/index.html b/files/it/web/guide/graphics/index.html new file mode 100644 index 0000000000..7221d89ec7 --- /dev/null +++ b/files/it/web/guide/graphics/index.html @@ -0,0 +1,58 @@ +--- +title: Graphics on the Web +slug: Web/Guide/Graphics +tags: + - 2D + - 3D + - Canvas + - Grafica + - HTML5 + - SVG + - WebGL + - WebRTC +translation_of: Web/Guide/Graphics +--- +

I moderni Siti Web e Applicazioni, spesso necessitano di mostrare una grafica. Mostrare delle immagini statiche, può essere fatto facilmente usando l'elemento immagine {{HTMLElement("img")}} , Oppure settando lo sfondo di elementi HTML usando la proprietà dello sfondo css {{cssxref("background-image")}}. Spesso è possibile creare anche grafici "al volo", oppure manipolare immagini dopo averle fatte.Questi articoli forniscono infomazioni su come si può ottenere questo risultato

+ +
+
+

Grafiche 2D

+ +
+
Canvas
+
L'elemento {{HTMLElement("canvas")}} fornisce APIs per disegnare grafica 2D usando JavaScript.
+
SVG
+
La Grafica a Vettori Scalabile (SVG) consente di usare linee, curve, e altre forme geometriche per realizzare grafica. Evitando l'utilizzo di bitmaps, potete creare immagini che scalano in modo pulito ad ogni dimensione.
+
+ +

 

+ +

 

+ +

 

+ +

 

+ +

View All...

+
+ +
+

Grafiche 3D

+ +
+
WebGL
+
Una guida per come iniziare con WebGL, L' API di grafica 3D per il Web. Questa tecnologia consente un uso standard delle OpenGL.Ad esempio un contenuto Web
+
+ +

Video

+ +
+
Usare  l'audio e il video HTML5
+
Incorporare un video in un documento HTML e controllare la riproduzione.
+
WebRTC
+
L'acronimo RTC in WebRTC sta per Real-Time Communications, technology (Comunicazioni in Tempo Reali) che abilitano lo streaming audio/video e la condivisione di dati tra i browser e i clienti (peers).
+
+
+
+ +

 

diff --git a/files/it/web/guide/html/categorie_di_contenuto/index.html b/files/it/web/guide/html/categorie_di_contenuto/index.html new file mode 100644 index 0000000000..94eae32320 --- /dev/null +++ b/files/it/web/guide/html/categorie_di_contenuto/index.html @@ -0,0 +1,141 @@ +--- +title: Categorie di contenuto +slug: Web/Guide/HTML/Categorie_di_contenuto +translation_of: Web/Guide/HTML/Content_categories +--- +

Ciascun elemento HTML deve rispettare le regole che definiscono che tipo di contenuto può avere. Queste regole sono raggruppate in modelli di contenuto comuni a diversi elementi. Ogni elemento HTML appartiene a nessuno, uno, o diversi modelli di contenuto, ognuno dei quali possiede regole che devono essere seguite in un documento conforme HTML.

+ +

Vi sono tre tipi di categorie di contenuto:

+ + + +
Content_categories_venn.png
+ +

Categorie di contenuto principale

+ +

Contenuto di Metadati

+ +

Gli elementi appartenenti alla categoria dei metadati modificano la presentazione o il comportamento del resto del documento, impostano collegamenti ad altri documenti, o comunicano altre informazioni non in linea.

+ +

Gli elementi che appartengono a questa categoria sono {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} e {{HTMLElement("title")}}.

+ +

Contenuto di flusso

+ +

Gli elementi che appartengono alla catogoria dei contenuti di flusso tipicamente contengono testo o altri contenuti. Essi sono: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e Text.

+ +

Pochi altri elementi appartengono a questa categoria, ma solo in determinale condizioni:

+ + + +

Contenuto di sezione

+ +

Gli elementi che appartengono ai modelli di contenuti di sezione creano una sezione nell'attuale contorno che definisce gli'ambiti degli elementi  {{HTMLElement("header")}} , degli elementi {{HTMLElement("footer")}} , e dei contenuti di intestazione.

+ +

Elementi appartenenti a questa categoria sono {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} e {{HTMLElement("section")}}. 

+ +
+

Nota: non confondere questo modello di contenuto con la categoria  sezione radice , che isola il suo contenuto dal regolare contorno.

+
+ +

Contenuto di intestazione

+ +

Il contenuto di intestazione definisce il titolo della sezione, se contrassegnato da un esplicito elemento di contenuto di intestazione  o implicitamente definito da un contenuto di intestazione.

+ +

Elementi appartenenti a questa categoria sono {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} e {{HTMLElement("hgroup")}}.

+ +
+

Nota: Consideralo possibilmente come un contenuto di intestazione, l' {{HTMLElement("header")}} non è un contenuto di intestazione.

+
+ +

Contenuto di enunciazione

+ +

Il contenuto di enunciazione definisce il testo e la marcatura che essa contiene.Si appropria del contenuto di Enunciazione dei paragrafi.

+ +

Elementi appartenenti a questa categoria sono {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e il puro text (che non consiste soltanto nello spazio bianco dei caratteri).

+ +

Molte altri elementi appartengono da questa categoria,ma solo se vengono soddisfatte delle specifiche condizioni:

+ + + +

Contenuto integrato

+ +

Il contenuto integrato importa un'altra risorsa o inserisce contenuto da un'altro linguaggio di marcatura o un namespace nel documento.Elementi che appartengono a questa categoria includono: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("svg")}}, {{HTMLElement("video")}}.

+ +

Contenuto interattivo

+ +

Il contenuto interattivo include elementi che sono speficatamente progettati per l'interazione dell'utente. Elementi che provengono da questa categoria includono: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+ Alcuni elementi appartengono a questa categoria solo sotto  specifiche condizioni:

+ + + +

Contenuto modulo-associato

+ +

Il contento modulo-associato comprende elementi che ha un modulo beneficiario ,mostrato attraverso l'attributo form.Un beneficiario di un modulo  è o l'elemento contenente {{HTMLElement("form")}} o è l' elemento che ha id specificato nell'attributo form.

+ + + +

 Questa categoria contiene diverse altre sotto-categorie:

+ +
+
elencati
+
Elementi che sono elencati nel elementi.modulo ed il fieldset.Collezioni di elementi IDL. Contiene{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
l'abilità labelable
+
Elementi che possono essere associati con elementi {{HTMLElement("label")}}. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
Dati Inviabili tramite un form
+
Elementi che possono essere usati per costruire il modulo dati quando il modulo é stato inviato. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
reset dei dati di un form
+
Elementi che possono essere usati per portare il form al reset delle impostazioni originarie.Contiene {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
+ +

Modello di contenuto trasparente

+ +

Se un elemento ha un modello di contenuto trasparente,allora i suoi contenuti possono essere strutturati come quelli validi in  HTML5, perfino se l'elemento trasparente era stato rimosso e rimpiazzato da elemento figlio.

+ +

Per esempio, gli elementi {{HTMLElement("del")}} e {{HTMLELement("ins")}}sono trasparenti:

+ +
<p>Tratteniamo queste verità per essere<del><em>consacrate &amp; innegabili</em></del> <ins>chiare</ins>.</p>
+
+ +

Se quegli elementi verranno rimossi, questo frammento potrebbe essere ancora un valido HTML (anche se non in corretto italiano).

+ +
<p>Tratteniamo queste verità per essere<del><em>consacrate &amp; innegabili</em></del> <ins>chiare</ins>.</p>
+ +

Altri modelli di contenuto

+ +

Sezione radice.

diff --git a/files/it/web/guide/html/editable_content/index.html b/files/it/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..e878289a2c --- /dev/null +++ b/files/it/web/guide/html/editable_content/index.html @@ -0,0 +1,216 @@ +--- +title: Making content editable +slug: Web/Guide/HTML/Editable_content +translation_of: Web/Guide/HTML/Editable_content +--- +

Inprogress! In HTML, any element can be editable. By using some JavaScript event handlers, you can transform your web page into a full and fast rich text editor. This article provides some information about this functionality.

+ +

How does it work?

+ +

All you have to do is set the {{htmlattrxref("contenteditable")}} attribute on nearly any HTML element to make it editable.

+ +

Here's a simple example which creates a {{HTMLElement("div")}} element whose contents the user can edit.

+ +
<div contenteditable="true">
+  This text can be edited by the user.
+</div>
+ +

Here's the above HTML in action:

+ +

{{ EmbedLiveSample('How_does_it_work') }}

+ +

Executing commands

+ +

When an HTML element has contenteditable set to true, the {{ domxref("document.execCommand()") }} method is made available. This lets you run commands to manipulate the contents of the editable region. Most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting). When using contentEditable, calling execCommand() will affect the currently active editable element.

+ +

Differences in markup generation

+ +

Use of contenteditable across different browsers has been painful for a long time because of the differences in generated markup between browsers. For example, even something as simple as what happens when you press Enter/Return to create a new line of text inside an editable element was handled differently across the major browsers (Firefox inserted {{htmlelement("br")}} elements, IE/Opera used {{htmlelement("p")}}, Chrome/Safari used {{htmlelement("div")}}).

+ +

Fortunately, in modern browsers things are somewhat more consistent. As of Firefox 55, Firefox has been updated to wrap the separate lines in {{htmlelement("div")}} elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.

+ +

Try it out in the above example.

+ +
+

Note: Internet Explorer, which is no longer being developed, uses {{htmlelement("p")}} elements instead of <div>.

+
+ +

If you want to use a different paragraph separator, the above browsers all support {{domxref("document.execCommand")}}, which provides a DefaultParagraphSeparator command to allow you to change it. For example, to use {{htmlelement("p")}} elements:

+ +
document.execCommand("DefaultParagraphSeparator", false, "p");
+ +

Security

+ +

For security reasons, Firefox doesn't let JavaScript code use clipboard related features (copy, paste, etc.) by default. You can enable them by setting the preferences shown below using about:config:

+ +
user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+ +

Example: A simple but complete rich text editor

+ +
+
<!doctype html>
+<html>
+<head>
+<title>Rich Text Editor</title>
+<script type="text/javascript">
+var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchMode.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchMode.checked) { return true ; }
+  alert("Uncheck \"Show HTML\".");
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
+  oPrntWin.document.close();
+}
+</script>
+<style type="text/css">
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; }
+#textBox {
+  width: 540px;
+  height: 200px;
+  border: 1px #000000 solid;
+  padding: 12px;
+  overflow: scroll;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  min-width: 498px;
+  min-height: 200px;
+}
+#editMode label { cursor: pointer; }
+</style>
+</head>
+<body onload="initDoc();">
+<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
+<input type="hidden" name="myDoc">
+<div id="toolBar1">
+<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option selected>- formatting -</option>
+<option value="h1">Title 1 &lt;h1&gt;</option>
+<option value="h2">Title 2 &lt;h2&gt;</option>
+<option value="h3">Title 3 &lt;h3&gt;</option>
+<option value="h4">Title 4 &lt;h4&gt;</option>
+<option value="h5">Title 5 &lt;h5&gt;</option>
+<option value="h6">Subtitle &lt;h6&gt;</option>
+<option value="p">Paragraph &lt;p&gt;</option>
+<option value="pre">Preformatted &lt;pre&gt;</option>
+</select>
+<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- font -</option>
+<option>Arial</option>
+<option>Arial Black</option>
+<option>Courier New</option>
+<option>Times New Roman</option>
+</select>
+<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- size -</option>
+<option value="1">Very small</option>
+<option value="2">A bit small</option>
+<option value="3">Normal</option>
+<option value="4">Medium-large</option>
+<option value="5">Big</option>
+<option value="6">Very big</option>
+<option value="7">Maximum</option>
+</select>
+<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- color -</option>
+<option value="red">Red</option>
+<option value="blue">Blue</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- background -</option>
+<option value="red">Red</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+</div>
+<div id="toolBar2">
+<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" />
+<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">
+<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" />
+<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" />
+<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg==">
+<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
+<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
+<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
+<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" />
+<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" />
+<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" />
+<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" />
+<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" />
+<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" />
+<img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" />
+<img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" />
+<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" />
+<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" />
+<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" />
+<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" />
+</div>
+<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
+<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
+<p><input type="submit" value="Send" /></p>
+</form>
+</body>
+</html>
+
+
+ +
Note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
+ +

See also

+ + diff --git a/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html b/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html new file mode 100644 index 0000000000..0beccd9e00 --- /dev/null +++ b/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html @@ -0,0 +1,420 @@ +--- +title: Rich-Text Editing in Mozilla +slug: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +translation_of: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +--- +

Introduzione

+ +

Mozilla 1.3 introduce un'implementazione della caratteristica designMode di Microsoft® Internet Explorer. In Mozilla 1.3, il supporto al rich-text editing supporta la caratteristica designMode che trasforma i documenti HTML in editor rich-text. Partendo da Firefox 3, Mozilla supporta anche l'attributo contentEditable di Internet Explorer che permette a qualsiasi elemento di diventare un elemento modificabile o non (la seconda caratteristica viene usata per prevenire cambiamenti ad un elemento che non deve essere modificato).

+ +

Impostare il Rich-Text Editing

+ +

Il Rich-text editing viene inizializzato tramite la proprietà designMode di un documento ad "On", come un documento all'interno di un iframe. Una volta che designMode viene impostato ad "On", il documento diventa un'area di rich-text editing e l'utente può digitare dentro questa come se fosse una textarea. The most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website.

+ +

Allo stesso modo, impostando contentEditable a "true" ti permette di rendere modificabili singoli elementi di un documento.

+ +

Eseguire i Comandi

+ +

Quando un documento HTML viene impostato come modificabile con designMode, l'oggetto document rilascia il metodo  execCommand, la quale permette di eseguire dei comandi per manipolare il contenuto dell'area modificabile. Molti comandi agiscono sulla selezione del testo nel documento (grassetto, corsivo, ecc), mentre altri inseriscono nuovi elementi (collegamenti) o agisco su un'intera riga (indentazione). Quando si usa contentEditable, il metodo execCommand coinvolgerà l'attuale elemento attivo modificabile.

+ +
execCommand(Stringa nomeComando, Booleano mostraUIPredefinita, Stringa valoreArgomento)
+
+ +

Argomenti

+ +
+
+
Stringa nomeComando
+
il nome del comando
+
+
+ +
+
+
Booleano mostraUIPredefinita
+
se l'interfaccia utente standard deve essere visualizzata. Questa caratteristica non è implementata in Mozilla.
+
+
+ +
+
+
Stringa valoreArgomento
+
alcuni comandi (come insertimage) richiedono un valore per un argomento extra (l'indirizzo dell'immagine). Passa un argomento oppure null, se l'argomento non è necessario.
+
+
+ +

Comandi

+ +
+
+
backColor
+
Cambia il colore di sfondo del documento. In modalità styleWithCss invece, questo agisce sul colore di sfondo del blocco che lo contiene. Richiede un valore esadecimale do un colore da passare come argomento. (Internet Explorer usa questo comando per impostare il colore di sfondo del testo.)
+
+
+ +
+
+
bold
+
Attiva o disattiva il grassetto sulla selezione corrente o alla posizione del cursore. (Internet Explorer usa il tag STRONG al posto di B.)
+
+
+ +
+
+
contentReadOnly
+
Rende il contenuto del documento modificabile o di sola lettura. Richiede una valore booleano true/false da passare come argomento. (Non è supportato da Internet Explorer.)
+
+
+ +
+
+
copy
+
Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi 
+
+
+ +
+
+
createLink
+
Crea un collegamento dalla selezione, solo se esiste la selezione. Richiede una stringa contenente l'indirizzo del collegamento da passare come argomento. L'indirizzo deve contenere almeno un unico carattere, che può essere uno spazio bianco. (Internet Explorer creerà un link con un valore null.)
+
+
+ +
+
+
cut
+
+ +
+
Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi 
+
+
+ +
+
+
decreaseFontSize
+
Aggiunge un tag SMALL attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)
+
+
+ +
+
+
delete
+
Cancella la selezione corrente.
+
+
+ +
+
+
fontName
+
Cambia il carattere alla selezione o alla posizione del cursore. Richiede una stringa, con il nome di un font ("Arial" per esempio) da passare come argomento.
+
+
+ +
+
+
fontSize
+
Cambia la dimensione del testo nella selezione o alla posizione del cursore. Richiede una dimensione HTML (1-7) da passare come argomento.
+
+
+ +
+
+
foreColor
+
Cambia il colore del testo alla selezione on alla posizione del cursore. Richiede una stringa con il valore esadecimale del colore da passare come argomento.
+
+
+ +
+
+
formatBlock
+
Aggiunge un tag di blocco-stile attorno alla selezione o alla posizione del cursore. Richiede una stringa con il nome del tag da passare come argomento. Praticamente possono essere usati tutti i blocchi di stile (es. "H1", "EM", "BUTTON", "TEXTAREA"). (Internet Explorer supporta soltanto i tags di intestazione H1 - H6, ADDRESS, e PRE, e devono essere racchiusi all'interno dei delimitatori < >, quindi l'argomento dovrà essere passato come "<H1>".)
+
+
+ +
+
+
heading
+
Aggiunge un'intestazione attorno la selezione o sulla riga in cui è posizionato il cursore. Richiede una stringa con il nome del tag da passare come argomento (es. "H1", "H6"). (Non supportato da Internet Explorer.)
+
+
+ +
+
+
hiliteColor
+
Cambia il colore di sfondo della selezione o della posizione del cursore. Richiede una stringa con il valore esadecimale del colore da passare come argomento. UseCSS deve essere attivata per usare questa funzione. (Non supportato da Internet Explorer.)
+
+
+ +
+
+
increaseFontSize
+
Aggiunge il tag BIG attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)
+
+
+ +
+
+
indent
+
Aumenta il rientro dell'elemento all'interno della selezione corrente o alla posizione del cursore.
+
+
+ +
+
+
insertHorizontalRule
+
Inserisce una horizontal rule alla posizione del cursore (elimina la selezione).
+
+
+ +
+
+
insertHTML
+
Inserisce una stringa HTML alla posizione del cursore (elimina la selezione). Richiede una stringa HTML valida da passare come argomento. (Non supportata da Internet Explorer.)
+
+
+ +
+
+
insertImage
+
Inserisce un'immagine alla posizione del cursore (elimina la selezione). Richiede una stringa contenente l'indirizzo dell'immagine da passare come argomento. L'indirizzo deve contenere almeno un unico carattere, che può essere uno spazio bianco. (Internet Explorer creerà un link con un valore null.)
+
+
+ +
+
+
insertOrderedList
+
Crea un elenco numerato all'interno della selezione corrente o alla posizione del cursore.
+
+
+ +
+
+
insertUnorderedList
+
Crea un elenco puntato all'interno della selezione corrente o alla posizione del cursore.
+
+
+ +
+
+
insertParagraph
+
Inserisce una paragrafo attorno alla selezione o alla riga corrente. (Internet Explorer inserisce un paragrafo alla posizione del cursore e cancella la selezione.)
+
+
+ +
+
+
italic
+
Attiva o disattiva il corsivo sulla selezione o alla posizione del cursore. (Internet Explorer usa il tag EM al posto di I.)
+
+
+ +
+
+
justifyCenter
+
Allinea al centro la selezione o la posizione del cursore.
+
+
+ +
+
+
justifyLeft
+
Allinea a sinistra la selezione o la posizione del cursore.
+
+
+ +
+
+
justifyRight
+
Allinea a destra la selezione o la posizione del cursore.
+
+
+ +
+
+
outdent
+
Diminuisce il rientro dell'elemento sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
paste
+
Incolla il contenuto degli appunti alla posizione del cursore (sostituisce la selezione corrente). I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi 
+
+
+ +
+
+
redo
+
Ripristina il comando precedentemente annullato.
+
+
+ +
+
+
removeFormat
+
Rimuove tutta la formattazione dalla selezione corrente.
+
+
+ +
+
+
selectAll
+
Seleziona tutto il contenuto dell'area modificabile.
+
+
+ +
+
+
strikeThrough
+
Attiva o disattiva il testo barrato sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
subscript
+
Attiva o disattiva subscript sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
superscript
+
Attiva o disattiva superscript sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
underline
+
Attiva o disattiva la sottolineatura sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
undo
+
Annulla l'ultimo comando eseguito.
+
+
+ +
+
+
unlink
+
Rimuove il collegamento dal collegamento selezionato.
+
+
+ +
+
+
useCSS {{ Deprecated_inline() }}
+
Attiva o disattiva l'uso di tags HTML tags o CSS per la generazione del markup. Richiede una valore booleano true/false come argomento. NOTA: Questo argomento è invertito (es. usa false per usare il CSS, true per usare l'HTML). (Non supportato da Internet Explorer.) Questo comando è diventato deprecato; in alternativa usa il comando styleWithCSS.
+
+
+ +
+
+
styleWithCSS
+
Sostituisce il comando useCSS; l'argomento, a differenza del comando useCSS, l'argomento lavora come ci si aspetta, es. passato true modifica/genera attributi style nel markup, false genera elementi di formattazione.
+
+
+ +

Differenze con Internet Explorer

+ +

Una delle maggiori differenze tra Mozilla e Internet Explorer che coinvolgono designMode è il codice generato nel documento modificabile: while Internet Explorer uses HTML tags (em, i, ecc), Mozilla 1.3 will generate by default spans with inline style rules. Il comando  useCSS può essere usato per attivare o disattivare la creazione di markup HTML o CSS.

+ +

Figure 1 : Generated HTML differences

+ +
Mozilla:
+<span style="font-weight: bold;">I love geckos.</span>
+<span style="font-weight: bold; font-style: italic;
+    text-decoration: underline;">Dinosaurs are big.</span>
+
+Internet Explorer:
+<STRONG>I love geckos.</STRONG>
+<STRONG><EM><U>Dinosaurs are big.</U></EM></STRONG>
+
+ +

Un'altra differenza tra Mozilla e IE è il modo in cui si accede all'oggetto document di un iframe, con la quale viene usato in congiunzione con designMode. Mozilla usa il modo standard fornito da W3C, IFrameElement.contentDocument, mentre IE richiede IFrameElement.document.

+ +

DevEdge fornisce una classe JavaScript, xbDesignMode, il cui scopo è quello di racchiudere le caratteristiche di designMode in una classe che nasconde le differenze tra IE e Mozilla.

+ +


+ Gestione degli Eventi Disabilitati

+ +

Una significante differenza per Mozilla è che una volta che viene impostato il documento a designMode, tutti gli eventi sul determinato documento vengono disabilitati. Tuttavia, disattivato il designMode (come ora è possibile in Mozilla 1.5) gli eventi diventeranno attivi di nuovo.

+ +

Maggiori informazioni possono essere trovato nella sezione Rich text editing dell'articolo Convertire le applicazioni da Internet Explorer a Mozilla.

+ +

Esempi

+ +

Nota: I files di esempio sono stati trasferiti su un'altro sito. In questo momento non sono disponibili. --fumble 18:13, 24 Apr 2005 (PDT)

+ +

Esempio 1

+ +

Il primo esempio è un documento HTML impostato con designMode a "On". In Mozilla 1.3, questo rende l'intero documento modificabile. Tuttavia, Internet Explorer, non permette a javascript di cambiare il designMode del documento corrente. Per farlo funzionare in Internet Explorer, l'attributo contentEditable del tag body necessita di essere impostato a "true".

+ +

Figura 2 : Primo esempio

+ +
HTML:
+<body contentEditable="true" onload="load()">
+
+JavaScript:
+function load(){
+  window.document.designMode = "On";
+}
+
+ +

Esempio 2

+ +

Il secondo esempio è una semplice pagina in rich text editing, dove il testo può essere trasformato in grassetto/corsivo/sottolineato, possono essere aggiunti nuovi collegamenti e si può cambiare il colore del testo. La pagina di esempio consiste in un iframe, la quale sarà l'area rich-text, nonché gli elementi che consento di effettuare modifiche base al testo come grassetto/corsivo/colore del testo.

+ +

Figura 3 : Impostazione del rich-text editing

+ +
HTML:
+<body onload="load()">
+
+JavaScript:
+function load(){
+  getIFrameDocument("editorWindow").designMode = "On";
+}
+
+function getIFrameDocument(aID){
+  // se esiste contentDocument, W3C compliant (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    return document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    return document.frames[aID].document;
+  }
+}
+
+ +

L'esempio contiene una funzione doRichEditCommand che rende semplice l'esecuzione dei comandi nel documento dell'iframe e mantiene pulito il codice HTML. La funzione esegue il comando richiesto tramite execCommand() e dopodiché imposta il focus di nuovo al documento modificabile, come anche cliccando su di un pulsante imposterà il focus su pulsante stesso, la quale interromperà il flusso di modifica.

+ +

Figura 4 : Esecuzione dei comandi Rich Editing

+ +
HTML:
+<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>
+
+JavaScript:
+function doRichEditCommand(aName, aArg){
+  getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
+  document.getElementById('editorWindow').contentWindow.focus()
+}
+
+ +

Risorse

+ + diff --git a/files/it/web/guide/index.html b/files/it/web/guide/index.html new file mode 100644 index 0000000000..db55293bd5 --- /dev/null +++ b/files/it/web/guide/index.html @@ -0,0 +1,39 @@ +--- +title: Guida Web developer +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +

Questi articoli forniscono informazioni utili per l'utilizzo di specifiche tecnologie e API.

+ +
+
+ +
+
+ +

Guarda anche

+ + diff --git a/files/it/web/guide/woff/index.html b/files/it/web/guide/woff/index.html new file mode 100644 index 0000000000..c3fb596778 --- /dev/null +++ b/files/it/web/guide/woff/index.html @@ -0,0 +1,99 @@ +--- +title: Il Formato Open di Font per il Web (WOFF) +slug: Web/Guide/WOFF +translation_of: Web/Guide/WOFF +--- +

WOFF (Web Open Font Format, Formato Font per il Web Open) e un nuovo formato di font per il web sviluppato da Mozilla in collaborazione con Type Supply, LettError, e altre organizzazioni. Usa una versione compressa della stessa struttura sfnt basata su tabelle di TrueType, OpenType e Open Font Format, ma aggiunge alcuni metadati e strutture dati ad uso privato, compresi alcuni campi predefiniti che permettono di fornire informazioni di licenza se lo si desidera.

+ +

Usare WOFF comporta principalmente tre benefici:

+ +
    +
  1. I dati del font sono compressi, quindi i siti che usano WOFF usano meno banda e si caricheranno più in fretta rispetto a quelli che usano equivalenti non compressi come TrueType o OpenType.
    2. +
  2. Molti produttori di font che non intendono dare in licenza i propri font in formato TrueType o OpenType per l'uso nel web, daranno in licenza i font in formato WOFF. Questo migliora la disponibilità di font ai designer di siti web.
    3. +
  3. I produttori di browser (sia proprietari che liberi) apprezzano il formato WOFF, che ha quindi il potenziale per diventare un formato per i font realmente universale e interoperabile, a differenza degli attuali formati per i font.
    4. +
+ +

Usare WOFF

+ +

Puoi usare la proprietà CSS {{cssxref("@font-face")}} per utilizzare i font WOFF per il testo nei contenuti web. Funziona esattamente come i formati OpenType e TrueType, eccetto per il fatto che molto probabilmente renderà lo scaricamento molto più efficiente grazie alla compressione.

+ +

Strumenti per lavorare con i font WOFF

+ +

Sono disponibili Strumenti per lavorare con i font WOFF. sfnt2woff e woff2sfnt convertono da WOFF a OpenType e viceversa.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('WOFF1.0', '', '')}}{{Spec2('WOFF1.0')}}Specifica iniziale.
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base6.0{{CompatGeckoDesktop("1.9.1")}}9.011.105.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vedi anche

+ + -- cgit v1.2.3-54-g00ecf