tauira workbook · 2018. 11. 14. · there are two parts to this assessment - this workbook for...

Tauira Workbook US25656: Create a website using a markup language to meet a set brief

Tauira name: Tauira ID:

Kaiako:

Tauira Workbook

US25656: Create a website using a markup language to meet a set brief

Level 2 Version 3 (3 Credits)

1. Assessment conditions ● This is an open book assessment ● All work submitted must be your own work with no help from anyone else ● Your name must be on all work that you submit for assessment ● There are two parts to this assessment - this workbook for planning and testing, and the website itself.

Both the workbook and website must be completed and submitted. Physical, digital and online submissions, or any mix of submission types is permitted. (If submitting a google doc and links to Code Avengers ensure that permissions are open to the public and links work.)

● You may use extra paper or files, all should have your name, ID and your kaiako’s name.

2. Tauira declaration I confirm that I have read and understood the conditions of this assessment, and have had the opportunity to seek clarification from the kaiako. Any health and safety requirements have been outlined and observed. All organisational policies have been complied with. I confirm the work for this assessment is my own. Signature and date also required.

Tauira signature/name Date

3. Assessment overview

● This assessment has three sections, you need to plan, develop, and test and evaluate a website to meet a given brief.

● The website must be created using a text editor using the mark-up HTML. ● Read through the whole assessment before you start. ● A tauira can meet this standard using a range of evidence including video, Kaiako observation,

annotated images, or voice recordings. Writing and annotated images are the strongly preferred methods of submitting your work. (Kaiako observation should be filled in in the spaces provided)

4. Submission - have you:

A. Shown your planning and attached a conceptual design, B. Completed and submitted a website C. Given clear evidence of testing (screenshots are good) D. Evaluated your website to explain how it has met the brief

And submitted it all in a way that is easy for your Kaiako to access and mark?

1


2


3


4


5


BRIEF: What to do Conceptual Statement: You need to use HTML5 and CSS3 to develop a website on one of the following topics. The website should inform people who visit it about the topic. The content and language used should be appropriate for the target audience, and comply with relevant legislation (e.g. copyright, privacy). All code used for evidence of the standard must be written by the tauira.

Ko wai au? Create a website about yourself. This could include information about you, your whānau, your whakapapa, interests and hobbies, achievements or anything else relating to yourself.

OR Turangawaewae Create a website about the place you come from or consider home. The pages of your site could focus on different things about the place, or highlights of the place, or even different places as many people call more than one place home.

OR Tāngata/Wāhi Whakahirahira Create a website about a person or place of significance relating to local history. This could be things like Pa sites and their histories, places relating to purākau and pakiwaitara, where famous local musicians/sports people grew up, went to school and did their activity. You may even have relatives who did significant things.

Specifications The site will:

☐ Have an index page and at least 2 other pages ☐ Have all pages linked with an easy to use navigation menu ☐ Include a range of appropriate structure tags (at least 2 from , , , ,

, , , , , , , , ) ☐ Include a range of appropriate element tags (at least and headings, paragraphs,

hyperlinks/anchors and images) ☐ Include at least two different embedded media that are relevant to the website topic(s) and target

audience e.g. sound, video, animation, images. ☐ Include at least two CSS enhancements, e.g. colors, fonts, backgrounds, advanced layout/alignment. ☐ Have a consistent color scheme and use no more than 3 fonts. ☐ Be able to be opened and viewed on at least two browsers on a platform (e.g. Chrome/Firefox). ☐ Be able to be viewed by people with disabilities such as visual impairment (e.g. good contrast and text

size, alt attributes on images). It is accessible and readable to a wide audience. Constraints The site must:

☐ Be written in HTML and CSS in a text editor such as the Code Avengers IDE or Notepad++ ☐ Follow copyright and privacy laws (use creative commons and/or reference sources) ☐ Use content and language that is suitable for the target audience ☐ Be readable/legible and be proofread for spelling, grammar. ☐ Have text content that is original, appropriately licenced and referenced, or supplied by the teacher. ☐ Be tested during development and at the end to ensure it displays correctly in the relevant browsers

and platforms. ☐ Be completed by the due date.

All code used for evidence of the standard must be written by the tauira.

6


Part A: Plan your website Outcome 1, ER 1.1 to 1.3

A1 -Identify the purpose, target audience and markup language you will be using for the website

● Write a few sentences about why you are writing a website, who is going to look at it and what coding language/s you are going to use.

Outline: You may attach additional pages where needed

A2 - Plan of Action

● Create a plan of action that includes: ○ Key milestones (what needs doing?) ○ Time management (when will you plan to do these things) ○ Resources you will need (what do you need to get them done?) ○ Testing procedures (how will you test your outcome during and at the end of development?)

Ideas: You may use this space to do some rough planning, but it is not required. However, you must complete the 3 tables on the next page.

7


A2.1 - Time Plan/Gantt Chart: ● Fill in the table of what needs doing and when will you do it?

Day 1 Day 2 Day 3 Day 4 Day 5 Day 6 Day 7

Milestone AM PM AM PM AM PM AM PM AM PM AM PM AM PM

E.g. fill in milestones table

A2.2 - Resources needed: ● Write down what will you need to complete your website? How will you meet the specifications in part B?

E.g. this planning booklet

A2.3 - Testing procedures: ● Explain, how will you make sure everything looks and works as it should?

8


A3 - Conceptual Design ● Draw up a design for your website including a full sketch of your intended layout, and a sitemap. Your

design should show how your site will meet the specifications, including the following: ○ Layout of content ○ Colors and fonts ○ Placement of links ○ Types of media ○ Layout of media ○ Enhancements

Fill in the “Digital Conceptual Design” on the following two pages. A conceptual design MUST be included in your submission of Part A: Planning

KAIAKO OBSERVATION: NOT FOR TAUIRA TO FILL IN. This is a space for recording evidence gathered by Kaiako observation (can be visual/verbal):

Part A Planning Evidence gathered by Kaiako (describe) Date and signed

(A1) Tauira has explained key milestones (what needs doing?)

(A2) Tauira has planned (in this section) how to meet the specifications.

(A2) Tauira has developed a Time management plan

(A2) Tauira has explained what resources they will need

(A2) Testing procedures (how will you test your outcome during and at the end of development?)

(A3) Conceptual Plan Must be submitted physically or digitally. Kaiako can document verbally/visually annotated/ explained/ expanded upon.

(A3) Conceptual Plan: Accessibility

(A3) Conceptual Plan: Structure tags to be used

(A3) Conceptual Plan: Annotations

9


Conceptual Design

Brief Specifications

The site will: ☐ Have an index page and at least 2 other pages ☐ Have all pages linked with an easy to use navigation menu ☐ Include a range of appropriate structure tags (at least 2 from , , , , ,

, , , , , , , ) ☐ Include a range of appropriate element tags (at least and headings, paragraphs, hyperlinks/anchors

and images) ☐ Include at least two different embedded media that are relevant to the website topic(s) and target audience

e.g. sound, video, animation, images. ☐ Include at least two CSS enhancements e.g. colors, fonts, backgrounds, advanced layout/alignment. ☐ Have a consistent color scheme and use no more than 3 fonts. ☐ Be able to be opened and viewed on at least two browsers and/or platforms (e.g. Chrome/Firefox,

mobile/desktop). ☐ Accessibility X2: Be able to be viewed by people with disabilities such as visual impairments or hard of

hearing (e.g. good contrast and text size, alt attributes on images). It is accessible and readable to a wide audience.

Ideas for creating accessibility:

Structure (what structural elements will be used?):

Sitemap: Color Scheme Ideas:

Colors:

Colors:

Colors:

Notes:

10


Design: Create the layout of your webpages, following the specifications that are listed. You may attach additional pages where needed index.html

page2.html

page3.html

Annotate: What element tags, styles and attributes will you use to make this? You may attach additional pages where needed

11


Part B: Code the website using a markup language

Outcome 2, ER 2.1 to 2.6

B1- Save the website using the program tools available

● Create 3 files in the Code Avengers IDE, (www.codeavengers/web/7), for your project. ● Each file must end in the .html file e.g. page2.html ● Hit the download button after every session to get a backup and save your work.

B2- Enter the code in a text editor according to the conventions of the language.

● The code must be written by you in the editor to create your pages. Some conventions for HTML that could be followed are lower case and indenting- using white space properly.

B3- Add structure tags

● Examples of structure tags: , , , , , , , , , , , ,

B4- Add element tags and their related attributes to meet the specifications of the brief in terms of layout, formatting and enhancements

● Required element tags: , ,

, , ● Examples of other element tags: , , ,
,

