update based on https://github.com/mdn/yari/issues/2028

4 files changed, 0 insertions, 625 deletions

diff --git a/files/es/archive/b2g_os/ux/building_blocks/action_menu/coding/index.html b/files/es/archive/b2g_os/ux/building_blocks/action_menu/coding/index.html
deleted file mode 100644
index a914e72083..0000000000
--- a/files/es/archive/b2g_os/ux/building_blocks/action_menu/coding/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: 'Coding guide: Action menus'
-slug: Archive/B2G_OS/UX/Building_blocks/Action_menu/Coding
-translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Action_menu/Coding
----
-<p>Here you can find examples of how to create <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu">action menus</a> on Firefox OS, as well as downloads for the CSS and image resources used by the built-in apps on Firefox OS. You can copy these resources into your app and make use of them to build apps that match these apps' appearances.</p>
-
-<div class="note">
-<p><strong>Note:</strong> Object menus are implemented using the same code; the only difference is that you never use a title in an <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Object_menu" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Object_menu">object menu</a>.</p>
-</div>
-
-<h2 id="Implementing_action_menus">Implementing action menus</h2>
-
-<p>To implement an action menu using the style shown here, place the CSS and media files into your app and then import the CSS using the {{cssxref("@import")}} at-rule:</p>
-
-<pre class="brush: css">@import url(resources/action_menu.css);</pre>
-
-<p>Make sure the media files are in the location expected by the CSS (either by placing them in a corresponding location or by revising the CSS).</p>
-
-<h2 id="Examples">Examples</h2>
-
-<h3 id="With_title" name="With_title">With title</h3>
-
-<h4 id="HTML_to_create_the_menu">HTML to create the menu</h4>
-
-<p>The HTML below creates the dialog with four buttons, one of which is disabled.</p>
-
-<pre class="brush: html">&lt;form role="dialog" data-type="action" onsubmit="return false;" id="sample-menu"&gt;
-  &lt;header id="sample-title"&gt; Title &lt;/header&gt; &lt;!-- this header is optional --&gt;
-  &lt;menu&gt;
-    &lt;button id="button1"&gt; Action 1 &lt;/button&gt;
-    &lt;button id="button2" disabled&gt; Action 2 (disabled) &lt;/button&gt;
-    &lt;button id="button3"&gt; Action 3 &lt;/button&gt;
-    &lt;button id="cancel"&gt; Cancel &lt;/button&gt;
-  &lt;/menu&gt;
-&lt;/form&gt;
-</pre>
-
-<h4 id="JavaScript_content">JavaScript content</h4>
-
-<p>The JavaScript below simply adds code to some of the buttons to change the title of the dialog when clicked.</p>
-
-<pre class="brush: js">var btn = document.querySelector("#button1");
-btn.addEventListener("click", function() {
-  var title = document.getElementById("sample-title");
-  title.innerHTML="Button 1";
-});
-
-var btn = document.querySelector("#button3");
-btn.addEventListener("click", function() {
-  var title = document.getElementById("sample-title");
-  title.innerHTML="Button 3";
-});
-</pre>
-
-<h4 id="Working_demo">Working demo</h4>
-
-<p>You can try out the action menu in this live demonstration.</p>
-
-<h3 id="Without_title" name="Without_title">Without title</h3>
-
-<h4 id="HTML_to_create_the_menu_2">HTML to create the menu</h4>
-
-<p>The HTML below creates the dialog with four buttons, one of which is disabled.</p>
-
-<pre class="brush: html">&lt;form role="dialog" data-type="action" onsubmit="return false;" id="sample-menu"&gt;
-  &lt;menu&gt;
-    &lt;button id="button1"&gt; Action 1 &lt;/button&gt;
-    &lt;button id="button2" disabled&gt; Action 2 (disabled) &lt;/button&gt;
-    &lt;button id="button3"&gt; Action 3 &lt;/button&gt;
-    &lt;button id="cancel"&gt; Cancel &lt;/button&gt;
-  &lt;/menu&gt;
-&lt;/form&gt;
-</pre>
-
-<h4 id="Working_demo_2">Working demo</h4>
-
-<p>You can try out the action menu in this live demonstration.</p>
-
-<p> </p>
diff --git a/files/es/archive/b2g_os/ux/building_blocks/action_menu/index.html b/files/es/archive/b2g_os/ux/building_blocks/action_menu/index.html
deleted file mode 100644
index e4263d2d1a..0000000000
--- a/files/es/archive/b2g_os/ux/building_blocks/action_menu/index.html
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Menú de acciones
-slug: Archive/B2G_OS/UX/Building_blocks/Action_menu
-translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Action_menu
----
-<p>Un menú de acciones, como indica su nombre, muestra un listado de acciones, relativas al contenido de la aplicación, a traves del cual el usuario puede elegir qué hacer. Visita la <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Guía de código</a> para saber cómo implementar un menú de acciones en tu aplicación.</p>
-<h2 id="Caracteristicas">Caracteristicas</h2>
-<ul>
-  <li>Abiertos desde botones dentro del contenido de la aplicacion, estos botones aparecen a menudo dentro de barras de herramientas (por ejemplo, el boton de "Compartir" de las aplicaciones de navegador).</li>
-  <li>Los menus de acciones contienen uno o mas elementos.</li>
-  <li>Estos menus se expanden en altura para acomodarese a sus elementos ,hasta el máximo de la altura de la pantalla. Una vez que se alcanza el máximo, el contenido se muestra con scroll vertical. Generalmente, una buena práctica es intentar no incluro más de cinco elementos mas el titulo del menú.</li>
-  <li>La cadena del tíutulo es opcional.</li>
-  <li>El menu se cierra por una de dos:
-    <ul>
-      <li>Seleccionar una de las acciones.</li>
-      <li>Pulsar el boton de "Cancelar".</li>
-    </ul>
-  </li>
-</ul>
-<h2 id="Visuales">Visuales</h2>
-<table class="fxosScreenGrid">
-  <tbody>
-    <tr>
-      <td>
-        <h3 id="Estado_de_reposo">Estado de reposo</h3>
-        <p><img alt="" src="https://mdn.mozillademos.org/files/4641/action-menu-idle.png" style="width: 320px; height: 480px;"></p>
-        <p>El boton de acciones abierto, esperando a que el usuario presione una seleccion.</p>
-      </td>
-      <td>
-        <h3 id="Estado_pulsado">Estado pulsado</h3>
-        <p><img alt="" src="https://mdn.mozillademos.org/files/4635/action-menu.png" style="width: 320px; height: 480px;"></p>
-        <p>Aspecto del menu mientras el dedo del usuario presiona la "Opcion 03".</p>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<h2 id="Variaciones">Variaciones</h2>
-<p>Existen dos variaciones basicas en el menu de acciones: que el menu tenga o no una cadena de titulo en la parte superior.</p>
-<p><img alt="" src="https://mdn.mozillademos.org/files/5381/action-menu-variaciones.jpg" style="width: 1023px; height: 532px;"></p>
-<h2 id="Interaccion">Interaccion</h2>
-<p>El diagrama muestra como trabaja el flujo de interaccion del ususario con el menu de acciones.</p>
-<p><img alt="" src="https://mdn.mozillademos.org/files/4649/action-menu-flow-1.png" style="width: 731px; height: 1169px;"></p>
-<h2 id="Ver_tambien">Ver tambien</h2>
-<ul>
-  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Guia de codigo de menus de acciones</a></li>
-</ul>
diff --git a/files/es/archive/b2g_os/ux/building_blocks/button/index.html b/files/es/archive/b2g_os/ux/building_blocks/button/index.html
deleted file mode 100644
index a2e0612620..0000000000
--- a/files/es/archive/b2g_os/ux/building_blocks/button/index.html
+++ /dev/null
@@ -1,231 +0,0 @@
----
-title: Botón
-slug: Archive/B2G_OS/UX/Building_blocks/Button
-translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Button
----
-<p>Realiza una acción cuando es pulsado por el usuario. Son objetos de interfaz de usuario que tienen una amplia variedad de estilos. Consulta la <a href="/es/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Guía de codificación</a> para informarte sobre cómo implementar botones con un aspecto como los que aquí se describen.</p>
-<h2 id="Características">Características</h2>
-<ul>
-  <li>Los botones tienen dos componentes: un objetivo visual y un objetivo de contacto. El objetivo de contacto es siempre más grande, con el fin de reducir los errores de contacto haciendo el botón más fácil de presionar.</li>
-  <li>Los botones tienen dos estado: normal y presionado.</li>
-  <li>Los botones también pueden ser <strong>deshabilitados</strong>, lo que significa que no pueden ser activados por el usuario, y se muestran atenuados para indicar que han sido deshabilitados.</li>
-</ul>
-<p>Hay multiples tipo de botones:</p>
-<dl>
-  <dt>
-    Botones de acción</dt>
-  <dd>
-    Se utilizan cuando solo hay unas pocas acciones y no es necesaria una lista. La acción principal del botón utiliza un color especial resatado para indicar que es la opción principal.</dd>
-  <dt>
-    Botones de lista</dt>
-  <dd>
-    Se utilizan para mostrar una lista de acciones,  o para activar la presentación de un valor de selección.</dd>
-  <dt>
-    Botones de campo de entrada</dt>
-  <dd>
-    Se utilizan para llevar a cabo acciones con campos de entrada.</dd>
-  <dt>
-    Botones especiales/pesonalizados</dt>
-  <dd>
-    Se utilizan para proporcionar acciones específicas incluyendo grabar, llamar y similares.</dd>
-</dl>
-<h2 id="Visualización">Visualización</h2>
-<p>Aquí hay varios ejemplos visuales de cómo deberían verse los botones. No olvides que puedes usar la hoja de estilos y los recursos de imágenes proporcionados en la<a href="/es/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding"> Guía de codificación</a> para implementarlos.</p>
-<h3 id="Botones_de_acción">Botones de acción</h3>
-<p>Se utilizan cuando solo hay unas pocas acciones y no es necesaria una lista. La acción principal del botón utiliza un color especial resatado para indicar que es la opción principal.</p>
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="row"> </th>
-      <th scope="col">Acción principal</th>
-      <th scope="col">Acción secundaria</th>
-      <th scope="col">Borrar</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Normal</th>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4693/btn-main-normal.jpg" style="width: 140px; height: 40px;"></td>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4699/btn-secondary-normal.jpg" style="width: 140px; height: 40px;"></td>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4687/btn-delete-normal.jpg" style="width: 140px; height: 40px;"></td>
-    </tr>
-    <tr>
-      <th scope="row">Presionado</th>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4691/btn-main-lit.jpg" style="width: 140px; height: 40px;"></td>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4697/btn-secondary-lit.jpg" style="width: 140px; height: 40px;"></td>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4685/btn-delete-lit.jpg" style="width: 140px; height: 40px;"></td>
-    </tr>
-    <tr>
-      <th scope="row">Deshabilitado</th>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4689/btn-main-disabled.jpg" style="width: 140px; height: 40px;"></td>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4695/btn-secondary-disabled.jpg" style="width: 140px; height: 40px;"></td>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4683/btn-delete-disabled.jpg" style="width: 140px; height: 40px;"></td>
-    </tr>
-  </tbody>
-</table>
-<p>Sobre fondo oscuro, los botones deshabilitados tienen un aspecto especial, como se ve abajo.</p>
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="row"> </th>
-      <th scope="col">Acción principal</th>
-      <th scope="col">Acción secundaria</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Disabled</th>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4701/btn-primary-disabled-dark.jpg" style="width: 140px; height: 40px;"></td>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4703/btn-secondary-disabled-dark.jpg" style="width: 140px; height: 40px;"></td>
-    </tr>
-  </tbody>
-</table>
-<h3 id="Botones_de_lista">Botones de lista</h3>
-<p>Se utilizan para mostrar una lista de acciones,  o para activar la presentación de un valor de selección.</p>
-<h4 id="Desencadenar_acciones">Desencadenar acciones</h4>
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="row"> </th>
-      <th scope="col">Desecadenar una acción en la vista actual</th>
-      <th scope="col">Desencadenar una acción en una nueva vista</th>
-      <th scope="col">Mostrar un selector de valores</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Normal</th>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4725/btn-trigger-current-normal.png" style="width: 291px; height: 40px;"></td>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4731/btn-trigger-new-normal.png" style="width: 290px; height: 40px;"></td>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4743/btn-trigger-selector-normal.png" style="width: 291px; height: 40px;"></td>
-    </tr>
-    <tr>
-      <th scope="row">Presionado</th>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4727/btn-trigger-current-pressed.png" style="width: 291px; height: 40px;"></td>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4733/btn-trigger-new-pressed.png" style="width: 289px; height: 39px;"></td>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4745/btn-trigger-selector-pressed.png" style="width: 291px; height: 40px;"></td>
-    </tr>
-    <tr>
-      <th scope="row">Deshabilitado</th>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4723/btn-trigger-current-disabled.png" style="width: 290px; height: 40px;"></td>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4729/btn-trigger-new-disabled.png" style="width: 290px; height: 40px;"></td>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4741/btn-trigger-selector-disabled.png" style="width: 291px; height: 40px;"></td>
-    </tr>
-  </tbody>
-</table>
-<h4 id="Selección_de_valores">Selección de valores</h4>
-<p>Una vez que se abre un selector de valores, necesitarás al menos un botón en el panel de selección de valores para descartar el valor seleccionado. Estos botones deberían tener el siguiente aspecto:</p>
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Normal</th>
-      <th scope="col">Presionado</th>
-      <th scope="col">Deshabilitado</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4755/btn-selector-normal.png" style="width: 269px; height: 39px;"></td>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4757/btn-selector-pressed.png" style="width: 269px; height: 39px;"></td>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4753/btn-selector-disabled.png" style="width: 269px; height: 39px;"></td>
-    </tr>
-  </tbody>
-</table>
-<h3 id="Botones_de_campos_de_entrada">Botones de campos de entrada</h3>
-<p>Los botones de campos de entrada son botones asociados a un campo de entrada, que cuando se presionan, llevan a cabo una acción relacionada con ese campo de entrada.</p>
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Normal</th>
-      <th scope="col">Presionado</th>
-      <th scope="col">Deshabilitado</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4761/input-field-normal.png" style="width: 320px; height: 40px;"></td>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4763/input-field-pressed.png" style="width: 320px; height: 40px;"></td>
-      <td><img alt="" src="https://mdn.mozillademos.org/files/4759/input-field-disabled.png" style="width: 320px; height: 40px;"></td>
-    </tr>
-  </tbody>
-</table>
-<h3 id="Botones_especiales">Botones especiales</h3>
-<p>Los botones especiales son botones visuales al estilo icono que se utilizan para propósitos especiales, tales como operar con la cámara del dispositivo, contestar o colgar el teléfono y activar el teclado de llamada. Por supuesto puedes encontrar otras utilidades a estos botones especiales.</p>
-<h4 id="Botones_de_cámara">Botones de cámara</h4>
-<p>Estos botones no tienen estado deshabilitado; simplemente no los muestras si la ocpión de tomar fotos no está disponible.</p>
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="row"> </th>
-      <th scope="col">Grabar video</th>
-      <th scope="col">Detener grabación video</th>
-      <th scope="col">Tomar foto</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Normal</th>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4771/video-record-normal.png" style="width: 100px; height: 45px;"></td>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4775/video-stop-normal.png" style="width: 100px; height: 45px;"></td>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4767/camera-normal.png" style="width: 100px; height: 45px;"></td>
-    </tr>
-    <tr>
-      <th scope="row">Presionado</th>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4773/video-record-pressed.png" style="width: 100px; height: 45px;"></td>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4777/video-stop-pressed.png" style="width: 100px; height: 45px;"></td>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4769/camera-pressed.png" style="width: 100px; height: 45px;"></td>
-    </tr>
-  </tbody>
-</table>
-<h4 id="Botones_de_teléfono">Botones de teléfono</h4>
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="row"> </th>
-      <th scope="col">Descolgar</th>
-      <th scope="col">Colgar</th>
-      <th scope="col">Ocultar teclado</th>
-    </tr>
-    <tr>
-      <th scope="row">Normal</th>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4781/phone-answer-normal.png" style="width: 130px; height: 40px;"></td>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4787/phone-hangup-normal.png" style="width: 130px; height: 40px;"></td>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4793/hide-dialer-normal.png" style="width: 130px; height: 40px;"></td>
-    </tr>
-    <tr>
-      <th scope="row">Presionado</th>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4783/phone-answer-pressed.png" style="width: 130px; height: 40px;"></td>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4789/phone-hangup-pressed.png" style="width: 130px; height: 40px;"></td>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4795/hide-dialer-pressed.png" style="width: 130px; height: 40px;"></td>
-    </tr>
-    <tr>
-      <th scope="row">Deshabilitado</th>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4779/phone-answer-disabled.png" style="width: 130px; height: 40px;"></td>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4785/phone-hangup-disabled.png" style="width: 130px; height: 40px;"></td>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4791/hide-dialer-disabled.png" style="width: 130px; height: 40px;"></td>
-    </tr>
-  </tbody>
-</table>
-<h4 id="Botones_personalizados">Botones personalizados</h4>
-<p>Estos son ejemplos de botones personalizados; en este caso, para añadir un contacto.</p>
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="row">Normal</th>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4799/generic-normal.png" style="width: 90px; height: 40px;"></td>
-    </tr>
-    <tr>
-      <th scope="row">Presionado</th>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4801/generic-pressed.png" style="width: 90px; height: 40px;"></td>
-    </tr>
-    <tr>
-      <th scope="row">Deshabilitado</th>
-      <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4797/generic-disabled.png" style="width: 90px; height: 40px;"></td>
-    </tr>
-  </tbody>
-</table>
-<h2 id="Ver_también">Ver también</h2>
-<ul>
-  <li><a href="/es/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Firefox OS experiencia de usuario</a></li>
-  <li><a href="/es/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Estilo de codificación de botones</a></li>
-</ul>
diff --git a/files/es/archive/b2g_os/ux/building_blocks/index.html b/files/es/archive/b2g_os/ux/building_blocks/index.html
deleted file mode 100644
index 33fc3c8a70..0000000000
--- a/files/es/archive/b2g_os/ux/building_blocks/index.html
+++ /dev/null
@@ -1,268 +0,0 @@
----
-title: Componentes básicos de UX de Firefox OS
-slug: Archive/B2G_OS/UX/Building_blocks
-translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x
----
-<p><span class="hps">Aquí encontrarás</span> <span class="hps">una descripción de</span> <span class="hps">los elementos de</span> <span class="hps">la interfaz de usuario comunes en las <span class="hps">aplicaciones</span></span> <span class="hps">de</span> <span class="hps">Firefox</span>  <span class="hps">OS,</span> además de<span class="hps"> ejemplos de</span> <span class="hps">cómo</span> <span class="hps">debe verse y</span> <span class="hps">funcionar.</span></p>
-
-<table class="withoutBorder">
- <tbody>
-  <tr>
-   <td colspan="2">
-    <h2 id="Menú_de_acciones">Menú de acciones</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="width: 180px; vertical-align: top;">
-    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4635/action-menu.png" style="height: 240px; width: 160px;"><br>
-      <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Guía del programador</a></p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2" style="vertical-align: top;">
-    <h2 id="Botón">Botón</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">
-    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4639/secondary-buttons.png" style="height: 139px; width: 140px;"></p>
-
-    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Guía del programador</a></p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2" style="vertical-align: top;">
-    <h2 id="Confirmación">Confirmación</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">
-    <p><img alt="" src="https://mdn.mozillademos.org/files/4803/confirmation-example.png" style="height: 240px; width: 160px;"></p>
-
-    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding">Guía del programador</a><br>
-      </p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2" style="vertical-align: top;">
-    <h2 id="Filtro">Filtro</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">
-    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4825/filter-visual-bottom" style="height: 241px; width: 161px;"></p>
-
-    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter/Coding">Guía del programador</a></p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2" style="vertical-align: top;">
-    <h2 id="Cabecera">Cabecera</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">
-    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4845/header-default.png" style="height: 27px; width: 160px;"></p>
-
-    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Header">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Header/Coding">Guía del programador</a></p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2" style="vertical-align: top;">
-    <h2 id="Área_de_entrada">Área de entrada</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">
-    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4859/sample-sms-bottom-input.png" style="height: 241px; width: 161px;"></p>
-
-    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area/Coding">Guía del programador</a></p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2" style="vertical-align: top;">
-    <h2 id="Lista">Lista</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">
-    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4889/list-example" style="height: 119px; width: 160px;"></p>
-
-    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/List">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/List/Coding">Guía del programador</a></p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2" style="vertical-align: top;">
-    <h2 id="Menú_de_objetos">Menú de objetos</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">
-    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4891/object-menu-idle.png" style="height: 240px; width: 160px;"></p>
-
-    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Object_menu">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Guía del programador</a></p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2" style="vertical-align: top;">
-    <h2 id="Indicador_de_progreso_y_actividad">Indicador de progreso y actividad</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">
-    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4897/progress-bar-example.png" style="height: 240px; width: 160px;"></p>
-
-    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Progress_and_activity">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Progress_and_activity/Coding">Guía del prgramador</a></p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2" style="vertical-align: top;">
-    <h2 id="Desplazamiento_por_letras">Desplazamiento por letras</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">
-    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4917/scrolling-index-scroll-dark.png" style="height: 240px; width: 160px;"></p>
-
-    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Scrolling">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Scrolling/Coding">Guía del programador</a></p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2" style="vertical-align: top;">
-    <h2 id="Barra_de_búsqueda">Barra de búsqueda</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">
-    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4923/seekbar-sample.png" style="height: 240px; width: 160px;"></p>
-
-    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Seek_bar">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Seek_bar/Coding">Guía del programador</a></p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2">
-    <h2 id="Estado">Estado</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">
-    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4637/banner.png" style="height: 240px; width: 160px;"><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status/Coding">Guía del programador</a></p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2" style="vertical-align: top;">
-    <h2 id="Interruptor">Interruptor</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">
-    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4925/switch-settings-sample.png" style="height: 240px; width: 160px;"></p>
-
-    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Switch">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Switch/Coding">Guía del programador</a></p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2" style="vertical-align: top;">
-    <h2 id="Pestañas">Pestañas</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">
-    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4955/tab-screenshot.png" style="height: 240px; width: 160px;"></p>
-
-    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs/Coding">Guía del programador</a></p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2" style="vertical-align: top;">
-    <h2 id="Barra_de_herramientas">Barra de herramientas</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">
-    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4967/toolbar-sample.png" style="height: 240px; width: 160px;"></p>
-
-    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar/Coding">Guía del programador</a></p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
-  <tr>
-   <td colspan="2" style="vertical-align: top;">
-    <h2 id="Selector_de_valor">Selector de valor</h2>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">
-    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4975/selector-nested.png" style="height: 240px; width: 160px;"></p>
-
-    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Value_selector">Detalles</a><br>
-     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Value_selector/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Value_selector/Coding">Guía del programador</a></p>
-   </td>
-   <td style="vertical-align: top;">
-    <p> </p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>