Minggu, 11 September 2011
Jadi, Anda ingin menjangkau pasar global dan situs Anda memerlukan penyesuaian. Mungkin Anda mengira bahwa menerjemahkan teks situs sudah cukup, benar begitu? Mungkin tidak. Tim Webmaster Google sering membuat situs yang dilokalkan ke lebih dari 40 bahasa, dan berikut beberapa hal yang kami pertimbangkan saat meluncurkan halaman kami di bahasa dan wilayah yang berbeda.
(Meskipun jika Anda merasa bahwa masalah ini tidak berlaku bagi Anda karena yang Anda tawarkan hanyalah konten berbahasa Inggris, bisa jadi pengunjung berbahasa lain menggunakan alat seperti Google Terjemahan untuk melihat konten Anda dalam bahasa mereka. Traffic ini akan muncul di dasbor analisis, sehingga Anda dapat mengetahui jumlah pengunjung yang melihat situs dengan cara yang tidak diharapkan.)
Lebih banyak bahasa = lebih banyak template HTML
Kami selalu merekomendasikan hal ini: gunakan template yang sama untuk semua versi bahasa dan selalu upayakan agar HTML template Anda tetap sederhana.
Penggunaan kode HTML yang sama untuk semua bahasa memiliki keuntungan dari sisi pemeliharaan. Hindari menyia-nyiakan waktu memperbaiki bug kode HTML untuk setiap bahasa–buat kode halaman Anda sebersih mungkin dan perbaiki semua masalah gaya visual di CSS. Salah satu keuntungan kode yang bersih: sebagian besar alat penerjemahan akan mengurai string konten yang dapat diterjemahkan dari dokumen HTML, sehingga proses ini akan menjadi jauh lebih mudah jika HTML memiliki struktur yang bagus dan valid.
Berapa panjang satu string?
Jika desain Anda mengandalkan penempatan teks yang disesuaikan dengan elemen ukuran tetap, menerjemahkan teks dapat merusak desain Anda. Misalnya, string teks navigasi Anda di samping kiri mungkin akan menjadi jauh lebih panjang jika diterjemahkan ke beberapa bahasa–lihat perbedaan panjang string antara beberapa navigasi berbahasa Inggris dan Belanda untuk konten yang sama. Perhatikan jika ada judul navigasi yang mungkin digabungkan ke beberapa baris dengan mencari tahu tinggi baris untuk mengakomodasi hal ini (sebaiknya pertimbangkan hal ini jika bahasa asli teks navigasi Anda adalah bahasa Inggris).
Panjang kata variabel mengakibatkan masalah tertentu pada label dan kontrol formulir. Misalnya, jika tata letak formulir Anda menampilkan label di sebelah kiri dan kolom di sebelah kanan, string teks yang lebih panjang dapat ditampilkan menjadi dua baris, sedangkan string teks yang lebih pendek tampaknya tidak berkaitan dengan kolom input formulirnya–kedua skenario tersebut merusak desain dan mengurangi keterbacaan formulir. Pertimbangkan juga gaya visual yang akan diperlukan untuk tata letak kanan ke kiri (RTL)(nanti akan dijelaskan lebih lanjut). Oleh karena itu, kami mendesain formulir dengan label di atas kolom, agar lebih mudah dibaca dan gaya visualnya dapat diterjemahkan dengan baik ke berbagai bahasa.
Hindari juga kolom dengan tinggi tetap–jika Anda mencoba untuk merapikan tata letak dengan latar belakang kotak yang tingginya sama, saat teks diterjemahkan, panjang teks mungkin melebihi area yang tingginya hanya cukup untuk konten berbahasa Inggris. Pikirkan apakah elemen UI yang ingin Anda gunakan dalam desain akan berfungsi, baik saat teksnya lebih panjang maupun lebih pendek–misalnya, tab horizontal vs. tab vertikal.
Di sisi lain
Pengeditan sumber untuk HTML dua arah dapat menjadi masalah karena banyak editor yang dibuat tanpa mendukung algoritme dua arah Unicode (riset lainnya mengenai masalah dan solusi). Singkatnya, cara markup Anda ditampilkan mungkin akan terlihat kacau:
<p>
ابةتث
<img src="foo.jpg" alt=" جحخد" />
< ذرزسش!
</p>
Berdasarkan penggunaan kami setiap hari, editor berikut saat ini memberikan solusi yang memadai untuk pengeditan dua arah: terutama Coda, dan juga Dreamweaver, IntelliJ IDEA, serta JEditX.
Saat membuat desain untuk bahasa RTL, Anda dapat membuat sebagian besar dukungan yang dibutuhkan ke dalam CSS inti dan
menggunakan atribut arah elemen html (untuk kompatibilitas mundur) yang
dikombinasikan dengan class pada elemen body. Seperti biasa, menempatkan semua gaya di satu
stylesheet inti akan memudahkan pemeliharaan.
Beberapa masalah penting terkait gaya visual yang perlu diperhatikan: setiap elemen yang mengambang di sebelah kanan harus dipindahkan ke sebelah kiri dan sebaliknya; lebar margin atau padding tambahan yang diterapkan ke satu sisi elemen harus diganti dan ditukar, lalu setiap atribut yang sejajar dengan teks harus dibalik.
Kami biasanya menggunakan pendekatan berikut, termasuk menggunakan class pada tag isi, bukan
pemilih CSS html[dir=rtl], karena cara ini kompatibel dengan browser versi lama:
Elemen:
<body class="rtl">
<h1>
<a href="https://www.blogger.com/">
<img alt="Google" src="https://www.google.com/images/logos/google_logo.png" />
</a> Heading
</h1>
Gaya visual dari kiri ke kanan (default):
h1 {
height: 55px;
line-height: 2.05;
margin: 0 0 25px;
overflow: hidden;
}
h1 img {
float: left;
margin: 0 43px 0 0;
position: relative;
}
Gaya visual dari kanan ke kiri:
body.rtl {
direction: rtl;
}
body.rtl h1 img {
float: right;
margin: 0 0 0 43px;
}
(Lihat cara kerjanya dalam bahasa Inggris dan Arab.)
Satu catatan terakhir mengenai topik ini: umumnya, konten Anda yang ditujukan untuk halaman dalam bahasa yang ditulis dari kanan ke kiri akan menjadi dua arah, bukan murni RTL, karena beberapa string mungkin perlu mempertahankan arah LTR-nya–misalnya, nama perusahaan dalam skrip Latin atau nomor telepon. Cara untuk memastikan bahwa browser menangani hal ini dengan benar dalam dokumen yang utamanya RTL adalah dengan menggabungkan string teks yang disematkan dengan elemen inline menggunakan atribut untuk menentukan arah, seperti ini:
<h2>עוד ב- <span dir="ltr">Google</span></h2>
Jika Anda tidak memiliki penampung HTML sebagai tempat untuk menarik atribut dir, seperti elemen judul atau kode sumber yang dibuat JavaScript untuk perintah pesan, Anda dapat menggunakan pengganti berikut untuk menentukan arah, yang mana ‫ dan ‬ adalah karakter kontrol Unicode untuk penyematan dari kanan ke kiri:
<title>‫הפוך את Google לדף הבית שלך‬</title>
Contoh penggunaan dalam kode JavaScript:
var ffError = '\u202B' +'כדי להגדיר את Google כדף הבית שלך ב\x2DFirefox, לחץ על הקישור \x22הפוך את Google לדף הבית שלי\x22, וגרור אותו אל סמל ה\x22בית\x22 בדפדפן שלך.'+ '\u202C';
(Untuk detail selengkapnya, lihat artikel W3C tentang membuat HTML untuk skrip Arab, Ibrani, dan skrip lainnya yang ditulis dari kanan ke kiri dan menulis skrip dari kanan ke kiri.)
Semua konten saya berbahasa Yunani...
Jika Anda sebelumnya tidak pernah menggunakan himpunan karakter non-Latin (Sirilik, Yunani, serta berbagai bahasa Asia dan India), editor dan browser Anda mungkin tidak menampilkan konten seperti yang diinginkan.
Periksa bahwa encoding editor dan browser Anda ditetapkan ke UTF-8 (direkomendasikan) serta pertimbangkan untuk menambahkan
elemen <span> dan atribut lang dari elemen html
ke template HTML Anda agar browser mengetahui apa yang akan terjadi saat merender halaman–hal ini
merupakan manfaat tambahan dari memastikan bahwa semua karakter Unicode ditampilkan dengan benar, sehingga Anda tidak perlu menggunakan entitas
HTML seperti é (é) dan menghemat byte yang berharga. Lihat
tutorial W3C tentang encoding karakter
jika Anda mengalami kesulitan–isinya adalah penjelasan mendalam mengenai masalah tersebut.
Perihal pemberian nama
Terakhir, tips praktis tentang konvensi pemberian nama saat membuat beberapa versi bahasa. Menggunakan konvensi standar seperti kode bahasa ISO 639-1 untuk pemberian nama akan membantu saat Anda mulai membuat beberapa versi bahasa dalam dokumen yang sama.
Menggunakan standar konvensional akan membantu pengguna memahami struktur situs Anda serta menjadikannya lebih mudah dikelola bagi semua webmaster yang mungkin mengembangkan situs tersebut, dan menggunakan kode bahasa untuk aset situs lain (gambar logo, dokumen PDF) akan berguna untuk mengidentifikasi file dengan cepat.
Lihat postingan Pusat Webmaster sebelumnya untuk mendapatkan saran tentang struktur URL dan masalah lainnya seputar mengelola situs multiregional dan mengelola situs multibahasa.
Itulah ringkasan dari tantangan utama yang kami hadapi setiap hari; tetapi kami dapat menjamin bahwa melakukan perencanaan dan menerapkannya, serta mengutamakan pembuatan struktur HTML yang bagus dan CSS yang kuat memberikan hasil positif selama proses pelokalan.