Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids

تصميم مواقع الويب للأطفال: أهلاً بكم في مدينة توتس+ (+Tuts)!

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Getting Ready to Build a Website

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

ملاحظة: الشكر للأصدقاء تيمور عزيز و محمد بن عثمان و محمد فؤاد لمشاركتهم في هذه الترجمة.

مرحباً بكم في مدينة توتس+، حيث يحب الجميع تصميم مواقع الويب! في هذه السلسلة سوف نتعلم كل شيء عن تصميم وبناء مواقع الويب. لمساعدتنا في ذلك، سنقوم بإنشاء موقع ويب سوياً.

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

لذا تفضل إنضم إلينا بكل راحة ولنصمم شيئا ً لسكان مدينة توتس+!

كيف يعمل الويب؟

فلنأخذ خطوة للوراء و نفكر قليلا ً في كيفية عمل الويب.

عند توصيل جهازي كومبيوتر بالإنترنت ( و المشار إليه بالخط الأصفر كما في الصورة التالية ) يتمكن كلاهما من الحديث إلى بعضهما البعض.

الخادم server (الصندوق الأزرق) هو عبارة عن جهاز كمبيوتر بمواصفات خاصة يتم فيه حفظ ملفات مواقع الويب. جهازك الموجود في المنزل أو المدرسة ليس سيرفرا ً ، لأنه ليس متصل بشكل مباشر بالإنترنت. فنحن نتصل بالإنترنت من خلال موفر خدمة الإنترنت ( ISP )

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

كيفية إتصال جهازك بالويب.

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

الأمر كله يعتمد على الإتصالات و مشاركة المعلومات.

و طبقا ً لما ذكرناه سابقا ً ، فإن أي موقع تقوم ببرمجته محليا ً ( على جهازك ) لا يمكن أن يراه أشخاص آخرون على جهاز مختلف إلى أن تقوم بنقل ملفاتك إلى سيرفر. سنتطرق إلى هذا الأمر لاحقا ً.

وظيفة مصمم الويب

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

وظيفة مصمم الويب

مشروعنا

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

إليكم معاينة للموقع.

ما سنقوم ببنائه

هذا الموقع سيتضمن كل نقاط تصميم مواقع الويب التي سنتعلمها. سيكون مشروع تصميم موقع أنيق للغاية!

الإعداد و البناء

فلنتحدث عن ما سنحتاجه لنبدأ العمل.

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

التخطيط مهم!

التصميم

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

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

مراحل المشروع

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

مراحل المشروع

المقدمة

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

إنشاء الموقع

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

ثم سوف نتحدث عن الملفات والأدوات التي نحتاجها للبدء في مرحلة برمجة موقعنا.

لغة الـ HTML

لغة الـ HTML هي اختصار لـ HyperText Markup Language وهي اللغة التي تستخدم لهيكلة النص والتي تحدثنا عنه بشكل مختصر فيما سبق. هذه اللغة تساعد المتصفح على فهم وعرض ملفات الموقع الخاص بنا.

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

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

لغة الـ CSS

لغة الـ CSS والتي هي اختصار لـ Cascading Stylesheets، تساعدنا في التصميم مثل (الالوان، نوع الخط، الشكل العام) للموقع الخاص بنا، مما يجعله يبدو بشكل جذاب وسهل الاستخدام لزوار الموقع.

هكذا تبدو لغة CSS

التبويبات CSS Layout

لغة الـ CSS تساعدنا في تصميم وتوزيع التبويبات على صفحة الويب.

الصور

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

Our images

أساسيات التصميم

في هذه الجزئية سوف نركز على مفهوم الـ "building blocks" والمستخدم في تصميم مواقع الويب. نحن نريد ان نقوم بعمل شيء يستطيع الاشخاص الاخرين استخدامه، ويكون سهل الاستخدام، وكذلك التأكد ان يبدو بشكل جميل.

التيبوجرافي (Typography)

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

أول مثال عن التيبوجرافي للموقع الخاص بنا يمكنك ان تجده في الأعلى:

Heading

اللون

اللون هو عنصر هام للغاية و ممتع أيضا ً. اللون هو ما يجعل موقعك جميلا ً كما أنه يعطيه مفهوما ً و هذا ما سنتحدث عنه في هذا الجزء.

نهاية السلسلة

في نهاية سلسلة الدروس تلك سنكون قد تعلمنا كيفية رفع ملفات موقعنا على أحد أجهزة الكومبيوتر الخاصة تلك ألا و هو السيرفر حتى يتمكن كل أصدقاؤك و عائلتك من رؤيته على الإنترنت. كما سنتطرق إلى كيفية الإستفادة من دراستك التي تجعلك تحمل لقب "مصمم مواقع ويب لمدينة توتس+".

و لكن دعونا لا نقلق بخصوص هذا الأمر الآن ، فلقد بدأنا للتو!

أراكم لاحقا ًَ!

في الدرس القادم سنتطرق إلى كيفية الإستعداد لبناء موقع بإستخدام الـ HTML. لا يسعني الإنتظار ، أراكم في الأرجاء!

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.