How to: Create "Web 2.0" graphics

Unless you've been under a rock for the past few months, you know that the "Web 2.0" look is becoming a very popular design on web sites.  Web 2.0 isn't really the second version of the World Wide Web; this is a term that has been used to describe everything from AJAX-enabled web sites to the glossy, glass-like design that we'll be looking at in this article.  This type of design can generally be recognized by it's glossy and beveled look.  Most of the time, the subject ends up looking like a rounded piece of glass.  In this article, I'll be showing you how to create your own Web 2.0 graphic with text.  Here's an example of our final product:

For this tutorial I'll be using PhotoShop CS3, but you should be able to follow along with PhotoShop 6 or newer.  So without any further ado, let's get crack-a-lackin!

To start off, you'll need to create a new document in PhotoShop.  I'm going to start mine with a transparent background, width of 400 pixels and a height of 150 pixels (Screenshot).

In order to see what I'll be doing in the next few steps, I'm going to add a background now so that I have something to contract against.  For that Web 2.0 feel I need to use a warm gradient for the background, so I'm going to use a gradient that transitions from black to dark green with the green on top (Screenshot).

Fig. 1

Next, you'll need to add the text that you want displayed.  I've selected a 36pt, Strong, Arial Black font, then I've set the tracking (horizontal letter spacing) to -100 (Screenshot).  This will bring the letters closer together, and will help the reflection and shadow to look more like part of the image later.

Fig. 2

Now we need to create the reflection of the text.  First, create a copy of the layer that contains the text we added, by draging it down to the New Layer button in the Layers panel (Screenshot).  Move the copied layer down a bit (so I can see it) then, with the copied layer still selected, flip it over by clicking on Edit »Transform » Flip Vertical.

Fig. 3

Before we can go any further with the reflection, you'll need to rasterize it: Right-click on the reflection layer and select Rasterize Type (Screenshot).  Once the reflection has been rasterized, you can change the perspective by skewing it a little.  Click on Edit » Transform » Skew, then drag the handles on the bottom left and right corners out, away from the text (Screenshot).  Make sure that you try to drag them an equal distance from their original points.  

Once you have finished skewing the text, select all of the pixels in that layer by holding down CTRL and clicking on the layer thumbnail in the layer window (Screenshot).  Once the selection is loaded, hide the original reflection layer and create a new (blank) layer.  Select the gradient tool and load a gradient that transitions from white to transparent (Screenshot).

With everything set up for it, now you can create the gradient that will be the reflection.  Inside the (still) selected area, start the gradiant at the top of the selected area and have it end about 7/8 of the way down the tallest letter.  The idea here is that the bottom edge of the tallest letters shouldn't be visible (Fig 4).  

Fig. 4

To finish off the reflection, set back the opacity of the reflection layer to around 30% and move the reflection layer so that it meets the bottom of the original text (Fig 5).

Fig. 5

Now that we've finished the reflection all we have left is too create the shadow.  For this, we'll need to use a technique that's a little more detailed than the standard drop shadow effect....

To get started, make another duplicate of our text layer by draging it down to the New Layer button in the Layers panel again.  Rename this new layer as "Shadow".

Before we can go any further, you need to rasterize the Shadow layer.  Change the Lightness of the layer by selecting Image » Adjustments » Hue / Saturation.  Drop the Lightness down to -100 (Screenshot).

Fig. 6

Next, use the Distort tool (Edit » Transform » Distort) to bring the "shadow" layer to a little more than half of its original size, then stretch the top out just a little (not as much as we did on the reflection) (Screenshot).  We're almost done...

Fig. 7

Reorder the layers so that the "shadow" layer is below the original text layer, but above the background.  All that is left to do is to apply a Gaussian Blur (Filters »Blur » Guassian Blur) with a two or three pixel radius (Screenshot).

Fig. 8

That's all there is to it.  I hope this comes in handy for you.  And if it does, please let me know!  I'd love to hear about it.

I hear the train a comin'...

Over this past weekend, the family and I traveled to St. Louis, as we do about once every other month to visit Christina's family.  Normally we'll drive the 7 hours from Little Rock to St. Louis, we've flown a couple of times, but this time we decided to try something different.  The idea was actually inspired by my 4-year-old step-son who, as most toddlers do, has an infatuation with trains.  Yes, we did; we took a train to St. Louis and back.  I decided to describe the details of our adventure in transportation and provide some suggestions in between.

When we first considered the idea, it sounded novel.  After a short trip across cyber-space we discovered that the cost was actually little more than we would otherwise spend on gas alone.  The phrase, "It's something different", was spoken more times than I can remember as an explanation to our friends and family after we had purchased the tickets online.  As I'm riding home now, I realize just exactly what "different" means.

Having never been on a train before I was expecting a train and station similar to those you see in the movies... I can guarantee you that the Little Rock Train Station will not be seen in Mission Impossible IV.

We arrived at the station in Little Rock at about 11 pm, as all passenger trains travel through the capitol city late at night.  The high-backed wooden benches, tile floor and vaguely present air-conditioning of the station was reminiscent of an old southern church on a summer Sunday night (I expected a sweaty preacher to appear with a "hellfire and brimstone" sermon at any minute).  Most of our fellow passengers seemed to have collaborated on matching luggage: Wal-Mart sacks and trash bags mostly.  I think it really added something to the motif of the station.  So much for first impressions.

I would make some kind comment about security, if there was any.  Ok, all right, I'll take that back... I was asked for my ID... twice.  Seriously though, it was as if we had entered a world where we were no longer at war.  There wasn't a single semblance of any real security: no security guards, no TSA agents, there wasn't even a freaking metal detector for Pete's sake!  Oh, that's ok Mr. Chertoff, I'm sure the enemies of the United States are only interested in hitting airborne targets, you can go back to sleep now.

As we boarded the train in Little Rock, we crept up into the second level of the car where we found our seats.  Most of the people onboard were sleeping in all kinds of positions in their seats.  Once we were settled in, we attempted to do the same.  This became a futile effort.  

Suggestion #1: Get a bed.
While the crew made a valiant effort to provide a comfortable atmosphere for those who wanted to sleep in their seats, you just can't get a good night's rest with an armrest between your cheeks (if you know what I mean).  Upgrading your travel to include a bed is a little more costly, but it will be worth it in the end.

The next morning the conductor stopped by to make sure that we knew that the Dining Car was open for breakfast.  Originally this wasn't part of our plan, but since the train was running about 90 minutes late (and we weren't quite ready to give up our adventurous spirit) we figured we'd give it a shot.

Suggestion #2: Get a bite.
The service and the food in the Dining Car were excellent.  Breakfast being my favorite meal of the day, there's nothing better to start your day than a western omelet, toast, fresh fruit and hot cup of joe, all while enjoying some of America's scenic beauty.

Suggestion #3: Set a loose schedule
We arrived at the station in St. Louis almost two hours late.  Luckily we were able to call ahead and let the rest of the family know not to drive 40 minutes out of their way just yet. Hindsight shows this to be a recurring theme in rail-travel with Amtrak, as our homeward-bound train picked us up over two hours past it's scheduled time and we arrived back in Little Rock a full three hours late.

After trying to decide whether this was a good experience or bad, I think it's best said: this was a learning experience.  Will we do it again?  Maybe so... but we'll definitely get a Sleeper Car with beds... and a hot cup of joe in the morning.

Ajax made simple

Any article about Ajax should probably start by explaining that it's not a new programming language. Rather, it's a methodology that enables a greater level of user interactivity in web-based applications. Ajax is based on two languages that have been around for quite a while: JavaScript and eXtensible Markup Language (XML). The "A" in Ajax stands for asynchronous, which literally means, "not at the same time." This is the key that separates Ajax from the classic web page.

In your standard web application model, there is a "back and forth" kind of action. The user requests a web page, the page is served, and in order for the user to see any additional information, he/she must make a separate call for data for more data, which causes (at a minimum) the page to reload. Requests and responses for the new data set occur at the same time, or synchronously.

Using the Ajax methodology, you can add the same level of interactivity to your web-based applications that, previously, was unique to desktop applications. In this model, the user requests a web page and the page is loaded as normal. The difference is that each time the user needs to be presented with more data, a JavaScript makes a call back to the server and retrieves the data in an XML format. This allows the developer to change the content of the page without reloading the entire page. As you can imagine, this can be extremely appealing to the end user. Ok, so lets get started...

In order to fully understand this article, I have to assume that you already have a firm understand of HTML, JavaScript and XML. Teaching these components of Ajax is outside the scope of this article, but you can find some excellent tutorials at http://www.w3schools.org.

Now, let's describe what you are going to create. We are going to create two select boxes from which we can select a Make and Model of vehicle. The Models that we can select from will be determined by the Make that is first selected.

Aside from the HTML present, you'll need an XML file. If you don't have one handy, you can use the one from this example (20070314.xml). After you have an XML file, you'll need a JavaScript that you can call to load the XML document. For this you can copy the script below:

function ajaxRead(url, method, parameters, functionToRunWithXMLResponse) {
          var xmlObj = null;
          if (document.all) { 
               xmlObj = new ActiveXObject("Msxml2.XMLHTTP"); 
          } else { 
               xmlObj = new XMLHttpRequest(); 
          }
          
          xmlObj.onreadystatechange = function() {
               if(xmlObj.readyState == 4) {
                    if (xmlObj.status == 200) {
                         eval(functionToRunWithXMLResponse + "(xmlObj)");
                    }
                    else {
                         alert("The requested operation returned an error code: " + xmlObj.status + "\n\n" + xmlObj.statusText);
                         return;
                    }
               }
          }
          
          xmlObj.open (method, url, true);
          if (method == "POST") {
               xmlObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
               xmlObj.setRequestHeader("Content-length", parameters.length);
               xmlObj.setRequestHeader("Connection", "close");
          } else {
               parameters = "";  // Just to make sure it was called correctly.
          }
          xmlObj.send (parameters);
     }

  

The ajaxRead function will access the given URL to read the XML file once it reads the XML file it then passes the XML Document Object to whatever function you specify in the functionToRunWithXMLResponse parameter. Here is an example of how the ajaxRead function should be called:

ajaxRead('/xml/cars.xml', 'GET', '', 'loadMakes');

Once you have the XML Document Object, you can simply crack open the XML document itself with JavaScript using the Document Object Model (DOM) and have your way with the data. In the example above I have chosen to simply load the names of the Makes and Models into a pair of select boxes.

function loadMakes(objXML) {
          // Get a handle on the XML Document Object passed from the ajaxRead function.
          var xmlDoc = objXML.responseXML.documentElement;
          var arrLevelOne = xmlDoc.childNodes;
          var intLength;

          //Populate the Makes
          for (var x = 0; x < arrLevelOne.length; x++) {
               intLength = document.form1.selectMake.options.length;
               document.form1.selectMake.options[intLength] = new Option(xmlDoc.childNodes(x).childNodes(0).text, xmlDoc.childNodes(x).childNodes(0).text);
          }
          document.form1.selectMake.options[0] = new Option("Select a Make", "Select a Make");
          document.form1.selectMake.options.selectedIndex = 0;
     }

The last thing I did to complete the example given was create another JavaScript function that loaded the Models based on make that ran when the onChangeevent fired from the Make select box.

Using this method of web application development, developers can create fully interactive applications that enrich the user's experience and actually change the way your site's visitors think about the web.

Supporting documents:

• 20070314.xml
• 20070314.js

PowerPoint tip for giving a presentation on a tight schedule

If you have a tight schedule and a lengthy presentation or class to give, you can add a little something to the master slide of your presentation to make sure you stay on time. Using the steps outlined below, you will be able to add a small notice (for yourself) to let you know when you need wrap up the current topic and move on to the next slide.

