4 طرق لخلق تجارب الويب أكثر ثراء
لقد تطورت شبكة الويب بشكل كبير من كونها مستودع مستندات بسيط ، ولدينا الآن متصفحات قادرة على التفاعلات المرئية الغنية على سطح المكتب وكذلك المحمول.
نظرًا لأنني أود التحدث عن موضع الويب في هذه المقالة ، فإن العديد من الميزات التي سأغطيها قد يكون لها دعم محدود ، لذا من المهم استخدام الموارد مثل caniuse.com يحتوي على قائمة قوية من الميزات والمخططات التي تحدد مكان دعمها.
دعونا نتعمق في الطرق الأربع التي يمكنك تحسين موقعك UX:
1. CSS
CSS هي لغة التصميم لمستنداتنا ، فنحن نميل إلى التفكير في ذلك بعبارات بسيطة مثل تغيير حجم الخط أو لونه ، ولكنه يزداد قوة مع ميزات مثل التحويلات والرسوم المتحركة. نحن أيضًا نحصل على ميزات جديدة لجعلها أكثر قوة.
إذا كنت قد استخدمت Vector Masks في أدوات مثل Photoshop ، فيجب أن تكون على دراية بالفكرة الكامنة وراءها مسارات كليب CSS. تسمح لك هذه الميزة بتحديد شكل في CSS يحدد الأجزاء الشفافة وغير الشفافة لمحتوى HTML الخاص بك. هذه تعمل كبيرة مع انتقالات المغلق لإخفاء وكشف عناصر واجهة المستخدم. وبالمثل ، تشق أقواس CSS طريقها إلى الويب ، مما يسمح لك بتعريف الأجزاء الشفافة من محتواك باستخدام صورة. يتيح لك هذا استخدام الشفافية بشكل أكثر فاعلية في تصميماتك من أجل الاهتمام البصري أو المواد.
2. SVG
معظم الصور التي نجدها على الويب اليوم هي صور نقطية مكونة من وحدات بكسل. هذا يعني أنه كلما قمنا بتدريجهم أو مشاهدتها على أجهزة ذات دقة أعلى ، يتم الحصول على بيكسلات.
الرسومات المتجهية رائعة لأنها تتكون من أوليات هندسية تحافظ على حوافها الزاهية في أي حجم.
SVG هو تنسيق متجه للويب. يمكننا استخدامه لعرض الرسومات بل وحتى التعامل مع خصائصه مع CSS. حيث يكون SVG فعالاً للغاية عندما ندمجه مع البرمجة النصية. يفرقع، ينفجر هي مكتبة جافا سكريبت تجعل من السهل التعامل مع محتوى SVG وتحريكه. فهو يركز على المتصفحات الحديثة ، لذا فهو يدعم أحدث ميزات SVG مثل المجموعات ومسارات القصاصة. Snap مفتوح المصدر على GitHub حتى أننا استخدمناه لإنشاء إعلان بانر متحرك غني ، يمكنك قراءة المزيد عنه فيمدونتي.
وهنا عينة من إعلان قمنا به باستخدام SVG.
3. قماش ثنائي الأبعاد
2D Canvas هي ميزة أخرى قوية للويب الأمثل لرسم الأشكال والصور. فهو يوفر واجهة برمجة تطبيقات جافا سكريبت التي تمنحك تحكمًا دقيقًا في عنصر لوحة الرسم. كما يمنحك حرية دمج أشكال أخرى من الوسائط ، مثل الفيديو ، مما يخلق إمكانات لأزرار تفاعلية غنية تقوم بتشغيل لقطات الفيديو أو إيقافها مؤقتًا أو فركها. تدعم تقنية 2D Canvas الآن صيغ المزج ، والتي تسمح لك بمزج ألوان الطبقات بطرق مثيرة للاهتمام ، والتي يمكنك قراءة المزيد عنها هنا.
بدأنا أيضًا في الحصول على دعم فيديو ألفا الذي يسمح لنا بدمج الفيديو بسلاسة أكبر في المحتوى الخاص بنا. يوجد مثال مرح لفيديو ألفا فيه فيديو أغنية OK Go "WTF" .
تشتهر OK Go بمقاطع الفيديو الموسيقية المتقدمة ، وفي هذا الفيديو تحديدًا تصوير الكوريغرافيا أمام شاشة خضراء. بعد ذلك ، استمر استخدام معالجة البريد في جعل اللقطات فوقها تخلق تأثيرًا صدى رائعًا حيث كانت الشفافية. يمكننا إعادة إنتاج هذا التأثير باستخدام Canvas ثنائية الأبعاد ، ولكن يمكننا أخذها خطوة أخرى وجعلها تفاعلية باستخدام ميزات مثل صيغ مزيج قماش لإنشاء تأثيرات مرئية جديدة في الوقت الفعلي.
4. WebGL
يوفر WebGL واجهة برمجة تطبيقات ذات مستوى منخفض لرسم رسومات ثنائية الأبعاد وثنائية الأبعاد للأجهزة. الإمكانات هنا هي ألعاب نمط وحدة التحكم ، مثل Grand Theft Auto 5 تعمل بشكل صحيح داخل متصفحك. كما يمكنك أن تتخيل أن WebGL معقدة إلى حد ما ، مثل مكتبات مفتوحة المصدر Three.js توفير نقطة دخول رائعة مع أمثلة رائعة لتبدأ بها.
جيثب أصبح موردًا رائعًا لمجتمع المصادر المفتوحة. يمكنك العثور على Three.js و Snap على GitHub بالإضافة إلى مكتبات رائعة أخرى مما يسهل القيام بعمل رائع على الويب. غالبًا ما أضع التجارب والأدوات التي أجريها على GitHub أيضًا ، مثل a أداة شريحة الكاميرا اعتدت على إنشاء مسارات الكاميرا ل Three.js للطيران من خلال عوالم ثلاثية الأبعاد.
كما نرى أن الويب أصبح متنوعًا وقويًا بشكل متزايد ، إنه وقت مثير لأن تكون مطور ويب. تتزايد باستمرار تنوع التقنيات والموارد التي نمتلك إمكانية الوصول إليها ، ومن الممتع مشاهدة التجارب الغنية التي يخلقها الأشخاص معهم.