Taller “La Quiniela” 2: preparándonos para programar

Taller “La Quiniela” 2: preparándonos para programar

Intro

Ya tenemos una página web. Y también sabemos modificar su contenido: abrimos el archivo html y añadimos o quitamos etiquetas de HTML con su contenido.

Pero esa página es estática. Siempre la misma hasta que no la cambiamos con el bloc de notas. Vamos a prepararla para convertirla en una página dinámica. Utilizaremos un lenguaje de programación que nos permitirá cambiar cosas de la página mientras la estamos viendo.

Ese lenguaje de programación es JavaScript. En concreto utilizaremos la popular biblioteca jQuery, que facilita mucho la programación de páginas HTML.

Para nosotros un programa informático va a ser como una receta de cocina: una lista de instrucciones que, bien seguidas, hacen buen caldo. El lenguaje de programación es el “idioma” en el que hay que escribir esa receta para que sea entendida por el ordenador.

Preparando la página

Para poder utilizar jQuery en nuestra página, tenemos que añadir una etiqueta más de html a la sección <head> ... </head> que ya teníamos:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

El HTML completo de la página (con la nueva línea resaltada en negrita):

<!DOCTYPE html>
 <html lang="es">
     <head>
         <meta charset="utf-8" />
         <title>quinielas</title>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
     </head>
     <body>
         <p>¡Hola mundo!</p>
     </body>
 </html> 

El significado de esa nueva etiqueta <script> ... </script> es “tienes que ir a googleapis.com y traerte la biblioteca jquery.min.js para que este disponible en esta página”.

¡Con esa modificación ya podemos programar usando nuestra página usando jQuery!

Preparando nuestro entorno de trabajo

Podríamos trabajar con cualquier navegador web, como Internet Explorer, Chrome, Opera, … pero para simplificar utilizaremos Mozilla Firefox con la extensión Firebug.

Instalar Firefox

Si no tienes instalado firefox, hazlo desde aquí: descargar Firefox, haciendo clic en el botón “Firefox Descarga gratuita”

Instalar Firebug

Firebug es una extensión para el navegador. Para instalarla, abrimos Firefox y nos vamos al menu (botón naranja arriba a la izquierda) de complementos a la página: getfirebug.com

En el cuaddro de búsqueda, escribimos “firebug” y buscamos. Saldrán muchos complementos. El que nos interesa es “Firebug 1.10.4”. Le damos a instalar y esperamos a que termine la instalación.

Si todo ha ido bien, al volver a abrir Firefox, tendremos un nuevo botón (1) en la barra de herramientas. Un pequeño bicho naranja que nos permite activa y desactivar el panel de firebug! Una vez activado Firebug, podemos ver el entorno de trabajo (2) y la línea de comandos (3), ¡donde escribiremos nuestras primeras líneas de código!

 

¡Ya toca!

Vamos a abrir nuestra página con Firefox para poder trabajar con ella. Estáis acostumbrados al doble click. Pero tal vez necesitéis hacer clic con el botón derecho y seleccionar Firefox del menú “Abrir con”. Depende del navegador que tengáis por defecto. En la siguiente imágen véis que puedo abrir el dichoso index.html con 4 programas (el bloc de notas y 4 navegadores diferentes: Firefox, Chrome, Internet Explorer, Opera y Safari).

Al lío: en el panel de Firebug, seleccionamos la pestaña “Consola” Si no está activada, pulsa “Activar” y actualiza la página (F5 o botón de actualizar).

En la parte de abajo del panel de la consola, hay un símbolo “>>>”. Clic a la derecha del símbolo para empezar a escribir órdenes del lenguaje de programación JavaScript y jQuery.

Vamos a decirle al documento que el texto es verde:

>>> $('body').css("color","green")

Y al pulsar intro … el color de todos los elementos del body pasa a ser verde.

 

Vamos ahora con el color de fondo de la página:

>>> $('body').css("background","black")

Vamos a eliminar cualquier contenido del body (la página quedará vacía):

>>> $('body').html("")

Vamos a hacer algunos cálculos matemáticos y despues a colocarlos en la página:

>>> a = 3 + 7
>>> $('body').html(a)

Y ahora vamos a colocar una imagen y la vamos a hacer desaparecer y aparecer:

>>> $('body').html('<img src="http://bitspitosyflautas.com/blablabla/at.jpg">')
>>> $('body img').hide(1500)
>>> $('body img').show(1500)

La velocidad a la que aparece y desaparece: 1500 milisegundos = 1.5 segundos.

Pues ya está, ya estamos escribiendo líneas de código (instrucciones al ordenador). En la siguiente entrega avanzaremos en la escritura de programas. Pasaremos de las líneas aisladas a decenas o incluso ¡centenas! de líneas de código para que nuestro programa haga algo más que cambiar el color de la letra o el fondo.

Para saber más

Si alguien se quiere avanzar, dos referencias para hacerlo con fundamento:

Y si uno lo que quiere es menos fundamento y más diversión, otras referencias: