HTML5 Mobile UI: Introduction

[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 set up Workspace

Sign up