0
Web Interface Essentials
           by Marc Grabanski
When building web interfaces, we have
to make decisions on what to use, when.
When building web interfaces, we have
to make decisions on what to use, when.

  •When do I use jQuery?
  •When do I use C...
Does this menu use jQuery?
Actually, it is pure CSS.
Actually, it is pure CSS.




ul ul { display: none; }
li:hover ul { display: block; }
Not everything needs jQuery.
Think of CSS, first.
In fact, think of HTML first.
How do you build this?
Start with the HTML markup.
HTML markup
HTML markup




<ul> list of rental properties
<table> of data
<ul> list of images
<div>s of content
Many of the difficult problems I
face in user interface development
are CSS related.
Many of the difficult problems I
face in user interface development
are CSS related.


   Learn CSS as well as you can.
Places to Use CSS
Places to Use CSS
Title and address needs to expand.
Places to Use CSS
Title and address needs to expand.
Places to Use CSS
Title and address needs to expand.




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




                Opacity indicates selected.


Overlay with Shadow.
CSS repeating background



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



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


                              Pure CSS Opacity
...
CSS repeating background



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


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




  No.
Does this user interface need jQuery plugins?




  No.




  Everything we need here is built into
  jQuery Core, except ...
JavaScript Pattern
JavaScript Pattern



           1) Get content via Ajax.
JavaScript Pattern



           1) Get content via Ajax.

                        2) Insert into div
JavaScript Pattern



           1) Get content via Ajax.

                        2) Insert into div


                  ...
Getting content via Ajax.




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




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




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




$.get(url, function(response){
    $("#property-view").replaceWith(response);
    $("#overla...
jQuery live() method attaches
events that to a selector even after
the document is modified.
Switching images.




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




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




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




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




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




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




$(".thumbs li").live("click",function(){
  var gallery = $(this).parents("div.gallery");
  var curre...
Interactive map   function renderMap(el, lat, lng) {
                        if (GBrowserIsCompatible()) {
               ...
Interactive map      function renderMap(el, lat, lng) {
                           if (GBrowserIsCompatible()) {
         ...
jQuery core and CSS are great for
adding spices to websites, but
what about more complex
administration panels?
jQuery UI woo!!
jQuery UI woo!!
AND
jQuery UI CSS framework
What you see here was done with
 jQuery UI’s CSS Framework.
Create Your Theme with ThemeRoller
Choose your UI components and download.
jQuery UI Classes
jQuery UI Classes
.ui-state-active
jQuery UI Classes
.ui-state-active
             .ui-state-default
jQuery UI Classes
.ui-state-active
             .ui-state-default
                                 .ui-widget-header
jQuery UI Classes
.ui-state-active
             .ui-state-default
                                 .ui-widget-header


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

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

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

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

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

         ...
Simple add rounded corners.
Simple add rounded corners.

      .ui-corner-all
jQuery UI in Practice
UI Datepicker
UI Datepicker



                UI Sortable
UI Datepicker



                  UI Sortable

        UI Tabs
UI Datepicker



                     UI Sortable

        UI Tabs

         UI Dialog
What about Plugins?
JS Tree
http://www.jstree.com/
JS Tree
http://www.jstree.com/




 WYM Editor
 http://www.wymeditor.org/
Other useful plugins..
jQGrid
Demo: http://trirand.com/jqgrid/jqgrid.html
Download: http://www.trirand.com/blog/?page_id=6




Works with ThemeRo...
jGrowl (popup notifications)
http://stanlemon.net/projects/jgrowl.html
Flot (charts)
http://people.iola.dk/olau/flot/examples/graph-types.html
Input Masks
http://digitalbush.com/projects/masked-input-plugin/
Auto Complete
http://bassistance.de/jquery-plugins
/jquery-plugin-autocomplete/
jQuery Tooltip
http://bassistance.de/jquery-plugins/
jquery-plugin-tooltip/
Plugin Checklist
Plugin Checklist

•API is like jQuery core
Plugin Checklist

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

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

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

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

•API is like jQuery core
•Buzz / mentions in blogs
•Documentation
•CSS makes sense to you
•Author is com...
Identify Good Plugin API Design
Identify Good Plugin API Design

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

Properties (options)
 $(...).plugin({ option1: value, option2: value });

Callbacks (even...
Identify Good Plugin API Design

Properties (options)
 $(...).plugin({ option1: value, option2: value });

Callbacks (even...
Identifying Good Plugin Support
Identifying Good Plugin Support

•Google Groups, mailing lists
Identifying Good Plugin Support

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

•Google Groups, mailing lists
•Comments are ok when plugin is new
•Does author modify plu...
Identifying Good Plugin Support

•Google Groups, mailing lists
•Comments are ok when plugin is new
•Does author modify plu...
Identifying Good Plugin Community
Identifying Good Plugin Community


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


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


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


•Buzz - Plugin Lists, Ajaxian, etc
•Does the author make update announcements?
•Deprec...
Questions?

Marc Grabanski:
http://marcgrabanski.com

User interface and web application
development.
Examples: http://mjg...
Web Interface Essentials
Web Interface Essentials
Web Interface Essentials
Web Interface Essentials
Web Interface Essentials
Web Interface Essentials
Web Interface Essentials
Web Interface Essentials
Web Interface Essentials
Web Interface Essentials
Upcoming SlideShare
Loading in...5
×

Web Interface Essentials

6,694

Published on

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.

Published in: Technology
1 Comment
16 Likes
Statistics
Notes
  • Marc, thank you very much for this useful presentation. I didn't know that jQuery can do such incredible things!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,694
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
360
Comments
1
Likes
16
Embeds 0
No embeds

No notes for slide

Transcript of "Web Interface Essentials"

  1. 1. Web Interface Essentials by Marc Grabanski
  2. 2. When building web interfaces, we have to make decisions on what to use, when.
  3. 3. 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?
  4. 4. Does this menu use jQuery?
  5. 5. Actually, it is pure CSS.
  6. 6. Actually, it is pure CSS. ul ul { display: none; } li:hover ul { display: block; }
  7. 7. Not everything needs jQuery.
  8. 8. Think of CSS, first.
  9. 9. In fact, think of HTML first.
  10. 10. How do you build this?
  11. 11. Start with the HTML markup.
  12. 12. HTML markup
  13. 13. HTML markup <ul> list of rental properties <table> of data <ul> list of images <div>s of content
  14. 14. Many of the difficult problems I face in user interface development are CSS related.
  15. 15. Many of the difficult problems I face in user interface development are CSS related. Learn CSS as well as you can.
  16. 16. Places to Use CSS
  17. 17. Places to Use CSS Title and address needs to expand.
  18. 18. Places to Use CSS Title and address needs to expand.
  19. 19. Places to Use CSS Title and address needs to expand. Opacity indicates selected.
  20. 20. Places to Use CSS Title and address needs to expand. Opacity indicates selected. Overlay with Shadow.
  21. 21. CSS repeating background #mid-title { background:url(...) repeat-y; }
  22. 22. 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); }
  23. 23. 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/
  24. 24. Does this user interface need jQuery plugins?
  25. 25. Does this user interface need jQuery plugins? No.
  26. 26. Does this user interface need jQuery plugins? No. Everything we need here is built into jQuery Core, except for Google Maps.
  27. 27. JavaScript Pattern
  28. 28. JavaScript Pattern 1) Get content via Ajax.
  29. 29. JavaScript Pattern 1) Get content via Ajax. 2) Insert into div
  30. 30. JavaScript Pattern 1) Get content via Ajax. 2) Insert into div 3) Attach gallery tabs and map.
  31. 31. Getting content via Ajax. $.get(url, function(response){
  32. 32. Getting content via Ajax. $.get(url, function(response){ $("#property-view").replaceWith(response);
  33. 33. Getting content via Ajax. $.get(url, function(response){ $("#property-view").replaceWith(response); $("#overlay").fadeIn();
  34. 34. Getting content via Ajax. $.get(url, function(response){ $("#property-view").replaceWith(response); $("#overlay").fadeIn(); });
  35. 35. jQuery live() method attaches events that to a selector even after the document is modified.
  36. 36. Switching images. $(".thumbs li").live("click",function(){
  37. 37. Switching images. $(".thumbs li").live("click",function(){ var gallery = $(this).parents("div.gallery");
  38. 38. Switching images. $(".thumbs li").live("click",function(){ var gallery = $(this).parents("div.gallery"); var currentImg = gallery.find(".main-image img");
  39. 39. Switching images. $(".thumbs li").live("click",function(){ var gallery = $(this).parents("div.gallery"); var currentImg = gallery.find(".main-image img"); $("<img />").attr('src', ...).hide()
  40. 40. 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();
  41. 41. 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(){
  42. 42. 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(); }); });
  43. 43. 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)); } }
  44. 44. 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(); });
  45. 45. jQuery core and CSS are great for adding spices to websites, but what about more complex administration panels?
  46. 46. jQuery UI woo!!
  47. 47. jQuery UI woo!!
  48. 48. AND jQuery UI CSS framework
  49. 49. What you see here was done with jQuery UI’s CSS Framework.
  50. 50. Create Your Theme with ThemeRoller
  51. 51. Choose your UI components and download.
  52. 52. jQuery UI Classes
  53. 53. jQuery UI Classes .ui-state-active
  54. 54. jQuery UI Classes .ui-state-active .ui-state-default
  55. 55. jQuery UI Classes .ui-state-active .ui-state-default .ui-widget-header
  56. 56. jQuery UI Classes .ui-state-active .ui-state-default .ui-widget-header .ui-widget-content
  57. 57. jQuery UI Class Quick Tip Add hover by grabing buttons with .ui-state-default and attach hover class. .ui-state-default
  58. 58. jQuery UI Class Quick Tip Add hover by grabing buttons with .ui-state-default and attach hover class. .ui-state-hover
  59. 59. jQuery UI Class Quick Tip Add hover by grabing buttons with .ui-state-default and attach hover class. .ui-state-default .ui-state-hover
  60. 60. 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”); }) );
  61. 61. 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/
  62. 62. Simple add rounded corners.
  63. 63. Simple add rounded corners. .ui-corner-all
  64. 64. jQuery UI in Practice
  65. 65. UI Datepicker
  66. 66. UI Datepicker UI Sortable
  67. 67. UI Datepicker UI Sortable UI Tabs
  68. 68. UI Datepicker UI Sortable UI Tabs UI Dialog
  69. 69. What about Plugins?
  70. 70. JS Tree http://www.jstree.com/
  71. 71. JS Tree http://www.jstree.com/ WYM Editor http://www.wymeditor.org/
  72. 72. Other useful plugins..
  73. 73. jQGrid Demo: http://trirand.com/jqgrid/jqgrid.html Download: http://www.trirand.com/blog/?page_id=6 Works with ThemeRoller too!
  74. 74. jGrowl (popup notifications) http://stanlemon.net/projects/jgrowl.html
  75. 75. Flot (charts) http://people.iola.dk/olau/flot/examples/graph-types.html
  76. 76. Input Masks http://digitalbush.com/projects/masked-input-plugin/
  77. 77. Auto Complete http://bassistance.de/jquery-plugins /jquery-plugin-autocomplete/
  78. 78. jQuery Tooltip http://bassistance.de/jquery-plugins/ jquery-plugin-tooltip/
  79. 79. Plugin Checklist
  80. 80. Plugin Checklist •API is like jQuery core
  81. 81. Plugin Checklist •API is like jQuery core •Buzz / mentions in blogs
  82. 82. Plugin Checklist •API is like jQuery core •Buzz / mentions in blogs •Documentation
  83. 83. Plugin Checklist •API is like jQuery core •Buzz / mentions in blogs •Documentation •CSS makes sense to you
  84. 84. Plugin Checklist •API is like jQuery core •Buzz / mentions in blogs •Documentation •CSS makes sense to you •Author is committed to support
  85. 85. 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/
  86. 86. Identify Good Plugin API Design
  87. 87. Identify Good Plugin API Design Properties (options) $(...).plugin({ option1: value, option2: value });
  88. 88. Identify Good Plugin API Design Properties (options) $(...).plugin({ option1: value, option2: value }); Callbacks (events) $(...).plugin({ onSomeAction: function(){ // callback action }) });
  89. 89. Identify Good Plugin API Design Properties (options) $(...).plugin({ option1: value, option2: value }); Callbacks (events) $(...).plugin({ onSomeAction: function(){ // callback action }) }); Methods $(...).plugin(“destroy”);
  90. 90. Identifying Good Plugin Support
  91. 91. Identifying Good Plugin Support •Google Groups, mailing lists
  92. 92. Identifying Good Plugin Support •Google Groups, mailing lists •Comments are ok when plugin is new
  93. 93. Identifying Good Plugin Support •Google Groups, mailing lists •Comments are ok when plugin is new •Does author modify plugin based on feedback?
  94. 94. 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?
  95. 95. Identifying Good Plugin Community
  96. 96. Identifying Good Plugin Community •Buzz - Plugin Lists, Ajaxian, etc
  97. 97. Identifying Good Plugin Community •Buzz - Plugin Lists, Ajaxian, etc •Does the author make update announcements?
  98. 98. Identifying Good Plugin Community •Buzz - Plugin Lists, Ajaxian, etc •Does the author make update announcements? •Depreciated features well-documented.
  99. 99. 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.
  100. 100. 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
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×