Guía de Estudio Completa: Desarrollo Frontend, Despliegue y Prácticas Profesionales

Este documento constituye un material de estudio integral para la materia de Desarrollo de Sistemas Web Frontend. Su objetivo es proporcionar una base sólida desde los conceptos fundamentales hasta la aplicación práctica en despliegues y la transición hacia la programación con JavaScript.

1. Introducción General

El desarrollo frontend moderno no se limita únicamente a la escritura de código HTML y CSS; abarca un ecosistema que incluye el control de versiones, el despliegue en servidores públicos y la capacidad de adaptarse a un mercado laboral en constante evolución. Este apunte profundiza en las técnicas de maquetación avanzada, las herramientas de publicación de proyectos y la metodología de trabajo necesaria para construir una carrera sólida en la industria tecnológica.

2. Marco Conceptual

Para comprender el desarrollo web, es imperativo dominar los siguientes términos fundamentales:

• Despliegue (Deploy): Es el proceso de colocar una aplicación web en un servidor de internet para que sea pública y globalmente accesible.
• Repositorio: Espacio de almacenamiento gestionado por Git donde se aloja el código fuente y el historial de cambios de un proyecto.
• GitHub Pages: Servicio de alojamiento estático que permite desplegar sitios web directamente desde un repositorio de GitHub de forma gratuita.
• Flexbox: Modelo de diseño de caja que permite distribuir el espacio y alinear elementos de forma dinámica, incluso cuando su tamaño es desconocido.
• Especificidad: Regla que determina qué estilo CSS se aplica a un elemento cuando existen múltiples reglas que lo afectan.

3. Despliegue de Aplicaciones (Deploy)

El despliegue es el paso final para que el trabajo del desarrollador sea visible para el mundo. Existen diversas plataformas, siendo GitHub Pages la más directa para proyectos de frontend.

3.1. Proceso de Despliegue en GitHub Pages

El despliegue en esta plataforma es "pasmosamente simple" y se resume en tres clics principales una vez que el repositorio es público:

1. Configuración (Settings): Acceder a la pestaña de ajustes del repositorio público en GitHub.
2. Páginas (Pages): Localizar el menú lateral izquierdo y seleccionar la opción "Pages".
3. Selección de Rama (Branch): En la sección "Build and deployment", seleccionar la rama principal (generalmente main) y presionar el botón Save.

3.2. Alternativas: Netlify y Vercel

Si bien GitHub Pages es excelente para sitios estáticos simples (portfolios, CVs), existen alternativas como Netlify y Vercel que ofrecen ventajas adicionales:

• Soporte para Backend: Ideales para aplicaciones "Full Stack" que requieren un servidor.
• Compatibilidad de Librerías: En ocasiones, ciertos efectos visuales o librerías específicas pueden tener problemas en GitHub Pages, funcionando correctamente en Netlify.
• Facilidad de uso: Ambas permiten el despliegue mediante "drag and drop" (arrastrar y soltar) o vinculación directa con el repositorio.

4. Desarrollo del Tema: CSS Avanzado y Maquetación

Tras dominar las bases, es necesario profundizar en cómo estructurar una página de manera profesional.

4.1. Posicionamiento (CSS Position)

Aunque Flexbox ha reemplazado gran parte del uso de position, existen casos específicos donde sigue siendo vital:

• Fixed (Fijo): Posiciona el elemento respecto a la ventana del navegador. Es ideal para encabezados (headers) que deben seguir al usuario al hacer scroll o para botones de contacto (como WhatsApp) que deben permanecer visibles en una esquina.
• Sticky (Pegajoso): El elemento se comporta como relativo hasta que alcanza un punto de scroll determinado, momento en el cual se queda "pegado" en la pantalla.

4.2. Combinadores de Selectores

Permiten aplicar estilos de forma muy específica según la relación entre los elementos:

• Descendiente (espacio): Selecciona todos los elementos dentro de otro (ej. .portada h1 selecciona todos los H1 que estén en la clase portada).
• Hijo directo (**>**): Selecciona solo aquellos elementos que son hijos inmediatos (primera generación).
• Importancia de la Especificidad: La jerarquía de peso en los estilos es:
  1. !important (Sobrescribe todo).
  2. Estilos en línea (style="").
  3. ID.
  4. Clase.
  5. Etiqueta (Prioridad más baja).

4.3. Repaso Crítico de Flexbox

Para una maquetación efectiva, las propiedades clave son:

• display: flex;: Activa el contexto flex.
• flex-direction: column;: Cambia el eje principal a vertical (útil para portadas).
• justify-content: Alinea en el eje principal (center, space-between, space-around).
• align-items: Alinea en el eje secundario.

5. El Mercado Laboral y el Uso de la IA

5.1. Contexto Pre-pandemia y Realidad Actual

El mercado laboral ha retornado a una situación similar a la previa a la pandemia. Ya no existe el ingreso masivo y rápido de perfiles junior con formación mínima. Actualmente se requiere:

• Base sólida: Una formación técnica profunda que permita pasar pruebas técnicas.
• Carrera de fondo: Entender que puede ser necesario iniciar en roles relacionados (como testing) para luego saltar a desarrollo.
• Salud Mental: Evitar el estrés de las expectativas de empleo inmediato y tomar el aprendizaje con calma, casi como un hobby al principio.

5.2. El Riesgo de la Inteligencia Artificial (IA)

El uso de IA para programar en instancias académicas es contraproducente:

• Incapacidad de defensa: El estudiante que usa IA no puede explicar ni defender su código en una entrevista técnica.
• Deuda técnica: Las aplicaciones hechas rápidamente con IA suelen ser "comida basura": funcionan rápido pero son imposibles de mantener a largo plazo.
• Uso correcto: La IA debe usarse para aprender, para pedir explicaciones o traducir conceptos complejos que el profesor no pudo profundizar por falta de tiempo.

6. Fechas Importantes y Avisos Académicos

A continuación se detallan los hitos clave para la aprobación de la cursada:

Evento / Entrega	Fecha	Descripción Detallada
PFO1 (Portfolio Parte 1)	En curso	Entrega opcional para recibir feedback temprano. Recomendado para quienes tienen más dificultades.
Penúltima Clase	18 de noviembre	Posible fecha de presentación de trabajos (Portfolio + TPO1).
Última Clase / Cierre	25 de noviembre	Fecha límite definitiva. Para esta fecha todo debe estar evaluado.
TPO1 (Trabajo Práctico)	Antes del 25/11	Clonar una web existente dándole una nueva temática (Grupal).
TPO2 (Trabajo Práctico)	Antes del 25/11	Tomar una página y añadirle consumo de una API Rest (Grupal).
PFO2 (Portfolio Parte 2)	Antes del 25/11	Entrega final del portfolio individual. Es la que se evalúa finalmente.

Nota sobre la Evaluación: La nota final será un promedio entre el PFO2, el TPO1 y el TPO2. Se toma muy en cuenta la participación y la originalidad del diseño (evitar trabajos genéricos de IA).

7. Errores Comunes y Confusiones

1. Confundir Margin y Padding: El margin es el espacio exterior al borde; el padding es el espacio interior entre el contenido y el borde. Para quitar los márgenes por defecto del navegador en el body, se usa margin: 0;.
2. Abuso de Position: Muchos estudiantes intentan posicionar elementos con absolute cuando podrían resolverlo de forma más limpia y responsive con Flexbox.
3. Olvidar el Repo Público: No se puede desplegar en GitHub Pages si el repositorio es privado (a menos que se posea una cuenta paga).
4. Uso de IA como "máquina de hacer panchos": Generar código sin entender la lógica subyacente. Eventualmente, las empresas contratarán desarrolladores para arreglar el desastre dejado por aplicaciones mal hechas con IA.

8. Síntesis y Conclusiones

El camino del desarrollador frontend exige paciencia y una base técnica robusta. El dominio de CSS (Flexbox y especificidad) es el pilar para construir interfaces, mientras que el manejo de herramientas de despliegue garantiza que el trabajo sea profesional y visible. La próxima etapa de la materia se centrará exclusivamente en JavaScript, donde se explorarán desde conceptos básicos (scope, hoisting) hasta avanzados (asincronía, manipulación del DOM), sentando las bases para el desarrollo Full Stack.

9. Preguntas de Repaso

Nivel Básico

1. ¿Cuáles son los 3 pasos para desplegar un sitio en GitHub Pages?
2. ¿Cómo se resetea el margen por defecto de un documento HTML?
3. ¿Para qué sirve la propiedad display: flex;?

Nivel Intermedio

4. Explique la diferencia entre position: fixed y position: sticky.
5. ¿Qué sucede con la alineación de elementos cuando aplicamos flex-direction: column?
6. ¿Cuál es la diferencia entre un combinador descendiente y un hijo directo?

Nivel Avanzado

7. Analice por qué el uso excesivo de IA en la etapa de aprendizaje puede perjudicar la empleabilidad a largo plazo.
8. Describa la escala de especificidad en CSS y cómo afecta la aplicación de estilos en un proyecto complejo.
9. ¿Por qué se considera que el mercado laboral actual ha vuelto a una situación "pre-pandemia"?

1. Video resumen

2. Infografía

3. Presentación