البحث في الموقع

تعد تطبيقات ويب التقدمية الجيل القادم لتقنيات الويب القائمة على الـ JavaScript. وفي الأساس، هي تطبيقات ويب قائمة على تقنيات الويب المعيارية، ولكن مع إضافة أحدث ميزات الـ JavaScript جاعلةً إيّاها تشعر وتعمل مثل تطبيقات آندرويد والـ iOS. شركات مثل مجلة فوربيس ، و تويتر، و جوميا (شركة التجارة الإلكترونية الإفريقية الرائدة)، تأخذ زمام المبادرة مع تطوير تطبيقات الويب التقدمية. ويغيّر دمج الهواتف المحمولة والويب مسار العمل في هذا المجال، ويمكنه قيادة نتائج العمل المذهلة - جاعلًا من هذا أمرًا لا يفوّت لتجار التجزئة. سنغطي ما يلي: تطبيقات الويب التقدمية مقابل المواقع الإلكترونية مزايا تطبيقات الويب التقدمية التي لا تحتاج إلى إنترنت ما تتميز به تطبيقات الويب التقدمية عن المواقع الإلكترونية أخطاء شائعة في تطوير تطبيقات الويب التقدمية تطبيقات الويب التقدمية مقابل المواقع الإلكترونية العادية هل تعدّ تطبيقات الويب التقدميّة تطبيقات أم مواقع إلكترونية؟ حسنًا، إنها من الإثنين نوعًا ما. يعد بناء تطبيق ويب تقدمية مماثلًا لبناء تطبيق ويب من منظور المصمم، بينما يمكن أن يكون تطبيقًا عاديًا من منظور المستخدم. تعد طريقة توزيع تطبيقات الويب التقدمية، أحد أهم أوجه الاختلاف. ولأنها تعد تقنيًا تطبيقات ويب، لا يوجد ضرورة للذهاب إلى متجر التطبيقات، حيث يقوم المستخدمون بالنقر على إضافتها إلى الشاشة الرئيسية في متصفح الإنترنت خاصتهم. هل تلاحظ زر "أضف إلى الشاشة الرئيسية" (Add to home screen” button)؟ هذا يشير إلى أنك تنظر إلى تطبيق ويب تقدمية بشكل مؤكّد. وأحد فوائد هذه التطبيقات مقابل تطبيقات الهاتف المحمول العادية، هو أنّها تستهلك بيانات أقل بكثير. وبينما تبقى التطبيقات العادية في هاتف المستخدم، يتم الوصول إلى تطبيقات الويب التقدمية عند زيارة الموقع الإلكتروني - وقت استخدام البيانات. بناء فريق تطبيقات ويب تقدمية جاهز قبل أن تبدأ بتطوير تطبيق الويب التقدمية خاصتك، قم بتعليم فريقك عن ماهية هذه التطبيقات أولًا: مشروعًا هجينًا يلائم توقعات المستخدم مع متطلبات خلفية تقنية. يجب أن يبدأ المشروع بهذين السؤالين: كم عدد تطبيقات الويب التقدمية التي أحتاجها؟ دعنا نستخدم فيسبوك كمثال؛ فهو يعد منتَجًا واحدًا ولكنه يملك 60 تطبيقًا ليست من تطبيقات الويب التقدمية: واحد لكل مهمة رئيسية أو مجموعة مستخدم. هل تحتاج لعدد تطبيقات مثل فيسبوك؟ تستطيع أنت فقط الإجابة عن هذا السؤال. قد تجد من المنطقي في بعض الأحيان، أن تقسم موقعك الإلكتروني إلى نطاقات فرعية مع تطبيق ويب تقدمي لكل نطاق، مثل مجلات المنتج، والتجارة الإلكترونية، ورعاية العملاء وغيرها. في حين أنه يمكن لتطبيق ويب تقدمي مركزي واحد أن يجدي نفعًا في العديد من الأعمال. يجب أن تفكر جيدًا فيما يتوقعه زبائنك منك، وأعطِ الفرصة لهذه التوقعات أن تخبرك بكيفية سير عملك. هل أحتاج إلى تدفق مخصص لتجربة المستخدم أم نسخة من موقعي الإلكتروني تكفي؟ يجب أن يكمل تطبيق الويب التقدمي خاصتك موقع الإلكتروني وأن يكون مناسبًا له، بحيث لا يختلف التصميم وتجربة المستخدم بشكل كبير عن إصدار الحواسيب المكتبية. ولكن هناك بعض المزايا المفيدة لتطبيقات الويب التقدمية، مثل إمكانية استخدامها بدون إنترنت وإرسال الإشعارات، وبالتالي تستطيع الاستفادة منها عند البدء في التصميم. مزايا تطبيقات الويب التقدمية التي لا تتطلب اتصال في الإنترنت يمكنك تشغيل تطبيق الويب التقدمي خاصتك دون الاتصال بالإنترنت، ولكن هذا يعني أنك بحاجة إلى توخي الحذر عند تطبيق التجارة الإلكترونية أو المواقع الإلكترونية الخاصة بالمعاملات، بل وأكثر من ذلك مع العناصر الديناميكية مثل توفر المنتج أو الترويج. كل مشكلة لها حل، بالطبع. لنلقي نظرة على إحدى مشاكل التجارة الإلكترونية الشائعة: عندما يكون المستخدم غير متصلٍ بالإنترنت، لا يمكن للنظام تحديث أشياء مثل التوفر؛ فقد يقوم المستخدم، بعد مرور بعض الوقت دون اتصال بالإنترنت، بمحاولة طلب مواد غير موجودة في المخزون. يجب أن يكمل تطبيق الويب التقدمي خاصتك موقعك الإلكتروني وأن يكون ملائمًا له الحل الآن هو: السماح للمستخدمين بتصفح تطبيق التجارة الإلكترونية الخاص بك خلال الـ 30 دقيقة الأولى دون اتصال بالإنترنت وإعلامهم بإمكانية عدم توفر منتج ما. لا يزال بإمكانك مزامنة الطلبات في ما بعد، وفي أسوأ الحالات، اطلب منهم تعديل طلباتهم. استخدم نسخة هنا من شأنها أن تمنع شعور المستخدمين بخيبة الأمل عندما يتم بيع تلك القبعة الأرجوانية التي كانوا يتطلعون لشرائها. هناك أيضًا بعض الحلول الأكثر تعقيدًا والتي تعتمد على الذكاء الاصطناعي لتقدير عدد مرات شراء أحد المنتجات وما إذا كان لا يزال متوفرًا. يعد التحدي الأكبر للتجارة الإلكترونية هو ما يحدث على شاشة الدفع. تتجاوز معدلات التخلي عن عربات التسوق 85٪. ومع ذلك، فقد تم حل هذه المشكلة جزئيًا، عندما قدّمت جوجل واجهة برمجة تطبيقات طلب الدفع — مما أدى إلى إلغاء نماذج الخروج والسماح للتجار بطلب وقبول الدفع من خلال مكالمة واحدة في واجهة برمجة التطبيقات، وتبسيط عملية الخروج وخفض معدلات التخلي هذه. مميزات تطبيقات الويب التقدمية مقابل المواقع الإلكترونية عندما يتم تشغيل تطبيق الويب التقدمي في وضع ملء الشاشة، لن يكون هناك وظائف متصفح تساعد المستخدم. يبدو هذا جيدًا ولكن أيضا يشكل مخاطر على تجربة المستخدم. لا يوجد ويب أمان بدون متصفح: لا يوجد شريط عناوين، أو مؤشرات تقدم، أو أيقونة SSL أو أزرار التنقل. إنّ إضافة زر الرجوع أو تصميم شريط التنقل الخاص بك هو الحل هنا: يجعل نسخ إشارات التنقل المألوفة للمتصفح تطبيق الويب التقدمي أسهل لفهم المستخدم واستخدامه. قوائم وإيماءات يجب أن تكون على علم بها يتوقع المستخدمون أن يتصرف تطبيق الويب التقدمي خاصتك كتطبيق تقليدي؛ على سبيل المثال، عندما يعودون إلى صفحة سابقة، يجب أن يبقى مكان المحتوى أو القوائم الخاصة بك كما هو. عندما يتم تشغيل تطبيق الويب التقدمي في وضع ملء الشاشة، لن يكون هناك وظائف متصفح تساعد المستخدم. يبدو هذا جيدًا ولكن أيضا يشكل مخاطر على تجربة المستخدم." ملاحظة حول الأماكن التي تختلف فيها تطبيقات الويب التقدمية عن التطبيقات: انتبه لتفاعلات الاتصال العالية - تلك التي تتجاوز الأبعاد الثنائية، مع التعرف على عدد الأصابع المستخدمة أو كيف. من الصعب كتابة الكود بشكل جيد، والتنفيذ السيئ يمكن أن يفسد تجربة المستخدم. لا يجب أن تكون الإيماءات هي الطريقة الوحيدة للتنقل في تطبيقك. إذا كنت بحاجة إلى سبب آخر لتضمين شريط تنقل مخصص، فاعتبر أنّ هذا سبب آخر. أخطاء شائعة في تطوير تطبيقات الويب التقدمية إذا كان لديك ميزات تعمل باللمس، فيجب أن تعمل بنفس الطريقة التي تعمل بها في التطبيقات العادية. مثلًا، تقدم المناطق القابلة للنقر ملاحظات عن طريق اللمس، دون ترك المستخدم يتساءل عما إذا كان قد تم التعرف على النقرة. عندما يتعلق الأمر بالتمرير، اعتبر نفسك سمكة في فلم Finding Nemo. فقط استمر واستمر في التمرير، سواء تم لمس عنصر أم لا. وأفضل ما قيل في هذا من قِبَل المطورTuro Engineering ، Esaú Suárez Ramos: كل مطور قام بالتعامل مع العناصر العائمة القابلة للتمرير في نظام iOS سيوافق على الحقيقة التالية: هناك علاقة مباشرة بين التمرير في iOS والصداع. تتعمق جوجل في هذا في دليل تطوير تطبيقات الويب التقدمية لنظام آندرويد. لا يجب أن تتفاعل العناصر عند التمرير؛ يعد هذا خطأً شائعًا في المواقع الإلكترونية للهواتف المحمولة وواحد من أكثرها إزعاجًا. استخدام مزايا تطبيقات الويب التقدمية لصالحك كل مطور قام بالتعامل مع العناصر العائمة القابلة للتمرير في نظام iOS سيوافق على الحقيقة التالية: هناك علاقة مباشرة بين التمرير في iOS والصداع. ESAÚ SUÁREZ RAMOS وعندما يتعلق الأمر بالتسويق، تمتلك تطبيقات الويب التقدمية مجموعة مختلفة قليلاً من الميزات التي يمكنك الاستفادة منها. قابلية الربط على عكس التطبيقات العادية، يمكن أن يكون لأي صفحة أو شاشة على تطبيق الويب التقدمي رابط مباشر قابل للمشاركة. قابلية البحث يمكن العثور بسهولة على المحتوى في تطبيقات الويب التقدمية بواسطة محركات البحث ويمكن تعديله وفقًا لفهرس جوجل للهواتف المحمولة الأول، مما يوفر فرصة لطيفة للتطبيقات الأصلية التي تركز على المحتوى. إرسال الإشعارات تتيح الإشعارات حصول المستخدمين على تحديثات موقوتة من المواقع التي يحبونها، مما يسمح لك بإعادة إشراك المستخدمين بفعالية مع المحتوى المخصص. التحميل: المفهوم الأولي تعرض التطبيقات غالبًا محتوىً أفضل من المواقع الإلكترونية المعتادة، باستخدام الهياكل العظمية للكشف عن المواضع قبل أن يتم تحميلها بالكامل. وباستخدام تطبيق الويب التقدمي خاصتك، يمكنك أيضًا استخدام محتوىً بديل أثناء التنزيل، بما في ذلك الصور ذات الدقة المنخفضة بدلًا من الإصدارات كاملة الحجم. تحقق من هذه الأسطر عندما تقترب النصوص من الصور. هذا ما نسميه النص الأولي. أخطاء شائعة لتتجنبها قوائم المنتجات عندما يكون نظامك غير متصل بالإنترنت، يمكن أن يُظهر بيانات لم تعد متوفرة. تأكد من أن هذا الاحتمال واضح للمستخدمين. خطوط وتصاميم مخصصة من الجيد استخدام خطوط الجهاز المعيارية لجعل تصميم تطبيق الويب التقدمي مألوفًا أكثر. إذا كنت حقًا بحاجة إلى ذلك، فحاول استخدام الصور أو الصور متغيرة الحجم بدلاً من الخطوط المخصصة. تصميم لمستخدم واحد فقط منذ أن أصبحت جوجل رائدة في مجال التطبيقات الشبكية التقدمية، أصبح تصميم المواد هو الخيار البديهي لبعض مصممي تطبيقات الويب التقدمية، ولكنها أصبحت أكثر وأكثر شعبية على الأنظمة الأخرى أيضًا. تأكد عند التصميم من إلقاء نظرة على عملك من منظور مختلف المستخدمين. يجب أن يشمل التصميم عناصر من أنظمة مختلفة، بحيث يمكن لجميع المستخدمين التنقل بشكل مريح. تحد جيد توفر تطبيقات الويب التقدمية فرصًا جديدة لتجار التجزئة وتحديات جديدة للمصممين. تصمم التطبيقات العادية خصيصًا لاستيعاب أنظمة مختلفة (iOS و Android و Windows)، على عكس تطبيقات الويب التقدمية القائمة على الويب. ولكن إذا وضعت نصائح التصميم والتفاصيل هذه في الحسبان، فهناك عالمٌ من الفرص لكل من براعة التصميم ونجاح الأعمال. إذا رغبت بالبدء في تصميم تطبيق ويب تقدمي، ننصح بالبدء مع المصادر الخارجية أدناه. تصميم تطبيق ويب تقدمي للمستقبل تصميم تطبيق ويب تقدمي مستجيب طرق للتأكد من الحصول على تجربة مستخدم عظيمة لـ 5 تطبيقات ويب تقدمية تقديم طلب دفع واجهة برمجة التطبيقات عمل تصاميم إبداعية لتطبيقات الويب التقدمية يمكنك أيضًا النظر في مصدر واجهة متجر التجارة الإلكترونية المفتوح خاصتنا لتطبيقات الويب التقدمية. ترجمةـ وبتصرف ـ للمقال What’s a progressive web app, and why should designers care?‎ لصاحبيه STANISŁAW ŚWIĄTKIEWICZ و TOM KARWATKA

