Web Development History Is Amazing

Last year marked a revolution in back-end design. The major force behind this change was not just a need for better functionality but for a better process in Web development. In an industry survey from 1999, Web startups found that 80 percent of their budget was typically spent on development costs. These companies also observed that the best sites redesign every two months. The enormous development costs got people’s attention. Complex, transaction-heavy sites were demanding better processes. The old one-tier sites with static HTML or just CGI were fading away, and even the newer, two-tier systems like flat ASP or Cold Fusion were becoming impossible to keep clean and updareable.

wdhWhat is meant exactly by tiered site architecture? The three aspects of any site are presentation, logic, and data. The further you separate these areas, the more layers, or “tiers,” your system has. The earliest Web sites were static HTML pages, with maybe some small logical piece running HTML forms through a Common Gateway Interface (CGI). Sites like the initial CERN Web site and many university Web sites still combine presentation, logic, and data in one layer. The problem with this approach is that when you change any one aspect you have to wade through all the rest. For example, if you want to change the site’s presentation (i.e., do a redesign), the code and data are also affected. Two-tier architecture sites, like the early HotWired and current sites like Reebok.com and Discover.com, divide the site into two layers: a combined presentation and logic layer and a separate database. This was an improvement over single-tier architecture, as changes in content (publishing a new article, for example) only a ffected the database and didn’t impact the site’s logic or design. But a change in the site’s design still risked messing up the logical portion.

Enter the three-tier system, perhaps best exemplified currently by base technologies like ATG Dynamo, and now cropping up everywhere. Amazon and E*Trade are two sites that are now fully three tier. In this system, designers and information architects work on the front layer or interface of a Web site, programmers and software architects work on the middle layer, and integrators and database designers work on the back end. The three-tier system is currently a great way to make the three pieces of Web development (front, middle, and rear) operate with some independence from each other. This independence allows sites to be built more quickly, and also permits one tier to be altered without rewriting the others. Nam Szeto, creative director at Rare Medium in New York, notes that “if more strides can be made to free up the display layer from the business logic layer, Web designers and developers can enjoy more freedoms building sophisticated and elegant interfaces that aren’t wholly contingent on whatever happens on the back-end.”

Working within a good three-tier system permits designers to develop a dynamic interface in a meaningful, malleable way, taking into consideration the ultimate purpose of the site, and working with–not against–the structure of the site’s data and content. The two most important components of back-end functionality that specifically affect the designer’s job are transactions and content management. In order to have a site that can be at all affected by the people who use it, the site must be able to handle transactions. Content management allows a site’s editorial staff to keep the content fresh by rotating news, posting articles, and updating information. Whether it’s an experimental site to express oneself or a retail site that delivers products to customers, both of these components–transactions and content management–will affect how ultimately compelling the user-experience is and how flexible the front-end can and should be.

Transactions allow a user to take actions that affect the site or the real world: pay a bill, buy a product, or post a message to a bulletin board–they are an integral part of a site’s interactivity. Usually, transactions involve HTML pages that present a face for an application server, which then does the actual work. (An application server is a generic framework that allows the installation of custom software components that provide the functionality necessary in a transactional site.)

Content management, the second task of back-end technology, is the be-all and end-all of sites like online newspapers. Workflow is also a part of this picture, permitting articles in a newspaper to be entered by a reporter, proofread by a proofreader, modified and approved by an editor, and posted to the site by another editor. Workflow also allows a story to be published live and on schedule, and retired to the archive at the appropriate time. A number of systems have been built to handle content management on the Web. A system called Vignette is one of the largest, and though it is two tier, it performs workflow and content management very well. In the future, the popular content management systems, induding Vignette, will begin relying more and more on Extensible Markup Language (XML) and will make their systems fully three tier. This bodes well for sites that combine content and transaction.

Besides workflow, another important subcategory of content management is templating, which means finding all the pages in a site that share a common format and creating a single template that encapsulates the common design elements and contains some tags or code to pull in dynamic content. “A great templating architecture is essential not only for content management, but for all the disparate development areas of a dynamic Web site,” says Lisa Lindstrom of Hyper Island School of New Media Design in Sweden. “It makes designers, producers, and developers use the same terminology and will make the content gathering easier for the client.” Microsoft’s Active Server Pages (ASP), Sun’s Java Server Pages (JSP), the open-source PHP, and Allaire’s Cold Fusion are all engines that enable templating, but if the ultimate goal of a site is to become truly three tier, only ASP and JSP or variants allow for this type of structure.

There are other areas of back-end development, such as using an open architecture, that can aid in the implementation of a three-tier system and allow more freedom for front-end creatives. An open architecture means that programmers write custom code to plug into the application server to deal with existing or third-party systems. An open system allows two pieces from different vendors to work together. Misty West, community director for wholepeople.com, a new site serving whole foods markets, says, “Open architecture on the Web represents global success where Esperanto failed. Open architecture isn’t just central to the Web, it is the Web.”

Finally, having an application server that is easily clusterable also helps sustain the health of a three-tier system. This means that as the site develops, more machines can be added to serve more people, and the software on all those different machines will still work together. Three-tier systems are much easier to build and maintain, but they put more burdens on a system, so more hardware will be needed as the site grows. The best current candidate for meeting these requirements is the class of application servers, based on Java, known as Enterprise Java Bean (EJB) Servers. These use an object-oriented middle layer that meets the Sun standard and uses Java Server Pages (JSP) for the presentation layer.

In short, if you are a designer who wants to work with a team that builds useful, dynamic sites, an understanding of three-tier architecture is essential. Three-tier sites are functional for the user, but also make creativity and constant improvement possible for the designer. These sites have useful and powerful back-ends that won’t entangle you in creative restrictions. And that is the ultimate purpose of three-tier architecture.

Leave the first comment

Sorting Out The XML And HTML Fun

Developers of the Internet didn’t borrow from Bush’s blueprint; as computer gurus are inclined to do, they created connections to at least one obscurely applicable Web site on every subject imaginable. And it all became a reality, in large part, because of Hypertext Markup Language, or HTML, which arranges text and images on Web browsers.

soxhFor all its promise, however, HTML also has shortcomings–the most notable of which is its inability to distinguish between the presentation of computer data and the data itself. This is why HTML is fine for sending electronic documents but ill-equipped for direct data exchanges between computers on the Web, a function crucial to the advancement of Web-based education and other real-time Internet pursuits.

This shortfall has ultimately fueled the demand or a more powerful alternative: Extensible Markup Language, or XML. Essentially HTML on steroids, XML employs identifying tags that describe Web information within a software program. Those tags allow, for the exchange of information without the need to reformat data so that it can be retrieved and viewed.

A programmer, for example, could label a hidden tag “customer service” to inform a computer about the nature of data sought by visitors to a training Web site that offers courses on customer service. That sounds simple enough–and it is to computer programmers. But it takes Internet technology a big step forward: While HTML tells computers how to display content on the screen, XML describes the meaning of that content.

When definitive XML identification codes are present, information is easily interpreted and utilized by computers, which allows businesses to automatically exchange information across the Internet. They can place orders with suppliers, share customer information with business partners, or disseminate course mate- rials to students in an online forum.

XML also enables the typical consumer to conduct more efficient searches on individual Web sites. With HTML, users type keywords into a search engine that typically provides a potpourri of choices. But with XML, a user can type specific keywords into predefined categories to produce more precise results. That simplifies matters for trainers–or workers seeking training on their own–when they scour the slew of online learning portals for course offerings that meet their needs.

“It makes for a much more powerful and flexible system,” says Ryan Danielsen, a software engineer with Harbinger Partners in St. Paul, MN.

Perhaps most important, proponents say, XML allows software developers such as Microsoft and Sun Microsystems to employ new distributed computing strategies. They can essentially shift a host of operations from the hard disks of personal computers onto the Internet– meaning everything from spreadsheet programs to software services is on a powerful computer network accessible via the Net. That makes it possible for users who have a wireless Internet connection to tap into the power of their computers whenever, wherever. Workers on a factory floor, for instance, can use handheld devices to log on and retrieve training material from myriad sources as they need it. This bolsters the “just-in-time” training power of the Internet, which online learning advocates have vigorously touted.

As with any new development, XML has an uphill climb toward widespread acceptance. Convincing corporate America to invest the time and money needed to implement a new computer language has proven an exhaustive effort. But most experts agree that its use, in combination with other technologies, is the obvious next step toward creating an Internet that doesn’t discriminate between different computers and software.

And it’s about time. While all the complexities of the Web may not have been part of his original vision, an XML-driven Internet is just what scientist Vannevar Bush was looking for some 55 years ago.

Leave the first comment

Taming Photoshop Yourself

tpyIn reality, unless you’re doing heavy commercial work and fine printing on a press, you can muddle along with Photoshop for long time without having to become an expert. Color management does make life easier in Photoshop, but like a car driver, you only need to know enough to make the car go, not how to get under the hood and fix the engine.

As you play in Photoshop and you see what you can do, the more you do do. That last line should drive my editor crazy. (Editor’s note: yes, it did.) To get my Photoshop education, I’ve taken weeldong classes and two-hour seminars. I’ve gone to conventions that lasted several days and were made up of two-hour lectures, and I’ve read as many magazines as I could. Poof! before I knew it, I was an expert. I guess rather than approaching Photoshop as a chore–just something to do otherwise I’d fall behind the professional curve and become a dinosaur–I’ve approached it as a new hobby. It was something I couldn’t wait to learn and implement.

The photo of the girl in this column with the big head and large eyes was done originally with a normal lens for display on the outside of the new Toys R Us store in Times Square. The original image is going to be blown up several stories high. I made a print of the altered image for Epson to hang in a show in their booth at the PhotoPlus convention in New York this past November. I had three people ask me what lens I used. Asking a question like that today with all the computer imaging tools at our disposal, shows that they are behind the curve. I was tempted to tell them I used a special patented morph lens with a triple density ga-ga filter over it. But, no, I simply explained that I used the liquefy feature in Photoshop for her head and the perspective function in the transform section of Photoshop for her body.

The before shot was captured digitally on a Leaf C-Most back on a Mamiya 645AF camera. The lens- was a 55-110mm lens, which actually acts as approximately a 75-150mm lens because the digital chips are smaller than the 645 film size. So while a 55mm would act normally on a 35mm camera, it acts as a wide-angle lens when using a 120mm film size. So in this case, using a digital back where the chip is about the size of a 35mm piece of film, a 55mm lens acted like a 55mm lens on a 35mm camera, rather than the wide-angle lens on a 645 camera. Makes your hair hurt, doesn’t it? (Editor’s note: yes, it does). Just understand this original photo, the one on the left, was shot with a normal lens. The great part about shooting digitally is that I didn’t have to scan anything. I also had all my original shots right after the shoot. Normally, I would have to wait to get them back from the client, which would take weeks, if not months. With digital capture, they got ‘em, and I got ‘em.

So now that I got ‘em right after the shoot, I find myself on a two-hour train ride. Usually it’s a long two hours. But with a laptop, Photoshop, and a few files, I find the train ride too short. I’m always rushing to save my files and close the computer as the conductor yells out, “last stop!”

This photo was done all on my laptop during a train ride. It was much more fun than what I usually do, which is catch up on e-mail, write stuff like this column, play games, or even watch a movie. Making these “komic kid” images is more fun than any Hollywood movie for me. I still hate melting clocks, but maybe on the next train ride, for next month, I’ll try a flying baby.

Leave the first comment

Going Javascript Crazy

gjcIt sounded like my latest career move was going to be a bit more interesting than I had planned. Congratulations, Bob, on your new job. Belo’s quite an outfit,” read the note from the estimable editor of this fine journal. “And, uh, ummm, do you plan to still write a column for ajaxlessons.com? I know you won’t leave us in suspense for the follow to the last one you wrote. The one about sex.”

The note went on to offer helpful hints and insights into Texas life, including this bit of borrowed wisdom: “If I owned both hell and Texas, in the summer I’d rent out Texas and live in hell.”

Nothing like a bit of encouragement. But I suppose a few explanations are in order.

By the time you read this, I will have left my position as the founding director of the American Press Institutes Media Center to become senior editor for information commerce and technology at A.H. Belo Interactive. I had a wonderful two years at the Media Center. I did the things I set out to do – at which point Belo offered me a challenge I couldn’t refuse.

I’ll continue to write this column for Quill. I’m grateful that Quill wants me to do it.

And I’ll certainly finish up the topic I took up last issue, which was the user interface and gender – not sex. I have enough trouble figuring out computers without wandering into Dr. Ruth territory.

Fair warning: This issue we go swimming in deep technical waters.

Take a look at this JavaScript, which is designed to be an invisible Web page.

<SCRIPT LANGUAGE = “JavaScript”> <! – bName = navigator.appName; bVer = parselnt(navigator.appVersion);

if (bName = = “Netscape” && bVer > = 4) br = “n4″; else if (bName = = “Netscape” && bVer = = 3) br = “n3″; else if (bName = = “Microsoft Internet Explorer” && bVer > = 4) br = “e4″; else if (bName = = “Microsoft Internet Explorer”) br = “e3″; else br = “n2″;

//Frame for IE 4 with Dynamic HTML. if (br = = “e4″){ document.write(‘<FRAMESET ROWS = “100%, *”

FRAMEBORDER = NO BORDER = 0>’); document.write(‘<FRAME SRC = “inter. htm” SCROLLING = AUTO>’); document.write(‘</FRAM ESET>’); }

//Frame for NN 4 with Dynamic HTML. if (br = = “n4″) { document.write(‘<FRAMESET ROWS = “100%, *” FRAMEBORDER = NO BORDER = 0>’); document.write(‘<FRAME SRC = “inter. htm” SCROLLING = AUTO>’); document.write(‘</FRAM ESET>’); }

//Frame for every other browser. else { document.write(‘<FRAMESET ROWS = “100%, *” FRAMEBORDER = NO BORDER = 0>’); document.write(‘<FRAME SRC = “noninter.htm” SCROLLING = AUTO>’); document.write(‘</FRAM ES ET>’); }

//->> </SCRIPT>

Note what I am doing in this JavaScript. I am telling the server to sense the browser, and then storing that information as a variable. I can then run conditional statements against that variable!

This particular script is simple – it just loads one page or another, depending on the variable – but the power of this technique should be clear. If we can store one variable, we can store N variables. We can then track the intersection of data points, and supply navigation based on the results.

Demographic marketing, for example, uses data mining techniques to produce accurate results with very little data. People moving to Washington, D.C., and Northern Virginia to work in an executive position who choose to live in the town of Leesburg buy Jeeps, not Ford Explorers. Why? There’s a long, complicated explanation, but that doesn’t matter. Suffice to say that if you collect enough data, you can fit people into large patterns given just a few data points.

And who has more data about your site than you? Think of the power – if you track and correlate the way people navigate your site, you will be able to offer tailored-on-the-fly navigation for visitors.

Before we get complicated, though, there’s good news. There’s plenty of information available to the server from the browser without further ado – and much can be done with it.

Last month we discussed modifying the interface on the fly, based on the user’s learning style – that was the gender stuff – by using what your server knows about each browser. At a minimum, your browser knows the protocol each surfer is using – that’s why you type HTTP before an address to tell the browser to make a HyperText Transfer call and it knows which browser is calling. That is how we sensed the browser in the above script, and the IP address the surfer is calling from, which tells us where to send the data.

But that last bit of info also tells us who is calling. For example, we know that 134.68.42.XXX is an address from the local university; you can always use WHOIS to look up a domain and find out the IP.

Think of how you could use that info with this script. You could, for example, modify the display and menus based on the incoming IP, highlighting today’s activities for users surfing from the campus and commuter info for those surfing from off-campus.

Where do you want to go today? (Sorry.)

The problem is that interface design involves a constant tradeoff. The more links you put in, the less room there is for content. The fewer links you put in, the harder it is to get there from here.

The problem, of course, is that most layout tends to treat the screen as a page – that is, layout is fixed in place the way it would be on paper. What little interactivity there is tends to be ad swapping or graphic rollovers – lots of flash to drag through a narrow modern pipe for such a small payoff.

Dynamic devices such as this column’s JavaScript allow you to circumnavigate this problem by endeavoring to put on screen only the things each user wants and needs – what I call the iceberg theory of interface design.

As we all know, most of an iceberg is underwater. And since screen real estate is limited, only the tip of the navigation iceberg makes it onto a user’s screen, no matter what.

The trick is to get the right piece of the iceberg on screen.

Part of the blame here has to do with the basic structure of HTML. The HyperText Markup Language is a Document Type Definition. Because it is a static DTD, it is difficult to do anything beyond what the DTD was designed to do – in this case, describe a page. This limitation explains why anything beyond the plainest Web design requires scripting, Java, CGI, and so forth.

That is finally changing. HTML is being replaced by Dynamic HTML, XML, and the Document Object Model.

Leave the first comment

Let’s Talk HTML Basics

HTMLHTML documents are plain-text, also known as ASCII files, that can be created using any simple text editor like Notepad or WordPad on Windows. It is best to create your code with these simple text editors as opposed to Word or WordPerfect, which may reformat your code as you create it. You are probably wondering how any lowly text editor could design such sophisticated-looking Web sites. Well, it’s the Web browser that determines how the page actually looks. The browser reads the text, looks for HTML markings, then visually displays the page according to the instructions.

The only drawback to this is that it is impossible to know what your page will look like when it is done. Fortunately, you can do a test run on a browser before you actually publish your page. It’s not a perfect scenario, but it works.

You will also need access to a Web server to get your files on to the Web. Contact your local internet provider to see if you can post your files free of charge.

TAGS

The tag is a code that describes how the images and texts are going to appear on your site. For example, if you want a certain word or block of text bold, you would type it as follows: (the tag for bold is <B>)

<B>Welcome To My Web Page</B>

The first <B> instructs the browser to make anything after it appear bold. The second </B> (notice the backslash to denote an ending bracket) tells the browser to stop the bold instructions.

Tags denote the various elements in an HTML document. An element is a basic component in the structure of a text document. Elements can be heads, tables, paragraphs, and lists; and they may contain plain text, other elements, or a combination of both.

An HTML tag is made up of a left angle bracket (<), a tag name, and a right angle bracket (>). They are usually paired to begin and end the tag instruction. For example, <H1> and </H1>. The end tag is similar to the start tag except that a slash “/” precedes the text within the brackets.

Some elements may include an attribute, or additional information inside the start tag. For example, if we wanted to create a table using HTML, we would use the table tag, <table>. We could add attributes to the tag to define the border and width of the table, as in: <table border=2 width=100%>.

Mark-Up Tags

* HTML–This announces to your browser that the file contains HTML coded information. The file extension .html also indicates that this is an HTML document and must be coded. The final tag in your document will be </HTML>.

* Head–The head element identifies the first part of your HTML-coded document that contains the title. The title is shown as part of your browser’s window.

<head>

<title> my web page </title>

* Title–The title element contains your document title and identifies its content in a global context. The title is usually displayed in the title bar at the top of the browser window, but not inside the window itself. The title is also what is displayed on someone’s hotlist or bookmark list, so choose something descriptive, unique, and relatively short.

</head>

* Body–The second and largest part of your HTML document is the body, which contains the content of your document (displayed within the text area of your browser window).

* Headings–HTML has six levels of headings numbered one through six, with one being the largest. Headings are usually displayed in larger and/or bolder fonts. The first heading in each document could be tagged <H1>.

<body>

<H1> This displays a large font </H>

Additional code here

* Paragraphs–You must indicate paragraphs with &lt;P&gt; elements. Without them, the document becomes one large paragraph. Your browser doesn’t acknowledge carriage returns, so when it comes across a spot where you pressed Enter, it will just keep reading the text until it comes to &lt;P&gt;. You can also use break tags (<br>) to identify a line break.

</body>

* Lists–Sometimes you’ll want to present your information in the form of a list. HTML lets you create unnumbered, numbered, bulleted, and definition lists.

* Tables–You can also set up data into tables. HTML reduces multiple spaces to a single space, and doesn’t pay attention to tabs. You can use rows and columns, however, and that will work in most situations. Refer to your selected text for more information.

ADDING IMAGES TO YOUR WEB PAGE

When you display images on your Web page, they don’t actually appear on your text editor. All you do is add a tag to the document that basically says “add image here.”

Use the image tag and define the source, which is the location of where the image is located.

<IMG SRC=”A:\myimage.gif”>

This HTML tag will display the image named myimage.gif, which is located on the A: drive.

CREATING A HYPERLINK

This is the backbone of all Web pages–creating the ability for your user to link to other locations, whether it be relative (within your own Web site) or absolute (to some other Web site). Here is an example.

<A HREF=”HTTP://www.google.com”>GO TO GOOGLE</A>

This bit of HTML code will display the words “Go to AOL” on your page, and will be linked to the AOL Web site. The user can click on these words to complete the link.

YOU’RE ON YOUR WAY

Although there is much more to know about decorating” and designing your page for optimum beauty and presentation, hopefully you understand what HTML is about and how to go about making use of it. The concept isn’t too far out-once you grasp it you should zip through the basics in no time.

Leave the first comment