1 files changed, 81 insertions, 0 deletions
diff --git a/wired/old/published/Webmonkey/iUI/iui.txt b/wired/old/published/Webmonkey/iUI/iui.txt
new file mode 100644
index 0000000..8968a6a
--- /dev/null
+++ b/wired/old/published/Webmonkey/iUI/iui.txt
@@ -0,0 +1,81 @@
+The iPhone may not yet have a majority share in the smartphone world, but it's well on its way. And that means creating a version of your website tailored to the look and feel of the iPhone is all but mandatory for today's web apps.
+
+It might seem like a pain to completely recreate your website just for the iPhone, but luckily doing so isn't all that tough. The secret is to use the JavaScript toolset developed by [http://www.joehewitt.com/blog/introducing_iui.php Joe Hewitt]. Hewitt's script, known as [http://code.google.com/p/iui/ iUI], takes care of all the heavy lifting for you.
+
+So long as your site is using valid (X)HTML, it's not hard at all to sequester off a domain for your iPhone users and apply the iUI tools to generate your iPhone-friendly site. Even better, you don't need to be a JavaScript guru to get a basic site up and running.
+
+==Detecting Vs Destination==
+
+You might be thinking of using some JavaScript to sniff out mobile Safari and serve up your iPhone site whenever your detect Apple's mobile web browser.
+
+Don't do that.
+
+Just because you're offering iPhone users a dedicated interface, doesn't mean you should force them to use it. Many of them may want to access your normal site and if you're using a browser detection script to redirect Mobile Safari, they won't be able to get to the main site.
+
+A far better plan is create a sub domain or other specific iPhone-friendly URL. That way those that like your iPhone interface can get it and those that want access to the regular site can site enjoy that as well.
+
+==Getting started==
+
+The first thing to do is set up your sub domain or other URL. For example: i.mysite.com. When you're doing this keep in mind that the iPhone isn't the easiest thing to type on so the shorter the URL the better.
+
+Now you just need to generate some HTML for that sub domain. If you're using a database and template publishing system, it's not too tough. Just call the same data you'd get for your main site and structure it in a manner that suits the iPhone.
+
+This is where it helps if you actually have an iPhone, but if you don't here's a tip to get you started: lists, lots of lists.
+
+The iUI library has some very nice set of tools that will turn your lists into a sideways-sliding navigation interface that works very well with the iPhone's finger gestures.
+
+For instance, let's say you have a number of categories on your site and you want iPhone users to be able to navigate through all your content by category. One sound strategy would be to generate markup like this:
+
+<pre>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>iUI Barrel of Monkeys Demo</title>
+<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
+<style type="text/css" media="screen">@import "../iui/iui.css";</style>
+<script type="application/x-javascript" src="../iui/iui.js"></script>
+</head>
+<body>
+    <div class="toolbar">
+        <h1 id="pageTitle">Barrel of Monkeys</h1>
+        <a id="backButton" class="button" href="#"></a>
+        <a class="button" href="#searchForm">Search</a>
+    </div>
+    <ul id="home" title="Categories" selected="true">
+        <li class="group">B</li>
+        <li><a href="#Bananas">Bananas</a></li>
+        <li><a href="#Barrels">Barrels</a></li>
+        <li class="group">M</li>
+        <li><a href="#Monkeys">Monkeys</a></li>
+        <li class="group">P</li>
+        <li><a href="#PointySticks">Pointy Sticks</a></li>
+	</ul>
+</body>
+</html>
+
+</pre>
+
+With this markup we've embedded the iUI scripts and CSS. Then we've told iUI to create an iPhone styled list (iui1.jpg). If you look at the screenshot you'll notice that iUI automatically uses the class attribute "group" to build iPhone-style list dividers and styles all our links as horizontal sliding elements.
+
+If you'll look at the actual HTML you'll notice none of our links actually lead to other pages. Depending on the complexity of your site this may not work for every page. However, for the most part, even though your users will feel like they're paging through you site, you don't actually need to load a new page.
+
+So let's add some more content, paste this code in just below the list code:
+
+<pre>
+ 	<ul id="Monkeys" title="Monkeys">
+        <li><a href="#howler">Howler</a></li>
+        <li><a href="#spider">Spider</a></li>
+        <li><a href="#rhesus">Rhesus</a></li>
+        <li><a href="#barbaryape">Barbary Ape</a></li>
+    </ul>
+    <p id="howler">Howler Monkeys love to howl.</p>
+</pre>
+
+Now if you head to your page using a iPhone (or an [http://www.testiphone.com/ emulator]) and tap/click on the monkeys the page will slide to the right and display our new list. Click on the Howler Monkey link and you'll slide over to a blank page with our paragraph text.
+
+==Beyond Lists==
+
+Obviously not everything you're going to want to show on the iPhone is going to be a list. But don't worry, iUI can help out with other stuff too. There's are some HTML classes to handle common input elements like modal dialogs, preference panels, on/off switches and loads more.
+
+It also neatly solves a common iPhone design issue -- long lists. Apple's apps get around the problem of long lists by including a "load X more" link at the bottom of a short list. And that's exactly what iUI allows you to do as well. Just create a link with target="_replace" and iUI will load the URL it and replace the <code><a></code> with the contents of the URL. 
+
+Of course you'll probably find some of your content falls outside the bounds of iUI and in the end you may have to write some CSS yourself. But for handling common cases on the iPhone iUI is an indispensable resource.