{"id":851,"date":"2019-08-19T11:29:35","date_gmt":"2019-08-19T09:29:35","guid":{"rendered":"http:\/\/quadern-tpi.recursos.uoc.edu\/3-4-1-introduccio\/"},"modified":"2021-12-20T01:13:13","modified_gmt":"2021-12-19T23:13:13","slug":"3-5-1-introduccio-2","status":"publish","type":"page","link":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/3-5-1-introduccio-2\/","title":{"rendered":"3.5.1. Introducci\u00f3n"},"content":{"rendered":"<p>En alguno de los ejemplos y ejercicios que hemos visto hasta ahora ya hab\u00edamos a\u00f1adido interactividad a nuestros proyectos, usando algunos bloques de eventos, como \u00abcuando se pulse la bandera verde\u00bb, \u00abcuando se pulse la tecla X\u00bb o \u00abcuando se clique este personaje\u00bb. Con estos eventos creamos una interacci\u00f3n, ya sea por teclado o con el rat\u00f3n.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1356\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_61_cast.png\" alt=\"\" width=\"300\" height=\"200\" \/><\/p>\n<p>Otra manera, algo m\u00e1s sofisticada, de a\u00f1adir interactividad con Snap! es usando algunos de los <strong>bloques de sensores<\/strong> (bloques azul claro). Por ejemplo, el bloque \u00abpregunta\u00bb nos permite hacer que nuestro personaje formule una pregunta, que el usuario del proyecto puede contestar usando el teclado. La respuesta que escribe el usuario queda guardada en la variable \u00abrespuesta\u00bb (esta variable no debemos crearla: existe por defecto en los bloques azul claro). Veamos un ejemplo sencillo.<\/p>\n<p>&nbsp;<\/p>\n<p>Crearemos un personaje usando una imagen que tengamos en el disco duro. Sencillamente debemos arrastrar la imagen a la secci\u00f3n de \u00abvestidos\u00bb. Si las im\u00e1genes que usamos tienen el fondo transparente, nos ahorraremos tener que recortarlo. En el ejemplo que compartimos a continuaci\u00f3n hemos creado un personaje con un autorretrato de <a href=\"https:\/\/en.wikipedia.org\/wiki\/Jean-Michel_Basquiat\" target=\"_blank\" rel=\"noopener noreferrer\">Jean Michel Basquiat<\/a> (<em>Self-portrait<\/em>, 1983, <a href=\"https:\/\/www.pinterest.at\/pin\/431782683013498394\/?lp=true\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.pinterest.at\/pin\/431782683013498394\/?lp=true<\/a>).<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1358\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_62_cast.jpg\" alt=\"\" width=\"711\" height=\"441\" srcset=\"\/wp-content\/uploads\/2019\/10\/20.212_62_cast.jpg 749w, \/wp-content\/uploads\/2019\/10\/20.212_62_cast-300x186.jpg 300w\" sizes=\"(max-width: 711px) 100vw, 711px\" \/><\/p>\n<p>Crearemos un programa que desde el principio sit\u00fae al personaje en la esquina inferior izquierda y despu\u00e9s pregunte al usuario c\u00f3mo se llama. Una vez que el usuario ha escrito su nombre con el teclado, el personaje lo saluda usando el nombre.<\/p>\n<figure id=\"attachment_1360\" aria-describedby=\"caption-attachment-1360\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-1360 size-full\" src=\"\/wp-content\/uploads\/2019\/10\/20.212_63_cast.jpg\" alt=\"\" width=\"800\" height=\"506\" srcset=\"\/wp-content\/uploads\/2019\/10\/20.212_63_cast.jpg 800w, \/wp-content\/uploads\/2019\/10\/20.212_63_cast-300x190.jpg 300w, \/wp-content\/uploads\/2019\/10\/20.212_63_cast-768x486.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-1360\" class=\"wp-caption-text\"><a href=\"https:\/\/snap.berkeley.edu\/snapsource\/snap.html#present:Username=uoc_tpi&amp;ProjectName=Basquiat\" target=\"_blank\" rel=\"noopener noreferrer\">C\u00f3digo del programa<\/a>.<\/figcaption><\/figure>\n<p>Fijaos en que aparte de los bloques \u00abpregunta\u00bb y \u00abrespuesta\u00bb, tambi\u00e9n hemos introducido un nuevo bloque de apariencia que sirve para hacer que los personajes digan (en un bocadillo tipo c\u00f3mic) la cadena de caracteres que queramos. Adem\u00e1s, como queremos que el personaje diga \u00abhola\u00bb y el nombre del usuario, tambi\u00e9n hemos usado un bloque de operadores que nos permite unir dos cadenas de caracteres (en este caso \u00abhola\u00bb m\u00e1s la respuesta del usuario).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En alguno de los ejemplos y ejercicios que hemos visto hasta ahora ya hab\u00edamos a\u00f1adido interactividad a nuestros proyectos, usando algunos bloques de eventos, como \u00abcuando se pulse la bandera verde\u00bb, \u00abcuando se pulse la tecla X\u00bb o \u00abcuando se clique este personaje\u00bb. Con estos eventos creamos una interacci\u00f3n, ya sea por teclado o con [&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\/851"}],"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=851"}],"version-history":[{"count":6,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/851\/revisions"}],"predecessor-version":[{"id":2611,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/851\/revisions\/2611"}],"wp:attachment":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}