Web Development Blog » Tutorials

Embed a YouTube video iframe in a phonegap app

eisabai — Tue, 24 Jan 2012 08:29:05 +0000

This tutorial will teach you how to embed a YouTube video iframe in a phonegap app. In this tutorial, I am using phonegap version 1.2.0. Youtube will automatically convert the flash video into HTML5 video tag so you don’t have to worry about encoding the video.

HTML:

Go to YouTube and get embed code for the video that you wish to include into your phonegap app. Note that not all YouTube videos can be played from a phonegap app due to restrictions placed in the videos.



	
		YouTube video

Changes to PhoneGap.plist

Change/add the following values in PhoneGap.plist file of your app.

MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
          *.youtube.com
          *.ytimg.com

And that’s it! You should now be able to run the app on Simulator or an iOS device and be able to play the youtube video using the default video player that comes with the device (for example, QuickTime player for iPhone and iPad).

Read Embed a YouTube video iframe in a phonegap app on Web Development Blog!

Creating a Contact Form in jQuery Mobile and PHP

eisabai — Wed, 29 Jun 2011 06:39:11 +0000

Here is a step-by-step tutorial on how to create a contact form in jQuery Mobile. I have also included complete php source code that can be used as a web service to send emails from your server.

1. Create a folder structure
The first thing you need to do is create a folder structure where all your files will live. My folder structure is as follows:

- www
-- api
--- send.php
-- js
--- contact.js
-- css
--- contact.css
-- index.html

2. Copy and paste the following boilerplate template
This will go into index.html file that you’ve created. Note that we are including the Javascript and CSS files from the jQuery Mobile server. You can also download the latest version of jQuery Mobile from the website and include the local copy.



	
	Contact Us
	
	
	
	

 



	
		Contact Us
	


	
		
	


	
		Source code by Web Development Blog.  Check out tip & resources for Web Developers.

3. Add HTML form in the content area
Add the following code into

		
			Thank you.  Your message has been sent.  We will get back to you as soon as we can.
		
		
			* indicates Manadatory Field
			
				First Name*:
				
			
			
				Last Name:
				
			
			
				Email Address*:
				
			
			
				Mobile Number:
				
			
			
				State:*
					
			
			
				Message*:
				
			
			send feedback

4. Create a web service in PHP to send email
We have a folder called api and we will create a new file called send.php in the api folder. You will need to change the $recipient variable.

rn"; 

	$ip = $_SERVER['REMOTE_ADDR'];
	$httpref = $_SERVER['HTTP_REFERER'];
	$httpagent = $_SERVER['HTTP_USER_AGENT'];
	$today = date("F j, Y, g:i a");    

	$recipient = 'YOUREMAILADDRESS@DOMAIN.COM';
	$subject = 'Contact Form';
	$mailbody = "
First Name: $firstname
Last Name: $surname
Email: $email
Mobile Phone: $mobilephone
State: $state
Message: $message

IP: $ip
Browser info: $httpagent
Referral: $httpref
Sent: $today
";
	$result = 'success';

	if (mail($recipient, $subject, $mailbody, $header)) {
		echo json_encode($result);
	}
}
?>

5. Add Javascript code to handle form onsubmit
Create a file called contact.js with the following content and include it in your HTML file.

$('#send-feedback').live("click", function() {
	var url = 'api/send.php';
	var error = 0;
	var $contactpage = $(this).closest('.ui-page');
	var $contactform = $(this).closest('.contact-form');
	$('.required', $contactform).each(function (i) {
        if ($(this).val() === '') {
			error++;
        }
	}); // each
	if (error > 0) {
			alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');
	} else {
		var firstname = $contactform.find('input[name="firstname"]').val();
		var surname = $contactform.find('input[name="surname"]').val();
		var state = $contactform.find('select[name="state"]').val();
		var mobilephone = $contactform.find('input[name="mobilephone"]').val();
		var email = $contactform.find('input[name="email"]').val();
		var message = $contactform.find('textarea[name="message"]').val();	

		//submit the form
		$.ajax({
			type: "GET",
			url: url,
			data: {firstname:firstname, surname:surname, state: state, mobilephone: mobilephone, email: email, message: message},
            success: function (data) {
				if (data == 'success') {
					// show thank you
					$contactpage.find('.contact-thankyou').show();
					$contactpage.find('.contact-form').hide();
				}  else {
					alert('Unable to send your message. Please try again.');
				}
			}
		}); //$.ajax

	}
	return false;
});

After completing all the above steps, you will have a fully functional contact form built using jQuery Mobile, HTML5, and PHP.

Screenshot of Contact Form in jQuery Mobile

Read Creating a Contact Form in jQuery Mobile and PHP on Web Development Blog!

How to ‘Post on Facebook Wall’ on iPhone and Android using PhoneGap plugins

eisabai — Sat, 25 Jun 2011 01:45:51 +0000

For iPhone / iPad (iOS)

Prerequsites
- Install ChildBrowser Phonegap plugin
- Copy FBConnectExample/FBConnect.js into your www folder and include it in your HTML file
- Read and follow the instructions from How to post to the Facebook wall in an iPhone app with phonegap, FaceBook Connect and ChildBrother plugin by MosaCrea

The Javascript(jQuery) code:

$('#share-facebook').live("touchstart touchend", function() {
	var url = $(this).attr("rel");
	try {
		shareonfacebook(" likes Web Development Blog by Ei Sabai.", "http://eisabainyo.net/weblog/wp-content/uploads/2010/11/profile-small.gif", url);
	}
	catch(err) {
		console.log(err);
	}
	return false;
});

function shareonfacebook(text, image, url) {
	var client_id = "xxxxxxxxxxxxx"; // Your Facebook Client ID
	var redir_url = "http://www.facebook.com/connect/login_success.html";

	if (typeof fbPlugin === 'undefined') {
		fbPlugin = FBConnect.install();
	}
	fbPlugin.connect(client_id, redir_url, "touch");
    fbPlugin.onConnect = function() {
	    window.plugins.fbConnect.postFBWall(text, url, image, function() {
			navigator.notification.alert(
				'Thank you for sharing on Facebook.',
				function() {},
				'Thank you',
				'OK'
			);
		});
	};
}

For Android

Prerequsites
- Install Facebook for Android Phonegap plugin
- Copy facebook.js into your www folder and include it in your HTML file

The Javascript(jQuery) code:

$('#share-facebook').live("touchstart touchend", function() {
	var url = $(this).attr("rel");
	try {
		shareonfacebook(" likes Web Development Blog by Ei Sabai.", "http://eisabainyo.net/weblog/wp-content/uploads/2010/11/profile-small.gif", url);
	}
	catch(err) {
		console.log(err);
	}
	return false;
});

function postonfacebook(text, image, url, token) {
	$.ajax({
		   type: 'POST',
		   url: "https://graph.facebook.com/me/feed",
		   data: {
				message: text,
				picture: image,
				link: url,
				access_token: token,
				format: "json"
		   },
		   success: function (data) {
			   navigator.notification.alert(
					'Thank you for sharing on Facebook.',
					function() {},
					'Thank you',
					'OK'
				);
		   },
		   dataType: "json",
		   timeout: 10000
	});
}

function shareonfacebook(text, image, url) {
	var client_id = "xxxxxxxxxxxxx"; // Your Facebook Client ID

	window.plugins.facebook.authorize(client_id, function(res){
		if (res.token !== undefined) {
			postonfacebook(text, image, url, res.token)
		} else {
			// call authorization method
			window.plugins.facebook.getAccess(function(res) {
				if (res.token !== undefined) {
					postonfacebook(text, image, url, res.token)
				}
			});
		}
	});
}

Usage (for both iPhone and Android):

