Advertisement
  1. Web Design
  2. Kids

تصميم المواقع الإلكترونية للأطفال: الإستعداد لبناء موقع على شبكة الإنترنت

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Welcome to Tuts+ Town!
Web Design for Kids: HTML Structure

Arabic (العربية/عربي) translation by Alaa Alarabi (you can also view the original English article)

مرحبا بكم في الدرس الثاني من سلسلة تصميم المواقع الإلكترونية للأطفال!

في هذا الدرس سوف نتعلم كل شيء عن بعض الأشياء التي نحتاج إلى القيام بها ، والأدوات التي نحتاجها قبل أن نبدأ كتابة التعليمات البرمجية لموقعنا "مدينة Tuts+"؛ سنصل الى هناك، اعدكم! أيضا، لا تنسوا طرح أي أسئلة في قسم التعليقات أسفل هذه الصفحة.

الاهم فالمهم ، لذا دعونا نلقي نظرة متفحصة على ما سنقوم ببناءه معا!

رسم مخطط

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

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

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

رسم مخطط موقع مدينة Tuts +

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

وهناك أيضا بعض الصور التي سنستخدمها لإعطاء إحساس ترحيب للمدينة.

هنا ألقي نظرة على المخطط الذي أدى إلى معاينة الموقع الملونة والمصممة بالكامل:

هذا هو الموقع طبق الاصل الذي سنقوم بإنشائه من نقطة الصفر! أنيق جداً.

برامج تحرير النصوص البرمجية

لكتابة التعليمات البرمجية لـ HTML ( كل الاشياء عن اللغة السرية التي تحدثنا عنها في الدرس الأول) نحن بحاجة إلى محرر نصصوص برمجية.

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

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

Bluefish جيد جداً بالنسبة لأجهزة الحاسوب التي تعمل بنظام تشغيل ويندوز ، بينما Atom سيكون مناسباً لجهاز Mac.

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

الملفات، الملفات، الملفات

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

وسيكون لموقع مدينة Tuts+ ملف HTML (يحفظ مع ملحق .html في النهاية) وملف CSS (يحفظ مع ملحق .css في النهاية)، وأربعة صور سيتم حفظها في مجلد باسم "images" وسوف يتواجد مجلد الصور في نفس المجلد الرئيسي كملفات HTML و CSS.

ملحق الملف هو مجموعة الحروف التي تأتي بعد النقطة في اسم الملف، تخبرنا ما هو نوع هذا الملف:

كما ذكرنا ، سيتم حفظ  الصور لدينا في مجلد باسم "images" داخل المجلد الرئيسي لموقعنا الإلكتروني ، مثل هذا:

في الصورة أعلاه لدينا صورة باسم town.svg (الملحق .svg  مجرد نوع من الصور) والتي قمنا بوضعها في مجلد إضافي يسمى "images". القيام بذلك يساعد على إبقاء الأمور مرتبة:

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

المتصفحات

سوف نرى عملنا الصحيح في المتصفح، مثل الذي تستخدمه الآن لعرض صفحة Tuts+ هذه!

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

ليس على شبكة الإنترنت، حتى الآن

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

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

أحسنت!

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

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

أراك حول المدينة!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.