How Google Works

Fact and not

The magic that makes Google tick

• Over four billion Web pages, each an average of 10KB, all fully indexed
  
• Up to 2,000 PCs in a cluster
  
• Over 30 clusters
  
• 104 interface languages including Klingon and Tagalog
  
• One petabyte of data in a cluster - so much that hard disk error rates of 10-15 begin to be a real issue
  
• Sustained transfer rates of 2Gbps in a cluster
  
• An expectation that two machines will fail every day in each of the larger clusters
  
• No complete system failure since February 2000

Stanford University: The Anatomy of a Large-Scale Hypertextual Web Search Engine  

Sergey Brin and Lawrence Page Google.com:
How Google Works
 
How Stuff/Google Works

The Economist: Case History
 
Or
 

It's all done with pigeons



See all Topics

Free HTML Tools

Collection of helpful utilities

AXCEL216's MAX Speeed WinDOwS Tricks + Secrets:

HTML Authoring
Webmaster Resources

GIF + JPEG Shrinkers

Do you have large GIFs/JPEGs cluttering your internet/server space? Are your web pages loading too slow?

HTML Validators

These HTML/CSS/DHTML/XHTML validators check the accuracy of your code, reporting all aspects of design and eventual errors, flaws, invalid links etc

HTML Editors

Offline HTML + text editors

[D]HTML, XML, CSS + Java[Script] Resources

Java No Java... JavaScript dedicated web sites

FTP Transfer Tools

FTP transfer clients + FTP server tools

See all Topics

Site Maps

Point the way

"As a Web designer and HTML builder, one of the first places I visit on a Web site is the site map. The site map shows an entire overview of the structure of the site, and more importantly, indicates how much effort was put into usability testing during the site's construction."

Learn how to chart a better site map
By Jim Kukral -Builder.com

According to Jakob Nielsen's
Alertbox Usability Study on Site Maps

"27 percent of users turn to site maps when asked to learn about a site's structure. If your site map is poorly designed, you may lose 27 percent of your Web visitors. That could translate into millions of dollars of missed sales for an e-commerce site, or a massive amount of missed leads for a service company."

(A Site Map is a guide to a web site used by visitors. A Sitemap is a file used by search engines to index entries on a site. )



See all Topics

Web Accessibility Report

Make it easy

"Accessibility, the design of HTML documents for accessibility by people with disabilities, is such an important aspect of the Internet today that the Worldwide Web Consortium (W3C) has adopted a set of guidelines for designing accessible Web sites. The Web Content Accessibility Guidelines (WCAG) closely follow Section 508 of the U.S. Rehabilitation Act.

For some Web sites, adherence to the WCAG is not optional; it is a necessity. Expression Web/FrontPage 2003 has tools for evaluating the accessibility of an entire Web site, identifying elements that violate the guidelines, and finding ways to correct the violations. The accessibility checker provides all of this functionality in a single dialog box.

To access the accessibility checker on the Tools menu click Accessibility (Accessibility Reports).

You can use the accessibility checker to check a single page or an entire Web site. The accessibility checker checks for varying levels of accessibility and specifically for adherence to Section 508 of the U.S. Rehabilitation Act. You can check for errors or warnings, and you can add a manual checklist."

Expression Web Accessibility

MSDN:
Adding Rules to the Accessibility checker


Making Your Web Site Accessible to the Blind
Test your site:
Cynthia Says



See all Topics

Page Break CSS

Before or after

You can put a break on a web page like you can in a document.
A Cascading Style Sheet makes it simple

"The stub-ends left when paragraphs end on the first line of a page are called widows. They have a past but not a future, and they look foreshortened and forlorn."

Orphans are parts of a paragraph that begin on the previous page. An orphan has a future, but no past.

The only paging properties supported by Internet Explorer 7, Safari 3 and Firefox 2 are page-break-before and page-break-after.
The page-break-before and page-break-after properties enable you to say that a page break should occur before or after the specified element. The following example starts a new page every time an h1 heading is encountered and after every .section block.

h1 {
page-break-before:always }
.section {
page-break-after:always}

Etiquette of Pagination



See all Topics

Reading Level Check

Abrogate Obfuscation

Writing a blog or designing a web page should be done with an eye on the complexity of the language.

For broadest appeal, it should be around an 8th grade level.

This site is at about the 10th grade.


Reading Level

(Avoid one of the reading level sites that offers to put a graphic on your site. The icon links to an ad for "payday" loans.)



See all Topics

HTML Preview

HTML Tester

There you are, out in the wilderness of PCdom without a copy of FrontPage (Expression) around. How do you find out what HTML tags looks like?
(fire up notepad, save the file, open with a browser)

HTML Preview
Preview HTML in a new window by entering it into the form. This script allows you to pass anything to a new window.

Instructions help you create a preview on your own web page.

Such as:
HTML TEST BED



See all Topics

New Window

Pick your target

Expression Web/FrontPage/HTML provides the opportunity to choose how a page opens when you click on a hyperlink.

Create a hyperlink as you usually would by selecting the text (or graphic) you want to use for the link.

Choose Insert > Hyperlink...
(or use Ctrl-K or the toolbar icon as a shortcut),
and locate the page in the current web or enter an address in the URL field.

On the right side of the Create Hyperlink window you'll see a button named "Target frame"; click the button.

You'll get the Target Frame dialog box.

In the "Common targets" field, select New Window.

Click OK, then click OK to close the Create Hyperlink dialog box.

Your hyperlink will now open a new browser window when clicked.



The code would appear like this:

<a target="_blank" href="TCC/Blog/blogger.html">Blog</a>

To make it the page default, place the following code in the "head" section:

<base target="_blank">

See all Topics

Learn HTML

More tutorials

I like to read more than one author on a subject. It helps to clarify the sticky parts and each writer has a little bit different perspective on the subject.

WebReference.com has a good collection of material related to the Web and the Internet in general.

Stephanos Piperoglou has written a number of tutorials on Web design and construction.
From HTML 101 to I Shot the Serif and The Seven Habits of Effective Web Sites .

About HTML with Style


W3 Schools

Also:
HTML Tutorials



See all Topics

Type, What it Looks Like

Screen fonts preview

This is a tool that lets you see how different typefaces will look on the screen. It also allows you to compare three fonts at once.

"The Typetester is an online application for comparison of the fonts for the screen. Its' primary role is to make web designer's life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated."

TypeTester




See all Topics

New Line

Shift Enter

When you hit the Enter key, the FrontPage/Expression Web editor inserts an HTML <p> (paragraph) tag. This appears as a double line space in a Web browser.

To insert a single line space (or line break) via an HTML <br> tag, just hold down the Shift key and hit Enter.

This happens when you use the

Enter key

Here's what happens with
Shift +Enter

You could also use Insert>Break... Normal Line Break, but that takes too long.

By the way, if you want your code to be XHTML compliant, use lower case for the elements and pair every <p> with a closing </p>

Differences with HTML

Single elements can be used with a built in closer such as:
<hr /> or <br />



See all Topics

CSS

Cascading Style Sheets

As a web page is formatted in Expression Web/FrontPage, the style choices are applied to each element.
To format the body of the page, the HTML code might be:

<body background="blue" color="white" font-family="times, serif" font-size=10pt>

Every page on the site would need to be coded this way in order to have a consistent look.
Cascading Style Sheets will simplify the problem. On an external page the elements can be defined like this:

body {
background: blue;
color: white;
font-family: times, serif;
font-size: 10pt


Each page would contain a reference to the CSS definitions:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

When the element "body" is used it will now use the CSS references.

For more information see:

Using Cascading Style Sheets on Your Web Site - David Berry
and
Eric Meyer's Site

In this Blog:
CSS Links
and:
More Cascading Style Sheet Help



See all Topics

DOCTYPE

Customize

At the top of an HTML file source, you may see some code that indicates the version of HTML that is going to be used.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

The O'Reilly Net.com has a discussion:
DOCTYPE Explained.

"There are three variants on HTML 4.01, for example:

• HTML 4.01 Strict, which describes the structural portions of HTML 4.01 and does not provide any frame-related markup.
  
• HTML 4.01 Transitional, which includes the presentational markup such as >B< and >FONT<, but does not include frame-related markup.
  
• HTML 4.01 Frameset, which is the same as HTML 4.01 Transitional except that it adds a description of frame-related markup."

Also:
Fix Your Site With the Right DOCTYPE!
Choosing a DOCTYPE  
The global structure of an HTML document  



See all Topics

Themes and Templates

Need a look?

Themes are a collection of design elements and color schemes that can be applied to your web site to give it a unified appearance.

Templates include themes and layout modules to aid in quickly creating a web site. Templates can be purchased through the web, but here is one of the locations that provide free design help.

FreeLayouts.Livejournal.com

"Want a great new look for your website? Free Layouts.com offers you just that - select from our huge database of complete "look and feel" designs. Professional, sports, technical and others - they are all here. Free Web Templates are available for you to download now.

Look around and download your favorite page layouts - for free. Also, submit templates of your own and increase traffic to your website greatly. Currently over 500 free HTML templates and 50 Flash templates for you to download!"

See all Topics

Headline Animator

Up to date

Introducing the Headline Animator:

↑ Grab this Headline Animator

FeedBurner.com

"We're happy to introduce our latest publisher service: the Headline Animator. When you burn your RSS or Atom feed with FeedBurner, you can take advantage of this cool, different way of looking at your feed.

Just by pasting some HTML code into, say, your email signature file or bulletin board profile, you'll get a nice little badge that always shows your latest five blog postings. No Javascript or Flash required -- we generate an animated GIF on-the-fly from your feed."

See all Topics

Browser Utensils

Tiny tools

Bookmarklets
Easy to use, free Java scripts.

"Bookmarklets are simple tools that extend the surf and search capabilities of Netscape and Explorer web browsers.

Bookmarklets are free.

Bookmarklets allow you to:

• Modify the way you see someone else's webpage.
  
• Extract data from a webpage.
  
• Search more quickly, and in ways not possible with a search engine.
  
• Navigate in new ways.

…and more. Over 150 bookmarklets are available."

Here's a list of available bookmarklets:

List of Offline Bookmarklets



See all Topics

Color Feels Right

Colors and emotions

When you're mad, do you see teal?

"Color plays a vitally important role in the world in which we live. Color can sway thinking, change actions, and cause reactions. It can irritate or soothe your eyes, raise your blood pressure or suppress your appetite.

When used in the right ways, color can save on energy consumption. When used in the wrong ways, color can contribute to global pollution.

As a powerful form of communication, color is irreplaceable. Red means "stop" and green means "go." Traffic lights send this universal message. Likewise, the colors used for a product, web site, business card, or logo cause powerful reactions.

Explore : The concept of color can be approached from several disciplines: physiology, psychology, philosophy, and art."

ColorMatters.com



See all Topics

Google Searches

Some hints

Google still rules the search engine world. Here are a few tips on how to refine your info-hunt.

Tip #1: Use the Correct Methodology

Tip #2: Conduct an "Either/Or" Search

Tip #3: Include or Exclude Words in Your Search

Tip #4: Search for Similar Words

Tip #5: Search for an Exact Phrase

Tip #6: List Similar Pages

Tip #7: Fine-Tune Your Search with Other Operators

Tip #8: Search for Specific Facts

Tip #9: Search the Google Directory

Tip #10: Use Googles Other Specialized Searches

Ten Tips for Smarter Google Searches



See all Topics

Menus via CSS

Code and directions

"The core of any Web site is the navigation mechanism, the menu. If Web sites are primarily about organizing and presenting content, a site's menu provides the means of traversing this information set.
In designing a Web navigation system, it is often difficult to balance the competing objectives of simplicity, flexibility, usability, and maintainability. Often very simple designs are not flexible; flexible designs trade off with usable ones; and easily maintainable designs are rarely even considered."

Build a Flexible CSS Web Navigation Architecture



See all Topics

Color Safe Not

The other side of the wheel

Death of the Websafe Color Palette?

One of the givens of Web design, the holiest of holy truths, is the sanctity of the 216 websafe color palette. It's a rite of initiation for every Web designer or developer: Use only these colors, we were told, and don't question why.

By David Lehn and Hadley Stern. David is a senior information architect and interface developer in the Milan office of Razorfish. Hadley is a senior designer in Razorfish's Boston office.



See all Topics