دروس في تطبيقات البرامج و استخداماتها

الغيص

Active Member
طاقم الإدارة

post_old.gif
02-01-2012, 08:49 PM
البريمل
user_offline.gif

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,772

icon1.gif

الحلقة الستون من برنامج في عالم التقنية هذا الأسبوع
إعداد وتقديم سعد القحطاني و سعود الشريهي , مشاهدة ممتعة.
 

التباب

Active Member
طاقم الإدارة
01-01-2012, 07:11 PM
البريمل
user_offline.gif

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,772

icon1.gif

بعد انقطاع لفتره قصيرة تعود لنا حلقات قناة التقنية العربية وهذه الحلقه تحمل الرقم 58 .
إعداد وتقديم سعد القحطاني و سعود الشريهي , مشاهدة ممتعة.


 

الغيص

Active Member
طاقم الإدارة

post_old.gif
02-01-2012, 09:08 PM
البريمل
user_offline.gif

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,772

icon1.gif

JQuery درس تطبيق قائمة بلوكات منسدله ( بسيط )

درس تطبيق عمل قائمة بلوكات منسدله

jquery_logo.gif


السلام عليكم ورحمة الله وبركاته

في مقالة سابقة من مدونتي قمت بشرح مبادئ ونبذه عن مكتبة JQuery الرائعه وبدايه لعملها

وأحببت أن أعمل تطبيق بعض الأمثله لنفهمها ونعرف كيفية استخدامها في مواقعنا

والمثال الأول هو تطبيق قائمات بلوك منسدله

ومن المواقع التي تعمل مثل هذا التأثير هو موقع شركة Apple الشهيرة

http://www.apple.com/startpage

هنا يمكنك مشاهدة مثال على ما سنقوم بتطبيقه
menu_scroll.gif




1/ إنشاء المجلد والصفحه

الان نبدأ في التطبيق ننشأ (مجلد جديد) باسم menu_scroll مثلاً

ونضع فيه ملف المكتبة الخاصة بالـ Jquery

jquery.js ( ويمكنك تحميلها من هنا ) ولا تنسى ان تقوم بإعادة تسميتها إلى jquery.js أفضل ليتناسب مع الدرس

ثم ننشأ صفحة الويب التي نريد ان نعمل التأثير فيها

باسم menu_scroll.htm مثلاً



2/ التصميم

نقوم أولاً بتصميم الشكل الذي نريد عمل التأثير عليه

وذالك باستخدام CSS نقوم بكتابة الـ Tags الخاصة بالبلوكات

كود:
<dl> <dt><a href="">عنوان 1</a></dt> <dd> <ul> <li><a href="">رابط 1</a></li> <li><a href="">رابط 2</a></li> <li><a href="">رابط 3</a></li> </ul> </dd> <dt><a href="">عنوان 2</a></dt> <dd> <ul> <li><a href="">رابط 1</a></li> <li><a href="">رابط 2</a></li> <li><a href="">رابط 3</a></li> <li><a href="">رابط 4</a></li> </ul> </dd> <dt><a href="">عنوان 3</a></dt> <dd> <ul> <li><a href="">رابط 1</a></li> <li><a href="">رابط 2</a></li> <li><a href="">رابط 3</a></li> </ul> </dd> </dl>

بعدها نعطي الـ Tags ما يناسبها من Style خاص بالـ CSS
فنقوم بكتابة داخل tag الـ <head> الـ tag الخاص بـ Style الـ CSS

كود:
<head> <style type="text/css"> </style> </head>

بعدها بدءً من الـ Tag الذي يحتوي على جميع البلوكات <dl> نعطيه مساحة عرض 300 بكسل ونعطي باقي الـ Tags ما يناسبها من style كم في التالي

كود:
dl { width: 300px; } dl,dd { margin: 0; } dt { background: #00CCFF; font-size: 18px; padding: 5px; margin: 2px; } dt a { color: #FFF; } dd a { color: #000; } ul { list-style: none; padding: 5px; }

الان وبعد ما انهينا مرحلة التصميم ننتقل إلى >>>




3/ كتابة الأكواد باستخدام مكتبة JQuery

هنا مرحلة كتابة أكواد الجافاسكربت, المتعلقه بمكتبة الـ JQuery

jquery_logo.gif


في داخل tag الـ <head> نقوم بتضمين المكتبة داخل الصفحه بكتابة

كود:
<script type="text/javascript" src="jquery.js"></script>


ونبدأ في كتابة الكود في تنفيذ العمليات في الصفحه

كود:
<script type="text/javascript"> </script>

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

كود:
<script type="text/javascript"> $(document).ready(function(){ }); </script>

ثم نقوم بكتابة الكود المتعلق بفتح البلوك عند الضغط على احد العناوين

كود:
$("dt a").click(function(){ $("dd").slideUp("slow"); $(this).parent().next().slideDown("slow"); return false; });

كتبنا dt a وهذا يعني انه يتم التعامل مع a الذي في داخل dt فقط

لذالك الـ class $ المتعلق بالبحث واختيار الـ Tags سهل واحترافي جداً في مكتبة JQuery

وبالنسبة لـ $("dd").slideUp("slow");
بهذا الكود نقوم بإخفاء جميع البلوكات ببساطه
icon_smile.gif


ثم بـ $(this).parent().next().slideDown("slow");
نقوم بإضهار بالتدريج العنصر الذي يلي العنصر الذي تم الضغط عليه
بحيث هذا الكود $(this).parent() يقوم باختيار العنصر الحالي الذي تم الضغط عليه وعند إضافة next() يتم تحديد العنصر الذي يليه



الان انتهينا من كل شي ما عدا خطوه أخيره

عند فتح الصفحه نود ان نقوم بإضهار اول بلوك وهي عن طريق كتابة الكود التالي

كود:
$("dd:not:)first)").hide();

في أول السطر, والكود معناه أخفي جميع البلوكات ماعدا اول بلوك, وذالك بإضافة ( :not )
و ( :first ) يقوم بتحديد أول tag أو element يحمل اسم dd في الصفحه


# إنتهى #


بإمكانك الإستفاده من الأوامر الخاصة بمكتبة JQuery عن طريق الـ Documentation بالموقع
http://docs.jquery.com
وفي حال ان first يتم اختيار اول Tag أو Element فإن بإمكانك إختيار آخر Tag بكتابة last … وإلى آخره

وبكل بساطه يتم عمل تأثيرات رائعة جداً وبسهوله عن طريق استخدام مكتبة JQuery الرائعه



وفي المقالة التالية سنقوم بعمل تطبيق مثال أكثر إحترافيه لنتعلم المزيد من استخدام JQuery

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

وخاصة كما هو مكتوب في مدونة الـ JQuery
jQuery Blog

Google Using jQuery

وهذا ان دل فيدل على ان المكتبة رائعه وقويه في الاستخدام

ولاي استفسارات ارحب بها واسأل الله تعالى ان يعيننا جميعاً على العلم النافع والعمل الصالح ...

وإن أخطأت فمن نفسي ومن الشيطان وإن إصبت فمن الله وحده

مع التحيه والتقدير …







عالم التقنية


 

التباب

Active Member
طاقم الإدارة
02-01-2012, 08:49 PM
البريمل
user_offline.gif

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,772

icon1.gif

الحلقة الستون من برنامج في عالم التقنية هذا الأسبوع
إعداد وتقديم سعد القحطاني و سعود الشريهي , مشاهدة ممتعة.
 

الغيص

Active Member
طاقم الإدارة

post_old.gif
16-02-2012, 05:32 AM
البريمل
user_offline.gif

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,772

icon1.gif

6

بعد انقطاع لفتره قصيرة تعود لنا حلقات قناة التقنية العربية وهذه الحلقه تحمل الرقم 58 .
إعداد وتقديم سعد القحطاني و سعود الشريهي , مشاهدة ممتعة.


 

التباب

Active Member
طاقم الإدارة
02-01-2012, 09:08 PM
البريمل
user_offline.gif

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,772

icon1.gif

JQuery درس تطبيق قائمة بلوكات منسدله ( بسيط )

درس تطبيق عمل قائمة بلوكات منسدله

jquery_logo.gif


السلام عليكم ورحمة الله وبركاته

في مقالة سابقة من مدونتي قمت بشرح مبادئ ونبذه عن مكتبة JQuery الرائعه وبدايه لعملها

وأحببت أن أعمل تطبيق بعض الأمثله لنفهمها ونعرف كيفية استخدامها في مواقعنا

والمثال الأول هو تطبيق قائمات بلوك منسدله

ومن المواقع التي تعمل مثل هذا التأثير هو موقع شركة Apple الشهيرة

http://www.apple.com/startpage
هنا يمكنك مشاهدة مثال على ما سنقوم بتطبيقه
menu_scroll.gif



1/ إنشاء المجلد والصفحه

الان نبدأ في التطبيق ننشأ (مجلد جديد) باسم menu_scroll مثلاً

ونضع فيه ملف المكتبة الخاصة بالـ Jquery

jquery.js ( ويمكنك تحميلها من هنا ) ولا تنسى ان تقوم بإعادة تسميتها إلى jquery.js أفضل ليتناسب مع الدرس

ثم ننشأ صفحة الويب التي نريد ان نعمل التأثير فيها

باسم menu_scroll.htm مثلاً



2/ التصميم

نقوم أولاً بتصميم الشكل الذي نريد عمل التأثير عليه

وذالك باستخدام CSS نقوم بكتابة الـ Tags الخاصة بالبلوكات

كود:
<dl> <dt><a href="">عنوان 1</a></dt> <dd> <ul> <li><a href="">رابط 1</a></li> <li><a href="">رابط 2</a></li> <li><a href="">رابط 3</a></li> </ul> </dd> <dt><a href="">عنوان 2</a></dt> <dd> <ul> <li><a href="">رابط 1</a></li> <li><a href="">رابط 2</a></li> <li><a href="">رابط 3</a></li> <li><a href="">رابط 4</a></li> </ul> </dd> <dt><a href="">عنوان 3</a></dt> <dd> <ul> <li><a href="">رابط 1</a></li> <li><a href="">رابط 2</a></li> <li><a href="">رابط 3</a></li> </ul> </dd> </dl>

بعدها نعطي الـ Tags ما يناسبها من Style خاص بالـ CSS
فنقوم بكتابة داخل tag الـ <head> الـ tag الخاص بـ Style الـ CSS

كود:
<head> <style type="text/css"> </style> </head>

بعدها بدءً من الـ Tag الذي يحتوي على جميع البلوكات <dl> نعطيه مساحة عرض 300 بكسل ونعطي باقي الـ Tags ما يناسبها من style كم في التالي

كود:
dl { width: 300px; } dl,dd { margin: 0; } dt { background: #00CCFF; font-size: 18px; padding: 5px; margin: 2px; } dt a { color: #FFF; } dd a { color: #000; } ul { list-style: none; padding: 5px; }

الان وبعد ما انهينا مرحلة التصميم ننتقل إلى >>>




3/ كتابة الأكواد باستخدام مكتبة JQuery

هنا مرحلة كتابة أكواد الجافاسكربت, المتعلقه بمكتبة الـ JQuery

jquery_logo.gif


في داخل tag الـ <head> نقوم بتضمين المكتبة داخل الصفحه بكتابة

كود:
<script type="text/javascript" src="jquery.js"></script>

ونبدأ في كتابة الكود في تنفيذ العمليات في الصفحه

كود:
<script type="text/javascript"> </script>

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

كود:
<script type="text/javascript"> $(document).ready(function(){ }); </script>

ثم نقوم بكتابة الكود المتعلق بفتح البلوك عند الضغط على احد العناوين

كود:
$("dt a").click(function(){ $("dd").slideUp("slow"); $(this).parent().next().slideDown("slow"); return false; });

كتبنا dt a وهذا يعني انه يتم التعامل مع a الذي في داخل dt فقط

لذالك الـ class $ المتعلق بالبحث واختيار الـ Tags سهل واحترافي جداً في مكتبة JQuery

وبالنسبة لـ $("dd").slideUp("slow");
بهذا الكود نقوم بإخفاء جميع البلوكات ببساطه
icon_smile.gif


ثم بـ $(this).parent().next().slideDown("slow");
نقوم بإضهار بالتدريج العنصر الذي يلي العنصر الذي تم الضغط عليه
بحيث هذا الكود $(this).parent() يقوم باختيار العنصر الحالي الذي تم الضغط عليه وعند إضافة next() يتم تحديد العنصر الذي يليه



الان انتهينا من كل شي ما عدا خطوه أخيره

عند فتح الصفحه نود ان نقوم بإضهار اول بلوك وهي عن طريق كتابة الكود التالي

كود:
$("dd:not:)first)").hide();

في أول السطر, والكود معناه أخفي جميع البلوكات ماعدا اول بلوك, وذالك بإضافة ( :not )
و ( :first ) يقوم بتحديد أول tag أو element يحمل اسم dd في الصفحه


# إنتهى #


بإمكانك الإستفاده من الأوامر الخاصة بمكتبة JQuery عن طريق الـ Documentation بالموقع
http://docs.jquery.com
وفي حال ان first يتم اختيار اول Tag أو Element فإن بإمكانك إختيار آخر Tag بكتابة last … وإلى آخره

وبكل بساطه يتم عمل تأثيرات رائعة جداً وبسهوله عن طريق استخدام مكتبة JQuery الرائعه



وفي المقالة التالية سنقوم بعمل تطبيق مثال أكثر إحترافيه لنتعلم المزيد من استخدام JQuery

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

وخاصة كما هو مكتوب في مدونة الـ JQuery
jQuery Blog

Google Using jQuery

وهذا ان دل فيدل على ان المكتبة رائعه وقويه في الاستخدام

ولاي استفسارات ارحب بها واسأل الله تعالى ان يعيننا جميعاً على العلم النافع والعمل الصالح ...

وإن أخطأت فمن نفسي ومن الشيطان وإن إصبت فمن الله وحده

مع التحيه والتقدير …







عالم التقنية
 

الغيص

Active Member
طاقم الإدارة

post_old.gif
17-02-2012, 01:31 PM
البريمل
user_offline.gif

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,772

icon1.gif

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




http://www.youtube.com/watch?feature...&v=xuAAjZ9rzL4












أضاف أحد زوار الموقع الأخ سامي مشكوراً بخبر جديد عن موقع متميز اسمه Arabic eLearn يعلن عن عرضه للدروس كامله بشكل مجاني 100% بهذا الإعلان الجديد في موقعه.
ael_free.gif

خطوة قوية ورائعه حيث هذا الموقع يقدم دروس قويه بالفيديو حتى انني سابقاً فكرت انني اشترك فيه لكن تكاسلت لكن الأن اصبح يقدمها مجاناً اعتقد هذا دافع قوي ومحفز لدخول ومشاهدة المقاطع التعليميه التي يخرجها وينفذها الموقع بدقه وأسلوب جميل , هذا الموقع هو موقع عربي شبيه لفكرة شركة Lynda العالمية لكن السؤال هنا الأن أصبح مجاناً هل هذه خطوه دائمه أم فقط عرض مؤقت عموماً نحن الأن نستفيد من هذه الخدمات ولكل حادث حديث
بديت أجرب الخدمه قبل لا أعلنها لكم بحيث تكون صحيحه 100% وفعلاً سجلت عن طريق الرابط التالي لكن بصراحه طريقة التسجيل صعبه يعني مثلاً اي كلمه كتبتها ما تقدر تمسحها انا اضطريت اني اعيد تحديث الصفحه لأي خطأ لأن ما أقدر امسحها لما أضغط Backspace ما يتفعل , لما طولت سالفة التحديث سويت تحديد الكل ثم CTRL + X ثم اكتب الحقل من جديد , ثانياً عملية Tabs بين الحقول برضوا مو فعله بحيث لما تنتهي من كتابة حقل وتنتقل لحقل آخر ما تقدر تضغط تاب وينتقل له لازم تضغطه بالماوس, عموماً عدينا عملية التسجيل بنجاح والحمد لله, بصراحه هناك دروس قيمه ورائعه مثل PHP و Photoshop و Ilustrator وغيرها الكثير , دخلت على PHP Advanced وهذه هي الدروس المتقدمه من لغة البرمجة PHP وليست الدروس البسيطه الـ Basic وتتكون الدروس المتقدمه من سلسلة من الدروس يصل وقتها إلى 6 ساعات ونصف وتتكون من 99 درس ومرتبه بترتيب رائع ومتقن هذا فقط هذا الجزء من الدروس وهناك المزيد والمتنوع ,
موقع عربي يستحق الإشاده والتسجيل فيه








عالم التقنية
 

التباب

Active Member
طاقم الإدارة
16-02-2012, 05:32 AM
البريمل
user_offline.gif

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,772

icon1.gif

6

بعد انقطاع لفتره قصيرة تعود لنا حلقات قناة التقنية العربية وهذه الحلقه تحمل الرقم 58 .
إعداد وتقديم سعد القحطاني و سعود الشريهي , مشاهدة ممتعة.


 

التباب

Active Member
طاقم الإدارة
17-02-2012, 01:31 PM
البريمل
user_offline.gif

عضو مميز

تاريخ التسجيل: Oct 2009
المشاركات: 9,772

icon1.gif

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




http://www.youtube.com/watch?feature...&v=xuAAjZ9rzL4









أضاف أحد زوار الموقع الأخ سامي مشكوراً بخبر جديد عن موقع متميز اسمه Arabic eLearn يعلن عن عرضه للدروس كامله بشكل مجاني 100% بهذا الإعلان الجديد في موقعه.
ael_free.gif

خطوة قوية ورائعه حيث هذا الموقع يقدم دروس قويه بالفيديو حتى انني سابقاً فكرت انني اشترك فيه لكن تكاسلت لكن الأن اصبح يقدمها مجاناً اعتقد هذا دافع قوي ومحفز لدخول ومشاهدة المقاطع التعليميه التي يخرجها وينفذها الموقع بدقه وأسلوب جميل , هذا الموقع هو موقع عربي شبيه لفكرة شركة Lynda العالمية لكن السؤال هنا الأن أصبح مجاناً هل هذه خطوه دائمه أم فقط عرض مؤقت عموماً نحن الأن نستفيد من هذه الخدمات ولكل حادث حديث
بديت أجرب الخدمه قبل لا أعلنها لكم بحيث تكون صحيحه 100% وفعلاً سجلت عن طريق الرابط التالي لكن بصراحه طريقة التسجيل صعبه يعني مثلاً اي كلمه كتبتها ما تقدر تمسحها انا اضطريت اني اعيد تحديث الصفحه لأي خطأ لأن ما أقدر امسحها لما أضغط Backspace ما يتفعل , لما طولت سالفة التحديث سويت تحديد الكل ثم CTRL + X ثم اكتب الحقل من جديد , ثانياً عملية Tabs بين الحقول برضوا مو فعله بحيث لما تنتهي من كتابة حقل وتنتقل لحقل آخر ما تقدر تضغط تاب وينتقل له لازم تضغطه بالماوس, عموماً عدينا عملية التسجيل بنجاح والحمد لله, بصراحه هناك دروس قيمه ورائعه مثل PHP و Photoshop و Ilustrator وغيرها الكثير , دخلت على PHP Advanced وهذه هي الدروس المتقدمه من لغة البرمجة PHP وليست الدروس البسيطه الـ Basic وتتكون الدروس المتقدمه من سلسلة من الدروس يصل وقتها إلى 6 ساعات ونصف وتتكون من 99 درس ومرتبه بترتيب رائع ومتقن هذا فقط هذا الجزء من الدروس وهناك المزيد والمتنوع ,
موقع عربي يستحق الإشاده والتسجيل فيه








عالم التقنية
 
أعلى