Difference between revisions of "Week Seven (MGDP2050)"

Revision as of 16:56, 22 March 2016

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

See also Week Six (MGDP2050) - Week Eight (MGDP2050).

Bootstrap navbar re-explained

Last week I gave an example of the Bootstrap navigation bar, using code that I copied from the Bootstrap example site and pasted into my web page.

The example displayed the navbar, but when I resized the browser to narnavbar did not collapse down to a hamburger menu for narrow screen sizes.

At the time I blamed the non-collapse on "incorrect path in script tag, the src attribute is wrong".

But later on I fixed the script tag path, and the page still did not collapse down into a hamburger menu.

I used View Source and Inspect Element, looking for missing files or other errors. Everything looked okay.

So I browsed the example at the Bootstrap website, and found that it does not collapse to a hamburger menu:

• http://getbootstrap.com/examples/jumbotron-narrow/

This other Navbar example at the Bootstrap website does collapse to hamburger menu:

• http://getbootstrap.com/examples/navbar/

Apparently the the "Pill" style of navbar doesn't use the hamburger, but the other kind does.

I recommend using the other kind, because I like the hamburger.

On the other hand, the non-hamburger-pill-style must be popular somewhere, because it's in Bootstrap.

Web server management

Do not delete, rename, or move the folder named YOURNAME.htcwebcreative.com on your classroom web server account.

That is, when you use File Transfer Protocol, leave the YOURNAME.htcwebcreative.com folder (on the remote host, the web server) as it is.

On your local computer, you can name your local root folder whatever you like.

On the remote host, the folder named YOURNAME.htcwebcreative.com has special significance to the web hosting service.

The folder named YOURNAME.htcwebcreative.com must exist on the remote host, or the website does not exist -- it disappears from the Internet.

• If this happens, fix the problem by re-creating the folder and re-uploading your website files.
• There may be a delay in restoring your site, typically a few minutes, perhaps an hour or two at HTC

Resource paths in HTML

In HTML, a resource path is a path to a resource.

An external style sheet is a typical example of a resource.

See Resource paths in HTML.

URLs

A URL has a protocol. Different protocols behave differently, in different circumstances.

As a web designer, it is important to understand how URLs relate to your work.

file://

The file:// protocol indicates that you a browsing a file on your local computer.

Caution: this technique has limitations and shortcomings.

Your browser can use file:// protocol to simple HTML pages.

But other kinds of web pages will behave incorrectly with this protocol, or not display at all.

The file:// protocol restricts the links you can use in your HTML (see below).

http://

The http:// protocol, or the secure https:// protocol, indicates that your browser is acting as a client.

The client which makes requests to a web server, which sends a response. The client (your browser) then displays the response.

The web server can be located:

• On the Internet, for example [1].
• On your computer - you can run MAMP or similar programs
  • You can then browser localhost in your browser
  • localhost uses http:// protocol, which is preferable to file:// protocol

URLs: file:// versus https://

Only document-relative URLs work correctly using file://:

../some-folder/some-file.css

Root-relative URLs and Fully qualified URLs will not work -- the links will be broken.

Root-relative:

/some-folder/some-file.css

Fully qualified:

http://some-website.com/some-folder/some-file.css

http:// (or http://) works with any type of link.

Localhost

You can run your own web server, on your own local computers, using MAMP or similar programs.

This way you can browse to localhost, with the URL in your browser like this:

• http://localhost

Client and server

Front end, client-side

The front end refers to HTML, CSS, JavaScript -- things which are important in terms of the browser.

Client-side is a similar concept.

Anything involving a web browser is said to happen client-side (or front-end), because a web browser is a kind of client (computing).

See Front-end development.

Back end, server-side

The back end refers to web servers and similar hosts (computing).

Anything involving a web server is said to happen server-side (or back-end).

See Back-end development.

CSS review

• Selector
• HTML element selector (CSS)
• ID selector (CSS)
• Class selector (CSS)
• Compound selectors (CSS)
• Combined selector (CSS)
• Grouped selectors (CSS)
• Pseudo-class (CSS)
• Pseudo-element (CSS)
• Focus (browser)
• Cascade (CSS)
• Cascade weight (CSS)
• Media queries
• Responsive web design

Bootstrap grid

See Bootstrap grid.

Nested grid

TO DO: thumbnail image here, link to full image.

Bootstrap navigation bar

See Navigation bar (Bootstrap).

JavaScript problems

As a web designer, you should learn to recognize and diagnose JavaScript problems, even if you are not a JavaScript programmer.

JavaScript can fail, or behave incorrectly, for a wide variety of reasons.

• Some of these reasons may be caused by your HTML, your CSS (and of course your JavaScript, if you write JavaScript).
• Other reasons may be outside your control:
  • You are part of a team, someone else wrote the code
  • You inherited a project, someone else wrote the code
  • Different browsers may behave differently
  • Internet connection fails, some features don't work offline but others do
  • Etc.

Bootstrap and JavaScript

Not all Bootstrap features use JavaScript, but some do -- the Bootstrap navbar, for example.

The Bootstrap navbar does not require any JavaScript programming on your part.

Some features in Bootstrap use JavaScript and require configuration.

• You do not need to be a JavaScript programmer to do this
• But you do need to recognize JavaScript when you see it, and perform simple configuration tasks in a text editor

Bootstrap Modal

"Modal" means "the user can't do anything else until they close this dialog box".

These are used as overlays, on top of a web page.

• Also known as lightboxes.

http://getbootstrap.com/javascript/#modals

About jQuery

jQuery is a JavaScript program which helps you write JavaScript programs.

It is free, and easy to install.

Working with jQuery it is a fundamental skill for web designers who want to go beyond HTML and CSS.

• http://mgdp2050.htcwebcreative.com/jquery/

jQuery in Bootstrap templates

Bootstrap templates typically include a script tag for jQuery, like this:

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

The src attribute specifies the path to the script file.

In this example, the script is hosted by a content delivery network.

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"

The path is a fully-qualified URL which points to a file named jquery.min.js.

The file is hosted at ajax.googleapis.com.

Content delivery networks are convenient, useful, and efficient.

Hosting your own jQuery file

You can also host the jQuery file yourself, on your own website.

This is a fundamental skill for web designers.

Browse to the JavaScript file in your browser.

• Note the .js file extension -- this is a JavaScript file
• Use the browser's File > Save command to save the JavaScript file
  • It is common to save script files in a folder named scripts

Exercises: in class

Catch up on any unfinished exercises from previous weeks.

Make sure all your exercises are uploaded to your class web server account.

Exercises: for next week

Create folder for scripts

Create a new folder named scripts in your local root folder.

Save the jQuery file in this folder.

Use this jQuery file for tonight's exercises, and any later exercises that use jQuery.

Demonstrate jQuery

Create a new folder named jquery in your local root folder.

In this folder, create a web page named index.html.

• Same standard style as your home page and other exercise page

Demonstrate jQuery

Create a new folder named jquery in your local root folder.

In this folder, create a web page named index.html.

• Same standard style as your home page and other exercise page

Demonstrate jQuery, similar to the classroom example:

• http://mgdp2050.htcwebcreative.com/jquery

(Demonstrate how jQuery changes HTML -- please do not use alert() messages.)

Do not just copy-and paste:

• You may start with copy-and-paste
• But then do something creative

Demonstrate Bootstrap modal

Create a new folder named bootstrap-modal in your local root folder.

In this folder, create a web page named index.html.

• Same standard style as your home page and other exercise page

Demonstrate a Bootstrap modal, similar to the classroom example:

• http://mgdp2050.htcwebcreative.com/bootstrap-modal

Reading

• jQuery UI
• Media queries
• CSS3