<mary_gillen>

Web Application Development & Instructor-led Online Technical Training May 18, 2012

Progressive Enhancement Web Design

info

2 Days Online
10 AM - 5 PM EDT
Instructor: Mary Gillen
Tuition: $790 per person


October 27-28, 2011 | November 17-18, 2011 | December 8-9, 2011


Learn the principles and benefits of progressive enhancement, an approach to web development that uses CSS3, HTML5 and jQuery frameworks in one markup document and a combination of different stylesheets to deliver the best possible experience to the widest possible audience - whether your users are viewing your sites on a mobile phone handset, a high-end desktop system, a Kindle, or hearing them via a 508-compliant screen-reader.


Course Prerequisites

To gain the most from the class, you should already have taken the following online courses:


Course Objectives

  • Learn why common coding approaches leave users behind, and how progressive enhancement is a more inclusive and accessible alternative

  • Learn how to analyze complex interface designs, to see the underlying experience that will work everywhere, and to add enhancements safely

  • Discover a unique browser capabilities testing suite that helps deliver enhancements only to devices that can handle them

  • Learn real-world best practices for coding HTML, CSS, and JavaScript to work with progressive enhancement, and cases where forward-looking HTML5 and CSS3 techniques can be applied effectively today

  • Learn how to include accessibility features like WAI-ARIA and keyboard support to ensure universal access

  • Discover detailed techniques to transform semantic HTML into interactive components like sliders, tabs, tree controls, and charts, along with downloadable jQuery-based widgets to apply directly in your projects

Course Outline 1: Introducing the Course

  • Meeting the Prerequisites
  • Understanding the Course Format
  • Reviewing the Course Outline


2: Overview of Progressive Enhancement

  • Testing browser capabilities
  • Planning for progressive enhancement
  • What are the building blocks of progressive enhancement?
  • Exercise: How to plan a progressive enhancement project


3: Progressive Enhancement: the x-ray perspective

  • An overview of the x-ray perspective
    • Defining content hierarchy and mapping components to HTML
    • How to build foundation markup and minimal, safe styles
    • How to apply markup, style and script enhancements
  • Case Studies
    • Planning structure and organization in a news website
    • Workflows, validation and data submission in a checkout form
    • Interactive data visualization (pie charts and graphs) for a budget calculator application
    • Supporting full-featured application capabilities in the browser - a Photo Manager application
  • Exercise: Creating a checklist for implementing the x-ray perspective


4: Writing Meaningful Markup

  • Marking up text and images
    • Elements for meaningfully marking up text
    • Lists
    • Tabular data
    • Images
    • Embedded rich media
    • Embedding external page content
  • Marking Up Interactive Content
    • Anchor links
    • Form structure
    • Form controls
  • Creating Context on the Page
    • Knowing when to use block-level vs. inline elements
    • Identify elements with IDs and classes
    • Identify main page sections with WAI-ARIA landmark roles
    • Maintain legible source order
    • Use the title attribute
  • Setting Up an HTML document
    • The DOCTYPE
    • The document header
  • Building in Accessibility
    • Accessibility guidelines and legal standards
    • Web Content Accessibility Guidelines (WCAG)
  • Exercise: Writing Meaningful Markup


5: Applying Styles Effectively

  • Applying CSS to the page
    • Maintaining styles in external style sheets
    • Linking to external style sheets
    • Using meaningful naming conventions
  • Styling the basic and enhanced experiences
    • Safe styles for the basic experience
    • Styling for the enhanced experience
  • Accessibility Considerations
  • Dealing with bugs and browser inconsistencies
    • Conditional comments
    • Common issues and workarounds


    6: Scripting Enhancements and Interactivity

    • How to properly reference JavaScript
      • Avoiding inline JavaScript
      • Referencing external JavaScript
    • Understanding JavaScript's place in the basic experience
    • Best practices for scripting enhancements
      • Running scripts when content is ready
      • Applying behavior to markup
      • Building enhanced markup with JavaScript
      • Managing content visibility
      • Applying style enhancements
    • Preserving and enhancing usability and acessibility
      • Implementing keyboard access
      • Assigning WAI-ARIA attributes
      • Testing accessibility
      • Maintaining state and preserving the Back button


    7: Testing Browser Capabilities

    • EnhanceJS: a capabilities testing framework
      • The mechanics of EnhanceJS: how the tests work
    • Applying enhancements with EnhanceJS
    • Configuring EnhanceJS
      • Loading additional style sheets
      • Loading additional scripts
      • Customizing the experience toggle link
      • Forcing EnhanceJS to pass or fail
    • Extending the EnhanceJS test suite
      • Modifying the test suite with EnhanceJS options
      • Creating new or multiple instances of EnhanceJS
      • Enabling the capabilities test alert for debugging
    • Optimizing EnhanceJS on the server


    8: Building Widgets with Progressive Enhancement

    • How widgets are coded


    9: Collapsible content

    • Creating accessible collapsible content
      • Foundation markup and style
      • Enhanced markup and style
      • Collapsible enhancement script
    • Exercise: Using the collapsible content script


    10: Tooltips

    • Creating a tooltip from title content
      • Foundation markup and style
      • Enhanced markup and style
      • Enhanced tooltip script
    • Exercise: Creating a tooltip from an anchor link
    • Exercise: Creating a tooltip from an external source


    11: Tree control

    • Creating the tree control
      • Foundation markup and style
      • Enhanced markup and style
      • Enhanced tree script
    • Exercise: Using the tree script


    12: Charts with HTML5 Canvas

    • Foundation markup
    • Creating the accessible chart
      • Parsing the table data
      • Using canvas to visualize data
      • Adding enhanced table styles
      • Keeping the data accessible
    • Exercise: Using the visualize.js plugin


    13: Dialogs and overlays

    • Creating the dialog
      • Foundation markup and style
      • Enhanced markup and style
      • Enhanced dialog script
    • Exercise: Using the dialog script


    14: Buttons

    • Styling input-based buttons
      • Foundation markup and style
      • Enhanced markup and style
      • Enhanced hover state script
    • Creating buttons with complex visual formatting
      • Foundation markup and style
      • Enhanced markup and style
      • Enhanced input-to-button script
    • Exercise: Using the input-to-button script


    15: Checkboxes, radio buttons, and star rating

    • Creating the custom checkbox
      • Foundation markup and style
      • Enhanced markup and style
      • Checkbox script
    • Creating custom radio buttons
      • Foundation markup and style
      • Enhanced markup and style
      • Radio button script
    • Exercise: Using the custom input scripts


    15: Select menu

    • Creating an accessible custom select
      • Foundation markup and style
      • Enhanced markup and style
      • Enhanced custom select script
    • Exercise: Using the custom select script


    16: List builder

    • Creating the list builder
      • Foundation markup and style
      • Enhanced markup and style
      • List builder script
    • Creating multi-select, sorting, auto-complete, and contextual menus
      • Multiple selection
      • Drag-and-drop sorting
      • Auto-complete
      • Contextual menus
    • Exercise: Using the list builder script


    Tuition: $790 per person
    Register: