Skip to content

Commit

Permalink
A11y - U1L3 list edits - both en & es
Browse files Browse the repository at this point in the history
  • Loading branch information
@jkangEDC
jkangEDC committed Sep 18, 2024
1 parent ddc1d80 commit 6bab9c7
Show file tree
Hide file tree
Showing 10 changed files with 177 additions and 157 deletions.
61 changes: 32 additions & 29 deletions cur/programming/1-introduction/3-drawing/1-exploring-motion.es.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ <h2>Explorar el movimiento</h2>
</div>

<div class="forYouToDo" id="first">
<ol>
<div class="ap-standard">AAP-2.A, AAP-3.A part b</div>
<div class="ap-standard">AAP-2.A, AAP-3.A part b</div>
<ol>
<li>
<img class="inline" src="/bjc-r/img/icons/work-with-a-partner.es.png" alt="Trabaja con tu compañero" title="Trabaja con tu compañero" />
<img class="inline" src="/bjc-r/img/icons/write-out-thoughts.es.png" alt="Escribe tus ideas" title="Escribe tus ideas" />
Expand All @@ -60,10 +60,10 @@ <h2>Explorar el movimiento</h2>
<li>Haz clic para ejecutar y observa qué hace el objeto. </li>
<li>Haz clic en el bloque <img src="/bjc-r/img/1-introduction/pen-down.es.png" alt="bajar lápiz" title="bajar lápiz"> y luego haz clic en el código para ejecutarlo de nuevo.</li>
</ol>
<div class="endnote">Se puede hacer clic en el bloque <code>bajar lápiz</code> (o en cualquier bloque) en la paleta de bloques que se encuentra al lado izquierdo del área de trabajo, o bien cualquier bloque dentro del área de trabajo para ejecutarlo. Si se hace clic dentro del código, el programa completo es ejecutado.</div>
</li>
<div class="endnote">Se puede hacer clic en el bloque <code>bajar lápiz</code> (o en cualquier bloque) en la paleta de bloques que se encuentra al lado izquierdo del área de trabajo, o bien cualquier bloque dentro del área de trabajo para ejecutarlo. Si se hace clic dentro del código, el programa completo es ejecutado.</div>
<li><img class="inline" src="/bjc-r/img/icons/talk-with-your-partner-mini.png" alt="Habla con tu compañero" title="Habla con tu compañero"> Analiza <em>por qué</em> el código hace lo que se muestra en pantalla.</li>
<li><img class="inline" src="/bjc-r/img/icons/talk-with-another-pair-mini.png" alt="Habla con otra pareja" title="Hbla con otra pareja" />Compara tu trabajo con otro compañero. En el caso que tu código se comporte de forma diferente, revisa ambos.</li>
<li><img class="inline" src="/bjc-r/img/icons/talk-with-another-pair-mini.png" alt="Habla con otra pareja" title="Hbla con otra pareja" />Compara tu trabajo con otro compañero. En el caso que tu código se comporte de forma diferente, revisa ambos.
<div class="takeNote">
<h3 class="box-head">Usar pasos visibles</h3>
<p>Snap<em>!</em> cuenta con una herramienta llamada <strong>Pasos visibles</strong>, que permite controlar la velocidad de ejecución de los bloques dentro del código. </p>
Expand All @@ -89,17 +89,19 @@ <h3 class="box-head">Usar pasos visibles</h3>
</ul>
<p>Usar Pasos visibles es de utilidad si se necesita analizar el código de alguien más ya que es posible ver la ejecución en velocidad humana en lugar de velocidad de máquina. Es una funcionalidad muy útil para la depuración (<em>debugging</em>) cuando se busca identificar qué va mal en nuestro código.</p>
</div>
</li>
<li>
<img class="inline" src="/bjc-r/img/icons/pair-programming-swap-mini.png" alt="Intercambio de parejas" title="Intercambio de parejas" /> Intercambia los puestos si trabajas en pareja. Luego realiza el siguiente experimento:<br />
<ol>
<div class="sidenote">Se puede colocar el objeto en el centro del escenario con el bloque <img class="inline" src="/bjc-r/img/blocks/go-to-x-y-0-0.es.png" alt="ir a x: (0) y: (0)" title="ir a x: (0) y: (0)" /> y se puede restablecer la dirección a la que apunta con el bloque <img class="inline" src="/bjc-r/img/blocks/point-in-direction-90.es.png" alt="apuntar en dirección (90)" title="apuntar en dirección (90)" />.</div>
<ol>
<li>Cambia el valor 100 por 50 en el bloque <code>mover</code> haciendo clic en 100 y escribiendo 50 en su lugar. Luego haz clic en el código de nuevo para ejecutarlo con el nuevo valor.</li>
<li>Haz clic en el bloque <img class="inline" src="/bjc-r/img/blocks/clear-full-size.es.png" alt="quitar" title="quitar" /> en la paleta de bloques: "Lápiz".</li>
<li>Cambia el número en el bloque <code>girar</code> y ejecuta el programa otra vez... y otra... y otra más.</li>
<li><code>Limpia</code> el escenario de nuevo, ahora cambia el número en el bloque repetir. <img class="inline" src="/bjc-r/img/1-introduction/repeat-4.es.png" alt="repetir (4){}" title="repetir (4){}" /></li>
<li>Experimenta con los valores en los bloques <code>girar</code> y <code>repetir</code>. Intenta dibujar un triángulo con los tres lados iguales.</li>
<li> Usa el bloque <span class="center"><img class="inline" src="/bjc-r/img/blocks/set-pen-size-to-blank.es.png" alt="fijar tamaño de lápiz a ()" title="fijar tamaño de lápiz a ()" /></span> para ajustar el tamaño del lápiz a diferentes valores como 4, 10 o 50. Luego haz clic de nuevo en los bloques <code>repetir</code>, <code>mover</code>, <code>girar</code>. </li>
<div class="endnote">Para cambiar el tamaño del lápiz se debe hacer <em>clic</em> en el bloque <code>cambiar tamaño del lápiz</code>.</div>
<li> Usa el bloque <span class="center"><img class="inline" src="/bjc-r/img/blocks/set-pen-size-to-blank.es.png" alt="fijar tamaño de lápiz a ()" title="fijar tamaño de lápiz a ()" /></span> para ajustar el tamaño del lápiz a diferentes valores como 4, 10 o 50. Luego haz clic de nuevo en los bloques <code>repetir</code>, <code>mover</code>, <code>girar</code>.
<div class="endnote">Para cambiar el tamaño del lápiz se debe hacer <em>clic</em> en el bloque <code>cambiar tamaño del lápiz</code>.</div>
</li>
<li> Usa el bloque <img class="inline" src="/bjc-r/img/blocks/set-pen-color-full-size.es.png" alt="fijar tonalidad del lápiz a 'cuadrado color magenta'" title="fijar tonalidad del lápiz a 'cuadrado color magenta'" /> para experimentar con el color del lápiz.</li>
</ol>
</li>
Expand All @@ -116,8 +118,10 @@ <h3 class="box-head">Usar pasos visibles</h3>
<li>¿Hacer clic en el bloque <img class="inline" src="/bjc-r/img/blocks/go-to-x-y-0-0.es.png" alt="ir a x:(0) y:(0)" title="ir a x:(0) y:(0)" /> deja algún trazo?</li>
</ol>
</li>
<img class="imageRight" src="/bjc-r/img/1-introduction/sphere.png" height="100" alt="esfera">
<li>Asegúrate de guardar tu otro trabajo, luego <a href="/bjc-r/prog/1-introduction/U1L3-Sphere.es.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.es.png" alt="Haz clic para cargar un proyecto nuevo. Entonces guárdalo." title="Haz clic para cargar un proyecto nuevo. Entonces guárdalo."></a><br />

