Intro to Web Standards

Intro to Web Standards

Jussi Pohjolainen TAMK University of Applied Sciences

Web Standards? •  Formal standards or technical specifica2ons that describe the World Wide Web

•  Web Standards consist of the following –  RecommendaDons of the World Wide Web ConsorDum (W3C) •  (X)HTML, CSS, SVG, DOM ...

–  RFC documents published by Internet Engineering Task Force (IETF) •  URI, HTTP, MIME ...

– And also standards by Ecma InternaDonal (JavaScript), Unicode (Charsets) and IANA (Name and number registries).

World Wide Web ConsorDum

•  The World Wide Web ConsorDum (W3C) is the main internaDonal standards organizaDon for the World Wide Web

•  Compa2bility among industry members •  W3C makes recommenda)ons for the web •  Several recommendaDons – XHTML, DOM, CSS, XML...

•  URL: hXp://www.w3.org/

W3C RecommendaDon: XHTML

•  XHTML™ 1.0 The Extensible HyperText Markup Language (Second EdiDon) – hXp://www.w3.org/TR/xhtml1/

•  Markup language for web pages •  Can be used to create structured documents by using structural semanDcs – 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 RecommendaDon

•  1997: HTML 4.0 –  CSS

•  2000: XHTML 1.0 –  SeparaDon of layout and the document

•  200X: (X)HTML 5 –  2D drawing, Offline storage, drag and drop..

W3C RecommendaDon: XML

•  eXtensible Markup Language, is a specificaDon for creaDng custom markup languages

•  W3C RecommendaDon •  Primary purpose is to help computers to share data

•  XML is meta-‐language. This means that you use it for creaDng 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 recommendaDon: CSS

•  Cascading Style Sheets is used to describe presentaDon of a document wriXen 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?

•  ScripDng: add client-‐side behaviour to the site •  JavaScript – Developed by Netscape – Originally JavaScript, then LiveScript and then back to JavaScript.

•  JScript – Microsok made their own version of the JavaScript

•  CompaDbility problems •  => ECMAScript, effort to standardize different versions of the J(ava)Script

ECMAScript

•  ECMAScript is a scripDng language, standardized by Ecma InternaDonal

•  In Browsers, ECMAScript is commonly called JavaScript

•  Java/ECMAscript is nowdays heavily used with AJAX – based sites

•  SDll many problems because of browser incompaDbilites

Client-‐Server Architecture

HTTP?

•  HTTP (Hypertext transfer protocol) is a stateless protocol, which is meant to transfer informaDon on intranets and World Wide Web. –  RFC2616: –  hXp://www.w3.org/Protocols/rfc2616/rfc2616.html

•  HTTP is a request / response standard between client and server

Clients and Servers

•  Client –  Client makes a hXp request. –  Client can be a web browser, spider or other end-‐user tool

–  Client is referred as a user agent •  Server –  Stores informaDon and makes them available to the client

–  Gives hXp response to the client

Resources

•  Server provides resources to clients •  Resources can be accessed by HTTP using URLs ( Uniform Resource Locator )

•  Example – hXp://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 acDon which will be made to a resource

•  Most typical method is GET •  By using the GET -‐ method, client gets a representaDon of the resource.

•  Example of geqng a file – URL: hXp://www.something.com/file.doc –  1) Open connecDon to the server –  2) Send following through the connecDon:

•  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 automaDcally when user opens a url

•  Browser creates the request which contains addiDon to the GET lot of other informaDon..

•  For example, informa)on about user agent!




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 informaDon – 2) Resource itself

•  Browser makes decisions based on the header informaDon..

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




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

Technology

Intro to Web Standards