¿Qué es HTML, CSS y JavaScript?

Cuando desarrollamos páginas web, usamos tres tecnologías principales que trabajan juntas para crear una experiencia interactiva y visualmente atractiva: HTML, CSS y JavaScript. Aquí te explicamos qué es cada una:

HTML - Lenguaje de Marcado de Hipertexto

HTML (HyperText Markup Language) es el lenguaje básico que se utiliza para estructurar una página web. Define la estructura de la página mediante etiquetas, que indican dónde van los elementos como texto, imágenes, enlaces y otros contenidos. Es la "columna vertebral" de cualquier sitio web.

Ejemplo: <h1>Mi primera página web</h1>

CSS - Hojas de Estilo en Cascada

CSS (Cascading Style Sheets) se encarga de dar estilo y formato a los elementos HTML. Permite definir colores, tamaños, márgenes, fuentes, alineaciones y otras propiedades visuales de los elementos, haciendo que la página web sea atractiva y fácil de leer. CSS ayuda a separar el contenido (HTML) de la presentación.

Ejemplo: body { color: blue; font-family: Arial; }

JavaScript - Lenguaje de Programación

JavaScript es un lenguaje de programación que permite agregar interactividad a las páginas web. Con JavaScript, puedes crear elementos dinámicos como botones que responden a clics, formularios interactivos, animaciones y mucho más. Es el encargado de hacer que una página web no solo sea visualmente atractiva, sino también funcional.

Ejemplo: document.getElementById('miBoton').onclick = function() { alert('¡Haz hecho clic!'); }

Estas tres tecnologías son fundamentales para el desarrollo web y funcionan juntas para crear una experiencia completa y dinámica para los usuarios. Con HTML, estructuramos la página; con CSS, le damos estilo; y con JavaScript, la hacemos interactiva.

HTML: Estructura de la Web

HTML (HyperText Markup Language) es el lenguaje base para estructurar contenido en la web. Cada elemento tiene un propósito semántico que mejora la accesibilidad y el SEO.

Características Clave:

Ejemplo Avanzado:

<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página de Ejemplo</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#inicio">Inicio</a></li>
                <li><a href="#servicios">Servicios</a></li>
                <li><a href="#contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="inicio">
            <h1>Bienvenido</h1>
            <p>Explora nuestros servicios.</p>
        </section>

        <section id="servicios">
            <h2>Nuestros Servicios</h2>
            <ul>
                <li>Diseño Web</li>
                <li>Desarrollo de Aplicaciones</li>
                <li>SEO y Marketing Digital</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>© 2024 Mi Empresa. Todos los derechos reservados.</p>
    </footer>
</body>
</html>

Consejos:

CSS: Diseño y Estilo

CSS (Cascading Style Sheets) controla la presentación visual de los documentos HTML, ofreciendo un diseño atractivo y responsivo.

Propiedades Esenciales:

Ejemplo de Uso Avanzado:

body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1rem;
    text-align: center;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

section {
    background: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

Consejos:

JavaScript: Comportamiento Dinámico

JavaScript es el motor que agrega interactividad y dinamismo a las páginas web.

Funciones Clave:

Ejemplo Avanzado:

document.querySelector("#boton").addEventListener("click", function() {
    const parrafo = document.querySelector("#texto");
    parrafo.textContent = "¡El contenido ha cambiado dinámicamente!";
});

// Ejemplo de Fetch API
fetch('https://api.example.com/datos')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

Consejos:

Progressive Web Apps (PWA)

Las Progressive Web Apps son aplicaciones web que combinan lo mejor de la web y las aplicaciones nativas. Ofrecen una experiencia rápida, confiable y envolvente para los usuarios.

Características de una PWA:

Cómo Convertir una Web en PWA:

  1. Agrega un archivo manifest.json: 
    {
    "name": "Mi PWA",
    "short_name": "PWA",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#333333",
    "icons": [
        {
            "src": "icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}
  2. Configura un Service Worker: Este script gestiona la cache y las solicitudes de red.
  3. Testea tu PWA: Usa herramientas como Lighthouse en Chrome DevTools.

Ejemplo Básico de Service Worker:

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('v1').then(cache => {
            return cache.addAll([
                '/',
                '/index.html',
                '/styles.css',
                '/app.js',
                '/icon-192x192.png'
            ]);
        })
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        })
    );
});

SEO y Rendimiento Web

El SEO (Search Engine Optimization) mejora la visibilidad de tu página en los motores de búsqueda, mientras que el rendimiento asegura una experiencia de usuario rápida y fluida.

Principales Técnicas de SEO:

Herramientas para Medir el Rendimiento:

Mejoras de Rendimiento:

Accesibilidad Web

La accesibilidad asegura que las páginas web sean utilizables por personas con discapacidades, mejorando la experiencia general para todos los usuarios.

Principios Básicos:

Ejemplo de HTML Accesible:

<form>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" aria-required="true">

    <label for="correo">Correo Electrónico:</label>
    <input type="email" id="correo" name="correo">

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

Herramientas para Evaluar Accesibilidad:

Formas de Guardar Datos

Existen múltiples formas de guardar datos en aplicaciones web. A continuación, exploramos varias opciones:

1. Almacenamiento Local

Ideal para guardar datos temporales en el navegador del usuario.

// Guardar datos
localStorage.setItem("nombre", "Juan");

// Leer datos
const nombre = localStorage.getItem("nombre");
console.log(nombre);

// Eliminar datos
localStorage.removeItem("nombre");

2. Base de Datos MySQL

Es común usar una base de datos relacional como MySQL para datos estructurados.

  1. Instala MySQL y Node.js.
  2. Usa el paquete mysql en tu proyecto Node.js:
    3. npm install mysql
  3. Ejemplo de conexión y guardado:
    4. const mysql = require('mysql');

const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'mi_base_datos'
});

connection.connect();

connection.query('INSERT INTO usuarios (nombre) VALUES ("Juan")', (error) => {
    if (error) throw error;
    console.log("Datos insertados correctamente.");
});

connection.end();

3. Base de Datos MongoDB

MongoDB es una base de datos NoSQL muy utilizada en aplicaciones modernas.

  1. Instala MongoDB y el paquete mongoose:
    2. npm install mongoose
  2. Ejemplo de conexión y guardado:
    3. const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/mi_base_datos', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

const usuarioSchema = new mongoose.Schema({ nombre: String });
const Usuario = mongoose.model('Usuario', usuarioSchema);

const nuevoUsuario = new Usuario({ nombre: 'Juan' });
nuevoUsuario.save().then(() => console.log("Usuario guardado correctamente."));

4. Uso de Firebase

Cómo Instalar Node.js

Node.js es un entorno de ejecución para JavaScript del lado del servidor.

Pasos para Instalar Node.js:

  1. Visita la página oficial de Node.js: https://nodejs.org/.
  2. Descarga la versión recomendada (LTS) para tu sistema operativo.
  3. Instala el programa siguiendo las instrucciones.
  4. Verifica la instalación en la terminal o consola:
    5. node -v

    Este comando muestra la versión instalada de Node.js.

  5. Verifica también la versión de npm, que viene incluido con Node.js:
    6. npm -v

Cómo Publicar tu Página Web

Existen varias formas de hacer tu página accesible en la web:

1. Usar GitHub Pages

  1. Crea un repositorio en GitHub.
  2. Sube los archivos de tu página al repositorio.
  3. Ve a las configuraciones del repositorio y habilita GitHub Pages.
  4. Tu sitio estará disponible en una URL como: https://usuario.github.io/repositorio.

2. Usar Netlify

  1. Regístrate en Netlify.
  2. Conecta tu repositorio de GitHub o arrastra tus archivos directamente al panel de Netlify.
  3. Netlify asignará automáticamente una URL para tu página.

3. Usar Vercel

  1. Regístrate en Vercel.
  2. Conecta tu repositorio de GitHub.
  3. Vercel configurará automáticamente tu sitio y te dará una URL para acceder a él.

4. Publicar en un Servidor Personal

  1. Obtén un dominio y hosting en plataformas como Bluehost, HostGator o GoDaddy.
  2. Sube tus archivos mediante un cliente FTP como FileZilla.

5. Usar Firebase Hosting

  1. Instala Firebase CLI si no lo has hecho:
    2. npm install -g firebase-tools
  2. Inicializa Firebase Hosting:
    3. firebase init hosting
  3. Sigue las instrucciones y sube los archivos con:
    4. firebase deploy

Proyecto Final: Página Web con Base de Datos

Como parte del curso, deberás desarrollar una página web funcional que integre una base de datos y esté publicada en línea. El proyecto debe cumplir con los siguientes requisitos:

Cuando completes el proyecto, por favor envía el enlace a través del siguiente formulario. Nosotros validaremos tu trabajo y te daremos retroalimentación.