Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Installing device emulators

From: Mobile Web Design & Development Fundamentals

Video: Installing device emulators

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.

Installing device emulators

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.

Show transcript

This video is part of

Image for Mobile Web Design & Development Fundamentals
Mobile Web Design & Development Fundamentals

46 video lessons · 24671 viewers

Joe Marini
Author

 
Expand all | Collapse all
  1. 2m 48s
    1. Welcome
      1m 2s
    2. Using the exercise files
      1m 46s
  2. 29m 25s
    1. Understanding the mobile context
      8m 5s
    2. A survey of mobile sites
      11m 44s
    3. Targeting mobile browsers
      4m 31s
    4. Previewing a complete mobile site
      5m 5s
  3. 27m 20s
    1. Designing for one web
      3m 43s
    2. Using well-defined web standards
      3m 45s
    3. Designing mobile-friendly pages
      3m 40s
    4. Being crisp, clean, and succinct
      5m 45s
    5. Minimizing input where possible
      6m 47s
    6. Focusing on the core scenarios
      3m 40s
  4. 1h 13m
    1. Installing the tools
      3m 52s
    2. Setting up a local web server
      9m 13s
    3. Installing device emulators
      17m 5s
    4. Using device emulators
      13m 9s
    5. Downloading Modernizr and Mobile Boilerplate
      6m 22s
    6. Building a first mobile web page
      5m 43s
    7. Developing mobile pages with desktop browsers
      8m 6s
    8. Exploring useful mobile web development resources
      10m 23s
  5. 53m 26s
    1. Reviewing mobile markup languages
      5m 10s
    2. Understanding content adaptation approaches
      10m 32s
    3. Controlling the viewport layout
      12m 50s
    4. Designing forms
      13m 30s
    5. Using CSS media queries
      11m 24s
  6. 1h 11m
    1. Detecting client capabilities with script
      10m 8s
    2. Caching information with local storage
      9m 16s
    3. Determining position with geolocation
      12m 52s
    4. Minimizing HTTP requests with data URLs
      7m 39s
    5. Understanding user agent detection
      9m 8s
    6. Using server-side detection with PHP
      6m 52s
    7. Using server-side detection with ASP.NET
      4m 54s
    8. Using HTML5 Boilerplate for mobile
      11m 6s
  7. 39m 22s
    1. Measuring performance
      7m 41s
    2. Creating full-screen web apps
      6m 30s
    3. Customizing the user interface
      5m 14s
    4. Detecting orientation changes
      3m 58s
    5. Detecting device movement
      5m 21s
    6. Using touch events
      10m 38s
  8. 47m 14s
    1. Taking a look at the finished site
      7m 40s
    2. Examining the header and background image style on the Home page
      10m 10s
    3. Examining the hover effect and layout styles on the Tours page
      6m 42s
    4. Examining mobile forms on the Contact page
      9m 45s
    5. Viewing and testing the mobile site on emulators
      8m 11s
    6. Viewing the site on devices
      4m 46s
  9. 2m 34s
    1. Goodbye
      2m 34s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Mobile Web Design & Development Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.