4 طرق لصناعه موقع اكثر فاعلية علي الويب

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

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

  CSS

ان الـcss  “ليست لغه برمجه” ولكنها تقنية تتهتم بتحديد شكل وتصميم المواقع ، وينطبق ذلك على الألوان والخطوط والصور والخلفيات التى تستخدم فى الصفحات ، بمرونة وسهولة تامه . ولكنها حصلت علي بعض التطورات في الفترة الاخيرة التي تسمح لك بفعل العديد من الاشياء مثل التحويلات و الرسوم المتحركة . و هناك الكثير من المطورين الذين يحاولون اضافه مميزات جديدة لتصبح اكثر قوة . يمكنك الان الاستغناء عن الفوتوشوب وبرامج تحرير الصور فيمكنك تعويض ما تحتويه هذه البرامج من مؤثرات بالـcss . سأتحدث معكم عن ميزه لطيفه و هي  CSS Clip Paths : تسمح لك هذه الميزه بتحديد اجزاء شكل معين و التحكم في شفافيته . لها بتأثيرات رائعه علي تحديد Elment معين و التحكم في شفايفته و تدرج بعض الخصائص كالتدرج في تغيير اللون من الاسود للابيض او الاحمر للاخضر . تكتب في الكود Transitions وتقبل الاعداد بالثانيه او جزء من الثانية فمثلاً اذا اردنا ان نعطي لصوره ما شفافيه نكتب الكود بالشكل التالي :     [highlight] img { opacity : .5; transition : 1s; } [/highlight]     هنا قمنا بتعديل عرض الصورة لتعرض بدرجه شفافيه 50% . و حددنا سرعه تغيير التأثير بثانيه و احدة .. لمشاهدة التاثير نكتب كود الـhover للصورة :     [highlight] img:hover { opacity:1; }   [/highlight]   جرب الكود و استمتع بقوة الـCSS . هناك الكثير من مميزات الـCSS ساتكلم عنها بالتفصيل في مقاله اخري .    

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

 

SVG 

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

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

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

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

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

شارك

8 thoughts on “4 طرق لصناعه موقع اكثر فاعلية علي الويب

اترك رداً على Moody Boles إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

مقالات ذات صلة