Browser and Web Technology
http://www.flickr.com/photos/suzijane/243962216/sizes/o/
Seminar Opera & The Web
Indonesia Tour
...
zibin
Web Evangelist
twitter:zibin
http://www.slideshare.net/zibin
Thursday, November 18, 2010
http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpg
penemu WWW - “God ble...
http://obamapacman.com/wp-content/uploads/2009/08/First-World-Wide-Web-Server-at-CERN-made-possible-by-Tim-Berners-Lee-hos...
W3C adalah polisi di WWW
Thursday, November 18, 2010
Why do open
standards matter?
merah, oranye, hijau...Standar!
Thursday, November 18, 2010
13717712538
http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-traffic-jam.jpg
bila standar menjadi kelam kabut
Thu...
semua yang anda perlu
Thursday, November 18, 2010
semua yang anda perlu... dalam browser
Thursday, November 18, 2010
Evolusi HTML
Thursday, November 18, 2010
HTML5 = HTML (bling bling)
Thursday, November 18, 2010
TextHTML5
Web Workers
Canvas
Cross Document Messaging
Web Forms
Video
HTML5dan teman
http://www.flickr.com/photos/fuyoh/809...
sumber: http://zibin.tehais.com/?p=1641
Video
Thursday, November 18, 2010
<embed src="http://player.youku.com/player.php/sid/
XMTk1NjY4NDc2/v.swf" quality="high" width="480"
height="400" align="mi...
<video src="video.ogg" width="300" height="150"
controls></video>
Video
Thursday, November 18, 2010
Canvas
Thursday, November 18, 2010
Canvas
pixel dilukis menggunakan JavaScript API
lukisan menjadi pixelated (titik) apabila diperbesarkan
Canvas berkemampua...
SVG
Thursday, November 18, 2010
SVG
mengguna bahasa XML
lukisan diresize tanpa kehilangan kualitas
lebih sesuai untuk lukisan besar
Thursday, November 18,...
Thursday, November 18, 2010
http://dev.opera.com/articles/view/offline-applications-html5-appcache/
Appcache
Web Storage
WebDB
http://www.flickr.com/pho...
Widgets (addons)
Thursday, November 18, 2010
Widgets on desktop,TV, mobile....fridge?
Thursday, November 18, 2010
CSS3
Thursday, November 18, 2010
border-radius aka rounded-corners
border-radius: 25px;
Thursday, November 18, 2010
border-radius aka rounded-corners
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
Thursday, November 18...
border-radius aka rounded-corners
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
Thursday, November 18...
border-radius aka rounded-corners
Thursday, November 18, 2010
multiple background images
Thursday, November 18, 2010
background:
url(rose.png) no-repeat 150px -20px,
url(driedrose.png) no-repeat,! ! ! ! ! !
url(fieldsky.jpg) no-repeat;
mul...
box-shadow
box-shadow: 10px 10px 0px #fff;
Thursday, November 18, 2010
box-shadow
box-shadow: 10px 10px 20px #fff;
Thursday, November 18, 2010
Web fonts
Thursday, November 18, 2010
Thursday, November 18, 2010
text-shadow: #000000 10px 10px 19px;
Thursday, November 18, 2010
text-shadow:
0 0 4px white, 0 -5px 4px #ff3,
2px -10px 6px #fd3, -2px -15px 11px #f80,
2px -25px 18px #f20;
Thursday, Nove...
opacity
opacity: 1.0; opacity: 0.2;opacity: 0.5;
Thursday, November 18, 2010
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, Novembe...
http://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/
pengembangan situs mobile
Thursday, Novemb...
layar besar
click click “mouse”
tab tab “keyboard”
foto keluarga
bahagia :-)
Desain situs desktop
http://www.flickr.com/pho...
mobile designer :-(
Desain untuk situs mobile
piece of crap (?).....
http://www.flickr.com/photos/hendry/763193147/sizes/l/...
iphone
5% pengguna di EU5
http://www.flickr.com/photos/goincase/4973847949/
Thursday, November 18, 2010
1.3 billion pengguna
mobile internet
Thursday, November 18, 2010
30% hanya guna
ponsel untuk
browse Internet
Thursday, November 18, 2010
ponsel sebenar
layar kecil
ukuran layar berbeda
sulit untuk debug
!= iphone
http://www.flickr.com/photos/osde-info/22706633...
Nokia 5130 XpressMusic
Nokia 2700c
Nokia E63
Nokia 6300
Nokia 2330c
Nokia C3
Nokia N70
Nokia 3120c
Nokia 5310 XpressMusic
...
Nokia 6300
Nokia 5130 XpressMusic
Nokia 2700c
Samsung S5230
Nokia 5310 XpressMusic
Nokia N73
Sony Ericsson W800
Nokia 5800...
Apple iPhone
BlackBerry 8330 “Curve”
BlackBerry 9700 “Bold”
LGVM265 “Rumor2”
BlackBerry 8520 “Curve”
LGVM510 “Rumor Touch”...
http://www.flickr.com/photos/emdot/73217434/sizes/l/in/photostream/
tantangan Web Standar
Thursday, November 18, 2010
Studi Kasus:
Korea Selatan & Cina
Thursday, November 18, 2010
Why?
Many sites broke when Vista was
released??SSL/TLS Active X
Korea Selatan dikunci oleh Active X
Thursday, November 18,...
Bank
Airline
Alipay
kebanyakan bank, situs pemesanan tiket pesawat, online shopping kebutuhan ActiveX
Thursday, November 1...
Future is now
Thursday, November 18, 2010
<Terima Kasih:-)/>
Thursday, November 18, 2010
zibin AT opera.com
twitter: zibin
Q&A
Thursday, November 18, 2010
Creative Commons license image
clap
http://www.flickr.com/photos/tudor/953584594/
spider web
http://www.flickr.com/photos/...
Creative Commons license image
Great Wall of China http://www.flickr.com/photos/smokingpermitted/
padlock http://www.flick...
Demo & article
background and borders articles
http://dev.opera.com/articles/view/css3-border-background-boxshadow/
border...
Upcoming SlideShare
Loading in...5
×

Web Standards Indonesia Tour

1,345

Published on

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

No Downloads
Views
Total Views
1,345
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
30
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×