-
Notifications
You must be signed in to change notification settings - Fork 221
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
DOM tree #264
Conversation
First translation
translation #2
Please make the requested changes. After it, add a comment "/done". |
@cortizg estoy revisando... |
digo para no hacer 2 revisiones a la vez |
There was a problem hiding this 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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- `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: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Comencemos con un documento sencillo, descrito a continuación: | |
Comencemos con el siguiente documento simple: |
|
||
```html run no-beautify | ||
```ejecución html sin formatear |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
```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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
```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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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". |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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". |
There was a problem hiding this comment.
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). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- **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
Please make the requested changes. After it, add a comment "/done". |
There was a problem hiding this 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
Please make the requested changes. After it, add a comment "/done". |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
otras observaciones
@@ -177,7 +175,7 @@ For example, comments: | |||
<ol> | |||
<li>An elk is a smart</li> | |||
*!* | |||
<!-- comment --> | |||
<!-- comentario --> | |||
*/!* | |||
<li>...and cunning animal!</li> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<li>...and cunning animal!</li> | |
<li>...y el astuto animal!</li> |
Please make the requested changes. After it, add a comment "/done". |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
mejor como review
Please make the requested changes. After it, add a comment "/done". |
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>
Co-authored-by: Carlos Ortiz Gutiérrez <56600925+cortizg@users.noreply.github.com>
There was a problem hiding this 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
Please make the requested changes. After it, add a comment "/done". |
/done
/done
/done |
Una vez vean aceptados los cambios, por favor denle a "aprobar" para así poder hacer merge |
/done |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok
Thank you 💖 I updated the Progress Issue #17 🎉 🎉 🎉 |
Listo la traducción de los archivos contenidos en la carpeta asignada