what to do · web viewscreen shot this step and save it. paste in here if using a digital booklet...

US29804: Develop and evaluate an interactive website for a stakeholder

Tauira: Kaiako:

Tauira Workbook

US29804: Develop and evaluate an interactive website for a stakeholderLevel 4 Version 1 (5 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 can attach any additional pages or information as needed.2. Tauira declarationI 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 four sections, you need to

o Plan and design an interactive website (for a stakeholder)▪ This includes writing a brief, some project milestones and a testing plan.

o Develop a model interactive websiteo Produce an interactive websiteo Test, modify and evaluate the website, documenting changes

● The website must be created using a text editor using the markup languages HTML5 and CSS3.● Read through the whole assessment before you start.

4. Submission - have you:A. Shown your planning and attached a conceptual design,B. Met with your stakeholder at least 3 times, as required by your project milestones (which you have

written and signed off).C. Have an image of your basic website that shows the layout and design D. Completed an interactive website that meets the brief and follows HTML5/CSS3 conventionE. Given clear evidence of testing, following your testing planF. Evaluated your website for strengths, limitations and future ideas in a report.G. And submitted the completed work booklet and a zip folder containing 3 html pages and a media

folder with at least 2 media.

1 If printed, you may use extra paper as necessary. Please label with US29804, name, ID and kaiako.


What to do

You need to plan, make, test and evaluate a website for a stakeholder. The website must be responsive and interactive. Definitions:A website is 3 or more html pages all connected together with links and with embedded media. A responsive website changes layout depending on the screen size of the device. Phone <350px, small tablet 351-766px, large tablet 767-1349px, and laptop 1350-1600px, are common device sizes. The layout must change for least 2 different sizes. Interactive means that the website takes user input and does something with it. Examples include completing and submitting an online form, showing and hiding content such as accessing a drop down or pull out menu, or expanding sections, creating a shopping cart, building a learning app, like a quiz.

Steps:1. Find a stakeholder to make a website for- it could be a local business or you could ask a Kaiako if

they need a learning website from you that summarises your course, or another course, and create a quiz to test people. The website should be a fully functioning finished product that could be presented online.

2. Write a brief that describes the stakeholder's requirements for the website. The brief should contain all the specifications/ key objectives and constraints, including some design information (color, typography etc) and design specs to meet the stakeholder needs (some might be the scripting language, enhancements, placement of media, interactivity, accessibility, navigation, data validation, data constraints, digital devices ), the purpose of the website, the target audience. Check with your Kaiako and the stakeholder before moving on.

3. Write a plan of what you think you will need and break down the project into small project milestones. Your planning MUST include project milestones, resource requirements, stakeholder consultation, testing procedures, a sitemap, a directory structure, and a testing plan (read the testing steps below).You must track your progress as you go and update your table and log at each project milestone.

4. Create a conceptual design for each page of your interactive website. Keep a copy/photo of the original called version 1 and then document any changes you make at each project milestone.

All of the above planning should happen first but it will also change over the course of the project. 5. Create, in code in the IDE, the layout/design of your website to model what it will look like. It does

not need to work fully but each page must look like the proposed design so your stakeholder can see a website. Screen shot this step and save it.

6. Get feedback from your stakeholder, keep a record of what feedback was given and revise conceptual design and website as needed.

7. Make the full interactive website that meets the design specifications and latest coding standards. You must use HTML5 and have semantically correct structures, like <header> used properly. You must use CSS3 to create an advanced layout that is responsive to multiple devices. See the references below to help with coding standards.

8. Add media. You may add a range of media- videos, images, audio, widgets, but you must have 2 original media either created by yourself or supplied by the stakeholder and you must display content from another site, like a google map or youtube video.

9. Check your site is legal and referenced properly. All your content is appropriate for the site and you are legally, ethically and morally able to use it.

10. Navigation. Does your sites navigation work and meet the design specifications?As you create your website above you will be testing it to make sure it works. Record your testing as you do it.

11. Test and modify your website. How does it look? Doe it meet the stakeholders expectations and the design specifications? Before you start you should write a plan for how you will test your site works and how you will document your testing and changes.

12. Test and modify your website, document your changes. How does it work? Is it accessible on multiple browsers and for people with disabilities? Is it easy for people to read and understand? Does it follow the Principles of information presentation and the Principles of good design? Is the information accurate and in a good sequence. Is it responsive to at least 2 different sized devices?

13. Evaluate your website and the whole process you went through in a report. What are the strengths and limitations of the website and what would you recommend be improved in the future?



1. Stakeholder: __________________

3. Plan: Stakeholder consultationMeet with your stakeholder to discuss their interactive website needs. Jot down notes and sketches here to refer to later. What is the website for? Who is the audience of the website and what to they want/need? What content should go on each page? What design choices, typography style and colors? 2. Write brief: With just the brief alone- not the stakeholder notes or the 13 steps, you should have all the guidelines to make the website. Keep this in mind when writing it.

Conceptual StatementSummarise what are you supposed to do for your stakeholder? What are you making? What is the purpose and target audience?

Specifications Here are some questions to help you with your bullet pointsWhat things does your stakeholder want/need for interactivity, content and design? What must be in your site, from the 13 steps above? What are the things you have to make? What code will you use to make the interactions and enhancements? Where will you place all media? How will you navigate the site? How will it be accessible to disabilities? What inputs will you validate and constrain -eg names must be a string?

● EG 3 pages:

ConstraintsList the requirements to complete this project. What kind of code must you use? What features must your site have? What devices will the website be useable on? How will you test your site?

● E.g. Must follow the Principles of Information Presentation and the Principles of Good Design● ● ● ● ● ● ● ● ● Finished by due date ______________________________

Both your kaiako and stakeholder should check your brief before moving on.



3. Write a plan:Your planning MUST include project milestones, resource requirements, stakeholder consultation (above), testing procedures, a sitemap, a directory structure, and a testing plan.

A. Resource requirements: What information and resources will you need?

●●

B. Testing plan: Explain, how will you make sure everything looks and works as it should and how you plan to document your changes?

“Testing Plan refers to the detail of how the website is going to be tested for operation to ensure that it meets the specification of the brief and stakeholder, including data validation and accessibility testing.”

How I will test my site and record my testing?

Project Milestones:

Break up your project into small manageable pieces to fill in the gantt chart and set dates for when you plan to meet each milestone. Use the 13 steps in the instructions to help. Please check off each step and fill out your log as you go and update any modifications.

Fill in Gantt Chart: Key: Plan to do ◼ Done ✔ Week 1 Week 2 Week 3

Milestone Day 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

E.g. fill in milestones table ✔



11. Test and modify as you go:This step will happen continuously through the development of the website. Be sure to record here when you find a bug or test something and it works or doesn’t work. Following your testing plan in the planning section earlier.

Test and modify your website, document your changes. How does it look? Are you meeting the stakeholders expectations and the design specifications?

Log of milestones/testingDay Details/modifications

01 Jan 2018 ● E.g. fill in milestones table

E.g. Broke down project into milestones and worked out dates. Then I filled in the Gantt chart to keep track of my goals. Had to restart because I had the due date wrong.



USEFUL INFORMATION

Principles of Good Design● text hierarchy,● consistent typography,● balance,● harmony,● proportion,● sequence,● contrast repetition,● alignment,● proximity.

Is the site readable and functional on a range of devices?

Approx. screen sizes:● 1600-1350px- laptop/ computer screen● 1349-767px- large tablet screen● 766-361px- tablet screen● 350 or less- phone screen

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

References:Code Avengers.com, https://www.codeavengers.com/teacher/html-css/2w3schools.com, available at http://www.w3schools.com/default.asp;Web Platform Organisation, available at http://www.webplatform.org/;World Wide Web Consortium (W3C), available at https://www.w3.org/.

Principles of Information Presentation● order of presentation of information,● clarity,● simplicity,● readability,● consistency● appropriateness for intended audience.

Advanced CSS● Universal selectors● Attribute selectors

○ Selecting by attribute value, Selecting based on substrings within the attribute value, selecting based on delimited items within the attribute value

● Child selector● Descendent selector● Adjacent sibling selector● General sibling selectors● Pseudo-classes

○ Link and user action pseudo-classes, The negation (not) pseudo-class, The language (lang) pseudo-class, The target pseudo-class, UI element state pseudo-classes, Structural pseudo-classes

● Pseudo-elements○ :first-letter, :first-line, :before and :after

https://www.w3.org/community/webed/wiki/Advanced_CSS_selectors

Planning space: This and the below conceptual design must show a really clear picture of how you will meet the whole brief, including specifications and constraints.



Structure (what structural/semantic elements will be used? nav? ):

Ideas for creating accessibility:

Directory structure:Draw how your media, files and folders will be organised.

📁folder html css folder picture📃 📃 📁 🎴

Sitemap and navigation:Draw how your pages link together and what other pages/sites will you link to.

📃webpage ↔ 2 way link ↦ 1 way link 🗔 external site



Typography: Ideas on style, decoration, font types

Color scheme ideas:

4. Create a 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

An original and a modified conceptual design of each webpage MUST be included in your submission.



PASTE IN Conceptual design photos or fill in template (same template at bottom of assessment)



LAYOUT PAGE NO# 1 File name: Version: Conceptual Design 1

Phone <350px Notes: Small tablet 766-351px

Large tablet 1349-767px Notes:

Laptop/Computer 1600-1350px




4a. Stakeholder feedback of plan and concept: Go through the plan and conceptual design with the stakeholder, ask questions and see if it will meet their needs and expectations. If you have to modify the conceptual design, make a copy and adjust the doc- Name the first draft version 1 and the revised one version 2. The marker needs to see a progression of your planning, it will help as evidence you were testing and meeting with your stakeholder. Template of planning page at end of assessment for those who are using a printed rather than digital booklet.

Notes on meeting

Email reply day 2

Version 2 of conceptual design? (Template at back)



5. Create the base model of website from your design specifications:

Go to www.codeavengers.com/web/7 to make your live website in the Code Avengers IDE.Go to www.codeavengers.com/guide to get help with the IDE. Also the tools and reference in the IDE are very helpful.

Create the base of your website to model what it will look like. It does not need to work fully but each page must look like the proposed design so your stakeholder can see a website.

Screen shot this step and save it. Paste in here if using a digital booklet or print and add to back for printed booklet clearly labelled 5. Model of website version 1.



6. Stakeholder feedback of site design: Go through the designed website, ask questions and see if it will meet stakeholder needs and expectations. If you have to modify the conceptual design, make a copy and adjust on there- Name the first draft version 1 and the revised one version 2 etc. The marker needs to see a progression of your planning, it will help as evidence you were testing and meeting with your stakeholder. Template of planning page at end of assessment for those who are using a printed rather than digital booklet. Remember to fill out your milestones!

Notes on meeting

7. Make full interactive site:

Make the full interactive website that meets the design specifications and latest coding standards. You must use HTML5 and have semantically correct structures, like <header> is used properly. You must use CSS3 that controls advanced layout and is responsive to multiple devices.

Check: Are you following HTML5 and CSS3 conventions?Are you using advanced CSS? https://www.w3.org/community/webed/wiki/Advanced_CSS_selectorsIs your site responsive to different sized screens?Are you sing correct semantic HTML? https://www.w3schools.com/html/html5_semantic_elements.asp Have you added 2+ interactive parts to your site?

8. Add media:

Add media. You may add a range of media- videos, images, audio, widgets, but you must have 2 original media supplied by either yourself or the stakeholder and you must display content from another site, like a google map or youtube video. This step can happen anywhere in the process, it doesn’t have to be after you write the interactive code.

9. Check legality and references:

Check your site is legal and referenced properly. All your media is appropriate for the site and you are legally, ethically and morally able to use it.This step can happen anywhere in the process, it doesn’t have to be after you write the interactive code.

Look up copyright, creative commons and public domain licenses and use them appropriately. See https://creativecommons.org/share-your-work/licensing-types-examples/ for more information.

10. Navigation:

Navigation. Does your sites navigation work and meet the design specifications? This step can happen anywhere in the process, it doesn’t have to be after you write the interactive code.

FINAL WEBSITELAYOUT PAGE NO# 1 File name: Version: Final screencaps



LAYOUT PAGE NO# 2 File name: Version: Final screencaps






LAYOUT PAGE NO# 3 File name: Version: Final screencaps






12. Test and modify at the end of the assessment:

Test and modify your website, document your changes. 1. Is it working? Does it validate at an above validator?

2. Is it accessible on multiple browsers and for people with disabilities? Evidence:

3. Is it easy for people to read and understand? Evidence:

4. Does it follow the Principles of information presentation and the Principles of good design? Evidence: Give an example of how you thought about each point to do with presentation



1. Principles of Information Presentationa. order of presentation of information, b. clarity, c. simplicity, d. readability, e. Consistencyf. appropriateness for intended audience.

2. Principles of Good Design a. text hierarchy, b. consistent typography, c. balance, d. harmony, e. Proportion,f. sequence, g. contrast repetition, h. Alignmenti. Proximity

5. Is the information accurate and in a good sequence? Evidence:

6. Is it responsive on at least 2 different devices? Evidence:



12a. Stakeholder feedback final website:

Does the site meet the stakeholders requirements and expectations? Remember to fill out your milestones!

Notes on meeting

13. Write an evaluation report:Evaluate your website and the whole process you went through in a report. What are the strengths and limitations of the website and what would you recommend be improved in the future?



Final checklist

❏ Have you filled out this booklet, especially the project milestones and testing.❏ Do you have all your copies of the different versions of your conceptual design and website to show

you were testing, editing and iterating??❏ Are all loose pages (if printed) neatly labelled so it is clear where they belong?❏ Have you launched each page of your website and written the urls in the box below.

Page URL

Index https://www.codeavengers.com/c/exemplar/aroha_art/index.html

Page 2 https://www.codeavengers.com/c/exemplar/aroha_art/gallery.html

Page 3 https://www.codeavengers.com/c/exemplar/aroha_art/blog.html

Other pages https://www.codeavengers.com/c/exemplar/aroha_art/blog_content/180101blog1.htmlhttps://www.codeavengers.com/c/exemplar/aroha_art/blog_content/180104blog2.html https://www.codeavengers.com/c/exemplar/aroha_art/blog_content/180107blog3.html

External CSS https://www.codeavengers.com/c/exemplar/aroha_art/aroha_art.csshttps://www.codeavengers.com/c/exemplar/aroha_art/gallery.css

❏ Have you downloaded your IDE so you can give an electronic copy of the site to your Kaiako along with this booklet and any other evidence you wish to give?



Template LAYOUT PAGE NO#_____ File name ____________________ Version______





what to do · web viewscreen shot this step and save it. paste in here if using a digital booklet...

Documents