Provee el método {{domxref("FetchEvent.respondWith", "event.respondWith()")}}, el cúal nos permite proporcionar una respuesta a esta búsqueda (fetch).
-
-Este evento fetch, permite al navegador hacer esta acción por defecto para peticiones non-GET. Para peticiones GET esto intenta retornar una coincidencia en el cache, y vuelve de nuevo a la red. Si busca una concidencia en el cache, actualiza asincronicamente el cache para la próxima vez.
-
-Retorna el nombre del archivo representado por el objeto {{domxref("File")}}. Por razones de seguridad, la ruta de directorios es excluida de esta propiedad.
-
-Una cadena, conteniendo el nombre del archivo sin la ruta de directorios, por ejemplo: "Mi resumen.rtf".
-
-Un {{domxref("USVString")}} conteniendo la ruta del archivo relativa al directorio padre seleccionado por el usuario.
-
-En este ejemplo,un seleccionador de directorios es mostrado al usuario para permitirle seleccionar uno o mas directorios. Cuando el evento {{event("change")}} ocurre, una lista de todos los archivos contenidos dentro de la gerarquia de directorio seleccionado es generado y mostrado.
-
-Esta API no tiene especificacion W3C o WHATWG.
-
-{{ gecko_minversion_header("1.9.2") }}
-
-
-
-El uso de la API File añadida al DOM en HTML5, ahora hace posible que la página web solicite al usuario que seleccione archivos locales y, a continuación, leer el contenido de esos archivos. Esta selección se puede hacer, ya sea usando un elemento {{HTMLElement ( "input")}} de HTML o mediante arrastrar y soltar.
-
-Selección de ficheros utilizando HTML
-
-Seleccionar solo un fichero usando la API File es sencillo:
-
-<input type="file" id="input" onchange="handleFiles(this.files)">
-Cuando el usuario elige el fichero, la función handleFiles() es llamada con un objeto FileList File
-
-Si se prefiere permitir al usuario elegir varios ficheros, entonces se pone el atributo multiple en el elemento input:
-
-<input type="file" id="input" multiple="true" onchange="handleFiles(this.files)">
-En este caso, la lista de ficheros pasada a la función handleFiles() contiene un objeto File
-
-Comenzando en Gecko 2.0 {{ geckoRelease("2.0") }}, se puede ocultar el realmente feo {{ HTMLElement("input") }} y representar tu propio interfaz para abrir el picker de ficheros y pintar que fichero o ficheros ha seleccionado el usuario. Esto se puede hacer añadiendo al elemento input la característica "display:none" en su css, o estilo y llamando al método click() del elemento {{ HTMLElement("input") }}.
-
-Como aparece en este HTML:
-
-<form>
- <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
-</form>
-
-<a href="javascript:doClick()">Select some files</a>
-
-
-Tu método doClick() puede parecerse al siguiente:
-
-function doClick() {
- var el = document.getElementById("fileElem");
- if (el) {
- el.click();
- }
-}
-
-
-Obviamente puedes cambiar como quieras, el estilo del botón para abrir el picker de ficheros.
-
-Añadir dinámicamente un listener tipo change
-
-Si tu campo input ha sido creado usando una libreria JavaScript como jQuery , se necesitará usar {{ domxref("element.addEventListener()") }} para añadir el manejador de eventos tipo change, como en el ejemplo siguiente:
-
-var inputElement = document.getElementById("inputField");
-inputElement.addEventListener("change", handleFiles, false);
-
-function handleFiles() {
- var fileList = this.files;
-
- /* now you can work with the file list */
-}
-
-
-Nota: en este caso, la función handleFiles() mira la lista de ficheros con la finalidad de aceptar un parametro, mientras los eventos listeners sean añadidos de esta manera no pueden aceptar un parametro del input.
-
-Gecko 2.0 {{ geckoRelease("2.0") }} introduce soporte para los métodos de DOM {{ domxref("window.createBlobURL()") }} y {{ domxref("window.revokeBlobURL()") }}. El cual te permite crear un simple string con la URL que referenciar cualquier dato que pueda referenciar usando un objeto File
-
-Cuando tienes un objeto File
-
-var blobURL = window.createBlobURL(fileObj);
-
-
-El blob URL es un string que identifica el objeto File
-
-window.revokeBlobURL(blobURL);
-
-
-Selección de ficheros usando drag and drop
-
-También se puede dejar al usuario arrastrar los ficheros en tu aplicación web.
-
-El primer paso para establecer la zona de arrastre, el lugar en donde dejar los ficheros arrastrados. La parte exacta en donde se coloque esta zona de arrastre dentro de tu aplicación, dependerá del diseño de la aplicación, pero crear el elemento es sencillo:
-
-var dropbox;
-
-dropbox = document.getElementById("dropbox");
-dropbox.addEventListener("dragenter", dragenter, false);
-dropbox.addEventListener("dragover", dragover, false);
-dropbox.addEventListener("drop", drop, false);
-
-
-En este ejemplo se transforma el elemento de ID "dropbox" en la zona de arrastre. Esto se hace añadiendo listeners para lo eventos de dragenter, dragover, y drop.
-
-Realmente en este caso no se necesita hacer nada con los eventos dragenter y dragover, por lo que ambas funciones seran muy sencillas. Sólo pararán la propagacion de eventos y prevendran las acciones por defecto:
-
-function dragenter(e) {
- e.stopPropagation();
- e.preventDefault();
-}
-
-function dragover(e) {
- e.stopPropagation();
- e.preventDefault();
-}
-
-
-La verdadera magia ocurre en la función drop():
-
-function drop(e) {
- e.stopPropagation();
- e.preventDefault();
-
- var dt = e.dataTransfer;
- var files = dt.files;
-
- handleFiles(files);
-}
-
-
-Aquí se recupera el campo dataTransfer del evento, a partir de ahi se extraen la lista de ficheros, y se pasan a handleFiles(). A partir de este punto se manejan los ficheros de igual manera tanto si se han obtenido usado el elemento input o drag and drop.
-
-
-
-El objeto FileListFilelength:
-
-var numFiles = files.length;
-
-
-Al objeto File
-
-for (var i = 0; i < files.length; i++) {
- var file = files[i];
- ..
-}
-
-
-El bucle itera por todos los ficheros de la lista.
-
-Cada objeto File
-
-
- nameEs de solo lectura y es el nombre del fichero sin ninguna información sobre el path.
- sizeEs de solo lectura y es el tamaño del fichero en bytes como un entero de 64-bit.
- typeEs de solo lectura y contiene MIME type del fichero, o "" si el tipo no puede ser determinado.
-
-
-Ejemplo: Mostrando miniaturas de una selección de imágenes del usuario
-
-Digamos que usted esta desarrollando el próximo gran sitio web para compartir fotos, y quiere usar HTML5 para mostrar previsualizaciones de miniaturas de imágenes antes de que el usuario actual las suba. Basta con establecer su elemento input o zona de arrastre como se indicó anteriormente, y hacer una llamada a una función handleFiles() como la siguiente.
-
-function handleFiles(files) {
- for (var i = 0; i < files.length; i++) {
- var file = files[i];
- var imageType = /image.*/;
-
- if (!file.type.match(imageType)) {
- continue;
- }
-
- var img = document.createElement("img");
- img.classList.add("obj");
- img.file = file;
- preview.appendChild(img);
-
- var reader = new FileReader();
- reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
- reader.readAsDataURL(file);
- }
-}
-
-
-Aquí nuestro bucle recorre los archivos seleccionados por el usuario y mira el atributo type de cada archivo para ver si es una imagen (haciendo que una expresión regular coincida con la cadena de texto "image.*"). Para cada archivo que sea una imagen, creamos un nuevo elemento img. Se puede usar CSS para establecer bordes bonitos, sombras, y especificar el tamaño de la imagen, el de manera que ni siquiera necesita hacerse aquí.
-
-Cada imagen tiene la clase CSS "obj" añadida, para hacerla mas fácil buscarla en el árbol del DOM. Además añadimos un atributo file a cada imagen especificando el Fichero
-
-A continuación establecemos el FileReaderimg. Después de crear el nuevo objeto FileReader, configuramos su función onload, luego llamamos a readAsDataURL() para comenzar la operación de lectura en segundo plano. Cuando el contenido completo de la imagen ha sido cargado, se convierte a data: URL, el cuál es pasado al callback onload. Nuestra implementación de esta rutina simplemente establece el atributo src del elemento img cargado, cuyo resultado es la imagen apareciendo en la miniatura en la pantalla del usuario.
-
-Este ejemplo el objeto blob URLs para mostrar las miniaturas de las imágenes. Además, se muestra otra información del archivo incluyendo sus nombres y tamaños. Tú puedes ver el ejemplo (tenga en cuenta que se requiere una versión Nghtly de Firefox del 23 de september 23 o mas reciente, o Firefox 4.0 beta 7).
-
-El HTML que representa la interfaz es::
-
-<form>
- <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
-</form>
-<a href="javascript:doClick()">Seleccione algunos archivos</a>
-<div id="fileList">
- <p>¡No se han seleccionado archivos!</p>
-</div>
-
-
-Esto establece nuestro elemento {{ HTMLElement("input") }} de nuestro, así como un enlace que invoca el selector de archivos, ya que mantenmos el input file oculto para prevenir mostrar un UI menos atractivo. Esto se explica anteriormente en al la sección Using hidden file input elements using the click() method , así como el método doClick() que invoca el el selector de archivos.
-
-El método handleFiles() es el siguiente:
-
-function handleFiles(files) {
- var d = document.getElementById("fileList");
- if (!files.length) {
- d.innerHTML = "<p>¡No se han seleccionado archivos!</p>";
- } else {
- var list = document.createElement("ul");
- d.appendChild(list);
- for (var i=0; i < files.length; i++) {
- var li = document.createElement("li");
- list.appendChild(li);
-
- var img = document.createElement("img");
- img.src = window.createBlobURL(files[i]);;
- img.height = 60;
- img.onload = function() {
- window.revokeBlobURL(this.src);
- }
- li.appendChild(img);
-
- var info = document.createElement("span");
- info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
- li.appendChild(info);
- }
- }
-}
-
-
-Esto comienza buscando la URL del {{ HTMLElement("div") }} con la ID "fileList". Este es el bloque donde vamos a insertar la lista de archivos incluyendo las miniaturas.
-
-Si el objeto {{ domxref("FileList") }} pasado a handleFiles() es null, simplemente establecemos el bloque inner HTML para mostrar "¡No se han seleccionado archivos!". En caso contrario, comenzamos a construir nuestra lista de archivos como sigue:
-
-
- Un nuevo elemento de lista desordenada ({{ HTMLElement("ul") }} es creado.
- El nuevo elemento de la lista es insertado en el bloque {{ HTMLElement("div") }} llamando a si método {{ domxref("element.appendChild()") }}.
- Para cada {{ domxref("File") }} en el {{ domxref("FileList") }} representado files:
-
- Se crea un nuevo elemento de lista ({{ HTMLElement("li") }}) y lo inserta en la lista.
- Se crea un nuevo elemento imagen ({{ HTMLElement("img") }}).
- Establece en la fuente de la imagen un nuevo blob URL representandoel archivo, usando {{ domxref("window.createBlobURL()") }} para crear el blob URL.
- Se establece el alto de la imagen en 60 pixels.
- Se configura el controlador para el evento load para liberar el blob URL, puesto que ya no es necesario una vez que la imagen ha sido cargada. Esto se hace llamando al método {{ domxref("window.revokeBlobURL()") }}, pasando la cadena en el blob URL como se ha especificado para img.src.
- Se añade el nuevo elemento de la lista a la lista.
-
-
-
-
-Ejemplo: Subiendo un archivo seleccionado por el usuario
-
-Otra cosa que podrías querer hacer es dejar que el usuario suba el archivo o los archivos seleccionados (como las imagenes seleccionadas usando el ejemplo anterior) al servidor. Esto se puede hacer de forma asíncrona muy facilmente.
-
-Creando las tareas de subida
-
-Continuando con el código que contruye las miniaturas en el ejemplo anterior, hay que recordar que cada imagen en miniatura se encuentra en la clase CSS "obj", con el correspondiente Filefile. Vamos a seleccionar todas las imágenes que el usuario ha seleccionado facilmente para subirlas usando {{ domxref("Document.querySelectorAll()") }}, como sigue:
-
-function sendFiles() {
- var imgs = document.querySelectorAll(".obj");
-
- for (var i = 0; i < imgs.length; i++) {
- new FileUpload(imgs[i], imgs[i].file);
- }
-}
-
-
-La segunda línea crea un array, llamado imgs, de todos los elementos en el documento con la clase CSS "obj". En nuestro caso, estos serán todas las miniaturas de las imágenes. Una vez que tenemos esa lista, of all the elements in the document with the CSS class "obj". In our case, these will be all the image thumbnails. Once we have that list, es trivial pasar por la lista, creando una nueva instancia de FileUpload por cada una. Subiendo el correspondiente archivo por cada uno de ellos.
-
-Manipulando el proceso de carga de un archivo
-
-La función FileUpload acepta dos entradas: un elemento de imagen y un archivo desde el que leer los datos de la imagen.
-
-function FileUpload(img, file) {
- this.ctrl = createThrobber(img);
- var xhr = new XMLHttpRequest();
- this.xhr = xhr;
-
- var self = this;
- this.xhr.upload.addEventListener("progress", function(e) {
- if (e.lengthComputable) {
- var percentage = Math.round((e.loaded * 100) / e.total);
- self.ctrl.update(percentage);
- }
- }, false);
-
- xhr.upload.addEventListener("load", function(e){
- self.ctrl.update(100);
- var canvas = self.ctrl.ctx.canvas;
- canvas.parentNode.removeChild(canvas);
- }, false);
-
- xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
- xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
- xhr.sendAsBinary(file.getAsBinary());
-}
-
-
-La función FileUpload() mostrada arriba crea un throbber, el cual es usado para mostrar la información del progreso, a continuación se crea un XMLHttpRequest
-
-Antes de subir los datos de hecho, se toman varias medidas preparatorias:
-
-
- El listener del progreso de la carga del XMLHttpRequest's se configura para actualizar el throbber con una nueva información de porcentaje, por lo que a medida que progresa la carga, el throbber será actualizado en base a la última información.
- El evento "load" de la carga del XMLHttpRequest's se configura para actualizar el throbber con el 100% como la información de progreso (para asegurar que el indicador de progreso realmente alcanza el 100%, en caso de las peculiaridades de granularidad durante el proceso
- La petición para cargar la imagen se inicia llamando al método XMLHttpRequest's open() para comenzar a generar una petición de tipo POST.
- El MIME type para la carga se establece llamando a la función deXMLHttpRequest overrideMimeType(). En este caso, estamos usando un MIME type genérico; usted puede o no puede necesitar establecer MIME type en absoluto, dependiendo de su necesidad.
- Finalmente, se llama a la función sendAsBinary() del XMLHttpRequest es llamada para subir el contenido del archivo. TEsto es necesario ser revisado, actualmete se está usando la rutina sincronizada en desuso getAsBinary() para extraer los datos del archivo..
-
-
-
-
-function fileUpload(file) {
- // Please report improvements to: marco.buratto at tiscali.it
-
- var fileName = file.name;
- var fileSize = file.size;
- var fileData = file.getAsBinary(); // works on TEXT data ONLY.
-
- var boundary = "xxxxxxxxx";
- var uri = "serverLogic.php";
-
- var xhr = new XMLHttpRequest();
-
- xhr.open("POST", uri, true);
- xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.
- xhr.setRequestHeader("Content-Length", fileSize);
-
- xhr.onreadystatechange = function() {
- if (xhr.readyState == 4) {
- if ((xhr.status >= 200 && xhr.status <= 200) || xhr.status == 304) {
-
- if (xhr.responseText != "") {
- alert(xhr.responseText); // display response.
- }
- }
- }
- }
-
- var body = "--" + boundary + "\r\n";
- body += "Content-Disposition: form-data; name='fileId'; filename='" + fileName + "'\r\n";
- body += "Content-Type: application/octet-stream\r\n\r\n";
- body += fileData + "\r\n";
- body += "--" + boundary + "--";
-
- xhr.send(body);
- return true;
-}
-
-
-Esto necesita ser modificado para funcionar con datos binarios también.
-
-Ver también
-
-
diff --git a/files/es/web/api/file_api/using_files_from_web_applications/index.md b/files/es/web/api/file_api/using_files_from_web_applications/index.md
new file mode 100644
index 00000000000000..5bc78ab1ef552a
--- /dev/null
+++ b/files/es/web/api/file_api/using_files_from_web_applications/index.md
@@ -0,0 +1,371 @@
+---
+title: Utilizar ficheros desde aplicaciones web
+slug: Web/API/File_API/Using_files_from_web_applications
+tags:
+ - Basura
+ - Ficheros
+ - HTML5
+ - HacerNavegadorAgnóstico
+ - Intermedio
+ - NecesitaActualizar
+ - Subir
+ - ajax actualización
+translation_of: Web/API/File/Using_files_from_web_applications
+original_slug: Web/API/File/Using_files_from_web_applications
+---
+{{ gecko_minversion_header("1.9.2") }}
+
+El uso de la API File añadida al DOM en HTML5, ahora hace posible que la página web solicite al usuario que seleccione archivos locales y, a continuación, leer el contenido de esos archivos. Esta selección se puede hacer, ya sea usando un elemento {{HTMLElement ( "input")}} de HTML o mediante arrastrar y soltar.
+
+## Selección de ficheros utilizando HTML
+
+Seleccionar solo un fichero usando la API File es sencillo:
+
+```
+Select some files
+```
+
+Tu método `doClick()` puede parecerse al siguiente:
+
+```
+function doClick() {
+ var el = document.getElementById("fileElem");
+ if (el) {
+ el.click();
+ }
+}
+```
+
+Obviamente puedes cambiar como quieras, el estilo del botón para abrir el picker de ficheros.
+
+### Añadir dinámicamente un listener tipo change
+
+Si tu campo input ha sido creado usando una libreria JavaScript como [jQuery](http://www.jquery.com/), se necesitará usar {{ domxref("element.addEventListener()") }} para añadir el manejador de eventos tipo change, como en el ejemplo siguiente:
+
+```
+var inputElement = document.getElementById("inputField");
+inputElement.addEventListener("change", handleFiles, false);
+
+function handleFiles() {
+ var fileList = this.files;
+
+ /* now you can work with the file list */
+}
+```
+
+Nota: en este caso, la función `handleFiles()`mira la lista de ficheros con la finalidad de aceptar un parametro, mientras los eventos listeners sean añadidos de esta manera no pueden aceptar un parametro del input.
+
+Gecko 2.0 {{ geckoRelease("2.0") }} introduce soporte para los métodos de DOM {{ domxref("window.createBlobURL()") }} y {{ domxref("window.revokeBlobURL()") }}. El cual te permite crear un simple string con la URL que referenciar cualquier dato que pueda referenciar usando un objeto [`File`](/en/DOM/File) DOM, esto incluye los ficheros locales del usuario del dispositivo.
+
+Cuando tienes un objeto[`File`](/en/DOM/File) te gusta poder referenciarlo con una URL desde el HTML, la manera de crear tu propio blob URL para poder hacer esto es la siguiente:
+
+```
+var blobURL = window.createBlobURL(fileObj);
+```
+
+El blob URL es un string que identifica el objeto[`File`](/en/DOM/File). Cada vez que se llama a {{ domxref("window.createBlobURL()") }}, un único blob URL se crea. Cada vez que esto pasa debe de ser liberado. Cuando el documento se cierra, se libera automáticamente, pero si tu página lo usa dinámicamente deberás liberarlos explicitamente llamando a {{ domxref("window.revokeBlobURL()") }}:
+
+```
+window.revokeBlobURL(blobURL);
+```
+
+## Selección de ficheros usando drag and drop
+
+También se puede dejar al usuario arrastrar los ficheros en tu aplicación web.
+
+El primer paso para establecer la zona de arrastre, el lugar en donde dejar los ficheros arrastrados. La parte exacta en donde se coloque esta zona de arrastre dentro de tu aplicación, dependerá del diseño de la aplicación, pero crear el elemento es sencillo:
+
+```
+var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+```
+
+En este ejemplo se transforma el elemento de ID "dropbox" en la zona de arrastre. Esto se hace añadiendo listeners para lo eventos de `dragenter`, `dragover`, y `drop`.
+
+Realmente en este caso no se necesita hacer nada con los eventos `dragenter` y `dragover`, por lo que ambas funciones seran muy sencillas. Sólo pararán la propagacion de eventos y prevendran las acciones por defecto:
+
+```
+function dragenter(e) {
+ e.stopPropagation();
+ e.preventDefault();
+}
+
+function dragover(e) {
+ e.stopPropagation();
+ e.preventDefault();
+}
+```
+
+La verdadera magia ocurre en la función `drop()`:
+
+```
+function drop(e) {
+ e.stopPropagation();
+ e.preventDefault();
+
+ var dt = e.dataTransfer;
+ var files = dt.files;
+
+ handleFiles(files);
+}
+```
+
+Aquí se recupera el campo `dataTransfer` del evento, a partir de ahi se extraen la lista de ficheros, y se pasan a `handleFiles()`. A partir de este punto se manejan los ficheros de igual manera tanto si se han obtenido usado el elemento `input` o drag and drop.
+
+## Recuperando la información de los ficheros selecionados
+
+El objeto [`FileList`](/en/DOM/FileList) es dado por el DOM y lista todos los ficheros selecionados por el usuario, cada uno es un objeto [`File`](/en/DOM/File). Para determinar el número de ficheros que han sido seleccionados se comprueba la longitud de la lista con el atributo `length`:
+
+```
+var numFiles = files.length;
+```
+
+Al objeto [`File`](/en/DOM/File) se accede de manera sencilla, accediendo a la lista como si fuera un array:
+
+```
+for (var i = 0; i < files.length; i++) {
+ var file = files[i];
+ ..
+}
+```
+
+El bucle itera por todos los ficheros de la lista.
+
+Cada objeto [`File`](/en/DOM/File) tiene tres atributos que contienen información util sobre el fichero.
+
+- `name`
+ - : Es de solo lectura y es el nombre del fichero sin ninguna información sobre el path.
+- `size`
+ - : Es de solo lectura y es el tamaño del fichero en bytes como un entero de 64-bit.
+- `type`
+ - : Es de solo lectura y contiene MIME type del fichero, o "" si el tipo no puede ser determinado.
+
+## Ejemplo: Mostrando miniaturas de una selección de imágenes del usuario
+
+Digamos que usted esta desarrollando el próximo gran sitio web para compartir fotos, y quiere usar HTML5 para mostrar previsualizaciones de miniaturas de imágenes antes de que el usuario actual las suba. Basta con establecer su elemento input o zona de arrastre como se indicó anteriormente, y hacer una llamada a una función `handleFiles()` como la siguiente.
+
+```
+function handleFiles(files) {
+ for (var i = 0; i < files.length; i++) {
+ var file = files[i];
+ var imageType = /image.*/;
+
+ if (!file.type.match(imageType)) {
+ continue;
+ }
+
+ var img = document.createElement("img");
+ img.classList.add("obj");
+ img.file = file;
+ preview.appendChild(img);
+
+ var reader = new FileReader();
+ reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+ reader.readAsDataURL(file);
+ }
+}
+```
+
+Aquí nuestro bucle recorre los archivos seleccionados por el usuario y mira el atributo `type` de cada archivo para ver si es una imagen (haciendo que una expresión regular coincida con la cadena de texto "image.\*"). Para cada archivo que sea una imagen, creamos un nuevo elemento `img`. Se puede usar CSS para establecer bordes bonitos, sombras, y especificar el tamaño de la imagen, el de manera que ni siquiera necesita hacerse aquí.
+
+Cada imagen tiene la clase CSS "obj" añadida, para hacerla mas fácil buscarla en el árbol del DOM. Además añadimos un atributo`file` a cada imagen especificando el [`Fichero`](/en/DOM/File) para la imagen; esto nos permitira traer el hecho de subir las imágenes más tarde. Finalmente, usamos {{ domxref("Node.appendChild()") }} para añadir la nueva miniatura en el área de la previsualización de nuestro documento.
+
+A continuación establecemos el [`FileReader`](/en/DOM/FileReader) para controlar la carga de la imagen de forma asíncrona y enlazarla con el elemento `img`. Después de crear el nuevo objeto `FileReader`, configuramos su función `onload`, luego llamamos a `readAsDataURL()` para comenzar la operación de lectura en segundo plano. Cuando el contenido completo de la imagen ha sido cargado, se convierte a `data:` URL, el cuál es pasado al callback `onload`. Nuestra implementación de esta rutina simplemente establece el atributo `src` del elemento `img` cargado, cuyo resultado es la imagen apareciendo en la miniatura en la pantalla del usuario.
+
+Este ejemplo el objeto blob URLs para mostrar las miniaturas de las imágenes. Además, se muestra otra información del archivo incluyendo sus nombres y tamaños. Tú puedes [ver el ejemplo](/samples/domref/file-click-demo.html) (tenga en cuenta que se requiere una versión [Nghtly](http://nightly.mozilla.org/) de Firefox del 23 de september 23 o mas reciente, o Firefox 4.0 beta 7).
+
+El HTML que representa la interfaz es::
+
+```
+
+Seleccione algunos archivos
+
+
¡No se han seleccionado archivos!
+
¡No se han seleccionado archivos!
";
+ } else {
+ var list = document.createElement("ul");
+ d.appendChild(list);
+ for (var i=0; i < files.length; i++) {
+ var li = document.createElement("li");
+ list.appendChild(li);
+
+ var img = document.createElement("img");
+ img.src = window.createBlobURL(files[i]);;
+ img.height = 60;
+ img.onload = function() {
+ window.revokeBlobURL(this.src);
+ }
+ li.appendChild(img);
+
+ var info = document.createElement("span");
+ info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+ li.appendChild(info);
+ }
+ }
+}
+```
+
+Esto comienza buscando la URL del {{ HTMLElement("div") }} con la ID "fileList". Este es el bloque donde vamos a insertar la lista de archivos incluyendo las miniaturas.
+
+Si el objeto {{ domxref("FileList") }} pasado a `handleFiles()` es `null`, simplemente establecemos el bloque inner HTML para mostrar "¡No se han seleccionado archivos!". En caso contrario, comenzamos a construir nuestra lista de archivos como sigue:
+
+1. Un nuevo elemento de lista desordenada ({{ HTMLElement("ul") }} es creado.
+2. El nuevo elemento de la lista es insertado en el bloque {{ HTMLElement("div") }} llamando a si método {{ domxref("element.appendChild()") }}.
+3. Para cada {{ domxref("File") }} en el {{ domxref("FileList") }} representado `files`:
+
+ 1. Se crea un nuevo elemento de lista ({{ HTMLElement("li") }}) y lo inserta en la lista.
+ 2. Se crea un nuevo elemento imagen ({{ HTMLElement("img") }}).
+ 3. Establece en la fuente de la imagen un nuevo blob URL representandoel archivo, usando {{ domxref("window.createBlobURL()") }} para crear el blob URL.
+ 4. Se establece el alto de la imagen en 60 pixels.
+ 5. Se configura el controlador para el evento load para liberar el blob URL, puesto que ya no es necesario una vez que la imagen ha sido cargada. Esto se hace llamando al método {{ domxref("window.revokeBlobURL()") }}, pasando la cadena en el blob URL como se ha especificado para `img.src`.
+ 6. Se añade el nuevo elemento de la lista a la lista.
+
+## Ejemplo: Subiendo un archivo seleccionado por el usuario
+
+Otra cosa que podrías querer hacer es dejar que el usuario suba el archivo o los archivos seleccionados (como las imagenes seleccionadas usando el ejemplo anterior) al servidor. Esto se puede hacer de forma asíncrona muy facilmente.
+
+### Creando las tareas de subida
+
+Continuando con el código que contruye las miniaturas en el ejemplo anterior, hay que recordar que cada imagen en miniatura se encuentra en la clase CSS "obj", con el correspondiente [`File`](/en/DOM/File) adjunto en un attributo `file`. Vamos a seleccionar todas las imágenes que el usuario ha seleccionado facilmente para subirlas usando {{ domxref("Document.querySelectorAll()") }}, como sigue:
+
+```
+function sendFiles() {
+ var imgs = document.querySelectorAll(".obj");
+
+ for (var i = 0; i < imgs.length; i++) {
+ new FileUpload(imgs[i], imgs[i].file);
+ }
+}
+```
+
+La segunda línea crea un array, llamado`imgs`, de todos los elementos en el documento con la clase CSS "obj". En nuestro caso, estos serán todas las miniaturas de las imágenes. Una vez que tenemos esa lista, of all the elements in the document with the CSS class "obj". In our case, these will be all the image thumbnails. Once we have that list, es trivial pasar por la lista, creando una nueva instancia de `FileUpload` por cada una. Subiendo el correspondiente archivo por cada uno de ellos.
+
+### Manipulando el proceso de carga de un archivo
+
+La función `FileUpload` acepta dos entradas: un elemento de imagen y un archivo desde el que leer los datos de la imagen.
+
+```
+function FileUpload(img, file) {
+ this.ctrl = createThrobber(img);
+ var xhr = new XMLHttpRequest();
+ this.xhr = xhr;
+
+ var self = this;
+ this.xhr.upload.addEventListener("progress", function(e) {
+ if (e.lengthComputable) {
+ var percentage = Math.round((e.loaded * 100) / e.total);
+ self.ctrl.update(percentage);
+ }
+ }, false);
+
+ xhr.upload.addEventListener("load", function(e){
+ self.ctrl.update(100);
+ var canvas = self.ctrl.ctx.canvas;
+ canvas.parentNode.removeChild(canvas);
+ }, false);
+
+ xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+ xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+ xhr.sendAsBinary(file.getAsBinary());
+}
+```
+
+La función `FileUpload()` mostrada arriba crea un throbber, el cual es usado para mostrar la información del progreso, a continuación se crea un [`XMLHttpRequest`](/en/XMLHttpRequest) para manejar la subida de los datos.
+
+Antes de subir los datos de hecho, se toman varias medidas preparatorias:
+
+1. El listener del progreso de la carga del `XMLHttpRequest`'s se configura para actualizar el throbber con una nueva información de porcentaje, por lo que a medida que progresa la carga, el throbber será actualizado en base a la última información.
+2. El evento "load" de la carga del `XMLHttpRequest`'s se configura para actualizar el throbber con el 100% como la información de progreso (para asegurar que el indicador de progreso realmente alcanza el 100%, en caso de las peculiaridades de granularidad durante el proceso). Entoces se elimina el throbber, puesto que ya no es necesario. Esto causa que el throbber desaparezca una vez la carga está completa.
+3. La petición para cargar la imagen se inicia llamando al método `XMLHttpRequest`'s `open()` para comenzar a generar una petición de tipo POST.
+4. El MIME type para la carga se establece llamando a la función `deXMLHttpRequest` `overrideMimeType()`. En este caso, estamos usando un MIME type genérico; usted puede o no puede necesitar establecer MIME type en absoluto, dependiendo de su necesidad.
+5. Finalmente, se llama a la función `sendAsBinary()` del `XMLHttpRequest` es llamada para subir el contenido del archivo. _TEsto es necesario ser revisado, actualmete se está usando la rutina sincronizada en desuso getAsBinary() para extraer los datos del archivo.._
+
+### Manipulación del proceso de carga para un archivo, de forma asíncrona
+
+```
+function fileUpload(file) {
+ // Please report improvements to: marco.buratto at tiscali.it
+
+ var fileName = file.name;
+ var fileSize = file.size;
+ var fileData = file.getAsBinary(); // works on TEXT data ONLY.
+
+ var boundary = "xxxxxxxxx";
+ var uri = "serverLogic.php";
+
+ var xhr = new XMLHttpRequest();
+
+ xhr.open("POST", uri, true);
+ xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.
+ xhr.setRequestHeader("Content-Length", fileSize);
+
+ xhr.onreadystatechange = function() {
+ if (xhr.readyState == 4) {
+ if ((xhr.status >= 200 && xhr.status <= 200) || xhr.status == 304) {
+
+ if (xhr.responseText != "") {
+ alert(xhr.responseText); // display response.
+ }
+ }
+ }
+ }
+
+ var body = "--" + boundary + "\r\n";
+ body += "Content-Disposition: form-data; name='fileId'; filename='" + fileName + "'\r\n";
+ body += "Content-Type: application/octet-stream\r\n\r\n";
+ body += fileData + "\r\n";
+ body += "--" + boundary + "--";
+
+ xhr.send(body);
+ return true;
+}
+```
+
+_Esto necesita ser modificado para funcionar con datos binarios también._
+
+## Ver también
+
+- [`File`](/en/DOM/File)
+- [`FileList`](/en/DOM/FileList)
+- [`FileReader`](/en/DOM/FileReader)
+- [Usando XMLHttpRequest](/En/XMLHttpRequest/Using_XMLHttpRequest)
+- [`XMLHttpRequest`](/en/XMLHttpRequest)
diff --git a/files/es/web/api/filereader/index.html b/files/es/web/api/filereader/index.html
deleted file mode 100644
index a777156f2cbfc3..00000000000000
--- a/files/es/web/api/filereader/index.html
+++ /dev/null
@@ -1,122 +0,0 @@
----
-title: FileReader
-slug: Web/API/FileReader
-translation_of: Web/API/FileReader
----
-{{ APIRef("File API") }}
-
-Sumario
-
-
-
-El objeto FileReader permite que las aplicaciones web lean ficheros (o información en buffer) almacenados en el cliente de forma asíncrona, usando los objetos {{domxref("File")}} o {{domxref("Blob")}} dependiendo de los datos que se pretenden leer.
-
-
-
-El objeto File puede ser obtenido desde un objeto {{domxref("FileList")}} devuelto como resultado de la selección de archivos por parte del usuario en un elemento {{HTMLElement("input")}}, desde el objeto DataTransfer producido por una operación de arrastre (drag and drop ) o desde la API mozGetAsFile () en un {{domxref("HTMLCanvasElement")}}.
-
-Constructor
-
-FileReader FileReader();
-
-Mira el artículo Using files from web applications
-
-Propiedades
-
-
- {{domxref("FileReader.error")}} {{readonlyinline}}
- Un {{domxref("DOMError")}} que representa el error que ocurrió al momento de leer el archivo.
- {{domxref("FileReader.readyState")}} {{readonlyinline}}
- Devuelve un entero que indica el estado de FileReader. Puede ser uno de los siguientes:
-
-
-
- EMPTY0No ha sido leido ningún dato aún.
-
-
- LOADING1La información está siendo leída.
-
-
- DONE2Se ha completado la solicitud de lectura.
-
-
-
-
- {{domxref("FileReader.result")}} {{readonlyinline}}
- El contenido del fichero. Esta propieda es válida solo cuando la propiedad FileReader.readyState es 2, es decir, cuando la lectura ha finalizado. El formato de la información depende de los métodos usados al iniciar la operación de lectura.
-
-
-Controladores de eventos
-
-
- {{domxref("FileReader.onabort")}}
- Un controlador para el evento {{event("abort")}}. Este evento se activa cada vez que se interrumpe la operación de lectura.
- {{domxref("FileReader.onerror")}}
- Un controlador para el evento {{event("error")}}. Este evento se activa cada vez que la operación de lectura encuentra un error.
- {{domxref("FileReader.onload")}}
- Un controlador para el evento {{event("load")}}. Este evento se activa cada vez que la operación de lectura se ha completado satisfactoriamente.
- {{domxref("FileReader.onloadstart")}}
- Un controlador para el evento {{event("loadstart")}}. Este evento se activa cada vez que comienza la lectura.
- {{domxref("FileReader.onloadend")}}
- Un controlador para el evento {{event("loadend")}}. Este evento se activa cada vez que la operación de lecura se ha completado (ya sea con éxito o fallo).
- {{domxref("FileReader.onprogress")}}
- Un controlador para el evento {{event("progress")}}. Este evento se activa mientras se está leyendo el contenido del objeto {{domxref("Blob")}}.
-
-
-
-
Nota: Como FileReader hereda de {{domxref("EventTarget")}}, todos esos eventos también pueden ser escuchados usando el método {{domxref("EventTarget.addEventListener()","addEventListener")}}.
-
-
-Métodos
-
-
-
-
- {{domxref("FileReader.abort()")}}
- Interrumpe la operación de lectura. A su regreso readyState será DONE.
- {{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}
- Comienza la lectura del contenido del objeto {{ domxref("Blob") }} especificado, una vez terminada, el atributo result contiene un {{domxref("ArrayBuffer")}} representando los datos del fichero.
- {{domxref("FileReader.readAsBinaryString()")}}
- Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo result contiene los datos binarios en bruto del archivo como una cadena.
- {{domxref("FileReader.readAsDataURL()")}}
- Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo result contiene un data: URL que representa los datos del fichero.
- {{domxref("FileReader.readAsText()")}}
- Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo result contiene el contenido del fichero como una cadena de texto.
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
- {{SpecName('File API','#FileReader-interface','FileReader')}}
- {{Spec2('File API')}}
- Definición inicial.
-
-
-
-
-Soporte en los navegadores
-
-{{Compat("api.FileReader")}}
-
-See also
-
-
diff --git a/files/es/web/api/filereader/index.md b/files/es/web/api/filereader/index.md
new file mode 100644
index 00000000000000..59daeda8b86501
--- /dev/null
+++ b/files/es/web/api/filereader/index.md
@@ -0,0 +1,82 @@
+---
+title: FileReader
+slug: Web/API/FileReader
+translation_of: Web/API/FileReader
+---
+{{ APIRef("File API") }}
+
+## Sumario
+
+El objeto FileReader permite que las aplicaciones web lean ficheros (o información en buffer) almacenados en el cliente de forma asíncrona, usando los objetos {{domxref("File")}} o {{domxref("Blob")}} dependiendo de los datos que se pretenden leer.
+
+El objeto File puede ser obtenido desde un objeto {{domxref("FileList")}} devuelto como resultado de la selección de archivos por parte del usuario en un elemento {{HTMLElement("input")}}, desde el objeto [`DataTransfer`](/es/docs/Web/API/DataTransfer)`producido por una operación de arrastre (drag and drop) o`desde la API mozGetAsFile () en un {{domxref("HTMLCanvasElement")}}.
+
+## Constructor
+
+```
+FileReader FileReader();
+```
+
+Mira el artículo _[Using files from web applications](/es/docs/Using_files_from_web_applications)_ para más detalles y ejemplos.
+
+## Propiedades
+
+- {{domxref("FileReader.error")}} {{readonlyinline}}
+ - : Un {{domxref("DOMError")}} que representa el error que ocurrió al momento de leer el archivo.
+- {{domxref("FileReader.readyState")}} {{readonlyinline}}
+
+ - : Devuelve un entero que indica el estado de FileReader. Puede ser uno de los siguientes:
+
+ | `EMPTY` | `0` | No ha sido leido ningún dato aún. |
+ | --------- | --- | ----------------------------------------- |
+ | `LOADING` | `1` | La información está siendo leída. |
+ | `DONE` | `2` | Se ha completado la solicitud de lectura. |
+
+- {{domxref("FileReader.result")}} {{readonlyinline}}
+ - : El contenido del fichero. Esta propieda es válida solo cuando la propiedad FileReader.readyState es 2, es decir, cuando la lectura ha finalizado. El formato de la información depende de los métodos usados al iniciar la operación de lectura.
+
+### Controladores de eventos
+
+- {{domxref("FileReader.onabort")}}
+ - : Un controlador para el evento {{event("abort")}}. Este evento se activa cada vez que se interrumpe la operación de lectura.
+- {{domxref("FileReader.onerror")}}
+ - : Un controlador para el evento {{event("error")}}. Este evento se activa cada vez que la operación de lectura encuentra un error.
+- {{domxref("FileReader.onload")}}
+ - : Un controlador para el evento {{event("load")}}. Este evento se activa cada vez que la operación de lectura se ha completado satisfactoriamente.
+- {{domxref("FileReader.onloadstart")}}
+ - : Un controlador para el evento {{event("loadstart")}}. Este evento se activa cada vez que comienza la lectura.
+- {{domxref("FileReader.onloadend")}}
+ - : Un controlador para el evento {{event("loadend")}}. Este evento se activa cada vez que la operación de lecura se ha completado (ya sea con éxito o fallo).
+- {{domxref("FileReader.onprogress")}}
+ - : Un controlador para el evento {{event("progress")}}. Este evento se activa mientras se está leyendo el contenido del objeto {{domxref("Blob")}}.
+
+> **Nota:** Nota: Como `FileReader` hereda de {{domxref("EventTarget")}}, todos esos eventos también pueden ser escuchados usando el método {{domxref("EventTarget.addEventListener()","addEventListener")}}.
+
+## Métodos
+
+- {{domxref("FileReader.abort()")}}
+ - : Interrumpe la operación de lectura. A su regreso `readyState` será `DONE`.
+- {{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}
+ - : Comienza la lectura del contenido del objeto {{ domxref("Blob") }} especificado, una vez terminada, el atributo `result`contiene un {{domxref("ArrayBuffer")}} representando los datos del fichero.
+- {{domxref("FileReader.readAsBinaryString()")}}
+ - : Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo `result` contiene los datos binarios en bruto del archivo como una cadena.
+- {{domxref("FileReader.readAsDataURL()")}}
+ - : Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo `result` contiene un `data:` URL que representa los datos del fichero.
+- {{domxref("FileReader.readAsText()")}}
+ - : Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo `result` contiene el contenido del fichero como una cadena de texto.
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('File API','#FileReader-interface','FileReader')}} | {{Spec2('File API')}} | Definición inicial. |
+
+## Soporte en los navegadores
+
+{{Compat("api.FileReader")}}
+
+## See also
+
+- [Usando archivos desde aplicaciónes web](/en/Using_files_from_web_applications)
+- {{ domxref("File") }}
+- {{ domxref("Blob") }}
diff --git a/files/es/web/api/filereader/load_event/index.html b/files/es/web/api/filereader/load_event/index.html
deleted file mode 100644
index c0a55e6e9f3cae..00000000000000
--- a/files/es/web/api/filereader/load_event/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: FileReader.onload
-slug: Web/API/FileReader/load_event
-tags:
- - Archivo
- - Controlador de Eventos
- - Lector de Archivos
- - Propiedad
- - Referencia
-translation_of: Web/API/FileReader/onload
-original_slug: Web/API/FileReader/onload
----
-{{APIRef}}
-
-La propiedad FileReader.onload contiene un controlador de evento ejecutado cuando {{event('load')}} es ejecutado, cuando el contenido es leído con readAsArrayBuffer , readAsBinaryString , readAsDataURL o readAsText está habilitado.
-
-Ejemplo
-
-// Respuest desde un <input type="file" onchange="onChange(event)">
-function onChange(event) {
- var file = event.target.files[0];
- var reader = new FileReader();
- reader.onload = function(event) {
- // El texto del archivo se mostrará por consola aquí
- console.log(event.target.result)
- };
-
- reader.readAsText(file);
-}
-{{APIRef("File API")}}
-
-El método readAsText se usa para leer el contenido de un tipo {{domxref("Blob")}} o {{domxref("File")}}. Cuando la operación de lectura se completa, el atributo {{domxref("FileReader.readyState","readyState")}} cambia a DONE, el evento {{event("loadend")}} se dispara y el atributo {{domxref("FileReader.result","result")}} contiene el contenido del archivo como una cadena de texto.
-
-Sintaxis
-
-instanceOfFileReader .readAsText(blob[, encoding]);Parametros
-
-
- blobUna variable de tipo {{domxref("Blob")}} o {{domxref("File")}} de la cual se leerán los datos.
- encoding {{optional_inline}}
- Una cadena de texto especificando la codificación de caracteres que se usará en los datos leidos. Por defecto, se utiliza UTF-8 si el parametro no se especifica
-
-
-Especificaciones
-
-
-
-
- Specification
- Status
- Comment
-
-
- {{SpecName("File API", "#FileReader-interface", "FileReader")}}
- {{Spec2("File API")}}
- Initial definition
-
-
-
-
-Compatibilidad en los navegadores
-
-{{Compat("api.FileReader.readAsText")}}
-
-Vea también
-
-
- {{domxref("FileReader")}}
-
diff --git a/files/es/web/api/filereader/readastext/index.md b/files/es/web/api/filereader/readastext/index.md
new file mode 100644
index 00000000000000..0c56018c34d526
--- /dev/null
+++ b/files/es/web/api/filereader/readastext/index.md
@@ -0,0 +1,40 @@
+---
+title: FileReader.readAsText()
+slug: Web/API/FileReader/readAsText
+tags:
+ - API
+ - File API
+ - api de lectura de archivos
+ - leer archivos
+translation_of: Web/API/FileReader/readAsText
+---
+{{APIRef("File API")}}
+
+El método `readAsText` se usa para leer el contenido de un tipo {{domxref("Blob")}} o {{domxref("File")}}. Cuando la operación de lectura se completa, el atributo {{domxref("FileReader.readyState","readyState")}} cambia a `DONE`, el evento {{event("loadend")}} se dispara y el atributo {{domxref("FileReader.result","result")}} contiene el contenido del archivo como una cadena de texto.
+
+## Sintaxis
+
+```
+instanceOfFileReader.readAsText(blob[, encoding]);
+```
+
+### Parametros
+
+- `blob`
+ - : Una variable de tipo {{domxref("Blob")}} o {{domxref("File")}} de la cual se leerán los datos.
+- encoding {{optional_inline}}
+ - : Una cadena de texto especificando la codificación de caracteres que se usará en los datos leidos. Por defecto, se utiliza UTF-8 si el parametro no se especifica
+
+## Especificaciones
+
+| Specification | Status | Comment |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------ |
+| {{SpecName("File API", "#FileReader-interface", "FileReader")}} | {{Spec2("File API")}} | Initial definition |
+
+## Compatibilidad en los navegadores
+
+{{Compat("api.FileReader.readAsText")}}
+
+## Vea también
+
+- {{domxref("FileReader")}}
diff --git a/files/es/web/api/filereader/result/index.html b/files/es/web/api/filereader/result/index.html
deleted file mode 100644
index 28a9d1b968ef18..00000000000000
--- a/files/es/web/api/filereader/result/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: FileReader.result
-slug: Web/API/FileReader/result
-tags:
- - API
- - Archivos
- - Ficheros
-translation_of: Web/API/FileReader/result
----
-{{APIRef("File API")}}
-
-
-
-La propiedad result
-
-Sintaxis
-
-var file = instanceOfFileReader .result
-
-
-Valor
-
-Una cadena de texto apropiada o un {{domxref("ArrayBuffer")}} dependiendo de cuál método de lectura haya provocado la operación de lectura. El valor es null si la lectura no se ha completado aún o no fue exitosa.
-
-Los tipos de resultados son descritos a continuación.
-
-
-
-
-
-
- Método
- Descripción
-
-
-
-
- readAsArrayBuffer() result es un ArrayBuffer
-
- readAsBinaryString()
- result contiene la información binaria del archivo en una cadena de texto.
-
-
-
- readAsDataURL()
- result es una cadena de texto que representa una URL con la propiedad data: que contiene la información leída del archivo.
-
-
-
- readAsText() result es una cadena de texto con el contenido del archivo.
-
-
-
-Ejemplo
-
-Este ejemplo representa una función read(), que lee un archivo de un file input . Funciona creando un objeto de {{domxref("FileReader")}} y creando un listener para los eventos load de tal manera que cuando el archivo es leído, la propiedad result es obtenida y pasada a la función callback proporcionada a read().
-
-El contenido es manejado como texto.
-
-var fileInput = document.querySelector('input[type="file"]');
-
-function read(callback) {
- var file = fileInput.files.item(0);
- var reader = new FileReader();
-
- reader.onload = function() {
- callback(reader.result);
- }
-
- reader.readAsText(file);
-}
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estatus
- Comentario
-
-
- {{SpecName("File API", "#FileReader-interface", "FileReader")}}
- {{Spec2("File API")}}
- Definición inicial
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-{{Compat("api.FileReader.result")}}
-
-Ver también
-
-
- {{domxref("FileReader")}}
-
diff --git a/files/es/web/api/filereader/result/index.md b/files/es/web/api/filereader/result/index.md
new file mode 100644
index 00000000000000..e378f37c06b8e1
--- /dev/null
+++ b/files/es/web/api/filereader/result/index.md
@@ -0,0 +1,64 @@
+---
+title: FileReader.result
+slug: Web/API/FileReader/result
+tags:
+ - API
+ - Archivos
+ - Ficheros
+translation_of: Web/API/FileReader/result
+---
+{{APIRef("File API")}}La propiedad **`result`** de {{domxref("FileReader")}} retorna el contenido del archivo. Esta propiedad es válida únicamente después de que la operación de lectura del archivo es completada. El formato de la infomación devuelta depende de cuál de los métodos de lectura fue usado.
+
+## Sintaxis
+
+```
+var file = instanceOfFileReader.result
+```
+
+### Valor
+
+Una cadena de texto apropiada o un {{domxref("ArrayBuffer")}} dependiendo de cuál método de lectura haya provocado la operación de lectura. El valor es `null` si la lectura no se ha completado aún o no fue exitosa.
+
+Los tipos de resultados son descritos a continuación.
+
+| Método | Descripción |
+| --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`readAsArrayBuffer()`](/en-US/docs/Web/API/FileReader/readAsArrayBuffer) | `result` es un [`ArrayBuffer`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) de JavaScript que contiene la información binaria. |
+| [`readAsBinaryString()`](/en-US/docs/Web/API/FileReader/readAsBinaryString) | `result` contiene la información binaria del archivo en una cadena de texto. |
+| [`readAsDataURL()`](/en-US/docs/Web/API/FileReader/readAsDataURL) | `result` es una cadena de texto que representa una URL con la propiedad `data:` que contiene la información leída del archivo. |
+| [`readAsText()`](/en-US/docs/Web/API/FileReader/readAsText) | `result` es una cadena de texto con el contenido del archivo. |
+
+## Ejemplo
+
+Este ejemplo representa una función `read()`, que lee un archivo de un [file input](/es/docs/Web/HTML/Element/input/file). Funciona creando un objeto de {{domxref("FileReader")}} y creando un listener para los eventos [load](/es/docs/Web/Events/load) de tal manera que cuando el archivo es leído, la propiedad `result` es obtenida y pasada a la función callback proporcionada a `read()`.
+
+El contenido es manejado como texto.
+
+```js
+var fileInput = document.querySelector('input[type="file"]');
+
+function read(callback) {
+ var file = fileInput.files.item(0);
+ var reader = new FileReader();
+
+ reader.onload = function() {
+ callback(reader.result);
+ }
+
+ reader.readAsText(file);
+}
+```
+
+## Especificaciones
+
+| Especificación | Estatus | Comentario |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------ |
+| {{SpecName("File API", "#FileReader-interface", "FileReader")}} | {{Spec2("File API")}} | Definición inicial |
+
+## Compatibilidad con navegadores
+
+{{Compat("api.FileReader.result")}}
+
+## Ver también
+
+- {{domxref("FileReader")}}
diff --git a/files/es/web/api/formdata/index.html b/files/es/web/api/formdata/index.html
deleted file mode 100644
index 5ff7723e7a1aaa..00000000000000
--- a/files/es/web/api/formdata/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: FormData
-slug: Web/API/FormData
-tags:
- - API
- - FormData
- - Interfaz
- - Referencia
- - XMLHttpRequest
-translation_of: Web/API/FormData
-original_slug: Web/API/XMLHttpRequest/FormData
----
-{{APIRef("XMLHttpRequest")}}
-
-La interfaz FormData"multipart/form-data".
-
-También puede pasarse directamente al constructor de {{domxref("URLSearchParams")}} si se quieren generar parámetros de consulta de la misma forma en que lo haría un {{HTMLElement("form")}} si usara un envío GET simple.
-
-Un objeto que implementa FormData puede usarse directamente en una estructura {{jsxref("Statements/for...of", "for...of")}}, en lugar de {{domxref('FormData.entries()', 'entries()')}}: for (var p of myFormData) es equivalente a for (var p of myFormData.entries()).
-
-
-
Nota : Esta característica está disponible en Web Workers .
-
Constructor
-
-
- {{domxref("FormData.FormData","FormData()")}}
- Crea un nuevo objeto FormData.
-
-
-Métodos
-
-
- {{domxref("FormData.append()")}}
- Agrega un nuevo valor a una clave existente dentro de un objeto FormData, o añade la clave si aún no existe.
- {{domxref("FormData.delete()")}}
- Elimina una pareja clave/valor de un objeto FormData.
- {{domxref("FormData.entries()")}}
- Devuelve un {{jsxref("Iteration_protocols","iterator")}} que permite recorrer todas las parejas clave/valor contenidas en este objeto.
- {{domxref("FormData.get()")}}
- Devuelve el primer valor asociado con una clave dada en un objeto FormData.
- {{domxref("FormData.getAll()")}}
- Devuelve un array con todos los valores asociados con una clave dada en un objeto FormData.
- {{domxref("FormData.has()")}}
- Devuelve un booleano que indica si un objeto FormData contiene una clave determinada.
- {{domxref("FormData.keys()")}}
- Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todas las claves de las parejas clave/valor contenidas en este objeto.
- {{domxref("FormData.set()")}}
- Establece un nuevo valor para una clave existente dentro de un objeto FormData, o agrega la clave/valor si aún no existe.
- {{domxref("FormData.values()")}}
- Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todos los valores contenidos en este objeto.
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
- {{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}
- {{Spec2('XMLHttpRequest')}}
- FormData definido en XHR spec
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-{{Compat("api.FormData")}}
-
-Ver también
-
-
diff --git a/files/es/web/api/formdata/index.md b/files/es/web/api/formdata/index.md
new file mode 100644
index 00000000000000..2b41d6960069f5
--- /dev/null
+++ b/files/es/web/api/formdata/index.md
@@ -0,0 +1,64 @@
+---
+title: FormData
+slug: Web/API/FormData
+tags:
+ - API
+ - FormData
+ - Interfaz
+ - Referencia
+ - XMLHttpRequest
+translation_of: Web/API/FormData
+original_slug: Web/API/XMLHttpRequest/FormData
+---
+{{APIRef("XMLHttpRequest")}}
+
+La interfaz **`FormData`** proporciona una manera sencilla de construir un conjunto de parejas clave/valor que representan los campos de un formulario y sus valores, que pueden ser enviados fácilmente con el método {{domxref("XMLHttpRequest.send()")}}. Utiliza el mismo formato que usaría un formulario si el tipo de codificación fuera `"multipart/form-data"`.
+
+También puede pasarse directamente al constructor de {{domxref("URLSearchParams")}} si se quieren generar parámetros de consulta de la misma forma en que lo haría un {{HTMLElement("form")}} si usara un envío `GET` simple.
+
+Un objeto que implementa `FormData` puede usarse directamente en una estructura {{jsxref("Statements/for...of", "for...of")}}, en lugar de {{domxref('FormData.entries()', 'entries()')}}: `for (var p of myFormData)` es equivalente a `for (var p of myFormData.entries())`.
+
+> **Nota:** Esta característica está disponible en [Web Workers](/es/docs/Web/API/Web_Workers_API).
+
+## Constructor
+
+- {{domxref("FormData.FormData","FormData()")}}
+ - : Crea un nuevo objeto `FormData`.
+
+## Métodos
+
+- {{domxref("FormData.append()")}}
+ - : Agrega un nuevo valor a una clave existente dentro de un objeto `FormData`, o añade la clave si aún no existe.
+- {{domxref("FormData.delete()")}}
+ - : Elimina una pareja clave/valor de un objeto `FormData`.
+- {{domxref("FormData.entries()")}}
+ - : Devuelve un {{jsxref("Iteration_protocols","iterator")}} que permite recorrer todas las parejas clave/valor contenidas en este objeto.
+- {{domxref("FormData.get()")}}
+ - : Devuelve el primer valor asociado con una clave dada en un objeto `FormData`.
+- {{domxref("FormData.getAll()")}}
+ - : Devuelve un array con todos los valores asociados con una clave dada en un objeto `FormData`.
+- {{domxref("FormData.has()")}}
+ - : Devuelve un booleano que indica si un objeto `FormData` contiene una clave determinada.
+- {{domxref("FormData.keys()")}}
+ - : Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todas las claves de las parejas clave/valor contenidas en este objeto.
+- {{domxref("FormData.set()")}}
+ - : Establece un nuevo valor para una clave existente dentro de un objeto `FormData`, o agrega la clave/valor si aún no existe.
+- {{domxref("FormData.values()")}}
+ - : Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todos los valores contenidos en este objeto.
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ----------------------------- |
+| {{SpecName('XMLHttpRequest','#interface-formdata','FormData')}} | {{Spec2('XMLHttpRequest')}} | FormData definido en XHR spec |
+
+## Compatibilidad con navegadores
+
+{{Compat("api.FormData")}}
+
+## Ver también
+
+- {{domxref("XMLHTTPRequest")}}
+- [Utilización de XMLHttpRequest](/en/DOM/XMLHttpRequest/Using_XMLHttpRequest)
+- [Usando objetos FormData](/es/docs/Web/Guide/Usando_Objetos_FormData)
+- {{HTMLElement("Form")}}
diff --git a/files/es/web/api/formdata/using_formdata_objects/index.html b/files/es/web/api/formdata/using_formdata_objects/index.html
deleted file mode 100644
index 94d7473cd9250c..00000000000000
--- a/files/es/web/api/formdata/using_formdata_objects/index.html
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: Usando Objetos FormData
-slug: Web/API/FormData/Using_FormData_Objects
-translation_of: Web/API/FormData/Using_FormData_Objects
-translation_of_original: Web/Guide/Using_FormData_Objects
-original_slug: Web/Guide/Usando_Objetos_FormData
----
-Los objetos FormData XMLHttpRequest. Están destinados principalmente para el envío de los datos del formulario, pero se pueden utilizar de forma independiente con el fin de transmitir los datos tecleados. Los datos transmitidos estarán en el mismo formato que usa el método submit() del formulario para enviar los datos si el tipo de codificación del formulario se establece en "multipart/form-data".
-
-
-
-Usted mismo puede construir un objeto FormData instanciándolo y después añadiendo campos a la instancia usando su método append()
-
-var formData = new FormData();
-
-formData .append("username", "Groucho");
-formData .append("accountnum", 123456); // number 123456 is immediately converted to string "123456"
-
-// HTML file input user's choice...
-formData .append("userfile", fileInputElement.files[0]);
-
-// JavaScript file-like object...
-var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
-var blob = new Blob([content ], { type: "text/xml"});
-
-formData.append("webmasterfile", blob );
-
-var request = new XMLHttpRequest();
-request .open("POST", "http://foo.com/submitform.php");
-request .send(formData);
-
-
-Nota: Los campos "userfile" y "webmasterfile" contienen ambos un archivo. El número asignado al campo "accountnum" es inmediatamente convertido a string por el método
FormData.append() (el valor del campo puede ser un {{ domxref("Blob") }}, {{ domxref("File") }}, o una cadena de texto;
si el valor no es ni un Blob, ni un File, será convertido a un string ).
Este ejemplo construye una instancia de FormData que almacenará los valores de los campos "username", "accountnum", "userfile" y "webmasterfile", entonces usará el método send()XMLHttpRequest para enviar los datos del formulario. El campo "webmasterfile" es un BlobBlobBlobBlob al constructor del objeto Blob
-
-
-
-Para construir un objeto FormData que contenga los datos de un {{ HTMLElement("form") }} existente, especifique ese elemento form cuando cree el objeto FormData:
-
-var formData = new FormData(someFormElement);
-
-
-Por ejemplo:
-
-var formElement = document.getElementById("myFormElement");
-var request = new XMLHttpRequest();
-request .open("POST", "submitform.php");
-request .send(new FormData(formElement));
-
-
-También puede añadir datos adicionales al objeto FormData antes de enviarlo. Así:
-
-var formElement = document.getElementById("myFormElement");
-formData = new FormData(formElement);
-formData.append("serialnumber", serialNumber++);
-request .send(formData);
-
-Esto le permite aumentar los datos del formulario antes de enviarlos para incluir información adicional que no necesariamente debiera ser editable por el usuario en el formulario.
-
-
-
-También puede enviar archivos usando FormData. Simplemente incluye un elemento {{ HTMLElement("input") }} de tipo {{ domxref("File") }}:
-
-<form enctype="multipart/form-data" method="post" name="fileinfo">
- <label>Your email address:</label>
- <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
- <label>Custom file label:</label>
- <input type="text" name="filelabel" size="12" maxlength="32" /><br />
- <label>File to stash:</label>
- <input type="file" name="file" required />
- <input type="submit" value="Stash the file!" />
-</form>
-<div id="output"></div>
-
-
-Luego puede enviarlo usando código como el siguiente:
-
-var form = document.forms.namedItem("fileinfo");
-form.addEventListener('submit', function(ev) {
-
- var
- oOutput = document.getElementById("output"),
- oData = new FormData(document.forms.namedItem("fileinfo"));
-
- oData.append("CustomField", "This is some extra data");
-
- var oReq = new XMLHttpRequest();
- oReq.open("POST", "stash.php", true);
- oReq.onload = function(oEvent) {
- if (oReq.status == 200) {
- oOutput.innerHTML = "Uploaded!";
- } else {
- oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
- }
- };
-
- oReq.send(oData);
- ev.preventDefault();
-}, false);
-
-
-
-
Nota : el método especificado en el formulario será usado por encima del método utilizado en en la llamada a open().
-
También puede añadir un {{ domxref("File") }} o un {{ domxref("Blob") }} directamente al objeto {{ domxref("XMLHttpRequest/FormData", "FormData") }} de la siguiente manera:
-
-data.append("myfile", myBlob, "filename.txt");
-
-
-Cuando se usa el método append es posible usar, de manera opcional, un tercer parámetro para pasarle un nombre de fichero dentro de la cabecera Content-Disposition que será enviada al servidor. Cuando no se especifica (o el parámetro no es soportado), el nombre "blob" es el que será utilizado.
-
-Además, puede usar FormData con jQuery si asigna las opciones correctas:
-
-var fd = new FormData(document.getElementById("fileinfo"));
-fd.append("CustomField", "This is some extra data");
-$.ajax({
- url: "stash.php",
- type: "POST",
- data: fd,
- processData: false, // tell jQuery not to process the data
- contentType: false // tell jQuery not to set contentType
-});
-
-
-
-
-Si quiere saber cómo serializar y enviar vía AJAX un formulario sin utilizar objetos FormData, por favor leer este párrafo .
-
-Vea también
-
-
diff --git a/files/es/web/api/formdata/using_formdata_objects/index.md b/files/es/web/api/formdata/using_formdata_objects/index.md
new file mode 100644
index 00000000000000..c7539fdd1d3bc7
--- /dev/null
+++ b/files/es/web/api/formdata/using_formdata_objects/index.md
@@ -0,0 +1,144 @@
+---
+title: Usando Objetos FormData
+slug: Web/API/FormData/Using_FormData_Objects
+translation_of: Web/API/FormData/Using_FormData_Objects
+translation_of_original: Web/Guide/Using_FormData_Objects
+original_slug: Web/Guide/Usando_Objetos_FormData
+---
+
+Los objetos `FormData` le permiten compilar un conjunto de pares clave/valor para enviar mediante `XMLHttpRequest`. Están destinados principalmente para el envío de los datos del formulario, pero se pueden utilizar de forma independiente con el fin de transmitir los datos tecleados. Los datos transmitidos estarán en el mismo formato que usa el método `submit()` del formulario para enviar los datos si el tipo de codificación del formulario se establece en "multipart/form-data".
+
+## Creación de un objeto FormData desde cero
+
+Usted mismo puede construir un objeto `FormData` instanciándolo y después añadiendo campos a la instancia usando su método [`append()`]( "en/XMLHttpRequest/FormData#append()") , tal y como se muestra:
+
+```js
+var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // number 123456 is immediately converted to string "123456"
+
+// HTML file input user's choice...
+formData.append("userfile", fileInputElement.files[0]);
+
+// JavaScript file-like object...
+var content = 'hey!
+```
+
+Luego puede enviarlo usando código como el siguiente:
+
+```js
+var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+ var
+ oOutput = document.getElementById("output"),
+ oData = new FormData(document.forms.namedItem("fileinfo"));
+
+ oData.append("CustomField", "This is some extra data");
+
+ var oReq = new XMLHttpRequest();
+ oReq.open("POST", "stash.php", true);
+ oReq.onload = function(oEvent) {
+ if (oReq.status == 200) {
+ oOutput.innerHTML = "Uploaded!";
+ } else {
+ oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.{{DefaultAPISidebar("Fullscreen API")}}
-
-La API Fullscreen
-
-
-
-Activando modo de pantalla completa
-
-Para cualquier elemento que quieras presentar en pantalla completa (como por ejemplo, un elemento {{ HTMLElement("video") }}), puedes presentarlo en pantalla completa, simplemente invocando a su método requestFullscreen().
-
-Consideremos este elemento {{ HTMLElement("video") }}:
-
-<video controls id="myvideo">
- <source src="somevideo.webm"></source>
- <source src="somevideo.mp4"></source>
-</video>
-
-
-Podemos poner este video en pantalla completa con un script como éste:
-
-var elem = document.getElementById("myvideo");
-if (elem.requestFullscreen) {
- elem.requestFullscreen();
-}
-
-
-Diferencias de presentación
-
-Cabe aclarar una diferencia clave entre las implementaciones de Gecko y WebKit: Gecko automáticamente añade reglas CSS al elemento para ajustarlo a las dimensiones de la pantalla: "width: 100%; height: 100%". WebKit no hace esto; en su lugar, centra el elemento con su mismo tamaño original en un fondo negro. Para obtener el mismo comportamiento en WebKit, necesitas añadir manualmente las reglas CSS "width: 100%; height: 100%;" al elemento:
-
-#myvideo:-webkit-full-screen {
- width: 100%;
- height: 100%;
-}
-
-
-Por otro lado, si quieres emular el comportamiento de WebKit en Gecko, necesitarías colocar el elemento a presentar dentro de otro elemento, con las reglas CSS necesarias para ajustarlo a la apariencia requerida, y será dicho elemento contenedor el que se establecerá para aparecer en pantalla completa.
-
-Notificación
-
-Cuando el modo de pantalla completa sea invocado exitosamente, el documento que contiene al elemento recibe un evento {{ event("fullscreenchange") }}. Cuando se sale del modo de pantalla completa, el documento recibe de nuevo un evento {{ event("fullscreenchange") }}. Nótese que el evento {{ event("fullscreenchange") }} no provee información alguna sobre si el documento está entrando o saliendo a modo de pantalla completa, pero puedes saber si está en dicho modo si la propiedad {{ domxref("document.fullscreenElement", "fullscreenElement") }} del documento no es nula.
-
-Cuando la solicitud de pantalla completa falla
-
-No es garantía que se pueda cambiar a modo de pantalla completa. Por ejemplo, los elementos {{ HTMLElement("iframe") }} tienen un atributo {{ HTMLAttrXRef("allowfullscreen", "iframe") }} para decidir si se permitirá que el contenido se muestre en pantalla completa. Además, ciertos tipos de contenido, como plug-ins en ventana, no pueden ser presentados en modo de pantalla completa. Intentar hacerlo con elementos que no lo permitan (o el padre o descendente de un elemento así), no funcionará. En su lugar, el elemento que solicitó la pantalla completa recibirá un evento fullscreenerror. En Firefox, cuando falla una solicitud de pantalla completa, el navegador registrará un mensaje de error en la consola, explicando la falla de la solicitud. En Chrome y versiones recientes de Opera, sin embargo, no se genera ninguna advertencia.
-
-
-
Nota: Las solicitudes de pantalla completa necesitan ser invocadas dentro de un manejador de eventos, o de otro modo, serán denegadas.
-
Saliendo del modo de pantalla completa
-
-El usuario siempre tendrá la habilidad de salir del modo de pantalla completa por su propia cuenta; véase Cosas que los usuarios querrán saber . Incluso se puede hacer programáticamente, llamando al método {{domxref("exitFullscreen()")}}.
-
-
-
-El objeto {{ domxref("document") }} provee información adiciional que puede ser útil al desarrollar aplicaciones de pantalla completa:
-
-
- {{ domxref("document.fullscreenElement", "fullscreenElement") }}
- El atributo fullscreenElement apunta al {{ domxref("element", "elemento") }} actualmente en modo pantalla. Si no es nulo, el documento está en pantalla completa, y si es nulo, no lo está.
- {{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}
- El atributo fullscreenEnabled indica si el documento está actualmente en un estado que permitiría solicitudes al modo de pantalla completa.
-
-
-Cosas que los usuarios querrán saber
-
-Puedes asegurarte de hacer saber a los usuarios que pueden presionar la tecla ESC (o F11 ) para salir del modo de pantalla completa.
-
-Adicionalmente, navegando a otra página, cambiando de pestaña, o cambiando a otra aplicación(usando, por ejemplo, Alt -Tab ) mientras se está en pantalla completa, también se saldrá de dicho modo.
-
-Ejemplo
-
-En este ejemplo, se presenta un video en una página web. Presionando la tecla Return o Enter el usuario podrá moverse entre modo de ventana o de pantalla completa para la presentación del video.
-
-Ver ejemplo en vivo
-
-Observando la tecla Enter
-
-Cuando la página se carga, este código se ejecuta para establecer un evento para cuando se presione la tecla Enter .
-
-document.addEventListener("keydown", function(e) {
- if (e.keyCode == 13) {
- toggleFullScreen();
- }
-}, false);
-
-
-Cambiando entre modo de pantalla completa y modo de ventana
-
-Este código es llamado cuando el usuario presiona la tecla Enter , como se ve arriba.
-
-function toggleFullScreen() {
- if (!document.fullscreenElement) {
- document.documentElement.requestFullscreen();
- } else {
- if (document.exitFullscreen) {
- document.exitFullscreen();
- }
- }
-}
-
-
-En este código, primero se observa si el atributo fullscreenElement de {{ domxref("document") }} (comprobando si tiene prefijo moz, ms, o webkit). Si es null, el documento está en modo de ventana actualmente, así que necesitamos cambiarlo a modo de pantalla completa. Esto se hace llamando a la función {{ domxref("element.requestFullscreen()") }}.
-
-Si el modo de pantalla completa está activado (fullscreenElement no es null), llamamos a la función {{ domxref("document.exitFullscreen()") }}.
-
-Prefijado
-
-De momento, no todos los navegadores están implementando la versión sin prefijo de la API. Aquí está la tabla que resume los prefijos y diferencias de nombres entre ellos:
-
-
-
-
- Estándar
- Blink (Chrome y Opera)
- Gecko (Firefox)
- Internet Explorer 11
- Edge
- Safari (WebKit)
-
-
- {{domxref("Document.fullscreen")}}
- webkitIsFullScreenmozFullScreen- webkitIsFullScreenwebkitIsFullScreen
-
- {{domxref("Document.fullscreenEnabled")}}
- webkitFullscreenEnabledmozFullScreenEnabledmsFullscreenEnabledwebkitFullscreenEnabledwebkitFullscreenEnabled
-
- {{domxref("Document.fullscreenElement")}}
- webkitFullscreenElementmozFullScreenElementmsFullscreenElementwebkitFullscreenElementwebkitFullscreenElement
-
- {{domxref("Document.onfullscreenchange")}}
- onwebkitfullscreenchangeonmozfullscreenchangeonmsfullscreenchangeonwebkitfullscreenchangeonwebkitfullscreenchange
-
- {{domxref("Document.onfullscreenerror")}}
- onwebkitfullscreenerroronmozfullscreenerroronmsfullscreenerroronwebkitfullscreenerroronwebkitfullscreenerror
-
- {{domxref("Document.exitFullscreen()")}}
- webkitExitFullscreen()mozCancelFullScreen()msExitFullscreen()webkitExitFullscreen()webkitExitFullscreen()
-
- {{domxref("Element.requestFullscreen()")}}
- webkitRequestFullscreen()mozRequestFullScreen()msRequestFullscreen()webkitRequestFullscreen()webkitRequestFullscreen()
-
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estatus
- Comentarios
-
-
-
-
- {{SpecName("Fullscreen")}}
- {{Spec2("Fullscreen")}}
- Versión inicial.
-
-
-
-
-Browser compatibility
-
-Document.fullscreenDocument.fullscreenElementDocument.fullscreenEnabledDocument.exitFullscreenElement.requestFullscreenVéase también
-
-
- {{ domxref("Element.requestFullscreen()") }}
- {{ domxref("Document.exitFullscreen()") }}
- {{ domxref("Document.fullscreen") }}
- {{ domxref("Document.fullscreenElement") }}
- {{ cssxref(":fullscreen") }}, {{cssxref("::backdrop")}}
- {{ HTMLAttrXRef("allowfullscreen", "iframe") }}
-
diff --git a/files/es/web/api/fullscreen_api/index.md b/files/es/web/api/fullscreen_api/index.md
new file mode 100644
index 00000000000000..b756a37cecf92d
--- /dev/null
+++ b/files/es/web/api/fullscreen_api/index.md
@@ -0,0 +1,163 @@
+---
+title: Fullscreen API
+slug: Web/API/Fullscreen_API
+translation_of: Web/API/Fullscreen_API
+---
+{{DefaultAPISidebar("Fullscreen API")}}
+
+La **`API Fullscreen`** provee una manera fácil de presentar contenido web usando la pantalla completa del usuario. La API permite indicar al navegador que un elemento y sus hijos, si los tiene, ocupar la pantalla completa, ocultando toda la interfaz del usuario y otras aplicaciones de la pantalla mientras se esté en pantalla completa.
+
+> **Nota:** De momento, no todos los navegadores usan la versión sin prefijo de la API. Consulta la [tabla que resume las diferencias de prefijos y nombres](#Prefijado).
+
+## Activando modo de pantalla completa
+
+Para cualquier elemento que quieras presentar en pantalla completa (como por ejemplo, un elemento {{ HTMLElement("video") }}), puedes presentarlo en pantalla completa, simplemente invocando a su método `requestFullscreen()`.
+
+Consideremos este elemento {{ HTMLElement("video") }}:
+
+```html
+
+
+```
+
+Podemos poner este video en pantalla completa con un script como éste:
+
+```js
+var elem = document.getElementById("myvideo");
+if (elem.requestFullscreen) {
+ elem.requestFullscreen();
+}
+```
+
+### Diferencias de presentación
+
+Cabe aclarar una diferencia clave entre las implementaciones de Gecko y WebKit: Gecko automáticamente añade reglas CSS al elemento para ajustarlo a las dimensiones de la pantalla: "`width: 100%; height: 100%`". WebKit no hace esto; en su lugar, centra el elemento con su mismo tamaño original en un fondo negro. Para obtener el mismo comportamiento en WebKit, necesitas añadir manualmente las reglas CSS "`width: 100%; height: 100%;`" al elemento:
+
+```css
+#myvideo:-webkit-full-screen {
+ width: 100%;
+ height: 100%;
+}
+```
+
+Por otro lado, si quieres emular el comportamiento de WebKit en Gecko, necesitarías colocar el elemento a presentar dentro de otro elemento, con las reglas CSS necesarias para ajustarlo a la apariencia requerida, y será dicho elemento contenedor el que se establecerá para aparecer en pantalla completa.
+
+### Notificación
+
+Cuando el modo de pantalla completa sea invocado exitosamente, el documento que contiene al elemento recibe un evento {{ event("fullscreenchange") }}. Cuando se sale del modo de pantalla completa, el documento recibe de nuevo un evento {{ event("fullscreenchange") }}. Nótese que el evento {{ event("fullscreenchange") }} no provee información alguna sobre si el documento está entrando o saliendo a modo de pantalla completa, pero puedes saber si está en dicho modo si la propiedad {{ domxref("document.fullscreenElement", "fullscreenElement") }} del documento no es nula.
+
+### Cuando la solicitud de pantalla completa falla
+
+No es garantía que se pueda cambiar a modo de pantalla completa. Por ejemplo, los elementos {{ HTMLElement("iframe") }} tienen un atributo {{ HTMLAttrXRef("allowfullscreen", "iframe") }} para decidir si se permitirá que el contenido se muestre en pantalla completa. Además, ciertos tipos de contenido, como plug-ins en ventana, no pueden ser presentados en modo de pantalla completa. Intentar hacerlo con elementos que no lo permitan (o el padre o descendente de un elemento así), no funcionará. En su lugar, el elemento que solicitó la pantalla completa recibirá un evento `fullscreenerror`. En Firefox, cuando falla una solicitud de pantalla completa, el navegador registrará un mensaje de error en la consola, explicando la falla de la solicitud. En Chrome y versiones recientes de Opera, sin embargo, no se genera ninguna advertencia.
+
+> **Nota:** Las solicitudes de pantalla completa necesitan ser invocadas dentro de un manejador de eventos, o de otro modo, serán denegadas.
+
+## Saliendo del modo de pantalla completa
+
+El usuario siempre tendrá la habilidad de salir del modo de pantalla completa por su propia cuenta; véase [Cosas que los usuarios querrán saber](#things_your_users_want_to_know). Incluso se puede hacer programáticamente, llamando al método {{domxref("exitFullscreen()")}}.
+
+## Otra información
+
+El objeto {{ domxref("document") }} provee información adiciional que puede ser útil al desarrollar aplicaciones de pantalla completa:
+
+- {{ domxref("document.fullscreenElement", "fullscreenElement") }}
+ - : El atributo `fullscreenElement` apunta al {{ domxref("element", "elemento") }} actualmente en modo pantalla. Si no es nulo, el documento está en pantalla completa, y si es nulo, no lo está.
+- {{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}
+ - : El atributo `fullscreenEnabled` indica si el documento está actualmente en un estado que permitiría solicitudes al modo de pantalla completa.
+
+## Cosas que los usuarios querrán saber
+
+Puedes asegurarte de hacer saber a los usuarios que pueden presionar la tecla ESC (o F11 ) para salir del modo de pantalla completa.
+
+Adicionalmente, navegando a otra página, cambiando de pestaña, o cambiando a otra aplicación(usando, por ejemplo, Alt -Tab ) mientras se está en pantalla completa, también se saldrá de dicho modo.
+
+## Ejemplo
+
+En este ejemplo, se presenta un video en una página web. Presionando la tecla Return o Enter el usuario podrá moverse entre modo de ventana o de pantalla completa para la presentación del video.
+
+[Ver ejemplo en vivo](/samples/domref/fullscreen.html)
+
+### Observando la tecla Enter
+
+Cuando la página se carga, este código se ejecuta para establecer un evento para cuando se presione la tecla Enter .
+
+```js
+document.addEventListener("keydown", function(e) {
+ if (e.keyCode == 13) {
+ toggleFullScreen();
+ }
+}, false);
+```
+
+### Cambiando entre modo de pantalla completa y modo de ventana
+
+Este código es llamado cuando el usuario presiona la tecla Enter , como se ve arriba.
+
+```js
+function toggleFullScreen() {
+ if (!document.fullscreenElement) {
+ document.documentElement.requestFullscreen();
+ } else {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ }
+ }
+}
+```
+
+En este código, primero se observa si el atributo `fullscreenElement` de {{ domxref("document") }} (comprobando si tiene prefijo `moz`,`ms`, o `webkit`). Si es `null`, el documento está en modo de ventana actualmente, así que necesitamos cambiarlo a modo de pantalla completa. Esto se hace llamando a la función {{ domxref("element.requestFullscreen()") }}.
+
+Si el modo de pantalla completa está activado (`fullscreenElement` no es `null`), llamamos a la función {{ domxref("document.exitFullscreen()") }}.
+
+## Prefijado
+
+De momento, no todos los navegadores están implementando la versión sin prefijo de la API. Aquí está la tabla que resume los prefijos y diferencias de nombres entre ellos:
+
+| Estándar | Blink (Chrome y Opera) | Gecko (Firefox) | Internet Explorer 11 | Edge | Safari (WebKit) |
+| -------------------------------------------------------- | --------------------------- | ------------------------ | ----------------------- | --------------------------- | --------------------------- |
+| {{domxref("Document.fullscreen")}} | `webkitIsFullScreen` | `mozFullScreen` | _-_ | `webkitIsFullScreen` | `webkitIsFullScreen` |
+| {{domxref("Document.fullscreenEnabled")}} | `webkitFullscreenEnabled` | `mozFullScreenEnabled` | `msFullscreenEnabled` | `webkitFullscreenEnabled` | `webkitFullscreenEnabled` |
+| {{domxref("Document.fullscreenElement")}} | `webkitFullscreenElement` | `mozFullScreenElement` | `msFullscreenElement` | `webkitFullscreenElement` | `webkitFullscreenElement` |
+| {{domxref("Document.onfullscreenchange")}} | `onwebkitfullscreenchange` | `onmozfullscreenchange` | `onmsfullscreenchange` | `onwebkitfullscreenchange` | `onwebkitfullscreenchange` |
+| {{domxref("Document.onfullscreenerror")}} | `onwebkitfullscreenerror` | `onmozfullscreenerror` | `onmsfullscreenerror` | `onwebkitfullscreenerror` | `onwebkitfullscreenerror` |
+| {{domxref("Document.exitFullscreen()")}} | `webkitExitFullscreen()` | `mozCancelFullScreen()` | `msExitFullscreen()` | `webkitExitFullscreen()` | `webkitExitFullscreen()` |
+| {{domxref("Element.requestFullscreen()")}} | `webkitRequestFullscreen()` | `mozRequestFullScreen()` | `msRequestFullscreen()` | `webkitRequestFullscreen()` | `webkitRequestFullscreen()` |
+
+## Especificaciones
+
+| Especificación | Estatus | Comentarios |
+| ------------------------------------ | -------------------------------- | ---------------- |
+| {{SpecName("Fullscreen")}} | {{Spec2("Fullscreen")}} | Versión inicial. |
+
+## Browser compatibility
+
+### `Document.fullscreen`
+
+{{Compat("api.Document.fullscreen")}}
+
+### `Document.fullscreenElement`
+
+{{Compat("api.Document.fullscreenElement")}}
+
+### `Document.fullscreenEnabled`
+
+{{Compat("api.Document.fullscreenEnabled")}}
+
+### `Document.exitFullscreen`
+
+{{Compat("api.Document.exitFullscreen")}}
+
+### `Element.requestFullscreen`
+
+{{Compat("api.Element.requestFullscreen")}}
+
+## Véase también
+
+- {{ domxref("Element.requestFullscreen()") }}
+- {{ domxref("Document.exitFullscreen()") }}
+- {{ domxref("Document.fullscreen") }}
+- {{ domxref("Document.fullscreenElement") }}
+- {{ cssxref(":fullscreen") }}, {{cssxref("::backdrop")}}
+- {{ HTMLAttrXRef("allowfullscreen", "iframe") }}
diff --git a/files/es/web/api/gamepad_api/index.html b/files/es/web/api/gamepad_api/index.html
deleted file mode 100644
index 54b3ff874425b4..00000000000000
--- a/files/es/web/api/gamepad_api/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Gamepad API
-slug: Web/API/Gamepad_API
-tags:
- - API
- - Experimental
- - Gamepad API
- - juegos
-translation_of: Web/API/Gamepad_API
----
-{{DefaultAPISidebar("Gamepad API")}}
-
-Gamepad API es la manera de los desarrolladores de acceder y responder a las señales de los gamepads y otros controles para juegos de una manera simple y consistente. Éste contiene tres interfaces, dos eventos y una función especializada, para responder a los gamepads siendo conectados y desconectados, y acceder a otra información sobre los mismos gamepads, y que botones y otros controles están siendo presionados.
-
-Interfaces
-
-
- GamepadRepresenta un gamepad/control conectado a la computadora.
- GamepadButtonRepresenta un botón en uno de los gamepads conectados.
- GamepadEventEl evento objeto representa eventos que son enviados a los gamepads.
-
-
-Extensiones experimentales de los gamepads
-
-
- GamepadHapticActuatorRepresenta el hardware en el control designado para proveer retroalimentación háptica al usuario (si está disponible), más comunmente hardware de vibración.
- GamepadPoseRepresenta la posición de un control (ej. posición y orientación el espacio 3D) en el caso de un controllador WebVR . Éste no es usado por el nuevo estándar WebXR .
-
-
-Ver también las extensiones para la interfaz del navegador , para caracteristicas que le permitan acceder a la información mencionada.
-
-Extensiones y otras interfaces
-
-Navigator
-
-
- {{domxref("Navigator.getGamepads()")}}
- Una extensión a el objeto {{domxref("Navigator")}} que devuelve un arreglo de objetos {{domxref("Gamepad")}}, uno para cada gamepad conectado.
-
-
-Eventos del Window
-
-
- {{domxref("Window.ongamepadconnected")}}
- Representa un manejador de evento que se ejecutará cuando un gamepad es conectado (cuando se dispara el evento {{event('gamepadconnected')}}).
- {{domxref("Window.ongamepaddisconnected")}}
- Representa un manejador de evento que se ejecutará cuando un gamepad es desconectado (cuando se dispara el evento {{event('gamepaddisconnected')}}).
-
-
-Guías y tutoriales
-
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estatus
- Comentario
-
-
- {{SpecName("GamepadExtensions")}}
- {{Spec2("GamepadExtensions")}}
- Defines the Experimental Gamepad extensions .
-
-
- {{SpecName("Gamepad", "", "The Gamepad API specification")}}
- {{Spec2("Gamepad")}}
- Initial definition
-
-
-
-
-Compatibilidad del navegador
-
-
-
-{{Compat("api.Gamepad")}}
-
-Ver también
-
-
diff --git a/files/es/web/api/gamepad_api/index.md b/files/es/web/api/gamepad_api/index.md
new file mode 100644
index 00000000000000..07b479a8e9121f
--- /dev/null
+++ b/files/es/web/api/gamepad_api/index.md
@@ -0,0 +1,66 @@
+---
+title: Gamepad API
+slug: Web/API/Gamepad_API
+tags:
+ - API
+ - Experimental
+ - Gamepad API
+ - juegos
+translation_of: Web/API/Gamepad_API
+---
+{{DefaultAPISidebar("Gamepad API")}}
+
+**Gamepad API** es la manera de los desarrolladores de acceder y responder a las señales de los gamepads y otros controles para juegos de una manera simple y consistente. Éste contiene tres interfaces, dos eventos y una función especializada, para responder a los gamepads siendo conectados y desconectados, y acceder a otra información sobre los mismos gamepads, y que botones y otros controles están siendo presionados.
+
+## Interfaces
+
+- [`Gamepad`](/es/docs/Web/API/Gamepad)
+ - : Representa un gamepad/control conectado a la computadora.
+- [`GamepadButton`](/es/docs/Web/API/GamepadButton)
+ - : Representa un botón en uno de los gamepads conectados.
+- [`GamepadEvent`](/es/docs/Web/API/GamepadEvent)
+ - : El evento objeto representa eventos que son enviados a los gamepads.
+
+### Extensiones experimentales de los gamepads
+
+- [`GamepadHapticActuator`](/es/docs/Web/API/GamepadHapticActuator)
+ - : Representa el hardware en el control designado para proveer retroalimentación háptica al usuario (si está disponible), más comunmente hardware de vibración.
+- [`GamepadPose`](/es/docs/Web/API/GamepadPose)
+ - : Representa la posición de un control (ej. posición y orientación el espacio 3D) en el caso de un controllador [WebVR](/es/docs/Web/API/WebVR_API). Éste no es usado por el nuevo estándar [WebXR](/es/docs/Web/API/WebXR_Device_API).
+
+Ver también las [extensiones para la interfaz del navegador](/es/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad), para caracteristicas que le permitan acceder a la información mencionada.
+
+### Extensiones y otras interfaces
+
+#### Navigator
+
+- {{domxref("Navigator.getGamepads()")}}
+ - : Una extensión a el objeto {{domxref("Navigator")}} que devuelve un arreglo de objetos {{domxref("Gamepad")}}, uno para cada gamepad conectado.
+
+#### Eventos del Window
+
+- {{domxref("Window.ongamepadconnected")}}
+ - : Representa un manejador de evento que se ejecutará cuando un gamepad es conectado (cuando se dispara el evento {{event('gamepadconnected')}}).
+- {{domxref("Window.ongamepaddisconnected")}}
+ - : Representa un manejador de evento que se ejecutará cuando un gamepad es desconectado (cuando se dispara el evento {{event('gamepaddisconnected')}}).
+
+## Guías y tutoriales
+
+- [Usando la gamepad API](/es/docs/Web/API/Gamepad_API/Using_the_Gamepad_API)
+- [Implementación de controles usando la gamepad API](/es/docs/Games/Techniques/Controls_Gamepad_API)
+
+## Especificaciones
+
+| Especificación | Estatus | Comentario |
+| -------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------- |
+| {{SpecName("GamepadExtensions")}} | {{Spec2("GamepadExtensions")}} | Defines the [Experimental Gamepad extensions](#experimental_gamepad_extensions). |
+| {{SpecName("Gamepad", "", "The Gamepad API specification")}} | {{Spec2("Gamepad")}} | Initial definition |
+
+## Compatibilidad del navegador
+
+{{Compat("api.Gamepad")}}
+
+## Ver también
+
+- [La gamepad API](https://hacks.mozilla.org/2013/12/the-gamepad-api/) por Ted Mielczarek y Robert Nyman
+- [Página de demostración simple de la API](http://luser.github.io/gamepadtest/) ([código fuente](https://github.com/luser/gamepadtest))
diff --git a/files/es/web/api/gamepadbutton/index.html b/files/es/web/api/gamepadbutton/index.html
deleted file mode 100644
index baa14466da6ad3..00000000000000
--- a/files/es/web/api/gamepadbutton/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: GamepadButton
-slug: Web/API/GamepadButton
-tags:
- - API
- - API Gamepad
- - Referencia
- - juegos
-translation_of: Web/API/GamepadButton
----
-{{APIRef("Gamepad API")}}
-
-La interfaz GamepadButton
-
-Un objeto GamepadButton se devuelve al solicitar cualquier valor del array devuelto por la propiedad buttons de la interfaz {{domxref("Gamepad")}}.
-
-
-
Nota : Este es el caso en Firefox Gecko 28 en adelante; Chrome y versiones anteriores de Firefox continúan devolviendo un array de valores dobles cuando se accede a esta propiedad.
-
Propiedades
-
-
- {{domxref("GamepadButton.value")}} {{readonlyInline}}
- Un valor doble usado para representar el estado actual de botones análogos, así como los gatillos de muchos gamepads modernos. Los valores se normalizan al rango 0.0 —1.0, donde 0.0 representa un botón que no está presionado, y 1.0 representa un botón que está completamente presionado.
- {{domxref("GamepadButton.pressed")}} {{readonlyInline}}
- Un valor {{domxref("Boolean")}} que indica el estado el botón, ya sea que actualmente se encuentre presionado (true) o sin presionar (false).
-
-
-Ejemplo
-
-El siguiente código se toma de mi demostración del botón del API de Gamepad (puedes ver el demo en vivo , y encontrar el código fuente en Github.) Nota que el código — en Chrome {{domxref("Navigator.getGamepads")}} necesita un prefijo webkit y los valores del botón serán guardados como un array de valores dobles, mientras qe en Firefox {{domxref("Navigator.getGamepads")}} no se necesita un prefijo, y los valores de los botones se guardan como un array de objetos {{domxref("GamepadButton")}}; estas son las propiedades {{domxref("GamepadButton.value")}} o {{domxref("GamepadButton.pressed")}} a las que necesitamos acceder, dependiendo de qué tipo de botones haya. En este simple ejemplo yo solo he permitido estos.
-
-function gameLoop() {
- if(navigator.webkitGetGamepads) {
- var gp = navigator.webkitGetGamepads()[0];
-
- if(gp.buttons[0] == 1) {
- b--;
- } else if(gp.buttons[1] == 1) {
- a++;
- } else if(gp.buttons[2] == 1) {
- b++;
- } else if(gp.buttons[3] == 1) {
- a--;
- }
- } else {
- var gp = navigator.getGamepads()[0];
-
- if(gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) {
- b--;
- } else if(gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) {
- a++;
- } else if(gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) {
- b++;
- } else if(gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) {
- a--;
- }
- }
-
- ball.style.left = a*2 + "px";
- ball.style.top = b*2 + "px";
-
- var start = rAF(gameLoop);
-};
-
-Especificaciones
-
-
-
-
- Specification
- Status
- Comment
-
-
- {{SpecName("Gamepad", "#gamepadbutton-interface", "GamepadButton")}}
- {{Spec2("Gamepad")}}
- Definición inicial
-
-
-
-
-Compatibilidad de Navegadores
-
-{{Compat("api.GamepadButton")}}
-
-Recomendado
-
-Usando la API de Gamepad
diff --git a/files/es/web/api/gamepadbutton/index.md b/files/es/web/api/gamepadbutton/index.md
new file mode 100644
index 00000000000000..9aa7ed08f4a982
--- /dev/null
+++ b/files/es/web/api/gamepadbutton/index.md
@@ -0,0 +1,77 @@
+---
+title: GamepadButton
+slug: Web/API/GamepadButton
+tags:
+ - API
+ - API Gamepad
+ - Referencia
+ - juegos
+translation_of: Web/API/GamepadButton
+---
+{{APIRef("Gamepad API")}}
+
+La interfaz **`GamepadButton`** define un botón individual de un gamepad u otro control, dando acceso al estado actual de diferentes tipos de botones disponibles en el dispositivo de control.
+
+Un objeto `GamepadButton` se devuelve al solicitar cualquier valor del array devuelto por la propiedad `buttons` de la interfaz {{domxref("Gamepad")}}.
+
+> **Nota:** Este es el caso en Firefox Gecko 28 en adelante; Chrome y versiones anteriores de Firefox continúan devolviendo un array de valores dobles cuando se accede a esta propiedad.
+
+## Propiedades
+
+- {{domxref("GamepadButton.value")}} {{readonlyInline}}
+ - : Un valor doble usado para representar el estado actual de botones análogos, así como los gatillos de muchos gamepads modernos. Los valores se normalizan al rango 0.0 —1.0, donde 0.0 representa un botón que no está presionado, y 1.0 representa un botón que está completamente presionado.
+- {{domxref("GamepadButton.pressed")}} {{readonlyInline}}
+ - : Un valor {{domxref("Boolean")}} que indica el estado el botón, ya sea que actualmente se encuentre presionado (`true`) o sin presionar (`false`).
+
+## Ejemplo
+
+El siguiente código se toma de mi demostración del botón del API de Gamepad (puedes [ver el demo en vivo](http://chrisdavidmills.github.io/gamepad-buttons/), y [encontrar el código fuente](https://github.com/chrisdavidmills/gamepad-buttons/tree/master) en Github.) Nota que el código — en Chrome {{domxref("Navigator.getGamepads")}} necesita un prefijo `webkit` y los valores del botón serán guardados como un array de valores dobles, mientras qe en Firefox {{domxref("Navigator.getGamepads")}} no se necesita un prefijo, y los valores de los botones se guardan como un array de objetos {{domxref("GamepadButton")}}; estas son las propiedades {{domxref("GamepadButton.value")}} o {{domxref("GamepadButton.pressed")}} a las que necesitamos acceder, dependiendo de qué tipo de botones haya. En este simple ejemplo yo solo he permitido estos.
+
+```js
+function gameLoop() {
+ if(navigator.webkitGetGamepads) {
+ var gp = navigator.webkitGetGamepads()[0];
+
+ if(gp.buttons[0] == 1) {
+ b--;
+ } else if(gp.buttons[1] == 1) {
+ a++;
+ } else if(gp.buttons[2] == 1) {
+ b++;
+ } else if(gp.buttons[3] == 1) {
+ a--;
+ }
+ } else {
+ var gp = navigator.getGamepads()[0];
+
+ if(gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) {
+ b--;
+ } else if(gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) {
+ a++;
+ } else if(gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) {
+ b++;
+ } else if(gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) {
+ a--;
+ }
+ }
+
+ ball.style.left = a*2 + "px";
+ ball.style.top = b*2 + "px";
+
+ var start = rAF(gameLoop);
+};
+```
+
+## Especificaciones
+
+| Specification | Status | Comment |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------------ |
+| {{SpecName("Gamepad", "#gamepadbutton-interface", "GamepadButton")}} | {{Spec2("Gamepad")}} | Definición inicial |
+
+## Compatibilidad de Navegadores
+
+{{Compat("api.GamepadButton")}}
+
+## Recomendado
+
+[Usando la API de Gamepad](/es/docs/Web/Guide/API/Gamepad)
diff --git a/files/es/web/api/geolocation/index.html b/files/es/web/api/geolocation/index.html
deleted file mode 100644
index ab33404b69221f..00000000000000
--- a/files/es/web/api/geolocation/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: Geolocalización
-slug: Web/API/Geolocation
-translation_of: Web/API/Geolocation
----
-{{APIRef("Geolocation API")}}
-
-La interfaz Geolocalización representa un objeto capaz de obtener mediante programación la posición del dispositivo . Se da acceso Web de la ubicación del dispositivo . Esto permite a un sitio Web o aplicación ofrecer resultados personalizados basados en la ubicación del usuario .
-
-Se obtiene un objeto con esta interfaz mediante la propiedad implementado por el objeto {{domxref("Navigator")}}.
-
-
-
Nota: Por razones de seguridad , cuando una página web intenta obtener acceso a la información de ubicación , se notifica al usuario y le pide conceder el permiso . Tenga en cuenta que cada navegador tiene sus propias políticas y métodos para solicitar este permiso.
-
Propiedades
-
-La interfaz de Geolocalización no implementa ni hereda propiedades .
-
-Métodos
-
-La interfaz Geolocation no hereda ningún método.
-
-
- Geolocation.getCurrentPosition() Determina la ubicación actual del dispositivo y devuelve un objeto de posición({{domxref("Position")}}) con los datos. Geolocation.watchPosition()
-
-Devuelve un valor de largo(long) que representa la función de devolución de llamada de reciente creación que se invoca cada vez que cambia la ubicación del dispositivo .
-
-
- Geolocation.clearWatch() Elimina el controlador especial instalado previamente utilizando watchPosition()
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName('Geolocation')}}
- {{Spec2('Geolocation')}}
- Especificación inicial
-
-
-
-
-Compatibilidad en navegador
-
-{{Compat("api.Geolocation")}}
-
-Ver también
-
-
diff --git a/files/es/web/api/geolocation/index.md b/files/es/web/api/geolocation/index.md
new file mode 100644
index 00000000000000..b27bd5c97cfb61
--- /dev/null
+++ b/files/es/web/api/geolocation/index.md
@@ -0,0 +1,44 @@
+---
+title: Geolocalización
+slug: Web/API/Geolocation
+translation_of: Web/API/Geolocation
+---
+{{APIRef("Geolocation API")}}
+
+La interfaz **Geolocalización** representa un objeto capaz de obtener mediante programación la posición del dispositivo. Se da acceso Web de la ubicación del dispositivo. Esto permite a un sitio Web o aplicación ofrecer resultados personalizados basados en la ubicación del usuario.
+
+Se obtiene un objeto con esta interfaz mediante la propiedad {{domxref("NavigatorGeolocation.geolocation")}} implementado por el objeto {{domxref("Navigator")}}.
+
+> **Nota:** Por razones de seguridad, cuando una página web intenta obtener acceso a la información de ubicación, se notifica al usuario y le pide conceder el permiso. Tenga en cuenta que cada navegador tiene sus propias políticas y métodos para solicitar este permiso.
+
+## Propiedades
+
+La interfaz de Geolocalización no implementa ni hereda propiedades.
+
+## Métodos
+
+_La interfaz `Geolocation` no hereda ningún método._
+
+- [Geolocation.getCurrentPosition()](/es/docs/Web/API/Geolocation.getCurrentPosition)
+ - : Determina la ubicación actual del dispositivo y devuelve un objeto de posición({{domxref("Position")}}) con los datos.
+
+[Geolocation.watchPosition()](/es/docs/Web/API/Geolocation.watchPosition)
+
+Devuelve un valor de largo(`long`) que representa la función de devolución de llamada de reciente creación que se invoca cada vez que cambia la ubicación del dispositivo.
+
+- [Geolocation.clearWatch()](/es/docs/Web/API/Geolocation.clearWatch)
+ - : Elimina el controlador especial instalado previamente utilizando [`watchPosition()`](/es/docs/Web/API/Geolocation.watchPosition).
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| ------------------------------------ | -------------------------------- | ---------------------- |
+| {{SpecName('Geolocation')}} | {{Spec2('Geolocation')}} | Especificación inicial |
+
+## Compatibilidad en navegador
+
+{{Compat("api.Geolocation")}}
+
+## Ver también
+
+- [Usar la geolocalización](/es/docs/Usar_la_Geolocalizaci%C3%B3n)
diff --git a/files/es/web/api/geolocationcoordinates/index.html b/files/es/web/api/geolocationcoordinates/index.html
deleted file mode 100644
index f40160249acb75..00000000000000
--- a/files/es/web/api/geolocationcoordinates/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: Coordinates
-slug: Web/API/GeolocationCoordinates
-translation_of: Web/API/GeolocationCoordinates
----
-{{APIRef("Geolocation API")}}
-
-La interfaz Coordinates
-
-Propiedades
-
-La interfaz Coordinates no hereda ninguna propiedad .
-
-
- {{domxref("Coordinates.latitude")}} {{readonlyInline}}
- Devuelve un double que representa la latitud de la posición en grados con decimales.
- {{domxref("Coordinates.longitude")}} {{readonlyInline}}
- Devuelve un double que representa la longitud de la posición en grados con decimales.
- {{domxref("Coordinates.altitude")}} {{readonlyInline}}
- Devuelve un double que representa la altitud de la posición en metros, relativo al nivel del mar. Este valor puede ser null si la implementación no puede proporcionar la información.
- {{domxref("Coordinates.accuracy")}} {{readonlyInline}}
- Devuelve un double que representa la precisión de las propiedades latitude y longitude, expresada en metros.
- {{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}}
- Devuelve un double que representa la precisión de la propiedad altitude expresada en metros. Este valor puede ser null.
- {{domxref("Coordinates.heading")}} {{readonlyInline}}
- Devuelve un double que representa la dirección en la que el dispositivo está viajando. Este valor, indicado en grados, indica la distancia real a la que el dispositivo se encuentra del norte. 0 grados representa el norte real, y la dirección se determina en el sentido de la agujas del reloj (lo que significa que el este es 90 grados y el oeste es 270 grados). Si speed es 0, heading es NaN heading, este valor es null.
- {{domxref("Coordinates.speed")}} {{readonlyInline}}
- Devuelve un double que representa la velocidad del dispositivo en metros por segundo. Este valor puede ser null.
-
-
-Métodos
-
-La interfaz Coordinates no implementa ni edita ningún método.
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName('Geolocation', '#coordinates', 'Coordinates')}}
- {{Spec2('Geolocation')}}
- Especificación inicial
-
-
-
-
-Compatibilidad en navegadores
-
-{{Compat("api.GeolocationCoordinates")}}
-
-Ver también
-
-
diff --git a/files/es/web/api/geolocationcoordinates/index.md b/files/es/web/api/geolocationcoordinates/index.md
new file mode 100644
index 00000000000000..1a34204a4d1ba0
--- /dev/null
+++ b/files/es/web/api/geolocationcoordinates/index.md
@@ -0,0 +1,46 @@
+---
+title: Coordinates
+slug: Web/API/GeolocationCoordinates
+translation_of: Web/API/GeolocationCoordinates
+---
+{{APIRef("Geolocation API")}}
+
+La interfaz **`Coordinates`** representa la posición y altitud del dispositivo en la Tierra, así como la precisión con la cual estas propiedades son calculadas.
+
+## Propiedades
+
+_La interfaz `Coordinates` no hereda ninguna propiedad_.
+
+- {{domxref("Coordinates.latitude")}} {{readonlyInline}}
+ - : Devuelve un `double` que representa la latitud de la posición en grados con decimales.
+- {{domxref("Coordinates.longitude")}} {{readonlyInline}}
+ - : Devuelve un `double` que representa la longitud de la posición en grados con decimales.
+- {{domxref("Coordinates.altitude")}} {{readonlyInline}}
+ - : Devuelve un `double` que representa la altitud de la posición en metros, relativo al nivel del mar. Este valor puede ser `null` si la implementación no puede proporcionar la información.
+- {{domxref("Coordinates.accuracy")}} {{readonlyInline}}
+ - : Devuelve un `double` que representa la precisión de las propiedades `latitude` y `longitude`, expresada en metros.
+- {{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}}
+ - : Devuelve un `double` que representa la precisión de la propiedad `altitude` expresada en metros. Este valor puede ser `null`.
+- {{domxref("Coordinates.heading")}} {{readonlyInline}}
+ - : Devuelve un `double` que representa la dirección en la que el dispositivo está viajando. Este valor, indicado en grados, indica la distancia real a la que el dispositivo se encuentra del norte. `0` grados representa el norte real, y la dirección se determina en el sentido de la agujas del reloj (lo que significa que el este es `90` grados y el oeste es `270` grados). Si `speed` es `0`, `heading` es [`NaN`](/en-US/docs/JavaScript/Reference/Global_Objects/NaN). En caso de que el dispositivo no pueda proporcionar la información de `heading`, este valor es `null`.
+- {{domxref("Coordinates.speed")}} {{readonlyInline}}
+ - : Devuelve un `double` que representa la velocidad del dispositivo en metros por segundo. Este valor puede ser `null`.
+
+## Métodos
+
+La interfaz `Coordinates` no implementa ni edita ningún método.
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------- | -------------------------------- | ---------------------- |
+| {{SpecName('Geolocation', '#coordinates', 'Coordinates')}} | {{Spec2('Geolocation')}} | Especificación inicial |
+
+## Compatibilidad en navegadores
+
+{{Compat("api.GeolocationCoordinates")}}
+
+## Ver también
+
+- [Utilizando la geolocalización](/es/docs/WebAPI/Using_geolocation)
+- La interfaz {{domxref("Geolocation")}} que la utiliza.
diff --git a/files/es/web/api/geolocationcoordinates/latitude/index.html b/files/es/web/api/geolocationcoordinates/latitude/index.html
deleted file mode 100644
index 44e824fff4841b..00000000000000
--- a/files/es/web/api/geolocationcoordinates/latitude/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Coordinates.latitude
-slug: Web/API/GeolocationCoordinates/latitude
-translation_of: Web/API/GeolocationCoordinates/latitude
----
-{{APIRef("Geolocation API")}}
-
-Coordinates.latitude double representando la latitud de la posición en grados decimales.
-
-Sintaxis
-
-lat = coordinates .latitudeEspecificaciones
-
-
-
-
- Especificación
- Estatus
- Comentario
-
-
-
-
- {{SpecName('Geolocation', '#lat', 'Coordinates.latitude')}}
- {{Spec2('Geolocation')}}
- Especificación Inicial.
-
-
-
-
-Compatibilidad de navegadores
-
-{{Compat("api.GeolocationCoordinates.latitude")}}
-
-Mirar también
-
-
diff --git a/files/es/web/api/geolocationcoordinates/latitude/index.md b/files/es/web/api/geolocationcoordinates/latitude/index.md
new file mode 100644
index 00000000000000..aaad7f94a436d0
--- /dev/null
+++ b/files/es/web/api/geolocationcoordinates/latitude/index.md
@@ -0,0 +1,29 @@
+---
+title: Coordinates.latitude
+slug: Web/API/GeolocationCoordinates/latitude
+translation_of: Web/API/GeolocationCoordinates/latitude
+---
+{{APIRef("Geolocation API")}}
+
+**`Coordinates.latitude`** es una propiedad de sólo lectura que devuelve un `double` representando la latitud de la posición en grados decimales.
+
+## Sintaxis
+
+```js
+lat = coordinates.latitude
+```
+
+## Especificaciones
+
+| Especificación | Estatus | Comentario |
+| -------------------------------------------------------------------------------- | -------------------------------- | ----------------------- |
+| {{SpecName('Geolocation', '#lat', 'Coordinates.latitude')}} | {{Spec2('Geolocation')}} | Especificación Inicial. |
+
+## Compatibilidad de navegadores
+
+{{Compat("api.GeolocationCoordinates.latitude")}}
+
+## Mirar también
+
+- [Uso de geolocalización](/es/docs/WebAPI/Using_geolocation)
+- La interfaz {{domxref("Coordinates")}} a la que pertenece.
diff --git a/files/es/web/api/geolocationposition/index.html b/files/es/web/api/geolocationposition/index.html
deleted file mode 100644
index afd7eb15b9504d..00000000000000
--- a/files/es/web/api/geolocationposition/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: Position
-slug: Web/API/GeolocationPosition
-tags:
- - API
- - Contexto seguro
- - Geolocalización
- - Geolocation API
- - Interfaz
- - Posición
- - Position
-translation_of: Web/API/GeolocationPosition
----
-{{securecontext_header}}{{APIRef("Geolocation API")}}
-
-La interfaz Position
-
-Propiedades
-
-La interfaz Position no hereda ninguna propiedad.
-
-
- {{domxref("Position.coords")}} {{readonlyInline}} {{securecontext_inline}}
- Devuelve un objeto {{domxref("Coordinates")}} que indica la posición actual.
- {{domxref("Position.timestamp")}} {{readonlyInline}} {{securecontext_inline}}
- Devuelve un {{domxref("DOMTimeStamp")}} indicando el momento en que la localización ha sido recuperada.
-
-
-Métodos
-
-La interfaz Position no implementa ni hereda ningún método.
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName('Geolocation', '#position', 'Position')}}
- {{Spec2('Geolocation')}}
- Especificación inicial.
-
-
-
-
-Compatibilidad de navegadores
-
-
-
-{{Compat("api.Position")}}
-
-Ver también
-
-
diff --git a/files/es/web/api/geolocationposition/index.md b/files/es/web/api/geolocationposition/index.md
new file mode 100644
index 00000000000000..703e5c589c2947
--- /dev/null
+++ b/files/es/web/api/geolocationposition/index.md
@@ -0,0 +1,44 @@
+---
+title: Position
+slug: Web/API/GeolocationPosition
+tags:
+ - API
+ - Contexto seguro
+ - Geolocalización
+ - Geolocation API
+ - Interfaz
+ - Posición
+ - Position
+translation_of: Web/API/GeolocationPosition
+---
+{{securecontext_header}}{{APIRef("Geolocation API")}}
+
+La interfaz **`Position`** representa la posición del dispositivo en cuestión en un momento dado. La posición, representada por el objeto {{domxref("Coordinates")}}, comprende la posición en dos dimensiones del dispositivo en un esferoide representando la Tierra y además su altitud y velocidad.
+
+## Propiedades
+
+_La interfaz `Position` no hereda ninguna propiedad._
+
+- {{domxref("Position.coords")}} {{readonlyInline}} {{securecontext_inline}}
+ - : Devuelve un objeto {{domxref("Coordinates")}} que indica la posición actual.
+- {{domxref("Position.timestamp")}} {{readonlyInline}} {{securecontext_inline}}
+ - : Devuelve un {{domxref("DOMTimeStamp")}} indicando el momento en que la localización ha sido recuperada.
+
+## Métodos
+
+La interfaz `Position` no implementa ni hereda ningún método.
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------- | -------------------------------- | ----------------------- |
+| {{SpecName('Geolocation', '#position', 'Position')}} | {{Spec2('Geolocation')}} | Especificación inicial. |
+
+## Compatibilidad de navegadores
+
+{{Compat("api.Position")}}
+
+## Ver también
+
+- [Using geolocation](/es/docs/WebAPI/Using_geolocation)
+- La interfaz {{domxref("Geolocation")}} que la usa.
diff --git a/files/es/web/api/history/index.html b/files/es/web/api/history/index.html
deleted file mode 100644
index c5ae8affbdeff8..00000000000000
--- a/files/es/web/api/history/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: History
-slug: Web/API/History
-tags:
- - API
- - HTML DOM
- - History API
- - Interface
- - NeedsTranslation
- - TopicStub
- - Web
-translation_of: Web/API/History
----
-{{ APIRef("History API") }}
-
-The Historysession history , that is the pages visited in the tab or frame that the current page is loaded in.
-
-Properties
-
-The History interface doesn't inherit any property.
-
-
- {{domxref("History.length","length")}} {{readOnlyInline}}
- Returns an Integer representing the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns 1.
- {{domxref("History.scrollRestoration","scrollRestoration")}}
- Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either auto or manual.
- {{domxref("History.state","state")}} {{readOnlyInline}}
- Returns an any value representing the state at the top of the history stack. This is a way to look at the state without having to wait for a {{event("popstate")}} event.
-
-
-Methods
-
-The History interface doesn't inherit any methods.
-
-
- {{domxref("History.back","back()")}}
- This asynchronous method goes to the previous page in session history, the same action as when the user clicks the browser's Back button. Equivalent to history.go(-1).
- Calling this method to go back beyond the first page in the session history has no effect and doesn't raise an exception.
-
- {{domxref("History.forward","forward()")}}
- This asynchronous method goes to the next page in session history, the same action as when the user clicks the browser's Forward button; this is equivalent to history.go(1).
- Calling this method to go forward beyond the most recent page in the session history has no effect and doesn't raise an exception.
-
- {{domxref("History.go","go()")}}
- Asynchronously loads a page from the session history, identified by its relative location to the current page, for example -1 for the previous page or 1 for the next page. If you specify an out-of-bounds value (for instance, specifying -1 when there are no previously-visited pages in the session history), this method silently has no effect. Calling go() without parameters or a value of 0 reloads the current page. Internet Explorer lets you specify a string, instead of an integer, to go to a specific URL in the history list.
- {{domxref("History.pushState","pushState()")}}
- Pushes the given data onto the session history stack with the specified title (and, if provided, URL). The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized. Note that all browsers but Safari currently ignore the title parameter. For more information, see Working with the History API .
- {{domxref("History.replaceState","replaceState()")}}
- Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized. Note that all browsers but Safari currently ignore the title parameter. For more information, see Working with the History API .
-
-
-Specifications
-
-
-
-
- Specification
- Status
- Comment
-
-
-
-
- {{SpecName('HTML WHATWG', "browsers.html#the-history-interface", "History")}}
- {{Spec2('HTML WHATWG')}}
- Adds the scrollRestoration attribute.
-
-
- {{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}
- {{Spec2('HTML5 W3C')}}
- Initial definition.
-
-
-
-
-Browser compatibility
-
-
-
-{{Compat("api.History")}}
-
-See also
-
-
- The {{domxref("Window.history")}} property returning the history of the current session.
-
diff --git a/files/es/web/api/history/index.md b/files/es/web/api/history/index.md
new file mode 100644
index 00000000000000..65d471b852d8e6
--- /dev/null
+++ b/files/es/web/api/history/index.md
@@ -0,0 +1,65 @@
+---
+title: History
+slug: Web/API/History
+tags:
+ - API
+ - HTML DOM
+ - History API
+ - Interface
+ - NeedsTranslation
+ - TopicStub
+ - Web
+translation_of: Web/API/History
+---
+{{ APIRef("History API") }}
+
+The **`History`** interface allows manipulation of the browser _session history_, that is the pages visited in the tab or frame that the current page is loaded in.
+
+## Properties
+
+_The `History`_ _interface doesn't inherit any property._
+
+- {{domxref("History.length","length")}} {{readOnlyInline}}
+ - : Returns an `Integer` representing the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns `1`.
+- {{domxref("History.scrollRestoration","scrollRestoration")}}
+ - : Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either `auto` or `manual`.
+- {{domxref("History.state","state")}} {{readOnlyInline}}
+ - : Returns an `any` value representing the state at the top of the history stack. This is a way to look at the state without having to wait for a {{event("popstate")}} event.
+
+## Methods
+
+_The `History`_ _interface doesn't inherit any methods._
+
+- {{domxref("History.back","back()")}}
+
+ - : This asynchronous method goes to the previous page in session history, the same action as when the user clicks the browser's Back button. Equivalent to `history.go(-1)`.
+
+ > **Nota:** Calling this method to go back beyond the first page in the session history has no effect and doesn't raise an exception.
+
+- {{domxref("History.forward","forward()")}}
+
+ - : This asynchronous method goes to the next page in session history, the same action as when the user clicks the browser's Forward button; this is equivalent to `history.go(1)`.
+
+ > **Nota:** Calling this method to go forward beyond the most recent page in the session history has no effect and doesn't raise an exception.
+
+- {{domxref("History.go","go()")}}
+ - : Asynchronously loads a page from the session history, identified by its relative location to the current page, for example `-1` for the previous page or `1` for the next page. If you specify an out-of-bounds value (for instance, specifying `-1` when there are no previously-visited pages in the session history), this method silently has no effect. Calling `go()` without parameters or a value of `0` reloads the current page. Internet Explorer lets you specify a string, instead of an integer, to go to a specific URL in the history list.
+- {{domxref("History.pushState","pushState()")}}
+ - : Pushes the given data onto the session history stack with the specified title (and, if provided, URL). The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized. Note that all browsers but Safari currently ignore the _title_ parameter. For more information, see [Working with the History API](/es/docs/Web/API/History_API/Working_with_the_History_API).
+- {{domxref("History.replaceState","replaceState()")}}
+ - : Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized. Note that all browsers but Safari currently ignore the _title_ parameter. For more information, see [Working with the History API](/es/docs/Web/API/History_API/Working_with_the_History_API).
+
+## Specifications
+
+| Specification | Status | Comment |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------- |
+| {{SpecName('HTML WHATWG', "browsers.html#the-history-interface", "History")}} | {{Spec2('HTML WHATWG')}} | Adds the `scrollRestoration` attribute. |
+| {{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}} | {{Spec2('HTML5 W3C')}} | Initial definition. |
+
+## Browser compatibility
+
+{{Compat("api.History")}}
+
+## See also
+
+- The {{domxref("Window.history")}} property returning the history of the current session.
diff --git a/files/es/web/api/history/length/index.html b/files/es/web/api/history/length/index.html
deleted file mode 100644
index bd7d55b81f485a..00000000000000
--- a/files/es/web/api/history/length/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: History.length
-slug: Web/API/History/length
-tags:
- - API
- - DOM HTML
- - Historial de navegación
- - History
- - Lectura
- - Navegador
- - Propiedad
- - historial
-translation_of: Web/API/History/length
----
-{{APIRef("History API")}}
-
-La propiedad de sólo lectura History.length 1.
-
-Sintaxis
-
-const length = history.length
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
- {{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}}
- {{Spec2('HTML WHATWG')}}
- Sin cambios desde {{SpecName("HTML5 W3C")}}.
-
-
- {{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}
- {{Spec2('HTML5 W3C')}}
- Definición Inicial.
-
-
-
-
-Compatibilidad de Navegadores
-
-
-
-{{Compat("api.History.length")}}
-
-Mira también
-
-
- La interfaz {{domxref("History")}} a la que pertenece.
-
diff --git a/files/es/web/api/history/length/index.md b/files/es/web/api/history/length/index.md
new file mode 100644
index 00000000000000..941020c51a838f
--- /dev/null
+++ b/files/es/web/api/history/length/index.md
@@ -0,0 +1,38 @@
+---
+title: History.length
+slug: Web/API/History/length
+tags:
+ - API
+ - DOM HTML
+ - Historial de navegación
+ - History
+ - Lectura
+ - Navegador
+ - Propiedad
+ - historial
+translation_of: Web/API/History/length
+---
+{{APIRef("History API")}}
+
+La propiedad de sólo lectura **`History.length`** retorna un entero representando el número de elementos en el historial de la sesión, incluyendo la página cargada actualmente. Por ejemplo, para una página cargada en una nueva pestaña esta propiedad retorna `1`.
+
+## Sintaxis
+
+```
+const length = history.length
+```
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}} | {{Spec2('HTML WHATWG')}} | Sin cambios desde {{SpecName("HTML5 W3C")}}. |
+| {{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}} | {{Spec2('HTML5 W3C')}} | Definición Inicial. |
+
+## Compatibilidad de Navegadores
+
+{{Compat("api.History.length")}}
+
+## Mira también
+
+- La interfaz {{domxref("History")}} a la que pertenece.
diff --git a/files/es/web/api/history/pushstate/index.html b/files/es/web/api/history/pushstate/index.html
deleted file mode 100644
index c92303b59735a7..00000000000000
--- a/files/es/web/api/history/pushstate/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: History.pushState()
-slug: Web/API/History/pushState
-tags:
- - API
- - DOM HTML
- - Historial de navegación
- - History
- - History API
- - Navegador
- - Sesion
- - URL
- - Web
- - historial
- - pushState
-translation_of: Web/API/History/pushState
----
-{{APIRef("History API")}}
-
-En un documento HTML , el método history.pushState()
-
-Sintaxis
-
-history.pushState(state , title, [ url ])
-
-Parámetros
-
-
- stateEl objeto state es un objeto de JavaScript asociado al nuevo registro en el historial creado por pushState(). Cuando el usuario navega al nuevo registro, un evento {{event("popstate")}} es accionado, y la propiedad state del evento contiene una copia del objeto state del registro en el historial.
- El objeto state puede ser cualquier cosa que pueda ser serializada. Porque Firefox guarda los objetos state en el disco del usuario para que así puedan ser restaurados luego de que el usuario reinicia el navegador, se impone un límite de 640k caracteres en la representación serializada de un objeto state. Si pasas un objeto state con una representación serializada más grande que lo mencionado, a pushState(), el método arrojará una excepción. Si necesitas más espacio que el mencionado, es recomendable que uses {{domxref("Window.sessionStorage", "sessionStorage")}} y/o {{domxref("Window.localStorage", "localStorage")}}.
- titleLa mayoría de los navegadores ignoran este parámetro , sin embargo, podrían usarlo en el futuro. Pasar una cadena de texto vacía aquí, debería ser seguro contra futuros cambios en el método. Alternativamente, podrías pasar un título corto por el estado al cual te estás moviendo. Si necesitas que el título sea modificado, puedes usar {{domxref("Document.title", "document.title")}}.url {{optional_inline}}La URL del nuevo registro en el historial, se define en este parámetro. Es importante destacar que el navegador no intentará cargar esta URL luego de una llamada a pushState(), pero podría intentar cargar esta URL luego, por ejemplo, luego de que el usuario reinicie el navegador. La nueva URL no necesita ser absoluta; puede ser relativa a la URL actual. La nueva URL debe tener el mismo {{glossary("origin")}} que la URL actual; de otra manera, pushState() arrojará una excepción. Si este parámetro no es especificado, por defecto se usa la URL del documento actual.
-
-
-Descripción
-
-En cierto sentido, llamar a pushState() es similar a window.location = "#foo", ambos crearán y activarán un nuevo registro en el historial asociado al documento actual. Pero pushState() tiene unas ventajas adicionales:
-
-
- La nueva URL pueded ser cualquier URL con el mismo origen que la URL actual. En contraste, usar {{domxref("window.location")}} te mantiene en el mismo documento únicamente si modificas el hash .
- No tienes que cambiar la URL si no quieres. En contraste, usar window.location = "#foo"; sólo crea un nuevo registro en el historial si el hash actual no es #foo.
- Puedes asociar datos arbitrarios a tu nuevo registro en el historial. Con el truco del hash , necesitas codificar todos los datos relevantes en una corta cadena de texto.
-
-
-Cabe destacar que pushState() nunca hace que el evento {{event("hashchange")}} sea accionado, incluso si la nueva URL difiere de la URL antigua sólo en su hash .
-
-En otros documentos, crea u nelemento con una URI null.
-
-Ejemplos
-
-Esto crea un nuevo registro en el historial del navegador, estableciendo state title url
-
-JavaScript
-
-const state = { 'page_id': 1, 'user_id': 5 }
-const title = ''
-const url = 'hello-world.html'
-
-history.pushState(state, title, url)
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
- {{SpecName('HTML WHATWG', "history.html#dom-history-pushstate", "History.pushState()")}}
- {{Spec2('HTML WHATWG')}}
- Ningún cambio desde {{SpecName("HTML5 W3C")}}.
-
-
- {{SpecName('HTML5 W3C', "history.html#dom-history-pushstate", "History.pushState()")}}
- {{Spec2('HTML5 W3C')}}
- Definición Inicial.
-
-
-
-
-Compatibilidad en Navegadores
-
-
-
-{{Compat("api.History.pushState")}}
-
-Mira también
-
-
diff --git a/files/es/web/api/history/pushstate/index.md b/files/es/web/api/history/pushstate/index.md
new file mode 100644
index 00000000000000..e9e9f9adf0b38b
--- /dev/null
+++ b/files/es/web/api/history/pushstate/index.md
@@ -0,0 +1,80 @@
+---
+title: History.pushState()
+slug: Web/API/History/pushState
+tags:
+ - API
+ - DOM HTML
+ - Historial de navegación
+ - History
+ - History API
+ - Navegador
+ - Sesion
+ - URL
+ - Web
+ - historial
+ - pushState
+translation_of: Web/API/History/pushState
+---
+{{APIRef("History API")}}
+
+En un documento [HTML](/es/docs/Web/HTML), el método **`history.pushState()`** anexa un registro en la sesión de historial del navegador.
+
+## Sintaxis
+
+```
+history.pushState(state, title, [url])
+```
+
+### Parámetros
+
+- `state`
+
+ - : El objeto `state` es un objeto de JavaScript asociado al nuevo registro en el historial creado por `pushState()`. Cuando el usuario navega al nuevo registro, un evento {{event("popstate")}} es accionado, y la propiedad `state` del evento contiene una copia del objeto `state` del registro en el historial.
+
+ El objeto `state` puede ser cualquier cosa que pueda ser serializada. Porque Firefox guarda los objetos `state` en el disco del usuario para que así puedan ser restaurados luego de que el usuario reinicia el navegador, se impone un límite de 640k caracteres en la representación serializada de un objeto `state`. Si pasas un objeto `state` con una representación serializada más grande que lo mencionado, a `pushState()`, el método arrojará una excepción. Si necesitas más espacio que el mencionado, es recomendable que uses {{domxref("Window.sessionStorage", "sessionStorage")}} y/o {{domxref("Window.localStorage", "localStorage")}}.
+
+- `title`
+ - : [La mayoría de los navegadores ignoran este parámetro](https://github.com/whatwg/html/issues/2174), sin embargo, podrían usarlo en el futuro. Pasar una cadena de texto vacía aquí, debería ser seguro contra futuros cambios en el método. Alternativamente, podrías pasar un título corto por el estado al cual te estás moviendo. Si necesitas que el título sea modificado, puedes usar {{domxref("Document.title", "document.title")}}.
+- `url` {{optional_inline}}
+ - : La URL del nuevo registro en el historial, se define en este parámetro. Es importante destacar que el navegador no intentará cargar esta URL luego de una llamada a `pushState()`, pero podría intentar cargar esta URL luego, por ejemplo, luego de que el usuario reinicie el navegador. La nueva URL no necesita ser absoluta; puede ser relativa a la URL actual. La nueva URL debe tener el mismo {{glossary("origin")}} que la URL actual; de otra manera, `pushState()` arrojará una excepción. Si este parámetro no es especificado, por defecto se usa la URL del documento actual.
+
+## Descripción
+
+En cierto sentido, llamar a `pushState()` es similar a `window.location = "#foo"`, ambos crearán y activarán un nuevo registro en el historial asociado al documento actual. Pero `pushState()` tiene unas ventajas adicionales:
+
+- La nueva URL pueded ser cualquier URL con el mismo origen que la URL actual. En contraste, usar {{domxref("window.location")}} te mantiene en el mismo documento únicamente si modificas el _hash_.
+- No tienes que cambiar la URL si no quieres. En contraste, usar `window.location = "#foo";` sólo crea un nuevo registro en el historial si el _hash_ actual no es `#foo`.
+- Puedes asociar datos arbitrarios a tu nuevo registro en el historial. Con el truco del _hash_, necesitas codificar todos los datos relevantes en una corta cadena de texto.
+
+Cabe destacar que `pushState()` nunca hace que el evento {{event("hashchange")}} sea accionado, incluso si la nueva URL difiere de la URL antigua sólo en su _hash_.
+
+En otros documentos, crea u nelemento con una URI `null`.
+
+## Ejemplos
+
+Esto crea un nuevo registro en el historial del navegador, estableciendo `state`, `title`, y `url`.
+
+### JavaScript
+
+```js
+const state = { 'page_id': 1, 'user_id': 5 }
+const title = ''
+const url = 'hello-world.html'
+
+history.pushState(state, title, url)
+```
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "history.html#dom-history-pushstate", "History.pushState()")}} | {{Spec2('HTML WHATWG')}} | Ningún cambio desde {{SpecName("HTML5 W3C")}}. |
+| {{SpecName('HTML5 W3C', "history.html#dom-history-pushstate", "History.pushState()")}} | {{Spec2('HTML5 W3C')}} | Definición Inicial. |
+
+## Compatibilidad en Navegadores
+
+{{Compat("api.History.pushState")}}
+
+## Mira también
+
+- [Trabajando con la API History](/es/docs/Web/API/History_API/Working_with_the_History_API)
diff --git a/files/es/web/api/history_api/index.html b/files/es/web/api/history_api/index.html
deleted file mode 100644
index 7f74cbbb92bb0b..00000000000000
--- a/files/es/web/api/history_api/index.html
+++ /dev/null
@@ -1,171 +0,0 @@
----
-title: Manipulando el historial del navegador
-slug: Web/API/History_API
-tags:
- - HTML5
- - historial
- - para_revisar
-translation_of: Web/API/History_API
-original_slug: DOM/Manipulando_el_historial_del_navegador
----
-El objeto DOM {{ domxref("window") }} proporciona acceso al historial del navegador a través del objeto {{ domxref("window.history", "history") }} . Este da acceso a métodos y propiedades útiles que permiten avanzar y retroceder a través del historial del usuario, así como --a partir de HTML5-- manipular el contenido del historial.
-
-Viajando a través del historial
-
-Retroceder y avanzar a través del historial del usuario utilizando los métodos back(), forward() y go().
-
-Moviéndose hacia adelante y hacia atrás
-
-Para moverte hacia atrás, solo debes hacer:
-
-window.history.back();
-
-
-Esto actuará exactamente como si el usuario hiciera clic en el botón "atrás" en la barra de herramientas del navegador.
-
-De manera similar, puedes moverte hacia adelante (como si el usuario hiciera clic en en el botón "adelante"), de esta forma:
-
-window.history.forward();
-
-
-Moverse a un punto específico del historial
-
-Puedes usar el método go() para cargar una página desde el historial de la sesión, identificada por su poscición relativa a la página actual (Siendo la página actual, por supuesto, relativa al índice 0).
-
-Para moverse atrás una página (equivalente a llamar back()):
-
-window.history.go(-1);
-Para moverse una página hacia adelante, como si se llamara a forward():
-
-window.history.go(1);
-De manera similar, puedes avanzar 2 páginas pasando 2 y así sucesivamente.
-
-Otro uso para go() es el de actualizar la página ya sea pasando 0 como parámetro o ninguno.
-
-// Cada una de las siguientes
-// instrucciones actualiza la página
-window.history.go(0);
-window.history.go();Puedes obtener el número de páginas en la pila del historial consultando el valor de la propiedad length:
-
-var numeroDeEntradas = window.history.length;
-
-
-Nota: Internet Explorer admite el paso de cadenas de URL como parámetro para go(); esto no es estándar y no está implementado en Gecko.
-
-Añadiendo y modificando entradas del historial
-
-{{ gecko_minversion_header("2") }}
-
-HTML5 introduce los métodos history.pushState() y history.replaceState(), los cuales te permiten añadir y modificar entradas del historial, respectivamente. Estos métodos trabajan en conjunto con el evento {{ domxref("window.onpopstate") }}.
-
-Hacer uso de history.pushState() cambia el referer que es utilizado en la cabecera HTTP por los objetos XMLHttpRequest que hayan sido creados luego de cambiar el estado. El referer utilizará la URL del documento cuyo objeto window sea this al momento de la creación del objeto XMLHttpRequest .
-
-Ejemplo
-
-Supongamos que http://mozilla.org/foo.html ejecuta el siguiente JavaScript:
-
-var stateObj = { foo: "bar" };
-history.pushState(stateObj, "page 2", "bar.html");
-
-
-Esto causará que la barra de URL muestre http://mozilla.org/bar.html , pero no provocará que el navegador carge bar.html ni tampoco que verifique si bar.html existe.
-
-Supongamos ahora que el usuario navega hacia http://google.com , y despúes hace clic en Atrás. En este punto, la barra de URL mostrará http://mozilla.org/bar.html , y la página tendrá un evento popstate cuyo state object contiene una copia de stateObj. La página en si se verá como foo.html, aunque la página podria modificar su contenido durante el evento popstate event.
-
-Si hacemos clic en "atrás" nuevamente, la URL cambiará a http://mozilla.org/foo.html , y el documento generará otro evento popstate event, esta vez con un state object nulo. Aquí también, ir atrás no cambia el contenido del documento con respecto al paso anterior, aunque el documento permite actualizar su contenido manualmente después de recibir el evento popstate.
-
-El método pushState()
-
-pushState() toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado) y (opcionalmente) una URL. Vamos a examinar cada uno de estos tres parametros en más detalle:
-
-
-
- object estado — El objeto estado es un objeto JavaScript el cual esta asociado con la nueva entrada al historial creada por pushState(). Cada vez que el usuario navega hacia un nuevo estado, un evento popstate event se dispara, y la propiedad state del evento contiene una copia del historial de entradas del objeto estado.
-
- El objeto estado puede ser cualquier cosa que puedas pasar a JSON.stringify. Dado que Firefox guarda los objetos estado en el disco del usuario para que puedan ser restaurados después de que el usuario reinicie su navegador, se ha impuesto un tamaño límite de 640K caracteres en representación JSON de un objeto estado. Si pasas un objeto estado cuya representación es más larga que esto a pushState(), el método arrojará una excepción. Si necesitas más espacio, se recomienda usar sessionStorage y/o localStorage.
-
-
- título — Firefox actualmente ignora este parámetro, aunque podría usarse en el futuro. Pasar una cadena de caracteres vacia aquí podría asegurar estar a salvo de futuros cambios en este método. Alternativamente podrías pasar un título corto del estado hacia el cual te estás moviendo.
-
-
- URL — La URL de la nueva entrada al historial está dada por este parámetro. Recuerda que el browser no intentará cargar esta URL después de llamar a pushState(), pero podría intentar cargar la URL más tarde, por ejemplo, después de que el usuario reinicie su navegador pushState() arrojará una excepción. Este parámetro es opcional; si no se especifica, se tomará la URL actual del documento.
-
-
-
-En un sentido, llamar pushState() es similar a asignar window.location = "#foo", en tanto que también se va a crear y activar otra entrada al historial asociada con el documento actual pushState() tiene las siguientes ventajas:
-
-
- La nueva URL puede ser cualquier URL en el mismo origen de la actual URL. En contraste, asignar window.location te mantiene en el mismo {{ domxref("document") }} solamente si modificas unicamente el hash.
- No hay por qué cambiar la URL si no se desea. Por el contrario, asignar window.location = "#foo"; solamente crea una nueva entrada en el historial si el hash actual no es #foo.
- Puedes asociar datos arbitrarios con tu nuevo historial de entrada. Con el enfoque hash-based, tu necesitas codificar todos datos relevantes dentro de una cadena de caracteres corta.
- Si title es utilizado por los navegadores, estos datos pueden utilizarse (independientemente de, por ejemplo, el hash).
-
-
-Hay que tener en cuenta que pushState() nunca dispara un evento hashchange, incluso si la nueva URL difiere de la antigua URL únicamente en su hash.
-
-En un documento XUL, crea el elemento XUL específico.
-
-En otros documentos, crea un elemento con un namespace de URI nulo (null).
-
-El método replaceState()
-
-history.replaceState() trabaja exactamente igual a history.pushState() excepto que replaceState() modifica la entrada al historial actual en lugar de crear una nueva.
-
-replaceState() es particularmente útil si deseas actualizar el objeto estado o la URL del la actual entrada al historial en respuesta a alguna acción del usuario.
-
-El evento popstate
-
-Un evento popstate es dirigido a la ventana cada vez que la entrada al historial cambia. Si la entrada al historial es activada y fue creada por un llamado a pushState o afectada por una llamada a replaceState, la propiedad state del evento popstate contiene una copia del historial de entradas del objeto estado.
-
-Ver {{ domxref("window.onpopstate") }} para un ejemplo de uso.
-
-Leyendo el estado actual
-
-Cuando la página carga, debería tener un objeto de estado no nulo. Esto podría ocurrir, por ejemplo, si la página establece un object de estado (usando pushState() o replaceState()) y entonces el usuario reinicia su navegador. Cuando la página carga de nuevo, la página recibirá el evento onload, pero no el evento popstate. Sin embargo, si lees la propiedad history.state, obtendrás el objeto estado que habrías tenido si se hubiera lanzado el evento apopstate.
-
-Puedes leer el estado del historial actual sin tener que esperar un evento popstate usando la propiedad history.state de esta manera:
-
-var currentState = history.state;Ejemplos
-
-Para un ejemplo completo de un sitio AJAX, ver: Ejemplo de navegación AJAX .
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
- {{SpecName('HTML WHATWG', "browsers.html#history", "History")}}
- {{Spec2('HTML WHATWG')}}
- No hay cambios desde {{SpecName("HTML5 W3C")}}.
-
-
- {{SpecName('HTML5 W3C', "browsers.html#history", "History")}}
- {{Spec2('HTML5 W3C')}}
- Definición inicial
-
-
-
-
-Compatibilidad entre navegadores
-
-{{Compat("api.History")}}
-
-Ver también
-
-
- {{ domxref("window.history") }}
- {{ domxref("window.onpopstate") }}
-
diff --git a/files/es/web/api/history_api/index.md b/files/es/web/api/history_api/index.md
new file mode 100644
index 00000000000000..6a217cdb543459
--- /dev/null
+++ b/files/es/web/api/history_api/index.md
@@ -0,0 +1,155 @@
+---
+title: Manipulando el historial del navegador
+slug: Web/API/History_API
+tags:
+ - HTML5
+ - historial
+ - para_revisar
+translation_of: Web/API/History_API
+original_slug: DOM/Manipulando_el_historial_del_navegador
+---
+El objeto DOM {{ domxref("window") }} proporciona acceso al historial del navegador a través del objeto {{ domxref("window.history", "history") }} . Este da acceso a métodos y propiedades útiles que permiten avanzar y retroceder a través del historial del usuario, así como --a partir de HTML5-- manipular el contenido del historial.
+
+## Viajando a través del historial
+
+Retroceder y avanzar a través del historial del usuario utilizando los métodos `back()`, `forward()` y `go()`.
+
+### Moviéndose hacia adelante y hacia atrás
+
+Para moverte hacia atrás, solo debes hacer:
+
+```
+window.history.back();
+```
+
+Esto actuará exactamente como si el usuario hiciera clic en el botón "atrás" en la barra de herramientas del navegador.
+
+De manera similar, puedes moverte hacia adelante (como si el usuario hiciera clic en en el botón "adelante"), de esta forma:
+
+```
+window.history.forward();
+```
+
+### Moverse a un punto específico del historial
+
+Puedes usar el método `go()` para cargar una página desde el historial de la sesión, identificada por su poscición relativa a la página actual (Siendo la página actual, por supuesto, relativa al índice 0).
+
+Para moverse atrás una página (equivalente a llamar `back()`):
+
+```
+window.history.go(-1);
+```
+
+Para moverse una página hacia adelante, como si se llamara a `forward()`:
+
+```
+window.history.go(1);
+```
+
+De manera similar, puedes avanzar 2 páginas pasando 2 y así sucesivamente.
+
+Otro uso para `go()` es el de actualizar la página ya sea pasando `0` como parámetro o ninguno.
+
+```
+// Cada una de las siguientes
+// instrucciones actualiza la página
+window.history.go(0);
+window.history.go();
+```
+
+Puedes obtener el número de páginas en la pila del historial consultando el valor de la propiedad `length`:
+
+```
+var numeroDeEntradas = window.history.length;
+```
+
+> **Nota:** Internet Explorer admite el paso de cadenas de URL como parámetro para `go()`; esto no es estándar y no está implementado en Gecko.
+
+## Añadiendo y modificando entradas del historial
+
+{{ gecko_minversion_header("2") }}
+
+HTML5 introduce los métodos `history.pushState()` y `history.replaceState()`, los cuales te permiten añadir y modificar entradas del historial, respectivamente. Estos métodos trabajan en conjunto con el evento {{ domxref("window.onpopstate") }}.
+
+Hacer uso de `history.pushState()` cambia el referer que es utilizado en la cabecera HTTP por los objetos [XMLHttpRequest](/es/docs/XMLHttpRequest) que hayan sido creados luego de cambiar el estado. El referer utilizará la URL del documento cuyo objeto window sea `this` al momento de la creación del objeto [XMLHttpRequest](/es/docs/XMLHttpRequest).
+
+### Ejemplo
+
+Supongamos que http\://mozilla.org/foo.html ejecuta el siguiente JavaScript:
+
+```
+var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+```
+
+Esto causará que la barra de URL muestre http\://mozilla.org/bar.html, pero no provocará que el navegador carge bar.html ni tampoco que verifique si bar.html existe.
+
+Supongamos ahora que el usuario navega hacia http\://google.com, y despúes hace clic en Atrás. En este punto, la barra de URL mostrará http\://mozilla.org/bar.html, y la página tendrá un evento `popstate` cuyo _state object_ contiene una copia de `stateObj`. La página en si se verá como `foo.html`, aunque la página podria modificar su contenido durante el evento `popstate` event.
+
+Si hacemos clic en "atrás" nuevamente, la URL cambiará a http\://mozilla.org/foo.html, y el documento generará otro evento `popstate` event, esta vez con un state object nulo. Aquí también, ir atrás no cambia el contenido del documento con respecto al paso anterior, aunque el documento permite actualizar su contenido manualmente después de recibir el evento `popstate`.
+
+### El método pushState()
+
+`pushState()` toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado) y (opcionalmente) una URL. Vamos a examinar cada uno de estos tres parametros en más detalle:
+
+- **object estado** — El objeto estado es un objeto JavaScript el cual esta asociado con la nueva entrada al historial creada por `pushState()`. Cada vez que el usuario navega hacia un nuevo estado, un evento `popstate` event se dispara, y la propiedad `state` del evento contiene una copia del historial de entradas del objeto estado.
+
+ El objeto estado puede ser cualquier cosa que puedas pasar a `JSON.stringify`. Dado que Firefox guarda los objetos estado en el disco del usuario para que puedan ser restaurados después de que el usuario reinicie su navegador, se ha impuesto un tamaño límite de 640K caracteres en representación JSON de un objeto estado. Si pasas un objeto estado cuya representación es más larga que esto a `pushState()`, el método arrojará una excepción. Si necesitas más espacio, se recomienda usar `sessionStorage` y/o `localStorage`.
+
+- **título** — Firefox actualmente ignora este parámetro, aunque podría usarse en el futuro. Pasar una cadena de caracteres vacia aquí podría asegurar estar a salvo de futuros cambios en este método. Alternativamente podrías pasar un título corto del estado hacia el cual te estás moviendo.
+- **URL** — La URL de la nueva entrada al historial está dada por este parámetro. Recuerda que el browser no intentará cargar esta URL después de llamar a `pushState()`, pero podría intentar cargar la URL más tarde, por ejemplo, después de que el usuario reinicie su navegador. La nueva URL no necesita ser absoluta; si es relativa, es resuelta relativamente a la actual URL. La nueva URL debe ser del mismo origen que la actual URL. Si no es así, `pushState()` arrojará una excepción. Este parámetro es opcional; si no se especifica, se tomará la URL actual del documento.
+
+En un sentido, llamar `pushState()` es similar a asignar `window.location = "#foo"`, en tanto que también se va a crear y activar otra entrada al historial asociada con el documento actual. Pero `pushState()` tiene las siguientes ventajas:
+
+- La nueva URL puede ser cualquier URL en el mismo origen de la actual URL. En contraste, asignar `window.location` te mantiene en el mismo {{ domxref("document") }} solamente si modificas unicamente el hash.
+- No hay por qué cambiar la URL si no se desea. Por el contrario, asignar ` window.location = "#foo"; solamente crea una nueva entrada en el historial si el hash actual no es ``#foo `.
+- Puedes asociar datos arbitrarios con tu nuevo historial de entrada. Con el enfoque hash-based, tu necesitas codificar todos datos relevantes dentro de una cadena de caracteres corta.
+- Si `title` es utilizado por los navegadores, estos datos pueden utilizarse (independientemente de, por ejemplo, el hash).
+
+Hay que tener en cuenta que `pushState()` nunca dispara un evento `hashchange`, incluso si la nueva URL difiere de la antigua URL únicamente en su hash.
+
+En un documento XUL, crea el elemento XUL específico.
+
+En otros documentos, crea un elemento con un namespace de URI nulo (`null`).
+
+### El método replaceState()
+
+`history.replaceState()` trabaja exactamente igual a `history.pushState()` excepto que `replaceState()` modifica la entrada al historial actual en lugar de crear una nueva.
+
+`replaceState()` es particularmente útil si deseas actualizar el objeto estado o la URL del la actual entrada al historial en respuesta a alguna acción del usuario.
+
+### El evento popstate
+
+Un evento `popstate` es dirigido a la ventana cada vez que la entrada al historial cambia. Si la entrada al historial es activada y fue creada por un llamado a `pushState` o afectada por una llamada a `replaceState`, la propiedad state del evento `popstate` contiene una copia del historial de entradas del objeto estado.
+
+Ver {{ domxref("window.onpopstate") }} para un ejemplo de uso.
+
+### Leyendo el estado actual
+
+Cuando la página carga, debería tener un objeto de estado no nulo. Esto podría ocurrir, por ejemplo, si la página establece un object de estado (usando `pushState()` o `replaceState()`) y entonces el usuario reinicia su navegador. Cuando la página carga de nuevo, la página recibirá el evento onload, pero no el evento popstate. Sin embargo, si lees la propiedad history.state, obtendrás el objeto estado que habrías tenido si se hubiera lanzado el evento apopstate.
+
+Puedes leer el estado del historial actual sin tener que esperar un evento `popstate` usando la propiedad `history.state` de esta manera:
+
+```
+var currentState = history.state;
+```
+
+## Ejemplos
+
+Para un ejemplo completo de un sitio AJAX, ver: [Ejemplo de navegación AJAX](/es/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example).
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', "browsers.html#history", "History")}} | {{Spec2('HTML WHATWG')}} | No hay cambios desde {{SpecName("HTML5 W3C")}}. |
+| {{SpecName('HTML5 W3C', "browsers.html#history", "History")}} | {{Spec2('HTML5 W3C')}} | Definición inicial |
+
+## Compatibilidad entre navegadores
+
+{{Compat("api.History")}}
+
+## Ver también
+
+- {{ domxref("window.history") }}
+- {{ domxref("window.onpopstate") }}
diff --git a/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html b/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html
deleted file mode 100644
index 57db359f91713d..00000000000000
--- a/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: Drag & Drop archivo
-slug: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
-tags:
- - Guía
- - arrastra y suelta
- - drag and drop
- - drop zone
- - zona de arrastre
-translation_of: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
-original_slug: DragDrop/Drag_and_Drop/drag_and_drop_archivo
----
-{{DefaultAPISidebar("HTML Drag and Drop API")}}
-
-Las interfaces Drag-and-Drop posibilitan arrastrar y soltar archivos en una página web. En este documento se describe cómo una aplicación puede aceptar uno, o más, archivos que son arrastrados desde el explorador de archivos de la plataforma y soltados en una página web.
-
-Los pasos principales para configurar Drag-and-drop son: 1) definir una "zona drop (drop zone), es decir, definir un elemento donde se podrá soltar el archivo; y 2) definir funciones para la gestión de los eventos {{event("drop")}} y {{event("dragover")}}. Estos pasos se describen a continuación, tambien se incluyen ejemplos snippets de código. El código fuente completo está disponible en el repositorio drag-and-drop de MDN (cualquier sugerencia o tema que revisar es bienvenido).
-
-Nota: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}} define 2 diferentes APIs para soportar drag and drop de archivos. Una API es la interfaz {{domxref("DataTransfer")}} y la segunda API son las interfaces {{domxref("DataTransferItem")}} y {{domxref("DataTransferItemList")}}. Este ejemplo ilustra el uso de ambas APIs (y no usa ninguna interfaz específica de Gecko).
-
-Define la zona "drop" [drop zone ]
-
-Es necesario configurar un evento {{event("drop")}} en el objeto sobre el cual se soltará el objeto arrastrado. Este evento llamará una función global {{domxref("GlobalEventHandlers.ondrop","ondrop")}} que recibe los datos del objeto arrastrado. El siguiente código muestra cómo se hace con un elemento {{HTMLelement("div")}}:
-
-<div id="drop_zone" ondrop="dropHandler(event);">
- <p>Arrastra y suelta uno o más archivos a esta zona ...</p>
-</div>
-
-Normalmente, una aplicación incluirá una función de gestión de eventos {{event("dragover")}} en el elemento objetivo del arrastre y esa función desactivará el comportamiento de arrastre por defecto del browser. Para añadir esta función necesita incluir una función global {{domxref("GlobalEventHandlers.ondragover","ondragover")}}:
-
-<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
- <p>Arrastra y suelta uno o más archivos a esta zona ...</p>
-</div>
-
-
-Por último, puede que una aplicación quiera personalizar el estilo del elemento objetivo del arrastre para indicar visualmente que es una zona drag and drop. En este ejemplo, el elemento objetivo usa el siguiente estilo:
-
-#drop_zone {
- border: 5px solid blue;
- width: 200px;
- height: 100px;
-}
-
-
-
-
Fíjese que los eventos dragstart y dragend no son activados cuando se arrastra un archivo al browser desde el SO.
-
Procesar la acción de soltar [drop]
-
-El evento {{event("drop")}} se ejecuta cuando el usuario suelta el o los archivos. En el siguiente manejador, si el navegador sorporta la interfaz {{domxref("DataTransferItemList")}} , el método {{domxref("DataTransferItem.getAsFile","getAsFile()")}} se utiliza para acceder cada fichero; de lo contrario la propiedad {{domxref("DataTransfer")}} de la interfaz {{domxref("DataTransfer.files","files")}} es usada para acceder cada archivo.
-
-El ejemplo siguiente muestra como escribir el nombre de cada fichero arrastrado en la consola. En una aplicación real , se querrá procesar un archivo usando {{domxref("File","File API")}}.
-
-Nótese que en este ejemplo, cualquier item arrastrado que no sea un archivo es ignorado.
-
-function dropHandler(ev) {
- console.log('Fichero(s) arrastrados');
-
- // Evitar el comportamiendo por defecto (Evitar que el fichero se abra/ejecute)
- ev.preventDefault();
-
- if (ev.dataTransfer.items) {
- // Usar la interfaz DataTransferItemList para acceder a el/los archivos)
- for (var i = 0; i < ev.dataTransfer.items.length; i++) {
- // Si los elementos arrastrados no son ficheros, rechazarlos
- if (ev.dataTransfer.items[i].kind === 'file') {
- var file = ev.dataTransfer.items[i].getAsFile();
- console.log('... file[' + i + '].name = ' + file.name);
- }
- }
- } else {
- // Usar la interfaz DataTransfer para acceder a el/los archivos
- for (var i = 0; i < ev.dataTransfer.files.length; i++) {
- console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
- }
- }
-
- // Pasar el evento a removeDragData para limpiar
- removeDragData(ev)
-}
-
-Prevenir el comportamiento default de arrastrado en el browser
-
-El siguiente evento {{event("dragover")}} llama a {{domxref("Event.preventDefault","preventDefault()")}} para deshabilitar (turn off) la respuesta estandar drag-and-drop del browser.
-
-function dragOverHandler(ev) {
- console.log('File(s) in drop zone');
-
- // Prevent default behavior (Prevent file from being opened)
- ev.preventDefault();
-}
-
-
-Limpieza (Cleanup)
-
-Typically, an application may want to perform some cleanup by deleting the file drag data. In this example, the drop event is passed along from drop handler to a custom function called removeDragData. If the browser supports the {{domxref("DataTransferItemList")}} interface, the list's {{domxref("DataTransferItemList.clear","clear()")}} method is used to delete the file drag data; otherwise the {{domxref("DataTransfer")}} object's {{domxref("DataTransfer.clearData","clearData()")}} method is used to delete the data.
-
-function removeDragData(ev) {
- console.log('Removing drag data')
-
- if (ev.dataTransfer.items) {
- // Use DataTransferItemList interface to remove the drag data
- ev.dataTransfer.items.clear();
- } else {
- // Use DataTransfer interface to remove the drag data
- ev.dataTransfer.clearData();
- }
-}
-
-
-See also
-
-
diff --git a/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md b/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md
new file mode 100644
index 00000000000000..e9478c1a99679f
--- /dev/null
+++ b/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md
@@ -0,0 +1,122 @@
+---
+title: Drag & Drop archivo
+slug: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+tags:
+ - Guía
+ - arrastra y suelta
+ - drag and drop
+ - drop zone
+ - zona de arrastre
+translation_of: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+original_slug: DragDrop/Drag_and_Drop/drag_and_drop_archivo
+---
+{{DefaultAPISidebar("HTML Drag and Drop API")}}
+
+Las interfaces Drag-and-Drop posibilitan arrastrar y soltar archivos en una página web. En este documento se describe cómo una aplicación puede aceptar uno, o más, archivos que son arrastrados desde el _explorador de archivos_ de la plataforma y soltados en una página web.
+
+Los pasos principales para configurar Drag-and-drop son: 1) definir una "zona drop (_drop zone),_ es decir, definir un elemento donde se podrá soltar el archivo; y 2) definir funciones para la gestión de los eventos {{event("drop")}} y {{event("dragover")}}. Estos pasos se describen a continuación, tambien se incluyen ejemplos snippets de código. El código fuente completo está disponible en el [repositorio drag-and-drop de MDN](https://github.com/mdn/dom-examples/tree/master/drag-and-drop) (cualquier sugerencia o tema que revisar es bienvenido).
+
+> **Nota:** Nota: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}} define 2 diferentes APIs para soportar drag and drop de archivos. Una API es la interfaz {{domxref("DataTransfer")}} y la segunda API son las interfaces {{domxref("DataTransferItem")}} y {{domxref("DataTransferItemList")}}. Este ejemplo ilustra el uso de ambas APIs (y no usa ninguna interfaz específica de Gecko).
+
+## Define la zona "drop" \[drop _zone_]
+
+Es necesario configurar un evento {{event("drop")}} en el objeto sobre el cual se soltará el objeto arrastrado. Este evento llamará una función global {{domxref("GlobalEventHandlers.ondrop","ondrop")}} que recibe los datos del objeto arrastrado. El siguiente código muestra cómo se hace con un elemento {{HTMLelement("div")}}:
+
+```html
+
+
Arrastra y suelta uno o más archivos a esta zona ...
+
+
Arrastra y suelta uno o más archivos a esta zona ...
+
Firefox y otras aplicaciones de Mozilla admiten una serie de características para gestionar la funcionalidad de arrastrar y soltar. Esto le permite al usuario hacer clic y mantener presionado el botón del ratón/mouse sobre un elemento, arrastrarlo a otra ubicación y soltarlo para colocar el elemento allí. Al puntero le seguirá una representación transparente de lo que se está arrastrando durante la operación. La ubicación de destino puede ser una aplicación diferente. Sitios web, extensiones y aplicaciones XUL pueden hacer uso de esta funcionalidad para personalizar los elementos que pueden ser arrastrados, evaluar la operación, así como especificar el lugar donde los elementos se pueden soltar.
- Esta sección trata sobre la funcionalidad de arrastrar y soltar en Firefox 3.5 (Gecko 1.9.1) y versiones posteriores. Consulta la
documentación de la API anterior para Firefox 3.0 y versiones anteriores.
Elementos básicos de arrastrar y soltar
-Cuando comienza una operación de arrastre, se puede proporcionar una serie de datos:
-
- los datos que se van a arrastrar, que pueden ser de varios formatos diferentes. Por ejemplo, datos de texto que contienen una cadena de texto que se va a arrastrar. Para obtener más información al respecto, consulta Datos de la operación de arrastre .
- la imagen de confirmación sobre la operación de arrastre que aparece junto al puntero durante la operación. Esta imagen puede personalizarse, sin embargo, la mayoría de las veces, no se especifica y se genera una imagen por defecto basándose en el elemento donde se ha pulsado el ratón/mouse. Para obtener más información acerca de estas imágenes, consulta Configurar la imagen de confirmación sobre la operación de descarga .
- efectos de arrastre que se permiten. Son posibles tres efectos: copy para indicar que los datos que se arrastran se copiarán desde su ubicación actual a la ubicación de destino, move para indicar que los datos que se arrastran serán movidos y link para indicar que se creará algún tipo de relación o conexión entre la ubicación actual y la ubicación de destino. Durante la operación, se pueden modificar los efectos de arrastre y especificar cuáles en concreto se permiten en determinadas ubicaciones. Si se permite, se puede realizar una operación de colocación en esa ubicación. Consulta Efectos de arrastre para obtener más detalles.
-
-Mozilla y Firefox admiten una serie de características que no se encuentran en el modelo estándar de arrastrar y soltar. Estas te permiten arrastrar elementos múltiples y arrastrar datos que no son cadenas. Para obtener más información, consulta Arrastrar y soltar múltiples elementos .
-Para obtener una lista de tipos de datos comunes utilizados para arrastrar y soltar, consulta Tipos de operaciones de arrastre recomendados .
-Está disponible una referencia rápida para los procedimientos recomendados en la operación de arrastre de los siguientes tipos de elementos:
-
-Consulta DataTransfer para tener una referencia al objeto DataTransfer.
-
-
-Eventos de arrastre
-Se utilizan una serie de eventos que se ejecutan durante las diversas etapas de la operación de arrastre y colocación. Ten en cuenta que se ejecutan sólo los eventos de arrastre, los eventos del ratón/mouse como mousemove no se ejecutan durante una operación de arrastre.
-La propiedad dataTransfer de todos los eventos de arrastre contiene datos sobre la operación de arrastre y colocación.
-
-
-
- dragstart
- Se ejecuta sobre un elemento cuando se inicia una operación de arrastre. El usuario está solicitando arrastrar el elemento al que dispara el evento dragstart. Durante este evento, un proceso de escucha ajustará cierto tipo de información como los datos de la operación de arrastre y la imagen que se asocia con ella. Para obtener más información al respecto, consulta Inicio de una operación de arrastre .
- dragenter
- Se dispara cuando el ratón/mouse se mueve primero sobre un elemento, mientras está teniendo lugar una operación de arrastre. Un proceso de escucha de este evento debe indicar si se permite una operación de arrastre sobre esta ubicación. Si no hay procesos de escucha o éstos no realizan ninguna operación, entonces no se permite, de manera predeterminada, una operación de arrastre. Este es también el evento al que escuchar si deseas proporcionar información acerca de que se permite una operación de arrastre, como, por ejemplo, mostrar un resaltado o un marcador de inserción. Para obtener más información al respecto, consulta Especificación de destinos de colocación .
- dragover
- Este evento se activa cuando el ratón/mouse se mueve sobre un elemento cuando está teniendo lugar una operación de arrastre. Gran parte del tiempo, la operación que tiene lugar durante un proceso de escucha será la misma que el evento dragenter. Para obtener más información al respecto, consulta Especificación de destinos de colocación .
- dragleave
- Este evento se activa cuando el ratón/mouse sale de un elemento mientras que está teniendo lugar una operación de arrastre. Los procesos de escucha deben eliminar cualquier resaltado o marcador de inserción que usan para la información sobre el proceso de arrastre.
- drag
- Este evento se activa en el origen del arrastre, es decir, el elemento donde dragstart fue disparado, durante la operación de arrastre.
- drop
- El evento se dispara sobre el elemento en el que se produjo la colocación al finalizar la operación de arrastre. Un proceso de escucha se encargará de recuperar los datos que se arrastran e insertarlos en la ubicación de la colocación. Este evento sólo se activará si se desea disponer de la funcionalidad de soltar. No se activará si el usuario cancela la operación de arrastre, por ejemplo, pulsando la tecla Escape, o si se liberó el botón del ratón/mouse mientras que éste no estaba sobre un destino de colocación válido. Para más información sobre esto, consulta Realizar una operación de colocación .
- dragend
- El origen del arrastre recibirá un evento dragend cuando la operación se haya completado, tanto si tuvo éxito como si no. Consulta Finalizar una operación de arrastre si deseas más información.
-
diff --git a/files/es/web/api/html_drag_and_drop_api/index.md b/files/es/web/api/html_drag_and_drop_api/index.md
new file mode 100644
index 00000000000000..fad3dd31dcec61
--- /dev/null
+++ b/files/es/web/api/html_drag_and_drop_api/index.md
@@ -0,0 +1,56 @@
+---
+title: Arrastrar y soltar
+slug: Web/API/HTML_Drag_and_Drop_API
+tags:
+ - HTML5
+ - XUL
+translation_of: Web/API/HTML_Drag_and_Drop_API
+original_slug: DragDrop/Drag_and_Drop
+---
+Firefox y otras aplicaciones de Mozilla admiten una serie de características para gestionar la funcionalidad de arrastrar y soltar. Esto le permite al usuario hacer clic y mantener presionado el botón del ratón/mouse sobre un elemento, arrastrarlo a otra ubicación y soltarlo para colocar el elemento allí. Al puntero le seguirá una representación transparente de lo que se está arrastrando durante la operación. La ubicación de destino puede ser una aplicación diferente. Sitios web, extensiones y aplicaciones XUL pueden hacer uso de esta funcionalidad para personalizar los elementos que pueden ser arrastrados, evaluar la operación, así como especificar el lugar donde los elementos se pueden soltar.
+
+> **Nota:** Esta sección trata sobre la funcionalidad de arrastrar y soltar en Firefox 3.5 (Gecko 1.9.1) y versiones posteriores. Consulta la [documentación de la API anterior](/es/docs/Drag_and_Drop) para Firefox 3.0 y versiones anteriores.
+
+## Elementos básicos de arrastrar y soltar
+
+Cuando comienza una operación de arrastre, se puede proporcionar una serie de datos:
+
+- los datos que se van a arrastrar, que pueden ser de varios formatos diferentes. Por ejemplo, datos de texto que contienen una cadena de texto que se va a arrastrar. Para obtener más información al respecto, consulta [Datos de la operación de arrastre](/es/docs/DragDrop/Drag_Operations#dragdata) .
+- la imagen de confirmación sobre la operación de arrastre que aparece junto al puntero durante la operación. Esta imagen puede personalizarse, sin embargo, la mayoría de las veces, no se especifica y se genera una imagen por defecto basándose en el elemento donde se ha pulsado el ratón/mouse. Para obtener más información acerca de estas imágenes, consulta [Configurar la imagen de confirmación sobre la operación de descarga](/es/docs/DragDrop/Drag_Operations#dragfeedback) .
+- efectos de arrastre que se permiten. Son posibles tres efectos: `copy` para indicar que los datos que se arrastran se copiarán desde su ubicación actual a la ubicación de destino, `move` para indicar que los datos que se arrastran serán movidos y `link` para indicar que se creará algún tipo de relación o conexión entre la ubicación actual y la ubicación de destino. Durante la operación, se pueden modificar los efectos de arrastre y especificar cuáles en concreto se permiten en determinadas ubicaciones. Si se permite, se puede realizar una operación de colocación en esa ubicación. Consulta [Efectos de arrastre](/es/docs/DragDrop/Drag_Operations#drageffects) para obtener más detalles.
+
+Mozilla y Firefox admiten una serie de características que no se encuentran en el modelo estándar de arrastrar y soltar. Estas te permiten arrastrar elementos múltiples y arrastrar datos que no son cadenas. Para obtener más información, consulta [Arrastrar y soltar múltiples elementos](/es/docs/DragDrop/Dragging_and_Dropping_Multiple_Items) .
+
+Para obtener una lista de tipos de datos comunes utilizados para arrastrar y soltar, consulta [Tipos de operaciones de arrastre recomendados](/es/docs/DragDrop/Recommended_Drag_Types).
+
+Está disponible una referencia rápida para los procedimientos recomendados en la operación de arrastre de los siguientes tipos de elementos:
+
+- [Texto](/es/docs/DragDrop/Recommended_Drag_Types#text)
+- [Enlaces](/es/docs/DragDrop/Recommended_Drag_Types#link)
+- [HTML y XML](/es/docs/DragDrop/Recommended_Drag_Types#html)
+- [Archivos](/es/docs/DragDrop/Recommended_Drag_Types#file)
+- [Imágenes](/es/docs/DragDrop/Recommended_Drag_Types#image)
+- [Nodos de documento](/es/docs/DragDrop/Recommended_Drag_Types#node)
+
+Consulta [DataTransfer](/es/docs/DragDrop/DataTransfer) para tener una referencia al objeto DataTransfer.
+
+## Eventos de arrastre
+
+Se utilizan una serie de eventos que se ejecutan durante las diversas etapas de la operación de arrastre y colocación. Ten en cuenta que se ejecutan sólo los eventos de arrastre, los eventos del ratón/mouse como `mousemove` no se ejecutan durante una operación de arrastre.
+
+La propiedad [dataTransfer](/es/docs/DragDrop/DataTransfer) de todos los eventos de arrastre contiene datos sobre la operación de arrastre y colocación.
+
+- dragstart
+ - : Se ejecuta sobre un elemento cuando se inicia una operación de arrastre. El usuario está solicitando arrastrar el elemento al que dispara el evento dragstart. Durante este evento, un proceso de escucha ajustará cierto tipo de información como los datos de la operación de arrastre y la imagen que se asocia con ella. Para obtener más información al respecto, consulta [Inicio de una operación de arrastre](/es/docs/DragDrop/Drag_Operations#dragstart) .
+- dragenter
+ - : Se dispara cuando el ratón/mouse se mueve primero sobre un elemento, mientras está teniendo lugar una operación de arrastre. Un proceso de escucha de este evento debe indicar si se permite una operación de arrastre sobre esta ubicación. Si no hay procesos de escucha o éstos no realizan ninguna operación, entonces no se permite, de manera predeterminada, una operación de arrastre. Este es también el evento al que escuchar si deseas proporcionar información acerca de que se permite una operación de arrastre, como, por ejemplo, mostrar un resaltado o un marcador de inserción. Para obtener más información al respecto, consulta [Especificación de destinos de colocación](/es/docs/DragDrop/Drag_Operations#droptargets) .
+- dragover
+ - : Este evento se activa cuando el ratón/mouse se mueve sobre un elemento cuando está teniendo lugar una operación de arrastre. Gran parte del tiempo, la operación que tiene lugar durante un proceso de escucha será la misma que el evento dragenter. Para obtener más información al respecto, consulta [Especificación de destinos de colocación](/es/docs/DragDrop/Drag_Operations#droptargets).
+- dragleave
+ - : Este evento se activa cuando el ratón/mouse sale de un elemento mientras que está teniendo lugar una operación de arrastre. Los procesos de escucha deben eliminar cualquier resaltado o marcador de inserción que usan para la información sobre el proceso de arrastre.
+- drag
+ - : Este evento se activa en el origen del arrastre, es decir, el elemento donde dragstart fue disparado, durante la operación de arrastre.
+- drop
+ - : El evento se dispara sobre el elemento en el que se produjo la colocación al finalizar la operación de arrastre. Un proceso de escucha se encargará de recuperar los datos que se arrastran e insertarlos en la ubicación de la colocación. Este evento sólo se activará si se desea disponer de la funcionalidad de soltar. No se activará si el usuario cancela la operación de arrastre, por ejemplo, pulsando la tecla Escape, o si se liberó el botón del ratón/mouse mientras que éste no estaba sobre un destino de colocación válido. Para más información sobre esto, consulta [Realizar una operación de colocación](/es/docs/DragDrop/Drag_Operations#drop).
+- dragend
+ - : El origen del arrastre recibirá un evento dragend cuando la operación se haya completado, tanto si tuvo éxito como si no. Consulta [Finalizar una operación de arrastre](/es/docs/DragDrop/Drag_Operations#dragend) si deseas más información.
diff --git a/files/es/web/api/htmlanchorelement/index.html b/files/es/web/api/htmlanchorelement/index.html
deleted file mode 100644
index 932eac5d6afd8a..00000000000000
--- a/files/es/web/api/htmlanchorelement/index.html
+++ /dev/null
@@ -1,170 +0,0 @@
----
-title: HTMLAnchorElement
-slug: Web/API/HTMLAnchorElement
-tags:
- - API
- - HTML DOM
- - Interfaz
- - Referencia
-translation_of: Web/API/HTMLAnchorElement
----
-{{APIRef ("HTML DOM")}}HTMLAnchorElement representa elementos de hipervínculo y proporciona propiedades y métodos especiales (más allá de los de la interfaz de objeto {{domxref ("HTMLElement")}} regular de la que heredan) para manipular el diseño y la presentación de dichos elementos.
-
-Propiedades
-
-{{InheritanceDiagram(600, 120)}}
-
-Hereda propiedades de su elemento primario, {{domxref ("HTMLElement")}}, y las implementa desde {{domxref ("HTMLHyperlinkElementUtils")}}.
-
-{{domxref ("HTMLAnchorElement.accessKey")}}
-
-
-
-
-
-
-
-
- {{domxref ("HTMLAnchorElement.download")}} {{experimental_inline}}
-
- {{domxref ("HTMLHyperlinkElementUtils.href")}}
-
- {{domxref ("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}
-
-
-Metodos
-
-Hereda los métodos de su padre, {{domxref ("HTMLElement")}}, y los implementa desde {{domxref ("HTMLHyperlinkElementUtils")}}.
-
-{{domxref ("HTMLElement.blur ()")}}
-
-
-
-
-
-Especificaciones
-
-
-
-
- Epecificacion
- Estado
- Commentario
-
-
- {{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}
- {{Spec2('Referrer Policy')}}
- Se agregó la propiedad de referencia.
-
-
- {{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}
- {{Spec2('HTML WHATWG')}}
- Se agregó el refe. Se agregó la siguiente propiedad: descargar.
-
-
- {{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}
- {{Spec2('HTML5 W3C')}}
- Los métodos blur () y focus (), así como las propiedades tabindex y accessKey, ahora están definidos en {{domxref ("HTMLElement")}}.
-
-
- {{SpecName('DOM2 HTML', 'html.html#ID-48250443', 'HTMLAnchorElement')}}
- {{Spec2('DOM2 HTML')}}
- Sin cambios desde {{SpecName ("DOM1")}}.
-
-
- {{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}}
- {{Spec2('DOM1')}}
- definicion Inicial .
-
-
-
-
-Browser compatibility
-
-{{Compat("api.HTMLAnchorElement")}}
-
-Ver tambien
-
-
- El elemento HTML que implementa esta interfaz: {{HTMLElement ("a")}}
-
diff --git a/files/es/web/api/htmlanchorelement/index.md b/files/es/web/api/htmlanchorelement/index.md
new file mode 100644
index 00000000000000..9cc4874c108c5f
--- /dev/null
+++ b/files/es/web/api/htmlanchorelement/index.md
@@ -0,0 +1,104 @@
+---
+title: HTMLAnchorElement
+slug: Web/API/HTMLAnchorElement
+tags:
+ - API
+ - HTML DOM
+ - Interfaz
+ - Referencia
+translation_of: Web/API/HTMLAnchorElement
+---
+{{APIRef ("HTML DOM")}}
+La interfaz **HTMLAnchorElement** representa elementos de hipervínculo y proporciona propiedades y métodos especiales (más allá de los de la interfaz de objeto {{domxref ("HTMLElement")}} regular de la que heredan) para manipular el diseño y la presentación de dichos elementos.
+
+## Propiedades
+
+{{InheritanceDiagram(600, 120)}}
+
+Hereda propiedades de su elemento primario, {{domxref ("HTMLElement")}}, y las implementa desde {{domxref ("HTMLHyperlinkElementUtils")}}.
+
+- {{domxref ("HTMLAnchorElement.accessKey")}}
+ - : Es un {{domxref ("DOMString")}} que representa un solo carácter que cambia el foco de entrada al hipervínculo.
+- {{domxref ("HTMLAnchorElement.charset")}} {{obsolete_inline}}
+ - : Es un {{domxref ("DOMString")}} que representa la codificación de caracteres del recurso vinculado.
+- {{domxref ("HTMLAnchorElement.coords")}} {{obsolete_inline}}
+ - : Es un {{domxref ("DOMString")}} que representa una lista de coordenadas separadas por comas.
+- {{domxref ("HTMLAnchorElement.download")}} {{experimental_inline}}
+ - : Es un {{domxref ("DOMString")}} que indica que el recurso vinculado está destinado a descargarse en lugar de mostrarse en el navegador. El valor representa el nombre propuesto del archivo. Si el nombre no es un nombre de archivo válido del sistema operativo subyacente, el navegador lo adaptará.
+- {{domxref ("HTMLHyperlinkElementUtils.hash")}}
+ - : Es un {{domxref ("USVString")}} que representa el identificador de fragmento, incluida la marca hash inicial ('#'), si la hay, en la URL a la que se hace referencia.
+- {{domxref ("HTMLHyperlinkElementUtils.host")}}
+ - : Es un {{domxref ("USVString")}} que representa el nombre de host y el puerto (si no es el puerto predeterminado) en la URL a la que se hace referencia.
+- {{domxref ("HTMLHyperlinkElementUtils.hostname")}}
+ - : Es un {{domxref ("USVString")}} que representa el nombre de host en la URL referenciada.
+- {{domxref ("HTMLHyperlinkElementUtils.href")}}
+ - : Es un {{domxref ("USVString")}} que refleja el atributo HTML {{htmlattrxref ("href", "a")}}, que contiene una URL válida de un recurso vinculado.
+- {{domxref ("HTMLAnchorElement.hreflang")}}
+ - : Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("hreflang", "a")}}, que indica el idioma del recurso vinculado.
+- {{domxref ("HTMLAnchorElement.media")}}
+ - : Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("media", "a")}}, que indica los medios previstos para el recurso vinculado.
+- {{domxref ("HTMLAnchorElement.name")}} {{obsolete_inline}}
+ - : Es un {{domxref ("DOMString")}} que representa el nombre del ancla.
+- {{domxref ("HTMLHyperlinkElementUtils.password")}}
+ - : Es un {{domxref ("USVString")}} que contiene la contraseña especificada antes del nombre de dominio.
+- {{domxref ("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}
+ - : Devuelve un {{domxref ("USVString")}} que contiene el origen de la URL, que es su esquema, su dominio y su puerto.
+- {{domxref ("HTMLHyperlinkElementUtils.pathname")}}
+ - : Es un {{domxref ("USVString")}} que representa el componente del nombre de ruta, si lo hay, de la URL referenciada.
+- {{domxref ("HTMLHyperlinkElementUtils.port")}}
+ - : Es un {{domxref ("USVString")}} que representa el componente de puerto, si lo hay, de la URL a la que se hace referencia.
+- {{domxref ("HTMLHyperlinkElementUtils.protocol")}}
+ - : Es un {{domxref ("USVString")}} que representa el componente de protocolo, incluidos los puntos finales (':'), de la URL a la que se hace referencia.
+- {{domxref ("HTMLAnchorElement.referrerPolicy")}} {{experimental_inline}}
+ - : Es un {{domxref ("DOMString")}} que refleja el atributo {{htmlattrxref ("referrerpolicy", "a")}} HTML que indica qué referencia usar.
+- {{domxref ("HTMLAnchorElement.rel")}}
+ - : Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("rel", "a")}}, que especifica la relación del objeto de destino con el objeto vinculado.
+- {{domxref ("HTMLAnchorElement.relList")}} {{readonlyInline}}
+ - : Devuelve un {{domxref ("DOMTokenList")}} que refleja el atributo HTML {{htmlattrxref ("rel", "a")}}, como una lista de tokens.
+- {{domxref ("HTMLAnchorElement.rev")}} {{obsolete_inline}}
+ - : Es un {{domxref ("DOMString")}} que representa el atributo HTML {{htmlattrxref ("rev", "a")}}, que especifica la relación del objeto de enlace con el objeto de destino.
+- {{domxref ("HTMLHyperlinkElementUtils.search")}}
+ - : Es un {{domxref ("USVString")}} que representa el elemento de búsqueda, incluido el signo de interrogación principal ('?'), Si lo hay, de la URL a la que se hace referencia.
+- {{domxref ("HTMLAnchorElement.shape")}} {{obsolete_inline}}
+ - : Es un {{domxref ("DOMString")}} que representa la forma del área activa.
+- {{domxref ("HTMLAnchorElement.tabindex")}}
+ - : Es un largo que contiene la posición del elemento en el orden de navegación de tabulación para el documento actual.
+- {{domxref ("HTMLAnchorElement.target")}}
+ - : Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("target", "a")}}, que indica dónde mostrar el recurso vinculado.
+- {{domxref ("HTMLAnchorElement.text")}}
+ - : Es un {{domxref ("DOMString")}} un sinónimo de la propiedad {{domxref ("Node.textContent")}}.
+- {{domxref ("HTMLAnchorElement.type")}}
+ - : Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("type", "a")}}, que indica el tipo MIME del recurso vinculado.
+- {{domxref ("HTMLHyperlinkElementUtils.nombre de usuario")}}
+ - : Es un {{domxref ("USVString")}} que contiene el nombre de usuario especificado antes del nombre de dominio.
+
+## Metodos
+
+Hereda los métodos de su padre, {{domxref ("HTMLElement")}}, y los implementa desde {{domxref ("HTMLHyperlinkElementUtils")}}.
+
+- {{domxref ("HTMLElement.blur ()")}}
+ - : Elimina el foco del teclado del elemento actual.
+- {{domxref ("HTMLElement.focus ()")}}
+ - : Da el foco del teclado al elemento actual.
+- {{domxref ("HTMLHyperlinkElementUtils.toString ()")}}
+ - : Devuelve un {{domxref ("USVString")}} que contiene la URL completa. Es un sinónimo de {{domxref ("URLUtils.href")}}, aunque no se puede usar para modificar el valor.
+
+Los métodos blur () y focus () se heredan de {{domxref ("HTMLElement")}} de HTML5 on, pero se definieron en HTMLAnchorElement en DOM Level 2 HTML y especificaciones anteriores.
+
+## Especificaciones
+
+| Epecificacion | Estado | Commentario |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}} | {{Spec2('Referrer Policy')}} | Se agregó la propiedad de referencia. |
+| {{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}} | {{Spec2('HTML WHATWG')}} | Se agregó el refe. Se agregó la siguiente propiedad: descargar. Técnicamente, las propiedades relacionadas con URL, medios, host, nombre de host, ruta, puerto, protocolo, búsqueda y hash, se han movido a la interfaz {{domxref ("URLUtils")}}, y HTMLAreaElement implementa esta propiedad de interface. |
+| {{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}} | {{Spec2('HTML5 W3C')}} | Los métodos blur () y focus (), así como las propiedades tabindex y accessKey, ahora están definidos en {{domxref ("HTMLElement")}}. Las siguientes propiedades ahora están obsoletas: charset, coords, name, rev y shape. Se han agregado las siguientes propiedades: hash, host, nombre de host, medios, ruta, puerto, protocolo, relList, búsqueda y texto. |
+| {{SpecName('DOM2 HTML', 'html.html#ID-48250443', 'HTMLAnchorElement')}} | {{Spec2('DOM2 HTML')}} | Sin cambios desde {{SpecName ("DOM1")}}. |
+| {{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}} | {{Spec2('DOM1')}} | definicion Inicial . |
+
+## Browser compatibility
+
+{{Compat("api.HTMLAnchorElement")}}
+
+## Ver tambien
+
+- El elemento HTML que implementa esta interfaz: {{HTMLElement ("a")}}
diff --git a/files/es/web/api/htmlaudioelement/index.html b/files/es/web/api/htmlaudioelement/index.html
deleted file mode 100644
index f055c691cfb668..00000000000000
--- a/files/es/web/api/htmlaudioelement/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: HTMLAudioElement
-slug: Web/API/HTMLAudioElement
-tags:
- - DOM
- - HTML
- - Media
- - para_revisar
-translation_of: Web/API/HTMLAudioElement
----
-
-
{{APIRef("HTML DOM")}}
-
La interfaz HTMLAudioElement proporciona acceso a las propiedades de los elementos {{ HTMLElement("audio") }}, así como métodos para manipularlos. Se deriva de la interfaz HTMLMediaElementnsIDOMHTMLMediaElement.
-
-Para obtener más detalles sobre cómo usar las caracterísitcas de transmisión de sonido que expone esta interfaz, por favor consulta Introducción a la extensión de la API de sonido .
-
-Propiedades
-
-
-
-
- Nombre
- Tipo
- Descripción
-
-
- mozCurrentSampleOffset {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}unsigned long long Indica el desplazamiento actual de la transmisión de sonido que fue creada por una llamada a mozWriteAudio(). Esta posición de desplazamiento se especifica como el número de muestras desde que se inició la transmisión.
-
-
-
-
-Métodos
-
-
-
-
- Nombre y argumentos
- Retorno
- Descripción
-
-
- Audio()HTMLAudioElementConstructor para elementos de audio. La propiedad preload del objeto devuelto se establece en auto.
-
-
- Audio(en DOMString src)HTMLAudioElement
- Constructor para elementos de audio. La propiedad preload del objeto devuelto se establece a auto; la propiedad src se establece al valor del argumento . El navegador comienza una selección asíncrona del recurso antes de que devuelva el objeto.
-
-
-
- mozSetup(in PRUint32 channels, in PRUint32 rate) {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}
-
- -
- Configura la transmisión de sonido para escritura. Especificas como parámetros el número de canales (1 para mono o 2 para estéreo), a continuación la frecuencia de muestreo ((44100 for 44.1kHz, por ejemplo).
-
-
- mozWriteAudio(in jsval data) {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}unsigned longInserta en la transmisión la escritura de sonido en la posición de desplazamiento actual . Devuelve el número de bytes que se han escrito en la transmisión.
-
-
-
-
-Consulta también
-
-
-
-{{ languages( { "en": "en/DOM/HTMLAudioElement" } ) }}
diff --git a/files/es/web/api/htmlaudioelement/index.md b/files/es/web/api/htmlaudioelement/index.md
new file mode 100644
index 00000000000000..465687d2b3fd5c
--- /dev/null
+++ b/files/es/web/api/htmlaudioelement/index.md
@@ -0,0 +1,35 @@
+---
+title: HTMLAudioElement
+slug: Web/API/HTMLAudioElement
+tags:
+ - DOM
+ - HTML
+ - Media
+ - para_revisar
+translation_of: Web/API/HTMLAudioElement
+---
+{{APIRef("HTML DOM")}}
+
+La interfaz `HTMLAudioElement` proporciona acceso a las propiedades de los elementos {{ HTMLElement("audio") }}, así como métodos para manipularlos. Se deriva de la interfaz [`HTMLMediaElement`](/en/DOM/HTMLMediaElement); se implementa por medio de `nsIDOMHTMLMediaElement`.
+
+Para obtener más detalles sobre cómo usar las caracterísitcas de transmisión de sonido que expone esta interfaz, por favor consulta [Introducción a la extensión de la API de sonido](/en/Introducing_the_Audio_API_Extension).
+
+## Propiedades
+
+| Nombre | Tipo | Descripción |
+| -------------------------------------------------------------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `mozCurrentSampleOffset` {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }} | unsigned long long | Indica el desplazamiento actual de la transmisión de sonido que fue creada por una llamada a `mozWriteAudio()`. Esta posición de desplazamiento se especifica como el número de muestras desde que se inició la transmisión. |
+
+## Métodos
+
+| Nombre y argumentos | Retorno | Descripción |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Audio()` | `HTMLAudioElement` | Constructor para elementos de audio. La propiedad **preload** del objeto devuelto se establece en `auto`. |
+| `Audio(en DOMString src)` | HTMLAudioElement | Constructor para elementos de audio. La propiedad **preload** del objeto devuelto se establece a `auto`; la propiedad **src** se establece al valor del argumento . El navegador comienza una selección asíncrona del recurso antes de que devuelva el objeto. |
+| `mozSetup(in PRUint32 channels, in PRUint32 rate)`{{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }} | - | Configura la transmisión de sonido para escritura. Especificas como parámetros el número de canales (1 para mono o 2 para estéreo), a continuación la frecuencia de muestreo ((44100 for 44.1kHz, por ejemplo). |
+| `mozWriteAudio(in jsval data)` {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }} | `unsigned long` | Inserta en la transmisión la escritura de sonido en la posición de desplazamiento actual . Devuelve el número de bytes que se han escrito en la transmisión. |
+
+## Consulta también
+
+- [Introducción a la extensión de la API de sonido](/en/Introducing_the_Audio_API_Extension)
+- {{ HTMLElement("audio") }}
diff --git a/files/es/web/api/htmlcanvaselement/getcontext/index.html b/files/es/web/api/htmlcanvaselement/getcontext/index.html
deleted file mode 100644
index f08c82c17b57b4..00000000000000
--- a/files/es/web/api/htmlcanvaselement/getcontext/index.html
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: HTMLCanvasElement.getContext()
-slug: Web/API/HTMLCanvasElement/getContext
-translation_of: Web/API/HTMLCanvasElement/getContext
----
-{{APIRef("Canvas API")}}
-
-El método HTMLCanvasElement.getContext()
-
-Sintaxis
-
-canvas .getContext(contextType, contextAttributes );Parámetros
-
-
- contextType
- Es una {{domxref("DOMString")}} que contiene el identificador del contexto que define el contexto de dibujo asociado a el lienzo. Los posibles valores son:
-
- "2d", dando lugar a la creación de un objeto {{domxref("CanvasRenderingContext2D")}} que representa un contexto de renderizado de dos dimensiones."webgl" (o "experimental-webgl") el cual creará un objeto {{domxref("WebGLRenderingContext")}} que representa un contexto de renderizado de tres dimensiones. Este contexto sólo está disponible en navegadores que implementan WebGL version 1 (OpenGL ES 2.0)."webgl2" (o "experimental-webgl2") el cual creará un objeto {{domxref("WebGL2RenderingContext")}} que representa un contexto de renderizado de tres dimensiones. Este contexto sólo está disponible en navegadores que implementan WebGL version 2 (OpenGL ES 3.0). {{experimental_inline}}
- "bitmaprenderer" el cuál creará un {{domxref("ImageBitmapRenderingContext")}} que únicamente provee funcionalidad para remplazar el contenido del lienzo con un {{domxref("ImageBitmap")}} dado.
-
- Nota: Los identificadores "experimental-webgl" o "experimental-webgl2" son usados en nuevas implementaciones de WebGL. Estas implementaciones no han logrado aprobar el conjunto de pruebas de conformidad o la situación de los controladores gráficos en la plataforma no es estable aun. Khronos Group certifica las implementaciones de WebGL bajo ciertas reglas de conformidad .
-
- contextAttributes
- Puedes usar varios atributos al momento de crear tu contexto de renderizado. Por ejemplo:
-
- canvas.getContext('webgl',
- { antialias: false,
- depth: false });
- Atributos del contexto 2d:
-
-
- alpha{{non-standard_inline}} (Gecko únicamente) willReadFrequentlygfx.canvas.willReadFrequently.enable es verdadero(lo cual solo está asignado por defecto en B2G/Firefox OS).
- {{non-standard_inline}} (Blink únicamente) storage
-
- Atributos del contexto WebGL:
-
-
-
-
-
-Valor de retorno
-
-Un {{domxref("RenderingContext")}} que puede ser:
-
-
- {{domxref("CanvasRenderingContext2D")}} para "2d",
- {{domxref("WebGLRenderingContext")}} para"webgl" y "experimental-webgl",
- {{domxref("WebGL2RenderingContext")}} para "webgl2" y "experimental-webgl2", o
- {{domxref("ImageBitmapRenderingContext")}} para "bitmaprenderer".
-
-
-Si contextType no corresponde con un posible contexto de dibujo retorna null.
-
-Ejemplos
-
-Dado este elemento {{HTMLElement("canvas")}}:
-
-<canvas id="canvas" width="300" height="300"></canvas>
-
-
-Puedes obtener un contexto 2d del canvas con el código siguiente:
-
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-console.log(ctx); // CanvasRenderingContext2D { ... }
-
-
-Ahora tienes el contexto de renderizado 2D para un canvas y puedes dibujar en él.
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
- {{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}
- {{Spec2('HTML WHATWG')}}
- Sin cambios desde el último snapshot, {{SpecName('HTML5 W3C')}}
-
-
- {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}
- {{Spec2('HTML5.1')}}
-
-
-
- {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}
- {{Spec2('HTML5 W3C')}}
- Snapshot del {{SpecName('HTML WHATWG')}} que contiene la definición inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-{{Compat("api.HTMLCanvasElement.getContext")}}
-
-See also
-
-
- The interface defining it, {{domxref("HTMLCanvasElement")}}.
- {{domxref("OffscreenCanvas.getContext()")}}
- Available rendering contexts: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} and {{domxref("WebGL2RenderingContext")}} and {{domxref("ImageBitmapRenderingContext")}}.
-
diff --git a/files/es/web/api/htmlcanvaselement/getcontext/index.md b/files/es/web/api/htmlcanvaselement/getcontext/index.md
new file mode 100644
index 00000000000000..dcecc04cf5a05e
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/getcontext/index.md
@@ -0,0 +1,100 @@
+---
+title: HTMLCanvasElement.getContext()
+slug: Web/API/HTMLCanvasElement/getContext
+translation_of: Web/API/HTMLCanvasElement/getContext
+---
+{{APIRef("Canvas API")}}
+
+El método **`HTMLCanvasElement.getContext()`** retorna un contexto de dibujo en el lienzo, o {{jsxref("null")}} si el identificador del contexto no está soportado.
+
+## Sintaxis
+
+```
+canvas.getContext(contextType, contextAttributes);
+```
+
+### Parámetros
+
+- contextType
+
+ - : Es una {{domxref("DOMString")}} que contiene el identificador del contexto que define el contexto de dibujo asociado a el lienzo. Los posibles valores son:
+
+ - `"2d`", dando lugar a la creación de un objeto {{domxref("CanvasRenderingContext2D")}} que representa un contexto de renderizado de dos dimensiones.
+ - `"webgl"` (o `"experimental-webgl"`) el cual creará un objeto {{domxref("WebGLRenderingContext")}} que representa un contexto de renderizado de tres dimensiones. Este contexto sólo está disponible en navegadores que implementan [WebGL](/es/docs/Web/WebGL) version 1 (OpenGL ES 2.0).
+ - "`webgl2`" (o "`experimental-webgl2`") el cual creará un objeto {{domxref("WebGL2RenderingContext")}} que representa un contexto de renderizado de tres dimensiones. Este contexto sólo está disponible en navegadores que implementan [WebGL](/es/docs/Web/WebGL) version 2 (OpenGL ES 3.0). {{experimental_inline}}
+ - `"bitmaprenderer"` el cuál creará un {{domxref("ImageBitmapRenderingContext")}} que únicamente provee funcionalidad para remplazar el contenido del lienzo con un {{domxref("ImageBitmap")}} dado.
+
+ Nota: Los identificadores "`experimental-webgl`" o "`experimental-webgl2`" son usados en nuevas implementaciones de WebGL. Estas implementaciones no han logrado aprobar el conjunto de pruebas de conformidad o la situación de los controladores gráficos en la plataforma no es estable aun. [Khronos Group](https://www.khronos.org/) certifica las implementaciones de WebGL bajo ciertas [reglas de conformidad](https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt).
+
+- `contextAttributes`
+
+ - : Puedes usar varios atributos al momento de crear tu contexto de renderizado. Por ejemplo:
+
+ ```js
+ canvas.getContext('webgl',
+ { antialias: false,
+ depth: false });
+ ```
+
+ Atributos del contexto 2d:
+
+ - **`alpha`**: Booleano que indica si el lienzo contiene canal alfa. Si es asignado falso, el naveagdor sabe que el fondo siempre es opaco, lo cual puede acelerar el dibujado de contenido transparente e imágenes.
+ - {{non-standard_inline}} (Gecko únicamente) **`willReadFrequently`**: Booleano que indica si muchas operaciones de read-back están planeadas o no. Esto forzará el uso de software (en lugar de aceleración de hardware) y puede ahorrar memoria al llamar {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} constantemente. Esta opción solo está disponible si `gfx.canvas.willReadFrequently.enable` es verdadero(lo cual solo está asignado por defecto en B2G/Firefox OS).
+ - {{non-standard_inline}} (Blink únicamente) **`storage`**: Cadena que indica si el almacenamiento es usado ("persistent" por defecto).
+
+ Atributos del contexto WebGL:
+
+ - **`alpha`**: Booleano que indica si el lienzo contiene un buffer alfa.
+ - **`depth`**: Booleano que indica si el buffer de dibujo tiene un buffer de profundidad de al menos 16 bits.
+ - **`stencil`**: Booleano que indica si el buffer de dibujo tiene un stencil de al menos 8 bits.
+ - **`antialias`**: Booleano que indica si se debe aplicar anti-aliasing.
+ - **`premultipliedAlpha`**: Booleano que indica que el compositor de páginas asumirá que el buffer de dibujo contiene colores con alfa premultiplicado.
+ - **`preserveDrawingBuffer`**: Si es verdadero los buffers no se limpiarán y mantendrán sus valores hasta que el autor los limpie o los sobreescriba.
+ - **`failIfMajorPerformanceCaveat`**: Booleano que indica si un contexto será creado si el rendimiento del sistema es bajo.
+
+### Valor de retorno
+
+Un {{domxref("RenderingContext")}} que puede ser:
+
+- {{domxref("CanvasRenderingContext2D")}} para `"2d"`,
+- {{domxref("WebGLRenderingContext")}} para`"webgl"` y `"experimental-webgl"`,
+- {{domxref("WebGL2RenderingContext")}} para `"webgl2"` y `"experimental-webgl2"`, o
+- {{domxref("ImageBitmapRenderingContext")}} para `"bitmaprenderer"`.
+
+Si _contextType_ no corresponde con un posible contexto de dibujo retorna null.
+
+## Ejemplos
+
+Dado este elemento {{HTMLElement("canvas")}}:
+
+```html
+
-
-
{{APIRef("Canvas API")}}
-
-
La propiedad HTMLCanvasElement.height es un entero positivo que refleja el atributo
-
-Esta es una de de las dos propiedades que controlan el tamaño del canvas, siendo la otra {{domxref("HTMLCanvasElement.width")}}.
-
-Syntax
-
-var pxl = canvas .height;
-canvas .height = pxl ;
-Ejemplos
-
-Dado el siguiente elemento {{HTMLElement("canvas")}}:
-
-<canvas id="canvas" width="300" height="300"></canvas>
-
-
-Puedes obtener la altura del canvas con el siguiente codigo:
-
-var canvas = document.getElementById("canvas");
-console.log(canvas.height); // 300
-
-
-Especificaciones
-
-
-
-
- Especificación
- Status
- Comentarios
-
-
- {{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}}
- {{Spec2('HTML WHATWG')}}
- No hay cambios desde la ultima foto {{SpecName('HTML5 W3C')}}
-
-
- {{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}
- {{Spec2('HTML5.1')}}
-
-
-
- {{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}
- {{Spec2('HTML5 W3C')}}
- Foto que contiene la definición inicial {{SpecName('HTML WHATWG')}}.
-
-
-
-
-Compatibilidad de Navegadores
-
-{{Compat("api.HTMLCanvasElement.height")}}
-
-Ver también
-
-
- La interfaz que lo define, {{domxref("HTMLCanvasElement")}}.
- La otra propiedad que controla el tamaño del canvas, {{domxref("HTMLCanvasElement.width")}}.
-
diff --git a/files/es/web/api/htmlcanvaselement/height/index.md b/files/es/web/api/htmlcanvaselement/height/index.md
new file mode 100644
index 00000000000000..9d025c3dc6eb39
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/height/index.md
@@ -0,0 +1,51 @@
+---
+title: HTMLCanvasElement.height
+slug: Web/API/HTMLCanvasElement/height
+tags:
+ - Propiedad
+translation_of: Web/API/HTMLCanvasElement/height
+---
+{{APIRef("Canvas API")}}
+
+La propiedad **`HTMLCanvasElement.height`** es un entero positivo que refleja el atributo {{htmlattrxref("height", "canvas")}} del elemento {{HTMLElement("canvas")}} interpretado en pixeles CSS. Cuando el atributo no esta especificado o esta puesto en un valor invalido(ej. Número negativo), es usado el valor por defecto de 150.
+
+Esta es una de de las dos propiedades que controlan el tamaño del canvas, siendo la otra {{domxref("HTMLCanvasElement.width")}}.
+
+## Syntax
+
+```
+var pxl = canvas.height;
+canvas.height = pxl;
+```
+
+## Ejemplos
+
+Dado el siguiente elemento {{HTMLElement("canvas")}}:
+
+```html
+
-
{{APIRef("Canvas API")}}
-
La interfaz HTMLCanvasElement HTMLCanvasElement también hereda las propiedades y métodos de la interfaz {{domxref("HTMLElement")}} .
-
-Propiedades
-
-Hereda propiedades de la interfaz padre, {{domxref("HTMLElement")}}.
-
-
- {{domxref("HTMLCanvasElement.height")}}
- Un entero positivo que se asocia al atributo HTML {{htmlattrxref("height", "canvas")}} del elemento {{HTMLElement("canvas")}} interpretada en píxeles CSS. Cuando el atributo no está especificado, o si este se inicializa a un valor inválido, como un negativo, el valor 150 es usado por defecto.
- {{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
- Un {{jsxref("Boolean")}} asociado al atributo HTML {{htmlattrxref("moz-opaque", "canvas")}} del elemento {{HTMLElement("canvas")}} . Proporciona al canvas una forma de saber si la transparencia será considerada un factor. Si el canvas conoce que no hay transparencia, el desempeño de renderezación será optimizado.
- {{domxref("HTMLCanvasElement.width")}}
- Un entero positivo asociado al atributo HTML {{htmlattrxref("width", "canvas")}} del elemento canvas {{HTMLElement("canvas")}} interpretado en píxeles CSS. Cuando el atributo no está especificado, o si se inicializa a un valor inválido, como un negativo, se utiliza el valor 300 por defecto.
-
-
-Métodos
-
-Herada métodos de la interfaz padre, {{domxref("HTMLElement")}}.
-
-
- {{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
- Retorna un {{domxref("CanvasCaptureMediaStream")}} que es una captura de video en tiempo real, de la superficie del canvas.
- {{domxref("HTMLCanvasElement.getContext()")}}
- Retorna el contexto del dibujado del canvas, o bien null(nulo) si el ID de contexto no está soportado. Un contexto de dibujo, te permite dibujar sobre el canvas. Llamando al método getContext con el parámetro "2d" retorna un objeto {{domxref("CanvasRenderingContext2D")}} , mientras que el llamarlo con el parámetroca "experimental-webgl" (o "webgl") retorna un objeto {{domxref("WebGLRenderingContext")}} . Este tipo de contexto sólo está disponible en navegadores que implementen WebGL .
- {{domxref("HTMLCanvasElement.toDataURL()")}}
- Retorna una data-URL conteniendo una representación de la imagen en el formato especificado por el tipo de parámetro(png por defecto). La imagen de retorno se encuentra a una resolución de 96dpi.
- {{domxref("HTMLCanvasElement.toBlob()")}}
- Crea un objeto {{domxref("Blob")}} representando la imagen contenida en el canvas; este archivo puede ser cacheado en disco o bien almacenado en memoria, lo cual dependerá del "user-agent"(especificación del navegador).
- {{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
- Retorna un objeto {{domxref("File")}} representando una imagen contenida en el canvas; este archivo es del tipo memory-based, con su nombre especificado. Si el tipo no se especifica, el tipo usado por defecto es image/png.
- Nota: Sólo puede ser invocado desde Chrome.
-
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
- {{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}
- {{Spec2('Media Capture DOM Elements')}}
- Añade el método captureStream().
-
-
- {{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}
- {{Spec2('HTML WHATWG')}}
- El método getContext()ahora retorna un objeto {{domxref("RenderingContext")}} en vez de un objeto opaco.probablySupportsContext(), setContext() y transferControlToProxy() han sido añadidos.
-
-
- {{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}
- {{Spec2('HTML5.1')}}
-
-
-
- {{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}
- {{Spec2('HTML5 W3C')}}
- Definición Inicial.
-
-
-
-
-Compatibilidad en Navegadores
-
-{{Compat("api.HTMLCanvasElement")}}
-
-Ver también
-
-
- Elementos HTML implementando esta interfaz: {{HTMLElement("canvas")}}.
-
diff --git a/files/es/web/api/htmlcanvaselement/index.md b/files/es/web/api/htmlcanvaselement/index.md
new file mode 100644
index 00000000000000..9c944a362c6942
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/index.md
@@ -0,0 +1,54 @@
+---
+title: HTMLCanvasElement
+slug: Web/API/HTMLCanvasElement
+translation_of: Web/API/HTMLCanvasElement
+---
+{{APIRef("Canvas API")}}
+
+La interfaz **`HTMLCanvasElement`** provee propiedades y métodos para manipular la capa de presentación de los elementos de tipo canvas. La interfaz `HTMLCanvasElement` también hereda las propiedades y métodos de la interfaz {{domxref("HTMLElement")}} .
+
+## Propiedades
+
+_Hereda propiedades de la interfaz padre,_ _{{domxref("HTMLElement")}}._
+
+- {{domxref("HTMLCanvasElement.height")}}
+ - : Un entero positivo que se asocia al atributo HTML {{htmlattrxref("height", "canvas")}} del elemento {{HTMLElement("canvas")}} interpretada en píxeles CSS. Cuando el atributo no está especificado, o si este se inicializa a un valor inválido, como un negativo, el valor 150 es usado por defecto.
+- {{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
+ - : Un {{jsxref("Boolean")}} asociado al atributo HTML {{htmlattrxref("moz-opaque", "canvas")}} del elemento {{HTMLElement("canvas")}} . Proporciona al canvas una forma de saber si la transparencia será considerada un factor. Si el canvas conoce que no hay transparencia, el desempeño de renderezación será optimizado.
+- {{domxref("HTMLCanvasElement.width")}}
+ - : Un entero positivo asociado al atributo HTML {{htmlattrxref("width", "canvas")}} del elemento canvas {{HTMLElement("canvas")}} interpretado en píxeles CSS. Cuando el atributo no está especificado, o si se inicializa a un valor inválido, como un negativo, se utiliza el valor 300 por defecto.
+
+## Métodos
+
+_Herada métodos de la interfaz padre,_ _{{domxref("HTMLElement")}}._
+
+- {{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
+ - : Retorna un {{domxref("CanvasCaptureMediaStream")}} que es una captura de video en tiempo real, de la superficie del canvas.
+- {{domxref("HTMLCanvasElement.getContext()")}}
+ - : Retorna el contexto del dibujado del canvas, o bien null(nulo) si el ID de contexto no está soportado. Un contexto de dibujo, te permite dibujar sobre el canvas. Llamando al método getContext con el parámetro `"2d"` retorna un objeto {{domxref("CanvasRenderingContext2D")}} , mientras que el llamarlo con el parámetroca `"experimental-webgl"` (o `"webgl"`) retorna un objeto {{domxref("WebGLRenderingContext")}} . Este tipo de contexto sólo está disponible en navegadores que implementen [WebGL](/es/docs/Web/WebGL).
+- {{domxref("HTMLCanvasElement.toDataURL()")}}
+ - : Retorna una data-URL conteniendo una representación de la imagen en el formato especificado por el tipo de parámetro(png por defecto). La imagen de retorno se encuentra a una resolución de 96dpi.
+- {{domxref("HTMLCanvasElement.toBlob()")}}
+ - : Crea un objeto {{domxref("Blob")}} representando la imagen contenida en el canvas; este archivo puede ser cacheado en disco o bien almacenado en memoria, lo cual dependerá del "user-agent"(especificación del navegador).
+- {{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
+
+ - : Retorna un objeto {{domxref("File")}} representando una imagen contenida en el canvas; este archivo es del tipo memory-based, con su nombre especificado. Si el tipo no se especifica, el tipo usado por defecto es `image/png`.
+
+ > **Nota:** Sólo puede ser invocado desde Chrome.
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}} | {{Spec2('Media Capture DOM Elements')}} | Añade el método `captureStream()`. |
+| {{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}} | {{Spec2('HTML WHATWG')}} | El método `getContext()`ahora retorna un objeto {{domxref("RenderingContext")}} en vez de un objeto opaco. Los métodos `probablySupportsContext()`, `setContext()` y `transferControlToProxy() han sido añadidos`. |
+| {{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}} | {{Spec2('HTML5.1')}} | |
+| {{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}} | {{Spec2('HTML5 W3C')}} | Definición Inicial. |
+
+## Compatibilidad en Navegadores
+
+{{Compat("api.HTMLCanvasElement")}}
+
+## Ver también
+
+- Elementos HTML implementando esta interfaz: {{HTMLElement("canvas")}}.
diff --git a/files/es/web/api/htmlcanvaselement/todataurl/index.html b/files/es/web/api/htmlcanvaselement/todataurl/index.html
deleted file mode 100644
index b9f5df28619990..00000000000000
--- a/files/es/web/api/htmlcanvaselement/todataurl/index.html
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: HTMLCanvasElement.toDataURL()
-slug: Web/API/HTMLCanvasElement/toDataURL
-tags:
- - API
- - Canvas
- - HTMLCanvasElement
- - Lienzo
- - Referencia
- - metodo
-translation_of: Web/API/HTMLCanvasElement/toDataURL
----
-
-
-
{{APIRef("Canvas API")}}
-
-
El método HTMLCanvasElement.toDataURL()data URI el cual contiene una representación de la imagen en el formato especificado por el parámetro type (por defecto es PNG ). La imagen obtenida tendrá una resolución de 96 dpi.
-
-
- Si la altura o anchura del canvas es 0, devuelve un string con "data:,"
- Si el tipo solicitado no es image/png pero el valor devuelto empieza por data:image/png, entonces el formato especificado no esta soportado.
- Chrome también soporta el tipo image/webp.
-
-
-Sintaxis
-
-canvas .toDataURL(tipo , opcionesCodificación );Parámetros
-
-
- tipo{{optional_inline}}Un {{domxref("DOMString")}} indicando el formato de la imagen. El tipo por defecto es image/png.
- opcionesCodificación{{optional_inline}}Un {{jsxref("Number")}} entre 0 y 1 indicando la calidad de la imagen si el tipo solicitado es image/jpeg o image/webp.0.92. Otros argumentos se ignoran.
-
-
-Valor devuelto
-
-Un {{domxref("DOMString")}} que contiene el valor data URI .
-
-Ejemplos
-
-Dado un elemento {{HTMLElement("canvas")}}:
-
-<canvas id="canvas" width="5" height="5"></canvas>
-
-
-Puedes obtener el data-URL del canvas con las siguientes líneas:
-
-var canvas = document.getElementById('canvas');
-var dataURL = canvas.toDataURL();
-console.log(dataURL);
-// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
-// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
-
-
-Establecer la calidad de imagen con jpegs
-
-var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
-// "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
-var mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
-var lowQuality = canvas.toDataURL('image/jpeg', 0.1);
-
-
-Ejemplo: Cambiar imágenes dinámicamente
-
-Se puede usar esta técnica junto con los eventos del mouse para cambiar las imágenes de manera dinámica (escala de grises versus color en este ejemplo):
-
-HTML
-
-<img class="grayscale" src="myPicture.png" alt="Description of my picture" />
-
-JavaScript
-
-window.addEventListener('load', quitarColor);
-
-function verImgEnColor() {
- this.style.display = 'none';
- this.nextSibling.style.display = 'inline';
-}
-
-function verImgEnGris() {
- this.previousSibling.style.display = 'inline';
- this.style.display = 'none';
-}
-
-function quitarColor() {
- var aImages = document.getElementsByClassName('escalagrises'),
- nImgsLen = aImages.length,
- oCanvas = document.createElement('canvas'),
- oCtx = oCanvas.getContext('2d');
- for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
- var oColorImg = aImages[nImgId];
- nWidth = oColorImg.offsetWidth;
- nHeight = oColorImg.offsetHeight;
- oCanvas.width = nWidth;
- oCanvas.height = nHeight;
- oCtx.drawImage(oColorImg, 0, 0);
- oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
- aPix = oImgData.data;
- nPixLen = aPix.length;
- for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
- aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
- }
- oCtx.putImageData(oImgData, 0, 0);
- oGrayImg = new Image();
- oGrayImg.src = oCanvas.toDataURL();
- oGrayImg.onmouseover = verImgEnColor;
- oColorImg.onmouseout = verImgEnGris;
- oCtx.clearRect(0, 0, nWidth, nHeight);
- oColorImg.style.display = "none";
- oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
- }
-}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
- {{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}
- {{Spec2('HTML WHATWG')}}
- Sin cambios desde el último snapshot, {{SpecName('HTML5 W3C')}}
-
-
- {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}
- {{Spec2('HTML5.1')}}
-
-
-
- {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}
- {{Spec2('HTML5 W3C')}}
- Snapshot del {{SpecName('HTML WHATWG')}} con la definición inicial.
-
-
-
-
-Compatibilidad de navegadores
-
-
-
-{{Compat("api.HTMLCanvasElement.toDataURL")}}
-
-Ver también
-
-
- La interfaz que lo define, {{domxref("HTMLCanvasElement")}}.
- Data URIs en la referencía HTTP .
diff --git a/files/es/web/api/htmlcanvaselement/todataurl/index.md b/files/es/web/api/htmlcanvaselement/todataurl/index.md
new file mode 100644
index 00000000000000..804114d307ee24
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/todataurl/index.md
@@ -0,0 +1,136 @@
+---
+title: HTMLCanvasElement.toDataURL()
+slug: Web/API/HTMLCanvasElement/toDataURL
+tags:
+ - API
+ - Canvas
+ - HTMLCanvasElement
+ - Lienzo
+ - Referencia
+ - metodo
+translation_of: Web/API/HTMLCanvasElement/toDataURL
+---
+{{APIRef("Canvas API")}}
+
+El método **`HTMLCanvasElement.toDataURL()`** devuelve un [data URI](/es/docs/Web/HTTP/data_URIs) el cual contiene una representación de la imagen en el formato especificado por el parámetro `type` (por defecto es [PNG](https://en.wikipedia.org/wiki/Portable_Network_Graphics)). La imagen obtenida tendrá una resolución de 96 dpi.
+
+- Si la altura o anchura del canvas es `0`, devuelve un string con `"data:,"`
+- Si el tipo solicitado no es `image/png` pero el valor devuelto empieza por `data:image/png`, entonces el formato especificado no esta soportado.
+- Chrome también soporta el tipo `image/webp`.
+
+## Sintaxis
+
+```
+canvas.toDataURL(tipo, opcionesCodificación);
+```
+
+### Parámetros
+
+- `tipo`{{optional_inline}}
+ - : Un {{domxref("DOMString")}} indicando el formato de la imagen. El tipo por defecto es `image/png`.
+- `opcionesCodificación`{{optional_inline}}
+ - : Un {{jsxref("Number")}} entre `0` y `1` indicando la calidad de la imagen si el tipo solicitado es `image/jpeg` o `image/webp`.
+ Si este argumento es cualquier otra cosa, se usa el valor por defecto de la imagen. El valor por defecto es `0.92`. Otros argumentos se ignoran.
+
+### Valor devuelto
+
+Un {{domxref("DOMString")}} que contiene el valor [data URI](/es/docs/Web/HTTP/data_URIs).
+
+## Ejemplos
+
+Dado un elemento {{HTMLElement("canvas")}}:
+
+```html
+
-
-
{{APIRef("Canvas API")}}
-
-
TLa propiedad HTMLCanvasElement.width
-
-Esta es una de de las dos propiedades que controlan el tamaño del canvas, siendo la otra {{domxref("HTMLCanvasElement.height")}}, that controls the size of the canvas.
-
-Syntax
-
-var pxl = canvas .width;
-canvas .width = pxl ;
-Ejemplos
-
-Dado el siguiente elemento {{HTMLElement("canvas")}} :
-
-<canvas id="canvas" width="300" height="300"></canvas>
-
-
-Puedes obtener el ancho del canvas con el siguiente codigo:
-
-var canvas = document.getElementById("canvas");
-console.log(canvas.width); // 300
-
-
-Especificaciones
-
-
-
-
- Especificación
- Status
- Comentarios
-
-
- {{SpecName('HTML WHATWG', "scripting.html#attr-canvas-width", "HTMLCanvasElement.width")}}
- {{Spec2('HTML WHATWG')}}
- No hay cambios desde la ultima foto {{SpecName('HTML5 W3C')}}
-
-
- {{SpecName('HTML5.1', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}
- {{Spec2('HTML5.1')}}
-
-
-
- {{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}
- {{Spec2('HTML5 W3C')}}
- Foto que contiene la definición inicial {{SpecName('HTML WHATWG')}}.
-
-
-
-
-Compatibilidad de Navegadores
-
-{{Compat("api.HTMLCanvasElement.width")}}
-
-Ver también
-
-
- La interfaz que lo define, {{domxref("HTMLCanvasElement")}}.
- La otra propiedad que controla el tamaño del canvas,{{domxref("HTMLCanvasElement.height")}}.
-
diff --git a/files/es/web/api/htmlcanvaselement/width/index.md b/files/es/web/api/htmlcanvaselement/width/index.md
new file mode 100644
index 00000000000000..61b03c49f68fa6
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/width/index.md
@@ -0,0 +1,49 @@
+---
+title: HTMLCanvasElement.width
+slug: Web/API/HTMLCanvasElement/width
+translation_of: Web/API/HTMLCanvasElement/width
+---
+{{APIRef("Canvas API")}}
+
+TLa propiedad **`HTMLCanvasElement.width`** es un entero positivo que refleja el atributo {{htmlattrxref("width", "canvas")}} del elemento {{HTMLElement("canvas")}} interpretado en pixeles CSS. Cuando el atributo no esta especificado o se define con un valor invalido (ej. Número negativo), es usado el valor por defecto de 150.
+
+Esta es una de de las dos propiedades que controlan el tamaño del canvas, siendo la otra {{domxref("HTMLCanvasElement.height")}}, that controls the size of the canvas.
+
+## Syntax
+
+```
+var pxl = canvas.width;
+canvas.width = pxl;
+```
+
+## Ejemplos
+
+Dado el siguiente elemento {{HTMLElement("canvas")}} :
+
+```html
+{{APIRef("HTML DOM")}}
-
-La interfaz HTMLCollection
-
-Nota: Esta interfaz se llama HTMLCollection por razones históricas (antes del DOM moderno, las colecciones que implementaban esta interfaz sólo podían tener elementos HTML como sus ítems).
-
-Una HTMLCollection en el DOM de HTML está viva; se actualiza automáticamente cuando el documento subyacente cambia.
-
-Propiedades
-
-
- {{domxref("HTMLCollection.length")}} {{readonlyInline}}
- Devuelve el numero de ítems en la colección.
-
-
-Métodos
-
-
- {{domxref("HTMLCollection.item()")}}
- Devuelve el nodo específicado en el índice en base cero dentro de la lista. Devuelve null siel índice está fuera de rango. {{domxref("HTMLCollection.namedItem()")}}
- Devuelve el nodo específico cuyo ID o , en último caso , cuyo nombre coincide con la cadena especificada por name. La coincidencia por nombre sólo se hace como último recurso , sólo en HTML, y sólo si el elemento referenciado soporta el atributo name. Devuelve null si no existe ningún nodo con el nombre indicado.
-
-Uso en JavaScript
-
-HTMLCollection expone a sus miembros directamente como propiedades tanto por como por index. Los IDS de HTML deben contener : y . como caracteres válidos , los cuales necesitan del uso de corchetes para acceder a sus propiedades . Actualmente las HTMLCollections no reconocen los IDS puramente numéricos , lo que causaría conflicto con el acceso al estilo array, aunque HTML5 sí permite estos.
-
-Por ejemplo, suponiendo que hay un elemento <form> en el documento y que su id es "myForm":
-
-var elem1, elem2;
-
-// document.forms es un HTMLCollection
-
-elem1 = document.forms[0];
-elem2 = document.forms.item(0);
-
-alert(elem1 === elem2); // muestra: "true"
-
-elem1 = document.forms.myForm;
-elem2 = document.forms.namedItem("myForm");
-
-alert(elem1 === elem2); // muestra: "true"
-
-elem1 = document.forms["named.item.with.periods"];
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}
- {{ Spec2('DOM WHATWG') }}
-
-
-
- {{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}
- {{ Spec2('DOM2 HTML') }}
-
-
-
- {{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}
- {{ Spec2('DOM1') }}
- Definición inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-{{Compat("api.HTMLCollection")}}
-
-Vea también
-
-
- {{domxref("NodeList")}}
- {{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}
-
diff --git a/files/es/web/api/htmlcollection/index.md b/files/es/web/api/htmlcollection/index.md
new file mode 100644
index 00000000000000..82cbaf0fa2d91d
--- /dev/null
+++ b/files/es/web/api/htmlcollection/index.md
@@ -0,0 +1,74 @@
+---
+title: HTMLCollection
+slug: Web/API/HTMLCollection
+tags:
+ - API
+ - DOM
+ - HTML DOM
+ - HTMLCollection
+ - Interfaz
+ - Lista de elementos
+ - Referencia
+ - Referência DOM
+translation_of: Web/API/HTMLCollection
+---
+{{APIRef("HTML DOM")}}
+
+La interfaz **`HTMLCollection`** representa una colección genérica (objeto tipo array similar a arguments) de elementos (en orden de documento) y ofrece métodos y propiedades para seleccionarlos de la lista.
+
+> **Nota:** Esta interfaz se llama `HTMLCollection` por razones históricas (antes del DOM moderno, las colecciones que implementaban esta interfaz sólo podían tener elementos HTML como sus ítems).
+
+Una `HTMLCollection` en el DOM de HTML está viva; se actualiza automáticamente cuando el documento subyacente cambia.
+
+## Propiedades
+
+- {{domxref("HTMLCollection.length")}} {{readonlyInline}}
+ - : Devuelve el numero de ítems en la colección.
+
+## Métodos
+
+- {{domxref("HTMLCollection.item()")}}
+ - : Devuelve el nodo específicado en el índice en base cero dentro de la lista. Devuelve `null` si el índice está fuera de rango.
+- {{domxref("HTMLCollection.namedItem()")}}
+ - : Devuelve el nodo específico cuyo ID o, en último caso, cuyo nombre coincide con la cadena especificada por `name`. La coincidencia por nombre sólo se hace como último recurso, sólo en HTML, y sólo si el elemento referenciado soporta el atributo `name`. Devuelve `null` si no existe ningún nodo con el nombre indicado.
+
+## Uso en JavaScript
+
+`HTMLCollection` también expone a sus miembros directamente como propiedades tanto por name como por index. Los IDS de HTML deben contener `:` y `.` como caracteres válidos, los cuales necesitan del uso de corchetes para acceder a sus propiedades. Actualmente las HTMLCollections no reconocen los IDS puramente numéricos, lo que causaría conflicto con el acceso al estilo array, aunque HTML5 sí permite estos.
+
+Por ejemplo, suponiendo que hay un elemento `