SlideShare uma empresa Scribd logo
1 de 32
Baixar para ler offline
S I T E S
P O L I G L O T A S
N A W E B M O D E R N A
Guilherme Oderdenge
DESENVOLVEDOR FRONT-END NA CHUTE
http://github.com/chiefgui/
Por que o seu site ou app
deve ser multi-idiomático?
Sites multi-idiomáticos na web moderna
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>
Sites multi-idiomáticos na web moderna
Sites multi-idiomáticos na web moderna
<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;
}
A realidade é que nós contextualizamos as coisas…
<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”
http://whysoserious.com/
HomeTranslations.sql
JSON
{
“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?
Como renderizar a palavra correta, no lugar correto?
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:
Como solicitar o idioma correto?
Como renderizar a palavra correta, no lugar correto?
Are you watching closely?
$.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
Don’t repeat yourself? WHAT?
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>
http://jsfiddle.net/pwuq9bn9/
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.length
t.get(‘users_count’)
.replace(‘{count}’, );
.replace(‘{word}’, usersLabel);
users.length
E a performance de se utilizar
o DOM como referência?
polyglot.js, da Airbnb
pluralize, de Blake Embrey
linguistic.js, por mim
{
“last_thing”: “Questions?”
}
{
“last_thing”: “Perguntas?”
}

Mais conteúdo relacionado

Destaque

Breaking Barriers: Ballot Access and Plain Language
Breaking Barriers: Ballot Access and Plain LanguageBreaking Barriers: Ballot Access and Plain Language
Breaking Barriers: Ballot Access and Plain LanguageCenter for Civic Design
 
Melbourne zone subs unamed
Melbourne zone subs unamed Melbourne zone subs unamed
Melbourne zone subs unamed Gary Lee
 
Locks And Locking - EN
Locks And Locking - ENLocks And Locking - EN
Locks And Locking - ENMichal Simonik
 
Melbourne zone subs unamed
Melbourne zone subs unamed Melbourne zone subs unamed
Melbourne zone subs unamed Gary Lee
 
Www efdeportes com_efd47_psic_htm
Www efdeportes com_efd47_psic_htmWww efdeportes com_efd47_psic_htm
Www efdeportes com_efd47_psic_htmSilvana Mendez
 
Modul media
Modul mediaModul media
Modul mediachanovhy
 
Mi presentacion personal mallqui avansys
Mi presentacion personal mallqui avansys Mi presentacion personal mallqui avansys
Mi presentacion personal mallqui avansys donramonjr62
 
Thoughtful Hiring, Thoughtful Growth
Thoughtful Hiring, Thoughtful Growth Thoughtful Hiring, Thoughtful Growth
Thoughtful Hiring, Thoughtful Growth Lindsay Verstegen
 
Beroepsprofiel_SarienHage_Denk&Ga
Beroepsprofiel_SarienHage_Denk&GaBeroepsprofiel_SarienHage_Denk&Ga
Beroepsprofiel_SarienHage_Denk&GaSarien Hage
 

Destaque (12)

Breaking Barriers: Ballot Access and Plain Language
Breaking Barriers: Ballot Access and Plain LanguageBreaking Barriers: Ballot Access and Plain Language
Breaking Barriers: Ballot Access and Plain Language
 
Квесты
КвестыКвесты
Квесты
 
Melbourne zone subs unamed
Melbourne zone subs unamed Melbourne zone subs unamed
Melbourne zone subs unamed
 
Locks And Locking - EN
Locks And Locking - ENLocks And Locking - EN
Locks And Locking - EN
 
Melbourne zone subs unamed
Melbourne zone subs unamed Melbourne zone subs unamed
Melbourne zone subs unamed
 
Www efdeportes com_efd47_psic_htm
Www efdeportes com_efd47_psic_htmWww efdeportes com_efd47_psic_htm
Www efdeportes com_efd47_psic_htm
 
Modul media
Modul mediaModul media
Modul media
 
Mi presentacion personal mallqui avansys
Mi presentacion personal mallqui avansys Mi presentacion personal mallqui avansys
Mi presentacion personal mallqui avansys
 
Jutamas20 2
Jutamas20 2Jutamas20 2
Jutamas20 2
 
Thoughtful Hiring, Thoughtful Growth
Thoughtful Hiring, Thoughtful Growth Thoughtful Hiring, Thoughtful Growth
Thoughtful Hiring, Thoughtful Growth
 
Beroepsprofiel_SarienHage_Denk&Ga
Beroepsprofiel_SarienHage_Denk&GaBeroepsprofiel_SarienHage_Denk&Ga
Beroepsprofiel_SarienHage_Denk&Ga
 
Communicating with voters
Communicating with votersCommunicating with voters
Communicating with voters
 

Semelhante a Sites multi-idiomáticos na web moderna

TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...tdc-globalcode
 
Desenvolva para o Mundo - Internacionalização de Sistemas com Zend Framework
Desenvolva para o Mundo - Internacionalização de Sistemas com Zend FrameworkDesenvolva para o Mundo - Internacionalização de Sistemas com Zend Framework
Desenvolva para o Mundo - Internacionalização de Sistemas com Zend FrameworkEduardo Bona
 
PHP - Programação para seres humanos
PHP - Programação para seres humanosPHP - Programação para seres humanos
PHP - Programação para seres humanosCaike Souza
 
Da argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguroDa argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguroMichael Castillo Granados
 
Desenvolvimento Android: Faça da maneira certa
Desenvolvimento Android: Faça da maneira certaDesenvolvimento Android: Faça da maneira certa
Desenvolvimento Android: Faça da maneira certaNelson Glauber Leal
 
Curso PHP UNIFACS 2014.1 – 2ª aula
Curso PHP UNIFACS 2014.1 – 2ª aulaCurso PHP UNIFACS 2014.1 – 2ª aula
Curso PHP UNIFACS 2014.1 – 2ª aulaJonata Weber
 
Implementando Segurança Em Sua Aplicação PHP
Implementando Segurança Em Sua Aplicação PHPImplementando Segurança Em Sua Aplicação PHP
Implementando Segurança Em Sua Aplicação PHPEr Galvão Abbott
 
PHP Conference Brasil 2013 - Aplicações PHP 5.4 com componentes Aura
PHP Conference Brasil 2013 - Aplicações PHP 5.4 com componentes AuraPHP Conference Brasil 2013 - Aplicações PHP 5.4 com componentes Aura
PHP Conference Brasil 2013 - Aplicações PHP 5.4 com componentes AuraFlávio Lisboa
 
Serversidephp pptx2-120418140114-phpapp01
Serversidephp pptx2-120418140114-phpapp01Serversidephp pptx2-120418140114-phpapp01
Serversidephp pptx2-120418140114-phpapp01joaocarlobarros
 
O processo de criação de um web site | By Alessandra Soares
O processo de criação de um web site | By Alessandra SoaresO processo de criação de um web site | By Alessandra Soares
O processo de criação de um web site | By Alessandra SoaresProdv Comunicação
 
Programando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkProgramando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkPablo Dall'Oglio
 

Semelhante a Sites multi-idiomáticos na web moderna (20)

TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
 
Desenvolva para o Mundo - Internacionalização de Sistemas com Zend Framework
Desenvolva para o Mundo - Internacionalização de Sistemas com Zend FrameworkDesenvolva para o Mundo - Internacionalização de Sistemas com Zend Framework
Desenvolva para o Mundo - Internacionalização de Sistemas com Zend Framework
 
A Revolução dos Middlewares
A Revolução dos MiddlewaresA Revolução dos Middlewares
A Revolução dos Middlewares
 
Php 07 Cakephp
Php 07 CakephpPhp 07 Cakephp
Php 07 Cakephp
 
PHP - Programação para seres humanos
PHP - Programação para seres humanosPHP - Programação para seres humanos
PHP - Programação para seres humanos
 
Da argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguroDa argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguro
 
Android - O que é? Dicas e Desafios.
Android - O que é? Dicas e Desafios.Android - O que é? Dicas e Desafios.
Android - O que é? Dicas e Desafios.
 
Introducao ao PHP
Introducao ao PHPIntroducao ao PHP
Introducao ao PHP
 
Aula 01 - Curso PHP e MySQL
Aula 01 - Curso PHP e MySQLAula 01 - Curso PHP e MySQL
Aula 01 - Curso PHP e MySQL
 
Desenvolvimento Android: Faça da maneira certa
Desenvolvimento Android: Faça da maneira certaDesenvolvimento Android: Faça da maneira certa
Desenvolvimento Android: Faça da maneira certa
 
Variaveis Superglobais
Variaveis SuperglobaisVariaveis Superglobais
Variaveis Superglobais
 
Curso PHP UNIFACS 2014.1 – 2ª aula
Curso PHP UNIFACS 2014.1 – 2ª aulaCurso PHP UNIFACS 2014.1 – 2ª aula
Curso PHP UNIFACS 2014.1 – 2ª aula
 
Implementando Segurança Em Sua Aplicação PHP
Implementando Segurança Em Sua Aplicação PHPImplementando Segurança Em Sua Aplicação PHP
Implementando Segurança Em Sua Aplicação PHP
 
PHP GERAL
PHP GERALPHP GERAL
PHP GERAL
 
Android FREETEC
Android FREETECAndroid FREETEC
Android FREETEC
 
PHP Conference Brasil 2013 - Aplicações PHP 5.4 com componentes Aura
PHP Conference Brasil 2013 - Aplicações PHP 5.4 com componentes AuraPHP Conference Brasil 2013 - Aplicações PHP 5.4 com componentes Aura
PHP Conference Brasil 2013 - Aplicações PHP 5.4 com componentes Aura
 
Serversidephp pptx2-120418140114-phpapp01
Serversidephp pptx2-120418140114-phpapp01Serversidephp pptx2-120418140114-phpapp01
Serversidephp pptx2-120418140114-phpapp01
 
Curso de Introdução - PHP
Curso de Introdução - PHPCurso de Introdução - PHP
Curso de Introdução - PHP
 
O processo de criação de um web site | By Alessandra Soares
O processo de criação de um web site | By Alessandra SoaresO processo de criação de um web site | By Alessandra Soares
O processo de criação de um web site | By Alessandra Soares
 
Programando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkProgramando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um Framework
 

Sites multi-idiomáticos na web moderna