New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

Start learning with our library of video tutorials taught by experts. Get started

Mobile Web Design & Development Fundamentals
Illustration by

Setting up a local web server


From:

Mobile Web Design & Development Fundamentals

with Joe Marini

Video: Setting up a local web server

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.
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

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Mobile Web Design & Development Fundamentals
5h 47m Beginner Jul 20, 2011

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.

Topics include:
  • Implementing well-defined web standards
  • Working with Modernizr and Mobile Boilerplate
  • Building a first mobile web page
  • Understanding content adaptation strategies
  • Designing forms for mobile
  • Detecting client capabilities with script
  • Using server-side detection with PHP and ASP.NET
  • Working with mobile browser capabilities
  • Viewing and testing the mobile site on device emulators
Subjects:
Developer Web Web Foundations Mobile Web
Software:
HTML
Author:
Joe Marini

Setting up a local web server

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.

 
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.
Upgrade now


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.

join now Upgrade now

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

Notes cannot be added for locked videos.

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.