Marc Semper Lloret
← HTML: estructura y contenido de la Web

Sesión 1 · Semana 1

Conociendo Visual Studio Code

Hoy · Hoja de ruta

  1. 1. Aprende: Qué hace un editor de código, por qué se trabaja con carpetas de proyecto y qué es un linter.
  2. 2. Haz: Monta el entorno y reconstruye un documento a partir de su resultado visible.
  3. 3. Comprueba: El documento se ve como se pedía y el panel de problemas está limpio.

Antes de empezar · 5 minutos, sin apuntes

  1. Escribe qué crees que hacen HTML, CSS y el navegador. No importa si todavía dudas.
  2. ¿Qué diferencia imaginas entre abrir un archivo suelto y abrir una carpeta de proyecto?
  3. Observa <h1>Hola</h1>: señala qué partes crees que son instrucciones y cuál es el contenido.

Un editor no es un Bloc de notas con colores

Durante el módulo usaremos Visual Studio Code. Nos ayuda a organizar proyectos, detectar errores, navegar entre archivos, completar y formatear código, buscar información y ejecutar herramientas.

Su desconocimiento previo no supone ningún obstáculo: aprender a manejar herramientas nuevas forma parte del trabajo.

VS Code ya trae de serie todo lo que necesitamos para HTML: resaltado de sintaxis, sugerencias, cierre automático de etiquetas, documentación al pasar el ratón, formateo, Emmet y previsualización. No hace falta instalar diez extensiones para empezar.

Por qué una carpeta de proyecto y no archivos sueltos

Un sitio web está formado por un conjunto de archivos que se referencian entre sí, y no por un archivo aislado. Si abres archivos sueltos, el editor no sabe dónde está la raíz del sitio.

Si abres… El editor puede…
Un archivo suelto Colorear la sintaxis de ese archivo
La carpeta del proyecto Resolver rutas, autocompletar enlaces, buscar en todo el sitio y analizarlo entero

La única extensión obligatoria · HTMLHint

Linter

Un programa que analiza el código mientras lo escribes y avisa de errores y malas prácticas, sin llegar a ejecutarlo.

Instala HTMLHint desde el panel de extensiones. Analizará tu HTML y avisará de cosas como estas:

<h1>Mi web
<img src="">

Los avisos aparecen en el panel de problemas:

View → Problems

Qué significa «arreglar un aviso»

El objetivo no es que la herramienta deje de quejarse pulsando cosas al azar hasta que el panel se ponga verde. El objetivo es entender por qué existe el problema y corregirlo. Un aviso que no entiendes es un aviso que volverá.

Prettier · opcional, y todavía no

También existe Prettier, que aplica automáticamente un formato consistente. Puedes instalarlo, pero durante las primeras sesiones no vamos a depender de él: primero tienes que aprender a escribir código legible tú. Automatizar lo que no sabes hacer a mano solo esconde el problema.

El entorno, paso a paso

  1. Crea una carpeta para tu proyecto. Por ejemplo mi-web.
  2. En VS Code, Archivo → Abrir carpeta, y selecciona la carpeta, no un archivo.
  3. En el explorador lateral, crea index.html. Ese nombre no es casual: es el que los servidores sirven por defecto como página principal.
  4. Instala HTMLHint desde Ctrl + Shift + X.

Localiza también estas zonas, porque las vas a usar seis semanas: Explorer, Search, Extensions, el editor, la barra de estado y el panel Problems.

La paleta de comandos

Ctrl + Shift + P

Permite ejecutar prácticamente cualquier acción de VS Code escribiendo su nombre. En lugar de memorizar en qué menú está cada opción, la buscas. Pruébalo con Format Document.

Tarea 1 · Reconstruye este documento

Todavía no tienes que inventar una solución desde cero. Avanza de una versión resuelta a otra con menos ayuda.

Paso 1 · Observa uno resuelto

<h1>Aula web</h1>
<h2>Primer curso</h2>
<p>Hoy abrimos nuestro <strong>primer proyecto</strong>.</p>

El primer encabezado nombra la página, el segundo introduce un nivel inferior, el párrafo agrupa una idea y strong señala importancia. Copia el fragmento, cambia cada texto y comprueba qué permanece igual.

Paso 2 · Completa cuatro huecos

<__>Mi portfolio</__>
<h2>Sobre mí</h2>
<__>Estoy aprendiendo <strong>HTML</strong>.</__>

Paso 3 · Repara uno parecido

<h1>Proyecto de clase<h1>
<h2>Objetivo</h3>
<p>Construir una web completa.</p>

Explica cada reparación antes de hacerla.

Paso 4 · Ahora sí, reconstruye

Esto es lo que debe verse en el navegador. Ahora no recibes el código, solo el resultado:

Marc Semper
Desarrollo de Aplicaciones Web
Primer curso

Bienvenido a mi primera página web. Estoy aprendiendo a estructurar
documentos utilizando HTML5 estándar.

Crea index.html y escribe el HTML mínimo que represente esa información: un encabezado principal, un encabezado secundario, un párrafo, y énfasis donde tenga sentido.

La palabra importante es mínimo. Si has escrito una etiqueta que no aporta significado, sobra.

Objetivo mínimoCompleta, repara y reconstruye el documento sin errores del linter.
Si lo tienesCambia todo el contenido manteniendo la misma jerarquía y explica qué no cambia.
RetoRecibe un resultado distinto y decide cuántos encabezados y párrafos necesita sin pistas.

Checkpoint · fin de la sesión 1

  • Tienes la carpeta del proyecto abierta en VS Code, no archivos sueltos.
  • HTMLHint está instalado y ves su salida en el panel Problems.
  • Sabes abrir la paleta de comandos.
  • Tu index.html se ve como el resultado pedido.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Por qué se abre la carpeta entera en el editor y no el archivo?
  2. ¿Qué hace un linter?
  3. ¿Por qué se llama index.html la página principal?
Ver respuestas

1 · Para que el editor conozca la raíz del proyecto: así resuelve y autocompleta las rutas relativas, busca en todos los archivos y aplica el linter a todo el sitio.

2 · Analiza el código mientras lo escribes y avisa de errores y malas prácticas sin ejecutarlo.

3 · Porque es el nombre que los servidores web sirven por defecto cuando se pide una carpeta sin especificar archivo.