Ubiquity

1,754 views
1,491 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,754
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Ubiquity

    1. Ubiquity The next generation web interface
    2. <ul><ul><li>What's Ubiquity </li></ul></ul><ul><ul><li>Ubiquity Demo </li></ul></ul><ul><ul><li>Concepts behind Ubiquity </li></ul></ul><ul><ul><li>Brief talk on writing Command </li></ul></ul>
    3. What's Ubiquity? <ul><ul><li>A Mozilla labs project </li></ul></ul><ul><ul><li>A Firefox Extension </li></ul></ul><ul><ul><li>A Mashup platform </li></ul></ul><ul><ul><li>A Linguistic Interface </li></ul></ul><ul><ul><li>Command Line of Firefox </li></ul></ul><ul><ul><li>The Bridge between tabs </li></ul></ul>
    4. Ubiquity Demo <ul><ul><li>Mashup </li></ul></ul><ul><ul><ul><li>Add a map to email </li></ul></ul></ul><ul><ul><ul><li>Highlight typo and email to your contact </li></ul></ul></ul><ul><ul><ul><li>TinyURL and Twitter about it </li></ul></ul></ul><ul><ul><li>Discovery </li></ul></ul><ul><ul><ul><li>How to add command? </li></ul></ul></ul><ul><ul><ul><li>http://hg.toolness.com/ubiquity-firefox/raw-file/7435416f211a/examples/sample-cmd.html </li></ul></ul></ul>
    5. Concepts behind Ubiquity <ul><ul><li>Why creating Ubiquity? </li></ul></ul><ul><ul><li>Why choosing Command Line Interface? </li></ul></ul><ul><ul><li>How to handle Security issue? </li></ul></ul><ul><ul><li>Why Ubiquity when we have Add-ons, Bookmarklets and Greasemonkey? </li></ul></ul>
    6. Why creating Ubiquity? <ul><li>The modern web is composed of Verbs and Nouns </li></ul><ul><ul><li>Verbs - functionality, i.e. commands, i.e. services </li></ul></ul><ul><ul><li>Nouns - web pages, i.e. content, i.e. data </li></ul></ul><ul><li>The current web interfaces: </li></ul><ul><ul><li>share, create, interlink, and combine Nouns </li></ul></ul><ul><li>The next generation of web interfaces </li></ul><ul><ul><li>share, create, interlink, and combine  Verbs as easy as Nouns . </li></ul></ul>
    7. Why choosing Command Line Interface? <ul><ul><li>The Linguistic Interface is under developed , compared to the pointer based Interface </li></ul></ul><ul><ul><li>It should abstract away details that are not relevant to the task at hand </li></ul></ul><ul><ul><li>Possible to save chain of command and reuse it </li></ul></ul>
    8. How to handle Security issue? <ul><li>Prototyping stage </li></ul><ul><ul><li>opting for freedom of expressiveness </li></ul></ul><ul><ul><li>experimentation  over security </li></ul></ul><ul><li>In the future - Creating Trust Network </li></ul><ul><ul><li>share knowledge about which commands are trustworthy </li></ul></ul><ul><ul><li>friend's comment on command when visiting a page </li></ul></ul><ul><ul><li>thumbs-up or left you a warning </li></ul></ul>
    9. Why Ubiquity when we have Add-ons, Bookmarklets and Greasemonkey? <ul><li>Firefox Add-ons -  buttons and bars don’t scale well </li></ul><ul><ul><li>since the valuable screen real-estate they consume </li></ul></ul><ul><li>Bookmarklets -  restricted in scope </li></ul><ul><ul><li>since they only have the access privileges of the website they’re running on </li></ul></ul><ul><li>Greasemonkey -  difficult to reuse </li></ul><ul><ul><li>since it doesn’t prescribe any kind of interaction model </li></ul></ul>
    10. Brief talk on writing Command <ul><li>Hello World </li></ul><ul><li>function cmd_hello_world() { </li></ul><ul><li>   displayMessage( &quot;Hello, World!&quot;); </li></ul><ul><li>} </li></ul>
    11. <ul><li>Using CreateCommand </li></ul><ul><li>  </li></ul><ul><li>CmdUtils.CreateCommand({ ​   </li></ul><ul><li>  name: &quot;hello-world&quot; ,  </li></ul><ul><li>  homepage: &quot;http://www.editgrid.com/&quot;,  </li></ul><ul><li>  author: { name: &quot;Chiu&quot;, email: &quot;a@a.a&quot;},   </li></ul><ul><li>  contributors: [&quot;Someone&quot;],  </li></ul><ul><li>  license: &quot;MPL&quot;,   </li></ul><ul><li>  </li></ul><ul><li>  /* THE REST OF THE CODE HERE */   </li></ul><ul><li>  execute : function() {   </li></ul><ul><li>      displayMessage( &quot;Hello, World!&quot; ); }  </li></ul><ul><li>}) </li></ul>
    12. <ul><li>More complicated </li></ul><ul><li>CmdUtils.CreateCommand({  </li></ul><ul><li>  name: &quot;mytinyurl&quot;,  </li></ul><ul><li>  takes: {&quot;url to shorten&quot;: noun_arb_text},  </li></ul><ul><li>  modifiers: { with : noun_arb_text, in : noun_arb_text},  </li></ul><ul><li>  </li></ul><ul><li>  preview: &quot;Replaces the selected URL with a TinyUrl.&quot;,  </li></ul><ul><li>  execute: function( urlToShorten, mods ) {  </li></ul><ul><li>    var demo_args1 = mods. with .text; </li></ul><ul><li>    var demo_args2 = mods. in .text;      </li></ul><ul><li>    var baseUrl = &quot;http://tinyurl.com/api-create.php&quot;;  </li></ul><ul><li>    var params = { </li></ul><ul><li>      url: urlToShorten.text};  </li></ul><ul><li>      jQuery .get( baseUrl, params, function( tinyUrl ) {  </li></ul><ul><li>        CmdUtils.setSelection( tinyUrl );  </li></ul><ul><li>      }) </li></ul><ul><li>  }  </li></ul><ul><li>}) </li></ul>
    13. <ul><li>Using Noun Type </li></ul><ul><li>noun_type_color = new CmdUtils.NounType ( &quot;Color&quot;, </li></ul><ul><li>        [&quot;red&quot;, &quot;orange&quot;, &quot;yellow&quot;, &quot;green&quot;, &quot;blue&quot;,  </li></ul><ul><li>         &quot;violet&quot;, &quot;black&quot;, &quot;white&quot;,&quot;grey&quot;, &quot;brown&quot;, &quot;beige&quot;,  </li></ul><ul><li>         &quot;magenta&quot;, &quot;cerulean&quot;, &quot;puce&quot;]  </li></ul><ul><li>// etc... ); </li></ul>
    14. <ul><li>Using Noun Type </li></ul><ul><li>var noun_type_tab = {  </li></ul><ul><li>  _name: &quot;tab name&quot;,  </li></ul><ul><li>    // Returns all tabs from all windows.  </li></ul><ul><li>  getTabs: function() {  </li></ul><ul><li>      var tabs = {};  </li></ul><ul><li>      for( var j=0; j < Application.windows.length; j++ ) {  </li></ul><ul><li>        var window = Application.windows[j];  </li></ul><ul><li>        for (var i = 0; i < window.tabs.length; i++) {  </li></ul><ul><li>            var tab = window.tabs[i]; tabs[tab.document.title] = tab;  </li></ul><ul><li>        } </li></ul><ul><li>      }  </li></ul><ul><li>      return tabs;  </li></ul><ul><li>  },  </li></ul><ul><li>  suggest : function( text, html ) {  </li></ul><ul><li>    var suggestions = [];  </li></ul><ul><li>    var tabs = noun_type_tab.getTabs(); //TODO: implement a better match algorithm   </li></ul><ul><li>    for ( var tabName in tabs ) {  </li></ul><ul><li>      if (tabName.match(text, &quot;i&quot;))  </li></ul><ul><li>        suggestions.push( CmdUtils.makeSugg(tabName) ); }  </li></ul><ul><li>    return suggestions.splice(0, 5); // Return a list of input objects, limited to at most five: </li></ul><ul><li>  } </li></ul><ul><li>} </li></ul>
    15. Discuss <ul><li>Extension had ever been a reason for choosing Firefox, maybe Ubiquity will be the next. </li></ul><ul><li>http://www.readwriteweb.com/archives/the_ultimate_list_of_custom_ubiquity_verbs.php </li></ul><ul><li>https://wiki.mozilla.org/Labs/Ubiquity/Commands_In_The_Wild </li></ul><ul><li>Why so much feedback after Ubiquity first launch? even just a prototype? </li></ul>
    16. -== End ==- Q & A

    ×