Bilingual Web Slideshow Builder

Help Files (Preliminary)

© John P Reid 2004, 2005

Status

BWSB is in Beta test and will be available for use at no charge by those agreeing to complete a test report.

Contents

Introduction

Bilingual Web Slideshow Builder  (BWSB) is software for Windows 95 through XP to create Web site slide shows in any two languages using the common Western European latin alphabets (a,b,c, etc. with or without accent marks.)

What BWSB does.

The user selects a picture for each Web page, then writes a title and narrative to match in each of the two selected languages in boxes provided by the BWSB software. The software compiles HTML Web pages. First it creates a homepage with description in each language. Clicking on one of them goes to the first picture page in that language.

Picture pages have buttons for "next" and "previous" in the appropriate language. They also have a button to switch to the other language at any time. There is a "contents" button that goes to automatically compiled tables of contents in each language. Content entries are linked to the corresponding picture page. In other words, the viewer can traverse the picture pages forward or back or can go to any page directly from the contents page.

BWSB adds special tags and attributes to the Web pages to help browsers, servers, and search engines to be aware of the languages and character set used. It also allows adding lists of keywords and a description to aid search engines.

Compatibility

BWSB creates Web pages that can be validated as XHTML 1.0 Strict. This means they are totally compatible with all modern Web browsers such as the latest versions of MS Internet Explorer, Netscape, Mozilla, and Opera. However, the pages also use only the most basic format tags so they remain readable in older and even obsolete browsers. The user skilled in Cascading Style Sheets (CSS) can alter the page format to suit, however knowledge of CSS is absolutely not required for the ordinary user.

What the BWSB User Must Do

The user must be able to write in both languages. BWSB does not do the translation. The user must know how to type accented characters (if needed) and special punctuation, either by the ALT key method or by installing an alternate keyboard layout in Windows. (See suggestions.) The user must know how to resize JPG pictures for the Web.

BWSB comes with default button names and comments in English and Spanish. These can easily be altered for any combination of two Western European languages by anyone knowing those languages.


Starting a Web Site

Launch BWSB. The main screen appears. The top of the main screen looks like this, except that all the buttons may not be active yet.

Base Folder

Ignore the top row of buttons for a moment. Before using BWSB, you must set the folder where you will compile the Web site on your computer. (Later, you will upload it to the server from this folder.) If you have already created a folder, click Browse  to navigate to it. Browse can create a folder if it does not exist. For example, if C:\My Documents\My Websites\CDB exists, you can navigate to it and add "\peru" as above."

Top Buttons

Now for those buttons.

Picture Issues

Move all the picture files to the base folder. They must be in JPG format. (Sorry, GIF is not allowed.) For proper display and quick downloading by the site viewer, they should be resized to no greater than 550 pixels in width and 350 pixels in height. BWSB will warn if a picture larger than 30Kbytes is chosen. Size reduction can be done in most image software. A free downloadable program that has batch processing for picture resizing is IrfanView.

Keyboard Issues

The next steps require entering text in multiple languages. Entering text in languages other than English often requires accented characters and punctuation characters not used in English. These characters are not found on the computer keyboard in English speaking countries. There are two ways to type these characters.

  1. Alt Key Method. Special characters of many kinds can be typed by holding down the Alt key, typing certain 4-digit sequences on the numeric keypad, and releasing the alt key. For example, the Spanish ñ is produced by Alt-0241. Web sites listing these codes can be found by search engine. (Click here for one of them.) On Windows computers you can click Start/Programs/Accessories/System Tools/Character Map (or look for Character Map in Windows Help.) Clicking on a character in the Character Map will display the Alt key code in the lower right.
  2. Special Keyboard. Use Windows Help to find out how to install an alternate keyboard layout. (Use Help Index tab, enter "Keyboard." look for "languages, overlays.") Your regular keyboard then can be shifted between language layouts, usually by pressing Alt-Shift. You will need a chart of the alternate keyboard. Stickers can be purchased  to re-mark the existing keys on the right side of the key top.

The HTML language of Web sites does not permit certain characters to be used directly. For example the "les than" sign "<" is represented as &#60;. Accented characters and special punctuation also have special codes. BWSB takes care of all of this for you. You do not have to (and should not) enter the special codes yourself.

Monitor Issues

BWSB and the Web site it creates are best viewed with the computer monitor set at 800 by 600 pixels. If you know for sure that your viewers all have higher or lower resolution monitors, you can adjust the picture dimensions recommended in Picture Issues.

Filling in the Main Form

Now for the remainder of the main screen.

Enter Language Definition

Use the Pick buttons to select language abbreviations. The "Choose a Language" dialog will pop up. Scroll down the list of 19 Western European Languages and click on the language you want. You can enter abbreviations directly, but they should come from the ISO 639 standard. The two abbreviations must be different.

Enter the requested word or words in the appropriate languages. Use the English/Spanish default entries as examples if you are using different languages. These words are used in navigation bars, page titles, and other notices.

The only differences between First Language and Second Language is that the First Language entry will appear first on the Homepage.

Note that the universal copyright symbol © will appear automatically before the copyright notices. You do not have to add it.

Enter Homepage Information

Enter site titles in both languages. Note that Internet search engines use site titles to categorize sites, and it is best that titles contain no special symbols such as *, &, $, #, @, etc. They should, of course, use punctuation and accented characters appropriate to the language.

Enter descriptive text in both languages by clicking the Edit buttons. This provides a large screen and type for more accurate entry. Click the OK button on the expanded screen when done.

If you wish an email link to you to appear after the text, see advanced function Insert Owner Email Link.

Pick Web Page Colors

Backgrounds and text color are the same on the homepage and all picture pages, except that homepage site titles are Internet hyperlinks and assume hyperlink colors.

