Tutorial 4: Creando la Página Principal de tu Aplicación Whisper

¡Hola y bienvenido de nuevo!

En esta lección vamos a crear la página principal (index.php) para nuestra aplicación. Utilizaremos los archivos de plantilla que te he proporcionado para construir una interfaz moderna y funcional. Vamos a hacerlo paso a paso.

📋 Contenido del Tutorial

Descarga y preparación de archivos
Copiando el código HTML a index.php
Copiando los archivos de estilos
Verificando la página principal
Explicación detallada del código
Próximos pasos

📁 1. Descarga y preparación de archivos

¿Qué archivos necesitamos?

Para esta lección, vamos a trabajar con tres archivos principales:

index.html - La plantilla de la página principal
RecentList.html - Plantilla para la lista de archivos recientes
view.html - Plantilla para la vista de transcripciones

Estructura de archivos recibidos

archivos_recibidos/
├── index.html          # Página principal
├── RecentList.html     # Lista de archivos recientes
└── view.html          # Vista de transcripciones

Preparación del proyecto

Primero, asegúrate de que tu estructura de directorios esté así:

whisper/
├── backend/
│   └── classes/
├── frontend/
│   ├── css/
│   ├── images/
│   └── js/
├── index.php          # ¡Este es el archivo que vamos a crear!
└── view.php           # Lo crearemos más adelante

💻 2. Copiando el código HTML a index.php

Paso 1: Abrir el archivo index.html

Abre el archivo index.html que has descargado con tu editor de código (VS Code, Sublime Text, etc.).

Paso 2: Seleccionar todo el código

Selecciona todo el contenido del archivo (Ctrl+A o Cmd+A) y cópialo (Ctrl+C o Cmd+C).

Paso 3: Abrir index.php

Ve a la raíz de tu proyecto (C:\xampp\htdocs\whisper\) y abre el archivo index.php con tu editor de código.

Paso 4: Pegar el código

Pega todo el código copiado en index.php y guarda el archivo.

Estructura del código que has pegado

El archivo index.php ahora contiene:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Whisper Ai - Convert Video/Audio language into written text</title>
    <!-- ... librerías y estilos ... -->
</head>
<body>
    <!-- Contenido de la página -->
    <div class="Wrapper">
        <div class="inner-wrapper">
            <!-- Página principal -->
            <div id="upload">
                <h1>Welcome to My Whisper</h1>
                <!-- Formulario de subida -->
                <form id="form" method="post" enctype="multipart/form-data">
                    <input id="file-upload" type="file" name="file">
                </form>
            </div>
            <!-- Loader -->
            <div id="loader">
                <!-- Animación de carga -->
            </div>
        </div>
    </div>
</body>
</html>

🎨 3. Copiando los archivos de estilos

Paso 1: Identificar las carpetas necesarias

En los archivos descargados, necesitamos las siguientes carpetas:

frontend/css/ - Contiene los estilos CSS
frontend/images/ - Contiene las imágenes y recursos

Paso 2: Copiar las carpetas

Método 1: Desde el Explorador de Windows

Abre la carpeta donde descargaste los archivos
Selecciona las carpetas css e images
Copia (Ctrl+C)
Navega a C:\xampp\htdocs\whisper\frontend\
Pega (Ctrl+V) las carpetas

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

# Asumiendo que los archivos están en Descargas
cd C:\Users\TuUsuario\Downloads\project_files

# Copiar carpetas al proyecto
xcopy /E css C:\xampp\htdocs\whisper\frontend\css\
xcopy /E images C:\xampp\htdocs\whisper\frontend\images\

Estructura resultante

whisper/
├── backend/
│   └── classes/
├── frontend/
│   ├── css/
│   │   └── style.css        # ¡Nuevo!
│   ├── images/
│   │   ├── banner-img.png   # ¡Nuevo!
│   │   ├── loader.gif       # ¡Nuevo!
│   │   ├── video-img.png    # ¡Nuevo!
│   │   └── audio-img.png    # ¡Nuevo!
│   └── js/
├── index.php                # ¡Actualizado!
└── view.php

🌐 4. Verificando la página principal

Paso 1: Iniciar XAMPP

Asegúrate de que Apache esté corriendo en XAMPP.

Paso 2: Abrir la aplicación

En tu navegador, ve a:

http://localhost/whisper/

Paso 3: Verificar el resultado

Deberías ver algo como esto:

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

Elementos que deberías ver:

✅ Logo de "My Whisper"
✅ Título "Welcome to My Whisper"
✅ Descripción del servicio
✅ Botón "Upload File"
✅ Enlace a archivos recientes

Solución de problemas comunes

❌ Los estilos no se cargan

Problema: La página se ve sin formato
Solución: Verifica que la ruta de los archivos CSS sea correcta:

<link rel="stylesheet" type="text/css" href="frontend/css/style.css"/>

Asegúrate de que style.css exista en frontend/css/

❌ Las imágenes no aparecen

Problema: Las imágenes no se muestran
Solución: Verifica que las imágenes estén en frontend/images/

❌ Error 404 en recursos

Problema: Algunos archivos no se encuentran
Solución: Revisa las rutas en el HTML:

frontend/images/banner-img.png
frontend/images/loader.gif
frontend/images/video-img.png
frontend/images/audio-img.png

