UX Design for Developers

  • 2,981 views
Uploaded on

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,981
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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

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