Module 04 Lab - Basic User Interface Design

Module 04 Lab - Basic User Interface Design/Module_04_Lab01_Worksheet_Updated.docx

Module 04 Lab Worksheet

Basic Web Interface Design

Lab Activities:

· What is Responsive Web Design?

· Build a Website by Hand

· Build a Website Using a Template

· Update your Week 3 Website using Responsive Web Design

Introduction

At this point you should have, at minimum:

· An IDE (Integrated Development Environment) for your code

· An SQL administration utility (in our case, PHPMyAdmin)

· A MySQL database dbtest.

· A basic Web search form for dbtest that will let the user search by surname.

This lab assumes that you have a working knowledge of HTML, CSS and Javascript. Links to tutorials and other documentation are available in the course content.

What is Responsive Web Design?

In the Bad Old Days (™), Web developers had to make a choice: What browsers should they support? This was important because even for moderately complex pages developers would have to create separate layouts for each platform and browser application and then redirect incoming requests to the page that would render correctly on the user’s device.

Browsers have become more standards-compliant but now there are more types of devices. Developers have to code for desktops, smartphones, feature phones, tablets and even set-top boxes.

Responsive Web Design is an attempt to minimize the amount of development work while still letting the page render properly on different platforms. With advances in HTML5, CSS, Javascript and other cross-platform Web frameworks, it’s now possible to create a site that is responsive to the end user device. You write your code once and it renders correctly on a desktop, a phone or a tablet automatically.

Build a Website By Hand

Bootstrap is an open-source HTML, CSS and Javascript framework that makes creating responsive websites easier. Your IDE has this framework pre-installed so we can start using it right away.

Before we begin, you’ll probably want to see an example of Bootstrap in action. Move the demo HTML file, bootstr_demo.html to your test folder and point your Web browser to it.

The example comes from the W3Schools Bootstrap tutorial at http://www.w3schools.com/bootstrap/default.asp

Try resizing your browser window. What happens?

Let’s take a look at the key elements of this page. Starting at the header, we have:

<meta name="viewport" content="width=device-width, initial-scale=1">

This is the meta tag that tells the browser to size this page correctly. You need this for all of your responsive pages.

<link rel="stylesheet" href=" http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css ">

This is a link to the Bootstrap stylesheet. This lets you take advantage of Bootstrap elements like rows in your page.

<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>

JQuery is a free Javascript library that adds many useful features to help you create dynamic Web pages. Ajax ( Asynchronous Java And XML) is a way of updating parts of a Web page without reloading the whole thing. This tag links to a script that loads JQuery functions that use Ajax.

<script src=" http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js "></script>

This tag links to a external Javascript file that uses the Bootstrap stylesheet that we loaded earlier.

<div class=”container”>

.

.

</div>

This is an HTML class that groups our page elements together.

<div class=”jumbotron”>

</div>

This is a Bootstrap class that renders as a big grey box with rounded corners. Very useful if you want to call attention to something, like a video or logo image.

<div class=”row”>

</div>

This is the key to formatting your Web pages. Bootstrap uses a grid-based layout with up to twelve columns per page and as many rows as you want. This tag lets you define individual rows of your grid.

<div class="col-sm-4">

<h3>Column 1</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

This is a column definition. The class name tells us the type of column.

col - All column classes start with this.

sm - This means it’s optimized for tablets. There are three other varieties - xs (phones), md (desktops), and lg (larger desktops). You can mix and match these within a row.

4 - the number of columns used for this section. (Remember you have twelve columns per row.)

All in all, this div tag creates a box four columns wide that contains some styled text. You can put any HTML elements inside, including images and video.

Now you know enough to interpret the rest of this page. In your own words, describe the layout.

Save a copy of this page as Wk4Lab.html. Modify this new file to hold the elements of your Web search form from last week’s lab. Submit this file with your lab worksheet.

There are Web-based and desktop applications that make putting together a responsive Web page as easy and drag-and drop.

Build a Website Using a Template

There are a number of free HTML5 templates you can download from the Web. You can find these easily using a search engine. Examples:

http://codegeekz.com/50-free-responsive-html5-templates-for-designers/

http://html5up.net/

http://designscrazed.org/free-responsive-html5-css3-templates/

http://www.freshdesignweb.com/free-html5-css3-templates.html

http://w3layouts.com/free-responsive-html5-css3-website-templates/

Find one you like, install it in your project folder and adapt it to hold your search page. Submit this folder as a Zip file.

Remember when using another person’s template, make sure that it’s free for your use and that you give them appropriate credit.

Archive your lab worksheet and Web files in a single Zip file named <initial><surname>_wk4lab.zip. For example, if your name is Edith Palka, you would create a file named epalka_wk4lab.zip. Submit this file to your instructor.

1