0
mashup the browser with
ubiquity and Jetpack


mitcho
Michael Yoshitaka Erlewine


TechMaine 17th Annual Conference
Portla...
mitcho
                                          ?linguist, coder, teacher
                                               ...
envisioning the future of the web
envisioning the future of the web



 • the you-centric web:

   • social identity

   • interacting with the web

   • ha...
envisioning the future of the web



 • the you-centric web:

   • social identity

   • interacting with the web

   • ha...
envisioning the future of the web



 • the you-centric web:

   • social identity

   • interacting with the web

   • ha...
envisioning the future of the web



 • the you-centric web:

   • social identity

   • interacting with the web
        ...
envisioning the future of the web



 • the you-centric web:

   • social identity

   • interacting with the web

   • ha...
you live your life online
your social graph is online
aza = window.people.find({name:“Aza Raskin”});
aza.send(“Greetings from TechMaine!”);
your browser should be yours
envisioning the future of the web



 • the you-centric web:

   • social identity

   • interacting with the web

   • ha...
mashup the browser with
ubiquity and Jetpack

three problems:
 1. interaction
 2. language
 3. hackability
how do we interact with the web?
how do we interact with the computer?
CC-BY-NC-SA: flickr.com/
photos/pixcat/2324175139/
1984
1997
2001
can you spot the difference?
The web is offering more and more
functionality and API’s...
              ...but how do you use them?



• Following the ...
CC-BY-SA: flickr.com/photos/daveduarte/2678853923/
from http://tecfa.unige.ch/~nova/img/lopez1.png
Aza Raskin
CC-BY-NC: flickr.com/photos/
santheo/2360961001/
ACM interactions 2008
Aza Raskin on
text-based interfaces
“Standard GUIs, with their drop-down
menus, check buttons, and tree-lists, cannot
comp...
CC-BY: flickr.com/photos/striatic/1629254/
?
Aza Raskin on
text-based interfaces

“...maybe this confusion isn’t the fault of
command-line interfaces in general; maybe...
Aza Raskin on
text-based interfaces

“...maybe this confusion isn’t the fault of
command-line interfaces in general; maybe...
a natural language
     interface
ubiquity
ubiquity.mozilla.com
ubiquity


       DEMO
ubiquity
goal:
   accomplish more on the web

how?
   connect the web with language
ubiquity


     verbs*
           *JavaScript
ubiquity
ubiquity.mozilla.com
mashup the browser with
ubiquity and Jetpack

three problems:
 1. interaction
 2. language
 3. hackability
The multilingual internet:
1. The web is disconnected by language.
The Internet, 2005
CC-BY: commons.wikimedia.org/wiki/
File:Internet_map_4096.png
The Internet, 2005: jp, cn, tw, au, de
CC-BY: commons.wikimedia.org/wiki/
File:Internet_map_4096.png
The Internet, 2005
CC-BY: commons.wikimedia.org/wiki/
File:Internet_map_4096.png
The Internet, 2005: ut, it, pl, fr
CC-BY: commons.wikimedia.org/wiki/
File:Internet_map_4096.png
The multilingual internet:
2. The tools of the future must be multilingual.
Afrikaans           English (US)       Gaeilge                 Português (Europeu)
Shqip               Esperanto          ...
localizing ubiquity



• Writing a parser is hard
   • Principles and Parameters approach
   • a universal parser + indivi...
parser
parser



 N         N             V
goal     object
    V ( goal, object )
localizing ubiquity


 Argument identification via semantic role
localizing ubiquity


 Argument identification via semantic role
LOCALIZING UBIQUITY

Argument identification via semantic role

     role        English      Japanese

    object        ...
localizing ubiquity



            DEMO:
      ubiquity in Japanese
localizing ubiquity
     Minimal language descriptions
ubiquity 0.5
             Català     Italiano
             Dansk
Language
settings:   English    Português
            Esp...
ubiquity 0.5
   Català
   Dansk
  English
 Português
mashup the browser with
ubiquity and Jetpack

three problems:
 1. interaction
 2. language
 3. hackability
the web should be generative
the browser should be generative
Firefox Addons
 1. addons.mozilla.org (AMO)

 2. over 6000 in the wild

 3. HTML, JavaScript, XUL

 4. Extend Firefox cont...
Firefox Addons
 1. addons.mozilla.org (AMO)

 2. over 6000 in the wild

 3. HTML, JavaScript, XUL

 4. Extend Firefox cont...
Firefox Addons
 1. addons.mozilla.org (AMO)

 2. over 6000 in the wild

        my favorites: Tree Style Tabs, del.icio.us...
Firefox Addons
 1. addons.mozilla.org (AMO)

 2. over 6000 in the wild

 3. HTML, JavaScript, XUL

 4. Extend Firefox cont...
Firefox Addons
 1. addons.mozilla.org (AMO)

 2. over 6000 in the wild

 3. HTML, JavaScript, XUL

 4. Extend Firefox cont...
DEMO
+

      Firefox Addons

largest extension platform ever
+

 Firefox Addons

1.5 million downloads
but...
Firefox Addons
 1. installs need restarts

 2. not trivial to develop

 3. requires manual upgrades

 4. not designed for ...
Firefox Addons
 1. installs need restarts

 2. not trivial to develop

 3. requires manual upgrades

 4. not designed for ...
Firefox Addons
 1. installs need restarts

 2. not trivial to develop

 3. requires manual upgrades

 4. not designed for ...
Firefox Addons
 1. installs need restarts

 2. not trivial to develop

 3. requires manual upgrades

 4. not designed for ...
© John Slabyk
Jetpack
jetpack.mozillalabs.com
Jetpack

the future of extending Firefox
Jetpack
1. JavaScript, HTML, CSS

   •
   •   simple, secure, modular API

2. instant install

3. automatic upgrade
Jetpack
1. JavaScript, HTML, CSS

   •
   •   simple, secure, modular API

2. instant install

3. automatic upgrade
Jetpack
1. JavaScript, HTML, CSS

   •
   •   simple, secure, modular API

2. instant install

3. automatic upgrade
Jetpack
1. JavaScript, HTML, CSS

   •
   •   simple, secure, modular API

2. instant install

3. automatic upgrade
Jetpack
1. JavaScript, HTML, CSS

   •
   •   simple, secure, modular API

2. instant install

3. automatic upgrade
Jetpack

      DEMO 1:
      Helvetica
Jetpack

       DEMO 2:
     You Are Here
IP Query API (XML):
ipinfodb.com/ip_query2.php?ip=techmaine.com
Jetpack

       DEMO 2:
     You Are Here
© 2005 en.wikipedia.org/wiki/File:Rocket_man02_-_melbourne_show_2005.jpg




Welcome to the future.
Jetpack
jetpack.mozillalabs.com
a more personal web

a more generative web

 a more natural web

    an open web
join us
mozillalabs.com
“The best way to predict
the future is to invent it”
       —Alan Kay
Thank you!
Questions?



mitcho
Michael Yoshitaka Erlewine

   by-nc-sa
mitcho.com
@mitchoyoshitaka
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Mashup the Browser with Ubiquity and Jetpack
Upcoming SlideShare
Loading in...5
×

Mashup the Browser with Ubiquity and Jetpack

4,492

Published on

Ubiquity and Jetpack are two experiments at Mozilla Labs which are revolutionizing the ways users can interact with and customize their browsing experience. Both projects directly tackle the disconnected nature of the web by introducing user-generated mashups at the browser level, making our increasingly web-centric experiences more productive and "humane." Users and developers can now easily extend the Firefox browser with little more than the JavaScript language already used on the web.

In this presentation, you'll see how Ubiquity and Jetpack can transform your browsing experience and learn the basics of writing JavaScript code for Ubiquity and Jetpack. The presentation will also include discussion of the user-interface philosophy underlying Ubiquity and its multilingual natural language interface.

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,492
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
26
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Mashup the Browser with Ubiquity and Jetpack"

  1. 1. mashup the browser with ubiquity and Jetpack mitcho Michael Yoshitaka Erlewine TechMaine 17th Annual Conference Portland, Maine, December 10, 2009
  2. 2. mitcho ?linguist, coder, teacher Mozilla Labs, MIT mitcho.com @mitchoyoshitaka CC-BY-NC-SA: flickr.com/photos/jimgris/3538639095/
  3. 3. envisioning the future of the web
  4. 4. envisioning the future of the web • the you-centric web: • social identity • interacting with the web • hackability
  5. 5. envisioning the future of the web • the you-centric web: • social identity • interacting with the web • hackability
  6. 6. envisioning the future of the web • the you-centric web: • social identity • interacting with the web • hackability
  7. 7. envisioning the future of the web • the you-centric web: • social identity • interacting with the web today • hackability
  8. 8. envisioning the future of the web • the you-centric web: • social identity • interacting with the web • hackability
  9. 9. you live your life online
  10. 10. your social graph is online
  11. 11. aza = window.people.find({name:“Aza Raskin”}); aza.send(“Greetings from TechMaine!”);
  12. 12. your browser should be yours
  13. 13. envisioning the future of the web • the you-centric web: • social identity • interacting with the web • hackability
  14. 14. mashup the browser with ubiquity and Jetpack three problems: 1. interaction 2. language 3. hackability
  15. 15. how do we interact with the web?
  16. 16. how do we interact with the computer?
  17. 17. CC-BY-NC-SA: flickr.com/ photos/pixcat/2324175139/
  18. 18. 1984
  19. 19. 1997
  20. 20. 2001
  21. 21. can you spot the difference?
  22. 22. The web is offering more and more functionality and API’s... ...but how do you use them? • Following the GUI paradigm... • add more buttons? • add more menus?
  23. 23. CC-BY-SA: flickr.com/photos/daveduarte/2678853923/
  24. 24. from http://tecfa.unige.ch/~nova/img/lopez1.png
  25. 25. Aza Raskin CC-BY-NC: flickr.com/photos/ santheo/2360961001/
  26. 26. ACM interactions 2008
  27. 27. Aza Raskin on text-based interfaces “Standard GUIs, with their drop-down menus, check buttons, and tree-lists, cannot compare to the range of options that a text interface effortlessly provides. With just five alphanumeric characters, we can choose one out of 100,000,000 possible sequences... It’s difficult to come up with a non-text-based interface that can perform as well.” CC-BY-SA: flickr.com/photos/ seanosh/3307290530/
  28. 28. CC-BY: flickr.com/photos/striatic/1629254/
  29. 29. ?
  30. 30. Aza Raskin on text-based interfaces “...maybe this confusion isn’t the fault of command-line interfaces in general; maybe it’s just the command lines we’re used to. If commands were memorable, and their syntax forgiving, perhaps we wouldn’t be so scared to reconsider these interface paradigms.” CC-BY-SA: flickr.com/photos/ seanosh/3307290530/
  31. 31. Aza Raskin on text-based interfaces “...maybe this confusion isn’t the fault of command-line interfaces in general; maybe it’s just the command lines we’re used to. If commands were memorable, and their syntax forgiving, perhaps we wouldn’t be so scared to reconsider these interface paradigms.” CC-BY-SA: flickr.com/photos/ seanosh/3307290530/
  32. 32. a natural language interface
  33. 33. ubiquity ubiquity.mozilla.com
  34. 34. ubiquity DEMO
  35. 35. ubiquity goal: accomplish more on the web how? connect the web with language
  36. 36. ubiquity verbs* *JavaScript
  37. 37. ubiquity ubiquity.mozilla.com
  38. 38. mashup the browser with ubiquity and Jetpack three problems: 1. interaction 2. language 3. hackability
  39. 39. The multilingual internet: 1. The web is disconnected by language.
  40. 40. The Internet, 2005 CC-BY: commons.wikimedia.org/wiki/ File:Internet_map_4096.png
  41. 41. The Internet, 2005: jp, cn, tw, au, de CC-BY: commons.wikimedia.org/wiki/ File:Internet_map_4096.png
  42. 42. The Internet, 2005 CC-BY: commons.wikimedia.org/wiki/ File:Internet_map_4096.png
  43. 43. The Internet, 2005: ut, it, pl, fr CC-BY: commons.wikimedia.org/wiki/ File:Internet_map_4096.png
  44. 44. The multilingual internet: 2. The tools of the future must be multilingual.
  45. 45. Afrikaans English (US) Gaeilge Português (Europeu) Shqip Esperanto Italiano ਪ"ਜਾਬੀ !"#$ Eesti keel română অসমীয়া suomi Kannada Русский Euskara Français српски Беларуская Frysk සිංහල Kurdî বাংলা (ভারত) Galego slovenčina Latvieššu Български ქართული lietuvių kalba slovensko català Deutsch Español (de Argentina) Македонски (简 ) Ελληνικά Español (de España) मराठी ગ"જરાતી Svenska ( ) Norsk bokmål Telugu ‫עברית‬ Norsk nynorsk Hrvatski ไทย !ह#दी (भारत) occitan (lengadocian) Češština Українська Dansk Magyar %&‫)(ر‬ Tiếng Việt Nederlands íslenska Polski Cymraeg English (British) Bahasa Indonesia Português (do Brasil)
  46. 46. localizing ubiquity • Writing a parser is hard • Principles and Parameters approach • a universal parser + individual language settings
  47. 47. parser
  48. 48. parser N N V goal object V ( goal, object )
  49. 49. localizing ubiquity Argument identification via semantic role
  50. 50. localizing ubiquity Argument identification via semantic role
  51. 51. LOCALIZING UBIQUITY Argument identification via semantic role role English Japanese object ø o goal to ni, e location at, on de
  52. 52. localizing ubiquity DEMO: ubiquity in Japanese
  53. 53. localizing ubiquity Minimal language descriptions
  54. 54. ubiquity 0.5 Català Italiano Dansk Language settings: English Português Español Svenska Français
  55. 55. ubiquity 0.5 Català Dansk English Português
  56. 56. mashup the browser with ubiquity and Jetpack three problems: 1. interaction 2. language 3. hackability
  57. 57. the web should be generative
  58. 58. the browser should be generative
  59. 59. Firefox Addons 1. addons.mozilla.org (AMO) 2. over 6000 in the wild 3. HTML, JavaScript, XUL 4. Extend Firefox contest
  60. 60. Firefox Addons 1. addons.mozilla.org (AMO) 2. over 6000 in the wild 3. HTML, JavaScript, XUL 4. Extend Firefox contest
  61. 61. Firefox Addons 1. addons.mozilla.org (AMO) 2. over 6000 in the wild my favorites: Tree Style Tabs, del.icio.us, AdBlock, Firebug
  62. 62. Firefox Addons 1. addons.mozilla.org (AMO) 2. over 6000 in the wild 3. HTML, JavaScript, XUL 4. Extend Firefox contest
  63. 63. Firefox Addons 1. addons.mozilla.org (AMO) 2. over 6000 in the wild 3. HTML, JavaScript, XUL 4. Extend Firefox contest
  64. 64. DEMO
  65. 65. + Firefox Addons largest extension platform ever
  66. 66. + Firefox Addons 1.5 million downloads
  67. 67. but...
  68. 68. Firefox Addons 1. installs need restarts 2. not trivial to develop 3. requires manual upgrades 4. not designed for quick security review
  69. 69. Firefox Addons 1. installs need restarts 2. not trivial to develop 3. requires manual upgrades 4. not designed for quick security review
  70. 70. Firefox Addons 1. installs need restarts 2. not trivial to develop 3. requires manual upgrades 4. not designed for quick security review
  71. 71. Firefox Addons 1. installs need restarts 2. not trivial to develop 3. requires manual upgrades 4. not designed for quick security review
  72. 72. © John Slabyk
  73. 73. Jetpack jetpack.mozillalabs.com
  74. 74. Jetpack the future of extending Firefox
  75. 75. Jetpack 1. JavaScript, HTML, CSS • • simple, secure, modular API 2. instant install 3. automatic upgrade
  76. 76. Jetpack 1. JavaScript, HTML, CSS • • simple, secure, modular API 2. instant install 3. automatic upgrade
  77. 77. Jetpack 1. JavaScript, HTML, CSS • • simple, secure, modular API 2. instant install 3. automatic upgrade
  78. 78. Jetpack 1. JavaScript, HTML, CSS • • simple, secure, modular API 2. instant install 3. automatic upgrade
  79. 79. Jetpack 1. JavaScript, HTML, CSS • • simple, secure, modular API 2. instant install 3. automatic upgrade
  80. 80. Jetpack DEMO 1: Helvetica
  81. 81. Jetpack DEMO 2: You Are Here
  82. 82. IP Query API (XML): ipinfodb.com/ip_query2.php?ip=techmaine.com
  83. 83. Jetpack DEMO 2: You Are Here
  84. 84. © 2005 en.wikipedia.org/wiki/File:Rocket_man02_-_melbourne_show_2005.jpg Welcome to the future.
  85. 85. Jetpack jetpack.mozillalabs.com
  86. 86. a more personal web a more generative web a more natural web an open web
  87. 87. join us mozillalabs.com
  88. 88. “The best way to predict the future is to invent it” —Alan Kay
  89. 89. Thank you! Questions? mitcho Michael Yoshitaka Erlewine by-nc-sa mitcho.com @mitchoyoshitaka
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×