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.

For the past year, a team of 13 Roundarchers have worked to design, develop and launch StrataLogica™ which is a web-based learning application, built for our client NYSTROM Herff Jones Education Division, that delivers map and atlas content in an engaging 3D, interactive environment built on the Google Earth API.  As discussed in our recent blog post on the Google Code blog, we faced some interesting challenges during this project being one of the first enterprise scale applications to use the Google Earth Plug-in and its JavaScript API as its foundation.

Early on in the project, our team was able to solve the core challenges of being able to wrap Nystrom’s 2D map content on the 3D earth in a way that preserved the image quality of the their print products and developing a framework for managing editorial content required to be shown on the earth.  Here I will discuss the additional challenges we faced in creating a compelling and immersive educational experience while working within the framework required by the Google Earth API.

Our experience designers were faced with several challenges. Key among them were providing maximum space for the content, large targets for users of touch screen devices, and access to a set of tools to mark up the maps.  The graphics also needed to appeal to the diverse target market: K-12 students and their teachers.

The solution included opening a chromeless browser window and interface components that open over the map to access options and tools that close when not needed.

The user interface is written in JavaScript and the gap between user input and the earth is bridged by the Google Earth JavaScript API.  Developers were faced with the hurdles of being able to track and provide users control over the layers of Nystrom content, provide an interface to Google layers, and create tools the user could use to add content to the map that could be saved and restored.

Users can be licensed to use one or more map series. These include labeled and unlabeled base maps, additional thematic maps or related maps, views, hotspots, and place marks. We chose to dynamically generate a menu called the Map Chooser, the contents of which are supplied by a JavaScript object created by server-side Java code. The specific elements are based on the user’s access rights and available CMS content.  When the user selects a map series, the KMLs for the Superoverlays and other content are loaded into the plug-in using the Google Earth API. A reference to each layer loaded is retained so its visibility can be toggled or it can be unloaded.

At the bottom of the page is a tool bar that expands up when clicked to reveal a set of tool icons. One of these is ‘Settings’ which lists Google Layers that can be turned on or off. When the layer’s checkbox is changed, the event handler determines the state and layer to be changed and then passes that request to the Google Earth API. A JavaScript table of rules is used to preset the settings appropriately for the map being displayed.

The tool bar also has a selection of tools for marking the map, replicating and extending the experience with the traditional educational map materials. A special KML is loaded to hold user-created markings.  Users select a tool for the type of marks they want to make; for example, draw lines, place a map symbol, or add a place mark with a pop-up balloon. Mouse event handlers attached to plug-in components return the geo-location of mouse clicks to the JavaScript code where KML strings are composed and then loaded into the plug-in after running the KML string through the Google Earth API’s parseKML method.

The team has just launched a new version of StrataLogica which allows teachers and students to collaborate in real-time on assignments and group projects and create dynamic presentations which can be played back in a movie-like sequence.  Greg Knapowski and I are in San Francisco this week showing off the new release at the Google I/O Developers conference in the Sandbox with our clients from Nystrom.  Look for more blog posts when we return.

Don Rescigno, the director of marketing for NYSTROM Herff Jones Education, has written a post on the Official Google Enterprise Blog about Nystrom’s partnership with Roundarch and how together we are changing the face of what today’s classrooms look like with the creation of StrataLogica.

StrataLogica will be featured at Google I/O May19-20 in San Francisco.

With the introduction of Chrome OS, it’s tempting to criticize Google for what seems like a half-baked product. Compared to OS X, Windows 7, or even Google’s own Android, there is a lot lacking. But there are interesting ideas, even if they are not the first to propose them.

Where they’re not pushing the envelope enough is the interface. It’s a little disappointing that when they thought of making a web-based PC, they turned it into a web browser-based PC. There must be a better way to enable what they’re doing besides putting browser tabs at the top of the screen and an address bar underneath. It would be like Apple being unable to think outside their desktop OS and releasing the first iPhone with an interface that used a scaled down menubar.

Where Google is pushing the envelope too much is the entire rest of the OS. It’s interesting in theory, but not yet practical. It’s a good thing they are starting down this road so that hopefully in 5 years it will have developed into something that will be useful. Currently, there’s simply not enough infrastructure in place to make it a successful experience.

Where is your private file space in the cloud? When you buy a computer, included by default with any and all computers is space to store your stuff. You can share things if you want, but that’s something you opt-in to. If you buy a ChromeOS device, you had better be prepared to spend a lot of time getting up to speed on the privacy controls of each service you use, because private spaces in the cloud are hard to come by. Or you better know about dropbox/sugarsync/whatever and be prepared to pay an annual subscription to rent some online space. Simply put, the vast majority of people are not yet at this point.

Internet access isn’t where it needs to be either. HTML5 is a great starting point for offline connectivity, but so far it’s only a starting point. Will ChromeOS store your entire Gmail archive in its offline database by default, so if you’re working at a cafe without internet, you can reference an email you sent 3 months ago? Not yet.

Thinking about how ChromeOS is being developed and presented, one of the striking differences between Google and Apple is that Apple almost never* releases something before all the pieces are in place that are required to make it completely useful. Apple didn’t make the iPod when MP3 technology first appeared, they waited until they had music management software with an interface that made it easy to fill up an MP3 player AND enough storage could be packed into a small enough space that people could put it in their pockets. Whether Apple will successfully compete in the cloud is to be seen, but you can bet that they won’t release something along the lines of ChromeOS until they can craft an experience that fits seamlessly with the way people live their lives.

And so this is the key to evaluating ChromeOS. It’s unfair to look at it as a finished product to be stacked up against whatever Apple and Microsoft have currently released. For all its flaws, it’s obvious that it isn’t a product built for now. It’s a starting point for the future. Google’s description of using it as a “companion PC” is another way of saying “this isn’t ready for prime-time”. It’s a prediction of where computing will be 5-10 years from now.

Does ChromeOS have more potential than the many other thin client projects that have come and gone every several years? Google’s deep pockets and long gaze are cause enough to pay attention. Watching its evolution will no doubt be informative.

* Apple TV = the reason for the “almost” in “almost never”

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.