HTML5 هو احدث اصدار من لغة برمجة وعمل مواقع الانترنت وهي اختصار ل (HyperText Markup Language). وهي اللغة الوحيده التي يفهمها متصفح الانرتنت وجميع لغات البرمجة التي تتعامل مع متصفحات الانترنت Internet browsers يجب ان تترجم مخرجاتها الى هذه اللغة . لذلك يعتبر اتقان ومعرفة هذه اللغة هي حجر الاساس ونقطة البداية الاساسية لاي شخص يرغب في الابحار في برمجة وتصميم مواقع الانترنت .
في عالم برمجة الانترنت هنالك نوعين من انواع البرمجة Front End programming وهي تتمثل بكل ما يتم اظهاره لمستخدم الانترنت عند طلب صفحة الموقع ( الشكل الخاص بالموقع وطريقة عرض المعلومات فيه ) .
Back End Programming وهي تمثل ما يحدث خلف صفحة الانترنت التي يتم عرضها للمستخدم من عملية ربط بين الموقع والسيرفير (الخادم)الخاص بالموقع . على سبيل المثال عمليات التحقق من اسم المستخدم وكلمة السر مثال عن لغات البرمجة المستخدمة في هذا الجزء (PHP - JAVA- .NET - Python)
في هذا المقرر سوف نتعرف بالتفصيل عن برمجة Front End الخاصة بمواقع الانترنت والتي تتمثل بشكل اساسي التعرف على
- HTML5
- Css3
وسوف نتعرف على Java **
لتحقيق اقصى استفاده من المقرر
- قراءة الخارطة الذهنية للمادة متوفرة على الرابط ( الخريطة الذهنية )
تساعدك هذه الخريطة الذهنية على معرفة ما هي الأمور التي سوف تتعرض لها خلال فترة دراستك المقرر وتعتبر مرجعك لتحديد نقاط قوتك وفهمك للمواضيع المطروحة وكتابة اسئلتك ونقاشاتك الموزعة حسب الأسابيع.
- مشاهدة الفديديو التعريفي عن المادة ( الفيديو التقديمي للمادة)
- متابعة محاضرات المقرر والتي سوف تنشر اسبوعيا ( لكل اسبوع مجموعة محاضرات موضحة في الخارطة الذهنية)
- حل الواجبات كون شهادة الاكمال سوف تمنح للطلاب الذين تتجاوز نسبتهم ال 80 % .
- يجب عليك المشاركة في كتابة ملخص كل اسبوع باستعمال تويتر على الوسم (#برمجة_المواقع_مادة_رواق)
الملخص عبارة عن معلومة تعلمتها او فكرة وجدتها مثيرة للاهتمام او اي شي تراه مناسب له علاقة بالموضع الذي يطرح .تكمن اهمية هذه الخطوة لتشجيع الجميع على تبادل ما تم تعلمه خلال اسبوع محدد .
الكتاب المعتمد للمقرر :
- سوف يكون دليل التدريب الخاص بمايكروسوفت هو مرجع لك ( الكتاب باللغة الانجليزية بواقع 681 صفحة )لتحقيق اقصى استفاده من المقرر
- قراءة الخارطة الذهنية للمادة متوفرة على الرابط ( الخريطة الذهنية )
تساعدك هذه الخريطة الذهنية على معرفة ما هي الأمور التي سوف تتعرض لها خلال فترة دراستك المقرر وتعتبر مرجعك لتحديد نقاط قوتك وفهمك للمواضيع المطروحة وكتابة اسئلتك ونقاشاتك الموزعة حسب الأسابيع.
- مشاهدة الفديديو التعريفي عن المادة ( الفيديو التقديمي للمادة)
- متابعة محاضرات المقرر والتي سوف تنشر اسبوعيا ( لكل اسبوع مجموعة محاضرات موضحة في الخارطة الذهنية)
- حل الواجبات كون شهادة الاكمال سوف تمنح للطلاب الذين تتجاوز نسبتهم ال 80 % .
- يجب عليك المشاركة في كتابة ملخص كل اسبوع باستعمال تويتر على الوسم (#برمجة_المواقع_مادة_رواق)
الملخص عبارة عن معلومة تعلمتها او فكرة وجدتها مثيرة للاهتمام او اي شي تراه مناسب له علاقة بالموضع الذي يطرح .تكمن اهمية هذه الخطوة لتشجيع الجميع على تبادل ما تم تعلمه خلال اسبوع محدد .
الكتاب المعتمد للمقرر :
- سوف يكون دليل التدريب الخاص بمايكروسوفت هو مرجع لك ( الكتاب باللغة الانجليزية بواقع 681 صفحة )لتحقيق اقصى استفاده من المقرر
- قراءة الخارطة الذهنية للمادة متوفرة على الرابط ( الخريطة الذهنية )
تساعدك هذه الخريطة الذهنية على معرفة ما هي الأمور التي سوف تتعرض لها خلال فترة دراستك المقرر وتعتبر مرجعك لتحديد نقاط قوتك وفهمك للمواضيع المطروحة وكتابة اسئلتك ونقاشاتك الموزعة حسب الأسابيع.
- مشاهدة الفديديو التعريفي عن المادة ( الفيديو التقديمي للمادة)
- متابعة محاضرات المقرر والتي سوف تنشر اسبوعيا ( لكل اسبوع مجموعة محاضرات موضحة في الخارطة الذهنية)
- حل الواجبات كون شهادة الاكمال سوف تمنح للطلاب الذين تتجاوز نسبتهم ال 80 % .
- يجب عليك المشاركة في كتابة ملخص كل اسبوع باستعمال تويتر على الوسم (#برمجة_المواقع_مادة_رواق)
الملخص عبارة عن معلومة تعلمتها او فكرة وجدتها مثيرة للاهتمام او اي شي تراه مناسب له علاقة بالموضع الذي يطرح .تكمن اهمية هذه الخطوة لتشجيع الجميع على تبادل ما تم تعلمه خلال اسبوع محدد .
الكتاب المعتمد للمقرر :
- سوف يكون دليل التدريب الخاص بمايكروسوفت هو مرجع لك ( الكتاب باللغة الانجليزية بواقع 681 صفحة )الى أين سيصل بي المقرر :
المقرر حقيقة هدفة الاساسي كما هي جميع مقررات رواق اطلاع الناس من جميع الفئات على موضوع المقرر ( يتوقع ان يجعلك المقرر تنتقل من مرحلة عدم العلم بالشي الى مرحلة مبتدئ الى متوسط ) حسب استعدادك ومدى تطبيقك للوارد فيه
- من خلال الاستماع الى 15 ساعة من الفيديو تقريبا( مدة المقرر ) سيجعلك ملم بأهم ما في المقرر لكن لا اتصور ان يكون كافي للوصول الى درجة المهارة
- هدف المقرر اعطائك كل المفاتيح اللازمة للانطلاق بهذا المجال ( تحويل اي صورة الى موقع الكتروني + جعلة صديق لاجهزة الموبايل )
- سوف نتطرق في هذا المقرر الى موضوع الجافا سكريبت وكيف تسهم في مواقع الانترنت ( لكن موضوع الجافا سكريت اكبر من ان نغطية خلال محاضرة مدتها تقريبا ساعتين للاسباب السابقة
- ان المقرر موجه لجميع فئات المجتمع - طلاب ثانوي - غير مختصين ... مدة المقرر 15 ساعة فيديو تقريبا مقسمة ع 10 اسابيع )
- لا يمكن باي شكل من الاشكال اتقان شي خلال الاستماع الى 15 ساعة من الفيديوهات التعليمية فقط َ!
المحتوى :
تمت مراجعة المحتوى المطروح في الماده وتتم ايضاً خلال فترة التدريس ولذلك نرجوا منكم في حال وجود اي ملاحظة مراسلتنا مباشرة على الايميل ([email protected]) ونهتم جدا جدا لاي تحسينات او تعليقات او إضافات ( لكل اقتراح مميز علامتين )
ملاحاظت هامة :
- لضمان ان تحصل على اجابة دقيقة يرجى ان تكون صيغة السؤال محدد وقصير ( تغريدة ب 140 حرف تعتبر مثالية) .
- قبل السؤال راجع النقاشات والتعليقات وملخص الأسبوع .
- الرد على الاستفسارت سيكون اولاً بأول - ولكن لكون عدد الطلاب اكبر من القدرة على المتابعة الشخصية قد تطول هذه الفتره على الاكثر لـ اسبوعين من تاريخ السؤال ) .
الاسبوع الاول
يتوقع منك عزيزي الطالب بعد اتمام هذا الاسبوع ان تكون قادر على الأمور التالية :
1-تميز بين FrontEnd و BackEnd.
2- تحدد خارطة الطريق لكل من المبرمج والمصمم.
3- تكتب أول موقع إلكتروني لك.
4- تجيب على السؤال التالي (ماذا سيقدم في هذا المقرر؟)
مقدمة :
لا احمل الا ايباد ، هل أستطيع التعلم عليه؟!!
اذا كنت من الطلاب المتابعين للمقرر من خلال Tablets قم بالاطلاع على مجموعة البرامج التالية واختيار ما يناسبك منها :
أولا ً : أجهزة ابل
http://blog.smartbear.com/codereviewer/15-code-editors-for-the-ipad-for-free-or-very-cheap/
ثانياً : أجهزة اندرويد:
http://www.makeuseof.com/tag/best-4-html-editors-for-android-si/
يتوقع منك عزيزي الطالب بعد اتمام هذا الاسبوع ان تكون قادر على الأمور التالية :
1- تستطيع الإطلاع على FrontEnd الخاص بأي موقع.
2- تحدداسماءأفراد عائلة HTML ووظائفهم.
3- تميز بين BlockElements و ال InlineElements.
المقرر هو للدراسة الذاتية وعلية أطلب منكم الأطلاع على جميع افراد عائلة ال Html من خلال الرجوع الى المصادر التالية
الموقع الإلكتروني التالي : http://htmldog.com/reference/htmltags
ملاحظات :
- في هذا المقرر سوف نتعرف على اهم افراد العائلة وخصائصهم ولكن لن نستطيع ان نغطيها جميعها .
- جميع افراد العائلة تعامل نفس المعاملة من حيث الكتابة وطريقة البداية والنهاية و والشروط العامة لكتابتها .
- ما ينطبق على افراد العائلة التي سوف نتعرف عليهم في هذا المقرر ينطبق على بقية افراد العائلة الاخرين .
مع امنياتي لكم بالتوفيق ( اذا وجد موقع باللغة العربية / او الانجليزية / ترونه مناسب لهذا القسم يرجى مشاركته مع الزملاء )
لماذا لم يظهر الفيديو معي ؟
- لماذا تظهر >p> بهذا الشكل !
الاجابة عن هذة الأسئلة بالتفصيل .. في المرفق
يتوقع منك عزيزي الطالب بعد اتمام هذا الأسبوع أن تكون قادر على الأمور التالية :
1- تعي مفهوم SemanticWeb "الويب ذو الدلالة اللفظية" وتستطيع شرحه.
2- تحدد أهمية SemanticWeb ولماذا يستعمل .
3- تكتب الـ SemanticWeb لموقع إلكتروني.
في موضوع الــ Semantic Web لا يوجد هنالــك حل واحد فقط صحيح !!
فهو متروك لك كمبرمج !
للمزيد أرجو الاطلاع على المرفق
https://rwaq-production.s3.amazonaws.com/uploads/attachment/attachedfile/890/%D8%AD%D9%84_%D9%88%D8%A7%D8%AC%D8%A8_Semantic_Web.pdf
يتوقع منك عزيزي الطالب بعد اتمام هذا الاسبوع ان تكون قادر على الأمور التالية :
1- تحدد ما هو المقصود ب CSS
2- تعي أين يكتب ال CSS ولماذا ؟
3- تشرح ما هو المقصودب pixel
4- تحدد3 طرق لكتابة ال CSS
5- تحدد ما هو المقصود بالاولويات في CSS
6- تستعمل الأولويات بشكل صحيح
تاااااااااااااااابع فى باقى الردود
يتوقع منك عزيزي الطالب بعد اتمام هذا الاسبوع ان تكون قادر على الأمور التالية :
1- تحددجميع الطرق الخاصة بكتابة CSS Selector بناءً على HTML Tags Relationship.
يتوقع منك عزيزي الطالب بعد اتمام هذا الاسبوع ان تكون قادر على الأمور التالية:
1- تكتب PageLayout صحيح بناء على التصميم المطلوب منك
2- تستعمل طرق عمل الـ PageLayout بكفاءة
3- تكتب PageLayout بطرق مختلفة لاي موقع إلكتروني
يتوقع منك عزيزي الطالب بعد اتمام هذا الاسبوع ان تكون قادر على الأمور التالية:
1- تتعامل وتستطيع تغير الالوان لجميع HTHML Tag
يتوقع منك عزيزي الطالب بعد اتمام هذا الاسبوع ان تكون قادر على الأمور التالية:
يتوقع منك عزيزي الطالب بعد اتمام هذا الاسبوع ان تكون قادر على الأمور التالية :
1- تحدد ما الفرق بين كتابة ال JS في Head و ال Body
2- تكتب Functions تؤدي وظيفة محددة
3- تعي مفهوم DOM
4- تستعمل طرق معالجة DOM بكفاءة
5- تحدد دور JS في صفحة الـ HTML
في الرابط ادناه الصفحة التي تم تطبيقها في هذا الأسبوع .
https://drive.google.com/file/d/0BzLfGSA0apFgZkZaQUxYRGVVMWs/view?usp=sharing
يتوقع منك عزيزي الطالب بعد اتمام هذا الاسبوع ان تكون قادر على الأمور التالية :
- تطبيق جميع ما تعلمته في دورة حياة المقرر ( البداية بصورة والإنتهاء بموقع إلكتروني .)
- تكتب ال Semantic Web لصورة موقع إلكتروني.
- تكتب ال HTML لصورة الموقع الإلكتروني.
- تكتب ال CSS لصورة الموقع الإلكتروني.
- تجعل الموقع Resposive صديق لجميع الأجهزة .
- تكتب رأيك بالمقرر وتذكر كيف يمكن تحسينه .
◄ بحول الله تمّ الوصول إلى نهاية هذا المقرر
الله يعطيك العافية جهدك ووقتك إن شاء الله سيثمر ...
♯ الآن ما هو المطلوب منك ؟!!
لديك حقيقة الآن طريقين ..
● الأول : استكمال مسار الـ Frontend
● الثاني :البدء بمسار الـ Backend
⏎ كيف اختار ؟
● إذا كنت مصمم ( Designer ) فالمسار الأول هو الأقرب إليك وأراه مناسباً لك ويضمن لك وظيفة محترمة .
● إذا كنت ترغب بأن تصبح مبرمج فـ بتأكيد المسار الثاني هو خيارك وبالتأكيد مع نهاية المشوار سيضمن لك وظيفة بدخل ممتاز.
⏎ كيف أكمل كل مسار ؟
◄ المسار الأول Frontend :
في المقرر قد قطعت شوووووط طويل جداً في هذه المسيرة الآن يتبقى لك شيئين فقط هما:
1- الــ JQuery
2- الــ(Framework (foundation or bootstrap)
• ستجد أثناء دراستك لهذين الموضوعين ان 80% مما تحتاجه لتعلمها مذكور في المقرر الذي أنهيته للتو .
• تحتاج تقريبا من شهرين إلى 3 لإتقانهما .
• قم بالبحث في النت عن هذين الموضوعين وستجد مجموعة واسعة ومتنوعة من الفيديوهات والكتب بالعربي والانجليزي .
◄ المسار الثاني Backend:
أنت بحاجة إلى :
1- تعلم لغة برمجة خاصة ب الـ Backend مثل (php, C# , Java, python ..etc)
2- تعلم مبادئ قواعد البيانات Database
• قد تحتاج في هذين الموضوعين ما لا يقل – من وجهة نظري – من 6 الى 12 شهر حسب تفرغك ومدى شغفك بالموضوع.
❂ هل أحتاج للتعمق أكثر بالجافا سكريبت ؟
اممم....
سأعيد صياغة السؤال ليتضح الجواب
هل أستطيع تعلم ال jquery بدون تعمق ب الجافا سكريبت ؟ الجواب نعم !!
❂ كيف أختار لغة البرمجة الخاصة ب ال Backend أو الموبايل أو آي شي أخر ؟
① اتبع الرابط للمزيد الرابط
② عقدة المبرمج اللغة الأولى الرابط
③ مقال وإن كان قديم لكن به مجموعة ارشادات جيده الرابط
♞ مواقع مقترحة للبدء بتعلم إحدى لغات البرمجة (النقاش والمشاركة في هذه النقطة مفتوح لكم) :
① رواق
⑤ اليوتيوب
➅ موقع مقالات جيد
⑦ موقع مهم تعليقات واسئلة
✔ أرجو كتابة المراجع التي تعتقد أنها قد تفيد زملائك سواء كانت باللغة العربية أو الإنجليزية (الدال على الخير كفاعله) .
دعائي لكم بالتوفيق دوماً ...
و بكده اكون وفيت بأول جزء و هو كيفيه برمجة موقع
الصفحة 1 من 3 | < | 1 | 2 | 3 | > |