Effective Web 2.0 Tools for the Classroom:

Part 4

Johan Eddy Luaran

i-Learn Center

Universiti Teknologi MARA

2014

First Published 2014

All right reserved. No part of this publication may reproduced

or transmitted in any form by any means, electronic or

mechanical including photocopying, recorded or by any storage

information or retrival system, without the prior written

permission from the author.

CONTENTS

CHAPTER 1 POWTOON ........................................................................ 1

CHAPTER 2 IMAGECHEF .................................................................. 15

CHAPTER 3 BITESLIDE ..................................................................... 40

CHAPTER 4 FOTOFLEXER ................................................................ 55

CHAPTER 5 SHAPE COLLAGE .......................................................... 73

CHAPTER 6 STUPEFLIX .................................................................... 97

CHAPTER 7 PIXTON ......................................................................... 114

CHAPTER 8 SCRATCH ...................................................................... 124

CHAPTER 9 GOANIMATE ................................................................ 130

CHAPTER 10 FOTOR .......................................................................... 134

CHAPTER 11 KIZOA ........................................................................... 149

CHAPTER 12 MUSEUM BOX ............................................................. 157

REFERENCES ...................................................................................... 163

1

Website: http://www.powtoon.com/

Description

Powtoon is an online service to create interesting animated features such as

handwriting animation, cartoon animation, transition effects and more. Almost all

features can be accessed in a single screen making Powtoon easy to use. Features

such as built-in cartoon characters, animated models and other objects make this

service suitable for instructional media creation, able to cater to the need of students

who love the relaxed atmosphere and non-formal learning in the classroom.

Suggested Activities

Students can use Powtoon to create amazing video and presentation.

CHAPTER

1 POWTOON

2

POWTOON create interesting animated features such as handwriting

animation, cartoon animation and transition effects. The time line for

the transition can be easily edited too.

3

You may also choose any video and presentation that

has been created by POWTOON.

Click this to see

the example

Click “Start Now” to

create a new

POWTOON

4

You can also use

this application to

create a new

animation

according to your

own creativity.

POWTOON can also be downloaded to your computer. This makes it easier for

your POWTOON to be uploaded to You Tube and shared with others.

5

You can also animate your presentation to make it powerful.

POWTOON makes your video graphic

design beautiful

6

POWTOON also can attract attention and

increase interaction.

7

Videos on any page can be made creative by using the

various applications available on POWTOONS.

POWTOON also features a few testimonials for you to see how

others has made used of the platform and achieved their goals.

8

Before you start,

make sure you have

signed up.

You can choose to log

in through your

Facebook, Google or

Linkedin account on

the POWTOON

website

9

Click to choose a blank project

Click start to continue

10

Click to insert title and

description of your file.

Choose any favorable template available

Then, click create

11

Click edit button to start

This is the main view of the application

12

This left pan shows

the existing slide(s).

This is the play button.

You can click to play your

animation

This is the time line

Variety of styles is

available as a theme of the

animation to be chosen

This is the text effect. Click to

choose the best text effect.

You can also choose any

character here

Include props to make your

presentation looks good

You can choose and change the

background here

13

This is an example of another wallpaper

Start your power point with text effect. This is just as an

example. You can also choose other effects.

14

The effect will look like this.

15

Website : http://www.imagechef.com/

Description

This website is a fun web tool that transforms word into graphical image. It allows us to

make template, timeline cover, meme maker, and also word mosaic. Register user also

can create their own shape to graphically display text. Word mosaic can be shared on

blogs, Facebook, email, printed materials or saved the image in the image chef.

Suggested activities

Use image chef to create timeline cover, template, graphical word mosaic and edit

photo frame.

CHAPTER

2 IMAGECHEF

16

SIGN IN TO IMAGE CHEF

Before you start using Image chef, you need to sign in. You can sign in manually

or sign in using your Facebook accounts. If you are already an image chef user,

you can just log in and get started.

17

ACCOUNT SETTING

After you log in., you can view your account setting

here

18

Example of an account setting