Decide whether you want a background color or a background image. If  you choose to use a color, it is safest to use the Pick button to choose from a color chart. If you understand HTML color notation (# followed by a 6-digit hexadecimal) you can enter the code directly. Click on the color edit box and acknowledge the warning.

If you wish to use an image, choose the image  radio button, then browse for the image file. The image must be in JPG format and must be stored in the base folder. It is best to use a small image (say 100x100 pixels). The Internet browser will tile or repeat it over the page. The image should have high brightness and low contrast so as to not obscure text. Many attractive background texture files are available on the Internet.

Choose a text color to contrast well with the background color or image. If you have chosen a background color rather than background image, you will be given an option to let the software choose a text color for maximum contrast with the background.

Site Information Settings

File Name Base Number determines the names of pages. In the example screen, the first English picture page would be 201en.html and the first Spanish page would be 201es.html. It can be set to any value, but preferably should contain at least three digits for clean folder display on your computer. (This setting is helpful if pictures have number file names to keep pictures and pages in separate places in the base folder.)

Pages After Homepage  reports the number of picture pages composed. A new site starts with one blank picture page. The user can not alter this number except by adding pages.

Homepage File Name  is the name required by your Web site host or server. The most commonly used names are "index.html" and "default.html" but there are others. Consult your Internet service provider.

Making Picture Pages

At the top of the BWSB main screen click the Edit Pages button. The page edit screen will appear.

Navigation

The boxes at the top indicate page number and total pages. The  Close  button returns you to the main screen.

The buttons on the left row of buttons navigate through the completed pages -- First, Previous, Next, Last. At the right of the button row there are buttons labeled --

Page Titles

Insert page titles in the two languages. Like site titles, these should not include unusual characters, because search engines will use them. Page titles do not appear on the page. They appear, preceded by the site title, on the browser title bar. They are also the titles entered in the "Contents" page and should be descriptive. In addition, page titles are also used as the "alt text" picture names for browsers that do not display graphics.

Picture

Select the picture for the page from those in the base folder. The picture browser previews pictures, and a thumbnail of the selected picture appears on the edit page.

By default, if the picture file exceeds 30 Kbytes in size, a warning will suggest reducing the file size by using an image editor. This warning can be disabled by unclicking the Warn of files larger than ... checkbox, or the file size limit in kilobytes can be changed in the edit box using the up/down control.

If the chosen file is not in your Web site's base folder, the program will offer to move a copy of the file to the base folder. It is stringly suggested you allow it.

Page Text

Enter the page text in both languages by clicking the Edit buttons. Click the OK button on each edit screen when done. The text can be as long as you wish, though long text will push the picture down on the page. Only one paragraph is permitted. Hitting the Enter key will merely return you to the main screen (from which you can easily return).

Advanced Functions

Advanced functions may not be compatible with all Web browsers. The limitations are described under each function. The Close button returns focus to the main screen.

Homepage Meta Tags

HTML has a provision called the meta tag for supplying any kind of information to networks, servers, search engines, and others. Multiple meta tags can be added to a Web page. Each meta tag usually includes a "name" value and a "content" value.

Two meta tag  are added to all pages automatically.

BWSB allows up to five additional user-designed meta tags to be added to the homepage. The one you should always add is name="keywords." Search engines use this tag's content value to index and classify your Web site. Consult a book on Web site design for guidance in selecting keywords and for advice on other useful meta tags. Enter name and content values as desired. Do not use punctuation except commas to separare words. Click the checkbox to enablle writing the meta tags when the Web site is compiled.

Another kind of meta tag  uses the attribute "http-equiv" instead of "name." Any of BWSB's meta tags can be switched to http-equiv by clicking the down arrow of the Attribute  combobox. Consult a text on HTML for this attribute's rather special uses..

Meta tags are for servers and the network and are pretty much ignored by browsers, so compatibility is not a problem.

External Style Sheets

Important: It is not necessary for the BWSB user to know anything about style sheets to create attractive Web pages. However those who understand style sheets can fine tune the appearance of the pages by changing font type, size, color, and position of text or the position of picture.

BWSB creates its own style sheet automatically. User-defined style sheets override BWSB's own style sheet because they are linked later in the Web page header. A style sheet guide in the appendix contains a list of all tags used in BWSB page and their class or ID designation.

External Cascading Style Sheets (CSSs) can be placed in the base folder. They will modify the text formatting without changing the HTML code of the page. Consult any modern text on HTML for format of  external CSSs. You must specify a file name for each CSS and click the checkbox if you want it applied.

Most modern browsers recognize CSSs, but their interpretation varies. It is well to check how your Web site looks on various browsers. Older browsers will ignore them and present the default format of BWSB which is readable and attractive.

Insert Owner Email Link

You can insert an email link to yourself on the homepage. When the viewer clicks the link, the viewers email software opens with a new blank message addressed to you with a subject line of your choosing.

The links will appear immediately following the homepage text for each language that you entered in Enter Homepage Information  above.

To insert links, click the checkbox. Enter your email address, a suggested subject, and the word "Email" in both languages. In case the viewer has an old browser or does not know to click on the link, it is well to add your email address following the "Email" word. Otherwise your email address will be hidden from view and only accessible by clicking. However, most modern browsers will recognize this link. Some mail programs may extract only the first word of the suggested subject. Use undrerline characters in place of spaces if this is a problem.

Add Return Link

It is possible to add a link to another Web site to the bottom of the homepage. This is most often used to return to some master site from which the bilingual site was reached. Enable by clicking the checkbox. Enter text to appear on the homepage as the link. Enter a URL for the master site. It must be correct in relation to site's locations on the server. If in doubt, enter the complete Web URL such as "www.jnjreid.com" without the "html://" preceding."

Various Settings

A few additional settings are grouped on this tab.

Character Set

Browsers use a character set to relate the computer code of a character to the letter displayed on the monitor and to the keyboard key that generates it. Windows computers use a character set called Windows-1252. For all practical purposes this is identical to the International Standards Organization' s character set ISO-8859-1, which is the BWSB default. It covers the characters used in 19 Western European languages. (It only lacks special quotation marks sometimes used in German and French.)

Do not change characters sets without good reason. You might, for example, use ISO-8859-2 for a German/Polish bilingual Web site, but you and your viewers would have to have the necessary software to interpret the monitor and keyboard codes.

Picture Accelerator

Clicking the picture accelerator checkbox may speed up picture downloading for your viewers, especially those without high-speed Internet service. As each page is loaded and its picture displayed, the accelerator will attempt to preload the picture for the next page as well without displaying it. It works best for pages with a lot of text or with pictures that need to be studied a bit.

There should be no browser compatibility problems. However, have several people view your site with and without the accelerator to see if it really helps. Some very old browsers may show both the current and future picture and confuse the viewer.

Insert Revision Date

Adding the latest revision time and date to a Web site increases credibility and may influence search engines. Click the checkbox to insert a revision date on the bottom of the homepage. Enter text in any desired language to preceed the date. The time will be shown in 24 hour format followed by the date, a three-letter month abbreviation, and a four-digit year.Background Sound


Compile Web Site

Press OK to return to main screen. Press Compile Pages. Compilation will take a few seconds, depending on the number of pages and the speed of your computer. A progress bar keeps track.

When compilation is complete, press Browser View. Your computer's default browser will display the site just as it will appear on the Internet.

Congratulations, you have created a bilingual Web slide show.

Uploading to Server

Consult your Internet service provider or Web site host as to the best method of uploading to its server. Every host and service provider is a little different.

Upload all .jpg files, all .html files, and all .css files in your base folder to a single folder on the server. There will be two other files (discussed below) in your base folder. These should not be uploaded but will do no harm if they are.

Proofreading and Backup

The base folder will contain a file with a .bld extension. This is the file to which BWSB saves site data. If you wish to backup your site, this and the picture files are all that need to be saved. The file is in ASCII Text format but should not be edited by the user.

The base folder also contains a file with an .rtf extension. It contains page titles and text in a format that can be read by most word processors such as MS Word or WordPerfect. You can use the word processor's spell check and grammar check to proof the text. (Corrections must be re-entered manually in BWSB.) Check the word processor's help file for instructions on installing spell checkers for multiple languages.

Support

Support for BWSB can be obtained by emailing jreid@dca.net. I check my email several times a day, but occasionally travel out of email range for several days.

Appendix

Style Sheet Tags, Classes and IDs

Homepage Tags

body

h1.lng1 - First language title.

p.lng11 - First language descriptive text and "mailto.".

a - Link

hr - Horizontal rule above footer.

p#rtrn - Return link text.

p#date - Revision date text.

p - BWSB credit.

p#accel - Picture accelerator container.

Picture Page Tags

body

p#nav - Navigation bar.

a - Links

p#main - Page text.

p#pict - Picture container.

p#copyr - Site owner's copyright statemement

p#accell - Picture accelerator container.

Content Page Tags

body

h1 - Title

ul - List of pages

li - List item in above

p#nav - Navigation bar

a - Link

BWSB Style Sheet BWB.CSS

The BWSB a typical external style sheet that applies to all pages reads as follows. User-defined style sheets designated for any of the above types of page will override the built-in style sheet for any tags they define.

body {color:#000000; background-color:#FFFFFF; background-image:url(papel1.jpg);}
p, ul {font-size:1.2em}
a:hover {color:green}
p#nav a {font:bold 1em sans-serif; background-color:#eee}
p#accel {visibility:hidden}

Site Save File Format

The .bld file which contains all of the site data except the actual picture files is in ASCII text format. It can be edited with great care. Save a backup copy before editing. Edit it only in Windows NOTEPAD. Using an ordinary word processor or other text editor will probably insert carriage return characters (paragraph marks) wherever the word processor wraps lines on the display screen. This will make the file unreadable by BWSB and the Web site data will be lost unless there is a backup..

Each line in the file is either a comment (preceded by "//") or stored data. The stored data is usually the exact text that appears in the corresponding BWSB edit box. Settings for radio buttons and check boxes are stored as "TRUE" or "FALSE." (Must be upper case.) For example, the following lines indicate the homepage uses an external style sheet named "home.css."

//Homepage External CSS
TRUE
home.css

The data stored follows the data entered in BWSB from top to bottem of the forms — first the main form, then the advanced functions form in tab order, then the page editing form.

If a backup of a Web site is to be made, only the picture files and the .bld file need be saved. With these, all other files can be recreated by BWSB by compiling the Web site.


End of Text