INFO202 - Intro to eBusiness Tech - Spring 2012

Current Stuff as at May 14th:

F I N A L Grades are posted.

Plan to attend on the night of the exam, Thursday May 10th at the regular 7:00 meeting time. An 'exit exam', part of our department's on-going assessment effort, will be given -- will count a max 10 points, a minimum of 5 if taken, plus 1 point for every decile attained past 5. An optional final exam, or a missed quiz, may also be taken during the exam time -- let me know your plans ahead of time, please.

Project #3, 2 JavaScripts, is due April 26th. Project #4 is due May 3rd. Later Projects may be demo'd any time, thru the exam period.

The next topic is JavaScript, with required reading

The 'IT Infrastructure' topic and Quiz #1 are delayed until later in the semester. The topic will be revised and brought back to the top of the page again. Meanwhile, we're past the Quiz #2 Topics, and the 2nd quiz will come from the Quiz #3 Study Questions below.

Need a tutor? Nick Baughan is the tutor for INFO202 and INFO350. His hours are Mon and Wed 3pm - 5pm and Tue and Thur 3pm -6pm when he hangs out in the IS Department's computer lab on the 4th Floor, as far West as you can walk. If there is a change in the schedule a notice usually goes out on the INFO mail list.

Quiz #3 Topics:

Earlier topics have been moved down the page...

Intro to Structured & Object Oriented Programming with JavaScript

(4/5) W3Schools JavaScript Tute's 1st 2 sections are required reading: JavaScript Basics & JavaScript Objects.

(4/5) 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

(4/5)This project is in two parts for 10 points each:

(4/12) Project #4 - Database with MySQL & PHP:

Project #4 is in two parts. Part 1 is to make two queries involving joined tables and SQL's aggregate functioins at the command line. Part 2 is to make these two queries show up on your web pages at info202.info 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'

(4/19) 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:

Screenshot

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 Basic.net 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 w3schools.com 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 isy.vcu.edu 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 stores.yahoo.com, 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


Past Topics:

Quiz #1 Topics:

The 'templates' at info202.info/lectern are available for you to copy and tweak into Projects #1 & 2! If you recollect that I've copied XHTML from a Show Source window, then pasted it into vi or mc using Shift-Insert or right-click: Please don't do it this way! It doesn't work reliably any more!! Instead, please use the cd and cp as described in the link about logging in and working at info202.info, or use WinSCP to copy files into your web directory.

Web Graphics: The specs for graphics require some work using an Image or 'Photo' editor, and max points on quizzes won't be earned without some experience with this class of software. Paint.net might be the best for Windoze, if you don't have something already. GIMP is excellent, too, has a steeper learning curve but includes plugins, scriptfoo, and other pro-quality functions. Both are on the lab machines...

Required Reading:

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

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

Introductory Remarks, Syllabus, &c...

Final Points from the last run of the course, this semester's points will be similarly assigned.

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

(2/2) We're starting the hands-on portion of the class working on a Linux web server. Toward the end of the semester we'll work a bit with Windows, meanwhile here's some help about getting your Hands-on a Linux Server.

(2/2 1st Mention, Project #2 Specs read in class on the 23th and the 1st) The Specs for Projects #1 & 2 : Non-compliant projects will be docked one point for each unapproved diversion from, or ignorance of, The Specs.

The intro examples used in class are located at info202.info/lectern/. They are available to copy from /home/lectern/web. It's best to use the command line, or WinSCP, to copy from /home/lectern/web to your web directory -- 'scraping' HTML and CSS from the browser can cause problems with formatting.

Please note:

(2/16) Entirely 'open lab', hand-holding about vi, xhtml, css, and linux at the command line in general.

(2/23) Focus on XHTML and CSS: techniques for separating style from content, units of measure, taxonomy and anatomy of XHTML & CSS elements, references for webdesign. (This block of content covered 2/23 was put on a page of its own 3/2)

(2/23) Mostly open lab for work with XHTML & CSS, some vi/command line issues.

Web Graphics

(3/1) Demo in class showing techniques and terminology for prepping images for the web: getting them off a camera; making doggone sure where they are; 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.

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!

(3/1) Last half of class was open lab for hold-over XHTML/CSS issues and working with Graphics Editor. Most were using Paint.net, GIMP is welcome, and some went home where they've got PhotoShop -- a _real_ pro tool for Mac and Windoze...

Key points about Web Graphics:

(3/8 -- View with IE, cross browser issues!) 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.


Unorganized Stuff Referenced in Class

Validating XHTML + JavaScript Here is a new link to a new page about Making XHTML with JavaScript Validate at w3schools.com'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 w3schools.com.

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