ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation)...
-
date post
21-Dec-2015 -
Category
Documents
-
view
233 -
download
0
Transcript of ITWS-2210 / CSCI-4963. Logistics Format – Class w/ mini projects (graded on class participation)...
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>