Misc Demos

Miscellaneous Demos

The purpose of this page is to demonstrate a few other technologies, controls and techniques that are either not featured elswhere on this site or are new, interesting or compelling additions to consider for your website. The demos presented herein may change from time to time and new ones may be added. Check back periodically to see what's new and exciting in the world of web design.

The YouTube Player demo, while not exactly new, demonstrates the full capabilities of the YouTube video player. If you are able to create YouTube compatible videos, you can post them on YouTube for the world to see. Since YouTube is owned and operated by Google, they index links to videos. If those links are shared with other websites, you can boost your ranking significantly. This demo shows the full-blown YouTube player linked to my favorite YouTube (fly fishing) videos. It also supports YouTube HD content.

The second demo (Tilted Viewer) is of a rather unique and interesting image file viewer called 'TiltViewer'. It utilizes the Adobe Flash Player, as do many of the demos on this site, and presents a layered grid of thumbnail images. Click a thumbnail and the viewer will zoom in on the larger version of the image. As you move your mouse cursor around, you'll notice that the grid tilts; hence the name. You'll also notice a circular arrow in the bottom right hand corner of each image. If you click that arrow, the image will rotate 180 degress to reveal notes about the image. Very handy for annotating images and it can be disabled when notes are not needed.

If you click a thumbnail, you'll notice too that adjacent images can be clicked, at which point the viewer will slide right, left, up or down, depending on which image you click. If you click the same image again, or anywhere there isn't an image, the viewer will zoom out and you'll see the entire grid again. You will also notice arrows to the right and/or left of the thumbnail grid. These arrows, when clicked, bring up the next or previous batch of thumbnails and corresponding larger images. This is a very entertaining and highly usable image file viewer and the reaction we've received from visitors has been overwhelmingly favorable.

Again, check back from time to time for new demos. You never know what you might find here, in terms of something unique or interesting. Web technology is a constantly changing and evolving field and there's no telling what will be available next. As it evolves, the various controls and techniques that support user interface design expands and improves. As that happens, your ability to create a web-based user interface that can capture the attention of your website visitors increases dramatically. Keeping your visitors entertained is how you keep them on your site.

TiltViewer requires JavaScript and the latest Flash player.Get Flash here.

View Web Pages from Your Site

Yeah, I know ... it's a strange concept but could come in handy. These demos open windows, both sized and full, over the top of this page, in which you can display a web page from another site. WHY you would want to do this, I have no idea, but that's not the point. The point is that it CAN be done and if it can be done, someone WILL want to do it.

The following two links (Little Google & Big Google) open the Google Search Engine in a window;

Open Google in a 650 pixel x 500 pixel window over this page: Little Google

Open Google in a full-sized window over this page: BIG Google

Now Try this;

1. Enter "Brookings Web Design" in the Google search field and click the 'Google Search' button.

2. When the list of links appears, look for the one for this site and click it.

3. When this site appears in the window, navigate through the menus like you normally would.

Sites-Within-Sites-Within-Pages. Like I said, it's a strange concept but obviously, it demonstrates the power of state-of-the-art web technologies.

While is may have limited use, there may be times when you'd want your visitors to view another page or some other content that requires loading an external link (a page on another site, for example).

What this is, aside from being a strange concept, is a very good method of keeping your visitors ON YOUR SITE. And, as we all know, the longer you keep your visitors on your site, the better your odds of making a sale.

Apple OS X Style Icon Bar

This is a very interesting and compelling website addition that could be applied to many websites, as either a main or sub-menu. It looks and reacts very much like the Apple OS X operating system icon bar, which has been emulated on many platforms (Windows, UNIX, Linux, etc.). It is very flexible and many different icons can be used.

You can apply links to the icons and when you click them, your browser will load the page, image file or wherever you might want to redirect your visitors. The bar is also expandable and you can add more icons (with or without links) as needed or required. Positioning (placement within a page) is controlled by simple CSS (Cascading Style Sheets) and the response time (how they grow and shrink) of the icons is programable.

This is a fairly new method of providing this type of website menuing system. Since it is highly interactive, your visitors will enjoy using it. Again, it can be used as either the main or a sub-menu and can be implimented on any page where menus are required. You can also have different icons and links on each page that redirect your visitors to the specific content, relating to the page they are viewing.

This is a very handy and useful menu and we're certain your website visitors will like it.

Flex Web Applications

Flex is a free, open-source, highly productive, cross-platform, rich Internet and desktop application framework designed for building and maintaining expressive web and desktop applications that deploy consistently across all major browsers, desktops, and operating systems. Flex applications can be built entirely using the free, open source framework, although we prefer using the Adobe Flex Builder software, which dramatically accelerates the development cycle.

Initially released in March of 2004 (by Macromedia), Flex included a software development kit, an IDE (Integrated Development Environment), and a J2EE (Java 2 Enterprise Edition) integration application known as Flex Data Services. Since Adobe acquired Macromedia in 2005, subsequent releases of Flex no longer require a license (for Flex Data Services), which has become a separate product rebranded as LiveCycle Data Services.

In February 2008, Adobe released the Flex 3 SDK, under the Open Source Mozilla Public License. Adobe Flash Player, the runtime on which Flex applications are viewed, and Adobe Flex Builder, the IDE built on the open source Eclipse platform and used to build Flex applications, remain proprietary.

This demo features a web-based image file viewer built in Flex. The player itself is comprised of an HTML page, style sheet, SWF (ShockWave) and XML (eXtensible Markup Language) configuration files, along with the photos (taken by me) displayed by the player. There are controls built into the player to allow you to view the images in three different modes; List, Carousel and Slide Show views. There are also Pause and Play buttons when viewing in the Slide Show mode.

The controls can be found in the upper-right corner of the thumbnail viewer (bottom of page) when in List mode (the default mode when the page is loaded). When in Carousel mode, there are left and right arrows on either side of the image title. When in Slide Show mode, potition your mouse cursor over the image and the controls will appear at the bottom of the page.

The SWF file is fairly large, so give it time to download. Here is the link - Flex Demo