fbpx

أساسيات تصميم مواقع الانترنت

أساسيات تصميم مواقع الانترنت

يتكون أى موقع على الإنترنت من ثلاث عناصر أساسية:

(اسم الموقع و عنوانه – الخادم الذى يوضع عليه ملفات الموقع – ملفات الموقع نفسه التى تعرض للمستخدم).

تصميم مواقع الانترنت … ماذا تعني؟!!

هو إنشاء موقع إنترنت (مجموعة من الملفات الموضوعة جنباً إلى جنب على خادم إنترنت أو أكثر). مما يسمح بعرض المحتوى للمستخدم النهائي (ويشمل هذا المحتويات والواجهات التفاعلية) على شكل صفحة إنترنت عند طلبها. وتحتوي على عدة عناصر مثل النصوص والنماذج البريدية والصور النقطية. وكل ذلك يتم ترتيبه بواسطة إحدى اللغات المستخدمة مثل HTML, XHTML, و XML, و صفحات الطرز المتراصة, و JAVASCRIPT

فالمحتوى من أهم أساسيات تصميم المواقع.

أسس تصميم مواقع الانترنت

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

أهداف إنشاء الموقع

1- إيصال رسالة: دعائية – سياسية – طبية – دينية وغيرها.
2- تحسين صورة العمل: فحتى أصغر الأعمال يمكن أن يكون لها حضور أمام أكبر الشركات.
3- زيادة انتاجية العمل: بوضع اجابات للأسئلة الشائعة والمتكررة عن العمل بالموقع.
4- إنشاء رسالة إعلامية متجددة دائما وسهلة التحديث بدون الحاجة للأوراق أو الأحبار أو المطابع وغيرها.
5- التكلفة المجدية للموقع: فتكلفة متابعة الموقع وتحديثه تعتبر قليلة نسبياً ويمكن تحملها مقارنة مع ما يدفع لوسائل الاعلان الاخرى.
6- استعمال البريد الالكتروني: ارسال رسالة لمائة عميل معا وبكلفة اقل من ارسال رسالة لعميل واحد بالبريد العادي.
7- الترويج للعمل على مدار الساعة: حيث لا توجد وسيلة اعلامية اخرى تقدم هذا العرض وبهذه المرونة.
8- تنفيذ الاعمال على الانترنت والبيع والشراء عبر بطاقات الائتمان.
9- استلام المعلومات من مواقع أخرى لأعمال مشابهة والتزود بالجديد ومقارنة الاسعار والمواصفات بسهولة.
10- ايجاد خدمة متواصلة على مدار 24 ساعة.

التصميم والمحتوى

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

سهولة التصفح

يجب أن:

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

التصميم المتجانس

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

سهولة التحميل

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

خطة بناء الموقع

1- تحديد الاهداف: هناك أهداف كثيرة لبناء المواقع منها ما هو تجاري أو اجتماعي أو تعليمي أو ثقافي.

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

كما يجدر وضع عنوان البريد الالكتروني لمالك الموقع.
4- تأليف الصفحات: تصميم مواقع الانترنت يندرج تحتها تصميم الصفحة الأولى وبقية الصفحات. يمكنك الخيار بين استخدام أحد محررات الصفحات او استخدام لغة ترميز النصوص المترابطة (HTML).

وبالنسبة لبرامج تحرير الصفحات فهي تشبه إلى حد كبير محررات النصوص بالإضافة إلى بعض الخواص الإضافية كتكوين رابطة لصفحة أو موقع آخر أو وضع خلفية إلى غيره من المؤثرات الخاصة بالمواقع.
5- الاختبار: يجب على مصمم الموقع اختباره والتأكد من أن جميع الروابط بين النصوص صحيحة ودقيقة وكذلك تدقيق النصوص إملائياً.
6- تشغيل الموقع: لتشغيل الموقع يجب نقل الصفحات إلى مزود الشبكة في الشبكة المحلية أو إلى الموقع (المساحة التخزينية) الذي قمت بحجزه عند أحد مستضيفي المواقع.
7- تجديد الموقع: إن نشر الموقع وتركه كما عليه فترة طويلة قد يزهد الزوار فيه فلذلك لابد من تجديده والإضافة إليه وإجراء بعض التغييرات في الصفحة الرئيسية.

أساسيات تصميم مواقع الانترنت يتكون أى موقع على الإنترنت من ثلاث عناصر أساسية: (اسم الموقع و عنوانه – الخادم الذى يوضع عليه ملفات الموقع – ملفات الموقع نفسه التى تعرض للمستخدم). تصميم مواقع الانترنت … ماذا تعني؟!! هو إنشاء موقع إنترنت (مجموعة من الملفات الموضوعة جنباً إلى جنب على خادم إنترنت أو أكثر). مما يسمح بعرض المحتوى للمستخدم النهائي (ويشمل […]

Continue reading "أساسيات تصميم مواقع الانترنت"
المبرمج

أساسيات البرمجة للمبتدئين

أساسيات البرمجة للمبتدئين

لغات البرمجة تمكننا من التواصل مع الحاسوب عبر إعطائه توجيهات وتعليمات يمكن أن يفهمها وينفّذها، لغات البرمجة مثلها مثل اللغات البشرية لها قواعد صارمة يجب اتباعها والتقيد بها، يُقدر أنّ هناك ما بين 500 إلى 2000 لغة برمجة نشطة تستخدم للأغراض العامة طبقًا لبعض الإحصاءات، وهو عدد كبير جدا، لكن أغلبية المبرمجين في العالم لا يستخدمون سوى بضع عشرات منها فقط.

الحاسوب لا يفهم لغات البرمجة بشكل مباشر، فهو لا يفهم إلا لغة واحدة، وهي اللغة الثنائية (binary)، والتي تتكون من تتابع للقيمتين 1 و 0 (ومن هنا تأتي التسمية)، لذلك عادة ما تتم ترجمة لغات البرمجة إلى اللغة الثنائية عبر برنامج يُسمى المُترجم (compiler) قبل أن يقوم الحاسوب بتنفيذها.

أساسيات البرمجة

أساسيات البرمجة للمبتدئين

تبدأ أساسيات البرمجة من الكود البرمجي -أو الشيفرة البرمجية كما يسميها البعض- وهي مجموعة التعليمات المكتوبة باستخدام لغة برمجة معينة، هذه الأكواد هي عبارة عن تعليمات يقوم الحاسوب بتنفيذها بالتتابع، هذه التعليمات قد تكون قراءة محتوى ملف مثلا، أو رسم شكل ما، أو القيام بعملية حسابية.

هذا مثال على برنامج صغير مكتوب بلغة البرمجة C يقوم بعرض جملة “السلام عليكم” على الشاشة:

#include

int main() {

printf("السلام عليكم");

return 0;

}

إلّا أن مفاهيم البرمجة الأساسية تكاد تكون مشتركة في أغلب اللغات، وهو ما سيسهّل عليك تعلم البرمجة بأي لغة تو إتقان مفاهيم و أساسيات البرمجة تلك مثل:

الثوابت:

وهي القيم الثابتة التي يتم تعريفها بادئ الأمر، ولا تتغير لاحقًا في أي مرحلة من مراحل تنفيذ البرنامج كالثوابت الرياضية على سبيل المثال.

المتغيرات:

عكس الثوابت؛ فهي قيم قابلة لتغيير قيمتها في الذاكرة وقتما تكون هناك حاجة لذلك ضمن آلية عمل البرنامج.

الجمل الشرطية:

وهو اشتراط تحقُّق شرط محدد ليتم تنفيذ المطلوب كقاعدة If-Then التي تشترط حدوث ما بعد (If) ليتم تحقيق ما بعد Then.

الدوال:

هي مجموعة أوامر أشبه ببرنامج صغير يقوم بمهمة واحدة فقط.

الحلقات التكرارية:

برمجية هدفها تنفيذ أجزاء محددة من الكود البرمجي عدة مرات محددًا لها متى تبدأ وتنتهي، وعدد مرات التكرار.

أهمية تعلم البرمجة

تعلم البرمجة

هناك أسباب كثيرة تدفعك إلى تعلم البرمجة نذكر منها:

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

مجالات استخدام لغات البرمجة

تطوير المواقع وبناء التطبيقات

وهو من أهم مجالات استخدام البرمجة، وينقسم تطوير المواقع إلى شقين:

  • تطوير الواجهة الأمامية: والمقصود به الجزء المتعلق بتصميم شكل الموقع الذي يعرضه المتصفح، وعادة ما يحتاج إلى تعلم لغات البرمجة HTML و CSS و javascript.
  • تطوير الواجهة الخلفية: والذي يهتم بالخادم الذي يحتوي ملفات الموقع، والذي يجعل الموقع متاحا عبر الإنترنت لأي أحد ومن كل مكان، هذا النوع من التطوير يتطلب تعلم لغات مثل PHP أو ASP أو node أو غيرها من لغات البرمجة.

تطوير تطبيقات الويندوز

ويندوز هو نظام التشغيل الأكثر انتشارا في العالم، حيث أنّ 90% من الحواسيب تشتغل على هذا النظام، هناك الكثير من لغات البرمجة التي تجعل من تطوير برامج للعمل على هذا النظام أمرا سهلا، ومن أشهرها C و C++‎ و R و python وغيرها الكثير.

تطوير الألعاب

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

فلغة بايثون مثلا توفر المكتبة pygame لتسهل على المبرمجين تطوير الألعاب، أما لغة C فتوفر المكتبة raylib من بين بدائل كثيرة.

أيضا ظهرت في السنوات الأخيرة برامج متخصصة في تطوير الألعاب، هذه البرامج تُسمى محركات الألعاب، وهي مزودة بكل ما تحتاجه لتطوير أي لعبة تتخيلها، ومن أشهر هذه المحركات نجد Unity3D و Unreal وغيرهما كثير.

تطوير تطبيقات الموبايل

برمجة تطبيقات الموبايل تختلف عن بناء المواقع، لأنها تتطلب تعلم تقنيات إضافية خصوصا مع وجود منصتين مختلفتين، وهما منصتي أندرويد، و ios، وكل منهما تحتاج إلى لغات برمجة خاصة بها، فأندرويد يحتاج إلى تعلم الجافا (Java) أو كوتلن (Kotlin)، أما ios فيحتاج إلى تعلم بيئة العمل iOS SDK.

لحسن الحظ ظهرت مؤخرا تقنيات جديدة يمكن أن تسهل برمجة تطبيقات الأندرويد، وبرمجة تطبيقات ios، حيث تعتمد هذه التقنيات على لغات الويب، وهي لغات البرمجة المستخدمة في بناء المواقع (HTML و CSS و javascript)، ما يعني أنك لن تكون محتاجا إلى تعلم تقنيات جديدة، فكل ما عليك تعلمه هو تقنيات الويب، ويمكنك استخدامها لبناء التطبيقات كذلك، من أفضل الأدوات التي تساعد على هذا نجد كوردوفا (Cordova) و يونيك (ionic).

تعلم لغات البرمجة الأساسية

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

لغة البرمجة HTML

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

  • وسم البداية: يحتوي على اسم العنصر مثل: <p>.
  • وسم النهاية: يحتوي على اسم العنصر مسبوقًا بخطٍ مائل مثل: <‎/p>
  • المحتوى: وهو موجود بين وسمَي البداية والنهاية.
  • خاصيات: وتُدمج في وسم البداية مثل: <p class=”light”‎>
تعلم أساسيات البرمجة بلغة HTML

هذا مثال على ملف HTML:

<!DOCTYPE html>

<html>

<head>

<title>عنوان الصفحة</title>

</head>

<body>

<h1>هذا عنوان</h1>

<p>السلام عليكم</p>

</body>

</html>

وهذه هي النتيجة التي سنحصل عليها في المتصفح:

تعلم أساسيات البرمجة - HTML

ننصحك بالاطّلاع على توثيق موسوعة حسوب للغة HTML باللغة العربية المدعّم بالأمثلة لمزيد من الشرح المفصّل.

لغة البرمجة CSS

لغة CSS (Cascading Style Sheets) هي لغة تستخدم في تنسيق محتوى صفحات الويب، وتستَخدم مع HTML.

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

لكي نعطي مثالا بسيطا على كيفية عمل لغة CSS، سنقوم بجعل لون العنوان في الصفحة الماضية باللون الأحمر.

<!DOCTYPE html>

<html>

<head>

<title>عنوان الصفحة</title>

</head>

<body>

<h1 style="color: red;">هذا عنوان</h1>

<p>السلام عليكم</p>

</body>

</html>

وهذه هي النتيجة:

تعلم أساسيات البرمجة - CSS

تقدّم موسوعة حسوب أيضًا توثيقًا للغة CSS باللغة العربية يمكنك الرجوع إليه لمزيد من التفاصيل حول CSS.

لغة البرمجة جافا سكريبت – Javascript

تمثّل JavaScript  أحد ركائز صفحات الويب بجانب HTML و CSS، حيث تجعل JavaScript صفحات الويب أكثر تفاعلية، وتعطي للمبرمجين القدرة على التحكم في الصفحة، مثلا عندما يقوم الزائر بالضغط على زر ما، أو تحريك الفأرة فيمكن للغة البرمجة JavaScript أن تتفاعل مع ذلك عبر القيام بمهام يحددها المبرمج سابقا.

يمكن إضافة أكواد JavaScript  داخل صفحات HTML، مع وضعها بين الوسمين <script> و </script>.

مثال:

<script>

document.getElementById("demo").innerHTML = "My First JavaScript";

</script>

يمكنك التسجيل في دورة تعلم البرمجة باستخدام جافا سكريبت المقدمة من أكاديمية حسوب والتي تتضمّن العديد من الأمثلة العملية من خلال 13 ساعة فيديو تعليمية.

بعد تعلم أساسيات البرمجة ، ما التالي؟

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

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

لغات البرمجة تمكننا من التواصل مع الحاسوب عبر إعطائه توجيهات وتعليمات يمكن أن يفهمها وينفّذها، لغات البرمجة مثلها مثل اللغات البشرية لها قواعد صارمة يجب اتباعها والتقيد بها، يُقدر أنّ هناك ما بين 500 إلى 2000 لغة برمجة نشطة تستخدم للأغراض العامة طبقًا لبعض الإحصاءات، وهو عدد كبير جدا، لكن أغلبية المبرمجين في العالم لا […]

Continue reading "أساسيات البرمجة للمبتدئين"