From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../mdn/structures/ejemplos_ejecutables/index.html | 243 +++++++++++ files/es/mdn/structures/index.html | 16 + .../macros/commonly-used_macros/index.html | 210 +++++++++ files/es/mdn/structures/macros/index.html | 53 +++ files/es/mdn/structures/macros/otras/index.html | 181 ++++++++ .../structures/tablas_de_compatibilidad/index.html | 476 +++++++++++++++++++++ 6 files changed, 1179 insertions(+) create mode 100644 files/es/mdn/structures/ejemplos_ejecutables/index.html create mode 100644 files/es/mdn/structures/index.html create mode 100644 files/es/mdn/structures/macros/commonly-used_macros/index.html create mode 100644 files/es/mdn/structures/macros/index.html create mode 100644 files/es/mdn/structures/macros/otras/index.html create mode 100644 files/es/mdn/structures/tablas_de_compatibilidad/index.html (limited to 'files/es/mdn/structures') 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 +--- +
{{MDNSidebar}}

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 los ejemplos "ejecutables" no son interactivos; sin embargo, aseguran que el output coincida exactamente con el código de ejemplo, porque es generado por este.

+ +

Como funciona el sistema de ejemplos ejecutables

+ +

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:

+ + + +

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")}}).

+ + + +

La macro usa un URL especial para extraer el código de ejemplo: http://url-de-la-pagina$ejemplos/grupo-id, 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.

+ +
+

Nota: Debes usar el macro para presentar el output del ejemplo ejecutable. El editor de MDN quitará cualquier uso directo del elemento <iframe> por motivos de seguridad.

+
+ +

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.

+ +

El sistema de ejemplos ejecutables tiene muchas opciones disponibles, trataremos de ponerlas en terminos simples analizándolas de a poco.

+ +

Macro de ejemplos ejecutables

+ +

Hay dos macros que puedes usar para desplegar ejemplos ejecutables:

+ + + +

En muchos casos, tienes la posibilidad de agregar la macro EmbedLiveSample o la LiveSampleLink 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.

+ +

Macro EmbedLiveSample

+ +
 \{{EmbedLiveSample(ID_del_bloque, longitud, altura, URL_de_captura_de_pantalla, pagina_slug)}}
+ +
+
ID_del_bloque
+
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.
+
longitud
+
La longitud del {{HTMLElement("iframe")}} que se creará, especificada en px. Esto es opcional; una longitud razonable se usará si omites esto. Ten en cuenta que si quieres usar una longitud específica, debes especificar el parámetro de altura también.
+
altura
+
La altura del {{HTMLElement("iframe")}} que se creará, especificada en px. Esto es opcional; una altura razonable se usará si omites esto. Ten en cuenta que si quieres usar una altura específica, debes especificar el parámetro de longitud también.
+
URL_de_captura_de_pantalla
+
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.
+
pagina_slug
+
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.
+
+ +
    +
+ + + +
 \{{LiveSampleLink(ID_del_bloque, texto_del_enlace)}}
+ +
+
ID_del_bloque
+
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.
+
texto_de_enlace
+
Una cadena de texto para mostrar en el enlace.
+
+ +

Usando el sistema de ejemplos ejecutables

+ +

La sección de abajo describe algunos de los casos de uso más comunes para el sistema de ejemplos ejecutables.

+ +

En todos estos casos, para ver los resultados del ejemplo ejecutable, debes hacer clic en Guardar Cambios en el editor (lo que te saca del modo edición). Debido a la reflexiba, naturaleza tipo Inception de los ejemplos ejecutables, la funcionalidad de Previsualizar Cambios no permite desplegar los ejemplos ejecutables.

+ +

Convirtiendo snippets (trozos de código) en ejemplos ejecutables

+ +

Un uso común es tomar snippets existentes que ya se muestran en MDN y convertirlos ejemplos ejecutables.

+ +

Preparar el código

+ +

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.

+ +

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 PRE 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.

+ +
+

Nota: 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.

+
+ +

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.

+ +
+

Nota: 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").

+
+ +

Insertar la macro de ejemplo ejecutable

+ +

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.

