Merge pull request #43 from fiji-flo/unslugging-pt-pt

Unslugging pt pt

2 files changed, 161 insertions, 0 deletions

diff --git a/files/pt-pt/orphaned/tools/add-ons/dom_inspector/index.html b/files/pt-pt/orphaned/tools/add-ons/dom_inspector/index.html
new file mode 100644
index 0000000000..aada27f24a
--- /dev/null
+++ b/files/pt-pt/orphaned/tools/add-ons/dom_inspector/index.html
@@ -0,0 +1,68 @@
+---
+title: Inspetor de DOM
+slug: orphaned/Tools/Add-ons/DOM_Inspector
+tags:
+  - DOM:Ferramentas
+  - Desenvolvimento_Web
+  - Desenvolvimento_Web:Ferramentas
+  - Extensões:Ferramentas
+  - Ferramentas
+  - PrecisaDeRevisãoTécnica
+  - Temas
+  - Temas:Ferramentas
+  - Todas_as_Categorias
+  - XUL:Ferramentas
+translation_of: Tools/Add-ons/DOM_Inspector
+original_slug: DOM_Inspector
+---
+<div>{{ToolsSidebar}}</div><p>O <strong>Inspector DOM </strong>(também conhecido como <strong>DOMi</strong>) é uma ferramenta de programação utilizada para inspecionar, navegar, e editar <a href="/en/DOM" title="en/DOM">Document Object Model</a> of documents - usually web pages or <a href="/en/XUL" title="en/XUL">XUL</a> windows. The DOM hierarchy can be navigated using a two-paned window that allows a variety of different views on the document and all nodes within.</p>
+
+<div class="note">
+<p>This tool is an add-on for XUL-based applications such as Firefox and Thunderbird. If you are looking for the DOM inspector that's built into Firefox, see the documentation for the <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a>. </p>
+</div>
+
+<h2 id="Documentation" name="Documentation">Documentação</h2>
+
+<dl>
+ <dt><a href="/pt-PT/docs/DOM_Inspector/Introduction_to_DOM_Inspector" title="en/DOM_Inspector/Introduction_to_DOM_Inspector">Introduction to DOM Inspector</a></dt>
+ <dd>A guided tutorial that will help you get started with DOM Inspector.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en/DOM_Inspector/DOM_Inspector_FAQ" title="en/DOM_Inspector/DOM_Inspector_FAQ">Perguntas Mais Frequentes do Inspetor de DOM</a></dt>
+ <dd>Answers to common questions on DOM Inspector.</dd>
+</dl>
+
+<dl>
+ <dt><a class="external" href="http://kb.mozillazine.org/DOM_Inspector">Página do Inspetor de Inspector em MozillaZine</a> (EN)</dt>
+ <dd>Mais informação sobre o Inspetor de DOM.</dd>
+ <dt><a href="http://asurkov.blogspot.com/2013/02/build-dom-inspector.html">Como criar o Inspetor de DOM</a><a href="http://asurkov.blogspot.com/2013/02/build-dom-inspector.html"> </a>(EN)</dt>
+ <dd>Blog post on building the DOM Inspector from source.</dd>
+</dl>
+
+<h2 id="Getting_DOM_Inspector" name="Getting_DOM_Inspector">Obter o Inspetor de DOM</h2>
+
+<dl>
+ <dt>Firefox &amp; Thunderbird</dt>
+ <dd>You may download and install the <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a> from the AMO web site. (Thunderbird users browsing AMO in Firefox should save the installation link, or visit the <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/6622" title="https://addons.mozilla.org/en-US/thunderbird/addon/6622">DOM Inspector for Thunderbird</a> page.)</dd>
+</dl>
+
+<dl>
+ <dt>Thunderbird 2</dt>
+ <dd><a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/1806">DOM Inspector for Thunderbird 2</a> is available from <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/">Thunderbird Add-ons</a>. Or, build Thunderbird yourself with the following options:</dd>
+</dl>
+
+<pre>ac_add_options --enable-extensions="default inspector"
+ac_add_options --enable-inspector-apis
+</pre>
+
+<dl>
+ <dt>Mozilla Suite and SeaMonkey</dt>
+ <dd>Select Tools &gt; Web Development &gt; DOM Inspector. You can install the Sidebar panel via Edit &gt; Preferences &gt; Advanced &gt; DOM Inspector, then simply open up the inspector panel and visit a website.</dd>
+</dl>
+
+<h2 id="Report_a_bug_in_DOM_Inspector" name="Report_a_bug_in_DOM_Inspector">Comunicar um erro no Inspetor de DOM</h2>
+
+<p>Use the conveniently named <a href="https://bugzilla.mozilla.org/enter_bug.cgi?format=__default__&amp;product=Other%20Applications&amp;component=DOM%20Inspector">"DOM Inspector" component in Bugzilla</a>.</p>
+
+<p>To find out who knows <a href="https://hg.mozilla.org/dom-inspector" title="https://hg.mozilla.org/dom-inspector">DOM Inspector code</a> and where it lives, see the <a class="link-https" href="https://wiki.mozilla.org/Modules/All#DOM_Inspector" title="https://wiki.mozilla.org/Modules/All#DOM_Inspector"><span class="external">DOM Inspector module listing</span></a>.</p>
diff --git a/files/pt-pt/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html b/files/pt-pt/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html
new file mode 100644
index 0000000000..f4104880ec
--- /dev/null
+++ b/files/pt-pt/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html
@@ -0,0 +1,93 @@
+---
+title: Introdução ao Inspetor de DOM
+slug: orphaned/Tools/Add-ons/DOM_Inspector/Introduction_to_DOM_Inspector
+translation_of: Tools/Add-ons/DOM_Inspector/Introduction_to_DOM_Inspector
+original_slug: DOM_Inspector/Introduction_to_DOM_Inspector
+---
+<div>{{ToolsSidebar}}</div><p>O 'Inspetor de DOM' é uma extensão da Mozilla que pode aceder no menu <strong>Ferramentas &gt; Desenvolvimento da Web no </strong>SeaMonkey, ou selecionar o item de menu do 'Inspetor de DOM' no menu das 'Ferramentas' no Firefox e Thunderbird, ou utilizar Ctrl/Cmd+Shift+I numa das aplicações. DOM Inspector is standalone; it supports all toolkit applications, and it's possible to embed it in your own XULRunner app. DOM Inspector can serve as a sanity check to verify the state of the <a href="/en/DOM" title="en/DOM">DOM</a>, or it can be used to manipulate the DOM by hand, if desired.</p>
+
+<div class="note"><strong>Note:</strong> Starting with Firefox 3, the DOM Inspector is not included in Firefox by default; instead, you must <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">download and install it</a> from the Mozilla add-ons web site.</div>
+
+<p>When you first start the DOM Inspector, you are presented with a two-pane application window that looks a little like the main Mozilla browser. Like the browser, the DOM Inspector includes an address bar, and some of the same menus. In SeaMonkey additional global menus will be available.</p>
+
+<p><img alt="domi.png" class="default internal" src="/@api/deki/files/4684/=domi.png"></p>
+
+<h2 id="Inspecionar_um_Documento">Inspecionar um Documento</h2>
+
+<p>When the DOM Inspector opens, it may or may not load an associated document, depending on the host application. If the DOM Inspector doesn't automatically load a document or loads a document other than the one you'd like to inspect, you can select the desired document a few different ways.</p>
+
+<h3 id="File_.3E_Inspect_a_Window_.3E" name="File_.3E_Inspect_a_Window_.3E">Inspecionar Documentos de Conteúdo</h3>
+
+<p>The Inspect Content Document menupopup can be accessed from the File menu, and it will list currently loaded content documents. In Firefox and SeaMonkey browser, these will be the webpages you have opened in tabs. For Thunderbird and SeaMonkey Mail and News, any messages you're viewing will be listed here.<img alt="domi-inspect-content-popup.png" class="default internal" src="/@api/deki/files/4690/=domi-inspect-content-popup.png"></p>
+
+<h3 id="File_.3E_Inspect_a_Window_.3E" name="File_.3E_Inspect_a_Window_.3E">Inspecionar Documentos do Chrome</h3>
+
+<p>The Inspect Chrome Document menupopup can be accessed from the File menu , and it will contain the list of currently loaded chrome windows and subdocuments. A browser window and the DOM Inspector are likely be already open and displayed in this list. The DOM Inspector keeps track of all the windows that are open, so to inspect the DOM of a particular window in the DOM Inspector, simply access that window as you would normally and then choose its title from this dynamically updated menulist.</p>
+
+<p><img alt="domi-inspect-chrome-popup.png" class="default internal" src="/@api/deki/files/4689/=domi-inspect-chrome-popup.png"></p>
+
+<h3 id="File_.3E_Inspect_a_URL..." name="File_.3E_Inspect_a_URL...">Inspecionar URLs arbitrários</h3>
+
+<p>You may also inspect the DOM of arbitrary URLs by using the Inspect a URL menuitem in the File menu, or by just entering a URL into the DOM Inspector's address bar and clicking Inspect or pressing enter. For example, you can enter <a class="external" href="http://www.mozilla.org" rel="freelink">http://www.mozilla.org</a> in the address bar and see the DOM structure of the mozilla.org home page.</p>
+
+<p>You <strong>should not</strong> use this approach to inspect chrome documents. Instead, ensure that the document loads via normal means and use the Inspect Chrome Document menupopup to select it for inspection.</p>
+
+<p><img alt="domi-inspect-chrome-popup.png" class="default internal" src="/@api/deki/files/4693/=domi-inspecting-mozilla.org.png"></p>
+
+<p>When you inspect a web page with this method, a browser pane at the bottom of the DOM Inspector window will open up, displaying the web page. This allows you to use the DOM Inspector without having to use a separate browser window, or without embedding a browser in your application at all. If you find that the browser pane takes up too much space, you may close it, but you will not be able to observe any of the visual consequences of your actions.</p>
+
+<h2 id="Using_the_DOM_Inspector" name="Using_the_DOM_Inspector">Utilizar o Inspetor de DOM</h2>
+
+<p>Once you've opened the document for the page or chrome you are interested in, you'll see that it loads the DOM Nodes viewer in the document pane and the DOM Node viewer in the object pane. In the DOM Nodes viewer, there should be a structured, hierarchical view of the DOM. By clicking around in the document pane, you'll see that the viewers are linked; whenever you select a new node from the DOM Nodes viewer, the DOM Node viewer is automatically updated to reflect the information for that node. Linked viewers are the first major aspect to understand when learning how to use the DOM Inspector.</p>
+
+<h3 id="DOM_Inspector_Information_Types" name="DOM_Inspector_Information_Types">Visualizadores do Inspetor de DOM</h3>
+
+<p>Note that these viewers are just two viewers that the DOM Inspector provides. It's possible to use other viewers, but for now we'll stick to describing the DOM Nodes viewer and the DOM Node viewer.</p>
+
+<p>You can use the DOM Nodes viewer in the document pane of the DOM Inspector to find and inspect nodes  you are interested in. One of the biggest and most immediate advantages that this brings to your web and application development is that it makes it possible to <em>find</em> the markup and the nodes in which the interesting parts of a page or a piece of the user interface are defined. One common use of the DOM Inspector is to find the name and location of particular icon being used in the user interface, which is not an easy task otherwise. If you're inspecting a chrome document, as you select nodes in the DOM Nodes viewer, the rendered versions of those nodes are highlighted in the user interface itself. (Note that there are bugs which prevent the flasher from DOM Inspector APIs from working correctly on certain platforms.)</p>
+
+<p>If you inspect the main browser window, for example, and select nodes in the DOM Nodes viewer (other than the elements which have no visible UI as is the case with the endless list of <code>script</code> elements that are loaded into <code>browser.xul</code>), you will see the various parts of the browser interface being highlighted with a blinking red border. You can traverse the structure and go from the topmost parts parts of the DOM tree to lower level nodes, such as the "search-go-button" icon that lets users perform a query using the selected search engine.</p>
+
+<p><img alt="domi-edit-search-onclick.png" class="default internal" src="/@api/deki/files/4686/=domi-edit-search-onclick.png"></p>
+
+<p>Now, once you have selected a node like the "search-go-button" node, you can select any one of several viewers to display information about that node in the object pane of the DOM Inspector application window, all of which are available from the menupopup accessed from the upper left corner of the the object pane.</p>
+
+<p><img alt="domi-object-viewers.png" class="default internal" src="/@api/deki/files/4692/=domi-object-viewers.png"></p>
+
+<p>In order to find out what the actual name of the file is being used to provide the search go icon, you can select the CSS Rules viewer from this menu and see the various selectors and rules that have been applied. The rule that applies the search icon to the element uses a class simple selector and uses a <code>list-style-image</code> property to point to a file in the current theme.</p>
+
+<p>The list of viewers available from the viewer menu gives you some idea about how extensive the DOM Inspector's inspecting capabilities are. The following descriptions provide an overview of what these viewers are about:</p>
+
+<p>The DOM Nodes viewer shows attributes of nodes that can take them, or the text content of text nodes, comments, and processing instructions. The attributes and text contents may also be edited.</p>
+
+<p>The Box Model viewer gives various metrics about XUL and HTML elements, including placement and size.</p>
+
+<p>The XBL Bindings viewer lists the XBL bindings attached to elements. If a binding extends another binding, the binding menulist will list them in descending order to to "root" binding.</p>
+
+<p>The CSS Rules viewer shows the CSS rules that are applied to the node. Alternatively, when used in conjunction with the Style Sheets viewer, the CSS Rules viewer lists all recognized rules from that style sheet in order. Properties may be also be edited. Rules applying to pseudo-elements do not appear.</p>
+
+<p>The JavaScript Object viewer gives a hierarchical tree of the object pane's subject. The JavaScript Object viewer also allows JavaScript to be evaluated by selecting the appropriate menuitem in the context menu.</p>
+
+<h3 id="Ações_básicas_do_visualizador_de_Nodos_de_DOM">Ações básicas do visualizador de Nodos de DOM</h3>
+
+<h4 id="Selecionar_elementos_com_clique">Selecionar elementos, com clique</h4>
+
+<p>Another powerful interactive feature of the DOM Inspector is that when you have the DOM Inspector open and have enabled this functionality by choosing <strong style="font-weight: bold;">Edit</strong><strong> &gt; Select Element by Click</strong> or by clicking the little magnifying glass icon in the upper left portion of the DOM Inspector application, you can click anywhere in a loaded web page or the the inspect chrome document, and the element you click will be shown in the document pane in the DOM Nodes viewer and information displayed in the object pane.</p>
+
+<h4 id="procurar_por_Nodos_no_DOM">procurar por Nodos no DOM</h4>
+
+<p>Another way to inspect the DOM is to search for particular elements you're interested in by ID, class, or attribute. When you select <strong>Edit &gt; Find Nodes...</strong> or press <code>Ctrl + F</code>, the DOM Inspector displays a find dialog that lets you find elements in various ways, and that gives you incremental searching by way of the <code>&lt;F3&gt;</code> shortcut key.</p>
+
+<p><img alt="domi-find-appcontent.png" class="default internal" src="/@api/deki/files/4687/=domi-find-appcontent.png"></p>
+
+<h4 id="Atualizar_o_DOM_Dinamicamente">Atualizar o DOM Dinamicamente</h4>
+
+<p>Another feature to mention in this introduction is the ability is the ability the DOM Inspector gives you to dynamically update information reflected in the DOM about web pages, user interface, and other elements. Note that when the DOM Inspector displays information about a particular node or subtree, it presents individual nodes and their values (in the DOM, attributes are subnodes of elements, typically) in an active list. You can perform actions on the individual items in this list from the context menu and the Edit menu, both of which contain menutimes that allow you <em>edit</em> the values of those attributes.</p>
+
+<p><img alt="domi-edit-search-onclick.png" class="default internal" src="/@api/deki/files/4686/=domi-edit-search-onclick.png"></p>
+
+<p>This interactivity allows you to shrink and grow element size, change icons, and do other layout-tweaking updates—all without actually changing the DOM as it is defined in the file on disk.</p>
+
+<p>Gostar do Inspetor</p>
+
+<p>O 'Inspetor de DOM' can take some figuring out, but once you get used to it, you may find that these structured views of web pages and interfaces were exactly the aspects of your own application development that were missing. The DOM Inspector not only presents all this information about pages in a clear and structured way, it gives you way to find and update those structures, and it's simple to access via shortcuts and menus already available in the Mozilla browser. Used in concert with Mozilla tools like <a class="external" href="http://www.mozilla.org/projects/venkman">Venkman</a>, the JavaScript debugger, the DOM Inspector can give you a <em>complete</em> view of any web page or DOM-based application interface.</p>