Flickr style notes for the Design Team

[Jef van Schendel]

Hi all,

As some of you may remember, in Máirín's design-pony post [1] one of the
ideas was to have Flickr-style note-taking for designers to communicate more
efficiently. If you have no idea what I'm talking about, try it out by
rolling your mouse over this image [2].

The obvious benefit of this is that even though we're all over the globe, we
can still "point at the screen" and comment on different parts of a design.
I think this would be especially great for UI and web design. :)

So I did a little research and it seems that Flickr's implementation is
based on a standard called Fotonotes [3]. Fotonotes also provides a
Javascript client and it's all open source. I even found a MediaWiki
extension [4], but you need to patch MediaWiki to get it to work so I'm not
sure if it's suitable for our own wiki. An example can be found here [5]
though.

I tried it out and it's very simple to set up. You can see an instance on my
fpo space [6], though it doesn't save anything. I also tried out Tipmage [7]
here [8], which is about the same thing, also in Javascript and open source.
Double-click to add a note! Again, this doesn't yet save anything.

Anyhow, I was thinking that we should really set something like this up for
the Design Team. Like fpaste.org for designers. It doesn't seem too hard
(even I could get it working!) and it's really extremely cool IMO.

Has anyone ever tried these before? Any experiences or comments?

Do you guys think this is possible to set up somewhere? :)

Jef

[1]
http://mairin.wordpress.com/2010/03/01/the-one-where-the-designers-ask-fo...
[2] http://www.flickr.com/photos/rjl20/2218551175/
[3] http://fotonotes.net/
[4] http://www.mediawiki.org/wiki/Extension:Fotonotes
[5] http://www.werelate.org/wiki/Image:Test_image.jpg
[6] http://schendje.fedorapeople.org/fotonotes/docs/test_dog.html
[7] http://digitalhymn.com/argilla/tipmage/
[8] http://schendje.fedorapeople.org/fotonotes2/test.htm

[Fabian A. Scherschel]

Sounds like a good idea to me! :D

Fab


On Thu, Nov 25, 2010 at 10:41 PM, Jef van Schendel <jefvanschendel(a)gmail.com
>  wrote: 
>  Hi all,
>
>  As some of you may remember, in Máirín's design-pony post [1] one of the
>  ideas was to have Flickr-style note-taking for designers to communicate more
>  efficiently. If you have no idea what I'm talking about, try it out by
>  rolling your mouse over this image [2].
>
>  The obvious benefit of this is that even though we're all over the globe,
>  we can still "point at the screen" and comment on different parts of a
>  design. I think this would be especially great for UI and web design. :)
>
>  So I did a little research and it seems that Flickr's implementation is
>  based on a standard called Fotonotes [3]. Fotonotes also provides a
>  Javascript client and it's all open source. I even found a MediaWiki
>  extension [4], but you need to patch MediaWiki to get it to work so I'm not
>  sure if it's suitable for our own wiki. An example can be found here [5]
>  though.
>
>  I tried it out and it's very simple to set up. You can see an instance on
>  my fpo space [6], though it doesn't save anything. I also tried out Tipmage
>  [7] here [8], which is about the same thing, also in Javascript and open
>  source. Double-click to add a note! Again, this doesn't yet save anything.
>
>  Anyhow, I was thinking that we should really set something like this up for
>  the Design Team. Like fpaste.org for designers. It doesn't seem too hard
>  (even I could get it working!) and it's really extremely cool IMO.
>
>  Has anyone ever tried these before? Any experiences or comments?
>
>  Do you guys think this is possible to set up somewhere? :)
>
>  Jef
>
>  [1]
>  http://mairin.wordpress.com/2010/03/01/the-one-where-the-designers-ask-fo...
>  [2] http://www.flickr.com/photos/rjl20/2218551175/
>  [3] http://fotonotes.net/
>  [4] http://www.mediawiki.org/wiki/Extension:Fotonotes
>  [5] http://www.werelate.org/wiki/Image:Test_image.jpg
>  [6] http://schendje.fedorapeople.org/fotonotes/docs/test_dog.html
>  [7] http://digitalhymn.com/argilla/tipmage/
>  [8] http://schendje.fedorapeople.org/fotonotes2/test.htm
>
>  _______________________________________________
>  design-team mailing list
>  design-team(a)lists.fedoraproject.org
>  https://admin.fedoraproject.org/mailman/listinfo/design-team
>

