Image Image Image Image Image

© Copyright 2012 ABCoder | Email | RSS

Scroll to Top

To Top

fast

28

Feb
2010

In Google

By abcoder

Google proposing affordable ultra-fast broadband network in US

On 28, Feb 2010 | In Google | By abcoder

Though Ultra-fast broadband networks are available in some selected sector in USA, but they aren’t yet available for mass people. Google Inc. is now planning to build an affordable ultra-fast broadband network to connect mass people in USA through the Internet. It will also intend to provide a platform for outside developers. Beside, Google will let Internet service providers sell their own services over its network.

Google said its testbed fiber-optic network will deliver speeds of 1 gigabit per second which would be roughly 50 to 300 times faster than most U.S. homes cable and fiber-optic networks to the Internet today.
It will enable consumers to download a high-definition, full-length feature film in less than five minutes. Google hope this broadband connection will help students to collaborate with classmates around the world while watching live 3D video of a university lecture.

Google’s ultra-fast broadband service is now prepared to sell access directly to consumers.

Tags | , , , , , ,

19

Sep
2009

In plugins

By abcoder

WPtouch iPhone Theme for ABCoder

On 19, Sep 2009 | In plugins | By abcoder

WPtouch iPhone Theme pluginYesterday I logged into the wp admin panel of abcoder and on the dashboard I found link to WPtouch iPhone Theme plugin as the most popular plugin. I got interested and visited the plugin home page. At first look its simplicity attracted me. It seamlessly enables the mobile version of your wordpress blog without any hassle. Unlike other wp plugins’ homepage it has a very professional & clean look (FYI, it’s a free wordpress plugin) and illustration on installing and post installation configurations and FAQs & Documentation. Without any delay I installed it. Everything was fine, it’s time for testing now, but I don’t have an iPhone.

My cellphone is nokia n73, unfortunately this amazing plugin is only for iPhone by default. I browsed the site from my nokia phone and it’s still the same full version of the site, not the mobile(iPhone) version which sounds logical.
Hmmm… so it’s time to get dirty with some modifications in the source code ;)

One week ago I worked on a restaurant website ilpoggiolohinsdale.com, I used mdetect.js from hand-interactive for mobile phone detection and redirect the visitors to a mobile version of the site. WPtouch plugin detects the borwser/OS using php’s $_SERVER['HTTP_USER_AGENT']. The main file is wptouch.php under root folder of the plugin, on line 360 (may vary for upcoming versions) the browser (OS) detection part is done inside detectAppleMobile function definition.

function detectAppleMobile($query = '') {
	$container = $_SERVER['HTTP_USER_AGENT'];
	// The below prints out the user agent array. Uncomment to see it shown on the page.
	// print_r($container); 
	// Add whatever user agents you want here to the array if you want to make this show on another device.
	// No guarantees it'll look pretty, though!
		$useragents = array(		
		"iphone",  				 // Apple iPhone
		"ipod", 					 // Apple iPod touch
		"aspen", 				 // iPhone simulator
		"dream", 				 // Pre 1.5 Android
		"android", 			 // 1.5+ Android
		"cupcake", 			 // 1.5+ Android
		"blackberry9500",	 // Storm
		"blackberry9530",	 // Storm
		"opera mini", 		 // Experimental
		"webos",				 // Experimental
		"incognito", 			 // Other iPhone browser
		"webmate" 			 // Other iPhone browser
	);
	$devfile =  compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
	$this->applemobile = false;
	foreach ( $useragents as $useragent ) {
		if ( eregi( $useragent, $container ) || file_exists($devfile) ) {
			$this->applemobile = true;
		} 	
	}
}

You see there is no “symbian” in the array. I modified the function and changed the $useragents array. My edited detectAppleMobile function looks like this:

function detectAppleMobile($query = '') {
	$container = $_SERVER['HTTP_USER_AGENT'];
	// The below prints out the user agent array. Uncomment to see it shown on the page.
	// print_r($container); 
	// Add whatever user agents you want here to the array if you want to make this show on another device.
	// No guarantees it'll look pretty, though!
		$useragents = array(		
		"iphone",  				// Apple iPhone
		"ipod", 				// Apple iPod touch
		"aspen", 				// iPhone simulator
		"dream", 				// Pre 1.5 Android
		"android", 			 	// 1.5+ Android
		"cupcake", 			 	// 1.5+ Android
		"blackberry9500",	 		// Storm
		"blackberry9530",	 		// Storm
		"opera mini", 		 	// Experimental
		"webos",				// Experimental
		"incognito", 			// Other iPhone browser
		"webmate", 			// Other iPhone browser
		"playstation",			// Play Station
		"samsung",				// Samsung Mobile
		"wap",				// deviceWap
		"windows ce",			// deviceWinMob
		"wm5 pie",				// enginePie
		"iemobile",				// deviceIeMob
		"symbian",				// deviceSymbian
		"series60",				// deviceS60
		"series70",				// deviceS70
		"series80",				// deviceS80
		"series90",				// deviceS90
		"blackberry",			// deviceBB
		"midp",				// deviceMidp
		"wml",				// deviceWml
		"brew",				// deviceBrew
		"palm",				// devicePalm
		"xiino",				// engineXiino
		"blazer", 				// Old Palm
		"pda",					// devicePda
		"nitro",				// deviceNintendoDs
		//"webkit",				// engineWebKit, DO NOT use this on Google Chrome
		"netfront",				// engineNetfront
		"sonyericsson",			// manuSonyEricsson
		"ericsson",				// ericsson
		"sec-sgh",				// manuSamsung1
		"docomo",				// svcDocomo
		"kddi",				// svcKddi
		"vodafone"				// svcVodafone
	);
	$devfile =  compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
	$this->applemobile = false;
	foreach ( $useragents as $useragent ) {
		if ( eregi( $useragent, $container ) || file_exists($devfile) ) {
			$this->applemobile = true;
		} 	
	}
}

