¿Qué es la Programación?

La programación es el proceso de crear instrucciones que le dicen a una computadora cómo realizar una tarea. Es una habilidad fundamental en la era digital que te permite crear sitios web, aplicaciones, juegos y mucho más. En este curso, aprenderás los conceptos básicos de programación con un enfoque práctico y proyectos interactivos.

Conceptos Básicos

¿Por qué aprender a programar?

La programación te permite:

  • Resolver problemas de manera lógica y estructurada
  • Automatizar tareas repetitivas
  • Crear aplicaciones y herramientas personalizadas
  • Desarrollar habilidades de pensamiento crítico
  • Mejorar tus oportunidades laborales

Lenguajes de Programación

Existen muchos lenguajes de programación, cada uno con sus propias fortalezas y aplicaciones:

  • HTML y CSS: Para estructura y diseño de páginas web
  • JavaScript: Para interactividad web y desarrollo frontend/backend
  • Python: Popular por su simplicidad y versatilidad
  • Java: Ampliamente utilizado en aplicaciones empresariales
  • C++: Para software de alto rendimiento y videojuegos

En este curso, nos centraremos en HTML, CSS y JavaScript, los pilares del desarrollo web.

Fundamentos de Programación

Antes de adentrarnos en lenguajes específicos, es importante comprender los conceptos fundamentales que son comunes a todos los lenguajes de programación.

Conceptos Principales

Variables y Tipos de Datos

Las variables son contenedores para almacenar datos. Cada variable tiene un tipo de dato que define qué tipo de información puede contener:

// Ejemplo en JavaScript
let nombre = "Juan"; // String (texto)
let edad = 25; // Number (número)
let esEstudiante = true; // Boolean (verdadero/falso)
let calificaciones = [85, 90, 78]; // Array (arreglo)
let persona = {nombre: "Juan", edad: 25}; // Object (objeto)

Operadores

Los operadores permiten realizar operaciones con variables y valores:

// Operadores aritméticos
let suma = 5 + 3; // 8
let resta = 10 - 4; // 6
let multiplicacion = 3 * 4; // 12
let division = 20 / 5; // 4

// Operadores de comparación
let esIgual = (5 == 5); // true
let esMayor = (10 > 5); // true
let esMenor = (3 < 1); // false

Estructuras de Control

Las estructuras de control determinan el flujo de ejecución del programa:

// Condicionales (if-else)
let edad = 18;

if (edad >= 18) {
  console.log("Eres mayor de edad");
} else {
  console.log("Eres menor de edad");
}

// Bucles (for)
for (let i = 0; i < 5; i++) {
  console.log("Iteración " + i);
}
Eres mayor de edad
Iteración 0
Iteración 1
Iteración 2
Iteración 3
Iteración 4

Funciones

Las funciones son bloques de código reutilizables que realizan una tarea específica:

// Definir una función
function saludar(nombre) {
  return "Hola, " + nombre + "!";
}

// Llamar a la función
let mensaje = saludar("María");
console.log(mensaje);
Hola, María!

Demo Interactivo: Calculadora Simple

El resultado aparecerá aquí

HTML y CSS: La base del desarrollo web

HTML (HyperText Markup Language) y CSS (Cascading Style Sheets) son los componentes fundamentales para construir páginas web. HTML proporciona la estructura del contenido, mientras que CSS se encarga del diseño y presentación visual.

HTML Básico

Estructura de un documento HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Primera Página</title>
</head>
<body>
  <h1>Hola Mundo</h1>
  <p>Esta es mi primera página web.</p>
</body>
</html>

Elementos HTML comunes

  • Encabezados: <h1> a <h6>
  • Párrafos: <p>
  • Enlaces: <a href="url">
  • Imágenes: <img src="imagen.jpg" alt="descripción">
  • Listas: <ul>, <ol>, <li>
  • Divisiones: <div>, <span>
  • Formularios: <form>, <input>, <button>

CSS Básico

Sintaxis CSS

/* Sintaxis básica */
selector {
  propiedad: valor;
}

/* Ejemplo */
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  font-size: 24px;
}

Selectores CSS

  • Selector de elemento: p { }
  • Selector de clase: .mi-clase { }
  • Selector de ID: #mi-id { }
  • Selector de atributo: [type="text"] { }
  • Pseudo-clases: a:hover { }

Propiedades CSS comunes

  • color: Define el color del texto
  • background-color: Define el color de fondo
  • font-family: Define la fuente del texto
  • font-size: Define el tamaño del texto
  • margin: Define el margen exterior
  • padding: Define el relleno interior
  • border: Define el borde
  • width/height: Define ancho y alto
  • display: Define cómo se muestra un elemento

JavaScript: Dando vida a tus páginas

JavaScript es un lenguaje de programación que permite añadir interactividad a las páginas web. Con JavaScript puedes crear efectos visuales, validar formularios, actualizar contenido dinámicamente y mucho más.

Primeros pasos con JavaScript

Incluyendo JavaScript en HTML

<!-- Método 1: Interno -->
<script>
  alert("Hola desde JavaScript!");
</script>

<!-- Método 2: Externo -->
<script src="mi-script.js"></script>

Manipulación del DOM

El DOM (Document Object Model) es una representación en forma de árbol de un documento HTML. JavaScript puede modificar este árbol para cambiar contenido, estructura y estilos.

// Seleccionar elementos
let titulo = document.getElementById("titulo");
let parrafos = document.getElementsByTagName("p");
let elementos = document.querySelectorAll(".mi-clase");

// Modificar contenido
titulo.textContent = "Nuevo título";

// Modificar estilos
titulo.style.color = "blue";

// Añadir/eliminar clases
titulo.classList.add("destacado");
titulo.classList.remove("oculto");

Eventos

Los eventos son acciones que ocurren en el navegador, como hacer clic, mover el ratón o cargar la página. JavaScript puede reaccionar a estos eventos.

// Método 1: Atributo HTML
<button onclick="alert('¡Haz hecho clic!')">Haz clic</button>

// Método 2: Propiedad del objeto
let boton = document.getElementById("mi-boton");
boton.onclick = function() {
  alert("¡Haz hecho clic!");
};

// Método 3: Event Listener (recomendado)
boton.addEventListener("click", function() {
  alert("¡Haz hecho clic!");
});

Demo Interactivo: Cambiar Colores

Este texto cambiará de color cuando presiones el botón.

Proyectos Prácticos

La mejor manera de aprender programación es practicando. Aquí te presentamos algunos proyectos que puedes desarrollar para aplicar los conceptos aprendidos.

Proyecto 1: Página Web Personal

Crea una página web personal sencilla que incluya información sobre ti, tus intereses y habilidades.

Objetivos:

  • Aplicar estructura HTML básica
  • Dar estilo con CSS
  • Incluir navegación entre secciones
  • Añadir imágenes y enlaces

Nivel de dificultad: Principiante

Proyecto 2: Calculadora Interactiva

Desarrolla una calculadora que pueda realizar operaciones básicas (suma, resta, multiplicación, división).

Objetivos:

  • Crear una interfaz con HTML y CSS
  • Implementar la lógica de las operaciones con JavaScript
  • Manejar eventos de clic en los botones
  • Mostrar resultados y gestionar errores

Nivel de dificultad: Intermedio

Proyecto 3: Lista de Tareas

Crea una aplicación que permita agregar, eliminar y marcar como completadas diferentes tareas.

Objetivos:

  • Diseñar una interfaz intuitiva con HTML y CSS
  • Implementar funcionalidad para agregar nuevas tareas
  • Permitir marcar tareas como completadas
  • Implementar la eliminación de tareas
  • Guardar tareas en el almacenamiento local del navegador

Nivel de dificultad: Intermedio-Avanzado