تطوير وتصميم مواقع الإنترنت 101

web_development_101هل تريد معرفة أساسيات تطوير الويب والتصميم؟ مدهش…


ولكن هناك مشكلة في هذا الخط الفكري ، أو عدد منهم في الواقع …

  • ما الغرض من امتلاك موقع ويب? هل يحتاج الجميع حقا واحد?
  • إذا كان الأمر كذلك ، كيف يمكنك بناء موقع ويب عالي الجودة? أو بعبارة أخرى ، كيف تتعلم تطوير الويب الأساسي والتصميم الذي يسمح لك ببناء هذا الموقع عالي الجودة بنفسك?
  • الأهم من ذلك ، هل يمكنك بناء موقع إلكتروني عالي الجودة في أول محاولة لك? أم أنك تحتاج إلى سنوات من الخبرة خلفك ، قبل أن تتمكن من الحصول على أي نتيجة فوق الفزع?

دعونا نجيب على كل ذلك دليل المبتدئين لتطوير الويب وتصميمه.

[تنبيه المفسد. نعم ، يمكنك بناء موقع إلكتروني عالي الجودة في محاولتك الأولى.]

ما تمت تغطيته في هذا الدليل?

حسنًا ، أولاً وقبل كل شيء ، يسعدنا أنك واصلت القراءة وأنك قررت تجربة تطوير الويب! إليك كيفية تنفيذ ذلك:

يتم عرض الفصول بطريقة بسيطة للغاية ، مع المحتوى الرئيسي على اليسار ، والعناصر القابلة للتنفيذ على اليمين. مثل ذلك:

مقدمة إرشادية: الفصل الأول

الآن ، كيفية المتابعة:

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

جاهز؟ دعنا نذهب إلى الفصل 1.

لمن هذا الدليل?

إذا كنت ترغب في تعلم تطوير الويب الأساسي والتصميم ، فهذا الدليل لك. مهما كان الدافع الخاص بك.

أيضًا ، لا تحتاج إلى أي معرفة تقنية مسبقة للبدء (بخلاف “مهارات الويب الأساسية”). الهدف الأساسي من هذا الدليل هو أن تكون نوعًا من الدورة “101” لكل من يهتم ببناء مواقع الويب وتعلم تطوير الويب.

فيما يلي بعض الأسباب الشائعة التي قد تكون مهتمًا بها:

  • 1. أنت بحاجة إلى موقع ويب لعملك (وتريد أن ترى ما إذا كان يمكنك بنائه بنفسك).
  • 2. تريد تعلم تطوير الويب بدافع الشغف أو الاهتمام المؤقت (لا بأس بهذا).
  • 3. أنت بحاجة إلى موقع ويب للمدرسة.
  • 4. أنت تساعد صديقًا أو فردًا من العائلة على نشر موقعه على الإنترنت.

الفكرة الرئيسية التي ستوجهنا

هذا مهم! ويرجى ألا تغضب منا إذا كنت مطور ويب متقدمًا يقرأ هذا ، ولكن الفكرة الرئيسية التي ستوجهنا طوال هذا المورد الكامل لتصميم الويب والتصميم 101 هي:

“منهج المقاومة الأقل”

فيما يلي المبادئ الثلاثة لأسلوب المقاومة الأقل:

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

الفصل 1: الخطة

فكرتك ونوع موقع الويب واسم المجال والاستضافة.

قبل إعداد موقع ويب ، ستحتاج إلى خطة

السخرية كما قد يبدو – ضربت الثمانينيات “فريق A” علمتنا ، الخطة الجيدة هي مفتاح النجاح.

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

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

لكن…

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

بدلًا من ذلك ، فكر فيما يلي:

  1. افصل نفسك عن أي أهداف فنية قد تكون لديك. على سبيل المثال ، الهدف من تعلم تقنيات مواقع الويب أو برامج معينة على مواقع الويب.
  2. اسأل نفسك سؤالًا رئيسيًا واحدًا: “لماذا أحتاج إلى الموقع؟”

هذا ليس عنك ، بل عن هدف الموقع.

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

  1. ما الهدف من الموقع تحقيقه?
  2. ماذا سيكون “الشيء” الرئيسي الذي سيقدم من خلال الموقع؟ (على سبيل المثال عملك ، منتج ، مشاركات مدونتك ، إلخ.)
  3. هل سيكون للموقع أي غرض خاص؟ (على سبيل المثال ، متجر للتجارة الإلكترونية ، ومجموعة مصورين ، وما إلى ذلك)
  4. من هو الجمهور المستهدف?
  5. لماذا هم مهتمون بموضوع الموقع?
  6. ما الألم الذي يحله الموقع لأفراد الجمهور الفردي?

حول هذه الأسئلة الثلاثة الأخيرة ، لنتحدث إلى الجمهور لمدة دقيقة …

هناك قاعدتان رئيسيتان لبناء موقع الويب. إليك القاعدة رقم 1:

 يأتي القارئ / الزائر أولاً ، وهو الشخص الرئيسي الذي يجب أن يرضي موقعك على الويب.

بطريقة ما ، موقعك على الويب ليس ملكك. إنها ملكهم.

(القاعدة رقم 2 سنناقشها بعد دقيقة).

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

“قرف! لا يفهم الناس ما هو هذا الموقع. كيف يمكن أن يكونوا جاهلين ؟! ” – ينتهي بك الأمر في التفكير. ولكن كما اتضح ، كان الجاهل أنت.

الطريقة الوحيدة لتجنب ذلك هي بناء موقع الويب الخاص بك مع وضع القارئ في الاعتبار منذ البداية.

لذا … خذ تلك الورقة وأجب عن جميع الأسئلة أعلاه.

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

ستكون هذه الإجابات أداة قوية بشكل استثنائي أثناء تقدمك. ستتمكن من الرجوع إليهم كلما واجهت قرارًا بشأن موقعك على الويب.

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

أسماء المجال واستضافة المواقع

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

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

لذلك ، مضيف ومجال …

الأخبار السيئة هنا هي أن كلاهما يكلف المال.

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

لكن لنبدأ في البداية.

يستضيف الويب:

  • بعبارات بسيطة ، مضيف الويب هو المكان الذي يجلس فيه موقع الويب الخاص بك ، وحيث يمكن للزوار العثور عليه. بطريقة ما ، تستضيف الويب لمواقع الويب تمامًا مثل الشقق للبشر. تحت الغطاء ، مضيفي الويب هم شركات تؤجر خوادمها مقابل المال (… شقق صغيرة لمواقع الويب الخاصة بك).
  • للبدء ، ستفعل خطة استضافة مشتركة قياسية. يمكنك الحصول عليها لأي شيء يبدأ من $ 3 / month. إليك مقارنة لطيفة بين مضيفي الويب المشهورين. تحقق من ذلك وحدد أي من هذه الشركات تبدو مناسبة لك تمامًا. ومع ذلك ، فإن توصياتنا تذهب إلى SiteGround و A2 Hosting و Dreamhost.

المجالات:

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

 

اقتراحات ونصائح لاختيار اسم المجال

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

هناك مدرستان:

  • أسماء النطاقات ذات العلامات التجارية. هذه هي المجالات التي تتكون من كلمات غير موجودة. فكر في أشياء مثل Google.com أو Yahoo.com. قبل ظهور هذه الشركات ، لم تكن هذه الكلمات تعني شيئًا. الجانب الإيجابي لاسم نطاق ذي علامة تجارية هو أنه … جيد ، وعلامة تجارية عالية ، ولا تنسى ، ومن السهل تمييز موقعك عن الآخرين.
  • الأسماء المستندة إلى الكلمات الرئيسية. وتتألف تلك الكلمات من كلمات موجودة ، وضعت في تسلسل يصف الغرض من الموقع. فكر في أشياء مثل Pizza.com أو StartBloggingOnline.com. باستخدام اسم نطاق من هذا القبيل ، سيتمكن زوارك من التنبؤ بدقة بنوع موقع الويب الذي هم على وشك زيارته. الجانب السلبي هو أن هذه المجالات بشكل عام أقل علامة تجارية.
  • الأسماء المجمعة. هذه هي المجالات ذات العلامات التجارية والمجالات القائمة على الكلمات الرئيسية مجتمعة. فكر أو Facebook.com أو Copyblogger.com. تشير هذه الأسماء إلى جزء من جزء من طبيعة موقع الويب للزائر ، لكنها لا تزال ذات علامة تجارية عالية.

بعض الإرشادات العامة بغض النظر عن نوع المجال الذي تختاره:

  • اجعل المجال سهل الحفظ.
  • اجعلها قصيرة وبسيطة. كلما كان المجال أطول ، كان أكثر إرباكًا.
  • احصل على .com (إن أمكن). .com هو “نطاق المستوى الأعلى” الرئيسي المتاح. لا تقبل بأي شيء آخر.
  • حاول تجنب الواصلات. احصل على اسمك في نموذج أحادي النقطة مثل “cakerecipes.com” بدلاً من “cake-recipes.com”

الأشياء التي يجب أن تكون جاهزة بعد هذا الفصل:

  • اسم المجال.
  • مضيف ويب.
  • ورقة إجاباتك – أهداف موقعك وكيف سيخدم الجمهور.

هل تريد المزيد من المساعدة؟ إليك المزيد من القراءة لك:

  • لماذا الاستضافة المشتركة؟ مقارنة الأنواع الرئيسية للمضيفين
  • 10 أشياء تجعل مضيف الويب جيدًا
  • 12 قواعد لاختيار اسم المجال الصحيح
  • دليل تخطيط شامل للموقع

الفصل 2: ​​التصميم والتأطير

خذ ورقة وقلم وخدش مع بنية موقع الويب الخاص بك

حسنًا ، دعنا ندخل مرحلة التصميم.

أولاً ، إليك أخلاقيات العمل التي سنتناولها هنا:

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

في الفصل الأول ، ذكرنا شيئًا أطلقنا عليه القاعدة رقم 1 لبناء مواقع الويب. حان وقت القاعدة رقم 2:

القاعدة رقم 2 لبناء الموقع:

فكر في المحتوى أولاً.

المحتوى هو ما يهم على موقع الويب. ليس التصميم. المحتوى.

يأتي الناس للمحتوى. لا يأتون للتصميم. التصميم هو مجرد وسيلة لتقديم المحتوى.

لا تبدأ أبدًا بمظهر موقعك الإلكتروني. ابدأ بالمحتوى. المحتوى. المحتوى. المحتوى.

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

“هل حقا؟ المظهر لا يهم حقا؟ ” – أنت تسأل.

بدلاً من هزيمتنا ، تحقق من هذه الصفحة:

موقع بسيط

تعتبر صفحة الويب البسيطة هذه أفضل تفسير لما هو التصميم والغرض الذي تخدمه على الإنترنت.

لذا تذكر المحتوى أولاً!

محتوى وهيكل الموقع

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

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

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

فكر ما هي الطريقة الأكثر فعالية لتنظيم المحتوى الخاص بك على موقع الويب?

افعل كل هذا على الورق. من المحتمل أن يكون أسهل وأسرع بالنسبة لك من تعلم بعض برامج الرسم البياني على الفور.

مثال:

هيكل المحتوى

امسح معًا إطارًا سلكيًا

الإطار السلكي في تصميم الويب هو ببساطة مخطط الصفحة أو مخطط – دليل مرئي يمثل إطار موقع الويب (تخبرنا ويكيبيديا).

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

اخدش إطارًا سلكيًا معًا

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

لذا ، كيف للإطار السلكي?

حسنًا ، هناك طريقتان إذا كنت مبتدئًا:

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

لهذا الأخير ، اذهب هنا – دليل رائع.

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

الأشياء التي يجب أن تكون جاهزة بعد هذا الفصل:

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

قراءة متعمقة:

  • 9 خطوات لتخطيط محتوى الموقع
  • جديد في تصميم المواقع؟ أبدأ هنا.

الفصل 3: تجربة المستخدم وواجهة المستخدم

لا تقلل أبدًا من أهمية تجربة المستخدم وواجهة المستخدم

كما هو الحال في تجربة المستخدم وواجهة المستخدم.

يعطينا WebDesignerDepot تعريفًا شعريًا إلى حد ما للاثنين:

واجهة المستخدم هي السرج والركاب والعهد.

UX هو الشعور بأنك قادر على ركوب الحصان وحبل الماشية.

لتعريف عملي أكثر:

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

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

يعد كل من تصميم UX و UI مواضيع كبيرة بحد ذاتها ، وهناك الكثير من العناصر الأصغر التي تلعب دورًا في النتيجة النهائية.

باختصار ، هناك الكثير لتعلمه إذا كنت قد بدأت للتو رحلتك.

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

أهداف المستخدم

UX عن أهداف المستخدم … ليس الكثير من أهدافك … أهداف المستخدم.

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

كيف تترجم إلى هدف الزائر؟ … ما هو الشيء الوحيد الذي يريد الزائر تحقيقه أو تحقيقه عندما يأتي إلى موقعك؟ هذا هو هدفهم.

ما مدى سهولة تحقيق هذه الأهداف?

بعد ذلك ، ركز على السؤال التالي:

  • هل يمكن للزائر تحقيق هدفه بسهولة؟ – هل يمكنهم الوصول إلى المعلومات الدقيقة التي أتوا من أجلها بطريقة بسيطة?

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

تأكد من أن بنية المحتوى والصفحات التي فكرت بها منطقية من وجهة نظر المستخدم. تأكد من أنه من الممكن لهم التنقل بين الصفحات المهمة بحرية وبطريقة غير مربكة.

بشكل أساسي ، نحن هنا نتأكد من أن الموقع يمنح زوارك قيمة.

من الصعب معرفة كل هذا بمفردك ، أليس كذلك?

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

وبالتحديد ، فكر في ما يحبطك عندما تزور مواقع ويب مشابهة لتلك التي تريد إنشاؤها؟ ربما هناك بعض المعلومات التي يصعب الوصول إليها حقًا أو بعض عناصر الواجهة التي تجعل الموقع مربكًا.

تدوين الملاحظات واستخلاص النتائج وعدم ارتكاب نفس الأخطاء في موقعك على الويب.

استخدام العاطفة كأداة

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

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

للعمل على الجزء العاطفي من الوظيفة ، فإن أحد أفضل الأدوات هو اللون.

الألوان لها معاني مختلفة في الثقافات المختلفة. يمكن أن يجعل فهم هذه الاختلافات عملك أسهل كثيرًا. إليك ورقة غش لطيفة.

بمجرد أن تكون في ملعب الألوان التي تريد (ربما) استخدامها ، إليك بعض الإرشادات العامة عند العمل مع الألوان:

  • اختر مخططًا لونيًا رئيسيًا يتكون من زوجين من الألوان التي تتناسب جيدًا معًا. إليك منشئ مخطط ألوان رائع.
  • اختر لونًا واحدًا سيكون لون تشكيلتك – اللون الذي سيتم استخدامه لأزرار الإجراءات ، وشراء الأزرار ، وما إلى ذلك بشكل أساسي ، أي شيء يحتاج إلى اهتمام المستخدم.

الطباعة

في كثير من الحالات ، تكون الطباعة هي المكان الذي تكسب فيه (أو تخسر) لعبة بناء الموقع.

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

لا ينصح.

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

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

تحقق من هذا الموقع ، على سبيل المثال:

البونوبو

لاحظت أي شيء؟ نعم ، الخطوط ضخمة وتبدو رائعة!

إليك كيفية العمل على هذا:

  • بشكل عام ، يحتاج كل تصميم لموقع ويب إلى نوعين من النصوص: العناوين و الفقرات. في معظم الحالات ، سيفعل خط واحد فقط لكل منها.
  • انتقل إلى خطوط Google – مكتبة Google الخاصة للخطوط المجانية التي يمكنك استخدامها على موقع الويب الخاص بك – وابحث عن خط العنوان الذي تستمتع به حقًا.
  • بعد ذلك ، خذ اسم هذا الخط ، وابحث عنه في Font Pair – إنها مكتبة من أزواج الخطوط المعدة مسبقًا والتي تتوافق معًا بشكل جيد.
  • اختر إقرانًا يبدو رائعًا.
  • دوّن أسماء كلا الخطين ، ستحتاجهما لاحقًا.

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

على سبيل المثال ، وجدنا خطًا يسمى Bree Serif في خطوط Google نستمتع به تمامًا:

Bree-Serif

ثم أخذناها إلى Font Pair ، واقترح الموقع أن Bree Serif يتماشى مع Open Sans. في احسن الاحوال:

Bree-Serif-open-sans

الهيكل النهائي

أخيرا ، الخطوة الأخيرة!

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

الأشياء التي يجب أن تكون جاهزة بعد هذا الفصل:

  • أهداف المستخدم الخاصة بك مدرجة بشكل واضح.
  • تم التحقق من الإطار السلكي للتأكد من أن هذه الأهداف ليست مربكة.
  • تم اختيار نظام الألوان.
  • أحسب الطباعة.
  • تخطيط / هيكل / تنظيم الموقع بالكامل.

قراءة متعمقة: 

  • مجلة UX
  • كشك UX
  • علم النفس والعاطفة وراء اللون في تصميم الويب
  • ما هو تصميم تجربة المستخدم؟ نظرة عامة والأدوات والموارد
  • تحديد أهداف الأعمال الذكية لموقع ويب
  • 8 قواعد لإنشاء طباعة فعالة

الفصل 4: WordPress أو HTML أو قوالب?

حدد المسار الذي ستذهب إليه – أنظمة إدارة المحتوى أو قم بكودها من البداية

هنا يبدأ العمل الحقيقي القذر تحت غطاء المحرك!

ربما يكون هذا أيضًا الجزء الأكثر رعبًا في العملية (اعترف بذلك!).

لمرة واحدة ، حان الوقت لوضع القلم والورقة جانبًا والبدء في العمل مع بعض البرامج.

وعند البوابة مباشرة ، هناك الكثير من الأسئلة …

  • هل يجب أن أتعلم HTML?
  • ماذا عن CSS?
  • هل ستعمل قوالب موقع HTML الجاهزة على عاتقي?
  • هل أحتاج إلى تعلم لغة برمجة مثل PHP?
  • لقد سمعت أن WordPress هو السبيل لبناء موقع في هذه الأيام.
  • رأيت إعلان Squarespace Super Bowl. ما الأمر مع ذلك?
  • ماذا يسمى هذا الشيء بجملة؟ أو دروبال?
  • وعلى وعلى وعلى.

الجواب على كل ذلك هو نعم.

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

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

إذن إليك كيفية المضي قدمًا من هذا الفصل إلى الأمام. أول, اختر الشخصية التي تحددك بشكل أفضل:

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

أجاب أ)? انتقل إلى الفصل 5.

أجاب ب)? انتقل إلى الفصل 6.

أجاب ج)? لا تتردد في الاطلاع على هذه المقالة ثم العودة (يجب أن تساعدك على تحديد المسار المثالي):

  • مراجعة أفضل 8 منصات للتدوين وبناء مواقع الويب … تم وصف كل منصة مع مزاياها وعيوبها ، كما يقترح المورد أفضل خيار متاح (Wix أو SB) لاحتياجاتك الخاصة.

هل قرأتها؟ عظيم! إذن أي من الشخصيات المذكورة أعلاه يصفك بشكل أفضل – ا او ب)?

الأدوات التي قد تكون مفيدة على طول الطريق:

  • الرسومات: Paint.NET، Gimp، Pixlr.
  • كتابة التعليمات البرمجية: Notepad ++ ، TextWrangler ، SublimeText.
  • إدارة العمل: Trello.
  • التصميم: مخططات الألوان وخطوط Google والأدوات من هنا.
  • تصوير: Unsplash ، AllTheFreeStock

الفصل الخامس: مقدمة في HTML و CSS & جافا سكريبت

كيف تكون المواقع حقيقة مضمنة

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

لغة البرمجة

HTML هي لغة مواقع الويب. يتم إنشاء كل صفحة ويب أو تحويلها إلى HTML في مرحلة ما.

على سبيل المثال ، لمشاهدة بنية HTML لهذا الدليل الذي تقرأه هنا ، فقط اضغط على “Ctrl + U” على لوحة المفاتيح.

يحدد HTML كل كتلة تراها في صفحة الويب. في نهاية اليوم ، لعرض أي شيء على صفحة ويب ، يجب تحويله إلى HTML.

لتعلم HTML بشكل فعال ، ننصحك بالتسجيل في إحدى الدورات (المجانية أو المدفوعة) المتاحة على الويب. يمكن العثور على بعض من أفضلها في Codeacademy أو Treehouse.

على سبيل المثال ، إليك قسمًا محددًا حول Codeacademy عن HTML و CSS.

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

هذا هو النهج الشامل ل HTML.

CSS

إن CSS – لتخطي التفاصيل الفنية المملة – مسؤولة عن تصميم كل شيء مرئي على صفحة ويب.

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

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

لمزيد من التعلم المتعمق ، تحقق أيضًا من أقسام CSS في Codeacademy أو Treehouse.

جافا سكريبت ، jQuery ، Bootstrap ، إلخ.

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

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

أخيرًا ، يعد Bootstrap اختراعًا مثيرًا للاهتمام. تم تقديمها في الأصل بواسطة Twitter ، وهي في الأساس بيئة أمامية تعمل على تسريع عملية إنشاء موقع ويب من خلال تقديم معظم عناصر الموقع الشائعة التي تم إنشاؤها مسبقًا. يبدو معقدًا ، أليس كذلك?

لكنها ليست كذلك. ما عليك سوى مراجعة دورة البداية هذه في Codeacademy (بالمناسبة ، هكذا تعلمنا في البداية Bootstrap).

الأشياء التي يجب أن تكون جاهزة بعد هذا الفصل:

  • بشكل أساسي ، تم تصميم المسودة الأولى لموقع HTML / CSS بالكامل. من هناك ، يمكنك البدء في تكرار وتحسين النتيجة النهائية.

الفصل 6: منصات بناء الموقع

إنشاء أول موقع لك؟ جرب منصات مواقع مجانية مثل WordPress أو Joomla أو Drupal

الفصل السادس: منصات بناء الموقع

  • سكوير سبيس
  • وورد
  • جملة & دروبال

هناك المزيد من منشئي مواقع الويب أكثر مما يمكنك هز العصا عليه. (إذا كنت من النوع الذي يهز الأشياء.)

حسنا ، نكتة جانبا.

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

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

بدءًا من تلك الأسهل في الفهم:

سكوير سبيس

منصة الموقع الوحيدة التي تعلن خلال السوبر بول.

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

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

وورد

بصراحة ، نحن نحب WordPress.

في معظم الأوقات ، يعد النظام الأساسي المثالي لإنشاء موقع ويب به. لديها توازن مثالي بين التعقيد وسهولة الاستخدام ، وهي في الأساس قابلة للتخصيص إلى ما لا نهاية.

وورد الرسوم المتحركة

أيضًا ، إنها حاليًا منصة الويب الأكثر شيوعًا لهم جميعًا. وفقًا لمشاركة منشئ WordPress – Matt Mullenweg – يعمل WordPress الآن على تشغيل 25٪ من الإنترنت بالكامل. هل يمكن أن يكون كل هؤلاء الناس على خطأ?

حسنًا ، لبدء استخدام WordPress ، فأنت تحتاج فقط إلى نطاقك واستضافتك. برنامج WordPress نفسه مجاني تمامًا.

للبدء ، لا تتردد في اتباع أحد هذه المسارات:

أ) “مسار البدء السريع”

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

ب) “المسار المتعمق”

  • ابدأ بتعلم WordPress من خلال دورة تدريبية عبر الإنترنت. تقدم Treehouse واحدة رائعة.
  • اختر المظهر والمكونات الإضافية تمامًا كما هو مذكور أعلاه. بدلاً من ذلك ، قم ببناء المظهر الخاص بك من الألف إلى الياء.

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

جملة ودروبال

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

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

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

لمزيد من التدريب المتعمق ، هناك دورات رائعة على Lynda.com ، لكل من Joomla و Drupal.

الأشياء التي يجب أن تكون جاهزة بعد هذا الفصل:

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

الفصل 7: التصميم المستجيب للجوال

يستخدم أكثر من 60٪ من الأشخاص الهواتف المحمولة والأجهزة اللوحية لتصفح الويب

تعد استجابة الجوّال الآن جانبًا مهمًا جدًا في بناء مواقع الويب ، ربما أكثر من أي وقت مضى.

إليك موضوع المشكلة برمتها:

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

لكن هناك مشكلة.

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

تتضمن بعض المشكلات الشائعة ما يلي:

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

وهنا يأتي دور فكرة الاستجابة للجوّال.

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

إليك شرح أفضل: ما هيك هو تصميم الويب المستجيب?

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

إذا كانت هناك مشاكل ، فأنت بحاجة إلى إصلاحها.

بعض الحلول:

  • تصميم الويب سريع الاستجابة – الكيفية
  • كيفية جعل موقع الويب يستجيب في حوالي 15 دقيقة

الفصل 8: جمع كل شيء

أنت تعرف الأساسيات ، الآن حان دورك

انتظر ، نحن على وشك الانتهاء!

هذا هو الفصل الأخير في رحلتنا الطويلة.

في هذه المرحلة ، يجب أن يكون لديك أول موقع ويب تم بناؤه … سواء كان ذلك مع WordPress أو HTML / CSS المصنوع يدويًا أو بعض أداة إنشاء مواقع الويب أو أي أدوات أخرى حددتها للوظيفة.

باختصار ، مبروك! ولكن لا يزال هناك شيئان يستحقان القيام به:

  • تحقق جيدًا من الأشياء التي ناقشناها في الفصلين 1 و 2. تأكد من أن الأهداف تعمل بالفعل للمستخدم النهائي ، وأن موقع الويب ليس مربكًا.
  • تحقق من صحة هيكل التعليمات البرمجية من خلال خدمة التحقق من الترميز الخاصة بـ W3C.
  • تحقق مما إذا لم تكن هناك أي مشكلات أمنية في الموقع. استخدم الماسح الضوئي من Sucuri لذلك.
  • احصل على تعليقات من المجتمع. تحقق من رأي الآخرين في عملك. يمكن أن تكون المنتديات في Sitepoint جيدة لذلك.

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

كما قلنا في البداية ، لا تتردد في استخدام جدول المحتويات والانتقال من فصل إلى آخر ومورد إلى المورد كما تراه مناسبًا.

أخيرًا ، نحن فضوليون … ما هو أكبر تحدٍ لك عندما يتعلق الأمر ببناء موقع الويب أو تطويره أو تصميمه؟ يرجى المشاركة في التعليقات أو عبر Twitter. كلنا آذان!

شكرا للقراءة ، أنت رائع!

  • المجموع 116
  • فيسبوك 116
  • تويتر 0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector