Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DOM tree #264

Merged
merged 16 commits into from
Jun 24, 2020
Merged

DOM tree #264

merged 16 commits into from
Jun 24, 2020

Conversation

dev-balza
Copy link
Contributor

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

@CLAassistant
Copy link

CLAassistant commented Jun 19, 2020

CLA assistant check
All committers have signed the CLA.

@vplentinax vplentinax changed the title Rama primera DOM tree Jun 20, 2020
@EzequielCaste EzequielCaste self-requested a review June 20, 2020 12:34
@javascript-translate-bot

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

@EzequielCaste
Copy link
Contributor

@cortizg estoy revisando...

@EzequielCaste
Copy link
Contributor

digo para no hacer 2 revisiones a la vez

Copy link
Contributor

@EzequielCaste EzequielCaste left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

algunos cambios


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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


```html run no-beautify
```ejecución html sin formatear
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
```ejecución html sin formatear
```html run no-beautify

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

@@ -56,34 +56,34 @@ let node1 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,
drawHtmlTree(node1, 'div.domtree', 690, 320);
</script>

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
```conectado
```online

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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


![](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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


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".
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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".

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"

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).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Contributor

@cortizg cortizg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hay comentario y cambios necesarios

@javascript-translate-bot

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

Copy link
Contributor

@cortizg cortizg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

otras observaciones

2-ui/1-document/02-dom-nodes/article.md Outdated Show resolved Hide resolved
2-ui/1-document/02-dom-nodes/article.md Outdated Show resolved Hide resolved
2-ui/1-document/02-dom-nodes/article.md Show resolved Hide resolved
@@ -177,7 +175,7 @@ For example, comments:
<ol>
<li>An elk is a smart</li>
*!*
<!-- comment -->
<!-- comentario -->
*/!*
<li>...and cunning animal!</li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@javascript-translate-bot

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

Copy link
Contributor

@cortizg cortizg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mejor como review

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

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 <56600925+cortizg@users.noreply.github.com>
EzequielCaste and others added 6 commits June 20, 2020 17:21
Co-authored-by: Carlos Ortiz Gutiérrez <56600925+cortizg@users.noreply.github.com>
Co-authored-by: Carlos Ortiz Gutiérrez <56600925+cortizg@users.noreply.github.com>
Co-authored-by: Carlos Ortiz Gutiérrez <56600925+cortizg@users.noreply.github.com>
Co-authored-by: Carlos Ortiz Gutiérrez <56600925+cortizg@users.noreply.github.com>
Co-authored-by: Carlos Ortiz Gutiérrez <56600925+cortizg@users.noreply.github.com>
Copy link
Contributor

@EzequielCaste EzequielCaste left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

necesito una segunda opinión

@javascript-translate-bot

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

@cortizg
Copy link
Contributor

cortizg commented Jun 20, 2020

/done

@vplentinax
Copy link
Contributor

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

@vplentinax
Copy link
Contributor

/done

Copy link
Contributor

@EzequielCaste EzequielCaste left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants