Archive for the ‘Web client development’ Category

The School’s refreshed web programming courses in CPD, CPA, and BSD

June 19, 2012 1 comment

In 2011, a group of faculty members met to begin a review and a refresh of the web programming courses in the CPD, CPA, and BSD programs. That work continues this summer, and will continue over the next several months.


In CPD and CPA, the three-course sequence begins with INT222, and then continues with INT322 and INT422. In BSD, the three-course sequence begins with BTI220, and then continues with BTI320 and BTI420. (While the topics covered in the diploma and degree programs are similar, the BSD degree program includes more conceptual material, and the work’s complexity and breadth requirements are at a higher degree-level standard.)


As a result of the review, the topic coverage in INT222 and BTI220 will be based on HTML5. The instructional focus, and work expectations, will evolve so that students learn about the critically-important web client programming topics. Perhaps the most important topic is the Document Object Model, known as the DOM, which describes a structured, object-oriented, and interactive document on the web. The HTML markup language provides the syntax for a document’s structure, as well as its content. Then, CSS enables a programmer to configure the appearance of the document. Finally, JavaScript enables interactivity, and importantly, modification of the document’s structure, content, and appearance, based on user interaction, and/or state and context changes in the environment.


While the week-to-week topic list will be similar to past versions of INT222 and BTI220, the instructional focus and work expectations will evolve, as noted earlier. As a result, we require that the student pass their first-semester programming course (IPC144 in CPD and CPA, and BTP100 in BSD), before enrolling in their first web programming course.


In the CPD and CPA programs, this prerequisite change means that IPC144 is now a prerequisite for OOP244, IBC233, and INT222. In a scenario where a first-semester student passes all courses except IPC144, the student will be able to enroll in a maximum of three (3) courses in their second semester: IPC144, DBS201, and an English and Liberal Studies option.


In the BSD program, this prerequisite change means that BTP100 is now a prerequisite for BTP200 and BTI220.


In the future, the topic coverage in INT322 (BTI320) and INT422 (BTI420) will also evolve, and we’ll have more to say about those courses in the future.


If you have feedback or suggestions that would help this curriculum refresh effort, and you haven’t already made your views known, please add a comment to this post, or speak with (or write to) your web programming professor, or your program coordinator.





One-page web programming course

April 12, 2012 Leave a comment

Back story

I teach web programming courses. In our school (in early 2012), we are refreshing the introductory web programming courses to cover modern yet mainstream topics.

During our discussions, I was challenged to make my views clear and understandable to all, whether they were new to web programming, or whether they had past knowledge and experience. I thought about the challenge for awhile, and decided to publish this “one-page web programming course”. That was my goal – an introduction to web programming, for someone who is new to this topic, on one page. It fits on one web page (ha ha), and it fits on one printed page (with a small font size ☺ ).

Comments and feedback invited. The first time you read it, don’t stop to click the links. Just read it through. Then, you can go back and click the links to learn more, if you like.


One-page web programming course

You have decided to learn web programming. Well, you need to learn something about four things:

  1. Web page definition, structure, and content
  2. Web page appearance
  3. Web page programming
  4. Web page publishing

What is a web page? It is a document.

How do you view a web page? With a program called a web browser.

What does a web page contain? Content, and markup text. HTML is the markup language that’s used on web pages. The HTML markup will often also include CSS and JavaScript, which are explained later.

How is a web page organized? Does it have a structure? Yes. A web page (document) must conform to the document object model (DOM) standard. You should know three things about the DOM:

  1. It describes a document’s parts or components (e.g. head, title, body, etc.).
  2. A document is exposed as an object, which means that its structure and content can be manipulated (i.e. viewed, queried, changed, etc.).
  3. The DOM broadcasts events (e.g click, mouse over, etc.), which enables a listener to perform an action.

What is HTML? As noted above, it is a declarative markup language that describes the structure and contents of a document. There are about 100 elements that can be used. All documents include a head element, and a body element. Within each of these, we add other elements (e.g. a title in the head, and structural divisions and content paragraphs in the body), and content.

The syntax used to describe document elements conforms to this format:

<element attribute1=”value1″>Optional content</element>

Notice the start “tag”, which begins with “<ele…”. Also notice the end “tag”, which places a slash character before the element name, e.g. “</ele…”.

How do we identify and locate document elements? There’s an easy way to identify and address document elements by their element name. There’s also an easy way to identify and address a selection of document elements, by using a programmer-specified “class name”, and marking the appropriate document elements to use the class name. Finally, there’s also an easy way to identify and address a specific document element, by marking the element with a programmer-specified unique identifier.

How can we change the document’s appearance? We use CSS rules. The way in which a programmer and designer can affect the document’s appearance is almost unlimited. To use CSS effectively, you must know about the document’s structure, the DOM.

What is CSS? It is a declarative language that is used to describe the appearance of an HTML document. The language statements are called rules. There are rules that affect layout and positioning, fonts, and visuals such as colours and images.

CSS rules can be placed in a separate source code file, and then linked to a document. Alternatively, CSS rules can be placed in the head of a document, or in a document element’s start tag.

The syntax used to describe CSS rules conforms to this format (when located in a separate source code file, or in the head of a document):

ruleName { rule1: value1; rule2: value2 }

The “ruleName” is known as a selector. It can be a document element name, a programmer-specified class name, or a programmer-specified unique identifier name.

How can we make a document interactive and functional? We use JavaScript.

What is JavaScript? It is a programming language that can access and manipulate a document. JavaScript is the programming language for web pages.

A document can display static content. However, a document can also be interactive and functional by using JavaScript. For example, the document’s structure, content, and appearance can be modified, based upon user interaction, or some other event or stimulus. JavaScript can also access the web, and fetch data from a web server. The new data can then be used to modify the document’s content and experience, if desired.

JavaScript source code can be placed in a separate source code file, and then linked to a document. Alternatively, it can be placed in the document (head or body), or in the document’s elements or content.

How can we make our document available to the public? We publish it to a web app.

What is a web app? It is a program, which runs on a web server, and responds to requests from browsers. The requests and responses conform to the HTTP protocol.

A web app can serve static resources (including web pages and images), which means that the web app simply retrieves the resource from the web server’s file system, and returns it to the browser.

However, a web app can also dispatch a request to an executable resource (i.e. a program), which will process the request, dynamically generate an appropriate response, and return it to the browser.