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

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

 

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

 

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

 

 

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

 

CSS

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

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

 

 

img

{

opacity : .5;

transition : 1s;

}

 

 

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

 

 

img:hover

{
opacity:1;

}

 

 

جرب الكود و استمتع بقوة الـ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 تعليقات

  1. مصطفى وهبه
    1 أكتوبر,2014 في 2:24 ص - Reply

    تسلم ايدك يا احمد موضوع مهم جدا . بالتوفيق دايما ان شاء الله .

    • احمد اشرف
      1 أكتوبر,2014 في 2:28 ص - Reply

      جزاك الله خيراً استاذ مصطفي . اسعدني اعجباك بالمقال .

  2. احمد رجب
    1 أكتوبر,2014 في 2:26 ص - Reply

    موضوع مميز يا أحمد تسلم إيدك 🙂

  3. Moody Boles
    10 أكتوبر,2014 في 6:52 م - Reply

    موضوع مميز شكرا لك 🙂

  4. بلال
    21 فبراير,2015 في 1:50 م - Reply

    السلام عليكم اخي هل يتطلب تعلم الدريم ويفر اتقان لغة html

    • احمد اشرف
      28 أبريل,2015 في 1:11 ص - Reply

      ان محرر الدريم ويفر هو مجرد برنامج يساعدك في بناء تطبيقات الويب ( html , css , javascript , php )

  5. بشير حزام
    15 يونيو,2015 في 11:32 ص - Reply

    جزاك الله الف خير يا مهندس احمد على هذا الموضوع المهم جدا . بالتوفيق دايما ان شاء الله .