Creating an eportfolio with Google Sites A User s Guide i
Table of Contents Introduction 1 Getting Started 2 Prerequisites 2 Signing up with Google Sites 2 Accessing Google Sites 3 Creating a Google Sites Website 3 Editing Your Site 4 Sharing and Visibility 7 Inserting an Image 9 Inserting a YouTube Video 10 Inserting Files 11 Inserting and Formatting Text 12 Customizing the eportfolio 13 Adding a Sidebar 13 Changing the Layout of your eportfolio 14 Creating a File Cabinet 16 Previewing the eportfolio 17 Deleting a Page 18 Recovering a Deleted Page 19 Wrapping Up 20 Dos and Don ts 20 Checklist 21 Glossary 22 Appendix: Types of Pages 26 ii
Introduction A portfolio is a collection of quality writing samples and artifacts. Portfolios showcase your design and writing skills and are a traditional form of presenting professional work to faculty and employers. In the past, your options were limited to the traditional hardcopy portfolio but today you can create portfolios in two formats: hardcopy and electronic. An electronic portfolio (eportfolio) presents the same information as a hardcopy portfolio but in a digital form. eportfolios offer these advantages: Demonstrates reflections on your academic and personal growth Showcases web development and web-writing skills Updates easily as your qualifications and writing samples grow Serves as a secondary storage mechanism for digital files Reduces the use of paper during the copy and distribution process, making eportfolios a green method for displaying work. Exposes work to out-of-area employers Allows employers to view your work before and after an interview Google Sites is one eportfolio host which offers users an extremely simple way to create an eportfolio. You can add content, file attachments and information from other Google applications (like Google Docs, Google Calendar, YouTube and Picasa) with a click of a button. Creating an eportfolio is as easy as editing a document. The advantages of Google Sites are: They are available in a secure environment through the University of La Verne Google Apps They are easy to create They are completely free to set up and maintain They do not require HTML knowledge They provide customizable templates to personalize your portfolio They allow creators to manage visibility of their work This guide walks you through the process of creating an eportfolio using the free services of Google Sites. It helps you create an account, build and customize pages, add writing samples and set up security features. 1
Getting Started You need some tools before building an eportfolio. Review the list of prerequisites that specifies the tools you need and things to brainstorm to build a Google Sites eportfolio. Then create a Google Sites account. Once you have an account, you can build and edit the content for each portfolio page. Prerequisites Before building the eportfolio, consider your objectives to create one. The following list provides the tools you need to create an eportfolio: Internet access A University of La Verne student email account Digital copies of your best work (Digital file is a document that is created and stored on a computer. Create digital copies of your work by using a scanner, or any word processing software like Microsoft Word or Adobe FrameMaker) PDF files of all your digital work (use Adobe Acrobat to create PDF copies) A folder specifically for your eportfolio files so they are easily accessible and organized when you upload them Digitized images or logos (use a scanner to digitize images) 1-3 potential names for your web address in case your first choice is already in use. A password to protect your access to proprietary parts of the eportfolio Once you have the necessary materials, you are ready to begin creating an eportfolio. Signing Up with Google Sites As a student of the University of La Verne, you have access to the sites through your email account. To access Google Sites, first log into your student email account. 2
Accessing Google Sites 1. Click current student 2. Click student email Enter your user name and password Note the numbers on the instructions correspond with the numbers in the associated image. Click the Sites link at the top black bar Creating a Google Sites Website Click Create 3
1. You can now choose to use a blank template or from a list of templates. For our purposes, choose a blank template. 2. Enter your email user name as your site name. 3. Click on More options 4. Site categories: Enter your categories; it is required that you enter eportfolio as one of your categories; you may enter more than one category depending on the wishes of your professor; multiple categories must be separated by commas (category terms allow your site to be searched by these terms; they will not appear on your final, published website) 5. Site description: this is optional and is an opportunity for you to describe your site on narrative form; this description will appear under your site title when it is searched. 6. Click Create Congratulations, you have now started a real website! 4
Editing Your Site Click on the Home link on the left sidebar Click the pencil icon in the upper left; this opens the editing feature You'll notice that text boxes and editing toolbars appeared which indicates you may enter text and other types of content In the editing mode above, you may change the title of your page; exercise caution with the Home page since changing the title page will also change the link title on the left sidebar; since you don't want to lose your home page, it is recommended that you leave this title as is 5
To create a new page, click on the page+ icon in the upper right You must now make a few selections 1. Enter the title of your new page (for example, you may use Course Presentations as a page title) 2. Choose page type (read the Appendix for descriptions of page types) o The two common page types you'll use are Webpage and File Cabinet o Choose Webpage for our demo 3. Click Create You must now choose the location of your new page; you may give it the upper most status which places it side by side with the home page OR you may place it under an existing page o for our demo, give this page the upper most status 6
Sharing and Visibility To make changes to visibility, sharing, or design settings, click on the More icon in the upper right then select Manage Site Click on the Sharing and Permission link on left sidebar 7
Sharing and visibility--these are two very different functions; 1. Visibility represents the group of people who may view the content on your site; you should select either the third or fourth option in item 1 under Visibility options 2. Sharing your site with someone allows that person to edit (make changes to) your site; you likely do not want anyone else to alter your eportfolio so uncheck item 2 3. Click Save 8
Inserting an Image Now that you have created a new page, you can enter different kinds of media on that page. Click on the Course Presentations page Click on the edit icon in the upper right To add an image, place the curser in the text box where you want the image Click on the Insert menu in the upper left Click Image to insert an image onto the page 1. When you do this, it will ask you to browse your computer for your image file. Once you select it, the image will appear as a thumbnail. 2. Click OK 9
The image is now placed where the cursor was located Inserting a YouTube Video To insert a video, place the cursor under the chemistry molecule image 1. Click on the Insert menu 2. Click on Video, then YouTube 3. You can now enter the URL (or web address) in the field 4. Title your video 5. Click Save 10
The YouTube video is now embedded on the page below the molecule image Inserting Files 1. To insert a file, click on Add files 2. Select the file from your computer you want to insert and click Open 11
The file is now placed below your video Inserting and Formatting Text 1. To insert text, you may place the cursor above the molecule image then type in your text 2. You may format the text using the formatting menu Feel free to highlight portions of what you typed then change the font size, color, bolding, etc. 12
Customizing the eportfolio Adding a Sidebar Add an item such as Navigation window, Recent site activity window, text, or countdown to the sidebar. You need Navigation window to go to different pages of the eportfolio. You also need Recent site activity window to recover accidentally deleted pages. To add a sidebar item: 1. Click the More drop-down menu and select Manage Site 2. Select Site Layout from the list. The layout page opens. 3. Click Add a sidebar item. 4. Choose a New Page Element window opens. Select the page element and click Add. 5. The window closes and the item appears in the sidebar. Click Save. 6. Click the site hyperlink to return to the Home page. 13
Changing the Layout of your eportfolio Change the eportfolio layout while focusing on the needs of employers. Change the position of sidebar, change the size or delete the header or the width of the site to customize your eportfolio. To change the sidebar position: 1. Click the More drop-down menu and select Manage Site 2. Select Site Layout from the list. The layout page opens. 3. Click Change site layout, opening the layout window. 4. Select the second option to move the Sidebar to the right of the page. The Sidebar on the left is selected by default. 5. Click OK to save changes. 14
6. Click the Preview button to preview your site with the changed layout. 7. Click the Save changes button. 8. Click the site hyperlink to return to the Home page. 15
Creating a File Cabinet Create a file-cabinet page and upload the files to the file cabinet. To create a file cabinet, first click on the page+ icon in the upper right and the Create a page window appears. 1. Type a name for the new page. 2. Select File Cabinet as a page type. 3. Put the page under Writing Samples. 4. Click the Create page button. 5. Click the Add file button. The Add file window opens. 6. Select the file and click open. The file is now on the page. 16
Previewing the eportfolio After organizing and renaming the navigation window, preview the designs and contents to assess its organization and appearance as it appears to the viewers To preview your eportfolio: Select the More actions drop-down from the main menu. Select the Preview page as viewer option. A new window opens to show you how your site looks like to the viewers. Close the preview window. 17
Deleting a Page Once you have created your eportfolio, clean up the site before you present it to your faculty and employers by deleting the unwanted pages. To delete a page: 1. Navigate to the page you wish to delete. 2. Click the More drop-down menu and select Delete page. A window opens to ask if you really want to delete the page. 3. Click the Delete button. 18
Recovering a Deleted Page You can recover the deleted pages at any time. To recover a deleted page: 1. Click the More drop-down menu and select Manage site. 2. Click Recent site activity. A list detailing of all the site activities appears. 3. Click on the link next to the page you want to recover. 4. Click Recover page. The page is recovered and added to the sitemap. 19
Wrapping Up Once you finish building your eportfolio, test your product. Log out of your account and view your eportfolio as a viewer. Review the list of do s and don ts below, as well as the checklist while you view your eportfolio. Dos and Don ts The following lists offer advice on what to do and what not to do when creating your eportfolio. Do: Guide your visitors and tell them where to go through each section of your eportfolio, while providing as many links as possible to related content. Distinguish levels of heading by indenting, font size, capitalization, and other graphic elements. Use arial, normal, or veranda fonts for both headings and body text. Save your work every 15-20 minutes. The Internet is a volatile workspace: and any number of errors can occur to terminate a connection. Create text between section headings. Every heading level should have explanatory text preceding it before another section heading is introduced. Document any outside sources used as reference or content on your portfolio (including pictures, tables, diagrams, charts, and other intellectual material you did not create) Embed documents and writing samples as content for each writing samples page and/or create them as attachments within pages. Don t: Don t display content sensitive materials without getting consent from your Professor and affected parties. Don t create a heading with only one subheading following it. Parent headings should always have at least two subheadings. Don t use passive voice unless absolutely necessary. Don t use future tense unless absolutely necessary. Don t have a bullet list with only one bullet. Don t use unclear demonstratives - this, that, these, or those without a qualifying noun following. 20
Don t talk about this document or this manual or these instructions in your work examples pages. Instead, talk to the reader directly about the processes behind the creation of each document (instructions, challenges, goals, teamwork). Checklist Body texts should default between 12-14 pts font size. No text should be smaller than a 10pt font size (including footers). Make both headings and text arial, normal, or veranda fonts. Avoid all caps. Capitalize all significant nouns in headings and page titles. Use present tense throughout the entire eportfolio. Passive voice should be used sparingly and changed to active voice as often as appropriate. Talk to the visitor and use you to tell them about the pages in the portfolio. You aren t present to answer any questions they might have as they look at your eportfolio so try to intuit your visitor s needs and explain content with as much detail as possible. Give links to other pages and content that relates to one another as much as possible in order; guide your visitors throughout the entire portfolio as you want them to see it. Provide choice with the links so that a visitor can navigate at their own pace if they don t want to follow your script. If you use animated images, keep them to a minimum in occurrence and length. Due to space limitations, keep images to a minimal size and occurrence. Use suggested color schemes for effective portfolio presentation. Proofread and spell check. 21
Glossary Attachment Announcements Access right Browser window Color Scheme Default Digital File Drop-down menu E-mail eportfolio File Cabinet Google Google Accounts An electronic file that is attached to a webpage, and does not allow the viewer to modify its content A page type built to resemble a blog.. Permission given to a user to access secure content. A software that reads the HTML formatting of files found online, and translates the code to display as a page Color combinations applied to background, foreground, and text to enhance the look and feel of an eportfolio. A selection automatically used or created by a computer program. A document that is created and stored on a computer. The files are usually created in a page layout software program, and can be read by only that specific software program. A menu interface that condenses a list of options into a single selection menu. The menu only displays one of the options within a text box, until a button is selected to expand the entire list of options. An electronic form of message communication. E-mail is provided as a free service by many web hosts, including Google. An electronic version of a traditional hardcopy portfolio taken to a job interview. A webpage (Pages or Sub-pages) that acts as a document repository. Google is a well-known search engine provider that also offers many free services when you create an account with them including: email, word processors, digital photo galleries.. A Google account allows users to access Google s various free tools and services 22
Google ID Header Image Home page Host HTML HTML Editor Hyperlinks Lists page Menu Tab Navigation window Page attachments A Google ID is the name of a username you select specifically for Google to use their services. A picture or graphic that appears at the top of a webpage. The first page all visitors to the website will be presented with. This is where all first impressions of an eportfolio are established, and should convey an introduction to the site contents as well as an objective for presenting your materials. A remote computer that provides users at their home computer a space to create and access files, tools, and services offered online. Hypertext Markup Language. The programming language that allows users to program a webpage for online viewers. A tool that allows users to create webpage without having to know any HTML code. The tool interface is designed to look like a standard word processor, but codes content in HTML in the background. References to files, document sections, and other website URLs outside of a document or website are embedded as links within text. Hyperlinks are used to quickly navigate to new content with one easy click. Lists pages are dedicated to keeping track of related types of information such as deliverables, who is working on them, when they are due, what has or has not been finished. Google allows these lists to be user defined or selected from three common templates that are fully customizable. An individual link within a list of menu options. A customizable window that lists links to different pages within an eportfolio. field A document that is embedded within a single webpage. An attachment allows files to be read online, without allowing the visitor access to download the whole document for their own personal use. A good security feature to limit what content can be read in an eportfolio 23
without leaving the source material vulnerable. Page header Permissions Sidebar Sitemap Sub-pages Themes Upload URL Verification Webpage Web Address Located at the top of all pages within the website. Includes the page title and logo if any. Permissions are access rights that are user defined to who may view your eportfolio. A space within a webpage that allows the creator to add menus such as for site navigation, recent site activity, etc. A sitemap is provided in a Navigation side panel, and lists out the entire organization of your website s pages and their hierarchy. Useful for navigating straight to a subpage not listed in a navigational sidebar panel. Sub-pages are similar in every respect to top-pages, with one exception: they are one level lower than top pages in URL hierarchy. A motif or consistently occurring idea within backgrounds, font types, and foreground color schemes. Some are prebuilt and offered to users to customize the look of an eportfolio website. A theme can be changed at any time at whim. The transfer of digital data from one computer source to another. Short for Uniform Resource Locator, this is the standard text field that appears within every Internet browser to point to a specific webpage on the world wide web. See web address. The process of confirming a user's credentials based upon information they provide in the form of a password and username. A space on the World Wide Web often connected to other spaces/ pages through hypertext. The virtual address a webpage is located at on the world wide web. All web addresses are comprised of a protocol, a space name, a domain name, and syntax after the domain to denote exactly where content is located within the domain. For example, a typical web URL may look like http://example.com/abc. 24
Word Processing software Word Processing Software -- A computer program that emulates the capabilities of an analog word processor (typewriter) for example, Microsoft Word. In addition, the software allows users to craft and insert a variety of extra tools such as tables, images, font colors and page dimensions. 25
Appendix: Types of Pages When users wish to create a new page to display on their portfolio, Google allows for five different types of pages to be created: A new blank web page A start page An announcements page A file cabinet page A list page Web Page The first option is to create a web page that is devoid of any content. A blank space is presented for you to customize, much as a blank space in any word processor is open to a range of content and where its placed. This is the only kind of web page that is freeform and can be used to display a range of content. The rest of the page types are created in templates and customized forms you must accept. Start Page A start page is a page that can be customized by each of its viewers (a little bit like an igoogle page for your site!) to show a personalized set of gadgets. Site collaborators can still add content that all viewers see, but that section remains separate from the section that can be personalized. Announcements Page The third kind of page is an announcements page. As its name suggests, this is a page completely dedicated to any announcements or messages you feel are important or necessary to display to your visitors. For all intensive purposes the announcements page is a blog, with the distinction that it is not the Home page to your web space. Once created, the page can be updated with messages and other multimedia the same as a blog. File Cabinet Page The fourth type of page that can be created is a file cabinet page, which can be thought of as an online doc repository. These pages are set specifically for you to upload whole files into so that visitors can access and download 26
them. This is a great way to link visitors to a page that keeps track of a large archive of documents and folders. The downside is of course that this method is made for public viewing audiences to have easy access to your files, and is not a secure method of maintaining copyrights, intellectual property and confidential materials. List Page The fifth and last, page is a list page. A list page is a page dedicated to keeping track of related types of information such as deliverables, who is working on them, when they are due, what has or has not been finished, etc. The list page provides four templates to choose from: Action items Issue list Unit status Create your own The first three lists are related to common lists many users make use of, and are pre-set in a modifiable template while the last list is a blank template for user defined content. 27