البحث في الموقع

لن يطول الأمر قبل أن تحتاج إلى وسيلة لجمع المعلومات من مستخدميك، ولهذا سنبدأ حديثنا اليوم بالنّماذج (Forms). فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم (هذا الدرس) استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم النماذج سيتطلّب تصميم النّماذج وقتًا طويلًا، معظمه في الاهتمام بقابليّة استخدامها، فعادةً ما تسبّب النّماذج حيرة المُستخدم أو أنّه يُخطئ في استخدامها أو لا يستخدمها نهائيًّا، ومع ذلك تبقى النّماذج من أكثر أجزاء الموقع قيمة. إن لم تكن النّماذج أكثر أجزاء موقعك قيمة، فلم تستخدمها؟ هل نسيت أنّها تسبّب حيرة المُستخدم أو خطأه أو أنّه لا يستخدمها؟ صفحة واحدة طويلة أم عدة صفحات قصيرة؟ من أكثر الأسئلة الّتي يُكرّرها المُصمّمون والمُسوّقون: ما الحدّ الّذي تُعتبر بعده النّماذج طويلة جدًّا؟ كقاعدة عامّة حاول جعل النّماذج أقصر ما يمكن، ولكن لا تتردّد في تقسيمها إلى صفحات إن كان ذلك منطقيًّا، أو إن احتجت إلى حفظ المعلومات في خطوات، إن كنت تتوقّع أن يغادر المُستخدم الموقع أثناء ملء النّموذج. الأهمّ من ذلك أن يبدو الحقل بسيطًا، اجعل الأسئلة المرتبطة متقاربة، استبعد الأسئلة الّتي لا تحتاجها حقًّا، واستخدم بالضّبط عدد الصّفحات الذي تحتاجه (لا أكثر ولا أقل). أنواع الحقول غرض النّموذج هو الحصول على المعلومات من المستخدم، وهناك عدّة طرق لجمع هذه المعلومات، فاستخدم نوع الحقل الّذي يُعطيك أكثر المعلومات فائدة، سواء كان ذلك حقلًا نصيًّا عاديًّا أم علامة مُنزلقة (slider). لنقل أنّك تريد للمستخدم اختيار أنواعه المُفضّلة من الماعز (!)، يصلح هنا استخدام مربّعات الاختيار الواحد (Radio Buttons) أو المُتعدّد (Check Boxes)، فإذا كنت تريد إجابة أكثر اكتمالًا، فاختر الثّانية، وإلّا فاختر الأولى لأنها تُعطي نتيجة أكثر انتقائيّة. مسميات الحقول وتعليمات استخدام النموذج سنبدأ الحديث عن وظيفة المُسمّيات (labels)، فوظيفتها هي شرح ما يجب فعله في كلّ حقل في النّموذج، وعليك أن تجعلها قصيرة وواضحة وسهلة القراءة، وقريبة من الحقل المعنيّ، وهذا كفيل بحلّ 99% من مشاكل الحقول. قد تحتاج أحيانًا إلى إضافة تعليمات عن السؤال إن كان مُعقّدًا أو غير تقليديّ، أضف هنا شرحًا قصيرًا قرب الحقل إن كان بضع كلمات فقط، أو أضفه إلى جانب النّموذج بدلًا من كونه داخله إن كان أطول من ذلك، لكي لا يقطع سير عمليّة ملء الحقل على المُستخدمين الّذين يعرفون ما وظيفة الحقل. أنصحك بقراءة الكتاب Web Form Design لمؤلّفه Luke Wroblewski. التعامل مع أخطاء المستخدم ومنعها كثيرًا ما يُخطئ المُستخدمون في ملء النّماذج، ووظيفتنا منع ذلك ما أمكن، والتّعامل مع ما لا يمكن منعه بمرونة. يمكن منع الخطأ بجعل الحقول "ذكيّة"، فلو كان الحقل مُخصّصًا لرقم الهاتف، فاجعله ذكيًا بحيث يتعامل مع تنسيق رقم الهاتف في البلد المعنيّ (هذا يتطلّب تعاون المُطوّرين). يمكن أيضًا تفادي الأخطاء بإضافة بعض الأمثلة على تنسيق المعلومات المطلوب ضمن الحقل نفسه أو ضمن التّعليمات المُرافقة. عندما ينسى المُستخدم ملء حقل ما أو يخطئ، ينبغي عليك تنبيهه، وذلك بعرض علامة X مثلًا بجواره إن كان خاطئًا أو علامة "صح" إن كان صحيحًا، وهذا ما يُسمّى التّعامل مع الأخطاء في موضعها (inline error handling). تُستخدم هذه التقنيّة أيضًا في حقول كلمات المرور لبيان مدى قوّتها أثناء إدخالها. لا تستخدم هذه التّقنيّة إن لم يكن بإمكانك التّحقق من صحة البيانات، كما في حقل الاسم الكامل. عندما ينقر المُستخدم "التّالي" أو "تمّ"، تحقّق من كامل النّموذج بحثًا عن الأسئلة الّتي نسيها أو أخطأ فيها، اعرض المُشكلة بوضوح شديد وبيّن له سببها. نصيحة: تأكّد من أنّ بإمكان المُستخدم رؤية الخطأ من أسفل النّموذج، فلو كان عليه أن يُمرّر لأعلى ليُلاحظ الخطأ، فلن يفعل! السرعة مقابل الأخطاء هذه النّقطة متقدّمة بعض الشيء، لكنّها مفيدة للغاية. إذا كنت تطرح أسئلة تقليديّة على المُستخدم مثل اسمه وعنوان بريده الإلكترونيّ، فاجعل مُسمّيات الحقول في أعلى ويمين الحقل، فهذا يُسرّع إدخال المعلومات، لأنّه يُبقي كلّ شيء على محور التّفاعل. أمّا إن كانت الأسئلة مُعقّدة أو غير شائعة، فاجعل المُسمّيات على يمين كل حقل في الصّف ذاته، فهذا يجعل المُستخدم يتمهّل قليلًا في إدخال البيانات، ويخفّض احتمال الخطأ. اجعل زرّ "تمّ" على يسار (على يمين، إذا كان النموذج بالعربية) محور التّفاعل . إن كان الحقل يؤدّي إلى حذف شيء ما أو فقد بيانات قد تكون مهمّة، فاجعله على يمينه (أو على يساره، إن كان النّموذج بالعربية)، بحيث يتوقّف النّاس بحثًا عنه بدل نقره بطريقة لا شعورّية. الدعوات إلى الإجراء والتعليمات والمسميات هناك 4 مواضع يمكن أن يتدخّل فيها مُصمّم تجربة المُستخدم ليُبدي رأيه في الجمل المُستخدمة للتّواصل مع المُستخدمين، وأمّا في ما سوى ذلك، فمن الأفضل أن يُترك هذا الشأن لكتُّاب المُحتوى: الدّعوات إلى الإجراء (calls to action) التعليمات (instructions) المُسمّيات (labels) الشّروح الطّويلة الّتي تهدف لإقناع المُستخدم سنشرح في هذا الدّرس النّقاط الثلاث الأولى، أمّا الأخيرة فستكون في درس منفصل. الدعوات إلى الإجراء (Calls-to-Action) ويُقصد بها العناوين والنّصوص الّتي تكون بجانب الأزرار، وتدعو المُستخدم لفعل شيء ما، مثل "نزّل التّطبيق الآن!" أو "احصل على المميّزات المدفوعة مجّانًا!" أو ما شابهها، وقد يُفاجئك مدى التغيير الّذي تُحدثه العبارات المُتقنة الأسلوب في حالات كهذه. المُعادلة العامّة لعبارة ترويج جيّدة: فعل + فائدة + أجل/مكان قريب الفعل: ما تريد من المُستخدم فعله. الفائدة: ما سيحصل عليه المُستخدم (إن لم يفي الفعل بالمعنى) الأجل/المكان القريب: مدى زمنيّ مثل "الآن" أو مكان مثل "هنا"، الكلمة "مجانًا" قد تُعطي إحساسًا بالعجلة إن كان ذلك يُناسبك. التعليمات (Instructions) إن لم يكن واضحًا تمامًا ما يجب على المُستخدم فعله (وحتى وإن كان واضحًا) فقد ترغب بمساعدته، تحدّثنا في فقرات سابقة عن النّماذج وكيفيّة كتابة التّعليمات، فهي أكثر العناصر احتياجًا لها. يجب أن تكون التّعليمات قصيرة ومباشرة وحرفيّة، لا داعي لاستخدام مُصطلحات جزلة، أو كلمات تقنيّة، لا داعي للتّذاكي أو الاستهزاء أو المُزاح. أخبر المستخدم ما عليه فعله بالضّبط بأبسط الكلمات والعبارات، حدّثه وكأنّه طفل ذكيّ، أو كأنّه حديث عهد باللّغة، لا أقصد أن تكون العبارة غبيّة، بل واضحة. مثال عن جملة سيئة: "حلّق بفأرتك فوق الزّر الأصفر فور انتهائك من العمل!" مثال عن جملة سيّئة أيضًا: "كل المُدخلات في هذه المنطقة هي بيانات مطلوبة ويجب أن تُرسل بنجاح لبدء عمليّة إنشاء الحساب." مثال عن جملة غبيّة: "عليك أن تفخر بنفسك! فأنت بارعٌ في ملء النّماذج! حالما تنتهي من ملء هذه النّماذج، فعليك المتابعة إلى الزّر الأصفر أدناه ونقره، كدت تصل أيّها البطل!" مثال عن جملة جيّدة: "أجب على كلّ الأسئلة ثمّ انقر على الزّر الأصفر المُسمّى تمّ في نهاية هذه الصّفحة". المسميات (Labels) قد يكون مُغريًا جدًّا جعل المُسمّيات مُميّزة أو ذكيّة، لكن عليك أن تقاوم هذا الإغراء دومًا. استخدم الشّكل الأكثر شيوعًا وبساطة وسهولة من المُسمّى، لو كان المُسمّى يؤدّي إلى أكثر من نوع من الإجابات، فهو غير واضح. مثال عن مُسمّى سيّئ: "حيث يهفو القلب..." مثال عن مُسمّى أقل سوءًا: "مكان معيشتك" مثال عن مُسمّى أفضل: "العنوان" مثال عن المُسمّى الأفضل: "عنوان المنزل" تنطبق هذه القواعد على الأزرار أيضًا، وهو شيء يتجاهله كثيرٌ من المُصمّمين. إن تجاهلت العناوين والتّعليمات، هل يمكنك فهم وظيفة الأزرار؟ إن لم يكن الحال كذلك، فعليك تحسين المُسمّيات. أمثلة عن مُسمّيات سيّئة للأزرار: "نعم" و"موافق" أمثلة عن مُسمّيات جيّدة للأزرار: "حذف الحساب" و"حفظ التّغييرات" قد يبدو الحديث سهلًا، لكنّ الحياة العملية ستضعك في موقف ستضطّر فيه أن تقول لا للزّبون أو زملاء العمل عندما يطلبون جعل العبارات "أكثر روعة"! أثبت حجّتك باختبارات أ/ب إن اضطرت، ولكن لا تتراجع عن رأيك، فأحيانًا ما يحتاجه المستخدم هو عبارات بسيطة وواضحة، وليست "رائعة ومميّزة". الأزرار الرئيسية والثانوية كقاعدة عامّة ستحتاج نوعين من الأزرار فقط، لأنّ معظم الأفعال تقع في فئتين: أفعال رئيسيّة تخدم هدفك المطلوب أفعال ثانويّة لا تخدم الهدف الأزرار الرئيسية بعض الأفعال المُتاحة للمُستخدم تكون "مُنتجَة"، كالتّسجيل في الموقع أو الشّراء أو إرسال محتوى أو حفظه أو مُشاركته... فهي تُنتج أشياء لم تُوجد من قبل، وهذه نُسمّيها الأفعال الرئيسيّة (primary actions)، وهي ما نريد للمُستخدم فعله أكثر ما يمكن. يجب أن تكون الأزرار الّتي تؤدّي إلى أفعال رئيسيّة ظاهرة بوضوح، ويمكن تحقيق ذلك بتطبيق مبادئ التّصميم المرئيّ الّتي تعلّمناها في الدّروس السّابقة. تنسيق الأزرار الرئيسيّة: تباين عالٍ بالنّسبة للخلفيّة (لون أو درجة لونيّة مختلفة جدًّا) موضع الأزرار الرئيسيّة في الواجهة: على محور التّفاعل أو قربه بحيث يلاحظها المُستخدم تلقائيًّا. الأزرار الثانوية بعض الأفعال المُتاحة للمُستخدم تكون غير مُنتجة، كالإلغاء أو التخطّي، أو تفريغ النّموذج أو رفض عرضٍ ما وهكذا... فهي توقف أو تمنع إنشاء أشياء جديدة، وهذه نُسمّيها الأفعال الثّانوية، والّتي لا نريد للمستخدم أن يؤدّيها ولكنّنا نوفّرها من باب قابليّة الاستخدام. يجب أن تكون الأزرار الّتي تؤدّي إلى أفعال ثانوية أقل ظهورًا، لمنع النّقر عليها لا شعوريًّا. تنسيق الأزرار الثّانوية: تباين مُنخفض بالنّسبة للخلفيّة (لون أو درجة لونيّة متشابهة) موضع الأزرار الثّانويّة في الواجهة: بعيدة عن محور التفاعل بحيث لا يلاحظها المُستخدم إلّا إن كان يبحث عنها. استثناء: أهمية الفعل قد تكون بعض الأفعال الثّانويّة مهمّة، كحذف الحساب، وهذه يجب أن تكون ذات تنسيق رئيسيّ ولكن في موضع ثانويّ في الواجهة، وذلك لأنّنا نريد للمُستخدم أن يجدها ولكن نريد أيضًا أن يفكّر في نتائجها قبل تنفيذها. من المفيد أيضًا إعطاء هذه الأزرار لونًا يُشير إلى أهمّيتها (أحمر أو برتقاليّ أو أصفر...). الأزرار الخاصة قد يكون لديك نوع مُعيّن من الأزرار فريدٌ ضمن سائر تطبيقك أو موقعك، ويتطلّب انتباها خاصًّا، صمّم هذا الزّر بشكل خاصّ بحيث يبرز في الواجهة (الخروج عن النّمط)، مثلًا: زرّ "الإضافة إلى سلّة المشتريات" في Amazon، أو زرّ "Pin it" في Pinterest أو زرّ الإعجاب في فيسبوك. سنبدأ في الدّرس القادم الحديث عن الجوانب النّفسيّة لتجربة المُستخدم. ترجمة بتصرّف للدّروس Forms و Calls-to-Action, Instructions & Labels وPrimary & Secondary Buttons من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 كيف تصمّم دعوة إلى إجراء CTA لتحويل زبائن متجرك الإلكتروني كيف تصبح مرشحا مميزا لوظيفة تجربة المستخدم تلك -الجزء الأول- تجربتنا في إنشاء أداة تسجل تفاعلات المستخدم أفضل أطر تصميم المواد لتصميم تطبيقات الويب الحديثة الخاصة بواجهات المستخدم وتجربة المستخدم

قمنا في الدرس السابق من سلسلة "مدخل إلى ASP.NET" بالتعرف على عناصر التحكم الأساسية المضمنة في منصة العمل ASP.NET. في هذا الدرس سنتعرف على كيفية إرسال بيانات النماذج إلى الخادوم بواسطة أدوات الأزرار المتنوعة. تزودنا منصة عمل ASP.Net بثلاث أدوات لإرسال بيانات النموذج إلى الخادوم وهي Button ،LinkButton ،ImageButton وهم يؤدون نفس الوظيفة ولكن لكل منهم مظهر وبعض الخصائص التي تميزه عن غيره. استخدام أداة التحكم Button تقوم هذه الأداة عند النقر عليها بإرسال بيانات الصفحة إلى الخادوم لتتم معالجتها كما يتم تنفيذ الكود الموجود ضمن الحدث Click الخاص بهذه الأداة، يقوم المثال التالي بعرض الوقت الحالي في أداة Label عند النقر على الزر Button، أنشئ صفحة جديدة أضف لها Button وLabel اضغط على الزر مرتين واكتب الكود التالي: كود #C protected void Button1_Click(object sender، EventArgs e) { Label1.Text = DateTime.Now.ToString("T"); } كود VB Protected Sub Button1_Click(ByVal sender As Object، ByVal e As System.EventArgs) Handles Button1.Click Label1.Text = DateTime.Now.ToString("T") End Sub كود الصفحة كاملا ً: كود ASP.net <div> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> <br /> <asp:Label ID="Label1" runat="server" Text="" /> </div> لاحظ عند الضغط على الزر يتم إعادة تحميل الصفحة بالكامل حيث تم إرسالها للخادوم وقام بعملية المعالجة المطلوبة ثم أعادة النتيجة للمستخدم. خصائص أداة التحكم Button AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة. CommandArgument: تحديد متغير يتم إرساله إلى الحدث Command. CommandName: تحديد اسم الأمر الذي يتم إرساله إلى الحدث Command. Enabled: تفعيل أو إلغاء تفعيل هذه الأداة. OnClientClick: لتحديد كود يتم تنفيذه على جهاز المستخدم عند الضغط على الزر. PostBackUrl: للإنتقال إلى صفحة معينة بعد إرسال البيانات إلى الخادوم. TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab. Text: تحديد النص الذي يظهر على هذه الأداة. UseSubmitBehavior: تمكننا من استخدام الجافا سكربت لإرسال بيانات النموذج. أداة التحكم Button تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تدعم الحدثين: Click: يتم إطلاقه عند الضغط على الزر. Command: يتم إطلاقه عند الضغط على الزر، ويتم تمرير CommandArgument وCommandName إلى هذا الحدث. استخدام أداة التحكم LinkButton تؤدي نفس عمل الأداة Button ولكنها تختلف من حيث المظهر فهي تبدو كرابط وليس كزر وبالتالي يمكن تحديد صفحة للانتقال إليها عبر هذه الأداة، لنقم بتنفيذ نفس المثال السابق ولكن نستبدل الأداة Button بالأداة LinkButton، الكود الذي يتم تنفيذه عند الضغط على LinkButton: كود #C protected void LinkButton1_Click(object sender، EventArgs e) { Label1.Text = DateTime.Now.ToString("T"); } كود VB Protected Sub LinkButton1_Click(ByVal sender As Object، ByVal e As System.EventArgs) Handles LinkButton1.Click Label1.Text = DateTime.Now.ToString("T") End Sub كود الصفحة: كود ASP.net <div> <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">LinkButton</asp:LinkButton> <br /> <asp:Label ID="Label1" runat="server" Text="" /> </div> تقوم الأداة LinkButton وبشكل غير مرئي بتنفيذ كود جافا سكربت وعلى وجه التحديد يتم تنفيذ الطريقة doPostBack_ وهو المسؤول عن إرسال البيانات إلى الخادوم، في مثالنا السابق فإن الكود يبدو كالتالي: كود ASP.net <a id="LinkButton1" href="javascript:__doPostBack(‘LinkButton1’،’’)">Submit</a> خصائص أداة التحكم LinkButton AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة. CommandArgument: تحديد متغير يتم إرساله إلى الحدث Command. CommandName: تحديد اسم الأمر الذي يتم إرساله إلى الحدث Command. Enabled: تفعيل أو إلغاء تفعيل هذه الأداة. OnClientClick: لتحديد كود يتم تنفيذه على جهاز المستخدم عند الضغط على هذه الأداة. PostBackUrl: للإنتقال إلى صفحة معينة بعد إرسال البيانات إلى الخادوم. TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab. Text: تحديد النص الذي يظهر على هذه الأداة. أداة التحكم LinkButton تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تدعم الحدثين: Click: يتم إطلاقه عند الضغط على هذه الأداة. Command: يتم إطلاقه عند الضغط على الأداة، ويتم تمرير CommandArgument وCommandName إلى هذا الحدث. استخدام أداة التحكم HyperLink تعد هذه الأداة الطريقة الأكثر شيوعا ًوبساطة للتنقل بين الصفحات المختلفة، وعلى النقيض من الأداة LinkButton فهي لاتقوم بإرسال البيانات إلى السيرفر. خصائص أداة التحكم HyperLink: Enabled: تفعيل أو إلغاء تفعيل هذه الأداة. ImageUrl: لتحديد مسار واسم صورة ليتم عرضها كرابط. NavigateUrl: تحديد عنوان URL يتم الانتقال إليه عند الضغط على هذه الأداة. Text: تحديد النص الذي يظهر على هذه الأداة. Target: تمكننا من فتح صفحة الرابط في نافذة جديدة بالمستعرض. ملاحظة : لو تم تحديد قيم للخاصيتين Text و ImageUrl معا ً، عندئذ سيتم عرض الصورة لأن أولويتها أعلى ولن يتم عرض النص المحدد بالخاصية Text. مثال: أنشئ صفحة جديدة، أضف أداة HyperLink وحدد خصائصها كالتالي: كود ASP.net <div> <asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/img.png" NavigateUrl="~/Default14.aspx">Go to Page Defaul14 page </asp:HyperLink> </div> نفذ الصفحة السابقة ولاحظ عدم ظهور النص Go to Page Defaul14 page إنما ظهرت الصورة المحددة فقط. استخدام أداة التحكم ImageButton تؤدي نفس وظيفة الأداتين السابقتين حيث تقوم بإرسال بيانات النموذج إلى الخادوم وتظهر كصورة على صفحة الانترنت، لنتعرف بداية ًعلى خصائص هذه الأداة ثم نطبق مثال توضيحي. خصائص أداة التحكم ImageButton: AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة. AlternateText: نص بديل يتم عرضه في حال عدم عرض الصورة المحددة. DescriptionUrl: لتحديد رابط إلى صفحة تحتوي تفاصيل عن الصورة. CommandArgument: تحديد متغير يتم إرساله إلى الحدث Command. CommandName: تحديد اسم الأمر الذي يتم إرساله إلى الحدث Command. Enabled: تفعيل أو إلغاء تفعيل هذه الأداة. ImageAlign: تحديد موقع الصورة بالنسبة لأدوات html أخرى ويمكن أن تأخذ إحدى القيم التالية: AbsBottom ،AbsMiddle ،Baseline ،Bottom ،Left ،Middle ،NotSet، Right ،TextTop ،Top. ImageUrl: لتحديد مسار واسم الصورة التي سيتم عرضها. OnClientClick: لتحديد كود يتم تنفيذه على جهاز المستخدم عند الضغط على هذه الأداة. PostBackUrl: للإنتقال إلى صفحة معينة بعد إرسال البيانات إلى الخادوم. TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab. أداة التحكم ImageButton تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تدعم الحدثين: Click: يتم إطلاقه عند الضغط على هذه الأداة. Command: يتم إطلاقه عند الضغط على الأداة، ويتم تمرير CommandArgument وCommandName إلى هذا الحدث. مثال: سنقوم في المثال التالي بتحديد إحداثيات مكان ضغط المستخدم على الأداة ImageButton. أنشئ صفحة جديدة ضع فيها أداة ImageButton واجعلها تعرض صورة ما عبر الخاصية ImageUrl ثم أضف أداتي Label، اضغط على ImageButton مرتين واكتب الكود التالي: كود #C protected void ImageButton1_Click(object sender، ImageClickEventArgs e) { Label1.Text = "X = " + e.X.ToString(); Label2.Text = "Y = " + e.Y.ToString(); } كود VB Protected Sub ImageButton1_Click(ByVal sender As Object، ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click Label1.Text = "X = " + e.X.ToString() Label2.Text = "Y = " + e.Y.ToString() End Sub كود الصفحة: كود ASP.net <div> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/img.png" onclick="ImageButton1_Click" /> <br /> <asp:Label ID="Label1" runat="server" Text=""/> <asp:Label ID="Label2" runat="server" Text=""/> </div> ملاحظة: عند التعامل مع أي أداة تقوم بعرض الصور ينصح بشدة أن نستخدم الخاصية AlternateText لتقوم بعرض نص بديل فبعض المستخدمين يلغون خيار عرض الصور في المتصفح بهدف الحصول على سرعة أكبر في التصفح. إرسال البيانات عبر الصفحات بشكل افتراضي، عند الضغط على زر ما في الصفحة، يتم إرسالها إلى الخادوم ومعالجة البيانات ثم عرضها على نفس الصفحة، أي يحدث إعادة تحميل للصفحة ببيانات معدلة، الآن سنتعلم كيف نجعل الخادوم يعيدنا إلى صفحة أخرى لعرض النتائج بعد أن نضغط على زر ما في صفحة أولى. مثال: أنشئ صفحة جديدة سمها search.aspx أضف لها TextBox وButton، أعطي الخاصية PostBackUrl القيمة results.aspx وهي صفحة ثانية نقوم بإنشائها، هذه الخاصية كما رأينا سابقا تجعل الخادوم يعيد توجيه المتصفح إلى صفحة محددة عند الضغط على الزر، مانريده من مثالنا هذا أن يقوم المستخدم بإدخال نص ما في TextBox ثم الضغط على الزر ليقوم الخادوم بعرض نفس النص ولكن في صفحة أخرى، كود الصفحة search.aspx: كود ASP.net <div> <asp:TextBox ID="TxtSearch" runat="server"></asp:TextBox> <br /> <asp:Button ID="BtnSearch" runat="server" Text="search" PostBackUrl="~/results.aspx" /> </div> ننتقل الآن إلى الصفحة results.aspx ونضيف عليها فقط أداة Label لنعرض فيها النص المدخل في الصفحة الأولى حيث يكون الكود كالتالي: كود ASP.net <div> <asp:Label ID="LblSearch" runat="server" Text="" /> </div> وفي حدث تحميل الصفحة نكتب الكود التالي: كود #C protected void Page_Load(object sender، EventArgs e) { if (PreviousPage != null) { TextBox txtSearch = (TextBox)PreviousPage.FindControl("TxtSearch"); LblSearch.Text = String.Format("Search for: {0}"، txtSearch.Text); } } كود VB Protected Sub Page_Load(ByVal sender As Object، ByVal e As System.EventArgs) Handles Me.Load If PreviousPage IsNot Nothing Then Dim txtSearch As TextBox = DirectCast(PreviousPage.FindControl("TxtSearch")، TextBox) LblSearch.Text = [String].Format("Search for: {0}"، txtSearch.Text) End If End Sub تحليل الكود السابق: تستخدم الخاصية PreviousPage للحصول على مؤشر للصفحة السابقة التي سببت نقلنا إلى هذه الصفحة، الطريقة FindControl تعيد أداة تحكم محددة وبجميع خصائصها الحالية (ونحن نريد استرجاع قيمة الخاصية Text منها) المتغير الذي تم تمريره هو Id أداة التحكم المطلوبة، ننفذ الكود الصفحة search وندخل نص ما ثم نضغط على الزر لنرى آلية عمل الكود والخاصية PostBackUrl وكيف استطعنا الوصول لبيانات صفحة سابقة من صفحة تالية. ملاحظة: يوجد أساليب أكثر فاعلية لنقل البيانات بين صفحات الموقع مثل Cookies وSession وغيرهم وسنناقشهم بالتفصيل في دروس لاحقة إن شاء الله. تحديد الزر الإفتراضي تسمح هذه الخاصية يتحديد زر في الصفحة بحيث يتم تنفيذ الكود داخله بمجرد الضغط على مفتاح Enter من لوحة المفاتيح ودون الحاجة للضغط على الزر من خلال الماوس، تدعى هذه الخاصية defaultButton ويتم تحديدها كخاصية للنموذج. مثال: أنشئ صفحة جديدة، أضف عليها أداتي Button وأداة Label واحدة، في حدث النقر على الزر الأول اكتب الكود التالي: كود #C protected void Button1_Click(object sender، EventArgs e) { Label1.Text = "you click Button1 "; } كود VB Protected Sub Button1_Click(ByVal sender As Object، ByVal e As System.EventArgs) Handles Button1.Click Label1.Text = "you click Button1 " End Sub وفي حدث النقر على الزر الثاني: كود #C protected void Button2_Click(object sender، EventArgs e) { Label1.Text = "you click Button2 "; } Protected Sub Button2_Click(ByVal sender As Object، ByVal e As System.EventArgs) Handles Button2.Click Label1.Text = "you click Button2 " End Sub الآن نأتي إلى بيت القصيد وهي تحديد الخاصية defaultButton التابعة للفورم وإعطائها كقيمة أحد الزرين السابقين كما في الكود التالي: كود ASP.net <form id="form1" runat="server" defaultbutton="Button2"> <div> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> <br /> <asp:Button ID="Button2" runat="server" Text="Button" onclick="Button2_Click" /> <br /> <asp:Label ID="Label1" runat="server" Text=""></asp:Label> </div> </form> حيث تم تحديد Button2 كزر افتراضي، نفذ الصفحة واضغط على Enter لترى مايحدث، أعد تنفيذ المثال بعد تعديل الخاصية السابقة وجعلها تساوي القيمة Button1. ملاحظة: يمكن استخدام الخاصية defaultButton مع أداة التحكم Panel، سنتعرف على هذه الأداة بالتفصيل في دروس قادمة. معالجة الحدث Command أدوات التحكم Buttons بأنواعهم الثلاثة يدعمون الحدثين Click و Command كما رأينا سابقا ً، الفرق بين هذين الحدثين هو أنه عند العمل مع Command فبإمكاننا تمرير اسم أمر ما ومتغير للأمر أيضاً وهذه الأمور غير مدعومة مع الحدث Click. مثال توضيحي: أنشئ صفحة جديدة، أضف عليها أداتي Button وأداة Label واحدة، أضف للأداتين Button الخصائص onCommand ،CommandName ،CommandArgument وفق التالي: الخاصية القيمة الأداة Button1 onCommand Button_Command CommandName Colors CommandArgument Red الأداة Button2 onCommand Button_Command CommandName Colors CommandArgument Blue وبالتالي يصبح كود الصفحة: كود ASP.net <div> <asp:Button ID="Button1" runat="server" Text="Red" oncommand="Button_Command" CommandName="colors" CommandArgument="Red"/> <asp:Button ID="Button2" runat="server" Text="Blue" oncommand="Button_Command" CommandName="colors" CommandArgument="Blue"/> <asp:Label ID="Label1" runat="server" Text=""></asp:Label> </div> نفتح ملف الكود الخلفي Default.aspx.cs ونكتب فيه الكود التالي: كود #C protected void Button_Command(object sender، CommandEventArgs e) { if (e.CommandName == "colors") { switch (e.CommandArgument.ToString()) { case "Red": Label1.Text = "RED"; break; case "Blue": Label1.Text = "BLUE"; break; } } } كود VB Protected Sub Button_Command(ByVal sender As Object، ByVal e As CommandEventArgs) If e.CommandName = "colors" Then Select Case e.CommandArgument.ToString() Case "Red" Label1.Text = "RED" Exit Select Case "Blue" Label1.Text = "BLUE" Exit Select End Select End If End Sub لاحظ أن كلا الزرين يقوم باستدعاء نفس الكود Button_Commaen مع تحديد CommandName للقيمة colors والإختلاف الوحيد بينهما هو بالمتغير المرر حيث إن الزر الأول يرسل المتغير Red في حين أن الزر الثاني يرسل المتغير Blue، نفذ الصفحة لترى نتيجة العمل، إن العمل مع الحدث Command فعال عندما تؤدي مجموعة من الأزرار نفس الكود ولكن بمتغيرات مختلفة حيث يوفر علينا عناء إعادة كتابة الكود لو تم استخدام الحدث Click. قمنا في هذا الدرس بالتعرف على ثلاثة أدوات لإرسال بيانات النموذج إلى الخادوم وهي Button ،LinkButton ،ImageButton مع أمثلة لكل منها. سنتعرف في الدرس القادم على أداتين جديدتين لعرض الصور في ASP.NET.

تُتيح الروابط التشعبية وأزرار الإجراءات إمكانية الانتقال السريع إلى شريحة، ملف، برنامج، أو موقع بنقرة واحدة. وكذلك إمكانية عرض تلميحات منبثقة. سنتعلّم في هذا الدرس كيفية إدراج الروابط التشعبية للنصوص والعناصر، وكذلك كيفية إنشاء أزرار الإجراءات. الروابط التشعبية Hyperlinks لا بد من أنّك لاحظت عند عملك على إنشاء العروض التقديمية على بوربوينت أنّه عند كتابة عنوان موقع أو بريد إلكتروني، سيتحول بشكل تلقائي إلى رابط قابل للنقر وبلون مخصص. على سبيل المثال، سنقوم بكتابة رابط الأكاديمية في مربع نص فارغ: وعندما نقوم بمعاينة الشريحة بطريقة عرض الشرائح Slide Show وتمرير الفأرة فوق الرابط سنتمكن من النقر على الرابط والانتقال إلى صفحة الويب: عند النقر على الرابط سيتغير لونه لأنّه تحول إلى رابط مُتّبع followed hyperlink: تعتمد هذه الألوان على نسق theme الشرائح، وتتغير بتغيّرها. يمكننا تخصيص لون الرابط التشعبي والرابط المتّبع بالذهاب إلى تبويب تصميم Design ثم النقر على السهم في مجموعة: Variants > Color > Customize Colors نقوم باختيار الألوان المرغوبة لكلا الرابطين، ونحرص على أن تكون ألوان بارزة بالنسبة للون خلفية الشرائح، ثم ننقر على Save: أما لإضافة الروابط التشعبية يدويا للعناصر أو النصوص، نقوم بتحديد العنصر أو النص ونضغط على مفتاحي CTRL+K أو الذهاب إلى تبويب: إدراج Insert > ارتباط تشعبي Hyperlink في كلا الحالتين سيُفتح نفس مربع الحوار، ومنه يمكننا إنشاء ارتباط بملف موجود أو صفحة ويب موجودة Existing File or Web Page، بموضع داخل العرض التقديمي الحالي (كشريحة محددة مثلا) Place in This Document، بمستند جديد Create New Document، أو بعنوان بريد إلكتروني Email Address: في حالة الربط بعنوان بريد إلكتروني، عند النقر على الرابط سيُفتح برنامج البريد الإلكتروني الذي تستخدمه على جهازك، وسيقوم بإنشاء رسالة جديدة إلى العنوان الذي قمت بإدخاله، ويكون نص الرسالة فارغا لتتمكن أنت أو غيرك من المستخدمين من تحريره. وبذلك ستختصر عددا من خطوات إنشاء بريد إلكتروني. سنقوم في هذا المثال بربط النص "aggregate gradation" بالشريحة التي تحتوي على الأشكال التوضيحية المرتبطة بهذا النص، لذلك سنختار الربط بمكان في هذا المستند Place in This Document: نحدد رقم الشريحة التي نريد إنشاء الرابط بها (وهي الشريحة رقم 5 في هذا المثال). يمكننا الاستفادة من حقل المعاينة Slide Preview للتأكد من أنّها الشريحة المطلوبة، كما يمكننا إضافة تلميح شاشة Screen Tip لإرشاد المستخدم إلى ما سيحدث عند النقر على الرابط: بمعاينة الشريحة بطريقة عرض الشرائح Slide Show سنتمكن من رؤية نتيجة إدراج الرابط. عند تمرير الفأرة فوقه سيظهر التلميح الذي قمنا بإدخاله، وعند النقر عليه سننتقل مباشرة من الشريحة الحالية (رقم 2) إلى الشريحة رقم 5 التي قمنا بتحديدها عند إنشاء الرابط: الإجراءات Actions تُستخدم الإجراءات (أو أزرار الإجراءات) لتشغيل إجراء action ما في عرضك التقديمي، كالانتقال إلى شريحة أخرى أو تشغيل ملف صوتي عندما يقوم المستخدم بالنقر على الزر أو تمرير مؤشر الفأرة فوقه. على سبيل المثال، قمنا (في الشريحة الموضّحة أدناه) بإدراج مربع نص يحتوي على كلمة "Back"، والهدف هو إنشاء زر يقوم بإعادة المستخدم إلى آخر شريحة تم استعراضها. نحدد مربع النص ونذهب إلى تبويب: إدراج Insert > إجراء Action يحتوي مربع الحوار Action Settings على تبويبين. الأول، Mouse Click، وهو خاص بالإجراءات التي تنفّذ عند النقر بالفأرة على العنصر. والثاني، Mouse Over، وهو خاص بالإجراءات التي تنفّذ عند تمرير الفأرة فوق العنصر. والغالب هو استخدام التبويب الأول: نؤشر الخيار Hyperlink to، ثم نختار الإجراء المرغوب من قائمة الإجراءات. توجد العديد من الإجراءات، مثل الانتقال إلى الشريحة التالية Next Slide، إلى الشريحة السابقة Previous Slide، إلى أول شريحة في العرض التقديمي First Slide، إلى شريحة محددة Slide، إلى رابط URL، إلى عرض تقديمي آخر موجود على جهازك Other PowerPoint Presentation...إلخ. سنختار الانتقال إلى آخر شريحة تمت معاينتها من قبل المستخدم Last Slide Viewed، ثم ننقر على OK: نقوم بمعاينة الشريحة بطريقة عرض الشرائح: سنقوم أيضًا بإدراج إجراء للتسميات التوضيحية للأشكال، بحيث عند النقر عليها يتم الانتقال إلى الشريحة التي تحتوي على المخطط المرتبط بالشكل. نحدد مربع النص الذي يحتوي على التسمية التوضيحية، ثم ننقر على Action من تبويب Insert: بما أننا نريد الربط بشريحة مخصصة، نحدد الخيار Slide: نحدد الشريحة ذات الصلة بالشكل (نتأكد من أنّها المطلوبة بواسطة حقل المعاينة)، ثم ننقر على OK: نكرر الخطوة السابقة على باقي التسميات التوضيحية للأشكال، بإضافة إجراء لربط كل شكل بالشريحة ذات الصلة. ثم نقوم بمعاينة الإجراءات باستخدام طريقة عرض الشرائح: بنفس الخطوات الموضحة أعلاه، يمكنك إدراج مختلف الإجراءات والروابط التشعبية إلى العرض التقديمي وبالطريقة المرغوبة، لتجعل من التنقل بين الشرائح وفهم الارتباط بينها سهل عليك وعلى المشاهدين. إذا كنت ترغب في إنشاء الكثير من أزرار الإجراءات، يمكنك استخدام مجموعة أزرار الإجراءات Action Buttons من ضمن قائمة الأشكال Shapes. إذ توجد بعض الأزرار الجاهزة، والتي بمجرد إدراجها سيُفتح مربع الحوار Action Setting ومنه تقوم بتخصيص خياراتك: