4. Creating Main Page

 

Integrando HTML, CSS y PHP en tu Proyecto Web

馃摎 Tema del Tutorial:

"Integraci贸n de Frontend y Backend: De HTML a PHP Funcional"

馃幆 Objetivo de Aprendizaje

Al final de este tutorial entender谩s:

  • C贸mo integrar HTML con PHP

  • La estructura de un formulario web

  • C贸mo conectar frontend (visual) con backend (l贸gica)

  • La diferencia entre archivos est谩ticos y din谩micos

馃搨 Parte 1: Entendiendo la Transici贸n HTML → PHP

¿Por qu茅 necesitamos convertir HTML a PHP?

Piensa en tu p谩gina web como una carta:

  • HTML puro = Carta impresa (no se puede cambiar)

  • HTML + PHP = Carta escrita a mano (se puede personalizar)

Ejemplo visual:

text

馃搫 HTML EST脕TICO (impreso)

└── "Hola, [NOMBRE]"

    (Siempre dice "[NOMBRE]")


馃帹 PHP DIN脕MICO (personalizado)

└── "Hola, Juan" ← ¡Cambia seg煤n el usuario!

Archivos que vamos a trabajar:

  1. index.html ← Versi贸n HTML (plantilla inicial)

  2. index.php ← Versi贸n PHP (final, con funcionalidad)

馃攧 Parte 2: Proceso de Integraci贸n Paso a Paso

Paso 1: Descargar y Extraer los Archivos

Analog铆a del Proceso:

text

Descargar template = 馃洅 Comprar muebles de IKEA

Extraer archivos   = 馃摝 Abrir la caja

Copiar c贸digo      = 馃洜️ Armar los muebles

Pegar en PHP       = 馃彔 Colocar en tu casa

Paso 2: Analizar la Estructura del index.html

Esquema visual del c贸digo HTML:

text

馃搫 index.html

├── 馃彿️  <head> (Configuraci贸n invisible)

│   ├── 馃摫 Meta tags (responsive)

│   ├── 馃帹 CSS (estilos visuales)

│   ├── 馃叞️ Fuentes Google

│   └── 馃摐 jQuery (JavaScript)

├── 馃幁 <body> (Contenido visible)

│   ├── 馃帾 Wrapper (contenedor principal)

│   │   ├── 馃摝 Inner-wrapper

│   │   │   ├── 馃柤️ Banner/imagen

│   │   │   ├── 馃摑 T铆tulo y descripci贸n

│   │   │   ├── 馃摛 Bot贸n de upload

│   │   │   └── 馃搵 Formulario oculto

│   │   └── 馃攧 Loader (animaci贸n de carga)

└── 馃搧 Archivos vinculados

    ├── 馃帹 frontend/style/style.css

    └── 馃柤️ frontend/images/banner-img.png

Paso 3: Partes Clave del HTML Original

Ejemplo de c贸digo importante:

html

<!-- FORMULARIO DE SUBIDA -->

<form id="form" method="post" enctype="multipart/form-data">

    <input id="file-upload" type="file" name="file">

</form>


<!-- BOT脫N ESTILIZADO -->

<label for="file-upload" class="cursor-pointer">

    Upload File ← ¡Esto hace clic en el input!

</label>


<!-- LOADER/ANIMACI脫N -->

<div id="loader" class="hidden">

    <img src="frontend/images/loader.gif"/>

    <span>Uploading....</span>

</div>

Concepto importante: El <label> act煤a como bot贸n para el <input type="file"> oculto.

馃洜️ Parte 3: Convertir HTML a PHP

¿Qu茅 cambia cuando convertimos a PHP?

Comparaci贸n lado a lado:

html

<!-- HTML PURO (index.html) -->

<p>Recently Generated Files : Click 

    <a href="view.html" class="text-green">Here to View</a>

</p>

php

<!-- PHP DIN脕MICO (index.php) -->

<p>Recently Generated Files : Click 

    <a href="view.php?file=1" class="text-green">Here to View</a>

</p>


<!-- Y A脩ADIMOS PHP ARRIBA DEL TODO -->

