web standards indonesia tour
Post on 21-Sep-2014
11 views
DESCRIPTION
TRANSCRIPT
![Page 1: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/1.jpg)
Browser and Web Technology
http://www.flickr.com/photos/suzijane/243962216/sizes/o/
Seminar Opera & The WebIndonesia Tour
http://www.flickr.com/photos/laenulfean/393216338/sizes/l/in/photostream/
Thursday, November 18, 2010
![Page 2: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/2.jpg)
zibinWeb Evangelist
twitter:zibinhttp://www.slideshare.net/zibin
Thursday, November 18, 2010
![Page 3: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/3.jpg)
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
![Page 4: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/4.jpg)
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
![Page 5: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/5.jpg)
W3C adalah polisi di WWW
Thursday, November 18, 2010
![Page 6: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/6.jpg)
Why do open standards matter?
merah, oranye, hijau...Standar!
Thursday, November 18, 2010
![Page 7: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/7.jpg)
13717712538
http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-traffic-jam.jpg
bila standar menjadi kelam kabut
Thursday, November 18, 2010
![Page 8: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/8.jpg)
semua yang anda perlu
Thursday, November 18, 2010
![Page 9: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/9.jpg)
semua yang anda perlu... dalam browser
Thursday, November 18, 2010
![Page 10: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/10.jpg)
Evolusi HTML
Thursday, November 18, 2010
![Page 11: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/11.jpg)
HTML5 = HTML (bling bling)
Thursday, November 18, 2010
![Page 12: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/12.jpg)
TextHTML5
Web Workers
Canvas
Cross Document MessagingWeb Forms
Video
HTML5 dan teman
http://www.flickr.com/photos/fuyoh/809640616/sizes/o/
widgets
geolocation
Thursday, November 18, 2010
![Page 13: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/13.jpg)
sumber: http://zibin.tehais.com/?p=1641
Video
Thursday, November 18, 2010
![Page 14: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/14.jpg)
<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
![Page 15: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/15.jpg)
<video src="video.ogg" width="300" height="150" controls></video>
Video
Thursday, November 18, 2010
![Page 16: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/16.jpg)
Canvas
Thursday, November 18, 2010
![Page 17: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/17.jpg)
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
![Page 18: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/18.jpg)
SVG
Thursday, November 18, 2010
![Page 19: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/19.jpg)
SVG
mengguna bahasa XML
lukisan diresize tanpa kehilangan kualitas
lebih sesuai untuk lukisan besar
Thursday, November 18, 2010
![Page 20: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/20.jpg)
Thursday, November 18, 2010
![Page 21: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/21.jpg)
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
![Page 22: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/22.jpg)
Widgets (addons)
Thursday, November 18, 2010
![Page 23: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/23.jpg)
Widgets on desktop, TV, mobile....fridge?
Thursday, November 18, 2010
![Page 24: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/24.jpg)
CSS3 Thursday, November 18, 2010
![Page 25: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/25.jpg)
border-radius aka rounded-corners
border-radius: 25px;
Thursday, November 18, 2010
![Page 26: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/26.jpg)
border-radius aka rounded-corners
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
Thursday, November 18, 2010
![Page 27: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/27.jpg)
border-radius aka rounded-corners
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
Thursday, November 18, 2010
![Page 28: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/28.jpg)
border-radius aka rounded-corners
Thursday, November 18, 2010
![Page 29: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/29.jpg)
multiple background images
Thursday, November 18, 2010
![Page 30: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/30.jpg)
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
![Page 31: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/31.jpg)
box-shadow
box-shadow: 10px 10px 0px #fff;
Thursday, November 18, 2010
![Page 32: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/32.jpg)
box-shadow
box-shadow: 10px 10px 20px #fff;
Thursday, November 18, 2010
![Page 33: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/33.jpg)
Web fontsThursday, November 18, 2010
![Page 34: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/34.jpg)
Thursday, November 18, 2010
![Page 35: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/35.jpg)
text-shadow: #000000 10px 10px 19px;
Thursday, November 18, 2010
![Page 36: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/36.jpg)
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
![Page 37: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/37.jpg)
opacity
opacity: 1.0; opacity: 0.2; opacity: 0.5;
Thursday, November 18, 2010
![Page 38: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/38.jpg)
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
![Page 39: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/39.jpg)
for Mobile Webhttp://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/
pengembangan situs mobile
Thursday, November 18, 2010
![Page 40: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/40.jpg)
layar besar
click click “mouse”
tab tab “keyboard”
foto keluarga
bahagia :-)
Desain situs desktophttp://www.flickr.com/photos/anantablamichhane/438854995/sizes/l/
Thursday, November 18, 2010
![Page 41: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/41.jpg)
mobile designer :-(
Desain untuk situs mobile
piece of crap (?).....
http://www.flickr.com/photos/hendry/763193147/sizes/l/
Thursday, November 18, 2010
![Page 42: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/42.jpg)
iphone
5% pengguna di EU5 http://www.flickr.com/photos/goincase/4973847949/
Thursday, November 18, 2010
![Page 43: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/43.jpg)
1.3 billion pengguna mobile internet
Thursday, November 18, 2010
![Page 44: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/44.jpg)
30% hanya guna ponsel untuk
browse Internet
Thursday, November 18, 2010
![Page 45: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/45.jpg)
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
![Page 46: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/46.jpg)
Nokia 5130 XpressMusicNokia 2700cNokia E63Nokia 6300Nokia 2330c
Nokia C3Nokia N70
Nokia 3120cNokia 5310 XpressMusic
Nokia E71
indonesia top 10 http://www.opera.com/smw/2010/09/
Thursday, November 18, 2010
![Page 47: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/47.jpg)
Nokia 6300Nokia 5130 XpressMusic
Nokia 2700cSamsung S5230
Nokia 5310 XpressMusicNokia N73
Sony Ericsson W800Nokia 5800dNokia 6303cLG KP500
russia top 10 http://www.opera.com/smw/2010/09/
Thursday, November 18, 2010
![Page 48: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/48.jpg)
Apple iPhoneBlackBerry 8330 “Curve”BlackBerry 9700 “Bold”LG VM265 “Rumor2”
BlackBerry 8520 “Curve”LG VM510 “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
![Page 49: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/49.jpg)
http://www.flickr.com/photos/emdot/73217434/sizes/l/in/photostream/
tantangan Web Standar
Thursday, November 18, 2010
![Page 50: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/50.jpg)
Studi Kasus: Korea Selatan & Cina
Thursday, November 18, 2010
![Page 51: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/51.jpg)
Why?Many sites broke when Vista was released??SSL/TLS Active X
Korea Selatan dikunci oleh Active X
Thursday, November 18, 2010
![Page 52: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/52.jpg)
Bank
Airline
Alipay
kebanyakan bank, situs pemesanan tiket pesawat, online shopping kebutuhan ActiveX
Thursday, November 18, 2010
![Page 53: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/53.jpg)
Future is now
Thursday, November 18, 2010
![Page 54: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/54.jpg)
<Terima Kasih:-)/>
Thursday, November 18, 2010
![Page 55: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/55.jpg)
zibin AT opera.comtwitter: zibin
Q&A
Thursday, November 18, 2010
![Page 56: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/56.jpg)
Creative Commons license imageclaphttp://www.flickr.com/photos/tudor/953584594/spider webhttp://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/nowhttp://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to-maximize-profitsshadowhttp://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/transitions transformhttp://www.flickr.com/photos/28481088@N00/1298930743/borders and backgroundhttp://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/web fontshttp://www.flickr.com/photos/sekimura/4363831481/sizes/o/clapping photohttp://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpgsun flowerhttp://www.flickr.com/photos/treyevan/429692359/sizes/l/transitionhttp://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/
Thursday, November 18, 2010
![Page 57: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/57.jpg)
Creative Commons license imageGreat 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 StoreyTomato 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.htmlnapkin http://images2.cpcache.com/product/19388882v1_480x480_Front_Color-White.jpgsouth 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
![Page 58: Web Standards Indonesia Tour](https://reader034.vdocuments.net/reader034/viewer/2022051512/541e1a827bef0ab4658b6d9a/html5/thumbnails/58.jpg)
Demo & articlebackground and borders articleshttp://dev.opera.com/articles/view/css3-border-background-boxshadow/border-radius flower demohttp://people.opera.com/zibin/css3flower/flower.htmltransiitons and transform articlehttp://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/web fonts articlehttp://dev.opera.com/articles/view/seven-web-fonts-showcases/9elements HTML5 demohttp://9elements.com/io/projects/html5/canvas/David’s photobook demohttp://people.opera.com/dstorey/transforms/image-gallery.html
Presentation referenceintroduction to CSS2.1 and CSS3http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3
Thursday, November 18, 2010