إزاى تكون مبرمج ويب - الجزء الأول

إزاى تكون مبرمج ويب  - الجزء الأول :
--------------------------------------------------

لازم نعرف إن الويب أو أى صفحة إنترنت بنفتحها بتكون عبارة عن تلات طبقات :
الطبقة الأولى : وهى طبقة المكونات ودى بتكون بالــ HTML
الطبقة التانية : ودى تخص الألوان والمظهر الجمالى ودى بتكون بالــ CSS
الطبقة الثالثة : ودى بتخص استجابة الصفحة مع المستخدم وبتكون بالــ JavaScript
يبقى مبدأيا كدا احنا لازم نتعلم التلات حاجات الى فوق دول علشان نقدر نعمل صفحة ويب وهنتكلم على كل طبقة منهم على لوحدها و هرشحلكوا كورسات مفيدة لكل كورس فيهم
أولا : طبقة الــ Structure :
-----------------------------
ودى بيكون فيها كل حاجة فى الصفحة من صور و كلام سواء كان عناوين و فقرات كلامية و قوائم والروابط الى بتنقلك من مكان للتانى طيب ليه سمواها طبقة الــ Structure دى لأنها بتقسم الصفحة بشكل منظم وتقول إن شوية الكلام دول عنوان و الكلام الكتير الى هناك دا فقرة و الكلمتين دول عبارة رابط هيوديك لصفحة تانية او مكان تانى و هنا جدول وبكذا صف وكذا عمود ومثلا الجزء الى فوق دا الــ Header والجزء الى تحت دا الـ Footer و غيرها كتير من المكونات يعنى بختصار هيا النظام الى فى الصفحة أو الهيكل بتاع الصفحة ودى بنكتبها بالــ HTML ودى أساسية لأى حد شغال فى الويب سواء كان مطور ويب أو حتى مصمم وبردو معلومة مهمة علشان فيه ناس كتير مش تعرفها وهى إن الــ HTML ليست لغة برمجة إنما لغة هيكلة بالإنجليزى Markup Language ودا لأنها مش بتعمل أى عملية معالجة لبيانات هيا مجرد بتنظم أو بتهيكل بس
HTML = HyperText Markup Langauge
------------------------------------------------------------------------
ثانيا : طبقة الــ Presentation :
--------------------------------------
ودى بيكون فيها الشكل والمظاهر و الجمال الى فى الصفحة زى ما تقولوا كدا الفنان الى بيلون الصفحة يعنى دى الى بتقول العنوان الفلانى بالخط الفلانى و لونه كذا و حجم خطه كذا , ومثلا لو هنتكلم على الفقرات مثلا الخلفية لونها كذا و لون الخط فيها كذا وممكن أعمل برواز على الفقرة و غيرها وفيها امكانيات تانية يعنى ممكن تضيف تأثيرات تانية زى مثلا لو اتحركت بالماوس على مكان معين تلاقى المكان دا شكله اتغير ومظهره اتغير وحاجات تانية كتير من التأثيرات بردو أقدر اظبط بيها المقاسات الى موجودة فى الصفحة يعنى مثلا لو بكتب كلام فى مربع أقدر انى أحدد المسافة بين الكلام وبين حدود المربع و اقدر كمان احدد المسافة بين حدود المربع و حدود الصفحة وغيرها كتير من الامكانيات
طبقة الــ Styles دى بنكتبها بالــ CSS ودى بردو من الحاجات المهمة الى لازم أى مطور أو مصمم ويب يتقنها
Cascading Style Sheets = CSS
بالنسبة للكورسات وفى الغالب الــ HTML و الــ CSS بيكونوا مع بعض
أشهر كورسات بالعربى :
1. : Free4Arab - HTML & CSS : http://bit.ly/1LSExCw
2. : Free4Arab - CSS : http://bit.ly/1Cl238j
3. إبراهيم قديح - http://bit.ly/1IERduW : HTML
أشهر كورسات بالإنجلزى :
1. XHTML and CSS - TheNewBoston : http://bit.ly/1LSEpTN
2. 30 Days to Learn HTML & CSS : http://bit.ly/1fhitEy
For More HTML & CSS Courses : http://on.fb.me/1BExqrW
For HTML & CSS Books : http://bit.ly/frea421
------------------------------------------------------------------------
ثالثا طبقة الــ Behaviour:
-------------------------------
دى تقدر تقول البرمجة بتاعت الموقع يعنى مثلا لما تيجى تعمل Register فى موقع معين هتلاقى إنك بتملى بيانات كتير والمفروض إن البيانات دى بتتجمع وتتبعت للسيرفر علشان يإما تتقارن مع الــ Database و تتحفظ فيها ولو مثلا اسم الدخول تم اختاره قبل كدا بيرجعلك رسالة بتقولك إن الاسم تم اختياره قبل كدا ولازم تختار اسم تانى بردو لما بتيجى مثلا تدخل على الفيس بوك بتكتب الايميل و تكتب الباسورد ودول بيتاخدوا على قاعدة البيانات الخاصة بالفيس و يتقارنوا بالبيانات المسجلة عندهم ولو مظبوطين يبقى هيفتحلك الاكونت بتاعك ولو مش مظبوطين يبقى هيرجعلك رسالة ان فيه حاجة غلط ولازم تصلحها
الكلام دا ممكن يتعمل بالــ JavaScript وفيه كلمة ممكن يكون كتير مننا بيسمعها بس ميعرفش ايه دى وهى الــ JQuery ودى تعتبر أشهر وأكبر مكتبة تخص الــ JavaScript دى عبارة عن سكريبتات مكتوبة جاهزة مجرد إنك بتنزلها و تضمها للصفحة و تستعملها فى ملف الــ JavaScript طبعا فيه مكتبات تانية كتير بس دى تعتبر أشهرهم
نيجى بقى للكورسات :
أشهر كورسات بالعربى :
1. دورة JavaScript [يوسف اسماعيل] : http://bit.ly/1NJ5O89
2.http://bit.ly/1ChApsv : JQuery 1
3. http://bit.ly/1NJ64nm : JQuery 2
4. Intro to Web : HTML5+CSS3+JavaScript : http://bit.ly/1JQfexT
أشهر كورسات بالإنجلزى :
1. JavaScript Beginners : http://bit.ly/1dHIgnL
2. TheNewBoston - JQuery : http://bit.ly/1CWkc75
For More JavaScript Courses : http://on.fb.me/1K4ReKB
For More JavaScript Books : http://bit.ly/frea409
إن شاء المرة الى جاية هنتكلم فى الجزء تانى على لغات البرمجة إلى هنتعلمها علشان نعمل بيها Web Applications زى الـ Java و الــ PHP أول الــ ASP.Net اتمنى يكون البوست عجبكم ومستنى آرائكم وتعليقاتم على البوست إن شاء الله ومتنسوش تعملوا لايك وشير للبوست
لا تنسونا بالدعاء فى هذا الشهر الكريم وكل سنة وأنتوا طيبين ورمضان كريم ‏‎kiki‎‏ رمز تعبيري
سلسة بوستات ازاى تطور نفسك فى الــ Software و Programming :
------------------------------------------------------------------------------
- ماذا قال عباقرة البرمجة فى فيديو قصير : http://on.fb.me/1NeDrz3
- نصائح وخبرات للعاملين فى مجال الـ IT من الواقع : http://on.fb.me/1NyVlfd
1. فضفضة مبرمج مبتدئ : http://on.fb.me/1JCqHDU
2. مقدمة للمقبلين على البرمجة : http://on.fb.me/1N8Zzux
3. كورسات للمبتدأين : http://on.fb.me/1L5CIkj
4. عن الجافا - http://on.fb.me/1K1NJ5x : Java
5. عن البايثون - http://on.fb.me/1RkqQL0 : Python
6. البرامج مفتوحة ومغلقة المصدر : http://on.fb.me/1LpsSLb
7. Case Studies - تطبيقات برمجية عملية و ورش عمل : http://on.fb.me/1gcGQ6r
8. البحث - http://on.fb.me/1LLaifR : Searching
-----------------------------------------------------------------------------------
" لو عايز تتعلم ساعد غيرك انه يتعلم " جملة رائعة يجب أن تكون هدف كل شخص
https://www.facebook.com/mlandtech
-----------------------------------------------------------------------------------
‫#‏ملكش_حجة‬ ‫#‏كورسات_مجانية‬ ‫#‏مبرمج‬ ‫#‏استغل_الأجازة‬ ‫#‏عملنى‬ ‫#‏اعمل_الصح‬ ‫#‏مجانى‬ ‫#‏العلم_لا_يكال_بالبتنجان‬ ‫#‏الكودى‬ ‫#‏منقول‬ ‫#‏اللغة_مش_مشكلة‬ ‫#‏معلومة_ببلاش‬ ‫#‏منشن_لاصحابك‬ ‫#‏مجانا‬ ‫#‏مفيش_حاجة_صعبة‬ ‫#‏اتعلم‬ ‫#‏غير_حياتك‬ ‫#‏شير_في_الخير‬ ‫#‏متضيعش_وقت_وإتعلم‬ ‫#‏الباحث_عن_الحكمة‬ ‫#‏شغل_عقلك‬ ‫#‏خليك_صح‬ ‫#‏الطريق_الى_ايلات‬ ‫#‏إنجليزى‬ ‫#‏انجليزى‬ ‪#‎English‬