#notatiste15 – Creating Ribbons

Again this year I am not at ISTE and I am participating in the #notatiste15 community on Google+ and Twitter. One of the fun things we do as a community is make our own badges complete with ribbons because if you’re at a conference or even not at a conference, you need badge, right?

Here’s mine so far this year:

The Google+ community can participate in the challenges that Jen Wagner has put together and there are even prizes! This year, one of the challenges is to create a ribbon and share it with the community. I use Photoshop and this template to create the ribbons but a lot of people don’t have Photoshop so how can they create and share ribbons? There are a lot of ways this could be done even without Photoshop and here are a few ways to try this online.


Use one of the ribbons found in the #notatiste15 Badges & Ribbons Folder and use Google Drawings to create a ribbon. You can recolor the ribbon using Image Options on the ribbon and then select a Gold color for the text. The standard ribbons (and this one) use the Times New Roman font in Bold and all upper-case letters. You can then use the File / Download As / and choose PNG (to keep the background behind the ribbon transparent) to save your ribbon as an image to share.
Google Drawing
Another option in Google Drawing is to create the text somewhere else and combine it with a ribbon in Google Drawing. For this option, I used the Online Gradient Text Generator at Picture to People and then instead of entering text in Google Drawing, I inserted the text image on top of a ribbon and sized it to fit on the ribbon.
Google Drawing and Picture To People
One note on Google Drawing, you should resize the canvas (use the 3 lines on the bottom right) to fit to the ribbon so you don’t have a huge image with a lot of blank space with a ribbon in the middle somewhere.


Download one of the ribbons found in the #notatiste15 Badges & Ribbons Folder and upload it to Lunapic. You can use the Adjust / Adjust Colors and/or Adjust Light Levels options to change the color of the ribbon. Then, use the Draw / Text Tool to enter the text. There are lots of font options though I don’t know that Times New Roman is one of them. You can set a solid color by entering a hex code in the Color box – #CCAC00 is a good darker gold color and #FFD700 is a good lighter gold color. The fun thing with Lunapic is that it has a Gold Glitter option under Pattern (that’s what I used) and it even creates an animated GIF but it won’t be animated if you add it to other ribbons and the badge. Use the Save To Your Computer option to save your ribbon as an image to share.


Again, download one of the ribbons found in the #notatiste15 Badges & Ribbons Folder and then use the Open Image From Your Computer option in the Pixlr Editor to upload the ribbon for editing. You can use Adjustment / Hue & Saturation with the Colorize option checked to change the color of the ribbon. Then use the Text option on the Tools Palette to add your text. This will create the text on a new layer and you can play with options for the layer to get a more gradient gold look to your text. Again, the hex colors of #CCAC00 (for a darker gold) and #FFD700 (for a lighter gold) are good places to start with the color for the text. Use File / Save to save your ribbon – the defaults for a transparent PNG and full size are good.


Again, download one of the ribbons found in the #notatiste15 Badges & Ribbons Folder and then click Edit on PicMonkey to upload the ribbon for editing. You can use Basic Edits / Color and then play with the Saturation and Temperature sliders to recolor your ribbon, if desired. Use the Text Option (Tt) and then click Add Text to insert a text box. There are lots of fonts and you can upload your own. Times New Roman is an option on PicMonkey. As on the other sites, the hex colors of #CCAC00 (for a darker gold) and #FFD700 (for a lighter gold) are good places to start with the color for the text. Use the save option to save your completed ribbon to your computer.

Just a few of many options available for adding text to the ribbons and even changing the ribbon colors. As you can see from the above examples, getting the text to be shiny is what’s tough to do. If you’re interested and you don’t have Photoshop, check out SumoPaint or download and install GIMP and check out this tutorial.

Hosting a website on Google Drive

In past years, I have had students create a website using HTML and CSS and then upload their site to a folder on Google Drive. The directions that I had in place for this do not work with the new Google Drive but it is still possible to do this:

  1. Create a folder on your Google Drive and publicly share it. I don’t think this works with anything but publicly shared folders but you could try it and see.
  2. Upload the HTML, CSS, image files, etc. into the folder created. Do NOT convert the files!
  3. Copy the ID from the link shown for the folder; i.e. https://drive.google.com/folderview?id=0B9SpIwhzRZ4odF9uVUdNZzRYcU0&usp=sharing, you would copy the part after id= and before &usp=sharing.
  4. The website would be located at http://googledrive.com/host/ID_copied_in_Step3/index.html. For example, the “Hello, World” site for the ID above, is located at http://googledrive.com/host/0B9SpIwhzRZ4odF9uVUdNZzRYcU0/index.html If the main page of your website is something other than index.html, this should be changed in the link.

As you can see, the link to the site is long and not easy to remember so I usually have students use a URL shortener for sharing. Google’s URL Shortener is a good choice especially for Google App schools because you can track how many times the link is used using your Google Apps account. I also recommend TinyURL because students can create a short URL that includes a custom name that makes sense without creating an account.


If I Could Only Use One …

This year in the Computer Lab, all of my classes spent some time learning to code or learning coding concepts. As I look back on what they accomplished and learned and think about what I want to do next year, I had a thought. If I could only use one app/program/website, what would it be? Honestly, if I had to pick only one, it would have to be Scratch.


