INFO202 - Intro to EBusiness Technologies - Spring '09


Quiz #1 Topics, in roughly reverse order:
Intro to Structured & OO Scripting using JavaScript:

  • Use w3schools' Browser Scripting: JavaScript (thru 'Guidelines') & DOM (thru 'Events') for your intro material. 

  • Debugging JavaScript?  FireFox provides an easy way to find errors.  Use its Tools -> Error Console to open an 'error console' so you can _see_ the error messages.   Clear it, then refresh your page and it will show the errors during load.  Click on a link that should call a JavaScript function to see errors generated by that function...

  • Intro to Structured Programming: Sequence; Decisions (Alternative Selections); Loops.  (More to be posted on-line about 'structure' soon...)  The CalcAverage script demonstrates these: If/then, If/then/else, If/then/else if, while loop, function.

  • ebus202.info/lectern/index.html uses two JavaScripts.  One is a single liner that pops up an alert just after the body is processed.  The other is a function, named CalcAverage, located in the <head> of the page that is called on the Click event of a link labelled CALC AVERAGE down the page.   

Project #3, (10 points) Due the morning of the 8th:

  • Add the 'CalcAverage' JavaScript function to your home page. Make a link to it that is prominent, like "Calculate Average Grade". Make it work, and study it a bit so you recognize the 'logical structures' in it on a quiz (loop, if/then, if/then/else, if/then/elseif, function).
  • Find any other 'JavaScript effect' and install it on your home page. Popular choices are: 'mouseovers' to change an image or affect the properties of an object when the mouse is over it; clocks; calculators; 'cursor effects' where moving the cursor over an object, or the body of the document, makes graphics follow the mouse; games; &c.
  • JavaScripts require a couple of extra touches so they will validate. The examples posted at info202.info/lectern will not validate as they are now, neither will many of the examples found on the 'net.

    1) Multi-line JavaScripts must be tagged as 'Character Data' so they will not be parsed by the validator:
       <script ...... >
         //<!CDATA[
            multi lines;
            of script;
            here;
         //]]>   
       </script> 
    
    '//' makes a 'comment' so JavaScript ignores these lines, which contain 'directives' for the site validator. The '@lt;!CDATA[' and ']]' mark the beginning and end of the script so the validator will not attempt to validate the script as XHTML.

    2) To be validated in XHTML, the name of the function & its parentheses must be enclosed in double quotes when it is used in a tag, like this:
      <a href="#" onclick="CalcAverage()">CALC AVERAGE & LETTER GRADE</a>
    

Project #2: (2/26&3/2 morning, 3/2 evening) Project #1 was about 'old HTML' and Project #2 is about XHTML & CSS. Where there's lots & lots of old HTML in the legacy of web stuff, organizations need to be moving toward XHTML & CSS for the future.

For the text, use the w3schools tutorials to XHTML, CSS, and learn how to naviagate thru the references to find this or that fact about the behaviour of CSS.

Intro to XHTML, CSS: Demo at lectern using info202.info/lectern/index.html & externalcss.html. 

Specs for Project #2: Points will be docked for lapses in any of the following:

  • Assignment due date likely 3/10 for morning and 3/17 for the evening:
  • Rewrite your website's pages, or link to new pages that clearly demonstrate novice skills in coding for XHTML 1.0 & CSS 2 standards.
  • All pages should validate using w3schools' XHTML & CSS validators
  • Use Transitional Standards for the path of least resistance to valid XHTML for this project. The demos in class are done to a Transitional DTD. The DOCTYPE declaration is placed at the extreme top of your document, before the <html tag. XHTML involves XML, so the DOCTYPE is followed by instructions about the xmlns= (XML Name Space) within the <html> tag.  Students are encouraged to be more modern & progressive by complying with a later DTD for this project, where one of 'strict' DTDs will present more of a challenge.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      
  • Requirements for Project #1 regarding an image or logo demonstrating transparency, number of paragraphs and sentences, and a centered, contained, fluid design apply to Project #2.
  • Use a <div> and CSS to make a centered container for each page no more than 800 pixels wide. Strive for pages that are easy to read. (Making one CSS that fits the desktop and also fits a 400 or 600 pixel-wide smartphone or netbook is an extra challenge for those heading into App Development.)
  • Link all three of your site's pages to one external style sheet using <link in the <head of each document.
  • Remove all formatting elements, like bgcolor=, from your pages' tags, and remove all <font tags. Instead of using these deprecated techniques, use rules in the external style sheet to impart a consistent and discernable style across your pages. Consider subtle or bold uses of the properties & values and apply them to the body, h1, h2, p, img, li, div or other elements on your pages using only your external style sheet. Use _no_ internal/embedded styles, use only the external stylesheet.
  • Demo an understanding of CSS classes by using using class=, maybe id=, and at least one pseudo class such as a hover effect applied to your links. Keep in mind that the Ideal Markup Tags for content are p, h1-9, em, strong, and li. Content should be organized content to demo appropriate application of these tags to your content.
  • Demo an understanding of the CSS Box Model by using margins, padding, borders, and other elements of style on at least one xhtml element in a noticeable way.
  • All pages should validate using w3schools' XHTML & CSS validators
  • Continue to use a server side editor, or WinSCP's editor for this exercise. Do not use Expressions, Word, DreamWeaver or any other 'html editor' to author your xhtml & css except perhaps a minimal editor such as Bluefish or Crimson. If you have any questions about suitability of the editor you're using ask the instructor.
  • Images: Images are required on all pages. Please do not load large images, or lots of them, into your home, web, or other directories. Do not, for example, upload 30+ pics from your cellphone or digital camera. Observe a limit of .5 MByte (512,000 bytes) per page & 2 MBytes for the whole site. Animated gifs are welcome if they can are tamed in size. All images shown on your pages must be stored in your web directory. Links to content at other sites, tubes, & wavs is appreciated after you've met the requirements of your three-page site at info202.info. There is no 'garbage collector', each student using info202.info is responsible for observing these limits, and notice of too many bytes in your account will come with loss of a points from Project #2, unless its use is approved in advance by the instructor.
  • Thumbnail Image: Plan to make a 'thumbnail image' 80 pixels wide that reflects the style of your site, as a jpg, gif, or png named Thumb1.jpg, Thumb1.gif, or Thumb1.png. Particulars will be posted about this soon...

XML & eXtensions to HTML for Project #2:

  • XML is a very flexible standard markup language used widely for computer-to-computer exchanges of purchasing and other commercial documents as 'web services'. It is also used for transmitting (serializing) databases via internet or other media. Even new MicroSoft Office documents use XML, requiring us to save in a .doc format to send stuff to a rev-locked correspondent.
  • XHTML is the application of XML to HTML, in the works since the late 90s and strongly recommended as the replacement for 'plain HTML' since about 2000. Almost everything about CSS that applies to XHTML also applies to XML. These ML are the next decades' way of marking up and presenting facts, audit trails, and knowledge of all kinds, is being stored as XML or XHTML fragments in DBMS and presented as needed via Artificial Common Sense & XHTML <form elements to employees and customers at a browser interface. Some 'Direct to Digital Press' operators will take XHTML & CSS used to layout 11 X 17 and larger formats, extending the value of these technologies by reducing dependence on proprietary pre-press softwares. We'll cover XML as a separate topic soon...
  • CSS Cascading Style Sheets allow web developers to physically & logically separate 'content' from 'presentation'. This can save website owners lots in wasted effort as more and more of them are revamping sites to handle portable devices, smaller screens on notebooks, & netbooks that are growing in popularity. The ideal is that 'set of content', perhaps kept in a database, can easily be formatted and styled using a external style sheet appropriate for the device, or the season, or some new use of the data. . 
  • The Cascade is:
    1. Default styles built into the browser that apply if no other style is provided, particularly how missing properties are defaulted.
    2. 'External Style Sheets' can define 'the look' for hundreds or thousands of pages that are linked to them and override any browser defaults.
    3. 'Internal Style Sheets' in the <head> tag of a page can apply to elements not in the external sheet, or override styles that are in the external style sheet.
    4. 'Inline Styles' can be applied to nearly any html element, or to a <div> or a <span> designated by the designer. Of these, 3 & 4 should be considered 'deprecated' and all style should be in an external sheet, using id & class to handle exceptions in formatting.
  • Please note for Project #2, students are enjoined not to use Internal (Embedded) style sheets or In-line styles, and not to leave any properties like bgcolor= or font color= into the required p & h tags. The full cascade is pointed out so that its use will be recognized in the legacy of ebusiness XHTML, and sorted out as best to extend the value of the legacy...
  • Intro to XHTML & CSS

  • The CSS Demos at the lectern are available at info202.info/lectern/.  The files used are readable & copyable from /home/lectern/web.
  • Try the links at the right side of the CSS Zen Garden to get an idea of where we're headed with 'separating Style from Content'. Studying some of the downloaded CSS 'templates' from templateyes will give you some insight into how to make the simplest elements, like the <li> tag, take on a whole 'nother style.

Project #1 & Quiz #2 Topics:

(2/3) 'Intro to Plain HTML': Take the 'Learn HTML' link from the Tutorials at the upper left side of w3schools.com, and use the Next button to get thru readings and exercises thru making a 'website on your desktop'. The 3rd link in, 'Getting Started', has a topic 'Creating Your Own Test Web' where you right-click and Save files with html on your Windows Desktop, then use a browser to render them. Working the exercises on-line in the 'Try it Yourself' links, and trying some with the 'Test Web' on your desktop, will cover the basics of 'very plain html' and help get you ready for Project #1.

Plan to use w3schools as your text for the intro to these most basic ebusiness technologies, and then google and otherwise search the web for help on web-building. Try the links at the right side of the CSS Zen Garden to get an idea of where we're headed with 'separating Style from Content'. Studying some of the downloaded CSS 'templates' from templateyes will give you some insight into how to make the simplest elements, like the <li> tag, take on a whole 'nother style.

If you want to get more into 'web design' after gaining novice skills with these introductory exercises in XHTML & CSS, start by browsing at your favorite bookstore for the computer topics like XHTML & CSS, buy one with Web Design that appeals to you and has more depth than the typical web-design website. Set to using their techniques, trying to avoid 'overly complex solutions'. VCU offers excellent 'professional web design' courses, but they are restricted to majors -- occasionally they'll let an INFO Senior in...

Quiz #1: The morning section has been graded, evening section should be graded by Saturday afternoon, points will be posted on-line then...

(2/10) Graphics for The Web: A Powerpoint Presentation about them; A few more points about web graphics; Demo of GIMP & recommendation to use a suitable graphics editor that allows the operations you'll be quizzed about.

(2/10) Project #1: Specs were reviewed in class on 2/12, Project #1 is due the 24th...

Logging on to info202.info and making your home page, index.html.

(2/19) This link is to the demo page used at the lectern in class, about centering content using center in the body and a table as the 'container'. The files are available to see or copy in /home/lectern/web.

(2/26) XHTML & CSS: The project will be to revise your HTML website to validate using the XHTML validator at w3schools, using an XHTML DTD, and impress some Style into it using CSS. The assignment was posted above on 3/2.

Here are the points that were available for Project #1:

Project #1, Deliverable #1: Make a sketch of the web pages you'll be building and show it to me for approval, and for 2 points. Morning section, this is due on Tuesday the 17th. Evening section, the latest date to get points for this will be the 24th...

Project #1's due date: Points will be taken for Project #1 on the morning of the 25th for the morning section, and on the morning of March 4th for the evening section.


Earlier & Later Topics: