Last month we attended the third annual Google I/O 2010 Conference. The conference, held at the Moscone West Center in San Francisco, CA, was the largest yet with over 5000 attendees, 90 breakout sessions, and 180 demonstrations in the Sandbox area.

NYSTROM Herff Jones Education Division, Roundarch’s client, was invited to show StrataLogica in the Sandbox area. We were on hand to answer technical question while Don Rescigno demonstrated StrataLogica to the attendees. We are proud to say that StrataLogica was well received by the attendees and praised by Google’s developers.

The daily keynotes, breakout sessions and Sandbox demonstrations were interesting. However, the real benefit was two days of rubbing shoulders with Google developers and developers who use or are interested in using Google products—swapping stories, ideas, and generally talking shop.

The first day’s Keynote fired up the audience.

The main theme was open and inclusive technologies with unveiled shots at Apple for their decision to exclude Flash on the iPhone. Google made a commitment to HTML5 (and CSS3), Wave is opened and in Google Apps, Google Web Tools supports Spring. Also, Google announced Storage for developers and the Chrome Web Store: a single place to find Web apps.

HTML5 helps provide a desktop app experience to user’s of RIA and is supported by every major browser. (IE9 will support HTML5.) CSS3 transitions and font embedding were mentioned in passing. Google Fonts API will generate the CSS needed to add Google hosted fonts to a Web page using the @font-face CSS tag.

The HTML5 specification opens up access to the client system. There is still some foot dragging on access to system devices and areas of the specification that need to be clarified, but when available would make projects like Motorola’s easier. An example use was dragging and dropping email attachments where a file on the local PC can be dragged into the Web application.

With HTML5, came the announcement of a new video format named WebM. This is an open sourced format that runs in the HTML5 video tag and can be supported in other media players. Webm is based on Vorbis for the audio and VP8, by On2—recently acquired by Google—for the video.

Adobe announced HTML5 support in Dreamweaver and WebM support in Flash. Dreamweaver will have three different size preview panels so the developer can see how the Web page looks in a traditional browser, a mobile phone portrait orientation, and a mobile phone in landscape orientation.

There now is a growing need to create designs that are more fluid and can transform themselves to different screen formats.  The Sports Illustrated editor gave an impressive demonstration of a Web edition of the magazine using HTML5.

There is a lot of promise in the emerging HTML5/CSS3 standard to provide a rich interactive user experience. This is especially true in the mobile market where Apple and Google are already implementing HTML5.  GWT, Google Web Tools, was mentioned mostly for the new performance tracking tools and its tight integration with The Spring Framework.  GWT generates cross-browser compliant HTML5, CSS, and JavaScript from Java, allowing developers to rapidly create AJAX enabled Web apps with little client side programming.

Whereas Wednesday’s Keynote was all about HTML 5 and Video, Thursday’s Keynote was all about Android and Google TV.

Starting with the announcement of Android 2.2, dubbed Froyo (FROzen YOgurt), and then proceeding on to demonstrate a wealth of new features.

Froyo’s JavaScript engine, taken directly from Chrome, includes a Just-In-Time compiler improving performance by up to 500%.  Also demonstrated were improved application support features including installing to removable memory for portability between devices (if the app allows) and in the event of an application crash, Froyo can upload a stack trace to the developer’s account to assist with fixing bugs that have made it into the wild.  Many enhancements simplifying device to device and device to web communications have been added also.  In addition, keeping with Google’s focus on advertising, several new provider agnostic ad placement mechanisms have been added.

Following the Android demonstration, Google TV was announced.   Google’s goal is for the web to change TV as it changed computers and mobile devices previously.  I think the most important take away from the presentation, is that Google TV is:

1. An open specification that manufacturers can use to assure interoperability between their TV devices.
2. A hardware specification for those devices to ensure compatibility with Google TV.
3. An Android & Chrome based platform that can be deploy to any device that complies with the hardware specification.

The most compelling feature of Google TV is eliminating the concept of the Input Source.  Instead of changing inputs between Cable, Internet, DVD or Blue Ray and then using the available search features (if any), Google TV would instead issue a user’s search across all devices and the results will be displayed integrated together. The correct input source is then streamed according to the user’s choice.

Being Android, developers will be able to create/install applications. One interesting example would be to use existing services to translate closed caption feeds into languages that are not supported.  With all the improved device to device communications of Android, any Android device will be able to interface with any Google TV device.  Obvious examples: programming your DVR from anywhere with your phone or using it as the remote.  A more advance app would be watching recorded video from any Android device anywhere.

The NBA also demoed an application based around their content that demonstrated how a normal broadcast can be enriched with related content.  This leads to the implication that companies should consider including a TV presence in addition to Web and Mobile presences.

We think some of the most interesting insights that were very apparent at the conference are:

1. Adobe is on board with HTML 5 and WebM.  This makes HTML vs. Flash discussions somewhat academic or irrelevant.
2. Google clearly has Apple/iPhone in their sights.  There were quite a few shots directed at Steve Jobs in addition to numerous comments about his company and its devices.
3. Google has affirmed its commitment to open and inclusive standards.  They will embrace these standards where they are established and spearhead their creation and adoption where they do not.

When Apple announced the iPad I was excited and let down at the same time.  Finally they released the mythical Apple Tablet.  It took me a few days to look past the fact that on the outside the iPad appeared to be a giant iPhone/iPod Touch.  I consider the iPad a Trojan horse in the computer world.  Apple is ushering in the age of software over technology, and it is easy to see how the Web, Widgets, and RIAs (Rich Internet Applications) have inspired its apps.  With Apple’s refusal to include the Flash Player as a part of its web browsing experience a rift has grown in the Flash community.  I have always been a big believer that I am a developer over a Flash Developer and I see the iPad as a new platform to grow into.  I wrote a post that outlined a few of my thoughts on why the iPad will change the way we view RIAs and recently it was published in Flash & Flex Developer’s Magazine.  It is my pleasure to share it with you here.

Also, if you do not get a free copy of Flash & Flex Developer’s Magazine I suggest you sign up for it.  It is free and there are lots of good articles in it so how can you go wrong?

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.

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)

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.