Hello, good morning, my name's Dean, I'm sure you all know me from face book because I have over 20 friends and so this morning we're going to talk about iAd and I really wanted to give the session title or the session description for this topic as something like not since the nostalgic betrayal of 1960s Manhattan in the hit show Madmen have people been so interested in advertising.

But as you know iAd is Apple's program to revolutionize mobile advertising and when you set such a lofty standard as revolutionizing a well-established industry they're pretty high goals so we have to take a look at what we really mean by that. So might have seen this graph before. We're trying to deliver on two fronts, interaction or interactivity and emotion. So maybe you guys are familiar with web advertising, web advertising can do some animation, it can be a little interactive but you don't really get an emotional connection to it.

Well, you do sometimes get an emotional connection but it's normally the negative emotional connection you get if something's in your face and popping up all over your screen. On the other hand this TV advertising, the TV advertising because it uses video it can be really, really emotional, I mean I know like when I watch the FaceTime video earlier in the week I found it really touching, and I'm like a super tough guy so that's [laughter] so I mean while it's emotional it doesn't really give you an impactivity, you're sitting back on your couch a fair way away from the screen where it's you know for iPhone devices you got the video in your hand, you really want to be part of it, you've got this real close connection to it and that's where we want to be with iAd we want to deliver really emotional content with really high interactivity.

Really what we want to do is allow you to make a Super Bowl style ad, now what's a Super Bowl style ad, it's a kind of ad the way you might have only seen once but you remember it days, or weeks or months later and it sounds really sort of crazy except like if I mention the word 1984 to you a lot of people in this room, in this room because you're all nerds, going to think of an ad which is really weird whereas a lot of other people are going to think about a book.

But that's the type of ad we're going for, something you really can remember. The user might only interact with it once but they're going to sort of hold that with them for the rest of the week or for days until they decide to do what advertising is suppose to do and hopefully you know go to get your product.

Now just because you are actually trying to draw the user to your product doesn't mean you can't give them a rewarding experience for example you might have an ad that has a little game with it, something they can enjoy or you might give them wallpaper they can use in their background of their iPhone or you might recommend a sound track to them, that's the type of thing we want to do, we're not just pushing product to the users we're giving them a great experience, in fact iAds are sort of like mini-apps, Steve described the Toy Story ad if you might have seen at the iPhone 4 event as sort of like a mini-universe. He was interacting with this ad, he was getting wallpaper and playing games and listening to the sounds, introducing to the characters of the movie and that's the type of experience we want so how are we going to do it.

Well we've developed a framework called iAd JS, it's a JavaScript framework and there's sort of two main reasons why we think you should use it, first Apple has a lot of experience with developing application frameworks for the iPhone and it's been really they've been really well-received, a good example is UIKit, I mean there's great applications built with UIKit and we in fact iAd JS is very similar to UIKit, it's written in...it's a JavaScript framework but it's really based around the same principals. Secondly performance really matters and because we know exactly how the engine that's powering iAd's works we can make it so that iAD JS provides the most performant content possible.

So I mean I guess a lot of you probably seen web frameworks on the phone and you load a page and they look like an iPhone application but when you come to interact with them you know maybe scroll the further page and you sort of, finger trips because the page doesn't scroll. It's like that's actually a really hard problem, that's the reason why these frameworks don't operate. But we think we've solved that problem and we'll show examples of what type of performance we've got.

What does it really mean to you, what we want you to do is write less code, less logic, less programming logic even though it's a JavaScript program we actually want you to write fewer lines of JavaScript because you're developing in HTML we want you to use the declarative format for most of your application if possible.

Secondly we want it to be highly customizable so maybe some ads...when you're doing advertising the brands they might have very, very similar ads in terms of the application or the ad they're building but they want to differentiate as much as possible from their competitors so they want to make sure that whatever ad they can do, they can make it look exactly the way they want to look at it and completely different.

So, any of you have heard of HTML5, iAds are built on HTML5 and what's really important about that is that while it's a buzz word, you know the buzz word, what it really means is even though your writing an application it's not a second class citizen in any way, there's a whole bunch of frameworks you can use, you can use databases, you can load data over the network, you've got animations, a whole bunch of stuff, these are really real apps, they're just running inside HTML5.

But more importantly in iAd you're developing for the WebKit framework that's what we think is the best HTML5 engine, it's powering the Safari browser but if you're web developers you know instantly if you're only developing for one platform and it's an awesome platform like WebKit you don't have to worry about the hard stuff which is cross-browser compatibility and I'm sure that's the biggest headache for when you're doing a reach application. So there's these two things, HTML5 and iAD JS and these are basically the foundations of the technology we're trying to give you to make completely awesome ads.

