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

Like this? Share it with your network

Share

Intro to Web Standards

on

  • 860 views

 

Statistics

Views

Total Views
860
Views on SlideShare
860
Embed Views
0

Actions

Likes
0
Downloads
8
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 Presentation Transcript

  • 1. Intro  to  Web  Standards   Jussi  Pohjolainen  TAMK  University  of  Applied  Sciences  
  • 2. 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).    
  • 3. 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/  
  • 4. 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  ...    
  • 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  RecommendaDon   storage,  drag  and  drop..  •  1997:  HTML  4.0   –  CSS  •  2000:  XHTML  1.0     –  SeparaDon  of  layout  and   the  document  
  • 8. 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.  
  • 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>!
  • 10. 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>!
  • 11. 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>!
  • 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 &amp;</string>! <string>Ham and pasta salad</string>!</array>!</dict>!</plist>!
  • 13. 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  
  • 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>
  • 15. CSS:  mystyle.css  p { font-family: Arial, serif; color: RGB(255,0,0);}
  • 16. Result  in  Browser  
  • 17. 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  
  • 18. 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  
  • 19. Client-­‐Server  Architecture  
  • 20. 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  
  • 21. 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  
  • 22. 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  
  • 23. Request  and  Response  Client   Client  User-­‐agent:  Firefox   Apache  HTTP  Server   request   response  
  • 24. 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  
  • 25. 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!  
  • 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  informaDon   –  2)  Resource  itself  •  Browser  makes  decisions  based  on  the  header   informaDon..  
  • 28. 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>...! !
  • 29. 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>...! !
  • 30. Firefox  and  HTTP  headers  
  • 31. 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