Embed Size (px)
Citation preview
Delia School of Canada Summer Program Outline
IT – Web 2.0
Instructor: Lindsay Postma
Date: July 4 to 29, 2011
INTRODUCTION This course will…brief description.
Areas of Focus
Area Description
Week 1 1. Intro to the Web 2. Microsoft
Publisher 3. PowerPoint
• "Welcome to the Web" is an interactive set of web pages which can be used to teach children about the Internet.
• Student will create students create calendars using Publisher. • Students will use Photoshop to edit photos using basic
commands • Students will create e-books using Powerpoint.
Week 2 1. Filming and
Editing 2. HTML 3. Typing Tutorial
• Students will create their own advertisements and edit them using Windows Movie Maker.
• Students will work independently using an HTML tutorial to create simple web pages from notepad.
• Based on student interest students will explore and choose an online typing tutorial to practice their typing skills.
Week 3 1. Flash 2. Wordle 3. Dreamweaver 4. Inkscape
• Teacher led Flash tutorial – students will use this knowledge to create their own flash animation.
• Student’s will use Wordle an online application to create their own posters, which they can later use in their website.
• Teacher led lesson to set up the files and structure of their websites using Dreamweaver.
• Students will begin exploring Inkscape.
Week 4 1. Inkscape 2. Dreamweaver 3. Web Scavenger
Hunt
• Students will create their own original graphics using Inkscape to make their own t-shirt.
• Using Dreamweaver students will create their own website. • To practice and enhance online search skills students will
complete the Scavenger Hunt.
Web 2.0 Summer 2011
By: Lindsay Postma
Day 1: Microsoft Work/Internet Explorer 1) Students will use Microsoft Word to type out things they want to do in this course. The teacher
will collect these (once printed) and use them to further develop the direction of the course program.
2) Online Tutorial: Student’s will work independently on this online tutorial and complete the accompanying worksheets. Once completed students will complete the final challenge using the codes and information they collected throughout the tutorial.
www.teachingideas.co.uk/welcome/start.htm
"Welcome to the Web" is an interactive set of web pages which can be used to teach children (and adults) about the Internet. They can be used in the classroom / computer room and children are welcome to explore them as they wish (although they have been designed to use in sequence).
The resources are in split into seven sections:
1. The Beginning -‐ explains how to use the site. 2. Getting Started Online -‐ teaches children about the basic concepts involved in the Internet
(World Wide Web, Hyperlinks, Back button etc). This introductory lesson also gives valuable practice in visiting and navigating around web sites.
3. Staying Safe -‐ encourages pupils to keep themselves safe online by following the SMART rules. Also tests their understanding using interactive activities and fun quizzes.
4. Using Your Browser -‐ helps people to learn more about their web browsers... what are the different features and how are they used?
5. Searching Online -‐ teaches children how to search effectively, and keep themselves safe when doing so. Also identifies search engines which are particularly suitable for children to use.
6. Trying Top Tricks -‐ finding information on the net is great, but it is also important to know how that information can be used. This section explains about printing, using the Find tool to locate specific information within web pages, copying and pasting text, and saving images from the web. Also includes information about copyright and why it is important to credit others when you use their work.
7. The Welcome to the Web Challenge -‐ When the children have completed all of the sections of Welcome to the Web, they can complete this exciting challenge. It requires them to use all of the skills which they have learnt to catch the creator of a destructive computer virus!
When visitors complete the challenge, they are able to print a personalised certificate to show their competence in using the Internet.
Each section (except the Challenge) has worksheets which, although not compulsory, can be used to direct children's attention to important parts of the resources, and to test their knowledge. The worksheets can be downloaded when you start each section. Teachers can download the entire set of worksheets here.
The answers are not included with the worksheets. It would be advisable that any teachers wishing to use the resources with children, use them before the lesson (and thus work out the answers for themselves beforehand!).
Day 2: Microsoft Publisher 1) Introduction to Microsoft Publisher: Calendar
Time: 2 hrs 2) Students will open a blank calendar.
Expectations: • insert/design their own background. (how to import own design from paint or
photoshop) • Change the font/colours • Insert clipart/images • Write in special dates/events • Students who finish early (grade 8 students) may continue creating a calendar for the
entire year. • Save calendars to USB. • Print Calendars
3) Photoshop Time: 1 hr Students will open a photographs and use the fill function to make Andy Warhol style artwork
-‐ Types of photos (landscape with background, foreground and central object; portrait; free choice).
Day 3: Introduction to PowerPoint and Menus 1) Introduction to PowerPoint.
Time: 2 hrs. • Using the LCD projector the teacher will show examples of E-‐books online as well as a
teacher made sample. This is going to be the final end of product.
2) Tutorial: Students will create slides for each of the topics listed below for their own reference. • How to add slides • How to add text. Change font, colour. • How to add clipart. • How to do custom animation: for clipart, text, slide transitions. • How to do hyperlinks. • How to use hyperlinks to jump to secret pages. • How to add sound/narration. • Searching the web for sound files and clipart.
3) Students can use the remainder of the time to explore and practice using the different elements of PowerPoint.
4) E-‐book: Using their knowledge from the tutorial students will have the remainder of the week to create their own e-‐book. Teacher will show an example. Students may choose to use other programs to create images for their e-‐book, record audio, or upload photo or video.
Day 4/5/6: E-‐book/PowerPoint E-‐book Expectations:
• 8-‐12 slides • Topic kids want to interact with. E.g. Fairy tale or nursery rhyme • Custom animations e.g. page turning • Hyperlinks • Voice narration/sound • Action buttons: “Auto shapes” -‐> action buttons • Can create own image and hyperlink it to go to next page. • use hyperlinks to jump to “secret” pages. • Save as .pps this will allow it to run as a slideshow (other people cannot change/edit the slides) • Looking for application of technology in a creative way.
When e-‐books are complete, students will run the slideshow and share it with the class. E-‐books can be burnt to CD so students can take it home and share with their parents.
(Monday – week 2)
Day 6: E-‐books, Etc. Students will finish E-‐books and Menus.
For students who are finished, allow them to present their finished products to the class on the LCD projector.
For students who are finished: They will work independently on an HTML Tutorial from www.goodellgroup.com/tutorial Make sure they save the notepad or word file as .html
Print the tutorial in advance and give students a package to work from. Students will use their Internet Browser and Notepad to work on the tutorial.
After students present their e-‐books give them feedback on how they could improve. I found students appreciated the feedback and were excited to find ways to make their e-‐books better.
Day 7: Filming and Editing First 30 minutes: Finish E-‐books and share with class even if incomplete.
Introduce students to Window’s Movie Maker: (student’s already knew how to use Movie Maker so we spent 20 minutes using the programs “samples” and reviewing how to edit video.)
Have students open a sample movie and set the bottom window to “Time Line”. Using the menu have students edit the video by adding text (title, words during the video, and closing credits), sound, and any other things they think of.
Next students will independently or in small groups of 2 or 3 create their own television advertisement.
Expectations for Advertisement: • Choose a product they wish to sell. • Write a script. Practice. • Must be 1 minute long (or longer). • With Video camera’s students will record their advertisement and upload on the computer. • Save As: • Edit the video with text and music. • Present to the class.
Day 8: Filming and Editing Students will Film their advertisements today and start the editing process. Next year: instead of making advertisement have them make a “fashion” video of what they are wearing.
Day 9: Filming and Editing Students will finish filming and work on editing their advertisements today.
Day 10: Students are almost finished so they will have an hour to finish up. Student will then share their videos with the class on the LCD projector (30 minutes). Students who are not finished can have the remainder of the class to work on their video editing. Students who are finished can work on: HTML tutorial – once the tutorial is finished they can use it to create their own webpage. Practice typing tutorials. www.powertyping.com www.sense-‐lang.org/typing/ www.nimblefingers.com/ Free time. Next week: Flash and Dreamweaver.
(Monday – week 3)
Day 11: Flash (this could be broken down over two days to give students more time.)
Students will follow along in a flash tutorial.
Introduction to Flash: Screen basics
Step by step tutorials for: morphing with shape tween; morphing texts; morphing bitmaps; motion animation; animating along a path; frame by frame animation.
After each mini tutorial student’s will apply their knowledge and create their own.
Day 12: Flash and Wordle Show students how to create moving circles with letters on it. Using a variety of layers:
1) In frame 1 draw a circle with the letter A on it. (Name Layer as “A”) 2) Insert Keyframe in Frame 10. 3) Right click Frame 1 and add Motion Tween. 4) Insert Keyframe in Frame 20. 5) Right click Frame 10 and add Motion Tween.
6) Move the circle to a new location. 7) Insert Keyframe in Frame 30. 8) Right click Frame 20 and add Motion Tween. 9) Move the circle to a new location. 10) Keep going for about 100 frames. 11) On the last frame put your circle in the middle left hand side of the stage. This will be the first
letter in your sequence. 12) Make a New Layer called “B”. Repeat steps 1-‐10. Place the letter “B” beside the letter A in the
last frame. This is the second letter in your sequence. 13) Repeat steps for C,D,E,F, G… 14) You may have as many letters as you want. Change the colours, size, rotate, flip, skew, etc. 15) Students may want to use the letters of their names.
Also show students how to use Properties at the bottom to change the size of the Stage and background colour.
Wordle After recess introduce: www.wordle.net This is a Web2.0 application. Suggest to students that they write their text in Microsoft Word because it can be easily lost in Wordle if you make a mistake. Students may print their creations.
Day 13: Dreamweaver Introduction to Dreamweaver.
• Following the tutorial lead students step by step to set up their webpage.
Day 14: Dreamweaver • Student’s begin to edit and add information to their webpage
Day 15: Inkscape Student’s explore Inkscape and create their own original design for their t-‐shirts
(Monday – week 4)
Day 16: Inkscape Student’s continue to explore Inkscape and finish designs for their t-‐shirts
• Teacher brings in iron/iron board and provides iron on transfers. • Students will create their t-‐shirts today
Day 17: Dreamweaver Students will continue to work on their websites.
Day 18: Scavenger Hunt/Dreamweaver • For the first half of class students will complete the online scavenger hunt. The purpose of this
activity to teach students how to effectively search the web.
Dreamweaver:
• Students will take the time to include photos and type information into their websites. • Students must make sure all links work • Students who finish early: Have these student’s use their knowledge from their tutorial to add
more pages, change fonts, and explore the program further. • Encourage students to find online tutorials to help them add new aspects to their website.
Day 19: Scavenger Hunt/Dreamweaver • For the first half of class students will finish the scavenger hunt.
Dreamweaver:
• Students will take the time to include photos and type information into their websites. • Students must make sure all links work • Students who finish early: Have these student’s use their knowledge from their tutorial to add
more pages, change fonts, and explore the program further. • Encourage students to find online tutorials to help them add new aspects to their website.
Day 20: Share Websites Students will share their website with the class.
Flash Tutorial
Morphing Effect (Shape Tween)
Figure 1 Draw a Circle in Frame 1
Figure 2 Insert a Blank Keyframe
Figure 3 Draw a square in frame 10
Figure 4 Select Frame 1
Figure 5 In Properties change Tween to Shape
1. Draw a circle in Frame 1. 2. Insert a blank keyframe in Frame 10 (right-click that frame and select
“insert blank keyframe”) 3. Draw a square in Frame 10. (sizes and colour and position do not matter
as long as they are in the same layer). 4. Select Frame 1. At the bottom where it says Properties Inspector (or
Window > Properties) and change tween to Shape. (The Frame colour changes to green when Shape tween is used).
5. Hit “Enter”
Shape Tween Continued
• Draw a shape at frame 1. (Try a simple shape, like a heart.) • Insert a blank keyframe at frame 30 in the Timeline. Draw another shape (like
a star) in a different color at frame 30. The two shapes should be on the same layer. Click on the area between the two frames in the Timeline. The area will turn black.
• Now, open the Frames panel and choose Shape Tween. A light green bar with a solid arrow will appear between the two frames. When you scrub back and forth in the Timeline, the heart morphs to the star, and changes color.
Morphing Texts
Original text unbroken. Select the text and break it apart.
The text will be broken into letters.
Break it apart again to make it work.
1. Using the text box type your text in Frame 1. 2. Highlight/select the box of text. 3. Select Modify > Break Apart (the letters will be surrounded by boxes) 4. Select Modify > Break Apart again (the boxes disappear) 5. Insert a blank keyframe in Frame 10 (right-click that frame and select
“insert blank keyframe”) 6. Write your new text in Frame 10. 7. Select Frame 1. At the bottom where it says Properties Inspector (or
Window > Properties) and change tween to Shape. (The Frame colour changes to green when Shape tween is used).
8. Hit “Enter”
Morphing Bitmaps (images)
Select your image on the stage. Draft vector version.
1. Insert your image into Frame 1. 2. Select Modify > Bitmap > Trace Bitmap. 3. Insert a blank keyframe in Frame 10 (right-click that frame and select
“insert blank keyframe”) 4. Insert a different image in Frame 10. 5. Select Frame 1. At the bottom where it says Properties Inspector (or
Window > Properties) and change tween to Shape. (The Frame colour changes to green when Shape tween is used).
6. Hit “Enter”
Motion Animation (Motion Tween)
1. Create a symbol or pull one out of the Library onto a new layer on frame 1. (right click on an image you drew and select Convert to Symbol...)
2. Insert a keyframe at frame 30. This will keep the symbol on frame 30. 3. At Frame 20, modify the symbol by changing the position, scale, rotation,
and alpha. (Use the Effects panel for the alpha). Select the area between the frames on the timeline and it will turn black.
4. Open the Frames Panel and choose Motion Tween. A light blue bar with a solid arrow will appear between the two frames. When you scrub back and forth in the Timeline, the symbol will move, scale, rotate and the alpha will change.
Motion Tween has other options. You can choose the direction of the rotation from the pull-down menu in the Frames Panel and have the tween automatically rotate the object the number of times you specify.
Animations can be reused. For example, let's say you create an animation in a movie symbol of a bouncing ball. You could pull that ball out of the Library as many times as your computer can handle. You can put them all on independent layers, animate the position, scale, tint, alpha, etc.
Animating along a Path
Let's say you want a small airplane to follow a path from the ground up to the clouds.
1. Create a symbol of a little airplane. (Find one in clipart) 2. Drag the symbol out onto the stage. You may want to add a runway and
some clouds in the sky to make your animation more complete. 3. Select the airplane layer and from the Insert menu, choose Timeline >
Motion Guide. This creates a new layer called a Guide Layer on top of the airplane layer.
4. Insert another keyframe in the Guide: airplane layer at the point where you want the motion to stop.
5. Using the Pencil tool, draw a curve that you want the airplane to follow from the runway to the clouds. (It won't show up in the movie)
6. Select the first keyframe in the airplane layer. Select the Arrow tool and move the airplane to the beginning of the curve.
7. Now select the last keyframe. Move the airplane along the curve to the end of the curve.
8. Double-click the first keyframe to open the Frame panel. Choose Motion from the Tweening menu and check Snap (snaps the registration point to the path).
9. Scrub along the Timeline, and the airplane will follow the curve from first to last frame.
Frame by Frame Animation
This is the most file-size intensive method, but sometimes it's the only way to get the effect you want. You can turn on a nifty feature called Onion Skinning to see surrounding frames so you can more accurately draw your frame.
Figure 6 Make sure each Frame is"keyframed": black dot in each Frame
1. In frame one, draw a smiley face but with no mouth. (We'll add it in a minute.)
2. In frame four or five, from the Insert menu, choose Keyframe. This copies the smiley face from frame one through frame four or five. (Highlight all the frames, right click and select Convert to Keyframes)
3. Insert a new layer above the smiley face layer. You can call it "mouth." (Highlight the number of frames you want the animation to appear in and right click and select Convert to Keyframes).
4. Draw the smiley mouth on the smiley face. 5. Click on the Onion Skin icon from the options under the Timeline. You will
see a faded version of the first frame. 6. In frame two, draw another mouth on top of the faded version of frame
one. Make the curve of the mouth a little straighter.
7. Continue to do this for another few frames. 8. Turn off the Onion Skin button. 9. Now scrub through your animation. The smiley face loses its smile… oh, too
bad!
• Other options: birds flying, an apple falling off a tree.
Bouncing Balls:
Name your Layer “A”
Select Frame 1 – draw a circle with the letter A.
Select Frame 10 – insert Keyframe.
Select frame 1 – insert motion tween
Select frame 20 insert keyframe
Select frame 10 – insert motion tween
Select frame 30 insert keyframe
Select frame 20 – insert motion tween
*In each frame move your circle with the letter A to a new location.
Your last frame can be 60 or later. In your last frame put your circle on the left hand side of the stage.
Make a new layer named “B”. Repeat the same process. In the last frame put the “B” circle to the right hand side of the letter “A”.
*Repeat for C, D, E, F, G
Now you can go back to “Modify” > Transform – and rotate/skew/flip/change size, etc to the balls at each frame.
Note: the selected frames do not have to be in increments of 10. Add variation.
You may wish to have students do the letters of their names instead of the alphabet.
Once completed you will see all your balls bouncing around the stage and finish in a linear order spelling out the alphabet or your name!
Using Dreamweaver
Remember to Save often! At various stages, have students select “Code” view to look at the HTML format and notice changes that were made. Do they see similarities to what they did using the HTML tutorial earlier?
Ø Open Dreamweaver Ø Create New > DreamWeaver Site > type: “My First Website” >delete second box > NEXT
> No, next > select first choice, store files on usb >> click on Create New Folder and name it website, next > None, next > Done
Ø Create from Samples > Starter Pages > Page Designs (CSS) and Two-‐Column Left Nav > Create
Ø Save: index.html > copy
Ø Select this arrow and click on Make Template (selection 1) > save as master > save > yes (these files are saved in the right hand side panel under Files.
Ø In Master.DWT: click on Code view:
Ø
Where it says: “Untitled Document” change to title of Website: All About Me
Ø Then File: Save Ø Highlight “breadcrumb/breadcrumb/breadcrumb/” > Click on Templates icon again. >
select Editable Region from drop down menu > EditRegion1 Ø Highlight “Page Name” and do the same > EditRegion 2 Ø Highlight everything in “Feature Title Box” including picture > EditRegion 3 Ø Repeat for Story Title boxes (EditRegion 4/5) Ø Change sight name to: All About Me Ø Change global links to: About Me/Site Map/Contact – delete the rest Ø Delete Search box Ø Change Section Links to: Friends/Family/School/Pets/Favourite Websites – delete the
rest
Ø Delete Related Links Ø Delete advertising box and Headlines box Ø Delete 44 box and Privacy Policy (bottom links need to match the top). Ø File > Save > ok Ø Close inner window (x) Ø Double click on Index from panel on right hand side. Ø If index is not showing the changes then, > click on ASSETS on the right hand side panel
Ø Ø Click on “Templates” the second icon from the bottom > click and drag “master” on to
middle of screen. Ø Select dropdown menu and choose “nowhere” > ok Ø Return to File on right hand side panel.
Ø Now, delete breadcrumbs and type HOME > highlight HOME > click target at bottom of screen next to Link
Ø
Ø Click and drag this target to “index.html” on right hand panel
1. Right click in the blank space in the file box on the right hand side > New File > about.html > click on “master.dwt” tab or file in right hand panel > Highlight About Me under the title.
2. Click target at bottom of page and drag to about.html
3. (repeat for About Me at bottom of page)
4. Repeat steps 1-‐3 for Site Map (sitemap.html) and Contact (contact.html) Note: Still in master.dwt
1. Right click in File box on right panel and make a New Folder > name it “Family” 2. Right click folder “Family” > select New File > name it: family.html 3. Highlight “Family” in master.dwt > click target and drag to family.html 4. Repeat for Friends, School, Pets, and Favourite Websites 5. Close Master Template > save changes YES > update > close 6. Close Index.html page
Putting Templates on each page:
Open: about.html on right hand panel
Select Assets > Templates (2nd from bottom icon) > click and drag master to center of screen > File > Save > close about.html
Repeat for sitemap.html, contact.html, family.html, friends.html, school.html, pets.html, favwebsites.html
Structure Complete!
Breadcrumbs:
Ø Select about.html from right hand panel > delete the breadcrumbs and type: HOME... About Me
Note: can also do: > / | (shift and backslash)
Ø Then, highlight HOME and click on target at bottom and drag to index.html Ø Highlight About Me and click on target and drag to about.html Ø Repeat for: Site Map and Contact, Family, Friends, School, Pets
NOW YOU CAN FILL IN THE INFORMATION!
Bells and Whistles:
Changing Background Colour:
Ø Open master.dwt Ø In right hand panel click on the drop down menu for CSS and All tab at the top Ø Click on “body” just underneath Ø In the bottom box with blue text > click on Add Property > drop down menu select
background – colour > choose colour from small box beside or click on colour wheel (but may not work on all browsers) Note: pick a colour safe colour, bright colours make it difficult to read on.
Ø Background – image (if keen)
Changing Fonts:
• Change Font: master.dwt • for “Site Name” >>> highlight text to be changed: from CSS Styles (current) click on
font-‐family and drop down menu in the properties for “h1” on right hand side of panel and choose font.
• For font colour/size do the same and select colour from colour
Change background colours for selected boxes:
• Highlight the text and select Add Property and choose “background-‐color”
To change colour of links:
• Select CSS styles (All) • +2col_lefnav.css (make sure it’s open) • Select: a:link,a:visited,a:hover • Then go down to colour box and select colour
• To change font: click on Add Property and select “font-‐family” and choose font • In the same spot you can select: a:hover (when your mouse goes over the hyperlink it
appears as underlined). Here you can change the colour when the mouse go overs the hyperlink: Add Property: choose “color” and then pick colour you want.
* * * * *
For Images:
Ø Make a new folder in the right hand panel called “images” Ø My computer > open “website” from USB and open “images” – all images are to be
saved here.
Gimp 2:
• From image folder in my computer/usb > right click “edit with Gimp” • Scale image to same size as in Dreamweaver (to fit 280x200): Image tab > Scale Image • Zoom to 100%
• Save as: >select by file type: • image as GIF image (for small files) > logos/few colours • JPEG image for photos of people or bigger files > save > reduce Quality until File Size is
around 50kB (less than 60).
