تقنيات عرض الصور على الواب Image Gallery

[alimi]

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

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

وسأحاول في مجموعة من المقالات بإذن الله، أن أفسّر مختلف التقنيات المستعملة لعرض الصور بتطبيقات الواب، وسأبدأ في هذا المقال من خلال حوصلة لمختلف التقنيات، في انتظار مقالات تفصيلية لبعض هذه التقنيات على حدة.

تستعمل لتطوير مايمكن أن يعرّب برواق الصور، أو Image Gallery / Galerie d'images، أربعة تقنيات مختلفة، وقد تكون مستعملة كل على حدة او قد تكون مجتمعة جزئيا مع بعضها، كما أن بعض هذه التقنيات يأخذ مباشرة بالصور الثابتة الموجودة على القرص الصلب للخادم، في حين أن هناك تقنيات أخرى تأخذ بالمعطيات من خلال تأشير ملفات xml أو قاعدة بيانات، ولكن ما يهمنا ليس مصدر الصور، وإنما تقنيات عرضها.

1- تقنية JavaScript البسيطة:

وهي تستعمل من خلال دوال مفرد دالة (fonctions / functions) JavaScript مكتوبة مباشرة في أول الصفحة، أو في ملفات js منفصلة يقع ربطها بالصفحة المعنية، وتحمل هذه الدوال، محتوى التأثيرات التي سيقع ربطها بالصورة، كجعل الصورة متحركة، او إضافة تأثير عليها، كأن تبدو كالمضيئة وغيرها من التأثيرات.
ولكن بالإضافة لهذه الدوال، فانه يجب إضافة النداء لهذه الدوال، من خلال إحداثيات évenement / events توضع عادة بوسم الصورة tag img، وهي العملية التي تعمل على ربط محتوى دوال JavaScript بالصورة حين وقوع الإحداثية، كأن يقال انه حين مرور الفأرة فوق بالصورة، يقع تطبيق تأثير معين، فيقع إذن استعمال إحداثية onMouseOver، ويكتب فيها شيفرة JavaScript تقوم بنداء الدالة المحتوية على التأثير.
على انه يقع أحيانا استعمال إحداثية مرتبطة بالصفحة كلها وليس بالصورة، وتستعمل عادة إحداثية حين الشحن (onLaod)، ومثل هذا يكون في حالات تكوين رواق كامل للصور يبدأ عمله آليا منذ تحميل الصفحة، من دون وجوب المرور بالصورة.

2- تقنية منصات JavaScript المعبر عنها ب javascript framework

وهي تقنية تستعمل لغة JavaScript، ولكنها طورت مجموعة من المكتبات المفصلة والمنفصلة والثرية، بحيث أتاحت مباشرة دوال متنوعة وكثيرة، كما ان استعمال هذه المنصات يكون عادة سهلا مقارنة مع JavaScript وذلك راجع نسبيا لكون هذه المنصات تستعمل كثيرا المعرفات الموحدة id للوسوم tag، كما انها تستعمل الأقسام class ، من خلال مناداتها مباشرة، بمعنى انه لكي تضيف تأثيرات للصور، يكفي ان تضيف ملف المنصة الذي يكون ذا امتداد js، ثم تقوم بوضع شيفرة صغيرة في مكان ما بالصفحة يقع توضيحه من خلال مطور المنصة، اما باقي المهام فتتكفل به المنصة ذاتها، لانها تحتوي على دوال تقوم بالتعرف آليا من خلال المعرفات الموحدة على مكونات الصفحة، وتطبق عليها التأثير.
ويمكن أن نذكر بعض هذه المنصات التي أحدثت فعلا مايشبه الثورة في استعمال الصور على الواب: jQuery, Prototype, Spry..


3- تقنية أنماط CSS

يمكن تطوير رواق صور وتنشيطه وإضفاء التأثيرات عليه من خلال مجرد شيفرات لغة CSS، من دون الحاجة ل JavaScript. وتتم العملية من خلال تهيئة مجموعة من أنماط CSS او Style CSS، يقع وضعها بأول الصفحة أو تضمن بملف ذي امتداد css، وتحمل هذه الأنماط برمجيات مفصلة لكل وسم tag.
ويمكن أن تكون برمجيات css في ثلاثة أصناف، إما متعلقة بأي وسم موجود من قبل بحيث تعيد تعريفه كأن يعاد تعريف وسم div او وسم a او وسم p، وإما تعمل على إضافة قسم class نمطي جديد، وإما بإضافة نمط خاص بالمعرفات الموحدة id.
وأما التأثيرات التي تطبق على الصور بحث تجعل منها رواقات للصور، فتتم من خلال برمجة الإحداثيات التي تتيحها أنماط css، حيث أن الانماط هي عبارة عن توسعة للغة htmld أي html النشطة، بحيث إننا نستطيع الوصول لأي مكون تتيحه htmld من خلال css، بما فيها بالطبع الإحداثيات. ومن خلال برمجة هذه الأخيرة، وخاصة إحداثيات الضغط على الصورة onClick او إحداثية مرور الفأرة onMouseOver وهي الإحداثيات المستعملة أكثر في مثل هذه الحالات، يمكن اظهار تأثيرات تتعلق بالصور.

4- تقنية الفلاش وأشباهه: ملفات swf

غني عن القول أن تقنية فلاش هي سيدة الموقف كلما تعلق الأمر بإيجاد التنشيطات والتأثيرات المطبقة سواء على الصور او غيرها من الاشياء Objects / objets ، بل يمكن القول ان العديد من الأفكار وخاصة المطبقة بمنصات framework قد تم اقتباسها من تلك المتواجدة لدى فلاش. وتتيح تطبيقات فلاش عشرات التأثيرات، وهي إما مطروحة في شكل مكتبات معدّة مسبقة كما هو الحال لدى برمجيات sothik أو switch، أو يمكن تطويرها ذاتيا من خلال مايتيحه برنامج فلاش، ويمكن من خلال هذه البرمجة إيجاد كم يكاد يكون لانهائي من التأثيرات والحركات المطبقة على الصور.
لكن توجد خاصية هامة بالنسبة للتأثيرات التي ينتجها فلاش، وهي أنها بالإضافة لكونها تطبق على صور ثابتة مسكّنة على موقع محدّد مسبقا على القرص الصلب، فان فلاش يمكنه تطبيق تلك الـاثيرات أيضا على صور متأتية بصورة نشطة dynamique / dynamic من قاعدة بيانات، وذلك من خلال ملف xml. بمعنى انه يمكن تطوير رواق صور ذو تأثيرات كبيرة بتقنية فلاش، وتطبق على صور محددة من خلال قاعدة بيانات وليس صور ثابتة مسبقا، بما يجعل الصور تتغير اليا. والعملية يلزمها ايجاد محتوى ملف xml الذي سيقوم فلاش بقراءته، وهذا الملف يجب تطويره بلغة جهة الخادم كphp، وربما سأتناول هذا بتفصيل اكبر مستقبلا بإذن الله.

المصدر موقع بوابتي

https://www.myportail.com/actualites_...on.php?id=1819

[elwaafi]

مقال جميل أرجو أن تكون فهمت ما يقصد به إذ المقال تتحدث عن أحدث التقنيات في الإنترنت ألا وهي الويب 2 او الأجاكس وهي تقنية في الحقيقة قديمة لكنها لم تستغل حتى دخل علينا غوغل بموقعه البريدي الجي ميل فقط
هناك ضهر الإقبال على هذه التقنية الرائعة والتي تستخدم على الأغلب الجافا سكريبت ولغة سي اس اس والإكس أم ال

[امير الجود]

شكرا لك اخي على شرحك الوافى و المفيد بارك الله فيك

[قارة عمر]

ارجوا من الاخوة التوضيح باعطاء امثلة مبسطة حتى يتسنى لنا الفهم ...........شكرا جزيلا

[mouhab_23]

شكرا أخي على الشرح الوافي والمفيد وبارك الله فيك .... آآآآآآآآآآآآمــيـــن

[elwaafi]

المشاركة الأصلية كتبت بواسطة قارة عمر

ارجوا من الاخوة التوضيح باعطاء امثلة مبسطة حتى يتسنى لنا الفهم ...........شكرا جزيلا

حسنا ربما لم تسمع بهذه الأسماء سابقا لكن سأشرحها ببساطة ليتسنى للجميع فهم المقصود بالمقال
لو تلاحض إن كنت من مرتادي الجي مايل الخاص بغوغل الفرق الشاسع بينه وبين بريد الياهو
فبريد الياهو كمثال :
حين نريد إنشاء رسالة جديدة سنضطر إلى تحميل الصفحة بكاملها للإنتقال إلى صفحة جديدة فيها صفحة البريد على عكس الجي مايل فهو لا يحمل إلا الجزء المراد تحميله فقط أي المكان الذي نريد الإنتقال إليه لذى لا تضطر إلى الإنتضار كثيرا خصوصا إن كان إتصالك ضعيفا
مثال آخر إن لم تستطع الفهم من الأول أو لم تلاحظ الفرق فيه
إذا تصفحت الصفحة الرئيسية لموقع الياهو https://www.yahoo.com
ستجد على يمينك قائمة بالخدمات منها
mail
messenger
weather
كلما مررت سهم الفأرة إليها تفتح نوافذهم دون أن تذهب إلى الصفحات الخاصة بهم تقرأ جديدهم إن أعجبك ذهبت إلى الصفحة إن لم تعجبك تركتها .
وهناك مواقع تعتمد 100% على هذه التقنية كمثال موقع scribd بمشاركة الملفات وقرائتها في المتصفح دون عناء التحميل.