Tutorial 3: Creando la Estructura de Directorios para tu Aplicación Whisper

¡Hola y bienvenido de nuevo!

En esta lección vamos a crear la estructura de directorios para nuestra aplicación. Esta estructura es fundamental para mantener nuestro código organizado y facilitar el desarrollo. Vamos a hacerlo paso a paso.

📂 Contenido del Tutorial

Configuración inicial con XAMPP
Creando la carpeta del proyecto
Estructura de directorios
Creando el archivo index.php
Probando la configuración
Explicación detallada

🚀 1. Configuración inicial con XAMPP

¿Qué es XAMPP?

XAMPP es un paquete de software que nos permite crear un servidor web local en nuestra computadora. Incluye:

Apache: El servidor web
MySQL: El sistema de base de datos
PHP: El lenguaje de programación
Perl: Otro lenguaje de programación

Ubicación por defecto de XAMPP

Cuando instalas XAMPP en Windows, por defecto se guarda en la unidad C: (el disco duro principal de Windows).

C:\xampp

📁 2. Creando la carpeta del proyecto

Paso 1: Navegar a la carpeta htdocs

Dentro de XAMPP, necesitamos ir a la carpeta htdocs. Esta es la carpeta donde Apache busca los archivos web.

Ruta completa:

C:\xampp\htdocs

https://i.imgur.com/placeholder.png

Paso 2: Crear la carpeta de nuestra aplicación

Dentro de htdocs, vamos a crear una carpeta para nuestra aplicación. La llamaremos whisper.

Desde la interfaz gráfica:

Abre el Explorador de Windows
Navega a C:\xampp\htdocs
Haz clic derecho → Nuevo → Carpeta
Nombra la carpeta como whisper

Desde la línea de comandos (CMD):

cd C:\xampp\htdocs
mkdir whisper
cd whisper

🗂️ 3. Estructura de directorios

La estructura que vamos a crear

Dentro de nuestra carpeta whisper, vamos a crear la siguiente estructura:

whisper/
├── backend/
│   └── classes/
├── frontend/
│   ├── css/
│   ├── images/
│   └── js/
└── index.php

Explicación de cada directorio

📂 `backend/`

Contendrá toda la lógica del servidor (PHP).

📂 `backend/classes/`

Aquí guardaremos nuestras clases PHP para mantener el código organizado y reutilizable.

📂 `frontend/`

Contendrá todos los archivos que el navegador del usuario va a cargar.

📂 `frontend/css/`

Archivos de estilos CSS para darle diseño a nuestra aplicación.

📂 `frontend/images/`

Imágenes, logos y gráficos que usaremos en la interfaz.

📂 `frontend/js/`

Archivos de JavaScript para la interactividad del lado del cliente.

📄 `index.php`

El archivo principal que se cargará cuando alguien visite nuestra aplicación.

Creando los directorios

Método 1: Desde el Explorador de Windows

Ve a C:\xampp\htdocs\whisper
Crea las siguientes carpetas:
- backend
- frontend
Dentro de backend, crea la carpeta classes
Dentro de frontend, crea las carpetas:
- css
- images
- js

Método 2: Desde la línea de comandos

cd C:\xampp\htdocs\whisper

# Crear directorios principales
mkdir backend
mkdir frontend

# Crear subdirectorios
mkdir backend\classes
mkdir frontend\css
mkdir frontend\images
mkdir frontend\js

Estructura final con explicación

whisper/                           # Raíz del proyecto
│
├── backend/                       # Código del servidor (PHP)
│   └── classes/                   # Clases PHP organizadas
│       ├── Database.php           # Conexión a BD
│       ├── Transcription.php      # Modelo de transcripción
│       └── WhisperHandler.php     # Lógica de Whisper
│
├── frontend/                      # Código del cliente (navegador)
│   ├── css/                       # Estilos
│   │   ├── style.css              # Estilos principales
│   │   └── responsive.css         # Estilos responsive
│   │
│   ├── images/                    # Imágenes y recursos
│   │   ├── logo.png
│   │   └── background.jpg
│   │
│   └── js/                        # JavaScript
│       ├── main.js                # Script principal
│       └── upload.js              # Lógica de subida
│
└── index.php                      # Archivo principal

💻 4. Creando el archivo index.php

Paso 1: Crear el archivo

En la raíz de nuestro proyecto (C:\xampp\htdocs\whisper), creamos un archivo llamado index.php.

Paso 2: Escribir el código

Abre el archivo con tu editor de código favorito (VS Code, Sublime Text, Notepad++, etc.) y escribe:

<?php
// Este es nuestro archivo index.php
echo "Hello there!";
?>

Explicación del código:

<?php - Abre el bloque de código PHP
echo "Hello there!"; - Imprime el texto en el navegador
?> - Cierra el bloque de código PHP

Código mejorado (opcional)

Si quieres ver algo más elaborado, puedes usar este código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Whisper Transcriber</title>
</head>
<body>
    <h1>🎙️ ¡Bienvenido a Whisper Transcriber!</h1>
    <p>Nuestra aplicación está funcionando correctamente.</p>
    <p>Próximamente: Sube tus videos y obtén transcripciones precisas.</p>
</body>
</html>

🌐 5. Probando la configuración

Paso 1: Iniciar XAMPP

Abre el Panel de Control de XAMPP
Haz clic en "Start" para Apache
(Opcional) Haz clic en "Start" para MySQL si vas a usar base de datos

https://i.imgur.com/placeholder.png

Paso 2: Acceder a nuestra aplicación

Abre tu navegador web y escribe en la barra de direcciones:

http://localhost/whisper/

Paso 3: Verificar el resultado

Deberías ver el mensaje "Hello there!" o el HTML que hayas escrito.

https://i.imgur.com/placeholder.png

Solución de problemas comunes

❌ Error: "No se puede acceder a localhost"

Solución: Asegúrate de que Apache esté corriendo en XAMPP

❌ Error: "404 Not Found"

Solución: Verifica que la carpeta whisper esté dentro de C:\xampp\htdocs

❌ Error: "No se encuentra el archivo"

Solución: Asegúrate de que el archivo se llame index.php (no index.php.txt)

📚 6. Explicación detallada

¿Por qué esta estructura?

Separación backend/frontend

Backend: Todo lo que el usuario no ve (lógica, base de datos, procesamiento)
Frontend: Todo lo que el usuario ve y con lo que interactúa

Ventajas de esta organización

Mantenibilidad: Fácil de encontrar y modificar archivos
Escalabilidad: Podemos crecer sin desorden
Seguridad: Podemos proteger mejor el backend
Colaboración: Varios desarrolladores pueden trabajar simultáneamente

El rol de htdocs

htdocs es el DocumentRoot de Apache. Esto significa que:

Apache sirve archivos desde aquí
Los archivos fuera de aquí no son accesibles vía web
Es una medida de seguridad importante

¿Qué sigue?

Con esta estructura lista, en la próxima lección:

Crearemos la conexión a la base de datos
Configuraremos los archivos de configuración
Empezaremos a crear las clases PHP

🎯 Resumen

✅ Hemos instalado XAMPP
✅ Creamos la carpeta whisper en htdocs
✅ Establecimos la estructura de directorios:

backend/classes/ para código PHP
frontend/ para recursos del cliente
index.php como punto de entrada
✅ Probamos que el servidor funciona correctamente

📌 Comandos rápidos de referencia

# Navegar a la carpeta htdocs
cd C:\xampp\htdocs

# Crear carpeta del proyecto
mkdir whisper

# Entrar a la carpeta
cd whisper

# Crear estructura completa
mkdir backend frontend
mkdir backend\classes
mkdir frontend\css frontend\images frontend\js

# Crear archivo index.php
echo "<?php echo 'Hello there!'; ?>" > index.php

🎓 Siguiente paso

En la próxima lección, conectaremos nuestra aplicación a una base de datos MySQL y crearemos la clase Database para manejar todas las operaciones de base de datos.

¡Nos vemos en el próximo tutorial! 👋