Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Twiggy - let's get our widget on!

1,491 views

Published on

Published in: Technology, Design
  • Be the first to comment

Twiggy - let's get our widget on!

  1. 1. Twiggy! let’s get our widget on
  2. 2. Who am I? Elliott Kember Rails developer @elliottkember Web Developer, Mobile Noob.
  3. 3. Who are you?
  4. 4. Get this party started
  5. 5. Get this party started • Valid HTML wrapper
  6. 6. Get this party started • Valid HTML wrapper • Doctype - I used HTML 4.01 Strict
  7. 7. Get this party started • Valid HTML wrapper • Doctype - I used HTML 4.01 Strict • Validate your code!
  8. 8. Get this party started • Valid HTML wrapper • Doctype - I used HTML 4.01 Strict • Validate your code! • Should work fine in Firefox
  9. 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. 10. HTML
  11. 11. If you don’t use you’re just being silly
  12. 12. jQuery in 2 minutes
  13. 13. jQuery in 2 minutes • $() is your selector function
  14. 14. jQuery in 2 minutes • $() is your selector function • CSS selectors
  15. 15. jQuery in 2 minutes • $() is your selector function • CSS selectors • $(‘#home’);
  16. 16. jQuery in 2 minutes • $() is your selector function • CSS selectors • $(‘#home’); • $(‘.home’);
  17. 17. jQuery in 2 minutes • $() is your selector function • CSS selectors • $(‘#home’); • $(‘.home’); • $(‘div#home’);
  18. 18. jQuery in 2 minutes • $() is your selector function • CSS selectors • $(‘#home’); • $(‘.home’); • $(‘div#home’); • $(‘div ul#home’);
  19. 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. 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. 21. jQuery plugins
  22. 22. jQuery plugins • http://plugins.jquery.com/
  23. 23. jQuery plugins • http://plugins.jquery.com/ • Loaded locally, size isn’t a huge problem
  24. 24. jQuery plugins • http://plugins.jquery.com/ • Loaded locally, size isn’t a huge problem • Widget engine is fast enough to cope
  25. 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. 26. Add your plugins
  27. 27. Add your plugins
  28. 28. Create panels
  29. 29. Create panels
  30. 30. Create panels
  31. 31. Create panels
  32. 32. Create panels • Div, form, class, ID, comments, etc.
  33. 33. Hiding things
  34. 34. Hiding things • Use Javascript techniques
  35. 35. Hiding things • Use Javascript techniques • Be clever with your # and .
  36. 36. Hiding things • Use Javascript techniques • Be clever with your # and . • $(‘.panel’).hide(); $(‘.panel#home’).show();
  37. 37. Hiding things • Use Javascript techniques • Be clever with your # and . • $(‘.panel’).hide(); $(‘.panel#home’).show(); • $(‘.asset’).hide(); $(‘.asset.home’).show();
  38. 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. 39. Some Javascript
  40. 40. Some Javascript • Set up functions for your stuff
  41. 41. Some Javascript • Set up functions for your stuff • $(‘document’).ready();
  42. 42. Some Javascript • Set up functions for your stuff • $(‘document’).ready(); • Be clear and simple
  43. 43. CSS
  44. 44. CSS • Normal CSS, CSS3 rules
  45. 45. CSS • Normal CSS, CSS3 rules • border-radius
  46. 46. CSS • Normal CSS, CSS3 rules • border-radius • Hover effects are important
  47. 47. XML config
  48. 48. XML config • be careful with the difference between values and attributes!
  49. 49. Deploy / test
  50. 50. Deploy / test • Open application.xml file directly in Opera
  51. 51. Deploy / test • Open application.xml file directly in Opera • use the Widget Emulator
  52. 52. Deploy / test • Open application.xml file directly in Opera • use the Widget Emulator • zip -r widget.wgt * and USB to phone
  53. 53. Boring!
  54. 54. Searching Twitter!
  55. 55. Searching Twitter! • Plugins are awesome
  56. 56. Searching Twitter! • Plugins are awesome • tweet.seaofclouds.cm
  57. 57. Searching Twitter! • Plugins are awesome • tweet.seaofclouds.cm • <label for=quot;searchquot;> What are you looking for? </label>
  58. 58. With a little bit of this
  59. 59. With a little bit of this
  60. 60. And a little bit of that
  61. 61. And a little bit of that
  62. 62. And the emulator...
  63. 63. And the emulator... • Opera Widget Emulator
  64. 64. And the emulator... • Opera Widget Emulator • Vodafone have their own one too
  65. 65. And the emulator... • Opera Widget Emulator • Vodafone have their own one too • Runs like a widget
  66. 66. And the emulator... • Opera Widget Emulator • Vodafone have their own one too • Runs like a widget • Contains your widget
  67. 67. Hooray!
  68. 68. Some tips:
  69. 69. Some tips: • Auto-focus input fields
  70. 70. Some tips: • Auto-focus input fields • Hover effects are important.
  71. 71. Some tips: • Auto-focus input fields • Hover effects are important. • Test the phone with your typeface
  72. 72. Some tips: • Auto-focus input fields • Hover effects are important. • Test the phone with your typeface • Make hit areas small!
  73. 73. Small? The mouse cursor snaps to the edges of the action bounding box
  74. 74. Small! The mouse cursor snaps to the edges of the action bounding box So make the action bounding box smaller than the button.
  75. 75. Remember:
  76. 76. Remember: • Don’t resize images with HTML
  77. 77. Remember: • Don’t resize images with HTML • use CSS sprites
  78. 78. Remember: • Don’t resize images with HTML • use CSS sprites • Phone keyboard is upside-down
  79. 79. Remember: • Don’t resize images with HTML • use CSS sprites • Phone keyboard is upside-down • It’s going to be slow
  80. 80. Remember: • Don’t resize images with HTML • use CSS sprites • Phone keyboard is upside-down • It’s going to be slow • Dodgy network connections
  81. 81. 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”
  82. 82. Dear Betavine
  83. 83. Dear Betavine • Documentation
  84. 84. Dear Betavine • Documentation • Bandwidth restrictions
  85. 85. Dear Betavine • Documentation • Bandwidth restrictions • Resizing images
  86. 86. Dear Betavine • Documentation • Bandwidth restrictions • Resizing images • Publicity
  87. 87. Question time!
  88. 88. I bet you thought that was it
  89. 89. You now have an iPhone web app
  90. 90. You now have an iPhone web app And a PhoneGap iPhone app (maybe)
  91. 91. PhoneGap iPhone app (maybe) And an Adobe AIR app
  92. 92. And an Adobe AIR app And an Opera Widget
  93. 93. And an Opera Widget and a dashboard widget
  94. 94. and a dashboard widget And a website.
  95. 95. This is the most important thing
  96. 96. and you’re kind of doing it wrong
  97. 97. These are not widgets: These are apps.
  98. 98. You’re on our turf, and we want to help.
  99. 99. Thanks!
  100. 100. Thanks! • elliott.kember@gmail.com
  101. 101. Thanks! • elliott.kember@gmail.com • twitter: @elliottkember
  102. 102. Thanks! • elliott.kember@gmail.com • twitter: @elliottkember • www.elliottkember.com

×