المنتدى الطلابي الأول في طرطوس .. والحاضر يعلم الغايب


    الصور المتحركة، متى؟ كيف؟ لماذا؟

    شاطر
    avatar
    MR HACKER
    جامعي ذهبي
    جامعي ذهبي

    ذكر
    عدد المساهمات : 2364
    العمر : 30
    المكان : Syrian Arab Rebablic
    المزاج : معصب و مكهرب دوما
    الدراسة : اقتصاد
    السنة الدراسية : 4
    المستوى : 56
    نقاط : 4906
    تاريخ التسجيل : 21/05/2009

    الصور المتحركة، متى؟ كيف؟ لماذا؟

    مُساهمة من طرف MR HACKER في الجمعة يوليو 17, 2009 12:46 am

    استخدام الصور المتحركة




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




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


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

    كل هذه الأشياء ستسبب بطء شديد في نزول الصفخة للزائر (إذا جربتها من جهازك فستعمل بسرعة البرق) لكن إذا لم تحسب حساب وقت الزائر الثمين جداً لزيارة صفحتك التي يطول إنتظارها فهذه مصيبة أخرى!!


    ماهي عواقب كثرة استخدام الصور المتحركة؟


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

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


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

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

    أنت تعرف محتويات صفحتك عن ظهر قلب لأنك أنت من صممها، لكن الزائر لا يعلم ما هو هدفك من هذه الصورة المتحركة بالذات التي لا تعني سوي كلمة عادية أو شئ غير مفيد لك أو له.


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



    متى تستخدم الصور المتحركة؟




    عندما أخذت دورة بأمريكا عن بناء مواقع رائعة، كان بها تركيز على هذا الموضوع ومواضيع أخرى سأحاول إدراجها. في هذه الدورة انصب جل التركيز في هذا الموضوع على أن الهدف من الصور المتحركة هو شد الانتباه لشئ معين ويجب أن يكون مهم بحيث يظهر بشكل واضح على الصفحة دون سواه من بقية المحتويات. أي بمعنى أنه عندما يأتي الزائر للصفحة سيرى كل شئ ثابت ما عدا هذا الشئ المتحرك الذي جعله يتجاهل بقية الصفحة (بشكل خاطف وسريع) وينظر إليه. قد تكون كلمة اشترك الآن أو مثلاً منتج جديد أو أي شئ آخر. وهنا تكون وظفت الصور المتحركة لهدف جذب الانتباه لمنتجك الجديد أو لغرض معين بشكل صحيح يؤدي النتيجة المطلوبة منه.




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

    وأيضاً استخدمنا نفس الفكرة في عرض المحتويات داخل الأقسام. عندما تتجول بقسم معين وليكن هذا القسم، سترى المحتويات مدرجة داخل جدول لكل محتوى به كافة المعلومات التي تريد معرفتها عنه، الكاتب، التاريخ، عدد مرات القراءة إلخ.. لكن وجدنا أن هناك من لا يعرف كيف يفتح المحتوى أو أين يضغط هل يضغط على الكاتب أم على عنوان المحتوى (المقالة، الملف، اسم البرنامج) أم ماذا؟ .. لهذا وضعنا سهم آخر متحرك يشير لمكان الضغط وهو على العنوان.


    الخلاصة: هي أن تستخدم الصورة المتحركة فقط لشد الإنتباه لشئ مهم وليس كما اتفق




    كيف تستخدم الصور المتحركة وماهي أنواعها؟


    هناك عدة وسائل لاستخدام الصور المتحركة منها ملفات جيف المتحركة، الجافا أبلت، النصوص المتشعبة الديناميكية، النصوص المتحركة وفلاش طبعاً.


    لكن السؤال هنا أي نوع تستخدم ولماذا ومتى يتم استخدامها؟


    حسب خبرتي المتواضعة في هذا المجال كمصمم مواقع منذ عام 98، أعتقد بأن أكثر الصور المتحركة شيوعاً هي ملفات جيف المتحركة Animated GIF Files وهذه الصور تعتبر من أسرع الأنواع وأسهلها تصميماً. ويتم استخدامها غالباً في اللوحات والأزرار الإعلانية وأعتقد بأن الكثير يتفق معي في هذا الموضوع.

    لكن هناك استخدام آخر شائع أيضاً وهو استخدامها كشد انتباه لأيقونة أو صورة معينة مثل صورة لصندوق بريد متحرك إذا كنت تريد من الزائر الضغط على هذا الزر.

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

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




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


    نأتي لاستخدام النصوص المتشعبة الديناميكية Dynamic HTML

    في الحقيقة هذه ليست لغة!! نعم حتى وإن انتهت بكلمة Language أي لغة فهي ليست لغة. هي مجرد خليط من ثلاث لغات مختلفة وهي لغة النصوص المتشعبة Hyper Text Markup Language و لغة جافا سكريبت JavaScript أو في بي سكريبت VB Script وأخيراً لغة قوائم الأنماط كما يحب أن يسميها البعض وهي Cascading Style Sheets CSS




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


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


    بالنسبة للنصوص المتحركة، في نظري أنه يجب عدم إستخدامها نهائياً إلا لأحد الأسباب التالية فقط:

    (متى تستخدم النص المتحرك)




    إذا كانت لديك معلومات متغيرة بكثر وبسرعة أي بشكل لحظي مثل آخر أخبار العالم، أسعار الأسهم، أسعار الصرف وهكذا

    إذا كانت لديك محتويات مهمة وكنت حريص على أن يقرأها الزائر وعندما تكون أكثر من سطر


    إذا قمت بتغيير أسعارك، منتجاتك أضفت منتجات أو خدمات جديدة وهمك جداً أن يعرفها القارئ



    الفلاش، وما أدراك ما الفلاش


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




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

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




    هذا لا يعني أنه خالي من العيوب، ومن أهم عيوبه أنه يحتاج لمشغل لكن هذا الموضوع يعتبر انتهى لأن 90% من مستخدمي الإنترنت الآن لديهم ذلك. وعيب آخر هو صعوبة وطول وقت تصميم مواقع الفلاش لكن الوقت والجهد يستحق. وأخيراً صعوبة تعامله مع اللغات الغير لاتينية وهذا ما نعمل على حله هنا في موقعنا وبعض العرب الآخرين المخلصين للغة مثل من قاموا ببرنامج الوسيط والرسام وغيرهم.




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

    انثى
    عدد المساهمات : 975
    العمر : 33
    المكان : in the world
    الدراسة : أخرى
    السنة الدراسية : متخرج
    المستوى : 53
    نقاط : 1562
    تاريخ التسجيل : 05/04/2009

    رد: الصور المتحركة، متى؟ كيف؟ لماذا؟

    مُساهمة من طرف sweet heart في الجمعة يوليو 17, 2009 1:42 am

    مشكووور كتير على المعلومات المفيدة
    تقبل مروري
    avatar
    روحنا_الوسوف
    جامعي فضي
    جامعي فضي

    ذكر
    عدد المساهمات : 1943
    العمر : 29
    المكان : صافيتا
    المزاج : ولا أحلا
    الدراسة : اقتصاد
    السنة الدراسية : 4
    المستوى : 13
    نقاط : 2487
    تاريخ التسجيل : 04/11/2008

    رد: الصور المتحركة، متى؟ كيف؟ لماذا؟

    مُساهمة من طرف روحنا_الوسوف في السبت يوليو 18, 2009 5:20 am

    الصور صارت عم تسبب مشكلة للمستخدمين اكيد بس بالنظر لتطور البلدان في دول أخرى وسرعات النت بغض النظر عن المضضمون بالصور مابتأثر عليهم بس نحنا أكيد تأثرنا كبير
    مشكور ع الموضوع
    avatar
    MR HACKER
    جامعي ذهبي
    جامعي ذهبي

    ذكر
    عدد المساهمات : 2364
    العمر : 30
    المكان : Syrian Arab Rebablic
    المزاج : معصب و مكهرب دوما
    الدراسة : اقتصاد
    السنة الدراسية : 4
    المستوى : 56
    نقاط : 4906
    تاريخ التسجيل : 21/05/2009

    رد: الصور المتحركة، متى؟ كيف؟ لماذا؟

    مُساهمة من طرف MR HACKER في السبت يوليو 18, 2009 5:32 pm

    شكرا للمرور الكريم

      الوقت/التاريخ الآن هو الأحد يوليو 23, 2017 8:30 pm