Difference between revisions of "Week Four (MGDP2050)"

Revision as of 16:05, 9 February 2016

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

February 2 class cancelled due to winter weather
- Continue working on your Week Three (and previous) exercises
February 9 is the new Week Four

In the news

Java browser plugin deprecated

Oracle deprecates the Java browser plugin, prepares for its demise @ Ars Technica

Java plugins are deprecated (no longer in use)
Deprecation is discouragement from using a feature, without actually removing the feature (for the time being)
This is important for backward compatibility

Java and JavaScript

Caution: Do not confuse Java with JavaScript.

Java and JavaScript are different, unrelated programming languages

Similarities

Java applets are similar to JavaScript -- both run in web browsers.

Java applets have declined in popularity
JavaScript has become more powerful, more universal

Review from previous weeks

Human factors

Add to list:

Class web server

The class web server is located here:

http://mgdp2050.htcwebcreative.com

The example home page is located here:

http://mgdp2050.htcwebcreative.com/example

Your student home page will be located like this:

http://mgdp2050.htcwebcreative.com/username

Class web server credentials

You will need FTP credentials:

Host
Username
Password
Subfolder

Instructor will provide these credentials.

Secure your credentials:

Keep secret
Do not share
Be respectful other students and instructor, this is a shared FTP account

File Transfer Protocol (FTP)

File Transfer Protocol (or simply FTP) is a widely-used protocol for transferring files across computer networks.

FTP consists of two programs:

The FTP server has two tasks:

Receive uploaded files from clients
Send downloaded files to clients

FTP servers are typically associated with web servers. If you have a web server account, you probably have an FTP account to go with it.

The FTP client has two tasks:

Upload files to server
Download files from server

In this course, we will use FTP clients to upload and download files.

We will not download, install, or work directly with FTP servers

FTP clients

Many FTP clients are available. All do essentially the same thing.

For this class, You may use any FTP client you like.

FileZilla

FileZilla is a popular FTP client:

Free and open source
Available for Mac, Windows, Linux

FileZilla uses a two-panel display:

Local files (on your computer)
Remote files (on web server)

Fetch

Fetch is available for Mac only.

Fetch uses a single window to display remote (web server) files
Use a Mac Finder window to display local (your computer) files

Using FTP clients

You will need:

An FTP client
FTP credentials
Log in using your FTP credentials
Upload files (transfer from local to remote)
Download files (transfer from remote to local)
Close your FTP program

Document with screenshots:

http://code.karljones.com/docs/website-management/Website-Management.pdf

Limited FTP connections

We have limited FTP connections.

Please do your part to share the limited number of FTP connections:

Run your FTP client when you need it to download or upload files
Close your FTP client as soon as you have finished your tasks

How many is this "limited number" -- ?

It could be as few as three or four total FTP connections in the classroom.

That's not entirely clear. The numbers vary from class session to class session. And the numbers may be different inside the classroom, as opposed to outside.

In any case, we have limited resources -- please use them courteously.

Digital images

See:

HTML img element

See HTML img element.

Background images

See Background image (web design).

Graphics software

See:

Responsive images

Responsive images resize to fit different circumstances.

This is done with media queries.

Responsive images in Bootstrap

In Bootstrap, you make an image responsive by adding the img-responsive class:

<img src="image.jpg" alt="example" class="img-responsive" />

The image will expand to fit the available space, up to the full image size.

See Bootstrap responsive image.

Exercises: in class

FTP

Use an FTP client of your choice to upload your class files to the class web server.

Be sure you upload your work to the correct remote sub-folder!

View your work in a browser of your choice.

Test the links, make sure everything works correctly
Make sure all of your pages have appropriates titles
Make sure your styles are consistent across pages

Exercises: for next week

Finish (or improve) previous exercises

Finish any unfinished exercises from previous weeks, and improve anything you thing needs improvement.

Bootstrap

Revise your wireframe page: use Bootstrap responsive images.

Be sure to use appropriate alt attributes for each image.

Upload to server

Finish any unfinished exercises from previous weeks, and improve anything you thing needs improvement.

Browse online, test your work

Browse your work on the class web server.

Use two (or more different) devices to browse your work:

Phone
Tablet
Laptop/desktop

Make sure your content is readable. Change your custom CSS rules as necessary.

make sure all links work.

Instructor will review everything before class next week.

Reading

Next week will emphasize Web page layout and the Bootstrap grid.

Overall topics for tonight and next week:

@@ Line 140: / Line 140: @@
 * Fetch uses a single window to display remote (web server) files
 * Use a Mac Finder window to display local (your computer) files
+== Using FTP clients ==
+You will need:
+* An FTP client
+* FTP credentials
+* Log in using your FTP credentials
+* Upload files (transfer from local to remote)
+* Download files (transfer from remote to local)
+* Close your FTP program
+Document with screenshots:
+* http://code.karljones.com/docs/website-management/Website-Management.pdf
 == Limited FTP connections ==