Embed Size (px)
DESCRIPTION
Citation preview
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
zibinWeb Evangelist
twitter:zibinhttp://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 bless Internet”
Thursday, November 18, 2010
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
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
Thursday, November 18, 2010
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 MessagingWeb Forms
Video
HTML5 dan teman
http://www.flickr.com/photos/fuyoh/809640616/sizes/o/
widgets
geolocation
Thursday, November 18, 2010
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="middle" allowScriptAccess="sameDomain" type="application/x-
shockwave-flash"></embed>
Video
Thursday, November 18, 2010
<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 berkemampuan untuk melukis setiap “gambar” dengan cekap
sesuai untuk games (contoh)
Thursday, November 18, 2010
SVG
Thursday, November 18, 2010
SVG
mengguna bahasa XML
lukisan diresize tanpa kehilangan kualitas
lebih sesuai untuk lukisan besar
Thursday, November 18, 2010
Thursday, November 18, 2010
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
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, 2010
border-radius aka rounded-corners
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
Thursday, November 18, 2010
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;
multiple background images
Thursday, November 18, 2010
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 fontsThursday, 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, November 18, 2010
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, November 18, 2010
for Mobile Webhttp://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/
pengembangan situs mobile
Thursday, November 18, 2010
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
mobile designer :-(
Desain untuk situs mobile
piece of crap (?).....
http://www.flickr.com/photos/hendry/763193147/sizes/l/
Thursday, November 18, 2010
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/2270663393/sizes/l/
isu memory
Thursday, November 18, 2010
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
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
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
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, 2010
Bank
Airline
Alipay
kebanyakan bank, situs pemesanan tiket pesawat, online shopping kebutuhan ActiveX
Thursday, November 18, 2010
Future is now
Thursday, November 18, 2010
<Terima Kasih:-)/>
Thursday, November 18, 2010
zibin AT opera.comtwitter: zibin
Q&A
Thursday, November 18, 2010
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
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
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