Attributes are the extra information that goes in the opening tag of an element. ● Examples of element tags with attributes: , ● Examples of CSS enhancements: fonts, colors, background colors, background images, borders, float, text

align, a:hover

B5- Add element tags and their related attributes (embedding and formatting media).

● Examples of embedded media: video, audio, images, animations, maps. ● Attributes will be related to the type of media but include things such as src, width, height etc.

B6- Test the website- Show evidence of testing and web-creation AS you write your website. (Notes below)

● Make sure you are viewing the website in the browser as you create it ● You should test it in more than one browser ● Make any necessary changes as required to meet your conceptual design and the specifications in the

brief . Submit your website either as a zip file (HTML, image and CSS files in a zipped folder) or as URL links in Section 4: Submissions at the front of the workbook.

KAIAKO OBSERVATION: NOT FOR TAUIRA TO FILL IN.

12

http://www.codeavengers/web/7


This is a space for recording evidence gathered by Kaiako observation (can be visual/verbal)

Part B Website Evidence gathered by Kaiako (describe) Date and signed

(B6) Test the website

(B1-5) Make website: ● Code follows conventions ● Add structure tags ● Add element tags and

their related attributes

*

*The website must be submitted physically or digitally/online. The only reason for Kaiako to sign off the “Make website” row is if the website has been created but for some reason Tauira cannot submit. Then the kaiako could check each step and mark as completed.

Part C: Test and evaluate the website

Outcome 3, ER 3.1 to 3.3

You need to document your work as you create your website. There are 3 sections below on testing your website works on browsers, website function and website accessibility. It is a good thing when you find a bug and fix it. No one writes a perfect website the first time. Please record your experiences as you go. *The clearer you make your documentation for the Kaiako, the more likely it will be that you meet the assessment. If you are worried you aren’t showing your evidence or it hasn’t come across, call over your Kaiako and say “I am going to test my links now, please watch and record the evidence in my workbook.“

KAIAKO OBSERVATION: NOT FOR TAUIRA TO FILL IN. This is a space for recording evidence gathered by Kaiako observation (can be visual/verbal):

Part C Test and Evaluate Evidence gathered by Kaiako (describe) Date and signed

(C1) Tauira has demonstrated testing on website to ensure it works and errors are fixed

(C2) Tauira has opened website in a variety of browsers and has explained how they have checked for accessibility, readability, and made sure the text is understandable and tidy.

(C3) Tauria has demonstrated that their website meets the specifications in the brief

● That the language and media used are suitable for the target audience

● That spelling and grammar are correct

13


C1- Test the website functionality to make sure it works properly Did you test/ check this at some point?

Did it need fixing?

Are all your headings, links, videos, pictures and text in the right order and places?

Do all of your links work when you click them?

Are your pictures and other media showing properly

Does your code validates in the validators at http://validator.w3.org and http://jigsaw.w3.org/css-validator/

Is your text is clear and legible, and formatted correctly?

What were some things you had to fix?

C2- Test the website accessibility Did you test/ check this at some point?

Did it need fixing?

Can you open the URL on at least two browsers/platforms and it looks right/displays properly on them? (e.g. Google Chrome, Firefox, mobile phone, desktop)

Can you open the URL on at least two browsers/platforms and the website works properly?

Have you done at least 2 things to make your website more accessible to people? e.g. sufficient contrast for text, suitable font size, alt tags on images.

What were some things you had to fix? List what you have done to make your site more accessible.

14

http://validator.w3.org/http://jigsaw.w3.org/css-validator/


C3-Evaluate the website for fitness for purpose Did you test/ check this at some point?

Did it need fixing?

Is your language, videos and images suitable for your target audience?

Is your spelling and grammar mostly correct?

Do your webpages have copyright stuff on them? (Content MUST be original or public domain or creative commons, e.g. anything from wikipedia can be used.)

Have you met these specifications? (tick them off) The site will: ☐ Have an index page and at least 2 other pages ☐ Have all pages linked with an easy to use navigation menu ☐ Include a range of appropriate structure tags (at least 2 from , , , ,

, , , , , , , , ) ☐ Include a range of appropriate element tags (at least and headings, paragraphs,

hyperlinks/anchors and images) ☐ Include at least two different embedded media that are relevant to the website topic(s) and target

audience e.g. sound, video, animation, images. ☐ Include at least two CSS enhancements using either style tags or linked external stylesheets e.g.

colors, fonts, backgrounds, advanced layout/alignment. ☐ Have a consistent color scheme and use no more than 3 fonts. ☐ Be able to be opened and viewed on at least two browsers on a platform (e.g. Chrome/Firefox). ☐ Be able to be viewed by people with disabilities such as visual impairment (e.g. good contrast and text

size, alt attributes on images). It is accessible and readable to a wide audience. Have you met these constraints? (tick them off) The site must: ☐ Be written in HTML and CSS in a text editor such as the Code Avengers IDE or Notepad++ ☐ Follow copyright and privacy laws (use creative commons and/or reference sources) ☐ Use content and language that is suitable for the target audience ☐ Be readable/legible and be proofread for spelling, grammar. ☐ Have text content that is original, appropriately licenced and referenced, or supplied by the teacher. ☐ Be tested during development and at the end to ensure it displays correctly in the relevant browsers

and platforms. ☐ Be completed by the due date.

15


Evaluation of fitness for purpose: You may attach additional pages where needed What is the purpose of your website? Give some reasons explaining how you have achieve that purpose.

Submitting assessment online with Code Avengers Once you have planned, made and tested your website you need to submit it. You need to give this assessment document into your Kaiako. You need to push each of your webpages live and write the url down here (explained in Code Avengers guide) You need to download your files and email them to your kaiako, or put them on a memory stick. (explained in Code Avengers guide) Your page URLs will look similar to this: https://www.codeavengers.com/c/20020202/index.html Page URL

Index https://www.codeavengers.com/c/

Page 2 https://www.codeavengers.com/c/

Page 3 https://www.codeavengers.com/c/

Any other pages

https://www.codeavengers.com/c/

Your TWOA ID

16

https://www.codeavengers.com/c/id/us25656_name/index.htmlhttps://www.codeavengers.com/c/id/us25656_name/index.htmlhttps://www.codeavengers.com/c/id/us25656_name/index.htmlhttps://www.codeavengers.com/c/id/us25656_name/index.htmlhttps://www.codeavengers.com/c/id/us25656_name/index.html


Assessment Schedule

US 25656: Create a website using a markup language to meet a set brief Level: 2 Credits: 3 Version: 3

Name: _______________________________________________ Assessor: _________________ Date: _______________

Course: ______________________________________________ Grade Awarded: N A

Evidence Requirement Evidence Statement Judgement Statement ✓

Part A - Outcome 1: Plan a website to meet the specification of a set brief

(A.2) 1.1 - The plan identifies the specifications of the brief in terms of their requirements and constraints. Range: may include but is not limited to – milestones, resources, testing procedures.

A plan and conceptual design for the website is provided. See samples answers in the Kaiako Guide document under Section 5: Sample answers, and high and low standard exemplar resources.

The tauira’s plan identifies the following:

☐ Key milestones ☐ Time management plan ☐ Resources needed ☐ Testing procedures

.

☐

(A.1) 1.2 - The plan identifies the purpose, target audience and mark-up language used for the website.

The tauira’s plan identifies the following:

☐ The purpose of the website ☐ The target audience of the website ☐ The markup language to be used

(HTML)

☐

(A.3) 1.3 - The plan includes a conceptual design. Range: may include but is not limited to - organisational structure of website, page layout, sitemap.

In their conceptual design, the tauira has:

☐ Identified the web pages they will have (at least 3)

☐ Shown how the web pages are linked in a site map

☐ Drawn their intended layout for the pages including placement of content.

☐ Planned for text content and at least 2 media elements appropriate for the target audience

☐ Indicated where hyperlinks and/or navigation will be placed

☐ Planned for at least 2 enhancements from:

☐ Colors ☐ Fonts ☐ Backgrounds ☐ Advanced layout/alignment ☐ Lists ☐ Other CSS

At least 2 specifications in the brief are considered in any of the planning above.

☐

☐

17


Part B - Outcome 2: Code the website using a mark-up language.

(B2) 2.1 - Text is entered by use of a text editor according to the conventions of the selected language.

A link to a website folder on the Code Avengers IDE is submitted by the student, containing their HTML/CSS files, and related media files. There is a link to a sample website outcome in the Kaiako Guide.

The tauira has entered the text using an appropriate editor for HTML e.g. the Code Avengers IDE or Notepad+++

☐

(B3) 2.2 - Structure tags are added to the text to meet the requirements of the conceptual Design. Range: may include but are not limited to – , , , .

The tauira has added at least 2 structure tags as required from:

☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐

☐

(B4) 2.3 - Element tags are added and attributes assigned to meet the specifications of the brief in terms of the layout and formatting of the pages and enhancements. Range: element tags may include but are not limited to tags that determine – style of the document, background, text and link colour, font style, image, linked documents, lists, tables, script(s). Attributes include – any required attributes and further attributes as defined by the specifications of the brief.

The tauira has used at least 4 element tags in their website, out of:

☐ - heading ☐ - heading ☐

- paragraph ☐ - image ☐ - link ☐ - ordered list ☐ - unordered list ☐ - list item ☐ ☐ ☐ ☐ ☐

Or others (specify): ☐ ☐ ☐ ☐

At least 2 attributes are used in these elements which have been written correctly and function as intended, out of:

☐ src ☐ width ☐ height ☐ href ☐ type ☐ alt

Or others (specify):

☐ ☐ ☐ ☐

☐

☐

18


At least 2 enhancements have been included in the pages, out of:

☐ Changed font style ☐ Font size/weight ☐ Text colors ☐ Background colors ☐ Background images ☐ Borders ☐ Margins/padding ☐ Floats ☐ Opacity

Or others (specify): ☐ ☐ ☐ ☐

☐

(B5) 2.4 - Element tags are added and attributes are assigned to meet the specification of the brief in terms of adding and formatting media. Range: element tags may include but are not limited to – tags that define embedded objects including plug-ins. Attributes may include but are not limited to – attributes that format the objects, attributes that create events (mouse or keyboard).

The tauira has included at least 2 media elements (e.g. video, audio, images, animation):

☐ ☐

At least 2 attributes are included across these elements that are written and function correctly:

☐ ☐

☐

☐

(B1) 2.5 - The website is successfully saved to a file by use of the program tools available for the task.

The tauira has created a folder in the Code Avengers IDE that has:

☐ An appropriate name ☐ All of the content for their website

inside (images, css file, html files) ☐ A home page called index.html ☐ At least 2 other linked pages

☐

(B6) 2.6 - The web page is opened within a browser, previewed and edited as required to meet the requirements of the conceptual design.

The tauira’s website:

☐ Has been previewed during the development process

☐ Meets the requirements of the brief ☐ Reflects their conceptual design to a

reasonable degree

☐

Part C - Outcome 3: Test and evaluate the website.

19


(C1) 3.1 - The website is tested to ensure functionality and any errors are corrected and logged according to the testing procedures in the plan. Range: testing may include but is not limited to – validating code, hyperlinks, media, formatting, layout.

Evidence of testing and evaluation are supplied by the tauira. This could be documentation in their workbook or documented by kaiako in class through observation or dialogue/wānanga. There are areas for additional evidence in the tauira workbook and at the end of this schedule. See sample answers for examples.

The tauira has tested to confirm at least 2 of the following:

☐ The layout is correct ☐ All of the links work ☐ All images/media display correctly ☐ The code validates in the validators at

http://validator.w3.org and http://jigsaw.w3.org/css-validator/

☐ Text is clear and legible, and formatted correctly

☐

(C2) 3.2 - The website is opened in a variety of browsers and is checked for accessibility, readability, legibility and presentation in accordance with the brief. Range: a minimum of two browsers for different platforms.

The tauira has tested to confirm that:

☐ The website displays correctly on at least two browsers/platforms (e.g. Google Chrome, Firefox, mobile, desktop)

☐ The website is usable on at least two browsers/platforms

☐ Any accessibility considerations have been taken care of e.g. sufficient size/contrast for text, alt tags on images, captions on videos.

☐

(C3) 3.3 - The website is evaluated for fitness for purpose in terms of the purpose, target audience and specifications of the given brief.

The tauira has provided evidence that the website is likely to be fit for its intended purpose by considering the following:

☐ That the website meets the majority of the specifications in the brief

☐ That the design, language and/or media used are suitable for the target audience

☐ Any other justifications for why the website will be fit for purpose.

☐

Evidence Requirement Additional evidence seen or heard

20

http://validator.w3.org/http://jigsaw.w3.org/css-validator/


Kaiako comments:

21

tauira workbook · 2018. 11. 14. · there are two parts to this assessment - this workbook for...

Documents