Education/Projects/JetpackForLearning/Outline

We will be storing the course outline on this page. The current version is a draft and will change. If you are a participant in the course, make sure you put this page on your watchlist (there is a Watch button at the top) to keep track of the updates.

Draft Schedule

• 9 December 2009
• 16 December 2009
• 6 January 2010
• 13 January 2010
• 20 January 2010
• 27 January 2010

Seminar Time (TBC)

• 09:00 am California
• 12:00 Boston
• 17:00 UTC
• 19:00 Cape Town
• 22:30 Delhi

What if I miss a seminar?

• No worries! We will record and post all seminars for you to catch up. Our vimeo channel is here and links to individual sessions and other recordings are posted below in the respective weeks: [1]

Seminar 1 - Getting Started (9 December 2009)

During seminar 1, we will cover the basics of what Jetpack is and how it works, and we'll make sure everyone is ready to start developing.

• What is Jetpack?
• Design principles (Web-based, Secure (video), Robust, Extensible)
• Requirements (HTML, JavaScript, CSS)
• The jQuery (tutorial) influence
• Tools and Debugging - Bespin embedded (about:jetpack and Jetpack Gallery), Firebug.
• Deploying Jetpacks
• Help forums and getting involved
• Basic examples

Background Materials:

• Introductory Screencast (Brian King)
• Jetpack Tutorial (Aza Raskin)
• JetPack Gallery (Seminar 1, to check the JetPack experience - recommended by Brian to get a feel)

Seminar Recording:

• high quality .mov file
• lower quality version hosted at vimeo

Follow-up Notes and Links:

• Teams, try to evaluate as early as possible if Jetpack is suitable for your idea, or whether you will have to use the XPI extension approach. We encourage Jetpacks, but XPI add-ons are allowed.
• The Jetpack documentation is far from complete at this point but still evolving. Start with the Tutorial and API Reference sections in about:jetpack. Eventually all documentation will be at the Jetpack section of the Mozilla Developer Center.
• jQuery, the powerful JavaScript library is built into Jetpack. We recommend taking advantage of it. See the jQuery Tutorials page and the Visual jQuery Guide.
• Join the #jetpack and #education channels on irc.mozilla.org when you can for general discussion or if you need help. Brian is 'kinger' and Andy is 'Andyed'.
• The embedded editor used in about:jetpack is Bespin.
• JetPack Gallery. It is recommended that you only deploy here when your project has matured.
• We recommend Github for code hosting
• If deploying on your own server, don't forget to use the meta link tag with rel="jetpack" as outlined in Step 6 of this tutorial
• Jetpacks in the Wild
• Jetpack Enhancement Proposals -- Contribute!
• The mozilla-labs-jetpack is the best place to go for technical help. The Jetpack developers are in that group.

Team annotations

• ExpressionWidgetsTeam Seminar 1 notes

Seminar 2 - Design (16 December 2009)

Seminar 2 provides an introduction to the main design features of Jetpack, and how to use them effectively.

• Jetpack UI : Slidebar, Statusbar, Panel, Menu, Toolbar
• UI concepts
• Heuristics
• Formative Evaluation (Wizard of Oz, Paper Prototyping)
• Beyond Jetpack: Addon UI
• Look and feel - the role of CSS

Supporting Materials:

• Blog post by Andy: Encouraging paper prototyping
• Get Andy's templates for paper prototyping here
• Andy's materials are stored here
• Screencast for Course 2 on Vimeo or alternatively on screencast.com.

Seminar Recording

• Replay the recording in Adobe Connect

Links mentioned during the seminar

• link to osx growl
• link to growl for windows

Seminar 3 - Data & Storage (6 January 2010)

Seminar 3 will cover data storage, and first-run. We live in a Web of data and the Jetpack Platform provides features to store data.

• Storage
  • Simple
  • Settings
  • And later ... Weave/Sync, File Access
• Meta
  • The me API
  • Firstrun
  • Settings

Background Materials:

• Screencast (Brian King)

Links Mentioned in the Seminar

Storage Examples

• MenuNotes : simple storage example
• JetStatus : another storage example that saves your twitter handle with storage
• Twitter URL Updates : uses storage.settings to store configuration

Seminar 4 - Browser Interaction

Separate from the UI available to Jetpacks, there are many browsers features available to you. Seminar 4 will talk about some of them, including the interaction with Web content similar to what is seen in Greasemonkey user scripts.

• User data (History, Bookmarks, ...)
• Tabs
• Interaction with Web content (Page Mods)

Seminar 5 - Web Services

• XMLHttpRequest in Jetpack
• Interaction with Web Services