Class Notes


COM-341 HTML Publishing and Web Page Design

Final Examination Review Notes


The concept of Uploading

  1. A. Server Structure
    1. A server is just like any other computer in that it stores information in a network of directories or file folders.
    2. Some of these folders are available to any client who asks, and others are not as easy to access.
    3. In general, the two folders available to outside access are the following:
      1. The HTML Document folder
        1. This may be referred to as htdocs, or some other similar name.
        2. The user may never know the name of this folder, as they never have to name it. The browser, when it accesses the site, automatically is routed to that folder.
        3. The index.html file within the htdocs folder is the first document to be displayed automatically.
      2. The CGI-BIN
        1. This folder does have to be accessed by name, but usually not by the user.
        2. Again, there is some automatic routing involved, but when a particular process within an HTML document calls for a cgi script, its reference will have the exact location of the siteís cgi-bin.
        3. Cgi-bins contain the cgi scripts which are available to that server.
        4. Other folders on the server may be available to the owners of particular web sites, through FTP access or for administrative purposes.

FTP (File Transfer Protocol)

Uploading and Maintaining a Web Site

  1. The FTP Connection
    1. To connect to a server through an FTP connection requires an FTP program to manage the file transfers. These programs may resemble browsers in how they operate, but also look very much like file management programs.
    2. To send files from your computer to the server usually works much like copying files from one disk to another. The difference is in distance and method.
  2. Access
    1. If you are hosting a web site through a server, you must have administrative privileges on that server.
      1. For every site you manage, for example, you will probably need a log-in name and password to be allowed to make any alterations.
      2. This may not give you access to all of the files on the server, naturally, but you will have some control over those files which pertain to your site.
  3. Loading files
    1. The simple act of copying the files used by your site into the HTML directory of the server you are using is all that is necessary to make the site available for outside access.
      1. The HTML directory is the one which is given that numeric address which the browser looks for. Once the files are there, the server can dispatch requests for those documents to the browsers which ask for them.
        1. A web site can be updated by simply changing the existing HTML documents and uploading the newer versions to the server.
            Newer versions of the files re-write older versions, updating the site instantly.
        2. It is important to understand that all files necessary to operate your site must be loaded into the serverís HTML directory.
          1. All graphics displayed on your pages must be available in the HTML directory, or in subdirectories which are included in all of your references.
            1. The only exception to this might be if your images were stored on another server somewhere else.
          2. Any .wav files, or other animation files must also be stored in this directory.

The Concept of CGI (Common Gateway Interface)

  1. CGI Scripts are instructions that allow the server to request and act on input from the user of a web site.
    1. It is extremely important to understand that this is one of the things that makes the Internet so incredibly valuable.
    2. The ability of users to send as well as receive information makes web sites truly interactive on a higher level.
      1. a. can you imagine "talking back" to your television set?
    3. It is also possible for the owners of web sites to gather very complex information about visitors to those sites
      1. Through the use of counters, it is possible to tabulate how many visitors had been there over a given time. It is also possible to gather information about who those visitors were, how long they stayed, what types of computers they were using, and other useful information.
  2. CGI scripts can perform complex actions based on user input.
    1. a CGI script can look up information, contact other systems and share resources, as well as display responses to inquiries.
    2. These are of course based on what the scripts were intended to do, and based on the programming they were provided with.
    3. In general, however, any function a user of a server could do could probably be programmed into a CGI script.
    4. CGI scripts can also update databases by adding input from web site visitors, manage user resources, and even process sales and other financial transactions.
  3. Limitations of CGI scripts
    1. CGI scripts were intended to process specific types of data and are incapable of truly understanding the input given by a user. All they can really do is react to it.
    2. If a user enters a date into a name field, for example, the script may not know the difference and may assume that the userís name is January 12th
    3. It is possible for the author of the script to anticipate such errors and build features into the script to counter them, however the script itself is only a set of instructions, and only interpret and process the data it was intended to process.
    4. Also, CGI scripts tend to make servers vulnerable because they are designed to access programs within the server which may not be intended for general view. The represent a possible "back door" into the server, therefore.
  4. Cookies
    1. Cookies are small files which can be placed on your computerís hard drive by a server for the purpose of communicating with your computer later on a subsequent visit.
      1. a cookie can contain evidence that you were there before, and remind the site of information which you provided earlier.
        1. If a web site welcomes you back by name, for example, you probably have a cookie somewhere in your system.
        2. A web site could also tell you when you had visited last.
        3. Cookies are file which can be and often are erased by your computer at regular intervals.
          1. You can set your browser not to accept cookies at all
          2. You can also determine how often your browser erases old cookies
            1. You should get rid of them before they get stale : )
        4. Cookies can be a security risk.
          1. Any time you allow a file to be transferred to your computer, there is a risk of harm to your system.
          2. It is conceivable that a computer virus could be disguised as a cookie.
          3. Also, you may have issues of privacy. Cookies can keep track of your movements and may report information that you might not want disclosed.

How do CGI-Scripts work?

  1. CGI-scripts live on the server in a special directory.
    1. When an HTML document accesses a CGI resource, it does so the same way it would access another web page or e-mail address, except that it calls up a .cgi file and targets a cgi directory on the server
  2. CGI- scripts access their own programming language in order to be able to do anything.
    1. A CGI script must know where on the server the CGI authoring program is.
      1. For example, Pearl is a program used to make CGI scripts.
      2. Every CGI script has the location of Pearl, or something similar, on the first line of code.
  3. When an HTML document accesses a CGI-script, the script responds by interpreting the input and generating some response.
    1. This may involve accessing other resources
      1. If the script involves sending an e-mail as a response, it must know where the e-mail program is on the server
      2. If the script involves updating a counter, it must know where the counter data is, as well as the graphics necessary to create the digits.
      3. The script must also know the URLs of any other documents that must be used, such as thank pages, error messages, and other things.
  4. Ultimately, whatever input was taken from the user will be used in determining the outcome of the script, however, the user is often directed to another web page after the scripts completion, either thanking them for their participation or informing them of some kind of error in the process.

Dynamic HTML

What is DHTML?

  1. Simply put, Dynamic HTML is a technique by which the HTML language can be enhanced with more multimedia capabilities.
    1. Dynamic HTML allows for the use of scripts which work on the clientís computer rather than the server. This makes possible more complex animations with less download time and less lag.
    2. It also allows more user interactivity by making use of scripts which recognize what the user is doing on the screen at any given time.
    3. Dynamic HTML also allows for advanced multimedia tools such as streaming video and audio, as well as other embeded objects.
  2. DHTML is another step in the process of separating the content of a web site from its format.
    1. Style sheets, which are enhanced with DHTML allow the programmer to manipulate formatting information which affects the web siteís dynamic behavior without affecting the content.
    2. Much of the scripting which makes DHTML work is not associated with the content of the site, and is not located near it on the page.

The Dynamic Object Model

What is Object Oriented Programming?

  1. Object Oriented Programming allows for the treatment of certain data structures within a program as distinct elements which have standardized characteristics and can be used in specific contexts for specific purposes independent upon where they appear on the screen or in what context.
    1. A button is an object.
      1. buttons are graphic elements which are visible on the screen in a pushed or unpushed state.
      2. buttons respond to the user and tell the program that the user has done something.
      3. Buttons know what the mouse is and whether or not the pointer has passed over them or not.
    2. Each time a button is used in object oriented programming, it is made in a standardized way.
      1. It is not necessary to re-write all the code necessary for the buttonís shape, appearance, and function each time it is used.
      2. Although certain characteristics of buttons can be chosen and modified by the author.
    3. A button will still work no matter where on the screen it is placed.
      1. The position of the object has nothing to do with its function.
  2. Object oriented programming allows programmers to see their product from the userís perspective.
    1. Programmers can design the screen in terms of what it looks like, and then work on its functionality.
    2. 2. Programmers no longer have to build a program exclusively by writing endless chains of code.

