diff options
author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/it/web/guide | |
parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip |
remove retired locales (#699)
Diffstat (limited to 'files/it/web/guide')
-rw-r--r-- | files/it/web/guide/ajax/getting_started/index.html | 253 | ||||
-rw-r--r-- | files/it/web/guide/ajax/index.html | 57 | ||||
-rw-r--r-- | files/it/web/guide/api/index.html | 26 | ||||
-rw-r--r-- | files/it/web/guide/graphics/index.html | 58 | ||||
-rw-r--r-- | files/it/web/guide/html/content_categories/index.html | 142 | ||||
-rw-r--r-- | files/it/web/guide/html/editable_content/index.html | 216 | ||||
-rw-r--r-- | files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html | 420 | ||||
-rw-r--r-- | files/it/web/guide/html/html5/index.html | 168 | ||||
-rw-r--r-- | files/it/web/guide/html/html5/introduction_to_html5/index.html | 23 | ||||
-rw-r--r-- | files/it/web/guide/html/using_html_sections_and_outlines/index.html | 321 | ||||
-rw-r--r-- | files/it/web/guide/index.html | 39 | ||||
-rw-r--r-- | files/it/web/guide/mobile/index.html | 19 | ||||
-rw-r--r-- | files/it/web/guide/parsing_and_serializing_xml/index.html | 1194 | ||||
-rw-r--r-- | files/it/web/guide/woff/index.html | 99 |
14 files changed, 0 insertions, 3035 deletions
diff --git a/files/it/web/guide/ajax/getting_started/index.html b/files/it/web/guide/ajax/getting_started/index.html deleted file mode 100644 index 955354bbc3..0000000000 --- a/files/it/web/guide/ajax/getting_started/index.html +++ /dev/null @@ -1,253 +0,0 @@ ---- -title: Iniziare -slug: Web/Guide/AJAX/Getting_Started -tags: - - AJAX - - Tutte_le_categorie -translation_of: Web/Guide/AJAX/Getting_Started -original_slug: Web/Guide/AJAX/Iniziare ---- -<p> </p> - -<p>Questo articolo spiega le fondamenta di AJAX e fornisce due semplici esempi per iniziare.</p> - -<h3 id="Cos.27.C3.A8_AJAX.3F" name="Cos.27.C3.A8_AJAX.3F">Cos'è AJAX?</h3> - -<p>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.</p> - -<p>Le funzionalità di cui stiamo parlando sono:</p> - -<ul> - <li>la possibilità di eseguire richieste al server senza ricaricare la pagina</li> - <li>la possibilità di interpretare e lavorare con i documenti XML</li> -</ul> - -<h3 id="Passo_1_.E2.80.93_D.C3.AC_.22per_favore.22.2C_o_Come_fare_una_richiesta_HTTP" name="Passo_1_.E2.80.93_D.C3.AC_.22per_favore.22.2C_o_Come_fare_una_richiesta_HTTP">Passo 1 – Dì "per favore", o Come fare una richiesta HTTP</h3> - -<p>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 <code>XMLHTTP</code>. Successivamente Mozilla, Safari e altri browser hanno implementato la classe <code>XMLHttpRequest</code>, che supporta gli stessi metodi e le stesse proprietà della classe di Microsoft.</p> - -<p>Il risultato è che per creare un'istanza (oggetto) da tale classe che funzioni sui diversi browser, occorre scrivere un codice simile al seguente:</p> - -<pre>if (window.XMLHttpRequest) { // Mozilla, Safari, ... - http_request = new XMLHttpRequest(); -} else if (window.ActiveXObject) { // IE - http_request = new ActiveXObject("Microsoft.XMLHTTP"); -} -</pre> - -<p>(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)</p> - -<p>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 <code>mime-type</code>. 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 <code>text/xml</code>.</p> - -<pre>http_request = new XMLHttpRequest(); -http_request.overrideMimeType('text/xml'); -</pre> - -<p>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à <code>onreadystatechange</code> dell'oggetto con il nome della funzione JavaScript, in questo modo:</p> - -<p><code>http_request.onreadystatechange = nomeFunzione;</code></p> - -<p>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:</p> - -<pre>http_request.onreadystatechange = function(){ - // azioni da eseguire... -}; -</pre> - -<p>Dopo aver dichiarato ciò che accadrà quando si riceverà la risposta dal server, occorre inviare la richiesta. Bisogna chiamare i metodi <code>open()</code> e <code>send()</code> della classe che esegue le richieste, in questo modo:</p> - -<pre>http_request.open('GET', 'http://www.esempio.org/qualsiasi.file', true); -http_request.send(null); -</pre> - -<ul> - <li>Il primo parametro da passare a <code>open()</code> è il metodo che si desidera utilizzare per la richiesta HTTP: GET, POST, HEAD o qualsiasi altro metodo che si desideri utilizzare e sia supportato dal server. Il metodo deve essere scritto in lettere MAIUSCOLE, come specificato dallo standard HTTP; altrimenti alcuni browser (come Firefox) potrebbero non eseguire la richiesta. Per ulteriori informazioni sui possibili metodi da utilizzare si veda le: <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">specifiche del W3C</a></li> - <li>Il secondo parametro è l'URL della pagina che si sta richiedendo. Per ragioni di sicurezza, non è possibile chiamare pagine che si trovino su un dominio differente da quello in cui si trova la pagina corrente. Bisogna anche assicurarsi di utilizzare esattamente lo stesso dominio in tutte le pagine o si avrà un errore di 'permission denied' quando si chiama il metodo <code>open()</code>. Un errore comune è quello di accedere al sito da <tt>dominio.org</tt> e cercare poi di chiamare pagine che si trovano su <tt>www.dominio.org</tt></li> - <li>Il terzo parametro specifica se la richiesta deve essere asincrona. Se è impostato a <code>TRUE</code> (e di solito è così), la funzione JavaScript resterà in esecuzione anche prima dell'arrivo della risposta.</li> -</ul> - -<p>Il parametro del metodo <code>send()</code> è costituito dai dati che si vogliono inviare al server se la richiesta è di tipo <code>POST</code>. I dati vengono passati sotto forma di querystring, così:</p> - -<p><code>nome1=valore1&nome2=valore2&ecc=ecc</code></p> - -<p>Si noti che se si desidera inviare i dati come <code>POST</code>, occorre modificare il tipo MIME della richiesta con la riga seguente:</p> - -<pre>http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); -</pre> - -<p>In caso contrario, il server ignorerà la richiesta.</p> - -<h3 id="Step_2_.E2.80.93_.22Via.21.22_o_Come_gestire_la_risposta_del_server" name="Step_2_.E2.80.93_.22Via.21.22_o_Come_gestire_la_risposta_del_server">Step 2 – "Via!" o Come gestire la risposta del server</h3> - -<p>Come si è detto, all'atto di inviare la richiesta, si è fornito il nome della funzione JavaScript che deve elaborare la risposta.</p> - -<p><code>http_request.onreadystatechange = nomeFunzione;</code></p> - -<p>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:</p> - -<p> </p> - -<pre>if (http_request.readyState == 4) { - // tutto a posto, la risposta è stata ricevuta -} else { - // non sono ancora pronto -} -</pre> - -<p>Ecco la lista completa dei possibili valori di <code>readyState</code>:</p> - -<ul> - <li>0 (non inizializzato)</li> - <li>1 (sta caricando)</li> - <li>2 (già caricato)</li> - <li>3 (interattivo)</li> - <li>4 (completato)</li> -</ul> - -<p>(<a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp">Fonte</a>) (1)</p> - -<p>Bisognerà poi controllare il codice di stato della risposta HTTP. Tutti i codici possibili sono elencati nel <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">sito del W3C</a>. Per i nostri scopi, ci interessa soltanto il codice <code>200 OK</code>.</p> - -<pre>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) -} -</pre> - -<p>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à:</p> - -<ul> - <li><code>http_request.responseText</code> – restituisce la risposta sotto forma di stringa di testo</li> - <li><code>http_request.responseXML</code> – restituisce la risposta sotto forma di oggetto <code>XMLDocument</code> che si può navigare tramite le funzioni DOM.</li> -</ul> - -<h3 id="Passo_3_-_.22Tutti_insieme_ora.21.22.2C_Un_semplice_esempio" name="Passo_3_-_.22Tutti_insieme_ora.21.22.2C_Un_semplice_esempio">Passo 3 - "Tutti insieme ora!", Un semplice esempio</h3> - -<p>Vediamo ora tutti gli elementi esaminati finora combinati insieme. Il seguente JavaScript richiede un documento HTML (<code>test.html</code>), che contiene il testo "Sono un test.", e farà un <code>alert()</code> coi contenuti di questo file.</p> - -<pre><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> -</pre> - -<p>In questo esempio:</p> - -<ul> - <li>L'utente clicca sul link "Fai una richiesta";</li> - <li>Viene chiamata la funzione <code>eseguiRichiesta()</code> con un parametro: il nome del file <code>test.html</code>, che si trova nella stessa directory;</li> - <li>Il browser esegue la richiesta e l'esecuzione passa a <code>alertContents()</code>;</li> - <li><code>alertContents()</code> controlla se l'esecuzione è stata ricevuta e se lo stato della risposta è OK: in caso affermativo chiama un <code>alert()</code> con i contenuti del file <code>test.html</code>.</li> -</ul> - -<p>Si può provare questo esempio <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test.html">qui</a> e si può leggere il file "test.html" <a class="external" href="http://www.w3clubs.com/mozdev/test.html">qui</a>.</p> - -<p><b>Nota</b>: La riga di codice <code> http_request.overrideMimeType('text/xml');</code> 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: <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311724" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=311724</a> - l'articolo verrà rivisto per correggere questo errore.</p> - -<p><b>Nota 2</b>: 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 <code>Content-Type: application/xml</code>, IE lancia un errore JavaScript 'Object Expected' appena si cerca di accedere a un elemento XML. Se non si imposta l'intestazione <code>Cache-Control: no-cache</code>, il browser registra la risposta nella cache e non rieseguirà più la richiesta, il che fa impazzire molti sviluppatori in fase di debugging.</p> - -<p><b>Nota 3</b>: se la variabile <code>http_request</code> è globale, se vi sono altre funzioni che chiamano <code>makeRequest()</code>, possono sovrasciversi a vicenda. Per evitare questo problema, occorre dichiarare questa variabile come locale e passarla alla funzione <code>alertContent()</code>.</p> - -<p><b>Nota 4</b>: nel registrare la funzione callback per <code>onreadystatechange</code> non è possibile passare alcun argomento:</p> - -<pre>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) -</pre> - -<p>Il metodo 1 permette di elaborare diverse richieste simultaneamente. Il metodo 2 non funziona. Il metodo 3 è da utilizzare se <code>http_request</code> è una variabile globale.</p> - -<h3 id="Passo_4_-_.22Gli_X-Files.22.2C_o_Elaborare_la_risposta_XML" name="Passo_4_-_.22Gli_X-Files.22.2C_o_Elaborare_la_risposta_XML">Passo 4 - "Gli X-Files", o Elaborare la risposta XML</h3> - -<p>Nell'esempio precedente, dopo che la risposta HTTP è stata ricevuta si è utilizzata la proprietà <code>reponseText</code> dell'oggetto richiesta, che conteneva i contenuti del file <tt>test.html</tt>. Proveremo ora a utilizzare la proprietà <code>responseXML</code>.</p> - -<p>Prima di tutto, occorre creare un documento XML valido che verrà chiamato in seguito. Il documento (<tt>test.xml</tt>) contiene quanto segue:</p> - -<pre><?xml version="1.0" ?> -<root> - Sono un test. -</root> -</pre> - -<p>Nello script occorre cambiare soltanto la riga seguente:</p> - -<pre>... -onclick="eseguiRichiesta('test.xml')"> -... -</pre> - -<p>In <code>alertContents()</code>, bisogna poi sostituire la riga <code>alert(http_request.responseText);</code> con:</p> - -<pre>var xmldoc = http_request.responseXML; -var root_node = xmldoc.getElementsByTagName('root').item(0); -alert(root_node.firstChild.data); -</pre> - -<p>Questo codice prende l'oggetto <code>XMLDocument</code> fornito da <code>responseXML</code> e utilizza i metodi DOM per accedere ai dati contenuti nel documento XML. Si può vedere <code>test.xml</code> <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">qui</a>. Si può vedere in azione questa versione dello script <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">qui</a>.</p> - -<p>Per ulteriori dettagli sui metodi DOM, si vedano i documenti sull'<a class="external" href="http://www.mozilla.org/docs/dom/">Implementazione DOM di Mozilla</a>.</p> - -<hr> -<p><small>La bozza di standard del W3C indica i seguenti valori per la proprietà <code>readystate</code>: </small></p> - -<ul> - <li>0 Non inizializzato: il valore iniziale</li> - <li>1 Aperto: il metodo open() è stato chiamato con successo</li> - <li>2 Inviato: il browser a completato la richiesta con successo, ma ancora non ha ricevuto alcun dato in risposta</li> - <li>3 Ricezione: immediatamente prima di ricevere il corpo del documento (se esiste). Tutte le intestazioni HTTP sono state ricevute (la bozza pone però un quesito: come comportarsi con le richieste di tipo HEAD?)</li> - <li>4 Caricato: il trasferimento dei dati è stato completato</li> -</ul> - -<p><a class="external" href="http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/#xmlhttprequest">Fonte</a></p> - -<p>{{ 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" } ) }}</p> diff --git a/files/it/web/guide/ajax/index.html b/files/it/web/guide/ajax/index.html deleted file mode 100644 index 5f8b87ee74..0000000000 --- a/files/it/web/guide/ajax/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: AJAX -slug: Web/Guide/AJAX -tags: - - AJAX - - Tutte_le_categorie -translation_of: Web/Guide/AJAX ---- -<p> -</p> -<div class="callout-box"><b><a href="it/AJAX/Iniziare">AJAX:Iniziare</a></b><br>Una introduzione ad AJAX.</div> -<p><b>Asynchronous JavaScript and XML (AJAX)</b> non è di per sè una tecnologia, ma è un termine che descrive un "nuovo" approccio all'utilizzo di diverse tecnologie esistenti, compresi: <a href="it/HTML">HTML</a> o <a href="it/XHTML">XHTML</a>, <a href="it/CSS">CSS</a>, <a href="it/JavaScript">JavaScript</a>, <a href="it/DOM">DOM</a>, <a href="it/XML">XML</a>, <a href="it/XSLT">XSLT</a> e l'oggetto <a href="it/XMLHttpRequest">XMLHttpRequest</a>. 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.<br> -Il W3C ha pubblicato una <a class="external" href="http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/">bozza</a> di standard per l'oggetto XMLHttpRequest. -</p> -<table class="topicpage-table"> -<tbody><tr><td> -<h4 id="Documentazione"> Documentazione </h4> -<dl><dt> <a href="it/AJAX/Iniziare">AJAX:Iniziare</a> -</dt><dd> <small>Questo articolo spiega le fondamenta di AJAX e fornisce due semplici esempi per cominciare.</small> -</dd></dl> -<dl><dt> <a href="it/Compatibilit%c3%a0_di_AJAX">Compatibilità di AJAX</a> -</dt><dd> <small>Quali browser supportano AJAX?</small> -</dd></dl> -<dl><dt> <a class="external" href="http://www.adaptivepath.com/publications/essays/archives/000385.php">Ajax: A New Approach to Web Applications</a> (EN) -</dt><dd> <small>Jesse James Garrett, di <a class="external" href="http://www.adaptivepath.com">adaptive path</a>, ha scritto questa introduzione ad AJAX nel febbraio 2005.</small> -</dd></dl> -<dl><dt> <a class="external" href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">A Simpler Ajax Path</a> (EN) -</dt><dd> <small>"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."</small> -</dd></dl> -<dl><dt> <a class="external" href="http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps">Fixing the Back Button and Enabling Bookmarking for AJAX Apps</a> (EN) -</dt><dd> <small>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.</small> -</dd></dl> -<dl><dt> <a class="external" href="http://alexbosworth.backpackit.com/pub/67688">Ajax Mistakes</a> (EN) -</dt><dd> <small>Alex Bosworth ha scritto questo articolo che evidenzia alcuni errori comuni degli sviluppatori AJAX.</small> </dd></dl> -</td> -<td> -<h4 id="Strumenti">Strumenti</h4> -<ul><li> <a class="external" href="http://www.ajaxprojects.com">Strumenti e Framework</a> </li><li> <a class="external" href="http://blog.monstuff.com/archives/000252.html">Strumento di debugging per AJAX</a> -</li><li> <a class="external" href="http://www.osflash.org/doku.php?id=flashjs">Kit di integrazione Flash/AJAX</a> -</li><li> <a class="external" href="http://www.hotajax.org">Hot!Ajax: many cool examples</a> -</li></ul> -<h4 id="Argomenti_correlati">Argomenti correlati</h4> -<ul><li> <a href="it/HTML">HTML</a> -</li><li> <a href="it/XHTML">XHTML</a> -</li><li> <a href="it/CSS">CSS</a> -</li><li> <a href="it/DOM">DOM</a> -</li><li> <a href="it/JavaScript">JavaScript</a> -</li><li> <a href="it/XML">XML</a> -</li><li> <a href="it/XMLHttpRequest">XMLHttpRequest</a> -</li><li> <a href="it/XSLT">XSLT</a> -</li><li> <a href="it/DHTML">DHTML</a> -</li></ul> -</td> -</tr> -</tbody></table> -<p><span>Interwiki Language Links</span> -</p>{{ 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/api/index.html b/files/it/web/guide/api/index.html deleted file mode 100644 index 3f571c0cb8..0000000000 --- a/files/it/web/guide/api/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Guide to Web APIs -slug: Web/Guide/API -tags: - - API - - Guide - - Landing - - NeedsTranslation - - TopicStub - - Web -translation_of: Web/Guide/API ---- -<p>Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.</p> - - -<h2 id="Web_APIs_from_A_to_Z">Web APIs from A to Z</h2> - -<p>{{ListGroups}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li> - <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li> - <li><a href="/en-US/docs/Learn">Learning web development</a></li></ul> diff --git a/files/it/web/guide/graphics/index.html b/files/it/web/guide/graphics/index.html deleted file mode 100644 index 7221d89ec7..0000000000 --- a/files/it/web/guide/graphics/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Graphics on the Web -slug: Web/Guide/Graphics -tags: - - 2D - - 3D - - Canvas - - Grafica - - HTML5 - - SVG - - WebGL - - WebRTC -translation_of: Web/Guide/Graphics ---- -<p><span class="seoSummary">I moderni Siti Web e Applicazioni, spesso necessitano di mostrare una grafica.</span> 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.<span class="seoSummary">Questi articoli forniscono infomazioni su come si può ottenere questo risultato</span></p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Grafiche 2D</h2> - -<dl> - <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt> - <dd><em>L'elemento {{HTMLElement("canvas")}} fornisce </em><em>APIs per disegnare grafica 2D usando JavaScript.</em></dd> - <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> - <dd><em>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.</em></dd> -</dl> - -<p> </p> - -<p> </p> - -<p> </p> - -<p> </p> - -<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">View All...</a></span></p> -</div> - -<div class="section"> -<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Grafiche 3D</h2> - -<dl> - <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> - <dd><em>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</em></dd> -</dl> - -<h2 id="Video">Video</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Usare l'audio e il video HTML5</a></dt> - <dd>Incorporare un<em> video in un documento HTML e controllare la riproduzione.</em></dd> - <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt> - <dd><em>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).</em></dd> -</dl> -</div> -</div> - -<p> </p> diff --git a/files/it/web/guide/html/content_categories/index.html b/files/it/web/guide/html/content_categories/index.html deleted file mode 100644 index 4081ebbe76..0000000000 --- a/files/it/web/guide/html/content_categories/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Categorie di contenuto -slug: Web/Guide/HTML/Content_categories -translation_of: Web/Guide/HTML/Content_categories -original_slug: Web/Guide/HTML/Categorie_di_contenuto ---- -<p>Ciascun elemento HTML deve rispettare le regole che definiscono che tipo di contenuto può avere. <span id="result_box" lang="it"><span class="hps">Queste regole sono</span> <span class="hps">raggruppate in</span> <span class="hps">modelli di contenuto</span> <span class="hps">comuni a</span> <span class="hps">diversi elementi</span><span>.</span></span> 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.</p> - -<p>Vi sono tre tipi di categorie di contenuto:</p> - -<ul> - <li>Le categorie del contenuto principale, che descrivono le regole comuni per il contenuto, delle quali fanno parte molti elementi</li> - <li>Le categorie relative alla figura del contenuto, che descrivono le regole comuni per gli elementi relativi alla figura</li> - <li>Le categorie dei contenuti specifici, che descrivono categorie non frequenti, condivise solo da pochi elementi, a volte solo in contesti particolari.</li> -</ul> - -<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div> - -<h2 id="Categorie_di_contenuto_principale">Categorie di contenuto principale</h2> - -<h3 id="Contenuto_di_Metadati">Contenuto di Metadati</h3> - -<p>Gli elementi appartenenti alla categoria dei <em>metadati</em> modificano la presentazione o il comportamento del resto del documento, impostano collegamenti ad altri documenti, o comunicano altre informazioni <em>non in linea</em>.</p> - -<p>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")}}.</p> - -<h3 id="Contenuto_di_flusso"><a name="flow_content">Contenuto di flusso</a></h3> - -<p>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.</p> - -<p>Pochi altri elementi appartengono a questa categoria, ma solo in determinale condizioni:</p> - -<ul> - <li>{{HTMLElement("area")}}, se discendente da un elemento {{HTMLElement("map")}}</li> - <li>{{HTMLElement("link")}}, se presente l'attributo <a href="/en-US/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li> - <li>{{HTMLElement("meta")}}, se presente l'attributo <a href="/en-US/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li> - <li>{{HTMLElement("style")}}, se l'attributo {{htmlattrxref("scoped","style")}} è presente</li> -</ul> - -<h3 id="Contenuto_di_sezione">Contenuto di sezione</h3> - -<p>Gli elementi che appartengono ai modelli di contenuti di sezione creano una <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">sezione nell'attuale contorno</a> che definisce gli'ambiti degli elementi {{HTMLElement("header")}} , degli elementi {{HTMLElement("footer")}} , e dei <a href="#heading_content" title="#heading content">contenuti di intestazione</a>.</p> - -<p>Elementi appartenenti a questa categoria sono {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} e {{HTMLElement("section")}}. </p> - -<div class="note"> -<p><em>Nota:</em> non confondere questo modello di contenuto con la categoria <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">sezione radice</a> , che isola il suo contenuto dal regolare contorno.</p> -</div> - -<h3 id="Contenuto_di_intestazione">Contenuto di intestazione</h3> - -<p>Il contenuto di intestazione definisce il titolo della sezione, se contrassegnato da un esplicito elemento di <a href="#sectioning_content" title="#sectioning content">contenuto di intestazione</a> o implicitamente definito da un contenuto di intestazione.</p> - -<p>Elementi appartenenti a questa categoria sono {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} e {{HTMLElement("hgroup")}}.</p> - -<div class="note"> -<p><em>Nota:</em> Consideralo possibilmente come un contenuto di intestazione, l' {{HTMLElement("header")}} non è un contenuto di intestazione.</p> -</div> - -<h3 id="Contenuto_di_enunciazione">Contenuto di enunciazione</h3> - -<p>Il contenuto di enunciazione definisce il testo e la marcatura che essa contiene.Si appropria del contenuto di Enunciazione dei paragrafi.</p> - -<p>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).</p> - -<p>Molte altri elementi appartengono da questa categoria,ma solo se vengono soddisfatte delle specifiche condizioni:</p> - -<ul> - <li>{{HTMLElement("a")}}, se contengono solo contenuti di Enunciazione</li> - <li>{{HTMLElement("area")}},se è il discendente di un elemento {{HTMLElement("map")}}</li> - <li>{{HTMLElement("del")}},se contiene soltanto contenuto di Enunciazione</li> - <li>{{HTMLElement("ins")}}, se contiene soltanto contenuto di Enunciazione</li> - <li>{{HTMLElement("link")}}, se l'attributo <a href="/en-US/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> è present</li> - <li>{{HTMLElement("map")}}, se contiene soltanto contenuto di Enunciazione</li> - <li>{{HTMLElement("meta")}}, se l'attributo <a href="/en-US/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> è presente</li> -</ul> - -<h3 id="Contenuto_integrato">Contenuto integrato</h3> - -<p>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")}}.</p> - -<h3 id="Contenuto_interattivo"><a name="interactive_content">Contenuto interattivo</a></h3> - -<p>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")}}.<br> - Alcuni elementi appartengono a questa categoria solo sotto specifiche condizioni:</p> - -<ul> - <li>{{HTMLElement("audio")}}, se l'attributo {{htmlattrxref("controls", "audio")}} è presente</li> - <li>{{HTMLElement("img")}}, se l'attributo {{htmlattrxref("usemap", "img")}} è presente</li> - <li>{{HTMLElement("input")}}, se l'attributo {{htmlattrxref("type", "input")}} non è nascosto</li> - <li>{{HTMLElement("menu")}}, se l'attributo {{htmlattrxref("type", "menu")}} è nella barra degli strumenti</li> - <li>{{HTMLElement("object")}}, se l'attributo {{htmlattrxref("usemap", "object")}} è presente</li> - <li>{{HTMLElement("video")}}, se l'attributo {{htmlattrxref("controls", "video")}} è presente</li> -</ul> - -<h3 id="Contenuto_modulo-associato">Contenuto modulo-associato</h3> - -<p>Il contento modulo-associato comprende elementi che ha un modulo beneficiario ,mostrato attraverso l'attributo <strong>form</strong>.Un beneficiario di un modulo è o l'elemento contenente {{HTMLElement("form")}} o è l' elemento che ha id specificato nell'attributo <strong>form</strong>.</p> - -<ul> - <li>{{HTMLElement("button")}}</li> - <li>{{HTMLElement("fieldset")}}</li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("keygen")}}</li> - <li>{{HTMLElement("label")}}</li> - <li>{{HTMLElement("meter")}}</li> - <li>{{HTMLElement("object")}}</li> - <li>{{HTMLElement("output")}}</li> - <li>{{HTMLElement("progress")}}</li> - <li>{{HTMLElement("select")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> - -<p> Questa categoria contiene diverse altre sotto-categorie:</p> - -<dl> - <dt><a name="Form_listed">elencati</a></dt> - <dd>Elementi che sono elencati nel <a href="/en-US/docs/DOM/form.elements" title="DOM/form.elements">elementi.modulo</a> 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")}}.</dd> - <dt><a name="Form_labelable">l'abilità labelable</a></dt> - <dd>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")}}.</dd> - <dt><a name="Form_submittable">Dati Inviabili tramite un <strong>form</strong></a></dt> - <dd>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")}}.</dd> - <dt><a name="Form_resettable">reset dei dati di un form </a></dt> - <dd>Elementi che possono essere usati per portare il <strong>form</strong> al reset delle impostazioni originarie.Contiene {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.</dd> -</dl> - -<h2 id="Modello_di_contenuto_trasparente">Modello di contenuto trasparente</h2> - -<p>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.</p> - -<p>Per esempio, gli elementi {{HTMLElement("del")}} e {{HTMLELement("ins")}}sono trasparenti:</p> - -<pre><p>Tratteniamo queste verità per essere<del><em>consacrate &amp; innegabili</em></del> <ins>chiare</ins>.</p> -</pre> - -<p>Se quegli elementi verranno rimossi, questo frammento potrebbe essere ancora un valido HTML (anche se non in corretto italiano).</p> - -<pre><p>Tratteniamo queste verità per essere<del><em>consacrate &amp; innegabili</em></del> <ins>chiare</ins>.</p></pre> - -<h2 id="Altri_modelli_di_contenuto">Altri modelli di contenuto</h2> - -<p>Sezione radice.</p> diff --git a/files/it/web/guide/html/editable_content/index.html b/files/it/web/guide/html/editable_content/index.html deleted file mode 100644 index e878289a2c..0000000000 --- a/files/it/web/guide/html/editable_content/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: Making content editable -slug: Web/Guide/HTML/Editable_content -translation_of: Web/Guide/HTML/Editable_content ---- -<p><span class="seoSummary">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.</span></p> - -<h2 id="How_does_it_work">How does it work?</h2> - -<p>All you have to do is set the {{htmlattrxref("contenteditable")}} attribute on nearly any HTML element to make it editable.</p> - -<p>Here's a simple example which creates a {{HTMLElement("div")}} element whose contents the user can edit.</p> - -<pre class="brush: html"><div contenteditable="true"> - This text can be edited by the user. -</div></pre> - -<p>Here's the above HTML in action:</p> - -<p>{{ EmbedLiveSample('How_does_it_work') }}</p> - -<h2 id="Executing_commands">Executing commands</h2> - -<p>When an HTML element has <code>contenteditable</code> set to <code>true</code>, the {{ domxref("document.execCommand()") }} method is made available. This lets you run <a href="/en-US/docs/Web/API/document.execCommand#Commands">commands</a> 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 <code>contentEditable</code>, calling <code>execCommand()</code> will affect the currently active editable element.</p> - -<h2 id="Differences_in_markup_generation">Differences in markup generation</h2> - -<p>Use of <code>contenteditable</code> 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")}}).</p> - -<p>Fortunately, in modern browsers things are somewhat more consistent. As of <a href="/en-US/docs/Mozilla/Firefox/Releases/55">Firefox 55</a>, Firefox has been updated to wrap the separate lines in {{htmlelement("div")}} elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.</p> - -<p>Try it out in the above example.</p> - -<div class="note"> -<p><strong>Note</strong>: Internet Explorer, which is no longer being developed, uses {{htmlelement("p")}} elements instead of <code><div></code>.</p> -</div> - -<p>If you want to use a different paragraph separator, the above browsers all support {{domxref("document.execCommand")}}, which provides a <code>DefaultParagraphSeparator</code> command to allow you to change it. For example, to use {{htmlelement("p")}} elements:</p> - -<pre class="language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"DefaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<h2 id="Security">Security</h2> - -<p>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 <code>about:config</code>:</p> - -<pre class="code">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");</pre> - -<h2 id="Example_A_simple_but_complete_rich_text_editor">Example: A simple but complete rich text editor</h2> - -<div style="height: 500px; width: auto; overflow: auto;"> -<pre class="brush: html"><!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> -</pre> -</div> - -<div class="note"><strong>Note:</strong> if you want to see how to standardize the creation and the insertion of your editor in your page, please see our <a class="internal" href="/@api/deki/files/6243/=rich-text-editor.zip" title="rich-text-editor.zip">more complete rich-text editor example</a>.</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("HTMLElement.contentEditable")}}</li> - <li>The {{htmlattrxref("contenteditable")}} global attribute</li> - <li><a href="/en-US/docs/Mozilla/Projects/Midas">Midas</a> (the scriptable text editor component)</li> - <li>{{cssxref("caret-color")}}, which lets you set the color of the text insertion caret</li> -</ul> 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 deleted file mode 100644 index 0beccd9e00..0000000000 --- a/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html +++ /dev/null @@ -1,420 +0,0 @@ ---- -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 ---- -<h3 id="Introduction" name="Introduction">Introduzione</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Mozilla 1.3 introduce un'implementazione della caratteristica designMode di Microsoft<sup>®</sup> 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 <code style="color: rgb(37, 34, 29); font-weight: inherit;">contentEditable</code> 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).</p> - -<h3 id="Setting_Up_Rich-Text_Editing" name="Setting_Up_Rich-Text_Editing">Impostare il Rich-Text Editing</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Il Rich-text editing viene inizializzato tramite la proprietà <code style="color: rgb(37, 34, 29); font-weight: inherit;">designMode</code> di un documento ad "On", come un documento all'interno di un iframe. Una volta che <code style="color: rgb(37, 34, 29); font-weight: inherit;">designMode</code> 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.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Allo stesso modo, impostando <code style="color: rgb(37, 34, 29); font-weight: inherit;">contentEditable</code> a "true" ti permette di rendere modificabili singoli elementi di un documento.</p> - -<h3 id="Executing_Commands" name="Executing_Commands">Eseguire i Comandi</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Quando un documento HTML viene impostato come modificabile con designMode, l'oggetto document rilascia il metodo <code style="color: rgb(37, 34, 29); font-weight: inherit;">execCommand,</code> 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 <code style="color: rgb(37, 34, 29); font-weight: inherit;">contentEditable</code>, il metodo <code style="color: rgb(37, 34, 29); font-weight: inherit;">execCommand</code> coinvolgerà l'attuale elemento attivo modificabile.</p> - -<pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);">execCommand(Stringa nomeComando, Booleano mostraUIPredefinita, Stringa valoreArgomento) -</pre> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Argomenti</strong></p> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">Stringa nomeComando</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">il nome del comando</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">Booleano mostraUIPredefinita</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">se l'interfaccia utente standard deve essere visualizzata. Questa caratteristica non è implementata in Mozilla.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">Stringa valoreArgomento</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">alcuni comandi (come insertimage) richiedono un valore per un argomento extra (l'indirizzo dell'immagine). Passa un argomento oppure <code style="color: rgb(37, 34, 29); font-weight: inherit;">null</code>, se l'argomento non è necessario.</dd> -</dl> -</blockquote> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Comandi</strong></p> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">backColor</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">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.)</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">bold</dt> - <dd>Attiva o disattiva il grassetto sulla selezione corrente o alla posizione del cursore. (Internet Explorer usa il tag STRONG al posto di B.)</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">contentReadOnly</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">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.)</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">copy</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi </dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">createLink</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">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.)</dd> -</dl> -</blockquote> - -<blockquote> -<dl> - <dt>cut</dt> -</dl> - -<dl> - <dd>Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi </dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">decreaseFontSize</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Aggiunge un tag SMALL attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">delete</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Cancella la selezione corrente.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">fontName</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">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.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">fontSize</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Cambia la dimensione del testo nella selezione o alla posizione del cursore. Richiede una dimensione HTML (1-7) da passare come argomento.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">foreColor</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">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.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">formatBlock</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">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>".)</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">heading</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">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.)</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">hiliteColor</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">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.)</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">increaseFontSize</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Aggiunge il tag BIG attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">indent</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Aumenta il rientro dell'elemento all'interno della selezione corrente o alla posizione del cursore.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">insertHorizontalRule</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Inserisce una horizontal rule alla posizione del cursore (elimina la selezione).</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">insertHTML</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">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.)</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">insertImage</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">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.)</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">insertOrderedList</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Crea un elenco numerato all'interno della selezione corrente o alla posizione del cursore.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">insertUnorderedList</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Crea un elenco puntato all'interno della selezione corrente o alla posizione del cursore.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">insertParagraph</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Inserisce una paragrafo attorno alla selezione o alla riga corrente. (Internet Explorer inserisce un paragrafo alla posizione del cursore e cancella la selezione.)</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">italic</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva il corsivo sulla selezione o alla posizione del cursore. (Internet Explorer usa il tag EM al posto di I.)</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">justifyCenter</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Allinea al centro la selezione o la posizione del cursore.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">justifyLeft</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Allinea a sinistra la selezione o la posizione del cursore.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">justifyRight</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Allinea a destra la selezione o la posizione del cursore.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">outdent</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Diminuisce il rientro dell'elemento sulla selezione o alla posizione del cursore.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">paste</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">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 </dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">redo</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Ripristina il comando precedentemente annullato.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">removeFormat</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Rimuove tutta la formattazione dalla selezione corrente.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">selectAll</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Seleziona tutto il contenuto dell'area modificabile.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">strikeThrough</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva il testo barrato sulla selezione o alla posizione del cursore.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">subscript</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva subscript sulla selezione o alla posizione del cursore.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">superscript</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva superscript sulla selezione o alla posizione del cursore.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">underline</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Attiva o disattiva la sottolineatura sulla selezione o alla posizione del cursore.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">undo</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Annulla l'ultimo comando eseguito.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">unlink</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Rimuove il collegamento dal collegamento selezionato.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">useCSS {{ Deprecated_inline() }}</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">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 <em>styleWithCSS</em>.</dd> -</dl> -</blockquote> - -<blockquote> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">styleWithCSS</dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Sostituisce il comando <em>useCSS</em>; l'argomento, a differenza del comando useCSS, l'argomento lavora come ci si aspetta, es. passato true modifica/genera attributi <em>style</em> nel markup, false genera elementi di formattazione.</dd> -</dl> -</blockquote> - -<h3 id="Internet_Explorer_Differences" name="Internet_Explorer_Differences">Differenze con Internet Explorer</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">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 <code style="color: rgb(37, 34, 29); font-weight: inherit;">useCSS </code>può essere usato per attivare o disattivare la creazione di markup HTML o CSS.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Figure 1 : Generated HTML differences</strong></p> - -<pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);">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> -</pre> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">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, <code style="color: rgb(37, 34, 29); font-weight: inherit;">IFrameElement.<a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-38538621">contentDocument</a></code>, mentre IE richiede <code style="color: rgb(37, 34, 29); font-weight: inherit;">IFrameElement.document</code>.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><em><strong>DevEdge</strong></em> fornisce una classe JavaScript, <code style="color: rgb(37, 34, 29); font-weight: inherit;"><a href="/en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" rel="internal" title="en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode</a></code>, il cui scopo è quello di racchiudere le caratteristiche di designMode in una classe che nasconde le differenze tra IE e Mozilla.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><br> - <strong>Gestione degli Eventi Disabilitati</strong></p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">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.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Maggiori informazioni</strong> possono essere trovato nella sezione <a href="/en/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing" rel="internal" title="en/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing">Rich text editing</a> dell'articolo <a href="/en/Migrate_apps_from_Internet_Explorer_to_Mozilla" rel="internal" title="en/Migrate_apps_from_Internet_Explorer_to_Mozilla">Convertire le applicazioni da Internet Explorer a Mozilla</a>.</p> - -<h3 id="Examples" name="Examples">Esempi</h3> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><em><strong>Nota:</strong> I files di esempio sono stati trasferiti su un'altro sito. In questo momento non sono disponibili.</em> --<a href="/User:Fumble" rel="internal" title="User:Fumble">fumble</a> 18:13, 24 Apr 2005 (PDT)</p> - -<h4 id="Example_1" name="Example_1">Esempio 1</h4> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Il primo esempio è un documento HTML impostato con <code style="color: rgb(37, 34, 29); font-weight: inherit;">designMode</code> 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 <code style="color: rgb(37, 34, 29); font-weight: inherit;">contentEditable</code> del tag body necessita di essere impostato a "true".</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Figura 2 : Primo esempio</strong></p> - -<pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);">HTML: -<body contentEditable="true" onload="load()"> - -JavaScript: -function load(){ - window.document.designMode = "On"; -} -</pre> - -<h4 id="Example_2" name="Example_2">Esempio 2</h4> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">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.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Figura 3 : Impostazione del rich-text editing</strong></p> - -<pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);">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; - } -} -</pre> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">L'esempio contiene una funzione <code style="color: rgb(37, 34, 29); font-weight: inherit;">doRichEditCommand</code> che rende semplice l'esecuzione dei comandi nel documento dell'iframe e mantiene pulito il codice HTML. La funzione esegue il comando richiesto tramite <code style="color: rgb(37, 34, 29); font-weight: inherit;">execCommand()</code> 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.</p> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Figura 4 : Esecuzione dei comandi Rich Editing</strong></p> - -<pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);">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() -} -</pre> - -<h3 id="Resources" name="Resources">Risorse</h3> - -<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <li style="margin-bottom: 0.25em;"><a class="external" href="http://mozilla.org/editor/midas-spec.html">mozilla.org's rich-text editing Specification</a></li> - <li style="margin-bottom: 0.25em;"><a class="external" href="http://mozilla.org/editor/midasdemo/">mozilla.org's rich-text editing Demo</a></li> - <li style="margin-bottom: 0.25em;"><a href="/en/Migrate_apps_from_Internet_Explorer_to_Mozilla" rel="internal" title="Convertire le applicazioni da Internet Explorer a Mozillaa">Convertire le applicazioni da Internet Explorer a Mozilla</a><a class="external" href="http://www.mozilla.org/editor/ie2midas.html"> su mozilla.org</a></li> - <li style="margin-bottom: 0.25em;"><a href="/it/docs/Web/API/Document/designMode">designMode</a></li> - <li style="margin-bottom: 0.25em;"><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms537834(v=vs.85)">MSDN: How to Create an HTML Editor Application</a></li> - <li style="margin-bottom: 0.25em;"><a class="external" href="http://www.kevinroth.com/rte/demo.htm">A closed source, cross-browser rich-text editing demo</a></li> - <li style="margin-bottom: 0.25em;"><a href="/en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" rel="internal" title="en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode; a JavaScript helper class for easier cross-browser development using designMode.</a></li> - <li style="margin-bottom: 0.25em;"><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-contenteditable/">Firefox 3 and contentEditable</a></li> -</ul> diff --git a/files/it/web/guide/html/html5/index.html b/files/it/web/guide/html/html5/index.html deleted file mode 100644 index 6be662d4c2..0000000000 --- a/files/it/web/guide/html/html5/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/HTML/HTML5 ---- -<p><span class="seoSummary"><strong>HTML5</strong> è l'ultima evoluzione dello standard che definisce <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>Il termine rappresenta due concetti differenti:</p> - -<ul> - <li>Una nuova versione del <em>linguaggio</em> HTML, con nuovi elementi, attributi e comportamenti</li> - <li>Un più ampio insieme di tecnologie che permettono siti web e applicazioni più diversificate e potenti: Questo insieme è chiamato <em>HTML5 & compagni</em> ed è spesso abbreviato in<em> HTML5</em></li> -</ul> - -<p>Progettata per essere usabile da tutti gli sviluppatori Open Web, questa pagina di riferimento ha numerosi collegamenti a risorse riguardanti le tecnologie HTML5, classificate in diversi gruppi in base alla loro funzione.</p> - -<ul> - <li><em>Semantica</em>: descrivere con maggiore precisione il contenuto.</li> - <li><em>Connettività</em>: comunicare con il server in modi nuovi e innovativi.</li> - <li><em>Offline & Memorizzazione</em>: permettere alle pagine web di immagazzinare dati sul client per operare più efficientemente offline.</li> - <li><em>Multimedia</em>: rendere audio e video cittadini di prima classe nell'Open Web.</li> - <li><em>Effetti e Grafica 2D/3D</em>: usare una gamma molto più ampia di opzioni di rappresentazione.</li> - <li><em>Prestazioni & Integrazione</em>: ottimizzare la velocità di caricamento e ottenere un migliore utilizzo delle risorse hardware.</li> - <li><em>Accesso ai dispositivi</em>: usare vari dispositivi di input e output.</li> - <li><em>Stile:</em> consentire agli autori di realizzare temi più sofisticati.</li> -</ul> - -<div class="cleared row topicpage-table"> -<div class="section"> -<h2 id="Semantica" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Semantica</h2> - -<dl> - <dt><a href="/it/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document" title=" -Sezioni e Struttura di un Documento HTML5">Sezioni e struttura in HTML5</a></dt> - <dd>Uno sguardo ai nuovi elementi di sezionamento e contorno in HTML5: {{HTMLElement("section")}} , {{HTMLElement("article")}} , {{HTMLElement("nav")}} , {{HTMLElement("header")}} , {{HTMLElement("footer")}} , {{HTMLElement("aside")}} e {{HTMLElement("hgroup")}}.</dd> - <dt><a href="/it/docs/HTML/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Integrare audio e video in HTML5</a></dt> - <dd>Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} permettono l'integrazione e la manipolazione di nuovi contenuti multimediali.</dd> - <dt><a href="/it/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Forms in HTML5</a></dt> - <dd>Uno sguardo ai miglioramenti dei form in HTML5: le API di convalida dei campi, parecchi nuovi attributi, nuovi valori per l'attributo {{htmlattrxref("type", "input")}} degli {{HTMLElement("input")}}, e il nuovo elemento {{HTMLElement("output")}}.</dd> - <dt>Nuovi elementi semantici</dt> - <dd>Accanto a sezioni, multimedia e le novità dei forms, ci sono numerosi nuovi elementi come {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, che accrescono la quantità di <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">elementi validi di HTML5</a>.</dd> - <dt>Miglioramenti degli {{HTMLElement("iframe")}}</dt> - <dd>Utilizzando {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e gli attributi {{htmlattrxref("srcdoc", "iframe")}}, gli autori possono ora precisare il livello di sicurezza e il rendering desiderato di un elemento {{HTMLElement("iframe")}}.</dd> - <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> - <dd>Permette di incorporare direttamente formule matematiche.</dd> - <dt><a href="/it/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introduzione a HTML5</a></dt> - <dd>Questo articolo introduce al problema di come indicare al browser che stai utilizzando HTML5 nel tuo progetto o applicazione web.</dd> - <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">Parser di HTML5-compatibile</a></dt> - <dd>Il parser, che converte i byte di un documento HTML nel DOM, è stato esteso ed ora riconosce con precisione il comportamento da adottare in tutti i casi, anche quando incontra HTML non valido. Ciò conduce ad una maggiore prevedibilità e interoperabilità tra i browser compatibili con HTML5.</dd> -</dl> - -<h2 id="Connettività" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connettività</h2> - -<dl> - <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> - <dd>Permette di creare una connessione permanente tra la pagina ed il server e di scambiare dati, non HTML, attraverso questo mezzo.</dd> - <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-event inviati</a></dt> - <dd>Permetta a un server di sottoporre eventi al client, contrariamente al classico paradigma per cui il server invia dati solo in risposta alla richiesta del client.</dd> - <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controllare direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.</dd> -</dl> - -<h2 id="Offline_Memorizzazione" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline & Memorizzazione</h2> - -<dl> - <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Risorse Offline: la cache dell'applicazione</a></dt> - <dd>Firefox supporta a pieno le specifiche offline di HTML5. La maggior parte degli altri browser hanno un qualche livello di supporto per le risorse offline.</dd> - <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventi online e offline</a></dt> - <dd>Firefox 3 supporta eventi WHATWG online e offline, che lasciano rilevare alle applicazioni ed estensioni se c'è o no una connessione internet attiva, nonché quando la connessione cambia stato.</dd> - <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">Sessione WHATWG lato client e memorizzazione persistente (alias Memorizzazione DOM)</a></dt> - <dd>La memorizzazione lato client, persistente e di sessione, permette alle applicazioni web di immagazzinare strutture dati lato client.</dd> - <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>E' uno standard web per la memorizzazione nel browser di significative quantità di dati strutturati e per ricerche indicizzate ad elevate prestazioni su tali dati.</dd> - <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Utilizzare file da applicazioni web</a></dt> - <dd>Il supporto per le nuove API per i file in HTML5 è stato aggiunto a Gecko, rendendo possibile l'accesso a file locali selezionati dall'utente. Ciò include il supporto per la selezione multipla di file utilizzando il nuovo attributo <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> con <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> dell'elemento <span style="font-family: monospace;">{{HTMLElement("input")}}</span>. C'è anche <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> -</dl> - -<h2 id="Multimedia" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2> - -<dl> - <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Utilizzare audio e video in HTML5</a></dt> - <dd>Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporano e permetto la manipolazione di nuovi contenuti multimediali.</dd> - <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controlla direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.</dd> - <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Utilizzo della API Camera</a></dt> - <dd>Permette di usare, manipolare e memorizzare un'immagine dalla fotocamera del computer.</dd> - <dt>Track e WebVTT</dt> - <dd>L'elemento {{HTMLElement("track")}} consente capitoli e sottotitoli. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> è un formato di traccia testuale.</dd> -</dl> - -<h2 id="Grafica_Effetti_3D" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Grafica & Effetti 3D</h2> - -<dl> - <dt><a href="/en-US/docs/Canvas_tutorial" title="Tutorial Canvas">Tutorial sui Canvas</a></dt> - <dd>Apprendi il nuovo elemento <code>{{HTMLElement("canvas")}}</code> e come disegnare grafica ed altri oggetti in Firefox</dd> - <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">API di testo per gli elementi <code><canvas></code> di HTML5</a></dt> - <dd>Le API di testo di HTML5 sono ora supportate agli elementi {{HTMLElement("canvas")}}.</dd> - <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> - <dd>WebGL porta la grafica 3D sul Web introducendo una API strettamente conforme a OpenGL ES 2.0 utilizzata negli elementi {{HTMLElement("canvas")}} di HTML5.</dd> - <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> - <dd>Un formato di immagine vettoriale basato su XML che può essere direttamente incorporato nel documento HTML.</dd> -</dl> -</div> - -<div class="section"> -<h2 id="Prestazioni_integrazione" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Prestazioni & integrazione</h2> - -<dl> - <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Usare i web workers">Web Workers</a></dt> - <dd>Permette di delegare l'esecuzione JavaScript a thread in background, impedendo a queste attività di rallentare gli eventi interattivi.</dd> - <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Livello 2</dt> - <dd>Permette di ottenere asincronamente qualche parte della pagina e di visualizzarne dinamicamente il contenuto, variandolo nel tempo e in base alle azioni dell'utente. Questa è la tecnologia dietro <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> - <dt>JIT-motori JavaScript compilati</dt> - <dd>La nuova generazione di motori JavaScript sono molto più potenti, e garantiscono maggiori prestazioni.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> - <dd>Permette la manipolazione della cronologia del browser. Ciò è particolarmente utile per le pagine che caricano nuove informazioni interattivamente.</dd> - <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">L'attributo contentEditable: trasforma il tuo sito web in un wiki!</a></dt> - <dd>HTML5 ha standardizzato l'attributo contentEditable.</dd> - <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag & drop</a></dt> - <dd>Le API per il drag & drop in HTML5 supportano il trascinamento e rilascio di voci all'interno del sito e tra siti web. Fornisce anche una API più semplice per l'uso da parte di estensioni e applicazioni basate su Mozilla.</dd> - <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Gestione del focus in HTML</a></dt> - <dd>Sono supportati i nuovi attributiHTML5 <code>activeElement</code> e <code>hasFocus</code>.</dd> - <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Gestori di protocollo basato sul Web</a></dt> - <dd>E' ora possibile registrare applicazioni web come gestori di protocollo utilizzando il metodo <code>navigator.registerProtocolHandler()</code>.</dd> - <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> - <dd>Permette di controllare il rendering delle animazioni per ottenere prestazioni ottimali.</dd> - <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> - <dd>Controlla l'utilizzo a pieno schermo da parte di pagine web e applicazioni, senza la visualizzazione della UI del browser.</dd> - <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> - <dd>Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.</dd> - <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventi online ed offline</a></dt> - <dd>Al fine di costruire una buona applicazione web capace di lavorare offline, hai bisogno di sapere quando l'applicazione è offline. Hai anche bisogno di sapere quando l'applicazione torna nello stato online.</dd> -</dl> - -<h2 id="Accesso_ai_Dispositivi" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Accesso ai Dispositivi</h2> - -<dl> - <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Utilizzare le API Camera</a></dt> - <dd>Permette di utilizzare, manipolare e immagazzinare immagini dalla fotocamera del computer.</dd> - <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Eventi Touch</a></dt> - <dd>Gestori che reagiscono ad eventi creati dalla pressione sullo schermo da parte dell'utente.</dd> - <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Utilizzare la geolocalizzazione</a></dt> - <dd>Permetti al browser di localizzare la posizione dell'utente grazie alla geolocalizzazione.</dd> - <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Rilevazione orientamento del dispositivo</a></dt> - <dd>Lascia che il browser sia informato del cambio di orientamento del dispositivo. Può essere utilizzato come metodo di input (per esempio per realizzare giochi che reagiscono alla posizione del dispositivo) o per adattare l'impaginazione all'orientamento dello schermo (potrait o landscape).</dd> - <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> - <dd>Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.</dd> -</dl> - -<h2 id="Stile" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Stile</h2> - -<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> è stato esteso consentendo elementi di stile più complessi. E' spesso identificato come <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, sebbene CSS non sia comunque una specifica monolitica e i differenti moduli non siano tutti di livello 3: alcuni sono di livello 1, ed altri di livello 4, con tutti i livelli intermedi.</p> - -<dl> - <dt>Nuove caratteristiche di stile per lo sfondo</dt> - <dd>E' ora possibile aggiungere un'ombra a un box, utilizzando{{cssxref("box-shadow")}} ed impostare <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">sfondi multipli</a>.</dd> - <dt>Bordi più fantasiosi</dt> - <dd>Non è solo possibile utilizzare le immagini come stile dei bordi, utilizzando {{cssxref("border-image")}} e le proprietà associate, ma sono supportati i bordi arrotondati per mezzo della proprietà {{cssxref("border-radius")}}.</dd> - <dt>Anima il tuo stile</dt> - <dd>Utilizzando le <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">Transizioni CSS</a> per animare il passaggio tra stati, o utilizzando le <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">Animazioni CSS</a> per animare parti della pagina senza un evento scatenante, puoi controllare gli elementi mobili sulla pagina.</dd> - <dt>Miglioramenti tipografici</dt> - <dd>Gli autori hanno un miglior controllo per ottenere un migliore aspetto tipografico. Possono controllare il {{cssxref("text-overflow")}} e la <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">sillabazione</a>, ma possono anche applicare <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">un'ombra</a> o controllare più precisamente la <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorazione</a>. Caratteri tipografici personalizzati possono essere scaricati e applicati grazie alla nuova regola {{cssxref("@font-face")}}.</dd> - <dt>Nuove impaginazioni per la presentazione</dt> - <dd>Al fine di migliorare la flessibilità di progettazione, sono stati aggiunti due nuovi layout: <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">Impaginazione CSS a colonna multipla</a>, e <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">l'impaginazione CSS a box flessibile</a>.</dd> -</dl> -</div> -</div> - -<p> </p> diff --git a/files/it/web/guide/html/html5/introduction_to_html5/index.html b/files/it/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 646636bee8..0000000000 --- a/files/it/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Introduzione a HTML5 -slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: Web/HTML/HTML5/Introduction_to_HTML5 ---- -<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> è la quinta revisione e l'ultima versione dello standard HTML. Propone nuove funzionalità che forniscono il supporto dei rich media, la creazione di applicazioni web in grado di interagire con l'utente, con i suoi dati locali e i servers, in maniera più facile ed efficiente di prima.</p> -<p>Poiché HTML5 è ancora in fase di sviluppo, inevitabilmente ci saranno altre modifiche alle specifiche. Pertanto al momento non tutte le funzioni sono supportate da tutti i browser. Tuttavia Gecko, e per estensione Firefox, supporta HTML5 in maniera ottimale, e gli sviluppatori continuano a lavorare per supportare ancora più funzionalità. Gecko ha iniziato a supportare alcune funzionalità di HTML5 dalla versione 1.8.1. È possibile trovare un elenco di tutte le funzionalità HTML5 che Gecko supporta attualmente nella <a href="/it/HTML/HTML5" title="it/HTML/HTML5">pagina principale di HTML5</a>. Per informazioni dettagliate sul supporto degli altri browser delle funzionalità HTML5, fare riferimento al sito web <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a>.</p> -<h2 id="Dichiarare_che_un_documento_contiene_mark-up_HTML5_con_il_doctype_HTML">Dichiarare che un documento contiene mark-up HTML5 con il doctype HTML</h2> -<p>Il doctype per HTML5 è semplicissimo. Per specificare che il vostro contenuto HTML utilizza HTML5, basta dichiarare:</p> -<pre class="brush:html;"><!DOCTYPE html> -</pre> -<p>Così facendo persino i browser che attualmente non supportano HTML5 entreranno in modalità standard, cioè interpreteranno il codice HTML in modo compatibile con HTML5, ignorando le nuove funzionalità di HTML5 se non le supportano.</p> -<p>È molto più semplice rispetto ai precedenti doctype, oltre che più breve, quindi più facile da ricordare e riduce anche la quantità di byte scaricati dall'utente.</p> -<h2 id="Dichiarare_il_set_di_caratteri_con_<meta_charset>">Dichiarare il set di caratteri con <code><meta charset></code></h2> -<p>Indicare il set di caratteri che verrà utilizzato è solitamente la prima cosa da fare in un documento HTML. La specifica precedente richiedeva un elemento {{HTMLElement("meta")}} molto complesso. Ora è facilissimo:</p> -<pre class="brush:html;"><meta charset="UTF-8"></pre> -<p>Ricordati di inserire questo tag subito dopo l'apertura del {{HTMLElement("head") }}, perché alcuni browser riavviano il parsing di un documento HTML se il set di caratteri dichiarato è diverso da quello che avevano previsto. Inoltre consigliamo sempre di usare il set UTF-8, ove possibile, perché semplifica la gestione dei caratteri nei documenti utilizzando diversi script.</p> -<p>Nota bene: HTML5 limita il set di caratteri validi a quelli compatibili con ASCII e che usano almeno 8 bit. Ciò è stato deciso per motivi di sicurezza e per prevenire alcuni tipi di attacchi.</p> -<h2 id="Usare_il_nuovo_parser_HTML5">Usare il nuovo parser HTML5</h2> -<p>La regola di parsing di HTML5, che analizza il significato del mark-up, è stata definita con maggiore precisione in HTML5. Fino all'introduzione di HTML5, le uniche regole riguardavano il mark-up <em>valido</em>, quindi il comportamento del parser in caso di errori (e la maggior parte dei siti web ne ha almeno uno) era indefinito. In sostanza, tutti i browser si comportavano in modo diverso. Ora, di fronte a errori nel mark-up, tutti i browser conformi devono comportarsi esattamente nello stesso modo.</p> -<p>Questo obbligo aiuta non poco gli sviluppatori. Anche se tutti i browser moderni ora applicano queste regole di analisi HTML5, alcuni utenti navigano ancora con browser non compatibili con HTML5. Tenete a mente che è ancora altamente raccomandato stendere mark-up valido, in modo che il codice sia facile da leggere e mantenere nel tempo, e diminuisca notevolmente la probabilità di incompatibilità con i vari browser più datati.</p> -<p>Non preoccuparti — non devi cambiare nulla del tuo sito Web — gli sviluppatori dei browser hanno già fatto tutto per te!</p> diff --git a/files/it/web/guide/html/using_html_sections_and_outlines/index.html b/files/it/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index 5864929a2c..0000000000 --- a/files/it/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,321 +0,0 @@ ---- -title: Sezioni e Struttura di un Documento HTML5 -slug: Web/Guide/HTML/Using_HTML_sections_and_outlines -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document ---- -<p>La specifica HTML5 rende disponibili numerosi nuovi elementi agli sviluppatori, permettendo ad essi di descrivere la struttura di un documento web tramite una semantica standard. Questa pagina descrive i nuovi elementi e spiega come usarli per definire la struttura di qualsiasi documento.</p> -<h2 id="Struttura_di_un_Documento_in_HTML_4">Struttura di un Documento in HTML 4</h2> -<p>La struttura di un documento, cioè la struttura semantica di ciò che si trova tra <code><body></code> e <code></body></code>, è fondamentale nella presentazione della pagina all'utente. HTML 4 usa le nozioni di sezione e sotto-sezione di un documento per descrivere la sua struttura. Una sezione è definita da un Elemento HTML di Divisione ( {{HTMLElement("div")}} ) con un Elemento HTML di Intestazione ( {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}} ) al suo interno, che ne definisce il titolo. La relazione tra gli Elementi HTML di Divisione e gli Elementi HTML di Intestazione genera la struttura del documento.</p> -<p>Dunque il seguente mark-up:</p> -<div style="overflow: hidden;"> - <pre class="brush:xml"><div class="section" id="elefanti-delle-foreste" > -<h1>Elefanti delle foreste</h1> -<p>In questa sezione, parliamo dei poco noti elefanti delle foreste. -...la sezione continua... -<div class="subsection" id="elefanti-habitat" > -<h2>Habitat</h2> -<p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. -...la sotto-sezione continua... -</div> -</div> -</pre> -</div> -<p>genera la seguente struttura:</p> -<pre>1. Elefanti delle foreste - 1.1 Habitat -</pre> -<p>L'elemento {{HTMLElement("div")}} non è strettamente necessario per definire una nuova sezione. La mera presenza di un Elemento HTML di Intestazione è abbastanza per indicare una nuova sezione. Perciò:</p> -<pre class="brush:xml"><h1>Elefanti delle foreste</h1> -<p>In questa sezione, parliamo dei poco noti elefanti delle foreste. -...la sezione continua... -<h2>Habitat</h2> -<p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. -...la sotto-sezione continua... -<h2>Dieta</h2> -<h1>Gerbilli della Mongolia</h1> -</pre> -<p>genera la seguente struttura:</p> -<pre>1. Elefanti delle foreste - 1.1 Habitat - 1.2 Dieta -2. Gerbilli della Mongolia -</pre> -<h2 id="Problemi_Risolti_da_HTML5">Problemi Risolti da HTML5</h2> -<p>La definizione della struttura di un documento di HTML 4 è molto approssimativa e causa numerosi problemi:</p> -<ol> - <li>L'uso di un {{HTMLElement("div")}} per definire sezioni semantiche, senza la definizione di valori specifici nell'attributo <strong>class</strong>, rende impossibile per un algoritmo automatico definire la struttura ("Questo {{HTMLElement("div")}} è parte della struttura della pagina, definisce una sezione o una sotto-sezione?" o "è solo un {{HTMLElement("div")}} inserito ai fini di presentazione, usato per scopi estetici?"). In altri termini, la specifica HTML4 è poco precisa riguardo a cosa è una sezione e come definire il suo scopo. La generazione automatica di una struttura è importante, in modo particolare per le <a class="external" href="http://it.wikipedia.org/wiki/Tecnologie_assistive" title="http://it.wikipedia.org/wiki/Tecnologie_assistive">tecnologie assistive</a>, che sono in grado di adattare la presentazione delle informazioni alla struttura del documento. HTML5 rimuove l'elemento {{HTMLElement("div")}} dall'algoritmo che genera la struttura, introducendo l'elemento {{HTMLElement("section")}}, cioè un Elemento HTML di Sezione.</li> - <li>Unire più documenti è difficile: inserire un sotto-documento in un documento principale richiede di cambiare il "grado" delle intestazioni in modo che la struttura venga mantenuta. Questo problema viene risolto in HTML5, grazie ai nuovi elementi di sezionamento ( {{HTMLElement("article")}} , {{HTMLElement("section")}} , {{HTMLElement("nav")}} e {{HTMLElement("aside")}} ) che sono sempre sotto-sezioni della sezione che li contiene, indipendentemente dalle sezioni create dagli Elementi HTML di Intestazione.</li> - <li>Poiché ogni Elemento HTML di Intestazione cambia la struttura, non è possibile assegnare un sotto-titolo o un titolo secondario (es., <code><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></code> genera la struttura <code>1. Justine 1.1 Les Malheurs de la Vertu</code>). HTML5 introduce l'elemento {{HTMLElement("hgroup")}} che "nasconde" tutti gli elementi di intestazione tranne quello di grado più elevato (es., <code><hgroup><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></hgroup></code> genera la struttura <code>1. Justine</code>).</li> - <li>Nel HTML4, ogni sezione è parte della struttura del documento. Ma spesso i documenti non sono così lineari. Un documento può avere sezioni speciali contenenti informazioni che non fanno parte del flusso principale, anche se correlati ad esso, come una pubblicità o un approfondimento. HTML5 introduce l'elemento {{HTMLElement("aside")}} permettendo a questo tipo di sezioni di rimanere estranee al flusso principale.</li> - <li>Ancora, nel HTML4, dato che ogni sezione è parte della struttura del documento, non c'è modo di avere sezioni relative non al documento ma a tutto il sito, come il logo, i menu, una tabella dei contenuti, o le informazioni legali e sul copyright. A tal fine, HTML5 introduce tre elementi per altrettante sezioni specifiche: {{HTMLElement("nav")}} per i gruppi di links, come le tabelle dei contenuti, {{HTMLElement("footer")}} e {{HTMLElement("header")}} per le informazioni correlate al sito.</li> -</ol> -<p>Più in generale HTML5 aggiunge precisione alle funzionalità di sezionamento ed intestazione, permettendo una struttura del documento prevedibile e utilizzata dai browser per migliorare l'esperienza utente.</p> -<h2 id="L'Algoritmo_della_Struttura_di_HTML5">L'Algoritmo della Struttura di HTML5</h2> -<h3 id="Definire_Sezioni_nel_HTML5">Definire Sezioni nel HTML5</h3> -<p>Tutto il contenuto dell'elemento {{HTMLElement("body")}} appartiene ad una sezione. Le sezioni HTML5 possono essere nidificate. Accanto alla sezione principale, definita dall'elemento {{HTMLElement("body")}}, i confini delle sezioni vengono definiti esplicitamente o implicitamente. Le sezioni esplicite sono contenute negli elementi {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, e {{HTMLElement("nav")}}.</p> -<div class="note"> - <strong>Nota: </strong>Ogni sezione può avere la propria gerarchia di intestazioni. Quindi anche un elemento nidificato può avere un'intestazione {{HTMLElement("h1")}}. Vedi <a href="/it/docs/Sections_and_Outlines_of_an_HTML5_document#Definire_le_Intestazioni_in_HTML5" title="/it/docs/Sections_and_Outlines_of_an_HTML5_document#Definire_le_Intestazioni_in_HTML5">Definire le Intestazioni in HTML5</a>.</div> -<p>Esempio:</p> -<pre class="brush:xml"><section> - <h1>Elefanti delle foreste</h1> - <section> - <h1>Introduzione</h1> - <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. - </section> - <section> - <h1>Habitat</h1> - <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. - </section> - <aside> - <p>pubblicità - </aside> -</section> -<footer> - <p>(c) 2010 Esempi S.P.A. -</footer></pre> -<p>Questo frammento di HTML definisce due sezioni di primo livello:</p> -<pre><span style="color: red;"><section> - <h1>Elefanti delle foreste</h1> - <section> - <h1>Introduzione</h1> - <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. - </section> - <section> - <h1>Habitat</h1> - <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. - </section> - <aside> - <p>pubblicità - </aside> -</section></span> - -<span style="color: green;"><footer> - <p>(c) 2010 Esempi S.P.A. -</footer></span></pre> -<p>La prima sezione ha tre sotto-sezioni:</p> -<pre><section> - <h1>Elefanti delle foreste</h1> - - <span style="color: red;"><section> - <h1>Introduzione</h1> - <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. - </section></span> - - <span style="color: green;"><section> - <h1>Habitat</h1> - <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. - </section></span> - - <span style="color: blue;"><aside> - <p>pubblicità - </aside></span> -</section> - -<footer> - <p>(c) 2010 Esempi S.P.A. -</footer></pre> -<p>Il che genera la seguente struttura:</p> -<pre>1. Elefanti delle foreste - 1.1 Introduzione - 1.2 Habitat - 1.3 Sezione (aside) -</pre> -<h3 id="Definire_le_Intestazioni_in_HTML5">Definire le Intestazioni in HTML5</h3> -<p>L'Elemento HTML di Sezione definisce la struttura del documento, ma c'è bisogno anche delle intestazioni. La regola di base è semplice: il primo Elemento HTML di Intestazione (uno tra {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} ) definisce l'intestazione della sezione corrente.</p> -<p>Gli elementi di intestazione hanno un <em>grado</em> dato dal numero nell'elemento, dove {{HTMLElement("h1")}} è il grado <em>più alto</em>, e {{HTMLElement("h6")}} quello <em>più basso</em>. Il grado relativo ha importanza solo all'interno di una sezione; è la struttura delle sezioni a determinare lo schema definitivo, non il grado di ciascuna intestazione. Per esempio, questo codice:</p> -<pre class="brush:xml"><section> - <h1>Elefanti delle foreste</h1> - <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. - ...la sezione continua... - <section> - <h2>Habitat</h2> - <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. - ...la sotto-sezione continua... - </section> -</section> -<section> - <h3>Gerbilli della Mongolia</h3> - <p>In questa sezione, parliamo dei famosi gerbilli della Mongolia. - ...la sezione continua... -</section></pre> -<p>genera la seguente struttura:</p> -<pre>1. Elefanti delle foreste - 1.1 Habitat -2. Gerbilli della Mongolia</pre> -<p>Notare come il grado delle intestazioni (nell'esempio {{HTMLElement("h1")}} per la prima sezione di primo livello, {{HTMLElement("h2")}} per la sotto-sezione e {{HTMLElement("h3")}} per la seconda sezione di primo livello) non conta. (Qualsiasi grado può essere utilizzato come intestazione di una sezione esplicitamente definita, anche se questa pratica non è consigliata.)</p> -<h3 id="Sezionamento_implicito">Sezionamento implicito</h3> -<p>Poiché gli elementi HTML5 di sezionamento non sono obbligatori per definire una struttura, c'è un modo per definire sezioni senza di essi, per mantenere la compatibilità con la rete esistente dominata da HTML4. Questa tecnica è chiamata <em>sezionamento implicito</em>.</p> -<p>Gli Elementi HTML di Intestazione da ( {{HTMLElement("h1")}} a {{HTMLElement("h6")}} ) definiscono una nuova sezione implicita quando non sono la prima voce del loro contenitore, che è sempre una sezione esplicita. Il modo in cui questa sezione implicita viene posizionata nella struttura è definito dal suo grado relativo all'intestazione precedente nella sezione che le contiene. Se il grado è inferiore rispetto all'intestazione precedente, viene aperta una sotto-sezione implicita. Questo codice:</p> -<pre class="brush:xml"><section> - <h1>Elefanti delle foreste</h1> - <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. - ...la sezione continua... - <h3 class="implicit subsection">Habitat</h3> - <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. - ...la sotto-sezione continua... -</section></pre> -<p>genera la seguente struttura:</p> -<pre>1. Elefanti delle foreste - 1.1 Habitat <em>(implicitly defined by the h3 element)</em> -</pre> -<p>Se l'intestazione ha lo stesso grado di quella precedente, la sezione corrente viene chiusa (<strong>anche se esplicita</strong>!) e se ne apre una nuova, implicita, dello stesso livello:</p> -<pre class="brush:xml"><section> - <h1>Elefanti delle foreste</h1> - <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. - ...la sezione continua... - <h1 class="implicit section">Gerbilli della Mongolia</h1> - <p>Gerbilli della Mongolia are cute little mammals. - ...la sezione continua... -</section></pre> -<p>genera la seguente struttura: </p> -<pre>1. Elefanti delle foreste -2. Gerbilli della Mongolia <em>(implicitamente definita dall'elemento h1, che allo stesso tempo ha chiuso la sezione precedente)</em> -</pre> -<p>Se ha grado superiore all'intestazione precedente, chiude la sezione corrente e ne apre una nuova, implicita, di livello superiore:</p> -<pre class="brush:xml"><body> - <h1>Mammiferi</h1> - <h2>Balene</h2> - <p>In questa sezione, parliamo delle balene nuotatrici. - ...la sezione continua... - <section> - <h3>Elefanti delle foreste</h3> - <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. - ...la sezione continua... - <h3>Gerbilli della Mongolia</h3> - <p>Hordes of gerbils have spread their range far beyond Mongolia. - ...la sotto-sezione continua... - <h2>Rettili</h2> - <p>I rettili sono animali dal sangue freddo. - ...la sotto-sezione continua... - </section> -</body></pre> -<p>genera la seguente struttura:</p> -<pre>1. Mammiferi - 1.1 Balene <em>(definita implicitamente dall'elemento h2)</em> - 1.2 Elefanti delle foreste <em>(definita esplicitamente dall'elemento section)</em> - 1.3 Gerbilli della Mongolia <em>(definita implicitamente dall'elemento h3, che allo stesso tempo chiude la sezione precedente)</em> - 1.4 Rettili <em>(definita implicitamente dall'elemento h2, che allo stesso tempo chiude la sezione precedente)</em> -</pre> -<p>Questa non è la struttura che ci si potrebbe aspettare dopo un rapido sguardo alle intestazioni. Per rendere il vostro markup comprensibile all'uomo, è una buona pratica usare sezioni esplicite, e far combaciare il grado dell'intestazione con il livello di nidificazione previsto. Tuttavia, ciò non è richiesto dalla specifica HTML5. Se si riscontra che i browser rendono la struttura del vostro documento in modi inaspettati, verificare se alcune sezioni vengono chiuse implicitamente dagli elementi di intestazione.</p> -<p>Un'eccezione alla regola empirica che il grado dell'intestazione deve corrispondere al livello di nidificazione della sezione avviene per le sezioni che vengono riutilizzate in più documenti. Per esempio, una sezione potrebbe essere memorizzata in un sistema di gestione dei contenuti ed inserita nel documento in fase di runtime. In questo caso, una buona pratica è partire sempre da un elemento {{HTMLElement("h1")}} per la prima intestazione della sezione. Il livello di nidificazione della sezione riutilizzabile sarà determinato dalla struttura del documento in cui appare. I tag di sezione esplicita sono comunque utili in questi casi.</p> -<h3 id="Sovrascrivere_il_Sezionamento_Implicito">Sovrascrivere il Sezionamento Implicito</h3> -<p>A volte, una sezione ha bisogno di avere più intestazioni. Alcuni casi comuni sono:</p> -<ul> - <li>una sezione su un libro o un film, che ha un titolo secondario: - <pre class="brush:xml"><section> - <h1>Justine</h1> - <h2>Les Malheurs de la vertu</h2> -</section></pre> - <p>genera la seguente struttura:</p> - <pre>1. Justine - 1.1 Les Malheurs de la vertu -</pre> - </li> - <li>un elenco di tag: - <pre class="brush:xml"><section> - <h1>Strutture e Schemi di un documento</h1> - <h2>HTML, HTML5, Sezioni, Schemi</h2> -</section></pre> - <p>genera la seguente struttura:</p> - <pre>1. Strutture e schemi di un documento - 1.1 HTML, HTML5, Sezioni, Schemi</pre> - </li> -</ul> -<p>A causa del sezionamento implicito, questo non è possibile senza l'aiuto dell'Elemento HTML di Raggruppamento delle Intestazioni ( {{HTMLElement("hgroup")}} ) introdotto da HTML5. Esso "nasconde" tutte le intestazioni dalla struttura, eccetto la prima, consentendo di evitare il sezionamento implicito. Grazie a questo elemento l'esempio del libro secondario:</p> -<pre class="brush:xml"><section> - <hgroup> - <h1>Justine</h1> - <h2>Les Malheurs de la vertu</h2> - </hgroup> - ... Contenuti ... -</section> -</pre> -<p>genera la seguente struttura:</p> -<pre>1. Justine</pre> -<h3 id="Sezioni_root"><a name="sezioni_root">Sezioni "root"</a></h3> -<p>Una sezione "root" (radice) è un elemento HTML che può avere una propria struttura, ma le sezioni ed intestazioni interne ad esso non interferiscono con la struttura del suo contenitore. Oltre al {{HTMLElement("body")}} che è la sezione "root" logica di un documento, le sezioni root sono spesso elementi che aggiungono contenuto esterno alla pagina: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} e {{HTMLElement("td")}}.</p> -<p>Esempio:</p> -<pre class="brush:xml"><section> - <h1>Elefanti delle foreste</h1> - <section> - <h2>Introduzione</h2> - <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. - </section> - <section> - <h2>Habitat</h2> - <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. - Vediamo cosa dicono gli scienziati in "<cite>Gli elefanti delle foreste nel Borneo</cite>": - <blockquote> - <h1>Borneo - <p>L'elemento foresta vive nel Borneo... - </blockquote> - </section> -</section> -</pre> -<p>Questo esempio genera la seguente struttura:</p> -<pre>1. Elefanti delle foreste - 1.1 Introduzione - 1.2 Habitat</pre> -<p>La struttura principale non contiene la struttura interna dell'elemento {{HTMLElement("blockquote")}}, che, trattandosi di una citazione esterna, è un elemento di sezione "root", perciò la sua struttura interna viene isolata.</p> -<h3 id="Sezioni_oltre_la_struttura">Sezioni oltre la struttura</h3> -<p>HTML5 introduce quattro nuovi elementi che permettono di definire sezioni che non fanno parte della struttura principale del documento:</p> -<ol> - <li>L'Elemento HTML di Sezione Aside ( {{HTMLElement("aside")}} ) definisce una sezione che, anche se correlata all'elemento principale, non appartiene al flusso principale, come un box di approfondimento o una pubblicità. Ha la sua propria struttura, ma non appartiene a quella principale.</li> - <li>L'Elemento HTML di Sezione Navigazione ( {{HTMLElement("nav")}} ) definisce una sezione che contiene i link di navigazione. In un documento possono essere presenti molti elementi di navigazione, ad esempio: uno con i link interni alla pagina, come le tabelle dei contenuti, e un altro con i link di navigazione del sito. Questi links non fanno parte del flusso o della struttura principale e generalmente il loro rendering viene eseguito per ultimo dagli screen readers e da tecnologie assistive simili.</li> - <li>L'Elemento HTML di Sezione Header ( {{HTMLElement("header")}} ) definisce la testata di una pagina, che generalmente contiene il logo e il nome del sito, occasionalmente una barra di navigazione. A dispetto del nome, non viene necessariamente posizionato all'inizio del documento.</li> - <li>L'Elemento HTML di Sezione Footer ( {{HTMLElement("footer")}} ) definisce il piè di pagina, che generalmente contiene il copyright, le informazioni legali ed a volte altri links. A dispetto del nome, non viene necessariamente posizionato alla fine del documento.</li> -</ol> -<h2 id="Indirizzi_e_data_di_pubblicazione_negli_elementi_di_sezionamento">Indirizzi e data di pubblicazione negli elementi di sezionamento</h2> -<p>L'autore di un documento spesso vuole pubblicare alcune informazioni personali, come nome e indirizzo dell'autore. HTML4 lo permetteva tramite l'elemento {{HTMLElement("address")}}, che è stato esteso in HTML5.</p> -<p>Un documento può essere fatto di diverse sezioni scritte da diversi autori. Una sezione curata da un autore diverso rispetto alla sezione principale può essere definita da un elemento {{HTMLElement("article")}}. Di conseguenza, l'elemento {{HTMLElement("address")}} è ora riferito al più vicino tra gli elementi {{HTMLElement("body")}} e {{HTMLElement("article")}} che lo contengono.</p> -<p>In modo simile, il nuovo elemento {{HTMLElement("time")}}, con il suo set di attributi {{htmlattrxref("pubdate", "time")}}, rappresenta la data di pubblicazione di tutto il documento, rispettivamente all'articolo, legato al più vicino contenitore {{HTMLElement("body")}} o {{HTMLElement("article")}}.</p> -<h2 id="Usare_Elementi_HTML5_nei_Browser_Non-HTML5">Usare Elementi HTML5 nei Browser Non-HTML5</h2> -<p>Sezioni ed intestazioni dovrebbero funzionare nella maggior parte dei browser non-HTML5-compatibili. Anche se non supportati, non necessitano di una interfaccia DOM specifica ma solo di uno stile CSS dedicato, perché agli elementi sconosciuti viene assegnato <code>display:inline</code> di default:</p> -<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { - display:block; -} -</pre> -<p>Naturalmente lo sviluppatore può assegnargli uno stile differente, ma tenendo a mente che nei browser non compatibili con HTML5 il rendering di default è diverso da quel che ci si potrebbe aspettare. Notare che l'elemento {{HTMLElement("time")}} non è stato incluso di proposito, perché in questo caso il rendering di default dei browser non-HTML5-compatibili corrisponde a quello previsto.</p> -<p>Questo metodo però ha delle limitazioni, perché alcuni browser non permettono di applicare stili CSS agli elementi non supportati. È il caso di Internet Explorer (versione 8 e precedenti), che necessita di uno script per abilitare il rendering di tali elementi:</p> -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header"); - document.createElement("footer"); - document.createElement("section"); - document.createElement("aside"); - - document.createElement("nav"); - document.createElement("article"); - document.createElement("hgroup"); - document.createElement("time"); - </script> -<![endif]--></pre> -<p>Questo significa che, in caso di Internet Explorer (8 e precedenti), javascript deve essere abilitato affinché gli elementi HTML vengano visualizzati correttamente. Altrimenti essi non verranno visualizzati (o verranno visualizzati senza stili applicati NdT), il che potrebbe rivelarsi problematico, dato che si tratta di elementi che definiscono la struttura dell'intera pagina. Ecco perché un elemento {{HTMLElement("noscript")}} dovrebbe essere aggiunto per questi casi specifici, come nell'esempio di seguito:</p> -<pre class="brush:xml"><noscript> - <strong>Attenzione !</strong> - Dato che il tuo browser non supporta HTML5, alcuni elementi vengono simulati usando JScript. - Sfortunatamente il tuo browser ha disattivato lo scripting. Per favore abilita JScript per visualizzare la pagina. -</noscript></pre> -<p>Ciò ci porta al seguente codice per permettere il supporto delle sezioni e delle intestazioni HTML5 nei browser non-HTML5, anche nel caso di Internet Explorer (8 e precedenti), con un fallback adeguato nel caso in il browser non permetta l'esecuzione di javascript:</p> -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header"); - document.createElement("footer"); - document.createElement("section"); - document.createElement("aside"); - document.createElement("nav"); - document.createElement("article"); - document.createElement("hgroup"); - document.createElement("time"); - </script> - <noscript> - <strong>Attenzione !</strong> - Dato che il tuo browser non supporta HTML5, alcuni elementi vengono simulati usando JScript. - Sfortunatamente il tuo browser ha disattivato lo scripting. Per favore abilita JScript per visualizzare la pagina. -</noscript> -<![endif]--></pre> -<h2 id="Conclusioni">Conclusioni</h2> -<p>Le nuove sezioni e intestazioni introdotte in HTML5 danno agli sviluppatori la capacità di descrivere la struttura di un documento web in maniera standard. Portano un grande vantaggio per le persone che hanno browser supportanti HTML5 e che hanno bisogno della struttura per comprendere la pagina, per esempio le le persone che necessitano l'aiuto di una tecnologia assistiva. I nuovi elementi semantici sono semplici da usare e, con pochi aggiustamenti, funzionano anche nei browser non-HTML5. Pertanto possono essere utilizzati senza restrizioni.</p> -<div> - {{HTML5ArticleTOC()}}</div> diff --git a/files/it/web/guide/index.html b/files/it/web/guide/index.html deleted file mode 100644 index db55293bd5..0000000000 --- a/files/it/web/guide/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Guida Web developer -slug: Web/Guide -tags: - - Guide - - Landing - - NeedsTranslation - - TopicStub - - Web -translation_of: Web/Guide ---- -<p><strong>Questi articoli forniscono informazioni utili per l'utilizzo di specifiche tecnologie e API.</strong></p> - -<div> -<div> -<ul> - <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS">CSS developer guide</a></li> - <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events">Event developer guide</a></li> - <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics">Graphics on the Web</a></li> - <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API">Guide to Web APIs</a></li> - <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML">HTML developer guide</a></li> - <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></li> - <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Localizations_and_character_encodings">Localizations and character encodings</a></li> - <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile">Mobile Web Development</a></li> - <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance">Optimization and performance</a></li> - <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> - <li class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/SVG-in-OpenType">SVG-in-OpenType</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF">The Web Open Font Format (WOFF)</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience">User experience</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">Using FormData Objects</a></li> -</ul> -</div> -</div> - -<h2 id="Guarda_anche">Guarda anche</h2> - -<ul> - <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li> -</ul> diff --git a/files/it/web/guide/mobile/index.html b/files/it/web/guide/mobile/index.html deleted file mode 100644 index 11f17242c7..0000000000 --- a/files/it/web/guide/mobile/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Mobile Web development -slug: Web/Guide/Mobile -tags: - - Mobile - - NeedsTranslation - - TopicStub - - Web Development -translation_of: Web/Guide/Mobile -translation_of_original: Web_Development/Mobile -original_slug: Web_Development/Mobile ---- -<p>Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.</p> -<ul> - <li><a class="vt-p" href="/en/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">What is mobile-friendliness?</a></li> - <li><a class="vt-p" href="/en/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Separate sites</a></li> - <li><a class="vt-p" href="/en/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">Responsive design</a></li> - <li><a class="vt-p" href="/en/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">A hybrid approach</a></li> -</ul> diff --git a/files/it/web/guide/parsing_and_serializing_xml/index.html b/files/it/web/guide/parsing_and_serializing_xml/index.html deleted file mode 100644 index 6cf10e3766..0000000000 --- a/files/it/web/guide/parsing_and_serializing_xml/index.html +++ /dev/null @@ -1,1194 +0,0 @@ ---- -title: Costruire e decostruire un documento XML -slug: Web/Guide/Parsing_and_serializing_XML -translation_of: Web/Guide/Parsing_and_serializing_XML -original_slug: Costruire_e_decostruire_un_documento_XML ---- -<p>Quest'articolo si propone di fornire una guida esaustiva per l'uso di XML per mezzo Javascript. Esso si divide in due sezioni. Nella <a href="#Costruire_DOM" title="Costruire un albero DOM">prima sezione</a> verranno illustrati tutti i possibili metodi per costruire un albero DOM, nella <a href="#Decostruire_DOM" title="Decostruire un albero DOM">seconda</a> invece si darà per scontato che <em>saremo già</em> in possesso di un albero DOM e il nostro scopo sarà quello di trattarne il contenuto.</p> - -<h4 id="So_what.3F" name="So_what.3F">Che cos'è un albero DOM?</h4> - -<p>Per albero DOM s'intende un'istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code>. Si tratta quindi di un oggetto Javascript e non è da confondere con una stringa di testo contenente il codice sorgente di un documento XML ancora da parsare.</p> - -<p>DOM trees can be queried using <a href="/it/Usare_XPath" title="it/Usare_XPath">XPath</a> expressions, converted to strings or written to a local or remote files using <code>XMLSerializer</code> (without having to first convert to a string), POSTed to a web server (via <code><a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a></code>),</p> - -<p>You can use DOM trees to model data which isn't well-suited for RDF (or perhaps you just don't like RDF). Another application is that, since XUL is XML, the UI of your application can be dynamically manipulated, downloaded, uploaded, saved, loaded, converted, or transformed quite easily.</p> - -<p>Mozilla gestisce ampiamente <a href="/it/XML" title="it/XML">XML</a>. Sono gestite diverse Raccomandazioni e bozze del World Wide Web Consortium (<a class="external" href="http://w3c.org/">W3C</a>) per la famiglia XML, così come altre tecnologie relative. Tra le più importanti tecnologie native che Mozilla offre per lavorare con documenti XML sono da citare:</p> - -<ul> - <li><a href="/it/XPath" title="it/XPath">XPath</a> per <strong>indirizzare parti diverse di un documento XM</strong>L,</li> - <li><a href="/it/XMLSerializer" title="it/XMLSerializer">XMLSerializer</a> per convertire <strong>alberi DOM in stringhe o files</strong>,</li> - <li><a href="/it/DOM/DOMParser" title="it/DOMParser">DOMParser</a> costruire un documento XML <strong>convertendo delle stringhe in alberi DOM</strong>,</li> - <li><a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a> per parsare <strong>a partire da file</strong> documenti XML in albero DOM. Sebbene anche le istanze di <code>DOMParser</code> abbiano un metodo chiamato <code>parseFromStream()</code>, è più facile utilizzare <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a> che lavore sia con file remoti (non confinati al solo protocollo HTTP) che con file locali,</li> - <li><a href="/it/XSLT" title="it/XSLT">XSLT</a> e <a href="/it/XLink" title="it/XLink">XLink</a> per <strong>manipolare il contenuto</strong> di un documento XML.</li> -</ul> - -<p>È possibile comunque creare manualmente propri algoritmi per la serializzazione o la conversione di un documento XML, come si vedrà <a href="#JXON" title="Vai alla sezione su JXON">in seguito.</a></p> - -<h2 id="Prima_parte_costruire_un_albero_DOM">Prima parte: costruire un albero DOM</h2> - -<p>Come precedentemente accennato, in questa prima sezione il nostro scopo sarà quello di ottenere un albero DOM.</p> - -<p>Un albero DOM è un oggetto (e precisamente un'istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code>). Ci sono molti modi per costruirlo o ottenerlo, a seconda delle proprie esigenze. Di seguito verranno elencate varie strade: a partire da una stringa di codice sorgente, a partire da file o a partire da strutture di differente natura.</p> - -<h3 id="Creare_dinamicamente_un_albero_DOM">Creare dinamicamente un albero DOM</h3> - -<p>Questo paragrafo illustra come utilizzare l'API JavaScript <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a> per creare e modificare oggetti DOM. Essa è attiva in tutte le applicazioni <em>Gecko-based</em> (come Firefox, per esempio) sia in <em>privileged code</em> (estensioni) che in <em>unprivileged code</em> (pagine internet).</p> - -<h4 id="Dynamically_creating_a_DOM_tree" name="Dynamically_creating_a_DOM_tree">Scrivendolo a mano</h4> - -<p>L'API JavaScript <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a>, supportata da Mozilla, può essere invocata manualmente.</p> - -<p>Si consideri il seguente documento XML:</p> - -<pre class="brush: xml"><?xml version="1.0"?> -<people> - <person first-name="eric" middle-initial="H" last-name="jung"> - <address street="321 south st" city="denver" state="co" country="usa" /> - <address street="123 main st" city="arlington" state="ma" country="usa" /> - </person> - <person first-name="jed" last-name="brown"> - <address street="321 north st" city="atlanta" state="ga" country="usa" /> - <address street="123 west st" city="seattle" state="wa" country="usa" /> - <address street="321 south avenue" city="denver" state="co" country="usa" /> - </person> -</people> -</pre> - -<p>Grazie all'API <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a> è possibile creare una rappresentazione di esso come la seguente, presente unicamente nella memoria dell'interprete:</p> - -<pre class="brush: js">var doc = document.implementation.createDocument("", "", null); -var peopleElem = doc.createElement("people"); - -var personElem1 = doc.createElement("person"); -personElem1.setAttribute("first-name", "eric"); -personElem1.setAttribute("middle-initial", "h"); -personElem1.setAttribute("last-name", "jung"); - -var addressElem1 = doc.createElement("address"); -addressElem1.setAttribute("street", "321 south st"); -addressElem1.setAttribute("city", "denver"); -addressElem1.setAttribute("state", "co"); -addressElem1.setAttribute("country", "usa"); -personElem1.appendChild(addressElem1); - -var addressElem2 = doc.createElement("address"); -addressElem2.setAttribute("street", "123 main st"); -addressElem2.setAttribute("city", "arlington"); -addressElem2.setAttribute("state", "ma"); -addressElem2.setAttribute("country", "usa"); -personElem1.appendChild(addressElem2); - -var personElem2 = doc.createElement("person"); -personElem2.setAttribute("first-name", "jed"); -personElem2.setAttribute("last-name", "brown"); - -var addressElem3 = doc.createElement("address"); -addressElem3.setAttribute("street", "321 north st"); -addressElem3.setAttribute("city", "atlanta"); -addressElem3.setAttribute("state", "ga"); -addressElem3.setAttribute("country", "usa"); -personElem2.appendChild(addressElem3); - -var addressElem4 = doc.createElement("address"); -addressElem4.setAttribute("street", "123 west st"); -addressElem4.setAttribute("city", "seattle"); -addressElem4.setAttribute("state", "wa"); -addressElem4.setAttribute("country", "usa"); -personElem2.appendChild(addressElem4); - -var addressElem5 = doc.createElement("address"); -addressElem5.setAttribute("street", "321 south avenue"); -addressElem5.setAttribute("city", "denver"); -addressElem5.setAttribute("state", "co"); -addressElem5.setAttribute("country", "usa"); -personElem2.appendChild(addressElem5); - -peopleElem.appendChild(personElem1); -peopleElem.appendChild(personElem2); -doc.appendChild(peopleElem); -</pre> - -<p>Si veda anche <a href="/en/XUL_Tutorial/Document_Object_Model" title="en/XUL_Tutorial/Document_Object_Model">Il capitolo sul DOM del Tutorial XUL</a> (in inglese).</p> - -<h4 id="Automatizzando_la_creazione_dinamica_dell'albero_DOM">Automatizzando la creazione dinamica dell'albero DOM</h4> - -<p>L'invocazione dell'API Javascript <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a>, può essere anche automatizzata.</p> - -<p>Non esiste un metodo unico per automatizzare la creazione di un documento XML. Esso dipende molto dal tipo di dati che andremo a scrivere. In ogni caso, per vederne un possibile esempio, si vada all'<a href="#JXON_algoritmi_inversi" title="JXON – Appendice">ultimo paragrafo</a> del <a href="#JXON" title="Convertire un foglio XML in un albero di oggetti Javascript (JXON)">capitolo su JXON</a>.</p> - -<h3 id="Costruire_un_albero_DOM_XML_a_partire_da_stringhe_di_codice_sorgente">Costruire un albero DOM XML a partire da stringhe di codice sorgente</h3> - -<p>Il seguente esempio mostra la costruzione di un albero DOM tramite <em>parsing</em> di un codice sorgente.</p> - -<pre class="brush: js">var sSource = "<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"; -var oParser = new DOMParser(); -var oDOM = oParser.parseFromString(sSource, "text\/xml"); -// print the name of the root element or error message -dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);</pre> - -<p><a class="external" href="http://www.van-steenbeek.net/?q=explorer_domparser_parsefromstring">Tutorial su come rendere questo codice cross browser</a> (in inglese)</p> - -<h3 id="Costruire_un_albero_DOM_a_partire_da_un_file">Costruire un albero DOM a partire da un file</h3> - -<p>Preambolo da stendere.</p> - -<h4 id="Usando_DOMParser">Usando <code>DOMParser</code></h4> - -<p>Ciascuna istanza di <code>DOMParser</code> possiede diversi metodi per parsare un documento XML a partire da un file. È possibile fare ricorso a <code>parseFromStream()</code>:</p> - -<pre class="brush: js">function loadXMLFile (sFile) { - var oIOServ = Components.classes["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService); - var oChannel = oIOServ.newChannel(sFile,null,null); - var oStream = oChannel.open(); - // alert("oStream.available() = " + oStream.available()); // debug - var parser = new DOMParser(); - - doc = parser.parseFromStream(oStream, "", oStream.available(),"text/xml"); - - // alert("doc=" + doc); // debug - oStream.close(); - - return doc; -} - -// alert(loadXMLFile("file:///home/john/hello.xml")); -</pre> - -<p>oppure utilizzare <code>parseFromBuffer()</code>:</p> - -<pre class="brush: js">// Esempio mancante</pre> - -<p>In ogni caso il metodo più pratico per accedere al contenuto di un file XML resta <em>ajax</em>, per l'uso del quale si rimanda al prossimo paragrafo.</p> - -<h4 id="Usando_XMLHttpRequest">Usando <code>XMLHttpRequest</code></h4> - -<p>Come già precedentemente accennato, sebbene ciascuna istanza di <code>DOMParser</code> possegga un metodo chiamato <code>parseFromStream()</code>, è più facile utilizzare <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a> per parsare documenti XML in alberi DOM (<code>XMLHttpRequest</code> funziona bene sia in locale che in remoto). Di seguito c'è un codice di esempio che legge e parsa in un albero DOM un file XML locale:</p> - -<pre class="brush: js">var oReq = new XMLHttpRequest(); -oReq.open("GET", "chrome://passwdmaker/content/people.xml", false); -oReq.send(null); -// print the name of the root element or error message -var oDOM = oReq.responseXML; -dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName); -</pre> - -<p>N.B. Il metodo <code>responseXML</code> è sempre un'istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code> – e di conseguenza un <em>oggetto</em> – a differenza del metodo <code>responseText</code>, che è sempre un <em>valore primario</em> (una stringa).</p> - -<h4 id="Usando_l'elemento_HTMLElement(object)_.">Usando l'elemento {{ HTMLElement("object") }}.</h4> - -<p>Di seguito è presentata un'altra via possibile per parsare un file XML in un albero DOM: usando il tag {{ HTMLElement("object") }}. Prima di lanciare il seguente esempio è necessario creare un file XML chiamato <code>purchase_order.xml</code> e contenente un albero simile a questo:</p> - -<p>purchase_order.xml</p> - -<pre class="brush: xml"><?xml version="1.0"?> -<purchaseOrder xmlns="http://example.mozilla.org/PurchaseOrderML"> - <lineItem> - <name>Line Item 1</name> - <price>1.25</price> - </lineItem> - <lineItem> - <name>Line Item 2</name> - <price>2.48</price> - </lineItem> -</purchaseOrder> -</pre> - -<p>Adesso proviamo a lanciare il nostro esempio:</p> - -<pre class="brush: html"><!doctype html> -<html> -<head> -<title>XML Data Block Demo</title> -<script> -function runDemo() { - var doc = document.getElementById("purchase-order").contentDocument; - var lineItems = doc.getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "lineItem"); - var firstPrice = lineItems[0].getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "price")[0].textContent; - document.getElementById("output-box").textContent = "The purchase order contains " + lineItems.length + " line items. The price of the first line item is " + firstPrice + "."; -} -</script> -</head> -<body onload="runDemo()";> -<object id="purchase-order" data="purchase_order.xml" type="text/xml" style="display: none;"></object> -<div id="output-box">Demo did not run</div> -</body> -</html> -</pre> - -<p>Per ulteriori approfondimenti, si rimanda all'articolo: <a href="/it/Usare_le_XML_Data_Islands_in_Mozilla" title="it/Usare_le_XML_Data_Islands_in_Mozilla">Usare le XML Data Islands in Mozilla</a>.</p> - -<h2 id="Seconda_parte_decostruire_un_albero_DOM">Seconda parte: decostruire un albero DOM</h2> - -<p>Da adesso in poi daremo per scontato il fatto che <em>abbiamo già</em> un albero DOM nella memoria dell'interprete Javascript e che il nostro scopo è quello di utilizzare tale istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code> nei modi più disparati.</p> - -<h3 id="Convertire_un_documento_XML_in_stringhe_di_codice_sorgente">Convertire un documento XML in stringhe di codice sorgente</h3> - -<p>L'esempio seguente mostra come ottenere dalla variabile <code>doc</code> — il nostro albero DOM — una stringa contenente l'intero suo codice sorgente:</p> - -<pre class="brush: js">var oSerializer = new XMLSerializer(); -var sXML = oSerializer.serializeToString(doc); -</pre> - -<p>Non è possibile creare un istanza di <code>XMLSerializer</code> (ovvero lanciare: <code>new XMLSerializer()</code>) dall'interno di un componente JS XPCOM o dall'interno di un <a class="internal" href="/it/Moduli_di_codice_JavaScript" title="it/Moduli_di_codice_JavaScript">modulo</a>. Per farlo bisogna lanciare:</p> - -<pre class="brush: js">var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"].createInstance(Components.interfaces.nsIDOMSerializer); -var sXML = oSerializer.serializeToString(doc); -</pre> - -<h4 id="Come_ottenere_stringhe_di_codice_sorgente_di_facile_lettura">Come ottenere stringhe di codice sorgente di facile lettura</h4> - -<p>You can <a class="external" href="http://en.wikipedia.org/wiki/Pretty-print">pretty print</a> a DOM tree using <code>XMLSerializer</code> and <a href="/it/E4X" title="it/E4X">E4X</a>. First, create a DOM tree as described in the <a href="/it/Come_creare_un_albero_DOM" title="it/Come_creare_un_albero_DOM">Come creare un albero DOM</a> article. Alternatively, use a DOM tree obtained from <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a>. We assume it's in the <code>doc</code> variable.</p> - -<pre class="brush: js">var oSerializer = new XMLSerializer(); -var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();</pre> - -<p>Indents are provided with two spaces. You can, of course, use <a href="/it/DOM/treeWalker" title="it/DOM/treeWalker">DOM:treeWalker</a> to write your own, more performant version which also has the advantage that you can customize the indent string to be whatever you like.</p> - -<p><strong>Note:</strong> When using the E4X <code>toXMLString</code> method your <strong>CDATA elements will be lost</strong> and only the containing text remains. So using the above method might not be useful if you have CDATA elements in your XML.</p> - -<pre class="brush: xml"><content><![CDATA[This is the content]]></content></pre> - -<p>Will become</p> - -<pre class="brush: xml"><content>This is the content</content></pre> - -<h3 id="Convertire_un_foglio_XML_in_un_albero_di_oggetti_Javascript_(JXON)">Convertire un foglio XML in un albero di oggetti Javascript (JXON)</h3> - -<p>JXON (lossless <strong>J</strong>avascript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation) è un nome generico col quale viene definita la rappresentazione di oggetti Javascript in linguaggio XML. Non esistono veri e propri standard per questa rappresentazione, ma da poco tempo a questa parte cominciano ad affacciarsi in rete alcune convenzioni.</p> - -<p>JXON non è un metodo per indirizzare poche parti di un documento XML, dato che il suo punto di forza è la conversione per intero di un albero DOM. Se il nostro scopo è quello di accedere a delle informazioni limitate di un albero DOM, si raccomanda vivamente di <a href="/it/Usare_XPath" title="it/Usare_XPath">Usare XPath</a>.</p> - -<p>Ci sono casi invece in cui un documento XML è costruito in maniera tale da avere come principale destinatario del proprio contenuto proprio l'interprete Javascript. In tal caso JXON si presenta come la via migliore.</p> - -<p>Per tutto questo capitolo immagineremo di aver parsato, come al solito nella nostra variabile <code>doc</code>, questo documento XML di esempio:</p> - -<h5 id="esempio.xml">esempio.xml</h5> - -<pre class="brush: xml"><?xml version="1.0"?> -<!DOCTYPE catalog SYSTEM "catalog.dtd"> -<catalog> - <product description="Cardigan Sweater"> - <catalog_item gender="Men's"> - <item_number>QWZ5671</item_number> - <price>39.95</price> - <size description="Medium"> - <color_swatch image="red_cardigan.jpg">Red</color_swatch> - <color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch> - </size> - <size description="Large"> - <color_swatch image="red_cardigan.jpg">Red</color_swatch> - <color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch> - </size> - </catalog_item> - <catalog_item gender="Women's"> - <item_number>RRX9856</item_number> - <discount_until>Dec 25, 1995</discount_until> - <price>42.50</price> - <size description="Medium"> - <color_swatch image="black_cardigan.jpg">Black</color_swatch> - </size> - </catalog_item> - </product> - <script type="text/javascript"><![CDATA[function matchwo(a,b) { - if (a < b && a < 0) { return 1; } - else { return 0; } -}]]></script> -</catalog> -</pre> - -<p>Adesso proveremo a ottenere una rappresentazione della variabile <code>doc</code> — l'albero DOM — attraverso un albero di oggetti Javascript (per approfondire si leggano le guide su <a href="/it/JavaScript/Guida/Lavorare_con_gli_oggetti" title="Lavorare con gli oggetti">come lavorare con gli oggetti</a> e su <a href="/it/Introduzione_al_carattere_Object-Oriented_di_JavaScript" title="Introduzione al carattere Object-Oriented di JavaScript">come Javascript sia <em>Object-Oriented</em></a>). Per far ciò potremo utilizzare diversi algoritmi di conversione.</p> - -<p>Per semplicità gli algoritmi qui proposti (si veda: <a href="#Algoritmo_JXON_1" title="Vai all'algoritmo JXON #1">#1</a>, <a href="#Algoritmo_JXON_2" title="Vai all'algoritmo JXON #2">#2</a>, <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">#3</a>, <a href="#Algoritmo_JXON_4" title="Vai all'algoritmo JXON #4">#4</a>) prenderanno in considerazione unicamente i seguenti tipi di nodi e i loro attributi:</p> - -<ol> - <li><code>Document</code> (solo come argomento della funzione),</li> - <li><code>DocumentFragment</code> (solo come argomento della funzione),</li> - <li><code>Element</code>,</li> - <li><code>Text</code> (mai come argomento della funzione),</li> - <li><code>CDATASection</code> (mai come argomento della funzione).</li> -</ol> - -<p>Si tratta di un buon compromesso per un uso Javascript, dacché la gran parte delle informazioni di un documento XML è contenuta in questo tipo di nodi. Ogni altra informazione (come processing instructions, xml schemas, commenti, etc.) andrà persa. Allo scopo di evitare conflitti, la lettura dei nomi dei nodi e dei loro attributi è <em>case insensitive</em> (resa sempre in <em>minuscolo</em>) e di conseguenza le proprietà locali dell'albero di oggetti così ottenuto, aggiunte via JavaScript, dovranno avere sempre un qualche tipo di lettera maiuscola al loro interno (per evitare di sovrascrivere le proprietà ottenute dal foglio XML), come si può vedere di seguito. I seguenti algoritmi sono liberamente basati sulla <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker, versione 0.4</a>, che prevede il riconoscimento del <code>typeof</code> del contenuto di testo di ogni singolo nodo letto.</p> - -<h4 id="Algoritmo_1_una_via_prolissa">Algoritmo #1: una via prolissa</h4> - -<p>Questo semplice costruttore ricorsivo converte un albero DOM XML in un albero di oggetti Javascript. Il contenuto di testo di ogni nodo sarà salvato all'interno della proprietà <code>keyValue</code>, mentre i <code>nodeAttributes</code>, se esistono, saranno annidati come proprietà dell'oggetto-figlio <code>keyAttributes</code>. L'argomento del costruttore potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p> - -<pre class="brush: js">function buildValue(sValue) { - if (/^\s*$/.test(sValue)) { return null; } - if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; } - if (isFinite(sValue)) { return parseFloat(sValue); } - if (isFinite(Date.parse(sValue))) { return new Date(sValue); } - return sValue; -} - -function JXONData (oXMLParent) { - var nAttrLen = 0, nLength = 0, sCollectedTxt = ""; - // children - if (oXMLParent.hasChildNodes()) { - for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) { - oItChild = oXMLParent.childNodes.item(nChildId); - if ((oItChild.nodeType + 1 | 1) === 5) { sCollectedTxt += oItChild.nodeType === 3 ? oItChild.nodeValue.replace(/^\s+|\s+$/g, "") : oItChild.nodeValue; } // nodeType is "Text" (3) or "CDATASection" (4) - else if (oItChild.nodeType === 1 && !oItChild.prefix) { // nodeType is "Element" (1) - sItKey = oItChild.nodeName.toLowerCase(); - sItVal = new JXONData(oItChild); - if (this.hasOwnProperty(sItKey)) { - if (this[sItKey].constructor !== Array) { this[sItKey] = [this[sItKey]]; } - this[sItKey].push(sItVal); - } else { this[sItKey] = sItVal; nLength++; } - } - } - this.keyValue = buildValue(sCollectedTxt); - } else { this.keyValue = null; } - // node attributes - if (oXMLParent.hasAttributes()) { - var oItAttr; - this.keyAttributes = {}; - for (nAttrLen; nAttrLen < oXMLParent.attributes.length; nAttrLen++) { - oItAttr = oXMLParent.attributes.item(nAttrLen); - this.keyAttributes[oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue); - } - } - // optional properties and methods; you could safely adjoust/remove them... - this.keyLength = nLength; - this.attributesLength = nAttrLen; - // this.DOMNode = oXMLParent; - this.valueOf = function() { return this.keyValue; }; - this.toString = function() { return String(this.keyValue); }; - this.getItem = function(nItem) { - if (nLength === 0) { return null; } - var iItem = 0; - for (var sKeyName in this) { if (iItem === nItem) { return this[sKeyName]; } iItem++; } - return null; - }; - this.getAttribute = function(nAttrib) { - if (nAttrLen === 0 || nAttrib + 1 > nAttrLen) { return null; } - var nItAttr = 0; - for (var sAttrName in this.keyAttributes) { if (nItAttr === nAttrib) { return this.keyAttributes[sAttrName]; } nItAttr++; } - return null; - }; - this.hasChildren = function() { return this.keyLength > 0; }; -} - -var myObject = new JXONData(doc); -// abbiamo ottenuto il nostro albero di oggetti Javascript! provare per credere: alert(JSON.stringify(myObject)); -</pre> - -<p>Con questo algoritmo <a href="#XML_di_esempio" title="Go to the sample XML document">il nostro esempio</a> diventerà:</p> - -<pre class="brush: js">{ - "catalog": { - "product": { - "catalog_item": [{ - "item_number": { - "keyValue": "QWZ5671", - "keyLength": 0, - "attributesLength": 0 - }, - "price": { - "keyValue": 39.95, - "keyLength": 0, - "attributesLength": 0 - }, - "size": [{ - "color_swatch": [{ - "keyValue": "Red", - "keyAttributes": { - "image": "red_cardigan.jpg" - }, - "keyLength": 0, - "attributesLength": 1 - }, { - "keyValue": "Burgundy", - "keyAttributes": { - "image": "burgundy_cardigan.jpg" - }, - "keyLength": 0, - "attributesLength": 1 - }], - "keyValue": null, - "keyAttributes": { - "description": "Medium" - }, - "keyLength": 1, - "attributesLength": 1 - }, { - "color_swatch": [{ - "keyValue": "Red", - "keyAttributes": { - "image": "red_cardigan.jpg" - }, - "keyLength": 0, - "attributesLength": 1 - }, { - "keyValue": "Burgundy", - "keyAttributes": { - "image": "burgundy_cardigan.jpg" - }, - "keyLength": 0, - "attributesLength": 1 - }], - "keyValue": null, - "keyAttributes": { - "description": "Large" - }, - "keyLength": 1, - "attributesLength": 1 - }], - "keyValue": null, - "keyAttributes": { - "gender": "Men's" - }, - "keyLength": 3, - "attributesLength": 1 - }, { - "item_number": { - "keyValue": "RRX9856", - "keyLength": 0, - "attributesLength": 0 - }, - "discount_until": { - "keyValue": new Date(1995, 11, 25), - "keyLength": 0, - "attributesLength": 0 - }, - "price": { - "keyValue": 42.5, - "keyLength": 0, - "attributesLength": 0 - }, - "size": { - "color_swatch": { - "keyValue": "Black", - "keyAttributes": { - "image": "black_cardigan.jpg" - }, - "keyLength": 0, - "attributesLength": 1 - }, - "keyValue": null, - "keyAttributes": { - "description": "Medium" - }, - "keyLength": 1, - "attributesLength": 1 - }, - "keyValue": null, - "keyAttributes": { - "gender": "Women's" - }, - "keyLength": 4, - "attributesLength": 1 - }], - "keyValue": null, - "keyAttributes": { - "description": "Cardigan Sweater" - }, - "keyLength": 1, - "attributesLength": 1 - }, - "script": { - "keyValue": "function matchwo(a,b) {\n if (a < b && a < 0) { return 1; }\n else { return 0; }\n}", - "keyAttributes": { - "type": "text/javascript" - }, - "keyLength": 0, - "attributesLength": 1 - }, - "keyValue": null, - "keyLength": 2, - "attributesLength": 0 - }, - "keyValue": null, - "keyLength": 1, - "attributesLength": 0 -} -</pre> - -<p>È un approccio raccomandato nel caso in cui ci sia completamente ignota la struttura del documento XML che andremo a leggere.</p> - -<h4 id="Algoritmo_2_una_via_un_po'_meno_prolissa">Algoritmo #2: una via un po' meno prolissa</h4> - -<p>Quello che segue è un altro, più semplice, metodo di conversione. Dove i <code>nodeAttributes</code> saranno annidati nello stesso oggetto contenente la trascrizione dei nodi figli sebbene, a differenza di quelli, questi saranno contrassegnati dal prefisso “<code>@</code>”. Come sopra, il contenuto di testo di ciascun nodo sarà affidato alla proprietà <code>keyValue</code>. L'argomento del costruttore potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p> - -<pre class="brush: js">function buildValue(sValue) { - if (/^\s*$/.test(sValue)) { return null; } - if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; } - if (isFinite(sValue)) { return parseFloat(sValue); } - if (isFinite(Date.parse(sValue))) { return new Date(sValue); } - return sValue; -} - -function JXONData (oXMLParent) { - if (oXMLParent.hasChildNodes()) { - var sCollectedTxt = ""; - for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) { - oItChild = oXMLParent.childNodes.item(nChildId); - if ((oItChild.nodeType + 1 | 1) === 5) { sCollectedTxt += oItChild.nodeType === 3 ? oItChild.nodeValue.replace(/^\s+|\s+$/g, "") : oItChild.nodeValue; } - else if (oItChild.nodeType === 1 && !oItChild.prefix) { - sItKey = oItChild.nodeName.toLowerCase(); - sItVal = new JXONData(oItChild); - if (this.hasOwnProperty(sItKey)) { - if (this[sItKey].constructor !== Array) { this[sItKey] = [this[sItKey]]; } - this[sItKey].push(sItVal); - } else { this[sItKey] = sItVal; } - } - } - if (sCollectedTxt) { this.keyValue = buildValue(sCollectedTxt); } - } - if (oXMLParent.hasAttributes()) { - var oItAttr; - for (var iAttrId = 0; iAttrId < oXMLParent.attributes.length; iAttrId++) { - oItAttr = oXMLParent.attributes.item(iAttrId); - this["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue); - } - } -} - -var myObject = new JXONData(doc); -// abbiamo ottenuto il nostro albero di oggetti Javascript! provare per credere: alert(JSON.stringify(myObject)); -</pre> - -<p>Con questo algoritmo <a href="#XML_di_esempio" title="Go to the sample XML document">il nostro esempio</a> diventerà:</p> - -<pre class="brush: js">{ - "catalog": { - "product": { - "catalog_item": [{ - "item_number": { - "keyValue": "QWZ5671" - }, - "price": { - "keyValue": 39.95 - }, - "size": [{ - "color_swatch": [{ - "keyValue": "Red", - "@image": "red_cardigan.jpg" - }, { - "keyValue": "Burgundy", - "@image": "burgundy_cardigan.jpg" - }], - "@description": "Medium" - }, { - "color_swatch": [{ - "keyValue": "Red", - "@image": "red_cardigan.jpg" - }, { - "keyValue": "Burgundy", - "@image": "burgundy_cardigan.jpg" - }], - "@description": "Large" - }], - "@gender": "Men's" - }, { - "item_number": { - "keyValue": "RRX9856" - }, - "discount_until": { - "keyValue": new Date(1995, 11, 25) - }, - "price": { - "keyValue": 42.5 - }, - "size": { - "color_swatch": { - "keyValue": "Black", - "@image": "black_cardigan.jpg" - }, - "@description": "Medium" - }, - "@gender": "Women's" - }], - "@description": "Cardigan Sweater" - }, - "script": { - "keyValue": "function matchwo(a,b) {\n if (a < b && a < 0) { return 1; }\n else { return 0; }\n}", - "@type": "text/javascript" - } - } -} -</pre> - -<p>È un approccio possibile nel caso in cui ci sia parzialmente nota la struttura del documento XML che andremo a leggere.</p> - -<h4 id="Algoritmo_3_una_via_sintetica">Algoritmo #3: una via sintetica</h4> - -<p>Ora proveremo un altro metodo di conversione. Questo algoritmo è quello che si avvicina di più alla <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>. Esso è molto simile al precedente, eccetto che per il fatto che i nodi che non contengono alcun nodo-figlio di tipo <code>Element</code>, ma solo nodi-figli di tipo <code>Text</code> e/o <code>CDATASection</code>, non saranno rappresentati da oggetti, ma direttamente da booleani, numeri, stringhe o istanze del costruttore <code>Date</code> (si veda la <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>). La rappresentazione dei nodi completamente vuoti invece (cioè che non contengono né nodi di tipo <code>Element</code>, né nodi di tipo <code>Text</code>, né nodi di tipo <code>CDATASection</code>) avranno come valore predefinito <code>true</code> (su questo punto si vedano le <a href="#JXON_considerazioni" title="Considerazioni sul codice">Considerazioni sul codice</a>). Inoltre questa volta non si è ricorso a un costruttore, ma a una funzione. L'argomento della funzione potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p> - -<p>In molti casi questo rappresenta il metodo di conversione più pratico.</p> - -<pre class="brush: js">function buildValue(sValue) { - if (/^\s*$/.test(sValue)) { return null; } - if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; } - if (isFinite(sValue)) { return parseFloat(sValue); } - if (isFinite(Date.parse(sValue))) { return new Date(sValue); } - return sValue; -} - -function getJXONData (oXMLParent) { - var vResult = /* put here the default value for empty nodes! */ true, nLength = 0, sCollectedTxt = ""; - if (oXMLParent.hasAttributes()) { - vResult = {}; - for (nLength; nLength < oXMLParent.attributes.length; nLength++) { - oItAttr = oXMLParent.attributes.item(nLength); - vResult["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue.replace(/^\s+|\s+$/g, "")); - } - } - if (oXMLParent.hasChildNodes()) { - for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) { - oItChild = oXMLParent.childNodes.item(nChildId); - if (oItChild.nodeType === 4) { sCollectedTxt += oItChild.nodeValue; } /* nodeType is "CDATASection" (4) */ - else if (oItChild.nodeType === 3) { sCollectedTxt += oItChild.nodeValue.replace(/^\s+|\s+$/g, ""); } /* nodeType is "Text" (3) */ - else if (oItChild.nodeType === 1 && !oItChild.prefix) { /* nodeType is "Element" (1) */ - if (nLength === 0) { vResult = {}; } - sItKey = oItChild.nodeName.toLowerCase(); - sItVal = getJXONData(oItChild); - if (vResult.hasOwnProperty(sItKey)) { - if (vResult[sItKey].constructor !== Array) { vResult[sItKey] = [vResult[sItKey]]; } - vResult[sItKey].push(sItVal); - } else { vResult[sItKey] = sItVal; nLength++; } - } - } - } - if (sCollectedTxt) { nLength > 0 ? vResult.keyValue = buildValue(sCollectedTxt) : vResult = buildValue(sCollectedTxt); } - /* if (nLength > 0) { Object.freeze(vResult); } */ - return vResult; -} - -var myObject = getJXONData(doc); -// abbiamo ottenuto il nostro albero di oggetti Javascript! provare per credere: alert(JSON.stringify(myObject)); -</pre> - -<div class="note"><strong>Nota:</strong> Se si vuole <em>congelare</em> l'intero oggetto (a causa della natura "statica" di un documento XML), decommentare la stringa: <code>/* if (nLength > 0) { Object.freeze(vResult); } */</code>. Il metodo <code><a href="/it/Javascript/Glossario/Oggetti_globali/Object/freeze" title="/it/Javascript/Glossario/Oggetti_globali/Object/freeze">Object.freeze</a></code> vieta l'aggiunta di nuove proprietà e la rimozione delle proprietà esistenti, congelando la loro enumerabilità, la loro configurabilità o la loro scrivibilità. In sostanza l'oggetto è reso effettivamente immutabile.</div> - -<p>Con questo algoritmo <a href="#XML_di_esempio" title="Go to the sample XML document">il nostro esempio</a> diventerà:</p> - -<pre class="brush: js">{ - "catalog": { - "product": { - "@description": "Cardigan Sweater", - "catalog_item": [{ - "@gender": "Men's", - "item_number": "QWZ5671", - "price": 39.95, - "size": [{ - "@description": "Medium", - "color_swatch": [{ - "@image": "red_cardigan.jpg", - "keyValue": "Red" - }, { - "@image": "burgundy_cardigan.jpg", - "keyValue": "Burgundy" - }] - }, { - "@description": "Large", - "color_swatch": [{ - "@image": "red_cardigan.jpg", - "keyValue": "Red" - }, { - "@image": "burgundy_cardigan.jpg", - "keyValue": "Burgundy" - }] - }] - }, { - "@gender": "Women's", - "item_number": "RRX9856", - "discount_until": new Date(1995, 11, 25), - "price": 42.5, - "size": { - "@description": "Medium", - "color_swatch": { - "@image": "black_cardigan.jpg", - "keyValue": "Black" - } - } - }] - }, - "script": { - "@type": "text/javascript", - "keyValue": "function matchwo(a,b) {\n if (a < b && a < 0) { return 1; }\n else { return 0; }\n}" - } - } -} -</pre> - -<p>È un approccio raccomandato nel caso in cui ci sia nota la struttura del documento XML che andremo a leggere.</p> - -<h4 id="Algoritmo_4_una_via_davvero_minimalista">Algoritmo #4: una via davvero minimalista</h4> - -<p>La seguente rappresenta un'altra possibile via di conversione. Anch'essa è molto vicina alla <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>. Con questo algoritmo la rappresentazione dei nodi di tipo <code>Element</code> che contengono a loro volta sullo stesso piano nodi-figli di tipo <code>Element</code> insieme con nodi-figli di tipo <code>Text</code> e/o di tipo <code>CDATASection</code> verrà resa per mezzo di istanze dei costruttori <code>Boolean</code>, <code>Number</code>, <code>String</code>, e <code>Date</code>. E di conseguenza la trascrizione di ogni eventuale nodo-figlio sarà annidata in oggetti di questo tipo.</p> - -<p>Per esempio;</p> - -<pre class="brush: xml"><employee type="usher">John Smith</employee> -<manager>Lisa Carlucci</manager> -</pre> - -<p>diventerà</p> - -<pre class="brush: js">var myObject = { - "employee": new String("John Smith"), - "manager": "Lisa Carlucci" -}; - -myObject.employee["@type"] = "usher"; - -// test - -alert(myObject.manager); // "Lisa Carlucci" -alert(myObject.employee["@type"]); // "usher" -alert(myObject.employee); // "John Smith" -</pre> - -<p>Come per il terzo algoritmo, i nodi che non contengono alcun nodo-figlio di tipo <code>Element</code>, ma solo nodi-figli di tipo <code>Text</code> e/o <code>CDATASection</code>, non saranno rappresentati da oggetti, ma direttamente da booleani, numeri, stringhe (valori primitivi) o da istanze del costruttore <code>Date</code> (si veda la <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>). Come per il terzo algoritmo, non si è usato un costruttore, ma una semplice funzione. L'argomento della funzione potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p> - -<pre class="brush: js">function buildValue (sValue) { - if (/^\s*$/.test(sValue)) { return null; } - if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; } - if (isFinite(sValue)) { return parseFloat(sValue); } - if (isFinite(Date.parse(sValue))) { return new Date(sValue); } - return sValue; -} - -function objectify (vValue) { - if (vValue === null) { - return new (function() { - this.toString = function() { return "null"; } - this.valueOf = function() { return null; } - })(); - } - return vValue instanceof Object ? vValue : new vValue.constructor(vValue); -} - -var aTmpEls = []; // loaded element nodes cache - -function getJXONData (oXMLParent) { - var sItKey, sItVal, vResult, nLength = 0, nLevelStart = aTmpEls.length, - nChildren = oXMLParent.hasChildNodes() ? oXMLParent.childNodes.length : 0, sCollectedTxt = ""; - - for (var oItChild, nChildId = 0; nChildId < nChildren; nChildId++) { - oItChild = oXMLParent.childNodes.item(nChildId); - if (oItChild.nodeType === 4) { sCollectedTxt += oItChild.nodeValue; } /* nodeType is "CDATASection" (4) */ - else if (oItChild.nodeType === 3) { sCollectedTxt += oItChild.nodeValue.replace(/^\s+|\s+$/g, ""); } /* nodeType is "Text" (3) */ - else if (oItChild.nodeType === 1 && !oItChild.prefix) { aTmpEls.push(oItChild); } /* nodeType is "Element" (1) */ - } - - var nLevelEnd = aTmpEls.length, vBuiltVal = buildValue(sCollectedTxt); - - if (oXMLParent.hasAttributes()) { - vResult = objectify(vBuiltVal); - for (nLength; nLength < oXMLParent.attributes.length; nLength++) { - oItAttr = oXMLParent.attributes.item(nLength); - vResult["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue.replace(/^\s+|\s+$/g, "")); - } - } else if (nLevelEnd > nLevelStart) { vResult = objectify(vBuiltVal); } - - for (var nElId = nLevelStart; nElId < nLevelEnd; nElId++) { - sItKey = aTmpEls[nElId].nodeName.toLowerCase(); - sItVal = getJXONData(aTmpEls[nElId]); - if (vResult.hasOwnProperty(sItKey)) { - if (vResult[sItKey].constructor !== Array) { vResult[sItKey] = [vResult[sItKey]]; } - vResult[sItKey].push(sItVal); - } else { vResult[sItKey] = sItVal; nLength++; } - } - - aTmpEls.length = nLevelStart; - - if (nLength === 0) { vResult = sCollectedTxt ? vBuiltVal : /* put here the default value for empty nodes: */ true; } - /* else { Object.freeze(vResult); } */ - - return vResult; -} - -var myObject = getJXONData(doc); -alert(myObject.catalog.product.catalog_item[1].size.color_swatch["@image"]); // "black_cardigan.jpg" -alert(myObject.catalog.product.catalog_item[1].size.color_swatch); // "Black" !</pre> - -<div class="note"><strong>Nota:</strong> Se si vuole <em>congelare</em> l'intero oggetto (a causa della natura "statica" di un documento XML), decommentare la stringa: <code>/* else { Object.freeze(vResult); } */</code> . Il metodo <code><a href="/it/Javascript/Glossario/Oggetti_globali/Object/freeze" title="/it/Javascript/Glossario/Oggetti_globali/Object/freeze">Object.freeze</a></code> vieta l'aggiunta di nuove proprietà e la rimozione delle proprietà esistenti, congelando la loro enumerabilità, la loro configurabilità o la loro scrivibilità. In sostanza l'oggetto è reso effettivamente immutabile.</div> - -<p>È un approccio possibile nel caso in cui ci sia nota la struttura del documento XML che andremo a leggere.</p> - -<h4 id="Algoritmi_inversi">Algoritmi inversi</h4> - -<p>È possibile invertire gli algoritmi qui proposti in maniera tale da ottenere un nuovo documento XML a partire da un albero di oggetti Javascript.</p> - -<p>Per semplicità proporremo qui un unico esempio, che in un unico codice rappresenta l'inversione degli algoritmi <a href="#Algoritmo_JXON_2" title="Vai all'algoritmo JXON #2">#2</a> e <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">#3</a>. È molto semplice partire da esso per creare gli inversi anche degli algoritmi <a href="#Algoritmo_JXON_1" title="Vai all'algoritmo JXON #1">#1</a> e <a href="#Algoritmo_JXON_4" title="Vai all'algoritmo JXON #4">#4</a>, qualora se ne abbia la necessità.</p> - -<pre class="brush: js">function createXML (oJXONObj) { - function loadObj (oParentObj, oParentEl) { - var nSameIdx, vValue, oChild; - for (var sName in oParentObj) { - vValue = oParentObj[sName]; - if (sName === "keyValue") { - if (vValue !== null && vValue !== true) { oParentEl.appendChild(oNewDoc.createTextNode(String(vValue))); } - } else if (sName.charAt(0) === "@") { - oParentEl.setAttribute(sName.slice(1), vValue); - } else { - oChild = oNewDoc.createElement(sName); - if (vValue.constructor === Date) { - oChild.appendChild(oNewDoc.createTextNode(vValue.toGMTString())); - } else if (vValue.constructor === Array) { - for (nSameIdx = 0; nSameIdx < vValue.length; nSameIdx++) { loadObj(vValue[nSameIdx], oChild); } - } else if (vValue instanceof Object) { - loadObj(vValue, oChild); - } else if (vValue !== null && vValue !== true) { - oChild.appendChild(oNewDoc.createTextNode(vValue.toString())); - } - oParentEl.appendChild(oChild); - } - } - } - var oNewDoc = document.implementation.createDocument("", "", null); - loadObj(oJXONObj, oNewDoc); - return oNewDoc; -} - -var newDoc = createXML(myObject); -// abbiamo ottenuto il nostro documento! provare per credere: alert((new XMLSerializer()).serializeToString(newDoc)); -</pre> - -<div class="note"><strong>Nota:</strong> Con questo codice le istanze di <code>Date</code> eventualmente presenti verranno convertite in stringhe attraverso l'invocazione del metodo <code>toGMTString()</code>. Nulla vieta l'utilizzo di qualsiasi altro metodo di conversione. Inoltre le proprietà dell'albero con valore uguale a <code>true</code> verranno convertite in elementi privi di nodi di testo (si vedano le <a href="#JXON_considerazioni" title="Considerazioni sul codice">Considerazioni sul codice</a>).</div> - -<p>Si tratta di una buona soluzione nel caso si voglia automatizzare la creazione di un documento XML. È una cattiva scelta invece nel caso in cui si voglia ricostruire un documento XML già precedentemente convertito in JSON. Sebbene la conversione sia molto fedele (eccetto che per i nodi di tipo <code>CDATASection</code>, che verranno riconvertiti in nodi di tipo <code>Text</code>), si tratta di un processo inutilmente dispendioso. Nel caso infatti in cui il nostro scopo sia quello di modificare un documento XML, si raccomanda vivamente di lavorare su di esso invece che di crearne di nuovi.</p> - -<h4 id="La_Convenzione_di_Parker">La Convenzione di Parker</h4> - -<p>Le funzioni precedentemente elencate per la conversione di un documento XML in JSON (spesso chiamate «algoritmi JXON») sono più o meno liberamente basate sulla Convenzione di Parker. È chiamata “Convenzione di Parker”, in opposizione alla “Convenzione di BadgerFish”, sulla falsa riga del fumetto di Cuadrado <em>Parker & Badger</em>. Per ulteriori approfondimenti si veda anche la <a class="external" href="http://badgerfish.ning.com/" title="BadgerFish convention">Convenzione di BadgerFish</a>.</p> - -<p>La seguente è una traduzione dall'inglese del <em>paper</em> originale della Convenzione di Parker (versione 0.4), dalla pagina “<a class="external" href="http://code.google.com/p/xml2json-xslt/wiki/TransformingRules" title="TransformingRules – xml2json-xslt">TransformingRules</a>” del sito del progetto <a class="external" href="http://code.google.com/p/xml2json-xslt/" title="xml2json-xslt project">xml2json-xslt</a>.</p> - -<p>Questa convenzione è stata scritta per regolamentare la conversione in <a href="/it/JSON" title="/it/JSON">JSON</a> da parte di <a href="/it/XSLT" title="/it/XSLT">XSLT</a>, di conseguenza alcune parti di essa sono futili per Javascript.</p> - -<h5 id="Conversione_in_JSON">Conversione in JSON</h5> - -<ol> - <li> - <p>L'elemento <code>root</code> verrà assorbito, poiché ce ne può essere soltanto uno:</p> - - <pre class="brush: xml"><root>test</root></pre> - - <p>diventerà</p> - - <pre class="brush: js">"test" -</pre> - </li> - <li> - <p>I nomi degli elementi diventeranno proprietà di oggetti:</p> - - <pre class="brush: xml"><root><name>Xml</name><encoding>ASCII</encoding></root></pre> - - <p>diventerà</p> - - <pre class="brush: js">{ - "name": "Xml", - "encoding": "ASCII" -} -</pre> - </li> - <li> - <p>I numeri saranno riconosciuti come tali (sia interi che decimali):</p> - - <pre class="brush: xml"><root><age>12</age><height>1.73</height></root> -</pre> - - <p>diventerà</p> - - <pre class="brush: js">{ - "age": 12, - "height": 1.73 -} -</pre> - </li> - <li> - <p>I booleani saranno riconosciuti come tali (<em>case insensitive</em>):</p> - - <pre class="brush: xml"><root><checked>True</checked><answer>FALSE</answer></root></pre> - - <p>diventerà</p> - - <pre class="brush: js">{ - "checked": true, - "answer": false -} -</pre> - </li> - <li> - <p>Le stringhe avranno degli <em>escape</em> quando ce ne sarà la necessità:</p> - - <pre class="brush: xml"><root>Quote: &quot; New-line: -</root> -</pre> - - <p>diventerà</p> - - <pre class="brush: js">"Quote: \" New-line:\n" -</pre> - </li> - <li> - <p>Gli elementi vuoti diventeranno proprietà con valore nullo (<code>null</code>):</p> - - <pre class="brush: xml"><root><nil/><empty></empty></root></pre> - - <p>diventerà</p> - - <pre class="brush: js">{ - "nil": null, - "empty": null -} -</pre> - </li> - <li> - <p>If all sibling elements have the same name, they become an array</p> - - <pre class="brush: xml"><root><item>1</item><item>2</item><item>three</item></root> -</pre> - - <p>becomes</p> - - <pre class="brush: js">[1, 2, "three"] -</pre> - </li> - <li> - <p>Mixed mode text-nodes, comments and attributes get absorbed:</p> - - <pre class="brush: xml"><root version="1.0">testing<!--comment--><elementtest="true">1</element></root> -</pre> - - <p>becomes</p> - - <pre class="brush: js">{ "element": true } -</pre> - </li> - <li> - <p>Namespaces get absorbed, and prefixes will just be part of the property name:</p> - - <pre class="brush: xml"><root xmlns:ding="http://zanstra.com/ding"><ding:dong>binnen</ding:dong></root> -</pre> - - <p>becomes</p> - - <pre class="brush: js">{ "ding:dong" : "binnen" } -</pre> - </li> -</ol> - -<div class="note"><strong>Note:</strong> Our algorithms comply with the points 2, 3, 4 and 7. The third and the fourth algorithm comply also with the point 6 (but <code>true</code> instead of <code>null</code> – si vedano le <a href="#JXON_considerazioni" title="Considerazioni sul codice">Considerazioni sul codice</a>). The point 5 is automatically managed by the Javascript method <code><a href="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify" title="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify">JSON.stringify</a></code>.</div> - -<h5 id="Appendice_Javascript">Appendice Javascript</h5> - -<p>All the same as the JSON translation, but with these extra's:</p> - -<ol> - <li> - <p>Property names are only escaped when necessary</p> - - <pre class="brush: xml"><root><while>true</while><wend>false</wend><only-if/></root></pre> - - <p>becomes</p> - - <pre class="brush: js">{ - "while": true, - wend: false, - "only-if": null -} -</pre> - </li> - <li> - <p>Within a string, closing elements "</" are escaped as "<\/"</p> - - <pre class="brush: xml"><root><![CDATA[<script>alert("YES");</script>]]></root></pre> - - <p>becomes</p> - - <pre class="brush: js">{ script: "<script>alert(\"YES\")<\/script>" } -</pre> - </li> - <li> - <p>Dates are created as <code>new Date()</code> objects</p> - - <pre class="brush: xml"><root>2006-12-25</root></pre> - - <p>becomes</p> - - <pre class="brush: js">new Date(2006, 12 - 1, 25) -</pre> - </li> - <li> - <p>Attributes and comments are shown as comments (for testing-purposes):</p> - - <pre class="brush: xml"><!--testing--><root><test version="1.0">123</test></root> -</pre> - - <p>becomes</p> - - <pre class="brush: js">/* testing */ { test /* @version = "1.0" */ : 123} -</pre> - </li> - <li> - <p>A bit of indentation is done, to keep things ledgible</p> - </li> -</ol> - -<div class="note"><strong>Note:</strong> Our algorithms comply with the point 3 (but without month decrease). The points 1 and 2 are automatically managed by the Javascript method <code><a href="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify" title="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify">JSON.stringify</a></code>.</div> - -<h4 id="In_sintesi">In sintesi</h4> - -<p>Prendiamo <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">il terzo algoritmo</a> come l'algoritmo di conversione JXON più rappresentativo. Un singolo nodo XML di tipo <code>Element</code> può avere in totale otto differenti configurazioni a seconda di quello che contiene. Esso può essere:</p> - -<ol> - <li>un elemento vuoto,</li> - <li>un elemento contenente al suo interno solamente un nodo di testo,</li> - <li>un elemento vuoto ma contenente attributi,</li> - <li>un elemento con attributi contenente al suo interno solamente un nodo di testo,</li> - <li>un elemento contenente ulteriori elementi-figli con nomi diversi,</li> - <li>un elemento contenente ulteriori elementi-figli con nomi uguali,</li> - <li>un elemento contenente ulteriori elementi-figli e un unico nodo di testo (testo <em>contiguo</em>),</li> - <li>un elemento contenente ulteriori elementi-figli e più nodi di testo (testo <em>non contiguo</em>).</li> -</ol> - -<p>The following table shows the corresponding conversion patterns between XML and JSON according to the <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">third algorithm</a>.</p> - -<table> - <thead> - <tr> - <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>Case</strong></th> - <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>XML</strong></th> - <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>JSON</strong></th> - <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>Javascript access</strong></th> - </tr> - </thead> - <tbody> - <tr> - <td style="background: #f6f6f6;">1</td> - <td style="background: #f6f6f6;"><code><animal/></code></td> - <td style="background: #f6f6f6;"><code>"animal": true</code></td> - <td style="background: #f6f6f6;"><code>myObject.animal</code></td> - </tr> - <tr> - <td style="background: #e7e5dc;">2</td> - <td style="background: #e7e5dc;"><code><animal>text</animal></code></td> - <td style="background: #e7e5dc;"><code>"animal": "text"</code></td> - <td style="background: #e7e5dc;"><code>myObject.animal</code></td> - </tr> - <tr> - <td style="background: #f6f6f6;">3</td> - <td style="background: #f6f6f6;"><code><animal name="value" /></code></td> - <td style="background: #f6f6f6;"><code>"animal": {"@name": "value"}</code></td> - <td style="background: #f6f6f6;"><code>myObject.animal["@name"]</code></td> - </tr> - <tr> - <td style="background: #e7e5dc;">4</td> - <td style="background: #e7e5dc;"><code><animal name="value">text</animal></code></td> - <td style="background: #e7e5dc;"><code>"animal": { "@name": "value", "keyValue": "text" }</code></td> - <td style="background: #e7e5dc;"><code>myObject.animal["@name"]</code>, <code>myObject.animal.keyValue</code></td> - </tr> - <tr> - <td style="background: #f6f6f6;">5</td> - <td style="background: #f6f6f6;"><code><animal> <dog>Charlie</dog> <cat>Deka</cat> </animal></code></td> - <td style="background: #f6f6f6;"><code>"animal": { "dog": "Charlie", "cat": "Deka" }</code></td> - <td style="background: #f6f6f6;"><code>myObject.animal.dog</code>, <code>myObject.animal.cat</code></td> - </tr> - <tr> - <td style="background: #e7e5dc;">6</td> - <td style="background: #e7e5dc;"><code><animal> <dog>Charlie</dog> <dog>Mad Max</dog> </animal></code></td> - <td style="background: #e7e5dc;"><code>"animal": { "dog": ["Charlie", "Mad Max"] }</code></td> - <td style="background: #e7e5dc;"><code>myObject.animal.dog[0]</code>, <code>myObject.animal.dog[1]</code></td> - </tr> - <tr> - <td style="background: #f6f6f6;">7</td> - <td style="background: #f6f6f6;"><code><animal> in my house <dog>Charlie</dog> </animal></code></td> - <td style="background: #f6f6f6;"><code>"animal": { "keyValue": "in my house", "dog": "Charlie" }</code></td> - <td style="background: #f6f6f6;"><code>myObject.animal.keyValue</code>, <code>myObject.animal.dog</code></td> - </tr> - <tr> - <td style="background: #e7e5dc;">8</td> - <td style="background: #e7e5dc;"><code><animal> in my ho <dog>Charlie</dog> use </animal></code></td> - <td style="background: #e7e5dc;"><code>"animal": { "keyValue": "in my house", "dog": "Charlie" }</code></td> - <td style="background: #e7e5dc;"><code>myObject.animal.keyValue</code>, <code>myObject.animal.dog</code></td> - </tr> - </tbody> -</table> - -<h4 id="Considerazioni_sul_codice">Considerazioni sul codice</h4> - -<p>In these examples we chose to use a property named <code>keyValue</code> for the text content. The lack of standars for XML to JSON conversion leads developers to choose several property names for the text content of XML <code>Element</code> nodes which contain also other child nodes. Sometimes it is used a property called <code>$</code>. Other times it is used a property called <code>#text</code>. In the algorithms proposed here you can easily change this name, depending on your needs.</p> - -<p>The choice of using a <code>true</code> value instead of a <code>null</code> value to represent empty nodes is due to the fact that when in an XML document there is an empty node the reason is often to express a <code>Boolean</code> content, as in this case:</p> - -<pre class="brush: xml"><car> - <type>Ferrari</type> - <bought /> -</car> -</pre> - -<p>If the value were <code>null</code> it would be more cumbersome to launch a code like this:</p> - -<pre class="brush: js">if (myObject.car.bought) { - // do something -} -</pre> - -<div class="note">According to our <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">terzo algoritmo</a> and our <a href="#Algoritmo_JXON_4" title="Vai all'algoritmo JXON #4">quarto algoritmo</a>, just <code>Text</code> nodes or <code>CDATASection</code> nodes which contain nothing but white spaces (precisely: <code>/^\s+$/</code>) are parsed as <code>null</code>.</div> - -<p>An important consideration is that, using the third or the fourth algorithm, an XML Document can be used to create any type of Javascript object. For example, If you want to create an object like the following:</p> - -<pre class="brush: js">{ - "bool": true, - "array": ["Cinema", "Hot dogs", false], - "object": { - "nickname": "Jack", - "registration_date": new Date(1995, 11, 25), - "privileged_user": true - }, - "num": 99, - "text": "Hello World!" -} -</pre> - -<p>you must just create an XML document with the following structure:</p> - -<pre class="brush: xml"><bool>true</bool> -<array>Cinema</array> -<array>Hot dogs</array> -<array>false</array> -<object> - <nickname>Jack</nickname> - <registration_date>Dec 25, 1995</registration_date> - <privileged_user /> -</object> -<num>99</num> -<text>Hello World!</text> -</pre> - -<p>This example also shows how the ideal JXON document is an XML document designed specifically to be converted in JSON format.</p> - -<h3 id="Costruire_file_a_partire_da_istanze_di_Document">Costruire file a partire da istanze di <code>Document</code></h3> - -<p>First, create a DOM tree as described in the <a href="/it/Come_creare_un_albero_DOM" title="it/Come_creare_un_albero_DOM">Come creare un albero DOM</a> article. If you have already have a DOM tree from using <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a>, skip to the end of this section.</p> - -<p>Now, let's serialize <code>doc</code> — the DOM tree — to a file (you can read more <a href="/en/Code_snippets/File_I//O" title="en/Code_snippets/File_I//O">about using files in Mozilla</a>):</p> - -<pre class="brush: js">var oFOStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream); -var oFile = Components.classes["@mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties).get("ProfD", Components.interfaces.nsILocalFile); // get profile folder -oFile.append("extensions"); // extensions sub-directory -oFile.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}"); // GUID of your extension -oFile.append("myXMLFile.xml"); // filename -oFOStream.init(oFile, 0x02 | 0x08 | 0x20, 0664, 0); // write, create, truncate -(new XMLSerializer()).serializeToStream(doc, oFOStream, ""); // rememeber, doc is the DOM tree -oFOStream.close(); -</pre> - -<h3 id="Costruire_file_a_partire_da_istanze_di_XMLHttpRequest">Costruire file a partire da istanze di <code>XMLHttpRequest</code></h3> - -<p>If you already have a DOM tree from using <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a>, use the same code as above but replace <code>serializer.serializeToStream(doc, oFOStream, "")</code> with <code>serializer.serializeToStream(xmlHttpRequest.responseXML.documentElement, oFOStream, "")</code> where <code>xmlHttpRequest</code> is an instance of <code>XMLHttpRequest</code>.</p> - -<p>Note that this first parses the XML retrieved from the server, then re-serializes it into a stream. Depending on your needs, you could just save the <code>xmlHttpRequest.responseText</code> directly.</p> - -<h3 id="Resources">Resources</h3> - -<ul> - <li><a class="external" href="http://xulplanet.com/tutorials/mozsdk/xmlparse.php">Parsing and Serializing XML su XUL Planet</a></li> -</ul> diff --git a/files/it/web/guide/woff/index.html b/files/it/web/guide/woff/index.html deleted file mode 100644 index c3fb596778..0000000000 --- a/files/it/web/guide/woff/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Il Formato Open di Font per il Web (WOFF) -slug: Web/Guide/WOFF -translation_of: Web/Guide/WOFF ---- -<p><span class="seoSummary"><strong>WOFF</strong> (<strong>Web Open Font Format</strong>, 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 <code>sfnt</code> 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.</span></p> - -<p>Usare WOFF comporta principalmente tre benefici:</p> - -<ol> - <li>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.</li> - <li>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.</li> - <li>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.</li> -</ol> - -<h2 id="Usare_WOFF">Usare WOFF</h2> - -<p>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.</p> - -<h2 id="Strumenti_per_lavorare_con_i_font_WOFF">Strumenti per lavorare con i font WOFF</h2> - -<p>Sono disponibili <a href="https://people.mozilla.org/~jkew/woff/">Strumenti per lavorare con i font WOFF</a>. <code>sfnt2woff</code> e <code>woff2sfnt</code> convertono da WOFF a OpenType e viceversa.</p> - -<h2 id="Specifications" name="Specifications">Specifiche</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commenti</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WOFF1.0', '', '')}}</td> - <td>{{Spec2('WOFF1.0')}}</td> - <td>Specifica iniziale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caratteristica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Supporto di base</td> - <td>6.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0</td> - <td>11.10</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caratteristica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Supporto di base</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li>{{cssxref("@font-face")}}</li> -</ul> |