Chapter 13
Editable Regions and Offline Sites
HTML5 introduced many technologies for the multimedia developer. Audio, video, CSS, and container tags have improved. HTML5 also offers many other enhancements. We will explore two of the new technologies in this chapter: editable content, which is an attribute of a region that allows the user to add comments to a web page, and taking your pages offline. Although neither technology is directly related to multimedia development, with a little thought, both editable content and offline files can be applied by multimedia developers.
Editable Content
Editable content, a feature first introduced by Microsoft, turns your HTML pages into text editors. With a little code work, you can make the Web a full, rich text editor.
Editable content allows the developer to create a region on the page in which users can type text. This region, typically a div or other section, can accept any text the user wishes to type. You, as the developer, can control some of the final markup of the user-generated text. The user simply clicks within the region and starts typing. Any of the text within this region can be edited by the user. The text entered by the user will be stored within the region’s innerHTML property. This can be accessed later in JavaScript code.
Creating an editable region in your code is simple. You need to add the attribute and value contenteditable="true" to the section. On Chrome, the editable region is clearly identified on the screen with an orange border. Unfortunately, other browsers do not identify the region. For consistency across browsers, use a CSS style on the :focus pseudo class.
Creating an Editable Region
Code Listing 13-1 shows a simple editable region and a JavaScript function that reads the innerHTML region and deposits it into a paragraph. Additionally, Code Listing 13-1 uses local storage to store the edits placed in the object.
Code Listing 13-1 An editable region
Figure 13-1 shows the region being edited by a user. The coolness factor of Code Listing 13-1 is that the screenshot clearly shows the region was edited by the user.
Figure 13-1 The changed region
When the page loads, the wall section holds either the phrase “Replace this text” or the last edit by the user. The figure shows that “Replace this text” was replaced with my own text. When clicked, the image called readWall(), which read the innerHTML from the first section called wall, added a thank you, and then changed the innerHTML for the second section titled walloutput. Clicking the button also wrote the edits into the local storage for the browser. When the page loads, local storage is read and placed into the section.
Code Listing 13-1 also shows an important item to remember about editable areas. You need to inform the user that the region is editable. All editable regions should have some placeholder text with instructions. Without this text, the user will need to click to find the region.
A Game with Editable Content
Let’s see how editable content can be put to good use by a multimedia developer. The example in this section is a simple game called Name That Wav. The site plays a medley of four songs. The user types the names of the songs in order in a content-editable region. To begin, the region has an ordered list for structure. As long as the user does not completely remove the ordered list from the area, the edited text will remain in an ordered list. The code to check the correctness of the answers depends on the ordered list remaining intact.
TIP
I used the freeware program Audacity to merge and convert the sound file.
Code Listing 13-2 shows the complete code for the game. The HTML code uses the <audio> tag introduced in Chapter 6. I added the preload="auto" attribute to speed up the loading of the music files.
When ready, the user clicks the Play button. The audio player will then play the songs. The user can type the names of the songs into the ordered list. The Score button will call the function readList, which will strip the <li> and </li> from the song names. It will then compare the songs in the order typed to the correct order.
To simplify the game, the song names are converted to lowercase. For every song, the user gets right, the right variable is incremented. If the user gets four correct, a congratulatory message appears. If the user gets fewer than four right, a consolation message with the number of correct answers appears, as shown in Figure 13-2.
Figure 13-2 A sample run of Name That Wav
Code Listing 13-2 Name That Wav
Name That Wav is one use of a content-editable region. The same effect could have been accomplished with a form. However, the numeric list is harder to achieve with forms than it is with the editable regions. I like the results of the program. You can see the choices you made and the number you got right.
Offline Sites
We are becoming more and more connected every day. Wireless Internet is available over 98% of the United States. In other countries, the level of coverage is actually higher. It is becoming difficult for us to unhook and come offline. However, there are still times when we are not connected to the Web. Traditional HTML meant that your web site was unavailable without a connection. The new offline feature of HTML5 changes this.
HTML5 now allows your pages to be available offline. You specify which portions of your web site are available offline. When users visit these portions, the content is downloaded to their device. Depending on the browser, they may not even know that the content is being downloaded. Once users have visited the site, they can still access the offline material, even without a web connection.
The challenge to developers is how to handle this offline capability. For a simple static HTML page, the process is straightforward: List the items to offload on the device, and your site is available offline. For sites that depend on user interaction or that gather user input, the process is trickier. You need to not only offload the site to the device, but you also need to handle the interaction both offline and online.
For a site that gathers user input and posts it to a server, one strategy is to hold the user input using local storage, and then post the data once the user is back online. For a multimedia site, you must decide what multimedia content can be offline. There may be several legal ramifications of offloading video and audio.
Manifest Files
Making pages available offline requires building a cache manifest file. The cache manifest file tells the web server that hosts your page which items are to be downloaded to the client device. It lists those items that will be downloaded, which items are to be available online, and what to do if your user attempts to access an element offline that is not available.
Manifest File Preparations Before the cache manifest file will work, you need to add a MIME type to your web server. Specifically, you need to add text/cache-manifest .manifest to the list of document types your web server will download. If you do not add this MIME type, your manifest file will not download. If you are paying for hosting, an e-mail message to your host provider may solve the problem. If you host your own web page, you will need to talk to your network administrator to add the MIME type.
You may have a hard time getting the manifest file to work from your web host or locally. To test the examples, you will need a web server that you control. Here, I discuss how to add the MIME type to an Apache server installed on a Windows machine. For help with Internet Information Services (IIS) on a Windows server, visit http://technet.microsoft.com/en-us/library/cc725608(WS.10).aspx.
If you do not have one, download a WAMP, LAMP, or MAMP stack. These programs load working copies of Apache, MySQL, and PHP on a computer. The W stands for Windows, L for Linux, and M for Mac. In Windows, save your files into the c:wampwww folder that is created on your system. Once the files are ready, you will need to edit the httpd.conf file and add the following line, with the rest of the AddType lines.
Once this line is added, restart the service, and you can visit the site as 127.0.0.1/yourfile.html. The files will then download and be available for offline viewing. You can turn the Apache service off, and the site will work offline.
A Simple Manifest File
The cache manifest file is a plain text file with up to three sections, as shown in the example in Code Listing 13-3.
Code Listing 13-3 A sample manifest file
Code Listing 13-3 lists all of the possible portions of a manifest file. The first line is required. All manifest files must start with CACHE MANIFEST. The offline API very clearly lists this requirement.
The second line is a comment listing the version number. This comment serves two purposes:
It allows you to track the number of times you have changed the document.
It allows you to signal a change to your web server to download a new copy of the files to the client device.
To clarify the version number issue, imagine that you visit www.webbingways.com or www.mhprofessional.com/computingdownload and download the Name That Wav game to your device. After this file is downloaded, I make a change in my code. You now revisit the game online. Your browser and the web server will communicate that the file has already been downloaded. The offline files will not reflect the change. If I adjust the revision line, the web server will signal to the browser that a new offline version is available, and will download the new content to your device.
The first header in the manifest file is CACHE:. The CACHE section, also called the explicit section, indicates the resources that are to be downloaded to the client. Any files in this section will be downloaded to the device. You may use a relative path, as in the example, or a fully qualified domain name (FQDN) to the file. Any files listed in the manifest file not in a section are considered to be in the explicit section and will be downloaded.
NOTE
The CACHE section in Code Listing 13-3 lists the HTML file. Technically, this is not required unless you have multiple pages for offline use. I included it simply for completeness.
The FALLBACK section lists the file that will be opened if the user attempts to access a resource that is not listed in the explicit section. This section is optional; include it only when you have a NETWORK section.
The NETWORK section lists the files and resources that are to remain online. Several candidates will appear here. Any copyrighted content should remain on the network. Scripts that post to remote servers must remain online. Any resources that you do not own also must remain online.
An Offline Application
Now, let’s look at a complete application. This example takes the Name That Wav page (Code Listing 13-2) offline. All portions of the page will be available offline.
To build the offline file, I wrote a manifest file and told the HTML page about the file, which is done in the <html> tag at the top of the page.
Code Listing 13-4 lists the short manifest file, called offline.manifest. Since all files are available offline, I did not specify CACHE, FALLBACK, or NETWORK. The server will treat all of the files listed as offline files to cache.
Code Listing 13-4 The manifest file for Name That Wav
Code Listing 13-5 shows the beginning of the HTML file. The only change to the HTML file is the addition of manifest property in <html manifest="code13-4.manifest">.
Code Listing 13-5 The offline-capable HTML file
You need to be careful to include all files in the manifest file. If you forget a file, then your page will not work properly offline. Figure 13-3 was generated by forgetting to include the play.png file in the manifest. Notice that the play image is missing. Additionally, failing to list a file in the manifest file may cause the page to fail online as well.
Figure 13-3 A forgotten image in the cache manifest file
Detecting Offline Code
Code Listing 13-4 is the manifest for a very simple offline site. Every part of the file is to be available offline. There is no difference in functionality between offline and online. This will not always be the case. Quite often, your sites will need to know when they are online or offline. The DOM provides a number of methods to determine this status.
According to the W3C specifications, navigator.onLine is supposed to return true when online and false if offline. Unfortunately, this property is handled differently across browsers. Firefox and Internet Explorer require a switch to offline mode before this property works. Chrome and Safari do not consistently detect your offline status.
Another choice for detecting the online or offline status is to set event handlers. The events fire whenever the status of the browser changes. Again, this functionality is not yet consistent in the browsers. Code Listing 13-6 shows the creation of these event viewers and a call to navigator.onLine.
Code Listing 13-6 Offline detection
Caching Multiple Pages
The previous examples cache only one page. Your offline application may cache several pages. For this to work, you need to list all objects in the CACHED section. Items that should not be cached are left in the NETWORK section.
Let’s see how to extend the Name That Wav page. Instead of one page, this example has five pages. The first four pages allow you to hear the song prior to taking the test. It can be considered training. The fifth page is the current Name That Wav page.
Whenever you finish the training portion of the page, the app tracks your scores in a database. This database can be handled only when online. The nameThatWav.html page and medley files will be listed in the NETWORK section of the manifest file. If the user attempts to access nameThatWav.html while offline, the goOnline.html page will be accessed instead. Code Listing 13-7 shows the cache manifest file for this site.
NOTE
The cache manifest file must be listed in every HTML file that is available offline.
Code Listing 13-7 A manifest file for the entire Name That Wav game
Summary
This chapter discussed two unrelated technologies. It started with editable content, which allows you to build a section that interacts with the user without building a form. The technology simplifies the creation of rich text areas and can make the user interface more elegant.
The second topic was offline site support. The ability to download portions of a web site allows you to build a page that is available at all times. You are capable of controlling which portions of the web site are available when offline. Unfortunately, the technology for detecting when you are offline has not yet matured.