السبت، 28 فبراير 2009

نظرة على لغة الاستعلام CAML Overview - 1


تستخدم هذه اللغة في Windows SharePoint Services (WSS) وذلك لأغراض متعددة ومختلفة, منها تعريف الحقول Fields والمناظير Views ضمن المواقع والقوائم في الـ SharePoint بشكل عام وسنبدأ إن شاء الله بكيفية استخدام الـ CAML في عملية استخراج البيانات من القوائم أو مايسمى بـ CAML Query.

هيكلية لغة الاستعلام CAML Query
جميع الصيغ التي تهدف إلى استخراج البيانات من أي قائمة لها الشكل التالي:


<query>
<where>
...
</where>
<groupby>
...
</groupby>
<orderby>
...
</orderby>
</query>


Query
حيث يعتبر العنصر Query أول عناصر هذه الصيغة وجميع العناصر الأخرى تنحصر بين و , والعناصر التي تأتي تحت هذا العنصر مباشرة هي:
  • Where
  • OrderBy
  • GroupBy

ملاحظة: لا يجب استخدام هذا العنصر في حال استخدام الصف SPQuery عند كتابة شيفرة بلغة C# أو VB.NET لاستخراج البيانات من القوائم بالاعتماد على لغة الاستعلام CAML.

Where

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

  • And
  • BeginsWith
  • Contains
  • DateRangesOverlap
  • Eq
  • Geq
  • Gt
  • IsNotNull
  • IsNull
  • Leq
  • Lt
  • Membership
  • Neq
  • Or

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

OrderBy

وظيفة هذا العنصر هو ترتيب نتائج الاستعلام وفقاً لحقل Field أو أكثر من حقول القائمة التي يُنفذ الاستعلام عليها, وصيغة هذا العنصر هي:


<OrderBy>
<FieldRef
Ascending = "TRUE" "FALSE"
Name = "Text" />
...
</OrderBy>


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

GroupBy

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



<GroupBy
Collapse = "TRUE" "FALSE">
<FieldRef Name = "Field_Name"/>
</GroupBy>

وهذا العنصر لها خاصية اسمها Collapse وتأخذ إما القيمة TRUE عندها سيتم طي البيانات ضمن مجموعات أما FALSE فسيتم توسيع كل المجموعات وإظهار البيانات, أما العنصر FieldRef فيستخدم فقط الخاصية التالية:
  • Name: اسم الحقل الذي سيتم التجميع وفقاً له, وهنا يجب كتابة اسم الحقل بشكل صحيح مع الانتباه إلى أن اسم الحقل غالباً هو ليس نفسه الاسم الظاهر فهو يختلف باختلاف طريقة تسمية الحقل عند إنشاء أعمدة القائمة.

الجمعة، 27 فبراير 2009

أعمدة القائمة المخصصة Custom List Columns

  1. القوائم المخصصة في SharePoint 2007 - الجزء الأول
  2. التعامل مع أعمدة القائمة المخصصة


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

1 -إنشاء عمود جديد خاص بالقائمة.
2 -إضافة عمود من أعمدة الموقع (سأخصص مقالة كاملة عن أعمدة الموقع).

1 - في واجهة عرض القائمة المخصصة التي تريد إضافة عمود عليها اضغط إعدادات ومن ثم اضغط إنشاء عمود كما في الشكل التالي:






2 - بعد تنفيذ الخطوة رقم 1 تظهر شاشة مشابهة للشكل التالي والتي تسمح لك بإدخال معلومات العمود الجديد وخصائصه التي تختلف باختلاف نوع العمود:






في هذه الخطوة سننشئ عمود نصي يعبر عن رمز نداء الدولة وستكون خصائصه كما يلي:

- اسم العمود: CountryCode
- نوع المعلومات في هذا العمود هو: سطر نص مفرد
- الوصف: رمز نداء الدولة الذي نستخدمه للاتصال بهاتف في الدولة.
- يطلب احتواء هذا العمود على معلومات: نعم.
- عدد الأحرف الأقصى: 5.
- اترك بقية القيم كما هي.

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






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

ملاحظة: نستطيع استخدام شيفرة C# أو VB.NET للتعامل مع القائمة المخصصة (إصافة – تعديل - حذف) وهذا مانقصده بالكود البرمجي في الفقرة السابقة.

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






2 - بعد تنفيذ الخطوة رقم 1 ستظهر شاشة نستطيع من خلالها مشاهدة أعمدة القائمة وبالضغط على اسم العمود نستطيع تغيير بعض خصائصه ومنها الاسم الظاهر:






3 - بعد تنفيذ الخطوة رقم 2 تظهر الشاشة التالية, اكتب اسم جديد للعمود وليكن "رمز الدولة" ومن ثم اضغط على الزر موافق ليتم حفظ المعلومات الجديدة للعمود:






بعد تغيير اسم العمود وعرض عناصر القائمة يظهر الشكل التالي:





أيضاً لاحظوا بأني غيرت اسم العمود الافتراضي من "العنوان" إلى "اسم الدولة".

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






2 - بعد تنفيذ الخطوة رقم 1 ستظهر شاشة نستطيع من خلالها مشاهدة أعمدة القائمة وبالضغط على اسم العمود تظهر شاشة تعرض خصائص العمود ويوجد زر حذف في الأسفل, اضغط عليه لحذف العمود:






ملاحظة: تحتوي القائمة المخصصة على مجموعة أعمدة افتراضية غير قابلة لتغيير النوع أو الحذف مثل "العنوان" والعمود " إنشاء بواسطة" وأيضاً توجد أعمدة أخرى مخفية يمكن استخدامها لاحقاً عندما نستخدم تقنيات وأدوات أخرى للتعامل مع عناصر القائمة مثل الـ CAML و SharePoint Designer والكود البرمجي C# أو VB.NET.

الخميس، 26 فبراير 2009

المناهج الإضافية Extension Methods

  1. نظرة عامة على بعض ميزات C# 3.5 الجديدة - 1
  2. المناهج الإضافية Extension Methods


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

    التصريح عن المناهج الإضافية Declaring Extension Methods
    يتم التصريح عن المناهج الإضافية بتحديد الكلمة المحجوزة this كمحدد لأول وسيط parameter من وسطاء المنهج. ويمكن التصريح عن المناهج الإضافية في الصفوف الساكنة الغير عامة والغير متداخلة مع صفوف أخرى non-generic and non-nested and static classes.


namespace Acme.Utilities
{
public static class Extensions
{
public static int ToInt32(this string s)
{
return Int32.Parse(s);
}

public static T[] Slice(this T[] source, int index, int count)
{
T[] result = new T[count];
Array.Copy(source, index, result, 0, count);
return result;
}
}
}



مجال رؤية المناهج الإضافية Available Extension Methods
تتوفر المناهج الإضافية في فضاء الأسماء namespace في حال تم تعريف هذه المناهج في صف ساكن أو تم استيرادها باستخدام using-namespace-directives, بالإضافة إلى استيراد الأنواع باستخدام using-namespace-directives فإنه يتم استيراد جميع المناهج الإضافية الموجودة في الصفوف الساكنة المعرفة في فضاء الأسماء المحدد.


تتوفر المناهج الإضافية كمناهج جديدة على الأنواع ولكن بأسبقية أقل من مناهج الأنواع الأصلية, على سبيل المثال عند استيراد فضاء الأسماء Acme.Utilities من المثال السابق كما يلي:


using Acme.Utilities;


عندها يمكن تنفيذ المناهج الإضافية المتوفرة في فضاء الأسماء المحدد كما يتم تنفيذ المناهج العادية:


string s = "1234";
int i = s.ToInt32(); // Same as Extensions.ToInt32(s)
int[] digits = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
int[] a = digits.Slice(4, 3); // Same as Extensions.Slice(digits, 4, 3)



تنفيذ المناهج الإضافية Extension Methods Invocations
للمناهج العادية التابعة للأنواع الأفضلية على المناهج الإضافية, والمناهج الإضافية المصرح عنها في فضاءات الأسماء الداخلية لها الأفضلية على المناهج الإضافية المصرح عنها في فضاءات الأسماء الخارجية, مثال:

