• Save
UX Design for Developers
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

UX Design for Developers

on

  • 3,397 views

Presented by Jayson Ward and Frank Garofalo as a Demo Theater at the Esri DevSummit 2013. Presenting Virtual Port, a web-based application for the Port of Long Beach, built using ArcGIS API for ...

Presented by Jayson Ward and Frank Garofalo as a Demo Theater at the Esri DevSummit 2013. Presenting Virtual Port, a web-based application for the Port of Long Beach, built using ArcGIS API for Javascript.

Selected code snippets: https://github.com/fgarofalo10/jquery-dojo-sandbox

Statistics

Views

Total Views
3,397
Views on SlideShare
2,423
Embed Views
974

Actions

Likes
2
Downloads
0
Comments
0

10 Embeds 974

http://blog.frankgarofalo.com 931
http://multiusermultitouch.com 11
http://www.multiusermultitouch.com 11
https://twitter.com 8
http://uxmoxie.com 4
http://uxhooligan.com 4
http://uxhooligans.com 2
http://www.uxhooligans.com 1
http://translate.googleusercontent.com 1
http://www.uxhooligan.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Rapid Design – From whiteboard sketches from a brainstorm session to fully rendered design comps within a few days.Goals:Application should be flexible / responsive so that it would work across multiple devices.Buttons and actions should take cues from mobile devices and tablets since users are becoming more accustomed to those types of user interactions.Large buttons – Easy to use with touch or mousePanels slide in and out Reviewed by client and then rapidly moved to build an html prototype.
  • Re-used elements:AccordionsTabsButtonsDialogs / ModalsTouch-friendly

UX Design for Developers Presentation Transcript

  • 1. UX Design for Developers Frank Garofalo & Jayson Ward @fgarofalo @defiantgoat #devsummit #esriux #virtualport
  • 2. Today’s menu • UX Design • Virtual Port – demo • Code - JavaScript Architecture - Sample Code #devsummit #esriux #virtualport
  • 3. User Interface / User Experience Design #devsummit #esriux #virtualport
  • 4. Agile Development & UX • HTML proof-of-concepts • Rapid prototyping 1. Build client-side (front-end) elements 2. Validate with client 3. Then wire-up the server-side (back-end) components #devsummit #esriux #virtualport
  • 5. #devsummit #esriux #virtualport
  • 6. DEMO #devsummit #esriux #virtualport
  • 7. #devsummit #esriux #virtualport
  • 8. Design consistency #devsummit #esriux #virtualport
  • 9. codeArcGIS API for JavaScriptDojo & jQuery #devsummit #esriux #virtualport
  • 10. JavaScript Architecture Default.aspx ArcGIS API for JavaScript main.js dojo.js module_advanced.js module_news.js module_reports.js module_infofeeds.js module_notifications.js module_vessels.js module_mjob.js module_resources.js module_videos.js #devsummit #esriux #virtualport
  • 11. Playing together in the sandbox Default.aspx<!-- jQuery & jQueryUI --><script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js“ type="text/javascript"></script><script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.1/jquery-ui.min.js“ type="text/javascript"> </script><!-- ArcGIS JavaScript API --><script type="text/javascript">var djConfig = { parseOnLoad: true };</script><script src="//serverapi.arcgisonline.com/jsapi/arcgis/?v=3.3" type="text/javascript" ></script><script src="scripts/dojo.js" type="text/javascript" ></script><script src="scripts/main.js" type="text/javascript" ></script> #devsummit #esriux #virtualport
  • 12. Playing together in the sandbox main.js$(document).ready( function () { // Once jQuery and Dojo are ready. Start code. // Initialize DoJo Functions dojo.addOnLoad(initDojo); // Initialize jQuery Functions initJQuery_mainfunctions(); function initJQuery_mainfunctions() { //dostuff }}); #devsummit #esriux #virtualport
  • 13. Playing together in the sandbox dojo.jsdojo.require("esri.map");dojo.require("dijit.dijit");dojo.require("esri.arcgis.utils");var mapObj;function initDojo() { mapObj = new esri.Map("mapDiv", { basemap: "gray", center: geoCenter, displayGraphicsOnPan: false, fadeOnZoom: true });} #devsummit #esriux #virtualport
  • 14. Playing together in the sandbox// Create a custom object under the jQuery namespacejQuery.virtualport = {}; // declared within main.js// namespace global variablesjQuery.virtualport.mapObj = mapObj;// namespace functionsfunction setRightPanelSwitch (in_element, in_direction) { // do stuff}jQuery.virtualport.setRightPanelSwitch = function (in_element, in_direction) { setRightPanelSwitch (in_element, in_direction); // calls local function} #devsummit #esriux #virtualport
  • 15. …that’s a wrap • UX Design • Virtual Port – demo • Code - JavaScript Architecture - Sample Code #devsummit #esriux #virtualport
  • 16. Special Thanks to… • Port of Long Beach • Project Team - Mourad Larif - Jayson Ward - Eric Apple - Frank Garofalo - Ed Carubis - Xiaomeng Zheng - Brenda Ibold - Mike Nelson - Selim Dissem - Ross Wakefield - Tanuka Bhowmick #devsummit #esriux #virtualport
  • 17. UX Design forDevelopersFrank Garofalo @fgarofaloJayson Ward @defiantgoat#esriux #devsummit #virtualportOffering ID # 383 Find us at the SpeedGeeking event! #devsummit #esriux #virtualport
  • 18. #devsummit #esriux #virtualport
  • 19. Playing together in the sandboxfunction setRightPanelTabs() { // Changed to "on" event listener jQuery(".container_right_panel").on({ click: function (e) { var elem_tab_header = jQuery(this); var elem_tab_container = elem_tab_header.parent().parent().attr("id"); var elem_tab_header_id = elem_tab_header.attr("id");setRightPanelTabActive(elem_tab_container, elem_tab_header_id); // local function e.preventDefault(); } }, ".tab.tab_header"); } #devsummit #esriux #virtualport
  • 20. Playing together in the sandbox// setRightPanelTabActive [Local]function setRightPanelTabActive (parent_container, element) { var elems_tab_headers = jQuery("#" + parent_container + " .tab.tab_header"); var elems_tab_contents = jQuery("#" + parent_container + " .tab.tab_content"); var elem_tab_content = jQuery("#" + parent_container + " .tab.tab_content." +element); // Tab Headers elems_tab_headers.removeClass("active"); jQuery("#" + element).addClass("active"); // Tab Contents elems_tab_contents.removeClass("active"); elem_tab_content.addClass("active");} #devsummit #esriux #virtualport
  • 21. Virtual Port: App Structure #devsummit #esriux #virtualport
  • 22. Virtual Port: App Structure #devsummit #esriux #virtualport