Twiggy!
let’s get our widget on

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

Who are you?

Get this party started

Get this party started
• Valid HTML wrapper

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

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

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

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

HTML

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

jQuery in 2 minutes

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

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

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

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

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

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

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();

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!
}

jQuery plugins

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

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

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

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

Add your plugins

Add your plugins

Create panels

Create panels

Create panels

Create panels

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

Hiding things

Hiding things
• Use Javascript techniques

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

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

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

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();

Some Javascript

Some Javascript
• Set up functions for your stuff

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

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

CSS

CSS
• Normal CSS, CSS3 rules

CSS
• Normal CSS, CSS3 rules
• border-radius

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

XML config

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

Deploy / test

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

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

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

Boring!

Searching Twitter!

Searching Twitter!
• Plugins are awesome

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

Searching Twitter!
• Plugins are awesome
• tweet.seaofclouds.cm
• <label for=\"search\">
What are you looking for?
</label>

With a little bit of this

With a little bit of this

And a little bit of that

And a little bit of that

And the emulator...

And the emulator...
• Opera Widget Emulator

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

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

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

Hooray!

Some tips:

Some tips:
• Auto-focus input fields

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

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

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

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

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

Remember:

Remember:
• Don’t resize images with HTML

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

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

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

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

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”

Dear Betavine

Dear Betavine
• Documentation

Dear Betavine
• Documentation
• Bandwidth restrictions

Dear Betavine
• Documentation
• Bandwidth restrictions
• Resizing images

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

Question time!

I bet you thought
that was it

You now have
an iPhone web app

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

PhoneGap
iPhone app
(maybe)
And an Adobe AIR app

And an Adobe AIR app
And an Opera Widget

And an Opera Widget
and a dashboard widget

and a dashboard widget
And a website.

This is the most
important thing

and you’re kind of
doing it wrong

These are not widgets:
These are apps.

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

Thanks!

Thanks!
• elliott.kember@gmail.com

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

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