Education/Projects/JetpackForLearning/Outline: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(42 intermediate revisions by 4 users not shown)
Line 17: Line 17:


'''What if I miss a seminar?'''
'''What if I miss a seminar?'''
* No worries! We will record and post all seminars for you to catch up.
* 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: [http://vimeo.com/user2768207]


=== Seminar 1 - Getting Started (9 December 2009) ===  
=== Seminar 1 - Getting Started (9 December 2009) ===  
Line 24: Line 24:


* What is Jetpack?
* What is Jetpack?
* Design principles (Web-based, [http://vimeo.com/7660200 Secure] (video), Robust, Extensible)
* [https://jetpack.mozillalabs.com/principles.html Design principles] (Web-based, [http://vimeo.com/7660200 Secure] (video), Robust, Extensible)
* Requirements (HTML, JavaScript, CSS)
* Requirements (HTML, JavaScript, CSS)
* The [http://docs.jquery.com/Tutorials jQuery] (tutorial) influence
* The [http://docs.jquery.com/Tutorials jQuery] (tutorial) influence
Line 32: Line 32:
* Basic examples
* Basic examples


'''Supporting Materials:'''
'''Background Materials:'''
* Demo Screencast / Hello World (coming soon)
* [http://www.vimeo.com/8065666 Introductory Screencast] (Brian King)
* [http://vimeo.com/4752576 Jetpack Tutorial] (Aza Raskin)
* [http://vimeo.com/4752576 Jetpack Tutorial] (Aza Raskin)
* [http://jetpackgallery.mozillalabs.com/ JetPack Gallery] (Seminar 1, to check the JetPack experience - recommended by Brian to get a feel)
'''Seminar 1 Recording:'''
* [http://www.iblipper.com/temp/Jetpack-Seminar1.mov high quality .mov file]
* [http://vimeo.com/user2768207 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 [https://developer.mozilla.org/en/Extensions 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 [https://developer.mozilla.org/en/Jetpack Jetpack section of the Mozilla Developer Center].
* jQuery, the powerful JavaScript library is built into Jetpack. We recommend taking advantage of it. See the [http://docs.jquery.com/Tutorials jQuery Tutorials page] and the [http://visualjquery.com/ Visual jQuery Guide].
* Join the #jetpack and #education channels on [http://irc.mozilla.org/ 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 [https://bespin.mozilla.com/ Bespin].
* [http://jetpackgallery.mozillalabs.com/ JetPack Gallery]. It is recommended that you only deploy here when your project has matured.
* We recommend [http://github.com 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 [http://www.brighthub.com/hubfolio/matthew-casperson/articles/52164.aspx?p=2 this tutorial]
* [https://wiki.mozilla.org/Labs/Jetpack/In_The_Wild Jetpacks in the Wild]
* [https://wiki.mozilla.org/Labs/Jetpack/JEPs Jetpack Enhancement Proposals] -- Contribute!
* The [http://groups.google.com/group/mozilla-labs-jetpack mozilla-labs-jetpack] is the best place to go for technical help. The Jetpack developers are in that group.
'''Team annotations'''
* [[Education/Projects/JetpackForLearning/ExpressionWidgets/notes1| ExpressionWidgetsTeam Seminar 1 notes]]


=== Seminar 2 - Design (16 December 2009) ===
=== Seminar 2 - Design (16 December 2009) ===
Line 48: Line 69:


'''Supporting Materials:'''
'''Supporting Materials:'''
* Screencast of UI Options (coming soon)
* Blog post by Andy: [http://surfmind.com/muzings/?p=560 Encouraging paper prototyping]
* Get Andy's templates for paper prototyping [http://surfmind.com/lab/mozilla/jetpack/ here]
* Andy's materials are stored [http://surfmind.com/lab/mozilla/jetpack here]
* Screencast for Course 2 [http://vimeo.com/8220542 on Vimeo] or alternatively [http://www.screencast.com/users/briks/folders/Jetpack%20for%20Learning/media/3360f6da-10c1-42e0-b60c-e4471168f4ac on screencast.com].
 
'''Seminar 2 Recording'''
* [http://emea73838399.emea.acrobat.com/p39042865/ Replay the recording in Adobe Connect]
 
'''Links mentioned during the seminar'''
* [http://www.macupdate.com/info.php/id/15979/growl link to osx growl]
* [http://www.growlforwindows.com/gfw/ 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 - [http://www.screencast.com/users/briks/folders/Jetpack%20for%20Learning/media/76df4b46-dca8-4e2c-b9a6-8df95cac9810 screencast.com] | [http://vimeo.com/8577918 Vimeo] (Brian King)
* [http://docs.google.com/present/view?id=dhtnds9n_118ff5t4sg4 Slides]
 
'''Links Mentioned in the Seminar'''
 
Storage Examples
* [http://jetpackgallery.mozillalabs.com/jetpacks/245 MenuNotes] : simple storage example
* [http://jetpackgallery.mozillalabs.com/jetpacks/65 JetStatus] : another storage example that saves your twitter handle with storage
* [http://jetpackgallery.mozillalabs.com/jetpacks/169 Twitter URL Updates] : uses storage.settings to store configuration
 
'''Seminar 3 Recording'''
* [http://emea73838399.emea.acrobat.com/p13599202/ Replay the recording in Adobe Connect]
 
=== Seminar 4 - Jetpack and the Browser (13 January 2010) ===
Separate from the Jetpack UI, there are some browsers features available to you. Seminar 4 will talk about them, including the interaction with Web content similar to what is seen in Greasemonkey user scripts.
 
* Tabs
* Places (History, Bookmarks, ...)
* Page Mods
* Interaction with Web content
* Beyond the browser (jetpack.info) - System
 
'''Background Materials:'''
* Screencast - [http://www.screencast.com/users/briks/folders/Jetpack%20for%20Learning/media/54207295-0be7-4292-a58d-b3839b6066b7 screencast.com] | [http://vimeo.com/8718895 Vimeo] (Brian King)
* [http://docs.google.com/present/view?id=dhtnds9n_120fwdsjr6v Slides]
 
'''Links Mentioned in the Seminar'''
 
Jetpacks that use PageMods
* [http://jetpackgallery.mozillalabs.com/jetpacks/201 Flickr Fingr]
* [http://jetpackgallery.mozillalabs.com/jetpacks/262 Mozilla Wiki Edit Link Remover]
 
'''Seminar 4 Recording'''
* [http://emea73838399.emea.acrobat.com/p83565975/ Replay the recording in Adobe Connect]
* [http://bokaap.net/Jetpack-Seminar4-BrowserInteraction.flv Download the recording in FLV format (plays in VLC Player)]
 
=== Seminar 5 - Jetpack and Web APIs (20 January 2010) ===
* Consuming Web Services
* Ajax
** with jQuery
** Plain 'Ol XMLHttpRequest
* Response Handling
** JSON
** XML
* Upload and Progress
* Best Practices
 
'''Background Materials:'''
* [http://docs.google.com/present/view?id=dhtnds9n_121cx8mr6d3 Slides]
 
'''Links Mentioned in the Seminar'''
* [http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/ 5 Ways to Make Ajax Calls with jQuery]
* [http://demos.hacks.mozilla.org/openweb/uploadingFiles/ File Upload and Firefox 3.6 demo]


=== Seminar 3 - Data & Storage ===
'''Seminar 5 Recording'''
* Replay the recording in Adobe Connect
* [http://bokaap.net/Jetpack-Seminar5-WebServices.flv Download the recording in FLV format (plays in VLC Player)]


=== Seminar 4 - Browser Interaction ===
=== Seminar 6 - The Next Level (27 January 2010) ===
Seminar 6 aims to cover the less used but many times more powerful features of Jetpack. Also featured will be some of the cutting edge technologies in Firefox that can be exploited from Jetpacks.


=== Seminar 5 - Customization ===
* HTML5 - Video, Audio, Canvas, Geolocation, and more
** Audio (jetpack.audio)
** Video (jetpack.video)
** Geolocation
** Canvas
** Drag and Drop
* Summative Evaluations with RITE
* Localization
** [https://wiki.mozilla.org/Labs/Jetpack/JEP/35 Internationalization/Localization API]
** [https://wiki.mozilla.org/Labs/Jetpack/JEP/36 Localization environment]


=== Seminar 6 - The Next Level ===
Slides and Notes
* [http://docs.google.com/present/view?id=dhtnds9n_122xn8f36fh Brian's slides]
* [https://wiki.mozilla.org/Education/Projects/JetpackForLearning/Seminar6Chat Chat log]

Latest revision as of 13:17, 28 January 2010

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:

Seminar 1 Recording:

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

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:

Seminar 2 Recording

Links mentioned during the seminar

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:

Links Mentioned in the Seminar

Storage Examples

Seminar 3 Recording

Seminar 4 - Jetpack and the Browser (13 January 2010)

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

  • Tabs
  • Places (History, Bookmarks, ...)
  • Page Mods
  • Interaction with Web content
  • Beyond the browser (jetpack.info) - System

Background Materials:

Links Mentioned in the Seminar

Jetpacks that use PageMods

Seminar 4 Recording

Seminar 5 - Jetpack and Web APIs (20 January 2010)

  • Consuming Web Services
  • Ajax
    • with jQuery
    • Plain 'Ol XMLHttpRequest
  • Response Handling
    • JSON
    • XML
  • Upload and Progress
  • Best Practices

Background Materials:

Links Mentioned in the Seminar

Seminar 5 Recording

Seminar 6 - The Next Level (27 January 2010)

Seminar 6 aims to cover the less used but many times more powerful features of Jetpack. Also featured will be some of the cutting edge technologies in Firefox that can be exploited from Jetpacks.

Slides and Notes

Retrieved from "https://wiki.allizom.org/index.php?title=Education/Projects/JetpackForLearning/Outline&oldid=197499"