خدمة نظف CSS

8 خطوات للعمل بإنتاجية من المنزل

تأسيس شركة التكنولوجيا الناشئة الخاصة بك: الجزء الأول

درس تصميم واجهة رائعة عند تمرير الفأرة بإستخدام مكتبة jQuery و تقنية CSS3

الدقة في نحت الأقلام

تطبيقات Adobe Air

25 مثال وتجربة مدهشة لتقنية CSS3

واجهة إستخدام بسيطة وجميلة جداً لأحد تطبيقات الماك

ملخص مؤتمر Front-End Design

مؤتمر مخصص للمصممين والمطورين يقام سنوياً وتتوفر عروض المشاركين عبر المدونات والمشاركين في المؤتمر.

أخبار برمجية غير مهمة 1

• مشاهدة المثال
• تحميل

صورة عامة للقالب

مميزات القالب

بعض مميزات قالب myPage:

• إمكانية تعديل ألوان القالب.
• إختيار عدد الأعمدة في الصفحة الرئيسية. ( من عمود إلى ثلاثة أعمدة)
• صفحة خاصة للقالب في لوحة التحكم. عبر قائمة مستقلة في قائمة لوحة التحكم.
• عرض إخفاء بعض العناصر الرئيسية في الموقع. إخفاء القائمة الجانبية، إخفاء نبذه عن المدونة، إخفاء الاوسمة، إخفاء قائمة الأقسام.
• إمكانية عرض الصفحات الرئيسية والفرعية معاً. عبر قائمة روابط منزلقة تظهر عند تمرير الفأرة.
• وجود صفحة خاصة لعرض مواضيع ومعلومات عن الكتاب. مع إضافة حقلين لروابط تويتر وفيسبوك.
• إمكانية إختيار خلفية خاصة للصفحة ولرأس الصفحة. أحد مميزات الووردبريس 3.
• دعم الإعلانات على القائمة الجانبية. حيث يتم إضافتها بإستخدام صنف CSS (صنف .adv) خاص للإعلانات ويتم إضافة الإعلانات يدوياً عبر إضافة الصورة والرابط فقط.
  
• دعم ترقيم الصفحات المؤرشفة. عبر إضافة Pagebar ويتم عرض الترقيم العادي إذا لم تكن الإضافة مركبة.

صور القالب

بعض صور قالب myPage:

صفحة خاصة لقالب myPage

دعم القالب للإعلانات

إمكانية إختيار عمود أو عمودين أو ثلاثة أعمدة للقالب

دعم التعليقات المتشعبة

قائمة المشاركة في الشبكات الإجتماعية

عرض الصفحات الفرعية

إمكانية تغيير الألوان الرئيسية للمدونة

تعديل الألوان الرئيسية وإستخدام مميزات تعديل الخلفية والترويسة من خلال لوحة التحكم

صفحة خاصة لكتاب المدونة

إمكانية تغيير خلفية الصفحة ورأس الصفحة

ذيل صفحات المدونة

ملاحظات على القالب

هذه بعض الملاحظات على قالب myPage سواء على المميزات أو بعض الأشياء التي يجب التنبه لها قبل إستخدام القالب.

المربعات الجانبية (القوائم الجانبية)

عند إختيارك للقوائم الجانبية أو المربعات الجانبية من لوحة التحكم تأكد من تسمية هذه القوائم الظاهرة على الصورة وهي (قائمة النص، القوائم،محرك البحث) :

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

الإعلانات

بالنسبة للإعلانات في القائمة الجانبية فلا يمكن وضعها مباشرةً من لوحة التحكم ولكن مهيئة لوضع صور وروابط الإعلانات مباشرة في ملف Sidebar.php بدون إعادة تنسيقها عن طريق CSS. تستطيع إستخدام إضافات الووردبريس الخاصة بالإعلانات، ويمكن إلغاء وجود الإعلانات في القائمة الجانبية عن طريق صفحة قالب myPage في لوحة التحكم.

عنوان المدونة والوصف

بالنسبة لعنوان المدونة ووصفها في رأس الصفحة فوجد خيار “إستخدام شعار مصور بدلاً من عنوان المدونة” في صفحة إختيارات القالب بحيث يمكن إستخدام صورة مكتوب عليها عنوان المدونة ووصفها بصيغة PNG. وضعت ملف PSD لإعادة كتابة إسم المدونة ووصفها إضافةً إلى الخط المستخدم [خط Mahdi] ستجدها في الملف الملحق مع القالب. فيجب تعديلها بإستخدام برنامج الفوتوشوب، إذا أشرت إلى عدم الإستخدام فسيتم وضع عنوان المدونة بشكل نصي ويمكن تعديل لونه من إختيارات الألوان.

الصفحات الفرعية

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

• مشاهدة المثال
• تحميل

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

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

إتجاهات تصميم الويب للهاتف النقال لعام 2009

تعلم كيف تطور لهاتف iPhone

التصميم للهاتف النقال

تصميم الويب للهاتف النقال: نظرة عامة، أمثلة وتلميحات

تصميم الويب للهاتف النقال: تلميحات وأفضل الممارسات

أفضل 38 موقع متوافق مع هاتف iPhone

تصميم الويب للهاتف النقال

دليل تصميم الويب للهاتف النقال

Mobile Web من الويكيبيديا

أفضل 5 متصفحات ويب للهواتف النقالة

ضع محتواك في جيبك

كيفية إستعمال إستعلامات خاصية Media في تقنية CSS3 لإنشاء نسخة هاتف لموقعك

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

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

شفرات برمجية

شفرات في لغة 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، هناك حيل أو شفرات جاهزة تجدها على الروابط التالية:

• Fixed positioning on mobile safari (مثال على الحل + مقطع فيديو)
• Scrolling div on iPhone/iPod Touch (مثال على الحل + مقطع فيديو)

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

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

إضافة 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 وأعتبره رائع جداً من ناحية عرض الشاشة وتصفح تطبيقات النظام بشكل أنيق وشعرت وكأني أستعمله في الحقيقة ولكن لم يعمل معي المتصفح الموجود فيه بالأساس ربما تكون المشكلة لدي أو من المحاكي نفسه.

وثائق مساعدة

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

• Opera Developer:Mobile
• Nokia:Mobile Design Showcases
• Apple:Safari Reference Library

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

• مثال على الدرس
• تحميل المرفقات

لم أحدد مثال معين لتطبيق الدرس ولكن اخترت مدونتي ليكون المثال عليها فالنسخة الأصلية لتصميم ترونها عند زيارتكم للمدونة من أي متصفح على أنظمة تشغيل سطح المكتب، لذا سأقوم بشرح عمل نسخة خاصة لمستخدمي الهاتف النقال، إضافةً إلى تغييرات على بعض الأشياء للتصميم الذي سيظهر لمستخدمي الهواتف التي تفوق عرض 240 بيكسل مثل هاتف iPhone (حيث عرض الشاشة 320 بيكسل) وذلك للصور المستخدمة مثل شعار وروابط الموقع.

النسخة الأولية للمدونة

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

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

كما أني حددت الصفحات التي سيتم تصميمها لشكل المدونة وهي الصفحة الرئيسية وصفحات ومواضيع المدونة والتعليقات وصفحة الأرشيف.

نسخة الهاتف النقال

بعد أن حددنا العناصر الرئيسية للمدونة نبدأ بتصميم نسخة الهاتف، أول شيء سأعتمد على إضافة ووردبريس وهي إضافة mobilePress لأن الصفحات الأساسية هي ديناميكية بالأصل وأيضاً توفر الإضافة إمكانية تحديد قالب آخر لمستخدمي الهاتف النقال تماماً كالقوالب الموجودة في مسار wp-content/themes/.

قبل إنشاء القالب في الووردبريس سأقوم بعمل القالب على صفحات HTML قبل دمجها بشفرات لغة PHP واعتبرها أفضل طريقة لتصميم القوالب لسهولة التعديلات وتقليل أخطاء HTML، كذلك قبل تحديد المنصة أو التطبيق الذي ستضع به القالب (مثل الووردبريس).

ترتيب المحتوى حسب الأولوية

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

بناءاً على النمط الذي إخترته قمت بعمل نموذج للتصميم قبل تقطيعه مع تحديد الألوان وعناصر التصميم.

كتابة عناصر XHTML

نأتي للخطوة العملية من الدرس، سنطبق التصميم على لغة الترميز XHTML 1.0 Transitional علماً بوجود نسخة خاصة للهواتف مطابقة للغة نفسها وهي XHTML Mobile Profile وتحتوي على أغلب مميزات XHTML الأساسية لذا نستطيع الاعتماد عليها مباشرةً.

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

تمرير التصميم وإمكانية التكبير والتصغير

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

تكتب قيمة viewport في وسم meta كما ترى في السطر التالي:

<meta name="viewport" content="width=[floating-point]; height=[floating-point]; user-scalable=[boolean]; initial-scale=[floating-point]; maximum-scale=[floating-point]"/>

كما تلاحظ لدينا خمسة قيم أخرى في محتوى viewport وهي:

• width: إشارة إلى عرض الصفحة وتقاس بالبيكسل Pixel أو بطريقة النقطة العائمة، يمكن إختيار عرض قياس الشاشة بإستخدام قيمة device-width.
• height: إشارة إلى إرتفاع الصفحة وتقاس بالبيكسل Pixel أو بطريقة النقطة العائمة، يمكن إختيار عرض قياس الشاشة بإستخدام قيمة device-height.
• user-scalable: إشارة إلى إمكانية تحريك التصميم عند تكبيره على المستوى الأفقي والعمودي، يمكن الإشارة بقيمة منطقية برقم 1 أو 0 تعني True أو False.
• initial-scale: إشارة إلى قيمة التحريك في البداية (عند ظهور التصميم) يتم الإشارة إليها بقيمة رقمية تكتب بطريقة النقطة العائمة مثل 1.0، 1.5، وهكذا. (إذا إخترت قيمة initial-scale=1.0 فإن التصميم يكون ثابت لا يدعم ميزة التكبير)
• maximum-scale: إشارة إلى قيمة أعلى حد للتحريك (عند ظهور التصميم) يتم الإشارة إليها بقيمة رقمية تكتب بطريقة النقطة العائمة مثل 1.0، 1.5، وهكذا. (إذا إخترت قيمة maximum-scale=1.0 فإن التصميم يكون ثابت لا يدعم ميزة التصغير)

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

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

تحقيق أمثلية الشفرة المصدرية

لأسباب تتعلق بظهور المحتويات على محركات البحث وتوافق التصميم على المتصفحات القديمة الموجودة في الهواتف يتم استخدام قيمة HandheldFriendly في وسم meta كذلك للتعبير عن تحقيق الأمثلية في طريقة كتابة لغة الترميز XHTML. لست متأكداً تماماً من استخدام هذه القيمة لهذا الغرض ولم أستخدمه في تطبيق الدرس لأنه لا يغير في النتيجة مقارنة باستخدام قيمة viewport.

<meta name="HandheldFriendly" content="True" />

وضع أيقونة خاصة لمستخدمي هاتف iPhone

تفيد الأيقونة التي ستضعها للمستخدمين إمكانية حفظ رابط الموقع بجانب تطبيقات هاتف iPhone مع الإحتفاظ بالأيقونة الخاصة بالموقع بدون وضع أيقونة عشوائية من الهاتف نفسه وستظهر الأيقونة عند حفظ المستخدم للرابط ووضعها ضمن التطبيقات الموجودة في اللوحة الرئيسية، يمكن تحديد الأيقونة عن طريق وسم link في قيمة تسمى apple-touch-icon، تكتب في شفرة XHTML بهذه الطريقة:

<link rel="apple-touch-icon" href="icon.png"/>

إسم الأيقونة غير مهم ولكن يجب أن يكون في المسار الصحيح إضافةً إلى أن تكون قيمة خاصية rel هي apple-touch-icon إضافةً إلى حجم الأيقونة الخاص بتطبيقات iPhone وهو 57×57، ستشاهد مثال على أيقونة لمدونتي في أسفل الموضوع.

محتوى شفرة XHTML كاملة

الآن نبدأ بأول شفرة للمثال في رأس الصفحة ستتكون من الوسم Doctype ورأس الصفحة وجسم الصفحة:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <title>مدونة مبدع</title>
</head>

<body>

</body>
</html>

تم إستخدام XHTML Transitional مع إدراج وسم meta ذات قيمة viewport لتثبيت عرض الصفحة، الآن بداخل جسم الصفحة نضع العناصر التي إخترناها في بداية الدرس، نبدأ بعناصر الصفحة الرئيسية:

<!-- Wrap -->
<div id="wrap">

<!-- Header -->
<div id="header">
    <a href="#"><img src="images/logo-brand.png" alt="مدونة مبدع" width="283" height="60" /></a>
</div>
<!-- /Header -->

<!-- Middle -->
<div id="middle">

    <!-- Navigation -->
    <div id="navigation">
        ..
    </div>
    <!-- /Navigation -->

    <span class="promotion"><a href="http://twitter.com/mobde3net/"><img class="twitter" src="images/twitter-link.png" width="94px" height="18px" alt="" /></a></span>

    <h2 class="main-title">أقسام المدونة</h2>

    <!-- Categories -->
    <div class="menulist">
        ..
    </div>
    <!-- /Categories -->

    <h2 class="main-title">آخر المواضيع المطروحة</h2>

    <!-- Menulist -->
    <div class="menulist posts">
        ..
    </div>
    <!-- /Menulist -->

    <!-- Pagination -->
    <div class="pagebar">
        ..
    </div>
    <!-- /Pagination -->

</div>
<!-- /Middle -->

    <!-- Footer -->
    <div id="footer">
        <p class="search"><input class="text" name="search" type="text" /> <input class="submit" name="submit" type="submit" value="بحث" /></p>
        <p><a href="#">رؤية المدونة بالقالب الأصلي</a> | <a href="#">للمراسلة</a></p>
        <p>تصميم وتطوير أحمد الكثيري</p>
    </div>
    <!-- /Footer -->

</div>
<!-- Wrap -->

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

بالنسبة لصفحات الإرشيف والبحث فهي لا تختلف عن تركيبة الصفحة الرئيسية حيث جميعها تحتوي على قائمة المواضيع الخاصة بالقسم أو بكلمة البحث المعينة إضافة إلى قائمة الأقسام التي إخترت أن تكون ثابتة في جميع الصفحات ( أعلى الصفحة الرئيسية وأسفل بقية الصفحات).

لذا يمكن عملها بكل سهولة ولكن إذا أردت تطبيق ذلك في الووردبريس سيتم إستخدام أوسمة القالب Template Tags في إستخراج محتويات المدونة من مواضيع وكتابة الأوامر الشرطية وحلقات التكرار الموجودة في ملفات PHP، كما أني سأوفر قالب المدونة (الخاص بمستخدمي الهاتف النقال) مجاناً للتحميل للإستفادة منه في تحليله أو إستخدامه في المدونات مع أنه مخصص لمدونتي.

يتبقى لدينا شيء واحد وهو كتابة تركيب عناصر صفحة الموضوع في XHTML (الذي يمكن الوصول له عن طريق ملف single.php في الووردبريس)، تحتوي هذه الصفحة على محتوى الموضوع وقائمة التعليقات التابعة للموضوع وإمكانية التعليق، هذه شفرة سريعة لكيفية تنسيق محتوى الموضوع في تركيبة XHTML:

<!-- Content -->
<div id="content">
    <h2>عنوان الموضوع</h2>

    <p>المحتوى الخاص بالموضوع ..</p>

</div>
<!-- /Content -->

<h2 class="main-title">تعليقات الموضوع</h2>

<!-- Comments -->
<div id="comments-list">

    <div id="comment-ID" class="comment">
        <h3>إسم المعلق</h3>
        <small class="date">تاريخ التعليق</small>

        <div>
            <p>محتوى التعليق ..</p>
        </div>
    </div>

</div>
<!-- /Comments -->

<h2 class="main-title">أترك تعليق</h2>

<!-- Add-Comment -->
<div id="respond">

	<div id="add-comment" class="add-comment">
		<form action="#" method="post">

			<p><label for="author">الإسم </label> <input class="text-input" type="text" name="author" id="author" tabindex="1" /></p>

			<p><label for="email">البريد الإلكتروني (لن ينشر) </label><input class="text-input" type="text" name="email" id="email" tabindex="2" /></p>

			<p><label for="url">عنوان الموقع</label><input class="text-input" type="text" name="url" id="url" tabindex="3" /></p>

            <p><textarea class="text-textarea" name="comment" id="comment" cols="40" rows="10" tabindex="4"></textarea></p>

            <p><input name="submit" type="submit" id="submit" tabindex="5" value="أضف تعليقك" /></p>

		</form>
	</div>

</div>
<!-- /Add-Comment -->

تنسيق العناصر بتقنية CSS

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

بإستخدام إضافة mobilePress في الووردبريس جعلت تطبيق المثال الموجود في الدرس (تستطيع مشاهدته في نهاية الموضوع) لمستخدمي iPhone لسببين: الأول بسبب نسبة إستخدام هذا الهاتف في السوق مقارنة مع بقية الهواتف التي تستخدم في تصفح الإنترنت، السبب الثاني هو دعمه لتقنية CSS3 وبقية الخصائص عن طريق متصفح iPhone Safari الذي يستخدم محرك Webkit.

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

الآن نبدأ تنسيق التصميم الخاص بهذا الدرس من خلال شفرات تقنية CSS، نبدأ أولاً بتصفير عناصر HTML قبل إعادة تنسيقها:

html, body, h1, h2, h3, h4, h5, p, ul, li, img, small,a,input {
    margin: 0;
    padding: 0;
    background: none repeat scroll 0 0 transparent;
    list-style: none;
    border: 0;
    text-decoration: none;
}

تنسيق خلفية الصفحة عبر الوسم body:

body {
    direction: rtl;
    text-align: center;
    background: url('images/background.jpg') repeat 0 0;
}

توسيط التصميم وتحديد إتجاه الكتابة إلى اليمين:

#wrap {
    text-align: right;
}

#middle {
    margin: 0 3%;
}

تنسيق رأس الصفحة الذي سيكون فيه شعار المدونة:

#header {
    background: url('images/header-background.jpg') repeat #d0d0d0;
    border-bottom: 2px solid #909090;
    height: 60px;
}

#header a {
    display: inline-block;
}

تنسيق قائمة الصفحات (الصفحة الرئيسية، السيرة الذاتية، صفحة المراسلة):

#navigation {
    padding: 15px 0 0;
}

#navigation ul {
    background: url('images/navigation-background.png') repeat-x 0 0 #FFFFFF;
    border: 1px solid #999999;
    overflow: hidden;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

#navigation ul li {
    width: 33.3%;
    float: right;
}

#navigation ul li a {
    display: block;
    text-align: center;
    color: #a90014;
    padding: 5px 0;
    border-left: 1px solid #999999;
    font: Bold 0.95em "Times New Roman", Serif;
}

#navigation ul li:last-child a {
    border: 0 none;
}

تنسيق رابط ترويجي للمدونة مثل وضع رابط حسابي على تويتر لمتابعة آخر المواضيع:

span.promotion {
    margin: 15px 0;
    background: url("images/promotion-background.png") repeat scroll 0 0 #FFFFFF;
    border: 2px solid #fff;
    text-align: center;
    display: block;
    height: 30px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0 3px 2px #B0B1B1;
    -moz-box-shadow: 0 3px 2px #B0B1B1;
    -webkit-box-shadow: 0 3px 2px #B0B1B1;
}

span.promotion .twitter {
    padding: 7px;
}

تنسيق العناوين الرئيسية للقوائم عبر الوسم h2:

h2.main-title {
    background-color: #D9D9D9;
    border: 1px solid #959696;
    color: #363532;
    font: bold 0.95em "Times New Roman", Serif;
    padding: 5px 10px;
    text-shadow: 0px 1px 0 #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

تنسيق القوائم الرئيسية لروابط المدونة مثل (أقسام المدونة) و (آخر المواضيع المطروحة):

.menulist {
    padding: 10px 0 15px;
}

.menulist ul {
    background-color: #FFF;
    border: 1px solid #C0C0C0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.menulist ul li a small {
    color: #000;
    display: block;
    font-size: 0.85em;
    font-weight: normal;
    padding: 10px 0 0;
}

.menulist ul li a {
    color: #707070;
    display: block;
    font: bold 0.95em "Times New Roman", Serif;
    padding: 10px;
    border-bottom: 1px solid #C0C0C0;
}

.menulist ul li:last-child a {
    border: 0 none;
}

.menulist.posts ul li {
    background: url('images/goto.png') no-repeat 10px center;
}

.menulist.posts ul li a {
    padding: 25px 10px 25px 25px;
}

تنسيق محتوى مواضيع وصفحات المدونة:

#content {
    margin: 15px 0;
    background-color: #FFFFFF;
    border: 1px solid #999999;
    padding: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

}

#content p {
    color: #3F3F3F;
    font: bold 0.95em/1.6em "Times New Roman",Serif;
    margin: 20px 0;
    text-align: right;
}

#content a { color: #F00000; }

#content ul li {
    color: #3F3F3F;
    font: bold 0.95em/1.6em "Times New Roman",Serif;
    margin: 20px 10px;
    padding: 0 20px 0 0;
    text-align: right;
    background: url('images/arrow.gif') no-repeat right 11px;
}

#content h2 {
    color: #c60017;
    font: bold 1.25em "Times New Roman",Serif;
    margin: 5px 0 10px;
}

#content h3 {
    color: #000;
    font: bold 1.1em "Times New Roman",Serif;
    margin: 15px 0 5px;
}

#content h4 {
    display: inline-block;
    font: bold 1.05em/1.6em "Times New Roman",Serif;
    padding: 0 0 3px;
    margin: 15px 0 5px;
}

#content img {
    max-width: 250px;
    height: auto;
    width: auto;
}

تنسيق قائمة ترقيم المواضيع والصفحات Pagination:

.pagebar {
	padding: 13px 0 20px;
    display: block;
}

.pagebar .this-page, .pagebar a, .pagebar .break {
	margin: 0 0 5px 3px;
    padding: 5px 7px;
	font: bold 0.95em "Times New Roman",Serif;
	background: url("images/navigation-background.png") repeat-x scroll 0 0 #FFFFFF;
	color: #707070;
    border: 1px solid #C0C0C0;
    display: inline-block;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.pagebar .this-page {
	color: #000;
    border: 1px solid #5a5a5a;
    background-color: #f5f2e5;
}

تنسيق قائمة التعليقات:

#comments-list {
    background-color: #FFF;
    border: 1px solid #999999;
    margin: 15px 0;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

#comments-list .comment {
    border-bottom: 1px solid #999999;
    padding: 10px;
}

#comments-list .comment:last-child {
    border: none 0;
-moz-border-radius-bottomleft: 10px !important;
-moz-border-radius-bottomright: 10px !important;
-webkit-border-bottom-left-radius: 10px !important;
-webkit-border-bottom-right-radius: 10px !important;
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}

#comments-list .comment.alt {
    background-color: #f9f9f9;
}

#comments-list .comment h3 {
    font: bold 1.1em "Times New Roman",Serif;
    color: #707070;
}

#comments-list .comment p {
    color: #333333;
    font: bold 0.95em/1.6em "Times New Roman",Serif;
    margin: 10px 0;
}

#comments-list .comment em {
    color: #cc0000;
    display: block;
    font: 0.84em "Times New Roman",Serif;
    margin: 5px 0;
}

#comments-list .comment h3 a {
    color: #cc0000;
}

#comments-list .comment p a {
    color: #cc0000;
}

#comments-list small.date {
    display: block;
    font: italic 0.9em "Times New Roman",Serif;
    margin: 1px 0;
}

تنسيق نموذج إضافة التعليق:

#respond{
    background-color: #FFF;
    border: 1px solid #999999;
    margin: 15px 0;
    padding: 10px;
    overflow: hidden;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

}

#respond p {
    font: bold 0.95em/1.6em "Times New Roman",Serif;
}

#respond a {
    color: #CC0000;
}

#respond label {
    display: block;
    margin: 5px 0;
}

#respond input.text-input {
    margin: 0 0 10px;
    width: 99%;
    padding: 2px 3px;
    height: 23px;
    background: url("images/input-background.png") repeat-x scroll 0 -8px #FFFFFF;
    font: bold 0.95em "Times New Roman",Serif;
    border: 1px solid #828282;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

}

#respond textarea {
    margin: 0 0 10px;
    width: 99%;
    padding: 2px 3px;
    background: url("images/input-background.png") repeat-x scroll 0 -8px #FFFFFF;
    font: bold 0.95em "Times New Roman",Serif;
    border: 1px solid #828282;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#respond input#submit {
    margin: 0 0 10px;
    border: 0 none;
    background: url("images/add-submit.png") no-repeat scroll 0 0 transparent;
    height: 27px;
    text-indent: -9999px;
    width: 70px;
}

تنسيق ذيل الصفحة والذي سيتم إضافة رابط للرجوع إلى القالب الأصلي إضافةً إلى وجود محرك البحث الخاص بالمدونة:

#footer {
    padding: 10px 0;
    min-height: 90px;
    border-top: 2px solid #c9c9c9;
    background-color: #e4e4e4;
    box-shadow: 0 4px 10px #BFC2C5 inset;
    -webkit-box-shadow: 0 4px 10px #BFC2C5 inset;
    -moz-box-shadow: 0 4px 10px #BFC2C5 inset;
}

#footer p {
    text-align: center;
    padding: 5px 0 10px;
    font: Bold 0.95em "Times New Roman", Serif;
}

#footer p, #footer a {
    color: #3f3f3f;
}

#footer a { padding: 2px 2px 4px; border-bottom: 1px dashed #3f3f3f;}

#footer p.search {
    margin: 0 auto;
    width: 200px;
    overflow: hidden
}

#footer p.search input.text {
    background: url("images/input-background.png") repeat-x scroll 0 0 #fff;
    border: 1px solid #828282;
    font: Bold 0.95em "Times New Roman", Serif;
    height: 23px;
    padding: 1px 3px;
    width: 135px;
    float: right;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#footer p.search input.submit {
    background: url("images/search-submit.png") no-repeat scroll 0 0;
    border: medium none;
    font: Bold 0.95em "Times New Roman", Serif;
    height: 27px;
    width: 53px;
    text-indent: -9999px;
    float: left;
}

تغيير حجم الخطوط في متصفح iPhone Safari، سأتحدث عنها أيضاً في نقطة مستقلة:

html { -webkit-text-size-adjust: none; }

هذه أيضاً بعض النقاط المهمة في CSS لتنسيق الصفحات المستعرضة على متصفحات الهواتف النقالة.

إستخدام خاصية media في الوسم style

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

لعمل تنسيق خاص لمستخدمي هاتف iPhone او أي هاتف يمكن أن يصل عرض المتصفح فيه إلى 480px:

<style type="text/css" media="only screen  and (max-device-width: 480px)">
	..
</style>

لتحديد تنسيق خاص بالوضعية العمودية في هاتف iPhone أو وضعية Portrait:

<style type="text/css" media="all and (orientation:portrait)">
	..
</style>

لتحديد تنسيق خاص بالوضعية الأفقية في هاتف iPhone أو وضعية Landscape:

<style type="text/css" media="all and (orientation:landscape)">
	..
</style>

لتحديد تنسيق خاص بالهواتف المحمولة عموماً:

<style type="text/css" media="handheld">
	..
</style>

ملاحظة: ليس شرطاً تطبيق ذلك عن طريق وسم meta كما كتبت في السابق ولكن يمكن أيضاً عن طريق خاصية media في ملف CSS نفسه وهذه أحد خصائص CSS3، مثال على تحديد تنسيق خاص بأي هاتف يمكن أن يصل عرض المتصفح فيه إلى 480px:

@media only screen  and (max-device-width: 480px) {
	div { .. }
}

هناك الكثير من التفاصيل حول ميزة خاصية media في CSS3 يمكنك القراءة عنها.

منع تغيير حجم الخط عند تغيير وضعية الهاتف

هذا يتعلق بهاتف iPhone فهو يتكون من وضعيتين [أفقية وعمودية]، واحدة تسمى Portrait (عندما يكون الهاتف الوضع العمودي) والأخرى Landscape (عندما يكون الهاتف في الوضع الأفقي)، وتوضح هذه الصورة ما أقصد في هذه الفقرة:

لتثبيت أحجام الخطوط نستخدم خاصية في CSS3 وهي خاصية -webkit-text-size-adjust وتكتب بهذا الشكل:

html { -webkit-text-size-adjust: none; }

تصغير الصور بشكل تلقائي

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

#content img {
	max-width: 250px;
	height: auto;
	width: auto;
}

الصنف #content يشير إلى محتوى الموضوع أو الصفحة في مثال الدرس ومن خلاله سيتم إدراج الصور، كما أن خاصية max-width في CSS تشير إلى الحد الأقصى لعرض الصورة وحددت العرض الأقصى هو 250px وسيكون أصغر من شاشة هاتف iPhone الذي شاشة عرضه هي 320px، مع الإنتباه أن عرض شاشات الهواتف القديمة أو البسيطة التقليدية أقل من 240px.

النتيجة النهائية

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

• مثال على الدرس
• تحميل المرفقات

كما أن في هذا الدرس سوف تتعرف على الخاصية التي تقوم بعمل التدرجات في CSS وتكتب الخاصية بأكثر من طريقة بسبب دعم المتصفحات لها مثل تطبيق خاصية التدرجات في متصفح Firefox الذي يستخدم محرك Gecko وفي متصفح Safari الذي يستخدم محرك Webkit. علماً بأن خاصية التدرجات Gradient تكتب في كقيمة في خاصية background-image، ومدعومة في المتصفحات التي تستخدم محرك Webkit و Gecko.

• مثال على الدرس
• تحميل المرفقات

الخاصية في محرك Gecko/Mozilla

في المتصفحات التي تستخدم محرك Gecko مثل متصفح Firefox يتم إستخدام خاصية –moz-linear-gradient لعمل التدرج. قيم هذه الخاصية تشاهدها على هذه الشفرة:

-moz-linear-gradient([positions angle], colors);

• positions: لتحديد من مناطق بدء وإنتهاء التدرج ويتم تحديدها بالنسبة أو بإستخدام مسميات المواقع مثل Left, Center, Right , Top, Bottom.
• angle: لتحديد زاوية التدرج ويتم كتابتها بإستخدام درجة الزاوية Degree أي تكتب مثل 90deg (درجة °90) وعن طريقها تحدد إتجاه التدرج.
• colors: الألوان ويمكن إضافة أكثر من لونين، كما يمكن إستخدام مسميات الألوان مثل red,green,blue، كذلك يمكن تحديد نسبة إمتداد كل لون مثل red 80% و green 20% هنا يكون إستحواذ اللون الأحمر أكثر من اللون الأخضر وهكذا.

لو أردنا عمل تدرج يبدأ باللون الأصفر ثم البرتقالي ثم الأحمر وبدرجات مختلفة قليلاً كما تبين هذه الصورة:

نكتب خاصية –moz-linear-gradient ونحدد القيم في الشفرة التالية:

 background-image: -moz-linear-gradient(100% 100% 90deg, yellow, orange,  red 80%);
 

كما تلاحظ في الشفرة السابقة حددنا درجة الزاوية وهي 90 درجة وبذلك تكون أفقية إضافةً إلى الألوان الرئيسية كقيم أخيرة Yellow و Orange و Red مع تحديد نسبة إستحواذ بنسبة 80% مقارنةً بالألوان البقية.

الخاصية في محرك Webkit

اما في المتصفحات التي تستخدم محرك Webkit مثل متصفح Chrome و Safari فيتم إستخدام خاصية -webkit-gradient لعمل التدرج، قيم هذه الخاصية تشاهدها على الشفرة التالية:

-webkit-gradient(type, [positionX], [positionY], from(first color), to(last color) );

• type: شكل التدرج ويمكن أن يكون على شكل خطي linear أو على شكل مدور rotate.
• positionX: تحديد منطقة بدء وإنتهاء التدرج من المستوى الأفقي.
• positionY: تحديد منطقة بدء وإنتهاء التدرج من المستوى العمودي.
• from: تحديد اللون الأول في البداية.
• to: تحديد اللون الثاني في النهاية.

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

نكتب خاصية –webkit-gradient ونحدد القيم في الشفرة التالية:

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(red), color-stop(60%,orange), to(yellow));

كما ترى حددنا في القيمة الأولى شكل التدرج وهو إخترنا أن يكون تدرج خطي linear ثم قيم مناطق التدرج كما هي على المستوى الأفقي وعلى المستوى العمودي 100%، بعد ذلك حددنا اللون الأول وهو اللون الأحمر Red مع اللون الأخير yellow.

تلاحظ إضافةً اللون البرتقالي عن طريق قيمة color-stop، يمكن إضافةً أكثر من لون بإستخدام هذه القيمة بحيث تكون بين ألوان قيم from و to، مثال آخر لتوضيح كيفية إضافة عدة ألوان بإستخدام color-stop:

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(red), color-stop(60%,orange), color-stop(blue), color-stop(white), to(yellow));

قد تكون كتابة الخاصية في محرك Mozilla/Gecko أسهل لكن الخاصية –webkit-gradient توفر إختيار شكل التدرج فيمكن أن يكون دائري أو خطي.

• مثال على الدرس

مثال عملي: عمل قائمة روابط بإستخدام التدرجات

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

في البداية نضع شفرة HTML العادية مع القوائم الروابط معاً وهي سهلة جداً:

<ul id="buttons">
        <li><a href="#">سلسلة تطبيقات على CSS3</a></li>
        <li><a href="#">العودة إلى الدرس</a></li>
        <li><a href="#">العودة إلى المدونة</a></li>
</ul>

ثم شفرة CSS:

body {
        direction: rtl;
        text-align: center;
    }
