initial commit

6 files changed, 1442 insertions, 0 deletions

diff --git a/files/es/dom/almacenamiento/index.html b/files/es/dom/almacenamiento/index.html
new file mode 100644
index 0000000000..4b1f0295a0
--- /dev/null
+++ b/files/es/dom/almacenamiento/index.html
@@ -0,0 +1,302 @@
+---
+title: Almacenamiento
+slug: DOM/Almacenamiento
+tags:
+  - DOM
+  - JavaScript
+  - Referencia_DOM_de_Gecko
+  - Todas_las_Categorías
+  - para_revisar
+translation_of: Web/API/Web_Storage_API
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h3>
+<p>El almacenamiento DOM (DOM Storage) es el nombre dado al conjunto de <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">características relacionadas con el almacenamiento</a> introducidas en la especificación de <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">aplicaciones web 1.0</a> y ahora detalladas por separado en su propia especificación <a class="external" href="http://dev.w3.org/html5/webstorage/" rel="external nofollow" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>. El almacenamiento DOM está diseñado para facilitar una forma amplia, segura y sencilla para almacenar información alternativa a las cookies. Fue introducido por primera vez en <a href="/es/Firefox_2_para_desarrolladores" title="es/Firefox_2_para_desarrolladores">Firefox 2</a> y <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" rel="external nofollow" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a> .</p>
+<div class="note">
+ <strong>Nota:</strong> el almacenamiento DOM no es lo mismo que <a href="/es/Almacenamiento" title="es/Almacenamiento">mozStorage</a> (las interfaces XPCOM de Mozilla para SQLite) o la <a href="/es/API_para_guardar_sesiones" title="es/API_para_guardar_sesiones">API para guardar sesiones</a> (una utilidad de almacenamiento <a href="/es/XPCOM" title="es/XPCOM">XPCOM</a> usada por extensiones).</div>
+<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3>
+<p>El mecanismo de almacenamiento DOM es el medio a través del cual pares de clave/valor pueden ser almacenadas de forma segura para ser recuperadas y utilizadas más adelante. La meta de este añadido es suministrar un método exhaustivo a través del cual puedan construirse aplicaciones interactivas (incluyendo características avanzadas tales como ser capaces de trabajar "sin conexión" durante largos períodos de tiempo).</p>
+<p>Actualmente los navegadores basados en Mozilla, Internet Explorer 8+ y Safari 4 y Chrome proporcionan una implementación funcional de la especificación del almacenamiento DOM. Sin embargo, las versiones anteriores a Internet Explorer 8 poseen una característica similar llamada "<a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">userData behavior</a>" que permite conservar datos entre múltiples sesiones.</p>
+<p>El almacenamiento DOM es útil ya que ningún navegador dispone de buenos métodos para conservar cantidades razonables de datos durante un periodo de tiempo. Las <a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">cookies de los navegadores</a> tienen una capacidad limitada y no implementan una forma de organizar datos persistentes y otros métodos (tales como <a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">almacenamiento local de Flash</a>) necesitan un plugin externo.</p>
+<p>Una de las primeras aplicaciones hechas públicas que hace uso de la nueva funcionalidad de almacenamiento DOM (además del userData Behavior de Internet Explorer) fue <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> (una aplicación para tomar notas) escrita por <a class="external" href="http://aaronboodman.com/">Aaron Boodman</a>. En su aplicación, Aaron enviaba notas hacia el servidor (cuando la conexión a Internet estaba disponible) y simultáneamente las guardaba en local. Esto permitía al usuario escribir notas de modo seguro incluso cuando no disponía de conexión a Internet.</p>
+<p>Aunque el concepto e implementación presentada en halfnote era en comparación simple, su creación mostró las posibilidades de esta nueva generación de aplicaciones web utilizables tanto con conexión como sin ella.</p>
+<h3 id="Referencias" name="Referencias">Referencia</h3>
+<p>Los siguientes objetos globales existen como propiedades de cada <a href="/es/DOM/window" title="es/DOM/window">objeto <code>window</code></a>. Esto significa que se puede acceder a ellas como <code>sessionStorage</code> o <code>window.sessionStorage</code> (esto es importante ya que se puede usar IFrames para almacenar o acceder a datos adicionales, más allá de lo que está inmediatamente incluido en la página).</p>
+<h4 id="sessionStorage" name="sessionStorage"><code>Storage</code></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-1"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este es un constructor ( <code>Storage</code> ) para todos los objetos de almacenamiento ( <code>sessionStorage</code> y <code>globalStorage[location.hostname]).</code></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Al hacer <code>Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code> podrías usar luego como atajo a la función <code>removeItem("key")</code> la forma <code>localStorage.removeKey and sessionStorage.removeKey</code>.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los elementos <code>globalStorage</code> no son de tipo <code>Storage</code> , sino <code>StorageObsolete</code> .</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><code>Storage</code> se define por la <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fdev.w3.org%2Fhtml5%2Fwebstorage%2F%23storage-0&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGvCDT1Wf0oh4zXJCIScYRZKlrPAA">interfaz de almacenamiento</a> WhatWG de la siguiente forma:</span></span></p>
+<pre class="eval"><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">interface Storage {</span></span>
+  <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="http://dev.w3.org/html5/webstorage/#dom-storage-length">length</a>;</span></span>
+  <span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">[IndexGetter]<a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="http://dev.w3.org/html5/webstorage/#dom-storage-key">key</a> DOMString (in unsigned long index);</span></span>
+  <span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">[NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="http://dev.w3.org/html5/webstorage/#dom-storage-getitem">GetItem</a> (in DOMString key);</span></span>
+  <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">[NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="http://dev.w3.org/html5/webstorage/#dom-storage-setitem">setItem</a> (in DOMString key, in DOMString data);</span></span>
+  <span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">[NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem">removeItem</a> (in DOMString key);</span></span>
+  <span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="http://dev.w3.org/html5/webstorage/#dom-storage-clear">clear</a>();</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">};
+</span></span></pre>
+<p> </p>
+<div class="note">
+ <strong>Nota: </strong>aunque los valores pueden establecerse y leerse a través del método de acceso de la propiedad de JavaScript estándar, se recomienda el uso de los métodos getItem y setItem.</div>
+<div class="note">
+ <strong>Nota:</strong> ten en cuenta que todo lo que guardes en cualquiera de los almacenamientos (<em>storages) </em>descritos en esta página se convierte en una cadena a través de su método <code>.toString </code>almacenado anteriormente, por lo que al intentar almacenar un objeto común, se almacenará una cadena <code>"[object Object]" </code>en lugar del objeto o su representación JSON. Usar los métodos de serialización y análisis de JSON nativos que proporciona el navegador es una buena forma bastante común de almacenar objetos en formato cadena.</div>
+<h4 id="sessionStorage" name="sessionStorage"><code>sessionStorage</code></h4>
+<p>Este es un objeto global (<code>sessionStorage</code>) que mantiene un área de almacenamiento que está disponible durante la sesión de página. Una sesión de página existe mientras el navegador esté abierto y sobrevive a recargas o restauraciones de páginas. Abrir una página en una nueva pestaña o en una ventana provoca que se cree una nueva sesión.</p>
+<pre class="brush: js">// Guardar datos en el almacén de la sesión actual
+sessionStorage.setItem("username", "John");
+
+// Acceder a algunos datos guardados
+alert( "username = " + sessionStorage.getItem("username"));
+</pre>
+<p>El objeto <code>sessionStorage</code> es más usado para manejar datos temporales que deberían ser guardados y recuperados si el navegador es recargado accidentalmente.</p>
+<p>{{ fx_minversion_note("3.5", "Antes de Firefox 3.5, los datos de sessionStorage no se restablecían automáticamente después de recuperarse de un fallo del navegador. A partir de Firefox 3.5, funciona según la especificación.") }}</p>
+<p><strong>Ejemplos:</strong></p>
+<p>Autoguardado de los contenidos de un campo de texto y, si el navegador se recarga accidentalmente, restauración del contenido del campo de texto para evitar la pérdida de datos.</p>
+<pre class="brush: js"> // Obtener el campo de texto al que vamos a seguir la pista
+ var field = document.getElementById("field");
+
+ // Ver si se tiene un valor de autoguardado
+ // (esto sólo sucede si la página es actualizada accidentalmente)
+ if ( sessionStorage.getItem("autosave")) {
+    // Restaurar los contenidos del campo de texto
+    field.value = sessionStorage.getItem("autosave");
+ }
+
+ // Comprobar los contenidos del campo de texto cada segundo
+ setInterval(function(){
+    // Y guardar los resultados en el objeto de almacenamiento de sesión
+    sessionStorage.setItem("autosave", field.value);
+ }, 1000);
+</pre>
+<p><strong>Más información:</strong></p>
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage" title="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage">Especificación sessionStorage</a></li>
+</ul>
+<h4 id="globalStorage" name="globalStorage"><code>globalStorage</code></h4>
+<p> </p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ Non-standard_header() }} Este es un objeto global ( <code>globalStorage</code> ) que mantiene múltiples áreas de almacenamiento privado que se pueden utilizar para almacenar los datos durante un largo período de tiempo (por ejemplo, en varias páginas y las sesiones del navegador) .</span></span></p>
+<div class="warning">
+ <span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Nota: <code>globalStorage</code> no es de tipo <code>Storage</code>, sino un objeto de tipo <code>StorageList</code> que contiene a su vez elementos <code>StorageObsolete</code>.</span></span></div>
+<pre class="brush: js">// Guardar datos a los que sólo pueden acceder scripts del dominio mozilla.org
+globalStorage['mozilla.org'].setItem("snippet", "&lt;b&gt;Hola&lt;/b&gt;, ¿cómo estás?");
+</pre>
+<p>Específicamente, el objeto <code>globalStorage</code> proporciona acceso a un número de diferentes objetos de almacenamiento en los que los datos pueden ser guardados. Por ejemplo, si se construye una página web que usa <code>globalStorage</code> en este dominio (developer.mozilla.org) se dispondría de los siguientes objetos de almacenamiento:</p>
+<ul>
+ <li><code>globalStorage['developer.mozilla.org']</code>- Todas las páginas web dentro del subdominio developer.mozilla.org podrán leer de, y escribir datos en, este objeto de almacenamiento.</li>
+</ul>
+<p>{{ Fx_minversion_note(3, "Firefox 2 permitía el acceso a objetos de almacenamiento superiores en la jerarquía del dominio al documento actual, pero esto ya no se permite en Firefox 3 por razones de seguridad. Además, se ha eliminado esta adición propuesta a HTML 5 de la especificación en favor de <code>localStorage</code>, que se implementa a partir de Firefox 3.5.") }}</p>
+<p><strong>Ejemplos:</strong></p>
+<p>Todos estos ejemplos necesitan que haya un script insertado (con el siguiente código) en cada página en la que se quiera ver el resultado.</p>
+<p>Recordar el nombre un usuario para un subdominio en particular que está siendo visitado:</p>
+<pre class="brush: js"> globalStorage['developer.mozilla.org'].setItem("username", "John");
+</pre>
+<p>Seguir la pista al número de veces que un usuario visita todas las páginas de un dominio:</p>
+<pre class="brush: js"> // parseInt must be used since all data is stored as a string
+ globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1);
+</pre>
+<p> </p>
+<h4 class="editable" id="localStorage"><span><code>localStorage</code></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><code>localStorage</code> es lo mismo que <code>globalStorage[location.hostname]</code>, excepto que está dentro del ámbito de un origen HTML5 (esquema + nombre de servidor + puerto no estándar), y que <code>localStorage</code> es un elemento de tipo <code>Storage</code> a diferencia de <code>globalStorage[location.hostname]</code>, que es de tipo <code>StorageObsolete</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Por ejemplo, <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fexample.com%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHbmhS24rOBWpzaMcUapS5k_3_-JQ" rel="external nofollow">http://example.com</a> no es capaz de acceder al mismo objeto <code>localStorage</code> que <a class="link-https" href="http://www.google.com/url?q=https%3A%2F%2Fexample.com%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFdUqh3fgxBA_n6BEUpV3eYKVuHXA" rel="external nofollow">https://example.com</a> pero pueden acceder al mismo objeto <code>globalStorage</code>. <code>localStorage</code> es una interfaz estándar, mientras que <code>globalStorage</code> no es estándar. <code>localStorage</code> fue introducida en Firefox 3.5.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Ten en cuenta que establecer una propiedad en <code>globalStorage[location.hostname]</code> <strong>no</strong> la establece en <code>localStorage</code> y extender <code>Storage.prototype</code> no afecta a los elementos <code>globalStorage</code>. Esto sólo se hace extendiendo <code>StorageObsolete.prototype</code>.</span></span></p>
+<div class="note">
+ <span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><strong>Nota:</strong> cuando el navegador entra en modo de navegación privada, se crea una nueva base de datos temporal para almacenar los datos locales de almacenamiento; </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">esta base de datos se vacía cuando se sale del modo de navegación privada.</span></span></div>
+<div id="section_8">
+ <h5 id="Compatibilidad">Compatibilidad</h5>
+ <p>Los objetos <code>Storage</code> se han agregado recientemente al estándar, por lo que puede ocurrir que no estén presentes en todos los navegadores. Puedes solucionar esto insertando uno de los siguientes códigos al principio de tus scripts, lo que permitirá el uso del objeto <code>localStorage</code> object en aquellas implementaciones que de forma nativa no lo admitan.</p>
+ <p>Este algoritmo es una imitación exacta del objeto <code>localStorage</code>, pero haciendo uso de cookies.</p>
+ <pre class="brush: js">if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        var sExpDate = new Date();
+        sExpDate.setDate(sExpDate.getDate() - 1);
+        document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length &gt; 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId &lt; aCouples.length; iCouplId++) {
+        iCouple = aCouples[iCouplId].split(/\s*=\s*/);
+        if (iCouple.length &gt; 1) {
+          oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+</pre>
+ <div class="note">
+  <strong>Nota:</strong> el tamaño máximo de datos que pueden guardarse está bastante restringido por el uso de cookies. Con este algoritmo, usa las funciones <code>localStorage.setItem()</code> y <code>localStorage.removeItem()</code> para agregar, cambiar o eliminar una clave. Usar los métodos <code>localStorage.tuClave = tuValor;</code> y <code>delete localStorage.tuClave;</code> para establecer o eliminar una clave <strong>no es muy seguro con este código</strong>. También puedes cambiar su nombre y usarlo para administrar las cookies de un documento independientemente del objeto localStorage.</div>
+ <p>Aquí tienes otra imitación, menos exacta, del objeto <code>localStorage</code>. Es mucho más simple  que el anterior, pero es compatible con los navegadores antiguos como Internet Explorer &lt; 8. También usa cookies.</p>
+ <pre class="brush: js">if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) { return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      var sExpDate = new Date();
+      sExpDate.setDate(sExpDate.getDate() - 1);
+      document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=")).test(document.cookie); }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+</pre>
+ <div class="note">
+  <strong>Nota:</strong> el tamaño máximo de datos que pueden guardarse está bastante restringido por el uso de cookies. Con este algoritmo, usa las funciones <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code> y <code>localStorage.removeItem()</code> para agregar, cambiar o eliminar una clave. Usar los métodos <code>localStorage.tuClave</code> para obtener, establecer o eliminar una clave <strong>no es muy seguro con este código</strong>. También puedes cambiar su nombre y usarlo para administrar las cookies de un documento independientemente del objeto localStorage.</div>
+ <h3 class="editable" id="Lugar_de_almacenamiento_y_borrado_de_datos"><span><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Lugar de almacenamiento y borrado de datos</span></span></span></h3>
+ <p><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los datos de almacenamiento DOM se guardan en el <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" rel="external nofollow" title="http://kb.mozillazine.org/Webappsstore.sqlite">archivo webappsstore.sqlite</a> de la carpeta del perfil.</span></span></p>
+ <ul>
+  <li><span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Almacenamiento DOM se puede borrar a través de "Herramientas -&gt; Borrar Historial reciente -&gt; Cookies" cuando el rango de tiempo es "Todo" (a través de nsICookieManager:: removeAll)</span></span>
+   <ul>
+    <li><span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Pero no cuando se especifica otro intervalo de tiempo: ( <a class="link-https" href="http://www.google.com/url?q=https%3A%2F%2Fbugzilla.mozilla.org%2Fshow_bug.cgi%3Fid%3D527667&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEMF8WI1pO7c8uQnfOUS0KITnlz5Q" rel="external nofollow">bug 527667</a> )</span></span></li>
+    <li><span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">No aparece en Herramientas -&gt; Opciones -&gt; Privacidad -&gt; Eliminar cookies individuales ( <a class="link-https" href="http://www.google.com/url?q=https%3A%2F%2Fbugzilla.mozilla.org%2Fshow_bug.cgi%3Fid%3D506692&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNH3d0Etkixvdpdvd_u6gywZoEmsMQ" rel="external nofollow">bug 506692</a> )</span></span></li>
+   </ul>
+  </li>
+  <li><span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El almacenamiento DOM <strong>no</strong> se elimina a través de Herramientas -&gt; Opciones -&gt; Avanzado -&gt; Red -&gt; Datos en modo sin conexión -&gt; Limpiar ahora.</span></span></li>
+  <li><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">No aparece en la lista "Herramientas -&gt; Opciones -&gt; Avanzado -&gt; Red -&gt; Datos en modo sin conexión", a menos que el sitio también utilice la caché sin conexión.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si el sitio aparece en esa lista, los datos de almacenamiento DOM se eliminan junto con la <a href="/en/Using_Application_Cache" rel="internal" title="https://developer.mozilla.org/en/Using_Application_Cache">memoria caché sin conexión</a> cuando se hace clic en el botón Eliminar.</span></span></li>
+ </ul>
+ <p><span class="goog-gtc-unit" id="goog-gtc-unit-73"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Consulta también <a href="/en/Using_Application_Cache#Storage_location_and_clearing_the_offline_cache" rel="internal" title="https://developer.mozilla.org/en/Using_Application_Cache#Storage_location_and_clearing_the_offline_cache">borrar la caché de recursos en modo sin conexión</a> .</span></span></p>
+</div>
+<h3 id="M.C3.A1s_informaci.C3.B3n" name="M.C3.A1s_informaci.C3.B3n"><span class="goog-gtc-unit" id="goog-gtc-unit-74"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Más información</span></span></h3>
+<ul>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-75"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><a class="external" href="http://www.w3.org/TR/webstorage/" rel="external nofollow" title="http://www.w3.org/TR/webstorage/">Almacenamiento web</a> (W3C Web Grupo de trabajo sobre aplicaciones web)</span></span></li>
+ <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled" rel="external nofollow" title="http://kb.mozillazine.org/Dom.storage.enabled"><span class="goog-gtc-unit" id="goog-gtc-unit-76"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Activar / Desactivar almacenamiento DOM en Firefox o SeaMonkey</span></span></a></li>
+</ul>
+<h3 id="Ejemplos" name="Ejemplos"><span class="goog-gtc-unit" id="goog-gtc-unit-77"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Ejemplos</span></span></h3>
+<ul>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-78"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" rel="external nofollow" title="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application">Tutorial de almacenamiento web JavaScript: cómo crear una aplicación de la libreta de direcciones</a>. Práctico tutorial que describe cómo utilizar la API de almacenamiento web mediante la creación de una aplicación sencilla de la libreta de direcciones.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-79"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" rel="external nofollow" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">Aplicaciones web en modo desconexión</a> en hacks.mozilla.org: muestra una demo de la aplicación en modo desconexión y explica cómo funciona.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-80"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://noteboard.eligrey.com/" rel="external nofollow" title="http://noteboard.eligrey.com/">Noteboard</a>: aplicación para escritura de notas que almacena todos los datos en local.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-81"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://github.com/eligrey/jData-host" rel="external nofollow" title="http://github.com/eligrey/jData-host">JData</a>: una interfaz de objetos compartidos localStorage a la que cualquier sitio web en Internet puede acceder y que funciona en Firefox 3 +, Webkit 3.1.2 + versiones estables ("nightlies) y IE8.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-82"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Piensa en ella como pseudo-globalStorage [""], pero el acceso de escritura necesita la confirmación del usuario.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-83"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://codebase.es/test/webstorage.html" rel="external nofollow" title="http://codebase.es/test/webstorage.html">Ejemplo de localStorage en HTML 5 </a>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-84"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Un ejemplo de localStorage muy sencillo y fácil de entender.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-85"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Guarda y recupera los textos y muestra una lista de elementos guardados.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Probado en Firefox 3 o superior.</span></span></li>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-87"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" rel="external nofollow" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">Almacenamiento de sesión en HTML5</a>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-88"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Un ejemplo muy simple de almacenamiento de sesión.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-89"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">También incluye un ejemplo en almacenamiento local.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-90"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Probado en Firefox 3.6 o superior.</span></span></li>
+</ul>
+<h3 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h3>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Característica</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>localStorage</td>
+    <td>4</td>
+    <td>3.5</td>
+    <td>8</td>
+    <td>10.50</td>
+    <td>4</td>
+   </tr>
+   <tr>
+    <td>sessionStorage</td>
+    <td>5</td>
+    <td>2</td>
+    <td>8</td>
+    <td>10.50</td>
+    <td>4</td>
+   </tr>
+   <tr>
+    <td>globalStorage</td>
+    <td>{{ CompatNo() }}</td>
+    <td>2</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Característica</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Compatibilidad básica</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>Todos los navegadores tienen diferentes niveles de capacidad tanto para local- como para sessionStorage. Aquí puedes ver un<a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/"> resumen detallado de todas las capacidades de almacenamiento de los distintos navegadores</a>.</p>
+<h3 id="Contenido_relacionado" name="Contenido_relacionado"><span class="goog-gtc-unit" id="goog-gtc-unit-91"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Contenido relacionado</span></span></h3>
+<ul>
+ <li><span class="goog-gtc-unit" id="goog-gtc-unit-92"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHTTP_cookie&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFACogcWPyUjw22LvVhbEL5L07xEA">Cookies HTTP</a> ( <a><code>document.cookie</code></a> )</span></span></li>
+ <li><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fwww.macromedia.com%2Fsupport%2Fdocumentation%2Fen%2Fflashplayer%2Fhelp%2Fhelp02.html&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFrtvzw9ttNpzuCXBX_Hlq3o20cYA"><span class="goog-gtc-unit" id="goog-gtc-unit-93"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Almacenamiento local de Flash</span></span></a></li>
+ <li><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fmsdn2.microsoft.com%2Fen-us%2Flibrary%2Fms531424.aspx&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFaRBrB2GGggww2L9dRDlUWDBm9IQ"><span class="goog-gtc-unit" id="goog-gtc-unit-94"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Comportamiento userData en Internet Explorer </span></span></a></li>
+ <li><a><span class="goog-gtc-unit" id="goog-gtc-unit-95"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">nsIDOMStorageEventObsolete</span></span></a></li>
+ <li><a><span class="goog-gtc-unit" id="goog-gtc-unit-96"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">StorageEvent</span></span></a></li>
+</ul>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-97"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">{{ HTML5ArticleTOC () }}</span></span></p>
+<p> </p>
+<p> </p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-98"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ languages( { "en": "en/DOM/Storage", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}</span></span></p>
diff --git a/files/es/dom/document.cookie/index.html b/files/es/dom/document.cookie/index.html
new file mode 100644
index 0000000000..791ae788f2
--- /dev/null
+++ b/files/es/dom/document.cookie/index.html
@@ -0,0 +1,119 @@
+---
+title: document.cookie
+slug: DOM/document.cookie
+tags:
+  - NeedsContent
+translation_of: Web/API/Document/cookie
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<h3 id="Resumen" name="Resumen">Resumen</h3>
+
+<p>Con <code>document.cookie</code> se obtienen y definen las <code>cookies</code> asociadas con el documento.</p>
+
+<h2 id="Sintaxis_2">Sintaxis</h2>
+
+<h3 id="Sintaxis" name="Sintaxis">Leer todas las cookies accesibles desde una localización</h3>
+
+<pre class="eval"><em>todasLasCookies</em> = <em>document</em>.cookie;
+</pre>
+
+<p>En el código anterior <em><code>todasLasCookies</code></em> es una cadena que contiene una lista de todas las cookies separadas por punto y coma (en pares <em><code>clave=valor</code></em>). Tenga en cuenta que <var>clave</var> y <var>valor</var> pueden estar rodeadas por espacios en blanco (caracteres espacio y tabulación): de hecho <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a> especifica que debe haber un espacio en blanco después de cada punto y coma (;), pero algunos agentes de usuario no son muy estrictos con esto.</p>
+
+<h3 id="Escribir_una_nueva_cookie">Escribir una nueva cookie</h3>
+
+<pre class="eval"><em>document</em>.cookie = <em>nuevaCookie</em>;</pre>
+
+<p class="eval">En el código anterior, <em><code>nuevacookie</code></em> es una cadena de la forma <em><code>clave=valor</code></em>. Tenga en cuenta que solo se puede crear o actualizar una cookie de cada vez mediante este método. Considere también que:</p>
+
+<ul>
+ <li class="eval">Cualquiera de los siguientes atributos opcionales se puede escribir después del par clave-valor, especificando la cookie que se va a crear o actualizar, precedidos de un punto y coma.
+  <ul>
+   <li class="eval"><code>;path=<em>pat</em>h</code> (p. ej.: '/'. '/midir'). Si no se especifica, por defecto corresponde a la ruta del documento actual.<br>
+    La ruta debe ser <strong>absoluta</strong> (ver <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>). Para más información sobre cómo utilizar rutas relativas, ir a <a href="https://developer.mozilla.org/es/docs/DOM/document.cookie$edit#Using_relative_URLs_in_the_path_parameter">este párrafo</a>.</li>
+   <li class="eval"><code>;domain=<em>domain</em></code> (p. ej. 'example.com', 'subdomain.example.com'). Si no se especifica, su valor por defecto es la porción de la dirección web de la ubicación actual del archivo. A diferencia de lo que ocurría en las primeras especificaciones, los puntos iniciales de los nombre de dominio se ignoran, pero los navegadores pueden impedir crear cookies que contengan dichos puntos. Si se especifica un dominio, los subdominios siempre son incluidos.</li>
+   <li class="eval"><code>;max-age=</code><em><code>duración-máxima-en-segundos</code></em> Por ejemplo: 60*60*24*365 para un año.</li>
+   <li class="eval"><code>;expires=</code><em><code>fecha-en-formato-GMTString</code> </em>Si no se especifica <code>max-age</code> ni <code>expires</code>, la cookie expirará al terminar la sesión actual.</li>
+   <li class="eval"><code>;secure</code> La cookie sólo será transmitida en un protocolo seguro (HTTPS, SSL). Antes de Chrmoe 52, este atributo podía aparecer con cookes de dominios http.</li>
+   <li class="eval"><code>;samesite</code> Este atributo impide al navegador enviar esta cookie a través de peticiones cross-site. Los valores posibles son lax o strict. El soporte de este atributo se añadió en Chrome 51.
+    <ul>
+     <li class="eval">El valor <em><code>strict</code></em> impide que la cookie sea enviada por el navegador al sitio destino en contexto de navegador cross-site, incluso cuando sigue un enlace regular.</li>
+     <li class="eval">El valor <em><code>lax</code></em> sólo envía cookies a las peticiones de GET de ALTO NIVEL. Es suficiente para seguir al usuario, pero evitará muchos ataques CSRF.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li class="eval">El valor de la cookie puede ser evaluado mediante <a href="/es/Referencia_de_JavaScript_1.5/Funciones_globales/encodeURIComponent" title="encodeURIComponent">encodeURIComponent()</a> para asegurarse de que dicha cadena no incluya comas, punto y coma, ni espacios en blanco (lo cual no está permitido en el valor de una cookie).</li>
+ <li class="eval">Algunas implementaciones de agente de usuario soporta los siguientes prefijos de cookie:
+  <ul>
+   <li class="eval"><code>__Secure-</code>  Señales para el navegador que solo deben incluirse en las perticiones de cookie transmitidas por un canal seguro.</li>
+   <li class="eval"><code>__Host-</code> Señales del navegador que además de la restricción de uso de cookies que provienen de un origen serugo, el ámbito de la cookie está limitado a un atributo path que proporciona el servidor. Si el servidor omite el atributo path, el directorio de las petición URI está en uso. Tabién las señales del atributo dominio no deben estar presentes, lo cual previene que la cookie sea usada en otros dominis. Para Chrome, el atributo path debe tener el mismo origen.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="geckoVersionNote">{{ gecko_callout_heading("6.0") }}</div>
+
+<div class="geckoVersionNote">Nótese que previamente a Gecko 6.0 {{ geckoRelease("6.0") }}, rutas que contenían comillas eran tratadas como si las comillas fueran parte de la cadena, en lugar de considerarse como un delimitador de la ruta actual. Esto ya ha sido arreglado.</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo # 1: Uso sencillo</h3>
+
+<pre class="brush: js">document.cookie = "nombre=oeschger";
+document.cookie = "comida_preferida=tripa";
+function alertCookie() {
+  alert(document.cookie); // visualizar: nombre=oeschger;comida favorita=tripa
+
+}</pre>
+
+<pre>&lt;button onclick="alertCookie()"&gt;Mostrar cookies&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}</p>
+
+<h3 id="Ejemplo_2_Obtener_una_cookie_de_ejemplo_llamada_test2">Ejemplo #2: Obtener una cookie de ejemplo llamada <em>test2</em></h3>
+
+<pre>document.cookie = "test1=Hola";
+document.cookie = "test2=Mundo";
+
+var cookieValor = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+
+function alertCookieValue() {
+  alert(cookieValor);
+}
+</pre>
+
+<pre>&lt;button onclick="alertCookieValue()"&gt;Mostrar valor de cookie&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}</p>
+
+<h3 id="Ejemplo_3_Hacer_algo_una_sola_vez">Ejemplo #3: Hacer algo una sola vez</h3>
+
+<p>De manera a usar el siguiente código, favor remplace todas las veces la palabra <code>hacerAlgoUnaSolaVez</code> (el nombre de la cookie) con un nombre personalizado.</p>
+
+<pre>function hazUnaVez() {
+  if (document.cookie.replace(/(?:(?:^|.*;\s*)<code>hacerAlgoUnaSolaVez</code>\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
+    alert("Hacer algo aquí!");
+    document.cookie = "<code>hacerAlgoUnaSolaVez</code>=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+  }
+}</pre>
+
+<pre>&lt;button onclick="dhacerUnaVez()"&gt;Solo hacer algo una vez&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}</p>
+
+<h3 id="Notas" name="Notas">Seguridad</h3>
+
+<p>Es importante mencionar que la restricción path no protege contra la lectura no autorizada de cookies de una ruta distinta. Puede ser fácilmente resuelto mediante DOM (por ejemplo creando un <a href="/en/HTML/Element/iframe" title="en/HTML/Element/iframe">iframe</a> oculto con la ruta de la cookie y accediendo a la propiedad contentDocument.cookie del iframe). La única manera de proteger el acceso a cookies es ocupando un dominio o subdominio diferente, debido a la <a href="/en/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">política de mismo origen</a>.</p>
+
+<h3 id="Notas" name="Notas">Notas</h3>
+
+<ul>
+ <li>Empezando con Firefox 2, está disponible un mejor mecanismo de almacenamiento en cliente - <a href="/es/DOM/Storage" title="es/DOM/Storage">WHATWG DOM Storage</a>.</li>
+ <li>Puedes eliminar una cookie simplemente estableciendo su fecha de expiración a cero.</li>
+ <li>Cabe mencionar que entre más cookies se tengan, mayor cantidad de datos serán transferidos entre el servidor y el cliente en cada solicitud. Esto reducirá el tiempo entre cada solicitud. Es altamente recomendado que se utilice <a href="/es/DOM/Storage" title="es/DOM/Storage">WHATWG DOM Storage</a> si se van a mantener los datos solamente en el cliente.</li>
+</ul>
+
+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-8747038">DOM Level 2: HTMLDocument.cookie</a></p>
diff --git a/files/es/dom/index.html b/files/es/dom/index.html
new file mode 100644
index 0000000000..b1a5452a8e
--- /dev/null
+++ b/files/es/dom/index.html
@@ -0,0 +1,86 @@
+---
+title: DOM
+slug: DOM
+tags:
+  - DOM
+  - Todas_las_Categorías
+translation_of: Web/API/Document_Object_Model
+---
+<div class="callout-box">
+  <strong><a href="/es/Acerca_del_Modelo_de_Objetos_del_Documento" title="es/Acerca_del_Modelo_de_Objetos_del_Documento">Acerca del Modelo de Objetos del Documento</a></strong><br>
+  Un par de cosas básicas sobre DOM y Mozilla.</div>
+<div>
+  <p>El <strong>Modelo de Objetos del Documento (DOM)</strong> es un API para documentos <a href="/es/HTML" title="es/HTML">HTML</a> y <a href="/es/XML" title="es/XML">XML</a>. Proporciona una representación estructural del documento, permitiendo la modificación de su contenido o su presentación visual. Esencialmente, comunica las páginas web con los scripts o los lenguajes de programación.</p>
+</div>
+<p><strong>DOM</strong> es un estándar del <a class="external" href="http://www.w3.org/DOM/">W3C</a></p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"><a href="/Special:Tags?tag=DOM&amp;language=es" title="Special:Tags?tag=DOM&amp;language=es">Documentación</a></h4>
+        <dl>
+          <dt>
+            <a class="external" href="http://www.maestrosdelweb.com/editorial/dom/">Introducción a la manipulación DOM</a></dt>
+          <dd>
+            <small>Introducción a los métodos de manipulación DOM mediante Javascript</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a class="external" href="http://html.conclase.net/w3c/dom1-es/cover.html">Especificación del DOM Nivel 1</a></dt>
+          <dd>
+            <small>El objetivo de la especificación DOM es definir una interfaz programable para HTML y XML.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a href="/es/Uso_del_núcleo_del_nivel_1_del_DOM" title="es/Uso_del_núcleo_del_nivel_1_del_DOM">Uso del núcleo del nivel 1 del DOM</a></dt>
+          <dd>
+            <small>Es un potente modelo de objetos para modificar el árbol de contenidos de los documentos.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a href="/es/Los_niveles_del_DOM" title="es/Los_niveles_del_DOM">Los niveles del DOM</a></dt>
+          <dd>
+            <small>Una descripción de los niveles del DOM y el soporte ofrecido por Mozilla a cada uno de ellos.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a href="/es/DHTML_Demostraciones_del_uso_de_DOM//Style" title="es/DHTML_Demostraciones_del_uso_de_DOM//Style">DHTML Demostraciones del uso de DOM/Style</a></dt>
+          <dd>
+            <small>Contiene una lista de ejemplos DOM basados en sus diversas características. La lista incluye demostraciones para Eventos DOM, DOM Core, DOM HTML y mucho mas.</small></dd>
+        </dl>
+        <dl>
+          <dt>
+            <a class="external" href="http://www.mozilla.org/docs/dom/">The Document Object Model in Mozilla.org <small>(en)</small></a></dt>
+          <dd>
+            <small>Una versión más antigua acerca de DOM se encuentra en mozilla.org.</small></dd>
+        </dl>
+        <p><span class="comment">enlaces a ninguna parte: ; <a href="/es/DOM_y_JavaScript">DOM y JavaScript</a>: &lt;small&gt;"¿Qué está haciendo que? ¿En un script embebido en mi página web, el cual usa DOM y Javascript?"&lt;/small&gt;  ; <a href="/es/Modificando_dinámicamente_las_interfaces_de_usuario_en_XUL">Modificando dinámicamente las interfaces de usuario en XUL</a>: &lt;small&gt;Fundamentos de manipulación con XUL UI y métodos DOM.&lt;/small&gt;  ; <a href="/es/Espacios_en_blanco_en_el_DOM">Espacios en blanco en el DOM</a>: &lt;small&gt;Una solución al problema de ignorar los espacios en blanco cuando se interactúa con el DOM.&lt;/small&gt;  ; <a href="/es/Tablas_HTML_con_JavaScript_e_interfaces_DOM">Tablas HTML con JavaScript e interfaces DOM</a>: &lt;small&gt;Una descripción de algunos métodos de gran alcance, fundamentales para el nivel 1 en el uso de DOM y de cómo utilizarlo con Javascript .&lt;/small&gt; fin de enlaces a ninguna parte</span> <span class="alllinks"><a href="/Special:Tags?tag=DOM&amp;language=es" title="Special:Tags?tag=DOM&amp;language=es">Ver todos</a></span></p>
+      </td>
+      <td>
+        <h4 id="Comunidad" name="Comunidad">Comunidad</h4>
+        <ul>
+          <li>En la comunidad Mozilla... en inglés</li>
+        </ul>
+        <p>{{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}</p>
+        <p><span class="alllinks"><a href="/es/DOM/Comunidad" title="es/DOM/Comunidad">Ver todos</a></span></p>
+        <h4 id="Herramientas" name="Herramientas">Herramientas</h4>
+        <ul>
+          <li><a href="/es/DOM_Inspector" title="es/DOM_Inspector">DOM Inspector</a></li>
+          <li><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouse-over DOM Inspector</a></li>
+          <li><a class="external" href="http://www.karmatics.com/aardvark/">Aardvark, extension para Firefox</a></li>
+        </ul>
+        <p><span class="alllinks"><a href="/Special:Tags?tag=DOM:Herramientas&amp;language=es" title="Special:Tags?tag=DOM:Herramientas&amp;language=es">Ver todos</a></span></p>
+        <h4 id="Temas_relacionados" name="Temas_relacionados">Temas relacionados</h4>
+        <dl>
+          <dd>
+            • <a href="/es/AJAX" title="es/AJAX">AJAX</a> • <a href="/es/CSS" title="es/CSS">CSS</a> • <a href="/es/XML" title="es/XML">XML</a> • <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a> •</dd>
+        </dl>
+        <p> </p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p><span class="comment">fin de tabla</span></p>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">Interwiki Language Links</span></p>
+<p>{{ languages( { "de": "de/DOM", "en": "en/DOM", "fr": "fr/DOM", "hu": "hu/DOM", "ja": "ja/DOM", "ko": "ko/DOM", "nl": "nl/DOM", "pl": "pl/DOM", "pt": "pt/DOM", "ru": "ru/DOM", "zh-cn": "cn/DOM", "zh-tw": "zh_tw/DOM" } ) }} </p>
diff --git a/files/es/dom/manipulando_el_historial_del_navegador/ejemplo/index.html b/files/es/dom/manipulando_el_historial_del_navegador/ejemplo/index.html
new file mode 100644
index 0000000000..1971f1348f
--- /dev/null
+++ b/files/es/dom/manipulando_el_historial_del_navegador/ejemplo/index.html
@@ -0,0 +1,415 @@
+---
+title: Ejemplo de Navegación usando Ajax
+slug: DOM/Manipulando_el_historial_del_navegador/Ejemplo
+translation_of: Web/API/History_API/Example
+---
+<p>This is an example of an AJAX web site composed only of three pages (<em>first_page.php</em>, <em>second_page.php</em> and <em>third_page.php</em>). To see how it works, please, create the following files (or git clone <a href="https://github.com/giabao/mdn-ajax-nav-example" title="/en-US/docs/">https://github.com/giabao/mdn-ajax-nav-example.git</a> ):</p>
+
+<div class="note" id="const_compatibility"><strong>Note:</strong> For fully integrating the {{HTMLElement("form")}} elements within this <em>mechanism</em>, please take a look at the paragraph <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">Submitting forms and uploading files</a>.</div>
+
+<p><strong>first_page.php</strong>:</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: php">&lt;?php
+    $page_title = "First page";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?&gt;
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;?php
+        include "include/header.php";
+        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
+?&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;?php include "include/before_content.php"; ?&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;div id="ajax-content"&gt;
+&lt;?php } ?&gt;
+
+    &lt;p&gt;This is the content of &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+    if ($as_json) {
+        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; ob_get_clean()));
+    } else {
+?&gt;
+&lt;/div&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+        include "include/after_content.php";
+        echo "&lt;/body&gt;\n&lt;/html&gt;";
+    }
+?&gt;
+</pre>
+</div>
+
+<p><strong>second_page.php</strong>:</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: php">&lt;?php
+    $page_title = "Second page";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?&gt;
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;?php
+        include "include/header.php";
+        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
+?&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;?php include "include/before_content.php"; ?&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;div id="ajax-content"&gt;
+&lt;?php } ?&gt;
+
+    &lt;p&gt;This is the content of &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+    if ($as_json) {
+        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; ob_get_clean()));
+    } else {
+?&gt;
+&lt;/div&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+        include "include/after_content.php";
+        echo "&lt;/body&gt;\n&lt;/html&gt;";
+    }
+?&gt;
+</pre>
+</div>
+
+<p><strong>third_page.php</strong>:</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: php">&lt;?php
+    $page_title = "Third page";
+    $page_content = "&lt;p&gt;This is the content of &lt;strong&gt;third_page.php&lt;/strong&gt;. This content is stored into a php variable.&lt;/p&gt;";
+
+    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; $page_content));
+    } else {
+?&gt;
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;?php
+        include "include/header.php";
+        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
+?&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;?php include "include/before_content.php"; ?&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;third_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;div id="ajax-content"&gt;
+&lt;?php echo $page_content; ?&gt;
+&lt;/div&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;third_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+        include "include/after_content.php";
+        echo "&lt;/body&gt;\n&lt;/html&gt;";
+    }
+?&gt;
+</pre>
+</div>
+
+<p><strong>css/style.css</strong>:</p>
+
+<pre class="brush: css">#ajax-loader {
+    position: fixed;
+    display: table;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#ajax-loader &gt; div {
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    background-color: #000000;
+    opacity: 0.65;
+}
+</pre>
+
+<p><strong>include/after_content.php</strong>:</p>
+
+<pre class="brush: php">&lt;p&gt;This is the footer. It is shared between all ajax pages.&lt;/p&gt;
+</pre>
+
+<p><strong>include/before_content.php</strong>:</p>
+
+<pre class="brush: php">&lt;p&gt;
+[ &lt;a class="ajax-nav" href="first_page.php"&gt;First example&lt;/a&gt;
+| &lt;a class="ajax-nav" href="second_page.php"&gt;Second example&lt;/a&gt;
+| &lt;a class="ajax-nav" href="third_page.php"&gt;Third example&lt;/a&gt;
+| &lt;a class="ajax-nav" href="unexisting.php"&gt;Unexisting page&lt;/a&gt; ]
+&lt;/p&gt;
+
+</pre>
+
+<p><strong>include/header.php</strong>:</p>
+
+<pre class="brush: php">&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;script type="text/javascript" src="js/ajax_nav.js"&gt;&lt;/script&gt;
+&lt;link rel="stylesheet" href="css/style.css" /&gt;
+</pre>
+
+<p><strong>js/ajax_nav.js</strong>:</p>
+
+<p>(before implementing it in a working environment, <strong>please read <a href="#const_compatibility" title="Note about *const* compatibility">the note about the const statement compatibility</a></strong>)</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: js">"use strict";
+
+const ajaxRequest = new (function () {
+
+    function closeReq () {
+        oLoadingBox.parentNode &amp;&amp; document.body.removeChild(oLoadingBox);
+        bIsLoading = false;
+    }
+
+    function abortReq () {
+        if (!bIsLoading) { return; }
+        oReq.abort();
+        closeReq();
+    }
+
+    function ajaxError () {
+        alert("Unknown error.");
+    }
+
+    function ajaxLoad () {
+        var vMsg, nStatus = this.status;
+        switch (nStatus) {
+            case 200:
+                vMsg = JSON.parse(this.responseText);
+                document.title = oPageInfo.title = vMsg.page;
+                document.getElementById(sTargetId).innerHTML = vMsg.content;
+                if (bUpdateURL) {
+                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
+                    bUpdateURL = false;
+                }
+                break;
+            default:
+                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
+                switch (Math.floor(nStatus / 100)) {
+                    /*
+                    case 1:
+                        // Informational 1xx
+                        console.log("Information code " + vMsg);
+                        break;
+                    case 2:
+                        // Successful 2xx
+                        console.log("Successful code " + vMsg);
+                        break;
+                    case 3:
+                        // Redirection 3xx
+                        console.log("Redirection code " + vMsg);
+                        break;
+                    */
+                    case 4:
+                        /* Client Error 4xx */
+                        alert("Client Error #" + vMsg);
+                        break;
+                    case 5:
+                        /* Server Error 5xx */
+                        alert("Server Error #" + vMsg);
+                        break;
+                    default:
+                        /* Unknown status */
+                        ajaxError();
+                }
+        }
+        closeReq();
+    }
+
+    function filterURL (sURL, sViewMode) {
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&amp;").replace(rView, sViewMode ? "&amp;" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+    }
+
+    function getPage (sPage) {
+        if (bIsLoading) { return; }
+        oReq = new XMLHttpRequest();
+        bIsLoading = true;
+        oReq.onload = ajaxLoad;
+        oReq.onerror = ajaxError;
+        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
+        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
+        oReq.send();
+        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
+    }
+
+    function requestPage (sURL) {
+        if (history.pushState) {
+            bUpdateURL = true;
+            getPage(sURL);
+        } else {
+            /* Ajax navigation is not supported */
+            location.assign(sURL);
+        }
+    }
+
+    function processLink () {
+        if (this.className === sAjaxClass) {
+            requestPage(this.href);
+            return false;
+        }
+        return true;
+    }
+
+    function init () {
+        oPageInfo.title = document.title;
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx &lt; nLen; document.links[nIdx++].onclick = processLink);
+    }
+
+    const
+
+        /* customizable constants */
+        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
+
+        /* not customizable constants */
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&amp;*/, rView = new RegExp("&amp;" + sViewKey + "\\=[^&amp;]*|&amp;*$", "i"), rEndQstMark = /\?$/,
+        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
+        oPageInfo = {
+            title: null,
+            url: location.href
+        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
+            100: "Continue",
+            101: "Switching Protocols",
+            102: "Processing",
+            200: "OK",
+            201: "Created",
+            202: "Accepted",
+            203: "Non-Authoritative Information",
+            204: "No Content",
+            205: "Reset Content",
+            206: "Partial Content",
+            207: "Multi-Status",
+            208: "Already Reported",
+            226: "IM Used",
+            300: "Multiple Choices",
+            301: "Moved Permanently",
+            302: "Found",
+            303: "See Other",
+            304: "Not Modified",
+            305: "Use Proxy",
+            306: "Reserved",
+            307: "Temporary Redirect",
+            308: "Permanent Redirect",
+            400: "Bad Request",
+            401: "Unauthorized",
+            402: "Payment Required",
+            403: "Forbidden",
+            404: "Not Found",
+            405: "Method Not Allowed",
+            406: "Not Acceptable",
+            407: "Proxy Authentication Required",
+            408: "Request Timeout",
+            409: "Conflict",
+            410: "Gone",
+            411: "Length Required",
+            412: "Precondition Failed",
+            413: "Request Entity Too Large",
+            414: "Request-URI Too Long",
+            415: "Unsupported Media Type",
+            416: "Requested Range Not Satisfiable",
+            417: "Expectation Failed",
+            422: "Unprocessable Entity",
+            423: "Locked",
+            424: "Failed Dependency",
+            425: "Unassigned",
+            426: "Upgrade Required",
+            427: "Unassigned",
+            428: "Precondition Required",
+            429: "Too Many Requests",
+            430: "Unassigned",
+            431: "Request Header Fields Too Large",
+            500: "Internal Server Error",
+            501: "Not Implemented",
+            502: "Bad Gateway",
+            503: "Service Unavailable",
+            504: "Gateway Timeout",
+            505: "HTTP Version Not Supported",
+            506: "Variant Also Negotiates (Experimental)",
+            507: "Insufficient Storage",
+            508: "Loop Detected",
+            509: "Unassigned",
+            510: "Not Extended",
+            511: "Network Authentication Required"
+        };
+
+    var
+
+        oReq, bIsLoading = false, bUpdateURL = false;
+
+    oLoadingBox.id = "ajax-loader";
+    oCover.onclick = abortReq;
+    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
+    oCover.appendChild(oLoadingImg);
+    oLoadingBox.appendChild(oCover);
+
+    onpopstate = function (oEvent) {
+        bUpdateURL = false;
+        oPageInfo.title = oEvent.state.title;
+        oPageInfo.url = oEvent.state.url;
+        getPage();
+    };
+
+    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
+
+    // Public methods
+
+    this.open = requestPage;
+    this.stop = abortReq;
+    this.rebuildLinks = init;
+
+})();
+</pre>
+</div>
+
+<div class="note" id="const_compatibility"><strong>Note:</strong> The current implementation of <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> (constant statement) <strong>is not part of ECMAScript 5</strong>. It is supported in Firefox &amp; Chrome (V8) and partially supported in Opera 9+ and Safari. <strong>It is not supported in Internet Explorer 6-9, or in the preview of Internet Explorer 10</strong>. <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> is going to be defined by ECMAScript 6, but with different semantics. Similar to variables declared with the <a href="/en/JavaScript/Reference/Statements/let" title="en/JavaScript/Reference/Statements/let"><code>let</code></a> statement, constants declared with <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> will be block-scoped. <strong>We used it only for didactic purpose. If you want a full browser compatibility of this library, please replace all the <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> statements with the <a href="/en/JavaScript/Reference/Statements/var" title="en/JavaScript/Reference/Statements/var"><code>var</code></a> statements.</strong></div>
+
+<p>For more information, please see: <a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="/en-US/docs/DOM/Manipulating_the_browser_history">Manipulating the browser history</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.onpopstate") }}</li>
+</ul>
diff --git a/files/es/dom/manipulando_el_historial_del_navegador/index.html b/files/es/dom/manipulando_el_historial_del_navegador/index.html
new file mode 100644
index 0000000000..eb2c0b3fdd
--- /dev/null
+++ b/files/es/dom/manipulando_el_historial_del_navegador/index.html
@@ -0,0 +1,228 @@
+---
+title: Manipulando el historial del navegador
+slug: DOM/Manipulando_el_historial_del_navegador
+tags:
+  - HTML5
+  - historial
+  - para_revisar
+translation_of: Web/API/History_API
+---
+<p>El objeto DOM {{ domxref("window") }} proporciona acceso al historial del navegador a través del objeto {{ domxref("window.history", "history") }} . Este da acceso a métodos y propiedades útiles que permiten avanzar y retroceder a través del historial del usuario, así como --a partir de HTML5-- manipular el contenido del historial.</p>
+
+<h2 id="Viajando_a_través_del_historial">Viajando a través del historial</h2>
+
+<p>Retroceder y avanzar a través del historial del usuario utilizando los métodos <code>back()</code>, <code>forward()</code> y <code>go()</code>.</p>
+
+<h3 id="Moviéndose_hacia_adelante_y_hacia_atrás">Moviéndose hacia adelante y hacia atrás</h3>
+
+<p>Para moverte hacia atrás, solo debes hacer:</p>
+
+<pre>window.history.back();
+</pre>
+
+<p>Esto actuará exactamente como si el usuario hiciera clic en el botón "atrás" en la barra de herramientas del navegador.</p>
+
+<p>De manera similar, puedes moverte hacia adelante (como si el usuario hiciera clic en en el botón "adelante"), de esta forma:</p>
+
+<pre>window.history.forward();
+</pre>
+
+<h3 id="Moverse_a_un_punto_específico_del_historial">Moverse a un punto específico del historial</h3>
+
+<p>Puedes usar el método <code>go()</code> para cargar una página desde el historial de la sesión, identificada por su poscición relativa a la página actual  (Siendo la página actual, por supuesto, relativa al índice 0).</p>
+
+<p>Para moverse atrás una página (equivalente a llamar <code>back()</code>):</p>
+
+<pre><code>window.history.go(-1);</code>
+</pre>
+
+<p>Para moverse una página hacia adelante, como si se llamara a <code>forward()</code>:</p>
+
+<pre><code>window.history.go(1);</code>
+</pre>
+
+<p>De manera similar, puedes avanzar 2 páginas pasando 2 y así sucesivamente.</p>
+
+<p>Otro uso para <code>go()</code> es el de actualizar la página ya sea pasando <code>0</code> como parámetro o ninguno.</p>
+
+<pre><code>// Cada una de las siguientes
+// instrucciones actualiza la página
+window.history.go(0);
+window.history.go();</code></pre>
+
+<p>Puedes obtener el número de páginas en la pila del historial consultando el valor de la propiedad <span class="long_text" id="result_box" lang="es"><span title=""><code>length</code>:</span></span></p>
+
+<pre>var numeroDeEntradas = window.history.length;
+</pre>
+
+<div class="note"><strong>Nota:</strong> Internet Explorer admite el paso de cadenas de URL como parámetro para <code>go()</code>; esto no es estándar y no está implementado en Gecko.</div>
+
+<h2 id="Añadiendo_y_modificando_entradas_del_historial">Añadiendo y modificando entradas del historial</h2>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p>HTML5 introduce los métodos <code>history.pushState()</code> y <code>history.replaceState()</code>, los cuales te permiten añadir y modificar entradas del historial, respectivamente. Estos métodos trabajan en conjunto con el evento {{ domxref("window.onpopstate") }}.</p>
+
+<p>Hacer uso de <code>history.pushState()</code> cambia el referer que es utilizado en la cabecera HTTP por los objetos <a href="/es/docs/XMLHttpRequest">XMLHttpRequest</a> que hayan sido creados luego de cambiar el estado. El referer utilizará la URL del documento cuyo objeto window sea <code>this</code> al momento de la creación del objeto <a href="/es/docs/XMLHttpRequest">XMLHttpRequest</a>.</p>
+
+<h3 id="Ejemplo">Ejemplo</h3>
+
+<p>Supongamos que <span class="nowiki">http://mozilla.org/foo.html</span> ejecuta el siguiente JavaScript:</p>
+
+<pre>var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+</pre>
+
+<p>Esto causará que la barra de URL muestre <span class="nowiki">http://mozilla.org/bar.html</span>, pero no provocará que el navegador carge bar.html ni tampoco que verifique si bar.html existe.</p>
+
+<p>Supongamos ahora que el usuario navega hacia <span class="nowiki">http://google.com</span>, y despúes hace clic en Atrás.  En este punto, la barra de URL mostrará <span class="nowiki">http://mozilla.org/bar.html</span>, y la página tendrá un evento <code>popstate</code> cuyo <em>state object</em> contiene una copia de <code>stateObj</code>. La página en si se verá como <code>foo.html</code>, aunque la página podria modificar su contenido durante el evento <code>popstate</code> event.</p>
+
+<p>Si hacemos clic en "atrás" nuevamente, la URL cambiará a <span class="nowiki">http://mozilla.org/foo.html</span>, y el documento generará otro evento <code>popstate</code> event, esta vez con un state object nulo. Aquí también, ir atrás no cambia el contenido del documento con respecto al paso anterior, aunque el documento permite actualizar su contenido manualmente después de recibir el evento <code>popstate</code>.</p>
+
+<h3 id="El_método_pushState()">El método pushState()</h3>
+
+<p><code>pushState()</code> toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado) y (opcionalmente) una URL.  Vamos a examinar cada uno de estos tres parametros en más detalle:</p>
+
+<ul>
+ <li>
+  <p><strong>object estado</strong> —  El objeto estado es un objeto JavaScript el cual esta asociado con la nueva entrada al historial creada por <code>pushState()</code>. Cada vez que el usuario navega hacia un nuevo estado, un evento <code>popstate</code> event se dispara, y la propiedad <code>state</code> del evento contiene una copia del historial de entradas del objeto estado.</p>
+
+  <p>El objeto estado puede ser cualquier cosa que puedas pasar a <code>JSON.stringify</code>. Dado que Firefox guarda los objetos estado en el disco del usuario para que puedan ser restaurados después de que el usuario reinicie su navegador, se ha impuesto  un tamaño límite de 640K caracteres en representación JSON de un objeto estado. Si pasas un objeto estado cuya representación es más larga que esto a <code>pushState()</code>, el método arrojará una excepción. Si necesitas más espacio, se recomienda usar <code>sessionStorage</code> y/o <code>localStorage</code>.</p>
+ </li>
+ <li>
+  <p><strong>título</strong> — Firefox actualmente ignora este parámetro, aunque podría usarse en el futuro. Pasar una cadena de caracteres vacia aquí podría asegurar estar a salvo de futuros cambios en este método. Alternativamente podrías pasar un título corto del estado hacia el cual te estás moviendo.</p>
+ </li>
+ <li>
+  <p><strong>URL</strong> — La URL de la nueva entrada al  historial está dada por este parámetro. Recuerda que el browser no intentará cargar esta URL después de llamar a <code>pushState()</code>,  <span class="long_text" id="result_box" lang="es"><span title="">pero podría intentar cargar la URL más tarde, por ejemplo, después de que el usuario reinicie su navegador</span></span>. La nueva URL no necesita ser absoluta; si es relativa, es resuelta relativamente a la actual URL.  La nueva URL debe ser del mismo origen que la actual URL. Si no es así, <code>pushState()</code> arrojará una excepción. Este parámetro es opcional; <span class="long_text" id="result_box" lang="es"><span title="">si no se especifica, se tomará la URL actual del documento.</span></span></p>
+ </li>
+</ul>
+
+<p>En un sentido, llamar <code>pushState()</code> es similar a asignar <code>window.location = "#foo"</code>, <span class="long_text" id="result_box" lang="es"><span title="">en tanto que también se va a crear y activar otra entrada al historial asociada con el documento actual</span></span>. Pero <code>pushState()</code> tiene las siguientes ventajas:</p>
+
+<ul>
+ <li>La nueva URL puede ser cualquier URL en el mismo origen de la actual URL. En contraste, asignar <code>window.location</code> te mantiene en el mismo {{ domxref("document") }} solamente si modificas unicamente el hash.</li>
+ <li>No hay por qué cambiar la URL si no se desea. Por el contrario, asignar <code>window.location = "#foo"; solamente crea una nueva entrada en el historial si el hash actual no es </code><code>#foo</code>.</li>
+ <li>Puedes asociar datos arbitrarios con tu nuevo historial de entrada. Con el enfoque hash-based, tu necesitas codificar todos datos relevantes dentro de una cadena de caracteres corta.</li>
+ <li>Si <code>title</code> es utilizado por los navegadores, estos datos pueden utilizarse (independientemente de, por ejemplo, el hash).</li>
+</ul>
+
+<p>Hay que tener en cuenta que <code>pushState()</code> nunca dispara un evento <code>hashchange</code>, incluso si la nueva URL difiere de la antigua URL únicamente en su hash.</p>
+
+<p>En un documento XUL, crea el elemento XUL específico.</p>
+
+<p>En otros documentos, crea un elemento con un namespace de URI nulo (<code>null</code>).</p>
+
+<h3 id="El_método_replaceState()">El método replaceState()</h3>
+
+<p><code>history.replaceState()</code> trabaja exactamente igual a <code>history.pushState()</code> excepto que <code>replaceState()</code> modifica la entrada al historial actual en lugar de crear una nueva.</p>
+
+<p><code>replaceState()</code> es particularmente útil si deseas actualizar el objeto estado o la URL del la actual entrada al historial en respuesta a alguna acción del usuario.</p>
+
+<h3 id="El_evento_popstate">El evento popstate</h3>
+
+<p>Un evento <code>popstate</code> es dirigido a la ventana cada vez que la entrada al historial cambia. Si la entrada al historial es activada y fue creada por un llamado a <code>pushState</code> o afectada por una llamada a <code>replaceState</code>, la propiedad state del evento <code>popstate</code> contiene una copia del historial de entradas del objeto estado.</p>
+
+<p>Ver {{ domxref("window.onpopstate") }} para un ejemplo de uso.</p>
+
+<h3 id="Leyendo_el_estado_actual">Leyendo el estado actual</h3>
+
+<p>Cuando la página carga, debería tener un objeto de estado no nulo. Esto podría ocurrir, por ejemplo, si la página establece un object de estado (usando <code>pushState()</code> o <code>replaceState()</code>) y entonces el usuario reinicia su navegador. Cuando la página carga de nuevo, la página recibirá el evento onload, pero no el evento popstate.  Sin embargo, si lees la propiedad history.state, obtendrás el objeto estado que habrías tenido si se hubiera lanzado el evento apopstate.</p>
+
+<p>Puedes leer el estado del historial actual sin tener que esperar un evento <code>popstate</code> usando la propiedad  <code>history.state</code> de esta manera:</p>
+
+<pre><code>var currentState = history.state;</code></pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Para un ejemplo completo de un sitio AJAX, ver: <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example">Ejemplo de navegación AJAX</a>.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado </th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No hay cambios desde {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>replaceState, pushState</td>
+   <td>5</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>history.state</td>
+   <td>18</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>replaceState, pushState</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>history.state</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.onpopstate") }}</li>
+</ul>
diff --git a/files/es/dom/touch_events/index.html b/files/es/dom/touch_events/index.html
new file mode 100644
index 0000000000..02a4a4eacb
--- /dev/null
+++ b/files/es/dom/touch_events/index.html
@@ -0,0 +1,292 @@
+---
+title: Eventos de toque
+slug: DOM/Touch_events
+tags:
+  - DOM
+  - Event
+  - Mobile
+  - NeedsMobileBrowserCompatTable
+  - eventos
+translation_of: Web/API/Touch_events
+---
+<p>Con el fin de proporcionar soporte de calidad para usuarios de interfaces táctiles, los eventos táctiles dan la posibilidad de interpretar la actividad de los dedos en pantallas táctiles o trackpads.</p>
+
+<h2 id="Definiciones">Definiciones</h2>
+
+<dl>
+ <dt>Superficie</dt>
+ <dd>La superficie sensible al tacto. Esta puede ser una pantalla o un trackpad.</dd>
+</dl>
+
+<dl>
+ <dt><strong style="font-weight: bold;">Punto de toque</strong></dt>
+ <dd>Un punto de contacto con la superficie. Esto podría ser un dedo (o un codo, oreja, nariz, o lo que sea, pero probablemente un dedo) o un stylus.</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{ domxref("TouchEvent") }}</dt>
+ <dd>Representa un evento que ocurre cuando el estado de los toques en la superficie cambian.</dd>
+ <dt>{{ domxref("Touch") }}</dt>
+ <dd>Represeta un único punto de contacto entre el usuario y la superficie táctil.</dd>
+ <dt>{{ domxref("TouchList") }}</dt>
+ <dd>Representa varios puntos de toque: esto se utiliza cuando el usuario tiene, por ejemplo, varios dedos en la superficie al mismo tiempo.</dd>
+ <dt>{{ domxref("DocumentTouch") }}</dt>
+ <dd>Contiene varios métodos para crear objetos de {{domxref("Touch")}} y {{domxref("TouchList")}}.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Este ejemplo muestra múltiples puntos de toques al mismo tiempo, permitiendo al usuario dibujar en un {{ HTMLElement("canvas") }} con más de un dedo a la vez. Esto funciona solamente en un navegador que soporte eventos táctiles.</p>
+
+<div class="note"><strong>Not</strong><strong>a:</strong> El texto de abajo usa el término "dedo" cuando describe el contacto con la superficie, pero esto podría ser, por supuesto, también un stylus u otro método de contacto.</div>
+
+<h3 id="Configurando_los_eventos_de_manipulación">Configurando los eventos de manipulación</h3>
+
+<p>Cuando la página carga, la función <code>startup()</code> mostrada a continuación es llamada por nuestro atributo <code>onload</code> del elemento {{ HTMLElement("body") }}.</p>
+
+<pre class="brush: js">function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchleave", handleLeave, false);
+  el.addEventListener("touchmove", handleMove, false);
+}
+</pre>
+
+<p>Esto simplemente configura todos los detectores de eventos para nuestro elemento {{ HTMLElement("canvas") }}, por lo que podremos manejar todos los eventos de toque cuando se produzcan.</p>
+
+<h3 id="Seguimiento_de_nuevos_toques">Seguimiento de nuevos toques</h3>
+
+<p>Cuando un evento <code>touchstart</code> ocurre, indicando que un nuevo toque sobre la superficie se ha producido, la función <code>handleStart()</code> de a continuación es llamada.</p>
+
+<pre class="brush: js">function handleStart(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    ongoingTouches.push(touches[i]);
+    var color = colorForTouch(touches[i]);
+    ctx.fillStyle = color;
+    ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
+  }
+}
+</pre>
+
+<p>Esto llama a {{ domxref("event.preventDefault()") }} para mantener al navegador procesando el evento de toque (esto también previene que un evento del ratón o mouse sea entregado). Entonces obtenemos el contexto y lanzamos la lista de puntos de contacto cambiados de la propiedad {{ domxref("TouchEvent.changedTouches") }} del evento.</p>
+
+<p>Después de ello, iteramos sobre todos los objetos {{ domxref("Touch") }} de la lista, insertándolo en una matriz de puntos de toque activos y dibujando el punto de inicio como un pequeño rectángulo; estamos usando una línea de 4 pixeles de ancho, por tanto estamos dibujando un cuadrado de 4 por 4 píxeles como punto de consistencia.</p>
+
+<h3 id="Dibujando_mientras_los_eventos_de_toque_se_mueven">Dibujando mientras los eventos de toque se mueven</h3>
+
+<p>Cada vez que uno o más dedos se mueven, un evento <code>touchmove</code> es entregado, resultando en una llamada a nuestra función <code>handleMove()</code>. Su responsabilidad en este ejemplo es actualizar la información de toque cacheada y dibujar una línea desde la posición previa a la posición actual en cada toque.</p>
+
+<pre class="brush: js">function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ctx.closePath();
+    ctx.stroke();
+    ongoingTouches.splice(idx, 1, touches[i]);  // swap in the new touch record
+  }
+}
+</pre>
+
+<p>Esto se repite también en los toques cambiados, pero mira en nuestra matriz de información de toques cacheados la información previa de cada toque con el fin de determinar los puntos de inicio para cada nuevo segmento de línea de toques que será dibujada. Esto se hace mirando cada propiedad de los toques de {{ domxref("Touch.identifier") }} . Esta propiedad es un único entero para cada toque, y sigue siendo consistente para cada evento durante la duración del contacto de cada dedo con la superficie.</p>
+
+<p>Esto nos permite conseguir las coordenadas de la posición previa de cada toque y usar el método apropiado de contexto para dibujar un segmento de línea uniendo dos posiciones a la vez.</p>
+
+<p>Después de dibujar la línea, llamamos a  <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a> para reemplazar la información previa sobre el punto de toque con la información actual de la matriz <code>ongoingTouches</code>.</p>
+
+<h3 id="Manejando_el_final_de_un_toque">Manejando el final de un toque</h3>
+
+<p>Cuando el usuario levanta un dedo de la superficie, un evento <code>touchend</code> es enviado.  De igual manera, si el dedo se desliza fuera de nuestro lienzo, obtenemos un evento <code>touchleave</code>. Manejamos ambos casos de la misma manera: llamando a la función <code>handleEnd()</code> de abajo. Su trabajo es dibujar el último segmento de línea para cada toque que ha finalizado y remueve el punto de toque de la lista de toques en marcha.</p>
+
+<pre class="brush: js">function handleEnd(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[i].pageX, ongoingTouches[i].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ongoingTouches.splice(i, 1);  // remove it; we're done
+  }
+}
+</pre>
+
+<p>Esto es muy similar a la función previa; la única diferencia real es que cuando llamamos a  <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a>, simplemente remueve la antigua entrada de la lista de toques en marcha, sin añadir la información actualizada. El resultado es que detenemos el seguimiento del punto de toque.</p>
+
+<h3 id="Manejando_los_toques_cancelados">Manejando los toques cancelados</h3>
+
+<p>Si el dedo del usuario se equivoca en la Interfaz del navegador, o el toque necesita ser cancelado, el evento <code>touchcancel</code> es enviado, y llamamos a la función <code>handleCancel()</code> abajo.</p>
+
+<pre class="brush: js">function handleCancel(evt) {
+  evt.preventDefault();
+  var touches = evt.changedTouches;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    ongoingTouches.splice(i, 1);  // remove it; we're done
+  }
+}
+</pre>
+
+<p>Dado que la idea es cancelar el toque inmediatamente, simplemente lo removemos de la lista de toques en marcha sin dibujar un segmento de línea final.</p>
+
+<h3 id="Funciones_de_conveniencia">Funciones de conveniencia</h3>
+
+<p>Este ejemplo usa dos funciones de convenience que deben mirarse brevemente para ayudar a que el resto del código sea más claro.</p>
+
+<h4 id="Seleccionando_un_color_para_cada_toque">Seleccionando un color para cada toque</h4>
+
+<p>Con el fin de hacer que cada dibujo de toque se vea diferente, la función  <code>colorForTouch()</code> es usada para elegir un color basado en el identificador único de toque. Este identificador estará siempre entre 0 y un valor menos que el número de toques activos. Puesto que es muy improbable que alguna persona con más de 16 dedos use este demo, convertimos estos directamente en colores de escalas grises.</p>
+
+<pre class="brush: js">function colorForTouch(touch) {
+  var id = touch.identifier;
+  id = id.toString(16); // make it a hex digit
+  return "#" + id + id + id;
+}
+</pre>
+
+<p>El resultado de esta función es un string o cadena que puede ser usada cuando se llame a funciones {{ HTMLElement("canvas") }} para configurar los colores de dibujos. Por ejemplo, para un valor {{ domxref("Touch.identifier") }}  de 10, el resultado string o cadena es "#aaa".</p>
+
+<h4 id="Encontrando_un_toque_continuo">Encontrando un toque continuo</h4>
+
+<p>La función <code>ongoingTouchIndexById()</code> abajo explora mediante la matriz <code>ongoingTouches</code> para encontrar el toque que coincida con el identificador dado, luego devuelve los índices de toques a la matriz.</p>
+
+<pre class="brush: js">function ongoingTouchIndexById(idToFind) {
+  for (var i=0; i&lt;ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // not found
+}
+</pre>
+
+<p><a href="/samples/domref/touchevents.html">Ver ejemplo en vivo</a></p>
+
+<h2 id="Consejos_adicionales">Consejos adicionales</h2>
+
+<p>Esta sección provee consejos adicionales sobre como manejar los eventos de toques en tu aplicación web.</p>
+
+<h3 id="Manejando_los_clics">Manejando los clics</h3>
+
+<p>Ya que la llamada <code>preventDefault()</code> en un <code>touchstart</code> o el primer evento <code>touchmove</code> de una serie impide que los eventos correspondientes eventos del mouse o ratón se disparen, es común llamar a <code>preventDefault()</code> en <code>touchmove</code> en lugar de <code>touchstart</code>. De esta manera, los eventos del ratón pueden todavía ser disparados y cosas como enlaces siguen funcionando. Alternativamente, algunos frameworks tienen que referirse a eventos de toque como eventos de ratón para este mismo propósito. (Este ejemplo es muy simplificado y podria resultar en un extraño comportamiento. Solo se diseñó como guía).</p>
+
+<pre class="brush: js">function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length &gt; 1 || (evt.type == "touchend" &amp;&amp; evt.touches.length &gt; 0))
+    return;
+
+  var newEvt = <a href="https://developer.mozilla.org/en/DOM/document.createEvent" rel="internal" title="en/DOM/document.createEvent">document.createEvent</a>("MouseEvents");
+  var type = null;
+  var touch = null;
+  switch (event.type) {
+    case "touchstart": type = "mousedown"; touch = event.changedTouches[[0];
+    case "touchmove":  type = "mousemove"; touch = event.changedTouches[[0];
+    case "touchend":   type = "mouseup"; touch = event.changedTouches[0];
+  }
+  newEvt.<strong>initMouseEvent</strong>(type, true, true, event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a>.ownerDocument.defaultView</code>, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
+  event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a></code>.<a href="https://developer.mozilla.org/en/DOM/element.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(newEvt);
+}
+</pre>
+
+<h3 id="Llamando_a_preventDefault()_solo_en_un_segundo_toque">Llamando a preventDefault() solo en un segundo toque</h3>
+
+<p>Una cosa para prevenir cosas como <code>pinchZoom</code> en una página es llamar a <code>preventDefault()</code> en el segundo toque de una serie. Este comportamiento no está bien definido en los eventos de toque, y resulta en diferentes comportamientos en diferentes navegadores (osea iOS evitará el zoom o acercamiento pero permitirá vista panorámica con ambos dedos. Android permitirá zoom o acercamiento pero no una panorámica. Opera and Firefox actualmente evita panorámica y zoom o acercamiento). Actualmente, no se recomienda depender de ningún comportamiento en particular en este caso, si no mas bien depender de una meta vista para evitar el zoom.</p>
+
+<dl>
+</dl>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatChrome("22.0") }}</td>
+   <td>{{ CompatGeckoDesktop("18.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas_de_Gecko">Notas de Gecko</h3>
+
+<p>La preferencia <code>dom.w3c_touch_events.enabled</code> puede ser utilizada para activar o desactivar el soporte de eventos de toque estándares; por defecto, están activados.</p>
+
+<div class="geckoVersionNote" style="">
+<p>{{ gecko_callout_heading("12.0") }}</p>
+
+<p>Antes de Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko no soportaba multi-toques; solo un toque cada vez era reportado.</p>
+</div>
+
+<div class="note"><strong>Note: </strong>Antes de Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko ofrecía una <a href="/en/DOM/Touch_events_(Mozilla_experimental)" title="en/DOM/Touch events (Mozilla experimental)">API de eventos de toque propietaria</a>. Está API está obsoleta actualmente; deberías cambiar a esta."</div>