Achieving Flash-Like Interactions Without Flash Jason Mock, Human Kinetics, Inc

501

Achieving Flash-like Interactions without Flash Jason Mock, Human Kinetics, Inc.

August 10 & 11, 2006

Produced by Designing & Developing eLearning Interactions Designing & Developing eLearning Interactions August 10 & 11, 2006

501 Creating Flash-Like Interactions Without Flash Jason Mock Human Kinetics, Inc. [email protected]

Session objectives

Identify why we’ve always used Flash Identify alternative solutions to Flash Explore deeply one such alternative •Identify the required setup •Explore the interaction possibilities •Create an interaction without Flash

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 1 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

Who Are You?

And why are you here?

Getting to know you polls

What do you currently use for interaction development? How often do you use Flash for interaction development? How familiar are you with JavaScript?

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 2 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

Ah, so that’s who you are!

Thanks! This session should be targeted to most of you: •We’ll look at what you can get by with if working in copy/paste mode •We’ll also see the potential for those writing their own code by reusing someone else’s

What’s So Cool About Flash?

(And “not” about JavaScript?)

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 3 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

Flash is cool!

Not intending to bash Flash Flash still has its place Ultimate question: Which tool is the best one for the job? Know your tools!

So, why Flash?

What have we traditionally always assumed we needed to use Flash to accomplish? What does Flash do well?

Drop some ideas in the chat pod!

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 4 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

So, why Flash?

Animations Drag-n-drop Visual effects (drop shadows, bevels, etc.) User interface widgets (e.g., sliders, tree views, accordions, tab navigation, etc.) “Medium-term storage” (e.g., SharedObjects)

Well, why not Flash?

If Flash is so great, why don’t we use it all the time? What are the limitations/expenses of using Flash?

Drop some ideas in the chat pod!

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 5 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

Well, why not Flash?

Plug-in compatibility Requires proficiency with Flash environment In a compartmentalized setup, causes lags in the process The feeling of "overkill" in some situations Some functionality may already exist in JavaScript

What good is JavaScript, anyway?

“DHTML” left bad tastes of JavaScript Today, much better 2006: “The year of the JavaScript” A lot of attention focused on this area; an area of rapid growth and development

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 6 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

The JavaScript Framework Solution

Really, just the shiny new screwdriver in the toolkit

JavaScript to the (partial) rescue

JavaScript support in browsers is strong JavaScript is capable of a lot Problem: It still takes a lot of effort to make the cool things we like happen each time Solution: a JavaScript framework to channel our force into the solution

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 7 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

What is a JavaScript framework?

A framework is a screwdriver Or, via Wikipedia: Frameworks are designed with the intent of facilitating software development, by allowing designers and programmers to spend more time on meeting software requirements rather than dealing with the more tedious low-level details of providing a working system.

You said there were how many new types of screwdrivers now?

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 8 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

Lemme see what you’re talking about!

A brief “Web field trip”…

How do I know which one to pick?

Library file size Learning curve Documentation/support Browser compatibility Comfort with JavaScript in general Style or philosophy – pick what works best with how your brain works

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 9 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

File Learning Doc. / Browser size curve support compat. Dojo 127 Very high Weak IE5.5, FF1.0, Sf2.0, Op8.5 kb+ Prototype+ 54 Moderate Excellent IE6, FF1.0, Sf1.2, Op7.5 Scriptaculous kb+ Mochikit 90 Moderate Moderate IE6, FF1.0, Sf2.0, Op8.5 kb+ Yahoo! UI 2 Easy Excellent IE5.5, FF1.0, Sf1.3, Op8.5 kb+

Pros and cons of each

Dojo Mochikit •Most powerful •Well designed •Support: IBM, AOL, Sun •Python roots •Big learning curve •Poorly documented

Prototype YUI •Well documented •Easy to learn •Lots of add-on libraries •Carries Yahoo!’s name •Philosophy might •Least features conflict

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 10 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

A Closer Look: Yahoo! User Interface Library Or YUI, in acronym-ville

Reviewing what YUI can do for us

Another Web “field trip” to see more YUI examples…

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 11 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

1. Requirements 2. Licensing 3. Acquisition 4. Creation Getting our hands dirty 5. Testing

1. A sample activity requirement 2. Licensing 3. Acquiring the code 4. Create the activity 5. Test and go!

1. Requirements 2. Licensing 3. Acquisition 4. Creation 1. Activity requirements 5. Testing

Show an overhead view of a football field Show players in position in the image Describe the situation Have the learner drag an icon of an official to where they should stand on the field Snap the icon to the correct location when close enough

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 12 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

1. Requirements 2. Licensing 3. Acquisition 4. Creation 2. Licensing – Is it legit? 5. Testing

BSD License - http://developer.yahoo.com/yui/license.txt Basically: •Free to modify •Free to redistribute (with your courses) •“As is” software – no warranties •Just keep the copyright and disclaimer intact •Yahoo! doesn’t endorse your product

1. Requirements 2. Licensing 3. Acquisition 4. Creation 3. Acquiring the code 5. Testing

http://sourceforge.net/projects/yui 3.9MB zip file contains: •README – version notes and file organization •build/ - JS code, both commented and mini •docs/ - full documentation of each JS file •examples/ - lots of example file

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 13 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

1. Requirements 2. Licensing 3. Acquisition 4. Creation 4. Create the activity 5. Testing

Off to Dreamweaver we go…

1. Requirements 2. Licensing 3. Acquisition 4. Creation 5. Test and go! 5. Testing

http://www.asep.com/courses/test/jasonm/ JSImprovements/frameworks/yui/olf0806/d nd_final.htm

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 14 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

A Second Activity, If Time Allows…

Show a baseball field Show official in position in the image Describe the situation Have the learner watch an animation of the path that official should take in that situation http://www.asep.com/courses/test/jasonm /JSImprovements/frameworks/yui/olf0806 /anim_final.htm

Summary

Or, before you pack up and go

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 15 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

Highlights

Use the right tool for the job JavaScript is becoming a tool worthy of attention Worked through example or two using YUI

Resources

http://www.asep.com/courses/test/jasonm/ JSImprovements/frameworks/yui/olf0806/

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 16 Mock, Human Kinetics, Inc. Designing & Developing eLearning Interactions August 10 & 11, 2006

Questions?

Ideally, answers will follow…

THANK YOU!!!

Jason Mock Human Kinetics, Inc. [email protected]

Session 501 – Achieving Flash-like Interactions without Flash, Jason Page 17 Mock, Human Kinetics, Inc.