للإشتراك في خلاصات RSS بموقع بوابتي
مقالات الرأي
آخر  مقالات الراي
مقالات تقنية المعلوماتية
مقالات تقنية المعلومات
إدراجات الفيديوهات
إدراجات الفيديو
إدراجات الصور
ادراجات الصور
 
‏"يملي": موقع رائع للكتابة بالعربية عن طريق الحروف الأجنبية    إضافات Web Developer: أداة مهمة لمطور الويب    الشبكات الاجتماعية العربية على الواب    ‎:Pogo‏ متصفح واب جديد، ثلاثي الأبعاد    باحث عربي يقترح لغة برمجة جديدة مختصة: NML    فكرة جديدة: محرك للبحث عن الصور من خلال التعرف على الألوان    الفروقات بين ملفات الصور والرسوم    القراصنة ينشرون فيروساً جديداً لسرقة أموال المستخدمين    "قوقل" تطرح أيقونات جديدة، وتبحث عن اقتراحات    موسم تغيير الشعارات لدى" قوقل"، يطال الدول العربية   
بعض من المقالات المنشورة
 
المقالات الجديدة  الأكثر قراءة   المقالات الأقدم    
 
تصفح باقي الإدراجات
 
آخر المقالات   

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



كاتب المقال   المحرّر: بوابتي


         




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

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

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

تستعمل لتطوير مايمكن أن يعرّب برواق الصور، أو 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، وربما سأتناول هذا بتفصيل اكبر مستقبلا بإذن الله.


 اضغط على الكلمات المفتاحية التالية، للإطلاع على المقالات الأخرى المتعلقة:

Image Gallery، رواق الصور، Galerie d'images، JavaScript، مكتبية جافاسكريبت، JavaScript framework، CSS، php، فلاش، صور،

 يسمح بالنقل، بشرط ذكر موقع "بوابتي" مصدر المقال، ويفضّل أن يكون ذلك في شكل رابط
 
تاريخ نشر المقال بموقع بوابتي 18-10-2008  

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

 
لإعلام أحدهم بهذا المقال، قم بإدخال بريده الإلكتروني و اسمك، ثم اضغط للإرسال
البريد الإلكتروني
اسمك

شارك برأيك
لوحة مفاتيح عربية بوابتي
     
*    الإسم
لن يقع إظهاره للعموم
     البريد الإلكتروني
  عنوان المداخلة
*

   المداخلة

*    حقول واجبة الإدخال
 
كم يبلغ مجموع العددين؟
العدد الثاني
العدد الأول
 * أدخل مجموع العددين
 
 
 
الردود على المقال أعلاه مرتبة نزولا حسب ظهورها  articles d'actualités en tunisie et au monde
أي رد لا يمثل إلا رأي قائله, ولا يلزم موقع بوابتي في شيئ
 

  13-10-2010 / 21:52:43   eman
تقنية الواب

بحث عن تقنية الواب

  17-10-2008 / 15:01:00   tatoung
مقالات ممتازة

مقال ممتاز جدا، ككل المقالات السابقة
 
 
 آخر الردود المنشورة بالموقع
باب تقنية المعلوماتية
باب الفيديوهات
اة لو كلنا نستوعب هذه الكلمات ما اصبحنا بهذا المنظر ((خائفين على الدنيا))...>>

أنا دخت عشان النشيد دا نفسي الاقيه وتقريبا هو دا اللي بدور عليه نفس اللي انا عاوزاه ف العنوان وبشغل مش راضي يشتغل ابدااااااااا ..... فين النشيد :( انت...>>

كلي بقلي انو انا صوتي حلو بس نفسي اشارك بطيور الجنة بليز نفسي اشارك
ردو علي بليز
انا عمري 12 سنة...>>


كلي بقلي انو انا صوتي حلو بس نفسي اشارك بطيور الجنة بليز نفسي اشارك
ردو علي بليز...>>


بارك الله فيكم نرجو اضافة اناشيد عن بلاد الشام...>>

مرحبا ياحلى قناه في العالم ممكن تذبت لقبي كوكو...>>

بالله عليكم انتو بدل ماتنادو الناس الى نبذ الطائفية والعدوانية والتوحيد بين المسلمين تزرعون البغض بينهم والقتل الله اكبر على كل واحد يحاول زرع الفتنة ...>>

الله ينور عليكي...>>

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

اني من الوطن العربي عمري 12 سنة اني بنت بس داخلة باسم ولد اتمنى الحرية تتحقق بالوطن العربي في سوريا والعراق و كل دولة بالوطن العربي اني اتمنى اتعرف عل...>>

باب المقالات
الدين في خدمة السياسة عوض ان يكون الامر العكس، السياسة في خدمة الدين...>>

يرجى التثبت في الأخطاء اللغوية وتصحيحها لكي لاينقص ذلك من قيمة المقال

مثل: نكتب: ليسوا أحرارا وليس: ليسوا أحرار
وغيرها ......>>


كبر في عيني مرشد الاخوان و صغر في عيني العسكر
اسال الله ان يهديك الى طريق الصواب
المنافقون في الدرك الاسفل من النار...>>


حسبنا الله ونعم الوكيل فيكم
تتبعت اكثر من رأي سفالة ونذالة والله لتحاسبون على ما قلتموه وكتبتموه
هل البلدان الاخرى ليست بها دعارة ؟هل ...>>


It is important that issues are addressed in a clear and open manner, because it is necessary to understand the necessary information and to properly ...>>

واضح أن الكاتب يعاني من رؤية ضبابية، وهو بعيدٌ عن الموضوعية التي يزعم أنه يهتدي بها..
نعم، وضعت الأنظمة القومية قضية تحرير فلسطين في قائمة جدول...>>


الأولى أن توجه الشتائم التي قدمتها لما يُسمى بالمعارضة الذين هم في الحقيقة تجار الوطن والشرف.. ارتموا كبائعات الهوى في حضر التركي والأمريكي والقطري وا...>>

أتمنى أن تكون الامور كما تقول ان النهضة انتقلت لمرحة أخرى في تعاملها مع بقايا فرنسا، ونتمنى ان يكون تعاملا جديا وصارما...>>

النهضة استطاعت كسر التّحالفات التي بناها نداء تونس مع الجبهة وحثالة البورقيبيّة والعلمانيّة الفاشيّة، ثم انتقلت إلى المرحلة الثانية........>>

انا باحث في صدد عمل رسالة حول : حول المنشآت المائية الرومانية ببلاد المغرب القديم
اتمنى مساعدتي بكتب ومراجع
دمتم طيبين...>>


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

هو الموضوع اغتيال جذور الاسلام فهم يعلمون ان الطفله التي تتغذي علي العفه

تفسد مخطاطتهم وتنبت نبات حسنا فطفله اليوم هي سيده الغد واج...>>



وقع تصميم الموقع وتطويره من قبل ف.م. سوفت تونس

تحميل برامج مجانية