There’s nothing better than getting your hands on some fresh new tech. While it might not have the same appeal as when you get that new desktop or laptop home and get a to take off the protective wrappers and start your good housekeeping (backup discs, anti-virus, etc) before installing everything nice and fresh for the first time, getting a new server for a client, setup ready with the basics to be configured has its own rewards. Albeit over RDP.

You’re going to be deploying on this box, developing sites you want to perform well. So you want to get it right and make it the best setup possible – for you and the client.

I thought I would gather together the key items that you definitely want to get right plus show you how to make best use of the disk space available (depending on your setup).

My bit of tech has the system on a C:\ drive running on a RAID 1 setup with a D:\ drive left free to play with on RAID 5 setup.  This is where use of disk space comes in. We have the luxury of the potential to expand our D:\ drive in the future with the minimum of fuss (in theory) because of the RAID 5 setup. Given that this server needs to grow with our client and their hosting needs it makes sense that we host the websites and their databases on this drive rather than the C:\ drive.

So in with the basics of FTP and SMTP, I’ll also show you how to go about migrating your default configuration to another volume on your server. This is also the typical order of priority I would give these tasks.

FTP
To install the FTP service on Windows Server 2008 follow the steps below.
NB: Windows Server 2008 R2 will be a different process.

1. On the Start menu, click Administrative Tools, and then click Server Manager
2. In the Server Manager Pane, in the Roles Summary section, click Web Server (IIS)
3. In the Web Server (IIS) section, click Add Role Services.
4. Under Role services, select FTP Publishing Service. This will install the FTP service and the FTP management console.
5. Click Next, and then click Install.

Using IIS6 for FTP use the following steps to complete the setup:

1. Right click the Default FTP Site and view the Properties
2. Set the home directory to D:\inetpub for example
3. Set Directory Security to ‘Denied’ and add the CJ IP addresses
4. View the Security Accounts – the user account used here must be added to the Directory permissions on D:\inetpub with ‘Full Control’
5. Ensure the FTP site is started
6. Finally test – this setup will allow CJ access using the server IP address and anonymous access ticked.
7. The service is a manual service so locate the ‘FTP Publishing Service’ in ‘Services’ and set startup to ‘Automatic’.

IIS
Your default setup would in theory normally suffice here but we want to move IIS to the RAID 5 setup. To do this there are a number of scripts you need to run, a little tedious but well worth it! They’re well documented here: http://blogs.iis.net/thomad/archive/2008/02/10/moving-the-iis7-inetpub-directory-to-a-different-drive.aspx

SQL
To make the most of the RAID 5 setup we’re going to move SQL Server across to the RAID 5 volume. The links below document in detail how to do this. Follow the steps exactly and you won’t go wrong.

• http://msdn.microsoft.com/en-us/library/ms345408.aspx
• http://www.mssqltips.com/sqlservertip/1583/changing-the-default-sql-server-backup-folder/

SMTP
This configuration has SMTP running in IIS6. Some useful links are below to aid in setting up your SMTP service.

If your server doesn’t have IIS already installed then this website could help you with that too: http://www.itsolutionskb.com/2008/11/installing-and-configuring-windows-server-2008-smtp-server/

Fortunately for me SMTP is already installed so I just needed to configure it. The applications that would be running on this server were ASP.NET – this website was handy in getting things setup too:
http://devlicio.us/blogs/mike_nichols/archive/2008/05/07/configuring-iis-6-0-to-send-mail-via-smtp-for-asp-net-applications.aspx

One of the key things for me was securing the SMTP relay to ensure it couldn’t be hijacked. Here are the steps I followed:

The SMTP service is most likely to be disabled so despite configuring IIS 6 SMTP you won’t be able to start the service. 

1. View the service list in the Server Manager and locate ‘Simple Mail Transfer Protocol (SMTP) and change the status from ‘disabled’ to ‘Automatic’.
2. Then start the SMTP service in IIS 6.
3. In IIS 6 right click the SMTP Virtual Server and view ‘Properties’
4. Under the ‘Access’ tab click on ‘Relay Restrictions’
   1. Select the option ‘Only the list below’
      1. Add the IP: 127.0.0.1
      2. Add the IP of the SMTP Relay

If you don’t know the IP address of the SMTP Relay, enable logging in IIS 6 and run the Telnet test (see below). Access the log file on the server under: C:\Windows\System32\LogFiles\SMTPSVC1

This will show the IP address attempting to relay the email. You need to allow this.

Run a test in command prompt using Telnet: http://support.microsoft.com/kb/323350

Something every developer has to do when creating a website/online application is test their work. My passion is acheiving zero defects so in my MVC application I want to see how I can work with Unit Testing.  First off I had a look at this tutorial (http://msdn.microsoft.com/en-us/gg618510) and had a go with my own application. Things didn’t quite add up despite setting Actions, etc to the appropriate values. So my next port of call is to download the application used in the tutorial and see how far I can get! 

In my last post I had stumbled upon a site issuing browser detection code in various coding languages (detectmobilebrowsers.com) because I thought I needed to detect if the website was being viewed by a mobile device. Out of that I have some javascript/jQuery code which appears to do the job (still requires some testing though!).

Here’s a snapshot of the code used:

I figured if I could have the need to detect the browser client side I would undoubtedly have the requirement somewhere in the future to do it server side. I had a play with the code the C# section spat out and it seemed pretty good. Very little needed to be done to get things working.

Here’s a snapshot of the code used:

I’ve tested the code in my PC’s web browser, so I know it knows that I’m not a mobile device. Now for some mobile testing!

Following on from my last round of feedback I figured I needed to focus on sorting out the iPhone display issue given this is a key player in the mobile market!

I figured I needed to get the page to reload into the empty <div> tag but I only wanted to do this if I had a mobile viewing the website. I set about locating a mobile browser detection script. Previously I’ve found this to be a closely guarded secret so I was unsure what I would find. I stumbled upon this website: detectmobilebrowsers.com. It provides code for all manner of coding languages – my key languages of interest were jquery, javascript and c#.

I figured for this implementation I would just crack on with the javascript/jquery and get the detection running so I could reload the Google Map. The code it spat out wasn’t a ready made solution – I still had to figure out what it was doing to a certain extent and then make custom functions out of the code that was presented. This didn’t take too long and did physically seem to work.

So, very pleased with myself I decided to call up one of my colleagues to test out my newly deployed update on their iPhone 4S. To my amazement it didn’t work! Google Maps are iPhone compatible – what am I doing wrong?! It can’t be the loading as even that didn’t make a difference!

Another colleague also on an iPhone 4S came to my aid and the website worked on their phone. Wah?! This is crazy! Good but crazy! All settings and iOS versions appeared to be the same so nothing made sense. Apparently this phone is due to go back for other issues so I could only assume that this was the problem – but could I?

I decided to broadcast to the company in a ‘Your Country Needs YOU!’ stylee and had a load of responses confirming the site worked on various iPhones. Cheers guys. The men in white coats have been stood down. I am Not going mad. Phew!

So my last investigation looked at how I could get my website rendering as a mobile website with a few CSS tricks. Following on from this I have a second round of feedback from my fellow colleagues using this demo site: http://demo.creative-jar.com/mvc-google-maps-mobile. Since my last post I’ve updated it with a couple of bits to see if it would help:

• The CSS has been stripped back properly for mobile rendering (in case this could have had any possible cause for display issues)
• I added the word ‘Loading…’ in my empty map <div> since this could have been causing a problem.
• I added a <noscript> tag to the page so I could explicitly see if someone had javascript enabled or not in my feedback.

I resubmitted my demo site out and here are the results:

• HTC Mozart | Windows Phone 7.5 | IE – latest version on WP7
  Outcome: Continues to perform well with geolocation enabled but the map flowed outside of the mobile design.
  
  
• Blackberry Curve 8530 | BB O/S 5
  Outcome: Javascript was turned off. Map loaded once javascript was enabled but the map flowed outside of the mobile design. The geolocation was not supported and so the user was planted in Scotland. 
  
  
• iPhone 4S | iOS 5 | Safari
  Outcome: Just showed the word ‘Loading…’ so looks like I need to consider doing some sort of mobile detection script here to reload the map in. 
  
  
• Samsung Galaxy S II | Android | Google Android
  Outcome: Unsurprisingly, continues to perform perfectly. Cannot fault. 

When the site was run on the Blackberry we had a bit of a play with the settings, the first one we enabled was javascript location support. The next was general javascript support. After some testing we got the map to display, albeit incorrectly – over flowing the dimension of the <div> tag, but the geolocation failed. From my script it put my tester in Scotland which actually means that both the W3C Geolocation and Google Gears both failed. 

I also figured I would do some research into what platforms the Google Maps API actually supports and it turns out that it only supports iPhone and Google Android at present. I found this Google Group thread in which a Google Employee comments informally on the topic regarding Windows phones: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/2e735d1347c9900a. So there may be some hope for Windows phones in the future, but as far as Blackberry OS and Symbian goes, you’re out of luck!

Now I've had some feedback on the basic website I wanted to see what I could do to get my website displaying in mobile format without having to create a whole other website just for a mobile audience. After some searching I came across this website: http://www.html5rocks.com/en/mobile/mobifying.html which gives some great tips for CSS selection using the media attribute on the CSS link.

I implemented some of the items into my website application and deployed a further demo site so I could do some testing of my own: http://demo.creative-jar.com/mvc-google-maps-mobile. Note how when you view this website in the desktop browser it looks just like my previous demo site: http://demo.creative-jar.com/mvc-google-maps.

When viewed on my Android phone the website is in its mobile 'version'. Everything is nicely zoomed in so I can see things clearly - including the Google Map - all done by simply implementing the steps detailed in the HTML5 Rocks website and then adjusting the iphone.css to suit the screen.

My thoughts rapidly returned to the iPhone that failed to display the Google Map. On my search for information on this problem I stumbled across this website: http://www.pluralsight-training.net/community/blogs/jimw/archive/2009/10/30/iphone-google-maps-api-and-the-iui-framework-can-t-we-all-just-get-along.aspx - it turns out this is likely to be a load order issue caused by the empty <div> tag, so I need to now get the mobile site loading slightly differently for mobile in order to get things displaying correctly. Trouble is, I need a mobile detector script of some description. I know I can use the media attribute in the CSS to get the website displaying as I want, however, how can I now detect that my website is displaying on a mobile device and therefore warrant this special treatment?

My colleagues at Creative Jar have very kindly taken the time to view my demo website and given me the much needed feedback covering the big 4 platforms on the market today. The only OS not covered below is Symbian but that is now in decline with Nokia’s decision to drop it, therefore for the purposes of this exercise I’m not going to worry about that one too much despite it’s still fairly widely used at present.

Each piece of feedback contained the make and model of phone, OS and browser as well as the outcome of viewing the Google Map page on the site:

• HTC Mozart | Windows Phone 7.5 | IE – latest version on WP7
  Outcome: Accurate when GPS allowed and it displayed the web page as it would in a desktop browser, retested without GPS and denied access.
  
  
• Blackberry Curve 8530 | BB O/S 5
  Outcome: Failed to load the map - just a blank screen
  
  
• iPhone 4S | iOS 5 | Safari
  Outcome: Failed to load the map – just a blank screen
  
  
• Samsung Galaxy S II | Android | Google Android
  Outcome: When browser location sharing switched on the location was accurate and it displayed the web page as it would in a desktop browser. Retested without browser location sharing and was denied access.

The HTC Windows 7.5 phone and Samsung Android phone performed perfectly, rendering the website without issue and gave excellent geolocation accuracy. The Windows phone used GPS for the positioning so was naturally very accurate. The Android phone didn’t have GPS enabled on the phone and simply used the location sharing naturally available through the GSM/3G service. This was accurate to within around 10 metres which was comforting given that not everyone wants to enable their GPS service that could cost them GPS data fees.

The Blackberry was also somewhat unsurprising given that by default Blackberry has javascript disabled – the language with which the Google Maps API communicates. I do need to get this confirmed though since it was not communicated whether javascript was enabled or not. It could of course be a similar issue to the iPhone.

The iPhone however was the big surprise. A blank screen? The page did load but no map? This was most odd but to me felt like this could be a CSS issue given that to render the Google Map you are essentially rendering an empty <div> tag.

The website has now been deployed so we can crack on with some user testing. We've already see how it performs on a desktop browser, so how will it perform on a mobile phone? If you want to try for yourself you can view the website here: http://demo.creative-jar.com/mvc-google-maps

Click on the Google Map button and you'll see the map load. There are 3 points plotted in Berkshire - one being the Creative Jar office in Twyford.

The challenge now is to see if this website (only displayed as a website - there is no mobile version at this point) works on a mobile phone.

The key points I'm looking for are:

• Does the map render on the page?
• How does the geolocation work with location sharing on/off?
• How accurate is the geolocation?

My colleagues at Creative Jar are very kindly assisting me in my research so I’ll post my findings next time.

I've finally plotted the points on my map dynamically, which was a bit of a challenge in itself.