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

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

من ويكيبيديا، الموسوعة الحرة

تصميم مواقع الويب مصطلح يشمل العديد من المهارات والتخصصات المختلفة في إنتاج وصيانة المواقع الإلكترونية. وتشمل مجالات تصميم الويب تصميم الرسوميات الخاصة بالويب؛ تصميم واجهة المستخدم (UI)؛ التأليف، بما في ذلك الأكواد المعيارية والبرمجيات الاحتكارية؛ تصميم تجربة المستخدم (UX)؛ وتحسين محركات البحث. غالبًا ما يعمل العديد من الأفراد ضمن فرق تغطي جوانب مختلفة من عملية التصميم، على الرغم من أن بعض المصممين قد يتولون جميع هذه الجوانب.[1][2][3][4] يُستخدم مصطلح "تصميم الويب" عادةً لوصف عملية التصميم المتعلقة بالواجهة الأمامية (جانب العميل) لموقع الويب، بما في ذلك كتابة الترميز. يتداخل تصميم الويب جزئيًا مع هندسة الويب في إطار تطوير الويب الأشمل. ومن المتوقع أن يكون لدى مصممي الويب وعي بـقابلية الاستخدام وأن يواكبوا أحدث إرشادات الوصول إلى الويب.

معنى تصميم الويب

[عدل]
مثال للتصميم من موقع ويكيبيديا

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

التاريخ

[عدل]
طالع أيضًا: تاريخ الإنترنت

1988–2001

[عدل]
على الرغم من أن لتصميم الويب تاريخًا حديثًا نسبيًا، إلا أنه يمكن ربطه بمجالات أخرى مثل التصميم الجرافيكي، تجربة المستخدم، وفنون الوسائط المتعددة، لكنه يُنظر إليه غالبًا من منظور تقني. لقد أصبح جزءًا كبيرًا من حياة الناس اليومية. ومن الصعب تخيل الإنترنت بدون الرسوم المتحركة، وأنماط مختلفة من الطباعة، والخلفيات، ومقاطع الفيديو، والموسيقى. أُعلن عن الشبكة في 6 أغسطس 1991؛ وفي نوفمبر 1992، كان CERN أول موقع يتم نشره على الشبكة العالمية. خلال هذه الفترة، كانت المواقع تُبنى باستخدام وسم <table> الذي أنشأ جداول على المواقع. ومع مرور الوقت تمكن المصممون من استغلاله لإنشاء هياكل وتنسيقات أكثر تعقيدًا. في البدايات، كانت بنية المواقع هشة ويصعب التحكم بها، مما جعل استخدامها صعبًا للغاية. في نوفمبر 1993، تم إنشاء علي ويب  [لغات أخرى]‏ كأول محرك بحث على الإطلاق (Archie Like Indexing for the WEB).[5]

بداية الويب وتصميم الويب

[عدل]
في عام 1989، وأثناء عمله في CERN بسويسرا، اقترح العالم البريطاني تيم بيرنرز-لي إنشاء مشروع نص فائق عالمي، عُرف لاحقًا باسم الشبكة العالمية. بين عامي 1991 و1993 وُلدت الشبكة العالمية. كانت صفحات لغة تأشير النص الترابطي النصية فقط تُعرض باستخدام متصفح ويب نصي بسيط.[6] في عام 1993، أنشأ مارك أندريسن وإريك بينا متصفح موزاييك. في ذلك الوقت كانت هناك عدة متصفحات، لكن معظمها كان يعتمد على أنظمة يونكس وكان نصيًا بشكل كبير. لم يكن هناك نهج موحد لعناصر التصميم الجرافيكي مثل الصور أو الأصوات. كسر متصفح موزاييك هذا النمط.[7] تم إنشاء اتحاد الشبكة العالمية (W3C) في أكتوبر 1994 "لقيادة الشبكة العالمية نحو تحقيق كامل إمكاناتها من خلال تطوير بروتوكولات مشتركة تضمن تطورها وتوافقها البيني".[8] وقد منع ذلك أي شركة من احتكار متصفح احتكاري أو لغة برمجة قد تغير طبيعة الشبكة العالمية ككل. يستمر W3C حتى اليوم في وضع المعايير، التي يمكن رؤيتها مع جافا سكريبت وغيرها. في 1994 أسس أندريسن شركة موزاييك للاتصالات التي أصبحت لاحقًا نتسكيب كومونيكيشنز، وأطلقت متصفح نتسكيب 0.9. أضاف نتسكيب وسوم HTML خاصة به دون الالتزام بالمعايير التقليدية، مثل وسوم تغيير ألوان الخلفية أو تنسيق النصوص باستخدام الجداول. بين 1996 و1999 بدأت حروب المتصفحات بين مايكروسوفت ونتسكيب. خلال هذه الفترة ظهرت تقنيات جديدة مثل أوراق الأنماط المتتالية، جافا سكريبت، وHTML الديناميكي. وساهمت المنافسة في دفع تطور تصميم الويب بسرعة.[9]

تطور تصميم الويب

[عدل]
كتب عن تصميم الويب في متجر
في عام 1996، أطلقت مايكروسوفت أول متصفح منافس لها، مزودًا بوسوم HTML ودعمًا لوراثة الأنماط (CSS). كان هذا حدثًا مهمًا لأنه سمح بفصل الشكل عن البنية.[9] كان ترميز HTML للجداول يُستخدم في الأصل لعرض البيانات الجدولية. لكن المصممين سرعان ما أدركوا إمكانية استخدامه لإنشاء تخطيطات معقدة متعددة الأعمدة لم تكن ممكنة بطرق أخرى. في ذلك الوقت، ومع أولوية التصميم الجمالي على البنية الجيدة، لم يُعطَ اهتمام كبير بالدلالات أو إمكانية الوصول إلى الويب. كانت مواقع HTML محدودة في خيارات التصميم، مما دفع المصممين إلى استخدام هياكل جدولية معقدة أو صور نسق الرسومات المتبادلة فارغة لتجنب انهيار الخلايا.[10] تم تقديم أوراق الأنماط المتتالية في ديسمبر 1996 من قبل W3C لدعم العرض والتنسيق، مما سمح بجعل كود HTML دلاليًا فقط وحسّن إمكانية الوصول.

في عام 1996، طُور فلاش (المعروف سابقًا باسم FutureSplash). في ذلك الوقت، كان أداة تطوير بسيطة نسبيًا مقارنة بالوقت الحالي، لكنه مكّن المصممين من تجاوز إمكانيات HTML وصور GIF المتحركة وجافا سكريبت. غير أن الحاجة إلى إضافة لتشغيله دفعت العديد من المطورين لتجنبه خشية فقدان الجمهور. ومع ذلك، انتشر بين فئات معينة وأصبح لاحقًا مستخدمًا في معظم المتصفحات بل وفي تطوير مواقع كاملة.[10]

نهاية حرب المتصفحات الأولى

[عدل]
في عام 1998، أصدرت نتسكيب برنامجها Netscape Communicator بترخيص مصدر مفتوح، مما أتاح لآلاف المطورين المشاركة في تحسينه. وقد قرر هؤلاء البدء من جديد بوضع معايير للويب، مما قاد إلى تطوير متصفح مفتوح المصدر توسع لاحقًا إلى منصة تطبيقات كاملة.[9] تم إنشاء مشروع معايير الويب للتشجيع على التوافق مع معايير لغة تأشير النص الترابطي وأوراق الأنماط المتتالية. ظهرت برامج مثل Acid1 وAcid2 وأسيد3 لاختبار المتصفحات. في عام 2000، أُصدر متصفح إنترنت إكسبلورر لنظام ماك، وكان أول متصفح يدعم HTML 4.01 وCSS1 بالكامل، وكذلك صيغة الصور PNG.[9] بحلول عام 2001، وبعد حملة من مايكروسوفت للترويج لإنترنت إكسبلورر، وصل إلى 96% من حصة استخدام المتصفحات، مما عنى نهاية الحرب الأولى حيث لم يعد له منافس حقيقي.[11]

2001–2012

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

منذ نهاية حروب المتصفحات، ظهرت متصفحات جديدة. كثير من هذه المتصفحات كان مفتوح المصدر، مما جعلها أسرع في التطوير وأكثر دعمًا للمعايير الجديدة. ويُنظر إلى هذه البدائل من قبل الكثيرين على أنها أفضل من إنترنت إكسبلورر الذي تقدمه مايكروسوفت. قام W3C بإصدار معايير جديدة لـ HTML (لغة تأشير النص الترابطي 5) وCSS (CSS3)، بالإضافة إلى واجهات برمجة تطبيقات جديدة للـ جافا سكريبت. ورغم أن مصطلح HTML5 يشير تقنيًا فقط إلى الإصدار الجديد من HTML و«بعض» واجهات برمجة تطبيقات جافا سكريبت، إلا أنه أصبح شائع الاستخدام للإشارة إلى مجموعة المعايير الجديدة كاملة (HTML5 وCSS3 وجافا سكريبت).

2012 وما بعده

[عدل]
مع تطور تقنيات جيل ثالث (شبكات اتصال) وLTE للإنترنت، انتقلت نسبة كبيرة من حركة مرور المواقع إلى الأجهزة المحمولة. أثّر هذا التحول على صناعة تصميم الويب، ودفعها نحو أنماط أكثر بساطة وخفة ووضوحًا. ظهر من هنا منهج «المحمول أولًا»، الذي يركز على إنشاء تصميمات موجهة للهواتف المحمولة أولًا، قبل تكييفها مع الشاشات الأكبر.

الأدوات والتقنيات

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

يستعين مصممو الويب بكلٍّ من محررات الرسوميات المتجهية ومحررات الرسوميات النقطية لإنشاء صور ورسومات مهيأة للويب أو نماذج أولية للتصميم. يمكن إنشاء موقع باستخدام برمجيات ما تراه هو ما تحصل عليه (ما تراه هو ما تحصل عليه) الخاصة ببناء المواقع، أو عبر نظام إدارة المحتوى، أو بترميز صفحات الويب يدويًا تمامًا كما كانت تُنشأ أولى الصفحات. من الأدوات الأخرى التي قد يستخدمها مصممو الويب: مدققات HTML للتحقق من صحة الأكواد.[12] أدوات اختبار سهولة الاستخدام وإمكانية الوصول للتأكد من أن المواقع تلتزم بإرشادات إمكانية الوصول على الويب.[13]

تصميم تجربة المستخدم (UX Design) أحد الأدوات الشائعة في تصميم الويب هو تصميم تجربة المستخدم (UX Design). وهو أسلوب حديث في فن تصميم الويب يتميز بواجهة سهلة الاستخدام وعرض مناسب للمحتوى.[14] المهارات والتقنيات التصميم التسويقي وتصميم الاتصال قد يساعد التصميم التسويقي وتصميم الاتصال في موقع ويب على تحديد ما يناسب جمهوره المستهدف، سواء كان ذلك فئة عمرية معينة أو جانبًا ثقافيًا محددًا. لذلك، يجب على المصمم فهم اتجاهات جمهوره. كما ينبغي له أن يعي نوع الموقع الذي يصممه؛ فمثلًا، تصميم مواقع الأعمال الموجهة للأعمال (B2B) قد يختلف بشكل كبير عن تصميم موقع موجه للمستهلك مثل مواقع البيع بالتجزئة أو الترفيه. يجب مراعاة أن لا يتعارض الجانب الجمالي أو التصميم العام للموقع مع وضوح ودقة المحتوى أو سهولة التنقل بين الصفحات.[15] عادةً ما يشرف مصممو الويب على تطوير المواقع لضمان أدائها الجيد، وقد يجرون تغييرات على النصوص أو الصور أو الرسومات أو التخطيط العام للموقع. وغالبًا ما يحددون موعدًا مع العملاء لمناقشة التخطيط والألوان والرسومات والتصميم قبل بدء العمل. ويقضي المصممون معظم وقتهم في تصميم المواقع وضمان أدائها المرضي، بالإضافة إلى إجراء اختبارات والتواصل مع مصممين آخرين بخصوص قضايا التسويق أو التخطيط العام للموقع.[16] تصميم تجربة المستخدم والتصميم التفاعلي يعتمد فهم المستخدم لمحتوى موقع ما غالبًا على فهمه لطريقة عمل الموقع. وهذا جزء من تصميم تجربة المستخدم، والذي يشمل التخطيط العام، التعليمات الواضحة، والعناوين. مدى إدراك المستخدم لكيفية التفاعل مع الموقع يعتمد أيضًا على التصميم التفاعلي. فإذا وجد المستخدم أن الموقع مفيد، فمن المرجح أن يستمر في استخدامه. المستخدمون المتمرسون قد يجدون الواجهات المميزة، حتى وإن كانت أقل وضوحًا أو أقل سهولة في الاستخدام، مفيدة. بينما المستخدمون الأقل خبرة قد لا يدركون مزايا الواجهات غير البديهية. لذلك، يتجه المصممون نحو تجربة مستخدم شاملة وسهلة الوصول لتناسب أكبر عدد ممكن من المستخدمين بغض النظر عن مهاراتهم.[17] تشمل تجربة المستخدم أيضًا عناصر من تصميم واجهة المستخدم. بعض الوظائف التفاعلية المتقدمة قد تتطلب مكونات إضافية (Plug-ins) أو مهارات عالية في لغات البرمجة. واختيار استخدامها أو عدمه قرار مهم في تجربة المستخدم، إذ قد يؤدي الاعتماد عليها إلى مشاكل في التوافق أو إعاقة وصول المستخدمين الأقل خبرة. التحسين التدريجي (Progressive Enhancement) التحسين التدريجي هو استراتيجية في تصميم الويب تركز على المحتوى أولًا، بحيث يتمكن الجميع من الوصول إلى المحتوى والوظائف الأساسية لصفحة الويب، بينما يحصل المستخدمون ذوو المتصفحات الأكثر تطورًا أو الإنترنت الأسرع على نسخة محسنة. يُطبق ذلك عمليًا عبر تقديم المحتوى من خلال HTML، ثم إضافة التنسيق والحركة عبر CSS، وأخيرًا تعزيز الوظائف عبر JavaScript. هذا النهج يضمن سرعة تحميل المحتوى ووضوحه حتى في المتصفحات البسيطة أو القديمة.[18] تخطيط الصفحة (Page Layout) يتأثر تصميم واجهة المستخدم بجودة تخطيط الصفحة. فقد يحرص المصمم مثلًا على أن يكون التخطيط متسقًا في جميع الصفحات. غالبًا ما تكون المواقع ذات العرض الثابت مصممة لتناسب دقة الشاشة الأكثر شيوعًا، وتكون في الغالب متمركزة من أجل الجماليات على الشاشات الكبيرة. التخطيطات السائلة (Fluid layouts): ظهرت كبديل للتخطيطات المعتمدة على الجداول، حيث تسمح للمتصفح بضبط التخطيط تبعًا لحجم الشاشة أو الخط. التصميم المتجاوب (Responsive Web Design): يعتمد على CSS3 وقاعدة @media لتخصيص العرض حسب الجهاز. في 2018 أعلنت Google عن الفهرسة المعتمدة على المحمول أولًا، مما جعل التصميم المتجاوب معيارًا مهمًا.[19] الطباعة (Typography) قد يفضل مصممو الويب استخدام عدد محدود من الخطوط المتشابهة لتجنب التعقيد. معظم المتصفحات تدعم عددًا محدودًا من الخطوط الآمنة. مع إدخال خاصية تحميل الخطوط في CSS3 وزيادة دعمها في المتصفحات، زاد الاهتمام بـ الطباعة على الويب. غالبًا ما يستخدم المصممون المساحات البيضاء لتقسيم النصوص وتجنب المحاذاة الوسطية للنصوص الطويلة.[20] الرسوم المتحركة (Motion Graphics) يمكن أن يؤثر استخدام الرسوم المتحركة على التخطيط وواجهة المستخدم. المواقع الترفيهية غالبًا ما تستفيد منها، بينما المواقع الجادة قد تعتبرها تشويشًا غير ضروري. لكن يمكن استخدام الرسوم المتحركة والفيديو بشكل فعّال إذا كانت مرتبطة بالمحتوى. مع ذلك، يجب أن تكون قابلة للتعطيل امتثالًا لمعايير الوصول التي يحددها اتحاد الشبكة العالمية.[21] جودة الكود (Quality of Code) يُعتبر الالتزام بالمعايير ممارسة جيدة في تصميم المواقع، حيث يُسهل القراءة ويقلل الأخطاء. الصفحات المكتوبة بكود سيء قد تُسمى مجازًا بـ حساء الوسوم (Tag Soup). يمكن استخدام خدمة التحقق من وسم W3C لاكتشاف الأخطاء والأماكن التي لا تلتزم بالمعايير.[22]

المحتوى المُنشأ

[عدل]
هناك طريقتان يتم من خلالهما إنشاء المواقع: بشكل ساكن أو ديناميكي.

المواقع الساكنة

[عدل]
المقالة الرئيسة: صفحة ويب ساكنة
الموقع الساكن يخزن ملفًا فريدًا لكل صفحة من صفحاته. في كل مرة يتم فيها طلب صفحة، يُعاد نفس المحتوى. يتم إنشاء هذا المحتوى مرة واحدة أثناء تصميم الموقع. عادةً ما يُكتب يدويًا، رغم أن بعض المواقع تستخدم عملية إنشاء آلية شبيهة بالمواقع الديناميكية، لكن نتائجها تُخزَّن على المدى الطويل كصفحات مكتملة. أصبحت هذه المواقع الساكنة المُنشأة تلقائيًا أكثر شيوعًا حوالي عام 2015، مع أدوات مثل Jekyll وAdobe Muse.[23]

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

المواقع الديناميكية

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

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

تصميم الصفحة الرئيسية

[عدل]
خبراء قابلية الاستخدام، ومنهم جاكوب نيلسن وKyle Soucy، غالبًا ما يؤكدون على أهمية تصميم الصفحة الرئيسية لنجاح الموقع ويعتبرونها أهم صفحة في أي موقع.[24][25][26][27]

مع ذلك، بدءًا من العقد الأول من الألفية، بدأ الممارسون يلاحظون أن جزءًا متزايدًا من حركة المرور على المواقع يتجاوز الصفحة الرئيسية، متجهًا مباشرةً إلى الصفحات الداخلية عبر محركات البحث، والنشرات البريدية الإلكترونية، وخلاصات RSS.[28] أدى ذلك إلى أن يجادل العديد من الممارسين بأن الصفحات الرئيسية أقل أهمية مما يعتقده معظم الناس.[29][30][31][32] في عام 2007، جادل Jared Spool بأن الصفحة الرئيسية لموقع ما هي في الواقع أقل صفحة أهمية فيه.[33] في عامي 2012 و2013، أصبحت "العروض الدوّارة" (Carousels)، والمعروفة أيضًا باسم "السلايدرز" أو "اللافتات المتحركة"، عنصر تصميم شائع جدًا في الصفحات الرئيسية، وغالبًا ما تُستخدم لعرض محتوى مميز أو حديث في مساحة ضيقة.[34] لكن العديد من الممارسين يرون أن العروض الدوّارة عنصر تصميم غير فعّال، وتضر بتحسين محركات البحث وقابلية الاستخدام.[34][35][36]

الوظائف

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

وظائف أخرى قد تُشارك في إنشاء الموقع: مصممو الجرافيك لإنشاء العناصر المرئية مثل الشعارات، والتخطيطات، والأزرار أخصائيو التسويق عبر الإنترنت للحفاظ على الوجود الرقمي من خلال حلول استراتيجية تستهدف الزوار باستخدام تقنيات التسويق والترويج عبر الإنترنت كتّاب تحسين محركات البحث (SEO) للبحث والتوصية بالكلمات المناسبة لإدراجها في الموقع، مما يجعله أكثر وصولًا وظهورًا في محركات البحث المتعددة كاتب محتوى ويب لإنشاء النصوص المكتوبة التي تجذب الفئة المستهدفة من الزوار[3] مصمم تجربة المستخدم (UX) الذي يدمج اعتبارات التصميم المتمحور حول المستخدم، بما في ذلك بنية المعلومات، التصميم المتمحور حول المستخدم، اختبار المستخدم، تصميم التفاعل، وأحيانًا التصميم المرئي.

الأساسيات التي يقوم عليها أي موقع إنترنت

[عدل]

يتكون أي موقع على الإنترنت من ثلاث عناصر أساسية (اسم الموقع وعنوانه - الخادم الذي توضع عليه ملفات الموقع - ملفات الموقع نفسه التي تعرض للمستخدم). تتطلب عملية تصميم أي موقع التعامل مع هذه العناصر الثلاث لأنها تكمل بعضها ليظهر الموقع على الإنترنت في النهاية.

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

[عدل]

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

التصميم والمحتوى

[عدل]

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

سهولة التصفح

[عدل]
  • يجب أن يكون نظام التصفح سهل وواضح للمستخدم ولايحتاج منه جهد للوصول إلى الصفحة المراد الوصول اليها
  • يجب أيضاً أن تكون وصلات التصفح واضحة في الصفحة وفي مكان بارز
  • يجب أن يعلم المستخدم في أي صفحة هو من صفحات الموقع بتوضيح العنوان في مكان ظاهر أو بتغيير لون وصلة الصفحة المتواجد عليها

التصميم المتجانس وسهولة التحميل

[عدل]
  1. التصميم المتجانس

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

  1. سهولة التحميل

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

الأنواع

[عدل]

محتوى تفاعلي ينفذ في الخادم

[عدل]

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

محتوى تفاعلي ينفذ عند المستخدم

[عدل]

وفي أثناء هذا التطور ظهر نوع آخر من المواقع التفاعلية ألا وهي المواقع ذات المحتوى الذي ينفذ عند المستخدم النهائي. ويتكون هذا النوع من عدة تقنيات تشمل:

منصات جاهزة لانشاء مواقع تفاعلية:

  • وردبريس WordPress
  • نوب كوميرس Nopcommerce
  • ديجانجو Django

الشكل النهائي للمواقع التفاعلية

[عدل]

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

برامج تصميم المواقع

[عدل]

المواقع المتجاوبة

[عدل]

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

الذكاء الاصطناعي وتصميم الويب

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

انظر أيضًا

[عدل]

المراجع

[عدل]
  1. ^ "W3C Markup Validation Service". مؤرشف من الأصل في 2018-07-11.
  2. ^ World Wide Web Consortium: Understanding Web Content Accessibility Guidelines 2.2.2: Pause, Stop, Hide نسخة محفوظة 15 ديسمبر 2017 على موقع واي باك مشين.
  3. ^ ا ب Lester، Georgina. "Different jobs and responsibilities of various people involved in creating a website". Arts Wales UK. اطلع عليه بتاريخ 2012-03-17.
  4. ^ W3C QA. "My Web site is standard! And yours?". مؤرشف من الأصل في 2017-12-31. اطلع عليه بتاريخ 2012-03-21.{{استشهاد ويب}}: صيانة الاستشهاد: أسماء عددية: قائمة المؤلفين (link)
  5. ^ CPBI, Ryan Shelley. "The History of Website Design: 30 Years of Building the Web [2022 Update]". smamarketing.net (بالإنجليزية الأمريكية). Archived from the original on 2022-10-04. Retrieved 2022-10-12.
  6. ^ "Longer Biography". مؤرشف من الأصل في 2025-09-09. اطلع عليه بتاريخ 2012-03-16.
  7. ^ "Mosaic Browser" (PDF). مؤرشف من الأصل (PDF) في 2013-09-02. اطلع عليه بتاريخ 2012-03-16.
  8. ^ Zwicky, E.D؛ Cooper, S؛ Chapman, D.B. (2000). Building Internet Firewalls. United States: O'Reily & Associates. ص. 804. ISBN:1-56592-871-7.
  9. ^ ا ب ج د Niederst، Jennifer (2006). Web Design In a Nutshell. United States of America: O'Reilly Media. ص. 12–14. ISBN:0-596-00987-9. مؤرشف من الأصل في 2025-03-08.
  10. ^ ا ب Chapman، Cameron، The Evolution of Web Design، Six Revisions، مؤرشف من الأصل في 2013-10-30
  11. ^ "AMO.NET America's Multimedia Online (Internet Explorer 6 PREVIEW)". amo.net. مؤرشف من الأصل في 2025-04-12. اطلع عليه بتاريخ 2020-05-27.
  12. ^ "W3C Markup Validation Service". مؤرشف من الأصل في 2025-09-10.
  13. ^ W3C. "Web Accessibility Initiative (WAI)". مؤرشف من الأصل في 2025-09-10.{{استشهاد ويب}}: صيانة الاستشهاد: أسماء عددية: قائمة المؤلفين (link)
  14. ^ "What is Web Design?". The Interaction Design Foundation (بالإنجليزية). Archived from the original on 2025-09-08. Retrieved 2022-10-12.
  15. ^ THORLACIUS، LISBETH (2007). "The Role of Aesthetics in Web Design". Nordicom Review. ج. 28 ع. 28: 63–76. DOI:10.1515/nor-2017-0201. S2CID:146649056.
  16. ^ "What is a Web Designer? (2022 Guide)". BrainStation® (بالإنجليزية الأمريكية). Archived from the original on 2025-08-05. Retrieved 2022-10-28.
  17. ^ Castañeda، J.A Francisco؛ Muñoz-Leiva، Teodoro Luque (2007). "Web Acceptance Model (WAM): Moderating effects of user experience". Information & Management. ج. 44 ع. 4: 384–396. DOI:10.1016/j.im.2007.02.003.
  18. ^ "Building a resilient frontend using progressive enhancement". GOV.UK (بالإنجليزية). Archived from the original on 2025-08-20. Retrieved 2021-10-27.
  19. ^ "Rolling out mobile-first indexing". Official Google Webmaster Central Blog (بالإنجليزية الأمريكية). Archived from the original on 2025-09-06. Retrieved 2018-06-09.
  20. ^ Stone، John (16 نوفمبر 2009). "20 Do's and Don'ts of Effective Web Typography". مؤرشف من الأصل في 2015-06-23. اطلع عليه بتاريخ 2012-03-19.
  21. ^ World Wide Web Consortium: Understanding Web Content Accessibility Guidelines 2.2.2: Pause, Stop, Hide نسخة محفوظة 2025-09-01 على موقع واي باك مشين.
  22. ^ W3C QA. "My Web site is standard! And yours?". مؤرشف من الأصل في 2025-08-26. اطلع عليه بتاريخ 2012-03-21.{{استشهاد ويب}}: صيانة الاستشهاد: أسماء عددية: قائمة المؤلفين (link)
  23. ^ Christensen، Mathias Biilmann (16 نوفمبر 2015). "Static Website Generators Reviewed: Jekyll, Middleman, Roots, Hugo". Smashing Magazine. مؤرشف من الأصل في 2025-06-25. اطلع عليه بتاريخ 2016-10-26.
  24. ^ Soucy، Kyle، Is Your Homepage Doing What It Should?، Usable Interface، مؤرشف من الأصل في 2012-06-08
  25. ^ Nielsen، Jakob؛ Tahir، Marie (أكتوبر 2001)، Homepage Usability: 50 Websites Deconstructed، New Riders Publishing، ISBN:978-0-7357-1102-0
  26. ^ Nielsen، Jakob (10 نوفمبر 2003)، The Ten Most Violated Homepage Design Guidelines، Nielsen Norman Group، مؤرشف من الأصل في 2013-10-05
  27. ^ Knight، Kayla (20 أغسطس 2009)، Essential Tips for Designing an Effective Homepage، Six Revisions، مؤرشف من الأصل في 2013-08-21
  28. ^ Spool، Jared (29 سبتمبر 2005)، Is Home Page Design Relevant Anymore?، User Interface Engineering، مؤرشف من الأصل في 2013-09-16
  29. ^ Chapman، Cameron (15 سبتمبر 2010)، 10 Usability Tips Based on Research Studies، Six Revisions، مؤرشف من الأصل في 2013-09-02
  30. ^ Gócza، Zoltán، Myth #17: The homepage is your most important page، مؤرشف من الأصل في 2013-06-02
  31. ^ McGovern، Gerry (18 أبريل 2010)، The decline of the homepage، مؤرشف من الأصل في 2013-05-24
  32. ^ Porter، Joshua (24 أبريل 2006)، Prioritizing Design Time: A Long Tail Approach، User Interface Engineering، مؤرشف من الأصل في 2013-05-14
  33. ^ Spool، Jared (6 أغسطس 2007)، Usability Tools Podcast: Home Page Design، مؤرشف من الأصل في 2013-04-29
  34. ^ ا ب Messner، Katie (22 أبريل 2013)، Image Carousels: Getting Control of the Merry-Go-Round، Usability.gov، مؤرشف من الأصل في 2013-10-10
  35. ^ Jones، Harrison (19 يونيو 2013)، Homepage Sliders: Bad For SEO, Bad For Usability، مؤرشف من الأصل في 2013-11-22
  36. ^ Laja، Peep (8 يونيو 2019)، Image Carousels and Sliders? Don't Use Them. (Here's why.)، CXL، مؤرشف من الأصل في 2019-12-10
  37. ^ Oleksy، Walter (2001). Careers in Web Design. New York: The Rosen Publishing Group, Inc. ص. 9–11. ISBN:978-0-8239-3191-0.
  38. ^ Visser, Larno, et al. ChatGPT for Web Design : Create Amazing Websites. [First edition]., PACKT Publishing, 2023.
مجلوبة من «https://ar.wikipedia.org/w/index.php?title=تصميم_مواقع_الويب&oldid=71994812»