لوحة المتصدرين

ما نصائحكم لايجاد وحل مشاكل css

لقد بدأت حديثا في حسوب دراسه تطوير واجهات المستخدم و سمعت بالذكاء الاصطناعي عن ChatGPT هل سيقتل هذا الذكاء المبرمجين الصغار او استمر في التعلم

ابغا اسوي امر انه اذا ضغظت مثلا انتر من الكيبورد يسوي امر مثلا الذهاب الى صفحة اخره

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

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

يمكنك إلغاء خاصية الـ Snap to Point في Adobe Illustrator عن طريق القيام بالتالي: اختاري أداة Selection Tool من شريط الأدوات. اضغطي على مفتاح الـ Ctrl (أو Cmd على Mac) واضغطي على زر "K" على لوحة المفاتيح. سيتم فتح نافذة Preferences. في النافذة المفتوحة، انتقلي إلى القائمة الجانبية على اليسار واختاري "Selection & Anchor Display". تحت "Snap to Point"، قومي بإلغاء تحديد الخانة المجاورة لها. انقري على "OK" لحفظ التغييرات. بهذا، يتم إلغاء خاصية الـ Snap to Point ويمكنك الآن تحريك الأشكال دون تقييد في الحركة داخل نطاق معين.

بجانب ما تم ذكره، فهناك بعض التوضحيات التي يجب ذكرها: يتم استخدام خاصية float لتحقيق تصميمات متعددة، مثل إنشاء صناديق أو عمودين يمتدان بجوار بعضهما البعض، وكذلك تقسيم الصفحة إلى أجزاء متعددة مع تحريكها بشكل مستقل. بالإمكان تحديد قيمة الخاصية float على اليسار أو اليمين، ويتم تحريك العنصر إلى تلك الجانب، بحيث يتم إضافة العنصر التالي على نفس الجانب إذا كان متاحاً. ويمكن استخدام خاصية clear لإزالة الخاصية float عند نهاية عنصر معين، والتأكد من أن العنصر التالي يظهر بشكل صحيح في المكان المطلوب. من المهم الاهتمام بالترتيب الصحيح للعناصر المطفوة، حيث يمكن أن يؤدي الاختلاط بين العناصر المطفوة وغير المطفوة إلى أخطاء في تصميم الصفحة، وتحديداً في تواجد العناصر النصية والصور في الأماكن المطلوبة. يجب تجنب استخدام خاصية float بشكل كبير، حيث يمكن أن تؤدي إلى مشاكل في التصميم مثل فراغات غير متوقعة بين العناصر، وكذلك صعوبة التعامل معها في تصميم المواقع المتجاوبة. وإليك أمثلة على ما تم ذكره: 1- تصميم صندوقين على جانبي الصفحة باستخدام float: <div style="float:left;width:50%;">Box 1</div> <div style="float:right;width:50%;">Box 2</div> 2- تحديد الخاصية float على اليمين: <img src="example.jpg" style="float:right;"> 3- استخدام خاصية clear لإزالة الخاصية float: <div style="float:left;width:50%;">Content</div> <div style="clear:both;"></div> <div>Next content</div> 4- ترتيب العناصر بشكل صحيح عند استخدام float: <div style="float:left;">Image</div> <div style="float:right;">Text</div> <div style="clear:both;"></div> 5- تجنب استخدام float بشكل كبير واستخدام التقنيات الحديثة مثل Flex و Grid: <div style="display:flex;"> <div style="flex:1;">Content 1</div> <div style="flex:1;">Content 2</div> <div style="flex:1;">Content 3</div> </div> كما أشرت، فاستخدام خاصية float يمكن أن يسبب بعض المشاكل مثل التداخل مع عناصر أخرى في الصفحة، ويمكن تجنب هذه المشاكل عن طريق استخدام الخيارات الأخرى المتاحة. ومع ذلك، فإن الخاصية ما زالت مفيدة في بعض الحالات، ويجب على المصممين الويب فهم كيفية استخدامها بشكل صحيح وفقًا للحاجة. وأنصحك بقراءة النقاشات التالية، فهي ستجيب على كافة تساؤلاتك. الخاصية float في موسوعة حسوب

يتم استخدام الخاصية float لتحديد ترتيب العناصر في تصميم الصفحات، وخاصة في ترتيب الصور والنصوص. عند تطبيق خاصية float على عنصر، يتم تحديد مكان تواجده بناء على تدفق الصفحة، ويتم تحريك العناصر الأخرى حولها، حيث يتم تحديد اتجاه التحريك عن طريق قيمة خاصية float المحددة ، كما في السنوات الأخيرة أصبح التعامل مع خاصية float قليل جداً نظراً لأنها تعمل تعويم في الصفحة واصبحت تستبدل بخاصية Flex نظراً لسهولة التعامل مع الخاصية وتوفر الكثير من المزايا . للإطلاع أكثر على خاصية float من هنا على موسوعة حسوب .

نستخدمه عندما نريد ان نجعل العناصر تطفو بجانب بعضها البعض. يطبق على الـ header فقط ولا يطبق على العناصر التي تأتي بعده، ولكن عليك استخدام الـ clear على العنصر الذي يأتيب بعده مثل : <style> div { padding: 15px; } .div1 { background: red; float: left; } .div2 { clear: left; background: yellow; } .div3 { background: green; } </style> <body> <h2>Float and clear</h2> <div class="div1">Div 1</div> <div class="div2">Div 2</div> <div class="div3">Div 3</div> </body> انصحك بنسخ الكود السابق والتعديل عليه اكثر من مرة حتى تتعرف على الـ float بشكل افضل.

لحل مشاكل CSS لابد من ان تكون متمرس بشكل جيد في استخدم الـ developer tool الخاصة بالمتصفح. بحيث تتمكن بسهولة من تغيير اعدادات CSS التي تقوم بتطبيقها على العنصر وكذلك تستطيع التأكد بسهولة من ان التنسيقات التي اضفتها تم إضافتها بنجاح للعنصر. فأغلب مشاكل CSS تأتي من وجود مشكلة في الـ selector أو من وجود تنسيقات سابقة تمنع ظهور التنسيقات الحالية، وهنالك نوع ثالث من المشاكل وهي المشاكل المتعلقة بالجهل في الية عمل CSS ولحل هذه المشكلة يجب ان يكون لديك المهارة الكافية للبحث عن المشكلة، فإذا اردت توسيط عنصر من النوع inline يجب ان تضيف للأب text-align: center بينما إذا اردت ان توسيط عنصر من النوع block فيجب ان تعطيه width ومن ثم margin: auto وهذا النوع من الحلول بحاجة لخبرة ولن تستطيع حل هذه المشاكل بدون ان تملك مهارة في البحث. فمثلاً للبحث عن المشكلة السابقة يمكن ان نكتب how to center inline elements in CSS.

تفضل هذه بعض النصائح التي قد تساعد في إيجاد وحل مشاكل CSS: ١- تحقق من صحة بنية ملف الـ CSS الخاص بك، و التأكد من عدم وجود أية أخطاء أو نقص في القواعد. ٢- تأكد من أن كل العناصر التي تريد تنسيقها تم تعيينها بالشكل الصحيح في الـ HTML الخاص بك، و تعيين الـ class أو الـ id الصحيحة لها. ٣- تأكد من أن لديك فهم جيد لترتيب العناصر في CSS، لأن هذا يعتبر جزءًا مهمًا من انشاء التصميم الصحيح. ٤- استخدم أدوات التصحيح، مثل برامج Inspect Element، و إداة التصحيح المدمجة فى محرر نصوصك لمساعدتك فى تحديد المشاكل العامة في تصميمك.

بجانب الشرح الذي وفره أحمد، سأشرح بمثال بسيط كيف يمكن إنشاء مشروع django واستخدام HTML, CSS. JS, Bootstrap في الواجهة الأمامية. 1- تنصيب Django: بعد إنشاء بيئة إفتراضية venv باستخدام الأمر python -m venv venv ثم تفعيلها باستخدام الأمر venv\Scripts\activate بعد ذلك يتم تنفيذ الأمر "pip install django" في بيئة العمل الخاصة بك. 2- إنشاء مشروع Django: تنفيذ الأمر "django-admin startproject project_name" حيث يتم استبدال project_name باسم مشروعك الفعلي. 3- إنشاء تطبيق Django: تنفيذ الأمر "python manage.py startapp app_name" حيث يتم استبدال app_name باسم التطبيق الفعلي الذي تريد إنشائه. 4- إنشاء نماذج Django: في ملف models.py، تعريف النموذج والحقول والعلاقات بينها. على سبيل المثال: from django.db import models class MyModel(models.Model): name = models.CharField(max_length=50) email = models.EmailField() phone = models.CharField(max_length=20) 5- إنشاء عرض Django: في ملف views.py، يتم تعريف العرض الخاص بك واستخدام النموذج لاسترداد البيانات من قاعدة البيانات. على سبيل المثال: from django.shortcuts import render from .models import MyModel def my_view(request): data = MyModel.objects.all() return render(request, 'my_template.html', {'data': data}) 6- إنشاء قوالب HTML: في مجلد القوالب الخاص بالتطبيق، يتم إنشاء ملف HTML الخاص بك واستخدام علامات التخصيص والمتغيرات لتحديد تخطيط الصفحة والبيانات التي ستظهر فيها. على سبيل المثال: <html> <head> <title>My Webpage</title> <link rel="stylesheet" href="{% static 'css/styles.css' %}"> </head> <body> <h1>My Webpage</h1> <ul> {% for item in data %} <li>{{ item.name }} - {{ item.email }} - {{ item.phone }}</li> {% endfor %} </ul> </body> </html> 7- إضافة CSS و JS: إنشاء ملفات CSS و JS الخاصة بك في مجلد الاستاتيك واستخدامها في ملفات HTML الخاصة بك. على سبيل المثال: <link rel="stylesheet" href="{% static 'css/styles.css' %}"> <script src="{% static 'js/main.js' %}"></script> تأكدي من تضمين المسار الصحيح لكل ملف. يمكن تخزين ملفات CSS و JS في المجلد الخاص بالتطبيق في app_name/static، أو في المجلد الخاص بالمشروع في project_name/static. 8- تعريف عناوين URL: في ملف urls.py، تعريف عناوين URL الخاصة بك وربطها بالعروض الخاصة بها. على سبيل المثال: from django.urls import path from . import views urlpatterns = [ path('', views.my_view, name='my_view'), ] الكود يعمل على تحديد العرض الذي سيتم عرضه عند زيارة العنوان URL المحدد. في المثال أعلاه، عند زيارة العنوان URL الرئيسي للتطبيق، سيتم استدعاء العرض my_view() في views.py. 9- تشغيل الخادم: تنفيذ الأمر "python manage.py runserver" لتشغيل الخادم والوصول إلى تطبيقك على المتصفح عبر العنوان http://localhost:8000/ (أو العنوان المحدد إذا تم تغييره). يمكنك التحقق من وجود أي أخطاء في سجل الأوامر خلال عملية التشغيل. إنشاء قاعدة البيانات هناك بعض الخطوات التي يجب اتباعها لإنشاء قاعدة بيانات والتعامل معها باستخدام Django: 1- تعيين قاعدة البيانات في ملف settings.py: أرجو منك تعيين قاعدة البيانات المراد استخدامها في ملف settings.py. حيث يتم تعيين اسم قاعدة البيانات ومعلومات الاتصال بها في متغير DATABASES في هذا الملف. حيث يمكن استخدام محركات قواعد البيانات مثل SQLite وMySQL و PostgreSQL، وفي هذا المثال، سنستخدم SQLite كمثال. DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': BASE_DIR / 'db.sqlite3', } } 2- إنشاء النماذج: تستخدم نماذج Django لتمثيل البيانات في قاعدة البيانات. ويمكن إنشاء نموذج في ملف models.py باستخدام ترميز Python. يتم استخدام ترميز Python لتعريف حقول النموذج ومتطلباتها وعلاقاتها بين النماذج. على سبيل المثال: from django.db import models class MyModel(models.Model): name = models.CharField(max_length=50) age = models.IntegerField() is_active = models.BooleanField(default=True) 3- إجراء التحديثات في قاعدة البيانات: تسجيل النماذج الجديدة في قاعدة البيانات عن طريق تنفيذ أمر "makemigrations" و "migrate" في وحدة التحكم. يتم استخدام "makemigrations" لإنشاء ملفات النموذج الجديدة وتطبيق التغييرات على ملفات النموذج الموجودة. ثم يتم استخدام "migrate" لتطبيق التغييرات الموجودة في ملفات النموذج على قاعدة البيانات. رpython manage.py makemigrations python manage.py migrate 4- إضافة بيانات إلى قاعدة البيانات: باستخدام منفذ الأوامر. يمكن استخدام أمر "shell" للدخول إلى وضع التفاعل مع Django وإضافة بيانات بشكل يدوي. على سبيل المثال، يمكن إنشاء نموذج MyModel وحفظه في قاعدة البيانات باستخدام الأمر التالي في وحدة التحكم: python manage.py shell >>> from myapp.models import MyModel >>> my_object = MyModel(name='John', age=30, is_active=True) >>> my_object.save() يمكن أيضًا إضافة البيانات باستخدام نماذج Django في الشفرة. على سبيل المثال، يمكن إنشاء ملفات fixtures تحتوي على بيانات المثال لتحميلها إلى قاعدة البيانات باستخدام الأمر "loaddata" في وحدة التحكم. 5- الاستعلام عن بيانات من قاعدة البيانات: باستخدام نماذج Django. يمكن استخدام الأمر "objects.all()" للعثور على جميع السجلات في جدول معين. يمكن استخدام الأمر "filter()" للعثور على سجلات محددة باستخدام معايير مختلفة. from myapp.models import MyModel # Get all records from the database all_records = MyModel.objects.all() # Get specific records from the database filtered_records = MyModel.objects.filter(name='John') 6- تعديل بيانات في قاعدة البيانات: باستطاعتك الوصول إلى سجل محدد باستخدام الأمر "get()" ويمكن تحديث حقول السجل باستخدام تعليمة "save()". from myapp.models import MyModel # Get a specific record from the database record = MyModel.objects.get(id=1) # Modify the record record.name = 'Jane' record.age = 25 # Save the changes to the database record.save() 7- حذف بيانات من قاعدة البيانات: يتم الوصول إلى سجل محدد باستخدام الأمر "get()" ويمكن حذف السجل باستخدام الأمر "delete()". from myapp.models import MyModel # Get a specific record from the database record = MyModel.objects.get(id=1) # Delete the record from the database record.delete() يمكن أيضًا حذف السجلات باستخدام الأمر "filter()" لتحديد السجلات التي تحتاج إلى حذفها. from myapp.models import MyModel # Delete records that match a specific condition MyModel.objects.filter(name='John').delete() ويجب الانتباه إلى أن عملية الحذف قد تؤدي إلى حذف بيانات مهمة وتعديل خصائص التطبيق. لذلك يجب التأكد من عدم حدوث أخطاء في الشفرة المكتوبة وتنفيذ عملية الحذف بحذر.

بالنسبة شرح GitHub يوجد شرح مختصر في دورة علوم الحاسوب في قسم إدارة المشاريع البرمجية، في الدروس التالية 03. التعرف على نظام إدارة الإصدارات Git وموقع GitHub المدّة: 6.16 04. مثال تطبيقي على Git و GitHub المدّة: 8.03 بالنسبة لمتى تتعلم GitHub فمن الأفضل التركيز على تعلم أساسيات البرمجة وعلوم الحاسب، وعند الوصول لمرحلة القدرة على إنشاء مشروع متوسط وليس بسيط جدًا، قم بتعلم GitHub. ويمكنك الإعتماد على المصادر التالية https://academy.hsoub.com/programming/workflow/git/