I recently finished the course “Large Scale Databases for Social Networking Systems” and learned a great deal about Google’s BigTable, Amazon’s SimpleDB and Dynamo, Facebook’s Cassandra, Twitter’s HBase, LinkedIn’s Voldemort, and other open source technologies including Couchbase and MongoDB, among others. For the tech journalists out there, media companies are also utilizing NoSQL technology, including The Guardian and The New York Times, just to name a few.

I think it’s extremely important to understand the basic strengths and weaknesses of this up-and-coming technology and when to choose one system over another. I never envision myself programming in them, but I do hope that one day I can make strategic decisions regarding a company’s NoSQL implementation. Regardless if you are a programmer or a manager, hopefully my high-level overview of NoSQL and the major players below will be helpful.

Background

Up until now, most sites were powered with relational databases (aka RDBMS). It links data together by relationships, such as person A attends course B taught by professor C. One of the main reasons to use RDBMS is for its ACID properties, namely atomicity, consistency, isolation and durability. In other words, if you are processing sensitive information such as credit card numbers, you need ACID guarantees.

Around 2009, a non-relational technology known as NoSQL came on the scene (the nerds out there can smirk about the true NoSQL technology from the early 90s and why the former should really be known as NoRel). Regardless, there were a number of different reasons to embrace NoSQL: money, speed, growth/scalability, availability, fault tolerance, distribution, etc. ACID properties are costly to deploy and relational databases are often times too complex (and too small!) for many needs. For instance, it is not mandatory that a Facebook profile page is up-to-date and consistent to all viewers at every second. Thus, NoSQL allows for properties such as lazy synchronization and eventual consistency, which greatly increases the speed of the site. The saying goes if your data is complex but process is simple, use SQL. If your data is simple and your process is complex, use NoSQL.

Image source: blog.beany.co.kr

Databases can only have two of three guarantees, known as the CAP Theorem: consistency, availability, and partition-tolerance. If you choose AP (such as Facebook’s Cassandra), you lose the guarantee that each client always has the same view of the data. On the other hand, if you choose CP (such as Google’s BigTable), you lose the guarantee that clients can always read and write. Lastly, RDBMS such as MySQL and Postgres lay on the CA side since they forgo partition-tolerance.

There are three main types of NoSQL databases: column-stores (ex. Google’s BigTable), document-stores (ex. MongoDB), and key/value-stores (ex. Amazon’s Dynamo). If you are interested in doing a deep dive into each type of database and more into NoSQL in general, I highly recommend you read Christof Strach’s NoSQL paper.

Google’s BigTable

Google decided to build its own proprietary technology after realizing that no commercial system met its needs. They launched BigTable in early 2005 and it is used for multiple purposes: search, history versioning, map technology, analytics, etc. It is highly distributed across thousands of processing systems and highly compressed. There are three main components to the database: scheduler, filesystem, and lock service. The scheduler is called the Google WorkQueue and processes which reads and writes happen when. The Google File System has a master and three chunk servers that are responsible for replicating, reading and writing data. The Chubby lock service does coarse-grain locking during reads and writes to prevent overwrites. As a neat factoid, Chubby receives 2,000 lock requests each second.

Google uses what are known as bloom filters to find a word in a webpage instead of a traditional hash or index due to massive size issues. It also built a patented technology called MapReduce aka “scatter and gather” to retrieve web pages. First, it looks for everything relevant (map), then organizes them and returns in a list (reduce).

One particularly fascinating component (in my opinion) is that the database is query-oriented, meaning that it is organized to facilitate quick querying. That makes sense for Google, obviously, but did you know that Google inverts a URL when searching/retrieving? For instance, it is much easier to search “com.innovativeinteractivity.www/about.html” than “www.innovativeinteractivity.com/about.html” because Google first searches for all websites with a “.com” extension, then within the domain “innovativeinteractivity” to quickly retrieve the file named “about.”

If you are interested in taking a deep dive into BigTable’s infrastructure, make sure to read “Bigtable: A Distributed Storage System For Structured Data.”

Amazon’s SimpleDB and Dynamo

Amazon has a slew of database technologies: SimpleDB refers to their external database that users can run queries on their own content in Amazon’s cloud and pay on a per-GB-download basis; Dynamo is their internal database for their storefront; EC2 (Elastic Compute Cloud) is their cloud computing initiative; S3 (Simple Storage Service) is their external file storage system, similar to Dropbox.

SimpleDB launched in 2006 and initially they charged for data input but subsequently over charged for usage and had to reduce its prices. Now it only charges for data download and is used more for short-term analysis and storage rather than long-term archiving. To learn more about SimpleDB, read the Developer Guide.

Dynamo is Amazon’s highly available key/value-store database for its storefront and S3. Interestingly enough, since it’s on the AP side of the CAP theorem, it gives up consistency. Did you ever realize that you might not be seeing the most recent version of content in Amazon? That was news to me! For some jaw-dropping stats: Dynamo handles 3 million checkouts a day; 100,000s of concurrent transactions; 10s of millions of customers; 10s of thousands of servers. To learn more about Dynamo, read “Dynamo: Amazon’s Highly Available Key-value Store”.

Facebook’s Cassandra

Cassandra is a mix of Google’s BigTable and Amazon’s Dynamo. At a high-level, Cassandra takes a logical view of the data model from BigTable with column families, and takes partitioning, replication, gossip protocol model from Dynamo. Following details key similarities and differences between the three:

Cassandra is AP, thus forgoing consistency, whereas BigTable is CP. Cassandra relies on its local filesystem, pulling the majority of data from disk, versus BigTable’s GFS. Cassandra is open source whereas BigTable is proprietary.

Cassandra and Dynamo are both AP, but Cassandra is open source and Dynamo is proprietary. Cassandra is a column-store whereas Dynamo is a key/value-store. Data within Cassandra has structure whereas data within Dynamo is blob format. Cassandra has many BigTable properties such as timestamps, versus Dynamo, which has vector clocks.

To learn the details of Cassandra, make sure to read “Cassandra – A Decentralized Structured Storage System.”

Twitter’s HBase

HBase is the open source version of Google’s proprietary system BigTable. HBase and BigTable are both column-stores and CP on the CAP theorem, so they give up availability. HBase uses ZooKeeper as its lock service (replacing Google’s Chubby) and HDFS as its file service (replacing the Google File System, GFS), but it does provide support for MapReduce (the open source version is called Apache Hadoop). Twitter uses HBase for its 7TB/day incoming data, analytics and people search, among others. (It also uses a multitude of other technologies, such as Cassandra and MySQL.) Yahoo, StumbleUpon, Meetup, Adobe and Mozilla also use HBase. For a deep dive into HBase, check out Ryan Rawson’s presentation and Amandeep Khurana’s presentation.

LinkedIn’s Voldemort

Yes, this database is named after the Harry Potter villain. Now that we have that factoid out of the way, Voldemort is an open source (as of January 2009) key-value storage system. LinkedIn uses it for its data-intensive features such as its search, recommendation engine, people you may know feature, who’s viewed my profile feature, etc. Similar to Dynamo, it forgoes consistency by being on the AP side of the CAP theorem. As Jay Kreps notes, “Our experience with the system so far has been quite good. We were able to move applications that needed to handle hundreds of millions of reads and writes per day from over 400ms to under 10ms while simultaneously increasing the amount of data we store.” Other Voldemort users include eHarmony, Gilt Groupe and Nokia.

To learn more about Voldemort, read “Project Voldemort: Scaling Simple Storage at LinkedIn” and “Project Voldemort (Part II): How it works.”

Couchbase and MongoDB

There are many other NoSQL technologies including Couchbase and MongoDB. Couchbase is a newly formed company from the merger of NoSQL technologies Membase and CouchDB. To learn more about Couchbase I encourage you to view my slides from the presentation I gave on the merger. Couchbase will remain open source and resides on the CA side. Customers include Apple, AOL, BBC, The Knot, Zynga and Vodofone, among others.

MongoDB is an open source document-oriented database that is largely known for its speed (2-10x faster than MySQL and ~50x faster than CouchDB, according to one source). Customers include Disney, Craig’s List, Foursquare, Shutterfly, Forbes, Bit.ly, The New York Times, and Business Insider, among many others.

Big thanks to my professor Arcot Rajasekar for teaching me all of the above and more!

McLuhan Project by ABC

All I can say is IT’S ABOUT TIME! I’m excited to introduce you to “AVE” (ABC Visualisation Editor). As I envision it, this may very well do for timelines what Soundslides did for audio slideshows. Read my interview with Sam Doust, Creative Director of Strategic Development at Australian Broadcasting Corporation, to learn more about this tool and when you can expect to test it out for yourself.

For a little background: I remember coding numerous clunky timelines in Actionscript back in 2008 and continuously thought how major improvements could and should be made to timeline interfaces. Along came Dipity, Timetoast, and a slew of other programs all trying to solve the same problem of displaying linear data in an aesthetically pleasing fashion, but they all had their drawbacks.

After being inspired by the Arab spring timeline I featured last March, II guest blogger Paul Franz did his research and came upon “The Explainer Project,” a team of innovative developers in the Strategic Development arm of the Innovation Division at ABC. Since then I got in touch with Sam and conducted the following Q&A via email. Enjoy!

Q. What is your rationale behind building a new timeline editor?

A. After building a bespoke timeline for another project, we returned to the idea of templating this approach to visualising data sets. The editor arose out of that work – a way for producers, journalists, anyone and especially without developer skills to quickly assemble complex data structures and output them in immersive, captivating ways. It was an exercise in building a powerful tool to explain complex data sets.

Q. What are the features of the editor?

A. It allows you to curate data and visualise it in different ways. The taxonomy priciples are based around Events that can occur in time, as in timelines, or as milestones, as in projects, or more non linear occurrences such as genus types, for example. These Events have media assets associate with them, in the forms of text, audio, video, images, tags, web links and deep links. For example, one can append any video deployed on the web (eg You Tube) and it will be encapsulated as part of the event’s presentation. This basic unit of the Event can then be sorted by caregory and group and linked by tags to create various meanings for the data.

By example, in tracking events that took place in the first week or two after the Japanese earthquake earlier this year, categories delineated concurrent events into those relating to nuclear, geophysical, economic and rescue efforts. The visualisation of these events allows for the audience to quickly see clearly relationships between different types of events occurring concurrently in time.

The editor stores these events and their media assets and the taxonomy around the events that the author has created. This data set can be output in a number of different ways. We presently allow for two visualisations – a card array and a road.

Q. Do you have plans to make the editor publicly available?

A. Yes, we’re planning to make the editor publicly available as an AIR application. We’re also looking at open sourcing the project, so that people can create their own visualisations of data coming out of the Editor.

Q. What is the price?

A. When available, it will be free.

Q. What is the workflow like? Time to completion? Programming language knowledge?

A. No programming knowledge is required to use the Editor. Including installation, the basics of using the Editor can be taught in under half an hour. An extended knowledge of the Editor is aquired over time. For instance, the approach influences the way one thinks about data and its presentation. That’s why using it is best described as curating, because it builds upon the existing skills of journalists, storyteller, or anyone wanting to present data, and makes one think about the concurrence and relationships between events on a deeper level. Work-flow varies depending upon the project. There is data entry and relationship creation, then there’s visual design (which is most often catered for immediately by design themes, but is also catered for with a comprehensive WYSIWYG editor), and then there’s publishing. Presently, the outputs we’ve created are SWF and PDF files, which although visually rich are beginning to feel a bit anachronistic, so we’re looking at HTML5 versions too. And part of the intention of open-sourcing the application in the future is to encourage diversity in visualisations.

Q. What are some example projects that have used the editor in the past?

A. (Note these are all data sets coming out of the same version of the Editor – one can publish the same data sets in either or both visual style simply by choosing the style of output):

· Marshall McLuhan: A Centenary in Media
· 2010 in Review
· Antarctic Summer (scroll to bottom of page)
· A History of Redfern’s Block housing estate
· A History of Spaceflight

Q. Do you envision your editor to be for timelines what soundslides is for audio slideshows?

A. We do think it’s a very powerful tool for building complex, highly detailed timelines (capable of spanning minutes, days, months, years, decades, centuries, milennia, non-linear, etc), and also because it treats data and visualisation separately, as well as allowing for currency, in terms of being rapidly updatable.

Q. What improvements do you envision building into the editor in the near future?

A. If we open source it, we hope that improvements will come out of the community. I’m not sure we’ll be able to continually improve upon the Flex/AIR framework as we’re working on other things, but in terms of the thinking that’s gone into how you structure and present data, it already has very solid foundations which a community could build upon.

Q. Anything else you want producers to know about your product?

A. Have a look at the examples and when AVE is available, have a go – it’s a powerful tool for creating timelines and context whatever the subject is. Also, visit the Explainer Blog on Tumblr that details our broader work “Explainers.”
Other posts that might interest you:

• Crunching 30 years into an interactive
• Behind the scenes of “Goa hippy tribe”
• SBS launches multimedia site “Dragon Children”

Photo Credit: EasyWebHosting.com

I thought it might be helpful to discuss technical considerations when deploying multimedia websites. In this post I will focus on hosting options for your site and next week I will discuss email marketing options to promote the site once you have it up and running. If there are other technical questions that you would like me to cover, please leave a comment below and I’ll be more than happy to tackle them in the near future!

GoDaddy.com

I have religiously used GoDaddy in the past for all of my hosting and domain support. Even though their website seems overly confusing, their technical support is exceptional. Both times when II crashed in the past numerous technicians worked with me over the phone for hours to get the site back up and running. In addition to basic hosting packages, they also offer options specifically for particular CMS’s, such as the WordPress version that I use for this site.

Hosting.com

A recent client of mine was already set up with Hosting.com, so I moved them from a Windows server to a Linux one when I redesigned their site using WordPress (I try to use a CMS for all of my sites nowadays to simplify future updates to site content!). This company was extremely easy to work with, and they set me up with a temporary domain to build out the new site so that there was no down time during the transition. I did notice that their hosting was pricier than the one I use with GoDaddy, but there are so many bells and whistles to each plan that you will need to research all of your options to figure out what price point fits your needs.

WebHostGear.com

I have also heard good things about Coldfusion hosting through WebHostGear, particularly for scalable projects. Since I have not personally used it, here is a short description from their site:

“If you are planning a database driven website where scalability is a requirement, Coldfusion hosting is an option well worth considering. Coldfusion is a “rapid application development platform”, meaning it is used for quickly building web-based applications. Although Coldfusion is a dynamic scripting language, it is similar in syntax to HTML. Since Coldfusion was originally developed to access database information and for use as a web development language, it natively performs complex business logic with a minimum amount of code. These factors make the Coldfusion language much easier for most developers to learn than its counterparts, PHP and ASP.”

As I mentioned above, if you are going to use a CMS like WordPress, you can’t use a windows web hosting solution. However, if you are building out a static site, such as my multimedia project “Honduras and the Hidden Hunger,” you can look into a Windows server, which is normally more affordable than the Linux and Coldfusion options mentioned above.

Django 1.0 Template Development by Scott Newman teaches development practices for the Django Web framework template system. The book brands itself as “a practical guide to Django template development with custom tags, filters, multiple templates, (and) caching,” and is published by Packt Publishing.

I found the book to be a solid but also technical reference, especially on views, URL configuration, and pagination, making it more appropriate for the book’s intended audience of “Web developers and template authors.” I’m familiar with Django template development during my work as an Interaction Designer where Django was created at the Lawrence Journal-World newspaper in Lawrence, Kan.

The book assumes the reader completed the installation of Django and the introductory tutorials, in particular creating a project, an application, and some models, and development using at least Django 1.0. The book also assumes some basic knowledge of HTML, Python, and a Unix-like environment. I recommend learning essentials, such as the set up of basic Unix-like environments and how they use Python via the Python Path, before reading this book.

By the chapter

Chapter 1′s “An Introduction to the Django Template System” is a good overview and philosophy of the template system. Chapter 2′s “Views, URLs, and Generic Views” and Chapter 3′s “Template Context” cover the technical background in how Django renders templates and was mainly written for Web developers. Chapter 4′s “Using the Built-In Tags and Filters” contains examples of almost every tag and filter Django gives for free, which is very welcome because not even Django’s official documentation has such a reference!

Chapter 5′s “Loading and Inheriting Templates” starts real-world template examples, but recommends storing templates in “projects/(project name)/templates/” as a best practice, which I found to be questionable: The most common template storage practices I have seen are “(project name)/(application name)/templates/” or a dedicated directory; the former is especially common in redistributable Django applications on Google Code and GitHub.

Chapter 6′s “Serving Multiple Templates” covers the juicier parts of the book: printer-friendly pages, site themes, and mobile versions (courtesy of my former co-worker Matt Croydon—Hi, Matt!). The printer-friendly pages were solid, although the mobile solution falls just short of perfection by not using cookies. I found site themes—manually adding and remove template directories—not to be a practical solution.

Chapters 7 through 11 have corresponding online documentation topics: custom tags and filters, pagination, customizing the admin, caching, and internationalization. The chapter on pagination curiously failed to mention the django-pagination application, but the chapter on caching elegantly addresses a confusing topic.

The good and the not-so-good

The book shows many helpful screenshots, but I would have liked more than its three information graphics, which reiterated the text preceding it; however I did find the text to be generally free of technical errors.

The book should have answered some of the more basic questions I had when first learning templates:

• Why do templates end in the .html extension rather than some kind of Django template extension, such as “.django-html“? Answer: The Django creators wanted your current text editor to continue highlighting HTML elements. If you come from PHP, this is definitely noteworthy.
• What is a template variable’s syntax? Answer: {{ model.field }}. The book rarely mentions models.
• Is there a diverse template strategy I should use? Answer: It depends, possibly with design layouts.

The book oddly chose to author a press release application and not the most-desired blog application, covering only simple, list-, and detail-based generic views—not date-based generic views, which would have been desirable, but best practices, such as empty blocks for extra CSS and JavaScript in the base template, are covered.

Acknowledgment of the Django universe’s free and open applications on the Internet could have given designers and front-end developers the edge in making their templates shine, such as:

• typogrify: Tags and filters in prettifying your text
• django-template-utils: Commonly used template enhancements beyond djbuilt-in tags and filters
• django-robots: Easy creation of robots.txt for search engines
• django-oembed: Auto-detection of media-esque URLs and their no-fuss replacement
• flatpages: Acknowledgment of the most basic built-in Django application showing template basics

For you, blue?

These documentation topics and Django Book chapters roughly correspond to many of the chapters in Django 1.0 Template Development:

• The Django template language
• Built-in template tags and filters
• The Django template language: For Python programmers
• Custom template tags and filters
• Django Book, Chapter 4: Templates
• Django Book, Chapter 9: Advanced Templates

Ultimately, buying Django 1.0 Template Development comes down to what kind of learner you are: Django’s official documentation, the Django Book, and the Django users Google Group, should give most Web developers and template authors enough to learn most of the template system, but the book can be a handy reference and walk-through that will hold your hand in a lot of sticky points. The examples in the book are bound to teach something to even the most seasoned Django developers.

Django 1.0 Template Development is available on Packt Publishing’s website and Amazon.com.

Richard Cornish is a former interaction designer at the Lawrence Journal-World in Lawrence, Kan., where the Django Web framework was created. His first love is design but a close second is the Old Navy track jacket that he wears almost every day. It’s a security thing.

Below is the result of my widget. In case you are an avid II fan (shucks, thanks!) and want to promote the site wherever you live online, click the “Get Widget” button to copy the embed code.

I would encourage others out there to glance over the tutorial and keep this option in mind for future projects. If you want more control over your widget, it’s only $3.99 a month to get a pro account to delete the unwanted ads. Happy “widgeting” everyone!

Other posts that might interest you:

• Seven interactive tools to strengthen your next multimedia package
• Quantifying the value of digital content
• Five ways to rock an advocacy video

Tucked-away Treasures by Roanoke.com

I recently came across an elegant map mashup, “Tucked-away Treasures,” by Roanoke.com interactive producer Chris Zaluski.

As mashups become increasingly more popular in multimedia presentations, it is important that producers learn how to create them. Therefore, I asked Chris to explain how to get started building map mashups, with information on both the Google map API and UMapper.

“Like any new technological endeavor, getting started is the hardest part. My experience with the Google Maps API was no exception. But considering that I had limited experience beforehand and was able to create a functional map that incorporated video, sidebar navigation and rollover effects, I’d say it’s worth a try for any person willing to spend a few hours sorting through foreign code.

When I say API, I’m essentially referring to a collection of rules (or codes) provided by a programmer so others can follow those guidelines in order to create applications. The Google Maps’ API allows a person to take a normal Google Map (as you would find on maps.google.com) and customize it. This process is also known as a map “mashup,” and it can be done using a variety of other API’s such as Yahoo or UMapper.

For the purposes of this blog post, I’ll mostly discuss how to get started using the Google Maps’ JavaScript API, but I will also talk briefly about UMapper. The differences between the two can vary depending on which Google API you use, but I’ll talk about that later.

The main benefit of using Google Maps is that their presence on the Web is so pervasive that navigation is inherit to most users. Secondly, the maps are very easy to build.

To get started you need an API key. The key is free when you sign up and is basically so Google can keep track of which Web sites are using the API.

Once the key is generated, you’ll have access to the full documentation of Google Maps. However, unless you know JavaScript, that nitty gritty code will look like a foreign language. The “Map Basics” section is much easier to digest.

The main piece of advice I can give from this point forward is just go with the flow and get used to looking through source code. I still don’t fully understand all the lines of code, but it’s through a guess-and-check process that this whole thing begins to take shape.

You can find the main “meat” of your code on the Google Map API section on Google Code.

If you copy that entire block of code and paste it into an .html document, the only things you will need to modify are two parts: add your personal API key and change the sensor setting to “true” or “false.” Once you do those two things, you will see a Google Map on your .html page. Pretty easy, really. (And the sensor setting applies to whether or not the application is using a sensor such as GPS to find the user’s location. Unless you’re designing this map for a mobile device, keeping it on “false” should be fine.)

From here, I spent a lot of time looking through the Google Maps API for example maps and then reading the source code of those maps.

There are two really good things about this JavaScript API. The first is that the map’s code rests in the .html code, so if you run across a mashup you really like, just check out the page’s source code to see the JavaScript technique that was used.

The second nice thing is that if you don’t know a lick of JavaScript, most of the functions are still pretty common sense. For example, just by looking through the code above, I bet you can figure out how to change the map’s starting location (map.setCenter(new GLatLng(37.4419, -122.1419), 13);). Or if you wanted to change the type of map that was used, the function is “map.setMapType(G_HYBRID_MAP).” It’s pretty easy to recognize what the lines of code mean when you’re reading through unknown source code.

The best resource I found was this “Google Maps API Tutorial”. It’s easy to use and has a “succeed-then-decipher” method where the source code is given first, then the explanation second. This site was linked from the Google Maps’ API site, so just keep in mind that much of what you’re looking for will be on Google’s API site.

Other effects that I added to my map were tabbed info windows, a clickable sidebar, embedded Youtube videos and custom markers with rollover effects. Just by browsing through the API site and the resource site mentioned above, I was able to find existing source code that I modified to fit my map. It’s also easy to link .xml files with your map in order to upload large amounts of markers (here’s a simple example, “Tracking Gov. Kaine,” and here’s an example that uses a heat map effect).

In addition to Google Maps, another easy way to do a map mashup is with UMapper. The difference with UMapper is that you’re actually exporting the map into ActionScript, which you can use in Flash.

One of the main benefits of UMapper is the site’s easy interface. It allows you to design a map on their site by simply dragging and dropping markers and then clicking the “Export” button to get an ActionScript code block. Once in Flash, the map can interact with other elements on the page in a much more dynamic way than Google Maps.

Choosing which map program to use largely depends on the project at hand and your skill set. If you’re starting from scratch, the Google Maps’ API or the Yahoo Maps API are both easy ways to get started.

Some more examples of what can be done:

• Cinci Navigator (created in Yahoo Maps using Yahoo’s YUI)
• Auto and bike accidents in Davis, Calif. (created using Google Maps API)
• A guided tour of St. Louis professional ballparks (created in Google Maps, I believe)
• Geo dart game (created in UMapper)
• Roanoke housing projects crime statistics (created in UMapper)”

Other posts that might interest you:

• Five tips for emerging video journalists
• Five ways to rock an advocacy video

Flash man by Zerofractal Studio

Read the original post from 10/17/2008 HERE

Read the later version with sample files from 2/25/09 HERE

Since October, I have been receiving at least one email a week on my deeplinking with SWFAddress tutorial. I thought that one in particular might be of use to others trying to master deeplinking, so I am posting it here with his approval.

Vaughan van Dyk also provided a wealth of files for users. Here are his comments:

“I have CS2, so I’ve attached your original in that format along with as many comments as possible in the time available (swf_address-v), because comments will likely be the easiest for people to follow along to. (Download the files for personal use HERE.)

I have also attached my stripped-down version (simple-v), which removes preloader/splash screen/neat titles and just demos use of core SWFAddress. Maybe people start there with the basics and then progress onto your swf-address, and then eventually to the samples. You are welcome to use these however you need – I hope they can be of help.” (Download the files for personal use HERE.)

He also provided sample files, but I am unable to access my server while in Honduras, so I will post them upon returning in late July. If you have other tips and/or suggestions, please add them in the comments below so we can grow out this troubleshooting forum for SWFAddress!

Hi Tracy,

Firstly I just want to thank you for the brilliant service you provided to the world by giving your ‘cut-down’ example of SWFAddress in action!

I recently happened upon SWFAddress and explored using it for some Flash work where I wanted a smooth solution for jumping to specific frames in a Flash file. But the official SWFAddress documentation is particularly workmanlike (just telling you what everything does but not how to get it working together) and all the samples involve a needless number of other features without any commented code to let you know why they are doing what they’re doing.

I almost gave up eventually, but thankfully found your post:
http://www.innovativeinteractivity.com/2009/02/25/example-files-and-tips-for-deeplinking-with-flash-swf-address/

Using that, I could achieve what I was looking for!

As a small thank-you and if you don’t mind, I’d like to suggest that your code/example could be cut down even further, to a truly bare-bones implementation so that those who want to add extra features (e.g. preloader) can do so, but don’t have to have excess code lying around if they aren’t going to use those features.

Here’s what I found, and please note that I am a long-time traditional programmer but a fairly-new ActionScript coder so errors and omissions expected:

1. Your swf_address zip file includes two .DS_Store files, which aren’t necessary for this.

2. Although the article talks of using AS2, the actual FLA in the zip was authored in CS3. It would be nicer to have it in CS2, which would be forwards-compatible.

3. In frame 2′s AS, the following code is only needed if you have a preloader on frame 1 – if you don’t, it can be entirely omitted because the first frame will be your title page:
if (_currentframe 2 && value ”) {
intro.play();
} else {
gotoAndStop(‘$’ + value);
}

4. Frame 2′s three “custom utilities” functions manipulate the frame label to make it neater for displaying in the title bar of the browser. The three functions are quite complex but are entirely optional.

5. In the onChange function, the getPath and getParameter methods are only needed if you have multi-level pages. In the SWFAddress Portfolio sample, they use this for the Portfolio – 1 2 3 subpages that create URLs such as http://www.asual.com/swfaddress/samples/flash/#/portfolio/2/. If you’re not going to use subpages, you don’t need these two methods – getValue is all we want.

6. It’s not necessary to repeat frame 3′s AS code in every frame thereafter.

Also it would be useful to point out that your and my versions here use SWFAddress 2.2 (and AS2 as you mention). SWFAddress recently updated the AS/JS to version 2.3 but that did bring with it a few issues for some. I’m sticking with 2.2 for now.

And the following are just some of my findings about using SWFAddress for jumping to specific frames. Probably all of it you know but may be useful for some of your readers:

Important: You can only test SWFAddress by running the HTML file from a server. So you can’t just load it normally on your local machine and see the URL change dynamically. This was a bit of a worry given that you’d actually want to test it first. So you will need to use something like XAMPP and put your folder in the xampphtdocs folder and then with XAMPP running, in a browser go to http://localhost/yourfolder/index.html …voila the URL now changes dynamically.

Once you strip out all that excess code, using SWFAddress for jumping to a specific frame is really rather simple. At its core, it’s one major function and a few methods:

* the main function is SWFAddress.onChange and it’s triggered everytime the URL changes; basically stripping out the important bit from the URL (e.g. the #page05 bit) and using that in Flash to go to the appropriate frame with that label

* then every button that affects navigation uses SWFAddress methods for the following three button events:

onRollOver (optional – uses setStatus to add to the URL that displays in the browser’s status/prompt bar at the bottom of the browser when your pointer rolls over the button)

onRelease (important – uses setValue and specifies what to add to the URL to uniquely identify the page by specifying the named frame to jump to, which of course will then trigger onChange – you do not need to use gotoAndStop as well in this onRelease event because that is done in onChange)

onRollOut (optional – uses resetStatus to clear the browser’s status/prompt bar so that nothing displays there when your pointer rolls away from the button)

* I wanted to remove references to # in the original code to save one having to set all the named labels to have # in front (e.g. #page08) but it caused the pages to cycle when one jumps to a specific frame and I’m not sure why. For now, it’s definitely safest to just prepend frame labels with a #
——————————

Again, I am not trying to be critical in the least with this, just some suggestions and findings. Especially for the slightly newer coder out there who will find this article. As I said, your site is the true saviour of SWFAddress and I just want to see it grow!

Keep up the great work and thanks again.
Vaughan

Other posts that might interest you:

• Move over Dipity! AVE, a new interactive timeline editor to put on your radar

My first large package, Hellgate, was sized to 757×650 and centered on the page.

My Virginia Tech anniversary package was sized to 900×700 and centered.

My art museum interactive was sized to 1000×670 and centered.

As you can see, I only remained consistent in terms of centering my packages. This wasn’t by accident though – after learning more about my audience and looking at the analytics, I realized that it was relatively safe to design beyond the 800×600 safety frame.

However, I fear that some viewers got the horizontal scroll bar on my art museum package, which is never a good sign. I don’t remember Roanoke.com’s audience stats anymore, but let’s take a look at II’s audience:

Within the last month, here is the break-down:

Screen Resolutions:
1440×900 — 20.56%
1280×800 — 16.48%
1680×1050 — 15.23%
1024×768 — 13.40%
1280×1024 — 11.24%
1920×1200 — 10.77%

Browsers:
Firefox — 59.03%
Safari —- 18.40%
IE ——- 17.36%
Chrome — 3.38%

Operating Systems:
Windows — 51.93%
Macintosh — 45.68%
iPhone —– .95%

So, from this data I can tell that if I were to replace my WordPress site with a Flash package sized at 1024×768, I would know that 85% of my audience would see it perfectly without having to scroll. Also, looking at the different versions of browsers that you all are using, I know that my WordPress theme is compatible with everyone’s preferences. For an HTML site, browser type is especially important as certain blocks of code do not work in previous versions.

Monitor size, resolution, alignment and layout should all be considered when designing your site. Sometimes it is impossible to design for the ancient giants like Netscape 4 or IE 4, but it is important to design sites to fulfill the majority of needs. You can get this information by tracking your visitors with google analytics or another usage tracker.

For instance, at TheCounter.com, stats from March show that 75% of worldwide traffic is utilizing IE 6 or 7. However, it is scary to see that more than 170,000 people are still using IE 5, a browser that just turned 10 years old.

In addition, the stats also show that 75% of worldwide traffic either uses a resolution size of 1024×768 or 1280×1024. So maybe it is time to stop using 800×600 as the standard size since only 7% are stuck on that itty-bitty screen …

While reading Web Design in a Nutshell, I also learned more about the debate between fixed versus liquid web pages (ie. fixed at a particular size vs able to resize and adapt to various windows). I prefer the latter, also called fluid, simply because I enjoy having the choice of how I want to view it. A great example of a fluid site is New York Times’ producer Tom Jackson’s masterpiece, White City Stories.

There is also a debate about pop-up browsers and automatically sizing content. I think the author said it best:

“Another, more drastic, approach is to run a Javascript that resizes the user’s current browser window to accommodate your design. In my opinion, this is just bad manners — like visiting a stranger’s house and rearranging their furniture without asking.”

The Edge, South Florida Sun-Sentinel’s multimedia gallery, is guilty as charged in resizing browsers to display multimedia content and it drives me crazy.

So I’m curious … what standards do you go by in designing sites and multimedia interactives? Do you have a personal preference in the ongoing debate between fixed vs. fluid, centered vs flush left, pop-ups vs. resizing code?

Other posts that might interest you:

• Five ways to rock an advocacy video
• Facebook product manager Bubba Murarka on designing for the social Web
• Best of II, 2011

Flash man by Zerofractal Studio

7/22/09 UPDATE: Read the latest tips, and download more simplified and updated files HERE.

Back in October I wrote a tutorial on how to utilizing deep links in Flash files. This post has consistently been the most viewed page on the site and I have been receiving several emails asking for help fixing bugs. Although I am happy to help individual cases, I decided it might be best to provide my files as well as publish other II reader’s trials, tribulations and success stories to help everyone out there who is also working with SWF Address.

Here is my example, where I built the very basic core functionality of a Flash file using AS2 with deep links. Notice how the forward and back button on the browser works to navigate through the site.

(You aren’t judging the lack of design, right?? … hey, I am a student so I have to balance my time!)

Click here to download these files. Included you will find eight files:

swf_address.fla (CS3)
swf_address.swf
index.html
AC_RunActiveContent.js
SWFAddress.as
SWFAddressEvent.as

swfaddress folder with two files:
swfaddress.html
swfaddress.js

I suggest that you begin by opening my file, adding buttons and the corresponding code to make it work on your own. Then, start with a fresh .fla in the same directory, using all of the other javascript files, and try to make that work. Once you get the basic functionality working, then try to integrate it into a larger project with other code. This way you will know whether or not pre-existing code is preventing your deep links from working correctly.

Here are case examples from II readers who have used it in their projects:

Pieter Brink successfully integrated it into his African production company website. He got it working from my initial tutorial, so congrats to him!

Camilo Cadena is incorporating deeplinking into a small business site. Currently, this version has a bug in IE 6 and 7 that aborts the script and begins looping if the user repeatedly hits the back button. I am assuming it is because the file is so large that it takes a second for the deep link to update, and this delay breaks the code. While he works out this last bug, here are his tips for getting as far as he did:

• “space (renders as “%20″) underscores or dashes are not-friendly characters” for the deep link declarations
• “the value on the declared title MUST match the property name after “$” sign”
• “While debugging, I erased the SWFAddress.setStatus(‘STATUS’) [in the onRollOver state] and at the end worked fine without it.”
• Most importantly, “coding can be challenging, can be frustrating at times, but once things work out, yummy, code goes back to cool.” That is something we can all agree with!

Reader Julianne Veterre is also currently on the verge of getting it to work. Since she is using CS4 (lucky her) I cannot see her files, but here is her situation in case others have done through something similar and figured it out:

“I have the pages and the links changing. However my loader quit working, and when you hit the back button, in FF, the link changes but the page stays the same…and in IE hitting the back button takes you all the way back out of the page.”

So, for all you programmers out there, if you can help Camilo and/or Julianne, please leave suggestions in the comments! For everyone else, I hope my example files help you accomplish deep linking for your future projects.

Happy coding II readers!

Other posts that might interest you:

• Move over Dipity! AVE, a new interactive timeline editor to put on your radar

Image credit: Columbia University’s New Media Technology Center

My former classmate Jason Tucker passed along a fascinating concept that he discovered using FlarToolkit. In layman’s terms, he described it to me as a tool that “uses your webcam, tracks a shape and then uses that with PaperVision and Flash Player 10 to create an augmented reality.” He continued by saying that “you could potentially use it to track a person’s eyes and use their webcam to control a panoramic image as they rotate their head.” That got my attention!

I am still trying to figure out what exactly “augmented reality” means. GE is using it in an interactive about their smart grid. I went to check it out, but it couldn’t find my MacBook Pro’s built-in camera (which obviously is a major problem). I watched their promo video though and my curiosity grew:

> Watch the original video on YouTube and other augmented reality videos

Blogger Mikko Haapoja has two great posts both introducing and describing the concept, and giving an informative tutorial on how to get started.

According to another blog, FlarToolkit uses AS3 and was originally written in Japanese.

Jason put it best in his email: “I don’t know what the journalism application could be, but it is certainly cool nonetheless.”

CNN’s use of holograms during election night is a type of augmented reality, which got mixed reaction from the blogosphere. I wonder if there will be other instances of this technology use in the near future …

Other posts that might interest you:

• Move over Dipity! AVE, a new interactive timeline editor to put on your radar