Your SlideShare is downloading. ×
  • Like
Introduction to Web Standards
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Introduction to Web Standards

  • 1,141 views
Published

 

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,141
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
42
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Intro to Web Standards Jussi Pohjolainen TAMK University of Applied Sciences
  • 2. Web Standards?
    • Formal standards or technical specifications that describe the World Wide Web
    • Web Standards consist of the following
      • Recommendations of the World Wide Web Consortium (W3C)
        • (X)HTML, CSS, SVG, DOM ...
      • RFC documents published by Internet Engineering Task Force (IETF)
        • URI, HTTP, MIME ...
      • And also standards by Ecma International (JavaScript), Unicode (Charsets) and IANA (Name and number registries).
  • 3. World Wide Web Consortium
    • The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web
    • Compatibility among industry members
    • W3C makes recommendations for the web
    • Several recommendations
      • XHTML, DOM, CSS, XML...
    • URL: http://www.w3.org/
  • 4. W3C Recommendation: XHTML
    • XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)
      • http://www.w3.org/TR/xhtml1/
    • Markup language for web pages
    • Can be used to create structured documents by using structural semantics
      • headings, paragraph, lists, links ...
  • 5. Example of XHTML
    • <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>
    • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
    • &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>
    • <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>
    • <head>
    • <title>Hello</title>
    • <meta http-equiv=&quot;content-type&quot; content=&quot;application/xhtml+xml; charset=utf-8&quot; />
    • </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) HTML (.html) XHTML (.xhtml) MathML (.mml) OOXML (.docx)
  • 7. (X)HTML versions
    • 1996: HTML 2.0
    • 1997: HTML 3.2
      • W3C Recommendation
    • 1997: HTML 4.0
      • CSS
    • 2000: XHTML 1.0
      • Separation of layout and the document
    • 200X: (X)HTML 5
      • 2D drawing, Offline storage, drag and drop..
  • 8. W3C Recommendation: XML
    • e X tensible M arkup L anguage, is a specification for creating custom markup languages
    • W3C Recommendation
    • Primary purpose is to help computers to share data
    • XML is meta-language. This means that you use it for creating languages.
    • XML is an extensive concept.
  • 9. XML-language: XHTML
    • <?xml version=&quot;1.0&quot;?>
    • <!DOCTYPE html
    • PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
    • &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>
    • <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;>
    • <head>
    • <title>Minimal XHTML 1.0 Document</title>
    • </head>
    • <body>
    • <p>This is a minimal <a href=&quot;http://www.w3.org/TR/xhtml1/&quot;>XHTML 1.0</a>
    • document.</p>
    • </body>
    • </html>
  • 10. XML-language: SVG
    • <?xml version=&quot;1.0&quot;?>
    • <!DOCTYPE svg
    • PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot;
    • &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;>
    • <svg width=&quot;100%&quot; height=&quot;100%&quot; version=&quot;1.1&quot;
    • xmlns=&quot;http://www.w3.org/2000/svg&quot;>
    • <circle cx=&quot;100&quot; cy=&quot;50&quot; r=&quot;40&quot; stroke=&quot;black&quot;
    • stroke-width=&quot;2&quot; fill=&quot;red&quot;/>
    • </svg>
  • 11. XML-language: MathML
    • <?xml version=&quot;1.0&quot;?>
    • <!DOCTYPE math:math PUBLIC &quot;-//OpenOffice.org//DTD Modified W3C MathML 1.01//EN&quot; &quot;math.dtd&quot;>
    • <math:math xmlns:math=&quot;http://www.w3.org/1998/Math/MathML&quot;>
    • <math:semantics>
    • <math:mrow>
    • <math:mi>x</math:mi>
    • <math:mo math:stretchy=&quot;false&quot;>=</math:mo>
    • <math:mfrac>
    • <math:mrow>
    • ...
    • </math:mrow>
    • <math:annotation math:encoding=&quot;StarMath 5.0&quot;>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 recommendation: CSS
    • Cascading Style Sheets is used to describe presentation of a document written 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=&quot;1.0&quot;?>
    • <!DOCTYPE html
    • PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
    • &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>
    • <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;>
    • <head>
    • <title>Minimal XHTML 1.0 Document</title>
    • <link rel=&quot;stylesheet&quot; href=&quot;mystyle.css&quot;>
    • </head>
    • <body>
    • <p>This is a minimal <a href=&quot;http://www.w3.org/TR/xhtml1/&quot;>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?
    • Scripting: add client-side behaviour to the site
    • JavaScript
      • Developed by Netscape
      • Originally JavaScript, then LiveScript and then back to JavaScript.
    • JScript
      • Microsoft made their own version of the JavaScript
    • Compatibility problems
    • => ECMAScript, effort to standardize different versions of the J(ava)Script
  • 18. ECMAScript
    • ECMAScript is a scripting language, standardized by Ecma International
    • In Browsers, ECMAScript is commonly called JavaScript
    • Java/ECMAscript is nowdays heavily used with AJAX – based sites
    • Still many problems because of browser incompatibilites
  • 19. Client-Server Architecture
  • 20. HTTP?
    • HTTP ( Hypertext transfer protocol ) is a stateless protocol, which is meant to transfer information on intranets and World Wide Web.
      • RFC2616:
      • http://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 http request .
      • Client can be a web browser, spider or other end-user tool
      • Client is referred as a user agent
    • Server
      • Stores information and makes them available to the client
      • Gives http response to the client
  • 22. Resources
    • Server provides resources to clients
    • Resources can be accessed by HTTP using URLs ( Uniform Resource Locator )
    • Example
      • http://www.tamk.fi/~jack/document.doc
  • 23. Request and Response Client User-agent: Firefox Client Apache HTTP Server request response
  • 24. Request GET
    • HTTP defines eight methods that define a action which will be made to a resource
    • Most typical method is GET
    • By using the GET - method, client gets a representation of the resource.
    • Example of getting a file
      • URL: http://www.something.com/file.doc
      • 1) Open connection to the server
      • 2) Send following through the connection:
        • 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 automatically when user opens a url
    • Browser creates the request which contains addition to the GET lot of other information..
    • For example, information about user agent!
  • 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. Response
    • When making a GET request to a certain URL, client gets a response
    • Response consists of
      • 1) Header information
      • 2) Resource itself
    • Browser makes decisions based on the header information..
  • 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. 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. Firefox and HTTP headers
  • 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