How’d they do it? Deconstructing Google Cultural Institute

This morning I stumbled across what appeared to be a sponsored tweet from Google.

Discover 42 new online historical exhibits telling the stories of the 20th century at google.com/culturalinstit…. Details: goo.gl/LHMOX

I like history so I followed the link.  Am I glad I did. What I found was an amazingly well done site full of enriching content.  Maybe more importantly, considering my background, it was cool.  Within minutes I was browsing the site on the Mac, the iPad, and finally on my Galaxy III (Android OS).  The site delivered a consistent experience on each device.

As an eLearning developer looking for the best tools and practices for both traditional and mobile web I was very intrigued by An HTML5 site, incorporating responsive design and images that that works across multiple platforms and devices. So how'd they do it?  I was determined to find out, or at least get some more insight.

First Things First...

On initial inspection they seem to have actually hidden things pretty well.  Right-clicking to view the source is disabled, so I had to use Chrome's Developer Tools to view the source.  I copied and pasted into a new document in Dreamweaver and then used the "Apply Source Formatting" command to make it nice and neat. There appeared to be only a few linked JavaScript files.  YouTube API, JS API, and Plus One API.  Most everything else seems to be behind the scenes written on the fly. I did take a quick look at two of the JavaScript files but as they had been minimized (extra spaces removed to reduce file size) anything meaning full was going to take a good deal of time to dig up.

Viewing the document in Design View did not provide the results I had expected.  I was presented with a few division (DIV) tags but the majority of the document was populated by list items (<LI>) tags. Search engines use a number of things including header, division, and list item tags to discern the structure of information on a page.  It was as surprising to find the content laid out in such a format, as it was to find no supporting CSS styles to define how this information should appear.

Digger Deeper

Take for example the list item highlighted in the first image below. It defines the piece of content that can be seen in the lower right hand corner of he homepage and in the second image below.  Where is the graphical information?  It's not on the page so it must be in the CSS, right?

No. The first clue can be found in the class the list item uses.  It's empty.  Therefore there is no clear tie from this list item to anything in the CSS.  To confirm this I searched the CSS for anything that might be associated with "Anne Frank House". A quick look through the 4800 line document did not appear to even turn up anything that defined how ANY list item should appear, let alone this specific one.

Flip, Switch, Repeat...

Since I was not getting very far in my investigation using Dreamweaver, I decided to switch over to Chrome Developer Tools.

For anyone not familiar, Chrome Developer Tools is a built in piece of the browser that among other things let you view live code on a page. Dynamic elements or scripts activated as the page is rendered will be visible here.  Moussing over an element in the code view will highlight the same element in the browser window. It even displays what CSS descriptor is tied to selected item.

Using this method I drilled down to the <DIV> tag associated with my example from above.  Yes, that is correct - <DIV> tag.  The list item in the static html appeared to be describing the "Anne Frank House" graphic, as I could find no other reference to it.

Now I seemed to be getting some answers. The list item I initial saw when viewing the source was now defined on the live page in a much more complex fashion seen below.

Hints and Allogations...

Based on my discovery so far It's my best guess that the scripts used on the page utilize the basic structure found in the static <DIV>, <UL>, and <LI> item tags as a data source for formatting content to a specific browser and size. For further evidence of this, focus on the highlighted section in the image above.  Now not only do we have a CSS class associated with the <DIV> container, we also have information that defines the background image used in the style attribute of the <DIV>.

I now had some pretty solid information to confirm what I had already believed; the site is using responsive design to tailor how the page appears across browsers, platforms and devices.  What about responsive images?  Images that are delivered to the browser to based on the available size.  I also had some good information on this as well.

I have read up on two methods of responsive images.  One uses CSS and media queries.  A style sheet is attached to the page based on different minimum and maximum sizes of the browser. When the page loads the correct style sheet is applied.  The images delivered through these style sheets are sized to cover a range. Scaling the image covers the difference.

The other method I have seen uses PHP to return an image.  Instead of your typical source URL for an image it would be to a PHP script to determine the most appropriate image to deliver.  You toss in some additional parameters on the query string and the server side script sends you back the correct image.  Even these I don't believe are exact. It seems to me a great deal of processing power would be required to generate and exact image size you needed on the fly.  If anyone would have processing power to spare it just might be Google.

