Web Page Icons for your Apple Device Users

iconHeadB

Let’s say an iPad, iPhone or iPod touch user visits your website, and they’re totally impressed with what you have to offer — so much so that they want to make a note of it for future reference…

One option that they have is to add your page to their Home Screen, which allows them to display an icon on their device that links to your website. Whenever they wish to revisit your page, all they have to do is tap the icon and they’re back! Very convenient.

Now, unless you’ve specified an icon graphic in the <head> section of your document, the apple device will generate a it’s own default icon which is basically just a tiny screen-shot of the page itself — not very impressive. Obviously, it would be best to have a webpage icon that uniquely represents your site (your logo, perhaps) and presents your brand in the most visually appealing manner possible.

 

Web Page Icons: Apple-touch-Icon Not SpecifiedWeb Page Icons: Our Original GraphicWeb Page Icons: Our Graphic with iOS-added Effects

 

If you’d like to take advantage of this great feature, here’s a quick look at how to create and set-up Apple device Web Page Icons for your website.

First of all, you’ll need to create the graphics — multiple versions to accommodate the different size requirements of iPad, iPhone and iPod:

  • 57 x 57 pixels for iPhone and iPod touch
  • 114 x 114 pixels for iPhone and iPod touch (high-resolution)
  • 72 x 72 pixels for the iPad
  • 144 x 144 pixels for the iPad (high-resolution)

These should all be saved as .png files. Hint: keep your icon design as straightforward and simple as possible — a basic white logo or image on a flat colored background works just fine. Too much detail doesn’t always translate well visually.

Next, upload your newly-created icon graphics to your Web server. You’ll probably want to make a note of the directory you upload to, as you’ll need to specify the path in the next step.

Finally, add the following lines to the <head> section of your page:

<link rel="apple-touch-icon" href="path/myIcon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="path/myIcon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="path/myIcon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="path/myIcon-144x144.png" />

And that’s basically it — when the user adds your website to their home screen, their device will go through the above list and select the graphic that’s the appropriate size. As well, iOS will automatically add some spiffy visual effects such as drop shadow, rounded corners and a nice reflective shine to your icon.

One final note, I recently discovered that the Chrome browser for my Android Smart Phone also supports apple-touch-icon graphics when you bookmark a webpage — it doesn’t appear to add the aforementioned iOS visual effects, but still, pretty impressive!

More detailed information about this topic can be found at the Apple Developer Site.

Avoiding Compatibility Issues with User-Agent Detection

iconHeadB

Does your website play nice with every browser, operating system and device that comes to visit? There’s a pretty good chance that it does not — Somewhere, somebody is viewing your site on a new-fangled hi-tech gizmo or on some wonky, non-standards-compliant browser and it’s wreaking havoc on your meticulously-crafted web page design!

Unfortunately, all Web browsers are not created equal. Things may have improved somewhat in recent years, but the issue of cross-browser compatibility is still something that every Web designer needs to pay close attention to with each page that they create.

To further complicate matters, think of the wide array of smart-phones, mobile devices and tablets that may currently be visiting your site — many of which use their own proprietary Apps to browse the Web. Is there any way of ensuring that your website works properly on all of them?

$_SERVER['HTTP_USER_AGENT'] is a reserved PHP variable that exposes details about the device, operating system and browser accessing your website. The moment a request is sent over the Web, a piece of data known as a user-agent string is transmitted back to your server via the HTTP header. If we access this data, we can identify if a problem browser or device is visiting our site — at which point we can instruct our server to adjust accordingly.

To output the user-agent string to your browser, just use the following line of PHP code:

<?php echo $_SERVER['HTTP_USER_AGENT']; ?>

Here’s the user-agent string your browser just sent to our server when you accessed this page:

CCBot/2.0 (http://commoncrawl.org/faq/)

As you can see, the string identifies your browser and version number, as well as your operating system — Very useful information if we’re looking to to target a specific client that’s having problems with our site.

Example 1: Alternate JavaScript for a Problem Browser

Let’s say your page uses a fancy bit of JavaScript that works quite well in pretty much every major browser, but causes all sorts of problems in Internet Explorer 7. What can we do to avoid this issue? First of all, let’s check out the user-agent string for IE7:

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)

