Effective Web 2.0 Tools for the Classroom: Part 4

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

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

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

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?

46
You can choose where the
resources is available to you

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.

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.
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/

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).

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

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.

70
The normal feature of a random photo
uploaded.

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 “

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.
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.
Students can create their own character, their own comics with variety of art in it. It is
also suitable for beginner.
CHAPTER
7 PIXTON

116
Register to start. You
may also log in via
Facebook or Google

117
First, you create or choose
your own character

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

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.
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.
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.
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.
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

Effective Web 2.0 Tools for the Classroom: Part 4

Effective Web 2.0 Tools for the Classroom: Part 4

More Related Content

What's hot

Similar to Effective Web 2.0 Tools for the Classroom: Part 4

More from Johan Eddy Luaran

Recently uploaded

Effective Web 2.0 Tools for the Classroom: Part 4