Browser default actions

Author: omero329

2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md

@@ -1,16 +1,16 @@
-When the browser reads the `on*` attribute like `onclick`, it creates the handler from its content.
+Cuando el navegador lee el atributo `on*` como `onclick`, crea el controlador a partir de su contenido.
 
-For `onclick="handler()"` the function will be:
+Para `onclick="handler()"` la función será:
 
 ```js
 function(event) {
-  handler() // the content of onclick
+  handler() // el contenido de onclick
 }
 ```
 
-Now we can see that the value returned by `handler()` is not used and does not affect the result.
+Ahora podemos ver que el valor devuelto por `handler()` no se usa y no afecta el resultado.
 
-The fix is simple:
+La solución es simple:
 
 ```html run
 <script>
@@ -23,7 +23,7 @@ The fix is simple:
 <a href="https://w3.org" onclick="*!*return handler()*/!*">w3.org</a>
 ```
 
-Also we can use `event.preventDefault()`, like this:
+También podemos usar `event.preventDefault()`, así:
 
 ```html run
 <script>

2-ui/2-events/04-default-browser-action/1-why-return-false-fails/task.md

@@ -2,9 +2,9 @@ importance: 3
 
 ---
 
-# Why "return false" doesn't work?
+# ¿Por qué "return false" no funciona?
 
-Why in the code below `return false` doesn't work at all?
+¿Por qué en el código de abajo `return false` no funciona en absoluto?
 
 ```html autorun run
 <script>
@@ -14,9 +14,9 @@ Why in the code below `return false` doesn't work at all?
   }
 </script>
 
-<a href="https://w3.org" onclick="handler()">the browser will go to w3.org</a>
+<a href="https://w3.org" onclick="handler()">el navegador irá a w3.org</a>
 ```
 
-The browser follows the URL on click, but we don't want it.
+El navegador sigue la URL al hacer clic, pero no la queremos.
 
-How to fix?
+¿Como se arregla?

2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.md

@@ -1,5 +1,5 @@
-That's a great use of the event delegation pattern.
+Ese es un gran uso del patrón de delegación de eventos.
 
-In real life instead of asking we can send a "logging" request to the server that saves the information about where the visitor left. Or we can load the content and show it right in the page (if allowable).
+En la vida real, en lugar de preguntar, podemos enviar una solicitud de "logging" al servidor que guarda la información sobre dónde se fue el visitante. O podemos cargar el contenido y mostrarlo directamente en la página (si está permitido).
 
-All we need is to catch the `contents.onclick` and use `confirm` to ask the user. A good idea would be to use `link.getAttribute('href')` instead of `link.href` for the URL. See the solution for details.
+Todo lo que necesitamos es capturar el `contents.onclick` y usar `confirm` para preguntar al usuario. Una buena idea sería usar `link.getAttribute('href')` en lugar de `link.href` para la URL. Consulte la solución para obtener más detalles.

2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.view/index.html

@@ -16,15 +16,15 @@
   <fieldset id="contents">
     <legend>#contents</legend>
     <p>
-      How about to read <a href="https://wikipedia.org">Wikipedia</a> or visit <a href="https://w3.org"><i>W3.org</i></a> and learn about modern standards?
+      ¿Que tal si leemos <a href="https://wikipedia.org">Wikipedia</a> o visitamos <a href="https://w3.org"><i>W3.org</i></a> y aprendemos sobre los estándares modernos?
     </p>
   </fieldset>
 
   <script>
     contents.onclick = function(event) {
 
       function handleLink(href) {
-        let isLeaving = confirm(`Leave for ${href}?`);
+        let isLeaving = confirm(`¿Irse a ${href}?`);
         if (!isLeaving) return false;
       }
 

2-ui/2-events/04-default-browser-action/2-catch-link-navigation/source.view/index.html

@@ -16,7 +16,7 @@
   <fieldset id="contents">
     <legend>#contents</legend>
     <p>
-      How about to read <a href="https://wikipedia.org">Wikipedia</a> or visit <a href="https://w3.org"><i>W3.org</i></a> and learn about modern standards?
+      ¿Que tal si leemos <a href="https://wikipedia.org">Wikipedia</a> o visitamos <a href="https://w3.org"><i>W3.org</i></a> y aprendemos sobre los estándares modernos?
     </p>
   </fieldset>
 

2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md

@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Catch links in the element
+# Captura enlaces en el elemento
 
-Make all links inside the element with `id="contents"` ask the user if they really want to leave. And if they don't then don't follow.
+Haz que todos los enlaces dentro del elemento con `id="contents"` pregunten al usuario si realmente quiere irse. Y si no lo hacen, no sigas.
 
-Like this:
+Así:
 
 [iframe height=100 border=1 src="solution"]
 
-Details:
+Detalles:
 
-- HTML inside the element may be loaded or regenerated dynamically at any time, so we can't find all links and put handlers on them. Use event delegation.
-- The content may have nested tags. Inside links too, like `<a href=".."><i>...</i></a>`.
+- El HTML dentro del elemento puede cargarse o regenerarse dinámicamente en cualquier momento, por lo que no podemos encontrar todos los enlaces y ponerles controladores. Utilice la delegación de eventos.
+- El contenido puede tener etiquetas anidadas. Dentro de los enlaces también, como `<a href=".."><i>...</i></a>`.

2-ui/2-events/04-default-browser-action/3-image-gallery/solution.md

@@ -1 +1 @@
-The solution is to assign the handler to the container and track clicks. If a click is on the `<a>` link, then change `src` of `#largeImg` to the `href` of the thumbnail.
+La solución es asignar el controlador al contenedor y realizar un seguimiento de los clics. Si haces clic en el enlace `<a>`, cambias `src` de `#largeImg` por el `href` de la miniatura.

2-ui/2-events/04-default-browser-action/3-image-gallery/solution.view/index.html

@@ -9,24 +9,24 @@
 
 <body>
 
-  <p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
+  <p><img id="largeImg" src="https://es.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
 
   <ul id="thumbs">
     <!-- the browser shows a small built-in tooltip on hover with the text from "title" attribute -->
     <li>
-      <a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-thumb.jpg"></a>
+      <a href="https://es.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://es.js.cx/gallery/img2-thumb.jpg"></a>
     </li>
     <li>
-      <a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-thumb.jpg"></a>
+      <a href="https://es.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://es.js.cx/gallery/img3-thumb.jpg"></a>
     </li>
     <li>
-      <a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-thumb.jpg"></a>
+      <a href="https://es.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://es.js.cx/gallery/img4-thumb.jpg"></a>
     </li>
     <li>
-      <a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-thumb.jpg"></a>
+      <a href="https://es.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://es.js.cx/gallery/img5-thumb.jpg"></a>
     </li>
     <li>
-      <a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-thumb.jpg"></a>
+      <a href="https://es.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://es.js.cx/gallery/img6-thumb.jpg"></a>
     </li>
   </ul>
 

2-ui/2-events/04-default-browser-action/3-image-gallery/source.view/index.html

@@ -9,24 +9,24 @@
 
 <body>
 
-  <p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
+  <p><img id="largeImg" src="https://es.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
 
   <ul id="thumbs">
-    <!-- the browser shows a small built-in tooltip on hover with the text from "title" attribute -->
+    <!-- el navegador muestra un tooltip(ya viene integrado) con el texto del atributo "title" al pasar el ratón sobre él -->
     <li>
-      <a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-thumb.jpg"></a>
+      <a href="https://es.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://es.js.cx/gallery/img2-thumb.jpg"></a>
     </li>
     <li>
-      <a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-thumb.jpg"></a>
+      <a href="https://es.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://es.js.cx/gallery/img3-thumb.jpg"></a>
     </li>
     <li>
-      <a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-thumb.jpg"></a>
+      <a href="https://es.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://es.js.cx/gallery/img4-thumb.jpg"></a>
     </li>
     <li>
-      <a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-thumb.jpg"></a>
+      <a href="https://es.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://es.js.cx/gallery/img5-thumb.jpg"></a>
     </li>
     <li>
-      <a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-thumb.jpg"></a>
+      <a href="https://es.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://es.js.cx/gallery/img6-thumb.jpg"></a>
     </li>
   </ul>
 

2-ui/2-events/04-default-browser-action/3-image-gallery/task.md

@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Image gallery
+# Galería de imágenes
 
-Create an image gallery where the main image changes by the click on a thumbnail.
+Crea una galería de imágenes donde la imagen principal cambia al hacer clic en una miniatura.
 
-Like this:
+Así:
 
 [iframe src="solution" height=600]
 
-P.S. Use event delegation.
+P.D. Utiliza la delegación de eventos.