CoderDojo es un club de programación para gente joven en el que puedes conocer a otros programado-res, aprender cosas nuevas y divertirte con los ordenadores. Es gratuito y colaborativo, y, si tienes suerte, quizá haya algún Dojo cerca de ti. ¿Has hecho ya algo de programación? ¿Quizá no…? ¿Tal vez simple-mente quieres aprender más sobre el tema?

Si todo esto es nuevo para ti, no te preocupes: es muy fácil poner en marcha un mini-Dojo, o Dojo Nano.

¿Qué puedes hacer en un Dojo Nano? Básicamente, cualquier cosa que te guste relacionada con la programación. En este libro vas a conocer a los Nanonautas, que han puesto en marcha su propio Dojo Nano, donde aprenderán a crear un sitio web para su banda. Para hacerlo van a utilizar HTML, CSS y Ja-vaScript. ¡Tú también aprenderás a hacer tu propio sitio!

Para empezar, con ayuda de este libro vas a crear un sitio web para tu Dojo Nano, y puede que un par más para algún amigo. Es fácil y divertido, ¡y este libro será tu guía! Puedes seguir el proceso de crea-ción del sitio en http://nano.tips y saber más sobre CoderDojo en http://nanotips.es.

Éstos son los ingredientes necesarios:

Uno o varios amigos

Un ordenador

Este libro

QUE’ ES UN DOJO NANO?

IDEAS + AMIGOS + PROGRAMAR = DOJO NANO

Y todas estas ideas las han plasmado en un mapa del sitio:

Holly, Dervla, Daniel y Sam forman parte del grupo de música los Nanonautas. Holly toca la guitarra; Der-vla, el piano; Daniel es el cantante, y Sam toca el bajo. Ya han dado varios conciertos y creen que sería buena idea crear un sitio web para que todo el mundo conozca su música.

En cuanto se ponen a hablar del tema, a los Nanonautas se les ocurren un montón de ideas para su sitio web:

• Anunciar cuándo tendrán lugar sus próximos conciertos.

• Hacer publicidad de su CD y de su camiseta.

• Enlazar a vídeos de YouTube.

• Dar consejos sobre la compra de instrumentos y su cuidado.

• Ofrecer recomendaciones para ensayar sin volver locos a los vecinos.

INICIO

NOSOTROS

NUESTRAS CANCIONES

CONCIERTOS

ORGANIZAR UN CONCIERTO

PRÓXIMOS CONCIERTOS

CONSEJOS

VíDEOS

CD NUEVO

CONSIGUE LA CAMISETA

En este libro vamos a crear el sitio de los Nano-nautas a partir del mapa que han elaborado. Si quieres, puedes seguir los ejemplos y crear una página sobre ellos. Pero si tienes tu propia ban-da, o si prefieres que tu sitio sea de cualquier otra cosa, ¡adelante! Sumérgete en la programación y que no te dé miedo experimentar. Si algo no te sale a la primera, no desesperes: revisa el código tranquilamente e intenta averiguar qué falla, algo que los programadores llaman depurar.

¡Sigue leyendo para saber cómo transformar el mapa del sitio de Holly en un sitio de verdad!

Esboza un mapa para el sitio que vas a crear. Aquí tienes algunas ideas por si

no quieres hacerlo de los Nanonautas:

Tus mascotas

Tus videojuegos favoritos

Tus amigos del colegio

Tus aficiones

Cosas que hacer en tu ciudad

QUE’ HACER despuE’ s

Todas las páginas que vas a crear con ayuda de este libro están en línea. Pue-des trabajar al mismo tiempo que los Nanonautas y copiar su código para aho-rrar tiempo. Para saber más, ve a http://nanotips.es/ejemplos.

CONSEJO

¡Manos a la obra! Éste sería el có-digo para una página sencilla:

1. Escribe este código en un editor de texto plano, como Bloc de notas (Windows) o GEdit (Ubuntu), o en un editor de códi-go, como Brackets, Notepad++ o Atom. Si no sabes cómo hacer-lo, ve a http://nanotips.es/texto.

2. Ahora, crea una car-peta en tu ordenador lla-mada nanonautas y guar-da el código con el nom-bre nosotros.html.

No utilices procesadores de textos como Microsoft Word o LibreOffice para editar las páginas.

nosotros.html es el nombre del archi-vo de la página. La parte .html es la ex-tensión del archivo. Esto le dice a los diferentes programas de tu ordenador que nosotros.html es una página web.

A veces, en Windows, las extensiones de los archivos están ocultas, por lo que sólo se ve nosotros, y no nosotros.html. Esto puede ser confuso, así que asegúra-te de que sean visibles. Si no sabes cómo hacerlo, ve a http://nanotips.es/archivos.

CONSEJO

CONSEJO

<!DOCTYPE html>

<html>

<head>

<title>Nosotros</title>

</head>

<body>

<h1>Nosotros</h1>

<p>Somos los Nanonautas:</p>

<p>Holly, Dervla, Daniel y Sam.</p>

</body>

</html>

nanonautas

nosotros.html

indice.html - atom://.atom/stylesheet

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <title>Nosotros</title>

