Project Claire: Redesigning Pika
From PikaDocs
By Brian Lawlor & Mark Sawyer
Legal Services of Northern California
(
http://www.lsnc.net/
)
Project Claire screenshots have been
updated
(
http://www.openpika.org/claire/
)
(December 2005) and
updated again
(
http://www.openpika.org/claire_updated/
)
(April 2006)
[
edit
]
Table of Contents
Step 01: Home Page Overview
Step 02: Rebuilding the Default Page Template
Step 03: Home.html Template Makeover (Part One)
Step 04: Home.html Template Makeover (Part Two)
Step 05: Home.html Template Makeover (Part Three)
Step 06: Prospective Client (Part One)
Step 07: Prospective Client (Part Two)
Step 08: Prospective Client (Part Three)
Step 09: Prospective Client (Part Four)
Step 10: Usability and the Title Attribute
Step 11: Citizenship and Alien Status
Step 12: Economic Eligibility
Step 13: Contact Information
Step 14: Site Map
Step 15: Case Screen "Shell"
Step 16: Case Notes Screen
Step 17: Case Record Eligibility Screen
Step 18: Case Information Screen
Step 19: Conflicts Screen
Step 20: Case List Search Results
Step 21: Time Slip and MSR Screens
[
edit
]
Design References
The alt and title attributes | 456 Berea Street
(
http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/
)
Bring on the tables | 456 Berea Street
(
http://www.456bereastreet.com/archive/200410/bring_on_the_tables/
)
CSS Specificity
(
http://www.htmldog.com/guides/cssadvanced/specificity/
)
Declarations: How to Define a Valid XHTML Document
(
http://htmldog.com/guides/htmladvanced/declarations/
)
Deprecated XHTML Elements
(
http://webdesign.about.com/od/htmlxhtmltutorials/l/bltags_deprecat.htm
)
How To Clear Floats Without Structural Markup
(
http://www.positioniseverything.net/easyclearing.html
)
Feed Validator for Atom and RSS
(
http://feedvalidator.org/
)
Floatutorial: Simple tutorials on CSS floats
(
http://css.maxdesign.com.au/floatutorial/
)
How Do I Size Fonts?
(
http://css-discuss.incutio.com/?page=FontSize
)
IE Doubled Float-Margin Bug
(
http://www.positioniseverything.net/explorer/doubled-margin.html
)
IE Gradient Filters
(
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/gradient.asp
)
How to size text using ems
(
http://www.clagnut.com/blog/348/
)
Increase line spacing to improve readability
(
http://www.fontsite.com/Pages/RulesOfType/ROT1-08.html
)
Javascript Events
(
http://www.htmldog.com/guides/htmlintermediate/javascript/
)
Link Titles Shmink Titles
(
http://www.htmldog.com/ptg/archives/000105.php
)
Online Readability
(
http://kalsey.com/2003/10/online_readability/
)
Position Is Everything
(
http://www.positioniseverything.net/
)
Printing Web documents and CSS
(
http://css-discuss.incutio.com/?page=PrintStylesheets
)
Selectutorial - CSS selectors
(
http://css.maxdesign.com.au/selectutorial/
)
Semantic (X)HTML Markup: Using Tables Appropriately
(
http://www.communitymx.com/content/article.cfm?cid=0BEA6&print=true
)
Semantics: Naming Conventions for Class and ID Selectors
(
http://www.informit.com/articles/printerfriendly.asp?p=170514
)
Star html Selector Bug
(
http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html
)
Start Page Survey Results
(
http://www.openpika.org/archives/2004/10/start_page_resu.html
)
Stylish Buttons
(
http://www.webreference.com/programming/css_stylish/
)
Tables My Ass
(
http://www.htmldog.com/ptg/archives/000049.php
)
Using Link Titles to Help Users Predict Where They Are Going
(
http://www.useit.com/alertbox/980111.html
)
W3C CSS Validation Service
(
http://jigsaw.w3.org/css-validator/
)
W3C XHTML Markup Validation Service
(
http://validator.w3.org/
)
Web Accessibility Initiative
(
http://www.w3.org/WAI/
)
Web Standards Project
(
http://www.webstandards.org/
)
[
edit
]
Template Files
Project Claire: activityL.html
~ "other matters" screen
Project Claire: activityN.html
~ case notes screen
Project Claire: activityT.html
~ time slip screen
Project Claire: case_conflict.html
~ case conflict screen
Project Claire: case_elig.html
~ case eligibility screen
Project Claire: case_info.html
~ case information screen
Project Claire: case_list.html
~ case list search results
Project Claire: case_screen.html
~ case record shell
Project Claire: contact_full.html
~ contact search results
Project Claire: contents_form.html
~ site map
Project Claire: default.html
~ page header and footer
Project Claire: help_pop_up.html
~ pop-up window
Project Claire: home.html
~ home page
Project Claire: intake_contact_list.html
~ initial intake
Project Claire: intake step1.html
~ citizen verification
Project Claire: intake step1b.html
~ alien status
Project Claire: intake step2.html
~ economic screening
[
edit
]
Other Project Files
Project Claire: CSS Code
~ global CSS
Project Claire: Print Media CSS Code
~ print-only CSS
Project Claire: JavaScript ~ External Validation File
Project Claire: JavaScript ~ Form Field Validation
Project Claire: JavaScript ~ Pop-up Window Tutorial
Project Claire: JavaScript ~ External Pop-up Window File
Project Claire: User Interface Images
Project Claire: Screenshots
(
http://www.openpika.org/claire/
)
(updated: December 2005)
Project Claire: Screenshots
(
http://www.openpika.org/claire_updated/
)
(updated: April 2006)
Views
Article
Discussion
Edit
History
Personal tools
Create an account or log in
Navigation
Main Page
Community portal
Current events
Recent changes
Random page
Help
Search
Toolbox
What links here
Related changes
Special pages