initial commit

1 files changed, 89 insertions, 0 deletions

diff --git a/files/it/mozilla/add-ons/webextensions/user_interface/index.html b/files/it/mozilla/add-ons/webextensions/user_interface/index.html
new file mode 100644
index 0000000000..bfc48bdc9e
--- /dev/null
+++ b/files/it/mozilla/add-ons/webextensions/user_interface/index.html
@@ -0,0 +1,89 @@
+---
+title: Interfaccia utente
+slug: Mozilla/Add-ons/WebExtensions/user_interface
+translation_of: Mozilla/Add-ons/WebExtensions/user_interface
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Le estensioni che usa le API delle WebExtension sono fornite con diverse opzioni dell'interfaccia utente che possono aggiungere nuove funzioni all'utente. Un elenco di queste opzioni è presente di seguito, in questa sezione è presente una descrizione dettagliata di ogni opzione.</p>
+
+<div class="note">
+<p>Per consigli sull'utilizzo di questi componenti UI per permettere un migliore utilizzo, da parte dell'utente, della vostra estensione, guardate l'articolo <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User experience best practices</a>.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">UI option</th>
+   <th scope="col">Description</th>
+   <th scope="col" style="width: 350px;">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Browser_action">Toolbar button</a> (browser action)</td>
+   <td>Un pulsante nella barra degli strumenti del browser che invia un evento all'estensione quando si fa clic sul pulsante. Per impostazione predefinita, il pulsante è visibile in tutte le schede.</td>
+   <td><img alt="Example showing a toolbar button (browser action)." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td>Toolbar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td>
+   <td><span class="tlid-translation translation" lang="it"><span title="">Una finestra popup che si attiva facendo clic su un pulsante nella barra degli strumenti del browser.</span> la finestra<span title=""> popup è definita in un documento HTML che gestisce l'interazione con l'utente.</span></span></td>
+   <td><img alt="Example of the pop-up on a toolbar button" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Page_actions">Address bar button</a> (page action)</td>
+   <td><span class="tlid-translation translation" lang="it"><span title="">Un pulsante nella barra degli indirizzi del browser che invia un evento all'estensione quando si fa clic.</span> <span title="">Per impostazione predefinita, il pulsante è nascosto in tutte le schede.</span></span></td>
+   <td><img alt="Example showing an address bar button (page action) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td>Address bar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td>
+   <td><span class="tlid-translation translation" lang="it"><span title="">Una finestra popup che si attiva facendo clic su un pulsante nella barra degli indirizzi del browser.</span> La<span title=""> finestra popup è definita in un documento HTML che gestisce l'interazione con l'utente.</span></span></td>
+   <td><img alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="height: 524px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Context menu item</a></td>
+   <td>Elementi del menu, caselle di controllo e pulsanti di opzione su uno o più menu di scelta rapida del browser. Inoltre, i menu possono essere strutturati aggiungendo separatori. Quando si fa clic su una voce del menu, un evento viene inviato all'estensione.</td>
+   <td><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebar</a></td>
+   <td>
+    <p dir="ltr"><span class="tlid-translation translation" lang="it"><span title="">Un documento HTML visualizzato accanto a una pagina Web, con l'opzione per contenuti unici per pagina.</span> <span title="">La barra laterale viene aperta quando viene installata l'estensione, quindi obbedisce alla selezione della visibilità della barra laterale dell'utente.</span> <span title="">L'interazione dell'utente all'interno della barra laterale è gestita dal suo documento HTML.</span></span></p>
+   </td>
+   <td><img alt="Example of a sidebar" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Options page</a></td>
+   <td>Una pagina che consente di definire le preferenze della vostra estensione che gli utenti possono modificare. L'utente può accedere a questa pagina dal gestore dei componenti aggiuntivi del browser.</td>
+   <td><img alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15748/options_page.png"></td>
+  </tr>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Extension_pages">Extension page</a></td>
+   <td>Utilizzare le pagine Web incluse nell'estensione per fornire moduli, aiuto o qualsiasi altro contenuto richiesto, all'interno di finestre o schede.</td>
+   <td><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Notification</a></td>
+   <td>Notifiche temporanee visualizzate all'utente tramite il meccanismo delle notifiche del sistema operativo sottostante. Invia un evento all'estensione quando l'utente fa clic su una notifica o quando una notifica si chiude (automaticamente o su richiesta dell'utente).</td>
+   <td><img alt="Example of an extension triggered system notification" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Address bar suggestion</a></td>
+   <td>Offre suggerimenti personalizzati sulla barra degli indirizzi quando l'utente inserisce una parola chiave.</td>
+   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Developer tools panel</a></td>
+   <td>Una scheda con un documento HTML associato che viene visualizzato negli strumenti di sviluppo del browser.</td>
+   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Le seguenti guide pratiche forniscono indicazioni dettagliate per la creazione di alcune di queste opzioni dell'interfaccia utente:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a></li>
+</ul>