Web Design Wikiclass | Lecture / Course Revision

A Web Design Lecture by Steven Choy

Lecture Overview: We use two meetings for course revision and tutorial. We review and discuss the main topics you have learned in the course.

Final Examination

April 30, 2011, 09:30-12:30
3-hours, closed-book, written examination
Part A - 10 short questions, all compulsory, amount to 40 marks
Part B - 5 long questions, answer 3 out of 5 questions, amount to 60 marks

     3 hours, 100 marks
     180 minutes, 100 marks
     1.8 minutes per mark
     ~70 minutes to answer all short question (40 marks)
     ~35 minutes to answer one long question (20 marks)

Do not bring dictionary and calculator.

Scope of Examination

1) Web design basics, HTML and CSS, color, typographic, graphics, images and multimedia

2) Planning, Information design, navigation design, interface design

3) Web forms, Web-based applications, interactions

4) Web standards, Web accessibility, web technologies

5) Performance, security, promotion, testing, launch

Web design basics, HTML and CSS, color, typographic, graphics, images and multimedia

What are the basic roles of HTML, CSS, and JavaScript (client-side scripting) in making a website?
Basic structure of a HTML source code - can you list essential and common elements?
How CSS rules can be integrated into a Web page? Pros and cons of each method
What are the functions of web graphics?
Foreground and background images - how and when
The three functions of alternative text
Why should we write useful ALT text for web graphics?
Why it is good to specify the width and height in putting an image in a web page?
Basic conepts about image file formats: GIF, PNG, and JPEG
How to optimize your website images/graphics?
Can you provide a situation where using GIF is a must (PNG and JPEG cannot do the job)?
Can you provide a situation where using GIF or PNG is a must (JPEG cannot do the job)?
Basic concepts about audio formats
Basic concepts about video formats
Different ways to embed audio/video into a Web page
Advantages of embedding video/audio using Flash object (rather than using helper applications)
Practical Questions:

Given HTML and CSS code, can you describe how the web page is rendered?

Planning, Information design, navigation design, interface design

What is information design in a Website development?
How information is presented and organized on the site
Organize website content and functions into their proper categories
Name these categories appropriately
Design obvious and effective navigation to access these categories
Combine and structure the elements on individual webpages
What is the function of a navigation bar in a website?
Design of navigation on large sites - discuss some good practice
What is a breadcrumb navigation (breadcrumb trail)?
Can you suggest a site structure for a small or medium website?
Discuss the importance of a sitemap
Navigation purposes
Conveying your site's theme
Site optimization purposes
Organization and relevance
Typical elements and layout of a web page
How to organize page content?
Table-based layout vs CSS layout
The problem with using tables in web page layout.
Fixed page layout vs fluid page layouts
Four basic types of web pages
A good navigation design should provide enough information to answer the following questions from users:
Where am I?
Where can I go?
How do I get there?
How do I get back to where I started?
Explain effective ways to accomplish the above tasks
Why and how to make your links conventional?
What is a mood board?
What is a wire frame?
Why you should wireframe your web designs?
Wireframe vs. Mockup vs. Prototype

Web forms, web-based applications, business websites, interactions

Different types of HTML form elements
Submission methods of form data: GET vs POST
Pros and cons of GET and POST methods
Form data is sent as part of the URL when GET is used.
Form data are restricted to ASCII codes. Special care should be taken to encode and decode other types of characters when passing them through the URL in ASCII format. On the other hand, binary data, images and other files can all be submitted through METHOD="POST"
All form data filled in is visible in the URL. Moreover, it is also stored in the user's web browsing history/logs for the browser. These issues make GET less secure.
However, one advantage of form data being sent as part of the URL is that one can bookmark the URLs and directly use them and completely bypass the form-filling process.
There is a limitation on how much form data can be sent because URL lengths are limited.
When should we use POST method? When should we use GET method?
Form validation: client-side scripting vs server-side program
What is a Content Management Systems (CMS)?
Advantages of using CMS
How CMS Works?
What is a ecommerce website?
Different models of ecommerce websites.
The various functions of JavaScript in Web Design
Web page effects that can be accomplished using client-side scripting
What is HTTP?
HTTP request and response messages format?
What is the difference between HTTP GET method and HTTP POST method?
Caching mechanism in the HTTP
Why having a basic knowledge of HTTP is good to a web designer?
What is AJAX and how does it work?

Web standards, accessibility, Web technologies

What do we mean by valid code?
Why use accessible code?
Why use external CSS to separate contents from presentation?
Web accessibility: How to make a website more accessible?
New development and improvement made by HTML 5
New development and improvement made by CSS 3

Web Performance, security, promotion, testing, launch

What are metadata descriptions (<meta name="description" content="" />) in a website? Discuss the importance.
Discuss the importance of title tags in a website.
What do we mean by Web analytics?
What is a favicon? Why we need it?
What is an 404 error page for a website? What can we do for a good user experience?
What is URL canonicalization? What is the importance?
What do we mean by graceful degradation?
What is SEO?
Two main types of SEO techniques: on-site optimization and Off-site optimization.
Can you suggest some good tips for improving SEO of a website?
Can you list somethings that would harm SEO of a website?
How to promote a website other than SEO?
Common security vulnerabilities of website: SQL Injection, Cross Site Scripting (XSS), Path Traversal, Cross-Site Request Forgery, Remote File Inclusion (RFI)
Can you explain effective techniques to optimize a large website?
CSS Sprites - What, why and how

Thanks for Reading

If you would rather like to have this lecture note in printed format, please click the print action link in the top right corner.

If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk.