INFO202 - Intro to eBusiness Tech - Summer 2013

Current Stuff as at June 25th:

(6/25) Introductory Remarks, Syllabus, &c...

Points are posted for last summer's course. This summer's will be similarly assigned.

Quiz #1 Topics: IT Infrastructure

Quiz 2 Topics: Linux Web Server; XHTML & CSS, Web Graphics

(6/26) Logins for assigned. Get 'Hello World' in your web directory.

(6/27) The introduction to XHTML and CSS uses a Linux web server. Students are urged, but not required, to use the opportunity to gain experience with the Linux command line and with primitive editors. This seemingly retro interface is all you get on many servers and other networking equipment. Knowing how to use it will differentiate you from other applications who are lost without a mouse or touch-screen and don't know how to work at the command line.

Required Reading:

(6/27) The w3schools' tutorials on HTML are the text for this part of the course: HTML Basics, HTML Advanced, HTML Media, XHTML, and the Examples. Also, check thru the HTML References. CSS topics are also required: CSS Home, CSS Styling, CSS Box Model, and CSS Advanced. Get familiar with the HTML & CSS references so you can look up stuff yourself.

(6/27...) These topics will be covered in lecture, are also required reading: HTML, XML, XHTML, & CSS. Good answers to Quiz Questions come from here!..

Hands-on a Linux Server

(6/28) We're starting the hands-on portion of the class working on a Linux web server,, which is a 'virtual server' running Centos 5.6 in RackSpaceCloud's award-winning infrastructure. Toward the end of the semester we'll work a bit with Windows, in keeping with the class' objective about experience with a range of platforms.

(6/28) Hands-on a Linux Server.

Specifications for Projects #1 & #2

(6/28...) Please read and heed The Specifications for Projects #1 & 2 : Non-compliant projects will be docked one point for each unapproved diversion from, or ignorance of, The Specs. Please get any questions answered in class, make sure your stuff meets the specs.

Start with a Valid 'Skeleton'

(6/28) The intro examples used in class are located at They are available to copy from /home/lectern/web. It's best to use the command line to copy from /home/lectern/web to your web directory, something like these commands will work:

  cd /home/lectern/web
  ....  Look at the list of files to make sure you're where you want to be  ....
  cp BareBones.* ~/web/
  cd web
  cp BareBone.html index.html

'Screen Scraping' HTML and CSS from View -> Source can cause problems with formatting. If what you've copied into your webspace appears 'stair stepped', all on one line, or otherwise out of whack try another way of copying/pasting or resign yourself to fixing it up by hand.

Please note:

Style & Content -- CSS & XHTML

The mantra for professional web work has for some years been 'separate style from content'. Most content these days is the textual and graphical stuff of this or that topic stored in databases or other data structures. Web servers, like Apache or IIS, run scripts, like PHP or .asp, that mash dynamic content from the database into the more-or-less static HTML document as each page is served up. Content should only be marked up semantically so that it's portable from one page, or even one site, to another page or site.

(6/28, 7/2...) Focus on XHTML and CSS: Techniques for separating style from content, Units of Measure, Taxonomy and Anatomy of XHTML & CSS elements, References for webdesign.

(7/2) Mostly open lab, some students are still working on Project #1, please keep at it, this course moves right quickly in the summertime...

Web Graphics

(7/5) Demo in class showing techniques and terminology for prepping images for the web: getting them off a camera; making doggone sure where they are; checking their size in bytes; prepping them for web use: cropping; scaling; compressing; adding alpha channel & using the wand & other techniques to select areas for transparency; trade-offs among gifs, jpegs, and pngs; &c.

(7/5) Checking the file sizes of images is important to make sure your graphics meet the total size requirement of 80Kbytes or less for the images on your home page, and that the required three images are in your web directory. Look at the byte counts in your web directory and don't go over the limit!

(7/5) Key points about Web Graphics:

Pixels; Color Models (RGB, HSV, CMYK), color depth, specifying colors with Hexadecimals in RGB, web page resolution about 100 Pixels/Inch, camera resolutions way higher; Web image types: gif, jpg, png & tradeoffs among them; Other image types: bmp is outmoded web type, tiff is extra hi resolution, not for the web, the GIMP's scf and and other Native Formats for graphics software; Demo of jpeg compression/quality issues; &c; &c...

A few more, finer points about prepping graphics for the web, picking appropriate format, avoiding dithering, cropping, compressing, trade-offs between file-size and quality, dithering gif when a color not on gif's pallette is chosen; transparency applied to logotypes, demo'd using the wand to 'mask' portions of an image, &c...

Quiz #2: Sample Questions.

Quiz #3 Topics:

Intro to Structured & Object Oriented Programming with JavaScript

(7/10) Required Reading: W3Schools' JavaScript Tute's first 2 sections, JavaScript Basics & JavaScript Objects.

JavaScript & Database Demo Pages: Here is a link to the pages discussed in class. You're welcome to use any of the rather dry JavaScript features there to get your JavaScript points, or check out googlings like 'cool javascript effects', 'javascript cursor effects', 'awesome javascript effects', or the drier 'javascript examples'.

Key Points:

Here are some resources about JavaScript:

Project #3: Add JavaScript to your Webpages

This project is in two parts for 10 points each:

Project #4 - Database with MySQL & PHP:

(7/11) Project #4 is in two parts. Part 1 is to demo at the command line, three 'novel queries' from the EBUS202 database, not in the class' examples, each involving joined tables and/or SQL's aggregate functions. Part 2 is to make two of these two queries show up on your web pages at using a PHP script. Here is the accompanying lecture about DBMS and Transaction Processing.

These next ten points are earned by working with the MySQL database server and server-side scripting with PHP:

Your 'Development Environment'

Database programming for the web is an inherently complex task involving multiple skills, data structures, and programming languages. Careful attention to error messages from the server and browser is required. The database needs to be quickly available to test SQL statements used in the scripts, to see the effect SQL in the scripts has on the database, and to delete trashed records or make changes to the schema.

The more a programmer can _see_ of these rather abstract components as they work, the easier the work becomes. One way to keep the components visible is to have at least three putty sessions running plus a FireFox browser with a View Source and Tools -> Error Console available:

Here is a link to a screenshot showing such an arrangement of putty sessions and browser:


An 'IDE' (Integrated Development Environment) such as the Open Source Eclipse, IBM's WebSphere (which relies heavily on Eclipse), or Microsoft's Visual Studio (which Looks a lot like Eclipse) provides all these 'views' within a single window. And some, like Visual Studio, allow drag/drop convenience for combining database objects with progamming objects with minimum scripting involved. The proprietary Zend Studio is a powerful (not-cheap) IDE that provides 4GL power to 3GL PHP and SQL languages.

Project #5 - Visual Studio's Visual Web Developer

Get Visual Studio 2010 Pro! Those going on into INFO350 should comply with the requirement that every student needs a notebook computer! This turns an ordinary classroom into a 'computer lab', and students without a computer, or with the wrong version of the software are a pain in the instructor's neck. Now is the time to load it up with Visual Studio. Get it free from the Microsoft Developers' Network's Academic Alliance. Please do not get it from anywhere else, or an earlier version. Visual Studio 2010 Professional is the one to get, 32 or 64-bit depending on your machine. The Ultimate or Premium versions add a lot more stuff to download and a lot of features not needed by the ordinary student, but are there if you'd like them. The best place to be to do the download is with an ethernet jumper plugged into the network in the INFO lab on the 4th floor -- that's next to the MSDNAA server so a DVD downloads in a few minutes. Anywhere plugged into the School of Business network, as in a breakout room, is a close second. Wireless is likely to fail or produce an un-usable image.

Those not going on into INFO, use what's in the labs if you're not wanting to download/install a very large application...

About Visual Studio

Visual Studio is in your future as an ISY major! We use C#.NET in INFO350 and again in INFO471-Technology Support for EBusiness. Most Seniors choose to use Visual in INFO465. These examples are in Visual Basic.NET. VB & C# are the most used Programming Languages that work in Visual Studio's IDE (Integrated Development Environment). Where JavaScript and PHP are both Open Source languages, Visual Studio's languages are Proprietary and allow applications to be distributed without their source code.

An IDE makes it easy for application developers to _see everything_ they need to work in today's DBMS-intensive environments. The database, scripts, features of the language, debuggers and other objects in an application are all visible in an IDE. 4GL IDEs provide a 'GUI way' to do development so that many routine & tedious scripting tasks, like making a form for users to update a record in a database, can be done by 'dragging' a database element and 'dropping' it on the form -- this 'makes the computer into a programmer' and frees up developers' time for other tasks, such as enforcing complex business rules, the IDE can't do.

Visual Studio is not the _only_ IDE in use by professional programmers and analysts. Visual Studio competes well with several other IDEs:

Assignment: Please get somewhere you can spend an hour or two with this Video Tute about the Visual Web Developer aspect of Visual Studio. Use it to make a web page to show me in lab, including at least two graphics, for 10 points.

Additional points, up to 10, may be earned on or before the Exam Day in 5-point increments by showing me one or two of these in the lab:

The Pulse of EBusiness: Web Services, XML, EDI, Accounting

XML: Use the XML tutorial at to get an introduction to this very important Markup Language. From the '90s forward, XML is becoming involved in more and more standards. Even very mature EDI standards like ANSI X.12 and EDIFact, which have been used increasingly since the '70s without any XML, are adding 'XML Versions' of the same eCommerce documents. In 2010, XML only has about a quarter of the bandwidth in electronic business documents, but it's definitely the way to do it in the future. All modern programming languages include features that facilitate the coding of scripts to handle XML documents, some using a GUI interface and others in 'plain code'.

HTTPS for C2B & B2B Most C2B eCommerce is via HTTP and HTTPS protocols directing traffic between a Customer and some Business or organization, where the customer is using a web browser like FireFox, Chrome, or IE. Most B2B exchange is via the same HTTPS and HTTP protocols, but without a web browser involved -- these are in the form of 'Web Services' that are used to move EDI documents like Purchase Orders, various Acknowledgements & Manifests, Invoices, Insurance Documents, Bills of Lading, and even Banking Transactions _directly_ from one Business' computer to the computer at some other Business.

'Web Services' are growing in importance. 'SOA' is 'Service Oriented Architecture' and is a big change from the way computers worked in the past, where computers of different manufacturers were difficult to 'network' directly. Now, using open standards like HTTP and HTTPS with techniques like SOA and SOAP (Simple Object Access Protocol) any computer that can use The Internet is able to send a request via a web service directly to a customer's or supplier's system. From the '70s thru the mid-'90s VANs-Value Added Networks were used like 'electronic mailboxes'. These VANs facilitated the exchange of EDI documents, but added about a dollar to the cost of each transaction. Today, most EDI documents go 'machine to machine' over The Internet without additional cost of a VAN.

The 'S' in HTTPS references another web protocol involved in eBusiness: SSL -- Secure Socket Layer. Certificate Authorities like VeriSign, Thawte, and GoDaddy issue 'SSL Certificates' for web servers that light up the little lock on your web browser indicating that secure technology is in use. These SSL Certificates cost from $50 to $350+ per year depending on the CA you choose. Paying a couple Thousand dollars a year turns the browser's address bar green! VeriSign and Thawte actually do public records searches and have agents who visit certificate applicants to make sure they are who they purport to be -- less expensive certificate authorities, 'self issued certificates' don't get this level of scrutiny. (Note that issues it's own certificate, setting off warnings in your browser when you go to it.)

SSL also works for B2B Web Services, direct from one machine to another, where a browser isn't involved. This helps ensure that sensitive data like health records or credit card or bank account #s can't be seen or harvested by unscrupulous workers in network operation centers, who regularly snarf up unsecured data like email addresses and passwords. With SSL, data will not flow if everything regarding the SSL Certificates isn't lined up perfectly at both ends of the exchange and also at the CA's machine. And, when it flows it's encrypted.

Web Services are more and more likely to be in the form of XML documents as we get farther into the new millenium, but the majority of web services today are 'legacy styled web services' that use other formats. ANSI X12, for example, uses asterisks to separate fields in records and control characters like vbCrLf to separate records in an EDI document. Other exchange standards use a 'variable=value' format that is very easy to code in modern programming languages.

SMTP, Simple Mail Transport Protocol, is used to push out emails for much B2C contact, and occasionally it is involved in B2B where it's OK to use a somewhat unreliable and very insecure internet protocol to get a message to a person, or another computer. Often, an insecure email sent to a customer will contain links to secure websites to do business. A webstore provider like, for example, services relatively safe transactions, like updating the Qty on Hand that displays at the store, via either insecure email or a web service secured with SSL. Some documents are transmitted via email or http using PGP-Pretty Good Privacy for encryption.

Class Demo of C2B, B2B, B2B, & B2C Exchange: Purchased a music CD at a Yahoo Store; Tracked the resulting Sales Document, in an XML-formatted Web Service, to the Merchant's warehouse where the goods will be picked and shipped; Tunnelled thru two firewalls to get to the warehouse system; Took on the sales order into the Merchant's order entry and fulfillment system; Hit the ACH with a Credit Card Authorizationto fulfill the order; Saw the ACH issue a DENY to the bogus CC# used at the store; And, saw the system generate Email to the customer asking for a good CC#...

Here is a 'swim lane diagram' with screen shots from the above exchanges: C2B2B2B2C.

Quiz #3 Sample Questions

Prior Topics:

F I N A L Grades are posted from the Spring. This summer's will be similarly assigned.

Unorganized Stuff Referenced in Class

Validating XHTML + JavaScript Here is a new link to a new page about Making XHTML with JavaScript Validate at's XHTML Validator. The _best_ way is to 'externalize' your JavaScripts and link to them from the document's head section, or within the XHTML.

Validate early & often! Don't wait until you've coded your whole web page to validate it! Get the 'skeleton' for the complete page together first, including the DOCTYPE, and with the html, head, and body properly nested. Make sure the skeleton validates, then add the content a piece at a time and validate as each piece goes in place.

That 'blue warning' about character set: Somehow this got left out of what's posted for the projects. The following 'meta tag' may be placed in the head section of your web page, before or after the title, to avoid getting the warning about 'character set' from the validator at

<meta http-equiv="Content-type" content="text/html;charset=UTF-8" > 

There are other ways of getting the character set defined for the browser, and you're welcome to use any of them. At completion of Projects #1 and #2 there should be zero errors and zero warnings.

Debugging: If you're not seeing what you expect when you click on a link you can 'tail the log' and see what the web server. While working, you can keep another putty window open at the lower left corner of the screen that shows the 'tail of the log'. A student named John Smith could see errors as they are generated by keying this:

tail -f /var/log/httpd/error_log | grep jsmith

Use Ctrl-C to stop tailing the log...