في هذا المنشور سوف تتعرف على الطريقة الامثل لانشاء موقع الكتروني من الصفر . قبل ان تتم القرأة ادعوك الى متابعة الصفحة .
1 - قبل ان تفكر في انشاء اي موقع الكتروني يجب ان يكون لديك في جهازك :
- متصفح : وفيه سوف تشاهد نتيجة عملك (chrome, firefox, edge...)
- محرر : فالاكواد سوف يتم كتابتها في المحرر وبعدها تعرض النتيجة في المتصفح (vs code, sublime text, atom ....)
2 - سوف تحتاج الان اتباع هذه الخطوات :
✔ الخطوة 1 : هي تعلم اساسيات لغات التصميم و البرمجة واهم هذه اللغات هي :
- لغة ال Html : وهي لغة متخصصة في تصميم هيكل الموقع .
- لغة ال css : لغة مختصة فقط في تزيين الموقع (الالوان، الاشكال ...)
- لغة ال javascript : وتختصر ب js وهي لغة مهمة فهي تعطي للموقع ديناميك وتجعله اكثر تفاعلا مع المستخدم .
==> في هذه الحالة تكون قد تعلمت اساسيات ال front end الذي تعني الواجهة الامامية ... ثم بعدها عليك الانتقال الى ال back end اي الواجهة الخلفية ... فدورها هي التواصل مع السرفر و القيام بطلبات مع قواعد البيانات كادخل - مسح - تحديث - بحث - عن بيانات ... وستحتاج الى تعلم هذه اللغات .
في الواجهة الخلفية يوجد قسمين هامين يجب ان تركز عليهم وهي لغة البرمجة و نظام ادارة قواعد البيانات فهناك العديد من لغات البرمجة الذي يمكن استعمالها ولكن انت فقط يجب ان تختار لغة واحدة فقط و تتعلمها وهذه هي ابرز اللغات و اشهرهم :
- php (لغة برمجة )
- ruby (لغة برمجة)
- node.js (اطار عمل للغة js)
- asp .net (اطار عمل خاص بلغة c#)
- django (اطار عمل خاص بلغة python) ....
فهناك العديد من اللغات يمكن البحث عليها وتعلمها واحدة منها او اكثر (لكن في حالة اردت تعلم مثلا django فمن الضروري معرفة اساسيات python كذلك بالنسبة لجميع الاطر عمل قبل تعلمهم يجب عليك تعلم اللغة الذي تم برمجتهم به).
ثم بعدها سوف تختار نظام ادارة قواد البيانات واشهرهم :
- sql server
- mysql
- nosql
- mongoDB...
✔ الخطوة 2 : هي تعلم الاشياء المتقدمة في هذا المجال :
ففي الواجهة الخلفية سيلزمك تعلم :
- تعلم اطار عمل bootatrap والذي يسهل عليك الاشتغال بلغة css .
- احد اطر العمل الخاصة ب js واشرهم : angular و react و vue .
- تعلم تقنيات ajax و json .
- تعلم less او sass ... وهم يساعدونك في العمل ب css بطريقة جيدة ومختصرة اكثر وستفيدك في المشاريع الكبيرة الذي تكون فيها اكواد css كبيرة جدا .
1- بالنسبة لتصميم الموقع - الواجهة الامامية fornt end -
✔ عليك ان يكون لديك شكل الموقع وعدد صفحاته و اهم شيء هو شكل الصفحة الرئيسية لانها اول شيء يراه الزائر بعد الدخول للموقع لذالك يجب تصميمها بشكل جيد .
✔ انشاء هيكل الموقع بواسطة لغة html ثم تقوم بتزيينه بواسطة css .
✔ استعمل مكتبة bootstrap لكي توفر عليك وقت اكثر .
✔ استعمل ال التقنيات الحديثة في ال css مثل ال flex box و grid system لانها تجعل الموقع اكثر مرونة و تناسق
✔ عليك ان تقوم بترتيب جميع الاشياء في الموقع (الكلمات، الجمل، الصور ...) بشكل صحيح واتباع التسلسل البصري .
✔ يجب استعمال على الاكثر لونين في الموقع (لون غامق و لون فاتح مع درجتهما) لكي لا يأثر موقعك على الزائر ويكون مرتاح فيه .
✔ بالنسبة للكتابة يجب ان تكون العنوانين الاولية بخط كبير ولون غامق اكثر مقارنة بالعنوانين الثانوية .
✔ ثم اجعل المواقع متجاوب مع جميع الاجهزة من الهاتف الصغير الى الحاسوب الكبير و ال bootstrap ستساعدك فيه .
✔ استعمل js واحد اطر العمل (react او vue او angular) لتقوم ببرمجة الموقع ويكون اكثر دينامك مع المستخدم .
2 - بالنسبة لتصميم الموقع - الواجهة الامامية back end -
✔ في حالة يوجد في موقعك مكان لملء البيانات فمن الضروري ان تعرض رسالة خطأ في حالة قام الزائر بادخل معلومات غير ملائمة .
مثلا هناك مكان لكتابة الاسم المستخدم و البريد الاكتروني ... في حالة كتب في الاسم المستخدم : ahmed و في البريد : ahmed46 .. فلا تقل له يوجد خطأ في البيانات بل اخبره الخطأ اين يوجد بالضبط مثلا (البريد المدخل غير صالح ...) وبهذا سيكون لموقعك تجربة مستخدم UX جيدة
✔ لتجنب اختارق موقعك عليك ان تؤمن موقع و الثغرات تكون غالبا في ال input و url . لذالك يجب ان تعرف ماذا سوف يحتوي عليه ذالك ال input او url و توقع نوع البيانات الذي سترسل لنا و التعامل معها .
مثلا لدينا input يجب ان يدخل فيه الشخص اسمه فقط فيجب قبل ان نرسل البيانات الى قاعدة البيانات ان نعرف هل في هذا ال input يوجد فقط اسم (يعني حروف) ثم نرسلها اما في حالة مثلا يوجد فيه كود html او js او رقم... نرسل للزائر رسالة خطأ. لانه في حالة قام بادخال مثلا :
<script> alert("hello"); </script>
ولم نضع اي دالة للتحقق من البيانات سوف يتم ارسالها الى قاعدة البيانات ولذالك سيتم كلما دخلنا الى مكان سيظهر فيه رسالة منبثقة في الموقع ومكتوب فيها hello والمخترق يمكن استعمال هذه الثغرة وفقط تحتاج الى القليل من js bom لتستفيد منها بصفتك مخترق .
كذلك بالنسبة لل url فمثلا يكون روابط المواقع
http://exemple.com/search.php?user=akram
فالمخترق سيقوم بتغييرakram الى اكواد sql وبعدها سوف ستحكم في قاعدة البيانات الا في حالة قمت بادخال دالة تقوم بحميات المدخلات .
إرسال تعليق