INFO202 - Intro to eBusiness Tech - Summer 2011

Final Points have been posted, including the Exit Exam. One student may be working to complete the Visual Studio projects, has until Tuesday the 9th.

What pleasure a small class in the summer offered, was well worth the pro-rated pay! There was plenty of time to get all projects started, and some finished, in the classroom. Everybody was very capable, and it's good that we've snagged several more IS Majors, including a double-major in IS & Accounting...

Quiz #1 Topics:

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

Hands-on a Linux Server

(7/7) For those headed into the IS major, especially App Dev or Network Admin, experience at the command line is an enabler for a career in network & system administration, application development or network security. Please give it a try. If you can't, or don't want to master this 'command line environment' you're not suited for many roles in IS and should consider another major.

Project #1 is to make a single web-page appear when your link at info202.info is clicked, and also validate with the w3schools' XHTML & CSS validation service.

Here is a page about Logging On to info202.info and working on Projects #1 & #2.

(7/7) In-class demo of logging in, changing password, using thge server-side editors, and making a valid web page at info202.info. The samples of XHTML & CSS demo'd at the lectern in class are here. The files are located at /home/lectern/web and the permissions are set so you can copy them to your web directory.

For someone not headed into IS, after you log in and change your password, WinSCP's editor is probably all you'll need for the projects. It doesn't do 'syntax highlighting', so it is less than an ideal XHTML editor, but WinSCP's editor is OK for small, unambitious web projects.

Other options for 'minimal HTML editors' for editing and testing XHTML on a PC or notebook computer are Notepad++, Seamonkey or Bluefish. These are representative of the 'HTML Editors' used by Pros, are free, and their download pages come up at the top of a google search. If you've got some other XHTML editor in mind ask about it. Quiz questions will depend on familiarity with XHTML & CSS so please don't use any tool like Visual Studio's Visual Web Developer, Dreamweaver, Word, or MSPublisher that generates XHTML code!

Demo at the lectern techniques for copying sample XHTML from /home/lectern/web and tweaking it to a web page that will get max points for Project #1.

For the stout-hearted, IS-bound students who will be working with vi and the command line: Please find and use an on-line tutorial to get you up to speed with this *ix component. University of Hawaii has for some years been the top google choice for 'vi tutorial': Mastering the VI editor. It misses some of the feature of vim - vi iMproved - which is in use at info202.info. Here is a more advanced reference. Or, This, or even this Graphical Vim Cheat-Sheet. Or, google a bit and bookmark your own favorites. The instructor will soon tire of spouting vi commands in lab, and will answer any questions with 'show me your favorite on-line vi reference and find it there' when asked about vi's arcane commands. (If you're _really_ geek-inclined, learn to use the j, k, h, l, e, b, and other archaic keystrokes from the old vi instead of the more modern cursor arrows and edit button! Some *ix you will likely encounter in some legacies use the older 'vi' and not 'vim'...)