So let's give you a little interaction of what we're going to do, this is a two part series, I'm the Magic Man, no I'm El Diablo, I can't remember. I'm going to build an ad, I'm going to dive right into the code, we're going to show you it, you might not necessarily understand all the iAd JS framework stuff we're going to do and that's because part two coming up next, the other half, the Magic Man is going to dig into the framework elf and give you a really detailed look at all the features and techniques that we've developed. So let's start with the demo, we want to show you what type of ads we're talking about here.

Okay, so I found this service called Twitter, it was invented by Justin Bieber. I've written this...this is a native app and it just aggregates Twitter based on particular topics so it shows you tweets say on sports or entertainment or whatever. Now the interesting thing about this is the type of users that would use an application that's showing you twitter feeds are probably the type of users that are interested in using Twitter elf, so it's a great place to sort of market a Twitter application so let's...now you can see this is the application, it's just got a table view of tweets and at bottom I've got an ad for an application you might have heard of it, it's Birdhouse developed by the dynamic duo of Cameron and Adam, they gave me permission to write and iAd for their app. There's some animation, this is cycling through images, the little birds bouncing around every now and then to sort of ...there we go saying "Hi, use me." So I'm going to tap on this ad.

You care about your Twitter don't you; sure you do because you're a thinker, a taste maker and a very important business person. Let me show you Birdhouse, joining me is Birdhouse Senior Developer, Cameron Hunt.

Hello.

Say hello Cameron.

Hello.

Hold that thought I just had an idea.

I'm sorry where were we.

You were saying we're Birdhouse.

Okay, so I stopped it there, I'd really like to show you the whole ad, the whole video but you should go their web site and watch it especially when FAQ guy comes at the end, it's great. But it raises an important point which is that I have to go to their website to see this video to find this video and it's awesome and I don't use twitter but I thought wow that video is awesome I want to buy this app but if it was in the context of a Twitter app elf you sort of...one you don't have to go to the website, you're giving this great video that sells the product directly to the users, directly to people who would potentially buy your app. So what are we going to talk about, first you notice that when the app launched there's a banner, we're going to describe how you create a banner for iAd, Next we're going to dive in and build the sort of mini-application that is the advertising unit.

There's some enhancements that iAds provide allow you to give the user more features or more functionality and lastly we're going to show you, if you do use iAd JS how it can help you build custom code you can reuse elsewhere. So banners, so obviously you have to make a great banner because if you don't make a great banner the user isn't going to tap on your ad and if they don't tap on your ad you don't get the engagement with them so it's the first interaction with your product and you're going to make it special and especially because I find applications themselves are really creative and exciting, you've got to almost compete with the application to show...get some attention that the banner is there.

But you sort of balance this...balance this between being really annoying and being exciting, you don't want to annoy the user so they never click on the banner, so let's have a look at the banner, so that was the application, the banner is just this, this little bit down at the bottom and it comes in two parts.

There's a frame and there's the content, now the frame is the border that is provided by the iAd system, so every ad in the network gets this frame applied to it and that gives the user some form of comfort that when they tap on this ad they're not going to be thrown our out of their app, they're put into the iAd system. And then there's the creative content which is drawn underneath.

And this is the bit where you actually...this is your framework, this is your canvas where you want to do your cool content. So banners, they come in two sizes, 350 x by 50 un or points for portrait and 480 x 32 at the landscape, you can provide in your ad two different banners or multiple banners in fact that are shown in rotation depending on what the orientation of the application you're in is. The iAd JS systems draws the frame as I mentioned, the creative content is where you put your magic in.

All it is, is a directory with HTML so you can really do anything inside that directory but you can also if you want just provide a static image and you can put that image at the size of the frame, another cool way to do it is you can provide an image that's the width of a full screen and only a slice of that...you specify which slice is shown within the banner and when the user taps on it the banner is sort of like ripped apart and the full screen image comes up, so it's actually quite a cool effect but most people are probably going to want to do HTML, because it's a great environment, you get to do animations or some kind of effects.

Now if you're going to do animation the banners are quite small so you want to use the best technology for doing your animations and CSS provides a good way to do this because you don't necessarily want to use script because scripting libraries that do animation can be quite large and you want to keep your banner as small as possible, especially avoiding large JavaScript libraries because there's no real need to load in something really huge just to show a little banner at the bottom of an application.

There's been plenty of sessions already during this talk about how to use CSS effects to get this really nice, beautiful look on your web page so I don't want to repeat anything here. There's one important thing to note, banners aren't interactive, there's really only one interaction with the banner and that's the user taps on it.

