Week Four (MGDP2050)

From Wiki @ Karl Jones dot com
Jump to: navigation, search

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

See also Week Three (MGDP2050) - Week Five (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

See also:

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.

Review from previous weeks

Human factors

Add to list:

Class web server

The class web server is located here:

The example home page is located here:

Your student home page will be located like this:

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:

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:

Retrieved from "http://wiki.karljones.com/index.php?title=Week_Four_(MGDP2050)&oldid=10238"