لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 06/04/16 في كل الموقع
-
المُقدّمة Foundation هو إطار عمل مُتجاوب (responsive) لجهة العميل (client-side)، أنشأتهُ شركة Zurb عام 2011 لتسهيل إنشاء المواقع، يُمكّنك Foundation من بناء موقعك بشكل سريع ممّا يزيد من إنتاجية التطوير، حيث يُقدم الإطار نصوص CSS جاهزة وقابلة للتعديل لتناسب أغلب المشاريع. تُقدم شركة Zurb حلولًا للمطوّرين بجانب إطار العمل Foundation، حيث هناك العديد من الإضافات التي تختبرها Foundation في مختبراتها والتي تطلق عليها اسم playground والتي تحتوي على خطوط الأيقونات (Icon Fonts)، وأيقونات الشبكات الاجتماعية (Social Web Icons)، والرسوم البيانية، ومخططات لإنشاء نماذج بدئيّة (prototypes)، وقوالب البريد الالكتروني، والعديد منها بإمكانك أن تجده هنا، كما تُقدم شركة Zurb حزمة تطبيقات ويب مجانية ومدفوعة. أصبح Foundation في الإصدار الخامس أسرع وأسهل استخدامًا، وإن كنتَ قد تعاملت مع الإطار في إصداره الرابع فأنت مع الإصدار الخامس وكأنك تنظر إلى إطار مختلف تمامًا، إذ قدّم Foundation في الإصدار الخامس الكثير من التحسينات على مستوى الأداء والمظهر، فانتقل من استخدام مكتبة Zepto إلى jQuery، وهذا الانتقال من شأنه أن يقدمَ أداءً أفضل، والتحسينات طالت حتى التوثيق الرسميّ حيثُ أصبح سهل القراءة وأكثر تنظيمًا. يَدعم Foundation جميع المُتصفحات ما عدا IE في إصداره السابع والثامن، والصورة التّالية من التوثيق الرسميّ تُوضّح توافق الإطار مع مُختلف المُتصفحات. Foundation أم Bootstrap؟ دائمًا هناك مقارنات وحروب لاختيار الأفضل وهذه المُقارنات قائمة منذ الأزل ولن يَربح بها أحد فدائمًا ما تجد أسئلة من نوع: هل متصفح فيرفُكس أفضل أم Chrome؟، هل لغة Ruby أفضل أم PHP؟ (Ruby طبعًا :))، والقائمة تطول، والإجابة تختلف من مجال لآخر، ولكنّ القاعدة العامة أنّه ما من شيء أفضل بالمُطلق، أمّا للإجابة على سؤال هل Foundation أفضل أم Bootsrap؟ فأقول: الإجابة ليست بنعم أو لا، الأفضل هو الأفضل للمشروع، ويجب على المُطوّر الاطلاع على الإطارين معًا والابتعاد عن الاعتماد المُطلق على أحدهما، فالإطاران يَملُكان شهرةً واسعةً تجعل منهما لاعبين قويّين في عالم تطوير الويب، ناهيك على أنّ الإطارين يتشابهان في الكثير من المفاهيم والأفكار، ممّا يجعل تعلّمهما أمرًا يسيرًا، ولكن تذكّر عند اختيار أيّ إطار عمل يجب على الإطار أن يملك توثيقًا رسميًا جيدًا ووجودًا قويًّا على الويب. إن كنت من مُحبي الأرقام، الترتيب التالي يُوضح أشهر أُطر العمل تقييمًا على موقع GitHub: Bootstrap: أكثر من 78000 نجمة. Foundation: أكثر من 19000 نجمة. Semantic UI: أكثر من 15000 نجمة. Pure: أكثر من 10000 نجمة. Skeleton: أكثر من 7000 نجمة. UIkit: أكثر من 4000 نجمة. التحميل بإمكانك تحميل الإطار من هنا بنسخته الكاملة أو تخصيص التحميل حسب الحاجة، في حالتنا سوف نستخدم النسخة الكاملة من الإصدار ذي الرقم 5.5.0. في حال اخترت تخصيص التحميل، وهو أمرٌ قد تفعله لتصغير حجم ملف الإطار، فعليك الانتباه عند تحميل النسخة الأحدث أن تختار ذات التخصيصات التي اخترتها سابقًا. في المجلد المُسمى css يوجد ثلاثة ملفات CSS، وهي foundation.css ويحتوي نسخة كاملة مقروءة من أنماط الإطار، والملف foundation.min.css والذي يحتوي على نسخة كاملة مُقلّصة (minified) من أنماط الإطار، حيث تم حذف جميع الفراغات والتعليقات لتصبح أصغر حجمًا، والملف الثّالث هو normalize.css ويُستخدم عادةً لتسوية المتصفحات على سوية واحدة، وهو ليس خاصًّا بـFoundation. في المجلد js سوف تجد ملفّ JavaScript يحمل الاسم foundation.min.js وهو بشكل مُقلّص، أي غير مقروء، ويحتوي كافّة خصائص الإطار، أمّا المجلد foundation ففيه كافّة مُحتويات المَلفّ السابق ولكن بشكل مُجزّأ، بحيث يكون لكل إضافة ملف مُستقل، وكلّ من هذه الملفّات مقروء وبإمكانك استخدام أيٍّ من هذه الملفات دون الآخر، أمّا المجلد vendor فيحتوي ملفات المكتبات المستخدمة في الإطار مثل مكتبة jQuery ومكتبة Modernizr والتي تُستخدم في استكشاف ميزات HTML5 وCSS التي يَدعمها المتصفح. المتجر سوف نعمل طيلة السلسلة على مشروع متجر بسيط لبيع الصور الفوتوغرافية نُسمّيه "صوّرها"، نستعرض من خلاله ميزات هذا الإطار، والميزات التي يُمكننا تطبيقها عليه، لا تتطرق السلسلة إلى أساسيات CSS ولا JavaScript، وسيقتصر التركيز الإطار نفسه. سنستدعي ملف الإطار والمكتبات المُساعدة في أعلى مُستند HTML في الوسم <head> بالشكل التالي: الإطار مُقلّصًا، لنحصل على أصغر حجم مُمكن. ملفّ CSS الخاصّ بالتعديلات والتي سوف تكون مُستقلة عن الإطار لنُحافظ عليها في حال تحديث الإطار. ملف JavaScript الخاص بمكتبة Modernizr. سنستدعي ملفّ الإطار الكامل وبالحجم المُصغر ومكتبة jQuery في أسفل مُستند HTML، لتحميل الصفحة بشكل أسرع دون انتظار ملفات JavaScript. <link rel="stylesheet" href="css/foundation.min.css"/> <link rel="stylesheet" href="css/mycss.css"/> <script src="js/vendor/modernizr.js"></script> ... <!--أسفل الصفحة--> <script src="js/vendor/jquery.js"></script> <script src="js/foundation.min.js"></script> <script> $(document).foundation(); </script> لست مُقيدًا بتحميل كافة ملفّ الإضافات الخاصّ بـJavaScript، بل بإمكانك اختيار إضافة دون أُخرى، فلا حاجة لتحميل ملف الإطار بحجمه الكامل بل يُمكنك اختيار الإضافة التي تريدها لتناسب احتياجات الموقع. <script src="/js/foundation.dropdown.js"></script> <script src="/js/foundation.tab.js"></script> يتكوّن المتجرالذي سوف نعمل عليه خلال هذه السلسلة من خمسِ صفحات هي: الصفحة الرئيسة وتحتوي على عرض بسيط لمزايا المتجر والصور الأكثر مبيعًا. صفحة المعرض التي تحتوي على عرضٍ لجميع صور المعرض. صفحة التسجيل والتي تحتوي على النماذج (forms). صفحة الخطط والأسعار والتي تحتوي على ثلاثة جداول تُمثل الخطط المتوفرة للاشتراك. صفحة المنتج وهي عبارة عن عرض للصورة المُختارة مع بيانات المُصور والتعليقات والتقييم الخاصّ بها. الهدف من المتجر هو عرض ميزات إطار العمل Foundation وليس تصميم المتجر بحد ذاته، فالمتجر مُصمّمٌ بأبسط الإمكانيات وللتوضيح فقط. سوف نستخدم متصفح Chrome طوال السلسلة ولك حريّةُ استخدام متصفحك المُفضل (أقصد Chrome :)) والصور التّالية هي لبعض الصفحات التي سوف نحصل عليها بعد انتهاء السلسلة. تعرّفنا من خلال هذه المُقدمة البسيطة على إطار العمل Foundation بشكل عام، ولما عليك اختياره، وشرحنا التحميل وطريقة الإعداد، وأخذنا فكرة عامّة عن المتجر الذي سوف نتعامل معه طيلة السلسلة. في المقالة الثّانية سوف نبدأ بالدخول في التفاصيل والشرح الفعليّ لميزات الإطار، وسوف نبدأ بالنظام الشبكي وكل ما يتعلق به وكيفيّة التطبيق على متجرنا مع عرضٍ للأمثلة من شيفرةٍ برمجية وصورٍ توضيحية.1 نقطة -
مع اقتراب شهر رمضان المبارك، يحب الناس تبادل البطاقات التي يهنئون بها بعضهم البعض بالشهر الفضيل، أو تلك البطاقات التي تحتوي على الآيات والأحاديث النبوية والتوجيهات والفتاوى المتعلقة بالشهر. سنصمم نموذج لبطاقة تهنئة بشهر رمضان المبارك بنمط إسلامي، مع إمكانية استخدامها في مناسبات أخرى كالعيد مثلا! تتكون بطاقتنا من هلال ومساجد وخلفية بزخارف إسلامية، سنشرحها على أقسام. رسم الهلال ارسم دائرة كاملة الاستدارة بالضغط على Ctrl أثناء الرسم، واجعل شفافيتها Opacity للمنتصف من لوحة التعبئة والحدود Fill and stroke. كرّر الدائرة مجدّدا عن طريق اختيار Duplicate من الزر الأيمن ولوّنها بلون مختلف. صغّر الدائرة المكرّرة مع الضغط على Ctrl أثناء التصغير، ثم اسحبها حيث الموضع الذي يتشكل الهلال بحذفه من الدائرة الأولى. حدّد كلا الدائرتين معا بالاستعانة بزر Shift لتحديد الدائرة الأخرى، ثم من قائمة المسار Path من شريط المسارات العلوي اختر أمر الفرق Difference. رسم المساجد ارسم عددا من المستطيلات وصفها عاموديا لتشكل المئذنة. بأداة النجمة والمضلع Stars and polygons سنرسم المثلث الذي يقع في رأس المئذنة مع الضغط على Ctrl أثناء الرسم للتحكم باتجاه المثلث، بعد اختيار المضلع من الشريط العلوي، وقيمة عدد الزوايا 3 وإعطاء القيمة المناسبة للاستدارة التي نرغب بها. عدّل عرض المثلث بأسهم التحديد والتحجيم، وقم بمحاذاة جميع أجزاء المئذنة عاموديا من لوحة المحاذاة والاصطفاف Align and distribute. أضف عددًا من الدوائر فوق المئذنة ليكتمل شكلها. ارسم مستطيلا كقاعدة للقبة، ثم ارسم فوقه شكلا بيضاويا بالعرض الذي ترغب أن تكون عليه القبّة. حوّل الشكل البيضاوي لمسار عن طريق الشريط العلويّ لأداة التحرير Node tool أو اختيار Object to path من قائمة المسار. ارفع العقدة العلوية Node قليلا إلى الأعلى مع الضغط على Ctrl أثناء سحبها للمحافـظة على محاذتها . حوّل العقدة إلى زاوية من شريط أداة التحرير العلوية باختيار Make selected nodes corner. حرّك الذراع الأيمن Node handle للعقدة العلوية مع عقارب الساعة مع الضغط على Ctrl إلى أن تحصل على الميلان المناسب، ثم حرّك الذراع الأيسر بشكل متقابل في الاتجاه المعاكس. حوّل العقدتين الجانبيتين إلى عقد متناسبة باختيار Make selected nodes symmetric بمعنى أن أي تغيير في أحد ذراعي العقدة سيحصل للذراع الآخر. اسحب الذراع العلوي للعقدة اليمنى للأعلى مع الضغط على Ctrl وستلاحظ أن الذراع الآخر سيسحب في الاتجاه المعاكس تلقائيا. اسحب دليلا من جهة المسطرة العلوية بمؤشر السهم (وهو عبارة عن خط وهمي) إلى موضع ارتفاع ذراع العقدة اليمنى، وذلك لتستعين به لسحب ذراع العقدة اليسرى لنفس الارتفاع، ثم احذفه بتحديده بالسهم واختيار زر الحذف Delete من لوحة المفاتيح. كرّر المئذنة والقبة عدة مرات مع التغيير في أحجام القباب وطول المآذن. ارسم مستطيلا يصل بين المآذن والقباب وبين الهلال. حدّد جميع الأشكال بسحب المؤشر حولها جميعها ثم من قائمة المسار اختر Union. يمكنك أن تعدل في العقد بين الأشكال إلى عقد ناعمة عن طريق اختيار Make selected nodes smooth من الشريط العلوي لأداة التحير، ثم حركّها يمينا ويسارا لجعل الشكل أكثر انسيابية. رسم الخلفية والزخارف نضيف خلفية للبطاقة ونعيدها لخلف الهلال، ونلوّنها من لوحة التعبئة والحدود أو من شريط الألوان السفلي باللون المناسب. اجعل شكل الهلال والمساجد شفافا عن طريق خيار Opacity من لوحة التعبئة والحدود وأعطه القليل من الضبابية blur ولتكن القيمة 2 ولوّنه باللون الأسود. كرّر الشكل وأزل الضبابية واجعل الشفافية مئة مع تلوينه باللون الأبيض وتحريكه قليلا للأعلى بحيث يظهر الظل تحته. في الطرف السفلي الأيمن للخلفية ارسم مربعا بالضغط على Ctrl أثناء الرسم، ثم كرّر المربع مجددا وقم بتدويره مع الضغط على Ctrl إلى أن يعطينا شكل المعين. كرّر كلا المربعين وضعهما جانبا حيث سنعود لهما بعد قليل. حدّد المربعين الأصليين ومن تبويب رسم الحد Stroke paint ضع لهما حدودا، ومن تبويب سمة الحد Stroke style اختر العرض المناسب. بينما كلا المربعين محدّدين حولهما إلى مسار من خيار Stroke to path من قائمة المسار، ثم قم بتوحيدهما عن طريق خيار Union من قائمة المسار. عد للمربعين الذين تركناهما جانبا وقم بتوحيدهما عن طريق Union. من لوحة المحاذاة والاصطفاف حاذ المربعين المعبأين مع المربعين الأصليين عاموديا وأفقيا. حدّد كلا الشكلين الموحدين ومن قائمة المسار اختر أمر الفرق Difference. كرّر الشكل الناتج وصغره بأسهم التحجيم عن طريق الضغط على Ctrl+Shift للمحافظة على تمركزه وسط الشكل الأول وللمحافظة على أبعاده. ثم من قائمة المسار قم بتجزئة الشكل الذي كرّرته وصغرته عن طريق خيار Break apart ثم قم بتوحيد الشكل المجزأ توًا، ليتكون لنا قطعتين إحداهما مفرغة والأخرى معبئة. لوّن كلتا القطعتين بلون مناسب للخلفية. قم بتجميع القطعتين بتحديدهما ثم بالزر الأيمن تختار Group. اختر الشكل المجمع أولا ثم الخلفية تاليا ومن لوحة المحاذاة والاصطفاف اختر محاذاة حوافهما من جهة اليمين. كرّر الشكل مجددا واحذف الشكل الأوسط من الشكل المكرّر بعد فك تجميعه عن طريق Ungroup من الزر الأيمن. ليتم صف الأشكال بشكل متناسق، فعّل من الأعلى خيار الالتقاط والكبس Enable Snapping ومنه فعّل خيار Snap cusp node لتلتقط الأشكال بعضها البعض من حواف العقد الحادة. قم بتجميع جميع الأشكال المكرّرة في مجموعة واحدة وتأكد من كونها داخل حدود الخلفية، إن لم تكن كذلك عدل في حجم مجموعة الزخارف بما يتناسب مع الخلفية. كرّر المجموعة واخترها -أي المجموعة المكرّرة- ثم حدّد الخلفية ومن شريط المحاذاة قم بمحاذاتهما من حوافهما العلوية. كرّر الخلفية ولوّنها بلون مختلف، وقم بتصغيرها من الأعلى مع الضغط على Shift أثناء التصغير لتصغر من الجانبين بشكل متساوٍ، ثم أعدها خلف الهلال من الشريط العلوي. اختر من تبويب التعبئة Fill التدرج الشعاعي Radial gradient ثم من نفس التبويب اختر تعديل التدرج Edit gradient. ستظهر ثلاث عقد، الوسطى تمثل لون التدرج الداخلي والجانبيتين تمثلان لون التدرج الخارجي. أزل الشفافية من لون التدرج الخارجي بتحديد العقدة وإعطاؤها لونا متناسقا. بأداة الكتابة Text tool سنكتب العبارة التي نرغب بها، ومن الشريط العلوي للأداة سنختار نوع الخط وحجمه وغيرها من الخيارات، مع إمكانية تكبير وتصغير الخط عن طريق الأسهم. لوّن النص باللون الأسود وأعطه الشفافية والضبابية المطلوبة. كرّره ولوّنه باللون الأبيض وحرّكه بحيث يظهر الظل تحته. قم بتجميع جميع أجزاء البطاقة في مجموعة واحدة. حتى تكون بطاقتنا جاهزة لنشرها لمعارفنا عبر وسائل التواصل، اختر Export PNG image من قائمة الملف File لتصدير الصورة بصيغة PNG لتظهر لوحة التصدير على يمين الشاشة. من نفس اللوحة اختر تبويب Selection ليقوم بتصدير ما تم اختياره فقط، ثم حدّد البطاقة المجمعة. اختر عبارة Export as من لوحة التصدير. في النافذة المنبثقة حدّد المكان الذي ستحفظ فيه البطاقة واكتب في خانة الاسم اسمها وامتدادها ثم اختر زر الحفظ Save. ثم من لوحة التصدير اختر أمر التصدير Export. الآن صارت البطاقة جاهزة للإرسال، ويمكنك بخطوات مشابهة إبداع المزيد من البطاقات.1 نقطة -
أهلًا بك صديقي بالإضافة إلى رد الأخ هشام Firebase: يُعتبر من المنصات الرائعة التي تُقدم خدمات منوعة من أجل تطوير التطبيقات وتُتيح لك المنصة مُزامنة البيانات بشكل تلقائي بين إصدارات الهواتف والويب وذلك عند تطوير التطبيقات من خلالها. ومن أجل تطوير التطبيقات في المصنة، يجب امتلاك حساب في المنصة ويُمكن التسجيل من خلال حساب Gmail الخاص بك. بعد التسجيل في الموقع من اجل استخدامه يجب عمل مشروع جديد على برنامج اندرويد استوديو وربط منصة فايربيس بالمشروع الخاص بك. ومن مميزات منصة Firebase توفر Firebase قاعدة بيانات مجانية. تزامن فوري بين برنامجك وقاعدة البيانات. API يعمل على أنظمة تشغيل ومنصات مختلفة (Android(Java), iOS(C#), Web(Javascript أقل جهد ممكن من المبرمج للحصول على تزامن. توثيق سهل وممتع لـ Firebase API نظام تسجيل دخول بطرق كثيرة (فيسبوك، تويتر، ايميل ورقم سري، الخ) إحصائيات لتفاعل المستخدمين خلال ساعات اليوم.1 نقطة
-
استعمل خاصية <div>1 نقطة
-
إليك وظائف هذه البرامج ومجانيتها: مايكروسوفت project 2016: برنامج لإنشاء مخطط لمشاريع مع تحديد المدة الزمنية للتنفيذ بالإضافة إلى تقسيمه إلى اجزاء وتوزيع مهام التنفيذ على الأشخاص. البرنامج غير مجاني. مايكروسوفت visual studio: بيئة برمجة متكاملة للغات الدوت نت. توجد نسخة مجانية من هذا البرنامج. مايكروسوفت windows server: نظام تشغيل ويندوز من مايكروسوفت مخصص لأجهزة الخوادم (السيرفرات) والتي تحاول من خلاله شركة مايكروسوفت منافسة أنظمة يونكس المهيمنة على سوق الخوادم. نظام مدفوع. مايكروسوفت access: برنامج الشهير من مايكروسوفت لإدارة قواعد البيانات، يتميز بسهولته وسرعته، يأتي ضمن حزمة مايكروسوف أوفيس وهذه الحزمة غير مجانية. مايكروسوفت visio: برنامج من مايكروسوفت لرسم المخططات والرسوم البيانية وهو برنامج مدفوع. أرفقت روابط للبرامج إذا ما احتجت إلى مزيد من المعلومات حولها.1 نقطة
-
أهلًا بك أخي الكريم كما قال الأخ سامر يوجد أكثر من برنامج وسوف اشرح لك طريقة الحرق بشكل مُبسيط على البرامج: 1# حرق توزيعة لينكس على فلاش ميموري بواسطة برنامج Universal USB Installer 1. يجب زيارة الموقع الرسمي لتحميل أخر إصدار من البرنامج (الموقع الرسمي). 2. تشغيل البرنامج والضغط على كلمة I Agree، ومن النافذة التي ظهرت يجب القيام بأربع خطوات: خطوة 1: اختيار التوزيعة من القائمة. خطوة 2: اختيار مكان التوزيعة من خلال زر Browse خطوة 3: اختيار الفلاش ميموري الذي سوف يتم حرق التوزيعة عليه. خطوة 4: هذه الخطوة اختيارية تسمى persistent عند اضافتها تمكنك من حفظ التغييرات في الفلاش. خطوة 5: الضغط على Oui أو نعم وسوف يبدأ البرنامج بحرق التوزيعة على الفلاش. 2# حرق توزيعة لينكس على فلاش ميموري بواسطة برنامج Win32 Disk Imager 1. يجب زيارة الموقع الرسمي لتحميل أخر إصدار من البرنامج (الموقع الرسمي). 2. تشغيل البرنامج والضغط على أيقونى الملف الزرقاء. 3. اختيار التوزيعة المراد حرقها من خلال النافذة التي ظهرت. 4. الضغط على Write، ثم الضغط على Yes من النافذة التي ظهرت. 5. عند الانتهاء من الحرق يجب الضغط على Exit. 3# حرق توزيعة لينكس على فلاش ميموري بواسطة برنامج Rufus 1. يجب زيارة الموقع الرسمي لتحميل أخر إصدار من البرنامج (الموقع الرسمي). 2. تشغيل البرنامج والضغط على الخانة الأولى وأختيار الفلاش ميموري. 3. اختيار التوزيعة المراد حرقها من خلال أيقونة الإسطوانة. 4. الضغط على ابدأ. 5. عند الانتهاء من الحرق يجب الضغط على إغلاق. البرنامج يحتوي على واجهة عربية وسهل التعامل معه ولا يحتاج إلى خبرة بالتوفيق1 نقطة
-
أهلًا بك صراحًة هذا المجال من المجالات التي أحبها وهوايتي أنّ اتعلم هذه الأمور. قبل البدء يجب أنّ يكون هُناك فكرة مُناسبة للكرتون، حيث يجب كتابة السيناريو والحوار الذي سوف يدور بين الشخصيات. بعدها يجب أن تتعلّم على برامج الـ 2D وهي للمُبتدئين، ثم الإنتقال إلى برامج 3D وهي للمُحترفين ومن البرامج المجانية والتي يُمكن الاستفادة منها كجديد في هذا المجال: Toon Boom Studio: هو برنامج مجاني ومتوافق مع ويندوز 7 وأجهزة ماك. Blender: برنامج مجاني يُمكنك من انتاج الفيديوهات والرسوم المتحركة ثلاثية الأبعاد. Synfig Studio: يُمكن من خلاله انتاج أفلام الكرتون والرسوم المتحركة بتقنية 2D،. 3D max: يتيح انتاج الأفلام الكرتونية ثلاثية الأبعاد ويدعم اللغة العربية ويحتوي على شخصيات كرتونية جاهزة. وهذا قائمة مقاطع فيديو يوجد بها كورسات متنوعة حول الرسوم المتحركة قد تُفيدك قائمة أخرى من المُمكن أن تُفيدك هنا أيضًا انصحك بمتابعة موقع 2danimation101 يوجد به كورسات مجانية1 نقطة
