Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Bootstrap 4 وتطوير قسم المستخدم باستخدام Angular 4

147 Aufrufe

Veröffentlicht am

دورة في تعلم Bootstrap 4 و Angular 4
مسار تطوير تطبيقات الويب والموبايل

ويكيلوجيا هاكاثون - Wikilogia Hackathon

Veröffentlicht in: Bildung
  • ⇒ www.HelpWriting.net ⇐ This service will write as best as they can. So you do not need to waste the time on rewritings.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • You have to choose carefully. ⇒ HelpWriting.net ⇐ offers a professional writing service. I highly recommend them. The papers are delivered on time and customers are their first priority. This is their website: ⇒ HelpWriting.net ⇐
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Bootstrap 4 وتطوير قسم المستخدم باستخدام Angular 4

  1. 1. ‫املستخدم‬ ‫قسم‬ ‫تطوير‬ ‫و‬ ‫باستخدام‬ ‫الجلسة‬‫الثالثة‬
  2. 2. ‫منصات‬‫للمستخدم‬ ‫الويب‬ ‫واجهة‬ ‫لتصميم‬ 1
  3. 3. ‫هي؟‬ ‫ما‬ ‫مجموعة‬‫قوالب‬ ‫من‬HTML،CSS‫و‬JavaScript‫شكل‬ ‫ىلع‬ ‫لالستخدام‬ ‫جاهزة‬ ‫لواجهة‬ ‫مكونات‬‫املستخدم‬: ‫إرسال‬ ‫قوالب‬(Forms)‫أزرار‬ ،(Buttons)‫الجداول‬ ،(Tables)‫املالحة‬ ،(Navigations)، ‫املنسدلة‬(Dropdowns)‫تنبيهات‬ ،(Alerts)‫منبثقة‬ ‫لوائح‬ ،(Modals)‫عالمات‬ ، ‫التبويب‬(Tabs)،‫دائري‬ ‫شريط‬(Carousel)‫الخ‬.
  4. 4. ‫مشهورة‬ ‫تصميم‬ ‫منصات‬ 1. Bootstrap 2. Semantic-UI 3. Foundation 4. Materialize 5. Material UI 6. Pure 7. Skeleton 8. UIKit 9. Milligram 10. Susy
  5. 5. ‫استخدامها؟‬ ‫يتم‬ ‫ملاذا‬ •‫متجاوب‬ ‫ويب‬ ‫تصميم‬‫الشاشة‬ ‫حجم‬ ‫حسب‬: ‫اللوحية‬ ‫لألجهزة‬ ‫أولوية‬ ‫إعطاء‬ •‫املتصفحات‬ ‫أنواع‬ ‫كافة‬ ‫مع‬ ‫متالئم‬. •‫االنتاجية‬ ‫زيادة‬. •‫املجتمع‬ ‫دعم‬: ‫قوالب‬‫ل‬‫ويب‬ ‫صفحات‬
  6. 6. ‫إلى‬ ‫مقدمة‬ 2
  7. 7. ‫عن‬ ‫ملحة‬Bootstrap Bootstrap‫إطار‬ ‫أول‬ ‫هو‬‫لتطوير‬‫تستجيب‬ ‫اإلنترنت‬ ‫شبكة‬ ‫ىلع‬ ‫مشاريع‬ ‫املحمولة‬ ‫األجهزة‬ ‫وتراعي‬ ‫الشاشة‬ ‫بحجم‬ ‫ُّر‬‫للتغي‬
  8. 8. ‫تاريخ‬Bootstrap •‫صدرت‬‫عام‬ ‫يف‬ ‫مرة‬ ‫ألول‬2011 -‫قبل‬ ‫من‬Mark Otto‫و‬Jacob Thornton •‫اإلصدار‬‫الحالي‬‫لها‬3.3.7 •‫اإلصدار‬4.0‫قريبًا‬ ‫سيصدر‬ -‫حاليا‬‫نسخة‬،‫ألفا‬‫ولكنها‬‫مستقرة‬ ‫الغالب‬ ‫يف‬ -‫هذا‬ ‫يغطي‬‫النسخة‬ ‫املساق‬4.0، ‫ولكن‬‫الصفوف‬ ‫معظم‬‫ىلع‬ ‫تنطبق‬ ‫تزال‬ ‫ال‬3.3.7 •‫اإلطار‬‫األول‬ ‫الشامل‬ -‫بسرعة‬ ‫شعبية‬ ‫اكتسب‬‫كبيرة‬
  9. 9. ‫املتجاوب‬ ‫التصميم‬ 3
  10. 10. ‫املتجاوب‬ ‫التصميم‬ ‫ملاذا‬ •‫طريق‬ ‫عن‬ ‫اإلنترنت‬ ‫مواقع‬ ‫إلى‬ ‫متزايد‬ ‫بشكل‬ ‫يصلون‬ ‫املستخدمون‬ ‫بحجوم‬ ‫تختلف‬ ‫والتي‬ ‫اللوحية‬ ‫األجهزة‬‫شاشاتها‬ •‫اآلن‬ ‫بعد‬ ‫صالحًا‬ ‫يكون‬ ‫لن‬ ‫الواحد‬ ‫الحجم‬ ‫ىلع‬ ‫يعتمد‬ ‫الذي‬ ‫الحل‬ •‫ّف‬‫ي‬‫التك‬‫مع‬"‫العرض‬ ‫إطار‬"‫باملستخدم‬ ‫الخاص‬ ‫املوقع‬ ‫نواة‬ ‫ضمن‬ ‫ذلك‬ ‫بناء‬
  11. 11. ‫اللوحية‬ ‫لألجهزة‬ ‫التصميم‬ ‫أولوية‬ Mobile First Design ‫التقليدي‬ ‫األسلوب‬ ‫اللوحية‬ ‫باألجهزة‬ ‫البدء‬ ً‫ال‬‫أو‬ ‫الجوال‬ ‫قيود‬ ‫مراعاة‬ ‫يتم‬
  12. 12. ‫املتجاوب‬ ‫التصميم‬ ‫أسس‬ •‫الشبكة‬ ‫نظام‬(Grid System) ‫سنقوم‬‫ب‬‫التعامل‬‫الشبكة‬ ‫نظام‬ ‫مع‬‫سيأتي‬ ‫فيما‬ •Fluid images ‫دعم‬ ‫نشاهد‬ ‫سوف‬Bootstrap‫الحق‬ ‫لها‬ •‫الوسائط‬ ‫استعالمات‬(Media Queries)
  13. 13. ‫ا‬‫ستعالمات‬‫الوسائط‬(Media Queries) ‫سبيل‬ ‫ىلع‬ ،‫العرض‬ ‫إطار‬ ‫حجم‬ ‫ىلع‬ ‫باالعتماد‬ ‫التصاميم‬ ‫لتطبيق‬ ‫تقنية‬ ‫املثال‬: @media (min-width: 992px) { /* CSS styles customized for desktop */ }
  14. 14. ‫بذلك؟‬ ‫القيام‬ ‫يمكننا‬ ‫كيف‬ ‫مبنية‬ ‫املستخدم‬ ‫واجهات‬ ‫لتصميم‬ ‫منصة‬ ‫ىلع‬ ‫باالعتماد‬ ‫بالتصميم‬ ‫البدء‬ ‫املتجاوب‬ ‫التصميم‬ ‫أساس‬ ‫ىلع‬
  15. 15. ‫الشبكي‬ ‫النظام‬ 4
  16. 16. ‫العرض‬ ‫إطار‬(Viewport) <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> •‫الوصفي‬ ‫الوسم‬‫العرض‬ ‫إلطار‬: -‫الشاشة‬ ‫عرض‬ ‫تعيين‬ ‫يضمن‬‫يساوي‬ ‫بما‬‫عرض‬‫الجهاز‬ ‫هذا‬ ‫أخذ‬ ‫مع‬ ‫املحتوى‬ ‫إظهار‬ ‫ويتم‬‫العرض‬‫االعتبار‬ ‫بعين‬. -‫لتكون‬ ‫املواقع‬ ‫تصميم‬‫العرض‬ ‫إطار‬ ‫لحجم‬ ‫استجابة‬ ‫ذات‬ -‫شبكة‬ ‫نظام‬Bootstrap
  17. 17. CSS Flexbox Layout •‫يف‬ ‫وأبسط‬ ‫أسهل‬ ‫خيارات‬CSS •‫الحجم‬ ‫معالجة‬ ‫بسهولة‬ ‫يمكنها‬(‫الديناميكي‬/‫ثابت‬ ‫الغير‬) ‫املحتوى‬ ‫لحاويات‬ •‫االتجاه‬ ‫عن‬ ‫مستقلة‬ ‫عرض‬ ‫بنية‬(‫يساري‬ ‫أم‬ ‫يميني‬)
  18. 18. ‫بنية‬ ‫ملاذا‬Flexbox‫لـ‬bootstrap •‫األب‬ ‫العنصر‬ ‫ضمن‬ ‫للمحتوى‬ ‫األفقية‬ ‫املحاذاة‬ ‫تطبيق‬ ‫سهولة‬ •‫بمساعدة‬ ‫الشاشات‬ ‫ودقة‬ ‫األجهزة‬ ‫حسب‬ ‫العناصر‬ ‫ترتيب‬ ‫إعادة‬ ‫سهولة‬Media Queries •‫االتجاه‬ ‫عن‬ ‫مستقلة‬ ‫عرض‬ ‫بنية‬(‫يساري‬ ‫أم‬ ‫يميني‬) •‫ىلع‬ ‫فقط‬ ‫باالعتماد‬ ‫األعمدة‬ ‫أطوال‬ ‫مساواة‬ ‫سهولة‬CSS‫العرض‬ ‫لبنى‬ ‫وذلك‬ ‫الشبكة‬ ‫ىلع‬ ‫املعتمدة‬
  19. 19. ‫شبكة‬Bootstrap
  20. 20. ‫شبكة‬Bootstrap •‫تتيح‬Bootstrap‫خمسة‬‫صفوف‬: sm for small, md for medium, lg for large, and xl for extra large screen sizes •‫يف‬ ‫سطر‬ ‫كل‬Bootstrap‫مقسم‬‫إلى‬12‫عمودًا‬ •‫الصفوف‬ ‫تستخدم‬col-*, .col-sm-*, col-md-*, and .col-lg-* ‫لتعريف‬‫حجوم‬ ‫ملختلف‬ ‫املناسبة‬ ‫العرض‬ ‫بنية‬‫الشاشات‬ •‫املحتوى‬ ‫من‬ ‫قطعة‬ ‫كل‬ ‫ستشغله‬ ‫الذي‬ ‫األعمدة‬ ‫عدد‬ ‫تحدد‬ ‫يتم‬ ‫هو‬ ‫مجموعها‬ ‫يكون‬ ‫بحيث‬ ‫السطر‬ ‫ضمن‬12‫مضاعفاته‬ ‫من‬ ‫أو‬
  21. 21. ‫شبكة‬Bootstrap
  22. 22. ‫شبكة‬ ‫خصائص‬Bootstrap
  23. 23. Push and Pull Extra Small Screens Small, Medium, Large and Extra Large Screens
  24. 24. ‫املحتوى‬ ‫ترتيب‬ ‫إعادة‬ Extra Small Screens Small, Medium, Large and Extra Large Screens
  25. 25. ‫املتداخلة‬ ‫األعمدة‬
  26. 26. ‫مع‬ ‫الربط‬Bootstrap ‫ملفات‬ ‫تضمين‬ ‫يتم‬Bootstrap‫التالية‬ ‫الطرق‬ ‫بإحدى‬: •‫موقع‬ ‫من‬ ‫امللفات‬ ‫تحميل‬http://getbootstrap.com/ ‫الويب‬ ‫صفحة‬ ‫مع‬ ‫امللفات‬ ‫هذه‬ ‫وربط‬ •‫م‬ ‫الويب‬ ‫صفحة‬ ‫ربط‬‫ع‬‫من‬ ‫امللفات‬ ‫من‬ ‫خارجية‬ ‫نسخة‬ CDN (Content Delivery Network)‫وأحد‬‫لها‬ ‫املزودات‬‫هو‬MaxCDN •‫تحميل‬‫للحزم‬ ‫مدير‬ ‫خالل‬ ‫من‬ ‫امللفات‬(‫هو‬ ‫حالتنا‬ ‫يف‬npm) ‫لذلك‬ ‫سنتطرق‬‫الحقًا‬.
  27. 27. ‫قالب‬Bootstrap
  28. 28. ‫عملي‬ ‫تطبيق‬! ‫السابقة‬ ‫األدوات‬ ‫باستخدام‬‫امللف‬ ‫يف‬ ‫التمرين‬ ‫أكمل‬ ‫الصفحة‬ ‫بربط‬ ‫قم‬‫مع‬‫تنسيقها‬ ‫أعد‬ ‫ثم‬ ‫باستخدام‬‫املرفقة‬ ‫الصورة‬ ‫لتشابه‬
  29. 29. ‫مكونات‬ ‫بعض‬ 5
  30. 30. Navigation
  31. 31. Icon Fonts (Font Awesome)
  32. 32. ‫املستخدم‬ ‫مدخالت‬(User Input)
  33. 33. ‫املستخدم‬ ‫مدخالت‬(User Input)
  34. 34. ‫الجداول‬(Tables)
  35. 35. ‫الجداول‬(Tables)
  36. 36. Bootstrap Cards
  37. 37. Images & Media
  38. 38. Responsive Embed
  39. 39. Alerting User (Badges)
  40. 40. Alerting User (Alter)
  41. 41. Alerting User (Progress Bar)
  42. 42. ‫مكونات‬ 6
  43. 43. Bootstrap‫مع‬JS ‫دعم‬bootstrap‫لـ‬JavaScript‫إضافات‬ ‫خالل‬ ‫من‬(plugins) ‫ىلع‬ ً‫ء‬‫بنا‬ ‫مكتوبة‬ ‫اإلضافات‬Jquery ‫حدة‬ ‫ىلع‬ ٌ‫ل‬‫ك‬ ‫اإلضافات‬ ‫تضمين‬ ‫يمكن‬
  44. 44. Bootstrap‫مع‬JS
  45. 45. ‫إضافات‬ ‫استخدام‬Bootstrap JS ‫ملفات‬ ‫تضمين‬JavaScript‫الوسم‬ ‫نهاية‬ ‫يف‬<body> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/tether/dist/js/tether.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  46. 46. ‫مكونات‬Bootstrap JS •‫مكونات‬JS‫سطر‬ ‫أي‬ ‫كتابة‬ ‫بدون‬ ‫تستخدم‬ ‫أن‬ ‫يمكن‬JS: -data-* attributes(،‫املثال‬ ‫سبيل‬ ‫ىلع‬data-toggle, data-spy) -‫استخدام‬ ‫يف‬ ‫جدًا‬ ‫واضح‬ ‫منهج‬‫اإلضافات‬ -‫هذا‬ ‫نستكشف‬ ‫سوف‬‫املنهج‬‫يف‬‫الجلسة‬ ‫هذه‬ •‫متاحة‬ ‫كاملة‬ ‫برمجية‬ ‫واجهة‬‫األمر‬ ‫لزم‬ ‫إذا‬ -‫إلى‬ ‫تحتاج‬‫كتابة‬ ‫بقواعد‬ ‫إملام‬JavaScript‫و‬JQuery
  47. 47. Collapse
  48. 48. Collapse
  49. 49. Tooltips
  50. 50. Popover <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data- placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button>
  51. 51. Modals
  52. 52. Modals
  53. 53. Carousel
  54. 54. Carousel
  55. 55. ‫عملي‬ ‫تطبيق‬! ‫السابقة‬ ‫األدوات‬ ‫باستخدام‬‫امللف‬ ‫يف‬ ‫التمرين‬ ‫أكمل‬ ‫بإضافة‬ ‫قم‬‫املرف‬ ‫بامللفات‬ ‫باالستعانة‬ ‫الويب‬ ‫صفحة‬ ‫إلى‬‫قة‬
  56. 56. ‫و‬ 7
  57. 57. JQuery •‫للـ‬ ‫خفيفة‬ ‫مكتبة‬JavaScript •‫بها‬ ‫تتميز‬ ‫التي‬ ‫املزايا‬: -‫مع‬ ‫التعامل‬HTML/DOM -‫مع‬ ‫التعامل‬CSS -‫لألحداث‬ ‫توابع‬(Events)‫بالـ‬ ‫خاصة‬HTML -‫وتحريك‬ ‫تأثيرات‬ ‫إضافة‬ -AJAX •‫مكونات‬Bootstrap JavaScript‫ىلع‬ ‫مبنية‬JQuery
  58. 58. ‫بـ‬ ‫التكابة‬ ‫بنية‬JQuery •$(selector).action() -$:‫تعريف‬/‫لـ‬ ‫الوصول‬Jquery -(selector:)‫عنصر‬ ‫إليجاد‬ ‫بأمر‬ ‫القيام‬HTML -action():‫سابق‬ ‫عناصر‬ ‫من‬ ‫تحديده‬ ‫تم‬ ‫ما‬ ‫ىلع‬ ‫تنفيذه‬ ‫سيتم‬ ‫الذي‬ ‫الحدث‬‫ًا‬ -‫املثال‬ ‫سبيل‬ ‫ىلع‬:$(“p”).hide(), $(“#mycarousel”).carousel(‘pause’)
  59. 59. ‫عن‬ ‫مثال‬Bootstrap JQuery <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script>
  60. 60. ‫محددات‬(JQuery Selectors) •‫عنصر‬ ‫تحديد‬HTMLً‫ال‬‫مث‬ ،:“P”،“button” •‫الفريد‬ ‫املعرف‬ ‫باستخدام‬ ‫تحدد‬(Id#)،ً‫ال‬‫مث‬:“#myCarousel” •ً‫ال‬‫مث‬ ،‫صف‬ ‫تحديد‬:“.btn”،“.btn.btn-default” •ً‫ال‬‫مث‬ ،‫معامل‬ ‫تحديد‬:“[href]”،“[data-toggle=“tooltip”]” •‫الحالي‬ ‫العنصر‬ ‫تحديد‬:$(this) •‫غيرها‬ ‫وطرق‬..
  61. 61. ‫أحداث‬(JQuery Events) •‫بنية‬ ‫ىلع‬ ‫أحداث‬ ‫يسبب‬ ‫الويب‬ ‫صفحة‬ ‫مع‬ ‫املستخدم‬ ‫تفاعل‬DOM -‫الفأرة‬:click, dblclick, mouseenter, mouseleave -‫املفاتيح‬ ‫لوحة‬:keypress, keydown, keyup -‫اإلرسال‬ ‫قوالب‬:submit, change, focus, blur -‫النافذة‬ ،‫املستند‬:load, resize, scroll, unload •‫أحداث‬ ‫توابع‬Jquery:ً‫ال‬‫مث‬:ready(), click(), dblclick(), mousedown(), on()
  62. 62. ‫للـ‬ ‫األسبقية‬ ‫املعالجات‬ 8
  63. 63. CSS •‫تعد‬CSS‫ع‬ ‫ىلع‬ ‫متكرر‬ ‫بشكل‬ ‫وتطبيقها‬ ‫تصاميم‬ ‫لتعريف‬ ‫األمثل‬ ‫الحل‬‫ناصر‬ HTML •CSS‫متحوالت‬ ‫تعريف‬ ‫نوع‬ ‫من‬ ‫مزايا‬ ‫تغطي‬ ‫ال‬(defining variables)‫تحديدات‬ ، ‫متداخلة‬(nesting selectors)‫تعابير‬ ،(expressions)‫توابع‬ ،(functions) -‫التعديل‬ ‫أو‬ ‫التصليح‬ ‫عملية‬ ‫يف‬ ‫معاناة‬ ‫إلى‬ ‫يؤدي‬ ‫هذا‬
  64. 64. CSS Preprocessors •‫مشهور‬ ‫منها‬ ‫العديد‬: -Less -Sass(Syntactically Awesome Style Sheets) (Sassy CSS) syntax examined in this course Scss -stylus •‫إلى‬ ‫جميعها‬ ‫ترجمتها‬ ‫يتم‬CSS‫استخدامه‬ ‫قبل‬ ‫تلقائي‬ ‫بشكل‬ ‫التقليدية‬‫ا‬ ‫الويب‬ ‫صفحة‬ ‫يف‬ •‫إلى‬ ‫سنتطرق‬Less‫و‬Sass‫مختصر‬ ‫بشكل‬ •Bootstrap 3‫تستخدم‬ ‫كانت‬Less‫انتقلت‬ ‫بينما‬Bootstrap 4‫إلى‬Sass
  65. 65. ‫لـ‬ ‫نمطية‬ ‫مزايا‬CSS Preprocessors •‫املتحوالت‬ •‫متداخلة‬ ‫تحديدات‬(nesting selectors) •Mixins(‫عن‬ ‫تصريح‬ ‫من‬ ‫أكثر‬ ‫عن‬ ‫تعبر‬ ‫أن‬ ‫يمكنها‬CSS‫املتحوالت‬ ‫عكس‬ ‫ىلع‬) •‫تعابير‬(expressions)‫و‬‫توابع‬(functions)
  66. 66. ‫املتحوالت‬ Less @lt-gray: #ddd; @background-dark: #512DA8; @carousel-item-height: 300px; .navbar-inverse { background:@background-dark; } .carousel .carousel-item { height: @carousel-item-height; } Scss $lt-gray: #ddd; $background-dark: #512DA8; $carousel-item-height: 300px; .navbar-inverse { background:$background-dark; } .carousel .item { height: $carousel-item-height; }
  67. 67. ‫التعشيش‬(Nesting) Less @background-dark: #512DA8; @carousel-item-height: 300px; .carousel { background:@background-dark; .carousel-item { height: @carousel-item-height; img { position: absolute; top: 0; left: 0; min-height: 300px; } } } Scss $background-dark: #512DA8; $carousel-item-height: 300px; .carousel { background:$background-dark; .carousel-item { height: $carousel-item-height; img { position: absolute; top: 0; left: 0; min-height: 300px; } } }
  68. 68. Mixins ‫مالحظة‬:‫استخدم‬.zero-margin() { … }‫إذا‬ ‫تريد‬ ‫ال‬ ‫كنت‬.zero-margin‫يتم‬ ‫أن‬ ‫نفسها‬ ‫الترجمة‬ ‫عملية‬ ‫يف‬ ‫تضمينها‬
  69. 69. Mixins with Parameters Less .zero-margin (@pad-up-dn: 0px, @pad-left-right: 0px) { margin:0px auto; padding: @pad-up-dn @pad-left-right; } .row-header { .zero-margin(); padding:0px auto; } .row-content { .zero-margin (50px, 0px); border-bottom: 1px ridge; min-height:400px; } Scss @ mixin zero-margin ($pad-up-dn, $pad-left-right) { margin:0px auto; padding: $pad-up-dn $pad-left-right; } .row-header { @include zero-margin(0px, 0px); padding:0px auto; } .row-content { @include zero-margin (50px, 0px); border-bottom: 1px ridge; min-height:400px; }
  70. 70. ‫متحوالت‬ ‫مع‬ Mixins Less .zero-margin (@pad-up-dn: 0px, @pad-left-right: 0px) { margin:0px auto; padding: @pad-up-dn @pad-left-right; } .row-header { .zero-margin(); padding:0px auto; } .row-content { .zero-margin (50px, 0px); border-bottom: 1px ridge; min-height:400px; } Scss @ mixin zero-margin ($pad-up-dn, $pad-left-right) { margin:0px auto; padding: $pad-up-dn $pad-left-right; } .row-header { @include zero-margin(0px, 0px); padding:0px auto; } .row-content { @include zero-margin (50px, 0px); border-bottom: 1px ridge; min-height:400px; }
  71. 71. ‫رياضية‬ ‫عمليات‬ Less @carousel-item-height: 300px; .carousel-item { height: @carousel-item-height; } .carousel-item .item-large{ height: @carousel-item-height *2; } Scss $carousel-item-height: 300px; .carousel-item { height: $carousel-item-height; } .carousel-item .item-large{ height: $carousel-item-height *2; }
  72. 72. ‫منصات‬‫املستخدم‬ ‫لقسم‬ 9
  73. 73. ‫بحاجتها؟‬ ‫نحن‬ ‫ملاذا‬ •‫الـ‬ ‫بنية‬ ‫مع‬ ‫التعامل‬ ‫إدارة‬ ‫يف‬ ‫التعقيد‬ ‫حجم‬DOM‫وتحديثات‬‫البيانات‬‫يدويًا‬ •‫جيد‬ ‫بشكل‬ ‫معرفة‬ ‫تطبيقات‬ ‫بنى‬ ‫إلى‬ ‫الحاجة‬: -Model View Controller / Model View View Model / Model View Whatever -‫النموذج‬ ‫ربط‬(Model)‫الواجهة‬ ‫مع‬(View:)controllers, view models
  74. 74. ‫البرمجية‬ ‫املكتبة‬(Library) ‫مجموعة‬‫من‬‫واجهة‬ ‫خالل‬ ‫من‬ ‫معين‬ ‫سلوك‬ ‫لتنفيذ‬ ‫اإلجرائيات‬ ‫املطلوب‬ ‫السلوك‬ ‫تنفيذ‬ ‫يتم‬ ‫خاللها‬ ‫من‬ ‫والتي‬ ‫برمجية‬. •‫السلوك‬ ‫استخدام‬ ‫إعادة‬ •‫منفصلة‬ ‫وحدات‬ ‫إلى‬ ‫التجزيء‬ •‫املثال‬ ‫سبيل‬ ‫ىلع‬:JQuery
  75. 75. ‫البرمجية‬ ‫العمل‬ ‫أطر‬(Frameworks) •‫عامة‬ ‫إجرائيات‬ ‫البرنامج‬ ‫يقدم‬ ‫خالله‬ ‫من‬ ‫والذي‬ ‫معين‬ ‫تجريد‬ ‫برمجية‬ ‫أسطر‬ ‫خالل‬ ‫من‬ ‫خاص‬ ‫بشكل‬ ‫تعديلها‬ ‫يمكن‬ ‫والتي‬ ‫املستخدم‬ ‫قبل‬ ‫من‬ ‫مكتوبة‬ ‫إضافية‬. •‫تؤمن‬ ‫والتي‬ ‫االستخدام‬ ‫إلعادة‬ ‫قابلة‬ ‫عاملية‬ ‫عمل‬ ‫بيئة‬ ‫كبيرة‬ ‫برمجية‬ ‫منصة‬ ‫من‬ ‫كجزء‬ ‫معينة‬ ‫إجرائيات‬. •‫املثال‬ ‫سبيل‬ ‫ىلع‬:Angular, Ember, Backbone
  76. 76. ‫البرمجية‬ ‫املنصة‬ •‫مبدأ‬Hollywood: -Don’t call us, we’ll call you! •‫التحكم‬ ‫آلية‬ ‫عكس‬ •‫التصريحية‬ ‫البرمجة‬ ‫أم‬ ‫باألوامر‬ ‫البرمجة‬(Imperative vs Declarative Programming)
  77. 77. ‫منصات‬JavaScript‫البرمجية‬ •‫الصفحة‬ ‫تطبيقات‬‫الواحدة‬ •Model-View-Controller (MVC) / Model-View-ViewModel (MVVM) / Model-View-Whatever -‫البيانات‬ ‫ربط‬(Data binding)‫التوجيه‬ ،(Routing) •‫بالـ‬ ‫برمجية‬ ‫أسطر‬JS،‫التوسع‬ ،‫االستخدام‬ ‫إلعادة‬ ‫قابلة‬ ‫التصحيح‬ •‫باالختبار‬ ‫املقادة‬ ‫البرمجة‬(Test driven development)
  78. 78. ‫منصات‬JavaScript‫البرمجية‬ • Angular • Ember • Backbone • React • Aurelia • Meteor • Polymer • Knockout • Vue • Mercury
  79. 79. ‫إلى‬ ‫مقدمة‬ 9
  80. 80. ‫تاريخ‬Angular •AngularJS -‫قبل‬ ‫من‬ ‫صممت‬Misko Hevery -‫يف‬ ‫أطلقت‬ ‫ما‬ ‫أول‬June 2012 -‫منصات‬ ‫أشهر‬ ‫من‬ ‫واحدة‬JS‫املستخدم‬ ‫جزء‬ ‫ىلع‬ ‫للعمل‬ •Angular -‫كامل‬ ‫بشكل‬ ‫املنصة‬ ‫كتابة‬ ‫إعادة‬ ‫تم‬ -‫املكونات‬ ‫ىلع‬ ‫تعتمد‬(Component) -‫اللوحية‬ ‫األجهزة‬ ‫تدعم‬ -‫الخادم‬ ‫جزء‬ ‫ىلع‬ ‫الحالة‬ ‫تحديث‬(Server-side rendering) -‫قوالب‬(template)‫عالية‬ ‫كفاءة‬ ‫ذات‬
  81. 81. ‫هي‬ ‫ما‬Angular‫؟‬ •‫فعالة‬ ‫ويب‬ ‫تطبيقات‬ ‫بناء‬ ‫يف‬ ‫مساعدة‬ ‫بنية‬ ‫لها‬ ‫منصة‬(dynamic:) -HTML‫متغيرة‬ ‫الغير‬ ‫املستندات‬ ‫تعالج‬ ‫فقط‬ -Angular‫الفعالة‬ ‫التطبيقات‬ ‫وتدعم‬ ‫الثغرة‬ ‫هذه‬ ‫تعالج‬ -‫تعالج‬‫التخزين‬ ‫بنية‬ ‫بين‬ ‫التوافق‬ ‫عدم‬ ‫مشكلة‬‫العالقاتي‬‫ة‬ ‫العمل‬ ‫وبنية‬‫الغرضية‬(Impedance mismatch) -‫صممت‬‫مع‬‫التطبيقات‬ ‫مراعاة‬‫بالبيانات‬ ‫املقادة‬(CRUD Applications) -‫منهج‬‫تصريحي‬(Declarative approach)
  82. 82. ‫مفردات‬Angular • One-way/Two-way Data • Binding • Components • Directives • Templates • Routing • Modules • Service • Provider • Testing
  83. 83. Angular •‫هي‬ ‫هل‬Angular 2‫فقط‬ ‫أم‬Angular‫؟‬ •‫لإلصدارات‬ ‫داللي‬ ‫تعيين‬(Semantic Versioning) -<Major Version>.<Minor Version>.<Patch>
  84. 84. ‫عملي‬ ‫تطبيق‬! ‫امللف‬ ‫ضمن‬ ‫التعليمات‬ ‫طبق‬
  85. 85. ‫بنية‬ 10
  86. 86. ‫بنية‬Angular •‫البرمجية‬ ‫الوحدة‬(Modular) •‫واالعتمادية‬ ‫القوالب‬‫ىلع‬‫املكونات‬ (Component-based with Templates) •‫الخدمات‬(Services)
  87. 87. ‫البرمجية‬ ‫الوحدة‬ ‫بنية‬(Modular)
  88. 88. ‫البرمجية‬ ‫الوحدة‬(Modular)
  89. 89. ‫عملي‬ ‫تطبيق‬! ‫امللف‬ ‫ضمن‬ ‫التعليمات‬ ‫طبق‬
  90. 90. ‫املكون‬(Component)
  91. 91. ‫املكون‬ ‫هرمية‬(Component)
  92. 92. ‫عملي‬ ‫تطبيق‬! ‫امللف‬ ‫ضمن‬ ‫التعليمات‬ ‫طبق‬
  93. 93. ‫املوجهات‬Directives •‫قوالب‬Angular‫فعالية‬ ‫ذات‬(dynamic.) •‫املوجهات‬(Directives)‫لـ‬ ‫أوامر‬ ‫تعطي‬Angular‫إرسال‬ ‫بكيفية‬ ‫إلى‬ ‫القوالب‬ ‫حالة‬ ‫تحديث‬DOM. •‫يف‬ ‫تعريفها‬ ‫يمكن‬ ‫املوجهات‬Angular‫الترميز‬ ‫خالل‬ ‫من‬ ‫كصف‬: @Directive •‫املكون‬(Component)‫املوجهات‬ ‫من‬ ‫خاص‬ ‫نوع‬ ‫هو‬(Directives) ‫مرتبط‬‫بقالب‬(Template.) •‫يف‬ ‫املوجهات‬ ‫من‬ ‫آخران‬ ‫نوعان‬Angular‫هما‬: ‫البنيوي‬(Structural)‫والوصفي‬(Attribute)
  94. 94. ‫البنيوية‬ ‫املوجهات‬Structural Directives •‫حذف‬ ‫أو‬ ‫تعديل‬ ،‫إضافة‬ ‫طريق‬ ‫عن‬ ‫العرض‬ ‫بنية‬ ‫تعديل‬ ‫لك‬ ‫تتيح‬ ‫الـ‬ ‫من‬ ‫عناصر‬DOM •‫الـ‬ ‫بنية‬ ‫يف‬ ‫وأحفاده‬ ‫مضيف‬ ‫عنصر‬ ‫ىلع‬ ‫بنيوي‬ ‫موجه‬ ‫تطبيق‬DOM
  95. 95. ‫بنيوية‬ ‫موجهات‬‫مشهورة‬ • NgIf <div *ngIf=“selectedDish”> . . . </div> • NgFor <md-list-item *ngFor="let dish of dishes"> • NgSwitch
  96. 96. ‫عملي‬ ‫تطبيق‬! ‫امللف‬ ‫ضمن‬ ‫التعليمات‬ ‫طبق‬
  97. 97. ‫القادمة‬ ‫للجلسة‬ ‫الواجب‬
  98. 98. ‫شكرًا‬!

×