Developer's Wonderland
Learning Web Design
TABLE OF CONTENT. Page
Responsive Web Design Where Do I Start? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
How the Web Works? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2
HTML Versus XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
Agile Development Creating a Simple Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
Structural Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9
Development Frameworks Understanding the standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10
Big Data Special Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
12
Hands On With the Nokia Lumia 925 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
14
Google I/O 2013: What to Expect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
15
The Nature of Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
16
Developer's Wonderland
Learning Web Design
Where Do I Start? Komal Baig | May 15, 2013 The Web has been around for well over a decade now, experiencing euphoric early expansion, an economic-driven bust, an innovation-driven rebirth, and constant evolution along the way. One thing is certain: the Web as a communication and commercial medium is here to stay. For many people, it’s a call to action—a new career opportunity, an incentive to keep up with competitors, or just a chance to get stuff out there for the world to see. But the world of web design can also seem overwhelming. Through my experience teaching web design courses and workshops, I’ve had the opportunity to meet people of all backgrounds who are inter ested in learning how to build web pages. Allow me to introduce you to just a few: “I’ve been a print designer for 17 years, and now all my clients want web sites.” “I work as a secretary in a small office. My boss has asked me to put together a small internal web site to share company information among employees.” “I’ve been a programmer for years, but I want to try my hand at more visual design. I feel like the Web is a good opportunity to explore new skills”. “I am an artist and I want to know how to get samples of my paintings and sculpture online.” “I’m a designer who has watched all my colleagues switch to web design in the last few years. I’m curious about it, but I feel like I may be too late.” Whatever the motivation, the first question is always the same: “Where do I start?” It may seem like there is an overwhelming amount of stuff to learn and it’s not easy to know where to jump in. But you have to start somewhere.This chapter attempts to put the learning curve in perspective by answering the most common questions I get asked by people ready to make the leap. It provides an introduction to the disciplines, technologies, and tools associated with web design. That’s an easy one—absolutely not! Although it may seem that everyone in the whole world has a personal web page, or that your colleagues are all lightyears ahead of you in web experience, I can assure you that you’re not late. The Web has become an essential part of standard business practice. We’re at the point where we just assume that a business, regardless of its size, will have a useful web site. It also remains a uniquely powerful tool for self-publishing, whether to a small circle of friends or to a worldwide audience. We can be certain that there will be a steady need for web designers and developers.
Your particular starting point will no doubt depend on your background and goals. However, a good first step for everyone is to get a basic understanding of how the Web and web pages work. That you are reading this book now shows that you are already on the right track. Once you learn the fundamentals, there are plenty of resources on the Web and in bookstores for you to further your learning in specific areas. One way to get up to speed quickly is to take an introductory web design class. If you don’t have the luxury of a full-semester course, even a weekend or one-day seminar can be extremely useful in getting over that first hump. You’ll learn that the term “web design” has come to encompass many skills, and you don’t necessarily need to learn all of them (most people don’t). This chapter introduces the various disciplines and paths you may take. Similarly, there are many levels of involvement in web design, from just building a site for yourself to making it a full-blown career. You may enjoy being a full-service web site developer or just specializing in one skill, like Flash development. There are a lot of ways you can go.
1
Developer's Wonderland
Learning Web Design
How the Web Works? Abbas Saifuddin Mundrawala | May 15, 2013 As a web designer, you spend a lot of time creating pages and tweaking them until they look good in your browser. Before you grow too attached to the way your page looks on your screen, you should now that it is likely to look different to other people. That’s just the nature of web design—you can’t guarantee that everyone will see your page the way you do. The way your site looks and performs is at the mercy of a number of variables such as browser 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 phone, or using an assistive device like a screen magnifier or a screen reader. This unpredictable nature of the Web is particularly challenging if you have experience designing for print, where what you design stays put. As a print designer who made the transition to web design, I found I needed to let go of controlling things such as page size, typography, and precise color. Having a solid understanding of the web environment allows you to anticipate and plan for these shifting variables. Eventually, you’ll develop a feel for it. This chapter looks at the ways in which browsers, user configurations, platform, connection speed, computer monitors, and alternative browsing environments affect the design and functionality of web pages. It suggests some tips for coping along the way.
the multitude of browsers in current use. Although the current version of Microsoft Internet Explorer running on Windows makes up the lion’s share (60 to 80% as of this writing), there are at least a dozen browser versions that web developers pay attention to,and hundreds more obscure or antiquated 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 improved dramatically now that browsers have better support for web standards 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.
Browsing Environments The previous section focused on issues relevant to graphical browsers used on desktop or laptop computOne of the biggest challenges in de- ers. It is critical to keep in mind, howsigning for the Web is dealing with ever, that people access content on
2
the Web in many different ways. Web designers must build pages in a manner that creates as few barriers as possible to getting to information, regardless of the user’s ability and the device used to access the Web. In other words, you must design for accessibility. Accessibility is a major topic of discussion in the web design world, and a priority for all web designers. While intended for users with disabilities such as poor vision or limited mobility, the techniques and strategies developed for accessibility also benefit other users with less-than-optimum browsing experiences,such as handheld devices, or traditional browsers over slow modem connections or with the images and JavaScript turned off. Accessible sites are also more effectively indexed by search engines such as Google. The extra effort in making your site accessible is well worth the effort.
The Mobile Web The increased popularity of the Web, combined with the growing reliance on handheld devices such as cell phones, PDAs, and palm-top computers, has resulted in web browsers squeezing into the coziest of spaces. 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.
Developer's Wonderland
Learning Web Design
HTML Versus XHTML Sarmad Saleem | May 15, 2013 The argument about whether to use HTML or XHTML is one that comes up time and time again. Not so long ago, everyone was advising the use of XHTML almost without question, for no other reason than that it’s a newer implementation of HTML and therefore the better option. However, many people who once recommended using XHTML have since changed their minds on the topic—including some SitePoint authors who made very strong arguments as to why examples in their books should be presented in HTML 4 rather than XHTML 1.1.5 It seems that we need to clarify what HTML and XHTML are, what their differences are, and why one or the other should be used. The first thing you should realize is that using HTML is not wrong as long as you specify that you’re using HTML with the appropriate doctype (p. 6), and the HTML you use is valid for that doctype. If you want to use HTML 4.01, no one can stop you! Ignore anyone who tells you that XHTML is way to go, and that using HTML.
about a site that receives a significant amount of traffic, the savings may well add up, so you might need to get your calculator out! The argument about whether to use HTML or XHTML is one that comes up time and time again. Not so long ago, everyone was advising the use of XHTML almost without question, for no other reason than that it’s a newer implementation of HTML and therefore the better option. However, many people who once recommended using XHTML have since changed their minds on the topic—including some SitePoint authors who made very strong arguments as to why examples in their books should be presented in HTML 4 rather than XHTML 1.1.5 It seems that we need to clarify what HTML and XHTML are, what their differences are, and why one or the other should be used. For example, if your use of HTML 4.01 means that you can omit 100 bytes of characters from a given document (without those deletions having an adverse effect on the document’s presentation in the browser), and if that document receives one million hits a day, over the course of a month that saving You may have heard or read that choosing XHTML means will amount to almost 3GB of bandwidth. Now, this is just that you can’t use certain presentational elements such as a hypothetical scenario, and this is but one page in a web center (p. 176), font (p. 188), basefont (p. 172), or u (p. 225). site, but depending on the number of visitors your site atBut this isn’t strictly true. You may use these elements in tracts document (without those deletions having an adverse XHTML Transitional and Frameset just as you could in effect on the document’s presentation in the browser), and HTML Transitional and Frameset—the difference is that if that document receives one million hits a day, over the they’re not allowed in the Strict versions of these markup course of a month that saving will amount to almost 3GB of languages. Hopefully that’s a myth busted! If you do opt to bandwidth. Now, this is just a hypothetical scenario, and this use XHTML Strict (or HTML Strict), and you thereby lose is but one page in a web site, but depending on the number these presentational elements, you’ll definitely need to rely of visitors your site attracts, a shaving of markup here, and a on CSS to do the work of prettying things up; this approach corner cut there—all the while ensuring that your page valialso places just a little more emphasis on the use of more dates as HTML 4.01—really can encourage you to use HTML structurally orientated elements available in HTML and rather than XHTML.The first thing you should realize is that XHTML. But don’t be led to believe that XHTML is in some using HTML is not wrong as long as you specify that you’re way more structural than HTML 4.01. You’re not going to be using HTML with the appropriate doctype (p. 6), and the adding new structural features through your use of XHTM- HTML you use is valid for that doctype. If you want to use L—headings, paragraphs, block quotes, and so on were all HTML 4.01, no one can stop you! Ignore anyone who tells present in HTML 4.01. Regardless of the flavor of markup you that XHTML is way to go, and that using HTML you choose—HTML or XHTML—you can easily mark up your page using a series of div (p. 44) and span (p. 218) elements, style it entirely in CSS, validate it, and still be left with a document that offers no apparent meaning or structure about the content it contains. In short, the language is only as good as the pair of hands responsible for crafting it, and thus XHTML doesn’t guarantee a better end result! One possible reason for using HTML 4.01 over XHTML (of any kind or level of strictness) might be that page size is a very important consideration. For example, you may be creating a page that needs to be downloaded over a restricted connection, perhaps to a mobile device of some kind. By using HTML 4.01, For example, if your use of HTML 4.01 means that you can you’re able to reduce the markup by not using quote marks omit 100 bytes of characters from a given document (withand not using closing tags where the spec indicates that out those deletions having an adverse effect on the docuthey’re optional. If you’re building your own personal web ment’s presentation in the browser), and if that document site, or you’re building a site for an organization that doesn’t receives one million hits a day, over the course of a month have (or expect) huge amounts of traffic, the aim of that saving will amount to almost 3GB of bandwidth. achieving slightly leaner page weights probably won’t be a strong case for using HTML 4.01. However, if we’re talking
3
Developer's Wonderland
Learning Web Design
Creating a Simple Page Manish Kumar | May 15, 2013 In the previous chapter, you learned the hows and whys of (X)HTML markup. This chapter introduces the elements you have to choose from for marking up text content. There probably aren’t as many of them as you might think, and really just a handful that you’ll use with regularity. Before we get to the element roll-call, this is a good opportunity for a reminder about the importance of meaningful (semantic) and well-structured markup. In the early years of web design, it was common to choose elements based on how they looked in the browser. Don’t like the size of the h1? Hey, use an h4 instead. Don’t like bullets on your list? Make something list-like using line break elements. But no more! Those days are over thanks to reliable browser support for style sheets that do a much better job at handling visual presentation than (X)HTML ever could. You should always choose elements that describe your content as accurately as possible. If you don’t like how it looks, change it with a style sheet. A semantically marked up document ensures your content is available and accessible in the widest range of browsing environments, from desktop computers to cell phones to screen readers. It also allows non-human readers, such as search engine indexing programs, to correctly parse your content and make decisions about the relative importance of elements on the page.
Your content should also read in a logical order in the source. Doing so improves its readability in all browsing environments. Information that should be read first should be at the beginning of the (X)HTML source document. You can always use style sheets to position elements where you want them on the final web page. With these guidelines in mind, it is time to meet the (X)HTML text elements, starting with the block-level elements.
Building Blocks When creating a web page, I always start with my raw content in a text file and make sure that it has been proofread and is ready to go. I put in the document structure elements (html, head, title, and body). I also identify which version of (X)HTML I’m using in a DOCTYPE declaration, but we’ll get to that in Chapter 10, Understanding the Standards. Then I am ready to divide the content into its major block-level elements. Block-level elements make up the main components of content structure. As mentioned in Chapter 4, Creating a Simple Page, block-level elements always start on a new line and usually have some space added above and below, stacking up like blocks in the normal flow of the document. There are surprisingly few text block-level elements. Table 5-1 lists (nearly) all of them (see note).
Paragraphs 4
Developer's Wonderland
Learning Web Design
Paragraphs are the most rudimentary elements of a text document. You indicate a paragraph with the p element. Simply insert an opening tag at the beginning of the paragraph and a closing tag after it, as shown in this example. Serif typefaces have small slabs at the ends of letter strokes. In general, serif fonts can make large amounts of text easier to read. Sansserif fonts do not have serif slabs; their strokes are square on the end. Helvetica and Arial are examples of sans-serif fonts. In general, sans-serif fonts appear sleeker and more modern. Paragraphs may contain text, images and other inline elements, but they may not contain other block elements, including other p elements, so be sure never to put the elements listed in Table 5-1 between paragraph tags.Paragraphs may contain text, images and other inline elements, but they may not contain other block elements, including other p elements, so be sure never to put the elements listed in Table 5-1 between paragraph tags.
Headings In the last chapter, we used the h1 and h2 elements to indicate headings for our Black Goose Bistro page. There are actually six levels of headings in (X)HTML, from h1 to h6. Because headings are used to provide logical hierarchy or outline to a document, it is proper to start with the Level 1 heading (h1) and work down in numerical order. Doing so not only improves accessibility, but helps search engines (information in higher heading levels is given more weight). Using heading levels consistently throughout a site—using h1 for all article titles, for example—is also recommended. This example shows the markup for four heading levels. Additional heading levels would be marked up in a similar manner.You can use a style sheet to specify the appearance of the heading levels. By default, they will be displayed in bold text, starting in very large type for h1s with each consecutive level in smaller text. Heading elements implement six levels of document headings.
The Inline Text Element Round-up Most (X)HTML text elements are inline elements, which means they just stay in the flow of text and do not cause line breaks. Inline text elements fall into two general categories: semantic elements and presentational elements. Those terms should be familiar by now. The semantic elements describe the meaning of the text; for example, an acronym or emphasized text. The presentational elements provide descriptions of the element’s typesetting or style, such as bold, italic, or underlined. It should come as no surprise that the presentational inline elements are discouraged from use in contemporary web design where style information should kept be separate from the markup. For that reason, we’ll pay more attention to the preferred semantic elements in this section.
Semantic inline elements The semantic text elements describe the enclosed text’s meaning, context or usage. The way they look when they appear in the browser window depends on a style sheet, either one you provide or the browser’s built-in default rendering. Despite all the types of information you could add to a document, there are only a dozen of these elements in (X)HTML. Table 5-2 lists all of them. We’ll discuss each in more detail in this section.Now that you’ve gotten your feet wet formatting text, are you ready to jump into the deep end? .
5
Ad.
Developer's Wonderland
Learning Web Design
Cascading Style Sheets Abbas Saifuddin Mundrawala | May 15, 2013 You’ve seen style sheets mentioned quite a bit already, and now we’ll finally put them to work and start giving our pages some much needed style.Cascading Style Sheets (CSS) is the W3C standard for defining the presentation of documents written in HTML, XHTML, and, in fact, any XML language. Presentation, again, refers to the way the document is displayed or delivered to the user, whether on a computer screen, a cell phone display, or read aloud by a screen reader. With style sheets handling the presentation, (X)HTML can get back to the business of defining document structure and meaning, as intended. CSS is a separate language with its own syntax. This chapter covers CSS terminology and fundamental concepts that will help you get your bearings for the upcoming chapters, where you’ll learn how to change text and font styles, add colors and backgrounds, and even do basic page layout using CSS. Will you be a style sheet expert by the end of Part III? Probably not. But you will have a solid foundation for further reading, and lots of practice.
The Benefits of CSS Not that you need further convincing that style sheets are the way to go, but here is a quick run-down of the benefits of using style sheets.Better type and layout controls. Presentational (X)HTML never gets close to offering the kind of control over type, backgrounds, and layout that is possible with CSS. Less work. You can change the appearance of an entire site by editing one style sheet. Making small tweaks and even entire site redesigns with style sheets is much easier than when presentation instructions are mixed in with the markup.Potentially smaller documents and faster downloads. Old school practices of using redundant font elements and nested tables make for bloated documents. Not only that, you can apply a single style sheet document to all the pages in a site for further byte savings. More accessible sites. When all matters of presentation are handled by CSS, you can mark up your content meaningfully, making it more accessible for nonvisual or mobile devices.
Reliable browser support. Nearly every browser in current use supports all of CSS Level 1 and the majority of CSS Level 2. (See the sidebar, Meet the Standards, for what is meant by CSS “levels.”) Come to think of it, there really aren’t any disadvantages to using style sheets. There are some lingering hassles from browser inconsistencies, but they can either be avoided or worked around if you know where
7
Developer's Wonderland
Learning Web Design
to look for them. It’s by no means a reason to put off using CSS right away. The power of CSS We’re not talking about minor visual tweaks here, like changing the color of headlines or adding text indents. When used to its full potential, CSS is a robust and powerful design tool. My eyes were opened by the variety and richness of the designs at CSS Zen Garden (www.csszengarden.com). Figure 11-1 shows just a few of my favorites. All of these designs use the exact same XHTML source document. Not only that, it doesn’t include a single img element (all of the images are used as backgrounds). But look how different each page looks—and how sophisticated—that’s all done with style sheets. Granted, it takes a lot of practice to be able to create CSS layouts like those shown in Figure 11-1. Killer graphic design skills help too (unfortunately, you won’t get those in this book). I’m showing this to you up front because I want you to be aware of the potential of CSS-based design, particularly because the examples in this beginners’ book tend to be simple and straightforward. Take your time learning, but keep your eye on the prize. How Style Sheets Work It’s as easy as 1-2-3! Start with a document that has been marked up in HTML or XHTML. Write style rules for how you’d like certain elements to look. Attach the style rules to the document. When the browser displays the document, it follows your rules for rendering elements (unless the user has applied some mandatory styles, but we’ll get to that later). OK, so there’s a bit more to it than that, of course. Let’s give each of these steps a little more consideration.
The good news is that I’ve whipped up a little XHTML document for you to play with.Selectors In the previous small style sheet example, the h1 and p elements are used as selectors. This most basic type of selector is called an element type selector. The properties defined for each will apply to every h1 and p element in the document, respectively. In upcoming chapters, I’ll introduce you to more sophisticated selectors that you can use to target elements, including ways to select groups of elements and elements that appear in a particular context. Mastering selectors—that is, choosing the best type of selector and using it strategically—is an important step in becoming a CSS Jedi Master.
Declarations The declaration is made up of a property/value pair. There can be more than one declaration in a single rule; for example, the rule for p element above has both the font-size and font-family properties. Each declaration must end with a semicolon to keep it separate from the following declaration (see note). If you omit the semicolon, the declaration and the one following it will be ignored. The curly brackets and the declarations they contain are often referred to as the declaration block (Figure 11-3). Because CSS ignores whitespace and line returns within the declaration block, authors typically write each declaration in the block on its own line, as shown in the following example. This makes it easier to find the properties applied to the selector and to tell when the style rule ends.
8
Developer's Wonderland
Learning Web Design
Structural Elements Abbas Saifuddin Mundrawala | May 15, 2013 The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source. It may be just a few lines, or it may contain several paragraphs (which you’d mark up using nested p (p. 70) elements). The W3C recommendation states that web page authors should not type quotation marks in the text when they’re using blockquote—we can leave it to the style sheets to take care of this element of presentation (just as it should be when the q (p. 202) element is used for short, inline quotations). In practice, though, many authors do choose to include quote marks, as browser support for automatically inserting the language-appropriate quotation marks is extremely poor. By default, most browsers’ basic built-in style sheets render blockquote content with left and right indentations, as shown in Figure 2.1. As a consequence, many people learned to use blockquote to indent the text as a way to draw attention to a paragraph or section of a page. Of course, this is bad practice—it’s simply the wrong markup for the job. Only use blockquote if you’re actually quoting a source; to visually indent a block of text that’s not a quotation, use CSS (margin-left, or any other style property you care to choose). As well as the core (p. 496) and event attributes (p. 507), which are used across all HTML elements, blockquote has the cite attribute, which is used to identify the online source of the quotation in the form of a URI (for example, "http://sourcewebsite.doc/document.html"); the value of the cite attribute is not rendered on the screen. As such, browser support for this attribute is marked as none, but because it has other potential uses (for example, in search engine indexing, retrieval of its content via DOM Scripting, and more), and since improved native support for the attribute is anticipated in future browser versions, you should use the cite attribute when you use blockquote. The text attribute was used in older browsers to change the default body text. The specified settings would apply to any text, be that a heading, a
paragraph, or a block quote (link colors were set using their own attributes, alink (p. 33), link (p. 36), and vlink (p. 38), all of which are now deprecated). This attribute is also deprecated, so you should avoid using it. Instead, use CSS to set the color of body text. The example shown above would translate to the following CSS: body {background:black;color:lime;}. Visited links will display in purple with an underline, which may not be sufficiently different to the default blue link display for some users (see the section on the (p. 36) attribute for more). The vlink attribute allows you to change the color of all links to pages that have previously been visited. This attribute is deprecated, so you should avoid using it. Instead, use the CSS equivalent to set link colors: a:visited {color:gray;}. Note that the visited state is based on the browser’s history. If the user clears the browser’s history log, the visited links will once again render as unvisited links. The br element’s purpose is very simple: it creates a line break within a block of text, leaving no padding or margins between the two blocks of text created by the line break. While it’s still perfectly valid to use this element in XHTML Strict pages (it’s not on the list of deprecated elements), you need to take care that you don’t misuse it, because:
ment can be used to group almost any elements together. Indeed, it can contain almost any other element, unlike p, which can only contain inline elements. The h1 element is used to indicate the most important (or highest-level) heading on the page. In total, we have six heading levels to choose from—h1 to h6—to add structure to the web page. h1 is the highest heading level (and, by default, the largest in terms of font size) and h6 the lowest (and smallest).
A document’s first heading should be an h1, followed by one or more h2 headings; each of these h2 headings can then have a further series of h3 headings below them, and so on, right on down to heading level 6. The HTML 4 spec states that heading levels should not be skipped (that is, you shouldn’t have a series of headings in theorder h1, h2, h2, h4, which skips the h3 entirely), although it isn’t always possible to guarantee such rigidity in the markup, particularly if your pages are generated by a CMS. However, this goal is certainly one for which you The div is a generic block-level ele- should aim. Headings add semantic ment. It doesn’t convey any meaning richness to a document, which can help about its contents (unlike a p element with search engines’ understanding of that signifies a paragraph, or an h1 (p. the makeup of that document, and pro46) or h2 (p. 50) element that would in- vide users of assistive devices (such as dicate a level 1 or level 2 heading, re- screen readers) with an additionspectively); as such, it’s easy to cus- al—and quick—method by which to tomize it to your needs. The div ele- navigate through a document: they can ment is currently the most com- skip from heading to heading. Figure mon method for identifying the struc- 2.4 shows a comparison of the six tural sections of a document and for heading levels in a fictional web site, laying out a web page using CSS. Some as rendered by Firefox’s default browsdevelopers perceive similarities be- er style sheet. In total, we have six tween the p and the div elements, see- heading levels to choose from—h1 to ing them as being interchangeable, but h6—to add structure to the web page. this isn’t the case. The p element offers h1 is the highest heading level (and, by more semantic information (“this is a default, the largest in terms of font paragraph of text, a small collection of size) and h6 the lowest (and smallest). houghts that are grouped together; the next paragraph outlines some different thoughts”), while the div ele-
9
Developer's Wonderland
Learning Web Design
Understanding the standards Abbas Saifuddin Mundrawala | May 15, 2013 I’m going to warn you right now... this is a big, geeky chapter full of some pretty dry material. But I know you can handle it. If you have any notion of doing web development professionally, you’ll be required to know it. Even if you don’t, it’s important stuff.Professional web designers know that the best way to ensure consistency and accessibility across multiple browsers and devices is to write standards compliant web documents. Standards compliance simply means that your documents abide by all of the rules in the latest r-ecommendations published by the World Wide Web Consortium (the W3C). That includes HTML and XHTML for markup, but also other standards for style sheets (CSS) and accessibility. This chapter covers what it takes to get compliant. It gets into the nittygritty on HTML and XHTML and their various versions. It begins with a fair amount of story-telling, painting the picture of (X)HTML’s past, present, and future. Once you have a feel for the big picture, the markup requirements that follow will make a lot more sense. So sit back and enjoy the tale of HTML and XHTML. (If you’re thinking, “C’mon! I don’t have time for this... just tell me what I need to put in my document!” then you can skip to the last section in this chapter, Putting It All Together, for the bottom line.)
Everything You’ve Wanted to Know By now you’re familiar with (X)HTML—you’ve even gotten handy with it. But did you know that there have been many versions of HTML since its creation by Tim Berners-Lee in 1991? The quick rundown that follows sums up HTML’s journey and should provide some useful context for where we are today. Read the sidebar, HTML Version History, for more details. HTML and what we know as the Web got their start at a article physics lab ( CERN) in Switzerland where Tim Berners-Lee had an idea for sharing research documents via a hypertext system. Instead of inventing a methodGeneralized Markup Language) as the basis for what he coined the Hypertext Markup Language (HTML for short). He took many elements such as p and h1 through h6 right from SGML, then invented the anchor (a) element for adding hypertext links.Early versions of HTML (HTML + and HTML 2.0) built on Tim’s early work with the intent of making it a viable publishing option for a greater worldwide audience.
HTML gets muddied In 1994, Mosaic Communications introduced the Netscape browser and took the Web by storm. Their most notable “contribution” to web technology was the introduction of many proprietary extensions to HTML that improved the presentation of web documents (in Netscape only, naturally). When Microsoft finally entered the browser scene in 1996 with Internet Explorer 3.0, they countered by devel-
oping their own proprietary HTML extensions and web technologies. This divisive one-upping is generally referred to as the Browser Wars, and we are still living with the fallout. international academic community, but it lagged behind commercial development, and Netscape and Microsoft weren’t waiting for it. Finally, the newly-formed W3C put a stake in the ground and released its first Recommendation, HTML 3.2, in 1996. HTML 3.2 documented the current state of HTML markup, including many of the popular presentational elements and attributes introduced by the browser developers and gobbled up by site designers. The integrity of HTML had been compromised, and we’re still cleaning up the mess....and back on track. HTML 4.0 and 4.01 (the slight revision that superseded it in 1999) set out to rectify the situation by emphasizing the separation of presentation from content. All matters of presentation were handed off to the newly developed Cascading Style Sheets (CSS) standard. The other major advances in HTML 4.0 and 4.01 were a number of accessibility and internationalization features that aimed to make the Web available to everyone. HTML 4.01 is the most current version of HTML. (We’ll get to its prim and proper identical cousin, XHTML, in a moment.) It would be nice if we could just end there and say, “so use HTML 4.01,” but it’s not so simple. There are actually three versions of HTML 4.01 to be aware of: Transitional, Strict, and Frameset. Let’s look at what they are and how they differ.
HTML in three flavors The authors of the HTML 4.01 Recommendation had a dilemma on their hands. They had a vision of how HTML should work, given the standardization of style sheets and scripting languages. Unfortunately, the practical fact was, by that time, millions of web pages had been written in legacy HTML. They could not enforce a radical change to the standard overnight.To address this problem, they created several versions of HTML. Transitional The “Transitional” version includes most of the presentational extensions to HTML that were in common use. This option was made available to ease web authors as well as browser and tools developers out of their old habits. The presentational elements (like center) and attributes (like bgcolor and align) were marked as deprecated, indicating that they would be removed from future versions of HTML. The HTML 4.01 Recommendation urges the web community to avoid using deprecated elements and attributes. Now that CSS is well supported by virtually all browsers, that is finally easy to do.
Strict At the same time, the W3C created a “Strict” version of HTML 4.01 that omits all of the deprecated elements and gets HTML into the state they ultimately wanted it to be in. The third version of HTML is the “Frameset” version, which describes the content of framed documents. Frames
10
Developer's Wonderland
Learning Web Design
make it possible to divide the browser into multiple windows, each displaying a different HTML document. Frames are constructed with a frameset document that defines the frame structure and the content of each frame. Frameset documents are fundamentally different from other HTML documents because they use the frameset element instead of body. This technicality earned them their own HTML specification. Now you know that HTML has three versions, but let’s talk about it in a slightly more technical way, using some terminology that will come in handy later. When you create a markup language such as HTML, it is useful to document it in a Document Type Definition, or simply DTD, particularly if large groups of people will be using that language. A DTD defines all of the elements and attributes in the language, as well as the rules for using them. What the W3C actually did was write three slightly different DTDs for HTML 4.01: the Transitional DTD, Strict DTD, and Frameset DTD. DTDs are dense documents with a syntax that takes a while to learn to read. Luckily, you probably will never need to. But just to give you an idea, Figure 10-1 shows a small snippet of the HTML 4.01 DTD that defines the p and h1–h6 elements and their available attributes. If you are the curious type, you can take a peek at the full Strict DTD here: www.w3.org/TR/html4/ strict.dtd. Don’t worry about understanding exactly what everything means; it is sufficient to know that there are three HTML 4.01 DTDs. That’s where the development of HTML stopped, but the story doesn’t end there.
Namespace and language requirements In addition to the rules listed above, because XHTML is an XML language,there are a few required attributes for the html root element that are not used in HTML. The html element for XHTML documents must be written like this: The xmlns attribute stands for XML namespace. A namespace is a convention established in XML to identify the language (also called a vocabulary) used by a document or element. Because XML allows several languages to be used in a document, there is the potential for overlap in element names. For example, how is an XML parser to know whether the a element is an XHTML anchor or an “answer” from some hypothetical XML language used for testing? With XML namespaces, you can make your intention clear. In XHTML doc-
uments, you must identify the xmlns as XHTML using the unique identifier for XHTML, as shown. The lang and xml:lang attributes are two ways of specifying the language of the document. The value is a standardized two- or threeletter language code. Chances are if you are reading this book, you will be authoring documents in English (en). For a complete list of language codes, see www.loc.gov/standards/ iso639-2/langcodes.html. This is a good time to put some of this book-learning to use. Exercise 10-1gives you a chance to convert an HTML document to XHTML. I’m going to warn you right now... this is a big, geeky chapter full of some pretty dry material. But I know you can handle it. If you have any notion of doing web development professionally, you’ll be required to know it. Even if you don’t, it’s important stuff.Professional web designers know that the best way to ensure consistency and accessibility across multiple browsers and devices is to write standards compliant web documents. Standards compliance simply means that your documents abide by all of the rules in the latest r-ecommendations published by the World Wide Web Consortium (the W3C). That includes HTML and XHTML for markup, but also other standards for style sheets (CSS) and accessibility. This chapter covers what it takes to get compliant. It gets into the nittygritty on HTML and XHTML and their various versions. It begins with a fair amount of story-telling, painting the picture of (X)HTML’s past, present, and future. Once you have a feel for the big picture, the markup requirements that follow will make a lot more sense. So sit back and enjoy the tale of HTML and XHTML. (If you’re thinking, “C’mon! I don’t have time for this... just tell me what I need to put in my document!” then you can skip to the last section in this chapter, Putting It All Together, for the bottom line.) I’m going to warn you right now... this is a big, geeky chapter full of some pretty dry material. But I know you can handle it. If you have any notion of doing web development professionally, you’ll be required to know it. Even if you don’t, it’s important stuff.Professional web designers know that the best way to ensure consistency and accessibility across multiple browsers and devices is to write standards compliant web documents. Standards compliance simply means that your documents abide by all of the rules in the latest r-ecommendations published by the World Wide Web Consortium (the W3C). That includes HTML and XHTML for markup, but also other standards for style sheets (CSS) and accessibility.
11
Developer's Wonderland
Learning Web Design
Special Files Sarmad Saleem | May 15, 2013 Special files constitute the most unusual feature of the UNIX file system. Each I/O device supported by UNIX is associated with at least one such file. Special files are read and written just like ordinary disk files, but requests to read or write result in activation of the associated device. An entry for each special file resides in directory /dev, although a link may be made to one of these files just like an ordinary file. Thus, for example, to punch paper tape, one may write on the file /dev/ppt. Special files exist for each communication line, each disk, each tape drive, and for physical core memory. Of course, the active disks and the core special file are protected from indiscriminate access. There is a threefold advantage in treating I/O devices this way: file and device I/O are as similar as possible; file and device names have the same syntax and meaning, so that a program expecting a file name as a parameter can be passed a device name; finally, special files are subject to the same protection mechanism as regular files. Although the root of the file system is always stored on the same device, it is not necessary that the entire file system hierarchy reside on this device. There is a mount system request which has two arguments: the name of an existing ordinary file, and the name of a direct-access special file whose associated storage volume (e.g. disk pack) should have the structure of an independent file system containing its own directory hierarchy. The effect of mount is to cause references to the heretofore ordinary file to refer instead to the root directory of the file system on the removable volume. In effect, mount replaces a leaf of the hierarchy tree (the ordinary file) by a whole new subtree (the hierarchy stored on the removable volume). After
the mount, there is virtually no distinction between files on the removable volume and those in the permanent file system. In our installation, for example, the root directory resides on the fixedhead disk, and the large disk drive, which contains user’s files, is mounted by the system initialization program, the four smaller disk drives are available to users for mounting their own disk packs. A mountable file system is generated by writing on its corresponding special file. A utility program is available to create an empty file system, or one may simply copy an existing file system. There is only one exception to the rule of identical treatment of files on different devices: no link may exist between one file system hierarchy and another. This restriction is enforced so as to avoid the elaborate bookkeeping which would otherwise be required to assure removal of the links when the removable volume is finally dismounted. Inparticular, in the root directories of all file systems, removable or not, the name “..” refers to the directory itself instead of to its parent.
ing the execution of the program which calls for it. The set-user-ID feature provides for privileged programs which may use files inaccessible to other users. For example, a program may keep an accounting file which should neither be read nor changed except by the program itself. If the set-useridentification bit is on for the program, it may access the file although this access might be forbidden to other programs invoked by the given program’s user. Since the actual user ID of the invoker of any program is always available, set-user-ID programs may take any measures desired to satisfy themselves as to their invoker’s credentials. This mechanism is used to allow users to execute the carefully written commands which call privileged system entries. For example, there is a system entry invocable only by the “superuser” (below) which creates an empty directory. As indicated above, directories are expected to have entries for and The command which creates a directory is owned by the super user and has the set-user-ID bit set. After it checks its invoker’s authorizaAlthough the access control scheme in tion to create the specified directory, it UNIX is quite simple, it has some un- creates it and makes the entries for usual features. Each user of the sys- and Since anyone may set the set-usertem is assigned a unique user identifi- ID bit on one of his cation number. When own files, this mechanism is generally a file is created, it is marked with the available with- out administrative inuser ID of its owner. Also given for new tervention. For example, this protecfiles is a set of seven protection bits. tion scheme easily solves the MOO acSix of these specify independently counting problem posed in [7]. The sysread, write, and execute permission for tem recognizes one particular user ID the owner of the file and for all other (that of the “super-user”) as exempt users. If the seventh bit is on, the sys- from the usual constraints on file actem will temporarily change the user cess; thus (for example) programs may identification of the current user to be written to dump and reload the file that of the creator of the file whenever system without unwanted interferthe file is executed as a program. This ence from the protection system. change in user ID is effective only dur-
12
Ad.
Developer's Wonderland
Learning Web Design
Hands On With the Nokia Lumia 925 Sarmad Saleem | May 15, 2013 fer over IPS displays. A nice touch is the ability to incrementally tailor color saturation and vibrancy for the screen as a whole to set it just how you like it.
Smart Camera Typical to the Lumia range, the 925’s fanfare parade is for its camera. Sporting the same 8.7-megapixel sensor from its previous models, Nokia promises us it’s made huge improvements to the camera lens and software algorithms that make it the "most advanced lens technology" available. Importantly, the 925’s camera has the PureView label, and its Carl Zeiss lens has a new addition — a new lens. The The Lumia 925 is another notch on the photographic bed- lens has six elements (one glass, five plastic) compared to post of Nokia’s burgeoning cameraphone arsenal. The first the iPhone’s five, which Nokia claims has significantly imin its flagship metal range, the company cites a "materials- proved its low-light credentials. Strangely there’s no xenon based design approach," and it certainly feels sturdy and flash as added to last week’s 928, so we have to settle with comfy in hand while being noticeably lighter and slimmer the dual LED instead, but in the ‘photos in the dark’ test than its Lumia siblings. room it proved to be as adept as we’d hoped for and a better The new design incorporates a slim matte-finish aluminium low-light performer than most smartphone cams. band running around its edge that divides the polycarbon- It’s not just in the hardware the Nokia has made improveate rear from the sculpted edge-to-edge Gorilla Glass ments to its camera. Smart Camera is a new app that hosts screen. It not only looks good but acts as the 925’s antenna the camera’s myriad functionality, making it super easy and too. It’s a positive step away from the usual Lumia design quick to shoot and edit your pics all from one place. Shooting and at only 0.33 inch thin and 4.9 ounces (that’s 1.6 ounces 10 frames each time you click, you’re then presented with lighter than the Lumia 920) conspires to make the 925 a five editing modes including Best Shot, Action Shot, Motion phone you’ll want to hold and stroke while making the older Blur, Change Faces and Fade Effect. Lumias look almost clunky by comparison. I have to say, it’s startlingly easy to use and in less than a Internally it’s Lumia business as usual despite the 925’s less- minute I was chopping and changing in all sorts of ways, er dimensions and weight. It runs the same dual-core from fading colors out to blurring backgrounds with two 1.5GHz processor with 1GB of RAM and up to 16GB of non- swipes and a tap of the screen. The Fade Effect is another expandable storage (although Nokia said Vodafone would particularly nice touch that lets you create some strange be offering an exclusive deal for a 32GB version in the U.K., ghosting effects that could have kept me occupied for hours. Germany, Spain and Italy). Granted, even with two errant skateboarders showing off, Available in three "colours" — black, white and grey and var- the launch event isn’t the best place to test this tech to the ious two-tone combinations thereof, the 925 has a serious max, but I was left itching to have another go in "real world" but sophisticated look and feel that I like more than the hall- conditions. Punchy and clear on the new OLED screen, the mark primary colors of the existing Lumia line. 925 may now have set the benchmark for smartphone camThe Lumia 925 lacks the 920’s integrated Qi wireless charg- era photography and editing. ing, but you can get it back — along with those bright colors — with an accessory. To wireless charge, you’ll need to buy a snap-on cover that acts and looks like any typical phone case and comes in the full gamut of Lumia colours — black, red, Internally, the 925 differs little from the 920 (and the 928 white and a particularly punchy yellow. from what we’ve seen) and as such performance is almost identical, which is not a bad thing. Standard web browsing was fine with pages loading quickly and cleanly, while email took a little longer but that was mostly down to the pedesAnother change from the existing Lumia range but following trian Wi-Fi I was using. on from the announcement of last week’s 928 is the new In truth, the real differentiators over the 920 and 928 are 4.5-inch OLED display delivering 1,280 x 768 pixels. It’s still in design and the camera upgrades. Design- and looks-wise, peddling the ClearBlack technology that suitably blackens the 925 has left the existing Lumias lagging way behind, blacks and by contrast helps colours to pop, and in our test boosted by the hefty weight loss and the inclusion of that model the Windows Live Tiles were clear and sharply de- subtle metal styling. fined, though the underground bunker location didn’t give us a chance to test it in direct sunlight where OLED can suf-
Best of the Rest
Screen Idol
14
Developer's Wonderland
Learning Web Design
Google I/O 2013: What to Expect Komal Baig | May 15, 2013 It’s an overdue feature, and would finally give Android the equivalent of Game Center on iOS. The introduction of Google Game Center for Android (as it’s rumored to be called) will make it easier for developers to create engaging, multiplayer games by standardizing the tools involved. Android phones, tablets and gaming devices such as Nvidia’s Project Shield will all benefit. Might the introduction of an Android Game Center mean a return of the Nexus Q as a gateway to Android gaming on a TV? That’s doubtful, but if we don’t see some kind of rebirth for the Q at I/O 2013, we can consider it dead and buried. Google’s annual developer conference, Google I/O, begins Wednesday morning, and it has a tough act to follow. The company set the bar high last year with a product- and event-dominated agenda, including the well-reviewed Nexus 7 tablet, a big step up for Android in version 4.1 "Jelly Bean" and an amazing skydiving stunt to hype Google Glass. Even the Nexus Q media console — a dud if there ever was one — was notable: It didn’t just fail, it failed spectacularly. So how can Google top itself for 2013? Answer: by not trying. Ahead of the conference, Google’s Android head Sundar Pichai sought to manage expectations in an interview with Wired. Don’t expect the same product carnival we saw in Google I/O 2012. This year, Google is amping up the geek factor (if that’s possible) and focusing on developers. That doesn’t mean there won’t be any product announcements, just that the majority of them will probably be software rather than hardware. We also likely won’t see any new game-changers the way Google Glass stole headlines last year. In 2012, Google was planting seeds; now it’s watering them. Here’s what we expect to see growing in that garden:
Android Update There will definitely be some kind of update to Android at Google I/O 2013, but it’s unclear how big of an update. Early rumors pegged the conference as the launchpad for version 5.0 "Key Lime Pie," but now the buzz is pointing to a less momentous change in the ecosystem. Yes, we may get another flavor of Jelly Bean before we can stuff ourselves with Pie. Android 4.3 supposedly upgrades the OS to Bluetooth Smart Ready, meaning phones will support low-energy devices such as heart-rate monitors. As for other features, we’ll have to wait and see, but they’re sure to be similarly minor.
Hardware
A new tablet? Yes, that’s probably on deck, but it looks like it’ll be an update to Google’s succesful Nexus 7 rather than something new. A Nexus 8 — something to compete more directly with the iPad mini — has occasionally been rumored, but reports about it petered out, suggesting it was never real, or may debut later. What about the Motorola X Google Glass isn’t just a weird object sitting on a few phone, which has been talked about for months? That’s alGooglers’ faces anymore. Now, thousands of developers most certainly in development, but if it makes an appearanhave the hardware, and most of them will be at I/O. Google ce at I/O, it’ll probably be in an early preview form rather is loading Day 2 of the conference with several sessions ded- than a launch. Given how most companies reveal phones icated to developing for Glass, and there’s a good chance it these days, Google would be breaking sharply from the curwill use the conference to reveal more official apps. Maybe rent pattern if it unveiled something that won’t be on store we’ll finally see automatic picture-taking mode. Might we shelves for months. see Sergey Brin interrupt another one of his executives on stage during Wednesday’s keynote to showcase another larger-than-life Glass stunt? Anything’s possible, but he’d have a hard time topping last year’s skydive — especially One of the bigger software announcements that’s been runow that Glass is a real thing in developers’ hands and not mored is Google Babel (or Babble), which will represent a some semi-mythical device. unification of Google’s myriad chat services. With Babel, products such as Drive, Gmail and Google+ will all use the same communication tools. Babel looks very likely because it’s something Google really needs. However, various sites The most credible rumor about the coming conference is are reporting that Babel is just a code name, and Google will that Google will announce an official Android Game Center instead adopt terminology from Google+, and just call the — a central hub for games on the platform where players can new tool Hangouts.
Glass Gets Clearer
Babel
Android Game Center
post scores, compete with each other and even engage in multiplayer gaming.
15
Developer's Wonderland
Learning Web Design
The Nature of Web Design Abbas Saifuddin Mundrawala | May 15, 2013 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 oldtimer, 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 ait 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.We now know that the server does the servin’, but what about the other half of the equation? The software that does the requesting is called the client. On the Web, the browser is the client software that makes requests for documents. The server returns the documents for the browser to display. The requests and responses are handled via the HTTP protocol, mentioned earlier. Although we’ve been talking about “documents,” HTTP can be used to transfer images, movies, audio files, and all the other web resources that commonly make up web sites or are shared over the Web.Often in web design, you’ll hear reference to “clientside” or “server-side” applications.These terms are used to indicate which machine is doing the processing. Clientside applications run on the user’s machine, while serverside applications and functions use the processing power of the server computer.With all those web pages on all those servers, how would you ever find the one you’re looking for? Fortunately, each document has its own special address called a URL (Uniform Resource Locator).
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 documents over a network are known as protocols. The World 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. Let’s talk more about the computers that make up the Internet. Because they “serve up” documents upon request, these computers are known as servers. More accurately, the server is the software (not the computer itself) that allows the computer to communicate with other computers; however, it is common to use the word “server” to refer to the computer, as well. The role of server software is to wait for a request for information, then retrieve and send that information back as quickly as possible. There’s nothing special about the computers themselves…picture anything from a high-powered Unix machine to a humble personal computer. It’s the server software that makes it all happen. In order for a computer to be part of the Web, it must be running special web server software that allows it to handle Hypertext Transfer Protocol transactions. Web servers are also called “HTTP servers.” There are many server software options out there, but the two most popular are Apache (open source software, see sidebar) and Microsoft Internet Information Services (IIS). Apache is freely available for Unix-based computers and comes installed on Macs running Mac OS X. There is a Windows version as well. Microsoft IIS is part of Microsoft’s family of server solutions. Each computer on the Internet is assigned a unique numeric IP address (IP 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 fortunately, the Domain Name System (DNS) was developed that allows us to refer to that server by its domain name, oreilly.com, as well.
16