100 Días de Código en Python — Día 83: Proyecto de portafolio — tu propio sitio web de portafolio

📝 Contenido original del curso#

"Enhorabuena por lograr un gran hito". Si miras las próximas lecciones te preguntarás: ¿no hay guía paso a paso?, ¿no hay código de solución? Es intencional. Al terminar el curso debes tener las habilidades para conseguir un trabajo como desarrollador de Python, y una de las cosas más importantes que debes poder demostrar es que puedes escribir tu propio código: no el de un tutorial ni el que la instructora te guió, sino código que tú pensaste y escribiste.

Por eso esta sección te ayuda a construir tu portafolio con ideas de proyectos que suelen funcionar bien en entrevistas. Tu trabajo: usar todo lo aprendido, más investigación, búsquedas y repaso de lecciones, para crear los proyectos completos. Así podrás protegerlos con derechos de autor, convertirlos en un negocio, ponerlos en tu portafolio o en GitHub y demostrar en una entrevista que construyes proyectos sin ayuda.

La instructora cuenta que ha visto estudiantes llegar a entrevistas con un proyecto cuyo código ella misma escribió, o proyectos idénticos repetidos en Internet. Dar este paso adicional evita eso. "No digo que sea fácil. Va a ser muy difícil, pero así es como aprendes y progresas".

El curso quiere ser un espacio seguro para jugar, explorar y fallar sin repercusiones: no te preocupes si no puedes, si te equivocas o si no se ve bien; comparte tu código y la comunidad te dará retroalimentación. "Pero también debes estar dispuesto a intentarlo… Y recuerda, como siempre, creo en ti".

📖 Explicación (adaptación)#

Este mensaje explica por qué los proyectos de portafolio no tienen solución: un reclutador (o un docente) no quiere ver que sabes copiar, sino que sabes resolver. Un proyecto modesto pero propio vale más que uno espectacular copiado. Y el error es parte del proceso, no una señal de que "no sirves para esto".

📝 Contenido original del curso#

Usando lo que aprendiste de desarrollo web, construye tu propio sitio web de portafolio.

Puede tener el diseño que quieras. Es el lugar para mostrar tus habilidades y las cosas que has construido.

Inspírate en otros desarrolladores (se abre en otra pestaña), pero no copies sus diseños: se trata de mostrar lo que tú puedes hacer.

Usa lo aprendido en el Día 65 para planear el sitio: diseño, UI, UX, esquemas de color, tipografías. "No construyas el sitio para otras personas: constrúyelo para sentirte orgulloso".

Si quieres, publícalo para compartirlo con otros estudiantes y que admiren tu trabajo.

Pregunta de la tarea — Momento de reflexión: escribe cómo abordaste el proyecto; qué fue difícil y qué fácil; cómo mejorarías en el próximo; tu mayor aprendizaje; y qué harías distinto. Es tu diario de desarrollador: "no hay respuestas correctas o incorrectas, solo aprendizajes".

Prerequisitos: HTML y CSS (Días 41 a 44), Flask y plantillas Jinja (Días 54 a 57), Bootstrap (Día 58), diseño web (Día 65), Git y GitHub (Día 70), publicar una aplicación (Día 71).

🔍 Antes de programar#

Secciones típicas de un portafolio#

Portafolio
├── Inicio: nombre (o alias), una frase sobre ti, un botón hacia los proyectos
├── Proyectos: 3 a 6 tarjetas (imagen, título, qué hace, tecnologías, enlaces)
├── Sobre mí: tu historia con la programación y tus intereses (sin datos sensibles)
├── Habilidades: lo que sabes hacer, con evidencia (un proyecto que lo demuestre)
└── Contacto: enlace a GitHub y, si tu docente lo aprueba, un correo institucional

Calidad sobre cantidad: 3 proyectos bien presentados (con capturas, descripción y código limpio) valen más que 30 enlaces sin explicación. Elige proyectos distintos que muestren habilidades variadas: uno de datos, uno web, uno de consola, un juego.

Diseño (repaso del Día 65)#

📝 Boceta primero en papel (o en una herramienta de diseño) las pantallas de celular y de computador. Cambiar un dibujo toma segundos; cambiar código, horas.

⚠️ Errores frecuentes#

Problema#

Construir un sitio web de portafolio propio que muestre tus habilidades y proyectos.

Contexto#

El sitio te servirá para postularte a un programa técnico, una beca, una práctica o un club de tecnología, y para mostrar a tu familia lo que aprendiste.

Objetivo#

Un sitio propio, planeado, accesible y seguro, con al menos 3 proyectos, su código en GitHub y, si es posible, publicado.

Requisitos funcionales#

1. Página de inicio con tu presentación y acceso a los proyectos.
2. Al menos 3 proyectos con título, descripción, tecnologías, captura y enlace al código.
3. Sección "Sobre mí" y un medio de contacto seguro.
4. Navegación entre secciones que funcione en celular y computador.

Restricciones técnicas#

• Diseño propio (inspirado, no copiado).
• Cumplir la tabla de privacidad (sección 3) y la de accesibilidad (sección 6).
• Código en un repositorio de GitHub con README.md.
• Si usas Flask: los proyectos desde una lista o JSON, no escritos a mano en el HTML.

