mdn · Graywolf9 · Oct 24, 2022 · Oct 21, 2022 · Oct 21, 2022 · Oct 21, 2022
@@ -31,8 +31,6 @@ name = AnimationEvent.animationName
 
 {{Compat("api.AnimationEvent.animationName")}}
 
-##
-
 ## Ver también
 
 - [Usando animaciones CSS](/es/docs/CSS/Using_CSS_animations)

@@ -22,7 +22,7 @@ _También hereda las propiedades de su padre {{domxref("Event")}}_.
 - {{domxref("AnimationEvent.animationName")}} {{readonlyInline}}
   - : Es un {{domxref("DOMString")}} que contiene el valor de la propiedad CSS {{cssxref("animation-name")}} asociado con la transición.
 - {{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}
-  - : Es un número flotante que da la cantidad de tiempo que ha estado corriendo la animación, en segundos, cuando este evento es disparado, excluyendo cualquier vez que la aimación fue pausada. Para un evento `"animationstart"`, `elapsedTime` es `0.0` a ménos que hubiera un valor negativo para {{cssxref("animation-delay")}}, en tal caso sería disparado el evento con `elapsedTime` conteniendo `(-1 * `_retraso_`)`.
+  - : Es un número flotante que da la cantidad de tiempo que ha estado corriendo la animación, en segundos, cuando este evento es disparado, excluyendo cualquier vez que la aimación fue pausada. Para un evento `"animationstart"`, `elapsedTime` es `0.0` a ménos que hubiera un valor negativo para {{cssxref("animation-delay")}}, en tal caso sería disparado el evento con `elapsedTime` conteniendo `(-1 *`_retraso_`)`.
 - {{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}
   - : Es un {{domxref("DOMString")}}, empezando con `'::'`, conteniendo el nombre del [pseudo-element](/es/docs/Web/CSS/Pseudo-elements) en el cual corre la animación. Si la animación no corre sobre un pseudo-element sino en el elemento, un string vacío: ''.
 

@@ -22,7 +22,7 @@ Este tipo representa un atributo de un elemento DOM como un objeto. En muchos m
 - {{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}
   - : A {{domxref("DOMString")}} representing the namespace prefix of the attribute, or `null` if no prefix is specified.
 - {{domxref("Attr.specified", "specified")}} {{readOnlyInline}}
-  - : This property always returns `true`. Originally, it returned `true `if the attribute was explicitly specified in the source code or by a script, and `false` if its value came from the default one defined in the document's DTD.
+  - : This property always returns `true`. Originally, it returned `true`if the attribute was explicitly specified in the source code or by a script, and `false` if its value came from the default one defined in the document's DTD.
 - {{domxref("Attr.value", "value")}}
   - : El valor del atributo.
 
@@ -85,7 +85,7 @@ Los siguientes metodos ahora son obsoletos.
   - : Use {{domxref("Element.getAttribute()")}} instead.
 - `getAttributeNodeNS()`
   - : Use {{domxref("Element.getAttributeNS()")}} instead.
-- `hasAttributes() `{{obsolete_inline("21.0")}}
+- `hasAttributes()`{{obsolete_inline("21.0")}}
   - : Estra propiedad ahora retorna false.
 - `hasChildNodes()`
   - : Estra propiedad ahora devuelve `false`.

@@ -90,7 +90,7 @@ Al utilizar otros métodos de {{domxref("FileReader")}}, es posible leer los con
 
 ## Disponilidad del alcance del código en Chrome
 
-El alcance JSM del `Blob `se encuentra disponible sin la necesidad de hacer nada en especial.
+El alcance JSM del `Blob`se encuentra disponible sin la necesidad de hacer nada en especial.
 
 En el alcance de arranque, este debe importarse de igual modo:
 

@@ -54,9 +54,9 @@ This code snippet is from the MDN [sw-test example](https://github.com/mdn/sw-te
 
 In the second code block, we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:
 
-1.  Check whether a match for the request is found in the CacheStorage. If so, serve that.
-2.  If not, fetch the request from the network, then also open the cache created in the first block and add a clone of the request to it using {{domxref("Cache.put")}} (`cache.put(event.request, response.clone())`.)
-3.  If this fails (e.g. because the network is down), return a fallback response.
+1. Check whether a match for the request is found in the CacheStorage. If so, serve that.
+2. If not, fetch the request from the network, then also open the cache created in the first block and add a clone of the request to it using {{domxref("Cache.put")}} (`cache.put(event.request, response.clone())`.)
+3. If this fails (e.g. because the network is down), return a fallback response.
 
 Finally, return whatever the custom response ended up being equal to, using {{domxref("FetchEvent.respondWith")}}.
 

@@ -56,14 +56,14 @@ El documento XHTML que se utiliza para representar este contenido se muestra a c
 
 Los puntos clave a tener en cuenta son:
 
-1.  Este documento establece dos elemento&#x20;
+1. Este documento establece dos elemento&#x20;
 
     `canvas`
 
     &#x20;, con los identificadores de `c1` y `c2` . Canvas `c1` se utiliza para mostrar la imagen actual del video original, mientras que `c2` se utiliza para mostrar el video después de realizar la manipulación con el efecto croma; `c2` se carga previamente con la imagen fija que se utilizará para sustituir el fondo verde en el video.
 
-2.  El código JavaScript es importado de un script llamado `main.js` ; este script utiliza JavaScript 1.8 características, de modo que la versión se especifica en la línea 22 al importar la secuencia de comandos.
-3.  Cuando se carga el documento, se ejecuta el método `processor.doLoad()` de `main.js`.
+2. El código JavaScript es importado de un script llamado `main.js` ; este script utiliza JavaScript 1.8 características, de modo que la versión se especifica en la línea 22 al importar la secuencia de comandos.
+3. Cuando se carga el documento, se ejecuta el método `processor.doLoad()` de `main.js`.
 
 ## El código JavaScript
 

@@ -20,13 +20,13 @@ Probablemente la mayor limitación es que una vez que se dibuja una forma, se ma
 
 Estos son los pasos que necesitas para dibujar un cuadro:
 
-1.  **Limpiar el canvas**
+1. **Limpiar el canvas**
     A menos que las formas que vas a dibujar llenen el canvas completo (por ejemplo, una imagen de fondo), debes borrar cualquier forma que haya dibujado previamente. La forma más fácil de hacerlo es usar el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
-2.  **Guardar el estado del canvas**
+2. **Guardar el estado del canvas**
     Si estás cambiando alguna configuración (como estilos, transformaciones, etc.) que afecte el estado del canvas y deseas asegurarte de que se utiliza el estado original cada vez que se dibuja una figura, debes guardar ese estado original.
-3.  **Dibujar formas animadas**
+3. **Dibujar formas animadas**
     El paso en el que realizas el renderizado del cuadro actual.
-4.  **Restaurar el estado del canvas**
+4. **Restaurar el estado del canvas**
     Si has guardado el estado, restáuralo antes de dibujar un nuevo cuadro.
 
 ## Controlando una animación

@@ -109,7 +109,7 @@ This method is also demonstrated in the article [Manipulating video using canvas
 
 ### A color picker
 
-In this example we are using the [getImageData() ](/es/docs/Web/API/CanvasRenderingContext2D/getImageData)method to display the color under the mouse cursor. For this, we need the current position of the mouse with `layerX` and `layerY`, then we look up the pixel data on that position in the pixel array that [getImageData()](/es/docs/Web/API/CanvasRenderingContext2D/getImageData) provides us. Finally, we use the array data to set a background color and a text in the `<div>` to display the color.
+In this example we are using the [getImageData()](/es/docs/Web/API/CanvasRenderingContext2D/getImageData)method to display the color under the mouse cursor. For this, we need the current position of the mouse with `layerX` and `layerY`, then we look up the pixel data on that position in the pixel array that [getImageData()](/es/docs/Web/API/CanvasRenderingContext2D/getImageData) provides us. Finally, we use the array data to set a background color and a text in the `<div>` to display the color.
 
 ```html hidden
 <canvas id="canvas" width="300" height="227" style="float:left"></canvas>
@@ -143,7 +143,7 @@ canvas.addEventListener('mousemove', pick);
 
 ## Painting pixel data into a context
 
-You can use the[ putImageData() ](/es/docs/Web/API/CanvasRenderingContext2D/putImageData)method to paint pixel data into a context:
+You can use the[putImageData()](/es/docs/Web/API/CanvasRenderingContext2D/putImageData)method to paint pixel data into a context:
 
 ```js
 ctx.putImageData(myImageData, dx, dy);

@@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/beginPath
 ---
 {{APIRef}}
 
-El método **`CanvasRenderingContext2D`\*\***`.beginPath() `\*\*del API Canvas 2D comienza una nueva ruta vaciando la lista de sub-rutas. Invoca este método cuando quieras crear una nueva ruta.
+El método **`CanvasRenderingContext2D`\*\***`.beginPath()`\*\*del API Canvas 2D comienza una nueva ruta vaciando la lista de sub-rutas. Invoca este método cuando quieras crear una nueva ruta.
 
 ## Sintaxis
 

@@ -3,7 +3,7 @@ title: CanvasRenderingContext2D.clearRect()
 slug: Web/API/CanvasRenderingContext2D/clearRect
 translation_of: Web/API/CanvasRenderingContext2D/clearRect
 ---
-{{APIRef}}El método **`CanvasRenderingContext2D`\*\***`.clearRect() `\*\*`del API Canvas 2D convierte todos los pixeles en el rectangulo definido por el punto de inicio (x, y) y tamaño `_(width, height)_ a negro transparente, borrando cualquier contenido dibujado anteriormente.
+{{APIRef}}El método **`CanvasRenderingContext2D`\*\***`.clearRect()`\*\*`del API Canvas 2D convierte todos los pixeles en el rectangulo definido por el punto de inicio (x, y) y tamaño`_(width, height)_ a negro transparente, borrando cualquier contenido dibujado anteriormente.
 
 ## Syntaxis
 
@@ -26,7 +26,7 @@ void ctx.clearRect(x, y, width, height);
 
 ## Notas de uso
 
-Un problema común con **`clearRect `**es que puede parecer que no funciona cuando no se usan las [trayectorias de dibujo](/es/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Drawing_paths) ([paths](/es/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Drawing_paths)) de forma adecuada. No olvide llamar {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} antes de comenzar a dibujar el nuevo cuadro después de llamar **`clearRect`**`.`
+Un problema común con **`clearRect`**es que puede parecer que no funciona cuando no se usan las [trayectorias de dibujo](/es/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Drawing_paths) ([paths](/es/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Drawing_paths)) de forma adecuada. No olvide llamar {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} antes de comenzar a dibujar el nuevo cuadro después de llamar **`clearRect`**`.`
 
 ## Ejemplos
 
@@ -58,8 +58,6 @@ ctx.clearRect(10, 10, 100, 100);
 // ctx.clearRect(0, 0, canvas.width, canvas.height);
 ```
 
-##
-
 Edite el código de abajo y vea sus cambios actualizados en vivo en el canvas:
 
 {{ EmbedLiveSample('Playable_code', 700, 400) }}

@@ -40,7 +40,7 @@ void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
 - `sy`
   - : La coordenada Y de la esquina superior izquierda del sub-rectangulo de la imagen origen a dibujar en el contexto de destino.
 - `sWidth`
-  - : El ancho del sub-rectangulo de la imagen origen a dibujar en el contexto de destino. Si no se especifica, se utiliza todo el rectangulo entero desde las coordenadas especificadas por `sx` y `sy `hasta la esquina inferior derecha de la imagen.
+  - : El ancho del sub-rectangulo de la imagen origen a dibujar en el contexto de destino. Si no se especifica, se utiliza todo el rectangulo entero desde las coordenadas especificadas por `sx` y `sy`hasta la esquina inferior derecha de la imagen.
 - `sHeight`
   - : La altura del sub-rectangulo de la imagen origen a dibujar en el contexto de destino.
 
@@ -131,8 +131,6 @@ window.addEventListener("load", drawCanvas);
 
 {{Compat("api.CanvasRenderingContext2D.drawImage")}}
 
-##
-
 ## Notas de compatibilidad
 
 - Soporte para voltear imagen usando valores negativos para `sw` y `sh` fue añadido en Gecko 5.0 {{geckoRelease("5.0")}}.

@@ -35,7 +35,7 @@ ImageData ctx.getImageData(sx, sy, sw, sh);
 
 ### Valor de retorno
 
-An [`ImageData`](/es/docs/Web/API/ImageData "The ImageData interface represents the underlying pixel data of an area of a <canvas> element. It is created using the ImageData() constructor or creator methods on the CanvasRenderingContext2D object associated with a canvas: createImageData() and getImageData(). It can also be used to set a part of the canvas by using putImageData().") object containing the image data for the given rectangle of the canvas.
+An [`ImageData`](/es/docs/Web/API/ImageData) object containing the image data for the given rectangle of the canvas.
 
 ### Errores cometidos
 

@@ -70,9 +70,9 @@ El centro de rotación es azul. El rectángulo no rotado es gris, y el rectángu
 
 Este ejemplo rota una figura alrededor del punto central de ésta. Para realizarlo se aplican estos pasos a la matriz de transformación:
 
-1.  Primero, {{domxref("CanvasRenderingContext2D.translate()", "translate()")}} mueve el orígen de la matriz hacia el centro de la figura.
-2.  `rotate()` rota la matriz la cantidad deseada.
-3.  Finalmente, `translate()` mueve el origen de la matriz de nuevo a su punto inicial. Esto se realiza utilizando los valores del centro de coordenadas de la figura en dirección negativa.
+1. Primero, {{domxref("CanvasRenderingContext2D.translate()", "translate()")}} mueve el orígen de la matriz hacia el centro de la figura.
+2. `rotate()` rota la matriz la cantidad deseada.
+3. Finalmente, `translate()` mueve el origen de la matriz de nuevo a su punto inicial. Esto se realiza utilizando los valores del centro de coordenadas de la figura en dirección negativa.
 
 #### HTML
 

@@ -18,7 +18,7 @@ window.clearInterval(intervalID)
 
 ## Ejemplo
 
-Vea el [ejemplo de` setInterval()`](/es/docs/DOM/window.setInterval#Example "DOM/window.setInterval#Example").
+Vea el [ejemplo de`setInterval()`](/es/docs/DOM/window.setInterval#Example "DOM/window.setInterval#Example").
 
 ## Especificación
 

@@ -5,7 +5,7 @@ translation_of: Web/API/CSSRule
 ---
 {{ ApiRef("CSSOM") }}
 
-El objeto `CSSRule `representa una única regla de estilo CSS. Puede ser parte de una lista [cssRules](/Es/DOM/Stylesheet.cssRules "es/DOM/stylesheet.cssRules") de hojas de estilo ([stylesheet](/Es/DOM/Stylesheet "es/DOM/stylesheet")).
+El objeto `CSSRule`representa una única regla de estilo CSS. Puede ser parte de una lista [cssRules](/Es/DOM/Stylesheet.cssRules "es/DOM/stylesheet.cssRules") de hojas de estilo ([stylesheet](/Es/DOM/Stylesheet "es/DOM/stylesheet")).
 
 Existen varias clases de reglas y todas ellas comparten unas cuantas propiedades comunes en el interface [CSSRule](#cssrule) y la mayor parte de ellas son propiedades específicas de un tipo particular de reglas.
 

@@ -120,9 +120,9 @@ En este ejemplo sencillo, algunas propiedades de estilo básicas de un elemento
 <title>Changing color and font-size example</title>
 <script type="text/javascript">
 function changeText() {
-	var p = document.getElementById("pid");
-	p.style.color = "blue"
-	p.style.fontSize = "18pt"
+ var p = document.getElementById("pid");
+ p.style.color = "blue"
+ p.style.fontSize = "18pt"
 }
 </script>
 </head>

@@ -129,7 +129,7 @@ Se puede automatizar la creación de un DOM tree usando el [JXON reverse algorit
 
 ### ¿Ahora qué?
 
-Los DOM trees pueden ser [invocados usando expresiones XPath](/en/Using_XPath "en/Using_XPath"), convertidos a cadenas de texto, salvados a un archivo local o remoto usando [XMLSerializer](/en/Parsing_and_serializing_XML "en/Parsing_and_serializing_XML") (sin tener que convertirlo primero a una cadena de texto), Enviados mediante [POST a un servidor web](/en/DOM/XMLHttpRequest "en/XMLHttpRequest") (via `XMLHttpRequest`), transformados usando [XSLT](/en/XSLT "en/XSLT"), [XLink](/en/XLink "en/XLink"), convertidos a un objeto JavaScript a tráves del [algoritmo ](/en/JXON "en/JXON")[JXON](/en/JXON "en/JXON"), etc.
+Los DOM trees pueden ser [invocados usando expresiones XPath](/en/Using_XPath "en/Using_XPath"), convertidos a cadenas de texto, salvados a un archivo local o remoto usando [XMLSerializer](/en/Parsing_and_serializing_XML "en/Parsing_and_serializing_XML") (sin tener que convertirlo primero a una cadena de texto), Enviados mediante [POST a un servidor web](/en/DOM/XMLHttpRequest "en/XMLHttpRequest") (via `XMLHttpRequest`), transformados usando [XSLT](/en/XSLT "en/XSLT"), [XLink](/en/XLink "en/XLink"), convertidos a un objeto JavaScript a tráves del [algoritmo](/en/JXON "en/JXON")[JXON](/en/JXON "en/JXON"), etc.
 
 Adicionalmente se puede hacer uso de los DOM trees para modelar los datos que no estén bien formados para RDF (o si sólo no prefieres usar RDF). Otra aplicación que puedes darle, se relaciona a XUL (que es XML), la UI (interfaz) de tu aplicación puede ser manipulada dinámicamente, descargada, subida, guardada, cargada, convertida, o transformada fácilmente.
 

@@ -100,8 +100,8 @@ La siguiente tabla describe brevemente estos tipos de datos.
     <td><code>nodeList</code></td>
     <td>Una "<code>nodeList</code>" es una serie de elementos, parecido a lo que devuelve el método <code>document.getElementsByTagName()</code>. Se accede a los items de la <code>nodeList</code> de cualquiera de las siguientes dos formas:
       <ul>
-      <li><font><font><font><font>list.item (1)</font></font></font></font></li>
-      <li><font><font>lista {{mediawiki.external (1)}}</font></font></li>
+      <li>list.item (1)</li>
+      <li>lista {{mediawiki.external (1)}}</li>
       </ul>
       <p>Ambas maneras son equivalentes. En la primera, <strong>item()</strong> es el método del objeto <code>nodeList</code>. En la última se utiliza la típica sintaxis de acceso a listas para llegar al segundo ítem de la lista.</p>
     </td>
@@ -119,7 +119,7 @@ La siguiente tabla describe brevemente estos tipos de datos.
 
 ## Interfaces del DOM
 
-Uno de los propósitos de esta guía es minimizar el hablar de interfaces abstractas, heredadas y otros detalles de funcionamiento. Más bien, concentrarse sobre los objetos en el DOM y sobre las actuales _cosas_ que se pueden usar para manipular la jerarquía de DOM. Desde el punto de vista del programador web, es bastante indiferente saber que la representación del objeto del elemento `HTML form` toma la propidedad **name** desde la interfaz `HTMLFormElement` pero que las propiedades `className `se toman desde la propia interfaz `HTMLElement`. En ambos casos, la propiedad está sólo en el objeto `form`.
+Uno de los propósitos de esta guía es minimizar el hablar de interfaces abstractas, heredadas y otros detalles de funcionamiento. Más bien, concentrarse sobre los objetos en el DOM y sobre las actuales _cosas_ que se pueden usar para manipular la jerarquía de DOM. Desde el punto de vista del programador web, es bastante indiferente saber que la representación del objeto del elemento `HTML form` toma la propidedad **name** desde la interfaz `HTMLFormElement` pero que las propiedades `className`se toman desde la propia interfaz `HTMLElement`. En ambos casos, la propiedad está sólo en el objeto `form`.
 
 Pero puede resultar confuso el funcionamiento de la fuerte relación entre objetos e interfaces en el DOM, por eso esta sección intentará hablar un poquito sobre las interfaces actuales en la especificación del DOM y de como se dispone de ellas.