التوجية بحسب نوع المتصفح

[Mr.Dosa]

السلام عليكم اخوانى الاعزاء اليوم جئت لكم بدرس مفيد جدا جد اً وهذا ينفع المطورين والمبتدأيين
وهذا بعد بحث طال لمده شهور فى المواقع العربيه والاجنبيه
وفى النهايه الحمد لله وجده
فى مدرسة مفيد :nice:
لنبدأ الدرس

بسم الله الرحمن الرحيم

لابد وانه سبق لك كثيراً رؤية مواقع تضع في اسفل صفحاتها عبارة كالتالية "لافضل تصفح استخدم انترنت اكسبلور الاصدار الفلاني " او الموقع متوافق مع IE الاصدار السادس فقط.بحكم انه الاحدث

هذا يعود الى ان بعض الامور في التصميم كبعض اكواد الجافا او اكواد الستايل شيت لايتعرف عليها الى IE اي انها ليس ضمن المعايير القياسية لكل المتصفحات,,ولكن قوة مايكرسوفت وإنتشار منتجاتها ومتصفحها قد اعطاها ربما نوع من القدرة على تحويل المعايير القياسية طبقاً لما لديها وليس لما لدى الاخرين.

وانت كمصمم عادي من حقك ان تصمم الموقع لكي يتوافق مع المتصفح الاكثر انتشاراً وهذا اضعف الايمان.

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

في هذا الدرس ستتعرف على بعض اكواد الجافا سكربت لعمل ذلك

اولاً قم بتصميم نسخة متوافقة مع IE احدث اصدار وحالياً الاصدار السادس..ولنفرض ان هذه النسخة من الموقع ستكون في مجلد باسم IE6

الكود الذي سيتعرف على من يناسبة هذة النسخة وينقله لها كالتالي:

//MSIE 6.x Detection 
if ((navigator.appName == \"Microsoft Internet Explorer\") && (parseInt(navigator.appVersion) >= 6 )) 
{location.href=\"http://www.yoursite.com/IE6\";} 

ثم صمم نسخة اخرى تناسب المتصفح IE الاصدار الثالث بحكم انه اقدم المتوفر ومايناسبة سيناسب الاصدار الرابع والخامس ولنفرض انك ستسمي مجلد هذه النسخة IE..واستخدم الكود التالي

//MSIE 3.x To 5.x Detection 
else if (navigator.appName == \"Microsoft Internet Explorer\") 
{location.href=\"http://www.yoursite.com/IE\";} 

الكود اعلاة يتعامل مع اي زائر يستخدم IE اصدار اقدم من السادس ويقوم بتحويلة الى المجلد المناسب.

http://www.yoursite.com/IE

الان لديك نسختان من الموقع يستقبلان اي زائر يستخدم IE مهما كان الاصدار..

الان ننتقل الى المتصفح الثاني من حيث الانتشار وهو Netscape.وهذا المتصفح لايوجد اختلافات كبيرة في التقنيات المدعومة بين النسخ المختلفة له..

لذا فقط انشى نسخة واحدة متوافقة معه وسنفترض انك ستضعها بمجلد مسمى NS,,,وسنستخدم الكود التالي.

//Netscape Detection 
else if ((navigator.appName == \"Netscape\") 
{location.href=\"http://www.yoursite.com/NS\";} 

ثم اخيراً انشى نسخة رابعة ويجب ان تكون ابسطهم وتكون خاليه من التعقيدات او التقنيات الغير قياسية...وسافترض انك سميت المجلد الذي سيحويها Other.فسوف استخدم الكود كالتالي.

//Other Browser Detection 
else 
{location.href=\"http://www.yoursite.com/Other\";} 

الان تبقى ان تنشى الملف المسئول عن التدقيق والتحويل...انشى ملف باسم index.html ضعه في المجلد الرئيسي للموقع..وضع الكود النهائي فيه وهو كالتالي:

<script language=\"JavaScript\"> 
<!-- Cloak Engaged 
//MSIE 6.x Detection 
if ((navigator.appName == \"Microsoft Internet Explorer\") && (parseInt(navigator.appVersion) >= 6 )) 
{location.href=\"http://www.yoursite.com/IE6\";} 
//MSIE 3.x To 5.x Detection 
else if (navigator.appName == \"Microsoft Internet Explorer\") 
{location.href=\"http://www.yoursite.com/IE\";} 
//Netscape Detection 
else if ((navigator.appName == \"Netscape\") 
{location.href=\"http://www.yoursite.com/NS\";} 
//Other Browser Detection 
else 
{location.href=\"http://www.yoursite.com/Other\";} 
//-- Cloak Disengaged --> 
</script> 

كما تلاحظ انني اختصرت العملية على اربع نسخ فقط....لكن يمكنك انشاء اي قدر ترغب من النسخ ولاي نوع او اصدار للمتصفحات..وتعدل الاكواد فقط...مثال

if ((navigator.appName == \"Microsoft Internet Explorer\") && (parseInt(navigator.appVersion) >= 6 )) 
{location.href=\"http://www.yoursite.com/IE6\";} 

فقط قم بتغير Microsoft Internet Explorer بالاسم الرسمي للمتصفح ووضع رقم الاصدار بدلاً من 6 في الكود اعلاه..

تحياتى للجميع

[مورى]

رااااااااااائع اخى العزيز Mr.Dosa
بارك الله فيك وفعلا انت تغيب وتيجى بموضوع رااااائع مثلك تقبل تحياتى
اخوك العزيز مورى

[عبد الله هُربي]

جزاك الله خير على الموضوع الهام ..
الف الف شكر لك ..




وخالص المودة ،،

[bader_ppc]

جزاك الله خيرا على هذا الدرس الله يعطيك العافيه

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

كلنا يعلم أن أجهزة بوكت بي سي شاشاتها صغيرة وتحتاج الى مواقع مصممه حسب مقاسات هذه الشاشات .

هل يمكن أن أصمم موقع خاص للمتصفحين عن طريق كمبيوترات الجيب و عند دخولهم الموقع يتم تحويلهم الى الموقع الخاص الذي قمت بتصميمه ليناسب كمبيوترات الجيب

نعم يمكن ذلك بإستخدم السكربت التالي :

<script>    
if (navigator.userAgent.indexOf("PalmSource") != -1)
    {window.location='http://www.website.com/ppc'}
  
if (navigator.userAgent.indexOf("Windows CE") != -1)
    {window.location='http://www.website.com/ppc'}
</script>

الآن عند دخول الزوار من أجهزة البوكت يتم تحويلهم مباشرة إلى الموقع المخصص للبوكت

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

يتم التعامل معهم عن طريق كود أخونا Mr.Dosa

يمكن إضافة الكود الخاص بأجهزة ppc أسفل الكود الخاص بمتصفحات أجهزة pc

هذا السكربت يتعامل مع أجهزة بالم أيضا

شكرا لكم

سبب التعديل : بعض البدليات و الأخطاء الإملائية

[Developer.]

الف شكر يا محمد درس مفيد كما موقعه الاصلى

[شبكة الملكة]

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

من دولة البحرين ..اذا كان من دولة البحرين يظهر له اعلان معين في وسط الصفحة من اي دولة ثانية لا يظهر له ..

هل يمكن عمل هذه الطريقة

[Mr.Dosa]

اولا احب اشكركم على هذا الدرس اخوانى الاعزاء وهو فلا درس راااااائع جدا


اخى العزيز bader_ppc شكرا على تعاونكم معايا وفعلا النقطه اللى انت شرتها كنت بدور عيلها علشان يكون الدرس متكامل وانت اتيت بها ياعبقرى



شكر اخى العزيز -Developer- وشرفنى واسعدنى حضورك



اخى العزيز شبكة الملكة
والله انا ما لقتيش درس للموضوع ده بس ممكن بس ما اعتقدش برضه
ههههههههه لان كل بلد بيكون لها اي بى او ممكن كذا اى بى فااااااااا ؟ مش عارف

[Mr.Dosa]

رااااااااااائع اخى العزيز Mr.Dosa
بارك الله فيك وفعلا انت تغيب وتيجى بموضوع رااااائع مثلك تقبل تحياتى
اخوك العزيز مورى

مورى مأختش بالى والله ياعسل شرفنى حضورك ياغالى

[Mr.Dosa]

جزاك الله خير على الموضوع الهام ..
الف الف شكر لك ..




وخالص المودة ،،

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

(وخالص المودة ،، )

[ElNeMr]

درس اكثر من رائع يا استاذى العزيز

[Mr.Dosa]

تحياتى اخى العزيز النمر وتسلم يغالى على ردك على الموضوع

[الغريم]

ممتاز موضوع مفيد حقا
للمصممين
يقدر يسوي صفحتين متخصصتين
مشكوووور حبوب

[Mr.Dosa]

ممتاز موضوع مفيد حقا
للمصممين
يقدر يسوي صفحتين متخصصتين
مشكوووور حبوب

مشكور على مرورك الكريم اخى الغريم وشرفنى مرورك ياغالى والله