تحويل الموقع من عربي للإنجليزي؟

Areej Suliman · 7 فبراير

السلام عليكم ورحمة الله وبركاتة

اعمل على موقع عربي واريد ترجمته للإنجليزية عند الضغط على الأيقونة الخاصة

كيف ؟

Khaled Osama3 · 7 فبراير

تحتاجين لتعلم التوطين (localization).

التوطين هو عملية تكييف المنتج أو التطبيق ليكون ملائمًا لسوق محدد أو لغة معينة أو ثقافة معينة. يتضمن التوطين تعديل النصوص والرسومات والتصميمات والتوجيهات البرمجية بحيث تتوافق مع الاحتياجات والتفضيلات الثقافية واللغوية للمستخدمين في السوق المستهدف.

يشمل التوطين تغيير النصوص، وتعديل التنسيق والتصميم ليناسب الثقافة واللغة المستهدفة، وتحويل العملات والتوقيت إلى النظام المستخدم في البلد المستهدف، وتوفير ترجمة للواجهة والمحتوى، بالإضافة إلى تعديل الأشكال والرموز الخاصة بتوافقها مع الثقافة المستهدفة.

على سبيل المثال، إذا كنت تطور تطبيقًا للهواتف الذكية وترغب في إطلاقه في الأسواق العربية، فسيكون عليك توطين التطبيق ليدعم اللغة العربية، وقد يتطلب ذلك ترجمة النصوص إلى العربية، وضبط التصميم ليدعم الكتابة من اليمين إلى اليسار، وتغيير بعض الرموز والصور لتتناسب مع الثقافة العربية، وغيرها من التعديلات المتعلقة باللغة والثقافة.

ويمكنكى استخدام لغة ال JavaScript للقيام بهذه المهمة.

وهذا مثال بسيط للتوطين بين اربعة لغات مختلفة، اللغة العربية والإنجليزية والفرنسية والإسبانية.

function translateText(text, targetLanguage) {
    // قاموس الترجمة
    const translations = {
        "مرحبا": {
            "en": "Hello",
            "fr": "Bonjour",
            "es": "Hola"
        },
        "كيف حالك؟": {
            "en": "How are you?",
            "fr": "Comment ça va?",
            "es": "¿Cómo estás?"
        },
    };

    // التحقق مما إذا كان النص موجودًا في قاموس الترجمة
    if (translations[text]) {
        // إذا كان النص موجود، فتحقق من توفر الترحمة للغة المستهدفة
        if (translations[text][targetLanguage]) {
            // إذا وجدت الترجمة، قم بإرجاعها
            return translations[text][targetLanguage];
        } else {
            // إذا لم تجد الترجمة، قم بإرجاع النص الأصلي
            return text;
        }
    } else {
        // إذا لم يكن النص موجودًا في قاموس الترجمة، قم بإرجاع النص الأصلي
        return text;
    }
};
const originalText = "مرحبا";
const targetLanguage = "en"; // اللغة المستهدفة هنا هي الإنجليزية
const translatedText = translateText(originalText, targetLanguage);
console.log(translatedText); // Output: Hello

Taha Khalid · 7 فبراير

ساشرح طريقه بسيطه تستطيع منها ترجمة موقعك ببساطه جدا واذا لديك اي استفسار فاتركه في التعليقات وساجاوبك فورا

مثال صفحة html بسيط جدا بها مثلا 6 كلمات باللغه الانجليزيه و زر عند الضغط عليه يتم تحويل الموقع للعربي والعكس

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Translation Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="words">
    <p class="english-word">Hello</p>
    <p class="english-word">World</p>
    <p class="english-word">Good</p>
    <p class="english-word">Morning</p>
  </div>
  <button id="translateBtn">Translate</button>

  <script src="script.js"></script>
</body>
</html>

ضع تصميم ليسه له علاقه ولاكن لاعطاء الصفحه جمالا

body {
  font-family: Arial, sans-serif;
}

#words {
  margin-bottom: 20px;
}

.english-word {
  display: inline-block;
  margin-right: 10px;
}

و اخير تنفيذ المنطق الخاص بالترجمه

const englishWords = ["Hello", "World", "Good", "Morning"];
const arabicWords = ["مرحبا", "العالم", "جيد", "صباح الخير"];