Note that I’ve commented out the “webkit”, cos from Google Chrome the output of $_SERVER['HTTP_USER_AGENT'] is

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/530.5 (KHTML, like Gecko) Chrome/2.0.172.43 Safari/530.5

So you are supposed to see the mobile version from chrome browser!

Now everything is ALMOST perfect from nokia and I’m happy with that :). The home page is only about 30kb. Yeah! Brave New Code has really done a great brave new job. From my nokia n73 some javascript and ajax does not work, from Nokia 5800 it’s perfect, everything works nicely. Haven’t tested it from iPhone, but I’m sure it’s 100% okay from iPhone. I tried to use google adsense for mobile but no luck. May be it’s not supported for publishers from Bangladesh yet.

african people mobile phone

A recent survey shows that the volume of mobile internet users is increasing. Now it’s vital to provide a mobile version of your site whatever your site is about.

Mobile Internet users on the upswing

For wordpress WPtouch is really an ‘out of the box’ plugin to take the blogging platform to a new era. The ajax comment feature is appreciating and a must for mobile browsers to reduce data transfer. It has a different dashboard for configurations, you can play around there, the default setup is well but I check on the WPtouch in exclusive mode, it’ll turn off all other plugins & reduce the load and also check on to show the excerpts on home page. The most important part is your site loads super fast with WPtouch from mobile browsers, here is a comparison:

compare loading time with and without WPtouch iPhone theme

I think they should provide the option for enabling the theme for all mobile phones and not only limited to iPhone & android. The touch enabled browser of Nokia N97, 5800 is same powerful as iPhone touch browser. I hope they’ll think about it and enable the support for other mobile phones as well. Overall this is a very good work and keep it up.
If you have not installed the plugin yet, I’d like to recommend it. You may ask me for support if you need any.

Join testking CISM web development course to learn about PHP and WP plugins and become master using testking 642-975 tutorials and testking HP0-J33 live demos.

Tags | , , , , , , , , , , , , , , , , , , ,

22

Aug
2009

In jQuery

By abcoder

Advanced cycle plugin integration

On 22, Aug 2009 | In jQuery | By abcoder

On my another post I mentioned that cycle is a great jQuery plugin. I use it very often for slideshow. Recently I used it on a project where the slideshow had many(20+) wallpaper sized images. So loading time was a great issue.

The default cycle integration includes all the images during page loading which is okay for small images, but highly affects the page loading time for high resolution images. cycle plugin is highly flexible! I fixed the issue by loading images dynamically one after another at the end of each slide, literally before the beginning of each slide.

Here is how I did it:

<div id="slideshow"><!-- slides will be added here --></div>
var gallery = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg", "images/7.jpg", "images/8.jpg", "images/9.jpg", "images/10.jpg", "images/11.jpg", "images/12.jpg", "images/13.jpg", "images/14.jpg"]; // and so on.. array of images
// Array clone function.
Array.prototype.clone = function () {
    var arr = new Array();
    for (var property in this) {
        arr[property] = typeof(this[property]) == 'object' ? this[property].clone() : this[property];
    }
    return arr;
}
var gal = null; // gal should be global as I'll use it inside onBefore function
$(function () {
    gal = gallery.clone(); // cloning the array is not mandatory, but doing so will keep the main array unchanged.
    $('#slideshow').empty().append('<img src="' + gal.pop() + '" /><img src="' + gal.shift() + '" /><img src="' + gal.shift() + '" />') // adding the last, first and second element of the array to the slideshow div, then start the cycle plugin.
    .cycle({
        startingSlide: 1,
        // this is required (1 is the 2nd slide) as the first slide is the last element of the array. if you use manual next/prev button clicking on #prev will show the first element.
        before: onBefore, // loads the next image at the beginning of each slide. (NOT all at once)
        next: "#next",
        prev: "#prev"
    });
    var totalSlideCount = 1 + gal.length;
    function onBefore(curr, next, opts, fwd){
        // at first addSlide is not defined, so we should return.
	if (!opts.addSlide) return;
	// if all the elements of the array are added no need to add them again!
        if (opts.slideCount == totalSlideCount) return; 
	// shift or pop from slide array
        var nextSlideSrc = fwd ? gal.shift() : gal.pop(); 
	// add next slide 
        opts.addSlide('<img src="' + nextSlideSrc + '" />', fwd == false);
    }
});

In this code above, cloning the array is optional. I used it as I needed the main array for later use. Probably you know if you use the global array reference to a local variable and apply pop()/shift()/push() functions to the local variable, the global one will be affected. cos the local variable is just a reference to the address of the global array variable.

At first the last, 1st and 2nd elements of the array are added to the #slideshow div and the cycle is started from the 2nd slide. Before starting of each slide onBefore function is called. The onBefore function adds new slide to the slideshow and stops when all the array elements are added to the slide.

You may use it for small size images also if you need to improve the page loading duration.

Tags | , , , , , , , , , , , , , , , , ,