Introduction to Web Standards

1,366 views
1,272 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,366
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
43
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to Web Standards

  1. 1. Intro to Web Standards Jussi Pohjolainen TAMK University of Applied Sciences
  2. 2. Web Standards? <ul><li>Formal standards or technical specifications that describe the World Wide Web </li></ul><ul><li>Web Standards consist of the following </li></ul><ul><ul><li>Recommendations of the World Wide Web Consortium (W3C) </li></ul></ul><ul><ul><ul><li>(X)HTML, CSS, SVG, DOM ... </li></ul></ul></ul><ul><ul><li>RFC documents published by Internet Engineering Task Force (IETF) </li></ul></ul><ul><ul><ul><li>URI, HTTP, MIME ... </li></ul></ul></ul><ul><ul><li>And also standards by Ecma International (JavaScript), Unicode (Charsets) and IANA (Name and number registries). </li></ul></ul>
  3. 3. World Wide Web Consortium <ul><li>The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web </li></ul><ul><li>Compatibility among industry members </li></ul><ul><li>W3C makes recommendations for the web </li></ul><ul><li>Several recommendations </li></ul><ul><ul><li>XHTML, DOM, CSS, XML... </li></ul></ul><ul><li>URL: http://www.w3.org/ </li></ul>
  4. 4. W3C Recommendation: XHTML <ul><li>XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) </li></ul><ul><ul><li>http://www.w3.org/TR/xhtml1/ </li></ul></ul><ul><li>Markup language for web pages </li></ul><ul><li>Can be used to create structured documents by using structural semantics </li></ul><ul><ul><li>headings, paragraph, lists, links ... </li></ul></ul>
  5. 5. Example of XHTML <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> </li></ul><ul><li><head> </li></ul><ul><li><title>Hello</title> </li></ul><ul><li><meta http-equiv=&quot;content-type&quot; content=&quot;application/xhtml+xml; charset=utf-8&quot; /> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>Hello World!</h1> </li></ul><ul><li><p>Here is a paragraph.</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  6. 6. XHTML, HTML? SGML: Standard Generalized Markup Language Meta language XML Meta language (subset of SGML) HTML (.html) XHTML (.xhtml) MathML (.mml) OOXML (.docx)
  7. 7. (X)HTML versions <ul><li>1996: HTML 2.0 </li></ul><ul><li>1997: HTML 3.2 </li></ul><ul><ul><li>W3C Recommendation </li></ul></ul><ul><li>1997: HTML 4.0 </li></ul><ul><ul><li>CSS </li></ul></ul><ul><li>2000: XHTML 1.0 </li></ul><ul><ul><li>Separation of layout and the document </li></ul></ul><ul><li>200X: (X)HTML 5 </li></ul><ul><ul><li>2D drawing, Offline storage, drag and drop.. </li></ul></ul>
  8. 8. W3C Recommendation: XML <ul><li>e X tensible M arkup L anguage, is a specification for creating custom markup languages </li></ul><ul><li>W3C Recommendation </li></ul><ul><li>Primary purpose is to help computers to share data </li></ul><ul><li>XML is meta-language. This means that you use it for creating languages. </li></ul><ul><li>XML is an extensive concept. </li></ul>
  9. 9. XML-language: XHTML <ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><!DOCTYPE html </li></ul><ul><li>PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;> </li></ul><ul><li><head> </li></ul><ul><li><title>Minimal XHTML 1.0 Document</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p>This is a minimal <a href=&quot;http://www.w3.org/TR/xhtml1/&quot;>XHTML 1.0</a> </li></ul><ul><li>document.</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  10. 10. XML-language: SVG <ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><!DOCTYPE svg </li></ul><ul><li>PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;> </li></ul><ul><li><svg width=&quot;100%&quot; height=&quot;100%&quot; version=&quot;1.1&quot; </li></ul><ul><li>xmlns=&quot;http://www.w3.org/2000/svg&quot;> </li></ul><ul><li><circle cx=&quot;100&quot; cy=&quot;50&quot; r=&quot;40&quot; stroke=&quot;black&quot; </li></ul><ul><li>stroke-width=&quot;2&quot; fill=&quot;red&quot;/> </li></ul><ul><li></svg> </li></ul>
  11. 11. XML-language: MathML <ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><!DOCTYPE math:math PUBLIC &quot;-//OpenOffice.org//DTD Modified W3C MathML 1.01//EN&quot; &quot;math.dtd&quot;> </li></ul><ul><li><math:math xmlns:math=&quot;http://www.w3.org/1998/Math/MathML&quot;> </li></ul><ul><li><math:semantics> </li></ul><ul><li><math:mrow> </li></ul><ul><li><math:mi>x</math:mi> </li></ul><ul><li><math:mo math:stretchy=&quot;false&quot;>=</math:mo> </li></ul><ul><li><math:mfrac> </li></ul><ul><li><math:mrow> </li></ul><ul><li>... </li></ul><ul><li></math:mrow> </li></ul><ul><li><math:annotation math:encoding=&quot;StarMath 5.0&quot;>x = {-b +-sqrt{b^{2}-4{ac}} } over {2 {a}} </math:annotation> </li></ul><ul><li></math:semantics> </li></ul><ul><li></math:math> </li></ul>
  12. 12. XML-language: You can create your own! <ul><li><plist version='1.0'> </li></ul><ul><li><dict> </li></ul><ul><li><key>Student and Staff Restaurant</key> </li></ul><ul><li><array> </li></ul><ul><li><string>Gratinated broccoli</string> </li></ul><ul><li><string>Oven baked sausage</string> </li></ul><ul><li><string>Beef in red wine sauce</string> </li></ul><ul><li><string>Ham and pepperoni baguette</string> </li></ul><ul><li><string>Baguette with beef roast</string> </li></ul><ul><li></array> </li></ul><ul><li><key>Cafeteria</key> </li></ul><ul><li><array> </li></ul><ul><li><string>Tomato soup with chevre &amp;</string> </li></ul><ul><li><string>Ham and pasta salad</string> </li></ul><ul><li></array> </li></ul><ul><li></dict> </li></ul><ul><li></plist> </li></ul>
  13. 13. W3C recommendation: CSS <ul><li>Cascading Style Sheets is used to describe presentation of a document written in some markup language </li></ul><ul><ul><li>Markup language can be (x)html </li></ul></ul><ul><li>Different versions </li></ul><ul><ul><li>CSS 1, CSS 2, CSS 3 </li></ul></ul><ul><li>Different browsers support different things in CSS </li></ul>
  14. 14. XHTML with CSS <ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><!DOCTYPE html </li></ul><ul><li>PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;> </li></ul><ul><li><head> </li></ul><ul><li><title>Minimal XHTML 1.0 Document</title> </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;mystyle.css&quot;> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p>This is a minimal <a href=&quot;http://www.w3.org/TR/xhtml1/&quot;>XHTML 1.0</a> </li></ul><ul><li>document.</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  15. 15. CSS: mystyle.css <ul><li>p { </li></ul><ul><li>font-family: Arial, serif; </li></ul><ul><li>color: RGB(255,0,0); </li></ul><ul><li>} </li></ul>
  16. 16. Result in Browser
  17. 17. JavaScript, LiveScript, JScript, ECMAScript? <ul><li>Scripting: add client-side behaviour to the site </li></ul><ul><li>JavaScript </li></ul><ul><ul><li>Developed by Netscape </li></ul></ul><ul><ul><li>Originally JavaScript, then LiveScript and then back to JavaScript. </li></ul></ul><ul><li>JScript </li></ul><ul><ul><li>Microsoft made their own version of the JavaScript </li></ul></ul><ul><li>Compatibility problems </li></ul><ul><li>=> ECMAScript, effort to standardize different versions of the J(ava)Script </li></ul>
  18. 18. ECMAScript <ul><li>ECMAScript is a scripting language, standardized by Ecma International </li></ul><ul><li>In Browsers, ECMAScript is commonly called JavaScript </li></ul><ul><li>Java/ECMAscript is nowdays heavily used with AJAX – based sites </li></ul><ul><li>Still many problems because of browser incompatibilites </li></ul>
  19. 19. Client-Server Architecture
  20. 20. HTTP? <ul><li>HTTP ( Hypertext transfer protocol ) is a stateless protocol, which is meant to transfer information on intranets and World Wide Web. </li></ul><ul><ul><li>RFC2616: </li></ul></ul><ul><ul><li>http://www.w3.org/Protocols/rfc2616/rfc2616.html </li></ul></ul><ul><li>HTTP is a request / response standard between client and server </li></ul>
  21. 21. Clients and Servers <ul><li>Client </li></ul><ul><ul><li>Client makes a http request . </li></ul></ul><ul><ul><li>Client can be a web browser, spider or other end-user tool </li></ul></ul><ul><ul><li>Client is referred as a user agent </li></ul></ul><ul><li>Server </li></ul><ul><ul><li>Stores information and makes them available to the client </li></ul></ul><ul><ul><li>Gives http response to the client </li></ul></ul>
  22. 22. Resources <ul><li>Server provides resources to clients </li></ul><ul><li>Resources can be accessed by HTTP using URLs ( Uniform Resource Locator ) </li></ul><ul><li>Example </li></ul><ul><ul><li>http://www.tamk.fi/~jack/document.doc </li></ul></ul>
  23. 23. Request and Response Client User-agent: Firefox Client Apache HTTP Server request response
  24. 24. Request GET <ul><li>HTTP defines eight methods that define a action which will be made to a resource </li></ul><ul><li>Most typical method is GET </li></ul><ul><li>By using the GET - method, client gets a representation of the resource. </li></ul><ul><li>Example of getting a file </li></ul><ul><ul><li>URL: http://www.something.com/file.doc </li></ul></ul><ul><ul><li>1) Open connection to the server </li></ul></ul><ul><ul><li>2) Send following through the connection: </li></ul></ul><ul><ul><ul><li>GET /path/to/file.doc HTTP/1.0 </li></ul></ul></ul><ul><ul><li>3) Read the response </li></ul></ul>
  25. 25. More on Request GET <ul><li>Typically HTTP client is a browser that creates the request automatically when user opens a url </li></ul><ul><li>Browser creates the request which contains addition to the GET lot of other information.. </li></ul><ul><li>For example, information about user agent! </li></ul>
  26. 26. Request and Response Client User-agent: Firefox Client Apache HTTP Server example request GET / HTTP/1.1 Host: www.tamk.fi User-Agent: Mozilla/5.0 (Mac..) ... response
  27. 27. Response <ul><li>When making a GET request to a certain URL, client gets a response </li></ul><ul><li>Response consists of </li></ul><ul><ul><li>1) Header information </li></ul></ul><ul><ul><li>2) Resource itself </li></ul></ul><ul><li>Browser makes decisions based on the header information.. </li></ul>
  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 ETag: &quot;479a0-16a9-45a4df76&quot; Accept-Ranges: bytes Content-Length: 5801 Connection: close Content-Type: text/html; charset=iso-8859-1 <html> <head> <title>... Header Resource
  29. 29. Request and Response Client User-agent: Firefox Client Apache HTTP Server example request GET / HTTP/1.1 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 <ul><li>In client-side techniques, browser or it's plugins executes dynamic behaviour </li></ul><ul><ul><li>Flash, JavaScript, Applets... </li></ul></ul><ul><li>In server-side techniques, server is responsible for the dynamic behaviour </li></ul><ul><ul><li>PHP, Java EE.. </li></ul></ul><ul><ul><li>Persistant Storage is implemented by using databases, for example: MySQL </li></ul></ul>

×