Start learning with our library of video tutorials taught by experts. Get started
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.
All right. In this movie, I am going to show how to install a local web server so that we can test our mobile web pages using our local machine. Now I am going to stress, before I do this, you don't strictly need to do this if you don't want to. If you already have a web server that you use for your web development, you can just simply make a directory on that web server and serve your mobile web pages from that directory. But I'm going to use a local web server because it just simplifies the process. I can edit the example files locally, copy them to my local web server, and then just test them out. And the reason why we need to use a web server is because the emulators that we are going to be using don't have the ability to open up local files from the system.
They are virtual machines running inside their own separate processes as if they were on actual phones, so they don't have the same access to the local file system that your normal browser has. So to get around that issue, we're going to use a local web server. Now, the local web server that I am going to use here on my Windows platform is going to be IIS, or Internet Information Services server, and it's a free web server made by Microsoft. Now, you might choose to use a different web server. You might use Apache, you might choose to use something different on the Macintosh and that's up to you.
For the moment, I'm going to show you how to install IIS on your system, and then we will talk a little bit about some other servers. Okay, so here I am on microsoft.com/web, and what I am going to do is click on the Platform button here. And when I click on the Platform link, you will see that there is a link right here called Get the Microsoft Web Platform installer. It is a free installer, and it contains not just IIS, but a whole bunch of other stuff that you might want to install on your local server, depending on what kind of development you are doing. So if you click on this, you will download the Web Platform Installer, and it looks a little something like this.
Now I have already done it. Okay, so here is the Web Platform Installer, and it might look a little bit different when you get here. I'm using version 3.0, but when you downloaded it, it may have changed slightly, but the main important point is that you use this to install various web platform products on your Windows system. And you can see here I have got the Spotlight tab up, but let's just take a quick tour of this. If we look under Products, you'll see that there's a whole bunch of stuff that you can install on your local system and under here on our Applications, there's more stuff. Let's go back to the Products tab.
You will see that there are things like ASP.NET and IIS and the .NET framework. Then if you go to the Spotlight, you will see that there're things like Drupal and the Orchard CMS, and there's also Joomla! in here. There is a whole bunch of things you can download and install. Now I'm only interested in the IIS Recommended Configuration, which is this thing right here, and you can see that I have already gone through this process, so I have it installed on my system. Now if it's not already installed, you'll see a button that looks like this one here. It says Add. So I would click the Add button and then click the Install button, and then that would install IIS on my system.
Now, perhaps you are not going to be using IIS, perhaps you want to use something else like Apache. It turns out that there is a really great course that teaches you how to install Apache, MySQL, and PHP right here on lynda.com. It's written by David Gassner and if I were you, I would just concentrate on the first few chapters-- Chapters 1, 2, and 3--which describe how to get Apache installed on your machine and up and running. So once you have IIS installed on your system, you'll see something like this on your hard drive.
IIS creates a directory called inetpub on the root level of whatever your boot disk happens to be, and for me that happens to be C:. So here's the inetpub and if you look inside there, there is another folder called wwwroot. wwwroot is the root-level directory from which all of the web pages are served under IIS. And again, this will be slightly different for you based upon what web server you are using. If you are using Apache or if you are using the Macintosh web server, this directory might be a little bit different.
So you'll have to refer to the documentation for that particular web server. Okay, now once the server is running, you'll be able to access the local host URL scheme on your computer. So let's see how that works. Let's go back to the browser. Okay, so here I am back in the browser. Now once I've got the web server running, I will be able to type something like http://localhost. Localhost basically means, hey, instead of going out to the Internet and getting a web page, just go to the root directory of the web server on my machine and get whatever the index.html or other homepage there happens to be.
So I am going to click Return, and you will see that, for me, I'm getting the IIS7 splash, or welcome screen for this particular server. Now based upon whatever web server you are happened to be using, this might look a little bit different. It might be a simpler page. It might be something about Apache. Whatever it is, the point is that this is the file that is in the home directory of the wwwroot folder. Now on the Mac, getting the web server up and running is a little bit different, so let's go take a quick look at that. On the Macintosh, things are a little bit different.
The web server is already set up for you and is included with your Mac, and all you need to do is to find it is start off at the root of your hard drive-- here it's Macintosh HD. And if you go into the Library folder and you scroll all the way down, you will see a folder named WebServer. Now if we double-click on that and we double-click on Documents, you will see that this folder is already populated by some content. In this case, there is a file named index.html.en, for English. So I am going to go ahead back to the Safari window over here, and I am going to type in http://localhost. And you can see that we are getting a little message here that says, "It works!" Let's go back to the window.
It works is the contents of this index.html.en file right here. So if you're using a Mac, the web server is already included for you, and this is the folder where you will place the files that you want to test on the iOS simulator, which we will take a look at later. So as I mentioned earlier, the wwwroot folder is where files get served from and if we click on that and look inside, you will see that this file right here, this is the file for IIS, and that's the content that we're seeing right here in the browser that's coming up when we type in the localhost URL. All right! So now that we have got the local web server installed, now we have to see how to use the exercise files using our local web server.
So to do that, I'm going to create a new folder here in the root level of my WebServer's folder. Now let's click on New folder, and again, this might be a little bit different for you based on the system you are using. So I will click Continue, and I am just going to name this MobileWebDevFund, and you can name it whatever you want; it doesn't really matter what you call it. So inside MobileWebDevFund, I'm going to copy all of the exercise files for this course.
So if we bring up the Exercise Files folder for the exercise files that's currently sitting on our desktop, and if I just simply copy all of these, I will copy, and I will just drag them into MobileWebDevFund and yes, I want to go ahead and do that. So now it will copy all of the exercise files into the wwwroot folder inside the MobileWebDevFund and if we look inside there, you will see that that's where all the exercise files now are. So the way this is going to work in this course is we are going to use the local version on the desktop of the exercise files--that's these guys right here--and we will copy each one of the edited files into the folder corresponding to that exercise file on the web server when we are ready to test it.
So to make sure that everything is working, we can try one out. Let's go ahead and look under the settingup folder. You will see a file named first_mobile_finished.html. Again, that's in the 03_settingup folder under MobileWebDevFund. So if I go back to the browser, I will be able to type something like localhost/MobileWebDevFund, because that's the name of the folder I created at the root level there. Then I will type in '03_settingup' and then '/first_mobile_finished.html' and you can see that now we are loading up the first mobile web page example for the course, and that's being served from our localhost local web server.
Now again, I want to stress, if you already have a web server that you're using, you don't need to go through this whole process. I'm doing it because it's going to be a lot easier for me to make edits to the exercise files for the course and then just test them out locally. But you're free to use whatever web server that you happen to have already set up, or you can use a different local web server than the one I've shown here. I have just shown how to set up the one for IIS and for the one on the Macintosh.
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.