Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Ubiquity The next generation web interface
<ul><ul><li>What's Ubiquity </li></ul></ul><ul><ul><li>Ubiquity Demo </li></ul></ul><ul><ul><li>Concepts behind Ubiquity <...
What's Ubiquity? <ul><ul><li>A Mozilla labs project </li></ul></ul><ul><ul><li>A Firefox  Extension </li></ul></ul><ul><ul...
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>...
Concepts behind Ubiquity <ul><ul><li>Why creating Ubiquity? </li></ul></ul><ul><ul><li>Why choosing Command Line Interface...
Why creating Ubiquity? <ul><li>The modern web is composed of Verbs and Nouns </li></ul><ul><ul><li>Verbs - functionality, ...
Why choosing Command Line Interface? <ul><ul><li>The Linguistic Interface is  under developed , compared to the pointer ba...
How to handle Security issue? <ul><li>Prototyping stage </li></ul><ul><ul><li>opting  for freedom of expressiveness </li><...
Why Ubiquity when we have Add-ons, Bookmarklets and Greasemonkey? <ul><li>Firefox Add-ons  -  buttons and bars don’t scale...
Brief talk on writing Command <ul><li>Hello World </li></ul><ul><li>function cmd_hello_world() { </li></ul><ul><li>   disp...
<ul><li>Using CreateCommand </li></ul><ul><li>  </li></ul><ul><li>CmdUtils.CreateCommand({ ​   </li></ul><ul><li>   name: ...
<ul><li>More complicated </li></ul><ul><li>CmdUtils.CreateCommand({  </li></ul><ul><li>   name: &quot;mytinyurl&quot;,  </...
<ul><li>Using Noun Type </li></ul><ul><li>noun_type_color = new  CmdUtils.NounType ( &quot;Color&quot;, </li></ul><ul><li>...
<ul><li>Using Noun Type </li></ul><ul><li>var noun_type_tab = {  </li></ul><ul><li>   _name: &quot;tab name&quot;,   </li>...
Discuss <ul><li>Extension had ever been a reason for choosing Firefox, maybe Ubiquity will be the next. </li></ul><ul><li>...
-== End ==- Q & A
Upcoming SlideShare
Loading in …5
×

Ubiquity

1,760 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×