نبض التقنية – اخبار عالم التقنية والانترنت
أنضم إلى معجبي نبض التقنية و التقنية في الفيسبوك

تطوير : ماهي الـ Adaptive Images وكيف تستخدمها

الصور المتأقلمة أو الـ Adaptive Images هي عملية إيصال الصورة المناسبة للجهاز المناسب ، لنفرض مثلاً لديك صورة بأبعاد 800*600 ، لماذا ننقل الصورة بدقتها الكاملة وحجمها الكبير للمتصفح من هاتف محمول ونعرضها مصغرة ، أليس من الأفضل إرسال صورة ذات أبعاد مناسبة لكل جهاز على حدى بدلاً من إرسال الصورة كبيرة ثم عرضها بأبعاد أقل .

هذا الموضوع شغل الكثير من مطوري المواقع في الفترة الماضية حتى بدأ البعض بالعمل على دوال وبرمجيات لتسهيل هذه المهمة ، كان أشهرهم مجموعة Filament Group والذين قاموا بإعداد برمجية أثبتت عمل الفكرة وأنها قابلة للتطبيق ، ولم يتم إكمال المشروع أو إطلاقه . سنتكلم اليوم عن حل بسيط لهذه المشكلة والأجمل أنه يمكنك تطبيقه في خمس دقائق فقط !

المشروع الجديد من Matt Wilcox يساعد على حل هذه المشكلة بإرسال الصورة الصحيحة للجهاز الصحيح ، المشروع طرح باسم Adaptive Images أو الصور المتأقلمة أو المتكيفة ، والتي تقوم بالمهمة السابقة الذكر بشكل ممتاز دون الحاجة لتعقيدات برمجية أو إعداد صور بأبعاد مختلفة يدوياً .

لتطبيق الصور المتأقلمة بواسطة أداة Adaptive Images في موقعك تحتاج أولاً إلى التأكد من وجود:

  • Apache 2
  • PHP 5.x
  • GD lib *
  • 5 دقائق من وقتك 😀
في البداية تحتاج تحميل الملف التالي والذي يحتوي على الملفات اللازمة للعمل من هنا
  • من الملف المرفق انسخ ملفي .htaccess و adaptive-imges.php و ai-cookie.php إلى المجلد الرئيسي في موقعك.
  • قم بعمل مجلد جديد تحت المجلد الرئيسي للموقع باسم ai-cache وأعطه صلاحيات الكتابة  (CHMOD 777).
  • في وسم <head>  أعلى الصفحة قم بإضافة السطر التالي :
<script>var device_width=screen.width;var device_height=screen.height;if(device_width>device_height){ai_width=device_width;}else{ai_width=device_height;} document.cookie=’resolution=’+ai_width+’; expires=; path=/’;</script>
هناك طرق مختلفة أخرى للتطبيق دون الحاجة لاستخدام الجافا سكربت تجدها في الملف نفسه ، مايميز هذه الطريقة عدم الحاجة لكتابة أي أكواد برمجية
أتمنى أن تستفيد عزيزي القارئ من هذا الدرس وتطبقه في مشروعك القادم

الكاتب: عبدالله عبيد

شخص يسعى ليكون رقم صعب في هذا العالم ، مهووس بالتقنية واستغلالها لما ينفع أمته، مطور مواقع ،خريج هندسة تحكم آلي وقياس من جامعة الملك فهد للبترول والمعادن . مؤسس مشارك لموقع نبض التقنية www.ibeid.com

5 تعليقات

  1. درويش الحلو قال:

    جميل جدا ..هات من الاسرار اللي مخبيها يا كبير

  2. يا سلام عليك من زمان كنت اتمنى اعرف هالطريقه الجميلة

    يعطيك ألف عافيه عبدالله

  3. شكرا لك , Ctrl + D
    فعلا ماله داعي نعرض صور بابعاد كبيره على شاشه جوال صغيره …
    هل ينفع اذا كان مصدر الصوره قاعده بيانات بدلا من الملفات المعتاده …
    ودمت سالما …

    • عبدالله عبيد قال:

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

  4. web2dev قال:

    السلام عليكم

    تبدو تقنية واعدة 🙂 خاصة و أنها تدعم نظام الـ “Cache” 🙂

    حاول أن تطلع كذلك على Responsive Designs 🙂

    بارك الله فيك أخي عبد الله.

أضف تعليقاً

حقول مطلوبة *.