DOM tree by dev-balza · Pull Request #264 · javascript-tutorial/es.javascript.info

dev-balza · 2020-06-19T22:09:52Z

Listo la traducción de los archivos contenidos en la carpeta asignada

First translation

translation #2

CLAassistant · 2020-06-19T22:09:56Z

All committers have signed the CLA.

javascript-translate-bot · 2020-06-20T15:11:13Z

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

2-ui/1-document/02-dom-nodes/article.md

EzequielCaste · 2020-06-20T15:19:59Z

@cortizg estoy revisando...

2-ui/1-document/02-dom-nodes/article.md

EzequielCaste · 2020-06-20T15:20:15Z

digo para no hacer 2 revisiones a la vez

2-ui/1-document/02-dom-nodes/article.md

EzequielCaste

algunos cambios

EzequielCaste · 2020-06-20T13:29:32Z

2-ui/1-document/02-dom-nodes/article.md

+document.body.style.background = 'red'; // establece un color de fondo rojo

-setTimeout(() => document.body.style.background = '', 3000); // return back
+setTimeout(() => document.body.style.background = '', 3000); // devolución


Suggested change

setTimeout(() => document.body.style.background = '', 3000); // devolución

setTimeout(() => document.body.style.background = '', 3000); // volver atrás

en este caso no se trata de una devolución, sino de volver al color original

EzequielCaste · 2020-06-20T13:30:41Z

2-ui/1-document/02-dom-nodes/article.md

- `offsetWidth` -- the node width (in pixels)
- ...and so on.
+- `innerHTML` -- contenido HTML del nodo.
+- `offsetWidth` -- anchura del nodo (en píxeles).


Suggested change

- `offsetWidth` -- anchura del nodo (en píxeles).

- `offsetWidth` -- ancho del nodo (en píxeles).

EzequielCaste · 2020-06-20T13:32:38Z

2-ui/1-document/02-dom-nodes/article.md

+## Un ejemplo del DOM

-Let's start with the following simple document:
+Comencemos con un documento sencillo, descrito a continuación:


Suggested change

Comencemos con un documento sencillo, descrito a continuación:

Comencemos con el siguiente documento simple:

EzequielCaste · 2020-06-20T13:33:28Z

2-ui/1-document/02-dom-nodes/article.md

+Comencemos con un documento sencillo, descrito a continuación:

-```html run no-beautify
+```ejecución html sin formatear


Suggested change

```ejecución html sin formatear

```html run no-beautify

éste código no se debe traducir, es código interno

EzequielCaste · 2020-06-20T13:37:47Z

2-ui/1-document/02-dom-nodes/article.md


-```online
-On the picture above, you can click on element nodes and their children will open/collapse.
+```conectado


Suggested change

```conectado

```online

EzequielCaste · 2020-06-20T14:39:03Z

2-ui/1-document/02-dom-nodes/article.md

+1. `document` -- el "punto de entrada" en el DOM.
+2. nodos de elementos -- Etiquetas-HTML, los bloques construcción del árbol.
+3. nodos de texto -- contienen texto.
+4. comentarios -- a veces podemos colocar  ocasiones información allí, no se mostrará, pero JS puede leerla desde el DOM.


Suggested change

4. comentarios -- a veces podemos colocar ocasiones información allí, no se mostrará, pero JS puede leerla desde el DOM.

4. comentarios -- a veces podemos colocar información allí, no se mostrará, pero JS puede leerla desde el DOM.

EzequielCaste · 2020-06-20T14:47:18Z

2-ui/1-document/02-dom-nodes/article.md

+## Véalo usted mismo

-To see the DOM structure in real-time, try [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up as a DOM at an instant.
+Para ver la estructura del DOM en tiempo real, intente [visor en vivo del DOM](http://software.hixie.ch/utilities/js/live-dom-viewer/). Simplemente escriba el documento, y se mostrará como un DOM al instante.


Suggested change

Para ver la estructura del DOM en tiempo real, intente [visor en vivo del DOM](http://software.hixie.ch/utilities/js/live-dom-viewer/). Simplemente escriba el documento, y se mostrará como un DOM al instante.

Para ver la estructura del DOM en tiempo real, intente [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Simplemente escriba el documento, y se mostrará como un DOM al instante.

EzequielCaste · 2020-06-20T14:48:12Z

2-ui/1-document/02-dom-nodes/article.md

 ![](elk.svg)

-You can see the DOM, click on elements, see their details and so on.
+Puedes mirar el DOM, hacer clic sobre los elementos, ver sus detalles, etc.


Suggested change

Puedes mirar el DOM, hacer clic sobre los elementos, ver sus detalles, etc.

Puedes ver el DOM, hacer clic sobre los elementos, ver sus detalles, etc.

EzequielCaste · 2020-06-20T14:50:11Z

2-ui/1-document/02-dom-nodes/article.md

+Hacer clic en el botón <span class="devtools" style="background-position:-328px -124px"></span> ubicado en la esquina superior izquierda nos permite elegir un nodo desde la página web utilizando un "mouse" (u otros dispositivos de puntero) e "inspeccionar" (desplazarse hasta él en la pestaña elementos). Esto funciona muy bien cuando tenemmos una página HTML enorme (y el DOM correspondiente es enorme) y nos gustaría ver la posición de un elemento en particular.

-Another way to do it would be just right-clicking on a webpage and selecting "Inspect" in the context menu.
+Otra forma de realizarlo sería hacer clic derecho en la página web y en el menú contextual elegir la opción "inspeccionar".


Suggested change

Otra forma de realizarlo sería hacer clic derecho en la página web y en el menú contextual elegir la opción "inspeccionar".

Otra forma de realizarlo sería hacer clic derecho en la página web y en el menú contextual elegir la opción "Inspeccionar Elemento".

nótese que la palabra fue escrita con mayúscula en el documento original, denotando que se trata de el nombre oficial o predeterminado en el navegador Chrome. "Inspect" en la versión español el navegador tiene "Inspeccionar Elemento"

EzequielCaste · 2020-06-20T15:19:13Z

2-ui/1-document/02-dom-nodes/article.md

+En la parte derecha de las herramientos encontramos las siguientes sub-pestañas:
+- **Styles** -- podemos ver CSS aplicado al elemento actual regla por regla, incluidas las reglas integradas (gris). Casi todo puede ser editado en el lugar, incluyendo las dimensiones/márgenes/relleno de la siguiente caja.
+- **Computed** -- nos permite ver cada propiedad CSS aplicada al elemento: para cada propiedad podemos ver la regla que la provee (inluida la herencia CSS y demás).
+- **Event Listeners** -- nos ayuda a ver los escuchadores de eventos adjuntos a elementos del DOM (los cubriremos en la siguiente parte del tutorial). 


Suggested change

- **Event Listeners** -- nos ayuda a ver los escuchadores de eventos adjuntos a elementos del DOM (los cubriremos en la siguiente parte del tutorial).

- **Event Listeners** -- nos ayuda a ver los listener de eventos adjuntos a elementos del DOM (los cubriremos en la siguiente parte del tutorial).

Estoy viendo que en MDN están usando listener

javascript-translate-bot · 2020-06-20T15:24:22Z

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

cortizg

hay comentario y cambios necesarios

javascript-translate-bot · 2020-06-20T15:24:39Z

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

cortizg

otras observaciones

2-ui/1-document/02-dom-nodes/article.md

cortizg · 2020-06-20T15:38:22Z

2-ui/1-document/02-dom-nodes/article.md

-    <!-- comment -->
+    <!-- comentario -->
 */!*
    <li>...and cunning animal!</li>


Suggested change

<li>...and cunning animal!</li>

<li>...y el astuto animal!</li>

javascript-translate-bot · 2020-06-20T15:48:38Z

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

cortizg

mejor como review

2-ui/1-document/02-dom-nodes/article.md

javascript-translate-bot · 2020-06-20T15:53:40Z

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

Co-authored-by: Carlos Ortiz Gutiérrez <[email protected]>

EzequielCaste

necesito una segunda opinión

javascript-translate-bot · 2020-06-20T20:29:35Z

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

/done

cortizg · 2020-06-20T23:34:11Z

/done

vplentinax · 2020-06-24T16:04:50Z

Una vez vean aceptados los cambios, por favor denle a "aprobar" para así poder hacer merge

vplentinax · 2020-06-24T16:05:02Z

/done

EzequielCaste

ok

javascript-translate-bot · 2020-06-24T18:06:43Z

Thank you 💖 I updated the Progress Issue #17 🎉 🎉 🎉

dev-balza added 6 commits June 17, 2020 22:50

Update article.md

7126286

First translation

Update article.md

1f65852

translation #2

Update article.md

2a5a563

Update article.md

c508fd8

Update article.md

6011db3

Update article.md

ba5404d

javascript-translate-bot added the review needed label Jun 19, 2020

javascript-translate-bot requested a review from a team June 19, 2020 22:09

vplentinax changed the title ~~Rama primera~~ DOM tree Jun 20, 2020

iliakan mentioned this pull request Jun 20, 2020

Spanish Translation Progress #17

Open

EzequielCaste self-requested a review June 20, 2020 12:34

javascript-translate-bot removed the review needed label Jun 20, 2020

javascript-translate-bot added the changes requested label Jun 20, 2020

cortizg reviewed Jun 20, 2020

View reviewed changes

2-ui/1-document/02-dom-nodes/article.md Outdated Show resolved Hide resolved

cortizg reviewed Jun 20, 2020

View reviewed changes

2-ui/1-document/02-dom-nodes/article.md Outdated Show resolved Hide resolved

cortizg reviewed Jun 20, 2020

View reviewed changes

2-ui/1-document/02-dom-nodes/article.md Outdated Show resolved Hide resolved

cortizg reviewed Jun 20, 2020

View reviewed changes

2-ui/1-document/02-dom-nodes/article.md Outdated Show resolved Hide resolved

EzequielCaste requested changes Jun 20, 2020

View reviewed changes

cortizg suggested changes Jun 20, 2020

View reviewed changes

2-ui/1-document/02-dom-nodes/article.md Outdated Show resolved Hide resolved

Update 2-ui/1-document/02-dom-nodes/article.md

da161e9

Co-authored-by: Carlos Ortiz Gutiérrez <[email protected]>

EzequielCaste and others added 6 commits June 20, 2020 17:21

Update 2-ui/1-document/02-dom-nodes/article.md

633389e

Co-authored-by: Carlos Ortiz Gutiérrez <[email protected]>

Update 2-ui/1-document/02-dom-nodes/article.md

782b04b

Co-authored-by: Carlos Ortiz Gutiérrez <[email protected]>

Update 2-ui/1-document/02-dom-nodes/article.md

0ace07e

Co-authored-by: Carlos Ortiz Gutiérrez <[email protected]>

Update 2-ui/1-document/02-dom-nodes/article.md

33ef7eb

Co-authored-by: Carlos Ortiz Gutiérrez <[email protected]>

Update 2-ui/1-document/02-dom-nodes/article.md

38f9c7e

Co-authored-by: Carlos Ortiz Gutiérrez <[email protected]>

Update 2-ui/1-document/02-dom-nodes/article.md

e3417cb

EzequielCaste requested changes Jun 20, 2020

View reviewed changes

dev-balza added 2 commits June 20, 2020 19:14

Update article.md

a5db7b4

/done

Update article.md

8b36f05

/done

Apply suggestions from code review

4d6cd78

EzequielCaste approved these changes Jun 24, 2020

View reviewed changes

javascript-translate-bot added needs +1 and removed changes requested labels Jun 24, 2020

EzequielCaste merged commit dc48bfc into javascript-tutorial:master Jun 24, 2020

EzequielCaste removed the needs +1 label Jun 24, 2020

	setTimeout(() => document.body.style.background = '', 3000); // devolución
	setTimeout(() => document.body.style.background = '', 3000); // volver atrás

	- `offsetWidth` -- anchura del nodo (en píxeles).
	- `offsetWidth` -- ancho del nodo (en píxeles).

	Comencemos con un documento sencillo, descrito a continuación:
	Comencemos con el siguiente documento simple:

	4. comentarios -- a veces podemos colocar ocasiones información allí, no se mostrará, pero JS puede leerla desde el DOM.
	4. comentarios -- a veces podemos colocar información allí, no se mostrará, pero JS puede leerla desde el DOM.

	Para ver la estructura del DOM en tiempo real, intente [visor en vivo del DOM](http://software.hixie.ch/utilities/js/live-dom-viewer/). Simplemente escriba el documento, y se mostrará como un DOM al instante.
	Para ver la estructura del DOM en tiempo real, intente [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Simplemente escriba el documento, y se mostrará como un DOM al instante.

	Puedes mirar el DOM, hacer clic sobre los elementos, ver sus detalles, etc.
	Puedes ver el DOM, hacer clic sobre los elementos, ver sus detalles, etc.

	Otra forma de realizarlo sería hacer clic derecho en la página web y en el menú contextual elegir la opción "inspeccionar".
	Otra forma de realizarlo sería hacer clic derecho en la página web y en el menú contextual elegir la opción "Inspeccionar Elemento".

	- Event Listeners -- nos ayuda a ver los escuchadores de eventos adjuntos a elementos del DOM (los cubriremos en la siguiente parte del tutorial).
	- Event Listeners -- nos ayuda a ver los listener de eventos adjuntos a elementos del DOM (los cubriremos en la siguiente parte del tutorial).

	<li>...and cunning animal!</li>
	<li>...y el astuto animal!</li>

Conversation

dev-balza commented Jun 19, 2020

Uh oh!

CLAassistant commented Jun 19, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

javascript-translate-bot commented Jun 20, 2020

Uh oh!

Uh oh!

Uh oh!

EzequielCaste commented Jun 20, 2020

Uh oh!

Uh oh!

EzequielCaste commented Jun 20, 2020

Uh oh!

Uh oh!

EzequielCaste left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

javascript-translate-bot commented Jun 20, 2020

Uh oh!

cortizg left a comment

Choose a reason for hiding this comment

Uh oh!

javascript-translate-bot commented Jun 20, 2020

Uh oh!

cortizg left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

javascript-translate-bot commented Jun 20, 2020

Uh oh!

cortizg left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

javascript-translate-bot commented Jun 20, 2020

Uh oh!

EzequielCaste left a comment

Choose a reason for hiding this comment

Uh oh!

javascript-translate-bot commented Jun 20, 2020

Uh oh!

cortizg commented Jun 20, 2020

Uh oh!

vplentinax commented Jun 24, 2020

Uh oh!

vplentinax commented Jun 24, 2020

Uh oh!

EzequielCaste left a comment

Choose a reason for hiding this comment

Uh oh!

javascript-translate-bot commented Jun 24, 2020

Uh oh!

CLAassistant commented Jun 19, 2020 •

edited

Loading