ARNB.ORG: Online Schedule Information and Implementation Guide

In exchange for you entering events into the Arnb.org system, we will generate a free schedule of selected events onto your website from our database that includes the following features: direct links for weather, mapping, driving directions, automatic removal of obsolete events, support for private events and the end those annoying HTML updates when your schedule changes. You can quickly and easily update your web site's (not MySpace or YouTube until they implement OpenSocial) schedule 24/7 from any web enabled computer, giving you more time to play your music or do what you enjoy.

We understand that adjusting your page source code to generate the online schedule may be confusing, especially if you're new to web design. This guide contains the information you need for a successful conversion.  

  1. How It Works
    a. Posting events
  2. Getting Your Connection Script
  3. HTML Basics
    a. How to view your source code
    b. What to look for in your HTML source code
  4. How to Modify Your Page
  5. Adding style to the schedule
  6. Common Problems
  7. Additional Information
1. How it works
Your schedule is created from the same database and computer code used by Arnb.org. While your page loads, a script request contacts Arnb.org creating your schedule based upon a Type Code and Id code sent as part of the request. When script loading completes, a function copies the schedule data to a pre-defined location on your page. Optionally, the screen and or printed schedule may be formatted to match or compliment the existing style, fonts and colors.

 1a. Posting events

Our schedule is maintained by our user community from around the world. The schedule is collaborative, meaning you don't have to enter all the events that may appear on your schedule. For example assume you are a band: an event promoter enters an event for your band, it will show on your band's schedule. Assume you maintain a schedule for France: a band or promoter enters an event for Paris, it will show on your schedule.

If you don't already post events to Arnb.org, applying is fast, free and easy:


2. Getting your connection script
When the dynamic schedule function contacts Arnb.org, it must contain some information that is used to select specific events from the database for your schedule. Upon completion of this step, your customized code is displayed after paragraph 4.2 below. Let's begin the dynamic schedule script generation process.

Select the schedule type you want to create: Band   Geographic   Venue   Promoter

3. HTML basics

HTML, Hyper Text Markup Language is the programming language in which many web pages are written. This coding language is used on the World Wide Web. Web browsers read HTML in order to display the contents of a page.

3a. How to view your source code

If you would like to view an HTML document (also known as the 'source code'), first open your web browser. Then go the page whose source you want to modify and click View on the menu bar at the top of the screen. Next, select Source if you're using Internet Explorer or Page Source if you're using Firefox. When the document is available on a local drive or is generated with ASP, PHP or something similar, you may also open it with Notepad or your favorite text editor.

3b. What to look for in your source code

Every HTML document consists of bracketed tags which tell the web browser how to display the HTML elements. All HTML elements start with an opening tag (< >)and end with a closing tag (</ >). There may some optional statements at the beginning of the document describing the type and level of coding on the page. HTML documents have the following basic structure:

<HTML>
<HEAD>
</HEAD>
<BODY>
Your existing schedule
</BODY>
</HTML>

The opening <HTML> tag alerts a browser that this is the start of your HTML document. The opening <HEAD> tag contains your header information and is not visible when you view the page in your browser. Any text, except scripts between the BODY tags (<BODY> and </BODY>) will be displayed in your browser. The closing </HTML> tag alerts your browser that this is the end of your HTML document.

For the schedule to appear properly, you will need to place your function script somplace between the opening <BODY> and closing </BODY> tags of your source code.

If you are experiencing difficulty finding the <BODY> tags, try pressing the 'CTRL' and 'F' keys on a PC, or 'COMMAND' and 'F' keys on a Mac to open a Find text box. Then type '<BODY' (without the quotes) to find the opening tag or '</BODY' (without the quotes) to find the closing tag, and click Find next.


4. How to modify your page

If you're using a design-enhanced HTML editor, often referred to as WYSIWYG (What You See Is What You Get), it may use a Code View, or Source to view the HTML source, or your editor may use an HTML Insert feature which utilizes an 'Insert' menu tab. If you are unable to locate the HTML source code of your web page in your WYSYWIG editor, you may try opening the file in Notepad or any other text editor such as Textpad.

Every editor is different, and because only you know how you like to build your web pages, we're unable to give you exact instructions for pasting your code. However, the following general guidelines apply to any editor.  

  1. Make a copy of your production page then save it with a different name. Make all code changes to the copied version.

  2. With your editor remove the existing schedule source using either Normal or Source view mode.

  3. Establish the Insert Point by adding the following exact code where you removed the schedule:
  4. Try it with every browser you have on your machine such as: IE7, Firefox, Opera and Safari. Here at Arnb.org we also test our pages in IE6. Check the error console to be sure there are no errors.

  5. Do a "Print Preview" to see how the schedule appears when printed.

  6. When you're satisfied with the results, Publish your page, then try it again.

  7. When everything works as expected, rename the old page, then rename the new page to the production name.
Sample HTML code after conversion for RedLine Zydeco band. View this sample in your browser.
<HTML>
<HEAD>
</HEAD>
<body>
<div id='ContentDiv'>
<object><noscript><b>*****WARNING JAVASCRIPT IS DISABLED, IT MUST BE ENABLED TO PROPERLY VIEW THIS PAGE*****</b></noscript></object>
...Loading schedule from ARNB.ORG...
</div>
<script type="text/javascript" src="http://www.arnb.org/ExternalConnect/Ext.php?B=86&amp;JS=YES"></script>
</body>
</HTML>

5. Adding Style to the Schedule

Style statements, known as Cascading Style Sheets or CSS can greatly enhance the look and feel of your web page. The statements below are an example similar to the CSS used with RedLine Zydeco, you will likely want to adjust the colors for your page. Additionally you will notice there are separate sections for printing and for the screen. My general philosophy for printing is to eliminate most everything except the schedule. This is accomplished by adding <Div class="NOPRT"> </div> statements around sections of the code you don't want to see when the schedule is printed, then setting the NOPRT class not to display during printing.

Sample enhanced with CSS for RedLine Zydeco band. View this sample in your browser.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<style type="text/css">
<!--
@media print {
.NOPRT {Display: None;}
IMG, INPUT {Display : None;}
BODY, P, TD, UL, caption {
Font-Family : Arial, Verdana, Helvetica, sans-serif;
Font-Size : x-small;
color : Black;
Font-Weight : normal;}
#Schdname {color:black; font-size:x-large;}
a:link, a:active, a:visited {Color : Black;Text-Decoration : None;}
}
@media screen {
#ContentDiv{background-color:black;
    width:100%;
    max-width:1000px;
    font-size:medium;}
#ContentDiv img {border: 0px;}
#ContentDiv td {color:yellow;padding:.5em;}
#ContentDiv a[href^='http://www.redline']{
background-color:#800000;
Font-Weight:Bold;}/* selects links starting with string Not working in IE without valid DTD setting standards mode*/
#ContentDiv a{color: white;Text-Decoration : None;}
#ContentDiv A:hover, A:focus {Text-Decoration : Underline;}
#Schdname {font-size:x-large;color:#800000;}
#powered {font-size:x-small;color:#800000;}
}
-->
</style>
</HEAD>
<body>
<div class='NOPRT>This wont print</div>
<div id='ContentDiv'>
<object><noscript><b>*****WARNING JAVASCRIPT IS DISABLED, IT MUST BE ENABLED TO PROPERLY VIEW THIS PAGE*****</b></noscript></object>
...Loading schedule from ARNB.ORG...
</div>
<script type="text/javascript" src="http://www.arnb.org/ExternalConnect/Ext.php?B=86&amp;JS=YES"></script>
<div class='NOPRT'>This also wont print</div>
</BODY>
</HTML>

6. Common Problems

It's difficult to say what errors may occur, however most modern browsers have an error console that may show what is going wrong.

The Style Sheet results looks different in IE and Firefox

7. Additional Information

We have encountered a few WYSIWIG editors that produce extremely complex and non-readable HTML, making conversion difficult or impossible. 

Due to code restrictions, MySpace and YouTube currently are not compatible with our service until OpenSocial is implemented on the respective website.  

Should you encounter difficulty with the conversion process, Arnb.org will provide up to one hour of free conversion services. Should we feel the conversion effort is over one hour, we will provide a conversion cost estimate at our current hourly rate for time above and beyond any free time.

Have a question, suggestion or concern? Please submit a ticket to our Helpdesk.

Back to top

When a band is selected, a new window is opened containing an unstyled list of events for the selected band and your connection script is displayed in paragraph 4.3. Should you need to enter additional events, it should be done prior to implementation of the dynamic schedule. If your band is not available please contact us to have it entered it into the system. Multiple bands may be displayed on one schedule by encoding the parameter as B=(band1,band2...)
When a promoter is selected, a new window is opened containing an unstyled list of events for the selected promoter and your connection script is displayed in paragraph 4.3. If your promoter is not available please contact us to have it entered it into the system.
When a venue is selected, a new window is opened containing an unstyled list of events for the selected venue and your connection script is displayed in paragraph 4.3. If venue is not available please enter it into the system.
When an edition is selected, a new window is opened containing an unstyled list of events for the selected edition and your connection script is displayed in paragraph 4.3. If your edition is not available please enter it into the system.