Re: blog post for the Noun Project blog

I'm doing this right now and uploading it directly on webplatform. 

Seb 

Le 18 janv. 2013 à 13:04, Chris Mills <cmills@w3.org> a écrit :

> Thanks Doug - these are all good; I have implemented all your changes.
> 
> Seb, I'll send you this final version separately, so you can pass it on to the Noun Project folks
> 
> Also, I agree about updating the HTML icon - seb, can you send me an updated PNG, so I can implement it on the site?
> 
> Chris Mills
> Opera Software, dev.opera.com
> W3C Fellow, web education and webplatform.org
> Author of "Practical CSS3: Develop and Design" (http://goo.gl/AKf9M)
> 
> On 18 Jan 2013, at 08:51, Doug Schepers <schepers@w3.org> wrote:
> 
>> Hi, Chris, Seb-
>> 
>> Comments inline...
>> 
>> On 1/17/13 5:31 AM, Chris Mills wrote:
>>> Thanks! Fixes all made. Anyone else?
>>> 
>>> Chris Mills
>>> 
>>> On 17 Jan 2013, at 09:55, David Kirstein <frozenice@frozenice.de> wrote:
>>> 
>>>> I thought it's "WebPlatform.org" and not "Webplatform.org".
>>>> 
>>>> That "All of us." sounds a bit strange (all of us are what?).
>>>> 
>>>> (HTML icon) "our first ideas ware based" were?, and maybe find out who that
>>>> "someone" was (Doug gets mentioned and that someone not?)
>>>> 
>>>> "Too small and you can make the icon out out" throw one "out" out? Also
>>>> "can't"?
>>>> 
>>>> "to be used consistently the world over", rather "over the world"?
>>>> 
>>>> Otherwise sounds good, I like it! :)
>>>> 
>>>> -fro
>>>> 
>>>> 
>>>> -----Ursprüngliche Nachricht-----
>>>> Von: Chris Mills [mailto:cmills@opera.com]
>>>> Gesendet: Donnerstag, 17. Januar 2013 10:31
>>>> An: public-webplatform@w3.org
>>>> Betreff: blog post for the Noun Project blog
>>>> 
>>>> Hi all,
>>>> 
>>>> Seb and I have been talking to the Noun Project about Seb's WPD topic icons,
>>>> and they want us to write guest blog post about our icons and who we are, as
>>>> they love the W3C. See below for what Seb and I have written - any comments?
>>>> 
>>>> <h1>Webplatform.org icon design</h1>
>>>> 
>>>> <p>The <a href="http://webplatform.org">Webplatform.org</a> community is
>>>> dedicated to spending the new few years creating and maintaining
>>>> <em>the</em> definitive guide to client-side open web technologies. We are
>>>> shepherded by the <a href="http://w3.org">W3C</a> and other <a
>>>> href="http://www.webplatform.org/stewards/">stewards</a>, whose job it is to
>>>> keep things moving, get people interested in working on the site, and fund
>>>> the project. The stewards are naught without the power of the larger web
>>>> community however — the real strength of the site is that it is Wiki-based,
>>>> so anyone has the power to help improve and add to the documentation. It is
>>>> our web and our documentation. All of us.</p>
>>>> 
>>>> <p>When creating a <a href="http://docs.webplatform.org/wiki/Main_Page">set
>>>> of icons</a> for the main documentation topics on the site, the design brief
>>>> was thus:</p>
>>>> 
>>>> <p>"create some icons to represent the major topic areas we are covering on
>>>> WPD, which should fit in with the look of the site, but still be based on
>>>> any already existing conventions for those topics."</p>
>>>> 
>>>> <p>How did we approach this work? Well, an icon relies on three
>>>> elements:</p>
>>>> 
>>>> <ul>
>>>> <li>Its pictogram (the raw shape of the icon)</li>
>>>> <li>Its style</li>
>>>> <li>The context it is used in</li>
>>>> </ul>
>>>> 
>>>> <p>The context and the style were the easy parts: Webplatform.org is a
>>>> universal documentation platform for client-side web technologies, and the
>>>> style was drawn from the site colours, and our <a
>>>> href="http://docs.webplatform.org/w/skins/webplatform/images/logo.svg">mecca
>>>> no-like logo</a>.</p>
>>>> 
>>>> <p><img src="wpd-icons.png" alt="the main index page for web platform docs
>>>> on webplatform.org showing all the icons in use"></p>
>>>> 
>>>> <p>The pictograms took a bit longer to choose. For each icon, we needed to
>>>> choose the right shape to build our logo on.</p>
>>>> 
>>>> <ul>
>>>> <li>"JavaScript" and "SVG" were easy too — each one has a recognised
>>>> standard icon, so we just built on those.</li>
>> 
>> s/easy too/easy/
>> 
>> 
>>>> <li>"General web concepts" and "Beginners guide" were easy to decide too,
>>>> having been taken from intuitive concepts (a book for concepts, a pile of
>>>> baby bricks for beginners).</li>
>>>> <li>The shape for "Accessibility" took more time: we did not want to use
>>>> the classic wheel chair icon, as we felt that it focuses too much on
>>>> "DISability" rather than "ability" and "enabling". In addition, creating an
>>>> accessible website means building a tool that is available to everyone.
>>>> That's how we arrived at the idea of universality: making something for all
>>>> mankind. The Vitruvian Man is already well-known as a symbol of
>>>> universality, so we built our icon on him!</li>
>>>> <li>With "HTML", our first ideas ware based on the classic angle brackets,
>>>> but we thought they were turning out a bit uninspiring. Then someone
>>>> reminded us of the <a href="http://www.w3.org/html/logo/">W3C's HTML5
>>>> logo</a>, which is in the shape of a shield. To ensure longevity of our icon
>>>> and not limit it to a particular version, we suppressed the 5 and based our
>>>> pictogram on the shield only (we also had a version with the 5, for a
>>>> subtopic we did specific to HTML5-related articles.)</li>
>> 
>> Seb, didn't we agree to go with the brackets-inside-sheild icon I suggested, to match the solid fill of the other icons and to suggest HTML more?
>> 
>> http://lists.w3.org/Archives/Public/public-webplatform/2012Dec/0331.html
>> http://docs.webplatform.org/wiki/File:WPD-icon-html-brackets.svg
>> 
>> If so, maybe this bit could read:
>> 
>> [[
>> <li>With "HTML", our first ideas ware based on the classic angle brackets, but we thought they were turning out a bit uninspiring. Then someone reminded us of the <a href="http://www.w3.org/html/logo/">W3C's HTML5 logo</a>, which is in the shape of a shield. To ensure longevity of our icon and not limit it to a particular version, we combined shield with the brackets (we also have a version with the 5, for a
>> subtopic we did specific to HTML5-related articles.)</li>
>> ]]
>> 
>> 
>>>> <li>The "DOM" (Document Object Model) has no recognised standard icon, but
>>>> is generally known to be a tree structure. We therefore started off with
>>>> some ideas for an icon based on a logic tree, but these proved too
>>>> complicated to work in such a small space. Doug Schepers (W3C) therefore
>>>> suggested a simpler approach, which you can see in the final icon.</li>
>>>> <li>The "API" icon marries two concepts, a blueprint and connecting gears,
>>>> which nicely fit with API concepts such as code reuse, and connecting
>>>> services together.</li>
>>>> <li>The "CSS" icon was invented from scratch. Since CSS is all about
>>>> style, the two pictograms we deemed ideal were a "crayola-style" pen for the
>>>> creativity, and the angle brackets to represent the code aspect.</li>
>> 
>> s/angle brackets/curly brackets/
>> 
>> 
>> Regards-
>> -Doug
>> 
>> 
>>>> </ul>
>>>> 
>>>> <p>Each icon is fairly simple, but a few iterations were required to get the
>>>> colour and sizing exactly right. In such a limited space, you have to be
>>>> really exact. Too small and you can make the icon out out; too big and the
>>>> icon looks crowded and doesn't sit right. In terms of the formats we have
>>>> available, we decided to provide both PNG and SVG: SVG for crisp
>>>> representations at larger sizes, and PNG for pixel crisp renderings at small
>>>> sizes.</p>
>>>> 
>>>> <p>Once the icons were agreed and implemented on the site, we decided to
>>>> submit them to The Noun Project: it is doing an amazing job with building a
>>>> standard pictographic language for the world to use to communicate more
>>>> freely and openly. Having icons available for different technologies to be
>>>> used consistently the world over would make web developer conversations much
>>>> easier!</p>
>>>> 
>>>> 
>>>> Chris Mills
>>>> Opera Software, dev.opera.com
>>>> W3C Fellow, web education and webplatform.org
>>>> Author of "Practical CSS3: Develop and Design" (http://goo.gl/AKf9M)
>>>> 
>> 
> 

-- 
Sébastien Desbenoit
twitter :  @desbenoit
site : http://desbenoit.net
blog : http://internetetmoi.fr
mobile :  +33 (0)6 98 54 92 93