تظليـل الكود
‏إظهار الرسائل ذات التسميات انترنت. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات انترنت. إظهار كافة الرسائل
الجمعة، 22 يناير 2016

إليكم لائحة بأكثر من 100 موقع مميز اخترناها لكم ...

إليكم لائحة بأكثر من 100 موقع مميز اخترناها لكم ...

websites
websites


  1. worldometers موقع متخصص في جمع بيانات العالم وتحديثها وعرضها للعموم، إن كنت صحفيا أو باحثا فلا غنى لك عنه.
  2. pluralsight تستطيع من خلاله الحصول على دورات تدريبية وتعلم مهارات في مجالات مختلفة، يتميز بتصميم رائع وسهولة تصفحه.
  3. futurelearn موقع شبيه بسابقه لكنه أفضل وأروع لوفرة الدروس والدورات التدريبية التي يحتويها في كل المجالات.
  4. highbrow بفضله ستصلك يوميا أفضل الاختيارات للدورات المتاحة.
  5. coursmos إن كنت تحب تعلم أشياء جديدة لكنك لا تجد وقتا ربما هذا الموقع يناسبك.
  6. prezi الآن مع هذا الموقع تستطيع صنع عروض تقديمية في غاية الإبداع والاحترافية بعيدا عن التقليد والمكرر.
  7. noexcuselist سيوفر لك دليل مواقع لما تريد تعلمه.
  8. wevideo موقع يمكنك من القيام بعمليات تحريرية للفيديوهات مباشرة على الإنترنت.
  9. MindMup نظم أفكارك وخططك الذهنية مع هذه الأداة البسيطة.
  10. Class Central احصل على دورات مجانية من جامعات عالمية مرموقة.
  11. Mendeley موقع لا غنى عنه بالنسبة للطلاب والباحثين حيث سيساعدهم في إدارة وتنظيم بحوثهم، كما يمكنهم من العثور على مستجدات الأبحاث في تخصص معين.
  12. breachalarm اكتشف مع هذا الموقع إن كان بريدك الإلكتروني مخترقًا، كما يمكنه إخطارك في حالة الاختراق مستقبلا.
  13. quora الموقع الشهير المتخصص في طرح الأسئلة والإجابات عنها من قبل الجمهور.
  14. Canava لا داعي لأن تكون خبيرا بالفوتوشوب هذا الموقع سيكفي لإنجز تصاميم مبدعة ببساطة.
  15. watch2gether موقع يقدم لك خدمة فريدة، يجعلك تستمتع مع أصدقائك على الإنترنت في مشاهدة الفيديوهات والأفلام في نفس اللحظة وكأنكم مجتمعون في قاعة سينما.
  16. Bbc learning تعلم أي لغة تريدها مع موقع البي بي سي بشكل احترافي.
  17. Livemocha موقع خاص بتعلم اللغات.
  18. Busuu لتعلم أي لغة تتطلب التواصل والممارسة هذا الموقع يضم مجتمعات لتعلم اللغات.
  19. 360riyadl موقع يأخذك في جولة إلى مكة حيث أنت القائد.
  20. entrepreneur دليلك الشامل للتجارة وريادة الأعمال.
  21. priceonomics مدونة متخصصة في ريادة الأعمال ستجد الكثير من النصائح الثمينة لإنشاء شركتك وزيادة كفاءة نشاطها.
  22. creativetimereports بنك للتقارير المرئية حول مجموعة من الظواهر والأحداث.
  23. thisiscolossal. موقع يضم صورًا فنية معبرة للغاية تختزن داخلها أفكارًا وإبداعًا.
  24. atavist موقع يسهل عليك بناء قصص مصورة بسهولة ونشرها على الإنترنت.
  25. Cups of tea 7 يتيح لك الموقع طلب مساعدة شخصية من مدربين وخبراء في كل المجالات.
  26. syncThing تسمح لك الخدمة بمشاركة شاشة حاسوبك مع الأصدقاء وهكذا يمكنك مزامنة العمل على ملفاتك مع أفراد بعيدين عنك.
  27. mega Desktop Sync يوفر لك الموقع مساحة تخزين لملفاتك تعادل 50 جيجابايت مجانا.
  28. Infographie اصنع تصاميمك المبدعة بنفسك عبر موقع الإنفوغراف هذا.
  29. pickMonkey موقع مجاني لتعديل الصور بطريقة أسرع وأسهل.
  30. Investopedia عودة إلى عالم المال هذا الموقع يقدم لك كل ما تحتاجه لإدارة شركتك وأموالك وطريقة الاستثمار الفعالة وغيرها من الدروس.
  31. instructables موقع سيساعدك في استغلال الأشياء لصنع أدوات معينة، إنه يقدم لك الإرشادات خطوة خطوة لبناء أي شيء تتخيله.
  32. unplugthetv موقع اليوتوب أصبح مليئا بالغث والسمين من الفيديوهات، هذا الموقع سيتكفل بانتقاء الفيديوهات المفيدة فقط لك.
  33. lumosity الإنترنت ليس مجالا للتعلم فقط بل يمكنك أيضا الاستمتاع، اكتشف مجموعة من الألعاب الذكية والألغاز على هذا الموقع.
  34. theawl موقع يوفر كتابات جميلة جدا في مختلف المواضيع الثقافية واليومية.
  35. hindawi أحد المواقع العربية البالغة الجودة، يقدم ترجمات وكتابات ورصينة متنوعة التخصصات، كما يتيح تحميل الكثير من الكتب المنتقاة في مختلف المجالات.
  36. raqeb موقع متخصص في ترجمة المقالات والأبحاث التي تعدها كبريات الجرائد ومراكز البحث العالمية.
  37. prey Project خدمة تساعدك في البحث عن جهازك الحاسوب أو الهاتف المفقود.
  38. Connected researchers باختصار هذا الموقع هو ملاذ الباحثين لأنه يقدم جميع الخدمات المتعلقة بهم.
  39. Educad موقع عربي يساعد الطلاب في تعلم منهجية البحث العلمي.
  40. learnsit يحتوي الموقع على مقالات ودروس متلفزة من مختلف الخبراء.
  41. Sci – Hub إن وجدت ورقة بحثية قيمة لكنها مدفوعة انسخ رابطها وضعه داخل هذا الموقع لتحصل عليها مجانا.
  42. Polishmywriting تساعدك الخدمة في تجنب الأخطاء اللغوية في كتابتك.
  43. Online dictation موقع يحول الكلام إلى كتابة بشكل مباشر.
  44. curious دروس فيديو مجانية لتحسين مهاراتك المهنية.
  45. creativelive يقدم الموقع دورات إبداعية من خبراء عالميين مجانا.
  46. stuk أنت تريد تعلم البرمجة ولا تعلم عنها غير الاسم إذن هذا الموقع لك.
  47. platzi دروس في التسويق والبرمجة والتصميم يوفرها الموقع.
  48. dash الموقع الأفضل لتعلم إنشاء المواقع على شبكة الإنترنت.
  49. guides يمكنك أن تحصل على دليل متكامل ينير لك الطريق في مجالات متعددة تختارها عبر الموقع.
  50. snapguide يشبه سابقه غير أنه يمتد ليشمل مجالات كثيرة حيث يعرفك بطريقة القيام ببناء أشياء عديدة.
  51. Pianu تعلم العزف على البيانو بطريقة تفاعلية.
  52. yousician نفس الشيء مع الغيتار.
  53. Longreads اقرأ تحليلات وكتابات طويلة ومعمقة.
  54. openLibrary موقع لتحميل الكتب مجانا.
  55. Audio book bay موقع لتحميل الكتب الصوتية بدون قيد أو شرط.
  56. Google Docs لتحرير مستنداتك على الإنترنت مباشرة.
  57. keepmeout قم بإدارة وقتك على شبكة الإنترنت بواسطة هذا الموقع.
  58. visualcv احصل على تصميم جاهز وجذاب لسيرتك الذاتية ليسهل الحصول على عمل.
  59. my wifi router خدمة لمشاركة شبكة الإنترنت مع أصدقائك بسهولة شديدة.
  60. كورساتي محرك بحث لدورات التعليمية في الأرشيف العربي.
  61. slide Rule يمكنك العثور على دورات ودروس في أي مجال تتخيله فقط ادخل لمحرك البحث الخاص بالدورات هذا.
  62. Social Fixer for Facebook تمكنك الخدمة من إدارة صفحتك الفايسبوكية بكفاءة، حيث يمكنك حذف ما لا ترغب فيه.
  63. Awesome Screenshot تستطيع بفضل هذه الخدمة أخذ صورة لصفحة أو جزء منها، مثلما تتيح لك الخدمة التعديل عليها ونشرها.
  64. Bitly لاختصار روابط المواقع.
  65. languagetool موقع يمكنك من التحقق من الأخطاء اللغوية حيث يشمل عشرين لغة.
  66. Create Printable Calendar احصل على التقويم الخاص ببلدك بما في ذلك أيام العطل والأعياد وحمله.
  67. Tab Resize – split screen layout تحكم في طريقة عرض التبويبات التي تفتحها عموديا أو أفقيا أو غير ذلك.
  68. Zero Install تتيح لك الخدمة بتجربة الإضافات دون تثبيتها على حاسوبك.
  69. Documentary Heaven شاهد مئات الأفلام الوثائقية هنا.
  70. TopDocumentaryFilms مزيد من الأفلام الوثائقية المنتقاة.
  71. Soundcloud استمتع بالموسيقى فهي تخفف التوتر وشارك مقاطعك المفضلة مع أصدقائك.
  72. internet Archive أرشيف الإنترنت سيجعلك تصل إلى كل المواد القديمة المنشورة على الشبكة حتى لو تم حذفها على صفحاتها الأصلية.
  73. retail Me Not قبل أن تشتري شيئا على الإنترنت ابحث عن الكوبونات المناسبة في هذا الموقع لتخفيض السعر.
  74. Color إذا كنت أو كنتِ من هواة الألوان والديكور فهذا الموقع يناسبك.
  75. Account killer لحذف أحد حساباتك الاجتماعية على شبكة الإنترنت بشكل نهائي استعمل هذا الموقع.
  76. Inkscape لهواة الرسم.
  77. flux خدمة تضبط الإضاءة وسطوع الشاشة تلقائيا حسب التوقيت.
  78. buzzfeed أحد أكثر المواقع الإلكترونية الإعلامية تميزا على شبكة الإنترنت.
  79. powerinbox إذا كنت تعاني من الرسائل المزعجة والإخطارات المتكررة فيمكنك بواسطة هذه الأداة إلغاء اشتراكاتك ببساطة.
  80. viddyjam اكتب فقط أغنيتك المفضلة أو اسم الموسيقي المفضل لديك ثم استمتع.
  81. homestyler قم بتصميم بيت أحلامك بنفسك وضع الديكور المناسب له فقط على هذا الموقع.
  82. Youtube trend تعرف على الفيديوهات الأكثر مشاهدة على اليوتوب في الفترة الحديثة.
  83. brainpickings موقع لمن يريد أن يمتع ذهنه بالثقافة والمعرفة.
  84. edsurge موقع مفيد للطلاب.
  85. stand خاص بالتلاميذ والأطفال.
  86. smithsonianmag موقع يقدم آخر الأخبار العلمية ومستجدات الأبحاث في مجالات مختلفة.
  87. wordhippo سيساعد من يرغب في تعلم لغة معينة حيث يعطيك مرادفات وأضداد ومشتقات وغير ذلك للكلمات التي تكتبها.
  88. acapela-box يمكنك من خلال هذا الموقع تحويل النصوص المكتوبة إلى مقاطع صوتية فقط اكتب ما تريد باللغة التي تريدها بما فيها اللغة العربية ليتحول النص إلى كلام وهو قابل للتحميل أيضا.
  89. Instant Translate لا تحتاج بعد الآن للانتقال إلى صفحة جوجل للترجمة، يمكنك مباشرة ترجمة العبارات أو الكلمات التي ترغبها بمجرد ضغط الزر الأيمن فوقها.
  90. DETECT بواسطة هذا البرنامج المجاني تستطيع عمل مسح لجهاز الحاسوب لرصد أي اختراق أو محاولات تجسس وإزالتها.
  91. onearth موقع جيد في مجال البيئة والمناخ.
  92. creativecommons إن كنت تبحث عن الإبداع والحرية والمواضيع الشيقة ستجدها في هذا الموقع.
  93. chacha موقع مخصص للأسئلة والأجوبة.
  94. Arabictorrent موقع تورنت عربي يمكنك من تحميل أفلام مترجمة وبجودة عالية.
  95. numberz تستطيع من خلال هذا الموقع معرفة صاحب رقم هاتف ما بمجرد تركيبه.
  96. nitrocloud عبر هذا الموقع يمكنك تحويل ملفات pdf إلى صيغة وورد بسهولة.
  97. vocaroo موقع لتسجيل الصوت.
  98. aiR PANO بواسطة الموقع تستطيع التجول افتراضيا في العديد من مناطق العالم.
  99. StumbleUpon دليلك لأفضل المواقع في مختلف المجالات.
  100. OnlineConcersion من خلال هذا الموقع يمكنك تحويل ما تريد إلى ما تريد!
  101. fetching إن تذكرت معلومة قيمة لكنك نسيت عنوانها، فلا تقلق هذا المحرك سيبحث لك عن المعلومة في الصفحات التي قمت بزيارتها سابقا.
  102. CIA Factbook موقع وكالة المخابرات الأمريكية، يحتوي على معلومات دقيقة وتفصيلية متاحة للعموم حول كل بلدان العالم.
  103. yts أحد أفضل المواقع لتحميل الأفلام العالمية وبجودة عالية.

9:45:00 م

تعرف علي مصمم الويب ومطور الويب والفرق بينهما Designer vs Developer

تعرف علي مصمم الويب ومطور الويب والفرق بينهما

Designer vs Developer
Designer vs Developer



Designer vs Developer
هذه الشركة تبحث عن مصمم ! وهذه الشركة تبحث عن مطور !!! .”أما اذا كنت من سكان المحروسة فانت حيكون مطلوب منك انك تشتغل الاتنين ومش بعيد كمان جرافيك ديزاينر :)
تعالوا مع بعض نقرأ المقال…



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





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

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

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




الويب ديفيلوبر Web Developer
ياتى بعد ذلك دور او مهام الويب ديفلوبر Web Developer مطور الموقع او مبرمج الموقع فهو شريك أساسي للمصمم وهو الذي يتسلم منه التصميم .حيث يبدا فى التعرف على طلبات العميل فعليا والمدخلات والمخرجات.والعمليات المطلوبة بالموقع وعلي أساسها يحلل الطلب ويقوم بعمل قاعدة البيانات Databaseالتي سوف تكون مخزن لبيانات الموقع.ويحدد أنواع البيانات ..وبعد ذلك يقوم بتحليل الموقع واستخدام اى لغة من لغات برمجة الويب مثل .Php or Asp.net ومن خلالها يقوم ببرمجة الموقع وعمل لوحة تحكم Content Management System تمكن صاحب الموقع من إدارة موقع الويب وتحديث وإضافة المحتوي. و كذلك الحذف او التعديل وغيرها من العمليات المطلوبة . كل هذا من خلال لوحة تحكم واحدة. كما يقوم مطور الويب بعملصلاحيات للإفراد… هذا مدير عام وهذا مشرف وهذا مجرد مستخدم يمكنه التسجيل في الموقع، ولكل شخص صلاحية معينة ينفذها بالموقع ولا يتعدي صلاحيات الآخرين. وأيضا يركز علي حماية الموقع وتأمينه ضد عبث المخترقين والوصول لقاعدة البيانات.




وهكذا نكون قد تعرفنا على الفرق بين مصمم الويب Web Designer ومطور او مبرمج الويب Web Developer .



والسوال الان ما هى البرامج واللغات التى يستوجب على كل من المصمم والمطور اجادتها واتقانها .
  • Web Designer
  • – يهتم بمظهر الموقع – يستخدم HTML – CSS – JavaScript – يهتم بالالوان والتصميم. – بورتفوليو الأعمال أهم من الشهادة العلمية.
  • – متوسط الراتب 47 الف دولار سنويآ
  • Web Developer
  • – يهتم بأداء الموقع – يستخدم PHP .NET Python V Ruby – يهتم بالتفكير المنطقي وتقنيات عمل الموقع. – يجب ان يجتاز اختبارات ويحصل علي شهادات في التكويد.
  • – متوسط الراتب السنوي 85 الف دولار.
هذا ويعتبر كل من المصمم والمطور هما شريكان أساسي بموقع الويب لأخراجه إلي النور من مجرد فكرة إلي موقع فعلي يتفاعل مع الزوار ويحقق الفائدة المرجوة منه .
ونصيحتى لكل مبتدىء فى عالم الويب تمهل ولا تتسرع وحدد الى اى من المجالين تحب وتفضل هل تحب الكود والبرمجة ام تحب التصميم .

شاهدأيضا : 

4:00:00 م

كيف تصبح مطور ويب؟ من أين تبدأ وماذا تتعلم

كيف تصبح مطور ويب؟ من أين تبدأ وماذا تتعلم

web,developer
web,developer



السلام عليكم ورحمة الله وبركاته
في موضوعي هذا سأتحدث عن مجال تطوير مواقع الويب, كيف تبدأ لتصبح مطور ويب وماهي مصادر التعلم وماذا تتعلم وذلك من خلال تجربتي في هذا المجال.
مقدمة:
مفهوم السيرفر والدومين؟
تخزن مواقع الانترنت على أجهزة كمبيوتر عملاقة بمواصفات عالية موصولة مع انترنت مستمر وبسرعة عالية وهذه الأجهزة تسمى المخدمات (السيرفرات) server وتجمع هذه السيرفرات في شركات انترنت وتسمى الشركات التي لديها عدد كبير من السيرفرات باسم داتا سنتر data center وتقوم هذه الشركات بـتأجير السيرفرات للمطورين لكي يقوموا بتخزين مواقع الانترنت عليها. وكالعادة السيرفر له نظام تشغيل ويمكن أن يكون ويندوز أو لينوكس ... الخ


servers
servers


الصورة أعلاه لداتا سنتر (تجمع سيرفرات) والصورة التالية ليسرفر واحد


server
server 


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

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

هذه السيرفرات يتم تقسيمها إلى مساحات صغيرة hosting ويتم ربط كل مساحة بعنوان domain (نطاق) مثل yoursite.com وتوضع ملفات المواقع على تلك المساحات
بخصوص النطاقات أيضاً يوجد شركات كثيرة توفر إمكانية بيع النطاقات / الدومينات / domains سوءاً بشكل فردي أي دومين واحد أو عدة دومينات وهو ما يسمى ريسلير.وكي لا أنسى هناك الكثير من المواقع التي تقدم استضافات مجانية free hosting و أنصح بالتجربة مع الاستضافات المجانية قبل الشروع في الاستضافات المدفوعة.

how to be web developer

ما الفرق بين مصمم, مبرمج, مطور ويب؟

مصمم الويب أو مصمم مواقع الانترنت هو الشخص الذي يقوم بتصميم الهيكل الخارجي للموقع من صور وخلفيات وأماكن توضع كل أجزاء الموقع من نصوص وعناوين ... الخ ويحتاج إلى خبرات في كل من photoshop, html, css وربما يحتاج قليلاً من javascript



web designer
web designer

مبرمج مواقع الانترنت: هو الشخص الذي يقوم ببرمجة الموقع من حيث الرابط بين الصفحات وجلب البيانات من قاعدة البيانات أو إدخالها ويحتاج لغات برمجة مثل php, asp, python وقواعد بيانات مثل mysql ...
مطور الويب: هو الذي يجمع بين الاثنين السابقين معاً أي لديه مهارات في البرمجة والتصميم معاً ويضاف لها في بعض الاحيان مهارات في التعامل مع السيرفر وإدارته.


وفي الشركات الكبيرة التي تختص بمجال تطوير الويب يتم التقسيم بين أدوار الموظفين فمنهم من يختص بالتصميم ومنهم من يختص بالبرمجة وحتى في كل جزء ربما يتم تخصيص وتقسيم الأدوار والواجبات
نقطة البداية photoshop :

photoshop
photoshop 



في حال اخترت أن تكون مصمم أو مبرمج أو مطور فإنه لابد أن تكون على معرفة بمجال التصميم وهنا يتوجب عليك أن تكتسب بعض المهارات في مجال التصميم ولعل من أشهر البرامج عالمياً وأكثرها استخدماً هو برنامج adobe photoshop وليس مطلوباً منك أن تكون محترفاً جداً فيه حتى تستطيع التحويل لمصمم أو مطور ويب بل يكفي وجود بعض المهارات في التعامل مع الصور وتقطيعها والتحكم بها. طبعاً كلما زادت خبرتك فيه فهذا أفضل, لكن لو تعلمت الأساسيات وأجدت استخدامها فلا بأس
ليس في بالي دورات معينة لكن من المواقع التي تعنى بدروس الفوتوشوب :
محترفي الفوتوشوبقلعة الفوتوشوب و , من المواقع بالانجليزية tutsplus  دورة عربية مدحها البعض على موقع أرشيف بالضغط هنا (لم أحضرها بصراحة) وفي موقع ليندا (انجليزي) دورة متقدمة مفيدة لكن بعض معرفات لغات البرمجة الهيكيلية

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


 HTML
 HTML




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

CSS

الخطوة الثالثة هي تعلم css وهي (لغة) مختصة بتصميم الصفحة وتنسيقها مثل ألوان النصوص وخلفيات بعض الأجزاء والظلال والإطارات وما إلى ذلك أي تهتم بالتنسيقات على العناصر التي تم إضافتها باستخدام HTML وآخر إصدارين هما CSS2, CSS3 وفي الأخير 3 يوجد إضافات مثل الظلال والتدرجات وليس كل متصفحات الانترنت تظهر هذه المؤثرات إنما تظهرها فقط الإصدارات التي تدعم css3 وكل الإصدارات الأخيرة للمتصفحات أصبحت تدعهما
Javascript
تكتب اختصاراً JS وتهتم هذه اللغة بالتفاعل مع عناصر الصفحة مثلاً عند الضغط على زر يظهر تنبيه أو يختفي عنصر أو يظهر عنصر آخر أو يتحرك عنصر أو يتغير تنسيقه وهي لغة تفاعلية رائعة وتضفي مزيداً من الروعة والجمالية والكمال لموقعك ويكاد لا يخلو موقع منها وهي تأتي في الخطوة الرابعة من خطوات تعلم تطوير الويب

 بعد إتقانك للغات الثلاثة HTML, CSS, JS ما الذي ستصبح قادراً على فعله؟

ستصبح قادراً على تصميم مواقع انترنت من النوع الساكن static أي موقع يتألف من عدة صفحات ويوجد روابط بين تلك الصفحات (لكن لايوجد تخزين قيم وجلب قيم من قاعدة البيانات مثلاً لايوجد نظام تسجيل عضويات أو كتابة مواضيع من قبل الأعضاء).
كما ستكون جاهزاً لتصميم قوالب السكربتات الجاهزة لمواقع الانترنت حيث إنه يوجد الكثير من البرمجيات الجاهزة التي يمكن تركيبها على المواقع مثل المنتديات والمدونات وأذكر منها vbulletin, wordpress, joomla , moodle ......... etc وستكون أمامك فرص عمل كثيرة لو كنت قد أتقنت ذلك واحترفته أي إلى هنا تكون قد أصبحت مصمم ويب

jQuery

بعد تعلم الثلاثية السابقة كلغات برمجة ويب HTML, CSS, JS نكون قد كسرنا القيد وتخطينا أصعب حاجز وسنجد أنه فتح لنا الآن آفاق كبيرة للتوسع والتطور أكثر وتأتينا هنا الإضافات التابعة لتلك اللغات أو ما يسمى منصات عمل أو platform أو framework وبالنسبة لجافاسكربت يوجد منصة شهيرة جداً هي jQuery جي كويري وفيها الكثير من الدوال التي تختصر الكثير والكثير من العمل التقليدي في JS والكثير جداً من مواقع الانترنت في الوقت الحالي يستخدم هذه الإضافة حتى أنه أصبح شبه واجب تعلمها ولكن لا تقلق ربما في يوم واحد أو يومين تتعلمها وتصبح قادراً على التعامل معها
الموقع الخاص: jquery.com كما أن لهذه المنصة نفسها إضافات تابعة لها كثيرة منها jquerymobile.com وهي مختصة بعمل تصميم لموقع متوافق مع أجهزة الموبايل الحديثة (اللمس) كما تستخدم في عمل تطبيقات موبايل مع بعض الأدوات مثل phonegap ويوجد إضافة أخرى هي jqueryui.com تحوي حركات ومؤثرات إضافية لجي كويري ولا تقلق من كثرتهم يمكنك تعلم أي إضافة بسهولة وسرعة عندما تلزمك ولن تجد صعوبة طالما أتقنت الأساسيات الثلاث السابقة
شعارها (اكتب القليل واحصل على الكثير)


jQuery
jQuery


Bootstrap


وهي من المنصات الرائعة جداً والتي تجمع بين CSS, JS وهدفها جعل تصميم الموقع متجاوب responsive أي يتغير شكل التصميم وأماكن توضع المحتويات حسب قياس الشاشة ويختلف التصميم ما بين شاشة الكمبيوتر والأجهزة اللوحية والموبايل بحيث يبقى مناسباً وواضح النص. موقع ootstbrap ويعيبها في الإصدار الأخير أنها تعتمد على HTML5 لذلك سيظهر الموقع مشوهاً تقريباً على متصفحات الانترنت القديمة التي لا تدعم HTML5
ويوجد منصة أخرى أيضاً ذات شعبية واسعة وهي foundation ولكل منهما دورة جيدة في موقع ليندا وبالنسبة لي اخترت الاعتماد على bootstrap بعد أن درست كلاً منهما.


Bootstrap
Bootstrap


 ملاحظة : الإضافات بعد ثلاثية لغات البرمجة الهيكلية ليس من الضروري الانتقال لها بعد JS فوراً أي يمكنك بعد تعلم JS الانتقال إلى PHP , MySql ثم العودة لها

لغات البرمجة من جهة السيرفر server side PHP

بعد أن أتقنت الثلاثية (HTML, CSS, JS) تكون قد صرت مصمم ويب وإذا أردت أن تصبح مبرمج ويب فإنه عليك أن تتعلم لغات برمجة الويب الخاصة بالسيرفر أي التي تنفذ من قبل السيرفر حيث إن (اللغات) السابقة يتم تنفيذها من قبل المتصفح فقط حيث بإمكانك فتح برنامج المفكرة وكتابة كود Html + css + js وتنفيذه عن طريق فتح الملف بمتصفح انترنت مثل Firefox , Chrom .. أما لغات السيرفر هي اللغات التي يقوم بتنفيذها السيرفر وغالباً ما تعمل مع قواعد البيانات أيضاً حيث يمكن إنشاء مواقع ديناميكية قابلة لإضافة المحتوى وتسجيل أعضاء ودردشة وإرسال بريد الكتروني على سبيل المثال وهنا نكون أمام خيارات كثيرة مثل PHP, PYTHON, ASP ,RUBY,... الخ
ولعل الأكثر استخداماً من بينهم PHP وتحتاج إلى سيرفر عليه نظام تشغيل من نوع لينوكس Linux أما ASP تحتاج سيرفر بنظام تشغيل Windows 


MySql-php
MySql-php


بعد اختيارك للغة برمجة من طرف السيرفر أنت بحاجة لقواعد بيانات لتخزين البيانات الكبيرة على موقعك مثل تخزين بيانات الاعضاء وتخزين المواضيع وفي حال اختيارك للغة البرمجة PHP فإن قواعد البيانات MySql ستكون الشقيق الدائم لـ PHP وفي حال اختيارك ASP ربما تختار قواعد بيانات Sql server أو ربما حتى أكسس access ...
ملاحظة: SQLite هي قواعد بيانات مصغرة عن mysql حيث تخزن قاعدة البيانات على شكل ملف وتستخدم في حال لم تكن قاعدة البيانات ذات حجم كبير أو مع تطبيقات الموبايل مثل phonegap

AJAX

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

MVC
MVC

بعد تعلم php, mysql يمكن تعلم أشياء أخرى تسهل علينا العمل وتنظم المشاريع وتوحد شكلها حيث ستلاحظ في المشاريع المتوسطة والكبيرة التداخل والعشوائية في ملفاتك وهنا جاءت منصات عمل تعمل بنظام MVC وهي اختصار من Model View Controller حيث يتم الفصل بين ملفات المشروع في ثلاثة أقسام الأول controller المتحكم الرئيسي بروابط الموقع ومن ثم Model مختص فقط بقواعد البيانات وأوامر التعامل معها و View لوضع الواجهات والقوالب التي تعطي الشكل الخارجي للموقع والتعامل مع هذا النظام سيجعل من عملك أسهل بكثير ومنظم وتستطيع العودة للتعديل في أي وقت بسرعة وفي حال وجود فريق عمل سيسهل ربط المهام كثيراً ومن أشهر تلك المنصات مع php منصة codeigniter , cake php, laraval ... بالنسبة لي اخترت codeigniter واعتمدتها في مشاريعي و مرتاح بالتعامل معها وهي ذات شعبية واسعة ولذلك يوجد دروس كثيرة عند البحث في حال لديك استفسار ولكن مؤخراً أصبحت laraval هي رقم واحد في منصات PHP لذلك أنصح الجدد بتعلم laraval بلداً من المنصات الأخرى

هل انتهينا ؟

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

مصادر التعلم  >>>

من أفضل المصادر باللغة العربية لتعلم لغات برمجة الويب الدروس التي قدمها الأشخاص الثلاثة التالية أسماؤهم:


الدورات التي قدمها:

دورة Html للاستاذ يوسف اسماعيل تتكون من 33 درس فيديو تجدونها بالتتالي على الرابط التالي:
http://www.youtube.com/watch?v=6Cjyb...XpEVY4qNlQAZda

دورة CSS 2 للاستاذ يوسف اسماعيل تتكون من 31 درس فيديو تجدونها على الرابط:
http://www.youtube.com/watch?v=6ELg3...GtSqRy6AQua-4N

دورة تصميم قالب موقع انترنت للاستاذ يوسف اسماعيل
http://www.youtube.com/watch?v=QZ2bQ...MjzwLv9H-PyH52

دورة جافا سكربت Javascript للاستاذ يوسف اسماعيل (21 درس فيديو)
http://www.youtube.com/watch?v=2o6Zh...ahTI4tAZrh_smt
دورة جي كويري jQuery للاستاذ يوسف اسماعيل 23 درس فيديو
http://www.youtube.com/watch?v=azzCZ...DwasY8A07sK865

دورة PHP المستوى الأول 40 درس فيديو
http://www.youtube.com/watch?v=eopAk...282074E53B9FEF

دورة PHP المستوى الثاني 10 دروس فيديو
http://www.youtube.com/watch?v=a_5O0...F162DD21BA64A9
دورة في التعابية القياسية Regular Expression درسين فيديو
http://www.youtube.com/watch?v=ppHCf...Ulqyxtn8PUtEIo
دورة في البرمجة غرضية التوجه OOP في PHP تتضمن 5 دروس فيديو
http://www.youtube.com/watch?v=gkR-0...drv7RAPEWu2hCd
يوسف اسماعيل
كويتي
يوسف اسماعيل
دورات الاستاذ محمد أمين (فيديو) في تطوير الويب وهي كالتالي:
دورة في HTML فيها 20 درس
دورة في CSS تتضمن 20 درس
دورة في PHP تتضمن 34 درس
دورة jQuery تتضمن 19 درس
دورة إنشاء سكربت php تتضمن 20 درس
وكل هذه الدروس على الصفحة الرئيسة لموقع الاستاذ محمد أمين على الرابط التالي:
http://advphp.com/
كما أنه قدم دورته الرائعة في codeigniter يمكنكم مشاهدتها على الرابط:
http://www.youtube.com/watch?v=u0kyg...1D45EFD4BC4AE7

