{"id":5276,"date":"2023-06-23T22:30:26","date_gmt":"2023-06-23T21:30:26","guid":{"rendered":"https:\/\/canaltic.com\/blog\/?p=5276"},"modified":"2023-06-23T22:45:44","modified_gmt":"2023-06-23T21:45:44","slug":"pensamiento-computacional-y-diseno-de-trazados","status":"publish","type":"post","link":"https:\/\/canaltic.com\/blog\/?p=5276","title":{"rendered":"Pensamiento Computacional y Dise\u00f1o de Trazados"},"content":{"rendered":"<p>En este art\u00edculo se exponen algunas herramientas que permiten crear un producto gr\u00e1fico usando codificaci\u00f3n. Programar la \u201cm\u00e1quina de dibujar\u201d es una tarea que hist\u00f3ricamente marc\u00f3 el comienzo de la programaci\u00f3n en la escuela gracias a la tortuga <a href=\"https:\/\/el.media.mit.edu\/logo-foundation\/index.html\" target=\"_blank\" rel=\"noopener\"><strong>Logo<\/strong><\/a>. En la actualidad existen herramientas de programaci\u00f3n mucho m\u00e1s sofisticadas y que facilitan la creaci\u00f3n de potentes dise\u00f1os gr\u00e1ficos mediante programaci\u00f3n permitiendo un enfoque muy atractivo y creativo para ni\u00f1os\/as y j\u00f3venes.<\/p>\n<h2>Logo: un cl\u00e1sico de programaci\u00f3n con la tortuga<\/h2>\n<p>El lenguaje de programaci\u00f3n <a href=\"https:\/\/el.media.mit.edu\/logo-foundation\/index.html\" target=\"_blank\" rel=\"noopener\"><strong>Logo<\/strong><\/a> naci\u00f3 en 1967 de la mano de Seymour Papert, Wallace Feurzeig y Cynthia Solomon. Pero no ser\u00eda hasta la d\u00e9cada de los 70-80, con la llegada de los primeros ordenadores a los centros educativos, cuando se comenz\u00f3 a utilizar como una herramienta para ense\u00f1ar a programar a los estudiantes. Mediante sencillas \u00f3rdenes textuales, un avatar con forma de tortuga realizaba distintos dibujos geom\u00e9tricos en pantalla. Esta iniciativa fue el primer proyecto que intentaba promocionar el pensamiento computacional entre los m\u00e1s j\u00f3venes.<\/p>\n<p>La idea de Logo era ofrecer una aplicaci\u00f3n f\u00e1cil de aprender que, con pocas \u00f3rdenes (forward, right, left y clearscreen) , permitiese realizar trazos en pantalla creando figuras geom\u00e9tricas m\u00e1s o menos complejas. Con el tiempo se le fueron incorporando m\u00e1s comandos para realizar operaciones aritm\u00e9ticas, manejo de listas y otras tareas.<\/p>\n<figure id=\"attachment_5280\" aria-describedby=\"caption-attachment-5280\" style=\"width: 315px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5280 size-full\" src=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle01.jpg\" alt=\"\" width=\"315\" height=\"194\" srcset=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle01.jpg 315w, https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle01-300x185.jpg 300w\" sizes=\"auto, (max-width: 315px) 100vw, 315px\" \/><figcaption id=\"caption-attachment-5280\" class=\"wp-caption-text\">Imagen 01. Geometr\u00eda de la tortuga de Logo<\/figcaption><\/figure>\n<p>Actualmente, m\u00e1s de 50 a\u00f1os despu\u00e9s, su legado permanece en forma de multitud de variantes y proyectos educativos inspirados en \u00e9l. Uno de esos proyectos es Scratch procedente, al igual que Logo, del Instituto Tecnol\u00f3gico de Massachusetts (MIT) , que conserva la extensi\u00f3n de los gr\u00e1ficos de la tortuga pero usando bloques visuales m\u00e1s acordes con los tiempos actuales.<\/p>\n<p>A continuaci\u00f3n se referencian algunas versiones online de Logo que podemos utilizar en la actualidad:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.transum.org\/Software\/Logo\/\" target=\"_blank\" rel=\"noopener\">Online Logo<\/a><\/li>\n<li><a href=\"https:\/\/www.calormen.com\/jslogo\/\" target=\"_blank\" rel=\"noopener\">Int\u00e9rprete Logo<\/a><\/li>\n<li><a href=\"http:\/\/www.logointerpreter.com\/turtle-editor.php\" target=\"_blank\" rel=\"noopener\">Online Turtle Graphics<\/a><\/li>\n<li><a href=\"https:\/\/turtleacademy.com\/\" target=\"_blank\" rel=\"noopener\">Turtle Academy<\/a><\/li>\n<\/ul>\n<h2><strong>Tutorial \u201cFrozen\u201d de Code.org<\/strong><\/h2>\n<p><a href=\"https:\/\/studio.code.org\/s\/frozen\/lessons\/1\/levels\/1\" target=\"_blank\" rel=\"noopener\"><strong>Frozen<\/strong><\/a> es uno de los tutoriales guiados de <a href=\"http:\/\/code.org\" target=\"_blank\" rel=\"noopener\">Code.org<\/a> donde se trabaja la programaci\u00f3n de trazados geom\u00e9tricos mediante bloques visuales. El modelo \u201cm\u00e1quina de dibujar\u201d definido por el legendario \u201cLogo\u201d encuentra en esta lecci\u00f3n un interesante recurso para aprender a programar realizando dise\u00f1os art\u00edsticos. Est\u00e1 destinado al alumnado entre 10 y 13 a\u00f1os con conocimientos de segmentos y \u00e1ngulos.<\/p>\n<figure id=\"attachment_5281\" aria-describedby=\"caption-attachment-5281\" style=\"width: 600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5281\" src=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle02.jpg\" alt=\"\" width=\"600\" height=\"280\" srcset=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle02.jpg 877w, https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle02-300x140.jpg 300w, https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle02-768x358.jpg 768w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><figcaption id=\"caption-attachment-5281\" class=\"wp-caption-text\">Imagen 02. Tutorial Frozen de Code.org<\/figcaption><\/figure>\n<h2>Scratch: programaci\u00f3n de dibujos con l\u00e1piz<\/h2>\n<p><a href=\"https:\/\/scratch.mit.edu\/\" target=\"_blank\" rel=\"noopener\"><strong>Scratch 3<\/strong><\/a> proporciona la extensi\u00f3n <strong>L\u00e1piz<\/strong> para utilizar los bloques que permiten dibujar sobre el escenario con cualquier sprite que se utilice. De esta forma se recupera la posibilidad de plantear al alumnado multitud de ejercicios de computaci\u00f3n en los cuales deben codificar trazados de lo m\u00e1s simple a lo m\u00e1s complejo.<\/p>\n<p>Para utilizar el l\u00e1piz, desde el editor de <a href=\"https:\/\/scratch.mit.edu\/projects\/editor\" target=\"_blank\" rel=\"noopener\"><strong>Scratch<\/strong><\/a> , pulsa en el bot\u00f3n <strong>A\u00f1adir extensi\u00f3n<\/strong> y a continuaci\u00f3n selecciona <strong>L\u00e1piz<\/strong>.<\/p>\n<figure id=\"attachment_5282\" aria-describedby=\"caption-attachment-5282\" style=\"width: 370px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5282 size-full\" src=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle03.jpg\" alt=\"\" width=\"370\" height=\"238\" srcset=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle03.jpg 370w, https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle03-300x193.jpg 300w\" sizes=\"auto, (max-width: 370px) 100vw, 370px\" \/><figcaption id=\"caption-attachment-5282\" class=\"wp-caption-text\">Imagen 03. Extensi\u00f3n L\u00e1piz de Scratch<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>Esta configuraci\u00f3n a\u00f1adir\u00e1 la paleta de bloques correspondientes al <strong>L\u00e1piz<\/strong>.<\/p>\n<figure id=\"attachment_5283\" aria-describedby=\"caption-attachment-5283\" style=\"width: 164px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5283 size-full\" src=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle04.jpg\" alt=\"\" width=\"164\" height=\"324\" srcset=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle04.jpg 164w, https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle04-152x300.jpg 152w\" sizes=\"auto, (max-width: 164px) 100vw, 164px\" \/><figcaption id=\"caption-attachment-5283\" class=\"wp-caption-text\">Imagen 04. Bloques Scratch de la extensi\u00f3n L\u00e1piz<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>Con esta extensi\u00f3n es posible proponer al alumnado ejercicios de programaci\u00f3n para dibujar segmentos, \u00e1ngulos, pol\u00edgonos, figuras geom\u00e9tricas, estrellas, fractales \u2026 A partir del dibujo se puede solicitar el c\u00f3digo o bien ofrecer el c\u00f3digo para solicitar que anticipe la figura que resultar\u00e1 tras su ejecuci\u00f3n. La creatividad de los dise\u00f1os gr\u00e1ficos resulta un atractivo para el alumnado.<\/p>\n<p>A continuaci\u00f3n se exponen algunos ejemplos de dise\u00f1os de complejidad creciente elaborados con la extensi\u00f3n L\u00e1piz de Scratch:<\/p>\n<p><strong>Cuadrado de 100 p\u00edxeles<\/strong><\/p>\n<figure id=\"attachment_5284\" aria-describedby=\"caption-attachment-5284\" style=\"width: 621px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5284 size-full\" src=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle06.jpg\" alt=\"\" width=\"621\" height=\"384\" srcset=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle06.jpg 621w, https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle06-300x186.jpg 300w\" sizes=\"auto, (max-width: 621px) 100vw, 621px\" \/><figcaption id=\"caption-attachment-5284\" class=\"wp-caption-text\">Imagen 05. Trazado de un cuadrado de 100 p\u00edxeles de lado<\/figcaption><\/figure>\n<p>En este programa el sprite dibuja un cuadrado, paso a paso, usando un bucle repetir 4 veces. Se utiliza el bloque esperar para observar c\u00f3mo se realiza l\u00ednea a l\u00ednea. Se inicia desde el centro del escenario.<\/p>\n<p><strong>Hex\u00e1gono de 70 p\u00edxeles<\/strong><\/p>\n<figure id=\"attachment_5286\" aria-describedby=\"caption-attachment-5286\" style=\"width: 528px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5286 size-full\" src=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle08.jpg\" alt=\"\" width=\"528\" height=\"399\" srcset=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle08.jpg 528w, https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle08-300x227.jpg 300w\" sizes=\"auto, (max-width: 528px) 100vw, 528px\" \/><figcaption id=\"caption-attachment-5286\" class=\"wp-caption-text\">Imagen 06. Trazado de un hex\u00e1gono de 70 p\u00edxeles de lado<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>En este programa se dibuja un hex\u00e1gono repitiendo 6 veces la secuencia mover 70 pasos y girar 60 grados (360\/n\u00balados).<\/p>\n<p><strong>Pol\u00edgono de N lados introducidos por usuario<\/strong><\/p>\n<figure id=\"attachment_5285\" aria-describedby=\"caption-attachment-5285\" style=\"width: 571px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5285 size-full\" src=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle07.jpg\" alt=\"\" width=\"571\" height=\"353\" srcset=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle07.jpg 571w, https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle07-300x185.jpg 300w\" sizes=\"auto, (max-width: 571px) 100vw, 571px\" \/><figcaption id=\"caption-attachment-5285\" class=\"wp-caption-text\">Imagen 07. Dibujar un pol\u00edgono de N lados<\/figcaption><\/figure>\n<p>Este c\u00f3digo recoge del usuario el n\u00famero de lados y la longitud de cada lado y a continuaci\u00f3n dibuja ese pol\u00edgono.<\/p>\n<p><strong>Estrella de 5 picas<\/strong><\/p>\n<figure id=\"attachment_5287\" aria-describedby=\"caption-attachment-5287\" style=\"width: 587px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5287 size-full\" src=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle09.jpg\" alt=\"\" width=\"587\" height=\"352\" srcset=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle09.jpg 587w, https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle09-300x180.jpg 300w\" sizes=\"auto, (max-width: 587px) 100vw, 587px\" \/><figcaption id=\"caption-attachment-5287\" class=\"wp-caption-text\">Imagen 08. Dibujar una estrella<\/figcaption><\/figure>\n<p>En este programa se plantea dibujar la estrella de 5 picas. Para ello se repite 5 veces (n) la rutina: mover X p\u00edxeles, girar a la derecha (72=360\/n=360\/5) grados, mover X p\u00edxeles y girar a la izquierda (360\/n+360\/n=72+72=144) grados.<\/p>\n<h2>Processing: programaci\u00f3n de dise\u00f1os visuales<\/h2>\n<p><a href=\"https:\/\/processing.org\/\" target=\"_blank\" rel=\"noopener\"><strong>Processing<\/strong><\/a> es un software gratuito que se instala en el ordenador PC y que proporciona un entorno de programaci\u00f3n textual orientado al dise\u00f1o visual. Los productos que genera resultan atractivos e interesantes para el alumnado de Secundaria y Bachillerato.<\/p>\n<p>Es un lenguaje con una sintaxis muy amplia que contempla, entre otras muchas posibilidades, dibujar distintas formas geom\u00e9tricas mediante funciones primitivas 2D y de color:<\/p>\n<figure id=\"attachment_5288\" aria-describedby=\"caption-attachment-5288\" style=\"width: 701px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5288 size-full\" src=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle10.jpg\" alt=\"\" width=\"701\" height=\"609\" srcset=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle10.jpg 701w, https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle10-300x261.jpg 300w\" sizes=\"auto, (max-width: 701px) 100vw, 701px\" \/><figcaption id=\"caption-attachment-5288\" class=\"wp-caption-text\">Imagen 09. Funciones primitivas 2D y de color de Processing<\/figcaption><\/figure>\n<p>A continuaci\u00f3n se exponen algunos ejemplos elaborados con Processing para ilustrar sus posibilidades:<\/p>\n<p><strong>Bandera de Canarias<\/strong><\/p>\n<figure id=\"attachment_5289\" aria-describedby=\"caption-attachment-5289\" style=\"width: 453px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5289 size-full\" src=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle11.jpg\" alt=\"\" width=\"453\" height=\"274\" srcset=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle11.jpg 453w, https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle11-300x181.jpg 300w\" sizes=\"auto, (max-width: 453px) 100vw, 453px\" \/><figcaption id=\"caption-attachment-5289\" class=\"wp-caption-text\">Imagen 10. C\u00f3digo de la bandera de Canarias en Processing<\/figcaption><\/figure>\n<p><strong>Conc\u00e9ntricos<\/strong><\/p>\n<figure id=\"attachment_5290\" aria-describedby=\"caption-attachment-5290\" style=\"width: 453px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5290 size-full\" src=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle12.jpg\" alt=\"\" width=\"453\" height=\"262\" srcset=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle12.jpg 453w, https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle12-300x174.jpg 300w\" sizes=\"auto, (max-width: 453px) 100vw, 453px\" \/><figcaption id=\"caption-attachment-5290\" class=\"wp-caption-text\">Imagen 11. C\u00f3digo de los c\u00edrculos conc\u00e9ntricos en Processing<\/figcaption><\/figure>\n<p><strong>Pulsos<\/strong><br \/>\nEn este caso cuando se ejecuta el programa, al hacer clic sobre la ventana, se crea una flor en ese punto.<\/p>\n<figure id=\"attachment_5291\" aria-describedby=\"caption-attachment-5291\" style=\"width: 453px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5291 size-full\" src=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle13.jpg\" alt=\"\" width=\"453\" height=\"286\" srcset=\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle13.jpg 453w, https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2023\/06\/turtle13-300x189.jpg 300w\" sizes=\"auto, (max-width: 453px) 100vw, 453px\" \/><figcaption id=\"caption-attachment-5291\" class=\"wp-caption-text\">Imagen 12. C\u00f3digo del interactivo Pulsos en Processing<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo se exponen algunas herramientas que permiten crear un producto gr\u00e1fico usando codificaci\u00f3n. Programar la \u201cm\u00e1quina de dibujar\u201d es una tarea que hist\u00f3ricamente marc\u00f3 el comienzo de la programaci\u00f3n en la escuela gracias a la tortuga Logo. En la actualidad existen herramientas de programaci\u00f3n mucho m\u00e1s sofisticadas y que facilitan la creaci\u00f3n de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5295,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[74,112],"tags":[75,143],"class_list":["post-5276","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-computing","category-diseno","tag-computing","tag-desing"],"_links":{"self":[{"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/5276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5276"}],"version-history":[{"count":4,"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/5276\/revisions"}],"predecessor-version":[{"id":5294,"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/5276\/revisions\/5294"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=\/wp\/v2\/media\/5295"}],"wp:attachment":[{"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/canaltic.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}