Sarah Laiwals: Welcome to Session 208: Creating Safari Web applications with Dashcode. I'm Sarah Laiwala, one of the engineers on Dashcode, and Sarah Oddwala is what my manager just changed my last name to. But-- and that will be a crack at my bad jokes I was going to put in. OK so let's go ahead and begin with a quick history of Dashcode. Back in the Leopard days we presented Dashcode 1.0, where you could create Dashboard widgets very easily using our templates.

Last year, we released Dashcode 2.0, where you could create iPhone web applications. One of the biggest features that we added was that you could run and debug your iPhone web application directly into-- in the iPhone simulator. So this year, we've decided to bring all of the powerful tools like the JavaScript debugger, the ability, the control you have when designing your user interface and bring to you Safari web applications. Clap please.

[Applause] Thank you. Thank you. So what exactly is new in Dashcode 3.0? Well, you can now create Safari web applications and iPhone web applications in 1 project in 1 IDE. You can use our cool new templates like the podcast template, the RSS template, the browser template to get you started and they'll run in the browser simulator and if you need to inspect the elements on your page you can use the WebKit inspector that we've embedded directly into the browser simulator. So as you all may know HTML 5 and CSS 3 have gained a lot of traction this year.

Safari 4 has done an incredible job embracing these features and so have we. We now give you the ability to create offline web applications so that when your browser is online it caches and synchronizes the data so that when you're offline your browser knows what to render. We've also added support for the video tab which works similarly to the way image tags work for images but we've made this is as easy as dragging and dropping a video directly into Dashcode. Now this is better than plug-ins because you can apply CSS effects like reflections and transformations to your video and you can also overlay elements.

Now, I just mentioned CSS effects. Dashcode now has support for reflections, transitions, animations, transforms. So take the reflections for example. In the inspector you can visually set the reflection that you want on a particular element. We've also added support for transitions in our stack layout part so that when you go from 1 view to another you can set the transition that you want just from the inspector. Now I just mentioned parts. So what are the new UI parts? Well, we've added the split layout part.

You can use the divider here to set the area of the view. We've also added the grid layout part. So if you have a collection of items like images or video you can put them into a grid. And list, that's new to Safari web applications. We've added features to the list like keyboard navigation. You can use the up and down arrow to go up and down the list.

We've also added multiple and empty list selections. And one of the coolest, the most mind blowing feature that we've added to Dashcode which Max Drukman showed you at the DT State of the Union is bindings where we take your JSON and XLM formatted data and put that directly into your web application without you having to write any code. [Applause] Thank you. So let me give you a brief tour of Dashcode.

So when you launch Dashcode you're greeted with the template chooser, where you can create Dashboard widgets or web applications. You can create 2 types of web applications: Safari, Mobile Safari, or both. And we've provided 5 new templates for you to do that which come with both types of web applications.

So let's go ahead and create a podcast project. This big area right here is what we call the canvas where you can visually design your user interface. You can resize the elements on your page or you can use the parts library to drive more elements to the canvas.

This right here is what we call the navigator, which is just a list of dom elements. So if I click Title for example in the navigator the selection is reflected in the canvas and at last in the bottom left corner is what we have what we call workflow steps.

So if you were creating a web application from scratch and you didn't know where to start from, we help you, we guide you through doing that. So what's the first thing I need to do here? If I were using the workflow steps it says to create-- set the source podcast for your widget and I can click this Go To button here which takes me to the application attributes.

So in the application attributes all I need to do is enter my feed URL because this podcast template is pretty much ready to go. I just need to add my tiny bit of customization. So I'm just going to grab a feed from the Science Friday website which looks like this and I'll go ahead and select the XML feed here, let me show you what that would look like.

Looks like that and we'll now go into Dashcode and we'll just enter that into the podcast URL feed. Now one thing that we need to remember here is that web applications have a same-origin restriction which means that your data must come from your server that your web application is hosted on.

So when I hit Run, Dashcode is going to ask me whether I want to simulate running on this domain and I'm going to go ahead and say yes because I want Dashcode to bypass that restriction in the browser simulator. So when I hit Run my podcast project appears in the browser simulator.