Widgets in theory and in practice
-
Upload
ourmaninjapan -
Category
Technology
-
view
197 -
download
5
Transcript of Widgets in theory and in practice
![Page 1: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/1.jpg)
Widgets
in theory and in practice
Daniel Davis
@ourmaninjapan
Opera Software
![Page 2: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/2.jpg)
A little story
![Page 3: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/3.jpg)
Phones in
Japan
Galapagos
![Page 4: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/4.jpg)
Widgets for
desktop
compatibility
![Page 5: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/5.jpg)
Sound
familiar?
“Write once,
run anywhere”
widget
widget runtime
OS
![Page 6: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/6.jpg)
Current
runtimes
● Opera● NetFront● Aplix● Obigo
Borqs● Samsung● LG● Nokia● BlackBerry (sorta)
![Page 7: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/7.jpg)
Not the
Holy Grail
![Page 8: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/8.jpg)
Widgets 1
Web Apps 0
● No need to host● Less insecurity● X-domain AJAX● Simpler UI● Feedback & ratings
![Page 9: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/9.jpg)
Widgets 0
Web Apps 1
● No auto-update● No live stats● No ad monetization● Limited findability● Isolation
![Page 10: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/10.jpg)
Just another
choice
![Page 11: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/11.jpg)
Development ● Text editor● Eclipse plugins● WAC SDK● KamiJS● PhoneGap, please?
![Page 12: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/12.jpg)
Dealing
with
devices
![Page 13: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/13.jpg)
Screen
sizes:
Part I
Stay flexible
#content { font-size: 1.1em; margin: 0 auto; width: 80%;}
![Page 14: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/14.jpg)
Screen
sizes:
Part II
Media queries
are your friend.
// Puts the sidebar on// the right for screens// 768px or wider@media and(min-width: 768px) { #sidebar { float: right; }}
![Page 15: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/15.jpg)
Screen
sizes:
Part III
Media queries
for JavaScript// dev.opera.com/// articles/view/// media-query-library/testMediaQuery( 'screen and (min-width: 768px)') { // Code for // wide screens}
![Page 16: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/16.jpg)
Distribution Widget repositories● widgets.opera.com● WAC● NetFrontOperator's stores● BlackBerry● Vodafone● Others with WAC
![Page 17: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/17.jpg)
Makin'
money
![Page 18: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/18.jpg)
Final tips ● Start in a desktop browser
● Use a template or SDK
● Test on devices or at least an emulator
● Consider “hybrid” widgets
![Page 19: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/19.jpg)
Resources ● widgets.opera.com● labs.opera.com/
news/2011/02/14/● dev.opera.com/
articles/view/
opera-widgets-sdk/● wacapps.net
![Page 20: Widgets in theory and in practice](https://reader033.fdocuments.in/reader033/viewer/2022052507/558b5551d8b42a50698b4607/html5/thumbnails/20.jpg)
Thank you!
Daniel Davis
@ourmaninjapan
Opera Software