انتقل إلى المحتوى

تصميم المواقع

كيف تنشئ موقعًا إلكترونيًا بسيطًا؟

بقلم 4 دقائق قراءة

كيف تنشئ موقعًا إلكترونيًا بسيطًا؟

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

لنلقِ نظرة على كيفية البدء بشيء لا يتطلب أي معرفة بالبرمجة:

أنشئ مجلدًا باسم website.

  • أنشئ مجلدًا على جهاز الكمبيوتر.

  • انتقل إلى جهازك، وابحث عن مكان يمكنك إنشاء المجلدات فيه.

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

  • ثم انقر بزر الفأرة الأيمن واختر «New» من القائمة التي تظهر. سيفتح ذلك مربع حوار جديدًا يسألك عن نوع العنصر الذي تريد إنشاءه: اختر «Folder». يجب أن تظهر كلمة «Folder» بنص أزرق أسفل ما اخترته، وهذا يعني أن كل شيء على ما يرام!

  • اكتب website اسمًا لهذا المجلد الجديد، ثم اضغط Enter أو انقر في مكان آخر على الشاشة (أو اضغط Cancel إن لم يكن الأمر مهمًا).

افتح المجلد.

لفتح المجلد، يمكنك استخدام الطرفية (Terminal). افتح تطبيق Terminal على Mac أو Linux، أو موجّه الأوامر (Command Prompt) على Windows. ولاحظ أن الضغط على Ctrl + T في المتصفح يفتح علامة تبويب جديدة في المتصفح فقط، ولا يفتح الطرفية. ثم انتقل إلى مجلدك: اكتب cd ~/Desktop/website على Mac أو Linux، أو cd Desktop\website في موجّه الأوامر على Windows، واضغط Enter.

بعد أن تُفتح الطرفية داخل مجلد الموقع، اكتب nano index.html (على Mac أو Linux) أو notepad index.html (على Windows) واضغط Enter لإنشاء ملف باسم index.html داخل هذا المجلد.

أنشئ ملف index.html.

للبدء، ستحتاج إلى إنشاء ملف جديد في محرر الشيفرة. افتح الملف واحفظه باسم index.html. اسم ملف HTML مهم، فهو الصفحة الرئيسية التي تُحمَّل عندما يزور أحدهم موقعك. وعند حفظ ملف HTML، احرص على أن يكون امتداده «.html».

بعد أن تحفظ ملف index.html في المجلد المناسب بالاسم والامتداد الصحيحين، افتحه في نافذة متصفح لترى كيف يبدو!

افتح الملف في محرر الشيفرة.

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

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

  • تتيح بعض المحررات أيضًا سحب المجلدات والملفات وإفلاتها فيها لتسهيل إدارة ملفات مشروعك، كما توفّر علامات تبويب متعددة لتسهيل التنقّل بين الملفات. ومن الميزات الأخرى الجديرة بالاهتمام المدقق الإملائي ودعم لغات برمجة متعددة مثل HTML5 وCSS3 وJavaScript (وسنتناولها لاحقًا).

اختر أسلوبًا للموقع (مرح، احترافي، وغير ذلك)

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

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

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

ابدأ البرمجة! سنتناول ذلك بتفصيل أكبر بعد قليل.

الآن وقد كوّنت فكرة عن الصورة الكاملة، حان وقت الانطلاق وبدء البرمجة! سنتناول ذلك بتفصيل أكبر بعد قليل.

أول ما عليك فعله هو تثبيت محرر. المحرر، ويُعرف أيضًا بمحرر النصوص أو بيئة البرمجة، يُستخدم لكتابة الشيفرة (عادةً HTML وCSS و/أو JavaScript). تتوفر محررات كثيرة، ومن أشهرها Sublime Text 3 وAtom وBrackets.

بعد تثبيت المحرر على جهاز الكمبيوتر (أو الحاسوب المحمول)، حان وقت إعداد خادم ويب محلي ليكون لموقعك مكان يقيم فيه بعد نشره على الإنترنت. يمكنك تشغيل خادم ويب خاص بك محليًا باستخدام NodeJS أو Python3 مع Apache2 إن لم تكن تريد الدفع مقابل خدمات استضافة مثل Heroku.

لكن إن كان كل ما تحتاجه شيئًا بسيطًا مثل ما نشرحه هنا، فهناك خيارات مجانية كثيرة مثل GitHub Pages الذي يعتمد على Jekyll في الخلفية، وبذلك سيعمل كل هذا محليًا على جهازك على أي حال!

إنشاء موقع بسيط قد يكون سهلًا ما دامت لديك خطة وتلتزم بها.

أولًا، قبل أن تبدأ التخطيط، تأكد من أن هدفك واضح. ما الذي تريد تحقيقه؟ هل هناك عقبات قد تعترض طريقك نحو هدفك؟ وإن وُجدت، فماذا ستفعل إن حدث ذلك؟

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

الخلاصة

هنا يأتي دور إبداعك. يمكنك اختيار الألوان والأسلوب الذي تريده لموقعك، ما دام يتوافق مع الخطة التي عرضناها أعلاه. وتذكّر أيضًا أنه كلما كان الموقع أبسط، كان تنقّل الزوار فيه أسهل!

تخطط لموقع إلكتروني؟

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