Click here to view the next lesson.

1. Fundamentos de la Creación Digital

✨3. Fundamentos del Desarrollo Web✨

Contenido de la lección

✨ Fundamentos del Desarrollo Web ✨

¿Que es la programación?

💬 Descripción:

En esta lección, aprenderás los conceptos fundamentales del desarrollo web. Vamos a usar analogías sencillas para entender qué es el desarrollo web, cómo se construyen los sitios y qué papel juegan tecnologías como HTML, CSS y JavaScript. También exploraremos algunas herramientas clave como Webflow, VS Code, y repl.it, así como frameworks populares y programas que facilitan el proceso de desarrollo web.

‍

📖 Lectura: ¿Qué es el Desarrollo Web?

El desarrollo web se refiere a la creación de sitios y aplicaciones web. Involucra escribir código y utilizar tecnologías para dar vida a una página o aplicación que puedes ver y usar en un navegador. El desarrollo web está compuesto por dos áreas principales:

1. Frontend (lo que ves): Todo lo que interactúas en una página web, como botones, menús y texto.

2. Backend (lo que no ves): El servidor y las bases de datos que gestionan la información detrás de escena.

‍

🏗 Analogía del Sitio Web: Construir una Casa

Vamos a usar la analogía de una casa para comprender mejor cómo se desarrollan los sitios web:

• HTML (HyperText Markup Language) es como los cimientos y la estructura de la casa. Define qué habitaciones tendrá tu casa y dónde se ubicarán (las diferentes secciones de tu sitio web). HTML crea la base y estructura de la web.

Sin HTML, no habría nada visible o estructurado en la web.

Ejemplo de HTML:

<!DOCTYPE html>
<html lang="es">
<head>   
	<meta charset="UTF-8">    
	<meta name="viewport" content="width=device-width, initial-scale=1.0">   
	<title>Ejemplo de Texto Interactivo</title>    
	<link rel="stylesheet" href="styles.css">
</head>
<body>    
	<h1 id="titulo">Este es un título en azul</h1>    
	<p>Este es un párrafo en gris.</p>   

	<script src="script.js"></script>
</body>
</html>

<Repl link>‍

• CSS (Cascading Style Sheets) es como el diseño interior y la decoración de la casa. Define cómo se ven los colores, las fuentes, y el diseño general de la página. CSS le da vida al sitio visualmente.

Sin CSS, tu página web se vería muy básica, como una casa sin pintura ni decoración.

Ejemplo de CSS:

html {
  height: 100%;
  width: 100%;
}
h1 {
  color: blue;
  font-family: Arial, sans-serif;
  cursor: pointer; /* Esto muestra un puntero de mano cuando se pasa por encima */
}

p {
  color: gray;
}

<Repl link>

‍

• JavaScript es como la electricidad y plomería de la casa, que hace que todo funcione de manera dinámica. JavaScript permite agregar interactividad, como que un botón funcione cuando haces clic o que aparezcan mensajes.

Sin JavaScript, tu sitio sería estático, como una casa sin electricidad.

Ejemplo de JavaScript:

// Seleccionamos el elemento h1 por su ID
const titulo = document.getElementById('titulo');

// Función que cambia el color del texto
titulo.addEventListener('click', function() {
    if (titulo.style.color === 'blue') {
        titulo.style.color = 'red'; // Cambia a rojo cuando se hace clic
    } else {
        titulo.style.color = 'blue'; // Vuelve a azul si se hace clic de nuevo
    }
});

<Repl Link>

‍

🌐 Herramientas No-Code y Low-Code

Para empezar con el desarrollo web, hay herramientas que te permiten crear sitios web sin escribir código (no-code) o con poco código (low-code). Estas son algunas de las herramientas más útiles:

• Webflow: Webflow es una herramienta visual que te permite diseñar y desarrollar sitios web sin escribir HTML, CSS o JavaScript. Es como usar bloques de construcción que ya están armados, pero te permiten hacer ajustes y personalizar el diseño. Al final, Webflow genera todo el código por ti. Empieza usando esta guía interactiva para crear una cuenta de Webflow y checar su interfaz de usuario (UI). Esta traducido al español.

