Re: L20n.org

[Jeff Beatty]

El 2/20/13 7:00 AM, Staś Małolepszy escribió:
>
>
> On 02/19/2013 08:25 PM, Matjaz Horvat wrote:
>> Hey,
>>
>> This is the initial L20n.org frontpage proposal:
>> http://horv.at/files/l20n/
> >
> > [snip]
> >
>> I'd love to hear your feedback.
>
> Hey Matjaz,
>
> Awesome work! I saw the page yesterday evening but wanted to have
> another fresh look this morning before I give you my feedback.
>
> I really like where this is going. I like that it doesn't flood you
> with text but still gives you specific tangible benefits instead of
> just promising things. The hands-on experience of the code editor is
> great, too.
>
>
> Colors
> ------
>
> My first impression was that the site is a bit sad. Not boring or
> dull, but sad. I guess it's the choice of colors. Molokai sports a
> few vivid colors but you seem to have gone only for the fuchsia rose
> (sometimes called 'fandango', I believe). I miss the freshness of
> green, orange and violet from http://horv.at/files/l20n/colors.html.
> Compare with http://winterdom.com/2008/08/molokaiforvim.
>
> Can we try being a little bit bolder with the colors? It might be a
> matter of fashion nowadays, but I've always advocated for being brave
> when using colors. Brave and responsible.
>
> See the orange at http://generatedcontent.org/ or blue at
> http://10print.org/
>
> I'm impressed by Microsoft's late efforts in Windows 8 visual design.
> I love the bright CMYK colors that they use in the UI. See
> http://windows.microsoft.com/en-US/windows-8/meet and scroll down to
> "Download Windows 8". All that yellow! Totally out of place, yet
> very visually pleasing to my eyes.
>
> Bright color brings http://www.nytimes.com/timespace/ to life, as
> well. I know this website looks good mainly because of the picture,
> but the orange section surely helps, too.
>
> Maybe we could benefit from some kind of header image or theme
> pattern? Like http://rectangleworld.com/blog/archives/733 ?
>
> Or, how about using different Molokai colors to spark up the three
> blurbs with links?

I want to also add that to Stas's comments that if we're going to be
picky about color, we should consider cross-cultural symbolism behind
color schemes
(http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm) and
how global brands have used colors to represent certain characteristics
of their business
(http://dailyinfographic.com/logos-a-look-at-the-meaning-in-colors-infographic).
In deciding a color scheme, we should also take this into account.

That being said, I think that gray as a base color is good, and would
agree with Stas about adding more color into it. Specifically, red and
orange.
>
>
> Tagline
> -------
>
> Copy-wise, I like "responsive" more and more. I'm tempted to make it
> our brand claim.
>
> 'Responsive localization, for all languages.'
No comma needed here. "Responsive localization for all languages."
>
> And I don't mean it only in the screen-width sense. It's responsive
> to screen, OS, hour, user genders, plurals etc.
>
> I'm torn on whether to call L20n a programming language or not.
> Technically, it is, but 1) I don't want to scare people, and 2) I'd
> like to avoid confusion between programming languages and natural
> languages.
I agree with your #1 concern, but I don't think that designating this as
a programming language would cause any confusion between programming and
natural languages. We're in an age where if you talk about a programming
language as a programming language, the vast majority of people know
that you're not talking about Spanish or a language that someone speaks.

I'm a big believer in "calling spades, spades." To resolve these
concerns, I suggest a editing the line to something like:

"A simple programming language for your native language."

or

"Simple programming for your native language."

or, along the lines of Stas's suggestion:

"Unleashing your native language's power through simple programming."
>
> Maybe a 'layer/file format/notation/data structure for storing and
> retrieving translations' would be better?
>
> I think I like 'notation.' 'It's like a scripting language, but
> simpler.'
I think that's too much jargon.
>
> Or, we could go the opposite direction, and highlight the contrast
> between programming vs. natural languages.
>
> 'Programming language, designed for localization. Unleash the
> power of the natural language in translations.'
>
> (unleash, or harness!)
>
> More thoughts on the tagline, still:
>
> Jeff, is it OK to use the word 'things' in the sentence "Simple things
> are simple…" in the header? I know we've used this very sentence
> before but I wonder if it makes a good tagline for the website. In
> Polish, for instance, it's considered good style to avoid such generic
> words. What does it sound like in English?
It may be considered good style to avoid them, but it's also considered
good style to avoid buzzwords like, "awesome" and as an organization, we
don't do that. I think it's consistant with the Mozilla style to keep
the word there.
>
>
> Call to action
> --------------
>
> There's a pretty clear CTA for localizers in the "Learn by example"
> link. I'd like to see a similar CTA for developers who wish to
> implement L20n in their projects.
>
> What if we changed the following three headers:
>
> Ultimate - Responsive - Free
>
> to:
>
> Learn - Implement - Improve
>
> The first one is for localizers with a link to /byexample. The second
> one is for developers looking for a l10n solution for their project.
> Send them to MDN docs. The third one is about Mozilla, open source
> and free(dom). Put a link to github.
I really like this suggestion, and I would add to it:

Learn - Localize - Implement - Improve

