SlideShare uma empresa Scribd logo
1 de 105
Baixar para ler offline
Mobile Development with
              uPortal & Infusion


 Jen Bourey, Genius Portal Developer, Unicon
 Justin Obara, Fluid Infusion Product Manager, Adaptive Technology Resource Centre
 Colin Clark, Fluid Project Technical Lead, Adaptive Technology Resource Centre
Tuesday, March 16, 2010
Who is Fluid?
                           http://fluidproject.org

          • Is an Open Source community of
           • Designers
           • Developers
           • Accessibility Experts
          • Helps other open communities
          • Consists of universities, museums, and individuals
Tuesday, March 16, 2010
What is Fluid Infusion?

               • Application Framework built on top of jQuery
               • Lightweight CSS Framework (FSS)
               • UI Components you can reuse and adapt
               • Open architecture: everything is configurable
               • Designed for Usability and Accessibility

Tuesday, March 16, 2010
Going Mobile




Tuesday, March 16, 2010
Big Question:

                          What platforms should we support?




Tuesday, March 16, 2010
Everything?




Tuesday, March 16, 2010
Everything?
            Objective-C         Java        C++




           Cocoa Touch       Android SDK   Carbide

Tuesday, March 16, 2010
Only One?




Tuesday, March 16, 2010
Only One?




Tuesday, March 16, 2010
Mobile: Embrace the Web

                • Phones now have great browsers built in
                • Web design is ubiquitous and familiar
                • Use standard HTML, CSS, and JavaScript
                • Blends seamless into existing sites
                • Thin nativefeatures (camera, bluetooth)
                  interactive
                              apps provide access to


Tuesday, March 16, 2010
Mobile Web apps
                               HTML, CSS, JS




                                  Browser




Tuesday, March 16, 2010
The Open Web Today
                • Multi-touch gestures
                • Audio and video
                • Vector graphics and animation
                • Great accessibility
                • All work on mobile today!
                • Stable and deeply interoperable
                • Everyone knows it
Tuesday, March 16, 2010
A Growing Approach




                              Google Latitude
Tuesday, March 16, 2010
Mobile Web Pain Points


                    • Sparse documentation
                    • Few successful Open Source examples
                    • Existing frameworks have limitations


Tuesday, March 16, 2010
Sparse Documentation




Tuesday, March 16, 2010
Existing Frameworks
               jQTouch iUI WebApp.Net Magic Framework


                    • Reusability of content?
                    • JavaScript Footprint?
                    • Flexibility of themes?

Tuesday, March 16, 2010
Hybrid Apps

                • Most platforms have support for
                  embedding browsers in native apps
                • Can render user interfaces with HTML
                • Write all your code in JavaScript
                • Access native hardware with a bridge
Tuesday, March 16, 2010
PhoneGap




Tuesday, March 16, 2010
Tuesday, March 16, 2010
Migrating to Mobile

                    • Great mobile apps are carefully designed
                    • The transition to mobile takes time
                    • Incremental: reuse as much as possible
                    • Re-skin, re-style, and adapt existing UIs

Tuesday, March 16, 2010
How Infusion Can Help


                    • Loose coupling DOM Agnosticism
                    • Unobtrusive and template-driven
                    • Fast and flexible styling with FSS


Tuesday, March 16, 2010
DOM Agnosticism


                          Component code is maximally unaware
                          of the details of the markup layout that it
                          operates on.




Tuesday, March 16, 2010
DOM Binder


             Relaxes the relationship between code and markup




Tuesday, March 16, 2010
DOM Binder

                    • Uses named selectors
                     • Explicit selectors never appear in code
                     • Code is free of baked dependences on
                            markup
                    • Attached to a component with call to
                          fluid.initView


Tuesday, March 16, 2010
DOM Binder
         configuration
       fluid.defaults(“fliquor.imageViewer”, {
           selectors: {
              searchButton: “.flc-fliquor-searchButton”,
              searchBox: “.flc-fliquor-search”,
              template: “.flc-fliquor-template”,
              images: “.flc-fliquor-images”,
           }
       });
                                              usage
                                             that.locate(“searchBox”).fluid(“activatable”, that.search);

                                             that.locate(“searchButton”).click(function (evt) {
                                                 that.search();
                                                 return false;
                                             });

Tuesday, March 16, 2010
Unobtrusive Templates


            • Components render using pure HTML templates
            • Code shouldn’t break if the markup changes
            • Code is not in markup, markup is not in code


Tuesday, March 16, 2010
HTML Template
 <body class="flc-fliquor fl-theme-coal">
   <div class="fl-centered fl-navbar fl-table search-bar">
     ...
     <div class="fl-centered results">
       <ol class="flc-fliquor-images fl-list-menu fl-list-thumbnails fl-thumbnails-expanded">
         <li class="flc-fliquor-template">
            <a href="#">
              <span class="wrapper">
                 <span class="flc-fliquor-item-title fl-fliquor-item-title">Title</span>
                 <img title="Title" alt="Alt" src="#" class="fl-icon" />
              </span>
            </a>
         </li>
       </ol>
     </div>
     ...
 </body>




Tuesday, March 16, 2010
Infusion Templates

                    • Fully customizable
                    • As semantic as possible
                    • Advanced accessibility added via JavaScript
                    • Presentation class names separated from
                          Javascript selector names



Tuesday, March 16, 2010
Rapid CSS using FSS

                     •    Modular, extensible class-name CSS system

                     •    Easy to read class names

                     •    Plays nice with other CSS systems (jQuery themes,
                          other frameworks, etc)

                     •    Modularity means it’s meant for you to hack

                     •    Lots of support, fully cross browser



Tuesday, March 16, 2010
FSS Applied
     Reset

     normalize the little things
     for a consistent starting
     point




Tuesday, March 16, 2010
FSS Applied
  Layout

  placement & containers




Tuesday, March 16, 2010
FSS Applied
     Themes

     style, colors and
     graphics




Tuesday, March 16, 2010
Mobile FSS

                    • Highly focused on target platforms
                    • Follows basic touchscreen UI guidelines from
                          Apple and Android dev centres
                    • Repurposes FSS class names, enabling multi-
                          platform content



Tuesday, March 16, 2010
Mobile FSS Applied
                           .fl-theme-coal       .fl-theme-iphone




                                           =


Tuesday, March 16, 2010
Make it your own
               .fl-theme-myTheme




Tuesday, March 16, 2010
Case Study: Fluid Engage




Tuesday, March 16, 2010
Fluid Engage

                • Open source collaboration with museums
                • Visitor engagement: learn and contribute
                • Use phones visitors bring into the museum
                • Mobile apps and in-gallery kiosks
                • All built with open source Web technology
Tuesday, March 16, 2010
Our Mobile Approach


                      • No hard intrusions on your content
                      • Don’t subvert good Web idioms
                      • Your choice: native-like or webbish


Tuesday, March 16, 2010
Infusion Mobile


                • mFSS: themes for iPhone, Android, more
                • Components designed for the mobile Web
                • ScreenNavigator: unobtrusive mobile navigation


Tuesday, March 16, 2010
Museum Components

            • Image Gallery
            • Podcasts and video
            • My Museum/My Collection
            • Comments, Discussion, Stories
            • Collection Browse and Search
            • Tagging?
Tuesday, March 16, 2010
Engage’s Architecture


            • Simple, lightweight, and approachable
            • JSON data feeds everywhere
            • Client-side markup rendering
            • Infusion wires it all together

