حزمة أدوات تصميم وتطوير المواقع (للمبتدئ والمحترف)
أود أن أشكر كل من قدر التدوينات السابقة و أن أعبر عن مدى سعادتى بالمساعدة وتقديم مقالات جديدة بنفس الطريقة المختصرة المفيدة ومساعدة كل مبتدئ ولفت أنتباه كل محترف الى بعض النقاط الهامة.
هذا الموضوع سيضم فهرس ضخم من الأدوات التى ستحتاجها دومًا فى طريقك أثناء تعلم الأساسيات وفى عملك ايضاً
تخصص مطور المواقع سواء كان مطور واجهات أمامية أو خلفية أو مصممين المواقع وقد قمنا بتتغطية الفرق فى هذا المقال – من هنا – يحتاج كأى تخصص اخر بجانب المهارات لأدوات تساعدك على الانتاج وتوفير وقتك ومجهودك
قبل البدء فى تطوير الموقع عليك التخطيط للموقع وترتيب الأفكار والصفحات والبنية الأساسية للموقع , ثم تخطيط كل صفحة على حدى , يمكنك ان تستخدم الورقة والقلم فى ذلك أو استخدام احدى هذه البرامج والمواقع
- Photoshop منتج شركة Adobe الغني عن التعريف لتصميم موقعك قبل البدء فى تكويده.
- Illustrator منتج شركة Adobe الغني عن التعريف لتصميم موقعك قبل البدء فى تكويده.
- UXPin لتخطيط الموقع وصفحاته بشكل اسرع واكثر تخصصا من البرامج السابقة و على المتصفح مباشرة.
- MockingBird لتخطيط الموقع وصفحاته وهيكلته.
فى البداية ستحتاج الى انشاء وتعديل ملفات الموقع سواء كانت HTML, CSS, JavaScript أو PHP , ستحتاج الى محرر نصوص عادى (Text Editor) أو محرر للأكواد (Code Editor) أو استخدام بيئة عمل مدمجة (IDE)
من امثلة برامج تحرير النصوص (Text Editors):
- Notepad محرر النصوص الافتراضي لمستخدمي نظام تشغيل Windows
- TextEdit محرر النصوص الافتراضي لمستخدمي نظام تشغيل MacOS
- Notepad++ محرر نصوص متقدم ويتيح بعض الاضافات وجيد بالبداية وحتى المحترفين يستخدمونه فى التعديل السريع لأنه يتميز بالخفة والسرعة
من امثلة برامج تحرير النصوص المتخصصة اكثر فى التكويد (Code Editors):
- Brackets برنامج خفيف وبسيط ويتيح العديد من الاضافات , يتميز بأنه مفتوح المصدر ويدعم الكتابة باللغة العربية (تواجه اللغة العربية بعض المشاكل عمومًا فى هذه المحررات لأنها تبدأ من اليمين الى اليسار عكس معظم اللغات الاخرى). يدعم ايضاً Live Preview فيمكنك من رؤية التغييرات بشكل لحظى فور التعديل فى المحرر. هذا المحرر هو ما أستخدمه منذ البداية . متاح لمستخمي Windows, Linux و MacOS
- Sublime Text برنامج خفيف وبسيط ويتيح العديد من الاضافات , يدعم العربية ,متاح لمستخمي Windows, Linux و MacOS
- Atom برنامج خفيف وبسيط ويتيح العديد من الاضافات , يدعم العربية ,متاح لمستخمي Windows, Linux و MacOS
- Visual Studio Code أطلقته شركة البرمجيات العملاقة Microsoft مؤخراً وحاز على اعجاب الكثيرين لما يتميز به من خصائص, متاح ايضاً لمستخمي Windows, Linux و MacOS
اما عن بيئة العمل المدمجة (IDE) فاليك ببعض الأمثلة:
- NetBeans IDE من اشهر بيئات العمل المدمجة وأقدمها , مجانى.
- Aptana Studio بيئة عمل مدمجة مجانية مفتوحة المصدر.
- PhpStorm مقدم من شركة JetBrains الغنية عن التعريف, تقدم اكثر من IDE كل متخصص فى لغة برمجة, وهى الشركة المطورة للغة برمجة Kotlin – كوتلن التى احدثت ضجة مؤخراً بعد أن قامت Google بدعمها كلغة برمجة رسمية اخرى لتطوير تطبيقات الاندرويد , سنناقش هذا الموضوع لاحقاً لما به من معلومات خاطئة واجب تصحيحها وتوضيحها .
- WebStorm مقدم من شركة JetBrains ايضا ويتخصص فى تطوير المواقع بلغة JavaSctipt ويهتم بالواجهة اكثر .
بعد أن قمت بأنشاء موقعك, ربما تحتاج ان تقوم بتعديل الان وهو فى مرحلة مستقرة, لتفادي أخذ نسخ احتياطية بشكل بدائى وتخزينها وربما تتشتت او تفقدها , عليك استخدام أحد أشهر انظمة التحكم فى الأصدار وهو Git.
نظام مجاني ومفتوح المصدر للتحكم فى اصدارات ملفاتك أياً كان نوعها فاذا قمت بالتعديل عليها تستطيع فى وقت ما الرجوع الى هذه النقطة مرة اخرى والغاء التعديلات بداية من فترة محددة , هذه من ابسط استخداماته , ولكن فى البداية من الصعب أن تشتت نفسك بأوامر الTerminal للتحكم به والتعامل معه , لذلك اليك برنامج يعطيك هذه الخواص باستخدام GUI (واجهة استخدام رسومية) تساعدك على استخدامه كأى برنامج اخر تستخدمه يومياً.
- GitKraken متاح لمستخدمي Windows, Mac and Linux.
سنتطرق للحديث عن هذا النظام الرائع والبرامج الخاصة به لاحقاً بالتفصيل
الان بعد ان قمت بالتعديل على ملفاتك ربما تواجهك مشكلة لا تستطيع حلها وحاولت مراراً وتكراراً ولكن فى كل مرة تعود الى النسخة السابقة دون جدوى, فى هذا الموقف ستحتاج الى مشاركة الكود الخاص بك مع مجموعة على الفيس بوك او غيره من المجتمعات الخاصة بتطوير الويب, ليس من الجيد مشاركته فى صورة او ارساله بجانب النصوص, الحل الأمثل لذلك هو رفع الكود على احد هذه المواقع المتخصصة فى عرض نتيجته مباشرة على المتصفح, وتعطى القابلية للاخرين فى التعديل عليه من اجل اصلاحه لك, ستساعدك على مشاركة HTML, CSS و JavaScript بالاضافة الى اضافة المكتبات واطر العمل بسهولة ك Bootstrap و jQuery. وسنتطرق الى شرح استخدام كل منهم لاحقا بالتفصيل
من أشهر هذه الخدمات المجانية :
بعد انهائك للمشروع أو للنسخة الاولى من المشروع ستود ان تشاركه بشكل دائم أو ربما اضافته تحت اسمك فى نطاق خاص بك, هنا يأتى دور الاستضافة المجانية , عادة لا ندخل فى تعقيدات الاستضافات المدفوعة فى بدايتنا ونفضل استخدام اسم نطاق مجانى و استضافة مواقع مجانية لمشاركة العمل مع الاصدقاء واعضاء المجموعات وتقبل الانتقاد للتحسين من العمل.
أفضل هذه الاستضافات فى الوقت الحالى:
- ABA.ae كانت اختيارى ومازالت (قمت مؤخراً بترقية الحساب الى مدفوع VIP لمدة عام) من مميزاتها أنها عربية ولوحة تحكمها مناسبة ويوجد بها دعم فنى عربى. لا يوجد فرق فى الدعم الفنى بين عميل مجانى ومدفوع. نطاق مجانى قصير جدا (على سبيل المثال: samirgeorge.aba.ae) يمكنك اضافة نطاق عربي (على سبيل المثال : سميرجورج.aba.ae) وعندما تطور ستقوم بسهولة بتطوير حسابك دون الحاجة الى نقل الملفات. يمكنك استخدام PHP باصدارات مختلفة و انشاء قاعدة بيانات وربطها بالموققع , او تنصيب ووردبريس – WordPress و PrestaShop و Drupal و Joomla بضغطة زر! ايضاً خوادم سريعة ويشير الى ذلك كثير من المستخدمين.
- Bitballoon اختيار جيد للمواقع الثابتة (ٍStatic) ولكن لا تدعم المواقع الديناميكية واستخدام ال PHP , ليس لها دعم فنى ولكن الكثير من الشروحات على اليوتيوب او شروحات مقالية موجودة لاستخدامها
- 000Webhost استضافة مجانية للمواقع الثابتة والديناميكية, مشكلتها البطئ فى الخوادم واحيانا صعوبة التعامل مع لوحة التحكم المملوءة بالخيارات.
هذه كانت الأدوات الأساسية وبعض الأمثلة لكل منها, فيما بعد سيتم مشاركة بعض المواقع الهامة التي تساعد فى اختيار الألوان المناسبة وادراج الصور المجانية للموقع بالاضافة للعديد من المواقع الاخرى المفيدة لهذا التخصص.
اذا كنت على وشك البدأ فى هذا المجال عليك قراءة هذا المقال لتفادي الأخطاء الشائعة من هنا
لا تتردد فى الانضمام الى المجموعة الخاصة بنا لتعلم البرمجة أونلاين ومشاركة المعلومات والأسئلة والكورسات – من هنا