But you within the banner you don't actually get told that that's happened, anything, you don't get any UI events you just have to provide the animation or everything yourself through timers. Now again I want to go into detail of exactly how I made that banner for Birdhouse but really it was just a directory with an HTML file and then a bunch of images and text and all I did was arrange those images in a particular way, set the bird on top of the logo and then added a little CSS animation so it bounced around and cycled through other images, it was actually very easy, all out I think the banner was about 20K of code with the images. So that was pretty simple, constructing an engaging banner, simple but it's important you've got to make sure that you make a great banner, get people interested.

So let's build a real ad now, that's enough intro, let's go back to the demo and in this case I've made an ad, now keeping with the bird theme, I thought okay I'm going to make an ad for a realtor site that sells houses to bird or birdhouses, so you see I've tapped on the banner and this application started.

Now this is an interactive menu so I can tap here and the menu pops up and down, maybe I want to say, let's show me...the first thing you want to do is maybe show the houses that are around me so I've asked my current location which is going to pop up soon and it's not really Cupertino, we're running in the simulator but here it's the map, it's the full map system...oops...I can tap on the pins and I get the callouts, for now, a cheep buy, they say that puns are the worst forms of humor.

Look at other things, for example, I might want to sell the user something so bird related products, the movies or whatever I can sell...like in app purchases I can do in ad purchases direct the user directly to something on the iTunes Store and it downloads in the background or maybe I want to say let's have a look at houses around here, this is interesting, this is an example of the table view, this is done purely in JavaScript, there's no, there's no native code behind this.

This is the example of something I said which is really hard to do, other JavaScript frameworks haven't managed to do, we see we get the scroll bars and everything, interesting thing this is zero lines of JavaScript to write this component inside your ad. And I'll show you later all you do, basically you just put something in and mark it as a table view and there frameworks going to build all the interactive video and event handling behind it.

While were on that topic let's have a look at property, now this is a cover flow of say trees in the area, now again this is all JavaScript, no native code, pretty accurate representation of cover flow, you can even throw, if I could do, it's going to be hard to do on a simulator, there's a particularly attractive house for a bird.

And maybe here you pick a tree potential like you want to save it to your photo gallery and then email it to your other half or something inside it, this looks like a great tree for our vacation home. Lastly maybe we'll go to testimonial from a satisfied customer.

All right let's close out the ad. So.

Let's go ahead and try and build that ad. Before we do that we just want to describe how contents are really working in iAd system.

So most of you are familiar with the way web content works and that you have a browser, you're the user, interacting with that browser. It's showing you web content and the web content has come from the internet. In iAd it's a little bit different, you're still the user I hope, instead of interacting with the browser, you're interacting with an an iOS native application and that's showing you iAd content but that iAd content isn't actually being displayed by your application it's being displayed by the iAd framework, this is something native developers use inside their application, they put a banner view and the banner view handles all the loading an unloading and cycling of banners from the iAd network and also displaying the full screen advertisement when they click on it.

Instead of coming from the internet the iAd content actually comes from the iAd network so this is the system that Apple builds that serves the ad content but it can also go off to the network and get it's own data, for example you might have an ad which is promoting a movie and you can get the users location through the GL location API's and you know down load a feed of what show times are around the user, what cinemas are around the user.

What was that application I was using and this is really important for you if you're a developer of an ad content, there's an app we built called iAd Tester that is included on the package, I should mention that the iAd JS developer packages are available from developer.apple.com and it comes with this application which allows you to load ad content on to the device through iTunes the same way you do document sharing normal on iTunes, like go to the applications tab, scroll down and you'll see the iAd application and you can just drag zip files onto there they are expanded and you can then run them on the device.

This is an important introduction to how you would develop and ad because it's just web content you would normally start with developing on the desktop because you've got this great Web Inspector which has got more features that I can keep up with, I even learned some yesterday but this way you want sort of develop an ad or use your existing tools for developing HTML content.

The other one is you want to develop...you want to at least test your add in Mobile Safari because then you can do the touch interaction, see how it actually works on the device and lastly when you think it's ready you can use iAd Tester which is giving you the full experience of the banner and the interaction with the little X that allows the user to close it down running full screen.

Now these applications...or these ads are mini-applications, but in HTML5 so I sort of encourage you to look at them as more of an cinematic experience, now they can provide function, Steve showed an example in the iPhone event a few months ago where he used a Target ad, an ad for Target and he built up a shopping list during the ad and you could email it to yourself so that when you went off to college you had all your furniture ready so but really you want to give the user a great experience.

Another thing to note is the application code or the HTML code is not dynamic iAd network isn't a dynamic server and that you don't up load PHP or you don't have some Rails application generating your ad, you've got to send the network static files, what that means is that any customization or any features that you want to add to the ad are done inside JavaScript so that's why again it means that these ads are really like mini-apps and to do mini-apps we need a framework which is why we built iAd JS so let's get into the code.

Now first up this is the index.html, this is the file that the ad system loads when you tap on the banner. This b pretty normal, you've seen it before if you've done web development for iPhone. The next one is where we start to have fun; this is the iAd framework, from loading the style sheet and the JavaScript for the iAd system.

Now what this means is every ad actually has runtime packaged with it or if you're using iAd JS. The only thing this is, you know it's sort of a dynamic system, you get to control exactly what the user gets and you can manipulate your ad to send it the least amount of code possible. Next I'm going to load my actual code, my application code and my CSS.

Now I've just sent one file here but we'll get into reasons later as to why you might want to split your application up into multiple files to help the application load quicker so let's have a look at the main application. What every application needs a main function or some entry point that's actually got to start the app.

And we call it the ADRootControl, AD is just a prefix that iAd JS classes have. If you're familiar with native programming you understand the root view is sort of the main window of the application, in HTML it's the body of the document. So we've got this attachment to the root view and what an application is going to do is manage what views which is like controls or buttons or content what views are visible in the main window of the application at any time so it's going to cycle between different things as the user navigates.

Let's look at the code for that, you don't have to worry, most of this code is in fact boilerplate that you can skip and as I said the next session will get into it in more detail. What we're just going to do is look at it I declared a global variable controller and that's going to be the main application, now I create an event listener to the DOM content loaded function, what that means is I want this code to execute as soon as the application is ready so as soon as all the content of the document is loaded it doesn't necessarily mean that all the images have arrived, this is the first time I can execute code and I actually want to create a new application controller object. So let's have a look at that, first off I define it's superclass to be ADRootViewControl so I'm defining a class called application controller that inher from ADRootViewController now you might know that JavaScript doesn't do inheritance, traditionally iAd JS adds it's own inheritance model we get into later.

Let's have a look at just the constructor, all I really want to do at the moment is construct the menu, so I'm constructing a menu and then I add that menu to the root view of the document or the root view of the application. Now I actually lied a bit when I was saying what a root view controller does is manage views you don't really want to do that because it's not necessarily to know...it is not necessary to know every view or every control that's in your application at any one time.

What you really want to do is talk at a high level to sort of managed objects or collections of objects and we call these view controllers and again this is something you're familiar with if you've done iOS native development. An example is the menu, you don't need to know all the buttons that are on the menu all you really need to know is what button was pressed so as the root...the main function of your application just needs to say here's a menu and I trust that menu to do the right thing and tell me when something has happened.

So all you're really doing then is managing what view controllers are visible. So what is a view controller, we're going to build a view controller for the menu called miniview controller, We basically split it into three parts, so that the logic, which is the JavaScript code behind the menu, there's the view, which is sort of the model and we try and do that in HTML because we are programming HTML but it's nice that we can write declarative code that says what the actual content of the menu is and then the third bit is styles, we want to give that menu some kind of appearance.

We split that into three files, as you expect it is a JavaScript files an HTML file and a CSS file and the good thing is and I'll get to this later by separating this way we can then reuse that logic behind the menu controller with different views and different styles without having to change our JavaScript code.

So let's have a look at exactly what was happening here, this is the menu, it's sliding up- and downstream, it's really got two things, it's got a toggle button that is in the top right corner that determines whether the menu is visible or active or not and then we've got a set of buttons that respond to using actions. Let's build this menu.

Pardon me, the first thing is two properties, there's two main functions, two main API's to the menu controller, I'm going to define properties, the visible whether the menu is actually active or not, it's a balloon and then we go to delegate and that's the object, the other object in our application that's got to be told when the user clicks on a button.

Now this configuration we do in iAd JS, we give the menu an ID so that we can create multiple instances of these menus potentially and reference them by name. We also tell it what HTML snippet, we have a little file of HTML that we load and it gets processed, we show that next and we say that it's, inherits from the view controller class.

Let's have a look at...oh, sorry, so the two really important things you need, again forget about the rest of the boilerplate code there's really only two things, whether the menu is visible or not and that allows us to, it's a synthesized property which allows it to say menu visible true and iAd JS is actually going to run some code under the hood to do something when that happens, we show that later. The other property is delegate which means I can say to the delegate object a menu was touched when I know the user has tapped on a button.

So let's have a look at the actual view that we're loading into the application, so you can see in the screen shot it's really five buttons...sorry there's two types of buttons, one is a toggle button and then in the top corner and then there are five buttons that are actually the menu. Now there's some magic here we do, we don't...you could create this menu purely in JavaScript if you wanted but we want to give you a declarative format to do it.