📖 5. Explicación detallada del código

Análisis del HTML principal

📌 Cabecera (Head)

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Whisper Ai - Convert Video/Audio language into written text</title>
    
    <!-- Font Awesome para iconos -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    
    <!-- Tailwind CSS para estilos rápidos -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

📌 Contenedor principal

<div class="Wrapper">
    <div class="inner-wrapper h-screen flex justify-center p-20">
        <div class="h-full border-2 rounded-xl border-gray-700" 
             style="width: 1280px; max-height: 1080px; box-shadow: -20px 20px 0px 0px #74a840,-21px 21px 0px 3px #343333">

Este contenedor crea una tarjeta con:

Borde redondeado
Sombra personalizada (efecto 3D)
Tamaño fijo para la aplicación

📌 Loader (Cargando)

<div id="loader" class="hidden flex flex-col text-center flex-1">
    <div class="flex items-center flex-col">
        <img class="w-40 animate-pulse mt-60" src="frontend/images/loader.gif"/>
        <span class="animate-pulse">Uploading....</span>
    </div>
</div>

Oculto por defecto (hidden)
Muestra un GIF animado mientras se sube el archivo
Animación de pulso para feedback visual

📌 Sección de subida

<div id="upload" class="flex flex-col text-center mt-40" style="width: 600px;">
    <img class="mx-auto my-4" src="frontend/images/banner-img.png" style="width: 300px;">
    <h1 class="text-4xl py-2">Welcome to My Whisper</h1>
    <p class="text-xl">
        Whisper is an AI tool that allows you to convert video/audio files into text 
        and also translate the text into your desired language.
    </p>
    
    <!-- Botón de subida -->
    <label style="width: 200px; box-shadow: -7px 6px 0px 0px; border: 1px solid;"
           class="cursor-pointer select-none mx-auto my-4 rounded-full text-xl text-gray-600 px-10 py-5 border bg-lime-400" 
           for="file-upload">
        Upload File
    </label>
    
    <!-- Formulario oculto -->
    <form id="form" method="post" enctype="multipart/form-data">
        <input id="file-upload" class="hidden" type="file" name="file">
    </form>
</div>

Características destacadas:

✅ Diseño centrado y limpio
✅ Botón estilizado con sombra
✅ Input de archivo oculto
✅ Formulario preparado para subir archivos

Integración con Tailwind CSS

Tailwind CSS nos permite estilizar rápidamente sin escribir CSS personalizado:

Clase	Efecto
`h-screen`	Altura completa de la pantalla
`flex`	Display flex
`justify-center`	Centrado horizontal
`p-20`	Padding de 5rem
`border-2`	Borde de 2px
`rounded-xl`	Borde redondeado grande
`text-4xl`	Texto muy grande
`bg-lime-400`	Fondo verde lima
`hidden`	Elemento oculto
`animate-pulse`	Animación de pulsación

🎯 6. Próximos pasos

Lo que hemos logrado

✅ Página principal creada y funcional
✅ Estilos CSS integrados
✅ Imágenes y recursos en su lugar
✅ Formulario de subida listo

Lo que viene en la próxima lección

En la siguiente lección vamos a:

Crear la funcionalidad JavaScript para manejar la subida de archivos
Detectar la selección de archivos y enviar el formulario automáticamente
Mostrar el loader mientras se procesa el archivo
Manejar la respuesta del servidor

Código JavaScript que añadiremos

// Esto es lo que haremos en la próxima lección
$(document).ready(function() {
    $('#file-upload').change(function() {
        if ($(this).val()) {
            // Mostrar loader
            $('#loader').removeClass('hidden');
            $('#upload').addClass('hidden');
            // Enviar formulario
            $('#form').submit();
        }
    });
});

Preview de la funcionalidad

Cuando el usuario selecciona un archivo:

El formulario se envía automáticamente
Aparece el loader con animación
El archivo se procesa en el servidor
Se muestra la transcripción

📝 Resumen rápido

Elemento	Archivo	Ubicación
Página principal	`index.php`	Raíz del proyecto
Estilos CSS	`style.css`	`frontend/css/`
Imágenes	Varios	`frontend/images/`
Librerías	CDN	Enlazadas en el HTML

Estructura final de archivos

whisper/
├── backend/
│   └── classes/
├── frontend/
│   ├── css/
│   │   └── style.css
│   ├── images/
│   │   ├── banner-img.png
│   │   ├── loader.gif
│   │   ├── video-img.png
│   │   └── audio-img.png
│   └── js/
├── index.php          ✅ Página principal creada
└── view.php           ⏳ Próxima lección

❓ Preguntas frecuentes

¿Por qué usamos index.php en lugar de index.html?

Para poder usar PHP en el futuro (procesamiento de archivos, base de datos, etc.)

¿Qué es Tailwind CSS?

Un framework CSS que nos permite estilar directamente en el HTML sin escribir CSS aparte

¿Para qué sirve el loader?

Para dar feedback visual al usuario mientras se procesa su archivo

¿Por qué el input de archivo está oculto?

Para tener un botón personalizado que se vea mejor que el input nativo

¡Excelente trabajo! Ahora tienes una página principal completamente funcional. En la próxima lección, haremos que realmente funcione la subida de archivos.

¡Nos vemos en el próximo tutorial! 👋