ITWS-2210 / CSCI-4963

Logistics

• Format– Class w/ mini projects (graded on class

participation)– Labs (individual projects, graded on completion in

class)– 3 Tests– 3 Homework assignments– 1 final project (group)– Must attend class to use office hrs

Logistics

• Administrative Issues– Adding the class• Sign in today• Attend Wed & Fri

• Academic Honesty Expectations• There is one reading, no textbooks

What is this Class About?

• Web Systems Development– Think: Web-as-Operating System– Standard set of protocols and APIs

What is this Class About?

• Building a (web) technology toolbox• Gain Knowledge of modern web architecture

(ajax, services)• Navigate the messy technological space of the

web

The Messy Web

• Overlapping technologies (many ways of achieving an outcome)

• Technologies implemented in semi standard ways in multiple products

• Legacy issues: HTML as an Example

Navigating an Overlapping Continuum of Technologies

• Failed at building a diagram:– CSS on the left side (100% display data)– MYSQL on the right (100% data model)

Navigating an Overlapping Continuum of Technologies

• JSON - Java Script Object Notation• XML - describes data in a structure• XSLT - transforms xml data structure– Requires server side engine in production

• HTML - structured markup for display of data in a browser

• CSS - defines how browsers should render/display HTML

Navigating an Overlapping Continuum of Technologies

• JavaScript – Client side programming language– (browser) Event driven– Rich data structures– Navigate and manipulate HTML document object

Navigating an Overlapping Continuum of Technologies

• PHP– Server side language– Handles webserver I/O– Generally used to manipulate & output data in

HTML– XML– JSON– Images (binary data)

Navigating an Overlapping Continuum of Technologies

• MYSQL– Database– Stores data in a structure

Inconsistent Implementations

• HTML, CSS are infamous (IE v. everyone else)• No excuses• Work around:– specify a doctype (do the reading)– use standards compliant HTML and CSS

Inconsistent Implementations

• JS– Implemented at the browser level– Workaround:• frameworks like jquery, prototype, Dojo & MooTools

build a new layer that abstracts browser differences

Inconsistent Implementations

• SQL is implemented differently between– Oracle– MYSQL– MSSQL

• Solution:– Database abstraction layer: • hybernate

Legacy issues: HTML

• Where did HTML come from?• What is XHTML’s relation to HTML?

Legacy issues: HTML

• 1989 Berners-Lee/Hendler proposed HTML as a hypertext markup based on SGML (from the 1960s)

• HTML featured loose formatting standards (ease and speed of deployment)– Probably caused its popularity and success.

Legacy issues: HTML

• HTML had problems• XML (Extensible Markup Language), Ca 1998

open standard by W3C• XHTML standard published by W3C ca. 2000• XHTML is XML

Legacy issues: HTML

• What about all those old HTML sites?• QuirksMode– Backwards compatibility mode supported by

most browsers when a doctype is not specified.

• Old HTML and XHTML share – (many) Tags– .html

The Messy Web

• Your challenge:– provide clients, employers with functionality in a

growing, overlapping, non-standard space.

Content to your Browser

A brief overview of how things work on the web

The Easy: Static HTML

1. Your browser generates an HTTP GET request

GET http://www.rpi.edu/dept/IT http/1.1

The Easy: Static HTML

2. Server locates requested file, returns it(URL maps to folder structure on server)

The Easy: Static HTML

3. Server sends back the content of the requested file

The Easy: Static HTML

4. Client inspects HTML, makes additional requests to the server

The Easy: Static HTML

• As content arrives, the client renders the page

The Easy: Static HTML

• Good: fast / scales up easily• Bad: does not support persistence in

interactivity to the user

CGI

• Replace a static HTML file with a program– Web server calls program and passes parameters

from the GET request– Returns HTML– Can access other applications on the server – Can use a database or file system to store client

state info (items in a shopping cart)

CGI

• Good: allows for interactive web applications• Bad: terrible scaling (a new copy of the CGI

script is started for each request)

PHP

• Like CGI…Only….• Script snippets can be embedded within HTML• Server (a module within Apache) parses and

runs script as it delivers it to the client

PHP

• Good: low initial overhead• Bad: Easy to comingle model, view and

controller

PHP/Mysql for Persistence in interactivity

• Old: one page per function, UI rules handled at the server– product.php?id=12345– addtocart?id=12345&color=red

• New: PHP API and a Javascript webapp• (php as a service)

DHTML

• All data is loaded onto a page• JavaScript used to control when/how data is

displayed

AJAX

• JavaScript makes additional HTTP requests based on user actions

• Extra data without extra page loads

AJAXClick to edit = DHTML

AJAX

JS makes anHTTP POST = AJAX

AJAX

Page never reloads in browser

CSS

• Style Sheets are rules for how the browser should render HTML

• Separates style and data

CSSCSS turned off (approach.rpi.edu)

CSSCSS turned off (approach.rpi.edu)

HTML Refresher

• Standards:– http://www.w3.org/TR/xhtml1/

• Help:– http://www.w3schools.com/html/default.asp– http://www.w3schools.com/Xhtml/

HTML Refresher

• Specify XML + Doctype <?xml version="1.0" encoding="UTF-8"?>

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

HTML Refresher

• Root element<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en">

…

</html>

HTML Refresher

• Two Child Elements<head>• Holds meta data about the page

</head>

<body>• Holds page data

</body>

HTML Refresher

• Head<title> …. </title>

<style> (on page css) </style>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

HTML Refresher

• Head<script> (on page JS) </script>

<script src=“blah.js”></script>

HTML Refresher

• Head<link rel="shortcut icon" href="/favicon.ico"

type="image/x-icon" />

<link rel="alternate" type="application/rss+xml" title="RSS" href= "mysite.rss"/>

HTML Refresher

• Body– Some elements that describe text…– Paragraphs of text

<p> …. </p>

HTML Refresher

• Body– Unordered lists

<ul><li> item </li>

<li> another item </li><ul>

HTML Refresher

• Body– Ordered lists

<ol><li> item </li>

<li> another item </li><ol>

HTML Refresher

• Body – Anchors• Link to somewhere else:<a href=“somelink”> …. </a>

• Destination on the page<a name=“chapter2”> …. </a>

– Access via: http://example.com/index.html#chapter2

HTML Refresher

• Body– What are tables for?

<table>….</table>

HTML Refresher

• Body– Tables have:• Rows<tr> ….. </tr>

• Rows have– Headers

<th> ROW ONE HEAD </th>

<td> Cell value </td>

HTML Refresher

• Body– Contains elements that • describe text• Create non-textual elements on the page• Group other page elements

HTML Refresher

• Body– Some elements that define other elements on the

page

<img src=“ image URI ” alt=“ desc of img ”/>

<hr /> makes a horizontal rule

<br /> breaks a line

HTML Refresher

• Body• Some elements that group other elements• Div is a block level conceptual grouping element

<div> …. elements …. </div>

– Span is a inline conceptual grouping element

<span> … elements … </span>