Matriz de Prioridades

Bienvenido a este capítulo donde estaremos desarrollando una herramienta de "Matriz de Prioridades" aplicando los conceptos de "lógica básica" y "comunicación básica" que hemos visto en este repositorio. Todas las herramientras usadas en este caso ya han sido explicadas en los capítulos correspondientes. De todas maneras, estaré dejando los enlaces según vea conveniente. Sin más dilación...

---

Empecemos...

...definiendo ¿qué es una matriz de prioridades?. Y básicamente es una aplicación en la que puedes poner tus proyectos en lista y puntuarlo según ciertas consideraciones que previamente has establecido como importantes.

Y ¿para qué sirve una herramienta de este tipo? Sucede que actualmente estoy trabajando en una serie de proyectos e ideas de negocio, y me gustaría estimar la prioridad que debo darle a cada uno. Para ello, he definido un conjunto de atributos que, personalmente, son importantes para tomar una decisión. Siéntete en libertad de cambiar estos atributos según creas conveniente, ya que estos van dirigidos a temas de emprendimiento. Ahora hablemos...

---

...sobre el proyecto.

En mi caso, quería crear una herramienta de "matriz de prioridades" que me sirviera para tomar decisiones más informado, que pudiese trasladarlo a cualquier lugar, ya que usualmente estas decisiones se toman en conjuntos y que tuviera un aspecto bastante simple y sobrio. Como no había encontrado una herramienta similar en el mercado, decidí hacerlo yo mismo.

A continuación, deberás escoger tu IA de preferencia. Yo trabajo con la IA de Google AI Studio, por razones que ya expliqué aquí. Pero la lógica y comunicación se aplica a cualquier IA de tu preferencia.

---

Lógica

Para definir la lógica, empezaremos definiendo las características principales que queremos que tenga la herramienta. Preguntas como: ¿qué quiero que haga? ¿cuando haga clic aquí qué va a pasar? ¿cómo va a interactuar tal o cual cosa? ¿cómo se va a ver? ¿qué atributos quiero ver yo en esta herramienta? entre otras más, nos ayudarán a definir la lógica.

Recordemos que la lógica la he dividido en dos partes: por un lado está la parte de Fondo (estructura), que nos ayuda definiendo las funciones, y por otra parte está la Forma (estética), que nos ayuda definiendo la parte visual.

Con esto como punto de partida, definí los puntos clave que la herramienta me debería permitir hacer y fueron: poner el nombre de mis proyectos, puntuar los proyectos según sus atributos y dar un score final para, posteriormente, hacer mis propias evaluaciones de viabilidad. Te dejo un esquema de mi lógica en base al "Fondo (estructura) y Forma (estética)":

Al ser una herramienta relativamente sencilla, definí los valores estéticos para que fuesen lo más sobrios posibles, optando por un diseño minimalista y considerando algunos criterios como la paleta de colores y estilos. Sin embargo, lo más importante es definir el formato y para esta herramienta en particular usaré formato tabla. Puedes ver la imagen de abajo un acercamiento a cómo tenía en mente la estructura de la herramienta. Ahora...

---

...los valores internos.

Como se trata de una herramienta que va a tener ciertos atributos y estos atributos van a ser puntuados, había que definir una relación para evitar confusiones.

Lo primero que había que hacer es definir la escala de puntuación, que en este caso iba de 1 a 3. Sin embargo, si solo asumimos que 1 corresponde a "menos probable" y 3 a "más probable", podrían generarse confusiones al leer y puntuar cada variable. Por lo que, realicé una especificación de cada atributo que posteriormente colocaremos en la herramienta, quedándonos de la siguiente manera:

Atributos y Puntuaciones

-> Impacto y Potencial, donde 1 es "menos impacto" y 3 "más impacto"

-> Facilidad de Implementación, donde 1 es "difícil de implementar" y 3 "fácil de implementar"

-> Recuersos necesarios, donde 1 es "no cuento con los recursos" y 3 "cuento con recursos"

-> Público definido, donde 1 es "no conoce el público" y 3 "conoce al público"

-> Rentabilidad, donde 1 es "poco rentable" y 3 "muy rentable"

-> Competencia, donde 1 es "bastante competencia" y 3 "poca competencia"

En este caso, el número 2 actuaría como un comodín cuando no se está seguro o se tiene un conocimiento medio del atríbuto en cuestión.