Notice the MSIE 7.0 part — that’s what identifies the browser as Internet Explorer 7. Using PHP’s strstr() function, we can check to see if the string MSIE 7.0 is present in the user-agent string. If the identifying string is found, we simply instruct our server to substitute the offending script with one that MSIE 7.0 has an easier time with:

<?php
$lameBrowser = "MSIE 7.0";
$clientInfo = $_SERVER['HTTP_USER_AGENT'];
$loadJS = TRUE;
if (strstr($clientInfo, $lameBrowser)) {
	$loadJS = FALSE;
}
if ($loadJS == TRUE) {
?>
<script type='text/javascript' src='scripts/fancyScript.js'></script>
<?php
} else {
?>
<script type='text/javascript' src='scripts/boringScript.js'></script>
<?php
}
?>

To summarize, we check the user-agent string and if it does NOT contain the identifier MSIE 7.0, the JavaScript file ‘fancyScript.js’ is loaded. If the browser IS identified as MSIE 7.0, the file ‘boringScript.js’ will be loaded instead.

Note that another option in this case would be to use a conditional comment such as:

<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->

Keep in mind, however, that these types of conditional comments are totally Internet Explorer-specific — they are not supported by any other browsers.

Example 2: Alternate Style Sheet for Smart Phones

Next, let’s say that we want to provide our iPhone, Android and BlackBerry users with a ‘Smartphone-Friendly’ version of our site via CSS. We could include the following conditional statement in the <head> section of our page:


<?php
$devices = array("Android", "webOS", "iPhone", "BlackBerry");
$clientInfo = $_SERVER['HTTP_USER_AGENT'];
$aSize = sizeof($devices);
$smartPhone = FALSE;
for ($i=0; $i<$aSize; $i++) {
	if (strstr($clientInfo, $devices[$i])) {
		$smartPhone = TRUE;
	}
}
if ($smartPhone == TRUE) {
?>
<link rel="stylesheet" type="text/css" media="screen" href="mobile.css" title="mobile" />
<?php
} else {
?>
<link rel="stylesheet" type="text/css" media="screen" href="normal.css" title="normal" />
<?php
}
?>

So, what we’re doing here is telling the Web Server "If the user is accessing this page with an iPhone, BlackBerry or Android device, the style sheet ‘mobile.css’ is to be loaded. If it’s not one of the aforementioned devices, use the normal.css style sheet". Our ‘mobile.css’ file would contain style rules that take into account the viewport size and other limitations of the small-screened device.

Example 3: Alternate Content for iPhone and iPad

Let’s say our page contains a Flash movie. As we all know, both the iPhone and iPad do not support Flash. So how do we make use of user-agent detection to display alternate content?


<?php
$noFlashDevices = array("iPhone", "iPad");
$clientInfo = $_SERVER['HTTP_USER_AGENT'];
$aSize = sizeof($noFlashDevices);
$flashSupport = TRUE;
for ($i=0; $i<$aSize; $i++) {
	if (strstr($clientInfo, $noFlashDevices[$i])) {	
		$flashSupport = FALSE;	
	}	
}
if ($flashSupport == FALSE) {
?>
 <img src="noFlash.jpg" width="100" height="100" alt="altImg.jpg" />
<?php
} else {
?>
<object>
<!-- Flash embed code would go here -->
</object>
<?php
}
?>

In this case, iPhone and iPad users would see the JPEG file ‘noFlash.jpg’, whereas everyone else would see the Flash movie embedded in the page.

Example 4: Re-Direct to an Alternate Page

Finally, let’s say you want to re-direct all of your smart-phone users to another page/website entirely — one that is specifically designed and optimized for small-screened devices. You could do something like this:

<?php
$devices = array("Android", "webOS", "iPhone", "BlackBerry");
$clientInfo = $_SERVER['HTTP_USER_AGENT'];
$aSize = sizeof($devices);
$smartPhone = FALSE;
for ($i=0; $i<$aSize; $i++) {
	if (strstr($clientInfo, $devices[$i])) {
		$smartPhone = TRUE;
	}
}
if ($smartPhone == TRUE) {
  header ('Location: mobile/index.php');
  exit();
}
?>

In this case, all of your Android, iPhone & BlackBerry users would be re-directed to a ‘Smart-Phone-Friendly’ version of your website (mobile/index.php), whereas everyone else would remain on the initial page.

These are just a few ways in which the user-agent string can be used to by-pass a number of cross-browser and cross-platform compatibility issues. An extensive collection of Browser ID (User-Agent) Strings can be found at zytrax.com — very helpful indeed.