Share on Facebook

Read How to ‘Post on Facebook Wall’ on iPhone and Android using PhoneGap plugins on Web Development Blog!

How to use Google Fonts in your WordPress Theme

eisabai — Mon, 20 Jun 2011 10:39:19 +0000

Using Google Fonts in your WordPress Theme is very easy and it can be completed in 3 simple steps.

1.
Go to Google Web Fonts, browse all the fonts available for use on your website and pick any font you like. For this example, I will be using Droid Sans.

2.
Click on the font name to go to the font page and then click on Use This Font tab and copy and paste the css include into the section in Header (header.php) file of your WordPress Theme.

3.
Edit the Stylesheet (style.css) file of your current WordPress Theme and add the following line of CSS:

SELECTOR { font-family: 'Droid Sans', arial, serif; }

Replace SELECTOR with the correct selector; for example: h1, .title, .post h2, etc.

And that’s it. It is very simple and doesn’t require any font replacement techniques that use Flash or Javascript.

Browser Compatibility of Google Web Fonts API

According to the Official FAQs, the Google Font API is compatible with the following browsers:

Google Chrome: version 4.249.4+
Mozilla Firefox: version: 3.5+
Apple Safari: version 3.1+
Opera: version 10.5+
Microsoft Internet Explorer: version 6+

It also works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod).

Read How to use Google Fonts in your WordPress Theme on Web Development Blog!

How to use hi-res images in web apps for iPhone4

eisabai — Tue, 07 Jun 2011 11:24:32 +0000

If you have been developing websites and web apps for mobile, you may have noticed that the images are not very crisp on iPhone 4. The Retina display on iPhone 4 is the sharpest, most vibrant, highest-resolution phone screen ever but you need to know how to utilise it. The images you use on the websites need to be high resolution (at least 2 times bigger than the normal size) in order for them to look sharp on iPhone 4. The good news is, it is possible to use hi-res images in web apps / websites for iPhone4 without using any javascript.

For images that are displayed via tags:

Save the image in x2 resolution. For example, if your logo is 50×50 pixels, make sure it is saved as 100×100 pixels (Resolution: 144 in Photoshop)

And in your HTML source code, make sure to specify height and width attributes for the tag like below:

For images that are displayed as background images via CSS:

This is a bit trickier, because you don’t want to use hi-res images for iPhone 3 or Android or other mobile browsers. To target just iPhone 4, add the following line of code in the section of your page right after the normal CSS include.

And for every image, you need to save 2 versions – one for the regular view and the other one for the hi-res view. For example, button-signup.jpg and button-signup2x.jpg. The button-signup.jpg will be 50×20 pixels whereas the button-signup2x.jpg will be 100×40 pixels.

In your hires.css file, you will have something like the following:

#signup { background: transparent url(../images/button-signup2x.jpg) 0 0 no-repeat; background-size: 50px 20px; }

Note that the background-size is the size of the image in regular view. This will allow the background image to be shrunk so it fits within the specified element. The background-size property is a CSS3 property and it lets you specify the size of background images.

And in your style.css, you will have:

#signup { background: transparent url(../images/button-signup.jpg) 0 0 no-repeat; }

And that’s all!

Read How to use hi-res images in web apps for iPhone4 on Web Development Blog!

Top 10 jQuery Mobile Code Snippets that you need to know

eisabai — Mon, 31 Jan 2011 03:48:57 +0000

jQuery Mobile is a framework for mobile web apps and mobile websites with an aim to provide a unified user interface system across many mobile device platforms such iPhone, BlackBerry, Android and Windows Mobile. The framework is built on top of one of the most popular Javascript frameworks, jQuery.

Followings are some of the most useful code snippets that I’ve used in my recent web app developed using jQuery Mobile framework.

1. Disable truncation for list items and buttons

If your list item or button has a long text, it will be truncated automatically by jQuery Mobile. To disable this truncation, add “white-space: normal;” to the CSS selector in question.

For example, to disable truncation for buttons:

.ui-btn-text {
white-space: normal;
}

To disable truncation for list descriptions:

.ui-li-desc {
white-space: normal;
}

To enable truncation, set it to “white-space: nowrap;“.

2. Display a random background image on page load

jQuery Mobile has a number of page initialization events that you can use to trigger certain methods on page load. The following CSS + Javascript can be used to display a random background image every time a page is loaded.

CSS

.my-page  { background: transparent url(../images/bg.jpg) 0 0 no-repeat; }

.my-page.bg1 { background: transparent url(../images/bg-1.jpg) 0 0 no-repeat; }

.my-page.bg2 { background: transparent url(../images/bg-2.jpg) 0 0 no-repeat; }

.my-page.bg3 { background: transparent url(../images/bg-3.jpg) 0 0 no-repeat; }

Javascript

$('.my-page').live("pagecreate", function() {
	var randombg = Math.floor(Math.random()*4); // 0 to 3
	$('.my-page').removeClass().addClass('bg' + randombg);
});

3. Disable a button action

To disable a button action (for eg: from opening a page), add the following Javascript.

$('#home-button').button("disable");

And to re-enable it:

$('#home-button').button("enable");

4. Disable loading pop-up message

I find the loading pop-up message a bit annoying because it gets triggered everytime you load a different page. To disable this: add the following line of code into your JS file.

$.mobile.pageLoading(true);

By default, it is enabled like so:

$.mobile.pageLoading();

5. Create a custom theme

jQuery Mobile framework comes with 5 themes – Theme A, Theme B, Theme C, Theme D and Theme E. But you can easily create a new theme for your web app.

The steps to create a new theme:
1. Copy CSS for any theme from jQuery Mobile CSS file and paste it into your own CSS file.
2. Give your theme a name and rename the CSS selectors appropriately. Your theme name can be any alphabet character (a to z). So for example, if you copied Theme C, and you want to call your theme Theme Z, rename .ui-btn-up-c to .ui-btn-up-z, .ui-body-c to .ui-body-z and so on.
3. Change colors and styles of your custom theme
4. To apply your custom theme z to any element, just set the data-theme attribute to z. For example:

6. Use a custom font

There are a few font-replacement methods available such as cufon, sIFR, FLIR, @font-face and Google Fonts API. When building a web app using jQuery Mobile, I found that @font-face method is the easiest method to work with and the performance is quite satisfactory. If you are interested in @font-face, here is a helpful tutorial with a demo on how to work with @font-face method.

7. Create an image-only button with no text

Sometimes, you may not want to have any text for your button but still use the rest of the features that comes with a button element. This is usually the case with a home button or an info button. To hide any text associated with the button, set data-iconpos attribute to “notext”. For example:

Home

8. Open a link without using AJAX with page transitions

To open a link without using AJAX with page transitions (ie: reloading the full page the old-school way), set rel attribute to “external”.

Home

9. Remove an arrow from a list item

By default, jQuery Mobile framework adds an arrow next to every list item. To disable this, set data-icon attribute to “false” on the list item that you’d like the arrow to be removed.

Contact Us

10. Set background color of a page

This may sound simple but it took me a few minutes to figure out how to apply a background color to a page without having it overwritten by jQuery Mobile CSS. Normally, you’d set a background color to body element but if you are using jQuery Mobile framework, you need to set it to ui-page class.

.ui-page {
background: #eee;
}

Recommended Books

jQuery Mobile

jQuery Mobile First Look

The following two books on HTML5 and jQuery will also help you understand and work with jQuery mobile framework better as jQuery mobile is based on jQuery and uses HTML5.

HTML5: Up and Running

jQuery: Novice to Ninja

Read Top 10 jQuery Mobile Code Snippets that you need to know on Web Development Blog!

How to customise your Facebook Fan Page with FBML

eisabai — Mon, 29 Nov 2010 06:16:33 +0000

In this tutorial, I will show you how you can customise your Facebook Fan page quickly and easily using the powerful Facebook Markup Language. If you haven’t already got a Facebook Fan Page for your brand (be it website, blog or company), you might want to create one now. Check out our Webmaster Resources page on Facebook for an example.

1. Add a new custom tab

Most facebook fan pages have a custom tab and it is one of the most important assets that a facebook fan page should have. Follow the steps below to add a new tab to your Facebook Fan page:

1. Add Static FBML application to your fan page by clicking on Add to my Page link on the left.

2. Once you’ve added the Static FBML application, go to your Fan page and click on Edit Page on the left.

3. When you are on the Edit screen of your Fan page, click on Applications link on the left. You will see a list of applications that you’ve added/were added by default.

4. Look for FBML application from the list, and click on Go to application link.

5. You will be taken to Edit FBML page where you can change Box/Tab title and add content as you wish.

6. If you wish to add more than one tab on your Fan page, click on “Add another FBML box” link at the bottom of “Edit FBML” page and repeat step 2, 3, 4 and 5 to edit the newly created tab.

You can add HTML, plain text or FBML (Facebook Markup Language) in FBML box provided. You can also add the HTML code from readymade Facebook templates here.

2. Make your custom tab the default tab

To make your custom tab the default tab (ie: the tab to be displayed by default), go to your page and click on Wall tab, and click on “Settings” link under the status update area. You can then set Default Landing Page for everyone else by choosing your custom tab name from the drop down list. As the name suggests, the Default Landing Page is only for everyone else, and not for yourself, the admin of the page.

3. Display special content for people who’ve liked your page aka your fans

In order to do this, you will need to embed FBML (Facebook Markup Language) into your custom tab content. fb:visible-to-connection can be used to display exclusive content if the viewer is a friend of that user or is a fan of that Facebook Page.



  
	Hey there, fans! Please check back in a week to see if you have won our fabulous prize!

  

	
	Hey there!   Like us now for your chance to win!

4. Display content based on certain criteria

Sometimes, you may want to display restricted content, say, a location-specific content to those who are from certain countries. In that case, you can use fb:restricted-to tag. A list of ISO county codes can be found on iso.org website.

For example, if you wish to display special content to visitors from Australia, the code would be:


	Good day, mate!

5. Add a google analytics to track your Facebook page

You can add google analytics with one line of code rather than having to copy and paste entire javascript snippet provided by google by using fb:google-analytics FBML tag.

6. Add social apps such as Twitter, Linked In and Slideshare

There are quite a few social apps (or any other app for that matter) that you can add to your Facebook page. Just go to Apps Directory, view the app page and click on “Add to my Page” link on the left to add an app to your page. If you need to configure an app after adding it to your Facebook page, go to your Facebook page, click on Edit Page, click on Applications, and look for the app that you wish to configure from the list.

7. Embed a YouTube video

To embed a YouTube video into your custom tab, first, you need to get the ID of the YouTube video. In this case, it is dxzDU3tTzGA (because the url is http://www.youtube.com/watch?v=dxzDU3tTzGA) and add the following FBML code.

* Remember to replace dxzDU3tTzGA with the ID of your YouTube video.

8. Display a random text

Sometimes, you might want to display a random text to keep things fresh. In that case, you can use fb:random tag. The optional “weight” attribute allows you to control the frequency of an option.


	A: This text appears twice as often as B.
	B: This text appears half as often as A.

9. Display a random image

As with displaying a random text, displaying a random image is easily achieved by using fb:random tag.

You can insert any piece of HTML code between tag so you can use it for so many other things – random links, videos, audios, and so on.

10. Bonus! Display different message for different browser

This FBML tag is probably rarely used but you can display different messsage or image depending on the browser that the user is using. The FBML in question is known as fb:user-agent.

For example, if you wish to display a special message for IE 6 users, you can do the following:


	Hi!  It appears that you're currently using Internet Explorer 6.  Please upgrade your browser.

Read How to customise your Facebook Fan Page with FBML on Web Development Blog!

Five Important Steps into iPhone App Development for Beginners

eisabai — Mon, 08 Nov 2010 01:10:04 +0000

So I have released two native iPhone apps in the last 2 months. The first iPhone app is called Salary Calculator, and it was released on 06 October 2010. The app was submitted to iTunes Connect on 28 September 2010.

The second app was a niche app for Property Investors in Australia, called Property Cash Flow Calculator. It was developed in just a few hours on one weekend, submitted to iTunes Connect on 24 October 2010 and was made available on App Store on 03 November 2010.

Many people have asked me if iPhone app development is hard or if it’s worth the trouble. My answer is while it is not super easy, it is not impossible if you’re willing to learn a new language and syntax. It also helps if you have a goal that you want to achieve (for example, an app in mind that you wish to develop), rather than merly reading tutorials or books on iPhone app development. I have created a few iPhone web apps for my Web Development company and therefore my main goal was to convert some of them into native apps.

Here are five important steps that I took before developing my first (and second) iPhone apps.

1. Buy a mac. This is one of the most expensive investments one has to make when stepping into iPhone app development. I got myself a Macbook Pro but a MacBook Air or a Mac Mini would work just fine too. You need a mac because iPhone software development kit (SDK) only works on the Apple platform.

2. Buy an iPhone. Although it is not completely necessary, it is recommended to have an iPhone before developing an iPhone app. Even though the iPhone SDK comes with an iPhone simulator, using an app on a real iPhone give you a much better understanding and experience of how an app works. You can also download existing apps that are available on App Store for an inspiration. If you don’t mind a second hand, you can get a second hand iPhone handset from Amazon or ebay for half the price.

3. Download and Install iPhone SDK. iPhone SDK comes with XCode, iPhone Simulator and a suite of additional tools for developing apps for iPhone, iPad, and iPod touch. According to Apple, XCode is the hub of your development experience and I tend to agree with that. XCode is simply an IDE just like Eclipse or Dreamweaver but it is designed for app development on Mac. You need XCode in order to develop, compile, test, release and submit your iPhone app. Note that SDK can be downloaded for free of charge. You only need to pay for the Developer Program (USD99/year) when you wish to test the app you have written on a real iPhone (instead of the iPhone Simulator) and submit it to the App Store.

4. Read and Learn. Now that you’ve got everything set up and ready for your first iPhone app development, start reading and learning all about how to develop an iPhone app. This is a very important step because the learning curve can be quite steep for those who do not have C / C++ programming experience. It is also cruicial to know common jargons used in iPhone app development, such as Interface Builder, MVC (model, view, controller), xib, nib, delegates, etc. The best place to find all the resources to learn is 100 Free Courses & Tutorials for Aspiring iPhone App Developers. For those wanting my recommendation on which documentation/tutorial to read first, MIT has a course on Introduction to iPhone Development and the course outlines are available online for free.

5. Replicate a sample application. The easiest and quickest way to learn the syntax of iPhone Programming Language (Objective C) is to replicate and rewrite a sample application (Your First iOS Application) from the iOS Reference Library. You can also follow this tutorial which teaches you the same thing step-by-step.

While I am no expert on iPhone app development and I have not learnt or understood everything there is to learn, I am happy with my progress. The next app that I’d like to develop is something to do with databases.

Salary Calculator app was featured as one of the hottest apps under Utilities category in the App Store for 2 weeks now, and it was also featured in New & Noteworthy section a week after it was released. I am hoping the same result for Property Cash Flow Calculator. Wish me luck and happy iPhone app developing!

Read Five Important Steps into iPhone App Development for Beginners on Web Development Blog!

How to code an HTML Email Newsletter

eisabai — Mon, 31 May 2010 06:19:58 +0000

In this step-by-step tutorial, I’m going to show you exactly how to code an HTML email; be it an HTML Email Signature or HTML Email Newsletter.

1. Changing the background color

2. Setting a fixed width and background color for the content area

3. Changing the font size, style and color of the content area

4. Setting a different font, color and style for headings

Latest News from the Web Development Blog

5. Inserting a line between two blocks of text

	
		
			
				First block of text.
			
		
		
			
				Second block of text.

6. Inserting and floating an image to the left

	
		
			
				
			
			
				Text next to the image
			
		
		
			
				Copyright text

7. Aligning text to right (or left or center)

	
		
			
				Some text goes here
				Read more

8. Changing a link color

Read more

9. Adding a border around the content area

10. Opening a link in a new window

Go to Google

Putting it altogether

Latest News from the Web Development Blog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt nisl et felis sodales faucibus. In hac habitasse platea dictumst. Sed tincidunt egestas velit mollis faucibus. Aliquam feugiat, neque nec porta accumsan, odio nulla laoreet risus, ut vestibulum lacus velit eget mi. Aliquam vehicula magna sed leo lobortis et luctus magna venenatis. Nunc et massa ipsum. In tristique, elit hendrerit tincidunt consectetur, diam purus tempor ante, eget scelerisque velit est vitae lorem. Nullam vulputate blandit dui et tempor. Curabitur quam lectus, suscipit non placerat a, consectetur vel velit.
Vestibulum egestas ipsum quis elit pulvinar ullamcorper. Vestibulum ac neque sed neque consequat ornare eu et justo. Phasellus pulvinar vestibulum nisl, ut tempus dolor commodo at. Morbi ultricies nisl vel massa accumsan tempor. Donec quam nibh, euismod vitae vestibulum ac, ullamcorper non eros. Integer quis sapien ac enim rhoncus auctor. Nulla facilisi. Vivamus et varius massa. Integer aliquam ultricies risus nec vulputate. Donec porta viverra magna, a suscipit arcu porta non.
Read more

Praesent ut purus sit amet elit tincidunt laoreet a sed mauris. Integer a lacinia augue. Donec hendrerit sapien et lorem tincidunt a luctus purus vehicula. Cras magna diam, auctor sit amet pretium in, pretium a odio. Proin sed laoreet lorem. Mauris tortor diam, tempus sit amet lacinia in, egestas eu lectus. Vivamus aliquet hendrerit tellus sit amet pretium. Praesent dictum libero pretium magna pretium congue. Pellentesque consequat est a tortor tincidunt placerat in a ante. Sed non elit enim, vitae scelerisque ipsum. Integer fringilla, massa in ultrices bibendum, orci neque luctus arcu, in pulvinar elit risus eu nunc. Etiam dignissim malesuada consequat. Donec eget magna risus, eu vehicula ante. Quisque adipiscing placerat tincidunt. Aliquam ultrices vehicula velit, vel dignissim sem feugiat malesuada. Donec magna nisi, pretium at ullamcorper ultrices, sodales eu odio. Nulla facilisi. Curabitur hendrerit dictum rhoncus. Praesent bibendum dapibus ligula, ut placerat dolor vulputate vel.

Email Newsletter Templates

If you are looking for professional email newsletter designs, ThemeForest is the best place to buy email newsletter templates because each template package comes with a complete HTML code and layered PSD file (and sometimes multiple color variations). Our favourites are:

iNewsletter

Platnum

Read How to code an HTML Email Newsletter on Web Development Blog!

Designing and Optimising Websites for iPad

eisabai — Sat, 29 May 2010 14:22:25 +0000

iPad was released a month ago, and is made available in Australia a few days ago, but already, I am seeing a lot of big name companies and brands trying to optimise thier websites for iPad. While I have yet to optimise a website for iPad, I have put together some notes about designing and optimising a website for iPad to help us get started soon.

Screen Resolution
1024×768 pixel resolution (9.7-inch (diagonal))
This is as big as a normal computer screen. According to the Analytics stats for this Web Development Blog, 10.47% of the total visitors have 1024×768 pixel resolution.

User Agent String

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10
(KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

This is useful if you have a device detection script on your server that redirects mobile devices to a different website. For example, since iPad doesn’t support Flash, if you have a flash website, it is a good idea to redirect iPad visitors to the HTML version of the website.

CSS for iPad

As with optimising websites for iPhone, you can specify a CSS file just for iPad devices. You can also have different CSS for Portrait and Landscape orientations without using Javascript. This is useful if you want to hide certain elements (for example, sidebar) on Portrait orientation.

HTML 5 and CSS3
iPad supports HTML 5 and CSS3 so you can go crazy with box-shadows, text-shadows, border-radius, multiple backgrounds, video, canvas and geolocation features on your iPad friendly website.

JavaScript
As with iPhone, Javascript is supported on iPad. This will enable your iPad friendly website to have web 2.0 features, AJAX, dynamic content, and animation effects. If you are looking for a good Javascript Framework to use, check out jQTouch which is a jQuery plugin for mobile web development.

Flash
Neither iPad nor iPhone supports Flash. And Steve Jobs has made it pretty clear that he has no intention of supporting Flash in the near future.

Viewport

Use a constant width for viewport rather than a fixed pixel width. Similarly, when it comes to layout design, consider Fluid width rather than Fixed width design.

Touch not click
This is something to bear in mind when designing websites for iPad and iPhone. They are both touch devices and not point and click, so make sure there is enough padding between links (eg: Navigation items) and buttons are large enough to be ~~clicked~~ touched on.

iPad Friendly Website ≠ Mobile Friendly Website
With iPhone, you can simply redirect to your existing Mobile version of the website for iPhone users, but you can’t do the same for iPad. iPad screen resolution is many times bigger than a normal mobile screen, hence, there will be a lot of whitespace when you view a mobile friendly website on an iPad. For this reason, it is sometimes better to serve the same version of the web friendly website to iPad devices rather than redirecting them to the mobile version of the website which is designed for small screens. And according to Apple, Safari on iPad is capable of delivering a “desktop” web experience.

Preview
If you want to check out how your website would look in iPad without an actual iPad device, open this Simulator in Safari browser and type in the address of the website you wish to view in the address bar on the iPad image (not the browser address bar). You can click on the top left corner of the iPad image to switch between Landscape and Portrait mode.

But if you have got a spare $800, you can buy iPad from Amazon Online Store for the real deal.

Inspiration
As always, Apple has a list of iPad ready websites for your inspiration. If you are looking for an iPad friendly WordPress Theme, be sure to check out Mobility Wordpress Theme that provides a touch and slide friendly user interface for iPad viewers.

Read Designing and Optimising Websites for iPad on Web Development Blog!

Web Development Blog » Tutorials

Embed a YouTube video iframe in a phonegap app

Other similiar posts that you might be interested in:

Creating a Contact Form in jQuery Mobile and PHP

Contact Us

Other similiar posts that you might be interested in:

How to ‘Post on Facebook Wall’ on iPhone and Android using PhoneGap plugins

Other similiar posts that you might be interested in:

How to use Google Fonts in your WordPress Theme

Other similiar posts that you might be interested in:

How to use hi-res images in web apps for iPhone4

Other similiar posts that you might be interested in:

Top 10 jQuery Mobile Code Snippets that you need to know

Recommended Books

Other similiar posts that you might be interested in:

How to customise your Facebook Fan Page with FBML

Other similiar posts that you might be interested in:

Five Important Steps into iPhone App Development for Beginners

Other similiar posts that you might be interested in:

How to code an HTML Email Newsletter

Other similiar posts that you might be interested in:

Designing and Optimising Websites for iPad

Other similiar posts that you might be interested in: