Download chmod 644 file_name

ECT 250: Survey of E-Commerce Technology
Publishing pages
Unix
Images
The steps for publishing
1. Create the Web page(s) using FrontPage
2. FTP the page(s) over to students.depaul.edu
placing them in public_html/ect250
3. Telnet into your account and change the
permissions for all necessary files and
directories. (To move from directory to
directory use the cd command).
This will include public_html, ect250,
and all files transferred in Step 2.
2
FTP with a browser
To use a browser as an interface with FTP:
1. Type ftp://[email protected]
2. This will bring up a window that prompts you
for your password.
3. Type in your password (being careful to type
it correctly) and hit enter.
4. The files in your main directory will appear.
Example: ftp://[email protected]
Note: Be sure to check that the browser does not
store your password.
3
Other versions of FTP
You can also directly use FTP programs if they
are installed on your machine.
Examples:
• ws_ftp
• cuteftp
Most have GUI interfaces and work similarly to
the browser interface.
4
Moving files with FTP
Once you have created a public_html directory, you
can move your HTML files into that directory.
In order to do that:
1. Open up the directory into which you wish to
move the file.
2. Open the folder where the file is located on your
local machine.
3. Select Edit/Copy or drag the file directly into the
directory.
Example: Place pages into public_html/ect250.
5
The next step: Telnet
Once you can moved your Web pages into your
account, you now need to ensure that they are
visible to a Web browser.
This involves using Telnet to log into the students
machine and changing the access permissions on
the files and directories.
Note: Some FTP programs allow you to change
permissions using the GUI interface. We will use
Telnet (and Unix commands) instead.
6
Access permissions
To give directory_name the correct permissions
you must:
1. Move into the parent directory of directory_name
using cd (change directory)
2. Type: chmod 755 direct_name
In order to give file_name the correct permissions
you must:
1. Move into the directory containing file_name
using cd (change directory)
2. Type: chmod 644 file_name
7
Some Unix commands
• Move to a child directory: cd directory_name
• Move up to a parent directory: cd ..
• List files/directories in the current directory: ls
• List files/directories with permissions: ls –l
• Create a new directory: mkdir directory_name
• Remove a file: rm file_name
• Remove a directory: rmdir directory_name
• Move (rename) a file: mv old_name new_name
• File access permissions: chmod 644 file_name
• Directory access: chmod 755 directory_name
• Help on a Unix command: man commandname
8
Viewing your pages
Once you have created a public_html and an ect250
directory, located your files in it, and changed the
permissions to the correct values, you can view your
pages. To do so:
1. Open a browser
2. Type: http://students.depaul.edu/~name/ect250/main.html
3. This will bring up your 250 main page, that is, the
page called main.html in public_html/ect250/
Example: http://condor.depaul.edu/~tsettle/ect250/main.html
9
Mistakes in relative paths
You need to be careful that the paths inserted for
relative pages are correct once you transfer them
to students.depaul.edu.
You have two choices if they are not:
1. Change the relative path in the file
(Use a text editor to modify the file)
2. Change the directory structure to match the path
(Use Unix commands to shuffle files/directories)
10
An example
• A link from the Theory Group page to my page
• Transfer just the files over to condor.depaul.edu
When created: faculty/settle.htm
After the transfer: settle.htm
11
Viewing files
• To view a file, use the more command.
• Syntax: more file_name
• Move down one line: Use Return key.
• Move down one page: Press the space bar.
• Move up one page: Type Control-B.
• Quit by pressing the q key.
View the Theory Group page to check the path
names.
12
Text editing
• To modify a file on students.depaul.edu, you need
to use a text editor. One of the simplest is pico.
• A text editor is NOT the same thing as a word
processor. It does not allow you to control the
appearance of the text.
• pico was developed at the University of Washington
for composing messages in the pine mail program.
The menu structure is similar to pine.
• Syntax: pico file_name
13
Commands in pico
Note that (^ is the Control button):
• ^G: Get Help
• ^X: Exit – Ends the pico session, saving the
text that has been modified or created.
• ^O: Write Out – Saves your work to a file
without ending the session.
• ^R: Read File – Copy a file into the buffer.
• ^Y: Previous Page
• ^V: Next Page
• Move in the file using the arrow keys
Example: Path name in my home page.
14
When to use pico
Since we do not develop HTML directly in this
course, you only want to use pico when you need
to adjust the path name of hyperlinks, images, etc.
Remember that the alternative is to adjust the
directory structure in your account to match the
path given in the hyperlink, image, etc.
This involves moving files and moving/deleting
files and directories.
15
Moving/deleting files
Adjusting the directory structure in your account
involves using (some of) the following commands:
• mv old_name new_name
• mkdir directory_name
• rm file_name
• rm *
• rmdir directory_name
Example: Change the directory structure to match
the old path.
16
More about access permissions
When deciding who can have access to a file,
UNIX recognizes three categories of users:
1. Owner: The owner of the file or directory
2. Group: Other users belonging to the owner’s
group
3. Public: All other users on the system
17
Types of access
There are three things that can be done to a file:
1. Read: Examine (but do not change) the file
2. Write: Change the file
3. Execute: If the file contains a program, run
the program
There are also three things that can be done to a
directory:
1. Read: List the contents of the directory
2. Write: Change the directory by adding or
removing existing files
3. Execute: “Search” the directory using ls –l
18
A permission listing
Because there are three types of users with three
types of access permission, each file/directory
has associated with it 9 different settings.
(It also has another setting that indicates whether
it is a file or directory).
Example: A long listing of the ect250 directory.
19
More about chmod
The chmod (change mode) command uses the
following notation:
u user (owner) of a file/directory
g group
o others (public)
+ add a permission
- remove a permission
Examples:
chmod o+r main.html
chmod g-x main.html
20
Values associated with types
There are also values associated with each type
of access:
r4
w2
x1
The sum of these values gives a combination of
the permissions.
Examples:
4 = r only
6 = r and w but not x
7 = r, w, and x
21
Another way to use chmod
Typing chmod value file_name for certain values
changes the permission of the file. (It also works
for directories).
Examples:
• chmod 644 main.html
• chmod 755 public_html
22
Unix help
If you have any questions about Unix commands
while you are doing the assignment, you should:
1. Check the online Unix reference at:
http://service.depaul.edu/dpo/support/unix/intro.html
2. Check the HyperNews
3. Check the ECT 250 FAQ
4. E-mail me to ask a question
23
Assignment 3
Assignment 3 requires you to produce a basic
Web page and then publish that page on the
students.depaul.edu machine.
You must:
1. Use FrontPage
2. Place the pages on students.depaul.edu
3. Ensure that the permissions are set correctly
4. E-mail me the URL
5. Complete ALL of this by the given deadline
For more details see the homework description.
24
Loading efficiency
• Most Web pages contain graphical images to
add interest, make navigation easier, and to
convey necessary information.
• Most Web users will wait only a short time for
a page to load, so efficiency considerations
are important.
25
Graphic formats
• Graphic formats are usually referred to by their file
extensions, such as .tif, .bmp, .gif, .jpg, and .png.
• The .tif format is commonly used with scanned
images and the .bmp format is used by Windows
Paint program.
• Web page images are usually saved in either the .gif
.jpg, or .png format.
• Graphic formats are usually compressed. File
compression can either by lossless, which does
not decrease image quality, or lossy, which does
lose image quality.
26
GIF
• The Graphics Interchange Format (GIF) is the
standard format for Web page images and is
supported by all browsers that display images.
• It is an efficient, compressed format that allows
up to 256 colors. It uses lossless compression.
• GIF images are always rectangular, but a
transparent background can be used to make
the images appear to be non-rectangular.
• GIF images can be interlaced, which means that
the image is displayed initially at low resolution
and its quality is increased as it downloads.
27
JPEG
• The Joint Photographic Experts Group (JPEG)
format is supported by most browsers that
display images.
• JPEG images use lossy compression. The amount
of compression ranges from 0% to 100%. The
higher the compression, the smaller the file size
and the lower the image quality.
• JPEG cannot be made transparent, but it can be
specified as a progressive JPEG, which is loaded
the same way as an interlaced GIF.
28
PNG
• The Portable Network Graphics (PNG) format is
a new(ish) format created for Web page images.
• It is expected that it will eventually replace GIF.
• PNG images use a lossless compression that is
more efficient than GIF.
• It can use a color palette of 256 colors or less like
GIF or support true color like JPEG images.
• PNG images can be interlaced and transparent.
29
Selecting a format
• The GIF or PNG format is usually used for line
art such as clip art, logos, etc.
• JPEG is chosen for photographs because true
color is desirable and selecting the amount of
compression can result in smaller sized files.
• One approach is to save an image in several
formats and choose the one with the smallest
file size that produces acceptable quality.
30
Size considerations
• GIF, JPEG, and PNG images are all bitmapped
formats, which means that the images are
made of a rectangular grid of pixels.
• Web images are measured in pixels.
Example: 500 x 55
• Images should be kept as small as possible to
reduce the file size of the images and to keep
the physical size of the Web page small to
prevent scrolling.
• A width of no more than 540 pixels is safe.
31
Inserting an image
To insert an image into a page using FrontPage:
1. Move the insertion point to where the image
is to be located.
2. Click the Insert Picture From File toolbar
button to display the Picture dialog box.
3. If the image is on your machine, use the folder
button to navigate to the appropriate folder,
select the desired image and click OK.
4. If the image is located on a web server, use the
Web button to locate the desired URL.
5. There is also a Clip Art button in the dialog box.
32
General image properties
To change an image’s properties, right click on the
image to reach the Picture Properties dialog box.
The options on the General tab:
• Interlace or make a GIF transparent
• Change the quality or progressive information on
a JPEG
• Specify a low resolution image to display while
the higher resolution image is loading
• Indicate text that should display in place of the
image in text-only mode
33
Appearance properties
The Appearance tab allows you to change the
following properties of an image:
• Display size
You can choose to keep the image proportional
by locking the aspect ratio.
• Border
Default for is black except for a hyperlinked
image.
• Alignment
It can be fine-tuned with blank padding space
horizontally and/or vertically.
34
Using a background image
1. Open the Page Properties box and select the
Background tab.
2. Click inside the Background Picture box to
check it and then click on the Browse button
to locate the image file.
3. Select the image and close the box.
4. The background image should now be listed
in the box next to the Browse button. Click
OK to close the Page Properties box.
35
Hyperlinked images
To make an image a hyperlink:
1. Select the image to be linked and click the Add
Hyperlink dialog box.
2. Specify the hyperlink information as for a textbased hyperlink.
3. Click OK to create the link.
Hyperlinks on images can be changed in the same
manner as text-based hyperlinks.
36
A warning
Like HTML files, image files must be moved over
to your students.depaul.edu account using FTP.
Make sure to check that the names and the directory
structure remain the same as you transfer them.
If there is a problem you can correct the Web page
using pico. Simply look for the <img> tag and
modify the file name.
37
Upcoming topics
 FrontPage
• Adding tables for information or formatting
 Searching the Web
 Survey of markup languages
 Frames: good or evil?
 Information architecture
38