US29804 Kaiako/Teacher page
Assessment
For US29804 you need to plan, make, test and evaluate a website for a stakeholder.
The website must be responsive and interactive.
Download assessment booklet.dox
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. The layout must change for least 2 different screen sizes.
- Interactive means that the website takes user input and does something with it.
13 steps
- 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.
- 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.
- 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).
- 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 can also be changed over the course of the project. - 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.
- Get feedback from your stakeholder, keep a record of what feedback was given and revise conceptual design and website as needed.
- 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.
- 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
- Legality. 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
- Navigation. Does your sites navigation work and meet the design specifications?
- Test and modify your website to your testing plan. How does it look? Does 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.
- 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?
- 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?
Resources
To complete this assessment you will need to know advanced HTML and CSS and an intermediate knowledge of JavaScript. The below links will help you fill the gaps in your knowledge.
1/5: Stakeholder and brief Outcome 1
2/5: Plan and Conceptual Design Outcome 1
3/5: Make a Model Website Outcome 2
4/5: Make an Interactive Website Outcome 3
5/5: Test and Evaluate Outcome 4
Using Code Avengers. CA is a website that teaches you how to code websites and programs.
Learning for assessment: Complete all of HTML/CSS level 3 to learn advanced CSS and how to make your site responsive to different screen sizes.
"Tauira login" | "How to use CA"
Guide
Guide to using CA
HTML/CSS L3
HT3 Instructions | HT3 Reference
You should already have a basic knowledge of JavaScript and an intermediate knowledge of HTML/CSS before beginning this course.
Here are some courses to do if you need a refresher / some more training.
Beginner HTML/CSS L1
HT1 course (20 lessons)
Intermediate HTML/CSS L2
HT2 course (20 lessons)
Intro level JavaScript
JS0 course (10 lessons)
Intro level Web Development
WD0 course (5 lessons)
HTML/CSS L1
HT1 Instruct. | HT1 Ref. | HT1 Notes
HTML/CSS L2
HT2 Instruct. | HT2 Ref. | HT2 Notes
JavaScript Intro
JS0 Instructions | JS0 Reference
Web Dev Intro
WD0 Instructions | WD0 Reference
1. Stake holder meeting
2. Create a brief
3. Write a plan
4. Create a conceptual design
DE1 course (20 lessons)
Design 2: Color theory
DE2 course (20 lessons)
Specific lessons
DE1 Choosing Typography
DE1 Presentation lesson
Videos on planning
Brief
Planning
Conceptual Design
6. Get feedback from your stakeholder
Specific lessons
HT2 Fancy nav buttons
HTML conventions
HT1 Lesson 9
CSS conventions
HT1 Lesson 15
Guide to IDE
JS/HTML Quiz
WD0 Lesson 5
Selectors & inputs E.g. buttons
WD1 Lessons 1-9 | JQuery 1 project
Contact forms & others
WD1 Lesson 14 | JQ1 Lesson 11
Image gallery
HT1 Lesson 17 | HT3 Lesson 4
Image Slideshow
JQ0 Project
Blog
HT3 Lesson 12
Responsive Design
HT3 Lesson 13
Select specific things
Add or remove highlighting on sections.
JQ1 Lesson 6-10
Pop out navigation and animation
JQ103 Project
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F