تكنولوجيا المعلومات - ITYEM http://ityem.com مقالات ودروس في تكنولوجيا المعلومات Thu, 03 Nov 2011 06:10:17 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 ITYEMhttp://feedburner.google.com الوسوم، والخصائص، والعناصر http://feedproxy.google.com/~r/ITYEM/~3/IhnM0q7gKZQ/ http://ityem.com/%d8%a7%d9%84%d9%88%d8%b3%d9%88%d9%85-%d9%88%d8%a7%d9%84%d8%ae%d8%b5%d8%a7%d8%a6%d8%b5-%d9%88%d8%a7%d9%84%d8%b9%d9%86%d8%a7%d8%b5%d8%b1/320/#comments Thu, 03 Nov 2011 05:47:28 +0000 Ahmed http://ityem.com/?p=320 هذا الدرس هو مواصلة لدرسنا السابق الموجود هنا.

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

لنقم بالتعديل على الملف الذي قمنا بإنشائه في الدرس السابق حتى يصبح بهذه الصورة:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
	هذه صفحة الويب الأولى الخاصة بي
</body>
</html>

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

السطر الأول الذي يبدأ بـ <!DOCTYPE… الهدف منه هو تعريف المتصفح بأنك تعرف ماذا تعمل أو ما الذي تقوم به. ربما يتبادر إلى ذهنك أنك لا تعرف فعلا ماذا تفعل، لكن من المهم جدا أن تلتزم بهذا عند إنشاء أي صفحة ويب. إن لم تقم بكتابة السطر الأول، فإن متصفح الويب سيتحول إلى الوضع الشاذ (quirks mode) ويتصرف بطريقة غريبة. لا تقلق إن لم تفهم تماما نوع المستند أو ما يسمى بـ DOCTYPE في الوقت الحالي، حيث أننا سنتناول هذا الموضوع في درس لاحق. في الوقت الحالي فقط تذكر أن تضع هذا الكود في أول سطر من صفحة الويب قبل وسم <html>.

لنعد إلى موضوعنا، البنية الأساسية للغة الـ HTML هي الوسوم (tags) التي تطوّق أو تحيط بمحتويات الصفحة من نصوص وصور وهي تستخدم لإبلاغ المتصفح بكيفية إظهار النصو والصور وتعطيهما معنى.

  • وسوم HTML تكون محصورة  بين أو محاطة بعلامتي <>.
  • وسوم HTML ليست حساسة لحالة الأحرف، لكن هناك حالات تكون حالة الأحرف في الروابط (URLs) حساسة.
  • وسوم HTML عادة تكون زوجية، أي أنها تحتوي على وسم بداية (أو وسم فتح)، ووسم نهاية (أو وسم إغلاق) مثل <b> و </b>

 

وسوم البداية أو وسوم الافتتاح
من مثالنا السابق، وسم <html> هو وسم الافتتاح أو وسم البداية ونقطة الانطلاق والذي يخبر المتصفح أن كل شيء بين ذلك الوسم ووسم </html> هو مستند أو ملف HTML. المحتويات الموجودة بين وسمي <body> و </body> هي المحتويات الرئيسية التي ستظهر في نافذة المتصفح.

وسوم الإغلاق أو وسوم النهاية
الوسمان </body> و </html> يقومان بإغلاق وسومها الخاصة. جميع وسوم الـ HTML يجب إغلاقها، على الرغم من الإصدارات القديمة من لغة HTML تسمح “كسلا” بأن تبقى بعض الوسوم بدون إغلاق، بينما المعايير الحديثة تتطلب أن يتم إغلاق جميع الوسوم حتى يكون ملف الـ HTML خاليا صحيحا وخاليا من الأخطاء. كما أن اتباع هذه المعايير يعتبر عادة جيدة على أي حال.
ليس كل الوسوم لها وسوم إغلاق كما هو الحال في وسم (<html></html>)، بعض الوسوم التي لا تحيط بأي محتوى أو نصوص تقوم بإغلاق نفسها. وسم السطر الجديد مثلا ليس له وسم إغلاق، وتتم كتابته بهذه الطريقة <br />. سنمر على هذه الأمثلة لاحقا. كل ما يجب عليه تذكره هو أن جميع الوسوم يجب أن تغلق، وأن أغلب (الوسوم التي تحتوي على محتوى بداخلها) تكون بهذا الشكل وبهذه البنية: وسم البداية ← المحتوى ← وسم الإغلاق.

السمات والخصائص
بإمكان الوسوم أن تحتوي على خصائص أو سمات (attributes)، والتي هي عبارة عن معلومات إضافية عن كيفية إظهار المحتوى بحسب المعنى المراد منها. الخصائص تكون داخل وسم البداية، وقيمها تكون دائما بين علامتي تنصيص (” “)، تبدو بهذه الطريقة:
<tag attribute=”value”>Design</tag>
وبالعربي:
<وسم خاصية=”قيمة”>تصميم</وسم>
ملاحظة: يجب أن يكون هناك فراغ بين اسم الوسم والخاصية. هذا سنتناول موضوع الخصائص والسمات في دروس لاحقة.

العناصر
الوسوم لا تقوم بعمل الكثير سوى تحديد بداية ونهاية العنصر. العناصر هي المكونات الو البتات التي تكون صفح الويب. لهذا نقول أن كل شيء يشمل وسمي <body> و </body> ويقع بينهما هو عنصر الـ body (عنصر بدن الصفحة أو عنصر مكون الصفحة). كمثال آخر، في حين أن ‘<title>‘ و ‘</title>‘ هما وسمان، ‘<title>تصميم المواقع</title>‘ هو عنصر العنوان.

]]> http://ityem.com/%d8%a7%d9%84%d9%88%d8%b3%d9%88%d9%85-%d9%88%d8%a7%d9%84%d8%ae%d8%b5%d8%a7%d8%a6%d8%b5-%d9%88%d8%a7%d9%84%d8%b9%d9%86%d8%a7%d8%b5%d8%b1/320/feed/ 0 http://ityem.com/%d8%a7%d9%84%d9%88%d8%b3%d9%88%d9%85-%d9%88%d8%a7%d9%84%d8%ae%d8%b5%d8%a7%d8%a6%d8%b5-%d9%88%d8%a7%d9%84%d8%b9%d9%86%d8%a7%d8%b5%d8%b1/320/ HTML – الشروع في العمل http://feedproxy.google.com/~r/ITYEM/~3/3_GMwNfE_fA/ http://ityem.com/html-%d8%a7%d9%84%d8%b4%d8%b1%d9%88%d8%b9-%d9%81%d9%8a-%d8%a7%d9%84%d8%b9%d9%85%d9%84/294/#comments Fri, 14 Oct 2011 03:45:50 +0000 Ahmed http://ityem.com/?p=294 أغلب الأشياء والمواد الموجودة على الويب ليست مختلفة عن الأشياء والمواد الموجودة على كمبيوترك – فما هي إلا مجموعة من الملفات مخزنة في مجموعة من المجلدات.
ملفات الـ HTML ليست أكثر من ملفات نصوص بسيطة، ولكي تبدأ الكتابة بلغة HTML فلن تحتاج أكثر من محرر نصوص بسيط وأحد المتصفحات لعرض الصفحة بعد بناءها وتصميمها.

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

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

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

قم بفتح برنامج المفكرة أو برنامج Notepad++ ثم قم بكتابة النص التالي:

هذه صفحة الويب الأولى الخاصة بي
إذا كنت تستخدم Notepad++ فقم بتحديد اللغة من القائمة Language أو اللغة ثم تحت الحرف H قم باختيار HTML، وسيتم اعتبار هذا الملف على أنه ملف HTML.

قم بحفظ هذا الملف باسم “myfirstpage.html”.

من المهم جدا أن يتم حفظ الملف بصيغة “.html” وذلك حتى يتم التعامل مع الملف على أنه ملف HTML  وليس مجرد ملف نصوص عادي.

لعرض ملفات الـ HTML لا تحتاج لأن تكون على الويب. قم بفتح أي متصفح ويب مثل فايرفوكس (Firefox) أو إنترنت إكسبلورر (Internet Explorer). وفي صندوق العنوان حيث تقوم عادة بطباعة عنوان أي موقع، قم بطباعة مكان ملف الـ HTML المراد عرضه بالإضافة إلى اسم الملف على سبيل المثال: (c:\html\myfirstpage.html)، ثم اضغط Enter. أو بدلا عن ذلك قم بالذهاب إلى قائمة ملف في متصفح الإنترنت ، اختر فتح، ثم قم بالذهاب إلى مجلد html الذي يحتوي الملف المراد عرضه، ثم قم بتحديد الملف ثم اضغط على OK.

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

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

ملفات (أو مستندات) الـ HTML = صفحات الويب

  • ملفات الـ HTML تصف وتنسق صفحات الويب
  • ملفات الـ HTML تحتوي على وسوم HTML بالإضافة إلى نص أو نصوص عادية
  • ملفات الـ HTML تدعى أيضا صفحات ويب
الغرض من استخدام متصفح الويب (مثل Enternet Explorer أو Chrome أو Firefox) هو قراءة ملفات الـ HTML وعرضها كصفحات ويب. المتصفح لا يقوم بعرض وسوم الـ HTML، إنما يستخدم هذه الوسوم لترجمة محتويات الصفحة:
<html>
<body>
 
<h1>My First Heading</h1>
 
<p>My first paragraph.</p>
 
</body>
</html>

شرح المثال

  • النص بين <html> و </html> يصف ويمثل صفحة الويب
  • النص بين <body> و </body> هو محتوى الصفحة الذي يظهر والذي يتم عرضه
  • النص بين <h1> و </h1> يتم عرضه كعنوان
  • النص بين <p> و </p> يتم عرضه كفقرة