The credits allow access to

silver level with more

interesting features

19

ACTIVITIES IN IMAGE CHEF

Here, you can see who your followers are

and who you are following.

You can also invite friends to

become your followers

These are all the activities that we can

create in image chef

20

You can make a timeline cover using Image chef. It has varieties of templates to choose from

that creates an interesting timeline cover in no time!

MAKING A TIMELINE COVER

21

22

Share the timeline cover on Facebook

23

Meme maker allow you to add text to the photos you upload to make it more meaningful.

MAKING A MEME MAKER

24

Word mosaic is an interesting tool which enables words to be arranged graphically.

MAKING A MOSAIC WORDS

25

You can share or save it into :

26

Flower text makes the texts move. It’s similar with gif graphics.

MAKING A FLOWER TEXT

27

You can edit your picture using the various type of frames.

MAKING A PHOTO FRAME

28

29

Poetry blender is a tool to create a video. We can make poetic video using Image chef. Any

poet can be entered into theme and it will appear as video.

POETRY BLENDER

you can choose

any theme that

you like

insert text

30

choose any symbol

31

You can make a banner for your blog using this tool.

MAKING A BANNER

You can choose any

banner style here

Example of banner

style

Insert text

32

Choose any symbol

that you want to

include

Example of a

completed

banner

33

MAKING A JERSEY

You can choose the

colour of your text

You can choose

the colour of

stripes on the

jersey

You can choose the

color of the jersey

Front view of the jersey Back view of

the jersey

This is the

view from the

back

34

The front view of

the jersey

This is an example

of a football

jersey

This is an

example of a

basketball

jersey

35

This is an example of a

soccer jersey

This is an example of a

baseball jersey

36

MAKING A RIBBON

Insert the text

You can choose the color of ribbon here

Example of ribbon

You can send or share

with others via different

platforms

37

MAKING A SYMBOL

You can pick any style that

you like

38

Type in your text

Choose symbol

Some examples of symbol

that had been chosen

You can choose the background

colour, shape and outline

Type in the

text

39

GET IMAGE CHEF IN YOUR SMARTPHONES & IPHONE

You can download Image chef application in

your Smartphone’s and tab to get the latest

version of tools and experiences more on

Image chef. You can download Image chef from

the Apple or Android app store.

40

Website: http://www.biteslide.com

Description:

Biteslide is an engaging platform for creating school projects online. They are easy and

fun to use. It develops students’ creativity, collaboration, communication, and critical

thinking skills. Biteslide is especially designed for teachers and students, and the

teaching environment.

Here are a few examples of students’ work:

CHAPTER

3 BITESLIDE

41

Biteslide gave a new meaning to the typical school project and help to develop student’s

21st century skills through a creative, engaging, and efficient platform.

Suggested Activities:

Create a “scrapbook” by doing ‘collage’ activities. This encourages engaging learning

visually.

What Is Biteslide?

42

43

44

How to Create A Project:

45

46

You can choose where the

resources is available to you

47

48

You can add your text or

explanations about your

slideshow.

You also can change your

background style.

You can download it and use

it as your reference.

Besides that, you also can

print and use it as your note.

49

50

51

52

53

54

55

Website: http://fotoflexer.com/

Description

FotoFlexer has a range of tools that make it an attractive choice for users. It also offers

plenty of features that appeal to users who desire creative images. Features such as

glitter text and animated graphics will make the kids love to add these effects to their

photos.

Suggested Activities

Get the students to build their own collage for their parents on Parent’s Day.

CHAPTER

4 FOTOFLEXER

56

• This is a free on-line photo editor.

• Upload a photo from your computer, camera, storage device, or a social networking site.

FotoFlexer

http://fotoflexer.

com/

57

58

59

60

61

62

The Decorate tab allows you to add things to your photo, including stickers and text.

Stickers can be used for a variety of effects

An animation lets you add animated stickers.

Beautify allows you to touch up blemishes and wrinkles (not high quality).

63

64

Distort lets you twist the photo into a number of odd shapes or distortions.

These tools are very simple and are best used for fun projects

65

66

67

You will be shown a window for you to upload your photos.

You can choose a different location in the dropdown menu, or you can look in other

folders in your libraries.

Click on the photo you want to edit.

Then click open.

Waiting for the image to load.

68

69

70

The normal feature of a random photo

uploaded.

71

72

This tutorial only showcased a few features out of so many more interesting effects available. Explore

more to understand how this can be used to maximize students’ potential in their projects.

73

Website : http://www.shapecollage.com/

Description :

Shape Collage is a photo collage generator. With the help of Shape Collage, you can

draw your own form, upload an image to serve as a pattern or use text with a specific

font.

Suggested Activities :

Students can draw your own form, upload an image to serve as a pattern or use text

with a specific font.

CHAPTER

5 SHAPE COLLAGE

74

When you open Shape Collage, this is the first page that you see.

75

For the first step, you can click the button as indicated by the arrows. After that, a file photo will

be opened.

Next, you may choose and drag any file in your gallery that you want as shown

above.

76

The photo that chosen will be automatically dragged to the box on the left side as

shown by the arrow above.

77

Firstly, we go to the “Shape and Size” tab as shown in the picture above. When you

click “Shape and Size”, we can see there are many options that are being provided for

the users. Reset setting is used to reset the shape, size and so on, in order to create a

shape collage.

Shape and Size

78

Secondly, we go to the “Appearance” tab as shown in the picture above. When you

click it, we can see options such as color, transparency, and photo are being provided

to aid the making of a new project. Reset setting is used to reset the shape, size and

so on, in creating a shape collage.

Appearance

Color

Transparent Photo

Color

size

Reset setting

79

Next, we go to the “Advance” tab as shown in the picture above. When you click it,

options such as rotation, shadow and options are provided for the users. Reset

setting is used to reset the rotations, shadow and options.

Advance

Rotation

Shadow

Options

Reset setting

80

You can choose and click any shape that you want, and click the “Create” button. For

example, you click the “Heart” shape and then click the “Create” button. So, the “Heart”

shape will be formed as shown above.

Heart

Click “ Create “ when you

change anything. Then the

image will be changed to a

difference shape that what you

want.

81

Next, type any word that you want and you also can change the font text given as

above.

82

After that, you also can adjust the “Text spacing” and “ Vertical text”. Click the “Close”

button once you are done.

The “Text” shape will appear like this.

83

Click “Custom” and types of shape will appear. Choose any types of

shape given, and click “Close” button.

84

The shape will appear like this, and you can click “Done”.

Click the “Create” button to get the selected shape as a collage.

85

This is the result of the selected shape.

After you choose the shape that you want, you can also adjust the shape

using the types of size as shown above.

86

The function of “Appearance” is to adjust the “Background” and “Border”

in your collage. For background u can also choose to have it either “Color”

or “Transparent” For example, click the “color” button and choose your

own color as you want and click “Ok”.

After that, you can click “Create” button.

87

This is the example of a result of collage background that have been created.

Furthermore, you also can change the “Border” by using the color that you want.

88

Adjust the “Size” and click the “Create” button to get the result as shown above.

Other than that, you also can get the different types of backgrounds such as “Photo”.

For examples, click the “Photo” button, and the file photo will appear as shown above.

After that click your selected photo, and open it.

89

Click “ No” to get a different size.

This is the result of selected background.

90

Besides that, if you click “Yes” to get the same size, the background and the collage will

become smaller than before.

The functions of “Advance” is to change the Rotation, Shadow and Options. You can

change the level and click the “Create” button. The result will come out with a difference

shape and last click the “Save” button.

91

Picture below shows how to add photo from a web

You can also add photo from web such as Facebook, Instagram and so on. Firstly, click

file and then click “Add photo from web”. After that, the page will appear.

92

For example, log in with your Facebook and click “ Okay”

93

As usual, choose your own photo and click “Done”. Then, the photo will

appear as shown.

94

To create this shape, use the same way as shown above.