‍

• Carrd: Una plataforma muy simple para crear sitios web de una sola página. Ideal para hacer algo rápido y visual.

🔧 Herramientas para el Desarrollo con Código

A medida que avances, podrías querer aprender a escribir el código tú mismo. Aquí te menciono algunas de las herramientas más usadas por los desarrolladores:

1. Visual Studio Code (VS Code): Este editor de código es uno de los más populares. Piensa en VS Code como tu “taller de herramientas” donde puedes escribir, editar y probar tu código. Puedes trabajar en archivos HTML, CSS y JavaScript.

• Consejo: Usa extensiones como Live Server para ver los cambios en tu sitio en tiempo real.

• Ejercicio: Instala VS Code, crea un archivo HTML y abre tu primera página web en un navegador.

2. Repl.it: Repl.it es una plataforma que te permite escribir código directamente en tu navegador, sin necesidad de instalar nada. Es ideal para principiantes que quieren practicar sin configurar su computadora.

• Ejercicio en Repl.it: Abre Repl.it, escribe un archivo HTML básico y visualiza tu primera página web.

‍

🛠 Frameworks y Librerías para el Desarrollo Web

Los frameworks son herramientas que te ayudan a acelerar el desarrollo web proporcionando componentes ya hechos. Aquí te menciono algunos populares:

1. Bootstrap: Bootstrap es un framework de CSS que te permite crear sitios web que se adapten a cualquier pantalla, como un móvil o una computadora. Es como usar “kits de muebles” que ya vienen diseñados para que solo los coloques donde quieras.

‍

Ejemplo en Bootstrap:

Puedes añadir botones y menús fácilmente sin diseñar todo desde cero.

<button class="btn btn-primary">Clic Aquí</button>

2. Tailwind CSS: Es un framework que te permite personalizar los estilos de tu sitio usando clases predefinidas. Piensa en Tailwind como un set de herramientas flexibles que puedes combinar de diferentes maneras.

3. React: React es una biblioteca de JavaScript que te permite crear interfaces de usuario dinámicas. Aunque es un poco más avanzado, es útil si más adelante quieres crear aplicaciones web interactivas como las que ves en redes sociales o aplicaciones de mensajería.

‍

📊 Consejos Útiles para Principiantes en Desarrollo Web

1. Empieza con No-Code: Si eres nuevo, empieza con herramientas como Webflow o Carrd. Te permitirá ver cómo funciona la estructura de un sitio sin tener que escribir código. A medida que te sientas más cómodo, puedes empezar a experimentar con HTML y CSS.

2. Practica con Repl.it: Cuando estés listo para escribir código, practica con Repl.it. Esta plataforma es muy útil para principiantes porque no necesitas instalar nada y puedes probar tu código en tiempo real.

3. Usa Frameworks: Frameworks como Bootstrap o Tailwind te ayudan a acelerar el proceso de desarrollo. No necesitas diseñar todo desde cero; ellos te dan las herramientas necesarias para crear sitios visualmente atractivos rápidamente.

4. Diseño Responsivo: Asegúrate de que tu sitio web se vea bien en diferentes dispositivos (computadoras, móviles y tabletas). Herramientas como Webflow y Bootstrap te permiten crear sitios que se adaptan automáticamente al tamaño de pantalla.

5. Aprende Git: Cuando estés listo para trabajar en proyectos más grandes, aprende a usar Git y GitHub para guardar y compartir tu código. Es como una “caja fuerte” donde puedes guardar todas las versiones de tu proyecto.

‍

🌟 Conclusión

El desarrollo web es una combinación de lógica y creatividad. Ya sea que empieces con herramientas no-code como Webflow, o decidas adentrarte en el código con VS Code y repl.it, lo más importante es empezar a practicar y aprender de manera progresiva. Cada paso que des te llevará más cerca de crear sitios web y aplicaciones funcionales y bien diseñadas.

‍