Digital Portfolios using Google Sites (CCS.US) 18-19 S2

Resumes used to be the only tool you had to showcase your academic and professional achievements when you were looking for a new job. Today you have so many more options, one of which is to create a Digital Portfolio. This visual representation of your history and greatest achievements provides employers with proof of what you can do and helps them see why they should consider hiring you. It also sets you apart from all the other candidates who simply send in a resume and cover letter.

A DIGITAL PORTFOLIO IS AN ONLINE COLLECTION OF YOUR VERY BEST WORK, THAT VISUALLY PROVES WHAT YOU CAN DO!

Resource: https://www.everydayinterviewtips.com/how-to-create-a-digital-portfolio-for-your-job-interview/

"If you’re in the process of developing a digital portfolio, you can’t afford to view it as a mere collection of work samples; you need to think of it as your preeminent marketing piece." 

- Ram Castillo (Award Winning Designer and Art Director)

Resource: https://www.roberthalf.com/blog/writing-a-resume/expert-tips-on-how-to-create-a-killer-digital-portfolio

"One of the inherent dangers with digital portfolios, for example, is that the technological novelty of the product could overshadow the purpose of the portfolio."
- Digital portfolios: fact or fashion?" by Helen Woodward & Phil Nanlohy

Resource:  https://www.tandfonline.com/doi/abs/10.1080/0260293042000188492?journalCode=caeh20

According to Inc. Magazine (Online) and the Young Entrepreneur Council you should turn experiences into a story worth sharing.  According to the article "How to Create a Digital Portfolio That Stands Out From The Pack", some of the main reasons to create a Digital Portfolio are to:

• SHOW OFF YOUR BEST WORK


• TELL YOUR STORY


• FEATURE REFERENCES & RECOMMENDATIONS


• EMBED A VIDEO OR PROJECT

Reference: https://www.inc.com/young-entrepreneur-council/how-to-create-a-digital-portfolio-that-stands-out-from-pack.html

One of the best resources for creating a Digital Portfolio is at https://info.portfolium.com/blog/digital-portfolio-tips.  There are 10 PRO Tips that are discussed in the article that you should consider using in this project.

Here is the Process of Creating an Electronic Portfolio developed by Helen C. Barrett, Ph.D.:

1. 1 Creating an Interactive Portfolio with Google Sites
   
   
   1. 1.1 Getting started
   
   
   
   


2. 2 Keeping a Learning Journal


3. 3 Authoring an electronic portfolio
   
   
   1. 3.1 Create a first page - Introduction & Table of Contents
   
   
   2. 3.2 Set up a structure using goals (or themes) as organizing framework
   
   
   3. 3.3 Create one page for each section
   
   
   4. 3.4 Upload artifacts/create hyperlinks
   
   
   5. 3.5 Write reflections for each goal/skill and each artifact
   
   
   6. 3.6 Write future learning goals
   
   
   7. 3.7 Publish Portfolio - Seek Feedback
   
   
   
   


4. 4 Evaluating Portfolios

Mr. Scribner's Sample Google Digital Portfolio Site

STEP BY STEP INSTRUCTIONS

Step 1:  Sign-In to Google

Step 2:  Click your "Waffle" (Upper Right Corner) to open your list of Google Applications

Step 3:  Click on Google Sites

Step 4:  Watch The Video Below:

Step 5:  Design Your Site Heading

1. Upper Left Corner - Change the Site Name to CCS Student Portfolio, and ADD a Logo of your choice.


2. Change the Site TITLE to your Full Name.


3. Move the Pointer to the Lower Left Corner of the Heading and choose the type of Image used for the Background.  You may also Click Header Type to change the Header area.


4. Click on the TEXT BOX button (under Insert in the menu on the right side of the screen), and add space below the Header for a Personal Mission Statement / Memorable Quote / Job or Position you are interested in.


5. Click on one of the Layouts (under Insert in the menu on the right side of the screen), and add an "ABOUT ME:" section below the Text Box.  See the sample site at https://sites.google.com/ccs.us/hscribner/home for what to write in this section.


6. Click on one of the Layouts (under Insert in the menu on the right side of the screen), and add an additional section for at least 2 of your most recent projects that you are proud of.


7. Click the PAGES link in the menu to the right side of the screen.  Add a PAGE labeled "CCS-515 Projects".  Add TEXT Boxes for Title Bars, and Insert Sections to add all of your work for each project.  You can Upload files, or link directly to your Google Drive.


8. Click the PAGES link in the menu to the right side of the screen.  Add a PAGE labeled "CEW Evidence".   Use this page to link/post information about anything that would qualify as evidence for PA Career Education & Work Standards.  These can include resume's, cover letters, career project investigation surveys or worksheets, individual assessment forms, and any other documents from work you have completed.  Remember, 8th-Grade students are required to have at least eight (8) items in this section prior to heading to high school.  You MUST have an Individual Career Plan started as well.  See your counselor for help with this.


9. At any time during the design process you can click the PREVIEW Button and see what your site will look like. 

Once you are in high school, or with your parent's permission, create a personal Gmail Account and use the following link to transfer your work to your own account.  This way you will not lose this as you graduate, and stop using your ccs.us account:

https://support.google.com/a/answer/1041297?hl=en

PROJECT REQUIREMENTS

You must have the following items for credit:

Header and Home Page:  Student must have a legible header with your site title (CCS Student Portfolio) and a small logo of some sort.  Student must also have a "Personal Mission Statement / Memorable Quote / Job or Position You Are Interested In" section.  The "About Me" section must include a tasteful, professional-looking picture of the student (Collegium I.D. picture is recommended), and a paragraph or two as outlined on Mr. Scribner's Sample Site.  Student must also have at least two (2) current projects outlined, with images, on the Home Page.  Make sure all titles and additional pages are accessible from this page.

Morning Meeting/CR Journal:  Student will create this page as a place-holder for Constructed Response Items, Journal, or other posts as required.  Student can use this space to comment on news, events, or other interests.  Make sure that anything posted is school-appropriate, and in good taste, even when it might be a controversial or inflammatory topic.  Be respectful at all times.

CCS-515 Projects Page:  Student must add sections for Computer Skills & Applications or STEAM-E, and include enough sections for every project to date.  Student should review their Google Drive and the Class Assignment Site's Archive Section (collegiumtech.blogspot.com) to make sure they have all the previous projects.  Add additional sections for other classes.  There should, at minimum, be spaces for English Language Arts, Social Studies, and Science.  Make sure to LINK any work from your Google Drive for each class.

CEW Evidence Page:    Students should scan any external document to their Google Drive prior to adding them to this page (Try to add them as a PDF).  Make sure to add all items from CSA or STEAM-E classes that qualify as CEW Evidence here, instead of on the previous page.

Additional pages may be created for other projects, specific reasons, or at the request of other teachers.  This site should be updated regularly with new work, and evidence for PA CEW Requirements.  Use this site to reference work during interviews for jobs or college entrance meetings.  Make sure that your parents see this site, and approve of anything you post.

When You Click "PUBLISH" You Must Title Your Page Using Your First Initial and Last Name.  See Example Below:

https://sites.google.com/ccs.us/hscribner

TURN IT IN BY EMAIL THE PUBLISHED LINK TO MR. S (hscribner@ccs.us) FOR CREDIT!

Strikingly PSA Website Project 18-19 S2

Please check out Strikingly.com.  It is a little hard to understand at first, but your results are going to be fantastic.  If you master this tool, you will be creating stunning, professional-quality sites in no time!  Have Fun With This Project!

PUBLIC SERVICE ANNOUNCEMENT

SINGLE-PAGE WEBSITE ASSIGNMENT


Mr. Scribner's SAMPLE Website: Photography Is Cool

MR SCRIBNER'S SAMPLE STRIKINGLY.COM "ANTI-BULLYING" SITE (Click Here)

18-19 S1 STUDENT TOPIC LIST





STRIKINGLY.COM

Please go to Strikingly.com and create a website.  Create an account using your Gmail address and a password you can remember.  On Strikingly.com you just click "Create Account" and enter your First Name, Email Address, and a Password you can remember.  You may use photos, Youtube video links, and other items.  Please make sure your website has the following items to receive credit for this project today:

ASSIGNMENT:  CREATE A STRIKINGLY.COM WEBSITE AS A PUBLIC SERVICE ANNOUNCEMENT FOR A TOPIC YOU ARE CONCERNED ABOUT.

Here is a video to help you with Strikingly.com (CLICK HERE)

STRIKINGLY.COM HELP AND SUPPORT LINK

Here are the steps to create a new WEBSITE:

1. Log Into Your Google Account


2. Go to Strikingly.com


3. Sign In with your FIRST NAME, CCS Email Address, and a PASSWORD you can remember.


4. Select ANY Template you like by moving the cursor over it and CLICK "Start Editing"


5. Use "View Example" to see what it might look like before choosing the Template. (Then Step 4)


6. Review the MENU to the Left.

• PREVIEW: Shows what the site will look like LIVE


• PUBLISH: Puts The Website LIVE Online (You can still make changes)


• STYLES: Allows a change to a whole new style or type of site.


• SETTINGS: Change other settings about your site:




• Basic Info:  Site Title, Category of Site, Description, Keywords, Language


• Domains:  You MUST use (any words).strikingly.com unless you pay.


• Sharing Information: Social Image Share, Favicon, Twitter Card?


• Mobile Actions: Do Not Worry About These (Must Go PRO) (DO NOT GO PRO! - Costs $)


• Header & Footer Display Settings


• ANALYTICS!


• ADVANCED

1. Preview all of the SECTIONS listed on the Site you chose.


2. Adjust each SECTION to fit with your overall THEME and what you need to get your Message Accross.


3. Once you have Setup your SECTIONS the way you want,  spend time on each section entering pictures, video, facts and links.


4. When complete click PUBLISH and then Copy & Paste the link you created into an email to Mr. S for credit.  (hscribner@ccs.us)

Here is what your "Public Service Announcement" STRIKINGLY Website should include:

1. Website must be created using strikingly.com


2. Website must include keywords ccstech and collegiumpsa


3. Website must have at least one picture and one video (embedded)


4. Website must have an informational theme


5. Website must include at least 4-5 sentences of REAL DATA about your topic.  You  must have at least four (4) FACTS and (4) SOURCES listed as a reference.  


6. Finally, when you are done, please search the class list for at least 5 other websites created by our class and post comments on them.  Be careful to be helpful not hurtful and let your classmates know that you appreciate their efforts! 


7. POST YOUR SITE, and an Image That Represents It on the class PADLET HERE (CLICK THIS)

ADDITIONAL INSTRUCTIONS

In addition to the items above, you must also include the following items on your new website:

1. Add a video to your website.  You may copy/paste the link from Youtube or Vimeo, but it must be appropriate for school use.  DO NOT POST ANYTHING that might be offensive or inappropriate.


2. Add a FORM for visitors to send you an email.  


3. Add a MAP of the address of our school. 

YOU MUST EMAIL THE ACTIVE LINK TO YOUR WEBSITE TO MR. S FOR CREDIT!

Have Fun With This!!

- Mr. S

OBJECTIVE & STUDENT OUTCOMES

Students will use online collaboration tools (STRIKINGLY.COM) to create a single-page webpage. Students will learn to use the online toolbar in Strikingly.com to add content to their website, share their website, and publish their website online. Students will comment (positively) on other pages posted online.

STUDENTS MUST READ ALL DIRECTIONS ON THIS WEBSITE PRIOR TO STARTING ANY TASK!

Students will enter the class quietly and LOG IN to ccs.us Google Accounts. Students will read all directions posted on the class assignment site prior to starting work. Students will choose a Public Service Announcement topic to create a web-page about using Strikingly.com. Students will be guided through the creation process for a Strikingly.com website, and then be given time in class to complete the project. Students must SHARE their projects, once published, by emailing the link to Mr.S. Once complete, Students will then review other sites created by their peers, and leave constructive (positive) comments to each other!

Web Design Introduction 18-19 S2

Today we will start to discuss why you might want to Build a Website!  This will start as a brainstorming session.  


To start thinking about your future websites, you probably should think of the reasons to create one.  Please review this article as people are entering the class, so we can discuss it when the bell rings:


https://www.bluehost.com/blog/websites/7-reasons-every-student-should-start-a-website-9565/


Please watch the video below together and discuss what you saw as a class:

Answer the following questions as a class:

1. What do you do with the Internet?


2. What is the benefit to having the Internet?  (School / Home / Business / Doctor, etc.)


3. Who creates the sites on the Internet, and Why?


4. Who Controls The Internet?

Define The Vocabulary:



WWW - World Wide Web



Web Browser - What Are They?



Web Host:



Domain Name:

Discuss the main themes and terms from the video!



We just  learned that a ​ web browser​ is the software application you use to access the web pages and ​ HTML​ (HyperText Markup Language) is the language you use to tell a web browser how to make a web page look.

Planning For Your Webpage

EMAIL ASSESSMENT:

Please Answer The Following Questions Using the R.A.C.E. [(R)epeat The Question, (A)nswer The Questions, (C)ite Your Evidence/Examples, (E)xplain Your Evidence/Examples] Method:



Who Is Your Target Audience?



What Content Do You Want To Have On Your Site?



What other sites are you going to link too?



What topics will you highlight on your blog?



Write a final paragraph describing a website you want to create for this class.  You should start thinking about a topic for your site.  It will be similar to the PUBLIC SERVICE ANNOUNCEMENT VIDEO you created earlier in this course.

HOW DO PEOPLE FIND THINGS ON THE INTERNET?

Questions To Answer:



What is an Algorithm?  How is an Algorithm used to decide what you see?



What is a Spider in a SEARCH ENGINE?



What is a KEYWORD?  How can you add Keywords to your site to increase traffic?

Digital Animation Video Clip Project - Part Duex!

Today you will be using your scene to create an animated scene. Eventually you will EXPORT your slides as Images (JPEG) and using MS Movie Maker to create a Digital Animation with Music, Titles, and Credits.

FOR SOUND EFFECTS USE FREESOUND.ORG and AUDACITY!

STEP BY STEP Audacity Instructions:

Link to Audacity Tutorial:

https://manual.audacityteam.org/man/tutorial_recording_computer_playback_on_windows.html

Step 1.  Open a website (YouTube, Freesound, etc.) with the media you want a sample of.

Step 2.  Click on the Audacity shortcut from the Windows Programs Button.

Step 3.  Once open, you will need to click each window so they are "split-screen" (you can view both windows on the computer screen at once).

Step 4.  Make sure your settings on Audacity are set to record from "Windows WASABI", Speakers both Input and Output, and Stereo Quality (not Mono)!

Step 5.  Press RECORD (Red Dot) button on Audacity, then quickly press PLAY button on the Internet Media.  You should see the levels on Audacity jump to match the playback on  your Internet Media.  When you have recorded enough media for your project, click STOP (Black Square) button on Audacity, and stop your Internet Media playback.

Step 6.  Click FILE and EXPORT on Audacity.  Choose either MP4 or WAV from the list, click/enter the location you are saving the file too (preferably your desktop for easy reference), and click SAVE.  This will export your file for use in other media.  You should preview the file in Audacity prior to exporting it if you like, or once exported you should click the new file created and make sure it plays on your computer's music program (ITunes, MS Media Player, VLC, etc.)

Mr. Scribner's Digital Animation Examples:

Snowman & Crowd Animation     Mountain Cabin Scene (Helicopter)     Basketball Court (Red/Blue Play)      

Two Monkeys Short Clip     Two Monkeys MS Movie Maker Video  Sir Ken Robinson - Creativity Education

Digital Animation Using Google Slides & MS PowerPoint / Movie Maker

MAKE YOUR DIGITAL ANIMATION INTO A MOVIE CLIP USING OpenShot:

Step 1. Open your project in Google Slides.  Click FILE, Click DOWNLOAD, Click Microsoft PowerPoint.  Once Downloaded, Open the file in PowerPoint.

Step 2. With PowerPoint open, click FILE, EXPORT and choose CHANGE FILE TYPE.  Click on JPEG and click SAVE AS.  Choose your Desktop as the destination, adjust the filename if necessary, and click SAVE.  When the window appears, click ALL SLIDES.  A file folder should appear on your Desktop.  Your slides are now images in that folder.

Step 3. Open the folder with your slide images.  Select all of them.  Open OpenShot on your computer.  Make sure that both of these are in split-screen mode.  Click all of the slides and drag them into OpenShot.  You will be asked if you want to IMPORT them as an Image Sequence (Video Clip), Click YES.  You can now drag your Video Clip down into your project.

Step 4. Using OpenShot Video Editor, you must create a Digital Animation "Short-Film" by making each image "flash" for around 1/8-second each. This will give the impression that the images are animated. You should add Titles, Credits, and a short burst of music to finish the film.

• Once OpenShot is started, drag your sound effects and music files into the PROJECT FILES Window.


• Drag your images (individually or as an image sequence/video clip) into the PROJECT FILES Window.


• Drag any video clips, or other media (Production Logo, or Video Logo from you previous projects) into the PROJECT FILES Window.


• Create any TITLES/END-CREDITS you might need in OpenShot from the menu items.  For this specific project you only need to add the Titles outlined below.


• Assemble your PROJECT Files in Tracks 0-4 as follows:




• Titles and End Credits in Track 4


• Single Images in Track 3


• Video Clips in Track 2


• Audio Sound-Effects in Track 1


• Music / Background Audio in Track 0




