7Lesson 7: Browsers - OKALOOSA SCHOOLS...• Browser history. • Bookmarks or Favorites. • Status...

7Lesson 7: Browsers Objectives By the end of this lesson, you will be able to:

1.2.9: Identify challenges involved in designing Web pages for PDA-based versus traditional browsers.

1.3.3: Identify site strategies and technologies to avoid, including pop-up windows, single-browser sites, spam.

3.5.2: Perform site testing (functionality, usability, browser compatibility)

4.1.2: Identify accessibility issues and solutions related to Web images and animation (e.g., text-reader capability, captioning).

4.2.12: Identify the functionality of pop-up/pop-under windows (e.g., creation, benefits, disadvantages, reasons to omit from your site).

4.2.13: Define CAPTCHA and create a CAPTCHA for a Web site.

4.2.14: Explain how the TinyURL service works.

7-2 Web Design Specialist

© 2013 Certification Partners, LLC — All Rights Reserved Version 1.1

Pre-Assessment Questions 1. Which function is part of a Web browser's Internet access layer?

a. SSL encryption b. Browser window c. Pop-up windows d. History list

2. Which of these technologies should you avoid in order to maximize the number of browsers on which your site can be used?

a. ActiveX b. GIF c. JPEG d. XHTML

3. Are there instances in which pop-up windows are useful?

Lesson 7: Browsers 7-3


Browsers and Navigation The functionality of Web browsers can be divided into the following three components, or layers.

• Internet access layer — functionality that includes the protocols for communicating with remote Web sites, ranging from HTTP to various encryption types such as SSL.

• Navigation layer — functionality that tracks locations that the user has visited on the Web, and helps the user go where he or she wants to go. This layer can include a history list, which lists the sites that the user has visited.

• Presentation layer — the browser window that displays the page requested by the user.

These three basic components, illustrated in Figure 7-1, work together to allow you to navigate the Web.

Figure 7-1: Web browser layers



Although differences exist among browsers and even versions of the same browser, all browsers have some common user features:

• Back button.

• Forward button.

• URL or Address field.

• Browser history.

• Bookmarks or Favorites.

• Status bar.

• Colored hyperlinks (unless changed, unvisited links are blue and visited links are magenta).

Browsers and Design Considerations During the earlier days of Web browsers, the two major browsers of the time — Netscape Navigator and Microsoft Internet Explorer — each added unique features with expanded HTML to try to gain an advantage over the rival browser.

Although it is tempting to utilize all the features that Web browsers provide when you design a Web site, you must be careful that you do not make your site unusable by users with less dominant browsers. Whenever possible, design your Web pages using standards established by the W3C and widely supported by various browsers.

Some technologies and some design techniques limit your site's usefulness to certain audiences. Others commonly annoy users. You should avoid such technologies and techniques in your site designs, unless you have compelling reasons to use them and are not concerned about alienating some sectors of the Web audience. Following are some examples of technologies and site strategies that you should avoid when designing a Web site.

Single-browser technologies Single-browser technologies are generally those created by a vendor and thus functional only when that vendor's browser is used to view the page in which they reside. Such technologies limit your Web site's audience to users who are using the one specific browser. So unless you know that all of your site's users will be using a specific browser (such as with a corporate intranet at a company in which all users have a standard browser), you should avoid these types of browser-specific functionality in your site designs.

Two almost ancient examples of single-browser technologies are the <blink> and <layer> tags, which were created by Netscape. The <blink> tag caused text to appear and then disappear in the browser window. The <layer> tag was an early technique for positioning elements on a Web page, and Netscape's support for this tag ended with its version 6 release. Today, the universal standard for element positioning is to use Cascading Style Sheets (CSS).

Another example of a single-browser technology is ActiveX controls.

ActiveX controls The Internet Explorer browser supports the use of Microsoft's ActiveX components, or controls, which can be used to enable interactive content on the Web. For example,

NOTE: You should be familiar with all of the basic browser features listed here. If you are not, take a moment to open your browser and quickly review these features and their functions.

OBJECTIVE 1.3.3: Site strategies and technologies to avoid



ActiveX components enable users to view Microsoft Word or Microsoft Excel documents in the Web browser, and allow users to edit HTML within a browser window.

However, ActiveX technology is owned by Microsoft, so non-Microsoft browsers and non-Windows operating systems usually do not support it. In addition, ActiveX components may pose some security risk, although Microsoft has been making progress in addressing this problem. Unless you know that only Internet Explorer browsers will be used to access your Web site (which may be the case for a company intranet, for example), you should avoid relying on ActiveX components for important parts of your site.

Reliance on browser navigation Although many users prefer to use the browser's Back button to return to the previously viewed page on a site, they should not have to rely on this browser button. Browser elements are designed to assist the user, but they should be a subordinate form of navigation. You will learn more about designing Web site navigation in the next lesson. In general, if the user must use the browser's Back button to navigate your site, then the site's navigation elements are insufficient.

Pop-up and pop-under windows Every Web browser has the ability to display multiple windows and to create new windows, and this functionality can be controlled programmatically. This ability is necessary (for example, so that you can access more than one Web site at a time). However, the ability to launch additional windows is often abused by programmers to force users to view things (usually advertisements) that they did not request.

These new browser windows are called pop-ups or pop-unders (depending on whether they appear above or below the browser window that launched them). Pop-ups are fine if the user requests the content and if they complement the content of the main browser window. For example, a link to a movie or audio clip may be labeled, "Click here to launch this clip in a separate window." But pop-ups that appear unexpectedly and present advertising or other unwanted content to the user tend to be annoying.

Another reason to avoid pop-ups is that many browsers now feature pop-up blockers, which prevent pop-ups from appearing as the user browses sites. As a result, pop-ups and pop-unders are much less effective as advertising today than they were when they were new, and using them for legitimate purposes may exclude many users from some valid functionality of your site.

Consider your Web site's purpose and audience before adding pop-up and pop-under windows to it. If pop-ups will serve a legitimate and useful purpose in your site, you can create them using a scripting language such as JavaScript. You will learn about JavaScript and creating pop-up windows later in this course. Some online resources for pop-ups include the following:

• HTML Code Tutorial, Popup Windows (www.htmlcodetutorial.com/linking/linking_famsupp_70.html)

• DesignerWiz (www.designerwiz.com/ad-framer.htm?http&&&www.designerwiz.com/generator/popup_window_generator.htm)

OBJECTIVE 4.2.12: Pop-up/pop-under windows



Spam Spam is unsolicited, bulk commercial e-mail that the recipients did not ask to receive. Spam is the equivalent of junk mail, and the vast majority of Web users consider it highly annoying.

Many businesses use bulk e-mailing lists legitimately for advertisement and promotion by sending e-mail messages only to recipients who have requested or approved the messages. This type of advertising strategy is not considered spam because it is based on user request, and thus can provide a very useful tool for your business. Advertising on the Web is fine, but any content that is unsolicited and intrusive (such as pop-ups and spam) is very likely to make users unhappy with your site and perhaps your business. Such content may even result in legal consequences or blacklisting. Sending unsolicited spam is a site strategy to avoid because it reflects poorly upon your organization and because in some cases it may be illegal. You will learn more about spam practices, and the ethics and laws related to spam in a later lesson.

Browser Adoption The rate at which users upgrade their browsers has actually decreased as more users have come online. Studies indicate that the rate for users to upgrade their 3.x versions of browsers to the 4.x versions took twice as long as upgrades from 2.x versions to the 3.x versions. Following are some factors involved in the slower browser migration:

• The user base has grown beyond technically adept users who are interested in the Internet for its own sake. Most current users care about content, not technology or software. Therefore, they are not as motivated to upgrade.

• Many new users do not know how to upgrade their browsers, so they continue to use whichever version they have. Early Internet users were more skilled; many users today are less skilled in their abilities to download, install and configure software.

• Recent browser upgrades have been less compelling than previous ones in terms of added features or improved usability. The earliest browsers were primitive. The relative improvements from one release to the next were thus fairly significant, offering past users increased benefits for upgrading.

• The download size (in megabytes) of upgrades has grown faster than available bandwidth, thus upgrading requires more time or more costly connection services.

According to W3Schools (www.w3schools.com/browsers/browsers_stats.asp), Mozilla Firefox was the most widely used browser on the Internet as of February 2010, followed by Microsoft Internet Explorer version 8.

Browser elements All browsers, regardless of vendor, include basic elements that enable them to perform browsing-related tasks. Differences arise in how the elements are implemented. Basic browser elements include (but are not limited to):

• Rendering engine — reads the Web page and presents it to the user. The rendering engine reads, parses and represents HTML, XHTML, XML, images and other objects.

• Interpreter — reads and processes programming languages such as Java and JavaScript. Most browsers have several interpreters installed by default.

• Sandbox — a programming method wherein applications and processes are isolated from one another and from the local system. Sandboxing prevents a process running

blacklist Also known as blackhole list. A published list of IP addresses known to be sources of spam.

NOTE: Which browser version do you use? Have you ever upgraded your browser yourself?



in a browser tab from reading or accessing information located in another tab or stored locally on the system.

• Thread — an instruction from a running application that executes a particular task. Single-threaded browsers can lead to slow performance because the browser must wait for a given process to complete before beginning another one. Single-threaded browsers can also crash if an error occurs in a running process.

• Authentication information storage — provides the ability for the browser to manage and store user names and passwords.

• Encryption engine — includes applications and certificates that enable encryption in the browser. Most Web browsers support various versions of Secure Sockets Layer (SSL) and Transport Layer Security (TLS). These are required for conducting secure transactions.

• Download controls — determine how the browser processes downloads (e.g., default locations, security settings, etc.).

