لغات البرمجة كل ما تريد معرفته !

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

ما هى لغات البرمجة ؟

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

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

وتشير كلمة لغات البرمجة غالبًا إلى اللغات عالية المستوى High-Level Languages وهى اللغات الأقرب إلى لغة البشر وتتكون من كلمات يفهمها البشر مثل If , While وغيرها امثلة على هذه اللغات C++ , Python , FORTRAN وغيرها هذه اللغات عالية المستوى وان كانت اقرب إلى لغة البشر فهى معقدة بالنسبة للغات التى يفهمها الكمبيوتر فعليًا وهى لغة الآلة او Machine Language وهى مكونة من صفر او واحد  . 

إذًا فنحن فى هذه المقالة بصدد الحديث عن اللغات عالية المستوي High-Level Languages.

كيف تختلف لغات البرمجة عن بعضها ؟

لعلك تتسأل لما هذا العدد الكبير من لغات البرمجة وكيف تختلف عن بعضها !

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

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

لغة باسكال Pascal جيدة جدا لكتابة برامج جيدة التنظيم سهلة للقراءة ، ولكنها ليست مرنة كما لغة البرمجة C.

لغة سي بلس بلس C++ لغة قوية تمثل البرمجة الكائنية OOP ولكنها فى المقابل صعبة التعلم .

اذًا فاختيارك للغة المناسبة متوقف على طبيعة التطبيق المستخدمة لاجله

ما استخدامات لغات البرمجة ؟

استخدامات لغات البرمجة كثيرة ولا حصر لها ولعل اشهرها : تطبيقات الويب , تطبيقات الهواتف , تطبيقات سطح المكتب , الالعاب و برامج المحكاة , برامج الحسابات و غيرها الكثير, وكما تعلم فإننا نقصد هنا لغات البرمجة عالية المستوى High-Level Languages .

لغات البرمجة كل ماتريد معرفته !


أشهر لغات البرمجة واستخدام كل منها : 

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

لغة Javascript 

لغة سهلة تدعمها جميع المتصفحات فهى تعمل على المتصفح الخاص بك , لذلك لا حاجة لتثبيتها فهى بالفعل موجودة على المتصفحات .

يمكنها التعامل مع صفحات الويب واضافة تاثيرات جميلة وتستخدم فى التعامل مع المتصفحات وبرمجة اضافات مثلًا او Extensions و كثير من الاستخدامات الاخرى التى لن تجدها فى اي لغة اخرى حينما يتعلق الأمر بتطبيقات الويب .

أشهر مكتابات Javascript هى Jquery و تستخدم فى نحو 22.9 من أعلى مليون موقع موجود على الأنترنت .

لغة PHP

لغة PHP أنُشئت لبناء مواقع ويب تفاعلية , تعمل لغة PHP على السيرفر Server Side Language ما يعنى اننا كمستخدمين للموقع لايمكن ان نرى اكواد PHP المستخدمة فى الموقع , و يقوم السيرفر بمعالجة اكواد اللغة ويرسلها إلى المتصفح فى شكل HTML .

يمكن للغة PHP التعامل مع الملفات على السيرفر , الحصول على البيانات من الحقول Forms , التعامل مع الكوكيز Cookies , التعامل مع قواعد البيانات ,التحكم فى وصول المستخدمين لصفحات الموقع , تشفير البيانات "مثل كلمات المرور" وغيرها.

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

اشهر المواقع التى تستخدم PHP فى برمجتها : موقع الفيسبوك Facebook , موقع ويكيبيديا Wikipedia , نظام ادارة محتوي وردبرس WordPress  

لغة ASP.NET مشابهة بشكل كبير لPHP فى الاستخدامات وهى من انتاج شركة ميكروسوفت غير ان PHP مفتوحة المصدر.


لغة بايثون Python

لغة بايثون لغة سهلة التعلم , عامة الغرض General Purpose Language اي يمكن استخدامها فى اي مكان سواء تطبيقات سطح المكتب او الويب او الالعاب او غيرها على عكس Javascript و PHP التى تستخدمان فى الويب فقط , يمكن ان تستخدم فى تطبيقات الويب كلغة Server Side مع او بدون اطار عمل مثل django ولكن من عيوب لغة بايثون البطء مقارنة مع لغات مثل C لانها لغة interpreted .