5 </head>

6 <body>

7 <h1>Nosotros</h1>

8 <p>Somos los Nanonautas:</p>

9 <p>Holly, Dervla, Daniel y Sam.</p>

10 </body>

11 </html>

12

hojaestilo indice.html

/Escritorio/indice.html LF UTF-8 HTML

Cuando crees un sitio web, necesitarás dos programas diferentes:

Un editor de texto plano o uno de código, para escribir el código de la página.

Un navegador web, para visualizar el resultado.

Al principio puede parecer confuso, ¡pero enseguida te acostumbrarás!

4. Ahora tienes el mismo archivo abierto en el navegador y en el editor. Acomoda las ventanas de forma que veas ambas cosas a la vez.

En el editor, sustituye los nombres por los de tus amigos y el tuyo. También puedes cambiar el de la banda. De esta forma, en vez de «Holly, Dervla, Daniel y Sam» pondrá «Anna, Ali, Zeke y Zoe». Para sustituir el texto, haz clic en el editor y escri-be el nuevo. No cambies las etiquetas —lo que hay entre los símbolos de menor que y mayor que, como <h1> y <p>—, sólo lo que hay dentro.

3. El código le indica a un navegador web, como Chrome o Firefox, lo que hay en la pági-na web. Este tipo de código se conoce como HTML, siglas de hypertext markup language (lenguaje de marcado de hipertexto).

Vamos a abrir el archivo en el navegador: en vez del código, verás la página web como se supone que debe verse. Por lo general, basta con hacer clic o doble clic en el archivo. Si no lo consigues, ve a http://nanotips.es/abrir.

CONSEJO

Nosotros

Somos los Nanonautas:

Holly, Dervla, Daniel y Sam.

Ahora vamos a cambiar el aspecto de la página. Para ello crearemos una hoja de estilo. Ésta indica el as-pecto que debería tener la página. ¿Debería el fondo ser blanco, azul o verde? ¿Tiene el texto el tamaño adecuado? ¿Cambian de color los enlaces cuando se pasa el puntero por encima?

La hoja de estilo es el lugar donde se almacena esta información, y se guarda separada del archivo .html para poder cambiar el esquema de colores de la página sin necesidad de modificar el código HTML.

1. La hoja de estilo estará en un archivo nuevo lla-mado hoja-estilo.css. Observa que su exten-sión es .css, no .html. (En este libro, las hojas de estilo son naranjas para que sea más fácil ubicar-las.) Para tenerlo todo ordenado, guardamos la hoja de estilo en una carpeta propia a la que llama-remos css y que estará dentro de la carpeta na-nonautas.

2. Escribe el código de la caja naranja y guárdalo como hoja-estilo.css en la carpeta css.

3. Tienes que añadir una línea extra en el HTML (abajo, en negrita) para vincular la hoja de estilo a la página web.

4. Esta línea vincula la página web a la hoja de estilo hoja-estilo.css.

Ésta se encuentra en la carpeta css (¡a eso se refiere css/hoja-estilo.css!). Se trata de la hoja de estilo que acabas de crear.

Para ver el resultado, tienes que volver a car-gar la página, y para eso hay que hacer clic en el símbolo «Actuali-zar» que hay en la ba-rra de herramientas.

body {

font-family: sans-serif;

}

<!DOCTYPE html>

<html>

<head>

<title>Nosotros</title>

<link type="text/css" rel="stylesheet" href="css/hoja-estilo.css"/>

</head>

<body>

<h1>Nosotros</h1>

<p>Somos los Nanonautas:</p>

<p>Holly, Dervla, Daniel y Sam.</p>

</body>

</html>

nanonautas

nosotros.html

css

hoja-estilo.css

5. Después de actualizar, la página tendrá un aspecto ligeramente diferente. Esto se debe a que se ha usado una fuente sin serifa: eso es lo que hace font-family: sans-serif; en la hoja de estilo.

Ejemplo sin serifa

Ejemplo con serifa

Nosotros

Nosotros

Somos los Nanonautas:

Holly, Dervla, Daniel y Sam.

Somos los Nanonautas:

Holly, Dervla, Daniel y Sam.

Introduce más párrafos de texto. Los párrafos van entre las etiquetas <p> y </p>, como se ve a continuación:

<p>Estoy aprendiendo a hacer un sitio web para mi Dojo Nano.</p>

<p> es una etiqueta de inicio y </p> una de cierre. ¿Ves la diferencia?

Ahora ya sabes que una página web es simplemente texto escrito en un archivo de texto. Las etiquetas establecen el aspecto que dicho texto tendrá en la página web. ¿Qué pasa si usas las etiquetas h1 o h2 en vez de las p? ¿Y qué pasa si pones una palabra acotada por strong?

Ejemplo: <p>Me llamo <strong>Sam</strong>.</p>

QUE’ HACER despuE’ s

Algunos procesadores de texto con-vierten las comillas rectas ("…") en co-millas tipográficas (“…”) automática-mente. Si esto pasa, ¡el código fallará! Usa siempre un editor de texto plano.

Si quieres saber más sobre los edi-tores de código, ve a http://nanotips.es/codigo.

