Your SlideShare is downloading. ×
0
Intro	  to	  Web	  Standards	             Jussi	  Pohjolainen	  TAMK	  University	  of	  Applied	  Sciences	  
Web	  Standards?	  •  Formal	  standards	  or	  technical	  specifica2ons	  that	     describe	  the	  World	  Wide	  Web	 ...
World	  Wide	  Web	  ConsorDum	  •  The	  World	  Wide	  Web	  ConsorDum	  (W3C)	  is	  the	     main	  internaDonal	  sta...
W3C	  RecommendaDon:	  XHTML	  •  XHTML™	  1.0	  The	  Extensible	  HyperText	     Markup	  Language	  (Second	  EdiDon)	 ...
Example	  of	  XHTML	  <?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     ...
XHTML,	  HTML?	  SGML:	  Standard	  Generalized	  Markup	  Language	  Meta	  language	  	                            XML	 ...
(X)HTML	  versions	  •  1996:	  HTML	  2.0	                     •  200X:	  (X)HTML	  5	  •  1997:	  HTML	  3.2	           ...
W3C	  RecommendaDon:	  XML	  •  eXtensible	  Markup	  Language,	  is	  a	  specificaDon	     for	  creaDng	  custom	  marku...
XML-­‐language:	  XHTML	  <?xml version="1.0"?>!<!DOCTYPE html !     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"!     "http:...
XML-­‐language:	  SVG	  <?xml version="1.0"?>!<!DOCTYPE svg !     PUBLIC "-//W3C//DTD SVG 1.1//EN" !     "http://www.w3.or...
XML-­‐language:	  MathML	  <?xml version="1.0"?>!<!DOCTYPE math:math PUBLIC "-//OpenOffice.org//DTD Modified W3C   MathML ...
XML-­‐language:	  You	  can	  create	  your	                     own!	  <plist version=1.0>!<dict>!<key>Student and Staff ...
W3C	  recommendaDon:	  CSS	  •  Cascading	  Style	  Sheets	  is	  used	  to	  describe	     presentaDon	  of	  a	  documen...
XHTML	  with	  CSS	  <?xml version="1.0"?><!DOCTYPE html     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3....
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...
ECMAScript	  •  ECMAScript	  is	  a	  scripDng	  language,	     standardized	  by	  Ecma	  InternaDonal	  •  In	  Browsers...
Client-­‐Server	  Architecture	  
HTTP?	  •  HTTP	  (Hypertext	  transfer	  protocol)	  is	  a	     stateless	  protocol,	  which	  is	  meant	  to	     tra...
Clients	  and	  Servers	  •  Client	     –  Client	  makes	  a	  hXp	  request.	     –  Client	  can	  be	  a	  web	  brow...
Resources	  •  Server	  provides	  resources	  to	  clients	  •  Resources	  can	  be	  accessed	  by	  HTTP	  using	     ...
Request	  and	  Response	  Client	                                        Client	  User-­‐agent:	  Firefox	               ...
Request	  GET	  •  HTTP	  defines	  eight	  methods	  that	  define	  a	  acDon	     which	  will	  be	  made	  to	  a	  res...
More	  on	  Request	  GET	  •  Typically	  HTTP	  client	  is	  a	  browser	  that	     creates	  the	  request	  automaDc...
Request	  and	  Response	  Client	                       example	  request	            Client	  User-­‐agent:	  Firefox	  ...
Response	  •  When	  making	  a	  GET	  request	  to	  a	  certain	  URL,	     client	  gets	  a	  response	  •  Response	...
Example	  of	  Response	                 HTTP/1.1 200 OK!               Date: Fri, 12 Jan 2007 07:51:41 GMT!              ...
Request	  and	  Response	  Client	                        example	  request	          Client	  User-­‐agent:	  Firefox	   ...
Firefox	  and	  HTTP	  headers	  
Client	  vs.	  Server	  •  In	  client-­‐side	  techniques,	  browser	  or	  its	     plugins	  executes	  dynamic	  behav...
Upcoming SlideShare
Loading in...5
×

Intro to Web Standards

589

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
589
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Intro to Web Standards"

  1. 1. Intro  to  Web  Standards   Jussi  Pohjolainen  TAMK  University  of  Applied  Sciences  
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. CSS:  mystyle.css  p { font-family: Arial, serif; color: RGB(255,0,0);}
  16. 16. Result  in  Browser  
  17. 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. 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. 19. Client-­‐Server  Architecture  
  20. 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. 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. 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. 23. Request  and  Response  Client   Client  User-­‐agent:  Firefox   Apache  HTTP  Server   request   response  
  24. 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. 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. 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. 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. 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. 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. 30. Firefox  and  HTTP  headers  
  31. 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    
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×