Bringing Style to Flash Camp Chicago

Just last week I had the distinct honor of speaking at Flash Camp Chicago, the annual conference hosted by the Illinois Technology Association. Adobe Flash Camp events are great because they are a single day where the community brings together denizens of the Adobe world such as James Ward, Jeff Tapper, Kevin Schmidt, Michael Labriola, and fledgling member Ben Schmidtke. The opportunity to network with the top contenders in the world of Rich Internet Applications (RIAs) makes this style of conference one of my absolute favorites.

Flash Camp Chicago served as the maiden voyage for my talk entitled “Building RIAs with Style,” which I’ll continue to present and refine throughout 2010. I started out the talk by introducing lower level concepts about web graphics for developers, continued by exploring how some popular RIA frameworks handle styling, and wrapped up by comparing two important workflow tools—Adobe Flash Catalyst and Microsoft Expression Blend—to demonstrate how the different platforms operate.

My goal with this talk was to provide rookies with a basis for understanding graphic assets, how to apply styles in RIA development, and the importance of styling as well as provide more advanced tricks of the trade for senior developers.

I always enjoy my trips to Chicago and would like to thank Roundarch for sponsoring my talk and the Flash Camp Chicago organizers for inviting me back to speak this year.

Adam Flater is a Technical Architect and Evangelist at Roundarch and is also the founder of the Merapi Project. For more information on Adam Flater, follow @adamflater on Twitter or visit http://adamflater.net.

Roundarch Technical Architect and Evangelist Adam Flater will be speaking at Flash Camp on February 26, 2010 at the Illinois Technology Association (200 S. Wacker Drive, 15th Floor) in Chicago. He will be presenting “Building RIAs with Style” at 2:00pm which will provide a primer to developers on graphic assets, workflow, and applying styles in RIA development. He will compare and contrast some of the popular RIA platforms and tools for styling applications.

For tickets and more information visit http://flashcampchicago2010.eventbrite.com/

HTML (”hypertext markup language”) is the core language that powers the World Wide Web. Any server side technology must in the end, display HTML in order for web browsers to be able to render web pages. HTML 5 is the latest revision of the HTML spec that is slowly being adopted by the different major browsers. There are some pretty exciting additions to the HTML spec and I wanted to go over a few and what they potentially mean for the future of the web.

New Tags
Structure Tags
New additions to the HTML markup family include tags like header, nav, article, section, and footer. From the visual perspective these probably won’t have a huge impact as users are unlikely to see the difference between pages built on the old DIV based layout and the new structure tags. However from the search engine perspective, these tags will make it easier for crawlers to distinguish between what’s the meat of the content and what is just fluff. Current DIV based layouts structure the content semantically through unique IDs and classes. We give these DIVs IDs and classnames like header, footer, post, etc in an attempt to classify and organize the markup. However these are abstract concepts from the browser’s perspective. If they wanted, there’s nothing stopping the web developer from naming the header something arcane like foobar or even call the footer something like nav_sub2. As you can imagine then, search engines and web crawlers must develop sophisticated algorithms to detect patterns in order to infer what’s a header or footer. However with these additions, the developer must clearly demarcate what section each HTML piece is, thus taking the guesswork out of the search engine. This has the benefit of potentially improving search engine results.

Canvas Tag
The new Canvas tag is exactly what is says it is - a blank canvas with infinite possibilities. Flash developers used to drawing pixels on the MovieClip object will immediately be able to relate. Essentially one would use the canvas tag to render any number of things from manipulated images, animation, or even 3D imagery. With the canvas tag, you could build applications such as a paint program, or a 3D slideshow without having to rely on Flash. As usage of the Canvas tag increases, you’ll see more animation and renderings that were typically done in Flash re-envisioned completely in HTML5 and Javascript. The drawback however is that whereas Flash is build once run everywhere that supports Flash, an HTML 5 solution would leave you vulnerable to browser compatibility issues.

Here’s a video of a Coverflow implementaion done purely in JS + the new Canvas tag

AV Tags
The Audio and Video tags promise to simplify the mess that is currently the state of the art when embedding video. Whereas before you had either the <embed> or the <object> tag depending on what browser you are using or maybe you just turned to a javascript based wrapper to handle your media needs, you can have a very simple video or audio tag. With the ubiquity of the Flash platform as a video player, I’m not sure this is going to make much difference. Sure this is a lot easier, but we really could have used this 10 years ago.

