Your SlideShare is downloading. ×
Twiggy - let's get our widget on!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Twiggy - let's get our widget on!

1,174
views

Published on

Published in: Technology, Design

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,174
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
41
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide




  • 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










































  • Transcript

    • 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!
    • 68. Some tips:
    • 69. Some tips: • Auto-focus input fields
    • 70. Some tips: • Auto-focus input fields • Hover effects are important.
    • 71. Some tips: • Auto-focus input fields • Hover effects are important. • Test the phone with your typeface
    • 72. Some tips: • Auto-focus input fields • Hover effects are important. • Test the phone with your typeface • Make hit areas small!
    • 73. Small? The mouse cursor snaps to the edges of the action bounding box
    • 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. Remember:
    • 76. Remember: • Don’t resize images with HTML
    • 77. Remember: • Don’t resize images with HTML • use CSS sprites
    • 78. Remember: • Don’t resize images with HTML • use CSS sprites • Phone keyboard is upside-down
    • 79. Remember: • Don’t resize images with HTML • use CSS sprites • Phone keyboard is upside-down • It’s going to be slow
    • 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. 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. Dear Betavine
    • 83. Dear Betavine • Documentation
    • 84. Dear Betavine • Documentation • Bandwidth restrictions
    • 85. Dear Betavine • Documentation • Bandwidth restrictions • Resizing images
    • 86. Dear Betavine • Documentation • Bandwidth restrictions • Resizing images • Publicity
    • 87. Question time!
    • 88. I bet you thought that was it
    • 89. You now have an iPhone web app
    • 90. You now have an iPhone web app And a PhoneGap iPhone app (maybe)
    • 91. PhoneGap iPhone app (maybe) And an Adobe AIR app
    • 92. And an Adobe AIR app And an Opera Widget
    • 93. And an Opera Widget and a dashboard widget
    • 94. and a dashboard widget And a website.
    • 95. This is the most important thing
    • 96. and you’re kind of doing it wrong
    • 97. These are not widgets: These are apps.
    • 98. You’re on our turf, and we want to help.
    • 99. Thanks!
    • 100. Thanks! • elliott.kember@gmail.com
    • 101. Thanks! • elliott.kember@gmail.com • twitter: @elliottkember
    • 102. Thanks! • elliott.kember@gmail.com • twitter: @elliottkember • www.elliottkember.com