💾 Archived View for gamifi.cat › blog › 2015-10-07_computacional_escuela_2 › index.html captured on 2024-08-25 at 01:51:57.
⬅️ Previous capture (2024-06-16)
-=-=-=-=-=-=-
<!doctype html> <html lang="ca"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="blog, cultura lliure, internet, programari lliure, snap, gemini, fediverse, llengua catalana, catala"> <title>Pensament computacional a l’escola: llenguatge i entorn - Gamifica't!</title> <link rel="stylesheet" href="../../static/style.css"> <link rel="shortcurt icon" type="image/svg" href="../../img/favicon.svg"> </head> <body> <header class="header"> <a href="#main" class="skip">Salt al contingut</a> <a href="../../" class="logo" ><img src="../../img/logo.svg" width="300" alt="Logo Gamifica't"></a> <nav class="header-right"> <a href="../">Blog</a> <a href="../../projectes/">Projectes</a> <a href="../../glossari/">Glossari</a> <a href="../../contacte/">Contacte</a> <a href="../../blog.xml" class="logo" ><img src="../../img/rss.png" width="32" alt="RSS Gamifica't"></a> </nav> </header> <main id="main"> <div class="page"> <div class="blog-post"> <h1>Pensament computacional a l’escola: llenguatge i entorn</h1> <p class="meta">2015-10-07</p> <p>En aquest curs es fa una introducciĂł al pensament computacional, presentant els conceptes principals i la seva aplicaciĂł al nostre entorn quotidiĂ . A mĂ©s, s’implementaran aquests conceptes en l’entorn de programaciĂł d’Scratch.</p> <h2>Primitives, combinaciĂł i abstracciĂł</h2> <p>El llenguatge Ă©s un instrument fonamental per al pensament. Amb ell podem crear idees i transmetre-les per comunicar amb els altres. Un llenguatge d’ordinador Ă©s un llenguatge formal artificial que presenta tres mecanismes bĂ sics: primitives, combinaciĂł i abstracciĂł.</p> <p>Les primitives sĂłn unitats bĂ siques, en el cas d’Scratch sĂłn els blocs que es poden anar arrossegant i agrupant per tal d’encaminar les accions. Les primitives d’Scratch s’agrupen en 4 tipus: comandaments (presenten pestanya per combinar o apilar blocs), funcions (blocs arrodonits o punxeguts que retornen un valor relatiu a l’objecte), estructures de control (forma de “C” que permet repetir valors determinats o prendre decisions si una condiciĂł es dĂłna o no), i els esdeveniments (arrodonits de dalt i a baix pestanya per connectar).</p> <p>El mecanisme de combinaciĂł permet agrupar les primitives a partir de les regles del propi llenguatge de programaciĂł. A mesura que anem combinant blocs anirem creant el projecte i escrivint el programa. El tipus de dades que usa Scratch sĂłn de tipus booleĂ , nĂşmero o una cadena de carĂ cters.</p> <p>Finalment, el mecanisme d’abstracciĂł permet compactar sota un mateix nom un grup de primitives que creen una nova primitiva. Scratch 2.0 permet crear els nostres propis blocs a partir de les primitives que es presenten o creant les pròpies. Scratch Ă©s programari lliure i es pot modificar. I això permet que mĂ©s gent hi treballi de manera voluntĂ ria. De fet, una de les iniciatives mĂ©s destacades Ă©s Snap!, desenvolupat a la Universitat de Berkeley. Scratch funciona amb flash i no es pot usar als mòbils (de moment, s’estĂ treballant…) en canvi, Snap!, Ă©s una derivat d’Scratch adaptat directament tambĂ© per a entorns mòbils.</p> <h2>Entorn de programaciĂł</h2> <p>L’entorn de programaciĂł Ă©s on es pot escriure i executar els programes. En el cas d’Scratch, es presenten dos pantalles: a l’esquerra es visualitza el projecte que s’estĂ creant, i a la dreta es pot crear el projecte a travĂ©s de tres pestanyes: programaciĂł, vestits i so. A sobre de les pantalles trobem el menĂş on canviar l’idioma, accedir al nostre perfil, guardar projectes, etc. Sota de les pantalles hi ha una motxilla que permet guardar blocs per a ser utilitzats en altres projectes que estiguem creant. Crear un projecte Ă©s escriure un programa i l’entorn Ă©s molt intuitiu.</p> <p>Els fons o escenaris es dissenyen i programen separadament als objectes. Trobarem aquest apartat “Escenari” al costat esquerra dels objectes o Sprites, sota la pantalla de l’esquerra on s’executa el programa. Clicant allĂ , trobem que, al igual que els objectes, l’escenari tĂ© pestanya de programaciĂł, de vestits i de so.</p> <p>Els blocs tenen diferents colors en funciĂł de la seva naturalesa, cosa que permet fĂ cilment identificar-los. A mĂ©s, al crear un compte a Scratch s’accedeix a una gran comunitat online amb tot tipus de projectes que es poden reutilitzar. Al primer projecte es farĂ un pong d’un jugador. Som-hi!</p> <h2>CreaciĂł del joc Pong</h2> <p>Pong Ă©s un dels videojocs mĂ©s antics. Jo el recordo en un Spectrum d’aquells de cassette… El joc consisteix en dues pales o raquetes (cadascuna controlada per un jugador) que s’han d’anar passant la pilota. Un tenis de tota la vida però simplificat en digital. El Pong que farem, però, nomĂ©s presenta una paleta i, per tant, Ă©s nomĂ©s per a un jugardor.</p> <p>A travĂ©s d’aquest joc ens familiaritzarem amb els moviments dels objectes a l’escenari controlant el moviment, farem interactuar objectes i afegirem efectes de so i grĂ fics. El plantejament del problema presenta mĂşltiples processos a executar i els he resumit en quatre passes (veure programaciĂł Pong un jugador):</p> <ol> <li>Crear una pilota que rebota a les cantonades de l’escenari. A l’iniciar un projecte a Scratch, per defecte, apareix el gat Scratch com a Sprite o Objecte. Podem modificar-lo clicant a sobre de la pantalla de la dreta, on diu “Vestits”. AllĂ tenim un editor grĂ fic per dibuixar la nostra pròpia pilota o importar altres pilotes: tan dels recursos d’Scratch com de qualsevol imatge que tinguem a l’ordinador.</li> </ol> <p>A mĂ©s crear la pilota a l’editor grĂ fic, hem de crear dos scripts amb els blocs (a la pestanya de programaciĂł que hi ha a sobre de la pantalla de la dreta, tot just a l’esquerra de la pestanya “vestits”): un dels scripts serveix per a donar una posiciĂł inicial de la pilota i l’altre per aplicar-li el moviment. Com es veu, Ă©s un llenguatge de programaciĂł gramatival anomenat tambĂ© pseudocodi perquè es programa sense escriure directament les lĂnies de codi.</p> <p>El primer script diu que, quan es cliqui la bandera verda (que Ă©s com s’executen els programes a Scratch), que l’objecte vagi a les coordenades x (15) i y (150) i que apunti en la direcciĂł indicada. En aquest cas, un nĂşmero a l’atzar entre 150 i 220.</p> <p>Al segĂĽent bloc, se li diu que, quan es cliqui la tecla d’espai, per sempre, es mogui 10 passes (10 pixels) i, si toca una cantonada de l’escenari, reboti.</p> <p><img src="../../img/scratch/blocs-pong-pilota.png" alt="blocs-pong-pilota" /></p> <ol start="2"> <li>Crear una paleta que es mogui amb el ratolĂ del jugador.</li> </ol> <p>Primer haurem de crear un nou sprite o objecte. El podem titular “paleta” i fer servir l’editor per dibuixar un rectangle des de la pestanya de “vestits”. A la pestanya de programes, posem que per sempre, es fixi la x al moviment del ratolĂ quan es pressioni la tecla espai.</p> <p><img src="../../img/scratch/blocs-pong-paleta.png" alt="blocs-pong-paleta" /></p> <ol start="3"> <li>Farem que la pilota reboti a la paleta.</li> </ol> <p>Tornem a l’objecte pilota i afegim el segĂĽent script. El gir fa un efecte mĂ©s realista a la pilota. El so pop sonarĂ cada vegada que la pilota toqui la paleta.</p> <p><img src="../../img/scratch/blocs-pong-pilota-rebota.png" alt="blocs-pong-pilota-rebota" /></p> <ol start="4"> <li>Fer finalitzar el joc quan la pilota toqui al terra.</li> </ol> <p>TambĂ© a dins de l’objecte pilota, afegirem la manera de finalitzar el joc. Posarem un terra del color que vulguem i desprĂ©s donarem la instrucciĂł a la pilota que, quan toqui aquest color, aturi el projecte i tots els seus scripts. A mĂ©s, sonarĂ una campana que serĂ prĂ cticament imperceptible. Per sentir-la sencera o mĂ©s tros, entre el “tocar so” i el “aturar so” es podria posar un “y espera” o un “espera X segons”.</p> <p><img src="../../img/scratch/blocs-pong-pilota-fi.png" alt="blocs-pong-pilota-fi" /></p> <h2>Activitat</h2> <p>Haurem de crear un Pong amb dues pilotes. La nova pilota es comportarĂ com la primera, rebotant a les cantonades i a la paleta, i emetent un so quan toqui la pilota. A mĂ©s, si les dues pilotes interactuen, hauran de dir un missatge.</p> <p><a href="https://scratch.mit.edu/projects/82441592/">Veure el Pong al web d’Scratch</a></p> <p><a href="../2015-10-14_computacional_escuela_3/index.html">Mòdul3. ProgramaciĂł: conceptes i mètodes (projecte: Pong 2 jugadors)</a></p> </div> </div> </main> <footer> Internets duals: gemini://gamifi.cat<br> <a href="../../llicencies/">Diverses llicències</a> / <a href="../../kukis/">PolĂtica de Kukis</a><br> ♥ Fet amb paciència i tecnologies lliures ♥ </footer> </body> </html>