قبل التكلم عن الجي كويري يجب أن نعرف الفرق بين لغة البرمجة و لغة الهيكلة و البناء، فلغة البرمجة هي لغة تنقل اﻷوامر من اﻹنسان إلى الحاسوب مثل لغة C و ++C و Java و Php و Python، و لغة الهيكلة و البناء هي لغة التنسيق و الترتيب و اﻹضافة للمواقع مثل Css و Html و Javascript و Jquery و Xml.
الجي كويري هي في الواقع مكتبة مجانية في الجافا سكربت و لكنها مختلفة عن هذه اﻷخيرة في كونها مبنية على مبدأ: أكتب أقل و افعل أكثر write less, do more. فهي تمكننا بكل سهولة من إضافة تأثيرات جميلة للمواقع و التحكم في اﻷحداث بأكواد قليلة ﻹضفاء الحيوية عليها، و هي لغة سهلة و مفهومة حتى للمبتدئين الذين ليس لهم تخصص في البرمجة. و لمن لديه فضول لتعلم تقنية الجي كويري هناك موقع مشهور لمن يتقن اللغة اﻹنجليزية: jquery.com و فيه تعريف و شرح للدوال و السمات و الخصائص و المحددات و التوابع مع أمثلة تطبيقية مباشرة مرتبة أبجديا، و هناك دروس أولية مبسطة مشروحة باللغة العربية و بالفديو تجدها في هذا الموقع: دورة تعليم جي كويري
الجي كويري هي في الواقع مكتبة مجانية في الجافا سكربت و لكنها مختلفة عن هذه اﻷخيرة في كونها مبنية على مبدأ: أكتب أقل و افعل أكثر write less, do more. فهي تمكننا بكل سهولة من إضافة تأثيرات جميلة للمواقع و التحكم في اﻷحداث بأكواد قليلة ﻹضفاء الحيوية عليها، و هي لغة سهلة و مفهومة حتى للمبتدئين الذين ليس لهم تخصص في البرمجة. و لمن لديه فضول لتعلم تقنية الجي كويري هناك موقع مشهور لمن يتقن اللغة اﻹنجليزية: jquery.com و فيه تعريف و شرح للدوال و السمات و الخصائص و المحددات و التوابع مع أمثلة تطبيقية مباشرة مرتبة أبجديا، و هناك دروس أولية مبسطة مشروحة باللغة العربية و بالفديو تجدها في هذا الموقع: دورة تعليم جي كويري
درس تصميم سلايد شو مع خلفية وصف شبه شفافة بتقنية الجي كويري
إن إضافة السلايد شو للمدونة أو الموقع لا يهدف أساسا إلى جلب انتباه المتصفح بقدر ما يهدف إلى جعلهما أكثر حيوية. في الحقيقة جاءتني فكرة سلايد شو مع خلفية وصف شبه شفافة بتقنية الجي كويري من قراءة لعمل إبداعي للمصمم Kevin Liew و هو مصمم مواقع و مطور و صاحب موقع: queness.com. هذا السلايد شو الذي أقترحه عليكم بسيط و سهل و يمكن العمل و التدرب عليه لفهم و معرفة لغة الجي كويري و الاستئناس بأكوادها و ترويضها بشكل عملي. لذلك سنجزئ هذا العمل إلى ثلاثة أقسام طبعا مع الشرح المناسب للسياق.
مجلد السلايد شو Demo
يحتوي المجلد المكون للسلايد شو Demo على ثلاثة ملفات: ملف html و ملف jquery) js) و ملف images. و في الغالب يكون مع هذه الملفات ملف آخر هو ملف css، غير أنه في عملنا هذا نجد هذا الملف مدمج في ملف html. يجب أن نشير إلى أن سلايد شو Demo يتم عرضه دون اتصال باﻷنترنت (طبعا هذا يتيح لك معاينة عملك و تصحيح اﻷخطاء في كتابة اﻷكوا د و التعديل على خيارات اﻷلوان و الخطوط و الصور و غير ذلك)، أما عملية إضافته إلى المدونة أو الموقع فتكون مباشرة في القالب من خلال تحرير html و مع اتصال باﻷنترنت.
1-قسم HTML
يشتمل ملف html على كل العناصر المكونة للسلايد شو لعرضه على صفحة الويب، و لكي تعمل لغة الجي كويري يجب استدعاء أو ربط صفحة html بالمكتبة و ذلك بوضع، داخل عنصر<head> ، الكود التالي:
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
|
ثم توضع أوامر دالة السلايد شو function slideShow:
} ()function slideShow
هنا توضع أوامر السلايد شو
{
|
ثم توضع أوامر دالة معرض الصور function gallery: 2:
} () function gallery
هنا توضع أوامر معرض الصور
{
|
2- قسم CSS
عادة ما يكون ملف Css مستقلا ليتم استدعاؤه و خصوصا في صفحة Demo، و لكن في عملنا هذا نجد أكواد Css مدمجة في صفحة Html. في لغة Css ينصب العمل على تنسيق الخطوط و الصور و الخلفيات و اﻷحجام و اﻷلوان و الجداول و غير ذلك. و يجب أن لا ننسى أن أوامر Css توضع في منطقة Head و تنفيذها يكون في منطقة Body، و تكون أوامر Css بواسطة الكود التالي:
<"style type="text/css>
}body
هنا توضع أوامر css
{
</style>
|
و لكي نستوعب أوامر Css الخاصة بالسلايد شو جيدا سنأخذ خاصية من العمل الذي نحن بصدده ألا و هي خاصية z-index و هذه الخاصية ( وهي مربط الفرس في عملنا ) تعني ترتيب العناصر بعضها فوق بعض بإعطاء رقم z-index للعنصر، أي أن هذه الخاصية تجعل العناصر ذات الرقم اﻷعلى فوق العناصر ذات الرقم اﻷدنى. لنتمعن في صورة من السلايد شو الذي نعمل عليه:
نلاحظ أن خلفية الوصف caption السوادء تظهر فوق صورة السلايد شو و النص المكتوب بالخط اﻷبيض و هذان اﻷخيران مرئيان ﻷن خلفية الوصف شبه شفافة. إذن فلنلق نظرة متفحصة على كود خاصية z-index :
} gallery .caption #
رقم أعلى لعنصر خلفية الوصف ;z-index:60
لون الخلفية أسود ;background-color:#000000
لون النص أبيض ;color:#ffffff
الارتفاع ;height:100px
العرض ;width:1
تموضع الخلفية وفقا لموضع صورة السلايد شو ;position:absolute
القيمة 0 أسفل ﻷن الخلفية تنزلق إلى اﻷعلى ;bottom:0
{
|
لنجرب بعض أمثلة خاصية z-index مختلفة المؤشرات لنفهم تقنية عملها:
1- مثال النص فوق الصورة
الكود:
<style>
img
}
;position:absolute
;right:0px
{;top:0px
الصورة تحت النص ﻷن رقم الخاصية أدنى من 1 ;z-index:-1
{
</style>
|
النتيجة:
2- مثال طبقة فوق طبقة بترتيب اﻷرقام
الكود:
}div1 #
عنصر الصورة A الثالث في الترتيبﻷنه له رقم أدنى من الثاني ;z-index:1
;top: 40px
;left: 40px
{
}#div2 #
عنصر الصورة B الثاني في الترتيب ﻷنه له رقم أدنى من اﻷول ;z-index: 2
; top: 60px
;left: 60px
{
}div3 #
عنصر الصورة C اﻷول في الترتيب ﻷنه له رقم أعلى ;z-index:3
;top: 80px
; left:80px
{
</style>
<"div id="container">
<div id="div1">A</div>
<div id="div2">B</div>
<div id="div3">C</div>
</div>
|
النتيجة:
3- قسم جي كويري
في هذا القسم سأوضح معاني أوامر دالة السلايدشو () function slideShow و أوامر دالة معرض الصور () function gallery :
| } ()function slideShow إ جعل تعتيم كل الصور إلى القيمة 0
;({gallery a').css({opacity: 0 #')$
أجلب أول صورة و اعرضها ( إجعلها إلى التعتيم الكامل ) ;({ gallery a:first').css({opacity: 1.0 # ')$ إجعل خلفية الوصف شبه شفافة ;({gallery .caption').css({opacity: 0.7 #')$ غير عرض خلفية الوصف وفقا لعرض الصورة ;({ ('gallery .caption').css({width: $('#gallery a').find('img').css('width#' )$ أجلب الوصف للصورة اﻷولى من السمة rel و اعرضها (('gallery .content').html($('#gallery a:first').find('img').attr('rel')$ ;(animate({opacity: 0.7}, 400). إستدع دالة معرض الصور و شغل السلايدشو، 15 ثانية = تغيير ;(setInterval('gallery()',15000 { } ()function gallery إذا لم يكن ﻷي صورة show class أجلب الصورة اﻷولى ;(('var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first أجلب الصورة التالية، إذا وصلت الصورة إلى نهاية السلايدشو إبدأ من جديد من الصورة اﻷولى ? ((var next = ((current.next().length) ? ((current.next().hasClass('caption ;(('gallery a:first') :current.next()) : $('#gallery a:first #'))$ أجلب وصف الصورة التالية ;('var caption = next.find('img').attr('rel إجعل تأثير التلاشي للصورة التالية، show class له z-index أعلى ({next.css({opacity: 0.0 (addClass('show. ;(animate({opacity: 1.0}, 1000). إخف الصورة الحالية (current.animate({opacity: 0.0}, 1000 ;('removeClass('show. إجعل التعتيم إلى 0 و الارتفاع 1 بكسل {'gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }) .animate({height: '1px# ')$ ;({ queue:true, duration:300 } حرك خلفية الوصف، التعتيم إلى 0.7 و الارتفاع إلى 100 بكسل، تأثير الانزلاق إلى اﻷعلى gallery .caption').animate({opacity: 0.7},100 ).animate #')$ ;(height: '100px'},500 }) عرض المحتوى ;(gallery .content').html(caption #')$ { |
لمشاهدة السلايدشو في الفديو إضغط هنا
لمشاهدة السلايد شو Demo إفتح مجلد سلايد شو جي كويري بعد تحميله، كليك يمين على ملف html.سلايد شو
جي كويري ثم فتح بواسطة المتصفح.
تحميل مجلد سلايد شو جي كويري
لمشاهدة السلايد شو Demo إفتح مجلد سلايد شو جي كويري بعد تحميله، كليك يمين على ملف html.سلايد شو
جي كويري ثم فتح بواسطة المتصفح.
تحميل مجلد سلايد شو جي كويري
تذكـــــــــــرة
{ سيد الاستغفارِ أنْ
تقولَ :
اللَّهمَّ
أنتَ ربِي ، لَا إلهَ إلَّا أنتَ ، خلَقْتَني
وأَنَا عبدُكَ ، وأنا علَى عَهْدِكَ
وَوَعْدِكَ ما استطعتُ ، أعوذُ بِكُ مِنْ
شَرِّ ما صنعْتُ ، أبوءُ لكَ بنعمتِكَ
عَلَيَّ ، وأبوءُ لَكَ بذنبي ، فاغفرْ
لِي ، فَإِنَّه لَا يغفرُ الذنوبَ إلَّا
أَنْتَ .
مَنْ
قالها مِنَ النهارِ موقِنًا بها ، فماتَ
مِنْ يومِهِ قبلَ أنْ يُمْسِيَ فهو مِنْ
أهلِ الجنةِ ، ومَنْ قالها مِنَ الليلِ
وهو موقنُ بها ، فماتَ قبلَ أنْ يُصْبِحَ
، فهو مِنْ أهلِ الجنةِ } رواه شداد بن أوس و صححه اﻷلباني.
|
{
جزاك الله خيرا ولكن لو كان فى فيديو يشرح الموضوع يكون اسرع وافضل
ردحذفتابعوا www.y2014.blogspot.com
www.al-athr.blogspot.com
شكرا لك أخي و أن شاء الله إن يسر الله ذلك سأعمل شرحا على فديو
ردحذفمحتاج لشخص خبير بتصميم المواقع لبعض التعديلات علي هذا الموقع لاضافة اكتر من تصنيف
ردحذفhttp://www.googlearab.tk/
http://www.googlearab.tk/