A11y - Unit 6&7 fix lists - done U6, 7

cur/programming/6-computers/1-abstraction/01-abstraction.es.html

@@ -44,13 +44,14 @@ <h3>Dominio digital</h3>
                 <li>La <strong>arquitectura</strong> son las instrucciones que el software puede enviar y que el hardware entender&aacute;.</li>
                 <li>La computadora tiene <strong>componentes</strong> (como la memoria, procesadores, tarjetas de video, etc.) la arquitectura implementada.</li>
                 <li>Esos componentes est&aacute;n construidos a partir de <strong>circuitos integrados (chips)</strong>, que son los rect&aacute;ngulos negros que puedes ver en esta placa de circuito.</li>
-                <li>Esos circuitos integrados est&aacute;n dise&ntilde;ados alrededor de <strong>compuertas l&oacute;gicas</strong>, los bloques de construcci&oacute;n fundamentales que implementan las funciones booleanas.</li>
-                <div class="endnote">
-                    Aprendiste acerca de las funciones booleanas en <a href="/bjc-r/cur/programming/2-complexity/3-predicates/1-what-is-predicate.es.html?topic=nyc_bjc%2F2-conditionals-abstraction.es.topic&amp;course=bjc4nyc.es.html&amp;novideo&amp;noassignment">Unidad 2 Laboratorio 3: ¿Qué es un predicado?</a><br>
-                    <img class="indent" src="/bjc-r/img/blocks/and.es.png" alt="() y ()" title="() y ()">
-                    <img class="indent" src="/bjc-r/img/blocks/or.es.png" alt="() o ()" title="() o ()">
-                    <img class="indent" src="/bjc-r/img/blocks/not.es.png" alt="no ()" title="no ()">
-                </div>
+                <li>Esos circuitos integrados est&aacute;n dise&ntilde;ados alrededor de <strong>compuertas l&oacute;gicas</strong>, los bloques de construcci&oacute;n fundamentales que implementan las funciones booleanas.
+                    <div class="endnote">
+                        Aprendiste acerca de las funciones booleanas en <a href="/bjc-r/cur/programming/2-complexity/3-predicates/1-what-is-predicate.es.html?topic=nyc_bjc%2F2-conditionals-abstraction.es.topic&amp;course=bjc4nyc.es.html&amp;novideo&amp;noassignment">Unidad 2 Laboratorio 3: ¿Qué es un predicado?</a><br>
+                        <img class="indent" src="/bjc-r/img/blocks/and.es.png" alt="() y ()" title="() y ()">
+                        <img class="indent" src="/bjc-r/img/blocks/or.es.png" alt="() o ()" title="() o ()">
+                        <img class="indent" src="/bjc-r/img/blocks/not.es.png" alt="no ()" title="no ()">
+                    </div>
+                </li>
             </ul>
         </p>
 

cur/programming/6-computers/1-abstraction/01-abstraction.html

@@ -69,13 +69,14 @@ <h3>Digital Domain</h3>
                 <li>The <strong>architecture</strong> is the instructions that software can send that the hardware will understand.</li>
                 <li>The computer has <strong>components</strong> (such as memory, processors, video cards, etc.) that implement the architecture.</li>
                 <li>Those components are built out of <strong>integrated circuits (chips)</strong>, which are the black rectangles that you can see on this circuit board.</li>
-                <li>Those integrated circuits are designed around <strong>logic gates</strong>, the fundamental building blocks that implement Boolean functions.</li>
-                <div class="endnote">
-                    You learned about Boolean functions in <a href="/bjc-r/cur/programming/2-complexity/3-predicates/1-what-is-predicate.html?topic=nyc_bjc%2F2-conditionals-abstraction.topic&course=bjc4nyc.html&novideo&noassignment">Unit 2 Lab 3: Making Decisions by Using Predicates</a>.<br />
-                    <img class="indent" src="/bjc-r/img/blocks/and.png" alt="() and ()" title="() and ()" />
-                    <img class="indent" src="/bjc-r/img/blocks/or-small.png" alt="() or ()" title="() or ()" />
-                    <img class="indent" src="/bjc-r/img/blocks/not_small.png" alt="not ()" title="not ()" />
-                </div>
+                <li>Those integrated circuits are designed around <strong>logic gates</strong>, the fundamental building blocks that implement Boolean functions.
+                    <div class="endnote">
+                        You learned about Boolean functions in <a href="/bjc-r/cur/programming/2-complexity/3-predicates/1-what-is-predicate.html?topic=nyc_bjc%2F2-conditionals-abstraction.topic&course=bjc4nyc.html&novideo&noassignment">Unit 2 Lab 3: Making Decisions by Using Predicates</a>.<br />
+                        <img class="indent" src="/bjc-r/img/blocks/and.png" alt="() and ()" title="() and ()" />
+                        <img class="indent" src="/bjc-r/img/blocks/or-small.png" alt="() or ()" title="() or ()" />
+                        <img class="indent" src="/bjc-r/img/blocks/not_small.png" alt="not ()" title="not ()" />
+                    </div>
+                </li>
             </ul>
         </p>
         <div class="todo">Do we need this commented out content? --MF, 6/12/20</div>

cur/programming/6-computers/1-abstraction/02-software-applications.es.html

@@ -10,7 +10,8 @@ <h2>Dominio del software: Aplicaciones</h2>
         <div class="learn"><strong>En esta p&aacute;gina</strong>, explorar&aacute;s algunos de los muchos prop&oacute;sitos para los que las personas utilizan aplicaciones de software.</div>
 
         <p>
-            Programas de aplicaci&oacute;n (o "apps", es decir, la abreviatura de la palabra <em>applications</em>, en inglés) son los programas con los que los usuarios interact&uacute;an. Aqu&iacute; hay algunos usos de estos programas con los que puedes estar familiarizado: <ul>
+            Programas de aplicaci&oacute;n (o "apps", es decir, la abreviatura de la palabra <em>applications</em>, en inglés) son los programas con los que los usuarios interact&uacute;an. Aqu&iacute; hay algunos usos de estos programas con los que puedes estar familiarizado: 
+            <ul>
                 <li><strong>Comunicaci&oacute;n.</strong> Utilizas un navegador para ver p&aacute;ginas web en Internet. Te mantienes en contacto con tus amigos mediante las redes sociales, el correo electr&oacute;nico, los mensajes de texto y las aplicaciones de chat que pueden ser de texto, de audio o de v&iacute;deo. Tambi&eacute;n puedes decirle al mundo lo que piensas en un blog (abreviatura de weblog) o un vlog (abreviatura de videoblog).</li>
                 <li><strong>Audio.</strong> Es casi seguro que tu computadora o tel&eacute;fono tiene una aplicaci&oacute;n para reproducir m&uacute;sica, ya sea de tu propia colecci&oacute;n o de un servidor de radio por Internet. Tambi&eacute;n puedes utilizar el software para <em>crear</em> m&uacute;sica utilizando sintetizadores que crean nuevos sonidos, probando (reutilizando) los sonidos existentes y grabando los sonidos a su alrededor. Por ejemplo, en lugar de limitarse a las selecciones de m&uacute;sica de otra persona en la radio, aplicaciones como Pandora crean una estaci&oacute;n de radio personalizada solo para ti.</li>        
                 <li><strong>Im&aacute;genes.</strong> Es probable que tengas una aplicaci&oacute;n para ver fotos en tu propio ordenador o tel&eacute;fono. Tambi&eacute;n puedes usar un software para manipular las fotos para crear obras de arte, afinar el enfoque o crear "noticias falsas" combinando im&aacute;genes no relacionadas. Por ejemplo, cuando te hacen radiograf&iacute;as, los resultados se env&iacute;an por correo electr&oacute;nico al m&eacute;dico de inmediato en lugar de tener que esperar a que se revelen las im&aacute;genes.</li> 

cur/programming/6-computers/1-abstraction/02-software-applications.html

@@ -18,12 +18,13 @@ <h2>The Software Domain: Applications</h2>
            <ul>
                 <li><strong>Communication.</strong> You use a browser to view web pages on the World Wide Web. You keep in touch with friends using social networking, email, text messages, and chat applications that can be text-based, audio-based, or video-based. You can also tell the world what you think in a blog (short for weblog) or a vlog (short for video blog).</li>
                 <li><strong>Audio.</strong> Your computer or phone almost certainly has an application to play music&mdash;either from your own collection or from an Internet radio server. You can also use software to <em>create</em> music by using synthesizers that make new sounds, sampling (reusing) existing sounds, and recording sounds around you. For example, instead of being limited to someone else's music selections on the radio, apps like Pandora create an individualized radio station just for you.</li>
-                <li><strong>Pictures.</strong> You likely have a photo viewing application on your own computer or phone. You can also use software to manipulate pictures to create artwork, sharpen the focus, or create "fake news" by combining unrelated images. For example, when you get x-rays, the results are emailed to the doctor right away instead of having to wait for the images to be developed.</li>
-				<div class="todo">
-                	It would be great to have a funny picture here&mdash;maybe Obama shaking hands with an alien or something obviously fake like this (but not as creepy)... --MF, 11/13/17<br />
-                    Brian wants it to not be political (maybe a rock star or something). I agree. --MF, 12/8/17
-					<img class="indent" src="http://images.huffingtonpost.com/2016-12-19-1482152530-8466162-clintonalien630x354-thumb.jpg" alt="" title="" />
-				</div>
+                <li><strong>Pictures.</strong> You likely have a photo viewing application on your own computer or phone. You can also use software to manipulate pictures to create artwork, sharpen the focus, or create "fake news" by combining unrelated images. For example, when you get x-rays, the results are emailed to the doctor right away instead of having to wait for the images to be developed.
+                    <div class="todo">
+                        It would be great to have a funny picture here&mdash;maybe Obama shaking hands with an alien or something obviously fake like this (but not as creepy)... --MF, 11/13/17<br />
+                        Brian wants it to not be political (maybe a rock star or something). I agree. --MF, 12/8/17
+                        <img class="indent" src="http://images.huffingtonpost.com/2016-12-19-1482152530-8466162-clintonalien630x354-thumb.jpg" alt="" title="" />
+                    </div>
+                </li>
                 <li><strong>Video.</strong> You can use streaming video services to watch movies online, or you can create your own. You can shoot movies on your phone, edit them by combining video from different sources, <!--You can animate cartoons with software just for that purpose.--> and upload them to the Internet or burn them onto a DVD to share them with your friends. Professional movie-making uses computer animation to create special effects like space aliens, armies of soldiers, and super heroes jumping over buildings.</li>
                 <li><strong><em>Your</em> programs.</strong> The projects you've been creating in Snap<em>!</em> are apps too!</li>
             </ul>

cur/programming/6-computers/1-abstraction/07-digital-components.es.html

@@ -21,6 +21,7 @@ <h2>Dominio digital: Componentes</h2>
         <div class="forYouToDo">
             <ol>
                 <li>Pasa el ratón sobre los números para conocer cada uno de los componentes de la computadora. (O descarga este <a href="/bjc-r/cur/programming/6-computers/1-abstraction/ComputerComponents.pdf" target="_blank" title="PDF de componentes de computadora">PDF de componentes de computadoras</a>.)</li>
+            </ol>
                 <map name="Map">
                     <div class="hoverinfo">
                         <area shape="rect" coords="6,351,32,377" href="#"
@@ -105,7 +106,6 @@ <h2>Dominio digital: Componentes</h2>
                 </map>
                 <div class="sidenote"><small>Crédito de imagen: Usuario de Wikipedia HereToHelp</small></div>
                 <img class="indent" src="/bjc-r/img/6-computers/Hardware_img/ComputerComponents.png" alt="Componentes de la computadora" title="Componentes de la computadora" height="400" usemap="#Map" style="min-width:665px;position:relative;">
-            </ol>
         </div>
 
         <div class="endnote">

cur/programming/6-computers/1-abstraction/07-digital-components.html

