1. ITWS-2210 / CSCI-4963

2. 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

3. Logistics Administrative Issues – Adding the class Sign in today Attend Wed & Fri Academic Honesty Expectations There is one reading, no textbooks

4. What is this Class About? Web Systems Development – Think: Web-as-Operating System – Standard set of protocols and APIs

5. 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

6. 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

7. 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)

8. 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

9. Navigating an Overlapping Continuum of Technologies JavaScript – Client side programming language – (browser) Event driven – Rich data structures – Navigate and manipulate HTML document object

10. 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)

11. Navigating an Overlapping Continuum of Technologies MYSQL – Database – Stores data in a structure

12. 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

13. Inconsistent Implementations JS – Implemented at the browser level – Workaround: frameworks like jquery, prototype, Dojo & MooTools build a new layer that abstracts browser differences

14. Inconsistent Implementations SQL is implemented differently between – Oracle – MYSQL – MSSQL Solution: – Database abstraction layer: hybernate

15. Legacy issues: HTML Where did HTML come from? What is XHTML’s relation to HTML?

16. 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.

17. 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

18. 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

19. The Messy Web Your challenge: – provide clients, employers with functionality in a growing, overlapping, non-standard space.

20. Content to your Browser A brief overview of how things work on the web

21. The Easy: Static HTML 1.Your browser generates an HTTP GET request GET http://www.rpi.edu/dept/IT http/1.1http://www.rpi.edu/dept/IT

22. The Easy: Static HTML 2. Server locates requested file, returns it (URL maps to folder structure on server)

23. The Easy: Static HTML 3. Server sends back the content of the requested file

24. The Easy: Static HTML 4. Client inspects HTML, makes additional requests to the server

25. The Easy: Static HTML As content arrives, the client renders the page

26. The Easy: Static HTML Good: fast / scales up easily Bad: does not support persistence in interactivity to the user

27. 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)

28. CGI Good: allows for interactive web applications Bad: terrible scaling (a new copy of the CGI script is started for each request)

29. 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

30. PHP Good: low initial overhead Bad: Easy to comingle model, view and controller

31. 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)

32. DHTML All data is loaded onto a page JavaScript used to control when/how data is displayed

33. AJAX JavaScript makes additional HTTP requests based on user actions Extra data without extra page loads

34. AJAX Click to edit = DHTML

35. AJAX JS makes an HTTP POST = AJAX

36. AJAX Page never reloads in browser

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

38. CSS CSS turned off (approach.rpi.edu)

39. CSS CSS turned off (approach.rpi.edu)

40. HTML Refresher Standards: – http://www.w3.org/TR/xhtml1/ http://www.w3.org/TR/xhtml1/ Help: – http://www.w3schools.com/html/default.asp http://www.w3schools.com/html/default.asp – http://www.w3schools.com/Xhtml/ http://www.w3schools.com/Xhtml/

41. HTML Refresher Specify XML + Doctype

42. HTML Refresher Root element …

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

44. HTML Refresher Head …. (on page css)

45. HTML Refresher Head (on page JS)

46. HTML Refresher Head

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

48. HTML Refresher Body – Unordered lists item another item

49. HTML Refresher Body – Ordered lists item another item

50. HTML Refresher Body – Anchors Link to somewhere else: …. Destination on the page …. – Access via: http://example.com/index.html#chapter2

51. HTML Refresher Body – What are tables for? ….

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

53. HTML Refresher Body – Contains elements that describe text Create non-textual elements on the page Group other page elements

54. HTML Refresher Body – Some elements that define other elements on the page makes a horizontal rule breaks a line

55. 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 …