IAW - P1.1: Tu perfil de GitHub (README + algo de HTML, sin CSS libre)

P1.1 — Implantación de Aplicaciones Web

Práctica: crea el README de tu perfil de GitHub

Módulo: IAW — 2º ASIR Metodología: Aprendizaje Basado en Problemas (ABP), FLOSS/KISS

1. ¿Qué es un README de perfil?

Es un archivo README.md especial que GitHub muestra en la parte superior de tu perfil público — tu carta de presentación como desarrollador/a.

Para que GitHub lo reconozca como tal, el repositorio debe llamarse exactamente igual que tu usuario:

  • Usuario: fenix011
  • Repositorio especial: fenix011/fenix011

Si el nombre no coincide exactamente, GitHub no lo mostrará como README de perfil.

2. Crear el repositorio y el README.md

  1. Crea el repositorio público <tu-usuario>/<tu-usuario>.
  2. Dentro, crea un archivo README.md (desde la web con Add file → Create new file, o en local con Git).
  3. Escribe un contenido mínimo de arranque:
# ¡Hola! Soy <tu-usuario> 👋

Bienvenido a mi perfil de GitHub.

## Sobre mí
- 💻 Me interesa: desarrollo web, automatización, IA
- 🌱 Actualmente aprendiendo: ...
- 📫 Contacto: ...

## Proyectos destacados
- [Proyecto 1](https://github.com/<tu-usuario>/proyecto1)
- [Proyecto 2](https://github.com/<tu-usuario>/proyecto2)
  1. Guarda los cambios (commit):
git add README.md
git commit -m "Add profile README"
git push
  1. Verifica el resultado en https://github.com/<tu-usuario> — debes ver el README renderizado arriba del perfil.

3. Importante: lo que GitHub permite (y lo que no)

En los README.md de GitHub:

  • ✅ Se permite Markdown.
  • ✅ Se permite algo de HTML inline (<p>, <h1>, <img>, <a>, <details>, <summary>, <br>…).
  • ❌ No se permite CSS libre con <style>...</style>.
  • ❌ No se permite JavaScript.
  • ⚠️ Muchos atributos de estilo se filtran por seguridad.

Entonces, ¿cómo le damos un aspecto cuidado sin CSS real? Con:

  1. Estructura Markdown limpia
  2. HTML simple permitido
  3. Imágenes/badges externos
  4. Tablas y separadores
  5. Secciones desplegables (<details>)

4. Técnicas de estilo sin CSS real

Alineación centrada con HTML

<p align="center">
  <img src="https://via.placeholder.com/900x220.png?text=Mi+Perfil+GitHub" alt="banner" />
</p>

<h1 align="center">¡Hola! Soy fenix011 👋</h1>
<p align="center">Desarrollador/a | Automatización | IA</p>

Badges (insignias) visuales

![Python](https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E)
![Docker](https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white)

Usa siempre style=for-the-badge en todos los badges para mantener consistencia visual.

Tarjetas de estadísticas dinámicas

![GitHub stats](https://github-readme-stats.vercel.app/api?username=fenix011&show_icons=true)
![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=fenix011&layout=compact)

Dependen de un servicio externo: pueden tener límites o caídas temporales.

Tablas para un layout limpio

## 🧰 Stack

| Categoría | Tecnologías |
|---|---|
| Lenguajes | Python, JavaScript, TypeScript |
| Frontend | React, HTML, CSS |
| Backend | Node.js, FastAPI |
| DevOps | Docker, GitHub Actions |

Bloques desplegables (<details>)

<details>
  <summary>Ver más sobre mis proyectos</summary>
  <br />
  - Proyecto A: automatización de reportes
  - Proyecto B: panel de métricas
  - Proyecto C: API de integración
</details>

“CSS indirecto”: cómo lograr identidad visual sin CSS

  • Paleta coherente en badges (2–3 colores base)
  • Mismo estilo de iconos
  • Banners con la misma tipografía/tema
  • Emojis moderados y consistentes
  • Espaciado uniforme entre secciones

5. Errores comunes

  1. Saturar el README con demasiados widgets.
  2. Mezclar estilos distintos de badges.
  3. Usar GIFs pesados que ralentizan la carga.
  4. Poner demasiada información personal irrelevante.
  5. Romper enlaces e imágenes (revísalos periódicamente).

6. Plantilla de ejemplo lista para usar

<p align="center">
  <img src="https://via.placeholder.com/1000x260.png?text=Bienvenido+a+mi+perfil" alt="banner perfil"/>
</p>

<h1 align="center">Hola, soy fenix011 👋</h1>
<p align="center">Desarrollo web • Automatización • IA</p>

<p align="center">
  <a href="https://github.com/fenix011">
    <img src="https://img.shields.io/badge/GitHub-fenix011-181717?style=for-the-badge&logo=github" />
  </a>
</p>

---

## 🚀 Sobre mí
- Me enfoco en construir soluciones prácticas.
- Intereses: backend, integraciones, flujos automáticos.
- Actualmente aprendiendo: arquitectura y escalabilidad.

## 🧰 Tecnologías
![Python](https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white)
![Node.js](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)
![Docker](https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white)

## 📊 Estadísticas
![GitHub stats](https://github-readme-stats.vercel.app/api?username=fenix011&show_icons=true)
![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=fenix011&layout=compact)

## 📌 Proyectos destacados
- [Proyecto 1](https://github.com/fenix011/proyecto1)
- [Proyecto 2](https://github.com/fenix011/proyecto2)

<details>
  <summary>Más información</summary>
  <br />
  Aquí puedes agregar logros, certificaciones, artículos o notas personales.
</details>

## 📫 Contacto
- LinkedIn: ...
- Email: ...
- Portafolio: ...

7. Entregable

Enlace a tu repositorio de perfil https://github.com/<tu-usuario>/<tu-usuario> con el README ya publicado, cumpliendo este checklist:

  • ¿El README se ve bien en móvil y desktop?
  • ¿Todos los links funcionan?
  • ¿Las imágenes cargan rápido?
  • ¿El contenido principal se entiende en 15 segundos?
  • ¿Mantiene un estilo visual consistente (paleta, iconos, badges)?

Entrega el enlace de tu repositorio vía servidor sFTP o en el espacio indicado en clase.

RUBRICA DE CALIFICACIÓN

Criterios de contenido (100%)

Criterio Peso Qué se valora
Repositorio de perfil correcto 15% Repositorio <usuario>/<usuario> creado y README.md visible en el perfil público
Contenido del README 30% Presentación personal, tecnologías/stack y al menos un proyecto destacado enlazado
Uso correcto de HTML permitido 25% Usa al menos una técnica de las permitidas (<p align>, badges, tabla o <details>) sin recurrir a <style> o JS
Identidad visual coherente 15% Paleta de badges, iconos y espaciado consistentes entre secciones
Checklist final cumplido 15% Enlaces e imágenes funcionando, legible en móvil y desktop

Escala orientativa

  • Excelente (9-10): README completo, técnicas HTML bien aplicadas, identidad visual coherente, todo el checklist cumplido.
  • Notable (7-8.9): README correcto con alguna sección de relleno o estilo algo inconsistente.
  • Suficiente (5-6.9): README mínimo (solo texto plano), sin badges ni estructura visual.
  • Insuficiente (<5): repositorio mal nombrado (el README no aparece en el perfil) o contenido prácticamente vacío.

“Recuerda … KISS!” :-)

Mastodon / Linkedin
© 2026 - Librebits