Taller "La Quiniela" 1: primero nos hacemos una página web

Taller “La Quiniela” 1: primero nos hacemos una página web

Intro

Hacer un programa para calcular quinielas es una excusa como otra cualquiera para introducirnos en el mundo de la programación. He escogido HTML5 y jQuery (javascript) por dos motivos:

  1. están de plena actualidad
  2. nos permiten acercarnos al mundo de la programación
  3. la curva de aprendizaje no es demasiado complicada
  4. al que le interese la cuestión, le permitirá profundizar con un coste económico muy bajo: 0€

Como véis, no se contar.

Que nadie piense que con estas sesiones acabará sabiendo programar. Ni tan siquiera es probable que os ayude a encontrar un trabajo o mejorar las condiciones que ya tenéis. ¡Así que lo haremos por el placer y el reto que supone aprender algo nuevo!

Con el fin de avanzar y no detenerme en cada aspecto teórico, vamos a ir creando elementos sin detenernos en las explicaciones teóricas.

Nuestra primera página web

Vamos a empezar creando una página web.

Necesitamos utilizar un editor de textos. En windows podéis utilizar el “Bloc de notas”. En cualquier versión de windows lo encontráis en Inicio -> Todos los programas -> Accesorios -> Bloc de notas.

Si utilizáis Linux/Unix, os aconsejo vi o gedit. Si utilizáis un Mac, el TextEdit viene en las diferentes versiones de Mac OS. Si alguien va a utilizar dispositivos Android, que pruebe EditText. Y si alguno va con iPhone o iPad, os aconsejaría vim. Pero si sabéis manejar vim, entiendo que este taller os sobra!

Bueno, vamos al lío. Primero vamos a crear una carpeta en el escritorio para mantener nuestro trabajo organizado. La llamaremos “quiniela” (que original).

Abrimos el editor de textos de nuestra elección y escribimos el siguiente código HTML:

<!DOCTYPE html>
 <html lang="es">
     <head>
         <meta charset="utf-8" />
         <title>quinielas</title>
     </head>
     <body>
         <p>¡Hola mundo!</p>
     </body>
 </html> 

Una vez que tenemos escrito el código html, lo vamos a guardar con estas propiedades:

  • dónde: carpeta “quiniela” que ya hemos creado en el escritorio
  • nombre: index.html
  • codificación: UTF-8

Pues ya tenemos nuestra página web! La vemos? Nos vamos a nuestra carpeta en el escritorio y la abrimos.


Puede que no sea gran cosa, pero es nuestra primera página web!

Algo más sobre html

Vamos a destripar un poco el html que hemos escrito:

<!DOCTYPE html>

Esta línea le indica al navegador que el documento mostrado está escrito siguiendo la especificación HTML5. Hay más de 20 especificaciones diferentes. Pero a nosotros … plin.

<html lang="es">
         ...
         ...
 </html> 

La segunda línea <html lang="es"> le indica al navegador que empieza el contenido html. Y además ese contenido esta en español (lang="es"). Al final del documento encontramos </html> que le indica al navegador el final del contenido html.

Entre el inicio del html y el final, encontramos dos bloques: la cabecera (<head></head>) y el cuerpo (<body></body>).

Dentro de la cabecera tenemos dos elementos:

        <meta charset="utf-8" />

que de momento vamos a ignorar completamente, aunque algún avispado se abrá fijado en ese "utf-8" que es la codificación que hemos utilizado cuando guardábamos el documento en windows.

        <title>quinielas</title>

Esta línea de la cabecera le dice al navegador cuál es el título de la página. Si os fijáis en la página que habéis creado, veréis que arriba en la barra de título aparece la palabra “quinielas”. Si en vez de “quinielas” hubiésemos puesto “esta es la mejor página del mundo, ese es el texto que aparecería.

Después de la sección <head> tenemos la sección <body> que es la parte de documento que realmente se verá en pantalla:


    <body>
         <p>¡Hola mundo!</p>
     </body>

Y lo único que hemos puesto dentro del <body> es un párrafo (<p></p>) que contiene la frase “¡Hola mundo!”. Así de sencillo es el contenido de un documento HTML. Cuando quiero crear un párrafo, abro la etiqueta <p> y para terminarlo le colocamos </p>

Hay muchas más etiquetas en HTML para añadir otros elementos. Si queréis ver una lista más o menos completa: http://www.w3schools.com/tags/default.asp

Os invito a experimentar un poco con el siguiente código:

<!DOCTYPE html>
<html lang="es">
   <head>
         <meta charset="utf-8" />
         <title>vaya tela</title>
   </head>
   <body>
         <p>¡Hola mundo!</p>
         <p>ahora no, <strong>ahora sí</strong></p>
         <a href="http://google.es">vamos a google</a>
         <hr>
         <a href="http://bitspitosyflautas.com/blablabla/a.jpg">
                  <img src="http://bitspitosyflautas.com/blablabla/at.jpg">
         </a>
         <hr>
         <a href="http://bitspitosyflautas.com/blablabla/m.jpg">
                  <img src="http://bitspitosyflautas.com/blablabla/mt.jpg">
         </a>
   </body>
</html>

Algunas cosas nuevas que aparecen en esta página:

La etiqueta <strong>ahora sí</strong></p> convierte el texto que hay dentro en negrita

La etiqueta <hr> crea una línea horizontal de separación.

La etiqueta <a href=”http://google.es”>vamos a google</a>
<hr> crea un enlace que puede ser pulsado para ir donde indique el parámetro href

La etiqueta <img src="..." coloca en el documento una imagen que está en src. Así que si queremos poner una imagen que esta en http://bitspitosyflautas.com/blablabla/at.jpg lo hacemos así:
<img src="http://bitspitosyflautas.com/blablabla/at.jpg">

Para rizar el rizo, he metido dos imágenes que en realidad son enlaces a otras imágen:

         <a href="http://bitspitosyflautas.com/blablabla/a.jpg">
                  <img src="http://bitspitosyflautas.com/blablabla/at.jpg">
         </a>

Colofón

Llegados a este punto, pueden haber pasado dos cosas:

  1. No has entendido nada.
    No te preocupes. La culpa siempre es del formador. Si realmente partes de cero, es lo normal. Hay que repetir el ejercicio entre 3 y 300 veces para dominarlo. Y por supuesto, pregunta cualquier cosa en los comentarios o e-mail.
  2. Esto lo has pasado tu en 2 minutos
    El que no se preocupa soy yo. Ya habíamos dicho que esto era para gente que empieza desde cero. Y no quiero decir que cuando llegue el jQuery la cosa se puede complicar un poco para que nadie se desanime!

Hasta la semana que viene!