7/16/12 Notes

To Lecture Notes

IT 231 -- 7/16/12

Are You in the Right Class?

You are underqualified for IT 231 if
You are overqualified for IT 231 if
IT 130 is the official prerequisite of IT 231.

Course Documents

Announcements, Table of Contents, Professor Information, Syllabus, Lecture Notes, Documents, Exam Info, Projects, Submit Homework

Course Overview

Topics
Projects
Exams

Review Questions from IT130

What does the acronymn HTML stand for?
Ans: Hypertext markup language.
List all the HTML tags that you know.
Ans: <html> <head> <meta> <title> <style> <script> <link> <body> <h1> <h2> <h3> <p> <span> <br /> <ol> <ul> <li> <table> <tr> <td> <th> <a> <img> <form> <input>
What does XHTML stand for?
Ans: Extensible hypertext markup language. XHTML files are XML complient, where XML means extensible markup language.
How does XHTML differ from HTML?
Ans:
1. Every start tag requires an end tag.
2. Tags must be properly nested.
3. Combination start-end tags are allowed, for example <br />
4. Tag and attribute names are written in lower case
5. Text cannot be placed directly in the body section of the page. It must be placed within <p>, <ol>, <ul>, or <table> tags.
6. Attribute values are delimited with double quotes.
7. Depreciated HTML tags like <b> and <i> are not allowed.
8. CSS properties must always have a value, for example
  <input type="checkbox" checked="checked" />,
  not <input type="checkbox" checked />.
9. A title is always required in the head section.
10. Use HTML named colors or hex color codes.
11. The following header is used at the top of the document:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
What does CSS mean?
Ans: Cascading style sheets.
List all the CSS properties that you know.
Ans: font-family font-size font-weight font-style color background-color text-indent text-decoration text-align vertical-align border margin padding
Explain the difference between these types of CSS styles:
Ans:
1. An inline style is placed directly in an HTML tag, for example
  <p style="text-indent:1cm">
2. A document-level style is placed in style tags in the head section of the document. This style applies to the entire page.
3. An external style is placed in a separate .css file. A page can use this style by referencing it with a link tag.

List the HTML special symbols that you know. Here is an HTML Special Symbol Reference Table.
Ans: Some of the most common special symbols are   < > & "
This is the source code for the Special Symbols Example that we looked at in class, including the word niña in a huge font.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<title>Special Symbols Example</title>
</head>

<body>

<h2>Special Symbols Example</h2>

<table>

<tr> 
    <th>HTML Special Symbol</th>
    <th>Symbol Displayed in Browser</th>
</tr> 

<tr> 
    <td>&amp;nbsp;</td>
    <td>&nbsp;</td>
</tr> 

<tr> 
    <td>&amp;lt;</td>
    <td>&lt;/td>
</tr> 

<tr> 
    <td>&amp;gt;</td>
    <td>&gt;</td>
</tr> 

<tr> 
    <td>&amp;amp;</td>
    <td>&amp;</td>
</tr> 

<tr> 
    <td>&amp;quot;</td>
    <td>&quot;</td>
</tr> 

</table>

<p style="font-size:1800%; font-weight:bold">
ni&ntilde;
</p>

</body>
</html>

What is the difference between server-side processing and client-side processing.
Ans: Client-side processing means that the browser does all of the processing. Some client-side scripting languages are JavaScript or VBScript. AJAX is a client-side technology. Server-side processing means that the processing is done on the server and the results sent to the client, or that information is sent to the server from the client, which is processed, for example, information is looked up in a database. Some server-side languages are Ruby on Rails, C# in ASP.Net, Visual Basic in ASP.Net, PHP.

HTML5 Header

<!DOCTYPE html>

Most current browsers do not fully support HTML5, so some sources do not recommend using this header.

Applying CSS Styles to Web Pages

Look at Examples 1, 2, 3, and 4 on the Examples Page.

More about the html Tag

Here is the officially proper way to write the html tag for an XHTML file:

<html xmlns="http://www.w3.org/1999/xhtml" 
    xml:lang="en" lang="en">

xmlns means XML namespace.
However, all current browsers will render an XHTML file properly even if its html tag looks like this: <html>
To define a new namespace named "math", use
in the html tag. Then you can use a new tag <math:div>, which means math division instead of the normal meaning of div.
The XHTML namespace defined by
is the default namespace for the page.
The xml:lang="en" and lang="en" attributes set the language as english in both the XML and XHTML namespaces, respectively.
XHTML and XML namespaces are only important if XHTML and other XML applications are mixed together in the same application.

What are Ruby and Rails?

Ruby is a general purpose programming language.
Other popular general purpose programming languages are Java, C++, C#, Python, and Perl.
Ruby on Rails (Rails for short) is a server-side web framework for creating websites.
The Rails framework contains tools for automatic code generation.
Other popular server-side web frameworks are PHP, ASP.Net, Java, ColdFusion, Python/Django.
Rails server software: WEBrick, Mongrel, Phusion Passenger, mod_ruby.
We will not post our Rails projects on the internet; we will view them on localhost (URL = http://localhost:3000).
To actually post a Rails projects on the internet, we would move the project to a machine running a server such as Apache (Unix or Linux) or IIS (Windows).

What You Need to Create Rails Projects

A Text Editor Some popular text editors are
We will use JEdit for class demonstrations. You can download it for free from
Ruby on Rails Software The textbook has directions for installing Rails software. See page 16 for Windows, page 14 for Mac. Directions for installing Rails are also posted on the Documents Page.

Command Prompt Windows and DOS Commands

Rails projects are created by entering commands in a Command Prompt Window.

To open a Command Prompt Window:

Start >> All Programs >> Accessories >> Command Prompt

Some useful DOS commands.

The Windows Explorer

When creating Rails projects, you will probably work with both a Command Prompt Window and a Windows Explorer Window open at the same time.

To open the Windows Explorer:

Start >> All Programs >> Accessories >> Windows Explorer

Set Windows Explorer to show file extensions. See the last announcement on the Announcements Page.

Introduction to Rails

Look at Examples 4, 5, and 7 on the Examples Page.
A list of rails folders that are created by the rails command.

More about Ruby on Rails

Use the delimiters <% ... %> or <%= ... %> to enclose Ruby statements within an XHTML file.
When Ruby statements are embedded within an XHTML file they are called ERB (embedded ruby) statements.
Use the Ruby statement image_tag to embed an image on a web page.
Place the image in the public/images folder.
Use the statement stylesheet_link_tag to apply a CSS stylesheet to a web page.
Place the stylesheet in the public/stylesheets folder.
Use the statement link_to to define a hyperlink that jumps to another web page.

Two Rails Principles

DRY means Don't Repeat Yourself
Here are some of the ways that Rails developers can be DRY:
CoC means Convention over Configuration.
Rails has a sensible default for almost every aspect of the project. This means that Rails programmers spend very little time on configuration unless something unusual is needed.
For example, if a rails project is managing Transaction items, the database that contans these items is called "transactions".

Project Proj1

Discuss Project Proj1.
Look at HTML Fonts and Extended HTML Colors for font and color suggestions.

Submitting Projects

To submit a Rails project:
Some sources recommend using the 7-zip for compressing files instead of Windows Compressed Folders.
Submit your zipped project on the D2L website d2l.depaul.edu.