If you're using vi at info202.info, you really get 'vim'. Learn to use vims's VISUAL command: In vim, copy/paste is easier with a 'v' entered in command mode, instead of counting lines and using yy or dd. When you key a v in command mode, 'VISUAL' shows at the lower-left, like INSERT or REPLACE would for an I or R. VISUAL mode lets you hi-lite text to be copied or pasted ` using the cursor arrows. When the desired text is hi-lited, type c to Cut or y to Yank (yank is like Copy in Windoze) the hi-lited section into your 'clipboard'. Then move the cursor to the destination spot and type p to Paste what was hi-lited. (Leaving Visual mode with a c or y puts vi into INSERT mode, so beware that and Esc might be needed.) One gets _out_ of the VISUAL mode by hitting a c or y to Copy or Yank, or using the Esc key as for the INSERT and REPLACE modes. The 'clipboard' works between files, can be used to copy from one file and paste into another.

Searching for text uses the 'slash' command followed by the text to search for, like

/this

which will highlight all instances of 'this' in the file. Use :noh to turn off the hilights.

Please Note:

Times, technologies, and economics have changed since The Internet came about and so have the basic mechanisms for getting content onto The Internet. After having a IBM 3270 or Sperry/UniVac 'Dumb Terminal' attached to nothing but one mainframe computer on my desk for the years from about 1974 thru 1981, it was really exciting in 1982 to get a (2ND) terminal, a Lear-Seigler, which was attached to a UNIX machine, a Pyramid, that connected via VCU's networks to other departments on-campus, and via The Internet to off-campus networks. We got email, newsgroups, and the dry & text-based stuff that was The Old Internet. In the 90's the New Internet got really interesting.

Here is an essay about Getting to XHTML & CSS from plain, old HTML...

Quiz 2 Topics: XHTML & CSS, Web Graphics

(7/7) The Specs for Projects #1 & 2 : Non-compliant projects will be docked one point for each unapproved diversion from, or ignorance of, The Specs. Any questions, raise your hand in class and ask, otherwise I'll assume you're aware of The Specs.

The intro examples used in class are 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: Keep the specs for Project #2 in mind as you work! In honor of the efforts of students who meet the specs, points will be docked liberally from projects that don't clearly reflect each of the specs.

For Spring 2011, The Specs have been relaxed to encourage investigation of more advanced tech: The 'all graphics must be in your web space' spec does not apply to YouTube or other videos, where a link to the video as hosted at youtube.com is appreciated. (Make sure to make the embedded code validate at w3schools! It can be done...)

The tutorials at w3schools.com and all links below are 'required reading', please don't waste time in lab or flunk quizzes because you have not worked thru these! Take the w3schools' on-line quizzes! Similar will be on Quiz #2.

(7/11) Web Graphics

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!

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.

Key points about Web Graphics:

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

More XHTML & CSS: Separating Style from Content

(7/12-19) The w3schools' tutorials on HTML, XHTML, and CSS at the left side of the page are required reading for this course, take the place of a text. They introduce most of what's important about these ebusiness components and very little of their fine introduction is repeated in the links below, but their content will be quizzed. Learn to use the w3schools' Reference section at the right side of the home page to look up syntax and rules. The instructor will always decline to answer questions about features of XHTML or CSS unless the student is on the correct Docs page.

More details are readily available for free on the web and for a few $$ in the bookstores. If you find better on-line references, websites, or utube tutes that make any of these topics click for you, please let me know what they are.

(7/12) Details about these web technologies are required reading: HTML, XML, XHTML, & CSS. Good answers to Quiz Questions come from here!..

(7/19) Anatomy Lessons:: Here is a good pdf about url anatomy, courtesy of eCoach. Be able to describe or answer questions about the anatomies, or valid formats, of the following ebusiness elements. The answers for XHTML docs, HTML tags, and CSS are at w3schools.com. These are covered in class chalktalk:

(For those with Smart Phones equipped with a browser, your're welcome to work your website for it. Make a a 'fluid' site that looks good with the browser shrunk to 400 thru 600 or 800 pixels.)

Some 'Web Design' References

(7/12 or 14) A course like this is more an introduction to 'mechanics of web pages' than it is 'Web Design'. At VCU, it's only the students who can present a portfolio that meets the legendary entrance requirements for the School of the Arts or Ad School that get access to courses in 'Web Design'. Occasionally, twice in ten years, they've let a Business School student take the class...

But, lots of our School of Business students have good 'design sense', can gain useful insight from books and articles about web design such as these, and are competent for work as 'web designers'. It's always a pleasure to see somebody who's just learned XHTML/CSS put their new-found tech and design skills to work for $$. Current trends are towards simplicity and getting max impact from what XHTML and CSS can do. Please look at the references and strive for a clean, easy to read, and Pro look. Avoid busy backgrounds that make content hard to read. Use references like these as you design your web site for this class:

Markup for 'semantics' vs. markup for presentation

(7/12) 'Separate Style From Content' is a huge issue! Violating these rules limits the portability of the content! Be able to write an essay or answer other questions about web content vs. style. This is a theme often repeated in the links posted about web design...

These are the only html tags/elements that should be used to mark up content. In class they're referred to as 'Semantic Markup':

Don't use font, center, bg-color, or scads of other properties and tags applied to semantic markup elements! Don't use _any_ embedded/internal or in-line styles for these projects. All styles must be in external style sheet. For exceptions, such as the previous Red Type, use a span and refer to a class.

Please note: It is _not_ appropriate to use the h tags down the page in a sequence like <h1, <h2, <h3, <h4, <h5!!! Simple outlines would use one <h1 for the topic of a page and <h2 tags for each sub-topic. A more complex outline would have <h3 tags as 'sub sub topics' under an <h2 subtopic and maybe <h4 tags under the <h3 tags further organize the sub-topics. View this page's source for an example...

Quiz #2: Sample Questions.

Quiz #3 Topics:

(7/13 - 15) Project #3 - JavaScript, Structure, & Object Orientation

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: JavaScript is a 'browser-side', structured, and object oriented scripting language. It is a Programming Language used to script events and provide methods for objects in XHTML's DOM (Document Object Model). (The HTMLs are static Markup Languages, don't provide for loops & alternative selections.) JavaScripts can respond to events generated in the DOM, set any object's properties, and use any object's methods. JavaScripts may be used to validate HTML FORM data before it is submitted to the web server. Using AJAX techniques, JavaScripts can run 'behind the scenes' while a web page is displayed to generate requests to servers and update an object on the page without refreshing the browser. jQuery is a powerful library that makes it easy to script form events like galleries or date-pickers.

Here are some resources about JavaScript:

Project #3, JavaScript

(Assigned 7/14)This project is in two parts for 10 points each:

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

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:

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


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