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

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

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

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

يتضمن كود العرض:

• HTML و HTML 5
• CSS
• لغات البرمجة النصية مثل JavaScript و jQuery و Ajax.

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

1. إنشاء واجهة وسائط متعددة

يتم تحقيق التصميم المتحرك والغامر من خلال استخدام Adobe Flash أو مزيج من HTML و CSS ولغات البرمجة النصية الأخرى المختلطة معًا.

لسنوات عديدة كان Adobe Flash في المقدمة ، لكنه بدأ يتغير. في الوقت الحاضر مع تطوير HTML 5 و CSS ، أصبحنا قادرين على تكرار الكثير من التأثيرات التفاعلية والرسوم المتحركة بشكل متزايد.

تقدم HTML 5 ، أحدث إصدار من HTML ، خطوة كبيرة إلى الأمام فيما يتعلق بقدرات تصميم طبقة العرض. يوفر مجموعة أدوات محسّنة من العناصر والخصائص ويقر بالطريقة التي يعمل بها المصممون ويستخدمون عناصر معينة. على سبيل المثال ، يسمح للمصممين بتعريف مجموعة التنقل باستخدام “التنقل” الجديد بدلاً من عنصر “div” المستخدم مسبقًا. لقد تحسنت أيضًا ميزات دعم تصميم الرسوم المتحركة والتفاعل في HTML5 بشكل مثير للإعجاب ، كما أن حقيقة أن HTML5 مدعومة على متصفحات الأجهزة المحمولة مثل Safari من Apple قد فتحت إمكانيات تصميم الويب.

بضع كلمات عن Adobe Flash

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

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

HTML5 – بديل الفلاش

كما ذكرنا سابقًا ، يتيح الجمع بين HTML 5 و CSS و jQuery code الآن إعادة إنتاج مواقع الويب المتحركة التي لم تكن ممكنة إلا في Flash. باستخدام عنصر “canvas” أصبح الآن تصميم واجهة مستخدم غنية ومتحركة أسهل بكثير من أي وقت مضى. تدعم معظم متصفحات سطح المكتب والأجهزة المحمولة الحديثة معيار HTML5 الذي يجعل من الممكن إنشاء تصميم يعمل عبر العديد من الأنظمة الأساسية.

1.1 DHTML و JavaScript و jQuery و Ajax

ضع في اعتبارك أن HTML يشكل مجرد بنية للمحتوى. لغات البرمجة النصية مثل JavaScript و Ajax و jQuery التي تتحكم في سلوك عناصر واجهة المستخدم والمحتوى المعروض على الصفحة منسوجة في تلك البنية.

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

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

أمثلة على تأثيرات jQuery:

• تتمدد وتنهار حسب النوافذ
• تدوير الصورة الدائري
• تكبير الصورة عند التمرير وما إلى ذلك.

اياكس (JavaScript غير متزامن و XML) يسمح بمعالجة البيانات مثل إرسال البيانات أو استردادها في الخلفية (بشكل غير متزامن) دون التدخل في عرض أو سلوك صفحة الويب. لذلك لا يلزم إعادة تحميل الصفحة أو النقر فوق زر “تحديث” ويمكن تحديث / تحديث البيانات الموجودة على الصفحة تلقائيًا.

1.2 تأثيرات رسومية متقدمة CSS

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

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

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

تشمل مزايا استخدام CSS لواجهة المستخدم الخاصة بنا ما يلي:

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

1.3 الرسم المتجاوب

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

التصميم سريع الاستجابة ممكن بفضل جزء “استعلامات الوسائط في مواصفات CSS3”. يتعرف على حجم المتصفح ويخبر الصفحة بتحميل ورقة الأنماط المناسبة ، على سبيل المثال “عريضة. css” أو “mobilescreen.css”. هذا ممكن لأن أوراق الأنماط المختلفة تحتوي على أنظمة تخطيط وأحجام خطوط وإعدادات مختلفة لتحسين الصورة.

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