@@ -25,6 +25,7 @@ <h2>The Digital Domain: Components</h2>
         <div class="forYouToDo">
             <ol>
                 <li>Hover the mouse over the numbers to learn about each of the computer components.  (Or download this <a href="/bjc-r/cur/programming/6-computers/1-abstraction/ComputerComponents.pdf" target="_blank" title="PDF of Computer Components">Computer Components PDF</a>.)</li>
+            </ol>
                 <map name="Map">
                     <div class="hoverinfo">
                         <area shape="rect" coords="6,351,32,377" href="#" aria-labelledby="scanner_desc">
@@ -110,7 +111,6 @@ <h2>The Digital Domain: Components</h2>
                 </map>
                 <div class="sidenote"><small>Image credit:<!--<a href="https://en.wikipedia.org/wiki/Computer_hardware#/media/File:Personal_computer,_exploded_6.svg" target="_blank">--> Wikipedia user HereToHelp</small><!--</a>--></div>
                 <img class="indent" src="/bjc-r/img/6-computers/Hardware_img/ComputerComponents.png" alt="Computer Components" title="Computer Components" height="400" usemap="#Map" style="min-width:665px;position:relative;">
-            </ol>
         </div>
 
         <div class="endnote">

cur/programming/7-recursion/1-trees/1-recursive-tree.es.html

@@ -65,9 +65,12 @@ <h2>El árbol recursivo</h2>
 </ol></li></ol></div>
                         <div class="takeItFurther"><ol type="A">
                           <li>How many blocks would you need to write <code>árbol3a</code> out of Motion blocks similarly to how we wrote <code>árbol2a</code>? How about <code>árbol4a</code>?</li></ol></div>
-<div class="forYouToDo"><ol  start="3">                   --> 		<div class="sidenote">Usar <code>árbol 1</code> para dibujar las ramas en <code>árbol 2</code> es usar <em>abstracción</em>.</div>
+<div class="forYouToDo"><ol  start="3">                   --> 		
 
-<li>Construye un bloque <code>árbol 2</code> que utilice <code>árbol 1</code> como sus ramas. <img src="/bjc-r/img/7-recursion/tree-2(50).es.png" alt="Tamaño del árbol 1:(50)" title="Tamaño del árbol 1:(50)"><br /><img class="indent" src="/bjc-r/img/7-recursion/tree2.es.png" alt="árbol2 tamaño:(tamaño#){mover(tamaño) pasos; girar (25) grados; árbol 1 tamaño:(tamaño*0.65); girar (25) grados; girar (35) grados; árbol 1 tamaño:(tamaño*0.85); girar (35); move(-1*tamaño) pasos}" title="árbol2 tamaño:(tamaño#){mover(tamaño) pasos; girar (25) grados; árbol 1 tamaño:(tamaño*0.65); girar (25) grados; girar(35) grados; árbol 1 tamaño:(tamaño*0.85); girar (35); mover(-1*tamaño) pasos}"/>                      </li>
+                <li>
+                    <div class="sidenote">Usar <code>árbol 1</code> para dibujar las ramas en <code>árbol 2</code> es usar <em>abstracción</em>.</div>
+                    Construye un bloque <code>árbol 2</code> que utilice <code>árbol 1</code> como sus ramas. <img src="/bjc-r/img/7-recursion/tree-2(50).es.png" alt="Tamaño del árbol 1:(50)" title="Tamaño del árbol 1:(50)"><br /><img class="indent" src="/bjc-r/img/7-recursion/tree2.es.png" alt="árbol2 tamaño:(tamaño#){mover(tamaño) pasos; girar (25) grados; árbol 1 tamaño:(tamaño*0.65); girar (25) grados; girar (35) grados; árbol 1 tamaño:(tamaño*0.85); girar (35); move(-1*tamaño) pasos}" title="árbol2 tamaño:(tamaño#){mover(tamaño) pasos; girar (25) grados; árbol 1 tamaño:(tamaño*0.65); girar (25) grados; girar(35) grados; árbol 1 tamaño:(tamaño*0.85); girar (35); mover(-1*tamaño) pasos}"/>
+                </li>
 			    <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" />Describe exactamente la posición y la dirección del objeto cuando el primer <code>árbol 1</code> deja de ejecutarse. ¿Por qué es esencial para que funcione <code>árbol 2</code>?</li>
                     </ol>
 </div>
@@ -78,14 +81,15 @@ <h2>El árbol recursivo</h2>
         <div class="forYouToDo">
             <ol start="5">
 
-                <li>Haz un bloque <code>árbol 3</code> que use el bloque <code>árbol 2</code> como ramas.</li>
-                <div class="endnote">
-                    Haz clic con el botón derecho del ratón (o control-clic en Mac) sobre un bloque para "duplicarlo" o "renombrarlo" para hacer estas tareas más rápido. <a href="#hint-dup-and-relabel" data-toggle="collapse" title="Haz clic para mostrar un ejemplo.">Haz clic para mostrar un ejemplo.</a>
-                    <div id="hint-dup-and-relabel" class="collapse">
-                        <div class="sidenote">Needs better alt/title text. --MF, 6/18/20</div>
-                        <img class="indent" src="/bjc-r/img/7-recursion/dup-and-relabel.gif" alt="opción del menú para duplicar y renombrar" title="opción del menú para duplicar y renombrar" />
+                <li>Haz un bloque <code>árbol 3</code> que use el bloque <code>árbol 2</code> como ramas.
+                    <div class="endnote">
+                        Haz clic con el botón derecho del ratón (o control-clic en Mac) sobre un bloque para "duplicarlo" o "renombrarlo" para hacer estas tareas más rápido. <a href="#hint-dup-and-relabel" data-toggle="collapse" title="Haz clic para mostrar un ejemplo.">Haz clic para mostrar un ejemplo.</a>
+                        <div id="hint-dup-and-relabel" class="collapse">
+                            <div class="sidenote">Needs better alt/title text. --MF, 6/18/20</div>
+                            <img class="indent" src="/bjc-r/img/7-recursion/dup-and-relabel.gif" alt="opción del menú para duplicar y renombrar" title="opción del menú para duplicar y renombrar" />
+                        </div>
                     </div>
-                </div>
+                </li>
               <li>Haz un bloque <code>árbol 4</code> que use el bloque <code>árbol 3</code> como ramas.</li>
               <!--                <div class="endnote">
                 	Right-click (or control-click on a Mac) a block to "duplicate" or "relabel" blocks to make these tasks much faster.<br />
@@ -103,8 +107,9 @@ <h2>El árbol recursivo</h2>
         <p>Todos estos bloques se ven esencialmente iguales excepto que <code>árbol 5</code> usa <code>árbol 4</code>, mientras que <code>árbol 4</code> usa <code>árbol 3</code>, y así sucesivamente. Entonces tiene sentido preguntarse si podemos reemplazar todos estos bloques con un solo bloque <code>árbol</code>, usando una variable para el número que cambia.</p>
 		<div class="vocabFullWidth">
             <p>Usar un bloque dentro de sí mismo se llama <strong>recursividad</strong> (<em>recursion</em>) .</p>
-            <div class="endnote">Aprendiste sobre la recursividad en <a href="/bjc-r/cur/programming/3-lists/1-abstraction/3-fractal-art-recursive.html?topic=nyc_bjc%2F3-lists.topic&course=bjc4nyc.html&novideo&noassignment" title="Unidad 3 Laboratorio 1 Página 3: Usar la abstracción para anidar triángulos">Unidad 3 Laboratorio 1 Página 3: Usar la abstracción para anidar triángulos</a>.</div>
-        </div></div>
+            <div class="endnote">Aprendiste sobre la recursividad en <a href="/bjc-r/cur/programming/3-lists/1-abstraction/3-fractal-art-recursive.html?topic=nyc_bjc%2F3-lists.topic&course=bjc4nyc.html&novideo&noassignment" title="Unidad 3 Laboratorio 1 Página 3: Usar la abstracción para anidar triángulos">Unidad 3 Laboratorio 1 Página 3: Usar la abstracción para anidar triángulos</a>
+            </div>
+        </div>
 
 
 		<!--<div class="forYouToDo">