A Test of Wills

What method is being used to return the background in the "Anne Frank" example?  It might be a little of both as I did see some signs of media queries being used in the CSS.  To get a better idea I devised a test.  With the Developer Tools open I sized my browser to about a quarter of the screen size.  I re-selected the <DIV> that defined the example I had been using.  As I mentioned this displays the associated CSS of this element.  I then right clicked on the linked assigned to the URL attribute and had it open in a new tab.

This returned the rather small image seen below.  I then saved the file and looked at it properties; 255 pixels wide and 96 pixels high with a files size of just 12kb.  I then opened the browser window up as large as I could and repeated the process. This produced and image 511 pixels wide and 193 pixels high with a file size of 41kb.  Not only was the image appearing larger it also had a larger files size.  Though I am not certain Google is using PHP as in the second responsive image method I described it does appear they are performing something similar.

The Score...

Though I don't quite know the exact details of how Google has pulled off the site, I do have a far better understanding of some of the methods they have used.  This understanding has lead me to wonder about other areas.  How have they integrated the horizontal click and drag, horizontal mouse wheel scrolling and replicated the functionality with gestures on mobile devices?

Be sure to check back and see what I have discovered.

Did I miss something?  Do you have a different take?  I would love to hear from you.

Philly Download – My biggest takeaways from mLearning DevCon 2012

Philly Download – My biggest takeaways from mLearning DevCon 2012

I spent the better part of the past week in Philadelphia attending mLearning DevCon 2012 with Greg Gardner and Michael Sheyahshe.  Below is some of the great stuff I picked up on.  

Titanium Studio

Titanium Studio is  a free (depending on the licensing you chose) mobile development tool for creating content across multiple platforms – Very much like FlashBuilder.  My comparision is both a compliment and an insult.  It's complex, but then again a software package that publishes "native" apps to IOS, Android, Blackberry and WebOS was not going to be simple.  In addition to having a similar interface to FlashBuilder the code is very ActionScript like. So far it does not have the complexity of Sencha or the unfamiliar aspects of jQuery.  

I have been trying to get it up and running and have run into some snags. I contacted Jeff Batt of Rapid Intake who gave the presentation.  He provided a link from Lynda.com to help get me up and running.  I have only just started looking it over but seems like it will be a big help.

Before you can get to the tutorial though you will need to install.  That can be problematic.  There were a ton of updates to install before you could even get rolling.

Adobe Edge

Another cool tool I heard about at eLearningDevCon.  It's an HTML5 animation tool from Adobe that uses an interface a great deal like After Effects.  It does provide for interactivity, but just based on the whole timeline set up of the interface, it's an animation tool, not a heavy programming tool.  The best part is it's FREE! At least to try out.  I was able to pull up something at the conference about a licensing deal where if you signup now for the current version, that license will transfer over when a more official version come out.  Unfortunately I have not been able to navigate my way back.  All I can currently find is Edge available on Adobe's Creative Cloud.  You will need an Adobe ID to sign in.

Kwik 2

This is a cool plug-in for photoshop.  I don't see as much use for this but, I think it could be very useful for proof of concept and quick prototyping.  Kwik will turn a photoshop document into a mobile app, including events and gestures.  To me it's biggest strength is also it's biggest weakness - it's a PSD.  I think it's going to produce large files.  That said I have not had a chance to look at it very well.  You can get a free version that will support projects up to 6 pages.  Thanks to Orlando Rivera (http://digitalsummit.tv/) for cluing me in on this one.

http://www.kwiksher.com/news/introducing-kwik-2-beta/

Tin Can API

A more powerful, easier to use SCORM?  That's an idea I can get behind. This one might have the biggest implications but so far as I can tell it's also the most nebulous.  Tin Can API is the newest flavor of SCORM.  They did talk a lot about what it can do and the kind of things you can track now but both the keynote and the hands on sessions were light on "this is how you do it".  To me the idea of SCORM where you do not have to be connected to the LMS is pretty cool.  You can turn almost anything into something trackable.  Looks like they are using "activities" as the basis now.  I don't know how many action words they have set up but its based on things like learned, attended and that sort of thing.

I was able to learn a bit more about the API from the site but I am still digging into the details.