So the snippet below, we put a magic class variable on the HTML and that's ad-view and when iAd JS sees that class it starts processing that HTML in attaching some JavaScript objects so that you can interact with it directly from code without having to look it up all the time.

The other thing is we add buttons, AD button again, iAd JS is looking for these and actually makes button objects out of them so it knows when the user has tapped on them. We give the buttons a title and then lastly we've got another type of button which is the toggle button, so there's five buttons for the menu and then one toggle button.

The CSS is pretty easy, first thing I do is because I have a menu, iAd JS has given me a container object for that menu automatically as I load the view into the page, I want to make sure the view is always on top of every other element in the page so I give it a Z index of 1.

The rest of it is pretty simple but there is one thing that is important, that interaction where the menu slides up and down I don't want to have to write JavaScript for that I'm going to try to do it purely through CSS, so what I'm going to do is I'm going to start off with a menu and it's got to transform, translate wide 550 pixels, what that means is while it would be normally on the page I've moved it down 500 so that only the lip of it is peeking out from the bottom of the app. I also give it a transition to say when I change that transform I want you to move over 400 milliseconds about half second.

Now how do I actually get it to move, CSS is a great way to design UIs because most UIs transitions between states of an application and CSS has class variables that allow you to define your states declaratively so what I want to do is have that state for the application says when my menu is visible when my menu isn't visible, I just add the class menu visible when I want the menu to appear.

Now I put it...this class in the body element because when the menu is visible maybe other parts of the UI want to change as well so it's not really that the menu has to know whether it's visible or not, I put it on the body so let's say that other views in the background can hide themselves because they know that the menu is being displayed over the top of them. So when the menu is visible I'm giving it a transform, translate Y, 0 pixels which brings it to where it normally should be right front and center in the application and that will happen over 400 milliseconds. So that's the effect we're trying to go for.

Now how did I actually add that class to the body, remember I said that there was synthesized properties, so we have this, the menu object has a visible property and when I set that visible property I'll actually want to run some code and iAd JS will look for a function called setPropertyName, in this case setVisible that can give you a class implements this function that code will be executed when the property is set so here I am and I just look at the value of the visible that's coming in, I either add or move that class name from the body of the document.

Also I want to keep actually a copy of the value that I'm setting in, in this case I assign it to the underscore invisible object. Now there's a function called contentViewDidLoad, this gets executed when your view is ready to be displayed on screen or when it's ready to actually have the application displayed on the screen if the application chooses to.

There's really two things we want to do in our...in this function for menus and that is and this is we want to add an event listener for the toggle button, so we want to know when the user has tapped on the toggle button and this is pretty simple, we find the menu toggle button by the query selective function and we add an event listener for the AD control TouchupInsideEvent, we got some great names for events. So really what that does is abstract the function which is when the user taps on something and releases their finger on something.

Now if you've done some touch programming on iPhone you'll know that it can be actually quite complicated to know exactly what things are being touched on when the user moves and what elements are being released on so we've tried to abstract all that for you so we just give you one function, we define this event that we've generated so that you just write one line of code, you attach the event listener, I've given the menu controller itself as the listener object because I want to get told, I don't want have to write a closure for this case, I just want to get all my event processing in one function.

Next I'm just going to iterate the buttons that are in the menu and do the same thing add an event listener for user touch. In that handle, in that event this is, if you're not familiar DOM events give you a feature where in most cases people would say add event listener, event name and then give a little in line function or the name of a function or string that it will be called.

You can also pass in an object and if you pass that object the event system will look for a function called handleEvent on that object and it's a great way to collapse all your event processing in your application to one function so here I'm getting an event type of ADO, I'll just check that we got the right type of event and I want to do one of two things if I was tapping on one of the menu items I'm going to tell my delegate that I was tapped or if it's a toggle button all I want to do is invert the state of the visible variable and this is the thing that will actually execute that code we said before which will swap the class in the body and do the animation automatically. Now the rest of the application is actually pretty easy, we've got a menu controller, all we're doing now is tapping on those buttons and the application is just showing another menu...another view controller depending on what the user taps on.

So I've interacted with this one, we'll go back to the menu, tap on something, another view controller is loaded so all we have to do is go through and make view controllers for the rest of the screens of the views in your application. I'm not going to go into that because they're really all the same as the menu controller.

What I am going to show you is what happens how the application is in fact going to swap between the views. So this is the delegate function in the main application this is called when the user has tapped on a button and all I want to know is what button was tapped on and therefore which view controller am I going to display in my application.

I just load the view controller and set it to be visible but that was really the hard way, I know what you're thinking, I said at the start, I'm writing less code, this is a lot of code in fact I didn't really need to show you anything because most applications they're just going to be transitions between view controllers. So we thought well let's make this easy for the developer, we actually add an attribute called AD transitions on your HTML element which means that you can remove all that event listing and processing code and the framework itself will handle what views are visible.

Let's have a look at how we did that if you remember before we were just specifying buttons, this time I've added just this variable, what I mean is when I click on this button which is the first item in the menu I want the application to transition to the house view controller and it shows the page with the page table view of house prices.

You're probably also wondering how I can read minds. So importantly first impressions count if you were downloading this application tapping on the banner you don't want to have to download that whole application, make the user wait for the whole application to come and all its images, this will be a pretty bad experience.

What you really want to do is sort of have some we call it a preloader or it's really a bootstrap mechanism, you want to give the user something they can interact with and they can gage with straight away, that might be some kind of animation but also it could be say you know even a little game or something that iAd JS gives you a way to sort of dynamically load classes at runtime and that's why we split the view controllers into separate files because maybe we want to create the view controllers up front but we don't want to load the content in which will trigger the loading of images, so up front we get this really great interaction with the application and then while the user is seeing something the content is downloading in the background.

We actually provide another feature within iAd to do this, your ad can provide a manifest file which is a list of files in your ad that are packaged into web application and sent as one hit so it's always the first request in the ad interaction and then it's expanded on the client and the rest of the content can come down as you need it.

Okay so what have you learned, you should structure your application around view controllers, very similar to the way you would develop a native app if you're familiar with that, try and represent your sites as CSS because that allows you to do lots of animation without having to do animation in JavaScript. Also preload your content if you can. So that was part two. Now part three we're going to add some bling.

So when you play video on the iPhone in Safari you know that it plays full screen and this gives you the default iPod's style playback with the dumb button, scrub up, play, pause, whatever but earlier in the demo I showed the ad was playing video in line which is actually very similar to the way iPad plays video, this isn't available in iPhone but it is available in iAds and the reason for this is you might want to say create your own custom controller or custom experience or have video playing in the background of an ad and layer HTML content above it. In the normal form you know the video takes over the whole screen, you're basically completely immersed in the video.

The way you do this is you add a WebKit plays inline attribute to your video element, so within the iAd system if you say WebKit plays in line it will actually give the iPad style experience and here I've added the controls actually because I want to give the default controls but I could have left them off and provided some kind of control within JavaScript myself.

Secondly, the window object within the browser or within the content has got this AD object or AD property on it and this allows you to do some cool things. It allows you to set the user wallpaper if for example you've got an image that you want to use it to allow to save into their photo gallery, it let's you display maps, this is how you interact with the map system, purchase content directly from the iTunes Store.

Steve showed shaky events so you get called when the user has shaken the phone and also normally if you are building an ad, you might want to know what views and what controls the user is most interested in and the ad object allows you to send notifications back to the iAd system which is the aggregated enormously to show sort of like statistics of what parts of your ad the user has interacted with.

So let's look at saving images, it's actually really easy, there's two functions, window.ad.setimageswallpaper and you give it a URL to an image, you give it a prompt that the user has got to get when this function executes and even a listener object we'll talk about that in a minute.

What happens is when you execute that function, the typical popup will slide over the whole screen and it will show you the prompt and allow the user to pinch and zoom, place the wallpaper as they want and then set it to be the home screen or the lock screen or whatever.

Similarly if they want to save the...if you want the user to be able to save the image to their photo album maybe email it to their friends, there's writeImageToSavedPhotosAlbum again you give it a URL and a listener. And what is the listener object. If you're not familiar with JavaScript, JavaScript really only executes in one thread so you don't want to block your URL when something is happening.

So this URL if you called this function it might not be in your ad itself, it might be on the internet, you might be saying I want to user to save the URL, this image from a remote site, you don't want the whole URL to block while that image is being downloaded.

So JavaScript normally the functions are asynchronous, you call this method and then later on when it actually executes you get to be told about it so we have this listener object, this listener object has callback functions, four functions here that get called when the function is actually executed. They're pretty obvious, you get succeed and failed calls when users either save the wallpaper or save the photo albums so you pop up a message to say thanks very much or whatever.

Secondly using maps, so really maps in ads is a new interface to MapKit, they're drawing above all content this is different from other things, you can't over lay HTML above a map, it's really sort of like a plug in that's being displayed above your ad, this is important for a few reasons we'll get into later.

You can ad your own annotations, you can give them custom pin images, any number of pin images, you can show where the user currently is, you get notified when the user zooms to somewhere or pans or you can literally control the view that the user is seeing and let them zoom to a particular spot.

So let's create the map, now I mentioned they're drawn above all content what this, really important, means is that you don't want the map to be, you don't want it instantiate right away in your application because it will hide your ad, what you want to do is create it within the viewDidAppear object, this is a function that's called when you decide to display your view.

I'm just going to create it here, it's pretty simple, I add the listener so I'm attaching my I/O object as the object that's going to get called when the user interacts with the map, I said it's to be hidden, faults which basically just draws it and I give it an inset frame x y width height which describes where within the window of the ad the map frame is going to be drawn.

Then add some annotations which I will do in the next slide and lastly I'm going to let the user decide where they are and you know you don't get access to it, it's the same popup, you know do you allow this ad to see your current location. Now the annotations are pretty easy, obviously they [got a lat, long, this is their position and the name of the description, now this is the title and subtitle of the callouts, I'm going to use the taps on a pin as you might know, a little dialogue box pops up to give the title and subtitle, in this case it's the name of the description, you pass into the map annotation class, you give each annotation an ID and that's because when you tap on it later or maybe when you want to remove it you'll know which pin it is you want to remove.

You give it a callback function, if you could provide a callback function can apply null or a function, when you use a taps on the pin, the callout will happen and the callout the callout will have a little disclosure indicator for the function, that way you can do something like you know if you're showing stores, you know when the user has tapped on the callout and maybe show like directions or more like information or current inventory in the store.

You also give it an image for the URL of the actual pin or null if you just want to use the default one. Now the pinning image is slightly interesting, when you put a pin image or when you use a pin image it's going to be centered directly above the lat/long that you've provided.

Now what this means is in an image such as this which have blown up a pin the center of the image is in fact not where this sort of imaginary cartoon pin is actually dropping into the ground so if I was centering over that point when the user is panning or zooming in it would look like the actual location of where the bottom of the pin is, is moving around so I'm going to tell the system as I create an annotation what the offset from the center of that image is to where I'm sort of visually describing to the location, in this case I'm going 9 pixels left and 16 pixels down within the image coordinates. Lastly I used windows.mapadd.mapadannotation, adding that annotation I've just created and that will drop it into the map.

Lastly when I made the map visible when the view appeared I want to get called just before the view is going to disappear and this is where I just set the map to be hidden so I remove it from the view and then the rest of the view is removed as well and the menu appears or is whatever. So purchase content from iTunes. There's four types of content you can purchase, iOS apps such as Birdhouse, iBooks such as To Kill A Mockingbird, songs such as the Birds, Turn, Turn, Turn or movies such as Twilight, it's cool, I've heard it's cool anyway.

Three ways you can do this, firstly...sorry, three steps you have to do to do this, firstly you have to register your content with iTunes, you have to tell the iTunes system what it is that you're actually going to try and sell, next you have to look up the items with iTunes to get information about that object and the reason for this is, the purchases happening with the account on the phone , the users account and their account might be linked to a different store, so it's got a different price, it has a different name depending on their location or what store they're doing or it might not even be for sale in you if the user is say, you know, multiple items are not available in every store depending on the geography.

Lastly when we've got that we actually want to initiate a purchase and when we tap on a Buy button that you've provided or something we've got to pop up a dialogue to confirm, the user gets to confirm, it says do you want to purchase the awesome movie Twilight for this much money and they sign in like they normally do and buy it, if it's an app it will download the app in the background so when they exit the app they've got your app ready to run.

So let's have a look at actually how we have to...we have to find out how we sell something on iTunes, we have to know what object we've got to sell so we'll look at this, the first thing you notice is I need to recharge my iTunes credit, second thing is we've got this little Buy App button over here and there's this disclosure we click on that, this context menu pops up and at this point you probably want to share this awesome app with your new friend Dean on Facebook or you want to copy the link and let's see what we do when we copy the link, we'll paste it into something so we can see it.

If it's a movie you get this long complicated URL and in there is an ID and that's the iTunes ID that you've actually going to use later when you sell that application or the movie in this case on the iTunes Store so that's how we find the ID.

If it's a song is slightly different and a little tricky, in this case the song is sold by album, we can only sell songs directly in ads so we need the ID that's at the of the URL, not the ID that's a little bit before that's the ID of the album so we want the last one. This application is pretty similar to a movie, you'll see your ID's in the behind.

So what do we do, the first thing we want to do is I've got this array of store items, as I said I need to register, I need to tell iTunes these are the things I'm going to sell inside my ad, just call this function window.ad.store, register items for purchase, send in an array of everything that I potentially need to sell, want to sell, next I'm going to iterate over all those items and say look up the item, this is the state where we're asking iTunes to tell us about it so we can then sell it to the user so I call look up item with ID, I give it an item and importantly I also give it a listener because iTunes is going to send data back to us, we don't want to block waiting for that data to come back we just want to do the look up and get told later.

This is what's going to happen with this next function is what happens when we actually get the result back, you either get told it was failed in which case you might remove the Buy button from your ad or if it succeeded you want to get the data that comes back has got an offer associated with it, that means that means that item is sort of valid for a certain amount of time on the iTunes Store, you need to keep a reference to that so that...because you use it later when you're purchasing and that data that comes back has something has something like maybe the localized name and price that you can display to the user if you want, you need to keep track of the offer ID.

Purchasing is really easy, window.ad.store, purchase item with ID, we give it the ID of the stuff we want to purchase, we use the offer that we received back from iTunes and again we pass in a listener object and we've got those two callback functions, whether the store item purchase succeeded, thanks for buying my awesome app or it failed please try again later. So that was the enhancements through iAd.

The last bit I said earlier on that we wanted to build as little code as possible and I had to customize something so I've just got some demos of taking the menu that we built or we built at the start or the middle of this presentation and see what things we can do just changing the style sheet alone, not changing the code.

So this is the iAd Tester application, so I ran it and if I've dragged content into iTunes it syncs across the device into iAd Tester to this button and it will ask me to pick from ads that I've synced onto the device. In this case I'm just going to pick this one.

This one is selling a fake product called the assimilator, it's pretty similar to the code you had before, but it's more than that, it's the exact same code that you saw in the Treetops Realty demo, it's pretty much the same effect, nothing really interesting there, let's pick another version, in this case I only changed the CSS and I've just changed the CSS for what happens when the body is visible, in this case it's got this 3D effect.

This allows you to customize the menu to be what ever you want for your particular application, let's go a bit further...now in this case again same code no JavaScript changes what I've done is added a slightly different transition but I've also added to the CSS a little delay so that every button it's got a little slight transition delay on it's application. Again zero code change other than one line of CSS.

Now this time what I'm showing is that in fact you can sort of apply it to a completely different view in this case the menu has animated back ground, so I've got images that are animating in the background, there's two images, they're the same and they are sort of scaling and rotating behind so giving me animation and again I've got this sort of nice doors effect as I animate. This is pretty cool because that means you've just taken that one little component and you can reuse it in multiple ads or applications to show...you know get a completely different effect.

The last one I actually do change the code but I don't change the JavaScript code I'm just changing the HTML that I'm loading, now in this case it's something you might have seen around, this time my menu is this wheel and for the Madman fans out there, it's not a wheel, it's a carousel.

So in this case all I've done in the HTML is instead of saying I'm in AD View, I've said I'm an AD carousel view and iAd JS is building this carousel with all the interactions and the throw and it tells you what buttons are done, Steve called this an HTML Gizmo, I thought that was a cool name as well.

Okay, so what have you learned, iAds really are just HTML apps or mini-apps, we've got this framework that allows you to build really rich performing applications, we hope you use it. You can use your existing skills and tools to create them, there's been a whole great track of this conference about doing awesome things with CSS and JavaScript and using the Web Inspector and all this great functionality that Safari has provided to make awesome applications, ads are just HTML applications.

Importantly, you've got to make an awesome banner because you've got to get the user in and again like I said iAd JS framework is something we think is really great and you can use to create great applications and of course there's other features. Just before I say this, so I've been at Apple for a while and one of the things like I really appreciated it, I'm being serious for once is that we've created all these technologies and it's fun for us to create technologies, do awesome things and like highly performing but we're some of the nerds behind the scene, what's the best thing is when you give like the web community a tool and they sort of like really surprise you and for a great example is blogs popping up about like cool things you can do with HTML5 and I'm really looking forward to you guys getting this framework which you can download and doing awesome stuff and really blowing our minds.

So for more information you probably heard Vickie Murley's name if you've been here during the week, she's our Safari's Technology Evangelist, there's some...Apple has some corporate sites on the iAd framework and a developer site and that's where you can download the framework and the iAd Tester and a few other things. There's documentation up on developer.apple.com and there's Developer Forums which I'm sure you're all familiar with.

So, this I said was part one coming up next is part two right after the break. Earlier in the week there was a session on if you're an app developer actually using iAd within your native app, that's going to be...tomorrow there's a repeat of delivering audio and video which is really important to the iAd network and there was some other sessions earlier in the week that you've probably missed that I'm sure HTML6 will have time travel so you'll be fine there that has CSS effects and another important one was how to do touch events which is something quite tricky on iPhone.