Look for more on this topic coming up in future posts. If you have any thoughts on what’s been presented here, please feel free to post a comment!

The PHP Photo Gallery Project: 1900 – 1970

photoGalBNR

Recently Launched: Our new-and-improved PHP Photo Gallery Project — a fully-automated photo gallery uploader & manager with MySQL database support and automated thumbnail image re-sizing (via PHP GD Library).

The demo uses the Galleria Image Gallery to display the images, but the system can be adapted to work with pretty much any photo gallery framework that’s currently available.

The original photographs and slides are from my family’s old photo albums — many date as far back as the early 1900’s. A lot of these were starting to deteriorate with age, so I took it upon myself to begin scanning/digitally capturing the images before they got any worse.

As well, I wanted to make the archive available online in order to share with long-lost relatives overseas — just in case anyone was interested. I suppose I could have just signed up for a Flickr account and uploaded it all there, but where’s the challenge in that? Much more fun to re-invent the wheel, I always say.

P.S. If you happen to be one of the aforementioned long-lost relatives, please feel free to contact me — it would be great to hear from you!

Update: Scanning of the first photo album now completed — approximately 1500 scans to go!

 

Finally, A Questions or Two re: Database Security

So, while I was performing the laborious (but necessary) task of ensuring that the database for this project was secure from SQL injection attacks, it occurred to me that one possible way of thwarting attempts to hack the search function might be to use the $_SESSION variable for searches, thus preventing direct user access to the database.

Basically, the idea was to connect with the database programmatically when the page loads, and create a $_SESSION array populated with the required data. Any and all searches would query the $_SESSION array, rather that connecting directly with the database.

In effect, this would (as far as I can tell) be an added layer of security, as the user would at no point have direct access to the database. Tried it, and it works! I can’t help wondering, however, if I’m missing something…

Is my thinking flawed? Has this been done before? MySQL/PHP users & security pros, help me out here — if you have any thoughts or insights regarding this, I would really appreciate it if you were to post a comment!

Customize your Facebook Links with OG Meta Tags

fbLinksBNR

So, let’s say that you’ve just written this awesome new article. You’ve gone ahead and posted it on your website or blog, and now you’re looking to share it with all of your Facebook fans — a simple matter of posting a link on your FB page and that’s all there is to it, right?

WITHOUT OG Meta Tags

Open Graph Meta Tags Example 1 - Without OG: Meta Tags

Well, not so fast — if you go ahead and post without due preparation, the results may not be exactly as you’d intended.

The problem is, unless you tell Facebook specifically what you want it to display, it will default to your page’s existing HTML title and description meta tags.

As well, if no title or description meta tags are found, it will basically just scrape what it needs from the body of the page.

In terms of thumbnail images, although you are given the option of choosing one of the image files found in the body of the page, chances are pretty good that those options will be less than suitable for your purposes.

OG Meta Tags — Basic Usage:

Facebook employs a technology known as the Open Graph Protocol — this allows you to specify the exact text and graphic to display in your link. It’s fairly easy to customize Facebook links with og: meta tags — all you have to do is add the following into the <head> section of your page. Of course, remember to substitute the content=”…” values with your own text:


<meta property="og:title" content="Dave's Tremendously Awesome New Article" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.mysite.com/" />
<meta property="og:image" content= "http://www.mysite.com/OGlogo.jpg" />
<meta property="og:site_name" content="Warp Seven Blog" />
<meta property="og:description" content="Cool Facebook Links Using OG Meta Tags." />

Now, the resulting link will display in Facebook exactly the way you want it to — the title, description and thumbnail image are all completely under your control. The link below is to the same page, the only difference is that the Open Graph meta tags have been added:

WITH OG Meta Tags

Open Graph Meta Tags Example 2 - With OG: Meta Tags

Note that WordPress users have the option of installing Yoast’s excellent WordPress SEO Plugin, which features support for Open Graph meta data, as well as Twitter Cards.

I’ll be taking a closer look at this in the very near future, and will post my findings right here, so stay tuned!

One final note, if you’re experimenting with this you’ll probably run into a situation where your links do not appear to be changing, regardless of any tweaks you make to your code.

The reason, I’ve discovered, is that Facebook actually caches the page you submit as a link — to empty the cache, go to their debugger page, enter your URL and then hit the ‘debug’ button.