26

ruby/index.html

@@ -73,4 +73,5 @@ <h2>Contenidos</h2>
         </ol>
     </li>
     <li>return implícito</li>    
-</ol>
+</ol>
+</body>

ruby/temas/0.html

@@ -1 +1,18 @@
-<h1>Entorno</h1>
+<h1>Entorno Ruby</h1>
+
+<h2>Visual Studio Code</h2>
+
+<p>Descargar de <a href="https://code.visualstudio.com/">https://code.visualstudio.com/</a> e instalar.</p>
+
+<p>Una vez instalado, creamos un directorio, lo arrastramos al VSCode y creamos un fichero llamado hello.rb. Para ejecutarlo escribimos ruby hello.rb desde un terminal que podemos abrir en el mismo VSCode.</p>
+
+<img src="img/image1.png">
+
+<h2>Intérprete</h2>
+
+<p>Descarga de <a href="https://www.ruby-lang.org/es/">https://www.ruby-lang.org/es/</a> e instala.</p>
+
+<p>Una vez instalado abrimos un terminal y podemos comprobar la versi&oacute;n:<br>
+        <code>$ ruby --version
+    ruby 3.0.0p0 (2020-12-25 revision 95aff21468)
+        li class="c4 c47 c14 li-bullet-0"><span class="c6">instalar el debugger (rdgb)</span></li></ul><p class="c4 c70"><span class="c9">$ gem install debug</span></p><h3 class="c37" id="h.i77wxp24ldbp"><span class="c82 c55">Visual Studio Code</span><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 56.69px; height: 56.69px;"><img alt="" src="images/image7.png" style="width: 56.69px; height: 56.69px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></h3><ul class="c65 lst-kix_nohry4v35g9h-0 start"><li class="c4 c47 c14 li-bullet-0"><span>descargar de </span><span class="c30"><a class="c5" href="https://www.google.com/url?q=https://code.visualstudio.com/&amp;sa=D&amp;source=editors&amp;ust=1729963651560124&amp;usg=AOvVaw1id2Yat_mRA5EhpM2MQp4t">https://code.visualstudio.com/</a></span><span class="c6">&nbsp;e instalar</span></li></ul><p class="c2"><span class="c35"></span></p><p class="c2"><span class="c35"></span></p><p class="c4"><span>Una vez instalado, creamos un directorio, lo </span><span class="c55">arrastramos al VSCode</span><span>&nbsp;y creamos un fichero llamado </span><span class="c34">hello.rb</span><span>. Para ejecutarlo escribimos </span><span class="c34">ruby hello.rb</span><span>&nbsp;desde un terminal que podemos abrir en el mismo </span><span>VSCode</span><span class="c6">.</span></p><p class="c4"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 578.00px; height: 416.00px;"><img alt="" src="images/image1.png" style="width: 602.00px; height: 460.81px; margin-left: 0.00px; margin-top: -44.81px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c2"><span class="c6"></span></p><p class="c4"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 578.50px; height: 441.08px;"><img alt="" src="images/image3.png" style="width: 578.50px; height: 441.08px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><table class="c13"><tr class="c17"><td class="c145" colspan="1" rowspan="1"><p class="c2"><span class="c0"></span></p><p class="c4"><span class="c26">puts &quot;Hello world&quot;</span></p></td><td class="c172" colspan="1" rowspan="1"><p class="c4"><span class="c0">$ ruby hello.rb</span></p><p class="c4"><span class="c0">Hello world</span></p></td></tr></table><p class="c2"><span class="c6"></span></p><h3 class="c37" id="h.8wcgokgqaxaq"><span class="c82 c55">Debugger</span></h3><p class="c4"><span>Instala desde la secci&oacute;n </span><span class="c55">Extensiones</span><span class="c6">:</span></p><p class="c2"><span class="c6"></span></p><p class="c4"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 154.67px;"><img alt="" src="images/image11.png" style="width: 601.70px; height: 154.67px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c2"><span class="c6"></span></p><p class="c4"><span>Con el proyecto abierto, en la secci&oacute;n </span><span class="c55">Depuraci&oacute;n</span><span>&nbsp;crea el fichero </span><span class="c34">launch.json</span><span>&nbsp;seleccionando </span><span class="c34">Ruby (rdbg)</span><span class="c6">.</span></p><p class="c2"><span class="c6"></span></p><p class="c4"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 619.16px; height: 417.76px;"><img alt="" src="images/image10.jpg" style="width: 692.82px; height: 486.78px; margin-left: -35.68px; margin-top: -23.32px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><hr style="page-break-before:always;display:none;"><p class="c2"><span class="c6"></span></p><p class="c4"><span>En el fichero </span><span class="c34">.json</span><span class="c6">&nbsp;creado, confirma que est&aacute;n las variables con los valores:</span></p><p class="c7 c124"><span class="c34 c123">&quot;</span><span class="c34">useTerminal</span><span class="c34 c123">&quot;</span><span class="c9">: true,</span></p><p class="c4 c7"><span class="c34 c123">&quot;</span><span class="c34">askParameters</span><span class="c34 c123">&quot;</span><span class="c34">: false</span></p><p class="c2"><span class="c6"></span></p><p class="c4"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 400.00px;"><img alt="" src="images/image14.png" style="width: 601.70px; height: 400.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c2"><span class="c6"></span></p><p class="c4"><span>A&ntilde;ade un breakpoint en tu c&oacute;digo y lanza la </span><span class="c55">depuraci&oacute;n</span><span class="c6">. Si obtienes un error como:</span></p><p class="c2"><span class="c6"></span></p><p class="c4"><span class="c10">santiagoalvarezrojo@Mac-mini-de-santi code % rdbg --command --open --stop-at-load --sock-path=/var/folders/f4/zj4rsj3x37v9x0kls6sws9jw0</span></p><p class="c4"><span class="c10">000gp/T/rdbg-502/rdbg-17424 -- ruby /Users/santiagoalvarezrojo/Downloads/code/m primitiva/22mbp1.rb</span></p><p class="c4"><span class="c29">ruby: </span><span class="c108 c77 c55">No such file or directory -- /Users/santiagoalvarezrojo/Downloads/code/m (LoadError)</span></p><p class="c2"><span class="c6"></span></p><p class="c4"><span>Posiblemente tengas alg&uacute;n espacio en los nombres de las carpetas o de los ficheros. Elimina los espacios (puedes sustituirlos por </span><span class="c34">_</span><span>).</span></p><h2 class="c8" id="h.r4ut3dczwdg8"><span class="c61 c55"

ruby/temas/4.html

@@ -0,0 +1,74 @@
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cargar código desde GitHub (Prism.js)</title>
+    <!-- Tema de GitHub para Prism -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-ghcolors.min.css" rel="stylesheet" />
+    <!-- Prism JavaScript -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+    <!-- Componente para Ruby -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-ruby.min.js"></script>
+    <!-- Estilos para el botón de copiar -->
+    <style>
+        .code-container {
+            position: relative;
+            margin-bottom: 20px;
+        }
+        .copy-button {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            padding: 5px 10px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            cursor: pointer;
+            border-radius: 5px;
+            font-size: 12px;
+        }
+        .copy-button:active {
+            background-color: #0056b3;
+        }
+    </style>
+</head>
+<body>
+<h1>Atributos</h1>
+<p>Definen la forma de los objetos de la clase. Empiezan con @</p>
+    <!-- JavaScript para cargar el archivo de GitHub y habilitar el botón de copiar -->
+    <script>
+        // URL cruda del archivo de GitHub
+        const archivoGitHub = '4.rb';
+
+        // Función para cargar y mostrar el contenido del archivo de GitHub
+        fetch(archivoGitHub)
+            .then(response => response.text())
+            .then(data => {
+                // Insertar el código en el contenedor
+                document.getElementById('codigo-github').textContent = data;
+
+                // Reprocesar el bloque de código para resaltarlo con Prism
+                Prism.highlightAll();
+            })
+            .catch(error => console.error('Error al cargar el archivo:', error));
+
+        // Función para copiar el contenido del código
+        function copiarCodigo() {
+            // Seleccionar el código dentro del bloque
+            const codigo = document.getElementById('codigo-github').textContent;
+            // Crear un área de texto temporal para copiar el texto
+            const textArea = document.createElement('textarea');
+            textArea.value = codigo;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+            // Cambiar el texto del botón temporalmente
+            const button = document.querySelector('.copy-button');
+            button.textContent = 'Copiado';
+            setTimeout(() => button.textContent = 'Copiar', 2000);
+        }
+    </script>
+
+</body>
+</html>