Detalles finales: editores, favicon y buenas prácticas
Nos quedan unos últimos flecos antes del proyecto final: dónde escribir tu código de verdad, ese icono minúsculo que aparece en la pestaña del navegador, un puñado de buenas costumbres que te ahorrarán disgustos, y una pequeña lección de historia sobre una guerra de siglas que ya no tienes por qué librar.
Editores de código: tu herramienta de trabajo
Hasta ahora has escrito código dentro de los playgrounds de este curso, pero para proyectos reales necesitas un editor de código: un programa pensado para escribir y organizar archivos de texto y código, no un simple bloc de notas.
El editor más usado del mundo hoy en día, gratuito, con miles de extensiones. Si no sabes por dónde empezar, empieza por aquí.
Lo que hace que las etiquetas, atributos y valores se vean en colores distintos —como en los playgrounds de este mismo curso—. No es decoración: te ayuda a detectar errores a simple vista, como una etiqueta sin cerrar.
Un buen editor te sugiere etiquetas y atributos mientras escribes, y te avisa con una línea roja si algo está mal formado, antes incluso de abrir el navegador.
No pierdas tiempo buscando el editor "perfecto" antes de empezar a programar. Cualquier editor moderno y gratuito es más que suficiente para aprender. La herramienta importa mucho menos que la práctica constante — es tentador procrastinar configurando plugins en vez de escribiendo código real.
El favicon: tu página en miniatura
El favicon es ese pequeño icono que aparece en la pestaña del navegador, junto al título, y en los marcadores guardados. Un detalle diminuto que, cuando falta, hace que cualquier web se sienta un poco menos terminada.
Si no defines un favicon, algunos navegadores buscan automáticamente un archivo
llamado favicon.ico en la raíz de tu sitio. Es más
seguro (y más flexible con el formato de imagen) declararlo explícitamente con
<link rel="icon"> como en el ejemplo.
Guía de estilo: escribir HTML que se pueda leer
El navegador no le importa si tu código está bien ordenado — funciona igual de mal o de bien escrito en una sola línea gigante que con indentación perfecta. Pero tú, y cualquiera que trabaje contigo, sí lo notaréis. Un puñado de costumbres que merece la pena adoptar desde ya:
- Usa minúsculas para etiquetas y atributos:
<div class="tarjeta">, no<DIV CLASS="tarjeta">. No es obligatorio, pero es el estándar que todo el mundo espera. - Pon siempre los valores de atributo entre comillas, aunque técnicamente el navegador te deje omitirlas en algunos casos.
- Indenta con un criterio consistente (2 o 4 espacios, elige uno y no lo cambies a mitad de archivo).
- Cierra siempre las etiquetas, incluso en los pocos casos donde el navegador "perdona" que no lo hagas.
- Un archivo, una responsabilidad clara: si tu HTML empieza a sentirse gigante e inmanejable, probablemente sea momento de dividirlo o reorganizarlo.
HTML vs. XHTML: una guerra que ya terminó
Si alguna vez lees documentación antigua, puede que te encuentres con el término XHTML. A principios de los 2000, existió un intento de reescribir HTML con las reglas mucho más estrictas de XML: todas las etiquetas debían cerrarse sin excepción, todo en minúsculas, todos los atributos entre comillas — ni un solo error tolerado, o la página entera dejaba de mostrarse.
Sonaba bien en teoría, pero en la práctica resultó demasiado rígido para una web llena de código imperfecto escrito por humanos. HTML5, el estándar que usamos hoy y el que has aprendido en este curso, tomó lo mejor de esa disciplina —buenas prácticas como las que acabas de leer— sin la rigidez de romper toda la página por una sola comilla olvidada. Ganó el pragmatismo. Hoy en día, XHTML es prácticamente historia, pero ahora ya sabes reconocer el nombre si te lo cruzas.
Ponlo a prueba
Comprueba lo que has aprendido
1. ¿Qué etiqueta se usa para definir el favicon de una página?
2. ¿Qué caracterizaba a XHTML frente al HTML actual?
3. ¿Cuál de estas NO es una buena práctica recomendada en este módulo?