From 78a2c32841c8e7c9ac658a102ca629bce310a3eb Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Mon, 27 Jul 2020 10:18:36 +0200 Subject: [PATCH 01/23] Traducido --- 2-ui/3-event-details/8-onscroll/article.md | 30 +++++++++++----------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/2-ui/3-event-details/8-onscroll/article.md b/2-ui/3-event-details/8-onscroll/article.md index 7b5cf4848..2b3cab993 100644 --- a/2-ui/3-event-details/8-onscroll/article.md +++ b/2-ui/3-event-details/8-onscroll/article.md @@ -1,12 +1,12 @@ -# Scrolling +# Desplazamiento -The `scroll` event allows to react on a page or element scrolling. There are quite a few good things we can do here. +El evento `scroll` permite reaccionar en una página o elemento de desplazamiento. Hay bastantes cosas buenas que podemos hacer aquí. -For instance: -- Show/hide additional controls or information depending on where in the document the user is. -- Load more data when the user scrolls down till the end of the page. +Por ejemplo: +- Mostrar/ocultar controles o información adicional según el lugar del documento en el que se encuentre el/la usuario/a. +- Cargar más datos cuando el/la usuario/a se desplaza hacia abajo hasta el final del documento. -Here's a small function to show the current scroll: +Aquí hay una pequeña función para mostrar el desplazamiento actual: ```js autorun window.addEventListener('scroll', function() { @@ -17,21 +17,21 @@ window.addEventListener('scroll', function() { ```online In action: -Current scroll = scroll the window +Desplazamiento actual = Desplazamiento por la ventana ``` -The `scroll` event works both on the `window` and on scrollable elements. +El evento `scroll` funciona tanto en `window` como en los elementos desplazables. -## Prevent scrolling +## Evitar el desplazamiento -How do we make something unscrollable? +¿Qué hacemos para que algo no se pueda desplazar? -We can't prevent scrolling by using `event.preventDefault()` in `onscroll` listener, because it triggers *after* the scroll has already happened. +No podemos evitar el desplazamiento utilizando `event.preventDefault()` en el oyente `onscroll`, porque se activa *después* de que el desplazamiento haya ocurrido. -But we can prevent scrolling by `event.preventDefault()` on an event that causes the scroll, for instance `keydown` event for `key:pageUp` and `key:pageDown`. +Pero podemos prevenir el desplazamiento con `event.preventDefault()` en un evento que cause el desplazamiento, por ejemplo en el evento `keydown` para `key:pageUp` y `key:pageDown`. -If we add an event handler to these events and `event.preventDefault()` in it, then the scroll won't start. +Si añadimos un manejador de eventos a estos eventos y un `event.preventDefault()` en el manejador, entonces el desplazamiento no se iniciará. -There are many ways to initiate a scroll, so it's more reliable to use CSS, `overflow` property. +Hay muchas maneras de iniciar un desplazamiento, la más fiable es usar CSS, la propiedad `overflow`. -Here are few tasks that you can solve or look through to see the applications on `onscroll`. +Aquí hay algunas tareas que puedes resolver o mirar para ver las aplicaciones de `onscroll`. From 91310a991caf510e52263232780b478222ed547d Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Mon, 27 Jul 2020 11:05:53 +0200 Subject: [PATCH 02/23] Traducido --- .../8-onscroll/1-endless-page/task.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/task.md b/2-ui/3-event-details/8-onscroll/1-endless-page/task.md index 7c8d14fca..8487f212d 100644 --- a/2-ui/3-event-details/8-onscroll/1-endless-page/task.md +++ b/2-ui/3-event-details/8-onscroll/1-endless-page/task.md @@ -2,19 +2,19 @@ importance: 5 --- -# Endless page +# Página sin fin -Create an endless page. When a visitor scrolls it to the end, it auto-appends current date-time to the text (so that a visitor can scroll more). +Crear una página interminable. Cuando un visitante la desplace hasta el final, se va a auto-pegar la fecha y hora actual al texto (así el visitante podrá seguir desplazándose) -Like this: +Así: [iframe src="solution" height=200] -Please note two important features of the scroll: +Por favor tenga en cuenta dos características importantes del desplazamiento: -1. **The scroll is "elastic".** We can scroll a little beyond the document start or end in some browsers/devices (empty space below is shown, and then the document will automatically "bounces back" to normal). -2. **The scroll is imprecise.** When we scroll to page end, then we may be in fact like 0-50px away from the real document bottom. +1. **El scroll es "elastico".** Podemos desplazarnos un poco más allá del inicio o final del documento en algunos navegadores/dispositivos (se muestra un espacio vacío abajo, y luego el documento "rebota" automáticamente a la normalidad). +2. **El scroll es impreciso.** Cuando nos desplazamos hasta el final de la página, podemos estar de hecho como a 0-50px del fondo del documento real. -So, "scrolling to the end" should mean that the visitor is no more than 100px away from the document end. +Así que, "desplazarse hasta el final" debería significar que el visitante no está a más de 100px del final del documento. -P.S. In real life we may want to show "more messages" or "more goods". +P.D. En la vida real podemos querer mostrar "más mensajes" o "más mejoras". From c17d0150baec655c8cb078c2711a543993e564ae Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Fri, 31 Jul 2020 17:43:55 +0200 Subject: [PATCH 03/23] Correciones --- 2-ui/3-event-details/8-onscroll/1-endless-page/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/task.md b/2-ui/3-event-details/8-onscroll/1-endless-page/task.md index 8487f212d..46ba3dbd5 100644 --- a/2-ui/3-event-details/8-onscroll/1-endless-page/task.md +++ b/2-ui/3-event-details/8-onscroll/1-endless-page/task.md @@ -12,7 +12,7 @@ Así: Por favor tenga en cuenta dos características importantes del desplazamiento: -1. **El scroll es "elastico".** Podemos desplazarnos un poco más allá del inicio o final del documento en algunos navegadores/dispositivos (se muestra un espacio vacío abajo, y luego el documento "rebota" automáticamente a la normalidad). +1. **El scroll es "elástico".** En algunos navegadores/dispositivos podemos desplazarnos un poco más allá del inicio o final del documento (se muestra un espacio vacío abajo, y luego el documento "rebota" automáticamente a la normalidad). 2. **El scroll es impreciso.** Cuando nos desplazamos hasta el final de la página, podemos estar de hecho como a 0-50px del fondo del documento real. Así que, "desplazarse hasta el final" debería significar que el visitante no está a más de 100px del final del documento. From ac1313ae0e74f678edaa6e6244ac70f5cd9bbdf9 Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Fri, 31 Jul 2020 18:13:43 +0200 Subject: [PATCH 04/23] Traducido --- .../8-onscroll/1-endless-page/solution.md | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md index 10945ccd7..4247c3a45 100644 --- a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md +++ b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md @@ -1,63 +1,63 @@ -The core of the solution is a function that adds more dates to the page (or loads more stuff in real-life) while we're at the page end. +El núcleo de la solución es una función que añade más fechas a la página (o carga más cosas en la vida real) mientras estamos en el final de la página. -We can call it immediately and add as a `window.onscroll` handler. +Podemos llamarlo inmediatamente o agregarlo como un manejador de `window.onscroll`. -The most important question is: "How do we detect that the page is scrolled to bottom?" +La pregunta más importante es: "¿Cómo detectamos que la página se desplaza hasta el fondo?" -Let's use window-relative coordinates. +Usaremos las coordenadas de la ventana. -The document is represented (and contained) within `` tag, that is `document.documentElement`. +El documento está representado (y contenido) dentro de la etiqueta ``, que es `document.documentElement`. -We can get window-relative coordinates of the whole document as `document.documentElement.getBoundingClientRect()`, the `bottom` property will be window-relative coordinate of the document bottom. +Podemos obtener las coordenadas relativas a la ventana de todo el documento como `document.documentElement.getBoundingClientRect()`, la propiedad `bottom` será la coordenada relativa a la ventana del fondo del documento. -For instance, if the height of the whole HTML document is `2000px`, then: +Por ejemplo, si la altura de todo el documento es `2000px`, entonces: ```js -// when we're on the top of the page -// window-relative top = 0 +// cuando estamos en la parte superior de la página +// ventana-relativa superior = 0 document.documentElement.getBoundingClientRect().top = 0 -// window-relative bottom = 2000 -// the document is long, so that is probably far beyond the window bottom +// ventana-relativa inferior = 2000 +// el documento es largo, así que probablemente esté más allá del fondo de la ventana document.documentElement.getBoundingClientRect().bottom = 2000 ``` -If we scroll `500px` below, then: +Si nos desplazamos `500px` abajo, entonces: ```js -// document top is above the window 500px +// la parte superior del documento está 500px por encima de la ventana document.documentElement.getBoundingClientRect().top = -500 -// document bottom is 500px closer +// la parte inferior del documento está 500px más cerca document.documentElement.getBoundingClientRect().bottom = 1500 ``` -When we scroll till the end, assuming that the window height is `600px`: +Cuando nos desplazamos hasta el final, asumiendo que la altura de la venta es `600px`: ```js -// document top is above the window 1400px +// La parte superior del documento está 1400px sobre la ventana document.documentElement.getBoundingClientRect().top = -1400 -// document bottom is below the window 600px +// la parte inferior del documento está a 600px debajo de la ventana document.documentElement.getBoundingClientRect().bottom = 600 ``` -Please note that the `bottom` can't be `0`, because it never reaches the window top. The lowest limit of the `bottom` coordinate is the window height (we assumed it to be `600`), we can't scroll it any more up. +Tened en cuenta que el `fondo` del documento nunca puede ser `0`, porque nunca llega a la parte superior de la ventana. El límite más bajo de la coordenada `inferior` es la altura de la ventana(asumimos que es `600`), no podemos desplazarla más hacia arriba. -We can obtain the window height as `document.documentElement.clientHeight`. +Podemos obtener la altura de la ventana con `document.documentElement.clientHeight`. -For our task, we need to know when the document bottom is not no more than `100px` away from it (that is: `600-700px`, if the height is `600`). +Para nuestra tarea, necesitamos saber cuando tenemos el final del documento a unos `100px` (esto es: `600-700px`, si la altura es de `600`). -So here's the function: +Así que aquí está la función: ```js function populate() { while(true) { - // document bottom + // final del documento let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom; - // if the user scrolled far enough (<100px to the end) + // si el usuario se desplaza lo suficiente (<100px hasta el final) if (windowRelativeBottom < document.documentElement.clientHeight + 100) { - // let's add more data + // vamos añadir más datos document.body.insertAdjacentHTML("beforeend", `

Date: ${new Date()}

`); } } From 7966e0b6da48f869b6168e58eb462b589f4c2fbd Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Fri, 31 Jul 2020 18:19:34 +0200 Subject: [PATCH 05/23] Traducido --- .../8-onscroll/2-updown-button/task.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/2-ui/3-event-details/8-onscroll/2-updown-button/task.md b/2-ui/3-event-details/8-onscroll/2-updown-button/task.md index c9f0f6225..68ae9bd28 100644 --- a/2-ui/3-event-details/8-onscroll/2-updown-button/task.md +++ b/2-ui/3-event-details/8-onscroll/2-updown-button/task.md @@ -2,15 +2,15 @@ importance: 5 --- -# Up/down button +# Botón para subir/bajar -Create a "to the top" button to help with page scrolling. +Crea un botón "ir arriba" para ayudar con el desplazamiento de la página. -It should work like this: -- While the page is not scrolled down at least for the window height -- it's invisible. -- When the page is scrolled down more than the window height -- there appears an "upwards" arrow in the left-top corner. If the page is scrolled back, it disappears. -- When the arrow is clicked, the page scrolls to the top. +Debería funcionar así: +- Mientras que la página no se desplace hacia abajo al menos la altura de la ventana... es invisible. +- Cuando la página se desplaza hacia abajo más que la altura de la ventana -- aparece una flecha "hacia arriba" en la esquina superior izquierda. Si la página se desplaza hacia atrás desaparece. +- Cuando se hace click en la flecha, la página se desplaza hacia arriba. -Like this (top-left corner, scroll to see): +Así (esquina superior izquierda, desplácese para ver): [iframe border="1" height="200" link src="solution"] From 58c7f676dce62f6d4d6950aadf590c0b5dc46445 Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Fri, 31 Jul 2020 18:34:31 +0200 Subject: [PATCH 06/23] Traducido --- .../8-onscroll/3-load-visible-img/task.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md index 323788982..cd8b05461 100644 --- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md +++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md @@ -2,29 +2,29 @@ importance: 4 --- -# Load visible images +# Cargar imágenes visibles -Let's say we have a slow-speed client and want to save their mobile traffic. +Digamos que tenemos un cliente con baja velocidad de conexión y queremos cuidar su tarifa de datos. -For that purpose we decide not to show images immediately, but rather replace them with placeholders, like this: +Para ello decidimos no mostrar las imágenes inmediatemente, sino sustituirlas por marcadores de posición, como este: ```html ``` -So, initially all images are `placeholder.svg`. When the page scrolls to the position where the user can see the image -- we change `src` to the one in `data-src`, and so the image loads. +Así que, inicialmente todas las imágenes son `placeholder.svg`. Cuando la página se desplaza a la posición donde el usuario puede ver la imagen -- cambiamos `src` a `data-src`, y así la imagen se carga. -Here's an example in `iframe`: +Aquí hay un ejemplo en `iframe`: [iframe src="solution"] -Scroll it to see images load "on-demand". +Desplázate para ver las imagenes cargadas "a la carta". -Requirements: -- When the page loads, those images that are on-screen should load immediately, prior to any scrolling. -- Some images may be regular, without `data-src`. The code should not touch them. -- Once an image is loaded, it should not reload any more when scrolled in/out. +Requerimientos: +- Cuando la página se carga, las imágenes que están en pantalla deben cargarse inmediatamente, antes de cualquier desplazamiento. +- Algunas imágenes pueden ser regulares, sin `data-src`. El código no debe tocarlas. +- Una vez que una imagen se carga, no debe recargarse más cuando haya desplazamiento arriba/abajo. -P.S. If you can, make a more advanced solution that would "preload" images that are one page below/after the current position. +P.S. Si puedes, haz una solución más avanzada para "precargar" las imágenes que están más abajo/después de la posición actual. -P.P.S. Only vertical scroll is to be handled, no horizontal scrolling. +P.P.S. Sólo se debe manejar el desplazamiento vertical, no el horizontal. From 3dbcac4bae7860beb970284d3b0409045528851b Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Fri, 31 Jul 2020 18:39:38 +0200 Subject: [PATCH 07/23] Traducido --- .../8-onscroll/3-load-visible-img/solution.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md index 1649251b9..42dbc7d36 100644 --- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md +++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md @@ -1,13 +1,13 @@ -The `onscroll` handler should check which images are visible and show them. +El manejador `onscroll` debería comprobar qué imágenes son visibles y mostrarlas. -We also want to run it when the page loads, to detect immediately visible images and load them. +También queremos ejecutarlo cuando se cargue la página, para detectar las imágenes inmeditamente visibles y cargarlas. -The code should execute when the document is loaded, so that it has access to its content. +El código debería ejecutarse cuando se cargue el documento, para que tenga acceso a su contenido. -Or put it at the `` bottom: +O ponerlo en la parte inferior del ``: ```js -// ...the page content is above... +// ...el contenido de la página esta arriva... function isVisible(elem) { @@ -15,17 +15,17 @@ function isVisible(elem) { let windowHeight = document.documentElement.clientHeight; - // top elem edge is visible? + // ¿El borde superior del elemento es visible? let topVisible = coords.top > 0 && coords.top < windowHeight; - // bottom elem edge is visible? + // ¿El borde inferior del elemento es visible? let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0; return topVisible || bottomVisible; } ``` -The `showVisible()` function uses the visibility check, implemented by `isVisible()`, to load visible images: +La función `showVisible()` utiliza el control de visibilidad, implementado por `isVisible()`, para cargar imágenes visibles: ```js function showVisible() { @@ -46,4 +46,4 @@ window.onscroll = showVisible; */!* ``` -P.S. The solution also has a variant of `isVisible` that "preloads" images that are within 1 page above/below the current document scroll. +P.S. La solución tiene una variante de `isVisible` que "precarga" imágenes que están dentro de 1 página por encima/debajo del desplazamiento del documento actual. From e6dda83705a6c211dbcea40755c6d617609e2200 Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Fri, 31 Jul 2020 18:40:39 +0200 Subject: [PATCH 08/23] Correciones --- .../3-event-details/8-onscroll/3-load-visible-img/solution.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md index 42dbc7d36..7dfcccfc9 100644 --- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md +++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md @@ -1,13 +1,13 @@ El manejador `onscroll` debería comprobar qué imágenes son visibles y mostrarlas. -También queremos ejecutarlo cuando se cargue la página, para detectar las imágenes inmeditamente visibles y cargarlas. +También queremos que se ejecute cuando se cargue la página, para detectar las imágenes inmeditamente visibles y cargarlas. El código debería ejecutarse cuando se cargue el documento, para que tenga acceso a su contenido. O ponerlo en la parte inferior del ``: ```js -// ...el contenido de la página esta arriva... +// ...el contenido de la página esta arriba... function isVisible(elem) { From d5d58d15b50b42aac98ddead4362783b6fcc7f95 Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Sat, 1 Aug 2020 14:37:34 +0200 Subject: [PATCH 09/23] Update 2-ui/3-event-details/8-onscroll/1-endless-page/solution.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/8-onscroll/1-endless-page/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md index 4247c3a45..1cc2f43cb 100644 --- a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md +++ b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md @@ -14,7 +14,7 @@ Por ejemplo, si la altura de todo el documento es `2000px`, entonces: ```js // cuando estamos en la parte superior de la página -// ventana-relativa superior = 0 +// window-relative top = 0 (relativo a la ventana, límite superior = 0 ) document.documentElement.getBoundingClientRect().top = 0 // ventana-relativa inferior = 2000 From efdc7ac2ddfb834a0e8e8c0f053e87f4d45fe3f9 Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Sat, 1 Aug 2020 14:37:45 +0200 Subject: [PATCH 10/23] Update 2-ui/3-event-details/8-onscroll/1-endless-page/solution.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/8-onscroll/1-endless-page/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md index 1cc2f43cb..49b5ae50c 100644 --- a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md +++ b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md @@ -17,7 +17,7 @@ Por ejemplo, si la altura de todo el documento es `2000px`, entonces: // window-relative top = 0 (relativo a la ventana, límite superior = 0 ) document.documentElement.getBoundingClientRect().top = 0 -// ventana-relativa inferior = 2000 +// window-relative bottom = 2000 (relativo a la ventana, límite inferior = 2000) // el documento es largo, así que probablemente esté más allá del fondo de la ventana document.documentElement.getBoundingClientRect().bottom = 2000 ``` From f39a7a4017887508a7f3af12bd73906e01558d8c Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Sat, 1 Aug 2020 14:38:02 +0200 Subject: [PATCH 11/23] Update 2-ui/3-event-details/8-onscroll/1-endless-page/solution.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/8-onscroll/1-endless-page/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md index 49b5ae50c..5f4e5d5f2 100644 --- a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md +++ b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md @@ -41,7 +41,7 @@ document.documentElement.getBoundingClientRect().top = -1400 document.documentElement.getBoundingClientRect().bottom = 600 ``` -Tened en cuenta que el `fondo` del documento nunca puede ser `0`, porque nunca llega a la parte superior de la ventana. El límite más bajo de la coordenada `inferior` es la altura de la ventana(asumimos que es `600`), no podemos desplazarla más hacia arriba. +Tened en cuenta que el fondo del documento `bottom` nunca puede ser `0`, porque nunca llega a la parte superior de la ventana. El límite más bajo de la coordenada `bottom` es la altura de la ventana (asumimos que es `600`), no podemos desplazarla más hacia arriba. Podemos obtener la altura de la ventana con `document.documentElement.clientHeight`. From 78a061c3b68bbe1554cdba389e73d788a1b870e6 Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Sat, 1 Aug 2020 14:38:14 +0200 Subject: [PATCH 12/23] Update 2-ui/3-event-details/8-onscroll/1-endless-page/task.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/8-onscroll/1-endless-page/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/task.md b/2-ui/3-event-details/8-onscroll/1-endless-page/task.md index 46ba3dbd5..c32018df3 100644 --- a/2-ui/3-event-details/8-onscroll/1-endless-page/task.md +++ b/2-ui/3-event-details/8-onscroll/1-endless-page/task.md @@ -17,4 +17,4 @@ Por favor tenga en cuenta dos características importantes del desplazamiento: Así que, "desplazarse hasta el final" debería significar que el visitante no está a más de 100px del final del documento. -P.D. En la vida real podemos querer mostrar "más mensajes" o "más mejoras". +P.D. En la vida real podemos querer mostrar "más mensajes" o "más bienes". From b08da7fbc69e47acf597b9cbeb76a20e53089e23 Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Sat, 1 Aug 2020 14:38:30 +0200 Subject: [PATCH 13/23] Update 2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md index cd8b05461..75148d5d2 100644 --- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md +++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md @@ -25,6 +25,6 @@ Requerimientos: - Algunas imágenes pueden ser regulares, sin `data-src`. El código no debe tocarlas. - Una vez que una imagen se carga, no debe recargarse más cuando haya desplazamiento arriba/abajo. -P.S. Si puedes, haz una solución más avanzada para "precargar" las imágenes que están más abajo/después de la posición actual. +P.D. Si puedes, haz una solución más avanzada para "precargar" las imágenes que están más abajo/después de la posición actual. P.P.S. Sólo se debe manejar el desplazamiento vertical, no el horizontal. From db8261ef013e2e035b00a75ff7ce20248fc4976e Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Sat, 1 Aug 2020 14:38:44 +0200 Subject: [PATCH 14/23] Update 2-ui/3-event-details/8-onscroll/article.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/8-onscroll/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/article.md b/2-ui/3-event-details/8-onscroll/article.md index 2b3cab993..8a06d46e9 100644 --- a/2-ui/3-event-details/8-onscroll/article.md +++ b/2-ui/3-event-details/8-onscroll/article.md @@ -1,6 +1,6 @@ # Desplazamiento -El evento `scroll` permite reaccionar en una página o elemento de desplazamiento. Hay bastantes cosas buenas que podemos hacer aquí. +El evento `scroll` permite reaccionar al desplazamiento de una página o elemento. Hay bastantes cosas buenas que podemos hacer aquí. Por ejemplo: - Mostrar/ocultar controles o información adicional según el lugar del documento en el que se encuentre el/la usuario/a. From 75fafd5522e90e4f8bf479f6163792575f1c812e Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Sat, 1 Aug 2020 14:38:55 +0200 Subject: [PATCH 15/23] Update 2-ui/3-event-details/8-onscroll/article.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/8-onscroll/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/article.md b/2-ui/3-event-details/8-onscroll/article.md index 8a06d46e9..9cb4f7c46 100644 --- a/2-ui/3-event-details/8-onscroll/article.md +++ b/2-ui/3-event-details/8-onscroll/article.md @@ -17,7 +17,7 @@ window.addEventListener('scroll', function() { ```online In action: -Desplazamiento actual = Desplazamiento por la ventana +Desplazamiento actual = Desplazamiento de la ventana ``` El evento `scroll` funciona tanto en `window` como en los elementos desplazables. From 35717b63208b67cab482eb644036b49af96cec62 Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Sat, 1 Aug 2020 14:39:31 +0200 Subject: [PATCH 16/23] Update 2-ui/3-event-details/8-onscroll/article.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/8-onscroll/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/article.md b/2-ui/3-event-details/8-onscroll/article.md index 9cb4f7c46..1b1efeb52 100644 --- a/2-ui/3-event-details/8-onscroll/article.md +++ b/2-ui/3-event-details/8-onscroll/article.md @@ -26,7 +26,7 @@ El evento `scroll` funciona tanto en `window` como en los elementos desplazables ¿Qué hacemos para que algo no se pueda desplazar? -No podemos evitar el desplazamiento utilizando `event.preventDefault()` en el oyente `onscroll`, porque se activa *después* de que el desplazamiento haya ocurrido. +No podemos evitar el desplazamiento utilizando `event.preventDefault()` oyendo al evento `onscroll`, porque este se activa *después* de que el desplazamiento haya ocurrido. Pero podemos prevenir el desplazamiento con `event.preventDefault()` en un evento que cause el desplazamiento, por ejemplo en el evento `keydown` para `key:pageUp` y `key:pageDown`. From e2fc3bb21b55c172a705bcf2364db25eb249f0aa Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Sat, 1 Aug 2020 14:40:03 +0200 Subject: [PATCH 17/23] Update 2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md index 75148d5d2..d389bd533 100644 --- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md +++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md @@ -27,4 +27,4 @@ Requerimientos: P.D. Si puedes, haz una solución más avanzada para "precargar" las imágenes que están más abajo/después de la posición actual. -P.P.S. Sólo se debe manejar el desplazamiento vertical, no el horizontal. +Post P.D. Sólo se debe manejar el desplazamiento vertical, no el horizontal. From c4c3fbe488ab7d92871c37d7b95c593f95444051 Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Sat, 1 Aug 2020 14:40:12 +0200 Subject: [PATCH 18/23] Update 2-ui/3-event-details/8-onscroll/1-endless-page/task.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/8-onscroll/1-endless-page/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/task.md b/2-ui/3-event-details/8-onscroll/1-endless-page/task.md index c32018df3..1819a55a8 100644 --- a/2-ui/3-event-details/8-onscroll/1-endless-page/task.md +++ b/2-ui/3-event-details/8-onscroll/1-endless-page/task.md @@ -4,7 +4,7 @@ importance: 5 # Página sin fin -Crear una página interminable. Cuando un visitante la desplace hasta el final, se va a auto-pegar la fecha y hora actual al texto (así el visitante podrá seguir desplazándose) +Crear una página interminable. Cuando un visitante la desplace hasta el final, se auto-añadirá la fecha y hora actual al texto (así el visitante podrá seguir desplazándose) Así: From c6957599824c7e4093bcd7da106b452bb90f5e72 Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Sat, 1 Aug 2020 18:43:49 +0200 Subject: [PATCH 19/23] Update 2-ui/3-event-details/8-onscroll/2-updown-button/task.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/8-onscroll/2-updown-button/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/2-updown-button/task.md b/2-ui/3-event-details/8-onscroll/2-updown-button/task.md index 68ae9bd28..042d4adfd 100644 --- a/2-ui/3-event-details/8-onscroll/2-updown-button/task.md +++ b/2-ui/3-event-details/8-onscroll/2-updown-button/task.md @@ -9,7 +9,7 @@ Crea un botón "ir arriba" para ayudar con el desplazamiento de la página. Debería funcionar así: - Mientras que la página no se desplace hacia abajo al menos la altura de la ventana... es invisible. - Cuando la página se desplaza hacia abajo más que la altura de la ventana -- aparece una flecha "hacia arriba" en la esquina superior izquierda. Si la página se desplaza hacia atrás desaparece. -- Cuando se hace click en la flecha, la página se desplaza hacia arriba. +- Cuando se hace click en la flecha, la página se desplaza hacia arriba hasta el tope. Así (esquina superior izquierda, desplácese para ver): From e4340703e8ad13ccdfde4d4878790e4fd3cf4d0d Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Sat, 1 Aug 2020 18:44:05 +0200 Subject: [PATCH 20/23] Update 2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md index 7dfcccfc9..4404fccb6 100644 --- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md +++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md @@ -1,6 +1,6 @@ El manejador `onscroll` debería comprobar qué imágenes son visibles y mostrarlas. -También queremos que se ejecute cuando se cargue la página, para detectar las imágenes inmeditamente visibles y cargarlas. +También queremos que se ejecute cuando se cargue la página, para detectar las imágenes visibles inmediatamente y cargarlas. El código debería ejecutarse cuando se cargue el documento, para que tenga acceso a su contenido. From b9f812e1a8582764506f2de364410eddb75c76fc Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Sat, 1 Aug 2020 18:44:17 +0200 Subject: [PATCH 21/23] Update 2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md index 4404fccb6..468a67d32 100644 --- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md +++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md @@ -7,7 +7,7 @@ El código debería ejecutarse cuando se cargue el documento, para que tenga acc O ponerlo en la parte inferior del ``: ```js -// ...el contenido de la página esta arriba... +// ...el contenido de la página está arriba... function isVisible(elem) { From d4e2538cb6415db09bbe35d6019cc6e9b71a8a40 Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Sat, 1 Aug 2020 18:44:30 +0200 Subject: [PATCH 22/23] Update 2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md index 468a67d32..0fec50ea2 100644 --- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md +++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md @@ -46,4 +46,4 @@ window.onscroll = showVisible; */!* ``` -P.S. La solución tiene una variante de `isVisible` que "precarga" imágenes que están dentro de 1 página por encima/debajo del desplazamiento del documento actual. +P.D. La solución tiene una variante de `isVisible` que "precarga" imágenes que están dentro de 1 página por encima/debajo del desplazamiento del documento actual. From e1c887aed824f4bec5da49b5dd5753fd4a230858 Mon Sep 17 00:00:00 2001 From: Leired7 <47502241+Leired7@users.noreply.github.com> Date: Sat, 1 Aug 2020 18:44:45 +0200 Subject: [PATCH 23/23] Update 2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md index d389bd533..66958bbe3 100644 --- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md +++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md @@ -18,7 +18,7 @@ Aquí hay un ejemplo en `iframe`: [iframe src="solution"] -Desplázate para ver las imagenes cargadas "a la carta". +Desplázate para ver las imagenes cargadas "bajo demanda". Requerimientos: - Cuando la página se carga, las imágenes que están en pantalla deben cargarse inmediatamente, antes de cualquier desplazamiento.