السلام عليكم ، ان شاء الله تكونوا بخير 🙂

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

إستخدم SASS:

بعد تجارب كتير ، وماذا عن طريق CSS و SASS .. الموضوع مختلف تماما ، بصراحه CSS لوحدها ، هي اسرع طريقه تقدر أن تبدأ بيها مشروع ، لكن بنسبه ٩٩ ٪ ، المشروع نتيجته النهائية هتكون مخيبة ، و أي تعديل هيبقى الوضع كارثة بالنسبه ليك في اوقات كتير جدا .. يعنى لو حاجه مشتركه منظم جدا ، اما CSS فانت عارف كويس ان الوضع

البوت كل شيء عنك؟ ساس الجزء الاول , و التانى من هنا ..

لكل مكون ملف:

الجزء الاهم في المشروع ، هو ترتيب ملفاته .. دا هيحدد كتير من راحتك بعدين فى الشغل. خلينا نستفيد من شيلو من التجارب و اوقات ال مكونات الشبكة الواحدة ، لو متشعب ، هيبقى عباره عن فولدر ، و جواه اكتر من ملف ..

انا عارف ان فكره كتره الملفات بالنسبه ليك فى الاول فكره سيئه! ممكن تشوفها دوشه ، ولكن هل تنظه؟

الموارد

بالنسبه ليا، مشاريعى ٩٩ ٪ منها معتمدة على وجوده في بيدروى. موش مشكله تسميته ، مهم في اللى بعده ، جواه بضيف الفولدرات الجايه:

 

1. الخطوط:

من الأسماء ، الفولدر الخاص بالفانتس ، و بكون مرتبها في مشاريع بأسماء الفونتس ، و مشاريع تانيه بيبقى فيها مثال العربية. الإنجليزية ، أيقونات ، ايا كان ترتيب اللى ، هل يمكن أن تكون مرتبك؟

الخطوط

2. IMGS:

ودا برده من الاسم ، بخلي في كل الملفات الخاصة بك بالصور ، أو الساعات لما بكونه من الصور المقلدة في المليشيا ، و بصراحه لقله المرات اللى بعمل فيها كده ، بخارليه وسط الصور مفيش مشكله ، و ما بيكون فى اقسام اعمال ك صفحه، فلم هجلى ملف جوا ال IMGS مثلا اسمه مشاريع او شئ من هذا القبيل "ابو صلاح قبيل" ..

ملحوظه رفيعه بالنسبه لل صور: 

في المشاريع الكبيرة مينتش تشتغل بصور كتير ، وذا اشتغلت بصور كتير ، ويفضل أن يكون في ٩٩ ٪ من حجمها SVG ، هيبقى أفضل في اداء الموقع ، و اسهل في الاستغلال من ناحيه تكبير الصور و تصغيرها من غير ما تبوظ الجوده .. لكن بشكل عام ، مينفعش تعتمد على ايقونات ك صور ، مينفعش تعتمد على خلفيات كتير ك صور برده ..

و في بعض المشاريع بتكون الكونسبت معتمد على صور كتير ، في الحاله دى ، ياريت تضغط كل الصور لا يوجد درجه ممكن ، هتلاقى نفسك بتوفر مساحات خياليه .. بالنسبه ليا فى ماك بتستخدم تطبيق imageOptim بسيطة ، وبيدي نتائج رائعة في اغلب الاوقات ..

المؤتمر الوطني العراقي

3. INC:

دا تاني اهم فولدر ، دا بيحتوى على ال javascript منظمه في ملفات البائع و لو في فريم ورك بستخدمه "كمثال الأساس" بيكون فى فولدر للجافا سكريت الخاصه بيه. ملف بائع بيكون فيه الليبري اللى بشتغل بيها زى الجقيري و اى بلوجين تانيه .. و اخيرا ملف app.js و دا فيه شغل ال js الخاص بالمشروع.

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

4. SCSS:

فولدر SCSS بيكون محتوى على فولدرين جواه ، الأول الإطار و التانى ال صفحات و ملف layout.scss ودا اللى بيعمل لود لكل الفايلز اللى انا محتاجها ..

الإطار

ودا بيكون جواه الكومبونتس اللى هشتغل بيها ، بتقدير السايت المثال _footer.scss ، heads .scss ، cards.scss الخ .. دا في حاله انك موش هتشتغل مع فريم ورك ، لو هتشتغل بفريم ورك ، الايام تعمل تحديث للفريم ، علشان كده لازم تحفيظ على تقسيم الفريم وركس ، في الأساس ، اللى بعمله انى باخد الفريم نسخة كاملة ، جوهان الفولدر دا ، و من ملف _foundation.scss بحدد انا عاوز اعمل انكلود لانهى كومبوننتس فى فونديش بس ..

إطار عمل فولكر يعمل بتقنية فولدر تسميه مثل مخصص أو تسميه بإسم المشروع ، يمكنك البحث عن footer.scss ، header .scss ، cards.scss ..

صفحات

ودا بيبقى محتوى على الحجات الخاصه

layout.scss

دا اهم حاجه ، هل هذا هو المفضل لديك ، هل مثال على الترتيب اللى بشتغل بيه مثلا فى الفايل دا ،. لمجرد انك تاخد فكره موش اكتر


/ * || === = CRTIVO - MAIN UI KIT = بواسطة MOHAMED YAHIA = Oct، 2015 =================== || المحتوى || =================== 01. تطبيع 02. Foundation === || * /import "إطار / بائع / تطبيع" ؛ import "إطار / مؤسسة" ؛ / * || === = PORIJECT NAME - تخطيط الصفحات المخصصة =================== || المحتوى || =================== 01. الصفحة الرئيسية 02. Inner Page === || * /import 'pages / home_page' ؛ import 'pages / inner_page' ؛

اهم حاجه ، انك تفضل مرتب فعليا في الملفات و النوتس الخاص بالانكلودز بتاعتها ، لاحظ برده ، الفايل اليزلي بتعمل تشمل الفلم وركلي بتشتغل بيه عن طريقه ، ببساطه ، خلى الفريم وركلي فريم ورك ، وفلت من العمل الخاص بك ، من الفايل دا ،، هتسهل عليك كتير فى اى ابديت انت محتاجه بعدين.

 

في الاخر ، هنا تقبّل هذا العدد من المرات في الشباك دا ، فولدرات بس ، مفيش اى فايل الا.

[otw_shortcode_button href = "https://www.dropbox.com/s/4tcezdinj4jt2b6/Resources.zip؟dl=0 ″ size =" medium "icon_type =" عام Foundicon-down-arrow "icon_position =" left "shape =" round "colour_class =" otw-green "] Resources.zip [/ otw_shortcode_button]

اخيرا، شكرا جدا على وقتك

دمتم سالمين 🙂

المزيد من القراءات ،

هناك ميل لإيجاد أشكال تظهر بشكل بشري أو تظهر خصائص إنسانية جذابة. في عام 1915 ، تخشى شركة Coca-Cola أن تخلق قنانيها ذات الجوانب المستقيمة بسهولة مع عبوات المقلدين.

التقييم الاسترشادي هو طريقة فحص قابلية الاستخدام لبرامج الكمبيوتر التي تساعد على تحديد مشاكل قابلية الاستخدام في تصميم واجهة المستخدم (UI). وهو يتضمن على وجه التحديد مقيمين يفحصون الواجهة ويحكمون على توافقها مع التوصية ...

بحث لتقييم قابلية استخدام منتجات منافسيك وإمكانية تعلمها ، وهذا يكمل استراتيجيات التسويق التقليدية ومراجعات الأعمال من خلال النظر في السياق الاجتماعي والاقتصادي والتقني. يسمح لفرق التصميم بـ ...

تحاول "خرائط رحلة المستخدم" التقاط تجربة المستخدم أثناء التفاعل مع المنتجات. إنها رحلة مرئية للمستخدم عبر الحل. تعد Journey Maps نوعًا من المجلة ، حيث يلاحظ المستخدم مشاعره ونقاط الألم و ...

يعد التصميم التشاركي (التصميم التعاوني في الأصل ، والتصميم المشترك غالبًا) هو أسلوب لتصميم محاولة إشراك جميع أصحاب المصلحة بفاعلية (مثل الموظفين والشركاء والعملاء والمواطنين والمستخدمين النهائيين) في عملية التصميم للمساعدة في ضمان إعادة .. .

مقارنة نسختين من التصميم لمعرفة أيهما أفضل أداءً مقابل هدف محدد مسبقًا • يعد اختبار A / B أحد أساليب التحسين التي تسمح لك بمقارنة نسختين مختلفتين من التصميم لمعرفة أيهما يجعلك أقرب إلى العمل ...