initial commit

6 files changed, 1179 insertions, 0 deletions

diff --git a/files/es/mdn/structures/ejemplos_ejecutables/index.html b/files/es/mdn/structures/ejemplos_ejecutables/index.html
new file mode 100644
index 0000000000..f5743b558e
--- /dev/null
+++ b/files/es/mdn/structures/ejemplos_ejecutables/index.html
@@ -0,0 +1,243 @@
+---
+title: Ejemplos ejecutables
+slug: MDN/Structures/Ejemplos_ejecutables
+translation_of: MDN/Structures/Live_samples
+---
+<div>{{MDNSidebar}}</div><p><span class="seoSummary">MDN puede convertir ejemplos de código de los artículos a ejemplos ejecutables que el lector puede ver en acción. Estos ejemplos ejecutables pueden contener HTML, CSS, y JavaScript en cualquier combinación. Ten en cuenta que</span> los ejemplos "ejecutables" <em>no son interactivos</em>; sin embargo, aseguran que el output coincida exactamente con el código de ejemplo, porque es generado por este.</p>
+
+<h2 id="Como_funciona_el_sistema_de_ejemplos_ejecutables">Como funciona el sistema de ejemplos ejecutables</h2>
+
+<p>El sistema de ejemplos ejecutables agrupa el código, lo une en un archivo HTML, procesa el HTML y entonces despliega el output en un {{HTMLElement("iframe")}}. Por lo tanto un ejemplo ejecutable consiste de dos partes:</p>
+
+<ul>
+ <li>Un grupo de bloques de código</li>
+ <li>La macro que (crea el frame o el link que) despliega el resultado de los bloques de código</li>
+</ul>
+
+<p>Un "grupo" de bloques de código, en este contexto, es identificado por el ID de un header o de un bloque de contenido (tal como un {{HTMLElement("div")}}).</p>
+
+<ul>
+ <li>Si el ID pertenece a un bloque de contenido, el grupo incluye todos los bloques de código que se encuentren entre las etiquetas de apertura y cierre del bloque de contenido de cuyo ID se usa.</li>
+ <li>Si el ID pertenece a un header, el grupo incluye todos los bloques de código que estén bajo el header y antes del siguiente header en el mismo nivel. Ten en cuenta que se usan todos los códigos de bloque bajo sub-headers del header especificado; si este no es el efecto que deseas, mejor usa un ID de un bloque de contenido.</li>
+</ul>
+
+<p>La macro usa un URL especial para extraer el código de ejemplo: <code>http://<em>url-de-la-pagina</em>$ejemplos/<em>grupo-id</em></code>, donde grupo-id es el ID del header o del bloque de contenido donde se localiza el código. El frame resultante (o página) es sandboxed (entorno de pruebas), seguro, y  técnicamente puede hacer cualquier cosa que funcione en la Web. Por supuesto, desde el punto de vista práctico, el código debe contribuir al tema de la página que lo contiene; cosas al azar ejecutándose en MDN serán removidas por la comunidad de editores.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> <strong>Debes</strong> usar el macro para presentar el output del ejemplo ejecutable. El editor de MDN quitará cualquier uso directo del elemento <code>&lt;iframe&gt;</code> por motivos de seguridad.</p>
+</div>
+
+<p>Cada bloque {{HTMLElement("pre")}} que contiene código para el ejemplo tiene una clase que indica si es código HTML, CSS, o JavaScript; estas son "brush: html", "brush: css", y "brush: js". Las clases deben estar en los bloques de código correspondientes para que el wiki pueda usarlos correctamente; afortunadamente, son agregadas automáticamente cuando usas  la herramienta Syntax Highlighter de la barra de herramientas del editor.</p>
+
+<p>El sistema de ejemplos ejecutables tiene muchas opciones disponibles, trataremos de ponerlas en terminos simples analizándolas de a poco.</p>
+
+<h3 id="Macro_de_ejemplos_ejecutables">Macro de ejemplos ejecutables</h3>
+
+<p>Hay dos macros que puedes usar para desplegar ejemplos ejecutables:</p>
+
+<ul>
+ <li><span class="templateLink"><code><a href="/en-US/docs/Template:EmbedLiveSample">EmbedLiveSample</a></code></span> despliega el ejemplo ejecutable en un frame embebido dentro de la misma página</li>
+ <li><span class="templateLink"><code><a href="/en-US/docs/Template:LiveSampleLink">LiveSampleLink</a></code></span> crea un link que abre el ejemplo ejecutable en una página nueva</li>
+</ul>
+
+<p>En muchos casos, tienes la posibilidad de agregar la macro <span class="templateLink"><code><a href="/en-US/docs/Template:EmbedLiveSample">EmbedLiveSample</a></code></span> o la <span class="templateLink"><code><a href="/en-US/docs/Template:LiveSampleLink">LiveSampleLink</a></code></span> con ¡poco o nada de trabajo adicional! Mientras el ejemplo pueda ser identificado por un ID de un header o esté en un bloque de contenido con un ID que puedas usar, simplemente agregar la macro será suficiente.</p>
+
+<h4 id="Macro_EmbedLiveSample">Macro EmbedLiveSample</h4>
+
+<pre class="syntaxbox notranslate"> \{{EmbedLiveSample(<em>ID_del_bloque</em>, <em>longitud</em>, altura, <em>URL_de_captura_de_pantalla</em>, <em>pagina_slug</em>)}}</pre>
+
+<dl>
+ <dt>ID_del_bloque</dt>
+ <dd>Requerido: El ID del header o del bloque de contenido de donde se tomará el código. La mejor forma de asegurarte que tienes el ID correcto es revisar el URL de la sección en la tabla de contenidos de la página.</dd>
+ <dt>longitud</dt>
+ <dd>La longitud del {{HTMLElement("iframe")}} que se creará, especificada en <code>px</code>. Esto es opcional; una longitud razonable se usará si omites esto. Ten en cuenta que si quieres usar una longitud específica, <em>debes</em> especificar el parámetro de altura también.</dd>
+ <dt>altura</dt>
+ <dd>La altura del {{HTMLElement("iframe")}} que se creará, especificada en <code>px</code>. Esto es opcional; una altura razonable se usará si omites esto. Ten en cuenta que si quieres usar una altura específica, <em>debes</em> especificar el parámetro de longitud también.</dd>
+ <dt>URL_de_captura_de_pantalla</dt>
+ <dd>La URL de una captura de pantalla que muestre como se debe ver el ejemplo ejecutable. Esto es opcional, pero puede ser útil para nuevas tecnologías que pueden no funcionar en el navegador del usuario, para que puedan ver como se vería el ejemplo si fuera soportado por su navegador. Si incluyes este parámetro, la captura de pantalla se muestra junto al ejemplo ejectutable, con encabezados apropiados.</dd>
+ <dt>pagina_slug</dt>
+ <dd>El slug (nombre con "_" reemplazando los espacios) de la página que contiene el ejemplo; esto es opcional, y si se omite, el ejemplo es extraido de la misma página donde se usa la macro.</dd>
+</dl>
+
+<ol>
+</ol>
+
+<h4 id="Macro_LiveSampleLink">Macro LiveSampleLink</h4>
+
+<pre class="syntaxbox notranslate"> \{{LiveSampleLink(<em>ID_del_bloque</em>, <em>texto_del_enlace</em>)}}</pre>
+
+<dl>
+ <dt>ID_del_bloque</dt>
+ <dd>Requerido: El ID del encabezado o del bloque de contenido de donde se tomará el código. La mejor forma de asegurarte que tienes el ID correcto es revisar el URL de la sección en la tabla de contenidos de la página.</dd>
+ <dt>texto_de_enlace</dt>
+ <dd>Una cadena de texto para mostrar en el enlace.</dd>
+</dl>
+
+<h2 id="Usando_el_sistema_de_ejemplos_ejecutables">Usando el sistema de ejemplos ejecutables</h2>
+
+<p>La sección de abajo describe algunos de los casos de uso más comunes para el sistema de ejemplos ejecutables.</p>
+
+<p>En todos estos casos, para ver los resultados del ejemplo ejecutable, debes hacer clic en <strong>Guardar Cambios</strong> en el editor (lo que te saca del modo edición). Debido a la reflexiba, naturaleza tipo <a href="http://www.imdb.com/title/tt1375666/?ref_=nv_sr_1"><em>Inception</em></a> de los ejemplos ejecutables, la funcionalidad de <strong>Previsualizar Cambios</strong> <em>no</em> permite desplegar los ejemplos ejecutables.</p>
+
+<h3 id="Convirtiendo_snippets_trozos_de_código_en_ejemplos_ejecutables">Convirtiendo snippets (trozos de código) en ejemplos ejecutables</h3>
+
+<p>Un uso común es tomar snippets existentes que ya se muestran en MDN y convertirlos ejemplos ejecutables.</p>
+
+<h4 id="Preparar_el_código">Preparar el código</h4>
+
+<p>El primer paso es agregar snippets o asegurarse que los existentes están listos para ser usados como ejemplos ejecutables, en términos de contenido y marcadores. Los snippets, juntos, deben comprender un ejemplo completo y ejecutable. Por ejemplo, si el snippet existente solo muestra CSS, debes agregar el snippet de HTML para que el CSS funcione.</p>
+
+<p>Cada pieza de código debe estar en un bloque {{HTMLElement("pre")}}, con un bloque separado para cada lenguaje, propiamente marcado con el lenguaje correspondiente. La mayoría de las veces, esto ya se hizo, pero vale la pena volver revisar para asegurarse que cada pieza de código está estructurado con la sintaxis correcta. A la derecha del ícono <strong>PRE</strong> en la barra de tareas hay un menú desplegable (herramienta: Syntax Highlighter) con varios lenguajes para los que MDN hace distinción de sintaxis. Establecer el lenguaje para la distinción de sintaxis del bloque también lo correlaciona con un lenguaje para los propósitos del sistema de ejemplos ejecutables.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Puedes tener más de un bloque para cada lenguaje; todos son concatenados juntos. Esto te permite tener una parte de código, seguida de una explicación de como funciona, luego otra parte de código, etc. Esto hace aun más fácil producir tutoriales y utilizar ejemplo ejecutables intercalados con texto que los explique.</p>
+</div>
+
+<p>Así que asegurate que la distinción de sintaxis de los bloques {{HTMLElement("pre")}} para tu código HTML, CSS, y/o JavaScript estén cada uno configurado para el lenguaje correcto, y estarás bien.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Al pegar contenido en MDN, se conciente que si pegas contenido formateado (incluyendo, por ejemplo, distinción de sintaxis en código copeado de otro sitio) puedes estar trayendo formatos o clases que no quieres y no necesitas. Ten cuidado de no hacer esto; si es necesario, revisa tu edición en modo fuente y elimina estos formatos y clases innecesarios (o revísalo antes de pegarlo, o usa la opción "Pegar como texto plano").</p>
+</div>
+
+<h4 id="Insertar_la_macro_de_ejemplo_ejecutable">Insertar la macro de ejemplo ejecutable</h4>
+
+<p>Una vez que el código está en su lugar y propiamente configurado para identificar cada bloque de lenguaje, necesitas insertar la macro que crea el frame.</p>
+
+<ol>
+ <li>Haz clic en el botón <strong>Insert Live Code Sample iFrame</strong> en la barra de herramientas; luce así: <img alt="" src="https://mdn.mozillademos.org/files/5383/insert-live-sample-btn.png" style="height: 18px; width: 19px;">. Esto abre un cuadro de diálogo para configurar el frame de tu ejemplo ejecutable:                         <img alt="" src="https://mdn.mozillademos.org/files/5385/sample-finder.png" style="height: 358px; width: 405px;"></li>
+ <li>Bajo <strong>Document</strong>, ingresa el título del artículo que contiene el ejemplo que deseas desplegar. Por default, es el artículo que estás editando, pero puedes escoger un artículo en otra parte de MDN. Esto hace posible reusar ejemplos en múltiples páginas si es necesario. (Si escribes un texto nuevo en este campo, aparecerá un menú de coincidencias parciales; selecciona el título de la página que desees.)</li>
+ <li>En el menú <strong>Sections in Document</strong>, selecciona la sección en el artículo que contiene los bloques de código del ejemplo que quieres desplegar.</li>
+ <li>Haz clic en el botón <strong>OK</strong> para generar e insertar la macro que crea el frame del ejemplo. La macro luce algo así:<br>
+  <strong>\{{ EmbedLiveSample('Live_sample_demo') }}</strong></li>
+</ol>
+
+<h3 id="Agregando_un_nuevo_ejemplo_ejecutable">Agregando un nuevo ejemplo ejecutable</h3>
+
+<p>Si estás escribiendo una página nueva, y quieres insertar código que deseas mostrar como ejemplo ejecutable, ¡aun más del trabajo puede ser realizado por el editor para ti!</p>
+
+<ol>
+ <li>Haz clic el botón <strong>Insert Code Sample Template</strong> en la barra de herramientas, luce así: <img alt="" src="/files/4265/live-sample-button.png" style="height: 19px; width: 21px;">. Esto presenta un simple cuadro de diálogo pidiéndote que nombres a tu ejemplo ejecutable:<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/5387/insert-live-sample-template.png" style="height: 155px; width: 251px;"></li>
+ <li>Ingresa el nombre del ejemplo; esto es usado como el header para el ejemplo. Asegúrate que tu título sea coherente con la pagína que escribes.</li>
+ <li>Haz clic en <strong>OK</strong>. Se creó un header nuevo con el título que elegiste, con sub-headers y bloques de código vacios para HTML, CSS y JavaScript.</li>
+ <li>Elimina cualquier sub-header y bloque de código que no necesites.</li>
+ <li>Ingresa el código que compone tu ejemplo en los bloques de código apropiados.</li>
+ <li><a href="#conventions">Revisar convenciones</a></li>
+</ol>
+
+<h3 id="Usando_el_Buscador_de_Ejemplos">Usando el Buscador de Ejemplos</h3>
+
+<p>Como se mencionó arriba, el buscador de Ejemplos se activa haciendo clic en el ícono<strong> Insert Live Code Sample iFrame</strong>. Desafortunadamente el Buscador de Ejemplos puede producir un macro que NO es usable sin editarse antes. Hay dos áreas problemáticas que deben revisarse con cuidado y editarse si es necesario.</p>
+
+<ol>
+ <li>Campo <strong>Document</strong>. Este campo buscará mientras escribes y presentará una lista de documentos que encajan con tu búsqueda. Pero la lista presentada NO incluirá sub-páginas. Por ejemplo, digamos que estás trabajando en la sub-página <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/negative">Negative </a>de la página principal <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style">@counter-style</a>. El Buscador de Ejemplos no encontrará Negative pero si la página principal @counter-style. Cuando se selecciona @counter-style el fondo cambia a color verde. Lee debajo el problema que esto crea.</li>
+ <li><strong>Sections in Document</strong>. El menú desplegable Sections in Document puede no mostrar la sección que necesitas. Selecciona cualquiera, digamos Examples, y puede arreglarse con una simple edición.</li>
+</ol>
+
+<p>Esto es lo que el Buscador de Ejemplos produce:</p>
+
+<pre class="notranslate"><code>\{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/@counter-style') }}</code></pre>
+
+<p>Esta macro no funcionará. El ID_de_bloque es Examples y debería ser Example en este caso (revisa la fuente del ID de esta sección para verificar cual ID_de_bloque necesitas usar). Igualmente pagina_slug es @counter-style y debería ser @counter-style/negative. Estas correcciones puede hacerse directamente en la página activando la edición.</p>
+
+<p>Después de editar la macro ahora luce así:</p>
+
+<pre class="notranslate"><code>\{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/negative') }}</code></pre>
+
+<p>Esta macro editada funcionará correctamente. Si la macro funciona correctamente verás el botón <strong>Open in CodePen</strong>. Una miniatura del ejemplo deberá aparecer encima del botón Open in CodePen. Si el botón está ahí pero no hay miniatura, espera unos minutos. Puede tormar un tiempo para que el servidor la genere.</p>
+
+<h2 id="Live_sample_demo" name="Live_sample_demo">Encontrando ejemplos que necesitan actualización</h2>
+
+<p>Al buscar ejemplos existentes que actualizar, hay tres tipos principales de actualización que deseas hacer:</p>
+
+<ul>
+ <li>Convertir un snippet no ejecutable en un ejemplo ejecutable.</li>
+ <li>Corregir bugs en un ejemplo ejecutable existente.</li>
+ <li>Mejorar un ejemplo ejecutable existente, o actualizar un ejemplo basándose en cambios tecnológicos.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong><strong>:</strong> Si encuentras artículos que necesitan ser actualizados para usar el sistema de ejemplos ejecutables, por favor agrega a la página la etiqueta "NeedsLiveSample".</p>
+</div>
+
+<h3 id="Encontrando_ejemplos_que_necesitan_convertirse_a_ejemplos_ejecutables">Encontrando ejemplos que necesitan convertirse a ejemplos ejecutables</h3>
+
+<p>MDN tiene montontes de ejemplos viejos que aun no usan el sistema de ejemplos ejecutables. Nuestra meta es actualizar la mayoría o todos para que sean ejemplos ejecutables.Esto aumentará la consistencia y la usabilidad. Es casi seguro que te encontrarás muchos de estos mientras usas MDN en el día a día; sin embargo, ¿cómo puedes encontrarlos si los buscas específicamente para actualizarlos? Desafortunadamente, no hay un modo fácil de hacer eso. Pero hay algunos consejos que te ayudarán a rastrearlos:</p>
+
+<ul>
+ <li>Empieza por darle un vistazo a esto <a href="/en-US/docs/tag/NeedsLiveSample" title="/en-US/docs/tag/NeedsLiveSamples">lista de páginas etiquetadas con "NeedsLiveSample"</a>. Estas son las páginas que los usuarios han marcadado como que necesitan actualizarse. Deberías agregar esta etiqueta tu mismo, si ves una página que necesita ser actualizada para usar ejemplos ejecutables pero no tienes tiempo de arreglarla enseguida.</li>
+ <li>Navega por ligas de documentación que es probable que incluyan ejemplos, como <a href="/en-US/docs/Web/JavaScript/Guide" title="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML documentation</a>, y <a href="/en-US/docs/Web/CSS/Reference" title="/en-US/docs/Web/CSS/Reference">CSS reference</a>.</li>
+ <li>Busca término como "<a href="/en-US/search?q=example" title="/en-US/search?q=example">example</a>" o "<a href="/en-US/search?q=sample" title="/en-US/search?q=sample">sample</a>" y revisar los resultados para páginas que actualizar.</li>
+</ul>
+
+<h2 id="Live_sample_demo" name="Live_sample_demo">Demo de ejemplo ejecutable</h2>
+
+<p>Esta sección es el resultado de usar la plantilla de ejemplo ejecutable no solo para crear el encabezado principal ("Live sample demo"), sino los sub-encabezador para nuestro contenido HTML, CSS y JavaScript. No estás limitado a un bloque para cada uno; además, no necesitan estar en algún orden partícular. ¡Mix and match!</p>
+
+<p>Puedes eliminar cualquiera de estos que desees; si no necesitas scripts, elimina el encabezado y su bloque {{HTMLElement("pre")}}. También puedes eliminar el encabezado de un bloque de código ("HTML", "CSS", o "JavaScript"), ya que estos no son usados por la macro de ejemplo ejecutable.</p>
+
+<p>Ahora que se ha insertado la plantilla, podemos agregar algo de código, e incluso algún texto explicativo.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Este HTML crea un parágrafo y algunos bloques para ayudarnos a posicionar y formatear un mensaje.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Un simple ejemplo de sistema de ejemplo ejecutable en accion.&lt;/p&gt;
+&lt;div class="box"&gt;
+  &lt;div id="item"&gt;¡Hola mundo!&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>El código CSS formatea el contenedor así como el mensaje.</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 200px;
+  height: 100 px;
+  border-radius: 6px;
+  background-color: #ffaabb;
+}
+
+#item {
+  width: 100%;
+  font-weight: bold;
+  text-align: center;
+  font-size: 2em;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Este código es muy simple. Todo lo que hace es agregar un manejador de evento al texto "¡Hola mundo!" que hace aparecer una alerta cuando se le hace clic.</p>
+
+<pre class="brush: js notranslate">var el = document.getElementById('item');
+el.onclick = function() {
+  alert('¡Owww, deja de picarme!');
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>Aquí el resultado de ejecutar los bloques de código de arriba vía<code> \{{EmbedLiveSample('Live_sample_demo')}}</code>:</p>
+
+<p>{{EmbedLiveSample('Live_sample_demo')}}</p>
+
+<p>Aquí un enlace que resulta de llamar los bloques de código vía <code>\{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}</code>:</p>
+
+<p>{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}</p>
+
+<h2 id="Convenciones_acerca_de_los_ejemplos_ejecutables"><a id="conventions" name="conventions">Convenciones acerca de los ejemplos ejecutables</a></h2>
+
+<div class="note">
+<p><strong>Nota:</strong> Esto es actual (Feb. 2016) en discusión en la lista de emails dev-mdc (ver <a href="https://groups.google.com/forum/#!topic/mozilla.dev.mdc/49oqJAHFnWQ">this thread</a>). Cualquier entrada es bienvenida. Si esta nota persiste después de unos meses (Apr. 2016), por favor contactar al autor del primer email en este hilo para actualizar esta página.</p>
+</div>
+
+<dl>
+ <dt>Orden de los bloques de código</dt>
+ <dd>Al agregar un ejemplo ejecutable, los bloques de código deben ser organizados para que el primero corresponda al lenguaje principal (si hay uno). Por ejemplo, al agregar un ejemplo ejecutable para una referencia HTML, el primer bloque debe ser HTML, al agregar un ejemplo ejecutable para una referencia CSS, debe ser el de CSS y así.</dd>
+ <dt>Nombrando los encabezados</dt>
+ <dd>Cuando no hay ambigüedad (p.ej. el ejemplo está bajo una sección "Ejemplos"), los encabezados deben ser directos con el único nombre del lenguaje correspondiente: HTML, CSS, JavaScript, SVG, etc. (ver arriba). No deben usarse encabezados como "contenido HTML" o "contenido JavaScript". Sin embargo si un encabezado tan corto hace que el contenido no sea claro, uno puede usar un título más elaborado.</dd>
+ <dt>Usando un bloque "Result"</dt>
+ <dd>Después de los diferentes bloques de código, favor de usar un último bloque "Result" antes de usar macro <code>EmbedLiveSample</code> (ver arriba). De este modo, se hace más clara la semántica del ejemplo tanto para el lector como para cualquier herramienta que analice la página (p.ej. screen reader, web crawler).</dd>
+</dl>
diff --git a/files/es/mdn/structures/index.html b/files/es/mdn/structures/index.html
new file mode 100644
index 0000000000..b8df701dac
--- /dev/null
+++ b/files/es/mdn/structures/index.html
@@ -0,0 +1,16 @@
+---
+title: Document structures
+slug: MDN/Structures
+tags:
+  - Landing
+  - MDN Meta
+  - NeedsTranslation
+  - Structures
+  - TopicStub
+translation_of: MDN/Structures
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<p>Throughout MDN, there are various document structures that are used repeatedly, to provide consistent presentation of information in MDN articles. Here are articles describing these structures, so that, as an MDN author, you can recognize, apply, and modify them as appropriate for documents you write, edit, or translate.</p>
+
+<p>{{LandingPageListSubPages()}}</p>
diff --git a/files/es/mdn/structures/macros/commonly-used_macros/index.html b/files/es/mdn/structures/macros/commonly-used_macros/index.html
new file mode 100644
index 0000000000..18ebaff2af
--- /dev/null
+++ b/files/es/mdn/structures/macros/commonly-used_macros/index.html
@@ -0,0 +1,210 @@
+---
+title: Macros usadas comunmente
+slug: MDN/Structures/Macros/Commonly-used_macros
+tags:
+  - CSS
+  - Estructuras
+  - Macros
+  - Referencia
+translation_of: MDN/Structures/Macros/Commonly-used_macros
+---
+<p>{{MDNSidebar}}</p>
+
+<p><span class="seoSummary">Esta página enumera muchas de las macros de propósito general creadas para usarlas en MDN. Para obtener información sobre cómo usar estas macros, consulta {{web.link("/es/docs/MDN/Contribute/Structures/Macros", "Uso de macros")}} y {{web.link("/es/docs/MDN/Contribute/Editor/Links#Usar_macros_de_enlaces", "Usar macros de enlaces")}}.</span> Consulta {{web.link("/es/docs/MDN/Contribute/Structures/Macros/Other", "Otras macros")}} para obtener información sobre las macros que se utilizan con poca frecuencia, que se utilizan solo en contextos especiales o, están en desuso. También hay una {{web.link("/es/dashboards/macros", "lista completa de todas las macros en MDN")}}. </p>
+
+<p>Consulta también la {{web.link("/es/docs/MDN/Contribute/Guidelines/CSS_style_guide", "guía de estilo CSS")}} para conocer los estilos disponibles para usarlos.</p>
+
+<h2 id="Enlaces">Enlaces</h2>
+
+<h3 id="Creando_un_solo_hipervínculo">Creando un solo hipervínculo</h3>
+
+<p id="To_another_MDN_page_or_its_section_ (anch_SectionOnPage_manch_Link_LinkItem_LinkItemDL)">En general, no es necesario utilizar macros para crear enlaces arbitrarios. Utiliza el botón <strong>Enlace</strong> en la interfaz del editor para crear enlaces. </p>
+
+<ul>
+ <li>La macro {{TemplateLink("Glossary")}} crea un vínculo a la entrada de un término específico en el {{web.link("/es/docs/Glossary", "glosario")}} de MDN. Esta macro acepta un parámetro obligatorio y dos opcionales:
+
+  <p>Ejemplos:</p>
+
+  <ol>
+   <li>El nombre del término (tal como "HTML").</li>
+   <li>El texto que se mostrará en el artículo en lugar del nombre del término (esto se debe usar con poca frecuencia).{{Optional_Inline}}</li>
+   <li>Si se especifica este parámetro y no es cero, no se aplica el estilo personalizado que normalmente se aplica a los enlaces del glosario.{{Optional_Inline}}</li>
+  </ol>
+
+  <ul>
+   <li><code>\{{Glossary("HTML")}}</code> produce {{Glossary("HTML")}}</li>
+   <li><code>\{{Glossary("CSS", "Hojas de estilo en cascada")}}</code> produce {{Glossary("CSS", "Hojas de estilo en cascada")}}</li>
+   <li><code>\{{Glossary("HTML", "", 1)}}</code> produce {{Glossary("HTML", "", 1)}}</li>
+  </ul>
+ </li>
+ <li>{{TemplateLink("anch")}} — crea un enlace a una sección en la página:
+  <ul>
+   <li><code>\{{anch("Enlace a páginas en referencias")}}</code>;</li>
+   <li>
+    <p>Demo: {{anch("Enlace a páginas en referencias")}}</p>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Enlace_a_páginas_en_referencias">Enlace a páginas en referencias</h3>
+
+<p>Hay varias macros para vincular páginas en áreas de referencia específicas de MDN.</p>
+
+<ul>
+ <li>{{TemplateLink("cssxref")}} links to a page in the <a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a>.<br>
+  Ejemplo: <code>\{{CSSxRef("cursor")}}</code>, da como resultado: {{CSSxRef("cursor")}}.</li>
+ <li>{{TemplateLink("DOMxRef")}} enlaces a páginas en la referencia DOM; si incluyes paréntesis al final, la plantilla sabe que debe mostrar el enlace para que aparezca el nombre de una función. Por ejemplo, <code>\{{DOMxRef("document.getElementsByName()")}}</code> da como resultado: {{DOMxRef("document.getElementsByName()")}} mientras que <code>\{{DOMxRef("Node")}}</code> da como resultado: {{DOMxRef("Node")}}.</li>
+ <li>{{TemplateLink("event")}} enlaces a páginas en la referencia de Evento del DOM, por ejemplo: <code>\{{Event("change")}}</code> da como resultado {{Event("change")}}.</li>
+ <li>{{TemplateLink("HTMLElement")}} enlaza a un elemento HTML en la Referencia HTML.</li>
+ <li>{{TemplateLink("htmlattrxref")}} enlaza a un atributo HTML, ya sea una descripción de atributo global si solo especificas el nombre del atributo o un atributo asociado con un elemento específico si especificas un nombre de atributo y un nombre de elemento. Por ejemplo, <code>\{{HTMLAttrxRef("lang")}}</code> creará este enlace: {{HTMLAttrxRef("lang")}}. <code>\{{HTMLAttrxRef("type", "input")}}</code> creará este enlace: {{HTMLAttrxRef("type", "input")}}.</li>
+ <li>{{TemplateLink("jsxref")}} enlaza a una página en la {{JSxRef("../Referencia", "Referencia de JavaScript")}}.</li>
+ <li>{{TemplateLink("SVGAttr")}} enlaza a un atributo SVG específico. Por ejemplo, <code>\{{SVGAttr("d")}}</code> crea este enlace: {{SVGAttr("d")}}.</li>
+ <li>{{TemplateLink("SVGElement")}} enlaza a un elemento SVG en la Referencia SVG.</li>
+ <li>{{TemplateLink("httpheader")}} enlaza a un {{web.link("/es/docs/Web/HTTP/Headers", "header de HTTP")}}.</li>
+ <li>{{TemplateLink("HTTPMethod")}} enlaza a un {{web.link("/es/docs/Web/HTTP/Methods", "método de solicitud HTTP")}}.</li>
+ <li>{{TemplateLink("HTTPStatus")}} enlaces a un {{web.link("/es/docs/Web/HTTP/Status", "código de estado de respuesta HTTP")}}.</li>
+</ul>
+
+<h3 id="Enlazar_a_errores">Enlazar a errores</h3>
+
+<ul>
+ <li><code>Bugs</code>
+  <ul>
+   <li>{{TemplateLink("bug")}} te permite enlazar a un error en bugzilla.mozilla.org fácilmente usando esta sintaxis: <code>\{{Bug(123456)}}</code>. Esto te da: {{Bug(123456)}}.</li>
+   <li>{{TemplateLink("WebkitBug")}} inserta un enlace a un error en la base de datos de errores de <code>WebKit</code>. For example, <code>\{{WebkitBug(31277)}}</code> inserta {{WebkitBug(31277)}}.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Ayuda_a_la_navegación_para_guías_multipágina">Ayuda a la navegación para guías multipágina</h3>
+
+<p>{{TemplateLink("Previous")}}, {{TemplateLink("Next")}} y {{TemplateLink("PreviousNext")}} proporcionan controles de navegación para artículos que forman parte de secuencias. Para las plantillas unidireccionales, el único parámetro necesario es la ubicación wiki del artículo anterior o siguiente de la secuencia. Para {{TemplateLink("PreviousNext")}}, los dos parámetros necesarios son las ubicaciones wiki de los artículos correspondientes. El primer parámetro es para el artículo anterior y el segundo es para el artículo siguiente.</p>
+
+<h2 id="Ejemplos_de_código">Ejemplos de código</h2>
+
+<h3 id="Ejemplos_en_vivo">Ejemplos en vivo</h3>
+
+<ul>
+ <li>{{TemplateLink("EmbedLiveSample")}} te permite insertar la salida de un ejemplo de código en una página, como se describe en {{web.link("/es/docs/MDN/Contribute/Structures/Live_samples", "Ejemplos en vivo")}}.</li>
+ <li>{{TemplateLink("LiveSampleLink")}} crea un vínculo a una página que contiene el resultado de un ejemplo de código en una página, como se describe en {{web.link("/es/docs/MDN/Contribute/Structures/Live_samples", "Ejemplos en vivo")}}.</li>
+</ul>
+
+<h2 id="Generar_la_barra_lateral">Generar la barra lateral</h2>
+
+<p>Hay plantillas para casi todas las grandes colecciones de páginas. Por lo general, enlazan a la página principal de <code>reference/guide/tutorial</code> (esto, a menudo es necesario porque nuestras rutas de navegación a veces no lo pueden hacer) y colocan el artículo en la categoría apropiada.</p>
+
+<ul>
+ <li>{{TemplateLink("CSSRef")}} genera la barra lateral para las páginas de referencia CSS.</li>
+ <li>{{TemplateLink("HTMLRef")}} genera la barra lateral para las páginas de referencia HTML.</li>
+ <li>{{TemplateLink("APIRef")}} genera la barra lateral para las páginas de referencia de la API web.</li>
+</ul>
+
+<h2 id="Formato_de_propósito_general">Formato de propósito general</h2>
+
+<h3 id="Indicadores_en_línea_para_documentación_de_APIs">Indicadores en línea para documentación de APIs</h3>
+
+<p>{{TemplateLink("optional_inline")}} y {{TemplateLink("ReadOnlyInline")}} se utilizan en la documentación de la API, normalmente cuando se describe la lista de propiedades de un objeto o parámetros de una función.</p>
+
+<p>Uso: <code>\{{Optional_Inline}}</code> o <code>\{{ReadOnlyInline}}</code>. Ejemplo:</p>
+
+<dl>
+ <dt><code>isCustomObject</code>{{ReadOnlyInline}}</dt>
+ <dd>Indica, si es <code>true</code>, que el objeto es personalizado.</dd>
+ <dt><code>parameterX</code>{{Optional_Inline}}</dt>
+ <dd>Blah blah blah...</dd>
+</dl>
+
+<h2 id="Indicadores_de_estado_y_compatibilidad">Indicadores de estado y compatibilidad</h2>
+
+<h3 id="Indicadores_en_línea_sin_parámetros_adicionales">Indicadores en línea sin parámetros adicionales</h3>
+
+<h4 id="Non-standard"><code>Non-standard</code></h4>
+
+<p>{{TemplateLink("Non-standard_Inline")}} inserta una marca en línea que indica que la API no se ha estandarizado y no está en un seguimiento de estándares.</p>
+
+<h5 id="Sintaxis">Sintaxis</h5>
+
+<p><code>\{{Non-standard_Inline}}</code></p>
+
+<h5 id="Ejemplos">Ejemplos</h5>
+
+<ul>
+ <li>Icono: {{Non-standard_Inline}}</li>
+</ul>
+
+<h4 id="Experimental">Experimental</h4>
+
+<p>{{TemplateLink("experimental_inline")}} inserta una marca en línea que indica que la API no está ampliamente implementada y puede cambiar en el futuro.</p>
+
+<h5 id="Sintaxis_2">Sintaxis</h5>
+
+<p><code>\{{Experimental_Inline}}</code></p>
+
+<h5 id="Ejemplos_2">Ejemplos</h5>
+
+<ul>
+ <li>Icon: {{Experimental_Inline}}</li>
+</ul>
+
+<h3 id="Indicadores_en_línea_que_apoyan_la_especificación_de_la_tecnología">Indicadores en línea que apoyan la especificación de la tecnología</h3>
+
+<p>En estas macros, el parámetro (cuando se especifica) debe ser una de las cadenas "html", "js", "css" o "gecko", seguida del número de versión.</p>
+
+<h4 id="Desaprobado">Desaprobado</h4>
+
+<p>{{TemplateLink("Deprecated_Inline")}} inserta una marca desaprobado en línea (<code>Deprecated_Inline</code>) para desalentar el uso de una API que oficialmente está en desuso. <strong>Nota</strong>: "Desaprobado" significa que el elemento ya no se debe utilizar, pero sigue funcionando. Si quieres decir que ya no funciona, utiliza el término "obsoleto".</p>
+
+<p>No utilices el parámetro en ningún área independiente del navegador (HTML, API, JS, CSS, …).</p>
+
+<h5 id="Sintaxis_3">Sintaxis</h5>
+
+<p><code>\{{Deprecated_Inline}}</code> o <code>\{{Deprecated_Inline("gecko5")}}</code></p>
+
+<h5 id="Ejemplos_3">Ejemplos</h5>
+
+<ul>
+ <li>Icon: {{Deprecated_Inline}}</li>
+ <li>Insignia: {{Deprecated_Inline("gecko5")}}</li>
+</ul>
+
+<h4 id="Obsoleto">Obsoleto</h4>
+
+<p>{{TemplateLink("Obsolete_Inline")}} inserta una marca de obsoleto en línea (<code>Deprecated_Inline</code>) para evitar el uso de, por ejemplo, una función, método o propiedad que oficialmente es obsoleto.</p>
+
+<p>No utilices el parámetro en ningún área independiente del navegador (HTML, API, JS, CSS, …).</p>
+
+<h5 id="Sintaxis_4">Sintaxis</h5>
+
+<p><code>\{{Obsolete_Inline}}</code> u <code>\{{Obsolete_Inline("js1.8.5")}}</code></p>
+
+<h5 id="Ejemplos_4">Ejemplos</h5>
+
+<ul>
+ <li>Icon: {{Obsolete_Inline}}</li>
+ <li>Badge: {{Obsolete_Inline("js1.8.5")}}</li>
+</ul>
+
+<h3 id="Plantilla_de_insignias">Plantilla de insignias</h3>
+
+<p>Estas macros se utilizan principalmente en la página {{web.link("/es/docs/Web/API", "WebAPI")}}. Consulta {{anch("Creación de nuevas insignias")}} para obtener información sobre cómo crear una nueva insignia (<code>Badge</code>).</p>
+
+<h3 id="Indicadores_de_encabezado_de_página_o_sección">Indicadores de encabezado de página o sección</h3>
+
+<p>Estas plantillas tienen la misma semántica que sus contrapartes en línea descritas anteriormente. Las plantillas se deben colocar directamente debajo del título de la página principal (o la ruta de navegación si está disponible) en la página de referencia. También se pueden utilizar para marcar una sección en una página.</p>
+
+<ul>
+ <li>{{TemplateLink("Non-standard_Header")}}: <code>\{{Non-standard_Header}}</code> {{Non-standard_Header}}</li>
+ <li>{{TemplateLink("SeeCompatTable")}} se debe usar en páginas que documentan {{web.link("/es/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental", "características experimentales")}}. Ejemplo: <code>\{{SeeCompatTable}}</code> {{SeeCompatTable}}</li>
+ <li>{{TemplateLink("Deprecated_Header")}}: <code>\{{Deprecated_Header}}</code> {{Deprecated_Header}}</li>
+ <li>{{TemplateLink("Deprecated_Header")}} con parámetro: <code>\{{Deprecated_Header("gecko5")}}</code> {{Deprecated_Header("gecko5")}} No utilices el parámetro en ninguna área de diagnóstico del navegador (HTML, APIs, JS, CSS, …).</li>
+ <li>{{TemplateLink("Obsolete_Header")}}: <code>\{{Obsolete_Header}}</code> {{Obsolete_Header}}</li>
+ <li>{{TemplateLink("Obsolete_Header")}} con parámetro: <code>\{{Obsolete_Header("gecko30")}}</code> {{Obsolete_Header("gecko30")}} No utilice el parámetro en ninguna área de diagnóstico del navegador (HTML, APIs, JS, CSS, …).</li>
+ <li>{{TemplateLink("secureContext_header")}}: <code>\{{SecureContext_Header}}</code> {{SecureContext_Header}}</li>
+</ul>
+
+<h3 id="Indica_que_una_función_está_disponible_en_workers_web">Indica que una función está disponible en <code>workers</code> web</h3>
+
+<p>La macro {{TemplateLink("AvailableInWorkers")}} inserta un cuadro de nota localizado que indica que una función está disponible en el contexto de {{web.link("/es/docs/Web/API/Web_Workers_API", "workers web")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
diff --git a/files/es/mdn/structures/macros/index.html b/files/es/mdn/structures/macros/index.html
new file mode 100644
index 0000000000..807059cfd9
--- /dev/null
+++ b/files/es/mdn/structures/macros/index.html
@@ -0,0 +1,53 @@
+---
+title: Macros
+slug: MDN/Structures/Macros
+tags:
+  - Estructuras
+  - Guide
+  - Guía
+  - Kuma
+  - KumaScript
+  - MDN Meta
+  - Structures
+  - TopicStub
+translation_of: MDN/Structures/Macros
+---
+<div>{{MDNSidebar}}</div>
+
+<p><span class="seoSummary">La plataforma {{web.link("/es/docs/Project:MDN/Kuma#Herramientas_y_tareas", "Kuma")}} en la que se ejecuta MDN proporciona un potente sistema de macros, {{web.link("/es/docs/MDN/Contribute/Tools/KumaScript", "KumaScript")}}, estas te permiten hacer una amplia variedad de cosas de forma automática. Este artículo proporciona información sobre cómo invocar macros de MDN dentro de los artículos.</span></p>
+
+
+
+<p>La {{web.link("/es/docs/MDN/Contribute/Tools/KumaScript", "guía de KumaScript")}} profundiza en cómo usar macros en MDN, por lo que esta sección es más una breve descripción general.</p>
+
+<h2 id="Cómo_se_implementan_las_macros">Cómo se implementan las macros</h2>
+
+<p>Las macros en MDN se implementan usando código {{web.link("/es/docs/Web/JavaScript", "JavaScript")}} ejecutado por el servidor, interpretado usando <a href="https://nodejs.org/es/" title="https://nodejs.org/es/">Node.js</a>. Además de eso, tenemos una serie de bibliotecas que hemos implementado que brindan servicios y funciones orientados a wiki para permitir que las macros interactúen con la plataforma wiki y su contenido. Si estás interesado en obtener más información, consulta {{web.link("/es/docs/MDN/Contribute/Tools/KumaScript", "Guía de KumaScript")}}.</p>
+
+<h2 id="Usar_una_macro_en_el_contenido">Usar una macro en el contenido</h2>
+
+<p>Para usar realmente una macro, simplemente encierra la llamada a la macro entre un par de llaves dobles, con sus parámetros, si los hay, entre paréntesis; es decir:</p>
+
+<pre class="notranslate">\{{nombremacro(lista-de-parametros)}}</pre>
+
+<p>Algunas notas sobre las llamadas de macro:</p>
+
+<ul>
+ <li>Los nombres de macro distinguen entre mayúsculas y minúsculas, pero se intentas corregir los errores comunes de uso de mayúsculas; puedes usar todo en minúsculas incluso si el nombre de la macro usa mayúsculas dentro de él, y puedes poner en mayúscula una macro cuyo nombre normalmente comienza con una letra minúscula.</li>
+ <li>Los parámetros están separados por comas.</li>
+ <li>Si no hay parámetros, puedes omitir los paréntesis por completo; <code>\{{nombremacro()}}</code> y <code>\{{nombremacro}}</code> son idénticos.</li>
+ <li>Los parámetros numéricos pueden estar entre comillas o no. Depende de ti (sin embargo, si tienes un número de versión con varios decimales, debe estar entre comillas).</li>
+ <li>Si recibes errores, revisa tu código detenidamente. Si aún no puedes averiguar qué está pasando, consulta {{web.link("/es/docs/MDN/Kuma/Troubleshooting_KumaScript_errors", "Solución de errores de KumaScript")}} para obtener ayuda.</li>
+</ul>
+
+<p>Las macros están almacenadas en caché; para cualquier conjunto de valores de entrada (tanto parámetros como valores del entorno, tal como la URL para la que se ejecutó la macro), los resultados se almacenan y reutilizan. Esto significa que la macro solo se ejecuta realmente cuando cambian las entradas.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes forzar la reevaluación de todas las macros de una página si fuerzas la actualización de la página en tu navegador (es decir, una recarga).</p>
+</div>
+
+<p>Las macros pueden ser tan simples como insertar un bloque de texto más grande o intercambiar contenido de otra parte de MDN, o tan complejas como crear un índice completo de contenido buscando en partes del sitio, estilizando el resultado y agregando enlaces.</p>
+
+<p>Puedes leer sobre las macros más utilizadas en {{web.link("/es/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros", "Página de macros usadas comúnmente")}}; también, hay una {{web.link("/es/docs/templates", "lista completa de todas las macros")}}. La mayoría de las macros tienen documentación incorporada, como comentarios en la parte superior.</p>
+
+<p>{{EditorGuideQuickLinks}}</p>
diff --git a/files/es/mdn/structures/macros/otras/index.html b/files/es/mdn/structures/macros/otras/index.html
new file mode 100644
index 0000000000..532bc07fdc
--- /dev/null
+++ b/files/es/mdn/structures/macros/otras/index.html
@@ -0,0 +1,181 @@
+---
+title: Otras macros
+slug: MDN/Structures/Macros/Otras
+tags:
+  - Macros
+  - Referencia
+translation_of: MDN/Structures/Macros/Other
+---
+<div>{{MDNSidebar}}</div>
+
+<p>A diferencia de las macros enumeradas en {{web.link("/es/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros", "Macros usadas comúnmente")}}, las macros documentadas en este artículo se usan con poca frecuencia o solo en contextos específicos, o están en desuso.</p>
+
+<h2 id="Contextos_especiales">Contextos especiales</h2>
+
+<p>Estas macros se utilizan solo con contextos particulares, como una referencia de API específica.</p>
+
+<ul>
+ <li>{{TemplateLink("jsapixref")}} enlaza a una página en la {{web.link("/es/docs/SpiderMonkey/JSAPI_Reference", "Referencia de JSAPI")}}.</li>
+ <li>{{TemplateLink("XPCOMxref")}} enlaza a una página en la referencia de XPCOM. Puedes especificar el nombre de una función, clase, componente o interfaz XPCOM (aunque para esta última, en su lugar, debes usar {{TemplateLink("interface")}}). Esta macro encontrará la página y creará un enlace a ella, donde sea que esté en el subárbol de la referencia de XPCOM.</li>
+ <li>{{TemplateLink("npapi")}} enlaza a la {{web.link("/es/docs/Gecko_Plugin_API_Reference", "Referencia de la API del complemento Gecko")}}.</li>
+ <li>{{TemplateLink("interface")}} se puede usar cuando se vincula a interfaces XPCOM.<br>
+  Ejemplo: <code>\{{interface ("nsIIOService")}}</code> da como resultado: {{Interface("nsIIOService")}}.</li>
+ <li>{{TemplateLink("ifmethod")}} e {{TemplateLink("ifattribute")}} te permiten crear un enlace a un método o atributo (respectivamente) en particular en una interfaz de Mozilla que se ha creado usando nuestro {{web.link("/es/docs/MDN/Contribute/Howto/Write_interface_reference_documentation", "formato estándar para la documentación de la interfaz")}}. Por ejemplo, <code>\{\{ifmethod("nsIAutoCompleteSearch", "stopSearch")\}\}</code> aparece como {{ifmethod("nsIAutoCompleteSearch", "stopSearch")}}. Ten en cuenta que para {{TemplateLink("ifattribute")}}, <code>id="..."</code> se debe agregar explícitamente en el destino, ya que los atributos no tienen encabezados.</li>
+ <li>{{TemplateLink("Interwiki")}} facilita la creación de enlaces Interwiki. Actualmente admite enlaces a Wikipedia y Wikimo. El primer parámetro es el nombre de la wiki ("wikipedia" o "wikimo") y el segundo es la ruta del artículo. Por ejemplo, <code>\{\{interwiki("wikipedia", "Firefox")\}\}</code> aparece como {{Interwiki("wikipedia", "Firefox")}}. Esta plantilla automáticamente detecta el idioma de la página y lo dirige al mismo idioma en Wikipedia, por ejemplo.</li>
+ <li>{{TemplateLink("RFC")}} crea un enlace al RFC especificado, dado su número. La sintaxis es simplemente: <code>\{\{RFC(número)\}\}</code>. Por ejemplo, <code>\{\{RFC(2616)\}\}</code> se convierte en {{RFC(2616)}}.</li>
+</ul>
+
+<h3 id="Componentes_de_la_página_destino">Componentes de la página destino</h3>
+
+<p>Tenemos una variedad de macros que se pueden utilizar para generar automáticamente el contenido de las páginas destino. Aquí están.</p>
+
+<h4 id="Listas_de_subpáginas">Listas de subpáginas</h4>
+
+<ul>
+ <li>{{TemplateLink("ListSubpages")}} genera una lista desordenada de enlaces a todos los hijos inmediatos de la página actual; útil para generar automáticamente tablas de contenido para conjuntos de documentación.</li>
+ <li>{{TemplateLink("LandingPageListSubpages")}} genera una lista de definición de dos columnas de todas las subpáginas inmediatas de la página actual, con sus títulos como {{HTMLElement("dt")}} y su resumen SEO como {{HTMLElement("dd")}}. Esto facilita la generación automática de páginas destino razonablemente atractivas.</li>
+ <li>{{TemplateLink("NavListWithPrioritizedPages")}} genera una lista ordenada formateada correctamente para su uso en una zona de barra de navegación lateral (o enlaces rápidos). Como entrada, puedes especificar cero o más enlaces amigables de página que se deben sacar de la lista principal y, en su lugar, insertarse en la parte superior de la lista, en el orden dado. Todas las páginas restantes se colocan alfabéticamente en la lista. Se incluye un nivel de subpáginas.</li>
+ <li>{{TemplateLink("APIListAlpha")}} crea una lista de las subpáginas de la página actual, formateada como una lista de términos de la API, dividida por la primera letra. Hay tres parámetros. El primero es 0 si deseas incluir todas las subpáginas de nivel superior o 1 para omitir las subpáginas con "." en sus nombres. El segundo y el tercero te permiten agregar texto para mostrar como parte del nombre en cada enlace. Esto se puede usar para agregar "&lt;" y "&gt;" para los enlaces de elementos, o para agregar "()" al final de las listas de nombres de métodos.</li>
+ <li>{{TemplateLink("SubpagesWithSummaries")}} construye una lista de definiciones de todos los hijos inmediatos de la página actual. No se ha realizado ningún otro formateo. Puedes obtener una lista de dos columnas preparada para usar como página destino de varias columnas mediante {{TemplateLink("LandingPageListSubpages")}}.</li>
+</ul>
+
+<h3 id="Enlaces_rápidos">Enlaces rápidos</h3>
+
+<p>Tenemos algunas macros diseñadas específicamente para crear {{web.link("/es/docs/MDN/Contribute/Style_guide/Quicklinks", "enlaces rápidos")}}:</p>
+
+<ul>
+ <li>La macro {{TemplateLink("MakeSimpleQuicklinks")}} crea una lista plana de enlaces en el cuadro de enlaces rápidos. Simplemente dale un conjunto de rutas a las páginas destino como argumentos de entrada. El texto de cada enlace es el título de la página y cada enlace tiene una información sobre herramientas derivada del resumen de la página.</li>
+ <li>{{TemplateLink("QuickLinksWithSubpages")}} crea un conjunto de enlaces rápidos compuestos por las páginas debajo de la página actual (o la página especificada, si se proporciona una). En total, se generan hasta dos niveles de profundidad.</li>
+</ul>
+
+<h2 id="Usadas_con_poca_frecuencia">Usadas con poca frecuencia</h2>
+
+<ul>
+ <li id="Template.3Aoutdated">{{TemplateLink("outdated")}} se puede usar para marcar páginas que se sabe que están (o que podrían estar) horriblemente desactualizadas. La plantilla va seguida de un parámetro opcional, que se puede utilizar para proporcionar detalles. Por ejemplo: <code>\{\{outdated("Se actualizó por última vez en 1999")\}\}</code> te da esto: {{outdated("Se actualizó por última vez en 1999.")}}</li>
+ <li>{{TemplateLink("disambig")}} se usa en las pocas páginas de desambiguación que tenemos. No utilices esta macro en las páginas de desambiguación del glosario; en su lugar, utiliza la macro {{TemplateLink("GlossaryDisambiguation")}}.</li>
+ <li>{{TemplateLink("block-title")}} se puede utilizar para crear texto en negrita que visualmente sirve como título para un bloque en una página, no aparece en la tabla de contenido generada automáticamente y puede actuar como un enlace para apuntar tal como lo hacen los encabezados. La sintaxis es: <code>\{\{block-title(<em>título</em>)\}\}</code>, donde <code><em>título</em></code> es lo que quieras que se muestre. <code><em>título</em></code> también sirve como destino para los enlaces a la sección que estás titulando. {{TemplateLink("block-title")}} está diseñado para usarse en titulación {{anch("Plantilla: nota al margen")}}, tablas, imágenes y bloques de código, particularmente en lugares a los que te referirás en el artículo más de una vez o en lugares no cercanos al artículo en sí mismo.</li>
+ <li>{{TemplateLink("ref")}} y {{TemplateLink("endnote")}} se pueden utilizar para implementar notas a pie de página en los artículos. El "número" de la nota al pie se crea usando <code>\{\{ref("algo")\}\}</code>, dónde <code><em>algo</em></code> debería ser una palabra descriptiva adecuada para todo lo que se menciona en la nota al pie. Luego, al final del documento, inserta <code>\{\{endnote("algo")\}\} Blah blah, texto para la primera nota al pie</code> para crear una lista numerada para la información de las notas al pie.</li>
+ <li>{{TemplateLink("ReleaseChannelInfo")}} se utiliza para crear el encabezado estándar en la parte superior de las páginas de "Firefox X para desarrolladores" para un determinado canal; se necesitan cuatro parámetros: la versión de Firefox, la versión de Gecko, una cadena que indica una fecha de lanzamiento prevista y el nombre del canal en el que se puede descargar el lanzamiento actualmente.</li>
+ <li>{{TemplateLink("InsertFeedLinkList")}} genera una lista de enlaces de una fuente RSS. Sus parámetros configuran la salida de manera significativa:
+  <ul>
+   <li>URL para el canal</li>
+   <li>Número máximo de entradas para incluir en la salida</li>
+   <li>El nivel de encabezado que se usará para el nombre del canal o 0 para dejar ese encabezado</li>
+   <li>Nombre de la clase que se utilizará al crear la lista; esto se aplicará al elemento {{HTMLElement("ul")}}.</li>
+   <li>Tipo de lista; este es un valor entero. 0 produce una lista de viñetas simple, mientras que 1 genera un encabezado para el título de la página seguido de un párrafo con una línea de autor.</li>
+   <li>El nivel de título que se utilizará para los elementos de la lista cuando se utilice el tipo de lista 1.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Transclusión">Transclusión</h3>
+
+<p>La <strong>transclusión</strong> es la incorporación de parte o la totalidad de una página en otra. Ten cuidado al utilizar esta macro, para asegurarte de que el contenido transcluido tenga sentido en el contexto de la página en la que está incorporado.</p>
+
+<p>{{TemplateLink("page")}} te permite incrustar parte o la totalidad de una página específica en un documento. Acepta cinco parámetros:</p>
+
+<ol>
+ <li>La URI de la página que se va a transcluir. Por ejemplo, "/es/docs/Project:MDN/About".</li>
+ <li>El nombre de la sección dentro de la página que se va a incluir. Esto se puede especificar como la cadena de título o como el ID de un bloque a copiar. Si no se especifica, se transcluye todo el artículo. {{optional_inline}}</li>
+ <li>El número de revisión de la versión de la página que se va a incluir. Esta función no está implementada actualmente, pero permitiría incluir texto de versiones específicas de un artículo. {{unimplemented_inline}}</li>
+ <li>Un valor booleano que indica si se muestra o no el encabezado de la sección de nivel superior que se está transcluyendo. Esto es útil si deseas especificar tu propio título. El valor predeterminado es falso, lo cual significa que el encabezado no se incluye de forma predeterminada. {{optional_inline}}</li>
+ <li>El nivel de título que se utilizará como nivel de título superior. Esto ajusta el primer nivel descubierto más externo del contenido transcluido al número especificado, y todos los demás encabezados correspondientemente. Esto te permite incluir contenido que tiene sus propios títulos, pero ajustarlos para que coincidan con el nivel de título en el que los estás incluyendo. Si no especificas este valor, los títulos no se ajustan. {{unimplemented_inline}}</li>
+</ol>
+
+<h4 id="Ejemplo_sin_título">Ejemplo sin título</h4>
+
+<p>\{{Page("/es/docs/MDN/About", "Acerca de Mozilla")}}</p>
+
+<p>Resultado:</p>
+
+<p>{{Page("/es/docs/MDN/About", "Acerca de Mozilla")}}</p>
+
+<h4 id="Ejemplo_con_encabezado">Ejemplo con encabezado</h4>
+
+<p>\{{Page("/es/docs/MDN/About", "Acerca de Mozilla", 0, 1)}}</p>
+
+<p>Resultado:</p>
+
+<p>{{Page("/es/docs/MDN/About", "Acerca de Mozilla", 0, 1)}}</p>
+
+<h3 id="Creando_nuevas_insignias">Creando nuevas insignias</h3>
+
+<p>También tenemos insignias que no tienen iconos con burbujas. La plantilla genérica para esto es {{TemplateLink("SimpleBadge")}}, que acepta tres parámetros:</p>
+
+<ol>
+ <li>Texto para mostrar en la insignia.</li>
+ <li>Nombre de una clase CSS que se utilizará como fondo de la insignia.</li>
+ <li>(Opcional) Texto para mostrar en una información sobre herramientas al pasar el cursor sobre la insignia.</li>
+</ol>
+
+<h2 id="Desaprobado">Desaprobado</h2>
+
+<p>Estas macros han sido reemplazadas por otras formas de hacer lo mismo y ya no se deberían usar. Si los encuentras en artículos existentes, reemplázalos.</p>
+
+<h3 id="Enlaces">Enlaces</h3>
+
+<ul>
+ <li>La macro {{TemplateLink("anch")}} inserta un enlace a un ancla. <code class="nowiki">\{\{anch("top")\}\}</code> produce <code class="nowiki">&lt;a href="#top"&gt;top&lt;/a&gt;</code> ({{anch("top")}}). También puedes agregar un segundo parámetro que contiene texto de reemplazo para mostrar como texto del enlace. \{{anch("Otras insignias", "puedes usar otras insignias")}} produce este resultado: {{anch("Otras insignias", "puedes usar otras insignias")}}. La idea era crear una plantilla que permitiera vincular fácilmente a otras secciones de un documento. <strong>Reemplazo</strong>: usa el botón de la barra de herramientas de anclaje en la interfaz del editor. <em>Esto realmente no es un "reemplazo" y existe cierta discusión sobre si esto está realmente desaprobado en este momento</em>.</li>
+ <li>La macro {{TemplateLink("SectionOnPage")}} crea una frase que enlaza tanto con el nombre de una sección como con el artículo que contiene esa sección. Por ejemplo, <code>\{{SectionOnPage("/es/docs/Mozilla/Firefox/Releases/21", "Cambios para desarrolladores web")}}</code> genera lo siguiente: <em>{{SectionOnPage("/es/docs/Mozilla/Firefox/Releases/21", "Cambios para desarrolladores web")}}</em>.</li>
+ <li>La macro {{TemplateLink("manch")}} inserta un enlace a un método dentro de la interfaz actual; esto está destinado únicamente para su uso en las páginas de documentación de la interfaz. <code>\{\{manch("foo")\}\}</code> produce <code>&lt;code&gt;&lt;a href="ruta/actual#foo"&gt;foo()&lt;/a&gt;&lt;/code&gt;</code> ({{manch("foo")}}).</li>
+ <li>La macro {{TemplateLink("Link")}} inserta un enlace a la página especificada en MDN, usando el título de la página como la cadena visible para hacer clic, y la información sobre herramientas extraída del resumen SEO de la página.</li>
+ <li>La macro {{TemplateLink("LinkItem")}} inserta un enlace a una URL especificada, con el texto indicado como la cadena visible para hacer clic. El enlace automáticamente recoge como información sobre herramientas el resumen de la página destino. Esto difiere de {{TemplateLink("Link")}} en que debe especificar el título.</li>
+ <li>La macro {{TemplateLink("LinkItemDL")}} inserta un enlace a una URL especificada, con el texto indicado como {{HTMLElement("dt")}} que también es el enlace. El elemento {{HTMLElement("dd")}} contiene el resumen de la página especificada.</li>
+ <li>{{TemplateLink("funcref")}} crea enlaces a funciones globales (generalmente de C++) documentadas en páginas de nivel superior. Sin embargo, estas páginas ya no se crean en el nivel superior de MDN.</li>
+ <li>{{TemplateLink("Pref")}} inserta un enlace a la entrada en {{web.link("/es/docs/Mozilla/Preferences/Preference_reference", "Referencia de preferencia")}} para la preferencia especificada.</li>
+ <li>{{TemplateLink("spec")}} inserta un enlace a una especificación. <strong>Reemplazo</strong>: utiliza {{TemplateLink("spec2")}} o {{TemplateLink ("SpecName")}} en su lugar.</li>
+ <li>{{TemplateLink("source")}} te permite vincular a un archivo de código fuente de Mozilla sin tener que escribir una URL MXR larga usando esta sintaxis: <code>\{\{source("browser/Makefile.in")\}\}</code>. Esto te da: {{source("browser/Makefile.in")}}. El texto del enlace es la ruta proporcionada; si deseas un texto diferente, proporciona un segundo parámetro, así: <code>\{\{source("browser/Makefile.in", "the browser/Makefile.in")\}\}</code> , que produce {{source("browser/Makefile.in", "the browser/Makefile.in")}}. Ten en cuenta que el enlace será a la última versión del archivo en código de última generación.</li>
+ <li>{{TemplateLink("source_cvs")}} funciona igual que {{TemplateLink("source")}}, excepto que enlaza con {{web.link("/es/docs/Developer_Guide/Source_Code/CVS", "repositorio CVS")}} en lugar del más nuevo {{web.link("/es/docs/mozilla-central", "mozilla-central")}} uno.</li>
+ <li>{{TemplateLink("LXRSearch")}} se puede utilizar para crear una URL de búsqueda LXR.</li>
+</ul>
+
+<h3 id="Ejemplos_de_código">Ejemplos de código</h3>
+
+<p>Las siguientes macros se usaron antes de la implementación del {{web.link("/es/docs/MDN/Contribute/Structures/Live_samples", "sistema de ejemplo en vivo")}} integrado en Kuma, y se deben reemplazar por usos de {{TemplateLink("EmbedLiveSample")}} o {{TemplateLink("LiveSampleLink")}}.</p>
+
+<ul>
+ <li>{{TemplateLink("LiveSample")}} te permite crear un botón que se vincule a un archivo de ejemplo; estos ejemplos se enviaron a <a class="link-mailto" href="mailto:eshepherd@mozilla.com" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a> para su carga. Estos se utilizaron en las páginas de referencia cuando se vinculan a páginas de muestra independientes y en vivo. La plantilla acepta un parámetro, el nombre del archivo HTML al que enlazar.</li>
+ <li>{{TemplateLink("CSSLiveSample")}} te permite crear un botón que se vincule a una muestra en la Referencia CSS; estos ejemplos se enviaron a <a class="link-mailto" href="mailto:eshepherd@mozilla.com" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a> para su carga. Estos se utilizaron en las páginas de referencia de CSS cuando se vinculan a páginas de ejemplo independientes y en vivo. La plantilla acepta un parámetro, el nombre del archivo HTML al que enlazar.</li>
+ <li>{{TemplateLink("DOMLiveSample")}} te permite crear un botón que se vincule a una ejemplo en la Referencia DOM; estos ejemplos se enviaron a <a class="link-mailto" href="mailto:eshepherd@mozilla.com" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a> para su carga. Estas se utilizaron en las páginas de referencia DOM al vincular a páginas de ejemplos independientes y en vivo. La plantilla acepta un parámetro, el nombre del archivo HTML al que enlazar.</li>
+ <li>{{TemplateLink("HTMLLiveSample")}} te permite crear un botón que enlace a una ejemplo en la Referencia HTML; estos ejemplos se enviaron a <a class="link-mailto" href="mailto:eshepherd@mozilla.com" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a> para su carga. Estos se utilizaron en páginas de referencia HTML al vincular a páginas de ejemplos independientes y en vivo. La plantilla acepta un parámetro, el nombre del archivo HTML al que enlazar.</li>
+ <li>{{TemplateLink("SVGLiveSample")}} te permite crear un botón que se vincule a un ejemplo en la Referencia DOM; estos ejemplos se enviaron a <a class="link-mailto" href="mailto:eshepherd@mozilla.com" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a> para su carga. Estos se utilizaron en las páginas de referencia SVG al vincular a páginas de ejemplos independientes y en vivo. La plantilla acepta un parámetro, el nombre del archivo HTML al que enlazar.</li>
+ <li>{{TemplateLink("JSFiddleLink")}} te permite crear fácilmente un botón que enlace a un ejemplo en el <a class="external" href="http://jsfiddle.net" title="http://jsfiddle.net/">sitio web jsFiddle</a>. Estos <strong>NO</strong> se deben usar para reemplazar los ejemplos en línea o los ejemplos cargados por MDC, sino para ofrecer acceso a ejemplos secundarios con los que los lectores pueden experimentar. La plantilla acepta un parámetro, la etiqueta de identificación del elemento jsFiddle a vincular.</li>
+</ul>
+
+<h3 id="Organizacional">Organizacional</h3>
+
+<ul>
+ <li>{{TemplateLink("LockedPage")}} inserta una barra de marcas en la página que proporciona una explicación de por qué una página está bloqueada. Esta macro está obsoleta porque Kuma no admite el bloqueo de páginas.</li>
+ <li>{{TemplateLInk("jsapi_ref_header")}} se utilizó para crear rutas de navegación para la JSAPI referenciada; esto ahora lo hace Kuma, no una macro.</li>
+</ul>
+
+<h3 id="Formateo">Formateo</h3>
+
+<ul>
+ <li>{{TemplateLink("Note")}} inserta un bloque de "nota" con un formato especial en el texto del artículo. Esto tiene la intención de resaltar un hecho interesante o importante. <strong>Reemplazo</strong>: Usa el estilo <code>Note box</code> en la barra de herramientas del Editor.</li>
+ <li>{{TemplateLink("warning")}} inserta un bloque de "advertencia" con un formato especial. {{TemplateLink("WarningStart")}} y {{TemplateLink("WarningEnd")}} definen el inicio y el final del bloque de advertencia que debe contener otras llamadas de macro. <strong>Reemplazo</strong>: Usa el estilo <code>Warning box</code> en la barra de herramientas del Editor.</li>
+</ul>
+
+<h3 id="Indicadores_de_versión">Indicadores de versión</h3>
+
+<p>Las siguientes macros están en desuso porque esta información debería estar contenida en el artículo de la tabla de compatibilidad de navegadores.</p>
+
+<ul>
+ <li>{{TemplateLink("gecko_minversion_header")}} indica la versión mínima de Gecko para una función.</li>
+ <li>{{TemplateLink("Gecko")}} inserta el texto "Gecko <em>número de versión</em>" en el texto, pero agrega una información sobre herramientas que, cuando el usuario pasa el mouse sobre él, muestra las versiones correspondientes de Firefox, Thunderbird y SeaMonkey.</li>
+ <li>{{TemplateLink("fx_minversion_header")}} y {{TemplateLink("fx_minversion_section")}} indican la versión mínima de Firefox para una función.</li>
+ <li>{{TemplateLink("tb_minversion_header")}}, {{TemplateLink("tb_minversion_section")}} y {{TemplateLink("tb_minversion_inline")}} indican la versión mínima de Thunderbird para una función.</li>
+ <li>{{TemplateLink("js_minversion_header")}} y {{TemplateLink("js_minversion_inline")}} indican la versión mínima de JavaScript para una función.</li>
+ <li>{{TemplateLink("MobileOnlyHeader")}} inserta un cuadro de encabezado "Disponible solo para Firefox móvil". {{TemplateLink("MobileOnlyInline")}} inserta un indicador en línea. Estos indican la versión de Gecko a partir de la cual la interfaz solo está disponible para dispositivos móviles.</li>
+ <li>{{TemplateLink("dom_level")}} indica la versión mínima del DOM para una función.</li>
+ <li>{{TemplateLink("renamed_inline")}} inserta una marca "renombrada" en línea para indicar que se ha cambiado el nombre de una API.</li>
+ <li>{{TemplateLink("unimplemented_inline")}} inserta una marca en línea de "no implementado" para evitar el uso de, por ejemplo, una función, método o propiedad que aún no está implementada. <strong>Reemplazo</strong>: Utiliza la tabla de compatibilidad de navegadores para indicar esta información.</li>
+ <li>{{TemplateLink("unimplemented_inline_webkit")}} inserta una marca de "no implementado" en línea para evitar el uso de, por ejemplo, una función, método o propiedad que aún no está implementada. <strong>Reemplazo</strong>: Utiliza la tabla de compatibilidad de navegadores para indicar esta información.</li>
+ <li>{{TemplateLink("gecko_callout_heading")}} incluye un cuadro de llamada específico de la versión de Gecko.</li>
+ <li>{{TemplateLink("fx_minversion_note")}} crea una nota sobre una versión mínima de Firefox; {{TemplateLink("GeckoMinVersionNoteStart")}} y {{TemplateLink("GeckoMinVersionNoteEnd")}} se pueden usar para envolver texto dentro de un cuadro etiquetado como perteneciente a una versión dada de Gecko y posteriores; especifica la versión como el único parámetro "<code>start</code>" de la macro.</li>
+ <li>{{TemplateLink("tb_minversion_note")}} crea una nota sobre una versión mínima de Thunderbird.</li>
+ <li>{{TemplateLink("js_minversion_note")}} crea una nota sobre una versión mínima de JavaScript.</li>
+ <li>
+  <p>{{TemplateLink("h1_gecko_minversion")}}, {{TemplateLink("h2_gecko_minversion")}} y {{TemplateLink("h3_gecko_minversion")}} te permiten insertar encabezados (h1, h2 y h3) que se incluyen a la derecha al final de la línea, una insignia que indica la versión de Gecko (y las versiones correspondientes de la aplicación) a la que se aplica la sección.</p>
+ </li>
+</ul>
diff --git a/files/es/mdn/structures/tablas_de_compatibilidad/index.html b/files/es/mdn/structures/tablas_de_compatibilidad/index.html
new file mode 100644
index 0000000000..cd9a5097d2
--- /dev/null
+++ b/files/es/mdn/structures/tablas_de_compatibilidad/index.html
@@ -0,0 +1,476 @@
+---
+title: >-
+  Tablas de compatibilidad y repositorio de datos de compatibilidad del
+  navegador (DCN)
+slug: MDN/Structures/Tablas_de_compatibilidad
+tags:
+  - Estructuras
+  - Guía
+  - Meta MDN
+  - compatibilidad con el navegador
+  - tablas de compatibilidad
+translation_of: MDN/Structures/Compatibility_tables
+---
+<div>{{MDNSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">MDN tiene un formato estándar para tablas de compatibilidad para nuestra documentación web abierta; es decir, documentación de tecnologías como DOM, HTML, CSS, JavaScript, SVG, etc., que se comparte en todos los navegadores.</span> Este artículo es una guía de "introducción" sobre cómo agregar y mantener la base de datos a partir de la cual se generan las tablas de compatibilidad, además de cómo integrar las tablas en artículos.</p>
+
+<p class="summary">Para obtener documentación más avanzada, así como los últimos cambios en los procesos y los esquemas JSON utilizados para representar los datos, échale un vistazo al repositorio de datos de la <a href="https://github.com/mdn/browser-compat-data/blob/master/docs/contributing.md">guía para colaboradores</a>, así como a la <a href="https://github.com/mdn/browser-compat-data/blob/master/docs/data-guidelines.md">guía de directrices de datos</a>.</p>
+
+<p class="summary">Si tienes preguntas o descubres problemas, compártelos con nosotros en el <a href="https://discourse.mozilla-community.org/c/mdn">foro de discusión de MDN</a>.</p>
+
+<h2 id="Cómo_acceder_al_repositorio_de_datos">Cómo acceder al repositorio de datos</h2>
+
+<p>Los datos se almacenan en un repositorio de GitHub; consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Para acceder a él, necesitas tener una cuenta de GitHub, bifurcar el repositorio de compatibilidad de datos del navegador en tu propia cuenta y luego clonar tu bifurcación en tu máquina local.</p>
+
+<h2 id="Preparándose_para_agregar_los_datos">Preparándose para agregar los datos</h2>
+
+<p>Antes de agregar algunos datos nuevos, te debes asegurar de que tu bifurcación esté actualizada con el repositorio principal (contiene el mismo contenido), crea una nueva rama dentro de tu bifurcación para contener tus adiciones, luego ingresa esa rama en tu clon local para que puedas empezar a trabajar dentro de ella:</p>
+
+<p>Veamos la siguiente sencilla forma de asegurarte de que tu bifurcación esté actualizada:</p>
+
+<h3 id="Agregar_el_repositorio_principal_de_datos_de_compatibilidad_del_navegador_como_remoto">Agregar el repositorio principal de datos de compatibilidad del navegador como remoto</h3>
+
+<p>Ve al clon local de tu bifurcación en tu terminal/línea de comandos, y agrega un control remoto que apunte al repositorio principal (<code>upstream</code>) de esa manera (solo necesitas hacer esto una vez):</p>
+
+<pre class="brush: bash notranslate">git remote add upstream https://github.com/mdn/browser-compat-data.git</pre>
+
+<p>Si no estás seguro de haber hecho esto, puedes verificar qué controles remotos tiene tu repositorio usando</p>
+
+<pre class="brush: bash notranslate">git remote -v</pre>
+
+<h3 id="Actualiza_tu_bifurcación_con_el_contenido_del_remoto">Actualiza tu bifurcación con el contenido del remoto</h3>
+
+<p>Ahora, siempre que desees actualizar tu bifurcación, lo puedes hacer mediante:</p>
+
+<ol>
+ <li>
+  <p>Asegúrate de que estas en la rama <code>master</code>:</p>
+
+  <pre class="brush: bash notranslate">git checkout master</pre>
+ </li>
+ <li>
+  <p>obtén el contenido actualizado del repositorio utilizando lo siguiente:</p>
+
+  <pre class="brush: bash notranslate">git fetch upstream</pre>
+ </li>
+ <li>
+  <p>rebasa el contenido de tu <code>master</code> con el contenido del repositorio principal:</p>
+
+  <pre class="brush: bash notranslate">git rebase upstream/master</pre>
+ </li>
+ <li>
+  <p>empuja estas actualizaciones a tu bifurcación remota usando lo siguiente:</p>
+
+  <pre class="brush: bash notranslate">git push</pre>
+ </li>
+</ol>
+
+<h3 id="Crea_una_nueva_rama_para_hacer_tu_trabajo">Crea una nueva rama para hacer tu trabajo</h3>
+
+<p>A continuación, ve a tu bifurcación remota (estará en <code>https://github.com/<em>tu-nombre-de-usuario</em>/browser-compat-data</code>) y crea una nueva rama para almacenar tus cambios para esta adición de datos. Esto lo puedes hacer mediante:</p>
+
+<ol>
+ <li>Un clic en el botón "Rama: Master".</li>
+ <li>Ingresa un nuevo nombre para la rama en el campo de texto "Buscar o crear una rama...".</li>
+ <li>Presiona el botón resultante "Crear rama <em>nombre-de-rama</em> desde Master".</li>
+</ol>
+
+<p>Por ejemplo, si quisieras agregar datos para la API WebVR, crearías una rama llamada algo así como "webvr".</p>
+
+<h3 id="Cambia_a_la_nueva_rama">Cambia a la nueva rama</h3>
+
+<p>En este punto, regresa a tu terminal/línea de comando y actualiza el clon local de tu bifurcación para incluir tu nueva rama usando el siguiente comando:</p>
+
+<pre class="brush: bash notranslate">git pull</pre>
+
+<p>Ahora cambia a tu nueva rama usando esto:</p>
+
+<pre class="brush: bash notranslate">git checkout <em>nombre-de-rama</em></pre>
+
+<p>¡Ahora debería estar listo para comenzar a agregar tus datos!</p>
+
+<h2 id="Añadir_los_datos">Añadir los datos</h2>
+
+<p>Para agregar los datos, debes crear un nuevo archivo o archivos para almacenar tus datos de compatibilidad. Los archivos que necesitas crear difieren, según la tecnología en la que estés trabajando:</p>
+
+<ul>
+ <li><strong><a href="/es/docs/Web/HTML">HTML</a>:</strong> Un archivo por elemento HTML, contenido en <a href="https://github.com/mdn/browser-compat-data/tree/master/html/elements">browser-compat-data/html/elements</a>. El archivo se debe denominar con el nombre del elemento, todo en minúsculas, p. ej. <code>div.json</code>.</li>
+ <li><strong><a href="/es/docs/Web/CSS">CSS</a>:</strong>Un archivo por propiedad CSS o selector, contenido en el directorio apropiado (consulta <a href="https://github.com/mdn/browser-compat-data/tree/master/css">browser-compat-data/css</a>). El archivo debe tener el nombre de la función, todo en minúsculas, p. ej. <code>background-color.json</code> o <code>hover.json</code>.</li>
+ <li><strong><a href="/es/docs/Web/JavaScript">JS</a>:</strong> Un archivo por objeto JS, contenido en <a href="https://github.com/mdn/browser-compat-data/tree/master/javascript/builtins">browser-compat-data/javascript/builtins</a>. El archivo se debe denominar con el nombre exacto del objeto, conservando la envoltura, p. ej. <code>Date.json</code> o <code>InternalError.json</code>.</li>
+ <li><strong><a href="/es/docs/Web/API">APIs</a>:</strong> Un archivo por interfaz contenida en la API, ponlo en <a href="https://github.com/mdn/browser-compat-data/tree/master/api">browser-compat-data/api</a>. Cada archivo se debe denominar con el nombre exacto de la interfaz, conservando la envoltura, p. ej. La API de WebVR tiene <code>VRDisplay.json</code>, <code>VRDisplayCapabilities.json</code>, etc.</li>
+</ul>
+
+<p>Cada archivo que crees debe seguir el patrón definido en el esquema contenido en nuestro repositorio; puedes ver la <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md">descripción detallada del esquema aquí</a>.</p>
+
+<h3 id="Estructura_básica_de_datos_de_compatibilidad">Estructura básica de datos de compatibilidad</h3>
+
+<p>Veamos un ejemplo. Los archivos JSON de propiedades CSS, por ejemplo, necesitan la siguiente estructura básica:</p>
+
+<pre class="brush: json notranslate">{
+  "css": {
+    "properties": {
+      "border-width": {
+        "__compat": {
+          ...
+        }
+      }
+    }
+  }
+}</pre>
+
+<p>Tienes el objeto <code>css</code>, dentro del cual hay un objeto <code>properties</code>. Dentro del objeto <code>properties</code>, necesitas un miembro para cada una de las características específicas para las que deseas definir los datos de compatibilidad. Cada uno de estos miembros tiene un miembro <code>__compat</code>, dentro del cual van los datos reales.</p>
+
+<p>Los datos anteriores se encuentran en el archivo: <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a> compáralo con la <a href="/es/docs/Web/CSS/border-width#Browser_compatibility">tabla de soporte de <code>border-width</code> representada en MDN</a>.</p>
+
+<p>Otros tipos de características funcionan de la misma manera, pero con diferentes nombres de objeto:</p>
+
+<ul>
+ <li>Los selectores de CSS funcionan básicamente de la misma manera que las propiedades de CSS, excepto que la estructura del objeto de nivel superior es <code>css.selectors</code> en lugar de <code>css.properties</code>. Consulta <a href="https://github.com/mdn/browser-compat-data/blob/master/css/selectors/cue.json">cue.json</a> para ver un ejemplo.</li>
+ <li>Los datos HTML funcionan básicamente de la misma manera, excepto que la estructura del objeto de nivel superior es <code>html.elements</code>. Consulta <a href="https://github.com/mdn/browser-compat-data/blob/master/html/elements/article.json">article.json</a> para ver un ejemplo.</li>
+ <li>La estructura del objeto de nivel superior para los objetos incorporados de JS es <code>javascript.builtins</code>; consulta <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/builtins/Array.json">Array.json</a> para ver un ejemplo.</li>
+</ul>
+
+<div>
+<p>En páginas HTML, CSS y JS, normalmente solo necesitarás una función. Las interfaces de API funcionan de forma ligeramente diferente — siempre tienen varias subcaracterísticas (consulta {{anch("Sub-features", "Subcaracterísticas")}}, a continuación).</p>
+
+<h3 id="Estructura_básica_dentro_de_una_característica">Estructura básica dentro de una característica</h3>
+
+<p>Dentro de un miembro de función <code>__compat</code>, debes incluir los siguientes miembros:</p>
+
+<ul>
+ <li><code>mdn_url</code>: contiene la URL de la página de referencia para esta característica en MDN. Ten en cuenta que esto se debe escribir sin el directorio de configuración regional dentro, p. ej. <code>/docs/...</code> no <code>/en-US/docs/...</code>. Esto lo agrega la macro cuando los datos se colocan en la página, con fines de localización.</li>
+ <li><code>support</code>: contiene miembros que representan la información de soporte del navegador para esta característica en todos los diferentes navegadores que queremos informar.</li>
+ <li><code>status</code>: contiene miembros que informan sobre el estado de seguimiento de estándares de esta característica.</li>
+</ul>
+
+<p>Los nombres de los miembros del navegador se definen en el esquema (consulta <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#browser-identifiers">identificadores del navegador</a>). Debes utilizar la lista completa de identificadores definidos actualmente. Si deseas agregar otro navegador, habla con nosotros primero, ya que esto podría tener un impacto de gran alcance y no se debe hacer sin pensarlo detenidamente.</p>
+
+<p>En un archivo de datos de compatibilidad del navegador básico, solo necesitarás incluir "<code>version_added</code>" dentro de los miembros del identificador del navegador (cubriremos {{anch("Advanced cases", "Casos avanzados")}} más adelante). Los diferentes valores que posiblemente quieras incluir son los siguientes:</p>
+
+<ul>
+ <li>Un número de versión: Si conoces la versión exacta en la que un navegador comenzó a admitir tu característica, usa una cadena que represente el número, p. ej. <code>"47"</code>.</li>
+ <li><code>true</code>: Si un navegador admite una característica, pero no conoces el número de versión exacto, utiliza el valor <code>true</code>.</li>
+ <li><code>false</code>: Si un navegador no admite una característica, utiliza el valor <code>false</code>.</li>
+ <li><code>null</code>: Si no sabes si un navegador admite una característica o no, utiliza el valor <code>null</code>.</li>
+</ul>
+
+<p>Dentro del miembro <code>status</code>, incluirás tres submiembros:</p>
+
+<ul>
+ <li><code>experimental</code>: Se debe establecer en <code>true</code> si la característica es <a href="/es/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental">experimental</a> o <code>false</code> en caso contrario.</li>
+ <li><code>standard_track</code>: Esto se debe establecer en <code>true</code> si una característica está en algún tipo de pista de estándares (comúnmente W3C/WHATWG, pero también hay otros esfuerzos de estándares como Khronos, TC39, etc.) o <code>false</code> de lo contrario.</li>
+ <li><code>deprecated</code>: Se debe establecer en <code>true</code> si la característica está <a href="/es/docs/MDN/Contribute/Guidelines/Conventions_definitions#Deprecated_and_obsolete">desaprobada</a> o <code>false</code> en caso contrario.</li>
+</ul>
+
+<p>Los datos de características de <a href="/es/docs/Web/CSS/border-width#Browser_compatibility"><code>border-width</code></a> (consulta también <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a>) se muestra a continuación como ejemplo:</p>
+
+<pre class="brush: json notranslate">"__compat": {
+  "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width",
+  "support": {
+    "chrome": {
+      "version_added": "1"
+    },
+    "webview_android": {
+      "version_added": "2"
+    },
+    "edge": {
+      "version_added": true
+    },
+    "edge_mobile": {
+      "version_added": true
+    },
+    "firefox": {
+      "version_added": "1"
+    },
+    "firefox_android": {
+      "version_added": "1"
+    },
+    "ie": {
+      "version_added": "4"
+    },
+    "ie_mobile": {
+      "version_added": "6"
+    },
+    "opera": {
+      "version_added": "3.5"
+    },
+    "opera_android": {
+      "version_added": "11"
+    },
+    "safari": {
+      "version_added": "1"
+    },
+    "safari_ios": {
+      "version_added": "3"
+    }
+  },
+  "status": {
+    "experimental": false,
+    "standard_track": true,
+    "deprecated": false
+  }
+}</pre>
+
+<h4 id="Agrega_una_descripción">Agrega una descripción</h4>
+
+<p>Hay un cuarto miembro, opcional, que puede ir dentro del miembro <code>__compat</code> — <code>description</code>. Este se puede utilizar para incluir una descripción legible por humanos de la característica. Únicamente lo debes incluir si es difícil ver cuál es la característica al mirar los datos. Por ejemplo, puede que no sea tan obvio lo que es un constructor al mirar la estructura de datos, por lo que puedes incluir una descripción como esta:</p>
+
+<pre class="brush: json notranslate">{
+  "api": {
+    "AbortController": {
+      "__compat": {
+        ...
+      },
+      "AbortController": {
+        "__compat": {
+          "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController",
+          "description": "&lt;code&gt;AbortController()&lt;/code&gt; constructor",
+          "support": {
+            ...
+          }
+        }
+      }
+
+      ... etc.
+    }
+  }
+}</pre>
+
+<h3 id="Subcaracterísticas">Subcaracterísticas</h3>
+
+<p>En una página donde la tabla de compatibilidad tiene más de una fila, necesitarás varias subcaracterísticas dentro de cada característica para definir la información de cada fila. Esto puede suceder, por ejemplo, cuando tienes el soporte básico para una característica almacenada en una fila, pero luego la característica también tiene una nueva propiedad o tipo de valor que se agregó mucho más tarde en la vida de la especificación y solo se admite en una par de navegadores.</p>
+
+<p>Como ejemplo, consulta los <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/background-color.json">datos de compatibilidad</a> y la <a href="/es/docs/Web/CSS/background-color">página MDN correspondiente</a> para la propiedad <code>background-color</code>. El soporte básico existe dentro del objeto <code>__compat</code> como se explicó anteriormente, luego tienes una fila adicional para el soporte de los navegadores para "canal alfa para valores hexadecimales", que contiene tu propio objeto <code>__compat</code>.</p>
+
+<pre class="brush: json notranslate">{
+  "css": {
+    "properties": {
+      "background-color": {
+        "__compat": {
+          ...
+        },
+        "alpha_ch_for_hex": {
+          "__compat": {
+            ...
+          },
+        }
+      }
+    }
+  }
+}</pre>
+
+<p>Para una API, tienes los dos niveles superiores definidos como <code>api.<em>nombre-de-la-interfaz</em></code>, luego un <code>__compat</code> de nivel superior para definir la compatibilidad general del navegador de la interfaz, luego una subfunción para cada uno de los métodos, propiedades y constructores contenidos dentro de la interfaz. La estructura básica se ve así:</p>
+
+<pre class="brush: json notranslate">{
+  "api": {
+    "VRDisplay": {
+      "__compat": {
+        ...
+      },
+      "cancelAnimationFrame": {
+        "__compat": {
+          ...
+        }
+      },
+      "capabilities": {
+        "__compat": {
+          ...
+        }
+      },
+
+      ... etc.
+
+    }
+  }
+}</pre>
+
+<p>Consulta <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a> para ver un ejemplo completo.</p>
+</div>
+
+<h2 id="Agregar_datos_casos_avanzados">Agregar datos: casos avanzados</h2>
+
+<p>Hay algunas características avanzadas que querrás incluir en los datos de compatibilidad del navegador. El objetivo de esta sección es enumerar los más comunes, proporcionando un ejemplo de cada uno para mostrar cómo los puedes implementar en tus propios datos de compatibilidad.</p>
+
+<h3 id="Incluyendo_una_nota_a_pie_de_página">Incluyendo una nota a pie de página</h3>
+
+<p>A menudo, las tablas de compatibilidad incluirán notas a pie de página relacionadas con ciertas entradas que explican detalles útiles o comportamientos extraños que los desarrolladores encontrarán útiles. Como ejemplo, la entrada de Chrome para Android para {{domxref("VRDisplay.capabilities")}} (consulta también <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a>) (en el momento de escribir este artículo) tenía una nota al pie de página "Actualmente solo es compatible con Google Daydream". Para incluir esto en los datos de capacidades, agregamos un submiembro "<code>notes</code>" dentro del submiembro "chrome_android" relevante; se vería así:</p>
+
+<pre class="brush: json notranslate">"chrome_android": {
+  "version_added": true,
+  "notes": "Currently supported only by Google Daydream."
+}</pre>
+
+<h3 id="Incluyendo_un_prefijo_de_proveedor">Incluyendo un prefijo de proveedor</h3>
+
+<p>Si una característica es compatible con un prefijo de proveedor en uno o más navegadores, querrás dejarlo en claro en los datos de compatibilidad del navegador. imagina que tienes una característica que es compatible con un prefijo <code>-moz-</code> en Firefox. Para especificar esto en los datos de compatibilidad, debes agregar un submiembro "<code>prefix</code>" dentro del submiembro "firefox" relevante. Y se vería así:</p>
+
+<pre class="brush: json notranslate">"firefox": {
+  "version_added": true,
+  "prefix": "-moz-"
+}</pre>
+
+<h3 id="Incluyendo_preferencias_o_banderas_del_navegador">Incluyendo preferencias o banderas del navegador</h3>
+
+<p>Algunas características pueden ser compatibles con un navegador, pero son experimentales y están desactivadas de forma predeterminada. Si un usuario quiere jugar con esta característica, debe activarla usando una preferencia/bandera.</p>
+
+<p>Para representar esto en los datos de compatibilidad, debes agregar el submiembro "<code>flags</code>" dentro del submiembro del identificador del navegador relevante. El valor de "<code>flags</code>" es un arreglo de objetos, cada uno de los cuales contiene tres miembros:</p>
+
+<ul>
+ <li><code>type</code>: Qué tipo de bandera o preferencia es. El valor más común es "<code>preference</code>", que se establece dentro del navegador (por ejemplo, usando <code>about: config</code> en Firefox, o <code>chrome://flags</code> en Chrome), pero a veces también puedes usar un valor de "<code>compile_flag</code>", que es un conjunto de preferencias cuando se construye la compilación del navegador.</li>
+ <li><code>name</code>: Esta es una cadena que representa el nombre de la preferencia que necesita tener un valor establecido. Por ejemplo, "Habilitar funciones experimentales de la plataforma web" es una preferencia que existe en Chrome, que se encuentra en <code>chrome://flags</code>.</li>
+ <li><code>value_to_set</code>: Esta es una cadena que representa el valor que se debe establecer en la preferencia, por ejemplo, "<code>true</code>".</li>
+</ul>
+
+<p>Entonces, para agregar una preferencia/bandera al soporte de Chrome para una característica, harías algo como esto:</p>
+
+<pre class="brush: json notranslate">"chrome": {
+  "version_added": "50",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "Enable Experimental Web Platform Features",
+      "value_to_set": "true"
+    }
+  ]
+},</pre>
+
+<p>Si una característica está detrás de dos o más banderas, puedes agregar objetos adicionales al arreglo "<code>flags</code>", como en este caso, por ejemplo:</p>
+
+<pre class="brush: json notranslate">"firefox": {
+  "version_added": "57",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "dom.streams.enabled",
+      "value_to_set": "true"
+    },
+    {
+      "type": "preference",
+      "name": "javascript.options.streams",
+      "value_to_set": "true"
+    }
+  ]
+},</pre>
+
+<h3 id="Incluyendo_una_versión_donde_se_eliminó_el_soporte">Incluyendo una versión donde se eliminó el soporte</h3>
+
+<p>A veces, una característica se agregará en una determinada versión del navegador, pero luego se eliminará nuevamente cuando la característica esté obsoleta. Esto se puede representar fácilmente usando el submiembro "<code>version_removed</code>", que toma como valor una cadena que representa el número de versión en el que se eliminó. Por ejemplo:</p>
+
+<pre class="brush: json notranslate">"firefox": {
+  "version_added": "35",
+  "version_removed": "47",
+},</pre>
+
+<h3 id="Incluyendo_múltiples_puntos_de_soporte_para_la_misma_entrada_del_navegador">Incluyendo múltiples puntos de soporte para la misma entrada del navegador</h3>
+
+<p>A veces, querrás agregar varios puntos de datos de soporte para el mismo navegador dentro de la misma característica.</p>
+
+<p>Como ejemplo, la propiedad {{cssxref("text-align-last")}} (ve también <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/text-align-last.json">text-align-last.json</a>) se agregó a Chrome en la versión 35, compatible con una pref.</p>
+
+<p>El soporte mencionado anteriormente se eliminó en la versión 47; también en la versión 47, se agregó soporte para <code>text-align-last</code> habilitado de manera predeterminada.</p>
+
+<p>Para incluir estos dos puntos de datos, puedes hacer que el valor del submiembro "<code>chrome</code>" sea un arreglo que contenga dos objetos de información de soporte, en lugar de un solo objeto de información de soporte:</p>
+
+<pre class="brush: json notranslate">"chrome": [
+  {
+    "version_added": "47"
+  },
+  {
+    "version_added": "35",
+    "version_removed": "47",
+    "flags": [
+      {
+        "type": "preference",
+        "name": "Enable Experimental Web Platform Features",
+        "value_to_set": "true"
+      }
+    ]
+  }
+],</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong> Debes colocar el punto de soporte más actual o importante primero en el arreglo — esto hace que los datos sean más fáciles de leer para las personas que solo desean escanearlos para obtener la información más reciente.</p>
+</div>
+
+<h3 id="Incluyendo_un_nombre_alternativo">Incluyendo un nombre alternativo</h3>
+
+<p>Ocasionalmente, los navegadores admitirán una característica con un nombre diferente al definido en su especificación. Esto se podría deber, por ejemplo, a que un navegador agregó soporte experimental para una característica antes, y luego el nombre cambió antes de que se estabilizara la especificación.</p>
+
+<p>Para incluir un caso de este tipo en los datos de compatibilidad del navegador, puedes incluir un punto de información de soporte que especifique el nombre alternativo dentro de un miembro "<code>alternative_name</code>".</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong> Es posible que el nombre alternativo no sea un alias exacto — posiblemente tenga un comportamiento diferente al de la versión estándar.</p>
+</div>
+
+<p>Veamos un ejemplo. La propiedad {{cssxref("border-top-right-radius")}} (consulta también <a href="https://github.com/mdn/browser-compat-data/blob/2a0cc3f6bb17aa4345441bed47a059dffd847793/css/properties/border-top-right-radius.json">border-top-right-radius.json</a>) era compatible con Firefox:</p>
+
+<ul>
+ <li>Desde la versión 4 en adelante con el nombre estándar <code>border-top-right-radius</code>.</li>
+ <li>A partir de la versión 49 con un prefijo <code>-webkit-</code>, por motivos de compatibilidad con el navegador.</li>
+ <li>Desde la versión 1 en adelante con el nombre alternativo <code>-moz-border-radius-topright</code>. La compatibilidad con este alias se eliminó en la versión 12.</li>
+</ul>
+
+<p>Para representar esto en los datos, usamos el siguiente JSON:</p>
+
+<pre class="brush: json notranslate">"firefox": [
+  {
+    "version_added": "4",
+    "notes": "Antes de Firefox 50.0, los estilos de borde de las esquinas redondeadas siempre se representaban como si <code>border-style</code> fuera sólido. Esto se ha solucionado en Firefox 50.0."
+  },
+  {
+    "prefix": "-webkit-",
+    "version_added": "49",
+    "notes": "De Firefox 44 a 48, el prefijo <code>-webkit-</code> estaba disponible con la preferencia <code>layout.css.prefixes.webkit</code>. A partir de Firefox 49, la preferencia predeterminada es &lt;code&gt;true&lt;/code&gt;."
+  },
+  {
+    "alternative_name": "-moz-border-radius-topright",
+    "version_added": "1",
+    "version_removed": "12"
+  }
+],</pre>
+
+<h2 id="Empujar_un_cambio_de_nuevo_al_repositorio_principal">Empujar un cambio de nuevo al repositorio principal</h2>
+
+<p>Una vez que hayas terminado de agregar tus datos de compatibilidad, primero debes probarlos usando los siguientes comandos:</p>
+
+<ul>
+ <li><code>npm run lint</code> — prueba todos los datos de compatibilidad para asegurarse de que el JSON sea válido y esté escrito en el estilo correcto, por ejemplo, sangría correcta, sin comas, etc. Imprimirá una larga lista de nombres de archivos y resultados de pruebas; si se encuentra un error, el linter arrojará un error en el archivo en el que se encuentra, brindándote útil información de depuración como número de línea, mensaje de error, etc.</li>
+ <li><code>npm run show-errors</code> — valida el JSON con el esquema de datos y resalta errores como el uso de números de versión de navegador no válidos.</li>
+</ul>
+
+<p>Si se ve bien, debes confirmarlo y volver a colocarlo en tu bifurcación remota en GitHub. Lo puedes hacer fácilmente en tu terminal con comandos como estos:</p>
+
+<pre class="brush: bash notranslate">git add .
+git commit -m 'adding compat data for <em>nombre-de-la-característica</em>'
+git push</pre>
+
+<p>Ahora ve a tu bifurcación remota (es decir, <code>https://github.com/<em>tu-nombre-de-usuario</em>/browser-compat-data</code>) y deberías ver información sobre tu inserción en la parte superior de la lista de archivos (debajo de "Tus ramas enviadas recientemente"). Puedes crear una solicitud de extracción (iniciando el proceso de enviarla al repositorio principal) presionando el botón "Comparar y solicitud de extracción" y luego siguiendo las sencillas instrucciones en la siguiente pantalla.</p>
+
+<p>En este punto, solo tienes que esperar. Un revisor examinará tu solicitud de extracción y la fusionará con el repositorio principal, O solicitará que realices cambios. Si se necesitan cambios, realiza los cambios y envíalos nuevamente hasta que se acepte la SE.</p>
+
+<h2 id="Insertar_los_datos_en_páginas_MDN">Insertar los datos en páginas MDN</h2>
+
+<p>Una vez que tus nuevos datos se hayan incluido en el repositorio principal, puedes comenzar a generar dinámicamente tablas de compatibilidad del navegador basadas en esos datos en las páginas MDN usando la macro {{TemplateLink("Compat")}}. Esta toma un solo parámetro, la notación de puntos requerida para recorrer los datos JSON y encontrar el objeto que representa la característica para la que deseas generar la tabla de compatibilidad.</p>
+
+<p>Por encima de la llamada a la macro, para ayudar a otros colaboradores a encontrar su camino, debes agregar un texto oculto que solo sea visible a los colaboradores de MDN en el modo de edición:</p>
+
+<pre class="brush: html notranslate">&lt;div class="hidden"&gt;
+La tabla de compatibilidad de esta página se genera a partir de datos estructurados.
+Si deseas contribuir con los datos, consulta
+&lt;a href="https://github.com/mdn/browser-compat-data"&gt;https://github.com/mdn/browser-compat-data&lt;/a&gt;
+y envíanos una solicitud de extracción.
+&lt;/div&gt;</pre>
+
+<p>Por ejemplo, en la página de encabezado HTTP {{HTTPHeader("Accept-Charset")}}, la llamada a la macro se ve así: <code>\{{Compat("http.headers.Accept-Charset")}}</code>. Si observas el <a href="https://github.com/mdn/browser-compat-data/blob/master/http/headers/accept-charset.json">accept-charset.json</a> en el repositorio, verás cómo esto se refleja en los datos JSON.</p>
+
+<p>Otro ejemplo, la tabla de compatibilidad para la propiedad {{domxref("VRDisplay.capabilities")}} se genera usando <code>\{{Compat("api.VRDisplay.capabilities")}}</code>. La llamada a la macro genera la siguiente tabla (y el correspondiente conjunto de notas):</p>
+
+<hr>
+<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>
+
+<p>{{Compat("api.VRDisplay.capabilities")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong> Los nombres de archivo a menudo coinciden con las etiquetas dadas a las interfaces dentro de las estructuras JSON, pero no siempre es así. Cuando las llamadas a macro generan las tablas, recorren todos los archivos hasta encontrar el JSON relevante para usar, por lo que los nombres de archivo no son críticos. Dicho esto, siempre debes nombrarlos de la manera más intuitiva posible.</p>
+</div>