• Place/Adjust your files any way you like.  Add Transitions/Effects as needed.  Preview your project in the window provided (Preview May Not Work Right).  NOTE:  If you play the project and cannot hear the audio, Click SAVE Project (to Desktop), Close/Exit OpenShot, Restart OpenShot making sure your headphones are not plugged in.  Once started, choose FILE and RECENT from the menu, and click on the first choice.  Your video project should open, and the audio should play in the preview through the speaker on the computer you are using (DO NOT PLUG IN HEADPHONES AGAIN UNTIL AFTER YOU EXPORT IT).


• Once your Video Project is complete, click FILE and EXPORT.  In the window that pops-up make sure you change the name of your project, and choose the Desktop as the Export location.  YOU NEED TO EXPORT YOUR PROJECT AS AN MP4 FOR CREDIT.


• Once your PROJECT is on the Desktop as an MP4 file, Open your Google Drive and (using split screen again) click and drag the file to your Google Drive.  You will see the Upload progress in a pop-up window.  Once it is uploaded to your Google Drive, double-click the file to open it.  In the upper right corner you will see three (3) dots, click them, click SHARE, and enter Mr. Scribner's (hscribner@ccs.us) email to submit your project for credit.  MAKE SURE YOU UPLOAD THE MP4 VIDEO FILE FOR CREDIT, NOT THE OSP (OpenShot Project File).

YOU MUST IMPORT AT LEAST ONE (1) SOUND EFFECT/MUSIC AND ADD IT TO THE ANIMATION PRIOR TO SAVING IT!  (You can use freesound.org and audacity to record sound effects or music for use in this project.)

Your TITLES should include the Name of the Video and "by (Your Initials)

Have Fun with this project. If you would like to know more, here is the original link to 50 more digital animation websites at TEACHTHOUGHT.COM (Click Here)! Good Luck!

RUBRIC FOR DIGITAL ANIMATION PROJECT

Item / Points	15	10	5
Animation and Rendering  20 %	Accomplished Animation and rendering is done well, works properly and is saved in an appropriate file format. All files are properly named as required	Developing Animation and rendering is average, works properly for the most part. Few files are properly named as required	Beginning Animation and rendering does not work properly or is not saved/rendered properly.Files are not properly named as required
Model Complexity  20 %	Accomplished Model is mostly complex and/or detailed but lacks some evidence of sub-object modeling to define/refine modeled details	Developing Model is mostly simplistic and/or lacks evidence of sub-object modeling to define/refine modeled details	Beginning Model design is inappropriate or overly simplistic.
Organization  30 %	Accomplished Objects, Materials and Textures are mostly named	Developing Few Objects, Materials and Textures are named	Beginning None of Objects, Materials and Textures are named
Environment  10 %	Accomplished Model is placed in an appropriate or interesting environment (either modeled or background imaged)	Developing Model is not placed in an appropriate or interesting environment (either modeled or background imaged)	Beginning There is no environment used whatsoever
Graphic Design & Visual Appearance  10 %	Accomplished Model shows good design qualities and is aesthetically pleasing	Developing Model shows basic design qualities and is aesthetically acceptable	Beginning Model shows poor design qualities and is not aesthetically acceptable
Skill Level  5 %	Accomplished Very good skill level is evident	Developing Basic skill level is evident	Beginning Poor skill level is evident
Project Guidelines Compliance  5 %	Accomplished Project guidelines are mostly complete and all required elements are present.	Developing There is a missing important project requirement, or a guideline not followed	Beginning There are missing 2 or more important project requirements, or project guidelines not followed

ACADEMIC/LEARNING OBJECTIVE

Scholars will learn the basics of Digital Animation. Scholars will be able to create "mini" animations using an online application. Scholars will also start creating the basic drawing that will be used for a future "line-art" digital animation project. Scholars will be able to complete a Constructed Response about the "History of Animation" and discuss what they like, or do not like about the project.

STUDENTS WILL ENTER THE CLASS QUIETLY AND BEGIN WORKING! 

Scholars will sign into Google Drive as they enter the class. Scholars will read all directions on this post thoroughly.  Scholars will review the examples linked above to determine the type of movie they are interested in making.  They will need to create a short (3-9 second) video clip, with at least one sound effect, for credit.  When complete, they will UPLOAD both the RAW Project, and their FINAL Project to Google Drive and SHARE it with Mr. S for review.   The basis for their projects will be created using a single slide in Google Slides that they should create first.

THANK YOU FOR YOUR ATTENTION AND POSITIVE ATTITUDE TODAY!

Standards Covered In This Class 

PA 3.7.7 & 11 Section C / ISTE 2011

CSTA Tied With Common Core ELA/Math rev. 2011