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

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

شفرات برمجية

شفرات في لغة Javascript و PHP تساعدك أثناء عملك في تصميم موقع للهاتف النقال.

التأكد من متصفح الويب على الهاتف النقال

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

if((navigator.userAgent.match(/iPhone/i)) || navigator.userAgent.match(/iPod/i)) {
	// iPhone توجيه المستخدم إلى الصفحة الخاصة بمستخدمي
	document.location.href='www.yourdomain.com/iphone_index.html';
}

المصدر

طريقة أخرى بإستخدام لغة Javascript:

var browser=navigator.userAgent.toLowerCase();
var users_browser = ((browser.indexOf('iPhone')!=-1);
if (users_browser)  {
	// iPhone توجيه المستخدم إلى الصفحة الخاصة بمستخدمي
	document.location.href='www.yourdomain.com/iphone_index.html';
}

المصدر

الطريقة بإستخدام لغة PHP، تحتوي على ثلاثة شروط أولها التأكد من أن المستخدم يستعمل هاتف iPhone ويتم توجيهه إلى نسخة iPhone والشرط الثاني توجيه مستخدمي الهواتف الأخرى إلى النسخة المخصصة لهم وكذلك عناكب محركات البحث من محرك Google و Yahoo:

// iPhone/ iPod touch توجيه مستخدمي
if(preg_match('/(apple|iphone|ipod)/i', $_SERVER['HTTP_USER_AGENT']) && preg_match('/mobile/i', $_SERVER['HTTP_USER_AGENT'])) {
	header('location: http://yoursite.com/iphone');
}

// توجيه مستخدمي الهواتف النقالة الأخرى
if (preg_match('/(blackberry|configuration\/cldc|hp |hp-|htc |htc_|htc-|iemobile|kindle|midp|mmp|motorola|mobile|nokia|opera mini|opera mobi|palm|palmos|pocket|portalmmm|ppc;|smartphone|sonyericsson|sqh|spv|symbian|treo|up.browser|up.link|vodafone|windows ce|xda |xda_)/i', $_SERVER['HTTP_USER_AGENT'])) {
	header('location: http://yoursite.com/mobile');
}

// توجية عناكب محركات البحث الخاصة لنسخ الهاتف النقال
if (preg_match('/Googlebot-Mobile/i', $_SERVER['HTTP_USER_AGENT']) || preg_match('/YahooSeeker\/M1A1-R2D2/i', $_SERVER['HTTP_USER_AGENT'])) {
    header('location: http://yoursite.com/mobile');
}

المصدر: من إضافة mobilePress

طريقة أخرى بإستخدام لغة PHP:

// iPhone/iPod touch توجيه مستخدمي هاتف
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))
{
	header('Location: http://yoursite.com/iphone');
	exit();
}

المصدر

تحويل المستخدم عن طريق نطاق فرعي

تفيدك هذه الطريقة من عمل إختصار لرابط الموقع المخصص للهواتف النقال (مثل m.yoursite.com) بحيث يتم نقل المستخدم إلى الواجهة المخصصة للهواتف النقالة عن طريقها، يتم ذلك عن طريق ملف .htaccess، أولاً قم بإنشاء نطاق فرعي مثل m.example.com ثم أنشئ ملف بإسم .htaccess (قد يكون موجود بالأصل) في ملف /public_html/ أو إسم الملف الرئيسي الذي يحوي النطاق الفرعي.

بعد ذلك ضع الشفرة التالية في ملف htaccess. مع تغيير عنوان الموقع والنطاق الذي إخترته:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^m.myblogname\.com
RewriteRule ^(.*)$ http://myblogname.com/?mobile$1 [R=permanent,L]

## Last two lines are only required if you have an index.html file there

RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /(([^/]+/)*)index\.html\ HTTP/
rewriterule index\.html$ http://yoursite.com/mobile%1 [R=301,L] -*/-*

المصدر

دعم تثبيت العنصر في الصفحة في متصفح iPhone Safari

من المشاكل التي عانيت منها شخصياً عند تجربتي في إستخدام قمية fixed الموجودة في خاصية position ضمن تقنية CSS هي عدم دعم متصفح iPhone Safari لهذه الخاصية بشكل مباشر بالرغم من إستخدامه محرك ممتاز وهو محرك Webkit، أما عن طرق حل هذه المشكلة فيجب إستخدام Javascript، هناك حيل أو شفرات جاهزة تجدها على الروابط التالية:

إضافات ووردبريس

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

إضافة WPtouch

إضافة تحتوي على العديد من المميزات وتوفر قالب جاهز للمدونات يعتمد على دعم الأجاكس وظهور عناصر القالب تماماً كعناصر تطبيقات iPhone. كذلك إمكانية إدارة صفحات وروابط المدونة بشكل سلس مبني على الأيقونات الخاصة بالروابط drop-down menu وصفحة الإدارة الخاصة بالإضافة حيث تجد المميزات بشكلها الأنيق في لوحة تحكم الووردبريس.

إضافة WordPress Mobile Pack

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

إضافة WordPress Mobile Edition

إضافة تمتاز بتحديد القالب المخصص للهاتف حسب منصة الهاتف بحيث يتم اختيار عرض القالب الأصلي عن القالب الخاص بالهاتف حسب نوع الهاتف (iPhone, BlackBerry, ..) عن طريق مدير المدونة.

إضافة WPtap

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

إضافة MobilePress

إضافة بسيطة تمتاز بتحديد منصة الهاتف المستخدم ويتم إختيار قالب مخصص له، ويتيح إمكانية عمل قوالب ووردبريس خاصة للهاتف النقالة وهناك خيارين لإختيار القالب حسب المنصة المستخدم لا يوفر سوى إمكانية تحديد قالب خاص لهاتف iPhone وتحديد قالب آخر لبقية الهواتف وهذه من سلبياته ولكن يمكن التحكم بهذه الخواص عن طريق ملفات الإضافة إن كنت مطور.

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

خدمات على الشبكة

خدمات ومواقع ويب تساعدك على جعل موقعك متوافق مع الهواتف النقالة.

Mobify

خدمة مشهورة تتيح لمواقع الويب عمل نسخة للهاتف النقال بسهولة خاصةً المصممين لمن لديهم معرفة بتقنيات HTML و CSS كما ترشدك الخدمة في إختيار العناصر المهمة لمدونتك/موقعك عبر محرر مرئي وعملي يعمل كمحاكي للهواتف النقالة ، وتعمل بشكل جيد في تطبيقات عدة مثل الووردبريس ودروبال .. هناك مواقع ومدونات مشهورة تستخدم هذه الخدمة مثل Smashing Magazine, Web Designer Depot, A List Apart, Honathan Snook.

كما أن هناك إضافة ووردبريس خاصة بخدمة Mobify للعمل على توفير القالب المصمم في الخدمة لمستخدمي المدونة من الهاتف مع إمكانية توفير نطاق خاص لتصفح المدونة من الهاتف النقال.

cssiPhone

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

Mobilizer

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

Mofuse

خدمة إمكانية عمل نسخة للهاتف النقال مع مميزات وخصائص عديدة مرتبة مثل تحليل عدد الزوار المستخدمين لنسخة الهاتف النقال والتعامل مع خدمة Google Checkout وتصغير الصور تلقائياً عند بدأ تشغل النسخة، وتبدأ إنشاء النسخة إعتماداً على رابط الخلاصات،

مكتبات مساعدة

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

jQTouch

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

iWebKit

مكتبة تتيح إمكانية إنشاء مواقع وتطيبقات ويب بإستخدام التقنيات الإعتيادية مثل HTML,CSS3 تشبه تطبيقات iPhone بشكل كبير إضافةً إلى دعم حركات التنقل عن طريق خصائص CSS3 وعناصر واجهة الإستخدام الجاهزة ومميزات أخرى توفرها المكتبة للمطورين.

PhoneGap

مكتبة متخصصة توفر عدة جاهزة لإنشاء تطبيقات الهواتف النقالة مثل تطبيقات BlackBerry, Symbian, Palm, Google Android, iPad, iPhone/iTouch بحيث يتم إنشاء التطبيقات بواسطة تقنيات الويب HTML و CSS و لغة Javascript ويتم عمل تزامن مع عدة التطوير لكل هاتف تدعمه المكتبة مثل iPhone SDK على تطبيق xCode.

أعلم أن المكتبة ليس لها دخل في تصميم الويب للهاتف النقال ولكن لها علاقة على الأقل في كتابة الصفحة بواسطة HTML و CSS وJavascript ثم تحويلها إلى تطبيقات مستقلة على الهواتف النقالة.

Sencha

مكتبة تساعد المطورين على إنشاء تطبيقات ويب للهواتف النقالة الداعمة للمس بحيث تتيح لهم كتابة التطبيق كامل بواسطة HTML5 و CSS3 ليعمل كتطبيق داخلي Native Application بعكس تطبيقات الويب التي تلزم وجود إتصال الإنترنت، من المميزات التي تدعمها المكتبة مثل أحداث اللمس Touch Events الخاصة بالتأثيرات التي يقوم عليها المستخدم من خلال اللمس أو تحريك الجهاز مثل هذه المميزات تدعمها مكتبة Sencha في هواتف أنظمة iOS و Android مثل iPhone,HTC,Nexus One.

نفس الكلام أقوله حول هذه المكتبة هي ومكتبة PhoneGap فهي متخصصة في تطوير تطبيقات الويب للهاتف النقال وليس لتصميم الويب، ولكن التقنيات المستخدمة هي نفسها المستخدمة في تصميم الويب فمن ناحية الإهتمام بتقنيات الويب إضافةً إلى إمكانية دخول مطور الويب مثل هذه التجربة بدلاً من عمل تطبيق محلي Native Application في هاتف iPhone على سبيل المثال لأن ذلك يلزمه البرمجة بلغة objective-c وإستخدام جهاز الماك للتعامل مع تطبيق CodeX المخصص للبرمجة وبرمجة تطبيقات منتجات Apple على وجه الخصوص.

تطبيقات لإختبار توافق صفحات الويب في الهاتف النقال

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

iPhoney

تطبيق محاكي في نظام الماك يعمل على تمثيل صفحات الويب في شاشة هاتف iPhone عن طريق محرك Webkit الخاص بمتصفح Safari، لم أجربه شخصياً مع أن متصفح Safari الموجود في نظام الماك يعمل تماماً مثل الموجود في هاتف iPhone من ناحية دعم الخصائص وتمثيل الصفحات ولو بنسبة 99% بسبب بعض الأمور الصغيرة مثل عدم دعم قيمة fixed المستخدمة في خاصية position في تقنية CSS.

حسب ما قرأت فإن التطبيق لم يحدّث من فترة ولكن لا زال هناك من يستخدمه ومن يقول أنه يعمل بشكل جيد.

iBBDemo

تطبيق محاكي لهاتف iPhone وجهاز iPad يعمل على نظام الويندوز لتجربة صفحات الويب قبل إستخدامها في هاتف iPhone أو جهاز iPad يعتمد على محرك متصفح Safari وهو محرك Webkit إذ يفضل إستخدام متصفح Safari الموجود في نظام الماك لأنه سيظهر تماماً مثل متصفح Safari في هاتف iPhone.

له مميزات مثل توافق عرض وطول الشاشة مع هاتف iPhone كذلك الشكل الخارجي وإستخدام لوحة المفاتيح للتنقل بين أوضاع Portrait و Landscape وطريقة الدخول إلى الموقع تأكد عمل المحاكي بحيث إذا وضعت شرطاً أن يكون الصفحة تظهر فقط في متصفح iPhone Safari فسيتم عرض الصفحة في هذا التطبيق، من عيوبه أن غير مطابق من ناحية الخصائص 100% لخصائص iPhone Safari وجربته شخصياً.

W3C mobileOK Checker

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

من سلبياته عدم التأكيد على إمكانية إستخدام CSS3 فالتصميم الحالي يجب أن يدعم CSS 2.1 كحد أقصى لأن متصفحات مثل iPhone Safari تدعم CSS3 وخاصةً أني وفرت نسخة لمستخدمي iPhone من قالب المدونة وتدعم CSS3 وعرضتها كمثال في الدرس السابق ونسخة أخرى بسيطة لجميع الهواتف النقالة الأخرى، أثناء عمل إختبار لكلا النسختين كانت النتائج جيدة جداً بحيث أخذت النسخة البسيطة لجميع الهواتف نسبة 100% من ناحية توافق التصميم مع معايير تصميم الويب في الهواتف النقالة أما نسخة التصميم الخاصة بهاتف iPhone فأخذت 92%.

Opera Mini Simulator

وهو قسم في موقع متصفح Opera الشهير يوفر إمكانية تجربة نسخة الهاتف الجوال على محاكي لهاتف Opera Mini للإصدار الرابع القديم والإصدار الخامس الموجود في هاتف iPhone مع توفير تلميحات خاصة بإختصارات لوحة المفاتيح وطريقة التنقل عند عرض الصفحة.

Web Developer Toolbar

إضافة فايرفوكس المعروفة يمكنك الإستفادة منها في كثير من الامور إضافةً إلى عمل نسخ المواقع الخاصة بالهواتف فإنه يوفر إعادة تنسيق نسخة الهاتف النقال عن طريق خاصية media بإختيار قيمة handheld وستعرض الإضافة تنسيق الصفحة بناءاً على هذه القيمة (من القائمة  CSS -> Display CSS  By Media Type -> Handheld) .. إضافةً إلى إستخدام مميزات مثل منع ظهور الصور والخصائص الأخرى لمتصفحات الهواتف القديمة.

BlackBerry simulators

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

جربت تطبيق المحاكاة الخاص بهاتف BlackBerry 8350i وأعتبره رائع جداً من ناحية عرض الشاشة وتصفح تطبيقات النظام بشكل أنيق وشعرت وكأني أستعمله في الحقيقة ولكن لم يعمل معي المتصفح الموجود فيه بالأساس ربما تكون المشكلة لدي أو من المحاكي نفسه.

وثائق مساعدة

هذه وثائق لعدة أدوات أو تقنيات مخصصة للهاتف النقال تساعدك إذا أردت أن تستخدمها ورغبت بالرجوع إليها: