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