يجب تسجيل الدخول تسجيل الدخول إذا كنت لا تملك عضوية تسجيل عضوية جديدة معلومات اتصال المُعلن والردود والصور المرفقة والاسعار لا تضهر إلا بعد تسجيل الدخول
السلام عليكم ورحمة الله
الدرس الاول : ندرس في هذا الدرس مفاهيم برمجة المواقع والالية التي تقوم عليها مواقع الانترنت والانظمة المستخدمة وطرق التواصل بين الزائر والموقع واللغات البرمجية التي يفضل استخدامها وكيف نتقنها ونبرمج بها مع دمج لغات الهيكلة والتصميم.
أولا مفاهيم برمجة المواقع : فكرة برمجة المواقع بشكل عام اتت من خلال الحاجة الماسة للتواصل بين اطياف البشر جميع البحوث العلمية في مجال الانترنت وبرمجة برتوكول الانترنت بداءة نهاية عام 1980 م وكان المطلب منها الخدمة للبلاد أو في مجال الخدمة العسكرية والصحة والتواصل وتسهيل مهام الاتصالات وكانت اعظم اختراع في تاريخ البشرية بحيث اصبح الاتصال بشخص متواجد في السعودية وشخص اخر في امريكا بثواني معدودة الاتصال به , او ارسال صورة أو مقطع فيديو أو صوت أو حتى ( البث المباشر ) نقل المحادثات مباشرة اصبح اكثر سهولة ولازال المجال في تطوير والبحوث مستمرة , اطلع تاريخ الانترنت
ثانياً الالية التي تقوم عليها مواقع الانترنت والانظمة المستخدمة : ما تشاهده الان وتقرا بنفس اللحظة على موقعنا ما هي إلا صفحة مخزنة على جهاز كمبيوتر موصول بالأنترنت وصلتها بكل سهولة تخيل معي أن خادمنا هذا ( موقعنا الي تتصفحه ) في امريكا حدد موقعك وتخيل انت الان تقرا صفحة بعيدة عنك مسافة الالف الاميال والكيلومترات ( فاضي الي اخترع الانترنت ) لا ليس فاضي بل هذا الاختراع الجميل سهل حياة البشرية ، لكن الصفحة الي اقرا فيها الان كيف كذا تظهر بالأوان والخط عريض أو مسطر أو مائل ومسافات وصور كيف هذا ، هنا جاءة البرمجة وكتابة محتوى للوثيقة أو صفحة الانترنت ويتم ترجمتها وعرضها امامك بكل سهولة ، طبعاً طبيعة الترجمة تتم من خلال متصفح الانترنت أو خادم الويب ومن ثم يعرض لك البيانات وحتى تفهم العملية من جانب المتصفح اضغط بالزر اليمين على الماوس واختر ( عرض مصدر الصفحة ) كما يلي
الان شاهد كمية الشفرات التالية
طبعاً الشفرات السابقة بعد برمجة الصفحة يتداخل معها لغات اخرى خدمية سوف نتحدث عنها مثل الجافا سكربت ولغات التجميل والتزيين سي أس أس الصفحة السابقة هي نفس الكود التالي
<html>
<head>
<title> مشاريع وحلول</title>
</head>
<body>
</body>
</html>
html Hypertext Markup Language وتعتبر مكونات الصفحة للغة
لغة النصوص التشعبية ولا يخلو أي موقع من مكوناتها بل تعتبر المكون الرئيسي للصفحة وتسمى التاقات او الوسم tag بداية من الصفحة للتاق أو الوسم <html> ونهايته </html> نخبر المتصفح بهذه التعليمات ليقوم بترجمتها واضهار ما بين طياتها من معلمات حسب التعليمات لاحظ كل وسم يبدا لابد من اغلاقه بعلامة السلاش /
ثم راس الصفحة <head> ونهايته </head> هذه التعليمة مهمة لوثيقة html احفظها جيداً سوف نستخدمها في ادخال تعليمات برمجية ومحولات لروابط اخرى مثل لغة css ولغة JavaScript كذألك سوف نستخدمها في اخبار المتصفح بلغة التي يفهمها هل الصفحة باللغة العربية أو الانجليزية وبناء عليها سوف يقوم بترجمة الصفحة encoding بالترميز المناسب ولها استخدامات اخرى مثلاً نضع بها عنوان الصفحة الذي يظهر على المتصفح كما يلي
بين علامة التاق
<title>تعليم وتدريب | فهرس دورة تصميم وبرمجة المواقع في مشاريع وحلول</title>
ومن ضمن استخداماتها ندرج بها روابط لصفحات اخرى مثل تعليمات JavaScript ومهمتها التعامل مع الوثيقة اثناء استخدام الزائر للصفحة
ثم
<body>
هذا التاق البودي وهو جسم الصفحة وهو الجزء الذي نكتب به ما نشاء ونضع به الصور والتاقات الاخرى بمعنى بمثابة حاوية للصفحة وبالطبع ينتهي بالأقفال كباقي التاقات
</body>
هذه صفحة الانترنت بشكل عام لكل صفحة تحتوي على هذه التاقات المهمة ولو تلاحظ بداية كل صفحة
<!doctype html> مهمة هذا التاق هو تعريف الصفحة للمتصفح بمثابة اننا يا متصفح ترى هذه الصفحة صفحة انترنت أو وثيقة Hypertext Markup Languageلغة الارتباطات التشعبية النصية بمعنى صفحة الانترنت للموقع بشكل كامل هي
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
يمكنك نسخ النص أو الكود السابق ثم حفظه بصيقة html وعرضه مباشرة على متصفح الكمبيوتر من خلال نسخه داخل المفكرة مباشرة ثم حفظ بأسم بالطريقة التالية
ثم نحدد الصيقة بالطريقة التالية
بعد الحفظ جرب افتحها بأي متصفح لديك
تلاحظ ان الصفحة تعمل بدون أي مشاكل
هناك تاقات كثيرة للغة الهيكلة ولكل تاق عمل خاص
HTML Elements
التاق
<h1></h1>
ويستخدم للعناوين داخل الصفحة ويشير الرقم 1 للمقاس وكلما ارتفع قل حجم العنوان داخل الصفحة اعلى حد للمقاس هو 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p></p>
ويستخدم هذا التاق كبارقراف للمحتوى الداخلي للنصوص وليس له مقاسات
HTML Attributes
<a></a>
هذا التاق يستخدم للروابط التشعبية داخل جسم الوثيقة وله قيمة اسمية وقيمة للرابط المراد الذهاب له اثناء النقر عليه وصيقته كالتالي
<a href=" https://www.proands.com">link</a>
عند النقر على link تذهب الصفحة مباشرة إلى الرابط
<img>
تاق الصور وياخذ قيمتين للحجم width height للطول والعرض والصيقة العامة له هكذا
<img src="img_girl.jpg" width="500" height="600">
Src هذه قيمة مسار الصورة إذا كانت داخل المجلد سيعرض مباشرة الصورة وإذا كانت خارج المجلد بمجلد اخر بالقرب من المجلد الاول نضع نقطتان ثم نحدد المجلد بالطريقة التالية
src="../img_girl.jpg"
../ هذه بمثابة الرجوع للورى خطوة
طبعاً هذه التعليمات حتى تعرض بشكل صحيح لازم تكون داخل البودي جسم الصفحة body
HTML Styles
الستايلات في لغة الهيكلة html احيانا نحتاج نغير لون نص أو فقرة أو نجعلها عريضة او نضع اتجاهات لها من حسن الحض ان لغة الهيكلة تدعم هذا الشي بطريقتين اما أن تضع ملف بجانب الوثيقة html وتسميه بالصيقة .css ثم تكتب التعليمات الخاصة أو نستخدم اسهلها وهي لكل تاق خاصية نستطيع من خلالها تغيير االالون أو الخط ....الخ
لنفرض هذا التاقات في الصفحة
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
ونريد تغيير لونها للون الاحمر ببساطة نكتب التعليمة هكذا
<h1 style="color:red;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
مع الالتزام بمواصفات وتعليمات السي اس اس وشروطها وسوف نتعمق بها بالمستقبل هذه التعليمات الخاصة بالتنسيق قبل اقفال أي تاق نضع بها تعليمات الستايل
<h1 AAA >
مكان احرف AAA نضع التعليمات
مثال للخطوط
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
مثال لحجم النص
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
نلاحظ في حجم النص العلامة المئوية % يمكنك استخدم البكسل px1 أو em لتحديد الحجم
كذلك يمكنك استخدام اتجاه النص
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
وهناك الكثير من التاقات في الاصدارات الحديثة للغة html من ابرزها
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML <blockquote> for Quotations
الاقتباسات في صفحات الانترنت في عالم صفحات الانترنت يمكنك استخدام الوسم <blockquote> لعمل اقتباس كما يلي :
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
HTML Comments
كذلك التعليقات مهمة في عالم البرمجة إذا يمكنك كتابة تعليمات دون أن ينفذها المتصفح كما يلي :
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
المتصفح يقوم بترجمة البارقراف ويضهر للمستخدم
This is a paragraph
اما الكلام الذي بين علامة
<!-- -->
لن يظهر وهذا مفيد في حال تعمل على كتابة التعليمات لك والرجوع بها بالمستقبل
HTML Colors
يتم تحديد ألوان HTML باستخدام أسماء ألوان محددة مسبقًا أو قيم RGB أو HEX أو HSL أو RGBA أو HSLA ولكل هذه خصائص معينة سوف نستخدمها في الدروس المتقدمة من خلال متصفح كروم بالاعتماد على ادوات مطور الويب
Styling HTML with CSS
تنسيق الصفحات في عالم الانترنت يمكن أن يأخذ ثلاث خيارات
مضمن - باستخدام سمة النمط في عناصر HTML
داخلي - باستخدام عنصر <style> في قسم <head>
خارجي - باستخدام ملف CSS خارجي
الطريقة الأكثر شيوعًا لإضافة CSS ، هي الحفاظ على الأنماط في ملفات CSS منفصلة. ومع ذلك ، سنستخدم هنا التصميم الداخلي والمضمّن ، لأن هذا أسهل في التوضيح ، وأسهل بالنسبة لك لتجربته بنفسك سبق أن قمنا بتضمين تصميم الستايل من خلال المثال بالاعلى
HTML Tables
كذلك تلاحظ اغلب صفحات الانترنت تحتوي على جداول خاصة منسقه أو عادية والصيقة العامة للجدول كالتالي
--------------------------------------------
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>
--------------------------------------------
بداية الوسم <table> ونهايته </table> ثم راس أو عنوان الخلية <tr> </tr>
ثم داخلهم الخلية نفسها
<td> </td>
هذا هو الجدول فقط هكذا اما بالنسبة للتنسيق والتزيين يمكنك فتح وسم داخل
<head>
وكتابة تعليمات css
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
إلى هنا نقف مع html وخصائصها لأنها لا تعتبر لغة برمجة فقط لغة هيكلة الصفحة وضحنا الالية التي تقوم عليها برمجة صفحات الانترنت وهي ببساطة شيء سهل جداً وواضح يمكنك اتقان الهيكلة بوقت قصير جدا اضع لك هذا المرجع لتعود له وبه كافة التحديثات الخاصة بالهيكلة
html
المرجع هنا
ملاحظة : يمكنك استخدام برامج مساعدة لتصميم صفحات لكن لا انصح بها كلما كبر حجم الصفحة وقمت باستخدام لغات برمجة حقيقة في المستقبل ستقع في اخطأ لا تستطيع حلها إلا بعد مشقه والافضل استخدام المفكرة العادية لأنك ستفهم المنطق بشكل سريع
الانظمة المستخدمة في تسكين مواقع الانترنت : حتى نستطيع مشاركة موقعنا وملفاتنا مع الجميع وحتى صفحات الانترنت التي نكتبها أو المواقع التي نبرمجها بالمستقبل لابد من وجود نظام حاوي لهذه الملفات حتى يستطيع الوصول لها الاشخاص ومشاهدتها أو الاطلاع عليها والالية هي كالتالي :
وجود جهاز كمبيوتر أو يسمى خادم مزود بعتاد قوي يتحمل الكمبيوتر العادي وغرفة مجهزة بتكييف جيد ويحتوي هذا الكمبيوتر على سوفتوير نظام مثل ويندوز أو لينكس أو ماك وهذه الانظمة تحتوي انترنت حقيقي ثابت المعرفات الافتراضية أو ارقام الايبي يستيطع الناس الوصول لها من خلال رقم الايبي مثلا 10.210.302 لكن المشكلة هل من المعقول كل موقع تزوره لابد تحفظ رقم الايبي هنا جاء الحل مع الشبكة العالمية
www
مع اسماء النطاقات التي حلت بدلا من رقم الايبي كمثال موقعنا
ونطاقه
proands.com
له رقم
ip
ثابت
201.052.500 لكن لا يرى
المستخدم العادي وهو خاص بالمساحة المتوفرة على الهارد الموجود على نظام الكمبيوتر وبه كافة ملفات موقعنا يصلها أي شخص بالعالم ولو مثلاً طلبنا الصفحة
المتصفح سوف يستدعي صفحة
subject.php
ثم المتغير
subject
ورقم الموضوع 500 ليبحث في الموقع عن محتوى مخزن في قاعدة البيانات ويعود لنا قواعد البيانات سنتعرف عليها بالمستقبل بشكل اكثر
طبعا الموقع بشكل عام ملفات مخزنة على كمبيوتر بمواصفات قوية يستحمل العمل لسنوات موصول بالانترنت يستطيع أي شخص مصرح الوصول له ولها واجهات رسومية او عادية للتحكم به ولو تريد بناء خادم على كمبيوترك لتحويله إلى موقع انترنت جميع الانظمة بشكل عام تدعم تحويل الكمبيوتر لخادم ويب وسوف نتعرف على الالية كيف
في نظام ويندوز اذهب الى لوحة التحكم ثم اضافة وازالة البرامج ثم تشغيل مميزات ويندوز
فعل هذان الخياران ثم اعد تشغيل الجهاز واتجه إلى هذا المسار
لوحة التحكم\كافة عناصر لوحة التحكم\أدوات إدارية
ستجد ضهر في الادوات الادارية
Internet Information Services (IIS) Manager
نقوم بفتحه
هذه لوحة التحكم الخاصة بالموقع على جهازنا الشخصي اذهب الى المسار سي ستجد موقع المشروع والخاص بتخزين الملفات
C:\inetpub\wwwroot
أو اكتب بالمتصفح
127.0.0.1
أو
Localhost
سيفتح لك أول صفحة انترنت على جهازك لتستطيع بناء الصفحات والبرمجة طبعا هذا على الجهاز المحلي بالنسبة للخوادم على الانترنت هناك الية اخرى كما اشرت سابق انترنت حقيقي وعتاد بمواصفات قوية وهناك خدمات
Dns
تستطيع جعل جهازك معرف رقمي ثابت مع اعدادات
PORT
ليستطيع الزوار الدخول وتحميل الملفات لكن هذا ليس بالجيد سيصبح جهازك ثقيل وترتفع درجة حرارة الجهاز
بخصوص لوحة التحكم السابقة هذه خاصة بنظام ويندوز والاغلب تستخدم مع تجربة صفحات بلغة البرمجة
asp
التابعة لميكرو سفة ويمكنك استخدام خادم اخر افضل
Apache
يمكنك تحميله من
اللغات البرمجية التي يفضل استخدامها وكيف نتقنها ونبرمج بها مع دمج لغات الهيكلة والتصميم
اللغات البرمجية هي حلقة وصل بينك وبين عتاد الجهاز لعمل تطبيقات على الكمبيوتر أو الجوال أو الويب ولكل لغة فلسفة خاصة لا يجب عليك كمطور تطبيقات ويب أو كمبيوتر أو هواتف اتقان كل اللغات بل قرر ما تفعل فمثلاً لو تريد تطوير مواقع الويب هناك لغات مناسبة لهذه المهمة مثل
Asp & php & python
ولكل منهم فلسفة فمثلاً
asp
تعتمد على بناء الواجهات الداخلية للسيرفر على لغة السي شارب مع دعم محرر تلقائي في تصليح الثغرات ومساعدة المبرمج في عمله لكن تعمل فقط على خوادم ويندوز مع دعم غير كامل على خوادم لينكس وتدعم قواعد بيانات
sql server
وبالطبع تكلفتها عالية لكن الامان بها مرتفع ومناسبة للمشاريع الحكومية والبنوك ولها مجتمع كبير
كذلك البايثون لغة سهله وجميلة وتعمل على كل الخوادم وتستطيع عمل بها تطبيقات لكافة المنصات
لغة
php
php أكبر لغة مستخدمة وتعتبر ذات قدرات عالية وخفيفة على الخادم وتدعم كافة قواعد البيانات ولها اطارات عمل كثيرة ويفضل استخدامها بدون اطارات لتعمل عليها من الصفر وتفهم منطق البرمجة عليها وهي لغة قوية وذات شعبية كبيرة وعلى من راهن قبل عشر سنوات انها سوف تختفي بل عادت وبقوة من جديد لساحة تطوير المواقع مع الاطارات التي تفرعة منها وانا كمبرمج انصحك تعلمها وإذا سألك شخص لماذا
php
قل له أ ب ج ح بمعنى هي اساس لغات الويب ومنبع البداية وتعتمد عليك انت لا على محررات
IDE
التي يكتبها ويبرمجها لك كبار فراعنة الشركات وموقعنا هذا تم على لغة
php
سلام على
php
بما لها قوة ولازال على عرش الويب ساكنة جالسة كأنها الورد والياسمين والفل والكادي هههه
اما بخصوص كيف نتقن لغات البرمجة سأختصر عليك كلام قليل عد قليل لعمرك وشاهد كيف تطور لغتك التي ولدة بها واكتسبة نطق الحروف وتعلمة كيف تحسب في الرياضيات وكيف ترى الاشكال وتقارن بها ها أنت الان تقف شامخ بعلمك الذي علمك الله فهل تريد منازل العلماء إذا استمر وافهم كيف تحلل الرموز والاسطر وكيف تبنى الجمل وكيف تضع معادلة مكونة من خمس اسطر وتحل مشكلة ما هناك أو تضيف شيء جديد لعقلك أو تصنع صفحة تسجيل بيانات ثم أن اللغة التي تتعلمها الان كانت في السابق تكتب بلغة الالة مجرد اصفار وارقام حتى تطورة وصارة تكتب بالكلمات القريبة من عقل الانسان أي لا عذر لك اليوم.
ما يخص لغات الهيكلة والتصميم قد تحدثنا عنها بشي من التفصيل بالسابق لكن ماهي إلا فقط عملية بناء مثلها مثل عملية بناء المنزل يبداء بالطوب والتراب ثم ينتهي بالبيت الجميل هكذا الموقع عند بناءه بلغات الهيكلة والتصميم لا تستطيع التحكم به حتى تدمج لغة حقيقية مثل
php
لتستطيع جعل الموقع ديناميكي يتعامل مع الناس وهكذا ستتضح الامور في الجانب العملي اكثر
إلى هنا ننتهي من الدرس يمكنك تحميل الدرس على صيقة بدف مرتبة في المرفقات طبعاً المرفقات تضهر لمن فعل ملفه المالي ويمكن تحميل المرفق مباشرة لمن فعل ملفه المالي كون الدورة مجانية مع الملفات
الدورة برعاية المبرمج/ فهد بن مخلف الشمري يمكن التواصل مباشرة على رقم الجوال 0500100941 مع مراعات اوقات الذروة والعمل
يجب تسجيل الدخول تسجيل الدخول إذا كنت لا تملك عضوية تسجيل عضوية جديدة معلومات اتصال المُعلن والردود والصور المرفقة لا تضهر إلا بعد تسجيل الدخول