As a Web site developer, you should be acquainted with how browsers implement these elements to ensure that your pages will function as expected in various browsers.

Major, Minor and Alternative Browsers Although most Web users use one of the major Web browsers, more technical users have switched to newer browsers that may be faster or offer features that Firefox or Internet Explorer do not yet support. This section will explore the major browsers (Mozilla Firefox and Microsoft Internet Explorer), as well as some of the more popular minor and alternative browsers.

Mozilla Firefox In early 2009, Mozilla Firefox eclipsed Internet Explorer as the most widely used browser. Created by the Mozilla project (www.mozilla.org), Firefox is a free, highly customizable browser. The current version is 3.6.

Firefox was an early favorite among technical users because of its emphasis on security and because it is open-source; therefore, an international community of thousands of experts has examined the code for weaknesses and contributed improvements. Its security features include protection against viruses, spyware and phishing scams.

Firefox includes useful user-interface features such as tabbed browsing. Tabbed browsing allows you to open more than one Web site in a single window and toggle among sites, the way you can with the tabs in a Windows preference box. Figure 7-2 shows the Firefox 3.6 browser interface with several Web sites open in a tabbed window (the tabs appear in a row beneath the menu bar).

NOTE: In phishing scams e-mail is sent to users requesting they correct or verify personal account or financial information. The e-mail links users to sites that appear to belong to reputable businesses but are in fact imposter sites carefully designed to trick users into providing sensitive data.



Figure 7-2: Firefox 3.6 browser interface

Firefox includes support for many of the latest standards, as well as user-interface features such as pop-up blocking and automatic updates.

Firefox is also easily customized through the use of add-ons. Add-ons are Firefox plug-ins; that is, they are small programs that extend the functionality of the browser. For example, you can install the NoScript add-on to prevent scripts from running unless you specifically allow them, or you can install the AdBlock add-on to block banner ads from displaying. Instead of installing add-ons from the operating system, you install them from Firefox itself. As a result, Firefox (and not the operating system) becomes the launch pad for the end user's experience.

Firefox is available for various platforms, including Windows, Macintosh and Linux/UNIX.

Microsoft Internet Explorer In the recent past, Internet Explorer was the winner of the so-called browser wars and was used by more than half of all Web users. By early 2009, however, Mozilla Firefox had surpassed Internet Explorer. The current version of Internet Explorer in wide use is version 8. Internet Explorer 8 is also the default browser for the Windows 7 and Windows Server 2008 R2 operating systems. Internet Explorer 8 has updated security features, including protection against viruses, spyware and phishing, and includes features such as tabbed browsing.

Internet Explorer 8 includes the following new features:

• Web slices — allow you to receive up-to-date information from frequently updated Web sites (such as eBay) in the Favorites bar. Microsoft has made it easy for developers to add a few lines of code to existing pages to make them Web slices.

• Tab groups — color-codes and groups tabs that contain related pages so you can quickly see which tabs contain related content.



• Accelerators — reduce the number of keystrokes and clicks required to perform certain tasks such as translating words or obtaining driving directions. For example, if you are viewing a restaurant's Web page, you can click an accelerator icon to display a map directly on the page without the need to copy and paste the address into separate, map-related Web page.

Figure 7-3 shows the Internet Explorer 8 browser interface with several Web sites open in a tabbed window.

Figure 7-3: Internet Explorer 8 browser interface

One of the reasons Internet Explorer is still so widely used is that it comes pre-installed with every PC. When Internet Explorer 6 was released, it featured good support for Web standards such as XML and CSS. Internet Explorer 6 also offered an e-mail client (Outlook Express), a news reader, image and media management tools, security features to manage cookies and help block objectionable content, and auto-complete functionality for Web forms.

However, numerous bugs and security flaws appeared in Internet Explorer 6. Although Microsoft had been quick to release patches for security vulnerabilities, and the releases of Internet Explorer 7 and 8 have improved upon the performance of Internet Explorer 6, the effect of these security problems has been that many people have switched to alternative browsers.

Opera Currently in version 10.51, Opera is a fast and highly standards-compliant browser with support for the same features as Firefox. Opera is also highly customizable and supports "skins," which are themes that can be applied to the browser interface to customize its appearance. The two skins installed with Opera are Opera Standard and Windows Native. Figure 7-4 shows the Opera 10.51 interface with the Opera Standard skin, and Figure 7-5 shows the Opera interface with the Windows Native skin. (The differences between the two skins are very subtle. Notice that the Windows Native skin includes a browser title, whereas the Opera Standard skin does not.)



Figure 7-4: Opera 10.51 browser interface with Opera Standard skin

Figure 7-5: Opera interface with Windows Native skin to modify appearance

Opera's features include built-in fraud and phishing protection, a digital certificate provider, a Web feed aggregator, a built-in e-mail client and chat client, and a BitTorrent client for transferring large files.