إطار العمل او Framework هو مجموعة من الدوال والتعليمات المجمعة التى توفر الوقت للمبرمجين لتأدية مهمة معينة

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

لغة جافا Java و لغة سي شارب C#

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

مقالة مفصلة عن Object Oriented Programming

استخدامات اللغتان ايضًا متشابهتان فى تطبيقات سطح المكتب والعاب الفيديو وحتى تطبيقات الويب.

لغة جافا ليست لها اي علاقة بلغة جافاسكربت

لغة روبى Ruby

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

ما هو الافضل لك ان تتعلمه ؟

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

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

افضل الكتب لتعلم البرمجة باللغة العربية

برغم اقبال العالم العربى على البرمجة مؤخرًا , إلا ان مصادر تعلم البرمجة باللغة العربية ما زالت قليلة مقارنة بعدد المبرمجين العرب الكبير نسبيًا ولكن يوجد بعض المؤلفات المجانية التى ساهم بها مبرمجين عرب رغبًا منهم فى اثراء المحتوي العربى , جلبنا لك اليوم مجموعة مميز من الكتب العربية لتعلم البرمجة فتابع المقالة .

للتعرف بالتفصيل على لغات البرمجة والفروق بينها تابع المقالة التالى


افضل الكتب العربية لتعلم البرمجة 

ملحوظة : يمكن تحميل الكتاب باتباع الرابط اسفل كل كتاب 

كتاب كيف يتعلم المبرمج بشكل صحيح

كتاب كيف يتعلم المبرمج بشكل صحيح

كتاب جميل للمؤلف وجدى عصام يرى فيه الكاتب اننا اصبحنا نعيش فى مجتمع قائم على المهارة Skills Based Society وليس المعرفة knowledge Based Society فلا احد يهتم بما تعرف وما الشهادة التى حصلت عليها بل بما تستطيع فعله ويرى الكتاب ان العالم الآن اصبح قائم على البرمجيات مفتوحة المصدر وحتى العتاد او Hardware اصبح غير مكلف فبتالى المشكلة حاليًا ليست فى الادوات فكلها متاحة وانما المشكلة الحقيقة فى المهارات التى يمتكلها الشخص.

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


كتاب البحر الشاسع لدخول الخوارزميات من بابها الواسع 


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


كتاب تعلم البرمجة بلغة PHP 

كتاب تعلم البرمجة بلغة PHP

إذا كنت مهتم ببرمجة الويب بلغة PHP فهذا الكتاب الرائع هو الافضل لهذه المهمة , فالكتاب يحتوي 16 فصل يغطى مختلف الموضيع من لغة PHP بلغة سهلة وبسيطة ومع الكثير من الامثلة العملية 


كتاب تعلم البرمجة مع بايثون 3


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


كتاب كيف تكسب ١٠ الاف دولار اثناء تعلم البرمجة 

كتاب كيف تكسب ١٠ الاف دولار اثناء تعلم البرمجة

كتاب مميز اخر يضعك على طريق الربح من البرمجة وهو مترجم من ملحق لدورة تطوير ويب باللغة الانجليزية من منصة يوديمى لصاحبها Rob Percival ويمكنك زيارة صفحته على موقع يوديمى من هنا , يضع المؤلف بين يديك استراتجيات واضح لربح الكثير من المال اثناء تعلم البرمجة من واقع خبرته الكبيرة فى المجال , فالكتاب يحتوي على 20 تحدى بعضها يمكنك مباشرًا من ربح المال والاخرى ستضعك على الطريق الصحيح للربح .


تنتمى ان تكونوا قد استفدتم من هذه الكتب وان كنت قرأت كتاب اخر افادك فى عالم البرمجة يمكنك مشاركته معنا فى التعليقات , وشكرًا لكم .

استخدام Javascript و NodeJS فى تطوير المواقع

 تطوير مواقع كاملة مع Javascript و NodeJS

تطوير تطبيقات الويب فى الآونة الاخيرة اصبح مهمة تحتاج منك ان تكون ملم بالكثير من الامور واللغات والتقنيات , فبكل بساطة انت تريد تطوير تطبيقاتك بطريقة اسرع وان يكون التطبيق قوي وسريع وسهل التطوير والكثير من الميزات الاخرى .

مؤخرًا مع التقنيات والادوات الحديثة فى عالم تطوير الويب اصبح من الممكن تطوير تطبيقاتك مع لغة جافاسكربت و HTML , CSS .
فخليط تقنيات جافاسكربت السحرى MongoDB , Express , AngularJS ,NodeJS اصبح قوي بما فيه الكفاية لتطوير تطبيقاتك من البداية إلى النهاية .

لماذا جافاسكربت ؟

جافاسكربت من اشهر اللغات المستخدمة فى عالم الويب استخدمت قديمًا فى الجزء الخاص بالعميل او Client Side وهى الاوامر التى تنفذ على متصفح المستخدم ويكون الكود المصدرى فى هذه الحالة مكشوف للمستخدم , فبتالى كانت الجافاسكربت مقتصرة على انشاء تفاعل للواجهة مع المستخدم وبعض الاشياء الاخرى مثل Validation قبل ارسال البيانات إلى السيرفر , فببساطة كانت جافاسكربت تقوم بمهم كثيرة على جهاز المستخدم بدون الحاجة إلى ازعاج موارد السيرفر فى اشياء لا تستحق اهدار موارد السيرفر من اجلها .

وكان التعامل مع السيرفر مقصور على لغات اخرى من اشهرها PHP , ASP هذه اللغات تنفذ على السيرفر وتتعامل مع قواعد البيانات , فعند البحث فى صندوق البحث فى اي موقع يقوم الموقع بارسال request للسيرفر بالبيانات المطلوب فيقوم السيرفر بالاتصال بقاعدة البيانات وجلب البيانات منها ومعالجة هذه البيانات وتحويلها إلى HTML عند طريق اللغة المستخدمة فى Server ثم يعيد هذه البيانات فى شكل HTML يتمكن المتصفح من قراءتها وعرضها للمستخدم .

للتعرف اكثر على لغات الخادم Server Side ولغات العميل Client Side


ولكن مؤخرًا دخلت جافاسكربت وغطت هذه الجزء ايضًا وهى التعامل مع السيرفر عن طريق NodeJS .

ماهى NodeJS ؟

فى عام 2009 قام Ryan Dahl بانشاء NodeJS , وقام ببناءها على عاملين مهمين ساعدا فى انتشارها بشكل كبير وهما :

1. محرك Chrome V8 المتطور 

وهو نفسه المستخدم فى جوجل كروم وطور من قبل مطورى جوجل فى 2008 , ويتميز بسرعة وقوة كبيرتين .

2. الاعتماد على آلية Non-Blocking

بعكس اللغات الموجودة وعلى رأسها PHP التى تعتمد على آلية Blocking اعتمدت Nodejs على آلية Non-Blocking ولفهم الفرق بينهم بصورة اوضح اليك التالى
عند التعامل مع السيرفر فى لغة مثل PHP تعتمد على Blocking فان تنفيذ الطلبات القادمة من مستخدمى الموقع ستنفذ بالتوالى لا يبدء فى تنفيذ الطلب الجديد الا بعد الانتهاء واعادة النتائج إلى المستخدم الحالى وهذا يسبب اهدار كبير فى الوقت ( بالرغم من استخدام Multi Threads فى PHP لمحاولة حل المشكلة وهى ماتسبب زيادة تكاليف السيرفر ) .
وكان الحل فى NodeJS هو استخدام آلية Blocking التى تسمح بارسال طلبات Request بالتوازي فحين يبدء السيرفر فى تنفيذ Request قادم فانه لا ينتظر انتهاءه حتى يبدء فى تنفيذ Request الذى يليه وكل Request ينتهى من معالجته يقوم بارجاع دالة Call Back المسؤالة عن الرد على Request بالبيانات المطلوبة او برسالة خطأ اذا حدثت مشكلة , وبالتالى بموارد اقل للسيرفر (Single Thread) تزيد السرعة بصورة كبيرة .

