أفضل المصادر العربية لتعلم تصميم وبرمجة مواقع الأنترنت

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

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

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

أفضل مواقع ومصادر تعلم لبرمجة الويب وتصميم وتطوير مواقع الأنترنت 

1 - مشروع مطوري الويب العربي 

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

رابط الموقع :
http://www.advphp.com/

2 - شبكة عبد الله عيد 

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

رابط الموقع
http://www.abdullaheid.net/

3 - دورة تصميم وبرمجة مواقع الإنترنت - Ali Hamdi

في هذه القناة الرائعة على موقع اليوتيوب التي تحتوى على 5 دورات تعليمية بالفيديو تتيح لك تصميم موقعك مجاناً في كل دورة طريقة مختلفة عن الأخرى في تصميم مواقع الأنترنت حيث يتيج لك في الدورة في المستوى الاولى كيف تصميم موقعك أبتداً من برنامج الفوتوشوب وتكويد هذه القالب الى HTML و CSS وفي باقي المستويات يمكنك تعلم لغات ومهارات مختلفة تساعدك في عملك على برمجة موقعك مثل "photoshop, HTML, CSS, Javascript Jquery , PHP and MySQL"   بعد أتمامك هذه الدورة ستصبح محترف بكل معنى الكلمة في برمجة الويب .

يمكنك متابعة الدروس والدورات من هنا 

الخلاصة : 

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

تعرف على افضل 10 لغات برمجة شعبيةً حول العالم

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

لذلك بسبب كثرة اللغات البرمجية التي اصبحت عديدة وهي تزايد وتطور مستمر وبسرعة هائلة , قامت منظمة تسمى IEEE التي قامت بدورها بالتعاون مع منظمات شهيرة اخرى لا تقل عن شهرتها ( كجوجل و  Xplore ... ) حيث عملت على جمع احصائيات لمل لغة برمجة منفردة على حدة التي يستخدمها المبرمجون , وقامت بتصميم الانفوجرافيك التي سنعرضة في هذا المقال على موقع المطور .نت , حبث تتفاوت الشعبية بين اللغات العشر التي اعتبرت هي الاكثر شعبية من غيرها من لغات البرمجة الكثير التي يستخدمها المبرمج في عملة كان الترتيب مستحق للغة الجافا التي تصدرت القائمة كا اكثر لغات البرمجة شعبيه واستخداماً , ولغة c التي تعتبر افضل اللغات من عام 1970 الى عام 2014 حقاً انها لغة رائعة

اليكم ترتيب لغات البرمجة العشر الاكثر
1- JAVA
2- C
3- C++
4- C#
5- PYTHON
6- JAVASCRIPT
7- PHP
8- RUBY
9- SQL
10 - MATLAB

 فهي الانفوجرافيك  لغـات البرمجة العشـرة الأكثر شعبيـة ؟ فرجة ممتعة

اخبرنا رأيك بالترتيب وهل تعتبرة منطقيا ؟ شاركنا رأيك في التعليقات 

أفضل 15 مواقع ومصادر تعلم البرمجة بانواعها مجانا !

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

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

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

10 مواقع مميزة لتعلم البرمجة ومهارات أخرى

1 - مشروع مطوري الويب 

انطلق الموقع في عام 2010 من جمهورية مصر العربية , يعد من افضل مواقع تعلم برمجة المواقع على ساحة الويب العربية , يعرض لنا دورات برمجية بالفيديو , باسلوب متقدم وعصري , لتصل المعلومة الى المتلقى بشكل أفضل , يستخدم اسلوب السلاسلة في عرض المعلومة باسلوب حديث عن طريق دورات تعليمية , الهدف منها هو تخريج نخبة من المبرمجين , هناك دورات للغات HTML، CSS، PHP، JQUERY، PHP SCRIPT باللغة العربية , فاذا اردت البداية في البرمجة فالموقع فهو مكانك المناسب
رابط الموقع : مطوري الويب

2 - codecademy

موقع امريكي يتيح لك تعلم البرمجة بأمكانيات هائلة وكبيرة لتعلم لغات برمجة الويب المتقدمة كا php و javascript و ruby وغيرها الكثير من لغات البرمجة , يمكنك التسجيل في الموقع مجاناً عن طريق حسابك في الفيس بوك او التويتر او جوجل بلس , يقدم لك الموقع محرر اكواد يتيح لك تجربة الاكواد بدون الحاجة الى خادم , في الموقع اختار اللغة البرمجية التي تريد تعلمها , سواء كنت مبتدى او لدية خبرة بسيطة في البرمجة او كنت محترفاً فلا بد ان تحتاج الى هذه الاكاديمية .

رابط الموقع : codecademy

3 - SCRATCH 

هذه الموقع صمم لللاطفال الصغار لتعلم البرمجة فهو متناسب مع عقول الاطفال , من مميزات تعليم البرمجة مع الكثير من التسلية مع التعلم , يعمل بتقنية التي يحبها جميع الاطفال عن طريقة السحب ورقائق ملونة بالوان جميلة ومختلفة , حيث يقوم الطفل بتشكيل وكتابة الاكواد دون ان يكت حرف واحد , اليس هذا رائع فالموقع كنز مميز لجميع الاطفال في الموقع اكثر 7,620,627 مشروع تم نشرة في الموقع

رابط الموقع : scratch

4 - CODEDEAVEBGERS

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

رابط الموقع : codeavengers

5 - MSDN. Microsoft.com

موقع مقدم من شركة مايكروسوفت لشجيع الكثيرين , على موقعها الرسمي , هناك الكثير من الدورات هناك منها المجانية او المدفوعة , لمنتجاتها كــ Visual Studio و والكثير من الدورات التعليمية لتطوير التطبيقات ايضاً تطبيقات الويندز او ويندز فون كما في الموقع دورات لغة Visual Basic و c++ والكثير من اللغات .

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

6 - Instructables

7 - Developers.Google.com

8 - Developer.Andoroid.com

9 - شبكة عبدالله عيد

10 - W3Schools

11 - Code Avengers

12-codeschool

13 - treehouse

14- LearnStreet

15 - Udacity

خلاصة المقال : 

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

إضافة خط جديد للموقع واستعماله في CSS

 السلام عليكم ورحمة الله تعالى وبركاته

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

ولتعريف الخط الجديد كل ما عليك اضافة هذا الكود في بداية ملف css في موقعك

} font-face@

// إسم الخط وهو الذي ستقوم بإستعماله عندما تريد تطبيق الخط

font-family:fontname;

// رابط الخط

src: url('font-link') d

{ 

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

 

} font-face@

// إسم الخط وهو الذي ستقوم بإستعماله عندما تريد تطبيق الخط

font-family:almtwr;

// رابط الخط

src: url('almtwr.ttf') d

{ 

لتحميل الكود من هنا 

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

 www.arfonts.net
www.arafonts.com

 www.dafont.com
www.1001freefonts.com

إنشاء اضافات جوجل كروم بسهولة دون خبرة برمجية

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

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

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



في البداية متابعي المطور.نت عليك الدخول على الموقع كل ما عليك اختيار المكتبات التي ترغب او تريد استخدامها داخل الاضافة التي تريد صنعها , وتختار نوع الاضافة والصلاحيات التي ترغب انت في الحصول عليها , بعد ان تقوم بكل الخطوات يمكنك الظغط على Download it! , ليتم تلقائياً تنزيل الملف الخاص بالاضافة لحفظة على الحاسوب وتجربة الاضافة مباشراً بشكل حي .

[برمجة] اضافة خاصية border على الصور بالتقنية CSS

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

اليكم مثال مباشر على هذا الخاصية كما في الاسفل الكود ومعاينتة في الصورة لاضافة صورة دائرية بنسبة محددة لاضافة دائرية تماماً نضع النسبة 50% ولتقليل دائرية الصور نخفض النسبة الشرح بسيط ويمكنك معاينة الاكواد التي في الاسفل والصورة التي تمثل معاينة الاكواد لتفهم ما اعنية 

<img src="plus.jpg" style="border-radius: 0px;">

<img src="drive.jpg" style="border-radius: 10px;">

<img src="earth.jpg" style="border-radius: 20px;">

<img src="play.jpg" style="border-radius: 50%;">

يمكنك معاينة نتيجة الاكواد في الصورة

[برمجة] شرح وحدة القياس REM في CSS

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

اليوم في هذه التدوينة على المطور.نت سنشرح الوحدة الجديدة  REM في  CSS ( ليس جديداً جداً ) , هناك وحدات قياس نستخدمها في CSS مثل :

وحدة PX : وهي الوحدة الاكثر انتشاراً وسائده بين المصممين لتحديد حجم النص في لغة CSS ,  وذات موثوقية عالية  (فالبكسل بكسل أينما ذهبت), وايضاً لاننسى وحدة EM : ولكن اليوم سنتحدث في هذه التدوينة على المطور.نت عن وحدة REM .

وحدة REM الجديدة:

تسخدم وحدة REM بشكل مشابهة وقريب من وحدة EM التي ذكرناها سابقاً , ولكن هناك فرق كبير وفرق جوهري بينهما , فلو بدأنا في تكون وحدة REM  التي هي اختصار لكلمة   Root EM  ,

 حيث تتركز وحدة REM بشكل اساسي على حجم نصل العنصر الأساسي في الموقع ( الصفحة ) والمقصود ( وسم HTML ) , وجميع حساباتها بسيطة وليست معقدة .

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

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

قائمة احترافيه CSS3 مواقع التواصل الاجتماعي بلوجر 2014

بسم الله الرحمن الرحيم الرحيم

قائمة احترافيه CSS3 تحت الهيدر للموقع مع خاصيه الهوفر

بعد الانتهاء من تصميم هذه الاداء وتطويرها اقدمها لكم على مدونة المطور.نت , الاضافة يظهر فيها صناديق مواقع التواصل الاجتماعي , قائمة جميلة بتقنية css بمدونات بلوجر 2014 , يمكنك اضافة تحت الهيدر

معاينة الاضافة  !!

طريقة التركيب  !!

الذهاب الى بلوجر >> التخطيط >> اضافة اداة وضع فيها الكود الاتي

 <ul class="ul_hm">
<li>
<a class="BeHsociallinks" target="_new" href="Facebook Link">
<div id="BeHsocialfb" style="background-position: 0px 0px;">Facebook</div>
</a>
<a class="BeHsociallinks" target="_new" href="Twitter Link">
<div id="BeHsocialtwit" style="background-position: -86px 0px;">Twitter</div>
</a>
<a class="BeHsociallinks" target="_new" href="LinkedIn link">
<div id="BeHsociallink" style="background-position: -172px 0px;">Linkedin</div>
</a>
<a class="BeHsociallinks" target="_new" href="YouTube link">
<div id="BeHsocialytube" style="background-position: -258px 0px;">You Tube</div>
</a>
<a class="BeHsociallinks" href="Blog link">
<div id="BeHsocialblog" style="background-position: -344px 0px;">Blog</div>
</li>
</ul>

<style>

.subscribebutton .mj_btnbg {
    color: #141414;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    text-transform: uppercase;
}
.ul_hm li div {
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih0PUtGULkvsQ6kppAGVjWQkEIo3H2qMUHVQb0_KsJ8fgUfA80qO79uvQlr9_STnjBOGLFebrTRzE_3J2LRJz8jvLyL-Q7AgwMVSLEVk0ZqL0dXH_r6GD4FcBRQBe0Zcj3GYog3U2Svbo/s1600/social_icon_sprite.png");
    float: left;
    height: 83px;
    margin-right: 3px;
    width: 83px;
}

.BeHsociallinks {
    font-size: 0;
}
#BeHsocialfb:hover {
    background-position: 0 -86px !important;
}
#BeHsocialtwit:hover {
    background-position: -86px -86px !important;
}
#BeHsociallink:hover {
    background-position: -172px -86px !important;
}
#BeHsocialytube:hover {
    background-position: -258px -86px !important;
}
#BeHsocialblog:hover {
    background-position: -344px -86px !important;
}

ul li {list-style: none outside none;}
</style> 

تحميل الكود