​

 

 

May dedicated to designhttps://cleverlance.de/en/blog/Pages/graphics-for-children-II.aspxMay dedicated to design<p>​​We dedicated all of the Wednesdays in May and the first one in June were to graphics and design. The QUB creative department prepared a five-part course in graphic design for children. The lessons were set up as five one-hour online sessions and we were thrilled with what the 11 little designers aged 7-12 managed to accomplish during the course. Incidentally, you may have <a href="/en/blog/Pages/graphics-for-children.aspx" target="_blank">read the article by twelve-year-old Viky​</a>.</p><p>We started with the basics - we explained the basics of colour theory, went through some interesting facts about creation of pigments and finished the first lesson with the creation of a colour palette, which is essential for the start of any design project.</p><p>During the second meeting we touched lightly on history. From pictograms, hieroglyphs and cave paintings we made it all the way through to division of typography into expressive and functional and the children learned, among other things, to distinguish between serif and sans serif fonts. Be prepared for your little designers at home being able to amaze you with interesting facts about font construction and correctly state that some characters have bellies, tails and eyes and that a pin needn’t necessarily be the one you use in bowling! We finished the lesson by practising the correct way to adjust spacing between letters.</p><p>At the third meeting, we discovered together that the style of comic book heroes with black outlines originated in Japanese traditional woodcut and Art Nouveau posters. We shared a few tips on how to add dynamics to a story, work with bubbles, and made it clear that a comic should have a hero, a plot, a setting, and a consistent graphic style. Together we created a short comic strip on the theme of Surprise.</p><p>In the fourth lesson, we delved into packaging design, practised the skills we had acquired relating to colours and typography and put the little designers up against a difficult task - designing the packaging for a bag of sweets. Again, we followed the same procedure as we would in normal practice, starting with research and noting details and differences between, for example, fruit and chocolate sweet designs. The children showed a tremendous amount of creativity and, apart from designing the packaging, they also came up with ideas for the names of the new sweets - would you buy Chicken Beaks if you saw them on the shelves?</p><p>In the first four lessons, we deliberately avoided the computer and worked with designs on paper (again, the same as is the case in practice when creating designs). In the fifth and final lesson we tried to make our way to a graphic editor and introduced the children to <a href="https://www.figma.com/">Figma</a>. We tried to transfer the design for our bag of sweets into a computer. The children passed this last test, almost a trial by fire, and we are currently collecting all of their creations. </p><p><em>On behalf of <a href="https://qub.digital/en/our-work" target="_blank">QUB Digital</a> Ivana Stránská, Michal Hořava and Jan Čermák​</em></p>
Graphics for children through the eyes of Vikyhttps://cleverlance.de/en/blog/Pages/graphics-for-children.aspxGraphics for children through the eyes of Viky<p>​​Twelve-year-old Viky wrote a great authentic report from a Cleverlance graphic design course for children</p><h3>1st lesson</h3><p>At the very beginning of the 1st lesson we introduced ourselves to the others as we do in other courses, but we also said what we wanted to learn. Once we had introduced ourselves, the lesson could begin. First they told us the colour of the year (which is called Very Peri) and how important it is for the designer. Actually, the designer uses the colour of the year almost everywhere. We also talked about the colour wheel, where you can see the contrast of colours beautifully. Then we learnt about the history of colours. It is very interesting that they were already using white paint in prehistoric times, because white is difficult to get and you even need the help of some chemicals to get it. And the Romans,for example, liked different shades of brown, so it was a romantic sort of style. Another topic was pigment. Depending on the binder you put in the pigment, different colours are produced. In the past, honey, oil or egg was used as a binder. For example, if you put honey in the pigment as a binder, you get watercolours or the same thing but with an egg, you get poster paints. The last topic was which different stones are used to make different colours. For example, yellow is made from volcanic stone or interestingly, white is made from black stone, although there is some chemical treatment, but that’s beside the point. At the end of the lesson, we were given “homework” to come up with our own colour palette for the next week. I enjoyed it very much and look forward to more graphic design lessons.<br></p><p><img src="/de/blog/PublishingImages/Articles/CreateIt/viki1.jpg" data-themekey="#" alt="" style="margin:5px;" /><br></p><h3>2nd lesson</h3><p>In in the 2nd lesson we talked about typography. First we discussed the history of writing. The very first writing was hieroglyphics, which were invented in Egypt.This kind of writing was time-consuming. Imagine if you had to draw a duck just to write a single word. Another type of lettering was invented by the Phoenicians and it was the first syllabic script, and from it came the Roman alphabet which we still write with today. One of the second to last topics was explaining what serif and sans serif fonts are and I am writing with sans serif at the moment. Also what uppercase and lowercase letters are. And the second to last thing we did was that they explained poster fonts and the ones they use in newspapers and so on. Poster fonts are meant to catch the eye and make an impression, but sometimes they are almost illegible. On the other hand, journalistic fonts must be easy to read. The last thing we did was that they sent us a link to a website chat room. We were able to practice placement of letters in headings and so on there. Like last time, we were given “homework” but this time we had to draw or paint our name (see picture in the header of the article). Again, like last time, I really enjoyed it and I’m looking forward to the next one.</p><h3>3rd lesson</h3><p>In the 3rd lesson we were dealt with comics. The very first topic we discussed was those sort of panels and we said that these panels can be arranged in different ways to keep the reader interested. Then there is that sort of shading in black and white comics, where for example the 1st panel is grey, the 2nd and 3rd panel is white and so on. Sometime around the middle of the lesson, we tried to draw our own comics, but just a strip. That means a comic with two or three panels. As soon as we had finished our “comic” the lesson was over. I enjoyed it a lot and look forward to the next one.<br></p><p><img src="/de/blog/PublishingImages/Articles/CreateIt/viki2.jpg" data-themekey="#" alt="" style="margin:5px;" /><br></p><h3>4Th lesson</h3><p>In the 4th lesson we painted and invented our own bag of sweets. First we had to come up with a name, I came up with “Japonky”. Then the font style and when the pencil sketch was ready, we came up with a colour palette. Once we had coloured the name, we did a design like an image of the flavour: watermelon, marshmallows, etc. with leaves around it or something else. We also had to put how much it weighs and what flavour it is (just in case). While we were doing this, Michal and Ivana told us about contrast and the golden ratio. We showed them our bags of sweets at the end of the lesson. They complimented us and told us to make an interesting background and take a picture of it for them. Like each and every graphic design class, I enjoyed it, plus we got to practice typography and choosing colours which go together in this one.<br></p><p>In the 5th lesson we worked with Figma. We redid the bag of sweets we did last time on a computer. First we set the paper format and set the colour. Then we did the headline and edited it. We also put in different shapes there and we found different vector images on a website. We were supposed to have it finished and sent by next week. The person who had the nicest one gets a bag of sweets. All of the graphic design lessons were great and I probably enjoyed the 3rd lesson the most. If there were more, I would definitely join in.​<br></p><p>Stay tuned for graphic designs created by the other people who took part in the course in the near future - because who wouldn’t want to see the best-looking bag of sweets!​<br></p>
Block-based programminghttps://cleverlance.de/en/blog/Pages/block-based-programming.aspxBlock-based programming<p>​​​​Let’s be honest, when you show your code to the kids for the first time, they probably won’t find the jumble of characters very interesting. If you explain to them that for the code to work it is very important to follow the syntax, they’ll most likely just walk away. At the same time, programming is your world and you’d like to share it with your children. We know just how to do that! This problem can be elegantly solved by block-based (i.e., visual) programming.<span style="color:#696158;font-size:14px;">​</span></p><div><p>The prepared blocks that represent cycles, variables or other programming elements are simply put together by dragging them with your mouse into the final program. They are arranged visually as if they were Lego bricks. The have different colours, based on the area and structure, and the app can even suggest if a code combination doesn’t work or if something is missing. This will teach your kids logic and how to build a program, what depends on what, how the commands follow each other – they can easily learn the basic principles themselves.<br></p><p><img src="/de/blog/PublishingImages/Articles/CreateIt/block_programming1.png" data-themekey="#" alt="" style="margin:5px 0px;" />Logical operators, variables and cycles are a bit more tricky but the learning curve in this case can be supported by an explanation by a teacher or a parent skilled in programming. This game with colourful blocks of code gradually eases your kids into the context and helps them understand the spirit of programming. After they master structure, learning syntax is much easier.<br></p><h2>Scratch, Lego, Microbit</h2><p>Probably the best known application of block-based programming is Scratch, but you might have also seen programmable Lego robots or heard about the Microbit project of the British BBC.<br></p><p><a href="https://en.wikipedia.org/wiki/Scratch_%28programming_language%29">Scratch</a> was created in 2003 by <a href="https://en.wikipedia.org/wiki/Massachusetts_Institute_of_Technology">MIT</a>. In it children can learn event driven programming with various active objects called “sprites”. These are simple two-dimensional pictures that can be imported or directly drawn in a simple editor included in Scratch. The young programmers then choose and assign command blocks to these sprites (there are ten different blocks of different colours based on their function) and they fit together like building blocks. The end result is an animation or a game that runs on the logic of the child’s code.​</p><p>A big advantage is that there are many tutorials and guides available for Scratch. After mastering programming in Scratch, users often switch directly to Python. When is a good time to start with Scratch? Basically as soon as children learn to read and understand, i.e., around the third grade in elementary school. There is even a <a href="http://ispython.com/wp/wp-content/uploads/2014/11/Asigsce16_titled.pdf">study​</a> that confirms Scratch to be a suitable language for the introduction to programming at elementary and high schools. At Cleverlance we also tried programming for children in Scratch in the past and it was a great success.<br></p><p><img src="/de/blog/PublishingImages/Articles/CreateIt/block_programming2.jpg" data-themekey="#" alt="" style="margin:5px 0px;" /><a href="https://www.lego.com/en-gb/categories/coding-for-kids">Lego</a> has prepared several projects for technically-minded children: <a href="https://brickipedia.fandom.com/wiki/LEGO_Boost">Lego Boost,</a> <a href="https://en.wikipedia.org/wiki/Lego_Mindstorms">Lego Mindstorm</a> and <a href="https://en.wikipedia.org/wiki/Lego_Education">Lego Education​</a>, based on the age category and situation. The advantage is that the children can build a 3D object using the building blocks, such as a robot, a car or some tool, and then use block-based programming to make it move the way they want.<br></p><p><img src="/de/blog/PublishingImages/Articles/CreateIt/block_programming3.png" data-themekey="#" alt="" style="margin:5px 0px;" /><a href="https://microbit.org/">Microbit</a> is not as popular here, but in Great Britain almost every kid knows about it. It is a project by BBC, which came up with the idea of a simple microcomputer – essentially a programmable desk with several diodes and a USB. Since 2015 over a million of these microcomputers has been given out to schools all over the United Kingdom and <a href="https://www.youtube.com/watch?v=CejDBLkXZkc&t=542s">children use it to write their first simple programs</a> in the native <a href="https://makecode.microbit.org/">makecode​</a> environment; however, Scratch, Javascrip or Micropython can also be used.<br></p><p><img src="/de/blog/PublishingImages/Articles/CreateIt/block_programming4.png" data-themekey="#" alt="" style="margin:5px 0px;" /><br></p><h2>HTML for kids in Cleverlance</h2><p>Even though there are WISIWYG editors today which mean that don’t have to know all the HTML tags by heart, it’s good to at least understand the basics. This is why Cleverlance has prepared a HTML course for children. Thanks to the obtained basic knowledge they will be able to build better websites and make small adjustments that are not supported by out-of-the-box applications. They will also spot an errors more easily when inspecting a code.<br></p><p>At Cleverlance, children are taught HTML by Vítek Červinka, who prepared a simple <a href="https://codeddraig.github.io/ffau/">Ffau web application</a> for this purpose based on a <a href="https://opensource.google/projects/blockly">Google library called Blockly</a>. It’s available at <a href="https://html.cleverlance.com/">https://html.cleverlance.com/</a> and you can try it yourself to see how block-based programming works.<br></p><p>We asked Vítek about his previous courses (in addition to HTML for children he also teaches a course on Microbit programming in Cleverlance and a programming course at a grammar school).<br></p><p><em>What do children enjoy the most about the programming courses?</em><br></p><p>When they get to a phase where they can influence what the code does, for example change the appearance. In general, they like creating stuff – and when they get a solo assignment, they enjoy thinking about how to achieve the desired result, for example based on the visual instructions.<br></p><p><em>What was the hardest part for the children?</em></p><p>The coding logics gets progressively more complex and sometimes kids can get lost. Surprisingly, the most challenging part is for them to recognize that they got lost. For example, during an online course it is a bit more difficult to tell even for me, the teacher.<br></p><p><em>What did you enjoy the most?</em></p><p>The most fun for me is the “Oh, I see” moment – when the kids suddenly understand get logic, when it all clicks. It's like some chemical reaction in the brain... when you overcome a problem, solve the riddle. I still experience this myself. You can see it in the kids and this is the internal drive of programming, a reward for the effort, something that makes them continue with programming.<br></p><p><em>Are there disadvantages to block-based programming?</em></p><p>It is worth mentioning that more complex programs would be hard to make in this environment, as they would become too complicated. The pre-defined blocks are a certain limiting factor as well, as you have a limited set of commands. That’s a good thing though, because when it starts to be too limiting for the children, they move on to normal programming.<br></p><p><em>What would you like the kids to take away from your courses?</em></p><p>I would like them to start thinking about how to get from an idea to its implementation in a step-by-step process. Of course I would also be happy if they find programming interesting and continue learning this skill. However, the main goal is for them to understand the principles. They don’t have to become programmers, all they need is to do understand it. It might come handy one day when they’re preparing instructions for someone who will program software for them.<br></p><p>Thank to block-based programming, everyone can start programming and see what it’s like. And if they like it, it is easy to continue from there. After all, it is one of the best investments into the future (yours and the child’s).​<br></p></div>
Learning through virtual playhttps://cleverlance.de/en/blog/Pages/learning-through-virtual-play.aspxLearning through virtual play<p>​In Autumn, we at Cleverlance in cooperation with the <a href="https://www.nvias.org/en/home-nvias-en/">nVias foundation</a> prepared a course on the foundations of programming for children​. There are no boring lectures in the course though; instead, it uses the popular Minecraft game to teach basic concepts of coding and the students could try these out first-hand and experiment with them. And it was a huge success! ​<br></p><p>Since the time of Comenius, learning through play has been a crucial concept – actively involving students into the exploration of the new material, which then allows them to memorize and ingrain the information. It’s no wonder that information technologies have become a key tool for making the taught subject more interactive. Let’s have a brief look at the history of educational game and talk about what the future of such games might hold.<br></p><h2>Programming, typing and dysentery</h2><p>One of the first "games” on the computer is surprisingly similar to our effort to teach children to code. Logo Programming was in fact a simplified programming language, with a turtle-shaped mouse pointer as a bonus. In 1967, having a graphical interface was quite the luxury. Students moved the turtle cursor through programming orders, for example to create geometrical shapes.<br></p><p>A big player among the first educational games was the Apple II platform. For example in 1979 you could try capitalism in practice thanks to the Lemonade Stand economic game. A true break-through came with the Oregon Trail game, probably the most successful and popular educational game of all times. The task of the player was to get a family of American settlers in the first half of the 19th century to safety all the way across the United States. The game’s educational value lies in the historical accuracy of the obstacles that the digital family had to overcome. For example, a sudden death of one of the family members due to a sickness or injury was a common occurrence.​<em><br></em></p><p><img src="/de/blog/PublishingImages/Articles/CreateIt/vr_game_1.jpg" data-themekey="#" alt="" style="margin:5px 0px;" />Nintendo, famous for its mascot, the plumber Mario, was no stranger to the efforts to not only entertain but to also educate children. Unfortunately, their attempts, such as Mario Teaches Typing, weren’t very popular. As the name indicates, in this game Mario teaches you how to type on a keyboard. This is done in a boring way by moving Mario from one side of the map to another, while accompanied by the worst, squealing background music there has ever been in a Mario game. I can’t really recommend typing with Mario, but if you’re looking for a good way to have fun while learning to type, try Typing of the Dead. This is probably the only game where you can shoot a zombie in the head by hitting the spacebar at the right moment.<br></p><h2>What’s next? To worlds beyond</h2><p>It seems that the most important modern milestone in the development of educational games is the rise of high-quality VR headsets. We at Cleverlance know a thing or two about this thanks to our cooperation with Virtual Medicine, a project that allows virtual reality users to have a thorough look at an anatomically accurate model of the human body. The use of VR in teaching biology and medicine is one of the major trends. One of the virtual apps, InMind, offers a close look at a human brain and its neurological connections.<br></p><p>A trip inside the human body, however, is nowhere near as popular as a VR trip to space. Once you put on your VR helmet, Titans of Space or Earth AR will take you through the Earth’s atmosphere and teach you about the solar system in a much more entertaining way than any geography teacher. My personal favourite educational project is Apollo 11 VR, and the name should tell you exactly where this one will take you. As a huge fan of the space program I am fascinated by the opportunity to try the first landing on the Moon live (well, almost).<br></p><p><img src="/de/blog/PublishingImages/Articles/CreateIt/vr_game_title.jpg" data-themekey="#" alt="" style="margin:5px 0px;" />The original application of virtual reality, however, does more than get you to hard-to-reach places. With Public Speaking VR you can try being a presenter in a conference hall, university class or as part of a job interview. There are no limits to the applications of VR, all you need is good implementation – you can start for example with the digital twin technology.​<br></p><div><p>As time goes by, our approach to new technologies gradually takes down the barriers between practical, playful, interactive education and boring memorization of facts. No matter if you're a teacher trying to share your knowledge or someone who’s trying to learn something, there’s a plethora of fun and educational ways to choose from. I think if Comenius was alive today, he’d be delighted to put the VR helmet on and explore the wide spectrum of available educational software. And maybe he'd even come up with a revolutionary app for teaching Latin.​<br></p></div>

​