Simple, ¿verdad?. Yo sé que puede parecer complejo al inicio tener que hacer todo esto, pero te aseguro que es la manera en cómo te puedes ahorrar bastantes pasos y dolores de cabeza después. Ahora, ¿qué toca?.

---

Definir la comunicación...

...que no es otra cosa que hacer el prompt. Pero como ya hemos visto, de esta depende que la IA te entienda, te entienda a medias o no te entienda. Yo he propuesto, para este ejercicio, definir una jerarquía lineal haciendo una descripción de la herramienta y su comportamiento viéndolo de arriba hacia abajo.

En este caso, como yo definí en el formato que la herramienta sería una tabla, la estructura de comunicación nos quedaría de arriba hacia abajo:

Recuerda que la idea detrás de estructurar un buen prompt es evitar la máxima cantidad de errores y llegar al resultado de la manera más rápida.

Prompt 1: Basado en la lógica propuesta y con una jerarquía en la comunicación

Quiero trabajar una herramienta para delimitar la prioridad de mis proyectos, ya que actualmente tengo muchos pendientes. Me gustaría que la herramienta esté en HTML siguiendo las siguientes especificaciones. (Comenzamos indicando el lenguaje, ya que es la base sobre la que se sentará la herramienta y resaltamos que considere un solo archivo porque lo usaremos para compartir.)

La primera fila tendrá el nombre "Matriz de prioridades". Debajo pondremos una fila de tres columnas. En la primera columna dirá "Proyectos" y las siguientes columnas tendrán un espacio para rellenar con el nombre de proyecto que quiera. Debajo de "proyectos" crearemos una columna con seis celdas. En la primera celda dirá "Impacto y Potencial" y debajo, entre paréntesis, más pequeño y con un color gris claro "1 menos impacto - 3 más impacto"; en la segunda celda dirá "Facilidad de implementación" y debajo, entre paréntesis, más pequeño y con un color gris claro "1 difícil de implementar - 3 fácil de implementar"; en la tercera celda dirá "Recursos necesarios" y debajo, entre paréntesis, más pequeño y con un color gris claro "1 cuenta con los recursos - 3 no cuenta con los recursos"; en la cuarta celda dirá "Público definido" y debajo, entre paréntesis, más pequeño y con un color gris claro "1 no conoce el público - 3 conoce el público"; en la quinta celda dirá "Rentabilidad" y debajo, entre paréntesis, más pequeño y con un color gris claro "1 poco rentable - 3 muy rentable"; en la sexta celda dirá "Competencia" y debajo, entre paréntesis, más pequeño y con un color gris claro "1 Bastante competencia - 3 Sin competencia". (Continuamos detallando minuciosamente cada atributo de la herramienta. Aquí puedes cambiar los atributos según desees.)

Debajo de cada nombre de proyecto se creará una columna y en cada espacio un desplegable que permita escoger un valor de 1 a 3.

Al final de todo crea una fila adicional y en la primera celda dirá "Total" y en las siguientes celdas se mostrarán la suma de los valores escogidos. Además, debe tener un botón que permita agregar una nueva columna para sumar un nuevo proyecto y otro botón que permita limpiar los datos ingresados. (Como verás, la estructura del prompt ha seguido de arriba hacia abajo la referencia de tabla que había subido previamente.)

Ahora usaré un "Codepen" donde he pegado el código "HTML" que me generó Google AI Studio. Recuerda que para verlo y probarlo puedes dar clic donde dice "Run Pen". Además, en la herramienta "Codepen" encontrarás un botón que dice "HTML" donde podrás clicar para ver el código que nos ha generado:

AI Studio Google - Tiempo: 39seg

Como verás, en la comunicación que tuvimos con el prompt no se realizó ninguna indicación a nivel estético, esto porque prefería concentrarme más en la parte funcional de la herramienta y una vez definida dar paso a la parte estética que es lo que veremos a continuación...

Prompt 2: resaltando mejoras estéticas

Ahora, me gustaría que donde dice Proyecto 1, Proyecto 2... Sea una caja que me permita a mí ingresar el nombre del proyecto.

Además, el botón de limpiar me gustaría que regresara toda la tabla a como es inicialmente.

También, me gustaría que los botones sean de color "1a1a1a" y letras blancas, con un efecto sutil al pasar el mouse.

La tabla debe tener un estilo más fino, con bordes redondeados y la primera fila de título debe centrar el título.

Los desplegables donde se encuentran los números también deben ser del tamaño de la celda y tener bordes redondeados, que tenga una pequeña flecha para que el usuario escoja el número y que no empiece en uno, sino vacío.

En las cedas donde están los atributos como "Impacto y Potencial" y los demás, lo que está entre paréntesis debe ir debajo del nombre y no a su costado.

Ahora podrás ver la herramienta terminada en el siguiente "Codepen":

AI Studio Google - Tiempo: 45seg

En este punto la herramienta se encuentra operativa y estéticamente bien diseñada. Aunque siendo sinceros, existen elementos visuales que aún me hacen "ruido", como que los botones estén tan pegado a la tabla o no haber puesto el crédito debajo. Detalles mínimos, pero que hacen la diferencia...

Tercer Prompt

Ahora, me gustaría incluir un crédito a lado derecho de la tabla en un gris bastante tenue y letras pequeñas que diga "Diseñado por Tomas Dulanto".

Los botones de "Agregar proyecto" y "Limpiar Datos" están muy juntos a la tabla, podrías darle un espaciado para que se vea mejor estéticamente.

Además, adáptalo para que sea responsivo y no se deforme al cambiar de dispositivo.

Herramienta creada con AI Studio Google - Tiempo: 25seg.

Y ahora sí...

---

...con esto ya podríamos dar por terminado el proyecto. Como verás, lo más complicado ha sido definir la lógica y la comunicación. Pero como has podido observar, esto nos ayudó a reducir el número de intentos y errores notablemente.

En este caso, al ser un proyecto tan pequeño y requerir de una portabilidad en web, lo recomendado ha sido trabajarlo todo en un solo código HTML. En este escenario, esta opción te brinda mayor flexibilidad, aunque pierdas un poco de control sobre los elementos.

Al final de tejo el código para que lo copies y pegues en la herramienta que uses para prototipar. Antes de terminar quiero que tengas en cuenta una cosa...

...y es que este contenido es educativo y no se permite la reproducción con fines lucrativos. Todo el material aquí expuesto se ha creado para ser compartido con las personas que se interesen en conocer y profundizar sobre el manejo de IA Generativa.

¡IA nos vemos pronto!

```html
<!DOCTYPE html>
<html>
<head>
<title>Matriz de Prioridades</title>
<style>
body {
  font-family: sans-serif;
}
table {
  border-collapse: collapse;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px; /* Espacio entre la tabla y los botones */
}
th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
th:first-child {
  border-top-left-radius: 8px;
}
th:last-child {
  border-top-right-radius: 8px;
}
tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}
.small-text {
  font-size: 12px;
  color: #888;
  display: block;
  margin-top: 4px;
}
input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}
select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  appearance: none; /* Remove default arrow */
  background: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right 8px center; /* Add custom arrow */
}
button {
  background-color: #1a1a1a;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 5px;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #333;
}
h1 {
  text-align: center;
}
.credit {
  font-size: 10px;
  color: #ccc;
  text-align: right;
  margin-top: 10px; /* Espacio entre los botones y el crédito */
}
/* Estilos responsivos */
@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto; /* Habilitar scroll horizontal si es necesario */
  }
}
</style>
</head>
<body>

<h1>Matriz de Prioridades</h1>

<table>
  <tr>
    <th>Proyectos</th>
    <th><input type="text" id="project-1-name" placeholder="Nombre del Proyecto"></th>
    <th><input type="text" id="project-2-name" placeholder="Nombre del Proyecto"></th>
  </tr>
  <tr>
    <td>Impacto y Potencial
      <span class="small-text">(1 menos impacto - 3 más impacto)</span>
    </td>
    <td><select id="p1-impact"><option value=""></option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td>
    <td><select id="p2-impact"><option value=""></option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td>
  </tr>
  <tr>
    <td>Facilidad de implementación
      <span class="small-text">(1 difícil de implementar - 3 fácil de implementar)</span>
    </td>
    <td><select id="p1-facilidad"><option value=""></option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td>
    <td><select id="p2-facilidad"><option value=""></option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td>
  </tr>
  <tr>
    <td>Recursos necesarios
      <span class="small-text">(1 cuenta con los recursos - 3 no cuenta con los recursos)</span>
    </td>
    <td><select id="p1-recursos"><option value=""></option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td>
    <td><select id="p2-recursos"><option value=""></option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td>
  </tr>
  <tr>
    <td>Público definido
      <span class="small-text">(1 no conoce el público - 3 conoce el público)</span>
    </td>
    <td><select id="p1-publico"><option value=""></option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td>
    <td><select id="p2-publico"><option value=""></option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td>
  </tr>
  <tr>
    <td>Rentabilidad
      <span class="small-text">(1 poco rentable - 3 muy rentable)</span>
    </td>
    <td><select id="p1-rentabilidad"><option value=""></option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td>
    <td><select id="p2-rentabilidad"><option value=""></option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td>
  </tr>
  <tr>
    <td>Competencia
      <span class="small-text">(1 Bastante competencia - 3 Sin competencia)</span>
    </td>
    <td><select id="p1-competencia"><option value=""></option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td>
    <td><select id="p2-competencia"><option value=""></option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td>
  </tr>
  <tr>
    <td>Total</td>
    <td id="p1-total">0</td>
    <td id="p2-total">0</td>
  </tr>
</table>

<button onclick="agregarProyecto()">Agregar Proyecto</button>
<button onclick="limpiarDatos()">Limpiar Datos</button>

<div class="credit">Diseñado por Tomas Dulanto</div>

<script>
  let projectCount = 2;
  
  function agregarProyecto() {
    projectCount++;
    const newProjectColumn = document.createElement('th');
    const input = document.createElement('input');
    input.type = 'text';
    input.id = `project-${projectCount}-name`;
    input.placeholder = 'Nombre del Proyecto';
    newProjectColumn.appendChild(input);
    const headerRow = document.querySelector('table tr:first-child');
    headerRow.appendChild(newProjectColumn);
  
    const rows = document.querySelectorAll('table tr:not(:first-child):not(:last-child)');
    rows.forEach(row => {
      const newCell = document.createElement('td');
      const select = document.createElement('select');
      select.id = `p${projectCount}-${row.cells[0].textContent.split(' ')[0].toLowerCase()}`;
      select.innerHTML = '<option value=""></option><option value="1">1</option><option value="2">2</option><option value="3">3</option>';
      newCell.appendChild(select);
      row.appendChild(newCell);
    });
  
    const totalRow = document.querySelector('table tr:last-child');
    const newTotalCell = document.createElement('td');
    newTotalCell.id = `p${projectCount}-total`;
    newTotalCell.textContent = '0';
    totalRow.appendChild(newTotalCell);
  
    // Agregar event listeners para calcular totales
    actualizarTotales();
  }
  
  function limpiarDatos() {
    // Restablecer valores de los select a vacío
    const selects = document.querySelectorAll('select');
    selects.forEach(select => select.selectedIndex = 0);
  
    // Restablecer totales a 0
    const totals = document.querySelectorAll('td[id$="-total"]');
    totals.forEach(total => total.textContent = '0');
  
    // Restablecer nombres de proyectos y eliminar columnas adicionales
    const headerRow = document.querySelector('table tr:first-child');
    while (headerRow.children.length > 2) {
      headerRow.removeChild(headerRow.lastChild);
    }
  
    const rows = document.querySelectorAll('table tr:not(:first-child)');
    rows.forEach(row => {
      while (row.children.length > 2) {
        row.removeChild(row.lastChild);
      }
    });
  
    document.getElementById('project-1-name').value = '';
    document.getElementById('project-2-name').value = '';
  
    projectCount = 2;
  }
  
  function actualizarTotales() {
    for (let i = 1; i <= projectCount; i++) {
      let total = 0;
      const selects = document.querySelectorAll(`select[id^="p${i}-"]`);
      selects.forEach(select => {
        const value = parseInt(select.value);
        if (!isNaN(value)) {
          total += value;
        }
      });
      document.getElementById(`p${i}-total`).textContent = total;
    }
  
    // Agregar event listeners para calcular totales cuando cambian los select
    const selects = document.querySelectorAll('select');
    selects.forEach(select => select.addEventListener('change', actualizarTotales));
  }
  
  // Inicializar totales al cargar la página
  actualizarTotales();
  
  </script>

</body>
</html>
```