Week Two (MGDP2050)

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

Bootstrap

Bootstrap is a framework for responsive web design.

General discussion:

• Bootstrap (framework)
• Getting started with Bootstrap

Getting started, and download Bootstrap:

• Getting started
• Getting started #Download

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:

• Mobile phone
• Tablet
• Laptop computer
• Desktop computer

See Responsive web design.

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.

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.

LAMP, MAMP, XAMPP, etc.

LAMP stands for:

• The Linux operating system
• The Apache HTTP Server
• The MySQL relational database management system (RDBMS)
• The PHP programming language, and the Perl scripting language

LAMP allows you to run a web server as a desktop application. This is very useful for web development. See LAMP (software bundle) for more detailed information.

LAMP is a very general term, not a specific application.

To use LAMP, download and install any LAMP application.

Popular LAMP applications include MAMP and XAMPP.

MAMP is Mac-specific, making it the best choice for a Mac lab.

XAMPP is available for Mac and Windows (and Linux), making it useful for cross-platform development.

Exercises: in class

MAMP

• Run MAMP (if available).
• Locate the htdocs folder -- this is the Local root folder for MAMP
• Copy your class exercise files into htdocs
  • Copy index.html, the bootstrap folder, your custom external style sheet
  • Only copy the contents of your Local root folder, not the folder itself (htdocs serves this purpose)

localhost

Open a web browser, and browse:

• http://localhost

You should see your Home page.

Exercises: for next week

Create folder and web page

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.