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 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/1.1http://

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

AJAX Click to edit = DHTML

AJAX JS makes an HTTP POST = AJAX

AJAX Page never reloads in browser

CSS Style Sheets are rules for how the browser should render HTML Separates style and data

CSS CSS turned off (approach.rpi.edu)

CSS CSS turned off (approach.rpi.edu)

HTML Refresher Standards: – Help: – –

HTML Refresher Specify XML + Doctype

HTML Refresher Root element …

HTML Refresher Two Child Elements Holds meta data about the page Holds page data

HTML Refresher Head …. (on page css)

HTML Refresher Head (on page JS)

HTML Refresher Head

HTML Refresher Body – Some elements that describe text… – Paragraphs of text ….

HTML Refresher Body – Unordered lists item another item

HTML Refresher Body – Ordered lists item another item

HTML Refresher Body – Anchors Link to somewhere else: …. Destination on the page …. – Access via:

HTML Refresher Body – What are tables for? ….

HTML Refresher Body – Tables have: Rows ….. Rows have – Headers ROW ONE HEAD Cell value

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 makes a horizontal rule breaks a line

HTML Refresher Body Some elements that group other elements Div is a block level conceptual grouping element …. elements …. – Span is a inline conceptual grouping element … elements …