L Hayes Online E Portfolio
description
Transcript of L Hayes Online E Portfolio
Exit Show
MainMenu
VideoMenu
Online Online Electronic Electronic PortfolioPortfolioTutorialTutorial
By
Loreen Hayes
Loreen Hayes
2Exit
ShowMainMenu
VideoMenu
Main MenuMain Menu
Introduction The Google Advantage Step 1: Digital Format Step 2: Create a Google account Step 3: Google Site Creation Step 4: Adjust Web Site Design
Theme Colors and Fonts Layout
Step 5: Limit Public Access Step 6: Contents of a portfolio Step 7: Home Page Contents
Step 8: Add a Web Page Step 9: Add Additional Pages
Add a Document, Spreadsheet or Presentation
Add an Image from a File Add an Image from Picassa We
b Album Step 10: Hyperlinking Step 11: Student Safety Conclusion Google Applications Quiz Video Menu References
Loreen Hayes
3Exit
ShowMainMenu
VideoMenu
Introduction to Online Electronic PortfoliosIntroduction to Online Electronic Portfolios
The following tutorial will guide you through transforming a document-based portfolio into an online ePortolio that could include images, video, sound and presentations. The following applications will be highlighted in the portfolio development:
Google Docs and Google Sites.
Depending on the age level and purpose, the contents will vary, so this tutorial concentrates on formatting an ePortfolio and not the specific contents within it. This ePortfolio tutorial is presented from a teaching perspective, but can be adapted to the creation of a professional ePortfolio.
Loreen Hayes
4Exit
ShowMainMenu
VideoMenu
The Google AdvantageThe Google Advantage
Software is free! Google apps will not cost you a penny.
Site hosting and multimedia storage is free! Google will host your Web site, allow you to create and store documents, spreadsheets and presentations, and store your pictures (Picasa) and video (YouTube), all for free.
Training and support are free! Google provides a variety of support including application training, discussion groups, email and chats.
Loreen Hayes
5Exit
ShowMainMenu
VideoMenu
Step 1: Digital FormatStep 1: Digital Format
All artifacts (documents, presentations, pictures, etc.) should be in digital format.
Use Google Docs for creating and sharing documents, spreadsheets and presentations. If you are unfamiliar with this application, visit the Google Docs training page.
Or use software such as, Microsoft Office or OpenOffice.org (open source software), and then upload to Google Docs for storage.
Artifacts not created in a digital format may be converted using:
Scanners
Digital cameras
Digital video conversion
Loreen Hayes
6Exit
ShowMainMenu
VideoMenu
Step 2: Create a Google AccountStep 2: Create a Google Account
Go to Google’s home page.
In the upper right hand corner, click on ”Sign In”.
Then click the" Create an account” button.
Choose a login name and password.
Teachers may want to choose specific login account names for their students.
Once you have a Google account, you have access to most of the necessary portfolio content integration tools.
Google Account VideoGoogle Account Video
Loreen Hayes
7Exit
ShowMainMenu
VideoMenu
Step 3: Google Site CreationStep 3: Google Site Creation
Remain logged in on your Google account.
Click on “more” at the upper left of the screen, and then “even more” on the drop down list.
Choose the “Sites” link.
Click on the “Create site” button.
At this point a site name is chosen. If this portfolio is for a student, keep the site name non-identifying. For example, use a first name only.
Google Sites VideoGoogle Sites Video
Loreen Hayes
8Exit
ShowMainMenu
VideoMenu
Step 3: Google Site CreationStep 3: Google Site Creation
The next most important step is to check the circle in the “Share with” section next to “Only people I specify can view this site”.
(In step 5, account permissions will be discussed.)
Choose a theme for the Web site. A professional may want to choose a more conservative theme such as the “iceberg” or “simple” theme.
Type the code shown in the box, and then click the create site button.
Loreen Hayes
9Exit
ShowMainMenu
VideoMenu
Step 4: Adjust Web Site DesignStep 4: Adjust Web Site Design
Your basic Web site should be displayed at this time.
Depending upon the age of the student and the time allotted for the portfolio development, you may or may not want to make changes to the Web site design.
If no changes are to be made, skip to step 5 in the tutorial.
Step 5Step 5
Loreen Hayes
10Exit
ShowMainMenu
VideoMenu
Step 4: Adjust Web Site DesignStep 4: Adjust Web Site Design
If changes are to be made, choose one of the following site appearance adjustments:
Themes – Use this to change the pre-packaged colors and layouts of the Web site.
Colors and Fonts – Use this to change the color of the titles, typed content and background.
Site layout - Use this to make adjustments to the position of the words and artifacts on the page.
Step 5Step 5
Loreen Hayes
11Exit
ShowMainMenu
VideoMenu
Step 4 : Theme DesignStep 4 : Theme Design
When you first created your Web site you chose a theme, but you may change that theme at any time.
CAUTION!CAUTION! Changing your theme will discard any changes you made the colors and fonts, but your Site Elements (documents, pictures, etc,) will be retained.
Loreen Hayes
12Exit
ShowMainMenu
VideoMenu
Step 4 : Theme DesignStep 4 : Theme Design
Under the “More actions” button in the upper right corner, choose “Manage site” from the drop down list.
Choose “Themes” from the site content list on the left side of the screen.
Choose a different theme, then “preview” it.
If you like the theme design press “Save changes”, if not, try another theme or press cancel to discard any changes.
Theme Change VideoTheme Change Video
Loreen Hayes
13Exit
ShowMainMenu
VideoMenu
Step 4: Color and Font DesignStep 4: Color and Font Design
Click “More actions” (upper right), then choose “Manage site” from the drop down list.
Click on “Colors and Fonts” at the bottom of the menu. Another menu and a color pallet will appear on the screen.
This menu displays the Web page design variables. Choose one of the variables on the left and a corresponding color change from the pallet on the right.
ColorColorPalletPallet
DesignDesign
VariablesVariables
Color and Font Change VideoColor and Font Change Video
Loreen Hayes
14Exit
ShowMainMenu
VideoMenu
Step 4: Color and Font DesignStep 4: Color and Font Design
The color will change instantaneously. It will not be final until you press the “Save changes” button.
Make sure to use colors that are consistent with your theme.
There should be high contrast between the font and background colors. Use either a light color font with a dark background or a dark color font on a light background.
Loreen Hayes
15Exit
ShowMainMenu
VideoMenu
Step 4: Page LayoutStep 4: Page Layout
The “layout” refers to the arrangement of the information on the Web page.
Google limits the layout design choices within its Web page templates.
The layout choice can be different for each page contained in the site.
LayoutLayout
Layout Change VideoLayout Change Video
Loreen Hayes
16Exit
ShowMainMenu
VideoMenu
Step 4: Page LayoutStep 4: Page Layout
Change Layout Instructions:
Choose your home page or any other page that you wish to change the layout on.
Click “Edit page” in the upper right corner.
Click on “Layout” in the upper left corner. Then choose 1 of the 9 templates.
If you do not like the choice, choose another before you “save” the edit.
Press “Save” in the upper right corner.
LayoutLayout
Loreen Hayes
17Exit
ShowMainMenu
VideoMenu
Step 5: Limiting Public AccessStep 5: Limiting Public Access
Maintaining a secure Web site is very important when dealing with children.
In Step 2 you should have checked the circle in the “Share with” section, next to “Only people I specify can view this site”.
In this section you will
choose who may view or collaborate on the site.
Loreen Hayes
18Exit
ShowMainMenu
VideoMenu
Step 5: Limiting Public AccessStep 5: Limiting Public Access
Instructions for adding collaborators:
Under the “More actions” button in the upper right corner, choose “Share this site” from the drop down list.
In the box titled “Invite people to your site”, check the circle labeled “as collaborators”.
Insert the teacher’s e-mail address in the box below.
Now press the “invite these people” button. At this time you are given the option of sending an invitation or skipping it.
asas Collaborators Collaborators
Loreen Hayes
19Exit
ShowMainMenu
VideoMenu
Step 5: Limiting Public AccessStep 5: Limiting Public Access
Instructions for adding viewers:
Viewers are only allowed to view the material, not edit it.
To add viewers, use the same method, except check the “as viewers” circle.
Viewers may include: Classmates Parents Administrators
asas Viewers Viewers
Loreen Hayes
20Exit
ShowMainMenu
VideoMenu
Step 6: Portfolio ContentsStep 6: Portfolio Contents
As discussed earlier, the required content of a portfolio differs from course to course.
First, a portfolio content outline should be developed.
The outline will be the skeleton for the Web site.
Generally, most portfolios contain: Title page or
Introduction page Table of contents Examples of student
work
Examples ofExamples ofStudent WorkStudent Work
Loreen Hayes
21Exit
ShowMainMenu
VideoMenu
Step 7: Home PageStep 7: Home Page
The “Home” page is the first page on your Web site. In the case of an online electronic portfolio, it will be your “Introduction” or “Title Page”.
This page may contain a student introduction, a project introduction or both.
The table of contents may also
be inserted here instead of using a separate page.
Also, any type of graphics or images may be inserted here.
Click on “Edit page” in the upper right corner, and then add text or insert images. Save your changes.
Loreen Hayes
22Exit
ShowMainMenu
VideoMenu
Step 8: Add a Web PageStep 8: Add a Web Page
Again, it is optional to add a separate Table of Contents page.
From the Home page, click on the “Create page” button in the upper right of the screen.
By default, it will select a Web page template.
Give the page a name, such as Portfolio Contents.
Choose “Put page under Home”.
Press “Create page” button to
save.
Add a Page VideoAdd a Page Video
Loreen Hayes
23Exit
ShowMainMenu
VideoMenu
Step 8: Add a Web PageStep 8: Add a Web Page
The navigation bar on the left should show the added “Portfolio Contents” page slightly indented from the “Home” page.
Just as with the “Home” page, you may add text, images or artifacts via the “Edit page” button in the upper right corner.
Web Web page page name name appears appears herehere
Add a Page VideoAdd a Page Video
Loreen Hayes
24Exit
ShowMainMenu
VideoMenu
Step 9: Add Additional PagesStep 9: Add Additional Pages
These additional pages you add will contain the content from your portfolio outline.
Depending on the artifacts you have chosen to include, choose from the following topics for instruction:
Add a document, spreadsheet or presentation.
Add an image from a file
Add an image from Picassa Web Album
Loreen Hayes
25Exit
ShowMainMenu
VideoMenu
Step 9: Add a Document, Spreadsheet or Step 9: Add a Document, Spreadsheet or PresentationPresentation
Since you’ve already uploaded your documents, spreadsheets and presentations to Google Docs, this step will be similar to step 8.
From the “Portfolio Contents” page, click on the “Create page” button in the upper right of the screen.
Give the page a name that describes the page content, such as “Research Paper”.
This time you will check the circle next to “Put page under Portfolio Contents”. Then click the “Create Page” button to save.
Add a Document VideoAdd a Document Video
Loreen Hayes
26Exit
ShowMainMenu
VideoMenu
Step 9: Add a Document, Spreadsheet or Step 9: Add a Document, Spreadsheet or PresentationPresentation
On the page you have just created, click the “Edit page” button.
From the “Insert” drop down list (upper left), choose “Documents”.
A box will pop up with a list of the documents that were uploaded to Google Docs.
Choose one document, then press “Select”.
Another box will pop up titled “Insert Google Document.” Uncheck “Include title” box, and then save.
Replay AnimationReplay Animation
Loreen Hayes
27Exit
ShowMainMenu
VideoMenu
Step 9: Add an image from a fileStep 9: Add an image from a file
An image may be inserted into a Web page from either a computer hard drive or a Web folder. This will explain the insertion from a hard drive.
Create a new page and give it a title.
Make sure you check the circle next to “Put page under Portfolio Contents”. Then click the “Create Page” button to save.
Click “Edit page”.Insert an Image VideoInsert an Image Video
Loreen Hayes
28Exit
ShowMainMenu
VideoMenu
Step 9: Add an image from PicasaStep 9: Add an image from Picasa
Click “Insert” (upper left), then “Image” from the drop down list.
Choose “Upload images” in the pop up window.
Click on the “Browse” button to locate the image file on your computer.
Click “OK”.
Once the image is fully uploaded, activate the picture by clicking on it.
You may make adjustments to the size and placement of the image using the controls below the image, and then save it.
Loreen Hayes
29Exit
ShowMainMenu
VideoMenu
Step 9: Add an Image from Picasa Step 9: Add an Image from Picasa
Picasa Web Album is a member of the Google family. You can upload your photos to the Web and store them there. Since you already have a Google account, you have a Picassa Web Album account.
Download “free” Picasa software. This will enable you to edit and upload pictures.
Upload your pictures to Picasa Web Album.
Create a new page and give it a title.
How to Upload Photos to PicasaHow to Upload Photos to Picasa
Loreen Hayes
30Exit
ShowMainMenu
VideoMenu
Step 9: Add an Image from Picasa Step 9: Add an Image from Picasa
Make sure you check the circle next to “Put page under Portfolio Contents”. Then click the “Create Page” button to save.
Click “Edit page”.
Click “Insert” (upper left), then choose “Picasa Photos” from the drop down list.
Choose a photo, and then press “Select”.
You may make adjustments to the size and placement of the image using the controls below the image, and then save it.
Download Picasa Editing SoftwareDownload Picasa Editing Software
Loreen Hayes
31Exit
ShowMainMenu
VideoMenu
Step 10: HyperlinkingStep 10: Hyperlinking
A hyperlink or link, when clicked, will Connect the user to a specified location within the current Web site or to an external Web site.
In this case you want to link (connect) the items in the Table of Contents with their respective Web pages within your site.
An example would be linking the words Research Paper on the table of Contents page with the Research Paper page that you created.
When the words “Research Paper” are clicked, the Research Paper Web page will open in the browser.
Hyperlinking VideoHyperlinking Video
Loreen Hayes
32Exit
ShowMainMenu
VideoMenu
Step 10: HyperlinkingStep 10: Hyperlinking
Go to your “Table of Contents” page and click “Edit page”.
Highlight the word (ex. Research Paper) that you want to link to a Web page.
Click “Insert” (upper left), then “Link” from the drop down list.
A pop up window will appear.
Choose a Web page title that coincides with the highlighted word (Research Paper) from the list in the “Create Link” window. Click “OK”.
Repeat this process for every item on the Table of Contents list.
Hyperlinking VideoHyperlinking Video
Loreen Hayes
33Exit
ShowMainMenu
VideoMenu
Step 11: Student SafetyStep 11: Student Safety
Student safety cannot be emphasized enough when utilizing the Web for student work.
Double check the “sharing” permissions under the “Manage site” section.
Review Step 5- public access.
Determine school policies on student image publishing. Use caricatures (clipart) as an alternative to actual
photographs.
Do not use full names of students. Use a Pseudonym as an alternative.
Do not tell others the site password.
Do not publish personal information, such as student home and e-mail addresses.
CaricatureCaricature
Loreen Hayes
34Exit
ShowMainMenu
VideoMenu
ConclusionConclusion
An ePortfolio can be created and utilized by elementary through secondary students and post-secondary students as a form of authentic assessment or by professionals to demonstrate work and achievements.
Now that you know how to create an online electronic portfolio you may want to:
See Tutorial References
Take a Quiz
See a List of Video Tutorials
Loreen Hayes
35Exit
ShowMainMenu
VideoMenu
Video Demonstrations Video Demonstrations MenuMenu
Google account sign-up
Google Web site creation
Change site theme
Change colors and fonts
Change site layout
Add a Web page
Add a document
Add an Image
Picasa Web Album uploading
Hyperlinking
Loreen Hayes
36Exit
ShowMainMenu
VideoMenu
Would you like to take a Would you like to take a small quiz?small quiz?
YESYES NONO
Loreen Hayes
37Exit
ShowMainMenu
VideoMenu
Google Apps QuizGoogle Apps Quiz
Which Google application can be used to create and store presentations and documents?
Google Sites
Google Docs
Google Picasa Web Album
Which Google application can be used to store digital photographs?
Google Sites
Google Docs
Google Picasa Web Album
Which Google application can be used to create a Web site?
Google Sites
Google Docs
Google Picasa Web Album
AA
AA
CC
BB
BB
BB
CC
CC
AA
Loreen Hayes
38Exit
ShowMainMenu
VideoMenu
Back to QuizBack to Quiz
Loreen Hayes
39Exit
ShowMainMenu
VideoMenu
Back to QuizBack to Quiz
Loreen Hayes
40Exit
ShowMainMenu
VideoMenu
ReferencesReferences Web Sites
Barrett, H. (September 28, 2009). In electronicporfolios.org. Retrieved October 20, 2009, from http://electronicportfolios.org/.
ePortfolio Levels (K-12 Schools). In ePortfolios with GoogleApps. Retrieved October 21, 2009, from http://sites.google.com/site/eportfolioapps/overview/levels.
Google Docs. In Google Apps Training. Retrieved October 21, 2009, from http://services.google.com/apps/resources/overviews/welcome/topicDocs/index.html.
Google Apps Help (2009). In Google Apps. Retrieved October 21, 2009, from http://www.google.com/support/a/users/.
More Google Products (2009). In Google. Retrieved October 21, 2009, from http://www.google.com/intl/en/options/.
Images Binder clipart
Clker.com. Retrieved November 6, 2009, from http://www.clker.com/cliparts/ 4/5/1/d/12075839502082178140johnny_automatic_binder_folder.svg.med.png
Computer clipart
Public-Domain-Photos.com. (2009). Retrieved November 4, 2009, from http://www.public-domain-photos.com/free-cliparts/computer/hardware/computer-aj_aj_ashton_01-1860.htm
Scanner clipart
Vignoni, D. (April 29, 2006). In Wikimedia Commons. Retrieved October 30, 2009, from http://commons.wikimedia.org/wiki/File:Gnome-dev-scanner.svg
Smiley face animations
smilys.net. Retrieved November 6, 2009, from http://www.smilys.net/smilies_sagen_ja/smiley3308.gif
Loreen Hayes
41Exit
ShowMainMenu
VideoMenu
ReferencesReferences
Sounds buzzer.wav
Guitarguy1985. In thefreesoundproject.org. Retrieved on November 6, 2009, from http://www.freesound.org/samplesViewSingle.php?id=54047.
applause_3.wav Syna-Max. In thefreesoundproject.org. Retrieved on November 6, 2009, from
http://www.freesound.org/samplesViewSingle.php?id=61652.