⚙️ Preparando tu entorno de trabajo
Módulo 1 - Capítulo 3 | Fundamentos de la Web
¡Es hora de preparar tu espacio de trabajo! En esta lección, instalaremos y configuraremos todas las herramientas necesarias para empezar a crear páginas web. Un buen entorno de desarrollo es fundamental para ser productivo y escribir código de calidad.
¿Por qué necesitamos herramientas especiales?
Puede que te preguntes: ¿no puedo simplemente usar el Bloc de notas para escribir código? La respuesta es sí, pero no sería muy eficiente. Las herramientas modernas de desarrollo te ayudan a:
🔧 Beneficios de un buen entorno:
- Resaltado de sintaxis: Diferentes colores para diferentes partes del código
- Autocompletado: Sugerencias mientras escribes para ahorrar tiempo
- Depuración: Herramientas para encontrar y corregir errores
- Organización: Gestión de archivos y carpetas de tu proyecto
- Extensiones: Funcionalidades adicionales para mejorar tu flujo de trabajo
💡 Piénsalo así:
Un carpintero profesional no usa solo un martillo básico. Tiene herramientas especializadas que le permiten trabajar más rápido y con mejor calidad. Como desarrollador web, tu editor de código es tu caja de herramientas.
Editores de código: VS Code
Existen muchos editores de código, pero para este curso recomendamos Visual Studio Code (VS Code). Es gratuito, de código abierto, y se ha convertido en el estándar de la industria.
Visual Studio Code
El editor más popular, con excelente soporte para HTML, CSS y JavaScript
Descargar
Alternativas
Sublime Text, Atom, Brackets, o cualquier editor que prefieras
VS Code es nuestra recomendación
Instalación de VS Code:
Descarga
Ve a code.visualstudio.com y descarga la versión para tu sistema operativo (Windows, Mac o Linux).
Instalación
Ejecuta el instalador y sigue las instrucciones. En Windows, marca la opción "Add to PATH" para poder abrir VS Code desde la línea de comandos.
Primera ejecución
Abre VS Code. Verás una interfaz limpia con una barra lateral, el área de edición principal y una barra de estado.
Extensiones útiles para VS Code
Una de las mejores características de VS Code son sus extensiones. Estas añaden funcionalidades específicas que mejoran tu experiencia de desarrollo.
🎨 Live Server
Función: Abre tu página web en un servidor local y actualiza automáticamente cuando guardas cambios.
Por qué es útil: No necesitas recargar manualmente el navegador cada vez que haces un cambio.
🌈 Prettier
Función: Formatea automáticamente tu código para que sea consistente y legible.
Por qué es útil: Mantiene tu código bien formateado sin esfuerzo.
🔍 Auto Rename Tag
Función: Cuando renombras una etiqueta HTML, renombra automáticamente la etiqueta de cierre.
Por qué es útil: Evita errores comunes con etiquetas que no coinciden.
🎯 HTML CSS Support
Función: Mejora el autocompletado para clases CSS en archivos HTML.
Por qué es útil: Sugiere nombres de clases CSS que hayas definido.
Instalación de extensiones:
Abrir panel de extensiones
Haz clic en el icono de extensiones en la barra lateral (o presiona Ctrl+Shift+X).
Buscar extensión
Escribe el nombre de la extensión en la barra de búsqueda (por ejemplo, "Live Server").
Instalar
Haz clic en "Install" en la extensión que quieras añadir.
Repetir
Repite el proceso para todas las extensiones recomendadas.
Estructura de carpetas de un proyecto
Organizar bien tus archivos es fundamental para mantener tus proyectos ordenados y fáciles de mantener. Aquí tienes una estructura estándar que usaremos:
mi-primera-pagina/
index.html
styles.css
script.js
images/
logo.png
background.jpg
css/
main.css
responsive.css
📌 Convenciones importantes:
- index.html: Siempre nombra tu archivo principal así. Los servidores buscan automáticamente este archivo.
- Nombres descriptivos: Usa nombres que describan el contenido (no "pagina1.html").
- Sin espacios: Usa guiones (-) en lugar de espacios (mi-pagina.html).
- Minúsculas: Es una buena práctica usar solo minúsculas en nombres de archivos.
Configuración inicial de VS Code
Vamos a configurar algunas opciones básicas para que VS Code funcione mejor para desarrollo web:
Configuración recomendada:
Abrir configuración
Ve a File > Preferences > Settings (o presiona Ctrl+,).
Formato al guardar
Busca "Format On Save" y actívalo. Esto hará que Prettier formatee tu código automáticamente al guardar.
Tamaño de fuente
Ajusta el tamaño de fuente a uno que sea cómodo para ti (recomendado: 14-16px).
Word wrap
Activa "Word Wrap" para que las líneas largas se ajusten automáticamente a la ventana.
Creando tu primer proyecto
Ahora vamos a poner en práctica todo lo aprendido creando la estructura de tu primer proyecto:
Crear proyecto paso a paso:
Crea una carpeta
En tu computadora, crea una carpeta llamada "mi-primera-pagina" en una ubicación fácil de recordar (como el Escritorio o Documentos).
Abre la carpeta en VS Code
En VS Code, ve a File > Open Folder y selecciona la carpeta que acabas de crear.
Crea el archivo HTML
En el explorador de archivos de VS Code, haz clic derecho y selecciona "New File". Nombra el archivo "index.html".
Escribe el código básico
En el archivo index.html, escribe el siguiente código:
<!-- Estructura básica 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>
Guarda el archivo
Guarda el archivo (Ctrl+S). Notarás cómo el resaltado de sintaxis colorea diferentes partes del código.
Abre con Live Server
Haz clic derecho en el editor y selecciona "Open with Live Server". Tu página se abrirá en el navegador.
¡Felicidades!
¡Acabas de crear y visualizar tu primera página web! Si modificas el código y guardas, verás los cambios automáticamente en el navegador.
Checklist de configuración
Antes de continuar, asegúrate de tener todo configurado correctamente:
✅ Verificación de tu entorno
- VS Code instalado y funcionando
- Extensión Live Server instalada
- Extensión Prettier instalada
- Carpeta de proyecto creada
- Archivo index.html creado
- Página web visible en el navegador
- Cambios se reflejan automáticamente al guardar
⚠️ Solución de problemas comunes
Live Server no funciona: Asegúrate de que la extensión está instalada y que estás haciendo clic derecho en un archivo HTML.
No veo colores en el código: VS Code debería detectar automáticamente que es un archivo HTML. Si no es así, haz clic en el lenguaje en la barra inferior y selecciona "HTML".
Los cambios no se actualizan: Asegúrate de guardar el archivo (Ctrl+S) después de hacer cambios.
Cierre
¡Excelente trabajo! Has configurado un entorno de desarrollo profesional que te servirá no solo para este curso, sino para todos tus futuros proyectos web.
Ahora tienes todas las herramientas necesarias para empezar a crear páginas web. En la próxima lección, profundizaremos en HTML y crearás tu primera página web completa.
✨ Lo que has logrado
- Instalaste y configuraste VS Code, el editor más popular
- Añadiste extensiones útiles que mejorarán tu productividad
- Creaste la estructura de carpetas para tu primer proyecto
- Escribiste y visualizaste tu primera página web
- Configuraste un flujo de trabajo eficiente con actualización automática
Próximo paso: En el siguiente capítulo, crearás tu primera página web completa y aprenderás los conceptos fundamentales de HTML. ¡Estás listo para empezar a programar!
