Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à Twiggy - let's get our widget on!
Similaire à Twiggy - let's get our widget on! (20)
Dernier
Dernier (20)
Twiggy - let's get our widget on!
- 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
- 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!
- 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
- 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
- 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!
- 105. Thanks! • elliott.kember@gmail.com • twitter: @elliottkember
- 106. Thanks! • elliott.kember@gmail.com • twitter: @elliottkember • www.elliottkember.com
Notes de l'éditeur
- use HTML use Javascript uses jQuery? make websites employ people who do?
- Make a real web page tell you why later
- Make a real web page tell you why later
- Make a real web page tell you why later
- Make a real web page tell you why later
- Make a real web page tell you why later
- If you don’t use jQuery you’re being silly fast, effective, saves you time
- Bind() Live() Timers Calendars Twitter JSON AJAX Graphs - Flot Form validation Slides and fades and animations are awesome Some will not work. Be careful of memory leaks
- Bind() Live() Timers Calendars Twitter JSON AJAX Graphs - Flot Form validation Slides and fades and animations are awesome Some will not work. Be careful of memory leaks
- Bind() Live() Timers Calendars Twitter JSON AJAX Graphs - Flot Form validation Slides and fades and animations are awesome Some will not work. Be careful of memory leaks
- Bind() Live() Timers Calendars Twitter JSON AJAX Graphs - Flot Form validation Slides and fades and animations are awesome Some will not work. Be careful of memory leaks
- Autofocus because NOBODY LIKES THE MOUSE Hover helps you know you’re on a button Italic broken in twiggy Clever hit areas trick
- Autofocus because NOBODY LIKES THE MOUSE Hover helps you know you’re on a button Italic broken in twiggy Clever hit areas trick
- Autofocus because NOBODY LIKES THE MOUSE Hover helps you know you’re on a button Italic broken in twiggy Clever hit areas trick
- Autofocus because NOBODY LIKES THE MOUSE Hover helps you know you’re on a button Italic broken in twiggy Clever hit areas trick
- Resizing images is OS function CSS sprites are good for later on PC keyboard numpad Slow cpu and network Test it on a phone
- Resizing images is OS function CSS sprites are good for later on PC keyboard numpad Slow cpu and network Test it on a phone
- Resizing images is OS function CSS sprites are good for later on PC keyboard numpad Slow cpu and network Test it on a phone
- Resizing images is OS function CSS sprites are good for later on PC keyboard numpad Slow cpu and network Test it on a phone
- Resizing images is OS function CSS sprites are good for later on PC keyboard numpad Slow cpu and network Test it on a phone
- Resizing images is OS function CSS sprites are good for later on PC keyboard numpad Slow cpu and network Test it on a phone