Web Standards Indonesia Tour

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

http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpg

penemu WWW - “God bless Internet”

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

W3C adalah polisi di WWW

Why do open standards matter?

merah, oranye, hijau...Standar!

13717712538

http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-traffic-jam.jpg

bila standar menjadi kelam kabut

semua yang anda perlu

semua yang anda perlu... dalam browser

Evolusi HTML

HTML5 = HTML (bling bling)

TextHTML5

Web Workers

Canvas

Cross Document MessagingWeb Forms

HTML5 dan teman

http://www.flickr.com/photos/fuyoh/809640616/sizes/o/

widgets

geolocation

sumber: http://zibin.tehais.com/?p=1641

height="400" align="middle" allowScriptAccess="sameDomain" type="application/x-

shockwave-flash"></embed>

Canvas

pixel dilukis menggunakan JavaScript API

lukisan menjadi pixelated (titik) apabila diperbesarkan

Canvas berkemampuan untuk melukis setiap “gambar” dengan cekap

sesuai untuk games (contoh)

mengguna bahasa XML

lukisan diresize tanpa kehilangan kualitas

lebih sesuai untuk lukisan besar

http://dev.opera.com/articles/view/offline-applications-html5-appcache/

Appcache

Web Storage

http://www.flickr.com/photos/bfionline/2380398365/

Widgets (addons)

Widgets on desktop, TV, mobile....fridge?

CSS3 Thursday, November 18, 2010

border-radius aka rounded-corners

border-radius: 25px;

border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;

multiple background images

background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat;

multiple background images

box-shadow

box-shadow: 10px 10px 0px #fff;

box-shadow

box-shadow: 10px 10px 20px #fff;

Web fontsThursday, November 18, 2010

text-shadow: #000000 10px 10px 19px;

text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;

opacity

opacity: 1.0; opacity: 0.2; opacity: 0.5;

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);

for Mobile Webhttp://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/

pengembangan situs mobile

layar besar

click click “mouse”

tab tab “keyboard”

foto keluarga

bahagia :-)

Desain situs desktophttp://www.flickr.com/photos/anantablamichhane/438854995/sizes/l/

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/

1.3 billion pengguna mobile internet

30% hanya guna ponsel untuk

browse Internet

ponsel sebenar

layar kecil

ukuran layar berbeda

sulit untuk debug

!= iphone

http://www.flickr.com/photos/osde-info/2270663393/sizes/l/

isu memory

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/

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/

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/

http://www.flickr.com/photos/emdot/73217434/sizes/l/in/photostream/

tantangan Web Standar

Studi Kasus: Korea Selatan & Cina

Why?Many sites broke when Vista was released??SSL/TLS Active X

Korea Selatan dikunci oleh Active X

Airline

Alipay

kebanyakan bank, situs pemesanan tiket pesawat, online shopping kebutuhan ActiveX

Future is now

zibin AT opera.comtwitter: zibin

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/

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/

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