تطوير وبرمجة الويب 101

تطوير وبرمجة الويب 101

أساسيات تصميم وتطوير الويب والمواقع الإلكترونية

تخيل لو قدرت تبحث في جوجل عن هذا السؤال ” كيف تصمم أو تطور الويب أو المواقع الإلكترونية ؟“ وقدرت تحصل الجواب إللي تبغاه بالضبط وبشرح مناسب في أقل من ٥ دقايق!!! شي حلو صح؟ لا تشيل هم. هنا حنوفر لك الجواب بدون ما تبحث ”٥ دقايق“.

هذه المقالة حتكون مناسبة لك مرة كثير لو إنت:

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

صار الشي هذا معروف ”إنك تتعلم تطوير الويب، بدون ما يكون عندك أساس صحيح. يعتبر مشكلة نوعاً ما“. عشان كدا حنحاول بأحسن ما عندنا إننا نبسط الأساسات حقت تطوير الويب ”قدر المستطاع“ لأننا نحبكم.

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

النقاط إللي حنتكلم عنها في الموضوع هذا اليوم:

  • نظرة عامة على الأساسيات لتطوير الويب
  • إيش هوا تطوير الويب
  • إيش هوا الموقع الإلكتروني
  • إيش هيا صفحات الويب
  • إيش هيا الروابط التشعبية
  • إيش هوا عنوان بروتوكول الإنترنت IP
  • إيش هوا اسم النطاق، وكيف تقدر تسجله
  • سوي موقعك الإلكتروني الأول
  • الأدوات اللازمة لتطوير الويب
  • إيش هوا بروتوكول نقل الملفات FTP
  • دليل رفع موقع إلكتروني على شبكة الإنترنت

عشان كدا، خلونا نخش في الموضوع عالسريع، عشان تستفيدو أكثر …

تطوير الويب

يعني وبكل بساطة، إنك ”تصنع” أو ”تبرمج“ أو ”تطور“ موقع إلكتروني لشبكة الإنترنت. في مواقع مرة كثير موجودة على شبكة الإنترنت، وكلها اتعملت على البرامج الخاصة بتطوير الويب، والناس إللي سووها اسمهم (مطور ويب – Web Developer) أو (مصمم ويب – Web Designer). وبيكست فيها مطورين ومصممين ويب فنانين.

الصورة إللي تحت راح توريكم مثال بسيط على أكواد صفحة إنترنت:

شايف السطور والأكواد الغريبة بالنسبة لك هذه. هيا دي بالضبط إللي تشغل المواقع الإلكترونية بكل أنواعها. -طبعاً مو هذه الأكواد بالضبط-.

شوف الموقع هذا example.com -يعتبر الأشهر على شبكة الإنترنت بالمناسبة-، وشوف الأكواد حقته وحاول تقارنها مع الموقع إللي بتشوفه.

افتح الموقع إللي تبغاه -أو جرب example.com حسب المثال إللي شغالين عليه- واضغط على زر ( Cmd+U ) لنظام الماك أو ( Ctrl+U ) لنظام الويندوز، عشان تشوف ”أكواد المصدر – source code“ – لو الإختصارات ما زبطت، روح لقائمة عرض، وأختار عرض أكود المصدر أو source code – حقت الموقع الإلكتروني إللي إنت فيه.

أدوار المشاركين في تطوير الويب

مطور الويب; هوا الشخص المسؤول عن برمجة وكتابة أكواد الموقع الإلكتروني.

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

الاثنين ما لهم غنا عن بعض، والإثنين يكملوا بعض. ومافي واحد دوره أهم من الثاني.

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

و يعتبر شي جداً يساعدك إنك تعرف شوية معلومات عن التصميم البسيط وهذه المعلومات ممكن نلخصها في:

  • مهارات بسيطة في برنامج الفوتوشوب.
  • مهارات في إستخدام وإختيار الخط.
  • تعرف كيف تتعامل مع الألوان.

صفحة الويب – Web Page

أتخيلها كصفحة إلكترونية في كتاب، لكن في هذه الحالة الكتاب هنا هوا الموقع. يعني تقدر تقول الموقع الإلكتروني مكون من صفحات ويب. وصفحة الويب مكونة من (نصوص، صور، فيديو، وروابط تشعبية)، وصفحات الويب في الغالب تكون مربوطة ببعضها عن طريق الروابط التشعبية.

يعني بطريقة ثانية، نقدر نقول إن صفحة الويب، عبارة عن صفحة وحدة من المعلومات، وعدة صفحات ويب تقوم ببناء الموقع الإلكتروني.

الروابط التشعبية – Hyperlink

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

متصفح الإنترنت – Web Broweser

متصفح الإنترنت أو متصفح الويب، هو برنامج تحتاجه عشان تقدر توصل لأي شي موجود على الشبكة العالمية العنكبوتية (الإنترنت). وأمثلة على أشهر متصفحات الإنترنت: جوجل كروم – Google Chrome، أبل سفاري – Apple Safari، فايرفوكس، أوبرا وإنترنت إكسبلورر وغيرها مرة كثير.

محرك البحث – Search Engine

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

عنوان بروتوكول الإنترنت – IP Address

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

كيف يشتغل عنوان بروتوكول الإنترنت الـ IP Address:

(السيرفر / الخادم) يستقبل طلب إنه يفتح / يشغل صفحة ويب، والطلب هذا مُرسل من متصفح الإنترنت إللي إنت بتستخدمه، لمن يجي المتصفح يتواصل مع السيرفر يعرف نفسه برقم البروتوكول IP. وفي المقابل السيرفر يرجع يرسلك الصفحة المطلوبة للمتصفح عن طريق رقم البروتوكول IP. أتحمست شويتين وتبغى تعرف عنوان بروتوكول الإنترنت الـ IP Address حقك؟ شوف الموقع هذا whatismyipaddress.com لكن رجادً لا تشارك الرقم هذا مع أي أحد.

اسم النطاق – Domain Name

اسم النطاق هوا اسم ”ملكيتك“ على شبكة الإنترنت. على سبيل المثال اسم ملكيتنا أو اسم بيتنا هوا bixet.tech واسم ملكية جوجل هوا www.google.com عشان كذا نقدر نقول إنو إحنا نملك BIXET وجوجل يملكوا Google، وما في موقعين يكون عندهم نفس الاسم بالضبط. إن شاء الله نكون وضحنا الفكرة دي بصورة عامة.

واسم النطاق حقنا هوا العنوان إللي كل الناس على شبكة الإنترنت يستخدموه عشان يزورونا bixet.tech ورابط الـ URL ( Uniform Resource Locator ) هوا إللي يكون موجود عليه العنوان كامل مع اسم النطاق، إللي يطلع كدا تقريباً https://bixet.tech

رابط الـ URL مكون من

  1. (البروتوكول – protocol) مثال: http://
  2. (المستضيف – Host Name) مثال: www.
  3. (اسم النطاق – Domain Name) مثال: bixet
  4. (نطاق المستوى الأول – Top-Level Domain ) مثال: .tech
  5. (نطاق المستوى الثاني – Second-Level Domain ) مثال: .sa

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

النقطة الأولى: البروتوكول http معناه بروتوكول عادي للوصول لصفحات الويب، وفي نوع ثاني مشابه له إللي هوا https الفرق بس إنو الثاني محمي وعليه نظام أمان SSL.

النقطة الثانية: www – World Wide Web إختصار للشبكة العالمية، وهوا بإختصار ممكن تقول عنه اسم نطاق فرعي والأكثر إستخداماً، يعني ممكن تحصل موقع بالشكل دا http://cloud.bixet.tech أو أي شي ثاني على كيفك، لكن الغالب والمنتشر www.

النقطة الثالثة: اسم النطاق هوا اسم الموقع أو عنوان الموقع إللي إنت تختاره، ممكن تسجله مقابل رسوم سنوية، ولازم من تجديده كل سنة أو أكثر حسب طريقة إشتراكك.

النقطة الرابعة: TLD نطاق المستوى الأول، إللي هوا الملحق باسم الموقع، مثال: ( .com و .net و .tech وغيرها المئات). ويستخدم كل اسم ملحق للتعريف وتوضيح محتوى الموقع الإلكتروني قبل دخول الزائر على الموقع. مثال: (.com للمواقع التجارية، .net لمواقع الشبكات، .gov للمواقع الحكومية وغيره).

النقطة الخامسة: ملحق إضافي يتبع دولة معينة، أمثلة: (.sa و .us و .uk و .eg و .السعودية و .إمارات وغيرها الكثير). وإيوا في مواقع كاملة مكتوبة بالحروف العربية.

إستضافة المواقع – Web Hosting

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

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

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

كيف تصمم موقع

هنا يبدأ الكلام، كيف تسوي موقعك.

تحتاج أول شي تعرف ليش تبغى تسوي الموقع الإلكتروني، عشان تعرف إيش نوع الموقع إللي حتسويه وإيش الأنسب،

تقدر تسوي موقعك الخاص عن طريق أحد أنظمة إدارة المحتوى ( CMS – Content Management System )، إللي تسمحلك إنك تصنع وتدير وترفع وتعدل موقعك على كيفك، أنظمة إدارة المحتوى حتريحك من معظم الأكواد، لأنك ما راح تحتاج تكتب أي كود في الغالب، ممكن تكتب سطر أو اثنين أحياناً، ولو كنت تعرف تبرمج حتكون الفايدة أكبر. وأشهر أنظمة إدارة المحتوى: WordPress، Drupal و Joomla.

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

محرر النص – Text Editor

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

حتقدر تكتب فيه أكواد بلغة HTML، CSS، JavaScript، Python، PHP، Ruby وغيره. ويعتبر شي أساسي إنك تختار محرر نصوص كويس وترتاح معاه. لأنك بكذا حتقدر تزيد كثير من إنتاجيتك وسرعة تطويرك للموقع لحد كبير، والشي هذا راح يخليك أكثر كفاءة كمطور ويب. والشي إللي راح يساعدك أكثر إنك تتعلم إختصارات الكيبورد الخاصة بمحرر النصوص إللي إنت أخترته، تقدر تحصل فيديوهات كثيرة على اليوتيوب. وأشهر محررات النصوص: Sublime، Notepad++، Atom وأخيراً المحرر إللي إحنا بنستخدمه في بيكست Brackets.

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

كيف ترفع موقعك على شبكة الإنترنت؟

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

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

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

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

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