Take a look at the article above. It contains excellent information about what should be included in the content of a digital portfolio. It was written by Cory Rubay a Virtual Enterprise teacher. In the Samples page, click on Digital Portfolio.
Chapter 1 includes what should be included in a digital portfolio. I followed these guidelines when putting together this assignment. My assignment will focus on using HTML 5 as the program for creating the portfolio. If you are not technically oriented, do not fear. I believe that anyone with basic computer skills can make a digital portfolio using HTML5. There are numerous Step By Steps that I put together on this web site, illustrating the advantages and how to work with the method.
Our focus here is to create an electronic portfolio using HTML 5 and put the information on a CD or DVD. Templates are supplied for you. All you need to do is to modify it with your information. The assignment should take about 10 hours to complete. The pages in the digital portfolio include the following:
A home or splash page
A cover letter page
A resume page
A page used to post your awards
A work experience/volunteer page
A page featuring samples of your work
letters of recommendation
Materials Needed
Have downloaded a copy of Notepad++ on your computer
Google's Chrome Browser is recommended as the browser to use for this assignment.
A good digital picture of yourself
Examples of cover letters. Microsoft's Word Program has copies that can be downloaded and modified.
Resume - hard copy or digital copy
Awards you want to include.
Work Samples you created: accounting forms, sales catalog, employee manual, newsletters, web pages, booth set ups, business or marketing presentations.
Letters of recommendation
Make a special folder for all of your portfolio files. All work should be saved in this folder.
Teacher's Responsibility
Having Notepad++ downloaded onto each students machine
The splash page or first page is the key to catching and employers interest. My example contains name address phone number, cell and land line phone numbers, address and email information.
They are contained in the header and footer of this document.
A large digital photograph of you should be front and center.
The page should show immediately what kind of job you are applying for.
A graphic that is representative of the type of work applied for is a nice touch
The page should also have a navigational section, to direct the employer to different sections or pages of the portfolio.
The template that you will be working on is shown below.
Let us examine the different sections of the template.
First there is a header which is beige in color.
Next you will see a navigation section on the left. It is a gray color
There is an article section in the middle of the page. It is an off-white color.
On the right-hand side is the aside box and it is a gray color
At the bottom, is the footer and it is beige in color.
This template started out as a flexible box model in html5.
Flexible box models were designed so that they could include many additional features and accommodate a number of devices like cell phones and tablets.
If you end up posting your digital portfolio to a web site, prospective employers could access it on their cell phones and tablets.
When you make the window smaller, each element collapses, but you can see all the information. It is pushed down.
Also, columns collapse and for smaller devices, there is one column instead of 3 or 4.
Once you load the template into Notepad++, drag the right side of the window to the left and watch what happens.
Every thing get narrower.
The words in the navigational section move downward, but are still readable.
If there were information or pictures in the aside and article boxes, they would also get pushed down the page and resized.
Eventually the columns collapse down to one column.
The page works with two different files: html and cascading style sheet. The cascading style sheet file tells the browser how to interpret and process the code in the html or main section.
The code for the blank template looks like this.
Position the cursor at the top, left hand corner of the box above. Click the mouse then highlight the code in the box above by dragging the cursor to the end of the document.
Put the html code on your clipboard by pressing CTRL + C
Open Notepad++ - Select File - Click on New - Press CTRL + V to paste the code into Notepad++.
Save it as home.html. in your project folder.
Getting the cascading style sheet file
The style sheet file is called at the beginning of the html section between the head tags, <head> </head>.
<Link Rel="StyleSheet" Type="text/css" href="DigPort.css"/>>
This file tells the main file how to look. It contains formatting codes. We need this file as well as the home page file. A copy of the file is listed below so that you can copy it, paste it into notepad++ and save in your own folder.
It is called DigPort.css
Position the cursor at the top, left hand corner of the box above. Click the mouse then highlight the code in the box above by dragging the cursor to the end of the document.
Put the cascading style sheet code on your clipboard by pressing CTRL + C
Paste it into a new file in Notepad++
Save it as DigPort.css.
The style sheet file is quite lengthy.
Three sections are almost identical. Each of the three sections represent the code for either a desktop/laptop computer, a tablet and a cell phone.
Adding your own information for the header
home.html is the name of the first page of your portfolio.
Find the tag <header>.
Then type in your personal information :your name, home phone, your cell phone number and your address. Put the information after the colons and before the ending paragraph tag, </p>.
Color changes of the flexible boxes, borders, fonts.
You may not like the color palette of the page. There are three colors involved. Below is a table, for you to look at, that shows additional colors that you may want for your portfolio.
Color Possibilities
Color Name
Hex Color
teal
#008080
gray
#a9a9a9
off white
#ececea
blue violet
#8a2be2
orange
#ffa500
black
#000000
blue
#0000ff
red
#ff0000
white
#ffffff
orchid
#da70d6
seashell
#fff5ee
light coral
#f08080
violet
#ee82ee
dark sea green
#8fbc8f
Remember if you use a dark background, you will need to use light colors for text.
Conversely, if you have light backgrounds, use dark colors for text.
Open the file and calledDigPort.css. Make sure you match the case of the letters.
Now we want to change the background color of the article flex box.
Follow these steps to replace colors. Notepad++ has a search and replace feature that makes changing colors and other information very easy.
Make sure that DigPort.css is on your screen.
Position your cursor at the top of the document.
Find the binocular icon on the tool bar for Notepad++ and click on it.
Click on the Find tab
Find What, Type dddd88. This is the current color of the article flex box.
Make sure match case and match whole word buttons are unchecked.
Search mode is normal. Check button should be on.
Direction button has to do with where you are in the document. If your cursor is at the top of the document, then click on down for the direction.
Transparency button should reflect On losing focus.
Click on Replace All button.
A message box will pop up telling you that 3 occurrences were replaced.
There are three sections in the DigPort.css file where the background color is defined: one for desktop/laptops another for tablets and the third for cell phones
Click OK
Close the box.
Save your file as DigPort.html
Make sure that you capitalize the D and the P.
Load home.html in Notepad++
Click, Run and launch in chrome to see your color change.
The footer information
The footer information in this example will contain email contact information.
Type in your information
After the mailTo:key in your email address
Replace the nameGerald Raines with your name
Change the address to your home address
Save file. Usehome.html as the file name. Remember case matters, so the file name must be in all lower case letters.
Run and launch in Chrome to see this information.
Article Section Adding your digital picture
Look for the html section and find the article flex box section of your page
Key in the centering tag, <center>
Next we are telling the browser to use a special paragraph tag.
The tag is used to format the job you are looking for. Key in the position that you are interested in.
Key in the name of the file containing your picture followed by it height and width.
Here is an example <img src="your picture file name" height=600 width=500>
Substitute your digital picture's file name for the picfilefilename
Turn centering off. </center>
Save file home.html and test.
Aside flexible box background
For your splash page or home page, you might want to put a background image in the aside flexible box. Remember this is the box on the right-hand side of the page. It already has a background image called Lambswool.jpg. Background images can be used instead of background colors to give a different visual impression. Background images are usually small and can be repeated over and over to fill in the area.
Other background images available for you are:
Image
Image name
Clear Day Bkgrd.jpg
moneybkgrd.jpg
paper-linen.jpg
paper-pinkplaster.jpg
Lambswool.jpg
To get a copy of the background image, if you want to change it follow these steps.
Right-Click on the image.
Save image as
Select jpg
Use file name suggested, just remove the two parentheses and the number between them.
Save home.html in the same folder as your digital portfolio
I used a picture for the template was Lambswool.jpg. Experiment by changing the name of the background image. The section is in the DigPort.css file. See below.
Once you have decided on your background, you can use the search and replace feature of Notepad++ to substitute your image for the existing one. Make sure that you are changing the DigPort.css file and not the home.html file.
If for example, you wanted to use the money picture instead of the Lambswool.jpg follow these steps.
Click on the binoculars icon on the Notepad++ tool bar
Click on Find Tab.
Find What Lambswool.jpg
Click on Replace Tab.
Replace with moneybkgrd.jpg
Click Replace All button.
Save home.htmland test.
The Lambswool background should have changed to a bunch of bills- money background
You can use any image as a background image. Just make it small and either repeat the image or not.
Microsoft Paint has a way to resize images. This works well in making your image smaller.
You can, of course, just delete the Lambswool.jpg and key in the name of the background you want.
The Lambswool.jpg appears in the DigPort.css file three times: One for laptop/desktop size screens, one for tablets, and the third for cell phones.
Formatting of colors
Colors in web design can be set in a number of ways. We have worked with the hex decimal numbers, the name of the color and now we will look at the red, green, blue selectors for color.You can use the rgb color selectors to set a background color using different amounts or red, green and blue. See the table below for some examples.
In the DigPort.css file in the aside sections,you would type
background-color:rgb(0,0,255);
This color is bright blue.
You need to key in the statement concerning background-color for all three screen sizes:
Each section begins with the - @media screen only statement.
Next you need comment out // the lines that call for the background image and the background repeat statement. Remember all three sections
Save your DigPort.css file then run the home.html file to see the changes. Try this out.
Your css file for the aside background should match the code in the box below.
The line that states background-color:rgb(0,0,255); will give you a blue background in the aside flex box.
Did the aside section become a bright blue?
Opacity and background images
You can do some interesting things using background images and the location, the number of images, and the transparency of those images. Suppose you want to have a background image repeated a number of times and text that shows through the background image. Let's see how this works. Make the css section of the aside box look like the information below.
Save the DigPort.cssfile and run home.html. You should see a picture of a man, guy2.jpg, filling in the entire space of the aside flex box. Make the following change. In the line that states background-repeat:repeat;, make the last repeat say repeat-x. Save it and run it. What happened to the image of guy2.jpg? Did the image only repeat horizontally? It should have. Change the x to y and try it the image should just appear vertically down the page. The word Repeat by itself repeats both horizontally and vertically.
Opacity setting
Experiment with the opacity setting. Remember that 1.0 gives you the lightest and 0.0 the darkest.
The job Description
Instead of just writing out the job description that you had in Virtual Enterprise, we might use the extra power in a digital portfolio and make an audio file explaining each job description.
I have made audio files for each job description and all you have to do is change the job title and the audio file name. The following table shows what the different titles are and the name of that audio file that you can use.
Job Title
Audio File Name
Chief Executive Officer
ceo.mp3
Chief Financial Officer
cfo.mp3
Vice President of Sales
vpsales.mp3
Vice President of Marketing
vpmarketing.mp3
Vice President of Advertising
vpadvertising.mp3
Vice President of Human Resources
vphr.mp3
Vice President of Information Technology
vpit.mp3
Administrative Assistant
adm.mp3
Event Planner
ep.mp3
Sales Associate
sa.mp3
Marketing Associate
ma.mp3
Advertising Associate
aa.mp3
Accounts Payable/Payroll/Accounts Receivable
aparpay.mp3
Branch Banker
banker.mp3
Human Resources Associate
hr.mp3
Web Designers
web.mp3
To customize the audio file for your job title follow these instructions:
Copy to the clipboard the information above in the text area box.
If this is not your job title, change it. Use titles from table above
<source src="cfo.mp3" type="audio/mpeg"> is where the audio file name is inserted
Find the audio file name for your job description and put the file name in place of cfo.mp3
Save file as cover.html and test in a browser.
You should see the audio control.
Click the play button to hear the job description.
Resume
On this page we will feature your resume and your educational goals. To create this page, follow the instructions below.
Converting your existing resume into a pdf.
Load your resume into Microsoft Word.
Highlight the text
Drag the right margin back to 6 on the scale
Use Save AS "Your name resume.pdf"
Make sure you save it in the portfolio folder with the rest of your work.
Put a copy of resume.html on the clipboard. The code is in the box above.
Open Notepad++
Start a new file.
Paste the contents of the clipboard into Notepad++.
Save the file as resume.html. This is the template file for this page.
Copy and paste the information for the header and footer. Use one of the other completed pages for information needed.
Scroll down to the article section and just after the <center> tag, type
<iframe src="Your Name Resume.pdf" height=900 width=600 frameborder=0></iframe>
Your Name Resume.pdf is what you call your resume after it has been converted to a pdf file
The file name should have an .pdf extension after the name of the file.
Save your resume page as resume.html and test it out.
Aside flexbox information
In the aside box we need to list your educational goals. Next to each <li> key in one of your goals. If you are still in high school the first goal might be "To graduate from high school". the <li> are lists. A bulleted list is established. Another goal might be to attend a community college. Another to major in ____. Another might be to attend a four-year college. The purpose of this section is for your employer to see how your working for them fits into your educational plan.
I feel these educational goals are important for me
Next to each <li> key in why the educational goals set out in the section above are important to you. You might say I have always had an in interest business, or I enjoy working with numbers, coding web pages is rewarding, or I enjoy working with people and persuading them to buy products or services. Save your file as resume.html
Here is an example of a finished resume page Completed Resume page
This page of your digital portfolio is designed to showcase your work experience. Even if you do not have any paid work experience, I know many of your have volunteered, done intern-ships, etc. Baby sitting or gardening for an individual will work nicely here.
Get a copy of this page using the information in the box below.
This page. It is called work.html Copy and paste the information for the work experience page into Notepad++. Save it as work.html
Copy and paste the header and footer information from another page.
The page is formatted at this time to show two different jobs. There are two article flex boxes. One for each job.
For each job, just before the job responsibility section, write a paragraph describing the jobs. Under job responsibilities enumerate the things you did on the job. The list tag works nicely for this kind of information. Next to each <li> list a responsibility. You can make as many of these list items as needed or delete some of them.
Here is an example of a completed page for work experience showing the header, footer and both article boxes.
Key for this section of work experience page. Aside
I used the aside flex box to describe the businesses that I worked for. I put in a picture of each business and also created a place to make a link to their company web page. An unordered list was created with the <ul>. An ending tag is also necessary after listing each item ,</ul>.
Each list item <li> is designed to describe product or services of each business.
This page is used to feature your accomplishments in school. I designed the article section to feature certificates earned that would relate to getting a job. The aside section is for additional awards, like athletic letters, ASB positions, clubs you participated in, etc.
The code for the awards.html template is listed below. Use copy and paste to create an awards.html file in your own folder.
Copy and paste the information in the header and footer into the document and save it as awards.html
The portion that we will be working with appears below.
First we need to decide which certificate to feature. There is an overall Virtual Enterprise certificate and individual certificates earned in certain departments. I used the accounting certificate, since the goal of our fictitious student is to obtain a job doing accounting.
We need to obtain a digital copy of our certificate.
A digital copy of the accounting certificate can be found at janetbelch.com
The certificate is a Microsoft Word document and it is located on page 11 of the teacher's manual.
Ask your teacher for digital copies of certificates you have earned.
If none are available, then scan them.
Convert it to a .pdf Adobe Acrobat file.
Some scanners give you the scanned output as a pdf file.
Find the beginning and ending article tags
Insert the following line between the tags, just after the word Certificates
Substitute the name of your file where it saysVirtual Enterprise Accounting Certificate.pdf
You may have to adjust the height and width dimensions so that the certificate looks good on the page.
Save file as awards.html
Test it our using Chrome.
Your page should look something like this:
This page features the accounting certificate as an example.
Awards
Additional awards
The aside section is designated for the place to list all other kinds of awards, like athletic letters, scholarship awards, HS diploma, clubs, leadership. The placement of this information is in the awards.html file.Follow these steps to put in your personal information.
Load awards.html.css page into Notepad++
The information below puts a canvas element into the aside flex box. It makes a drawing area of 193 pixels by 500 pixels with a dotted black border.
Now it is time to make some changes in the DigPort,css file