للمبتدئين فى برمجة الويب - مفاهيم أساسية - موضوع مفيد جدا

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

هذا الموضوع منقول للفائدة بعد أن صرح صاحبه بامكانية عرضه



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

الموضوع هيكون عبارة عن دردشة فى الويب , لغات برمجة الويب , تقنيات الويب , ....

لغات برمجة الويب - بتعمل ايه - ازاى اشتغل بيها - منين اتعلم - والفرق بينهم
معرفة عامة ب الأستضافة والحماية و الجوايز و الوظائف فى الويب
مصطلحات مهمة لمبرمجى الويب

اولا لازم نعرف يعنى ايه انترنت او ويب INTERNET
الأنترنت عبارة عن مجموعة كبيرة جدا من الكمبيوترات متوصلة مع بعضها علشان تتبادل المعلومات مع بعضها , واى شخص فى العالم ممكن يدخل على الانترنت ويتبادل المعلومات

اوك , ايه بقى ال client , server
ال client الزبون اللى هو انت او جهازك اللى بتدخل منه ع النت علشان تتبادل المعلومات
و ال server ده عبارة عن جهاز موجود عليه الموقع اللى انت عاوزه , وده الجهاز البعيد , وهو عادة جهاز بيقدم خدمة .

اوك , طب ايه هو ال web browser
بالعربى هو المتصفح , ده برنامج انت بتنزله عندك على الجهاز بيسمحلك انك تتصفح المواقع اللى ع النت . والأمثلة معرفة
انترنت اكسبلورر ie
فايرفوكس ff
جوجل كروم Gc
سفارى Safari

كده لازم نعرف web server
ده برنامج بيكون موجود على السيرفر او الجهاز البعيد وده اللى بيستقبل الطلبات من الزباين (الناس اللى عاوزه تشوف موقع على السيرفر) ويرد عليهم بصفحات html
ومن اشهر web servers الموجودة
Apache

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

طيب , انا عاوز اعمل موقع ازى !

قدامك طريقين , واحد سهل وواحد سهل
الأول
انك تجيب برنامج يسهل عليك الليلة لو انت مش عاوز تكتب كود وكلام من ده
كل الحكاية انك هتجيب برنامج تصميم مواقع زى
frontpage
او
dreamweaver
اوك , وتصطبه عندك على الجهاز , وعيش معاه العملية سهلة كلها انك بتكتب كلام و تشد صور
وكليك يمين , حاجة كده لعب عيال ! وفى الأخر البرنامج هيسيفلك الصفحات html وجنبها الصور.

كل اللى هتعلمه هترفع الصفحات دى على سيرفر , وبس
# هنتكلم عن ده بعدين , الهوستنج و الرفع و الكلام ده

طيب , تمام والطريقة التانية لعمل موقع ايه ؟
انك تكتب انت الكود بأيدك , وده طبعا مسلية ووسهلة

طيب , كود ايه واكتب فين وايه النظام .
بدون شرح كتير انت لازم تتعلم HTML
HTML : اختصار ل hypertext markkup language
لغة ترميز النصوص ! , خلى بالك ,, لغة ترميز
html مش لغة برمجة ! , يعنى لعب عيال برده

نعم ؟ , HTML مش لغة برمجة ؟
ايوة , دى لغة ترميز , كل الحكاية انك بتحط كلمة مثلا يبن تاجين او وسمين (</><>) , وهما هيضبطوا النص هيتعرض ازاى , بمعنى انها لغة عرض نصوص
يعنى تعرض نص سميك , نص مائل , بلون احمر , تعرض صورة , جدول , ....
مثال بسيط اوى :
كود:<b>hello 0tma </b>فى المثال اللى فوق كلة "hello 0tma" موجودة بين وسمين b و سم فتح ووسم قفل
الوسم ده كل مهمته فى الحياة انه يخلى الكلام بين الوسمين سميك يعنى تخين
والنتيجة هتكون كده :
hello otma
بس !


# خير دليل انك لو عاوز تكتب كلمة absba مائة مرة , هتعمل ايه ؟
هتكتبها مائة مرة , انما لو لغة برمجة بقى قى 3 اسطر بس !

طيب , تمام والطريقة التانية لعمل موقع ايه ؟
انك تكتب انت الكود بأيدك , وده طبعا مسلية ووسهلة

طيب , كود ايه واكتب فين وايه النظام .

بدون شرح كتير انت لازم تتعلم HTML
HTML : اختصار ل hypertext markkup language
لغة ترميز النصوص ! , خلى بالك ,, لغة ترميز
html مش لغة برمجة ! , يعنى لعب عيال برده




طيب , هتعلم منين ؟

ده اقوى موقع اجنبى هتقابله فى تعليم الويب :
روابط التحميل لا تظهر الإ لأعضاء المنتدى
وده كمان كويس
روابط التحميل لا تظهر الإ لأعضاء المنتدى (عربى وانجليزى )
وده اشهر موقع عربى :
روابط التحميل لا تظهر الإ لأعضاء المنتدى

بس , كل الحكاية انك هتكتب اكود بسيطة فى ال editor وبعدين تحفظ الملف بامتداد html
وبعدين تفتحه بال browser

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

فى حاجة اسمها css دى بتضبطلك شكل الصفحة , وتقدر بيها تعمل استايل فى ملف وتستخدمه فى اكتر من صفحة
يعنى مش لازم فى كل صفحة انك تغير الخط وتكبر العناوين . اعمل بس انت ملف css واستدعيه فى كل الصفحات بتاعة الموقع
وهو يضبط كل حاجة , طبعا ده غير المؤثرات التانية اللى متقدرش تعملها ب html يعنى مثلا الحدود بتاعة الجدول شوف مثلا الصفحة دى
روابط التحميل لا تظهر الإ لأعضاء المنتدى
وحاجات تانية كتير , ده غير انك هتسيب بقى التصميم بالجداول وتشتغل tables وده الأفضل بكتير .
وفيه كمان مؤثؤات ع الصور , حجاة زى دى كده
روابط التحميل لا تظهر الإ لأعضاء المنتدى
وتقدر تعمل اكتر من استايل فى استايل واحد , كل واحد منهم لأداة مختلفة (متصفح الجهاز , متصفح الموبايل , الطابعة , برايل للويب و ..) كل ده عن طريق Media Types
من الأخر css بتخلى شكل الصفحة جامد جداااا



طيب عاوز اتعلم css ؟
الموقع ده هيتكرر معانا كتير - احفظه فى المفضلة
روابط التحميل لا تظهر الإ لأعضاء المنتدى
وده انجليزى كمان
روابط التحميل لا تظهر الإ لأعضاء المنتدى
, وده عربى
روابط التحميل لا تظهر الإ لأعضاء المنتدى


ايه بقى اللى بعد كده ؟

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

فى بقى حاجة اسمها جافا سكريبت هى اللى بضبط القصة دى
قبل مانعرف هى ايه وليه ونعمل hello world , تعالى نشوف القصة دى

لغات برمجة الويب نوعين : -server side و client side
1) server side او لغات جانب السيرفر
دى لغات بتطبق عند السيرفر و بترجع لنا صفحة html صافية , زى php و asp و jsp
مثال بسيط : الصفحة اللى قدامك دى امتدادها php انت لما بتطلبها من السيرفر - بيبدأ السيرفر يشوف هى ايه php اوك , تروح ل php engine او محرك ال php يتعامل معاها ويترجمه , ويرجع html
ويبعته للسيرفر و يرجعه السيرفر html صافى , يعنى انت مبتشوفش الكود بتاع php !
مش مصدق اعمل click يمين , وبعدين view source
هتلاقى كله html اللى انت عرفته من شوية !



2) client side او لغات جانب المتصفح
من اسمها باين اوى انها بتطبق عند المستخدم او الرجل اللى بيشوف الموقع زى ايه الجافا سكريبت و vb script وغيره .. ودى بقى تقدر تشوف الكود بتاعها لأنها بتطبق عندك !
مش مصدق اعمل click يمين , وبعدين view source
ودور على كلمة script وهتلاقى كود جافا سكريبت !

جميل جدا , انا كده فهمت الليلة ماشية ازاى , نكمل بقى فى الجافا سكريبت ...
# المرة الجاية , نكمل جافا سكريبت و نعمل hello world ع السريع ونشوف حوارات تانية , اوك ؟



ملحوظات :
# المواقع الأنجليزى افضل بكتير من المواقع العربى .
# استخدم جوجل للوصول لما تريد مثلا عاوز تعريف server
افتح جوجل واكتب :
اقتباس:define:server وهتلاقى نتايج مختلفة تماما , على غير العادة !
استخدم كلمة define مع اى كلمة انت عاوز تعرف معناها
- استنى النتايج بتاعة البحث انجليزى , عاوز اترجمها عربى
جوجل برده , من الصفحة الرئيسية هتلاقى Language Tools او ادوات اللغة - اضغط عليها وعيش !

وهذا تصريح صاحب الموضوع وقد نقلته لتعم الفائدة حسب طلب صاحب الموضوع
ملحوظة : مفيش حقوق ولا غيره - عاوز تنقل الموضوع انقله حتى من غير ماتستأذن - المهم الناس تستفيد

و السلام عليكم