أسامة زيادة
-
المساهمات
2501 -
تاريخ الانضمام
-
تاريخ آخر زيارة
-
عدد الأيام التي تصدر بها
6
نوع المحتوى
ريادة الأعمال
البرمجة
التصميم
DevOps
التسويق والمبيعات
العمل الحر
البرامج والتطبيقات
آخر التحديثات
قصص نجاح
أسئلة وأجوبة
كتب
دورات
كل منشورات العضو أسامة زيادة
-
يمكنني نصحك ب 3 كتب موجود بالأكاديمية مفيدة جداً في تطوير واجهات المستخدم وهي :- أولاً كتاب مدخل إلى تجربة المستخدم (User Experience - UX) يمكنك الاطلاع عليه من هنا ، حيث يضعك هذا الكتاب على أعتاب عالم تصميم تجربة المُستخدمين UX، وهو علم له قواعده وأصوله وأدواته، ويهدف إلى تعريف القارئ المُبتدئ بأساس هذا العلم وكيف يُطبّق على المُنتجات الرّقمية من مواقع ويب خدميّة وتطبيقات على الأجهزة الذّكية وصولًا إلى التّصميم الأمثل الّذي يُوفِّق بين هدف المُستخدم أوّلًا وهدف الخدمة التّجاريّ، الأمر الّذي يعني منتجًا ناجحًا. ثانياً كتاب نحو فهم أعمق لتقنيات HTML يمكنك الاطلاع عليه من هنا ، حيث يقدم هذا الكتاب مفاهيم HTML5 وتقنياتها وطرائق استخدامها إلى القارئ العربي، مدعمًا بأمثلة علميةٍ تسهّل توضيح الأفكار، وحاولتُ فيه توفير أحدث المعلومات عن دعم تلك التقنيات قدر المستطاع، وأعدت النظر في بعض الفصول لتناسب التغييرات التي طرأت حديثًا. ثالثاً كتاب التحريك عبر CSS يمكنك الاطلاع عليه من هنا ، حيث يشرح الكتاب مفهوم الحركة وكيفية تحريك العناصر باستخدام CSS فقط بدءًا من الحركات البسيطة وحتى الحركات المعقَّدة المُتقدِّمة بالإضافة إلى التَطرُّق إلى مناقشة مسألة متى يجب إضافة الحركات ومتى يجب الابتعاد عنها. أيضاً يمكنك الاستفادة من موسوعة حسوب في تطوير واجهات المستخدم حيث يوجد بها شروحات لعدة تقنيات يمكنك الاستفادة منها في تطوير واجهات المستخدم . -
يوجد في الأكاديمية مقالات متعددة ومختلفة في قسم دروس ومقالات ، سوف تجد مقالات لعدّة أقسام مثل :- ريادة الأعمال العمل الحر التسويق والمبيعات البرمجة التصميم DevOps البرامج والتطبيقات الشهادات المتخصصة أيضاً يوجد في الأكاديمية عدّة كتب مختلفة يمكنك النظر إلها من هنا حيث توجد كتب مختلفة ومفيدة يمكنك الاستفادة منها بشكل كبير . أيضا ضمن المحتوى المقروء ممكن أن تجد أسئلة وأجوبة مفيدة لعدّة أسئلة ومختلفة الأقسام يمكنك أن تنظر إليها من هنا
-
قم بوضع هذا الكود في أسفل صفحة HTML حتى تعمل المكتبة . بعد تضمين المكتبة <script type="text/javascript"> AOS.init(); </script> وحاول حذف الخاصية من الكلاس p2 ، لأن سبب اختفاء الصورة من الخاصية وتعديل التنسيقات جيداً position: absolute;
-
هل يمكنك وضع الأكواد البرمجية التي تتوقع بها المشكلة ، حتى أستطيع مساعدتك
-
كود الجافا سكربت صحيح ولا يوجد به أي أخطاء ، لكن المشكلة لديك هي عدم وضوح وسم <body> فقط قوم بإضافة أي وسم داخل وسم <body> وقوم بالضغط في أي مكان لديك وسوف تظهر الجملة في console مثلاً كتالي :- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Click Here</h1> <script src="main.js"></script> </body> </html> وبعدها قوم بالضغط، وسوف تظهر لديك الجملة . أو يمكنك إضافة خصائص css إلى وسم <body>، حتى يصبح الوسم واضح . <body style="white:100%; height:500px; background-color:red;">
-
target هو عبارة عن في لغة الترميز HTML ويستخدم مع بعض الوسوم مثل <form> و <base> و <area> و <a> . وبناء الجملة (Syntax) يكون كتالي مع ملاحظة استخدام قيمة واحدة فقط :- <form target="_blank|_self|_parent|_top|framename"> وله عدّة دلائل فمثلاً <a href="https://academy.hsoub.com/" target="_blank">Show</a> القيمة "target="_blank سوف يتم فتح الصفحة الأكاديمية في علامة تبويب جديدة . <a href="https://academy.hsoub.com/" target="_self">Show</a> القيمة "target="_self سوف يتم فتح الصفحة الأكاديمية في نفس الصفحة وتعتبر القيمة الافتراضية . <a href="https://academy.hsoub.com/" target="_parent">Show</a> القيمة "target="_parent سوف يتم فتح الصفحة الأكاديمية في الإطار الأصلي (إطار أو علامة تبويب أو نافذة) ، وفي حال لم يحدد الإطار فسوف يتم عرض الصفحة في الإطار الحالي . <a href="https://academy.hsoub.com/" target="_top">Show</a> القيمة "target="_top سوف يتم فتح الصفحة الأكاديمية في الإطار العلوي والذي يكون دائمًا علامة تبويب / نافذة المتصفح الكاملة ، وفي حال لم يحدد الإطار فسوف يتم عرض الصفحة في الإطار الحالي . <a href="https://academy.hsoub.com/" target="framename">Show</a> القيمة "target="framename سوف يتم فتح الصفحة الأكاديمية في الإطار المحدد وقيمته هي اسم إطار iframe.
-
المشكلة لديك في مكان الفاصلة المنقوطة في ملف style.css كما تلاحظ في ليست بعد نهاية التنسيق بل بعد القوس ، في التنسيقات المعطى .projects .content { margin-top: 30px}; // هنا .content .project-card { background-color: aliceblue; border: solid 1px white; min-height: 14em; width: 23em; } يجب عليك إصلاحها لتالي .projects .content { margin-top: 30px; } .content .project-card { background-color: aliceblue; border: solid 1px white; min-height: 14em; width: 23em; }
-
سبب في مشكلة scroll هو حجم width المعطى لعدّة عناصر، لذلك عليك حذف التسيق width: 100vw; من تسبيقات header و الكلاس hero . لتصبح كتالي header { display: flex; height: 3rem; justify-content: space-between; align-items: center; padding-left: 5rem; padding-right: 5rem; } .hero { margin-top: 5rem; display: flex; justify-content: space-around; align-items: center; } وتنسيق margin-left: 5rem; من الكلاسinfo الخاص بالتنسيقات بصفحة Contact ليصبح الكتالي .info { width: 100%; margin-top: 3rem; } ولجعل قسم hero في المنتصف يمكنك عمل التالي ، أولاً نضيف كل عناصر التي داخل section في div جديد ونعطيه التنسيق margin: 0 auto; كتالي <section class="hero"> <div style="margin: 0 auto;"> <div class="left-part"> <!-- <div class=""><hr /></div> --> <h1>Buy the best Scooter ever</h1> <p>A scooter or motor scooter is a motorcycle with an underbone or step-through frame and a platform for the rider's feet, emphasizing comfort and fuel economy.</p> <div class="line"> <hr /> </div> </div> <div class="right-part"> <div class="shape"></div> <img src="./images/IMG_9593.PNG" height="300px" width="300px" alt="" /> </div> </div> </section> ثم في css نقوم بإعطاء التنسيقات التالية للكلاسات left-part و right-part .left-part { width: 50%; float: left; } .right-part { width: 50%; float: right; } //لتحريك الصورة نحو اليمين .right-part img { float: right; }
-
وعليكم السلام هل يمكنك إرفاق الكود الذي تتوقع به المشكلة ، حتى أستطيع مساعدتك .
-
وعليكم السلام في الدورة المسارات تعتمد على بعضها البعض ، لذلك عليك أن تكون على فهم ودراية في الجزئيات الأولى قبل الانتقال على أي مسار آخر ، حتى تستطيع إتقان تطوير الواجهات . كنصيحة لك و الأفضل أن تقوم بإعادة الأمور التي لديك مشاكل فيها وفهمها جيداً وعدم تجاهلها ، حتى لا تواجه مشاكل في المستقبل أثناء تصميم المواقع . الدورة لديك مدى الحياة والوصول لها في أي وقت لذلك يمكنك الرجوع إلى المسار الذي تواجه به مشاكل وإعادته جيداً ، حتى لو كان بشكل بطيء لفهم الأكواد المكتوبة ، لأن كل ما يذكر في الدرس مفيد ، وهنا سوف تزيد نسبة فهمك لأكثر من 60% وسوف يكون فهم المسارات القادمة سهل عليك ولن تشعر بأنها صعبة لأنه أصبح لديك خلفية جيدة عن أساسيات التصميم .
- 1 جواب
-
- 1
-
-
يمكنك أن تقوم بتنزيل ملفات المكتبة من هنا ومن ثم وضع ملف الأيقونات الخاص بـ css التي تريد استخدامها في ملفات مشروعك ، وتضمينه في صفحة html ، مع العلم أن ليست كل الأيقونات Free .
-
يمكنك إضافة هذا cdn الخاص بأيقونات font awosome في head <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> وبعدها أخبرني هل سوف تعمل الأيقونات
- 5 اجابة
-
- 1
-
-
لإظهار التنسيقات مثل النموذج نعمل كتالي :- أولا نصلح تقسم div الثلاثة الموجودة داخل section المعطى كلاس services ، نقوم بإعطاء الكلاس col-md-4 لجميع div بدلا من col-md-6، col-md-4 ، col-md-4 <div class="col-md-4"> </div> ثم نصلح الصورة ونقوم بإعطائها width="100%" بهذا الشكل <div class="col-md-4"> <div class="women"> <img src="images/temp/woman.jpg" width="100%"> </div> </div> ثم قمت بإعطاء كلاس services-text الى div التي تحتوي على العنوان والنبذة بهذا الشكل <div class="services-text flex-grow-1 ms-3"> <h5 class="mt-0 text-left"> EASY CUSTOMIZATION </h5> <p class="mb-2 text-left"> Seamlessly restore client-focused potentialities rather than functional strategic theme areas. </p> </div> وفي css قمت بإعطائه التنسيق التالي .services-text{ margin-left: 30px; } أما بخصوص الأيقونات لإظهارها باللون الأحمر قمت بإعطائها الكلاس services-icon لأستطيع الوصول لها بشكل صحيح <i class="fa-solid fa-screwdriver-wrench fa-2x services-icon" aria-hidden="true"></i> ثم في css قمت بإعطائه التنسيق التالي .services-icon {color: red;} وهكذا تصبح التنسيقات مثل التي بالصورة
- 5 اجابة
-
- 1
-
-
يوجد لغات برمجة عربية لكنها غير مشهورة ولا تدعم الكثير من المنصات وتكاد تعتبر غير مفيدة لأن البعض من أصبحها توقفوا عن تطويرها . لغات برمجة عربية عمورية – لغة عربية مفتوحة المصدر، غرضية التوجه، لوغو العربي – لغة برمجة عربية مبنية على لغة لوغو. ج – لغة برمجة عربية تعتمد على صياغة مشابهة للغة C++ مع إمكانيات رسومية. لغتي لغة برمجة عربية متعددة الأهداف لها نسقها الخاص. العنقاء - لغة برمجة عربية إجرائية مشابهة للغة C. كلمات - لغة برمجة عربية مشابهة للغة C. لغة زاي - بيئة عربية لتعليم المبتدئين البرمجة بلغة زاي حيث تعتبر اللغة الإنجليزية هي اللغة السائدة والمهيمنة في عالم التقنية والتي تُدرس و تنبى بها التقنيات و تكتب بها المقالات والأبحاث العلمية ، أيضاً هناك لغات مثل لغة windev يمكن أن تقوم بالبرمجة بها باللغة الفرنسية ، حيث يوجد كثير من اللغات الغير إنجليزية لكن ليست معرفة كون اللغة الإنجليزية هي اللغة الرائدة والسائدة في العالم كـكل .
-
أولاً لنقوم بمعالجة المشاكل التي تتعلق في الوصول إلى ملف style.css والصور الطريقة الصحيحة للوصول لملف style.css كالتالي <link rel="stylesheet" href="css/style.css"> بدلاً من ، كون لا يوجد ملف New folder (3) داخل ملف css , images <link rel="stylesheet" href="../New folder (3)/css/style.css"> وكذلك الصور الطريقة الصحيحة هكذا . <img src="images/bakery-light-1.png" alt="img"> أما فيما يتعلق في جعل navbar تأخذ القيمة fixed كالتالي ، نذهب لملف style.css ونعطي الكلاس navbar الخاصية position:fixed nav .navbar{ width: 70%; position: fixed; } ثم لنعطيه خلفية سوداء بعد التحرك في scroll للأسفل ، أولاً لنقوم بتضمين jquery هكذا في أسفل الصفحة . <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </body> </html> ثم نضيف الكود البرمجي التالي <script type="text/javascript"> $(window).scroll(function () { if ($(window).scrollTop() > 400) { $(".navbar").css("background-color","black"); } else { $(".navbar").css("background-color","rgba(16, 22, 54, 0.2)"); } }); </script> لك الحرية في وضعه أسفل الصفحة أو إضافته في ملف جافا سكربت خاص مع الوصول للملف بشكل صحيح .
-
أولاً المكتبة Library ، المُسمى مُقتبس من المكتبة الاعتيادية للكتب من خلال المكتبة تستطيع الوصول للكتاب الذي تريده بسهولة ضمن مخطط مُسبق لكيفية الوصول لمحتويات المكتبة. مثال: لديك مجموعة من الدوال/الوظائف للقيام ببعض العمليات الرياضية كالضرب والجمع والطرح والقسمة إلخ... ستجمع كل تلك الوظائف تحت مسمى مكتبة للعمليات الرياضية ويُمكن توسعة المكتبة وإضافة المزيد والمزيد لها تبعاً. ثانياً FrameWork إطار العمل ، هو مجموعة مكتبات/برمجيات المُستخدمة في بناء الهيكل البرمجي لتطبيق ما وتخضع تلك البرمجيات لأسلوب موحد في العمل ضمن منهجية إطار العمل وتستخدم تلك التعليمات بشكل مُتكرر لبناء هيكل التطبيق في كل مرة نريد البدا في بناء تطبيق جديد وتساعدنا في عدم إضاعة الوقت في بناء تلك الوحدات في كل مرة نكون بحاجة لبناء تطبيق جديد ويُتيح إطار العمل توسعته وتطويره عبر إضافات ليتسع لمهام جديد غير مُضمنه به مُسبقاً ويكون مُهيأ بربطه للعمل مع مكتبات خارجية تؤدي وظائف أخرى. يلعب كل من المكتبات - Libraries وإطار العمل - Frameworks دورًا حيويًا في تطوير البرمجيات، وتقوم المكتبة بعملية معينة أو محددة بشكل جيد، بينما يوفر إطار العمل هيكلًا عظميًا، حيث يقوم المبرمجون بتعريف محتوى التطبيق للعملية.
- 2 اجابة
-
- 3
-
-
-
لا ، لن تستطيع إنشاء مواقع الويب من خلال دورة علوم الحاسوب ، لأن محتوى ومسارات الدورة لا يقدم تطوير مواقع الويب ، من خلال دورة علوم الحاسوب يمكنك التعرف على عدّة أمور إن كنت مبتدئ في البرمجة مثل :- مدخل إلى علوم الحاسوب أساسيات البرمجة أنظمة التشغيل ونظام لينكس قواعد البيانات إلى عالم الويب البرمجة كائنية التوجه الخوارزميات وبنى المعطيات أنماط التصميم أما إن كنت تريد تعلم إنشاء المواقع الإلكترونية ، يمكنك التسجيل في دورة تطوير واجهات المستخدم من خلال الدورة سوف تستطيع إنشاء مواقع الويب ، يوجد في الدورة محتوى كافي يساعدك في تطوير المواقع .
-
يمكنك التواصل مع مركز المساعدة ، قم بفتح تذكرة وأخبرهم بالمشكلة وسوف يقومون بحل مشكلتك ، ومساعدتك بأفضل شكل ممكن .
-
صحيح هناك قاعدة بيانات واحدة ، ويتم الربط من خلال restful api ويكون هذا restful api مبرمج باستخدام لغات back end مثل php , python, nodejs و من ثم تكون البيانات المرجعة من api أما json , xml , و لكن الأكثر شعبية هو إرجاع البيانات بصيغة json و في لغات البرمجة المستخدمة في برمجة التطبيقات مثل Dart, Java, cordova, swift , ionic هناك مكتبات تتواصل مع apis و تتعامل مع البيانات المرجعة بصيغة json.
- 1 جواب
-
- 1
-
-
للحصول على فرصة عمل على مستقل، يجب أن تراعي عدة أمور منها:- الملف الشخصي، أولاً وقبل كل شيء يجب التأكد من استخدام اسمك الحقيقي ثم يجب عليك كتابة نبذة تعريفية عنك بأسلوب واضح وغير مبهم توصف المجال الذي تعمل به بكل دقة واحتراف في كتابة النبذة ، يمكنك وصف في النبذة مجال عملك ، وأعمال قمت بها ، وما المهارات التي تتقنها وما الخبرات التي لديك ، أيضاً يجب أن تقوم بعمل جميع التوثيقات المطلوبة مثل البريد الإلكتروني ورقم الهاتف والهوية الشخصية . معرض الأعمال، يجب الاهتمام جيداً في معرض الأعمال ، بحيث تعرض أعمال لديك بصور ذات جودة عالية وجذابة وكتابة تفاصيل العمل . تقديم العرض، عند تقديم عرض لمشروع لا تقوم بكتابة أي كلام عبثاّ بل أوصف مهاراتك والأعمال المشابهة التي قمت بها . يُمكنك الاطلاع على: دليل المستقلين يوجد هنالك عدة مقالات مفيدة لك، كما بإمكانك الاطلاع على بعض الكتب و المقالات أيضاً التي نشرتها الأكاديمية هنا على المنصة: مقالات العمل الحر كتب العمل الحر
-
لا أعلم التنسيقات الأخرى المعطى للكلاس لكن هنا في الحالة لديك تتم الإزاحة من الأسفل كون أن قيم الخاصية background-position كالتالي 0 من الشمال (left) و %2.5 من الأسفل (bottom). في حال أردت الإزاحة من الأعلى يمكنك تنفيذها بهذا الشكل background-position: left 0 top 2.5%; يمكنك من الإطلاع حول الخاصية background-position من هنا
-
وعليكم السلام عند ملاحظة التنسيقات أرى أنك مستخدم تدرج لوني كخلفية بقيمة الخاصية التالية background-image: linear-gradient(#fff 50%, #2176fd 50%); لذلك عند إعطاء القيمة 2,5% للخاصية background-position نلاحظ حدثت إزاحة gradient مما تسبب ظهور اللون الأزرق المعطى كخلفية . لتعامل مع تنسيقات الخلفيات في css يمكنك الاطلاع على المقالة التالية:- يوجد في موسوعة حسوب عدّة شروحات حول الخاصيات التالية: position و background-position و background-image . هذا ما لاحظته لسبب ظهور اللون الأزرق من الصورة المرفقة ، لو أمكنك إرفاق الكود الذي به المشكلة لرؤيته بوضوح حتى أستطيع مساعدتك .
-
أنا اشتغل لدي carousel بعد تضمين jquery في الملف html ، بعد اتباع الخطوات التي عرضتها لك في الأعلى ، ما الأخطاء التي تظهر لديك في console حتى أستطيع مساعدتك ، يمكنك من فتح console من خلال الضغط بالزر الأيمن للفأرة على أحد عناصر صفحة html و وسوف تظهر لديك قائمة ، في نهاية القائمة اختار (فحص) وبعدها سوف تفتح لديك في أسفل الصفحة أو بجانب الصفحة اضغط على تبويبcarousel وسوف تظهر لك الأخطاء .
-
يبدو أنك قمت بإنشاء carousel بشكل خاطئ ، الطريقة الصحيحة لإنشاء carousel كالتالي أولا في html نقوم بإضافة أكواد carousel <div id="gallery1"> <div id="#carousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-75" src="./images/first round/fr-1.jpg" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="./images/first round/fr-2.jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="./images/first round/fr-3.jpg" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> ثانياً بعد إضافة الأكواد يجب التأكد من تضمين مكتبة bootstrap , jquery بهذا الشكل css <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> js ، ملاحظة تضمين jquery يجب أن يكون قبل تضمين bootstrap <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> ثالثاً في ملف Javascript تقوم بإضافة الأكواد التالية ،و يجب الانتباه بدون تضمين jquery لن تعمل أكود Javascript $(document).ready(function () { $('.carousel').carousel({ interval: 2000 }); });