The Pennsylvania Educational Technology Expo and Conference (PETE&C) is a statewide event that provides quality programs focused on technology in the educational field. Each year, hundreds of exhibitors showcase their latest technology products and services to the vast audience of teachers, administrators, technology directors, school board. Educational Technology Research and Development is the only scholarly journal in the field focusing entirely on research and development in educational technology. The Research Section assigns highest priority in reviewing manuscripts to rigorous original quantitative, qualitative, or mixed methods studies on topics relating to applications of technology or instructional design in educational.
2. What do you see hanging on the background of the room?
From CSUN Stuff
4. What countries do you think the caged animals represent?5. What do you think the title of the cartoon implies?
|From CSUN Stuff|
4. What countries do you think the caged animals represent?
5. What do you think the title of the cartoon implies?
The Educational Technology course is designed to prepare teachers for all different grade levels with skills, concepts and understanding among other skills to integrate technology in their lessons to enhance learning as well as to make learning more effective. After we reviewed apps for creating story books with students, today's post features a collection of educational apps students can use to design animated cartoons. These can be used for a number of educational activities including: digital story telling, multi-media literacy-based projects, expressive writing, communication activities, and many. Ms Farah made use of “concept cartoons” in her lesson. Concept cartoons are “cartoon-style drawings presenting characters with different viewpoints around a particular situation” (Roesky & Kennepohl, 2008, p. According to researchers Brenda Keogh and Stuart Naylor (1999), concept cartoons are extremely versatile as a teaching.
|From CSUN Stuff|
|From CSUN Stuff|
From CSUN Stuff
|From CSUN Stuff|
|From CSUN Stuff|
|From CSUN Stuff|
People sometimes tell me these days “wow julia, you are so good at drawing, it is so cool!”
I think this is kind of funny because, this is what happens when I try to draw animals.
But! There actually is a skill to explaining technical concepts to people with drawings. And Ithink I’ve become pretty good at that skill! It is just a different skill than like “drawing anelephant that looks like an elephant”
Edtech Cartoons Images
This post is about a few patterns I use when illustrating ideas about computers. If you areinterested in using drawings to teach people about your very favorite computer topics, hopefullythis will help you!
Let’s talk about how to structure cartoons and how to translate computer concepts into pictures!
cartooning isn’t about drawing skills
Just to emphasize it again – this is basically the entire visual vocabulary I use.
I think of tech cartooning as being about cartooning skills! I need to be good at:
- using a very small number of words to express an idea (for example this mutexes cartoon has maybe 60 words in it)
- breaking something down into simple concepts (“what are the key ideas you need to understand DNS?”)
- staging relevant scenarios (“what’s a good example to use to show how a mutex works?”)
Here are some tactics I like to use when drawing!
personify the characters
I do a lot of personification/anthropomorphization – I’ll take a system and turn it into a cast ofcharacters who talk to each other. For example, here’s a scene from Kubernetes: the kubeletcomponent is talking to the API server
This is useful because
- it emphasizes that the “kubelet” and the “api server” (whatever those are) are important conceptsin Kubernetes
- it shows you that those two components communicate with each other
- it’s more fun than reading a paragraph saying the same thing
Here’s part of the cast of characters from my networking zine: (a laptop! a router! an operatingsystem! a program!)
Taking a complicated computer system and breaking down “ok, these are 3 main important characters inthis system” is incredibly useful.
show a scene
The next step after just making your characters is to put them into scenes and make them interactwith each other! So once you’ve established “the important characters here are the laptop, the DNSserver, and the HTTP server”, you can show how they actually work together in real life.
Here’s a scene with two humans talking:
and one with two programs who are both using the same mutex:
I think this scene (with program 2 thinking “not my turn yet”) is a pretty clear way to explain whathappens when a mutex is in use, and I think it’s faster to understand what’s going on than if youread a paragraph explaining the same thing.
make a list
I make a LOT of lists (for example, this post itself is a “list of things I’ve learned about making comics:)“). A few examples:
Here’s part of a list of networking tools and what they’re for
a list of attributes of a Unix process
and a list of strategies for asking good questions
A few things I love about making lists:
- you can make a list of steps (step 1! step 2! step 3!)
- it’s a really clear structure and so they’re easy to understand
- it’s a nice way to teach someone something new (maybe you list 10 interesting things, and theyonly knew about 7 of them!)
- none of them claim to be exhaustive (I didn’t say those were all the attributes of a process!)
- sometimes I learn surprising things while making them. For example I started listing Linuxnetworking tools and I was really surprised by how many of them there were (I ended up listing24 of them!) (here’s the whole list)
make a diagram
A big part of the joy of hand drawing comics is that I can really easy make diagrams to explain whatI mean! No fiddling with LaTeX or graphviz or anything.
Here’s part of a diagram I made to illustrate memory fragmentation:
and a slightly more involved diagram showing the structure of a UDP packet:
I love that I can use arrows / colours to emphasize things I think are important or give extrainformation. Like in this UDP packet diagram I greyed out fields that I thought were less important(like the “fragment offset”, which is definitely less important to understand than the source IPaddress).
make a joke
Computers are often really confusing and surprising. This can be kind of frustrating (“what is myprogram even doing?!!?!“) and also kind of funny! I think all the weird stuff that happens is part ofthe joy of computers! So sometimes I try to make jokes.
Here’s the Kubernetes scheduler all worried because it noticed a pod that it hasn’t been scheduled.(scheduler: “OH NO! I was supposed to have done that already! julia will be mad!”)
and a silly “C is for linearizable” joke (because the C in “CAP theorem” stand for “consistent”. But“consistent” is a pretty unclear term, so it’s more precise to say that it sounds for linearizable.So confusing!“)
just write some text
I like using cartoons but sometimes I’ll just write a paragraph. Here’s the start of a page aboutdstat:
This basically just says “every second, dstat prints out how much network & disk your computer usedthat second”. I could have typed that! But I think writing it by hand emphasizes like “no, this issomething I really love, I love it so much I wrote it out by hand and made a picture to show you!”
paste some computer output
Sometimes I want to paste and discuss some output you might see on a computer. For example, when Imade my strace zine I realized that a lot of strace output is really confusing. I wanted to pastesome actual strace output to talk about!
Luckily that is really easy to do in a drawing, because you can just put anything you want in it!
At the beginning I said “I can’t draw well”, which is true! But I can trace things. It’s a funway to make up for my lack of drawing skills.
It’s useful sometimes to include logos / icons! For example here are versions I traced of theKubernetes logo, the Recurse Center logo, Tux (the linux penguin), and a cat. The cat isn’tanybody’s logo as far as I know.
The hand-traced versions of these logos are kind of wobbly and imprecise in a way that is prettysatisfying to me, I think they look cool.
designing your comics
You have a blank sheet of paper in front you, and some information you want to convey! How do you doit? Having a few structure patterns really helps. Here are some examples:
Here’s one way of making a list:
A list of many small things:
and yet another list, here a list of steps. This one is organized into numbered panels!
This one is more of a normal comic and less of a list – it’s visually laid out withsquares/rectangles like a comic, and tells a bit of a story.
And finally this one is pretty unstructured. Personally I find this one a bit hard to toread/follow, I think having more structure than this is easier.
I think panels are a popular way of structuring comics for a reason, they help split up yourdrawing and make it clear what order the comic should be read in.
just making something a cartoon doesn’t necessarily mean it teaches what people need to know
I’m going to pick on another cartoon a bit here which I don’t really like to do but I need anexample :).
There’s an extremely adorable guide to Kubernetes called The Children’s Illustrated Guide to Kubernetes.
I think this cartoon is cool and introduces a lot of important ideas. But for me personally Icouldn’t understand how Kubernetes worked at all until I understood the role of etcd in Kubernetes(all the Kubernetes state is stored in etcd and every other Kubernetes component is stateless). Andthis cartoon doesn’t mention etcd even once! So I don’t think this cartoon would really have helpedme understand Kubernetes.
I think there are kind of 2 ways to use drawings to teach:
- draw diagrams / cartoons that make what you’re teaching more clear
- use drawings to make what you’re teaching more fun
Edtech Cartoons Funny
Making concepts more clear and more fun are both great goals! Making things fun can be a good way tomake people pay attention and make hard concepts seem less intimidating!
But when I’m working on illustrations I find it useful to think about whether my drawings areactually helping explain the concept or whether they’re just fun (like drawing a picture of a sharkwhen talking about Wireshark!).
In this children’s illustrated guide to kubernetes, I think the drawings mostly serve to make thecontent seem more fun – almost all the actual content is in the text. I think if you removedall the giraffe drawings the document would contain basically the same information! This is not abad thing necessarily but I usually like to have more informational content in my drawings.
tools that make it easy
The tools I use today to make these are (see this interview for more)
- a Samsung Chromebook Plus (though any samsung tablet with an S-pen will work. Or an ipad with theapple pencil!)
- the Squid app for Android (goodnotes for ipad is good too!)
- that’s it!
Having a tablet I can draw on means I can really quickly draw something, click “share on Twitter”and immediately show it to the world. I definitely produce way more drawings with it than I did whenI was working with pen and paper. And they look way better :)
drawings don’t have to be beautiful to be awesome
I started out by drawing things on paper with a pen / Sharpie and just taking pictures. They alllooked way less good than everything I’ve posted above, but they were still really cool!!
For example here’s a very early drawing that I drew in pen on paper and posted to Twitter. Today Ifind this kind of janky & illegible but honestly when I posted it I got TONS of positive comments(evidence).
So drawings do not have to be beautiful and clean! They can be a sketchy thing you wrote on paperand that is okay.
how do you decide what’s a good subject for a tech cartoon?
Let’s take this comic on floating point I made last year! For that one, the steps were:
Edtech Cartoons Cartoon
- Remember that I was really confused about floating key point until I learned a few key insightsfrom Stefan Karpinksi. When I learned these things my mind was totally blown and it was soexciting!!!
- a double is 64 bits. That means there are only 2^64 floating point numbers!!!
- The smallest double after 2^52 is 2^52 + 1 (so 2^52 + 0.2 = 2^52).
- Think “well, those three things are really simple, I could put them in a comic”
- Figure out how to organize them into panels of a comic!!
- Don’t draw more than one page.
Edtech Cartoons Youtube
Here’s the final floating point comic I came up with in this example
I organize a lot of my comics about some key insight / fact / surprising thing that it took me along time to learn and was really useful to me.
Another example of this is this “how Unix permissions work” comic – like if you don’t know that‘0644’ is a number in octal and why it maps to
rw-r--r--, it’s hard to understand how permissionswork. Here’s the comic about unix permissions.
you could make tech illustrations too
If you are interested in drawing tech cartoons, I hope this blog post gives you some ideas about howto do that! I’ve seen a lot of people making great illustrations about tech:
If you’re interested in making cartoons I’d really recommend the book Understanding Comics, by Scott McCloud, it’s a reallyincredible explanation of how comics work. I learned a ton from reading it.
A few other people who are doing great work in tech comics:
- Lin Clark https://code-cartoons.com/ (a lot of React cartoons). She also has some awesome posts aboutFirefox internals like Inside a super fast CSS engine: Quantum CSS (aka Stylo)
- Amy Wibowo https://bubblesort-zines.myshopify.com (computer science zines!). I previously wrote anextended fan post about how great I think her work is.
- Mariko Kosaka https://twitter.com/kosamari tweets cool drawings! like this one about HTML1.x vs 2.x
- Vaidehi Joshi has been making awesome CS comics at https://medium.com/basecs