عرض HTML5 في المتصفحات القديمة باستخدام إطار Google Chrome

مقدمة

يضيف HTML5 الكثير من الأدوات الرائعة الجديدة إلى مربع أدوات مطور الويب، بما في ذلك ما يلي:

  • واجهات برمجة تطبيقات JavaScript جديدة وأكثر فعالية
  • رسومات موجّهة يمكن تغيير حجمها (SVG) للرسومات المتجهة.
  • لوحة ثنائية الأبعاد ورسومات WebGL ثلاثية الأبعاد
  • CSS3 للزوايا الدائرية والتدرجات وما إلى ذلك.
  • الترميز المعبّر أكثر

هذه القائمة ليست شاملة بالطبع، فقد تطور النظام الأساسي للويب بشكل كبير، وتتسع الفجوة بين المتصفحات القديمة والحديثة كل يوم.
يتوافق الآن كل متصفح رئيسي متوافق مع أجهزة سطح المكتب مع أجزاء كبيرة من HTML5 في أحدث إصدار، إلا أن المتصفحات القديمة لا تزال تفرض تحديًا لاستخدام أحدث وأروع الميزات اليوم.

يمكن أن يساعدك إطار Google Chrome في إنشاء صفحات HTML5 متطورة اليوم مع الاستمرار في تمكين الأشخاص الذين يستخدمون المتصفحات القديمة من مشاهدة المحتوى التابع لك.

ما هو إطار Google Chrome؟

إن إطار Google Chrome هو مكوّن إضافي لـ Internet Explorer يتيح عرض لوحة المتصفح الكاملة باستخدام محرك العرض في Google Chrome. وهو يدعم كل ميزات HTML5 التي تجدها في Chrome مدمجة بسلاسة مع تجربة مستخدم Internet Explorer. يتوفر إطار Chrome للإصدارات 6 و7 و8 و9 من Internet Explorer. يعتبر Chrome Frame أكثر فائدة بالتأكيد عند التوافق مع متصفح قديم مثل IE6-to-IE8 ولكن إذا كنت، على سبيل المثال، تشترط استخدام WebGL في تطبيقك، فقد يكون طلب استخدام Chrome Frame لمستخدمي IE9 مفيدًا أيضًا.

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

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

التفعيل

يمكنك تمكين Chrome Frame من عرض صفحة من خلال إضافة علامة HTML الوصفية أو استخدام عنوان HTTP. هذا مهم جدًا. وهذا يعني أنه لن يتوقف أي موقع إلكتروني في حال تثبيت Chrome Frame لدى المستخدم، لأنّ الموقع يتحكم بشكل كامل في استخدام المكوّن الإضافي أو العرض التلقائي. توضّح مقتطفات الرمز التالية كيف يمكن اختيار عرض الموقع بواسطة Chrome Frame.

الخيار 1: عنوان HTTP (يمكنك إضافة هذا العنوان إلى ضبط خادم HTTP (مثل Apache):

X-UA-Compatible: chrome=1

الخيار 2: العلامة الوصفية (ما عليك سوى لصقها في قسم HTML <head>)

<meta http-equiv="X-UA-Compatible" content="chrome=1">

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

المطالبة بإطار Google Chrome

قد تقرر إنهاء الدعم للمتصفحات القديمة بشكل كامل لعدة أسباب، منها ما يلي:

  • يتطلب موقعك ميزات حديثة مثل فيديو HTML5 أو لوحة الرسم أو WebGL أو CSS3
  • مدة التطوير المستخدمة على المتصفحات القديمة مرتفعة جدًا
  • تسريع وقت تطوير الميزات الجديدة

قد يوفّر Chrome Frame استراتيجية لمواصلة منح مستخدمي المتصفّحات القديمة طريقة تتيح لهم مواصلة استخدام موقعك الإلكتروني.

وينقل إطار Chrome إلى أنه متاح من خلال توسيع عنوان وكيل المستخدم للمضيف باستخدام السلسلة "chromeframe". لمزيد من المعلومات، يُرجى الاطّلاع على وكيل مستخدم Chrome Frame.

يمكنك استخدام الرصد من جهة الخادم للبحث عن هذا الرمز المميّز وتحديد ما إذا كان يمكن استخدام Chrome Frame للصفحة أم لا. في حالة وجود إطار Chrome، يمكنك إدراج العلامة الوصفية المطلوبة؛ وإذا لم يكن الأمر كذلك، يمكنك إعادة توجيه المستخدمين إلى صفحة تشرح كيفية تثبيت Chrome Frame. كبديل للالتقاط من جانب الخادم، يمكنك استخدام النص البرمجي CFInstall.js لاكتشاف إطار Chrome ومطالبة المستخدمين بتثبيت المكوّن الإضافي بدون إعادة تشغيل المتصفحات. يعد استخدام النص أمرًا واضحًا. ما عليك سوى إضافة علامات النص البرمجي والأنماط الاختيارية إلى صفحتك كما في المثال التالي:

<html>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

<style>
/*
CSS rules to use for styling the overlay:
    .chromeFrameOverlayContent
    .chromeFrameOverlayContent iframe
    .chromeFrameOverlayCloseBar
    .chromeFrameOverlayUnderlay
*/
</style>

<script>
// You may want to place these lines inside an onload handler
CFInstall.check({
mode: "overlay",
destination: "http://www.waikiki.com"
});
</script>
</body>
</html>

المطالبة بنفسك

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

http://www.google.com/chromeframe/

والتي يمكن وضعها في إطار Iiframe.

إلحاق مَعلمة إعادة توجيه لإعادة توجيه المستخدمين إلى موقعك الإلكتروني بعد اكتمال التثبيت:

http://www.google.com/chromeframe/?redirect=http://www.google.com/ بدلاً من الانتقال إلى الصفحة المقصودة لإطار Chrome، يمكنك أيضًا إرسال المستخدمين مباشرةً إلى اتفاقية ترخيص المستخدم النهائي (EULA)، وبالتالي حفظ خطوة واحدة في عملية التثبيت. http://www.google.com/chromeframe/eula.html

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

ويمكن للمستخدمين تثبيت إطار Chrome بدون امتلاك امتيازات إدارية على أجهزتهم.

ألحِق المعلَمة user=true لتفعيل تثبيت Chrome Frame على مستوى المستخدم، كما في ما يلي:

http://www.google.com/chromeframe/?user=true

التثبيت على مستوى المؤسسة

يمكن للمؤسسات نشر Chrome Frame على مستوى الشركة باستخدام أداة تثبيت MSI التي يمكن تنزيلها من هنا: http://www.google.com/chromeframe/eula.html?msi=true.

لمزيد من المعلومات عن عمليات نشر Chrome والمؤسسة، يمكنك الاطّلاع على http://www.chromium.org/administrators.

الاستخدام

استخدمت العديد من المواقع الإلكترونية الكبرى، مثل yahoo.com وwordpress.com والعديد من خدمات Google إطار Google Chrome. إلى جانب منح المستخدمين إمكانية الوصول إلى تجربة ويب أكثر حداثة في العديد من المواقع الإلكترونية، يقدّم Chrome Frame أيضًا تحسُّنًا كبيرًا في وقت التحميل الأولي. يمكنك التحقق مما إذا كان Chrome Frame يساعد موقعك في العرض بشكل أسرع من خلال الانتقال إلى webpagetest.org واختيار Chrome Frame ليكون المتصفح.

مزيد من المعلومات

لمزيد من المعلومات، راجع دليل البدء أو شاهِد هذا الفيديو من Google IO 2011