Introduction

A digital portfolio is a way of presenting a set of electronic documents for a specific purpose. In your case, to showcase your achievements in your BTEC First in I&CT course. Your portfolio's design is an opportunity to demonstrate your technical. and creative abilities. A strong design tells potential employers immediately that you are a candidate worth taking notice of.

Portfolios are important tools that can provide opportunities for employment as they present your skills and abilities.
Complete the Activity sheet, Lesson1 - Portfolio review.

Defining your Project

A large part of your BTEC First in Information and Creative Technology course requires the creation different types of evidence for your qualification to be awarded (e.g. a website or digital graphics) and systems (e.g. a computer network).
All projects have a number of common characteristics, including:

• a purpose (e.g. to create/develop a product or system)
• a unique start and endpoint in time
• a scope (a set of activities that need to be undertaken to achieve the purpose)
• a limited set of resources (time, people and budget).

Your digital portfolio will also have a set of features and functions. You need to establish what these are early on in the planning stages will help you to define your project.

1. Design (e.g. storyboard, structure chart, assets, software)
2. Create/test (e.g. develop the portfolio and test all elements to ensure they work)
3. Review (e.g. evaluate the result and check that it meets the original requirements)

1. Design. The design stage includes flashing out the idea, creating storyboards and structure charts, deciding on images and graphics, and choosing the type of software required.
2. Create/test. The create/test stage involves creating and developing the product and all the elements associated with it. lt also involves testing your product to ensure that all the elements work. If you are launching a new website, you would need to check that all the links work and that all the graphics and pages are displaying properly.
3. Review. Once you have created your portfolio, you will need to evaluate it and check whether it meets the original requirements and audience's needs.

at any stage of the lifecycle stages, you can make changes. However, once you have finished a stage , you should not make further changes. Instead, if you identify any things you would like to change, then create a record of what you would do differently.

Digital portfolio structure

Structure refers to how you construct your portfolio. The structure of a digital portfolio hangs on the type of portfolio of which you wish to create. The structure of your portfolio will be different from portfolios used by business to inform people about its products.
When looking at the structure of your portfolio, you should consider using different structures:

1. A unit-based approach. This approach involves presenting information on a unit-by-unit basis.
2. A product-based approach. This approach involves gathering together information from across different units and presenting it on a product basis.

Create an introduction to the unit, you need to include the following;
1. What your brief is, (WHO YOUR TARGET AUDIENCE IS/ARE? WHY ARE YOU DOING IT)
2. What your requirements (WHAT YOU HAVE BEEN ASKED TO DO, INCLUDING THE DETAIL, E.G CREATE 8 WEBPAGES. )

Create a storyboard of your home page with as much detail as you can. Consider that someone else is going to produce the page for you based on your design, so give as much direction to your idea as possible.

Peer assessment to check information and classwork for any SPaG. Leaners are able to update  glossary of terms, Word of the day – Learner investigation of identified WOTD

Reading: Read and understand texts, selecting material appropriate to purpose, collating from different sources and making comparisons and cross-references as appropriate.

One-Minute Verbal Assessment - The teacher asks learners to prepare and deliver a one minute verbal summary of a forthcoming or completed activity, session or topic.

Socrative for checking learning and learner reviews on the session.

Sample websites (live or as a slide show) A3 sheets and writing materials

Learner completion of the provided activity sheet.

Learners will gather areas of desire that could be used in personal portfolios later

Kahoot for checking/compounding of learning.

LO A Design a digital portfolio

Data analysis of information provided

Ratios: Calculating ratios, applying ratios, Scales e.g. Maps

Area, perimeter, volume: Calculating, applying calculations to real situations

Page Types

Most digital portfolios should contain the following three types of the pages.

1. Home Page
2. Section Pages
3. Context Pages

1. The home page on any portfoplio site should be eye catching as this is a landing point that any potential enployer or company may see. You should look to include a brief and to the point of what the site is and its purpose. The site should also include a simple navigation to the section and content areas that will showcase the work doen and key information points about you.

Defining your Project

A large part of your BTEC First in Information and Creative Technology course requires the creation different types of evidnce for your qualification to be awarded (e.g. a website or digital graphics) and systems (e.g. a computer network).
All projects have a number of common characteristics, including:

• a purpose (e.g. to create/develop a product or system)
• a unique start and end point in time
• a scope (a set of activities that need to be undertaken to achieve the purpose)
• a limited set of resources (time, people and budget).

Your digital portfolio will also have a set of features and functions. You need to establish what these are early on in the planning stages will help you to define your project.

1. Design (e.g. storyboard, structure chart, assets, software)
2. Create/test (e.g. develop the portfolio and test all elements to ensure they work)
3. Review (e.g. evaluate the result and check that it meets the original requirements)

1. Design. The design stage includes flushing out the idea, creating storyboards and structure charts, deciding on images and graphics, and choosing the type of software required.
2. Create/test. The create/test stage involves creating and devel o ping the product and all the elements associated with it. lt also involves testing your product to ensure that all the elements work. If you are launching a new website, you would need to check that all the links work, and that all the graphics and pages are displaying properly.
3. Review. Once you have created your portfolio, you will need to evaluate it and check whether it meets the original requirements and audience's needs.

at any stage of the lifecycle stages, you can make changes. However, once you have finished a stage , you should not make further changes . Instead, if you identify any things you would like to change, then create a record of what you would do differently.

Using the Activity sheet in the resources are "Lesson 2 -Why-What-When-Who" complete the sections to enable an understanding of what your portfolio is intended for.
 

Target Audience and Purpose

The design of your the user interface should reflect the intented target audience. The portfolios appearance and navigation will give an impression on your audience, anyone who will look at your portfolio could be potential employers in organisation that you are applying to. Anyone looking at the portfolio could be looking for different things, such as, your ability to communicate, your understanding of technical skills During the design, you will need to produce a short paragraph describing the purpose of the portfolio. This will help you identify its purpose. Make sure your paragraphs provide information to the following :

1. why you are creating the portfolio
2. what you hope the portfolio will achieve
3. what attributes your portfolio is likely to have. Will it be easy to use or very detailed? Explain why you have chosen to have these attributes.

Create a list of people who you think are likely to see your portfolio. Beside each person, write a short sentence outlining what you think they want/expect to see. Make a list of the work you would like to include in the portfolio. List the formats of this work. Wnte a few brief notes about how these items will help support your application. Keep copies of this work, as your notes may help you with your assessment.

Digital portfolio structure Charts

With your portfolio you will need to create and include a structure chart to show how your pages will be linked together. There are a number of ways you can create a structure chart.

• block diagram
• a navigation chart
• a Storyboard

Using the activity sheet in the resources area provide information to the structure of your site and why.

 

Speaking:Speak to communicate clearly and purposefully; structure and sustain talk, adapting it to different situations and audiences; use Standard English and a variety of techniques as appropriate

Reading: Read and understand texts, selecting material appropriate to purpose, collating from different sources and making comparisons and cross-references as appropriate.

Traffic Lights - Learners use green, amber and red traffic lights to indicate levels of understanding and to attract support from peers and the teacher.

Tickets Please! - The teacher creates two key questions for students to answer before they leave the lesson. Their answers will let her know what to do next.

UNIT 13 - 1A.1 Identify the intended use and features of two websites.

UNIT 13 - 2A.P1 Explain the intended uses and features of two different websites.

UNIT 13 - 2A.M1 Review how the features in two websites improve presentation, usability, accessibility, and performance.

UNIT 13 - 2A.D1 Discuss the strengths and weaknesses of the websites.

UNIT 3 - Learning aim A: Design a digital portfolio 

UNIT 3 - 1A.1 Identify the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.P1 Describe the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.M1 Produce detailed designs for a digital portfolio, including: 

• alternative solutions
• detailed storyboard of the layout and content of pages
• a detailed structure chart with complete navigation routes
• fully referenced sources for the readymade assets.

UNIT 3 - 2A.D1 Justify the final design decisions, explaining how the digital portfolio will:

• fulfil the stated purpose
• meet the needs of the audience.

UNIT 3 - 1A.2 Produce designs for a digital portfolio, with guidance, including: 

• outline storyboards of the layout and content
• a list of ready-made assets to be used.

UNIT 3 - 2A.P2 Produce designs for a digital portfolio, including:

• a timeline for the project
• a storyboard of the layout and content of pages
• a structure chart indicating navigation routes
• a list of ready-made assets to be used, including sources.

UNIT 3 - Learning aim A: Design a digital portfolio 

UNIT 3 - 1A.1 Identify the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.P1 Describe the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.M1 Produce detailed designs for a digital portfolio, including: 

• alternative solutions
• detailed storyboard of the layout and content of pages
• a detailed structure chart with complete navigation routes
• fully referenced sources for the readymade assets.

UNIT 3 - 2A.D1 Justify the final design decisions, explaining how the digital portfolio will:

• fulfil the stated purpose
• meet the needs of the audience.

UNIT 3 - 1A.2 Produce designs for a digital portfolio, with guidance, including: 

• outline storyboards of the layout and content
• a list of ready-made assets to be used.

UNIT 3 - 2A.P2 Produce designs for a digital portfolio, including:

• a timeline for the project
• a storyboard of the layout and content of pages
• a structure chart indicating navigation routes
• a list of ready-made assets to be used, including sources.

UNIT 13 - Learning aim A: Understand the uses and features of websites

UNIT 13 - 1A.1 Identify the intended use and features of two websites.

UNIT 13 - 2A.P1 Explain the intended uses and features of two different websites.

UNIT 13 - 2A.M1 Review how the features in two websites improve presentation, usability, accessibility, and performance.

UNIT 13 - 2A.D1 Discuss the strengths and weaknesses of the websites.

Collect and record data: Questionnaires, Observation, Tally

Using Numbers: Counting, Place value, adding and subtracting, multiplying and dividing.

Try creating a project plan using online cloud services such as projectplan365

ACTIVITY
Using sheets of paper, create a simple design for a home page and try different combinations of colours and fonts. Decide which you think are the best three combinations. Show these to a small group of people and see what they think. Keep the examples and notes of comments for when you start to design your portfolio.

Timelines

What is a timeline?A timeline is used to outline the total time needed to complete a project and the time needed to complete stages of your project. lt also allows you to understand what should be being worked on and when. lt is to help you manage your time, so you don't spend too much time on an activity! There are a number of different ways that you can do this. A timeline must identify the different project stages, aditional to showing which tasks can be done at the same time (concurently) and which must only start once a previous stage to finishes.

Try creating a project plan using online cloud services such as projectplan365

ACTIVITY
Using sheets of paper, create a simple design for a home page and try different combinations of colours and fonts. Decide which you think are the best three combinations. Show these to a small group of people and see what they think. Keep the examples and notes of comments for when you start to design your portfolio.

Simple Self Assessment - Learners compare their work against success criteria given to them by the teacher and identify ways to improve the work done so far.

LO A Design a digital portfolio

UNIT 3 - 1A.1 Identify the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.P1 Describe the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.M1 Produce detailed designs for a digital portfolio, including: 

• alternative solutions
• detailed storyboard of the layout and content of pages
• a detailed structure chart with complete navigation routes
• fully referenced sources for the readymade assets.

UNIT 3 - 2A.D1 Justify the final design decisions, explaining how the digital portfolio will:

• fulfil the stated purpose
• meet the needs of the audience.

UNIT 3 - 1A.2 Produce designs for a digital portfolio, with guidance, including: 

• outline storyboards of the layout and content
• a list of ready-made assets to be used.

UNIT 3 - 2A.P2 Produce designs for a digital portfolio, including:

• a timeline for the project
• a storyboard of the layout and content of pages
• a structure chart indicating navigation routes
• a list of ready-made assets to be used, including sources.

LO A Design a digital portfolio

UNIT 3 - 1A.1 Identify the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.P1 Describe the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.M1 Produce detailed designs for a digital portfolio, including: 

• alternative solutions
• detailed storyboard of the layout and content of pages
• a detailed structure chart with complete navigation routes
• fully referenced sources for the readymade assets.

UNIT 3 - 2A.D1 Justify the final design decisions, explaining how the digital portfolio will:

• fulfil the stated purpose
• meet the needs of the audience.

UNIT 3 - 1A.2 Produce designs for a digital portfolio, with guidance, including: 

• outline storyboards of the layout and content
• a list of ready-made assets to be used.

UNIT 3 - 2A.P2 Produce designs for a digital portfolio, including:

• a timeline for the project
• a storyboard of the layout and content of pages
• a structure chart indicating navigation routes
• a list of ready-made assets to be used, including sources.

Using numbers: Written or mental methods, using a calculator, rounding and estimating, problem-solving

Analysis of information: Interpreting Results, Drawing conclusions from data, Comparing data

Using the Videos within this section, create a list of the different file types and explain what they mean, what they are.

'>

Testing & Test plans

• Why do we use tests? Q&A - 5-10 mins
• What things other than websites’ and pages can we test (MOT, driving tests) Q&A 5-10 mins
• Links to other units where tests and test plans appear (all units other than 1 & 2) – Tutor led 5-10 mins


• In groups of no more than 3, create a list of the things on a webpage that you would test/review? 15 min’s
• What information should appear in a test plan/table? Q&A, board work – 5 min’s


• Create a test plan from your lists created - this must be done individually within your groups. – Learner led 15 min’s
• Choose a website of your choice – Learner led 2 min’s
• Using the now created test plan/table that you have created, use it on the selected website (Moodle is a good one as there are a few errors and issues) – Learner led 30 min’s

Assets and Files

Make sure that all the assets are in a suitable format for the web. You need to check the file format and also the size of images, videos and animations. You may need to change text that has been created using a word processor so that it displays correctly when formatted in html.

Now that you have created you plans and storyboards for your portfolio, you now need to consider the assets that you will be displaying on your site.
Create a folder in your storage area for Unit3 and call it "Assets" inside of this folder create a folder for each of the pages that you will be having on your portfolio as displayed in the image below,

Inside of these folders you will need to place ALL assets for that page. REMEMBER: these assets MUST appear on your assets table, so you may need to update this as you go.

Things to include in your portfolio

At this point of the planning you need to stop and think about what content to include the portfolio and what your selections of web pages will look like. You need to take the following into account:

• how you will combine files of different formats into your portfolio
• what you can do to limit the size of multimedia files, which can be large (tens of megabytes in size)
• how you will get your audience to move through your portfolio .

Digital Assets

Once the design of a site has happend consideration turns to the files and assets that you will required to be on, and available to the site for potential visitors. It is essential to consider a number of things in this topic area, these are,

• quality
• size (dimensions)
• size (capacity)
• file types (compression)

these points can effect the operation and load times of the pages on the portfolio.
In most cases when a user visits a portfolio they will be looking for something, this may be information that is text based, or information in image form. The presentation of information will vary based upon the factors indicated above, this is where you will need to consider the options available.
When using text, the load times are relatively fast, only where unusual fonts are loaded from other locations does this slow down, however this is in the most part not sufficient for the user not loose interest.
However images can take time to download to the page, this time is dependant on the settings selected in relation to the list above. You must review a balanced approach of quailty of the image against the overall file size, this is where some details of an image are lost if the image quality is reduced when saving therefore making the file size smaller.
Other options available to reduced the file size is the use of different file types, there are a number to choose from. These file types will use compression techniques to make the size of the file smaller, with the potential of not removing any of the quality.

Sound

As has been discussed in the section above our assest can effect the load times of our site, we have reviewed images but what about audio? Some sites have audio that play on them (this is not advised) but these sounds will need to be loaded much like the images. Again like the images the sounds can be large and the quality can and will effect thier loading, so in this case we use different sound file types that use CODEC's (COmpression DECompression) to reduce the size without noticable quality changes.

Using the Videos within this section, create a list of the different file types and explain what they mean, what they are.

One-Minute Verbal Assessment - The teacher asks learners to prepare and deliver a one minute verbal summary of a forthcoming or completed activity, session or topic.

LO A Design a digital portfolio

UNIT 3 - 1A.1 Identify the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.P1 Describe the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.M1 Produce detailed designs for a digital portfolio, including: 

• alternative solutions
• detailed storyboard of the layout and content of pages
• a detailed structure chart with complete navigation routes
• fully referenced sources for the readymade assets.

UNIT 3 - 2A.D1 Justify the final design decisions, explaining how the digital portfolio will:

• fulfil the stated purpose
• meet the needs of the audience.

UNIT 3 - 1A.2 Produce designs for a digital portfolio, with guidance, including: 

• outline storyboards of the layout and content
• a list of ready-made assets to be used.

UNIT 3 - 2A.P2 Produce designs for a digital portfolio, including:

• a timeline for the project
• a storyboard of the layout and content of pages
• a structure chart indicating navigation routes
• a list of ready-made assets to be used, including sources.

LO A Design a digital portfolio

UNIT 3 - 1A.1 Identify the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.P1 Describe the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.M1 Produce detailed designs for a digital portfolio, including: 

• alternative solutions
• detailed storyboard of the layout and content of pages
• a detailed structure chart with complete navigation routes
• fully referenced sources for the readymade assets.

UNIT 3 - 2A.D1 Justify the final design decisions, explaining how the digital portfolio will:

• fulfil the stated purpose
• meet the needs of the audience.

UNIT 3 - 1A.2 Produce designs for a digital portfolio, with guidance, including: 

• outline storyboards of the layout and content
• a list of ready-made assets to be used.

UNIT 3 - 2A.P2 Produce designs for a digital portfolio, including:

• a timeline for the project
• a storyboard of the layout and content of pages
• a structure chart indicating navigation routes
• a list of ready-made assets to be used, including sources.

Length, weight, capacity, temperature: Measuring, using scales, ruler, tape measure, thermometer Recording and comparing results, converting, Choosing appropriate units and measuring instruments, estimating.

Page Formating

Page formatting is key when planning the creation of any web pages and portfolio's. At this point you will be requierd to make considerations and set out the style and feel of the site these must be consisten and provide continuity. Areas that should be considered are;

1. Colour Schemes
   When creating any designs and webpages carefull consideration to colour harmony should be thought about. Users may not stay on the site if the colour scheme is distracting and make it hard to read the content such as

   This example

   Other issues are people that may suffer from colour blindness may not see below,

   This example

   Options that people can read are as below, however what sort of image and feel does it give?

   This example
2. Fonts and Font Sizes
   Fonts and the correct selection of them can sell your site have an image that could boost your profile or make the portfolio look childish and non professional.
   • Some fonts can be hard to read such as

     This is some text in verdana

     This is some text in helvetica

     This is some text in time new roman

3.  

ACTIVITY
Draw a neat, hand-drawn draft of your section pages to show the layout of your portfolio. Draw a draft of a diagram showing how your home page will be linked to the section pages. Add the linkages to the context pages to your diagram and note how you will link between context pages. Note what type of link (e .g. buttons, menus, etc.) you are going to use and what your navigation bar will look like. Keep this diagram to help you with your design work.

Navigation

The importance of having good navigation is key to enable users to navigate around any web portfolio easily. If the portfolio constructed in sections, the home page must include a button/link (hyperlink) to each section. Navigation links and buttons should work whether the user is using them to navigate moving forwards or backwards through sections. Some Hyperlinks are positioned within a navigation bar to enable the users to move between pages and content. The position of the navigation bar should be considered. Users need to find and access it easily your however the design and location shouldn't take over the page's design. Hyperlinks often appear as text. Users will click on these to move to another page or content on a page. Navigation consistency is important, the scheme and position you decide should be used throughout the portfolio.

Page Formating

Page formatting is key when planning the creation of any web pages and portfolio's. At this point you will be requierd to make considerations and set out the style and feel of the site these must be consisten and provide continuity. Areas that should be considered are;

1. Colour Schemes
   When creating any designs and webpages carefull consideration to colour harmony should be thought about. Users may not stay on the site if the colour scheme is distracting and make it hard to read the content such as

   This example

   Other issues are people that may suffer from colour blindness may not see below,

   This example

   Options that people can read are as below, however what sort of image and feel does it give?

   This example
2. Fonts and Font Sizes
   Fonts and the correct selection of them can sell your site have an image that could boost your profile or make the portfolio look childish and non professional.
   • Some fonts can be hard to read such as

     This is some text in verdana

     This is some text in helvetica

     This is some text in time new roman

3.  

ACTIVITY
Draw a neat, hand-drawn draft of your section pages to show the layout of your portfolio. Draw a draft of a diagram showing how your home page will be linked to the section pages. Add the linkages to the context pages to your diagram and note how you will link between context pages. Note what type of link (e .g. buttons, menus, etc.) you are going to use and what your navigation bar will look like. Keep this diagram to help you with your design work.

<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Digital Portfolio - James Farrington IS GREAT</title>
<style>
#logo
{
height:200px;
background-color:red;
}
#banner
{
height:200px;
background-color:green;
}
#nav
{
height:200px;
background-color:blue;
}
#content
{
height:600px;
background-color:yellow;
}
#footer
{
height:200px;
background-color:green;
}
#wrapper
{
width:960px;
margin-left:auto;
margin-right:auto;
}
.navbutton
{
color:white;
display:inline-block;
background-color:green;
width:100px;
height:50px;
boarder-radius:10px; /* this is my comment */
}

</style>
</head>
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="banner"></div>
<div id="nav">
<p>this is the nav</p><!--This is a comment -->
<ul>
<li class="navbutton">One</li>
<li class="navbutton">Two</li>
<li class="navbutton">Four</li>
<li class="navbutton">Eight</li>
</ul>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>

index template

0

0

LO A Design a digital portfolio

UNIT 3 - 1A.1 Identify the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.P1 Describe the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.M1 Produce detailed designs for a digital portfolio, including: 

• alternative solutions
• detailed storyboard of the layout and content of pages
• a detailed structure chart with complete navigation routes
• fully referenced sources for the readymade assets.

UNIT 3 - 2A.D1 Justify the final design decisions, explaining how the digital portfolio will:

• fulfil the stated purpose
• meet the needs of the audience.

UNIT 3 - 1A.2 Produce designs for a digital portfolio, with guidance, including: 

• outline storyboards of the layout and content
• a list of ready-made assets to be used.

UNIT 3 - 2A.P2 Produce designs for a digital portfolio, including:

• a timeline for the project
• a storyboard of the layout and content of pages
• a structure chart indicating navigation routes
• a list of ready-made assets to be used, including sources.

LO A Design a digital portfolio

UNIT 3 - 1A.1 Identify the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.P1 Describe the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.M1 Produce detailed designs for a digital portfolio, including: 

• alternative solutions
• detailed storyboard of the layout and content of pages
• a detailed structure chart with complete navigation routes
• fully referenced sources for the readymade assets.

UNIT 3 - 2A.D1 Justify the final design decisions, explaining how the digital portfolio will:

• fulfil the stated purpose
• meet the needs of the audience.

UNIT 3 - 1A.2 Produce designs for a digital portfolio, with guidance, including: 

• outline storyboards of the layout and content
• a list of ready-made assets to be used.

UNIT 3 - 2A.P2 Produce designs for a digital portfolio, including:

• a timeline for the project
• a storyboard of the layout and content of pages
• a structure chart indicating navigation routes
• a list of ready-made assets to be used, including sources.

Storyboards can be created via pencil drawings and software, of which some can be online, such as, Balsamiq (http://www.balsamiq.com)

Storyboard Additional Reading

Web Designer Legend

ACTIVITY

'>

Storyboard

What is a storyboard!? The use of a storyboards can be found accross a number of areas, not only digital portfolios, web and animation. These are used to enable a visual representation of the the written ideas, so that others can begin to understand the layout and presentation of the portfolio. The storybords should enable anyone to see the pags contained within the site and to outline key features, this could be logo's, navigation and images.
Storyboards can be created via pencil drawings and software, of which some can be online, such as, Balsamiq (http://www.balsamiq.com)

Storyboard Additional Reading

Web Designer Legend

ACTIVITY

More Than Just a Minute - Learners assess themselves against key learning points indicating a level of understanding to inform teacher planning.

LO A Design a digital portfolio

UNIT 3 - 1A.1 Identify the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.P1 Describe the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.M1 Produce detailed designs for a digital portfolio, including: 

• alternative solutions
• detailed storyboard of the layout and content of pages
• a detailed structure chart with complete navigation routes
• fully referenced sources for the readymade assets.

UNIT 3 - 2A.D1 Justify the final design decisions, explaining how the digital portfolio will:

• fulfil the stated purpose
• meet the needs of the audience.

UNIT 3 - 1A.2 Produce designs for a digital portfolio, with guidance, including: 

• outline storyboards of the layout and content
• a list of ready-made assets to be used.

UNIT 3 - 2A.P2 Produce designs for a digital portfolio, including:

• a timeline for the project
• a storyboard of the layout and content of pages
• a structure chart indicating navigation routes
• a list of ready-made assets to be used, including sources.

LO A Design a digital portfolio

UNIT 3 - 1A.1 Identify the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.P1 Describe the audience and purpose for the design of a digital portfolio.

UNIT 3 - 2A.M1 Produce detailed designs for a digital portfolio, including: 

• alternative solutions
• detailed storyboard of the layout and content of pages
• a detailed structure chart with complete navigation routes
• fully referenced sources for the readymade assets.

UNIT 3 - 2A.D1 Justify the final design decisions, explaining how the digital portfolio will:

• fulfil the stated purpose
• meet the needs of the audience.

UNIT 3 - 1A.2 Produce designs for a digital portfolio, with guidance, including: 

• outline storyboards of the layout and content
• a list of ready-made assets to be used.

UNIT 3 - 2A.P2 Produce designs for a digital portfolio, including:

• a timeline for the project
• a storyboard of the layout and content of pages
• a structure chart indicating navigation routes
• a list of ready-made assets to be used, including sources.

Area, perimeter, volume: Calculating, applying calculations to real situations

MAKING A WEBSITE

Creating a website can be a challenge. There are a number of simple steps that you can follow to support and assist you in creating your pages and website. 

1. Keep all your files for the project in one place. When you start a project make a folder that you will save your web pages and digital content too. This process sounds simple however it is a common downfall of most students. Even if you have a copy of an image or file in another folder somewhere else on your computer or Pendrive, copy and paste it into your project folder. This routine will enable you just to copy, zip or move one folder for a project an know that everything, yes EVERYTHING that is related to that project goes with it.
2. index.html, the other common issue is saving and naming of your files. When saving and creating website files always use lowercase AND the first webpage that is to be the "homepage" MUST be named index.html.
3. Try to keep organised. It is good practice to create a subfolder in your project folder to place things like images in them. This makes it easier and quicker to find things.

SIMPLE STRUCTURE

STARTING A PROJECT

The below video includes the following areas

HTML -Structure, Div's and comments

CSS - Margin, Width, Height, Background Color, Padding, Hex colors, Div's,   

Brackets - Curved or square punctuation marks enclosing words inserted into a text

Peer Assessment of Independent Work - Learners work in groups to assess each other's work and make recommendations for improvement.

UNIT 3 - Learning aim B: Create and test a digital portfolio

UNIT 3 - 1B.3 Prepare portfolio content, with guidance.#

UNIT 3 - 2B.P3 Prepare portfolio content and save in appropriate file formats, using folders, demonstrating awareness of purpose.#

UNIT 3 - 2B.M2 Select and refine a range of portfolio content and save in appropriate file formats, using a logical folder structure and demonstrating awareness of the audience.#

UNIT 3 - 2B.D2 Refine the portfolio to improve navigation and include commentaries that justify the choice of content.#

UNIT 3 - 1B.4 Create a functional digital portfolio, with guidance.

UNIT 3 - 2B.P4 Create a functional digital portfolio, including:

• home page and section pages
• context pages.

UNIT 3 - 2B.M3 Develop the portfolio using, demonstrating awareness of the audience:

• a range of suitable assets on the web pages
• Consistent navigation
• commentaries to explain the content.#

UNIT 3 - 1B.5 Test the digital portfolio for functionality, with guidance

UNIT 3 - 2B.P5 Test the portfolio for purpose and functionality on a different system and browser, and take appropriate action.

UNIT 3 - 2B.M4 Gather feedback from others and use it to improve the portfolio, demonstrating awareness of audience and purpose.

UNIT 13 - Learning aim C: Develop and test a website

UNIT 13 - 1C.4 Prepare assets and content for the website, with guidance.

UNIT 13 - 2C.P4 Prepare assets and content for the website, demonstrating awareness of purpose, listing sources of assets.

UNIT 13 - 2C.M3 Prepare assets and content for the website demonstrating awareness of the users’ requirements, with all sources fully referenced.

UNIT 13 - 2C.D3 Refine the website, to improve accessibility and performance, taking account of user feedback and test results.

UNIT 13 - 1C.5 Develop a website containing four interlinked web pages, with guidance.

UNIT 13 - 2C.P5 Develop a website containing at least eight interlinked web pages, demonstrating awareness of purpose.

UNIT 13 - 2C.M4 Develop a website including interactive components, demonstrating awareness of user requirements and taking account of usability.

UNIT 13 - 1C.6 Test the website for functionality and purpose repairing any faults and documenting changes, with guidance.

UNIT 13 - 2C.P6 Test the website for functionality and purpose, repairing any faults, and documenting changes.

UNIT 13 - 2C.M5 Test interactivity and gather feedback from others on the quality of the website, and use it to improve the website, showing awareness of user requirements.

UNIT 3 - Learning aim B: Create and test a digital portfolio

UNIT 3 - 1B.3 Prepare portfolio content, with guidance.#

UNIT 3 - 2B.P3 Prepare portfolio content and save in appropriate file formats, using folders, demonstrating awareness of purpose.#

UNIT 3 - 2B.M2 Select and refine a range of portfolio content and save in appropriate file formats, using a logical folder structure and demonstrating awareness of the audience.#

UNIT 3 - 2B.D2 Refine the portfolio to improve navigation and include commentaries that justify the choice of content.#

UNIT 3 - 1B.4 Create a functional digital portfolio, with guidance.

UNIT 3 - 2B.P4 Create a functional digital portfolio, including:

• home page and section pages
• context pages.

UNIT 3 - 2B.M3 Develop the portfolio using, demonstrating awareness of the audience:

• a range of suitable assets on the web pages
• Consistent navigation
• commentaries to explain the content.#

UNIT 3 - 1B.5 Test the digital portfolio for functionality, with guidance

UNIT 3 - 2B.P5 Test the portfolio for purpose and functionality on a different system and browser, and take appropriate action.

UNIT 3 - 2B.M4 Gather feedback from others and use it to improve the portfolio, demonstrating awareness of audience and purpose.

UNIT 13 - Learning aim C: Develop and test a website

UNIT 13 - 1C.4 Prepare assets and content for the website, with guidance.

UNIT 13 - 2C.P4 Prepare assets and content for the website, demonstrating awareness of purpose, listing sources of assets.

UNIT 13 - 2C.M3 Prepare assets and content for the website demonstrating awareness of the users’ requirements, with all sources fully referenced.

UNIT 13 - 2C.D3 Refine the website, to improve accessibility and performance, taking account of user feedback and test results.

UNIT 13 - 1C.5 Develop a website containing four interlinked web pages, with guidance.

UNIT 13 - 2C.P5 Develop a website containing at least eight interlinked web pages, demonstrating awareness of purpose.

UNIT 13 - 2C.M4 Develop a website including interactive components, demonstrating awareness of user requirements and taking account of usability.

UNIT 13 - 1C.6 Test the website for functionality and purpose repairing any faults and documenting changes, with guidance.

UNIT 13 - 2C.P6 Test the website for functionality and purpose, repairing any faults, and documenting changes.

UNIT 13 - 2C.M5 Test interactivity and gather feedback from others on the quality of the website, and use it to improve the website, showing awareness of user requirements.

Area, perimeter, volume: Calculating, applying calculations to real situations

HTML and CSS creation

How to create a navigation bar

This video covers the following 

HTML

• ul
• li
• a href

CSS

• background-color
• border-radius
• line-height
• text-align
• display

How to create a navigation bar with drop-down buttons

The following screenshot will help you create a stylish navigation bar for your website, this is taken and adapted from W3Schools. Please remember that when using this example that any work you have done in the previous tutorial may impact the navigation. 

The CSS required to make your navigation bar look and work correctly.

Peer Assessment of Independent Work - Learners work in groups to assess each other's work and make recommendations for improvement.

UNIT 3 - Learning aim B: Create and test a digital portfolio

UNIT 3 - 1B.3 Prepare portfolio content, with guidance.#

UNIT 3 - 2B.P3 Prepare portfolio content and save in appropriate file formats, using folders, demonstrating awareness of purpose.#

UNIT 3 - 2B.M2 Select and refine a range of portfolio content and save in appropriate file formats, using a logical folder structure and demonstrating awareness of the audience.#

UNIT 3 - 2B.D2 Refine the portfolio to improve navigation and include commentaries that justify the choice of content.#

UNIT 3 - 1B.4 Create a functional digital portfolio, with guidance.

UNIT 3 - 2B.P4 Create a functional digital portfolio, including:

• home page and section pages
• context pages.

UNIT 3 - 2B.M3 Develop the portfolio using, demonstrating awareness of the audience:

• a range of suitable assets on the web pages
• Consistent navigation
• commentaries to explain the content.#

UNIT 3 - 1B.5 Test the digital portfolio for functionality, with guidance

UNIT 3 - 2B.P5 Test the portfolio for purpose and functionality on a different system and browser, and take appropriate action.

UNIT 3 - 2B.M4 Gather feedback from others and use it to improve the portfolio, demonstrating awareness of audience and purpose.

UNIT 13 - Learning aim C: Develop and test a website

UNIT 13 - 1C.4 Prepare assets and content for the website, with guidance.

UNIT 13 - 2C.P4 Prepare assets and content for the website, demonstrating awareness of purpose, listing sources of assets.

UNIT 13 - 2C.M3 Prepare assets and content for the website demonstrating awareness of the users’ requirements, with all sources fully referenced.

UNIT 13 - 2C.D3 Refine the website, to improve accessibility and performance, taking account of user feedback and test results.

UNIT 13 - 1C.5 Develop a website containing four interlinked web pages, with guidance.

UNIT 13 - 2C.P5 Develop a website containing at least eight interlinked web pages, demonstrating awareness of purpose.

UNIT 13 - 2C.M4 Develop a website including interactive components, demonstrating awareness of user requirements and taking account of usability.

UNIT 13 - 1C.6 Test the website for functionality and purpose repairing any faults and documenting changes, with guidance.

UNIT 13 - 2C.P6 Test the website for functionality and purpose, repairing any faults, and documenting changes.

UNIT 13 - 2C.M5 Test interactivity and gather feedback from others on the quality of the website, and use it to improve the website, showing awareness of user requirements.

UNIT 3 - Learning aim B: Create and test a digital portfolio

UNIT 3 - 1B.3 Prepare portfolio content, with guidance.#

UNIT 3 - 2B.P3 Prepare portfolio content and save in appropriate file formats, using folders, demonstrating awareness of purpose.#

UNIT 3 - 2B.M2 Select and refine a range of portfolio content and save in appropriate file formats, using a logical folder structure and demonstrating awareness of the audience.#

UNIT 3 - 2B.D2 Refine the portfolio to improve navigation and include commentaries that justify the choice of content.#

UNIT 3 - 1B.4 Create a functional digital portfolio, with guidance.

UNIT 3 - 2B.P4 Create a functional digital portfolio, including:

• home page and section pages
• context pages.

UNIT 3 - 2B.M3 Develop the portfolio using, demonstrating awareness of the audience:

• a range of suitable assets on the web pages
• Consistent navigation
• commentaries to explain the content.#

UNIT 3 - 1B.5 Test the digital portfolio for functionality, with guidance

UNIT 3 - 2B.P5 Test the portfolio for purpose and functionality on a different system and browser, and take appropriate action.

UNIT 3 - 2B.M4 Gather feedback from others and use it to improve the portfolio, demonstrating awareness of audience and purpose.

UNIT 13 - Learning aim C: Develop and test a website

UNIT 13 - 1C.4 Prepare assets and content for the website, with guidance.

UNIT 13 - 2C.P4 Prepare assets and content for the website, demonstrating awareness of purpose, listing sources of assets.

UNIT 13 - 2C.M3 Prepare assets and content for the website demonstrating awareness of the users’ requirements, with all sources fully referenced.

UNIT 13 - 2C.D3 Refine the website, to improve accessibility and performance, taking account of user feedback and test results.

UNIT 13 - 1C.5 Develop a website containing four interlinked web pages, with guidance.

UNIT 13 - 2C.P5 Develop a website containing at least eight interlinked web pages, demonstrating awareness of purpose.

UNIT 13 - 2C.M4 Develop a website including interactive components, demonstrating awareness of user requirements and taking account of usability.

UNIT 13 - 1C.6 Test the website for functionality and purpose repairing any faults and documenting changes, with guidance.

UNIT 13 - 2C.P6 Test the website for functionality and purpose, repairing any faults, and documenting changes.

UNIT 13 - 2C.M5 Test interactivity and gather feedback from others on the quality of the website, and use it to improve the website, showing awareness of user requirements.

Ratios: Calculating ratios, applying ratios, Scales e.g. Maps

Analysis of information: Interpreting Results, Drawing conclusions from data, Comparing data

Area, perimeter, volume: Calculating, applying calculations to real situations

Tables

How to create a simple table, in this area we will be looking at the following tags;

HTML

• table
• th
• td
• tr

Create a table of your own, add all of your qualifications that you have gained to date.

Now that you have a table showing all of your fantastic grades add some style to it. Using W3Schools find out how to make your tables look nice.

Forms

Now we shall create a simple form. Forms are used to gather data and input from a user to be sent to the website owners. The following tags will be used in this tutorial;

HTML

• form
• input
  • radio
  • text
• submit

Now that you have created your forms and tables, go over your code and add comments to it

fonts

The use of fonts in a website can make it look professional or comical. In the following video, you will be shown how to add a font and change some of its properties

Using a web browser navigate to google fonts and review the available fonts. Consider the fonts that you would like to use in your portfolio, think about the image you want your website to have! Professional, Fun, non-serious?

Alignment

Colour

Line spacing

Bullets

Bullets are important part and features of most websites as they can be used in a number of ways, in the following video you will be shown the basic and most simple use of them.

Anonymous Assessment - Learners assess an anonymous piece of work containing deliberate mistakes against given success criteria.

UNIT 3 - Learning aim B: Create and test a digital portfolio

UNIT 3 - 1B.3 Prepare portfolio content, with guidance.#

UNIT 3 - 2B.P3 Prepare portfolio content and save in appropriate file formats, using folders, demonstrating awareness of purpose.#

UNIT 3 - 2B.M2 Select and refine a range of portfolio content and save in appropriate file formats, using a logical folder structure and demonstrating awareness of the audience.#

UNIT 3 - 2B.D2 Refine the portfolio to improve navigation and include commentaries that justify the choice of content.#

UNIT 3 - 1B.4 Create a functional digital portfolio, with guidance.

UNIT 3 - 2B.P4 Create a functional digital portfolio, including:

• home page and section pages
• context pages.

UNIT 3 - 2B.M3 Develop the portfolio using, demonstrating awareness of the audience:

• a range of suitable assets on the web pages
• Consistent navigation
• commentaries to explain the content.#

UNIT 3 - 1B.5 Test the digital portfolio for functionality, with guidance

UNIT 3 - 2B.P5 Test the portfolio for purpose and functionality on a different system and browser, and take appropriate action.

UNIT 3 - 2B.M4 Gather feedback from others and use it to improve the portfolio, demonstrating awareness of audience and purpose.

UNIT 13 - Learning aim C: Develop and test a website

UNIT 13 - 1C.4 Prepare assets and content for the website, with guidance.

UNIT 13 - 2C.P4 Prepare assets and content for the website, demonstrating awareness of purpose, listing sources of assets.

UNIT 13 - 2C.M3 Prepare assets and content for the website demonstrating awareness of the users’ requirements, with all sources fully referenced.

UNIT 13 - 2C.D3 Refine the website, to improve accessibility and performance, taking account of user feedback and test results.

UNIT 13 - 1C.5 Develop a website containing four interlinked web pages, with guidance.

UNIT 13 - 2C.P5 Develop a website containing at least eight interlinked web pages, demonstrating awareness of purpose.

UNIT 13 - 2C.M4 Develop a website including interactive components, demonstrating awareness of user requirements and taking account of usability.

UNIT 13 - 1C.6 Test the website for functionality and purpose repairing any faults and documenting changes, with guidance.

UNIT 13 - 2C.P6 Test the website for functionality and purpose, repairing any faults, and documenting changes.

UNIT 13 - 2C.M5 Test interactivity and gather feedback from others on the quality of the website, and use it to improve the website, showing awareness of user requirements.

UNIT 3 - Learning aim B: Create and test a digital portfolio

UNIT 3 - 1B.3 Prepare portfolio content, with guidance.#

UNIT 3 - 2B.P3 Prepare portfolio content and save in appropriate file formats, using folders, demonstrating awareness of purpose.#

UNIT 3 - 2B.M2 Select and refine a range of portfolio content and save in appropriate file formats, using a logical folder structure and demonstrating awareness of the audience.#

UNIT 3 - 2B.D2 Refine the portfolio to improve navigation and include commentaries that justify the choice of content.#

UNIT 3 - 1B.4 Create a functional digital portfolio, with guidance.

UNIT 3 - 2B.P4 Create a functional digital portfolio, including:

• home page and section pages
• context pages.

UNIT 3 - 2B.M3 Develop the portfolio using, demonstrating awareness of the audience:

• a range of suitable assets on the web pages
• Consistent navigation
• commentaries to explain the content.#

UNIT 3 - 1B.5 Test the digital portfolio for functionality, with guidance

UNIT 3 - 2B.P5 Test the portfolio for purpose and functionality on a different system and browser, and take appropriate action.

UNIT 3 - 2B.M4 Gather feedback from others and use it to improve the portfolio, demonstrating awareness of audience and purpose.

UNIT 13 - Learning aim C: Develop and test a website

UNIT 13 - 1C.4 Prepare assets and content for the website, with guidance.

UNIT 13 - 2C.P4 Prepare assets and content for the website, demonstrating awareness of purpose, listing sources of assets.

UNIT 13 - 2C.M3 Prepare assets and content for the website demonstrating awareness of the users’ requirements, with all sources fully referenced.

UNIT 13 - 2C.D3 Refine the website, to improve accessibility and performance, taking account of user feedback and test results.

UNIT 13 - 1C.5 Develop a website containing four interlinked web pages, with guidance.

UNIT 13 - 2C.P5 Develop a website containing at least eight interlinked web pages, demonstrating awareness of purpose.

UNIT 13 - 2C.M4 Develop a website including interactive components, demonstrating awareness of user requirements and taking account of usability.

UNIT 13 - 1C.6 Test the website for functionality and purpose repairing any faults and documenting changes, with guidance.

UNIT 13 - 2C.P6 Test the website for functionality and purpose, repairing any faults, and documenting changes.

UNIT 13 - 2C.M5 Test interactivity and gather feedback from others on the quality of the website, and use it to improve the website, showing awareness of user requirements.

content for web pages

text – introductions, commentaries

It is important to ensure that a user to your website understands what they are looking at, and what the pages is about. In this section of your portfolio, it is recommended that you use the unit information descriptors to give some information to the units and what they require/d you to do and learn.

Be clear on your homepage to what your website is about, welcome the users. Where you have files and images explain what they are.

images

Images on a website are as linked as salt and vinegar. Images can help a website become more interesting and engaging. 

The image tag looks like 

This example of the tag has a number of properties that we can target and change.

• alt="Smiley face" -- this property allows the addition of ALternative Text to the tag, this is useful to blind people as this will be read to them when a screen reader looks through the site and finds an email.
• width="42" -- this property defines the width of the image.
• height="42"  -- this property defines the height of the image.

sound or video

The addition of a sound or video clip to a website is quite a simple process. It is suggested that you upload a video to youtube, this is to minimise your bandwidth useage. the process of adding a video to your site can, ironically, can be seen through the below youtube clip. 

Follow the process that the video has demonstrated and add a video to your website.

lines and simple shapes

simple client-side scripts (e.g. embed JavaScript code to display a name in a pop-up box)

The example above will allow you to get a user to enter their name into a text box and the value of the text box after they have entered their name into it will be displayed into the webpage. 

Java scripts are very powerful and can add interactivity to a website.

Find other java scripts that you could use on your portfolio websites. REMEMBER when you try them out, try them in a copy of your template page so that you don't destroy your pages and have to start over again.

accessibility features (e.g. alternative tags, zoom features, text-to-speech)

Making sure that your page is accessible to all is important, for example, a blind person can still use a website and go on the internet as there is specialist software that read the screen to the user. These readers are able to tell the user what is in an image, the important part here is that when you add an image to your page you need to add the ALT text, this is alternative text and this is what the reader will read to the user.

export and compress any digital assets into suitable file types (e.g. resolution and size appropriate for web pages)

What is the average time that a user will wait for a webpage to load?

Find 5 examples of websites where the page load time is too long.

suitable file names for web pages.

Naming conventions are very important when creating any webpage or site. The name should reflect the page's content, and, purpose, for example, a page that is providing details on how to contact the company should be called contact-us.html please note that the filename has no spaces or capital letters. Why is it important to not use capital letters or spaces? This is due to a number of reasons, mainly the technology that web pages are stored on when made public. IT IS THEREFORE IMPORTANT THAT YOU MAKE SURE THAT YOU HAVE NO CAPITAL LETTERS OR SPACES.

Anonymous Assessment - Learners assess an anonymous piece of work containing deliberate mistakes against given success criteria.

UNIT 3 - Learning aim B: Create and test a digital portfolio

UNIT 3 - 1B.3 Prepare portfolio content, with guidance.#

UNIT 3 - 2B.P3 Prepare portfolio content and save in appropriate file formats, using folders, demonstrating awareness of purpose.#

UNIT 3 - 2B.M2 Select and refine a range of portfolio content and save in appropriate file formats, using a logical folder structure and demonstrating awareness of the audience.#

UNIT 3 - 2B.D2 Refine the portfolio to improve navigation and include commentaries that justify the choice of content.#

UNIT 3 - 1B.4 Create a functional digital portfolio, with guidance.

UNIT 3 - 2B.P4 Create a functional digital portfolio, including:

• home page and section pages
• context pages.

UNIT 3 - 2B.M3 Develop the portfolio using, demonstrating awareness of the audience:

• a range of suitable assets on the web pages
• Consistent navigation
• commentaries to explain the content.#

UNIT 3 - 1B.5 Test the digital portfolio for functionality, with guidance

UNIT 3 - 2B.P5 Test the portfolio for purpose and functionality on a different system and browser, and take appropriate action.

UNIT 3 - 2B.M4 Gather feedback from others and use it to improve the portfolio, demonstrating awareness of audience and purpose.

UNIT 13 - Learning aim C: Develop and test a website

UNIT 13 - 1C.4 Prepare assets and content for the website, with guidance.

UNIT 13 - 2C.P4 Prepare assets and content for the website, demonstrating awareness of purpose, listing sources of assets.

UNIT 13 - 2C.M3 Prepare assets and content for the website demonstrating awareness of the users’ requirements, with all sources fully referenced.

UNIT 13 - 2C.D3 Refine the website, to improve accessibility and performance, taking account of user feedback and test results.

UNIT 13 - 1C.5 Develop a website containing four interlinked web pages, with guidance.

UNIT 13 - 2C.P5 Develop a website containing at least eight interlinked web pages, demonstrating awareness of purpose.

UNIT 13 - 2C.M4 Develop a website including interactive components, demonstrating awareness of user requirements and taking account of usability.

UNIT 13 - 1C.6 Test the website for functionality and purpose repairing any faults and documenting changes, with guidance.

UNIT 13 - 2C.P6 Test the website for functionality and purpose, repairing any faults, and documenting changes.

UNIT 13 - 2C.M5 Test interactivity and gather feedback from others on the quality of the website, and use it to improve the website, showing awareness of user requirements.

UNIT 3 - Learning aim B: Create and test a digital portfolio

UNIT 3 - 1B.3 Prepare portfolio content, with guidance.#

UNIT 3 - 2B.P3 Prepare portfolio content and save in appropriate file formats, using folders, demonstrating awareness of purpose.#

UNIT 3 - 2B.M2 Select and refine a range of portfolio content and save in appropriate file formats, using a logical folder structure and demonstrating awareness of the audience.#

UNIT 3 - 2B.D2 Refine the portfolio to improve navigation and include commentaries that justify the choice of content.#

UNIT 3 - 1B.4 Create a functional digital portfolio, with guidance.

UNIT 3 - 2B.P4 Create a functional digital portfolio, including:

• home page and section pages
• context pages.

UNIT 3 - 2B.M3 Develop the portfolio using, demonstrating awareness of the audience:

• a range of suitable assets on the web pages
• Consistent navigation
• commentaries to explain the content.#

UNIT 3 - 1B.5 Test the digital portfolio for functionality, with guidance

UNIT 3 - 2B.P5 Test the portfolio for purpose and functionality on a different system and browser, and take appropriate action.

UNIT 3 - 2B.M4 Gather feedback from others and use it to improve the portfolio, demonstrating awareness of audience and purpose.

UNIT 13 - Learning aim C: Develop and test a website

UNIT 13 - 1C.4 Prepare assets and content for the website, with guidance.

UNIT 13 - 2C.P4 Prepare assets and content for the website, demonstrating awareness of purpose, listing sources of assets.

UNIT 13 - 2C.M3 Prepare assets and content for the website demonstrating awareness of the users’ requirements, with all sources fully referenced.

UNIT 13 - 2C.D3 Refine the website, to improve accessibility and performance, taking account of user feedback and test results.

UNIT 13 - 1C.5 Develop a website containing four interlinked web pages, with guidance.

UNIT 13 - 2C.P5 Develop a website containing at least eight interlinked web pages, demonstrating awareness of purpose.

UNIT 13 - 2C.M4 Develop a website including interactive components, demonstrating awareness of user requirements and taking account of usability.

UNIT 13 - 1C.6 Test the website for functionality and purpose repairing any faults and documenting changes, with guidance.

UNIT 13 - 2C.P6 Test the website for functionality and purpose, repairing any faults, and documenting changes.

UNIT 13 - 2C.M5 Test interactivity and gather feedback from others on the quality of the website, and use it to improve the website, showing awareness of user requirements.

Analysis of information: Interpreting Results, Drawing conclusions from data, Comparing data

Area, perimeter, volume: Calculating, applying calculations to real situations

images/objects

position

crop and size

alignment

orientation

text wrapping

resolution.

Anonymous Assessment - Learners assess an anonymous piece of work containing deliberate mistakes against given success criteria.

UNIT 3 - Learning aim B: Create and test a digital portfolio

UNIT 3 - 1B.3 Prepare portfolio content, with guidance.#

UNIT 3 - 2B.P3 Prepare portfolio content and save in appropriate file formats, using folders, demonstrating awareness of purpose.#

UNIT 3 - 2B.M2 Select and refine a range of portfolio content and save in appropriate file formats, using a logical folder structure and demonstrating awareness of the audience.#

UNIT 3 - 2B.D2 Refine the portfolio to improve navigation and include commentaries that justify the choice of content.#

UNIT 3 - 1B.4 Create a functional digital portfolio, with guidance.

UNIT 3 - 2B.P4 Create a functional digital portfolio, including:

• home page and section pages
• context pages.

UNIT 3 - 2B.M3 Develop the portfolio using, demonstrating awareness of the audience:

• a range of suitable assets on the web pages
• Consistent navigation
• commentaries to explain the content.#

UNIT 3 - 1B.5 Test the digital portfolio for functionality, with guidance

UNIT 3 - 2B.P5 Test the portfolio for purpose and functionality on a different system and browser, and take appropriate action.

UNIT 3 - 2B.M4 Gather feedback from others and use it to improve the portfolio, demonstrating awareness of audience and purpose.

UNIT 13 - Learning aim C: Develop and test a website

UNIT 13 - 1C.4 Prepare assets and content for the website, with guidance.

UNIT 13 - 2C.P4 Prepare assets and content for the website, demonstrating awareness of purpose, listing sources of assets.

UNIT 13 - 2C.M3 Prepare assets and content for the website demonstrating awareness of the users’ requirements, with all sources fully referenced.

UNIT 13 - 2C.D3 Refine the website, to improve accessibility and performance, taking account of user feedback and test results.

UNIT 13 - 1C.5 Develop a website containing four interlinked web pages, with guidance.

UNIT 13 - 2C.P5 Develop a website containing at least eight interlinked web pages, demonstrating awareness of purpose.

UNIT 13 - 2C.M4 Develop a website including interactive components, demonstrating awareness of user requirements and taking account of usability.

UNIT 13 - 1C.6 Test the website for functionality and purpose repairing any faults and documenting changes, with guidance.

UNIT 13 - 2C.P6 Test the website for functionality and purpose, repairing any faults, and documenting changes.

UNIT 13 - 2C.M5 Test interactivity and gather feedback from others on the quality of the website, and use it to improve the website, showing awareness of user requirements.

UNIT 3 - Learning aim B: Create and test a digital portfolio

UNIT 3 - 1B.3 Prepare portfolio content, with guidance.#

UNIT 3 - 2B.P3 Prepare portfolio content and save in appropriate file formats, using folders, demonstrating awareness of purpose.#

UNIT 3 - 2B.M2 Select and refine a range of portfolio content and save in appropriate file formats, using a logical folder structure and demonstrating awareness of the audience.#

UNIT 3 - 2B.D2 Refine the portfolio to improve navigation and include commentaries that justify the choice of content.#

UNIT 3 - 1B.4 Create a functional digital portfolio, with guidance.

UNIT 3 - 2B.P4 Create a functional digital portfolio, including:

• home page and section pages
• context pages.

UNIT 3 - 2B.M3 Develop the portfolio using, demonstrating awareness of the audience:

• a range of suitable assets on the web pages
• Consistent navigation
• commentaries to explain the content.#

UNIT 3 - 1B.5 Test the digital portfolio for functionality, with guidance

UNIT 3 - 2B.P5 Test the portfolio for purpose and functionality on a different system and browser, and take appropriate action.

UNIT 3 - 2B.M4 Gather feedback from others and use it to improve the portfolio, demonstrating awareness of audience and purpose.

UNIT 13 - Learning aim C: Develop and test a website

UNIT 13 - 1C.4 Prepare assets and content for the website, with guidance.

UNIT 13 - 2C.P4 Prepare assets and content for the website, demonstrating awareness of purpose, listing sources of assets.

UNIT 13 - 2C.M3 Prepare assets and content for the website demonstrating awareness of the users’ requirements, with all sources fully referenced.

UNIT 13 - 2C.D3 Refine the website, to improve accessibility and performance, taking account of user feedback and test results.

UNIT 13 - 1C.5 Develop a website containing four interlinked web pages, with guidance.

UNIT 13 - 2C.P5 Develop a website containing at least eight interlinked web pages, demonstrating awareness of purpose.

UNIT 13 - 2C.M4 Develop a website including interactive components, demonstrating awareness of user requirements and taking account of usability.

UNIT 13 - 1C.6 Test the website for functionality and purpose repairing any faults and documenting changes, with guidance.

UNIT 13 - 2C.P6 Test the website for functionality and purpose, repairing any faults, and documenting changes.

UNIT 13 - 2C.M5 Test interactivity and gather feedback from others on the quality of the website, and use it to improve the website, showing awareness of user requirements.

Analysis of information: Interpreting Results, Drawing conclusions from data, Comparing data

Area, perimeter, volume: Calculating, applying calculations to real situations

Workshop Setting - Referring to your unit 3/13, assignment 3

Test the portfolio

Now that you have created your web portfolio you now need to check that all works how you intended it to. It is well worth remembering that you have possibly done a number of tests on your site even without realising that you have tested. As you have gone along you have implemented and created elements on your site and then looked/run them in a browser to see how they look or if they have worked.

You will probably not have recorded this on any paperwork, now is the time to do these tests.Using your developed test plan from your assignment 2 run through the tests that you have given yourself, such as testing that all images load correctly. It is better to have things that do not work so that you have something to talk about, and, to demonstrate that you have changed/amended/updated.

Check all the pages and content are within the portfolio folder structure

You need to ensure that all your files are contained within the correct folder for your webpage to be moved on to another computer and work correctly. Remember files linked to your home drive will not appear on other person's home drive so ensure that they are all in the folder with the webpage files.

activate links to internal content (external links are prohibited)

test the digital portfolio for functionality and document actions taken, including:

• that all links work and open correct content
• that all web pages are error-free
• the effectiveness of the home page and other pages

Test the digital portfolio for usability and document any actions that have been taken

, including:

• user interface
  • Now that you have created your portfolio it is time to take a moment and reflect on your site. Look at your user interface (the appearance of your site) is it clear what the website is? is it clear and easy to use?
• ease of navigation
  • Your navigation should be clear, simple and obvious to your target audience. Now is time to look at it and ask, "does it have logic?", "Is it the same across all of my webpages?", "is it obvious that it is the navigation?"
• impact of content, bearing in mind the purpose
  • The content on your portfolio is possibly the most important element as this is what is likely to get you the job at Konnected. So have you put your best examples of work up, have you been clear on what the units your studied were about?
• clear and consistent content and style
  • You should look at your site, think, does each page look like the same? would a person think that they have navigated off of your site?

check functionality on another computer system and browser.

You will need to run your tests over the different web browsers that you have on your computer, simply use the same test table that you have created and run through these tests again but on the other browsers. Take some screenshots of you doing these tests on the different browsers and add these to your submissions.

UNIT 13

Test the website for functionality, quality and usability

Gather feedback from others (e.g. on content, presentation, navigation, usability, accessibility, performance and purpose).

Now that you have created your site you will need to get some evaluations from your peers in class. REMEMBER DO NOT BE TOO CRITICAL AS THEY MAY DO IT TO YOU! HOW WOULD YOU FEEL?

Your reviews need to be recorded, you can do this quickly by opening up your site on one side of the screen and on the other a text document, then ask your peers to write a review whilst using your site, move around the room adding your thoughts to others until you have sufficient detail.

Improve and/or refine the website to improve accessibility

, e.g.:

• alternative text tags
  • Alternative text tags are important to web page images as they enable users that might be blind to have software called screen readers read the information from the alternative tag to the user. An example of how an alternative tag looks is below; 
• zoom features
  • You can inform your users that they are able to zoom in to content by creating a pop up in Javascript that tells them that if they hold down shift and then scroll up the webpage zooms in and out.
• text to speech features
  •  

Improve and/or refine the website to enhance performance

, e.g.:

• export and compress digital assets
  • The images that you have created will probably be large in their file size. This is not a good thing on a webpage as it can make the page take longer to load. Measures that you can use are to do the following,
    • Open Photoshop (if you have access to it)
    • load your image
    • choose file and select save for web as shown in the image
    • 
    • select from the popup box 4-up, in here you will see a range of file types that you can change to get smaller file sizes without loosing quality.
• add dynamic functionality.
  •  

Assignment Support:
For 2C.P4: learners should prepare assets (by gathering assets and creating them, if required), and list the sources for ready-made assets. At least four assets should be included, such as graphic images, audio clips and animations, as outlined in their designs. They should demonstrate an awareness of the purpose of the website. For level 1, as a minimum, learners should prepare their assets with guidance. Learners should include at least two assets in their websites.
For 2C.M3: learners should prepare their assets and content for the website which has considered the user requirements of the website. All ready-made assets should be fully referenced in a sources table, with enough detail for another person to individually obtain the assets used.
For 2C.P5: learners should use appropriate website authoring software develop their website using appropriate tools/techniques. They should demonstrate an awareness of the purpose and the website should be based on their designs. Learners should have developed a website that includes at least eight interlinked web pages with:
● at least four different assets
● internal and external hyperlinks
● text
● at least one table
● forms
● menus
● colour schemes and styles.

For level 1, as a minimum, learners should have developed a website, with guidance, which includes at least four interlinked web pages, with text, a table, hyperlinks and two assets.
For 2C.M4: learners should improve their website, taking account of usability and user requirements. Learners should include interactive components that make use of simple client-side scripting, e.g. JavaScript code that displays the date and time. An example of improving usability would be consistent colour schemes and styles in all web pages (using a method like cascading style sheets).
For 2C.P6: learners will be expected to follow their test plans (as defined in their design) and test the functionality of their website, and check that it is fit for purpose. Learners are likely to experience technical difficulties as they develop their website. Learners will be expected to make the necessary repairs to their website. It is important that learners make appropriate comments on their designs and test plans about any issues they discover, and how they have resolved them. For level 1, as a minimum, learners should have tested the website for functionality and fitness for purpose. For this activity, they will have needed guidance.
For 2C.M5: learners should test the functionality of the interactivity features of the website. They should also test that the website meets the user requirements. Learners should complete user-experience testing, with the help of a test user. Learners should record this feedback as part of the testing process. While considering the feedback, they should keep the user requirements of the website in mind. Learners should use their feedback and test results to improve the website.
For 2C.D3: teachers should recognise that the process of developing and testing a website is an iterative process. When making refinements to their websites, learners should take into account their test results and feedback from the ‘client’. Learners should refine their website using tools and techniques to cater for accessibility requirements and performance enhancements. For instance, learners could use:
● alternative text tags, text-to-speech to improve accessibility for users with hearing or visual impairments
● optimising assets to improve how quickly the website presents to the audience; if not appropriately compressed, video, animation and graphics can slow a website.

Anonymous Assessment - Learners assess an anonymous piece of work containing deliberate mistakes against given success criteria.

UNIT 3 - Learning aim B: Create and test a digital portfolio

UNIT 3 - 1B.3 Prepare portfolio content, with guidance.#

UNIT 3 - 2B.P3 Prepare portfolio content and save in appropriate file formats, using folders, demonstrating awareness of purpose.#

UNIT 3 - 2B.M2 Select and refine a range of portfolio content and save in appropriate file formats, using a logical folder structure and demonstrating awareness of the audience.#

UNIT 3 - 2B.D2 Refine the portfolio to improve navigation and include commentaries that justify the choice of content.#

UNIT 3 - 1B.4 Create a functional digital portfolio, with guidance.

UNIT 3 - 2B.P4 Create a functional digital portfolio, including:

• home page and section pages
• context pages.

UNIT 3 - 2B.M3 Develop the portfolio using, demonstrating awareness of the audience:

• a range of suitable assets on the web pages
• Consistent navigation
• commentaries to explain the content.#

UNIT 3 - 1B.5 Test the digital portfolio for functionality, with guidance

UNIT 3 - 2B.P5 Test the portfolio for purpose and functionality on a different system and browser, and take appropriate action.

UNIT 3 - 2B.M4 Gather feedback from others and use it to improve the portfolio, demonstrating awareness of audience and purpose.

UNIT 13 - Learning aim C: Develop and test a website

UNIT 13 - 1C.4 Prepare assets and content for the website, with guidance.

UNIT 13 - 2C.P4 Prepare assets and content for the website, demonstrating awareness of purpose, listing sources of assets.

UNIT 13 - 2C.M3 Prepare assets and content for the website demonstrating awareness of the users’ requirements, with all sources fully referenced.

UNIT 13 - 2C.D3 Refine the website, to improve accessibility and performance, taking account of user feedback and test results.

UNIT 13 - 1C.5 Develop a website containing four interlinked web pages, with guidance.

UNIT 13 - 2C.P5 Develop a website containing at least eight interlinked web pages, demonstrating awareness of purpose.

UNIT 13 - 2C.M4 Develop a website including interactive components, demonstrating awareness of user requirements and taking account of usability.

UNIT 13 - 1C.6 Test the website for functionality and purpose repairing any faults and documenting changes, with guidance.

UNIT 13 - 2C.P6 Test the website for functionality and purpose, repairing any faults, and documenting changes.

UNIT 13 - 2C.M5 Test interactivity and gather feedback from others on the quality of the website, and use it to improve the website, showing awareness of user requirements.

UNIT 3 - Learning aim B: Create and test a digital portfolio

UNIT 3 - 1B.3 Prepare portfolio content, with guidance.#

UNIT 3 - 2B.P3 Prepare portfolio content and save in appropriate file formats, using folders, demonstrating awareness of purpose.#

UNIT 3 - 2B.M2 Select and refine a range of portfolio content and save in appropriate file formats, using a logical folder structure and demonstrating awareness of the audience.#

UNIT 3 - 2B.D2 Refine the portfolio to improve navigation and include commentaries that justify the choice of content.#

UNIT 3 - 1B.4 Create a functional digital portfolio, with guidance.

UNIT 3 - 2B.P4 Create a functional digital portfolio, including:

• home page and section pages
• context pages.

UNIT 3 - 2B.M3 Develop the portfolio using, demonstrating awareness of the audience:

• a range of suitable assets on the web pages
• Consistent navigation
• commentaries to explain the content.#

UNIT 3 - 1B.5 Test the digital portfolio for functionality, with guidance

UNIT 3 - 2B.P5 Test the portfolio for purpose and functionality on a different system and browser, and take appropriate action.

UNIT 3 - 2B.M4 Gather feedback from others and use it to improve the portfolio, demonstrating awareness of audience and purpose.

UNIT 13 - Learning aim C: Develop and test a website

UNIT 13 - 1C.4 Prepare assets and content for the website, with guidance.

UNIT 13 - 2C.P4 Prepare assets and content for the website, demonstrating awareness of purpose, listing sources of assets.

UNIT 13 - 2C.M3 Prepare assets and content for the website demonstrating awareness of the users’ requirements, with all sources fully referenced.

UNIT 13 - 2C.D3 Refine the website, to improve accessibility and performance, taking account of user feedback and test results.

UNIT 13 - 1C.5 Develop a website containing four interlinked web pages, with guidance.

UNIT 13 - 2C.P5 Develop a website containing at least eight interlinked web pages, demonstrating awareness of purpose.

UNIT 13 - 2C.M4 Develop a website including interactive components, demonstrating awareness of user requirements and taking account of usability.

UNIT 13 - 1C.6 Test the website for functionality and purpose repairing any faults and documenting changes, with guidance.

UNIT 13 - 2C.P6 Test the website for functionality and purpose, repairing any faults, and documenting changes.

UNIT 13 - 2C.M5 Test interactivity and gather feedback from others on the quality of the website, and use it to improve the website, showing awareness of user requirements.

Collect and record data: Questionnaires, Observation, Tally

Statistic extracting information: Tables, Diagrams, Charts and Graphs

Review the content of a digital portfolio, including:

● considering the extent to which the portfolio meets the needs of the audience and the purpose

● evaluating the design documentation and any changes made during the development of the portfolio

● incorporating comments from end reviewers

● making valid suggestions for further improvements.

Unit 13

● fitness for purpose and user requirements

● functionality

● information/content including digital assets

● user experience (e.g. usability, quality, performance)

● constraints

● strengths and potential improvements.

Anonymous Assessment - Learners assess an anonymous piece of work containing deliberate mistakes against given success criteria.

UNIT 3 - LO C: Review the digital portfolio

UNIT 3 - 1C.6 Identify how the final portfolio is suitable for the intended purpose. 
UNIT 3 - 2C.P6 Explain how the final portfolio is suitable for the intended audience and purpose.
UNIT 3 - 2C.M5 Review the extent to which the final portfolio meets the needs of audience and purpose, considering feedback from others. 
UNIT 3 - 2C.D3 Evaluate the final digital portfolio against the initial designs and justify any changes made, making recommendations for further improvement. 

UNIT 13 - Learning aim D: Review the finished website

UNIT 13 - 1D.7 Identify how the final website is suitable for the intended purpose
UNIT 13 - 2D.P7 Explain how the final website is suitable for the intended audience and purpose.
UNIT 13 - 2D.M6 Review the extent to which the finished website meets the needs of purpose and user requirements, while considering feedback from others and constraints.
UNIT 13 - 2D.D4 Evaluate the final website against the design and justify any changes made, making recommendations for further improvements.

UNIT 3 - LO C: Review the digital portfolio

UNIT 3 - 1C.6 Identify how the final portfolio is suitable for the intended purpose. 
UNIT 3 - 2C.P6 Explain how the final portfolio is suitable for the intended audience and purpose.
UNIT 3 - 2C.M5 Review the extent to which the final portfolio meets the needs of audience and purpose, considering feedback from others. 
UNIT 3 - 2C.D3 Evaluate the final digital portfolio against the initial designs and justify any changes made, making recommendations for further improvement. 

UNIT 13 - Learning aim D: Review the finished website

UNIT 13 - 1D.7 Identify how the final website is suitable for the intended purpose
UNIT 13 - 2D.P7 Explain how the final website is suitable for the intended audience and purpose.
UNIT 13 - 2D.M6 Review the extent to which the finished website meets the needs of purpose and user requirements, while considering feedback from others and constraints.
UNIT 13 - 2D.D4 Evaluate the final website against the design and justify any changes made, making recommendations for further improvements.

Collect and record data: Questionnaires, Observation, Tally

Statistic extracting information: Tables, Diagrams, Charts and Graphs