• Share
  • Email
  • Embed
  • Like
  • Private Content
Web Interface Essentials
 

Web Interface Essentials

on

  • 7,998 views

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 ...

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.

Statistics

Views

Total Views
7,998
Views on SlideShare
6,113
Embed Views
1,885

Actions

Likes
15
Downloads
353
Comments
1

8 Embeds 1,885

http://miageprojet2.unice.fr 1786
http://speakerrate.com 42
http://rubyrailsandwindows.blogspot.com 39
http://www.slideshare.net 10
http://rubyrailsandwindows.blogspot.com.au 3
http://rubyrailsandwindows.blogspot.com.br 3
http://rubyrailsandwindows.blogspot.in 1
http://rubyrailsandwindows.blogspot.no 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Marc, thank you very much for this useful presentation. I didn't know that jQuery can do such incredible things!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Interface Essentials Web Interface Essentials Presentation Transcript

    • 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 CSS Only? •When do I use a plugin? •How do I choose a plugin?
    • 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 .opacity-75 { opacity:0.75; -moz-opacity:0.75; filter:alpha(opacity=75); }
    • 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/
    • 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 for Google Maps.
    • 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 3) Attach gallery tabs and map.
    • 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").fadeIn();
    • Getting content via Ajax. $.get(url, function(response){ $("#property-view").replaceWith(response); $("#overlay").fadeIn(); });
    • 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 currentImg = gallery.find(".main-image img");
    • Switching images. $(".thumbs li").live("click",function(){ var gallery = $(this).parents("div.gallery"); var currentImg = gallery.find(".main-image img"); $("<img />").attr('src', ...).hide()
    • 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();
    • 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(){
    • 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(); }); });
    • 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)); } }
    • 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(); });
    • 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 .ui-widget-content
    • 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-state-hover
    • jQuery UI Class Quick Tip Add hover by grabing buttons with .ui-state-default and attach hover class. .ui-state-default .ui-state-hover
    • 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”); }) );
    • 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/
    • 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 ThemeRoller too!
    • 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 committed to support
    • 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/
    • 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 (events) $(...).plugin({ onSomeAction: function(){ // callback action }) });
    • Identify Good Plugin API Design Properties (options) $(...).plugin({ option1: value, option2: value }); Callbacks (events) $(...).plugin({ onSomeAction: function(){ // callback action }) }); Methods $(...).plugin(“destroy”);
    • 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 plugin based on feedback?
    • 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?
    • 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? •Depreciated features well-documented.
    • 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.
    • 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