Monolith Design

The Process of Browsing a Web Site

• You request a page by domain name, which gets translated into an exact address on a Web server somewhere. The request is transmitted over the Internet to the Web server using a protocol called HTTP, or Hypertext Transfer Protocol.
• The receiving Web server gets your request, and figures out how to satisfy your request. For dynamic pages, the Web server uses other services to format the correct info into an HTML page.
• The Web server returns information to your browser that is packaged up in the form of HTML pages.
  • The HTML that is returned may just be text, but it can also include images, audio, and video.
  • The HTML that is returned can either be directly pulled from the server’s hard drive without modification (a so-called static page), or the HTML may be created right then in response to your request for the page (a dynamic page). If nobody asks for it, does the page exist? Dynamically-generated pages are created by a program that reads a database or other data source, and then creates HTML code that inserts the info from the database.
• When your browser receives HTML in response to the request for the page, you can’t be sure how or when it was created. You can always View Source (but it may not be helpful). Read more about viewing the underlying code here.
• Browsers are incredibly optimistic about displaying HTML. They will always try to render a page, regardless of errors, omissions, bad design, mixed metaphors, whatever! Here is a perfect example: the 1-line file. Even though problematic code may appear correctly in your page when you view it, you can’t be sure that different browsers will treat the errors the same way. In fact, you can assume that browsers will react differently to errors, since they even react differently to properly-validated code. All browsers know to ignore HTML and CSS directives that they don’t understand, and there are even ways to create browser-specific code to manage the differences. But while an old browser may ignore the parts it doesn’t understand, those parts are likely key to your layout: "and the walls came tumblin’ down!"
• There is no difference between reading HTML from your own hard drive and reading the same file from the Web, as long as the file doesn’t rely on back-end services (like PHP or a database). Your browser will display it the same way as long as it is straight HTML.

Factors that Affect the Browsing Experience

• Cultural sensitivity: colors, left-to-right vs right-to-left, type of content
• You don’t know how the user got here, or where they are going next.
• Connection speeds can vary dramatically.
• Time delay between client and server
• Variation in fonts: available fonts, plus size overrides by people
• Variation in colors: available colors on a given computer; monitor variations; OS variations
• Variation in browsers: different bugs, different defaults, different non-standard quirks
• Support for HTML/CSS/JavaScript/Flash
• User suppression or modification of CSS, JavaScript, Flash, or images
• Accessibility



What does An HTML Page Look Like?

HTML files are just text files, and they can be edited with any text editor. This is deceptively simple, because your results will be unpredictable unless you actually have some idea of what you are doing. Armed with some knowledge, however, you can effectively create and maintain Web sites with free software.

Even though HTML tags appear in plain text, they use a very specific syntax to accomplish their functions. For beginners, more errors come from mistyping than from errors of understanding.

Every HTML tag starts with "<", and ends with ">". HTML tags come in pairs, with only a few exceptions.

Paired tags always appear like this: <table> will eventually be followed by </table>, although you may find many other tags between the starting tag and the ending tag for any given pair. Tags that appear within the scope of another tag have a parent-child relationship that can be exploited in CSS. Not only can you apply styling to a DIV (box) and to a paragraph, you can also apply styling to paragraphs that occur inside certain DIVs – this is a very powerful technique.

These HTML tags do not require an ending tag: br, img, input, link, doctype, and meta. If you are using XHTML instead of HTML, then you will have to self-close the tag with a slash inside the tag, such as with images:

<img src=”pretty-picture.jpg” />.

Tags are hierarchically nested. You can easily chart out a page to discover problems with nesting – draw arcs on the printed page to connect pairs of tags. If your arcs overlap, then you have a problem. This is correct:

<strong><em>Example</em></strong>

whereas this is not correctly nested:

<strong><em>Example</strong></em>

Comments in HTML look like this:

<!–This is a terminated (single-line only) comment in an HTML file.–>

Comments inside a CSS style block within an HTML file look like this:

/* This is a terminated comment in a CSS file or a Javascript file. The comment
can span multiple lines. */

DFF’s Canonical HTML/CSS/JS Files

These 3 files provide a good starting point for developing Web pages. The HTML file has all of the common HEAD tags in place, including statements that read in a CSS style sheet (2 versions, where the second can tailor the output for printing) and a Javascript file. It also shows how to define styling and scripts in the HEAD section of the HTML file. The BODY content is just sample code that can be tossed. The style sheet contains several useful things, including: default settings for standard HTML tags (to standardize behavior or appearance) and some debugging classes you may find handy.

• Canonical-Page.html : the default HTML file that includes both CSS and JS files
• Canonical-Page-Short.html : the short form of the default HTML file
• Default-Styles.css : the style sheet for the default HTML file
• Default-JS.js : a default Javascript file

How Can You See "Beneath the Covers" of a Page?

• Use the CSS Viewer to outline items as you move the mouse around over a page.
• Use the Web Developer Toolbar’s inspector to view specific elements on a page. Type Control-Shift-F (on a PC), and then click on page elements to get a popup box with relevant info. Type Control-Shift-Y to see the DOM tree for the element, as well as a summation of all styling applied to the selected element.
• In your browser, choose View > Page Source to see the raw HTML. If you have the Web Developer Toolbar for Firefox, you can click on the View Source button on the toolbar.
• In the browser, choose Tools > View Source Chart to see a collapsible outline view of the HTML source.
• Open up the Firefox DOM Inspector, using Tools > DOM Inspector. This shows you an expandable outline view of a Web page.
• Open up the FireBug debugger window to inspect the HTML, CSS, Javascript, and DOM settings for the site, including a hierarchical view of the page elements in the DOM.
• The Colorzilla add-on, besides being a great way to examine color in a site, contains a DOM Inspector. Right-click on the Eyedropper icon, and then choose Webpage DOM Color Analyer to see all of the colors in use on the page, and where they are defined.



What is a Web site? Quite simply, a Web site is a collection of files on a hard drive of a Web server. A domain name supplies two things: the logical name of the site, and the address of the server where the files are located. What is a Web Server? A Web server is just a computer (often running Linux) with a lot of hard drive space and a fast Internet connection. It maintains a mapping between domain names and the actual files on its hard drives, and it serves up those files when requested by a Web browser (or other programs). Web servers run several special programs that allow them to serve as Web servers:

• HTTP Server: this is the actual program that serves up HTML pages on request. The most commonly-used Web server is Apache. Requests in the HTTP protocol typically use port 80.
• FTP Server: this program supports the FTP file-transfer protocol, allowing people with permission to manipulate files directly on the server. This is what Web developers use to copy files back and forth from their development machines to Web servers.
• MySQL: this open-source database server is widely used on the Web.
• PHP: this open-source language is supported by virtually all Web servers, providing a programming interface to the backend services. You can install PHP on your PC or Mac, but it’s easier to install a package:
  • WAMP: packages up Apache, MySQL, and PHP on Windows
  • XAMPP: similar to WAMP, but runs on Windows, Linux, Mac OS X, and Solaris

This diagram shows the basic styles of interactions between users and a Web server.

This diagram shows a conceptual view of how a Web browser connects to a Web server, as well as how a user can privately interact with a Web server to transfer files and access services. Above the line, a user’s Web browser interacts with any Web server on the Web using a protocol called HTTP. The browser sends requests to the Web server, and it responds with HTML pages. Notice, though, that the Web server can call on many services besides its own hard drive. These other services actually create the HTML as it is requested, rather than using static pages that change rarely. Below the line, however, a user with the proper permissions can connect to the private side of a Web server, and directly access the Web server’s hard drive and other services (such as MySQL databases).

Recommended Directory Structure for Web Sites

• Web site files are typically placed in a hierarchical directory structure. The top of that hierarchy, called the root directory, contains the “home page” of the site—the default page that is returned when you request the site by domain name only, without specifying an actual HTML page.
• When a user requests a Web page only by the domain name, the Web server must decide which HTML page should be returned. The server looks for either index.html or default.html, and returns the first one it finds. If PHP is in use, the Web server may also look for index.php and default.php if the HTML files were not located in the root directory.
• It is a good practice to cluster similar things in subdirectories under the site’s root. At the least, you should consider creating a CSS subfolder to hold CSS and Javascript files, and an images subfolder to hold the images used on your site. By moving these files below the root folder, you can get at your HTML files more quickly and cleanly.

Local vs Remote

The typical model of working with a Web site is to have the Master site files on your hard drive, and then place a copy of the Master site on a Web server (another computer). Using manual (FTP) or automated (Dreamweaver) means, you can then synchronize the master site with the copy of the site on your Web server. When testing your site, you can either test directly from your hard drive, or you can upload the files to your Web server for testing. If you don’t use any server-side technologies like PHP, then reading the HTML from your hard drive is exactly like reading the HTML from the Web server.

Evaluate the User Experience of a Web Site

• Who is the target audience of the site?
• What is the goal of the site? Social networking • Selling Products • Selling Services • Entertainment & Games • News • Opinion • Information • Politics • Art • Personal
• How would a typical visitor use this site?
• Describe how a typical site visitor would perceive the site: prestigious • friendly • elegant • corporate • fun • forward-thinking • innovative and cutting edge • sophisticated • classic • familiar • elegant • casual • subdued • flashy • formal • powerful • romantic • sensual • clean • professional • high-tech
• What kind of Color Scheme does the site use? traditional • earthy • elegant • classic • delicate • serene • calm • mellow • regal • subdued • warm and sunny • energetic • playful • welcoming • cool and sophisticated • professional • vital • black and white • soft pastels and tints • muted • elegant • robust • capricious • festive • natural • primary colors • rich saturated hues • spiritual
• What’s the basic layout? Fixed vs Fluid, Centered vs Justified. How many columns in the layout of the page grid? What happens when you change the browser window size?
  • Fixed-width layouts, where the page is defined at a fixed size, regardless of the size of the browser window. Fixed-width layouts are typically either left-justified or centered in the browser window.
  • Fluid layouts, where changes in the brower’s size are reflected in changes to some or all sections of the HTML page. In such an arrangement, size changes are typically either proportionally divided between the main horizontal sections, or all size changes are absorbed by a single column. A common page layout on the Web has a fixed-width column on the left for navigation, a fixed-width column on the right for ads or blog entries, and the center column is allowed to absorb all changes in the browser’s width.
• How do you navigate on the site? Links, buttons, tabs, menus, etc.
• Is there anything Special or Unusual about the site? This could be in terms of the content, or style, or technologies, or whatever strikes you as unusual.

Locate Key Info about Web Sites

• Whois: check a WHOIS service to find out who owns and administers a particular domain. This can be done through Firefox plugins, or you can check the InterNIC site directly.
• BuiltWith: this service tells you about the Web server environment for the specified domain name.
• Google: use Google to find out various things about a Web site, including which site pages are indexed (using "site:www.mendocinofun.com"), and which other sites link to a Web site (using "link:www.mendocinofun.com").
• SearchStatus (Firefox add-on): provides a lot of SEO info, including Google PageRank
• MetaTags Sidebar (Firefox add-on): more meta info
• Webconfs.com SEO Toolset: several great tools for assessing a site
• SiteScore : scores sites based on a bunch of factors
• Compete.com : compare site traffic (with caveats)
• SmartPageRank : site evaluation
• Web Site Grader: another free site analysis and comparison tool