+ +
    +
  1. Haz clic en el botón Insert Live Code Sample iFrame en la barra de herramientas; luce así: . Esto abre un cuadro de diálogo para configurar el frame de tu ejemplo ejecutable:                        
    2. +
  2. Bajo Document, 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.)
    3. +
  3. En el menú Sections in Document, selecciona la sección en el artículo que contiene los bloques de código del ejemplo que quieres desplegar.
    4. +
  4. Haz clic en el botón OK para generar e insertar la macro que crea el frame del ejemplo. La macro luce algo así:
    + \{{ EmbedLiveSample('Live_sample_demo') }}
    5. +
+ +

Agregando un nuevo ejemplo ejecutable

+ +

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!

+ +
    +
  1. Haz clic el botón Insert Code Sample Template en la barra de herramientas, luce así: . Esto presenta un simple cuadro de diálogo pidiéndote que nombres a tu ejemplo ejecutable:
    +
    2. +
  2. 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.
    3. +
  3. Haz clic en OK. 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.
    4. +
  4. Elimina cualquier sub-header y bloque de código que no necesites.
    5. +
  5. Ingresa el código que compone tu ejemplo en los bloques de código apropiados.
    6. +
  6. Revisar convenciones
    7. +
+ +

Usando el Buscador de Ejemplos

+ +

Como se mencionó arriba, el buscador de Ejemplos se activa haciendo clic en el ícono Insert Live Code Sample iFrame. 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.

+ +
    +
  1. Campo Document. 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 Negative de la página principal @counter-style. 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.
    2. +
  2. Sections in Document. 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.
    3. +
+ +

Esto es lo que el Buscador de Ejemplos produce:

+ +
\{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/@counter-style') }}
+ +

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.

+ +

Después de editar la macro ahora luce así:

+ +
\{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/negative') }}
+ +

Esta macro editada funcionará correctamente. Si la macro funciona correctamente verás el botón Open in CodePen. 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.

+ +

Encontrando ejemplos que necesitan actualización

+ +

Al buscar ejemplos existentes que actualizar, hay tres tipos principales de actualización que deseas hacer:

+ + + +
+

Nota: 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".

+
+ +

Encontrando ejemplos que necesitan convertirse a ejemplos ejecutables

+ +

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:

+ + + +

Demo de ejemplo ejecutable

+ +

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!

+ +

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.

+ +

Ahora que se ha insertado la plantilla, podemos agregar algo de código, e incluso algún texto explicativo.

+ +

HTML

+ +

Este HTML crea un parágrafo y algunos bloques para ayudarnos a posicionar y formatear un mensaje.

+ +
<p>Un simple ejemplo de sistema de ejemplo ejecutable en accion.</p>
+<div class="box">
+  <div id="item">¡Hola mundo!</div>
+</div>
+
+ +

CSS

+ +

El código CSS formatea el contenedor así como el mensaje.

+ +
.box {
+  width: 200px;
+  height: 100 px;
+  border-radius: 6px;
+  background-color: #ffaabb;
+}
+
+#item {
+  width: 100%;
+  font-weight: bold;
+  text-align: center;
+  font-size: 2em;
+}
+
+ +

JavaScript

+ +

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.

+ +
var el = document.getElementById('item');
+el.onclick = function() {
+  alert('¡Owww, deja de picarme!');
+}
+
+ +

Resultado

+ +

Aquí el resultado de ejecutar los bloques de código de arriba vía \{{EmbedLiveSample('Live_sample_demo')}}:

+ +

{{EmbedLiveSample('Live_sample_demo')}}

+ +

Aquí un enlace que resulta de llamar los bloques de código vía \{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}:

+ +

{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}

+ +

Convenciones acerca de los ejemplos ejecutables

+ +
+

Nota: Esto es actual (Feb. 2016) en discusión en la lista de emails dev-mdc (ver this thread). 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.

+
+ +
+
Orden de los bloques de código
+
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í.
+
Nombrando los encabezados
+
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.
+
Usando un bloque "Result"
+
Después de los diferentes bloques de código, favor de usar un último bloque "Result" antes de usar macro EmbedLiveSample (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).
+
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 +--- +
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

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.

+ +

{{LandingPageListSubPages()}}

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 +--- +

{{MDNSidebar}}

+ +

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")}}. 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")}}.

+ +

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.

+ +

Enlaces

+ +

Creando un solo hipervínculo

+ +

