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

الموسوعة الحرة

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

تاريخ

1988–2001

على الرغم من أن تصميم المواقع الإلكترونية حديث نسبياً، إلا أنه يرتبط بمجالات أخرى كالتصميم الجرافيكي وتجربة المستخدم وفنون الوسائط المتعددة، لكن من الأنسب النظر إليه من منظور تقني. فقد أصبح جزءاً لا يتجزأ من حياة الناس اليومية. يصعب تخيل الإنترنت بدون رسومات متحركة، وأنماط طباعة متنوعة ، وخلفيات، وفيديوهات، وموسيقى. أُعلن عن شبكة الويب العالمية في 6 أغسطس 1991؛ وفي نوفمبر 1992، كان موقع CERN أول موقع إلكتروني يُطلق على شبكة الويب العالمية. خلال تلك الفترة، كانت المواقع تُنظم باستخدام <table>الوسوم التي تُنشئ أرقاماً على الموقع. لاحقاً، تمكن مصممو المواقع من إيجاد حلول بديلة لإنشاء المزيد من الهياكل والتنسيقات. في بدايات الويب، كانت بنية المواقع هشة ويصعب إدارتها، مما جعل استخدامها صعباً للغاية. في نوفمبر 1993، أُنشئ محرك البحث ALIWEB ، وهو أول محرك بحث على الإطلاق. [ 2 ]

بداية الإنترنت وتصميم المواقع الإلكترونية

في عام ١٩٨٩، وأثناء عمله في مركز الأبحاث النووية السويسري (سيرن )، اقترح العالم البريطاني تيم بيرنرز لي إنشاء مشروع عالمي للنصوص التشعبية ، والذي عُرف لاحقًا باسم شبكة الويب العالمية (WWW) . وولدت شبكة الويب العالمية بين عامي ١٩٩١ و١٩٩٣. كان بالإمكان عرض صفحات HTML النصية فقط باستخدام متصفح ويب بسيط يعمل بنظام الأسطر . [ ٣ ] في عام ١٩٩٣، ابتكر مارك أندريسن وإريك بينا متصفح موزاييك . في ذلك الوقت، كانت هناك متصفحات متعددة، إلا أن معظمها كان يعتمد على نظام يونكس ، وبالتالي كان يعتمد بشكل كبير على النصوص. لم يكن هناك نهج متكامل لعناصر التصميم الرسومي مثل الصور أو الأصوات . كسر متصفح موزاييك هذا النمط. [ ٤ ] أُنشئ اتحاد شبكة الويب العالمية ( W3C ) في أكتوبر ١٩٩٤ بهدف "قيادة شبكة الويب العالمية نحو تحقيق كامل إمكاناتها من خلال تطوير بروتوكولات مشتركة تُعزز تطورها وتضمن قابليتها للتشغيل البيني ". [ 5 ] وقد ثبّط هذا الأمر أي شركة من احتكار متصفح ولغة برمجة خاصتين بها ، الأمر الذي كان من شأنه أن يُغيّر مسار شبكة الويب العالمية ككل. ولا يزال اتحاد شبكة الويب العالمية (W3C) يضع المعايير، والتي يُمكن رؤيتها اليوم في جافا سكريبت ولغات أخرى. في عام 1994، أسّس أندريسن شركة موزاييك للاتصالات ، والتي عُرفت لاحقًا باسم نتسكيب للاتصالات ، ومتصفح نتسكيب 0.9 . وقد ابتكرت نتسكيب وسوم HTML الخاصة بها دون مراعاة عملية المعايير التقليدية. على سبيل المثال، تضمّن نتسكيب 1.1 وسومًا لتغيير ألوان الخلفية وتنسيق النصوص باستخدام الجداول على صفحات الويب. من عام 1996 إلى عام 1999، بدأت حروب المتصفحات ، حيث تنافست مايكروسوفت ونتسكيب على الهيمنة المطلقة على سوق المتصفحات. خلال هذه الفترة، ظهرت العديد من التقنيات الجديدة في هذا المجال، ولا سيما أوراق الأنماط المتتالية (CSS ) وجافا سكريبت و HTML الديناميكي . وبشكل عام، أدّت المنافسة بين المتصفحات إلى العديد من الابتكارات الإيجابية وساعدت في تطوير تصميم الويب بوتيرة سريعة. [ 6 ]

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

كتب تصميم المواقع الإلكترونية في متجر

في عام ١٩٩٦، أصدرت مايكروسوفت أول متصفح منافس لها، والذي كان متكاملاً بميزاته وعلامات HTML. وكان أيضاً أول متصفح يدعم أوراق الأنماط، التي كانت تُعتبر آنذاك تقنية تصميم غامضة، بينما تُعد اليوم جانباً مهماً من تصميم مواقع الويب. [٦] كان الهدف الأصلي من ترميز HTML للجداول هو عرض البيانات الجدولية . إلا أن المصممين سرعان ما أدركوا إمكانات استخدام جداول HTML لإنشاء تخطيطات معقدة متعددة الأعمدة لم تكن ممكنة لولا ذلك. في ذلك الوقت، ونظراً لأن التصميم والجماليات الجيدة بدت وكأنها تتفوق على بنية الترميز الجيدة، لم يُولَ اهتمام يُذكر للدلالات وإمكانية الوصول إلى الويب . كانت مواقع HTML محدودة في خيارات تصميمها، لا سيما مع الإصدارات السابقة من HTML. ولإنشاء تصميمات معقدة، اضطر العديد من مصممي الويب إلى استخدام هياكل جداول معقدة أو حتى استخدام صور GIF فارغة لمنع خلايا الجدول الفارغة من الانهيار. [ ٧ ] تم تقديم CSS في ديسمبر ١٩٩٦ من قِبل اتحاد شبكة الويب العالمية (W3C) لدعم العرض والتخطيط. وقد سمح هذا بأن يكون كود HTML دلاليًا بدلاً من أن يكون دلاليًا وعرضيًا في نفس الوقت، وحسّن إمكانية الوصول إلى الويب؛ انظر تصميم الويب بدون جداول .

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

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

في عام ١٩٩٨، أصدرت نتسكيب شفرة المصدر لبرنامج نتسكيب كوميونيكيتور بموجب ترخيص مفتوح المصدر ، مما أتاح لآلاف المطورين المشاركة في تحسين البرنامج. مع ذلك، قرر هؤلاء المطورون وضع معيار للويب من الصفر، وهو ما وجّه تطوير المتصفح مفتوح المصدر، وسرعان ما توسّع ليصبح منصة تطبيقات متكاملة. [ ٦ ] تأسس مشروع معايير الويب (Web Standards Project) الذي شجع على توافق المتصفحات مع معايير HTML و CSS . أُنشئت برامج مثل Acid1 و Acid2 و Acid3 لاختبار توافق المتصفحات مع معايير الويب. في عام ٢٠٠٠، أُصدر متصفح إنترنت إكسبلورر لنظام ماك، وكان أول متصفح يدعم HTML 4.01 وCSS 1 بشكل كامل. كما كان أول متصفح يدعم تنسيق صور PNG بشكل كامل . [ ٦ ] بحلول عام ٢٠٠١، وبعد حملة من مايكروسوفت، وصل إنترنت إكسبلورر إلى ٩٦٪ من حصة استخدام متصفحات الويب ، ولم يكن له منافسة تُذكر، مما مثّل نهاية حروب المتصفحات الأولى. [ ٨ ]

2001–2012

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

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

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

2012 وما بعدها

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

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

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

تصميم تجربة المستخدم

يُعد تصميم تجربة المستخدم (UX Design) أحد الأدوات الشائعة في تصميم المواقع الإلكترونية. وهو أسلوب شائع في فن تصميم المواقع الإلكترونية الحديث، ويتميز بواجهة سهلة الاستخدام وعرض مناسب. [ 11 ]

المهارات والتقنيات

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

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

تصميم تجربة المستخدم والتصميم التفاعلي

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

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

التحسين التدريجي

ترتيب التحسين التدريجي

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

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

على سبيل المثال، تستخدم المواقع القائمة على MediaWiki بما في ذلك ويكيبيديا التحسين التدريجي، حيث تظل قابلة للاستخدام أثناء تعطيل JavaScript وحتى CSS، حيث يتم تضمين محتوى الصفحات في كود HTML المصدر للصفحة، في حين أن Everipedia، على عكس ذلك ، تعتمد على JavaScript لتحميل محتوى الصفحات لاحقًا؛ تظهر صفحة فارغة عند تعطيل JavaScript.

تخطيط الصفحة

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

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

يُعدّ تصميم المواقع الإلكترونية المتجاوب نهجًا حديثًا، يعتمد على CSS3، ويُوفّر مستوىً أعمق من التخصيص لكل جهاز ضمن ملف أنماط الصفحة من خلال استخدام مُحسّن لقواعد CSS @media. في مارس 2018، أعلنت جوجل عن إطلاقها فهرسة المواقع التي تُعطي الأولوية للأجهزة المحمولة. [ 16 ] المواقع التي تستخدم التصميم المتجاوب مُهيأة تمامًا لضمان توافقها مع هذا النهج الجديد.

الطباعة

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

أُضيفت خاصية تحميل الخطوط لاحقًا إلى وحدة خطوط CSS3، وتم تطبيقها منذ ذلك الحين في متصفحات Safari 3.1 و Opera 10 و Mozilla Firefox 3.5 . وقد أدى ذلك إلى زيادة الاهتمام بتصميم الخطوط على الويب ، بالإضافة إلى زيادة استخدام خاصية تحميل الخطوط.

تتضمن معظم تصميمات المواقع الإلكترونية مساحة سلبية لتقسيم النص إلى فقرات، كما تتجنب محاذاة النص إلى الوسط. [ 17 ]

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

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

قد تُسبب الرسوم المتحركة التي لا يُفعّلها زائر الموقع مشاكل في إمكانية الوصول. وتشترط معايير إمكانية الوصول الصادرة عن اتحاد شبكة الويب العالمية أن يتمكن زوار الموقع من تعطيل الرسوم المتحركة. [ 18 ]

جودة الكود

قد يعتبر مصممو المواقع الإلكترونية الالتزام بالمعايير ممارسة جيدة. ويتم ذلك عادةً من خلال وصف يحدد وظيفة العنصر. قد لا يؤدي عدم الالتزام بالمعايير إلى جعل الموقع غير قابل للاستخدام أو عرضةً للأخطاء، ولكن المعايير قد تتعلق بالتصميم الصحيح للصفحات لضمان سهولة القراءة، بالإضافة إلى التأكد من إغلاق الوسوم بشكل صحيح. يشمل ذلك تصحيح الأخطاء البرمجية، وتنظيم الكود بشكل أفضل، والتأكد من تحديد المعرفات والفئات بشكل صحيح. تُسمى الصفحات ذات الكود الرديء أحيانًا بـ" حساء الوسوم" . لا يمكن التحقق من صحة الكود عبر W3C [ 9 ] إلا عند وجود تعريف صحيح لنوع المستند (doctype) ، والذي يُستخدم لتسليط الضوء على الأخطاء البرمجية. يحدد النظام الأخطاء والمناطق التي لا تتوافق مع معايير تصميم المواقع الإلكترونية. ويمكن للمستخدم تصحيح هذه المعلومات بعد ذلك. [ 19 ]

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

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

مواقع الويب الثابتة

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

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

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

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

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

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

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

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

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

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

لطالما أكد خبراء سهولة الاستخدام، بمن فيهم جاكوب نيلسن وكايل سوسي، على أهمية تصميم الصفحة الرئيسية لنجاح المواقع الإلكترونية، معتبرينها أهم صفحة في الموقع. [ 21 ] [ 22 ] [ 23 ] [ 24 ] مع ذلك، بدأ المختصون في مطلع الألفية الثانية يلاحظون أن جزءًا متزايدًا من زوار المواقع يتجاوزون الصفحة الرئيسية، ويتجهون مباشرةً إلى صفحات المحتوى الداخلية عبر محركات البحث والنشرات الإخبارية الإلكترونية وموجزات RSS . [ 25 ] دفع هذا العديد من المختصين إلى القول بأن الصفحات الرئيسية أقل أهمية مما يعتقد معظم الناس. [ 26 ] [ 27 ] [ 28 ] [ 29 ] وفي عام 2007، جادل جاريد سبول بأن الصفحة الرئيسية للموقع هي في الواقع أقل صفحاته أهمية. [ 30 ]

في عامي 2012 و2013، أصبحت الشرائح الدوارة (وتُسمى أيضًا "الشرائح المتحركة" و"اللافتات الدوارة") عنصرًا تصميميًا شائعًا للغاية على الصفحات الرئيسية، وغالبًا ما تُستخدم لعرض المحتوى المميز أو الحديث في مساحة محدودة. [ 31 ] ويرى العديد من المختصين أن الشرائح الدوارة عنصر تصميمي غير فعال، بل وتضر بتحسين محركات البحث وسهولة استخدام الموقع. [ 31 ] [ 32 ] [ 33 ]

المهن

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

تشمل الوظائف الأخرى التي قد تدخل في إنشاء موقع ويب ما يلي:

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

الذكاء الاصطناعي وتصميم المواقع الإلكترونية

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

انظر أيضاً

ملحوظات

  1. ↑ - علامات وعلامات فاصلة قائمة علىصور GIF<table>

مراجع

  1. 1 2 ليستر، جورجينا. "وظائف ومسؤوليات مختلفة لأشخاص مختلفين يشاركون في إنشاء موقع ويب" . فنون ويلز المملكة المتحدة . تم الاسترجاع في 17 مارس 2012 .
  2. ↑ CPBI، رايان شيلي. "تاريخ تصميم المواقع الإلكترونية: 30 عامًا من بناء الويب [ تحديث 2022 ] " . smamarketing.net . مؤرشف من الأصل بتاريخ 4 أكتوبر 2022. تم الاطلاع عليه بتاريخ 12 أكتوبر 2022 .
  3. ↑ "سيرة ذاتية أطول" . تم الاطلاع عليها بتاريخ 16-03-2012 .
  4. ↑ "متصفح الفسيفساء" (ملف PDF) . مؤرشف من النسخة الأصلية (ملف PDF) بتاريخ 2013-09-02 . تم الاطلاع عليه بتاريخ 2012-03-16 .
  5. ↑ زويكي ، إي دي؛ كوبر، إس؛ تشابمان، دي بي (2000). بناء جدران الحماية للإنترنت . الولايات المتحدة: أورايلي وشركاؤه. ص 804. ISBN  1-56592-871-7.
  6. 1 2 3 4 نيدرست، جينيفر (2006). تصميم المواقع الإلكترونية باختصار . الولايات المتحدة الأمريكية: أورايلي ميديا. الصفحات 12-14 . ISBN  0-596-00987-9.
  7. 1 2 تشابمان، كاميرون، تطور تصميم مواقع الويب ، ستة تنقيحات، مؤرشف من الأصل في 30 أكتوبر 2013
  8. ↑ "AMO.NET: موقع الوسائط المتعددة الأمريكي على الإنترنت (معاينة لمتصفح إنترنت إكسبلورر 6)" . amo.net . تم الاطلاع عليه بتاريخ 27-05-2020 .
  9. 1 2 "خدمة التحقق من صحة ترميز W3C" .
  10. ↑ W3C. "مبادرة إمكانية الوصول إلى الويب (WAI)" .{{cite web}}: صيانة CS1: الأسماء الرقمية: قائمة المؤلفين ( رابط )
  11. ↑ "ما هو تصميم المواقع الإلكترونية؟" . مؤسسة تصميم التفاعل . تم الاطلاع عليه بتاريخ 12-10-2022 .
  12. ↑ ثورلاسيوس، ليسبث (2007). "دور الجماليات في تصميم المواقع الإلكترونية" . مجلة نورديكوم . 28 (28): 63-76 . doi : 10.1515/nor-2017-0201 . S2CID 146649056 . 
  13. ↑ "ما هو مصمم المواقع الإلكترونية؟ (دليل 2022)" . BrainStation® . تم الاطلاع عليه بتاريخ 28-10-2022 .
  14. ^ كاستانيدا، جا فرانسيسكو؛ مونيوز ليفا، تيودورو لوكي (2007). “نموذج قبول الويب (WAM): تخفيف تأثيرات تجربة المستخدم”. المعلومات والإدارة . 44 (4): 384-396 . دوى : 10.1016/j.im.2007.02.003 .
  15. ↑ "بناء واجهة أمامية مرنة باستخدام التحسين التدريجي" . GOV.UK. تم الاطلاع عليه بتاريخ 27 أكتوبر 2021 .
  16. ↑ "إطلاق فهرسة المواقع الإلكترونية المتوافقة مع الأجهزة المحمولة أولاً" . مدونة مشرفي المواقع الرسمية من جوجل . تم الاطلاع عليها بتاريخ 9 يونيو 2018 .
  17. ↑ ستون، جون (16-11-2009). "20 نصيحة وإرشادات حول الطباعة الفعالة على الويب" . تم الاطلاع عليه بتاريخ 19-03-2012 .
  18. ↑ اتحاد شبكة الويب العالمية: فهم إرشادات إمكانية الوصول إلى محتوى الويب 2.2.2: الإيقاف المؤقت، والإيقاف، والإخفاء
  19. ↑ قسم ضمان الجودة في اتحاد شبكة الويب العالمية (W3C). "موقعي الإلكتروني متوافق مع المعايير! وموقعك؟" . تم الاطلاع عليه بتاريخ 21 مارس 2012 .{{cite web}}: صيانة CS1: الأسماء الرقمية: قائمة المؤلفين ( رابط )
  20. ↑ كريستنسن، ماتياس بيلمان (16 نوفمبر 2015). "مراجعة مولدات المواقع الثابتة: جيكل، ميدلمان، روتس، هوغو" . مجلة سماشينغ . تاريخ الاسترجاع: 26 أكتوبر 2016 .
  21. ↑ سوسي، كايل، هل تؤدي صفحتك الرئيسية وظيفتها كما ينبغي؟، واجهة سهلة الاستخدام، مؤرشفة من الأصل في 8 يونيو 2012
  22. ↑ نيلسن، جاكوب؛ طاهر، ماري (أكتوبر 2001)، سهولة استخدام الصفحة الرئيسية: تحليل 50 موقعًا إلكترونيًا ، دار نشر نيو رايدرز، رقم ISBN 978-0-7357-1102-0
  23. ↑ نيلسن، جاكوب (10 نوفمبر 2003)، أكثر عشرة إرشادات تصميم للصفحات الرئيسية انتهاكًا ، مجموعة نيلسن نورمان، مؤرشفة من الأصل في 5 أكتوبر 2013
  24. ↑ نايت، كايلا (20 أغسطس 2009)، نصائح أساسية لتصميم صفحة رئيسية فعالة ، ستة تنقيحات، مؤرشفة من الأصل في 21 أغسطس 2013
  25. ↑ سبول، جاريد (29 سبتمبر 2005)، هل تصميم الصفحة الرئيسية لا يزال ذا صلة؟، هندسة واجهة المستخدم، مؤرشف من الأصل في 16 سبتمبر 2013
  26. ↑ تشابمان، كاميرون (15 سبتمبر 2010)، 10 نصائح لتحسين سهولة الاستخدام بناءً على دراسات بحثية ، ستة تنقيحات، مؤرشفة من الأصل في 2 سبتمبر 2013
  27. ↑ غوتشا، زولتان، الأسطورة رقم 17: الصفحة الرئيسية هي أهم صفحة لديك ، مؤرشفة من الأصل في 2 يونيو 2013
  28. ↑ ماكغفرن، جيري (18 أبريل 2010)، تراجع الصفحة الرئيسية ، مؤرشف من الأصل في 24 مايو 2013
  29. ↑ بورتر، جوشوا (24 أبريل 2006)، تحديد أولويات وقت التصميم: نهج الذيل الطويل ، هندسة واجهة المستخدم، مؤرشف من الأصل في 14 مايو 2013
  30. ↑ سبول، جاريد (6 أغسطس 2007)، بودكاست أدوات سهولة الاستخدام: تصميم الصفحة الرئيسية ، مؤرشف من الأصل في 29 أبريل 2013
  31. 1 2 ميسنر، كاتي (22 أبريل 2013)، دوارات الصور: التحكم في دوامة الصور ، Usability.gov، مؤرشف من الأصل في 10 أكتوبر 2013
  32. ↑ جونز، هاريسون (19 يونيو 2013)، شرائح الصفحة الرئيسية: سيئة لتحسين محركات البحث، سيئة لسهولة الاستخدام ، مؤرشفة من الأصل في 22 نوفمبر 2013
  33. ↑ لاجا، بيب (8 يونيو 2019)، دوارات الصور وشرائح العرض؟ لا تستخدمها. (إليك السبب.) ، CXL، مؤرشف من الأصل في 10 ديسمبر 2019
  34. ↑ أوليكسي، والتر (2001). وظائف في تصميم المواقع الإلكترونية . نيويورك: مجموعة روزن للنشر، ص 9-11 . ISBN  978-0-8239-3191-0.
  35. ↑ فيسر، لارنو، وآخرون. ChatGPT لتصميم مواقع الويب: إنشاء مواقع ويب مذهلة . [الطبعة الأولى].، دار نشر PACKT، 2023.