Your SlideShare is downloading. ×
0
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Web Standards Indonesia Tour
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Standards Indonesia Tour

1,302

Published on

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

No Downloads
Views
Total Views
1,302
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
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. 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. zibin Web Evangelist twitter:zibin http://www.slideshare.net/zibin Thursday, November 18, 2010
  • 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. 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. W3C adalah polisi di WWW Thursday, November 18, 2010
  • 6. Why do open standards matter? merah, oranye, hijau...Standar! Thursday, November 18, 2010
  • 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. semua yang anda perlu Thursday, November 18, 2010
  • 9. semua yang anda perlu... dalam browser Thursday, November 18, 2010
  • 10. Evolusi HTML Thursday, November 18, 2010
  • 11. HTML5 = HTML (bling bling) Thursday, November 18, 2010
  • 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. sumber: http://zibin.tehais.com/?p=1641 Video Thursday, November 18, 2010
  • 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. <video src="video.ogg" width="300" height="150" controls></video> Video Thursday, November 18, 2010
  • 16. Canvas Thursday, November 18, 2010
  • 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. SVG Thursday, November 18, 2010
  • 19. SVG mengguna bahasa XML lukisan diresize tanpa kehilangan kualitas lebih sesuai untuk lukisan besar Thursday, November 18, 2010
  • 20. Thursday, November 18, 2010
  • 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. Widgets (addons) Thursday, November 18, 2010
  • 23. Widgets on desktop,TV, mobile....fridge? Thursday, November 18, 2010
  • 24. CSS3 Thursday, November 18, 2010
  • 25. border-radius aka rounded-corners border-radius: 25px; Thursday, November 18, 2010
  • 26. border-radius aka rounded-corners border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; Thursday, November 18, 2010
  • 27. border-radius aka rounded-corners border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; Thursday, November 18, 2010
  • 28. border-radius aka rounded-corners Thursday, November 18, 2010
  • 29. multiple background images Thursday, November 18, 2010
  • 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. box-shadow box-shadow: 10px 10px 0px #fff; Thursday, November 18, 2010
  • 32. box-shadow box-shadow: 10px 10px 20px #fff; Thursday, November 18, 2010
  • 33. Web fonts Thursday, November 18, 2010
  • 34. Thursday, November 18, 2010
  • 35. text-shadow: #000000 10px 10px 19px; Thursday, November 18, 2010
  • 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. opacity opacity: 1.0; opacity: 0.2;opacity: 0.5; Thursday, November 18, 2010
  • 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. http://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/ pengembangan situs mobile Thursday, November 18, 2010
  • 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. mobile designer :-( Desain untuk situs mobile piece of crap (?)..... http://www.flickr.com/photos/hendry/763193147/sizes/l/ Thursday, November 18, 2010
  • 42. iphone 5% pengguna di EU5 http://www.flickr.com/photos/goincase/4973847949/ Thursday, November 18, 2010
  • 43. 1.3 billion pengguna mobile internet Thursday, November 18, 2010
  • 44. 30% hanya guna ponsel untuk browse Internet Thursday, November 18, 2010
  • 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. 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. 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. 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. http://www.flickr.com/photos/emdot/73217434/sizes/l/in/photostream/ tantangan Web Standar Thursday, November 18, 2010
  • 50. Studi Kasus: Korea Selatan & Cina Thursday, November 18, 2010
  • 51. Why? Many sites broke when Vista was released??SSL/TLS Active X Korea Selatan dikunci oleh Active X Thursday, November 18, 2010
  • 52. Bank Airline Alipay kebanyakan bank, situs pemesanan tiket pesawat, online shopping kebutuhan ActiveX Thursday, November 18, 2010
  • 53. Future is now Thursday, November 18, 2010
  • 54. <Terima Kasih:-)/> Thursday, November 18, 2010
  • 55. zibin AT opera.com twitter: zibin Q&A Thursday, November 18, 2010
  • 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. 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. 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

×