Intro to Web Standards
Upcoming SlideShare
Loading in...5
×
 

Intro to Web Standards

on

  • 829 views

 

Statistics

Views

Total Views
829
Views on SlideShare
829
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Intro to Web Standards Intro to Web Standards Presentation Transcript

  • 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)   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,  Offline   –  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  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 &amp;</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   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  its   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