Viewers: in countries Watching now:
This course surveys the core principles and techniques essential to building web sites for mobile devices. Author Joe Marini introduces the mobile context, sheds light on its unique coding requirements, and discusses interface design techniques that enhance existing sites for mobile viewing. The course shows how to approach designing for mobile form factors such as smaller screens and finger-based interaction, along with how to incorporate CSS3 and HTML5 capabilities, such as geolocation, local storage, and media queries.
Okay, so now that we've installed our local web server and we've made sure that the localhost server address is working, using our desktop browser, we're going to go ahead and get the emulators now. And on Windows we're going to download and install three different emulators: we're going to get the emulator for Windows Phone, for Android, and for Opera Mobile, and then we'll go take a look at the iPhone Simulator over on iOS. So let's go ahead and start with the Windows Phone Emulator; it's free, as are all of the emulators that I'm going to be showing you today.
So first when I click over here on this link that says Download the free tools. Now to get the Windows Phone Emulator we start off by going to the address create.msdn.com, and that will take you to this web site that you see here. And it may look a little bit different when you come here; these web sites are always being updated. But the link that we're interested in is this one that says Download the free tools. So the Windows Phone Emulator is a free download and it's part of a larger toolset that you have to download. There's no way to download the emulator by itself, at least not right now.
So when you click on that link, you will get taken to the download page for the Windows Phone SDK. And again, this may look a little bit different when you get here. Now, the one that I'm going to be using is the Windows Phone SDK for 7.1 Beta 2. This is the Mango release of Windows Phone. And again, by the time you get here, this may be more current, or it may be a little bit different, but the download process is the same. Essentially, you're going to click on this link and it's going to take you through the process of downloading and installing everything you need.
And then when everything installs, the shortcut to the Windows Phone Emulator will be found under the Windows Phone Developer tools in your Start menu on your machine. So that's how we get the Windows Phone Emulator. Okay, let's now go take a look at downloading the Android emulator, and to do that, we'll go over to this tab here. And for Android, you go to developer.android.com and this is the web site that you'll be taken to--or something like this; again, it may look different by the time you get here.
And right over here, there's a Download link. This is Android SDK, and we'll click on the link for Learn more. And this is the download page for downloading the Android SDK. Now the Android SDK runs on Java, and because it runs on Java, it runs on Windows and the Mac and on Linux. So you need to have Java installed before you try to install the Android SDK. The Android SDK emulator does not install this for you. If you need to have Java installed, just go to java.oracle.com and that will take you to the link that you need for installing Java.
Now once you've got Java installed, or made sure that it's there, you can download and run the Android SDK. Now on Windows, which is what I'm using, I will click on the installer_r12-windows.exe-- that's the recommended link--or I could download the ZIP file for any one of these other systems. One of the things I want to point out is that in the R12 release--and they may have fixed this by the time you download this--but the Android SDK can't be installed in a path that has a space character in it.
So I highly recommend that you just install it at the root level of whatever hard drive you're using. So here on my Windows system, that would be C:/android_sdk. I would just give it my own path. I would not use the recommended path that it comes with. Again, they may have fixed this by the time you get to it, but just to make sure, I would install it in its own path. Make sure that there are no spaces in the file path or directory path that you use to install it. So once you've got the Android emulator installed through this link, or for whatever platform you're using, we can then go to the Opera Mobile installer, and that's located here.
This is at opera.com/developer/tools, and again, this might look a little bit different by the time you get here, but the Opera Mobile emulator is available through this download site. Now, just to be clear, we're not looking for Opera Mini; what we're looking for is Opera Mobile. The Opera Mini Simulator-- you'll see this is down here-- this is a Java applet that runs inside the web browser and simulates feature phones that use the Opera Mini browser. And that's not what we're going to be using. We're going to be using this one right here, the Opera Mobile emulator.
So if I click on the Opera Mobile Emulator link, you'll see that this is a stand-alone running application that uses the Opera rendering engine called Presto. It's not really a virtual machine, so to speak. It's actually a Windows- or Macintosh-native app that happens to run the mobile version of Opera's rendering engine. And so if you click on this link right here, the Opera Mobile Emulator 11,-- it may be different for you by the time you get here, but this is the link you want. And when you install it, it will ask to create a desktop link for you.
And I've chosen to make one just to make things simple. Okay, so now that we have the emulators installed on our machine--and I've already gone through this process, so I've quickly all these links and installed the tools-- let's take a look at using each one of the emulators. Okay, so here on my Desktop, the first thing I'm going to do is bring up the Windows Phone Emulator. So I'm going to double-click this. And you'll see that Windows Phone Emulator is starting to launch, and it's going to load up. Now when the Windows Phone Emulator loads up, you'll notice that the only installed application is Internet Explorer.
And this is a real Windows Phone operating system running inside a virtual machine. It just simply doesn't have all the other applications installed. So before I launch IE, let's just take a quick look over here at the toolbar. You can see that as I move my mouse over here, this toolbar lights up. And you can do all kinds of things over here. You can rotate the emulator in different ways. I'm going to zoom it a little bit so that it fits down to the screen better, so I'll chose 50%, and that's a little bit more manageable of a size. All right! So now that we've got the emulator running, the first thing we need to do is make sure that we can access our local web server from the emulator, because we need to be able to do that to test our files.
So I'll go ahead and I'll launch IE, and Internet Explorer comes up, and I'll just click through these screens, and we'll wait for this to finish loading. So what I'm going to do now is click in the address bar and enter the localhost address of my local web server. And I can use the onscreen keyboard to do that, but that's kind of tedious; instead I'd rather use my hardware keyboard here on my computer. So to enable the hardware keyboard on the Windows Phone Emulator, I'm going to type the Page Up key, so the Page Up key will tell the emulator don't use the built-in software keyboard, use the keyboard I've got right in front of me.
To get the software keyboard back, I just use Page Down. So I'll click in here and you'll see that after I typed Page Down, it comes back. So I'm just going to hit Page Up, and I'm going to type http://localhost/. And if all goes well, we should see the same IIS Splash Screen that we saw in the previous movie that shows that the servers running, or for whatever local web server you install, you should get the same homescreen that you saw in your desktop browser. So I'll click OK.
And you can see that the IIS 7 Splash Screen comes up, which means things are running just fine. Okay. So let's go ahead and minimize this. Now let's take a look at the Android SDK. So the Android emulator, as I mentioned earlier, runs on Java. Now when you launch the Android emulator the first thing it's going to do is go out to the network and take a look to see if there are any package updates that are available from Google. And I'm not going to go through this process. You'll have to go through this the first time when you launch the Android emulator, you'll have to download the various packages for the various versions of Android that you want to test on.
And the latest ones as of right now are Android 3.1 and 3.0, going all the way back down to 1.5, I believe. So I'm going to skip this process, because I've already done it, but when you launch this for the first time, you'll have to install the various packages for the various versions of Android that you want to test on. So I'll click Cancel. And you can see here that in my SDK Manager I have what's called Virtual devices. We'll get back to this in a second. When I click on the Installed packages link, these are all the installed packages that I have in my Android SDK, and you can see I've got 3.1 all the way down to 1.5.
Now most of these are for native application development on Android, but each one of these contains a version of the Chrome browser for that particular phone, and that's what we're going to use to be testing on. So if we go back to the Virtual devices link over here on the left, the way the Android emulator works is you make a new virtual machine that represents the kind of phone that you want to test on. Now, I've already made one using Android 2.3.3. I'm going to show you how to make a new one. So I click on the New button, and I need to name my new virtual device, and I'll just call this mynewdevice.
And then I need to choose a Target, and this is the version of Android that you want to target. So I can choose, say, for example, Android 2.2. And then I need to set some settings for this particular device. So for example, for the SD Card, I need to give it a size. I'll just give it a 64-MB card. And then for the skin, I can choose what kind of screen size I want to use. Do I want to use a WVGA, HVGA, whatever? I'll just leave it as the as the default for now, and then I'll just click Create AVD.
These are all advanced settings. You don't need to worry about most of them. This is the most important one right here. Just give it a 64 Meg SD Card size, or how many megabytes you want to test with and then just click Create AVD. It says, okay, it looks like my AVD was created. I now click OK, and you can see that up here in the list I've now got my new device, along with my 2.3 device. So to start it up, I'm going to click on the device that I want to start, and I'm going to click the Start button. And I've got some Launch Options here, and this is the skin it's going to use. This is the pixel density.
Now to make things appear better, especially on the screen that we're watching this movie on, I'm going to click the Scale display to real size, and I'm going to give it a 6-inch screen, and then I'll just click the Launch button. So now the emulator is starting up. You can see that some things are going on in the background. You can see that here's the machine beginning to come up. And this may take a few minutes because it is a virtual machine running on top of Java, on top of my Windows here, and we'll just wait for this machine to boot up.
And okay, it looks like our virtual machine is just about ready. All right! It looks like our machine is now booted, and here is the home screen for my Android 2.2 device. Now again, we want to make sure that our local web server is running correctly, so what we're going to do is launch the browser on our Android device, and that's this little world icon right here. So we're going to click on that, and that's going to bring up the browser on our simulated Android phone here.
And you can see that it goes to the Google homepage by default. Okay, so to make this work, what we're going to do is try out the localhost URL. Now on Android, things are a little bit different. You can't just simply type in the word localhost. And the reason for that is because if you use the localhost on the Android device, it's going to think you're trying to access the localhost server on the Android phone itself, which is not what we want.
So there's a special address you have to type in that says, "Hey, Android Emulator, don't access the localhost here on the phone. What you really want is the localhost on the host computer that this emulator is running on." And so the way that we do that is we're going to type in http://, and the address that we're going to use it is a special web address, which is 10.0.2.2. And this tells the emulator that the localhost that we want is actually the one that's in the host computer, so I'll click the little Go icon right over here.
And if all goes well, we should see the IIS 7 Splash Screen. Yep! And there it is! So it looks like Android emulator is installed and able to access our localhost. Now just to show you how this works on the emulator, as opposed to the desktop web browser, recall earlier that we typed in the path to our file. And so to do that here on Android, I would simply type in the same name of the folder that we used earlier, which is MobileWebDevFund, and then the path to the file we want to test, which if you recall correctly was 03_settingup.
Now, feel free to refer earlier in the course in the movie where I showed you how to set the localhost server how to get to this file. So we'll type 03_settingup, and if you recall correctly, the name of the file was first_mobile_finished.html. So now after I click the Go button right here, we should see the First Mobile Page. Yep! And there it is! So it looks like we are now able to get to our local web server and load our page.
All right! And then let's take a look at the Opera Mobile emulator, so let's minimize all of this. So here's the Opera Mobile emulator. The Opera Mobile emulator, when you launch it, a custom launcher comes up. And under the Profile menu, you can choose a preset phone that you want to launch that has the Opera Mobile browser on it, or you can just use a Custom setup. And so for here, under Resolution, I'm going to choose the screen size, and just to make things fit on the screen, I'm going to use 320x480, and I'm going to click the Launch button.
And you can see when I click the Launch button, the Opera Mobile emulator comes up, and this is the same Opera Mobile browser that is used on several different phones. So again, just to make sure things are working correctly, let's go ahead and type http://localhost. And you can see that things are running just fine. The IIS 7 Splash Screen came up. And this should look the same for you on your computer, or depending on what web server you're using, this may look a little bit different. All right! So that's setting up the emulators on Windows.
Now let's go over to the Mac and see how we set up and use the iPhone Simulator on the Mac OS. All right! Installing the iOS Simulator on the Mac is pretty easy. You get it from the App Store, and it is a part of the Xcode toolset that you can download. Now Xcode is a pretty big tool, and it takes a lot to download it, so let's go to the App Store and see if we can find it. Okay, so here I am in the App Store and I'm just going to go ahead and do a search on xcode, and we can see that Xcode comes up. It's right here.
And Xcode is a large tool. You can see right here, it's 4 gigabytes, and I've already got it installed. You can see the Installed label over here. Now if you don't have it installed in your machine, you can download it. If you're already a member of Apple's Developer Network, it's free for you. If you're not already a member of Apple's Developer Network, it's a modest $5. You can see the price over here; it's just $4.99. So you download the Xcode tools, and this will download everything you need to do Mac, iPhone, and iPad development. Of course, we're interested in the iPhone right now.
So once you download the Xcode environment, you'll have the iOS Simulator. Now I've already got it on my machine, so let me bring it up. Okay, so now once you've downloaded it and you've got it on your machine, you can launch the iOS Simulator, and you can launch the iOS Simulator from one of a number of places. You can look for it on your hard drive, you can use Spotlight to go find it, and so on. I've got it launched right here, and let's take a quick look at the iOS Simulator. You'll notice that there is the current version, which is Version 4.3, and just to make sure that things are working, I'm going to go here into the simulator and I'm going to type in http://localhost/.
And you can see that we still get the same, "It works!" result that we got for the desktop version of Safari. So now that we've got the simulators installed on our Mac and our Windows, we can now start taking a deeper look at how each one of them works.
There are currently no FAQs about Mobile Web Design & Development Fundamentals.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.