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

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

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

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

تتعدد أحجام الشاشات في الهواتف المتحركة التي تتغير بين فترة وأخرى. توجد إحصائية عُرضت في عام 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 على الصور

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

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

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

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

وربما لو كنت مسجلاً يجب أن تشارك في الموضوع الذي تبحث عنه لرؤية بقية المحتويات (أستغرب من المنتديات التي تجبر المشارك على الرد لرؤية الموضوع، والذي أعرفه أنه سيشارك بناءاً على ما قرأه ويكتب تعليقه على الموضوع ولكن لا بأس في ذلك فـ “مشكووور” تفي بالغرض!) كذلك من الشروط الغريبة وجود عدد مواضيع أو ردود معينة لمشاهدة كامل الموضوع!

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

وسأعرض أفضل طريقتين من الطرق التي أستخدمها في تفادي مثل هذه النتائج.

إستخدام البحث المتقدم

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

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

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

vBulletin phpbb showthread vb forum forums showtopic viewtopic .html montada

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

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

إستخدام موقع يوزرات

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

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

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

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

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

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

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

موقع Long Tweets

كتاب مقولات في النجاح على هواتف آي فون

درس تصميم هاتف سامسونج ستار WiFi

إفتتاح موقع الخلاصات العربية

فيديو عن Web 3.0

صمم خلفيات ضوئية

لم يكملوا دراستهم ومن بين الأكثر ثراءً ونجاحاً

نصائح لتحسين المواقع للمشرفين العرب

إختيار خط خاص بالصفحة المنسقة موجودة من قبل ولكن مفعلة أكثر في CSS3. هذه الميزة لحل إشكاليات تناسب الخط من طرف المصمم وصاحب الموقع والأهم تناسب مستخدم الموقع. يمكن إختيار خطوط أخرى مناسبة للمصمم ومستخدم الموقع التي لاتوجد في جهاز المستخدم والذي تعود على الخطوط المعروفة مثل خط Arial و Tahoma وsans-serif وغيرها موجودة في جهازه أساساً. هذه الميزة مدعومة في محرك Webkit ومحرك Mozilla/Gecho ومحرك Presto.

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

خاصية font-face

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

@font-face {
	..
}

لو إفترضنا أننا نريد إستخدام خط Delicious في عنوان للفقرة، نحدد الخط وعنوانه الخارجي في خاصية font-face بهذه الطريقة:

@font-face {
	font-family: Delicious;
	src: url(Delicious-Bold.otf);
}

كما أنه يفضل أن يكون عنوان الخارجي للخط مرافق لملف CSS أو يمكنك كتابة عنوانه المحدد، في المثال السابق ستجد أن عنوان الخط يشير إلى Delicious-Bold.otf وهو موجود بجانب ملف CSS.

مثال عملي: إختيار خط لعنوان فقرة

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

<h2>تطبيقات على CSS3</h2>

<p>نجد الكثير من المواقع تطبق مميزات CSS3 في الوقت الحالي على تصاميمها حتى المواقع المشهورة والكبيرة تجد تصاميمها تستخدم خصائص CSS3. بالرغم من الدعم المحدود من بعض متصفحات الويب لها (مدعومة لمتصفح Firefox 3+ و Safari 3 و Google Crome في الوقت الحالي) إلا أن أولوية إستخدامها موجودة على الأقل كلمسات أخيره على التصميم.</p>
<p>عند الإنتهاء  من جميع دروس هذه السلسلة سأضع قائمة الدروس من خلال هذه   التدوينة، لتكون مرجع لها بشكل دائم وهو سبب كتابتي لهذا الموضوع. لن أضع   أي عنوان حالياً ولكن سأبدأ بكتابة دروس CSS3 خلال هذه الأيام وتحديث هذه   التدوينة مع كل درس جديد.</p>

بعد ذلك نستخدام خاصية font-face في تحديد خط Hacen Typographer Bold بإسمه وعنوانه:

@font-face {
	font-family: Hacen Typographer Bold;
	src: url(Hacen Typographer Bold.ttf);
	font-weight: bold;
}

يجب يكون خط Mahdi موجود بجانب ملف CSS حسب ما يشير عنوان الخط في الشفرة السابقة، إضافةً إلى تحديد الخط في عنوان الفقرة (فقرة تطبيقات على CSS3) من خلال شفرة CSS التالية:

h2 {
	font-family: Hacen Typographer Bold;
}

هذه الصورة تمثل النتيجة كاملة عبر متصفح Safari:

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

عند إختيارك للخطوط المناسبة لك فإن نتيجة ظهور هذه الخطوط ستكون في كاملة في متصفح Safari، الإصدارات الأخيرة من متصفح Firefox و Opera لا يدعمان إختيار الخطوط بشكل صحيح وخاصة عند إختيار خط عربي ولكن النتيجة تظهر بشكل ممتاز في متصفح Safari وهذا بفضل ميزة تنعيم الخط Font Smoothing، هذه صورة للمثال السابق في عدة متصفحات بإستخدام خاصية font-face:

لذا أنصح بإستخدام بدائل لخاصية font-face إذا لم يدعم المتصفح الخاصية بشكل صحيح، يمكنك رؤية بعض تفاصيل دعم متصفح الفايرفوكس لخاصية Font-Face مع المقارنة ببقية المتصفحات على سبيل المثال.

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

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

إستخدام الووردبريس كنظام إدارة محتوى

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

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

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

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

مقالات حول إستخدام الووردبريس كنظام إدارة محتوى

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

الووردبريس كنظام إدارة محتوى

قسم “ووردبريس كنظام إدارة محتوى” في عرب ووردبريس

20 إضافة ووردبريس لنظام إدارة محتوى

15 إضافة ووردبريس لبدأ إنشاء مواقع المجتمعات Community

40 إضافة ووردبريس إستثنائية لتمكين مميزات نظام إدارة المحتوى

5 إضافات لإستخدام الووردبريس كنظام إدارة محتوى

10 إضافات تسوق/تجارة إلكترونية قوية للووردبريس

20 إضافة وقالب مفيدة لمنطقة الإدارة في الووردبريس

20 وصفة/شفرة ووردبريس

101 تقنية لإستخدام الووردبريس كنظام إدارة محتوى

إنشاء قائمة بريدية بإستخدام الووردبريس وخدمة FeedBurner

كيفية إنشاء معرض صور في الووردبريس

إنشاء إضافات الووردبريس

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

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

مقالات حول إنشاء إضافات الووردبريس

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

إدراج إضافتك في قسم إضافات الووردبريس (Wordpress.org)

إضافتك الأولى في الووردبريس

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

أعظم دليل لإنشاء إضافة ووردبريس

درس بسيط: كيفية إنشاء إضافة ووردبريس

إستخدام الواجهة البرمجية (API) الخاصة بتويتر وخدمة TinyURL لإنشاء إضافة ووردبريس

20 درس لتطوير إضافة الووردبريس

متابعة الكثير من تفاصيل الووردبريس

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

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

هذه بعض المدونات والمواقع المتخصصة والمهتمة بالووردبريس.

قناة الووردبريس

WP Shout

ووردبريس باون

Digging Into Wordpress

WP Engineer

Wordpress Tavern

WpRecipes

WpConstructs

Theme Thesis

ووردبريس بالعربي

Blog Perfume

Wordpress101

WPLover

WP Switch

WP Designer

كتب متخصصة في الووردبريس

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

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

مقالات أخرى عن الووردبريس

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

11 إستخدام غير تقليدي للوردبريس

أدوات مطوري الووردبريس

100 دروس ووردبريس بالفيديو من الأساس حتى المتقدم

100 مصدر لتصبح خبير ووردبريس

10 حيل رهيبة في إستخدام ملف .Htaccess للووردبريس

التحويل من نظام جوملا إلى الووردبريس

14 ورقة تغشيش ضرورية لتصميم وتطوير الووردبريس

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

أجزاء الموضوع:

• مصادر لتطوير أدوات الووردبريس (الجزء الأول)
• مصادر لتطوير أدوات الووردبريس (الجزء الثاني)

30 شعار احترافي

بعض الطرق لإنشاء محتوى مفيد لمدونتك

كيف تحصل على مسار مهني ناجح في مجال تطوير الويب

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

حلول تقنية CSS3 لمتصفح الإنترنت إكسبلورر

أقدم 100  إسم نطاق مسجل من نوع .com

aqarmap.com: من مشكلة إلى فكرة إلى مشروع

ريادة الأعمال: قصة أمس وحلم اليوم

33 مكان لشراء قوالب ووردبريس قيمة وذو جودة عالية

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

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

وثائق الووردبريس الرسمية

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

أبرز الصفحات الموجودة في الوثائق هي:

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

التحكم في أجزاء بنية الووردبريس

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

يتم ذلك عبر ما يسمى بـ Hooks لتمرير الدوال التي تحتوي على عمل معين على جزئية من العمليات التي يجريها الووردربيس في تطبيقه أو في وقت محدد. تنقسم هذه الجزئية على:

• الإجراءات Actions: هي العمليات أو التغييرات التي يجريها الووردبريس خلال عمله على نقطة معينة في عمل التطبيق.
• مرشحات Filters: هي عمليات يجريها الووردبريس على نصوص لأنواع معينة من محتويات التطبيق قبل إظهارها.

تجد عدة دوال خاصة بهذين الميزتين، من ناحية الإجراءات action (مثل add_action, remove_action, do_action, has_action ) ومن ناحية المرشحات filters (مثل add_filter, remove_filter, has_filter, apply_filters) جميع وظائف وشروحات هذه الدوال غيرها من الدوال الأخرى ستجدها في صفحة الواجهة البرمجية للإضافات.

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

function replace_links($text_replaced){

 // إسماء الشركات مع روابطها
 $words = array('شركة جوجل','شركة ياهو','شركة أبل','ويكيبيديا');
 $links = array('http://google.com','http://yahoo.com','http://wikipedia.org','http://wikipedia.org');

 // إعداد الروابط التي ستظهر في المواضيع
 $link_structure = array();
 for($x=0;$x<count($words);$x++) {
 $link_structure[$x] = '<a href="'.$links[$x].'" alt="'.$words[$x].'">'.$words[$x].'</a>';
 }

 // عملية إسبدال الكلمات بالروابط الخاصة بها
 $text_replaced = str_ireplace($words, $link_structure,$text_replaced);

 // الإشارة إلى النص الأصلي/الموضوع
 return $text_replaced;

}

// إضافة الدالة لتقوم بترشيح محتوى التدوينات
add_filter('the_content','replace_links');

عند تطبيق الدالة السابقة على محتوى التدوينة، سيتم إستبدال الكلمات التي حددناها بروابط مثل “شركة جوجل” إذا وجدت في المحتوى نستبدلها إلى رابط موقع جوجل ليكتب بهذا الشكل في شفرة HTML:

<a href="http://www.google.com/" alt="شركة جوجل<"شركة جوجل</a>

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

مقالات حول التحكم والتطوير في أجزاء واجهة الووردبريس

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

قائمة الإجراءات والمرشحات

10 حيل ووردبريس مفيدة (في إستخدام Hooks)

تصميم قوالب الووردبريس

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

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

إستخدام أوسمة القوالب Template Tags بأكثر من طريقة

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

قائمة الدوال المستخدمة أثناء العمل على قوالب الووردبريس

ملف مختصر بأوسمة قالب الووردبريس (ملفPDF)

دليل كيفية تحقيق أمثلة محركات البحث مع الووردبريس (ملف PDF)

أعمال قوالب ووردبريس إحترافية

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

شركة WooThemes

We Love WP

ThemeForest

تكويد

35 قالب ووردبريس إبداعي وملون

60 قالب ووردبريس جديد ومدهش

40 قالب ووردبريس مجاني ذات جودة عالية

100 قالب ووردبريس مدهش لعام 2009

30 موقع ووردبريس غير نموذجي

33 مكان لشراء قوالب ووردبريس قيمة وذو جودة عالية

قوالب ووردبريس مجانية (أماكن تجد فيها هذه القوالب)

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

قوالب ووردبريس مجانية من موقع Wordpress.org

Top Wordpress Themes

Free Wordpress Themes

Themes2WP

WP Themes Press

Skip Press

مقالات حول تصميم قوالب الووردبريس

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

إنشاء قالب ووردبريس خاص

10 حيل مفيدة خاصة بحلقات التكرار Loops

12 إضافة ووردبريس لتطوير القالب

أعلى 10 أطر عمل ووردبريس مجانية للمصممين

13 شفرة مفيدة لتطوير الووردبريس

إنشاء صفحة إختيارات خاصة بقالب الووردبريس

100 مصدر لمطوري قوالب الووردبريس

تلميحات مفيدة لمطوري قوالب الووردبريس

10 دروس لأخذ مهاراتك في تطوير الووردبريس إلى المستوى التالي

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

كيف تحسن قالبك مع 9 إضافات مفيدة

10 تقنيات لكتابة شفرات ووردبريس مفيدة

مصادر مفيدة لإضافة مميزات إلى الووردبريس

10 وصفات لملف الدوال تغنيك عن مثيلاتها من إضافات WordPress

أطر عمل تطوير قالب الووردبريس

تلميحات قوية لمطوري قوالب الووردبريس

تكامل ترقيم الصفحات في قالب الووردبريس

أعلى 10 دروس لتطوير قوالب الووردبريس

5 أفكار لتحسين قالب الورد بريس بواسطة الحقول الخاصة

إنشاء موضوع فقط لمتابعي خلاصات RSS في الووردبريس

كيفية فصل التنبيهات عن التعليقات

حيل الحقول الخاصة للووردبريس

10 حيل ووردبريس إستثنائية

أكثر 11 حيلة مطلوبة في الووردبريس

10 حيل مفيدة خاصة بتعليقات الووردبريس

15 حيلة وإضافة مفيدة خاصة بتويتر في الووردبريس

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

10 حيل مفيدة خاصة بخلاصات RSS للووردبريس

أكثر 30 حيلة مطلوبة لصفحة تعليقات الووردبريس

20 درس ومصدر للعمل مع الحقول الخاصة في الووردبريس

كيفية إضافة ترقيم للصفحات في قائمة سجلات أو إضافة ووردبريس

25 إضافة ودرس مفيدة حول إستخدام jQuery مع الووردبريس

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

أجزاء الموضوع:

• مصادر لتطوير أدوات الووردبريس (الجزء الأول)
• مصادر لتطوير أدوات الووردبريس (الجزء الثاني)