Web design principals – notes


  1. Visual Hierarchy: what are important things, what are less important
  2. Divine Proportions: golden ratio
  3. Hick’s Law: priority, filtering things
  4. Fitt’s Law: rule of target size
  5. Rule of Thirds: in image
  6. Gestalt Design Laws: the whole exists independently from the parts.
  7. Law of Proximity: things that do NOT go together, are not perceived as one
  8. Law of Similarity: We group similar things together
  9. Law of Closure: We seek completeness
  10. Law of Symmetry
  11. Law of Common Fate
  12. Law of Continuity
  13. White space and clean design
  14. Occam’s Razor: simplest solution is usually best

Web programming – Notes from the book Building Scalable Websites

Design Rules

OGF <—- sanity —> OPP

OPP has maintainability at the expense of flexibility. OGF is reverse.

Tips: use Smarty – an abstract templating engine helps to separate presentation logic and business logic

Three steps to separate presentation layer out:

  1. Sparate logic code form markup code
  2. Split markup code into one file per page
  3. Switch to a templating system

Then we need to separate page logic from business logic (Smarty)

Dev environments

3 rules:

  1. Versioning
  2. One-step build: develop, comit and stage, deploy
  3. Bugs tracking: bugs, features, operations. Priority: S1, S2, S3. Some issue-tracking softwares: Mantis bug tracker, request tracker, Bugzilla

Should not automate db schema, software/hardware changes, use script instead

Testing: automated testing (e.g., regression test) vs manual testing (identify main functions, test ideal path first, boundary testing)

Internationalization & Localization

Unicode encoding: fixed-width encoding – 4 bytes (UTF-32, UCS2) vs variable-length encoding (UTF-7,UTF-8, UTF-16).

UTF-8 use bwn 1-4 bytes. UTF-7 is 7  bit safe encoding

All unicode encoding are loss-less –> can convert bwn each others

UTF-8 Web app

html: charset=utf-8 represents both character set and encoding.

Add the AddCharset directive to either httpd.conf or .htaccess: AddCharset UTF-8 .php

Output html header (recommended): header(“Content-Type: text/html, charset=utf-8″);

Added to meta tag: <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

For XML document: <?xml version=”1.0″ encoding=”utf-8″?>

Notes: careful with UTF-8 in PHP

  • Binary safe string = can store any byte values in a “string” and will always get exactly the same bytes back
  • Some (non-safe) operations do not work with UTF-8: substr(), wordwrap() chunk_split()
  • Other safe operations (multibyte string): mb_substr() overloads substr()

UTF-8 with JavaScript

Need an escape() function for UTF-8 data (e.g., URL)