Planificación#

1. Comprender el objetivo y el público. 2. Entradas: tus proyectos, textos e imágenes. 3. Procesos: planear → bocetar → maquetar → estilizar → probar → publicar. 4. Salidas: el sitio y su repositorio. 5. Dividir en secciones. 6. Diseñar (boceto, paleta, tipografía). 7. Implementar por versiones. 8. Probar con la lista de verificación. 9. Corregir. 10. Mejorar con retroalimentación.

Construcción paso a paso#

• Versión 1 — Plan: respuestas de la sección 2, boceto de celular y computador, paleta y tipografías elegidas, lista de proyectos con capturas.
• Versión 2 — Estructura: el HTML (o las plantillas) de todas las secciones, sin estilos. Comprueba que se entiende sin CSS.
• Versión 3 — Datos: si usas Flask, los proyectos desde el JSON; si no, las tarjetas completas.
• Versión 4 — Diseño: CSS o Bootstrap según tu boceto; adaptable al celular.
• Versión 5 — Calidad: accesibilidad, privacidad, enlaces, ortografía.
• Versión final — Publicación (opcional, con autorización) y diario del desarrollador.

Pruebas (lista de verificación)#

En Flask puedes automatizar la prueba 1 con el cliente de pruebas (verificado con el esqueleto):

from app import app

cliente = app.test_client()
assert cliente.get("/").status_code == 200
assert cliente.get("/no-existe").status_code == 404
assert "Morse" in cliente.get("/").get_data(as_text=True)

🧪 Prueba y depuración#

<html>
<body>
  <img src="foto.jpg">
  <h3>Mis proyectos</h3>
  <p>Contáctame al 300 123 4567, vivo en el barrio Centro.</p>
  <a href="#">Clic aquí</a>
</body>
</html>

Encuentra cinco problemas: falta lang="es" (y el <meta charset> y viewport); la imagen no tiene alt; empieza con <h3> sin <h1>; publica teléfono y barrio (privacidad); y el enlace "Clic aquí" no dice adónde lleva (y apunta a #).

⭐ Extensión del proyecto#

• 🟢 Reto 1 — Aplicación: agrega un modo oscuro con CSS (prefers-color-scheme).
• 🟡 Reto 2 — Ampliación: filtra los proyectos por tecnología con una ruta de Flask (/proyectos/<tecnologia>) o con JavaScript.
• 🟠 Reto 3 — Desafío: incrusta un gráfico interactivo de plotly de tu Laboratorio de Datos Abiertos (fig.write_html(..., full_html=False) genera un fragmento para insertar).
• 🔴 Reto 4 — Pensamiento computacional: pide a 3 personas distintas (un compañero, un docente, alguien de tu familia) que usen tu sitio mientras piensan en voz alta. Anota dónde dudan, prioriza 3 mejoras y justifica el orden.

Situación#

El curso quiere un sitio que muestre los proyectos de todos sus estudiantes para la feria de ciencia y tecnología del colegio.

Requisitos#

1. Un archivo proyectos.json común, al que cada estudiante agrega su ficha (título, alias del autor, descripción, tecnologías, enlace), mediante pull requests en un repositorio del curso (Día 70), administrado por el docente.
2. Una aplicación Flask que lea el JSON y muestre las fichas en tarjetas, con filtro por tecnología.
3. Una página de detalle por proyecto (/proyecto/<int:indice>), que responda 404 si el índice no existe.
4. Una validación que revise que cada ficha tenga todos los campos y que ningún campo contenga datos personales prohibidos (por ejemplo, números de teléfono: busca "expresiones regulares" para detectarlos).

Decisiones que debes tomar (y justificar)#

• ¿Cómo evitan conflictos cuando dos estudiantes editan el mismo archivo a la vez?
• ¿Quién aprueba lo que se publica? ¿Con qué criterios?

Casos de prueba#

• Una ficha sin título no rompe el sitio: se reporta en la validación.
• /proyecto/9999 responde 404.

Conceptuales#

1. ¿Por qué el curso deja de dar videos y soluciones en esta etapa?
2. ¿Qué diferencia hay entre "inspirarse en" y "copiar" un diseño?
3. ¿Qué ventaja tiene cargar los proyectos desde un JSON en lugar de escribirlos en el HTML?
4. Nombra tres datos que no debes publicar en un portafolio y por qué.
5. ¿Por qué hay que desactivar debug=True al publicar?

Análisis de código#

{% for proyecto in proyectos if "Python" in proyecto.tecnologias %}
  <li>{{ proyecto.titulo }}</li>
{% endfor %}

¿Qué muestra este fragmento de Jinja?

Predicción#

Si PROYECTOS está vacío, ¿qué muestra la página del esqueleto? ¿Cómo mostrarías un mensaje como "Pronto habrá proyectos aquí"? (Pista: {% else %} dentro del for de Jinja.)

Depuración#

"Mi sitio funciona en mi computador, pero publicado no carga la hoja de estilos". Da dos causas posibles.

Modificación#

Cambia el esqueleto para que los proyectos se ordenen del más reciente al más antiguo usando el campo dia.

Creación#

Escribe una función validar_ficha(ficha) que devuelva una lista de errores si faltan campos obligatorios o si la descripción supera 200 caracteres.