يعدُّ Yeoman (وتلفظ «يومِن» ومعناها في اللغة الأجنبية الخادم الجليل الذي يخدم النبلاء أو الشخص الذي يقدم خدمات جليلة ذات شأن) نظامًا عامًّا للسقالات يسمح بإنشاء أي نوع من التطبيقات، فهو يتيح البدء السريع في مشاريع جديدة ويبسّط صيانة المشاريع القائمة. السقالة باللغة العربية هي هيكل مؤقت يُستخدَم في حمل الأشخاص والمواد بغرض البناء؛ أمَّا في البرمجة، فينطبق التعريف تمامًا عليها أي هي منصةٌ مؤقتةٌ تُستعمَل في بناء هياكل التطبيقات للانطلاق بعملية الإنشاء بسرعة وذلك بتوليد الملفات البدائية الأساسية للمشروع أو التطبيق (الهيكل العام) الذي تود إنشاءه وفق مواصفات ومعايير تحدِّدها مما يوفر عليك الكثير من الوقت. ويمكن القول أنَّ Yeoman محايدٌ مع لغات البرمجة أي يسمح بإنشاء مشاريع بأي لغة تريد (لغات الويب أو لغة جافا أو بايثون أو سي شارب أو غيرها). لا يتخذ Yeoman في حد ذاته أي قرارات. تُتخَذ كل القرارات من قبل المولّدات التي هي في الأساس ملحقات في بيئة Yeoman. هناك الكثير من المولدات المتاحة كما أنّه من السهل إنشاء مولّد جديد يناسب أي سير عمل تريد. Yeoman هو دائمًا خيارك الصحيح لاحتياجات بناء التطبيقات وتوليد ملفات المشروع الابتدائية. فيما يلي بعض حالات الاستخدام الشائعة له: إنشاء مشروع جديد بسرعة إنشاء أقسام جديدة من المشروع، مثل وحدة تحكم جديدة مع اختبارات الوحدة إنشاء وحدات (modules) أو حزم (packages) التمهيد لخدمات جديدة فرض المعايير والممارسات الجيّدة والدلائل النمطية الترويج لمشاريع جديدة من خلال السماح للمستخدمين بالبدء مع تطبيق أو مشروع نموذجي وغيرها من حالات الاستخدام جدول المحتويات حرصًا على تنظيم المقالة ولتسهيل الوصول إلى القسم الذي تريده بسهولة، سنذكر هنا جدول المحتويات باختصار: الجزء الأول: البدء مع Yeoman تثبيت yo وبعض المولدات تنصيب السقالة واستخدامها عمليًا أوامر yo الأخرى استكشاف الأخطاء وإصلاحها الجزء الثاني: تنصيب سقالة Yeoman لبناء تطبيق ويب بناء تطبيق نموذجي باستخدام Yeoman ماذا لدينا في هذه الورشة؟ الخطوة 1: إعداد بيئة التطوير الخاصة بك الخطوة 2: تثبيت مولّد Yeoman الخطوة 3: استخدام مولّد لتنصيب سقالة حول التطبيق وبناء هيكله الخطوة 4: مراجعة بنية التطبيق الذي أنشأته بواسطة Yeoman الخطوة 5: معاينة تطبيقك في المتصفح الخطوة 6: اختبار التطبيق بواسطة Karma و Jasmine الخطوة 7: الاستفادة من التخزين المحلي لحفظ المهام (todos) الخطوة 8: الاستعداد لمرحلة الإنتاج ختام الورشة، تهانينا! المصادر الجزء الأول: البدء مع Yeoman يُعدُّ yo أداة سطر الأوامر في Yeoman التي تسمح بإنشاء مشاريع باستخدام قوالب السقالات (scaffolding templates، يشار إليها باسم «المولدات» [generators]). يُثبَّت yo والمولدات المستخدمة باستعمال مدير حزم نود (npm). تثبيت yo وبعض المولدات تأكد بدايةً من تثبيت Node.js ومدير حزمه npm على حاسوبك. نفِّذ الأمر التالي للتأكد من وجود Node.js و npm لديك: $ nodejs -v v8.10.0 $ npm -v 3.5.2 ننصحك بالرجوع إلى مقال تثبيت Node.js على نظام أبونتو لمزيد من المعلومات حول عملية التثبيت على نظام لينكس. أمَّا على نظام ويندوز، نقترح استخدام أداة سطر أوامر أفضل مثل cmder أو PowerShell لتجربة أفضل. يمكنك دومًا الرجوع إلى موقع Node.js الرسمي واختيار نوع نظام التشغيل لتثبيت Node.js و npm عليه. ثبِّت بعد ذلك yo باستخدام npm عبر الأمر التالي: npm install -g yo بعد ذلك، تُثبَّت المولد(ات) اللازم(ة)، والتي تكون عبارة عن حزم npm تسمى بالشكل generator-XYZ، إذ XYZ هو اسم المولِّد. ابحث عنها على في هذه الصفحة أو عن طريق تحديد خيار قائمة "تثبيت مولد" (install a generator) أثناء في سطر الأوامر yo. إن أردت تثبيت المولد webapp مثلًا، نفِّذ الأمر التالي: npm install -g generator-webapp قد يواجه مستخدمو Node و npm الجدد مشكلات متعلقة بالأذونات. تظهر هذه المشكلات في شكل أخطاء EACCESS أثناء التثبيت. ارجع إلى دليل npm لإصلاح الأذونات إذا حدث لك هذا. تنصيب السقالة واستخدامها عمليًا سنستخدم المولِّد generator-webapp الذي ثبَّتناه للتو في أمثلتنا أدناه. استبدل بالاسم webapp (الذي هو XYZ) اسم المولد الخاص بك للحصول على نفس النتيجة. من أجل تنصيب السقالة في مشروعك الجديد، نفِّذ الأمر التالي: yo webapp ستطرح أغلب المولّدات مجموعة من الأسئلة من أجل تخصيص المشروع الجديد؛ هل تذكر المواصفات والمعايير التي أخبرتك آنفًا بها لتخصيص بها مشروعك؟ ها هي عمليًا. لمعرفة الخيارات المتاحة، استخدم أمر المساعدة : yo webapp --help تعتمد الكثير من المولدات على أنظمة البناء (تعرف بأنها «أدوات بناء» أيضًا) مثل Gulp أو Grunt، ومديري الحزم مثل npm و Bower. تأكد من زيارة موقع المولّد لتتعلّم كيفية تشغيل التطبيق الجديد وصيانته. يمكنك الوصول بسهولة إلى الصفحة الرئيسية للمولّد بتنفيذ الأمر التالي: npm home generator-webapp من المرجّح أن توفر إطارات العمل المعقدة للسقالات مولدات إضافية لبناء الأجزاء الصغيرة من المشروع. يشار إلى هذه المولدات عادةً بالمولدات الفرعية (sub-generators)، ويمكن الوصول إليها كما يلي: generator:sub-generator. لنأخذ المولِّد generator-angular مثالًا. يمكن بمجرد إنشاء تطبيق angular بالكامل إضافة ميزات أخرى. لإضافة وحدة تحكم جديدة إلى المشروع، شغِّل المولد الفرعي لوحدة التحكم: yo angular:controller MyNewController أي أن عمل السقالة لا تقتصر على بناء التطبيق توليد ملفاته الأولية، بل إضافة مزايا وعناصر إليه. أوامر yo الأخرى بخلاف الأساسيات التي غطّيناها في القسم السابق، يعد yo أيضًا أداة تفاعلية بالكامل. ستوفر كتابة yo ببساطة في الطّرفية قائمة من الخيارات لإدارة كل ما يتعلق بالمولدات: التشغيل والتحديث والتثبيت والمساعدة وغيرها من الأدوات. تُوفّرyo أيضا الأوامر التالية: yo --help: تمكنك من الوصول إلى شاشة المساعدة الكاملة yo --generators: تعطي قائمة بكل المولدات المثبتة yo --version: للحصول على الإصدار استكشاف الأخطاء وإصلاحها يمكن إيجاد معظم المشكلات بتنفيذ الأمر: yo doctor سيشخِّص الأمر doctor خطوات لحلّ المشكلات الأكثر شيوعًا. الجزء الثاني: تنصيب سقالة Yeoman لبناء تطبيق ويب أصبحت الآن جاهزًا لبناء تطبيق ويب كامل الوظائف من البداية بالاستعانة بمنصة Yeoman و FountainJS. سيُكتَب نموذج التطبيق في React أو Angular1 أو Angular2. ليس لديك أي فكرة عن React أو Angular؟ لا بأس، سوف نرشدك. ومع ذلك، فإننا نفترض أن لديك تجربة سابقة مع لغة جافاسكريبت. بناء تطبيق نموذجي باستخدام Yeoman سيكون نموذج تطبيق الويب الذي ستنشئه تنفيذًا لمشروع إطار عمل يسمى TodoMVC. ستتمكن من إضافة عناصر مهام لإنجازها (todos) أوحذفها، أو ترشيحها، وسنضيف معًا ميزة لحفظها في وضع عدم الاتصال. ماذا لدينا في هذه الورشة؟ سنبني تطبيق TodoMVC أعلاه من الصفر. كل خطوة سوف تُبنَى على التي تسبقها، لذلك سننتقل من خلال كل خطوة تلو الأخرى: الخطوة 1: إعداد بيئة التطوير الخاصة بك الخطوة 2: تثبيت مولّد Yeoman الخطوة 3: استخدام مولّد لتنصيب سقالة حول التطبيق وبناء هيكله الخطوة 4: مراجعة بنية التطبيق الذي أنشأته بواسطة Yeoman الخطوة 5: معاينة تطبيقك في المتصفح الخطوة 6: اختبار التطبيق بواسطة Karma و Jasmine الخطوة 7: الاستفادة من التخزين المحلي لحفظ المهام (todos) الخطوة 8: الاستعداد لمرحلة الإنتاج سوف تستغرق هذه الخطوات حوالي 25 دقيقة لإتمامها. في الختام، سيكون لديك تطبيق TodoMVC أنيق وسوف يكون جهاز حاسوبك معدًّا لإنشاء المزيد من تطبيقات الويب الرائعة في المستقبل. جاهز؟ لنبدأ مع الخطوة الأولى! الخطوة 1: إعداد بيئة التطوير الخاصة بك ستكون معظم تفاعلاتك مع Yeoman عبر سطر الأوامر. نفّذ الأوامر في الطّرفية إذا كنت تستخدم نظام التشغيل Mac أو في الصدفة shell في نظام لينكس أو في واجهة cmder (وهي المفضلة) أو PowerShell أو cmd.exe إذا كنت تستخدم نظام التشغيل ويندوز. تثبيت المتطلبات الأساسية قبل تثبيت Fountain Webapp Generator، ستحتاج إلى ما يلي: الإصدار السادس من Node.js أو ما بعده. الإصدار الثالث من npm أو ما بعده (والذي يأتي مرفقًا مع Node) نظام التحكم بالإصدارات Git يمكنك أن تتحقق مما إذا كان لديك Node و npm مثبتين بكتابة ما يلي: node --version && npm --version إذا كنت بحاجة إلى ترقية Node أو تثبيته، فإن أسهل طريقة هي استخدام المثبت في نظامك الأساسي. نزِّل حزمة "msi." بالنسبة لنظام ويندوز أو "pkg." لنظام التشغيل Mac من موقع NodeJS ثم ثبِّتها. وإذا كنت تستخدم نظام لينكس، يمكنك تنزيل أحدث إصدار من صفحة التنزيل في الموقع الرسمي. يكون مدير الحزم npm مدمجًا مع Node، رغم أنّك قد تحتاج إلى تحديثه. وتأتي بعض إصدارات Node مع الإصدارات القديمة بدلاً من npm. يمكنك تحديث npm باستخدام هذا الأمر: npm install --global npm@latest يمكنك التحقق من تثبيت Git من خلال كتابة ما يلي: git --version إذا لم يكن لديك Git، حمّل أداة التثبيت من الموقع الرسمي. إن كان نظام التشغيل لديك هو أحد توزيعات ديبيان من لينكس، فنفِّذ الأمر التالي لتثبيت Git: sudo apt install git تثبيت أدوات Yeoman بمجرد تثبيت Node، ثَبِّت أيضًا مجموعة أدوات Yeoman عبر تنفيذ الأمر التالي: npm install --global yo هل هناك أخطاء؟ إذا واجهت أي أخطاء في الأذونات أو الوصول، مثل خطأ EPERM أو EACCESS، فلا تستخدم sudo كحلّ بديل. تستطيع الاستفادة من هذا الدليل. ويمكنك أيضًا الإطلاع على هذا المقال لمعلومات أوسع حول عملية التثبيت. التحقق من نجاح عملية التثبيت من المستحسن التحقق من تثبيت كل شيء كما هو متوقع عبر تنفيذ أوامر Yeoman شائعة الاستخدام مثل yo مع الراية version-- كالتالي: yo --version إصدارات أدوات CLI التي تعمل معها هذه الورشة البرمجية تتغير التكنولوجيا بسرعة! لقد نُفِّذت هذه الورشة التعليمية باستخدام الإصدار 1.8.4 من سطر الأوامر yo. إذا كنت تواجه مشكلات في إصدار أحدث، فسيسعدنا أن نعرف عنها. يمكنك فتح تذكرة في GitHub للإبلاغ بأي مشكلة. الخطوة 1: تثبيت مولد Yeoman ستحتاج في سير عمل تطوير الويب التقليدي إلى قضاء الكثير من الوقت في إعداد الشيفرة المتداولة (boilerplate code) الخاص بتطبيق الويب الذي تعمل عليه، وتنزيل التبعيات، وإنشاء بنية مجلد الويب الخاصة بك يدويًا. ولكن مولّدات Yeoman ستسهّل عليك المهمّة كثيرًا! لنثبِّت مولّدًا لمشاريع FountainJS. تثبيت المولّد يمكنك تثبيت مولدات Yeoman باستخدام الأمر npm وهناك أكثر من 3500 مولد متاح الآن، وكثير منها كتبه أفراد مجتمع المصادر المفتوحة. ثبِّت المُولِّد generator-fountain-webapp باستخدام هذا الأمر: npm install --global generator-fountain-webapp سيبدأ هذا بتثبيت حزم Node المطلوبة للمولد. تذكير: إذا واجهت أي أخطاء في الأذونات أو الوصول، مثل خطأ EPERM أو EACCESS، فلا تستخدم sudo كحلّ بديل. تستطيع الاستفادة من هذا الدليل. في الوقت الذي تستخدم فيه npm install مباشرة، يمكنك البحث عن المولدات عبر قائمة Yeoman التفاعلية. نفِّذ الأمر yo وحدِّد Install a generator للبحث عن المولدات المنشورة. الخطوة 3: استخدام مولّد لتنصيب سقالة حول التطبيق وبناء هيكله لقد استخدمنا كلمة «سقالة» مرات عديدة وشرحنا معناها في بداية هذا الدليل لكن قد ما تزال غريبة بعض الشيء. تعني السقالة، بالمفهوم المستخدم في Yeoman للكلمة (وفي عالم البرمجة عمومًا)، إنشاء ملفات لتطبيق الويب الخاص بك وفق معايير ومواصفات تضبطها أنت. سترى في هذه الخطوة كيف يمكن لـ Yeoman إنشاء ملفات خاصة بمكتبتك أو إطارك المفضل، مع خيارات لاستخدام مكتبات خارجية أخرى مثل Webpack و Babel و SASS وربطها بمشروعك، بأقل جهد ممكن. إنشاء مجلد المشروع أنشئ مجلدًا باسم mytodo ليحوي جميع ملفات المشروع الذي سنعمل على بنائه: mkdir mytodo && cd mytodo هذا المجلد هو المكان الذي سيولِّد المولد فيه ملفات مشروعك الابتدائية (أي هيكل المشروع). الوصول للمولدات عبر قائمة Yeoman نفِّذ الأمر yo لرؤية المولدات الخاصة بك: yo إذا كان لديك عدد قليل من المولدات المثبتة، فستتمكن من الاختيار بشكل تفاعلي منها. اختر المُولِّد Fountain Webapp لتشغيله. استخدام المولدات مباشرة عندما تستأنس أكثر بسطر الأوامر yo، ستفضّل تشغيل المولِّد مباشرةً دون استخدام القائمة التفاعلية (وضغط المزيد من الأزرار) على النحو التالي: yo fountain-webapp إعداد المولد الخاص بك توفر بعض المولدات إعدادات اختيارية لتخصيص تطبيقك مع مكتبات مطوّري البرامج المشتركة لتسريع الإعداد الأولي لبيئة التطوير الخاصة بك. يوفر المولد FountainJS بعض الخيارات لكي تستخدم ما تفضله: إطار العمل (React أو Angular2 أو Angular1) وحدة الإدارة (Webpack أو [SystemJS] أو لا شيء إذا كنت تستعمل Bower) معالج أولي لشيفرة جافاسكربت (Babel أو TypeScript أو لا شيء) معالج أولي لشيفرة CSS ‏(SASS أو LESS أو لا شيء) ثلاثة نماذج للتطبيق (صفحة هبوط وصفحة "مرحبا بالعالم" [hello world] ونموذج TodoMVC) سوف نستخدم لهذه الورشة الخيارات التالية: React Webpack Babel SASS نموذج Redux TodoMVC حدّد هذه الخيارات على التوالي باستخدام مفاتيح الأسهم ثم زر "إدخال" واستمتع بما يحدث على الشاشة. سيبني Yeoman تلقائيًا هيكل تطبيقك ويولد لك جميع الملفات الابتدائية الأساسية له، وسيجلب كل الاعتماديات (dependencies) الخاصة به. بعد بضع دقائق، سنكون مستعدين للانتقال إلى الخطوة التالية. الخطوة 4: مراجعة التطبيق الذي بناه Yeoman افتح المجلّد mytodo الخاص بك لإلقاء نظرة على ما جرى بناؤه إلى الآن. يجب أن يبدو مثلما توضحه الصورة التالية: لدينا في مجلد المشروع المجلدات الفرعية التالية: src: مجلّد رئيسي لتطبيق الويب app: شيفرة React و Redux index.html: ملف html الرئيسي index.js: نقطة الدخول لتطبيق TodoMVC conf : مجلّد رئيسي لملفات الضبط الخاصة بالأدوات الخارجية (Browsersync و Webpack و Gulp و Karma) gulp_tasks و gulpfile.js: مهام أداة البناء Gulp babelrc. و package.json و node_modules: الضبط والاعتماديات المطلوبة gitattributes. و gitignore.: ملفات ضبط Git أنشِئ الإيداع (commit) الأول في المستودع الآن وبعد التوليد والتثبيت، يجب أن يكون لديك مستودع git جديد مهيأ بالفعل. يمكنك الإيداع فيه بأمان لحفظ الحالة الراهنة من خلال هذه الأوامر: git add --all && git commit -m 'First commit' الخطوة 5: استعرض تطبيقك في متصفّح الويب إن أردت معاينة تطبيق الويب الخاص بك في متصفحك المفضل، ليس عليك القيام بأي شيء خاص لإعداد خادم ويب محلي على جهاز حاسوبك، فهو جزء من مهام Yeoman. تشغيل الخادم شغّل سكربت npm لإنشاء خادم http محلي يستند إلى Node على localhost:3000 (أو 127.0.0.1:3000 بالنسبة لبعض التكوينات) بتنفيذ الأمر التالي: npm run serve افتح لسانًا جديدًا في متصفحك وانتقل إلى العنوان 3000:localhost: إيقاف الخادم إذا احتجت في أي وقت إلى إيقاف الخادم، فاستخدم الاختصار Ctrl + C لإنهاء عملية سطر الأوامر الحالية. ملاحظة: لا يمكنك تشغيل أكثر من خادم http واحد على نفس المنفذ (3000 افتراضيًا). مراقبة ملفاتك افتح محرر النصوص الذي تفضّله وابدأ في إجراء التغييرات. سيفرض كل حفظِ لملفاتك تحديث المتصفح تلقائيًا إذ لا يتعين عليك القيام بذلك بنفسك. يُطلق على هذا إعادة التحميل المباشر وهي طريقة رائعة لتعاين حالة تطبيقك في الوقت الفعلي وعكس التغييرات مباشرةً على المتصفح دون أن تفعل أي شيء. تُوَّفر لتطبيقك عملية إعادة التحميل المباشر (Live reloading) من خلال مجموعة من مهام Gulp التي يتم إعدادها في الملف gulpfile.js و Browsersync التي يتم إعدادها في الملف gulp_tasks/browsersync.js؛ فهي تراقب التغييرات التي تطرأ على ملفاتك وتعيد تحميلها تلقائيًا في المتصفح في حالة اكتشاف تغيير ما. فيما يلي أدناه، حرّرنا الملف Header.js القابع في المجلّد src/app/components. بفضل التحديث المباشر، تظهر التغييرات مباشرةً في المتصفح وهذه صورة قبل إجراء أي تعديل: وصورة بعد إجراء تعديل (تغيير عنوان التطبيق) وحفظ الملف: لا تنس الاختبار! لديك تطبيق TodoMVC مجرّب وأنت تقوم بتغيير العنوان. يتعيّن عليك تعديل الاختبار في mytodo/src/app/components/Header.spec.js أو التراجع عن التغيير للتثبت من عملية إعادة التحميل المباشر. الخطوة 6: الاختبار باستخدام Karma و Jasmine إذا لم يكن Karma مألوفًا لديك، فهو برنامج اختبار شيفرات جافاسكربت أي إطار عمل محايد للاختبار. أمّا إطار الاختبار Jasmine فهو مدمج في المولد fountainjs. عندما نفّذنا الأمر yo fountain-webapp في وقت سابق من هذا الدليل، قام المولد بتوليد الملفات ذات النمط spec.js.* في المجلد المصدري لمجلد المشروع mytodo، وأنشأ الملف conf/karma.conf.js، ثم سحب وحدات Node إلى Karma. سنحرّر سكربت Jasmine لوصف الاختبارات قريبًا ولكن دعنا نرى كيف يمكننا إجراء الاختبارات أولًا. تشغيل اختبارات الوحدة دعنا نعود إلى سطر الأوامر ونوقف الخادم المحلي قسرًا باستخدام الاختصار Ctrl + C. يوجد بالفعل سكربت npm أُدرِج في الملف package.json الخاص بنا لإجراء الاختبارات. يمكن تشغيله على النحو التالي: npm test ينبغي أن تنجح جميع الاختبارات. تحديث اختبارات الوحدة ستجد اختبارات الوحدة مهيّأة في المجلد src، لذلك افتح الملف src/app/reducers/todos.spec.js. هذا هو اختبار الوحدة للمخفض (reducer) الخاص بـ Todos. على سبيل المثال، نركز على الاختبار الأول الذي يتحقق من الحالة الابتدائية. (ملاحظة: على ويندوز، قد تحتاج إلى إضافة 127.0.0.1 localhost إلى الملف etc/hosts): it('should handle initial state', () => { expect(todos(undefined, {})).toEqual([ { text: 'Use Redux', completed: false, id: 0 } ]); }); واستبدل هذا الاختبار بما يلي: it('should handle initial state', () => { expect(todos(undefined, {})).toEqual([ { text: 'Use Yeoman', // <=== هنا completed: false, id: 0 } ]); }); عندما نعيد تنفيذ الاختبارات عبر الأمر npm test، ينبغي أن نرى أن الاختبارات تفشل في هذه الحالة. ملاحظة: إذا كنت تريد تشغيل الاختبارات تلقائيًا بعد إجراء أي تعديل، يمكنك استخدام npm run test:auto بدلًا من ذلك. افتح src/app/reducers/todos.js ثم ضع الشيفرة التالية مكان الحالة الابتدائية (initial state): const initialState = [ { text: 'Use Yeoman', completed: false, id: 0 } ]; رائع! لقد أصلحت الاختبار: تسهِّل كتابة اختبارات الوحدة (unit tests) تحديد الأخطاء كلّما أصبح تطبيقك أكبر فأكبر وكلّما انضمّ المزيد من المطورين إلى فريقك. تجعل ميزة الاعتماد على السقالة (scaffolding) في Yeoman كتابة اختبارات الوحدة أسهل، لذا لن يكون لك عذر إذا لم تكتب اختباراتك بيديك! ;-) الخطوة 7: الاستفادة من التخزين المحلي لحفظ المهام (todos) دعنا نعيد النظر في مشكلة العناصر التي لا تثبت (تعاد إلى حالتها الأولية) عندما يُحدَّث المتصفح من خلال تطبيق mytodo مع React/Redux. تنويه: إذا لم يكن الثبات والتخزين المحلي مشكلةً بالنسبة لك أو كان وقتك ضيقًا، فيمكنك تخطي هذه الخطوة والانتقال مباشرة إلى الخطوة 8، "الاستعداد للإنتاج". تثبيت حزمة npm يمكننا استخدام وحدة Redux أخرى تسمى "redux-localstorage" تتيح لنا تنفيذ التخزين المحلي بسرعة وسهولة. نفِّذ الأمر التالي لتثبيتها: npm install --save redux-localstorage@rc استخدام redux-localstorage يجب إعداد مخزن Redux وضبطه لاستخدام التخزين. افتح الملف src/app/store/configStore.js واحذف كل محتواه وضع الشيفرة التالي مكانه: import {compose, createStore} from 'redux'; import rootReducer from '../reducers'; import persistState, {mergePersistedState} from 'redux-localstorage'; import adapter from 'redux-localstorage/lib/adapters/localStorage'; export default function configureStore(initialState) { const reducer = compose( mergePersistedState() )(rootReducer, initialState); const storage = adapter(window.localStorage); const createPersistentStore = compose( persistState(storage, 'state') )(createStore); const store = createPersistentStore(reducer); if (module.hot) { // Enable Webpack hot module replacement for reducers module.hot.accept('../reducers', () => { const nextReducer = require('../reducers').default; store.replaceReducer(nextReducer); }); } return store; } إذا عاينت تطبيقك في المتصفح، سترى أن هناك عنصرًا واحدًا "Use Yeoman" في قائمة مهام todo. يعمل التطبيق على تهيئة مخزن مهام todos إذا كانت مساحة التخزين المحلية فارغة ولم نضف فيها أي عناصر حتى الآن. جرب إضافة بعض العناصر إلى القائمة: الآن عندما تُحدِّث المتصفح، نلاحظ أن العناصر موجودة وثابتة. أمرٌ جيدٌ! يمكننا التأكّد من ثبات بياناتنا في التخزين المحلي عبر التحقق من لوحة الموارد (Resources) في أدوات المطور Chrome DevTools واختيار Local Storage في الجانب الأيسر: اكتب اختبارات الوحدة تريد تحديًا إضافيًا؟ حسنًا لك ذلك؛ أعد زيارة اختبارات الوحدة في الخطوة 6 وفكّر في كيفية تحديث اختباراتك الآن إذ تستخدم الشيفرة التخزين المحلي. الخطوة 8: الاستعداد لمرحلة الإنتاج هل أنت مستعد لعرض تطبيقك الجميل؟ دعنا نحاول بناء نسخة جاهزة للإنتاج نستطيع تسليمها للعميل مثلًا. تحسين الملفات من أجل الإنتاج لإنشاء نسخة نهائية من تطبيقنا، نحتاج إلى: فحص الشيفرة بحثا عن أي أخطاء محتملة عبر الأداة lint. تجميع واختصار السكريبتات والأنماط الخاصة بنا لحفظها. تفسير أي مُخرَجات للمعالجات الأولية (preprocessors) التي نستخدمها. وإجمالًا جعل تطبيقنا رشيقًا. ما يثير الدهشة هو أننا نستطيع فعل كل ما سبق فقط بتنفيذ الأمر البسيط التالي: npm run build إنّ تطبيقك الرشيق الجاهز للإنتاج متوفرٌ الآن في المجلد dist في جذر مجلد المشروع mytodo الخاص بك. هذه هي الملفات التي يمكنك وضعها على خادمك باستخدام FTP أو أي خدمة نشر أخرى. بناء ومعاينة التطبيق الجاهز للإنتاج هل تريد معاينة تطبيقك الجاهز للإنتاج محليًا؟ إليك مجرد سكربت npm بسيط آخر: npm run serve:dist سيعمل على بناء مشروعك وإطلاق خادم ويب محلي. إنّه رائع حقًّا! ختام الورشة، تهانينا! كما ترى، يمكن أن يتيح لك Yeoman الكثير والمزيد من الأدوات الخيارات، فيدعم تنصيب السقالات بناء تطبيقات Angular وبعض الإطارات الأخرى التي لم نتطرق لها هنا. على سبيل المثال، يدعم مولد Fountain Angular كذلك إنشاء أنابيب (pipes) وتوجيهات (directives) وخدمات (services) ومكونات (components) جديدة لك. يمكن توليد مكونات جديدة ببساطة وسهولة عبر تنفيذ الأمر: yo fountain-angular2:component componentName، والذي سيؤدي إلى إنشاء ملف المكون الخاص بك وإضافة شيفرة componentName.spec.js جديدة لاختبار الوحدة أيضًا. العثور على المزيد من المولدات الفرعية يمكنك في أي وقت استخدام الأمر: yo --generators للاطلاع على جميع المولدات الفرعية لمولدات Yeoman المثبَّتة. وماذا بعد ذلك؟ Yeoman دائم التطور. احرص على زيارة الموقع yeoman.io للحصول على مزيد من المعلومات ومتابعة Yoman@ على تويتر لمواكبة المستجدات. ساعدتنا مولدات Fountain على كتابة هذا التطبيق Todo بسرعة وأناقة. تابع YeomanFountain@ للبقاء على اطلاع على الميزات الجديدة والإصدارات الجديدة. React هو مكتبة جافا سكريبت لبناء واجهات المستخدم. اطلع على توثيق React في موسوعة حسوب للتعرف على هذه المكتبة أكثر. Angular2 إطار عمل للتطوير على كافة المنصّات. Webpack عبارة عن وحدة مجمعة (module bundler) نموذجية تأخذ الوحدات النمطية ذات الاعتماديات وتولد أصول ثابتة (static assets) تمثل تلك الوحدات. *JSPM حزمة إدارة متصفح. حمّل أي تنسيق للوحدة (ES، و AMD، و CommonJS، وglobals) مباشرة من أي سجل مثل npm و GitHub مع إدارة تبعية حديثة الإصدار (flat versioned dependency management). هذا كل ما ينبغي ذكره الآن بخصوص Yeoman. المصادر Getting Started With Yeoman Let's Scaffold A Web App With Yeoman

لا يخفى على أي مطور ويب خصوصًا مطوري واجهة المستخدم الأمامية (front end developers) أهمية إضفاء بعض الحيوية في المواقع التي يصممونها عبر الحركات، إذ هنالك عدة فوائد يمكن تحصليها من إضافة الحركات إلى صفحات الموقع أهمها الابتعاد عن السكون الممل، ولفت الانتباه، وتحسين التواصل مع الزائر أو المستخدم ...إلخ. تحاول هذه المقالة تسليط الضوء على الحركات وأهميتها في مواقع الويب مع ذكر لمحة تاريخية عنها، وتوفر للقارئ مصادر علمية نظرية وعملية لتعلم كيفية إنشاء الحركات عبر CSS باحتراف. جدول المحتويات حرصًا على تنظيم المقالة ولتسهيل الوصول إلى القسم الذي تريده بسهولة، سنذكر هنا جدول المحتويات باختصار: ما هي أهمية الحركات؟ ظهور الحركات في الويب أريد تعلم إنشاء الحركات، فمن أين أبدأ؟ دروس نظرية: مبادئ الحركات والتحريك دروس تطبيقية عملية ما هي أهمية الحركات؟ لا شك أنَّك لاحظت من خلال تصفحك للمواقع كمية الحركات المُطبَّقة فيها بدءًا من الحركات الصغيرة في الأزرار والقوائم وحتى الصور المتحركة (GIFs) والفيديوهات التي تعمل تلقائيًا. وبمناسبة الإشارة إلى الصورة المتحركة، فقد انتشرت كثيرًا في الآونة الأخيرة وهذا طبيعي بالموازنة مع الصور الساكنة المملة. فيمكنك عبر صورة متحركة رواية قصة قصيرة أو إيصال فكرة للناظر بطريقة تتفوق فيها على عدة فقرات مكتوبة. بعبارة أخرى، معلومٌ أنَّ الإشارات والحركات أبلغ من الكلمات وتترك أثرًا أعمق في الذهن، فكيف لا وهي اللغة التي يمكن أن يتخاطب بها جميع البشر مهما كانت لغتهم وخلفيتهم! أي يمكنك عبر الحركات التواصل مع شريحة أوسع من المستخدمين. إذا نظرت حولك عمومًا أو أمعنت النظر في الطبيعية خصوصًا، ستجد أنَّ الحركة في كل مكان وهي سمة الطبيعية الأساسية، فكلمة «حيوية» هي مصدر صناعي من «حياة» ويراد بها الفاعلية والنشاط. وتركبية جسم الإنسان وعدد مفاصله تؤكد أهمية الحركة التي تمثِّل سمة أساسية فيه. فمثل التحريك كَمَثل أي فنٍّ سواءً كان الشعر أو الرسم أو غيرهما من الفنون، وأصبح في عصرنا هذا علمًا يُدرّس وعملًا يُنجَز. هل خطر في ذهنك الآن أفلام الرسوم المتحركة؟ تمامًا، فهذا ما قصدته. لابد أنَّك تعرف ديزني وشخصيتها المشهورة ميكي ماوس والمحقق كونان وشهرة سلاسل المانغا اليابانية (أي القصص المصورة) وتطورها إلى رسوم متحركة (أنمي)؛ فكل ذلك أساسه الحركة والتحريك وإبداع الإنسان في توظيف الحركة في شتى المجالات. ظهور الحركات في الويب إن كنت من جيل الثمانينات والتسعينات، فلابد أنَّك زرت الكثير من المواقع التي كانت تستعمل حركات شتى مثل بطاقات لامعة أو نجوم مشعة أو قطط راقصة أو غيرها من الأشكال والتي كنت أراها مزعجة لي في بعض الأحيان؛ فلا أحب الاستعمال الزائد للحركة كثيرًا وكنت أهرب من المنتديات التي تفرط في استعمالها. أغلب ذلك كان يجري عبر تقنية Flash (الفلاش) التي أحدث ثورة في الحركات والتحريك آنذاك (بعد الصور المتحركة GIF). على أي حال، كانت ذلك يُسبِّب بطئيًا كبيرًا في تحميل الموقع مما يؤثر سلبًا عليه. في هذه الأيام ومنذ فترة ليست ببعيدة، ظهرت تقنيات حديثة يمكن عبرها إضفاء الحيوية والحركة إلى مواقع الويب وذلك عبر HTML و CSS وجافاسكربت وصور SVG دون أن تؤثر على الأداء تأثيرًا ملحوظًا أو سلبيًّا. وبالتالي، دخلت الحركة إلى أغلب عناصر الصفحة بأدق تفاصيلها. فلم يعد الغرض منها إضفاء الحيوية والمتعة للمستخدم فقط، بل تحسين تجربة وواجهة المستخدم أيضًا (UX/UI) مما يجعل الموقع أفضل وأسهل للاستخدام خصوصًا إذا كان موقع الويب (أو تطبيق الويب) تفاعليًّا مع المستخدم. أريد تعلم إنشاء الحركات، فمن أين أبدأ؟ حسنًا، إن اقتنعت بضرورة وأهمية الحركات في صفحات الويب، فقد تتساءل: من أين أبدأ وهل يوجد مرجع يشرح لي التحريك شرحًا كافيًا ووافيًا؟ أجيبك، نعم يوجد وبالعربية أيضًا. وفرنا في أكاديمية حسوب سلسلة مقالات عن تعلم التحريك في CSS والتي تأخذك خطوة بخطوة لإنشاء حركات احترافية وإضافتها إلى موقعك. هذه السلسلة هي ترجمة لفصول كتاب CSS Animation 101. ستغطي هذه المقالات المواضيع التالية: أولًا: ما هي الحركات؟ سنحاول أن نفهم سبب استخدام الحركات. سنقدم أيضًا الخاصيتين transition و animation، إضافة إلى بعض مصادر الإلهام. ثم: سنتحدث بتفصِيل عن الخاصية transition. ونتعلم كيفية عمل الانتقالات، والخاصيات التي تُمكّننا من التحكم في الحركة. بعد ذلك: سنركز على الخاصية animation، ونتعلم كيفية إنشاء الإطارات المفتاحية التي تتيح لنا فعل أشياء تتجاوز إمكانيات الانتقالات البسيطة. أخيرًا: سنجمع كل ما تعلمناه في الفصول السابقة. سندرس بعض الأمثلة المتقدمة التي تستخدم كلا الخاصيتين، ونتعلم الرابط بين الحركات وسهولة الوصول (accessibility)، ونشارك بعض مصادر CSS المفيدة التي يمكنك تطبيقها في مشاريعك، وأدوات JavaScript التي يمكن استخدامها لإنشاء تأثيرات أكثر تقدمًا. بعد قراءتك هذه السلسلة، ستفهم مبادئ التحريك في CSS فهمًا جيدًا، بالإضافة إلى الأدوات اللازمة لإنشاء الحركات وإضافتها إلى مشاريعك. تجمع مقالات هذه السلسلة بين الأمثلة النظرية والعملية. سوف تتعلم كيفية إعداد بيئة العمل الخاصة بك، وستطالع الكثير من الأمثلة العملية عن الحركات في ثنيّات الطريق. دروس نظرية: مبادئ الحركات والتحريك سأكتب عناوين مقالات سلسلة التحريك في CSS مع شرح مبسط عن ما ستتعلمه فيها هنا لسهولة الوصول إليها: 1. ما هي استخدامات الحركات؟ هذه المقالة هي أول مقالة في السلسلة وتناقش سبب إضافة الحركات وتبنيها في مواقع الويب وكيف يمكن أن يستفيد منها مصممو مواقع الويب. 2. تجهيز بيئة العمل لإنشاء الحركات ستتعلم في هذه المقالة كيفية تجهيز بيئة العمل لديك لإنشاء الحركات عبر CSS وتشغليها إضافةً إلى تحديد سير العمل. سيكون العمل إمَّا باستعمال المتصفح نفسه (سيكون الاعتماد غالبًا على CodePen) أو بتجهيز بيئة تطوير محلية. سيتطرق المقال إلى أداة البناء Gulp لأتمتة بعض العلميات الروتينية. 3. مدخل إلى الإنتقالات: التنقل بين الحالات تشرح هذه المقالة كيف يجري تحريك عنصر عبر توضيح مبدأ تحويل إحدى خصائصه وصفاته ونقلها تدريجيًّا بزمن محدَّد لتوليد شعور بالحركة. ستلقي هذه المقالة أيضًا نظرة تفصيلية على خاصية التحويل transition في CSS وكيفية استعمالها في ذلك الغرض مع أمثلة عملية. 4. مدخل إلى الحركات: مفهوم الحركة يشرح هذا المقال أولًا الفرق بين الإنتقال والحركة ويوضح كيف يُنفِّذ المتصفح حركة ما على عنصر. يعرِّفك هنا على خاصية الحركة animation في CSS شقيقة خاصية التحويل transition وكيفية استعمالها لإنشاء الحركات. يعرض أيضًا مثالين عمليَّين ويحللهما لفهم كيف تجري الحركة. يشرح أخيرًا متى تُستخدَم الحركة ومتى يُستخدَم الانتقال. 5. تطبيق عملي: الانتقالات تتعمق هذه المقالة في استعمال الخاصية transition وتعرض مثالًا عمليًّا عن تطبيقها على زر لتغيير حالته أثناء تحويم مؤشر الفأرة فوقه. تناقش المقالة أيضًا موضوع دعم هذه الخاصية عبر مختلف المتصفحات. 6. خاصيات الانتقالات تشرح هذه المقالة جميع خاصيات الانتقالات المرتبطة بالخاصية transition مع عرض بعض الأمثلة. أي أنها ستعرض الصياغة المختزلة والصياغة التفصيلية المطوَّلة لها. ستتطرق أخيرًا إلى شرح موضوع مهم يتعلق بالأشياء التي لا يطبَّق الانتقال عليها. 7. دوال التوقيت تتحدث هذه المقالة عن دوال التوقيت (timing function) وكيفية استعمالها مع الانتقالات المطبقة على العناصر، وتشرح أشهر أنواع دوال التوقيت المستعملة حاليًّا مع عرض صور وأمثلة توضيحية تساعد على فهمها. 8. الانتقالات المتعددة سترى في هذه المقالة ما يحدث عند تطبيق عملية انتقال واحدة على عنصر تغير فيه عدة حالات، أي كيف يمكن توليد حركة جديدة عبر تطبيق عملية انتقال واحدة على عنصر واحد تحدث له عدة تغييرات. يجري تطبيق ذلك على مثاليين عمليين ملهمين. 9. الانتقالات وجافاسكربت تتحدث هذه المقالة عن طريقتين لتطبيق الانتقالات على العناصر عبر استخدام لغة جافاسكربت هما: إضافة وإزالة الأصناف (أي إضافة تنسيقات مكتوبة مسبقًا أو إزالتها)، أو التحكم مباشرةً في الانتقالات (أي تعديل شيفرة CSS مباشرةً). 10. تطبيق عملي: التحريكات ستلقي هذه المقالة نظرة أعمق على الخاصية animation شيقية الخاصية transition والمكملة لها في توليد الحركات مع ذكر عدة تطبيقات عملية عليها. سيجري أيضًا شرح الإطارات المفتاحية (keyframes) وارتباطها الوثيق بتلك الخاصية وكونها أساس الحركة. 11. خاصيات الحركات تشرح هذة المقالة الصياغة المختزلة والصياغة التفصيلية المطوَّلة للخاصية animation وتشرح بعدها الخاصيات المرتبطة بها ووظيفة كل منها. تتطرق أخيرًا إلى كيفية استخدام دوال التوقيت ضمن الإطارات المفتاحية. 12. تطبيق عملي: الإطارات المفتاحية تلقي هذه المقالة نظرة أعمق على الإطارات المفتاحية (keyframes) وصياغتها وكيفية استعمالها مع الحركات لتحريك العناصر تحريكًا مخصَّصًا. سيجري شرح كل ذلك شرحًا تفصيليًّا عبر تطبيق عملي لتحريك زر حركة مُخصَّصة. 13. الحركات المتعددة المتزامنة تتحدث هذه المقالة عن كيفية استخدام عدة مجموعات من الإطارات المفتاحية (keyframes) لإنشاء حركة معقدة مؤلفة من عدة حركات تعمل بشكل متزامن مع بعضها بعضًا. المثال العملي في هذا الدرس هو إنشاء إشارة مرور. 14. موجز الحركات نتوقف هنا في هذه المقالة للالتقاط الأنفاس وأخذ استراحة بسيطة يجري فيها مراجعة وتلخص كل ما تعلمته مسبقًا في المقالات السابقة عن الحركات والانتقالات وتطبيقها لتحريك العناصر في CSS. 15. رواية القصص عبر الحركات تطبِّق هذه المقالة كل ما تعلمته مسبقًا لإنشاء حركات هادفة مفيدة، إذ تشرح مفهوم الصورة الرئيسية المستعملة بكثرة في الصفحات الرئيسية للموقع وصفحات الهبوط والتي تحكي هدف الوقع أو تُعلِّم كيفية استخدامه. 16. حرب النجوم (Star War) سنطبق في هذه المقالة كل ما تعلمته في المقالات السابقة لصنع حركة متجِهيًّة (SVG) مرحة، وذلك بالعمل على تحريك عنوان فيلم حرب النجوم من إعلان "The Force Awakens" ليظهر وكأنه ثلاثي الأبعاد. في أثناء ذلك، سيجري شرح الخاصية transform ودوالها‏ scale()‎ و translateZ()‎ و rotateY()‎. 17. إظهار المحتوى أثناء التمرير سوف تتعلم في هذه المقالة كيفية إظهار العناصر عند تمرير (scrolling) إليها وعرضها على نافذة المتصح مع إضافة حركة إليها. يعرض لتحقيق ذلك إطاري عمل هما: Wow.js و Animate.css مع عدم نسيان الدعم الذي يوفره Modernizr احتياطًا من أولائك المستخدمين الذين لا يشغّلون JavaScript لسبب ما. 18. سهولة الوصول تنتقل هذه المقالة بعيدًا عن الحركات للتحدث عن سهولة الوصول (accessibility)، إذ لا تقل عملية تسهيل وصول جميع الأشخاص للمحتوى أهمية عن عملية إنشاء الحركات. تدور رحى هذه المقالة حول مناقشة العبارة التالية: ما الفائدة من الحركات إن منعت بعض الأشخاص (مثل الذين يستخدمون قارئات الشاشة مثلًا) من الوصول إلى المحتوى وعرضه، أو سببت إزعاجًا لآخرين وأعاقتهم عن استخدام موقعك أو تطبيقك بأريحية وكفاءة. 19. نهاية الرحلة تعرض هذه المقالة الأخيرة من سلسلة التحريك في CSS بعض المصادر والمراجع المفيدة في إنشاء حركات متقدمة وتحاول توجيهك إلى الخطوات اللاحقة لتطوير نفسك والانتقال إلى مراحل متقدمة في مجال التحريك. دروس تطبيقية عملية @media screen and (min-width: 650px) { .response_image { width: 33%; display: inline-block; vertical-align: top; margin-top: 0px; } .response_descrip { width: 64%; display: inline-block; margin-right: 10px; vertical-align: top; margin-top: 0px; } } تحوي الأكاديمية على مقالات عدة تتحدث عن الحركات في CSS بمستويات متفاوتة ومواضيع متنوعة تصب جميعها في موضوع واحد ألا وهو «التحريك في CSS»، لذا جمعت لك جميع هذه المقالات لسهولة الوصول إليها من مكان واحد ولتكون لك مرجعًا تستعين به في المستقبل. مبادئ التحريك في صفحات الويب باستخدام CSS تشرح هذه المقالة المبادئ الاثنا عشر لأساسيات التحريك عبر CSS - المنشورة بكتاب عنوانه: "وهم الحياة: الرسوم المُتحركة في ديزني" - وتناقش كيف لها أنّ تُطبَّق في صناعة صفحات الويب مع أمثلة توضيحيّة وإتاحة الوصول إلى مصدر شيفرة HTML و CSS الخاصّة بهذه الأمثلة. تأثيرات حركية على عناصر قوائم HTML باستخدام CSS ستتناول هذه المقالة كيف يُمكن للحركات المُساعدة على تقديم مُحتوى جديد، وذلك عبر إظهار وإخفاء عناصر القوائم. تتطرق أيضًا إلى شرح كيفية استخدام JavaScript لإضافة عناصر جديدة إلى القائمة، إذ يجري تطبيق حركة عليها أثناء إظهارها. تحريك شبه العناصر (pseudo-elements) في CSS ستتعرف في هذه المقالة على كيفية استخدام عنصر زائف (pseudo-element) لإضافة تأثير بصري على زر في CSS. يشرح أولًا ماهية شبه العناصر (أو العناصر الزائفة) وفائدتها وكيفية الاستفادة منها في إنشاء الحركات، ثم ينتقل إلى كيفية توظيفها في إنشاء زر برَّاق عبر الحركات. تحريك زر تفضيل التغريدة الخاص بتويتر باستخدام CSS فقط يعرض هذه المقالة طريقة لمحاكاة حركة زر "التفضيل" في تويتر الذي حدثه مؤخرًّا المعتمدة على سلسلة من الصور ولكن ستجري عملية محاكاة الحركة وتقليدها باستعمال CSS مع دوال التوقيت بالإضافة إلى شرح مفهوم وهم الحركة. تنبيهات مؤقتة باستخدام CSS ستتعلم في هذه المقالة البسيطة كيفية عمل تنبيهات مؤقتة بحركة جميلة باستخدام CSS فقط حتى تخطر المستخدم بوجود شيء جديد. ما سيجري تطبيقه هو إظهار تنبيه بسيط أو عبارة ما أسفل الشاشة لمدة معينة، ثم إخفاؤها. وسنضيف شريط تقدم (progress bar) لنعرف كم تبقى من الوقت حتى يختفي التنبيه. كيفية إنشاء قائمة متحركة من نوع off-canvas في CSS يشرح هذا المقال كيفية إنشاء قائمة تنقل من النوع الذي يكون خارج الشاشة (off-canvas)، إذ ستتعلم ببناء شيء شبيه بهذه المعاينة (انظر إلى Demo2) بحيث تكون الأيقونة التي تفتح القائمة موجودة في أعلى يسار الشاشة والحد (border) يكون اسمك من جهة اليسار. تأثير الانتقال في مشهد فضائي يشرح هذا الدرس طريقة إنشاء تأثير الانتقال في مشهد فضائي يضم الأرض والقمر ، إذ يهتم المقال بتعليمك كيفية استخدام الانتقالات لدب الحياة في محتوى الصفحة، بالإضافة إلى إنشاء تأثيرات مرور الفأرة فوق العناصر لتبدو بأجمل مظهر. أضف إلى ذلك أنها تناقش مفهوم الانتقالات والحركات والفرق بينهما وأيهما يجب أن تستخدمه. كيف تنشئ ساعة ذات عقارب باستخدام تحريكات CSS و JavaScript يشرح هذا الدرس طريقة إنشاء ساعة متحركة باستخدام تأثيرات CSS و JavaScript. أساس إنشاء هذه الساعة سيكون باستخدام HTML و CSS وخلفية SVG إضافةً إلى بعض أسطر JavaScript. ستستعمل أيضًا التحريكات Animations والانتقالات Transitions في CSS، وسنعتمد على JavaScript لضبط التوقيت الابتدائي. تحريك وانتقال العناصر في CSS3 (الانتقال) يشرح هذا المقال كيفية تطبيق الانتقالات (الخاصية transition) على العناصر عبر في CSS فقط مع ذكر أهم خصائص العناصر القابلة للانتقال مع أمثلة عملية. يتطرق أيضًا إلى زمن وسرعة الانتقالات، والتأخير في الانتقالات، وكيفية تطبيق الانتقال بتعليمة واحدة مختزلة. تحريك وانتقال العناصر في CSS3 (التحريك) يكمل هذا المقال شرح مفهوم تحريك العناصر وتطبيق التأثيرات البصرية عبر الحركات (الخاصية animation) في CSS ويوضح كيفية تحريك العنصر بين عدة حالات مع أمثلة عملية. المواضيع التي يتحدث المقال عنها أيضًا هي الإطارات المفتاحية، ومدة الحركة ودوال التوقيت، وتأخير تشغيل الحركة، واتجاه الحركة وحالتها، وتخصيص الحركات، وكيفية تطبيق حركة بتعليمة واحدة مختزلة. تأثير الانتقال والحركة في CSS يُعرِّفك هذا المقال على تأثيرات الانتقالات (Transitions) والحركات (Animations) في CSS3 بالإضافة إلى الحديث عن دعم المتصفحات لها، والخصائص التي تسمح بتطبيق تأثيرات الانتقال عليها، ومدة وتوقيت تأثير الانتقال، والإطارات المفتاحية في الحركات، ودوال التوقيت، وأزمنة الحركات، وتكرار واتجاه وحالة الحركة، وغيرها. أفضل 25 مكتبة تحريك في CSS يعرض لك هذا المقال أفضل مكاتب التحريك في ‏CSS، والتي تساعدك في حفظ وقتك عند تصميم ‏موقع الويب الخاص بك من خلال استخدامك لهذه المكاتب التي تضفي بعض الديناميكية والتفاعل إلى ‏عملك، إذ تحوي هذه المكتبات على العديد من الحركات والمؤثرات لأي نوع من أنواع عناصر صفحات الويب كالنصوص، الصور، الإطارات، الأزرار، والبطاقات والعديد غيرها. تأثيرات إبداعية لإضافة وإزالة عناصر قائمة باستخدام تحريكات CSS يشرح هذا المقال استخدام الحركات (animations) والانتقالات (transitions) في CSS3 لإعطاء تأثيرات عند إضافة أو إزالة عناصر من قائمة بالإستعانة بتقنية التخزين المحلي للمتصفح، إذ من الضروري أن يكون للانتقالات والحركات هدف واضح ومحدّد، ألا وهو تحسين تجربة المستخدم. كيفية إنشاء قائمة تنقل دائرية باستخدام CSS Transforms يعلمك هذا المقال كيفية إنشاء قائمة تنقل (navigation) دائرية الشكل باستخدام الانتقالات في CSS. يراعي المقال شرح ذلك خطوة بخطوة بالإضافة إلى الحسابات والمنطق البسيط وراء هذه الطريقة حتى يتسنى لك فهم كيفية عمل هذه القائمة المميزة. استخدام المحدد target: ضمن CSS لإنشاء تأثيرات واجهة المستخدم UI بدون JavaScript يشرح هذا المقال كيفية استخدام المحدد target: ضمن CSS لتحديد وتنسيق مظهر العنصر أو الفقرة الموجودة ضمن نفس الصفحة والمعرفة عبر الخاصية href ضمن رابط ما، إذ يتم تطبيق هذه التنسيقات على العنصر الهدف عند النقر على ذلك الرابط بدون اللجوء لاستخدام JavaScript. يشرح المقال أيضًا كيفية استعمال الخاصية animation لتطبيق تنسيق ما بشكل متدرج.