<video width="640" height="360" src="/demo/google_main.mp4?2"
autobuffer></video>

Web Worker
Think of Web Workers as threads - any jobs that can be computationally expensive and intensive. In the current model, a complex task on a webpage might bring the interactivity of the page to a crawl while it’s busy number crunching. A worker thread could be spawned off to do some intense client side crunching without bogging down the page. This is even more relevant in today’s time when so much is being offloaded to the front end UI with javascript libraries. A good candidate for web workers would be a browser based excel spreadsheet like Google Docs where number crunching on the client site is potentially very slow.

<script>
   var worker = new Worker('worker.js');
   worker.onmessage = function (event) {
     document.getElementById('result').textContent = event.data;
   };
</script>

Application cache
The Application cache allows web applications to function offline when it’s not connected to the Internet. Google Gears is an implementation of this. All the developer has to do is provide a manifest of files that the web application needs in order to function offline. I see this as a really great feature to make web apps more robust. With most webapps, if you lose connection, you most certainly lose whatever you were working on. I can see more and more applications handling loss of network connectivity more gracefully by taking advantage of the application cache.

All you need is this code snippet and a manifest file which lists all the files the application needs.

<html manifest="foobar.manifest">

Geolocation
The Geolocation API provides a scripting interface that lets the developer determine the user’s location (based on GPS or inferred from IP, Wifi, etc). The user must however allow the application to access that information. Although geolocation has been inferred by IP for a while now on the backend, we’re seeing an increase of functionality performed on the front end with AJAX and this is no different.

navigator.geolocation.getCurrentPosition(function(position));

Should I be using HTML5 tags?
Here’s a table outlining features I played around with in the latest browsers from Google, Apple and Mozilla.

* only certain formats
** sort of worked

As you can see, coverage on some of the new HTML 5 features is pretty good on Firefox and Safari. However with the audio and video tags, I did find that Firefox supports the open source codex Ogg Vorbis while Safari’s supports all the formats that Quicktime supports, naturally. So if you are looking to use some of the new HTML 5 features now, coverage on all the browsers is sketchy at best except for the Canvas tag. If you are trying to do video or audio, you’d best stick to Flash. I think where HTML5 is useful for the here and now is in the mobile sector. Many new mobile OSes including iPhone OS 3.0 and webOS have started supporting some of the HTML 5 features and since you would be developing platform specific apps, compatiblity issues are non issues.

On Thursday June 18th, a Chicago RIA community including the Chicago Flex Users Group and the Chicago Adobe Users Group welcomed the Adobe User Group World Tour that came to demo the latest version of Flex 4. Adobe Platform Evangelist Kevin Hoyt presented Flash Catalyst, Adobe’s new interaction design tool geared towards rapid creation of rich internet applications, Flex 4, the latest version of Flex, and Flash Builder, Adobe’s new offering for creating RIAs. Flash Catalyst was presented at Ascend training in the afternoon while Flex 4 and Flash builder were demoed at the Roundarch Chicago office in the evening.

Here’s a video of the Flex 4 Flash Builder presentation at Roundarch.

Flash In The Can

Preface:
Although he may have stopped reminding me Pek (Pongpaet) has been wanting me to share my experience at Flash In The Can (FITC) Toronto, well I told him I would, but I’ve been stalling since I’ve had something in the works with Brendan Lee from Ribbit… but let me regress: (Events not in Chronological Order)
@the Keynote Richard Galvan from Adobe said all the presentations from the conference would be up on tv.adobe.com… I’m still waiting. FITC seems they will also put up video’s of all the talks on their site, which I’m guessing they’re still under production, so I eagerly await.

Reaching Out And Touching Someone:
On the second day of the conference, April 27th, I got a call from Brendan at around 11am, at this point I knew him for close to 24 hours, he tells me to meet him by the Ribbit booth, he needs some help with something in Papervision3D. Through my excitement I step out of Ralph Hauwert’s “Professionally Pushing Pixels” (sorry Ralph), and I find Brendan hunched over his MacBook Pro, intently typing away, takes a quick glance at me, then just tells me he’s trying to finish a demo so we can put it into Chuck’s (Charles Freedman) presentation at 4pm. Here begins our adventure in XP (Extreme Programming).

I look over his shoulder and he show’s me what he’s working with. Its a few blocks of Augmented Reality(AR) code in Flex Builder. Tells me the basic idea, and I’m immediately psyched! At this point I’m sitting on my knees on the conference floor, still looking over his shoulder catching any errors, while at the same time suggesting the best route of attack from my perspective. At some point we switch I start coding away, and he takes my role. We continue going; doing our floor to seat swap for about an hour, completely oblivious to the hordes of people passing by as they move from one session to the next. We hit up the hotel’s lobby restaurant/bar for lunch, and continue our adventures in XP as we inhale Bison Burgers (which were delicious). Unluckily we didn’t get to finish in time for Chuck’s presentation; but during Chuck’s presentation he mentioned Roundarch with his Merapi/Ribbit Demo, and gave many thanks to Adam Flater for helping him out with the Merapi code for his demo. Brendan and I decided we would come back to our demo at a later time.

(If you want to get to the butter of my story just hop over to Ribbit’s Blog)

The third and final day of the conference, Brendan walked up to me towards the end of the day and asked me if I wanted to finish polishing off the application, I of course said yes. We went up the executive lounge on the top floor of the Hilton, and having an amazing view of city, accompanied by an equally amazing sunset, we began to code. The whole time while hanging out with Brendan he excitedly spoke of his wife and kids, and said I should meet them, they’re super-cool. I figured it would be a great chance for me to get out to the west coast and catch some California sun, but technology one-upped me. She sent him a video-chat invitation on Skype. I found this truly amazing, technology once again connecting people in completely different corners of the world. I had seriously been considering flying out to the California (and still am) just so I could meet his family, and hang out with them, but I got to meet them online first. It was by chance, but getting to see his kids climb over his wife, and poke at the screen at this stranger standing next to their father was truly amazing. I said hello, and apologized to Brendan’s wife, Christine, for taking up all of Brendan’s time trying to pump out this idea. I walked away for some time so he could take some time with his Family. We took a break and had dinner after.

After dinner we met Chris Allen |CEO/Founder of|  Infrared 5 and another friend Marsy Shattuck from Discovery Channel, and they wondered if we were going to the final FITC party that night? I had full intentions on going, Brendan I think was probably partied out, but I told them I would meet them there. Some time later Brendan and I were doing our little experiment with XP up in my hotel room, he was on his laptop, I was on mine both trying to solve different issues with the application; I looked at my watch and came to realize it was nearly 2AM, we’d spent the entire night coding! While everyone partied we coded, talk about dedication. We still didn’t get everything done that evening, so we figured it’d be best if we just collaborated on the project once we were back at our respective homes.

A week later we were back at it, this time using GotoMeeting. He was at home in San Francisco, I was in my apartment here in Chicago. We logged onto Goto, and started screen sharing, eventually taking over each other’s screens and coding while one of us took a break either to just watch, or in Brendan’s case got up and played with his kids. This experience was extraordinary, I can’t say that before this I’ve ever done XP with someone who wasn’t even in the same city as I was, but it was a fantastic learning experience. You can see the results here. Because of all of our efforts Brendan asked if I wanted to speak with him at a few upcoming conferences: 1. Flash on Tap (Boston) (Not confirmed, but in the works) 2: CAT(Creativity and Technology - New York)

Ribbit

Meeting People and Networking:
I met A LOT of people while at FITC! I found this to be one of the greatest benefits of the conference, put me in a room with a wide array of creative and intelligent people and I’m going to start talking. When I arrived at the Hilton on Saturday, April 25th, there were some workshops going on, the one that was of particular interest to me was one being held by Lee Fraser and Louis Marcoux of Autodesk. Louis is an expert in 3D Studio Max, while Lee is a Maya expert. I had a great chat with both of them about the 3D space in relation to the web, and more specifically with Flash. I was a little more drawn to Lee since my recent involvement with AwayBuilder and Away3D. AwayBuilder is an AS3 library for importing scene’s directly from Maya, then rendered in Flash through the Away3D Engine. The next day, I found Lee at his booth and got to show him a few more examples of what I meant, and gave him a few reason’s why Autodesk might want to jump into the Away3D ocean (although they already have wet their feet with Project Dragonfly).  In return for talking code to Lee, he showed me some REALLY cool features of Maya, I had no idea I could be using. He really simplified Maya for me. Thanks Lee!

I then met with Michael Plank, FDT evangelist for PowerFlasher. I was meeting Michael for the first time, and we sat down and talked code, best practices and FDT for about an hour, or until the battery on my laptop died. I was meeting Michael since he would be giving Roundarch a presentation about FDT on Monday, May 4th. The really cool thing about this presentation is that he would be doing it from Germany, over GotoMeeting, talk about global telecommunications. (Fast Forward>>)The presentation was received very well, and although I’m already a religious user of FDT, we had a few conversions from the Flex world.

Apart from that there’s a lot of people who I want to write equally as lengthy descriptions of our experiences but I fear this blog post is getting a tad bit long. So not to belittle their importance I’m just gonna do it laundry list style:

• Chris Allen, CEO of Infrared 5. I got to hang out quite a bit with Chris, and although I had previously met him (last year @Flashbelt), I got to know him much better this time around.
• Steven Sachs, creator of Gaia Framework for Flash. If you’re a Flash Developer and you don’t know what Gaia is, then well go learn about it. I’ve been utilizing it now for over 8 months, and it’s a thing of beauty.
• Jerry Chabolla CTO/Co-Founder of Influxis
• Mike Hansen of Moosesyrup.com. He’s an awesome designer.
• Chuck Freedman of Ribbit | Blog- Get Microphone
• R Blank of Rich Media Institute(RMI)

I’m sure I missed a few people, not on purpose I swear! I definitely have to thank the organizers of FITC for putting on an amazing event. I’d like to thank all of the Speakers, even the ones I didn’t get to see, I know my post doesn’t say much about any of the talks, but I’m hoping the video’s for the conference come up, and you don’t have to get my second hand account; there were a lot of talks I would’ve loved to see and can’t wait to see when they’re finally online. Here’s a few tiny snapshots, see you again next year?

The second Riapalooza will be held on Friday May 8th at the Illinois Technology Association (200 S Wacker 15th flr) from 9AM-5PM. It’s an unconference gathering of RIA (that’s Rich Internet Applications for you not in the know) professionals who are passionate about what they do.

There will be 6 exciting talks as well as ample opportunity to network. Here are the panel titles:

• RIAs Beyond The Mouse & Keyboard
• Top 10 Questions About RIA That You Never Had The Courage To Ask
• RIA Problems You Never Knew Existed
• Building Interactive Applications using UX Principles
• Empowering the Client-Side: Consuming Internet Services in RIA
• Social Media, RIA and Sustainability: A Website Development Case Study

Roundarch’s Adam Flater and Pek Pongpaet will be giving the talk on RIA’s Beyond the Mouse & Keyboard. This talk will be the last talk at the end of the day so we’ll keep it short, fun and sweet so people can get to the beer at 5. Without giving away too much, we’ll talk about how RIAs and computer interaction in general is moving away from the keyboard and mouse interface as can be seen by the success of the iPhone and Nintendo Wii.

Here’s a couple of sneak peek videos of some of the stuff you’ll see at our talk.

Flash + Merapi + Lego Mindstorm =

Flash + Papervision3D + Augmented Reality Toolkit + Twitter =

So be sure to join us as we demo some really cool stuff.

I love websites that really engage you. Kathy Sierra, a SXSWi regular, talks about Creating Passionate Users and how you can do that by making them feel like rockstars. The JAG Black jeans website made me feel like a rockstar photographer for a brief 5 minutes and here’s how they did it.

1.The homepage lets you choose between a male and a female model. I picked Marian.

2. A brief instruction screen kicks off the photo shoot right away. Shooting is as simple as moving the camera with your mouse and clicking.

3. I create a magazine layout based on all the photos I took of Marian.

4. A personalized photo book is created ready to be shared with all my friends. Notice the personalized icon on the top left of the left page. You can flip through the 3D magazine like a real book. The camera is loose and enhances the sense of realism further engaging you. (For you RIA geeks, this was probably done using Papervision or Away3D).

What made this microsite successful was that it made me feel accomplished. In about 3 minutes (which is about all the attention span I have nowadays), I went from picking a model, doing a photo shoot, and creating a magazine layout. I was the decision maker at every key point. And before I even knew what hit me, I had infected all my friends with this viral campaign by sharing my custom photo book with them and repeating the cycle all over again. Check out the website here.

If you haven’t seen Kathy Sierra’s talk “Creating Passionate Users”, you should check it out.

Paul Annett’s panel “Oooh, That’s Clever! (Unnatural Experiments in Web Design)” was one of the few that stood out for me. Not only was his content compelling, but he’s also a great presenter and story teller. His years of experience as an amateur magician no doubt contributed to his skills on stage. The talk was a showcase of websites that are doing some very clever CSS/Flash tricks to create more engaging user experiences.

