 Hi, I'm Melissa Teckman, a K-5 school librarian in Albemarle County Public Schools outside Charlottesville, Virginia. Thank you for joining me today for this K-12 online presentation about coding, making, and writing with connected learners. I'm going to talk to you today about using Mozilla WebMaker tools, especially Femble, an online website maker and remixer with your students, and I'm excited about these lessons and projects. I tried these projects this summer at the public library with teens. I wanted to see what it was like. I wanted to see how it worked and how I could learn from them and see how they enjoyed it. Mozilla was my favorite local public library, Crozet Branch, and this is actually a picture from the day they moved in. The whole community turned out in handed books from hand to hand to help them move in. I think it's a great image of how libraries and schools are so important in the community and how important it is to be connected with your community. But WebMaker tools have provided ways that students can learn to customize websites and feel empowered and not afraid to tinker and produce creative things using the web. This image from Doug Belshaw shows some teens hanging out working on some things using these Mozilla WebMaker tools. We all know Mozilla from Firefox, the web browser, but they have an educational and community outreach side to them, and Mozilla has a real commitment, the Mozilla Foundation has a real commitment to supporting individual access to the open web and to support connected learning and connected making. So who wants to use Mozilla WebMaker tools? Pretty much everyone, including my students, they told me they were not too young, so I am in the process of actually remixing some of these templates that I use with teens and middle school students to use with students as young as third grade. Here are some of my teens that worked with me this summer, and it's just this simple, some tables, some laptops, and some time to explore and play around with this stuff. It's helpful to have some paper and pencils and maybe a few inspiring extras like some books or some quotations, but once you get started, they inspire each other and they have a lot of fun. So here are the WebMaker tools. X-Ray Goggles is kind of a party trick. It allows you to look at the chunks of any website and change them, edit them, swap in images, etc., but you're not changing anything permanently. It's a lot of fun for students to, for example, change the name of their school to their own name. Thimble is the tool that I'll be highlighting in this presentation, and it is a visual website editor and website maker so that you can work online in your browser and customize websites, use some of their templates, remix things that other people have made. Popcorn Maker allows you to do the same sort of thing, but with video snippets, and then Mozilla's App Maker just came out this year and I have not had a chance to try that one. Mozilla has Web Literacy Standards for connecting and making things on the open Web. My smart goal for this year is actually to delve into these and align them with some grade-level tech competencies and information literacy standards. It's kind of a big job, but I'm hoping that however far I can get my faculty and other colleagues will benefit. I've seen a lot of interest in this. It's great to have some extra hands when you're doing these projects. As I said, I did this in the public library with teens this summer. I was lucky to have Tim Carrier from Jefferson Madison Regional Library and also Kim Wilkins. I'm on the board of Kim's nonprofit, Tech Girls. Kim has inspired me in so many ways and she's a real believer in creative approaches to coding and especially supporting girls, but really all learners in tinkering with the web and also she is really committed to a career pipeline for girls into areas where there are not enough women, especially computer science. So I'm going to walk you through the steps to run your own Web Maker event, your own lesson or your own after-school event or whatever you want to do with your students. Step one, meet with your colleagues or with any student leaders and decide if you want volunteers or if you want to involve some coding experts from in-house or from the community. Step two, plan your lessons or schedule your sessions and arrange to have enough laptops, one per person. Then you're going to want to publicize this. This is the mini poster from my session this summer, but I really think it's important to publicize interesting uses of educational technology in the school and with the larger community. So have your students make some mini posters if you don't want to, get the art class involved if you want it to look really snazzy, get your handouts ready for your lessons and the last slide of this presentation has a lot of resources so that you don't have to reinvent the wheel. You're going to need to send home a parent permission form because the Mozilla terms of service are that you have to be 18 or have parental permission in order to get a free Mozilla account and be able to save your work. Then in the lesson or the event, have a very brief introduction. Tell the students that although they know Mozilla from Firefox, Mozilla has this whole other side in which they support all kinds of creative endeavors. They believe in connecting people and empowering people to make things online. Then hand out pieces of paper with the URLs for the templates that the students are going to remix, the website where they can learn more, share that info with their families and then also the URL for the padlet. You're going to want to project a padlet that everyone in the room can contribute their finished products to. It really adds to the excitement and the collaboration. Also provide further feedback. My teens really did not want to take my Google survey to give me feedback or to suggest ideas for new templates, but they were very willing to email me and we've had some great further conversations via email. So you never know. See what method they like. Now those were the steps for running the lesson or the event and here is the content of what your students are going to be using. This is the starting point. I call it the court board. It's got two links. It's got the link to the flipping postcard embedded in it and it's got the link to the book review keep calm poster in it. And then the rest of these pinned notices are just information. So this is remixable. Add your school's name, add your name, add your contact information and then you're ready to go with that. Here's a screenshot of the Padlet where my teens shared their finished products and it was a lot of fun to see that populate and hear them say, oh, where did you get that picture or oh, I love that book. I didn't know you read that book. And so it was, I really encourage you to do that. Not just with these lessons with Mozilla Thumbel and Creative Writing and coding, but with all kinds of lessons. I think it's a lot of fun to project a Padlet and let people contribute finished products or ideas or feedback. So what does the code side look like when you're in Thumbel? This is what, this is a screenshot of the keep calm poster and in just a minute I'm going to show you the code for the flipping postcard, what it looks like. The bold print is the directions. I think it's really important if you are remixing these for younger students, I think it's going to be really important to shorten the tasks and simplify the directions. So the bold print are the directions and then the tags. You can see the code down here for the HTML and for the style features for this simple one, many poster web page. In the middle of this URL you can see that I used postimage.org and that's one of the resources mentioned on the last slide and it's a really helpful important thing to know because a lot of times your students are going to take pictures with a camera or they're going to have images loaded on, saved on their desktop of their laptop. Postimage allows you to upload those images and get a resulting URL which is what you're going to need when you tinker with the code. So for true beginners like me, the starting place is using logic and trial and error, find and replace, you find some of the text, some of the words, you replace it and then all of a sudden you've changed the website and that gives students the confidence to learn more about coding whether informally, through their own learning online, there are lots of informal ways to learn coding on your own or whether it be formally in school or in after school classes. So there's the keep calm poster, remixed into a book review poster and here's what some different kids did with it. A middle schooler made it into a keep this puppy poster and a teen wanted to stick with the whole book review idea and wanted to give a shout out to a book that she thought was underappreciated. A rising sixth grader made it into an ice cream poster. She worked really hard on this and she was really proud. A tenth grader helped her with some of the coding. Now some of your students are going to zoom right through the thimble templates especially if they've had some computer science classes, especially AP computer science. They may want to try this instead. It's called a JavaScript takeover. It's another remixable thimble template that allows you to replace the images on any website with images you choose. So one of my teens made his own browser takeover using images from Game of Thrones. This is the example of Jacob's takeover. I tested it on a Wikipedia article on dogs. Another teen made her homage to her favorite musician, Josh Ramsey. She called hers the Hey Ramsey JavaScript takeover. Here's the flipping postcard. This was originally coded by Kim Wilkins and I remixed it into a book review postcard and I'm just going to take you to the live link so you can see what it looks like. It's a flipping postcard and it's got sound embedded in it. There's the remix button for students to remix it and I'm going to just hit that remix button so you can look at the code. This is a lengthier process than the key composter because there are more options for customizing. You can change the words, the image, the colors, the text, the font, the rotational speed of the flipping postcard. You can change the sound file to no sound or add a new sound file. It's got a lot of different choices in here but you can keep it really simple. If you wanted you could edit this down to a simpler postcard for younger students. That would work too and one of my teens just remixed it back into a basic postcard which you were here and he added some tropical music. This is a template of a poem. This would be a really fun project for creative writing class. They come to class with a poem and they remix this template. I'm just going to go to the live link. I used a template originally made by Kevin Hodgson, a wonderful, generous language arts teacher. I added my own poem. I changed the colors and the images. My poem is called Wild China. You can just read it like that by hovering over. I love the look and I think students would really enjoy this too. There are lots of possibilities here to connect your students with other students, with colleagues, with coders, with artists, with writers. There are huge possibilities and I think it's really important to let your students start brainstorming their own ideas for connecting around these topics of coding and writing in creative ways. Further possibilities, blended literacies. This is a concrete poem that a second grader wrote. I have been mulling this over for a while and I'm convinced that it would make a really cool, kinetic poem if I worked with her to add some circuits and plug it in, plug it via a makey makey into a laptop and then get a teen to do the coding side of it, get a high school student to do the coding side of it so that as my student touches parts of her poem, perhaps the thimble template would show it moving or maybe the poem unscrolling. It's wonderful to come up with these creative possibilities. So these are all my resources and please feel free to contact me, reuse anything on here. There's lots of editable and reusable stuff on here. At the very bottom you'll see two links to some hopeful Mozilla sites, places where you can learn more and places where you can get badges to give to your students. So dive in, start anywhere, have fun and you'll be amazed at what your students do. Thank you so much for joining me.