Opera has had limited success in the PC browser market, but has had more success on mobile phones, smartphones and personal digital assistants (PDAs). Experienced e-commerce developers take the time to test their sites with Opera quite often because



people who have higher-end mobile phones often have additional disposable income that they can spend on your site.

Apple Safari Safari is Apple Computer's Web browser. It was originally designed for Mac OS X systems, but in 2007 became available for Windows systems and can run on Windows XP, Vista and 7. The latest version of the browser, Safari 4.0.5, is shown in Figure 7-6.

Figure 7-6: Safari 4.0.5 browser interface

Because it is optimized for Mac OS X, Safari is faster on the Macintosh than other browsers are. Safari includes a built-in RSS and Atom reader, and also supports tabbed browsing, pop-up blocking and the latest Web standards. As of version 2, it has included a private browsing feature, the ability to search bookmarks, and the ability to archive and e-mail Web pages.

Safari is among the fastest browsers to load Web pages from the Internet. Safari also has a very simple interface to allow maximum screen space in which the Web page itself can be viewed, which is becoming more important to users. When the development team at Google created the new Chrome browser (see next section), it adopted much of the look and feel from Safari. Safari is also the native browser for the iPhone OS.

Google Chrome Google's Chrome browser provides a reliable and pleasant Web-browsing experience for users. The interface is intuitive, secure and uncluttered. Google wanted the browser to be as clean and transparent as possible, operating under the premise that the information inside the browser is more important than the browser itself.

The project began with a fresh set of assumptions and no specific limitations — thereby freeing developers of the constraints that come with revising an existing product. This approach to development is called the greenfield approach. This fresh approach allowed developers to choose only the most relevant browser features, and led to a clean interface.

NOTE: You can experiment with using a new browser in Optional Lab 7-1: Exploring various browsers.

greenfield A project that lacks any constraints imposed by prior development.



Google Chrome is open-source, and although at first it supported few add-ons and helper applications, many applications have been contributed by the open-source community.

Chrome features include:

• Uncluttered interface — The browser window is clean and uncluttered, including only one toolbar. You can type a URL or enter a search term in the address bar and Chrome will suggest popular sites, searches, and pages that you have already visited that contain your search terms.

• Multithreading — The browser is able to create new processes and recover from problem threads, thereby avoiding crashes.

• Improved sandboxing — Each of the processes running in Chrome are sandboxed, which means they are more fully separated from each other as they run in the computer's memory. Chrome also isolates plug-ins, such as Adobe Flash or Microsoft Silverlight. This feature enhances security.

• Isolated tabs — As a result of multithreading and sandboxing, each tab is a separate instance of the browser. Therefore, the tabs that you open in Chrome are protected from each other, and you can set options in one tab (for example, browsing in privacy mode) without affecting the other tabs.

• Incognito mode — This mode provides the ability to surf the Web privately, leaving no cached information on the local system. This is a controversial feature, but one that has since been imitated by many other browsers.

• Support for Web applications — The Chrome browser is designed to deliver sophisticated Web applications, most notably Google Apps, which are part of Google's cloud computing strategy. (In cloud computing, document creation and conversion services, customer relationship management applications, and file storage and management services are hosted on Internet servers, and a user needs only a Web browser to access them.)

The free Google Chrome browser is shown in Figure 7-7. Notice that, unlike in other browsers, the tabs for open Web pages appear at the top. Each page contains its own address bar, toolbar and commands.



Figure 7-7: Google Chrome browser interface

As a Web developer, you should keep Chrome's simplicity in mind as you create your pages. Because the clean interface allows users to focus less on the browser itself, and focus more on what is inside the browser window, your design becomes increasingly important as it is viewed in this browser.

Chrome is also designed to blur the traditional distinction between the Web and the Desktop. A designer should take this into consideration when creating pages. Simplicity is key.

In the following lab, you will install and use Google Chrome. Suppose you have been asked by your supervisor to evaluate Google Chrome for use in your office. You should investigate some of the features, evaluate the browser for "user-friendliness," and draw comparisons to other browsers currently in use in your office environment.

Lab 7-1: Investigating Google Chrome

In this lab, you will install Google Chrome and investigate some of its features.

1. Desktop: Open your browser, go to www.google.com/chrome, click the Download Google Chrome button and follow the instructions to download and install Chrome, accepting the default options. Once the installation has begun, you may need to close your browser in order to allow Chrome to import bookmarks and settings.

Note: The ChromeSetup.exe binary file is located in the LabFiles\Lesson07\Lab_7-1 folder of the supplemental files. You can use this file to install Google Chrome if you wish.



2. Desktop: Launch Google Chrome. Notice that the Google home page appears by default. Click the plus sign (+) to the right of the Google tab to open a New Tab page, as shown in Figure 7-8. As you surf the Web, thumbnails of sites that you frequently visit will appear whenever you open a new tab.

Figure 7-8: Google Chrome New Tab page

3. Browser: Position the cursor in the Address bar if necessary, then type travel agent. Notice that Chrome displays search terms as you type. Press ENTER to display the search results page. In Chrome, you can use the address bar to enter URLs or search terms.

4. Browser: Click one of the links to visit another Web page. Notice that the tab for the page appears above the address bar and toolbar. Notice also that the domain name is highlighted in the address bar. Domain name highlighting helps you verify the actual domain of the Web page and helps you avoid phishing scams.

5. Browser: Click the plus sign (+) to the right of the tab to open another New Tab page.

6. Browser: Enter the URL of your favorite Web site in the address bar and press ENTER. Three tabs now display Web pages, and the plus sign (+) displays to the right of the existing tabs.

7. Browser: The Customize And Control Google Chrome toolbar button appears to the right of the address bar. Click the button to display the menu shown in Figure 7-9.



Figure 7-9: Customize And Control Google Chrome menu

8. Customize And Control Google Chrome menu: Click History to open the browser history for today. Notice that you can click a link to delete the history for the day. As you use Chrome over time, each day's history displays in reverse chronological order. You have the option to delete the history for each day.

9. Browser: Display the Customize And Control Google Chrome menu again and click Options to open the Google Chrome Options dialog box. If necessary, click the Basics tab. You use this tab to set startup options, specify a home page, specify a default search engine and specify whether to make Google Chrome the default browser.

10. Google Chrome Options dialog box: Click the Personal Stuff tab. Notice that you can specify to synchronize your bookmarks, save your passwords, view any saved passwords, save text from forms to make them easier to fill out, import data from another browser, and apply themes to the Chrome interface.

11. Google Chrome Options dialog box: Click the Under The Hood tab. You use this tab to set privacy options, specify proxy settings, specify download locations, and handle Web content and security settings.

12. Google Chrome Options dialog box: In the Privacy section, click the Content Settings button to display the Cookies tab of the Content Settings dialog box. Click the Show Cookies And Other Site Data button to display the Cookies And Other Data dialog box, shown in Figure 7-10.



Figure 7-10: Displaying cookies in Chrome

13. Cookies And Other Data dialog box: Click the Remove All button to delete all cookies, then close the open dialog boxes.

14. Browser: Display the Customize And Control Google Chrome menu, then click New Incognito Window to open a new tab in "incognito browsing mode." Web pages that you open in this tab and files that you download while working in this tab are not logged in your browsing and download histories. All new cookies from sites that you visit in this tab are deleted after you close the incognito tab.

15. Incognito tab: Visit www.expedia.com and shop for airline tickets to Edinburgh, Scotland (or some other city of your choice) for two adults. When you are finished, close the incognito tab.

16. Browser: Display your browser history. Notice that www.expedia.com does not appear in the history. View the cookies on your system. There are no cookies from expedia.com.

17. Browser: Close all open dialog boxes and close your browser.

18. Compare Google Chrome with other browsers you have used. What similarities do you find in regard to the interface? What do you like or dislike about the Chrome interface? What do you think are the advantages or limitations of Chrome?

In this lab, you explored the interface and some of the default settings of Google Chrome.

NOTE: Google proposes that incognito mode could be used to shop for a surprise gift online without leaving telltale clues. Can you identify potential problems incognito mode might cause in a corporate office? How might incognito mode clash with a corporate security policy?



Testing your site on multiple browsers As a Web developer, you must test the sites you create on multiple browsers and versions. Every browser functions somewhat differently, so a Web page that looks good in one browser might not work at all in another.

Visit www.w3schools.com/browsers/browsers_stats.asp to see the different browsers in widespread use today. Check back often as Web trends change over time. Further, you must remember to consider your site's intended audience as you develop. Discuss with your customers any particular browser requirements they might have, and do your research to determine which browsers you can expect your audience to be using.

You should also take operating systems into consideration. Although Windows users are the most predominant group, consider how your pages will render in a Macintosh or a UNIX or Linux system. Even if you know your audience will use the Windows operating system, consider how your pages will render in systems running XP, Vista or Windows 7. Also, consider how varying service pack levels may affect the way your pages render.

Web development companies often have dedicated testing computers that can be used to browse Web sites using various operating systems, browsers and screen resolutions. However, most Web designers are not equipped to test their sites with every possible combination of browser, operating system and screen resolution.

In the following lab, you will use a service that allows you to see how your site looks on various browsers. Suppose you are developing a Web site for a customer who expects a wide audience that will include users of various ages, skill levels and equipment. Although you may be limited in the hardware tools you can use for site testing, you always make sure to test your sites on as many browser types and versions as possible because you know your page designs can render differently in different browsers. You have a variety of browsers installed on your computer for testing; however, it can be time-consuming to open each page of your site in multiple browsers and compare them. To make your testing process quicker and more thorough, you could use an online browser-testing service to test your pages in multiple browsers simultaneously.

Lab 7-2: Testing a site in multiple browsers

In this lab, you will sign up for a free trial of the BrowserCam service and use it to test Web sites in multiple browsers.

1. Browser: Open www.browsercam.com.

2. BrowserCam.com: Click the Free Trial tab. Complete and submit the registration form to request a free trial of the BrowserCam service. The free trial activation will be sent to you via e-mail.

3. Open your e-mail client and activate your free trial. Once your account is activated, close all browser windows, then relaunch your browser and open www.browsercam.com again. Enter your user name and password in the Member Login area, then click the Sign In button to log in to the BrowserCam site.

4. Click the Website Capture link on the left. The Website Capture tab opens and the first page of the Perform Captures service appears. This service provides screen captures of the Web pages you specify as they render in the browsers you specify.

OBJECTIVE 3.5.2: Site testing

NOTE: This lab requires you to have access to an e-mail account you can use to receive the free trial. The free trial is available for 24 hours once activated.



5. Select the Create A New Project radio button if necessary, and enter a project name, such as Site Testing. Select the Enter URL(s) Manually radio button if necessary. Enter the following URLs in the fields provided (one URL per field):

www.habitat.org

www.CIWcertified.com

www.yahoo.com

6. Scroll down and click the Continue button. You should see a page that allows you to select options and select browsers. Scroll down and click a version release number to select different releases of various browsers running on different platforms. A selected version release will display with a blue background, as shown in Figure 7-11.

Figure 7-11: Selecting browsers for testing

7. Leave the other settings on this page set to the defaults, then click the Continue button.

8. The Screen Capture Order Summary page will appear. Click the View Projects link to see a complete list of the site and browser test combinations you ordered, as shown in Figure 7-12. Note that some screenshots may be labeled "Queued," "Capturing" or "Not Started." Refresh your browser window after a minute or two to see the latest status of the images.



Figure 7-12: BrowserCam site and browser testing results

9. Look through the screenshots. Do any of the sites not display correctly in any of the browsers? Which ones? Do you see any patterns in which certain browsers display sites incorrectly or in which certain sites frequently display incorrectly?

Because many site designers do not have the resources to test their sites in every possible browser, operating system and screen resolution, testing services such as BrowserCam can be extremely helpful for ensuring that your site will appear correctly for the widest possible range of users.

Specialized browsers and accessibility In addition to the variety of browsers just discussed, several Web browsers are available for specialized purposes. Some offer text-reader capability or captioning to provide Web accessibility for users with disabilities. Others make the Web accessible in a limited capacity to users on the go. Examples include the following:

• Mobile device browsers — The earliest Web browsers designed for mobile devices (such as mobile phones and PDAs) required that Web designers create special versions of their sites. Later releases were simplified versions of Web browsers optimized for small screens and low processing power. These typically were not full-featured, and some did not display images or multimedia. Today, however, many modern mobile browsers such as Opera Mini and Apple Safari offer desktop-class Web browsing (rich content, CSS 2.1, Ajax, etc.) on the touch screen of a handheld device.

• Adaptive browsers/voice browsers — Web browsers that enable users with disabilities to use the Web are referred to as adaptive browsers. They typically feature screen magnification; the ability to use text readers, captioning and speech synthesis to convey Web page content; and voice recognition functionality to receive commands from users. They may also feature the ability to translate Web pages to Braille.

OBJECTIVE 4.1.2: Accessibility issues with images and animation

NOTE: You can review the browser-related terms from this lesson in Activity 7-1: Reviewing browser terminology.

OBJECTIVE 1.2.9: Designing for PDA-based vs. traditional browsers



Remember that it is important to design your Web sites so that they can be used by people with disabilities. Designing for accessibility includes using the alt attribute with all images (especially navigation elements) so that they can be read by voice browsers and text readers.

Creating Aliases with TinyURL TinyURL is a free Web service that provides aliases for long URLs. The aliases are short, will not break in e-mail postings, and never expire. The TinyURL home page (http://tinyurl.com/) includes a form in which you can enter a long URL for shortening. You can either have TinyURL create a randomly generated alias for you, or you can create a custom alias that is more meaningful. When users click the short URL alias, they will automatically be redirected to the long URL.

TinyURL offers a plug-in for your browser's toolbar that allows you to generate a short URL at the click of a button. By clicking the toolbar button, you can create a TinyURL for the current Web page.

Advantages and disadvantages of using TinyURL Short URL aliases are useful because they are easier to remember and type. They are also easier to use than long URLs in situations in which space may be limited, such as in e-mail signature lines and microblogs, and with e-mail clients that create line breaks after a certain number of characters are entered.

A potential disadvantage to using TinyURLs is that they are subject to linkrot. If the URL of the original Web page changes, all URLs related to the short URL alias will become invalid.

In the following lab, you will use TinyURL to create a short alias for redirection to a long URL. Suppose you want to send members of your project team links to several Web pages containing information that will be useful for the application you are developing. However, you want to replace the excessively long links with text that is more meaningful and succinct.

Lab 7-3: Creating an alias with TinyURL

In this lab, you will use TinyURL to create a short URL alias to provide redirection to a long URL.

1. Browser: Open your browser and go to www.CIWcertified.com to display the CIW Certified home page.

2. Browser: Click several links of your choice to penetrate deep into the Web site. Notice that the deeper you go, the longer the URL for the current page tends to be.

3. Browser: When a long URL appears in the Location Bar, select it and copy it to your Clipboard by pressing CTRL+C.

4. Browser: Go to http://tinyurl.com/ to display the TinyURL home page.

5. Browser: Paste the long URL you copied in Step 3 into the Enter A Long URL To Make Tiny text box. Click the Make TinyURL button to create a short URL alias for the long URL. Your screen should resemble Figure 7-13. In the example in the figure,

OBJECTIVE 4.2.14: TinyURL

TinyURL A free Web service that generates short aliases for long URLs.



notice that TinyURL replaced a URL that has a length of 55 characters with a TinyURL that has a length of 26 characters.

Figure 7-13: Short URL alias in TinyURL

6. Browser: Click the Open In New Window link that appears immediately below the TinyURL. Notice that you are now redirected to the page specified by the long URL.

7. Browser: Close your browser.

In this lab, you used TinyURL to create a short URL alias to provide redirection to a long URL.

Utilizing CAPTCHA A CAPTCHA is a method that attempts to ensure that a user is a real person and not a spam bot or crawler. The term CAPTCHA is an acronym for Completely Automated Public Turing Test to Tell Computers and Humans Apart.

A CAPTCHA is an automatically generated graphic presented to a user who has just submitted information or otherwise made a request of a Web server. The user must correctly enter the text shown in the graphic. Once the user provides the correct response to a CAPTCHA, the user's input is accepted for processing.

A CAPTCHA image is generally distorted, but should be legible enough to read. For example, the distorted text shown in Figure 7-14 should be legible to a human, but a computer program cannot read it.

OBJECTIVE 4.2.13: CAPTCHA

Figure 7-14: Example CAPTCHA text

A typical use of a CAPTCHA is during registration with a Web site. For example, sites such as Yahoo! Or Google that offer Web-based e-mail accounts must guard against automated scripts that can apply for thousands of e-mail accounts. Use of CAPTCHA in blog sites can ensure that only humans can enter comments on a blog.

You can use a CAPTCHA to protect your Web site from spam or other abuse. When implementing a CAPTCHA, it is recommended that you ensure that the CAPTCHA is accessible to all users. For example, if the CAPTCHA relies only on reading text, then you may make your site inaccessible to people who are visually impaired.

In the following lab, you will add a free CAPTCHA implementation from www.snaphost.com to a Web page. Suppose your supervisor instructs you to add a newsletter sign-up page to your company's Web site so that visitors can add themselves to your company's mailing list. You can add a CAPTCHA to the sign-up page to ensure that only humans and not bots are able to create an account.

Lab 7-4: Adding a CAPTCHA to a Web page

In this lab, you will you insert a free form-to-e-mail CAPTCHA from www.snaphost.com to prevent automated form completion and spam.

1. Use a text editor to open the Lab_7-4.xhtml file from the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson07\Lab_7-4 folder.

2. Editor: Add the text shown in bold to the code, and delete the line shown in strike-through. The additional code specifies to validate the CAPTCHA through the SnapHost service and to forward the output to an e-mail address and results page. Be sure to substitute your e-mail address for [email protected] where the code reads: value="[email protected]". <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="CIW, Web Design Specialist, CAPTCHA, Example" name="Keywords" /> <meta content="For the CIW Web Design Specialist Course" name="Description" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  <title>Basic Form using CAPTCHA</title> </head> <body> <h1>Basic Information Form</h1> <form method="post" action="http://ss1.ciwcertified.com/cgi-bin/process.pl"> <form id="myform" method="post" action="http://www.SnapHost.com/captcha/send.aspx">

<input value="[email protected]" name="skip_WhereToSend" id="skip_WhereToSend" type="hidden" />

<input value="Testing CAPTCHA Script" name="skip_Subject"

NOTE: You may want to view the form first in a browser before editing the code.



id="skip_Subject" type="hidden" /> <input value="http://ss1.ciwcertified.com/formreply.html"

name="skip_WhereToReturn" id="skip_WhereToReturn" type="hidden" /> <input value="6RFR4MQ7JA6A" name="skip_SnapHostID" id="skip_SnapHostID" type="hidden" /> Enter Your Name: <input size="40" name="Name" type="text" /> <br /> <br /> ...

3. Editor: Scroll down in the file and add the text shown in bold to the code to insert the CAPTCHA image and response input field: ... What aspect of Web design do you prefer to work with? (check all that apply):<br /> <input name="Coding" type="checkbox" /> Coding<br /> <input name="Graphics" type="checkbox" /> Graphics<br /> <input name="Animation" type="checkbox" /> Animation<br /> <br />

<table bgcolor="#FFCC66" border="0" cellpadding="8" cellspacing="0"> <tbody> <tr> <td><input maxlength="6" style="width: 130px; height: 48px; font-size: 38px;"

name="skip_CaptchaCode" id="skip_CaptchaCode" type="text" /><br /> <i>Enter web form code</i></td> <td><a href="http://www.SnapHost.com/captcha/ProCaptchaOverview.aspx"><img

src="http://www.SnapHost.com/captcha/CaptchaImage.aspx?id=6RFR4MQ7JA6A" alt="Web Form Code" border="0" /></a>

</td> </tr> </tbody> </table> <br /> <br /> <input type="submit" /> <input type="reset" /> </form> </body> </html>

4. Editor: Save the modified code as MyCaptcha.xhtml.

5. Browser: Load your file. The form should appear as shown in Figure 7-15.



Figure 7-15: Form page with CAPTCHA

6. Browser: Complete the form and enter the CAPTCHA text, then click Submit Query and view the results page. Close your browser.

7. If time permits: Complete the information in the form but enter the CAPTCHA text incorrectly, then view the results.

In this lab, you inserted a CAPTCHA image into a Web form to ensure that a person (and not an automated program) completes the form. Adding CAPTCHAs to your Web forms assists in reducing the number of spam responses.



Case Study Depends on your Point-of-Viewing While redesigning a Web site for a customer, Lucy purchased a new tool for creating a cool multimedia navigation bar that she wanted to include in the site. The problem was that the navigation bar was guaranteed to work as expected only in Internet Explorer 7 (or newer) browsers.

After a quick check of the server log files determined that 95 percent of the site's users were using Internet Explorer 7 or newer, Lucy felt sure that it would be OK to use this new component. However, to be safe, she added a note on the home page that read, "This site works best with Internet Explorer version 7 or newer."

When the first draft of the redesigned site was ready, Lucy sent the customer a link to the test site. The customer wrote back that he could not figure out how to use the site at all. After some research, Lucy discovered that the customer's IT department had standardized all of its company's computers on Opera browsers, which made her cool multimedia navigation effect completely unusable by anyone at the customer's company.

* * *

Consider this scenario and answer the following questions:

• What important step of site testing did Lucy skip?

• How important is it for the minority 5 percent of site users in this scenario to be able to use the feature that does not work in some browsers?

• Would Lucy's navigation effect feature be acceptable if the minority users could still navigate using other site or browser elements? Would it be acceptable if this effect feature were used for something other than navigation? If so, what might be some acceptable alternatives?

• What does this scenario demonstrate about a Web designer's need to be familiar with the various browsers used on the Web?



Lesson Summary

Application project This lesson discussed several design practices that you should avoid, including browser-specific functionality and pop-up windows. Of course, there are exceptions to every rule. Browser-specific elements, such as ActiveX components, can be very useful in environments where you know all users will be able to support them, such as an intranet site. Pop-up windows are useful at times when the user wants to view an additional element of the current page without leaving the page, such as an enlarged product photo or a term definition. However, you are generally advised to avoid both technologies in your site designs. Why?

Browse the Web for examples of sites using features or techniques that might not always be considered good Web practices. Some examples might include pop-up windows, large file downloads, multimedia or browser-specific functionality. Are these elements used in a way that makes the sites more usable or less usable?

Skills review In this lesson, you learned about browser functionality. You learned about some technologies and techniques to avoid when designing your Web pages. You also learned about a variety of available Web browsers.

Now that you have completed this lesson, you should be able to:

1.2.9: Identify challenges involved in designing Web pages for PDA-based versus traditional browsers.

1.3.3: Identify site strategies and technologies to avoid, including pop-up windows, single-browser sites, spam.

3.5.2: Perform site testing (functionality, usability, browser compatibility)

4.1.2: Identify accessibility issues and solutions related to Web images and animation (e.g., text-reader capability, captioning).

4.2.12: Identify the functionality of pop-up/pop-under windows (e.g., creation, benefits, disadvantages, reasons to omit from your site).

4.2.13: Define CAPTCHA and create a CAPTCHA for a Web site.

4.2.14: Explain how the TinyURL service works.



Lesson 7 Review 1. Studies show that users are taking longer to upgrade their browsers as more users

come online. What are two factors involved in the decreasing rate of browser migration?

2. What are some of the reasons that people switch to an alternative browser?

3. What are ActiveX controls?

4. What type of pop-up windows should you avoid using?

5. Why are pop-up windows less effective for advertising today?

7Lesson 7: Browsers - OKALOOSA SCHOOLS...• Browser history. • Bookmarks or Favorites. • Status...

Documents

Transcript of 7Lesson 7: Browsers - OKALOOSA SCHOOLS...• Browser history. • Bookmarks or Favorites. • Status...