Difference between revisions of "Week Seven (MGDP2050)"
Karl Jones (Talk | contribs) (→About jQuery) |
Karl Jones (Talk | contribs) (→About jQuery) |
||
| Line 207: | Line 207: | ||
* http://mgdp2050.htcwebcreative.com/jquery/ | * http://mgdp2050.htcwebcreative.com/jquery/ | ||
| + | * http://mgdp2050.htcwebcreative.com/scripts/mgdp2050.js | ||
== jQuery in Bootstrap templates == | == jQuery in Bootstrap templates == | ||
Revision as of 17:01, 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).
Contents
- 1 Bootstrap navbar re-explained
- 2 Web server management
- 3 Resource paths in HTML
- 4 URLs
- 5 Client and server
- 6 CSS review
- 7 Bootstrap grid
- 8 Nested grid
- 9 Bootstrap navigation bar
- 10 JavaScript problems
- 11 Bootstrap and JavaScript
- 12 Bootstrap Modal
- 13 About jQuery
- 14 jQuery in Bootstrap templates
- 15 Hosting your own jQuery file
- 16 Exercises: in class
- 17 Exercises: for next week
- 18 Reading
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:
This other Navbar example at the Bootstrap website does collapse to hamburger menu:
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.
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:
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).
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.
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.
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:
(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:
