Web Standards Indonesia Tour

Post on 21-Sep-2014

8 views 5 download

Tags:

description

 

transcript

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

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

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