HTML: Hacernos las cosas fáciles

Ya llevamos un tiempo estudiando HTML y hasta ahora hemos estado usando el lenguaje de una manera un tanto anárquica. A partir de hoy nos toca empezar a utilizar algún método que nos ayudará a facilitar nuestro trabajo y optimizar así nuestras horas invertidas en él.

Hacernos las cosas fáciles

Para empezar ya va siendo hora de conocer algunos trucos que a los desarrolladores web nos hace más fácil trabajar. Las páginas web que hemos construido son simples y de poco texto, pero algún día nos tocará escribir líneas y líneas de código extenso y complicado.

Te propongo un reto: entra en la web de red.es y abre con tu navegador el código fuente. ¿Has visto qué extensión de texto? ¡Hay mil ochocientas ochenta y dos líneas de código en HTML! Y si tu trabajo como desarrollador suplente es arreglar y/o modificar algo de la página principal de este sitio web ¿podrás encontrarlo con comodidad? ¿Será un trabajo fácil?

Comentarios

En HTML y en la mayoría de lenguajes informáticos hay una opción que facilita al individuo que escribe el código (desarrolladores, programadores...) a poner porciones de texto que el ordenador no interpreta, para poder crear así su propia guía dentro de una misma página de código. Es una ayuda visual perfecta para aclararte siempre que tengas que revisar un código que escribiste hace tiempo, o incluso para ordenar mejor tus ideas mientras construyes tu página web.

Todo el texto que escribas en el código entre los símbolos <!-- y --> no tendrá ningún efecto práctico para los servidores, puesto que en lenguaje HTML ésto está dando la orden al ordenador de "no le hagas caso a lo que haya dentro".

En el caso del siguiente fragmento de código:

<p>Ésto es una <!--aquí pongo el comentario que me da la gana--> prueba de comentario.</p>

El reslutado será el siguiente:

Ésto es una prueba de comentario.

La ventaja de esta característica de HTML es que nos permite escribir un sinfín de anotaciones propias para facilitar la búsqueda de fragmentos de texto, dejar por escrito recordatorios que en un futuro puedes olvidar (como la relación entre otras páginas) así como aclaraciones para organizarnos mejor mientras construimos, por ejemplo, un formulario muy complejo.

Organización del espacio

Una característica de escribir con la tipografía que usan los editores de texto como Notepad++ o el mismo Bloc de notas de Microsoft Windows es que todos los caracteres ocupan el mismo volumen de espacio, incluido el espacio en blanco.

Fíjate que el siguiente ejemplo visual sería imposible de conseguir si lo copiamos y lo pegamos en el Microsoft Word con cualquier otra tipografía (arial, times new roman, etc...)

Por ejemplo

 este texto

  termínalo

en el mismo

punto con otra

       tipografía

Eso nos permite crear un método propio para organizar el texto, facilitando así su comprensión.

Podríamos escribir todo el código HTML de una página web en una sola línea y sin espacios en blanco, el navegador lo interpretaría igualmente. Pero si combinamos el orden de los espacios y los saltos de línea entre las etiquetas tendremos un código más fácil de comprender a simple vista y podremos imaginarnos el resultado más rápidamente.

La siguiente lista se puede escribir de dos maneras igual de válidas:

• Resultados:
1. Juan: 8
2. Rebeca: 7
3. Julia: 9
• Inversión:
1. 30€
2. 60€
3. 20€

La primera es la siguiente:

<ul><li>Resultados:</li>

<ol><li>Juan: 8</li><li>Rebeca: 7

</li><li>Julia: 9</li></ol>

<li>Inversión:</li><ol><li>30€</li><li>

60€</li><li>20€</li>

</ol></ul>

Explícame tu como lo he hecho para construir esta lista. ¡Madre mía, que lio! Sin embargo, si lo hacemos de la siguiente manera (igual de correcta para el ordenador) notaremos que la comprensión para el desarrollador será mucho mayor por una mera cuestión visual:

<ul>
  <li>Resultados:</li>
    <ol>
    <li>Juan: 8</li>
    <li>Rebeca: 7</li>
    <li>Julia: 9</li>
    </ol>
  <li>Inversión:</li>
    <ol>
    <li>30€</li>
    <li>60€</li>
    <li>20€</li>
    </ol>
</ul>

¿A que notas la diferencia? Cada uno puede crearse una manera personal de trabajar que le ayude a optimizar su tiempo, porque un texto confuso hará perder mucho tiempo de desarrollo. Plantéatelo cada vez que construyas una web (ya sea para probar ejemplos o hacer ejercicios) y poco a poco irás desarrollando tu propio método.

Colorines para el editor de texto

La mayoría de editores de texto te permiten modificar su estilo para colorearlo y tenerlo a tu gusto personal. Aquí no voy a entrar en detalles, pero te recomiendo que inviertas diez o quince minutos en revisar las opciones que te ofrezca tu editor para escoger un estilo que sea cómodo a la vista (o crear uno propio si lo tienes muy claro, lo desaconsejo para empezar).

Trabajar muchas horas delante de una pantalla de ordenador cansa mucho la vista y puede llegar a estropeartela con el tiempo, así que intenta oscurecer esos fondos tan blancos y brillantes. Ahora bien, tampoco te pases y lo hagas demasiado oscuro y complicado de leer, porque luego forzarás demasiado la vista para leer.

Te recomiendo que escojas un tema de estilo que venga con el mismo editor de texto, que sea suave y agradable. A medida que vayas escribiendo ya irás cambiando algún aspecto que te incomode para conseguir tu mejor resultado personal.

Por cierto, en mi Notepad++ uso el tema "khaki".