I also got my reeducation in mobile video courtesy of Nick Floro (http://nickfloro.com/). Biggest takeaway there?  That is was long overdue.

The low key conference was very interesting.  I learned a great deal .  Not so much actual techniques but just whats out there and tools I was not aware of.  Thanks so much to Jason Bickle, Rapid Intake, and all of the sponsors (including ICF) for putting on a very educational week.

Adventures at MLDC2012

mLearning DevCon 2012 (http://www.mlearningdevcon.com), happening in Philadephia, PA, October 2-5, 2012, is sure to be an exciting event this year with many great topics and speakers.  As we close on the final hours before the big event, ICF will be well-represented with three speakers and four topics.

Greg Gardner will present two separate topics:

• 10-03 S5 - How to skin mLearning content with your own CSS
• 10-05 S29 - Creating iBooks Content for iPad

Mike Raines will present:

• 10-03 S3 - A 'Flash' of Freshness: Repurposing Existing Flash Content for Use in Mobile

Michael Sheyahshe (that's me!) will present on:

• 10-04 S12 - Nuff Said: Tips/Tricks from Digital Comics to Breathe Life into Your HTML5 mLearning

Here's what you can expect to see with my 'Nuff Said' presentation topic:

• Stan Lee (well...not 'in the flesh', as it were...)
• Print Comics
• Digital Comics
• Comic Book 'Language'
• Theoretical Ideas of Visual Rhetoric/Presentation
• Comic Book 'Apps'
• The Hulk !
• The Android Logo (heh)
• Real-World HTML5 Examples
• JavaScript/jQuery Code
• Advanced Online Examples
• ...and so much more !

Be sure to join us at MLDC2012, if possible.  You can also follow our Philly adventures on Twitter: @mas_edev, @eLearnDevGeek, & @gardelearndev.  Excelsior !

Changing the look and feel of mLearning Studio output

Rapid Intake mLearning Studio is powerful cross-platform mobile learning content authoring platform.  As of December 2011, it has four base built-in course templates for look-and-feel and four different page templates.  Since the output is in html5, great power is provided to programmers by making the CSS available for modification. Understanding what to change and how to do that can be a bit of a mystery though.  Using CSS you can modify the look and feel of the finished product.  This significantly enhances the presentations you can provide for your clients.  Next week, I will be giving a presentation at mLearningDevCon on this topic.  After the conference materials will be posted for viewing.

You can visit the conference web site at http://mlearningdevcon.com or my "Insights" page on ICF's corporate site at http://www.icfi.com/insights/presentations/2012/how-to-skin-mlearning-content-your-own-css

iBooks Author - what do you want to know?

I am giving a presentation on Oct 5 at mLearningDevCon in Philadelphia called "Creating iBooks Content for iPad".  I know what I want to present but more importantly, what would you expect or want to learn from a presentation like this?

Four mobile learning presentations

After "pulling technological rabbits out hats", "leaping tall requirements documents", and "turning back timelines" in order to provide the highest quality online and mobile web products for our clients what else has this Tech Team been up to?

A-conferencing we go, a-conferencing we go…..that's right, after giving 12 presentations at two national conferences  and two nationally available webcasts already this year, the Tech Team is back at it. 

Mike Raines, Michael Sheyahshe and Greg Gardner will be speaking at mLearningDevCon Oct 2-5 in Philadelphia.  We will be giving the following four presentations:

1. Creating iBooks Content for iPad – Greg Gardner
2. 'Nuff Said: Tips & Tricks from Digital Comics to Breathe Life into Your HTML5 mLearning – Michael Sheyahshe
3. A "Flash" of Freshness: Repurposing Existing Flash Content for Use in Mobile Development – Mike Raines
4. How to Skin mLearning Content with Your Own CSS – Greg Gardner

Greg will also be leading a mLearning Strategies roundtable session.
 
ICF has posted a web page for you to review the presentations:

http://www.icfi.com/events/conferences-and-trade-shows/2012/10/mlearning-devcon-2012 

You can also link to this page from the Training and Technical Assistance and Organizational Learning and Performance pages on the ICF web site in the Related Events sections of those pages.

ICF, the Tech Team and mLearningDevCon will use social media to announce what we are doing.

Feel free to connect with us at any of these sites.

Twitter accounts to follow:@ICFI, @gardelearndev, @eLearnDevGeek, @mas_edev , @mLearningdevcon, and #MLDC2012
Facebook – http://www.facebook.com/ICFINternational/  and  http://www.facebook.com/mLearningDevCon
LinkedIn – http://www.linkedin.com/company/icf-international/
Google+ - https://plus.google.com/117972905686513925698/posts
Conference Web site - http://mlearningdevcon.com/

Customize Lectora’s Table of Contents with Visited-page and Chapter Icons

Learning Solutions Magazine @LearningSolMag published my article "Customize Lectora’s Table of Contents with Visited-page and Chapter Icons" today.  Check it out at  http://bit.ly/Scw3cO  This is my first published magazine article.

Reducing my electronic footprint

Looking for ways to reduce your electronic footprint?  I was.  My desk was a cluttered mess on multiple laptops, four large monitors, four power strips and more cords than you could count.  But I needed it all.  Mac for iOS development (xCode, iBooks Author, etc...) Windows for Lectora, MobiOne, Articulate Storyline, MS SQL and as a test platform.

I finally installed Parallels Virtual Machine with Windows 7 on it.  I then loaded Lectora, Articualte Storyline and Studio, Microsoft SQL Studio 2012, and MobiOne onto the Windows 7 instance.  I installed my Adobe CS6 suite of software onto the Mac as well as MySQL.  I am able to VPN into the home office with both Mac and Windows and share files between the two OS instances.  Very cool. 

Now, I can see my desk again. I removed one laptop, two external monitors, an armful of plugins and cords, several power strips, one extra headset and was finally able to move my printer to the other side of the room since it can now be fully wireless (the Windows laptop had to be USB connected to it).  I have room to spread out a bit and I have not reduced my capabilities to create awesome e- or m-Learning at all.  In face, I think its better because I can share files and test across plaforms with greater efficiency.

The eLearning Programmer’s Toolbox: Choosing the Right Tool

Programming eLearning is often the easy part of the project.  Determining which tool or tools to use however, could make or break your project. Could the tool do what the client wanted? Did the programmer have the correct skill set to use that tool?  Today I gave a webinar, sponsored by mLearningDevCon  where I walked through a unique process flow using criteria such as 

1. Client requirements,
2.  Tools in your toolbox, 
3. Employee skill sets with tools, 
4. Project budget and time constraints. 

Combining these inputs into the process flow will provide you with the ability to choose the right tool – or tools to be successful with your project. 

Select this link to get a zip file (16MB) of the presentation and spreadsheets covered in the webinar.

Select this link to download a zip file (58MB) containing the webinar in wmv format.

New Tools = Better Learning?

The e- and m-learning communities have been blessed with several new tools this summer. Most notably Articulate Storyline and Adobe Captivate 6. A a technical director, I am charged with evaluating and discerning the best way to spend my budget on new tools and/or upgrades to my toolset. As an old programmer I love all the new ways to do things, improved efficiencies, and easier solutions for non technical people to handle lower level programming tasks. New tools generally open new ideas, improve work flows and even improve profit. But, I'm not just looking at tools from a programming point of view anymore. I am, after all, in the learning business and my eduction degree kicks in and asks the question "how is learning being improved?" At elearndevcon this past month, I had a long conversation with Art Kohn. We discussed this question in depth. I think many people have varying thoughts. What are your thoughts on this topic. Do the new tools help with learners retention and do they change behavior? If so, how? Thanks,

HTML5 or Flash ?

Ok. I'll admit, right up front, that I'm not going to take sides on this one.  I've been a long-time developer using both HTML-based and Flash-based solutions. I'm quite comfortable using either technology to get the job done.

To use a mechanical analogy: Say you hand me either a pair of needle-nose pliers OR a pair of lineman's (or "combination") pliers. These are certainly different tools and have different functions...but, I can sure squeeze/pinch/etc. the heck out of something with either one. The same can be said for HTML5 or Flash; each have their own specific set of advantages, but both come in quite handy, when it comes to getting the job done, especially from a software solutions perspective.

A recent blog article on http://www.trainingindustry.com further discusses HTML5 and Flash's differences, but supports the above idea that either/both technologies work well. The article goes on to discuss "HTML5 in Learning Solutions" and highlights some advantages. Namely, Semantics, Multimedia, Graphics, Device access, and Offline Storage. I'd suggest viewing the article at http://www.trainingindustry.com/learning-technologies/articles/using-html5-in-learning-solutions.aspx to get the full description behind these.
One part of the article stands out to me, which I will quote here:

HTML5 in Learning Solutions: Collaborative Learning
There is yet another aspect to the learning equation and how HTML5 can play a role that is quite distinct in the world of learning solutions, with respect to social collaboration. Just about everyone is familiar with social networks these days and the benefits of staying connected in the personal and professional world. HTML5 makes it easy to build solutions around collaboration among a group of experts and learners. Collaboration in the online world is so powerful that it can change the way everything works.

I agree with much of this. Thinking towards social media, such as Facebook, Twitter, Instagram, and/or other, it becomes clear that we developers need to plan for implementation of these technologies, not matter what platform for which we are creating content. Take the JSFiddle example below, showing how easy it is to grab Tweets using jQuery. Click the 'Result' button to run the simple script.

 Of course, this is a rudimentary example, but think of the possibilities implementing the social aspect for our clients, as we deploy to desktop units or even mobile devices, using HTML5.  Certainly, I am not taking sides here - I will continue to use both Flash and/or HTML5 where needed...however, I use the example above to remind us, as developers, that we can continue to think past our current technological reach.


For now, we'll see how the comparison between the two solutions work out. I'd wager that both will be around for quite some time, for us to all argue over, even if one dies on the vine. (...I mean, there are still developers out there programming in Authorware, right?)

Great post in UXmag.com on User Experience Leadership.

I wanted to point out a great article I read today on UXmag.com - 5 tips for effective UX Leadership by Paul Holcomb. His insights speak to many of the frustrations I know I feel when working on a project, especially when working in isolation (functional silo!). How do you move beyond being seen as the deliverables person, and move into a more strategic role within your company, or with your clients.

Greg often talks about what questions need to be asked BEFORE a project starts - and it is almost as if he and Paul got together on this article. I think it is because, from a UX perspective, these are common sense considerations. But common sense depends on common perspective, and when most of our co-workers or clients are NOT looking at things from the UX perspective, but rather from a project management or team management or even SME perspective, those things that are common sense to us aren't necessarily going to be common sense to them!

Check it out - its a great read!

Wade

How to Replace the Master Page in SmartBuilder

I recently found myself in a situation where I needed to update the Master Page on 5 different lessons.  Through client revisions and added functionality, the original Master Page had evolved a great deal. I was frustrated to learn that although you can copy entire pages via the Page Sequence List (Edit/Page Sequence from the Authoring Stage), the Master Page is not included in this functionality. Faced with the prospect of recreating all of the actions in the Master Page across all 5 lessons I decided to search for a more efficient solution to no avail. My search was not completely fruitless as I did turn up a few capabilities that when combined can produce the same effect.

7 steps to Replacing your Master Page

1. Open your lesson and save a copy.
   
2. In your new saved copy, open the Page Sequence dialog and delete all of the pages in your lesson. (You will need to be viewing the Master Page to accomplish this as SmartBuilder will not allow you to delete a page you are currently viewing)
   
3. Save this cleaned out lesson as a template
   
   
   
   
   
4. Publish your new template. (found in My Content / Work in Progress /Templates) This will place your template in My Published Content / Templates allowing you to apply this template to a lesson.
   
   
   
5. Open your lesson that needs the Master Page replaced, choose to view/edit the Master Page. On the Authoring Stage, press CTRL A (select all) and then Delete.
   
   
6. Delete your Actions.  If you view your Action list you will see that all of the actions are now colored red.  This is because all of the objects these items were tied to have been deleted. Delete all of these Actions.
   
   
   
7. The final step is to apply your saved template to your now cleaned out Master Page. From the Design Tab in the Template Pane, (on the bottom right) click on Apply Template. Locate and select your template in the Select Template dialog box.
   
   

You have now replaced your Master Page!  To apply this method to additional lessons simply repeat steps 5-7 on the desired lessons.

Know of an easier process?  I would love to hear it!