<li>
<img class="imageRight" src="/bjc-r/img/1-introduction/sphere.png" height="100" alt="esfera">
Asegúrate de guardar tu otro trabajo, luego <a href="/bjc-r/prog/1-introduction/U1L3-Sphere.es.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.es.png" alt="Haz clic para cargar un proyecto nuevo. Entonces guárdalo." title="Haz clic para cargar un proyecto nuevo. Entonces guárdalo."></a><br />
Experimenta con las secuencias y mira dentro de ellas para averiguar cómo funcionan. ¿Podrías cambiar los tamaños o los colores para hacerlo más interesante?
</li>
</ol>
Expand All @@ -139,30 +143,29 @@ <h3 class="box-head">Usar pasos visibles</h3>
<li>
<strong>Familias de colores.</strong> Haz clic en el ícono de Archivo en el menú y luego selecciona la opción "Bibliotecas..." Luego busca la biblioteca titulada "Colores and Crayones" y haz clic en "Importar."<br />
<img class="indent" src="/bjc-r/img/1-introduction/libs.es.png" alt='Menú de Archivo de Snap!' title='Menú de Archivo de Snap!' />
<img src="/bjc-r/img/1-introduction/color-lib.es.png" alt='Cuadro de diálogo para improtar la biblioteca de "Colores y pinturas"' title='Cuadro de diálogo para improtar la biblioteca de "Colores y pinturas"'' /><br />
<img src="/bjc-r/img/1-introduction/color-lib.es.png" alt='Cuadro de diálogo para improtar la biblioteca de "Colores y pinturas"' title='Cuadro de diálogo para improtar la biblioteca de "Colores y pinturas"' /><br />
En la paleta "Lápiz" se puede encontrar ahora el bloque <code>fijar color de lápiz a</code>. Las computadoras pueden desplegar millones de colores, pero a menos que sea necesario hacer coincidir exáctamente con un color en específico, no hace falta complicarse por hacerlo coincidir a menos que tengas la combinación correcta. La biblioteca de colores fuciona como una caja de crayones, brinda una selección de los colores más utilizados y se encuentran clasificados en familias. De esta forma si deseas incluir una variedad de tonos marrones, selecciona un número entre 30 y 39.<br />
<img class="indent" src="/bjc-r/img/1-introduction/brown.png" alt='bloque de fijar el color del lápiz con la opción de "marrones" seleccionada y que muestra un submenú donde se selecciona la opcón "34 chestnut #954535"' title='bloque de fijar el color del lápiz con la opción de "marrones" seleccionada y que muestra un submenú donde se selecciona la opcón "34 chestnut #954535"' />
</li>

<img class="imageRight" src="/bjc-r/img/1-introduction/1024px-Suprematist_Composition_-_Kazimir_Malevich.jpg" height="180" alt=" pintura de Malevich" title="pintura de Malevich" />
<li>En el lado derecho se presenta una pintura del artista Kazimir Malevich. Los elementos en la pintura son rectángulos, tanto de forma horizontal como en un ángulo de 45 grados, en ocasiones unos grados más y otras unos grados menos. Se pueden posicionar los rectángulos de forma aleatoria. El resultado de tu trabajo no necesariamente se debe ver así. Eres un artista, ¡inténtalo!
<div class="dialogue">
<div>
<span>Alphie:</span> Si se despliegan rectángulos de forma aleatoria, los cuadrados más grandes van a cubrir a los más pequeños. Se deberían desplegar los rectángulos grandes primero y dejar los pequeños para el final.
</div>
<div>
<span>Gamal:</span> Sé que nuestro trabajo no se parece a la versión original, pero me gusta la forma en que aparece el rectángulo grande de color negro. Pienso que da una estructura a la pintura, con una parte superior y una parte inferior. Me gustaría incluir uno igual en mi trabajo.
</div>
<div>
<span>Betty:</span> Me gusta la idea de dibujar líneas muy gruesas <em>sin</em> usar el bloque <code>punta de lápiz plana</code> y obtener resultados interesantes como aparecen a continuación:
</div>
<img class="indent" src="/bjc-r/img/1-introduction/curl.png" alt="forma de cuerno curvado hecha de círculos superpuestos en diferentes colores" title="forma de cuerno curvado hecha de círculos superpuestos en diferentes colores" />
</div>
<li>
<img class="imageRight" src="/bjc-r/img/1-introduction/1024px-Suprematist_Composition_-_Kazimir_Malevich.jpg" height="180" alt=" pintura de Malevich" title="pintura de Malevich" />
En el lado derecho se presenta una pintura del artista Kazimir Malevich. Los elementos en la pintura son rectángulos, tanto de forma horizontal como en un ángulo de 45 grados, en ocasiones unos grados más y otras unos grados menos. Se pueden posicionar los rectángulos de forma aleatoria. El resultado de tu trabajo no necesariamente se debe ver así. Eres un artista, ¡inténtalo!
<div class="dialogue">
<div>
<span>Alphie:</span> Si se despliegan rectángulos de forma aleatoria, los cuadrados más grandes van a cubrir a los más pequeños. Se deberían desplegar los rectángulos grandes primero y dejar los pequeños para el final.
</div>
<div>
<span>Gamal:</span> Sé que nuestro trabajo no se parece a la versión original, pero me gusta la forma en que aparece el rectángulo grande de color negro. Pienso que da una estructura a la pintura, con una parte superior y una parte inferior. Me gustaría incluir uno igual en mi trabajo.
</div>
<div>
<span>Betty:</span> Me gusta la idea de dibujar líneas muy gruesas <em>sin</em> usar el bloque <code>punta de lápiz plana</code> y obtener resultados interesantes como aparecen a continuación:
</div>
<img class="indent" src="/bjc-r/img/1-introduction/curl.png" alt="forma de cuerno curvado hecha de círculos superpuestos en diferentes colores" title="forma de cuerno curvado hecha de círculos superpuestos en diferentes colores" />
</div>
</li>