Tuesday, March 16, 2010
Components + Services
                                                                                     Artifact Component
                                                                                                               Artifact Data Feed




                              3"))&+)                 <=>?@*AB

                                                      -)$*&".$
                                                    -)$*&".$/,!0"1+

                            !!!!"##!$%!&"'%()*$+,      ,+0#!$%!&)*+0#

                                                            ;<<=>!6=$?!.+0$()@
                                                            A09!%0!B"B+)
                                                                                     Tagging Component
                                                            66CD!E!;DC6!.1
                                  -)$*&".$!*1"7+
                                                            F*&$!%&!G*.?")#!H*88%I
                                   2.8*.9":8+4
                                                            J%)+1!*B,(1!#%8%)!,*$!
                                                            "1+$>!.%0,+.$+$()CCC


                             !"#$!234
                                                                                                                       Tags Service
                             %&$&'()$*+,-(.&,#*'/&$*"0$(*+,-(.+1222*254


                             3(44+,'$!264


                             561&(78&1+(!264

                                                                                     Image Gallery Component
                             9+0"'+1*(:-+;'$!254




                                                                                                                Media Service




Tuesday, March 16, 2010
Devices




                                                    Content/Collections
                                                         Systems




                           mFSS


                                Exhibit Presenter
                                                          Data Import




                          Components



                                                        Exhibit Data Feed




Tuesday, March 16, 2010
Kettle: Server-side JS
                      • Built on top of the JSGI server spec
                      • Don’t need lots of new APIs on server
                      • Envjs provides a full browser
                      • Infusion as application framework
                      • Choose where markup gets rendered
                      • Natural, familiardesigners for Web
                        developers and
                                          environment


Tuesday, March 16, 2010
Code!
 https://source.fluidproject.org/svn/scratchpad/mobile-workshop/trunk/




Tuesday, March 16, 2010
WebKit-Specific Features




Tuesday, March 16, 2010
Adding a Home Screen Icon


    <link rel="apple-touch-icon" href="engage-apple-touch-icon.png"/>




               •          Adds the linked icon to the iPhone home screen
               •          Icons must be 57 x 57 px
               •          iPhone will add rounded corners & reflection for you




Tuesday, March 16, 2010
Run As a Webapp
   <meta name="apple-mobile-web-app-capable"
         content="yes" />




   •       Removes browser chrome
   •       All page transitions will cause
           Safari to pen
   •       Use Screen Navigator or
           window.location to intercept
           page transitions


Tuesday, March 16, 2010
Setting a fixed size
 <meta name="viewport" content="width=device-width;
                       initial-scale=1.0;
                       maximum-scale=1.0;
                       user-scalable=0;" />




        •      Sets the width of page to screen size
        •      Turns off zooming with pinch/pan




Tuesday, March 16, 2010
Removing Behaviour
                                <style type="text/css">
                                <!—-
                                     * {
                                         -webkit-touch-callout: none;
                                     }
                                -->
                                </style>




                          •   Prevents opening links in a new window
                          •   Prevents saving images



Tuesday, March 16, 2010
Building with mFSS




Tuesday, March 16, 2010
mFSS: iPhone Theme

             <head>
                          <link type="text/css" rel="stylesheet"
                                href="fss-mobile-layout.css" />
                          <link type="text/css" rel="stylesheet"
                                href="fss-mobile-theme-iphone.css" />
             </head>

             <body class=”fl-theme-iphone”>

             </body>




Tuesday, March 16, 2010
mFSS: Android Theme


              <head>
                          <link type="text/css" rel="stylesheet"
                                href="fss-mobile-layout.css" />
                          <link type="text/css" rel="stylesheet"
                                href="fss-mobile-theme-android.css" />
              </head>

              <body class=”fl-theme-android”>

              </body>




Tuesday, March 16, 2010
mFSS: Desktop


                          <head>
                                    <link type="text/css" rel="stylesheet"
                                          href="fss-layout.css" />
                                    <link type="text/css" rel="stylesheet"
                                          href="fss-theme-rust.css" />
                          </head>
                          <body class=”fl-theme-rust”>

                          </body>




Tuesday, March 16, 2010
mFSS: Tabs


              <ul class="fl-tabs">
                <li class="fl-tabs-active">
                  <a href="#">Go Back</a>
                </li>
                <li>
                     <a href="#">Go Back</a>
                </li>
                <li>
                  <a href="#">Go Back</a>
                </li>
              </ul>




Tuesday, March 16, 2010
mFSS: Buttons


              <a class="fl-button   fl-button-white" href="../index.html">
                   Go Back
              </a>
              <a class="fl-button   fl-button-green" href="../index.html">
                   Go Back
              </a>
              <a class="fl-button   fl-button-blue" href="../index.html">
                   Go Back
              </a>
              <a class="fl-button   fl-button-black" href="../index.html">
                   Go Back
              </a>


Tuesday, March 16, 2010
mFSS: Back Button



              <a href="../mobile.html"
                 class="fl-button fl-backButton">
                   <span class="fl-button-inner">Back Button</span>
              </a>




Tuesday, March 16, 2010
mFSS: Lists


              <ul class="fl-list-menu">
                <li>
                  <a href="#">Link Text</a>
                </li>
                <li>
                  <a href="#">Link Text</a>
                </li>
                <li>
                  <a href="#">Link Text</a>
                </li>
              </ul>


Tuesday, March 16, 2010
mFSS: Image Grids


            <ul class="fl-list-menu fl-list-thumbnails fl-grid">
              <li>
                <a href="20.png">
                   <img class="fl-icon" src="20.png" alt="twisty icon" />
                </a>
              </li>
              <li>
                <a href="2.png">
                   <img class="fl-icon" src="2.jpg" alt="round icon" />
                </a>
              </li>
            </ul>

Tuesday, March 16, 2010
Infusion Mobile Components




Tuesday, March 16, 2010
Mobile Components


                 • Provide intuitive mobile interactions
                 • Navigation List, Cabinet, Screen Navigator
                 • A small but growing set: share yours!
                 • Goal: use them on both mobile and desktop
                 • Two key types: markup- and data-driven

Tuesday, March 16, 2010
Markup-Driven Components


                 • Progressive Enhancement style of JavaScript
                 • You provide the markup, we add the richness
                 • No assumptions about your data or content


Tuesday, March 16, 2010
Cabinet Illustrated




Tuesday, March 16, 2010
About the Cabinet


                    •     Like an accordion...

                    •     Has the ability to open multiple “drawers” at once

                    •     Any HTML content can go inside

                    •     Helps keep a page simple by hiding things until the
                          user wants to see them




Tuesday, March 16, 2010
Cabinet: Structure
                 Drawer




Tuesday, March 16, 2010
Cabinet: Structure
                 Drawer                        Handle




Tuesday, March 16, 2010
Cabinet: Structure
                 Drawer                        Handle




                                               Content




Tuesday, March 16, 2010
Cabinet: Markup

      Drawer              <div class=”flc-cabinet”>
                             <div class="flc-cabinet-drawer">
                                 <div class="flc-cabinet-handle">
                                     Can Cats Drink Beer?
                                 </div>
                                 <div class="flc-cabinet-contents">
                                     <!-- Your markup goes here -->
                                 </div>
                             </div>
                          </div>




Tuesday, March 16, 2010
Cabinet: Markup

      Drawer              <div class=”flc-cabinet”>                   Handle
                             <div class="flc-cabinet-drawer">
                                 <div class="flc-cabinet-handle">
                                     Can Cats Drink Beer?
                                 </div>
                                 <div class="flc-cabinet-contents">
                                     <!-- Your markup goes here -->
                                 </div>
                             </div>
                          </div>




Tuesday, March 16, 2010
Cabinet: Markup

      Drawer              <div class=”flc-cabinet”>                   Handle
                             <div class="flc-cabinet-drawer">
                                 <div class="flc-cabinet-handle">
                                     Can Cats Drink Beer?
                                 </div>
                                 <div class="flc-cabinet-contents">
                                     <!-- Your markup goes here -->
                                 </div>
            Content          </div>
                          </div>




Tuesday, March 16, 2010
Creating a Cabinet



               fluid.cabinet(“.flc-cabinet”, options);




Tuesday, March 16, 2010
Cabinet Options

                          {
                               events: {
                                   afterOpen: null,
                                   afterClose: null
                               },
                               startOpen: false
                          }



Tuesday, March 16, 2010
Model-Driven Rendering


                 • Data feed-oriented
                 • Model,View, no controller
                 • You give us JSON, we render it for you
                 • Template and styles are fully customizable

Tuesday, March 16, 2010
Navigation List Illustrated




Tuesday, March 16, 2010
Navigation List: Structure
         Component’s Container




Tuesday, March 16, 2010
Navigation List: Structure
         Component’s Container

                                                  List Item




Tuesday, March 16, 2010
Navigation List: Structure
         Component’s Container

                                                  List Item




        Thumbnail


Tuesday, March 16, 2010
Navigation List: Structure
         Component’s Container

                                                  List Item




                                                   Title
        Thumbnail


Tuesday, March 16, 2010
Navigation List: Markup
 <div class="flc-navigationList">                         Component’s Container
     <ul class="flc-navigationList-listGroup
                 fl-navigationList-container
                 fl-list
                 fl-list-menu
                 fl-list-thumbnails">
         <li class="flc-navigationList-items">
             <div class="flc-navigationList-linkContainer">
                  <a class="flc-navigationList-link fl-engage-badged-thumbnail">
                      <img class="flc-navigationList-image fl-icon"/>
                      <div class="fl-navigationList-textContainer">
                          <span class="flc-navigationList-titleText
                                       fl-navigationList-title">
                              Title
                          </span>
                         <span class="flc-navigationList-descriptionText
                                       fl-link-summary fl-navigationList-description">
                              Description
                          </span>
                      </div>
                 </a>
             </div>
         </li>
     </ul>
 </div>
Tuesday, March 16, 2010
Navigation List: Markup
 <div class="flc-navigationList">                         Component’s Container
     <ul class="flc-navigationList-listGroup
                 fl-navigationList-container
                 fl-list
                 fl-list-menu
                 fl-list-thumbnails">
         <li class="flc-navigationList-items">                    List item template
             <div class="flc-navigationList-linkContainer">
                  <a class="flc-navigationList-link fl-engage-badged-thumbnail">
                      <img class="flc-navigationList-image fl-icon"/>
                      <div class="fl-navigationList-textContainer">
                          <span class="flc-navigationList-titleText
                                       fl-navigationList-title">
                              Title
                          </span>
                         <span class="flc-navigationList-descriptionText
                                       fl-link-summary fl-navigationList-description">
                              Description
                          </span>
                      </div>
                 </a>
             </div>
         </li>
     </ul>
 </div>
Tuesday, March 16, 2010
Navigation List: Markup
 <div class="flc-navigationList">                         Component’s Container
     <ul class="flc-navigationList-listGroup
                 fl-navigationList-container
                 fl-list
                 fl-list-menu
                 fl-list-thumbnails">
         <li class="flc-navigationList-items">                    List item template
             <div class="flc-navigationList-linkContainer">
                  <a class="flc-navigationList-link fl-engage-badged-thumbnail">
                      <img class="flc-navigationList-image fl-icon"/>
                      <div class="fl-navigationList-textContainer">
                          <span class="flc-navigationList-titleText
                                       fl-navigationList-title">
       Thumbnail              Title
                          </span>
                         <span class="flc-navigationList-descriptionText
                                       fl-link-summary fl-navigationList-description">
                              Description
                          </span>
                      </div>
                 </a>
             </div>
         </li>
     </ul>
 </div>
Tuesday, March 16, 2010
Navigation List: Markup
 <div class="flc-navigationList">                         Component’s Container
     <ul class="flc-navigationList-listGroup
                 fl-navigationList-container
                 fl-list
                 fl-list-menu
                 fl-list-thumbnails">
         <li class="flc-navigationList-items">                    List item template
             <div class="flc-navigationList-linkContainer">
                  <a class="flc-navigationList-link fl-engage-badged-thumbnail">
                      <img class="flc-navigationList-image fl-icon"/>
                      <div class="fl-navigationList-textContainer">
                          <span class="flc-navigationList-titleText
                                       fl-navigationList-title">
       Thumbnail              Title                                                 Title
                          </span>
                         <span class="flc-navigationList-descriptionText
                                       fl-link-summary fl-navigationList-description">
                              Description
                          </span>
                      </div>
                 </a>
             </div>
         </li>
     </ul>
 </div>
Tuesday, March 16, 2010
Navigation List: Markup
 <div class="flc-navigationList">                         Component’s Container
     <ul class="flc-navigationList-listGroup
                 fl-navigationList-container
                 fl-list
                 fl-list-menu
                 fl-list-thumbnails">
         <li class="flc-navigationList-items">                    List item template
             <div class="flc-navigationList-linkContainer">
                  <a class="flc-navigationList-link fl-engage-badged-thumbnail">
                      <img class="flc-navigationList-image fl-icon"/>
                      <div class="fl-navigationList-textContainer">
                          <span class="flc-navigationList-titleText
                                       fl-navigationList-title">
       Thumbnail              Title                                                 Title
                          </span>
                         <span class="flc-navigationList-descriptionText
                                       fl-link-summary fl-navigationList-description">
                              Description
                          </span>
                      </div>
                 </a>
             </div>
         </li>                              Description
     </ul>
 </div>
Tuesday, March 16, 2010
Nav List’s Model
                          [{
                            image: “http://myServer.org/pic.png”,
                            target: “/viewImage?pic=12345”,
                            title: “My Great Picture!”,
                            description: “A picture of my moustache.”
                          },
                          {
                            image: “http://myServer.org/anotherPic.png”,
                            target: “/viewImage?pic=67890”,
                            title: “This picture, not so good.”,
                            description: “A picture of my cat.”
                          }]




Tuesday, March 16, 2010
Domain Model: Flickr
                           [{
                                  "id":"4366552930",
                                  "owner":"29979136@N03",
                                  "secret":"30a7167c6a",
                                  "server":"2777",
                                  "farm":3,
                                  "title":"Town and Country Resort",
                                  "ispublic":1,
                                  "isfriend":0,
                                  "isfamily":0
                                },
                                {
                                   "id":"4365808141",
                                   "owner":"29979136@N03",
                                   "secret":"2c818b926e",
                                   "server":"4058",
                                   "farm":5,
                                   "title":"Resort Pool",
                                   "ispublic":1,
                                   "isfriend":0,
                                   "isfamily":0
                                }]


Tuesday, March 16, 2010
Transforming Your Model

         var imageURLTemplate = "http://farm%farm.static.flickr.com/%server/%id_%secret_m.jpg";
         var userPageURLTemplate = "http://www.flickr.com/photos/%owner/%id";



         var mapData = function (flickrData) {
             var navListModel = fluid.transform(flickrData.photos.photo, function (photo) {
                 return {
                     image: fluid.stringTemplate(imageURLTemplate, photo),
                     target: fluid.stringTemplate(userPageURLTemplate, photo),
                     title: photo.title
                 };
             });
         };




Tuesday, March 16, 2010
Creating a Nav List

         var templateURL = "../../../fluid-engage-core/components/” +
                           “navigationList/html/” +
                           “NavigationList.html .flc-navigationList";

         // Load Nav List’s HTML template via AJAX
         container.load(templateURL, null, function () {
             // When the template has loaded, instantiate a Nav List
             var navList = fluid.navigationList(container, {
                 model: mapData(jasigFlickrPhotos)
             });
         });




Tuesday, March 16, 2010
Optimizing Performance




Tuesday, March 16, 2010
Will My Web Site Scale?


                             Yes...


                                         ...and no.




Tuesday, March 16, 2010
Will My Web Site Scale?
                                                           6.290


                                     5.121                                          4.990



                                                   3.216
                                                                          2.780
                             2.151




                                jQuery            Unconcatenated         Concatenated



                                                 Wi-Fi             3G

                                             jQuery    Unconcatenated             Concatenated
                     Wi-Fi                       2.151           3.216                      2.78
                     3G                          5.121                  6.29                4.99


Tuesday, March 16, 2010
Mobile Performance Factors

             • Great browsers make us forget the CPU
             • At heart, mobile apps are heavily CPU-bound
             • Connection limitations:
              • Often slow (EDGE vs. 3G vs. WiFi)
              • Often flakey

Tuesday, March 16, 2010
Performance Heuristics



                   • Connection speed: minimize server roundtrips
                   • CPU speed: minimize JavaScript evaluation


Tuesday, March 16, 2010
Device Constraints


                          How fast is your desktop computer?




Tuesday, March 16, 2010
Mobile Device Constraints
                            iPhone 3G      412 MHz

                           iPhone 3GS      600 MHz

                           Android G1      528 MHz

                          Motorola Droid   550 MHz

                           Nexus One       1 GHz


Tuesday, March 16, 2010
Minimize Server Roundtrips


                   • Minify JavaScript and CSS
                   • Concatenate JavaScript resources
                   • Use image sprites


Tuesday, March 16, 2010
Minimize JavaScript eval()


                   • Your code will start up way slower on mobile
                   • Don’t load the same JS over and over again
                   • Carefully consider dependencies
                   • Use an all-in-one page style: Screen Navigator

Tuesday, March 16, 2010
Using Screen Navigator




Tuesday, March 16, 2010
Screen Navigator


              • All in one page idiom: no full page transitions
              • Load shared dependencies up-front
              • Lazily load unique dependencies
              • A mini, client-side AJAX portal
              • Unobtrusive: content still works like it used to

Tuesday, March 16, 2010
Screen Navigator Illustrated


                                XHR




Tuesday, March 16, 2010
Screen Navigator: How it Works


                    •     Intercepts all potential page transitions

                          •   Link clicks, form submits, etc.

                    •     Loads the href via AJAX

                    •     Compares scripts and links: only injects new stuff

                    •     Injects the page’s body into a <div>




Tuesday, March 16, 2010
URLs and Screen Navigator

                    •     We assume your Web app is URL addressable

                    •     Avoid breaking the back button and bookmarking:

                    •     Store URL state in window.location.hash

                    •     jQuery onhashchange plugin
                                                       Look here!

                     http://fluidengage.org/engage/home/home.html#
                exhibitions/view.html?db=mccord_exhibitions&id=4&lang=en




Tuesday, March 16, 2010
Screen Navigator: Markup
       <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
           <head>
              <link rel="apple-touch-icon" href="../../../../fluid-engage-core/components/home/images/apple-touch-icon.png"/>
              <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
              <meta name="apple-mobile-web-app-capable" content="yes" />
              <title>McCord</title>

                <link rel="apple-touch-icon" href="../../../../fluid-engage-core/components/home/images/apple-touch-icon.png"/>

                <!-- Your stylesheets go here -->
                <!-- Your JavaScript dependencies go here -->                          Shared Dependencies
                <!-- Screen Navigator’s dependencies -->
                <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/jquery/core/js/jquery.js"></
                script>
                <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/json/js/json2.js"></script>
                <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/framework/core/js/Fluid.js"></script>
                <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/kettleCore.js"></script>
                <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/URLUtilities.js"></script>
                <script type="text/javascript"
                        src="../../../../fluid-engage-core/lib/jquery/plugins/hashchange/js/jquery.ba-hashchange.js"></script>

               <!-- Screen Navigator itself -->
                <script type="text/javascript" src="../js/condenser.js"></script>
            </head>

            <body class="fl-theme-iphone fl-home-white-background">

                 <div class="flc-navigator-portal">
                 </div>                                                                        Empty Container
           </body>
       </html>


Tuesday, March 16, 2010
Instantiating Screen Navigator




                      fluid.engage.screenNavigator(".flc-navigator-portal",
                                                   "../app/home.html");




Tuesday, March 16, 2010
Fluid Engage Code Tour?



Tuesday, March 16, 2010
Questions?



Tuesday, March 16, 2010

Mais conteúdo relacionado

Destaque

Dwilsonlis557
Dwilsonlis557Dwilsonlis557
Dwilsonlis557nobleire
 
Iit_teaching_aids
Iit_teaching_aidsIit_teaching_aids
Iit_teaching_aidss1047178
 
Palm Beach Learn Green Conference 10.15.10
Palm Beach Learn Green Conference 10.15.10Palm Beach Learn Green Conference 10.15.10
Palm Beach Learn Green Conference 10.15.10valerie11
 
Accessible UIs with jQuery and Infusion
Accessible UIs with jQuery and InfusionAccessible UIs with jQuery and Infusion
Accessible UIs with jQuery and Infusioncolinbdclark
 
Thoughts on Open Accessibility
Thoughts on Open AccessibilityThoughts on Open Accessibility
Thoughts on Open Accessibilitycolinbdclark
 
Flocking at the SuperCollider Symposium 2013
Flocking at the SuperCollider Symposium 2013Flocking at the SuperCollider Symposium 2013
Flocking at the SuperCollider Symposium 2013colinbdclark
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuerycolinbdclark
 

Destaque (8)

Dwilsonlis557
Dwilsonlis557Dwilsonlis557
Dwilsonlis557
 
Iit_teaching_aids
Iit_teaching_aidsIit_teaching_aids
Iit_teaching_aids
 
Palm Beach Learn Green Conference 10.15.10
Palm Beach Learn Green Conference 10.15.10Palm Beach Learn Green Conference 10.15.10
Palm Beach Learn Green Conference 10.15.10
 
Accessible UIs with jQuery and Infusion
Accessible UIs with jQuery and InfusionAccessible UIs with jQuery and Infusion
Accessible UIs with jQuery and Infusion
 
Thoughts on Open Accessibility
Thoughts on Open AccessibilityThoughts on Open Accessibility
Thoughts on Open Accessibility
 
Flocking at the SuperCollider Symposium 2013
Flocking at the SuperCollider Symposium 2013Flocking at the SuperCollider Symposium 2013
Flocking at the SuperCollider Symposium 2013
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
 
unifi ap datasheet
unifi ap datasheetunifi ap datasheet
unifi ap datasheet
 

Semelhante a Mobile Development with uPortal and Infusion

Web Typography with CSS3
Web Typography with CSS3Web Typography with CSS3
Web Typography with CSS3Matthew Smith
 
Webinar Mobile ECM Apps with Nuxeo EP
Webinar Mobile ECM Apps with Nuxeo EPWebinar Mobile ECM Apps with Nuxeo EP
Webinar Mobile ECM Apps with Nuxeo EPNuxeo
 
Nuxeo World Session: Mobile ECM Apps with Nuxeo EP
Nuxeo World Session: Mobile ECM Apps with Nuxeo EPNuxeo World Session: Mobile ECM Apps with Nuxeo EP
Nuxeo World Session: Mobile ECM Apps with Nuxeo EPNuxeo
 
Multi Handset Development - ETE 2010
Multi Handset Development - ETE 2010Multi Handset Development - ETE 2010
Multi Handset Development - ETE 2010Kevin Griffin
 
OvertheAir 2010 html5 impact on application programming
OvertheAir 2010 html5 impact on application programmingOvertheAir 2010 html5 impact on application programming
OvertheAir 2010 html5 impact on application programmingTor Björn Minde
 
HTML5 impact on application programming
HTML5 impact on application programmingHTML5 impact on application programming
HTML5 impact on application programmingEricsson Labs
 
Building Apps with PhoneGap
Building Apps with PhoneGap Building Apps with PhoneGap
Building Apps with PhoneGap alunny
 
Html5 apps nikolaionken-08-06
Html5 apps nikolaionken-08-06Html5 apps nikolaionken-08-06
Html5 apps nikolaionken-08-06Skills Matter
 
MozillaPH Rust Users Group Kick Off Meeting
MozillaPH Rust Users Group Kick Off MeetingMozillaPH Rust Users Group Kick Off Meeting
MozillaPH Rust Users Group Kick Off MeetingRobert 'Bob' Reyes
 
Mobile application development strategies
Mobile application development strategiesMobile application development strategies
Mobile application development strategiesInterop
 
An introduction to GWT and Ext GWT
An introduction to GWT and Ext GWTAn introduction to GWT and Ext GWT
An introduction to GWT and Ext GWTDarrell Meyer
 
Open Source Technology for Libraries
Open Source Technology for LibrariesOpen Source Technology for Libraries
Open Source Technology for LibrariesNicole C. Engard
 
Webmontag München Cross Platform
Webmontag München Cross PlatformWebmontag München Cross Platform
Webmontag München Cross Platformwolframkriesing
 
The Reluctant SysAdmin : 360|iDev Austin 2010
The Reluctant SysAdmin : 360|iDev Austin 2010The Reluctant SysAdmin : 360|iDev Austin 2010
The Reluctant SysAdmin : 360|iDev Austin 2010Voxilate
 
Introduction to CouchDB
Introduction to CouchDBIntroduction to CouchDB
Introduction to CouchDBJohn Wood
 

Semelhante a Mobile Development with uPortal and Infusion (20)

Sencha Touch in Action
Sencha Touch in Action Sencha Touch in Action
Sencha Touch in Action
 
Web Typography with CSS3
Web Typography with CSS3Web Typography with CSS3
Web Typography with CSS3
 
Webinar Mobile ECM Apps with Nuxeo EP
Webinar Mobile ECM Apps with Nuxeo EPWebinar Mobile ECM Apps with Nuxeo EP
Webinar Mobile ECM Apps with Nuxeo EP
 
Nuxeo World Session: Mobile ECM Apps with Nuxeo EP
Nuxeo World Session: Mobile ECM Apps with Nuxeo EPNuxeo World Session: Mobile ECM Apps with Nuxeo EP
Nuxeo World Session: Mobile ECM Apps with Nuxeo EP
 
Multi Handset Development - ETE 2010
Multi Handset Development - ETE 2010Multi Handset Development - ETE 2010
Multi Handset Development - ETE 2010
 
OvertheAir 2010 html5 impact on application programming
OvertheAir 2010 html5 impact on application programmingOvertheAir 2010 html5 impact on application programming
OvertheAir 2010 html5 impact on application programming
 
HTML5 impact on application programming
HTML5 impact on application programmingHTML5 impact on application programming
HTML5 impact on application programming
 
Moobile
MoobileMoobile
Moobile
 
Building Apps with PhoneGap
Building Apps with PhoneGap Building Apps with PhoneGap
Building Apps with PhoneGap
 
Tomas Grails
Tomas GrailsTomas Grails
Tomas Grails
 
Html5 apps nikolaionken-08-06
Html5 apps nikolaionken-08-06Html5 apps nikolaionken-08-06
Html5 apps nikolaionken-08-06
 
MozillaPH Rust Users Group Kick Off Meeting
MozillaPH Rust Users Group Kick Off MeetingMozillaPH Rust Users Group Kick Off Meeting
MozillaPH Rust Users Group Kick Off Meeting
 
Cocoa for Scientists
Cocoa for ScientistsCocoa for Scientists
Cocoa for Scientists
 
Mobile application development strategies
Mobile application development strategiesMobile application development strategies
Mobile application development strategies
 
An introduction to GWT and Ext GWT
An introduction to GWT and Ext GWTAn introduction to GWT and Ext GWT
An introduction to GWT and Ext GWT
 
Základy GWT
Základy GWTZáklady GWT
Základy GWT
 
Open Source Technology for Libraries
Open Source Technology for LibrariesOpen Source Technology for Libraries
Open Source Technology for Libraries
 
Webmontag München Cross Platform
Webmontag München Cross PlatformWebmontag München Cross Platform
Webmontag München Cross Platform
 
The Reluctant SysAdmin : 360|iDev Austin 2010
The Reluctant SysAdmin : 360|iDev Austin 2010The Reluctant SysAdmin : 360|iDev Austin 2010
The Reluctant SysAdmin : 360|iDev Austin 2010
 
Introduction to CouchDB
Introduction to CouchDBIntroduction to CouchDB
Introduction to CouchDB
 

Mais de colinbdclark

Open Inclusive Design
Open Inclusive DesignOpen Inclusive Design
Open Inclusive Designcolinbdclark
 
Nothing Hard Baked: Designing the Inclusive Web
Nothing Hard Baked: Designing the Inclusive WebNothing Hard Baked: Designing the Inclusive Web
Nothing Hard Baked: Designing the Inclusive Webcolinbdclark
 
Web Accessibility and Design
Web Accessibility and DesignWeb Accessibility and Design
Web Accessibility and Designcolinbdclark
 
User Interface Development with jQuery
User Interface Development with jQueryUser Interface Development with jQuery
User Interface Development with jQuerycolinbdclark
 
Making your jQuery Plugins More Accessible
Making your jQuery Plugins More AccessibleMaking your jQuery Plugins More Accessible
Making your jQuery Plugins More Accessiblecolinbdclark
 
Architectures for Inclusive Design
Architectures for Inclusive DesignArchitectures for Inclusive Design
Architectures for Inclusive Designcolinbdclark
 
Infusion for the birds
Infusion for the birdsInfusion for the birds
Infusion for the birdscolinbdclark
 

Mais de colinbdclark (7)

Open Inclusive Design
Open Inclusive DesignOpen Inclusive Design
Open Inclusive Design
 
Nothing Hard Baked: Designing the Inclusive Web
Nothing Hard Baked: Designing the Inclusive WebNothing Hard Baked: Designing the Inclusive Web
Nothing Hard Baked: Designing the Inclusive Web
 
Web Accessibility and Design
Web Accessibility and DesignWeb Accessibility and Design
Web Accessibility and Design
 
User Interface Development with jQuery
User Interface Development with jQueryUser Interface Development with jQuery
User Interface Development with jQuery
 
Making your jQuery Plugins More Accessible
Making your jQuery Plugins More AccessibleMaking your jQuery Plugins More Accessible
Making your jQuery Plugins More Accessible
 
Architectures for Inclusive Design
Architectures for Inclusive DesignArchitectures for Inclusive Design
Architectures for Inclusive Design
 
Infusion for the birds
Infusion for the birdsInfusion for the birds
Infusion for the birds
 

Último

Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 

Último (20)

Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 

Mobile Development with uPortal and Infusion

  • 1. Mobile Development with uPortal & Infusion Jen Bourey, Genius Portal Developer, Unicon Justin Obara, Fluid Infusion Product Manager, Adaptive Technology Resource Centre Colin Clark, Fluid Project Technical Lead, Adaptive Technology Resource Centre Tuesday, March 16, 2010
  • 2. Who is Fluid? http://fluidproject.org • Is an Open Source community of • Designers • Developers • Accessibility Experts • Helps other open communities • Consists of universities, museums, and individuals Tuesday, March 16, 2010
  • 3. What is Fluid Infusion? • Application Framework built on top of jQuery • Lightweight CSS Framework (FSS) • UI Components you can reuse and adapt • Open architecture: everything is configurable • Designed for Usability and Accessibility Tuesday, March 16, 2010
  • 5. Big Question: What platforms should we support? Tuesday, March 16, 2010
  • 7. Everything? Objective-C Java C++ Cocoa Touch Android SDK Carbide Tuesday, March 16, 2010
  • 10. Mobile: Embrace the Web • Phones now have great browsers built in • Web design is ubiquitous and familiar • Use standard HTML, CSS, and JavaScript • Blends seamless into existing sites • Thin nativefeatures (camera, bluetooth) interactive apps provide access to Tuesday, March 16, 2010
  • 11. Mobile Web apps HTML, CSS, JS Browser Tuesday, March 16, 2010
  • 12. The Open Web Today • Multi-touch gestures • Audio and video • Vector graphics and animation • Great accessibility • All work on mobile today! • Stable and deeply interoperable • Everyone knows it Tuesday, March 16, 2010
  • 13. A Growing Approach Google Latitude Tuesday, March 16, 2010
  • 14. Mobile Web Pain Points • Sparse documentation • Few successful Open Source examples • Existing frameworks have limitations Tuesday, March 16, 2010
  • 16. Existing Frameworks jQTouch iUI WebApp.Net Magic Framework • Reusability of content? • JavaScript Footprint? • Flexibility of themes? Tuesday, March 16, 2010
  • 17. Hybrid Apps • Most platforms have support for embedding browsers in native apps • Can render user interfaces with HTML • Write all your code in JavaScript • Access native hardware with a bridge Tuesday, March 16, 2010
  • 20. Migrating to Mobile • Great mobile apps are carefully designed • The transition to mobile takes time • Incremental: reuse as much as possible • Re-skin, re-style, and adapt existing UIs Tuesday, March 16, 2010
  • 21. How Infusion Can Help • Loose coupling DOM Agnosticism • Unobtrusive and template-driven • Fast and flexible styling with FSS Tuesday, March 16, 2010
  • 22. DOM Agnosticism Component code is maximally unaware of the details of the markup layout that it operates on. Tuesday, March 16, 2010
  • 23. DOM Binder Relaxes the relationship between code and markup Tuesday, March 16, 2010
  • 24. DOM Binder • Uses named selectors • Explicit selectors never appear in code • Code is free of baked dependences on markup • Attached to a component with call to fluid.initView Tuesday, March 16, 2010
  • 25. DOM Binder configuration fluid.defaults(“fliquor.imageViewer”, { selectors: { searchButton: “.flc-fliquor-searchButton”, searchBox: “.flc-fliquor-search”, template: “.flc-fliquor-template”, images: “.flc-fliquor-images”, } }); usage that.locate(“searchBox”).fluid(“activatable”, that.search); that.locate(“searchButton”).click(function (evt) { that.search(); return false; }); Tuesday, March 16, 2010
  • 26. Unobtrusive Templates • Components render using pure HTML templates • Code shouldn’t break if the markup changes • Code is not in markup, markup is not in code Tuesday, March 16, 2010
  • 27. HTML Template <body class="flc-fliquor fl-theme-coal"> <div class="fl-centered fl-navbar fl-table search-bar"> ... <div class="fl-centered results"> <ol class="flc-fliquor-images fl-list-menu fl-list-thumbnails fl-thumbnails-expanded"> <li class="flc-fliquor-template"> <a href="#"> <span class="wrapper"> <span class="flc-fliquor-item-title fl-fliquor-item-title">Title</span> <img title="Title" alt="Alt" src="#" class="fl-icon" /> </span> </a> </li> </ol> </div> ... </body> Tuesday, March 16, 2010
  • 28. Infusion Templates • Fully customizable • As semantic as possible • Advanced accessibility added via JavaScript • Presentation class names separated from Javascript selector names Tuesday, March 16, 2010
  • 29. Rapid CSS using FSS • Modular, extensible class-name CSS system • Easy to read class names • Plays nice with other CSS systems (jQuery themes, other frameworks, etc) • Modularity means it’s meant for you to hack • Lots of support, fully cross browser Tuesday, March 16, 2010
  • 30. FSS Applied Reset normalize the little things for a consistent starting point Tuesday, March 16, 2010
  • 31. FSS Applied Layout placement & containers Tuesday, March 16, 2010
  • 32. FSS Applied Themes style, colors and graphics Tuesday, March 16, 2010
  • 33. Mobile FSS • Highly focused on target platforms • Follows basic touchscreen UI guidelines from Apple and Android dev centres • Repurposes FSS class names, enabling multi- platform content Tuesday, March 16, 2010
  • 34. Mobile FSS Applied .fl-theme-coal .fl-theme-iphone = Tuesday, March 16, 2010
  • 35. Make it your own .fl-theme-myTheme Tuesday, March 16, 2010
  • 36. Case Study: Fluid Engage Tuesday, March 16, 2010
  • 37. Fluid Engage • Open source collaboration with museums • Visitor engagement: learn and contribute • Use phones visitors bring into the museum • Mobile apps and in-gallery kiosks • All built with open source Web technology Tuesday, March 16, 2010
  • 38. Our Mobile Approach • No hard intrusions on your content • Don’t subvert good Web idioms • Your choice: native-like or webbish Tuesday, March 16, 2010
  • 39. Infusion Mobile • mFSS: themes for iPhone, Android, more • Components designed for the mobile Web • ScreenNavigator: unobtrusive mobile navigation Tuesday, March 16, 2010
  • 40. Museum Components • Image Gallery • Podcasts and video • My Museum/My Collection • Comments, Discussion, Stories • Collection Browse and Search • Tagging? Tuesday, March 16, 2010
  • 41. Engage’s Architecture • Simple, lightweight, and approachable • JSON data feeds everywhere • Client-side markup rendering • Infusion wires it all together Tuesday, March 16, 2010
  • 42. Components + Services Artifact Component Artifact Data Feed 3"))&+) <=>?@*AB -)$*&".$ -)$*&".$/,!0"1+ !!!!"##!$%!&"'%()*$+, ,+0#!$%!&)*+0# ;<<=>!6=$?!.+0$()@ A09!%0!B"B+) Tagging Component 66CD!E!;DC6!.1 -)$*&".$!*1"7+ F*&$!%&!G*.?")#!H*88%I 2.8*.9":8+4 J%)+1!*B,(1!#%8%)!,*$! "1+$>!.%0,+.$+$()CCC !"#$!234 Tags Service %&$&'()$*+,-(.&,#*'/&$*"0$(*+,-(.+1222*254 3(44+,'$!264 561&(78&1+(!264 Image Gallery Component 9+0"'+1*(:-+;'$!254 Media Service Tuesday, March 16, 2010
  • 43. Devices Content/Collections Systems mFSS Exhibit Presenter Data Import Components Exhibit Data Feed Tuesday, March 16, 2010
  • 44. Kettle: Server-side JS • Built on top of the JSGI server spec • Don’t need lots of new APIs on server • Envjs provides a full browser • Infusion as application framework • Choose where markup gets rendered • Natural, familiardesigners for Web developers and environment Tuesday, March 16, 2010
  • 47. Adding a Home Screen Icon <link rel="apple-touch-icon" href="engage-apple-touch-icon.png"/> • Adds the linked icon to the iPhone home screen • Icons must be 57 x 57 px • iPhone will add rounded corners & reflection for you Tuesday, March 16, 2010
  • 48. Run As a Webapp <meta name="apple-mobile-web-app-capable" content="yes" /> • Removes browser chrome • All page transitions will cause Safari to pen • Use Screen Navigator or window.location to intercept page transitions Tuesday, March 16, 2010
  • 49. Setting a fixed size <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> • Sets the width of page to screen size • Turns off zooming with pinch/pan Tuesday, March 16, 2010
  • 50. Removing Behaviour <style type="text/css"> <!—- * { -webkit-touch-callout: none; } --> </style> • Prevents opening links in a new window • Prevents saving images Tuesday, March 16, 2010
  • 51. Building with mFSS Tuesday, March 16, 2010
  • 52. mFSS: iPhone Theme <head> <link type="text/css" rel="stylesheet" href="fss-mobile-layout.css" /> <link type="text/css" rel="stylesheet" href="fss-mobile-theme-iphone.css" /> </head> <body class=”fl-theme-iphone”> </body> Tuesday, March 16, 2010
  • 53. mFSS: Android Theme <head> <link type="text/css" rel="stylesheet" href="fss-mobile-layout.css" /> <link type="text/css" rel="stylesheet" href="fss-mobile-theme-android.css" /> </head> <body class=”fl-theme-android”> </body> Tuesday, March 16, 2010
  • 54. mFSS: Desktop <head> <link type="text/css" rel="stylesheet" href="fss-layout.css" /> <link type="text/css" rel="stylesheet" href="fss-theme-rust.css" /> </head> <body class=”fl-theme-rust”> </body> Tuesday, March 16, 2010
  • 55. mFSS: Tabs <ul class="fl-tabs"> <li class="fl-tabs-active"> <a href="#">Go Back</a> </li>   <li> <a href="#">Go Back</a> </li>   <li> <a href="#">Go Back</a> </li> </ul> Tuesday, March 16, 2010
  • 56. mFSS: Buttons <a class="fl-button fl-button-white" href="../index.html"> Go Back </a> <a class="fl-button fl-button-green" href="../index.html"> Go Back </a> <a class="fl-button fl-button-blue" href="../index.html"> Go Back </a> <a class="fl-button fl-button-black" href="../index.html"> Go Back </a> Tuesday, March 16, 2010
  • 57. mFSS: Back Button <a href="../mobile.html" class="fl-button fl-backButton"> <span class="fl-button-inner">Back Button</span> </a> Tuesday, March 16, 2010
  • 58. mFSS: Lists <ul class="fl-list-menu"> <li> <a href="#">Link Text</a> </li>   <li> <a href="#">Link Text</a> </li>   <li> <a href="#">Link Text</a> </li> </ul> Tuesday, March 16, 2010
  • 59. mFSS: Image Grids <ul class="fl-list-menu fl-list-thumbnails fl-grid"> <li>   <a href="20.png">     <img class="fl-icon" src="20.png" alt="twisty icon" />     </a>   </li>   <li>   <a href="2.png">     <img class="fl-icon" src="2.jpg" alt="round icon" />     </a> </li> </ul> Tuesday, March 16, 2010
  • 61. Mobile Components • Provide intuitive mobile interactions • Navigation List, Cabinet, Screen Navigator • A small but growing set: share yours! • Goal: use them on both mobile and desktop • Two key types: markup- and data-driven Tuesday, March 16, 2010
  • 62. Markup-Driven Components • Progressive Enhancement style of JavaScript • You provide the markup, we add the richness • No assumptions about your data or content Tuesday, March 16, 2010
  • 64. About the Cabinet • Like an accordion... • Has the ability to open multiple “drawers” at once • Any HTML content can go inside • Helps keep a page simple by hiding things until the user wants to see them Tuesday, March 16, 2010
  • 65. Cabinet: Structure Drawer Tuesday, March 16, 2010
  • 66. Cabinet: Structure Drawer Handle Tuesday, March 16, 2010
  • 67. Cabinet: Structure Drawer Handle Content Tuesday, March 16, 2010
  • 68. Cabinet: Markup Drawer <div class=”flc-cabinet”> <div class="flc-cabinet-drawer"> <div class="flc-cabinet-handle"> Can Cats Drink Beer? </div> <div class="flc-cabinet-contents"> <!-- Your markup goes here --> </div> </div> </div> Tuesday, March 16, 2010
  • 69. Cabinet: Markup Drawer <div class=”flc-cabinet”> Handle <div class="flc-cabinet-drawer"> <div class="flc-cabinet-handle"> Can Cats Drink Beer? </div> <div class="flc-cabinet-contents"> <!-- Your markup goes here --> </div> </div> </div> Tuesday, March 16, 2010
  • 70. Cabinet: Markup Drawer <div class=”flc-cabinet”> Handle <div class="flc-cabinet-drawer"> <div class="flc-cabinet-handle"> Can Cats Drink Beer? </div> <div class="flc-cabinet-contents"> <!-- Your markup goes here --> </div> Content </div> </div> Tuesday, March 16, 2010
  • 71. Creating a Cabinet fluid.cabinet(“.flc-cabinet”, options); Tuesday, March 16, 2010
  • 72. Cabinet Options { events: { afterOpen: null, afterClose: null }, startOpen: false } Tuesday, March 16, 2010
  • 73. Model-Driven Rendering • Data feed-oriented • Model,View, no controller • You give us JSON, we render it for you • Template and styles are fully customizable Tuesday, March 16, 2010
  • 75. Navigation List: Structure Component’s Container Tuesday, March 16, 2010
  • 76. Navigation List: Structure Component’s Container List Item Tuesday, March 16, 2010
  • 77. Navigation List: Structure Component’s Container List Item Thumbnail Tuesday, March 16, 2010
  • 78. Navigation List: Structure Component’s Container List Item Title Thumbnail Tuesday, March 16, 2010
  • 79. Navigation List: Markup <div class="flc-navigationList"> Component’s Container <ul class="flc-navigationList-listGroup fl-navigationList-container fl-list fl-list-menu fl-list-thumbnails">     <li class="flc-navigationList-items">         <div class="flc-navigationList-linkContainer">             <a class="flc-navigationList-link fl-engage-badged-thumbnail">                 <img class="flc-navigationList-image fl-icon"/>                 <div class="fl-navigationList-textContainer">                 <span class="flc-navigationList-titleText fl-navigationList-title"> Title </span> <span class="flc-navigationList-descriptionText fl-link-summary fl-navigationList-description"> Description </span>                 </div>                 </a>             </div>         </li> </ul> </div> Tuesday, March 16, 2010
  • 80. Navigation List: Markup <div class="flc-navigationList"> Component’s Container <ul class="flc-navigationList-listGroup fl-navigationList-container fl-list fl-list-menu fl-list-thumbnails">     <li class="flc-navigationList-items"> List item template         <div class="flc-navigationList-linkContainer">             <a class="flc-navigationList-link fl-engage-badged-thumbnail">                 <img class="flc-navigationList-image fl-icon"/>                 <div class="fl-navigationList-textContainer">                 <span class="flc-navigationList-titleText fl-navigationList-title"> Title </span> <span class="flc-navigationList-descriptionText fl-link-summary fl-navigationList-description"> Description </span>                 </div>                 </a>             </div>         </li> </ul> </div> Tuesday, March 16, 2010
  • 81. Navigation List: Markup <div class="flc-navigationList"> Component’s Container <ul class="flc-navigationList-listGroup fl-navigationList-container fl-list fl-list-menu fl-list-thumbnails">     <li class="flc-navigationList-items"> List item template         <div class="flc-navigationList-linkContainer">             <a class="flc-navigationList-link fl-engage-badged-thumbnail">                 <img class="flc-navigationList-image fl-icon"/>                 <div class="fl-navigationList-textContainer">                 <span class="flc-navigationList-titleText fl-navigationList-title"> Thumbnail Title </span> <span class="flc-navigationList-descriptionText fl-link-summary fl-navigationList-description"> Description </span>                 </div>                 </a>             </div>         </li> </ul> </div> Tuesday, March 16, 2010
  • 82. Navigation List: Markup <div class="flc-navigationList"> Component’s Container <ul class="flc-navigationList-listGroup fl-navigationList-container fl-list fl-list-menu fl-list-thumbnails">     <li class="flc-navigationList-items"> List item template         <div class="flc-navigationList-linkContainer">             <a class="flc-navigationList-link fl-engage-badged-thumbnail">                 <img class="flc-navigationList-image fl-icon"/>                 <div class="fl-navigationList-textContainer">                 <span class="flc-navigationList-titleText fl-navigationList-title"> Thumbnail Title Title </span> <span class="flc-navigationList-descriptionText fl-link-summary fl-navigationList-description"> Description </span>                 </div>                 </a>             </div>         </li> </ul> </div> Tuesday, March 16, 2010
  • 83. Navigation List: Markup <div class="flc-navigationList"> Component’s Container <ul class="flc-navigationList-listGroup fl-navigationList-container fl-list fl-list-menu fl-list-thumbnails">     <li class="flc-navigationList-items"> List item template         <div class="flc-navigationList-linkContainer">             <a class="flc-navigationList-link fl-engage-badged-thumbnail">                 <img class="flc-navigationList-image fl-icon"/>                 <div class="fl-navigationList-textContainer">                 <span class="flc-navigationList-titleText fl-navigationList-title"> Thumbnail Title Title </span> <span class="flc-navigationList-descriptionText fl-link-summary fl-navigationList-description"> Description </span>                 </div>                 </a>             </div>         </li> Description </ul> </div> Tuesday, March 16, 2010
  • 84. Nav List’s Model [{ image: “http://myServer.org/pic.png”, target: “/viewImage?pic=12345”, title: “My Great Picture!”, description: “A picture of my moustache.” }, { image: “http://myServer.org/anotherPic.png”, target: “/viewImage?pic=67890”, title: “This picture, not so good.”, description: “A picture of my cat.” }] Tuesday, March 16, 2010
  • 85. Domain Model: Flickr [{ "id":"4366552930", "owner":"29979136@N03", "secret":"30a7167c6a", "server":"2777", "farm":3, "title":"Town and Country Resort", "ispublic":1, "isfriend":0, "isfamily":0 }, { "id":"4365808141", "owner":"29979136@N03", "secret":"2c818b926e", "server":"4058", "farm":5, "title":"Resort Pool", "ispublic":1, "isfriend":0, "isfamily":0 }] Tuesday, March 16, 2010
  • 86. Transforming Your Model var imageURLTemplate = "http://farm%farm.static.flickr.com/%server/%id_%secret_m.jpg"; var userPageURLTemplate = "http://www.flickr.com/photos/%owner/%id"; var mapData = function (flickrData) { var navListModel = fluid.transform(flickrData.photos.photo, function (photo) { return { image: fluid.stringTemplate(imageURLTemplate, photo), target: fluid.stringTemplate(userPageURLTemplate, photo), title: photo.title }; }); }; Tuesday, March 16, 2010
  • 87. Creating a Nav List var templateURL = "../../../fluid-engage-core/components/” + “navigationList/html/” + “NavigationList.html .flc-navigationList"; // Load Nav List’s HTML template via AJAX container.load(templateURL, null, function () { // When the template has loaded, instantiate a Nav List var navList = fluid.navigationList(container, { model: mapData(jasigFlickrPhotos) }); }); Tuesday, March 16, 2010
  • 89. Will My Web Site Scale? Yes... ...and no. Tuesday, March 16, 2010
  • 90. Will My Web Site Scale? 6.290 5.121 4.990 3.216 2.780 2.151 jQuery Unconcatenated Concatenated Wi-Fi 3G jQuery Unconcatenated Concatenated Wi-Fi 2.151 3.216 2.78 3G 5.121 6.29 4.99 Tuesday, March 16, 2010
  • 91. Mobile Performance Factors • Great browsers make us forget the CPU • At heart, mobile apps are heavily CPU-bound • Connection limitations: • Often slow (EDGE vs. 3G vs. WiFi) • Often flakey Tuesday, March 16, 2010
  • 92. Performance Heuristics • Connection speed: minimize server roundtrips • CPU speed: minimize JavaScript evaluation Tuesday, March 16, 2010
  • 93. Device Constraints How fast is your desktop computer? Tuesday, March 16, 2010
  • 94. Mobile Device Constraints iPhone 3G 412 MHz iPhone 3GS 600 MHz Android G1 528 MHz Motorola Droid 550 MHz Nexus One 1 GHz Tuesday, March 16, 2010
  • 95. Minimize Server Roundtrips • Minify JavaScript and CSS • Concatenate JavaScript resources • Use image sprites Tuesday, March 16, 2010
  • 96. Minimize JavaScript eval() • Your code will start up way slower on mobile • Don’t load the same JS over and over again • Carefully consider dependencies • Use an all-in-one page style: Screen Navigator Tuesday, March 16, 2010
  • 98. Screen Navigator • All in one page idiom: no full page transitions • Load shared dependencies up-front • Lazily load unique dependencies • A mini, client-side AJAX portal • Unobtrusive: content still works like it used to Tuesday, March 16, 2010
  • 99. Screen Navigator Illustrated XHR Tuesday, March 16, 2010
  • 100. Screen Navigator: How it Works • Intercepts all potential page transitions • Link clicks, form submits, etc. • Loads the href via AJAX • Compares scripts and links: only injects new stuff • Injects the page’s body into a <div> Tuesday, March 16, 2010
  • 101. URLs and Screen Navigator • We assume your Web app is URL addressable • Avoid breaking the back button and bookmarking: • Store URL state in window.location.hash • jQuery onhashchange plugin Look here! http://fluidengage.org/engage/home/home.html# exhibitions/view.html?db=mccord_exhibitions&id=4&lang=en Tuesday, March 16, 2010
  • 102. Screen Navigator: Markup <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <link rel="apple-touch-icon" href="../../../../fluid-engage-core/components/home/images/apple-touch-icon.png"/> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>McCord</title> <link rel="apple-touch-icon" href="../../../../fluid-engage-core/components/home/images/apple-touch-icon.png"/> <!-- Your stylesheets go here --> <!-- Your JavaScript dependencies go here --> Shared Dependencies <!-- Screen Navigator’s dependencies --> <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/jquery/core/js/jquery.js"></ script> <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/json/js/json2.js"></script> <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/framework/core/js/Fluid.js"></script> <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/kettleCore.js"></script> <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/URLUtilities.js"></script> <script type="text/javascript" src="../../../../fluid-engage-core/lib/jquery/plugins/hashchange/js/jquery.ba-hashchange.js"></script> <!-- Screen Navigator itself --> <script type="text/javascript" src="../js/condenser.js"></script> </head> <body class="fl-theme-iphone fl-home-white-background"> <div class="flc-navigator-portal"> </div> Empty Container </body> </html> Tuesday, March 16, 2010
  • 103. Instantiating Screen Navigator fluid.engage.screenNavigator(".flc-navigator-portal", "../app/home.html"); Tuesday, March 16, 2010
  • 104. Fluid Engage Code Tour? Tuesday, March 16, 2010