DjabCoding تصميم مواقع ويب

24/04/2022

لاتوجد لغة افضل من #بايثون 😅
Nothing is better than 😅

21/06/2021

اتمام موقع الكتروني للاخ عزام الطيب من السودان. تسعدنا خدمتكم.

تقييمكم للعمل

الرابط:

https://babykishucoin.com

18/05/2021

12/05/2021

20/04/2021

المتغيرات هي عبارة عن قيم يتم تخزينها في الذاكرة لكي يتم استعمالها فيما بعد وهي موجودة في كل لغات البرمجة ولكن ماذا عن لغات التصميم ك css ؟

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

احسن استعمال للمتغيرات فيالcss هو عند استخدام الالوان المسماة بالhexadecimal فعوضا عن نسخ ولصق اكواد الالوان داخل كود الcss يمكنك حفظه داخل متغير وكتابة اسم المتغير فقط في المكان الذي تريد استعماله فيه.
المرة القادمة واذا لقيت تفاعل نحطلكم مثال مفصل لاستعمال هذه المتغيرات

اذا افادتك هذه المعلومة لاتنسى دعمنا ومشاركة المنشور مع اصدقائك كي تعم الفائدة وتشجعونا على تقديم المزيد.

28/01/2021

هذه ملاحظاتي عند تعلم css سنة 2015 اتمنى ان تفيدكم. اذا اعجبتكم شاركوها مع اصدقائكم كي تعم الفائدة وكي تشجعونا على تقديم المزيد ❤❤

نعتمد في css على كتابة محدد العنصر (selector) المراد تنسيقه متبوع بحاضنتين {} والتي تحوي بداخلها خصائص الcss

Selector #=> id, .=> class {
color : لون النص ;
direction : اتجاه العناصر في الصفحة اذا اردنا اليمين نكتب rtl;
letter-spacing : البعد بين الحروف بالبكسل;
line-height :% البعد بين الاسطر عن طريق البكسل او;
text- align : موقع النص داخل الصفحة ;
text-decoration : تزيين النص كالتسطير;
text-indent : بياض امام الفقرة;
text-transform :حساسية الحروف;
vertical-align : الابتعاد عن النص الاعتيادي بالبكسل;
white-space : لعمل سطر جديد كل ما ضغطت انتر
;حسب الخصائص والتعامل مع النص كما هو مكتوب
word-spacing : المسافة بين الكلمات بالبكسل;
border : اطار بالبكسل;
outline : التحكم في حدود الاطار الخارجي ;
padding : المسافة بين شيئين بشكل داخلي ;
margin : عكس بادينغ اي الهوامش الخارجية او البعد ;
font-family :نوع الخط ;
font-size : حجم الخط بالبكسل;
font-stylالخاصية ;لخط عادي او مائل... ;
font-variant:تحويل الحروف من صغيرة الى كبيرة
;والعكس
font-weight: عرض النص ;
width : العرض;
height :الارتفاع ;
min/max-width: اكبر / اصغر قيمة للعرض والتي لا يمكن ان يتخطاها;
min/max-height: نفس الشي;
float : )ازاحة )حذف الاتجاه الذي تحدده الخاصية
position :الوضعيات وسيتم شرح الخصائص اسفله;
z-index :تستخدم لتحديد اي عنصر يظهر فوق الاخر
background :الخلفية;
clear : تستخدم للفصل عن فلوت;
cursor : شكل مؤشر الماوس;
}

الخصائص :
text-align : justify, center, right, left.
text-decoration: none, underline, overline, line-through blinke
text-transform : capitalize, uppercase, none, lowercase.
vertical-align : baseline, sub, super, top, text-top, middle, bottom.
white-space : normal, pre, nowrap.
font-family : Tahoma, Arial, sans-serif
font-style: normal, italic...
font-size: small, x-small, large, x-large, xx-small/large..Or by px
font-variant: normal, small-caps
font-weight: bold, bolder, normal
border: dashed, solid, dotted,.....
float : right, left,...
background-color : لون الخلفية
background-image : url(اختياار صورة كخلفية)
background-repeat: اعادة الصورة
background-attachment : scroll

list-style-type : decimal ترقيم القائمة بالرقام
list-style-image : url("اظهار الصورة لترقيم")
clear : left, right, both, none
visiblity :hidden خاصية لاخفاء العنصر مع ترك بياض مكانها

Selector :hover {عند المرور عليه بالمؤشر}
Selector :visited {عند الضغط عليه ولكنه يختفي}
Selctor :active {
عند الضغط عليه يتغير اللون الى اللون المحدد
}
Selector :focus { التظليل او التركيز على مكان معين بعد الضغط عليه}
Selector :link { لتوضيح ان هذا العنصر هو رابط}
Selector :first-child { الابن الاول للعنصر}
Selector
Selector :before{
content : اضافة محتوى قبل محتوى العنصر;
}
Selector :after{
content : اضافة محتوى بعد محتوى العنصر;
}

24/01/2021

بينما ابحث في اقدم ملفات الback up على هاتفي وجدت هذه الملاحظات والتي جعلتني ابستم هههه هذه الملاحظات كتبتها عند بداية تعلمي للغة html سنة 2015 اتمنى ان تفيدكم. 😁 اذا اعجبتكم نزيد ننشرلكم CSS

تستعمل في بداية اي ملف html

تستخدم head في جلب ملفات الجافا سكريبت وغيرها....
اسم الموقع ، الكلمات الدليلية... وليس لها دخل بمظهر الموقع

عنوان الموقع

يساعد هذا محركات البحث في ارشفة موقعك على الويب


Google
Google

Userpass :
Submit :

فتح في نافذة جديدة
target ="_parent "-----> // // // //
-------------------
روابط البريد :
click her فتح برامج المحادثة
-------------------
الصور

___________________________
تشغيل الملفات الصوتية

10/01/2021

كم من الوقت ساستغرق لتعلم البرمجة؟ اكثر سؤال يتكرر في هذا المجال...

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

في اغلب الاحيان هناك حالتين في التعلم:

الحالة الاولى انك تكون ملزم بانجاز مشروع وعليك تقديمه في وقت معين (كطلاب الجامعات مثلا) وهنا عليك اتباع طريقة Learn by doing اي التعلم عن طريق انشاء مشروع وهذه تعتبر طريقة جيدة جدا في التعلم.

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

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

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

اتمنى تكونوا استفدتو 😁 اذا اعجبك المقال لا تنسى دعمنا ومشاركته مع اصدقائك كي تشجعونا على تقديم المزيد ان شاء الله ❤

31/12/2020

كيف تبدأ مشوارك في البرمجة؟

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

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

ضف إلى ذلك ان السبب الثاني الذي يفسر الإجابة "لا" هو انو هناك كثير من الناس البرمجة مش ممتعة بالنسبة لهم اصلا.

ننتقل الآن الى السؤال الثاني وهو كيف تصبح مبرمج، وسأختصرها في الخطوات التالية:

-اختر لغة (هناك حوالي 900 لغة برمجة حاليا)
-تعمق فيها بأكثر ما يمكنك، كتب، فيديوهات، مقالات مكتوبة، منتديات...
-اسأل ثم اسأل ثم اسأل لا تتوقف ابدا عن طرح الاسئلة
-الصبر، لن تتعلم البرمجة بين ليلة وضحاها بل ستتعب وستصل الى مواقف قد تفكر فيها في الاستسلام ،ولكن ثق بي اذا تجاوزت هذه المرحلة فقد نجحت ✋💪

كان هذا مقال باختصار حول تعلم البرمجة، اذا اعجبك المقال لا تنسى الضغط على زر الاعجاب ومشاركته مع اصدقائك.

25/12/2020

كيف تتعلم برمجة الويب؟ سؤال تلقيناه كثيراً في الصفحة...

عليك ان تعلم اولا عزيزي القارئ ان الويب ينقسم الى قسمين: التصميم، التطوير

التصميم: هو محتوى الصفحة ، وتنسيقه، وهو عبارة عن استخدام تكنولوجيات محددة مسبقا pre-defined لتقديم محتوى --وبشكل جمالي -- لكي تتمكن الناس المهتمة من زيارة هذا المحتوى فيما بعد.

نعتمد في كتابة هيكلة ومحتوى الصفحة على لغة الhtml وهي ليست لغة برمجة بل لغة markup فقط، اما تنسيق هذا المحتوى فيعتمد على لغة css وهذه كذلك ليست بلغة برمجة، بل هي لغة مكملة للhtml كما تحتوي على فريموورك يسمى bootstrap والذي بدأ يأخذ مكانة كبيرة نوعا ما في الاونة الاخيرة.

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

التطوير : وهو تطوير المحتوى حرفيا، اي تطوير واجهة يمكن استخدامها لتوليد محتوى تلقائيا دون الرجوع الى المصمم، نفرض مثلا موقع للاخبار يضع اخبار يومية... تخيل لو كان هذا يستعمل الhtml, css سيكون عليك كتابة صفحة html او ربما اكثر يوميا، مع التطوير يمكنك فقط انشاء لوحة تحكم يستخدمها صاحب الموقع لكتابة المحتوى دون الرجوع اليك، يعتمد التطوير على لغات ك php وهي اشهر لغة وكذلك asp.net ولغات اخرى كثيرة.

ستسأل ان كان يمكنك الجمع بين الاثنين، نعم بالطبع يمكنك ذلك، وهو ما يسمى بالFull-stack.
كان هذا شرح باختصار للتصميم وللتطوير، اي تساؤلات اتركوها في التعليقات وسأجيب عنها كلها ان شاء الله.

بالتوفيق للجميع.

22/12/2020

ثالث موقع يتم انشاؤه عن طريق الهاتف فقط

الموقع يشتغل على جميع الشاشات.

https://imtiyaz-clean.github.io