أساسيات تصميم جرافيك المواقع

29 04 2007
يحاول دائمآ كل من يصمم جرافيك للمواقع أن يجعل موقعه أجمل ما يكون و لكنه يفاجأ فى نهاية التصميم انه هناك شىء ما ناقص أو انه هناك خطأ ماسألقى الضوء فى هذة المقالة على أهم الأساسيات التى يغفل هنها معظم المصممين … بصفتى هاو قديم للرسم اليدوى وجدت انه هناك تشابه كبير بين رسم المواقع و الرسم اليدوى و تنطبق عليهما نفس القواعد تقريبآلنناقش أولآ خطوات التصميم ثم نلقى الضوء على بعض الأخطاء
خطوات تصميم المواقع
– أسكتش يدوى :
قبل ان (تدب صباعك فى الماوس ) يجب عليك أولآ ان تأخذ ربع ساعة تتخيل فيها شكل الموقع الألوان و الشعار و خطوط الكتابة و التعامل مع الصفحات و المناطق المخصصة للإعلانات .. أكاد أسمعك تقول ان كل هذا كلام فارغ و اننى سوف أصممه (على طول ) على الكمبيوتر ، و لكن أنا قولت من الأول ان معظم المصممين يغفلون هذة النقاط فلا تقاطعنى ( والنبى ) بعد مافكرت وقررت الشكل بتاعك أعمل سكتش يدوى لتخيلك حتى لا تفقد تخيلك هذا مع عمل ملاحظات بالألوان و المناطق المفتوحة
2-مراجعة التصميم مع صاحب الموقع :
بعد رسمك للموقع و تصميمك له على الكمبيوتر تفاجأ ان صاحب الموقع أو العميل لايعجبه التصميم و أنه لايريد هذا اللون أو أن هذا الجزء غير مطلوب لذلك يجب دائمآ مراجعة التصميم و يستحسن ألا يكون تصميم واحد الذى تعرضه حاول دائمآ ان تتخيل أكثر من تصميم أو تحضر بعض التصميمات القديمة التى رفضها عميل آخر فقد يعجب بها العميل الحالى
3-أختيار ألوان الموقع :
يجب أن تكون ألوان موقعك من درجات متقاربة أو ألوان تليق على بعضها مثل الوردى و البنفسجى أو البرتقالى و الأصفر أو الأزرق و الأصفر أو الأخضر و السماوى , و أحيانآ يلجأ مصمميى المواقع لحيلة معروفة و هى أختيار لكل الموقع لون بدرجاته و هى أسهل طريقة ,بعد أخذك لقرار الألون قم بعمل لوحة ألوان جديدة توجد بها جميع الألوان الى تحتاجها و طبعآ لاتخلو من الأبيض و الأسود و عند التصميم تجاهل أى لوحة ألوان أخرى4
– التصميم الفعلى :
بعد كل هذة الأعدادات التى رأيتها كأننا ندخل حربآ …هجومقم بإستعراض عضلاتك فى الرسم بالبرنامج الذى يريحك مع مراعاة أن تصمم كل مايخص الموقع فى صورة واحدة تمثل الموقع بأكمله كما تخيلته و بعدها قم بتجزأة الموقع كما تريد و لا تنسى ان الموقع يجب ان يحتوى على شعار,الأبواب الخاصة بالموقع , المحتويات,أعلانات,التذييل قم بإضافة صور خارجية لإستغلالها فى الموقع و حاول أن تتركها كما هى لاتقم بتغيير الألوان بالطريقة التى يحبها الجميع hue saturation لأنها بألوانها المتعددة تعطى أنباع جيد جدآ كأنك رأيت صورة أبيض و أسود بها جزء ملون (فى حالة أستخدام لون بدرجاته )أحيانآ يلجأ المصممين لحيلة جيدة و هى خروج الشعار عن مقدمة الصفحة ليأخد جزء من الجسم الأساسى و كأنه يخترق الصفحة و هى تعطى أنطباع بالجموح فى المواقع الشبابية و الترفيهية فلا مانع من إستخدامها
هذة هى الخطوات التى يتبعها (البنى آدم ) لتصميم جرافيك موقع , بعد ان عرفت ما هى الخطوات يجب عليك ان تتعرف على الأخطاء التى تجعل التصميم على غير مايرامالأخطاء الغير متوقعة و الخطوط العريضة
1- لأى تصميم أيآ كان يجب توافر منطقة مفتوحة يمكن تمديدها لتسع أى محتوى و هى مثل منطقة الأخبار بموقه ياهو أو الجزء التلى لمكان البحث فى موقع إم إس إن أو المكان الذى يظهر فيه النص الآنعدم توافر هذة المنطقة يؤدى لتحديد حجم المعلومات التى يتم وضعها فى الموقع 2
– لأى موقع شعار …. إليك كلمة خلاصة : ( الصفحة التى ليس لها شعار ليست موقع بل ( لعب عيال ) ) يحاول دائما معظم المصممين العرب ان يكون الشعار الخاص بموقعه شعار معقد و متعدد الألوان و التجسيمات و الكائنات و لكنه خطآ شائع , يجب ان يكون شعار موقعك بسيط و لا يحتوى على ألوان كثيرة و حاول ان تستخدم درجة من الالوان لم تستخدم من قبل و ليس بالضرورة ان تختار لون تحبه انت يجب ان يكون الشعار من البساطة بحيث يمكن للشخص العادى رسمه باليد : تخيل مثلآ ان أحد زوار موقعك حاول الإستدلال على الموقع لصاحبه سيقول التلى فى الحالتين :
*إذا كان الشعار معقد : – شعار الموقع اللى بقولك عليه عامل شبه سماعة الدكتور داخلة فى حاجة شبه القلب و وراهم ثعبان براسين
*إذا كان الشعار بسيط : – شعار الموقع اللى بقولك عليه فراشة مكونة من 4 ألوانطبعآ فى الحالة الأولى ستقف على رأسك و لا تعرف انه شعار احد المواقع الطبية أما فى الحالة الثانية فقد عرفت طبعأ أنه شعار إم إس إن لذلك لاحظ ان معظم المواقع الناجحة شعاراتها بسيطة جدآ : شركة فودافون : دائرة بداخلها (,)شركة ياهو : كلمة ياهو! شركة ميكروسوفت : كلمة ميكروسوفت شعار جنوم : قدم , إنترنت إكسبلورر : حرف E
3- يجب ان يتواجد مكان موحد لإقسام الموقع و لا تشتت الزائر بين لينكان الصفحة
4- يجب ان تكون أجزار الصفحة مترابطة و ليس كل جزء كأنه طائر على الصفحة
5- حاول ان تكون معظم الصفحات متشابهة ماعدا الجزء القابل للتمدد يتغير حسب محتوى الصفحة كما ترى فى المدونة
Advertisements




لغات البرمجة العربية

22 04 2007
أرى الكثير من المستخدمين العرب على الإنترنت يجيدون التعامل مع لغات البرمجة الأجنبية بل إن منهم من يتفاخر بمعرفته للغات برمجة أسبانية أو فرنسية و لكن أحدهم لم يتساءل لماذا لا توجد لغات برمجة عربية سوى قلة قليلة خطرت لهم هذه الفكرة على بعض المنتديات ,
الحقيقة انه بعد البحث وجدت انه هناك لغات برمجة عربية و لكنها تعد على أصابع اليد الواحدة منها لوجو العربية و التي تقوم بتعليم الأطفال الرسم , و لم اسمع انه هناك لغات عربية غيرها , يبدو انه لا أحد يهتم بعمل محرك لغة برمجة عربي و قد انشغلوا جميعا بتعلم اللغات الموجودة أساسا بعد أن فكرت في الأمر وجدت انه هنالك طريقتان يمكن عمل لغات برمجة عربية بها :الأولى : عمل برنامج يتيح الكتابة باللغة العربية ثم ترجمتها للغة البرمجة الأصلية الثانية : عمل لغة البرمجة من الصفر أي من الكور الأساسي حتى المكتبات و الآن تحليل مفصل لكل طريقة من الاثنين :الطريقة الأولى برنامج ترجمة اللغة : يتم عمل برنامج به نظام القاموس يتم وضع كل دالة مع المقابل لها باللغة العربية مع مراعاة عدم تكرار الكلمات فمثلا عند وجود دالة تسمى (بحث) يجب ألا توجد دالة أخرى تسمى (بحث_نص) القاعدة الثانية هي عدم تضمين المسافة في أسماء الدوال العربية لسهولة البحث عنها و استبدالها سنحتاج أيضا لقاموس آخر به الحروف العربية و مقابلاتها في الحروف الأجنبية و ذلك لإعادة تسمية المتغيرات و أسماء الكائنات التي سيدخلها المستخدم بالعربية طبعا فمثلا عندما يجد البرنامج كلمة ليست في القاموس الخاص بالدوال تكون متغير أو كائن أو دالة معرفة من قبل المستخدم و بذلك يتم أستبدال كل حرف عربي بحرف أجنبي مثلا عند وجود متغير يسمى (كائنى) يتم ترجمته (kaeny)و يتم مراعاة عكس وضع الكلمات لأن اللغة العربية من اليمين لليسار بعكس اللغات الأخرى و بذلك يكون ناتج ترجمة كود من لغة مثل الجافا سكر يبت من العربية للإنجليزية كهذا النسخة العربية :
دالة اختبار(معامل1 و معامل2 ){
المستند.أكتب(معامل1+معامل2)
}
اختبار(2و5)
النسخة الإنجليزية:
Function akhtbar(ma3aml1,ma3aml2){
document. write(ma3aml1+ma3aml2)
}
Akhtbar(2,5)
و هكذا نرى انه في المثال السابق قد تم مايلى : ملحوظة : تم اختبار كلمات الكود من اليمين لليسار و كتابة ما يقابله من اليسار لليمين تم اختبار كلمة (دالة) فوجد أنها من الكلمات المحجوزة و مقابلها functionتم و ضع المسافة كما هي تم اختبار كلمة (اختبار) فلم توجد في الكلمات المجوزة أو الدوال فتم أستبدل الحروف العربية بحروف إنجليزية مع مراعاة أن حرف الخاء هو kh حتى لا يتضارب مع حرف الكاف الزى سيكون مقابله k فقط تم وضع معكوس القوس ( ليكون في وضعه الصحيحتم اختبار كلمة (معامل1) فلم توجد في القاموس فترجمت إلى ma3aml1 مع ملاحظة أن مقابل حرف العين هو m3 ولم تكون 3 فقط كما نفعل في الشات بسبب انه إذا بدأ متغير بحرف العين كأسمى (عماد ) ستكون الترجمة ستكون الترجمة 3mad وهو ما ترفضه لغات البرمجة (أن يبدأ متغير برقم) و ستكون الترجمة التي يقبلها المفسر هي a3mad تم تحويل حرف الواو إلى coma و ترجمة كلمة معامل2 بنفس الطريقة ثم عكس القوسين ( و { ملحوظة : حرفي { و } هما غير مرسومين على لوحة المفاتيح و يمكن كتابتهما عن طريق المفتاح العلوي و حرف الراء و حرف الواو المهموزتم ترجمة كلمة (المستند) إلى الكلمة المحجوزة document تم وضع النقطة و ترجمة كلمة (أكتب) إلى أسم الحدث write و تم عكس الأقواس و ترجمة كلمة معامل1 و معامل2 كما سبق الشرح ثم عكس القوس و تحويل كلمة اختبار كما سبق و عكس الأقواس و كتابة الأرقام كما هي مع عكس ترتيبها 2و5 إلى 2,5
و بذلك نكون قد قمنا بعمل برنامج يجمع رقمين بالعربية و تم ترجمته للإنجليزية

الطريقة الثانية و هي بناء الكود من البداية
وهو ما يجب عمله فعلا حيث يجب بداية بناء language core أو ما يتم تلقيبه بقلب اللغة ثم عمل الدوال في مكتبات تقوم بالعمل على المحرك أيضا ثم عمل الواجهة الرسومية إذا كانت لغة stand alone تنتج ملفات تنفيذية أو عمل امتداد للعمل على الأجهزة الخادمة إذا كانت مثل php أو ما يناسب اللغة التي تم صنعها مع العلم انه سوف تحتاج إلى compiler في كلتا الحالتين لترجمة الكود للغة الآلة
ملحوظة: لن استرسل في هذا القسم كثيرا لعدم علمي بتفاصيل صنع لغات البرمجة
كل مايمكن قوله في هذه الطريقة أنها يجب أن تكون مفتوحة المصدر كأي لغة تحترم نفسها و تكون متاحة للجميع