¡Bienvenido a Enseñarp!

Esta es la introducción a tu plataforma de aprendizaje interactivo. Aquí encontrarás recursos para aprender HTML, CSS, JavaScript, PHP y bases de datos.

Explora las diferentes secciones usando el menú de la izquierda.

Conceptos Básicos de HTML y CSS

HTML: La Estructura de la Web

HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear páginas web. Define la estructura de tu contenido web.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Primera Página</title>
</head>
<body>
    <h1>Hola Mundo</h1>
    <p>Este es mi primer párrafo en HTML.</p>
</body>
</html>

Introducción a JavaScript

JavaScript es un lenguaje de programación que te permite implementar cosas complejas en páginas web: cada vez que una página web hace algo más que mostrar información estática, esa página implica JavaScript.

// Esto es un comentario en JavaScript
function saludar(nombre) {
    console.log("Hola, " + nombre + "!");
}
saludar("Mundo"); // Llama a la función

PHP Básico: Tu Primer Backend

PHP es un lenguaje de script del lado del servidor diseñado para el desarrollo web, pero también es un lenguaje de programación de propósito general. Aquí aprenderás lo fundamental.

<?php
    $variable = "¡Hola desde PHP!";
    echo $variable;
?>

Conceptos de Bases de Datos y SQL

Las bases de datos son colecciones organizadas de información. SQL (Structured Query Language) es el lenguaje estándar para interactuar con ellas.

-- Crear una tabla
CREATE TABLE Usuarios (
    id INT PRIMARY KEY AUTO_INCREMENT,
    nombre VARCHAR(100),
    email VARCHAR(100) UNIQUE
);

-- Insertar datos
INSERT INTO Usuarios (nombre, email) VALUES ('Juan Pérez', 'juan@example.com');

-- Seleccionar datos
SELECT * FROM Usuarios WHERE id = 1;

Formularios HTML y Procesamiento con PHP

Aprende a crear formularios interactivos en HTML y cómo procesar los datos enviados con PHP para interactuar con el servidor.

Código del Formulario HTML

<form id="contact-form" action="procesar.php" method="POST">
    <div>
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre" required>
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>
    <div>
        <label for="asunto">Asunto:</label>
        <select id="asunto" name="asunto" required>
            <option value="">Selecciona un asunto</option>
            <option value="consulta">Consulta General</option>
            <option value="soporte">Soporte Técnico</option>
            <option value="sugerencia">Sugerencia</option>
        </select>
    </div>
    <div>
        <label for="mensaje">Mensaje:</label>
        <textarea id="mensaje" name="mensaje" required></textarea>
    </div>
    <button type="submit">Enviar Mensaje</button>
</form>

Código de procesar.php

<?php
// Habilitar la visualización de errores solo para depuración.
// ini_set('display_errors', 1);
// ini_set('display_startup_errors', 1);
// error_reporting(E_ALL);

header('Content-Type: application/json');

$response = [
    'success' => false,
    'message' => '',
    'errors'  => [],
    'data'    => [],
    'redirect_url' => ''
];

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $nombre = htmlspecialchars(trim($_POST['nombre'] ?? ''));
    $email = htmlspecialchars(trim($_POST['email'] ?? ''));
    $asunto = htmlspecialchars(trim($_POST['asunto'] ?? ''));
    $mensaje = htmlspecialchars(trim($_POST['mensaje'] ?? ''));

    if (empty($nombre)) {
        $response['errors'][] = "El nombre es requerido.";
    }
    if (empty($email)) {
        $response['errors'][] = "El correo electrónico es requerido.";
    }
    if (empty($asunto)) {
        $response['errors'][] = "El asunto es requerido.";
    }
    if (empty($mensaje)) {
        $response['errors'][] = "El mensaje es requerido.";
    }

    if (!empty($email) && !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $response['errors'][] = "El formato del correo electrónico no es válido.";
    }

    if (!empty($response['errors'])) {
        http_response_code(400);
        echo json_encode($response);
        exit();
    }

    $response['success'] = true;
    $response['message'] = "¡Formulario enviado con éxito!";
    $response['data'] = [
        'nombre'  => $nombre,
        'email'   => $email,
        'asunto'  => $asunto,
        'mensaje' => $mensaje
    ];

    $query_params = http_build_query($response['data']);
    $response['redirect_url'] = 'mostrar_datos.html?' . $query_params;

    http_response_code(200);
    echo json_encode($response);
    exit();
} else {
    http_response_code(405);
    $response['message'] = "Método no permitido.";
    echo json_encode($response);
    exit();
}
?>

Terminal PHP/SQL (Simulada)

Aquí puedes simular comandos PHP o consultas SQL. La ejecución real requiere un entorno de servidor con el archivo `execute_query.php` configurado.

Salida de la Terminal:

> Listo para tus comandos...