تطور عالم الانترنت من مجرد كونه وثيقة مستودع بسيط ( اي مجرد صفحات بها بعض البيانات و المعلومات البسيط )   ..  لدينا الآن متصفحات قادره علي التفاعلات البصرية التي تغنيك عن تطبيقات سطح المكتب و الهواتف النقالة ..

اردت التحدث في هذه المقاله عن اين يتجه الويب ؟ سأتحدث في العديد من المميزات لكن قد يكون كلامي عنها بسيط بعض الشئ و لكن سأتطرق لشرحها فيما بعد في مقالات مفصله .

دعونا نلقي نظرة في اربع طرق يمكنك من خلالها تعزيز موقعك .

اولاً : الـسي اس اس “CSS” :

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

يمكنك الان الاستغناء عن الفوتوشوب وبرامج تحرير الصور فيمكنك تعويض ما تحتويه هذه البرامج من مؤثرات بالـcss . سأتحدث معكم عن ميزه لطيفه و هي  CSS Clip Paths : تسمح لك هذه الميزه بتحديد اجزاء شكل معين و التحكم في شفافيته . لها بتأثيرات رائعه علي تحديد Elment معين و التحكم في شفايفته و تدرج بعض الخصائص كالتدرج في تغيير اللون من الاسود للابيض او الاحمر للاخضر . تكتب في الكود Transitions وتقبل الاعداد بالثانيه او جزء من الثانية فمثلاً اذا اردنا ان نعطي لصوره ما شفافيه نكتب الكود بالشكل التالي :

هنا قمنا بتعديل عرض الصورة لتعرض بدرجه شفافيه 50% . و حددنا سرعه تغيير التأثير بثانيه و احدة .. لمشاهدة التاثير نكتب كود الـhover للصورة :

جرب الكود و استمتع بقوة الـCSS . هناك الكثير من مميزات الـCSS ساتكلم عنها بالتفصيل في مقاله اخري .

ثانياً : الـاس في جي “SVG” :

معظم الصور التي توجد علي مواقع الانترنت هي صور نقطية – Pixel – وقد تجد مع اختلاف احجام الشاشات ان الصورة لا تظهر بشكل و اضح . ومن هنا تكمن قوة الـSVG حيث انه مهما كان حجم الصورة و مهما كان عرض الشاشة المعروض عليها فإن جودة الصورة و دقتها لا تختلف اطلاقا .

ان الـSVG : هو تنسيق لعرض الصور علي مواقع الويب حيث يتم تسجيل الصورة كملف نصي و بدمجمها مع مجموعة اكواد يتم عرضها بالشكل المطلوب و تتميز بقله الحجم و تساهم في تحميل صفحة الموقع بسرعه فتخيل ان لديك موقع لمعرض صور ويتم عرض 10 صور في الصفحة بدقة الـHD تخيل كيف سيكون الفرق اذا استخدمت صور بصيغ الـPNG او الـJpg او الـGif  او استخدمت الـSvg . ستجد الاختلاف ملحوظ في عرض الصور و سرعه الموقع الخاص بك .

هذه عينه بسيطة عن قوة الـSVG  ومميزاتها و سنعرضها ايضاً بالتفصيل في مقاله اخري .

ثالثاً : الـ2 دي كانفاس “2D Canvas” :

من افضل المميزات القوية في عالم الويب لرسم الصور و الاشكال . مكتبة جافا سكربت -API- تمنحك السيطرة الكاملة علي ملفات الوسائط ( صور و فيديوهات ) .. تسمح الـCanvas بدمج الالوان مع الطبقات بطريقة مثيرة للاهتمام بصرياً . تقدر تتعرف اكثر علي الـcanvas من هنـــا . سنتحدث بطريقة مفصله و اكثر توضيحا عن الـCanvas في مقاله اخري منفصلة ايضاً .

رابعاً : الـويب جي ال  “WebGL” :

تطبيقات WebGel هي JavaScript API لتقديم رسومات 3D و 2D ضمن متصفح ويب يدعمها بدون اضافات خارجية . تم دمج تطبيقات WebGl في معظم المتصفحات لتسارع استخدام الفيزياء و معالجات الصور والاُثار كجزء من الـCanvas في صفحة الويب . ويمكن ان يتم دمج عناصر WebGl مع الـhtml وتكوينها مع اجزاء اخري من خلفية الصفحة .

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

المصدر