Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Effective Web 2.0 Tools for the Classroom: Part 4


Published on

This ebook was an extension of the previous volume which with intent to guide educators to use technology as an enabler in their teaching and learning. The websites are Powtoon, ImageChef, BiteSlide, FotoFlexer, Shape Collage, Stupeflix, Pixton, Scratch, GoAnimate, Fotor, Kizoa and Museum Box.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Effective Web 2.0 Tools for the Classroom: Part 4

  1. 1. Effective Web 2.0 Tools for the Classroom: Part 4 Johan Eddy Luaran i-Learn Center Universiti Teknologi MARA 2014
  2. 2. 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.
  3. 3. 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
  4. 4. 1 Website: 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
  5. 5. 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.
  6. 6. 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
  7. 7. 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.
  8. 8. 5 You can also animate your presentation to make it powerful. POWTOON makes your video graphic design beautiful
  9. 9. 6 POWTOON also can attract attention and increase interaction.
  10. 10. 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.
  11. 11. 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
  12. 12. 9 Click to choose a blank project Click start to continue
  13. 13. 10 Click to insert title and description of your file. Choose any favorable template available Then, click create
  14. 14. 11 Click edit button to start This is the main view of the application
  15. 15. 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
  16. 16. 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.
  17. 17. 14 The effect will look like this.
  18. 18. 15 Website : 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
  19. 19. 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.
  20. 20. 17 ACCOUNT SETTING After you log in., you can view your account setting here
  21. 21. 18 Example of an account setting The credits allow access to silver level with more interesting features
  22. 22. 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
  23. 23. 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
  24. 24. 21
  25. 25. 22 Share the timeline cover on Facebook
  26. 26. 23 Meme maker allow you to add text to the photos you upload to make it more meaningful. MAKING A MEME MAKER
  27. 27. 24 Word mosaic is an interesting tool which enables words to be arranged graphically. MAKING A MOSAIC WORDS
  28. 28. 25 You can share or save it into :
  29. 29. 26 Flower text makes the texts move. It’s similar with gif graphics. MAKING A FLOWER TEXT
  30. 30. 27 You can edit your picture using the various type of frames. MAKING A PHOTO FRAME
  31. 31. 28
  32. 32. 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
  33. 33. 30 choose any symbol
  34. 34. 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
  35. 35. 32 Choose any symbol that you want to include Example of a completed banner
  36. 36. 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
  37. 37. 34 The front view of the jersey This is an example of a football jersey This is an example of a basketball jersey
  38. 38. 35 This is an example of a soccer jersey This is an example of a baseball jersey
  39. 39. 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
  40. 40. 37 MAKING A SYMBOL You can pick any style that you like
  41. 41. 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
  42. 42. 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.
  43. 43. 40 Website: 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
  44. 44. 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?
  45. 45. 42
  46. 46. 43
  47. 47. 44 How to Create A Project:
  48. 48. 45
  49. 49. 46 You can choose where the resources is available to you
  50. 50. 47
  51. 51. 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.
  52. 52. 49
  53. 53. 50
  54. 54. 51
  55. 55. 52
  56. 56. 53
  57. 57. 54
  58. 58. 55 Website: 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
  59. 59. 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/
  60. 60. 57
  61. 61. 58
  62. 62. 59
  63. 63. 60
  64. 64. 61
  65. 65. 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).
  66. 66. 63
  67. 67. 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
  68. 68. 65
  69. 69. 66
  70. 70. 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.
  71. 71. 68
  72. 72. 69
  73. 73. 70 The normal feature of a random photo uploaded.
  74. 74. 71
  75. 75. 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.
  76. 76. 73 Website : 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
  77. 77. 74 When you open Shape Collage, this is the first page that you see.
  78. 78. 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.
  79. 79. 76 The photo that chosen will be automatically dragged to the box on the left side as shown by the arrow above.
  80. 80. 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
  81. 81. 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
  82. 82. 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
  83. 83. 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.
  84. 84. 81 Next, type any word that you want and you also can change the font text given as above.
  85. 85. 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.
  86. 86. 83 Click “Custom” and types of shape will appear. Choose any types of shape given, and click “Close” button.
  87. 87. 84 The shape will appear like this, and you can click “Done”. Click the “Create” button to get the selected shape as a collage.
  88. 88. 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.
  89. 89. 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.
  90. 90. 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.
  91. 91. 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.
  92. 92. 89 Click “ No” to get a different size. This is the result of selected background.
  93. 93. 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.
  94. 94. 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.
  95. 95. 92 For example, log in with your Facebook and click “ Okay”
  96. 96. 93 As usual, choose your own photo and click “Done”. Then, the photo will appear as shown.
  97. 97. 94 To create this shape, use the same way as shown above. Click “Exit” to close the “ Shape Collage “
  98. 98. 95 Example of Shape Collage
  99. 99. 96
  100. 100. 97 Websites : 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
  101. 101. 98 STEP 1 : STEP 2 : Click here to enter the website Enter the email and the password
  102. 102. 99 STEP 3: STEP 4 : Click ‘add photos & videos’ to insert the photos and the videos Insert slide title here Choose the video theme.
  103. 103. 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.
  104. 104. 101 STEP 7 : STEP 8 : Some example is from Facebook. First, you must connect to your Facebook account. Example from Facebook
  105. 105. 102 STEP 9 : STEP 10 : Drag the photo Folders from your Facebook account
  106. 106. 103 STEP 11 : STEP 12 : The photos / video can be seen here after uploaded. Add text to overlap on the picture.
  107. 107. 104 STEP 13 : STEP 14 : Add videos Here some of the photos and the video.
  108. 108. 105 STEP 15 : STEP 16 : The text overlay the picture. The video.
  109. 109. 106 STEP 17 : STEP 18 : Click here to produce and share. Click here to produce the video
  110. 110. 107 STEP 19 STEP 20 : Process to render the video The video is done!
  111. 111. 108 STEP 21 : STEP 22 : You can share it to Facebook. It also can share it to Twitter.
  112. 112. 109 STEP 23 : STEP 24 : Sign in to Facebook to publish the video if you want it to be uploaded.
  113. 113. 110 STEP 25 : STEP 26 : It also can be downloaded as media. It also can be uploaded on Youtube.
  114. 114. 111 STEP 27 : STEP 28 : Download in progress. The video is done!
  115. 115. 112 STEP 29 : STEP 30 : The video will then be saved automatically at the website.
  116. 116. 113 STEP 31 : STEP 32 : Click here to log out from the website. Main page
  117. 117. 114 Website: 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
  118. 118. 115
  119. 119. 116 Register to start. You may also log in via Facebook or Google
  120. 120. 117 First, you create or choose your own character
  121. 121. 118 Then wait for a minute
  122. 122. 119 You can click this for advanced and create something unique
  123. 123. 120 You can save it if you want to use it again later
  124. 124. 121 After you done with character, you can go to second step, create comic Then you can choose any comic format that you want
  125. 125. 122
  126. 126. 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!
  127. 127. 124 Website: 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
  132. 132. 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!
  133. 133. 130 Website: 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.
  134. 134. 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
  135. 135. 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.
  136. 136. 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
  137. 137. 134 Copy scene Clear scene of all content, actors and object Delete scene Click the button PREVIEW to view your video
  138. 138. 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
  139. 139. 136 You can share your video on YouTube, Facebook, Twitter and many more.
  140. 140. 137 Website : 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
  141. 141. 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.
  142. 142. 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
  143. 143. 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.
  144. 144. 141 Then, you can make or choose from various type of frames for your photo editing.
  145. 145. 142 Then, choose a sticker that you want to use as above examples listed.
  146. 146. 143 Then, write a caption that you want to include and edit the font.
  147. 147. 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.
  148. 148. 145 Below is an example of collage photo. Then, click save to save the picture in your computer.
  149. 149. 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.
  150. 150. 147 You can also choose a Birthday, New year, Mother’s day, Father’s day, Holiday or Christmas Card Templates.
  151. 151. 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!
  152. 152. 149 Website: 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
  153. 153. 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.
  154. 154. 151 Click the button GET STARTED to explore the kizoa.
  155. 155. 152 You can add effect to your slideshow. You also can add music to your slideshow to make it more interesting.
  156. 156. 153 You can edit you photo. The page collage maker is to make your picture more beautiful and colourful.
  157. 157. 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.
  158. 158. 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.
  159. 159. 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.
  160. 160. 157 Website: 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
  161. 161. 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
  162. 162. 159 List of student who have done to use this virtual box before Example of text
  163. 163. 160 You can enter the photos you like You can put some video for presentation Enter Caption here
  164. 164. 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.
  165. 165. 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