Week Two (MGDP2050)

Lecture notes and exercises for Week Two of Web Design and Development II (MGDP2050).

Exercises, not exams

This class emphasizes exercises.

There are no midterm or final exams (although there may be short quizzes).

Project

Each student will create a self-directed project over the course of the semester.

Original design, layout, text content, images
Using Bootstrap
Developed over the entire semester
Due at end of semester

More details to follow.

Agile software development

Last week we briefly discussed Agile software development, a software development methodology which emphasizes adaptability and short units of work.

The classroom experience is similar to the Agile method in a number of ways:

Weekly class sessions (Agile has "sprints", typically two-week blocks of work)
Student projects are self-directed (Agile is customer-centric, with developers and customers working interactively)

Bootstrap

Bootstrap is a framework for responsive web design.

General discussion

Download Bootstrap

Download Bootstrap here:

Getting started #Download

Beginners want "Bootstrap" -- not "Source code" or "Sass", which are more advanced versions.

Basic Template

The official Bootstrap website provides a Basic Template, useful for beginners:

Basic Template

Here is the complete text of the Basic Template:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

You can copy and paste the above source code into your own HTML pages, and work from there.

You will need to modify references to external resources:

The src attributes the link element (External style sheet)
The href attribute of the script elements (External JavaScript)

Minimized versus non-minimized CSS

CSS files are often minimized, to save download time.

Whitespace and comments are removed from minimized files.

File size is smaller -- faster download
Hard to read -- no whitespace

You may wish to use the non-minimized version while developing a website, and then substitute the minimized version for the final public version of the site.

Responsive web design (RWD)

Responsive web design is a set of web design techniques for creating web pages which look good on a wide range of devices.

Techniques include proportion-based grids, flexible images, and media queries:

The proportion-based (or fluid) grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

Devices include:

This class will emphasize the Bootstrap framework. However, we will also consider responsive web design in more general terms.

See Responsive web design.

Examples

Examples of Bootstrap websites:

Characteristics of responsive web pages

Responsive web pages "respond" to different devices: font size, layout, and other properties change to fit the device.

Recognizing a responsive web page

Browse a web page on a desktop computer, and then on a smaller device (mobile phone, table).

If the page looks good and behaves correctly on both devices, maybe the page uses responsive web design
But not always: some servers use other techniques (such as server-side processing).

You can also view a web page on a desktop browser, and make the browser window small enough to simulate a mobile phone or tablet.

Responsive web pages will change font size, layout, and other design elements, for best fit on a given device

Hamburger menu

The hamburger menu is nearly universal on responsive web pages.

Responsive layouts

Typical responsive layout

A responsive web page typically has three different layouts:

Mobile phone - small - one column
Tablet - medium - two columns
Desktop - large - three columns

Bootstrap responsive layout

Bootstrap uses four size-based layouts:

Extra small - phone - one column
Small - tablet - two columns
Medium - desktop, laptop - three columns
Large - wide desktop - three or four columns

Examples, not fixed rules

The above examples are typically examples, not fixed rules.

For instance, the default Bootstrap layout is one column. If you want a one-column page in Large size-based layout, all you have to do is not not add more columns.

Bootstrap does not limit you to a particular layout.

Bootstrap provides some pre-made CSS (and HTML, and JavaScript) to get you started
You can then customize the default CSS-HTML-JavaScript as much as you like
With enough work, any web page that can be made, can be made using Bootstrap (or any other framework)

View Source

Use View Source to view the HTML for a web page which you have identified as responsive.

You can identify a responsive web page by the use of media queries.

You can identify a Bootstrap web page by a <link> tag pointing to the bootstrap.css file.

Web server default file names

The file name index.html has special significance to most web servers.

A web server has a list of default file names, usually including index.html

When the server receives a request, and the request does not specify a file name, the server uses a default file name, if possible.

In other words, you can omit index.html from a URL, and if the server actually has a file named index.html, the server returns index.html

See Web server default file name.

Naming conventions

A naming convention is a set of rules for assigning names.

Naming conventions are essential to computer programming, and to language and society in general.

See Web page conventions (MGDP2050) for naming conventions related to this class.

Exercises: for next week

Create folder and web page (rwd)

These steps are standard procedure for many exercises.

In your Local root folder, create a new folder named rwd
In this new folder, create a file named index.html
Make this page similar to your Home page (same CSS, similar layout)
- Easy way: copy your Home page HTML, paste into the new page, modify the new page
Set the page title appropriately, and enter standard exercise content (see ...)

Surf web, find responsive websites

Browse the World Wide Web for responsive websites.
Identify three different responsive websites of interest to you.
- "Of interest to you" typically means websites which you admire, and which you might use as examples and inspiration for your own work.
- But "of interest" might also mean the reverse: websites which look bad, which don't work right.
- Or you may have yet other interests -- your choice, anything goes.

Make links to websites of interest

In your new web page, do this for each of the three responsive websites you selected:

State the name of the website
Provide a link to the website
Write a short statement (one paragraph, maybe two) about why you selected the website as an example.

Create folder and web page (project)

This folder and web page relates to your class project.

In your Local root folder, create a new folder named project
In this new folder, create a file named index.html
Make this page similar to your Home page (same CSS, similar layout)
Set the page title appropriately, and enter standard exercise content (see ...)

Do you have an idea for a project?

If so, describe the idea (one or two paragraphs)
If not, describe three potential ideas (one or two sentences each)

Make sketch for wireframe

Make three simple pen-and-paper sketches for your project, for three device sizes:

Mobile phone
Tablet
Desktop

Simplify everything: emphasize functionality, minimize design.

Design considerations include:

What will the user see first?
How will the user navigate?

These sketches form a simple website wireframe -- a tool to help you plan your project.

Reading: Project management and Deliverables

Project management

Read the Project management page, have a general working knowledge of the subject.

We will discuss, and use, various project management techniques in the class.

Deliverables

The outcome of a project is the deliverable, or more often deliverables.

In this class, student deliverables include exercises and your project.