Playground getting reorganized, comments please

Forum 2005-2010 (read only) General News
41

Hi

Any skin is OK with me, but colour, when applied correctly, does aid in visual comprehension, so it could be win-win. Designers use colour all the time to organize information.

This is excacly what I asked for: If someone is able to come up with a comprehensive grouping for the information on the wiki, I don't mind any semantic markup with using colors.
The only group of information I can currently come up with is code and therefore I suggested a little markup with a (boring) lightgray background (that even makes sense on a printer output).
The other thing that concerns me is the use of images on the wiki. I mimic transparency with a white background for the images. If the default background is changed to some other color I will either use PNG-images or have to setup some kind of frame for my images.
Apart from that I don't care if the sidebar uses green text on a pink background,

Designers use colour all the time to organize information.
Look at your operating system, for example.

Am I the only one who changes the system colors first thing after a fresh install :-?

Can I suggest that we just try the new layout with two or three different skins "live", and then put that to a vote in the forum? That way users can give it a spin .

Someone has got to do the administrative work for this, so he/she should have a say at this I think

@wayoda, skins don't usually require any additional coding; they just "are".

Yes, I understand.

Cheater
I'll chuck together a demo tomorrow and get a sample of syntax highlighting and code formatting going.

Here is my opinion on syntax highlighting :
When I present a piece of code on a website, I usually add a comment to mark the points of interest to the reader.

I my case, documenting an additional library, syntax highlighting is counter-productive. I assume automatic syntax highlighting will be applied only to the standard Arduino keywords, so the reader will rather be distracted from the function-calls that are introduced with the library code.
Syntax highlighting is fine for programming in an IDE as it prevent misspellings, but I don't think it makes code more readable.
Eberhard

42

This is sounding good. Cheater, thanks again for your offer. It sounds like perhaps even one skin with one or two color palette choices will give us pick a winner and move forward. If ultimately there is a need for a user's choice, I may go that route, but let's try first to pin down just one. The multi-skin idea is losing luster for me. I like the idea of using the blue of Arduino as a design guide. Also, I think the main Arduino website has a nice simple look to it as well, so perhaps that can act as inspiration since this is essentially part of that.

43

Here is my opinion on syntax highlighting :
When I present a piece of code on a website, I usually add a comment to mark the points of interest to the reader.

I my case, documenting an additional library, syntax highlighting is counter-productive. I assume automatic syntax highlighting will be applied only to the standard Arduino keywords, so the reader will rather be distracted from the function-calls that are introduced with the library code.
Syntax highlighting is fine for programming in an IDE as it prevent misspellings, but I don't think it makes code more readable.

Just wait and see before you pass judgment. :wink:
I'll make it look good. Helpful but not intrusive.

44

Just let me know which skins or other changes (e.g. CSS) you need, and I'll be happy to do it.

I like the idea of having code look like it does in the IDE, if that's possible to do without requiring extra work on the part of the person posting it. Check out ladyada's tutorial for a sample of what this looks like.

Whether or not we offer alternative skins, it's important to have a good default, since that's what most people will see. It's probably worth putting in a bit more effort up front to get something that will work well for a while.

45

IIRC, the way skins work in PMwiki is that they go in a "themes" folder and you just click to enable/disable them, so we should have some easy options once the content is organized!

I mention the idea of having colour since I have been looking at that wiki in all its black and white 'default style' glory for a year and a half, and my eyes are getting blurry.

D

46

What's with the wiki headings in the stylesheet?

The second level headings !!
and third level headings !!!

are both bolder than the first level heading !

Is it possible to fix this or it going to break the rest of the site?

My guess is that most people have avoided !! and !!! because they are out of hierarchical order,

47

Hi,

What's with the wiki headings in the stylesheet?

The second level headings !!
and third level headings !!! are both bolder than the first level heading !

But the first level inserts a horizontal rule below the Headline.

Is it possible to fix this or it going to break the rest of the site?

I would rather see second and third-level headings with smaller fontsize than first-level being made even more bold.
It won't break anything on the site as long as the original authors stayed with the "first level heading is more important than second level heading; etc."

Eberhard

48

I would rather see second and third-level headings with smaller fontsize than first-level being made even more bold.
It won't break anything on the site as long as the original authors stayed with the "first level heading is more important than second level heading; etc."

I agree with this - kick the font sizes down on both second and third levels maybe third could stay bold. Anyway - make them look like they should be in order.

49

Hi,
could we move topics like these

What's with the wiki headings in the stylesheet?
The second level headings !! and third level headings !!!

And my answer to this as well!

to the Playground design requests thread
http://www.arduino.cc/cgi-bin/yabb2/YaBB.pl?num=1194343642
These topics are not News so they are better off in Bugs&Suggestions

