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

2 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. The steps for publishing

3 To use a browser as an interface with FTP: 1.Type 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: Note: Be sure to check that the browser does not store your password. FTP with a browser

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 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. Moving files with FTP

6 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. The next step: Telnet

7 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 Access permissions

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: 1.Open a browser 2.Type: 3.This will bring up your 250 main page, that is, the page called main.html in public_html/ect250/ Example:

10 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) Mistakes in relative paths

11 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 An example

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

13 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 Text editing

14 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. Commands in pico

15 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. When to use pico

16 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. Moving/deleting files

17 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

18 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

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: uuser (owner) of a file/directory ggroup oothers (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  4w  2x  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: 1.Check the online Unix reference at: 2.Check the HyperNews 3.Check the ECT 250 FAQ 4. 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: 1.Use FrontPage 2.Place the pages on students.depaul.edu 3.Ensure that the permissions are set correctly 4. me the URL 5.Complete ALL of this by the given deadline For more details see the homework description.homework description

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

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

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

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

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

30 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. Selecting a format

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

32 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. Inserting an image

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

36 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 text- based hyperlink. 3.Click OK to create the link. Hyperlinks on images can be changed in the same manner as text-based hyperlinks. Hyperlinked images

37 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 tag and modify the file name. A warning

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