This year, 2nd grade through Middle School used Scratch, among other programs, and I love the flexibility it offers. Here’s some of what my students did in Scratch this year:

Drawing Shapes
Many of the grades created a project that would draw shapes. This was a great project to use for multiple grade levels. 2nd graders could guess and try and when it didn’t work, try again. 3rd graders could think about the math involved and check their guess by multiplying the number of times the loop would repeat by the angle of the turn. 4th graders and above could divide 360 by the number of times the loop would repeat and calculate what the angle of the turn should be. Middle School students could use variables to set the number of sides and set the color to use based on a random number. Check out our Shapes Studio to see student examples.

All About Me
Who hasn’t done an All About Me poster or writing assignment with students? I know I have done these in PowerPoint and in Word. Why not let the students program something about themselves. That’s exactly what my 2nd-4th grade students did with their All About Me projects. This was completed right at the end of the year and unfortunately we ran out of time but I see great possibilities here. What about “All About” a main character in a book or a historical figure?

I don’t know about you, but most of my students love video games. I love that Scratch lets them create their own games! This year, 6th grade ended the year by creating a game of their choice. They ran out of time but had a lot of fun and learned a lot about controlling sprites, keeping score, winning and losing games, etc. You can check out their games in our 6th Grade Scratch Studio – also in that studio are their Shapes projects and a 10-block Challenge Project where they had to create something using only 10 specific programming blocks.

Mission Projects
Every 4th grader in California does some kind of Mission Project. Each year in the Computer Lab, I use Mission Research to help teach students about not plagiarizing and how to credit sources, etc. This year, I decided to expand on that and my 4th graders created a project in Scratch about their missions. Scratch could be used in almost any curricular area and I plan to have more grades do curriculum related projects next year. If you want to check out this year’s projects, head over to our 4th Grade Scratch Studio (which also has their Shapes and All About Me projects) to see them.

If you want to see all of the projects my students did this year in one place, check out our 2013-2014 Studio.

Do you see now why I love Scratch? The possibilities are endless!

You do have to have a log in to save work on the Scratch website and yes, you do need an email address to set this up. My students don’t have individual accounts – at least not for school; some of them do have accounts they have set up at home. I have a single account for the Computer Lab but you could easily have one per class or one per grade, for example. At this point, you can have multiple computers logged in to the same account but my students actually work offline.

We have Scratch 1.4 installed on the computers in the lab and 2nd and 3rd grade have been using that version to create their projects. Next year, I will probably install the Scratch 2.0 offline editor rather than continuing to use version 1.4. For 4th grade and up, students just use the Create option on the Scratch website and Upload (open) and Download (save) their work to their computer in the lab. This is a great teaching moment about why it’s “upload” to open your work and “download” to save your work. When a project is finished then I log in and let the student save their work to the class account. The big thing missing when working offline is the backpack but the few times we have needed this, I just log the student in and when they’re done using the backpack, have them log out again. If you want more details on this, check out my Using Scratch With Class Login Instructable.

Now back to that if I could only use one thing. Yes, it would be Scratch but Scratch isn’t perfect. What is?

  • Scratch isn’t good for students who aren’t reading yet. Scratch, Jr. is scheduled to be released soon but it’s going to be an iPad app which won’t work in our lab.
  • It’s been another teaching moment to have 2nd and 3rd graders use Word to write their text for Scratch so they can fix spelling errors and then use Copy and Paste (must be CTRL+V in Scratch) to move the text into their Scratch project. It would be nice to be able to have spell check built into Scratch to avoid that though.
  • I love the way that the activities at Code.org let you see the code you are writing when you use their block programming environment. This would be awesome in Scratch and in my opinion, would create a truly great transition from block programming to a more traditional programming environment.

Luckily, I don’t have to use only one app/program/website to introduce Computer Science concepts and coding to my students. Even though I have many choices, Scratch will still be one of my primary choices!

Are you teaching coding to your students? What would be your ONE choice?

Going Back In Time

I have been using Wikispaces as my online Computer Lab for the past two years. Prior to that, I had a website that I manually maintained and updated from home. I made the switch so I could easily update the information for my classes whether I was at home or at school or wherever I am as long as I have access to the Internet.

I could have switched the computer lab site to a blog or to Weebly or to some other online site creator but I chose to go with a wiki for a variety of reasons. One of the main reasons was that I wanted to have some of my students create content for the wiki at times and it’s easy to do this with Wikispaces since I can set up student login information without my students needing to have email addresses. I recently was reminded of another advantage of using a wiki and it again made me happy that I had made this choice.

I was working on lesson plans and knew that I had done the same type of lesson last year and had found and used some web sites that would be great again this year. I checked my Delicious links but couldn’t find what I needed (I really need to tag things better in my links but that’s the subject of a whole different post) and I checked my Google Document from last year’s lesson plans and I hadn’t listed the sites there either. Then came the AHA! moment – I had used a wiki! I knew I had done the lesson about the same time last year, so using the History Tab on the wiki page for the grade in question, I just went back in time and found just what I was looking for.

Wikispaces History Tab
Wikispaces History Tab

Hooray, I had the information I needed without having to try to search for the sites again. I’m a big fan of not re-inventing the wheel and Wikispaces helped me to not have to!