10 مصطلحات لتصميم الويب يحتاج الجميع إلى معرفتها

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

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

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



01. HTML، CSS & JavaScript

شروط تصميم الويب: HTML5

HTML تعني HyperText Markup Language ، و HTML5 هو الإصدار الأحدث

دعنا نخرج هذا من الطريق الصحيح في البداية!

لغة البرمجة

ترمز HTML إلى HyperText Markup Language ، وهي لغة الويب.

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

CSS

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

يسمح CSS بتعيين أشياء مثل لون النص والخلفية والحجم والشكل والموضع لجميع أجزاء الصفحة المختلفة.

جافا سكريبت

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

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

شيء مهم يجب ملاحظته هو أنه على الرغم من اسمها ، فإن JavaScript لا علاقة لها بلغة برمجة Java على الإطلاق.

اقرأ أيضًا:

02. تصميم مستجيب

شروط تصميم الويب: تصميم الويب سريع الاستجابة

أصبح تصميم الويب سريع الاستجابة النهج القياسي لجميع تصميمات الويب

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

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

لاحظ أن مفهوم التصميم سريع الاستجابة يدور حول أكثر بكثير من مجرد إعادة تنسيق المحتوى. اقرأ المقالات التالية حول التصميم سريع الاستجابة لمعرفة المزيد:

03. الترميز الدلالي

شروط تصميم الويب: الترميز الدلالي

تتمحور الترميز الدلالي حول ربط البيانات الوصفية ذات الصلة بالمحتوى

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

كيف تربح ايباد ميني مجانا

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

الأيام الأولى

في الأيام الأولى للويب ، كان عدد علامات HTML المتاحة محدودًا. العديد من العلامات التي كانت موجودة كانت ذات طبيعة دلالية بحتة:

العلامة ، على سبيل المثال ، تستخدم لترميز محتوى الفقرة.

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

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

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

و

و

إلخ) ، بدلاً من ملف أو - للتأكيد - الوسم.

كيفية الرسم بأقلام الحبر

جيل ضائع

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

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

العلامة ، وتم توسيع لغة HTML لتشمل علامات جديدة ذات توجه لغوي مثل و و.



04. SaaS

شروط تصميم الويب: SaSS

تصف SaaS (البرنامج كخدمة) كل شيء من محرّر مستندات Google إلى Photoshop Express

لا ينبغي الخلط مع ساس ، SaaS هو اختصار لـ Software as a Service. بعبارات بسيطة ، يعني هذا أي خدمة توفر منصة برمجية ، يتم تسليمها من السحابة أو عبرها.

تشمل الأمثلة الشائعة على SaaS قيد التشغيل أحدث إصدارات Microsoft Office عبر الإنترنت ومحرر مستندات Google و Photoshop Express.

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

05. اختبار أ / ب

يمكّنك اختبار A / B من تجربة إصدارات مختلفة من صفحة الويب

يمكّنك اختبار A / B من تجربة إصدارات مختلفة من صفحة الويب

اختبار A / B هو منهجية لتجربة طرق مختلفة لتحقيق نفس النتيجة النهائية ، بهدف تحديد الحل الأكثر فعالية من خلال التجريب.

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

من خلال الاستمرار في عملية تكرارية للنماذج الأولية والتقييم والتكيف ، يمكن أن يوفر اختبار A / B زيادة كبيرة في معدل التحويل للصفحات الفردية. إنها أداة مفيدة للاستخدام: التحويل الأفضل يعني ميزانية أفضل!

اقرأ أيضًا:

  • كيفية استخدام اختبار AB وتتبع العين ومحسِّن مواقع الويب
  • خمس مهارات تحتاجها لإنجاح اختبار AB
  • الطريق إلى نجاح تطبيقات الويب: النماذج الأولية واختبارات المستخدم

06. الهواء

شروط تصميم الويب: ARIA

يصف ARIA (تطبيق إنترنت غني يمكن الوصول إليه) التقنيات التي تساعد في إتاحة الوصول إلى الويب

ARIA هو اختصار لـ Accessible Rich Internet Application ، ويشير إلى فكرة أن تطبيقات الويب يتم استخدامها من قبل مجموعة من الأشخاص ، مع احتياجات مختلفة للتكنولوجيا المساعدة والتصميم.

يستخدم ARIA عادةً كمصطلح للمساعدة في وصف التقنيات المستخدمة للمساعدة في سد الفجوة بين احتياجات المستخدم وموقع الويب أو تطبيق الويب.

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

اقرأ أيضًا:

07. هندسة المعلومات (IA)

شروط تصميم الويب: IA

تدور هندسة المعلومات (IA) حول كيفية تنظيم موقع الويب

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

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

  • اقرأ أيضًا: لماذا يعد تخطيط موقع ويب مثل بناء منزل

08. البرمجة النصية من جانب الخادم

شروط تصميم الويب: PHP

البرمجة النصية من جانب الخادم - باستخدام لغة مثل PHP - تعني أن معالجة البيانات تتم على الخادم

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

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

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

09. التسلسل الهرمي البصري

شروط تصميم الويب: التسلسل الهرمي المرئي

التسلسل الهرمي المرئي يعني ترتيب عناصر التصميم للتأكيد على بعضها على البعض الآخر

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

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

10. التمرير اللانهائي / المنظر

التمرير اللانهائي والتمرير المنظر هما تقنيتان مرتبطتان تزداد شعبية بشكل متزايد

التمرير اللانهائي والتمرير المنظر هما تقنيتان مرتبطتان تزداد شعبية بشكل متزايد

التمرير اللانهائي والاختلاف المنظر شيئان منفصلان ، لكنهما غالبًا ما يتم رؤيتهما معًا ، لذا قمنا بتجميعهما معًا هنا.

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

الفرضية هي أنه أثناء قيام المستخدم بالتمرير لأسفل صفحة باتجاه نهاية المحتوى ، يتم تحميل محتوى جديد وإلحاقه بأسفل الصفحة ، مما يؤدي إلى إنشاء تمرير 'لانهائي'. تشمل الأمثلة الشائعة عرض الجدول الزمني لفيسبوك و Pinterest و Tumblr.

كيفية رسم شعار شيكاغو بولز خطوة بخطوة

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

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

اقرأ أيضًا:

كلمات: سام هامبتون سميث