الأربعاء، 1 يونيو 2022

كيفية طباعة صفحة أو نص بواسطة جافا سكريبت أو تحميله بصيغة pdf

كيفية طباعة صفحة أو نص بواسطة جافا سكريبت أو تحميله بصيغة pdf


سنتعرف في هذه المقالة على كيفية إضافة زر برينت أو طباعة لصفحة ما أو موضوع ما أو وثيقة ما على موقعك عن طريق html و css و جافا سكريبت حيث سنقوم بإنشاء صفحة ويب تتألف من حقل إدخال نصوص textarea وأيضا زر عند النقر على هذا الزر تظهر لنا واجهة الطباعة لطباعة الصفحة أو الوثيقة وأيضا تحميلها ك pdf طبعا الأمر كله سيتم بسطر برمجي واحد فقط ، بحيث سنطبع النافذة كلها لكن النافذة قد تحتوي على عناصر أخرى وليس فقط النص ، هنا يأتي دور ال css media query والتي ستكون خاصة بتخصيص وضع الطباعة حيث  سنزيل كل شيئ خلال الطباعة ونترك النص المراد طباعته وهكذا نكون قد قمنا بعمل ستايل وجعلنا النص فقط يظهر في صفحة الطباعة .
لنبدأ معا الشرح حيث في البداية سنقوم بعمل عنصر div والذي سيكون كحاوية لكل العناصر التي بداخله وداخله div آخر يحوي  textarea وأيضا داخل الكونتينر يوجد عنصر بوتون button .
هنا الشكل النهائي لوثيقة html 

الآن ننتقل للcss حيث قمنا بتنسيق الصفحة بحيث أعطيناها شكل جميل وأيضا مريح ومتجاوب .
هنا صفحة التنسيقات يمكنك تنسيق صفحتك كما تشاء .

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

والآن ننتقل للجانب الأهم ألا وهو تنسيق الميديا كويري الخاصة بالطابعة حيث توفر css ضمن ال media query الخاصة بتنسيق التجاوب مع الأجهزة أو تجاوب المواقع مع الأجهزة تنسيق query خاص بالطابع حيث يمكنك تنسيق صفحة الطباعة كما تريد وغالبا الصفحة عند الطباعة تكون نص فبالتالي يمكنك أن تستغني على عناصر الصفحة في وضع الطباعة لتترك النص فقط .
طبعا أنا هنا قمت بإزالة ال padding عن بعض العناصر لكي لا يؤثر على صفحة الطباعة وتبدو الكتابة بعيدة وقمت بإزالة عنصر البوتون حيث تركته مخفي أيضا قمت بعمل إعادة تنسيق  للتنسيق الأولي وجعلت ال textarea يشغل مساحة 100% من الصفحة طولا وعرضا وهكذا نكون قد جهزنا الصفحة للطباعة .
الميديا كويري الخاص بالطباعة .

الآن ننتقل لجانب جافا سكريبت حيث سنقوم بتخصيص زر الطباعة حيث عند النقر على زر الطباعة سيتم تنفيذ دالة هذه الدالة تقوم بطباعة الصفحة أو إضهار واجهة التحكم في الطباعة بعبارة اخرى ، حيث أولا إستدعينا عنصر البوتون بإستخدام ال class name بواسطة الدالة query Selector وخزناه في المتغير btn حيث أصبح المتغير يحوي الزر بداخله والذي سنقوم بعمليات عليه هذا العمليات هي أننا سنضيف حدث هناك عدة طريق لإضافة الحدث حيث يمكن إنشاء دالة ووضع سمة الحدث في html وتنفيذ الدالة ويمكن أيضا عمل الحدث على العنصر من جافا سكريبت مباشرة ، هنا إخترنا جافا سكريبت ومن بين طرق إضافة الأحداث هي بجلب العنصر ثم نضع دوت أون كليك أو أي حدث آخر هنا وضعنا arrow function أو دالة مختصرة يعني يمكنك كتابة الدالة وتنفيذها بالطريقة العادية المهم نركز على السطر window.print() حيث يقوم هذا السطر بإضهار واجهة تخصيص والتحكم بالطابعة وأيضا يمكن من هذه الواجهة تحميل الملف ك pdf ويمكن الطباعة .
أكواد جافا سكريبت .
الآن بعد أن فرغنا من html css js ننتقل للشكل النهائي للمشروع حيث كما يظهر في الصورة وبعد كتابة نص في الحقل ونقرنا على طباعة ظهرت لنا الواجهة الإفتارضية للطباعة حيث يمكن لليوزر التعامل مع الطابعة إن كان لديه طابعة أو تحميل النص بصيغة pdf .
صفحة الطباعة النص ، بحيث نسقنا النصوص لتبدو بهذا الشكل .

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

الاثنين، 30 مايو 2022

فحص الإتصال بالشبكة وجلب إسم الهوست وعنوان الأيبي عن طريق سي شارب

فحص الإتصال بالشبكة وجلب إسم الهوست وعنوان الأيبي عن طريق سي شارب

 

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

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

أولا : نقوم بفتح محرر أكواد سي شارب وننشئ مشروع جديد يمكن العمل على الكونسول أو GUI يعني إختر النوع Console Aplication أو Windows Aplication لا يهم النوع المهم هو تطبيق الفكرة في حالتنا هذه سنستخدم ال GUI طبعا لتكون الواجهة تفاعلية أكثر ويكون البرنامج أكثر وضوحا .

قبل كل شيئ ننوه إلى أننا وضعنا Label وصورة و Button في الواجهة ووضعنا Label مخفي أو قيمته فارغة تحت الصورة لعرض إسم الهوست وعنوان الأيبي فيه حيث سنخفي الصورة برمجيا ونغير في النصوص والألوان برمجيا .

في مكان the conection states أو حالة الإتصال سنقوم بتغيير هذا النص ولونه عند النقر على البوتون لرسالة تخبرنا ما إذا كان الإتصال ناجح أو لا .

هذه واجهة البرنامج عند فتحه للمرة الأولى 
طبعا في الصورة التالية سنقوم بالنقر على البوتون للتحقق من الإتصال وإن كان الإتصال موجودا كما هو حال إتصالي فسيقول انه موجود وإن كان لا سيقول لا حيث أخفى الصورة وعرض لنا الهوست والايبي وايضا غير لون label اللايبل الرئيسي للون الأحضر وقيمته ليخبرنا ان الإتصال ناجح .
هنا بوجود الإتصال أظهر لنا الإتصال ناجح بالأخضر وعرض لنا إسم الهوست وعنوان الأيبي
هنا لما تعمدنا قطع الإتصال كما نشاهد في الأسفل في شريط المهام وتحققنا قال لنا أن الإتصال فاشل بالأحمر طبعا الأحمر والأخضر وما يكتب هو تنسيقات بإمكاننا التحكم فيها وتنسيقها كما نشاء كما أيضا قام بإخفاء الهوست وإسم الأيبي واللذان عرضناهما في السابق عندما كان الإتصال مفتوحا لأنه لا ينبغي عرضهما إلا في حالة نجاح الإتصال .
هنا عرض الرسالة أن الإتصال فاشل بعد قطع الإتصال .
أولا نستدعي ال NameSpace والمسمى System.Net وأيضا System.Net.NetworkInformation والأول هو للتعامل مع الشبكة والحصول على عنوان الأيبي وإسم الهوست والثاني للتعامل مع الإتصال بالشبكة والتحقق من الإتصال .





بعد ذلك نعرف ثلاثة متغيرات الأول نوع نصي نسميه مثلا host وفيه نضع عنوان الدومين الذي سنختبر به الإتصال فالفكرة هنا أن نقوم بعمل تصفح او إتصال بموقع جوجل إن نجح هذا الإتصال فهذا يعني أنه يتوفر إتصال وإن فشل فهذا يعني انه لايوجد إتصال بالشبكة .
ثانيا متغير منطقي boolean والذي قمنا بتسميته result والذي قيمة البداية له هي false والذي سنغير قيمته بمجرد أن نتصل وينجح الإتصال ل true وإن فشل الإتصال نتركه false ، وأخيرا متغير نسمه cleint والذي يحوي داخله نسخة من الأوبجيكت WebCleint والذي سنستخدمه في عمل إتصال وتجهيزه .

بعد ذلك نقوم بعمل دالة الإستثناءات try و catch ومن cleint.OpenRead وقوسين داخلهما نضع إسم النطاق الخاص بالموقع الذي سنفتحه او سنتصفحه لإختبار الإتصال ضع أي موقع وليكن مثلا google والمخزن إسم نطاقه لدينا في المتغير هوست طبعا open read تفتح وتقرأ أو لنعبر انها تتصفح الموقع إن نجح الغتصال وتصفح الموقع فهذا يعني أنه يوجد إتصال بالشبكة وإن فشل فمعناه لا يوجد طبعا أو أن هناك خطأ ما .
وعليه نجعل المتغير boolean في حالة النجاح ترو لاننا لاحقا سنقوم  بعمل شرط بناءا عليه لطبع النتيجة وإن فشل نتركه على حاله أو نقوم بوضع داخل جملة ال catch قوسين ونضع  Exception لإلتقاط الخطأ وطباعته لكننا لن نقوم بهذا نترك المتغير ب false ولاحقا سنضع شرط نطبع فيه رسالة مفادها فشل الإتصال في حالة فشله .

طبعا هنا سنقوم بجلب إسم الهوست وعنوان ip ونقوم بعرضه في حالة نجاح الإتصال حيث سنعرف متغير سترينغ نسمه مثلا hostName بطبيعة الحال قيمته ستساوي Dns.GetHostName طبعا هنا نحن نتعامل مع ال nameSpase المسمات System.Net وفي الحالة السابقة تعاملنا مع النايم سبايس نتورك إنفورمشن طبعا من dns إجلب الهوست نايم وخزنه في المتغير طبعا سيصبح المتغير hostName يحوي إسم الهوست طبعا والذي سنستعمله لاحقا في جلب عنوان الأيبي حيث عرفنا متغير أسميناه ipName ومن Dns.GetHostByName قوسين ونضع إسم الهوست المخزنة في المتغير السابق ثم AddressList[0].toString
يعني أننا هنا وصلنا لل AddressList والتي هي عبارة عن مصفوفة القيمة ذات ال index صفر فيها هي عنوان الأيبي طبعا كل هذا عبارة عن اوبجيكتات وكلاسات فلا تقلق المهم أننا هنا وصلنا لل ip وأيضا وصلنا سابقا للهوست حيث أنها تحوي بعض المعلومات داخل AddressList حيث اول قيمة فيها هي ip اما الهوست نايم فإسمها مخزن داخل المتغير hostName طبعا القرق بين GetHostName و GetHostByName ان الأولى تسمح لنا بالوصول لإسم الهوست فقط أما الثانية فللهوست نفسها وكل المعلومات الخاصة بها .

طبعا في الأخير حان وقت الطباعة حيث وضعنا شرط if وإستثناء else وقلنا لهما إن كان ال result ب true نفذ كذا غيره نفذ كذا ، طبعا إن كان بترو أولا قمنا بإخفاء الصورة من النافذة ثم في ال label الرئيسي سنطبع عبارة The Conection Is Saccess طبعا تطبع ما تشاء ثم بعد ذلك في اللايبل المخفي أو الذي لا قيمة له سنطبع إسم الهوست وعنوان الأيبي بتنسيقات من إختيارنا . 
أما في ال else فسنطبع أن الإتصال غير ناجح ونقوم بإفراغ ال lable المخفي حتى لا يبقي لنا إسم الهوست وعنوان الأيبي عندما نقوم بالتحقق من الإتصال مرة فيكون ناجح وعندما نتحقق منه مرة أخرى فيكون فاشل حيث سيمسح معلومات الهوست وإسم الأيبي .

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



الاثنين، 25 أبريل 2022

هل تعلم ماهو الفرق ما بين ال compiler وال interpreter في البرمجة

هل تعلم ماهو الفرق ما بين ال compiler وال interpreter في البرمجة


