Web Standards Indonesia Tour

1,740 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,740
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web Standards Indonesia Tour

  1. 1. Browser and Web Technology http://www.flickr.com/photos/suzijane/243962216/sizes/o/ Seminar Opera & The Web Indonesia Tour http://www.flickr.com/photos/laenulfean/393216338/sizes/l/in/photostream/ Thursday, November 18, 2010
  2. 2. zibin Web Evangelist twitter:zibin http://www.slideshare.net/zibin Thursday, November 18, 2010
  3. 3. http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpg penemu WWW - “God bless Internet” Thursday, November 18, 2010
  4. 4. http://obamapacman.com/wp-content/uploads/2009/08/First-World-Wide-Web-Server-at-CERN-made-possible-by-Tim-Berners-Lee-hosted-on-Steve-Jobs-NeXT-workstation- computer-300x225.jpg inilah seluruh alam semesta WWW Thursday, November 18, 2010
  5. 5. W3C adalah polisi di WWW Thursday, November 18, 2010
  6. 6. Why do open standards matter? merah, oranye, hijau...Standar! Thursday, November 18, 2010
  7. 7. 13717712538 http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-traffic-jam.jpg bila standar menjadi kelam kabut Thursday, November 18, 2010
  8. 8. semua yang anda perlu Thursday, November 18, 2010
  9. 9. semua yang anda perlu... dalam browser Thursday, November 18, 2010
  10. 10. Evolusi HTML Thursday, November 18, 2010
  11. 11. HTML5 = HTML (bling bling) Thursday, November 18, 2010
  12. 12. TextHTML5 Web Workers Canvas Cross Document Messaging Web Forms Video HTML5dan teman http://www.flickr.com/photos/fuyoh/809640616/sizes/o/ widgets geolocation Thursday, November 18, 2010
  13. 13. sumber: http://zibin.tehais.com/?p=1641 Video Thursday, November 18, 2010
  14. 14. <embed src="http://player.youku.com/player.php/sid/ XMTk1NjY4NDc2/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="sameDomain" type="application/x- shockwave-flash"></embed> Video Thursday, November 18, 2010
  15. 15. <video src="video.ogg" width="300" height="150" controls></video> Video Thursday, November 18, 2010
  16. 16. Canvas Thursday, November 18, 2010
  17. 17. Canvas pixel dilukis menggunakan JavaScript API lukisan menjadi pixelated (titik) apabila diperbesarkan Canvas berkemampuan untuk melukis setiap “gambar” dengan cekap sesuai untuk games (contoh) Thursday, November 18, 2010
  18. 18. SVG Thursday, November 18, 2010
  19. 19. SVG mengguna bahasa XML lukisan diresize tanpa kehilangan kualitas lebih sesuai untuk lukisan besar Thursday, November 18, 2010
  20. 20. Thursday, November 18, 2010
  21. 21. http://dev.opera.com/articles/view/offline-applications-html5-appcache/ Appcache Web Storage WebDB http://www.flickr.com/photos/bfionline/2380398365/ Thursday, November 18, 2010
  22. 22. Widgets (addons) Thursday, November 18, 2010
  23. 23. Widgets on desktop,TV, mobile....fridge? Thursday, November 18, 2010
  24. 24. CSS3 Thursday, November 18, 2010
  25. 25. border-radius aka rounded-corners border-radius: 25px; Thursday, November 18, 2010
  26. 26. border-radius aka rounded-corners border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; Thursday, November 18, 2010
  27. 27. border-radius aka rounded-corners border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; Thursday, November 18, 2010
  28. 28. border-radius aka rounded-corners Thursday, November 18, 2010
  29. 29. multiple background images Thursday, November 18, 2010
  30. 30. background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat; multiple background images Thursday, November 18, 2010
  31. 31. box-shadow box-shadow: 10px 10px 0px #fff; Thursday, November 18, 2010
  32. 32. box-shadow box-shadow: 10px 10px 20px #fff; Thursday, November 18, 2010
  33. 33. Web fonts Thursday, November 18, 2010
  34. 34. Thursday, November 18, 2010
  35. 35. text-shadow: #000000 10px 10px 19px; Thursday, November 18, 2010
  36. 36. text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; Thursday, November 18, 2010
  37. 37. opacity opacity: 1.0; opacity: 0.2;opacity: 0.5; Thursday, November 18, 2010
  38. 38. rgba/hsla rgba(255,0,0,1.0); rgba(255,0,0,0.8); rgba(255,0,0,0.6); rgba(255,0,0,0.4); rgba(255,0,0,0.2); Thursday, November 18, 2010
  39. 39. http://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/ pengembangan situs mobile Thursday, November 18, 2010
  40. 40. layar besar click click “mouse” tab tab “keyboard” foto keluarga bahagia :-) Desain situs desktop http://www.flickr.com/photos/anantablamichhane/438854995/sizes/l/ Thursday, November 18, 2010
  41. 41. mobile designer :-( Desain untuk situs mobile piece of crap (?)..... http://www.flickr.com/photos/hendry/763193147/sizes/l/ Thursday, November 18, 2010
  42. 42. iphone 5% pengguna di EU5 http://www.flickr.com/photos/goincase/4973847949/ Thursday, November 18, 2010
  43. 43. 1.3 billion pengguna mobile internet Thursday, November 18, 2010
  44. 44. 30% hanya guna ponsel untuk browse Internet Thursday, November 18, 2010
  45. 45. ponsel sebenar layar kecil ukuran layar berbeda sulit untuk debug != iphone http://www.flickr.com/photos/osde-info/2270663393/sizes/l/ isu memory Thursday, November 18, 2010
  46. 46. Nokia 5130 XpressMusic Nokia 2700c Nokia E63 Nokia 6300 Nokia 2330c Nokia C3 Nokia N70 Nokia 3120c Nokia 5310 XpressMusic Nokia E71 indonesia top 10 http://www.opera.com/smw/2010/09/ Thursday, November 18, 2010
  47. 47. Nokia 6300 Nokia 5130 XpressMusic Nokia 2700c Samsung S5230 Nokia 5310 XpressMusic Nokia N73 Sony Ericsson W800 Nokia 5800d Nokia 6303c LG KP500 russia top 10 http://www.opera.com/smw/2010/09/ Thursday, November 18, 2010
  48. 48. Apple iPhone BlackBerry 8330 “Curve” BlackBerry 9700 “Bold” LGVM265 “Rumor2” BlackBerry 8520 “Curve” LGVM510 “Rumor Touch” Samsung SPH-M810 “Instinct S30” BlackBerry 9630 “Tour” BlackBerry 8530 “Curve” BlackBerry 9000 “Bold” U.S. top 10 http://www.opera.com/smw/2010/09/ Thursday, November 18, 2010
  49. 49. http://www.flickr.com/photos/emdot/73217434/sizes/l/in/photostream/ tantangan Web Standar Thursday, November 18, 2010
  50. 50. Studi Kasus: Korea Selatan & Cina Thursday, November 18, 2010
  51. 51. Why? Many sites broke when Vista was released??SSL/TLS Active X Korea Selatan dikunci oleh Active X Thursday, November 18, 2010
  52. 52. Bank Airline Alipay kebanyakan bank, situs pemesanan tiket pesawat, online shopping kebutuhan ActiveX Thursday, November 18, 2010
  53. 53. Future is now Thursday, November 18, 2010
  54. 54. <Terima Kasih:-)/> Thursday, November 18, 2010
  55. 55. zibin AT opera.com twitter: zibin Q&A Thursday, November 18, 2010
  56. 56. Creative Commons license image clap http://www.flickr.com/photos/tudor/953584594/ spider web http://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/ now http://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to- maximize-profits shadow http://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/ transitions transform http://www.flickr.com/photos/28481088@N00/1298930743/ borders and background http://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/ web fonts http://www.flickr.com/photos/sekimura/4363831481/sizes/o/ clapping photo http://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpg sun flower http://www.flickr.com/photos/treyevan/429692359/sizes/l/ transition http://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/ Thursday, November 18, 2010
  57. 57. Creative Commons license image Great Wall of China http://www.flickr.com/photos/smokingpermitted/ padlock http://www.flickr.com/photos/elnicofotos/ stick no bills/tamil http://www.flickr.com/photos/meanestindian/ Killbill http://www.flickr.com/photos/wili/ money http://www.flickr.com/photos/amagill/ baby http://www.flickr.com/photos/mackro/ Open Web Stack by David Storey Tomato http://www.flickr.com/photos/somemixedstuff/ lego plane http://www.flickr.com/photos/pmiaki/ American express http://www.flickr.com/photos/andresrueda/ bush baby http://bust-the-stress.blogspot.com/2009/01/baby-sitting.html napkin http://images2.cpcache.com/product/19388882v1_480x480_Front_Color-White.jpg south korea http://www.flickr.com/photos/bibbit/2948779230/sizes/l/in/photostream/ india http://www.flickr.com/photos/jasleen_kaur/3116354699/sizes/l/in/photostream/ Thursday, November 18, 2010
  58. 58. Demo & article background and borders articles http://dev.opera.com/articles/view/css3-border-background-boxshadow/ border-radius flower demo http://people.opera.com/zibin/css3flower/flower.html transiitons and transform article http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/ web fonts article http://dev.opera.com/articles/view/seven-web-fonts-showcases/ 9elements HTML5 demo http://9elements.com/io/projects/html5/canvas/ David’s photobook demo http://people.opera.com/dstorey/transforms/image-gallery.html Presentation reference introduction to CSS2.1 and CSS3 http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3 Thursday, November 18, 2010

×