هل طمحت عندما بدأت في
تعلم البرمجة (programmer) وتصميم صفحات الانترنت (website design) في بالك انك ستصل الي ان يكون لك مكتبة خالصه
بك مثلا عظماء المبرمجة والمصممين والاكثر من ذلك ان مكتبتك يستخدمها الاخرين
وممكن ان يدفعوا لك اموال لتسمح لهم بذلك ... هل هذا حلم؟
لا .. ليس حلم بل يمكن
تحقيق ذلك بسهولة مع دراسة صحيحة للغة برمجية (coding language) ما وكذلك ترتيب افكارك ومع التخطيط سليم تسطيع انتاج مكتبتك بسهولة
ويسر
لم اطول عليكم ودعنا ندخل
في الجزء العملي وهو تسليط علي طريقة وخطوات تكوين مكتبه بلغة ال CSS وهي لغة تقريبا 99.99% من
المبرمجين ومصممين الموقع والتطبيقات يعرفها وهي يعتمد عليها في تنسيق محتويات
صفحات الويب وهي لغة سهلة وبسيطه وهناك مكتبات كثيرا تم تصميمها لهذه اللغة ومن
اشهرها علي الاطلاق مكتبة البوتستراب (Bootstrap) .
مما يسهل عملية انشاء هذه
المكتبات انها مفتوحة المصدر (Open Source) اي يمكن تعديل وترقية المكتبه بسهولة وكذلك يمكن
للاخرين التعديل فيها
فيا يلي سوف نحدد خطوات
انشاء مكتبة ال CSS
- في البداية لابد ان نبدء
كل شغلنا بواسطة ورقه وقلم اي بعيد عن جهاز الكمبيوتر اي نخطط الاول ونحدده قبل
الذهاب للكمبيوتر وكتابة الكود كل من
*** اسف نسيت اوضح لكم يعني
ايه مكتبة بلغة (Css) هي عبارة عن مجموعة من
الكلاسات (Class) الجاهزة التي تسهل تنسيق
محتويات صفحات الانترنت المكتوية بلغة الاتش ام ال (Html)
- نستكمل الخطوات فعن طريق
الورقه والقلم سوف نجهز (WBS) لاي موقع انترنت ويكون التقسيم من حيث نوع العنصر في الصفحة مثل
(الصور- الكتابة - ادوات الادخال - الفيديو - ... الخ )
*** ملحوظه مصطلح (WBS) يعني (Work Breakdown
Structure) وهو
تكسير او تجزأت الموقع او المشروع الي اجزاء صغيرة يمكن التحكم فيها وتنفيذها
بسهولة وكذلك تقدير زمن وتكلفة تنفيذها وهو مصطلح شائع في علم ادارة المشروعات.
- وعن
الطريق الورق والقلم ايضا لابد ان نحدد طريقة تسمية الكلاسات (class)
ولابد ان تكون التسمية دالة علي محتوي الكلاس وتكون فريده حتي لا تتعارض مع اسماء
الكلاسات الموجودة بالمكتبات الاخري فانصح ان يشمل الاسم علي جزء خاص بكم مكون من
3 احرف من اسمك مثلا ...
مثل علي
اسم كلاس خاص بتغيير سمك الفونت الي (1.2) والاحرف الخاص بك هي (sde)
.Fz-12-sde
{Font-size:1.2
rem;}
- يفضل
جدا جدا كتابة خصية واحد فقط لكل كلاس
- يجب
كتابة الاكواد مرتبه لكل عنصر (text-image-form)علي حد
- يجب
اضافة تعليقات تفصيليه لتوضيح الكود
- يفضل
عمل موقع او ملف لشرح طريقة التسمية (
css
tutorial ) اذا
رغبت في نشر المكتبه للاخرين
تعليقات
إرسال تعليق