Using AJAX to Easily Integrate Rich Media Elements

Transcription

1 505 Using AJAX to Easily Integrate Rich Media Elements James Monroe Course Developer,

2 The Problem: How to string together several rich media elements (images, Flash movies, video, etc.) into one manageable course? Using one large Flash or Captivate movie as a container can be difficult to maintain and make quick edits. Particularly, large Flash source files can become quite a mess when trying to string together several independent files. Another issue presented is the downloading time for large files. The larger the file, the longer the download, causing a great deal of frustration in the user. Flash Container Movie - Source File Or, create multiple html pages for each individual rich media file. May be slightly easier to maintain (although navigation edits are awkward), but would still have downloading issue and may break up the flow of the course due to such separation. A Possible Solution: Create one single container html page and load several external html pages each containing the rich media files into it via AJAX. Would facilitate easier maintenance, as all of the files are external and you can easily change the order of the navigation in one area of the source document. Adding rich media would be much easier as well and would not affect the external documents or initial container. Moreover, edits would be simple since each particular section has its own external file. Loading time would be much quicker since there is no need for page reloading. Potentially anyone could edit the external content, without worrying about the workings of the inner html and JavaScript. The result: a much cleaner, manageable and faster project.

3 What is AJAX? AJAX is an acronym for Asynchronous JavaScript And XML. AJAX is essentially a new technique for creating more manageable, faster and interactive web applications by combining the powerful technologies of JavaScript and XML. AJAX uses JavaScript to send and receive data between a web browser and a web server. Typical Web App - Synchronous AJAX Web App - Asynchronous The Site Map: External module files are pulled into the content area of the index page via AJAX.

4 The AJAX Setup: The AJAX container will consist of three core files, and as many external files you like. index.html This is the main html page, where you will edit your default content and navigation.

5 scripts.js This file contains the JavaScript that enables the ajaxcontentarea section of your page to be updated, while the rest of the page remains static. This file is located in the ajax folder and will never need to be edited.

6 styles.css - This file contains all of the styles that are applied to your html page. You can edit any of the attributes to style the pages to your liking.

7 A Generic AJAX Container: File Name: index.html The Default Content Area in Your HTML Page: Within the ajaxcontentarea id of your index page, you will insert whatever default content you desire. This content will be the first to appear when the user views the page.

8 The External Content: The external content can be any type of media you want (pure html, images, Flash, Captivate, etc,) and will be loaded into the main page content area div. Recall that a div tag essentially defines a division/section in a document. In this case, it defines the container area on the page. To add your external content, simply add the proper tags as demonstrated below on external pages. Below is the code for Module 1A. File Name: module_1a.html Below is what the page will look like when the external Module 1A page is pulled through the content area div tag. File names: (module_1a.html) is being pulled into the (index.html) page via AJAX.

9 Setting Up the Navigation: When you have determined the order and flow of your independent movies, simply add the file path and name within the list item as demonstrated below. These will be represented as link tabs on the top of your content area. Picking Apart the Code: id="maintab": The ID should be an arbitrary but unique ID that's added to the <UL> element of the Ajax Tab Content. class="selected": Add this class attribute to the <LI> tab that you want to be selected by default when the page loads. The content associated with this tab will also be loaded automatically. href="page to load": Use the "href" attribute of the <a> element of each tab to tell the script which external page to load via Ajax. The page can be any content file, such as html, text or php, etc. If you want the tab to instead load the "default content" that's added directly inside the container, use the keyword "#default" instead. rel="contentarea": Add this attribute inside the <a> element of each tab to tell the script to load the specified page inside the DIV container of the same ID (in this case, "contentarea"). Finally, call the function startajaxtabs("maintab") after the Ajax Tabs Content HTML to activate the script, where "maintab" is the ID of the Tabs Content. If you have multiple Ajax Tabs Contents on the page, activate them by passing each ID into the function, separated by a comma: startajaxtabs("maintab", "maintab2") File Name: (index.html) The JavaScript clip below is used to control the drop down menu and is placed in the head section of your index page.

10 You do not need to edit the JavaScript. November 5-8, 2007 Styling Your AJAX Container: Controlling the styles for the AJAX container is simple. You can make changes to the colors, tabs, size, or any other attribute by editing your CSS. Recall that CSS is an acronym for Cascading Style Sheets. This particular AJAX container serves as a universal template that can be used for several different courses, and made unique just by altering the appearance and plugging in new content. You can either embed the CSS directly in the index page, or link an external style sheet in the head section of your document as demonstrated below. File Name: Directly below is code from the head section of (index.html), where the CSS page is linked.

11 File Name: Below is a code sample from (styles.css).

12 The Final Product: File Name: index.html

13 FAQ: How can I change how many tabs I have in my navigation? Changing the number of tabs is simple. For instance, if you did not want a 5 th and 6 th module, then you would simply delete the highlighted section below. If you wanted to add more tabs, you would copy and paste the highlighted section. Note that the tabbed navigation is constructed using html list items. Each tab begins with <li> and that tab ends with a closed </li>. Nested within those tabs are more unordered lists, which constitute the sub-navigation. What if I want to change the size of my container? To alter the size of your container, specify the width and height in the.contentstyle class on the style sheet.

14 What if I don t have enough modules to have a submenu? If you only have enough content for no more than 6 modules, then there is no need for submenus. The unordered list nested within the Module lists is what creates the submenu and can be deleted if not needed in your navigation. How can I have the height adjust to the content? If you would like the height to adjust accordingly based on the size of the external content, simply delete the height attribute in the.contentstyle class of your CSS file. Download the presentation examples & template at AJAX_Examples_DevLearn2007.zip