Update wiki docs

[SueSmith]

Draft of issuer checklist https://github.com/mozilla/openbadges/wiki/Issuer-Checklist

Am thinking once we move this stuff off the wiki I'll be able to structure it in a more readable, possibly interactive way..

[threeqube]

Draft of issuer checklist https://github.com/mozilla/openbadges/wiki/Issuer-Checklist

This looks great. :+1:

Am thinking once we move this stuff off the wiki I'll be able to structure it in a more readable, possibly interactive way..

Sounds good.

[SueSmith]

Thanks @threeqube - I caught up with your discussion on IRC last night before I logged off re the image guidelines etc, was not at all sure of that stuff so it was good to get it confirmed :zap:

Am never sure if the sources I'm using for info are up to date or whatever, I should probably ask more questions..

[threeqube]

All is well. Yeah just wanted to make sure about svg support. Feel free to ask question on the irc channel anytime and cc/ me. I can help wrangle and cat herd. :wink:

[SueSmith]

Haha thanks @threeqube - was actually thinking I could do something specifically on using SVG badges..

[threeqube]

Have you tried baking with svg badges yourself by any chance:question:

[SueSmith]

@threeqube I've actually just now created a daft svg badge image so that I can try it, then think about possible additions to the docs on using svgs.. seems like it could be a useful option, particularly if someone wanted to e.g. create their badge images dynamically..?

[threeqube]

@threeqube I've actually just now created a daft svg badge image so that I can try it, then think about possible additions to the docs on using svgs.. seems like it could be a useful option, particularly if someone wanted to e.g. create their badge images dynamically..?

Agreed. That would be great @SueSmith. Thank you!

[SueSmith]

Started drafting an SVG guide, just dumping an image..

The Mozilla Backpack /baker and openbadges-bakery (programmatically) can handle baking/ extracting from SVGs but it doesn't seem to be possible at the moment to upload baked SVG badges to the Mozilla Backpack - is that planned at all?

I thought I remembered it being mentioned for the federated backpack - it is touched on in the docs there https://github.com/mozilla/badgekit-backpack/blob/master/API.md but not sure if it's still part of the plan there either..?

Just wondering in terms of what guidance I should give people..

[threeqube]

The Mozilla Backpack /baker and openbadges-bakery (programmatically) can handle baking/ extracting from SVGs but it doesn't seem to be possible at the moment to upload baked SVG badges to the Mozilla Backpack - is that planned at all?

A ha....so that's the issue... I don't know the plan wrt Mozilla Backpack supporting SVG baked badge upload. I'll find out what level of effort is involved to make that happen. Thanks @SueSmith!

[SueSmith]

Cool thanks @threeqube - I think that's the only bit missing in terms of being able to use SVGs for everything..

[threeqube]

Gotcha. Thanks!

[SueSmith]

@threeqube Hmm, having just tried uploading a baked SVG again I had a bit more success for some reason (I've probably done something daft earlier) - It seems to have extracted the badge data ok, it just doesn't display the SVG badge image.

If it's using the bakery to extract the data from the SVG I think that part should work already, so it might be that the only outstanding bit is displaying the SVG image in the Backpack UI..?

Also just quickly checked that the data for the badge is returned from the Displayer API and it seems to be fine, except where it links to the Backpack copy of the badge image, which naturally doesn't work because it isn't a PNG..

Hope all that makes sense!

[threeqube]

Gotcha. It'd be great to make sure the experience for both .png and .svg badges are consistent throughout in any case.

[SueSmith]

@threeqube totally, seems like it's pretty close to supporting that already, although I wouldn't have a clue how much work would be involved in completing the picture :see_no_evil:

FWIW I think svgs would appeal to me if I was getting started and wanted to build a simple issuing system.. could do so much of it without having to rely on other tools.

[SueSmith]

Have started an SVG guide, including a simple example of using a Web page to design an SVG badge image https://github.com/mozilla/openbadges/wiki/Using-SVG-Badges

Still to add:

• more SVG properties set dynamically (color etc)
• example of writing the SVG out as an image file
  • then including it in a badge class
• example of baking the SVG when awarding a badge to an earner
  • including hosted and signed badges
• example of extracting the assertion from a baked SVG
  • maybe showing it in a Web page with some sort of animated/interactive effect to display the assertion data with the SVG

Would be good to include demos for this type of thing once we have a GitHub Pages site set up..

Dumping another image:

[SueSmith]

Just occurred to me I could create a quick GitHub Pages site for my own account and just dump demos etc there for now - here's the SVG badge creator one (as it stands at the moment): http://suesmith.github.io/svg-badger.html

[SueSmith]

better image..

[SueSmith]

Adding example of writing SVG badge image to a file dynamically - image..

[threeqube]

Nice! This is cool @SueSmith will have a look at docs and hopefully get confirmation from @christensenep on where svg and png badges are treated differently.

[SueSmith]

Adding a bit more to the SVG tutorial on awarding the badges (creating assertions and baking) https://github.com/mozilla/openbadges/wiki/Using-SVG-Badges (haven't read it over properly yet..)

Still to add: extracting data from a baked SVG (and displaying it) plus examples in something other than node (maybe PHP since the thrust of this is how accessible it is with minimal coding...?)

Image..

[SueSmith]

Adding a bit on extracting and displaying the assertion data from a baked SVG badge in a Web page..

Image:

[SueSmith]

Added a bit on displaying baked SVGs, extracting some assertion data from them and building that into the display: https://github.com/mozilla/openbadges/wiki/Using-SVG-Badges#displaying-baked-svg-badges

This is the demo for it: http://suesmith.github.io/svg-display.html

Next I thought I'd expand this section to show how you could potentially interact with the content of the SVG itself, e.g. displaying a baked badge by building the assertion data into the SVG itself as it appears in the page, applying some sort of animated/ interactive effect on the SVG shapes using JavaScript/ CSS..

[SueSmith]

Doing a bit more on displaying baked SVG badges, dumping images..

[SueSmith]

Added a bit on manipulating the content of a baked SVG badge to include the assertion data, also altering the SVG shapes on hover with a CSS transition/ transform: https://github.com/mozilla/openbadges/wiki/Using-SVG-Badges#animated-and-interactive-svg-badges

Next up will add a bit on SVG animation rather than CSS..

[SueSmith]

Added a bit on using SVG animation elements rather than CSS: https://github.com/mozilla/openbadges/wiki/Using-SVG-Badges#svg-animation

dumping image..

[threeqube]

@SueSmith finally had the chance to review the documentation and it looks great! The animation examples are super fun. :star2: :exclamation:

wrt this https://github.com/mozilla/openbadges/issues/1023#issuecomment-52101930, we need to find out whether the Mozilla Backpack currently supports uploading of SVG badges or not, right? You mentioned it doesn't seem to and wanted confirmation, is that right?

[SueSmith]

Thanks @threeqube :smiley_cat: - it's a bit long but am assuming I can present it differently once it's off the wiki, maybe with demo stuff inline so that people can play with it as they go along.. Re: Mozilla Backpack support for SVG, I think @christensenep is looking into it :question:

[threeqube]

Thanks @threeqube :smiley_cat: - it's a bit long but am assuming I can present it differently once it's off the wiki, maybe with demo stuff inline so that people can play with it as they go along..

Yep, I think it's great. :+1:

Re: Mozilla Backpack support for SVG, I think @christensenep is looking into it :question:

I'll check in with @christensenep. Thanks!

[SueSmith]

Thinking this crazily long issue can probably be closed and new ones opened for any outstanding bits..

[SueSmith]

p.s. just added a bit more to the Badge Baking wiki doc:

• https://github.com/mozilla/openbadges/wiki/Badge-Baking#open-badges-bakery
  • examples of using openbadges-bakery in node
• https://github.com/mozilla/openbadges/wiki/Badge-Baking#baking-svgs
  • more on baking with SVGs

[threeqube]

• https://github.com/mozilla/openbadges/wiki/Badge-Baking#open-badges-bakery examples of using openbadges-bakery in node
• https://github.com/mozilla/openbadges/wiki/Badge-Baking#baking-svgs more on baking with SVGs

These are great @SueSmith!