View source for Week Seven (MGDP2050)

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 [[Navigation bar (Bootstrap)|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 (computing)|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 [http://mgdp2050.htcwebcreative.com].
* 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 URL]]s work correctly using '''file://''':

<pre>
../some-folder/some-file.css
</pre>

[[Root-relative URL]]s and [[Fully qualified URL]]s will not work -- the links will be broken.

Root-relative:

<pre>
/some-folder/some-file.css
</pre>

Fully qualified:

<pre>
http://some-website.com/some-folder/some-file.css
</pre>

'''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 server|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]].

== 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 [[Navigation bar (Bootstrap)|Bootstrap navbar]], for example.

The [[Navigation bar (Bootstrap)|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/
* http://mgdp2050.htcwebcreative.com/scripts/mgdp2050.js

<pre>
$("#example").html("jQuery uses #example like a CSS selector, then sets the HTML for the matching element");
	
</pre>

== jQuery in Bootstrap templates ==

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

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

The [[src attribute]] specifies the path to the [[script file]].

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

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

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 '''<nowiki>File > Save</nowiki>''' 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, 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]]

[[Category:MGDP2050 weekly pages]]