1. Twiggy!
let’s get our widget on

2. Who am I?
Elliott Kember
Rails developer
@elliottkember
Web Developer,
Mobile Noob.

3. Who are you?

4. Get this party started

5. Get this party started
• Valid HTML wrapper

6. Get this party started
• Valid HTML wrapper
• Doctype - I used HTML 4.01 Strict

7. Get this party started
• Valid HTML wrapper
• Doctype - I used HTML 4.01 Strict
• Validate your code!

8. Get this party started
• Valid HTML wrapper
• Doctype - I used HTML 4.01 Strict
• Validate your code!
• Should work fine in Firefox

9. Get this party started
• Valid HTML wrapper
• Doctype - I used HTML 4.01 Strict
• Validate your code!
• nal
Should work fine in Firefox
ptio
to
o is n
shit
his
T

10. HTML

11. If you don’t use
you’re just being silly

12. jQuery in 2 minutes

13. jQuery in 2 minutes
• $() is your selector function

14. jQuery in 2 minutes
• $() is your selector function
• CSS selectors

15. jQuery in 2 minutes
• $() is your selector function
• CSS selectors
• $(‘#home’);

16. jQuery in 2 minutes
• $() is your selector function
• CSS selectors
• $(‘#home’);
• $(‘.home’);

17. jQuery in 2 minutes
• $() is your selector function
• CSS selectors
• $(‘#home’);
• $(‘.home’);
• $(‘div#home’);

18. jQuery in 2 minutes
• $() is your selector function
• CSS selectors
• $(‘#home’);
• $(‘.home’);
• $(‘div#home’);
• $(‘div ul#home’);

19. jQuery in 2 minutes
• $() is your selector function
• CSS selectors
• $(‘#home’);
• $(‘.home’);
• $(‘div#home’);
• $(‘div ul#home’);
• $(‘div ul#home’).hide(); $(‘div ul#home’).show();

20. jQuery in 2 minutes
• $() is your selector function
• CSS selectors
• $(‘#home’);
• $(‘.home’);
• $(‘div#home’);
• $(‘div ul#home’);
• $(‘div ul#home’).hide(); $(‘div ul#home’).show();
• $(‘div ul#home li a’).click(function(){
alert(‘you clicked it!’); // specify whatever you want to happen here!
}

21. jQuery plugins

22. jQuery plugins
• http://plugins.jquery.com/

23. jQuery plugins
• http://plugins.jquery.com/
• Loaded locally, size isn’t a huge problem

24. jQuery plugins
• http://plugins.jquery.com/
• Loaded locally, size isn’t a huge problem
• Widget engine is fast enough to cope

25. jQuery plugins
• http://plugins.jquery.com/
• Loaded locally, size isn’t a huge problem
• Widget engine is fast enough to cope
• We used a Twitter Search JSON plugin

26. Add your plugins

27. Add your plugins

28. Create panels

29. Create panels

30. Create panels

31. Create panels

32. Create panels
• Div, form, class, ID, comments, etc.

33. Hiding things

34. Hiding things
• Use Javascript techniques

35. Hiding things
• Use Javascript techniques
• Be clever with your # and .

36. Hiding things
• Use Javascript techniques
• Be clever with your # and .
• $(‘.panel’).hide(); $(‘.panel#home’).show();

37. Hiding things
• Use Javascript techniques
• Be clever with your # and .
• $(‘.panel’).hide(); $(‘.panel#home’).show();
• $(‘.asset’).hide(); $(‘.asset.home’).show();

38. Hiding things
• Use Javascript techniques
• Be clever with your # and .
• $(‘.panel’).hide(); $(‘.panel#home’).show();
• $(‘.asset’).hide(); $(‘.asset.home’).show();
• $(‘#menu li’).hide(); $(‘#menu li.home’).show();

39. Some Javascript

40. Some Javascript
• Set up functions for your stuff

41. Some Javascript
• Set up functions for your stuff
• $(‘document’).ready();

42. Some Javascript
• Set up functions for your stuff
• $(‘document’).ready();
• Be clear and simple

43. CSS

44. CSS
• Normal CSS, CSS3 rules

45. CSS
• Normal CSS, CSS3 rules
• border-radius

46. CSS
• Normal CSS, CSS3 rules
• border-radius
• Hover effects are
important

47. XML config

48. XML config
• be careful with the difference between values and attributes!

49. Deploy / test

50. Deploy / test
• Open application.xml file directly in Opera

51. Deploy / test
• Open application.xml file directly in Opera
• use the Widget Emulator

52. Deploy / test
• Open application.xml file directly in Opera
• use the Widget Emulator
• zip -r widget.wgt * and USB to phone

53. Boring!

54. Searching Twitter!

55. Searching Twitter!
• Plugins are awesome

56. Searching Twitter!
• Plugins are awesome
• tweet.seaofclouds.cm

57. Searching Twitter!
• Plugins are awesome
• tweet.seaofclouds.cm
• <label for=quot;searchquot;>
What are you looking for?
</label>

58. With a little bit of this

59. With a little bit of this

60. And a little bit of that

61. And a little bit of that

62. And the emulator...

63. And the emulator...
• Opera Widget Emulator

64. And the emulator...
• Opera Widget Emulator
• Vodafone have their own one too

65. And the emulator...
• Opera Widget Emulator
• Vodafone have their own one too
• Runs like a widget

66. And the emulator...
• Opera Widget Emulator
• Vodafone have their own one too
• Runs like a widget
• Contains your widget

67. Hooray!

70. Some tips:

71. Some tips:
• Auto-focus input fields

72. Some tips:
• Auto-focus input fields
• Hover effects are important.

73. Some tips:
• Auto-focus input fields
• Hover effects are important.
• Test the phone with your typeface

74. Some tips:
• Auto-focus input fields
• Hover effects are important.
• Test the phone with your typeface
• Make hit areas small!

75. Small?
The mouse cursor snaps to the
edges of the action bounding box

76. Small!
The mouse cursor snaps to the
edges of the action bounding box
So make the action bounding box
smaller than the button.

77. Remember:

78. Remember:
• Don’t resize images with HTML

79. Remember:
• Don’t resize images with HTML
• use CSS sprites

80. Remember:
• Don’t resize images with HTML
• use CSS sprites
• Phone keyboard is upside-down

81. Remember:
• Don’t resize images with HTML
• use CSS sprites
• Phone keyboard is upside-down
• It’s going to be slow

82. Remember:
• Don’t resize images with HTML
• use CSS sprites
• Phone keyboard is upside-down
• It’s going to be slow
• Dodgy network connections

83. Remember:
• Don’t resize images with HTML
• use CSS sprites
• Phone keyboard is upside-down
• It’s going to be slow
• Dodgy network connections
• Don’t expect it to “just work”

84. Dear Betavine

85. Dear Betavine
• Documentation

86. Dear Betavine
• Documentation
• Bandwidth restrictions

87. Dear Betavine
• Documentation
• Bandwidth restrictions
• Resizing images

88. Dear Betavine
• Documentation
• Bandwidth restrictions
• Resizing images
• Publicity

89. Question time!

90. I bet you thought
that was it

93. You now have
an iPhone web app

94. You now have
an iPhone web app
And a
PhoneGap
iPhone app
(maybe)

95. PhoneGap
iPhone app
(maybe)
And an Adobe AIR app

96. And an Adobe AIR app
And an Opera Widget

97. And an Opera Widget
and a dashboard widget

98. and a dashboard widget
And a website.

99. This is the most
important thing

100. and you’re kind of
doing it wrong

101. These are not widgets:
These are apps.

102. You’re on our turf,
and we want to help.

103. Thanks!

104. Thanks!
• elliott.kember@gmail.com

105. Thanks!
• elliott.kember@gmail.com
• twitter: @elliottkember

106. Thanks!
• elliott.kember@gmail.com
• twitter: @elliottkember
• www.elliottkember.com