صيغة .html أو .html؟
عند حفظ ملف HTML، تستطيع أن تستخدم إحد الصيغتين (.htm أو .html). لا يوجد فرق بينهما، ويعود القرار لك في اختيار أحدهما.
لا تقلق إذا رأيت أي وسوم لا تعرفها أو لا تفهم الغرض منها، سنقوم بشرح جميع الوسوم المستخدمة، وإن شاء الله سنتمكن من تغطية كل الوسوم الموجودة في الـ HTML.
]]> http://ityem.com/html-%d8%a7%d9%84%d8%b4%d8%b1%d9%88%d8%b9-%d9%81%d9%8a-%d8%a7%d9%84%d8%b9%d9%85%d9%84/294/feed/ 0 http://ityem.com/html-%d8%a7%d9%84%d8%b4%d8%b1%d9%88%d8%b9-%d9%81%d9%8a-%d8%a7%d9%84%d8%b9%d9%85%d9%84/294/ ما هي لغة الـ HTML؟ http://feedproxy.google.com/~r/ITYEM/~3/SiDrScXE7XA/ http://ityem.com/%d9%85%d8%a7-%d9%87%d9%8a-%d9%84%d8%ba%d8%a9-%d8%a7%d9%84%d9%80-html%d8%9f/290/#comments Thu, 13 Oct 2011 03:52:23 +0000 Ahmed http://ityem.com/?p=290 ما هي لغة الـ HTML؟
HTML تعتبر اختصار لعبارة Hypertext Markup Language، والتي تعني لغة تنسيق (توصيف أو تعليم) النصوص التشعبية. هي لغة متفرعة من لغة SGML والتي هي اختصار لعبارة Standard General Markup Language والتي تعني لغة التنسيق (التوصيف أو التعليم) المعيارية العامة. وهي لغة تستخدم لتحديد خصائص وتصميم مستندات الشبكة العالمية الواسعة World Wide Web (تستخدم في إنشاء وتصميم صفحات الويب على شبكة الإنترنت)، بالإضافة إلى إنشاء روابط ووصلات بين مستندات الويب (المستندات قد تكون ملفات نصية، ملفات صوتية، ملفات مرئية، أو صور).
قد تبدول لغة الـ HTML مخيفة نوعا ما في البداية، لكن بمجرد أن تبدأ بفهمها والشعور بها، فلن يتبقى إلا القليل للقلق بشأنه. فباستخدامك لبعض أكوادها ووسومها المختلفة، فستتعود عليها وتكون قد قطعت شوطا كبيرا فيها. أيضا، بسبب التطور الكبير في برامج تحرير الـ HTML، ستجد أن هذه المحررات تقوم بأكثر العمل نيابة عنك.

خصائص لغة الـ HTML:
اختصارا وإضافة لما سبق:

  • HTML عبارة عن لغة لوصف أو توصيف وتنسيق وتصميم صفحات الويب
  • HTML هي اختصار لـ Hyper Text Markup Language
  • HTML ليست لغة برمجة، بل هي لغة تصميم وتنسيق كما هو واضح من كلمة Markup في اسمها والتي تعني التنسيق أو علامات التنسيق
  • لغة التصميم أو لغة التعليم (التنسيق) هي عبارة عن مجموعة من أوسمة التنسيق
  • HTML تستخدم وسوم وعلامات التنسيق لتوصيف وتنسيق صفحات الويب
  • HTML لا تحتوي على جمل الشرط والتحكم والتكرار، ويجب استخدام لغات أخرى لهذا الغرض مثل JavaScript
  • HTML لا تحتاج إلى مترجم خاص بها Compiler
  • HTML غير مرتبطة بنظام تشغيل معين (بالإمكان أستخدامها في نظم التشغيل المختلفة بنفس الطريقة)
  • HTML لغة بسيطة جدا وسهلة الفهم والتعلم
  • تعلم HTML لا يتطلب معرفة مسبقة بأي لغة برمجة أخرى، فكل ما تحتاجه هو القليل من التفكير المنطقي وترتيب الأفكار والممارسة العملية والفعلية لها.

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

]]> http://ityem.com/%d9%85%d8%a7-%d9%87%d9%8a-%d9%84%d8%ba%d8%a9-%d8%a7%d9%84%d9%80-html%d8%9f/290/feed/ 0 http://ityem.com/%d9%85%d8%a7-%d9%87%d9%8a-%d9%84%d8%ba%d8%a9-%d8%a7%d9%84%d9%80-html%d8%9f/290/ الفرق بين البت (bit) والبايت (Byte) في حساب سرعة الإنترنت http://feedproxy.google.com/~r/ITYEM/~3/vhVhQJmLjEQ/ http://ityem.com/%d8%a7%d9%84%d9%81%d8%b1%d9%82-%d8%a8%d9%8a%d9%86-%d8%a7%d9%84%d8%a8%d8%aa-bit-%d9%88%d8%a7%d9%84%d8%a8%d8%a7%d9%8a%d8%aa-byte-%d9%81%d9%8a-%d8%ad%d8%b3%d8%a7%d8%a8-%d8%b3%d8%b1%d8%b9%d8%a9-%d8%a7/281/#comments Sat, 08 Oct 2011 05:10:19 +0000 Ahmed http://ityem.com/?p=281 هناك التباس يحدث عن الكثيرين فيما يخص سرعة الخط وسرعة التحميل.. وللتوضيح، فإن هناك مصطلحان مختلفان الكثير يظن أنهما نفس الشيء بينما هما ليسا كذلك. هذان المصطلحان هما:

  • bit (بت)، ومنه kilobit و megabit
  • Byte (بايت)، ومنه Kilobyte و Megabyte

 

ما يهمنا هنا هو الـ megabit والـ Megabyte.

الأول والذي هو megabit وينطق (ميقابت) يرمز له بالرمز (Mb)، بينما الثاني والذي هو Megabyte وينطق (ميقابايت) يرمز له بالرمز (MB) ، هذان المصطلحان ليسا نفس الشيء، وسأحاول أن أوضح لك بتفصيل أكثر:

البايت (1 Byte) يساوي 8 بيت (8 bits)
الكيلوبت (1 Kilobit) أو (Kb) يساوي 1024 بيت (1024 bits)
الميقابت (1 megabit) أو (Mb) يساوي 1024 كيلوبت (1024 Kb)
الكيلوبايت (1 Kilobyte) أو (KB) يساوي 1024 بايت (1024 Byte)، أي أنه يساوي 8192 بيت (8192 bits) وذلك يساوي 8 كيلوبت (8 Kb)
الميقابايت (1 Megabyte) أو (MB) يساوي 1024 كيلوبايت (1024 KB)، أي أنه يساوي 8192 كيلوبت (8192 Kb) وذلك يساوي 8 ميقابت (8 Mb)

 

من هذا نستنتج أن:
الكيلوبايت الواحد (1 KB) يساوي 8 كيلوبت (8 Kb)
الميقابايت الواحد (1 MB) يساوي 8 ميقابت (8 Mb)

سرعة الإنترنت التي توفرها أغلب شركات النت (إن لم يكن كلها) هي بالميقابت megabit أو Mb، وليس بالميقابايت Megabyte أو MB، وهنا يحدث اللبس. فالميقابت يعتبر 1/8 الميقابايت، ولهذا وبما أن الميقابايت يساوي 1024 كيلوبايت (1024 KB) فبقسمته على 8 سيعطينا ناتج 128 كيلوبايت (128 KB) والذي يساوي 1024 كيلوبت (1024 Kb) والـ 1024 كيلوبت تساوي 1 ميقابت (1 megabit).

اللبس يحدث حينما يتم حساب سرعة النت من شركة الأنترنت بالميقابت Mb والكيلوبت Kb، في حين أنه وحين التصفح و التحميل فإن المتصفحات وبرامج التحميل تقوم بحساب السرعة بالميقابايت MB والكيلوبايت KB، لأن -كما ذكرت سابقا- 1 MB يساوي 8 Mb، والـ 1 KB يساوي 8 Kb.

طبعا مؤخرا تم استخدام قيمة 1000 (الحاسب العشري) بدلا من قيمة 1024 (الحساب الثنائي) عند الكثيرين، ويتم الحساب على ذلك الأساس.

]]> http://ityem.com/%d8%a7%d9%84%d9%81%d8%b1%d9%82-%d8%a8%d9%8a%d9%86-%d8%a7%d9%84%d8%a8%d8%aa-bit-%d9%88%d8%a7%d9%84%d8%a8%d8%a7%d9%8a%d8%aa-byte-%d9%81%d9%8a-%d8%ad%d8%b3%d8%a7%d8%a8-%d8%b3%d8%b1%d8%b9%d8%a9-%d8%a7/281/feed/ 0 http://ityem.com/%d8%a7%d9%84%d9%81%d8%b1%d9%82-%d8%a8%d9%8a%d9%86-%d8%a7%d9%84%d8%a8%d8%aa-bit-%d9%88%d8%a7%d9%84%d8%a8%d8%a7%d9%8a%d8%aa-byte-%d9%81%d9%8a-%d8%ad%d8%b3%d8%a7%d8%a8-%d8%b3%d8%b1%d8%b9%d8%a9-%d8%a7/281/ إنشاء برنامجك الأول في الفيجوال بيسك – خطوة 5 http://feedproxy.google.com/~r/ITYEM/~3/CZVhe2LTx9c/ http://ityem.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d8%ac%d9%83-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d9%81%d9%8a-%d8%a7%d9%84%d9%81%d9%8a%d8%ac%d9%88%d8%a7%d9%84-%d8%a8%d9%8a%d8%b3%d9%83/224/#comments Sun, 21 Aug 2011 00:44:42 +0000 Ahmed http://ityem.com/?p=224 الخطوة 5: تشغيل وتجربة البرنامج

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

لتشغيل البرنامج:

  1. نقم بتوصيل جهاز الكمبيوتر إلى الإنترنت.
  2. على قائمة التصحيح والمعالجة Debug في IDE الفيجوال بيسك، نضغط على ابدأ التصحيح والمعالجة Start Debugging.
    هذا الأمر يقوم بتشغيل برنامجنا.

    اختصارا لهذه الطريقة بالإمكان الضغط على F5 في لوحة المفاتيح لبدء عملية التصحيح والمعالجة Debug
  3. في صندوق النص، اطبع http://ityem.com زر Go!.
    ضابط متصفح الويب في برنامجنا سيذهب إلى الصفحة الرئيسية في موقع تكنولوجيا المعلومات – ITYEM. من هناك بإمكاننا أن نتنقل عبر الروابط الموجودة في تلك الصفحة. لزيارة موقع آخر، نقوم بطباعة عنوان الموقع في مربع النص ونضغط على زر Go!.
  4. لإغلاق البرنامج، على قائمة التصحيح والمعالجة Debug، نضغط على أوقف عملية التصحيح والمعالجة Stop Debugging.
    بالإمكان أيضا غلق البرنامج عن طريق الضغط على زر الإغلاق في زايوة اليمين العليا من في النموذج.

نظرة أقرب:

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

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

حل المشاكل :Troubleshooting

إن لم يعمل البرنامج أو لم يظهر صفحة الويب، هناك بعض الأمور بإمكانك التحقق منها:

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

الخطوات التالية:

تهانيا! لقد انتهيت من إنشاء أول برامجك في الفيجوال بيسك. لقد قمت بتجربة كيف أنه بالإمكان تطوير البرامج بكفائة وسرعة وسهول باستخدام فيجوال بيسك. في الدروس القادمة، سنتعرف أكثر على فيجوال بيسك IDE والبرمجة باستخدام لغة الفجوال بيسك.

]]> http://ityem.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d8%ac%d9%83-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d9%81%d9%8a-%d8%a7%d9%84%d9%81%d9%8a%d8%ac%d9%88%d8%a7%d9%84-%d8%a8%d9%8a%d8%b3%d9%83/224/feed/ 0 http://ityem.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d8%ac%d9%83-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d9%81%d9%8a-%d8%a7%d9%84%d9%81%d9%8a%d8%ac%d9%88%d8%a7%d9%84-%d8%a8%d9%8a%d8%b3%d9%83/224/ إنشاء برنامجك الأول في الفيجوال بيسك – خطوة 4 http://feedproxy.google.com/~r/ITYEM/~3/gSWG3GM8_T4/ http://ityem.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d8%ac%d9%83-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d9%81%d9%8a-%d8%a7%d9%84%d9%81%d9%8a%d8%ac%d9%88%d8%a7%d9%84-%d8%a8%d9%8a%d8%b3%d9%83-4/215/#comments Sun, 21 Aug 2011 00:40:19 +0000 Ahmed http://ityem.com/?p=215 الخطوة 4: إضافة كود فيجوال بيسك

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

لإضافة كود ووظيفة لبرنامجنا:

  1. في مصمم النماذج Form Designer، نضغط على ضابط الزر Button ضغطتين سريعتين.
    نافذة صغيرة تدعى محرر الكود (Code Editor) ستفتح. هنا سنقوم بإضافة الكود لبرنامجنا.
  2. في محرر الكود Code Editor، اكتب الكود التالي: 
    WebBrowser1.Navigate(Textbox1.Text)

    هذا الكود سيعمل حينما يضغط المستخدم على الزر.

    عندما يفتح محرر الكود Code Editor، فإن مؤشر الماوس يكون أوتوماتيكيا متواحد بداخل كود أو إجراء الزر Button، نستطيع أن نبدأ كتابة الكود مباشرة.

نظرة أقرب:
لاحظنا أنه حينما يفتح محرر الكود Code Editor، فإنه يحتوي مسبقا على بعض الكود يبدو كالتالي:

Private Sub Button1_Click(ByVal sender As System.Object...
 
    |
 
End Sub

هذا الكود يدعى معالج الحدث (event handler)، أيضا يدعى إجراء فرعي (Sub procedure). أي كود بداخل هذا الإجراء (بين Sub و End Sub) يتم تشغيل في كل مرة يتم الضغط على الزر button.

لاحظنا أيضا أن مؤشر الماوز تم وضعه بداخل إجراء الحدث، أي أن كل ما يجب علينا هو أن نطبع الكود.

الكود الذي قمنا بطباعته (WebBrowser1.Navigate(TextBox1.Text)) يخبر البرنامج بأن يأخذ النص الذي تمت طباعته بداخل Textbox1 ويمرره كوسيط (argument) إلى طريقة الانتقال (Navigate method) الخاصة بضابط متصفح الويب WebBrowser المسمى (WebBrowser1). للتعرف أكثر على الخصائص، الطرق، والأحداث، انظر نظرة أقرب: فهم الخصائص، الطرق، والأحداث

إذا لم تفهم الكود، فلا تقلق، فسنتعلم أكثر عن كيفية كتابة الكود في الدروس القادمة إن شاء الله تعالى.

الخطوات التالية:

تطبيقنا أصبح الآن كاملا! في الدرس التالي، سنقوم بتشغيل تطبيقنا الأول في الفيجوال بيسك.

الدرس التالي: الخطوة 5: تشغيل وتجربة البرنامج

]]> http://ityem.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d8%ac%d9%83-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d9%81%d9%8a-%d8%a7%d9%84%d9%81%d9%8a%d8%ac%d9%88%d8%a7%d9%84-%d8%a8%d9%8a%d8%b3%d9%83-4/215/feed/ 0 http://ityem.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d8%ac%d9%83-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d9%81%d9%8a-%d8%a7%d9%84%d9%81%d9%8a%d8%ac%d9%88%d8%a7%d9%84-%d8%a8%d9%8a%d8%b3%d9%83-4/215/ نظرة عن قرب: تنسيق الضوابط/التحكمات http://feedproxy.google.com/~r/ITYEM/~3/uC2CVVJ0sbg/ http://ityem.com/%d8%aa%d9%86%d8%b3%d9%8a%d9%82-%d8%a7%d9%84%d8%b6%d9%88%d8%a7%d8%a8%d8%b7-%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85%d8%a7%d8%aa/208/#comments Sun, 21 Aug 2011 00:38:43 +0000 Ahmed http://ityem.com/?p=208 نستطيع أن ننظم الضوابط بطرق عديدة حينما نقوم بإضافة الضوابط إلى النماذج. مثلا، قد نرغب بتنظيم ثلاثة أزرار على شكل عمود في نموذج، أو قد نرغب بتنظيمها بحيث تصبح بجانب بعض. تنظيم الضوابط هذا يعرف بالتنسيق أو التصميم. هناك العديد من الأدوات والتكانيك التي قد نرغب باستخدامها في الفيجوال بيسك وذلك لمساعدتنا في تنظيم وتغيير أحجام التحكمات. في هذا الدرس، سننظر في بعض هذه التكانيك.

 

تحكمات المحاذاة

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

محاذاة الضوابط إلى أحد أطراف النموذج

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

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

محاذاة الضوبط مع ضوابط أخرى

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

بإمكاننا أيضا أن تحديد أكثر من ضابط (ضوابط متعددة) في نفس الوقت ونستخدم أمر المحاذاة في شريط أدوات المنسق Layout toolbar.

تغيير حجم الضوابط/التحكمات

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

مقابض تغيير الحجم

نستطيع أن نضبط الضابط إلى أن يغير حجمه أوتوماتيكيا عندما تغيير حجم النموذج عن طريق ضبط خاصة Dock الخاصة بذلك الضابط إلى Fill. رأينا ذلك سابقا في الخطوة 3: تخصيص المظهر وطريقة العمل، حينما تعلمنا كيف نلصق أو نقيد ضابط متصفح الويب WebBrowser ليملأ منطقة الفراغ في النموذج. عندما يتم تكبير حجم نافذة النموذج، فإن تحكم متصفح الويب WebBrowser سيتغير أوتوماتيكيا ليناسب النموذج.

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

خاصيتي الارتفاع Height والعرض Width الخاصة بأي ضابط توجد تحت خاصية الحجم Size في نافذة الخصائص Properties.
]]> http://ityem.com/%d8%aa%d9%86%d8%b3%d9%8a%d9%82-%d8%a7%d9%84%d8%b6%d9%88%d8%a7%d8%a8%d8%b7-%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85%d8%a7%d8%aa/208/feed/ 0 http://ityem.com/%d8%aa%d9%86%d8%b3%d9%8a%d9%82-%d8%a7%d9%84%d8%b6%d9%88%d8%a7%d8%a8%d8%b7-%d8%a7%d9%84%d8%aa%d8%ad%d9%83%d9%85%d8%a7%d8%aa/208/ نظرة عن قرب: فهم الخصائص، الأساليب، والأحداث http://feedproxy.google.com/~r/ITYEM/~3/CvowexEA8as/ http://ityem.com/%d9%81%d9%87%d9%85-%d8%a7%d9%84%d8%ae%d8%b5%d8%a7%d8%a6%d8%b5-%d8%a7%d9%84%d8%a3%d8%b3%d8%a7%d9%84%d9%8a%d8%a8-%d9%88%d8%a7%d9%84%d8%a3%d8%ad%d8%af%d8%a7%d8%ab/193/#comments Sun, 21 Aug 2011 00:38:04 +0000 Ahmed http://ityem.com/?p=193 كل الأشياء (الأجسام أو الكائنات) في لغة الفيجوال بيسك لديها خصائصها وطرقها وأحداثها الخاصة بها. هذا يشمل النماذج والضوابط/التحكمات. بالإمكان التفكير بالخصائص على أنها مميزات أو صفات شيء ما (أو جسم أو كائن ما)، والطرق على أنها حركات ذلك الجسم، والأحداث على أنها استجابات ذلك الجسم.

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

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

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

البالون لديه خصائص (لون، ارتفاع، وقطر)(Color, Height, and Diameter)، استجابات لأحداث (ثقب)(Pncture)، وطرق (تفريغ، انفجار، إحداث ضجة)(Derlate, MakeNoise).

الخصائص

لو كان بإمكاننا برمجة بالون، فإن كود الفيجوال بيسك قيد يكون مشابها للكود التالي، والذي يحدد خصائص البالون:

Ballon.Color = Red

Ballon.Diameter = 10

Balloon.Inflated = True

انظر إلى ترتيب الكود – الكائن (بالون)(Balloon)، متبوع بخاصية اللون (Color)، متبوع بالقيمة المسندة إلى تلك الخاصية (= أحمر) (= Red). تستطيع أن تغير لون البالون عن طريق استبدال لون جديد باللون الأحمر.

الطرق

بالإمكان “استدعاء” طرق البالون كالتالي:

Balloon.Inflate

Balloon.Deflate

Balloon.Rise(5)

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

الأحداث

البالون قد يستجيب للأحداث كما يلي:

Sub Balloon_Puncture()
    Balloon.MakeNoise("Bang")
    Balloon.Deflate
    Balloon.Inflated = False
End Sub

في هذه الحالة، الكود يصف تصرف البالون عندما تحدث حادثة الثقب. عندما يحدث هذا الحدث، يتم استدعاء طريقة إحداث ضجة MakeNoise مع وسيط “فرقعة” “Bang” (نوع الضجة لإحداثها)، ثم يتم استدعاء طريقة التفريغ Deflate. بما أن البالون لم يعد منتفخا أو منفوخا، فإن خاصية الانتفاخ أصبحت False أو  غير حقيقية.

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

]]> http://ityem.com/%d9%81%d9%87%d9%85-%d8%a7%d9%84%d8%ae%d8%b5%d8%a7%d8%a6%d8%b5-%d8%a7%d9%84%d8%a3%d8%b3%d8%a7%d9%84%d9%8a%d8%a8-%d9%88%d8%a7%d9%84%d8%a3%d8%ad%d8%af%d8%a7%d8%ab/193/feed/ 0 http://ityem.com/%d9%81%d9%87%d9%85-%d8%a7%d9%84%d8%ae%d8%b5%d8%a7%d8%a6%d8%b5-%d8%a7%d9%84%d8%a3%d8%b3%d8%a7%d9%84%d9%8a%d8%a8-%d9%88%d8%a7%d9%84%d8%a3%d8%ad%d8%af%d8%a7%d8%ab/193/ إنشاء برنامجك الأول في الفيجوال بيسك – خطوة 3 http://feedproxy.google.com/~r/ITYEM/~3/PqhI0rCld3Y/ http://ityem.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d8%ac%d9%83-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d9%81%d9%8a-%d8%a7%d9%84%d9%81%d9%8a%d8%ac%d9%88%d8%a7%d9%84-%d8%a8%d9%8a%d8%b3%d9%83-3/183/#comments Sun, 21 Aug 2011 00:36:39 +0000 Ahmed http://ityem.com/?p=183 الخطوة 3: تخصيص المظهر وطريقة العمل

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

 

لضبط خصائص الضوابط/التحكمات:

  1. في مصمم النماذج Form Designer، نضغط على تحكم اللوحة Panel.
    ستعرض جميع خصائص ضابط اللوحة Panel المسماة Panel1 في نافذة الخصائص في أسفل يسار الـ IDA.
  2. في نافذة الخصائص Properties، نختار خاصية Dock، ثم نضغط على السهم الموجود على اليمين.  ستظهر نافذة صغيرة تحتوي على عدد من
    الصناديق والتي تمثل خيارات لهذه الخاصية لنختار منها.

    خاصية Dock توجد تحت التصنيف Layout. ليسهل علينا إيجاد أي خاصية في نافذة الخصائص، بإمكاننا أن نقوم بترتيب الخصائص بحسب ترتيب الأحرف الإنجليزية عن طريق الضغط على زر AZ الموجود في أعلى نافذة الخصائص.
  3.  سنضغط على أعلى صندوق في نافذة الإختيار الخاصة بالخاصية Dock وذلك لضبط الخاصية Dock إلى الأعلى. سنلاحظ أن ضابط اللوحة Panel سيتوسع أو يتمدد إلى أعلى النموذج.
  4. في نافذة الخصائص Properties، نضغط على علامة الزائد (+) الموجودة بجانب خاصية الحجم Size،  وذلك لتمديدها وعرض خياراتها.
    ستظهر لنا خاصيتي العرض والإرتفاع في نافذة الخصائص.
  5. في نافذة الخصائص Properties، سنلاحظ أن خاصية الإرتفاع مضبوطة على 100. سنقوم بتغيير هذه القيمة إلى 50.
  6. في نافذة مصمم النماذج Form Designer، نختار ضابط متصفح الويب WebDesigner. في نافذة الخصائص Properties، سنقوم باختيار خاصية Dock أيضا، ثم نختار الصندوق الأوسط من نافذة الإختيار الخاصة بالخاصية Dock.
  7. من نافذة مصمم النماذج Form Designer، نختار ضابط الزر Buttom.
  8. في نافذة الخصائص Properties نختار خاصية النص Text الخاصة بتحكم الزر Button. في العمود الأيمن، نقوم بحذف النص Button1 ونستبدله بكلمة Go!.
  9. نستطيع الآن أن نقوم بتغيير حجم أي ضابط أو تحكم، أو نقله،وذلك بما يتناسب مع ذوق كلا منا على حدة. فمثلا قد نزيد من طول ضابط صندوق النص ليصبح طويلا بما فيه الكافية ليظهر أي رابط صحيح. الصورة التالية تظهر مثالا كيف من الممكن أن يبدو تطبيق متصفح الويب.

تطبيق متصفح الويب

صندوق النص TextBox والزر Button يجب أن يبقيا فوق اللوحة Panel، وإلا فلن نتمكن من رؤيتهما حينما نقوم بتشغيل التطبيق.

نظر أقرب:

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

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

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

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

الخطوات التالية:

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

الدرس التالي: الخطوة 4: إضافة كود فيجوال بيسك

]]> http://ityem.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d8%ac%d9%83-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d9%81%d9%8a-%d8%a7%d9%84%d9%81%d9%8a%d8%ac%d9%88%d8%a7%d9%84-%d8%a8%d9%8a%d8%b3%d9%83-3/183/feed/ 0 http://ityem.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d8%ac%d9%83-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d9%81%d9%8a-%d8%a7%d9%84%d9%81%d9%8a%d8%ac%d9%88%d8%a7%d9%84-%d8%a8%d9%8a%d8%b3%d9%83-3/183/ إنشاء برنامجك الأول في الفيجوال بيسك – خطوة 2 http://feedproxy.google.com/~r/ITYEM/~3/n0lRtgKMPLs/ http://ityem.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d8%ac%d9%83-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d9%81%d9%8a-%d8%a7%d9%84%d9%81%d9%8a%d8%ac%d9%88%d8%a7%d9%84-%d8%a8%d9%8a%d8%b3%d9%83-2/164/#comments Sat, 20 Aug 2011 14:40:12 +0000 Ahmed http://ityem.com/?p=164 الخطوة 2: إنشاء واجهة مستخدم

في الدرس السابق قمنا بإنشاء مشروع لبرنامجنا، أما الآن فقد حان الوقت الآن للبدء ببناء متصفح الويب. سنستخدم Visual Basic Express لبناء واجهة المستخدم User Interface (أي الجزء الظاهر الذي سيقوم المستخدم بالتفاعل معه) عن طريق إضافة ضوابط  أو تحكمات controls من صندوق الأدوات Toolbox إلى النموذج.

صندوق الأدوات Toolbox يقع على الجهة اليسرى من Visual Studio ويتألف من من عدة تبويبات مثل Data (البيانات)، Components (المكونات أو العناصر)، و All Windows Forms (كل نماذج الويندوز). بداخل كل تبويب هناك مجموعة من المدخلات entries والتي تمثل ضوابط controls أو عناصر components نستطيع إضافتها إلى تطبيقاتنا. مثلا، تبويب All Windows Forms (كل نماذج الويندوز) يحتوي على مدخلات تدعى TextBox, Button و Checkbox والتي تمثل ضوابط/تحكمات (controls) نستطيع إضافتها لتطبيقنا عن طريق سحبها إلى النموذج Form. لا داعي للقلق على حجم تلك الضوابط والتحكمات، فسنتعلم كيف نقوم بتخصيص مظهر تطبيقنا في الدرس القادم إن شاء الله تعالى.

لإضافة ضوابط/تحكمات إلى تطبيقنا:

  1. اضغط على لوحة صندوق الأدوات Toolbox.
    سيظهر صندوق الأدوات Toolbox.

    سيكون من السهل استخدام صندوق الأدوات Toolbox إذا تركت النافذة مفتوحة. بالإمكان عمل ذلك عن طريق الضغط على أيقونة Auto Hide، والتي تبدو مثل الدبوس
  2. اضغط على تبويب كل نماذج ويندوز All Windows Forms الموجود في لوحة صندوق الأدوات Toolbox في أعلى اليسار، وقم بسحب ضابط لوحة Panelإلى زاوية أعلى اليسار في مصمم النماذج.
    إذا واجهتك صعوبة في إيجاد أي تحكم/ضابط، اضغط على صندوق الأدوات بزر الفأرة الأيمن، واختر Sort Items Alphabetically، هذا سيقوم بترتيب جميع العناصر بحسب ترتيب الحروف الإنجليزية.
  3. من نفس التبويب، اسحب صندوق نص ضابط TextBox وضعه فوق اللوحة Panelالتي قمنها بإضافتها في الخطوة السابقة.
    تستطيع أن تغير مكان التحكمات/الضوابط عن طريق عملية السحب والإفلات، تستطيع أيضا أن تغير أحجامها عن طريق سحب أحد أطرافها أو زواياها.
  4. من نفس التبويب، اسحب ضابط زر Button، وضعه فوق اللوحة Panel، على يمين صندوق النص ToolBox الذي أضفناه سابقا.
  5. أخيرا، من تبويب كل نماذ ويندوز All Windows Forms، اختر ضابط متصفح ويب WebBrowser، وضعه أسفل اللوح Panel.
    إذا لم تتسع لوحة النموذج لضابط متصفح الويب WebBrowser، تستطيع أن تغير حجم النموذج Form عن طريق سحب أحد أطرافه أو زواياه.
    إن كنت قد تركت نافذة صندوق الأدوات مفتوحة، فقد ترغب بإغلاقها الآن لتعطي نفسك مساحة أكبر للعمل، تستطيع عمل ذلك عن طريق الضغط مرة أخرى على أيقونة إخفاء ذاتي Auto Hide.

نظرة أقرب:
لقد قمنا بإضافة أربعة ضوابط/تحكمات إلى النموذج Form. هذه الضوابط تحتوي على كود يحدد كيف تبدو وما هي المهام التي تقوم بها.

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

كما لاحظنا، فصندوق الأدوات Toolbox تحتوي على العديد من التحكمات/الضوابط، وكل ضابط من هذه الضوابط لديه هدف فريد. تحكمات/ضوابط اللوحة قد تحتوي على تحكمات أخرى، مثل ضابط اللوحة Panel والذي احتوى على ضابطي الزر Button وصندوق النص TextBox. ضوابط الزر Button يستخدم عادة لتنفيذ مهما عندما يقوم المستخدم بالضغط عليه، مثل إغلاق البرنامج. تحكمات صندوق النص TextBox تستخدم لإدخال نص عن طريق لوحة المفاتيح. أما ضابط متصفح الويب WebBrowser فيوفر لنا متصفح ويب مدمج مماثل لمتصفح إنترنت إكسبلورر – بكل تأكيد نحن لا نريد أن نكتب كل الأكواد لذلك.

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

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

الدرس القادم: الخطوة 3: تخصيص المظهر وطريقة العمل

]]> http://ityem.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d8%ac%d9%83-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d9%81%d9%8a-%d8%a7%d9%84%d9%81%d9%8a%d8%ac%d9%88%d8%a7%d9%84-%d8%a8%d9%8a%d8%b3%d9%83-2/164/feed/ 2 http://ityem.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d8%ac%d9%83-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d9%81%d9%8a-%d8%a7%d9%84%d9%81%d9%8a%d8%ac%d9%88%d8%a7%d9%84-%d8%a8%d9%8a%d8%b3%d9%83-2/164/