public static class E
{
public static void F(this object obj, int i) { }
public static void F(this object obj, string s) { }
}
class A { }
class B
{
public void F(int i) { }
}
class C
{
public void F(object obj) { }
}
class X
{
static void Test(A a, B b, C c)
{
a.F(1); // E.F(object, int)
a.F("hello"); // E.F(object, string)
b.F(1); // B.F(int)
b.F("hello"); // E.F(object, string)
c.F(1); // C.F(object)
c.F("hello"); // C.F(object)
}
}



في المثال السابق المنهج العادي المصرح عنه في الصف B له الأسبقية على المنهج الإضافي F الأول المصرح عنه في الصف E, والمنهج العادي المصرح عنه في الصف C له الأسبقية على المنهجين الإضافيين المصرح عنهما في الصف E.

مترجم بتصرف عن مقالة من موقع http://www.micrsoft.com

الثلاثاء، 24 فبراير 2009

القوائم المخصصة في SharePoint 2007 – الجزء الأول

  1. القوائم المخصصة في SharePoint 2007 - الجزء الأول
  2. التعامل مع أعمدة القائمة المخصصة


تعتبر القائمة المخصصة Custom List من العناصر المهمة في SharePoint 2007 والتي يمكن تصورها على أنها عبارة عن مجموعة أعمدة ذات أنواع مختلفة (نصية – مجموعة خيارات – رقمي ...), ولإنشاء قائمة مخصصة يجب اتباع الخطوات التالية:


1 - بعد تسجيل الدخول اضغط على إجراءات الموقع واختر عرض محتوى الموقع بأكمله




2 - بعد تنفيذ الخطوة رقم 1 ستظهر جميع المواقع الفرعية والقوائم الموجودة في الموقع الحالي, اضغط الآن زر إنشاء:


3 - بعد تنفيذ الخطوة رقم 2 تظهر شاشة مشابهة للشاشة التالية, اضغط على قائمة مخصصة:


4 - بعد بتنفيذ الخطوة رقم 3 ستظهر شاشة إنشاء قائمة مخصصة والتي يجب أن تدخل فيها بعض المعلومات الضرورية للقائمة التي تود إنشاءها:

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


5 - بعد إدخال المعلومات اللازمة اضغط على زر إنشاء ليتم إنشاء القائمة المخصصة.

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


نلاحظ كيف ظهر اسمها Countries في عنوان الصفحة, أما لو تم تسميتها لأول مرة باللغة العربية فإن النظام سيختار لها اسماً آخذاً بعين الاعتبار عدد القوائم الأخرى وفي حالتنا سيكون اسمها في عنوان الصفحة List1.


تغيير عنوان أو اسم القائمة المخصصة

يمكن تغيير اسم القائمة المخصصة بعد إنشائها وذلك باتباع الخطوات التالية:

1 - اضغط على قائمة إعدادات ومن ثم اختر إعدادات قائمة كما في الشكل التالي:


2 - بعد تنفيذ الخطوة رقم 1 ستظهر الشاشة التالية, حيث يجب الضغط على العنوان والوصف والتنقل لتغيير اسم القائمة ووصفها.

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

حذف قائمة مخصصة

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

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

الكاتب: إسماعيل عنجريني

تفعيل البحث عن الأشخاص في SharePoint 2007 (People Search)

إحدى المزايا القوية في خدمة البحث التي يقدمها SharePoint 2007 هي البحث عن المستخدمين المسجلين في النظام وطبعاً لتوفير عملية البحث يجب أن يتم إنشاء SSP (Shared Service Provider) ومن ثم إجراء كل الإعدادات اللازمة لتوفير عملية البحث (لن يتم مناقشة كيفية عملها في هذه المقالة). المهم ومن أجل توفير البحث عن المستخدمين ضمن النظام يجب تنفيذ الخطوات التالية:

  • تهيئة المجال Scope الافتراضي المسمى People أو إنشاء آخر اعتماداً على شروط أخرى.
  • تهيئة مصدر البيانات Content Source بحيث يستطيع جلب معلومات المستخدمين التي سيتم البحث فيها وهذه العملية تتضمن وضع الرابط التالي ضمن قائمة الروابط التي سيتم جلب البيانات منها كما يلي: sps3://WEBAPP:PORT

كما في الشكل التالي:


حيث يعبر الجزء WEBAPP:PORT عن تطبيق الويب Web Application الذي يستضيف الـ SSP (Shared Service Provider). وبعد تنفيذ هذه الخطوات يجب تنفيذ سحب كامل للبيانات Full Crawling كما في الشكل التالي:



وفي هذه المرحلة يتم جلب كافة البيانات المطلوبة لكن وأثناء عملي والذي يبدو روتيني على هذه الإعدادات ظهر الخطأ التالي:


Access is denied. Check that the Default Content Access Account has access to this content, or add a crawl rule to crawl this content. (The item was deleted because it was either not found or the crawler was denied access to it.)

وبعد بحث وجدت الحل وهو وضع قيمة في مسجل النظام Windows Registry:
  1. اضغط قائمة ابدأ واختر تشغيل أو Windows + R.

  2. اكتب regedit وبعدها اضغط Enter.

  3. افتح المسار التالي:HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Lsa

  4. أنشئ قيمة جديدة من النوع DWORD وسمها DisableLoopbackCheck.

  5. أسند القيمة 1 لـ DisableLoopbackCheck.

بعد تنفيذ الخطوات السابقة أعد تشغيل عملية سحب البيانات Start Full Crawling.

البيئة التي ظهر عليها هذا الخطأ هي:

  • Windows Server 2003 + Last Updates

  • Microsoft Office SharePoint 2007

  • إعدادات البروكسي متوفرة كما يلي:



الكاتب: إسماعيل عنجريني

الأحد، 22 فبراير 2009

إخفاء فاصل العناصر في القائمة العلوية عند استخدام العنصر asp:Menu في ASP.NET

لا شك أن جميع مبرمجي المواقع الذين يستخدمون تقنية ASP.NET يستخدمون العنصر asp:Menu وذلك لعرض قائمة علوية أو جانبية إما بشكل ثابت Static Items أو من الملف web.sitemap حيث يستطيع المبرمج كتابة هيكلية القائمة بشكل كامل وإجراء الإعدادات اللازمة لعرضها باستخدام العنصر asp:Menu, لكن هناك مشكلة بسيطة تظهر عند استخدام هذا العنصر لعرض القائمة العلوية وهي ظهور فاصل إضافي الذي يفصل بين عناصر القائمة العلوية كما في الشكل التالي:




طبعاً بحثت عن أسهل حل وأقله تكلفة على الأداء (قد يكون هناك حل آخر أفضل وأسهل من الحل المطروح), وهذا الحل يتضمن استخدام شيفرة JavaScript وذلك كما يلي:



var sepImages = document.images;
var lastImage = null;
for (i = 0; i < sepImages.length; i++)
{
if (sepImages[i].src.indexOf('YOUR_SEPARATOR_IMAGE_NAME') >= 0)
{
lastImageId = sepImages[i];
}
}
lastImageId.style.display = 'none';



  • YOUR_SEPARATOR_IMAGE_NAME: اسم الصورة التي تمثل صورة الفاصل بين عناصر القائمة.

الجمعة، 20 فبراير 2009

نظرة عامة على بعض ميزات C# 3.5 الجديدة - 1

  1. نظرة عامة على بعض ميزات C# 3.5 الجديدة - 1
  2. المناهج الإضافية Extension Methods


المتحولات المحلية المعرفة ضمنياً Implicitly Typed Local Variables

عند التصريح عن المتحولات المعرفة ضمنياً فإن نوع المتحول المحلي يُستنتج من التعبير الذي استخدم لتهيئة قيمة المتحول, ويكون هذا عندما يتم استخدام النوع var كنوع للمتحول ولا يوجد نوع ضمن المجال الذي عُرف فيه المتحول له الاسم var, مثال:



var i = 5;
var s = "Hello";
var d = 1.0;
var numbers = new int[] { 1, 2, 3 };
var orders = new Dictionary();


التصريح الضمني عن المتحولات أعلاه يطابق تماماً التصريح عن المتحولات بشكل مباشر:


int i = 5;
string s = "Hello";
double d = 1.0;
int[] numbers = new int[] { 1, 2, 3 };
Dictionary orders = new Dictionary();



طبعاً مع الأخذ بالاعتبار بأن التصريح الضمني عن المتحولات يخضع للقيود التالية:


  • التصريح يجب أن يتضمن عملية تهيئة للمتحول المصرح عنه

  • تهيئة المتحول يجب أن تتم باستخدام تعبير Expression

  • التعبير المُستخدم لتهيئة المتحول يجب أن تكون نتيجته نوع في زمن الترجمة compile-time type ولا يمكن أن تكون قيمة التعبير null

  • لا يمكن التصريح عن متحول ضمني لأكثر من مرة واحدة

  • التعبير المُستخدم لتهيئة المتحول لا يمكن أن يحتوي على مرجع للمتحول نفسه



الأمثلة التالية تعبر عن عمليات تصريح عن متحولات ضمنية غير صحيحة:


var x; // Error, no initializer to infer type from
var y = { 1, 2, 3 }; // Error, collection initializer not permitted
var z = null; // Error, null type not permitted
var u = x => x + 1; // Error, lambda expressions do not have a type
var v = v++; // Error, initializer cannot refer to variable itself



في حال استخدام النوع var للتصريح عن متحول ضمني ويوجد نوع class, structure … اسمه var في نفس المجال عندها يتم استخدام النوع var الثاني. وبما أن طريقة التصريح عن أسماء الأنواع يبدأ بحرف كبير فغالباً لن يصدف وجود مثل هذه الحالة.


استخدام for-initializer لعبارة for و resource-acquisition لعبارة using يعتبر تصريحاً ضمنياً عن المتحولات, وأيضاً المتحول الذي يستخدم في عبارة foreach, في
هذه الحالة فإن نوع المتحول يكون نفس نوع عناصر المجموعة التي يتم سردها باستخدام حلقة foreach:


int[] numbers = { 1, 3, 5, 7, 9 };
foreach (var n in numbers)
{
Console.WriteLine(n);
}


نوع المتحول n هو int وهو نفس نوع عناصر المصفوفة numbers.


مترجم بتصرف عن مقالة من موقع http://www.microsoft.com

الخميس، 19 فبراير 2009

التصميم من وجهة نظرة مطور - الجزء الثاني

افتراضات ونواقص
لكل مصمم رسومي طريقته الخاصة في إخراج أفضل تصميم وإبرازه بالطريقة الأمثل فنراه يرتب الصفحة الرئيسية للموقع والتي هي الشغل الشاغل لكل مصمم وللأسف يتناسون الصفحات الداخلية للموقع, المهم أن المصمم يضع كل فنه وقوته في الصفحة الرئيسية فترى الألوان متناثرة على الصفحة بشكل رائع ومرتب جداً, أما الصور فهي موضوعة بطريقة فنية احترافية بما يحقق التصميم الأفضل. إذا ماعلافة ماسبق بعنوان هذا القسم –افتراضات ونواقص-, سأبين فيما يلي العلاقة وماذا تعني هذه الافتراضات وماهي النواقص
الافترضات
المقصود بالافتراضات هنا وفي موضوعنا بالذات هو أن المصمم يفترض بأن مايصممه سيتم تطبيقه بنسبة 100% بدون أي تغيير أو حتى احتمال للخطأ سواء من قبل المطور, مدير الموقع ومدخل البيانات وطبعاً هنا لا نقصد بالأخطاء هي مايؤدي إلى فشل في التنفيذ وإنما مايؤدي إلى تغيير نسبي في التصميم سواء من ناحية الصور أو الألوان أو طريقة ترتيب العناصر على الصفحة. الافتراضات المسبقة للمصمم لها آثار قد تكون إيجابية وقد تكون سلبية على الموقع والنتيجة النهائية للموقع وهي على مستويات ثلاثة:
مستوى التطوير
يعمد المصمم أحياناً في سبيل إخراج أفضل تصميم إلى اختراع تصاميم معقدة وأفكار تصميمية ذات طابع خيالي تجعل مهمة التطوير وتطبيق التصميم على الموقع مهمة صعبة للغاية مما ينعكس سلباً إما على سرعة التطوير أو يعمد المطورون إلى اختصار بعض أفكار التصميم إما لتسريع عملية التطوير أو لأن المطور وصل إلى طريق مسدود وعجز عن تطبيق التصميم كما هو, وطبعاً لا ننسى النواحي الإيجابية والتي تتركز في تحسين إمكانيات المطور في سعيه إلى تطبيق أفكار التصميم المعقدة والتي تدفع المطور إلى استخدام أدوات غير تقليدية في البرمجة وتطوير المواقع.
مستوى إدارة الموقع وإدخال البيانات
لا يخفى على أحد أن مرحلة مابعد البرمجة وانتهاء تنفيذ وبرمجة الموقع تأتي مرحلة إدارة الموقع وتغذيته بالمعلومات والصور والنصوص وغيرها من العناصر التي تشكل الوجه الآخر لأي موقع وهو فن إدخال المعلومات وعرضها بطريقة تسهل على المتصفح الوصول إلى المعلومة بأسرع وأسهل الطرق, أما علاقة خيال المصممين بإدارة محتوى الموقع فهي علاقة وثيقة وتتأثر الثانية بالأولى بشكل كبير, لذلك يجب اعتبار مهمة إدخال البيانات من المهام الأساسية التي تكمل عملية تطوير الموقع أو البوابة الإلكترونية لذلك يجب اختيار الشخص المناسب لهذه العملية.
النواقص
معظم المصممين أياً كان مستواهم يغفلون عن نقاط هامة في تصميم المواقع والتي هي نواقص تضطر المطورين إلى تداركها إما من تصاميم سابقة أو من خلال خبراتهم المتراكمة من العمل على تطوير المواقع والبوابات الإلكترونية, ومن هذه النواقص:
شعار الموقع
من المؤكد أن 99% من المواقع الإلكترونية تحتوي على شعار للموقع غالباً مايظهر في ترويسة الموقع, ولكن ما أقصده بشعار الموقع هنا هو أيقونة صغيرة من النوع ico ذات أبعاد 16 * 16 أو 32 * 32 تظهر كما في الشكل التالي:
وهذه خاصية يدعمها معظم المتصفحات IE, Firefox, Opera, Safari وغيرها وتسمى favicon وتمسى أيضاً أيقونة الموقع website icon أو ولمزيد من التفاصيل عن هذه الميز يمكن مراجعة ويكيبيديا.
ويمكن إظهار هذه الأيقونة في موقعك باستخدام الشيفرة التالية:

<link href="/favicon.ico" rel="shortcut icon">


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

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

الأحد، 15 فبراير 2009

التصميم من وجهة نظرة مطور - الجزء الأول

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


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




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




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




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


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


وأيضاً الشكل التالي هو مثال آخر عن القائمة الجانبية:




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


مسار خريطة الموقع

أو ما يسمى بـ Bread Crumb وهو عبارة عن طريقة معتمدة في معظم المواقع لتبين لزائر الموقع مكان وجوده مع تقديم إمكانية التصفح العكسي بحيث يستطيع الزائر العودة إلى الصفحة التي كان بها قبل الصفحة الحالية, ويظهر بالشكل التالي:




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

- لا يظهر هذا العنصر أبداً في الصفحة الرئيسية للموقع.

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




الصفحات الداخلية
معظم مصممي المواقع حتى المحترفين منهم يهملون تصميم الصفحات الداخلية ويركزون كل جهودهم على الصفحة الرئيسية للموقع والتي لا شك يجب أن تظهر بأفضل شكل لأنها المدخل الأهم إلى باقي صفحات الموقع, لكن لا شك أيضاً بأن الصفحات الداخلية للموقع بنفس أهمية الصفحة الرئيسية لأنها تشكل الجزء الأكبر من الموقع, لذلك يجب إرفاق تصميم للصفحات الداخلية مع التصميم الكلي للموقع وإلا يعتبر عمل المصمم غير مكتمل ويجب التأكيد على إعادة طلب تصميم الصفحات الداخلية. ومن أهم النقاط التي يجب مراعاتها أثناء تصميم الصفحات الداخلية هي:
- عادة تظهر عناصر أخرى في الصفحات الداخلية لم تكون موجودة في الصفحة الرئيسية ومن أبرزها القائمة الجانبية أو القائمة العلوية حيث تظهر عليها روابط مختلفة تسهل على زائر الموقع عملية التصفح.
- إحاطة بيانات الصفحة ضمن قالب مصمم بشكل بسيط حيث يتم وضع العنوان ضمن ترويسة القالب كما في الشكل التالي:
عرض البياناتالمقصود بعرض البيانات هو طريقة عرض النصوص والصور والروابط ضمن صفحات الموقع وكذلك ألوان النصوص والروابط وأحجام الصور وأنواع الخطوط المستخدمة وأحجامها والأيقونات ومدى توافقها مع طبيعة الموقع والرسومات المستخدمة فيه.
روابط الموقع
لا شك بأن أكثر مكونات أي موقع هي الروابط Links التي تسمح للزائر بالتنقل من صفحة إلى أخرى داخل الموقع أو حتى الانتقال إلى مواقع أخرى, وهذه الروابط قد تكون عبارة عن نص قابل للنقر أو صورة يمكن النقر عليها. وللرابط 3 ألوان لثلاث حالات:
- لون الرابط الذي يظهر على الصفحة.- لون الرابط عندما يضع المستخدم مؤشر الفأرة فوقه, حيث يتغير لون النص ويظهر خط تحت الرابط.
- لون الرابط الذي تمت زيارته من قبل المتصفح, أي في حال أن زائر الموقع ضغط على أحد روابط الموقع فإن الرابط يتغير لونه.صحيح بأن مسألة ألوان روابط الموقع قد ينظر إليها البعض على أنها مسألة بسيطة لكنها في حقيقة الأمر من الأمور الهامة التي تميز المواقع التي تم الاعتناء بتصميمها والانتباه إلى أدق التفاصيل في بنية وتصميم الموقع, كما تساعد الزائر وتسهل عليه عملية تصفح الموقع.وفي حالة أن الرابط كان عبارة عن صورة يمكن النقر عليها لفتح صفحة أخرى عندها يفضل إما أن تكون الصورة تشرح نفسها وذلك بوجود نص مكتوب عليها مثل (اضغط هنا, المزيد ...) أو يجب على المطور كتابة تلميح يظهر للمستخدم عند وضع مؤشر الفأرة فوق الرابط وأيضاً هذا ينطبق على الرابط النصي أيضاً.
أنواع الخطوط المستخدمة
وأحجامهالاشك بأن الخطوط في أي موقع تعتبر من الأمور الأساسية المكونة للموقع وأسماء الخطوط وأحجامها تلعب دوراً هاماً في إظهار الموقع بشكل جيد أو بشكل سيئ وطبعاً يعتمد اختيار اسم الخط وحجمه على النص وطبيعة النص (عنوان – رابط – مقطع نصي ...) كما يعتمد على اللغة المستخدمة (عربي – انجليزي ...) ولعل أشهر أمساء الخطوط المستخدمة هي:
- Tahoma بحجم 12 بيكسل أو 9 نقاط, حيث يستخدم هذا الخط للغة العربية ويعتبر من أجملها في حال استخدم بحجوم صغيرة, كما أنه من الخطوط المتوفرة على جميع الأنظمة بشكل افتراضي لذلك فإن أي مستخدم يستطيع تصفح الموقع الذي يستخدم خط Tahoma (تاهوما) بدون الاضطرار إلى تحميل الخط على جهازه.
- Verdana بحجم 12 بيكسل أو 9 نقاط, حيث يستخدم هذا الخط للغة الانجليزية ويعتبر من أجملها في حال استخدم بحجوم صغيرة, كما أنه من الخطوط المتوفرة على جميع الأنظمة بشكل افتراضي لذلك فإن أي مستخدم يستطيع تصفح الموقع الذي يستخدم خط Verdana بدون الاضطرار إلى تحميل الخط على جهازه.
ولا شك بأنه توجد أسماء خطوط أخرى مناسبة لللاستخدام في المواقع لكنني على الأقل أفضل استخدام الخطين السابقين بأحجام مختلفة. وبما يتعلق بالخطوط المستخدمة في الموقع أعتقد أنه يجب عدم الإكثار من أسماء الخطوط في الموقع الواحد والاكتفاء باسمين أو ثلاثة على الأكثر وذلك للحفاظ على وحدة وتكامل نصوص الموقع, كما يجب الأخذ بعين الاعتبار استخدام نفس الخط للعناصر التي تنتمي لنوع واحد مثل استخدام نفس الخط للروابط, العناوين, والفقرات النصية (كنصوص الأخبار – الإعلانات ...).
طبعاً وأثناء حديثنا عن الخطوط يجب ألا ننسى لون الخط المستخدم الذي أيضاً يلعب دوراً هاماً جداً في المظهر الرسومي للموقع, حيث يجب الابتعاد قدر الإمكان عن الألوان الفاقعة مثل الأصفر والأحمر وغيرها كما يجب عدم استخدام الألوان الباهتة التي تصعب رؤيتها أو استخدامها على خلفية فاتحة مثل الأبيض على خلفية رمادية.الصورلا يوجد موقع لا يوجد فيه سواء صور صغير أم كبيرة, صورة تدخل ضمن التصميم الرسومي أم محتويات الموقع كصور الأخبار, الإعلانات, الصور التي تكون على شكل رابط, أو الصور التي قد توجد في معرض للصور في الموقع, أو حتى في محتوى آخر المهم أن 99.99% من المواقع توجد فيها صورة واحدة على الأقل, ونوع الصور الموجودة في الموقع تختلف باختلاف وظيفتها ومكانها والتصميم الذي يجب أن تظهره. وأشهر 3 أنواع هي GIF, JPEG, PNG إن لم تكن الأنواع الوحيدة المستخدمة في المواقع (على حد علمي على الأقل). وكما ذكرنا آنفاً فإن نوع الصورة المستخدمة يختلف باختلاف الوظيفة التي تؤديها. ويمكن تقسيمها كما يلي:
- GIF: هذا النوع من الصور يدعم 256 لون فقط.
- JPEG: يدعم أكثر من 16 مليون لون. ويستخدم لعرض الصور الضوئية (صور وجوه – أشخاص ...), الخلفيات, والصور التي تحتوي على أشكال وألوان معقدة.
- PNG: تستخدم لعرض باقي أنواع الصور ومايميزه هو دعمه للشفافية, أي أن الصورة من النوع PNG يمكن أن تعرض فوق صورة ثانية بحيث تظهر الصورة الثانية وكأن الصورة شفافة.
طبعاً لا يكفي استخدام النوع المناسب للصورة وحسب وإنما يجب معالجة الصورة بحيث يكون حجمها أصغر مايمكن وذلك باستخدام أي برنامج تراه مناسباً لضغط الصورة بحيث تحصل على أقل حجم ممكن للصورة بدون التأثير على دقة وجودة الصورة. وقد لاحظت من خلال عملي الطويل مع البوابات الإلكترونية والمواقع الضخمة أنه ليس من الضروري إغراق الموقع بالصور حتى يظهر بشكل جذاب وملفت للنظر وإنما تناسق الألوان وطريقة توزيع النصوص والروابط ضمن أجزاء الموقع بشكل عام وكل صفحة بشكل خاص.