#buttons {
    margin: 0 auto;
    text-align: right;
    width: 50%;
}
#buttons li {
    background-color: #E9E8DD;
    border: 1px solid #a5a5a5;
    display: block;
    height: 48px;
    list-style: none;
    margin: 10px 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

}
#buttons li a {
    display: block;
    color: #414038;
    font: bold 22px Simplified Arabic,Arial;
    padding: 4px 10px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #fff
}

الآن نضع خاصية -webkit-gradient و -moz-linear-gradient في الصنف #buttons li:

#buttons li {
	background-image: -moz-linear-gradient(100% 100% 90deg, #E9E8DD, #d1cfc6 95%, #d1cfc6 97%,#E9E8DD 98%);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E9E8DD), color-stop(2%,#E9E8DD), color-stop(2%,#d1cfc6), color-stop(80%,#E9E8DD), to(#E9E8DD));
}

تلاحظ في الشفرة السابقة إختلاف نسب الإسحتواذ في الخاصية بين المحركين (mozilla و webkit) وذلك لإختلاف طريقة البدأ وظهور الألوان في متصفحات كلا المحركين.

إضافةً إلى عكس التدرج عند تمرير الفأرة على القائمة، لتصبح خاصية -moz-linear-gradient و -webkit-gradient في الصنف #buttons li:hover بهذه الطريقة، علماً بأن الإنعكاس قمت بعمله بناءاً على ما شاهدته (عن طريق إضافة firebug):

#buttons li:hover {
    background-image: -moz-linear-gradient(100% 100% 90deg, #E9E8DD 3%, #d8d6ce 3%, #d8d6ce 5%, #E9E8DD);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E9E8DD), color-stop(30%,#E9E8DD), color-stop(95%,#d8d6ce),to(#E9E8DD));
}

• مثال على الدرس
• تحميل المرفقات

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

إعتبارات تصميم الويب للهاتف النقال

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

قياسات الشاشة المختلفة

تتعدد أحجام الشاشات في الهواتف المتحركة التي تتغير بين فترة وأخرى. توجد إحصائية عُرضت في عام 2008 تشير إلى نسبة استخدام الهواتف مقارنة بأحجامها. وحجم الشاشة يصبح أعرض من السابق ويفيد حجم الشاشة في تحديد ملامح الأشكال التي يريد المصمم عملها كنموذج لحجم الشاشة الحقيقي.

مصدر الصورة

يحصل الحجم 240X320 على استخدام واسع بين الهواتف. يستطيع المطور أن يستفيد من دعم الهواتف للأحجام الأعلى من هذا الحجم بحيث تدعم ميزة التصغير والتكبير ولكن لا تزال هناك حدود لعرض تصاميم مواقع بحجم أكبر من عرض 1024 pixel مثل متصفح Safari في هاتف iPhone.

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

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

إختلاف شكل التصميم في متصفحات الويب

التصميم الذي ستقوم بعمله لن يكون متوافق مع جميع متصفحات الويب الموجودة في الهواتف النقال 100% (أقصد حسب رغبتك تماماً)، لأن شكل التصميم يختلف حسب محرك متصفح الويب نفسه والهاتف الذي يحوي المتصفح. تفيد هذه المعلومة في أن يكون التصميم الخاص بالهاتف النقال مبسط لا يحوي على عدة خصائص CSS غير ضرورية مثل التقليل من إستخدام خصائص مثل خاصية margin، padding، float.

إتباع المعايير القياسية

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

يفيد ذلك في التعامل مع المتصفحات القديمة، إضافةً إلى عرض الموقع بدون إستخدام تنسيقات CSS مثل عرض عناوين Headings وإستخدام الاسماء البديلة في الصور عن طريق خاصية alt الموجودة في وسم img الخاص بالصور.

ترتيب المحتويات حسب الأولية

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

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

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

إختيار العنوان الخاص لمستخدمي الهاتف

يفضل دائماً وجود اختصار لعنوان الموقع الخاص بمستخدمي الهاتف النقال يساعد على الوصول إلى نسخة الهاتف الخاصة بالموقع بأسرع وقت. أبسط الأمثلة استخدام حرف m كنطاق فرعي مثل m.example.com، كما أن بعض المواقع تفضل إتاحة الاختيار للمستخدم وهذا أفضل وعادةً يتم عرض نسخة الموقع بالكامل بجانب رابط خاص لمن يريد تصفح النسخة الخاصة لمستخدمي الهاتف النقال.

يمكن كذلك إستخدام نطاق .mobi مثل example.mobi فهو مخصص لنسخ الهواتف النقالة ولكن أراه مضيعة للوقت فيمكن الإكتفاء بالنطاق الحالي أو وضع نطاق فرعي خاص بنسخة الهاتف.

إختبار الموقع دائماً

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

متصفحات الويب في الهواتف النقالة

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

كما أن هذه المتصفحات هي من تدعم تقنيات الويب في الهاتف النقال مثل WML, HTML, XHTML Mobile Profile, CHTML التي أشرنا أليها في السابق. سأعرض هذا الجدول بشكل بسيط لأغلب متصفحات الويب المستخدمة في دخول المواقع من الهواتف النقالة مع وجود تفاصيل صغيرة مثل أنظمة التشغيل المستخدمة ومحركات التصفح وغيره.

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

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

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

إحصائيات عامة

الكثير من المواقع المشهورة لديها نسخ لمواقعهم خاصة لزوارها عن طريق الهاتف النقال (المحمول) ويعود ذلك لازدياد عدد المستخدمين المتصلين بشبكة الإنترنت من خلال هواتفهم حيث بلغت كمية البيانات المستهلكة عن طريق متصفح Opera mini في عام 2007 مقدار 53.9 TB، هذا أحد الأمثلة على حجم التصفح عن طريق الهاتف النقال.

عادةً يعتبر هذا الموضوع لم يأتي وقته خاصةً عندما نتحدث عن إحصائية استخدام الإنترنت بشكل عام في العالم العربي فما بالك بمستخدمي الإنترنت من الهاتف النقال؟ ليست لدي إحصائية دقيقة من مصدر معين عن نسبة استخدام الإنترنت عن طريق الهاتف النقال ولكن أعتقد أنه سيكون هناك نتائج وزيادة لهذه النسبة تدريجياً والذي سيساعد في هذا الأمر هو تحسين تقديم خدمات الإنترنت وباقات الهواتف الذكية التنافسية إضافةً إلى وجود المنافس الحقيقي في سوق الاتصالات يستفيد المستخدم من وجوده!

مصدر الصورة

التقنيات المستخدمة

كانت محتويات الويب تُستعرض في متصفحات خاصة ومتوفرة في الهاتف النقال تتم كتابتها بلغات الترميز (Markup Languages) من منظمة W3C المعروفة مثل WML و CHTML و XHTML Mobile profile وتركيب لغات الترميز مستخدمة من XML بالأساس. مع وجود متصفحات ويب أفضل في الهواتف الذكية وخاصة مع نسبة استخدامها المتزايد أصبحت تقبل لغة الترميز المعروفة لإنشاء صفحات الويب HTML وكذلك تحظى بدعم CSS و Javascript، مع أن الأفضل إستخدام النسخة المخصصة للهواتف وهي XHTML Mobile profile وذلك للتأكد من دعم بقية المتصفحات الأخرى الموجود في الهواتف.

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