كانت هذه مقدمة بسيطة لتطوير المواقع بلغة Javascript و Nodejs , وقريبا سنتطرق لتفاصيل بناء المواقع بلغة جافاسكربت وتقنياتها المختلفة .

مواضيع مفيدة
ما هى البرمجة
دليل لغات البرمجة لمطوري الويب 
استخدام لغة PHP فى تطوير الويب

كيف تمتلك موقع ناجح على الانترنت

كيف تمتلك موقع ناجح على الانترنت

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

مهما كانت الأسباب فالنهاية واحدة , و هي امتلاك الموقع الإلكتروني الذي يخوللك القيام بكافة المهام بشكل سهل و مرن .

و السؤال هنا , هل إمتلاك الموقع الإلكتروني امر صعب ؟!

في يومنا هذا امتلاك موقع الكتروني يعد امرا بسيطا للغاية , فكل ما عليك هو تحديد طبيعة الموقع الذي
تريده و ماهي الا خطوات صغيرة حتى تمتلك الموقع الإلكتروني الذي تحلم به .

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

اربع خطوات لامتلاك موقع ناجح

الخطو ة الأولى

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

الخطو ة الثانية

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

اختر اسما قريبا من طبيعة نشاط

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

لا تفكر فى مواقع الكترونية غير .org .net .com فقط

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

استخدم الداش - عند الضرورة

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

حاول التلاعب بإسم موقعك قليلا , مثلا استبدل بعض الاحرف بأخرى و التي لا تؤثر على طريقة النطق الصحيح
لإسم الموقع و تعتبر امرا مميزا في اسم موقعك على سبيل المثال
pharmacy
pharmac
فبعض التغييرات تجعل من اسم موقعك اسما مميزا , دون التأثير على الطريقة الصحيحة لنطق الإسم و لا تؤثرايضا في جوجل .

كيفية الحصول على افكار لإختيار إسم مميز لموقعك

تتوفر المئات او الألاف من المواقع التي توفر خدمة البحث عن اسم نطاق (  )Domain للموقع , و لكن اليكم هذا السر الخطير في كيفية اختيار افضل الأسماء من خلال موقع Bustaname.com
حيث يوفر لك امكانية اضافة اسم الموقع المراد اختياره و وضع الأفكار التي تريد ان يقوم المحرك بإبتكارها كما هو موضح في لصورة التالية
موقع ناجح على الانترنت
في حقل  #1 نكتب اسم الموقع و الكلمات المساعدة مثلا انا اخترت موبايل ككلمة رئيسية و وضعت معه كلمات مساعدة مثل  Hub و  Get و Desk .
في القائمة  #3 قام الموقع بالبحث عن الكلمات و اعطائنا الأفكار الموجودة و المتوفرة
#4  يمكننا ان نقوم باختيار المواقع التي اعجبتنا و يمكننا مقارنة الأسعار و شراؤها من Buy Domain Through

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

الخطو ة الثانية

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

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

افضل هذه الشركات من وجهة نظرى :

الخطوة الثالثة

برمجة الموقع الإلكتروني
تعتبر برمجة المواقع الإلكترونية من اكثر الأمور التي ترهق اصحاب الأفكار الواعدة , مما يؤدي بهم الى الإحباط او التقاعس في برمجة المواقع الإلكترونية وذلك يعود لعدم المامهم بالأمور البرمجية بشكل عام او كيفية انشاء مواقعهم بشكل خاص . و مع التقدم الهائل و تطور العالم الرقمي قد تخطينا التعقيدات
البرمجية .
فلا داعي للبرمجة الخاصة والتي قد تكلفك ما يزيد عن  1000دولار في اقل الأحوال !
لماذا لا نقوم بتوفير هذا المبلغ بالكامل و نستخدم الأدوات المتاحة و المجانية و التي ستلبي احتياجاتنا %100 نعم  % 100اليك احد الإقتراحات التي تساعدك ...
انه ووردبريس ! . ربما قد سمعت عنه و لكنك لم تقم بتجربته الى الأن , او انك لا تعلم كيفية الإستفادة من هذا السكريبت و استغلال كامل امكانياته . فالووردبريس اصبح مرعبا بمعنى الكلمة حيث يمكنك انشاء اي موقع تحلم به باستخدام هذا السكريبت الرائع .

مقالة مفصلة عن وردبرس

الخطوة الرابعة

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

تعرف على المزيد عن انشاء موقع

تعرف على كيفية انشاء موقع متخصص

جوجل تطرح خدمة جديد لاقتراح رسمة من شخبطتك بتقنية Machine Learning او تعليم الآلة

جوجل تطرح خدمة جديد لاقتراح رسمة من شخبطتك بتقنية Machine Learning او تعليم الآلة
جوجل تطرح خدمة جديد لاقتراح رسمة من شخطبتك Google's AutoDraw

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

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

التقنية مجانية بالكامل ويمكنها العمل على الموبيل او التبلت او الجاهز الكمبيوتر المكتبى , وهذه التقنية قائمة على تعليم الآلة او Machine Learning . 


مازالت تقنيات تعليم الآلة Machine Learning تتطور يوم بعد يوم , لتجعل اجهزة الحاسب والمحمول أكثر ذكاء وتحاول محاكاة الذكاء البشرى , كانت مشكلة الحواسيب منذ القدم هى التعرف على الانماط والوجوه والاصوات التى يتعرف عليها الانسان بسهولة بفطرته , ولكن مؤخرا يبدوا ان العلماء قطعوا شوطًا كبيرًا فى جعل الآلة تفكر مثل الانسان وتفعل هذه الاشياء التى كانت حكرًا على فطرة الانسان !

امثلة اخرى على تعليم الآلة او Machine Learning
  • الاعلانات : دائمًا ما نجد اعلانات مناسبة لنا خاصتًا على المواقع الكبرى مثل فيسبوك وجوجل فالتعليم الآلة يلعب دور كبير فى اظهار اعلانات مناسبة للمستخدمين .
  • محركات البحث : تعتمد محركات البحث بشكل كبير على هذه التقنية من اجل اظهار النتائج المناسبة للمستخدمين وترتيب اوليات هذه النتائج 
  • فرز الاميلات : هل تسألت كيف يمكن فرز الاميلات المزعجة فى خدمات البريد الكبرى مثل Gmail , تعلم الآلة او Machine Learning هو الاجابة لتسؤلك .
  • سيارة جوجل : سيارة جوجل ذاتية القيادة مثال اخرى على Machine Learning .
  • تقنية التعرف على الوجوه او Face Recognition من العملاق Facebook .
ويوجد الكثير من الامثلة الاخرى ولعل هذه اشهرها .

مقالات مفيدة فى هذا الصدد :


تصاميم ملهمة لمواقع انترنت

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

فاليك عشرة تصاميم رائعة لصفحات مواقع  

يمكنك الانتقال إلى الموقع بالضغط على عنوان الموقع

1. The Next Rembrandt


2. Nosaj Thing




5. MarkMaker



ماهو API وما فائدته ؟

 

API او Application Programming Interface وباللغة العربية واجهة برمجة التطبيقات وما عليك من الترجمة العربية لانها غير دقيقة . API ببساطة هى نقطة الوصل بين بيئة تطويرية معينة والمطورين , حتى تتيح لهؤلاء المطورين الاستفادة من خدامات هذه البيئة بدون الحاجة إلى بناء كل شئ من الصفر . وبشكل عام هدف API هو اخفاء التفاصيل Encapsulation و ابراز طريقة الاستفادة من الكود . 

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

هذا بالضبط ما يحدث فى البرمجة عندما نستخدم كلاس او دالة او Plugin فى مشروعنا , فما يهمنا فعلًا هو كيف نستخدمه ليخدم مشروعنا وليس كيفية عمله .

مصدر الصورة

وإليك بعض الامثلة عن API

يوجد الكثير من الامثلة API's مشهورة نصادفها كل يوم مثلا الفيسبوك يتيح API للمواقع لتسجيل الدخول عن طريقه بدون الحاجة إلى بناء نظام تسجيل دخول من الصفر , فانت عندما تريد اضافة هذه الاضافة إلى موقعك لن تطلع على كيفية بنائها ولكن ما يهمك كيفية استخدامها لاضافتها لموقعك او تطبيقك , ويوجد الكثير من الامثلة الاخرى لل API مثل خرائط جوجل Google Maps التى تسمح للمطورين بعرض اجزاء من الخرائط لامكان معينة على تطبيقهم او موقعهم .

مثال اخر عندم تقوم بشراء شئ على الانترنت من موقع معين فهذا الموقع يستخدم API الخاصة بشركة VISA ليقوم بالتواصل معه وخصم المال من بطاقتك .

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

مثال اخير MySQL API فى لغة PHP فانت عندم تكتب استعلام مثل :
mysql_query('SELECT * FROM tablename');
فكل ما يهمنا هو ان الدالة للاستعلام من قاعدة البيانات ولكن الكثير من التفاصيل مخبأة عن المطورين 
و يوجد الكثير من الامثلة الاخرى ولكن كانت هذه امثلة شهيرة ولكن مفهوم API الشامل غير مقصور على هذه الامثلة ولكن كما ذكرنا فهو بشكل عام اخفاء وتغليف اجزاء معينة لاستخدامها بطريقة او باخرى , وإلى هنا تنتهى المقالة وشكرًا لكم .


مقدمة تعلم لغة HTML من الصفر

 
  • لغة HTML هى لغة مخصصة لبناء الهيكل العام للموقع , مثل الازرار والقوائم والروابط و النصوص وغيرها .
  • لا يوجد موقع يعمل بدون HTML فهى اساسية فى اي موقع .
  • لغة HTML سهلة كونها لغة تصف الصفحة ولا تملك المفاهيم الاساسية للغات البرمجة المتقدمة .
محتويات المقالة :
  • الهيكل العام
  • نبذة عن اللغة
  • التعليقات فى اللغة
  • بعض قواعد اللغة
  • العناوين headings
  • فقرات النصوص paragraphs
  • الروبط links
  • الصور images
  • خواص الوسوم Attributes
  • تنسيق النص text formating
  • الاقتباس blockquote
  • الالوان colors
  • الروابط links

النظرة الاولى

ناخد مثال على كود بسيط بلغة HTML 

<!DOCTYPE html>
<html>
<head>
   <title> صفحة تجريبية</title>
</head>
<body>
   <h1>مرحبا بك </h1>
   <p>HTML5 <em>ليست</em>صعبة ابدًا</p>
</body>
</html>


اي من هذه الثنائيات <html></html> , <title></title> تسمى تاج Tag  او وسم ومحتوي الوسم يكتب بين وسم البداية بدون / ووسم النهاية الذى يحتوي على رمز /

هيكل صفحة الويب الاساسية 

<!DOCTYPE html>  تمثل اعلان ان الصفحةهى بلغة HTML5 
<html>  هو التاج الاساس لصفحة الويب 
<head>  يحتوي على التعريفات الازمة لصفحة الويب
<title>  يحتوي عنوان صفحة الويب
<body>  يحتوي جسم صفحة الويب
<h1>  عناوين رائيسية فى الصفحة وتشير إلى اهمية النص بداخلها
<p>  تشير إلى نص بداخلها
<em>  تقوم بتفخيم النص بداخلها

معاينة الكود الخاص بنا

لغة HTML  يمكن قراءتها بواسطة المتصفح اذا كل ما عليك فعله هو كتابة اكواد HTML فى اي محرر نصوص مثل notepad  الخاص بالويندوز ويمكنك ايجاده فى قائمة start او من خلال widows + R  و اكتب notepad  ثم اضغط Enter , او يمكنك محرر نصوص متقدم مثل notepad ++  .

بعد كتابة الكود يتم حفظه مع امتداد .html  مثلا لو اسم ملفك home.txt غيره إلى home.html  , ثم افتح الصفحة home.html  مع متصفحك المفضل ومبروك عليك اول صفحة ويب .

نبذة بسيطة عن HTML

نحن الان مهيئين لمعرفة نبذة بسيطة على عن HTML , اول اصدار من HTML  كان فى عام 1991 وتوالت الاصدارات وصولًا ل XHTML  فى عام 2000 قبل وصول التحديثات الاخيرة فى عام 2014 تحت مسمى HTML5 .

التعليقات

التعليقات فى داخل صفحة الويب هى نصوص يقوم كاتب الكود باضافتها حتى توضح له بعض الامور ولا يراها المتصفح ولا تظهر على صفحة الويب . 

طريقة كتابة التعليقات فى صفحة HTML
<!-- comment here -->

بعض قواعد لغة HTML

غير حساسة لحالة الاحرف 

مثال :

<h1>اهلا بالعالم</h1>
<H1>اهلا بالعالم</H1>

السطرين السابقين متساوين تمامًا
ولكن يفضل الكتابة فى lowercase

حساسة للمسافة المفردة ولكن لاترى tab  او السطر الجديد

مثال :

<strong>T e s t o f s p a c e s </strong>
<strong>T e s t o f   s p a c e s </strong>
<strong>T e s t o f s
 p a c e s </strong>

لاحظ الخرج فى الثلاثة اسطر

اساسيات HTML

العنوانين Heading 

تتدرج العنوانين من h1 إلى h6 وفق الاهمية 

لنجرب هذا الكود لتوضيح الفكرة 

<!DOCTYPE html>
<html>
<body>

<h1>العنوان 1</h1>
<h2>العنوان  2</h2>
<h3>العنوان  3</h3>
<h4>العنوان  4</h4>
<h5>العنوان  5</h5>
<h6>العنوان  6</h6>

</body>
</html>

وبعد الحفظ بامتداد .html كما ذكرنا سابقا وليكن home.html  الان لنجرب فتح الملف مع متصفحين مختلفين وليكن chrome  و edge  او firefox  الان انظر الفرق .

الكود على فيرفوكس 

 نفس الكود على كروم 


الان لدينا ملاحظتين :

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

والملاحظة الاخرى  لماذا كل هذه الوسوم ؟ والاجابة ان اهمية هذه النصوص هى لمحركات البحث فمحركات البحث عندما تقوم بارشفة الصفحة ستعرف ان h1  هو الاكثير اهمية فى الصفحة فمنه يمكنها معرفة عما تتحدث الصفحة بشكل عام حتى تظهرها فى نتائج البحث , h2  اقل اهمية و هكذا . فلا يصح ان تستخدم h1  مثلا فقط لجعل النص اكبر ! وانما على حسب اهمية النص .

فقرات النص 

يتم وضع فقرات النصوص بعد وسم <p>

مثال :

<p>نص تجريبى 
نص تجريبى
نص تجريبى
نص تجريبى
</p>

بعض الملاحظات على الوسم  <p>
لايرى ايقاف السطر وبداية سطر جديد ولكن علينا استخدام <br> لبداية سطر جديد

مثال :

<p> نص تجريبى <br>
نص تجريبى<br>
نص تجريبى<br>
نص تجريبى<br>
</p>

يمكننا استخدام وسم اخر لنفس الغرض وهو pre ومعنى هذه الخاصية انها ان تتجاهل المسافات الفارغة او السطر الجديد وسيخرج النص كما كتبتها تمام .

مثال :

<pre>
نص تجريبى 
نص تجريبى
نص تجريبى
نص تجريبى
</pre>

الروابط 

يتم وضع الراوبط فى بعد وسم <a> 
وتشير الخاصية href  إلى المكان الذى يذهب اليه الرابط 
مثال :

<a href=”http://www.motwr.com”>motwr</a>
الصور

يتم تحديد الصور بالوسم <img>
ويتم تحديد مصدر الصورة فى الخاصية src
يتم تحديد النص البديل فى حال عدم وجود الصورة فى الخاصية alt
ويتم تحديد الطول والعرض فى الخاصتين height , width

مثال :
<img src="motwr.jpg" alt="motwr.com" width="104" height="142"> 

لاحظ ان الوسم <img> لايحتوي على وسم نهاية </img>

الخط الافقى

يتم استخدام <hr> لرسم خط افقى
مثال
<hr>

الخوص Attributes

اي عنصر من عناصر HTML  يمكن ان يحتوي attribute  او خاصية هذه الخاصية تضيف ميزة لهذا العنصر ويكتب بهذه الطريقة name=”value”  حيث name  هو اسم الخاصية و value  هو القيمة وسنتعرف خلال الدروس على الكثير من الخواص و فائدة كل منها .

من المثال :

<img src="motwr.jpg" alt="motwr.com" width="104" height="142"> 

يمكن ملاحظة ان كل من alt , width , height , src  هى خواص كل منها له اهمية كما سبق شرحها .

مثال اخر الخاصية title وتستخدم فى اعطاء عنوان وهذا العنوان يظهر عن الوقوف بالموس على العنصر .

مثال :

<h1 title=”motwr.com”>motwr</h1>

تنسيق النصوص text formating

تستخدم بعض الوسوم من اجل تنسيق النص بطريقة معينة إليك اشهرهم 
<b>  واضح
<strong>  مهم لمحركات البحث 
<i>  مائل
<em>  مائل
<mark>  عليه علامة
<small>  صغير
<del>  ملغى
<ins>  مدرج
<sub>  منخفض

ملاحظة الفرق بين strong  وb الاثنين نفس الشكل ولكن الفرق ان strong  يضيف اهمية لمحركات البحث .

الاقتباس blockquote 

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

<p>this example of blockquote:</p>

<blockquote cite="http://www.motwr.com/">
this some dummy text for example
</blockquote>

الالوان colors

يوجد العديد من الطرق للتعبير عن اللون 

اسم اللون

مثال :

Red
Green
Blue
Black

ويوجد 140 اسم لالوان مدعومة من HTML يمكنك الاطلاع عليها من هنا

طريقة RGB 

وهى نسب الالوان الاحمر و الاخضر والازرق على الترتين وتكتب بالطريقة التالية

rgb(255,255,255)
حيث اقصى قيمة للون هى 255 واقلها هى 0 

اللون فى النظام السداسى عشرى

اللون فى هذا النظام مكون من ستة خانات
مثال  #F0F8FF
وكل شفرة تشير الى لون معين على حسب نسبة الاحمر والاخضر و الازرق فى هذا اللون
فميثل كل زوج ارقم من اليسار نسب الاحمر والاخضر والازرق بالترتيب

الروابط links

كما تعرفنا بشكل سريع قبل ذلك على الراوبط 

مثال :

<a href=”http://www.motwr.com”>motwr</a>

ملاحظة href  يمكن ان تقود إلى عنوان ويب او مسار لملف اخر فى المشروع

 مثال :

<a href=”pages/about.html”>motwr</a>

حيث المسار pages/about.html موجود إلى جانب الصفحة المكتوب بها هذا السطر

سنتعرف الان على بعض الخواص الاضافية للرابط :

الخاصية target

تستخدم فى تحديد كيفية فتح الرابط وتاخذ القيم :

_blank  وتعنى فى تبويب جديد 
_self   وتعنى فتح الرابط فى نفس الصفحة وهى الافتراضية
_parent   تفتح الرابط فى الايطار الذى يحيويه
_top   تفتح الرابط فى الايطار الرئيسي

استخدام الصورة كرابط 

يمكن استخدام الصور لتعمل كرابط 

مثال :

<a href="default.html">
  <img src="logo.png" alt="HTML tutorial">
</a>
فى المثال السابق اللصورة logo.png  تعمل كرابط يقود إلى الصفحة default.html

انتهينا اليوم من مقالتنا وشكرا لكم . يتبع