Your SlideShare is downloading. ×
UX Design for Developers    Frank Garofalo & Jayson Ward       @fgarofalo   @defiantgoat                                  ...
Today’s menu •   UX Design •   Virtual Port – demo •   Code     -   JavaScript Architecture     -   Sample Code           ...
User Interface / User Experience Design                                      #devsummit #esriux #virtualport
Agile Development & UX •   HTML proof-of-concepts •   Rapid prototyping     1.   Build client-side (front-end)          el...
#devsummit #esriux #virtualport
DEMO       #devsummit #esriux #virtualport
#devsummit #esriux #virtualport
Design consistency                     #devsummit #esriux #virtualport
codeArcGIS API for JavaScriptDojo & jQuery                            #devsummit #esriux #virtualport
JavaScript Architecture                              Default.aspx                        ArcGIS API for JavaScript        ...
Playing together in the sandbox                                             Default.aspx<!-- jQuery & jQueryUI --><script ...
Playing together in the sandbox                                  main.js$(document).ready( function () {      // Once jQue...
Playing together in the sandbox                       dojo.jsdojo.require("esri.map");dojo.require("dijit.dijit");dojo.req...
Playing together in the sandbox// Create a custom object under the jQuery namespacejQuery.virtualport = {}; // declared wi...
…that’s a wrap •   UX Design •   Virtual Port – demo •   Code     -   JavaScript Architecture     -   Sample Code         ...
Special Thanks to… •   Port of Long Beach •   Project Team     -   Mourad Larif      -   Jayson Ward     -   Eric Apple   ...
UX Design forDevelopersFrank Garofalo             @fgarofaloJayson Ward              @defiantgoat#esriux #devsummit #virtu...
#devsummit #esriux #virtualport
Playing together in the sandboxfunction setRightPanelTabs() {      // Changed to "on" event listener      jQuery(".contain...
Playing together in the sandbox// setRightPanelTabActive [Local]function setRightPanelTabActive (parent_container, element...
Virtual Port: App Structure                              #devsummit #esriux #virtualport
Virtual Port: App Structure                              #devsummit #esriux #virtualport
Upcoming SlideShare
Loading in...5
×

UX Design for Developers

3,484

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

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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,484
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

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 of "UX Design for Developers"

    1. 1. UX Design for Developers Frank Garofalo & Jayson Ward @fgarofalo @defiantgoat #devsummit #esriux #virtualport
    2. 2. Today’s menu • UX Design • Virtual Port – demo • Code - JavaScript Architecture - Sample Code #devsummit #esriux #virtualport
    3. 3. User Interface / User Experience Design #devsummit #esriux #virtualport
    4. 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. 5. #devsummit #esriux #virtualport
    6. 6. DEMO #devsummit #esriux #virtualport
    7. 7. #devsummit #esriux #virtualport
    8. 8. Design consistency #devsummit #esriux #virtualport
    9. 9. codeArcGIS API for JavaScriptDojo & jQuery #devsummit #esriux #virtualport
    10. 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. 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. 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. 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. 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. 15. …that’s a wrap • UX Design • Virtual Port – demo • Code - JavaScript Architecture - Sample Code #devsummit #esriux #virtualport
    16. 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. 17. UX Design forDevelopersFrank Garofalo @fgarofaloJayson Ward @defiantgoat#esriux #devsummit #virtualportOffering ID # 383 Find us at the SpeedGeeking event! #devsummit #esriux #virtualport
    18. 18. #devsummit #esriux #virtualport
    19. 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. 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. 21. Virtual Port: App Structure #devsummit #esriux #virtualport
    22. 22. Virtual Port: App Structure #devsummit #esriux #virtualport

    ×