martes, octubre 11, 2011

Tutorial de desarrollo web, Parte I: Introducción

Aquí comienza el tutorial de desarrollo web, tema ganador de la encuesta que, durante dos semanas, estuvo colgada en el menú de la izquierda del blog. Sé que en la encuesta y en sus posts lo llamé "tutorial de HTML", pero el cambio de nombre es debido a que en este tutorial no sólo enseñaré HTML, sino también alguno de sus lenguajes complementarios (en principio, sólo CSS), por lo cual creí que debía cambiarle el nombre para ser más correcto, ¡pero para el caso es lo mismo!
Al igual que con el tutorial del cubo de Rubik, este primer post simplemente será para dejar claro unos cuantos conceptos básicos que, antes o después, nos será interesante conocer de los lenguajes que vamos a ver, así que aquí empiezo:
  • ¿Qué es HTML?
HTML es el acrónimo de Hyper-Text Markup Language, o, en español, "Lenguaje de Marcado de Hipertexto". Como imagino que esto les sonará a chino (y si no, probablemente es que ya sepáis HTML), voy a hacer una aclaración de lo que significa:
    • Lenguaje de marcado: Dentro de los lenguajes informáticos existen distintos tipos: de programación, de consulta, protocolos de comunicaciones, etc. Uno de estos tipos son los "lenguajes de marcado", los cuales se usan para definir la estructura de un documento usando etiquetas que marcan el comienzo y el final de cada parte.
    • Hipertexto: El concepto de hipertexto, aunque un poco abstracto, es fácil de entender para quienes hemos navegado por internet. El hipertexto se suele definir como un "texto en tres dimensiones", donde tenemos la oportunidad de leer en distintas direcciones ya que distintos textos se cruzan entre ellos. ¿Suena raro? La forma más fácil de entenderlo es imaginarnos Wikipedia y sus contínuas citas de un artículo a otro, con lo cual, cuando leemos un artículo, tenemos cantidad de referencias en forma de enlaces en los que podemos picar para seguir leyendo otro texto en vez del que estábamos leyendo originalmente. Ese es el concepto de hipertexto.
Ahora que entendemos estos dos conceptos, no nos será muy difícil entender lo que un "lenguaje de marcado de hipertexto" es: una forma de estructurar un texto que tendrá referencias a otros textos.
  • Breve historia del HTML
El HTML fue publicado por primera vez en 1991 por el físico Tim Berners-Lee, quien buscaba crear un sistema de hipertexto para sustituir su anterior sistema, el ENQUIRE. Aunque el primer HTML estaba correctamente estructurado y seguía unos estándares, con la llegada del HTML 2, los distintos navegadores empezaron a crear sus propias etiquetas que sólo su navegador podía interpretar, además de empezar a aparecer muchas etiquetas orientadas a dar formato en vez de a estructurar el documento. Esto llevaría a que, en 1994, se fundara el World Wide Web Consortium (W3C), que se dedican a decidir el estándar del HTML y acabarían creando el CSS, con el cual se pretendía eliminar la mayoría de las etiquetas destinadas al formato. Durante los últimos años de los 90's fueron apareciendo siguientes versiones de HTML que intentaban que los estándares se respetaran y se inició una época de "limpieza" del HTML, siendo las más importantes de estas versiones el HTML 3.2 y el HTML 4 (y su siguiente versión HTML 4.01).
La creación del estándar XML (eXtensible MarkUp Language, o "lenguaje extensible de marcado") para todos los lenguajes de marcado, también hecha por el W3C, afectó, como es lógico, al HTML, y de este modo, ha aparecido el XHTML, aunque es difícil ver las diferencias entre los HTML actuales y el XHTML.
Finalmente, desde 2007 se está trabajando en el nuevo estándar del HTML, el HTML 5, el cual aprovecha la "limpieza" hecha por los dos lenguajes anteriores y muestra una cantidad de poderosas nuevas etiquetas que buscan, entre otras cosas, la eliminación de aplicaciones externas en las páginas webs, como la tecnología Flash. A pesar de que el HTML 5 no está completamente desarrollado, las últimas versiones de los principales navegadores, en mayor o menor medida, están actualizadas para soportar todas las especificaciones que ya se han aprobado.
  • Versiones actuales del HTML
Como ya mencioné arriba, actualmente se usa el HTML 4.01 aunque el HTML 5 ya está a la vuelta de la esquina. El HTML 4.01, el cual de forma muy sencilla se puede convertir en XHTML 1.0 (también la versión actual del XHTML) se divide en tres, la versión Transitional, la Frameset y la Strict (también el XHTML 1.0 se divide de esta manera). Cada una de estas tres versiones es más estricta en los nuevos estándares que la anterior, de modo que el HTML 4.01 más "puro" sería la última de las versiones.
Sin embargo, nosotros, aprovechando que los navegadores ya trabajan sin problema con los estándares aprobados del HTML 5 (que son aquellos del HTML 4.01 Strict junto a las nuevas etiquetas de las que hablé en el anterior punto, y alguna que otra pequeña variación), en este tutorial trabajaremos con HTML 5, y hablaremos de vez en cuando del XHTML 5, la versión XML de este lenguaje (como véis, saltaron del XHTML 1 al 5, sólo por poner el mismo número, pero realmente no hay ninguna versión intermedia).
  • ¿Qué es el CSS?
Aunque ya hemos hablado un poco de él, estará bien mencionarlo más detenidamente. El CSS es el acrónimo de Cascade Style Sheets ("hojas de estilo en cascada"), otro lenguaje, esta vez del tipo llamado "hojas de estilo", un tipo de lenguaje cuyo propósito es dar formato a documentos estructurados. El CSS es el más extendido y se usa para todo tipo de documentos XML.
  • ¿Qué software necesito para seguir el tutorial?
De momento, ninguno, sólo el editor de texto del sistema operativo que uses (Bloc de Notas en Windows, TextEdit en Mac, y múltiples opciones en Linux). No recomiendo usar ningún tipo de software específico para crear páginas webs durante el curso, ya que podría obstaculizar el aprendizaje al darles las cosas ya hechas en muchos casos. Pero no significa que para siempre debamos usar el editor de texto: a los lectores que terminen el curso y que quieran seguir trabajando y desarrollando, sí les recomendaría conseguirse una herramienta de este estilo, ya que, combinando unos buenos conocimientos de los lenguajes que estudiaremos con las ayudas que estas herramientas ofrecen, nuestra capacidad como desarrolladores será mucho mayor.
  • ¿Y qué hay de otros lenguajes? ¿JavaScript, PHP, Flash...?
No sé lo que ocurrirá con esos otros lenguajes, de momento nuestro curso se centrará en HTML y CSS. Es muy posible que, una vez aprendidos estos dos lenguajes, nos metamos con JavaScript o incluso con PHP y SQL, pero de momento ni os lo planteéis. Eso sí, como ya he comentado, el HTML 5 intenta entre otras cosas evitar el uso de Flash en las páginas, por lo cual no tengo ninguna intención de tocar las animaciones en Flash en absoluto.

Y nada, de momento, eso es todo. La semana que viene empezaremos con nuestra primera página web e iremos aprendiendo las primeras etiquetas. ¡Os espero aquí!

No hay comentarios: