APRENDE A

PROGRAMAR

GUÍA VISUAL DE
PROGRAMACIÓN

HTC p1-7 + p34-35 recovered.indd 1 02/11/15 06:19


Título original: H
 ow to Code. A step-by-step guide to
computer coding
© 2015, QED Publishing, parte de The Quarto Group
© 2016 de la edición española: Grupo Edebé, Paseo de
San Juan Bosco, 62.
08017 Barcelona. España.
© 2015 de la traducción: Raquel Solà
Autor: Max Wainewright
Ilustraciones y diseño: Mike Henson
Directora de Publicaciones Generales: Reina Duarte
Editora: Marta Sans
Impreso en China-Printed in China
ISBN: 978-84-683-2701-3
Depósito legal: B. 18651-2015
Atención al cliente: 902 44 44 41
contacta@edebe.net
www.edebe.com
HTC p1-7 + p34-35 recovered.indd 2-3
ÍN D IC E
APARTADO 1 5
Introducción 8
D a r i n st r u c c i o n e s 10
Pa s o a p a s o 12
M e n s a j e s c o d i f i c a d o s 14
D a r v u e l t a s 16
LOGO
A p r e n d e L o g o 18
F o r m a s L o g o 20
SCRATCH
I n i c i a c i ó n a S c ra t c h 22
Pe n d o w n 24
Pr e s i o n a r t e c l a 26
E n t ra d a s y d i r e c c i o n e s 28
D i b u j a r c o n e n t ra d a s 30
D e p u ra r 32
R e s p u e st a s a p a r t a d o 1 34
APARTADO 2 37
Introducción 40
LOGO
Bucles 42
Pa t r o n e s c o n b u c l e s 44
SCRATCH
B u c l e s c o n S c ra t c h 46
B u c l e s i n f i n i t o s 48
R e p e t i r h a st a ... 50
R e p e t i r h a st a a l c a n z a r 52
A ñ a d i r s o n i d o 54
E f e c t o s d e s o n i d o 56
Va r i a b l e s 58
G u a r d a r p u n t u a c i ó n 60
C o n t a r c l i c s 62
D e p u ra r 64
R e s p u e st a s a p a r t a d o 2 66
APARTADO 3 69
Introducción 72
SCRATCH
I n st r u c c i o n e s « i f» 74
C o n c u r s o 76
I n st r u c c i o n e s « e l s e » 78
Si tocas el sprite 80
PYTHON
I n i c i a c i ó n a P y t h o n 82
E s c r i b i r e n P y t h o n 84
Pr e g u n t a s c o n P y t h o n 86
B u c l e s c o n P y t h o n 88
G rá f i c o s c o n P y t h o n 90
A l e a t o r i o c o n P y t h o n 92
SCRATCH
A r t e a l e a t o r i o 94
D e p u ra r 96
R e s p u e st a s a p a r t a d o 3 98
APARTADO 4 10 1
Introducción 10 4
HTML
C r e a r p á g i n a s w e b 10 6
U s a r H T M L 10 8
D i r e c c i o n e s y e n l a c e s 1 10
M u c h o s e n l a c e s 112
¡C o l o r é a l o! 114
JAVASCRIPT
A ñ a d i r J a va S c r i p t 1 16
B u c l e s e n J a va S c r i p t 1 18
F u n c i o n e s e n J a va S c r i p t 120
F u n c i o n e s J S c o n H T M L 122
Pr o y e c t o d e m a s c o t a s 12 4
C o m p a r t i r t u s i t i o w e b 126
D e p u ra r 128
R e s p u e st a s a p a r t a d o 4 130
I n f o r m a c i ó n s o b r e r e c u r s o s 131
GLOSARIO 132
02/11/15 06:19
 INFO R M ATIO
RCES
ON RES OU
CHAP T E R 1
RM ACIÓN Here’s how you can get hold of Scratch and Python so you

