Introduction to Web Standards
-
Upload
jussi-pohjolainen -
Category
Technology
-
view
1.179 -
download
0
Transcript of Introduction to Web Standards
Intro to Web Standards
Jussi Pohjolainen Tampere University of Applied Sciences
Web Standards? • Formal standards or technical specifica2ons that describe the World Wide Web
• Web Standards consist of the following – RecommendaBons of the World Wide Web ConsorBum (W3C) • (X)HTML, CSS, SVG, DOM ...
– RFC documents published by Internet Engineering Task Force (IETF) • URI, HTTP, MIME ...
– And also standards by Ecma InternaBonal (JavaScript), Unicode (Charsets) and IANA (Name and number registries).
World Wide Web ConsorBum
• The World Wide Web ConsorBum (W3C) is the main internaBonal standards organizaBon for the World Wide Web
• Compa2bility among industry members • W3C makes recommenda)ons for the web • Several recommendaBons – XHTML, DOM, CSS, XML...
• URL: hWp://www.w3.org/
W3C RecommendaBon: XHTML
• XHTML™ 1.0 The Extensible HyperText Markup Language (Second EdiBon) – hWp://www.w3.org/TR/xhtml1/
• Markup language for web pages • Can be used to create structured documents by using structural semanBcs – headings, paragraph, lists, links ...
Example of XHTML <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello</title> <meta http-equiv="content-type" content="application/xhtml
+xml; charset=utf-8" /> </head> <body> <h1>Hello World!</h1> <p>Here is a paragraph.</p> </body> </html>
XHTML, HTML?
SGML: Standard Generalized Markup Language Meta language
XML Meta language (subset of SGML)
HTML (.html)
XHTML (.xhtml)
MathML (.mml)
OOXML (.docx)
(X)HTML versions
• 1996: HTML 2.0 • 1997: HTML 3.2 – W3C RecommendaBon
• 1997: HTML 4.0 – CSS
• 2000: XHTML 1.0 – SeparaBon of layout and the document
• 200X: (X)HTML 5 – 2D drawing, Offline storage, drag and drop..
W3C RecommendaBon: XML
• eXtensible Markup Language, is a specificaBon for creaBng custom markup languages
• W3C RecommendaBon • Primary purpose is to help computers to share data
• XML is meta-‐language. This means that you use it for creaBng languages.
• XML is an extensive concept.
XML-‐language: XHTML <?xml version="1.0"?>!<!DOCTYPE html ! PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"! "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">!<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">! <head>! <title>Minimal XHTML 1.0 Document</title>! </head>! <body>! <p>This is a minimal <a href="http://www.w3.org/TR/
xhtml1/">XHTML 1.0</a> ! document.</p>! </body>!
</html>!
XML-‐language: SVG <?xml version="1.0"?>!<!DOCTYPE svg ! PUBLIC "-//W3C//DTD SVG 1.1//EN" ! "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">!<svg width="100%" height="100%" version="1.1"!xmlns="http://www.w3.org/2000/svg">!!<circle cx="100" cy="50" r="40" stroke="black"!stroke-width="2" fill="red"/>!!</svg>!
XML-‐language: MathML <?xml version="1.0"?>!<!DOCTYPE math:math PUBLIC "-//OpenOffice.org//DTD Modified W3C
MathML 1.01//EN" "math.dtd">!<math:math xmlns:math="http://www.w3.org/1998/Math/MathML">! <math:semantics>! <math:mrow>! <math:mi>x</math:mi>! <math:mo math:stretchy="false">=</math:mo>! <math:mfrac>! <math:mrow>! ...! </math:mrow>! <math:annotation math:encoding="StarMath 5.0">x = {-b +-sqrt{b^
{2}-4{ac}} } over {2 {a}} </math:annotation>! </math:semantics>!</math:math>!
XML-‐language: You can create your own!
<plist version='1.0'>!<dict>!<key>Student and Staff Restaurant</key>!<array>! <string>Gratinated broccoli</string>! <string>Oven baked sausage</string>! <string>Beef in red wine sauce</string>! <string>Ham and pepperoni baguette</string>! <string>Baguette with beef roast</string>!</array>!<key>Cafeteria</key>!<array>! <string>Tomato soup with chevre &</string>! <string>Ham and pasta salad</string>!</array>!</dict>!</plist>!
W3C recommendaBon: CSS
• Cascading Style Sheets is used to describe presentaBon of a document wriWen in some markup language – Markup language can be (x)html
• Different versions – CSS 1, CSS 2, CSS 3
• Different browsers support different things in CSS
XHTML with CSS <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Minimal XHTML 1.0 Document</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> <p>This is a minimal <a href="http://www.w3.org/TR/xhtml1/">XHTML
1.0</a> document.</p> </body> </html>
CSS: mystyle.css
p {
font-family: Arial, serif;
color: RGB(255,0,0);
}
Result in Browser
JavaScript, LiveScript, JScript, ECMAScript?
• ScripBng: add client-‐side behaviour to the site • JavaScript – Developed by Netscape – Originally JavaScript, then LiveScript and then back to JavaScript.
• JScript – Microsoj made their own version of the JavaScript
• CompaBbility problems • => ECMAScript, effort to standardize different versions of the J(ava)Script
ECMAScript
• ECMAScript is a scripBng language, standardized by Ecma InternaBonal
• In Browsers, ECMAScript is commonly called JavaScript
• Java/ECMAscript is nowdays heavily used with AJAX – based sites
• SBll many problems because of browser incompaBbilites
Client-‐Server Architecture
HTTP?
• HTTP (Hypertext transfer protocol) is a stateless protocol, which is meant to transfer informaBon on intranets and World Wide Web. – RFC2616: – hWp://www.w3.org/Protocols/rfc2616/rfc2616.html
• HTTP is a request / response standard between client and server
Clients and Servers
• Client – Client makes a hWp request. – Client can be a web browser, spider or other end-‐user tool
– Client is referred as a user agent • Server – Stores informaBon and makes them available to the client
– Gives hWp response to the client
Resources
• Server provides resources to clients • Resources can be accessed by HTTP using URLs ( Uniform Resource Locator )
• Example – hWp://www.tamk.fi/~jack/document.doc
Request and Response
Client User-‐agent: Firefox
Client Apache HTTP Server
request
response
Request GET • HTTP defines eight methods that define a acBon which will be made to a resource
• Most typical method is GET • By using the GET -‐ method, client gets a representaBon of the resource.
• Example of gepng a file – URL: hWp://www.something.com/file.doc – 1) Open connecBon to the server – 2) Send following through the connecBon:
• GET /path/to/file.doc HTTP/1.0 – 3) Read the response
More on Request GET
• Typically HTTP client is a browser that creates the request automaBcally when user opens a url
• Browser creates the request which contains addiBon to the GET lot of other informaBon..
• For example, informa)on about user agent!
Request and Response
Client User-‐agent: Firefox
Client Apache HTTP Server
example request GET / HTTP/1.1!Host: www.tamk.fi!User-Agent: Mozilla/5.0 (Mac..)!...!!
response
Response
• When making a GET request to a certain URL, client gets a response
• Response consists of – 1) Header informaBon – 2) Resource itself
• Browser makes decisions based on the header informaBon..
Example of Response
HTTP/1.1 200 OK!Date: Fri, 12 Jan 2007 07:51:41 GMT!Server: Apache/1.3.37 (Unix)!Last-Modified: Wed, 10 Jan 2007 12:43:34 GMT!ETag: "479a0-16a9-45a4df76"!Accept-Ranges: bytes!Content-Length: 5801!Connection: close!Content-Type: text/html; charset=iso-8859-1!!<html>!<head>!<title>...!!
Header
Resource
Request and Response
Client User-‐agent: Firefox
Client Apache HTTP Server
example request GET / HTTP/1.1!Host: www.tamk.fi!User-Agent: Mozilla/5.0 (Mac..)!...!
example response HTTP/1.1 200 OKDate: Fri, 12 Jan 2007 07:51:41 GMTServer: Apache/1.3.37 (Unix)...!...!<html><head><title>...!!
Firefox and HTTP headers
Client vs. Server
• In client-‐side techniques, browser or it's plugins executes dynamic behaviour – Flash, JavaScript, Applets...
• In server-‐side techniques, server is responsible for the dynamic behaviour – PHP, Java EE.. – Persistant Storage is implemented by using databases, for example: MySQL