Posts tagged iPhone

iPhone orientation change

iPhone web development [Part 2]

0
627 days
by in CSS, Javascript, iPhone

iPhone orientation changeIn part one of my tutorial on iPhone web development, we talked about the basic stuff (Recognizing iPhones or iPods, setting up special HTML and CSS tags... ) we will now move on to the really clever bit: Orientation detection.

For many sites, we may just have the same thing both on portrait and landscape. But sometimes we will want to use that extra space to display our content differently, and here is how.

Orientation detection with CSS:

We can use some smart CSS3 selectors to ensure that some styles only apply to landscape, or to portrait modes:

/* Portrait */
@media screen and (max-width: 320px){
	h1{ font-size:20px; }
}
/* Landscape */
@media screen and (min-width: 321px){
	h1{ font-size:24px; }
}

Remember that for this to work we must use the viewport meta tag I showed you in my previous tutorial
This media query works (According to Apple's documentation) since iPhone OS 1.0, so there shouldn't be any problem with it, Firefox mobile should also support this, so by using max-device-width and min-width we should be able to develop specific CSS for every device without the need of PHP to include only certain style sheets

Orientation detection with JavaScript:

We can easily detect the device orientation by checking the innerWidth. This method will also work for other PDAs and SmartPhones:

var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? "profile" : "landscape";
    document.body.setAttribute("orient", orient);
    window.scrollTo(0, 1);
  }
};
 
iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 500);

This code will add a new attribute (orient) to the body element, which will be either portrait or landscape. All we have to do now is use CSS to filter out whatever orientation we need:
There is another method, which will work only on the iPhone though:

body[orient="landscape"]{
// CSS code here...
}
// ... or ...
body[orient="portrait"]{
// CSS code here...
}

That JavaScript also hides the toolbar by using the scrollTo() function when the orientation changes,

Next release:

On my next release in this series of iPhone web development tutorials, I will get into the really advanced JavaScript API we have for the iPhone (touch detection, gestures... etc) so stay tuned!


 


Hope you found this useful,
Alex

iPhone web development [Part 1]

0
643 days
by in CSS, iPhone

Even if websites look great when seen on iPhones, having an iPhone-specific website improves a lot your site's usability, and in spite of what you may think, it doesn't take that long to develop it, here I will show all the necessary steps to develop a great site for iPhones, and making it look as if it were just another iPhone App.

How to differentiate both versions:

There are several ways of setting up the iPhone version, the most common one is by using a subdomain like m.urbanoalvarez.es, iphone.urbanoalvarez.es... etc

You could also use a subdirectory like urbanoalvarez.es/iphone/ or simply do nothing, and just change the display. This last option is no recommended because it won't allow your users to easily switch between iPhone version and full version when on their phones.

For this example I will go with a subdomain, of the sort iphone.urbanoalvarez.es. The next thing we need is to send iPhone users directly there, here is the PHP code for that:

if(ereg('iPhone',$_SERVER['HTTP_USER_AGENT']) || ereg('iPod',$_SERVER['HTTP_USER_AGENT'])) {
     header('Location: iphone.urbanoalvarez.es');
}

Basically we are searching for iPhone or iPod in the user agent which for the iPhone is "Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3" and if we find that one, or the iPod one, we send them over to the mobile version.

The basic HTML:

iPhone screenshot

iPhone screenshot


For an iPhone version of a website, I think the best idea is to make it look as if our website is just a regular App. So we won't allow Zoom, or horizontal scroll. This part is very easy, as Apple has enabled a meta tag that does just that:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

I don't think there is much need to explain each variable as their names are pretty self-explanatory. This was the only real "iPhone-specific code" we will be using, except for a few CSS tricks I'll show you below.

Now that we have that set up, let's go with the body content, as you may have noticed in iPhone Apps, there is a header bar, with the Website name and/or logo, and usually a "back" navigation button. Then in the center we find a background and the content displayed in nice white boxes with rounded corners. And at the bottom of the screen we see a secondary bar with navigation items, usually the main categories. This is nice, but when using Mobile Safari, that would create a duplicated bar, since Safari has it's one one at the bottom.

So I suggest we keep the top bar for the website name and/or logo, and we put the navigation right below it. With a bit of clever JavaScript we will be able to keep that nav bar always at the top of the screen solving the problem of navigation.

This is a little preview of the HTML structure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<title>iPhone version</title>
</head>
 
<body>
<h1 id="header">My Website</h1>
<div id="wrap">
<h2>About this website:</h2>
<div class="box">
<div class="text">Some text in a nice rounded box</div>
</div>
<h2>Some links:</h2>
<div class="box">
<ul>
<li><a href="#">Element 1</a></li>
<li><a href="#">Element 2</a></li>
<li><a href="#">Element 3</a></li>
<li><a href="#">Element 4</a></li>
<li><a href="#">Element 5</a></li>
</ul></div>
<p align="center">&copy; UrbanoAlvarez.es
</div>
 
</body>
</html>

Here you can see a very simple HTML markup, with all the content inside a wrap, and then inside boxes. To create the effects such as rounded corners, shadows... etc we can make use of Webkit's advanced CSS3 features, which all work on the iPhone luckily!

So let's start styling all of that!

The CSS:

If we want to stay with an iPhone-like design, we will have a top bar with the logo, and maybe a search button, and below that with a light background our content. Each "box" of content will be of white background and with nice rounded corners. This will make our website resemble a lot the look of a real iPhone.

 
<style type="text/css">
<!--
body{
	background:#D5DCE1 url(images/pinstripes-classic.gif);
	margin:0;
	padding:0;
	font: 13px Helvetica;
	-webkit-text-size-adjust: none;
}
h1{
	display:block;
	background:#000000;
	color:#FFFFFF;
	padding:10px;
	margin:0;
}
h2{
	color:#333333;
	text-shadow:#FFFFFF 0 1px;
	padding:0;
	margin:10px 0 10px 0;
}
#wrap{
	margin:10px;	
}
.box{
	margin:10px 0 10px 0;
	display:block;
	-webkit-border-radius: 10px;
	background:#FFFFFF;
	padding:1px;
}
.box .text{
	padding:10px;
}
.box ul{
	padding:0;
	margin:0;
	list-style:none;
}
.box ul li{
	margin:0;
	padding:10px 3px 10px 3px;
	background:url(images/arrow.png) right 50% no-repeat;
	display:block;
}
.box ul li a{
	display:block;
	text-decoration:none;
	color:#333333;
}
.box ul li:first-child{
	margin-top:10px;
}
.box ul li:last-child{
	margin-bottom:10px;
}
.box ul li:nth-child(odd){
	background:#F9F9F9 url(images/arrow.png) right 50% no-repeat;
}
-->
</style>
 

As you can see this CSS code uses a lot of CSS3 selectors and properties, since they are fully supported on the iPhone. This makes our live a lot easier, specially when dealing with rounded corners, shadows, alternating row colors... etc

I have just designed a very simple site to show you how this can be achieved.
The background image and the arrows are from the great WP Touch plugin.

Next release:

This was Part 1 of my Full guide to web development on the iPhone, and it was the basics. In my next part we will add some JavaScript functionality to ensure a smooth user interaction with the site, different CSS rules for landscape and portrait mode, and some other advanced things we can do to make our site stand out from the crowd,

Take care!
Alex

Restore iPhone without upgrading OS

2
645 days
by in iPhone
Recovery mode

Recovery mode

If you need to restore your iPhone you'll notice iTunes tells you that upon restoring it, the latest version will be installed. This will be just fine for regular iPhones of course, but for the people who have a Jailbroken iPhone, it's not ok (At least until the newest version is ready for jailbreak)

Well don't panic since this is a really simple thing to do, first, download the iPhone firmware you want to restore into. For my example I will use the iPhone 3.1.2, so get the IPSW (iPhone Software) and then move on to the next step.

Now that we have the IPSW ready simple plug your iPhone to your computer, and when it shows up on iTunes Hold down the Shift key and press Restore. You will be asked for the location of your desired IPSW file, simply select the one you just downloaded and click Open. Your iPhone should now be restored without problems to that version. This is also how you could downgrade your iPhone OS if you accidentally updated it.

Hope you found this useful,
Alex

Sync issues: iPhone not detected by iTunes (Windows)

7
689 days
by in Windows, iPhone

Note that this is for Windows only!

Some people have been experiencing this problem lately: You plugin in your iPhone, the Camera detected window pops up, iTunes may even open, but the iPhone doesn't sync or even show in the sidebar!

Here is how to fix it:

  1. With the iPhone plugged it, close iTunes
  2. Go to your Control Panel
  3. Open up Administrative Tools (This name may vary depending on your language. The icon shows a folder, a computer and a hummer)
  4. Open up Services
  5. Locate the service "Apple Mobile Device"

Now open up iTunes, and your iPhone should show up! I have tested this on Windows XP only, if it works for you on other versions please let me know to update the post

Go to Top