let isEnglish = true;

document.getElementById('translateBtn').addEventListener('click', function() {
  const words = document.querySelectorAll('.english-word');
  
  if (isEnglish) {
    words.forEach((word, index) => {
      word.textContent = arabicWords[index];
    });
    isEnglish = false;
    this.textContent = 'Translate to English';
  } else {
    words.forEach((word, index) => {
      word.textContent = englishWords[index];
    });
    isEnglish = true;
    this.textContent = 'Translate to Arabic';
  }
});

هذه المثال يعطيكي الفكره ولاكن اذا كان موقك كبير جدا فا سنتجه الي استخدام الحزم الترجمه الخاصه js
تستطيع تجربة الكود من هنا

Taha Khalid · 8 فبراير

بتاريخ منذ ساعة مضت قال Areej Suliman:

نعم الموقع كبير

فكيف استعمل الحزم ؟

سازودك بتفاصيل عند تنفيذها تستطيعي ترجمة اي موقع فقط باللغاتك الاساسيه html & css & js
سنستعمل حزمة تسمي i18next

هي إحدى مكتبات جافا سكريبت المشهورة للتعريب تسمى i18next. فهو يوفر حلاً قويًا للتعامل مع الترجمه و التعريب في مواقع الويب.

فيما يلي مثال أساسي لكيفية استخدام i18next للترجمة:

أولاً، قم بتضمين المكتبة في مشروعك. يمكنك تضمينه عبر CDN.
يجب وضع هذا الكود في جميع الصفحات التي ستستخدم بها الترجمه

  <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/22.4.4/i18next.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next-browser-languagedetector/6.0.1/i18nextBrowserLanguageDetector.min.js"></script>

قم بإعداد ملفات الترجمة الخاصة بك. تحتوي هذه الملفات عادةً على ترجمات للغات مختلفة بتنسيق JSON.

هذه مثال كامل للطريقه

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <title>Multi Language Translation</title>
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light justify-content-center">
        <div>
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" lang="en" data-i18n="home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-i18n="about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-i18n="contact">Contact us</a>
            </li>
          </ul>
        </div>
      </nav>
      <h3 class="text-primary" data-i18n="selectLanguage">Select a language</h3>
      <select class="p-1 mt-2">
        <option value="en" data-i18n="english" selected>English</option>
        <option value="ar" data-i18n="arabic">Arabic</option>
      </select>
    </div>
    <script src="script.js" type="module"></script>
  </body>
</html>

كود JavaScript (script.js) واعدادت ملف الترجمه :

const translations = {
  en: {
    home: "Home",
    about: "About",
    contact: "Contact us",
    selectLanguage: "Select a language",
    english: "English",
    arabic: "Arabic",
  },
  ar: {
    home: "الصفحة الرئيسية",
    about: "من نحن",
    contact: "تواصل معنا",
    selectLanguage: "إختر لغة",
    english: "الانجليزية",
    arabic: "العربية",
  },
};




const languageSelector = document.querySelector("select");
languageSelector.addEventListener("change", (event) => {
  setLanguage(event.target.value);
  localStorage.setItem("lang", event.target.value);
});

document.addEventListener("DOMContentLoaded", () => {
  const language = localStorage.getItem("lang") || "en"; // اذا لم تكن اللغة متوفرة استخدم الانجليزية
  setLanguage(language);
});

const setLanguage = (language) => {
  const elements = document.querySelectorAll("[data-i18n]");
  elements.forEach((element) => {
    const translationKey = element.getAttribute("data-i18n");
    element.textContent = translations[language][translationKey];
  });
  document.dir = language === "ar" ? "rtl" : "ltr";
};

الكود الذي قدمته يستخدم مكتبة i18next لإضافة دعم لترجمة المحتوى في الموقع . هذا الكود يقوم بتكوين i18next لاستخدام مكون مُحدد يسمى i18nextBrowserLanguageDetector لاكتشاف لغة المستخدم من خلال المتصفح. ثم يتم تهيئة i18next لتحميل الموارد (الترجمات) للغتين الإنجليزية والعربية.

.use(i18nextBrowserLanguageDetector) : هذا الجزء يعين مكون الكشف عن لغة المتصفح لـ i18next.

.init({ ... }): هنا يتم تهيئة i18next باستخدام الموارد (الترجمات) للغات المختلفة. كل لغة لها مفتاح وتحتوي على مصفوفة من الترجمات للمفاتيح المحددة. يتم تعريف fallbackLng كلغة احتياطية في حالة عدم توفر الترجمات للغة المطلوبة. يتم تعيين debug إلى true لتمكين وضع التصحيح، وdetection يحدد أسلوب الكشف عن اللغة (في هذه الحالة، يتم استخدام كشف اللغة من المتصفح).

آخر جزء في الكود يقوم بإضافة مستمع لحدث النقر على الزر changeLanguageBtn. عندما يتم النقر على الزر، يتم التبديل بين اللغتين الإنجليزية والعربية باستخدام i18next.changeLanguage() وفقًا للغة الحالية.

تم التعديل في 8 فبراير بواسطة Taha Khalid

Areej Suliman · 7 فبراير

نعم الموقع كبير

فكيف استعمل الحزم ؟

Mustafa Suleiman · 7 فبراير

الأمر يعتمد على التقنيات المستخدم في الموقع هل يتم استخدام React أم لارافل؟

عامًة في جافاسكريبت هناك مكتبة i18next وذلك هو المستند الرسمي:

https://www.i18next.com/

حيث تدعم i18next تحميل الملفات الترجمة بصيغ مختلفة مثل JSON و PO وغيرها، وتستطيع استخدامها في تطبيقات React و Angular و Vue.js وغيرها.

وإن كان الموقع يتم تصييره rendering عن طريق SSR أي من جهة الخادم، فهنا الترجمة تتم على الخادم من خلال متغيرات وملف به الترجمات المطلوبة سواء من خلال إطار next.js أو من خلال PHP تفقدي النقاش التالي:

أما إن كان الموقع Static تستطيعي إنشاء صفحات منفصلة لكل لغة والتبديل بينها من خلال جافاسكريبت.

Areej Suliman · 7 فبراير

استخدم bootstrap فأي من الطرق ينفع ؟

Areej Suliman · 7 فبراير

هل يوجد في المنصة درس عن التوطين او خارجها ؟

احتاج رابط ومصدر فضلا لا امراً لاني باشد الحاجة اليه ؟

وهل التوطين يدخل من مهام مطور واجهة المستخدم ام لا ؟

Khaled Osama3 · 7 فبراير

نعم يدخل فى مهام مطور واجهة المستخدم.

اذا كنت تريد عمله باستخدام مكتبة bootstrap فيمكنك ذلك عن طريق استخدام مكتبة Polylang.

ونعم يوجد فى أخر دورة تطوير تطبيقات الويب باستخدام لغة PHP فصل عن التعريب وهو شبيه جدا للتوطين ، وفعال اكثر منه.

رابط الدورة:https://academy.hsoub.com/learn/php-web-application-development/

Areej Suliman · 7 فبراير

لكن لم ناخذ لغة php في دورة تطوير واجهة المستخدم

فأنا اعمل على html & css & js

فهل تفيد هذه الطريقة ؟

Khaled Osama3 · 7 فبراير

بتاريخ 1 ساعة قال Areej Suliman:

لكن لم ناخذ لغة php في دورة تطوير واجهة المستخدم

فأنا اعمل على html & css & js

فهل تفيد هذه الطريقة ؟

نغم تفيد كل ما عليكى هو فهم كيفية إنشاءها ومن ثم عملها بأى لغة برمجة.

Areej Suliman · 8 فبراير

يبدو الموضوع أصعب مما توقعت

Areej Suliman · 8 فبراير

بتاريخ 12 ساعة قال Mustafa Suleiman:

أما إن كان الموقع Static تستطيعي إنشاء صفحات منفصلة لكل لغة والتبديل بينها من خلال جافاسكريبت.

ممكن طريقة التبديل بين الصفحات من خلال الجافاسكربت ؟

El Sayed El Tohamy · 8 فبراير

بتاريخ 2 ساعة قال Areej Suliman:

ممكن طريقة التبديل بين الصفحات من خلال الجافاسكربت ؟

الآمر يمكن أن يتم بأكثر من طريقة، ولكنهم جميعًا يعتمدون على نفس المفهوم، وهو وجود نسخة من المحتوى العربي ونسخة من المحتوى الإنجليزي، ويتم عرض المحتوى المناسب بناء على اختيار اللغة.

هناك أسلوب ينشئ صفحة مستقلة للعربية وأخرى للإنجليزية،

على سبيل المثال

إنشاء صفحة HomeAr.html للغة العربية،

<!-- HomeAr.html -->
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>موقعي متعدد اللغات</title>
</head>
<body>
    <!-- زر التبديل للإنجليزية -->
    <button id="ِEnglish">English</button>

    <!-- يتم كتابة محتوى الصفحة العربي هنا -->

    <script>
        function toEnglish() {           
             window.location.href = 'HomeEn.html'; // Switch to English           
        }

        document.getElementById('English').addEventListener('click', toEnglish);
    </script>
</body>
</html>

وإنشاء صفحة أخرى HomeEn.html للغة الإنجليزية،

<!-- HomeEn.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Multilingual Website</title>
</head>
<body>
    <!-- زر التبديل للعربية -->
    <button id="ِArabic">عربي</button>

    <!-- يتم كتابة محتوى الصفحة الإنجليزية هنا -->

    <script>
        function toArabic() {           
             window.location.href = 'HomeAr.html'; // Switch to Arabic           
        }

        document.getElementById('Arabic').addEventListener('click', toArabic);
    </script>
</body>
</html>

وفي كل صفحة يوجد زر يقوم بإظهار الصفحة الأخرى، وبهذا يمكننا التبديل بين اللغات.

وهناك أسلوب آخر يعرض المحتويين في صفحة واحدة ويقوم بإظهار المحتوى المطلوب وإخفاء المحتوى الآخر، على سبيل المثال المحتوى العربي يوضع في حاوية div ونعطيها معرف id خاص بها ويتم إظهارها أو إخفاؤها على حسب اللغة، ونفس الطريقة للمحتوى الإنجليزي.

Areej Suliman · 9 فبراير

بتاريخ 17 ساعة قال El Sayed El Tohamy:

وفي كل صفحة يوجد زر يقوم بإظهار الصفحة الأخرى، وبهذا يمكننا التبديل بين اللغات.

جميل جربتة وضبط لكن لو بجمع الكودين في كود واحد كيف

بتاريخ 17 ساعة قال El Sayed El Tohamy:

<script>
        function toArabic() {           
             window.location.href = 'HomeAr.html'; // Switch to Arabic           
        }

        document.getElementById('Arabic').addEventListener('click', toArabic);
    </script>

بتاريخ 17 ساعة قال El Sayed El Tohamy:

<script>
        function toEnglish() {           
             window.location.href = 'HomeEn.html'; // Switch to English           
        }

        document.getElementById('English').addEventListener('click', toEnglish);
    </script>

بحيث اضع الكود في ملف جافاسكربت مستقل

كيف اختصر الكود ؟

El Sayed El Tohamy · 9 فبراير

بتاريخ 1 ساعة قال Areej Suliman:

بحيث اضع الكود في ملف جافاسكربت مستقل

الأمر بسيط إن شاء الله،

نقوم بنقل جميع شيفرات الجافاسكريبت إلى ملف واحد وليكن اسمه script.js ثم يتم ربط هذا الملف مع كل صفحات الموقع عن طريق كتابة الأمر التالي آخر كل صفحة

<script src="script.js"></script>

Areej Suliman · 9 فبراير

بتاريخ 3 ساعة قال El Sayed El Tohamy:

الأمر بسيط إن شاء الله،

هل انقل الكودين كما هم ؟

ام استطيع وضعهما في كود واحد ؟

El Sayed El Tohamy · 9 فبراير

بتاريخ منذ ساعة مضت قال Areej Suliman:

هل انقل الكودين كما هم ؟

نعم ننقل جميع الشيفرات الموجودة بالملفات إلى ملف واحد كما هي بنفس المسميات

تحويل الموقع من عربي للإنجليزي؟

السؤال

رابط هذا التعليق

شارك على الشبكات الإجتماعية

17 أجوبة على هذا السؤال

Recommended Posts

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على