“More Hackable” Web Timelines
Wednesday, September 25, 2013
When we launched our original web publishing service on the Mac, we received a lot of feedback from customers who wanted to tweek and customize the timelines in order to integrate them into their websites more fluidly.
I designed that publishing service to be a very simple, one-click, web publishing service with much of the complexity hidden on our servers.
This time around, our new web publishing feature (debuting on Timeline 3D for iOS 7) aims to maintain the same ease-of-use for the people that just want to share a timeline, but also aims to be more hackable for programmers and design pros.
Hosting your own files
Timeline 3D for iOS 7 enables you to export all of the web files required for your timeline to Dropbox, allowing you the opportunity to manage the hosting yourself. For example, you could publish the timeline on a secure server (like an intranet). It also gives you an opportunity to modify the files before publishing.
Customize Style Sheets
Web designers may want to change some of the colors and styles of their published timelines via CSS, and we are providing access to the individual web files to enable them to do so.
Most of our JavaScript code and CSS has transformed into a compact format optimized for fast downloads, which isn’t very readable by humans.
However, there are a handful of CSS settings that might be useful for tweaking. I have formatted these settings in a human-readable layout with plenty of comments and placed them near the top of the “index.html” file. These settings should be easy to find and modify for experienced web developers.
While the timelines themselves use pre-rendered graphics and cannot be modified via CSS, the color and behavior of the navigation controls can.
For example, you may want to adjust the HTML body background to match the color of the page the timeline will be embedded in so that any rounding errors around the edges of the pixels are not visible.
You may also want to change the color of the bee-line at the bottom of the timeline to match your logo or the media within your timeline events.
Finally, you may have licensed a custom font for your website, and you can change the CSS to use that font for the bee-line mouse overs.
Adding custom poster image
As an example of another “hackable” element, you may have a special situation where you want to display a poster image that is clicked to load the interactive timeline.
Perhaps the poster image contains instructions on how to use the keyboard to navigate the interactive timeline. Or, perhaps you want a highly optimized poster image to save some bandwidth on a site with millions of visitors.
Now that you have access to the files, you can add content like this before the timeline loads.
How to embed a timeline into your website
By default, if you navigate to the web timeline, it will adjust to fill the window of your web browser (or your screen if you are on a mobile device).
If you embed the timeline into your website using a standard iframe tag, it will automatically size to that iframe. For example, the timeline embedded in my announcement blog post uses code like this:
<iframe src="http://i.interactivetimeline.com/demo/index.html"
width="500" height="365" frameborder="0" scrolling="no">
</iframe>
<p>
<a href="http://i.interactivetimeline.com/demo/index.html">
View Full Size
</a>
</p>
Embed at any size
Our web publishing customers have told us that they want more flexibility to embed the timeline into their websites at any size. For example, I know this blog post will be 500px wide when styled for our website. If I include images, movies, and timelines, then I want them to be 500px wide.
I may want a long and skinny timeline to use as a header for my website or a portrait-sized timeline to use beside an article.
This is now possible with web timelines published with Timeline 3D for iOS.
As I discussed last week, our new web publishing feature has two modes. It uses WebGL in browsers that support it. When the timeline is shown in WebGL, it will always adapt exactly to the window or frame that surrounds it. The size and aspect ratio do not matter.
If the end user’s browser does not support WebGL, then we show them an interactive sequence of pre-rendered images instead. Since these are pre-rendered, they are not quite as flexible on the size.
We render out each image in about a dozen different aspect ratios if you publish with the default settings in Timeline 3D. Not only that, but each image is rendered in three different resolutions.
In real-time, the javascript code will dynamically select and download that appropriate image based on the aspect ratio and size of the browser window. Yes, this takes into account retina displays.
The result of this magic is that the timeline always looks great, fills the available space, and uses bandwidth appropriately.
If you are embedding the timeline in your website, be sure to test it on a non-WebGL browser and tweak the aspect ratio until the timeline fills the iframe completely.
If the aspect ratio your coded is not available as a pre-rendered size, then there will be a border around the entire image. When you hit a pre-rendered aspect ratio exactly (or within a few pixels), the border will go away and the image will display to the edges of the frame.
Pro Tip: A more efficient render
As you may expect, it takes some time, battery power, and bandwidth for your iOS device to render all these image variations and upload them.
If you are planning to present your timeline exclusively within an embedded iframe, and if you know the aspect ratio of that iframe in advance, then you can select that aspect ratio in Timeline 3D.
If you choose a specific aspect ratio, Timeline 3D will skip all of the files that are not needed for that situation.
Specifying an aspect ratio before publishing also has the benefit of using nice simple ratios for easily calculating the optimal embedding size. “Adaptive” uses actual pixel ratios of common mobile browser, which are not as mathematically pure.
As you can see, the options for publishing a timeline are now more advanced. You can tell by the length of this post!
Our hope is that designers, web programmers, and news media will find Timeline 3D to be a valuable and flexible tool for telling their stories. If you have any questions about web publishing, please send us an e-mail at support@beedocs.com.
Labels: embed, publishing, timelines, web
Web Timelines - Demo Movie
Wednesday, June 08, 2011
Since we released Timeline 3D (v3) last month we have had several hundred customers publish their timelines to the web. Have you published a timeline yet?
Elise put together a short demo movie to show you how you can publish your own web timeline and how to manage your web timelines. Please check out the video and give publishing try if you haven’t already.
For more information about our web hosting plans, please click here. Please note that all customers who purchase Timeline 3D (v3) are automatically enrolled in the Basic plan which is free and no further registration is required.
Click here to interact with the web timeline that Elise published in the movie.
Special thanks to Matt Burke for providing the beautiful travel images in the timeline.
Labels: movie, publishing, web timelines
Beauty is Skin Deep - Web Looks
Wednesday, January 05, 2011
Our upcoming web timelines are decidedly simple in layout and navigation. They are designed from the ground up to function in a small space such as an iPhone screen or embedded in an article.
They are also designed to be intuitive to your audience who perhaps has never encountered an interactive timeline on the web before. For example, all the events can be accessed without zooming or scrolling.
However, simple doesn't mean that they can't be beautiful as well.
We were very fortunate to work with Mani Sheriar, from the Bay Area, who designed some beautiful looks that can be applied to your interactive web timelines. Here is a sneak peek of one we call "Vintage Shop - Sepia."
Simple and beautiful.
Labels: design, manisheriar, publishing, timeline
A Web Timeline Debut
Tuesday, January 04, 2011
We are putting the final touches on version 3.0 of Timeline 3D. In the coming weeks we will start to get it into the hands of some of you as part of a limited beta program. Access to the beta will be based on the date you first purchased a software license from us. Expect a full public release in a few months.
One of the major new features of v3 is the ability to post timelines to the web. The timelines are designed to be easily integrated into websites and blogs.
I am pleased to show you the first timeline published with Timeline 3D, embedded right here in the blog:
Timelines published with our software will be the most compatible timelines on the web. They work with modern desktop browsers, of course, but are also built to work well with iPad, iPhone, Android, IE6, and the basic functionality even works with javascript turned off.
While you are waiting for us to ship v3, I'd appreciate it if you could kick the tires on the timeline I posted above and let me know if you encounter any bugs. You can send your feedback to me at adam@beedocs.com.
Labels: publishing, timeline, v3