Higher Education Web Symposium 2008

These are my notes from the Higher Education Web Symposium in Philadelphia, July 15–16, 2008. Any errors, omissions, etc. are mine.

CSS Tips and Techniques

Eric Meyer and Stephanie Sullivan, July 15 2008

Engineering Home Page Navigation (EM)

• #sidenav example from UPenn engineering site
• mostly beginner level techniques
• explicitly assigned values always beat inherited values
• instead of body#pagename #button_pagename:
  • body.pagename #pagename
  • body#pagename .pagename

Nursing Home Page (SS)

• standards-based rewrite of Nursing School home page
• browser font-size default is 16px
• body {font:normal 100%/1.45 Verdana,Helvetica,Arial,sans-serif;}
• IE6 CSS rule “selector {zoom:1;}” triggers hasLayout
• !important overrides specificty on decendent elements
• a:focus applies to keyboard tabbing
• recommends “Creating Liquid Faux Columns” by Zoe Gillenwater
• position:static is the default position rule
• sIFR 2 (soon 3) falls back to CSS if both Flash and JS are not available, so possible alternative to hide rules or display:none
• for full page-height column effect, set background image on high-level div and repeat-y (e.g. on #sidebar)
• make graphics larger than they need to be on x or y if text zooming will enlarge their container

Wharton Home Bottom Bar (EM)

• rewriting bottom section of Wharton Business School home page, but not removing the table container
• fancy headers: inline image or image replacement?
  • possible SEO benefit to image replacement
  • but if images are content inline is more accessible
• “more” pattern not much better than “click here”
• content: attr(href); adds in the URL in the a element

CSS Data Representation and Microformats (EM)

Graphs and Timelines

• CSS doesn’t care about default presentation characteristics of elements
• change table {display:table} to {display:block; position:relative}
• absolutely position everything in one place (e.g. bottom, center), then define additional x and y changes
• offset legend, e.g. thead {left:100%; margin-left:5em}
• discussed outline property:
  • doesn’t participate in layout
  • no border-top, -left, tom, -right
  • not supported in every browser (e.g. not in IE)
• Google Charts API would be a non-accessible alternative
• attribute variables as used on the Browser History Timeline:
  • p[title*="stimated"] = contains this substring
  • p[title~="June"] = contains this space-separated string
  • p[title^="stimated"] = begins with
  • p[title$="stimated"] = ends with
  • a[href$=".pdf"] = links to PDF files
  • a[href^="https://"] = links to secure sites
  • see also: “Iconize”

Microformats

• expose using Operator extension for Firefox
• claim: RDF is usually authored as a separate file (?) whereas microformats describe information that is already on the page (this doesn’t need to be the case if you serve XHTML as XML)
• Google and Yahoo! are using it (e.g. Google Maps)
• acknowledged X2V when I asked, but didn’t elaborate or advocate (odd, since X2V enables visitors to use microformats without FF+Operator)

Keynote: Gourmet User Experiences on a Fast Food Budget

Jared Spool, July 16 2008

• every usability problem comes from decisions people make based on too little information
• who makes usable designs and who doesn’t succeed at it?
  • left: success for those with solid tricks and techniques
  • middle: process is a series of steps to get something done
  • right: methodology is the formalisation of that process (often not helpful)
  • far right: dogma is strict adherence to method despite contrary evidence
• the best teams didn't have a methodology or dogma they followed
• the best teams all focused on increasing the techniques and tricks for each team member
  • they were constantly exploring new tricks and techniques for their toolbox
  • struggling teams had limited tricks and techniques
• forcing templates down on everyone?
  • no evidence that templates result in quality
  • though they do result in uniformity
  • focus instead on tricks and techniques
• three core UX attributes:
  1. vision: "Can everyone on the team describe the experience of using your design five years from now?"
  2. feedback: "In the last six weeks, have you spent more than two hours watching someone use yours or a competitor's design?"
  3. culture: "In the last six weeks, have you rewarded a team member for creating a major design failure?"
• five second tests (write what you saw after strict 5 second view time):
  • CDW Technical Support page
    1. Login existing customers
    2. Create Account new customers
  • CDW Customer Service
    1. Post-sales support
    2. Site features
• focus on the detail pages, not the home page
• watch your users use your pages for at least two hours every week
• make paper prototypes and have users “interact” with them, refine
• recommends “Paper Prototyping” by Carolyn Snyder
• University of Utah has all the important links on the home page, works
• MIT has a different home page design every day, submitted by students
• focus on developing a toolbox of tricks and techniques
• look for opportunities for creative approaches

Web Form Design

Luke Wroblewski, July 16 2008

• forms are the input side of the web
• how users (customers) talk to organisations (companies) online
• nobody reads instructional text, go straight to inputs
• nobody wants the form, they want what’s on the other side
• principles:
  • minimise the pain
  • illuminate path to completion
  • consider the context
  • ensure consistent communication
• one voice is what people on the outside need to see
• conversational: use natural language and natural breaks
• question every question on your form, do you need it?
• use minimum amount of visual differentiation
• eye tracking research shows that eyes move in a strong vertical line down left edge of fields to submit button (“heatmap” by Etre)
• avoid the lying progress indicator
• poorly organised forms lead to errors and dropout
• label placement:
  • top-aligned labels are faster, good if people have a lot of the answers ready (familiar data); more accessible?
  • right-aligned slower, can save vertical space
  • left-aligned, even slower but labels are easier to scan; good if people need to stop and think (unfamiliar or advanced data)
• setting up a record for the first time can be thought of as a different process than editing a record that already exists
• affordances (cues): fields should suggest the kind of data they should contain
• can you get rid of optional fields?
• might be easier to indicate optional instead of required (text is better than symbols)
• primary and secondary actions: try to remove secondary actions (Submit vs Back), and if not then make a clear visual distinction
• minimise the amount of help text required to fill out the form
• inline help is generally best
• errors: present warnings all at once and tell people how the can fix the errors
• inline validation: not too aggressive
• signup forms should die (roadblocks), vs gradual engagement
• e.g. Jumpcut allows people to use the service before signing up
• allow people to start working right away
• New book on Web Form Design from Rosenfeld Media: FOLUKE15 (15% off)

Secure Web Apps

Darian Patrick, July 16 2008

• OWASP (Open Web Applications Security Project) top 10
• based on MITRE Vulnerability Trends 2006
• top 10:
  1. cross site scripting (XSS)
  2. injection flaws
  3. mailicious file execution
  4. insecure direct object reference
  5. cross site request forgery (CSRF)
  6. info leakage and improper error handling
  7. broken authentication and session management (cookies)
  8. improper cryptographic storage
  9. insecure communication
  10. failure to restrict URL access

A1: XSS

• WebGoat
• h4k.in/encoding
• output printed to browser unfiltered, unencoded
• attackers are inserting JS into form fields to see whether the page can be manipulated
• HTML characters are not encoded, they are passed directly into the DOM, and the inclusion of a script tag executes the attack
• encode all HTML character entities
• specify the HTML output charset
• htmlentities() in PHP
• detect and filter

A2: Injection Flaws

• SQL, PHP commands can be injected through the id attribute
• guard against by checking that all ids are numbers, and escaping all characters that could be interpreted as shell commands
• filter is ok, do not sanitise (sanitise means allows known good material through even though some input might be rejected)

A3: Malicious File Execution

• mostly in PHP
• attackers include code in the application using include()
• should create a set of known good items, put them into an array and check input matches
• reject all others

A4: Insecure Direct Object Ref

• FF tools: Tamper Data (intercept requests as they leave the browser), Live Headers (see what you’re sending and receiving) and Web Developer
• closely related to A10: saw ViewProfile, guessed DeleteProfile then deleted own record
• guess that user ids are sequential
• Logged in as Tom (user 105), used Tamper Data to access Jerry’s (user 106) profile

A10: Failure to Restrict URL Access

• configure your web server to disallow access to file types that your application should never serve/doesn’t need to serve
• Apache is generally configured to serve any file types it doesn’t understand as plain text (e.g. filnames with a ~)—reverse this config in Apache
• Explicitly tell Apache all file types it can serve

A5: Cross Site Request Forgery (CSRF)

• Sending link to a user that they click, and the site believes that the user intended it/knew what they were doing
• e.g. Amazon One-Click vulnerability discovered by Chris Shiflett
• protect by adding a parameter to the form that passes a random value (token, but not the session token) and store them with session for that user
• should be that only the valid user will have this additional token
• every app on the Internet that doesn’t do this is vulnerable right now

A6: Information Leakage and Improper Error Handling

• disable detailed error message disclosure (turn off display errors in PHP)
• prevent backend error messages from getting to the browser
• create default error handler for your system
• log and alert triggers

A7: Broken Authentication and Session Management (?)

A8: Insecure Cryptographic Storage

• [specific web app, can’t remember which]
• MD5 is not crypto, just a hashing algorithm (didn’t know there was a difference)
• returns password hash to the browser, which is bad—never do it
• don’t use weak algorithms like MD5 and SHA1
• courseware system vulnerablity (he couldn’t say which), combined with XSS vulnerability on same app, would enable you to grab all the password hashes for your users, then all you have to do is crack the hashes

A9: Insecure Communication

• all about SSL: use it everywhere!
• problem when SSL is used for authentication, but then not for whatever you get to beyond that—
• SSL for authentication means that the app is sensitive enough to protect with SSL all the way through
• tokens can be grabbed over wi-fi
• you can arp spoof the router, make all traffic go through your machine, and then see all the tokens that go through

Note: Outside auditing is a good idea.
Presentation slides.

Drupal

Jody Hamilton and Alex Urevick-Ackelsberg, July 16 2008

Overview and Community

• first took off in the U.S. with Howard Dean organising
• emphasis on giving back
• SONY BMG, IBM, Adobe pay for a lot of the better known modules (i.e. plugins)
• resources:
  • Planet Drupal
  • Groups
  • IRC channels on Freenode:
    • #drupal
    • #drupal-dev
    • #drupal-support
    • #drupal-themes
  • Mailing lists: Developers, Security, Newsletter
• Using Colloquy IRC client on OS X 10.5
• DrupalCon: next in Hungary, then in Philadelphia or Los Angeles
• Reuters built an RDFa application (how is Drupal involved?)
• Acquia commercially supported Drupal:
  • enterprise model similar to Red Hat
  • five year support guarantees
  • claim: allowing larger organisations and companies to adopt
• new full version every 12-18 months, current version 6.3
• version 7 should be out in March-April and will be the first version since Acquia, core has extensive changes
• usually runs on a LAMP stack, support for Oracle is coming

UI Demo

• site and admin are the same interface with additional options for authenticated users
• Jody demoed the horizontal black bar admin menu across the top (module)
• Jody showed that you can create content and feeds very quickly
• you can have sites within your site (Organic Groups module)
  • groups have own users
  • own pages, nav and theme
• can create custom feeds using the Feeds API, SQL query builder is part of the admin UI
• comes with jQuery built in
• multi-site allows serving different domain names from the same Drupal instance, with separate backends
• can do subdomains
• admin UI is themed and can look different

Drawbacks

• theme authoring can be tricky, but since Drupal 6 it has been possible to do CSS-only theming
• Alex mentioned Views and CCK, major contributed modules
• many users waiting for these two updates before moving to version 6
• module upgrade takes a while
• file handling is not so good
• Alex said that any PHP program suffers from this but whether the issue was about functionality, security or usability was not clear
• image handling works but is not very usable