Or maybe just

Localize - Implement - Improve

I like using the term localize more than learn because when I see that
term in this context I think, "If I click on this link, I'll be taken to
a tutorial on how to write l20n code." Whereas we're teaching localizers
to both learn l20n code and learn to localize within l20n code. Just my
two cents.
>
> The responsive-as-in-screen-width-meaning demo could be implemented in
> the code editor, instead of linking to it in the second blurb.
>
>
> Live code editor
> ----------------
>
> I dig it.
>
> Let's add a short explanation somewhere. Something to the effect of
> "HTML elements on this website are marked up with data-l10n-id
> attributes which we match against identifiers in the above L20n code."
I think the best approach is to have this editor contain a
self-explanatory example. I'd rather not see more text on the page that
what is already there. Those explanations can go in By Example.
>
> We could use some ::before-content-attr(data-l10n-id) CSS magic to
> show the relevant ids on the page. Maybe toggle them with a checkbox
> next to the editor?
>
> Do we want to put the whole landing page's contents in the editor? Or
> just a select few strings? I'd vote for putting just a few entities
> in the editor, plus a screen.width macro. All strings on the page
> should be localizable, though, via data-l10n-id. Toggle the checkbox,
> see what the value of data-l10n-id is for some string, add it to the
> editor — and bam! it's localized.
>
>
> * * *
>
> Whoa, that's a long email. Thanks for reading to the end!
>
> -stas
>
>
I'm adding this discussion to the tools mailing list too, btw.

--
*Jeff Beatty*
jbe...@mozilla.com
801.367.3763
@mozilla_l10n <https://twitter.com/mozilla_l10n>

[Axel Hecht]

Just nitpickin on one details, technical term would probably be DSL,
Domain-Specific Language, for localizing. Then there's a library to
execute that DSL from general-purpose programming languages.

Axel

[Matjaz Horvat]

Thank you guys for this amazing feedback!

Let me go step by step.

1. Tabzilla
No problem with me, but we don't need it (see persona.org). As agreed
during the call today, let's skip this.

2. Colors
The page looks sad, indeed. I'll play with colors a bit more, because I
haven't invested much time into it so far. I'll experiment with lighter
grey and maybe find some suitable graphics, like Twitter Bootstrap uses in
the header. I can't promise anything, because everybody has it's own
preferences when it comes to colors, but there certainly are some rules we
can make use of.

3. Copy
Whatever you agree on, just let me know. I like the direction your debate
is taking, so keep going. :)

4. Call to action
I agree with the proposal to change titles of our three sections.

5. Live code editor
I agree about the :before {content: attr(title);}, but only if we use a
switch to display these attributes. Maybe with switch turned on, we can
also display an explanation, without it, as Jeff pointed out, there might
be too much text. And I agree, let's only use a few data-l10n-ids in the
live editor by default

I'll make the updates and push the code to Github so everyone can change it.

Layout

On Thu, Feb 21, 2013 at 9:06 PM, Axel Hecht <l1...@mozilla.com> wrote:

> Just nitpickin on one details, technical term would probably be DSL,
> Domain-Specific Language, for localizing. Then there's a library to execute
> that DSL from general-purpose programming languages.
>
> Axel
>
>
> On 21.02.13 18:17, Jeff Beatty wrote:
>

>> El 2/20/13 7:00 AM, Staś Małolepszy escribió:
>>
>>>
>>>
>>> On 02/19/2013 08:25 PM, Matjaz Horvat wrote:
>>>
>>>> Hey,
>>>>
>>>> This is the initial L20n.org frontpage proposal:
>>>> http://horv.at/files/l20n/
>>>>
>>> >
>>> > [snip]
>>> >
>>>
>>>> I'd love to hear your feedback.
>>>>
>>>
>>> Hey Matjaz,
>>>
>>> Awesome work! I saw the page yesterday evening but wanted to have
>>> another fresh look this morning before I give you my feedback.
>>>
>>> I really like where this is going. I like that it doesn't flood you
>>> with text but still gives you specific tangible benefits instead of
>>> just promising things. The hands-on experience of the code editor is
>>> great, too.
>>>
>>>
>>> Colors
>>> ------
>>>
>>> My first impression was that the site is a bit sad. Not boring or
>>> dull, but sad. I guess it's the choice of colors. Molokai sports a
>>> few vivid colors but you seem to have gone only for the fuchsia rose
>>> (sometimes called 'fandango', I believe). I miss the freshness of

>>> green, orange and violet from http://horv.at/files/l20n/**colors.html<http://horv.at/files/l20n/colors.html>
>>> .
>>> Compare with http://winterdom.com/2008/08/**molokaiforvim<http://winterdom.com/2008/08/molokaiforvim>

>>> .
>>>
>>> Can we try being a little bit bolder with the colors? It might be a
>>> matter of fashion nowadays, but I've always advocated for being brave
>>> when using colors. Brave and responsible.
>>>
>>> See the orange at http://generatedcontent.org/ or blue at
>>> http://10print.org/
>>>
>>> I'm impressed by Microsoft's late efforts in Windows 8 visual design.
>>> I love the bright CMYK colors that they use in the UI. See

>>> http://windows.microsoft.com/**en-US/windows-8/meet<http://windows.microsoft.com/en-US/windows-8/meet>and scroll down to

>>> "Download Windows 8". All that yellow! Totally out of place, yet
>>> very visually pleasing to my eyes.
>>>

>>> Bright color brings http://www.nytimes.com/**timespace/<http://www.nytimes.com/timespace/>to life, as

>>> well. I know this website looks good mainly because of the picture,
>>> but the orange section surely helps, too.
>>>
>>> Maybe we could benefit from some kind of header image or theme

>>> pattern? Like http://rectangleworld.com/**blog/archives/733<http://rectangleworld.com/blog/archives/733>?

>>>
>>> Or, how about using different Molokai colors to spark up the three
>>> blurbs with links?
>>>
>>
>> I want to also add that to Stas's comments that if we're going to be
>> picky about color, we should consider cross-cultural symbolism behind
>> color schemes

>> (http://webdesign.about.com/**od/colorcharts/l/bl_**colorculture.htm<http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm>)

>> and
>> how global brands have used colors to represent certain characteristics
>> of their business

>> (http://dailyinfographic.com/**logos-a-look-at-the-meaning-**
>> in-colors-infographic<http://dailyinfographic.com/logos-a-look-at-the-meaning-in-colors-infographic>

>>> The responsive-as-in-screen-width-**meaning demo could be implemented in

>>> the code editor, instead of linking to it in the second blurb.
>>>
>>>
>>> Live code editor
>>> ----------------
>>>
>>> I dig it.
>>>
>>> Let's add a short explanation somewhere. Something to the effect of
>>> "HTML elements on this website are marked up with data-l10n-id
>>> attributes which we match against identifiers in the above L20n code."
>>>
>> I think the best approach is to have this editor contain a
>>
>> self-explanatory example. I'd rather not see more text on the page that
>> what is already there. Those explanations can go in By Example.
>>
>>>

>>> We could use some ::before-content-attr(data-**l10n-id) CSS magic to

>>> show the relevant ids on the page. Maybe toggle them with a checkbox
>>> next to the editor?
>>>
>>> Do we want to put the whole landing page's contents in the editor? Or
>>> just a select few strings? I'd vote for putting just a few entities
>>> in the editor, plus a screen.width macro. All strings on the page
>>> should be localizable, though, via data-l10n-id. Toggle the checkbox,
>>> see what the value of data-l10n-id is for some string, add it to the
>>> editor — and bam! it's localized.
>>>
>>>
>>> * * *
>>>
>>> Whoa, that's a long email. Thanks for reading to the end!
>>>
>>> -stas
>>>
>>>
>>> I'm adding this discussion to the tools mailing list too, btw.
>>
>>

> ______________________________**_________________
> tools-l10n mailing list
> tools...@lists.mozilla.org
> https://lists.mozilla.org/**listinfo/tools-l10n<https://lists.mozilla.org/listinfo/tools-l10n>
>

[Matjaz Horvat]

Hey,

I was playing with more colourful l20n.org design:
http://horv.at/files/l20n.org/

It's the same responsive layout with a few changes:

1. Large layout is gone, because intermediate layout also works better for
large screens.

2. Blocks are now represented with icons, which gives are more real estate
to apply colors.

3. Footer has been redesigned for easier use on smaller screens.

4. Color scheme is completely new.

This is the previous design:
http://l20n.github.com/l20n.org/

The new design is not in Github yet, but will be as soon as you tell me I'm
going in the right direction.

-Matjaž

>>> El 2/20/13 7:00 AM, Staś Małolepszy escribió:
>>>
>>>>
>>>>
>>>> On 02/19/2013 08:25 PM, Matjaz Horvat wrote:
>>>>
>>>>> Hey,
>>>>>
>>>>> This is the initial L20n.org frontpage proposal:
>>>>> http://horv.at/files/l20n/
>>>>>
>>>> >
>>>> > [snip]
>>>> >
>>>>
>>>>> I'd love to hear your feedback.
>>>>>
>>>>
>>>> Hey Matjaz,
>>>>
>>>> Awesome work! I saw the page yesterday evening but wanted to have
>>>> another fresh look this morning before I give you my feedback.
>>>>
>>>> I really like where this is going. I like that it doesn't flood you
>>>> with text but still gives you specific tangible benefits instead of
>>>> just promising things. The hands-on experience of the code editor is
>>>> great, too.
>>>>
>>>>
>>>> Colors
>>>> ------
>>>>
>>>> My first impression was that the site is a bit sad. Not boring or
>>>> dull, but sad. I guess it's the choice of colors. Molokai sports a
>>>> few vivid colors but you seem to have gone only for the fuchsia rose
>>>> (sometimes called 'fandango', I believe). I miss the freshness of

>>>> green, orange and violet from http://horv.at/files/l20n/**colors.html<http://horv.at/files/l20n/colors.html>
>>>> .
>>>> Compare with http://winterdom.com/2008/08/**molokaiforvim<http://winterdom.com/2008/08/molokaiforvim>
>>>> .
>>>>

>>>> Can we try being a little bit bolder with the colors? It might be a
>>>> matter of fashion nowadays, but I've always advocated for being brave
>>>> when using colors. Brave and responsible.
>>>>
>>>> See the orange at http://generatedcontent.org/ or blue at
>>>> http://10print.org/
>>>>
>>>> I'm impressed by Microsoft's late efforts in Windows 8 visual design.
>>>> I love the bright CMYK colors that they use in the UI. See

>>>> http://windows.microsoft.com/**en-US/windows-8/meet<http://windows.microsoft.com/en-US/windows-8/meet>and scroll down to

>>>> "Download Windows 8". All that yellow! Totally out of place, yet
>>>> very visually pleasing to my eyes.
>>>>

>>>> Bright color brings http://www.nytimes.com/**timespace/<http://www.nytimes.com/timespace/>to life, as

>>>> well. I know this website looks good mainly because of the picture,
>>>> but the orange section surely helps, too.
>>>>
>>>> Maybe we could benefit from some kind of header image or theme

>>>> pattern? Like http://rectangleworld.com/**blog/archives/733<http://rectangleworld.com/blog/archives/733>?

>>>>
>>>> Or, how about using different Molokai colors to spark up the three
>>>> blurbs with links?
>>>>
>>>
>>> I want to also add that to Stas's comments that if we're going to be
>>> picky about color, we should consider cross-cultural symbolism behind
>>> color schemes

>>> (http://webdesign.about.com/**od/colorcharts/l/bl_**colorculture.htm<http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm>)

>>> and
>>> how global brands have used colors to represent certain characteristics
>>> of their business

>>> (http://dailyinfographic.com/**logos-a-look-at-the-meaning-**
>>> in-colors-infographic<http://dailyinfographic.com/logos-a-look-at-the-meaning-in-colors-infographic>
>>> ).

>>>> The responsive-as-in-screen-width-**meaning demo could be implemented

>>>> in
>>>> the code editor, instead of linking to it in the second blurb.
>>>>
>>>>
>>>> Live code editor
>>>> ----------------
>>>>
>>>> I dig it.
>>>>
>>>> Let's add a short explanation somewhere. Something to the effect of
>>>> "HTML elements on this website are marked up with data-l10n-id
>>>> attributes which we match against identifiers in the above L20n code."
>>>>
>>> I think the best approach is to have this editor contain a
>>>
>>> self-explanatory example. I'd rather not see more text on the page that
>>> what is already there. Those explanations can go in By Example.
>>>
>>>>

>>>> We could use some ::before-content-attr(data-**l10n-id) CSS magic to

>>>> show the relevant ids on the page. Maybe toggle them with a checkbox
>>>> next to the editor?
>>>>
>>>> Do we want to put the whole landing page's contents in the editor? Or
>>>> just a select few strings? I'd vote for putting just a few entities
>>>> in the editor, plus a screen.width macro. All strings on the page
>>>> should be localizable, though, via data-l10n-id. Toggle the checkbox,
>>>> see what the value of data-l10n-id is for some string, add it to the
>>>> editor — and bam! it's localized.
>>>>
>>>>
>>>> * * *
>>>>
>>>> Whoa, that's a long email. Thanks for reading to the end!
>>>>
>>>> -stas
>>>>
>>>>
>>>> I'm adding this discussion to the tools mailing list too, btw.
>>>
>>>

[Staś Małolepszy]

Matjaž!!!


I love it!!!!

I love the colors, the icons, the header, the footer. Beautiful work!

I only have one comment: bring the large layout back, and optimize the
medium one.

On my screen, I see the icon, but even the text is below the fold. The
code editor ends up at the very bottom, very lonely, very wide. The
effects are twofold:

- when I first hit the page, I don't see a single line of L20n code
(it's all in the editor below the fold)

- when I scroll down, I don't see the strings I'm supposed to be
changing.

What if in the middle layout, the editor was placed on the right hand
side?

Great work all around!
-stas

>>>> El 2/20/13 7:00 AM, Staś Małolepszy escribió:
>>>>
>>>>>
>>>>>
>>>>> On 02/19/2013 08:25 PM, Matjaz Horvat wrote:
>>>>>
>>>>>> Hey,
>>>>>>
>>>>>> This is the initial L20n.org frontpage proposal:
>>>>>> http://horv.at/files/l20n/
>>>>>>
>>>>>>
>>>>>> [snip]
>>>>>>
>>>>>
>>>>>> I'd love to hear your feedback.
>>>>>>
>>>>>
>>>>> Hey Matjaz,
>>>>>
>>>>> Awesome work! I saw the page yesterday evening but wanted to have
>>>>> another fresh look this morning before I give you my feedback.
>>>>>
>>>>> I really like where this is going. I like that it doesn't flood you
>>>>> with text but still gives you specific tangible benefits instead of
>>>>> just promising things. The hands-on experience of the code editor is
>>>>> great, too.
>>>>>
>>>>>
>>>>> Colors
>>>>> ------
>>>>>
>>>>> My first impression was that the site is a bit sad. Not boring or
>>>>> dull, but sad. I guess it's the choice of colors. Molokai sports a
>>>>> few vivid colors but you seem to have gone only for the fuchsia rose
>>>>> (sometimes called 'fandango', I believe). I miss the freshness of

>>>>> green, orange and violet from http://horv.at/files/l20n/**colors.html<http://horv.at/files/l20n/colors.html>
>>>>> .
>>>>> Compare with http://winterdom.com/2008/08/**molokaiforvim<http://winterdom.com/2008/08/molokaiforvim>
>>>>> .
>>>>>

>>>>> Can we try being a little bit bolder with the colors? It might be a
>>>>> matter of fashion nowadays, but I've always advocated for being brave
>>>>> when using colors. Brave and responsible.
>>>>>
>>>>> See the orange at http://generatedcontent.org/ or blue at
>>>>> http://10print.org/
>>>>>
>>>>> I'm impressed by Microsoft's late efforts in Windows 8 visual design.
>>>>> I love the bright CMYK colors that they use in the UI. See

>>>>> http://windows.microsoft.com/**en-US/windows-8/meet<http://windows.microsoft.com/en-US/windows-8/meet>and scroll down to

>>>>> "Download Windows 8". All that yellow! Totally out of place, yet
>>>>> very visually pleasing to my eyes.
>>>>>

>>>>> Bright color brings http://www.nytimes.com/**timespace/<http://www.nytimes.com/timespace/>to life, as

>>>>> well. I know this website looks good mainly because of the picture,
>>>>> but the orange section surely helps, too.
>>>>>
>>>>> Maybe we could benefit from some kind of header image or theme

>>>>> pattern? Like http://rectangleworld.com/**blog/archives/733<http://rectangleworld.com/blog/archives/733>?

>>>>>
>>>>> Or, how about using different Molokai colors to spark up the three
>>>>> blurbs with links?
>>>>>
>>>>
>>>> I want to also add that to Stas's comments that if we're going to be
>>>> picky about color, we should consider cross-cultural symbolism behind
>>>> color schemes

>>>> (http://webdesign.about.com/**od/colorcharts/l/bl_**colorculture.htm<http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm>)

>>>> and
>>>> how global brands have used colors to represent certain characteristics
>>>> of their business

>>>> (http://dailyinfographic.com/**logos-a-look-at-the-meaning-**
>>>> in-colors-infographic<http://dailyinfographic.com/logos-a-look-at-the-meaning-in-colors-infographic>
>>>> ).

>>>>> The responsive-as-in-screen-width-**meaning demo could be implemented

>>>>> in
>>>>> the code editor, instead of linking to it in the second blurb.
>>>>>
>>>>>
>>>>> Live code editor
>>>>> ----------------
>>>>>
>>>>> I dig it.
>>>>>
>>>>> Let's add a short explanation somewhere. Something to the effect of
>>>>> "HTML elements on this website are marked up with data-l10n-id
>>>>> attributes which we match against identifiers in the above L20n code."
>>>>>
>>>> I think the best approach is to have this editor contain a
>>>>
>>>> self-explanatory example. I'd rather not see more text on the page that
>>>> what is already there. Those explanations can go in By Example.
>>>>
>>>>>

>>>>> We could use some ::before-content-attr(data-**l10n-id) CSS magic to

>>>>> show the relevant ids on the page. Maybe toggle them with a checkbox
>>>>> next to the editor?
>>>>>
>>>>> Do we want to put the whole landing page's contents in the editor? Or
>>>>> just a select few strings? I'd vote for putting just a few entities
>>>>> in the editor, plus a screen.width macro. All strings on the page
>>>>> should be localizable, though, via data-l10n-id. Toggle the checkbox,
>>>>> see what the value of data-l10n-id is for some string, add it to the
>>>>> editor — and bam! it's localized.
>>>>>
>>>>>
>>>>> * * *
>>>>>
>>>>> Whoa, that's a long email. Thanks for reading to the end!
>>>>>
>>>>> -stas
>>>>>
>>>>>
>>>>> I'm adding this discussion to the tools mailing list too, btw.
>>>>
>>>>

>>> ______________________________**_________________
>>> tools-l10n mailing list
>>> tools...@lists.mozilla.org
>>> https://lists.mozilla.org/**listinfo/tools-l10n<https://lists.mozilla.org/listinfo/tools-l10n>
>>>
>>
>>

> _______________________________________________
> tools-l10n mailing list
> tools...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/tools-l10n

[Matjaz Horvat]

Thanks, Stas.

I agree with your concern about the layout. Jeff pointed this out on IRC,
too. The new design makes heavy use of whitespace which (combined with
large icons) makes it quite unusable on intermediate (mostly laptop)
displays.

My FRA -> SFO flight should keep my away from big external displays long
enough to come up with more condensed layouts.

I've also put L20n.org breakout session on the EP for the MV meeting:
https://l10n.etherpad.mozilla.org/l10n-mtviewmeetup-2013

-Matjaž

>> http://l20n.github.com/l20n.**org/ <http://l20n.github.com/l20n.org/>

>>>> El 2/20/13 7:00 AM, Staś Małolepszy escribió:
>>>>>
>>>>>
>>>>>>
>>>>>> On 02/19/2013 08:25 PM, Matjaz Horvat wrote:
>>>>>>
>>>>>> Hey,
>>>>>>>
>>>>>>> This is the initial L20n.org frontpage proposal:
>>>>>>> http://horv.at/files/l20n/
>>>>>>>
>>>>>>>
>>>>>>> [snip]
>>>>>>>
>>>>>>>
>>>>>> I'd love to hear your feedback.
>>>>>>>
>>>>>>>
>>>>>> Hey Matjaz,
>>>>>>
>>>>>> Awesome work! I saw the page yesterday evening but wanted to have
>>>>>> another fresh look this morning before I give you my feedback.
>>>>>>
>>>>>> I really like where this is going. I like that it doesn't flood you
>>>>>> with text but still gives you specific tangible benefits instead of
>>>>>> just promising things. The hands-on experience of the code editor is
>>>>>> great, too.
>>>>>>
>>>>>>
>>>>>> Colors
>>>>>> ------
>>>>>>
>>>>>> My first impression was that the site is a bit sad. Not boring or
>>>>>> dull, but sad. I guess it's the choice of colors. Molokai sports a
>>>>>> few vivid colors but you seem to have gone only for the fuchsia rose
>>>>>> (sometimes called 'fandango', I believe). I miss the freshness of

>>>>>> green, orange and violet from http://horv.at/files/l20n/****
>>>>>> colors.html <http://horv.at/files/l20n/**colors.html><http://horv.at/
>>>>>> **files/l20n/colors.html <http://horv.at/files/l20n/colors.html>>
>>>>>> .
>>>>>> Compare with http://winterdom.com/2008/08/****molokaiforvim<http://winterdom.com/2008/08/**molokaiforvim>
>>>>>> <http://**winterdom.com/2008/08/**molokaiforvim<http://winterdom.com/2008/08/molokaiforvim>

>>>>>> >
>>>>>>
>>>>>> .
>>>>>>
>>>>>> Can we try being a little bit bolder with the colors? It might be a
>>>>>> matter of fashion nowadays, but I've always advocated for being brave
>>>>>> when using colors. Brave and responsible.
>>>>>>
>>>>>> See the orange at http://generatedcontent.org/ or blue at
>>>>>> http://10print.org/
>>>>>>
>>>>>> I'm impressed by Microsoft's late efforts in Windows 8 visual design.
>>>>>> I love the bright CMYK colors that they use in the UI. See

>>>>>> http://windows.microsoft.com/****en-US/windows-8/meet<http://windows.microsoft.com/**en-US/windows-8/meet>
>>>>>> <http://**windows.microsoft.com/en-US/**windows-8/meet<http://windows.microsoft.com/en-US/windows-8/meet>>and

>>>>>> scroll down to
>>>>>>
>>>>>> "Download Windows 8". All that yellow! Totally out of place, yet
>>>>>> very visually pleasing to my eyes.
>>>>>>

>>>>>> Bright color brings http://www.nytimes.com/****timespace/<http://www.nytimes.com/**timespace/>
>>>>>> <http://www.nytimes.**com/timespace/<http://www.nytimes.com/timespace/>>to

>>>>>> life, as
>>>>>>
>>>>>> well. I know this website looks good mainly because of the picture,
>>>>>> but the orange section surely helps, too.
>>>>>>
>>>>>> Maybe we could benefit from some kind of header image or theme

>>>>>> pattern? Like http://rectangleworld.com/****blog/archives/733<http://rectangleworld.com/**blog/archives/733>
>>>>>> <http://**rectangleworld.com/blog/**archives/733<http://rectangleworld.com/blog/archives/733>

>>>>>> >?
>>>>>>
>>>>>>
>>>>>> Or, how about using different Molokai colors to spark up the three
>>>>>> blurbs with links?
>>>>>>
>>>>>>
>>>>> I want to also add that to Stas's comments that if we're going to be
>>>>> picky about color, we should consider cross-cultural symbolism behind
>>>>> color schemes

>>>>> (http://webdesign.about.com/****od/colorcharts/l/bl_****
>>>>> colorculture.htm<http://webdesign.about.com/**od/colorcharts/l/bl_**colorculture.htm>
>>>>> <http://**webdesign.about.com/od/**colorcharts/l/bl_colorculture.**htm<http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm>

>>>>> >)
>>>>>
>>>>> and
>>>>> how global brands have used colors to represent certain characteristics
>>>>> of their business

>>>>> (http://dailyinfographic.com/****logos-a-look-at-the-meaning-****<http://dailyinfographic.com/**logos-a-look-at-the-meaning-**>
>>>>> in-colors-infographic<http://**dailyinfographic.com/logos-a-**
>>>>> look-at-the-meaning-in-colors-**infographic<http://dailyinfographic.com/logos-a-look-at-the-meaning-in-colors-infographic>

>>>>>> The responsive-as-in-screen-width-****meaning demo could be

>>>>>> implemented
>>>>>>
>>>>>> in
>>>>>> the code editor, instead of linking to it in the second blurb.
>>>>>>
>>>>>>
>>>>>> Live code editor
>>>>>> ----------------
>>>>>>
>>>>>> I dig it.
>>>>>>
>>>>>> Let's add a short explanation somewhere. Something to the effect of
>>>>>> "HTML elements on this website are marked up with data-l10n-id
>>>>>> attributes which we match against identifiers in the above L20n code."
>>>>>>
>>>>>> I think the best approach is to have this editor contain a
>>>>>
>>>>> self-explanatory example. I'd rather not see more text on the page that
>>>>> what is already there. Those explanations can go in By Example.
>>>>>
>>>>>

>>>>>> We could use some ::before-content-attr(data-****l10n-id) CSS magic

>>>>>> to
>>>>>>
>>>>>> show the relevant ids on the page. Maybe toggle them with a checkbox
>>>>>> next to the editor?
>>>>>>
>>>>>> Do we want to put the whole landing page's contents in the editor? Or
>>>>>> just a select few strings? I'd vote for putting just a few entities
>>>>>> in the editor, plus a screen.width macro. All strings on the page
>>>>>> should be localizable, though, via data-l10n-id. Toggle the checkbox,
>>>>>> see what the value of data-l10n-id is for some string, add it to the
>>>>>> editor — and bam! it's localized.
>>>>>>
>>>>>>
>>>>>> * * *
>>>>>>
>>>>>> Whoa, that's a long email. Thanks for reading to the end!
>>>>>>
>>>>>> -stas
>>>>>>
>>>>>>
>>>>>> I'm adding this discussion to the tools mailing list too, btw.
>>>>>>
>>>>>
>>>>>

>>>>> ______________________________****_________________
>>>> tools-l10n mailing list
>>>> tools...@lists.mozilla.org
>>>> https://lists.mozilla.org/****listinfo/tools-l10n<https://lists.mozilla.org/**listinfo/tools-l10n>
>>>> <https://**lists.mozilla.org/listinfo/**tools-l10n<https://lists.mozilla.org/listinfo/tools-l10n>

[Jeff Beatty]

El 3/15/13 8:15 AM, Matjaz Horvat escribió:

>>>>> El 2/20/13 7:00 AM, Staś Małolepszy escribió:
>>>>>>
>>>>>>> On 02/19/2013 08:25 PM, Matjaz Horvat wrote:
>>>>>>>
>>>>>>> Hey,
>>>>>>>> This is the initial L20n.org frontpage proposal:
>>>>>>>> http://horv.at/files/l20n/
>>>>>>>>
>>>>>>>>
>>>>>>>> [snip]
>>>>>>>>
>>>>>>>>
>>>>>>> I'd love to hear your feedback.
>>>>>>>>
>>>>>>> Hey Matjaz,
>>>>>>>
>>>>>>> Awesome work! I saw the page yesterday evening but wanted to have
>>>>>>> another fresh look this morning before I give you my feedback.
>>>>>>>
>>>>>>> I really like where this is going. I like that it doesn't flood you
>>>>>>> with text but still gives you specific tangible benefits instead of
>>>>>>> just promising things. The hands-on experience of the code editor is
>>>>>>> great, too.
>>>>>>>
>>>>>>>
>>>>>>> Colors
>>>>>>> ------
>>>>>>>
>>>>>>> My first impression was that the site is a bit sad. Not boring or
>>>>>>> dull, but sad. I guess it's the choice of colors. Molokai sports a
>>>>>>> few vivid colors but you seem to have gone only for the fuchsia rose
>>>>>>> (sometimes called 'fandango', I believe). I miss the freshness of

>>>>>>> green, orange and violet from http://horv.at/files/l20n/****
>>>>>>> colors.html <http://horv.at/files/l20n/**colors.html><http://horv.at/
>>>>>>> **files/l20n/colors.html <http://horv.at/files/l20n/colors.html>>
>>>>>>> .
>>>>>>> Compare with http://winterdom.com/2008/08/****molokaiforvim<http://winterdom.com/2008/08/**molokaiforvim>
>>>>>>> <http://**winterdom.com/2008/08/**molokaiforvim<http://winterdom.com/2008/08/molokaiforvim>
>>>>>>> .
>>>>>>>

>>>>>>> Can we try being a little bit bolder with the colors? It might be a
>>>>>>> matter of fashion nowadays, but I've always advocated for being brave
>>>>>>> when using colors. Brave and responsible.
>>>>>>>
>>>>>>> See the orange at http://generatedcontent.org/ or blue at
>>>>>>> http://10print.org/
>>>>>>>
>>>>>>> I'm impressed by Microsoft's late efforts in Windows 8 visual design.
>>>>>>> I love the bright CMYK colors that they use in the UI. See

>>>>>>> http://windows.microsoft.com/****en-US/windows-8/meet<http://windows.microsoft.com/**en-US/windows-8/meet>
>>>>>>> <http://**windows.microsoft.com/en-US/**windows-8/meet<http://windows.microsoft.com/en-US/windows-8/meet>>and

>>>>>>> scroll down to
>>>>>>>
>>>>>>> "Download Windows 8". All that yellow! Totally out of place, yet
>>>>>>> very visually pleasing to my eyes.
>>>>>>>

>>>>>>> Bright color brings http://www.nytimes.com/****timespace/<http://www.nytimes.com/**timespace/>

>>>>>>> <http://www.nytimes.**com/timespace/<http://www.nytimes.com/timespace/>>to

>>>>>>> life, as
>>>>>>>
>>>>>>> well. I know this website looks good mainly because of the picture,
>>>>>>> but the orange section surely helps, too.
>>>>>>>
>>>>>>> Maybe we could benefit from some kind of header image or theme

>>>>>>> pattern? Like http://rectangleworld.com/****blog/archives/733<http://rectangleworld.com/**blog/archives/733>

>>>>>>> <http://**rectangleworld.com/blog/**archives/733<http://rectangleworld.com/blog/archives/733>

>>>>>>>> ?
>>>>>>>
>>>>>>> Or, how about using different Molokai colors to spark up the three
>>>>>>> blurbs with links?
>>>>>>>
>>>>>>>
>>>>>> I want to also add that to Stas's comments that if we're going to be
>>>>>> picky about color, we should consider cross-cultural symbolism behind
>>>>>> color schemes

>>>>>> (http://webdesign.about.com/****od/colorcharts/l/bl_****
>>>>>> colorculture.htm<http://webdesign.about.com/**od/colorcharts/l/bl_**colorculture.htm>
>>>>>> <http://**webdesign.about.com/od/**colorcharts/l/bl_colorculture.**htm<http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm>
>>>>>>> )

>>>>>> and
>>>>>> how global brands have used colors to represent certain characteristics
>>>>>> of their business

>>>>>> (http://dailyinfographic.com/****logos-a-look-at-the-meaning-****<http://dailyinfographic.com/**logos-a-look-at-the-meaning-**>
>>>>>> in-colors-infographic<http://**dailyinfographic.com/logos-a-**
>>>>>> look-at-the-meaning-in-colors-**infographic<http://dailyinfographic.com/logos-a-look-at-the-meaning-in-colors-infographic>
>>>>>> ).

>>>>>>> The responsive-as-in-screen-width-****meaning demo could be

>>>>>>> implemented
>>>>>>>
>>>>>>> in
>>>>>>> the code editor, instead of linking to it in the second blurb.
>>>>>>>
>>>>>>>
>>>>>>> Live code editor
>>>>>>> ----------------
>>>>>>>
>>>>>>> I dig it.
>>>>>>>
>>>>>>> Let's add a short explanation somewhere. Something to the effect of
>>>>>>> "HTML elements on this website are marked up with data-l10n-id
>>>>>>> attributes which we match against identifiers in the above L20n code."
>>>>>>>
>>>>>>> I think the best approach is to have this editor contain a
>>>>>> self-explanatory example. I'd rather not see more text on the page that
>>>>>> what is already there. Those explanations can go in By Example.
>>>>>>
>>>>>>

>>>>>>> We could use some ::before-content-attr(data-****l10n-id) CSS magic

>>>>>>> to
>>>>>>>
>>>>>>> show the relevant ids on the page. Maybe toggle them with a checkbox
>>>>>>> next to the editor?
>>>>>>>
>>>>>>> Do we want to put the whole landing page's contents in the editor? Or
>>>>>>> just a select few strings? I'd vote for putting just a few entities
>>>>>>> in the editor, plus a screen.width macro. All strings on the page
>>>>>>> should be localizable, though, via data-l10n-id. Toggle the checkbox,
>>>>>>> see what the value of data-l10n-id is for some string, add it to the
>>>>>>> editor — and bam! it's localized.
>>>>>>>
>>>>>>>
>>>>>>> * * *
>>>>>>>
>>>>>>> Whoa, that's a long email. Thanks for reading to the end!
>>>>>>>
>>>>>>> -stas
>>>>>>>
>>>>>>>
>>>>>>> I'm adding this discussion to the tools mailing list too, btw.
>>>>>>>
>>>>>>

>>>>>> ______________________________****_________________
>>>>> tools-l10n mailing list
>>>>> tools...@lists.mozilla.org
>>>>> https://lists.mozilla.org/****listinfo/tools-l10n<https://lists.mozilla.org/**listinfo/tools-l10n>
>>>>> <https://**lists.mozilla.org/listinfo/**tools-l10n<https://lists.mozilla.org/listinfo/tools-l10n>
>>>>>
>>>> ______________________________**_________________
>>> tools-l10n mailing list
>>> tools...@lists.mozilla.org
>>> https://lists.mozilla.org/**listinfo/tools-l10n<https://lists.mozilla.org/listinfo/tools-l10n>
>>>

> _______________________________________________
> tools-l10n mailing list
> tools...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/tools-l10n
¡w00t w00t, viva l20n.org!

I'm glad to see this on the schedule. Looking forward to discussing it more.

[Zbigniew Braniecki]

I would prefer to cut the tag line to "Unleashing your native language's power" or "Simple things easy, complex things possible".

I don't like when we put emphasis on that it's a programming language because imo it sounds scary.
For most cases it's not a programing language. it's a key-value pair localization storage.

In the same way as excel is not a powerful macro-oriented programming language, it's a spreadsheet. Yeah, it can do a lot if you need, but for most cases, you just see simple grid and you put plain numbers in it.

Cheers,
g.