Surf the Dream A discourse of links and articles from Justin Avery

Mojo Dojo – a one day iOS development course

*note that this is a first draft of this and most of the links have been omitted. check back in a day to get the updates with links to all resouces*

Well it’s the end of a very long day in Brighton and I’ve managed to yet again find myself with a pint of Landlords at the Rabbit.

Today I came down from London to attend a one day course on iPhone development run [email protected] balkan. Aral is the developer of the Feathers App, a twitter client that allows for cute icons, and has been around the world of iOS development since you could download xcode (and a few years before that as well).

Morning Session

The day started off slow which is as to be expected for a single day course. Aral described the types of devices that the course was covering, and basically what you need to take into consideration when developing any kind of iOS application, i.e. what generation is the device, does it have a camera, does it support multi-tasing, does it have a back and front camera etc etc. Nothing in too much detail, but an overall introduction into things you should take into consideration (which is especially good when scoping out project with clients, even if you’re not going to get on the tools and build them yourself you need to be aware of such things).

iPads, iPod touch, iPhone 1/2/3/4, retina display, physical pixels, dimensions and orientations……we talked about them all. NEXT!

Next we took a look at some of the important resources you may need/should be referring to when taking on your project. Aral has his own little URL shortener (only because he obviously loves the t.co that twitter have introduce *insert link to his complaits*)

Human Interaction Guides (read them NOW)

Heard of “Let me google that for you?”

this is the iOS developer version of it. Look before you ask…..

Wireframing

Analytics for apps

Apart from those pretty cool resources the two main things that I got from our morning session were these two quotes from aral…..

“Don’t think of the iphone as a phone, think of it as a touch interface to your application when designing your app. Same goes for the iPad.”

“Context is everything in mobile.”

Morning Session – part du

From here on in we hit the keyboards. The first thing we looked at were web based applications and including frameworks like JQTouch. We began to utilise some of the meta tags that Safari mobile would take into consideration like no zoom and view ports. I only wrote one note for this entire session which was……

“If you’re disabling the zooming then you need make sure you make accessible options for users that need larger text.”

Basically, plan for everything you can. If you’re going to disable or relay on something always being available then make sure you’ve got all the options covered. For example, if you’re always relying on the software keyboard remember that users can use a bluetooh keyword which then disables the software keyboard.

Plan!

Of course, this was just a web app framework that allowed you to mimic the interaction UI of the iOS, you still were not able to get access to the iOS native functions (camera, acceleraometer) unless you wrapped this up in PhoneGap and create a downloadable application,

The other issue with this approach is that EVERYTHING is rendered in the WebView and the application has to render the HTML which is MUCH slower than anything else we reviewed.

One really annoying part of moving JQTouch into PhoneGap was that after the initial index.html file that is the home of the application, all other pages had to be stripped of the html, head, body tags and you could only be left with the structural div elements and content tags. PANTS!

On the other hand, we did a quick example of taking a photo and getting it on the application page WOOT!

WOOT!

This is the index with the camera coolness……(right click and view the source code to see this)

<html>
<head>
	
<meta name="viewport" content="width=default-width; user-scalable=no" />

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<title>DrillDowntitle>
<link rel="stylesheet" href="jqtouch/jqtouch.css" type="text/css" />
<script type="text/javascript" charset="utf-8" src="phonegap.js"> //Just added comments here to make the code window work on the blog postjsenderscript>
	

"html_tag_brackets"><link rel="stylesheet" href="jqtouch/theme.css" type="text/css" >/>
"html_tag_brackets"><script src="jqtouch/jquery-1.4.2.js">script>>
"html_tag_brackets"><script src="jqtouch/jqtouch.js">script>>
  
"html_tag_brackets"><script>>
 // Initialize JQTouch.      var jqt = new $.jQTouch();
"html_tag_brackets">script>>
  
  
 
    "html_tag_brackets"><script type="text/javascript" charset="utf-8">>


	// If you want to prevent dragging, uncomment this section	/*
	function preventBehavior(e) 
	{ 
      e.preventDefault(); 
    };
	document.addEventListener("touchmove", preventBehavior, false);
	*/
	
	function onBodyLoad() {
		document.addEventListener("deviceready",onDeviceReady,false);
	}
	
	/* When this function is called, PhoneGap has been initialized and is ready to roll */
	function onDeviceReady() {
		// do your thing!		
	}
	
	// Using the PhoneGap API (found in phonegap)    
	function takePhoto() {
		navigatior.camera.getPicture( cameraSuccess, cameraFailure);
	}
	
	function cameraSuccess(imageData) {
		var image = document.getElementByID("myImage");
		image.src = "data:image/jpeg;base64," + imageData;
	}
	
	function cameraFailure(imageData) {
		alert("Failed because: " + message);
	}
	
    "html_tag_brackets">script>>
  "html_tag_brackets">head>>
  "html_tag_brackets"><body onload="onBodyLoad()">>
  	  "html_tag_brackets"><div id="jqt">>
      "html_tag_brackets"><div id="home">>
        "html_tag_brackets"><div class="toolbar">>
        "html_tag_brackets"><h1>Homeh1>>
        "html_tag_brackets">div>>
        "html_tag_brackets"><ul>>
          "html_tag_brackets"><li class="arrow"><a href="about.html">Abouta>li>>
          "html_tag_brackets"><li class="arrow"><a href="blog.html">Bloga>li>>
          "html_tag_brackets"><li class="arrow"><a href="contact.html">Contacta>li>>
		  "html_tag_brackets"><li><a href="javascript:takePhoto():">Take Photoa>li>>
        "html_tag_brackets">ul>>

  "html_tag_brackets"><img id="myImage" width="300px" >/>
  
  "html_tag_brackets">div>>
  

  "html_tag_brackets"><div id="about">>
            "html_tag_brackets"><div class="toolbar">>
    "html_tag_brackets"><h1>Abouth1>>
    "html_tag_brackets">div>>
    "html_tag_brackets"><a class="back" href="#">Backa>>

    "html_tag_brackets"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.p>>

"html_tag_brackets"><p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,p>>
  "html_tag_brackets">div>>  
    "html_tag_brackets"><div id="blog">>        
      "html_tag_brackets"><div class="toolbar">>
    "html_tag_brackets"><h1>Blogh1>>
      "html_tag_brackets">div>>
    "html_tag_brackets"><a class="back" href="#">Backa>>

    "html_tag_brackets"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.p>>

"html_tag_brackets"><p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,p>>
  "html_tag_brackets">div>>  

    "html_tag_brackets"><div id="contact">>
      "html_tag_brackets"><div class="toolbar">>
    "html_tag_brackets"><h1>Contacth1>>
      "html_tag_brackets">div>>
    "html_tag_brackets"><a class="back" href="#">Backa>>

      "html_tag_brackets"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.p>>

"html_tag_brackets"><p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,p>>
  "html_tag_brackets">div>>   

  "html_tag_brackets">div>>

  "html_tag_brackets">body>>
html>

PANTS!

This is the rest of the html pages…… seriously the entire file…. not html tags or nuffin…..(right click source again)

<!-- I couldn't work out how to get this all to display in the front end.  Yes, I am stupid. -->
<!--

  <div id="blog">
            <div class="toolbar">
    <h1>Blogh1>
    div>
    <a class="back" href="#">Backa>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.p>

<p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,p>
  div>  
-->

Native App Frameworks

We began to look at other frameworks that still allowed for another buffer between you and Objective C.

Dashcode

If you are happy with the Apple UI and only want to create something simple, Dashcode is worth a lool. We used the PodCast example and were quickly able to pull through the most popular podcasts from Jeremy Keiths HuffDuffer into an app.

You get Dashcode as part of the xcode download from the Apple Developer centre *link*

Nimble

This was by far my favourite part of the day, although 6 hours after we were using it I seem to have forgot most of what we learned……. I suppose it’s a good thing that Aral provides a USB key with everything on it.

While Nimble is another Framework that will use the WebView it also has a pretty bloody handy API that you can call by JAVASCRIPT to write native elements.

I hear you……. what the hell is he talking about?

Where as the JQTouch would contain what you see above, Nimble has the following……(right click… you know…)

<!-- I couldn't work out how to get this all to display in the front end.  Yes, I am stupid. -->
<!--
<script>
	var records = [
	{title: "About", subtitle: "more information.", callback: "itemTapped(0);", page: "about.html"},
	{title: "Blog", subtitle: "more information.", callback: "itemTapped(1);", page: "blog.html"},	
	{title: "Contact", subtitle: "more information.", callback: "itemTapped(2);", page: "contact.html"}
	];
	
	var navController = new NKNavigationController();
	navController.setTitle("iOS Mojo");
	
	function itemTapped (index) {
	NKLog("Callback: item taped: " + index);
	
	navController.gotoPage(records[index].page);
    }	
	
	var table = new NKTableView();
	table.init(0,0,320,480,"plain");
	table.insertRecords(records);
	table.show();
	
script>
-->

The brilliant thing about this is that when you see NK… used in the syntax it is calling a native fucntion on the same name except replace the NK with UI.

This has a two fold benefit of being FASTER than a WebView, and also it means that you will get used to the native terminology and availabe functions. If you run into issues with one of the NK functions, add UI to the beginning of it and refer to the Apple Developer Resoureces. BAM!

What does this really mean? It means that you’re application will run MUCH faster, and that’s about all you should need to know.

There’s more to this story, but my train is leaving and I’ve got some WIRE to watch…… more soon!

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as justinavery.me (now my resume) and JaveryDesign.com (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of educational pocket notebooks, write about the Universe and run a responsive design and a RWD Weekly Newsletter