Open the master slide of your presentation and place a small graphic in one of the bottom corners. Right-click on the graphic and select Custom Animation. Add an entrance effect of your choosing. (I find that the Fade effect works very well since it is subtle.) After you have selected an effect, it will appear in the window below. Click on the effect, click on the down arrow next to the effect, then select Timing. Set the start event to With Previous, and then set the Delay. This would be however long you want to give yourself for each slide. (I give myself 2.5 minutes for each slide, so I would set the Delay to 150 seconds.) Click Ok and you're done.

Now that you have this set up, as you are going through the presentation glance up at the screen every so often. When you see the graphic appear, you know its time to move on. Be careful to not go crazy watching the screen or your students will notice and will be distracted. I’ve found that this little trick is extremely useful.

Until next time, remember: When working on something important, it's not possible to hit CTRL-S (Save) too many times.

Senator Kennedy Makes a Stand for Net Neutrality (op/ed)

This short post is meant to publicize a video posted by Senator Ted Kennedy on youtube.com. 

Senator Kennedy is one of the first politicians to voice his opinion in favor of Net Neutrality.

Click here to watch the video.

Clorox won't make the web any better... but AJAX will!

In 1995 Netscape hired Brendan Eich to take charge of a development project in which they were creating a new programming language to add interactivity to web pages.  This language was called LiveScript by the developers because of its ability to change itself and web page content.  Later, when the language was released to the public, it was announced as JavaScript.  As it turns out, this was a change that didn't make much difference to the marketers who made the decision, but have made things very confusing for up-and-coming web developers ever since.

Just following, the eXtensible Markup Language (XML) was developed in 1996.  Simply put, XML is a markup language (not a programming language) that is used to define and describe data. 

While these two languages have been around for quite some time, it has only been during recent years that people have discovered the potential made possible by combining them.

By combining JavaScript, a primarily web-based programming language, with XML, which is used to define and describe data, it is possible to dynamically access data and data descriptions over the web.  This method of combining these two is known as AJAX: Asyncronous Javascript + XML.  Now, I know that sounds like a lot at once, but take a look at our example and you'll see how easy it can be.

In order to demonstrate how cool AJAX can be, I created an AJAX-based Instant Messenger (click here).

Notice that when you post a message, or receive one, the window does not refresh; there is no "post back".  This is because every time you send a message, there is a JavaScript that is dynamically creating a new browser instance with which to send the message.  It then receives an XML response with all of the current messages that have been posted.  Feel free to dig around in the source code.

The term "Web 2.0" is being used to describe where we are headed once all web-based applications are using AJAX to interact with users.  Imagine the possibilities...

If my math is right, Bill Gates owes me $1.78 million!

A few years ago an email started it's way around the Internet that was, supposedly, from Microsoft.  In this email, it stated that Microsoft had placed a tracing mechanism in the body of the message and that Microsoft was going to pay $1 for each person that received the email because of you.  The idea was that you might send it to four people ($4), and those four might send it to four more ($20).  Five generations later, Microsoft owes you $21,844!

There are several different versions of this email and all of them are hoaxes.  I know, I know... It's unbelievable to think that something you receive in your email might not be pure facts. 

One of the more recent emails being forwarded to hither and yon shows several pictures of muslim people demonstrating.  This email says that the photos are from a demonstration in London that was titled the "Religion of Peace Demonstration".  The photos depict several hundred protesters holding signs that are not exactly... what's the word... "friendly."

However, this email is only a half-truth which, according to the way my Dad raised me, is far from a complete truth.

The pictures in this email were taken on February 3, 2006.  There was, in fact, a demonstration on this day in London, but it was to protest the political cartoons that were originally published in a Danish newspaper and later reprinted in several other publications.  These "cartoons" were very offensive to Muslims world-wide.  (Click here to read more on this story.)

Emails of this kind are becoming more and more common.  The old axiom that, "You can't believe everything you read," stays especially true for email. 

Now, I have to go check  my Hotmail account... I'm expecting some information from the Prince of Botswana who needs my bank account information so that he can escape the military coup that is after his money.