لغات البرمجة مبدأها واحد ألا وهو تحويل الكود المصدري Source Code إلى كود قابل للإشتغال على الآلة  طبعا في هذه المقالة سنسلط الضوء عن الفرق بين المترجم Compiler والمفسر Interpeter حيث أنه وقد يكون من المهم احيانا للمبرمج معرفة الفرق بينهما .

طبعا يتم تنفيذ البرنامج في معظم لغات البرمجة بطريقتين الأولى بالإعتماد على المترجم compiler والثانية تعتمد على المفسر Interpeter لكن ماهو الفرق بينهما ، في البداية المترجم والمفسر هما برنامجين يلعبان دور الوسيط في تحويل الكود المصدري لبرنامج يفذ على الآلة .

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

يقوم المترجم compiler بتنفيذ الأوامر والأسطر البرمجة دفعة واحدة يعني يأتي على الأوامر البرمجية يحللها ويترجمها و يقوم بتنفيذها كلها مرة واحدة .

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

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

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

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

طبعا لدينا العديد من اللغات البرمجية اللتي تعتمد على compiler لعل ابرزها c و c++ وسي شارب فيما اللغات اللتي تعتمد على المفسر Interpeter تتمثل في لغات مثل python و ruby فيما تعتمد جافا على كلاهما في التنفيذ المفسر والمترجم معا .

حسنا الآن نتمنى أن يكون الشرح قد أوضح لك الفرق بين المترجم والمفسر ، وأزال اللبس والإشكال لديك إن اعجبتك التدوينة او إستفدت منها لا تبخل علينا بمشاركتها لتعم الفائدة إلى هنا أكون قد إنتهيت من مقالتنا لليوم أتمنى أن تكونو قد إستفدتم .

الجمعة، 1 أبريل 2022

تطبيقات على جافا سكريبت نسخ النص من حقل إلى حافظة النظام بإستخدام جافا سكريبت

تطبيقات على جافا سكريبت نسخ النص من حقل إلى حافظة النظام بإستخدام جافا سكريبت

 

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

أول خطوة سنتخذها هي إنشاء ملف html ولنسمه مثلا copieText.html طبعا يمكنك عمل ملف جافا سكريبت لوحده وسي أس أس لوحده وربطهم به أو عملهم على ذات الملف المهم هنا أن نطبق الفكرة طبعا في الصور التالية قد أنشأنا الملف وقد قمنا بعمل بعض التنسيقات عليه حيث أنشأنا ضمنه Text Area أعطيناه أيديid txt وأيضا Button أعطيناه أيدي btn id بحيث سنستدعي هذه العناصر لاحقا .

هنا أنشأنا ملف html خاصتنا والذي سنعمل عليه
ا
هنا ملفنا بعد إنشاءه وعمل تنسيقات له بحيث أن التكست بوكس سنكتب فيه النص 
وعند النقر على البوتون سيتم تحديد هذا النص ونسخه .
الآن وبعد أن قمنا بعرض توضيحي للصفحة خاصتنا نبدأ مع جافا سكريبت حيث سنقوم أولا بإستدعاء العناصر من الصفحة وهما Button و Text Area حيث سنستخدم أيا من دوال إستدعاء العناصر ولتكن عن طريق ال id أو إستخدم الدالة التي ترتاح لها والتي تعلمتها طبعا في اساسيات جافا سكريبت .
let txt = document.getElementById('txt') , btn = document.getElementById("btn");
طبعا قمنا بتجميع بإستدعاء العنصرين عن طريق الأيدي وحفظهما في متغير لتسهيل العمل عليهما أسمينا الأول txt والثاني btn الآن هذين المتغيرين يحملان رسميا داخلهما عنصري البوتون والحقل لعمل عمليات عليهما . 
let txt = document.getElementById('txt') , btn = document.getElementById("btn");
btn.onclick = function(){
txt.select();//هنا قلنا له حدد كل النص الذي داخل الحقل والذي سيكتبه أحدهم إما اليوزر أو مدير الموقع أو أي شخص
//من نافيجايتور إجلب الكليب بورد وهي الحافظة خاصة نظام التشغيل
                navigator.clipboard.writeText(txt.value);
                //قلنا له أكتب نص ضمن الكليب بورد  هذا النص هو النص الموجود في الحقل يعني قيمة الحقل 
console.log("Your Copied Text Is: "+ txt.value);
};
طبعا بعد ذلك وكما هو موضح في النص أعلاه نقوم بإضافة فونكشن حدث الكليك على البوتون والذي سينفذ الدالة طبعا هناك عدة طرق لإضافة حدث الكليك على بوتون وتنفيذ دالة معينة عليه يمكنك إختيار ما تراه مناسبا ، بعدها سنقول له txt دوت select أي حدد لي جميع النص المكتوب في الحقل إستعدادا لحفظه ظمن الحافظة ومن الأوبجيكت navigator قلنا له إجلب الحافظة clipboard وأكتب ضمنها نص writeText أو ضع أو أدرج ضمنها نص هذا النص هو النص الموجود داخل الحقل طبعا دور الدالة سيليكت هنا هو مجرد تحديد النص يعني إضافة تأثير التحديد لكي يبدو النسخ أكثر إحترافية لكن يمكن الإستغناء عليها فنحن قمنا بعمل إدراج لقيمة الحقل مباشرة في الحافظة وبعدها طبعنا نص الحقل في الكونسول مدموجا مع نص عادي إخترناه نحن للتبيان فقط ، طبعا لو أنك ذهبت إلى أي مكان وقمت بعمل لصق ستجد أنه قد تم بالفعل نسخ نص الحقل .
النتيجة النهائية 

نتمنى أن تكون التدوينة قد أفادتكم نتمنى منك مشاركة التدوينة لتعم الفائدة يمكنك تصفح الموقع للمزيد من المحتوى المتعلق بالبرمجة بمختلف لغاتها وتكنولوجياتها شكرا على المتابعة . 

الخميس، 17 ديسمبر 2020

العمل على بايثون من هاتفك الأندرويد بواسطة هذا التطبيق

العمل على بايثون من هاتفك الأندرويد بواسطة هذا التطبيق



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

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

بعد إنشاء مشروع نقوم بكتابة السكريبت الخاص بنا ثم نقوم بالحفظ وإختيار إسم لهذا المشروع ويجب أن يكون المشروع بإمتداد .py ومن خلال زر Run نقوم بتشغيل الكود وستظهر لنا النتيجة .

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

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

import os
os.system('clear')

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


ماهي الألوان المسطحة (الفلات)؟ وماهي إستخداماتها؟ وكيف نحصل عليها؟

ماهي الألوان المسطحة (الفلات)؟ وماهي إستخداماتها؟ وكيف نحصل عليها؟



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

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

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

نموذج من واجهة مستخدم ويندوز 8 اللتي تعتمد على التصميم المسطح 

يمكن الحصول على الوان الفلات من عدة مواقع على الشبكة لعل أشهرها موقع flatuicolors الغني جدا بهذا النوع من الألوان ، وموقع flatcolors وموقع materialui وموقع flatuicolorpicker وموقع bootflat ، وغيرها من المواقع اللتي تمكنك من الحصول على هذا النوع من الألوان وكل ما عليك هو الدخول إلى أحد المواقع وإختيار اللون المناسب ونسخ الكود الخاص به ولصقه في المكان الذي تريد إستعماله فيه .

الاثنين، 7 ديسمبر 2020

تعرف على كيفية تحميل وتبيت برنامج فيجوال ستودو كود + حل مشكلة الواجهة السوداء بعد التثبيت .

تعرف على كيفية تحميل وتبيت برنامج فيجوال ستودو كود + حل مشكلة الواجهة السوداء بعد التثبيت .

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

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

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

بعد ذلك تظهر لنا واجهة جديدة فيها إتفاقية الإستخدام نقوم بالتعليم على الخيار الاول ثم ننقر على التالي كما هو ظاهر في الصورة أسفله .

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

بعد ذلك سيظهر لنا ما في الصورة التالية نترك كل شيئ على ما هو عليه ثم ننقر على التالي كما هو موضح .

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

الآن ومن هذه الواجهة ننقر على instal أو تثبيت وسيبدأ البرنامج في التثبيت معنا . 

بعد التثبيت ننقر على إنهاء كما هو موضح في الصورة اسفله .

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

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

