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

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

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

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

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

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

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

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

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

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

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

سيطلب منك تحديد المكان الذي تريده في البداية وليكن الـ root. بعدها قمت بعمل directory جديد سأقوم برفع جوملا إليه مباشرة. الآن اخترت المجلد الذي قمت بتسميته: joomla. ثم بعد ذلك نختار upload كما في الصورة أعلاه.

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

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

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

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

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

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

ستبدأ الآن عملية التنصيب.

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

ثم انقر على..  Next

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

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

نوع الداتا بيس: mySQL – ثم تقوم بوضع اسم قاعدة البيانات التي أنشأتها واسم المستخدم و كلمة المرور. ثم بعد ذلك Next

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

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

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

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

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

بعد ذلك كل الموقع سيكون تحت تحكمك، شاهد كيف أصبح جوملا بعد التنصيب: http://www.nawal-saad.com/joomla/

——————————-

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

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

مواضيع مشابهة:

1. موقع البيت الأبيض ينتقل لاستخدم نظام إدارة المحتوى دروبال
2. إدارة المحتوى: قاعدة من ومتى وأين وماذا
3. ساهم في التصويت لجائزة أنظمة إدارة المحتوى المفتوحة المصدر

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

• usability:استخدام الألوان في تصميم المواقع
• Usability: الصفحة الرئيسية – home page

—

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

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

القوائم

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

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

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

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

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

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

صمم قوائمك بشكل يتناسب مع محتوى الموقع والمعلومات التي يقدمها، مثلا حجم القائمة عرضا وطولا يجب أن يتناسب مع شكل التصميم… إلخ. أيضا بإمكانك تقسيم طريقة عرض القوائم إلى تقسيم منتشر حاليا، وهو تقسيم القوائم global and local -لم أتوصل لتعريب مناسب-.

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

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

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

الدروس | المصادر | المصممين | مقالات

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

الدروس | المصادر | المصممين | مقالات

دروس فوتوشوب | دروس فيكتور | دروس دريم ويفر | دروس بينتر… الخ

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

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

—

الروابط

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

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

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

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

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

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

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

مصدر الصورة

مواضيع مشابهة:

1. Usability: الصفحة الرئيسية – home page
2. usability: استخدام الألوان في تصميم المواقع
3. قابلية الوصول لموقعك

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مواضيع مشابهة:

1. usability: استخدام الألوان في تصميم المواقع
2. usability: سهولة الوصول والتصفح
3. Facebook تقوم بتحديث تصميم صفحة موقعها الرئيسية

السلام عليكم ورحمة الله وبركاته.. أرجو أن يكون الجميع بخير وصحة.

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

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

كل ما تحتاجه لتطبيق هذا الدرس: HTML editor (NotePad Plus Plus) g  / معرفة بسيطة جدا بالـ HTML  و CSS و J-query.

أولاً:

سأقوم بعمل هيكل القوائم الأساسية في الـ HTML عن طريق الـ ul tag ، لكن أولاً سأقوم بمناداة مكتبة الجي كويري في جزء الـ Head

ثم بعدها سأكتب قوائمي:

الآن نحتاج الـ CSS لعمل شكل القائمة لأنها الآن مجرد قائمة بدون شكل أو لون:

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

استخدام تأثير slide In / slide out effect سيساعدنا كثيرا في إضفاء حركة جميلة عند ظهور العناوين الفرعية للقائمة. وستلاحظ أنه أكثر سلاسة من تأثير fade in / out.

if(false == $(this).next().is(‘:visible’)) {

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

$(‘#menue > ul:eq(0)’).show();

عند تغيير الرقم صفر بين القوسين للـ 1 ستعرض عناصر القائمة الثانية وهكذا إذا أردت عرضهم كلهم أو إخفائهم كلهم بإزالته.

/

$(‘#menue > ul’).slideUp(200);

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

——————-

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

مواضيع مشابهة:

1. JQuery | مكتبة الجي كويري
2. جوجل تصدر قائمة بأكثر مواقع الإنترنت زيارةً
3. دراسة : قائمة أسوأ كلمات المرور في عام 2011

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

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

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

التباين:

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

هنا نلاحظ وضوح النص وعدم تعارضه مع الخلفية البيضاء.

وهنا أيضا لون النص يختلف تماما عن لون الخلفية الداكن، مما يضمن لنا وضوح القراءة:

ستلاحظ عدم ارتياح عينك للأمثلة القادمة بسبب قرب التباين بين لون النص والخلفية:

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

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

السطوع:

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

عمى الألوان:

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

ألوان الويب الآمنة:

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

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

ألوان الروابط:

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

الدلالة للأهمية:

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

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

موقع سيساعدك في اختيار الألوان والتوفيق بين الدرجات:

http://www.colourlovers.com

التدوينة في مدونتي

مواضيع مشابهة:

1. Usability: الصفحة الرئيسية – home page
2. تصميم المواقع: لا تبالغ في تصميم موقعك
3. تطوير قالب “ملك الألوان” المجاني للوردبريس

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

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

(بقية المقاطع بعد الفاصل)

*من هذا الدرس تستطيع عمل برنامج جافا يحتوي على شريط قوائم وبسهولة

* إذا لم يكن لديك أي خلفية عن HTML سيتيح لك هذا الدرس التعرف عليها وكيفية بناء المواقع عن طريقها باستخدام notepad

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

* تعلم كيف تصنع تقسيم صفحات موقعك عن طريق برنامج الفوتوشوب:

*عن طريق اليوتيوب أولاً تعلمت لغة الـC# وجدت الكثير من المقاطع المفيدة حقيقة وهذا أحدها، أستطيع القول أنك ستتمكن من صنع أول برنامج لك بالسي شارب بسهولة:

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

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

مواضيع مشابهة:

1. مقطع من دقيقتين على يوتيوب يهدي صاحبه جائزة مئة ألف جنيه
2. يوتيوب يسمح بتنزيل بعض محتوياته
3. تغيير صفحة عرض الفيديو في يوتيوب!

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

كيف أقوم بذلك؟

• اذهب إلى الموقع font capture
• ثم اضغط على  Create Your Font now
• سيطلب منك كخطوة أولى أن تقوم بتحميل القالب المخصص وطباعته، قم بطباعته واكتب على الورقة طريقة رسمك للحروف.
• الخطوة الثانية سيرشدك لطريقة الكتابة:

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

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

———————————————-

*الخط في الصورة العلوية خطي، وبالمناسبة أستطيع القول أني أُصبت بصدمة عندما شاهدته، لمن أكن أتوقعه بهذه البشاعة.

التدوينة الأصلية

مواضيع مشابهة:

1. TypeFront: خدمة استضافة الخطوط الخاصة بموقعك
2. vizualize.me: خدمة لتحويل ملفك في موقع لينكدان إلى معلومات بيانية تفاعلية
3. خدمة Pilot Handwriting و YourFonts لإنشاء خط الكتروني من خط اليد

باتريوت وحرب الخليج:

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

علاج السرطان الإشعاعي:

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

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

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

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

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

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

أخيراً: الكمـــــــال لله

التدوينة الأصلية في مدونتي

مواضيع مشابهة:

1. برنامج مايكروسوفت الجديد Fix It Center لتصحيح أخطاء الجهاز
2. مشكلة برمجية خطيرة في تطبيق الرسائل النصية للاندرويد
3. الفرق بين إصدار Alpha و Beta

ماهو كود كونامي:

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

↑ ↑ ↓ ↓ ← → ← → B A

كود كونامي كما هو واضح من الصورة عبارة عن (الضغط بالسهم الأعلى مرتين متتاليتين ثم بالسهم السفلي مرتين ثم سهم اليسار ثم سهم اليمين ثم سهم اليسار ثم سهم اليمين بعد ذلك حرف b ومن ثم حرف a ثم enter) – (فوق فوق تحت تحت يسار يمين يسار يمين ثم b ثم a ثم انتر)

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

كيف أقوم بوضع الكونامي كود في موقعي:

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

if ( window.addEventListener ) {
var state = 0, konami = [38,38,40,40,37,39,37,39,66,65];
window.addEventListener("keydown", function(e) {
if ( e.keyCode == konami[state] ) state++;
else state = 0;
if ( state == 10 )
window.location = "http://example.com";
}, true);
}

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

نماذج وأمثلة لمواقع تستخدم الكونامي:

فيس بوك:

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

قوقل ريدر:

بمجرد تطبيقك للكود سوف تتغير القائمة الجانبية للون الأزرق (تغيير بسيط في الثيم) وستلاحظ أن العناصر الغير مقروءة لديك أصبح عددها جميعا 30 !!

*

هذا الموقع الجميل انظر ماذا يظهر في حين إدخال كود الكونامي :

وأيضا هذا الموقع:

والعديد من المواقع الشهيرة مثل:

• http://jquery.com/
• http://en.netlog.com/

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

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

ماذا تريد من هذا الكود أن يعمل في حال وضعته في موقعك؟ أو ما الذي تتمنى أن يقوم بعمله؟

مواضيع مشابهة:

1. 2008 Google Summer Of Code في إنطلاقته لهذا العام
2. معلومات بيانية متحركة عن حال الانترنت
3. Setcode : خدمة لمشاركة وحفظ الاكواد البرمجية

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

• أن تنشئ حساب في slide share. أو تقوم بتسجيل دخولك إذا كان لديك حساب بالفعل.

• أن تقوم بعد ذلك برفع عرضك التقديمي بأحد الصيغ التالية: PPT, PPS, POT, PPTX), OpenOffice (ODP), PDF, Adobe PDF Portfolios and Keynote or zip (for Mac users). وبحجم لا يتجاوز الـ 100 ميقا بايت.

• بعد انتهاء عملية الرفع ستظهر لك المعلومات التي يجب عليك ملئها حتى تتم عملية النشر كعنوان العرض والوصف وتصنيفه وما إلى ذلك، أيضا ستجد في الأسف قائمة منسدلة معنونة بـ: Enter Contest  اختر من القائمة: World’s Best Presentation Contest 2009 – ثم قم باختيار المجال كما هو موضح بالصورة. بعد ذلك قم بنشر العرض.

* إذا كنت تريد المشاركة في فرع المسابقة الثاني وهو Best Acrobat 9 Presentation فيجب عليك اختياره من القائمة عوضا عن الاختيار الأول

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

• تستطيع المشاركة بـ 10 عروض تقدمية كـ حد أقصى. وهذا مما يزيد فرص فوزك.

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

الجوائز هي كالتالي:

1. Apple MacBook Pro 13-inch worth $1199
2. Amazon Kindle DX worth $489
3. Apple iPhone 3G S worth $19

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

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

رابط الخبر من موقع slide share

مواضيع مشابهة:

1. خدمة مشاركة العروض slideshare تتخلى عن الفلاش وتدعم HTML5
2. مقطع من دقيقتين على يوتيوب يهدي صاحبه جائزة مئة ألف جنيه
3. جائزة أفضل تطبيق لهذه السنة: Angry Birds

ما هي JQuery:

الجي كويري هي ليست لغة برمجة مستقلة كما يظن البعض، هي عبارة عن مكتبة مجانية في الجافا سكربت مكتوبة ومطورة بواسطة John Resig،  موجودة تتيح لنا وبسهولة تامة إضافة تأثيرات رائعة على صفحات الويب وسهولة التحكم بالكثير من الأحداث مثل تمرير مؤشر الفأرة أو النقر بزر الفارة وغيرها الكثير بسطور برمجية قليلة ومفهومة للمبتدئين وحتى الذين لم يقوموا بدراسة البرمجة كتخصص.. أيضا الكثير يصف الجي كويري بـ: write less, do more / اكتب أقل وأفعل أكثر. هذه المكتبة في الحقيقة تحتوي على الكثير من الدوال التي تقوم بتحسين ظهور صفحة الويب وتطوير فعاليتها بشكل ملحوظ. حيث يمكن تركيب هذه المكتبة وكل ما عليك هو مناداة الدوال التي تريد استخدامها في أي مكان تريده.

كيف أحصل على JQuery:

بإمكانك تحميل المكتبة مجانا من هذا الرابط (فقط قم باختيار النسخة التي تناسبك)

لماذا أستخدم  JQuery؟:

• السهولة: بكل بساطة حين تزور صفحة ويب تستخدم الجي كويري بإمكانك عرض المصدر لهذه الصفحة وسترى بعينك سهولة الكود و وضوحه وبسطور قليلة. أيضا بإمكانك تعلمها بسهولة وخلال مدة أقصر من تصورك.
• الإيجاز: كما ذكرت تقدم هذه المكتبة لمستخدميها خدمات برمجية رائعة بسطور قليلة جدا مقابل ما تقدمه لمطوري ومصممي ومبرمجي المواقع.
• قوة التحكم: مكتبة صغيرة تستطيع فعل أشياء كثيرة وبكفائه عالية، هذه المكتبة تتيح لنا وصول سريع لـ AJAX بدون جهد أو اكواد برمجية طويلة. أيضا التحكم في المظهر وإضافة بعض التأثيرات الجميلة والمميزة أصبح سهلاً مع هذه المكتبة.
• التوافق: JQuery تعمل بكفائه مع أغلب المتصفحات مثلا: فايرفوكس – اكسبلورر 6+- سفاري – اوبرا 9+. أيضا الـ JQuery تتوافق مع الـ CSS وتستطيع استخدامها مع مكتبات أخرى بدون أي مشاكل غالبا. (شخصيا لم أقم بتجربة استخدامها مع مكتبات أخرى)
• المرونة: تستطيع استخدامها في صفحتك بأي طريقة تريد سواء inline ( في نفس صفحة الويب ) او external في ملف جافا سكربت مستقل ويتم مناداته في الصفحة التي تستخدمه.
  * الحجم: كما ستلاحظ عند تنزيل المكتبة حجمها لا يتعدى الـ 117kb، وهذا بالطبع لن يتسبب بأي طريقة في إرهاق ذاكرة جهازك.
• التوسع: كونها مفتوحة المصدر فبالتأكيد سيكون هناك الكثير من الإضافات التي ستقدم للمطور العديد من الخيارات الرائعة بدون مجهود.
• الدعم والمساعدة: الـ JQuery تاتي بـ دعم و documentaion  ممتاز، بمعنى آخر ستجد الكثير من المعلومات المفيدة عن كل شيء في هذه المكتبة وكيفية استخدامها وتنصيبها من المسئول عن ‘نشاء هذه المكتبة مباشرة. وبالتأكيد المعلومات موثقة وعلى قدر كبير من الوضوح لإفادة جميع المستخدمين. أيضا هذه المكتبة مستخدمة بشكل واسع جدا من المطورين والمبرمجين مما يتيح لنا كم هائل من المعلومات والدروس المساعدة لفهم كيفية استخدام هذه المكتبة والتغلب على الكثير من المشاكل.

كيف أستخدم JQuery؟:

الاستخدام سهل وبسيط، بمجرد تحميلك لملف المكتبة فاستعد للتجربة. شخصيا أقوم بوضع المكتبة في مجلد أضع فيه جميع ملفات الـcss , JS , Jquery وغيرها من الملفات المشتركة التي قد استخدمها باستمرار. قم بوضع المكتبة في المكان الذي تريده أو في نفس مجلد الموقع. الآن في أي صفحة تريد أن تستخدم الجي كويري ما عليك سوى كتابة هذا السطر في جزء Head:

<script src="website/jquery-1.3.2.js" type="text/javascript"></script>

طبعا إذا كنت قد وضعت ملف المكتبة في مجلد آخر ليكن اسمه folder1 سيكون السطر السابق:

<script src="../folder1/jquery-1.3.2.js" type="text/javascript"></script>

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

$(document).ready(function(){
// هنا نضع الكود الذي نريده أو التاثير الذي نريده أن يظهر

});

في داخل حدث الـ ready نقوم بوضع الدالة التي تقوم بالتحكم في الحدث.. على سبيل المثال أريد عندما تفتح الصفحة أن يظهر رابط لصفحة موقعي الرئيسية وعند الضغط عليه لا أريد أن ينقله لصفحتي وحسب، بل أريد أن يظهر ترحيب على شكل نافذه منبثقة popup window وهو ما يسمى بـ alert في الجافا سكربت. في هذه الحالة سأقوم بكتابة ملف html عادي.. وسأضع في جزء head السطر الذي يتيح لي الاستفادة من مكتبة الجي كويري. ثم بعد ذلك سأقوم بكتابة المحتوى body  وسأضع الرابط لصفحتي داخله.

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

<script type="text/javascript">

ثم بعد ذلك سأبدأ في استخدام الجي كويري بكتابة هذه الدالة

$(document).ready(function(){

بعد القوس سأكتب:

$("a").click(function(event){
alert("Thanks for visiting me");
});

أي أنني أخبرته أنه عندما ترى رابط (a – من anchor) وتم النقر عليه فأريدك أن تقوم بإظهار نافذة للزائر أكتب فيها ما أريد بين القوسين ثم بعد ذلك سينتقل لصفحتي الرئيسية. وبعدها أتأكد من إغلاق الأقواس حتى تتم العملية بشكل صحيح. هذا كل ما في الأمر. كل ما سيفعله هو عندما يرى tag <a> في جزء الـ body سيقوم مباشرة بتطبيق كود الجي كويري وسيظهر النافذة الترحيبية قبل نقلك للصفحة الرئيسية.. (نلاحظ أن علامة الدولار $ تكون في أول سطر لأي استخدام لدوال الجي كويري) *هذا مجرد مثال بسيط لا أكثر، جيد لتبدأ فيه رحلتك إلى عالم الجي كويري بدون تعقيد..

للجي كويري حقيقة استخدامات كثيرة وخصوصا في التأثيرات البصرية الجميلة. فمثلا أستطيع كتابة الجي كويري مع css selectors بكل مرونة.

$("classname").click()

وهذا مثال بسيط يوضح ما أريده: بنفس الطريقة السابقة تماما لكن نغير ما بداخل ready إلى:

$("p").click(function(event){
event.preventDefault();
$(this).hide("slow");
});

أي أنه عندما يوجد نص في جزء body وتم النقر عليه بزر الفأرة سيختفي النص بشكل بطيء. ولا ننسَ أن نقوم بتغيير ما بداخل الـ body  إلى نص بـ tag : <p> k

* مثال آخر قمت بعمله لإظهار كيفية عمل نص يظهر ويختفي بطريقة sliding عند النقر على زر معين. تستطيع تحميله وتجربته ومن ثم ترى كيف استطعت عمل ذلك بمشاهدة مصدر الصفحة عن طريق view >page source. أو بفتح الصفحة بواسطة أي برنامج لتحرير ملفات HTML. أيضا الملف يحتوي على المثالين السابقين تستطيع تجربتهم بنفسك.

مواقع تستخدم الـ JQuery:

• www.digg.com
• www.wordpress.com
• www.amazon.com
• www.sourceforce.com

إضافات JQuery:

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

كتاب مفيد لـ JQuery:

مواقع ومصادر رائعة ومفيدة:

• http://jquery.com/
• http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html
• http://www.sohtanaka.com/web-design/jquery-easy-tips-tricks-tutorial/
• http://www.youtube.com/watch?v=Hk5oXFtYLwE
• إضافة جميلة: http://buildinternet.com/project/supersized/
• http://www.lateralcode.com/15-exceptional-jquery-resources-and-tutorials/
• http://www.instantshift.com/2009/02/05/40-excellent-jquery-tutorials/
• http://www.roseindia.net/ajax/jquery/
• http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/

أمثلة يمكنك تجربتها والتعديل عليها بما يناسبك، قمت بالعثور عليها أثناء تعلمي (استفدت منها كثيرا):

• http://www.nawal-saad.com/labs/jquery-tutorials.rar
• http://www.nawal-saad.com/labs/jquery.rar

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

مواضيع مشابهة:

1. مكتبة jQuery Tools، المكتبة المفقودة للويب – 2 Tooltips
2. مكتبة jQuery Tools، المكتبة المفقودة للويب – 2 Tabs
3. مكتبة jQuery Tools، المكتبة المفقودة للويب – 1 Tabs