martes, octubre 18, 2011

Tutorial de desarrollo web, Parte II: Hola, mundo

Previously, on The CubeBlog...

Una vez dejamos claros la semana pasada algunos conceptos importantes a tener en cuenta sobre los distintos lenguajes que vamos a usar en este tutorial, hoy por fin vamos a ponernos manos a la obra y a empezar a escribir código. Tal como comenté la semana pasada, nuestra principal herramienta a lo largo de este tutorial será el Bloc de notas (o cualquier editor de texto plano). Para comenzar nuestro curso, crearemos en el directorio raíz de nuestro disco principal (presumiblemente, "C:\") una carpeta llamada "Mis páginas web", donde iremos guardando todos los archivos que vayamos haciendo durante el curso. Si el lector quiere (o lo necesita por razones de espacio, aunque los documentos que crearemos no serán especialmente pesados), puede crear la carpeta en cualquier otro lugar de su ordenador, pero deberá siempre estar atento a que nuestras posibles referencias a la carpeta "C:\Mis páginas webs\" deberán ser sustituidas por su correspondiente ruta. De todos modos, la mayoría de las rutas (si no todas) que haremos serán relativas así que eso no importará mucho (¿no sabes lo que es una ruta relativa? no te preocupes, hablaremos de ello a su debido tiempo).
Una vez creada nuestra carpeta, crearemos dentro de ella un nuevo archivo de bloc de notas, si bien abriendo el programa y guardando el archivo en esta carpeta, si bien pulsando con el botón derecho, desplegando el menú "Nuevo" y eligiendo "Documento de texto". Antes de continuar, si somos usuarios de Windows, deberemos asegurarnos de que estamos viendo las extensiones de nuestros archivos. Para ello, pulsaremos en el menú superior el menú desplegable "Herramientas" (si somos usuarios de Vista o 7 quizá necesitemos pulsar la tecla "Alt" para ver dicho menú) y pulsaremos en "Opciones de carpeta". En la ventana que se abrirá, daremos a la pestaña "Ver" y buscaremos la opción "Ocultar las extensiones de archivo para tipos de archivo conocidos". En caso de que esté marcada, la desmarcaremos y aceptaremos, de modo que ahora el archivo que recién hemos creado debería tener la extensión ".txt". Cambiaremos el nombre del archivo (botón derecho sobre el archivo y hacer click en "Cambiar nombre") y lo sustituiremos por "hello_world.html", eliminando incluso la extensión. Probablemente el sistema operativo nos avise de que al cambiar la extensión, el archivo pueda quedar inutilizable. Ignoraremos su aviso y le diremos que sí queremos cambiarlo de todas maneras, y vemos que el icono del archivo cambiará.
ANOTACIÓN: Podremos encontrar dos tipos de extensiones para archivos HTML, uno es el ".html" (como el que he usado en este ejemplo) y otro es el ".htm". La razón de esto es que en los antiguos sistemas operativos de Microsoft sólo se permitían tres caracteres en las extensiones, por lo cual tuvo que ser reducido. A día de hoy, esa restricción no existe, pero el ".htm" se ha mantenido por compatibilidad. No existe ninguna diferencia entre ambas extensiones ni ninguna recomendación por parte de la W3C de usar una u otra, así que esto quedará a gusto del diseñador. En mi caso, prefiero la extensión ".html", así que será la que usaré durante el curso, de modo que si el lector prefiere usar la extensión ".htm", deberá estar pendiente de cambiarla en cualquier momento que se mencione a lo largo del curso.
Ahora, si hacemos doble click sobre el archivo que hemos creado, vemos que se abre una ventana del explorador donde nos mostrará una página completamente en blanco, así que tendremos que empezar a trabajar para darle vida. Para ello, pulsaremos con el botón derecho sobre el archivo en cuestión y elegiremos la opción "Abrir con..." buscando nuestro editor de texto (Bloc de notas o similar).
Por supuesto, y como es lógico, veremos que el archivo está completamente vacío, así que nos toca empezar a escribir. Para ello vamos a usar un ejercicio muy típico de los cursos de programación, el llamado "Hola mundo" (Hello world en inglés). Para ello, introduciremos el siguiente código:

<!DOCTYPE html>
<html>
<head>
<title>Hola mundo</title>
</head>
<body>
<p>Hola mundo</p>
</body>
</html>


Una vez copiado este código en el documento, lo guardaremos y volveremos a abrir la página (o, si ya la tenemos abierta, la actualizaremos), de modo que debería aparecer una página como la siguiente:
Imagen 1
Y así vemos cómo nuestra primera página web saluda al mundo, de una manera un tanto pobre, pero poco a poco iremos aprendiendo más. Ahora pasaremos a analizar el código que hemos introducido, un poco por encima ya que en futuras entregas del curso iremos hablando más detenidamente de cada etiqueta. Para empezar, nos habremos percatado del hecho de que cada etiqueta (como se llaman las "instrucciones" de los lenguajes de marcado) de nuestro código está encerrado entre los símbolos "menor que" (<) y "mayor que" (>). Estos símbolos nos acompañarán durante toda nuestra andadura por el HTML, así que tenedlos siempre en cuenta. También podemos observar que todo aquello que hemos envuelto entre dichos símbolos no aparece en pantalla, y que todas las etiquetas (salvo la primera, el "Doctype") tienen una etiqueta similar posteriormente, pero comenzando con una barra (/) . Como no es muy difícil de deducir, la primera de las etiquetas indica el comienzo (etiqueta de apertura) y la segunda indica el final (etiqueta de cierre). Como última anotación, darnos cuenta de que todo el contenido de las etiquetas, salvo por la palabra "Doctype", está escrito en minúsculas, algo estándar del HTML desde su cuarta edición.
  • <!DOCTYPE html> Esta primera etiqueta, la única etiqueta en HTML que no tiene etiqueta de cierre (aunque esta afirmación no es del todo verdad, pero de eso hablaremos en otro momento) sirve para indicar al navegador en qué versión del lenguaje HTML estamos trabajando. Hasta el HTML 4 las etiquetas Doctype eran enormes, pero a partir de HTML 5 son tan simples como ésta que veis aquí.
  • <html> La etiqueta "html" indica el comienzo del documento HTML, y contiene todo lo que no sea el Doctype, de modo que todo documento HTML, justo después del Doctype, debe contener la etiqueta de apertura "html", y al final del documento debe estar su correspondiente etiqueta de cierre (como podemos ver en este ejemplo).
  • <head> Todo el documento HTML se divide en dos etiquetas, "head" y "body". La etiqueta "head" (la "cabecera" del documento) contiene todos aquellos elementos que, a pesar de que no sean visibles en la página, afectarán de un modo u otro a ésta. Esto suena un tanto abstracto dicho así, pero según avancemos en el curso, lo entenderemos mejor.
  • <title> La única etiqueta (o casi) del interior del "head" que será visible directamente por los visitantes de nuestra página es "title". Su contenido, "Hola mundo" en nuestro ejemplo, podemos verlo escrito en la barra superior del explorador.
  • <body> Como les decía, todo el documento HTML se divide en dos partes, el "head" y el "body". La etiqueta "body" contiene todo lo visible directamente por el usuario, el "contenido real" de la página web.
  • <p> La etiqueta "p" es una de tantas etiquetas que tendremos que ir aprendiendo a usar dentro del "body" de nuestra página. Ésta en particular, crea un párrafo dentro del cual podemos escribir texto para que aparezca en pantalla, tal como hemos hecho en este ejemplo al introducir "Hola mundo" entre ambas etiquetas "p", apareciendo dicho texto como único contenido de la página.
Hasta el momento, con un poco de observación y un mínimo de dominio del inglés, el funcionamiento de lo que hemos hecho hasta ahora no debería causar demasiada dificultad al lector. Por ello, y en pos de que vayan practicando para la semana que viene, les propongo un par de ejercicios, ambos muy fáciles:

EJERCICIO 1
Hacer un documento HTML llamado "quijote.html" en cuya cabecera diga "El Ingenioso Hidalgo Don Quijote de La Mancha", y en cuyo cuerpo deberá decir:
En un lugar de La Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. 
Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. 
El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino.

EJERCICIO 2 
Hacer una página con el siguiente aspecto:

Aquellos que quieran comprobar si sus ejercicios están bien hechos, o tengan alguna duda en su resolución (he introducido una pequeña trampa en ambos ejercicios, ruego me perdonen, hablaremos de ella la próxima semana) pueden contactar conmigo a través de las páginas de Facebook o Tuenti (el administrador en cualquiera de las dos), mandándome un privado e incluyendo, si queréis, el código de lo que hayáis hecho. Pido, por favor, que no los pongan en los comentarios o de forma pública en las redes sociales, ya me encargaré yo de publicar las respectivas soluciones la semana que viene.

2 comentarios:

Rumal88 dijo...

Muy interesante!!
pásate por el mío, a ver que te parece.

curso de diseño web dijo...

Muy buen aporte. En la era de la informática, considero que capacitarse en esta área abre considerablemente el campo de posibilidades en el plano profesional. La tarea del especialista en programación es muy requerida en numerosos ámbitos por lo que la oferta laboral es amplia y muy variada.