تركيزي في هذه السلسلة سيكون إظهار محتويات الويب على متصفحات البسيطة والمتطورة الموجودة في الهواتف النقالة مثل iPhone، Android، BlackBerry.

أمثلة على بعض المواقع

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

Google

Amazon

Youtube

Twitter

Facebook

Wikipedia

Yahoo

BBC

Flickr

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

موقع SetCode

Desigg.com: مصادر إلهام يومية

+30 درس ومثال وتقنية عن HTML5 مفيدة جداً لمطوري الويب

10 كتب مجانية للمصممي الويب

7 أفكار Jquery جاهزة قد تحتاجها لموقعك

نماذج رائعة لتصميم واجهة إستخدام هاتف HTC

30 تلميحات وحيل إحترافية لمكتبة JQuery

7 مقاطع فيديو وعروض يجب رؤيتها لمطوري تطبيقات الويب

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

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

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

مواضيع سلسلة تصميم الويب للهاتف النقال

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

شاهد النظام الشمسي باستخدام HTML و CSS3

خلفيات شهر يوليو من موقع Smashing Magazine

7 تقنيات CSS3 رهيبة تستطيع إستخدامها الآن

الانتقال من CVS إلى SVN

19 حيله مساعده للوردبريس من خلال ملف Functions

تنسيق وسوم Tags ب CSS

4 تقنيات يمكنك البدء باستعمالها ب CSS3

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

تحديثات جديدة في تصميم المدونة

قمت بحديث تصميم المدونة بالأخص تصميم الصفحة الرئيسية، كما لاحظت في البداية اختلاف شكل التصميم في متصفحات الويب المعروفة بين أنظمة التشغيل Mac و Windows (أقصد إختلاف شكل التصميم بين إصدار متصفح فايرفوكس في Mac و Windows على سبيل المثال)، ويتضمن ذلك شكل المدونة في متصفح Safari الموجود في هاتف iPhone، قمت بحل هذه المشكلة والتي سأكتب متعلقة فيها في المدونة.

حالياً أقوم بتحديث نسخة خاصة لمتصفحي المدونة من الهاتف المتحرك (من iPhone بالأخص) وستكون خفيفة بإستخدام أحد إضافات الووردبريس.

المواضيع الجديدة في المدونة

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

الإعلان في المدونة

الإعلان في هذه المدونة لا زالت فكرة أخطط لها وأبحث عن كيفية وضعها قبل تطبيقها فأنا لا أحب الإعلانات بكثرة (وكذلك عدد من القراء) ولكني وضعت تصور لأماكن وضع الإعلانات في المدونة ومدة هذه التجربة.

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

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

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

مصدر الصورة

عملية تصميم واجهة الإستخدام

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

• جمع المتطلبات: أي تجميع قائمة من المهام المطلوبة من قبل التطبيق لتحقيق أهداف المشروع والإحتياجات المحتملة للمستخدمين عن طريق واجهة الإستخدام.
• هيكلة المعلومات: مفهوم واسع ولكن عندما نتحدث عن تصميم واجهة إستخدام موقع/تطبيق ويب فهو يركز على طريقة التعبير عن المحتوى في الموقع والذي يتكون من قائمة التصفح/الملاحة (الرئيسية/فرعية)، القوائم الجانبية/ محتوى الرئيسي للصفحة، ذيل الصفحة، .. وعناصر أخرى يمكن إضافتها على هذا النمط بحيث يتم تقسيم المحتوى الكامل الذي يقدمه الموقع أو التطبيق عبر هيكلة هذه المعلومات (المحتويات) ضمن واجهة الإستخدام. غالباً تكون أنماط الهيكلة بترتيب المعلومات من الأهم إلى الأقل أهمية.
• تحليل المستخدمين: يتم تحليل المستخدمين المتحملين لواجهة التطبيق عن طريق مناقشة الأشخاص المتعاملين مع المستخدمين أو التعامل مع المستخدمين أنفسهم بشكل مباشر. عدة أسئلة مهمة في هذه المرحلة مثل: كيف يريد المستخدم الواجهة أن تعمل؟ ما الأشياء التي يعرفها المستخدم من تنفيذ المهام، طريقة التصفح، وغيره قبل أن يتعامل مع هذه الواجهة؟ كيف يرى المستخدم الواجهة وما نوع الشعور الذي يمر بالمستخدم عند تعامله مع واجهة الإستخدام؟ يمكن الإستفادة هنا من تجربة المستخدم User Experience.
• التأطير الشبكي وعمل النماذج الأولية: الأطر أو الصور الشبكية وتسمى Wirefames باللغة الإنجليزية، عادة نراها في عمل نماذج ثلاثية الأبعاد وهي تركز على رسم واجهة الإستخدام الأولية بعدة أشكال لمعرفة الأنسب بينهم وتبني واجهة الإستخدام الحقيقية بعد التخطيط لها عن طريق التأطير الشبكي.
• إختبار قابلية الإستخدام: تتم في هذه العملية إختبار واجهة الإستخدام المقترحة بعد التأطير الشبكي عن طريق المستخدم الحقيقي أو المباشر لهذه الواجهة. عادةً هذه العملية تتكون من مهام يقوم بعملها لإجراء هذا الإختبار وأيضاً عدة أسئلة إلى المستخدم عن تجربته للواجهة وعن المراحل التي مر عليها عند إستخدامه لواجهة الإستخدام الحقيقية والمشاكل والصعوبات التي واجهته أثناء تصفحه للموقع.
• تنفيذ واجهة الإستخدام الرسومية(الحقيقية): بعد هذه المراحل يتم وبالأخص مرحلة جمع المتطلبات والتأطير الشبكي يأتي تنفيذ واجهة الإستخدام التي سوف تستخدم للموقع أو التطبيق، كما أن هذه المرحلة تحتاج إلى تعاون بين مصمم الجرافك ومصمم واجهة الإستخدام، عادة يمكن أن يكون شخص واحد منفذ لواجهة الإستخدام له خبرة في هاذين المجالين (تصميم الجرافك وواجهة الإستخدام).

مباديء تصميم واجهة الإستخدام

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

• مبدأ الهيكلة: التصميم يجب أن ينظم واجهة الإستخدام بشكل هادف، بطرق مفيدة يجب أن يستند إلى الوضوح. من الأكثر أهمية إلى الأقل أهمية.
• مبدأ البساطة: التصميم يجب أن يكون بسيط، لا يعني أن يكون عادي جداً ولكن أن تكون المهام فيه سهلة والتواصل ما بين المستخدم والموقع يكون بشكل واضح وبسيط من ناحية لغة المستخدم التي يتعامل فيها مع الموقع. وتزويده بالطرق المختصرة والتي لها علاقة بالمهام والإجراءات الطويلة بحيث يصل إليها بشكل سريع. (مثال إختصارات لوحة التحكم Shortcuts)
• مبدأ الوضوح: التصميم يجب أن يجعل جميع الإختيارات والمواد المطلوبة للمهمة المعطاه للمستخدم واضحة بدون صرف إنتباه المستخدم بالمعلومات الزائدة أو الغريبة. كذلك وضوح المهام التي يعمل بها المستخدم عن المهام التي لا يعمل بها حالياً. التصاميم الجيدة لا تغرق المستخدم بالبدائل او بالتشويش عليه عن طريق تزويده بالمزيد من المعلومات الغير مطلوبة منه.
• مبدأ التجاوب: التصميم يجب أن يبقي المستخدمين مطلعين على الأحداث الجارية للمهام التي يقومون بها في الموقع والتفسيرات التي تنتج عن هذه الأحداث، كرسائل الأخطاء التي لها علاقة بالمهمة او جزئية المهمة التي لم تمرر بشكل سليم، يجب أن تكون اللغة المستخدمة واضحة وبسيطة ومألوفة لدى المستخدم.
• مبدأ التحمل: التصميم يجب أن يكون مرن ومتساهل بعدة زوايا، بإخفاض نسبة الأخطاء، متقبل للاستعمال السيئ/الخاطئ من قبل المستخدم. كأخطاء أو التوقفات التي يمكن أن تظهر مقابل إعادة مهمة مطلوبة للمستخدم أو عدم إكمالها بحيث يمنع التطبيق إظهار أخطاء أو عمليات غير مفهومة إلى المستخدم في مقابل إظهار رسائل الخطأ والتنبيهات المتعلقة بالأشياء التي يقوم بها المستخدم في الموقع أو التطبيق. (تحدث كثيراً في النماذج البريدية، توافق التطبيق/الموقع مع متصفح الويب، .. وغيره)

أدوات تساعدك على تصميم واجهة الإستخدام

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

الرسم على الورق

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

الرسم الأولي لواجهة إستخدام موقع تويتر

أحد الأوراق الخاصة بتخطيط واجهة إستخدام موقع vimeo

واجهة إستخدام من عمل موقع UI Stencils

رسم متقن لواجهة إستخدام أحد مشاريع المواقع

أحد المخططات التي تم تطبيقها على موقع ncmls.org

مخطط آخر يشمل طريقة عمل عناصر واجهة إستخدام أحد نماذج المواقع

مقالات حول الرسم بالورق

بعض المقالات التي تتحدث عن رسم واجهة الإستخدام بالورق: تلميحات تخطيط واجهة الإستخدام (يتكون من 5 أجزاء)

الورقة النموذجية من موقع A List Apart

18 مثال رائع لواجهات إستخدام مخططة

أدوات تصميم وتخطيط واجهة الإستخدام

تطبيقات سطح المكتب

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

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

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

• Omnigraffle ، موفر في نظام الماك فقط، ومناسب لعمل النماذج والتخطيطات العامة وخريطة المحتويات، ولكن ليس مجاناً ويمكن إستخدامه كتجربة.

• Visio ، متوفر لنظام الويندوز فقط، وكان من قبل مجرد إضافة لـ MS Word ولكنه غير مجاني.
• Axure ، مزود بنماذج موجودة مسبقاً ويعتبر سريع ومرن لأعمال الواجهات، ولكنه متوفر في نظام الويندوز وغير مجاني ويمكن تجربته قبل شراءه.

إضافة الجمالية على واجهة الإستخدام

الجمالية أو ما يعرف كمصطلح باللغة الإنحليزية Aesthetics، عندما نتحدث عن التصميم وتصميم واجهة الإستخدام على سبيل المثال، تهتم الجمالية بشكل التصميم الجذاب والممتع (عند تنفيذ المهام عبر واجهة الإستخدام). بإختصار تهتم أكثر بالتفاصيل الصغيرة للتصميم من إختيار الألوان وإضافة الخامات، الصور، الظلال، التدرجات، الإضاءة وغيرها على عناصر واجهة الإستخدام. الفائدة الكبيرة من إضافة الجمالية إلى تصميم واجهة الإستخدام بعد الإنتهاء منها هي إعطاء التصميم شيء مميز عن غيره من واجهات الإستخدام يمكن أن نقول إعطاء التصميم طعم خاص عند إستخدامه! (شعورك عند إستخدام جهاز iPhone أو iPad مثلاً – بالنسبة لي -).

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

مصادر حول واجهة إستخدام مواقع الويب

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

35 مصدر تأطير شبكي ممتاز

50 عدة تأطير شبكي لواجهة إستخدام وتصميم موقع الويب مجانية

10 تطبيقات تأطير شبكي مجانية بالكامل

10 أدوات ممتازة لإنشاء تأطير شبكي

مستقبل التأطير الشبكي

مصادر الموضوع:

• مبادئ تصميم واجهة الإستخدام، من الويكيبيديا.
• عملية تصميم واجهة الإستخدام، من الويكيبيديا.

أتحدث في هذا الموضوع بشكل سريع عن آخر نسخة محدثة لإضافة ePermissions والتي تحتوي على مميزات جديدة من ناحية الإمكانيات Capabilities التي إستخدمتها كمميزات لأي تصريح يتم إضافته وتفعيله على المحرر في المدونة.

مميزات النسخة 1.2

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

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

صورة لصفحة إضافة التصريحات في الإضافة:

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

طريقة الإستخدام

بالنسبة للتغيرات التي حصلت على هذه النسخة لا تختلف كثيراً عن النسخة السابقة، بعد إستخدام إمكانيات الووردبريس الرئيسية التي تستطيع مراجعتها وفهم وظائفها يتم تطبيقها فوراً بإختيار المميزات من التصريح الموجود في إضافة ePermissions وتطبيقها ضمن الصنف WP_User الموجود في ملف capabilities.php في الووردبريس.

مثال على إختيار المميزات للتصريح ومشاهدة تأثير المميزات على المحرر:

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

توافق الإضافة

نسخة الإضافة (ePermissions 1.2) متوافقة مع مدونات الووردبريس ذات النسخة 2.7 على الأقل وما فوق. كذلك متوافقة مع نسخة الثالثة من الووردبريس بعد تجربتها والتي ستكون الإصدارة الرسمية في المستقبل.

تحميل إضافة ePermissions 1.2

يمكنك تحميل إضافة ePermissions 1.2 من موقع الووردبريس مباشرةً. إذا كانت لديك أي ملاحظات وإقتراحات يمكنك إضافتها عبر التعليق على هذه التدوينة.

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

60 صورة لمكاتب قوقل

40 مسجد من الأكثر جمالاً في العالم

60 مصدر إلهام لتصاميم مواقع خاصة بالآيفون

الفرق بين قابلية الاستخدام وتجربة المستخدم

5 أدوات لتكامل لقطات الفيديو بإستخدام HTML5 في موقعك

حركة رهيبة بإستخدام CSS على الصور