Curso de Desarrollo Web Fullstack

Introducción al Backend y Frontend

¡Bienvenidos, desarrolladores en ciernes! Estoy emocionado de tenerlos aquí para comenzar nuestra aventura en el desarrollo web fullstack. Vamos a aprender a construir aplicaciones web desde cero, y les aseguro que será una experiencia increíblemente gratificante. ¡Así que prepárense para un viaje lleno de código, creatividad y aprendizaje!

¿Qué es el Frontend?

El frontend es la parte de una aplicación web que interactúa directamente con los usuarios. Es lo que ves y usas cuando visitas un sitio web: desde los colores y fuentes hasta los botones y las imágenes. El frontend se construye principalmente con HTML, CSS y JavaScript.

¿Qué es el Backend?

El backend es la parte que maneja la lógica del negocio, la base de datos, la autenticación de usuarios y mucho más. Aunque no lo veas, es crucial para que todo funcione correctamente.

Para tener una visión más clara, veamos este video introductorio sobre el Desarrollo Web:

Tómense unos minutos para ver el video, y luego continuamos.

Entorno de Trabajo: Visual Studio Code

Vamos a utilizar Visual Studio Code (VS Code) como nuestro editor de código. Es una herramienta poderosa y flexible que facilita mucho el desarrollo.

Instalación de Visual Studio Code

  1. Ve a Visual Studio Code.
  2. Haz clic en el botón de descarga y selecciona la versión adecuada para tu sistema operativo (Windows, macOS, Linux).
  3. Abre el archivo descargado y sigue las instrucciones de instalación.
  4. Si estás en Windows, asegúrate de marcar la opción "Agregar a PATH" si está disponible durante la instalación.

Configuración Básica

  1. Abre VS Code haciendo clic en el icono en tu escritorio o en el menú de aplicaciones.
  2. Haz clic en el ícono de Extensiones en la barra lateral izquierda (parece un cuadrito con cuatro cuadrados más pequeños).
  3. Busca e instala las siguientes extensiones:
    • Live Server: Permite ver los cambios en tiempo real en el navegador.
    • Python: Proporciona soporte para escribir y ejecutar código Python.
    • HTML CSS Support: Mejora la experiencia de desarrollo con HTML y CSS.

HTML: El Esqueleto de la Web

HTML (HyperText Markup Language) es el lenguaje de marcado que usamos para estructurar nuestro contenido en la web. Vamos a crear nuestro primer documento HTML y aprender sobre las etiquetas más comunes.

Crear un Documento HTML

  1. Crea una nueva carpeta llamada proyectos en tus Documentos.
  2. Dentro de proyectos, crea otra carpeta llamada mi_juego.
  3. Abre VS Code y selecciona "Archivo" > "Abrir Carpeta..." y elige la carpeta mi_juego.
  4. Crea un nuevo archivo llamado index.html.
  5. Copia el siguiente código en index.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Juego</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Bienvenidos a Mi Juego</h1>
    </header>
    <main>
        <section>
            <p>Prepárate para una experiencia increíble.</p>
            <button id="startGame">Comenzar Juego</button>
        </section>
        <section id="gameArea" style="display:none;">
            <p id="gameMessage"></p>
        </section>
    </main>
    <script src="script.js" defer></script>
</body>
</html>

CSS: El Estilo de la Web

CSS (Cascading Style Sheets) se utiliza para describir la presentación de un documento HTML. Puedes controlar el diseño, colores, fuentes y más.

Crear y Enlazar un Archivo CSS

  1. En VS Code, crea un nuevo archivo llamado styles.css.
  2. Copia el siguiente código en styles.css:

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 1rem;
    text-align: center;
}

main {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 1rem 2rem;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #45a049;
}

#gameArea {
    margin-top: 2rem;
    text-align: center;
}

JavaScript: La Lógica de la Web

JavaScript es un lenguaje de programación que permite hacer páginas web interactivas.

Crear y Enlazar un Archivo JavaScript

  1. En VS Code, crea un nuevo archivo llamado script.js.
  2. Copia el siguiente código en script.js:

document.getElementById("startGame").addEventListener("click", function() {
    document.getElementById("gameArea").style.display = "block";
    document.getElementById("gameMessage").innerHTML = "¡El juego ha comenzado!";
});

Desafío para los Alumnos