Thanks
Eberhard

50

True that none of this is exactly "News" anymore, but is it okay if we keep all discussion here for the time being to avoid confusion? A lot of this style discussion will end up as content in the new style guide, and the style changes will end up effecting how I format the markup for the new pages.
Thanks!

51

Hi,
there was a question about a LCD and I wanted to provide a link into the playground. The LCD-Page is already tagged
"This page is obsolete as of November 5, 2007. Please see the Ouput / LCD section of the new Interfacing with Hardware page"

I'm afraidthat was a bit quick!
On the "Interfacing with Hardware"-Page there is no #link-anchor for the Lcd-section, So in my answer I can only link into the "Interfacing with Hardware"/"Output" section, which is too broad I think.
The original LCD-page is still needed (but it definitly needs a clean-up).
I suggest a sub-directory-page, if there are more than 3 entrys for a topic?
The Output/Led section for instance covers :
Driving single leds
Driving led-matrixes with a MAX7221
Driving led-matrixes with some other chips
RGB-leds
PWM and Leds
whatever.

Even the MAX7221-page covers 2 different libraries, some standalone code, a pdf and a forum-posting.
Way too much for the "Interfacing with Hardware"-directory.
There must be a way to link more selectively from the forum into the playground.

Eberhard

52

Very good point on both counts. I will add in a bunch more anchor tags firstly. And I think a rule of thumb for breaking sub-topics into their own pages makes sense too. I think somewhere between 3 and 5 items? In the long run, this process will require either group participation, or someone periodically going through and cleaning up the pages. I suppose the best thing will be to cut and paste the content from the original page, and then make from the main page to the new dedicated content page. Is there any way to automatically put the headings from the sub page into the parent pages listing? That would be nice, as the parent page could continue to act as a table of contents. I'll look into it. Expect these updates in the next day or two. In the meantime, if you need, feel free to make a link from the "Interfacing with Hardware" page to an LCD sub-page (probably the original one?) and get all the content the put in there. thanks!

53

Hey All,
Mr. Cheater has run into hardware troubles and is unable to get on-line. I had been thinking about it anyways, so I decided to just dive in on the skins and see what I could do. I also decided to use my best judgement on the skin. Originally, monobook seemed okay to me, but once I tried it, it felt too different from the look and feel of the main arduino site. I ended up choosing abitmodern as it is similar to the arduino main site, yet different enough so that visitors differentiate the publicly modifiable section from the "official" website area. I also sorted out how to add in special source code modifiers with a plug-in and a "sourcecode" wiki markup tag. I will write up how to use it in the upcoming "Participation Guide," but basically you use:

(:source lang=c linenum :slight_smile:

and

(:sourecend:)

There are some nice options, including line number, thus "linenum" in the above example. My favorite part is that you can click to get an unformatted page of only the code. This will greatly improve the wiki for distributing libraries. Its all thanks to the SourceBlock plugin
http://www.pmwiki.org/wiki/Cookbook/SourceBlock

which is in turn thanks to GeSHi
http://qbnz.com/highlighter/

its cool stuff. If someone wants to get really fancy, they could do an Arduino specific code format, but 'c' looks good to me for now.

As for any other modifications, all I changed was the left justify the wiki so it matched the arduino maine site. Otherwise, anything I changed inevitably looked worse, so I decided to leave well enough alone.

okay. That's the current news. I think/hope this should respond to most/many people's wishes for the wiki. I will send all this to mellis to get uploaded. Once its up, I would appreciate more feedback. This isn't written in stone. I just wanted to put something together so this wiki upgrade doesn't lose momentum.

54

Hi,
I tried the "abitmodern" skin on my local pmwiki-installation.
Looks ok, but you need at least a 1024x768 resolution on your screen. At 800 pixels the layout is already broken.
Is that a problem we should care about?

If I understood the last post right, syntax highlighting is optionally switched on by some special markup, thats fine.
With the standard [@ @] pre-tags I have a standard formatting.

Could you check if you like these two css-tweaks for monospaced text and preformatted code ([@ @])?
(Simply copy them into pub/skins/abitmodern/abitmodern.css)

/* Make monospaced text stand out a bit, in SansSerif fonts */
#wikitext code {
      font-family: 'Andale Mono', courier, monospace;
      font-size:110%;
}
/* Put preformatted text in a box with gray background, safe some space too with a smaller font*/
#wikitext pre {
      font-family: 'Andale Mono', courier, monospace;
      font-size:90%;
      font-weight:normal;
      color: #0;
        margin-left:2ex;
        margin-right:2ex;
        padding-left:1ex;
        padding-rigth:1ex;
      background-color: #eee;
      border-width : thin;
      border-style : solid;
}

Eberhard

55

Hi,
some more suggestions...

The standard config of abitmodern displays the filename of the current page in the headline. If someone creates a page named "MyFirstWikiPage" this will look a bit stupid. By removing the pagename we don't have to force contributers to think about a really good filename befeore he even starts to write.
The page-subtitle-id has to be commented out in /pub/skins/abitmodern/abitmodern.tmpl.
Here is the relevant section from abitmodern.tmpl

<body>
    <div id='wrapper'>
        <div id='head'>
            <div id='page-title'>$title</div>
            <!-- we don't want the page filename to be shown --> 
            <!-- <div id='page-subtitle'>$currentpage</div> -->
            <div id='page-actions'><!--wiki:$Group.PageActions $SiteGroup.PageActions--></div>
        </div>

With the pagename removed, we can also reduce the height of the header itself.
This involves some image-manipulation besides the tweaks to the css. I can post necessary steps later if we want to do that.

Eberhard

56

Eberhard. Thanks for those thoughts. All good points. I have incorporate them. I made some more modifications to support at least down to 800. Your css formatting edits are included too. I changed the pre a little bit to match the code formatter a little better. Just in the margins and padding.

I zipped up the results and posted them here for anyone to try who is able. If you aren't able, comments will be welcome once its posted as well.
http://www.arduino.cc/playground/uploads/Main/Modified-Abitmodern-skin.zip

Also, I am on a mac, so anyone who can make sure it still works on firefox or ie on win32, that would be great.
tim

ps. just realized my last post smilied those core format tags... here they are again with smilies off for future reference:

(:source lang=c linenum :slight_smile:

and

(:sourecend :slight_smile:

57

Hi,
works fine with Konquerer and Firefox on Linux/KDE.
A would either center the code-box with some margins (margins-left=2ex;margins-right=2ex;}
or let ist expand to the full with of the content div (margins-left=0ex;margins-right=0ex;}.

The copyright-notice at the bottom of the page should be turned into a link to the Playground licsence-page. (look for "$SkinCopyright" in file skins/abitzmodern/abitmodern.tmpl)

Eberhard

58

Good eyes. Unfortunately, I cant seem to massage the css to get the code blocks and 'pre' markup to match. Any ideas? I am very novice at css. Also the wiki doesn't have a license page. Nor does the main arduino site have anything related. Instead, should we just remove that all together? I want to give credit to abitmodern somewhere too. I'm not sure it belongs on every page though.

59

Hi Tim,

Unfortunately, I cant seem to massage the css to get the code blocks and 'pre' markup to match. Any ideas?

I'm not sure I understand your problem.
Here is the relevant section in abitmodern.css

/* Make monospaced text stand out a bit, in SansSerif fonts */
#wikitext code {
      font-family: 'Andale Mono', courier, monospace;
      font-size:110%;
}
/* Put preformatted text in a box with gray background, save some space too with a smaller font*/
#wikitext pre {
      font-family: 'Andale Mono', courier, monospace;
      font-size:90%;
      font-weight:normal;
      color: #0;
        margin-left:2ex;
        margin-right:2ex;
        padding-left:2ex;
        padding-rigth:2ex;
        padding-top:1ex;
        padding-bottom:1ex;

      background-color: #eee;
      border-width : thin;
      border-style : solid;
}

The css-selector "#wikitext code" applies to the pmwiki-typewriter markup @@sometext@@
The css-selector "#wikitext pre" applies to the pmwiki-preformatted markup [@sometext@]

The above values center the codebox on the content div, with some margins to play with.

Also the wiki doesn't have a license page.

I was inspired from this posting by mellis
http://www.arduino.cc/cgi-bin/yabb2/YaBB.pl?num=1194014655
Where he mentions

You also need to be willing to publish your work under a Creative Commons Attribution Share-Alike license.

I thought this applies to the whole site?
If so we could simply place a link to the license page in file "abitmodern.tmpl" like this :
in

<div id='footer'>
   <!-- replace this one     <div id='footer'>$SkinCopyright</div> with -->
   <a href="http://creativecommons.org/licenses/by-sa/3.0/">Arduino Playgorund License</a>
</div>

Instead, should we just remove that all together?

There should be some sort of license agreement for the content I think.
I wouldn't pulish anything these days without a section like this here.

  1. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

This is from the CC-License.

Eberhard

60

Hi,
has anybody ever seen a nice icon (open-licensed) suitable for schematics?
On my page I have a huge schematic in print-resolution and I looking for a nice way to creata a link for it.

Eberhard