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:
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.
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:
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...
Ahora podrás ver la herramienta terminada en el siguiente "Codepen":
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...
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>
```Last updated