I took numerous photowalks and here are all my photos from my adventures in Indianapolis, IN.

I used my blog for notes on each session and here are links to each:

Monday
addEventListener() now what? – Josh Buhler
Degrafa: Declarative Graphics Framework
Yet Another Flex Mapping API, NOT! – Mansour Raad
Custom Item Renderers – Ryan Frsihberg and Joan Lafferty

Tuesday
Putting the UX in Flex – Joe Johnston
Axiis Release! – Tom Gonzalez
Making your Flex Apps Standout with Great UX – Francisco Inchauste
Programmatic Skinning – Jeremy Saenz
Breaking Down your Apps with Mate – Laura Arguello

Wednesday
Integrating Accessibility in an Enterprise-Level Flex App – Michelle Bagur
Using RSLs – Chase Brammer
Building Real-Time Applications in Blaze DS/LCDS – Dan Blackman
Flex, CF, and LCDS Magic – Nick Kwaitkowski

That’s all folks! Getting in the car with @betsyweber, @babarakus, and @quetwo to head home. I am sure there will be some more interesting conversations on the way home. Spirit babies? Gorilla legs? Bacon suckers? What?

CF –> Adobe CF 7+ works but 8+ has LCDS baked in. No Railo/BlueDragon/etc.
LCDS –> middleware app designed to move data
Flex –> 2.0.1+
Data –> any serializable data including DB, LDAP, email, FTP, mapping software, web services, etc.

LCDS – expensive? yes and no.
BlazeDS is light, open source version without data management
LCDS ES – J2EE app that Adobe sells that includes all the features of BlazeDS, plus DM, NIO messaging, etc.
LCDS ES Single CPU License (was Express Edition) – free version that works on 1 CPU and will not cluster. Can be used for dev/testing/production environments. based into CF8 download. MSU has done 3-400 clients on this free version.

Flex SDK “Next” will be offering client side data management. Why should I care?
great for small data but not much else.
no data sync, data caching, or conflict resolution

Data Management
pass data to LCDS and let it handle passing it to the client. You can control how it passes including pagination and data sync.
LCDS assumes its the only one interacting with the DB.

Data Messaging
allows flex clients to communicate with each other without tying up resources on the app server
over TCP, HTTP polling, etc.

Data Proxying
you can proxy your web sevice or remoting calls through the LCDS to help get around restrictions in firewalls and policies

Example of data management
2 clients. change data on one and see the changes on another. reduce the chances of clients having conflicting data. Revert is built-in with hardly any code.

Coding the Flex Side
create a new collection to store the data
create a value object so the data serializes properly
utilize the DataService MXML tag and call the fill function

Why it works?
data is packaged up into value objects or packages of data
each VO is tracked separately as to who is viewing, editing, etc.
users then subscribe to a set of data
LCDS will ‘listen’ to any changes made to the data in the client
if the collection that holds the data is changed, LCDS will take change, change VO in memory, send change to app server and update clients
when an update is sent to other clients, it will check its local copy to make sure it hasn’t changed. if it has, it will issue “conflict” event and allow the client to choose.
on the client, 95% of work is handled by collection class
handles updating LCDS with changes and notifying other visual components of the change
when a dataGrid broadcast the change event, the collection hears, updates its own data and passes on the change.

Blackbox of LCDS
config files in wwwroot
master is services-config.xml
other files include channel info (services), messaging config (messaging), DM (data-management) and flash remoting (remoting)

Channels
Default Channels:
my-cfamf –> does AMF endpoints. binary over HTTP. firewalls might break it but normally a good way to go.
cf-polling-amf –> works well with nasty firewall. every X seconds ask server if there is new data
air-rtmp (Nick will provide downloads) –> direct connection through tcp socket which stays open. offloads some i/o from your application server. port 2050
cf-rtmp –> port 2048
port range recommendation: typically stay around 2048. that is registered by Adobe for RTMP. above 1024 because below that is well defined ports. it will all depend on the client firewalls.

Destinations
a destination needs an endpoint which is used to encapsulate your data based on server.
multiple channels are allowed as fall backs. if the first is not available, the next in the list is used after a “reasonable amount of time”. limit of 16 channels.

Properties
component: cfc that does the data handling
scope: how long the data lives
access: remote (default) corresponds to the access of the cfc
property-case: change the case of functions/variables
metadata: identity – normally ID of the table ie PARKNAME, query-row-type – path to value object

Documentation in default file contains all the options/values.

Lots of channel options
AMF typically run over HTTP. Tend to be slower or designed for one time polls and can be combined with HTTPS.
RTMP typically run over 2048. real-time, quick, easy but firewalls have been known to block on occasion.

Don’t worry about selecting a single channel. Normally RTMP and then polling is a good option.
Each destination can define channels which it wants to use
Each destination is just a name but must be unique to the server.

CF Fun!
final part of this puzzle is the CF side. could be any language by why?
traditional CRUD
fill() – think of this as the get all
get() – this is to get a single item
sync() this performs create, delete, and update
count() – this needs to return the number of records for pagination, finding updates, etc

Unsolicited Updates
one of the coolest features is the fact that you can push unsolicited updates to clients
examples: non-flex client update data, customer buys something from your store, or new email comes in

Creating unsolicited updates
3 easy steps:
create event gateway of type “DateManagement”
create some sort of VO
pass this VO to the event gateway – the update will be pushed to your clients.

With FB/RDS, there is a wizard for creating the value object/cfc. Flex 4 will include more wizards.

Examples of uses:
CRUD for DB
Directory watcher
collaborative doc management
email client
collaborative GIS app

Intro to LCDS
consists of: flex messaging service, flex data management, flex proxy service, and remote object service

Push vs Pull
pull is client asks server for data
push is server actually pushing data to client

Types
Simple AMF – stateful approach
RTMP – real time messaging protocol
maintains persistent connection
allows real time
uses java-nio facilities
Polling
flex client sends requests for messages periodically

Configuring channel/destination
-CFGateway: messages sent between cf8/flex
-JMS Adapter: allows to use both JMS/Flex clients to communicate
-AS Adapter: flex default allows only flex clients to participate in communication

Channels
my-cf-amf
cf-polling-amf
cf-long-polling-amf
cf-streaming-amf
cf-rtmp

Examples using LCDS (chat) and then CFGateway (Facebook notifications)

Disadvantages
cross domain issues
can’t create signed RSLs
debugging
quick editing
must download the whole RSL (doesn’t trim unused classes)

RSLs act like diet pills for the size.

What is an RSL
Purpose
To quickly reduce your apps file size
code one, use in many places
How do it do that?
Kung Fu.
separates large code of flex into other places

Terms
RSL – runtime shared library
Signed RSL – Adobe published RSL
Unsigned RSL – the RSL for the rest of us
SWZ – an adobe signed RSL
SWC – zip file contains compiled Flash/Flex project that is not standalone code
Library.swf – one of the two files that are in a SWC
Catalog.xml – second file in a SWC
Compc – component compiler
Browser cache – your browsers of choice cache, not to be confused with Flash Player Cache
Flash cache – Flash Player’s internal cache
ANT automated command line built utility

Where do I find my RSLs
SDK/frameworks/rsls

Flex Core RSLs
how to speed up your apps? make the file size smaller.
1. use case: app is big. too big. you need it smaller and faster.
solution: separate your flex framework from your RSLs
2. use case: you have a project that has a core set of components, libraries, or utilities that are pretty much stable and you dont want to force the users to re-download all of that every time on release.
solution: create an RSL
3. use case: you, a friend, a co-worker or some dude in India just gave you a SWC and you want to use it as an RSL
solution: import into your project and make it an RSL
4. use case: your company has a common set of components, libraries, or assets that you want to share across multiple projects
solution: create a cross-domain RSL
digest must be enabled “-compute-digest=true”
5. use case: feeling good but client wants even faster!
solution: run the optimizer
6. collaborative work
7. automated builds for deploying RSLs

Something to laugh
http://www.youtube.com/watch?v=xUosP0Hkoek

Section 508 – 1998
required federal agencies to make their technology accessible to people with disabilities
any group that gets money from the federal government also falls under this
ie. universities, benefits,
http://section508.gov/

Principles of accessibility (developed by WCAG)
perceivable
operable
understandable
robust

Compliance
How do you know? test, find impaired user, combination of automated tools/best judgement
Is the “spirit” of compliance good enough? alternative approaches, are they different but equal? some say yes, some say no.
For example, 2 steps vs. 10 steps? equal?

Why does it matter?
Target Lawsuit
Why? not section 508 compliant b/c of alt tags
By whom? national federation of the blind
Results? working with org to fix the site. $6 mil in damages

Assistive Technologies
Keyboard navigation
no extra requirements
tabbing/hotkeys

Screen Readers
JAWS by Freedom Scientific (has the market share)
Windows Eyes by GW Micro
VoiceOver by Apple (sounds the most like a human)
the first two work with Flex

How do Screen Readers work?
MSAA (Microsoft Active Accessibility)
API – 1997
IAccessible COM interface
4 pieces exposed by API: name, type, value, state
UIAutomation

Client is assistive technology and server is the application.

Communication is through properties (client asks server) and events (server broadcasts)

Examples:
Good?
amazon.com – tells you that there is an accessible version right away. much simpler.
dignubia.org (IE only) – read all links/buttons

Bad?
google.com – didn’t tell much from the start. one tab brought to the search box and worked well.
contrast is normally a big issue.

Flex 3 and MSAA
three main classes
Flash.accessibility.AccessibilityImplementation
Flash.accessibility.AccessibilityProperties
Flash.accessibility.Accessibility

compile with “-accessible = true”

Official Flex 4 statement
When it ships, spark components will not be accessible/nor automation. 4.1 will include this and won’t be far behind. Next version of the player will look to get past MSAA but this isn’t even in the playing stages yet. So… continuing to work on it.
- Matt Chotin

How is it supposed to work?
Flex 3
JAWS 8,9,10 with IE. JAWS scripts have to be installed.

Chain of command:
Flex SDK
Flash Player
JAWS scripts
JAWS

Official documentation says there are 28 accessible components but the data visualization is separate from this.
Do not try to retro-actively put accessibility into a Flex project –> nightmare!

Tips/Tricks
make sure scripts are installed
start tabIndex at 1
don’t be afraid of the focusThickness property (3)
get focus into Flash app (semi successfully)
possible method to force the tab to stay without app
tooltips – pay attention to name/description and the 4 values of them

Seems like a great framework that is headed in the right direction without much overhead. Definitely going to look into it more.

programmatic skinning provides the power to create a skin that is just as flexible, if not more, than the default Flex skin (Halo)

Flash Drawing API
kind of a pain
lots of numbers/math
25%

Degrafa
really cool!
uses states that look more like regular Flex states
clean and reusable
75%

What else? Flex 4
new skin lifecycle
new idea is skin “parts” ie label is part of a button.

Three type of parts
static, deferred, dynamic (the cool one)

Gumbo skinning looks pretty sweet.

UX Recession Challenges
scarce resources ($)
rush to market (if I am out there first, I will win)
UX isn’t understood

Why of UX?
Foundation is more important than a bunch of tips

Emotion
3 levels of processing: appearance, ease of use, satisfaction
attractive things make people feel good. mind is more open.
people pay to be scared
*IKEA video about lamp* fun! http://www.youtube.com/watch?v=I07xDdFMdgw
“do any of these package-design people actually shop for orange juice? because i do and the new cartons stink.” – customer

Principles
divine proportion/golden ratio/rule of thirds
found everywhere.
usually it can actually help improve aesthetics and communication of the experience.

Fitt’s Law – time to acquire a target is a function of the distance to size of the target.
Mac OSX is 5 times faster to get to the application menu
Gestalt Laws – while is different than sum of its parts
law of proximity – flickr without borders
law of similarity – grouping pieces based on something (color)
law of closure – flickr images as one
law of continuity – follows 2 lines
law of simplicity – mind looks at simplest thing
80/20 Rule – application should meet needs of 80% of users. The other 20% are probably expert users. Designing to their needs, the main audience can’t use it.

Process
code -> ship
initiate -> code -> ship
initiate -> code -> qa -> design look feel -> ship (today)
initiate <*-*> design <-> code <-> qa <*-*> ship (goal)
* = user input

User Observation/Research (Personas)
*video about team passes* LOL http://www.youtube.com/watch?v=Ahg6qcgoay4
you might have one idea of what people need but they are the ones with the needs
Who is the user?
basic/intermeadiate(majority)/expert
Models
UI should be based on user mental models
The implementation model from the developer reflects the technology
The mental model from the user reflects their own vision
In between are versions with pieces of each.

Flip
can’t do – tiny screen, no tapes/discs, fold out screen, effects.
can do – capture video, self contained, USB plug, formatted for quick sharing
yet took 20% of market share
1 page instructions. Sony Handycam -> 40 pages.
extra features may actually REMOVE value from your product/application.
Fact: 90% of the feature requests MS gets about Word are ALREADY in MS Word.

SpatialKey
What it does? patrol operations, patrol, special units, command staff, dispatch.
Entire team went to Ogden Police Dept to see how things work. worked well because everyone came out on the same level.
Goals come from the research/observation/personas
Wireframes come from goals
User Feedback
Design product
*Looking at font sizes and where its going to be used*
*37 Signals yellow fade technique to highlight changes*
User Feedback
Good for QA/technical bugs/features/UX

Fighting UX Recession
time = understanding
educate clients
UX concerns lead to improvements
survival of the fittest – worse experiences will die off
not an afterthought – more planning
better experiences

Books
Emotional Design
About Face

Blog: http://www.getfinch.com/
Twitter: http://www.twitter.com/iamfinch/

Questions

How do you sell it? user cases of why its successive are key.

What?
more than just a set of charting components
lightweight framework used to assemble and development charting functions
way to describe patterns in data

Why?
Client needs are normally quite specific leaving the developers feeling like they need “one more feature” to fully meet the needs. End up diving into the code and doing things on your own.
Trying to provide developers with tools to do this easier.

Before we started, we looked at: *insert crazy charts here including one looking like a tube*

How is it different?
its all about describing patterns driven by data and your imagination
conceptually we wanted it to be flexible, lightweight, and elegant.

How did we do it?
reference repeater (shape) for layout
describe a pattern, bind some data, draw a picture

Goals:
Expressive (ideas to easily transfered to screen) Framework
lots of mxml
data binding
degrafa

someone at Adobe has said “the heart of Flex is lots of [mxml] markup and [data] binding”

Concise
less code
flattened inheritance chain
mxml in the core

Modular
granular building blocks
mix and match components
no sacred cows (got away from some OO best practices)

Magic Sauce
mxml (pros/cons)
lose some ability but decided it was worth it
binding (pros/cons)
costly but trying to optimize that
degrafa (its all pros)

Examples
barchart grouped into groupings of bars (some stacked) – code seems quite simple for the layouts (groupings/stacks)
line area group with toggles for groupings/markers/flow
pie chart with states (olympic medal count)

Does that come with fries?
DataSet
Column/Bar Clusters and Stacks
Line/Area series group
Wedge Stack, Plots and More
Axis, Scale, Expressions
States
Source, Examples, Docs

Where are we today?
Alpha 1.0
core defined and working
some pre-built components
has bugs and needs more testing
ready to take on contributors (experience in charting/open source)

What’s next?
performance (works to a couple hundred)
states/tweens (animation) – bubble to column with Degrafa SuperShape
transitions
more visualizations (hopefully contributor driven)
beta 1.0 (sometime in August)

How do I get a copy?
http://www.axiis.org/ under MIT license
http://code.google.com/p/axiis/ for source/svn

UX Process
1 Research
2 Persona Development
3 Wireframe Development
4 Design Framework
5 Vision Prototype

Timeframe is highly dependent on other project load and budget for this specific project.

Research
“customers sometimes do not know what they want” or most of the time
“it can be dangerous to just listen to what users say they need” – John Seely Brown
“it is more from engaging with user, watching what they do, understanding their pain points, then you get big leaps in design.” – Debra Dunn
This doesn’t mean input from the users is unimportant.
Immerse yourself in the culture of the user (as fast as possible)
Create goals (single sentence)
Do user interviews (using open ended questions)
“what makes it a good or bad day?”
“what activities currently waste your time?”
“How do you find workarounds/shortcuts?”
Types of Users – Beginners, Intermediate (most important), Experts
Competitive research is important while immersing yourself in the industry

Personas
fictitious people who represent the archetypal qualities of your audience
drawn from field research
named as individuals
developed for specific contexts
typical and believable

Personas are not
based on demographics or market segments
drawn from gut feelings about your audience

Example: photo, name, age, relationship to project, background, day-to-day activities, goals

Context scenarios – taking one persona, narrate that persona using one product to achieve a specific goals.

Wireframes
brainstorming with fellow designers, developers, and clients
wireframe the user screens and interactions (start to place content)
no design applied (try to stick to BW)
several iterations/refinement
pretend the interface is magic (helps ignore which technology is used)
the client saying “no” is definitely a good thing since it is their field

Design Framework
collaborating with designer
several iterations/refinement again

Vision Prototype
most important deliverable
a real working app in the deploying technology
can capture key problems before full app is built
apply design framework
rapidly built from a couple days/weeks
created and skinning in Flex/AIR using CSS/Degrafa
devs can take and reuse skins (saves time later)

Purposes:
user testing (robust formal to friends/family) – Silverback
stake holder buy in
data/service validation
marketing
demos for trade shows, other