<?php

include 'backend/init.php';

if($_SERVER['REQUEST_METHOD'] === "POST"){

    // ¡Aqu铆 procesaremos el archivo!

}

?>

Los 3 Cambios Principales:

  1. ✅ Extensi贸n del archivo: .html → .php

  2. ✅ A帽adir c贸digo PHP al inicio

  3. ✅ Enlaces: view.html → view.php?file=1

馃搧 Parte 4: Organizando Carpetas de Frontend

Estructura despu茅s de copiar archivos:

text

馃搧 MyWhisper/

├── 馃搧 frontend/

│   ├── 馃搧 images/      ← 馃柤️ Im谩genes del proyecto

│   │   ├── banner-img.png

│   │   └── loader.gif

│   └── 馃搧 style/       ← 馃帹 Estilos CSS

│       └── style.css   ← 馃搵 Reglas de dise帽o

├── 馃搧 backend/         ← 馃枼️ L贸gica PHP

└── 馃搫 index.php        ← 馃毆 P谩gina principal

Contenido de style.css (ejemplo simplificado):

css

/* Ejemplo de reglas CSS que podr铆an estar en style.css */


/* Estilos para el bot贸n de upload */

.bg-lime-400 {

    background-color: #a3e635; /* Color lima */

}


.border {

    border-width: 1px;

}


.rounded-full {

    border-radius: 9999px; /* Bot贸n completamente redondo */

}


/* Animaci贸n para el loader */

.animate-pulse {

    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}


@keyframes pulse {

    0%, 100% { opacity: 1; }

    50% { opacity: .5; }

}

⚙️ Parte 5: El Formulario - C贸mo Funciona Realmente

Explicaci贸n Sencilla del Formulario:

html

<!-- ESQUEMA VISUAL DEL FORMULARIO -->

[USUARIO HACE CLIC EN "Upload File"] → [LABEL]

        ↓

[ACTIVA EL INPUT OCULTO] → [ABRE SELECTOR DE ARCHIVOS]

        ↓

[USUARIO SELECCIONA ARCHIVO] → [JavaScript detecta cambio]

        ↓

[SUBMIT AUTOM脕TICO] → [ENV脥A A index.php]

C贸digo JavaScript que necesitamos (explicado):

javascript

// Analog铆a: El "vigilante" que observa el input de archivos

$(document).ready(function(){

    $("#file-upload").change(function(){  // ← "Cuando el archivo cambie..."

        if(this.files.length > 0){        // ← "Si hay un archivo seleccionado..."

            $("#loader").removeClass('hidden');  // ← Muestra animaci贸n

            $("#upload").addClass('hidden');     // ← Oculta contenido

            $("#form").submit();                 // ← Env铆a autom谩ticamente

        }

    });

});

Desglose en pasos humanos:

  1. Espera a que la p谩gina cargue completamente

  2. Escucha cuando alguien seleccione un archivo

  3. Verifica que realmente haya un archivo

  4. Muestra la animaci贸n de carga

  5. Env铆a el formulario autom谩ticamente

馃幁 Parte 6: Diferencia entre Mostrar y Ocultar Elementos

Concepto de Clases "hidden":

HTML inicial:

html

<div id="loader" class="hidden">...</div>    ← OCULTO al inicio

<div id="upload" class="">...</div>          ← VISIBLE al inicio

Despu茅s de seleccionar archivo:

html

<div id="loader" class="">...</div>          ← AHORA VISIBLE

<div id="upload" class="hidden">...</div>    ← AHORA OCULTO

Analog铆a del teatro:

  • id="upload" = 馃幁 Actor en escena

  • id="loader" = 馃帾 Actor tras bastidores

  • .hidden = 馃毇 "No salgas a escena"

  • Sin .hidden = ✅ "¡Sal a escena!"

馃攳 Parte 7: Errores Comunes y Soluciones

Problema 1: "No se ve el dise帽o CSS"

S铆ntoma: La p谩gina se ve sin estilos
Causa: Ruta incorrecta a style.css
Soluci贸n:

html

<!-- INCORRECTO -->

<link rel="stylesheet" href="style.css">


<!-- CORRECTO (desde index.php) -->

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

Problema 2: "No se cargan las im谩genes"

S铆ntoma: Aparece icono roto (馃棏️)
Causa: Ruta incorrecta
Soluci贸n:

html

<!-- SI index.php est谩 en ra铆z: -->

<img src="frontend/images/banner-img.png">


<!-- SI est谩s en subcarpeta, ajusta la ruta -->

Problema 3: "JavaScript no funciona"

Verifica:

  1. jQuery est谩 cargado: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  2. El c贸digo est谩 dentro de $(document).ready()

  3. Los IDs coinciden: #file-upload en HTML y JavaScript

馃З Parte 8: Ejercicio Pr谩ctico - Tu Propio Formulario

Ejercicio 1: Crear formulario de contacto

Estructura:

php

<?php

// contact.php

if($_SERVER['REQUEST_METHOD'] === "POST"){

    $nombre = $_POST['nombre'];

    echo "¡Hola $nombre! Gracias por contactarnos.";

}

?>

<!DOCTYPE html>

<form method="post">

    <input type="text" name="nombre" placeholder="Tu nombre">

    <button type="submit">Enviar</button>

</form>

Ejercicio 2: A帽adir loader personalizado

C贸digo para practicar:

html

<div id="miLoader" style="display: none;">

    <div style="width: 50px; height: 50px; border: 5px solid #ccc; 

                border-top-color: #007bff; border-radius: 50%; 

                animation: spin 1s linear infinite;"></div>

</div>


<style>

@keyframes spin {

    to { transform: rotate(360deg); }

}

</style>


<script>

document.querySelector('form').addEventListener('submit', function(){

    document.getElementById('miLoader').style.display = 'block';

});

</script>

馃帹 Parte 9: Esquema Visual del Flujo Completo

text

馃搵 DIAGRAMA DE FLUJO - MYWHISPER


[PASO 1: USUARIO VISITA]

Usuario → http://localhost/MyWhisper/

        ↓

[PASO 2: SERVIDOR SIRVE]

index.php (con HTML + CSS + Im谩genes)

        ↓

[PASO 3: USUARIO INTERACT脷A]

Clic en "Upload File" → Selector de archivos

        ↓

[PASO 4: JAVASCRIPT ACT脷A]

✅ Muestra loader

✅ Oculta contenido

✅ Env铆a formulario

        ↓

[PASO 5: PHP PROCESA]

backend/init.php → Whisper.php

        ↓

[PASO 6: RESULTADO]

馃搫 Texto generado o 馃毃 Error mostrado

馃搳 Parte 10: Comparaci贸n HTML vs PHP

Caracter铆stica

HTML Puro

HTML + PHP

Extensi贸n

.html

.php

Dinamismo

❌ Est谩tico

✅ Din谩mico

Procesamiento

Solo cliente

Cliente + Servidor

Base de datos

No accede

✅ Puede acceder

Ejemplo uso

P谩ginas informativas

Aplicaciones web

Personalizaci贸n

Mismo para todos

Diferente por usuario

❓ Parte 11: Cuestionario de Evaluaci贸n

Pregunta 1:

¿Cu谩l es la principal ventaja de usar PHP en lugar de HTML puro?
a) Los archivos son m谩s peque帽os
b) Puede crear contenido din谩mico ✅
c) Se carga m谩s r谩pido
d) No necesita servidor

Explicaci贸n: PHP permite personalizar contenido seg煤n datos o usuario.

Pregunta 2:

En el c贸digo JavaScript proporcionado, ¿qu茅 hace $("#form").submit();?
a) Crea un nuevo formulario
b) Detiene el env铆o del formulario
c) Env铆a autom谩ticamente el formulario ✅
d) Valida los datos del formulario

Pregunta 3:

¿Qu茅 significa enctype="multipart/form-data" en un formulario?
a) Codifica los datos en texto plano
b) Permite subir archivos ✅
c) Encripta la informaci贸n
d) Comprime los datos

Pregunta 4:

Si un elemento tiene clase hidden en Tailwind CSS, ¿qu茅 ocurre?
a) Se vuelve transparente
b) Se oculta completamente ✅
c) Cambia de color
d) Se mueve fuera de pantalla

Pregunta 5:

¿Por qu茅 usamos $(document).ready() en jQuery?
a) Para cargar jQuery m谩s r谩pido
b) Para ejecutar c贸digo cuando la p谩gina est谩 lista ✅
c) Para mejorar el dise帽o visual
d) Para validar formularios autom谩ticamente

Pregunta 6:

¿Qu茅 hace exactamente esta l铆nea de c贸digo?

php

if($_SERVER['REQUEST_METHOD'] === "POST")

a) Verifica si es un d铆a festivo
b) Comprueba si el formulario fue enviado ✅
c) Valida el tipo de archivo
d) Revisa la conexi贸n a internet

Respuesta correcta: b) Verifica si el formulario fue enviado con m茅todo POST.

Pregunta 7:

¿Cu谩l es la funci贸n del atributo for en este c贸digo?

html

<label for="file-upload">Upload File</label>

<input id="file-upload" type="file">

a) Establece el precio del archivo
b) Conecta el label con el input ✅
c) Define el formato del archivo
d) Limita el tama帽o del archivo

馃弳 Resumen Final - Conceptos Clave

Reglas de Oro para Integrar Frontend y Backend:

  1. 馃搷 Rutas relativas: Usa frontend/style/style.css no solo style.css

  2. 馃攧 Conversi贸n: Siempre .html → .php para funcionalidad

  3. 馃幁 Visuales: Dise帽a primero en HTML, luego a帽ade PHP

  4. 馃 Automatizaci贸n: JavaScript para mejorar experiencia de usuario

  5. 馃搧 Organizaci贸n: Mant茅n im谩genes en /images/ y estilos en /style/

Flujo Mental al Crear una P谩gina:

text

1. 馃摑 Dise帽o visual (HTML/CSS)

2. 馃攧 Conversi贸n a PHP (.html → .php)

3. ⚙️ A帽adir l贸gica (c贸digo PHP al inicio)

4. 馃幀 Interactividad (JavaScript/jQuery)

5. 馃И Pruebas (localhost/proyecto/)

馃殌 Proyecto Final - Checklist

✅ Descargar y extraer archivos template
✅ Copiar c贸digo HTML a index.php
✅ A帽adir c贸digo PHP para procesamiento
✅ Copiar carpetas frontend/images/ y frontend/style/
✅ Verificar rutas de im谩genes y CSS
✅ Probar en navegador (http://localhost/MyWhisper/)
✅ Verificar que loader se muestre al seleccionar archivo

馃摎 Recursos para Continuar Aprendiendo

Pr贸ximos pasos sugeridos:

  1. Modifica los colores en style.css

  2. Cambia las im谩genes por las tuyas propias

  3. A帽ade validaci贸n de tipos de archivo

  4. Crea una p谩gina about.php con informaci贸n del proyecto

  5. Experimenta con diferentes animaciones CSS

Preguntas para explorar:

  • ¿C贸mo har铆as para subir m煤ltiples archivos a la vez?

  • ¿Qu茅 seguridad necesitar铆as para un formulario real?

  • ¿C贸mo personalizar铆as el dise帽o para m贸viles?

¡Excelente trabajo! 馃帀 Has aprendido a integrar dise帽o frontend con l贸gica backend. Recuerda: la pr谩ctica hace al maestro. ¡Sigue experimentando!

馃挕 Consejo para principiantes:
Cuando algo no funciona:

  1. Revisa la consola del navegador (F12 → Console)

  2. Verifica las rutas de archivos

  3. Prueba por partes (primero HTML, luego PHP, luego JS)

  4. ¡Google es tu amigo! Busca mensajes de error espec铆ficos

馃殌 ¡Ahora tienes una p谩gina web funcional! El siguiente paso: procesar realmente esos archivos de audio/video.

Comentarios

Publicar un comentario

Entradas m谩s populares de este blog

1-7. Transforma tu audio a texto

https://docs.google.com/presentation/d/e/2PACX-1vQALlzBy_iPdW3SCPiIx-glkhsG4OKexjhqrRvQd8mGPiAfMWyRU8Vde9T7ygB-MWr30o6EJ5Ubpaiy/pub?start=true&loop=false&delayms=3000   7. Transforma tu Audio a Texto - Los "O铆dos" de tu Asistente Explicaci贸n para principiantes: En esta lecci贸n vamos a crear la parte m谩s m谩gica de nuestro asistente: convertir tu voz en texto que Python pueda entender. Es como ense帽arle a tu computadora a escuchar y tomar notas de lo que dices. ¡Es el primer paso para una conversaci贸n real con tu asistente! Objetivo de esta lecci贸n: Configurar el reconocimiento de voz Capturar audio del micr贸fono Convertir audio en texto Manejar errores comunes Analog铆a: Piensa en esto como ense帽arle a un amigo extranjero a entender espa帽ol: Tu voz = Sonidos en espa帽ol speech_recognition = Amigo que est谩 aprendiendo Texto = Lo que tu amigo escribe despu茅s de entenderte 馃摝 Paso 3: Instalar la Librer铆a de Reconocimiento de Voz ¿Qu茅 es speech_recognition ? Es una librer铆a...
Leer m谩s

10. Haz que tu asistente hable

 https://docs.google.com/presentation/d/e/2PACX-1vTHAFRd6DI8h9_5SuA-ScwG28zy0CM7BxtMoks6vtUlj4v53h6xvaoB_oO7_ZducNACQ5FBXU6xzE74/pub?start=false&loop=false&delayms=3000 10. Haz que tu Asistente Hable - La "Boca" de tu Asistente Explicaci贸n para principiantes: ¡Es momento de darle voz a tu asistente! En esta lecci贸n vamos a transformar el texto en voz hablada. Imagina que hasta ahora tu asistente era como una persona sorda que solo pod铆a leer lo que escrib铆as. Ahora le vamos a dar la capacidad de responderte hablando, como Siri o Alexa. Objetivo de esta lecci贸n: Instalar y configurar pyttsx3 (motor de texto a voz) Hacer que el asistente diga cualquier texto Entender el flujo b谩sico de s铆ntesis de voz Prepararse para personalizar la voz Analog铆a: pyttsx3 es como un sintetizador vocal o un cantante rob贸tico. T煤 le das la letra (texto) y 茅l la canta (habla) usando diferentes voces y estilos. 馃摝 Paso 1: Instalar la Librer铆a pyttsx3 ¿Qu茅 es pyttsx3? Es una librer铆a Python ...
Leer m谩s

8. NUEVO - Soluci贸n si tu micr贸fono no est谩 captando tu audio

  https://docs.google.com/presentation/d/e/2PACX-1vQmcGg0EfbCv-ZVuqeEl7TLPKuaVyK6KsgHqpSRqeLTZ-mUFV8JlQ6a5pbH2WbLBGcXinzLTTBSKvPb/pub?start=false&loop=false&delayms=3000  8. NUEVO - Soluci贸n si tu Micr贸fono no Capta tu Audio Explicaci贸n para principiantes: Si tu asistente dice constantemente "No pude entenderlo bien" pero t煤 S脥 est谩s hablando, el problema est谩 en la conexi贸n entre tu voz y Python. Imagina que tu micr贸fono es un tel茅fono y Python es un amigo al otro lado de la l铆nea. Si el tel茅fono est谩 roto o mal configurado, tu amigo no te escuchar谩, ¡aunque t煤 est茅s gritando! Objetivo de esta lecci贸n: Diagnosticar problemas de captura de audio Configurar correctamente el micr贸fono en Windows Identificar programas que interfieren Probar soluciones paso a paso Estado actual del problema: python while True :      print ( 'Escuchando...' )   # ✅ Esto s铆 aparece     audio = listener . listen ( source )   # ⚠️ Aqu铆 est谩 e...
Leer m谩s