diff options
Diffstat (limited to 'files/es/conflicting/web/api')
21 files changed, 0 insertions, 2474 deletions
diff --git a/files/es/conflicting/web/api/canvas_api/tutorial/index.html b/files/es/conflicting/web/api/canvas_api/tutorial/index.html deleted file mode 100644 index 31bdbfc942..0000000000 --- a/files/es/conflicting/web/api/canvas_api/tutorial/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: Dibujando gráficos con canvas -slug: conflicting/Web/API/Canvas_API/Tutorial -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas -original_slug: Web/HTML/Canvas/Drawing_graphics_with_canvas ---- -<div class="note"> - <p>Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive <a href="/en-US/docs/HTML/Canvas/Tutorial" title="HTML/Canvas/tutorial">Canvas tutorial</a>, this page should probably be redirected there as it's now redundant but some information may still be relevant.</p> -</div> -<h2 id="Introduction" name="Introduction">Introduction</h2> -<p>Firefox 1.5, incluye un nuevo elemento HTML para gráficos programables. <canvas> está basado en la especificación de canvas WHATWG, la que a su vez está basada en el <canvas> de Apple, implementado en Safari. Puede ser usado para la renderización de gráficos, elementos de Interfaz de usuarios, y otros gráficos personalizados en el cliente.</p> -<p>La etiqueta <canvas> crea una superficie de dibujo de tamaño fijo que expone uno o más contextos de renderizado. Nos enfocaremos en la representación del contexto 2D Para gráficos 3D, podrías usar la <a href="/es-ES/docs/WebGL">representación del contexto WebGL</a></p> -<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">El contexto de representación 2D</h2> -<h3 id="A_Simple_Example" name="A_Simple_Example">Un ejemplo sencillo</h3> -<p>Para comenzar, aquí un sencillo ejemplo que dibuja dos rectángulos interesándose, uno de los cuales tiene transparencia alfa.</p> -<pre class="brush: js">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - ctx.fillStyle = "rgb(200,0,0)"; - ctx.fillRect (10, 10, 55, 50); - - ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; - ctx.fillRect (30, 30, 55, 50); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="120" height="120"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</p> -<p>La funcion draw obtiene el elemento canvas, entonces obtiene el contexto 2D. El objeto ctx puede entonces actualmente ser renderizado para el canvas El ejemplo simplemente llena dos rectangulos, configurando fillStyle a dos diferentes colores utilizando las especificaciones de color de CSS y llamando a fillRect El segundo FillStyle usa rgba() para especificar un valor alpha junto con el color.</p> -<p>El fillRect, strokeRect, y clearRect llama a render a ser llenado, bosquejado o limpiar rectangulo. Para representar formas más complejas, se usan trayectorias. </p> -<h3 id="Using_Paths" name="Using_Paths">Usando trayectorias</h3> -<p>La funcion Path inicia un nuevo trazo, y move to, line to, arc to, arc, y metodos similares son usados para agregar segmentos al trazo. La trayectoria puede ser cerrada usando closePath Una vez la trayectoria es creada, puedes usar fill o stroke para representar la trayectoria en el canvas.</p> -<pre class="brush: js">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - ctx.fillStyle = "red"; - - ctx.beginPath(); - ctx.moveTo(30, 30); - ctx.lineTo(150, 150); - // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong. - ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right -> - ctx.lineTo(30, 30); - ctx.fill(); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="160" height="160"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</p> -<p>Llamando fill() o stroke() causa que el trazo sea usado. Para ser llenado o juntado otra vez, el trazo debe ser recreado.</p> -<h3 id="Graphics_State" name="Graphics_State">Estado de gráficos</h3> -<p>Los atributos del contexto como fillStyle, strokeStyle, lineWidth, y lineJoin son parte de actual estado de graficos El contexto provee dos metodos, save() y restore(), que pueden ser usados para mover el actual estado y desde estado stack.</p> -<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">Un ejemplo más complicado</h3> -<p>Hay aquì un ejemplo más complicado, que usa rutas,estado y tambien introduce la actual matriz de transformación. Los metodos de contexto translate(), scale(), y rotate() todos transforman la matriz actual. Todos los puntos renderizados son primero transformados por esta matriz.</p> -<pre class="brush: js">function drawBowtie(ctx, fillStyle) { - - ctx.fillStyle = "rgba(200,200,200,0.3)"; - ctx.fillRect(-30, -30, 60, 60); - - ctx.fillStyle = fillStyle; - ctx.globalAlpha = 1.0; - ctx.beginPath(); - ctx.moveTo(25, 25); - ctx.lineTo(-25, -25); - ctx.lineTo(25, -25); - ctx.lineTo(-25, 25); - ctx.closePath(); - ctx.fill(); -} - -function dot(ctx) { - ctx.save(); - ctx.fillStyle = "yellow"; - ctx.fillRect(-2, -2, 4, 4); - ctx.restore(); -} - -function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - // note that all other translates are relative to this one - ctx.translate(45, 45); - - ctx.save(); - //ctx.translate(0, 0); // unnecessary - drawBowtie(ctx, "red"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 0); - ctx.rotate(45 * Math.PI / 180); - drawBowtie(ctx, "green"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(0, 85); - ctx.rotate(135 * Math.PI / 180); - drawBowtie(ctx, "blue"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 85); - ctx.rotate(90 * Math.PI / 180); - drawBowtie(ctx, "yellow"); - dot(ctx); - ctx.restore(); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="185" height="185"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</p> -<p>Esto define dos métodos, lazo y punto, que son llamados 4 veces. Antes de cada llamada, los metodos translate() y rotate() son utilizados para la matriz de transformación actual, que a su vez posicionara el punto y el lazo. el punto presenta un pequeño cuadrado negro centrado a (0,0). Ese punto se mueve alrededor de la matriz de transformación. El lazo presenta un simple ruta de lazo usando el estillo de llenado pasado.</p> -<p>Como las operaciones de la matriz son acumulativas, save() y restore() son utilizados para cada conjunto de llamadas para restaurar el estado de canvas original. Una cosa a tener en cuenta es que la rotación siempre se produce en torno al origen actual, por lo que a traducir () rotate () translate () secuencia producirá resultados diferentes a traducir () translate () serie de llamadas rotate ().</p> -<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Compatibilidad con Apple <canvas></h2> -<p>En su mayor parte, <canvas> es compatible con Apple y otras implementaciones. Hay, sin embargo, algunas cuestiones a tener en cuenta, que se describen aquí.</p> -<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">Etiqueta </canvas> requerida </h3> -<p>En la aplicación de Apple Safari, <canvas> es un elemento ejecutado de la misma manera <img> es, sino que no tiene una etiqueta de cierre. Sin embargo, para <canvas> tener uso generalizado en la web, se debe proporcionar alguna facilidad para contenido de reserva. Por lo tanto, la implementación de Mozilla tiene una etiqueta de cierre requerida.</p> -<p>Si no se necesita contenido de reserva, un simple <canvas id="foo" ...> </ canvas> será totalmente compatible con Safari y Mozilla - Safari simplemente ignorar la etiqueta de cierre.</p> -<p>Si se desea contenido de reserva, algunos trucos CSS se deben emplear para enmascarar el contenido de reserva desde Safari (las cuales deben emitir sólo la tela), y también para enmascarar los propios trucos CSS de IE (que debería hacer que el contenido de reserva).</p> -<pre>canvas { - font-size: 0.00001px !ie; -}</pre> -<h2 id="Additional_Features" name="Additional_Features">Caracteristicas adicionales </h2> -<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">Renderizando el contenido we dentro de un Canvas.</h3> -<div class="note"> - Esta caracteristica esta solo disponible para codigo ejecutado con privilegios de Chrome. No esta permitido en paginas HTML normales. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">Porqué leer</a>.</div> -<p>El canvas de Mozilla se extendio con el metodo drawWindow(). Este metodo dibuja una instantanea de los contenidos de una ventana DOM dentro del canvas. Por ejemplo:</p> -<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); -</pre> -<p>atraería el contenido de la ventana actual, en el rectángulo (0,0,100,200) en píxeles con respecto a la parte superior izquierda de la ventana, sobre un fondo blanco, en el lienzo. Mediante la especificación de "rgba (255,255,255,0)" como el color, el contenido no se dibujan con un fondo transparente (lo que sería más lenta).</p> -<p>Normalmente es una mala idea usar un fondo distinto de blanco "rgb(255, 255, 255)" o transparente, esto es lo que hacen todos los navegadores, y muchos sitios web esperan que esas partes transparentes de su interfaz serán puestas en fondo blanco.</p> -<p>Con este metodo, es posible ocupar un IFRAME oculto con contenido arbitrario (por ejemplo, texto HTML con estilo CSS, o SVG) y dibujarlo dentro de un canvas. sera escalado, rotado y sucesivamente de acuerdo a la transformación actual.</p> -<p>Extensión de previsualización pestaña de Ted Mielczarek utiliza esta técnica en cromo para proporcionar imágenes en miniatura de las páginas web, y la fuente está disponible para su referencia. </p> -<div class="note"> - Nota: usar canvas.drawWindow() mientras manejamos un evento de carga de documento, no trabaja En Firefox 3.5 o superior, puedes hacer esto en un manejador para el evento MozAfterPaint para dibujr satisfactoriamente un contenido HTML dentro de un canvas al cargar la pagina </div> -<h2 id="See_also" name="See_also">See also</h2> -<ul> - <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li> - <li><a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li> - <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li> - <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> - <li>Some <a href="/en-US/docs/tag/canvas_examples">examples</a>: - <ul> - <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li> - <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li> - <li><a href="/en-US/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li> - <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li> - <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li> - </ul> - </li> - <li><a href="/en-US/docs/tag/canvas">And more...</a></li> -</ul> diff --git a/files/es/conflicting/web/api/crypto/getrandomvalues/index.html b/files/es/conflicting/web/api/crypto/getrandomvalues/index.html deleted file mode 100644 index 7764d268c4..0000000000 --- a/files/es/conflicting/web/api/crypto/getrandomvalues/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: RandomSource -slug: conflicting/Web/API/Crypto/getRandomValues -tags: - - API - - Interface - - NeedsTranslation - - RandomSource - - Reference - - TopicStub - - Web Crypto API -translation_of: Web/API/Crypto/getRandomValues -translation_of_original: Web/API/RandomSource -original_slug: Web/API/RandomSource ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p><strong><code>RandomSource</code></strong> represents a source of cryptographically secure random numbers. It is available via the {{domxref("Crypto")}} object of the global object: {{domxref("Window.crypto")}} on Web pages, {{domxref("WorkerGlobalScope.crypto")}} in workers.</p> - -<p><code>RandomSource</code> is a not an interface and no object of this type can be created.</p> - -<h2 id="Properties">Properties</h2> - -<p><em><code>RandomSource</code> neither defines nor inherits any property.</em></p> - -<dl> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt> - <dd>Fills the passed {{ domxref("ArrayBufferView") }} with cryptographically sound random values.</dd> -</dl> - -<h2 id="Specification" name="Specification">Specification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td> - <td>{{Spec2('Web Crypto API')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility">Browser Compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>11.0 {{ webkitbug("22049") }}</td> - <td>{{CompatGeckoDesktop(21)}} [1]</td> - <td>11.0</td> - <td>15.0</td> - <td>3.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</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>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>23</td> - <td>{{CompatGeckoMobile(21)}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Although the transparent <code>RandomSource</code> is only available since Firefox 26, the feature was available in Firefox 21.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{ domxref("Window.crypto") }} to get a {{domxref("Crypto")}} object.</li> - <li>{{jsxref("Math.random")}}, a non-cryptographic source of random numbers.</li> -</ul> diff --git a/files/es/conflicting/web/api/document_object_model/index.html b/files/es/conflicting/web/api/document_object_model/index.html deleted file mode 100644 index f318f65508..0000000000 --- a/files/es/conflicting/web/api/document_object_model/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Acerca del Modelo de Objetos del Documento -slug: conflicting/Web/API/Document_Object_Model -tags: - - DOM - - Todas_las_Categorías -translation_of: Web/API/Document_Object_Model -translation_of_original: DOM/About_the_Document_Object_Model -original_slug: Acerca_del_Modelo_de_Objetos_del_Documento ---- -<h3 id=".C2.BFQu.C3.A9_es_DOM.3F" name=".C2.BFQu.C3.A9_es_DOM.3F">¿Qué es DOM?</h3> - -<p>El <strong>Modelo de Objetos del Documento</strong> (DOM) es un <a class="external" href="http://es.wikipedia.org/wiki/API">API</a> 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 y visualización. Esencialmente, comunica las páginas web con los scripts o los lenguajes de programación.</p> - -<p>Todas las propiedades, métodos, y eventos disponibles por el desarrollador web para manipular y crear páginas web están organizados en objetos (por ejemplo: el objeto 'document' representa al documento en sí mismo, el objeto 'table' representa los elementos HTML para tablas, etcétera). En los navegadores modernos estos objetos son manejables con lenguajes de scripts.</p> - -<p>Es muy común usar DOM conjuntamente con <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a>. Así es, el código es escrito en JavaScript, pero éste usa DOM para tener acceso a la página Web y sus elementos. Sin embargo, DOM fue diseñado para ser independiente de cualquier lenguaje de programación concreto, poniendo la representación estructural del documento disponible en un solo API consistente. Aunque en este sitio nos centremos en JavaScript, las implementaciones de DOM pueden hacerse para <a class="external" href="http://www.w3.org/DOM/Bindings">cualquier lenguaje</a>.</p> - -<p>El <a class="external" href="http://www.w3c.es/">Consorcio de World Wide Web</a> establece un <a class="external" href="http://www.w3.org/DOM/">estándar para el DOM</a>, llamado W3C DOM. Actualmente los navegadores más importantes lo soportan correctamente, ésto permite crear poderosas aplicaciones multi-navegador.</p> - -<h3 id=".C2.BFPor_qu.C3.A9_es_importante_el_soporte_que_Mozilla_da_al_DOM.3F" name=".C2.BFPor_qu.C3.A9_es_importante_el_soporte_que_Mozilla_da_al_DOM.3F">¿Por qué es importante el soporte que Mozilla da al DOM?</h3> - -<p><em>HTML dinámico</em> (<a href="/es/DHTML" title="es/DHTML">DHTML</a>) es un término usado por muchos para describir la combinación de HTML, hojas de estilo y scripts que permite que los documentos sean dinámicos. El grupo de trabajo W3C DOM trabaja duro para asegurarse de que sus soluciones son interoperables e independientes del lenguaje (ver también la <a class="external" href="http://www.w3.org/DOM/faq.html">DOM FAQ</a>). Cuando Mozilla reclama el título de "Plataforma para aplicaciones web", el soporte a DOM es uno de los rasgos más solicitados, y es necesario si Mozilla quiere ser una alternativa real a otros navegadores.</p> - -<p>El hecho incluso más importante es que la interfaz de usuario de Firefox (también la de Mozilla Suite y Thunderbird) está construida usando XUL - un lenguaje XML para interfaces de usuario. Así Mozilla usa el DOM para manipular sus propias interfaces de usuario. <small>(<a href="/en/Dynamically_modifying_XUL-based_user_interface">en inglés</a>)</small></p> diff --git a/files/es/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html b/files/es/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html deleted file mode 100644 index 9e3c7c7c46..0000000000 --- a/files/es/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: DOM developer guide -slug: conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10 -tags: - - API - - DOM - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM -original_slug: Web/Guide/DOM ---- -<p>{{draft}}</p> -<p>The <a href="/docs/DOM">Document Object Model</a> is an API for <a href="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML">XML</a> documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.</p> -<p>All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.</p> -<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p> -<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p> -<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Why is the DOM important?</h2> -<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.</p> -<p>Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p> -<h2 id="More_about_the_DOM">More about the DOM</h2> -<p>{{LandingPageListSubpages}}</p> diff --git a/files/es/conflicting/web/api/document_object_model_7d961b8030c6099ee907f4f4b5fe6b3d/index.html b/files/es/conflicting/web/api/document_object_model_7d961b8030c6099ee907f4f4b5fe6b3d/index.html deleted file mode 100644 index ae8c384e87..0000000000 --- a/files/es/conflicting/web/api/document_object_model_7d961b8030c6099ee907f4f4b5fe6b3d/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: DOM -slug: conflicting/Web/API/Document_Object_Model_7d961b8030c6099ee907f4f4b5fe6b3d -tags: - - DOM - - Todas_las_Categorías -translation_of: Web/API/Document_Object_Model -translation_of_original: DOM -original_slug: DOM ---- -<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&language=es" title="Special:Tags?tag=DOM&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>: <small>"¿Qué está haciendo que? ¿En un script embebido en mi página web, el cual usa DOM y Javascript?"</small> ; <a href="/es/Modificando_dinámicamente_las_interfaces_de_usuario_en_XUL">Modificando dinámicamente las interfaces de usuario en XUL</a>: <small>Fundamentos de manipulación con XUL UI y métodos DOM.</small> ; <a href="/es/Espacios_en_blanco_en_el_DOM">Espacios en blanco en el DOM</a>: <small>Una solución al problema de ignorar los espacios en blanco cuando se interactúa con el DOM.</small> ; <a href="/es/Tablas_HTML_con_JavaScript_e_interfaces_DOM">Tablas HTML con JavaScript e interfaces DOM</a>: <small>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 .</small> fin de enlaces a ninguna parte</span> <span class="alllinks"><a href="/Special:Tags?tag=DOM&language=es" title="Special:Tags?tag=DOM&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&language=es" title="Special:Tags?tag=DOM:Herramientas&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/conflicting/web/api/document_object_model_9f3a59543838705de7e9b080fde3cc14/index.html b/files/es/conflicting/web/api/document_object_model_9f3a59543838705de7e9b080fde3cc14/index.html deleted file mode 100644 index bd1c67c343..0000000000 --- a/files/es/conflicting/web/api/document_object_model_9f3a59543838705de7e9b080fde3cc14/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Prefacio -slug: conflicting/Web/API/Document_Object_Model_9f3a59543838705de7e9b080fde3cc14 -tags: - - DOM - - Todas_las_Categorías -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/API/Document_Object_Model/Preface -original_slug: Referencia_DOM_de_Gecko/Prefacio ---- -<p>« <a href="es/Referencia_DOM_de_Gecko">Referencia DOM de Gecko</a></p> - -<h3 id="Sobre_Esta_referencia" name="Sobre_Esta_referencia">Sobre Esta referencia</h3> - -<p>Esta parte describe el manual en sí: para quién está hecho, cómo se presenta la información y cómo se pueden usar los ejemplos de la referencia en el desarrollo propio de DOM.</p> - -<p>Notará que este documento está en curso de desarrollo y aún no es un listado completo de todos los métodos y propiedades DOM que funcionan para GECKO. Sin embargo, cada parte individual de esta guía (por ejemplo, <a href="es/DOM/document">La referencia al documento de DOM</a>) sí está completa para el/los objeto/s que describe. Cuando nuevas informaciones de referencia para los numerosos miembros de esta enorme API estén disponibles, se irán integrando dentro de este documento.</p> - -<h3 id="A_qui.C3.A9n_va_dirigida_esta_gu.C3.ADa.3F" name="A_qui.C3.A9n_va_dirigida_esta_gu.C3.ADa.3F">A quién va dirigida esta guía?</h3> - -<p>El lector de <a href="es/Referencia_DOM_de_Gecko">Referencia DOM de Gecko</a> puede ser un desarrollador Web o un usuario sabio que tiene alguna idea de como se construyen las páginas Web. Esta referencia evita tener presunciones sobre el nivel de conocimiento del lector con el DOM, el <a href="es/XML">XML</a>, los servidores o estándares Web y también con <a href="es/JavaScript">JavaScript</a>, el lenguaje en el cual el DOM se hace accesible al lector. Al contrario, sí, supone de la familiaridad con <a href="es/HTML">HTML</a>, el marcado, la estructura básica de las páginas Web, los navegadores y con las hojas de estilo.</p> - -<p>El material introductorio presentado aquí, con sus varios ejemplos y sus explicaciones de alto nivel, debe ser valorado tanto para los desarrolladores inexpertos como para los experimentados, no es sólo una guía de desarrollo Web para <em>principiantes</em>. En general y sin embargo se le puede considerar como un manual evolutivo del API.</p> - -<h3 id="Qu.C3.A9_es_Gecko.3F" name="Qu.C3.A9_es_Gecko.3F">Qué es Gecko?</h3> - -<p>Mozilla, Firefox, Netscape 6+, y otros navegadores basados en Mozilla tienen la idéntica codificación DOM. Es así porque utilizan la misma tecnología. <span class="comment">naturalmente, es sólo aplicable a los productos basados en la misma versión de Gecko, pero es complicado explicarlo - (naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain)</span></p> - -<p>Gecko, la parte del programa en estos navegadores que se ocupa del análisis del HTML, de la disposición de las páginas, del modelo de objeto del documento, e incluso de la representación de la interfaz de aplicación entera, es una rápida, máquina cumplidora de los estándares de presentación que ejecutar los estándares del modelo de objeto del navegador (por ejemplo, <a href="es/DOM/window">ventana - <code>window</code></a>) del W3C DOM y del parecido DOM (pero no estándar) en el contexto de las páginas Web y la interfaz de aplicación (o<em>chrome</em>) del navegador.</p> - -<p>Aunque la interfaz de aplicación y el contenido exhibido por el navegador son diferentes en muchos puntos, el DOM los expone uniformemente como una jerarquía de nodos. <span class="comment">(commenting this incomplete sentence out for now...) The tree structure of the DOM (which in its application to the user</span></p> - -<h3 id="Sintaxis_del_API" name="Sintaxis_del_API">Sintaxis del API</h3> - -<p>Cada descripción en la referencia API incluye la sintaxis, los parámetros de entrada y salida (donde el tipo de retorno es agarrado), un ejemplo, todas las notas adicionales y un enlace a la especificación apropiada.</p> - -<p>Típicamente, las propiedades de sólo lectura tienen una simple línea de sintaxis, porque es posible leerlas pero imposible modificarlas. Por ejemplo, la propiedad de sólo lectura <code>availHeight</code> del objeto <code>screen</code> incluye la información siguiente:</p> - -<div></div> - -<p>Eso significa que sólo se puede utilizar la propiedad a la derecha de la declaración. En el caso de propiedades de lectura/escritura (posibilidad de modificación) se puede asignar un valor a la propiedad, como se ilustra en el siguiente ejemplo de sintaxis:</p> - -<div></div> - -<p>En general, el objeto cuyo miembro se está describiendo se pone en la declaración con un sólo tipo de dato:</p> - -<ul> - <li><code>element</code> para todos los elementos.</li> - <li><code>document</code> para el documento entero.</li> - <li><code>table</code> para una tabla, etc.</li> - <li>Para más información sobre la: <a href="es/Referencia_Gecko_del_DOM/Introducci%c3%b3n#Importancia_de_los_tipos_de_datos">Importancia de los tipos de datos</a>, lea este artículo.</li> -</ul> - -<h3 id="Utilizaci.C3.B3n_de_ejemplos" name="Utilizaci.C3.B3n_de_ejemplos">Utilización de ejemplos</h3> - -<p>Varios ejemplos en esta referencia son archivos completos que se pueden ejecutar copiándolos y pegándolos dentro de un nuevo archivo y abriéndolo en un navegador. Otros son trozos de código que se pueden ejecutar poniéndolos en las funciones repeticón de llamada (<code>callback</code>) de JavaScript. Por ejemplo, la propiedad de <a href="es/DOM/window.document">window.document</a> se puede probar dentro de la siguiente función, la cual es llamada por el botón acompañante:</p> - -<pre><html> - -<script> -function testWinDoc() { - - doc= window.document; - - alert(doc.title); - -} -</script> - -<button onclick="testWinDoc();">Prueba la propiedad del documento</button> - -</html> -</pre> - -<p>Funciones y páginas similares pueden ser creadas para todos los miembros de objeto que no hayan sido ya preparados para su uso directo. Ver la parte <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n#Probando_el_API_del_DOM">Probando el API del DOM</a> en la introducción para una "prueba pesada" que permite probar varios API a la vez.</p> - -<p>{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Pr\u00e9face", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}</p> diff --git a/files/es/conflicting/web/api/element/index.html b/files/es/conflicting/web/api/element/index.html deleted file mode 100644 index 75cffcfe19..0000000000 --- a/files/es/conflicting/web/api/element/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: NonDocumentTypeChildNode -slug: conflicting/Web/API/Element -tags: - - API - - DOM - - Interface - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/NonDocumentTypeChildNode -original_slug: Web/API/NonDocumentTypeChildNode ---- -<div>{{APIRef("DOM")}}</div> - -<p>The <code><strong>NonDocumentTypeChildNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent, but not suitable for {{domxref("DocumentType")}}.</p> - -<p><code>NonDocumentTypeChildNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, and {{domxref("CharacterData")}} objects.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>There is no inherited property.</em></p> - -<dl> - <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Element")}} immediately prior to this node in its parent's children list, or <code>null</code> if there is no {{domxref("Element")}} in the list prior to this node.</dd> - <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Element")}} immediately following this node in its parent's children list, or <code>null</code> if there is no {{domxref("Element")}} in the list following this node.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>There is neither inherited, nor specific method.</em></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'NonDocumentTypeChildNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, and <code>NonDocumentTypeChildNode</code>. The <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter.<br> - The {{domxref("CharacterData")}} and {{domxref("Element")}} implemented the new interfaces.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (on {{domxref("Element")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Support (on {{domxref("CharacterData")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("25.0")}} [1]</td> - <td>9.0</td> - <td>10.0</td> - <td>4.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support (on {{domxref("Element")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>10.0</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>Support (on {{domxref("CharacterData")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>10.0</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Firefox 25 also added the two properties defined here on {{domxref("DocumentType")}}, this was removed in Firefox 28 due to compatibility problems, and led to the creation of this new pure interface.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} pure interface.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, and {{domxref("Element")}}.</div> - </li> -</ul> diff --git a/files/es/conflicting/web/api/element/namespaceuri/index.html b/files/es/conflicting/web/api/element/namespaceuri/index.html deleted file mode 100644 index e7dbb30dc9..0000000000 --- a/files/es/conflicting/web/api/element/namespaceuri/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Node.namespaceURI -slug: conflicting/Web/API/Element/namespaceURI -tags: - - API - - DOM - - NecesitaCompatilibidadNavegador - - Propiedad - - Referencia - - obsoleta -translation_of: Web/API/Node/namespaceURI -original_slug: Web/API/Node/namespaceURI ---- -<div>{{APIRef("DOM")}}{{obsolete_header}}</div> - -<p>La propiedad de solo lectura <code><strong>Nodo.namespaceURI</strong></code> devuelve la URI del nodo, o null en caso de que el nodo no tenga espacio de nombres. Cuando el nodo es un documento, este devuelve el espacio de nombres del XML para el documento actual.</p> - -<div class="warning"> -<p>En DOM4 esta API fué movida desde <code>Node</code> a las interficies {{domxref("Element")}} y {{domxref("Attr")}}.</p> -</div> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><var>namespace</var> = <var>node</var>.namespaceURI</pre> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>En este fragmento, un nodo esá siendo examinado por su {{domxref("Node.localName")}} y <code>namespaceURI</code>. Si el <code>namespaceURI</code> devuelve el nombre de espaciosXUL y el <code>localName</code> devuelve "browser", entonces el nodo es entendido a ser un XUL <code><browser/></code>.</p> - -<pre class="brush:js">if (node.localName == "browser" && - node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { - // Este es un navegador XUL -}</pre> - -<h2 id="Notas">Notas</h2> - -<p>Este no es un valor calculado que es el resultado de una búsqueda del espacio de nombres basada en la examinación de las declaraciones de un espacio de nombres en el ámbito. El espacio de nombres URI de un nodo es congelado ene l momento de su creación.</p> - -<p>En Firefox 3.5 y anteriores, el espacio de nombres URI para los elementos HTML en los Documents HTML es <code>null</code>. En versiones psoteriores, en conformidad con HTML5, es <code><a class="external" href="https://www.w3.org/1999/xhtml" rel="freelink">https://www.w3.org/1999/xhtml</a></code> como en XHTML. {{gecko_minversion_inline("1.9.2")}}</p> - -<p>Para nodos de cualquier {{domxref("Node.nodeType")}} distintos de <code>ELEMENT_NODE</code> y <code>ATTRIBUTE_NODE</code> el valor de <code>namespaceURI</code> es siempre <code>null</code>.</p> - -<p>Puedes crear un elemento con un <code>namespaceURI</code> concreto creando un método DOM de nivel 2 {{domxref("Document.createElementNS")}} y atributos con el método {{domxref("Element.setAttributeNS")}}.</p> - -<p>Para la especificación <a class="external" href="https://www.w3.org/TR/xml-names11/">Namespaces in XML</a>, un atributo no hereda su espacio de nombres del elemento al que está sujeto. Si un atributo no es dado de manera explícita como espacio de nombres, entonces no los tiene.</p> - -<p>El DOM no controla ni impone la validación del espacio de nombres. Depende de la aplicación DOM de hacer cualquier tipo de validación necesaria. Destacar también que el prefijo de espacio de nombre, una vez es asociado a un nodo enparticular, no puede ser modificado.</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>Specifies the behavior when it's set to <code>null</code>.</td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#Namespaces-Considerations", "DOM Level 2 Core: XML Namespaces")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}<br> - {{CompatNo}}46.0<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup><br> - {{CompatNo}} {{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</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>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup><br> - {{CompatNo}} {{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Esta API fue movida a las APIs {{domxref("Element")}} y {{domxref("Attr")}} de acuerdo con el standard de DOM4.</p> - -<p>[2] Antes de Gecko 5.0 {{geckoRelease("5.0")}}, esta propiedad era de lectura-escritura; empezando con Gecko 5.0 es sólo lectura, siguiendo la especificación.</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{domxref("Node.localName")}}</li> - <li>{{domxref("Node.prefix")}}</li> - <li>{{domxref("Element.namespaceURI")}}</li> - <li>{{domxref("Attr.namespaceURI")}}</li> -</ul> diff --git a/files/es/conflicting/web/api/geolocation/index.html b/files/es/conflicting/web/api/geolocation/index.html deleted file mode 100644 index bd9d8f78d6..0000000000 --- a/files/es/conflicting/web/api/geolocation/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: NavigatorGeolocation -slug: conflicting/Web/API/Geolocation -tags: - - API -translation_of: Web/API/Geolocation -translation_of_original: Web/API/NavigatorGeolocation -original_slug: Web/API/NavigatorGeolocation ---- -<p>{{APIRef("Geolocation API")}}</p> - -<p><code><strong>NavigatorGeolocation</strong></code> contains a creation method allowing objects implementing it to obtain a {{domxref("Geolocation")}} instance.</p> - -<p>There is no object of type <code>NavigatorGeolocation</code>, but some interfaces, like {{domxref("Navigator")}} implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>The <code>NavigatorGeolocation</code></em><em> interface doesn't inherit any property.</em></p> - -<dl> - <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The </em><em><code>NavigatorGeolocation</code></em><em> interface neither implements, nor inherit any method.</em></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}</td> - <td>{{Spec2('Geolocation')}}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>5</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9</td> - <td>10.60<br> - Removed in 15.0<br> - Reintroduced in 16.0</td> - <td>5</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</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>Basic support</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatGeckoMobile("4")}}</td> - <td>{{CompatUnknown()}}</td> - <td>10.60</td> - <td>{{CompatUnknown()}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation.</a></li> -</ul> - -<p> </p> diff --git a/files/es/conflicting/web/api/html_drag_and_drop_api/index.html b/files/es/conflicting/web/api/html_drag_and_drop_api/index.html deleted file mode 100644 index e8dd96166b..0000000000 --- a/files/es/conflicting/web/api/html_drag_and_drop_api/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: DragDrop -slug: conflicting/Web/API/HTML_Drag_and_Drop_API -tags: - - NeedsTranslation - - TopicStub -translation_of: Web/API/HTML_Drag_and_Drop_API -translation_of_original: DragDrop -original_slug: DragDrop ---- -<p> </p> -<p>See <a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop">https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop</a></p> diff --git a/files/es/conflicting/web/api/index.html b/files/es/conflicting/web/api/index.html deleted file mode 100644 index 66f2f46da6..0000000000 --- a/files/es/conflicting/web/api/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Element.name -slug: conflicting/Web/API -tags: - - API - - Compatibilidad de los navegadores - - DOM - - Elemento - - Propiedad - - Referencia - - Web - - actualizacion -translation_of: Web/API -translation_of_original: Web/API/Element/name -original_slug: Web/API/Element/name ---- -<p>{{ APIRef("DOM") }}</p> - -<h2 id="Summary" name="Summary">Sumario</h2> - -<p><code><strong>name</strong></code> <span id="result_box" lang="es"><span>obtiene o establece</span> <span>la</span> <span>propiedad del nombre</span> <span>de un</span> <span>objeto DOM</span><span>;</span> <span>sólo se aplica a</span> <span>los</span> <span>siguientes elementos</span><span>:</span></span> {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, and {{ HTMLelement("textarea") }}.</p> - -<div class="note"> -<p><strong>Nota:</strong> <code>La propiedad name no esixte para otros elementos</code>; a diferencia de <a href="/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> y <a href="/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, no es una propiedad de los modos de comunicación (interfaces) {{domxref("Node")}}, {{domxref("Element")}} or {{domxref("HTMLElement")}}.</p> -</div> - -<p><code>name</code> puede ser utilizado en el método{{ domxref("document.getElementsByName()") }} , en una <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">configuración</a> y con la colección de <a href="/en/DOM/form.elements" title="en/DOM/form.elements">elementos</a> de la configuración. cuando utilizamos una configuración o elementos de una colección, puede devolver un solo elemento o una colección.</p> - -<h2 id="Syntax" name="Syntax">Síntasix</h2> - -<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; -var elName = <em>HTMLElement</em>.name; - -var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; -var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; -</pre> - -<h2 id="Example" name="Example">Ejemplo</h2> - -<pre class="eval"><form action="" name="formA"> - <input type="text" value="foo"> -</form> - -<script type="text/javascript"> - - // Get a reference to the first element in the form - var formElement = document.forms['formA'].elements[0]; - - // Give it a name - formElement.name = 'inputA'; - - // Show the value of the input - alert(document.forms['formA'].elements['inputA'].value); - -</script> -</pre> - -<h2 id="Notes" name="Notes">Notas</h2> - -<p>En Internet Explorer (IE), la propiedad <code>name</code> de los objetos DOM , creada utilizando{{ domxref("document.createElement()") }} no puede ser establecida o modificada</p> - -<h2 id="Specification" name="Specification">Especificaciones</h2> - -<p>W3C DOM 2 HTML Specification:</p> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> -</ul> diff --git a/files/es/conflicting/web/api/indexeddb_api/index.html b/files/es/conflicting/web/api/indexeddb_api/index.html deleted file mode 100644 index cdcd58724c..0000000000 --- a/files/es/conflicting/web/api/indexeddb_api/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: IndexedDB -slug: conflicting/Web/API/IndexedDB_API -tags: - - páginas_a_traducir -original_slug: IndexedDB ---- -<p>{{ SeeCompatTable() }}</p> - -<p>IndexedDB es una API del lado del cliente, para el almacenamiento de grandes cantidades de datos estructurados y para búsquedas de alto rendimiento en esos datos, usando índices. Mientras <a href="/en-US/docs/DOM/Storage" title="en-US/docs/DOM/Storage">DOM Storage</a> es útil para el almacenamiento de pequeñas cantidades de datos, no es útil para almacenar grandes cantidades de datos estructurados. IndexedDB proporciona una solución.</p> - -<p>Esta página es básicamente el punto de entrada para la descripción técnica de los objetos de la API. Si necesita algo elemental, debería consultar ;<a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">Conceptos básicos acerca de IndexedDB</a>. Para más detalles, vea <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB" title="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB">Usando IndexedDB</a>.</p> - -<p>IndexedDB provee APIs separados para un acceso síncrono o asíncrono. El API síncrono está destinado a ser usado únicamente dentro de <a href="/en-US/docs/DOM/Worker" title="Worker">Web Workers</a>, pero no será implementado aún por cualquier navegador. El API asíncrono trabaja con o sin Web Workers.</p> - -<h2 id="API_Asíncrono">API Asíncrono</h2> - -<p>Los métodos del API Asíncrono, retornan sin bloquear el hilo de llamada. Para obtener un acceso asíncrono a la base de datos, use <code><a href="/en-US/docs/IndexedDB/IDBFactory#open" title="en-US/docs/IndexedDB/IDBFactory#open">open</a></code>() en el atributo <code><a href="/en-US/docs/IndexedDB/IDBEnvironment#attr_indexedDB" title="en-US/docs/IndexedDB/IDBEnvironment#attr indexedDB">indexedDB</a></code> de un objeto <a href="/en-US/docs/DOM/window" title="en-US/docs/DOM/window">window</a>. Este método retorna un objeto IDBRequest (IDBOpenDBRequest); operaciones asíncronas se comunicarán con la aplicación que llama, disparando eventos en los objetos IDBRequest.</p> - -<div class="note"> -<p>Nota: El objeto <code>indexedDB</code> se prefija en las versiones antiguas de los navegadores (propiedad <code>mozIndexedDB</code> para Gecko < 16, <code>webkitIndexedDB</code> en Chrome, y <code>msIndexedDB</code> en IE 10).</p> -</div> - -<ul> - <li><a href="/en-US/docs/IndexedDB/IDBFactory" title="en-US/docs/IndexedDB/IDBFactory"><code>IDBFactory</code></a> provee acceso a la base de datos. Esta es la interface implementada por el objeto global <code>indexedDB</code> y es el punto de entrada para la API.</li> - <li><a href="/en-US/docs/IndexedDB/IDBCursor" title="en-US/docs/IndexedDB/IDBCursor"><code>IDBCursor</code></a> itera sobre los objetos de almacenamiento y de índices.</li> - <li><a href="/en-US/docs/IndexedDB/IDBCursorWithValue"><code>IDBCursorWithValue</code></a> itera sobre los objetos de almacenamiento y de índices y retorna el valor actual del cursor.</li> - <li><a href="/en-US/docs/IndexedDB/IDBDatabase" title="en-US/docs/IndexedDB/IDBDatabase"><code>IDBDatabase</code></a> representa una conexión a la base de datos. Es la única manera de realizar una transacción en la base de datos.</li> - <li><a href="/en-US/docs/IndexedDB/IDBEnvironment" title="en-US/docs/IndexedDB/IDBEnvironment"><code>IDBEnvironment</code></a> provee acceso a la base de datos, desde el lado del cliente. Está implementada por el objeto <a href="/../en-US/docs/DOM/window" rel="internal" title="../en-US/docs/DOM/window">window</a>.</li> - <li><a href="/en-US/docs/IndexedDB/IDBIndex" title="en-US/docs/IndexedDB/IDBIndex"><code>IDBIndex</code></a> provee acceso a la metadata de un índice.</li> - <li><code><a href="/en-US/docs/IndexedDB/IDBKeyRange" title="en-US/docs/IndexedDB/KeyRange">IDBKeyRange</a></code> define un rango de claves.</li> - <li><a href="/en-US/docs/IndexedDB/IDBObjectStore" title="en-US/docs/IndexedDB/IDBObjectStore"><code>IDBObjectStore</code></a> representa un objeto de almacenamiento.</li> - <li><a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> representa un requerimiento para abrir una base de datos.</li> - <li><a href="/en-US/docs/IndexedDB/IDBRequest" title="en-US/docs/IndexedDB/IDBRequest"><code>IDBRequest</code></a> provee acceso a los resultados de los requerimientos asíncronos a la base de datos y a los objetos database. Es lo que se obtiene cuando se llama a un método asíncrono.</li> - <li><a href="/en-US/docs/IndexedDB/IDBTransaction" title="en-US/docs/IndexedDB/IDBTransaction"><code>IDBTransaction</code></a> representa una transacción. Cuando Ud. crea una transacción en la base de datos, especifica el alcance (como a que objetos store desea tener acceso), y determina la clase de acceso (sólo lectura o escritura) que desea tener.</li> - <li><a href="/en-US/docs/IndexedDB/IDBVersionChangeEvent" title="IDBVersionChangeEvent"><code>IDBVersionChangeEvent</code></a> indica que la versión de la base de datos ha cambiado.</li> -</ul> - -<p>Una versión anterior de la especificación también define estas -ahora removidas- interfaces. Éstas son documentadas todavía, en caso de que necesite actualizar código escrito previamente:</p> - -<ul> - <li><code><a href="/en-US/docs/IndexedDB/IDBVersionChangeRequest" title="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBVersionChangeRequest">IDBVersionChangeRequest</a></code> representa una solicitud para cambiar la versión de una base de datos. La manera de cambiar la versión de la base de datos ahora es diferente (llamando <a href="/en-US/docs/IndexedDB/IDBFactory#open" title="en-US/docs/IndexedDB/IDBFactory#open"><code>IDBFactory.open()</code></a> sin llamar también a <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a>), y la interfaz <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> tiene ahora la funcionalidad de la eliminada <code>IDBVersionChangeRequest</code>.</li> - <li><code><a href="/en-US/docs/IndexedDB/IDBDatabaseException" title="en-US/docs/IndexedDB/DatabaseException">IDBDatabaseException </a></code> {{ obsolete_inline() }} representa las condiciones de excepción que se pueden encontrar mientras se ejecutan operaciones en la base de datos.</li> -</ul> - -<p>Hay también una <a href="/en-US/docs/IndexedDB/Syncronous_API" title="/en-US/docs/IndexedDB/SyncronousAPI">versión sincrónica de la API</a>. La API síncrona no ha sido implementada en cualquier navegador. Está destinada a ser usada con <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">WebWorkers</a>.</p> - -<h2 id="Límites_de_almacenamiento">Límites de almacenamiento</h2> - -<p>No existe un límite de tamaño para un elemento simple de la base de datos. Sin embargo, puede haber un límite en el tamaño de cada base de datos IndexedDB. Este límite (y la forma en que la interfaz de usuario la hace valer) puede variar de una navegador a otro:</p> - -<ul> - <li> - <p>Firefox: no hay límite en el tamaño de una base de datos IndexedDB. La interfaz de usuario solicita permiso para almacenar blobs de más de 50MB. Este límite puede ser modificado mediante la preferencia dom.indexedDB.warningQuota (que está definida en <a href="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js" title="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js">http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js</a>).</p> - </li> - <li>Google Chrome: vea <a class="link-https" href="https://developers.google.com/chrome/whitepapers/storage#temporary" rel="freelink">https://developers.google.com/chrome...rage#temporary</a></li> -</ul> - -<h2 id="Example" name="Example">Ejemplo</h2> - -<p>Un claro ejemplo para lo que IndexedDB puede ser utilizado en la web, es el ejemplo de Marco Castelluccio, ganador del DevDerby IndexedDB Mozilla. La demostración ganadora fue <a href="/en-US/demos/detail/elibri" title="https://developer.mozilla.org/en-US/demos/detail/elibri">eLibri</a>, una biblioteca y una aplicación de lectura de libros electrónicos.</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de los 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 (WebKit)</th> - </tr> - <tr> - <td>API asíncrono</td> - <td> - <p>24.0<br> - 11.0 {{ property_prefix("webkit") }}</p> - </td> - <td> - <p>{{ CompatGeckoDesktop("16.0") }}<br> - {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}</p> - </td> - <td>10 {{ property_prefix("ms") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>API síncrono<br> - (usado por <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">WebWorkers</a>)</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}<br> - Vea {{ bug(701634) }}</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>API síncrono</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>Para otra matriz de compatibilidad, vea también: <a href="http://caniuse.com/indexeddb" title="http://caniuse.com/indexeddb">Cuándo puedo usar IndexedDB</a></p> - -<p>También existe la posibilidad de usar IndexedDB en <a href="http://caniuse.com/sql-storage" title="http://caniuse.com/sql-storage"> navegadores que soportan WebSQL</a> por el uso de <a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a>.</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en-US/docs/IndexedDB/Basic Concepts Behind IndexedDB">Conceptos básicos acerca de IndexedDB</a></li> - <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB" title="en-US/docs/IndexedDB/IndexedDB primer">Usando IndexedDB</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/" title="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Almacenando imágenes y archivos en IndexedDB</a></li> - <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">Una lista simple de PENDIENTES usando HTML5 IndexedDB</a>. {{ Note("Este tutorial está basado en una antigua versión de la especificación y no funciona en los navegadores actualizados. por ejemplo, todavía usa el método actualmente eliminado <code>setVersion()</code>.") }}</li> - <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Especificación de la API para Indexed Database </a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — El alamcén en su navegador</a></li> - <li><a class="external" href="http://caniuse.com/indexeddb" title="http://caniuse.com/indexeddb">Soporte IndexedDB en navegadores</a></li> - <li><a class="external" href="http://nparashuram.com/IndexedDB/trialtool/index.html" title="http://nparashuram.com/IndexedDB/trialtool/index.html">Ejemplos IndexedDB</a></li> - <li><a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a> para navegadores que sólo soportan WebSQL (p.e. mobile WebKit)</li> - <li><a href="http://nparashuram.com/IndexedDBShim/" title="http://nparashuram.com/IndexedDBShim/">JQuery IndexedDB plugin</a></li> -</ul> diff --git a/files/es/conflicting/web/api/node/index.html b/files/es/conflicting/web/api/node/index.html deleted file mode 100644 index 2204a75c59..0000000000 --- a/files/es/conflicting/web/api/node/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Nodo.nodoPrincipal -slug: conflicting/Web/API/Node -tags: - - API - - DOM - - Gecko - - Propiedad -translation_of: Web/API/Node -translation_of_original: Web/API/Node/nodePrincipal -original_slug: Web/API/Node/nodoPrincipal ---- -<div> -<div>{{APIRef("DOM")}}</div> -{{Non-standard_header}} - -<p>La propiedad de solo loctura de <code><strong>Nodo.nodePrincipal</strong></code> devuelve el objeto {{Interface("nsIPrincipal")}} representando el contexto de seguridad del nodo actual.</p> - -<p>{{Note("This property exists on all nodes (HTML, XUL, SVG, MathML, etc.), but only if the script trying to use it has chrome privileges.")}}</p> - -<h2 id="Syntax" name="Syntax">Sintaxis</h2> - -<pre class="syntaxbox"><em>principalObj</em> = element.nodePrincipal -</pre> - -<h2 id="Notes" name="Notes">Notas</h2> - -<p>Esta propiedad es de solo lectura; Si intentamos editarla nos lanzará una excepción. Además, esta propiedad tan solo debería ser accesible desde código privilegiado</p> - -<h2 id="Specification" name="Specification">Especificación</h2> - -<p>No hay especificaciones.</p> -</div> - -<p> </p> diff --git a/files/es/conflicting/web/api/push_api/index.html b/files/es/conflicting/web/api/push_api/index.html deleted file mode 100644 index ea87d50427..0000000000 --- a/files/es/conflicting/web/api/push_api/index.html +++ /dev/null @@ -1,434 +0,0 @@ ---- -title: Usando la API Push -slug: conflicting/Web/API/Push_API -translation_of: Web/API/Push_API -translation_of_original: Web/API/Push_API/Using_the_Push_API -original_slug: Web/API/Push_API/Using_the_Push_API ---- -<p class="summary"><span class="seoSummary">La W3C <a href="/en-US/docs/Web/API/Push_API">Push API</a> offers some exciting new functionality for developers to use in web applications: this article provides an introduction to getting Push notifications setup and running, with a simple demo.</span></p> - -<p>La habilidad de enviar mensajes o notificaciones de un servidor a un cliente en cualquier momento —si la aplicación está activa en su sitema o no—es algo que ha sido disfrutado por las plataformas nativas durante algún tiempo, y esta finalmente llega a la web! el soporte para muchos push está ahora disponible en Firefox 43+ y Chrome 42+ en escritorio, esperamos seguir pronto con las plataformas moviles. {{domxref("PushMessageData")}} actualmente solo es soportada experimentalmente en Firefox (44+), y la implementación está sujeta a cambios.</p> - -<div class="note"> -<p><strong>Note</strong>: Early versions of Firefox OS used a proprietary version of this API called <a href="/en-US/docs/Web/API/Simple_Push_API">Simple Push</a>. This is being rendered obsolete by the Push API standard.</p> -</div> - -<h2 id="Demo_las_bases_de_una_simple_app_de_servidor_de_chat">Demo: las bases de una simple app de servidor de chat</h2> - -<p>La demo que hemos creado proporciona los principios de una simple app de chat. Esta presenta un formulario para que ingreses un identificador de chat y un boton que al presionar se suscriba a los mensajes push.</p> - -<p>En este punto, el nombre de los nuevos suscriptores aparecerá en la lista de suscriptores, junto con un campo de texto y un botón de envío para permitir al suscriptor enviar mensajes.</p> - -<p>At this point, the new subscriber's name will appear in the subscriber's list, along with a text field and submit button to allow the subscriber to send messages.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11823/push-api-demo.png" style="border: 1px solid black; display: block; height: 406px; margin: 0px auto; width: 705px;"></p> - -<p>Para correr la demo, siga las instrucciones de <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>. Tenga en cuenta que el componente server-side aún nesecita un poco de trabajo para que funcione en chrome y se ejecute de una manera más rezonable. Pero los aspectos de push pueden ser explicados a fondo; Nos sumergiremos en ella después de revisar las tecnologías en juego.</p> - -<h2 id="Visión_de_la_tecnología">Visión de la tecnología</h2> - -<p>Esta sección proporciona un esquema de qué tecnologías están involucradas en este ejemplo.</p> - -<p>Los mensajes web push hacen parte de la familia tecnológica <a href="/en-US/docs/Web/API/Service_Worker_API">service workers</a>; en particular, se requiere que un service worker esté activo en la página para recibir mensajes push. el service worker recibe el mensaje push, y acontinuación depende de usted cómo notificar a la página. Usted puede:</p> - -<p>Web Push messages are part of the <a href="/en-US/docs/Web/API/Service_Worker_API">service workers</a> technology family; in particular, a service worker is required to be active on the page for it to receive push messages. The service worker receives the push message, and then it is up to you how to then notify the page. You can:</p> - -<ul> - <li>Enviar una <a href="/en-US/docs/Web/API/Notifications_API">notificación web</a> emergente para alertar al usuario. Esto requiere que sean concedidos los permisos para enviar el mensaje push.</li> - <li>Envía un mensaje a la página principal a través de un {{domxref("MessageChannel")}}.</li> -</ul> - -<p>A menudo una combinación de los dos será necesario; La demo a continuación muestra un ejemplo de cada uno.</p> - -<div class="note"> -<p><strong>Nota</strong>: Usted necesita algún tipo de código que se ejecute en el servidor para manejar el cifrado de punto final/datos y enviar las solicitudes de notificaciones push. En nuestra demostración hemos creado un servidor quick-and-dirty usando <a href="https://nodejs.org/">NodeJS</a>.</p> -</div> - -<p>El service worker también tiene que suscribirse al servicio de mensajería psuh. Cada sesión recibe su propio punto final único cuando se suscribe al servicio de mensajería. Este punto final es obtenido desde la propiedad ({{domxref("PushSubscription.endpoint")}}) en el objeto de suscripción. Este punto final se puede enviar a su servidor y se utiliza para enviar un mensaje al service worker asctivo en esta sesión. Cada navegador tiene su propio servidor de mensajería push para manejar el envío del mensaje push.</p> - -<h3 id="Encryption">Encryption</h3> - -<div class="note"> -<p><strong>Note</strong>: For an interactive walkthrough, try JR Conlin's <a href="https://jrconlin.github.io/WebPushDataTestPage/">Web Push Data Encryption Test Page</a>.</p> -</div> - -<p>To send data via a push message, it needs to be encrypted. This requires a public key created using the {{domxref("PushSubscription.getKey()")}} method, which relies upon some complex encryption mechanisms that are run server-side; read <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> for more details. As time goes on, libraries will appear to handle key generation and encryption/decryption of push messages; for this demo we used Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>.</p> - -<div class="note"> -<p><strong>Note</strong>: There is also another library to handle the encryption with a Node and Python version available, see <a href="https://github.com/martinthomson/encrypted-content-encoding">encrypted-content-encoding</a>.</p> -</div> - -<h3 id="Push_workflow_summary">Push workflow summary</h3> - -<p>To summarize, here is what is needed to implement push messaging. You can find more details about specific parts of the demo code in subsequent sections.</p> - -<ol> - <li>Request permission for web notifications, or anything else you are using that requires permissions.</li> - <li>Register a service worker to control the page by calling {{domxref("ServiceWorkerContainer.register()")}}.</li> - <li>Subscribe to the push messaging service using {{domxref("PushManager.subscribe()")}}.</li> - <li>Retrieve the endpoint associated with the subscription and generate a client public key ({{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}. Note that <code>getKey()</code> is currently experimental and Firefox only.)</li> - <li>Send these details to the server so it can send push message when required. This demo uses {{domxref("XMLHttpRequest")}}, but you could use <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>.</li> - <li>If you are using the <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> to comunicate with the service worker, set up a new message channel ({{domxref("MessageChannel.MessageChannel()")}}) and send <code>port2</code> over to the service worker by calling {{domxref("Worker.postMessage()")}} on the service worker, in order to open up the communication channel. You should also set up a listener to respond to messages sent back from the service worker.</li> - <li>On the server side, store the endpoint and any other required details so they are available when a push message needs to be sent to a push subscriber (we are using a simple text file, but you could use a database or whatever you like). In a production app, make sure you keep these details hidden, so malicious parties can't steal endpoints and spam subscribers with push messages.</li> - <li>To send a push message, you need to send an HTTP <code>POST</code> to the endpoint URL. The request must include a <code>TTL</code> header that limits how long the message should be queued if the user is not online. To include payload data in your request, you must encrypt it (which involves the client public key). In our demo, we are using the <a href="https://github.com/marco-c/web-push">web-push</a> module, which handles all the hard work for you.</li> - <li>Over in your service worker, set up a <code>push</code> event handler to respond to push messages being received. - <ol> - <li>If you want to respond by sending a channel message back to the main context (see Step 6) you need to first get a reference to the <code>port2</code> we sent over to the service worker context ({{domxref("MessagePort")}}). This is available on the {{domxref("MessageEvent")}} object passed to the <code>onmessage</code> handler ({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Specifically, this is found in the <code>ports</code> property, index 0. Once this is done, you can send a message back to <code>port1</code>, using {{domxref("MessagePort.postMessage()")}}.</li> - <li>If you want to respond by firing a system notification, you can do this by calling {{domxref("ServiceWorkerRegistration.showNotification()")}}. Note that in our code we have run this inside an {{domxref("ExtendableEvent.waitUntil()")}} method — this extends the lifetime of the event until after the notification has been fired, so we can make sure everything has happened that we want to happen.<span id="cke_bm_307E" class="hidden"> </span></li> - </ol> - </li> -</ol> - -<h2 id="Construyendo_la_demo">Construyendo la demo</h2> - -<p>Vamos a ensayar el código para esta demo, podemos empezar a entender como trabaja todo esto.</p> - -<ul> - <li> - <h3 id="HTML_y_CSS">HTML y CSS</h3> - </li> -</ul> - -<p>No hay nada destacalbe sobre el HTML y el CSS para la demo; el HTML inicialmente contiene un simple formulario que permite introducir un udentificador para la sala de chat, un boton que al hacer click se suscribe a las notificaciones push, y dos listas con los suscriptores y los mensajes. Una vez suscrito, aparecerán controles adicionales para permitir al usuario actual escribir mensajes en el chat.</p> - -<p>El CSS ha sido muy minimo para no desvirtuar la explicación de la funcionalidad Push Api.</p> - -<ul> - <li> - <h3 id="El_archivo_JavaScript_principal">El archivo JavaScript principal</h3> - </li> -</ul> - -<p>El JavaScript es obviamente más sustancial. Echemos un vistazo al archivo JavaScript principal.</p> - -<h4 id="Variables_y_configuración_inicial">Variables y configuración inicial</h4> - -<p>Para iniciar, nosotros declaramos algunas variables a usar en nuestra app:</p> - -<pre class="brush: js">var isPushEnabled = false; -var useNotifications = false; - -var subBtn = document.querySelector('.subscribe'); -var sendBtn; -var sendInput; - -var controlsBlock = document.querySelector('.controls'); -var subscribersList = document.querySelector('.subscribers ul'); -var messagesList = document.querySelector('.messages ul'); - -var nameForm = document.querySelector('#form'); -var nameInput = document.querySelector('#name-input'); -nameForm.onsubmit = function(e) { - e.preventDefault() -}; -nameInput.value = 'Bob';</pre> - -<p>Primero, tenemos dos boleanos para hacer un seguimiento si se a suscrito a push, y si ha permitido las notificaciones.</p> - -<p>A continuación, tomamos una referencia al suscrito/no-suscrito <code>{{htmlelement("button")}}</code>, y se declaran variables para almacenar referencias a nuestro mensaje enviado boton/entrada (sólo se crean cuando la suscripsión es correcta.)</p> - -<p>Las siguientes variables toman referencia a los trés elementos principales <code>{{htmlelement("div")}}</code> en el diseño, por lo que podemos insertar elementos en ellos (por ejemplo cuando aparezca el botón <em>envíar el mensaje de chat</em> o el mensaje de chat aparezca en la lista de <em>mensajes</em>.)</p> - -<p>Finalmente tomamos referencia a nuestro formulario de selección de nombre y el elemento <code>{{htmlelement("input")}},</code> damos a la entrada un valor por defecto, y usamos <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> para detener el envío del formulario cuando este es enviado pulsando return.</p> - -<p>A continuación, pedimos permiso para enviar las notificaciones web, usando <code>{{domxref("Notification.requestPermission","requestPermission()")}}</code>:</p> - -<pre class="brush: js">Notification.requestPermission();</pre> - -<p>Ahora ejecutamos una sección de código cuando se dispara el <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code>, para empezar el proceso de inicialización de la app cuando se carga pro primera vez. En primer lugar añadimos un detector de eventos de clik al botón Sucribirse/unsubscribe que ejecuta nuestra funcion <code>unsubscribe()</code> si actualmente estamos suscritos (<code>isPushEnabled</code> is <code>true</code>), y <code>subscribe()</code> de la otra manera:</p> - -<pre class="brush: js">window.addEventListener('load', function() { - subBtn.addEventListener('click', function() { - if (isPushEnabled) { - unsubscribe(); - } else { - subscribe(); - } - });</pre> - -<p>A continuación verificamos el service worked es soportado. Si es así, registramos un service worker usando <code>{{domxref("ServiceWorkerContainer.register()")}}</code>, y ejecutando nuestra función <code>initialiseState()</code>. Si no es así, entregamos un mensaje de error a la consola.</p> - -<pre class="brush: js"> // Check that service workers are supported, if so, progressively - // enhance and add push messaging support, otherwise continue without it. - if ('serviceWorker' in navigator) { - navigator.serviceWorker.register('sw.js').then(function(reg) { - if(reg.installing) { - console.log('Service worker installing'); - } else if(reg.waiting) { - console.log('Service worker installed'); - } else if(reg.active) { - console.log('Service worker active'); - } - - initialiseState(reg); - }); - } else { - console.log('Service workers aren\'t supported in this browser.'); - } -}); -</pre> - -<p>La siguiente cosa en el código es la función <code>initialiseState()</code> — para el codigo completo comentado, mira en <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>initialiseState()</code> source on Github</a> (no lo estamos repitiendo aquí por brevedad.)</p> - -<p><code>initialiseState()</code> primero comprueba si las notificaciones son soportadas en los service workers, entonces establece la variable <code>useNotifications</code> a verdadero. A continuación comprueba si dichas notificaciones están permitidas por el usuario y si los mensajes push están soportados, y reacciona deacuerdo a cada uno.</p> - -<p>Finalmente, se usa <code>{{domxref("ServiceWorkerContainer.ready()")}}</code> para esperar a que el service worker esté activo y listo para hacer las cosas. Una vez se revuelva el promise, recuperamos nuestra suscripsión para enviar los mensajes push usando la propiedad <code>{{domxref("ServiceWorkerRegistration.pushManager")}}</code>, que devuelve un objeto <code>{{domxref("PushManager")}}</code> cuando llamamos a <code>{{domxref("PushManager.getSubscription()")}}</code>. Una vez la segunda promesa interna se resuelva, habilitamos el botón subscribe/unsubscribe (<code>subBtn.disabled = false;</code>), y verificamos que tenemos un objeto suscripsión para trabajar.</p> - -<p>Si lo hacemos, entonces ya estamos suscritos. Esto es posible cuando la app no está abierta en el navegador; el service worker aun puede ser activado en segundo plano. si estamos suscritos, actualizamos la UI para mostrar que estamos suscritos por la actualizacion del label en el botón, entonces establecemos <code>isPushEnabled</code> to <code>true</code>, toma el punto final de suscripsión desde <code>{{domxref("PushSubscription.endpoint")}}</code>, genera una public key usando <code>{{domxref("PushSubscription.getKey()")}}</code>, y ejecutando nuestra función <code>updateStatus()</code>, que como verá más adelante se comunica con el servidor.</p> - -<p>Como un bonus añadido, configuramos un nuevo <code>{{domxref("MessageChannel")}}</code> usando el constructor <code>{{domxref("MessageChannel.MessageChannel()")}}</code>, toma una referencia al service worker activo usando <code>{{domxref("ServiceworkerRegistration.active")}}</code>, luego configure un canal entre el contexto principal del navegador y el contexto del service worker usando <code>{{domxref("Worker.postMessage()")}}</code>. El contexto del navegador recive mensajes en <code>{{domxref("MessageChannel.port1")}}</code>; Cuando esto suceda, ejecutamos la función <code>handleChannelMessage()</code> para decidir que hacer con esos datos (mirar la sección <code>{{anch("Handling channel messages sent from the service worker")}}</code> ).</p> - -<h4 id="Subscribing_and_unsubscribing">Subscribing and unsubscribing</h4> - -<p>Ahora regresamos la atención a las funciones <code>subscribe()</code> y <code>unsubscribe()</code> usadas para subscribe/unsubscribe al servicion de notificaciones push.</p> - -<p>In the case of subscription, we again check that our service worker is active and ready by calling {{domxref("ServiceWorkerContainer.ready()")}}. When the promise resolves, we subscribe to the service using {{domxref("PushManager.subscribe()")}}. If the subscription is successful, we get a {{domxref("PushSubscription")}} object, extract the subscription endpoint from this and generate a public key (again, {{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}), and pass them to our <code>updateStatus()</code> function along with the update type (<code>subscribe</code>) to send the necessary details to the server.</p> - -<p>We also make the necessary updates to the app state (set <code>isPushEnabled</code> to <code>true</code>) and UI (enable the subscribe/unsubscribe button and set its label text to show that the next time it is pressed it will unsubscribe.)</p> - -<p>The <code>unsubscribe()</code> function is pretty similar in structure, but it basically does the opposite; the most notable difference is that it gets the current subscription using {{domxref("PushManager.getSubscription()")}}, and when that promise resolves it unsubscribes using {{domxref("PushSubscription.unsubscribe()")}}.</p> - -<p>Appropriate error handling is also provided in both functions. </p> - -<p>We only show the <code>subscribe()</code> code below, for brevity; see the full <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">subscribe/unsubscribe code on Github</a>.</p> - -<pre class="brush: js">function subscribe() { - // Disable the button so it can't be changed while - // we process the permission request - - subBtn.disabled = true; - - navigator.serviceWorker.ready.then(function(reg) { - reg.pushManager.subscribe({userVisibleOnly: true}) - .then(function(subscription) { - // The subscription was successful - isPushEnabled = true; - subBtn.textContent = 'Unsubscribe from Push Messaging'; - subBtn.disabled = false; - - // Update status to subscribe current user on server, and to let - // other users know this user has subscribed - var endpoint = subscription.endpoint; - var key = subscription.getKey('p256dh'); - updateStatus(endpoint,key,'subscribe'); - }) - .catch(function(e) { - if (Notification.permission === 'denied') { - // The user denied the notification permission which - // means we failed to subscribe and the user will need - // to manually change the notification permission to - // subscribe to push messages - console.log('Permission for Notifications was denied'); - - } else { - // A problem occurred with the subscription, this can - // often be down to an issue or lack of the gcm_sender_id - // and / or gcm_user_visible_only - console.log('Unable to subscribe to push.', e); - subBtn.disabled = false; - subBtn.textContent = 'Subscribe to Push Messaging'; - } - }); - }); -}</pre> - -<h4 id="Updating_the_status_in_the_app_and_server">Updating the status in the app and server</h4> - -<p>The next function in our main JavaScript is <code>updateStatus()</code>, which updates the UI for sending chat messages when subscribing/unsubscribing and sends a request to update this information on the server.</p> - -<p>The function does one of three different things, depending on the value of the <code>statusType</code> parameter passed into it:</p> - -<ul> - <li><code>subscribe</code>: The button and text input for sending chat messages are created and inserted into the UI, and an object is sent to the server via XHR containing the status type (<code>subscribe</code>), username of the subscriber, subscription endpoint, and client public key.</li> - <li><code>unsubscribe</code>: This basically works in the opposite way to subscribe — the chat UI elements are removed, and an object is sent to the server to tell it that the user has unsubscribed.</li> - <li><code>init</code>: This is run when the app is first loaded/initialised — it creates the chat UI elements, and sends an object to the server to tell it that which user has reinitialised (reloaded.)</li> -</ul> - -<p>Again, we have not included the entire function listing for brevity. Examine the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">full <code>updateStatus()</code> code on Github</a>.</p> - -<h4 id="Handling_channel_messages_sent_from_the_service_worker">Handling channel messages sent from the service worker</h4> - -<p>As mentioned earlier, when a <a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a> is received from the service worker, our <code>handleChannelMessage()</code> function is called to handle it. This is done by our handler for the {{event("message")}} event, {{domxref("channel.port1.onmessage")}}:</p> - -<pre class="brush: js">channel.port1.onmessage = function(e) { - handleChannelMessage(e.data); -}</pre> - -<p>This occurs when the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js#L8">service worker sends a channel message over</a>.</p> - -<p>The <code>handleChannelMessage()</code> function looks like this:</p> - -<pre class="brush: js">function handleChannelMessage(data) { - if(data.action === 'subscribe' || data.action === 'init') { - var listItem = document.createElement('li'); - listItem.textContent = data.name; - subscribersList.appendChild(listItem); - } else if(data.action === 'unsubscribe') { - for(i = 0; i < subscribersList.children.length; i++) { - if(subscribersList.children[i].textContent === data.name) { - subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]); - } - } - nameInput.disabled = false; - } else if(data.action === 'chatMsg') { - var listItem = document.createElement('li'); - listItem.textContent = data.name + ": " + data.msg; - messagesList.appendChild(listItem); - sendInput.value = ''; - } -}</pre> - -<p>What happens here depends on what the <code>action</code> property on the <code>data</code> object is set to:</p> - -<ul> - <li><code>subscribe</code> or <code>init</code> (at both startup and restart, we need to do the same thing in this sample): An {{htmlelement("li")}} element is created, its text content is set to <code>data.name</code> (the name of the subscriber), and it is appended to the subscribers list (a simple {{htmlelement("ul")}} element) so there is visual feedback that a subscriber has (re)joined the chat.</li> - <li><code>unsubscribe</code>: We loop through the children of the subscribers list, find the one whose text content is equal to <code>data.name</code> (the name of the unsubscriber), and delete that node to provide visual feedback that someone has unsubscribed.</li> - <li><code>chatMsg</code>: In a similar manner to the first case, an {{htmlelement("li")}} element is created, its text content is set to <code>data.name + ": " + data.msg</code> (so for example "Chris: This is my message"), and it is appended to the chat messages list; this is how the chat messages appear on the UI for each user.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: We have to pass the data back to the main context before we do DOM updates because service workers don't have access to the DOM. You should be aware of the limitations of service workers before attemping to ue them. Read <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a> for more details.</p> -</div> - -<h4 id="Sending_chat_messages">Sending chat messages</h4> - -<p>When the <em>Send Chat Message</em> button is clicked, the content of the associated text field is sent as a chat message. This is handled by the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>sendChatMessage()</code> function</a> (again, not shown in full for brevity). This works in a similar way to the different parts of the <code>updateStatus()</code> function (see {{anch("Updating the status in the app and server")}}) — we retrieve an endpoint and public key via a {{domxref("PushSubscription")}} object, which is itself retrieved via {{domxref("ServiceWorkerContainer.ready()")}} and {{domxref("PushManager.subscribe()")}}. These are sent to the server via {{domxref("XMLHttpRequest")}} in a message object, along with the name of the subscribed user, the chat message to send, and a <code>statusType</code> of <code>chatMsg</code>.</p> - -<h3 id="The_server">The server</h3> - -<p>As mentioned above, we need a server-side component in our app, to handle storing subscription details, and send out push messages when updates occur. We've hacked together a quick-and-dirty server using <a href="http://nodejs.org/">NodeJS</a> (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js">server.js</a></code>), which handles the XHR requests sent by our client-side JavaScript code.</p> - -<p>It uses a text file (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>) to store subscription details; this file starts out empty. There are four different types of request, marked by the <code>statusType</code> property of the object sent over in the request; these are the same as those understood client-side, and perform the required server actions for that same situation. Here's what each means in the context of the server:</p> - -<ul> - <li><code>subscribe</code>: The server adds the new subscriber's details into the subscription data store (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>), including the endpoint, and then sends a push message to all the endpoints it has stored to tell each subscriber that someone new has joined the chat.</li> - <li><code>unsubscribe</code>: The server finds the sending subscriber's details in the subscription store and removes it, then sends a push message to all remaining subscribers telling them the user has unsubscribed.</li> - <li><code>init</code>: The server reads all the current subscribers from the text file, and sends each one a push message to tell them a user has initialized (rejoined) the chat.</li> - <li><code>chatMsg</code>: Sent by a subscriber that wishes to deliver a message to all users; the server reads the list of all current subscribers from the subscription store file, then sends each one a push message containing the new chat message they should display.</li> -</ul> - -<p>A couple more things to note:</p> - -<ul> - <li>We are using the Node.js <a href="https://nodejs.org/api/https.html">https module</a> to create the server, because for security purposes, service workers only work on a secure connection. This is why we need to include the <code>.pfx</code> security cert in the app, and reference it when creating the server in the Node code.</li> - <li>When you send a push message without data, you simply send it to the endpoint URL using an HTTP <code>POST</code> request. However, when the push message contains data, you need to encrypt it, which is quite a complex process. As time goes on, libraries will appear to do this kind of thing for you; for this demo we used Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>. Have a look at the source code to get more of an idea of how the encryption is done (and read <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> for more details.) The library <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js#L43-L46">makes sending a push message simple</a>.</li> - <li>If you wish to have messages that collapse (newer updates will replace older updates), you can use the Topic feature. A topic is a special class of subscription update that has a <code>Topic</code> header. A topic name can be any URL safe, base64 string. For example, a header like "<code>Topic: MyFavoriteTopic-For2016</code>" is fine, but "<code>Topic: OMG! Kitties :)</code>" is not. Topic messages are collapsed when the subscriber is offline or unavailable. When they come back, they will receive only the lastest message per topic, along with whatever other messages are pending. "<a href="https://hacks.mozilla.org/2016/11/mozilla-push-server-now-supports-topics/">Mozilla Push Server now supports Topics</a>" on the Mozilla Hacks blog gives more details and examples.</li> -</ul> - -<h3 id="The_service_worker">The service worker</h3> - -<p>Now let's have a look at the service worker code (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js">sw.js</a></code>), which responds to the push messages, represented by {{Event("push")}} events. These are handled on the service worker's scope by the ({{domxref("ServiceWorkerGlobalScope.onpush")}}) event handler; its job is to work out what to do in response to each received message. We first convert the received message back into an object by calling {{domxref("PushMessageData.json()")}}. Next, we check what type of push message it is, by looking at the object's <code>action</code> property:</p> - -<ul> - <li><code>subscribe</code> or <code>unsubscribe</code>: We send a system notification via the <code>fireNotification()</code> function, but also send a message back to the main context on our {{domxref("MessageChannel")}} so we can update the subscriber list accordingly (see {{anch("Handling channel messages sent from the service worker")}} for more details).</li> - <li><code>init</code> or <code>chatMsg</code>: We just send a channel message back to the main context to handle the <code>init</code> and <code>chatMsg</code> cases (these don't need a system notification).</li> -</ul> - -<pre class="brush: js">self.addEventListener('push', function(event) { - var obj = event.data.json(); - - if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { - fireNotification(obj, event); - port.postMessage(obj); - } else if(obj.action === 'init' || obj.action === 'chatMsg') { - port.postMessage(obj); - } -});</pre> - -<p>Next, let's look at the <code>fireNotification()</code> function (which is blissfully pretty simple).</p> - -<pre class="brush: js">function fireNotification(obj, event) { - var title = 'Subscription change'; - var body = obj.name + ' has ' + obj.action + 'd.'; - var icon = 'push-icon.png'; - var tag = 'push'; - - event.waitUntil(self.registration.showNotification(title, { - body: body, - icon: icon, - tag: tag - })); -}</pre> - -<p>Here we assemble the assets needed by the notification box: the title, body, and icon. Then we send a notification via the {{domxref("ServiceWorkerRegistration.showNotification()")}} method, providing that information as well as the tag "push", which we can use to identify this notification among any other notifications we might be using. When the notification is successfully sent, it manifests as a system notification dialog on the users computers/devices in whatever style system notifications look like on those systems (the following image shows a Mac OSX system notification.)</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11855/subscribe-notification.png" style="display: block; height: 65px; margin: 0px auto; width: 326px;"></p> - -<p>Note that we do this from inside an {{domxref("ExtendableEvent.waitUntil()")}} method; this is to make sure the service worker remains active until the notification has been sent. <code>waitUntil()</code> will extend the life cycle of the service worker until everything inside this method has completed.</p> - -<div class="note"> -<p><strong>Note</strong>: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as <code>Clients.openWindow()</code>) is properly implemented (see {{bug(1203324)}} for more details.)</p> -</div> - -<h2 id="Handling_premature_subscription_expiration">Handling premature subscription expiration</h2> - -<p>Sometimes push subscriptions expire prematurely, without {{domxref("PushSubscription.unsubscribe()")}} being called. This can happen when the server gets overloaded, or if you are offline for a long time, for example. This is highly server-dependent, so the exact behavior is difficult to predict. In any case, you can handle this problem by watching for the {{Event("pushsubscriptionchange")}} event, which you can listen for by providing a {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} event handler; this event is fired only in this specific case.</p> - -<pre class="brush: js language-js"><code class="language-js">self<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'pushsubscriptionchange'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // do something, usually resubscribe to push and -</span> <span class="comment token"> // send the new subscription details back to the -</span> <span class="comment token"> // server via XHR or Fetch -</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<p>Note that we don't cover this case in our demo, as a subscription ending is not a big deal for a simple chat server. But for a more complex example you'd probably want to resubscribe the user.</p> - -<h2 id="Extra_steps_for_Chrome_support">Extra steps for Chrome support</h2> - -<p>To get the app working on Chrome, we need a few extra steps, as Chrome currently relies on Google's Cloud Messaging service to work.</p> - -<h3 id="Setting_up_Google_Cloud_Messaging">Setting up Google Cloud Messaging</h3> - -<p>To get this set up, follow these steps:</p> - -<ol> - <li>Navigate to the <a href="https://console.developers.google.com">Google Developers Console</a> and set up a new project.</li> - <li>Go to your project's homepage (ours is at <code>https://console.developers.google.com/project/push-project-978</code>, for example), then - <ol> - <li>Select the <em>Enable Google APIs for use in your apps</em> option.</li> - <li>In the next screen, click <em>Cloud Messaging for Android</em> under the <em>Mobile APIs</em> section.</li> - <li>Click the <em>Enable API</em> button.</li> - </ol> - </li> - <li>Now you need to make a note of your project number and API key because you'll need them later. To find them: - <ol> - <li><strong>Project number</strong>: click <em>Home</em> on the left; the project number is clearly marked at the top of your project's home page.</li> - <li><strong>API key</strong>: click <em>Credentials</em> on the left hand menu; the API key can be found on that screen.</li> - </ol> - </li> -</ol> - -<h3 id="manifest.json">manifest.json</h3> - -<p>You need to include a Google app-style <code>manifest.json</code> file in your app, which references the project number you made a note of earlier in the <code>gcm_sender_id</code> parameter. Here is our simple example <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/manifest.json">manifest.json</a>:</p> - -<pre class="brush: js">{ - "name": "Push Demo", - "short_name": "Push Demo", - "icons": [{ - "src": "push-icon.png", - "sizes": "111x111", - "type": "image/png" - }], - "start_url": "/index.html", - "display": "standalone", - "gcm_sender_id": "224273183921" -}</pre> - -<p>You also need to reference your manifest using a {{HTMLElement("link")}} element in your HTML:</p> - -<pre class="brush: html"><link rel="manifest" href="manifest.json"></pre> - -<h3 id="userVisibleOnly">userVisibleOnly</h3> - -<p>Chrome requires you to set the <a href="/en-US/docs/Web/API/PushManager/subscribe#Parameters"><code>userVisibleOnly</code> parameter</a> to <code>true</code> when subscribing to the push service, which indicates that we are promising to show a notification whenever a push is received. This can be <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js#L127">seen in action in our <code>subscribe()</code> function</a>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li> - <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in <a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>. Thanks for the awesome work, Matt!</p> -</div> diff --git a/files/es/conflicting/web/api/url/index.html b/files/es/conflicting/web/api/url/index.html deleted file mode 100644 index 61ab76466d..0000000000 --- a/files/es/conflicting/web/api/url/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Window.URL -slug: conflicting/Web/API/URL -tags: - - API - - DOM - - Propiedad - - Referencia - - Referência DOM - - WebAPI -translation_of: Web/API/URL -translation_of_original: Web/API/Window/URL -original_slug: Web/API/Window/URL ---- -<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> - -<p>La propiedad <strong><code>Window.URL</code></strong> devuelve un objeto que proporciona métodos estáticos usados para crear y gestionar objetos de URLs. Además puede ser llamado como un constructor para construir objetos {{domxref("URL")}}.</p> - -<p>{{AvailableInWorkers}}</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<p>Llamando a un método estático:</p> - -<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> - -<p>Construyendo un nuevo objeto:</p> - -<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('URL', '#dom-url', 'URL')}}</td> - <td>{{Spec2('URL')}}</td> - <td>Definición inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con 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>8.0<sup>[2]</sup></td> - <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("19.0")}}</td> - <td>10.0</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup><br> - 7.0</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 Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> - <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("19.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Desde Gecko 2 (Firefox 4) hasta Gecko 18 incluidos, Gecko devuelve un objeto con el tipo interno no estandar <code>nsIDOMMozURLProperty</code>. En la práctica, esto no hace ninguna diferencia.</p> - -<p>[2] Implementado bajo el nombre no estandar <code>webkitURL</code>.</p> diff --git a/files/es/conflicting/web/api/web_storage_api/index.html b/files/es/conflicting/web/api/web_storage_api/index.html deleted file mode 100644 index 551f98f92d..0000000000 --- a/files/es/conflicting/web/api/web_storage_api/index.html +++ /dev/null @@ -1,304 +0,0 @@ ---- -title: Almacenamiento -slug: conflicting/Web/API/Web_Storage_API -tags: - - DOM - - JavaScript - - Referencia_DOM_de_Gecko - - Todas_las_Categorías - - para_revisar -translation_of: Web/API/Web_Storage_API -translation_of_original: Web/Guide/API/DOM/Storage -original_slug: DOM/Almacenamiento ---- -<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&sa=D&sntz=1&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", "<b>Hola</b>, ¿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&sa=D&sntz=1&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&sa=D&sntz=1&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 > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } - for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) { - iCouple = aCouples[iCouplId].split(/\s*=\s*/); - if (iCouple.length > 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 < 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, "\\$&") + "\\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, "\\$&") + "\\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 -> Borrar Historial reciente -> 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&sa=D&sntz=1&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 -> Opciones -> Privacidad -> 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&sa=D&sntz=1&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 -> Opciones -> Avanzado -> Red -> Datos en modo sin conexión -> 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 -> Opciones -> Avanzado -> Red -> 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&sa=D&sntz=1&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&sa=D&sntz=1&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&sa=D&sntz=1&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/conflicting/web/api/webrtc_api/index.html b/files/es/conflicting/web/api/webrtc_api/index.html deleted file mode 100644 index 41554256cd..0000000000 --- a/files/es/conflicting/web/api/webrtc_api/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: WebRTC -slug: conflicting/Web/API/WebRTC_API -translation_of: Web/API/WebRTC_API -translation_of_original: WebRTC -original_slug: WebRTC ---- -<p>El RTC en WebRTC significa <em>Real-Time Communications</em>, o comunicaciones en tiempo real, en español. WebRTC es una tecnología que permite compartir en tiempo real datos de audio y video entre navegadores (pares). Como conjunto de estándares, WebRTC provee a cualquier navegador de la capacidad de compartir datos de aplicación y realizar teleconferencias de par a par, sin la necesidad de instalar complementos o Software de terceros.</p> -<p>Los componentes de WebRTC son utilizados a través de interfaces avanzadaz de programación en JavaScript (APIs). Actualmente se están desarrollando la API de streaming a través de la red, que representa los flujos de datos de audio y vídeo, y la API PeerConnection, que permite a dos o más usuarios realizar conexiones navegador a navegador. Igualmente en desarrollo se encuentra la API DataChannel, que permite la transmisión de otros tipos de datos para juegos en tiempo real, mensajería instantánea, transferencia de archivos, y otros.</p> -<div class="note"> - <p><strong>Nota:</strong> Parte de este contenido está desactualizado, pero se estará actualizando pronto.</p> -</div> -<p>¿Quieres descubrir WebRTC? ¡Mira este <a href="https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video" title="/en-US/docs/https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video">vídeo introductorio!</a></p> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">Documentación sobre WebRTC</h2> - <dl> - <dt> - <a href="/es/docs/WebRTC/Introduction" title="/en-US/docs/WebRTC/Introduction">Introducción a WebRTC</a></dt> - <dd> - Una guía de introducción sobre qué es WebRTC y cómo funciona.</dd> - <dt> - <a href="/en-US/docs/WebRTC/Using_the_Network_Stream_API" title="/en-US/docs/WebRTC/Using_the_Network_Stream_API">Using the Network Stream API</a></dt> - <dd> - Una guía para usar la API Network Stream para transmitir flujos de audio y vídeo.</dd> - <dt> - <a href="/es/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">Comunicaciones peer-to-peer (P2P) con WebRTC</a></dt> - <dd> - Como realizar conexiones par a par usando las APIs de WebRTC.</dd> - <dt> - </dt> - <dt> - <a href="/es/docs/WebRTC/Taking_webcam_photos" title="taking webcam photos">Capturar fotografías con la cámara web</a></dt> - <dd> - Como capturar imágenes desde un Webcam con WebRTC.</dd> - <dt> - <a href="/es/docs/WebRTC/MediaStream_API" title="/en-US/docs/WebRTC/MediaStream_API">API de MediaStream</a></dt> - <dd> - Descripción de la API que soporta la creación y manipulación de flujos de medios.</dd> - <dt> - <a href="/es/docs/Web/API/Navigator.getUserMedia" title="/en-US/docs/">getUserMedia()</a></dt> - <dd> - La función del navegador que permite el acceso a dispositivos de medios del sistema.</dd> - <dd> - </dd> - </dl> - <p><span class="alllinks"><a href="/en-US/docs/tag/WebRTC" title="/en-US/docs/tag/B2G">Ver todo...</a></span></p> - <h2 class="Tools" id="Ejemplos">Ejemplos</h2> - <ul> - <li><a href="http://idevelop.github.com/ascii-camera/" title="http://idevelop.github.com/ascii-camera/">ASCII camera</a></li> - </ul> - </td> - <td> - <h2 class="Community" id="Community" name="Community">Obteniendo ayuda de la comunidad</h2> - <p>Cuando desarrolles sitios y aplicaciones que tomen ventaja de las tecnologías de WebRTC, puede ser muy útil ponerse en contacto con otras personas haciendo lo mismo.</p> - <ul> - <li>Consulta el tópico <em>Media</em> en el foro: {{ DiscussionList("dev-media", "mozilla.dev.media") }}</li> - </ul> - <ul> - <li>Pregunta en el canal IRC de Media de Mozilla: <a class="link-irc" href="irc://irc.mozilla.org/media" title="irc://irc.mozilla.org/b2g">#media</a></li> - </ul> - <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">No olvides la <em>netiqueta</em>...</a></span></p> - <br> - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Tópicos relacionados</h2> - <ul> - <li><a href="/es/docs/Usando_audio_y_video_con_HTML5" title="/es/docs/Usando_audio_y_video_con_HTML5">Usando audio y video con HTML5</a></li> - </ul> - <h2 class="Tools" id="Recursos">Recursos</h2> - <ul> - <li><a href="http://www.w3.org/TR/webrtc/" title="WebRTC specification">WebRTC Specification</a></li> - <li><a href="http://mozilla.github.io/webrtc-landing/" title="http://mozilla.github.io/webrtc-landing/">WebRTC Test Landing Page</a></li> - </ul> - </td> - </tr> - </tbody> -</table> -<p> </p> diff --git a/files/es/conflicting/web/api/websockets_api/index.html b/files/es/conflicting/web/api/websockets_api/index.html deleted file mode 100644 index 6250ba53c0..0000000000 --- a/files/es/conflicting/web/api/websockets_api/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: WebSockets -slug: conflicting/Web/API/WebSockets_API -tags: - - WebSockets - - para_revisar -original_slug: WebSockets ---- -<p><span><span style="">{{ SeeCompatTable () }}</span></span></p> -<p><span><span style="">WebSockets es una tecnología que hace posible abrir una sesión de comunicación interactiva entre el navegador del usuario y un servidor.</span></span> <span><span style="">Con esta API, puedes enviar mensajes a un servidor y recibir respuestas por eventos sin tener que consultar al servidor.</span></span></p> -<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentation"><a><span><span style="">Documentación</span></span></a></h4> <dl> <dt><a href="/en/WebSockets/Writing_WebSocket_client_applications" title="https://developer.mozilla.org/en/WebSockets/Writing_WebSocket_client_applications"><span><span style="">Cómo escribir aplicaciones para cliente WebSocket</span></span></a></dt> <dd><span><span style="">Una guía tutorial sobre cómo escribir clientes WebSocket para ejecutarse en el navegador.</span></span></dd> <dt><a href="/en/WebSockets/WebSockets_reference" title="https://developer.mozilla.org/en/WebSockets/WebSockets_reference"><span><span style="">Referencia WebSockets</span></span></a></dt> <dd><span><span style="">Una referencia a la API del lado del cliente WebSocket.</span></span></dd> <dt><a href="/en/WebSockets/The_WebSocket_protocol" title="https://developer.mozilla.org/en/WebSockets/The_WebSocket_protocol"><span><span style="">El protocolo WebSocket</span></span></a></dt> <dd><span><span style="">Una referencia al protocolo de WebSocket.</span></span></dd> <dt><a href="/en/WebSockets/Writing_WebSocket_servers" title="https://developer.mozilla.org/en/WebSockets/Writing_WebSocket_servers"><span><span style="">Cómo escribir servidores WebSocket</span></span></a></dt> <dd><span><span style="">Una guía sobre cómo escribir el código del lado del servidor para manejar el protocolo WebSocket.</span></span></dd> </dl> <p><a href="/Special:Tags?tag=WebSockets&language=en" title="https://developer.mozilla.org/Special:Tags?tag=WebSockets&language=en"><span></span></a><a><span><span style="">Ver todas</span></span></a></p> </td> <td> <h4 id="Tools"><span><span style="">Herramientas</span></span></h4> <ul> <li><span><span style=""><a class=" external" href="http://socket.io/" title="http://socket.io/">Socket.</a><a class=" external" href="http://www.google.com/url?q=http%3A%2F%2Fsocket.io&sa=D&sntz=1&usg=AFQjCNHh469AGdVlfIU6_sHUVrgvsaDIaQ">IO</a>:</span></span><span><span style="">una potente API multiplataforma de WebSocket para <a class=" external" href="http://nodejs.org/" title="http://nodejs.org/">Node.js</a>.</span></span></li> <li><span><span style=""><a class=" link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a> : una implementación de la API del servidor WebSocket <a class=" external" href="http://nodejs.org/" title="http://nodejs.org/">Node.js</a> .</span></span></li> </ul> <p> </p> <h4 id="Related_Topics"><span><span style="">Temas relacionados</span></span></h4> <dl> <dd><span><span style=""><a href="/en/AJAX" title="https://developer.mozilla.org/en/AJAX">AJAX</a> , <a href="/en/JavaScript" title="https://developer.mozilla.org/en/JavaScript">JavaScript</a></span></span></dd> </dl> </td> </tr> </tbody> -</table> -<h2 id="Consulta_también"><span><span style="">Consulta también</span></span></h2> -<ul> <li><a class=" external" href="http://dev.w3.org/html5/websockets/" title="http://dev.w3.org/html5/websockets/"><span><span style="">Especificación de la API de WebSocket</span></span></a></li> <li><a href="/en/Server-sent_events" title="https://developer.mozilla.org/en/Server-sent_events"><span><span style="">Eventos enviados por el servidor </span></span></a></li> -</ul> -<h2 id="Compatibilidad_de_los_navegadores"><span><span style="">Compatibilidad de los navegadores</span></span></h2> -<p><span><span style="">{{ CompatibilityTable () }}</span></span></p> -<div id="compat-desktop"> -<table class="compat-table"> <tbody> <tr> <th><span><span style="">Característica</span></span></th> <th><span><span style="">Chrome</span></span></th> <th><span><span style="">Firefox (Gecko)</span></span></th> <th><span><span style="">Internet Explorer</span></span></th> <th><span><span style="">Opera</span></span></th> <th><span><span style="">Safari</span></span></th> </tr> <tr> <td><span><span style="">Compatibilidad con la versión -76 {{ obsolete_inline () }}</span></span></td> <td><span><span style="">6</span></span></td> <td><span><span style="">{{ CompatGeckoDesktop ("2.0") }}</span></span></td> <td><span><span style="">{{ CompatNo () }}</span></span></td> <td><span><span style="">11.00 (desactivado)</span></span></td> <td><span><span style="">5.0.1</span></span></td> </tr> <tr> <td><span><span style="">Compatibilidad con el protocolo de la versión 7</span></span></td> <td><span><span style="">{{ CompatNo () }}</span></span></td> <td> <p><span><span style="">{{ CompatGeckoDesktop ("6.0") }}</span></span></p> <div class="note"><span><span style="">usa <code>MozWebSocket</code> .</span></span></div> </td> <td><span><span style="">{{ CompatNo () }}</span></span></td> <td><span><span style="">{{ CompatNo () }}</span></span></td> <td><span><span style="">{{ CompatNo () }}</span></span></td> </tr> <tr> <td><span><span style="">Compatibilidad con el protocolo de la versión 10</span></span></td> <td><span><span style="">14</span></span></td> <td> <p><span><span style="">{{ CompatGeckoDesktop ("7.0") }}</span></span></p> <div class="note"><span><span style="">usa MozWebSocket .</span></span></div> </td> <td><span><span style="">HTML5 Labs</span></span></td> <td><span><span style="">{{ CompatUnknown () }}</span></span></td> <td><span><span style="">{{ CompatUnknown () }}</span></span></td> </tr> </tbody> -</table> -</div> -<div id="compat-mobile"> -<table class="compat-table"> <tbody> <tr> <th><span><span style="">Característica</span></span></th> <th><span><span style="">Android</span></span></th> <th><span><span style="">Firefox Mobile (Gecko)</span></span></th> <th><span><span style="">IE Mobile</span></span></th> <th><span><span style="">Opera Mobile</span></span></th> <th><span><span style="">Safari Mobile</span></span></th> </tr> <tr> <td><span><span style="">Compatibilidad con la versión -76 {{ obsolete_inline () }}</span></span></td> <td><span><span style="">{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> </tr> <tr> <td><span><span style="">Compatibilidad con el protocolo de la versión 7</span></span></td> <td><span><span style="">{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> </tr> <tr> <td><span><span style="">Compatibilidad con el protocolo de la versión 8 (borrador 10 de IETF)</span></span></td> <td><span><span style="">{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatGeckoMobile ("7.0") }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> </tr> </tbody> -</table> -</div> -<h3 id="Notas_para_Gecko"><span><span style="">Notas para Gecko</span></span></h3> -<p><span><span style="">El soporte de WebSockets en Firefox sigue de cerca el desarrollo de la especificación WebSocket.</span></span> <span><span style="">Firefox 6 implementa la versión 7 del protocolo subyacente, mientras que Firefox 7 implementa la versión 8 (según lo especificado por el borrador 10 de IETF).</span></span> <span><span style="">Firefox Mobile recibió el soporte de WebSocket en Firefox móvil 7.0.</span></span></p> -<div class="geckoVersionNote"> -<p><span><span style="">{{ gecko_callout_heading("6.0") }}</span></span></p> -<p><span><span style="">Antes de Gecko 6.0 {{ geckoRelease ("6,0 ") }}, hubo, incorrectamente, un objeto <code>WebSocket</code> que algunos sitios creyeron que implicaba que los servicios <code>WebSocket</code> no estaban prefijados. Este objeto se ha cambiado a <code>MozWebSocket</code> .</span></span></p> -</div> -<div class="geckoVersionNote"> -<p><span><span style="">{{ gecko_callout_heading("7.0") }}</span></span></p> -<p><span><span style="">A partir de Gecko 7.0 {{ geckoRelease ("7,0 ") }}, la preferencia <code>network.websocket.max-connections</code> se usa para determinar el número máximo de conexiones WebSocket que pueden estar abiertas a la vez.</span></span> <span><span style="">El valor predeterminado es 200.</span></span></p> -</div> -<div class="warning"><span><span style="">Advertencia: entre otras cosas, una razón clave por la que WebSockets está desactivado por defecto es el descubrimiento de un <a class=" external" href="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html" title="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html">problema de seguridad en el diseño del protocolo</a>.</span></span> <span><span style="">En este momento no se recomienda utilizar WebSockets en las versiones de Firefox en un entorno de producción.</span></span> <span><span style="">Si aun así deseas experimentar con WebSockets, puedes hacerlo abriendo about: config y estableciendo la preferencia network.websocket.enabled en true.</span></span> <span><span style="">También tendrás que establecer la preferencia network.websocket.override-security-block en true para permitir la inicialización de una conexión WebSocket.</span></span></div> -<p><span><span style="">{{ HTML5ArticleTOC () }}</span></span></p> -<p><span><span style="">{{ languages ( {"en": "en/WebSockets", "zh-tw": "zh_tw/WebSockets"} ) }}</span></span></p> diff --git a/files/es/conflicting/web/api/window/localstorage/index.html b/files/es/conflicting/web/api/window/localstorage/index.html deleted file mode 100644 index d4307e30a4..0000000000 --- a/files/es/conflicting/web/api/window/localstorage/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: LocalStorage -slug: conflicting/Web/API/Window/localStorage -tags: - - Almacenamiento en Navegador - - Almacenamiento local -translation_of: Web/API/Window/localStorage -translation_of_original: Web/API/Web_Storage_API/Local_storage -original_slug: Web/API/Storage/LocalStorage ---- -<p><code>localStorage</code> (almacenamiento local) es lo mismo que<code> <a href="/en-US/docs/Web/API/sessionStorage">sessionStorage</a> </code>(almacenamiento de sesión), con las mismas reglas de mismo-origen aplicadas, pero es persistente a través de diferentes sesiones. <code>localStorage</code> se introdujo en la version Firefox 3.5.</p> - -<div class="note"><strong>Nota:</strong> Cuando el navegador está en modo de navegación privado, una nueva base de datos temporal se crea para guardar <em>datos </em>de almacenamiento local. Esta base de datos se vacía y descarta cuando salimos del modo de navegación privado.</div> - -<pre class="brush:js notranslate" style="font-size: 14px;">// Guardar datos al almacenamiento local actual -localStorage.setItem("nombredeusuario", "John"); - -// Acceder a datos almacenados -alert( "nombredeusuario = " + localStorage.getItem("nombredeusuario"));</pre> - -<p class="note">La persistencia de <code>localStorage</code> lo hace útil para una variedad de cosas, incluyendo contadores de páginas, como se demuestra en <a href="http://codepen.io/awesom3/pen/Hlfma">este tutorial en Codepen</a>.</p> - -<h4 id="Compatibilidad" style="line-height: 18px; font-size: 1.28571428571429rem;">Compatibilidad</h4> - -<p>Los objetos de <code>Storage</code> (almacenamiento) son una adición reciente al estándar, por lo que pueden no estar presentes en todos los navegadores. Esto se puede solucionar si introduce uno de los dos códigos al principio de sus <em>scripts</em>, permitiendo el uso de el objeto <code>localStorage</code> en implementaciones que no lo soportan de forma nativa.</p> - -<p>Este algoritmo es una imitación exacta del objeto <code>localStorage</code>, pero hace uso de cookies.</p> - -<pre class="brush:js notranslate" style="font-size: 14px;">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) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; 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; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; 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 > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } - for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { - aCouple = aCouples[nIdx].split(/\s*=\s*/); - if (aCouple.length > 1) { - oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[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 se puede guardar está muy restringido por el uso de cookies. Con este algoritmo, utilize las funciones <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, y <code>localStorage.removeItem()</code> para agregar, cambiar, o quitar una clave. El uso del método <code>localStorage.suClave</code> para obtener, establecer, o borrar una clave <strong>no está permitido con este código</strong>. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.</div> - -<div class="note"><strong>Nota:</strong> Al cambiar la cadena <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> a: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (y al cambiar el nombre del objeto), esto se pasará a ser un <code>sessionStorage</code> <em>polyfill</em> en vez de un <code>localStorage</code> <em>polyfill</em>. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo se borrará cuando todas las ventanas del navegador hayan sido cerradas), mientras que una implementación <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.</span></div> - -<p>Esta es otra imitación menos exacta de el objeto <code>localStorage</code>, es más simple que la anterior, pero es compatible con navegadores antiguos, como Internet Explorer < 8 (<strong>probado y funcional incluso en Internet Explorer 6</strong>). También hace uso de cookies.</p> - -<pre class="brush:js notranslate" style="font-size: 14px;">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, "\\$&") + "\\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) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - this.length = document.cookie.match(/\=/g).length; - }, - length: 0, - removeItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - this.length--; - }, - hasOwnProperty: function (sKey) { - return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\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 se puede guardar está muy restringido por el uso de cookies. Con este algoritmo, utilize las funciones <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, y <code>localStorage.removeItem()</code> para agregar, cambiar, o quitar una clave. El uso del método <code>localStorage.suClave</code> para obtener, establecer, o borrar una clave <strong>no está permitido con este código</strong>. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.</div> - -<div class="note"><strong>Nota:</strong> Al cambiar la cadena <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> a: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (y al cambiar el nombre del objeto), esto se volverá un <code>sessionStorage</code> <em>polyfill</em> en vez de un <code>localStorage</code> <em>polyfill</em>. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo se borrará cuando todas las ventanas del navegador hayan sido cerradas), mientras que una implementación <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.</span></div> - -<h4 id="Compatibilidad_y_relación_con_globalStorage" style="line-height: 18px; font-size: 1.28571428571429rem;">Compatibilidad y relación con globalStorage</h4> - -<p class="note"><code>localStorage</code> es lo mismo que <code>globalStorage[location.hostname]</code>, con la excepción de que tiene un ámbito de origen HTML5 (<em>esquema </em>+ <em>nombre del host </em>+ <em>puerto no estandar</em>), y <code>localStorage</code> es una instancia de <code>Storage</code>, al contrario que <code>globalStorage[location.hostname]</code>, que es una instancia de <code>StorageObsolete</code>, como se explica más adelante. Por ejemplo, <a class="external" href="http://example.com" rel="freelink">http://ejemplo.com</a> no puede acceder al mismo objeto <code>localStorage</code> que <a class="link-https" href="https://example.com" rel="freelink">https://ejemplo.com,</a> pero los dos pueden acceder al mismo elemento de <code>globalStorage</code>. --<code>localStorage</code> es una interfaz estándar mientras que <code>globalStorage</code> no lo es, así que no se debe depender de ella.</p> - -<p>Nótese que al establecer una propiedad en <code>globalStorage[location.hostname]</code> <strong>no</strong> la establece en <code>localStorage</code>, y al extender <code>Storage.prototype</code> no afecta a los elementos de <code>globalStorage</code>; sólo al extender <code>StorageObsolete.prototype</code> los afecta.</p> - -<h4 id="El_formato_de_Storage">El formato de Storage</h4> - -<p>Las claves y valores de <code>Storage</code> se guardan en el formato UTF-16 <a href="/en-US/docs/Web/API/DOMString">DOMString</a>, que usa 2 bytes por carácter.</p> diff --git a/files/es/conflicting/web/api/windoworworkerglobalscope/index.html b/files/es/conflicting/web/api/windoworworkerglobalscope/index.html deleted file mode 100644 index 881424841a..0000000000 --- a/files/es/conflicting/web/api/windoworworkerglobalscope/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: WindowBase64 -slug: conflicting/Web/API/WindowOrWorkerGlobalScope -tags: - - API - - HTML-DOM - - Helper - - NeedsTranslation - - TopicStub - - WindowBase64 -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowBase64 -original_slug: Web/API/WindowBase64 ---- -<p>{{APIRef}}</p> -<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p> -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> -<h2 id="Properties">Properties</h2> -<p><em>This helper neither defines nor inherits any properties.</em></p> -<h2 id="Methods">Methods</h2> -<p><em>This helper does not inherit any methods.</em></p> -<dl> - <dt> - {{domxref("WindowBase64.atob()")}}</dt> - <dd> - Decodes a string of data which has been encoded using base-64 encoding.</dd> - <dt> - {{domxref("WindowBase64.btoa()")}}</dt> - <dd> - Creates a base-64 encoded ASCII string from a string of binary data.</dd> -</dl> -<h2 id="Specifications">Specifications</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> -<h2 id="Browser_compatibility">Browser compatibility</h2> -<p>{{CompatibilityTable}}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p> -<h2 id="See_also">See also</h2> -<ul> - <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html b/files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html deleted file mode 100644 index bede3a0c57..0000000000 --- a/files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: WindowTimers -slug: conflicting/Web/API/WindowOrWorkerGlobalScope_e2691f7ad05781a30c5fc5bb3b3f633a -tags: - - API -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers -original_slug: Web/API/WindowTimers ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p> - -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface do not define any property, nor inherit any.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface do not inherit any method.</em></p> - -<dl> - <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> - <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> - <dt>{{domxref("WindowTimers.setInterval()")}}</dt> - <dd>Schedules the execution of a function each X milliseconds.</dd> - <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> - <dd>Sets a delay for executing a function.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}}</td> - <td>1.0</td> - <td>4.0</td> - <td>4.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> |