Modifiquen el código JavaScript para que, cuando se haga clic en el botón "Comenzar Juego", el botón desaparezca. ¡Piénsenlo y pruébenlo!

Backend con Python

Ahora vamos a explorar el backend utilizando Python. Python es un lenguaje de programación muy popular debido a su simplicidad y versatilidad.

Instalación de Python

  1. Ve a Python.org.
  2. Descarga la última versión de Python para tu sistema operativo.
  3. Abre el archivo descargado y sigue las instrucciones de instalación.
  4. Asegúrate de marcar la opción "Agregar Python al PATH".

Primeros Pasos con Python

  1. En VS Code, abre una nueva terminal (Terminal > Nueva Terminal).
  2. Escribe python y presiona Enter para entrar en el intérprete de Python.
  3. Escribe print("Hola Mundo") y presiona Enter. Deberías ver "Hola Mundo" impreso en la terminal.

Crear un Servidor con Flask

  1. En la terminal de VS Code, ejecuta: pip install flask
  2. Crea un nuevo archivo llamado app.py.
  3. Copia el siguiente código en app.py:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0')

¡Hora de dar vida a nuestro juego en la web!

¡Atención, futuros magos de la web! Ha llegado el momento de tomar ese increíble juego que hemos estado creando y lanzarlo al ciberespacio. ¿Están listos para ver su creación cobrar vida en un servidor real? ¡Vamos allá!

Preparando nuestro proyecto para el gran debut

Primero, necesitamos organizar nuestro proyecto como un chef prepara los ingredientes antes de cocinar. Así es como debe verse nuestra "cocina digital":


        Documentos/proyectos/mi_juego/
            ├── static/
            │   ├── styles.css  (nuestro toque de estilo)
            │   └── script.js   (la magia de JavaScript)
            ├── templates/
            │   └── index.html  (el corazón de nuestro juego)
            └── app.py          (nuestro chef principal: el servidor Flask)

¿No tienes tu juego listo o te sientes un poco perdido? ¡No te preocupes! Tienes dos opciones fantásticas:

  1. Opción "Hágalo usted mismo": Si tu juego está a medio terminar o necesitas un repaso, ¡es hora de una sesión de brainstorming con tu mejor amigo digital! Abre ChatGPT y pídele ayuda para completar o repasar tu juego. No tengas miedo de preguntar, ¡está aquí para ayudarte!
  2. Opción "Listo para la acción": ¿Quieres algo emocionante y listo para usar? Tengo una sorpresa para ti. Puedes descargar un asombroso proyecto de reconocimiento de objetos desde este enlace. ¡Es como tener un mini-robot que puede ver cosas en tu computadora!

Dando vida a nuestro servidor

Ahora, vamos a despertar a nuestro servidor. Sigue estos pasos mágicos:

  1. Abre tu terminal. Es como la varita mágica de un programador.
  2. Usa tus poderes de teletransportación (o simplemente navega) hasta el directorio mi_juego.
  3. Invoca a tu servidor con este hechizo: python app.py
  4. ¡Abracadabra! Tu servidor ahora está vivo. Visita http://localhost:5000 en tu navegador y contempla tu creación.

Compartiendo tu creación con el mundo (bueno, al menos con tu red local)

¿Listo para presumir tu juego con amigos y familia en casa? Sigue estos pasos:

  1. Asegúrate de que todas las computadoras estén en la misma red Wi-Fi. Es como asegurarse de que todos estén en la misma fiesta.
  2. En tu computadora (la que tiene el servidor), abre la terminal y escribe:
    • En Windows: ipconfig
    • En macOS o Linux: ifconfig
    Busca algo que diga "IPv4 Address" o similar. Esa serie de números es la dirección de tu fiesta.
  3. Ahora, en las otras computadoras, abre un navegador y escribe esa dirección IP seguida de :5000. Por ejemplo: http://192.168.1.5:5000

¡Y voilà! Tu juego ahora es la estrella de la fiesta en tu red local. ¿No es emocionante ver tu creación cobrando vida en diferentes pantallas?

Un pequeño consejo de sabio programador

Recuerda, tu servidor es como un pequeño dragón mascota. Es poderoso y genial, pero solo vive mientras tu computadora esté despierta y el programa esté corriendo. Si cierras la terminal o apagas tu computadora, tu dragón se va a dormir y el juego ya no será accesible para los demás. ¡Así que mantenlo despierto mientras quieras compartir tu juego!

