“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
Help Wanted: Web Application Developer
Monday, April 26, 2010
We are very excited to announce that we will be adding a third person to our team. Please take a moment to read our job description. If you know a great web application developer, please let us know. Thanks!
WHO WE ARE:
– A two person company, you will make it three. We plan to stay small.
– We work at various locations in the Seattle area and meet in person once each week for coffee.
– We are funded by our software sales and have no outside investors or advertising revenue.
– Check out our company values and our bios here.
– We build Mac software now, but may expand to other Apple devices and the web.
WHAT WE CAN OFFER:
– A salary with quarterly bonuses based on company revenue goals.
– Flexibility: Choose your own office location that is convenient for you.
– Openness: We discuss our sales and finances at the end of each month.
– Public Recognition: No cogs here! You will be encouraged to tweet, blog, and appear in videos explaining the work you have shipped.
– Encouragement to pursue your dreams. For example, Elise is a professional stage actor who has been able to work part time from out of state during certain engagements. If we are creative and successful it is because of our families, hobbies, and artistic pursuits, not in spite of them.
CHARACTERISTICS THAT SHOULD DESCRIBE YOU:
– Pragmatic and Efficient
– You keep your New Year’s Resolutions
– Lifelong hunger for knowledge and new perspectives
– Entrepreneurial
– “Artists ship”
THE WORK WE’LL ASK YOU TO DO:
– You will create web applications built with modern standards, with dynamic features built and tested for many browsers and devices (computers, iPad, iPhone, etc…).
– Build a secure and scalable hosting service that allows our customers to publish multimedia presentations to the web. See some prototypes.
– Add localization features to our web applications to support a global customer base.
– Note that we are looking for someone with broad technical skills including front-end development (HTML5, …), server side development (PHP, Ruby on Rails, ...), and the production / consumption of web services. You will be the entire web development team!
TO APPLY:
Send an e-mail and a link to the most amazing web application you have developed to Elise Hunt at jobs@beedocs.com. No form letters please. We are standing by our inboxes and looking forward to hearing from you!
The Passion Timeline - BBC
Thursday, April 03, 2008
David Huyng, developer of the SIMILE open-source timeline project, sent me a link to this highly customized SIMILE timeline that the BBC created for Easter week. The BBC seems to have some of the best examples of interactive timelines on the web these days.
Check it out and let me know what you think of it.