This guide is adapted from Dustin Caruso’s note on viewing source in Safari for the iPhone.

1. Visit this page using Safari on your iPad.

2. Use your touch selection skills to copy the following line of javascript:
javascript:var%20sourceWindow%20%3D%20window.open%28%27about%3Ablank%27%29%3B%20%0Avar%20newDoc%20%3D%20sourceWindow.document%3B%20%0AnewDoc.open%28%29%3B%20%0AnewDoc.write%28%27%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20%27%20%2B%20document.location.href%20%2B%20%27%3C/title%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E%27%29%3B%20%0AnewDoc.close%28%29%3B%20%0Avar%20pre%20%3D%20newDoc.body.appendChild%28newDoc.createElement%28%22pre%22%29%29%3B%20%0Apre.appendChild%28newDoc.createTextNode%28document.documentElement.innerHTML%29%29%3B
3. Tap  + then Add Bookmark

4. The first text field is the Title field. Use the title, View Source.   Leave the second field (the Address Field) alone and hit save.

5. Tap the Bookmarks icon and then edit.  Find View Source in the list and tap the right arrow for the bookmark’s details. Now tap the Address Field and hit the X icon to clear it. Tap and paste the javascript from the clipboard.

5. Tap the Bookmarks navigation item to save the changes.

Voila.  Go to any web page using Safari, tap the Bookmarks icon and hit View Source.  Safari will open a page of source code in plain text in a new window.

Dynamically built webpages, (especially applications), require time to load and visual feedback that something is happening.  The most famous example is the gmail loading page:

Gmail uses a more sophisticated progress bar to represent the loading of the webpage.  I found an article on yensDesign that gives some great advice on how to do this, if you want to get really fancy.

If you have a dynamically built page that you’d like to give a loading message to that doesn’t require a full progress bar, I recommend simply displaying a message and an animated gif.

The Method

The trick to accomplishing this is a small mix of JavaScript and CSS.  You don’t have to be using <div>’s to display your content, but you should.  My example uses <div>’s.

Let’s begin by assuming you have the majority of your page’s content within a series of nested DIV’s, where the outermost DIV is called “container.”

 <div id="container">
    <div id="heading">
       ...heading content...
     </div>
     <div id="body">
       ...body content...
     </div>
  </div>

Normally, the dynamic content in your container would be rendered by the browser after it has downloaded and performed the main JavaScript routines.  What we want to do is hide the container when the page is first loaded and instead display a DIV that contains a waiting message and a little animated gif icon.

Begin by using the CSS display property to hide the container DIV like so:

  <div id="container" style="display:none">

Next, you need to add a new DIV that contains your “Please Wait, loading…” message.  I chose to include an animated gif icon of a twirling circle, which I easily created using the AjaxLoad.info, a site created by Catherine Roman.   If you want to download my animated loading gif, you can get it here.

Here is an additional set of nested DIV’s that contain the loading content.  This should be placed outside the container DIV:

      <div id='siteLoader'> 
        <div id='siteDetailLoader'> 
        <img src='/path/to/your/animated/gif/loading.gif' border='0'> 
        Please wait while the page loads...<br /> <br /> 
        </div> 
      </div> 

You’ll note that the display property is not set on siteLoader because it is visible by default.  This is what we want.  The trick now is to make the siteLoader DIV dissappear once the dynamic page content is done loading while simultaneously displaying the container DIV with the real page content.

This is handled using the global event handler onLoad.  There a few ways to make use of the onLoad event, I recommend including an external JavaScript file.  Do this by saving a new text file called actions.js in the same directory as the page you’re changing.  Just after your <title> tag on your document include this external JavaScript  file using:

<script src=”actions.js” type=”text/javascript”></script>

Inside actions.js, you need to include a function based on window.onload as follows:

window.onload = function() {
   document.getElementById("siteLoader").style.display = "none";
   document.getElementById("container").style.display = "block";
}

What this is doing is saying to the browser, “as soon as you’re done loading the webpage, you should hide the ‘please wait’ stuff and show the meat and potatos of my webpage.”

