Curso HTML 2. Preparación del entorno de trabajo

Curso HTML 2. Preparación del entorno de trabajo

En este punto aprenderás a configurar un entorno de trabajo óptimo para desarrollar páginas web en HTML. Cubriremos desde la elección del editor de código, la estructura de archivos, el uso de un servidor local, hasta las herramientas y extensiones recomendadas para agilizar tu flujo de trabajo.

1. Elección y configuración del editor de código

1.1 Editores recomendados

• Visual Studio Code: Popular, gratuito y altamente extensible.
• Sublime Text: Ligero y rápido, con buena experiencia de usuario.
• Atom: Open source, con gran cantidad de paquetes disponibles.
• Brackets: Enfocado a diseño web, con vista previa en vivo.

1.2 Configuración inicial

• Instala tu editor preferido.
• Configura la carpeta de trabajo (workspace).
• Personaliza el tema y la tipografía para mejorar la legibilidad.
• Instala extensiones de sintaxis HTML, snippets y formateo automático.

1.3 Ejemplo de ajustes en Visual Studio Code

  {
    // Archivo settings.json de VSCode
    'editor.tabSize': 2,                       // Tamaño de tabulación
    'editor.formatOnSave': true,               // Formatear al guardar
    'files.autoSave': 'afterDelay',            // Guardar automáticamente
    'html.validate.scripts': true,             // Validar scripts en HTML
    'emmet.includeLanguages': {
      'html': 'html'
    }
  }
  

2. Estructura de archivos del proyecto

Mantener una estructura clara facilita la escalabilidad y el mantenimiento. Un esquema típico podría ser:

2.1 Ejemplo de árbol de directorios

  proyecto-web/
  ├─ index.html         
  ├─ css/
  │  └─ styles.css      
  ├─ js/
  │  └─ main.js         
  ├─ img/
  │  ├─ logo.png
  │  └─ banner.jpg
  └─ assets/
     ├─ fonts/
     │  └─ roboto.woff2
     └─ icons/
        └─ svg-sprite.svg
  

3. Uso de un servidor local

Trabajar con un servidor local te permite resolver rutas relativas, probar peticiones AJAX y simular entornos reales.

3.1 Python HTTP Server

  # Desde la terminal, sitúate en la carpeta del proyecto y ejecuta:
  python3 -m http.server 8000
  # Ahora accede en el navegador a http://localhost:8000
  

3.2 Live Server en VSCode

• Instala la extensión “Live Server”.
• Haz clic en “Go Live” para lanzar automáticamente el servidor.
• Recarga en tiempo real al guardar cambios.

4. Navegadores y herramientas de desarrollo

Los navegadores modernos incluyen potentes DevTools que facilitan la depuración y optimización.

• Chrome DevTools: Inspección de elementos, consola, auditorías con Lighthouse.
• Firefox Developer Tools: Diseño responsivo, análisis de CSS Grid y Flexbox.
• Edge DevTools: Similar a Chrome, con soporte para herramientas de accesibilidad.

4.1 Flujo de trabajo con DevTools

• Inspecciona elementos para ver estilos aplicados.
• Modifica HTML/CSS en vivo para prototipar cambios rápidos.
• Usa la pestaña “Network” para analizar tiempos de carga.
• Aplica “Lighthouse” para evaluar rendimiento, accesibilidad y SEO.

5. Extensiones y plugins recomendados

A continuación, una selección de extensiones que mejoran tu productividad:

6. Ejemplo completo de archivo index.html

Este ejemplo muestra un esqueleto básico con comentarios explicativos.

  
  
                  
          
   

  
  

    
Bienvenido a Mi Proyecto
    
  

  

    

      
Introducción
      
Este es un ejemplo de configuración inicial de tu entorno de desarrollo.
    
  

  

      
  

Conclusión

Con estos pasos habrás montado un entorno de trabajo sólido para comenzar a maquetar en HTML de forma eficiente y profesional. Asegúrate de familiarizarte con las herramientas y personalizar tu entorno según tus necesidades.