<img class="imageRight" src="/bjc-r/img/1-introduction/Theo_van_Doesburg_Composition_VII_(the_three_graces).jpg" height="130" alt="pintura de van Doesburg" title="pintura de van Doesburg" />
<li>
Hacia el lado derecho se presenta una pintura de Theo van Doesburg. Se pueden apreciar detalles en común con la pintura de Malevich, principalmente el uso de rectángulos como elementos de diseño. Sin embargo no tiene rectángulos inclinados, en su lugar se necesita que los rectángulos no estén encima unos de otros por lo que deben ser reducidos para evitar colisiones. Se puede usar el bloque <img src="/bjc-r/img/1-introduction/blackp.es.png" alt="((brillo) en (mí mismo)) = 0" title="((brillo) en (mí mismo)) = 0" /> para identificar si el fondo detrás del elemento es negro y no el color de otro objeto.
<li>
<img class="imageRight" src="/bjc-r/img/1-introduction/Theo_van_Doesburg_Composition_VII_(the_three_graces).jpg" height="130" alt="pintura de van Doesburg" title="pintura de van Doesburg" />
Hacia el lado derecho se presenta una pintura de Theo van Doesburg. Se pueden apreciar detalles en común con la pintura de Malevich, principalmente el uso de rectángulos como elementos de diseño. Sin embargo no tiene rectángulos inclinados, en su lugar se necesita que los rectángulos no estén encima unos de otros por lo que deben ser reducidos para evitar colisiones. Se puede usar el bloque <img src="/bjc-r/img/1-introduction/blackp.es.png" alt="((brillo) en (mí mismo)) = 0" title="((brillo) en (mí mismo)) = 0" /> para identificar si el fondo detrás del elemento es negro y no el color de otro objeto.
</li>
</ol>
</div>
Expand Down
Loading

0 comments on commit 6bab9c7

Please sign in to comment.