ECT 250: Survey of E-Commerce Technology

1. ECT 250: Survey of E-Commerce Technology Publishing pages Unix Images

2. The steps for publishing • Create the Web page(s) using FrontPage • FTP the page(s) over to students.depaul.edu • placing them in public_html/ect250 • 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.

3. FTP with a browser • To use a browser as an interface with FTP: • Type ftp://yourlogin@students.depaul.edu • This will bring up a window that prompts you • for your password. • Type in your password (being careful to type • it correctly) and hit enter. • The files in your main directory will appear. • Example: ftp://tsettle@condor.depaul.edu • Note: Be sure to check that the browser does not • store your password.

4. 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.

5. 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: • Open up the directory into which you wish to • move the file. • Open the folder where the file is located on your • local machine. • Select Edit/Copy or drag the file directly into the • directory. • Example: Place pages into public_html/ect250.

6. 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.

7. Access permissions • To give directory_name the correct permissions • you must: • Move into the parent directory of directory_name • using cd (change directory) • Type: chmod 755 direct_name • In order to give file_name the correct permissions • you must: • Move into the directory containing file_name • using cd (change directory) • Type: chmod 644 file_name

8. 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

9. 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: • Open a browser • Type: http://students.depaul.edu/~name/ect250/main.html • 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

10. 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: • Change the relative path in the file • (Use a text editor to modify the file) • Change the directory structure to match the path • (Use Unix commands to shuffle files/directories)

11. 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

12. 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.

13. 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

14. 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.

15. 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.

16. 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.

17. More about access permissions • When deciding who can have access to a file, • UNIX recognizes three categories of users: • Owner: The owner of the file or directory • Group: Other users belonging to the owner’s • group • Public: All other users on the system

18. Types of access • There are three things that can be done to a file: • Read: Examine (but do not change) the file • Write: Change the file • Execute: If the file contains a program, run • the program • There are also three things that can be done to a • directory: • Read: List the contents of the directory • Write: Change the directory by adding or • removing existing files • Execute: “Search” the directory using ls –l

19. 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.

20. 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

21. 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

22. 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

23. Unix help • If you have any questions about Unix commands • while you are doing the assignment, you should: • Check the online Unix reference at: • http://service.depaul.edu/dpo/support/unix/intro.html • Check the HyperNews • Check the ECT 250 FAQ • E-mail me to ask a question

24. 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: • Use FrontPage • Place the pages on students.depaul.edu • Ensure that the permissions are set correctly • E-mail me the URL • Complete ALL of this by the given deadline • For more details see the homework description.

25. 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.

26. 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.

27. 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.

28. 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.

29. 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.

30. 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.

31. 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.

32. Inserting an image • To insert an image into a page using FrontPage: • Move the insertion point to where the image • is to be located. • Click the Insert Picture From File toolbar • button to display the Picture dialog box. • If the image is on your machine, use the folder • button to navigate to the appropriate folder, • select the desired image and click OK. • If the image is located on a web server, use the • Web button to locate the desired URL. • There is also a Clip Art button in the dialog box.

33. 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

34. 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.

35. Using a background image • Open the Page Properties box and select the • Background tab. • Click inside the Background Picture box to • check it and then click on the Browse button • to locate the image file. • Select the image and close the box. • The background image should now be listed • in the box next to the Browse button. Click • OK to close the Page Properties box.

36. Hyperlinked images • To make an image a hyperlink: • Select the image to be linked and click the Add • Hyperlink dialog box. • Specify the hyperlink information as for a text- • based hyperlink. • Click OK to create the link. • Hyperlinks on images can be changed in the same • manner as text-based hyperlinks.

37. 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.

38. Upcoming topics • FrontPage • Adding tables for information or formatting • Searching the Web • Survey of markup languages • Frames: good or evil? • Information architecture