{"id":858,"date":"2019-08-19T16:27:48","date_gmt":"2019-08-19T14:27:48","guid":{"rendered":"http:\/\/quadern-tpi.recursos.uoc.edu\/3-4-3-exercici-2-afegim-un-boto-virtual-al-nostre-programa\/"},"modified":"2021-10-14T12:21:23","modified_gmt":"2021-10-14T10:21:23","slug":"3-5-3-exercici-2-afegim-un-boto-virtual-al-nostre-programa","status":"publish","type":"page","link":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/3-5-3-exercici-2-afegim-un-boto-virtual-al-nostre-programa\/","title":{"rendered":"3.5.3. Ejercicio 2: a\u00f1adimos un bot\u00f3n virtual a nuestro programa"},"content":{"rendered":"<p>Otra manera de hacer que los usuarios interact\u00faen con nuestros programas es a\u00f1adir botones que deban pulsar.<\/p>\n<p>Con Snap! podemos crear un personaje que sea un bot\u00f3n. Podr\u00edamos dibujarlo nosotros o coger uno de alguna librer\u00eda p\u00fablica en internet.<\/p>\n<p>Una vez que tenemos al personaje bot\u00f3n a\u00f1adido a nuestro programa, deberemos usar el bloque \u00abCuando se clique este personaje\u00bb y definir qu\u00e9 queremos que pase.<\/p>\n<p>En este ejercicio os pedimos que abr\u00e1is <a href=\"https:\/\/snap.berkeley.edu\/snapsource\/snap.html#present:Username=uoc_tpi&amp;ProjectName=bot%C3%B3\" target=\"_blank\" rel=\"noopener noreferrer\">este ejemplo<\/a>, donde hay dos personajes que deben acabar de programarse. El primero har\u00e1 de pincel, que pintar\u00e1 algo cada vez que el segundo sea pulsado.<\/p>\n<p>Pensad que nos interesa que el pincel act\u00fae cuando se pulse el bot\u00f3n. Pero el pincel no sabr\u00e1 cu\u00e1ndo actuar si no se lo decimos. Ser\u00e1 necesario, por lo tanto, que los <strong>personajes se comuniquen entre ellos<\/strong>, y que cada vez que se pulse el bot\u00f3n se mande el mensaje \u00abdibuja\u00bb al pincel.<\/p>\n<p>Con Snap! podemos enviar mensajes usando el bloque \u00abEnv\u00eda a todos\u00bb y recibir mensajes con \u00abcuando reciba\u00bb.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1369\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_66_cast.png\" alt=\"\" width=\"320\" height=\"41\" \/><\/p>\n<p>Por ejemplo, en el programa que os pedimos que modifiqu\u00e9is, el personaje bot\u00f3n hace sencillamente esto:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1371\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_67_cast.png\" alt=\"\" width=\"500\" height=\"138\" srcset=\"\/wp-content\/uploads\/2019\/10\/20.212_67_cast.png 370w, \/wp-content\/uploads\/2019\/10\/20.212_67_cast-300x83.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Es decir, se sit\u00faa en un punto concreto del escenario y espera que lo cliquen. Cuando lo clican env\u00eda el mensaje \u00abdibuja\u00bb.<\/p>\n<p>Fijaos en que <strong>este personaje tiene dos vestidos<\/strong> (dos apariencias): \u00abpressed\u00bb y \u00abunpressed\u00bb. La primera modificaci\u00f3n que os pedimos que hag\u00e1is es que, cuando se pulse el bot\u00f3n, aparte de enviar el mensaje, tambi\u00e9n cambie de vestido en un espacio de tiempo muy corto (dando la sensaci\u00f3n visual de que lo hemos pulsado) y reproduzca alg\u00fan sonido.<\/p>\n<p>En cuanto al personaje pincel, os pedimos que lo modifiqu\u00e9is para que cada vez que pulsamos el bot\u00f3n dibuje un patr\u00f3n aleatorio de l\u00edneas que vayan cambiando de intensidad y\/o color, dando un resultado similar al que reproducimos a continuaci\u00f3n.<\/p>\n<figure id=\"attachment_200\" aria-describedby=\"caption-attachment-200\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-200\" src=\"\/wp-content\/uploads\/2019\/08\/20.212_68.jpg\" alt=\"\" width=\"800\" height=\"597\" srcset=\"\/wp-content\/uploads\/2019\/08\/20.212_68.jpg 800w, \/wp-content\/uploads\/2019\/08\/20.212_68-300x224.jpg 300w, \/wp-content\/uploads\/2019\/08\/20.212_68-768x573.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-200\" class=\"wp-caption-text\"><a href=\"https:\/\/snap.berkeley.edu\/snapsource\/snap.html#present:Username=uoc_tpi&amp;ProjectName=bot%C3%B3\" target=\"_blank\" rel=\"noopener noreferrer\">El c\u00f3digo a partir del cual hacer las modificaciones<\/a><\/figcaption><\/figure>\n<p>Una vez que teng\u00e1is vuestra versi\u00f3n con las modificaciones hechas, guardadla y compartidla.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Otra manera de hacer que los usuarios interact\u00faen con nuestros programas es a\u00f1adir botones que deban pulsar. Con Snap! podemos crear un personaje que sea un bot\u00f3n. Podr\u00edamos dibujarlo nosotros o coger uno de alguna librer\u00eda p\u00fablica en internet. Una vez que tenemos al personaje bot\u00f3n a\u00f1adido a nuestro programa, deberemos usar el bloque \u00abCuando [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/858"}],"collection":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=858"}],"version-history":[{"count":5,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/858\/revisions"}],"predecessor-version":[{"id":2080,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/858\/revisions\/2080"}],"wp:attachment":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}