Is the Internet object based?

  1. HTML is a text based code. As such it is not inherently object based.
    1. Authors of HTML have difficulty in placing graphic elements in specific places on the screen because HTML treats text and graphic elements the same
    2. Through the use of DHTML, more precise alignment of objects becomes possible
    3. Also, through DHTML, objects can be defined and can be made to respond to user input.
    4. DHTML objects can refer to scripts, style sheets, and other code within the web page and cause events to happen.

DHTML Objects

  1. Any structure in HTML can suddenly become an object.
    1. A link is an object, an image is an object, and anything within the <SPAN> tags can be considered an object. The tags serve as containers for stuff inside.
    2. Attributes within the tag identify the object by name.
      1. <SPAN ID="flag">Flag</SPAN>
      2. This object can now be called upon from elsewhere in the script by the name "flag"
  2. Objects can be changed by accessing and changing their atributes.
    1. <IMG SRC="pic1.jpg" WIDTH="10" HEIGHT="40" ID="gold">
    2. SRC, WIDTH, and HEIGHT are all attributes that can be changed.
    3. The code onclick="gold.src=ípic2.jpgí" will change the attribute of the image in such a way that the actual picture displayed will change when that object is clicked.
    4. Any object can become a button
    5. Scripts can be located within objects themselves as well.
    6. Scripts can be located within style sheets.

Scripts

  1. Scripts are nothing more than sets of instructions which affect changes in how objects are displayed. They can be accessed almost anywhere.
  2. Some popular types of scripts are:
    1. VBS Script: Based on Microsoftís Visual Basic
      1. a. Internet Explorer is the only browser which accepts this
    2. JavaScript and Jscript: Based loosely on Java, a programming language owned by Sun Microsystems.
      1. JavaScript was created by Netscape.
      2. Jscript is the language used by Internet Explorer. They are very similar and can be considered almost one in the same.
  3. Why use scripting?
    1. It is easy to learn
      1. Scripting languages follow a logic that can be mastered.
      2. Scripting languages are based on simple text that can be edited in any HTML editor
    2. Client-Side processing
      1. Scripting allows the local computer to make the changes through its own browser without depending on downloading more information from the server.
    3. Scripts can be powerful
      1. It is amazing what can be done with scripts and how it can enhance the visual appeal of the site.
      2. Scripts often call on very complex functions within the browser which do a lot of things in exchange for the addition of small simple commands into the code.
    4. Complexity or not
      1. Generally, simple scripts are most effective, but it is possible to create highly complex interactions depending on the patience and skill of the programmer.
  4. D. Problems with scripts
    1. They are not necessarily universal
      1. Older browsers will have no idea what you are talking about and will ignore most scripts
      2. b. Competitive browser manufacturers do not necessarily support each others scripting languages.
    2. Itís hard enough to agree on the tags themselves.
      1. Different computers, screen dimensions, and other factors can have unpredictable results.
    3. They are not always obvious
      1. As with HTML, capitalization, punctuation, and other rules must be closely observed.
    4. Scripts are new enough that there are still plenty of bugs.
      1. Good luck

Creating Scripts

  1. Scripts can be separated from the rest of the HTML by using <SCRIPT> tags
  2. 2. Scripts can wait for user actions before triggering their responses.

Functions

  1. A function is a series of commands which are defined by a script and based on some action that the user does to some object on the screen
    1. A button click can trigger a script, or a mouseover
  2. Functions wait patiently to be called on and can be called on multiple times.

Advanced Multimedia capabilities

  1. HTML is still just text, but it is becoming increasingly possible to extend the limits of what can be done with this language through various plug-ins available for browsers.
  2. A plug-in is a program which is designed to interpret specific data on an HTML document, which might be ignored completely by a browser without such a plug-in.
    1. JAVA scripting, and other animation formats were available through plug-ins at one time.
    2. As particular features become more and more popular on the Internet, various former plug-ins become standardized.
    3. The only exception to this would be plug-ins of a proprietary nature, which are not intended to be shared universally.
      1. On-line courseware, for example, may employ complex procedures and elaborate interactive graphics designed to work with software that the user must buy before accessing.
      2. HTML tags may be used which trigger these events, though the use of a proprietary plug-in.

Streaming Audio and Video A recent development

  1. Streaming media involves the use of a special way of "serving" a media file.
    1. Like graphics and photos, a movie file might be accessed by a document, downloaded, and displayed.
    2. The problem with this, however, is that movie files and sound files are very large.
      1. It may take several minutes or even an hour or two to download a movie file or a long sound file.
    3. Since the whole file would normally have to be downloaded before it is displayed, this makes movie files problematic over the Internet.
    4. Streaming audio and video, on the other hand, allows the user to view the file while it is in the process of downloading!
      1. This means that the user can see the file right away
      2. Ideally, the downloading process will create a "buffer" of information being downloaded, so that playback will not be interrupted.
    5. The use of streaming media also makes it possible to "broadcast" over the Internet!
      1. It is possible to stream a live signal with no predetermined length, process that signal on the userís computer, and continually update it.
      2. The result would be a live broadcast of a video or audio nature.
  2. Types of Streaming Audio/Video
    1. Real Audio/Video were the first major streaming media formats available, and are still pretty much the industry standard.
    2. Windows Internet Explorer 5, on the other hand, now offers built in support for Microsoftís own streaming video format, which utilized the Media Player took resident within Windows98.
      1. One major advantage here is that you donít really have to download any sort of plug-in to use it.
      2. It is also possible to embed the actual media player into the web page itself and use scripts to control it.

Multimedia Formats

Sound:

  1. A sound requires constant "through put" in which the computer must deliver a steady stream of information until the sound is completely played.
  2. Depending on the quality of the sound, the amount of information per second can be considerable.
  3. Sound quality is measured by two factors:
    1. The sampling rate (the higher the better)
      1. 44 Kh. Is the quality of CD music This makes the computer work hard, but it may be worth it for high quality music.
      2. 22 Kh is not so good, but tolerable. A reasonable compromise to free of resources, and it handles speech pretty well.
      3. 12 Kh is pretty bad, but audible. Likely to sound hissy.
    2. The format
      1. 16 or 32 bit refers to how big the "chunks" of sound are as they are sampled by the computer.
      2. The bigger the sample sizes, the better the quality.
      3. 16 bit is CD quality
      4. Donít go below 8 bit. It isnít worth it.
    3. Stereo
      1. Involves the use of two channels of sound which correspond to variations we might experience through the differences in the position of our ears.
      2. Takes up extra resources, but it may be worth it.
      3. However, if you didnít record in stereo, you will not get the stereo effect even if you have two tracks of audio.

Sound types:

  1. Most computer based sound is captured as sampled audio intensities, listed above. This takes up much room because the computer has no built in means of understanding it. We call these "Wave" files, or .WAV.
  2. However, music that is generated by computers or "synthesized" music can often come in the form of patterns of "tones" which the computer can generate. These do take up less room, but they can only be generated, not recorded, and they can only be music. These are called MIDI files.
  3. Internet based audio is best presented in a "streaming" format, such as a Real Media File or a Netshow file.

Video:

By far, this takes up the most computer resources of all. Video is both time based, and graphic intensive. Video images are not based on models, but on bitmaps, which are constantly being updated. As a result, the computer must continually load a steady stream of bitmap information, which is difficult to compress in any way, and simultaneously play an audio track (if the video has one) in sync with the video. This requires a great deal of resources, and only recently have computers been able to do this. Even now, video on the computer is still problematic, but it is becoming easier to do.

Video formats:

  1. How video is displayed on the compute has to do with a number of factors, which are determined in the making of the video:
    1. size:
      1. a video which attempts to cover the entire screen of a computer will probably not play very well, since it will require a massive throughput of information to update itself, though eventually this will not be a problem
      2. Common sizes for acceptable video are as follows:
        1. 640 Pixels by 480 Pixels. = full screen.
          1. difficult to achieve without playback problems.
        2. 320 by 240 = quarter screen.
      3. works fine on most recent computers.
        1. plays well on a 10X CD-ROM or faster.
        2. 160 by 120 = eighth of a screen.
          1. works well on all computers, but is hard to really see.
          2. 2. Useful, however, for small "cute" effects.
    2. Data rate:
      1. A video can be "compressed" by the computer to deliberately restrict the amount of data throughput allowed and reduce the image quality accordingly.
        1. acceptable data rates today are:
          1. over 600 Killobytes per second.
            1. Plays well from a hard drive, but may not play well from an older CD
          2. 300 - 600 killobytes per second.
            1. safe on most cds.
            2. Compression makes the video more "fuzzy"
    3. Frame rate:
      1. You can actually play the video back at less than 30 frames per second to increase the quality of the actual images.
    4. Lip sync:
      1. applies to how closely the computer tries to match the video flow with the audio flow.
    5. Aspect Ratio:
      1. With computer based video it is possible to "stretch" a piece of video by changing its aspect ratio.
      2. It is also possible, using this technique, to build computer based animations as movies, which play in shapes other than the 3 by 4 dimensions of a television screen.
    6. File type:
      1. There are a number of different types of movie files, and a wide variety of ways to compress video for playback on the computer. Some of the main file types include:
        1. AVI
          1. This was designed for IBM computers, and is the standard.
        2. Quick Time
          1. This was designed for MAC computers
        3. MPEG
          1. a rogue standard which is impressive, but not always practical, since both the user and the author must use the same coding system before movies can be played. All IBM computers are equipped to play AVI, but few can play MPEGs.
        4. Internet Based video files are best converted to streaming format, which can be done using propriatary software fore either Real Media or Net Show.

Style Sheets

On a basic level, what is a style sheet?

  1. Style sheets can be small sections within an HTML document affecting only the page they exist in, or they can be separate documents affecting the appearance of many whole web sites.
  2. Style sheets define the behavior of agreed upon HTML structures throughout the document that accesses them.
    1. For example, you can set a standard color for all head-line <H1> tags in your style sheet, and all occurrences of the <H1> tag will be affected.
  3. It is possible to "import" a separate style sheet into a given document and "share" it among many documents.
  4. It is also possible to import the style sheet from within another document and share that.

Why use style sheets?

  1. The best reason to use them is to help standardize various constructs within a particular site for the purposes of controlling the look of your documents
  2. The primary advantage here is the saving of key strokes.
    1. Writing one style tag can save having to personally adjust the attributes of fifty occurrences of a given tag.
    2. Also, by changing the style sheet attribute, you can change all fifty tags at once!

Basic Style Sheet Structure

  1. The pre-defined HTML tags
    1. As stated earlier, you can attach a value to any known HTML tag, such as <B>, <P>, <H6>, etc.
  2. The Class
    1. Classes are user-defined, and allow the author to create their own identification tags.
    2. By defining a class, it is possible for the user to tie almost any part of the document to it, by simply including the name of that class in the attributes.
    3. For example, defining the class .purple text as purple in color can be applied to just about any text item in a document. When this is done, the item will be redisplayed according to what the .purple text class says
  3. The Pseudo Class
    1. These are classes often defined within style sheets to solve particular problems.
      1. One such class was created to affect only the first letter of a paragraph.
      2. Also, the "hover" class tells the browser what to do with the appearance of the link when the mouse hovers over it.
  4. The Identity
    1. These constructs are used to affect only one element within an HTML document, based on a pre-determined code which only that one element uses.
    2. Although it is possible to use this as a class, it was originally designed to be unique.

Style Sheets and the Future

  1. Because style sheets are relatively new, some browsers do not yet recognize them.
    1. Because of this, it is strongly recommended to put everything you write into a style sheet into a comment tag <!--
    2. This will ensure that browsers which do not recognize the <style> tag will not display the style sheet as text.
    3. Style sheets which exist as separate sheets do not have any HTML constructs within them.
  2. Because style sheets are so useful, it is very likely that some HTML tags will shortly become depreciated in favor of them.