---
title: Ejemplos ejecutables
slug: MDN/Structures/Live_samples
translation_of: MDN/Structures/Live_samples
original_slug: MDN/Structures/Ejemplos_ejecutables
---
<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>