Vista previa del material en texto
GUÍA VISUAL DE PROGRAMACIÓN APRENDE A PROGRAMAR HTC p1-7 + p34-35 recovered.indd 1 02/11/15 06:19 Í N D I C E 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 s t a . . . 50 R e p e t i r h a s t a a l c a n z a r 52 A ñ a d i r s o n i d o 5 4 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 r a r 6 4 R e s p u e s t a s a p a r t a d o 2 66 APARTADO 3 69 I n t r o d u c c i ó n 72 I n s t r u c c i o n e s « i f » 74 C o n c u r s o 76 I n s t r u c c i o n e s « e l s e » 78 S i t o c a s e l s p r i t e 80 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 8 4 P r 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 A r t e a l e a t o r i o 94 D e p u r a r 96 R e s p u e s t a s a p a r t a d o 3 98 APARTADO 4 10 1 I n t r o d u c c i ó n 104 C r e a r p á g i n a s w e b 106 U s a r H T M L 108 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 1 12 ¡C o l o r é a l o ! 1 1 4 A ñ a d i r J a v a S c r i p t 1 16 B u c l e s e n J a v a S c r i p t 1 18 F u n c i o n e s e n J a v a 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 P r o y e c t o d e m a s c o t a s 124 C o m p a r t i r t u s i t i o w e b 126 D e p u r a r 128 R e s p u e s t 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 13 1 GLOSARIO 132 APARTADO 1 5 I n t r o d u c c i ó n 8 D a r i n s t r u c c i o n e s 10 P a 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 1 4 D a r v u e l t a s 16 A p r e n d e L o g o 18 F o r m a s L o g o 20 I n i c i a c i ó n a S c r a t c h 22 P e n d o w n 24 P r 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 r a d a s 30 D e p u r a r 32 R e s p u e s t a s a p a r t a d o 1 3 4 APARTADO 2 37 I n t r o d u c c i ó n 40 B u c l e s 42 P a t r o n e s c o n b u c l e s 44 LOGO LOGO SCRATCH SCRATCH SCRATCH PYTHON HTML JAVASCRIPT SCRATCH Título original: How 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 02/11/15 06:19 APARTADO 1 APARTADO 1 INFORMACIÓN SOBRE RECURSOS Aquí encontraréis cómo conseguir Logo, Scratch y Pyton para empezar a experimentar. Todos estos recursos son gratuitos. LOGO Logo fue diseñado originalmente por Seymour Papert hace unos 40 años. Existen varias versiones del programa. Si usas un PC puedes bajarte una versión gratuita de Logo en: www.softronix.com/logo.html También puedes empezar a usar Logo directamente. Abre tu navegador web y visita: http://turtleacademy.com/playground/en or www.calormen.com/jslogo/ SCRATCH Puedes usar Scratch en un PC o un Mac. Abre tu navegador web y visita: http://scratch.mit.edu – y luego haz clic en «Crear» (Create) o «Pruébalo» (Try it out). Hay una página web muy parecida llamada «Snap» que también funciona en iPads. Está disponible en: http://snap.berkeley.edu/run Si quieres ejecutar Scratch sin usar la web entonces puedes descargarlo en: http://scratch.mit.edu/scratch2download/ INSTALA PYTHON EN UN PC 1 Ir a: www.python.org. 2 Clica «Downloads» (descargar) y luego elige «Download Python» (versión 3.5 o superior). 3 Haz doble clic en el archivo descargado, y luego sigue las instrucciones de la pantalla. 4 Clica el botón de inicio «Start», clica «Python», luego clica «IDLE». (En Windows 8 ve a la parte superior derecha de la pantalla y clica «Search», luego teclea «idle» y clica el programa para ejecutarlo.) INSTALAR PYTHON EN UN MAC 1 Ir a: www.python.org. 2 Clica en «Downloads» (descargar) y luego elige «Download Python» (versión 3.5 o superior). 3 Haz doble clic en el archivo descargado, y luego sigue las instrucciones de la pantalla. 4 Para empezar a usar Python, haz clic en «Spotlight» (en la parte superior de la pantalla). 5 Teclea «idle» y luego presiona «Enter». Hacer un icono para Python en un Mac (así será más fácil de encontrar): 1 Abrir «Finder». 2 Bajo el menú «Go», clica en «Applications». 3 Desplázate hacia abajo a Python y clica encima. 4 Arrastra el icono IDLE hacia la barra del menú «Dock» en la parte inferior o en el lateral de la pantalla. CHAPTER 1 CHAPTER 1 INFORMATION ON RESOURCES Here’s how you can get hold of Scratch and Python so you can start experimenting. SCRATCH You can use Scratch on a PC or Mac by opening your web browser and going to: http://scratch.mit.edu – then click ‘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 download it from here: http://scratch.mit.edu/scratch2download/ INSTALLING PYTHON ON A PC 1 Go to: www.python.org. 2 Click ‘Downloads’ then choose ‘Download Python’ (version 3.4 or higher). 3 Double-click the downloaded file, then follow the instructions on screen. 4 Click the ‘Start’ button, click ‘Python’, then click ‘IDLE’. (In Windows 8, go to the top right of the screen and click ‘Search’, then type in ‘idle’ and click the program to run it.) INSTALLING PYTHON ON A MAC 1 Go to: www.python.org. 2 Click ‘Downloads’ then choose ‘Download Python’ (version 3.4 or higher). 3 Double-click the downloaded file, then follow the instructions on screen. 4 To start using Python quickly, click ‘Spotlight’ (at the top right of the screen). 5 Type ‘idle’ then press ‘Enter’. Making an icon for Python on a Mac (this will make it easier to find): 1 Open ‘Finder’. 2 Under the ‘Go’ menu, click on ‘Applications’. 3 Scroll down to Python and click on it. 4 Drag the IDLE icon to the ‘dock’ (menu bar) at the bottom or side of the screen. New File Edit New New File Edit New New File Edit Spotlight idle Internet safety Children should be supervised when using the internet, particularly when using an unfamiliar website for the first time. The publisher and author cannot be held responsible for the content of the websites referred to in this book. Spotlight idle Seguridad en 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. 4 HTC p1-7 + p34-35 recovered.indd 5 02/11/15 06:19 ÍNDICE: : APARTADO 1 I n t r o d u c c i ó n 8 D a r i n s t 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 1 4 D a r v u e l t a s 16 A p r e n d e L o g o 18 F o r m a s L o g o 20 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 s t a s a p a r t a d o 1 34 E n t e r LOGO SCRATCH HTC p1-7 + p34-35 recovered.indd 6-7 02/11/15 06:19 1 p t o R z2 3 o o d d k gj j R z2 o d d k gj j t o R z2 3 o o d d k gj j 222dd 11 oo zzzzzzzzzzzzzz ooooooo dd gggggggggggjjjjjjjjjjjj pp to Rz2 3oo d dkgj j RRRRRRRRR zzzzz22222222222222222222222222222222222222ddddddddddddddddddddddd RRRRRkjjjjjjjjjjjjjjjjjjjjjjj ooooooooRRRRRR jjj tttttttttttttjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj o333333333333333 dddddddddddd oooooooooooooooo jdddd zzzzzzzzzzdd oooo jjdddd RRRRRRRRRRRRRRkkkkkkkkkkkkkkkkkkkkkkkk ooooRRRRRRRRRooooooookkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk333333kkkkkkkkoooo 111 zzzzzzzz oo dd kkk ggggggggggggggggggggggggjjjjjjjjjj o RRRRRRRRRRRRRRRRRRRRggggggggggggggggg o dddddddddddddddddddddddddddd jjjjjjjjjj RRRRRRkkkkkkkkkkkjjjjjjjjjjjjjjjzzzzdddd oo RR 33 ddddddddd R dddddd RR kk 3333 ggggggggggggggggggggggddddjjjjjjjjjjj ddd oooooooo 8 INTRODUCCIÓN Este libro te enseñará a programar o a aprender a decir a los ordenadores qué hacer. En primer lugar, os presentaré a nuestra amiga robot Ada, que se llama así por la primera programadora de ordenadores del mundo: Ada Lovelace. ¿Qué es programar? Programar significa escribir una serie de palabras, o «código», que le diga al ordenador qué debe hacer. Las palabras deben escribirse en un lenguaje especial que el ordenador entienda. Este apartado (apartado 1) se centrará en dos lenguajes: Logo y Scratch. Todos los ordenadores necesitan un programa que les diga qué hacer. Portátiles, tabletas, teléfonos y ordenadores de sobremesa, todos necesitan programas para ser útiles. Entrada Entrada Entrada Salida Salida Salida Procesador Bienvenido al procesador, el cerebro del ordenador. Los dispositivos de entrada se usan para escribir los programas o cambiar lo que hace un programa. Seguimos las instrucciones y damos al usuario nuestros resultados con los dispositivos de salida. Entrada El ratón, el teclado y la pantalla táctil son «dispositivos de entrada» (input). Permiten introducir información en un ordenador o tableta. 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. Trabajamos en la memoria del ordenador. Un ordenador necesita memoria para guardar información. Dentro de tu ordenador 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! Los programas se leen en la memoria y se convierten en sencillas instrucciones codificadas. 9 HTC p8-33.indd 8-9 29/10/15 12:07 10 11 DAR INSTRUCCIONES Hay muchas formas de decirle a la gente que haga cosas. Si alguien dice: «enciende las luces» o «está oscuro, enciende ese chisme», sabes qué hacer. Pero, para programar un ordenador, debemos darle las palabras exactas, correctas y ordenadas. Estas palabras que dicen lo que tienen que hacer los ordenadores y las personas se denominan instrucciones. Hacer el desayuno Imagina que estás programando a nuestra amiga robot Ada para que te haga el desayuno. ¿Puedes poner estas instrucciones en el orden correcto? Robot artista Aquí tienes otro juego para practicar cómo dar instrucciones. Necesitas: 1 Un compañero 2 Un papel 3 Un lápiz 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: Cuando sepas jugar bien a este juego, intenta que el robot juegue con los ojos cerrados. ¡Cuidado, no pintes la mesa! Haz que el robot dibuje algo más. Conviértete en un robot humano ¡Conviértete en un robot humano! Te ayudará a pensar en cómo dar las instrucciones precisas. Necesitarás un compañero para jugar a este juego. Uno de vosotros jugará a ser un robot. El otro será el programador y le dará instrucciones al robot. Este jugador tendrá que darle instrucciones al robot para que camine hacia la puerta. Las únicas órdenes que puede darle son: A Abrir la caja de cereales. B Poner leche en los cereales. C Alzar la tapa del cartón de leche. D Echar cereales en el cuenco. E Sacar un cuenco del armario. Avanzar. Girar a la izquierda. Girar a la derecha. Alto. Mover arriba Mover izquierda Mover derecha Mover abajo ¡ALTO! 1 2 4 3 Palabra clavePrograma: instrucciones que le dicen al ordenador o robot qué hacer. ¡Instrucción incorrecta! ¡Instr ucción incorr ecta! Choco Flakes HTC p8-33.indd 10-11 29/10/15 12:07 1312 Los programas de ordenador necesitan instrucciones para 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: estos pasos se llaman algoritmo. De viaje Aquí está nuestro problema: Ada tiene que viajar del cuadrado número 3 al número 4. Averigua los pasos que tendrá que dar. 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. 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). 1 Escribe un algoritmo que explique cómo ir de 6 a 1 2 Ahora intenta hacerlo de 5 a 6 3 Viaja de 2 a 4 Ahora comprueba tus respuestas en la página 34. Divertido juego de algoritmos Para este juego solo necesitarás un dado y una ficha. Inténtalo: 1 Lanza el dado una vez. Pon la ficha en el número 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. 4 Escribe los pasos que tienes que dar para llegar allí. Para viajar de 3 a 4 , Ada tiene que dar los siguientes pasos: PASO A PASO Usa una moneda o un muñequito como ficha. Palabra claveAlgoritmo: son los pasos que tiene que dar un programa para solucionar un problema. 3 4 1 2 6 5 3 4 1. R U U ...… 2. ARRIBA ARRIBA ABAJODERECHA DERECHA DERECHA DERECHA ABAJO ABAJO ABAJO ABAJO ABAJO IZQUIERDA HTC p8-33.indd 12-13 29/10/15 12:07 14 1514 15 MENSAJES CODIFICADOS 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 pueden llamarse instrucciones. Ejemplo de comandos U4 significa: mover arriba 4. L3 significa: mover izquierda 3. D7 significa: mover abajo 7. R4 significa: mover derecha 4. ¡Huy! Demasiado lejos. 1 Veamos qué han dibujado R3 U3 L3 D3. Recuerda que R (Right) es derecha. L (Left) es izquierda. U (Up) es arriba. D (Down) es abajo. Tienes que empezar en el punto rojo: R3 U3D3 L3 2 3 4 5 R5 significa moverse a la derecha 5 casillas. El punto rojo te dice dónde empezar. Escribe las instrucciones o comandos para deletrear tu nombre o iniciales. Necesitas un papel cuadriculado y un lápiz. 1 Dibuja tu nombre en un papel cuadriculado. Convierte las líneas diagonales en verticales y horizontales (como en V, W o M). ¡Díselo tú! 2 Escribe las instrucciones para dibujar tus letras. 3 Da las instrucciones a un compañero para ver si sabe seguirlas. 9 54 8 3 7 2 6 1 Palabra claveComando o instrucción: orden para hacer una tarea concreta. Las respuestas en la pág. 34. ¡Hay más de una respuesta correcta! 1. L3 D3 U2 L3 2 ENVIAR COMANDOS Juego de palabras Ahora escribiremos los comandos o instrucciones que deletrearán estas palabras: HTC p8-33.indd 14-15 29/10/15 12:07 16 DAR VUELTAS Ahora aprenderemos a hacer que un robot dé vueltas. Tenemos que usar tres instrucciones: avanzar, girar izquierda o girar derecha, y así consecutivamente. Estos son ejemplos de instrucciones sencillas que harán que tu robot gire a derecha e izquierda. Dileque gire Intentemos este programa: Avanzar 25 (recuerda que son casillas) Girar derecha 90 (recuerda que para girar son grados) Avanzar 20 Girar derecha 90 Avanzar 25 Girar izquierda 90 Avanzar 10 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 el camino que sigue. Avanzar 25 Avanzar 25 Avanzar 10 Derecha 90 Derecha 90Izquierda 90 Avanzar 20 Girar derecha 90 Girar izquierda 90 Los grados se miden de 0 a 360. Una vuelta de 360 grados completa un círculo. 270 90 180 360 0 0 90 90 0 Escribir letras Ahora intenta averiguar las instrucciones para hacer estas letras. Mira la solución en la página 34. 1 3 2 4 1. Avanzar 20 Derecha 90 Avanzar 20 Familiarízate con los grados Los giros que da un robot se miden en grados. Los grados pueden ser difíciles de comprender, pero si conocemos lo básico podremos hacer que tu robot dé vueltas. Un ángulo recto tiene 90 grados. Una vuelta completa, 360 grados. Cuanto mayor sea el número, mayor será la vuelta. Píxeles La distancia que los robots avanzan se mide en pasos. Si el robot está dibujado en una pantalla (a veces 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 abajo tiene 7 píxeles de ancho por 7 de alto. HTC p8-33.indd 16-17 29/10/15 12:07 18 19 Vamos a aprender a programar con Logo, uno de los lenguajes de ordenador más simples. ¡Usar Logo es una forma fantástica de poner instrucciones básicas en acción! La pantalla de Logo Antes de aprender algunas instrucciones, veamos qué aparece en la pantalla de Logo. En el ejemplo de abajo, ya hemos escrito tres instrucciones en la ventana de trabajo. Presiona «Enter» después de cada instrucción o escribe una serie de instrucciones separadas por espacios y luego presiona «Enter» para ver el resultado. Instrucciones básicasAPRENDER LOGO fd 50 rt 90 fd 50 fd 50 fd 50 Run Run Run Esta es la ventana de trabajo. Escribe tu programa aquí. Haz clic en «Run» para probar tu programa o pulsa la tecla «Enter». Escribe fd 50 para avanzar 50 pasos. Escribe lt 90 y clica en «Run» para girar a la izquierda. Pulsa «Run» para probar tu programa. Escribe fd 50 y pulsa «Run» para avanzar otros 50 pasos. Vuelve a la página 4 si necesitas ayuda para descargar Logo o encontrar un sitio web donde usarlo. fd = avanzar rt = derecha lt = izquierda 1 3 lt 90 Run 2Esta es la ventana de gráficos. 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. Si solo hay una pequeña ventana de trabajo, escribe las instrucciones una a una y luego presiona «Enter», o haz clic en «Run» para ejecutarlas una por una. También puedes escribir varias instrucciones en una línea con un espacio entre cada instrucción y luego pulsa «Enter» o haz clic en «Run» para probarlas. HTC p8-33.indd 18-19 29/10/15 12:08 1 0 0 1 0 0 1 0 1 1 0 0 0 0 0 00 1 1 0 011 11 1 1 1 0 11 1 0 1 1 1 0 11 1 0 11 1 0 1 000 1 0 1 0 1 0 0 1 1 0 0 0 0 0 1 1 1 00111 000 1 0 1 1 0 11 1 0 11 1 0 11 1 0 1 0 00 0 11 000000000111 111 0 10 10 1 1 0 00 10 10 11 000 0 0 10 10 110 11110 1 0 10 10 10 1 0 1110 10 111000 10 100 1 0 0 1 0 0 1 000 0 10 10 1 0 00 0 00 10 1 0 10 1 00 000 11 00000000 100 0 10 1 0 1110 10 111 20 21 FORMAS LOGO fd 60 rt 90 fd 60 rt 90 fd 60 rt 90 fd 60 fd 50 lt 90 fd 100 lt 90 fd 50 lt 90 fd 100 fd 25 rt 90 fd 25 lt 90 fd 25 rt 90 fd 25 fd 100 rt 90 fd 50 lt 90 lt 90 fd 100 fd 100 rt 90 fd 100 rt 90 fd 100 rt 90 fd 100 lt 90 fd 50 rt 90 fd 100 rt 90 fd 50 fd 50 rt 90 fd 50 lt 90 fd 50 rt 90 fd 50 rt 90 fd 100 rt 90 fd 100 Escribe estos programas para practicar programación con Logo: Practica formas Ahora que ya entiendes cómo funciona Logo, intenta dibujar formas diferentes. Experimenta con lo que puedes crear: ¡ya estás programando! Prueba esto 4 6 7 5 Ver página 34 para respuestas sugeridas. ¡Hay más de una respuesta correcta! 21 3 Escribe cs cuando tengas que borrar la pantalla. Escribe seth 0 para que la tortuga apunte hacia arriba de nuevo. lt 90 significa gira a la izquierda 90 grados. ¡Experimenta! ¡Veamos qué dibujas con Logo! ¿Qué dibujan estos programas? S u p e r o r d e n a d o r 7 0 0 0 ¡Ooohh! ¡Aaahh! ¡Sorprendente!¡Haz formas! Ahora intenta dibujar estas formas con Logo: HTC p8-33.indd 20-21 29/10/15 12:08 119736 Aprende a programar_PDF_cast