COMP06265 2018 Web Design and Development

General Details

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
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 Continuous Assessment Multiple Choice 20 % OnGoing 1,2,3,4
2 Individual Project Produce a simple web application Continuous 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
Laboratory Practical 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

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

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

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