You might look at some of his examples and go “OK, that’s pretty neat, but this is more like an easter egg and is not really essential to the overall goal of the site.” To put it in terms of ROI and business value that a client can understand, you need only look at what his company ClearLeft has done for their product website Silverback. Back when the site first launched, it was a only splash screen for an upcoming product with very little info about the product itself. However, detail oriented web designers noticed that when you resized the browser on the Silverback website, the vines in the background had a parallax effect creating the feeling of 3D. In a short amount of time, designers were blogging and tweeting about what essentially amounted to nothing more than an easter egg for a website, resulting in tremendous traffic, to the tune of over 100,000 hits. To top that off, a very large percentage of that traffic signed up to hear more about this phantom product without even knowing what the product was about, solely because of this little effect. Several other sites now implement a similar effect hoping for similar results. Small little hooks can have a tremendous amount on the bottom line.

Here are some of the examples that stood out:

The dConstruct User Experience Conference website has a secret navigation up top that lets you see the progression of the site from sketches to final product through clever use of CSS.

Kyan, a web design and development agency, has a small worm on the bottom of their website. Clicking on it reveals a previously hidden underground secret Kyan labs.

I thought these next two examples did a really good job of tying together the cleverness with the core experience of the product.

The Wario Land Youtube page slowly collapses as Wario causes more and more damage. This is a very ingenous use of overlaying Flash. You think you’ve landed on an ordinary Youtube page, but as the video plays, elements of the Youtube page start to crumble and fall until all you are left with is a large pile of HTML debris at the bottom of your page.

The iPod touch ad on the Yahoo Games page gets clever by tilting the elements on the website as if they were affected by the iPod touch.

Engaging users doesn’t have to be big and flashy. A little hidden gem can go a long way drawing in people. Often times, you just need people to step through the door.

I am headed to San Jose on Sunday for 3 days of giving talks, learning, talking, discussing, poking, prodding and representing Roundarch at the 2008 AJAXWorld RIA Conference.  I’ve been anticipating this event for quite some time, as the theme for this event grabbed my interest when SYS-CON Media first announced it: “2008: Decision Year for RIAs”.

As someone who has been actively involved in the strategy, design and development of Rich Client Interfaces for the Web since the mid-90’s, and who’s been an advocate for better user experience-enabling technology my whole career, I was honored to have been accepted as a speaker at this event.

Not only do I really like the people that work at SYS-CON (they really are nice, smart, fun and passionate about what they do), I know this event draws people from across industries, and more importantly… across the spectrum of Web and software technologies and corporate camps.

We really are at a really important time in the theoretical timeline of what the industry refers to as “RIAs”. To me this acronym refers to “Rich Internet Applications”, and started being used in 2001 or so with the release of Adobe’s “Flash MX” development software. Flash MX changed the game for interactive agencies and software development companies everywhere, as it was the first ubiquitous and stable platform for developing data-driven Web interfaces that didn’t “feel” like static Web pages.

While no first incarnation is perfect, in my mind, Flash MX was a game changer. The follow up to this was Macromedia creating the intial Flex framework for RIA development, Adobe buying Macromedia, Microsoft .NET, AJAX & Advanced HTML usage and more sophisticated browsers (and browser alternatives). We’ve come a LONG way since I started using “The Futuresplash Animator” in 1996.

AJAXWorld Talk

I will be giving my first of several talks at the conference on the first morning (Monday, Oct. 20th) right after the kick-off keynote. Because of the time and place of this presentation, I should have a pretty large audience, which is terribly exciting and fun for me because I think my presentation will be a nice introduction to the overall theme of the conference, and I a hopeful that it will leave the audience with a bit of energy to explore what the conference has to offer.

My talk description is something like:
Take a sneak peek at some of the concepts that have surfaced with Web 2.0 and learn how they appear to be evolving into the next wave of Rich Internet Applications. From 3-D interfaces and data visualization to whole new models of interaction, this session will provide you with real-world examples of how Web applications are moving towards the future.

I came up with that a while back, and since then, my presentation has expanded a bit. Doesn’t that always happen?

I plan to take the audience on a contextual journey of Rich Internet Application technology as well as other technologies related to user experience. This journey will lay out the past, present and future of our quest to enable ourselves to be able to design what we dream, and build what we design… the way we want it, not the way that we had to due to the variety limitations we’ve been faced with.