COMP06247 2018 Web Design Fundamentals

General Details

Full Title
Web Design Fundamentals
Transcript Title
Web Design Fundamentals
Code
COMP06247
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)
Una LEstrange, Aine Mitchell
Programme Membership
SG_KSMAR_H08 201800 Bachelor of Science (Honours) in Computing in Smart Technologies SG_KSODV_H08 201800 Bachelor of Science (Honours) in Computing in Software Development SG_KNCLD_H08 201800 Bachelor of Science (Honours) in Computing in Computer Networks and Cloud Infrastructure SG_KAPPL_B07 201800 Bachelor of Arts in Computing in Application Design and User Experience SG_KNCLD_B07 201800 Bachelor of Science in Computing in Computer Networks and Cloud Infrastructure SG_KAPPL_H08 201800 Bachelor of Arts (Honours) in Computing in Application Design and User Experience SG_KCMPU_H08 201800 Bachelor of Science (Honours) in Computing SG_KSMAR_C06 201800 Higher Certificate in Science in Computing in Smart Technologies SG_KSMAR_B07 201800 Bachelor of Science in Computing in Smart Technologies SG_KGAME_C06 201800 Higher Certificate in Science in Games Development SG_KGADV_B07 201800 Bachelor of Science in Computing in Games Development SG_KAPPL_C06 201800 Higher Certificate in Science in Computing in Application Design and User Experience SG_KSODV_B07 201800 Bachelor of Science in Computing in Software Development SG_KNETW_C06 201800 Higher Certificate in Science in Computing in Computer Networks 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_BDIGI_B07 201900 Bachelor of Business in Digital Marketing SG_KAPPL_H08 201900 Bachelor of Arts (Honours) in Computing in Application Design and User Experience SG_KSMAR_H08 201900 Bachelor of Science (Honours) in Computing in Smart Technologies SG_KSODV_H08 201900 Bachelor of Science (Honours) in Computing in Software Development SG_KCMPU_H08 201900 Bachelor of Science (Honours) in Computing SG_KSMAR_C06 201900 Higher Certificate in Science in Computing in Smart Technologies SG_KCMPU_C06 201900 Higher Certificate in Science in Computing in Computing SG_KCMPU_B07 201900 Bachelor of Science in Computing in Computing SG_KNCLD_B07 201900 Bachelor of Science in Computing in Computer Networks and Cloud Infrastructure SG_KNCLD_H08 201900 Bachelor of Science (Honours) in Computing in Computer Networks and Cloud Infrastructure SG_KSODV_B07 201900 Bachelor of Science in Computing in Software Development SG_KNCLD_H08 202000 Bachelor of Science (Honours) in Computing in Computer Networks and Cloud Infrastructure SG_KCMPU_H08 202000 Bachelor of Science (Honours) in Computing SG_KSODV_H08 202000 Bachelor of Science (Honours) in Computing in Software Development SG_KSMAR_H08 202000 Bachelor of Science (Honours) in Computing in Smart Technologies SG_KNCLD_B07 202100 Bachelor of Science in Computing in Computer Networks and Cloud Infrastructure SG_KNCLD_B07 202100 Bachelor of Science in Computing in Computer Networks and Cloud Infrastructure
Description

The ability to comprehend and implement the technologies required to build a website are a fundamental requirement for any ICT graduate. This module introduces the learner to the core concepts required to build a basic website using industry relevant tools, while concentrating on the design side. Particular emphasis will be placed on HTML and CSS.

Learning Outcomes

On completion of this module the learner will/should be able to;

1.

Describe the evolving nature of the client server model.

2.

Explain the stages of the web design process.

3.

Create website content using HTML.

4.

Style website content using CSS.

Teaching and Learning Strategies

Computer labs will be used to move easily from concepts to practical implementation. Small out of class tasks will be provided to emphasise core concepts. Moodle (or similar) will be used to encourage students to engage with each other out of the class environment.

Module Assessment Strategies

One ongoing assignment will be used to allow the learner to provide a practical implementation of topics covered. Smaller assessments will be used to allow the learner to obtain feedback on a regular basis.

An end of semester exam will be used to evaluate  learning outcomes.

Repeat Assessments

The student will be required to sit a proctical exam for repeat purposes.

Indicative Syllabus

Describe the evolving nature of the client server model.

- Technical overview of client server model
- Evolution of client devices
- Overview of servers and web servers
- Cloud based systems
- The purpose of a web hosting company and facilities offered
- Methods of accessing the Internet
- Common tools used to build websites

Explain the stages of the web design process.

- Planning (requirements, site layout etc.)
- Design (mock-ups, review and approval)
- Development (content, functionality etc.)
- Launch and post-launch

Create website content using HTML.

- Webpage structure
- The purpose of HTML and CSS
- HTML elements (text, links, lists, tables, images etc.)
- HTML attributes
- The difference between HTML5 and previous versions
- HTML forms

Style website content using CSS.

- Introduction to CSS syntax
- Selectors, backgrounds and text
- The CSS box model
- Borders, margins, padding and dimensions
- Units and relative lengths
- Media
- Layouts and positioning
- Manipulating a website template
- Designing and building a basic website
- Browser compatibility 
- Debugging CSS
- Media queries
- Cascading

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 Moodle Quizzes Coursework Assessment Multiple Choice/Short Answer Test 30 % OnGoing 1,2,3,4
2 Design and build a Website Coursework Assessment Individual Project 30 % OnGoing 3,4
             

End of Semester / Year Assessment

Title Type Form Percent Week Learning Outcomes Assessed
1 Final Exam Final Exam Open Book Exam 40 % End of Semester 3,4
             
             

Full Time Mode Workload


Type Location Description Hours Frequency Avg Workload
Practical / Laboratory Computer Laboratory Lab based practical work 3 Weekly 3.00
Independent Learning Not Specified Self-directed Learning 4 Weekly 4.00
Total Full Time Average Weekly Learner Contact Time 3.00 Hours

Required & Recommended Book List

Recommended Reading
2013-01-06 CSS3: The Missing Manual O'Reilly Media
ISBN 1449325947 ISBN-13 9781449325947

CSS3 lets you create professional-looking websites, but learning its finer points can be trickyeven for seasoned web developers. This Missing Manual shows you how to take your HTML and CSS skills to the next level, with valuable tips, tricks, and step-by-step instructions. Youll quickly learn how to build web pages that look great and run fast on devices and screens of all sizes.

The important stuff you need to know:

  • Start with the basics. Write CSS3-friendly HTML, including the HTML5 tags recognized by todays browsers.
  • Apply real-world design. Format text, create navigation tools, and enhance pages with graphics.
  • Make your pages lively. Create eye-catching animations and give your visitors attractive tables and forms.
  • Take control of page layouts. Use professional design techniques such as floats and positioning.
  • Look great on any device. Craft websites that adapt to desktop, tablet, and mobile browsers.
  • Get advanced techniques. Use CSS3 more effectively and efficiently, and ensure that your web pages look good when printed.

Recommended Reading
2014-01-03 Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd Edition) (Voices That Matter) New Riders
ISBN 0321965515 ISBN-13 9780321965516

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
2011-11-08 HTML and CSS: Design and Build Websites Wiley
ISBN 1118008189 ISBN-13 9781118008188

A full-color introduction to the basics of HTML and CSS from the publishers of Wrox! 

Every day, more and more people want to learn some HTML and CSS. Joining the professional web designers and programmers are new audiences who need to know a little bit of code at work (update a content management system or e-commerce store) and those who want to make their personal blogs more attractive. Many books teaching HTML and CSS are dry and only written for those who want to become programmers, which is why this book takes an entirely new approach.

  • Introduces HTML and CSS in a way that makes them accessible to everyonehobbyists, students, and professionalsand its full-color throughout
  • Utilizes information graphics and lifestyle photography to explain the topics in a simple way that is engaging
  • Boasts a unique structure that allows you to progress through the chapters from beginning to end or just dip into topics of particular interest at your leisure

This educational book is one that you will enjoy picking up, reading, then referring back to. It will make you wish other technical topics were presented in such a simple, attractive and engaging way!

This book is also available as part of a set in hardcover - Web Design with HTML, CSS, JavaScript and jQuery, 9781119038634; and in softcover - Web Design with HTML, CSS, JavaScript and jQuery, 9781118907443.

