الدرس الخامس: عمل قوائم منسدلة من غير معرفة javaScript و عمل nav-bar رأسي!

يتميز عالم الخدمات المصغرة بوجود خدمات مماثلة كثيرة؛ فإذا كُنت تطور تطبيقات، فهناك العشرات غيرك يقومون بذلك، وإن كُنت تقدم خدمات سيو، فهناك أيضًا من يقومون بذلك. وبسبب هذه التنافسية الشديدة، يجب عليك أن تسبق مُنافسيك على الأقل بخطوة واحدة. كيف إذن تتفوق على مُنافسيك في عالم الأعمال؟ 1 – حدد العلامة التجارية الخاصة بك يجب أن يكون لعملك علامة تجارية خاصة يُعرف من خلالها، والعلامة التجارية هي إشارة مميزة تُبين أن هذه الخدمة قد قدمها الشخص س من الناس؛ فعلى سبيل المثال لا الحصر إن وقعت عينيك على هاتف جوال عليه تفاحة مأكول منها قطعة صغيرة، ستعرف فورًا أن هذا الهاتف من صُنع شركة Apple، وعليه سيأتي في ذهنك مدى جودة وروعة هذا الجوال. والعلامة التجارية يجب تصميمها بعناية ودقة؛ لأنك سوف تقوم بنشر كافة أعمال وتقديم خدماتك باستخدام هذه العلامة التجارية المُميزة، وهذا الأمر أيضًا يتطلب منك المُحافظة على علامتك التجارية من أي ضعف قد يُصيبها نتيجة لضعف الجودة التي تقدمها في أي وقت. ويجدر الإشارة إلى أن بعض الزبائن قد يعترض على وضع علامتك التجارية أو اسمك على العمل، وهنا تطبق مبدأ العرض والطلب وتحديد أولوياتك، فالمبتدئ مثلاً لم يؤسس اسمه بعد فربما يتخلى عن هذه النقطة في سبيل اكتساب الخبرة وإنجاز خدمات أكثر، الأمر بالنهاية معادلة يجب أن تقرر عواملها بنفسك. 2 – دراسة المنُافس كيف-تتفوق-على-منافسيك-في-عالم-الأعمال-؟-3 كي تضمن بقائك يجب أن تكون على علم بالمُنافسين وما يقدمون من خدمات؛ إذاً لا مناص من دراسة المُنافس والتعرف على نقاط قوته وضعفه، وبرغم أن دراسة المُنافسين في الشركات الكبيرة أمر يكاد يكون حتمي لبقاء الشركة، إلا أنه يُعد أمرًا اختياريًا إذا ما تعلق الأمر بالأعمال أو الخدمات المصغرة؛ فدراسة المُنافس هنا تختلف اختلاف تام عن دراسة المنافس في الشركات الكبيرة والتي تحتاج إلى ميزانية كبيرة للغاية وفريق عمل مُخصص للقيام بهذا الأمر؛ أما كبائع فكل ما عليك هو دراسة عينات قليلة من المُنافسين وليس جميعهم. دراسة الخدمات ذات المبيعات الجيدة، تعليقات المشترين، والأمور المثيلة لتكتشف نقاط الضعف والقوة وتعمل أنت على سد هذه الثغرات بخدماتك، كما يجب أن تكتشف “بقرتك البنفسجية” وهو مبدأ كان قد تحدث عنه سيث جودين وألف عنه كتابا بنفس الاسم، بقرتك البنفسجية هي الشيء الذي يميزك عن باقي المنافسين. بدراستك للمنافسين يجب أن تحدد هذا الشيء بأقرب وقت، وقد يكون احترافك لمهارة معينة، قد يكون الجودة، قد يكون حسن التعامل … حدده ثم اعمل على تطويره. 3 – استمع لعملائك دراسة العملاء أحد الأمور الهامة التي لا يجب عليك إهمالها بأي حال من الأحوال؛ فبناءٌ على احتياجات ورغبات زبائنك سوف يكون لديك المعلومات التي سوف تُساعدك في طرح خدماتك وتوجيهها وتسويقها إلى شريحة معينة من الجمهور المُستهدف المُهتم بما تقدم. أنت كبائع يجب أن تستمع إلى عملائك بصدر رحب، فكل كلمة يوجهها لك العملاء سوف تُلهمك بتطوير شيء ما في خدمتك، ومُهمتك هنا الاستماع لعملائك وإدخال احتياجاتهم ورغباتهم في حيز التطبيق. ونصيحة لا تأخذ بعض الملاحظات السيئة بمحمل شخصي، لكن أنظر عليها كفرصة لتطوير نفسك وخدماتك. اقرأ أيضًا: للبائعين: كيف تحقق زيادة في الطلب على خدماتك؟ 4 – النجاح حليف المُثابرة هذه المقولة حقيقة لا تقبل الجدل، ولنا في قصة الأرنب والسلحفاة مثلًا رائعًا يؤكد هذا المعنى؛ فالذي أوصل السلحفاة للمركز الأول قبل الأرنب هو المُثابرة والعمل الجاد، بينما الأرنب اغتر بنفسه وبقدرته فخسر السباق. إن أردت النجاح في عملك، فعليك أن تخطو بثبات نحو تحقيق أهدافك دون كسل أو تسويف ودون اغترار بأي نجاح تُحققه، فبإمكان المُنافس التغلب عليك بسهولة إن وقعت في أحد هذه الفِخاخ: الكسل، التسويف، الغرور، عدم التطور بما يواكب متطلبات العصر الحالي. 5 – اسبق المنافسين بخطوة اصنع لنفسك خدمة تنافسية تميزك عن الآخرين، والتي تستطيع اكتشافها من خلال تنفيذ (2-3) بهذا المقال، طوّر منها؛ فالجميع يبحث دائمًا عن الأحدث، وليس معنى أن خدمتك حققت نجاحًا في فترة زمنية مُعينة أنه بالتأكيد سيُحقق نجاحًا كبيرًا في فترة زمنية أخرى، فكما يقولون “كل وقت وله أذان” ولذلك يجب عليك التطوير المُستمر والتحديث المستمر للخدمة؛ مثلا استغلال المناسبات، زيادة الطلب، بحيث تكون سابقًا للمُنافسين بخطوة، وكلما اقتربوا من الوصول إليك، تكون أنت سبقتهم بخطوة أخرى، تحديث جديد، ميزة أخرى، خدمة مرتبطة، وهكذا. هُناك 3 مفاتيح رئيسية يجب عليك الاعتماد عليهم إن أردت التغلب على مُنافسيك، وهم جودة المنتج، السعر، وخدمة العملاء المُقدمة مع الخدمة. 6 – لا تعيب في مُنافسيك أبدًا لا تقع في هذا الخطأ الفادح؛ أن تعيب في مُنافسيك، فهذا يُظهرك أمام عملائك حاقدًا، أيضًا لا تشغل بالك ببيان عيوب أو مميزات الخدمات المنافسة، ولكن اشغل بالك بشرح مُنتجك أنت، خصوصًا أمام العملاء؛ وهذا من شأنه أن يُظهرك بمظهر احترافي، ويُظهر ثقتك بنفسك وبخدماتك. 7 – براعتك في التخصص كيف تتفوق على منافسيك في عالم الأعمال ؟ (2) براعتك فيما تقدم من خدمات يتطلب منك أن تقسم وقت بين علم وعمل، ودراسة للسوق والعميل والمنفسين، البنود السابقة كلها يجب أن تتجه إلى هذا الهدف وهو براعتك فيما تقدم. ربما يكون لديك نصيحة أخرى تود إضافاتها إلى هذا المقال، فلا تبخل أن تطرحها في تعليق.

اقرأ المزيد

الدرس الثاني: Foundation Responsive Grid System الجزء الاول

تعلمنا فى الدرس السابق كيفية ربط ملفات foundation framework بملف html الخاص بنا و رأينا كيف يمكننا ان نتحكم فى ظهور و اختفاء عناصر من الصفحة عند تغيير حجم المتصفح بكل سهولة باستخدام بعض classes.

فى هذا الدرس نتعرف علي ما هو Foundation Grid System و كيفية استخدامه لعمل صفحة تتفاعل مع حجم المتصفح لدي المستخدم, و كيف يمكننا تغيير شكل الصفحة فى متصفحات الهواتف و اعطائها شكل مختلف عن شكلها فى المتصفحات الكبيرة.

لاحظ انه لكي تستطيع استخدام خصائص Grid system يجب عليك ان تقوم بإنشاء div و تعطيه

class="row"

و هذا يعني انك تقوم بإنشاء صف بداخل الصفحة بعرض الصفحة كلها سواء كان هذا فى المتصفحات الكبيرة او الصغيرة ثم (كما ستري فى الفيديو) انك تقوم بتقسيم هذا الصف الى اقسام و كل قسم يتكون من عدد من العواميد المحددة.

لاحظ انه لا يجب ان يزيد عدد العواميد فى كل صف عن 12 عمود فى جميع احجام المتصفحات و اذا حصل هذا سيقوم المتصفح بنقل العنصر الخاص بك الى اسفل عناصر الصف.

يمكنك التحكم فى عدد العواميد الخاصة بكل عنصر عن طريق class كهذا:

class="large-4 medium-4 small-4 columns"

هذا يعني ان هذا div سيأخذ عرض 4 عواميد (ربع عرض الصفحة) فى الاحجام المختلفة للمتصفحات ( كبير و متوسط و صغير).

هذا الفيديو هو الجزء الاول فى درس Grid System و يوجد جزء اخر يعرض خيارات متقدمة للتحكم فى عناصر الصفحة عند الاحجام المختلفة للمتصفحات.

يمكنك مشاهدة الفيديو من هنا :

يمكنك تحميل ملفات الدرس النهائية  من هنا

يمكنك سؤالي عن اي شئ فى الفيديو من خلال المدونة او أسفل الفيديو و سأقوم بالرد عليك فى اقرب وقت بإذن الله.

اقرأ المزيد

الدرس الأول : اعداد الملفات و شرح Visibility classes- دورة Foundation 5

فى هذا الدرس اتحدث عن تحميل Foundation 5 Framework من الموقع الرئيسي الخاص بهم

ثم كيفية ربط ملفت الفريم ورك بملف HTML الخاص بمشروعنا كما يفضل اضافة الثلاث سطور التالية قبل نهاية وسم body :

<script> $(document).foundation();

</script>

 ثم ابدأ بشرح اول خصائص Foundation Framework و هو Visibility classes و الذي من خلاله استطيع اظهار اي عنصر فى ملف html عند حجم معين للمتصفح.
كمثال:
لنقل اني املك فى اعلي الصفحة عارض صور متحرك (Slider) و انا اريد اظهاره فقط فى الشاشات ذات الحجم المتوسط و الكبير و لا اريده ان يظهر فى حجم المتصفحات الصغيرة مثل متصفحات الهواتف الذكية (Smart Phones) كل ما عليا فعله هنا هو فقط اعطاء قيمة معينة لـلـ Class الخاص بالـ div المحتوي علي slider. هذه القيمة فى مثالنا هذا هي "show-for-medium-up"
ليصبح شكل العنصر الخاص بنا فى ملف html علي هذا النحو:

<div class="show-for-medium-up">

            your slider code here

</div>

فى هذه الحالة سيظهر slider فى الشاشات ذات الحجم المتوسط و الكبير فقط و يختفي فى المتصفحات الصغيرة , سهل و رائع أليس كذلك !

فيما يلي الـ classes المختلفة الخاصة بدرسنا هذا مع نبذة بسيطة عن كل منها :

"show-for-small-only": يظهر فى المتصفحات الصغيرة فقط

"show-for-medium-up": يظهر فى المتصفحات المتوسطة الحجم و كل المتصفحات الاكبر منها

"show-for-medium-only": يظهر فى المتصفحات ذات الحجم المتوسط فقط

"show-for-large-up": يظهر فى المتصفحات الكبيرة و المتصفحات الكبيرة جدا ايضا

"show-for-large-only": يظهر فى المتصفحات الكبيرة فقط

"show-for-xlarge-up": يظهر فى المتصفحات الكبيرة جدا جميعها

يوجد ايضا قيمتين اخرين و هما "show-for-xlarge-only" و "show-for-xxlarge-up" ولا اعتقد انك فى حاجة لاستعمالهم فى مشارعيك :)

يمكنك مشاهدة الدرس من هنا :

يمكنك تحميل الملفات النهائية للدرس من هنا 
تحديث: يمكنك مشاهدة الدرس الثاني من خلال هذا الرابط

يمكنك ايضا اضافة اي اسئلة او تعليقات هنا او فى صفحة الفيديو و سأقوم بالرد عليك بإذن الله تعالي فى اقرب وقت ^_^

اقرأ المزيد

بداية دورة Foundation 5 framework.

السلام عليكم،

العديد من مصممي المواقع يعلمون جيدا كم من الوقت يستهلك فى تصميم صفحة ويب متجاوبة مع المتصفح (Responsive) و لاسيما اذا كانت معدودة بتأثيرات عديدة من لغة JavaScript.

الان و مع ظهور العديد من Frameworks التي تساعد علي انشاء هذه الصفحات فى وقت و جهد اقل كان لابد لنا من تعلمها من اجل توفير الوقت و الجهد المبذول فى تصاميمنا.

لذلك اتشرف بمشاركة ما تعلمته عن Foundation 5 Framework من خلال دروس سأطرحها فى شكل شرح و فيديوهات ايضا على القناة الخاصة بالمدونة على اليوتيوب.

هذا الفيديو تستطيع من خلاله التعرف علي محتوي الدورة الذي سنتناول نقاشه في الايام القادمة بإذن الله.

اقرأ المزيد