¡Felicidades, joven mago de la web! Has dado un gran paso en tu viaje. ¿Quién sabe? Quizás el próximo paso sea conquistar la world wide web. Pero por ahora, ¡disfruta de tu creación y compártela con orgullo!

¡El viaje apenas comienza!

¡Felicitaciones, intrépidos desarrolladores! Han dado sus primeros pasos en el emocionante mundo del desarrollo web fullstack. Desde la creación de páginas interactivas con HTML, CSS y JavaScript, hasta el desarrollo de un servidor backend con Python y Flask, han adquirido las habilidades fundamentales para crear aplicaciones web completas.

Pero recuerden, esto es solo el comienzo de su aventura. El mundo del desarrollo web es vasto y está en constante evolución. ¡Es hora de ponerse creativos y llevar sus habilidades al siguiente nivel!

Desafíos para valientes:

  1. Personaliza tu juego: ¿Qué tal si añades un sistema de puntuación? O mejor aún, ¿qué tal si el juego se vuelve más difícil a medida que avanzas?
  2. Experimenta con el backend: Intenta añadir una base de datos para guardar las puntuaciones más altas. SQLite es un buen punto de partida.
  3. Mejora la experiencia del usuario: Añade animaciones con CSS o utiliza una biblioteca como anime.js para dar vida a tu interfaz.
  4. Haz tu aplicación en tiempo real: Investiga sobre WebSockets y cómo implementarlos con Flask-SocketIO para crear un juego multijugador en tiempo real.
  5. Despliega tu aplicación: Investiga cómo desplegar tu aplicación en plataformas gratuitas como Heroku o PythonAnywhere.

Ideas para expandir tu proyecto:

  • Modo multijugador: Modifica tu juego para que dos jugadores puedan competir entre sí.
  • Perfil de usuario: Implementa un sistema de registro y inicio de sesión para que los usuarios puedan tener su propio perfil.
  • Tablero de líderes: Crea una página que muestre las mejores puntuaciones de todos los jugadores.
  • Temas personalizables: Permite a los usuarios elegir entre diferentes temas (claro, oscuro, neón, etc.) para tu aplicación.
  • API externa: Integra una API externa en tu aplicación. Por ejemplo, podrías usar la API de OpenWeatherMap para mostrar el clima actual en la ciudad del jugador.

Experimentos con el backend:

El backend es donde la magia realmente sucede. Aquí tienes algunas ideas para llevarlo al siguiente nivel:

  • Autenticación: Implementa un sistema de autenticación usando Flask-Login.
  • Base de datos: Integra SQLAlchemy para manejar una base de datos más robusta.
  • API RESTful: Convierte tu backend en una API RESTful completa usando Flask-RESTful.
  • Tareas en segundo plano: Utiliza Celery para manejar tareas en segundo plano, como enviar correos electrónicos o procesar datos.
  • Caché: Implementa un sistema de caché con Redis para mejorar el rendimiento de tu aplicación.

¡Tarea para casa! (Sí, los desarrolladores también tienen tarea)

Para mantener tus habilidades afiladas y seguir aprendiendo, aquí tienes algunas tareas para la próxima semana:

  1. Añade al menos una nueva característica a tu juego. Puede ser algo simple como un contador de tiempo o algo más complejo como niveles diferentes.
  2. Crea una página de "Acerca de" para tu juego, explicando las reglas y cómo se juega.
  3. Implementa un formulario de contacto que envíe un correo electrónico cuando alguien lo complete. (Pista: investiga sobre la biblioteca `smtplib` de Python)
  4. Optimiza tu código. Revisa tu JavaScript y Python, y ve si puedes hacer que sea más eficiente o más fácil de leer.
  5. Escribe una documentación básica para tu proyecto. Crea un archivo README.md explicando cómo configurar y ejecutar tu aplicación.

Recursos para seguir aprendiendo:

Recuerden, la clave para convertirse en un gran desarrollador es la práctica constante y la curiosidad infinita. No tengan miedo de experimentar, cometer errores y aprender de ellos. Cada línea de código que escriban los acerca un paso más a convertirse en los magos del desarrollo web que están destinados a ser.

Así que, ¿qué están esperando? El mundo necesita sus increíbles ideas y aplicaciones. ¡Es hora de codificar, crear y conquistar el mundo digital!

¡Hasta la próxima aventura en código, futuros gurús de la web!

Scroll to Top