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

Unslugging pt pt

1 files changed, 102 insertions, 0 deletions

diff --git a/files/pt-pt/tools/page_inspector/ui_tour/index.html b/files/pt-pt/tools/page_inspector/ui_tour/index.html
new file mode 100644
index 0000000000..e5d892f945
--- /dev/null
+++ b/files/pt-pt/tools/page_inspector/ui_tour/index.html
@@ -0,0 +1,102 @@
+---
+title: Guia de IU
+slug: Tools/Page_Inspector/UI_Tour
+tags:
+  - Ferramentas
+  - Guia(2)
+  - Inspetor
+translation_of: Tools/Page_Inspector/UI_Tour
+original_slug: Tools/Page_Inspector/Guia_de_IU
+---
+<div>{{ToolsSidebar}}</div><p>Este artigo é um guia rápido das secções principais da interface do utilizador de Inspetor de Página.</p>
+
+<p>Esta abrange três componentes de topo da IU do Inspetor:</p>
+
+<ul>
+ <li>o botão de "Selecionar elemento"</li>
+ <li>o painel de HTML</li>
+ <li>o painel de CSS</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13114/inspector-overview.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;">This guide is intentionally kept as short as possible. It links to various how to guides for the details of how to work with the Inspector.</p>
+
+<h2 id="Botão_de_selecionar_elemento">Botão de selecionar elemento</h2>
+
+<p>The Inspector gives you detailed information about the currently selected element. The Select element button is one way you can select an element for inspection:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13122/select-element.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;"></p>
+
+<p>Note that it's actually part of the <a href="/en-US/docs/Tools/Tools_Toolbox#Toolbar">main toolbox toolbar</a>, so it's immediately accessible from any tool, not just the Inspector.</p>
+
+<p>To learn how to select an element, see the guide to <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">selecting an element</a>.</p>
+
+<h2 id="Painel_de_HTML">Painel de HTML</h2>
+
+<p>The Inspector is split into two halves. The left-hand half is occupied by the HTML pane:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13116/markup-in-context.png" style="display: block; height: 1754px; margin-left: auto; margin-right: auto; width: 932px;"></p>
+
+<p>To learn more about the structure of the HTML pane, see the guide to <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">examining and editing HTML</a>.</p>
+
+<h2 id="Painel_de_CSS">Painel de CSS</h2>
+
+<p>The right-hand side of the Inspector is occupied by the CSS pane:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13118/rules-in-context.png" style="display: block; height: 1778px; margin-left: auto; margin-right: auto; width: 932px;">The CSS pane is divided into 4 views:</p>
+
+<ul>
+ <li>Rules view</li>
+ <li>Computed view</li>
+ <li>Fonts view</li>
+ <li>Animations view</li>
+</ul>
+
+<p>Use the tabs along the top to switch between the different views.</p>
+
+<h3 id="Visualizar_Regras">Visualizar Regras</h3>
+
+<p>The Rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13120/rules-view.png" style="display: block; height: 866px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>See <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a> for more details.</p>
+
+<h3 id="Visualização_computada">Visualização computada</h3>
+
+<p>The Computed view shows you the complete computed CSS for the selected element, and an editable visual representation of the box model for the element:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13855/computed-shadowed-squashed.png" style="display: block; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>To learn more about the box model view, see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a>. Note that before Firefox 50, the box model view did not appear in the "Computed view" tab, but had its own tab.</p>
+
+<p>To learn more about the CSS declarations listed in this view, see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Examine computed CSS</a>.</p>
+
+<h3 id="Visualizar_tipo_de_letra">Visualizar tipo de letra</h3>
+
+<div class="warning">
+<p><strong>Apenas </strong>na versão 47 do Firefox , a visualzaição dos Tipos de Letra está desativada por predefinição. Se pretender ver a visualização dos tipos de Letra na versão 47 do Firefox, visite <code>about:config</code>, encontre a preferência <code>devtools.fontinspector.enabled</code>, e defina-a para "<code>true"</code>.</p>
+
+<p>Antes e depois da versão 47 do Firefox, a visualização dos Tipos de letra está ativada por predefinição.</p>
+</div>
+
+<p>The Fonts view shows all the fonts in the page along with editable samples.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10015/css-fonts.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>Consultar <a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Visualizar_tipos_de_letra">Visualizar tipos de letra</a> para mais detalhes.</p>
+
+<h3 id="Visualizar_animações">Visualizar animações</h3>
+
+<p>The Animations view gives you details of any animations applied to the selected element, and a controller to pause them:</p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13126/animations-view.png" style="display: block; height: 854px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>Consulte <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a> para mais detalhes.</p>
+
+<h3 id="Mostrarocultar_painel_CSS">Mostrar/ocultar painel CSS</h3>
+
+<p>From Firefox 40 onwards, there's a button in the toolbar that you can use to show or hide the CSS pane:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13124/show-hide-css.png" style="display: block; height: 419px; margin-left: auto; margin-right: auto; width: 630px;"></p>