itws-2210 / csci-4963. logistics format – class w/ mini projects (graded on class participation)...
Post on 21-Dec-2015
238 views
TRANSCRIPT
![Page 1: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/1.jpg)
ITWS-2210 / CSCI-4963
![Page 2: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/2.jpg)
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
![Page 3: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/3.jpg)
Logistics
• Administrative Issues– Adding the class• Sign in today• Attend Wed & Fri
• Academic Honesty Expectations• There is one reading, no textbooks
![Page 4: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/4.jpg)
What is this Class About?
• Web Systems Development– Think: Web-as-Operating System– Standard set of protocols and APIs
![Page 5: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/5.jpg)
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
![Page 6: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/6.jpg)
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
![Page 7: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/7.jpg)
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)
![Page 8: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/8.jpg)
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
![Page 9: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/9.jpg)
Navigating an Overlapping Continuum of Technologies
• JavaScript – Client side programming language– (browser) Event driven– Rich data structures– Navigate and manipulate HTML document object
![Page 10: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/10.jpg)
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)
![Page 11: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/11.jpg)
Navigating an Overlapping Continuum of Technologies
• MYSQL– Database– Stores data in a structure
![Page 12: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/12.jpg)
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
![Page 13: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/13.jpg)
Inconsistent Implementations
• JS– Implemented at the browser level– Workaround:• frameworks like jquery, prototype, Dojo & MooTools
build a new layer that abstracts browser differences
![Page 14: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/14.jpg)
Inconsistent Implementations
• SQL is implemented differently between– Oracle– MYSQL– MSSQL
• Solution:– Database abstraction layer: • hybernate
![Page 15: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/15.jpg)
Legacy issues: HTML
• Where did HTML come from?• What is XHTML’s relation to HTML?
![Page 16: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/16.jpg)
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.
![Page 17: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/17.jpg)
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
![Page 18: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/18.jpg)
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
![Page 19: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/19.jpg)
The Messy Web
• Your challenge:– provide clients, employers with functionality in a
growing, overlapping, non-standard space.
![Page 20: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/20.jpg)
Content to your Browser
A brief overview of how things work on the web
![Page 21: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/21.jpg)
The Easy: Static HTML
1. Your browser generates an HTTP GET request
GET http://www.rpi.edu/dept/IT http/1.1
![Page 22: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/22.jpg)
The Easy: Static HTML
2. Server locates requested file, returns it(URL maps to folder structure on server)
![Page 23: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/23.jpg)
The Easy: Static HTML
3. Server sends back the content of the requested file
![Page 24: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/24.jpg)
The Easy: Static HTML
4. Client inspects HTML, makes additional requests to the server
![Page 25: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/25.jpg)
The Easy: Static HTML
• As content arrives, the client renders the page
![Page 26: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/26.jpg)
The Easy: Static HTML
• Good: fast / scales up easily• Bad: does not support persistence in
interactivity to the user
![Page 27: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/27.jpg)
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)
![Page 28: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/28.jpg)
CGI
• Good: allows for interactive web applications• Bad: terrible scaling (a new copy of the CGI
script is started for each request)
![Page 29: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/29.jpg)
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
![Page 30: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/30.jpg)
PHP
• Good: low initial overhead• Bad: Easy to comingle model, view and
controller
![Page 31: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/31.jpg)
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)
![Page 32: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/32.jpg)
DHTML
• All data is loaded onto a page• JavaScript used to control when/how data is
displayed
![Page 33: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/33.jpg)
AJAX
• JavaScript makes additional HTTP requests based on user actions
• Extra data without extra page loads
![Page 34: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/34.jpg)
AJAXClick to edit = DHTML
![Page 35: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/35.jpg)
AJAX
JS makes anHTTP POST = AJAX
![Page 36: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/36.jpg)
AJAX
Page never reloads in browser
![Page 37: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/37.jpg)
CSS
• Style Sheets are rules for how the browser should render HTML
• Separates style and data
![Page 38: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/38.jpg)
CSSCSS turned off (approach.rpi.edu)
![Page 39: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/39.jpg)
CSSCSS turned off (approach.rpi.edu)
![Page 40: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/40.jpg)
HTML Refresher
• Standards:– http://www.w3.org/TR/xhtml1/
• Help:– http://www.w3schools.com/html/default.asp– http://www.w3schools.com/Xhtml/
![Page 41: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/41.jpg)
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">
![Page 42: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/42.jpg)
HTML Refresher
• Root element<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
…
</html>
![Page 43: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/43.jpg)
HTML Refresher
• Two Child Elements<head>• Holds meta data about the page
</head>
<body>• Holds page data
</body>
![Page 44: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/44.jpg)
HTML Refresher
• Head<title> …. </title>
<style> (on page css) </style>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
![Page 45: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/45.jpg)
HTML Refresher
• Head<script> (on page JS) </script>
<script src=“blah.js”></script>
![Page 46: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/46.jpg)
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"/>
![Page 47: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/47.jpg)
HTML Refresher
• Body– Some elements that describe text…– Paragraphs of text
<p> …. </p>
![Page 48: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/48.jpg)
HTML Refresher
• Body– Unordered lists
<ul><li> item </li>
<li> another item </li><ul>
![Page 49: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/49.jpg)
HTML Refresher
• Body– Ordered lists
<ol><li> item </li>
<li> another item </li><ol>
![Page 50: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/50.jpg)
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
![Page 51: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/51.jpg)
HTML Refresher
• Body– What are tables for?
<table>….</table>
![Page 52: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/52.jpg)
HTML Refresher
• Body– Tables have:• Rows<tr> ….. </tr>
• Rows have– Headers
<th> ROW ONE HEAD </th>
<td> Cell value </td>
![Page 53: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/53.jpg)
HTML Refresher
• Body– Contains elements that • describe text• Create non-textual elements on the page• Group other page elements
![Page 54: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/54.jpg)
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
![Page 55: ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation) – Labs (individual projects, graded on completion in](https://reader035.vdocuments.net/reader035/viewer/2022081506/56649d6a5503460f94a49096/html5/thumbnails/55.jpg)
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>