From dd683eaceb677114f622c1473d5ca40a6172989c Mon Sep 17 00:00:00 2001 From: victorze Date: Wed, 27 Feb 2019 18:49:01 -0500 Subject: [PATCH 1/3] Traslate 1.1 Browser Environment - Part 2 --- .../01-browser-environment/article.md | 112 +++++++++--------- 1 file changed, 56 insertions(+), 56 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 2266a2def..2daea21ab 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -1,121 +1,121 @@ -# Browser environment, specs +# Entorno del navegador, especificaciones -The JavaScript language was initially created for web browsers. Since then, it has evolved and become a language with many uses and platforms. +El lenguaje JavaScript fue creado inicialmente para los navegadores web. Desde entonces, ha evolucionado y se ha convertido en un lenguaje con muchos usos y plataformas. -A platform may be a browser, or a web-server, or a washing machine, or another *host*. Each of them provides platform-specific functionality. The JavaScript specification calls that a *host environment*. +Una plataforma puede ser un navegador, un servidor web, una lavadora u otro *host*. Cada uno de ellos proporciona una funcionalidad específica. La especificación de JavaScript lo llama *entorno host*. -A host environment provides platform-specific objects and functions additional to the language core. Web browsers give a means to control web pages. Node.JS provides server-side features, and so on. +Un entorno host proporciona objetos específicos de la plataforma y funciones adicionales al núcleo del lenguaje. Los navegadores web proporcionan un medio para controlar las páginas web. Node.JS proporciona características del lado del servidor, y así sucesivamente. -Here's a bird's-eye view of what we have when JavaScript runs in a web-browser: +Aquí tienes una vista general de lo que tenemos cuando JavaScript se ejecuta en un navegador web: ![](windowObjects.png) -There's a "root" object called `window`. It has two roles: +Hay un objeto "raíz" llamado `window`.Tiene dos roles: -1. First, it is a global object for JavaScript code, as described in the chapter . -2. Second, it represents the "browser window" and provides methods to control it. +1. Primero, es un objeto global para el código JavaScript, como se describe en el capítulo [Objeto global](/global-object). +2. En segundo lugar, representa la "ventana del navegador" y proporciona métodos para controlarla. -For instance, here we use it as a global object: +Por ejemplo, aquí lo usamos como un objeto global: ```js run function sayHi() { alert("Hello"); } -// global functions are accessible as properties of window +// Las funciones globales son accesibles como propiedades de window window.sayHi(); ``` -And here we use it as a browser window, to see the window height: +Y aquí lo usamos como una ventana del navegador, para ver la altura de la ventana: ```js run -alert(window.innerHeight); // inner window height +alert(window.innerHeight); // altura interior de la ventana ``` -There are more window-specific methods and properties, we'll cover them later. +Hay más métodos y propiedades específicos de `window`, los cubriremos más adelante. -## Document Object Model (DOM) +## Modelo de Objetos del Documento (DOM) -The `document` object gives access to the page content. We can change or create anything on the page using it. +El objeto de `document` da acceso al contenido de la página. Con él podemos cambiar o crear cualquier cosa en la página. -For instance: +Por ejemplo: ```js run -// change the background color to red +// cambia el color de fondo a rojo document.body.style.background = "red"; -// change it back after 1 second +// deshace el cambio después de 1 segundo setTimeout(() => document.body.style.background = "", 1000); ``` -Here we used `document.body.style`, but there's much, much more. Properties and methods are described in the specification. There happen to be two working groups who develop it: +Aquí usamos `document.body.style`, pero hay muchos, muchos más. Las propiedades y métodos se describen en la especificación. Sucede que hay dos grupos de trabajo que lo desarrollan: -1. [W3C](https://en.wikipedia.org/wiki/World_Wide_Web_Consortium) -- the documentation is at . -2. [WhatWG](https://en.wikipedia.org/wiki/WHATWG), publishing at . +1. [W3C](https://es.wikipedia.org/wiki/World_Wide_Web_Consortium) -- la documentación se encuentra en . +2. [WhatWG](https://es.wikipedia.org/wiki/Web_Hypertext_Application_Technology_Working_Group), publicado en . -As it happens, the two groups don't always agree, so it's like we have two sets of standards. But they are very similar and eventually things merge. The documentation that you can find on the given resources is very similar, with about a 99% match. There are very minor differences that you probably won't notice. +Como es de esperar, los dos grupos no siempre están de acuerdo, así que es como si tuviéramos dos conjuntos de estándares. Pero son muy similares y eventualmente las cosas se fusionan. La documentación que puede encontrar en los recursos dados es muy similar, con aproximadamente un 99% de coincidencia. Hay diferencias muy pequeñas que probablemente no notarás. -Personally, I find more pleasant to use. +Personalmente, encuentro más agradable de usar. -In the ancient past, there was no standard at all -- each browser implemented however it wanted. Different browsers had different sets, methods, and properties for the same thing, and developers had to write different code for each of them. Dark, messy times. +En el pasado lejano, no existía ninguna norma en absoluto: cada navegador se implementaba como quería. Diferentes navegadores tenían diferentes métodos y propiedades para la misma cosa, y los desarrolladores tenían que escribir un código diferente para cada uno de ellos. Tiempos oscuros, desordenados. -Even now we can sometimes meet old code that uses browser-specific properties and works around incompatibilities. But, in this tutorial we'll use modern stuff: there's no need to learn old things until you really need to (chances are high that you won't). +Incluso ahora, podemos encontrarnos con código antiguo que usa propiedades específicas del navegador y soluciona las incompatibilidades. Pero, en este tutorial usaremos cosas modernas: no hay necesidad de aprender cosas antiguas hasta que realmente lo necesites (es muy probable que no lo hagas). -Then the DOM standard appeared, in an attempt to bring everyone to an agreement. The first version was "DOM Level 1", then it was extended by DOM Level 2, then DOM Level 3, and now it's reached DOM Level 4. People from WhatWG group got tired of version numbers and are calling it just "DOM", without a number. So we'll do the same. +Luego apareció el estándar DOM, en un intento de llevar a todos a un acuerdo. La primera versión fue "DOM Level 1", luego fue extendida por DOM Level 2, luego DOM Level 3, y ahora llegó a DOM Level 4. La gente del grupo WhatWG se cansó de los números de versión y lo están llamando simplemente "DOM", sin un numero. Así que haremos lo mismo. -```smart header="DOM is not only for browsers" -The DOM specification explains the structure of a document and provides objects to manipulate it. There are non-browser instruments that use it too. +```smart header="DOM no es solo para navegadores" +La especificación DOM explica la estructura de un documento y proporciona objetos para manipularlo. Hay instrumentos que no son del navegador que también lo utilizan. -For instance, server-side tools that download HTML pages and process them use the DOM. They may support only a part of the specification though. +Por ejemplo, las herramientas del lado del servidor que descargan páginas HTML y las procesan utilizan el DOM. Sin embargo, pueden soportar solo una parte de la especificación. ``` -```smart header="CSSOM for styling" -CSS rules and stylesheets are not structured like HTML. There's a separate specification [CSSOM](https://www.w3.org/TR/cssom-1/) that explains how they are represented as objects, and how to read and write them. +```smart header="CSSOM para los estilos" +Las reglas CSS y las hojas de estilo no están estructuradas como HTML. Hay una especificación [CSSOM](https://www.w3.org/TR/cssom-1/) separada, que explica cómo se representan como objetos, y cómo leerlos y escribirlos. -CSSOM is used together with DOM when we modify style rules for the document. In practice though, CSSOM is rarely required, because usually CSS rules are static. We rarely need to add/remove CSS rules from JavaScript, so we won't cover it right now. +CSSOM se usa junto con DOM cuando modificamos las reglas de estilo para el documento. En la práctica, sin embargo, rara vez se requiere CSSOM, porque generalmente las reglas de CSS son estáticas. Rara vez necesitamos agregar/eliminar reglas CSS desde JavaScript, por lo que no lo cubriremos ahora. ``` -## BOM (part of HTML spec) +## BOM (parte de la especificación HTML) -Browser Object Model (BOM) are additional objects provided by the browser (host environment) to work with everything except the document. +El Modelo de Objetos del Navegador (BOM) son objetos adicionales proporcionados por el navegador (entorno host) para trabajar con todo excepto el documento. -For instance: +Por ejemplo: -- The [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operating system. There are many properties, but the two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differ between Windows/Linux/Mac etc). -- The [location](mdn:api/Window/location) object allows us to read the current URL and can redirect the browser to a new one. +- El objeto [navigator](mdn:api/Window/navigator), proporciona información sobre el navegador y el sistema operativo. Hay muchas propiedades, pero las dos más conocidas son: `navigator.userAgent` -- sobre el navegador actual, y `navigator.platform` -- sobre la plataforma (puede ayudar a diferenciar entre Windows/Linux/Mac, etc.). -Here's how we can use the `location` object: +El objeto [location](mdn:api/Window/location), nos permite leer la URL actual y puede redirigir el navegador a uno nuevo. + +Aquí vemos cómo podemos usar el objeto `location`: ```js run -alert(location.href); // shows current URL +alert(location.href); // muestra la URL actual if (confirm("Go to wikipedia?")) { - location.href = "https://wikipedia.org"; // redirect the browser to another URL + location.href = "https://wikipedia.org"; // redirigir el navegador a otra URL } ``` -Functions `alert/confirm/prompt` are also a part of BOM: they are directly not related to the document, but represent pure browser methods of communicating with the user. - +Las funciones `alert/confirm/prompt` también forman parte de BOM: no están directamente relacionadas con el documento, sino que representan métodos de comunicación puros con el usuario. -```smart header="HTML specification" -BOM is the part of the general [HTML specification](https://html.spec.whatwg.org). +```smart header="Especificación de HTML" +BOM es la parte general de la especificación de HTML. -Yes, you heard that right. The HTML spec at is not only about the "HTML language" (tags, attributes), but also covers a bunch of objects, methods and browser-specific DOM extensions. That's "HTML in broad terms". +Sí, oíste bien. La especificación HTML en no solo trata sobre el "lenguaje HTML" (etiquetas, atributos), sino que también cubre un montón de objetos, métodos y extensiones DOM específicas del navegador. Eso es "HTML en términos generales". ``` -## Summary +## Resumen -Talking about standards, we have: +Hablando de estándares, tenemos: -DOM specification -: Describes the document structure, manipulations and events, see . +La especificación del DOM +: Describe la estructura del documento, las manipulaciones y los eventos, consulte . -CSSOM specification -: Describes stylesheets and style rules, manipulations with them and their binding to documents, see . +La especificación del CSSOM +: Describe las hojas de estilo y las reglas de estilo, las manipulaciones con ellas y su vinculación a los documentos, consulte . -HTML specification -: Describes the HTML language (e.g. tags) and also the BOM (browser object model) -- various browser functions: `setTimeout`, `alert`, `location` and so on, see . It takes the DOM specification and extends it with many additional properties and methods. +La especificación del HTML +: Describe el lenguaje HTML (por ejemplo, etiquetas) y también el BOM (modelo de objeto del navegador) -- varias funciones del navegador: `setTimeout`, `alert`, `location`, etc., consulte . Toma la especificación DOM y la extiende con muchas propiedades y métodos adicionales. -Now we'll get down to learning DOM, because the document plays the central role in the UI. +Ahora nos ocuparemos de aprender DOM, porque el documento juega el papel central en la interfaz de usuario. -Please note the links above, as there's so much stuff to learn it's impossible to cover and remember everything. +Ten en cuenta los enlaces anteriores, ya que hay tantas cosas que aprender que es imposible cubrir y recordar todo. -When you'd like to read about a property or a method, the Mozilla manual at is a nice resource, but reading the corresponding spec may be better: it's more complex and longer to read, but will make your fundamental knowledge sound and complete. +Cuando desees leer sobre una propiedad o un método, el manual de Mozilla en es un buen recurso, pero leer las especificaciones correspondientes puede ser mejor: es más complejo y más para leer, pero hará que su conocimiento de los fundamentos sea sólido y completo. From cd0520494fcc6e5409830aa7a416296dd3b025cf Mon Sep 17 00:00:00 2001 From: victorze Date: Wed, 27 Feb 2019 18:49:51 -0500 Subject: [PATCH 2/3] Traslate DOM nodes --- 2-ui/1-document/02-dom-nodes/article.md | 185 ++++++++++++------------ 1 file changed, 92 insertions(+), 93 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index a701fb0ce..2205dba03 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -4,70 +4,69 @@ libs: --- -# DOM tree +# EL árbol DOM -The backbone of an HTML document are tags. +La columna vertebral de un documento HTML son las etiquetas. -According to Document Object Model (DOM), every HTML-tag is an object. Nested tags are called "children" of the enclosing one. +De acuerdo con el Modelo de Objetos del Documento (DOM), cada etiqueta HTML es un objeto. Las etiquetas anidadas se llaman "hijos" del que los contiene. -The text inside a tag it is an object as well. +El texto dentro de una etiqueta también es un objeto. -All these objects are accessible using JavaScript. +Todos estos objetos son accesibles utilizando JavaScript. -## An example of DOM +## Un ejemplo del DOM -For instance, let's explore the DOM for this document: +Por ejemplo, exploremos el DOM para este documento: ```html run no-beautify - About elks + Sobre los Alces - The truth about elks. + La verdad sobre los alces. ``` - -The DOM represents HTML as a tree structure of tags. Here's how it looks: +El DOM representa el HTML como una estructura de árbol de etiquetas. Así es como se ve:
```online -On the picture above, you can click on element nodes and their children will open/collapse. +En la imagen de arriba, puede hacer clic en los nodos de elementos y sus hijos se abrirán/contraerán. ``` -Tags are called *element nodes* (or just elements). Nested tags become children of the enclosing ones. As a result we have a tree of elements: `` is at the root, then `` and `` are its children, etc. +Las etiquetas se denominan *nodos de elementos* (o simplemente elementos). Las etiquetas anidadas se convierten en hijos del que los contiene. Como resultado tenemos un árbol de elementos: `` está en la raíz, entonces `` y `` son sus hijos, etc. -The text inside elements forms *text nodes*, labelled as `#text`. A text node contains only a string. It may not have children and is always a leaf of the tree. +El texto dentro de los elementos forman *nodos de texto*, etiquetados como `#text`. Un nodo de texto contiene sólo una cadena. Puede que no tenga hijos y siempre es una hoja del árbol. -For instance, the `` tag has the text `"About elks"`. +Por ejemplo, la etiqueta `<title>` tiene el texto `"Sobre los alces"`. -Please note the special characters in text nodes: +Ten en cuenta los caracteres especiales en los nodos de texto: -- a newline: `↵` (in JavaScript known as `\n`) -- a space: `␣` +- Una nueva linea: `↵` (en JavaScript se conoce como `\n`) +- Un espacio: `␣` -Spaces and newlines -- are totally valid characters, they form text nodes and become a part of the DOM. So, for instance, in the example above the `<head>` tag contains some spaces before `<title>`, and that text becomes a `#text` node (it contains a newline and some spaces only). +Los espacios y las nuevas líneas son caracteres totalmente válidos, forman nodos de texto y se convierten en parte del DOM. Así, por ejemplo, en el ejemplo anterior, la etiqueta `<head>` contiene algunos espacios antes de `<title>`, y ese texto se convierte en un nodo `#text` (contiene una nueva línea y solo algunos espacios). -There are only two top-level exclusions: -1. Spaces and newlines before `<head>` are ignored for historical reasons, -2. If we put something after `</body>`, then that is automatically moved inside the `body`, at the end, as the HTML spec requires that all content must be inside `<body>`. So there may be no spaces after `</body>`. +Solo hay dos exclusiones de nivel superior: +1. Los espacios y las nuevas líneas antes de `<head>` se ignoran por razones históricas, +2. Si colocamos algo después de `</body>`, entonces eso se mueve automáticamente dentro de `body`, al final, ya que la especificación HTML requiere que todo el contenido esté dentro de `<body>`. Así que puede que no haya espacios después de `</body>`. -In other cases everything's straightforward -- if there are spaces (just like any character) in the document, then they become text nodes in DOM, and if we remove them, then there won't be any. +En los demás casos, todo es más sencillo: si hay espacios (como cualquier carácter) en el documento, entonces se convierten en nodos de texto en el DOM, y si los eliminamos, entonces no habrá ninguno. -Here are no space-only text nodes: +Aquí no hay nodos de texto de solo espacios: ```html no-beautify <!DOCTYPE HTML> -<html><head><title>About elksThe truth about elks. +Sobre los alcesLa verdad sobre los alces. ```
@@ -78,22 +77,22 @@ let node2 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node2, 'div.domtree', 690, 210); -```smart header="Edge spaces and in-between empty text are usually hidden in tools" -Browser tools (to be covered soon) that work with DOM usually do not show spaces at the start/end of the text and empty text nodes (line-breaks) between tags. +```smart header="Los espacios de borde y el texto vacío intermedio suelen estar ocultos en las herramientas" +Las herramientas del navegador (que se cubrirán pronto) que trabajan con el DOM generalmente no muestran espacios al inicio/final del texto y nodos de texto vacíos (saltos de línea) entre etiquetas. -That's because they are mainly used to decorate HTML, and do not affect how it is shown (in most cases). +Esto se debe a que se utilizan principalmente para decorar el HTML y no afectan la forma en que se muestra (en la mayoría de los casos). -On further DOM pictures we'll sometimes omit them where they are irrelevant, to keep things short. +En otras imágenes de DOM, a veces las omitimos donde son irrelevantes, para mantener las cosas cortas. ``` -## Autocorrection +## Autocorrecctión -If the browser encounters malformed HTML, it automatically corrects it when making DOM. +Si el navegador encuentra HTML con formato incorrecto, lo corrige automáticamente al crear el DOM. -For instance, the top tag is always ``. Even if it doesn't exist in the document -- it will exist in the DOM, the browser will create it. The same goes for ``. +Por ejemplo, la etiqueta superior siempre es ``. Incluso si no existe en el documento, existirá en el DOM, el navegador lo creará. Lo mismo ocurre con ``. -As an example, if the HTML file is a single word `"Hello"`, the browser will wrap it into `` and ``, add the required ``, and the DOM will be: +Como ejemplo, si el archivo HTML es una sola palabra "Hola", el navegador lo incluirá en `` y ``, agregará el `` requerido, y el DOM será:
@@ -104,9 +103,9 @@ let node3 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node3, 'div.domtree', 690, 150); -While generating the DOM, browsers automatically process errors in the document, close tags and so on. +Al generar el DOM, los navegadores procesan automáticamente los errores en el documento, cierran etiquetas, etc. -Such an "invalid" document: +El siguiente documento "inválido": ```html no-beautify

Hello @@ -115,7 +114,7 @@ Such an "invalid" document:

  • Dad ``` -...Will become a normal DOM, as the browser reads tags and restores the missing parts: +...se convertirá en un DOM normal, ya que el navegador lee las etiquetas y restaura las partes faltantes:
    @@ -125,16 +124,16 @@ let node4 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node4, 'div.domtree', 690, 360); -````warn header="Tables always have ``" -An interesting "special case" is tables. By the DOM specification they must have ``, but HTML text may (officially) omit it. Then the browser creates `` in DOM automatically. +````warn header="Las tablas siempre tienen ``" +Un interesante "caso especial" son las tablas. Según la especificación del DOM, deben tener ``, pero el texto HTML puede omitirlo. Entonces el navegador crea `` en el DOM automáticamente. -For the HTML: +Para el HTML: ```html no-beautify
    1
    ``` -DOM-structure will be: +La estructura DOM será:
    -You see? The `` appeared out of nowhere. You should keep this in mind while working with tables to avoid surprises. +¿Lo ves? El `` apareció de la nada. Debes tener esto en cuenta cuando trabajes con tablas para evitar sorpresas. ```` -## Other node types +## Otros tipos de nodos -Let's add more tags and a comment to the page: +Agreguemos más etiquetas y un comentario a la página: ```html - The truth about elks. + La verdad sobre los alces.
      -
    1. An elk is a smart
      2. +
    2. Un alce es inteligente.
      3. *!* - + */!* -
    3. ...and cunning animal!
      4. +
    4. ...y un astuto animal!
    @@ -169,93 +168,93 @@ Let's add more tags and a comment to the page:
    -Here we see a new tree node type -- *comment node*, labeled as `#comment`. +Aquí vemos un nuevo tipo de nodo de árbol: el *nodo comentario*, etiquetado como `#comment`. -We may think -- why a comment is added to the DOM? It doesn't affect the visual representation in any way. But there's a rule -- if something's in HTML, then it also must be in the DOM tree. +Podemos pensar: ¿por qué se agrega un comentario al DOM? No afecta a la representación visual de ninguna manera. Pero hay una regla: si algo está en el HTML, entonces también debe estar en el árbol DOM. -**Everything in HTML, even comments, becomes a part of the DOM.** +**Todo en el HTML, incluso los comentarios, se convierten en parte del DOM.** -Even the `` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before ``. We are not going to touch that node, we even don't draw it on diagrams for that reason, but it's there. +Incluso la directiva `` al principio de HTML también es un nodo DOM. Está en el árbol DOM justo antes de ``. No vamos a tocar ese nodo, ni siquiera lo dibujamos en diagramas por esa razón, pero está ahí. -The `document` object that represents the whole document is, formally, a DOM node as well. +El objeto `document` que representa todo el documento es, formalmente, un nodo DOM también. -There are [12 node types](https://dom.spec.whatwg.org/#node). In practice we usually work with 4 of them: +Hay [12 tipos](https://dom.spec.whatwg.org/#node) de nodos. En la práctica solemos trabajar solo con 4 de ellos: -1. `document` -- the "entry point" into DOM. -2. element nodes -- HTML-tags, the tree building blocks. -3. text nodes -- contain text. -4. comments -- sometimes we can put the information there, it won't be shown, but JS can read it from the DOM. +1. document - el "punto de entrada" en el DOM. +2. Nodos de elementos: etiquetas HTML, los bloques de construcción del árbol. +3. Nodos de texto: contienen texto. +4. Comentarios: a veces podemos poner la información allí, no se mostrará, pero JS puede leerla desde el DOM. -## See it for yourself +## Velo por ti 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 DOM at an instant. +Para ver la estructura del DOM en tiempo real, prueba [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Simplemente escriba el documento y se mostrará el DOM en un instante. -## In the browser inspector +## El inspector del navegador. -Another way to explore the DOM is to use the browser developer tools. Actually, that's what we use when developing. +Otra forma de explorar el DOM es usar las herramientas de desarrollo del navegador. En realidad, eso es lo que usamos al desarrollar. -To do so, open the web-page [elks.html](elks.html), turn on the browser developer tools and switch to the Elements tab. +Para hacerlo, abre la página web [elks.html](elks.html), activa las herramientas de desarrollo del navegador y cambia a la pestaña Elementos. -It should look like this: +Debe tener el siguiente aspecto: ![](elks.png) -You can see the DOM, click on elements, see their details and so on. +Puedes ver el DOM, hacer clic en los elementos, ver sus detalles y así sucesivamente. -Please note that the DOM structure in developer tools is simplified. Text nodes are shown just as text. And there are no "blank" (space only) text nodes at all. That's fine, because most of the time we are interested in element nodes. +Ten en cuenta que la estructura DOM en las herramientas de desarrollo está simplificada. Los nodos de texto se muestran solo como texto. Y no hay nodos de texto "en blanco" (solo espacio) en absoluto. Eso está bien, porque la mayoría de las veces estamos interesados ​​en los nodos de elementos. -Clicking the button in the left-upper corner allows to choose a node from the webpage using a mouse (or other pointer devices) and "inspect" it (scroll to it in the Elements tab). This works great when we have a huge HTML page (and corresponding huge DOM) and would like to see the place of a particular element in it. +Al hacer clic en el botón en la esquina superior izquierda, se puede elegir un nodo de la página web usando un mouse (u otros dispositivos de puntero) e "inspeccionarlo" (desplácese hasta él en la pestaña Elementos). Esto funciona muy bien cuando tenemos una gran página HTML (y el enorme DOM correspondiente) y nos gustaría ver el lugar de un elemento particular en ella. -Another way to do it would be just right-clicking on a webpage and selecting "Inspect" in the context menu. +Otra forma de hacerlo sería simplemente haciendo clic derecho en una página web y seleccionando "Inspeccionar" en el menú contextual. ![](inspect.png) -At the right part of the tools there are the following subtabs: -- **Styles** -- we can see CSS applied to the current element rule by rule, including built-in rules (gray). Almost everything can be edited in-place, including the dimensions/margins/paddings of the box below. -- **Computed** -- to see CSS applied to the element by property: for each property we can see a rule that gives it (including CSS inheritance and such). -- **Event Listeners** -- to see event listeners attached to DOM elements (we'll cover them in the next part of the tutorial). -- ...and so on. +En la parte derecha de las herramientas puedes observar las siguientes subpestañas: +- **Styles**: podemos ver el CSS aplicado al elemento actual, incluidas las reglas utilizadas (gris). Casi todo se puede editar en el lugar, incluidas las dimensiones/márgenes/rellenos. +- **Computed**: para ver el CSS aplicado al elemento por propiedad, para cada propiedad podemos ver su origen (incluida la herencia de CSS y demás). +- **Event Listeners**: para ver detectores de eventos adjuntos a elementos DOM (los cubriremos en la siguiente parte del tutorial). +- ...y así. -The best way to study them is to click around. Most values are editable in-place. +La mejor manera de estudiarlos es hacer clic en ellos. La mayoría de los valores son editables en el lugar. -## Interaction with console +## Interacción con la consola. -As we explore the DOM, we also may want to apply JavaScript to it. Like: get a node and run some code to modify it, to see how it looks. Here are few tips to travel between the Elements tab and the console. +A medida que exploramos el DOM, es posible que quieras aplicarle JavaScript. Como obtener un nodo y ejecutar algún código para modificarlo, para ver cómo se ve. Aquí hay algunos consejos para moverse entre la pestaña Elementos y la consola. -- Select the first `
  • ` in the Elements tab. -- Press `key:Esc` -- it will open console right below the Elements tab. +- Selecciona el primer `
  • ` en la pestaña Elementos. +- Presiona `key:Esc`: se abrirá la consola justo debajo de la pestaña Elementos. -Now the last selected element is available as `$0`, the previously selected is `$1` etc. +Ahora el último elemento seleccionado está disponible como `$0`, el seleccionado previamente es `$1`, etc. -We can run commands on them. For instance, `$0.style.background = 'red'` makes the selected list item red, like this: +Podemos ejecutar comandos sobre ellos. Por ejemplo, `$0.style.background = 'red'` hace que el elemento de la lista seleccionada se vuelva rojo, así: ![](domconsole0.png) -From the other side, if we're in console and have a variable referencing a DOM node, then we can use the command `inspect(node)` to see it in the Elements pane. +Desde el otro lado, si estamos en la consola y tenemos una variable que hace referencia a un nodo DOM, entonces podemos usar el comando `inspect(node)` para verlo en el panel Elementos. -Or we can just output it in the console and explore "at-place", like `document.body` below: +O simplemente podemos mostrarlo en la consola y explorar "en el lugar", como `document.body` en la siguiente imagen: ![](domconsole1.png) -That's for debugging purposes of course. From the next chapter on we'll access and modify DOM using JavaScript. +Eso es para propósitos de depuración, por supuesto. A partir del siguiente capítulo, accederemos y modificaremos el DOM usando JavaScript. -The browser developer tools are a great help in development: we can explore the DOM, try things and see what goes wrong. +Las herramientas de desarrollo del navegador son de gran ayuda en el desarrollo: podemos explorar el DOM, probar cosas y ver qué falla. -## Summary +## Resumen -An HTML/XML document is represented inside the browser as the DOM tree. +Un documento HTML/XML se representa dentro del navegador como el árbol DOM. -- Tags become element nodes and form the structure. -- Text becomes text nodes. -- ...etc, everything in HTML has its place in DOM, even comments. +- Las etiquetas se convierten en nodos de elementos y forman la estructura. +- El texto se convierte en nodos de texto. +- ...etc, todo en el HTML tiene su lugar en el DOM, incluso los comentarios. -We can use developer tools to inspect DOM and modify it manually. +Podemos usar las herramientas de desarrollo para inspeccionar el DOM y modificarlo manualmente. -Here we covered the basics, the most used and important actions to start with. There's an extensive documentation about Chrome Developer Tools at . The best way to learn the tools is to click here and there, read menus: most options are obvious. Later, when you know them in general, read the docs and pick up the rest. +Aquí cubrimos lo básico, las acciones más usadas e importantes para comenzar. Hay una extensa documentación sobre las Herramientas de desarrollo de Chrome en . La mejor manera de aprender las herramientas es haciendo clic aquí y allá, leyendo los menús: la mayoría de las opciones son obvias. Más tarde, cuando los conozcas, lee la documentación y explora el resto. -DOM nodes have properties and methods that allow to travel between them, modify, move around the page and more. We'll get down to them in the next chapters. +Los nodos DOM tienen propiedades y métodos que permiten viajar entre ellos, modificarlos, moverse por la página y más. Nos pondremos en contacto con ellos en los próximos capítulos. From df649798b69571efc923463aba16b768bfbcd7af Mon Sep 17 00:00:00 2001 From: victorze Date: Thu, 7 Mar 2019 17:18:50 -0500 Subject: [PATCH 3/3] update --- 2-ui/1-document/01-browser-environment/article.md | 9 ++++----- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 2daea21ab..604e6139f 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -2,7 +2,7 @@ El lenguaje JavaScript fue creado inicialmente para los navegadores web. Desde entonces, ha evolucionado y se ha convertido en un lenguaje con muchos usos y plataformas. -Una plataforma puede ser un navegador, un servidor web, una lavadora u otro *host*. Cada uno de ellos proporciona una funcionalidad específica. La especificación de JavaScript lo llama *entorno host*. +Una plataforma puede ser un navegador, un servidor web, una lavadora u otro *host (anfitrión)*. Cada uno de ellos proporciona una funcionalidad específica. La especificación de JavaScript lo llama *entorno host*. Un entorno host proporciona objetos específicos de la plataforma y funciones adicionales al núcleo del lenguaje. Los navegadores web proporcionan un medio para controlar las páginas web. Node.JS proporciona características del lado del servidor, y así sucesivamente. @@ -56,7 +56,7 @@ Como es de esperar, los dos grupos no siempre están de acuerdo, así que es com Personalmente, encuentro más agradable de usar. -En el pasado lejano, no existía ninguna norma en absoluto: cada navegador se implementaba como quería. Diferentes navegadores tenían diferentes métodos y propiedades para la misma cosa, y los desarrolladores tenían que escribir un código diferente para cada uno de ellos. Tiempos oscuros, desordenados. +En el pasado lejano, no existía ninguna norma en absoluto: cada navegador lo implementaba como quería. Diferentes navegadores tenían diferentes métodos y propiedades para la misma cosa, y los desarrolladores tenían que escribir un código diferente para cada uno de ellos. Tiempos oscuros, desordenados. Incluso ahora, podemos encontrarnos con código antiguo que usa propiedades específicas del navegador y soluciona las incompatibilidades. Pero, en este tutorial usaremos cosas modernas: no hay necesidad de aprender cosas antiguas hasta que realmente lo necesites (es muy probable que no lo hagas). @@ -81,8 +81,7 @@ El Modelo de Objetos del Navegador (BOM) son objetos adicionales proporcionados Por ejemplo: - El objeto [navigator](mdn:api/Window/navigator), proporciona información sobre el navegador y el sistema operativo. Hay muchas propiedades, pero las dos más conocidas son: `navigator.userAgent` -- sobre el navegador actual, y `navigator.platform` -- sobre la plataforma (puede ayudar a diferenciar entre Windows/Linux/Mac, etc.). - -El objeto [location](mdn:api/Window/location), nos permite leer la URL actual y puede redirigir el navegador a uno nuevo. +- El objeto [location](mdn:api/Window/location), nos permite leer la URL actual y puede redirigir el navegador a uno nuevo. Aquí vemos cómo podemos usar el objeto `location`: @@ -96,7 +95,7 @@ if (confirm("Go to wikipedia?")) { Las funciones `alert/confirm/prompt` también forman parte de BOM: no están directamente relacionadas con el documento, sino que representan métodos de comunicación puros con el usuario. ```smart header="Especificación de HTML" -BOM es la parte general de la especificación de HTML. +BOM es la parte general de la especificación de HTML [HTML specification](https://html.spec.whatwg.org). Sí, oíste bien. La especificación HTML en no solo trata sobre el "lenguaje HTML" (etiquetas, atributos), sino que también cubre un montón de objetos, métodos y extensiones DOM específicas del navegador. Eso es "HTML en términos generales". ``` diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 2205dba03..b45ffd914 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -114,7 +114,7 @@ El siguiente documento "inválido":
  • Dad ``` -...se convertirá en un DOM normal, ya que el navegador lee las etiquetas y restaura las partes faltantes: +...Se convertirá en un DOM normal, ya que el navegador lee las etiquetas y restaura las partes faltantes: