تجهيز بيئة العمل لإنشاء الحركات عبر CSS

اقتباس

"الناس لا يتعلمون المشي باتباع القواعد. بل يتعلمونه بالممارسة، والسقوط ثم النهوض". ريتشارد برانسون

سنتعلم في هذه الفقرة كيفية إنشاء تحريكات CSS ‏(CSS animations) ومشاهدتها في المتصفح. ولكن قبل البدء في كتابة الشيفرة، من الجيد أن نحدد سير العمل.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

هناك طريقتان للتطوير: التطوير في المتصفح، والتطوير المحلي (offline).

التطوير في المتصفح

إنّ أبسط طريقة للقيام بالتجارب الصغيرة هي التطوير عبر الإنترنت. الموقع الذي أستخدمه غالبًا هو CodePen. موقع JS Fiddle يُعد خيارًا ممتازًا أيضًا.

في بقية هذا الدرس، سأستخدم CodePen لكتابة الأمثلة، لذا فمن المهم أن تكون على دراية بطريقة عمله.

CodePen عبارة عن منصة برمجية، والتي يمكنك أن تجري عليها تغييرات على شيفرة HTML و CSS و JavaScript، ورؤية النتائج على الفور. تنقسم الشاشة إلى أربعة أقسام، قسم المعاينة، وأقسام HTML و CSS و JavaScript. يوجد داخل كل قسم خيارات تسمح لك بإعداد اللغات (Sass بدلًا من CSS على سبيل المثال) وغيرها من الأشياء المفيدة.

التطوير المحلي

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

الخيار الأبسط: إنشاء ملفّي HTML و CSS

الخيار الأبسط هو إنشاء ملف HTML ‏(filename.html) وربطه بملف CSS ‏(filename.css) . هذه طريقة مقبولة، لكن يمكن أن تكون بطيئة، حيث سيكون عليك التنقل كثيرًا بين المتصفح والمحرر.

لقد قمت بإنشاء مجموعة من ملفات HTML و CSS، يمكنك نسخها واستخدامها لبدء العمل. قم بتنزيلها من هنا.

Starting files.jpg

Dreamweaver / Macaw / Muse / Coda / Sublime

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

أنا شخصيًا أوصي بالعمل مباشرة على الشيفرة. سيساعدك فهم طريقة عمل CSS على إصلاح المشاكل، أو إنشاء تأثيرات لا يمكن أن توفرها الأدوات البصرية.

أداة البناء Gulp

إذا كنت معتادًا على Github و Node ومعالجة الشيفرات، فقد ترغب في إعداد بيئة تطوير على جهازك.

أنا أحب أداة Gulp. فكونُها تعتمد على Node، يجعلها سريعة جدًا. يمكن تجميع الوحدات لتحويل Sass إلى CSS والإصلاح التلقائي لدعم المتصفح، والمزامنة مع المتصفحات بحيث لا تحتاج إلى تحديث المتصفح في كل مرة تحدّث الشيفرة.

إذا سبق واستخدمت Grunt، أو أدوات البناء الأخرى، فسيكون سير العمل مألوفًا.

لقد قمت بإنشاء مستودع Github لجعل التطوير المحلي أسرع. إذا كنت متعودًا استخدامَ Git، فزُر صفحة المستودع، وطالع الملف readme الذي يحتوي إرشادات الإعداد.

يمكنك تحسينه ومشاركته إذا رغبت في ذلك.

مختصر القول

أثناء تعلُّمك للتحريك في CSS، لا تتردد في التعديل على الشيفرة وتجربة أمور جديدة. قد ترغب في استضافة الشيفرة بنفسك، أو قد تُفضِّل استخدام CodePen، الأمر يعود لك. تأكد من أنه يمكنك تحويل الأفكار إلى شيفرة بسلاسة.

تمرين

سجّل في CodePen. أضف بعض شيفرات HTML و CSS، وانظر بنفسك كيف تتغير النتائج على الفور. من الجيد أيضًا مطالعة بعض أمثلة CodePen على الصفحة الرئيسية، وتعلم كيفية عملها.

اختياري: إذا كنت ترغب في تجربة التطوير المحلي، فقم بتنزيل ملفات البدء المحلية: