مراحل تصميم وانشاء موقع الويب

مفاهيم واساسيات مواقع الويب

موقع الويب :

• عبارة عن صفحة ويب web page أ, أكثر مترابطة مع بعضها تحت اس معين , موقع الويب له عنوان علي شبكة الانترنت يسمي بعنوان الموقع Web Address , ويمكن زيارة موقع الويب من خلال الكمبيوتر أو الهاتف المحمول .

صفحة الويب :

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

الصفحة الرئيسية :

• هي أول صفحة بموقع الويب والتي من خلالها يسهل الانتقال لباقي صفحات الموقع .

صفحات الويب الثابتة :

• محتواها معد بواسطة مصمم الصفحة ويظل هذا المحتوي ثابتا في كل مره يتم فيها زيارة الصفحة , تستخدم لعرض معلومات يتم الاطلاع عليها فقط بدون إمكانية إجراء معالجة من الزائرين لمحتواها , تستخدم أوامر HTML في تصميم هذا النوع من الصفحات .

صفحات الويب التفاعلية :

• هي صفحة معلومات تعرض محتوي يتيح للزائرين التفاعل معه ومعالجته , يستخدم لتصميم هذا النوع من صفحات أوامر html بالاضافة للغات اخري مثل لغة java script , لغة php وغيرها .

تصميم وإنشاء موقع الويب يمر بعدة مراحل  :

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

مراحل تصميم موقع بطريقة صحيحة

1. ضع افكارك على ورقة بيضاء
   معظم المصممين يقومون بالدخول مباشرة إلى برنامج الفوتوشوب لتصميم الموقع دون التفكير المبدئى فى التصميم , ان تصميم الموقع هو محاولة حل مشكلة , وليس فقط مجرد الوان و ظل وتدرجات فى الالوان .هذه المشكلة متمثلة فى لفت انتباه الزائر إلى المحتوي المراد التسويق له فى الموقع , محاولة ابقاء الزائر اطول فترة ممكنة , محاولة ابراز المحتوي لانه هو الاهم , كل هذه عوامل يجب اخدها فى الاعتبار وحل هذه المشاكل يتطلب بعض التخطيط لتصميم موقع ملفت .
2. تخطيط التصميم العام للموقع
   تخطيط الشكل العام للموقع والاقسام الرئيسية للموقع مثلا هيكلة السيدبار , الفوتور , الهيدر , وغيرها وهذه العملية تسمى Wireframing ويمكنك عمل ذلك اما على ورقة بيضاء او الفوتوشوب او استخدام احد برامج Wireframing .
3. وضع Grid المناسب فى الفوتوشوب او اي برنامج اخر
   البداية الصحيحة هى وضع Grid المناسب حتى يساعدك فى هيكلة اجزاء الموقع المختلفة فلا يمكن الاستغناء عنه
   اذا كنت تستخدم الفوتوشوب فهذا Action مناسب لتوليد Grid 1170
   لمن لا يعرف Grid هى خطوط ارشادية لوضع كل شئ فى مكانه الصحيح.
4. الخطوط والالوان المناسبة
   لا يستطيع احد انكار اهمية الخطوط والالوان فى تصميم موقع جذاب , بالنسبة للخطوط لا ينصح باستخدام اكثر من نوعين من الخطوط فى الموقع وايضًا يعتمد على طبيعة المشروع الخاص بك .
   بالنسبة للالوان فاستخدام الوان متناسقة هو اساس تصميم موقعك ويوجد بعض البرامج التى تساعدك فى تحديد نمط الالوان المناسب للاستخدام .
   ادوات مميزة لهذه المهمة :http://colorsupplyyy.com/app/
5. افتح المجال لابداعك وتحدى نفسك !
   بعد تصميم الاسياسيات يتبقى لك ان تتحدى نفسك وتبدع فى التصميم وتجله مميز ببعض اللمسات الجميلة , عليك فى كل مشروع ان تتحدى نفسك لاخراج شئ مميز, وحاول ان تضع نفسك دائمًا فى مكان زائر موقعك .

كيف تُنشئ موقع إلكتروني

بأسهل ما يمكن، خطوة بخطوة دون الحاجة لمبرمج أو لخبير

الخطوة الاولي:اختيار المنصة المناسبة لبناء موقعك الإلكتروني

• قبل التفكير بالألوان وتصميم الموقع، والنطاق (Domain)، يجب عليك أولاً اختيار المنصة المناسبة التي ستبني عليها موقعك الإلكتروني.
• ماذا نقصد بكلمة “منصة”؟
  قديماً في عام 2004 كانت تُبنى المواقع وصفحات الإنترنت باستخدام الـ HTML (أكواد) والـ CSS والفلاش، كل هذه الأمور تأخذ وقتاً طويلاً لتعلمها واتقانها.
• لهذا السبب يظن أغلب الناس أن إنشاء موقع إلكتروني من الصفر عبارة عن مهمة صعبة لا تصلح إلا للخبراء، أو على الأقل من لهم خلفية في التصميم والبرمجة، لكن هذا لم يعد صحيحاً بعد اليوم.
• في عام 2016، برامج إدارة المحتوى (CMS)، مثل الووردبريس أتاحت الفرصة للجميع كي يبنوا مواقعهم الإلكترونية بكل سهولة ويسر.
• برامج إدارة المحتوى (أو منصات بناء المواقع الإلكترونية) هي منصات سهلة الاستخدام يمكن لأي شخص التعامل معها، مهمتها بناء موقعك الإلكتروني وإدارة محتواه الرقمي بعيدا عن الأكواد وصفحات الـ HTML المتعبة.
• حوالي نصف المواقع على الإنترنت تعمل على منصة ووردبريس (WordPress)

الخطوة الثانية:اختيار نطاق واستضافة لموقعك الإلكتروني
لتحصل على موقع إلكتروني على الإنترنت أنت بحاجة إلى شيئين اثنين:

• اسم النطاق (Domain): وهو عنوان الموقع الإلكتروني، مثال: k3af.com.
• الاستضافة (Host): وهي خدمة -غالباً توفرها شركة- لربط موقعك الإلكتروني بالإنترنت.
• منصة الوردبريس مجانية بحد ذاتها، إلا أن النطاق والاستضافة ستكلفك حوالي 3$ – 5$ شهرياً (أرخص من كوب القهوة العادي)، مع ذلك سوف نريك طريقة للحصول على أحدهم مجاناً.
• حصولك على نطاق يحمل اسمك أو اسم شركتك لهو أمر مهم للظهور بشكل احترافي، بدلاً من إلحاقه بنطاق شخص آخر، (مثل النطاقات المجانية، يكون اسمك فيها متبوعاً بنطاق مزود الخدمة YourName.my-free-website.com).
• إضافة إلى ذلك، فإن امتلاكك لاستضافة خاصة بك سيمكنك من السيطرة على جميع زوايا موقعك الإلكتروني، مثل سرعة الموقع، جدار الحماية، تخزين الملفات، لن يهددك أحدهم -كما يحدث في الاستضافات المجانية- بحذف موقعك لأن مساحته “فوق الحد”.

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

• حان الآن وقت إعداد وتشغيل موقعك الإلكتروني. وأول شيء سنقوم به هو تنصيب منصة الووردبريس (WordPress) على نطاقك.

طريقة تنصيب الووردبريس

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

1. التنصيب الفوري، بضغطة زر واحدة One-Click-Installs.
   تقريباً أغلب شركات الاستضافة المحترمة لديها خيار “One-Click-Installs”، والذي سيوفر عليك الكثير من الوقت، فبضغطة زر واحدة ستتمكن من تنصيب أي برنامج (CMS) تشاء.. ووردبريس، جوملا، أو حتى دروبال.إذا سجلت في شركة Bluehost، أو أي شركة استضافة معتبرة، ستجد خيار/زر “One-Click-Installs” في لوحة تحكم حسابك (Control Panel).

إليك تفاصيل أكثر (هذه الخطوات متشابهة بين مختلف شركات الاستضافة):

• سجل دخولك إلى حسابك في شركة الاستضافة.
• اذهب للوحة التحكم (control panel).
• ابحث عن أيقونة/رمز منصة ووردبريس WordPress، واضغط عليه.
• ستنتقل إلى صفحة أخرى، اختر اسم النطاق (Domain) الذي تريد تنصيب المنصة عليه (اختر نطاق موقعك الإلكتروني).
• اضغط زر “Install Now”، انتظر عدة دقائق حتى ينتهي تثبيت المنصة، و ستنقل مباشرة إلى موقعك الإلكتروني الجديد.

1. التنصيب اليدوي.
   بعض شركات الاستضافة (لسبب أو لآخر) لا تهتم براحة عملائها متجاهلة تزويدهم بأببسط حقوقهم (الراحة)، لهذا تجدهم يتجاهلون توفير مزايا مثل زر “one-click-install”.. مع ذلك، إليك طريقة تنصيب منصة الوردبريس بشكل يدوي.