ستظهر بعد ذلك الواجهة اللتي في الصورة التالية ، توجد في هذه الواجهة خانة إسمها الهدف داخلها مسار أو كلام مكتوب نأتي إلى آخر هذا الكلام ونأخذ مسافة أو Space كما هو موضح في الصورة التالية .

الآن نأتي إلى العبارة التي سنظيفها حيث وبعد أخذ مسافة بعد المسار أو الكلام المكتوب في الخانة نكتب هذه العبارة --disable-gpu أو ننسخها ونلصقها حتى لا نخطأ ، يعني يجب أن تكون العبارة كما هو موضح في الصورة التالية .
وبعد القيام بالخطوات ننقر على زر تطبيق ثم موافق كما في الصورة .

الآن وبعد تطبيق الخطوات سنفتح البرنامج من جديد وذلك بالنقر على أيقونته مزدوجا في سطح المكتب ، وبعد فتحه سيشتغل معك البرنامج إن شاء الله .

الآن وبعد الشرح نتمنى لكم التوفيق ونرجو أن نكون قد وفقنا للشرح ونرجو أن يشتغل معكم الحل ، شكرا على المتابعة وإلى اللقاء .

الاثنين، 23 نوفمبر 2020

شرح تحميل وتثبيت برنامج notepad ++ الشهير للكمبيوتر

شرح تحميل وتثبيت برنامج notepad ++ الشهير للكمبيوتر


ضمن إعداد بيئة العمل لتعلم لغة html في الدرس السابق تعرفنا على كيفية إنشاء ملف html من خلال مفكرة نوت باد للعمل على لغة html وكتابة الأكواد من خلاله ، اليوم سنتعرف على برنامج يشبه مفكرة notepad من حيث الإسم ومن حيث الشعار تقريبا لكن الواجهة متطورة وفيها مختلف الأدوات اللتي تساعدك على البرمجة من خلاله . هذا البرنامج يدعى notepad++ وهو برنامج شهير جدا غني عن التعريف وهو الخيار الأفضل لمن يريد تعلم html css php javascript لأن هذا البرنامج من خلال طريقة عمله يسمح لك بأن تتمرس على كتابة الاكواد مما يساعد على تسريع ترسيخ الاكواد في ذاكرتك ، لا نطيل عليكم وندخل مباشرة في الشرح .

أولا نأتي لتحميل برنامج نوت باد ++ حيث ستجد رابط تحميله أسفل هذه التدوينة ، نلج إلى هذا الرابط ثم نقوم بإختيار النسخة أو الإصدار المناسب .

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


الآن ننتظر بينما يتم التحميل وبعد التحميل نقوم بفتح الملف طبعا في الصورة الآتية أنا قمت بسحب الملف من مجلد التحميلات لسطح المكتب .


بعد فتحه ستظهر لنا الواجهة اللتي في الصورة في الأسفل حيث سنقوم بإختار اللغة وننقر على موافق .


بعد إختيار اللغة تأتي لنا واجهة التثبيت نقوم بإتباع الخطوات البديهية والمعروفة في التثبيت والتي سنتناولها أسفله تباعا في عدة صور .







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


للقيام بإنشاء مشروع جديد ننقر على الأيقونة الأولى في شريط الأدوات في الأعلى كما يظهر في الصورة التالية أو ننقر على file في يسار القائمة الأفقية الموجودة في الاعلى وستنسدل لنا قائمة نختار الأمر New منها  أو نختصر هذا بالنقر على Ctrl + N من لوحة المفاتيح .

بعد القيام بإحدى الخطوات المذكورة سابقا لإنشاء مشروع جديد ستظهرلك نافذة جديدة تقوم بكتابة أي شيئ فيها ثم حذفه أو تقوم بكتابة عناصر html وفي حالتي أنا ساقوم بكتابة بكتابة العنصر <h1>Mouaz Brai</h1> لإظهار عبارة Mouaz Brai  وهذا كمثال يمكنك أنت أيضا أن تضع العنصر h1 وتكتب بدلا من Mouaz Brai أي شيئ تريده أنت ، بعد هذا سيتم تفعيل أيقونة الحفظ واللتي لن تكون مفعلة في البداية لأنه يشترط كتابة شيئ ما لكي يتم تفعيلها أو كتابة أي شيئ وحذفه لتفعيل الأيقونة كما ذكرنا سابقا وبعد تفعيل الأيقونة ننقر عليها لحفظ المشروع ، أو نقوم بالحفظ عن طريق النقر على File من القائمة الأفقية الموجودة في الاعلى ستنسدل لنا قائمة نقوم بإختيار الخيار Save أو حفظ بالعربي  .

بمجرد النقر على حفظ ستظهر لنا نافذة نختار المسار أو المجلد الذي نريد أن نقوم بحفظ ملف أو مشروع html عليه انا سأقوم بإختيار سطح المكتب أنت ستقوم بحفظه في أي مجلد تريده أو أنشئ مجلدا جديدا وسمه ما تشاء وضعه أين تشاء وإستخدمه لحفظ كافة مشاريع HTML الخاصة بك ، المهم وبعد إختار المسار وفي الخانة المخصصة لإسم الملف أو إسم المشروع نقوم بتحديد إسم المشروع او إسم ملف HTML بعبارة أخرى وطبعا الإسم يكون إختياري متبوعا ب .html وفي لغة أش تي أم أل يجب عليك إضافة إمتداد .html ليعرف حاسوبك أن الملف الذي هو بصدد التعامل معه هو ملف HTML وهذا كله موضح في الصورة أسفله وأخيرا ننقر Save او حفظ .
لقد قمت بإنشاء ملف بإمتداد .html وقد أسميه mouazbrai

الآن سنرى نتيجة العمل حيث سنتوجه إلى المسار الذي قمنا بحفظ مشروعنا أو ملفنا عليه ، أنا وكما ذكرت سابقا قمت بحفظه على سطح المكتب أنت توجه للمسار الذي حفظته فيه وستجد ملف html الذي قمت بإنشاءه طبعا الملف سيكون يحمل نفس الإسم الذي أعطيته إياه وسيكون يحمل أيقونة المتصفح الّإفتراضي الخاص بك لأن ملفات html يتم عرضها في المتصفح ، أنا متصفحي الإفتراضي هو كروم لذا سيحْمل ملف html الخاص بي والذي أسميته mouazbrai والموجود على سطح المكتب سيحْمل هذا الأخير أيقونة كروم ننقر على ملف html الخاص بنا مزدوجا لفتحه أو نفتحه بأي طريقة تريدها على سبيل المثال يمكنك النقر عليه بيمين الفأرة ومن القائمة التي تظهر نختار فتح أو يمكننا أن ان نسحب الملف مباشرة للمتصفح لنفتحه وأنت تعرف طرق فتح الملفات يعني هذه الأشياء بديهية .

هذا ملف html الذي قمنا بإنشاءه .
بعد فتحه في المتصفح سيعرض لنا نتيجة عملنا إن كان ملف html فارغا سيستعرض لنا صفحة ويب فارغة وإن كان مكتوب فيه أي شيئ سيستعرض لنا ذلك الشيئ وإن كان مكتوب فيه عنصر html فسيستعرض لنا نتيجة العنصر ، مثلا في حالتي أنا قمت بكتابة عنصر <h1>هنا بين وسمي البداية والإغلاق نكتب اي شيئ نريده</h1> وكتبت داخله أي بين وسمي البداية والإغلاق عبارة Mouaz Brai يعني أنه سيستعرض لنا في صفحة الويب في المتصفح عبارة Mouaz Brai طبعا ستظهر لك العبارة التي تكتبها وهو ما ستلاحظونه في الصورة أسفله .
نتيجة أول مشروع html لك .
الآن وبعد أن تعرفنا معكم على تثبيت بيئة العمل وتعرفنا كيف ننشئ مشروعنا الأول سنعطيكم رابط تحميل برنامج Notepad++ والذي ستجدونه في الأسفل ، وسنتعرف معا في الدرس القادم على كيفية تثبيت بيئة العمل على الجوال لتعلم Html من هاتفك .
الاشتراك في: التعليقات (Atom)