<!DOCTYPE HTML>
<html lang="es" class="light sidebar-visible" dir="ltr">
<head>
<!-- Book generated using mdBook -->
<meta charset="UTF-8">
<title>Portafolio Web de Thomas</title>
<meta name="robots" content="noindex">
<!-- Custom HTML head -->
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="shortcut icon" href="favicon.png">
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/chrome.css">
<link rel="stylesheet" href="css/print.css" media="print">
<!-- Fonts -->
<link rel="stylesheet" href="FontAwesome/css/font-awesome.css">
<link rel="stylesheet" href="fonts/fonts.css">
<!-- Highlight.js Stylesheets -->
<link rel="stylesheet" href="highlight.css">
<link rel="stylesheet" href="tomorrow-night.css">
<link rel="stylesheet" href="ayu-highlight.css">
<!-- Custom theme stylesheets -->
<!-- Provide site root to javascript -->
<script>
var path_to_root = "";
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
</script>
<!-- Start loading toc.js asap -->
<script src="toc.js"></script>
</head>
<body>
<div id="body-container">
<!-- Work around some values being stored in localStorage wrapped in quotes -->
<script>
try {
var theme = localStorage.getItem('mdbook-theme');
var sidebar = localStorage.getItem('mdbook-sidebar');
if (theme.startsWith('"') && theme.endsWith('"')) {
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
}
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
}
} catch (e) { }
</script>
<!-- Set the theme before any content is loaded, prevents flash -->
<script>
var theme;
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; }
const html = document.documentElement;
html.classList.remove('light')
html.classList.add(theme);
html.classList.add("js");
</script>
<input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
<!-- Hide / unhide sidebar before it is displayed -->
<script>
var sidebar = null;
var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
if (document.body.clientWidth >= 1080) {
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
sidebar = sidebar || 'visible';
} else {
sidebar = 'hidden';
}
sidebar_toggle.checked = sidebar === 'visible';
html.classList.remove('sidebar-visible');
html.classList.add("sidebar-" + sidebar);
</script>
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
<!-- populated by js -->
<mdbook-sidebar-scrollbox class="sidebar-scrollbox"></mdbook-sidebar-scrollbox>
<noscript>
<iframe class="sidebar-iframe-outer" src="toc.html"></iframe>
</noscript>
<div id="sidebar-resize-handle" class="sidebar-resize-handle">
<div class="sidebar-resize-indicator"></div>
</div>
</nav>
<div id="page-wrapper" class="page-wrapper">
<div class="page">
<div id="menu-bar-hover-placeholder"></div>
<div id="menu-bar" class="menu-bar sticky">
<div class="left-buttons">
<label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
<i class="fa fa-bars"></i>
</label>
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
<i class="fa fa-paint-brush"></i>
</button>
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
<li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
</ul>
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
<i class="fa fa-search"></i>
</button>
</div>
<h1 class="menu-title">Portafolio Web de Thomas</h1>
<div class="right-buttons">
<a href="print.html" title="Print this book" aria-label="Print this book">
<i id="print-button" class="fa fa-print"></i>
</a>
</div>
</div>
<div id="search-wrapper" class="hidden">
<form id="searchbar-outer" class="searchbar-outer">
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
</form>
<div id="searchresults-outer" class="searchresults-outer hidden">
<div id="searchresults-header" class="searchresults-header"></div>
<ul id="searchresults">
</ul>
</div>
</div>
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
<script>
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
});
</script>
<div id="content" class="content">
<main>
<h1 id="chapter-1"><a class="header" href="#chapter-1">Chapter 1</a></h1>
<p>Se diseñó una página web con el propósito de integrarla al repositorio alojado en Chiselapp, buscando ofrecer una interfaz clara, funcional y visualmente atractiva. Esta página cumple el objetivo de presentar de manera ordenada y accesible la información relevante del proyecto, permitiendo a los usuarios navegar y comprender su contenido con facilidad. El diseño fue elaborado considerando principios de usabilidad y coherencia visual, alineándose con los requerimientos del repositorio y las buenas prácticas de desarrollo web.</p>
<div style="break-before: page; page-break-before: always;"></div><!--@meta
---
breaks: false
Autor: Thomas Martínez Sánchez
tags: Unidades Semánticas
---
-->
<h1 id="microdocumentación-y-publicación-parte-2"><a class="header" href="#microdocumentación-y-publicación-parte-2">Microdocumentación y publicación (parte 2)</a></h1>
<ol>
<li><a href="https://docutopia.sustrato.red/unisema:25A1">Primera clase</a> Presentación de la materia</li>
<li><a href="https://docutopia.sustrato.red/unisema:25A2">Segunda clase</a> Diseño de la caja de herramientas <em>Powershell</em> <em>Freeplane</em> <em>Flameshot</em></li>
<li><a href="https://docutopia.sustrato.red/unisema:25A3">Tercera clase</a> Markdown y tutorial de Markdown</li>
<li><a href="https://docutopia.sustrato.red/unisema:25A4?both">Cuarta clase</a> Estrategias metacognitivas</li>
<li><a href="https://docutopia.sustrato.red/unisema:25A5?both">Quinta clase</a> Internet Archive, <em>presentación del mapa mental</em></li>
<li><a href="https://docutopia.sustrato.red/unisema:25A6?both">Sexta clase</a> Estrategias metacognitivas <strong>Exponer los mapas</strong></li>
<li><a href="https://docutopia.sustrato.red/unisema:25A7?both">Septima clase</a> Dimensiones icónicas, enactivas y simbólicas de la computación</li>
<li><a href="https://docutopia.sustrato.red/unisema:25A8?both">Octava clase</a> Micrositios de documentación y publicación <strong>Litle XL</strong></li>
<li><a href="https://docutopia.sustrato.red/unisema:25A9?both">Novena clase</a> Uso de Litle XL</li>
<li><a href="https://docutopia.sustrato.red/unisema:25A10?both">Decima clase</a> Poblar la tabla de contenido de <strong>mdBook</strong></li>
<li><a href="https://docutopia.sustrato.red/unisema:25A11?both">Onceava clase</a> Repositorios de <strong>Fossil</strong> y <strong>Chiselapp</strong></li>
<li><a href="https://docutopia.sustrato.red/unisema:25A12?both">Doceava clase</a> Sincronización de repositorios</li>
<li><a href="https://docutopia.sustrato.red/unisema:25A15?both">Clase 15</a> Entornos de publicación <strong>Parte 1</strong></li>
<li><a href="https://docutopia.sustrato.red/unisema:25A16?both">Clase 16</a> Entornos de publicación <strong>Parte 2</strong></li>
<li><a href="https://docutopia.sustrato.red/unisema:25A17?both">Clase 17</a> Lectura hipertextual</li>
<li><a href="https://docutopia.sustrato.red/unisema:25A18?both">clase 18</a> Live coding</li>
<li><a href="https://docutopia.sustrato.red/unisema:25A19?both">Clase 19</a></li>
<li><a href="https://docutopia.sustrato.red/unisema:25A20?both">Clase 20</a></li>
<li><a href="https://docutopia.sustrato.red/unisema:25A21?both">Clase 21</a></li>
<li><a href="https://docutopia.sustrato.red/unisema:25A22?both">Clase 22</a></li>
<li><a href="https://docutopia.sustrato.red/unisema:25A23?both">clase 23</a></li>
<li><a href="https://docutopia.sustrato.red/unisema:25A24?both">Clase 24</a></li>
<li><a href="https://docutopia.sustrato.red/unisema:25A25?both">Clase 25</a></li>
</ol>
<div style="break-before: page; page-break-before: always;"></div><h1 id="ejercicio-de-markdown"><a class="header" href="#ejercicio-de-markdown">Ejercicio de Markdown</a></h1>
<!--@meta
---
breaks: false
Autor: Thomas Martínez Sánchez
tags: Unidades Semánticas
---
-->
<h1 id="tutorial-de-markdown-thomas-martínez-sánchez"><a class="header" href="#tutorial-de-markdown-thomas-martínez-sánchez">Tutorial de Markdown (Thomas Martínez Sánchez)</a></h1>
<h2 id="primera-parte"><a class="header" href="#primera-parte">Primera parte</a></h2>
<h3 id="cursivas"><a class="header" href="#cursivas">Cursivas</a></h3>
<p>Para poner cursivas se señala con el símbolo _ Al inicio y al final de los términos</p>
<p>¡Escribir en Markdown no es difícil!</p>
<p><em>No es dificil</em></p>
<h3 id="negrilla"><a class="header" href="#negrilla">Negrilla</a></h3>
<p>Se utilizan los símbolos ** al inicio y al final de los términos que queramos resaltar en negrilla.</p>
<p>convierta la palabra "Completaré" en negrita.</p>
<p><strong>¡Completaré</strong> estas lecciones!</p>
<h3 id="cursivas-y-negrillas"><a class="header" href="#cursivas-y-negrillas">Cursivas y negrillas</a></h3>
<p>Se pueden usar ambos comandos dentro de la siguiente oración:</p>
<p><em>"Por supuesto", susurró ella. Entonces, gritó: "Todo lo que necesito es un poco de moxie!"</em></p>
<p>En el recuadro inferior, haga que las palabras "Por supuesto" estén en cursiva y las palabras "un poco de moxie" en negrita</p>
<p><em>Por supuesto</em>
<strong>Un poco de moxie</strong></p>
<h2 id="combinados"><a class="header" href="#combinados">combinados</a></h2>
<p>También se pueden usar los comandos antes mencionados al mismo tiempo en un mismo término u oración (El orden en el que se pongan ambos comandos no importa)</p>
<p><em><strong>Si está pensando, Esto es increible, probablemente está en lo correcto.</strong></em></p>
<h2 id="parte-2"><a class="header" href="#parte-2">Parte 2</a></h2>
<h3 id="encabezados"><a class="header" href="#encabezados">Encabezados</a></h3>
<p>Los encabezados en Markdown cuentan con uno o varios (#) antes del término o la frase</p>
<p>Por ejemplo:</p>
<ul>
<li>
<h1 id="encabezado-uno"><a class="header" href="#encabezado-uno">Encabezado uno</a></h1>
</li>
<li>
<h2 id="encabezado-dos"><a class="header" href="#encabezado-dos">Encabezado dos</a></h2>
</li>
<li>
<h3 id="encabezado-tres"><a class="header" href="#encabezado-tres">Encabezado tres</a></h3>
</li>
<li>
<h4 id="encabezado-cuatro"><a class="header" href="#encabezado-cuatro">Encabezado cuatro</a></h4>
</li>
<li>
<h5 id="encabezado-cinco"><a class="header" href="#encabezado-cinco">Encabezado cinco</a></h5>
</li>
<li>
<h6 id="encabezado-seis"><a class="header" href="#encabezado-seis">Encabezado seis</a></h6>
</li>
</ul>
<p>No puede hacer que el encabezado este en negrita, pero sí se puede poner en cursiva ciertas palabras. En el recuadro inferior, convierta la primera línea en un encabezado de nivel cuatro, y ponga en cursiva el nombre del libro:</p>
<h3 id="cien-años"><a class="header" href="#cien-años"><em>Cien años...</em></a></h3>
<h2 id="parte-3"><a class="header" href="#parte-3">Parte 3</a></h2>
<h3 id="enlaces"><a class="header" href="#enlaces">Enlaces</a></h3>
<p>tiene 2 tipos de anexo a los enlaces</p>
<h3 id="enlaces-de-tipo-1"><a class="header" href="#enlaces-de-tipo-1">Enlaces de tipo 1</a></h3>
<h4 id="enlace-en-línea"><a class="header" href="#enlace-en-línea">Enlace en línea</a></h4>
<p>Se encierra entre corchetes ([]) en los que se anota el texto y junto a este se ponen los paréntesis (()) donde se pone el enlace</p>
<p><a href="https://www.google.com/?hl=es">Pongamos cualquier enlace</a></p>
<h4 id="énfasis-en-los-enlaces"><a class="header" href="#énfasis-en-los-enlaces">énfasis en los enlaces</a></h4>
<p>Se puede subrrayar con negrilla un punto determinado en el texto que contiene el enlace.
Por ejemplo:</p>
<p><a href="https://www.google.com/?hl=es">Nos vamos a <strong>google</strong></a></p>
<h4 id="enlaces-dentro-de-encabezados"><a class="header" href="#enlaces-dentro-de-encabezados">Enlaces dentro de encabezados</a></h4>
<p>Dentro de los mismos encabezados también se pueden colocar enlaces.
Por ejemplo:</p>
<h4 id="podemos-poner-en-un-encabezado-de-tipo-3-el-siguiente-enlace"><a class="header" href="#podemos-poner-en-un-encabezado-de-tipo-3-el-siguiente-enlace">Podemos poner en un encabezado de tipo 3 el siguiente <a href="https://www.bbc.com/news">enlace</a></a></h4>
<h3 id="enlaces-de-tipo-2"><a class="header" href="#enlaces-de-tipo-2">Enlaces de tipo 2</a></h3>
<p>Se le conoce como <em>Enlace de referencia</em> es mas común utilizar los corchetes
por ejemplo:</p>
<p>Quiero visitar <a href="https://scoop.sh/#/">Scoop</a> ahora mismo.
Porque este <a href="https://scoop.sh/#/">espacio</a> es muy interesante para utilizar contenido.</p>
<h2 id="parte-4"><a class="header" href="#parte-4">Parte 4</a></h2>
<h3 id="imágenes"><a class="header" href="#imágenes">Imágenes</a></h3>
<h4 id="primera-forma"><a class="header" href="#primera-forma">Primera forma</a></h4>
<p>Al igual que los enlaces las imágenes tienen dos estilos de implementación en código.</p>
<p>El primero se le conoce como enlace en línea a una imagen. Se refiere a que por medio de un enlace similar a los anteriores ejemplos se puede anexar una imagen. Ejemplo:
Si quiero ver una imagen de
<img src="https://preview.redd.it/w14p35b8m5b91.jpg?width=640&crop=smart&auto=webp&s=8be1aae65e3e55f0b32744d695a66fca78e5682b" alt="Josh Allen" /></p>
<p>Ahora, en dado caso se puede usar la metodología de <em>Enlace de referencia</em> para poder anexar mas imágenes. Por ejemplo:</p>
<p>puedo dar click <a href="https://preview.redd.it/w14p35b8m5b91.jpg?width=640&crop=smart&auto=webp&s=8be1aae65e3e55f0b32744d695a66fca78e5682b">aquí</a> O si lo prefiero, también puedo dar click en esta <a href="https://res.cloudinary.com/ggus-dev/image/private/s--ypXX6IKn--/c_auto,g_auto,w_728,h_486/v1/2405e908/mecca.webp?_a=BAAAV6Bs">imagen</a>.</p>
<h2 id="parte-5"><a class="header" href="#parte-5">Parte 5</a></h2>
<h3 id="citas"><a class="header" href="#citas">Citas</a></h3>
<p>Para realizar una cita es importante colocar el símbolo > "Mayor que" antes de la frase que se va a citar.</p>
<p>Por ejemplo:</p>
<blockquote>
<p>si se ha de herir a un hombre se debe ser tan severo que no se pueda temer su venganza</p>
</blockquote>
<p>También es posible realizar citas a varios párrafos.</p>
<p>Por ejemplo:</p>
<blockquote>
<p>Allá en otros tiempos (y bien buenos tiempos que eran), había una vez una vaquita (¡mu!) que iba por un caminito. Y esta vaquita que iba por un caminito se encontró un niñín muy guapín, al cual le llamaban el nene de la casa...</p>
</blockquote>
<blockquote>
<p>Este era el cuento que le contaba su padre. Su padre le miraba a través de un cristal: tenía la cara peluda.</p>
</blockquote>
<blockquote>
<p>El era el nene de la casa. La vaquita venía por el caminito donde vivía Betty Byrne: Betty Byrne vendía trenzas de azúcar al limón.</p>
</blockquote>
<h3 id="citas-con-cursivas"><a class="header" href="#citas-con-cursivas">Citas con cursivas</a></h3>
<p>En medio de la cita se puede colocar la letra cursiva, esto para resaltar algunos aspectos clave dentro de la misma.</p>
<p>ejemplo:</p>
<blockquote>
<p>Se apartó bruscamente de ella, temeroso de que de la familiaridad pasase a las burlas y deseando desaparecer antes de verle ofrecer su mercancía a otra persona, a un turista inglés o a un estudiante de Trinity. La calle por donde caminaba, Grafton Street, prolongaba aquella sensación de desalentada pobreza. Al extremo de la calle había una placa dedicada a la memoria de Wolfe Tone. Le vino a la memoria el haber asistido con su padre a la colocación de ella. Y evocaba con amargura el oropel chillón de la ceremonia. Había cuatro delegados franceses subidos en una camioneta y uno de ellos, un joven rollizo y sonriente, sostenía un palo, al extremo del cual había un cartel con este letrero: <em>VIVE L'IRLANDE</em>!</p>
</blockquote>
<h2 id="parte-6"><a class="header" href="#parte-6">Parte 6</a></h2>
<h3 id="listas"><a class="header" href="#listas">Listas</a></h3>
<p>Para la creación de listas en <strong>Markdown</strong> es importante tener presente los elementos a enmarcar. Primero se debe colocar el símbolo de <strong>asterisco</strong> antes de cada término.</p>
<p>Por ejemplo:</p>
<ul>
<li>Huevos</li>
<li>Harina</li>
<li>Queso</li>
<li>Tomates</li>
</ul>
<p>También tenemos la opción de enmarcar los términos con números, lo cual le puede brindar un orden a las listas.
Para lograr esto simplemente debemos poner el número en vez del asterisco.</p>
<p>Ejemplo:</p>
<ol>
<li>cortar el queso</li>
<li>pelar los tomates</li>
<li>rebozar los tomates en harina</li>
</ol>
<h3 id="resaltar-listas"><a class="header" href="#resaltar-listas">Resaltar listas</a></h3>
<p>En Markdown también se puede resaltar listas, ya sea con <strong>negrilla</strong> o <em>Cursiva</em> o también agragando un enlace.</p>
<p>Ejemplo:</p>
<ul>
<li>Azalea (<em>Ericaceae Rhododendron</em>)</li>
<li>Crisantemo (<em><strong>Anthemideae Chrysanthemum</strong></em>)</li>
<li>Dalia (<em>Coreopsideae Dahlia</em>)</li>
</ul>
<h3 id="listar-sobre-listas"><a class="header" href="#listar-sobre-listas">listar sobre listas</a></h3>
<p>Dentro de las propias listas también podemos subcategorizar contenidos que hay dentro de cada término enlistado. Con esto cabe resaltar que esta posibilidad facilita a gran escala la caracterización en algún tema en específico.</p>
<p>Por ejemplo:</p>
<ul>
<li>Silvestre Tornasol
<ul>
<li>Profesor</li>
<li>No tiene pelo</li>
<li>Suele vestir de verde</li>
</ul>
</li>
<li>Castafiore
<ul>
<li>Cantante de ópera</li>
<li>Tiene el pelo blanco</li>
<li>Puede que no este muy bien de la cabeza</li>
</ul>
</li>
</ul>
<div style="break-before: page; page-break-before: always;"></div><h1 id="mapa-mental-de-alexnet"><a class="header" href="#mapa-mental-de-alexnet">Mapa mental de AlexNet</a></h1>
<!--@meta
---
breaks: false
Autor: Thomas Martínez Sánchez
tags: Unidades Semánticas
---
-->
<p><img src="https://ia600808.us.archive.org/35/items/the-moment-we-stopped-understanding-al/The%20moment%20we%20stopped%20understanding%20Al.svg" alt="Mapa mental" /></p>
<div style="break-before: page; page-break-before: always;"></div><h1 id="estrategias-metacognitivas"><a class="header" href="#estrategias-metacognitivas">Estrategias metacognitivas</a></h1>
<!--@meta
---
breaks: false
Autor: Thomas Martínez Sánchez
tags: Unidades Semánticas
---
-->
<h2 id="cómo-sabemos-qué-sabemosentendemos-de-ese-tema"><a class="header" href="#cómo-sabemos-qué-sabemosentendemos-de-ese-tema">¿cómo sabemos qué sabemos/entendemos de ese tema?</a></h2>
<p>Puedo darme cuenta que comprendo un tema y en específico uno de los componentes de Markdown cuando puedo dar una explicación de lo que es, sobre lo aprendido puedo argumentar y relacionar los distintos comandos que se puede aplicar de esto.</p>
<p>El ejemplo mas claro puede llegar a ser el siguiente:</p>
<ol>
<li>El manejo de carácteres como <strong>Enmarcar asteriscos</strong></li>
<li>La capacidad de <a href="https://images.app.goo.gl/XpFXerVzN9tZVork8">poner enlaces</a> que nos redirijan a cualquier sitio web, y en este caso de redirigirnos a una imagen</li>
</ol>
<p>Se puede mencionar que cuando la información que uno aprende la apropia se va convirtiendo en conocimiento de dominio propio, el cual puede transmitir de manera mas sencilla a otras personas.</p>
<h2 id="cómo-sabemos-qué-ignoramos-del-mismo"><a class="header" href="#cómo-sabemos-qué-ignoramos-del-mismo">¿Cómo sabemos qué ignoramos del mismo?</a></h2>
<h3 id="dificultades-en-el-entorno"><a class="header" href="#dificultades-en-el-entorno">Dificultades en el entorno</a></h3>
<p>En muchas ocasiones nos damos cuenta de un vacio que tenemos como personas en cuanto estamos comenzando a aprender algo nuevo. Y en muchas ocasiones por presión social decidimos no reafirmar lo que podemos llegar a conocer. Se puede decir que estamos hablando mas de un caracter socio-cultural.</p>
<p>Propongo el siguiente ejemplo:</p>
<ol>
<li>
<p>Cuando estamos en clase y queremos preguntar sobre un comando de Markdown (o sobre otro tema, no tiene que ser Markdown), pero dudamos en hacerlo por miedo a que otros piensen que es una pregunta <strong>obvia</strong>.</p>
</li>
<li>
<p>Si intentamos escribir una lista anidada y no logramos que se vea correctamente, pero asumimos que <strong>algo está mal</strong> en vez de buscar el error o preguntar.</p>
</li>
</ol>
<p>Si bien no es el único motivo por el cual una persona desconoce de un tema en específico, es un exponente por el cual una persona no se arriesga a cuestionar lo que está aprendiendo.</p>
<h3 id="investigación-de-la-falla"><a class="header" href="#investigación-de-la-falla">Investigación de la falla</a></h3>
<p>En otra intancia y ya profundizando en el campo de cuando lo sabemos, es claro el punto de investigación que uno realiza a la hora de conocer sobre un tema en específico. En el momento que llega algún punto que una persona no entiende se busca algún medio para poder comprender donde está la falla y como solucionarla. Mayormente se utilizan tutoriales en Youtube y/o los chatbot los cuales últimamente han tenido una gran popularidad entre la sociedad.</p>
<h2 id="cómo-disminuimos-lo-que-ignoramos-para-aumentarafianzar-lo-que-sabemos"><a class="header" href="#cómo-disminuimos-lo-que-ignoramos-para-aumentarafianzar-lo-que-sabemos">¿Cómo disminuimos lo que ignoramos para aumentar/afianzar lo que sabemos?</a></h2>
<p>Para solucionar nuestras dudas, es clave adoptar una mentalidad activa de aprendizaje. En lugar de ignorar los vacíos, podemos buscar respuestas a través de diferentes métodos, como la experimentación, la consulta de documentación oficial o el intercambio con otros que dominen el tema.</p>
<p>Ejemplo de cómo hacerlo en Markdown:</p>
<ol>
<li>Si no entendemos cómo hacer una tabla correctamente, podemos revisar la documentación de Markdown o probar diferentes estructuras hasta que funcione.</li>
<li>O si un comando no genera el formato esperado, podemos preguntar en foros o comunidades especializadas como <strong>Stack Overflow</strong> o <strong>GitHub Discussions</strong>.</li>
</ol>
<p>Resolver estas dudas no solo nos ayuda a mejorar en el tema, sino que también fortalece nuestra capacidad de aprender de forma autónoma y con mayor efectividad.</p>
<div style="break-before: page; page-break-before: always;"></div><h1 id="podrá-el-código-abierto-cambiar-la-democracia"><a class="header" href="#podrá-el-código-abierto-cambiar-la-democracia">Podrá el código abierto cambiar la democracia</a></h1>
<!--@meta
---
breaks: false
Autor: Thomas Martínez Sánchez
tags: Unidades Semánticas
---
-->
<h3 id="mapa-mental-de-como-podrá-el-código-abierto-cambiar-la-democracia"><a class="header" href="#mapa-mental-de-como-podrá-el-código-abierto-cambiar-la-democracia"><strong>Mapa mental de como podrá el código abierto cambiar la democracia</strong></a></h3>
<p><img src="https://ia601504.us.archive.org/26/items/clay-shirky-como-internet-algun-dia-transformara-el-gobierno_202502/Clay%20Shirky%20C%C3%B3mo%20Internet%20%28alg%C3%BAn%20d%C3%ADa%29%20transformar%C3%A1%20el%20gobierno.svg" alt="Mapa mental" /></p>
<div style="break-before: page; page-break-before: always;"></div><h1 id="impresiones-de-live-coding"><a class="header" href="#impresiones-de-live-coding">Impresiones de Live coding</a></h1>
<!--@meta
---
breaks: false
Autor: Thomas Martínez Sánchez
tags: Unidades Semánticas
---
-->
<h2 id="impresiones"><a class="header" href="#impresiones">Impresiones</a></h2>
<p>Para ser honesto, al explorar y analizar los contenidos de las plataformas Hedgedoc y Grafoscopía, sentí que el live coding representa una práctica profundamente innovadora y, al mismo tiempo, experimental. No se trata simplemente de una manera distinta de programar, sino de una propuesta que rompe los moldes tradicionales de la codificación, llevándola a un espacio de inmediatez, creatividad y, sobre todo, de interacción en tiempo real.</p>
<p>El live coding consiste en escribir código en vivo, generalmente con el propósito de producir resultados inmediatos, ya sea música, visuales, textos, o inclusive presentaciones artísticas interactivas. Esto lo convierte en un modelo que no solo aprovecha las capacidades del código ASCII y de los lenguajes de programación, sino que también fomenta una fusión entre la técnica y la expresión artística.</p>
<p>Al revisar estas plataformas, me llamó especialmente la atención cómo se abren nuevas posibilidades: el uso del código no únicamente como un medio técnico, sino como un lenguaje creativo en sí mismo. Las actividades de live coding pueden abarcar desde la creación de música algorítmica, escrita y modificada en tiempo real, hasta la producción colaborativa de documentos y obras literarias, como ocurre en las plataformas mencionadas.</p>
<p>Considero que este tipo de modelos pueden ser enormemente útiles para optimizar las ideas de los usuarios, ya que permiten materializar pensamientos, conceptos y experimentos de manera rápida, flexible y pública. El live coding rompe con la rigidez que tradicionalmente se le asocia a la programación, dándole un cariz más libre, espontáneo e incluso emocional.</p>
<p>Además, me pareció importante destacar la relación estrecha que existe entre el live coding y las comunidades colaborativas. Eventos como las Data Rodas y las Data Weeks son ejemplos claros de cómo estas prácticas fomentan entornos de aprendizaje colectivo, donde los conocimientos no se monopolizan, sino que se socializan, se construyen en conjunto y se democratizan. Este tipo de dinámicas también invita a repensar las formas tradicionales de enseñanza y de creación de conocimiento, privilegiando la horizontalidad y la accesibilidad.</p>
<p>El énfasis en el uso de herramientas específicas como FoxDot —un entorno para hacer música algorítmica en tiempo real usando Python—, o en lenguajes de programación como Smalltalk, muestra que el live coding no busca ser una práctica exclusiva de expertos, sino una actividad abierta a diferentes niveles de experiencia. Personas con poca o mucha trayectoria en programación pueden encontrar un espacio de participación y de experimentación, lo cual es sumamente valioso en un contexto donde a menudo el conocimiento técnico puede resultar intimidante.</p>
<p>Por otro lado, también me pareció interesante reflexionar sobre el carácter efímero pero documentable del live coding. Aunque lo que ocurre sucede en vivo, las plataformas como Hedgedoc permiten conservar una memoria colectiva de lo que se produce, lo que a su vez habilita nuevas formas de documentación viva, flexible y en constante evolución.</p>
<p>En resumen, el live coding me parece una práctica que dinamiza la relación entre programación, arte y comunidad, ofreciendo un abanico de posibilidades que van mucho más allá de la mera escritura de código para un producto final. Implica un cambio en la concepción misma de lo que significa crear, compartir y aprender en la era digital.</p>
<h2 id="inquietudes"><a class="header" href="#inquietudes">Inquietudes</a></h2>
<p>A pesar de las múltiples ventajas que vislumbro en el live coding, también surgen algunas inquietudes al respecto. Una de las principales preguntas que me planteo tiene que ver con las dinámicas de colaboración: dado que el live coding se desarrolla en tiempo real, ¿sería posible que múltiples usuarios trabajen de manera simultánea sobre un mismo flujo de código?</p>
<p>En otras palabras, ¿podría llevarse a cabo una edición verdaderamente colaborativa, donde varios participantes estén conectados a un mismo sistema y modifiquen en vivo el contenido, sin perder la coherencia ni comprometer el desempeño del proceso? Esta posibilidad abriría escenarios aún más ricos en términos de interacción social, creación colectiva y aprendizaje compartido.</p>
<p>Relacionada con esta pregunta, también me surge la duda de cómo se gestionaría el control de cambios en un entorno así de dinámico. ¿Sería necesario implementar sistemas de control de versiones adaptados a la inmediatez del live coding? ¿O se buscarían otros mecanismos de resolución de conflictos y coordinación entre participantes?</p>
<p>Finalmente, otra inquietud importante sería el manejo de errores en tiempo real. Dado que el código se escribe en vivo y muchas veces bajo presión, es inevitable que surjan fallos, errores de sintaxis o problemas lógicos. ¿Cómo se maneja el error en un contexto de live coding? ¿Se considera parte del proceso creativo o se intenta minimizar a toda costa?</p>
<div style="break-before: page; page-break-before: always;"></div><h1 id="challenge-yourself"><a class="header" href="#challenge-yourself">Challenge Yourself</a></h1>
<!--@meta
---
breaks: false
Autor: Thomas Martínez Sánchez
tags: Unidades Semánticas
---
-->
<h3 id="challenge-yourself-1"><a class="header" href="#challenge-yourself-1">Challenge Yourself</a></h3>
<p>Ejercicios tomados del libro:
Challenge yourself</p>
<p>Los ejercicios que se trabajaron fueron tomados del libro Challenge Yourself, que es básicamente la fuente base para esta parte del proceso. Todo esto también se puede ver reflejado en la página que publiqué usando Toolkit, donde está más claro visualmente cómo quedó lo que se hizo.</p>
<p>A continuación se anexará la página en donde se puede evidenciar la página donde se realizó el ejercicio:</p>
<ul>
<li><a href="https://chiselapp.com/user/thomas-martinez/repository/RepositorioThomas/doc/tip/wiki/unisemanticas/portafolio/challenge-yourself--9xuep.md.html">Página de challengeyourself Thomas</a></li>
</ul>
<div style="break-before: page; page-break-before: always;"></div><h2 id="mapa-mental-paradigmas-de-programación"><a class="header" href="#mapa-mental-paradigmas-de-programación">Mapa mental, paradigmas de programación</a></h2>
<!--@meta
---
breaks: false
Autor: Thomas Martínez Sánchez
tags: Unidades Semánticas
---
-->
<h3 id="mapa-mental-paradigmas-de-programación-1"><a class="header" href="#mapa-mental-paradigmas-de-programación-1">Mapa mental paradigmas de programación</a></h3>
<p><img src="https://ia600705.us.archive.org/32/items/object-oriented-programming-is-not-what-i-thought/Object%20Oriented%20Programming%20is%20not%20what%20I%20thought.svg" alt="paradigmas de programación - Thomas Martínez" /></p>
<div style="break-before: page; page-break-before: always;"></div><h1 id="lectura-anotada-pharo"><a class="header" href="#lectura-anotada-pharo">Lectura anotada pharo</a></h1>
<!--@meta
---
breaks: false
Autor: Thomas Martínez Sánchez
tags: Unidades Semánticas
---
-->
<h2 id="lectura-anotada-de-pharo"><a class="header" href="#lectura-anotada-de-pharo">Lectura anotada de Pharo</a></h2>
<h3 id="representando-y-procesando-datos-en-pharo"><a class="header" href="#representando-y-procesando-datos-en-pharo">Representando y procesando datos en Pharo</a></h3>
<p>"en el capítulo 1: ¿todo en Pharo es objeto? ¿hasta los números? ¿y los errores existenciales también son objetos o qué?"</p>
<p>"--- Números ---"
3 + 4. "en el capítulo 1: esto da 7. Ok, sí, pero... ¿por qué parece que 3 le está mandando una carta al 4? ¿esto es OOP en esteroides?"</p>
<p>10 - 2. "en el capítulo 1: resta normal, cero emoción."
5 * 2. "en el capítulo 1: esto da 10. matemáticas básicas funcionando como siempre."
20 / 4. "en el capítulo 1: da 5.0. ¿por qué no 5 a secas? Ah, porque ya están metiendo floats sin permiso..."</p>
<p>"--- Strings ---"
'Hola mundo'. "en el capítulo 2: ¿comillas simples para los strings? raro, pero bueno."</p>
<p>'Hola' , ' mundo'. "en el capítulo 2: ¿coma para concatenar? Qué poético."</p>
<p>'Pharo' class. "en el capítulo 2: esto devuelve 'String'. obvio, pero igual necesitaba comprobarlo porque uno nunca sabe..."</p>
<p>"--- Colecciones ---"</p>
<h1 id="1-2-3--en-el-capítulo-3-esto-es-un-array-fijo-pa-qué-me-sirve-si-no-lo-puedo-cambiar"><a class="header" href="#1-2-3--en-el-capítulo-3-esto-es-un-array-fijo-pa-qué-me-sirve-si-no-lo-puedo-cambiar">(1 2 3). "en el capítulo 3: esto es un array fijo. ¿pa’ qué me sirve si no lo puedo cambiar?"</a></h1>
<p>Array with: 1 with: 2 with: 3. "en el capítulo 3: ahora sí, esto es más usable. gracias."</p>
<h1 id="1-2-3-at-2--en-el-capítulo-3-esto-da-2-pero-por-qué-los-índices-empiezan-en-1-quién-decidió-esto"><a class="header" href="#1-2-3-at-2--en-el-capítulo-3-esto-da-2-pero-por-qué-los-índices-empiezan-en-1-quién-decidió-esto">(1 2 3) at: 2. "en el capítulo 3: esto da 2. Pero... ¿por qué los índices empiezan en 1? ¿¡quién decidió esto!?"</a></h1>
<p>"--- Diccionario ---"
dict := Dictionary new. "en el capítulo 4: ok, diccionario creado. listo pa' chismear."</p>
<p>dict at: 'nombre' put: 'Thomas'. "en el capítulo 4: agregué 'nombre'. soy yo."
dict at: 'edad' put: 24. "y obvio, la edad también. bastante autorreferencial este ejercicio."</p>
<p>dict at: 'nombre'. "en el capítulo 4: esto devuelve 'Thomas'. si no, algo explotó."</p>
<p>"--- Clases ---"
"en el capítulo 5: hora de sentirme poderoso. vamos a crear una clase llamada Persona."</p>
<p>Object subclass: #Persona
instanceVariableNames: 'nombre edad'. "tiene lo básico para existir: nombre y edad. con eso me basta."</p>
<p>p := Persona new. "en el capítulo 5: creé una persona. básicamente Dios."</p>
<p>p instVarNamed: 'nombre' put: 'Thomas'. "le metí el nombre. igualito a mí."
p instVarNamed: 'edad' put: 24. "la edad también. seguimos clonándome."</p>
<p>p inspect. "en el capítulo 5: el inspector me deja ver por dentro a mi creación. medio creepy, medio cool."</p>
<div style="break-before: page; page-break-before: always;"></div><h1 id="json---pokemones"><a class="header" href="#json---pokemones">json - pokemones</a></h1>
<!--@meta
---
breaks: false
Autor: Thomas Martínez Sánchez
tags: Unidades Semánticas
---
-->
<p>#Proyecto final</p>
<p>A continuación, se presentan los enlaces correspondientes al desarrollo del proyecto final. Por un lado, se encuentra el enlace al proyecto final implementado en GToolkit/Grafoscopio, donde se documenta y ejecuta el código solicitado en la actividad. Por otro lado, también se incluye el enlace a la narrativa original utilizada como base para extender y desarrollar el ejercicio. Ambos recursos están disponibles de forma pública y cumplen con los requerimientos establecidos por el profesor para esta entrega.</p>
<p>-<a href="https://mutabit.com/repos.fossil/labci/doc/tip/wiki/revisando-la-participacion-continua--2w3jt.md.html#proyectofinal">Narrativa original del profesor</a>
-<a href="https://chiselapp.com/user/thomas-martinez/repository/RepositorioThomas/doc/tip/proyecto-final--9imyt.md.html">Mi proyecto final basado en la narrativa original</a></p>
<div style="break-before: page; page-break-before: always;"></div><h1 id="mdbook"><a class="header" href="#mdbook">mdbook</a></h1>
</main>
<nav class="nav-wrapper" aria-label="Page navigation">
<!-- Mobile navigation buttons -->
<div style="clear: both"></div>
</nav>
</div>
</div>
<nav class="nav-wide-wrapper" aria-label="Page navigation">
</nav>
</div>
<!-- Livereload script (if served using the cli tool) -->
<script>
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsAddress = wsProtocol + "//" + location.host + "/" + "__livereload";
const socket = new WebSocket(wsAddress);
socket.onmessage = function (event) {
if (event.data === "reload") {
socket.close();
location.reload();
}
};
window.onbeforeunload = function() {
socket.close();
}
</script>
<script>
window.playground_copyable = true;
</script>
<script src="elasticlunr.min.js"></script>
<script src="mark.min.js"></script>
<script src="searcher.js"></script>
<script src="clipboard.min.js"></script>
<script src="highlight.js"></script>
<script src="book.js"></script>
<!-- Custom JS scripts -->
<script>
window.addEventListener('load', function() {
window.setTimeout(window.print, 100);
});
</script>
</div>
</body>
</html>