- أكوا ويب |
| 10 مكتبات CSS لصناعة مواقع ويب باحترافية Posted: 07 Feb 2022 04:30 AM PST كمطور Front End وواجهات مواقع الويب، فإنك ستعتمد كثيرا على الـ CSS ( او الـ Preprocessors الخاصة بها مثل Less/SASS ) من أجل تشكيل الرونق الخارجي لأي موقع ويب. ولا عيب في الاعتماد على مكتبات CSS خارجية لتحقيق الأهداف المنشودة التي ترغب بالحصول عليها، لأن بنائها من الصفر أحيانا قد يستغرق وقتا أطول، ويستهل جهد أكبر أيضا. فحمدا لله على نعمة مكتبات الـ CSS الخارجية. نود أن نقترح عليك 10 مكتبات CSS رائعة تساعدك على جلب تنسيقات وإضافات جديدة لصفحات الويب التي تقوم بتطويرها، وتجلب أيضا الاحترافية للتصاميم التي تقوم بتشكيلها في صفحات الويب. 10 مكتبات CSS حقا ستغير طريقة تهيئتك وتنسيقك لمواقع الويب. فتابع معنا حتى النهاية. 1 - مكتبة Hover.cssالـ Hover ( وهو تمرير مؤشر الماوس على عنصر ويب ) من الخصائص التي يمكنك أن تتلاعب بها بشكل كبير. وإضافة بعض الأنيميشن والحركة والإثارة لعناصر صفحة الويب أثناء الـ Hover سيشكل فارق كبير بدون شك. المشكلة أنه من الصعب جلب تلاعبات كبيرة للغاية باستخدام الـ Native CSS ( الأكواد التي تكتبها أناملك ). لهذا نقترح عليك استخدام مكتبة Hover.css . هي مكتبة مجانية ومفتوحة المصدر، ويمكنك سواء تحميل ملف css خاص بها وتضمينه في مشروعك، او استخدام الـ CDN ( رابط خاص بالمشروع ). ثم بعدها، يمكنك تصفح جميع أنواع الحركة والأنيميشن في عملية الـ Hover، وعند اختيار ما تريد، قم بإضافة Class للعنصر في الـ HTML يحمل نفس اسم الـ Hover الذي اخترته، وسيتم تطبيقه مباشرة. 10 أجهزة عليك إهدائها لصديقك المبرمج 2 - منصة SpinKitصناعة Loader او أنيميشن يمكن إظهارها أثناء عملية تحميل موقع ويب قد تكون صعبة من الصفر. لذلك نوفر لك أفضل مصدر متاح على الإنترنت حاليا للحصول على أفضل الـ Loaders التي يمكن استخدامها بشكل مباشر، وهي منصة Spinkit . بعد الولوج للموقع الرسمي، ستجد الكثير من خيارات Loaders ذات أنيميشن مختلفة واحترافية، انتقل بين كل الخيارات عبر الأسهم في الجانبين، واكتشف عشرات الـ Loaders المقترحة. حين تجد المثالي بالنسبة لك، انقر على خيار Source، ستحصل على كود HTML/CSS خاص بتركيبه. الأمر حقا بتلك السهولة، ويختزل عليك الكثير من الوقت. 3 - مكتبة Humburger.cssإضافة Menu او قائمة أمر ممتع دائما في الويب، لكن الأنيميشن الخاصة بزر الـ Menu يصعب دائما تصميمه بشكل احترافي. مكتبة Humburger.css من المتكبات التي تسهل عليك إضفاء أنيميشن جيدة على القوائم و الـ Menu ( عبارة Humburger هو تعبير خاص بزر الـ Menu الذي يكون على شكل 3 خطوط متوازية أسفل بعضها البعض ). يمكنك تصفح الموقع الرسمي والبدء في استخدام المكتبة من الرابط التالي . بعد الولوج للموقع، ستجد الكثير من الخيارات أمامك لأنواع أزرار Menu، النقر عليها سيُفعل الانيميشن الخاصة بها. بعد أن تختار الإنيميشن الأكثر ملائمة لك وموافقة لما تبحث عنه، يمكنك تتبيثها إلى موقعك الخاص بعد تحميل المكتبة وتركيبها، ثم استخدام الـ Class المتعلق بالزر. 10 لغات برمجة عليك اكتسابها في 2022 4 - موقع CSS Layoutان طُلب منك صناعة عنصر ما في صفحة ويب، فإن أول الأشياء التي يجب عليك فعلها قبل كل شيئ، هو تهيئة الـ Layout او التقسيم الخاص بالعنصر. بافتراض انك تريد صناعة Pricing Table ( عنصر عرض الأسعار ) الذي في الغالب يكون منقسم لعدة أقسام عمودية فإنه أولا عليك تشكيل هذا القالب او الـ Layout الخاص بها، ضمان توافقه مع مختلف الشاشات، وجعله متجاوبا. وإن كان الأمر صعبا عليك، استخدم موقع CSS Layout . الفكرة وراء موقع CSS Layout أنه يستعرض عليك مجموعة كبيرة من العناصر التي تحتاجها دائما في صفحة الويب، ثم يقوم بطرح التشكيل الخارجي او الـ Layout الخاص بها. يمكنك فقط نسخ الـ HTML و الـ CSS الخاص بها، ويمكنك الآن البدء في صناعة المحتوى الداخلي لعنصر الويب. 5 - مكتبة Chart.cssإن واجهتك مهمة صناعة الـ Charts والتخطيطات باستخدام الـ CSS، فلا تترك الارتباك يتغلب عليك، لأنه يوجد طريقة سهلة للغاية يمكنك من خلالها تحقيق ذلك، وهي الاستعانة بمكتبة Chart.css التي تجلب الكثير من النماذج الخاصة بالمخططات التي يمكنك تجسيدها فقط عبر نسخ كود الـ CSS خاصتها. تقنيا، من اجل إظهار البيانات عليها بشكل فعلي، يجب عليك الاعتماد على مكتبات Javascript من بينها أيضا مكتبة Chart.js . لكن، إن كنت تريد فقط الإشارة إلى تصميم على شكل مخطط دون تضمينه لأي بيانات، فيمكنك فعلها عبر هذه المكتبة. استخدامها سهل للغاية، فور تضمينها، قم بنسخ الكود الملائم لنوع الـ Chart، وستظهر مباشرة. سيمكنك التحكم في خصائص أخرى كالألوان والشكل ( مثلثة، مربعة، ثلاثية الأبعاد، أفقية، عمودية ...) . مصطلحات برمجية : ما هو الـ API ؟ 6 - مكتبة Pretty Checkboxأثناء صناعة الـ Forms في صفحة الويب، فإن واحدة من الأشياء التي قد تتعامل معها هي الـ Checkbox و الـ Radiobuttons. وهي عناصر ضرورية نوعا ما. لكن مشكلتها أن الخيارات التقليدية الخاصة بها ذات ستايل عضيف للغاية. لذلك نقترح عليك مكتبة Pretty Checkbox. تسمح لك مكتبة Pretty Checkbox بجلب مجموعة كبيرة جدا من الستايلات المختلفة التي يمكنك إدراجها لعلامتي الـ Radiobuttons و Checkbox بسهولة كاملة، يكفي اختيار التنسيق الذي تريده من الصفحة الرسمية، ثم قم بإضافة الكلاس الخاص به بعد تركيب المكتبة بالطبع. 7 - مكتبة Vivifyقم بجلب بعض الحياة والحركة إلى صفحات الويب الخاصة بك بإضفاء بعض الإنيميشن المختلفة على عناصر الصفحة. ولفعل ذلك، لا يوجد ما هو أفضل من مكتبة Vivify لتحقيق هذا الأمر. في الحقيقة، يوجد مكتبات أخرى مثل Animate.css، لكن نرى أن Vivify لديها عدد أكبر وأكثر احترافية من ستايلات وحركات الأنيميشن المعتادة. قم بإدراج المكتبة أولا في مشروعك، سواء بتحميلها أو بإدراجها على شكل CDN، واستخدامها ولا أسهل. فقط قم باختيار الانيميشن التي تريد إدراجها من صفحة المشروع الرسمية، ثم بعدها قم بإدراج اسم الكلاس الخاص به داخل الأنيميشن، وسيتم تفعيلها. يوجد العشرات من أشكال الأنيميشن المختلفة التي يمكنك الاستمتاع في تجربتها. موقع Free For Dev ... جنة المبرمجين 8 - فريموورك Bulmaهي ليست مكتبة بالفعل بل Framework أشبه بالـ Bootstrap او Tailwind، لكنه خفيف للغاية. اعتدت شخصيا الاعتماد عليه في بعض المشاريع، والسبب الذي دفعني لاستخدامه هو نظام الـ Layout او التقسيم الخاص به، الذي يمكنه أن يجعل موقع ويب بالكامل متجاوب بالاعتماد على أقل عدد من الأكواد. لكن، بعد اعتماد الـ Flexbox و الـ Grid تخليت عن Bulma. هذا لا يعني أنه سيئ، بل في الحقيقة جيد، يجلب مجموعة تصميمات جذابة لباقي عناصر صفحة الويب. من أهم إيجابياته على الإطلاق أنه أخف من أي Framework آخر، فإن كنت تأبه بشأن سرعة تحميل موقعك، فهذا الـ Framework بديلك المثالي لصناعة أفضل صفحات الويب باحترافية. تقنيات برمجية يمكنك تعلمها في 24 ساعة 9 - مكتبة Izmirالتعامل مع الصور في صفحات الويب أمر ضروري، وإذا كنت تريد جلب بعض الستايلات القوية لتضيفها على الصور التي أضفتها في صفحة الويب، فلدينا لك المكتبة المثالية لذلك، وهي مكتبة Izmir. تجلب هذه الأخيرة حرفيا أكثر من 1000 انيميشن مختلفة ( بعد دمج مجموعة من الستايلات المختلفة ) والتي يمكن اعتمادها على الصور. لن يتطلب منك الأمر الكثير، قم فقط بإضافة المكتبة أولا فهي خفيفة، وبعدها تقوم باختيار الانيميشن والتحريكات والستايل الخاص بالصور التي تريد إدراجها. قم بنسخ اسم الكلاس وأضفه مباشرة على الصور. اخترنا لك Izmir لكونها الأفضل بين المنافسين، يوجد مكتبات أخرى مثل Imagehover لكنها تجلب أنيميشن تقليدية للغاية. 10 - موقع 30SecondofCodeموقع Second of Code 30 هو موقع يأتي ليساعدك في صناعة موقع ويب وتصميمه بشكل سريع. الفكرة كاملة وراء الموقع أنه يقوم بتصميم مجموعة كبيرة من التصميمات الخاصة بعناصر صفحة الويب. فمثلا لو أردت عنصر Input جاهز بستايل مميز، يمكنك أن تجده في الموقع. ثم يضع الموقع بين يديك إمكانية الحصول عليه بشكل مجاني عبر نسخ كود الـ HTML و الـ CSS، ثم بعدها نسخه إلى مشروعك، وسيتم إضافتها مباشرة. الهدف من الموقع تسهيل التصميم على مطوري مواقع الويب. |
| أفضل الكورسات من Coursera عليك مشاهدتها حاليا Posted: 06 Feb 2022 04:14 AM PST ما الكورسات التي ستتابعها في شهر فبراير؟ من الضروري في كل شهر أن تتعلم مهارات وتقنيات جديدة، خصوصا المهارات التي يمكن استغلالها في المسار المهني، ومساعدتك في الحصول على عمل في في مجال الـ IT. ومنصتنا المفضلة للحصول على أفضل الكورسات المهنية التي يمكنك اعتمادها هي منصة Coursera. تجلب منصة Coursera بين الحين والآخر مجموعة كورسات مفيدة ليبتابعها المستخدم، خصوصا أنها تكون مقدمة من مصادر مهنية واحترافية مثل: شركات مثل Google و IBM و Facebook، أو من جامعات عالمية مثل جامعة ميشيغان أو سان فرانسيسكو والمزيد. فإليك مختاراتنا لأفضل الكورسات مقدمة من شركة Coursera. التخصص في مجال الـ Blockchain - مقدمة من جامعة Buffalo يدعم ترجمة بالعربيةالبلوكتشين (Blockchain) من التقنيات التي غيرت مفهوم الإنترنت بشكل جدي، فهو اختراع أشبه باختراع الإنترنت بحد ذاته. بالرغم من ذلك، معظم الأشخاص لا يفهمون ما هو البلوكتشين وكيف يعمل ولما هو بهذه الأهمة في السنوات الأخيرة. فبادرت جامعة Buffalo في نيويورك الأمريكية بتقديم مسار كامل ليس لفهم البلوكتشين فحسب، بل التخصص فيه والحصول على شهادة في البلوكتشين (Specialization). من خلال هذا المساق، سيتفهم أولا مجموعة من المفاهيم المختلفة المتعلقة بالبلوكتشين، مثل العقود الذكية و فهم طريقة عمل الـ Transactions وعملية الإرسال داخل شبكة بلوكتشين. واكتساب المبادئ الأولية المتعلقة بالـ Blockchain أساسا. ثم ينتقل معك الكورس إلى مفاهيم أكثر تعقيدا مثل فهم ميكانيكية عمل البلوكتشين، وكيفية بناء وتصميم برمجيات لامركزية (Decentralized) تعتمد على العقود الذكية، والإنتقال حتى لبناء مشاريع ضخمة على شبكة البلوكتشين. الكورس متاح بترجمة باللغة العربية، ويمكن إنهائه في ظرف 4 أشهر بمعدل 4 ساعات أسبوعيا، ويمكن تقليص المدة لشهر واحد فقط بزيادة عدد المشاهدات الأسبوعي، لكون الكورس ذو ساعات متابعة مرن للغاية. رابط الكورس: من هنا البايثون للجميع - مقدم من جامعة ميشيغان - ترجمة عربيةتزداد شهرة لغة البرمجة بايثون يوما بعد يوم، خصوصا في العالم العربي التي تقريبا توجه كل المطورين إلى التطوير باستخدام لغة البرمجة بايثون. فنضرب لك موعدا لتعلم البايثون هذه المرة بشكل أكاديمي للغاية عبر مساق مقدم لك من خبراء من جامعة ميشيغان الأمريكية، مع الحصول على شهادة في الأخيرة تتبث احترافك للغة البرمجة بايثون. يبدأ معك هذا الكورس بشرح لغة البرمجة بايثون وامتيازاتها وسلبياتها، ولما يجب عليك اختيار البايثون في المساق المهني على حساب لغات برمجة أخرى. ثم تبدأ في تنصيب لغة البرمجة بايثون وكتابة أول برنامج لك باستخدامها، ثم الإنتقال إلى الأساسيات العادية التي وجب تعلمها ( المتغيرات، الدوال، الشروط، الحلقات التكرارية، الكلاسات ....). ستعتمد على تقنيات متقدمة لاحقا مثل ربط قواعد بيانات ببرنامج بايثون والبرمجة كائنية التوجه في البايثون والمزيد. الكورس متاح للمبتدئين كليا الذين سواء كانو مبتدئين في البرمجة عامة أو البايثون خاصة. بمتابعة المساق 3 ساعات أسبوعيا يمكنك إنهائه في ظرف 8 أشهر، مع فرصة إكماله في وقت أقصر بكثير بزيادة عدد ساعات الكتابعة الأسبوعي. ولا ننسى أن الكورس يدعم اللغة العربية في خيارات الترجمة. رابط الكورس : من هنا احترف مجال علوم البيانات مع شهادة مهنية - مقدمة من IBM - يدعم العربيةعلوم البيانات او الـ Data Science من المجالات التي قد لا يهتم بها الكثيرون، لكن في الشركات الكبرى، فهي كل شيئ. يمكنك أيضا استخدام علوم البيانات لصالحك الشخصي لتجميع البيانات مثلا وتحليلها والخروج بنتائج يمكن بيعها لاحقا لشركات أو أشخاص مهتمين بها. تقدم لك شركة IBM المختصة في هذا المجال كورس كامل لتعلم بل واحتراف علوم البيانات (Data Science) عبر مساق احترافي مقدم من خبراء الشركة، وتحظى بنهاية المساق أيضا بشهادة مهنية مقدمة من Coursera و IBM معا. كما لا تتطلب منك أي خبرات سابقة لأخذ هذا المساق. ما الذي ستتعلمه من خلال هذا الكورس؟ ستبدأ أولا بفهم ما هي علوم البيانات، وما المهمات التي يتم توكيلها لشخص خبير في مجال علوم البيانات وهدفه ومسؤولياته. بعدها البدء في التعامل مع اللغات البرمجية المستخدمة في المجال ( مثل Java, SQL ...) ومكتبات تنشط في هذا المجال (مثل Pandas و SciPy ..)، والتعامل مع أدوات وتقنيات أخرى مثل (Oracle, PostgreSQL ...). ثم صقل مهاراتك عبر تجميع البيانات وتحليلها وإظهارها على شكل مخططات (Visualization) والمزيد. حتى أنك ستتعامل مع التعلم العميق والتعلم الآلي و خدمات أخرى مثل RStudio. الكورس متاح للمبتدئين بالمناسبة وحتى الاحتراف، ويمكن استكماله في ظرف 11 شهر بمعدل 3 ساعات أسبوعيا مع إمكانية تقليص المدة بزيادة عدد الساعات الأسبوعي. ولا ننسى أنه متاح باللغة العربية كترجمة للفيديوهات. رابط الكورس : من هنا
دليك الكامل صوب الـ DeFi مستقبل الدفوعات الرقمية - مقدم من جامعة Dukeتبعا للكورس الأول المتخصص في البلوكتشين، نقترح عليك كورس ثانوي من جامعة Duke متخصص في في شرح تقنيات إدارة الأموال اللامركزية او الـ Decentralized Finance والتي يتم اختصارها بـ DeFi مقدمة لك من جامعة Duke الأمريكية. هذا المساق لا يدعم الترجمة باللغة العربية في الوقت الحالي بالمناسبة. ستتعلم في هذا المساق تعلم أولي لكن عميق لكل شيئ متعلق بالخدمات اللامركزية (Decentralized) وفهم ما هي لامركزية الخدمات، ثم بعدها التخصص في فهم لامركزية الخدمات الرقمية (DeFi). ستأخذ درسا إضافيا وممل قليلا عن تاريخ ظهورها أيضا، قبل أن ينتقل معك الكورس لشرح مفاهيم أكثر تعمقا وكيف تعمل الخدمات والمدفوعات اللامركزية، وحتى كيف يمكن صناعة خدمتك المالية ( كعملة مشفرة، او بروتوكول للعقود الذكية، أو حتى صناعة Digital Signature خاصة بك ). الكورس لا يدعم الترجمة بالعربية حاليا، لذلك من الضروري أن تجيد الإنجليزية قبل الخوض في غمار المساق. يمكن استكماله في 4 أشهر بمعدل ساعتين أسبوعيا، مع زيادة المدة بزيادة ساعات المشاهدة الأسبوعي. رابط الكورس: من هنا كيف تصبح مطور Full Stack Developer محترف - مقدم من IBM - يدعم ترجمة عربيةنختم معك بكورس كامل لتصبح مطور Full Stack Developer مقدم لك من شركة IBM. الكورس يهدف إلى تعليمك كل الأساسيات التي ستحتاجها لتطوير مواقع الويب على الواجهتين Front End و Back End باعتماد تقنيات محددة. ستحظى بنهاية المساق أيضا بشهادة من شركة IBM تتبث تعلمك لتقنيات تطوير مواقع الويب. في هذا المساق، ستبدأ أولا بتعلم الأساسيات الأولية لتطوير صفحات الويب والواجهات مثل HTML, CSS, Javascript, React و Bootstrap مبدئيا. ثم الإنتقال إلى العمل على إطارات ومكتبات مثل Express, Nodejs, Python Django وغيرهم. أما الأفضل، فهم الاعتماد على خدمات سحابية في تطوير المشاريع والتي تضم استخدام تقنيات مثل Kubernetes و Serverless و Microservices. ثم في الأخير تحقيق النتيجة النهائية وهي صناعة موقع ويب متكامل. الكورس متاح للمبتدئين كليا دون الحاجة لأي نوع من الخبرات السابقة، ويمكن إنهائه في ظرف 13 شهر بمعدل 3 ساعات أسبوعيا، مع إمكانية تقليصه بشكل كبير حتى شهرين أو أقل بزيادة ساعات المشاهدة الأسبوعي. ولا ننسى أنه يدعم الترجمة باللغة العربية. رابطا لكورس: من هنا |
| You are subscribed to email updates from أكوا ويب | الشامل لرواد الويب. To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google, 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States | |
تعليقات
إرسال تعليق