1 files changed, 98 insertions, 0 deletions
diff --git a/files/es/tools/page_inspector/ui_tour/index.html b/files/es/tools/page_inspector/ui_tour/index.html
new file mode 100644
index 0000000000..a72918603a
--- /dev/null
+++ b/files/es/tools/page_inspector/ui_tour/index.html
@@ -0,0 +1,98 @@
+---
+title: Tour por la UI
+slug: Tools/Page_Inspector/UI_Tour
+tags:
+  - Guía
+  - Herramientas
+  - Inspector
+translation_of: Tools/Page_Inspector/UI_Tour
+---
+<p>Este artículo es un breve recorrido por las principales secciones de la interfaz de usuario del Inspector de páginas.</p>
+
+<p>Recorre los tres componentes de máximo nivel de la interfaz de usuario del Inspector:</p>
+
+<ul>
+ <li>el botón "Seleccionar elemento</li>
+ <li>el panel HTML</li>
+ <li>el panel CSS</li>
+</ul>
+
+<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15507/57-inspector-UI.png" style="display: block; height: 649px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>Esta guía pretende mantenerse tan breve como sea posible, y lo hace enlazando a otras guías más específicas para profundizar en el trabajo con el Inspector.</p>
+
+<h2 id="Botón_seleccionar_elemento">Botón seleccionar elemento</h2>
+
+<p>El Inspector ofrece información detallada sobre el elemento actualmente seleccionado. El botón Seleccionar Elemento es una de las maneras para seleccionar el elemento que queremos inspeccionar:</p>
+
+<p><img alt="This is the button in Firefox 57 Inspector you can use to select elements on a web page." src="https://mdn.mozillademos.org/files/15513/57-select-element.png" style="display: block; height: 147px; margin-left: auto; margin-right: auto; width: 500px;"></p>
+
+<p>Este botón forma parte de la <a href="/es/docs/Tools/Tools_Toolbox#Toolbar">barra de herramientas principal</a>, por tanto es accesible desde cualquier herramienta, no sólo desde el Inspector.</p>
+
+<p>Para aprender a seleccionar un elemento ver la guía <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">seleccionar un elemento</a>.</p>
+
+<h2 id="Panel_HTML">Panel HTML</h2>
+
+<p>El Inspector está dividido en dos mitades. La mitad izquierda está ocupada por el panel HTML:</p>
+
+<p><img alt="These are the tasty new HTML and CSS panes in Firefox 57." src="https://mdn.mozillademos.org/files/15515/57-html-css-pane.png" style="display: block; height: 254px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>Para aprender más sobre la estructura del panel HTML, ver a la guía <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">examinar y editar HTML</a>.</p>
+
+<h2 id="Panel_CSS">Panel CSS</h2>
+
+<p>La mitad derecha del Inspector la ocupa el panel CSS:</p>
+
+<p><img alt="The rules view within the Inspector." src="https://mdn.mozillademos.org/files/15511/57-rules-view.png" style="display: block; height: 579px; margin-left: auto; margin-right: auto; width: 600px;">The CSS pane is divided into 4 views:</p>
+
+<p>El panel CSS está dividido en 5 vistas:</p>
+
+<ul>
+ <li>Vista reglas</li>
+ <li>Vista Calculado</li>
+ <li>Vista Disposición</li>
+ <li>Vista animaciones</li>
+ <li>Vista tipografía</li>
+</ul>
+
+<p>Para cambiar de vista utiliza las pestañas que hay en la parte superior de la página</p>
+
+<h3 id="Vista_reglas">Vista reglas</h3>
+
+<p>La vista Reglas muestra la lista de todas las reglas que se aplican al elemento seleccionado ordenadas desde la más específica a la menos específica</p>
+
+<p>Ver <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examinar y editar CSS</a> para más detalles.</p>
+
+<h3 id="Vista_calculado">Vista calculado</h3>
+
+<p>La vista Calculada muestra el cálculo completo de CSS para el elemento seleccionado, y una representación visual editable del modelo de caja para el elemento:</p>
+
+<p><img alt="The Computed view within the Inspector." src="https://mdn.mozillademos.org/files/15509/57-computed-view.png" style="display: block; height: 491px; margin-left: auto; margin-right: auto; width: 500px;"></p>
+
+<p>Para aprender más sobre la vista modelo de cajas ver <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examinar y editar el modelo de caja</a>. Ten en cuenta que antes de Firefox 50, la vista modelo de caja no estaba en la pestaña "Vista calculada", sino que tenía su propia pestaña.</p>
+
+<p>Para aprender más sobre las declaraciones CSS listadas en esta vista ver <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Examinar CSS calculado</a>.</p>
+
+<h3 id="Vista_tipografía">Vista tipografía</h3>
+
+<div class="warning">
+<p>En Firefox 47 <strong>únicamente</strong>, la vista Tipografía está desactivada por defecto. Si quieres verla en Firefox 47, visita <code>about:config</code>, busca la opción <code>devtools.fontinspector.enabled</code>, y seleccionala como <code>true</code>.</p>
+
+<p>Antes y después de Firefox 47, la vista Tipografía está habilitada por defecto.</p>
+</div>
+
+<p>La vista Tipografía muestra todas las fuentes de la página con muestras editables.</p>
+
+<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15517/57-fonts-panel.png" style="display: block; height: 344px; margin-left: auto; margin-right: auto; width: 500px;"></p>
+
+<p>Ver <a href="/es/docs/Tools/Page_Inspector/How_to/View_fonts">Vista tipografía</a> para más detalles.</p>
+
+<h3 id="Vista_animaciones">Vista animaciones</h3>
+
+<p>La Vista Animaciones ofrece los detalles de cualquier animación aplicada al elemento seleccionado, y un controlador para pausarlas</p>
+
+<p> </p>
+
+<p><img alt="This is the Animations pane in the Firefox 57 Inspector. " src="https://mdn.mozillademos.org/files/15519/animation-view.png" style="display: block; height: 343px; margin-left: auto; margin-right: auto; width: 500px;"></p>
+
+<p>Ver <a href="/es/docs/Tools/Page_Inspector/How_to/Work_with_animations">Trabajar con animaciones</a> para más detalles.</p>