Website Development & Management Some Wrap-Up Items Instructor: John Seydel, Ph.D. CIT Fall

The Final Exam: Completed FKAuto Website Overview Internet (public) site  Primarily for prospective customers  Used car inventory and information  Access to employee intranet  Other... Intranet  For FKAuto employees  View inventory, customer, and HR info  Requires login  Database maintenance Features  Your own stylesheets (research/employee design guidelines)  Cookies, Flash, JavaScript, other (as extra credit) Questions... ?

The PHP Interface for Database Processing Input form Serves as front-end Gets user data  Form inputs  Session variables  Cookies Often gets initial data from database Form processor Serves as  Back-end process driver  Front-end confirmation Uses form data to interact with database

Review of Web-Based Database Processing Steps Preliminary work: define variables Database name Table name SQL string Create a connection  mysql_connect() Open the database  mysql_select_db() Submit a SQL statement  mysql_query() Create a recordset Add records Create a table... Process records  mysql_fetch_array()

Graphics: A Two-Edged Sword Communicative power: a picture’s worth a thousand words and is far more interesting and intuitive Inappropriate graphics, however, can destroy the message Principles Difference/similarity to print Compressed image formats Simplicity Keep loading time in mind Design with the client(?) in mindclient

Image Types for the Web Bitmap graphics Uncompressed: BMP (don’t use!) Compressed:  JPEG: loads line at a time (more colors, 24 bit)  GIF: loads increasing levels of clarity (interlacing) Vector graphics (e.g., Flash): scalable, typically smaller, but require player Using a scanner (or digital camera) TIF is a typical format Needs to be converted to JPEG or GIF

Which to Use: JPEG or GIF (or Flash)? JPEG: appropriate for photographs and other intricate images Advantages of GIF: Typically smaller file sizes Features: animation, transparency, interlacing Applications: logos, buttons, icons, etc. Vector graphics (e.g., Flash) are thus an alternative to GIF Often much smaller Much more scalable However, need player

Some Image Design Guidelines Use sparingly to avoid clutter and to control load time Arrange to achieve balance with text and white space Maintain contrasts when using background images Keep small (page should take no more than 4 seconds to load on broadband connection) Reduce size  Less than 50 kb per image  No more than 100 kb total per page  Limit buttons to 2 kb and re-use when feasible Also: use thumbnails and add warnings Always specify width and height in markup; this reserves space while the images load

Effectiveness Through Simplicity Good graphics provide emotional appeal Eye-catching Balanced Attractive Of course, rational appeal is also needed Logical arrangement Useful information Simple designs combine emotional and rational appeal

Web Site Testing Local-host testing Test on developer’s computer Server-side testing Test between server and developer's computer Client-side testing Test with various configurations and browsers at different places and times TestingTesting???

Appendix

Know Your Clients First of all, who is the “client”? Actually a twofold clientele exists: Firm sponsoring the website Patrons of what the website offers Small images for customers involved in Chatting Shopping Information searching Large images for businesses dependent upon photos Real estate Art

How/What to Test? Locally, where developed Remotely, through the web (from a remote server) On varying monitors Sizes Color depths On MacIntosh, Windows, & Linux systems On Various browsers and versions

Overview of Basic Database Processing Reading data  SELECT Adding data  INSERT Changing data  UPDATE Removing data  DELETE Modifying the database structure Creating a database  CREATE DATABASE Creating tables  CREATE TABLE Changing table fields  ALTER TABLE Removing tables  DROP TABLE Note reference material: Appendix D

SQL Examples Adding data: INSERT INTO test_table VALUES (1,’This is a note’); Changing data: UPDATE test_table SET test_note=‘New note’ WHERE test_id=1; Removing data: DELETE FROM test_table WHERE test_id=2; Creating a database: CREATE DATABASE testDB; Creating a table: CREATE TABLE test_table; Changing a table’s structure: ALTER TABLE test_table ADD test_cateogory TEXT; Deleting a table: DROP TABLE test_table;