INFO ECURSOS
can start experimenting.

APARTADO 1
SOBRE R O 1
SCRATCH

TAD
You can use Scratch on a PC or Mac by opening your web

PAR
browser and going to: http://scratch.mit.edu – then click

A
‘Create’ or ‘Try it out’.
There is a very similar website called Snap that also works on
iPads. It is available here: http://snap.berkeley.edu/run
If you want to run Scratch without using the internet, you can
Aquí encontraréis cómo conseguir Logo, Scratch y Pyton para
empezar a experimentar. Todos estos recursos son gratuitos.
INSTALA PYTHON
download it from here: EN UN PC
http://scratch.mit.edu/scratch2download/
1 Ir a: www.python.org.
LOGO INSTALLING
2 PYTHON (descargar)
Clica «Downloads» ON A PC y luego elige
Logo fue diseñado originalmente por Seymour Papert hace 1 «Download Python» (versión 3.5 o superior).
Go to: www.python.org.
unos 40 años. Existen varias versiones del programa. 32 Haz
Clickdoble clic en el
‘Downloads’ archivo
then choosedescargado, y luego sigue
‘Download Python’
Si usas un PC puedes bajarte una versión gratuita de Logo en: las instrucciones
(version de la pantalla.
3.4 or higher).

www.softronix.com/logo.html 3
4 Clica el botón
Double-click thede
downloaded file, thenclica
inicio «Start», follow the
«Python», luego
instructions on screen.
clica «IDLE». (En Windows 8 ve a la parte superior
También puedes empezar a usar Logo directamente. Abre tu 4 derecha
Click the ‘Start’ button, click ‘Python’, then clickluego teclea
de la pantalla y clica «Search»,
navegador web y visita: ‘IDLE’. (In Windows 8, go to the top right of the
«idle» y clica el programa para ejecutarlo.)
http://turtleacademy.com/playground/en screen and click ‘Search’, then type in ‘idle’ and
or www.calormen.com/jslogo/ click the program to run it.)
INSTALAR PYTHON EN UN MAC
SCRATCH INSTALLING
1 PYTHON ON A MAC
Ir a: www.python.org.
1 Go to: www.python.org.
Puedes usar Scratch en un PC o un Mac. Abre tu navegador 2 Clica en «Downloads» (descargar) y luego elige
web y visita: http://scratch.mit.edu – y luego haz clic en 2 «Download
Click ‘Downloads’ then choose
Python» ‘Download
(versión Python’
3.5 o superior).
(version 3.4 or higher).
«Crear» (Create) o «Pruébalo» (Try it out). 3 3 Haz doble clic
Double-click theen el archivofile,
downloaded descargado, y luego sigue
then follow the
Hay una página web muy parecida llamada «Snap» que las instrucciones
instructions de la pantalla.
on screen.
también funciona en iPads. Está disponible en: 4 4 Para empezar a usarquickly,
Python,clickhaz clic en «Spotlight»
Internet safety
To start using Python ‘Spotlight’
http://snap.berkeley.edu/run (at the
(en la top rightsuperior
parte
File
New
of the screen).
Edit
de la pantalla).
File
New
Edit

New

Si quieres ejecutar Scratch sin usar la web entonces puedes 5 5 Teclea

Type ‘idle’ Spotlight idle
«idle» Spotlight idle
descargarlo en: then press ‘Enter’. Children should be supervised when using the
y luego presiona «Enter».
internet, particularly when using an unfamiliar
File Edit

http://scratch.mit.edu/scratch2download/ New

Making an icon for Python on a Mac (this will make it

New

Hacer
easierun icono para Python en un Mac (así será más fácil
to find):
website for the first time.
de 1encontrar): The publisher and author cannot be held
Open ‘Finder’.
responsible for the content of the websites
1 2 Abrir
Under«Finder».
the ‘Go’ menu, click on ‘Applications’.
referred to in this book.
2 Bajo el menú
3 Scroll down «Go», clica
to Python and click «Applications».
en on it.
4 Drag the IDLE
3 Desplázate hacia abajo a Python ybar)
icon to the ‘dock’ (menu at the
clica encima.
bottom or side of the screen.
4 Arrastra el icono IDLE hacia la barra del menú «Dock»

Seguridad en en la parte inferior o en el lateral de la pantalla.

internet
Los niños deben usar internet bajo la supervisión
de un adulto, en particular cuando se usa por
primera vez un sitio web desconocido.
Los editores y el autor no se hacen responsables
del contenido de los sitios web que se han
referenciado en este libro.

HTC p1-7 + p34-35 recovered.indd 5 02/11/15 06:19

 ÍNDICE:: APARTADO 1

In t r od u c c ió n 8
D a r i n st r u c c io ne s 10
Pa s o a p a s o 12
M e n s a je s c od i f ic a d o s 14
D a r v u e l t a s 16
LOGO
A p r e nd e L o g o 18
F or m a s L o g o 20
SCRATCH
Inic i a c ió n a S c ra t c h 22
Pe n d o w n 24
Pr e s io n a r t e c l a 26
E n t ra d a s y di r e c c io ne s 28
Di bu j a r c o n e n t ra d a s 30
D e p u ra r 32
R e s p u e st a s a p a r t a d o 1 34

Enter

HTC p1-7 + p34-35 recovered.indd 6-7 02/11/15 06:19

 RODUCCIÓN Dentro de tu ordenador Trabajamos en la

T
memoria del Los programas se leen

IN
ordenador. Un en la memoria y se
ordenador necesita convierten en sencillas
memoria para instrucciones

Entrada guardar codificadas.

información.

El ratón, el teclado y la pantalla táctil son

«dispositivos de entrada» (input). Permiten
Este libro te enseñará a programar o a aprender introducir información en un ordenador o
a decir a los ordenadores qué hacer. En primer tableta.
lugar, os presentaré a nuestra amiga robot Ada,
que se llama así por la primera programadora de
ordenadores del mundo: Ada Lovelace. Ent
rad Los dispositivos de
a
entrada se usan para
escribir los
programas o cambiar
d Bienvenido al lo que hace un
procesador, el programa.
R
k

j
Entrada 2 tz 3o cerebro del
d o g ordenador.
tj 3o Ro

d k d k
j
o
2 z g
j j R o

d
Entrada p
2 1
2 zzj j gg ooj oo t 3

dd

R
d
Procesador

Conoce a Ada
Ada Lovelace (1815-1852) nació en Inglaterra hace
200 años. Descubrió que una máquina podría resolver
problemas si se le daban instrucciones paso a paso:
un programa. Sin embargo, ¡en aquella época aún no
había ordenadores para demostrar sus ideas!
Salida
La impresora, la pantalla y los altavoces
son «dispositivos de salida» (output).
Los dispositivos de salida son la forma
que tiene un ordenador de decirte cosas.

Salid
a

da
¿Qué es programar? Sali

Programar significa escribir una serie de palabras, o «código», que le

diga al ordenador qué debe hacer. Las palabras deben escribirse en un
Seguimos las
lenguaje especial que el ordenador entienda. Este apartado (apartado 1) instrucciones y
se centrará en dos lenguajes: Logo y Scratch. Todos los ordenadores
da damos al usuario
necesitan un programa que les diga qué hacer. Portátiles, tabletas, Sali nuestros
teléfonos y ordenadores de sobremesa, todos necesitan programas para resultados con los
ser útiles. dispositivos de
salida.

8 9

HTC p8-33.indd 8-9 29/10/15 12:07

 TRUCCIONES
DAR INS Choco
Flakes
Robot artista
Aquí tienes otro juego para practicar cómo
dar instrucciones.
Necesitas:
Siéntate en una mesa junto a tu compañero. Uno de vosotros será el robot artista
y el otro, el programador. El programador dará instrucciones al robot para que dibuje
sobre el papel una de las imágenes que hay más abajo. Esta vez el robot solo moverá
el lápiz. El compañero robot solo podrá hacer lo que diga el programador. Podréis usar
estas órdenes:
1 Un compañero
Hacer el desayuno 2 Un papel
Imagina que estás programando a nuestra amiga robot 3 Un lápiz Mover arriba
Ada para que te haga el desayuno. ¿Puedes poner estas
Hay muchas formas de decirle a la gente instrucciones en el orden correcto? Mover izquierda ¡ALTO! Mover derecha
que haga cosas. Si alguien dice: «enciende
las luces» o «está oscuro, enciende ese
Mover abajo
chisme», sabes qué hacer. Pero, para
programar un ordenador, debemos darle A Abrir la caja de cereales.
las palabras exactas, correctas y
ordenadas. Estas palabras que dicen lo que B Poner leche en los cereales.
tienen que hacer los ordenadores y las
personas se denominan instrucciones. C Alzar la tapa del cartón de leche.
1 2
D Echar cereales en el cuenco.

E Sacar un cuenco del armario.

Conviértete en un robot ¡Instr

uc
incorr ción
humano ecta!

¡Conviértete en un robot humano! Te ayudará a pensar en cómo

ucción
dar las instrucciones precisas. Necesitarás un compañero para ¡Instr cta! Cuando sepas jugar bien a
e
jugar a este juego. inco r
r
este juego, intenta que el robot
juegue con los ojos cerrados.
Uno de vosotros jugará a ser un robot. El otro será el programador 3 ¡Cuidado, no pintes la mesa!
y le dará instrucciones al robot. Este jugador tendrá que darle
instrucciones al robot para que camine hacia la puerta. Las
4
únicas órdenes que puede darle son: Haz que el robot dibuje algo más.

Avanzar.

Girar a la izquierda.

Girar a la derecha.
Palabra
Alto. Progr
clave
ama : ins
que le
dicen trucciones
o robo al ordenado
t qué h r
acer.

10 11

HTC p8-33.indd 10-11 29/10/15 12:07

 PASO
PASO A De viaje Divertido juego de algoritmos Usa una moneda
o un muñequito
Para este juego solo necesitarás un dado y una ficha. Inténtalo: como ficha.
Aquí está nuestro problema: Ada tiene que viajar
del cuadrado número 3 al número 4. Averigua los 1 Lanza el dado una vez. Pon la ficha en el número
pasos que tendrá que dar.
que saques.
2 Lanza el dado otra vez (si sacas el mismo número, tira de nuevo).
3 Será el número que tienes que alcanzar.
Los programas de ordenador
necesitan instrucciones para 4 Escribe los pasos que tienes que dar para llegar allí.
hacer las cosas. A veces
necesitamos un programa para
solucionar un problema concreto.
Para solucionar este problema a
continuación, tenemos que planear
los pasos que dará el programa:
4 1
estos pasos se llaman algoritmo.

3
2
Para viajar de  3   a  4 ,  Ada tiene que dar los siguientes pasos:

ARRIBA DERECHA ARRIBA DERECHA DERECHA ABAJO DERECHA

En la tabla de la página siguiente, empieza en el  1   y da los siguientes pasos:

¿Dónde terminarás? La solución está en la página 34.

ABAJO ABAJO ABAJO ABAJO ABAJO IZQUIERDA 6

Palabra
Si quieres, puedes escribir letras en lugar de dibujar flechitas. Puedes escribir right,
right, up, down con sus iniciales en inglés R R U D. (Right, Right, Up, Down).
Algor
itm
clave
tiene q o : son los
ue da paso
solucio r un program s que
nar un a
1 Escribe un algoritmo que explique cómo ir proble para
de  6  a  1  
2 Ahora intenta hacerlo de  5  a  6  
ma.
4
3 Viaja de  2  a  4  
Ahora comprueba tus respuestas en la página 34.
1. R U
U ...…
5 3
2.
12 13

HTC p8-33.indd 12-13 29/10/15 12:07

 ODIFICADOS
MENSA JES C ENVIAR COMANDOS Juego de palabras
Ahora escribiremos los comandos o instrucciones que deletrearán estas palabras:
¡Hay
respu más de un
esta
corre a
cta!

R5 significa moverse a
la derecha 5 casillas.
1 2 3 4 5
El punto rojo te dice
dónde empezar.

Hagamos que nuestras instrucciones

sean más útiles usando números que
nos indiquen lo lejos que tenemos
que movernos en cada dirección.
Las órdenes especiales como estas
se llaman comados, aunque también 1 2 3 4 5
pueden llamarse instrucciones. 6 7 8 9

Veamos qué han dibujado R3 U3 L3 D3. Recuerda que

Ejemplo de comandos
R (Right) es derecha. L (Left) es izquierda. U (Up) es arriba.
D (Down) es abajo. Las respuestas en la pág. 34.
Tienes que empezar en el punto rojo:
U4 significa:  mover arriba 4.
L3 significa:  mover izquierda 3. L3
D7 significa:  mover abajo 7.
R4 significa:  mover derecha 4.
Palab
ra cla 1. L3 D
3 U2 L3
D3 U3
Com
orde
and o v
n par o instru e 2
a hac cció
conc er una ta n :
reta. rea

R3
¡Huy!
Demasiado
lejos.

¡Díselo tú!
Escribe las instrucciones o comandos para deletrear tu nombre o 2 Escribe las instrucciones para dibujar
iniciales. Necesitas un papel cuadriculado y un lápiz. tus letras.
1 Dibuja tu nombre en un papel cuadriculado. Convierte 3 Da las instrucciones a un compañero
las líneas diagonales en verticales y horizontales (como para ver si sabe seguirlas.
en V, W o M).

14 15

HTC p8-33.indd 14-15 29/10/15 12:07

 ELTAS
DAR VU Familiarízate
Dile que gire
Intentemos este programa:
Avanzar 25 (recuerda que son
Avanzar 25
Derecha 90

con los grados casillas)

Girar derecha 90 (recuerda que
Los giros que da un robot se miden en grados. Los grados para girar son grados) Avanzar 20
pueden ser difíciles de comprender, pero si conocemos lo Avanzar 20
básico podremos hacer que tu robot dé vueltas. Un ángulo Girar derecha 90
Ahora aprenderemos a hacer que recto tiene 90 grados. Una vuelta completa, 360 grados.
Cuanto mayor sea el número, mayor será la vuelta. Avanzar 25 Avanzar 25
un robot dé vueltas. Tenemos
que usar tres instrucciones: Girar izquierda 90
Izquierda 90 Derecha 90
avanzar, girar izquierda o girar Avanzar 10
derecha, y así consecutivamente. Si te haces un lío con la derecha y la
izquierda, intenta seguir a la tortuga
dando la vuelta a la página para ver Avanzar 10
el camino que sigue.

Los grados se miden de 0 a 360. Una vuelta de 360

grados completa un círculo. Escribir letras Píxeles
Ahora intenta averiguar las instrucciones para hacer estas letras. Mira la La distancia que los robots
solución en la página 34. avanzan se mide en pasos.
270 Si el robot está dibujado
en una pantalla (a veces
1 2 llamado tortuga), los
pasos se suelen medir en
píxeles. Un píxel es un
minúsculo «elemento de
una imagen» o punto en la
pantalla. El recuadro de
360 abajo tiene 7 píxeles
180 0 de ancho por 7 de alto.

Girar derecha 90 Girar izquierda 90 3 4

90 90

0 0
Estos son ejemplos de
instrucciones sencillas que harán
que tu robot gire a derecha e
90 zar 20
izquierda. 1. Avan ha 90
De c 20
r e
Avanzar

16

HTC p8-33.indd 16-17 29/10/15 12:07

 ENDER LOGO
APR Instrucciones básicas
La pantalla de Logo 1
Escribe fd 50 para
Antes de aprender algunas instrucciones, veamos qué aparece avanzar 50 pasos.
en la pantalla de Logo. En el ejemplo de abajo, ya hemos
escrito tres instrucciones en la ventana de trabajo. Presiona
Vamos a aprender a programar «Enter» después de cada instrucción o escribe una serie de
con Logo, uno de los lenguajes de instrucciones separadas por espacios y luego presiona «Enter»
ordenador más simples. ¡Usar para ver el resultado.
Logo es una forma fantástica de Pulsa «Run» para
poner instrucciones básicas en probar tu
acción! programa.

Esta es la ventana
de gráficos.
Run 2
fd 50
Cada versión de Logo es ligeramente
diferente. Algunas tienen botones «Run»
y otras no.

Si tu versión no tiene, entonces presiona

«Enter» después de escribir una instrucción. Escribe lt 90 y clica
en «Run» para girar
Si solo hay una pequeña ventana de trabajo,
a la izquierda.
escribe las instrucciones una a una y luego
presiona «Enter», o haz clic en «Run» para ejecutarlas
Haz clic en
una por una. Esta es la

También puedes escribir varias instrucciones en una

ventana de
trabajo. Escribe
«Run» para
probar tu 3 Run
línea con un espacio entre cada instrucción y luego tu programa
programa o
pulsa la tecla
lt 90
pulsa «Enter» o haz clic en «Run» para probarlas. aquí.
«Enter».

Run
Vuelve a la página 4 si
fd 50
necesitas ayuda para
descargar Logo o rt 90
encontrar un sitio web
donde usarlo. fd 50 Escribe fd 50 y pulsa
«Run» para avanzar
otros 50 pasos.
Run
fd 50
fd = avanzar
rt = derecha
lt = izquierda

18 19

HTC p8-33.indd 18-19 29/10/15 12:08

 S LOGO
FORMA Practica formas Prueba esto
¿Qué dibujan estos programas?
Escribe estos
programas para 1 2 3 S u p e r o r d e n a d o r 7000
practicar
lt 90 fd 100 fd 50
programación con
Logo: fd 50 rt 90 rt 90 01011101001001
fd 60 rt 90 fd 100 fd 50 11010010010101
01011101001001
rt 90 fd 100 rt 90 lt 90 11010010010101
Ahora que ya entiendes fd 60 rt 90 fd 100 fd 50 11010010010101
cómo funciona Logo, intenta 1101001001010
rt 90 fd 50 rt 90 rt 90
dibujar formas diferentes.
Experimenta con lo que fd 60 Escribe cs
fd 100 fd 50
cuando tengas
puedes crear: ¡ya estás rt 90
programando!
que borrar la rt 90
pantalla.
fd 60 fd 100
rt 90
fd 100

fd 50 fd 100

lt 90 rt 90
fd 50
¡Haz formas! ¡Sorprendente!

fd 100 Ahora intenta dibujar estas formas con Logo:

lt 90 lt 90

fd 50 lt 90 4 5
lt 90 fd 100

fd 100

fd 25 ¡Ooohh!

rt 90
fd 25
lt 90
lt 90 significa fd 25 6 7 ¡Aaahh!
gira a la
izquierda 90
rt 90 Escribe seth 0
para que la
grados. fd 25 tortuga apunte
hacia arriba de
nuevo.

¡Experim Ver página 34 para respuestas sugeridas.

¡Veamos enta! ¡Hay más de una respuesta correcta!
qué dib
con Logo ujas
!

20 21

HTC p8-33.indd 20-21 29/10/15 12:08