Editor de código. Programa que te permite editar el código HTML de una página web. No hace falta usar un editor determi-nado —el Bloc de notas valdría—, pero los editores de código facilitan la tarea, porque colorean las marcas de HTML, entre otras útiles funciones.

Editar. Cuando haces cambios en una página web, la editas.

Archivo. Cada vez que guardas algo en tu ordenador o en Internet, se almacena como un archivo. Éste puede contener cualquier tipo de información: páginas web, imágenes, canciones, documentos PDF... ¡Lo que sea! Pero los programadores llaman a todas estas cosas archivos.

Nombre de archivo. Los archivos siempre tienen un nombre. En el caso de la página «Nosotros», el nombre es nosotros.html. Normalmente, los nombres de archivo terminan con un punto seguido de tres o cuatro letras (como .jpg, .pdf o .html). Esto es la extensión del archivo y le dice al ordenador de qué tipo es. Por ejemplo, un archivo que termina en .jpg es un archivo de imagen.

Carpeta. Cuando guardas un archivo, éste se almacena en una carpeta: una ubicación de almacena-miento determinada dentro de un equipo. Las carpetas pueden contener otras carpetas. Para llegar a ellas hace falta su ruta. Por ejemplo, C:/nanonautas/imagenes muestra la ruta a la carpeta imágenes que hay en la carpeta nanonautas de la unidad C: del ordenador.

Navegador web. Programas que te permiten navegar por Internet, como Chrome, Firefox, Internet Ex-plorer, Opera o Safari, entre otros. Para poder ver una página web hay que tener un navegador.

Etiquetas. Son marcadores especiales usados en la programación en HTML, y están acotados por los símbolos de menor que y mayor que, como en estos ejemplos: <p>, </p>, <h1>, </h1> o <br/>.

CONSEJO

EN NUESTRA WEB

VOCABULARIO

La página «Nosotros» ofrece una descripción de la banda, pero estaría bien que además hubiera alguna foto. Para poder mostrar una imagen hay que decirle al navegador dónde encontrarla, y para saber dónde buscar, el navegador necesita 1) el nombre de la carpeta en la que está la foto y 2) el nombre del archi-vo de la imagen. Pongamos que tienes una imagen llamada nanonautas.jpg.

Puedes añadir una imagen a la página incluyendo esta línea de código:

Éste es el aspecto del código modificado:

Después de guardar el cambio y actualizar en el navega-dor, su aspecto es éste:

<p><img src="imagenes/nanonautas.jpg" alt="Imagen de los Nanonautas"/></p>

<!DOCTYPE html>

<html>

<head>

<title>Nosotros</title>

<link type="text/css" rel="stylesheet" href="css/hoja-estilo.css"/>

</head>

<body>

<h1>Nosotros</h1>

<p><img

src="imagenes/nanonautas.jpg"

alt="Imagen de los Nanonautas"/></p>

<p>Somos los Nanonautas:</p>

<p>Holly, Dervla, Daniel y Sam.</p>

</body>

</html>

Nosotros

Somos los Nanonautas:

Holly, Dervla, Daniel y Sam.

src="imagenes/nanonautas.jpg" es un atributo. Los atributos siempre siguen el mismo patrón: el nombre del atributo seguido de un signo igual sin espacios más un valor del atributo, todo acotado por co-millas rectas. Por ejemplo:

De la misma forma, el atributo alt contiene un texto que aparece si no se puede visualizar la imagen. Esto es útil, por ejemplo, cuando se adapta una página para personas ciegas.

Ahora que ya sabes cómo añadir una imagen, añade una a tu página nosotros.html. Para ello, copia la imagen en la carpeta imagenes y agrega el código que hará que se visualice. Por ejemplo, si la imagen procediera de una cámara digital y se llamara DSC03730.jpg, podrías agregar el siguiente código:

<p><img src="imagenes/DSC03730.jpg"

alt=”Holly tocando la guitarra”/></p>

Si el archivo nanonautas.jpg no estuviera en la carpeta imagenes, el navegador mostraría un símbolo similar a éste:

CONSEJO

Observa el código más detenidamente:

<p><img src="imagenes/nanonautas.jpg" alt="Imagen de los Nanonautas"/></p>

La parte realmente importante aquí es src="imagenes/nanonautas.jpg".

Esto le dice al navegador que busque en imagenes un archivo con el nombre nanonautas.jpg. El na-vegador busca la carpeta imagenes en el mis-mo lugar en el que está guardada la página web. Por lo tanto, si te fijas en los archivos de la carpeta nanonautas, además del archivo nosotros.html, verás la carpeta imagenes, en cuyo interior está el archivo nanonautas.jpg.

=

"

src

"

nanonautas

nosotros.html

css

imagenes

nanonautas.jpg

Signo igual

Comillas rectas de apertura

Valor del atributo

Comillas rectas de cierre

Nombre del atributo

imagenes/nanonautas.jpg

HAZ UNA

PRUEBA!

Añade alguna foto tuya a la pági-na. ¡Puedes hacerte unos selfis!

QUE’ HACER despuE’ s