Twiggy - let's get our widget on!

1,420 views

Published on

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,420
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
42
Comments
0
Likes
3
Embeds 0
No embeds

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










































  • 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

    ×