جوملا ! نظام إدارة المحتوى | التنصيب

http://www.nawal-saad.com/labs/Joomla_logo.png

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

ما هو Joomla :

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

Outdoor Photographer (Magazine) – http://www.outdoorphotographer.com
Senso Interiors (Furniture design) – http://www.sensointeriors.co.za

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

يقال أن جوملا تعني ( كل ) كما اعتدنا في اللغة العربية إطلاق كلمة – جملة – على الأشياء مجتمعة. ( جملة – مفرق :mrgreen: ) أو ممكن أن تعني جملة : مجموعة من الكلمات . لكن المقصود فيها على الراجح هو ( كل ).

سأقوم بشرح عملية تركيب السكربت على موقعك الخاص. نحتاج إلى شيئين رئيسين أولهما قاعدة بيانات وآخرهما الـ source code لنظام جوملا ثم بعدها تبدأ عملية التنصيب:

1- افتح لوحة التحكم الخاصة بموقعك cpanel . ثم إذهب لقواعد البيانات كما في الصورة:

http://www.nawal-saad.com/labs/joomla1.jpg

2- قم بإنشاء قاعدة بيانات جديدة :

http://www.nawal-saad.com/labs/joomla2.jpg

3- بعد إنشاء قاعدة البيانات نقوم بإنشاء مستخدم :

http://www.nawal-saad.com/labs/joomla3.jpg

4- نقوم بربط هذا المستخدم بقاعدة بيانات جوملا التي أنشأناها في الخطوة رقم 2 :

http://www.nawal-saad.com/labs/joomla4.jpg

5- الآن انتهينا من أول متطلب لتركيب جملة وهو قاعدة البيانات والمستخدم لهذه القاعدة. الآن ننتقل للجزء الثاني حيث يتطلب منا الحصول على ملف جوملا لنقوم بتركيب الملفات . قم بتحميل جوملا من موقع جوملا . أو من الرابط المباشر لآخر نسخة. نقوم بعدها بالتوجه لـ file manager من لوحة التحكم الخاصة بموقعك – Cpanel .

http://www.nawal-saad.com/labs/joomla5.jpg
سيطلب منك تحديد المكان الذي تريده في البداية وليكن الـ root . بعدها قمت بعمل directory جديد سأقوم برفع جوملا إليه مباشرة. الآن اخترت المجلد الذي قمت بتسميته: joomla . ثم بعد ذلك نختار upload كما في الصورة أعلاه.

6- قم باختيار ملف جوملا المضغوط ( سنقوم بفك الضغط بعد الرفع لأن العملية أسرع بدون مقارنة ) .

http://www.nawal-saad.com/labs/joomla6.jpg

7- بعد إكمال عملية الرفع

http://www.nawal-saad.com/labs/joomla7.jpg

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

http://www.nawal-saad.com/labs/joomla8.jpg

8- سيقوم بسؤالك في أي المجلدات تريد أن تستخرج الملفات ؟ هل في نفس المجلد أم مجلد آخر تقوم بكتابته له. طبعا أنا هنا اريدها في نفس المجلد الذي قمت برفع الملف المضغوط إليه ( Joomla ) .

http://www.nawal-saad.com/labs/joomla9.jpg
تستغرق العملية ثواني قليلة على حسب سرعة اتصالك بعد ذلك سترى الملفات موجودة في المجلد عندها ستكون الخطوة التالية هي أول خطوة في عملية تنصيب جوملا وتتم بالتوجه إلى رابط جوملا في موقعك.

9- في متصفحك اكتب رابط مجلد جوملا في موقعك ( او اكتفي برابط موقعك في حال قمت برفع جوملا إلى public_html مباشرة )

http://www.nawal-saad.com/labs/joomla10.jpg
ستبدأ الآن عملية التنصيب.

10- اختر اللغة التي تريدها :

http://www.nawal-saad.com/labs/joomla11.jpg

ثم اضغط Next

http://www.nawal-saad.com/labs/joomla-next.png

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

http://www.nawal-saad.com/labs/joomla-next.png

12- في المرحلة التالية سنقوم بربط جوملا مع الداتا بيس المعدة مسبقا:

http://www.nawal-saad.com/labs/joomla12.jpg
نوع الداتا بيس : mySQL – ثم تقوم بوضع اسم قاعدة البيانات التي أنشئتها واسم المستخدم و كلمة المرور. ثم بعد ذلك Next

http://www.nawal-saad.com/labs/joomla-next.png

13- بعد الخطوة السابقة ستظهر إعدادت بسيطة منها اسم الموقع ، وإيميلك الشخصي و كلمة السر للتحكم في موقعك ( تماثل كلمة السر لدخول مدونتك )

http://www.nawal-saad.com/labs/joomla13.jpg
بخصوص الـ sample data فهي عبارة عن بيانات أساسية يقوم جوملا بوضعها للتعرف أكثر على النظام ، مثل القوائم المعدة مسبقا وبعض المقالات ومحتوى وهمي لتفهم كيفية عمل جوملا وطرق عرض المحتوى. اخترت هنا أن لا أقوم بوضعها في موقعي.

بعد ذلك واصل العملية عن طريق:

http://www.nawal-saad.com/labs/joomla-next.png

14- اقتربنا الآن من النهاية :) لكن يجب أولا أن تقوم بحذف المجلد الذي يحمل اسم installation الموجود داخل مجلد joomla او على حسب ما قمت بتسميته.

http://www.nawal-saad.com/labs/joomla14.jpg
لن تتم عملية التنصيب بدون هذه الخطوة، فعليك العودة لـ file manager وتحديد هذا المجلد وحذفه . بعدها بإمكانك مشاهدة الموقع مباشرة من خلال كتابة الرابط في المتصفح أو بالضغط على زر site . بإمكانك أيضا البدء بالتحكم بالموقع من خلال الضغط على زر admin. سيطلب منك إدخال الرقم السري الذي قمنا بإنشائه في الخطوة رقم 13.

http://www.nawal-saad.com/labs/joomla15.jpg

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

http://www.nawal-saad.com/joomla/

——————————-

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

شكرا لصبرك و وصولك لآخر التدوينة :mrgreen:

رحلة طابعات

**********

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

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

hp psc 750

http://image.shopping.uol.com.br/200x200/product/00/01/21/36/1213632.jpg

هذه الطابعة وبلا مبالغة هي الأكفأ، استمرت لمدة تزيد عن 9 سنوات وتخدم جميع أفراد المنزل. الطابعة من نوع 3×1 – سكانر – طابعة ملونة – تصوير. سعرها كان مثالي مقابل ما تقدمه الطابعة من خدمات وقوة أداء علاوة على أنه قبل 9 سنوات كانت أسعار الطابعات ليست في متناول اليد دائما. كان سعرها حوالي 900 ريال. جودة الطباعة ممتازة، السرعة متوسطة للتفاصيل الكثيرة في الورقة سريعة في التقارير و النصوص التي لاتحتوي صور.

http://www.erenumerique.fr/images/periph/20020925/hp_psc_2110_detail.jpg

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

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

http://ecx.images-amazon.com/images/I/41XACCAG3VL._SL500_AA280_.jpg

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

لازلت متمسكة بطابعة منفردة لي :] بحثت عن أخرى لكن اخترت أن تكون من نوع المهام المتعددة فاخترت : HP 1210

http://img181.imageshack.us/img181/1705/hp1210gq2.jpg

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

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

اسم الطابعة : HP C4583

http://h10010.www1.hp.com/wwpc/images/emea/hp-photosmart-c4500-all-in-one-printer-series-EMEA_400x400.jpg

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

usability: سهولة الوصول والتصفح

بسم الله الرحمن الرحيم و السلام عليكم ورحمة الله و بركاته ، استكمالا للسلسلة المرتبة عشوائياً :

usability:استخدام الألوان في تصميم المواقع

Usability: الصفحة الرئيسية – home page

————————————–

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

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

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

القوائم

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

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

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

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

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

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

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

——————————————

http://www.livetechzone.com/wp-content/uploads/2008/08/mouse-cursor-1.jpg

الروابط

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

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

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

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

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

أين تفتح الروابط؟: شكرا لمشهور الدبيان على تدوينة وضح فيها متى يكون من الضروري أو عدمه فتح الروابط في نافذه جديدة أو في نفس النافذة

(F)

و أخيرا، شكرا لمتابعة هذه الملاحظات و النصائح المتواضعة التي قد تحتمل الخطأ :) . نراكم لاحقا :)

jQueryPad

السلام عليكم ورحمة الله وبركاته. أثناء تصفحي وجدت هذه الأداة : jQueryPad ، لصاحبها : paul stovell

http://www.nawal-saad.com/labs/j-pad.jpg

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

لتحميل الأداة: JQueryPad .
لمعلومات أكثر قم بزيارة رابط التدوينة للمبرمج

Usability: الصفحة الرئيسية – home page

السلام عليكم ورحمة الله وبركاته ، استكمالا للسلسلة المرتبة عشوائيا :) :

usability:استخدام الألوان في تصميم المواقع

home-icon

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

سأقوم بتلخيص بعض النقاط من مجموع قراءاتي المتواضعة:

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

#احرص على أن تكون العناصر في الصفحة الرئيسية هي العناصر الأكثر أهمية لزائر الموقع، تجنب حشوها بالعناصر الغير مفيدة او التي لاتهم الزائر بشكل مباشر.

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

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

http://lh6.ggpht.com/_zffIzal5cfI/Sd2GcFzMBKI/AAAAAAAADUo/Pa9f7YvnnB0/Createanapplestylemenuandimproveitvi.jpg

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

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

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

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

http://www.hoptoninbloom.org.uk/images/search-icon.jpg

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

#عنوان الصفحة مهم جدا للقارئ ولمحركات البحث، اجعله واضحاً و بسيطا ومن غير زخارف أو رموز لا تسمن ولا تغني من جوع. فـ : التصميم الرقمي ، افضل من الـــــتـــصـــ××ــمـــيم الـــرقــمــــــ××ـي !

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

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

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

#في الصفحة الرئيسية احرص على توافر كل أقسام موقعك المهمة، ولا تنسى الروابط المهمة للصفحات المهمة مثل: الاتصال بنا ، عن الموقع ، من نحن ، الاقتراحات أو المشاكل ……..ألخ (navigation)

#باختصار الصفحة الرئيسية يجب أن تحتوي على 3 أشياء مهمة:

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

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

إلى اللقاء في الحلقة القادمة :)