En general, no es necesario utilizar macros para crear enlaces arbitrarios. Utiliza el botón Enlace en la interfaz del editor para crear enlaces.

+ + + +

Enlace a páginas en referencias

+ +

Hay varias macros para vincular páginas en áreas de referencia específicas de MDN.

+ + + +

Enlazar a errores

+ + + +

Ayuda a la navegación para guías multipágina

+ +

{{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.

+ +

Ejemplos de código

+ +

Ejemplos en vivo

+ + + +

Generar la barra lateral

+ +

Hay plantillas para casi todas las grandes colecciones de páginas. Por lo general, enlazan a la página principal de reference/guide/tutorial (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.

+ + + +

Formato de propósito general

+ +

Indicadores en línea para documentación de APIs

+ +

{{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.

+ +

Uso: \{{Optional_Inline}} o \{{ReadOnlyInline}}. Ejemplo:

+ +
+
isCustomObject{{ReadOnlyInline}}
+
Indica, si es true, que el objeto es personalizado.
+
parameterX{{Optional_Inline}}
+
Blah blah blah...
+
+ +

Indicadores de estado y compatibilidad

+ +

Indicadores en línea sin parámetros adicionales

+ +

Non-standard

+ +

{{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.

+ +
Sintaxis
+ +

\{{Non-standard_Inline}}

+ +
Ejemplos
+ + + +

Experimental

+ +

{{TemplateLink("experimental_inline")}} inserta una marca en línea que indica que la API no está ampliamente implementada y puede cambiar en el futuro.

+ +
Sintaxis
+ +

\{{Experimental_Inline}}

+ +
Ejemplos
+ + + +

Indicadores en línea que apoyan la especificación de la tecnología

+ +

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.

+ +

Desaprobado

+ +

{{TemplateLink("Deprecated_Inline")}} inserta una marca desaprobado en línea (Deprecated_Inline) para desalentar el uso de una API que oficialmente está en desuso. Nota: "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".

+ +

No utilices el parámetro en ningún área independiente del navegador (HTML, API, JS, CSS, …).

+ +
Sintaxis
+ +

\{{Deprecated_Inline}} o \{{Deprecated_Inline("gecko5")}}

+ +
Ejemplos
+ + + +

Obsoleto

+ +

{{TemplateLink("Obsolete_Inline")}} inserta una marca de obsoleto en línea (Deprecated_Inline) para evitar el uso de, por ejemplo, una función, método o propiedad que oficialmente es obsoleto.

+ +

No utilices el parámetro en ningún área independiente del navegador (HTML, API, JS, CSS, …).

+ +
Sintaxis
+ +

\{{Obsolete_Inline}} u \{{Obsolete_Inline("js1.8.5")}}

+ +
Ejemplos
+ + + +

Plantilla de insignias

+ +

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 (Badge).

+ +

Indicadores de encabezado de página o sección

+ +

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.

+ + + +

Indica que una función está disponible en workers web

+ +

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")}}.

+ +

{{AvailableInWorkers}}

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 +--- +
{{MDNSidebar}}
+ +

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.

+ + + +

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.

+ +

Cómo se implementan las macros

+ +

Las macros en MDN se implementan usando código {{web.link("/es/docs/Web/JavaScript", "JavaScript")}} ejecutado por el servidor, interpretado usando Node.js. 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")}}.

+ +

Usar una macro en el contenido

+ +

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:

+ +
\{{nombremacro(lista-de-parametros)}}
+ +

Algunas notas sobre las llamadas de macro:

+ + + +

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.

+ +
+

Nota: 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).

+
+ +

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.

+ +

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.

+ +

{{EditorGuideQuickLinks}}

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 +--- +
{{MDNSidebar}}
+ +

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.

+ +

Contextos especiales

+ +

Estas macros se utilizan solo con contextos particulares, como una referencia de API específica.

+ + + +

Componentes de la página destino

+ +

Tenemos una variedad de macros que se pueden utilizar para generar automáticamente el contenido de las páginas destino. Aquí están.

+ +

Listas de subpáginas

+ + + +

Enlaces rápidos

+ +

Tenemos algunas macros diseñadas específicamente para crear {{web.link("/es/docs/MDN/Contribute/Style_guide/Quicklinks", "enlaces rápidos")}}:

+ + + +

Usadas con poca frecuencia

+ + + +

Transclusión

+ +

La transclusión 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.

+ +

{{TemplateLink("page")}} te permite incrustar parte o la totalidad de una página específica en un documento. Acepta cinco parámetros:

+ +
    +
  1. La URI de la página que se va a transcluir. Por ejemplo, "/es/docs/Project:MDN/About".
    2. +
  2. 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}}
    3. +
  3. 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}}
    4. +
  4. 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}}
    5. +
  5. 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}}
    6. +
+ +

Ejemplo sin título

+ +

\{{Page("/es/docs/MDN/About", "Acerca de Mozilla")}}

+ +

Resultado:

+ +

{{Page("/es/docs/MDN/About", "Acerca de Mozilla")}}

+ +

Ejemplo con encabezado

+ +

\{{Page("/es/docs/MDN/About", "Acerca de Mozilla", 0, 1)}}

+ +

Resultado:

+ +

{{Page("/es/docs/MDN/About", "Acerca de Mozilla", 0, 1)}}

+ +

Creando nuevas insignias

+ +

También tenemos insignias que no tienen iconos con burbujas. La plantilla genérica para esto es {{TemplateLink("SimpleBadge")}}, que acepta tres parámetros:

+ +
    +
  1. Texto para mostrar en la insignia.
    2. +
  2. Nombre de una clase CSS que se utilizará como fondo de la insignia.
    3. +
  3. (Opcional) Texto para mostrar en una información sobre herramientas al pasar el cursor sobre la insignia.
    4. +
+ +

Desaprobado

+ +

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.

+ +

Enlaces

+ + + +

Ejemplos de código

+ +

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")}}.

+ + + +

Organizacional

+ + + +

Formateo

+ + + +

Indicadores de versión

+ +

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.

+ + 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 +--- +
{{MDNSidebar}}
+ +

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. 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.

+ +

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 guía para colaboradores, así como a la guía de directrices de datos.

+ +

Si tienes preguntas o descubres problemas, compártelos con nosotros en el foro de discusión de MDN.

+ +

Cómo acceder al repositorio de datos

+ +

Los datos se almacenan en un repositorio de GitHub; consulta https://github.com/mdn/browser-compat-data. 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.

+ +

Preparándose para agregar los datos

+ +

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:

+ +

Veamos la siguiente sencilla forma de asegurarte de que tu bifurcación esté actualizada:

+ +

Agregar el repositorio principal de datos de compatibilidad del navegador como remoto

+ +

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 (upstream) de esa manera (solo necesitas hacer esto una vez):

+ +
git remote add upstream https://github.com/mdn/browser-compat-data.git
+ +

Si no estás seguro de haber hecho esto, puedes verificar qué controles remotos tiene tu repositorio usando

+ +
git remote -v
+ +

Actualiza tu bifurcación con el contenido del remoto

+ +

Ahora, siempre que desees actualizar tu bifurcación, lo puedes hacer mediante:

+ +
    +
  1. +

    Asegúrate de que estas en la rama master:

    + + 
    git checkout master
    +
    2. +
  2. +

    obtén el contenido actualizado del repositorio utilizando lo siguiente:

    + + 
    git fetch upstream
    +
    3. +
  3. +

    rebasa el contenido de tu master con el contenido del repositorio principal:

    + + 
    git rebase upstream/master
    +
    4. +
  4. +

    empuja estas actualizaciones a tu bifurcación remota usando lo siguiente:

    + + 
    git push
    +
    5. +
+ +

Crea una nueva rama para hacer tu trabajo

+ +

A continuación, ve a tu bifurcación remota (estará en https://github.com/tu-nombre-de-usuario/browser-compat-data) y crea una nueva rama para almacenar tus cambios para esta adición de datos. Esto lo puedes hacer mediante:

+ +
    +
  1. Un clic en el botón "Rama: Master".
    2. +
  2. Ingresa un nuevo nombre para la rama en el campo de texto "Buscar o crear una rama...".
    3. +
  3. Presiona el botón resultante "Crear rama nombre-de-rama desde Master".
    4. +
+ +

Por ejemplo, si quisieras agregar datos para la API WebVR, crearías una rama llamada algo así como "webvr".

+ +

Cambia a la nueva rama

+ +

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:

+ +
git pull
+ +

Ahora cambia a tu nueva rama usando esto:

+ +
git checkout nombre-de-rama
+ +

¡Ahora debería estar listo para comenzar a agregar tus datos!

+ +

Añadir los datos

+ +

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:

+ + + +

Cada archivo que crees debe seguir el patrón definido en el esquema contenido en nuestro repositorio; puedes ver la descripción detallada del esquema aquí.

+ +

Estructura básica de datos de compatibilidad

+ +

Veamos un ejemplo. Los archivos JSON de propiedades CSS, por ejemplo, necesitan la siguiente estructura básica:

+ +
{
+  "css": {
+    "properties": {
+      "border-width": {
+        "__compat": {
+          ...
+        }
+      }
+    }
+  }
+}
+ +

Tienes el objeto css, dentro del cual hay un objeto properties. Dentro del objeto properties, 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 __compat, dentro del cual van los datos reales.

+ +

Los datos anteriores se encuentran en el archivo: border-width.json compáralo con la tabla de soporte de border-width representada en MDN.

+ +

Otros tipos de características funcionan de la misma manera, pero con diferentes nombres de objeto:

+ + + +
+

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).

+ +

Estructura básica dentro de una característica

+ +

Dentro de un miembro de función __compat, debes incluir los siguientes miembros:

+ + + +

Los nombres de los miembros del navegador se definen en el esquema (consulta identificadores del navegador). 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.

+ +

En un archivo de datos de compatibilidad del navegador básico, solo necesitarás incluir "version_added" 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:

+ + + +

Dentro del miembro status, incluirás tres submiembros:

+ + + +

Los datos de características de border-width (consulta también border-width.json) se muestra a continuación como ejemplo:

+ +
"__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
+  }
+}
+ +

Agrega una descripción

+ +

Hay un cuarto miembro, opcional, que puede ir dentro del miembro __compat — description. 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:

+ +
{
+  "api": {
+    "AbortController": {
+      "__compat": {
+        ...
+      },
+      "AbortController": {
+        "__compat": {
+          "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController",
+          "description": "<code>AbortController()</code> constructor",
+          "support": {
+            ...
+          }
+        }
+      }
+
+      ... etc.
+    }
+  }
+}
+ +

Subcaracterísticas

+ +

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.

+ +

Como ejemplo, consulta los datos de compatibilidad y la página MDN correspondiente para la propiedad background-color. El soporte básico existe dentro del objeto __compat 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 __compat.

+ +
{
+  "css": {
+    "properties": {
+      "background-color": {
+        "__compat": {
+          ...
+        },
+        "alpha_ch_for_hex": {
+          "__compat": {
+            ...
+          },
+        }
+      }
+    }
+  }
+}
+ +

Para una API, tienes los dos niveles superiores definidos como api.nombre-de-la-interfaz, luego un __compat 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í:

+ +
{
+  "api": {
+    "VRDisplay": {
+      "__compat": {
+        ...
+      },
+      "cancelAnimationFrame": {
+        "__compat": {
+          ...
+        }
+      },
+      "capabilities": {
+        "__compat": {
+          ...
+        }
+      },
+
+      ... etc.
+
+    }
+  }
+}
+ +

Consulta VRDisplay.json para ver un ejemplo completo.

+
+ +

Agregar datos: casos avanzados

+ +

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.

+ +

Incluyendo una nota a pie de página

+ +

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 VRDisplay.json) (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 "notes" dentro del submiembro "chrome_android" relevante; se vería así:

+ +
"chrome_android": {
+  "version_added": true,
+  "notes": "Currently supported only by Google Daydream."
+}
+ +

Incluyendo un prefijo de proveedor

+ +

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 -moz- en Firefox. Para especificar esto en los datos de compatibilidad, debes agregar un submiembro "prefix" dentro del submiembro "firefox" relevante. Y se vería así:

+ +
"firefox": {
+  "version_added": true,
+  "prefix": "-moz-"
+}
+ +

Incluyendo preferencias o banderas del navegador

+ +

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.

+ +

Para representar esto en los datos de compatibilidad, debes agregar el submiembro "flags" dentro del submiembro del identificador del navegador relevante. El valor de "flags" es un arreglo de objetos, cada uno de los cuales contiene tres miembros:

+ + + +

Entonces, para agregar una preferencia/bandera al soporte de Chrome para una característica, harías algo como esto:

+ +
"chrome": {
+  "version_added": "50",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "Enable Experimental Web Platform Features",
+      "value_to_set": "true"
+    }
+  ]
+},
+ +

Si una característica está detrás de dos o más banderas, puedes agregar objetos adicionales al arreglo "flags", como en este caso, por ejemplo:

+ +
"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"
+    }
+  ]
+},
+ +

Incluyendo una versión donde se eliminó el soporte

+ +

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 "version_removed", que toma como valor una cadena que representa el número de versión en el que se eliminó. Por ejemplo:

+ +
"firefox": {
+  "version_added": "35",
+  "version_removed": "47",
+},
+ +

Incluyendo múltiples puntos de soporte para la misma entrada del navegador

+ +

A veces, querrás agregar varios puntos de datos de soporte para el mismo navegador dentro de la misma característica.

+ +

Como ejemplo, la propiedad {{cssxref("text-align-last")}} (ve también text-align-last.json) se agregó a Chrome en la versión 35, compatible con una pref.

+ +

El soporte mencionado anteriormente se eliminó en la versión 47; también en la versión 47, se agregó soporte para text-align-last habilitado de manera predeterminada.

+ +

Para incluir estos dos puntos de datos, puedes hacer que el valor del submiembro "chrome" sea un arreglo que contenga dos objetos de información de soporte, en lugar de un solo objeto de información de soporte:

+ +
"chrome": [
+  {
+    "version_added": "47"
+  },
+  {
+    "version_added": "35",
+    "version_removed": "47",
+    "flags": [
+      {
+        "type": "preference",
+        "name": "Enable Experimental Web Platform Features",
+        "value_to_set": "true"
+      }
+    ]
+  }
+],
+ +
+

Nota 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.

+
+ +

Incluyendo un nombre alternativo

+ +

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.

+ +

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 "alternative_name".

+ +
+

Nota Es posible que el nombre alternativo no sea un alias exacto — posiblemente tenga un comportamiento diferente al de la versión estándar.

+
+ +

Veamos un ejemplo. La propiedad {{cssxref("border-top-right-radius")}} (consulta también border-top-right-radius.json) era compatible con Firefox:

+ + + +

Para representar esto en los datos, usamos el siguiente JSON:

+ +
"firefox": [
+  {
+    "version_added": "4",
+    "notes": "Antes de Firefox 50.0, los estilos de borde de las esquinas redondeadas siempre se representaban como si border-style fuera sólido. Esto se ha solucionado en Firefox 50.0."
+  },
+  {
+    "prefix": "-webkit-",
+    "version_added": "49",
+    "notes": "De Firefox 44 a 48, el prefijo -webkit- estaba disponible con la preferencia layout.css.prefixes.webkit. A partir de Firefox 49, la preferencia predeterminada es <code>true</code>."
+  },
+  {
+    "alternative_name": "-moz-border-radius-topright",
+    "version_added": "1",
+    "version_removed": "12"
+  }
+],
+ +

Empujar un cambio de nuevo al repositorio principal

+ +

Una vez que hayas terminado de agregar tus datos de compatibilidad, primero debes probarlos usando los siguientes comandos:

+ + + +

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:

+ +
git add .
+git commit -m 'adding compat data for nombre-de-la-característica'
+git push
+ +

Ahora ve a tu bifurcación remota (es decir, https://github.com/tu-nombre-de-usuario/browser-compat-data) 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.

+ +

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.

+ +

Insertar los datos en páginas MDN

+ +

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.

+ +

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:

+ +
<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 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>
+ +

Por ejemplo, en la página de encabezado HTTP {{HTTPHeader("Accept-Charset")}}, la llamada a la macro se ve así: \{{Compat("http.headers.Accept-Charset")}}. Si observas el accept-charset.json en el repositorio, verás cómo esto se refleja en los datos JSON.

+ +

Otro ejemplo, la tabla de compatibilidad para la propiedad {{domxref("VRDisplay.capabilities")}} se genera usando \{{Compat("api.VRDisplay.capabilities")}}. La llamada a la macro genera la siguiente tabla (y el correspondiente conjunto de notas):

+ +
+ + +

{{Compat("api.VRDisplay.capabilities")}}

+ +
+

Nota 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.

+
-- cgit v1.2.3-54-g00ecf