Recommended Reading
2015-09-01 Responsive Web Design with HTML5 and CSS3 - Second Edition Packt Publishing - ebooks Account
ISBN 1784398934 ISBN-13 9781784398934

Learn the HTML5 and CSS3 you need to help you design responsive and future-proof websites that meet the demands of modern web users

About This Book

  • Learn and explore how to harness the latest features of HTML5 in the context of responsive web design
  • Learn to wield the new Flexbox layout mechanism, code responsive images, and understand how to implement SVGs in a responsive project
  • Make your pages interactive by using CSS animations, transformations, and transitions

Who This Book Is For

Are you writing two websites one for mobile and one for larger displays? Or perhaps you've already implemented your first RWD' but are struggling bring it all together? If so, Responsive Web Design with HTML5 and CSS3, Second Edition gives you everything you need to take your web sites to the next level.

You'll need some HTML and CSS knowledge to follow along, but everything you need to know about Responsive Design and making great websites is included in the book!

What You Will Learn

  • Understand what responsive design is, and why it's vital for modern web development
  • HTML5 markup is cleaner, faster, and more semantically rich than anything that has come before - learn how to use it and its latest features
  • Integrate CSS3 media queries into your designs to use different styles for different media. You'll also learn about future media queries which are evolving in CSS4.
  • Responsive images allow different images to be presented in different scenarios. We'll cover how to load different sets of images depending upon screen size or resolution and how to display different images in different contexts.
  • Conquer forms! Add validation and useful interface elements like date pickers and range sliders with HTML5 markup alone.
  • Implement SVGs into your responsive designs to provide resolution independent images, and learn how to adapt and animate them
  • Learn how to use the latest features of CSS including custom fonts, nth-child selectors (and some CSS4 selectors), CSS custom properties (variables), and CSS calc

In Detail

Desktop-only websites just aren't good enough anymore. With mobile internet usage still rising, and tablets changing internet consumption habits, you need to know how to build websites that will just work', regardless of the devices used to access them. This second edition of Responsive Web Design with HTML5 and CSS3 explains all the key approaches necessary to create and maintain a modern responsive design.

The changing way in which we access the web means that there has never been a greater range of screen sizes and associated user experiences to consider. With these recent trends driving changes in design, typical desktop-only websites fail to meet even minimum expectations when it comes to style and usability, which can be vital when your website is central to yours or your client's brand. Responsive Web Design with HTML5 and CSS3, Second Edition is an updated and improved guide that responds to the latest challenges and trends in web design, giving you access to the most effective approaches to modern responsive design.

Learn how to build websites with a responsive and mobile first methodology, allowing a website to display effortlessly on every device that accesses it. Packed with examples, and a thorough explanation of modern techniques and syntax, Responsive Web Design with HTML5 and CSS3, Second Edition provides a comprehensive resource for all things responsive'.

This updated new edition covers all the most up-to-date techniques and tools needed to build great responsive designs, ensuring that your projects won't just be built right' for today, but in the future too.

Chapter example code is all hosted on rwd.education, a dedicated site for the book, built by the author, using the approaches and techniques championed throughout.

Recommended Reading
2014-11-29 The Non-Designer's Design Book (4th Edition) Peachpit Press
ISBN 0133966151 ISBN-13 9780133966152

For nearly 20 years, designers and non-designers alike have been introduced to the fundamental principles of great design by author Robin Williams. Through her straightforward and light-hearted style, Robin has taught hundreds of thousands of people how to make their designs look professional using four surprisingly simple principles. Now in its fourth edition, The Non-Designers Design Book offers even more practical design advice, including a new chapter on the fundamentals of typography, more quizzes and exercises to train your Designer Eye, updated projects for you to try, and new visual and typographic examples to inspire your creativity. 


Whether youre a Mac user or a Windows user, a type novice, or an aspiring graphic designer, you will find the instruction and inspiration to approach any design project with confidence.

THIS ESSENTIAL GUIDE TO DESIGN WILL TEACH YOU 

  • The four principles of design that underlie  every design project 
  • How to design with color 
  • How to design with type 
  • How to combine typefaces for maximum effect 
  • How to see and think like a professional designer 
  • Specific tips on designing newsletters, brochures, flyers, and other projects 


Module Resources

URL Resources

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/css/default.asp

http://flatui.com/

http://www.csszengarden.com/

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5