INTERDUBS for Web Designers

From Wikanual

Jump to: navigation, search



INTERDUBS is very configurable. You can create many kind of skins for your client facing pages.

This overview explains the backgrounds and inner workings somewhat. If you just look for design guidelines then simply jump to the end of this page. It is custom that INTERDUBS does the actual design implementation for its customers. Often this is a one time operation that can be done very quickly by INTERDUBS or would require significant work on the customers end.


The first part of this document illustrates the different ingredients of INTERDUBS and how they relate to the design aspect of the system.

Admin View

INTERDUBS has distinct modes for different operations. Media Management is done via the web admin interface and a couple of related tools and interfaces. These have no design component to them. They are the 'engine room' of the system, built to work fast an efficient.

Client View

INTERDUBS interacts with the clients of my customers via emails and the client web interface. These are entirely customizable. Other systems int he field allow the selection of colors and the insertion of a logo, but otherwise stay generic or -even worse- branded like the system itself. We truly believe that INTERDUBS needs to disappear from the communication between our customers and their clients.


INTERDUBS controls the appearance of its client interface via configuration variables. Each variable has a system wide default. When a customer changes a setting then this value will be used. Similarly the customer can also create a look that is basically a collection of such settings. One application is to communicate different brands via differnt such looks. Furthermore it is possible to override each variable for a specific login.

In most cases a customer starts with a range of settings that bring the INTERDUBS client presentation close enough to its branding.

Customizable Elements

INTERDUBS can and should be customized to the customers branding. Pages seen by the end client should reflect the branding and design implementation of the INTERDUBS client.

Login page

The login page is where the client will enter the user name and password to gain access to the part of the content that they have given access too. It is worth noting that a user name / password combination mostly exists since clients expect this, but they actually rarely use it. Access via direct links is much more common.

Calling login page from customer web site

It is entirely possible to have the login page on another server / website and to call the INTERDUBS login with the parameters gathered on that site. The URL that is called is

assuming your INTERDUBS segment URL is example. You need to provide INTERDUBS with 3 different CGI parameters:


The login name.


the password


the hidden variable j needs to be set to login.

This is how it can look being put together:

<form action="">
<input type="hidden" name="j" value="login"><br>
<input type="text" name="user" size="20" ><br>
<input type="password" name="password" size="20"><br>
<input type="submit" value="login">

Here is a working example for this.

The public INTERDUBS page at has a customers tab that shows the login pages of clients that agreed to be publicliy listed.

Content listing

The content listing page is often the most important area of the customers web presentation. It is where clients land when they click on the direct link. It does contain a serious of entries for files and folders. Clients can navigate the the part of the content tree that is visible to them.

Each file listing can have a range of information parameters like the file size, date, run length etc. All of these parameter are configurable individually to match the customers desire.

Furthermore there can be notes for the project as well as for each file.

Links to iTunes subscription and that allow the download of the entire segment are also available.

If configured accordingly an upload link can be offered to the client of the customer so that they can add content via the client interface.

Folder Icons

A folder is represented by a icon that also should be customized to the customers design.


Media like images and clips will have an icon associated with it. These icons are avaible in seven different sizes, and can be rendered in either the source aspect ratio or into a fixed one.

Media icons

Files that don't have thumbnails can have icons that represent their type. Contact INTERDUBS for details on this.

Play page

Depending on the configuration and web browser / media type combination INTERDUBS can play content in two different ways: One creates an overlay over the content listing and the clip plays in there. The only design difference is if the overlay will be opaque or translucent.

Alternatively INTERDUBS allows media to play on it's own page. Here time code can be display and comments can be added to a clip in general or the entire one. The layout of this page is equally controllable than that of the content listing page.

Movies in INTERDUBS can have any size, and customers actually will post content in various resolutions. INTERDUBS transport contents and derives thumbnails and meta info from the content, but will not resize the actual content.

Reel section

A reel is an interdubs page that will feature the thumbnails of clips as well as the actual clip playing on a page. Depending on a configuration content can start playing automatically or via a start function. Once a clip is done the next clip will start playing.

A play indicator can be set to indicate which clip is playing. It is also possible to display meta information related to the clip that is entered via INTERDUBS' notes function.

A reel page is usually implemented via a look, or it can be the default for an INTERDUBS customer if they use the system mostly for reel presentations.

The reel look will ignore non quicktime content such as images or folders.


INTERDUBS can either send out text or HTML email. If HTML is being used then the editable email text will be automatically embedded into the HTML template. The usual rules for the design of HTML email do apply to INTERDUBS as well.


INTERDUBS is capable of handling clips of any size. Experience shows that customers will post content of various resolution for a number of reasons. It is not therefor not wise to base a design around a fixed media resolution. This might break a designers heart, but let's face it both INTERDUBS as well as the customers design are only there to serve the purpose of presenting some other content. That is the actual star of the show. We are just the framework around it.

Web Designer Reference

INTERDUBS renders HTML pages and can use the full tool set that is available via HTML and CSS. INTERDUBS can do the actual implementation. Ideally an example HTML/CSS page is made by the customer. In this case it should be possible to have the system render the look 100%. Alternatively a Photoshop or even a bare image reference can be made to express the design intention. Under Keyword you can find a list of keywords that INTERDUBS uses for its configuration.


On the public INTERDUBS web page you will find a couple of example page under the customer tab. These can be probably very helpful to illustrate the potential of customisation of the system.

Thumbnail sizes

Image content and clips in INTERDUBS will have pre-rendered thumbnails in seven different widths:


Via the special index 0 you can also access the thumbnail with the original resolution.

The height depends on the aspect ratio of the used material. Mostly this will be either 16x9 or 4x3.

It also is possible to enforce different aspect ratios for thumbnails via a configuration setting. You can also set the maximum height of an image if you like to.

See Icon_size for details.

feeds XML MediaRSS

Since its inception has INTERDUBS provided feeds in various formats. This is a great and reliable way to gain reading access to content. See Rss feed for details.

Design elements

If you like INTERDUBS to set up the look and feel of the client facing pages then please get in touch. Also have a look at the web design elements guide.

Personal tools