Click “Exit” to close the “ Shape Collage “

95

Example of Shape Collage

96

97

Websites : studio.stupeflix.com

Description

Stupeflix is a web application that create awesome video with just a few clicks. It can

import pictures and videos from files on the computer, by recording them with webcam,

or from a Facebook, Dropbox, Picasa or Flickr account. It can add music by uploading a

song from our existing library. It also can add voice-over by uploading a sound file, or

using computer voices that read the text.

Suggested Activities

Make a personal video with a theme on the students’ childhood memories.

CHAPTER

6 STUPEFLIX

98

STEP 1 :

STEP 2 :

Click here to enter

the website

Enter the email

and the password

99

STEP 3:

STEP 4 :

Click ‘add photos & videos’ to

insert the photos and the videos

Insert slide title here

Choose the video

theme.

100

STEP 5 :

STEP 6 :

Click here to upload the

photo / video from computer.

It also can import the photos/videos

from Facebook, Instagram, Flickr,

picasa and dropbox.

101

STEP 7 :

STEP 8 :

Some example is from Facebook.

First, you must connect to your

Facebook account.

Example from Facebook

102

STEP 9 :

STEP 10 :

Drag the photo

Folders from your

Facebook account

103

STEP 11 :

STEP 12 :

The photos / video can be seen

here after uploaded.

Add text to overlap on

the picture.

104

STEP 13 :

STEP 14 :

Add videos

Here some of the photos and the video.

105

STEP 15 :

STEP 16 :

The text overlay the

picture.

The video.

106

STEP 17 :

STEP 18 :

Click here to produce

and share.

Click here to produce

the video

107

STEP 19

STEP 20 :

Process to render the

video

The video is done!

108

STEP 21 :

STEP 22 :

You can share it to

Facebook.

It also can share it to Twitter.

109

STEP 23 :

STEP 24 :

Sign in to Facebook to publish

the video if you want it to be

uploaded.

110

STEP 25 :

STEP 26 :

It also can be

downloaded as media.

It also can be uploaded

on Youtube.

111

STEP 27 :

STEP 28 :

Download in progress.

The video is done!

112

STEP 29 :

STEP 30 :

The video will then be

saved automatically at the

website.

113

STEP 31 :

STEP 32 :

Click here to log out from the

website.

Main page

114

Website: http://www.pixton.com/

Description

Pixton is the easiest and simple way to make comics without any cost. Anyone can use

it for hobby, learning or business.

Suggested Activities

Students can create their own character, their own comics with variety of art in it. It is

also suitable for beginner.

CHAPTER

7 PIXTON

115

116

Register to start. You

may also log in via

Facebook or Google

117

First, you create or choose

your own character

118

Then wait for a minute

119

You can click this for

advanced and create

something unique

120

You can save it if you

want to use it again

later

121

After you done with character, you can

go to second step, create comic

Then you can choose any

comic format that you want

122

123

You can put more than one

character to make your comic

creative

After you have completed your

comic, you can save and

publish your comic! Others can

read your comic too!

124

Website: http://scratch.mit.edu/

Description

Scratch is designed with learning and education in mind. Scratch is a programming

language that makes it easy to create your own interactive stories, games, and

animations – and share your creations with others on the web. A wide variety of

educators have been supporting Scratch creators since 2007, in both formal and

informal learning environments – K-12 classroom teachers, educational and computer

science researchers, librarians, museum educators, and parents.

Suggested Activities

Have students to create their own project based on the topic given.

CHAPTER

8 SCRATCH

125

TO CREATE A PROJECT,

YOU HAVE TO HAVE AN

ACCOUNT FIRST!

126

YOU CAN START MAKING A PROJECT BY FAMILIARISING YOURSELF WITH THE WEBSITE.

START WITH AN EASY ONE.

YOU CAN CHANGE

BACKGROUND FOR THE

PROJECT.

127

YOU CAN GET HELP BY REFERRING TO THE STEP-BY-STEP INTRO,

ON HOW TO MAKE SOMETHING MOVE, INSERT SOUNDS, AND ETC.

128

THERE ARE SIX

TYPES OF PROJECTS

THAT CAN BE DONE

ON SCRATCH.

129

In conclusion, Scratch is a resourceful website for the teachers, even for the students to aid

them in teaching and learning. This can help teachers to plan a more enjoyable and exciting

lesson for the students. It is highly recommended to try out this website.

THERE ARE VARIETIES TYPES OF PROJECTS THAT HAVE BEEN DONE BY

THE MEMBERS OF SCRATCH. JUST SEARCH!

130

Website: https://www.goanimate.com/

Description

GoAnimate is a tool that gives us the opportunity to create animations exactly in the way

we wanted. We can create our own characters, direct them and see other animations

uploaded by other people. It’s easy, fun and free. We can create our own animations in

a creative way, making them unique. It provides us with different tools that will help us in

creating our movie the way we want.

Suggested Activities

GoAnimate is a useful tool to engage student in writing, for instance. They can create

their stories and create a dialogue for characters to interact with each other. Student

can create their own animations and share them with other people around the world.

CHAPTER

9 GOANIMATE

You can create your own animations in a creative way,

making them unique. It provides you with different tools

that will help you in creating movie the way you want it.

131

If you already have an account you just click on

LOGIN but if you do not, you should click on

SIGN UP and follow the registration steps.

Click at the FILTER

THEMES to choose a

theme You can choose the themes that

you want

132

Display characters, text, scene,

music, and effects option in the

option panel

Generate and show a preview

of the progress of your video

far.

Display camera

positioning options

Zooming in, out

and positions

Display scene options such

as durations, transitions

Add scenes to your video

If you want to create your own

character, you will be given plenty

of options to design him/her.

Choose any part of the body that

you want to create the character.

133

You can choose the background

that you want

You also can create stories and

create a dialogue for characters to

interact with each other.

Click to display scene

menu

Add new scene to the timeline

Video/animation timeline

Audio timeline

134

Copy scene

Clear scene of all content, actors

and object

Delete scene

Click the button PREVIEW to view

your video

135

After you click the PREVIEW button,

you can play your video

After finished making a video, click

the button SAVE to save the video.

You also can share the video

136

You can share your video on

YouTube, Facebook, Twitter

and many more.

137

Website : www.fotor.com

Description

The heart and soul of Fotor is photo editing with best tools available online. Using Fotor photo editor, you can resize your photos, crop them, adjust the lighting curve, rotate them, adjust brightness, contrast, saturation, and sharpness, adjust the tone and colors, or just straighten a crooked shot! You can also add a photo effect, photo frame, clip art, text, or use our unique color splash, mosaic, and tilt shift tools.

Suggested Activities

Use FOTOR to edit photos, resize, crop, adjust lighting, rotate, sharpness, tone colours or saturation to announce school and community events.

Let’s get started by editing your very own beautiful pictures ! You may click the button ‘Edit a

Photo” to start editing.

CHAPTER

10 FOTOR

138

Then, browse your image that you want to edit from the computer and open it. Open Photo

Gallery by clicking the “Edit A Photo” button. Select the photo or photos that you want to edit,

and then, at the top of the screen, click the “Edit A Photo” button.

Once you have chosen your picture, you will be directed to the photo that you choose. You can

choose “basic edit” to edit the photos.

139

Then, you can choose “effect” that can automatically be edited from the web. You can Crop,

Rotate, Resize, Basic effect, Tone, Color and Curve

140

You can choose to edit the “curve”, “effect” or “Mildness” or others editing of the pictures. It

can make your picture appear milder or harder.

141

Then, you can make or choose from various type of frames for your photo editing.

142

Then, choose a sticker that you want to use as above examples listed.

143

Then, write a caption that you want to include and edit the font.

144

Then, you can use PHOTOR to make a collage photo by clicking Collage menu or to add multiple photos. You can add a photo form the right side of the menu to put in the collage.

145

Below is an example of collage photo.

Then, click save to save the picture in your computer.

146

You have successfully save the picture! After you have done editing your picture, you may just save it for later use or immediately share it with the rest of your friends using Facebook, Picasa, Tumblr, Flickr, or Twitter.

Then, we can make a photo collage using various shapes provided such as star, moon, butterfly, kitten and others.

147

You can also choose a Birthday, New year, Mother’s day, Father’s day, Holiday or Christmas Card Templates.

148

In the era of today’s advanced technology, there is no need to print your materials out

as you can just share it online. Share your beautiful and creative photo edited through

Facebook, emails and others sharing mediums and promote your hard work. The best

part is it is hassle free!

149

Website: http://www.kizoa.com/

Description

You can create slideshows and videos from scratch or start from one of the templates. Once in your Kizoa account, you may start by uploading your photos and videos. Then use the Editing Workshop to touch-up your photos and videos. A great slideshow starts with great images. You are also able to add frames and instant photo effects from the Editing Workshop.

Suggested Activities

Student will able to make slideshows of photos, videos with effects, text and insert music. Student also can create still or animated collages & e-cards with templates or create freely with amazing filters, effects, frames. Apart from this, student can also share online using e-mail, Facebook, Twitter, Blogs and etc.

CHAPTER

11 KIZOA

150

Open the kizoa main page

Sign in at the top of the main page.After

that,you may use it freely.

Enter your email address and

password.

151

Click the button GET STARTED to explore the

kizoa.

152

You can add effect to your slideshow.

You also can add music to your slideshow to make it

more interesting.

153

You can edit you photo.

The page collage maker is to make your picture more

beautiful and colourful.

154

The page that you can add movement to your collage to

make it interesting.

The page that you can make your slideshow.You just

add photo and start your slideshow.

155

This is the collage maker page.You also can choose part

that you want to make collage.

You can select your collage template and choose photo

that you want.

156

The page that you can share your slideshow and

pictures.

You can share your slideshow and pictures to social

network sites like Facebook and Twitter.

157

Website: http://museumbox.e2bn.org/index.php

Description

This site provides the tools for you to build up an argument or description of an event,

person or historical period by placing items in a virtual box. What items, for example,

would you put in a box to describe your life; the life of a Victorian Servant or Roman

soldier; or to show that slavery was wrong and unnecessary? You can display anything

from a text file to a movie. You can also view and comment on the museum boxes

submitted by others.

CHAPTER

12 MUSEUM BOX

This is the front page

You have to register first

158

This is example of virtual box, you can click on the box and this is example of empty box.

After you are registered, this is the steps on how you put the information or data such as text,

video, files ,sound or links

This is the virtual box

where you can put in the

information

For put the text Insert the sound

Insert the video Insert the files

Insert links

For search

159

List of student who have done to use this virtual box before

Example of text

160

You can enter the photos you like

You can put some video for presentation

Enter Caption

here

161

There is a tutorial video before you start using this web site. This video teach you how to put in

the data. This web is suitable for school presentation and it makes teaching easier.

162

Museum Box has been used within the abolition project to help student:

Understand the campaign

Understand the collection and importance of evidence

Understand that many people contributed the campaign

This is button for exit this web site

REFERENCES

CHAPTER 1 POWTOON

http://www.powtoon.com/

CHAPTER 2 IMAGECHEF

http://www.imagechef.com/

CHAPTER 3 BITESLIDE

http://www.biteslide.com

CHAPTER 4 FOTOFLEXER

http://fotoflexer.com/

CHAPTER 5 SHAPE COLLAGE

http://www.shapecollage.com/

CHAPTER 6 STUPEFLIX

studio.stupeflix.com

CHAPTER 7 PIXTON

http://www.pixton.com/

CHAPTER 8 SCRATCH

http://scratch.mit.edu/

CHAPTER 9 GOANIMATE

https://www.goanimate.com/

CHAPTER 10 FOTOR

www.fotor.com

CHAPTER 11 KIZOA

http://www.kizoa.com/

CHAPTER 12 MUSEUM BOX

http://museumbox.e2bn.org/index.php