Introduction to WWW Programming [Class Notes] - Began 9/21/98 9/21/98 ======== A URL provides a location / path to a remote document. Metaphors? Ask yourself: 1) Does the metaphor work with your message? 2) Does metaphor work with your audience? 3) Is the metaphor within the capabilities of the design team? 4) Does the metaphor hold for the entire site? Organization of the website [the arrangement of the pages in some relationship] can cause people to move around througout the site and become lost. Page Design Issues: Everypage has a background and foreground which must be controlled. Background = Must support the design Needs to be artistic [or technologic] Distracting issues ; overpowers the foreground, or because of contrasting issues makes it unreadable. Make sure the colors are highly contrasting. Foreground = Where all of the information is placed ; graphics, text Needs to be consistant. Navigation Stratigies ===================== 1) Scanning - reading most information you come across to see if it apples to what you are looking for. 2) Browsing - looking around for information but not really scanning 3) Searching - Navigating with some directed goal...such as "X" 4) Exploring - A less motivating search. ;-) - if you find it, cool. If not, owell. :) 5) Wondering - randomly going around without a patern other than loops and backtracking. Characteristics of "BEING LOST" : 1) Where do I go next? - you have two or more choices, but are not sure where to go 2) Where am I? - you have NO choices...you have to guess. 3) How do I get there from here? - I know where I'm at, but what do I do next? Do I HAVE to take another choice? to counteract, designer should do two things: 1) Don't let the user get lost and 2) No matter where the user is, he should have enough information where he doesn't exhibit any of the "lost characteristics" listed above. 10/9/98 ======= Where are we in this class? We should be working on our personal homepage currently. There is one more additional project after this one. Insure components and pieces are there. Web would LIKE to be printed, but a copy will also be submitted on disk. Semester Ending Project - you'll have to build a design [but not build] a total website. Goals determination will be partially up to us, but we're going to be designing an ITE website for the University of South Alabama. What is the message? audience? treatment? et cetera? Create a page or two of the website [but not entirely the entire website]. You'll turn in an alanysis of goals, people looking at it, website for ITE would have to serve several audiences: recuitment audience students currently in program academics looking at our program to see how we've formulated our program. describe navigation issues more written that "coded" CAUTION: In choosing a treatment - be sure it's in the scope of the design team. Don't come up with a treatment we couldn't reasonably figure out how to do. [if it's too wild, we might have to figure out how to do it] 10/12/98 ======== Storyboarding.......[page 45 in the book] - simple sketch to define the visual idea. 1) You can review the design for missed elements owner might "challenge the design" for different uses...such as: * Novice user * Interested [but non-conformist] user * Disinterested non-conformist 2) Client Review - Remove confusion and problems of "differing understandings" Make sure you get all the details straight before you start the production. Main job is "design" - typically someone else gets to implement...except since we're in the CIS field, we typically get to wear a LOT of hats....that of design AND of implementation. Several pages in book about designing and laying out a page... 10/14/98 ======== Color Ideas...Concepts.... Graphics Color Theory (Reflects Color you see) Subtractive Color - Pigments Primary Color - Red, Yellow, Blue Secondary Colors - Orange, Purple, Green [mix colors together for these] Intermediates - mixing two to one radio of primary colors Tertarary Colors - any other ratio of colors... Color Triangle............. X [white] / o [tint] (pink) / X - - o (tone) o [grey] \ 0 [shade] (darker) \ X [black] Additive Color....[light] ========================= (Omits Color You See) primary colors are red , green , blue [RGB] secondary colors - blue+green = yellow ; red and blue together = purple = = = Gamma Correction. If you have a computer system, and you want to have red, green, and blue together in this portion - we know technically what the color should be. If it's NOT that color...you set a mathmatical formula (gamma) to more closely match what you see in real life... IBM pc's and and all of their clones....contain NO GAMMA CORRECTION. MACS have gamma correction....that's why they're better for graphics. which website had the gamma tests? Correction between input and output -- so you should get close to what you expected. it's mathmatical. Input / Output Example: input might be [r, 128 ; g, 250 ; b, 10] | | hardware... gamma correction adjusts values to make sure the output is as close to the input as possible. | | output SHOULD be as close to... [r, 128 ; g, 250 ; b, 10] MAC / silicon graphics have gamma correction built in Properties of Color: A. Hue - warnmess or coolness of a color B. Value - A measure of the amount of light or dark in a color C. Saturation or Intensity - the brightness of a color Color Effects: A. Luster - has a shiny quality B. Iridescence - affect of having a 'pearl-like' appearance to it color actually changes depending on how light hits it, et cetera... C. Luminosity - Delicate light difference, appears to have a soft glow unusual colors which appear that aren't quite natural ; light through a fog...et cetera... D. Transparency - to be able to see through things....glass, et cetera... E. Chroma - effect of colored light when it falls on a surface ; changes color of the light of the surface. What does color mean? ===================== A. Anthropormorphize - We give human like qualities to color. "Red with Rage", et cetera... ;-) B. Harmonious or Discordant - a relationship where things go together [harmony], or where they clash [discordant] C. Cultural Meanings - In western culture...black symbolizing mourning ; in easter culture...it's white. Royalty is purple, but in some countries, it stands for prostitutes. check out color.com for more information color survey: http://colorcom.com/~colorcom/index.html#gcs good information source about color: http://colorcom.com/~colorcom/content.html 10/19/98 ======== 1) Initially, we're going to discuss HEX color.... example: "003333" - [sort of a dark nasty green] 2) What is a color palette? 8 bit color....you're referring to a palette of colors which specifies 256 colors going with 8 bit values. netscape and others....choose 216 colors...because windows said you can't change a certain number of values you've still got 216 colors left. 3) descriptions of problems...[adaptive palette] image exists...jpg...in true 24 bit color. we can't display the 24k pictures in 256 colors. pull picture into graphic editor and reduce the color depth to 256 colors. software will produce an image which corosponds to what they call an 'adaptive palate'. once you change the palette, you can't get back the origional color pallette, thus - you can't get back the origional image. 4) Browser Safe Palette agrees 216 colors agreed upon. if you choose those 216 colors, there will be no 'dithering' if you limit to those 216 browser colors. 5) Dithering jpg image that should be orange ; dithering would mix colors of the 216 palate and try to create the non-browser colors you specified. types of dithering: a) pattern dithering - uses a fixed mathmatical progresssion for a region ; use two colors to mix and try to get your origional color. b) diffussion dithering - uses a random method of assigning pixels to dithered color...provides more of a 'smoother' effect. should be better than pattern dithering as patterns don't show up as much. prefered method of dithering. c) custom palettes a) debabelizer - using a tool to examine the images b) make a big image by combining all of your images. [open all of your images and then ask the program to select the most common colors] to look up more information on web graphics: http://www.webreference/div/graphics/intro.html Graphic File Formats: 6) a. Compression Techniques 1. Lossy - You loose information ; might wish to reduce sounds you can't hear. 2. Lossless - You clearly don't loose anything ; when you decompress the information on the OTHER end..it's all back. b. GIF - Graphic Interchange Format Developed by Compuserve in 1987. first version - gif87a - allowed 256 colors - had 8 bit depth included interlacing. was a lostless compression method. used the lempel-ziv-welch [lzw] algorithm uses "repeated string compression". it scans the image and looks for repeated things. one minor flaw - scans and compresses horozontally. this is weird because: ================ | | ================= ================ | | would compress to 150 bytes - horozontal compression ================= ================ | | ================= ===== ===== ===== | | | | | | | | | | | | | | | | | | compression took 334 bytes....because it's vertical. | | | | | | between | | 's - had to code three seperate channels | | | | | | ==== ==== ==== Non-Interlacing - goes consecutively from left to right...top to bottom... Interlacing - comes on the screen slowly...but in an entire panel. GIF 87 allowed 4 pass resolution - on a 16 line file, you might get lines 1 and 8. It works out like this: Pass One - sends lines 0,8, getting 12.5 percent Pass Two - sends lines 4,12, getting 25% of the file Pass Three - sends lines 2,6,10,14 - getting 50% of the file Pass Four - sends lines 1,3,5,7,9,11,13,15 - for 100% tests show once we've received 30-50 percent of the image, we'll reconize the concept of the image. 10/23/98 ======== Transparent GIF - Give X and Y cordinates of two points. Transparent GIF's allow a background color to be replaced by the "other" background color. (USE background image in paint shop pro??) Transparency is supported by both types of GIF files. GIF87a: GIF89a lostless compression Lostless Compression interlacing 256 colors 256 colors Transparent animation Lostless compression controlled by lempel-ziv-welch [lzw] algorithm.. Times are symetric ; it takes the same amount of time to compress as it does to decompress. Future Efforts - PNG - portable network graphics. Developed by boutwell in 1996. Solves problems by legally creating a replacement to gifs. Has lostless compression (a form of lempel-zev, not patented, can't be) does well with horozontal and vertical images interlacing (7 passes) 256 colors transparent backgrounds no animation supposidely every 4.0 supports PNG images. GIF files are good for flat graphics files of limited color. [means the color is like...cartoon color. it's all red, green, or blue] more or less all one color. JPEG- Joint Photograhers Expert Group Developed a method of compression for photographic bitmaps. [photos that vary and have colors and resolution of a regular photo]. Lossy compression method that provides descent compression. Here's how they do: information is removed from the image that is least noticible to the human eye. It creates a 'spacial frequency map' , and then it uses some kind of descrite cosign transformation to get the image up. frequency distrubution allows them to choose the colors and locations in which they throw away. it's a compression method. file format is called "jfif" - the jpeg file interchage format. Compression capabilities is from about 10.1 - 100.1. generic rules of thumb - 10:1 - 20:1 gives high quality with negligible image loss. quality of picture remains excellant. 30:1 - 50:1 - moderate compression - supposed to be good for the web. 60:1 - 100:1 - poorest quality, quite suitible for thumbnails [extremely tiny pictures] once again, JFIF - Jpeg file interchange format. Now we have progressive JPG to support interlacing. PNP - portable network picture - new 'standard' ; should eventually replace JPG standard. Lossy compression that SHOULD have more performance. Still under development currently. Anti-Aliasing - one more graphic format - Edges of images COULD come up jagged because the resolution of the screend doesn't support enough options where you can make it show up normally. [there aren't enough pixels]. Solution - use colors to try to increase or decrease the intensity of a line to try to make up for the jaggedness caused by lesser resolution. Text can be anti-aliased or not - if you want big bold headlines ; blocky looking you might want to use the anti-aliasing so your text doesn't look so jaggy. your text WILL be jaggy, but anti-aliasing will improve things. Copyrights and Ownership - if you save a file on a site and download a picture, you've PROBABLY violated the law. next... aliasing and anti-aliasing brief over view of text on the web 11/2/98 ======= [1] Typeface - the shape of a letter. Font - An Instance of a typface size - (points) [.071 of an inch] style - (italics, et cetera) [2] Type faces come in two styles: Serif Faces (have fancy curvey do things on the end) - they're called "slabs", "strokes", et cetera...those letters are supposed to make the text of a long document / bulk of type easier to read. Times New Roman is one of the most common examples of a Serif font. [it's the default on most systems] [3] Sans Serif Face don't have curvey lines. Ariel and Helvetica are good examples. Generally good for Bold, Big Headline sorts of things and labels. [4] Monospaced vs proportional - origional printing that we did used a fixed spacing for each letter. [there should be the same width in each letter] A non proportional font says all fonts take up the same space [courier] a porportional font says each character uses the amount of horozontal space that it needs. most people think porportional spacing is easiest to read. when you use columns [numbers, et cetera], be sure to use mono-spaced when using numbers and table data. newer printers support a LOT more fonts, et cetera. [5] Line Spacing (leading) in the old days, we only had 1 , 2 , 1 1/2 spacing more or less. Currently, we can space just about how we want to. [6] Drop Cap A drop cap is used for inphasis....it's the first letter of the paragraph that hangs down for the start of that section. We use drop caps to improve readibility. [7] small caps if you write in all caps, but do reasonable spacing, the readability isn't too bad. If you write in smaller caps, you get the emphasis part, but you don't feel like you're being shouted at. [8] kerning the technique that pairs letters that are shaped similarly where they look better. such as AV, AT ; et cetera...[it should look better if the "T" was partly over the "leg" part of the "A"] [9] tracking spacing between actual characters similar to [R ,] and [R,] 11/6/98 ======= [10] font size actual size of the font being used in the code. uses more or less.... [11] type face this is sort of a sneaky problem. fonts do not corospond: pc mac == === ariel helvetica courier new courier times new roman times we don't have the ability to specify fonts more or less where we can automatically push it to you. there is a delima...since mac uses a different font from the pc, it's better to use the default font via HTML ; therefore, it should look the same on pc and mac. [12] character spacing you have 
 preformatted text. can say MY D  O  G  IS
it will space it, et cetera...this isn't easily accessable via frontpage. OTHER MEDIA =========== AUDIO - it's a time critical media. so...how do you solve the problem of having bandwidth problems, et cetera... a) you can download the entire audio file ; then you can start plug-in ; listen b) eventually "REAL-NETWORKS" came up with a better way...they created streaming technology. potential problems a) size of the data - extremely large b) network transport VIDEO - time cricical ; except for one thing. video is time critical and audio is time critical. solution to problem is first to find a format that solves the synchronization problem. MPEG (motion picture exports group) is a common problem AVI (windows solution) quicktime (mov) shockwave we have several proposed soltions: a) download b) real video (streaming) c) multicasting - (mbone). more or less like intercepting a tv broadcast. potential problems: a) size of data -- EXTREMELY large. (image = resolution ; how big it is in relation to the screen; number of pictures per second) b) network transport - problem is even worse because there is even more stuff. jenni.org...? mit? last test left off around notion of storyboardin and the design process. information we've covered since then was primarily about info on the web color color theory web formats advantages disadvantages questions will be asked combining concepts from before with inplementation details of now. why would a desinger want to include audio in his webpage? answer - when it enhances the message. (teacher goes off the deep end here) much more effective to hear the message from the president than to read a greeting. dypinca@aol.com rabston@abcotech.com 11/16/98 ======== COPYRIGHT LAWS.. Everything that is created or written is supposed to be owned by the individual that created them. copyrights used to be the ownership of intellectual property. in 1790, we passed our first copyright laws. initial goals were to protect the intellectual advent of the creater of the idea. initially, most of the technology degraded copies. the digital word does not do this. COPYRIGHT holders are primarily publishing companies. clinton administration - proposed the NATIONAL INFORMATION INFRASTRUCTURE {this was the NII} - as the we was growing, the publishers realized if they put valuable content (intellectual property) in digital form, they're going to loose control of the content of it. there is a doctorine called "FAIR USE" (See handout) (a) should have no commercial gain articles are of limited nature and used for a limited time (d) means you can not use authors work in such a way that it damages the authors ability to make money through protected copyrights. How do you create copyrights? you don't have to do anything. next step might be (C)opyright 1998 Jay Fuller next step might be to register with a copyright office. actual rules differ between countries. 11/18/98 ======== DOMAIN NAME - Most people want some sort of identify with their website One way to do it is through design..with logos, graphics, et cetera the other way is through a DOMAIN NAME. It is human readable which translates to an IP address. There is a 32 bit number - such as 205.206.117.47. Domain system provides us with a hierachrical method of naming things. In the beginning, they said there should be like 7 domains - com, edu, org, net, mil, gov, int As it grew, things changed. :) there is a server out there called a DNS server. It's the domain name system server. Machines ask for domains moving up a level. We might ask USA's domain server, which might ask the server above 1993 - 21,000 domains 1996 - 240,000 domains 1998 - 40,000,000 host computers ; 5,000,000 domain names 3,496 college names there are some new domains being perposed. They're arguing about who gets to manage them, et cetera: .store .web - (parties who emphasize web activites) .arts - (arts and cultural sites) .rec - (recreational and entertainment sites) .info - (information providers) .nom - (individuals) [french word for individual person] If you want to get a domain name, there is only one way to get it: checkout http://www.tide.com (isn't owned by tide) abbreviated steps to get a domain name: 1) find out if your desired domain name is available or not [company name is network solutions, inc] rs.internic.net/cgi-bin/whois?domain.com 2) determining the top level domain. 3) fill out the form (that internic provides) identification and billing information 2 name servers (need names and addresses) 4) complete form via email or online 5) pay the fee ($70 for first 2 years, $35 / year afterwards) 11/20/98 ======== Yahoo - will link you for free. You have to do all of the work. Check to see if we've already linked you. Lycos - add your site. First, be sure you're not already there. If you add your site, submit your URL and include your email address. there is a tag called META - a tag that allows you to define keywords about your site. Webring - they're organized by "things" siteowner.com will check your site? 11/23/98 ======== Client Side / Server-Side Processing ==================================== In the early days, any added features had to be supplied by the server using server-side processing. Traditionally, the browser could specify some action (using a form or some other mechanisn), the server initiate and process tha action on the server computer and send a response back to the browser. This was usually some information retrived from a database. When the processing takes place on the client machine and is in addition to the browser function, this is client-side processing. This isdea is clearly seen in the plug-in software that runs on many browsers.s however, the need to be able to do some specific actioon has led to the development of client-side scripts to provide different capabilities. Scripting vs Programming ======================== Traditional programming is exactly that, programming. the language of programming (pascal, c++, fortran, etc) provide the capability to write complete systems, control the computing environment, and be compiled into the native code. Scripting has come to mean programming in a specialized language for small, limited functions. These will NOT control the computer environment totally. (javascript, vbscript, perl) Languages like javascript, vb script, and perl have been developed to support this need. Scipriting languages are not developed with specific functions and are NOT GENERAL PURPOSE LANGUAGES. For example, javascript (not the same as java) is designed to solve problems and do things that run on the web. Scripting languaged are usually intreprited and run slower than combiled languages. With a general purpose language, you only compile once. (for example, from for i=1, i=1000, et cetera....it would run and compile 1000 seperate times. In an actual compiler, it would compile once. Common Gateway Interface (page 180) ======================== In the CGI environment method of providing server-side processing, the browser requests using HTTP that a specific program be run on the server. CGI handles the web server's access to the external programs (external to the web server software) (client)---------->>>>>>>>>web server | | | (database server) The tag controls the request for the specific program. In those cases where a program needs input for the program, two methods are available - GET and POST. The GET method simple appends the variables collect by the browser to teh tag. The POST method uses another seperate transmission of the variable information. Upon completion of the program, the CGI system transmits the results back to the browser. It is now possible to provide increased functionality to the web server software itself by using API (application Programming Interface). These extensions in server software functionality, provide some benefit in speed over the more traditional CGI approach. VB-Script - Javascript ====================== the scripting languages that are out there allow us to build systems that are specific to web and web applications. javascript is seperate from java just as vb script is seperate from visual basic. Java ==== Initially intended for embedded system. Anything that has a computer in it needs a language - java is language / platform independent. You initially write your code in java. It's eventually "translated" into java byte code. Machines accept the byte code (the java virtual machine), and will intreprit the byte code. The same piece of code works everywhere. Security Issues =============== Anytime you bring code to your machine and run it on your machine, you take a big step which could potentially be a major security issue. This security issue is causing problems with manipulating my screen, et cetera. Microsoft's approach to the same problem is ACTIVE X. there was NO SECURITY provided with ACTIVE X. Design Issues ============= Biggest problem currently is insuring that this technology works. The user has the right to turn off all those addons. the power is nice, but if the user turns it off, your website becomes useless. Dymanic HTML ============ Allows you to re-write HTML on your page.....on the fly. Is now widely supported by both netscape and ie. 11/30/98 ======== People involved in the design process: 1) client - end user of the project. 2) design team manager / producer - person who is in charge of the design team. He's the manager of the design and development process. traditionally, this job is to deal with budget and business aspects of the project and not the creative aspect. 3) information architect - (more like the designer) - deals with message of the client and determines what the important pieces of the message are, how they're to be displayed to the user, and how they're to be accessed by the user. (organization of the site / layout) 4) interface designer - provide an interface that is useable and useful for the project so that the interface itself does not interfere with the message. (buttons are in the right place, et cetera..) this person should make sure navigation is functional, et cetera... 5) graphic artist - responsible for the visual look and feel of the images on the website. includes not only the shape, but the color schemes also. includes color, harmony, et cetera. (will be animator, photography people, more...) 6) writer / editor - wordsmiths the written message. looks at the message and finds the best way to write it. provides clarity and detail to the message as the client sees fit. 7) programmer - the person who produces the detailed programming to cause your website to function as designed. (doubles as the webmaster who generally handles HTML ; example - frontpage handles programming job for now). This is "grunt work" - and easiest to train people for. Tools usually come out to handle this. 8) production engineer / webmaster - puts project pieces on the web as designed. requires an understanding of the systems making up the website and functionality. responsible for accessibility and security issues. must know how things are organized and how they work. 9) isp - internet service provider - web hosting services - people who provide a location and space on their machine for your website. will also handle the domain name (sometimes). fees range from disk storage to access to your site. 10) user - this is the person the entire design process is aimed at. the client wished to get the message to the user so that he can influence him / her in some way. the better the design team can understand the client, the user and the creative process, the better chance they'll be able to come up with a message that will be effective. you must understand all three. 12/2/98 ======= 5 design rules: 1. Communicate With Clarity: a. What is the purpose? first impression - as the inital screen loads, people decide if your site is well designed? if so, they'll probably stay. is it of good quality? is it rewarding? second impression - immediately people reconize a common interface (such a buttons or something) - useability becomes obvious (2-7 seconds into the visit) third impression - content! is it interesting? is it useful? b. use common syntax. people understand interface issues ; use controls and navigation buttons that people are familiar with (such as VCR controls, et cetera) c. let the user go where he wants to go be sure the nagivation issues are solved ; when a user clicks on something, make sure it goes there. 2. Consistancy: in your design, you should provide consistancy. People divide this up into three basic components: a. visual consistancy - is the site the same across the entire site? b. conceptual consistancy - be sure the buttons are round or something - be sure the interface concepts strike the user c. mechanical consistancy - try to make sure you always have a next or a previous button. 3. Use contrast to advantage: virual contrast to high contrast images are very powerful (using black and white, or high color, high hue, et cetera) Having high contrast can violate some other rules we've been given. 4. make the site uncluttered: a. don't pack every page b. give cues c. layer information (break the pieces up and organize by components) d. filter the information / focus the info: (according to individulal preference) e. less is more - use the white space to focus the attention on the 'stuff' that is there. 5. tell a story: don't forget the web is about communication of your message. a. story telling helps understanding b. we can use interactivity