617160 - Finalize list of tags/keywords for MDN demo room

Status: VERIFIED FIXED

(developer.mozilla.org Graveyard :: Demo Studio / Dev Derby, defect)

Description

[Jay Patel [:jay]]

Contributors will be able to select technology tags/keywords related to their demos when submitting.  This will allow us to do quick searches, filtering, etc... as well as create automated links to documentation and resources for those keywords.

In order to make it easier to implement those features and possibly even provide auto-complete functionality, we felt it was best to start with a finite list of terms.

So far, we have the following 13 terms:

Audio
Canvas
CSS3
Device
File
Game
Geolocation
HTML5
IndexedDB
Mobile
SVG
Video
WebGK
WebSockets

There are definitely some important terms missing, so let's see if we can find the right set of 7 remaining keywords to add to that list so we cover any demos that might be submitted.

Please comment in this bug with your thoughts on what needs to be added.  Thanks!

Comment 1

[Janet Swisher]

+ Form validation

Comment 2

[Florian Scholz (Open Web Docs)]

MathML
SMIL

Comment 3

[Chris Howse [:chowse]]

From WebDev: Local Storage & Offline Support

Comment 4

[Chris Howse [:chowse]]

And a major one: Web Workers

Comment 5

[Paul Rouget [:paul]]

+ Network (XHR v2?)
+ Javascript
+ Offline (for localstorage & App Cache)
+ Geolocation
+ new APIs (history API, Drag'n Drop, ...)
+ fonts (font-face, font-feature-opentype, ...)

Comment 6

[Les Orchard [:lorchard]]

Keep suggestions coming, but FWIW on reviewing the wireframes, what I'll eventually need specifically nailed down in this bug is a table or spreadsheet with the following columns:

* name - all lowercase keyword, no spaces, not displayed but used as unique ID in database
* title - human-friendly prose title, displayed in lists and forms
* description - human-friendly copy describing the tag in greater detail, displayed on tagged demo listing

We should be able to add/remove/edit tags after launch, but this bug should give us a decent seed list with copywriting on descriptions to start

Comment 7

[Les Orchard [:lorchard]]

New mockup for the tag page:

https://people.mozilla.com/~chowse/drop/mdn/demo-gallery/v3/03_Tag_Demos.html

This one includes links to documentation along with the name / title / description, so I'll need those for each tag also.

Comment 8

[Chris Howse [:chowse]]

(In reply to comment #7)
> This one includes links to documentation along with the name / title /
> description, so I'll need those for each tag also.

As well as a header icon, which I will provide in the hi-fid mocks (I should have about pretty good coverage, and can use fallback icon for the others).

Comment 9

[Chris Howse [:chowse]]

Here's the list of tags I'm considering for the first iteration:

  Audio
  Canvas
  CSS3
  Device
  Files [file API, drag + drop]
  Forms [validation, new form types]
  Fonts & Type [@font-face and friends]
  Geolocation
  History
  HTML5
  IndexedDB
  MathML
  Mobile
  Offline Storage [local storage, app cache]
  SVG [+ SMIL]
  Video
  WebGL
  WebSockets
  Web Workers
  XMLHttpRequest

The list still feels a bit long, but it should be comprehensive enough from a demo creator's and seeker's perspective.

While we will present all options during demo submission and preview, I'd recommend hiding tags from gallery pages until there are at least 2-4 demos that make use of it. For example, if there is only 1 demo that makes use of IndexedDB or and no demo that makes use of MathML, those tags would not be included in the main listing.

Comment 10

[Jay Patel [:jay]]

I think 20 is a good compromise... it is long, but we're working with the open web.  There's a lot out there that people will be using to show off the technology... so I think we see how the 20 work out for now.

As requests for additions come in, we can evaluate if they fit under an existing tag or if we need to work on tag management to grow, modify, or shrink the list.

On Chowse's point on hiding tags with only 1 or 2 demos, I don't think that's a good idea.  There are a lot of tags that might only have 1 demo for a long time, so we should make that visible and accessible.  I don't think search and filters will make them discoverable enough and they will sort of just go unnoticed.

If anyone has thoughts on Chowse's latest list, please chime in.  Otherwise we can go with that and revisit after we've been live for a while and have a good number of demos to see how things are working.

Comment 11

[Florian Scholz (Open Web Docs)]

I've started to collect the required information based on Chowse's list:
http://etherpad.mozilla.org:9000/demo-room-tags

Feel free to copy-edit and complete it.

Comment 12

[Paul Rouget [:paul]]

I think we should have File AND Drag-n-Drop, and remove MathML (and remove Mobile, it's should not be a tag).

Comment 13

[Paul Rouget [:paul]]

And Javascript is missing.

Comment 14

[Jay Patel [:jay]]

(In reply to comment #12)
> I think we should have File AND Drag-n-Drop, and remove MathML (and remove
> Mobile, it's should not be a tag).

We need Mobile, since that will be the only way to identify any demos created for Mobile (primarily).

I think Files is fine in this case, since we need to have keywords that represent multiple features given the limited number of keywords we can accomodate.

We can remove MathML and replace it with Javascript.

Comment 15

[Paul Rouget [:paul]]

Drag'n drop is not just about Files (you can dnd html elements).

A demo could be both for mobile and desktop.

Comment 16

[Jay Patel [:jay]]

(In reply to comment #15)
> Drag'n drop is not just about Files (you can dnd html elements).

Ok, valid point.  Does DnD fall under any of the other existing categories?  If you had a DnD demo, which of the current list of keywords would you associate it with?

Just trying to figure out if DnD requires a separate keyword, since it is a cool feature, but a very limited/specific thing.

> 
> A demo could be both for mobile and desktop.

Yeah... by default, we will assume all the demos are created for desktop, but we want to be able to tag any that were created with mobile in mind.   This is something the mobile team asked for (a way to filter out all demos that can be considered mobile-friendly)... so we need it.

Comment 17

[Jay Patel [:jay]]

(In reply to comment #15) 
> A demo could be both for mobile and desktop.

We *could* add desktop, BUT the reason we did not is that it would be used for almost every demo anyway... and we wanted the developer to focus on the more important tags/keywords to pick for their demo.  Since we are limiting them to 5 keywords per demo, it's important that they pick the ones that will add the most value to our users (to help them discover them and to point them to relevant content).

Comment 18

[Paul Rouget [:paul]]

I think we should remove:
× MathML
× HTML5 (what is "HTML5" but not part of this list? And HTML5 is already a category)
× History (it's an interesting API, but there is more important APIs we don't mention)

And add Javascript, Native DND, maybe multitouch.

So the "mobile" tag means "Works on mobile, plz show it on the mobile version of the website". Sounds good.

Comment 19

[Jay Patel [:jay]]

(In reply to comment #18)
> I think we should remove:
> × MathML

works for me.  we will remove.

> × HTML5 (what is "HTML5" but not part of this list? And HTML5 is already a
> category)

well, i am not an expert, but i'm assuming everything in the current list is NOT a part of the html5 spec.  there are some features/technologies that are technically not html5, right?  if that is the case, we definitely need to have html5 as a catch-all.  and with all the talk about improving perception around html5 and mozilla, we should keep it.

> × History (it's an interesting API, but there is more important APIs we don't
> mention)

Sure... if this is the case, we can remove this as well.

> 
> And add Javascript, Native DND, maybe multitouch.

Sounds good.  I think JS and multitouch definitely belong in there.  Still not sure about dnd, but we can fit it in.
> 
> So the "mobile" tag means "Works on mobile, plz show it on the mobile version
> of the website". Sounds good.

Yup, exactly. ;-)

This will require some help from Chowse to get the icons created for the new items in the list.

Chowse: Can you create icons for "Javascript", "Drag N Drop", and "Multitouch"?  I believe those are the only 3 new ones we are adding to the list.

Comment 20

[Chris Howse [:chowse]]

Attachment: Updated Technology Icon Set

Here are all the technology icons for the demo gallery. Javascript, Drag & Drop, and Multitouch have been added. I've also modified a few icons to make use of the W3C's new HTML5 icons (http://www.w3.org/html/logo/#the-technology). CSS3, IndexedDB, WebGL, and Web Workers make use of these icons.

Comment 21

[Chris Howse [:chowse]]

Attachment: Updated Technology Icon Set (PSD & PNGs)

Comment 22

[Paul Rouget [:paul]]

Looks awesome :)

2 comments:
* Geolocation looks like a gamepad
* Javascript: a cup of coffee, hmm, this is for Java. What about the brackets '{}' ?

Comment 23

[Jay Patel [:jay]]

(In reply to comment #22)
> Looks awesome :)
> 
> 2 comments:
> * Geolocation looks like a gamepad
> * Javascript: a cup of coffee, hmm, this is for Java. What about the brackets
> '{}' ?

+1 on awesome!  Chowse:  Thanks for updating with the W3C icons.

Re: Paul's comments, now that he mentioned it... 

1. the Geo icon does look like a joystick.  Can we just use a plan globe with the long and lat lines or something?
2. I agree that we should avoid any Java imagery there.  I think curly brackets are a good idea, but not sure if it's the best representation for JS.  I think a simple "JS" in letters will work just as well.

Chowse:  Can you make those 2 tweaks please?

Comment 24

[Austin King [:ozten]]

(In reply to comment #23)
Is there a wiki page with the finalized list (probably easier to manage then bug comments).

For the dteam project, clicking tags should go to a destination. I think MDN wiki pages are best and can be localized. We need to add these urls to the list of tags.

Examples:
CSS3 https://developer.mozilla.org/en/CSS
Geolocation https://developer.mozilla.org/En/Using_geolocation

I need the definitive list of tags and their urls.

Comment 25

[Jay Patel [:jay]]

Sorry, I thought people had seen comment #11.  We are keeping all the copy and links in this etherpad: http://etherpad.mozilla.org:9000/demo-room-tags

I sent Les and Craig the URL via email, sorry Austin... didn't know you needed that info too.  Hope this helps. :-)

Comment 26

[Les Orchard [:lorchard]]

In this list so far, there's only one "Learn More" link for each technology. But, the design includes 3:

https://developer-stage9.mozilla.org/en-US/demos/tag/html5/

If all we want is the "MDN Documentation" link for each, that's fine. Just want to be sure we're not missing anything

Comment 27

[Jay Patel [:jay]]

(In reply to comment #26)
> In this list so far, there's only one "Learn More" link for each technology.
> But, the design includes 3:
> 
> https://developer-stage9.mozilla.org/en-US/demos/tag/html5/
> 
> If all we want is the "MDN Documentation" link for each, that's fine. Just want
> to be sure we're not missing anything

I've asked Janet to help get the Wikipedia and W3C links for us as well.  If she can't get to it, I will dig them up for you on Monday.  Does that work?

Comment 28

[Les Orchard [:lorchard]]

(In reply to comment #27)

> I've asked Janet to help get the Wikipedia and W3C links for us as well.  If
> she can't get to it, I will dig them up for you on Monday.  Does that work?

Sure - we just need this list final as a dependency to string freeze.

One other note: The site design allows for multiple links and customizable link text. 

That said, IMO some of these may need more than one MDN doco link. "Device", for example, mentions media queries and orientation in the description - but only orientation has a link.

Comment 29

[Chris Howse [:chowse]]

Attachment: Updated Technology Icon Set

Comment 30

[Chris Howse [:chowse]]

Attachment: Updated Technology Icon Set (PSD & PNGs)

Comment 31

[Paul Rouget [:paul]]

Great! I like it.

Comment 32

[Les Orchard [:lorchard]]

Calling this closed

Comment 33

[Chris Howse [:chowse]]

Attachment: HTML5 Icon

Per request: an HTML5 technology icon.

Comment 34

[Jay Patel [:jay]]

Reopening to get the HTML5 icon updates... we missed that one. 

Les:  Can you help with this one?

Comment 35

[Chris Howse [:chowse]]

Here's that icon BTW:

https://bugzilla.mozilla.org/attachment.cgi?id=512966&action=edit

Comment 36

[Les Orchard [:lorchard]]

(In reply to comment #35)
> Here's that icon BTW:
> 
> https://bugzilla.mozilla.org/attachment.cgi?id=512966&action=edit

https://github.com/fwenzel/mdn/commit/0c292af5f084011a049887b0555fa130b35bff5b