دورة PHP المعقدة (المتطورة) على الرابط:
http://www.youtube.com/watch?v=eqtwC...E50AEF00E0BB58
محمد أمين
(مصري)
محمد أمين
الاستاذ عبد الله عيد له بصمة إبداعية كبيرة في عالم البرمجة وقدم في مجال الويب الدورات التالية:
دورة في لغة HTML
JavaScript DOM
MySQL 101
PHP 101
PHP 102
منوعات في PHP
دورة تعدد الصفحات في PHP
دورة بناء سكربت منتدى
دورة أجاكس

تجدون فهرس هذه الدورات على رئيسية موقعه:
http://abdullaheid.net
عبد الله عيد
سعودي
عبد الله عيد



أما مصادر التعلم باللغة الانجليزية فلعل من أشهرها:
http://www.w3schools.comوهو موقع رائع وأشهر من نار على علم  ودروسه رائعة جداً وبأسلوب سهل وسلس ولغة انجليزية مبسطة وإمكانية تجربة الأكواد بشكل مباشر (أونلاين) لمعظم اللغات وهو مرجع لي في كثير من الأشياء
الموقع   http://www.tizag.comشبيه بالموقع سابق الذكر
موقع http://code.he.net لتعليم معظمات لغات تطوير الويب
شبكة ليندا التعليمية بالفيديو http://www.lynda.com فيها دروس تقريباً لكل شيء في عالم الويب
مواقع أخرى:
ولا ننسى موقع يوتيوب ففيه الكثير والكثير من الدروس في مجال الويب ولطالما استفدت منه كثيراً
برامج المساعدة في كتابة الكود IDE
IDE هي اختصار لـ Integrated development environment وتعني كترجمة حرفية (بيئة التطوير المتكاملة) وهي برنامج تحرير وكتابة الأكواد البرمجية والتي تساعد كثيراً في تنظيم الملفات وكتابة الكود فمثلاً عند البدء بكتابة اسم دالة في php تظهر قائمة منسدلة لخيارات فيها الدوال التي تبدأ بالاحرف التي كتبت ويتم تلوين الكود وتنظيمه
وحسب ما قرأت لإحصائية تخص عام 2014 فإن أشهر والأكثر استخداماً لتلك البرامج مرتبة وموضحة في الصورة التالية:


PhpStorm
PhpStorm


أي أن برنامج  PhpStorm  جاء في المرتبة الأولى


وختاماً أقول: ما ذكرته من مصادر تعلم هو جزء مما هو موجود في عالم الويب ويوجد غيرهم الكثير وحتى لا تحتار كثيراً ابدأ بأي شيء ترتاح له فأي دورة ترتاح لها أو كتاب أو دروس نصية في مدونات أو مواقع أو منتديات ابدأ بها فوراً. وأنصح بالتروي الشديد في دراسة كل لغة وعدم العجلة بحيث يتم الإتقان التام والفهم الجيد للغة قبل الانتقال إلى التي تليها
وأضيف لك أن لا تظن أبداً بأن دورة في جافا سكربت على سبيل المثال ستخرج منها محترفاً تماماً فالاحتراف لن يعطيك إياه أي كتاب أو دورة إنما التجربة والخطأ والتكرار والبحث هو ما سيكسبك الاحتراف مع الايام ومع استمرارية عملك في تطوير الويب ولكن لابد من تعلم أي لغة من أي مرجع ثم خلال عملك ستتعلم الكثير من الاشياء تضيفها لما اكتسبته. كما أود التركيز على نقطة هامة جداً وهي مصادر التعلم العربية والانجليزية أيهما أفضل وماذا أختار؟
الدروس العربية ماهي إلا إعادة شرح للدروس الأم باللغة الانجليزية غالباً والتي هي الأم والأصل لأي لغة برمجة فإذا أردت القوة والدقة في مصدر تعلمك فبالتأكيد الدروس الانجليزية دوماً أوسع وأقوى وأشمل وأدق من حيث المحتوى أيضاً وفوق ذلك تجد دروس حديثة ومواكبة لكل شيء فمثلاً إذا تفحصت المصادر العربية التي ذكرتها أعلاه ستجد أغلب الدروس قديمة قليلاً ولا يطرأ عليها تحديث وتذكر أن العرب لا يعيدون كتابة كل ما يتعلمونه باللغة العربية.
كما أشدد على نقطة مهمة وهي المصادر الأم لكل لغة فمثلاً إذا أردت فهم دالة function في لغة php فالمصدر الأساسي لها هو موقع اللغة نفسها أي موقع php فإذا أردت فهم دالة expload ومعرفة كافة التفاصيل عنها سأجد ذلك على الرابط http://www.php.net/manual/en/function.explode.php حيث يمكنني البحث عن أي شيء وإيجاد شرح شامل له وكذلك لو أردت فهم شيء ما في bootstrap فأفضل مرجع ومصدر لي هو موقع المنصة نفسهhttp://getbootstrap.com
5:10:00 ص