{"id":4607,"date":"2022-08-24T13:32:34","date_gmt":"2022-08-24T16:32:34","guid":{"rendered":"https:\/\/www.blogs.unicamp.br\/zero\/?p=4607"},"modified":"2023-08-26T19:45:35","modified_gmt":"2023-08-26T22:45:35","slug":"transformando-uma-demonstracao-em-bloquinhos-parte-2","status":"publish","type":"post","link":"https:\/\/www.blogs.unicamp.br\/zero\/4607\/","title":{"rendered":"Transformando uma demonstra\u00e7\u00e3o em bloquinhos  &#8211; parte 2"},"content":{"rendered":"\n<p class=\" eplus-wrapper\">Agora que j\u00e1 decompomos o texto de uma demonstra\u00e7\u00e3o de modo a reduzir a quantidade de tipos, vamos trabalhar no software Arrasta o X.<\/p>\n\n\n\n<p class=\" eplus-wrapper\">Comece abrindo o seguinte link: <a href=\"https:\/\/scratch.mit.edu\/projects\/723926143\/editor\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/scratch.mit.edu\/projects\/723926143\/editor<\/a><\/p>\n\n\n\n<p class=\" eplus-wrapper\">Este \u00e9 um template para criar demonstra\u00e7\u00f5es, assim qualquer edi\u00e7\u00e3o que voc\u00ea fizer n\u00e3o alterar\u00e1 o arquivo original. Para que suas altera\u00e7\u00f5es fiquem registradas, voc\u00ea pode acessar sua conta do Scratch e criar um REMIX da vers\u00e3o atual (isso far\u00e1 uma c\u00f3pia dela na sua pasta de projetos), ou se tiver o software de edi\u00e7\u00e3o na vers\u00e3o 3.0 instalado no seu computador, voc\u00ea pode fazer download do arquivo em formato .sb3 e edit\u00e1-lo de maneira offline (a prefer\u00eancia \u00e9 sua).<\/p>\n\n\n\n<p class=\" eplus-wrapper\">Nosso pr\u00f3ximo passo \u00e9 criar bloquinhos :3<\/p>\n\n\n\n<p class=\" eplus-wrapper\">Abra a op\u00e7\u00e3o &#8220;costumes&#8221; (ou &#8220;fantasia&#8221;) do ator &#8220;pe\u00e7as&#8221;. Voc\u00ea ver\u00e1 no lado esquerdo da tela uma lista com 4 pe\u00e7as. As cores das pe\u00e7as e as letras utilizadas nelas foram escolhidas para melhor distin\u00e7\u00e3o por pessoas com daltonismo, ent\u00e3o \u00e9 interessante que n\u00e3o altere estas cores. Quando precisar de mais de uma pe\u00e7a de um tipo, clique com o direito nela e duplique-a.<\/p>\n\n\n\n<figure class=\" wp-block-image size-large eplus-wrapper\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-135625_1366x768_scrot-1024x576.png\" alt=\"\" class=\"wp-image-4613\" srcset=\"https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-135625_1366x768_scrot-1024x576.png 1024w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-135625_1366x768_scrot-300x169.png 300w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-135625_1366x768_scrot-768x432.png 768w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-135625_1366x768_scrot-500x281.png 500w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-135625_1366x768_scrot-800x450.png 800w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-135625_1366x768_scrot-1280x720.png 1280w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-135625_1366x768_scrot.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\" eplus-wrapper\">Ent\u00e3o, vamos pegar nossa demonstra\u00e7\u00e3o decomposta e fazer um bloco para cada um dos 23 tipos de segmento de texto, respeitando a margem das pe\u00e7as e suas cores de acordo com a fun\u00e7\u00e3o da pe\u00e7a.<\/p>\n\n\n\n<p class=\" eplus-wrapper\">Depois de criar os blocos, volte para a parte do c\u00f3digo deste ator, e altere o valor em destaque na imagem abaixo para o n\u00famero de pe\u00e7as criadas menos 1 (no meu caso, criei 23 pe\u00e7as, ent\u00e3o 23 &#8211; 1 = 22).<\/p>\n\n\n\n<figure class=\" wp-block-image size-large eplus-wrapper\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141619_1366x768_scrot-1024x576.png\" alt=\"\" class=\"wp-image-4615\" srcset=\"https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141619_1366x768_scrot-1024x576.png 1024w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141619_1366x768_scrot-300x169.png 300w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141619_1366x768_scrot-768x432.png 768w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141619_1366x768_scrot-500x281.png 500w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141619_1366x768_scrot-800x450.png 800w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141619_1366x768_scrot-1280x720.png 1280w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141619_1366x768_scrot.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\" eplus-wrapper\">Pronto, agora pode salvar seu c\u00f3digo e quando execut\u00e1-lo, ele gerar\u00e1 na tela todos os bloquinhos necess\u00e1rios para formar a demonstra\u00e7\u00e3o original.<\/p>\n\n\n\n<figure class=\" wp-block-image size-large eplus-wrapper\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141804_1366x768_scrot-1024x576.png\" alt=\"\" class=\"wp-image-4617\" srcset=\"https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141804_1366x768_scrot-1024x576.png 1024w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141804_1366x768_scrot-300x169.png 300w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141804_1366x768_scrot-768x432.png 768w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141804_1366x768_scrot-500x281.png 500w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141804_1366x768_scrot-800x450.png 800w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141804_1366x768_scrot-1280x720.png 1280w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-141804_1366x768_scrot.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\" eplus-wrapper\">Um bom passo agora, \u00e9 testar como podemos montar nossa demonstra\u00e7\u00e3o com estas pe\u00e7as para ver o qu\u00e3o bem ela se encaixa na tela e tamb\u00e9m descobrir se h\u00e1 algum errinho que deixamos passar na etapa anterior (para duplicar uma pe\u00e7a, arraste-a at\u00e9 o segundo \u00edcone da esquerda para a direita no canto inferior direito da tela).<\/p>\n\n\n\n<figure class=\" wp-block-image size-large eplus-wrapper\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142320_1366x768_scrot-1024x576.png\" alt=\"\" class=\"wp-image-4618\" srcset=\"https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142320_1366x768_scrot-1024x576.png 1024w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142320_1366x768_scrot-300x169.png 300w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142320_1366x768_scrot-768x432.png 768w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142320_1366x768_scrot-500x281.png 500w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142320_1366x768_scrot-800x450.png 800w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142320_1366x768_scrot-1280x720.png 1280w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142320_1366x768_scrot.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\" eplus-wrapper\">Olhando o arranjo na tela, parece legal, exceto o \u00faltimo bloquinho, que o conte\u00fado ficou pequeno demais para ser lido com facilidade. Vou editar isso alterando o conte\u00fado dos dois \u00faltimos bloquinhos (por isso a import\u00e2ncia de testarmos a intera\u00e7\u00e3o com os blocos):<\/p>\n\n\n\n<figure class=\" wp-block-image size-large eplus-wrapper\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142737_1366x768_scrot-1024x576.png\" alt=\"\" class=\"wp-image-4619\" srcset=\"https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142737_1366x768_scrot-1024x576.png 1024w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142737_1366x768_scrot-300x169.png 300w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142737_1366x768_scrot-768x432.png 768w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142737_1366x768_scrot-500x281.png 500w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142737_1366x768_scrot-800x450.png 800w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142737_1366x768_scrot-1280x720.png 1280w, https:\/\/www.blogs.unicamp.br\/zero\/wp-content\/uploads\/sites\/187\/2022\/08\/2022-08-24-142737_1366x768_scrot.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\" eplus-wrapper\"><strong><a href=\"https:\/\/www.blogs.unicamp.br\/zero\/4592\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u2190 parte 1<\/a><\/strong><\/p>\n\n\n\n<p class=\" has-text-align-right eplus-wrapper\"><strong><a href=\"https:\/\/www.blogs.unicamp.br\/zero\/4622\/\" target=\"_blank\" rel=\"noreferrer noopener\">parte 3 \u2192<\/a><\/strong><\/p>\n\n\n\n<p class=\" has-text-align-center eplus-wrapper\">Imagem de capa adaptada do meme conhecido como &#8220;sayori drake meme&#8221;<\/p>\n\n\n\n<hr class=\" wp-block-separator has-css-opacity eplus-wrapper\" \/>\n\n\n\n<p class=\" eplus-wrapper\">Como referenciar este conte\u00fado em formato ABNT (baseado na norma NBR 6023\/2018): <\/p>\n\n\n\n<p class=\" eplus-wrapper\">SILVA, Marcos Henrique de Paula Dias da. Transformando uma demonstra\u00e7\u00e3o em bloquinhos &#8211; parte 2. <em>In<\/em>: UNIVERSIDADE ESTADUAL DE CAMPINAS. <strong><a href=\"https:\/\/www.blogs.unicamp.br\/zero\/4592\">Zero \u2013 Blog de Ci\u00eancia da Unicamp<\/a>. <a href=\"https:\/\/www.blogs.unicamp.br\/zero\/category\/v-8-ed-1\/\" target=\"_blank\" rel=\"noreferrer noopener\">Volume 8. Ed. 1. 2\u00ba semestre de 2022<\/a><\/strong>. Campinas, 24 ago. 2022. Dispon\u00edvel em: <a href=\"https:\/\/www.blogs.unicamp.br\/zero\/4607\">https:\/\/www.blogs.unicamp.br\/zero\/4607<\/a>. Acesso em: &lt;data-de-hoje&gt;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ajustando os segmentos dentro dos bloquinhos, encaixes e fontes para habilitar uma melhor leitura.<\/p>\n","protected":false},"author":434,"featured_media":4596,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"pgc_sgb_lightbox_settings":"","_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"categories":[1224],"tags":[],"class_list":["post-4607","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-v-8-ed-1"],"_links":{"self":[{"href":"https:\/\/www.blogs.unicamp.br\/zero\/wp-json\/wp\/v2\/posts\/4607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blogs.unicamp.br\/zero\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blogs.unicamp.br\/zero\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blogs.unicamp.br\/zero\/wp-json\/wp\/v2\/users\/434"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blogs.unicamp.br\/zero\/wp-json\/wp\/v2\/comments?post=4607"}],"version-history":[{"count":8,"href":"https:\/\/www.blogs.unicamp.br\/zero\/wp-json\/wp\/v2\/posts\/4607\/revisions"}],"predecessor-version":[{"id":5348,"href":"https:\/\/www.blogs.unicamp.br\/zero\/wp-json\/wp\/v2\/posts\/4607\/revisions\/5348"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.blogs.unicamp.br\/zero\/wp-json\/wp\/v2\/media\/4596"}],"wp:attachment":[{"href":"https:\/\/www.blogs.unicamp.br\/zero\/wp-json\/wp\/v2\/media?parent=4607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blogs.unicamp.br\/zero\/wp-json\/wp\/v2\/categories?post=4607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blogs.unicamp.br\/zero\/wp-json\/wp\/v2\/tags?post=4607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}