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 2 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? 4 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 5 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! 7 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! 8 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) 9 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! 10 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 11 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 12 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 14 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. 15 You said there were how many new types of screwdrivers now? 16 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”… 17 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 18 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+ 19 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 20 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… 22 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! 23 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 24 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 25 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 26 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… 27 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 28 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 29 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 31 Resources http://www.asep.com/courses/test/jasonm/ JSImprovements/frameworks/yui/olf0806/ 32 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. .