ساعة دائرية متحركة على صفحة الويب

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

المزايا الأساسية في الساعة المتحركة

  •     ساعة دائرية متحركة تحتوي على عقرب الساعة والدقيقة والثانية.

  •     اليوم والتاريخ يدوران حول الساعة.

  •     تتبع مؤشر الماوس (مؤشر الفأرة) وبتأثير التفكك والتجمع.
     

  •     وهنالك سلبية هي أن الساعة قد تصبح بطيئة وخصوصاً عن استعراض الصفحة في الأجهزة البطيئة أو تعدد عناصر الـ Active والـ Java والفلاش في الصفحة.

وفيما يلي الكود الخاص بالساعة و سأوضح كيفية إضافته على صفحة الويب في برنامج Microsoft FrontPage تالياً:-
 
 
 
 
 
 
تستطيع الحصول على الكود من هنا أيضاً  او هنا كملف مضغوط
  1.     انسخ الكود أعلاه.
     

  2.     قم بفتح صفحة الويب الخاصة بك التي تريد إضافة الساعة إليها باستخدام برنامج فرونت بيج.
     

  3.     اذهب إلى قائمة "إدراج" Insert ثم "Web Component..." أو أنقر الزر المخصص لهذا الأمر على الشريط "قياسي".
     

  4.     انقر على "عناصر تحكم متقدمة" من القائمة "نوع المكون" تجدها في آخر القائمة.
     

  5.     اختر "HTML" من قائمة "اختيار التأثير" ثم إنهاء.
     

  6.     قم الآن بلصق الكود في المربع "علامة HTML"  الذي سوف يظهر لك ثم  "موافق".
     

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

عناصر الكود التي قد تهمك وفيها يمكنك أن تعدل في صفات الساعة:-
  1.     لتعديل ألوان الساعة:-
    dCol='000099';//date colour.
    fCol='668099';//face colour.
    sCol='FF0000';//seconds colour.
    mCol='000000';//minutes colour.
    hCol='000000';//hours colour.
    تمثل ألوان الساعة حيث أن ..
    القيمة
    dCol تمثل لون واليوم والتاريخ (النص الذي يدور حول الساعة).
    القيمة
    fCol تمثل لون الأرقام.
    القيمة
    sCol تمثل لون عقرب الثواني.
    القيمة
    mCol تمثل لون عقرب الدقائق.
    القيمة
    hCol تمثل لون عقرب الساعات.
    ولتغيير اللون قم بتغيير القيم التي بين إشارتيّ
    ' ' المكون من ستة قيم عبارة عن أرقام وقد يدخل FF أو  CC التي تهمك أو أحرف أخرى تتدخل في حال الألوان الأكثر دقة.

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

    ** معلومة تهمك وتساعدك:-
     ولتعرف أرقام الألوان اذهب إلى الإشارة الخاصة بتغيير لون النص أو التعبئة أو غير ذلك في برنامج فرونت بيج وأختر ألوان إضافية ستظهر لك نافذة الألوان قم باختيار اللون الذي تريد ثم أنضر في الزاوية العليا من النافذة ولاحظ القيمة التي داخل المربع الذي يقابل كلمة "القيمة" أو
    "Value"  قم باستخراج الأرقام فقط بدون الفواصل والأقواس أو أي شيء آخر وإذا ظهرت القيمة FF فهي ضمن إعدادات اللون لا تتجاهلها. مثال اللون الأحمر ستظهر القيمة Hex={FF,00,00} الذي يهمك هو FF0000 وهذا يدلك على أن الستة قيم هي عبارة عن ثلاثة أزواج الزوج الأول ( من اليسار إلى اليمين) يمثل اللون الأحمر الزوج الثاني يمثل اللون الخضر والزوج الثالث يمثل اللون الأزرق والأرقام بشكل عام وهي شدة الضوء والقيمة FF هي أن تفعيل اللون بكامله (الحرف F اختصار Full) القيمة CC هي استعمال نصف قيمة شدة اللون (الحرف C اختصار لـ Center). والقيمة 00 هي تعطيل اللون, على كل حال قد تكون تفسيراتي للألوان خاطئة ولكن المهم أن تعرف كيف تتعرف الرمز الخاص بكل لون باستخدام رموز تغيير اللون.
     

  2.     لتعديل موقع الساعة وحجمها:-
    ClockHeight=40; تمثل طول الساعة فإذا قمت بزيادة القيمة أصبحت الساعة إهليجية (بيضوية) الشكل رأسياً وتستطيع  إنقاص القيمة لتصبح الساعة إهليجية أفقياً.
    ClockWidth=40; تمثل عرض الساعة فإذا قمت بزيادة القيمة أصبحت الساعة إهليجية (بيضوية) الشكل أفقياًً وتستطيع  إنقاص القيمة لتصبح الساعة إهليجية رأسياًً.
    وفي كلا الحالتين  يجب مراعاة النسبة بين الطول والعرض بحيث لا يزيد الفرق بين القيمتين عن 15 - 25  ويفضل الزيادة على القيمة الموجودة حاليا بدل الإنقاص  في القيمة إذ أن القيمة 40 هي أقل قيمة ممكنة تقريباً.
    ClockFromMouseY=70; تمثل بعد مركز الساعة عن مؤشر الفأرة رأسياً.
    ClockFromMouseX=50; تمثل بعد مركز الساعة عن مؤشر الفأرة أفقياً.
    وهنا أود أن أقول أن لا تقل القيمتين عن 40 أو يجب علك مراعاة أن لا تتلامس الساعة ومؤشر الفأرة إذا ما قمت بتغيير القيم الخاصة بحجم الساعة.
     

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

    1.     d=new Array وما  يتبعها بين القوسين من أسماء الأيام بالانجليزية.

    2.     m=new Array وما يتبعها  بين القوسين من أسماء الأشهر بالإنجليزية.
      في كلتا القيمتين إذا رغبت في تعريب البيانات فقم بتعريبها بتغيير كل اسم على حدا وليس كل الذي بين القوسين مرة واحدة.
       

    3.     القيم التالية لا تقم بالتغيير فيها أبداً إلا إذا كنت صاحب خبرة حيث أي تغيير سوف يقوم على فقد جمالية الساعة (خربطة عقارب الساعة):-
      H='...';
      H=H.split('');
      M='....';
      M=M.split('');
      S='.....';
      S=S.split('');
       

    4.     speed=0.5; خاص بسرعة إعادة تجمع إلى بيانات بعد تحريك الفأرة وكلم زدت القيمة زادت السرعة ولكن لا تقم بالتغيير عليها بشكل كبير لألا تفقد جمالية التحريك.
       

    5.     step=0.06; خاص بسرعة دوران البيانات ولا تقم بزيادة القيمة أو إنقاصها إلا في حدود الأجزاء من المائة.
       

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

     

    وآمل بذلك أني قدمت لكم الفائدة .

    والحمد لله رب العلمين



10/10/2007
0 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 2 autres membres