Traducción del articulo y las tareas

Author: Maksumi Muralami

2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md

@@ -1,12 +1,12 @@
 
 # HTML/CSS
-First let's create HTML/CSS.
+Primero hay que crear el HTML y CSS.
 
-A menu is a standalone graphical component on the page, so it's better to put it into a single DOM element.
+Un menú es un componente gráfico independiente en la página, por lo que es mejor colocarlo en un solo elemento del DOM.
 
-A list of menu items can be laid out as a list `ul/li`.
+Una lista de elementos del menú se puede diseñar como una lista `ul/li`.
 
-Here's the example structure:
+Aquí está la estructura de ejemplo:
 
 ```html
 <div class="menu">
@@ -19,29 +19,29 @@ Here's the example structure:
 </div>
 ```
 
-We use `<span>` for the title, because `<div>` has an implicit `display:block` on it, and it will occupy 100% of the horizontal width.
+Usamos `<span>` para el título, porque `<div>` tiene un `display:block` implícito en él, y va a ocupar 100% del ancho horizontal.
 
-Like this:
+Así:
 
 ```html autorun height=50
 <div style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</div>
 ```
 
-So if we set `onclick` on it, then it will catch clicks to the right of the text.
+Entonces si establecemos `onclick` en él, detectará los clics a la derecha del texto.
 
-As `<span>` has an implicit `display: inline`, it occupies exactly enough place to fit all the text:
+Como `<span>` tiene un `display: inline` implícito, ocupa exactamente el lugar suficiente para que quepa todo el texto:
 
 ```html autorun height=50
 <span style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</span>
 ```
 
-# Toggling the menu
+# Alternar el menú
 
-Toggling the menu should change the arrow and show/hide the menu list.
+Alternar el menú debería cambiar la flecha y mostrar/ocultar la lista del menú.
 
-All these changes are perfectly handled by CSS. In JavaScript we should label the current state of the menu by adding/removing the class `.open`.
+Todos estos cambios son perfectamente controlados con CSS. En JavaScript debemos etiquetar el estado actual del menú agregando/eliminando la clase `.open`.
 
-Without it, the menu will be closed:
+Sin él, el menú se cerrará:
 
 ```css
 .menu ul {
@@ -58,7 +58,7 @@ Without it, the menu will be closed:
 }
 ```
 
-...And with `.open` the arrow changes and the list shows up:
+...Y con `.open` la flecha cambia y aparece la lista:
 
 ```css
 .menu.open .title::before {

2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md

@@ -2,10 +2,10 @@ importance: 5
 
 ---
 
-# Create a sliding menu
+# Crear un menú deslizante
 
-Create a menu that opens/collapses on click:
+Crea un menú que se abra/colapse al hacer click:
 
 [iframe border=1 height=100 src="solution"]
 
-P.S. HTML/CSS of the source document is to be modified.
+P.D. El HTML/CSS del documento fuente se debe modificar.

2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md

@@ -1,12 +1,12 @@
 
-To add the button we can use either `position:absolute` (and make the pane `position:relative`) or `float:right`. The `float:right` has the benefit that the button never overlaps the text, but `position:absolute` gives more freedom. So the choice is yours.
+Para agregar el botón podemos usar cualquiera de las opciones `position:absolute` y hacer el pane `position:relative`) o `float:right`. El `float:right` tiene la ventaja de que el botón no se encima con el texto, pero  `position:absolute` da más libertad. Entonces la elección es tuya.
 
-Then for each pane the code can be like:
+Luego, para cada panel, el código puede ser así:
 ```js
 pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
 ```
 
-Then the `<button>` becomes `pane.firstChild`, so we can add a handler to it like this:
+Luego el `<button>` se convierte en `pane.firstChild`, por lo que podemos agregarle un controlador como este:
 
 ```js
 pane.firstChild.onclick = () => pane.remove();

2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/index.html

@@ -30,7 +30,7 @@ <h3>Cat</h3>
 
     for(let pane of panes) {
       pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
-      // button becomes the first child of pane
+      // button debe convertirse en el primer child de pane
       pane.firstChild.onclick = () => pane.remove();
     }
   </script>

2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md

@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Add a closing button
+# Agregar un botón de cierre
 
-There's a list of messages.
+Hay una lista de mensajes.
 
-Use JavaScript to add a closing button to the right-upper corner of each message.
+Usa JavaScript para agregar un botón de cierre en la esquina superior derecha de cada mensaje.
 
-The result should look like this:
+El resultado debería verse algo así:
 
 [iframe src="solution" height=450]

2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md

@@ -1,17 +1,17 @@
-The images ribbon can be represented as `ul/li` list of images `<img>`.
+La cinta de imágenes se puede representar como una lista `ul/li` de imágenes `<img>`.
 
-Normally, such a ribbon is wide, but we put a fixed-size `<div>` around to "cut" it, so that only a part of the ribbon is visible:
+Normalmente dicha cinta es ancha pero colocamos un tamaño fijo `<div>` alrededor para "cortarla", de modo que solo una parte de la cinta sea visible:
 
 ![](carousel1.svg)
 
-To make the list show horizontally we need to apply correct CSS properties for `<li>`, like `display: inline-block`.
+Para que la lista se muestre horizontalmente debemos aplicar las propiedades CSS correctas para `<li>`, como `display: inline-block`.
 
-For `<img>` we should also adjust `display`, because by default it's `inline`. There's extra space reserved under `inline` elements for "letter tails", so we can use `display:block` to remove it.
+Para `<img>` también deberíamos ajustar `display`, ya que es `inline` por default. Hay espacio adicional reservado debajo de los "letter tails", por lo que podemos usar `display:block` para eliminarlo.
 
-To do the scrolling, we can shift `<ul>`. There are many ways to do it, for instance by changing `margin-left` or (better performance) use `transform: translateX()`:
+Para hacer el desplazamiento, podemos cambiar `<ul>`. Hay muchas formas de hacerlo, por ejemplo, cambiando `margin-left` o (para mejor rendimiento) usando  `transform: translateX()`:
 
 ![](carousel2.svg)
 
-The outer `<div>` has a fixed width, so "extra" images are cut.
+El `<div>` exterior tiene un ancho fijo, por lo que se cortan las imágenes "extra".
 
-The whole carousel is a self-contained "graphical component" on the page, so we'd better wrap it into a single `<div class="carousel">` and style things inside it.
+Todo el carrusel es un "componente gráfico" autónomo en la página, por lo que será mejor que lo envuelva en un solo elemento `<div class="carousel">` y le apliquemos estilo.

2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html

@@ -27,35 +27,35 @@
   </div>
 
   <script>
-    /* label the images, just for convenience, to visually track them */
+    /* etiqueta las imágenes pra poder rastrearlas, solo por conveniencia */
     let i = 1;
     for(let li of carousel.querySelectorAll('li')) {
       li.style.position = 'relative';
       li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}</span>`);
       i++;
     }
 
-    /* configuration */
-    let width = 130; // image width
-    let count = 3; // visible images count
+    /* configuración */
+    let width = 130; // ancho de las imágenes
+    let count = 3; // conteo de las imágenes visibles
 
     let list = carousel.querySelector('ul');
     let listElems = carousel.querySelectorAll('li');
 
-    let position = 0; // ribbon scroll position
+    let position = 0; // posición del desplazamiento del carrete
 
     carousel.querySelector('.prev').onclick = function() {
-      // shift left
+      // desplazamiento izquierdo
       position += width * count;
-      // can't move to the left too much, end of images
+      // no podemos mover demasiado a la izquierda, se acaban las imágenes
       position = Math.min(position, 0)
       list.style.marginLeft = position + 'px';
     };
 
     carousel.querySelector('.next').onclick = function() {
-      // shift right
+      // desplazamiento derecho
       position -= width * count;
-      // can only shift the ribbbon for (total ribbon length - visible count) images
+      // solo se puede desplazar el carrete de imágenes (longitud total de la cinta - conteo visibles)
       position = Math.max(position, -width * (listElems.length - count));
       list.style.marginLeft = position + 'px';
     };

2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/style.css

@@ -14,7 +14,7 @@ body {
 .carousel img {
   width: 130px;
   height: 130px;
-  /* make it block to remove space around images */
+  /* establecer block para remover el espacio alrededor de las imágenes */
   display: block;
 }
 
@@ -60,7 +60,7 @@ body {
   padding: 0;
   list-style: none;
   transition: margin-left 250ms;
-  /* remove white-space between inline-block'ed li */
+  /* eliminando los espacios en blanco entre los li inline-block'ed */
   /* http://davidwalsh.name/remove-whitespace-inline-block */
   font-size: 0;
 }

2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html

@@ -28,16 +28,16 @@
 
 
   <script>
-    // label the images to visually track them, just for convenience,
-    // this code can be removed
+    // etiqueta las imágenes pra poder rastrearlas, solo por conveniencia,
+    // este código puede ser removido
     let i = 1;
     for(let li of carousel.querySelectorAll('li')) {
       li.style.position = 'relative';
       li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}</span>`);
       i++;
     }
 
-    // ...your code to make carousel alive!
+    // ...¡Tu código para crear un carrusel con vida!
   </script>
 
 </body>

2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css

@@ -30,9 +30,9 @@ ul {
 ul img {
   width: 130px;
   height: 130px;
-  display: block; /* removes extra space near images */
+  display: block; /* remueve el espacio extra cerca de las imágenes */
 }
 
 ul li {
-  display: inline-block; /* removes extra space between list items
+  display: inline-block; /* remueve el espacio extra entre los elementos li
 }