Thursday, December 2, 2010

Guide Using jClicker (a Javascript Recommended Slideshow Code)

planning your show
Before you even begin reaching for the computer, you should sit down with some old fashioned pencil and paper to plan your slide show. Do it as a list, an outline, or even a series of simple sketches. Whatever works best for you.

For each slide in your show, give it a simple identifier name. For example, when I was creating the short slide show from my trip to the Grand Canyon (used as the jClicker demo), I might create a list of slides:

  • fall-colors
  • canyon-walls
  • campground
  • black-bridge

Each item corresponds to a JPEG image that I have either (legally) acquired from the Internet, scanned from a photograph, captured with a digital camera, or perhaps created on the computer.

You should also write a short caption for each slide, and a descriptive short title that will appear from the navigation menu.

slide file name short title caption
1. fall-colors.jpg Autumn Colors Autumn Colors on the way down
2. canyon-walls.jpg Colorful Walls View of Canyon in Sunset
3. campground.jpg At the Campground Entrance to Bright Angel Campground
4. black-bridge.jpg Colorado River Black Bridge across the Colorado River

a bit about frames
The jClicker uses web page frames. A web page with frames allows you to chop up the screen area into separate pieces, into which different pages may be loaded. It's like making one page be the composite of several others.

There are some problems for designing web sites with frames (inability to bookmark invidual pages, counter-intuitive navigation for the browser back buttons, problems for people with accessiblity challenges). However, the jClicker is not "normal" web content that would create these problems, and the frame meatphor is appropriate for a control area that must be always visible. We have incorporated appropriate code into the jClicker so someone unable to use frames can still access a file listing of the images.

For more information about frames, see NetScape's documentation or the very excellent Sharky's Netscape Frames Tutorial by Charlton Douglas Rose or Joe's Frame Tutor.

clicker frames

For the jClicker web pages, we are using two frames:

  1. The slide frame holds the main display. Think of it as the "screen" onto which we are projecting our slideshow.


  2. The clicker frame in the bottom is our control panel. Depending on what actions we take, the clicker frame tells the slide frame what to display.



setting up your files
The first thing you will want to is create a folder/directory to contain your slide show. You may name it anything that you like. For example, let's call it:

directory show

Inside that folder/directory you will need three HTML files and two sub-folders.

NOTE: All of the files are supplied in the template that you will soon download.
document index.html
document open.html
document clicker.html
document myshow.js
document clicker_control.js
document clicker_functions.js
document dark.css
document light.css
directory buttons
directory images

Now let's review what each of these files do...

document index.html
This is the file that sets up the layout of the frames. It sets up the following regions of our display:

the frames

document open.html
This file creates the opening screen of your slide show and appears in the slide frame. The format for this screen is created automatically by the jClicker.

document clicker.html
This file provides all of functionality that is built into clicker frame. There is nothing to edit here as it is merely a template.

document myshow.js
This text file (an external JavaScript file) includes parameters you can edit to design your slide show, including image file names, captions, etc. It is read by the clicker.html file when it loads. We'll go into more detail in a later section.

document clicker_control.js document clicker_functions.js
These files contain all of the JavaScript programming code that make it work. There is nothing you need to do with these files, just make sure you have them!

document dark.css document light.css
These files are Cascading Style Sheet (CSS) documents, specifications for formatting the background color, text that appears on the title screen and the slide captions, as well as the box that surrounds the displayed image. If you are familiar with CSS, you can easily customize the appearance by editing these text files. If not, just leave them alone! There are two different versions, dark.css and light.css to format slide shows with dark or white backgrounds.

organizing your images
You will need to gather the graphics files that will be displayed for your slide show. They should all be in web page image formats such as GIF, JPEG, or PNG. You can download images from the web, create them with a digital camera / scanner, copy them from clip-art CDs, or create them in a graphics program on your computer.

How you get them is up to you, just be responsible and do not use someone else's images without their permission!

If you do not have a handy set of images, you can try looking for them on the web from:

Visitors to your slide show will very much appreciate if you use optimal comrpession on your photographs. Desktop software can easily reduce the file size of your images by a factor of 10 without sacrificing quality. For more help in learning how to shrink download time for your images, see:

Note that the jClicker is specifically designed so that it only will load the images requested- you may have 1000 images in your slide show, but a viewer does not have to eait for all 1000 to download before they can watch the show. As you are viewing one image in the slide show, the jClicker will pre-load the next image ahead of time so it can be seen more quickly.

NOTES: The names of the files must exactly match the names you listed; the file names are case-sensitive from a web server (e,g, a file named "Fall-Colors.jpg" is not the same as one named "fall-colors.jpg")

The file names for your images should exactly match the names you wrote in your outline (see the planning your show section). For example, in our Grand Canyon example, our slide image files are:

  • fall-colors.jpg
  • canyon-walls.jpg
  • campground.jpg
  • black-bridge.jpg

So we would put 4 images and one HTML file inside the images folder/directory:

documentindex.html
document open.html
document clicker.html
document myshow.js
document clicker_control.js
document clicker_functions.js
document dark.css
document dark.css
directory buttons
directory images
directory fall-colors.jpg
directory canyon-walls.jpg
directory campground.jpg
directory black-bridge.jpg

directory buttons
These are static images used to present the buttons for the jClicker. Leave them alone!

directory images
This is where you should put all of your slide image files and HTML files for non-image content.

configuring the jclicker
The last thing you need to do is to customize the jClicker for your very own slide show. This is done by editing some of the JavaScript code in the myshow.js file. But don't worry if you're worried about having to know anything about JavaScript! All you are doing is editing a text file. We've set up the code so it should be clear as to what exactly you do. You can follow our steps here as well.

NOTE: When editing your myshow.js file, we recommend that you use the basic text editor that comes on your computer, meaning the Windows NotePad for PC users, SimpleText for Macintosh OS 9 and older, or TextEdit for Mac OSX. Other worthwhile (and free) tools include EditPad Lite for Windows, BBEdit Lite for Macintosh.

As a starting point, you can look at the way we set it up in the example template file for the Grand Canyon slide show. We will review the 7 sections that you will need to edit.

NOTE: If you have created a jClicker slide show using our a previous version of our template, you will have to do some copy paste work to update your slide shows. Our newer version does not require you to number the items, making it easier to build, edit, and modify.

(1) SET UP THE SLIDES
The jClicker needs to know three things about each of your slides:

  1. The image file name. The jClicker assumes the image files are stored in the images folder.
  2. A short text description used on a navigation menu that allows the viewer to jump to any slide.
  3. A caption string that is displayed with the image.

The format expected for each slide consists of 4 separate lines of data that are the three items listed above plus an extra line of code ic++; that increments the counter for keeping track of your slide show. The order of each set as listed is the order in which the slide show will run.

general format example 
ic++;
slides[ic] = 'slide1.jpg';
menus[ic] = 'Slide 1 Short Title';
cap[ic] = 'Slide 1 Caption';

ic++;
slides[ic] = 'slide2.jpg';
menus[ic] = 'Slide 2 Short Title';
cap[ic] = 'Slide 2 Caption';

ic++;
slides[ic] = 'slide3.jpg';
menus[ic] = 'Slide 3 Short Title';
cap[ic] = 'Slide 3 Caption';

   :              :
   :              :
 
ic++;
slides[ic] = 'fall-colors.jpg';
menus[ic] = 'Autumn Colors';
cap[ic] = 'Autumn Colors on the way down';

ic++;
slides[ic] = 'canyon-walls.jpg';
menus[ic] = 'Colorful Walls';
cap[ic] = 'View of Canyon in Sunset';

ic++;
slides[ic] = 'campground.jpg';
menus[ic] = 'At the Campground';
cap[ic] = 'Entrance to  Campground';

   :              :
   :              :

The ic code in the [ ] brackets is a placeholder for the logical that counts the number of slides. Note also that slide file names, menu titles, and captions must be in single quotes. Avoid using apostrophes (single quotes, e.g. ' ) in your slide titles- if you must have one, it must be preceded with a backslash, \' (the backslash will not appear).

If you ever need to delete a slide, just remove its four lines of code. Likewise, to re-arrange the order, you merely move the four lines to the desired location in the slide show. This makes modifcations very easy!

(2) SET UP THE TITLE PAGE
The jClicker automatically creates a title page for your slide show, with text you provide in this section.

general format example 
var showTitle = 'text for slide show title';
var showCredits = 'person to credit';
 
var showTitle = 'Grand Canyon North Rim (1995)';
var showCredits = 'photos by Alan Levine';

(3) SET THE AUTOSHOW SETTINGS
Set the auto_start to true to create a slide show that automatically opens in self running mode.

general format example 
var auto_start = xxxxx;
 
var auto_start = false;

OR

var auto_start = false;

You can also specify how long the delay is when the jClicker runs in auto-advance mode. The number entered here is time in milliseconds, so each increment of 1000 represents 1 second of delay time. Note that this is the minimum amount of time between slide advances; the jClicker will not advance until the image of the current slide is fully loaded (shown by the indicator graphic in the bottom part of the jClicker).

general format example 
var delay_time = xxxxx;
 
var delay_time = 8000;

(4) SET THE BACKGROUND MODE
The jClicker can display the slides against a light or a dark background, as indicated by this variable. A value of true tells the jClicker to use a light color background and a value of false will result in a dark background for your slide show.

general format example 
var light_mode = xxxxx;
 
var light_mode = true;

OR

var light_mode = false;

These settings also tell the jClicker with external Style Sheet to use for the formatting.

(5) SET CAPTION ALIGNMENT
The jClicker can place the captions above the slides, below the slides, to the left of the slide, or to the right of the slide. You specify this using the values defined for cap_align:

  • 1 = captions centered above the picture
  • 2 = captions to the left of the picture
  • 3 = captions to the right of the picture
  • 4 = captions center below the picture
general format example 
var cap_align = X;
 
var cap_align = 1;

OR

var cap_align = 2;

OR

var cap_align = 3;

OR

var cap_align = 4;

(6) SET THE STARTING SLIDE
By default, a jClicker slide show starts with a title page that is generated based on the configuration in section (2). However, if you want your slide show to start with a specific slide, you can use this area to indicate which one appears first. A typical example would be a long slide show where you recently added a series of images, and you would like viewers to start at the top of the most recent images.

The default value is 0 which tells the jClicker to start with a title page. In the second example below, we have instucted the jClicker to start with slide number 94.

general format example 
var show_start = X;
 
var show_start = 0;

OR

var show_start = 94;

(7) OPTIONAL BUTTONS
You can use the next settings the determine whether extra functional buttons appear as part of your slide show controller. All jClicker slide shows have a forward and backward buttons plus a drop down menu for navigation. The buttons you can hide if desired, include:

  1. Close Window button
    If you set up the link that opens your slide show to do so in a new browser window, this button provides an easy way for the viewer to exit the slide show and thus see the web site where they had come from previously.
  2. Help button
    This button will display a pop-up window with a brief description of how the available buttons on the jClicker work.
  3. Resize buttons
    Two buttons that allow the viewer to increase or descrease the size of a displayed image 20% for each click of the button.
  4. Autoshow checkbox
    The feature that allows the viewer to see a slide show that advances automatically every few seconds and loops endlessly.

A value of true tells the jClicker to display a button and a value of false will hide it.

general format example 
var close_button = xxxxx;

var help_button = xxxxx;

var resize_button = xxxxx;

var auto_button = xxxxx;
 
var close_button = false;

var help_button = true;

var resize_button = true;

var auto_button = false;

(8) SHOW IMAGE FILE NAME
This setting is useful when you are editing and previewing your slide show. Setting a value of true tells the jClicker to append the name of the image file below the caption, so you can track which image is currently in view. When the slide show is complete, return this to a value of false so the image file names do not appear as part of your captions.

general format example 
var slide_show = xxxxx;
 
var slide_show = false;

OR

var slide_show = true;

and the downloading links here :

The jClicker template [244 k]
site 1: http://www.mcli.dist.maricopa.edu/proj/jclicker/jclicker.zip
site 2: ftp://ftp.maricopa.edu/pub/mcli/jclicker.zip
site 3: http://realgar.mcli.dist.maricopa.edu/dl/jclicker.zip

Posted by paij0's at 12:35 AM 0 comments  

Labels: , ,

Wednesday, December 1, 2010

Placing Facebook Chat into Firefox Sidebar

Facebook Chat is cool, at least it allows you to send instant messages to online Facebook contacts. However I’m not really a fan of the chat bar being at the bottom of the page, what if I’ve left Facebook but still wants to remain chatting with my Facebook contacts? If you are using Firefox, you can place the Facebook Chat at the sidebar.


Look for Bookmarks on the top navigation. Select Organize Bookmarks…

Click New Bookmark... tab and enter the following:

  • Name: Facebook Chat
  • Location: http://www.facebook.com/presence/popout.php
  • Check Load this bookmark in sidebar.

Launch the Firefox sidebar, click Facebook Chat and start chatting with your Facebook contacts within Firefox.


then see the result... that quite nice looks..

Posted by paij0's at 10:53 PM 0 comments  

Labels: , ,

Subscribe to: Posts (Atom)