HTML5 Mobile UI: Introduction4:21 with Jim Hoskins
This is the first Project in a multipart series. The next Projectss in the series will cover managing the data with Backbone.js, adding location information with HTML5 Geolocation, and making the app run offline with the HTML5 Application Cache. In this first video, we will take a look at the final project that we'll be building during this Project Series.The final project that we will be building can be viewed here.
[Jim Hoskins] In this Master Class series, we'll be creating an HMTL5 0:00 mobile web application. 0:03 The application will allow you to take notes, add your location to the notes, 0:06 and it'll keep all of the data stored locally. 0:09 In this first Master Class of the series, 0:12 we'll be setting up the user interface for our application. 0:14 In upcoming Master Classes, we'll add the data management logic, 0:17 geolocation, and the offline capabilities. 0:20 [?music?] 0:23 [HTML5 Mobile Development with Jim Hoskins] 0:36 So let's take a little look at the application as it will appear at the end of the project. 0:43 I'm going to be viewing it in the iPhone Simulator 0:49 which we'll go over how to install when we start getting our tools together. 0:52 So I'm going to just open up Safari--this is being done for the first time-- 0:56 and to load up my application, all I need to do is load up localhost 1:00 and we have our application showing up. 1:07 So this is our home screen. 1:10 It's basically just a button with New Note. 1:12 We actually have two buttons right now; we're probably going to remove one of them, 1:15 and two list items: a listing of our Most Recent Notes and our Nearest Notes. 1:20 We'll just simply open up the New Note 1:25 and we can add a note with a title, 1:28 so we'll say First Note 1:31 and This is our first note's body. 1:34 And we have an option to tag it with location, so I'll just turn that to Yes 1:42 and we'll click Save. 1:46 Now, something that's just popped up for me, since it's our first time doing it, 1:49 Mobile Safari would like to use our current location and that's because the device 1:53 is actually asking for our GPS location. 1:56 So I'm going to allow it, and this is just to allow the actual Simulator 2:01 to access the location data of my computer, 2:05 so I'll click OK. 2:08 And then, the actual iPhone OS in our Simulator 2:10 will actually pop up the same confirmation box 2:14 saying that the phone is now allowed to share its location with our web app, 2:17 which we do want to do, so we'll click OK. 2:23 And now, it's created a Note. 2:27 We can go into our Most Recent Notes here 2:29 and see our First Note has been created. 2:31 We can click into that, so we can see all of our information about our Note 2:34 that we've created and this is our First Note. 2:38 We can see the body of our First Note here, 2:41 and since we added Location data, we can see the latitude and longitude 2:43 as well as a rendered map with a marker on the point where the Note was created, 2:47 in our case, our downtown Orlando office where we're producing these videos. 2:53 So we can also go Back, 2:58 go back to our list, we can see the Nearest Notes, obviously. 3:01 We have a single note. 3:05 We can update our location so it can resort it, 3:09 and we can do things like actually editing a note by clicking this button up here. 3:12 A form will be filled out and we can update it like so 3:16 and save it out. 3:22 And so now we can see that the Note has been updated with our new punctuation 3:25 in multiple places in our application, for instance, here 3:30 and on other lists 3:34 and on the actual page for our Note. 3:39 Now, all of this is happening on a single HTML page. 3:42 and all of this can be cached by the browser so you don't even need 3:46 to be able to connect to the Internet after the first time you've used the application. 3:50 In addition, all of the data is actually being stored on the device itself, 3:54 so it's not communicating with any server to store the information. 3:59 So again, this can be used completely offline. 4:02 So now that we've seen our application, 4:07 let's take a look at the planning process for creating our mobile offline web application. 4:09 So now we've seen the application that we're going to build. 4:15 In the next video, we'll begin the planning process for our HTML5 mobile app. 4:18
You need to sign up for Treehouse in order to download course files.Sign up