100 Días de Código en Python — Día 29: Un gestor de contraseñas con Tkinter

📝 Ejercicio original del curso#

Enunciado: crea una ventana con el título "Password Manager" que tenga solo un lienzo de 200 × 200 píxeles con la imagen logo.png en el centro, y un relleno de 20 píxeles entre el lienzo y el borde de la ventana en los cuatro lados.

Pista del curso: repasa el Canvas del Día 28 y la documentación de create_image (enlazada en los recursos).

🔍 Antes de programar#

• Si el lienzo mide 200 × 200, ¿cuáles son las coordenadas del centro?
• ¿Qué clase necesitas para leer el archivo de la imagen?
• ¿El relleno se configura en el lienzo o en la ventana?

Solución del curso (en palabras): from tkinter import *; ventana con title; Canvas(height=200, width=200); logo_img = PhotoImage(file="logo.png"); canvas.create_image(100, 100, image=logo_img); canvas.pack() por ahora; window.config(padx=20, pady=20); y mainloop() al final.

El error que muestra el curso: si olvidas las coordenadas, obtienes IndexError: tuple index out of range (verificado en el Día 28). Tkinter esperaba una tupla con x e y.

🎯 Objetivo de aprendizaje#

• Hacer que un widget ocupe varias columnas con columnspan.
• Diferenciar las opciones del widget de las opciones de grid.

📖 Explicación conceptual#

El problema. En el diseño final, la entrada del sitio web ocupa todo el ancho, pero la de la contraseña ocupa solo una parte, porque a su lado va el botón "Generate Password". Es decir: algunas entradas ocupan dos columnas.

El experimento del curso (una aplicación "sandbox").

• Una etiqueta roja en (fila 0, columna 0) y una verde en (fila 1, columna 1), ambas de ancho 20 y alto 5: forman un "tablero de ajedrez".
• Se agrega una etiqueta azul en (fila 2, columna 0). ¿Cómo hacer que abarque el ancho de la roja y de la verde?
• Primer intento: duplicar su ancho a 40. ❌ La azul sigue en la columna 0; lo único que logra es ensanchar esa columna y la roja queda centrada en ella.
• Solución: columnspan=2, que indica cuántas columnas abarca el widget. Empieza en la columna 0 y ocupa la 0 y la 1. ✅

b.grid(row=2, column=0, columnspan=2)

📝 Ejercicio original del curso: completar la interfaz#

Enunciado: recrea la interfaz de MyPass: 3 columnas × 5 filas, con etiquetas, entradas y botones. El curso ya calculó los anchos "casi óptimos".

🔍 Antes de programar#

Completa la cuadrícula en tu cuaderno antes de ver la solución:

Anchos que da el curso: entradas del sitio web y del correo, width=35; entrada de la contraseña, width=21; botón Add, width=36.

Solución del curso (resumen):

1. Crear las tres etiquetas y ubicarlas en la columna 0, filas 1, 2 y 3.
2. Cambiar el pack() del lienzo por grid(row=0, column=1): no se pueden mezclar gestores.
3. Crear las entradas en la columna 1. La del sitio web y la del correo, con columnspan=2.
4. El botón Generate en (fila 3, columna 2); el botón Add en (fila 4, columna 1) con columnspan=2 y width=36.
5. Detalles finales: mayúscula en "Password" y dos puntos al final de cada etiqueta. Si quieres más aire, sube el relleno de la ventana a 50.

Observación del curso: la alineación no queda perfecta porque el botón Generate solo ocupa el ancho de su texto. Puedes ajustar los anchos por prueba y error.

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: con el sandbox de colores, haz una etiqueta que ocupe dos filas (investiga rowspan).
• 🟡 Reto 2: investiga la opción sticky="EW" de grid y úsala para que todas las entradas se estiren hasta el borde de su celda. ¿Sigue siendo necesario ajustar los anchos a mano?
• 🟠 Reto 3: diseña en papel y luego en Tkinter el formulario de inscripción a un torneo intercursos: nombre del equipo, grado, capitán, deporte (Radiobutton) y un botón que ocupe todo el ancho.
• 🔴 Reto 4: toma una captura de la pantalla de inicio de sesión de una aplicación que uses. Dibuja su cuadrícula (filas, columnas y columnspan) y recréala con Tkinter.

🎯 Objetivo de aprendizaje#

• Poner el cursor y un texto inicial en una entrada.
• Guardar lo escrito en un archivo sin borrar lo anterior.
• Borrar el contenido de una entrada.

📖 Explicación conceptual#

Detalles de usabilidad que agrega el curso:

website_entry.focus()                               # el cursor empieza en el sitio web
email_entry.insert(0, "estudiante@ejemplo.com")     # correo ya escrito (¡ficticio!)

• focus() pone el cursor en esa entrada al abrir la aplicación.
• insert(indice, texto) inserta texto en una posición. 0 = al principio; END = al final, después del texto que ya exista. END es una constante de Tkinter.

Borrar el contenido de una entrada:

website_entry.delete(0, END)    # borra desde el carácter 0 hasta el final

Según la documentación, si omites el segundo índice, delete borra un solo carácter.

📝 Ejercicio original del curso#

Enunciado: al pulsar Add, guarda el sitio web, el correo y la contraseña en data.txt, en una línea con este formato (o el que te resulte cómodo):

Amazon | estudiante@ejemplo.com | Clave-De-Prueba-123

Cada registro nuevo va en una línea nueva, al final del archivo. Después de guardar, borra el sitio web y la contraseña (pero no el correo).

🔍 Antes de programar#

• ¿Con qué modo abres el archivo para agregar al final sin borrar lo anterior? (Repasa: "r", "w", "a".)
• ¿Qué pasa si el archivo no existe todavía?
• ¿Cómo obtienes el texto de cada entrada?
• ¿Qué carácter hace falta para que cada registro quede en su propia línea?

Solución del curso (en palabras):

1. Conectar el botón Add con command=save.
2. En save(), obtener los tres textos con .get().
3. with open("data.txt", "a") as data_file: y data_file.write(f"{website} | {email} | {password}\n").
4. Borrar el sitio web y la contraseña con delete(0, END).

Recordatorios del curso:

• En modo "a" o "w", si el archivo no existe, se crea.
• with cierra el archivo automáticamente; sin with, tendrías que llamar a close().
• En la primera prueba, los registros quedaron pegados en la misma línea: faltaba el \n.

💬 Comentario del curso sobre las contraseñas de ejemplo: Angela usa contraseñas malas a propósito ("qwerty", "password") y dice: "Si adiviné alguna de sus contraseñas, cámbienla, por su propia seguridad".

🎯 Objetivo de aprendizaje#

• Mostrar mensajes y pedir confirmaciones con messagebox.
• Validar que el usuario no deje campos vacíos.

📖 Explicación conceptual#

El problema de experiencia de usuario: al pulsar Add, los campos se borran, pero el usuario no sabe si se guardó ni tuvo la oportunidad de revisar los datos.

Los diálogos estándar. Tkinter trae el módulo messagebox:

from tkinter import messagebox

¿Por qué hay que importarlo aparte si ya escribí from tkinter import *? Porque * importa las clases y constantes de tkinter, pero messagebox es otro módulo dentro del paquete. El curso lo muestra con clic derecho → Go To → Implementation, que abre el archivo messagebox.py.

Todas reciben title= y message=. (Las capturas de la documentación que muestra el curso están en sueco, pero en tu equipo aparecerán en el idioma del sistema).

Confirmar antes de guardar (solución del curso):

is_ok = messagebox.askokcancel(
    title=website,
    message=f"These are the details entered: \nEmail: {email} "
            f"\nPassword: {password} \nIs it ok to save?"
)
if is_ok:
    # escribir en el archivo y borrar las entradas

Si el usuario cancela, no pasa nada y puede corregir los datos.

📝 Ejercicio original del curso: validación#

Enunciado: si el sitio web o la contraseña están vacíos, muestra una ventana emergente: "Oops" — "Please make sure you haven't left any fields empty." y no guardes nada.

🔍 Antes de programar#

• ¿Cómo sabes si un string está vacío? (El curso usa len(...) == 0.)
• ¿Debes usar and u or? Piensa: ¿qué pasa si solo uno de los dos está vacío?
• ¿Por qué el curso no valida el correo? (Pista: ya viene escrito.)
• ¿Dónde va la confirmación de guardar: antes o después de la validación?

Solución del curso (en palabras): después de obtener los datos, if len(website) == 0 or len(password) == 0: → showinfo con el aviso; else: → todo lo demás (confirmación, escritura y borrado) indentado dentro del else.

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: después de guardar, muestra un showinfo que diga "Guardado correctamente".
• 🟡 Reto 2: un campo lleno solo de espacios (" ") pasa la validación del curso. Corrígelo. (Pista: strip().)
• 🟠 Reto 3: si la contraseña tiene menos de 8 caracteres, usa askyesno para advertir: "Esta contraseña es débil. ¿Guardar de todas formas?".
• 🔴 Reto 4: valida que el correo tenga exactamente una @ y al menos un punto después de ella. Escribe 5 casos de prueba, incluidos casos límite como a@b. o @ejemplo.com. ¿Tu validación acepta algún correo inválido? ¿Rechaza alguno válido?

🎯 Objetivo de aprendizaje#

• Reescribir el generador del Día 5 con comprensiones de listas y join.
• Insertar la contraseña en la entrada y copiarla al portapapeles.

📖 Explicación conceptual#

El generador del Día 5, modificado por el curso. El curso enlaza una versión que ya no pide datos por consola: elige al azar entre 8 y 10 letras, 2 a 4 símbolos y 2 a 4 números. Cópiala en la sección del generador y sube los import al principio del archivo.

Parte del código original (con bucles):

password_list = []

for char in range(nr_letters):
    password_list.append(random.choice(letters))
# ... otros dos bucles iguales para símbolos y números ...

random.shuffle(password_list)

password = ""
for char in password_list:
    password += char

📝 Ejercicio original del curso: tres bucles, tres comprensiones#

Enunciado: reemplaza los tres bucles que llenan la lista por tres comprensiones de listas. El programa debe seguir funcionando igual.

🔍 Antes de programar#

• En el patrón [new_item for item in list], ¿qué es la list aquí? (Pista: no es una lista, es un range.)
• ¿Usas el item para algo? Si no, ¿cómo se nombra una variable que no se usa?
• ¿Qué es el new_item?

Solución del curso (en palabras):

• password_letters = [choice(letters) for _ in range(nr_letters)], y lo mismo con símbolos y números.
• El guion bajo _ es la convención para "esta variable no me importa".
• Se unen las tres listas con + y se mezclan con shuffle.
• Se cambia import random por from random import choice, randint, shuffle para escribir menos.

El método join. Todo string tiene el método join, que une los elementos de un iterable usando ese string como separador:

"#".join(["John", "Peter", "Vicky"])   # 'John#Peter#Vicky'  (verificado)
"".join(["a", "b", "c"])               # 'abc'

Con un string vacío como separador, reemplaza las tres líneas del bucle: password = "".join(password_list).

Conectarlo a la interfaz:

1. Mete todo en una función generate_password() y conéctala al botón con command=generate_password.
2. En lugar de imprimir la contraseña, ponla en la entrada: password_entry.insert(0, password).

Copiar al portapapeles con pyperclip. Es una librería externa y multiplataforma. Hay que instalarla (PyCharm la ofrece con la bombilla, o en la terminal: pip install pyperclip):

import pyperclip

pyperclip.copy(password)   # queda lista para pegar con Ctrl + V

🛠️ Nota técnica (verificada): Tkinter puede hacer lo mismo sin instalar nada: window.clipboard_clear() y luego window.clipboard_append(password). Con window.clipboard_get() se comprobó que el texto quedó en el portapapeles. Diferencia: con la opción de Tkinter, en algunos sistemas el contenido se pierde al cerrar la aplicación; pyperclip no depende de la ventana. Las dos son válidas.

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: agrega una Scale para elegir la longitud de la contraseña (de 8 a 32).
• 🟡 Reto 2: agrega Checkbutton para incluir o no símbolos y números.
• 🟠 Reto 3: muestra junto a la entrada una etiqueta con la fortaleza de la contraseña (débil, media, fuerte) según su longitud y la variedad de caracteres. Define y escribe tus criterios.
• 🔴 Reto 4 — Pensamiento computacional: el cómic de XKCD que cita el curso propone usar frases de varias palabras comunes ("caballo correcto batería grapa"). Crea un generador de frases de contraseña a partir de una lista de palabras en español. Calcula cuántas combinaciones hay con 4 palabras de una lista de 2000 y compáralo con una contraseña de 8 caracteres aleatorios. ¿Cuál es más fácil de recordar? ¿Cuál tiene más combinaciones?

Requisitos funcionales#

1. Interfaz con el logo, tres campos, el botón Generate y el botón Add (sección 2).
2. El cursor empieza en el sitio web y el correo ya está escrito (sección 3).
3. Validación de campos vacíos (sección 4).
4. Confirmación antes de guardar (sección 4).
5. Guardar en data.txt, un registro por línea (sección 3).
6. Generar contraseñas y copiarlas al portapapeles (sección 5).

Versiones#

Pruebas#

🧪 Prueba y depuración#

1. Generate dos veces: las contraseñas se concatenan (verificado). Corrígelo.
2. Espacios: " " tiene longitud 3 y pasa la validación. Corrígelo con strip().
3. Sitio web repetido: si guardas "Amazon" dos veces, quedan dos líneas y no sabes cuál es la contraseña vigente. No lo corrijas todavía: en el Día 30 cambiaremos el formato del archivo a JSON y este problema desaparecerá. Anota por qué ocurre.
4. El separador |: ¿qué pasa si una contraseña generada contiene el símbolo |? ¿Sigue siendo fácil separar los datos de esa línea? Revisa si la lista de símbolos del generador lo incluye.

⭐ Extensión del proyecto#

• Un botón "Mostrar/Ocultar" contraseña (investiga la opción show="*" de Entry).
• Guardar también la fecha de creación de cada registro.
• Atajo de teclado: Enter equivale a pulsar Add (investiga window.bind("<Return>", ...)).

Tres problemas de seguridad#

1. Las contraseñas se guardan en texto plano. Cualquiera que abra data.txt (otra persona que use el computador, un programa malicioso, una copia de seguridad en la nube) ve todas las contraseñas. Los gestores profesionales cifran el archivo con una contraseña maestra.

2. random no es seguro para generar contraseñas. La documentación oficial de random (se abre en otra pestaña) advierte que sus generadores no deben usarse con fines de seguridad y remite al módulo secrets, diseñado para eso. El cambio es pequeño:

import secrets

password_letters = [secrets.choice(letters) for _ in range(nr_letters)]

3. El portapapeles lo lee cualquier programa. La contraseña queda ahí hasta que copies otra cosa.

Entonces, ¿"local" es más seguro que "en la nube"?#

No hay una respuesta única. Un archivo local sin cifrar es menos seguro que un buen gestor en la nube cifrado. Uno local cifrado evita depender de una empresa, pero si pierdes el archivo, pierdes todo. Lo importante es qué tan bien se protegen los datos, no solo dónde están.

Actividad#

1. Cambia random.choice por secrets.choice en tu generador. ¿Cuántas líneas tuviste que cambiar?
2. Investiga qué es una contraseña maestra y qué es la autenticación en dos pasos. Escribe un párrafo que explique cada una a alguien de tu familia.
3. Investiga qué dice el ColCERT (el Grupo de Respuesta a Emergencias Cibernéticas de Colombia) o alguna fuente oficial sobre buenas prácticas con contraseñas, y cita la fuente.

Situación#

La biblioteca del colegio registra los préstamos de libros en un cuaderno. Quieren una aplicación sencilla para registrarlos en el computador de la biblioteca.

Requisitos#

1. Interfaz con grid: el logo o escudo del colegio; campos para el código del libro, el título, el código del estudiante y el grado; un Spinbox con los días de préstamo (1 a 15); y un botón "Registrar préstamo" que ocupe todo el ancho.
2. El grado se elige con un menú desplegable o con Radiobutton (6.º a 11.º), no se escribe.
3. Validación con ventanas emergentes: ningún campo vacío (ni solo con espacios); el código del libro debe ser solo dígitos (isdigit()).
4. Confirmación con askyesno, mostrando un resumen del préstamo y la fecha de devolución calculada. (Investiga datetime.date.today() y datetime.timedelta(days=...).)
5. Guardar en prestamos.csv con encabezados en la primera línea (solo si el archivo es nuevo) y un préstamo por línea.
6. Un botón "Ver préstamos de hoy" que muestre en una ventana emergente cuántos préstamos se registraron hoy.

Decisiones que debes tomar y justificar#

• ¿Guardas el nombre del estudiante o solo su código? Piensa en la protección de datos personales (en Colombia, la Ley 1581 de 2012). ¿Qué dato es realmente necesario?
• ¿Qué haces si alguien escribe una coma en el título del libro, sabiendo que el archivo es CSV?

Casos de prueba#

Conceptuales#

1. ¿Para qué sirve columnspan? ¿Por qué no basta con aumentar el width?
2. ¿Qué diferencia hay entre insert(0, texto) e insert(END, texto)?
3. ¿Por qué hay que importar messagebox aparte?

Análisis de código#

simbolos = [choice(symbols) for _ in range(randint(2, 4))]

Explica cada parte. ¿Por qué se usa _? ¿Cuántos elementos puede tener simbolos?

Predicción#

print("-".join(["2026", "09", "25"]))
print("".join([c.upper() for c in "abc"]))
print(len("".join(["ab", "cd", "ef"])))

Depuración#

Encuentra cuatro problemas en esta función.

def save():
    website = website_entry.get()
    password = password_entry.get()
    if len(website) == 0 and len(password) == 0:
        messagebox.showinfo(title="Oops", message="No dejes campos vacíos")
    with open("data.txt", "w") as data_file:
        data_file.write(f"{website} | {password}")
    website_entry.delete(0)

Modificación#

Cambia MyPass para que el mensaje de confirmación no muestre la contraseña completa, sino solo sus dos primeros caracteres seguidos de asteriscos: Cl********.

Creación#

Crea una función generar_codigo_verificacion(longitud=6) que devuelva un código de solo dígitos usando secrets y una comprensión de listas con join.