1Mozilla Open Badges Design Workshop ©Patrick McGee

Super Learning Week – Year 7 & 8

2

The Open Badges Presenter

Patrick McGeeSoftware Engineer

Uclan AlumniMIT Professional Alumni

Mozilla Open Badges Design Workshop ©Patrick McGee

3

Overview

Open Badges is a great way to learn about software engineering.

In this workshop we will be:Designing Open BadgesCreating the data for our Open BadgesIssuing our Open Badges

Mozilla Open Badges Design Workshop ©Patrick McGee

4

Software Engineer

Software Engineers create programs that computers can understand in order to perform a task to solve a problem.

These computers might be:Laptops Mobile PhonesTabletsOr any device that requires a set of instructions to solve a problem

Mozilla Open Badges Design Workshop ©Patrick McGee

5

What is a Badge?

There are many types of badges and here are a few examples

A badge helps identify a person or to indicate membership of an organization or support for a cause

Mozilla Open Badges Design Workshop ©Patrick McGee

6

Badges for awards and fun things

There are badges made for awards to show a particular skill

Badges can be used as Decoration... Take a look at The pearly king and queen

Mozilla Open Badges Design Workshop ©Patrick McGee

7

There are two worlds today

The real world the world of the internet

Mozilla Open Badges Design Workshop ©Patrick McGee

8

There are two worlds today

The real world the world of the internet

Mozilla Open Badges Design Workshop ©Patrick McGee

9

There are two worlds today

The real world the world of the internet

Mozilla Open Badges Design Workshop ©Patrick McGee

10

Today we will be creating a digital badge

Lets watch some videos

https://www.youtube.com/watch?v=HgLLq7ybDtc

https://www.youtube.com/watch?v=Xc4xDgNbl6Y

Mozilla Open Badges Design Workshop ©Patrick McGee

11

A Mozilla Open Badge

Mozilla Open Badges Design Workshop ©Patrick McGee

The ‘baking’ process combines the image and the data together

12

The steps needed to create a Open Badge

Step one: Create a drawing of a badge Step two: Write down the information about that badgeStep three: Copy the drawing onto the computer using PaintStep four: Save the digital badgeStep five: Transfer the imageStep six: Upload the badge ready for ‘baking’

Mozilla Open Badges Design Workshop ©Patrick McGee

13

So lets start creating an open badge

Before we start to write any computer code, we first need a plan!

Paper Prototypes allows us to experiment and test our ideas!

Mozilla Open Badges Design Workshop ©Patrick McGee

Worksheet link: PDF: http://1drv.ms/U92QE1DOC: http://1drv.ms/U92TQg

Timebomb link: http://www.online-stopwatch.com/bomb-countdown/

14

Different styles of Badges

Mozilla Open Badges Design Workshop ©Patrick McGee