btecitresources.files.wordpress.com · Web viewBTEC Level 1/Level 2 First Extended Certificate in Information and Creative Technology (F1FDTA) Unit 3 – A Digital Portfolio Task

BTEC Level 1/Level 2 First Extended Certificate in Information and Creative Technology (F1FDTA)Unit 3 – A Digital PortfolioTask 2 – Create and Test a Digital Portfolio

Name: Richard Collins

Folder Structure (P3 / M2)

P3 - Prepare portfolio content and save in appropriate file formats, using folders, demonstrating awareness of purpose.

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.

Below is a screen shot to show how I have organised my files in folders for my portfolio using Windows Explorer:

Website Folder:

Image Folder:

1 | P a g e


Pages Folder:

Spry Assets:

Templates Folder:

2 | P a g e


Save Structure (Save Location)

3 | P a g e

This is the Save location and folder structure of my Digital Portfolio. These are the folders which are used in the Digital Portfolio, where the pages grab the information and assets from.


Below is a screen shot to show how I have organised the files for my website in Adobe Dreamweaver:

4 | P a g e


The Digital Portfolio (P4 / M3)

P4 - Create a functional digital portfolio, including: home page and section pages context pages.

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.

Screens shots and description of my portfolio website:

Screen Shot Full DescriptionHome Page This is my home page. In the file structure I have

named it Index.html because when a website is uploaded online, it reads index as the primary loading page, where the user first loads into.

There is only a small amount of content in this page, as I did not wish to over-burden the user who is looking at my portfolio. This page includes a small brief into who I am and what I do, which has details such as my name, current job status and current career goals.

About Me My about me page contains all the details, in more depth to the home page, about me. The details include personal interests; such as hobbies and/or activities, as well as professional activities such as my Curriculum Vitae (CV), which will contain all my educational background history, qualifications and relevant experience.

5 | P a g e


Unit 4 – Creating Digital Animation In the intro page to Unit 4 – Creating Digital Animation, I have included the overview of the unit, which gives a basic idea on what a person will study during this unit, what skills they will learn and what the unit is generally about.

In the actual content page, I have included my 12 storyboard images, which were hand drawn by me for Unit 4, Task 2. Alongside these 12 images is the actual finished animation project. I have chosen to used my Distinction refined version, as I feel the refinements have improved the overall quality of the animation. At the bottom of this animation is a summary of the unit and what tasks I carried out as instructed too, by the unit task briefs. I have included details of all 4 tasks that we carried out for unit 4.

Unit 6 – Creating Digital Graphics In the intro page to Unit 6 – Creating Digital Graphics, I have included the overview of the unit, which gives a basic idea on what a person

6 | P a g e


will study during this unit, what skills they will learn and what the unit is generally about.

In the actual content page, I have included my 2 Vector graphic images, which are user guides, in small boxes on the side and my finalised Bitmap Advert in the main box in the centre. At the top corner, I have added a detailed description about all 4 of the tasks I carried out for Unit 6.

Unit 11 – Computer Networks In the intro page to Unit 11 – Computer Networks I have included the overview of the unit, which gives a basic idea on what a person will study during this unit, what skills they will learn and what the unit is generally about.

In the actual content page, I have included 2 Visio images, created to design a network layout for a music shop business. These are my first design and alternate design. These are placed in the centre of the screen with a text box next to each one, explaining the in-depth details about the unit, the overall outcome and all of the tasks I carried out for unit 11.

7 | P a g e


Test Plan – (P5)

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

Screen shot to show testing using Internet Explorer:

8 | P a g e


Browser: Internet Explorer

Test Number Test Expected Result Actual Result Any Action Required?

Action to Take Date to Complete

1 Accessing the website via IE

Loading up normally, showing all content in its designated location

Everything loaded as normal, with content in the location expected but has some minor lag with loading content

No None needed N/A

2 Navigation Bar functionality

The function bar should work, navigating to each of the pages as designated

The bar works but can glitch itself stuck onto a page

Yes Look into the code of the Navigation bar, test with chrome to see if it is an IE Issue

21/03/16

3 Colour and Text formatting

Colours should be a blue scheme, with white writing for clear visibility

Colours loaded as expected, writing in white. Colour scheme working as expected

No None Needed N/A

4 Background colour

Colour should be a dark blue

Colour loaded as a Dark blue

No None needed N/A

5 Spelling My spelling should be almost all correct

Some of my spelling needs correcting

Yes Re-check spelling and correct spelling

21/3/16

6 Images Images should load in the correct

Images load in the places as set in

No None needed N/A

9 | P a g e


location and sizes as set in Dreamweaver.

Dreamweaver

7 Page Layout Page layout should be as designed in Dreamweaver

Layout in the first design had gaps but were corrected via feedback.

No Action already taken

N/A

8 Video / Animation Animation should load in the designated slot

Animation is a bit slow on loading and has no media bar to play or pause the animation

Yes Review if adding a Media bar would be best for this portfolio.

23/3/16

9 Link to CV CV is loaded as an image

CV Loads with all other images

No None needed N/A

10 Other hyperlinks I have chosen not to use hyperlinks at the moment but may add them once I receive more feedback

No hyperlinks included

Yes/No Consider adding Hyperlinks

23/3/16

11 Exit The page should close as normal like every other website.

The page closes and has no issues closing

No None needed 23/3/16

10 | P a g e


Screen shot to show testing using Google Chrome:

Browser: Chrome

Test Number Test Expected Result Actual Result Any Action Required?

Action to Take Date to Complete

1 Accessing the website via Chrome

Loading up normally, showing all content in its designated

Everything loaded quite fast with excellent results

No None needed N/A

11 | P a g e


location2 Navigation Bar

functionalityThe function bar should work, navigating to each of the pages as designated

The bar works as expected

Yes Review Navigation code as to why it glitches on IE and no Chrome

21/03/16

3 Colour and Text formatting

Colours should be a blue scheme, with white writing for clear visibility

Colours loaded as expected, writing in white. Colour scheme working as expected

No None Needed N/A

4 Background colour

Colour should be a dark blue

Colour loaded as a Dark blue

No None needed N/A

5 Spelling My spelling should be almost all correct

Some of my spelling needs correcting

Yes Re-check spelling and correct spelling

21/3/16

6 Images Images should load in the correct location and sizes as set in Dreamweaver.

Images load in the places as set in Dreamweaver

No None needed N/A

7 Page Layout Page layout should be as designed in Dreamweaver

Layout in the first design had gaps but were corrected via feedback.

No Action already taken

N/A

8 Video / Animation Animation should load in the designated slot

Animation is a bit slow on loading and has no media

Yes Review if adding a Media bar would be best for this

23/3/16

12 | P a g e


bar to play or pause the animation

portfolio.

9 Link to CV CV is loaded as an image

CV Loads with all other images

No None needed N/A

10 Other hyperlinks I have chosen not to use hyperlinks at the moment but may add them once I receive more feedback

No hyperlinks included

Yes/No Consider adding Hyperlinks

23/3/16

11 Exit The page should close as normal like every other website.

The page closes and has no issues closing

No None needed 23/3/16

13 | P a g e


14 | P a g e


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

Summary of feedback received from 2 users:

The overall feedback I received was on a positive scale. People enjoyed the colours I used, as they felt they were far from boring but did not give the impression of being unprofessional. People enjoyed the usage of my work within the portfolio, with high credit being given to the animation.

The feedback highlighted a few things which people felt I could change to ensure it met the criteria and purpose on a better scale.

From my first reviewer, he stated that he liked the overall design of the portfolio but felt there was some errors in how it was being presented when looking at it. He advised changes be made to Unit 6 – Creating Digital Graphics due to the large gap between the navigation bar and content. He also found some minor issues with the other pages such as the Animation on the Unit 4 page.

My second reviewer had high praise for the website portfolio. She stated how she liked the inclusion of the multiple pieces of work in the portfolio. She stated how the storyboard could be closer together in a table. She also stated that I should add more detail to the paragraph text on the page.

Changes made to my website following testing and feedback received:

Screen Shot Before Commentary (Improvements to be made)

After Commentary (Improvements made)

Home Page

Before:

Home page had more wording on, in a less spaced out format. It is recommended that I reduce the wording just a small amount and space it out more into separate paragraphs

I have reduced my words by cutting out unnecessary descriptions which were saved for the content pages. I have also spaced out my wording, so that it covers more paragraphs instead of being clustered together.

15 | P a g e


After:

16 | P a g e


About Me

After:

People felt my personal image was far too big and took up too much space which would have made the worded content look better.I had placed all the wording into two paragraph and the CV was too small for people to read

I have reduced my personal image, to a small oblong on the left hand side, it remains still bigger than the home page image, but much smaller than before.I have added new content and made the CV much larger for it to be clear to read

17 | P a g e


Before:

18 | P a g e


It was suggested that I had a title header to this

I have added a title bar above the 12 images and

19 | P a g e


Unit 4 – Creating Digital Animation

Before:

page to be able to identify it as Unit 4 Content page.

The animation did not fully load and the spacing in the table for the drawings had too much space between each picture. There also is not enough writing in the description box.

animation, which clearly states that it is Unit 4 – Creating Digital Animation

I fixed the coding for the animation, so that it loads, I spaced out the writing and added more detail. I have also gotten rid of the spacing between the image boxes so that it appears as if one large picture storyboard.

20 | P a g e


After:

Unit 6 – Creating Digital Graphics

There was a large gap between the images and title. It was recommended I remove this gap in order for the portfolio to appear more professionally made

I have refined the page and removed the large gap between the graphics and title bars

21 | P a g e


Before:

After:

22 | P a g e


Unit 11 – Computer Networks

AfterIt is suggested that I change the design to have the 2 Visio images on either the left or right hand side and the text

I have changed my page to have both Visio designs on the same side of the page, on the left hand side, one above the

23 | P a g e


Before:

down the alternate side from the images

other. The text has been joined into one box on the alternate side from the Visio designs but separate paragraphs.

24 | P a g e


25 | P a g e


D2 - Refine the portfolio to improve navigation and include commentaries that justify the choice of content.

I chose to use the content for my Digital Portfolio because I decided it was the best parts of my work from my course at East Surrey College that is most suitable for the purpose of the Digital Portfolio. For my home page, I chose a reasonably suitable image of myself that clearly shows my face without anything unprofessional in the background or around me.

My first page is Unit 4 – Creating Digital Animation, which has an Intro page and a Content page. On the Intro page I have included a brief overview of the Unit and the learning outcomes, to give the view a clear idea on what we was doing for this unit. On this page I have chosen an image from google images that clearly represents Digital Animation.

For the Content of the Unit 4 page, I have included my 12 storyboard images, which show how my animation was designed to look in the planning stage alongside my actual animation project. For the actual animation, I chose to upload my Distinction criteria animation, as this was the most refined and most fit for purpose animation I produced. Since the animation was about healthy living, I chose to talk about the importance of Drinking Responsibly, which is what I show in my animation. I talk about this importance in the paragraph text on the page, as well as the learning outcome, criteria and tasks. I have made sure to include talking about the target audience, which I feel will show the viewer that I can create a piece of work that is specific for a certain audience, since they are aware of the audience I have targeted, they can make a decision if they feel it is targeted properly or not.

My next page is Unit 6 – Creating Digital Graphics. For this I have created the same as before, an intro and content page. In my intro page I have included a brief overview of the Unit and the learning outcomes, to give the view a clear idea on what we was doing for this unit. On this page I have chosen an image from google images that clearly represents Graphic Design/Creation.

For the content page of Unit 6, I have chosen to display all 3 graphic images I created for the tasks carried out for unit 6. On the left hand side, I have 2 smaller boxes which show my two Vector images which are the user guides. These two clearly show a phone and how to use it, as well as detailing the phones features. For the main part of the page, the Bitmap Advert takes the main space. I chose to do this as I feel this is the best piece of work I created for Unit 6, which shows my skills with Photoshop and other Image manipulation programs. In the paragraph text I have described the tasks I have carried out for this unit as well as the purpose of the graphics for this unit and its intended audience. This is so the viewers of this portfolio can judge my skills with creating an item set for an intended audience.

My next page is Unit 11 – Computer Networks. For this I have created the same as before, an intro and content page. In my intro page I have included a brief overview of the Unit and the learning outcomes, to give the view a clear idea on what we was doing for this unit. On this page I have chosen an image from google images that clearly represents a Computer Network.

On the content page of Unit 11, I have included my two Visio designs. One of which is my main designed used throughout the entire unit and the other is my alternate design, which was created for Task 2. These clearly show a computer network designed for a music shop business, with clear

26 | P a g e


labelling and detailing on specific items. In the paragraph text I have included details about the tasks carried out as well as the purpose of the computer network in the tasks. I chose these files as I feel they show an understanding of computer networks and show my skills with Microsoft Visio. This shows that I know the basics of what may be required in a business’s network as well as other things that may be required by the business, such as staying within a budget.

After I finished the portfolio, I decided to ask for feedback from people around me, I asked two different people their opinions about my portfolio. In their feedback, I received both positive and negative feedback from them. With the feedback, I decided to make some changes, looking at the negative points attempting to make them better. I went through each of the pages, making changes as the feedback suggested. I started with the index page, I decided to space the wording out and making my contact information clearer for the viewer to see.

On the Unit page, I have refined the content into a much more clearer and presentable format. More close to my original design, which was preferred by the people who provided feedback. Images were more spaced out and made bigger, so that they are clearer for the viewer to see. I have added more detail to all the text on the pages to detail more of the work displayed on the page. On the info page, I have increased the size of the CV, so that the wording is much clearer and readable. I have decreased my image size a small amount to ensure it fits on the page with the wording.

27 | P a g e

Documents

btecitresources.files.wordpress.com · Web viewBTEC Level 1/Level 2 First Extended Certificate in Information and Creative Technology (F1FDTA) Unit 3 – A Digital Portfolio Task