Intro to Web Standards

Intro
to
Web
Standards

Jussi
Pohjolainen

TAMK
University
of
Applied
Sciences

Web
Standards?

•  Formal
standards
or
technical
speciﬁca2ons
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)

OOXML
MathML
XHTML
HTML

(.docx)
(.mml)
(.xhtml)
(.html)

(X)HTML
versions

•  1996:
HTML
2.0
•  200X:
(X)HTML
5

•  1997:
HTML
3.2
–  2D
drawing,
Oﬄine

–  W3C
RecommendaDon
storage,
drag
and
drop..

•  1997:
HTML
4.0

–  CSS

•  2000:
XHTML
1.0

–  SeparaDon
of
layout
and

the
document

W3C
RecommendaDon:
XML

•  eXtensible
Markup
Language,
is
a
speciﬁcaDon

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

<!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

<!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);
}

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,
eﬀort
to
standardize
diﬀerent

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.ﬁ/~jack/document.doc

Request
and
Response

Client
Client

User-‐agent:
Firefox
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!

Request
and
Response

Client
example
request
Client

User-‐agent:
Firefox
GET / HTTP/1.1! Apache
HTTP
Server

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!
Header
ETag: "479a0-16a9-45a4df76"!
Accept-Ranges: bytes!
Content-Length: 5801!
Connection: close!
Content-Type: text/html; charset=iso-8859-1!
!
<html>!
Resource
<head>!
<title>...!
!

Request
and
Response

Client
example
request
Client

User-‐agent:
Firefox
GET / HTTP/1.1! Apache
HTTP
Server

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

Intro to Web Standards

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (12)

En vedette

En vedette (7)

Similaire à Intro to Web Standards

Similaire à Intro to Web Standards (20)

Plus de Jussi Pohjolainen

Plus de Jussi Pohjolainen (20)

Dernier

Dernier (20)

Intro to Web Standards