كيفية البدء في إنشاء موقع ويب مثير للإعجاب لأول مرة

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

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

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

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

  • موقع لطيف تبحث لتمثيل نفسي
  • قائمة جميع بلوق بلدي وغيرها من المعلومات
  • تمكين اتصال سهل

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

ابدأ بهيكل الموقع

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

تحضير المحتوى

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

  • فقرات قليلة من النص عني
  • قائمة بآخر منشورات المدونة الخاصة بي
  • قائمة بأحدث التغريدات (اختياريًا)

تصميم الموقع

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

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

أنا ، من ناحية أخرى ، أقوم بإنشاء موقع ويب بسيط للملف الشخصي. يجب أن تبدو حديثة وجذابة ، بالتأكيد ، لكنها لا تحتاج إلى توليد أي إيرادات. لذلك يمكنني أن تبني قرار تصميم موقع الويب هذا على شعوري الشخصي. لذلك ، ذهبت إلى HTML5UP.net وفتحت بعض قوالب التصميم. كل هذه التصميمات سريعة الاستجابة وباردة وسهلة الضبط. بعد مراجعة العديد من الخيارات ، اخترت قالب الحالة الصلبة. خذ وقتك واختر واحدة تمنحك قشعريرة :-).

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

رحلة الزائر عبر موقع الويب الخاص بك

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

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

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

هذا يتيح لي إعداد قوالب HTML في شكلها النهائي. بمرور الوقت ، تعلمت أن قضاء المزيد من الوقت هنا وتحديد جميع صفحاتي ومحتواها المتوقع يوفر الكثير من الوقت أثناء التنفيذ الفعلي.

هل قمت بتنزيل قالب موقع HTML؟ ثم المضي قدما والحصول على قوالب جاهزة!

هيكل الموقع جنبا إلى جنب مع القالب المختار

تكنولوجيا الموقع

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

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

1. منطق مخصص

يعني النهج المنطقي المخصص أنك بحاجة إلى تنفيذ المنطق بأكمله بنفسك. أولاً ، ستحتاج إلى تثبيت خادم ويب (مثل Apache أو IIS) على جهاز الكمبيوتر الخاص بك. ستحتاج إلى اختيار لغة برمجة ، مثل PHP ، وتثبيتها على الخادم - جهاز الكمبيوتر الخاص بك أيضًا. وأخيرًا تأتي قاعدة البيانات ، مثل MySQL مع موصل وقت التشغيل الخاص بها. بالطبع ، يمكن أتمتة جميع هذه الخطوات باستخدام إحدى الحزم المعدة التي تثبت كل ذلك تلقائيًا ، مثل XAMPP أو WAMP.

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

2. الكل في واحد الحل

لكنك لست الوحيد الذي ينشئ موقعًا إلكترونيًا ، أليس كذلك؟ يجب أن يكون هناك العديد من الآخرين يفعلون نفس الشيء. نعم هناك. ولتسريع كل ذلك ، يمكنك استخدام نظام إدارة المحتوى (CMS). بشكل عام ، يتم تشغيلها على نفس مجموعة التقنيات التي وصفتها أعلاه ، لذلك لا تزال بحاجة إلى تثبيت هذه المتطلبات المسبقة على جهاز الكمبيوتر الخاص بك ولا تزال بحاجة إلى نفس مساحة الاستضافة. هم على سبيل المثال وورد ، دروبال ، وغيرها ، والتي تعمل على PHP و MySQL ، أو Kentico EMS تعمل على .NET Framework.

عند تثبيتها ، يتم تقديمك بواجهة إدارة لموقع الويب (فارغ). باستخدام هذه الواجهة ، يمكنك إما اختيار قالب لموقعك أو إثراء القوالب بوظائف ديناميكية.

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

3. العمارة Microservice

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

حل الكل في واحد القياسي الذاتي المستضافة

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

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

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

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

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

العمارة Microservice تتكون أساسا من خدمات ادارة العلاقات مع

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

كما ترى ، لم تعد الوظيفة جزءًا كبيرًا من التعليمات البرمجية. يتم فصلها بشكل جيد إلى كتل أصغر. هذا يعني أنه سيكون:

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

إذا فشل أي مزود خدمة في تقديم النتائج ، فلا توجد مشكلة في التبديل إلى مزود آخر. حسنا ، باستثناء تويتر :-).

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

اختيار العمارة الصحيحة

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

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

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

تابعونا ، في المقالة التالية ، سأوضح لك كيفية تشغيل قوالب HTML المعدة لديك ، ومقارنة أطر عمل JavaScript وشرح أفضل طريقة لمواصلة إنشاء موقع ويب يستند إلى خدمات microservice حتى لو كان لديك صفر تجربة سابقة.

مقالات أخرى في السلسلة:

  1. كيفية البدء في إنشاء موقع ويب مثير للإعجاب لأول مرة
  2. كيف تقرر أفضل التقنيات لموقعك؟
  3. كيفية تعزيز موقع الويب الخاص بك مع Vue.js والحد الأدنى من الجهد
  4. كيفية مزج CMS مقطوعة الرأس مع موقع Vue.js ودفع صفر
  5. كيفية جعل التقديمات آمنة على موقع API
  6. بناء موقع سريع للغاية وآمن مع CMS ليست صفقة كبيرة. أو هو؟
  7. كيفية إنشاء موقع ثابت مع Vue.js في أي وقت من الأوقات
  8. كيفية إعداد عملية إنشاء لموقع ثابت بسرعة