COMP06265 2018 Web Design and Development
Full Title
Web Design and Development
Transcript Title
Web Design and Development
Code
COMP06265
Attendance
N/A %
Subject Area
COMP - Computing
Department
COEL - Computing & Electronic Eng
Level
06 - NFQ Level 6
Credit
05 - 05 Credits
Duration
Semester
Fee
€
Start Term
2018 - Full Academic Year 2018-19
End Term
9999 - The End of Time
Author(s)
Mr. John Kelleher, Paul Powell, Shane Banks, Una LEstrange
Programme Membership
SG_KAPPL_H08 201800 Bachelor of Arts (Honours) in Computing in Application Design and User Experience
SG_KSODV_H08 201800 Bachelor of Science (Honours) in Computing in Software Development
SG_KCMPU_H08 201800 Bachelor of Science (Honours) in Computing
SG_KAPPL_C06 201800 Higher Certificate in Science in Computing in Application Design and User Experience
SG_KAPPL_B07 201800 Bachelor of Arts in Computing in Application Design and User Experience
SG_KSODV_B07 201800 Bachelor of Science in Computing in Software Development
SG_KSODV_C06 201800 Higher Certificate in Science in Software Development
SG_KCMPU_C06 201800 Higher Certificate in Science in Computing in Computing
SG_KCMPU_B07 201800 Bachelor of Science in Computing in Computing
SG_KSOFT_B07 201800 Bachelor of Science in Computing in Software Development
SG_KAPPL_H08 201900 Bachelor of Arts (Honours) in Computing in Application Design and User Experience
SG_KSODV_H08 201900 Bachelor of Science (Honours) in Computing in Software Development
SG_KCMPU_H08 201900 Bachelor of Science (Honours) in Computing
SG_KCMPU_C06 201900 Higher Certificate in Science in Computing in Computing
SG_KCMPU_B07 201900 Bachelor of Science in Computing in Computing
SG_KSODV_B07 201900 Bachelor of Science in Computing in Software Development
SG_KCMPU_H08 202000 Bachelor of Science (Honours) in Computing
SG_KSODV_H08 202000 Bachelor of Science (Honours) in Computing in Software Development
SG_KAPPL_H08 202100 Bachelor of Arts (Honours) in Computing in Application Design and User Experience
SG_KSODV_B07 202100 Bachelor of Science in Computing in Software Development
SG_KSODV_H08 202100 Bachelor of Science (Honours) in Computing in Software Development
SG_KCMPU_H08 202100 Bachelor of Science (Honours) in Computing
SG_KCMPU_C06 202100 Higher Certificate in Science in Computing
SG_KCMPU_B07 202100 Bachelor of Science in Computing
SG_KSODV_H08 202200 Bachelor of Science (Honours) in Computing in Software Development
SG_KCMPU_H08 202200 Bachelor of Science (Honours) in Computing
Description
Web forms are the principle means by which we interact with web sites. They can act as a barrier or invite people in. There are basic design principles for effective user interfaces. Students will learn these principles and how to develop web sites and forms which conform to them. They will also learn how best to develop sites and forms which are easy to maintain.
Learning Outcomes
On completion of this module the learner will/should be able to;
1.
Design and implement a web form using HTML and CSS.
2.
Generate CSS, using a CSS pre-processor which is easy to maintain
3.
Design and implement a responsive, accessible web site which adheres to usability standards using a framework.
4.
Explain the role of form validation and apply both client and server side validation to a form.
Teaching and Learning Strategies
The one hour lecture will be used to introduce core concepts.
The idea of the flipped classroom will be used for the computer lab based classes. Videos demonstrating key techniques will be available and students will work on worksheets and their own projects during class time. The lecturer will use the class to review and assess the students work.
Module Assessment Strategies
A number of formative assessments will be set throughout the year and students will need to do design and development outside of class time. Peer assessment may be used to enhance students understanding of how to assess a web applicaiton.
The quizzes are designed to test students knowledge of the theory, to encourage continuous study, and to provide frequent feedback to both the students and the lecturer. There will be a formative quiz each week. There will be two normative quizzes. These will take place in week 8 and week 12.
The 30% project will be submitted and reviewed three times in the year. Students will be expected to act on the feedback given and use this feedback in the next stage of their project.
Repeat Assessments
Depending on which element the student has failed they may be asked to do a repeat project, to resit the exam or both. They may also be asked to take a quiz.
Module Dependencies
Prerequisites
A basic knowledge of HTML and CSS.
Indicative Syllabus
Design and implement a web form using HTML and CSS.
- Why web form design matters.
- Elements of a web form.
- Best practices for web form design.
- How usability testing can be used to improve web form design.
- The structure of a HTML form.
- HTML form elements and their attributes.
- HTML form validation
- Using CSS to style a web form.
- Using CSS to create a responsive web form.
Generate CSS, using a CSS pre-processor which is easy to maintain
- What is a CSS preprocessor.
- What are the advantages of using a CSS preprocessor.
- How to use one.
Design and implement a responsive, accessible web site which adheres to usability standards using a framework.
- Explain the advanatages and disadvantages of using a framework for front end web development.
- Using bootstrap or other framework for web form development.
- Why do we need guidelines for usability and accessibility.
- General user interface design principles, methods and standards.
- Universal Design as applied to web design.
- The role of WCAG Guidelines in web accessibility.
- Using bootstrap or other frameworks to produce accessible and sites sites.
Explain the role of form validation and apply both client and server side validation to a form.
- Explain why validation is used and what the limits of validation are.
- Using regular expressions for input validation.
- Implement validation on the client side using HTML and JQuery, ( or other client side tools).
- The need for server side validation.
Coursework & Assessment Breakdown
Coursework & Continuous Assessment
60 %
End of Semester / Year Formal Exam
40 %
Coursework Assessment
| Title | Type | Form | Percent | Week | Learning Outcomes Assessed | |
|---|---|---|---|---|---|---|
| 1 | Multiple Choice Series of Quizzes | Coursework Assessment | Multiple Choice/Short Answer Test | 20 % | OnGoing | 1,2,3,4 |
| 2 | Individual Project Produce a simple web application | Coursework Assessment | Individual Project | 30 % | OnGoing | 2,3,4 |
End of Semester / Year Assessment
| Title | Type | Form | Percent | Week | Learning Outcomes Assessed | |
|---|---|---|---|---|---|---|
| 1 | Practical Evaluation Implement a simple web application | Final Exam | Open Book Exam | 50 % | End of Term | 3,4 |
Full Time Mode Workload
| Type | Location | Description | Hours | Frequency | Avg Workload |
|---|---|---|---|---|---|
| Lecture | Lecture Theatre | Theory | 1 | Weekly | 1.00 |
| Practical / Laboratory | Computer Laboratory | Programming | 2 | Weekly | 2.00 |
| Tutorial | Computer Laboratory | Lab based tutorial | 1 | Weekly | 1.00 |
| Independent Learning | Not Specified | Design and Development | 3 | Weekly | 3.00 |
Total Full Time Average Weekly Learner Contact Time 4.00 Hours
Required & Recommended Book List
Recommended Reading
2013-12-23 Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability (Voices That Matter) New Riders
2013-12-23 Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability (Voices That Matter) New Riders
Since Dont Make Me Think was first published in 2000, hundreds of thousands of Web designers and developers have relied on usability guru Steve Krugs guide to help them understand the principles of intuitive navigation and information design. Witty, commonsensical, and eminently practical, its one of the best-loved and most recommended books on the subject.
Now Steve returns with fresh perspective to reexamine the principles that made Dont Make Me Think a classicwith updated examples and a new chapter on mobile usability. And its still short, profusely illustratedand best of allfun to read.
If youve read it before, youll rediscover what made Dont Make Me Think so essential to Web designers and developers around the world. If youve never read it, youll see why so many people have said it should be required reading for anyone working on Web sites.
After reading it over a couple of hours and putting its ideas to work for the past five years, I can say it has done more to improve my abilities as a Web designer than any other book.
Jeffrey Zeldman, author of Designing with Web Standards
Recommended Reading
2015-12-19 Beginning CSS Preprocessors: With SASS, Compass.js and Less.js Apress
ISBN 1484213483 ISBN-13 9781484213483
2015-12-19 Beginning CSS Preprocessors: With SASS, Compass.js and Less.js Apress
ISBN 1484213483 ISBN-13 9781484213483
Learn how preprocessors can make CSS scalable and easy to maintain. You'll see how to write code in a very clean and scalable manner and use CSS preprocessor features such as variables and looping, which are missing in CSS natively. Reading Beginning CSS Preprocessors will make your life much simpler by showing you how to create reusable chunks of code. In addition to coding enhancements, you'll also learn to automate processes such as generating image sprites and minifying code. Beginning CSS Preprocessors is your guide for getting started with CSS preprocessors. This book shows you how to use CSS in your day-to-day work and thus be smart and efficient at writing CSS. * What are preprocessors * What are the known preprocessor frameworks* What are the features of Sass (Syntactically Awesome Stylesheets)* What is Compass (COMPrehensive ASSembler) * What is Less (Leaner SS)
Recommended Reading
2014-06-27 Learning Responsive Web Design: A Beginner's Guide O'Reilly Media
ISBN 144936294X ISBN-13 9781449362942
2014-06-27 Learning Responsive Web Design: A Beginner's Guide O'Reilly Media
ISBN 144936294X ISBN-13 9781449362942
Deliver an optimal user experience to all devices - including tablets, smartphones, feature phones, laptops, and large screens - by learning the basics of responsive web design. In this hands-on guide, UX designer Clarissa Peterson explains how responsive web design works, and takes you through a responsive workflow from project kickoff to site launch. Ideal for anyone involved in the process of creating websites - not just developers - this book teaches you fundamental strategies and techniques for using HTML and CSS to design websites that not only adapt to any screen size, but also use progressive enhancement to provide a better user experience based on device capabilities such as touchscreens and retina displays. Start with content strategy before creating a visual design Learn why your default design should be for the narrowest screens Explore the HTML elements and CSS properties essential for responsive web design Use media queries to display different CSS styles based on a device's viewport width Handle elements such as images, typography, and navigation Use performance optimization techniques to make your site lighter and faster
Module Resources
URL Resources
MDN Web docs, in particular
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms
https://developer.mozilla.org/en-US/docs/Web/Accessibility
Web Content Accessibiity Guidelines 2.0
http://www.w3.org/WAI/WCAG20/versions/guidelines/
Other Resources
None
Additional Information
None