To view all of this in action, have a look at my recently updated online portfolio which of course, talks up what a great person I am.  I hope this has been helpful, as always–please post your comments!

For further reading on busy indicators and the important visual feedback and attention cueing needed to be successful with the display of heavy dynamic webpages, have a look at the article series on SAP Design Guild by Gerd Waloszek called “Waiting at the Computer: Busy Indicators and System Feedback.”   There is a wonderful table giving guidelines on the type of feedback that should be displayed based on user wait time.

I was just doing a ShareThis icon for a client I’m working with and found that how to properly style the button is poorly documented.  In order to replace the whole icon and text, you are supposed to use the developer API.

I only wanted to style the text, so I was hunting for some CSS to style the text and could not find the right classes to call.  Some hunting turned up the following:

.stbuttontext – This class will allow you to change the look of the text, ShareThis.  You can style it with any normal styling like color or font-family but text-decoration does not seem to work. :p

.stico_default – This class allows you to style the icon itself.  An example on how to replace the ShareThis icon with your own site’s favicon webmonkey is: 

{
	background: transparent url(http://www.banagale.com/favicon.ico) no-repeat scroll 0px 0px !important;
}

I’m interested in any other css that can be used to style the ShareThis button without requiring API calls (if there are any).   if you know of additional classes, or this helped you please post a reply.

Follow me on Twitter

Salesforce does not explain how its clients should go about crafting a quality Contact Us web page.

What is a quality Contact Us web page?  

Generally you’ll find the same type of fields on Contact Us pages across the web.  You are asked for your first and last name, job title, complete address and something specific about your query, like Where did you hear about us? Or What model Range Rover are you interested in?

 What’s the use of having their name if you don’t have their phone number?  Usually, a company will want to set specific form fields to required. Checking whether a potential customer has filled out a required answer is called form validation.

An Overview of Form Validation

There are two ways to validate form data, client side and server side.  While doing both client and server side validation may be a best practice, my experience is that only one method is chosen.

In general, Javascript is used to validate forms on the client side (in browser).  When a potential customer forgets to enter their phone number, javacript pops a small dialog box reminding them they screwed up.  The user fixes their error and tries submitting again.

Server side validation occurs when the potential customer submits a form and a new page loads, typically with a warning in red saying what information they forgot to enter.  The user then clicks back to return and complete the form.

Limitations of Data Validation on Salesforce Powered Contact Us Forms

Salesforce does not allow server-side data verification.  My understanding is that all users of Salesforce submit form data to the same encrypted URL: https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8

A unique customer ID accompanies all data posted to Salesforce which routes it into your personal silo of the great CRM cloud in the sky.  Since you don’t control this servlet page on salesforce.com, you can’t do anything once the form is submitted.

This means that a client side check, using javascript, is your only real alternative for validating forms used to feed data into Salesforce.

Implementation

There are many examples on the web of how perform simple form validation with Javascript.  If you want to get really fancy, here’s the javascript SalesForce uses for validating its own forms.  It includes checking for the email address to be formed properly and if the phone number is valid.  A screenshot of the page the above jscript was taken from is below.

Keeping it simple, you can simply ensure something was typed into individual fields like so:

<script type=”text/javascript”>

function validate_required(field,alerttxt) {

with (field)

{

if (value==null||value==”")

{alert(alerttxt);return false;}

else {return true}

}

}

function validate_form(thisform)

{

with (thisform)

{

if (validate_required(first_name,”Please fill out your first name.”)==false)

  {first_name.focus();return false;}

}

}

</script>

The matching form element would be:

<label for=”first_name”>First Name: *</label>

<input  id=”first_name” maxlength=”40″ name=”first_name” size=”25″ type=”text” /> 

And finally the <form> tag needs to run the javascript:

<form action=”https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8″ onsubmit=”return validate_form(this)” method=”post”>

Voila.  You have performed client-side data validation.  

Caveats and Other Madness

This example uses the standard Salesforce field “first name” and its associated id, first_name.  If you use custom fields in Salesforce, you’re going to have to deal with weird id’s, like 000004fsx02.  In these cases you will need to construct form elements with different ID and Name values, since the javascript that I used did not accept DOM names that began with numbers.  

My research suggests that this is against convention, but you do what you’ve got to do.  Maybe you can write better javascript that will take these funky salesforce custom field id’s.  If you can, please post your solution here.

I should also mention that occasionally you want to hard code data for passing into custom fields in Salesforce.  In these cases you must still use the form data spit out by web-to-form, only set the only response to what you want and set the item to hidden.

Suggestions for Salesforce

Salesforce disowns anything you do with the HTML that the web to form functionality kicks out for you.  They do not support creation of contact us forms, and provide no advice on technologies or methods to validate data inbound to their CRM.  Asking their customer support staff  if their CRM has the ability to perform server side validation will be met with confusion.

Salesforce needs to provide better support for this important aspect of lead origin into its client’s sales processes.  Undoubtedly, SF likely has elegant methods for working with data using its SDK.  If it is going to actually reach startups and smaller businesses with a $9 per user subscription plans, it needs to better support the most basic functionality of passing data into the system.

If Salesforce does not better address the down market, it will lose against startups like Zoho that offers a similarly priced CRM and a comprehensive set of other web applications and that has a user community willing to create how-to videos for things like Contact Us form creation.

At a minimum an explanatory page should be available in Salesforce’s online help to explain the basic methods for building and validating web form data.

I hope this has been helpful, please post your experience!

Follow me on twitter.

As you might guess I’ve been following the redesign of Facebook pretty closely. My pal Bryan just posted a link to another great PC World article on Facebook “caving” to user concerns in the redesign. The article contains a good summary but also some important links worth checking out:

• Facebook’s Director of Product, Chris Cox official reaction (blog entry)
• Techcrunch shames Facebook for caving to users.
• The idea that while 2 million users complained about the redesign, yet that is only 1% of the userbase is highlighted here.

The main changes they will be making in the near term to satisfy complaints are:

• Live updating: One of the most common requests is the ability to see your stream update automatically. We will be adding the ability to turn on auto updating in the near future so you no longer need to refresh the page.
• Photo tags: In order to surface more photos you might like to see, we’ll be adding photos tagged of your friends to the stream. This will happen in the coming weeks.
• More choices for applications: We’ve heard feedback that there is a lot of application content appearing in the stream. We will be giving you tools to control and reduce application content that your friends share into your stream.

I have a theory that the live updates thing was supposed to be introduced at the same time as the major feed update.  I had actually personally contacted FB with my dissatisfaction resulting from having people’s favorite color thrust upon me.

I think that what the new design will receive a more favorable response once the manual page refresh is gone–especially with the this new icon based format.

I suspect that the design team / Zuckerberg felt it would be too much change at once and instead left off the auto-refresh stuff. This half-leap caused a lot of concern because it didn’t incorporate the full concept behind the redesign.

I have another theory regarding the sudden forced inclusion of friends’ application updates:

Application developers suffered greatly when the apps were moved from a person’s profile to the Boxes tab. I know because my own DMB FB app with 9000+ users took a major dive in traffic after the change.  I think that the forced inclusion of app updates in the retooling was meant to try and return the favor to app developers. Unfortunately, announcements from apps seem to be dominated by rather niche trivial quiz that no one cares about.

Coolwhip hair dude.

One of the most important parts of a person’s Facebook presence is their profile photo. This is displayed in the top left corner of a page. The photo can be a newly uploaded image or it may be drawn from any of your online albums.

Typically, a profile photo shows someone’s face, and appears in front of the light blue-grey line that connects from the left side of the profile to the left-most tab. View an example of a typical profile page with a normal photo.

Unlike Myspace, Facebook’s uses a common color and layout for every profile. This makes the site look better overall, but also limits your ability to affect the look of your profile. You can display Facebook applications on the left sidebar, and have them in tabs, but any changes to how the page’s style or how it is displayed overall are limited.

Hacking the Facebook Profile Photo

There isn’t a legal way to ‘hack’ Facebook, but there is a method to changing your profile photo to make your profile look subtly different and cooler. It isn’t obvious, but the placement of a profile photo allows you to lightly innovate on Facebook’s sacred profile layout.

How does it work?

When you create a profile photo from an existing album image, Facebook lets you crop the photo down to whatever dimensions you choose. When you visit your profile the selected photo is displayed scaled down to a maximum height and width allowed by Facebook.

The first thing you need to understand is how much space you have to play with. Facebook displays profile photos at a maximum of 200 pixels in width. If you go beyond this, Facebook resizes your profile photo down to 200 while maintaining the aspect ratio vertically. Facebook will display a photo in your profile that is up to 600 pixels in height. This means that Facebook will happily display any image as large as 200 x 600 without otherwise changing or resizing it.

A Blank Facebook Profile Photo Background

Now that you know the maximum dimensions of your profile photo, the base trick is simple. Facebook is set up to display the top of an image 52 pixels north of the thin grey line. Normally, all profile photos are placed at this height above the line.

In order to achieve an unbroken line across your profile you need only create an image with a grey (#D8DFEA) 52 pixels below the top. In addition, you’ll need to paintbucket the area above the line to match the light blue (#EFF0F5) used in the profile header.

For more information about the colors used in Facebook’s style sheet, see this guide for Facebook application developers by Bill Konrad.  I wrote a Facebook application about a year ago, read about the DMB Facebook application here.

Subbing this blank template allows you to achieve something Facebook normally does not allow: the option to not display a profile photo at all. A new Facebook account with no profile photo displays a box with a drawing of a mystery person with soft-serve icecream hair on it. Using a blank lined template allows you to add a little ‘negative’ space to your profile that is normally not possible.

The fun begins when you overlay a photo or image on top of the blank template. The hardest part about doing this is isolating an image so that it can cleanly offset the background template. My suggestion for this is to use Adobe Photoshop to draw a selection area around your photo or image and then remove the edges.

Give Yourself a Living Room on Your Facebook Profile

There are a lot of fun things you can do pairing foreground cutout images with the background Facebook template. The first one I did was to create a sort of mini-living room for me to hang out in. Here’s a screenshot of my profile using this particular photo.

I wanted to do a play on the little grey line and decided to try to create the illusion that I was hanging from it.  I started by taking a photograph of me hanging from a doorway and then isolating the image. I then overlayed the photo on a longer version of the blank Facebook profile photo template.

Here’s a look at that process and the final result:

Creating a Hanging From My Wall Effect

And here’s a screenshot of my profile using this effect.

Another fun foreground image I used was a colored in Giraffe. This gave my profile a fun look and because it pushed down the information in my left sidebar, a lot of negative space around my wall updates.

A 200x600 Pixel Profile Photo Overlayed on a Blank Template

View a screenshot of the complete profile using the ‘giraffe hack.’

Playing with the Thin Grey Line

A lot more can be done with the look of the thin grey line, such as creating a jagged or curved edge that interacts with an overlayed image.  I got a little weird and created some stalactites over a green unicorn with the Earth floating above and below the header line.  View a screenshot of the complete profile using the ‘green unicorn hack.’

Image isolation in Photoshop is like using scissors to cut very closely around a photo torn from a magazine.  Photoshop has a magnetic lasso, a magic wand and a quick selection tool to help you. There are a lot of guides on how to perform selections, here are a few that will help you:

• A PDF on object selection and isolation
• A video on object selection and isolation
• A web tutorial with images on the Quick Selection tool.

I’m including the some example images to help you get started in a zip file at the end of this entry.

Hack Caveats

The hack falls apart a few different ways. The easiest is to post a status update that is long enough to wrap around to two lines of text. You can avoid this by posting your long status update, and then clearing it afterwards. View a screenshot of this problem.  This leaves your current status as blank, but the update will still appear on your news reel and the illusion of the hack will be maintained.

Another point of note in using this hack is the display of your profile photo in wall listings. The profile photo is shrunk down quite a bit. A plus of this is that if you choose a long, 200×600 photo, it can look rather cool and set you apart from other Facebook people when you’re shown in a list.

Conclusion and Downloads

For many, your Facebook presence is an important part of your online presentation of self.  You can differentiate yourself on Facebook by tweaking the look of your profile by using a specialized profile photo.

I’m making available a zip file that includes a number of original, layered .psd files that will help you get a quick start on hacking your Facebook profile photo.  I’d love to see some examples of other ideas people come up with.  Feel free to post or send me a screenshot of what you came up with and I’ll add it to this blog post.

• Digg this article if this was helpful / interesting to you or post it on your Facebook.
  
• Download the ‘Hack’ your Facebook Profile Photo Kit (includes the blank background template and some example overlayed images.)

In order to beta test, you first create an id Software user account, and then you have to create a second beta tester account just for Quake Live.   Both accounts require you to go through a registration/authentication email loop.

The gameplay is quite good, it feels just like Quake 3 Arena with a number of the original maps available for play.  The most impressive thing is that the game runs smoothly within a browser tab.  You can easily change game settings, including resolution changes on the fly, with a brief loading routine by the app.

Another interesting feature is that the statistics from your matches are immediately available in other pages of the Quake Live site.  So, you can play a game, then click out and navigate directly to a list of people you played against recently and add them to a friends list.

There aren’t very many people playing yet.  Apparently, the beta has been going on for several months.  The public can apply for a beta key right now, but I don’t know how many requests are getting granted.  I think that this is the closest thing I’ve seen to putting a franchise gaming release up in the cloud.  When you can have a high calibre game, a tool like the Zoho CRM, gmail, and a Google Docs spreadsheet open in the same browser it sort of makes the OS look a little thin.

The game will pay for itself using live in-game advertising provided by IGA Worldwide.
Here’s the Quake Live Beta email in full:

QUAKE LIVE Tester!

Your name has been submitted to id Software to help us test a new multiplayer project underway here at the studio. We are working on QUAKE LIVE and would appreciate your help as we progressively test technology systems, user interface options, and gameplay changes.

What is QUAKE LIVE?

Originally dubbed “QUAKE Zero” when we announced the project at QuakeCon 2007, QUAKE LIVE will be a freely available, updated version of QUAKE III Arena that you access and play through your web browser.

As a beta tester, we are asking you to help us test the game delivery mechanism and core game technology, and to provide feedback on gameplay and game levels. The servers are always available, but you are encouraged to join us for our regular focus tests and special events (you will receive email notifications).

Please note that QUAKE LIVE is a work in progress and your experience as a beta tester does not reflect the final set of functionality that will be available. We encourage you to post comments, issues, suggestions and other feedback to the QUAKE LIVE forums. As a beta tester you are asked to keep your personal key, login information, account information, and all other information related to your participation in this program private and confidential.

What’s Next?

Simply use the personalized key below to setup an id Beta Tester account and gain access to the QUAKE LIVE website where you can begin playing.

You will be asked to agree to a non-disclosure agreement and we ask that you keep your personal key, login information, account information, and all other information related to your participation in this program private and confidential.

Visit http://quakelive.idsoftware.com/ to start playing.
Key:
<cut>
Thank you for your time,

The QUAKE LIVE Team at id Software

What might the goals of a union of Facebook application developers be? It would help to look at what has stirred the pot recently. About two weeks ago someone posted a complaint that Facebook had unfairly bent the rules to give CBS’s Sports NCAA bracket application advantages for faster viral spread across the Facebook user base. Adding insult to injury, the thread also pointed out that the CBS Sports NCAA bracket application had a poor user rating.

Two days ago another developer posted a thread titled, “Facebook has stolen my idea!” which describes the recently added “Do you know these people?” page on Facebook. The developer suggests he feels “cheated” because the new Facebook page duplicates his own application’s functionality. The developer’s application was forced to comply with platform development rules that required an obstructive approval process in order work correctly.

Facebook’s “Do you know these people?” page circumvents this approval process because it is not subject to the rules independent application developers must follow. Facebook made a better version of the application a part of the Facebook experience by bending the rules that crippled the original developer’s work.

These examples illustrate that Facebook considers it a duty to nationalize or expropriate functionality if it is considered good for Facebook. Rather than something that needs to be declared, Facebook makes this right clear in the Facebook Developers Terms of Service:

“…You hereby grant us a worldwide, perpetual, irrevocable, non-exclusive right and license, with the right to sublicense, to: (a) access, reproduce, display, distribute, perform, and store on our servers your Facebook Platform Application and any Facebook Platform Application Content, and to create derivative works of Facebook Platform Application Content, as may be necessary or desirable to make such Facebook Platform Application and Facebook Platform Application Content available to Facebook Users in accordance with the terms of this Agreement and the Facebook Platform Documentation and the Facebook Platform Application Guidelines; and (b) otherwise access, use and analyze any Facebook Platform Application Content for our internal business purposes (e.g., for the purposes of targeting delivery of advertisements or other content to persons who have viewed particular types of Facebook Platform Application Content).”

This paragraph basically says that Facebook can duplicate and meet parity or run with your application’s functionality and then integrate it into the basic Facebook experience. The second part basically says that Facebook reserves the right to monitor how much your application would be worth if Facebook were to take your idea.

I think a lot of independent developers get to sleep at night with the belief that Facebook wouldn’t expropriate their applications. These developers comfort themselves with the idea that “it happens occasionally–but only to applications with functionality that obviously belongs in the platform.”

The board of directors for the copper companies were probably counting the same sheep prior to the sweeping expropriation of copper mines by the Chilean government in the early 1970s. The result of that disagreement was that the United States pushed for and succeeded achieving economic sanctions against Chile. But the Facebook development community doesn’t exactly have sanctions on its list of tools of influence. What does it have?

For one, it would have to be part of a greater independent community of developers for all open social platforms. Only by having a union of developers that canvas’s all major platforms could it hold sway against any particular one. Such an organized group might hold sway by steering technical offerings, such as beginner guides, away from platforms that have a history of expropriating applications functionality unfairly. A strong independent application developer union might also be able dissuade or at least condemn social platforms that repeatedly expropriate functionality.

Representation at the table would help, when the biggest social networking application companies, RockYou!, are getting all of the attention. RockYou! has funding from Sequoia Capital, a company that wouldn’t take wholesale expropriation of their software lightly.

I’ve been interested in writing for Facebook for some time because I believe that companies need to be expanding their online presence into applications built for major social networking platforms. It is easy to say that people should pay attention to things like OpenSocial or Facebook’s API, there have been plenty of articles about it. But nothing can convince you like building and running one yourself.

My application began with only allowing users to choose a photo for their profile. Then I added the ability to select prior Dave Matthews Band shows. The problem came when people said they wanted to show their tour history further back than 2007.

I’ve been sourcing my data from the DMB Almanac, a site that I promote fairly heavily through the Weekly Davespeak’s front page and in the forums. I have a feeling I send them a good portion of traffic.

In order to get the application out as soon as possible, I decided to create my own numbering system for the shows–2007′s data was IDs 1-86.

The reason I didn’t use the almanac’s Show ID numbering was because the show id’s do not iterate consecutively. The band’s management adds shows out of chronological order. For instance they’ll announce the complete summer tour and DMB Almanac adds that–then additional dates like benefits get added.

Using my own consecutive numbering meant that I could For loop through the list on a number of functions and random-access show information directly from the user’s show list. The refactoring meant building a translation table and script to update the old Show ID data, then change a number of functions from For to while loops that would handle non-sequential iteration the tour data.

Writing the translation script was a hurdle, I did a lot of debug output on the data I was generating to make sure it was working correctly.  You can see a bit of the verbose output here.

The application has just under 800 members now. I hope to have several thousand before DMB’s 2008 dates are announced. As the image above shows, the page has resulted in 163 new visitors, 21% of whom were new to the site. This is a low number compared to other site sources, but that may be because the app has not been in the wild for long and the skew is towards those who found out about the app from the Weekly Davespeak forums.

Weekly Davespeak still lags Antsmarching.org by a wide margin, but I’m preparing some changes and a new service for WDS that has the potential to act as a game changer. It will take time, community effort, but I think that WDS could become achieve the lion’s share of Dave Matthews Band traffic within two years.