Thursday, August 13, 2009

Four Expression 3 Starter Kits, two for Blend and two for Web, focusing on Sketchflow, Gaming, SuperPreview and SilverLight.

UX Connection - Download the Expression 3 Starter Kits

“Getting started with Expression Studio 3? Here are 4 great learning kits to help you get things started.

Introduction to Prototyping with Sketchflow in Expression Blend 3: Assets, Guide and Video Package

Venture into Gaming with Behaviors in Expression Blend 3: Assets, Guide and Video Package

Discovering SuperPreview in Expression Web 3: Assets, Guide and Video Package

Support for Silverlight in Expression Web 3: Assets, Guide, Video Package

image

I don’t know about you, but I need all the “designer” help I can get…

To give you a feel for what’s in the kits, here’s a peek at what’s in the SuperPreview Starter Kit. The other kits are similar in format (but of course in varying content, length and number of modules).

image

And from the TOC;

SuperPreview Starter Kit

4Snippets (Approximately 5 minutes each)

This starter kit will walk through the use of SuperPreview (using the standalone for 5 out of the six modules and then demoing the integration in Expression Web for the 6th). The scenario will be a web page that has at least three major issues with IE6 and two smaller issues between other browsers (IE8 & 7) (IE8 & Safari for Mac).

1. Introducing SuperPreview

  • What is SuperPreview
    • An all-in-one tool that allows you to accurately debug websites using multiple browsers on the same system
      • Includes a built-in rendering engine for IE6 and other browsers
    • Allows you to debug cross-platform
    • Allows you to compare a rendering with a mockup
    • Compare one page with three browsers(An IE8, IE7, IE6)
      • Browse to a local page
      • Define a baseline browser (Ie8)
      • View browser renderings side by side
      • Using Selection Mode vs. Panning Mode
      • Demonstrate synchronized scrolling and synchronized guides
    • Expression Web 3 Integration
      • Fixing the double-margin bug with a “display:inline” rule.

2. Defining baseline browsers and comparing image mockups

  • Defining a site in Expression Web 3
    • Displaying a web page in SuperPreview
    • Defining Baseline browsers in Superpreview
      • Adding Comparison browsers
    • Importing a web page mockup into Superpreview
      • Using synchronized guides
      • Redefining the Baseline browser
      • Adding comparison browsers

3. Identifying the source of layout problems in SuperPreview

  • Comparing a web page between a baseline browser and three comparison browsers
    • Visually determining which browsers display layout differences
    • Working in Split layout to compare layouts
  • Working with Box highlighting to isolate the source of layout problems
    • Using the quick position display to view the size and position of a selected element
  • Working with “Lights-out” mode to isolate and identify positioning discrepancies.
  • Modifying a css rule to fix an IE6 floating bug
    • Refreshing browser views in SuperPreview

4. Working with the DOM view in SuperPreview

  • Activating the Dom tree view in SuperPreview
    • Document Object Model (DOM) overview
  • Using the DOM tree view to help isolate and identify layout problems within your web page
    • Navigating the DOM tree to determine the structure of the elements in your web page
    • Defining “Has Layout” for Internet Explore
    • Clicking on elements in the Comparison view to identify ID and Class names
  • Using Expression Web to locate CSS rules with Find and Replace

No comments: