How Web sessions work

how web services work and how will web 2.0 work in the future and how web sessions work
JohenCorner Profile Pic
JohenCorner,France,Professional
Published Date:02-08-2017
Your Website URL(Optional)
Comment
a HOW THE WEB WORKS I got started in web design in early 1993—pretty close to the start of the Web itself. In web time, that makes me an old-timer, but it’s not so long ago that I can’t remember the first time I looked at a web page. It was difficult to tell where the information was coming from and how it all worked. This chapter sorts out the pieces and introduces some basic terminology you’ll encounter. If you’ve already spent time perusing the Web, some of this information will be a review. If you’re starting from scratch, it is important to have all the parts in perspective. We’ll start with the big picture and work down to specifics. The Internet Versus the Web No, it’s not a battle to the death, just an opportunity to point out the distinction between these two words that are increasingly being used interchangeably. The Internet is a network of connected computers. No company owns the Internet (i.e., it is not equivalent to a service like America Online); it is a cooperative effort governed by a system of standards and rules. The purpose of connecting computers together, of course, is to share information. There are many ways information can be passed between computers, including email, file transfer (FTP), and many more specialized modes upon which the Internet is built. These standardized methods for transferring data or docu- ments over a network are known as protocols. The W orld Wide Web (known affectionately as “the Web”) is just one of the ways information can be shared over the Internet. It is unique in that it allows documents to be linked to one another using hypertext links—thus forming a huge “web” of connected information. The Web uses a protocol called HTTP ( HyperText Transfer Protocol). If you’ve spent any time using the Web, that acronym should look familiar because it is the first four letters of nearly all web site addresses, as we’ll discuss in an upcoming section. 1a Serving Up Your Information Serving Up Your Information A Brief History Let’s talk more about the computers that make up the Internet. Because they of the Web “serve up” documents upon request, these computers are known as servers. The Web was born in a particle More accurately, the server is the software (not the computer itself) that physics laboratory (CERN) in allows the computer to communicate with other computers; however, it is Geneva, Switzerland in 1989. There, a computer specialist named Tim common to use the word “server” to refer to the computer, as well. The role Berners-Lee first proposed a system of server software is to wait for a request for information, then retrieve and of information management that send that information back as quickly as possible. used a “hypertext” process to link related documents over a network. There’s nothing special about the computers themselves…picture anything He and his partner, Robert Cailliau, from a high-powered Unix machine to a humble personal computer. It’s the created a prototype and released server software that makes it all happen. In order for a computer to be part it for review. For the first several years, web pages were text-only. It’s of the Web, it must be running special web server software that allows it to difficult to believe that in 1992 (not handle Hypertext Transfer Protocol transactions. Web servers are also called that long ago), the world had only “HTTP servers.” 50 web servers, total. The real boost to the Web’s There are many server software options out there, but the two most popu- popularity came in 1992 when lar are Apache (open source software, see sidebar) and Microsoft Internet the first graphical browser (NCSA Information Services (IIS). Apache is freely available for Unix-based comput- Mosaic) was introduced. This allowed ers and comes installed on Macs running Mac OS X. There is a Windows ver- the Web to break out of the realm of sion as well. Microsoft IIS is part of Microsoft’s family of server solutions. scientific research into mass media. The ongoing development of the Each computer on the Internet is assigned a unique numeric IP address (IP Web is overseen by the World Wide Web Consortium (W3C). stands for Internet Protocol). For example, the computer that hosts oreilly.com has the IP address 208.201.239.37. All those numbers can be dizzying, so for- If you want to dig deeper into the Web’s history, check out these sites: tunately, the Domain Name System (DNS) was developed that allows us to refer Web Developers’ Virtual Library to that server by its domain name, oreilly.com, as well. The numeric IP address WDVL.com/Internet/History is useful for computers, while the domain name is more accessible to humans. W3C’s History Archives Matching the text domain names to their respective numeric IP addresses is the www.w3.org/History.html job of a separate DNS server. It is possible to configure your web server so that more than one domain name is mapped to a single IP address, allowing several sites to share a single server. A Word About Browsers t e R m I n O l O G y We now know that the server does the servin’, but what about the other half Open source of the equation? The software that does the requesting is called the client. Open source software is developed On the Web, the browser is the client software that makes requests for docu- as a collaborative effort with the ments. The server returns the documents for the browser to display. intent to make its source code available to other programmers for The requests and responses are handled via the HTTP protocol, mentioned use and modification. Open source earlier. Although we’ve been talking about “documents,” HTTP can be used programs are usually available for to transfer images, movies, audio files, and all the other web resources that free. commonly make up web sites or are shared over the Web. 20 Part I: Getting Starteda Web Page Addresses (URLs) When we think of a browser, we usually think of a window on a computer monitor with a web page displayed in it. These are known as graphical brows- ers or desktop browsers. The most popular graphical browser is Internet Explorer for Windows, with over 80% of web traffic as of this writing. However, there are many other popular browsers, including Firefox, Safari, Opera, and Netscape. Although it’s true that the Web is most often viewed on traditional graphical browsers, it is important to keep in mind that there are all sorts of browsing Intranets and experiences. Users with sight disabilities may be listening to a web page read Extranets by a screen reader. Some browsers are small enough to fit into cell phones or When you think of a web site, you PDAs. The sites we build must be readable in all of these environments. generally assume that it is accessible to anyone surfing the Web. However, Bear in mind also that your web pages may look and work differently even on many companies take advantage of up-to-date graphical browsers. This is due to varying support for web tech- the awesome information sharing nologies and users’ ability to set their own browsing preferences. Dealing with and gathering power of web sites to exchange information just within the ways browsers and users affect your pages is discussed in Chapter 3, The their own business. These special Nature of Web Design. web-based networks are called intranets. They are created and function like ordinary web sites, only t t e e R R m m I I n n O O l l O O G G y y they are on computers with special security devices (called firewalls) S Ser erv ver er-side -side and and C Clien lient t-side -side that prevent the outside world O Of ft ten en in in w web eb desig design, n, y you ou’ll ’ll hear hear r ref efer erence ence t to o “ “client client-side -side” ” or or “ “ser serv ver er-side -side” ” applications applications. . from seeing them. Intranets have T These hese t ter erms ms ar are e used used t to o indicat indicate e which which machine machine is is doing doing the the pr processing ocessing. . Client Client-side -side lots of uses, such as sharing human applications applications run run on on the the user user’’s s machine machine, , while while ser serv ver er-side -side applications applications and and func functions tions resource information or providing use use the the pr processing ocessing po pow wer er of of the the ser serv ver er comput computer er.. access to inventory databases. An extranet is like an intranet, only it allows access to select users outside of the company. For instance, a manufacturing company may provide its customers with Web Page Addresses (URLs) passwords that allow them to With all those web pages on all those servers, how would you ever find check the status of their orders in the company’s orders database. Of the one you’re looking for? Fortunately, each document has its own special course, the passwords determine address called a URL (Uniform Resource Locator). It’s nearly impossible to which slice of the company’s get through a day without seeing a URL (pronounced “U-R-L,” not “erl”) information is accessible. Sharing plastered on the side of a bus, printed on a business card, or broadcast on a information over a network is changing the way many companies television commercial. do business. N ot e Among developers, there is a movement to use the more technically accurate term URI (Uniform Resource Identifier) for identifying the name of a resource. On the street and even on the job, however, you’re still likely to hear URL. Some URLs are short and sweet. Others may look like crazy strings of char- acters separated by dots (periods) and slashes, but each part has a specific purpose. Let’s pick one apart. Chapter 2, How the Web Works 21a Web Page Addresses (URLs) The parts of a URL A complete URL is generally made up of three components: the protocol, the site name, and the absolute path to the document or resource, as shown in Hey, There’s No Figure 2-1. http:// on That URL Because all web pages use the Hypertext Transfer Protocol, the P Pr ro ot to oc co ol l Name of sit Name of site e Absolute path Absolute path 112233 http:// part is often just implied. This is the case when site names are http:// www.jendesign.com /2007/samples/first.html http:// www.jendesign.com /2007/samples/first.html advertised in print or on TV, as a way to keep the URL short and sweet. Host name Host name Domain name Domain name Dir Direc ect to or ry y path path Documen Document t Additionally, browsers are programmed to add http:// F Figur igure e 2-1. 2-1. T The he par parts ts of of a a URL. URL. automatically as a convenience to save you some keystrokes. It may seem like you’re leaving it out, but 1 http:// it is being sent to the server behind the scenes. The first thing the URL does is define the protocol that will be used for When we begin using URLs to create that particular transaction. The letters HTTP let the server know to use hyperlinks in (X)HTML documents in Hypertext Transfer Protocol, or get into “web-mode.” Chapter 6, Adding Links, you’ll learn that it is necessary to include the N ot e protocol when making a link to a web page on another server. Sometimes you’ll see a URL that begins with https://. This is an indication that it is a secure server transaction. Secure servers have special encryption devices that hide delicate content, such as credit card numbers, while they are transferred to and from the browser. 2 www.jendesign.com The next portion of the URL identifies the web site by its domain name. N ot e In this example, the domain name is jendesign.com. The “www.” part at the beginning is the particular host name at that domain. The host A group of folks are working to abolish name“www” has become a convention, but is not a rule. In fact, some- the “www” subdomain. Read more at times the host name may be omitted. There can be more than one web site no-www.org. at a domain (sometimes called subdomains). For example, there might also be development.jendesign.com, clients.jendesign.com, and so on. 3 /2007/samples/first.html This is the absolute path to the requested HTML document, first.html. The words separated by slashes indicate the pathway through directory levels, starting with the root directory of the host, to get to first.html. Because the Internet originally comprised computers running the Unix operating system, our current way of doing things still follows many Unix rules and conventions (hence the /). To sum it up, the example URL says it would like to use the HTTP protocol to connect to a web server on the Internet called www.jendesign.com and request the document first.html (located in the samples directory, which is in the 2007 directory). 22 Part I: Getting Starteda The Anatomy of a Web Page Default files Obviously, not every URL you see is so lengthy. Many addresses do not include a file name, but simply point to a directory, like these: http://www.oreilly.com http://www.jendesign.com/resume/ When a server receives a request for a directory name rather than a specific file, it looks in that directory for a default document, typically named index. html, and sends it back for display. So when someone types in the above URLs into their browser, what they’ll actually see is this: http://www.oreilly.com/index.html http://www.jendesign.com/resume/index.html The name of the default file (also referred to as the index file) may vary, and depends on how the server is configured. In these examples, it is named index. html, but some servers use the file name default.htm. If your site uses server- side programming to generate pages, the index file might be named index.php or index.asp. Just check with your server administrator to make sure you give your default file the proper name. Another thing to notice is that in the first example, the original URL did not have a trailing slash to indicate it was a directory. When the slash is omitted, the server simply adds one if it finds a directory with that name. The index file is also useful for security. Some servers (depending on their configuration) return the contents of the directory for display in the browser if the default file is not found. Figure 2-2 shows how the documents of the housepics directory are exposed as the result of a missing default file. One way to pre- index.html Providing the URL for a directory (rather vent people snooping around in your files is to be sure than a specific filename) prompts the server to look for a default file, typically called there is an index file in every directory. Your system index.html. administrator may also add other protections to pre- vent your directories from displaying in the browser. Some servers are configured to return a listing of the contents of that directory if the default file is not found. The Anatomy of a Web Page We’re all familiar with what web pages look in the browser window, but what’s happening “under the hood?” At the top of Figure 2-3, you see a basic web page as it appears in a browser. Although you can view it as one coherent page, it is actually made up of three separate files: an HTML document (index.html) and two graph- ics (kitchen.gif and spoon.gif ). The HTML document is Figure 2-2. Some servers display the contents of the directory if an running the show. index file is not found. Chapter 2, How the Web Works 23a The Anatomy of a Web Page HTML documents You may be as surprised as I was to learn that the graphically rich and inter- active pages we see on the Web are generated by simple, text-only documents. That’s right: plain old ASCII text (meaning it has just letters, numbers, and a exercise 2-1 few symbol characters). This text file is referred to as the source document. View source Take a look at index.html, the source document for the Jen’s Kitchen web page. You can see the (X)HTML file for You can see it contains the text content of the page plus special tags (indicated any web page by choosing View ➝ with angle brackets, and ) that describe each text element on the page. Page Source or (View ➝ Source) in your browser’s menu. Your browser Adding descriptive tags to a text document is known as “marking up” the will open the source document in document. Web pages use a markup language called the HyperText Markup a separate window. Let’s take a look Language, or HTML for short, that was created especially for documents with under the hood of a web page. hypertext links. HTML defines dozens of text elements that make up docu- 1. Enter this URL into your browser: ments such as headings, paragraphs, emphasized text, and of course, links. www.learningwebdesign.com/ There are also HTML elements that add information about the document materials/chapter02/ kitchen.html (such as its title) and that add media such as images, videos, Flash movies, or You should see the HTML source applets to the page. from Figure 2-3. 1. Select View ➝ Page Source N ot e (or View ➝ Source) from the The discussion of HTML in this section also applies to its updated version, XHTML browser menu. A window opens (eXtensible Hypertext Markup Language). The document in Figure 2-3 is actually showing the source document authored in XHTML. shown in the figure. 3. The source for most sites is considerably more complicated. A quick introduction to HTML View the source of oreilly.com or the site of your choice. Don’t You’ll be learning about HTML in detail in Part II, so I don’t want to bog you worry if you don’t understand down with too much detail right now, but there are a few things I’d like to what’s going on. Much of it will look more familiar by the time point out about how HTML works and how browsers handle it. you are done with this book. Read through the HTML document in Figure 2-3 and compare it to the brows- Keep in mind that while learning er results. It’s easy to see how the elements marked up with HTML tags in the from others’ work is fine, the all-out stealing of other people’s code is source document correspond to what displays in the browser window. poor form (or even illegal). If you First, you’ll notice that the text within brackets (for example, body) does want to use code as you see it, ask for permission and always give credit not display in the final page. The browser only displays the content of the to those who did the work. element; the markup is hidden. The tags provide the name of the HTML ele- ment—usually an abbreviation such as “h1” for “heading level 1,” or “em” for “emphasized text.” Second, you’ll see that most of the HTML tags appear in pairs surrounding the content of the element. In our HTML document, h1 indicates that the following text should be a level-1 heading; /h1 indicates the end of the heading. Some elements, called empty elements, do not have content. In our sample, the hr / tag indicates an empty element that tells the browser to “draw a horizontal rule (line) here.” 2 Part I: Getting Starteda The Anatomy of a Web Page The web page shown in this browser window actually consists of three separate files: and HTML text document and two graphics. Tags in the HTML document gives the browser instructions for how the text is to be handled and where the images should be placed. index.html DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html head titleJen's Kitchen/title /head body img src="kitchen.gif" alt="Jen's Kitchen banner" / h1Welcome to the future home of Jen's Kitchen/h1 pIf you love to read about strongcooking and eating/strong, would like to learn of some of the best restaurants in the world, or just want a few choice recipes to add to your collection, emthis is the site for you/em/p pimg src="spoon.gif" alt="spoon illustration" /We're busy putting the site together. Please check back soon./p hr / pCopyright 2006, Jennifer Robbins/p /body /html kitchen.gif spoon.gif Figure 2-3. The source file and images that make up a simple web page. Chapter 2, How the Web Works 2a Putting It All Together When I first began writing HTML, it helped me to think of the tags and text as “beads on a string” that the browser deals with one by one, in sequence. For example, when the browser encounters an open bracket () it assumes all of the following characters are part of the markup until it finds the clos- ing bracket (). Similarly, it assumes all of the content following an opening h1 tag is a heading until it encounters the closing /h1 tag. This is the manner in which the browser parses the HTML document. Understanding the browser’s method can be helpful when troubleshooting a misbehaving HTML document. But where are the pictures? Obviously, there are no pictures in the HTML file itself, so how do they get there when you view the final page? You can see in Figure 2-3 that each image is a separate graphic file. The graphics are placed in the flow of the text with the HTML image element (img) that tells the browser where to find the graphic (its URL). When the browser sees the img element, it makes another request to the server for the image file, and then places it in the content flow. The browser software brings the separate pieces together into the final page. The assembly of the page generally happens in an instant, so it appears as though the whole page loads all at once. Over slow connections or on slower computers, or if the page includes huge graphics, the assembly process may be more apparent as images lag behind the text. The page may even need to be redrawn as new images arrive (although you can construct your pages in a way to prevent that from happening). Putting It All Together To wrap up our introduction to how the Web works, let’s trace the stream of events that occur with every web page that appears on your screen (Figure 2-4). 1 You request a web page by either typing its URL (for example, http://jen- skitchensite.com) directly in the browser, or by clicking on a link on the page. The URL contains all the information needed to target a specific document on a specific web server on the Internet. 2 Your browser sends an HTTP Request to the server named in the URL and asks for the specific file. If the URL specifies a directory (not a file), it is the same as requesting the default file in that directory. 3 The server looks for the requested file and issues an HTTP response. a. If the page cannot be found, the server returns an error message. The message typically says “404 Not Found,” although more hospitable error messages may be provided. 2 Part I: Getting Startedst e equ r TTP H a Putting It All Together b. If the document is found, the server retrieves the requested file and returns it to the browser. 4 The browser parses the HTML document. If the page contains images, (indicated by the HTML img element), the browser contacts the server again to request each image file specified in the markup. 5 The browser inserts each image in the document flow where indicated by the img element. And voila The assembled web page is displayed for your viewing pleasure. Browser Server Server Contents index.html Type in a URL or click on a link in the browser. 1 masthead.gif spoon.gif The browser sends 2 an HTTP request. The server looks for the file and 3 responds with an HTTP response. index.html Oops, no file “I see that you requested a directory, If the file is not on the server, so I’m sending you the default file, it returns an error message. index.html. Here you go.” The browser parses the 4 document. If it has images, the browser contacts the server again for each graphic file. masthead.gif spoon.gif The page is assembled in 5 the browser window. Figure 2-4. How browsers display web pages. Chapter 2, How the Web Works 2 onse sp P re HTTa Test Yourself Test Yourself Let’s play a round of “Identify that Acronym” The following are a few basic web terms mentioned in this chapter. Answers are in Appendix A. 1. HTML a) Home of Mosaic, the first graphical browser 2. W3C b) The location of a web document or resource 3. CERN c) The markup language used for all web documents 4. HTTP d) Matches domain names with numeric IP addresses 5. IP e) A limited set of letters, numbers and symbols 6. URL f) Internet Protocol 7. NCSA g) Particle physics lab where the Web was born 8. DNS h) Protocol for transferring web documents on the Internet 9. ASCII i) The organization that monitors web technologies Answers: ____________________________________________________________ 2 Part I: Getting Starteda THE NATURE OF WEB DESIGN As a web designer, you spend a lot of time creating pages and tweaking them IN THIS CHAPTER until they look good in your browser. Before you grow too attached to the How variables on the way your page looks on your screen, you should know that it is likely to look user’s end affect the different to other people. That’s just the nature of web design—you can’t way your page looks and guarantee that everyone will see your page the way you do. The way your site performs, including: looks and performs is at the mercy of a number of variables such as browser Browser version version, platform, monitor size, and the preferences or special needs of each individual user. Your page may also be viewed on a mobile device like a cell Alternative browsing phone, or using an assistive device like a screen magnifier or a screen reader. devices This unpredictable nature of the Web is particularly challenging if you have User preferences experience designing for print, where what you design stays put. As a print Platform designer who made the transition to web design, I found I needed to let go Connection speed of controlling things such as page size, typography, and precise color. Having a solid understanding of the web environment allows you to anticipate and Browser window size plan for these shifting variables. Eventually, you’ll develop a feel for it. and monitor resolution This chapter looks at the ways in which browsers, user configurations, plat- Monitor color form, connection speed, computer monitors, and alternative browsing envi- ronments affect the design and functionality of web pages. It suggests some tips for coping along the way. Browser Versions One of the biggest c hallenges in designing for the Web is dealing with The nature of web the multitude of browsers in current use. Although the current version of design is that there is no Microsoft Internet Explorer running on Windows makes up the lion’s share guarantee that everyone (60 to 80% as of this writing), there are at least a dozen browser versions that will see your page the way web developers pay attention to, and hundreds more obscure or antiquated you do. browsers still in use. See the sidebar, Browser Roll Call, for more information on relevant browsers. In the no-so-distant past, browsers were so incompatible that web authors were forced to create two separate sites, one for Internet Explorer and one for Netscape (the only two players at the time). Fortunately, things have 2a Browser Versions Browser Roll Call It is important that web developers be familiar with the browsers in current use. N ot e Although there are hundreds of browsers out there, only about a dozen make up 99% For a complete list of all browers, old of browser usage. The A-list browsers in Table 3-1 offer solid standards support and and new, see browsers.evolt.org. represent the vast majority of web traffic. Older and niche browsers listed in Table 3-2 may be tested to be sure that the content is available and accessible, but there is no effort made to reproduce the A-list browsing For Further Reading experience on these browsers. It should be noted that the browsers listed here, and the Usage Statistics in particular, The article “Graded Browser Support” reflect the browser landscape as of the writing of this book. Things are sure to be different by Nate Koechley at Yahoo’s by the time you are reading this. For updated browser statistics, go to www.thecounter. Developer Network aptly sums up the com or www.w3schools.com/browsers. Of course, the most meaningful statistics are those contemporary approach to browser taken from your own site. 3% of visitors to your blog and 3% on a site like Yahoo are support. Read it at developer.yahoo. different sized crowds indeed, and may warrant different support decisions. com/yui/.articles/gbs/gbs.html Table 3-1. A-list browsers (generally tested for a consistent presentation and scripting experience) Browser version Platforms Released Stats Notes Internet Explorer 7 Windows XP, Linux, 2006 14% IE7 improves support for CSS2 and fixes many of Unix the bugs in IE6. It’s share will eventually surpass IE6 Internet Explorer 6 Windows, Linux, 2001 58% IE6 usage will decrease as IE7 is distributed. Unix Internet Explorer 5.5 Windows, Linux, 2001 (5.5) 1% There are significant differences in the way IE5 and 5 Unix 1999 (5) and 5.5 supports CSS, requiring workarounds until these versions finally go away. Some develop- ers have already stopped supporting IE5 with the release of IE7. Mozilla Firefox 1.0 Windows, Linux, 2005 12% Fast and standards-compliant, this is the recom- Unix, Macintosh mended browser of the development community. Netscape 7 & 8 Windows, Linux, 2002 1% Netscape once dominated; now it is barely a blip Unix, Macintosh on the radar. Opera 8+ Windows, Linux, 2005 1% Opera is popular in the development community Unix, Macintosh for its small size and standards compliance. Safari 1.0 and 2.0 Macintosh OS X 2002 (1.0) 3% Safari comes with OS X. Safari 2.0 offers the most 2005 (2.0) advanced CSS support of any current browser. Safari 3.0 Macintosh OS X, 2007 n/a In public beta as of this writing. WIndows 2007 Table 3-2. Older browser versions (tested only to make sure content is available and accessible) Netscape 4 Windows, Linux, 1999 .5% Netscape 4 has only partial support for CSS and Unix, Macintosh other standards. It is represtentative of legacy browsers. IE 5 (Mac) Macintosh 2000 1% The best standards-compliant browser option for users who must still use Mac OS 9 Lynx (or other text only old versions for 1992 n/a A text only browser is useful for testing the accessi- browser) Windows, Mac, Unix bility of content on less-than-optimal browsers. Usage statistics taken from TheCounter.com in April 2007. 30 Part I: Getting Starteda Browser Versions improved dramatically now that browsers have better support for web stan- dards established by the World Wide Web Consortium (W3C for short). The situation will continue to improve as older, problematic browser versions such as Internet Explorer 5 and Netscape 4 fade out of existence. Fortunately, nearly all browsers in use today support HTML 4.01 and XHTML standards, with only a few exceptions. That doesn’t mean that an (X)HTML document will look identical on all browsers—there may still be slight differences in the default rendering of text and form elements. That’s because browsers have their own internal style sheets that determine how each element looks by default. Instead, the new challenge for cross-browser consistency comes in the varying support of certain aspects of Cascading Style Sheets (CSS). Although most of the basic style sheet properties can be used reliably, there are still some bugs and inconsistencies that may cause unexpected results. Figure 3-1 shows how the same web page may be rendered differently based on the browser’s support of CSS. F Figur igure e 3-1. 3-1. T The he same same w web eb page page may may lo look ok differ different ent on on differ different ent br bro owsers wsers. . In In this this c case ase, , the the pr problem oblem is is in in inc inconsist onsistent ent implementation implementation of of c cer ertain tain st style yle pr prop oper erties ties b by y IE5 IE5 ( (W Win). in). F For ortunat tunately ely, , the the p per erc centage entage of of w web eb tr tra affic ffic using using IE5 IE5 ( (W Win) in) is is do down wn ar around ound 2% 2% and and shrink shrinking ing with with the the r release elease of of IE7 IE7 in in 2006. 2006. Firef Firefo ox x 1.5 1.5 Internet Explorer 5 ( Internet Explorer 5 (W Wi in nd do ow ws s 2 20 00 00 0) ) T This page appears as the author intended his page appears as the author intended. . Because of IE5W Because of IE5Win in’ ’s s implementation of CSS, implementation of CSS, c ce en nt te er ri in ng g is br is brok oken, en, c co ol lu um mn ns s o ov ve er rl la ap p, , and the tabs run together and the tabs run together. . Coping with various browser versions How do professional web designers and developers cope with the multitude of browsers and their varying capabilities? Here are a few guidelines. Don’t sweat the small stuff. As a web designer, you must allow a certain amount of variation. It’s the nature of the medium. What is important isn’t that form input boxes are all precisely 15 pixels tall, but that they work. The first lesson you’ll learn is that you have to let go. Stick with the standards. Following web standards—(X)HTML for docu- ment structure and CSS for presentation—as documented by the W3C is your primary tool for ensuring your site is as consistent as possible on all standards-compliant browsers (that’s approximately 99% of browsers in current use). Chapter 3, The Nature of Web Design 31a Alternative Browsing Environments Start with good markup. When an (X)HTML document is written in logi- D e V e l O P m e n t t I P cal order and its elements are marked up in a meaningful way, it will be Browsercam usable on the widest range of browsing environments, including the old- est browsers, future browsers, and mobile and assistive devices. It may A good shortcut for checking how your page looks in a variety of not look exactly the same, but the important thing is that your content browsers (without installing them is available. all yourself ) is to use a subscription service like Browsercam.com. For a Don’t use browser-specific (X)HTML elements. There are markup elements monthly fee, just enter the URL of and attributes out there that work only with one browser or another, a your page, and Browsercam captures remnant from the browser wars of old. Don’t use them (You won’t learn the screen image in every browser them here.) configuration you can imagine. Check it out at www.browsercam. Become familiar with the aspects of CSS that are likely to cause problems. com. It is not a substitute for testing Using style sheets effectively takes some practice, but experienced devel- performance (you can’t tell if the scripts are working), but it can catch opers know which properties are “safe,” and which require some extra style sheet and even markup issues. tweaks to get consistent results on all current browsers. Alternative Browsing Environments The previous section focused on issues relevant to graphical browsers used on desktop or laptop computers. It is critical to keep in mind, however, that F O R F U R t H e R R e A D I n G people access content on the Web in many different ways. Web designers must build pages in a manner that creates as few barriers as possible to get- Accessibility vs. ting to information, regardless of the user’s ability and the device used to Availability access the Web. In other words, you must design for accessibility. Web accessibility guru, Derek Accessibility is a major topic of discussion in the web design world, and a Featherstone, draws an interesting priority for all web designers. While intended for users with disabilities such and useful distinction between as poor vision or limited mobility, the techniques and strategies developed for “accessibility” for users with disabilities and “availability” for accessibility also benefit other users with less-than-optimum browsing expe- users with alternative devices such riences, such as handheld devices, or traditional browsers over slow modem as mobile phones. Read his blog connections or with the images and JavaScript turned off. Accessible sites are entry at www.boxofchocolates. also more effectively indexed by search engines such as Google. The extra ca/archives/2005/08/25/accessibility- and-availability effort in making your site accessible is well worth the effort. Users with disabilities There are four broad categories of disabilities that affect how people interact with their computers and the information on them: • Vision impairment. People with low or no vision may use an assistive device such as a screen reader, Braille display, or a screen magnifier to get content from the screen. They may also simply use the browser’s text zoom function to make the text large enough to read. • Mobility impairment. Users with limited or no use of their hands may use special devices such as modified mice and keyboards, foot pedals, or joysticks to navigate the Web and enter information. 32 Part I: Getting Starteda Alternative Browsing Environments • Auditory impairment. Users with limited or no hearing will miss out on audio aspects of multimedia, so it is necessary to provide alternatives, such as transcripts for audio tracks or captions for video. • Cognitive impairment. Users with memory, reading comprehension, problem solving, and attention limitations benefit when sites are design ed simply and clearly. These qualities are helpful to anyone using your site. The lesson here is that you shouldn’t make assumptions about how your users are accessing your information. They may be hearing it read aloud. They may be pushing a button to jump from link to link on the page. The goal is to make sure your content is accessible, and the site is as easy to use as possible. The mobile Web N N oott ee The increased popularity of the Web, combined with the growing reliance on A Adob dobe e Cr Cre ea at ti iv ve e S Sui uit te e 3 3 f fe ea atur ture es s m ma an ny y handheld devices such as cell phones, PDAs, and palm-top computers, has t to ool ols s f fo or r de des si ign gni in ng g a and nd o op pt ti im miz izi in ng g a ap pp pl li i- - ca cat ti io ons ns f fo or r m mob obile ile dev device ices s. . L Le ea arn rn m mo or re e a at t resulted in web browsers squeezing into the coziest of spaces. a adob dobe e.c .co om m. . Although most content accessible on mobile devices has been developed specifically for that type of browser, an increasing number of devices now include microbrowsers capable of displaying the same web content that you’d see on your PC. Microbrowsers are designed to accommodate limited display area, lower memory capacity, and low bandwidth abilities. Some have only basic HTML support and others support the current web standards. One limitation of handheld devices is screen size. Mobile displays are roughly only 240 pixels square, although some have dimensions as small as 128 pixels or as large as 320. That’s not much room to look at a typical web site. Mobile browsers deal with the limited screen size the best they can. Some shrink the page to fit by displaying the text content as it appears in the HTML source document, and resizing the images to fit the screen. Others simply allow hori- zontal scrolling. Figure 3-2 shows the Jen’s Kitchen page as it might appear in a microbrowser on a cell phone. Dealing with diversity The best way to accommodate the needs of all your visitors is to design with accessibility in mind. Accessible design not only helps your disabled visitors, but also those using the Web on the go or under any less-than-ideal condi- tions. You’ll also improve the quality of your content as perceived by search F Figur igure e 3-2. 3-2. T This his is is the the J Jen en’ ’s s K Kit itchen chen engine indexing programs. w web eb page page fr from om Chapt Chapter er 2 2 as as it it might might app appear ear on on a a mobile mobile devic device e. . ( (T The he image image The W3C started the Web Accessibility Initiative to address the need to make w was as tak taken en using using the the O Op pen enw wav ave e Mobile Mobile the Web usable for everyone. They developed the Web Content Accessibility Br Bro owser wser Sim Simulat ulator or av available ailable at at dev develop eloper er. . Guidelines (WCAG) to help developers create accessible sites. You can op open enw wav ave e.c .com om.) .) Chapter 3, The Nature of Web Design 33a Alternative Browsing Environments read them all at www.w3.org/TR/1999/WAI-WEBCONTENT-19990505. The United States government used the Priority 1 points of the WCAG as the basis for its Section 508 accessibility guidelines (see the sidebar, Government Accessibility Guidelines: Section 508). While accessibility and the techniques for achieving it are vast topics, I’ve summarized some of the guiding principles and provided pointers to useful resources here. Start with clean HTML. When your source document has been marked up with appropriate, meaningful HTML elements and the content appears in a logical order, your content will make sense in the widest variety of circumstances, whether it is read aloud or displayed on a tiny handheld screen. Provide alternatives. Always provide alternatives to non-text content such as alternative text or long descriptions for images, transcripts for audio, and captions for video content, to better serve users with various disabilities. Allow text to resize. If you use style sheets to specify font size, do so in rela- tive measurements such as percentages or ems (a unit of measurement for text equal to a capital “M” ) so that users can resize it with the browser’s “text zoom” feature (when available). Don’t put text in graphics. Although it may be tempting to control the typography of a headline by putting it in a graphic, doing so makes it less accessible by removing that content from the document. It also prevents users from resizing the text. Use accessibility features when creating HTML tables and forms. There are a number of attributes in HTML 4.01 and XHTML that improve acces- sibility by explicitly labeling columns or form fields. They’re only useful if you take the time to use them correctly. We’ll address these features in the tables and forms chapters, respectively. Be careful with colors and backgrounds. Be sure that there is plenty of con- trast between the foreground and background colors you specify. When using background images, be sure to also specify a similarly colored back- ground color so text is legible, should the image not load properly. For further reading The following resources are good starting points for further exploration on web accessibility. • The Web Accessibility Initiative (WAI), www.w3.org/WAI • WebAIM: Web Accessibility in Mind, www.webaim.org • Dive Into Accessibility: 30 days to a more accessible web site, diveintoac- cessibility.org 3 Part I: Getting Starteda User Preferences Government Accessibility Requirements: Section  0 If you create a site for a Federal agency, you are required by 9. Frames shall be titled with text that facilitates frame law to comply with the Section 508 Guidelines that ensure that identification and navigation. electronic information and technology is available to people 10. Pages shall be designed to avoid causing the screen to with disabilities. State and other publicly funded sites may also flicker with a frequency greater than 2 Hz and lower than be required to comply. 55 Hz. The following guidelines, excerpted from the Section 508 11. A text-only page, with equivalent information or Standards at www.section508.gov, provide a good checklist for functionality, shall be provided to make a web site comply basic accessibility for all web sites. with the provisions of this part, when compliance cannot be 1. A text equivalent for every non-text element shall be accomplished in any other way. The content of the text-only provided (e.g., via “alt”, “longdesc”, or in element content). page shall be updated whenever the primary page changes. 2. Equivalent alternatives for any multimedia presentation shall 12. When pages utilize scripting languages to display content, be synchronized with the presentation. or to create interface elements, the information provided by the script shall be identified with functional text that can be 3. Web pages shall be designed so that all information read by assistive technology. conveyed with color is also available without color, for example from context or markup. 13. When a web page requires that an applet, plug-in or other application be present on the client system to interpret 4. Documents shall be organized so they are readable without page content, the page must provide a link to a plug-in or requiring an associated style sheet. applet that complies with §1194.21(a) through (l). 5. Redundant text links shall be provided for each active region 14. When electronic forms are designed to be completed of a server-side image map. online, the form shall allow people using assistive 6. Client-side image maps shall be provided instead of server- technology to access the information, field elements, and side image maps except where the regions cannot be functionality required for completion and submission of the defined with an available geometric shape. form, including all directions and cues. 7. Row and column headers shall be identified for data tables. 15. A method shall be provided that permits users to skip 8. Markup shall be used to associate data cells and header cells repetitive navigation links. for data tables that have two or more logical levels of row or 16. When a timed response is required, the user shall be alerted column headers. and given sufficient time to indicate more time is required. • Building Accessible Websites, by Joe Clark (New Riders) provides a com- prehensive overview. Joe Clark’s web site (joeclark.org/access) features Joe’s latest thinking and discussions on accessibility issues. User Preferences At the heart of the original web concept lies the belief that the end user should have ultimate control over the presentation of information. For that reason, browsers are built with features that enable users to set the default appearance of the pages they view. Users’ settings will override yours, and there’s not much you can do about it. This ensures that users who need to alter the presentation to meet special needs, such as enlarging type to com- pensate for imparied vision (or even just to read while leaning back in their chairs), are able to do so. Chapter 3, The Nature of Web Design 3a User Preferences Simply by changing preference settings in the browser, anyone can affect the appearance and functionality of web pages (including yours) in the following ways. • Change the font face and size. The text zoom feature in modern brows- ers makes it easy to make text larger or smaller on the fly. Users might also change the font face in addition to the size using font settings in the browser Preferences. I’ve seen CAD designers with super-high monitor resolution set their default type at 24 points to make text easily readable from a comfortable distance. I’ve looked over the shoulder of a kid who set his browser to render all text in a graffiti font, just because he could. You simply don’t know how your text will look on the other end. Figure 3-3 shows how the Jen’s Kitchen page might look with different user preferences. • Change the background and text colors. These days, users are less likely to alter the color settings in their browsers just for fun as they did when all web pages were comprised of black text on gray backgrounds. However, some users with impaired vision may use the browser preferences to ensure that all text is dark on a light background with plenty of contrast. • Ignore style sheets or apply their own. Savvy users with specific needs may create their own style sheets that apply to all the sites they view. Others may choose to simply turn style sheets off, for whatever reason. • Turn images off. Users can opt to turn off the graphics completely. You’d be surprised at how many people do this to alleviate the wait for band- width-hogging graphics over slow modem connections. Make sure your pages are at least functional with the graphics turned off. Although add- ing alternative text for each image helps (and it’s required in HTML 4.01 and XHTML), it is not visible to 100% of your users. Figure 3-4 shows how a missing image with alternative text looks on several browsers with the images turned off. As you can see, if there is text in the graphic, it will be lost to Safari users because of Safari’s poor support for alternative text. • Turn off Java and JavaScript. Your visitors can turn off technologies such as Java or JavaScript with the push of a button. With Java turned off, Java applets will not function. It is actually fairly common for users to turn off JavaScript due to security issues (real or perceived). Figure 3-5 shows a page that uses a Java applet for its main navigation. With Java turned off, the page is a dead end. Similarly, all of the main content on the web F Figur igure e 3-3. 3-3. A A do document cument c can an lo look ok v ver ery y page at the bottom of Figure 3-5 disappears if JavaScript is not enabled. differ different ent as as a a r result esult of of the the user user’ ’s s br bro owser wser The lesson is to avoid relying on technology that can be turned on and settings settings. . off for critical content. • Turn off pop-up windows. Because pop-up ads have become such a nuisance, some browsers make it easy to prevent pop-up windows from opening. 3 Part I: Getting Starteda User Preferences Images on Firefox (same for Win and Mac) Figure 3-4. It is possible for users to IE6-Win (alt text on) IE6-Win (alt text off) turn image loading off in their browsers. Although providing alternative text helps, it is not 100% foolproof. Notice that the link labels are lost in IE 6 for Windows (when the Alt text option is turned off) and Safari on the Mac. This is another reason to be careful with the way you use images on your pages. Safari (Mac OS X) Netscape 7 (Win) Navigation disappears Java ON Java OFF Content disappears Figure 3-5. The site on the top loses all of its navigation when Java is turned off. In the site at the bottom of the figure, the main content disappears when JavaScript is not on. Both sites serve as a lesson not to require special functionality for JavaScript ON essential content. JavaScript OFF Chapter 3, The Nature of Web Design 3a Different Platforms Users also have a say about which fonts and plug-ins are installed on their computers, which can affect their experience of your site as well. Even if you specify a particular font in a style sheet, that font won’t be used if it isn’t found on the user’s hard drive (we’ll talk more about fonts in Chapter 12, Formatting Text). And as mentioned earlier, some media formats are depen- exercise 3-1 Playing dent on plug-ins that must be downloaded and installed. with preferences See how bad you can get your Coping with user preferences favorite web pages to look. Keep in mind that some users may be doing How do you deal with user preferences? It basically comes down to “if you this to you. can’t beat ‘em, join ‘em.”  Launch your browser. Select Edit Design for flexibility. Whether for good reason or on a whim, the user has ➝ Preferences from the menu. the final say on how pages look in the browser. The trend in contempo-  In Internet Explorer, select Web Content and Language/Fonts. In rary web design is to build flexibility into the page. Techniques include Firefox, select General then Fonts using CSS layout techniques that specifically allow text size to change or and Colors. providing multiple style sheets. We’ll look at some of those techniques in  Have fun setting new text and Part III. background colors. Change the size and fonts of the text. Be Make sure your content is accessible without images, scripts, applets, and sure to check or uncheck boxes plug-ins. Be prepared for the fact that some users opt to turn these fea- so that your preferences will tures off in their browsers. It is a good idea to test your site under minimal override the document’s settings. conditions to make sure content is not lost and that there are no dead Try turning off image display. ends. Always provide alterative text for images and alternative means of Now have a look at some web pages. How do you like their makeover? accessing your important information or media. Different Platforms Another variable that affects how users see your pages is the platform, or operating system, of their computers. Although most web users have personal computers running some version of the Windows operating system, a sig- nificant portion view the Web from Macintosh computers and Unix/Linux systems. The user’s platform affects: • Font availability and display. Operating systems come with different fonts installed, so you can’t assume that a font that comes installed on Windows will be available for everyone else. In addition, text tends to have a different look from platform to platform due to the methods used for sizing and rendering. Typography on the Web is discussed in more detail in Chapter 12. • The rendering of form elements. Form elements such as scrolling lists and pull-down menus tend to take on the general appearance of the oper- ating system, and therefore appear quite differently from one platform to another. They may also be sized differently, which comes into play if you are attempting to fit form elements into a space of a specific size. • Availability of plug-in media players. Browsers use plug-ins (or ActiveX controls on Windows) to play media such as streaming video, audio, or 3 Part I: Getting Started