Before we start here are some details about my phone which i did this process on:

• HTC Desire simlock to 3 UK
• Software version 1.22.771.1
• HBOOT 0.80.0000
• Did this on Windows 7

You have 3 choices on what you can do here:

1. Put a custom recovery on it to flash any rom you like
2. Gain root access your current Eclair 2.1 (and a custom recovery if you like)
3. Upgrade it to offical Froyo 2.2

First we  must ‘debrand’ our phone, this is a process where we load a generic rom that shipped with the sim-free Desires. These are all version 1.21.x all of which contain ways to root the phone. If you read up on how to root these phones you notices it says ‘this only works if you have 1.21.x or below), well the goal of this to downgrade to that lower number.

PLEASE READ EVERYTHING CAREFULLY I CANNOT BE RESPONSIBLE FOR BROKEN PHONES.

Create a ‘gold card’  - A GoldCard is a special SD card which, when inserted into your device, allows you to flash RUU files with a different CID to your own device. So we own a 3UK branded device, this will allow you to flash a generic ROM.

Requirements

• Spare microSD card
• Windows PC (recommended)
• ADB (part of the tools folder of the SDK, available for download here
• HxD Hex Editor, available for download here

Step by step instructions

• Format the microSD card to FAT32 format.
• Put the microSD card in your device and boot it.
• Ensure you have unzipped the SDK, then open a command prompt to the extract location. Change to the ‘tools directory.
• Enter ‘adb shell cat /sys/class/mmc_host/mmc1/mmc1:*/cid’ and press enter. You should get a very long number which looks like this: 532600bd227d9c0347329407514d5402.
• Visit this page, paste in your number and reverse it. In our example the result would be 00544d5107943247039c7d22bd002653.
• Visit this page, enter your reversed number and create your goldcard image, which will be e-mailed to you.
• Open the HxD hex editor. If you are using Windows Vista or Windows 7, you must run the application as administrator.
• Go to the ‘Extra’ menu and select ‘Open Disk’. Under physical disk, select Removable Disk (your microSD card), uncheck ‘Open as Readonly’ and click OK. Note that you should select physical disk NOT the logical disk. This is important!
• Go to the ‘Extra’ menu again and select ‘Open Disk Image’. Open the goldcard image that you received by email.
• You should now have two tabs - one is your removable disk, the other is your goldcard image. Press OK when prompted for ‘Sector Size’ (selecting 512 (Hard disks/Floppy disks)) and click OK.
• Click on the goldcard image tab. Go to the ‘Edit’ menu, choose ‘Select All’ then select the ‘Edit’ menu again and select ‘Copy’.
• Click on the ‘Removable Disk’ tab. Highlight offset (line) 00000000 to offset (line) 00000170 (including the 00000170 line), then click on the ‘Edit’ menu and select ‘Paste Write’.
• Click on the ‘File’ menu and select ‘Save’, accepting the warning.

Ok here the bit that differs for us 3UK branded people. If you have a branded handset other then 3UK at this point you run a gernic RUU found here. 3UK owners must go through a couple more steps.

Download the unrevoked3 rooting package from here http://paulsrichards.com/files/downloads/desire-rooting/reflash_package.exe (the one i used) or download it from http://unrevoked.com/#desire. This software will flash a custom recovery onto your phone. If your having driver problem ensure you follow the instructions that come with it properly. It has its own set for bootloader that it must use. If you having issues with the program finding your desire, try plugging in the desire before you load the program (even though it says not to do this). I had to do that to get it to work. Note that it loads a default recovery you can change this by clicking the file menu, i did this and used recovery-RA-desire-v1.7.0.1-R5.img found here. As i’ve rooted a Magic and Hero in the past i felt more at home with that one.

NOTE THIS PROCESS WILL COMPLETLY WIPE OUT YOUR PHONE  - ENSURE YOU HAVE IT BACKED IT UP.

Ok now you can get into your new custom recovery by turning off the phone, hold the back button + the power. Select ‘BOOTLOADER’ then ‘RECOVERY’. It will then reboot to recovery.

Now at this point you can say the hard work is done and load a custom ROM which is Froyo 2.2 offical. I’ve currently got ‘Rooted Official HTC Android 2.2 (FroYo) ROM’ from here (look around on XDA there are loads to try out). And away you go offical 2.2 on your phone.

But you can carry on and do it the other way (i’m not sure why you would want to do that now but here goes).

Place this zip (found here for ref) on your Sd card and ‘Flash a Zip’ in recovery.

Now your phones thinks its an older version then it is. Download a gernic unbranded RUU found here.

Possible problems

• When running RUU it reboots into BOOTLOADER and cant find the phone - turn on your phone as normal, plug it in with USB debugging mode on, with the SDK run on the command line ‘adb reboot oem-78′. Then it will go into the mode the RUU whats it to, then check all the drivers are ok in the ‘Hardware Devices’ in my computer.It should say ‘HTC Bootloader’. Then while in that mode run the RUU.
• If you get while in RUU ‘Wrong CUSTOMER ID’ - you gold card is bad, do it again.
• If you get while in RUU ‘BOOTLOADER VERSION INCORRECT’ - you haven’t flashed the update.zip properly.

Easy! you know have a downgrade phone!

Now to root it you can do the following (guide from XDA):

NOTE: for step one it depends which generic RUU you decided to put on, please check what you got by going into HBOOT (power off, back button + power).

1. Download Tiny Core Linux Live CD
   —- For a bootloader of 0.75.* or lower AND a current ROM of 1.15.* or lower Download
   —- For a bootloader of 0.80.* or lower AND a current ROM of 1.21.* or lower Download
   
2. Burn the downloaded iso on CD/DVD
3. Boot your computer from that CD/DVD, once you booted it will ask you to press Enter or F2/F3 keys, you need to press Enter
4. Insert the goldcard into the phone.
5. Start the HTC Desire in bootloader by holding back and turning it on by the power button
6. Connect the USB cable to the phone and PC
7. Open a terminal by clicking the icon that looks like a monitor at the bottom on Tiny Core Linux and type the following commands:
   Code:

   sudo mkdir /mnt/cdrom
   sudo mount /dev/cdrom /mnt/cdrom
   cd /mnt/cdrom/desire
   sudo ./step1.sh

8. Wait until the phone restarts back into the white bootloader screen
9. Turn the phone off via the bootloader menu (or pull the battery and USB cable) and remove the goldcard. Put a non-goldcard SD into the phone or reformat the goldcard and put it into the phone. Put the phone back into bootloader mode (Press Power button and Back button).
10. In terminal type the following command:
    Code:

    sudo ./step2.sh

11. Once the phone has finished, you will see a screen with a green text. Use the optical tracker to navigate the menu to select Wipe and then press Wipe data/factory reset
12. Once complete you should be back in the main menu. Now select the option Flash zip from sdcard and than choose rootedupdate.zip
13. Once back in the main menu, choose restart the phone - the rooting process is now finished

IF YOU WISH TO UPGRADE TO OFFICAL FROYO DO THIS BUT IT WILL UNROOT YOUR PHONE AND MAY MAKE IT SO CAN NEVER ROOT IT AGAIN. I WOULD SUGGEST YOU DO WHAT I DID ABOVE

(guide is from here)

Next you need to download the FroYo update file which you can find here [Mirror - the file has already been renamed to update.zip], once you have done this rename the file update.zip and copy it to the root of your microSD.  Turn your phone off then do the following:

• Turn your phone on whilst holding down the volume down button to enter the HBoot menu
• Choose the Recovery option by using the volume down button and the power button to select, your phone should then restart in recovery mode where you’ll be greeted with a red triangle and exclamation mark
• Press and hold the volume up button and press the power button once, then choose to apply update.zip at the next menu
• The FroYo update will now take place during which time your phone will reboot several times, the whole process takes about 10 minutes
• Once you have booted up into FroYo and configured your settings, copy your files back onto your microSD card and you are good to go!

After the initial download of around 50mb for windows with comes with a nice installer to take care of everything. It then I realised I hadn’t downloaded everything yet and more modules need to be added before installing such as MySQL. There was also other option like a Java Bridge, Zend Framework (with or without dojo) and various other database adaptors.

After a 5 minutes everything was done. The apache web service monitor appeared which confirmed it was running. Icons now appeared in my program folder so I went ahead and click on ‘Zend Service’. Also worth noting that it also had Links to apache, MySQL service programs and to the htdocs.

Up loaded a web page taking me to the control panel. Everything looked a bit more flashy and provided similar links as xampp to phpmyadmin, a phpinfo file and the status of various services. You are reminded in various places that you only have the free version which is a little irritating. With the links provided you have easy access to the root folder and setting up passwords on MySQL.

Its really done exactly what it said it would do and i encountered no problems installing it. Less experienced users may bit a little confused when it comes choosing which components to install. It does however lack some features that xampp comes with such as SQLite and perl. There is also no centralised management tool like the xammp control panel to easily start and stop apache and MySQL. This is a real shame as this just makes xampp so easy to use.

Related links

http://www.zend.com/en/products/server/downloads

http://devzone.zend.com/article/4272-Zend-announces-public-beta-of-a-new-product-Zend-Server

http://www.apachefriends.org/en/xampp.html

Well with Live Events this is no longer required (well for some events anyway). By creating a event handler through a via Live Event it bounds all current and future elements. This gives you the advantage of not having to repeat the events handlers. Some events are excluded: blur, focus, mouseenter, mouseleave, change, submit. Fortunately the most common ones are supported and no doubt all will be supported in the future.

jQuery Live Events Doc

It has similar functionality jQuery’s hover(over, out) but with a few more options specifically geared towards pop up menus. Most importantly it will continue to match an element that you want to appear when you move off the mouse original element and on to any new element, where ever its located in the DOM.

Parameters

target (DOMElement): This is the element that is to ‘appear’ when the hover event is called.
addStyle (string): Optional. Adds a class to the matched element on hover (of matched element and target). Removed on hover off.
time (int): Optional. Time in milliseconds after a hover off when target element is invisible.
speed (String|Number): Optional. A string representing one of the three predefined speeds (”slow”, “normal”, or “fast”) or the number of milliseconds to run the animation displaying the target (e.g. 1000).
autooff (boolean): Optional. Default is true. If turned on will automatically hide any target elements if visible when a different popmenu is triggered. For example if you pop up menu’s would overlap if they were both visable at the same time it will hide it first.

Example

$('#mybutton').popupmenu({
				target: "#mybutton_menu",
				time: 300 });

Download

Production (944 bytes, packed) v1.0
Development (1.75 Kb) v1.0

This version has been designed to make finding that font as easy as possible. Like the previous Jabroo the fonts are separated into categories and under their alphabet classification. It uses ajax to load all the fonts in one load quickly and makes flicking through each page a easy process. The old version required you to be signed up to automatically change the ‘preview text’ on every page, now users can change it without registration. The registration process has been completely changed and now requires only the most basic information, the user name and email activation process have been scraped. Now users can sign in with only a email address and password. Selecting the number of fonts to appear on each page is now also in the past. It automatically calculates the optimum number of fonts to be displayed for your particular screen type without the need for scrolling.

The technology

The application is built on the Zend Framework 1.5 technology. This implements a MVC architectural pattern and is fully PHP5 OOP. All the DHTML is built around the JavaScript framework jQuery. The main problem with a site like this is how it must be able to load a large amounts of images quickly. To improve perform all the images are cached server side and are pre loaded on the user side. This is done by loading the next two pages of image from the current one. This results in the user even flicking though at a quick speed doesn’t have to wait for images to load. Like many ajax enabled web sites use of the URL’s and browser ‘back’ and ‘forward’ buttons become useless because there is no physical page change. Using jQuery this site records your different Ajax clicks and tells your browser where you going to keep full use of browsers controls. With different Ajax screen that site gives a unique reference after the hash on the URL to ensure if you bookmark it you can always find yourself back on the correct page.

Known Issues

Microsoft IE 6 display issues

• Main content set to 80% width to make it fit, doesn’t display correctly on 1024 screens.
• Category pop up menu misaligned.
• Header and footer bar not the correct or the same size.

Microsoft IE greater then 6

• Log in form CSS misaligned with registration box.
• Browser not caching the images properly.

Persistent sessions weakens the security of your web site, issues like it being accessed on a public computer (you could add a tick box to be remembered) or if you hold security sensitive information. Its a trade off between usability and security. You could even implement a two step security system where by for example you may trust the user to carry out certain procedures from a persistent session such as adding a item to a wish list but require full password validation for procedures such as purchasing a item from a stored credit card number or changing passwords.

When thinking about how to create a system is seems tempting enough just to store the username and password in the cookie and read them off when the user comes back to the web site and automatically log them in. This is bad very idea. A potential hacker could easily gain access to this information and replay it back to your server and gain unauthorised access.

The cookie is the only way standard way to persist data across multiple sessions. So we must store information in this cookie that will provide us with the information in the future to re authenticate the user. Clearly is a security risk so the best we can do is store information that will only be useful for a certain period of time. It would be inadvisable to provide any with permanent access this way.

In the cookie we are going to store 2 pieces of information, a hash code representing the username, we’ll call this a identifier and a key (or token) that is valid only for certain period of time and is regenerated after one use. To create a hash of the username we could do something like this:

$salt = "pAulR2";
$identifier = md5( $salt . md5($username . $salt ) );

This should be stored in your database alongside your other user details. Remember to always to use some form of ‘salt‘ when creating hash’s. This is just a string that is known only to your application and kept secret. This insures that people cant use rainbow tables or take a few educated guesses to reverse the hash.

Next we must create a key (or token), this will be like our temporary password, valid for a certain period of time. We just need a long a string that isn’t predictable. One could be generated like this:

$key = md5(uniqid(rand(), true);

Again we would need to store this in the database and associate it to the correct user along with another field recording the time span for which it is valid.

Outline Example

Ok, you’ve authenticated your users username and password and they’ve indicated that they wish to remain logged in for one week.

// This examples assumes you have already connected to a MySQL database
$salt = "pAulR2";
/*
  You must create a identifier for every user and store it in the database prior implementing this.
  $identifier = md5( $salt . md5($username . $salt ) );
*/
// retrieve the $identifier from the database, I'm going to assume its in a variable called
// $user['identifier']
$identifier = $user['identifier'];
 
// create a random key
$key = md5(uniqid(rand(), true);
// calculate the time in 7 days ahead for expiry date
$timeout = time() + 60 * 60 * 24 * 7;
 
// Set the cookie with information
setcookie('authentication', "$identifier:$key", $timeout);
// now update the database with the new information
$result = mysql_query("UPDATE `user` SET key = '$key', timeout = '$timeout'
WHERE username = '$username'");
if (!$result) {
    die('Invalid query: ' . mysql_error());
}

Right that takes care of setting the cookie but know we must authorise it when its been detected when the user comes back to the site. On the users first visit you need to implement code like the following:

$salt = "pAulR2";
 
if (isset($_COOKIE['authentication'])) {
    // cookie is set, lets see if its vailed and log someone in
    $clean = array();
    $mysql = array();
 
    $now = time();
 
    list($identifier, $token) = explode(':', $_COOKIE['authentication']);
    if (ctype_alnum($identifier) && ctype_alnum($token)) {
	$clean['identifier'] = $identifier;
	$clean['key'] = $key;
 
	$mysql['identifier'] = mysql_real_escape_string($clean['identifier']);
 
	$result = mysql_query("SELECT * FROM user
                                       WHERE identifier = '{$mysql['identifier']}'");
	if (mysql_num_rows($result)) {
		$record = mysql_fetch_assoc($result);
		if ($clean['key'] != $record['key']) {
			// fail because the key doesn't match
		}elseif ($now > $record['timeout']){
			// fail because the cookie has expired
		}elseif ($clean['identifier'] != md5($salt.md5($record['userID'].$salt))){
			// fail because the identifiers does not match
		}else{
			/*
                          Success everything matches, now you can process
                          your login functions. The key must be re generated
                          for the next login. But don't increase the timeout to
                          ensure that the user must login in once the time
                          period has passed.
                       */
	        }
	}
	}else {
			/* failed because the information is not in the
                            correct format in the cookie */
        }
}

And remember once you have finished with the cookie delete it!

Sources: Essential PHP Security

All this requires is the latest version of jQuery (version 1.2.6 included in the demo download) and to past in the code provided. You also need a bit of knowledge of HTML and CSS to implement in your own web site.

Download (16kb Zip)

See the Demo

Code

$(document).ready(function(){
	// improve table usability
	$("table").find("tr").hover(function(){
		$(this).addClass("rowhighlight");
	},function(){
		$(this).removeClass("rowhighlight");
	});
 
	// Add class on single click
	$("table").find("tr").click( function() {
 
		if($(this).attr("class") == "rowhighlight_clicked rowhighlight"){
			$(this).removeClass("rowhighlight_clicked");
		}else{
			$(this).addClass("rowhighlight_clicked");
		}
	});
})

PHP

xampp - A cross platform web server including PHP and MySQL along with other tools such as Perl. Easily installs on a Windows machine (though it is cross platform), I recommend the lite version and install it on USB pen for portability.

phpMyAdmin - A web based tool for administrating MySQL databases, makes setting them up easy. The new version even includes a query builder. This is included with xampp just go to  http://localhost/phpmyadmin.

Zend Framework - A open source object oriented PHP5 framework. Contains easy to use classes to create a modern web app. Has support for many web services such as flickr and Google.

phpclasses - This a web site with a massive database of PHP classes. Always look her first as its probably already been done to a high standard.

Web browsers

FireFox 3.0 - An open source web broswer that supports loads of useful plugins for web developers. Not to mention generally how much better it is then any other.

Web Developer - One of the best FireFox plugins ever made. Contains a massive array of tools to help you develop your web site. From window resizing to editing CSS on the fly. Just try it!

IE Tab (Windows only) - A plugin for FireFox that allows you easily to switch your browser window to the Explorer rendering engine. As this is the most widely used browser you have to check your app works in it.

Multiple IE (Windows XP only) - A great little download that gives you old Internet Explorers (6.0, 5.5, 5, 4, 3) to try your site in. If you like me and upgraded to IE7, how do you check your site in IE6, many people still use it. Pity it doesn’t work on Vista.

Safari - Some people use this as a web browser, I guess now its available on windows you could check your site works in it

Text Editors

notepad++ - A free cross platform text editor with useful add-ons such as code highlighting for every language imaginable.

Other web tools

X Ray - Just add it to your bookmarks and you ready to go, click it, it loads then you can click any element on a page and it will show you the ‘CSS box model’. Very useful when your having pixel problems.

Browser Shots - Check you new web site in every browser known to man on any platform in one go. Warning: it doesn’t always return everything you ask for and it can take a while.

FireFtp - A FireFox plugin, a simple and realiable FTP program, can manage multiple accounts.

JavaScript & Ajax

Firebug - A plugin for FireFox, before this you would go mad debugging your JavaScript with nothing to go on. This provides full details on all errors and detailed information on Ajax requests. I also use it to be nosey on other web sites to see how they work.

JQuery - A fast lightweight JavaScript framework. Makes Ajax and HTML manlipation very easy for a modern 2.0 app.

Interface for jQuery - An additional set of jQuery plugins that provide a mass of additioal functionality for jQuery.

UI for jQuery - More plugins for jQuery that provide more for jQuery. I believe that interface and UI are being merged.

Visual jQuery - The doucmentation for jQuery can be a little rubbish, this web site lays it out in a simple format to effectivly use it.

The good news is that it is on a much better server and no doubt you will have noticed it is much faster and more reliable thanks to Centation. Also problems with signing in and some broken images have been solved.

Soon the third version of Jabroo will be available to try out. Hopefully it will be realised in the next month or so.

Being a massive fan of jQuery I thought there must a easy ‘drag and drop’ solution. I regular use the interface plugins that covers most of my needs. Though they provide a ’sortable’ plugin that works great for divs, it simply cannot sort tables due to the fact that certain CSS styles (like position static) cannot be applied to table rows.

After a long search I eventually came across a plugin solution called ‘Table Drag and Drop’. This simple plugin like all jQuery requires just a small amount of code to get it working.

$(document).ready(function() {
        $("#mytable").tableDnD();
});

To apply to a basic table like this:

<table id="mytable" border="1">
<tbody>
<tr id="product_1">
<td>My Product 1</td>
<td>£10.00</td>
<td>Active</td>
</tr>
<tr id="product_2">
<td>My Product 2</td>
<td>£2.99</td>
<td>Not active</td>
</tr>
<tr id="product_3">
<td>My Product 3</td>
<td>£23.49</td>
<td>Not active</td>
</tr>
<tr id="product_4">
<td>My Product 4</td>
<td>£19.99</td>
<td>Active</td>
</tr>
<tr id="product_5">
<td>My Product 5</td>
<td>£7.99</td>
<td>Not active</td>
</tr>
</tbody></table>

This will give you the following results like this (try dragging the rows):

I’ve had success with this with the most complicated tables with embeded forms, complex CSS styling and 100+ rows without problems. The plugin includes various settings to assign different classes when dragging to get a user friendly feel.

Now you probably wondering how you can now get this ordering information back to the web sever to save it in the database. Database storage is simple, use a attribute storing a int and simply update the table in the order which they are received. It has a call back function called serialize(). This is an array with containing the id’s of the table rows in the new order in the table. Just loop these values update the table.

This code uses simple table with some CSS styling and POST an array back to a web sever with the new order.

$(document).ready(function() {
	$('#mytable2').tableDnD({
                onDragClass: "dragrow",
		onDrop: function(table, row) {
                // get the serialized data for transport
		serial = $.tableDnD.serialize();
                       // use jQuery ajax function to send information
			$.ajax({
				type: "POST",
				url: "inc/product_controller_ajax.php",
				data: serial,
			});
		}
	});
});

#mytable2 {
border: 2px solid black;
border-collapse: collapse;
width: 50%;
}
.row1 {
background-color: #d8dff4;
}
.row2 {
background-color: #f7e8e9;
}
.dragrow {
background-color: #a70707;
color: #ffffff;
}

Now at the sever side all you have to do is loop through the value sent via ajax. I have used POST in this example. The name of the value is the ID of the table, so for example a PHP solution for this is as follows:

1
2
3
4
5

<?php
    foreach($_POST['mytable2'] as $line){
       echo $line; // product_2, product_2... etc in new order
    }
?>

Links

Table Drag and Drop Web site

Download Table Drag and Drop (Local copy version 0.4)

jQuery (required)