Personal Website: Design Documentation

Goals

  • Describe and give examples of my professional knowledge, experience and skills
  • Demonstrate and develop my skills in web design, programming and writing
  • Educate people about computers, Africa, science, languages, education
  • Motivate people to support information technology, education and development in Africa
  • Share my knowledge, experiences, opinions, photos

Target Audience

  • Potential Employers
  • Educators
  • Students
  • Travelers
  • Family
  • Friends
  • Myself

Format Design Goals and Specifications

Category Goals Specifications
Navigation
  • Quick access to all pages and files
  • Multiple paths to a file (hierarchical/web hybrid)
  • Easy to update, maintain, restructure, add content
  • Titles and footers on every page
  • Easy to get back home or to contents pages
  • Accessible to browsers
  • Works for most popular screen resolutions, especially 1024x768
  • Easy access to frequently used information
  • Navigation elements take up little screen space
  • Details of linked pages
  • No independently scrolling frames
  • No pull-down menus
  • Works on any PHP-based hosting service
  • Distinguish navigation and content
  • Link to home in upper left corner of every page
  • Top-level and second-level navigation at top of every page
  • Third-level navigation on left sidebar of every group of pages
  • Home page contains links to most popular features
    (resume, activities, random photo and document, this document)
  • Navigation can contain links to both indexes and content pages
  • All links to index pages (including Home) should be indicated using boldface
  • All images should use alt attributes
  • Minimize JavaScript
  • All links in navigation frames use title attributes (Windows tool tips)
  • Use CSS and PHP to highlight iframe link that matches current page
  • Use background shading for navigation
Appearance
  • Consistent look and feel on every page
  • Clean, bright, precise, serious, enjoyable
  • Look and feel combines Africa and technology
  • Easy to read text
  • Thumbnails small but identifiable
  • Stylesheets and relatively clean, standard, browser-independent XHTML
  • Use black text on white background
  • Link colors match color scheme (green and brown)
  • Logo appears in upper left corner
  • Headings are large and bold
  • Body text uses sans serif font
  • Use embedded thumbnails to illustrate individual pages
  • Images/thumbnails should be 640x480/128x96 or less
  • Home page includes a random photo with link to more
Files and Folders
  • Combine hierarchical and web structure
  • Broad rather than deep
  • Clear, consistent, expandable file and folder naming
  • Fit all files on a low-cost web hosting service (<1 GB )
  • Keep individual and total file sizes small
  • Pages download fast
  • Clearly indicate download file sizes and contents
  • Keep only the best content
  • All file and folder names in all lowercase, hyphens instead of spaces or underscores
  • Index pages named index.htm or index.php
  • Store all large images in photos folder; thumbnails in thumbs folder
  • Create a document database with search and sort features

Tools

  • Web page and site editors (Macromedia Dreamweaver, Notepad 2, Notepad++)
  • Scanner, digital camera and image editors (Photoshop, Gimp)
  • Office applications (Microsoft Word, Excel, PowerPoint, Access, Publisher, OpenOffice)
  • Browsers (Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari, Opera)
  • Other (PHP, CSS, Java, JavaScript, WinZip, FTP, DOS batch files)

Development Tasks

  • * Analyze existing site and other available resources
    • Check content, format and tools used on academic and programmer web sites
    • Check hosting features of popular free web hosting services
    • Check which pages on current site get the most hits
  • * Reduce content to essentials; small is beautiful
    • Remove outdated content
  • * Simplify existing navigation scheme
    • Convert existing HTML files to use new headers and footers
    • Replace existing framesets with iframes; rename existing index pages
    • Update and check all links
  • Create photo gallery
    • Select the best 500 images
    • Create descriptions data using a spreadsheet saved as .csv file
    • Create Java data processor
    • Create JavaScript photo browser
    • Create thumbnails and add to photo gallery
    • Add thumbnail pictures to index and content pages
  • Create a similar document database using .csv file, Java and JavaScript
    • document fields: folder name, file name, file type, file size, date created, category, title, abstract
  • Reproduce existing site on hard disk, then make updates
  • Remove all files on existing Internet site, then upload entire new site