Web Standar
            by Zibin Cheah




                    University Tour 2009

Tuesday, December 8, 2009
Tuesday, December 8, 2009
Tuesday, December 8, 2009
Tuesday, December 8, 2009
Tuesday, December 8, 2009
Tuesday, December 8, 2009
Tuesday, December 8, 2009
Permulaan Web



Tuesday, December 8, 2009
Tuesday, December 8, 2009
Tim Berner Lee
              In1989, this guy named his baby WWW
Tuesday, December 8, 2009
OpenWeb stack
                                                 [OGG/ VMS/Dirac]?                        Widgets
                                                 Audio & Video
                                SMIL
                  Media




                                Sycronise-

                                                 SVG               PNG/JPG/GIF                   <canvas>
                                ation

                                                 Vector Graphics   Raster Graphics               Drawing API
                 Behaviour




                                 DOM                               ECMA/JavaScript
                                  Document API                     Scripting
                 Presentation




                                 CSS
                                  Style sheets
                 Structure




                                 XML                XHTML/HTML                       RDFa          ARIA
                                                    Markup                           Semantics     Accessibility



Tuesday, December 8, 2009
OpenWeb stack
                                                 [OGG/ VMS/Dirac]?                        Widgets
                                                 Audio & Video
                                SMIL
                  Media




                                Sycronise-

                                                 SVG               PNG/JPG/GIF                   <canvas>
                                ation

                                                 Vector Graphics   Raster Graphics               Drawing API
                 Behaviour




                                 DOM                               ECMA/JavaScript
                                  Document API                     Scripting
                 Presentation




                                 CSS
                                  Style sheets
                 Structure




                                 XML                HTML 5/XHTML                     RDFa          ARIA
                                                    Markup                           Semantics     Accessibility



Tuesday, December 8, 2009
OpenWeb stack
                                                 [OGG/ VMS/Dirac]?                        Widgets
                                                 Audio & Video
                                SMIL
                  Media




                                Sycronise-

                                                 SVG               PNG/JPG/GIF                   <canvas>
                                ation

                                                 Vector Graphics   Raster Graphics               Drawing API
                 Behaviour




                                 DOM                               ECMA/JavaScript
                                  Document API                     Scripting
                 Presentation




                                 CSS
                                  Style sheets
                 Structure




                                 XML                HTML 5/XHTML                     RDFa          ARIA
                                                    Markup                           Semantics     Accessibility


                                        + Opera Unite & Opera Turbo
Tuesday, December 8, 2009
Browser


              Platform



               Device



Tuesday, December 8, 2009
Exciting Graphics !




                                           Boring Graphics......
                               SV
                                 G




Tuesday, December 8, 2009
Tuesday, December 8, 2009
Tuesday, December 8, 2009
Example Time!




Tuesday, December 8, 2009
Industry leading SVG support
                                                 SVG 1.1 support (%)


                 Opera 10                                                          93.89




                    Safari 4                                           81.93




                Firefox 3.5                                60.40




                            IE 8


                                   0        25           50            75                       100

                                                                               Source: http://www.codedread.com/svg-support.php

Tuesday, December 8, 2009
Exciting applications !



                            W
                              idg              Boring
                                 ets        Application......




Tuesday, December 8, 2009
Tuesday, December 8, 2009
W3C Standards
                            Browser Independent
                            Runs on phone, TV, desktop




Tuesday, December 8, 2009
More Example !




Tuesday, December 8, 2009
Opera Turbo
      X-Forwarded-For HTTP Header




Tuesday, December 8, 2009
Tuesday, December 8, 2009
Let’s watch a movie !




Tuesday, December 8, 2009
Local Storage
       Opera Unite




   unite.opera.com
Tuesday, December 8, 2009
Tuesday, December 8, 2009
Tuesday, December 8, 2009
Tuesday, December 8, 2009
Tuesday, December 8, 2009
Tab browsing, speed dial, touch / keypad, save password




Tuesday, December 8, 2009
tusen takk, terima kasih!

                            More Info
                            dev.opera.com
                            my.opera.com/odin
                            zibin@opera.com
                            twitter: zibin
                            zibin.tehais.com


Tuesday, December 8, 2009
Creative Commons license image

               Phone booth http://www.flickr.com/photos/rickharris/261846074/
               Speedometer: http://www.flickr.com/photos/adc/391594014/
               Danish sockets: http://www.flickr.com/photos/xoxoryan/3767746478/
               People Globe http://www.flickr.com/photos/linhngan/2645589939/
               Norwegian mountains
               Baby face http://www.flickr.com/photos/hypertypos/
               Baby face 2 http://www.flickr.com/photos/dq090702/
               World map http://www.flickr.com/photos/kahtava/

               Other Slides/images

               HTML5 scientist by Bruce Lawson
               Closed and Open platform by David Storey
               ACID3 test snapshot by David Storey
               Opera Unite globe by Oleg Melnychuk

               Slides design and contents by Zibin Cheah




Tuesday, December 8, 2009
Opera 10            Safari 4




                            Firefox 3.5   Internet Explorer 8
Tuesday, December 8, 2009

Standards Talk - Opera Uni Tour Indonesia

  • 1.
    Web Standar by Zibin Cheah University Tour 2009 Tuesday, December 8, 2009
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
    Tim Berner Lee In1989, this guy named his baby WWW Tuesday, December 8, 2009
  • 11.
    OpenWeb stack [OGG/ VMS/Dirac]? Widgets Audio & Video SMIL Media Sycronise- SVG PNG/JPG/GIF <canvas> ation Vector Graphics Raster Graphics Drawing API Behaviour DOM ECMA/JavaScript Document API Scripting Presentation CSS Style sheets Structure XML XHTML/HTML RDFa ARIA Markup Semantics Accessibility Tuesday, December 8, 2009
  • 12.
    OpenWeb stack [OGG/ VMS/Dirac]? Widgets Audio & Video SMIL Media Sycronise- SVG PNG/JPG/GIF <canvas> ation Vector Graphics Raster Graphics Drawing API Behaviour DOM ECMA/JavaScript Document API Scripting Presentation CSS Style sheets Structure XML HTML 5/XHTML RDFa ARIA Markup Semantics Accessibility Tuesday, December 8, 2009
  • 13.
    OpenWeb stack [OGG/ VMS/Dirac]? Widgets Audio & Video SMIL Media Sycronise- SVG PNG/JPG/GIF <canvas> ation Vector Graphics Raster Graphics Drawing API Behaviour DOM ECMA/JavaScript Document API Scripting Presentation CSS Style sheets Structure XML HTML 5/XHTML RDFa ARIA Markup Semantics Accessibility + Opera Unite & Opera Turbo Tuesday, December 8, 2009
  • 14.
    Browser Platform Device Tuesday, December 8, 2009
  • 15.
    Exciting Graphics ! Boring Graphics...... SV G Tuesday, December 8, 2009
  • 16.
  • 17.
  • 18.
  • 19.
    Industry leading SVGsupport SVG 1.1 support (%) Opera 10 93.89 Safari 4 81.93 Firefox 3.5 60.40 IE 8 0 25 50 75 100 Source: http://www.codedread.com/svg-support.php Tuesday, December 8, 2009
  • 20.
    Exciting applications ! W idg Boring ets Application...... Tuesday, December 8, 2009
  • 21.
  • 22.
    W3C Standards Browser Independent Runs on phone, TV, desktop Tuesday, December 8, 2009
  • 23.
    More Example ! Tuesday,December 8, 2009
  • 24.
    Opera Turbo X-Forwarded-For HTTP Header Tuesday, December 8, 2009
  • 25.
  • 26.
    Let’s watch amovie ! Tuesday, December 8, 2009
  • 27.
    Local Storage Opera Unite unite.opera.com Tuesday, December 8, 2009
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
    Tab browsing, speeddial, touch / keypad, save password Tuesday, December 8, 2009
  • 33.
    tusen takk, terimakasih! More Info dev.opera.com my.opera.com/odin zibin@opera.com twitter: zibin zibin.tehais.com Tuesday, December 8, 2009
  • 34.
    Creative Commons licenseimage Phone booth http://www.flickr.com/photos/rickharris/261846074/ Speedometer: http://www.flickr.com/photos/adc/391594014/ Danish sockets: http://www.flickr.com/photos/xoxoryan/3767746478/ People Globe http://www.flickr.com/photos/linhngan/2645589939/ Norwegian mountains Baby face http://www.flickr.com/photos/hypertypos/ Baby face 2 http://www.flickr.com/photos/dq090702/ World map http://www.flickr.com/photos/kahtava/ Other Slides/images HTML5 scientist by Bruce Lawson Closed and Open platform by David Storey ACID3 test snapshot by David Storey Opera Unite globe by Oleg Melnychuk Slides design and contents by Zibin Cheah Tuesday, December 8, 2009
  • 35.
    Opera 10 Safari 4 Firefox 3.5 Internet Explorer 8 Tuesday, December 8, 2009

Editor's Notes

  • #8 Opera 2 sessions &amp;#x628A;&amp;#x591A;&amp;#x6807;&amp;#x7B7E;&amp;#x540C;&amp;#x65F6;&amp;#x50A8;&amp;#x5B58;&amp;#x8D77;&amp;#x6765;&amp;#xFF0C;&amp;#x4E0B;&amp;#x6B21;&amp;#x6253;&amp;#x5F00; - firefox copied &amp;#x7F29;&amp;#x653E; zoom - full page scalling Opera 4 (2000) &amp;#x5220;&amp;#x9664;&amp;#x79C1;&amp;#x4EBA;&amp;#x8D44;&amp;#x6599;&amp;#xFF0F;&amp;#x6D4F;&amp;#x89C8;&amp;#x5386;&amp;#x53F2;(history, cookies) copied by firefox, IE Opera 5(2001) integrated web search, tabs
  • #9 email client &amp;#x90AE;&amp;#x7BB1;&amp;#x5BA2;&amp;#x6237;&amp;#x7AEF; speedi dial &amp;#x5FEB;&amp;#x901F;&amp;#x64AD;&amp;#x53F7; mouse gesture &amp;#x9F20;&amp;#x6807;&amp;#x624B;&amp;#x52BF;
  • #10 &amp;#x6211;&amp;#x60F3;&amp;#x5E26;&amp;#x5927;&amp;#x5BB6;&amp;#x56DE;&amp;#x5230;&amp;#x5F53;&amp;#x521D;&amp;#xFF0C;&amp;#x6700;&amp;#x521D;&amp;#x7684;web&amp;#x53D1;&amp;#x5C55;&amp;#x3002; &amp;#x5F88;&amp;#x591A;&amp;#x4EBA;&amp;#x90FD;&amp;#x8BF4;tim bernes lee &amp;#x53D1;&amp;#x660E;&amp;#x4E86;&amp;#x4E92;&amp;#x8054;&amp;#x7F51;&amp;#xFF08;specify the protocol and hyperlink&amp;#xFF09; how do u say &amp;#x2018;protocol&amp;#x2019; in chinese? &amp;#x90A3;&amp;#x4E3A;&amp;#x4EC0;&amp;#x4E48;&amp;#x6211;&amp;#x8981;&amp;#x8C08;&amp;#x6D4F;&amp;#x89C8;&amp;#x5668;&amp;#x5927;&amp;#x6218;&amp;#x5462;&amp;#xFF1F;&amp;#x56E0;&amp;#x4E3A;&amp;#x9664;&amp;#x4E86;IE&amp;#x628A;&amp;#x7F51;&amp;#x666F;&amp;#x5E72;&amp;#x6389;&amp;#x4EE5;&amp;#x5916;&amp;#xFF0C;
  • #13 &amp;#x638C;&amp;#x63E1;&amp;#x8FD9;&amp;#x4E9B;&amp;#x6280;&amp;#x672F;&amp;#xFF0C;&amp;#x7406;&amp;#x89E3;&amp;#x8FD9;&amp;#x4E9B;&amp;#x6280;&amp;#x672F;&amp;#x4EE5;&amp;#x4E3A;&amp;#x7740;&amp;#x4E0B;&amp;#x4E00;&amp;#x4EE3;&amp;#x524D;&amp;#x7AEF;web&amp;#x7684;&amp;#x8FDB;&amp;#x5C55; &amp;#x628A;&amp;#x6280;&amp;#x672F;&amp;#x8FDB;&amp;#x5165;&amp;#x6807;&amp;#x51C6;&amp;#x5316;&amp;#x8FC7;&amp;#x7A0B;
  • #14 &amp;#x638C;&amp;#x63E1;&amp;#x8FD9;&amp;#x4E9B;&amp;#x6280;&amp;#x672F;&amp;#xFF0C;&amp;#x7406;&amp;#x89E3;&amp;#x8FD9;&amp;#x4E9B;&amp;#x6280;&amp;#x672F;&amp;#x4EE5;&amp;#x4E3A;&amp;#x7740;&amp;#x4E0B;&amp;#x4E00;&amp;#x4EE3;&amp;#x524D;&amp;#x7AEF;web&amp;#x7684;&amp;#x8FDB;&amp;#x5C55; &amp;#x628A;&amp;#x6280;&amp;#x672F;&amp;#x8FDB;&amp;#x5165;&amp;#x6807;&amp;#x51C6;&amp;#x5316;&amp;#x8FC7;&amp;#x7A0B;
  • #15 &amp;#x638C;&amp;#x63E1;&amp;#x8FD9;&amp;#x4E9B;&amp;#x6280;&amp;#x672F;&amp;#xFF0C;&amp;#x7406;&amp;#x89E3;&amp;#x8FD9;&amp;#x4E9B;&amp;#x6280;&amp;#x672F;&amp;#x4EE5;&amp;#x4E3A;&amp;#x7740;&amp;#x4E0B;&amp;#x4E00;&amp;#x4EE3;&amp;#x524D;&amp;#x7AEF;web&amp;#x7684;&amp;#x8FDB;&amp;#x5C55; &amp;#x628A;&amp;#x6280;&amp;#x672F;&amp;#x8FDB;&amp;#x5165;&amp;#x6807;&amp;#x51C6;&amp;#x5316;&amp;#x8FC7;&amp;#x7A0B;
  • #17 web2.0&amp;#x5BF9;&amp;#x4E0D;&amp;#x540C;&amp;#x4EBA;&amp;#x6765;&amp;#x8BF4;&amp;#x6709;&amp;#x7740;&amp;#x4E0D;&amp;#x540C;&amp;#x7684;&amp;#x610F;&amp;#x4E49; - &amp;#x5BF9;&amp;#x4E00;&amp;#x4E9B;&amp;#x4EBA;&amp;#x6765;&amp;#x8BF4;&amp;#xFF0C;&amp;#x4ED6;&amp;#x662F;&amp;#x53D1;&amp;#x8D22;&amp;#x7684;&amp;#x7BA1;&amp;#x9053; &amp;#xFF0D;&amp;#x5BF9;&amp;#x4E00;&amp;#x4E9B;&amp;#x4EBA;&amp;#x6765;&amp;#x8BF4;&amp;#x5B83;&amp;#x6709;&amp;#x5F88;&amp;#x591A;&amp;#x65B0;&amp;#x7684;idea &amp;#x5728;&amp;#x8FD9;&amp;#x4E4B;&amp;#x524D;&amp;#x5E76;&amp;#x6CA1;&amp;#x6709;web1.0&amp;#x7684;&amp;#x6982;&amp;#x5FF5;
  • #19 good for phones good for search engines good for compression svgz All major modern web browsers except Microsoft Internet Explorer support and render SVG markup directly.[3] To view SVG files in Internet Explorer, either users have to download and install a browser plugin, or the webmaster can include SVG Web, a JavaScript library currently under development at Google Code.[4] SVG is also well-suited to small and mobile devices. The SVG Basic and SVG Tiny specifications were developed with just such uses in mind and many current mobile devices support them.
  • #22 web2.0&amp;#x5BF9;&amp;#x4E0D;&amp;#x540C;&amp;#x4EBA;&amp;#x6765;&amp;#x8BF4;&amp;#x6709;&amp;#x7740;&amp;#x4E0D;&amp;#x540C;&amp;#x7684;&amp;#x610F;&amp;#x4E49; - &amp;#x5BF9;&amp;#x4E00;&amp;#x4E9B;&amp;#x4EBA;&amp;#x6765;&amp;#x8BF4;&amp;#xFF0C;&amp;#x4ED6;&amp;#x662F;&amp;#x53D1;&amp;#x8D22;&amp;#x7684;&amp;#x7BA1;&amp;#x9053; &amp;#xFF0D;&amp;#x5BF9;&amp;#x4E00;&amp;#x4E9B;&amp;#x4EBA;&amp;#x6765;&amp;#x8BF4;&amp;#x5B83;&amp;#x6709;&amp;#x5F88;&amp;#x591A;&amp;#x65B0;&amp;#x7684;idea &amp;#x5728;&amp;#x8FD9;&amp;#x4E4B;&amp;#x524D;&amp;#x5E76;&amp;#x6CA1;&amp;#x6709;web1.0&amp;#x7684;&amp;#x6982;&amp;#x5FF5;
  • #24 built with standards, first to use W3C recommendation independent from browser run on different platform such as phones, TV, desktop
  • #26 Video........