sites multi-idiomáticos na web moderna
Post on 28-Jul-2015
80 Views
Preview:
TRANSCRIPT
language label string
pt_br hello_world Olá, mundo!
en_us hello_world Hello, world!
TABELA “CONTENTS”
SELECT `label`, `string` FROM `contents`WHERE `language` = $userLanguage AND `label` = $label;
<h1><?php echo $content[‘hello_world’]; ?></h1>
<header><h1>Hello, world!</h1>
</header>
h1 {color: yellow;
}
<header><h1>Hello, world!</h1>
</header>
<div><h1>Why so serious?</h1>
</div>
header h1 {color: yellow;
}
div h1 {color: cyan;
}
<header id=“main”><h1 class=“header-title”>Hello, world!</h1>
</header>
<div class=“content”><h1 class=“content-title”>Why so serious?</h1>
</div>
.header-title {color: yellow;
}
.content-title {color: cyan;
}
$.ajax({url: ‘/endpoint/’,dataType: ‘JSON’,success: function (response) {
}});
A “não-contextualização” atinge também o JavaScript:
$(‘h1’).html(response.data.title);$(‘.header-title’).html(response.data.title);
Mas o que isso tem a ver com multi-idiomas?Em 2015, tudo.
DESIGN ATÔMICO. COMPONENTIZAÇÃO. MODULARIZAÇÃO. DESACOPLAMENTO.
MANUTENABILIDADE. ESCALABILIDADE. INDEPENDÊNCIA.
language label string
pt_br hello_world Olá, mundo!
en_us hello_world Hello, world!
Lembram da tabela “CONTENTS”?…
Tão anos 2000, não acham?
LANGUAGE TITLE SUBTITLE CHEERS
pt_br Olá, mundo! Por que tão sério? Saúde!
en_us Hello, world! Why so serious? Cheers!
Tabela “HomeTranslations”
Tabela “ContactTranslations”Tabela “DashboardTranslations”
Tabela “CartTranslations”
{“title”: “Hello, world!”,“subtitle”: “Why so serious?”
}
Para o inglês:
{“title”: “Olá, mundo!”,“subtitle”: “Por que tão sério?”
}
Para o português:
Como solicitar o idioma correto?
Linguagem de preferência
var DEFAULT_VALUE = ‘en’;
var PREFERRED_LANGUAGE = navigator.language || navigator.userLanguage|| navigator.browserLanguage || navigator.systemLanguage|| DEFAULT_VALUE;
Linguagem pré-definida http://whysoserious.com/en/Linguagem por geolocalização
Como solicitar o idioma correto?
$.ajax({url: ‘/’,data: { language: PREFERRED_LANGUAGE },dataType: ‘JSON’,success: function (response) {}
});
var DEFAULT_VALUE = ‘en’;
var PREFERRED_LANGUAGE = navigator.language || navigator.userLanguage|| navigator.browserLanguage || navigator.systemLanguage|| DEFAULT_VALUE;
Ninguém conhece o seu usuário melhor que o seu browser.Lembre-se:
$.ajax({url: ‘/’,data: { },dataType: ‘JSON’,success: function (response) {
}});
$(‘ ’).html( );response.data.title===
“Hello, world!” ou
“Olá, mundo!”
.header-title
referência
language: PREFERRED_LANGUAGE
‘en’/‘en-us’ ou ‘pt’/‘pt-br’
$(‘.header-title’).html(response.data.title);$(‘.content-title’).html(response.data.subtitle);
Afinal, e a manutenabilidade?
Don’t Repeat Yourself
Desacoplamento de responsabilidades
Modularização
Baixa curva de aprendizado
new HomeView ({ model: HomeTranslation });
var data = {title: 'Hello, world!',subtitle: 'Why so serious?'
};
var HomeTranslation = new Backbone.Model(data);
var HomeView = Backbone.View.extend({el: $('#home'),template: _.template($('#home-template').html()),initialize: function () {this.render();
},render: function () {var template = this.template({ t: homeTranslation });this.$el.html(template);
}});
<div id="home"><script type="text/template" id="home-template"><header id="main"><h1 class="header-title"><%= t.get('title') %></h1>
</header>
<div class="content"><h1 class="content-title"><%= t.get('subtitle') %></h1>
</div></script>
</div>
E as variáveis?{
“welcome”: “Welcome, {username}!”}
t.get(‘welcome’).replace(‘{username}’, );user.get(‘name’)
E a pluralização?
{“users_label”: “user”,“users_count”: “{count} {word} online”
}
var usersLabel = > 1 ? t.get(‘users_label’) + ’s’ : t.get(‘users_label’);
users.lengtht.get(‘users_count’).replace(‘{count}’, );.replace(‘{word}’, usersLabel);
users.length
top related