Skip to content

Commit 2c0c78a

Browse files
committed
Feature: Add detailed technical content to Development and Learning
Development page: - Add comprehensive engineering process section - Include 8 detailed areas: Analysis, Architecture, Stack, QA, Infrastructure, Scaling, Security, Standards - Cover UML diagrams, data models, OWASP Top 10, CI/CD, K8s - Add SOLID principles, design patterns, testing strategies Learning page: - Add digital technical library with 6 categories - Add communication channels (GitHub Discussions, Discord, YouTube) - Add academic partnerships section - Include benefits for students and institutions - Add step-by-step guide for institutions to join - Contact info for academic collaborations Content is now substantial and technical, not just marketing fluff
1 parent 9f685b6 commit 2c0c78a

File tree

3 files changed

+516
-0
lines changed

3 files changed

+516
-0
lines changed
Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
<!-- Engineering Process -->
2+
<section class="max-w-6xl mx-auto px-8 py-16">
3+
<h2 class="text-4xl font-bold text-stone-900 mb-12 text-center">Proceso de Ingeniería de Software</h2>
4+
5+
<div class="space-y-8">
6+
<!-- 1. Análisis y Diseño -->
7+
<div class="bg-white p-8 rounded-lg shadow-lg border-l-4 border-blue-500">
8+
<div class="flex items-center mb-4">
9+
<div class="bg-blue-100 p-3 rounded-lg mr-4">
10+
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
11+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
12+
</svg>
13+
</div>
14+
<h3 class="text-2xl font-bold text-stone-900">1. Análisis y Diseño</h3>
15+
</div>
16+
<div class="grid md:grid-cols-2 gap-6">
17+
<div>
18+
<h4 class="font-bold text-stone-900 mb-3">Diagramas UML</h4>
19+
<ul class="space-y-2 text-stone-800">
20+
<li>• Diagramas de casos de uso</li>
21+
<li>• Diagramas de clases y objetos</li>
22+
<li>• Diagramas de secuencia y actividad</li>
23+
<li>• Diagramas de componentes y despliegue</li>
24+
</ul>
25+
</div>
26+
<div>
27+
<h4 class="font-bold text-stone-900 mb-3">Modelado de Datos</h4>
28+
<ul class="space-y-2 text-stone-800">
29+
<li>• Modelo Entidad-Relación (ER)</li>
30+
<li>• Normalización de bases de datos</li>
31+
<li>• Diseño de esquemas relacionales</li>
32+
<li>• Modelado NoSQL (documentos, grafos)</li>
33+
</ul>
34+
</div>
35+
</div>
36+
</div>
37+
38+
<!-- 2. Arquitectura -->
39+
<div class="bg-white p-8 rounded-lg shadow-lg border-l-4 border-green-500">
40+
<div class="flex items-center mb-4">
41+
<div class="bg-green-100 p-3 rounded-lg mr-4">
42+
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
43+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
44+
</svg>
45+
</div>
46+
<h3 class="text-2xl font-bold text-stone-900">2. Arquitectura y Estructuras</h3>
47+
</div>
48+
<div class="grid md:grid-cols-2 gap-6">
49+
<div>
50+
<h4 class="font-bold text-stone-900 mb-3">Patrones Arquitectónicos</h4>
51+
<ul class="space-y-2 text-stone-800">
52+
<li>• Microservicios y monolitos modulares</li>
53+
<li>• Event-Driven Architecture (EDA)</li>
54+
<li>• Clean Architecture / Hexagonal</li>
55+
<li>• CQRS y Event Sourcing</li>
56+
<li>• API Gateway y Service Mesh</li>
57+
</ul>
58+
</div>
59+
<div>
60+
<h4 class="font-bold text-stone-900 mb-3">Estructuras de Datos</h4>
61+
<ul class="space-y-2 text-stone-800">
62+
<li>• Árboles (BST, AVL, Red-Black)</li>
63+
<li>• Grafos y algoritmos de búsqueda</li>
64+
<li>• Hash tables y estructuras indexadas</li>
65+
<li>• Colas de prioridad y heaps</li>
66+
<li>• Complejidad algorítmica (Big O)</li>
67+
</ul>
68+
</div>
69+
</div>
70+
</div>
71+
72+
<!-- 3. Stack Tecnológico -->
73+
<div class="bg-white p-8 rounded-lg shadow-lg border-l-4 border-purple-500">
74+
<div class="flex items-center mb-4">
75+
<div class="bg-purple-100 p-3 rounded-lg mr-4">
76+
<svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
77+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
78+
</svg>
79+
</div>
80+
<h3 class="text-2xl font-bold text-stone-900">3. Stack Tecnológico</h3>
81+
</div>
82+
<div class="grid md:grid-cols-3 gap-6">
83+
<div>
84+
<h4 class="font-bold text-stone-900 mb-3">Backend</h4>
85+
<ul class="space-y-2 text-stone-800">
86+
<li>• Node.js / Express / NestJS</li>
87+
<li>• Python / Django / FastAPI</li>
88+
<li>• Go / Fiber / Gin</li>
89+
<li>• Java / Spring Boot</li>
90+
<li>• Ruby / Rails</li>
91+
</ul>
92+
</div>
93+
<div>
94+
<h4 class="font-bold text-stone-900 mb-3">Frontend</h4>
95+
<ul class="space-y-2 text-stone-800">
96+
<li>• React / Next.js</li>
97+
<li>• Vue.js / Nuxt.js</li>
98+
<li>• Angular</li>
99+
<li>• Svelte / SvelteKit</li>
100+
<li>• TypeScript</li>
101+
</ul>
102+
</div>
103+
<div>
104+
<h4 class="font-bold text-stone-900 mb-3">Bases de Datos</h4>
105+
<ul class="space-y-2 text-stone-800">
106+
<li>• PostgreSQL / MySQL</li>
107+
<li>• MongoDB / Cassandra</li>
108+
<li>• Redis / Memcached</li>
109+
<li>• Elasticsearch</li>
110+
<li>• Neo4j (grafos)</li>
111+
</ul>
112+
</div>
113+
</div>
114+
</div>
115+
116+
<!-- 4. Calidad y Testing -->
117+
<div class="bg-white p-8 rounded-lg shadow-lg border-l-4 border-orange-500">
118+
<div class="flex items-center mb-4">
119+
<div class="bg-orange-100 p-3 rounded-lg mr-4">
120+
<svg class="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
121+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
122+
</svg>
123+
</div>
124+
<h3 class="text-2xl font-bold text-stone-900">4. Control de Calidad</h3>
125+
</div>
126+
<div class="grid md:grid-cols-2 gap-6">
127+
<div>
128+
<h4 class="font-bold text-stone-900 mb-3">Testing</h4>
129+
<ul class="space-y-2 text-stone-800">
130+
<li>• Unit Testing (Jest, pytest, JUnit)</li>
131+
<li>• Integration Testing</li>
132+
<li>• End-to-End Testing (Cypress, Playwright)</li>
133+
<li>• Test Coverage (mínimo 80%)</li>
134+
<li>• TDD y BDD</li>
135+
</ul>
136+
</div>
137+
<div>
138+
<h4 class="font-bold text-stone-900 mb-3">Code Quality</h4>
139+
<ul class="space-y-2 text-stone-800">
140+
<li>• Linters (ESLint, Pylint, golangci-lint)</li>
141+
<li>• Code formatters (Prettier, Black)</li>
142+
<li>• SonarQube / CodeClimate</li>
143+
<li>• Code reviews obligatorios</li>
144+
<li>• Conventional Commits</li>
145+
</ul>
146+
</div>
147+
</div>
148+
</div>
149+
150+
<!-- 5. Infraestructura -->
151+
<div class="bg-white p-8 rounded-lg shadow-lg border-l-4 border-cyan-500">
152+
<div class="flex items-center mb-4">
153+
<div class="bg-cyan-100 p-3 rounded-lg mr-4">
154+
<svg class="w-8 h-8 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
155+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
156+
</svg>
157+
</div>
158+
<h3 class="text-2xl font-bold text-stone-900">5. Infraestructura y DevOps</h3>
159+
</div>
160+
<div class="grid md:grid-cols-2 gap-6">
161+
<div>
162+
<h4 class="font-bold text-stone-900 mb-3">Contenedores y Orquestación</h4>
163+
<ul class="space-y-2 text-stone-800">
164+
<li>• Docker y Docker Compose</li>
165+
<li>• Kubernetes (K8s)</li>
166+
<li>• Helm charts</li>
167+
<li>• Service mesh (Istio, Linkerd)</li>
168+
</ul>
169+
</div>
170+
<div>
171+
<h4 class="font-bold text-stone-900 mb-3">CI/CD</h4>
172+
<ul class="space-y-2 text-stone-800">
173+
<li>• GitHub Actions / GitLab CI</li>
174+
<li>• Jenkins / ArgoCD</li>
175+
<li>• Despliegues automáticos</li>
176+
<li>• Blue-Green / Canary deployments</li>
177+
</ul>
178+
</div>
179+
</div>
180+
</div>
181+
182+
<!-- 6. Escalabilidad -->
183+
<div class="bg-white p-8 rounded-lg shadow-lg border-l-4 border-indigo-500">
184+
<div class="flex items-center mb-4">
185+
<div class="bg-indigo-100 p-3 rounded-lg mr-4">
186+
<svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
187+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
188+
</svg>
189+
</div>
190+
<h3 class="text-2xl font-bold text-stone-900">6. Escalamiento y Alta Disponibilidad</h3>
191+
</div>
192+
<div class="grid md:grid-cols-2 gap-6">
193+
<div>
194+
<h4 class="font-bold text-stone-900 mb-3">Escalamiento</h4>
195+
<ul class="space-y-2 text-stone-800">
196+
<li>• Horizontal scaling (réplicas)</li>
197+
<li>• Vertical scaling (recursos)</li>
198+
<li>• Load balancing (Nginx, HAProxy)</li>
199+
<li>• CDN (Cloudflare, CloudFront)</li>
200+
<li>• Caching strategies (Redis, Varnish)</li>
201+
</ul>
202+
</div>
203+
<div>
204+
<h4 class="font-bold text-stone-900 mb-3">Alta Disponibilidad</h4>
205+
<ul class="space-y-2 text-stone-800">
206+
<li>• SLA 99.9% uptime</li>
207+
<li>• Réplicas multi-región</li>
208+
<li>• Failover automático</li>
209+
<li>• Health checks y monitoring</li>
210+
<li>• Disaster recovery plans</li>
211+
</ul>
212+
</div>
213+
</div>
214+
</div>
215+
216+
<!-- 7. Seguridad -->
217+
<div class="bg-white p-8 rounded-lg shadow-lg border-l-4 border-red-500">
218+
<div class="flex items-center mb-4">
219+
<div class="bg-red-100 p-3 rounded-lg mr-4">
220+
<svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
221+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
222+
</svg>
223+
</div>
224+
<h3 class="text-2xl font-bold text-stone-900">7. Seguridad (OWASP)</h3>
225+
</div>
226+
<div class="grid md:grid-cols-2 gap-6">
227+
<div>
228+
<h4 class="font-bold text-stone-900 mb-3">OWASP Top 10</h4>
229+
<ul class="space-y-2 text-stone-800">
230+
<li>• Protección contra injection (SQL, XSS)</li>
231+
<li>• Autenticación robusta (OAuth2, JWT)</li>
232+
<li>• Control de acceso (RBAC, ABAC)</li>
233+
<li>• Configuración segura</li>
234+
<li>• Protección de datos sensibles</li>
235+
</ul>
236+
</div>
237+
<div>
238+
<h4 class="font-bold text-stone-900 mb-3">Seguridad Adicional</h4>
239+
<ul class="space-y-2 text-stone-800">
240+
<li>• HTTPS/TLS obligatorio</li>
241+
<li>• Penetration testing</li>
242+
<li>• Dependency scanning (Snyk, Dependabot)</li>
243+
<li>• SAST y DAST</li>
244+
<li>• Security headers (CSP, CORS)</li>
245+
</ul>
246+
</div>
247+
</div>
248+
</div>
249+
250+
<!-- 8. Estándares -->
251+
<div class="bg-white p-8 rounded-lg shadow-lg border-l-4 border-yellow-500">
252+
<div class="flex items-center mb-4">
253+
<div class="bg-yellow-100 p-3 rounded-lg mr-4">
254+
<svg class="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
255+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
256+
</svg>
257+
</div>
258+
<h3 class="text-2xl font-bold text-stone-900">8. Estándares y Buenas Prácticas</h3>
259+
</div>
260+
<div class="grid md:grid-cols-2 gap-6">
261+
<div>
262+
<h4 class="font-bold text-stone-900 mb-3">Code Standards</h4>
263+
<ul class="space-y-2 text-stone-800">
264+
<li>• SOLID principles</li>
265+
<li>• DRY (Don't Repeat Yourself)</li>
266+
<li>• KISS (Keep It Simple, Stupid)</li>
267+
<li>• YAGNI (You Aren't Gonna Need It)</li>
268+
<li>• Design patterns (GoF)</li>
269+
</ul>
270+
</div>
271+
<div>
272+
<h4 class="font-bold text-stone-900 mb-3">Documentación</h4>
273+
<ul class="space-y-2 text-stone-800">
274+
<li>• OpenAPI/Swagger para APIs</li>
275+
<li>• README completos</li>
276+
<li>• Architecture Decision Records (ADR)</li>
277+
<li>• Diagramas C4 Model</li>
278+
<li>• Changelog semántico</li>
279+
</ul>
280+
</div>
281+
</div>
282+
</div>
283+
</div>
284+
</section>

0 commit comments

Comments
 (0)