Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Introduction to Web Standards
1. Intro
to
Web
Standards
Jussi
Pohjolainen
Tampere
University
of
Applied
Sciences
2. 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).
3. 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/
4. 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
...
5. 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>
6. XHTML,
HTML?
SGML:
Standard
Generalized
Markup
Language
Meta
language
XML
Meta
language
(subset
of
SGML)
OOXML
MathML
XHTML
HTML
(.docx)
(.mml)
(.xhtml)
(.html)
7. (X)HTML
versions
• 1996:
HTML
2.0
• 200X:
(X)HTML
5
• 1997:
HTML
3.2
– 2D
drawing,
Offline
– W3C
RecommendaBon
storage,
drag
and
drop..
• 1997:
HTML
4.0
– CSS
• 2000:
XHTML
1.0
– SeparaBon
of
layout
and
the
document
8. 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.
9. 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>!
12. 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>!
13. 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
14. 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>
17. 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
18. 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
20. 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
21. 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
22. 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
23. Request
and
Response
Client
Client
User-‐agent:
Firefox
Apache
HTTP
Server
request
response
24. 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
25. 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!
26. 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
27. 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..
31. 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