A lot of people (we too) just saved the pictures via Photoshop and “Save for Web”. But unfortunately this compression is not very good. You can save up to further 40-70% of the size.

How can you do that? With two very simple and free applications: ImageAlpha for PNG images only and ImageOptim for PNG, animated GIF and JPG. You can download it directly from the creators websites where you also can find a documentation.

Example

Here is an example of the compression rates on one of our simple graphics:

Compression on PowerHour.at

As I said at the beginning, we used it now for PowerHour.at. Our (few) images were pretty good compressed but we also were able to optimize them even more. At the table below you can find some examples of our comparing results.

XAML Code

In our XAML-File we added a CheckBox that defines wether your app should refresh data automatically or not and a Save-Button:

<button name="btnSave"></button>

Load current settings when page is loaded

In the next step we load the current setting from the storage and set the state of the CheckBox.

public SettingsPage()
{
   // Get the StorageData (Dictionary)
   IsolatedStorageSettings userSettings = IsolatedStorageSettings.ApplicationSettings;
   bool bAutoRefresh = true;
   if (!userSettings.TryGetValue("settings_AutoRefresh", out bAutoRefresh))
       bAutoRefresh = true;
   this.cbAutoRefresh.IsChecked = bAutoRefresh;
}

Save current settings

Finally we save the setting when the user taps on the Save-Button:

private void btnSave_Click(object sender, RoutedEventArgs e)
{
   //Save settings in the storage
   if (!userSettings.Contains("settings_AutoRefresh"))
       userSettings.Add("settings_AutoRefresh", this.cbAutoRefresh.IsChecked);
   else
       userSettings["settings_AutoRefresh"] = this.cbAutoRefresh.IsChecked;
}

More information: http://msdn.microsoft.com/de-de/library/system.io.isolatedstorage.isolatedstoragesettings(v=VS.95).aspx

using Microsoft.Phone.Net.NetworkInformation;
 
public static class Availability
{
    public static bool HasInternetConection
    {
        get
        {
            return (NetworkInterface.NetworkInterfaceType != NetworkInterfaceType.None);
        }
    }
}

We created a static class and added a static property that checks whether internet connection is available.

To translate the page with gettext it is necessary to install Poedit (Download here: http://www.poedit.net/download.php)

After successfully downloading and installing Poedit you will need to make some changes to make it work with Zend Framework.

1. Open Poedit and go to Poedit > Preferences
2. Choose the tab “Parsers“
3. Select “PHP” and click “edit“
4. Extend the textbox for extensions by “.phtml” (see Screenshot)
5. Extend the textbox parser command by “-L php” (see Screenshot)
6. Save settings

In the next step you need create an instance of Zend_Translate in the bootstrap process as follows to your bootstrap.php:

function _initTranslation()
{
    // Define the path where the language files are
    $langPath = '/Users/yourname/your/zend/workspace/yourapplication/languages/';
 
    // Create an instance of Zend's gettext adapter
    $translate = new Zend_Translate_Adapter_Gettext($langPath . 'powerhour-en.mo', 'en');
    // Set the location to 'en' just to check wheter the english translation is working
    $translate->setLocale('en');
 
    // Set this Translation as global translation for the view helper
    Zend_Registry::set('Zend_Translate', $translate);
}

After setting all necessary preferences in the bootstrap process we can now make use of Zend’s ViewHelper for translation as follows:

1. Open any view with text you want to translate
2. Wrap any piece of text with <?php echo $this->translate(""); ?>
3. e.g.

   <strong>"Wohin"</strong>

   will from now on be

Our Zend application is now ready to be translated. To do the translation open Poedit click File > New catalog and follow this steps:

1. Enter some information about your project and your translation

2. Enter the path to your project on your computer, so that Poedit knows where to look for your files to translate.

3. Next we need to add the keywords for which Poedit has to look to find the phrases to translate

4. Now choose Catalog > Update from sources. That should show a result like this:

5. Last but not least save the files to e.g. /Users/yourname/your/zend/workspace/yourapplication/languages
(in the case of the example above the filename is powerhour-en.po and powerhour-en.mo)

1. Add query parameter to liked/shared URL

One way is to simply change the URL of your page by adding a URL query parameter e.g. ?v=1
This means you’ve got to share http://www.mypage.com/fbapp/?v=1 instead of http://www.mypage.com/fbapp/

2. Use Facebook URL Linter (now called debugger)

Facebook offers the possibility to display the values it extracts from your page. This values are used in the timeline when a friend likes or shares your page. Facebook seems to refresh the cache if you submit your page’s URL to the debugger.

This is what a link looks like in Facebook’s debugger:

And this is what it looks like in your newsfeed:

// Remove Google Map Divs - there is only one allowed (= ID)
$('.gMaps').remove();
 
// Add a new Google Map Div at the active page
$('<div id="divGoogleMap" class="gMaps removeMarginTop">loading Map...</div>').insertBefore('.ui-page-active .googleMapFunctions');
 
// Initialize the Google Map with a marker
map = PowerHour.GoogleMap.initializeWithMarker(	"divGoogleMap",	locationMarker, 16);

This code has to be executed on the same site you want to display your Google Map and of course before you initialize the Google Map. Of course you need to include the Google Map javascript API files.
And now we can load page after page and the Map is shown on the right (and active) page.

$.getScript('/minify/?g=countdown', function()
{	
	var similarLocationsVisible = false;
	var userAddress = PowerHour.User.GetGeolocation().lat() + ',' + PowerHour.User.GetGeolocation().lng();
 
	var locationLatLng = new GLatLng(<?php echo $this->locationData->positionX.",".$this->locationData->positionY; ?>);
 
	var map;
        // Add a new Google Map Div at the active page
	$('<div id="divGoogleMap" class="gMaps removeMarginTop">loading Map...</div>').insertBefore('.ui-page-active .googleMapFunctions');
 
	map = PowerHour.GoogleMap.initializeWithMarker(	"divGoogleMap", locationMarker, 16);
        // and so on...
});

And now our Google Map loaded without any problems. STOP. There was another problem. It just worked fine for the first time, if we loaded another page, with other data and a new map, it did not worked.
Why? You are asking. Yeah, we needed a bit of time to realize that too. But in fact is really logic. The Google Map is bond to a div with an unique ID. So there is the problem. If we open one page after another, all of these pages have this ID and stay in our HTML-DOM. So we needed to handle this…
I put that solution in a new blog entry, because I think this is another problem which should be answered on its own. Click HERE to read the solution.

Hence we created a kind of boilerplate for TinyMCE plugin development you can download here:

>> DOWNLOAD TinyMCE plugin boilerplate <<

To register your plugin to TinyMCE you need to create a folder in tiny_mce/plugins/ for your plugin and copy the boilerplates content to that folder. After modifying your plugin’s files you can add your plugin to your editor by adding your plugin in advanced mode to the init method.
For example:

tinyMCE.init({
	mode : "textareas",
	theme : "advanced",
	plugins : "example",
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough",
	theme_advanced_buttons2 : "justifyleft,justifycenter,justifyright,justifyfull,|,example"
});

$(document).bind('mobileinit', function()
{
    $('.swipePage.ui-page-active').live('swipeleft', function() 
    {
        $.mobile.changePage('/url/to/your/website?page=2);
    });
});

Include this few javascript lines of code into your mobile jQuery Website. We bind the swipe Event to the active page with the class “swipePage” (because not all of our sub sites need to scroll).
If the event is triggered you just have to load the new page withe the changePage method from the jQuery Mobile framework. For a productive usage of this, the url may be dynamic and not hard coded like in our example.
A swipe able page would look something like that:

<div class="swipePage" data-role="page" data-theme="b">
    // other page objects
</div>

Of course you can also use other events to trigger the loading of a new site. For example if you would like to scroll back to the last page, you can use the “swiperight” event, so the user can switch between both pages, just with a simple swipe on the smartphone display.

A detailled documentation of the events in jQuery Mobile you can find here: http://jquerymobile.com/demos/1.0rc2/docs/api/events.html

private void txtTelephone_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.Call(this.ViewModel.Telephone);
}

In our example the phone number comes from our view model, but of course you can take the value directly from your text field.

private void Call(string number)
{
    PhoneCallTask t = new PhoneCallTask();
    t.PhoneNumber = number;
    t.DisplayName = this.ViewModel.Name;
    t.Show();
}