How do you decide when to use pure CSS, include jQuery or go as far as hacking the core of an existing jQuery plugin? User interface expert Marc Grabanski will tune your mind to approach building new interfaces by explaining some of the logical thinking and patterns behind how interfaces are developed at his company, MJG International.

1. Web Interface Essentials
by Marc Grabanski

3. When building web interfaces, we have
to make decisions on what to use, when.

4. When building web interfaces, we have
to make decisions on what to use, when.
•When do I use jQuery?
•When do I use CSS Only?
•When do I use a plugin?
•How do I choose a plugin?

5. Does this menu use jQuery?

6. Actually, it is pure CSS.

7. Actually, it is pure CSS.
ul ul { display: none; }
li:hover ul { display: block; }

8. Not everything needs jQuery.

9. Think of CSS, first.

10. In fact, think of HTML first.

11. How do you build this?

12. Start with the HTML markup.

13. HTML markup

14. HTML markup
<ul> list of rental properties
<table> of data
<ul> list of images
<div>s of content

16. Many of the difficult problems I
face in user interface development
are CSS related.

17. Many of the difficult problems I
face in user interface development
are CSS related.
Learn CSS as well as you can.

18. Places to Use CSS

19. Places to Use CSS
Title and address needs to expand.

20. Places to Use CSS
Title and address needs to expand.

21. Places to Use CSS
Title and address needs to expand.
Opacity indicates selected.

22. Places to Use CSS
Title and address needs to expand.
Opacity indicates selected.
Overlay with Shadow.

24. CSS repeating background
#mid-title { background:url(...) repeat-y; }

25. CSS repeating background
#mid-title { background:url(...) repeat-y; }
Pure CSS Opacity
.opacity-75 {
opacity:0.75;
-moz-opacity:0.75;
filter:alpha(opacity=75);
}

26. CSS repeating background
#mid-title { background:url(...) repeat-y; }
Pure CSS Opacity
.opacity-75 {
opacity:0.75;
-moz-opacity:0.75;
filter:alpha(opacity=75);
}
Shadows, 24 bit pngs, ddpngfix for IE6
http://www.dillerdesign.com/experiment/DD_belatedPNG/

27. Does this user interface need jQuery plugins?

28. Does this user interface need jQuery plugins?
No.

29. Does this user interface need jQuery plugins?
No.
Everything we need here is built into
jQuery Core, except for Google Maps.

30. JavaScript Pattern

31. JavaScript Pattern
1) Get content via Ajax.

32. JavaScript Pattern
1) Get content via Ajax.
2) Insert into div

33. JavaScript Pattern
1) Get content via Ajax.
2) Insert into div
3) Attach gallery
tabs and map.

35. Getting content via Ajax.
$.get(url, function(response){

36. Getting content via Ajax.
$.get(url, function(response){
$("#property-view").replaceWith(response);

37. Getting content via Ajax.
$.get(url, function(response){
$("#property-view").replaceWith(response);
$("#overlay").fadeIn();

38. Getting content via Ajax.
$.get(url, function(response){
$("#property-view").replaceWith(response);
$("#overlay").fadeIn();
});

40. jQuery live() method attaches
events that to a selector even after
the document is modified.

42. Switching images.
$(".thumbs li").live("click",function(){

43. Switching images.
$(".thumbs li").live("click",function(){
var gallery = $(this).parents("div.gallery");

44. Switching images.
$(".thumbs li").live("click",function(){
var gallery = $(this).parents("div.gallery");
var currentImg = gallery.find(".main-image img");

45. Switching images.
$(".thumbs li").live("click",function(){
var gallery = $(this).parents("div.gallery");
var currentImg = gallery.find(".main-image img");
$("<img />").attr('src', ...).hide()

46. Switching images.
$(".thumbs li").live("click",function(){
var gallery = $(this).parents("div.gallery");
var currentImg = gallery.find(".main-image img");
$("<img />").attr('src', ...).hide()
.appendTo(imageHolder).fadeIn();

47. Switching images.
$(".thumbs li").live("click",function(){
var gallery = $(this).parents("div.gallery");
var currentImg = gallery.find(".main-image img");
$("<img />").attr('src', ...).hide()
.appendTo(imageHolder).fadeIn();
currentImage.fadeOut(function(){

48. Switching images.
$(".thumbs li").live("click",function(){
var gallery = $(this).parents("div.gallery");
var currentImg = gallery.find(".main-image img");
$("<img />").attr('src', ...).hide()
.appendTo(imageHolder).fadeIn();
currentImage.fadeOut(function(){
$(this).remove();
});
});

50. Interactive map function renderMap(el, lat, lng) {
if (GBrowserIsCompatible()) {
var map = new GMap2(el);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(lat, lng), 13);
var point = new GLatLng(lat, lng);
var baseIcon = new GIcon();
baseIcon.image = base+"/img/icons/map-pin.png";
baseIcon.shadow = base+"/img/icons/map-pin-shadow.png";
baseIcon.iconSize = new GSize(41, 34);
baseIcon.shadowSize = new GSize(41, 34);
baseIcon.iconAnchor = new GPoint(15, 32);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
map.addOverlay(new GMarker(point, baseIcon));
}
}

51. Interactive map function renderMap(el, lat, lng) {
if (GBrowserIsCompatible()) {
var map = new GMap2(el);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(lat, lng), 13);
var point = new GLatLng(lat, lng);
var baseIcon = new GIcon();
baseIcon.image = base+"/img/icons/map-pin.png";
baseIcon.shadow = base+"/img/icons/map-pin-shadow.png";
baseIcon.iconSize = new GSize(41, 34);
baseIcon.shadowSize = new GSize(41, 34);
baseIcon.iconAnchor = new GPoint(15, 32);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
map.addOverlay(new GMarker(point, baseIcon));
}
}
and tabs.
$("#unit-types").live('click', function(){
$(this).addClass('active');
$("#map-description").removeClass('active')
.next().hide();
$(this).next().fadeIn();
});

53. jQuery core and CSS are great for
adding spices to websites, but
what about more complex
administration panels?

54. jQuery UI woo!!

55. jQuery UI woo!!

56. AND
jQuery UI CSS framework

57. What you see here was done with
jQuery UI’s CSS Framework.

58. Create Your Theme with ThemeRoller

59. Choose your UI components and download.

60. jQuery UI Classes

61. jQuery UI Classes
.ui-state-active

62. jQuery UI Classes
.ui-state-active
.ui-state-default

63. jQuery UI Classes
.ui-state-active
.ui-state-default
.ui-widget-header

64. jQuery UI Classes
.ui-state-active
.ui-state-default
.ui-widget-header
.ui-widget-content

65. jQuery UI Class Quick Tip
Add hover by grabing buttons with
.ui-state-default and attach hover class.
.ui-state-default

66. jQuery UI Class Quick Tip
Add hover by grabing buttons with
.ui-state-default and attach hover class.
.ui-state-hover

67. jQuery UI Class Quick Tip
Add hover by grabing buttons with
.ui-state-default and attach hover class.
.ui-state-default .ui-state-hover

68. jQuery UI Class Quick Tip
Add hover by grabing buttons with
.ui-state-default and attach hover class.
.ui-state-default .ui-state-hover
$(“.ui-state-default”).hover(
function(){ $(this).addClass(“ui-state-hover”); }),
function(){ $(this).removeClass(“ui-state-hover”); })
);

69. jQuery UI Class Quick Tip
Add hover by grabing buttons with
.ui-state-default and attach hover class.
.ui-state-default .ui-state-hover
$(“.ui-state-default”).hover(
function(){ $(this).addClass(“ui-state-hover”); }),
function(){ $(this).removeClass(“ui-state-hover”); })
);
More info:
http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/

70. Simple add rounded corners.

71. Simple add rounded corners.
.ui-corner-all

72. jQuery UI in Practice

74. UI Datepicker

75. UI Datepicker
UI Sortable

76. UI Datepicker
UI Sortable
UI Tabs

77. UI Datepicker
UI Sortable
UI Tabs
UI Dialog

78. What about Plugins?

80. JS Tree
http://www.jstree.com/

81. JS Tree
http://www.jstree.com/
WYM Editor
http://www.wymeditor.org/

82. Other useful plugins..

83. jQGrid
Demo: http://trirand.com/jqgrid/jqgrid.html
Download: http://www.trirand.com/blog/?page_id=6
Works with ThemeRoller too!

84. jGrowl (popup notifications)
http://stanlemon.net/projects/jgrowl.html

85. Flot (charts)
http://people.iola.dk/olau/flot/examples/graph-types.html

86. Input Masks
http://digitalbush.com/projects/masked-input-plugin/

87. Auto Complete
http://bassistance.de/jquery-plugins
/jquery-plugin-autocomplete/

88. jQuery Tooltip
http://bassistance.de/jquery-plugins/
jquery-plugin-tooltip/

89. Plugin Checklist

90. Plugin Checklist
•API is like jQuery core

91. Plugin Checklist
•API is like jQuery core
•Buzz / mentions in blogs

92. Plugin Checklist
•API is like jQuery core
•Buzz / mentions in blogs
•Documentation

93. Plugin Checklist
•API is like jQuery core
•Buzz / mentions in blogs
•Documentation
•CSS makes sense to you

94. Plugin Checklist
•API is like jQuery core
•Buzz / mentions in blogs
•Documentation
•CSS makes sense to you
•Author is committed to support

95. Plugin Checklist
•API is like jQuery core
•Buzz / mentions in blogs
•Documentation
•CSS makes sense to you
•Author is committed to support
•or.. Jörn made it http://bassistance.de/

96. Identify Good Plugin API Design

97. Identify Good Plugin API Design
Properties (options)
$(...).plugin({ option1: value, option2: value });

98. Identify Good Plugin API Design
Properties (options)
$(...).plugin({ option1: value, option2: value });
Callbacks (events)
$(...).plugin({
onSomeAction: function(){
// callback action
})
});

99. Identify Good Plugin API Design
Properties (options)
$(...).plugin({ option1: value, option2: value });
Callbacks (events)
$(...).plugin({
onSomeAction: function(){
// callback action
})
});
Methods
$(...).plugin(“destroy”);

100. Identifying Good Plugin Support

101. Identifying Good Plugin Support
•Google Groups, mailing lists

102. Identifying Good Plugin Support
•Google Groups, mailing lists
•Comments are ok when plugin is new

103. Identifying Good Plugin Support
•Google Groups, mailing lists
•Comments are ok when plugin is new
•Does author modify plugin based on feedback?

104. Identifying Good Plugin Support
•Google Groups, mailing lists
•Comments are ok when plugin is new
•Does author modify plugin based on feedback?
•Code repository, when was last commit?

105. Identifying Good Plugin Community

106. Identifying Good Plugin Community
•Buzz - Plugin Lists, Ajaxian, etc

107. Identifying Good Plugin Community
•Buzz - Plugin Lists, Ajaxian, etc
•Does the author make update announcements?

108. Identifying Good Plugin Community
•Buzz - Plugin Lists, Ajaxian, etc
•Does the author make update announcements?
•Depreciated features well-documented.

109. Identifying Good Plugin Community
•Buzz - Plugin Lists, Ajaxian, etc
•Does the author make update announcements?
•Depreciated features well-documented.
Identify that the author is communicating.

110. Questions?
Marc Grabanski:
http://marcgrabanski.com
User interface and web application
development.
Examples: http://mjgin.com/work.html
Twitter: http://twitter.com/1Marc
Email: m@marcgrabanski.com