[Nicu Buculei]

On 11/25/2010 11:41 PM, Jef van Schendel wrote:
>  As some of you may remember, in Máirín's design-pony post [1] one
> of the
>  ideas was to have Flickr-style note-taking for designers to communicate
>  more efficiently. If you have no idea what I'm talking about, try it out
>  by rolling your mouse over this image [2].
>
>  The obvious benefit of this is that even though we're all over the
>  globe, we can still "point at the screen" and comment on different parts
>  of a design. I think this would be especially great for UI and web
>  design. :)
>
>  So I did a little research and it seems that Flickr's implementation is
>  based on a standard called Fotonotes [3]. Fotonotes also provides a
>  Javascript client and it's all open source. I even found a MediaWiki
>  extension [4], but you need to patch MediaWiki to get it to work so I'm
>  not sure if it's suitable for our own wiki. An example can be found here
>  [5] though.
>  https://admin.fedoraproject.org/mailman/listinfo/design-team 
I have no idea if this can be integrated into MediaWiki, but on a 
project I am working on we used the jQuery Image Annotation plugin:
http://code.google.com/p/jquery-image-annotate/

-- 
nicu :: http://nicubunu.ro :: http://nicubunu.blogspot.com/

[Máirín Duffy]

On Thu, 2010-11-25 at 22:41 +0100, Jef van Schendel wrote:
>  Anyhow, I was thinking that we should really set something like this
>  up for the Design Team. Like fpaste.org for designers. It doesn't seem
>  too hard (even I could get it working!) and it's really extremely cool
>  IMO. 
Here's the chat log from after our meeting today on this topic:


<Schendje> hmm i really want to make the flickr notes thing happen
<Schendje>
http://lists.fedoraproject.org/pipermail/design-team/2010-November/003684...
<Schendje> but i have no idea what the right way would be :)
<mizmo> we could talk to the infra guys to see if we could use it on
mediawiki
<Emichan> if we can't, maybe we could set something up on our
fedorahosted space
<Schendje> i can make the frontend work myself, but that's it... i don't
know where i would save the data
<Schendje> ideally it'd be a website where you can paste the url of a
hosted image
<Schendje> and it'd turn that into a new page with that image and the
notes
<Emichan> we'd need a server-side data backend definitely
<Schendje> oooooo http://evan.nixsyspaus.org/takenote/takenote.php
<mizmo> Schendje, good find!!
<Schendje> mizmo: it works kind of clumsy though i think?
<Schendje> with html spans for everything... not sure
<mizmo> yeh its a little weird the interaction
<Schendje> of course i could make it all client side
<Schendje> (not sure if that's the right word..)
<Schendje> simply put all of the info in the url, though that will of
course make it ridiculously long :P
<Emichan> Schendje it looks like that page is using fotonotes for the
annotations
<Emichan> and it only saves changes to the local example images - it
won't save annotations to remote images
<Schendje> yep
<Emichan> some kind of server-side code and data is going to be
necessary in order to actually save the annotations
<Schendje> yes, otherwise they would be php arguments or something...
<Schendje> Emichan: i could use php arguments (variables? dunno what
they're called) and then run it through a url shortener :D
<Schendje> clumsy, but no saving :P
<Emichan> Schendje, what kind of url shortening do you have in mind?
<Schendje> oh just one of the regular services
<Schendje> if you do it automatically, the url won't be huge
<Emichan> the problem with that is that those services just map one url
to another url - you'll still run into the url character limit
<Schendje> there is an url character limit? i didn't even know that O_o
<Emichan> it depends on the browser, but my understanding is that 2000
chars is the max you should encode into a url
<Emichan> and that might be enough for most photos, but...
<Emichan> anyway, since we're not planning on hosting the images, the
text won't take up very much space, so it shouldn't be much of a burden
to store the annotations on a server

~m