سماح العلي
سماح العلي

@SamahAGumaa

25 تغريدة 81 قراءة Feb 08, 2022
ثريد مهم (دورة تدريبية) 🔥
كيف تصمم موقع الكتروني (تعريفي) باستخدام خدمة "جوجل سايت Google Site" خطوة بخطوة، الثريد طويل ... جيب لك كوب شاي أو قهوة وتابع معي ⬇️
ويطلع بهذه النتيجة 😍😍
@mkt_chess
بداية تعالوا نتعرف على محاور الدورة
- ليش هذه الدورة
- ماهي مواقع جوجل Google Site
- تجهيز محتوى الموقع (النصوص والصور)
- إنشاء حساب جوجل
- الدخول لمنصة للمنصة (الخدمة)
- شرح الخطوات العملية
- نصائح لك
- الختام
نبدأ
1⃣ ليش هذه الدورة
لكل شخص حابب يدخل مجال بناء وتصميم المواقع من أسهل أبوابه، وخصوصاً المواقع التعريفية، هذه الدورة لك واللي خلاني أختار جوجل سايت، هو كثرة الاستفسارات اللي تجيني عنها بالإضافة لسهولة تعلمها وتطبيقها
وكذلك اتخاذها مصدر دخل جيد لك كبداية 🔥
2⃣ ماهي أو ايش هي مواقع جوجل
هي خدمة مقدمة من جوجل لبناء مواقع وصفحات الويب. الهدف منها هي مساعدة الأفراد والشركات الناشئة على بناء مواقعهم بأقل التكاليف.
إطلاق الخدمة كان في 28 فبراير 2008 وهي قيد التطوير بشكل مستمر
3⃣ تجهيز محتوى الموقع (النصوص والصور)
ضروري قبل لا تبدأ في انشاء أي موقع الكتروني، جهز المحتوى اللي راح تضيفه في الموقع سواء نصي أو صوري، وفي حالتنا هذه راح نسوي موقع من أربعة صفحات وهي:
- الرئيسية
- من نحن
- خدماتنا
- تواصل معنا
بناء على هذه الصفحات راح نجهز المحتوى
4⃣ إنشاء حساب جوجل
سواء كان عندك حساب جوجل سابق أو ناوي تنشأ حساب بوضح لك الخطوات، ويفضل يكون حساب جوجل خاص بالموقع فقط ... تابع معي👇
من صفحة جوجل اضف حساب جديد أو أدخل ع الرابط accounts.google.com
راح تفتح لك هذه الصفحة، عبي البيانات المطلوبة، الاسم الأول والأخير، وعنوان الايميل اللي ينتهي ب @gmail.com
وبعدها كلمة المرور مرتين للتأكيد 👇 واضغط التالي
في الصفحة اللي بعدها، راح يطلب منك ايميل اضافي في حال هذا الحساب قفل لا سمح الله أو أي سبب ثاني تقدر تسوي له استعادة، ما هو ضروري بس يفضل
وفي خانة الهاتف راح يطلب رقم الجوال، ادخل رقم الجوال
واخر شيء تاريخ الميلاد
ضروري تحفظ هذه المعلومات
اخر خطوة راح يطلب منك الموافقة على الشروط والاحكام الخاصة بخدمات جوجل، اضغط "أوافق" وبكذا تكون أنشأت حساب على جوجل ✅
5⃣ الدخول على منصة الخدمة
نقدر ندخل للخدمة عن طريق بحث جوجل نكتب "مواقع جوجل" أو من الرابط المباشر
- بعدها تظهر لنا الواجهة الرئيسية للمنصة زي ما هو واضح في الصورة
sites.google.com
6⃣ شرح الخطوات العملية ⬇️⬇️
نبدأ الآن بإنشاء موقعنا الخاص فينا ... ركزوا معي ولا تنسى تفضل الثريد في حال احتجت ترجع للخطوات مرة ثانية
أول خطوة هي: بعد دخولنا للمنصة نضغط علامة "الزائد➕" اللي في الزاوية اللي تحت يسار أو يمين حسب اللغة عندك عشان ننشأ موقعنا الأول
في حالتي الزاوية في اليسار لأن اللغة عربية
الان راح تفتح لنا لوحة التحكم أو صفحة التعديل الخاصة بالموقع، كما هو كوضح في الصورة
هذه الصفحة هي الصفحة الرئيسية للموقع واللي راح تكون الواجهة اللي راح نشتغل عليها بطريقة احترافية وبسيطة
ثاني خطوة: راح ننشأ صفحات الموقع ونعدل عليها لاحقاً
من الجهة اليسار تحت راح نلاقي علامة زائد، أول ما نمرر الماوس فوق لها راح تظهر لنا ثلاث خيارات وهي:
قسم قائمة جديدة: للاستخدام في انشاء قائمة منسدلة
رابط جديد: من خارج مواقع جوجل
صفحة جديدة: صفحة أساسية أخرى للموقع
راح نضغط على إنشاء صفحة جديدة
وندخل اسم الصفحة، "من نحن" واللي من خلالها راح نحكي للزائر عننا وعن تاريخنا أو رؤيتنا ورسالتنا، حسب اللي تشوفه مناسب لموقعك، بعد ما نضيف اسم الصفحة نضغط تم
نكرر نفس الخطوة السابقة مع كل الصفحات المتبقية، ويصير عندنا الصفحات الأربعة كاملة 👍
- ممكن تتحكم بترتيب الصفحات عن طريق سحب الصفحة لأعلى أو لأسفل ونفلتها، من الشريط الأبيض الجانبي
الخطوة الثالثة: نسوي تصميم، والفكرة منه هي اننا نحدد الألوان الرئيسية والخط المستخدم للموقع
من الشريط الجانبي نضغط على علامة التبويب (المظاهر)، ونضغط على علامة الزائد أو إنشاء مظهر
راح تظهر لنا نافذة منبثقة مثل اللي في الصورة، راح يطلب مننا ندخل اسم للمظهر ونختار الألوان واخر شيء الخط، تابع معي
انا سميت التنسيق "تنسيق تصميمي"
نضغط التالي: راح يجينا خيارين، ألوان معدة مسبقاً أو ألوان مخصصة، وأفضل يكون "ألوان مخصصة" حسب الألوان اللي تناسبك وتناسب فكرة الموقع 🖥️في الصور الثانية اخترت تنسيقي الخاص من حيث الالوان والخط بعدها نضغط إنشاء مظهر
ننتقل الآن للخطوة اللي بعدها وهي تصميم الصفحات، كل صفحة تصميمها مختلف قليلاً عن الصفحة الأخرى ... نكمل
الصفحة الرئيسية 🏠
أول شيء راح نبدأ بشعار الموقع، ارفع الشعار الخاص بموقعك ويفضل تكون خلفيته شفافة والشعار بالأبيض، وبمقاس 1920×1080 أو أقل كمثال الشعار اللي استخدمته في الموقع
1. اضغط على كلمة أضف شعار
2. راح تظهر لك نافذة منبثقة فيها العديد من التبويبات والخيارات نضغط على تبويب "صور العلامة التجارية" بعدين عند الشعار نضغط تحميل
3. نختار الشعار من ملفات الجهاز ونضغط على زر فتح أو open اسفل نافذة الويندوز
4. بعدها راح يتم رفع الشعار في الموقع مباشرة
- ننتقل الآن للبانر الرئيسي
1. راح نغير حجم البانر وذلك بالضغط على خيار نوع العنوان، وبعدها نختار غلاف، هذه الشيء راح يساعدنا في تحويل البانر على قد حجم الشاشة اياً كانت (متجاوب) وبنفس الوقت يعطي شكل أكثر احترافية للموقع
2. تغيير صورة البانر الرئيسي: بعد ما عدلنا حجم البانر نضيف صورة للبانر، اختيار الصورة من ذوقك وحسب اللي يناسب فكرة موقعك
3. اسفل البانر نضغط على خيار تغيير الصورة، ومن ثم الضغط على تحميل وبعدها نضغط على زر فتح أو open اسفل نافذة الويندوز
بكذا تغيرت الصورة أو الخلفية تبع البانر
4. ننتقل الان للعبار اللي في منتصف البانر، أكتب اي عبارة تسويقية تمثل نشاطك ومهم انها تكون كافية ووافية وماهي طويلة
5. اختر تنسيق الخط ما بين سميك أو رفيع وحدد حجم الخط اللي يناسبك
6. بكذا نكون انتهينا من البانر ننتقل للقسم اللي بعده
القسم التالي راح يكون تسويقي أيضاً نظهر فيه أي رسالة إضافية حابين نوضحها للزائر، وعشان نسوي مثلها
1. ننتقل للشريط الجانبي بعدين تبويب "إدراج" وتختار مربع نص
2. راح يظهر مربع النص تحت البانر الرئيسي وراح نخصصه بالمعطيات التالية: خط 14، نوع الخط سميك، وتوسيط، لون أسود
3. شكل الرسالة بعد ما سوينا التنسيقات المناسبة
4. الان راح نغير خلفية النص بدرجة من درجات الرمادي الفاتح، من خلال الضغط على ايقونة "ألوان القسم" ونختار النمط رقم 3، نلاحظ تغير اللون بشكل جمالي أكثر
5. في هذه الخطوة راح ندرج قسم الخدمات بشكل إيجازي، وأول شيء ندرج نموذج نص نكتب فيه العنوان
6. نكتب كلمة "خدماتنا" وننسقها بالمعطيات التالية
7. الان ندرج موجز الخدمات على شكل دوائر، في موقعنا هنا راح نضيف الخدمات المتاحة عندنا، بعدها نضغط علامة الزائد اللي في المنتصف ونضغط تحميل، بعدها نختار الايقونة المناسبة ونضغط على زر فتح أو open اسفل نافذة الويندوز
8. تحت الايقونة نكتب اسم الخدمة كمثال "تصميم الويب" بالتنسيقات التالية، أو التنسيقات اللي تناسبك حسب نوع موقعك
9. نكرر باقي الخطوات مع بقية الموجز، وراح تطلع معنا بالشكل التالي:
10. الان ندرج خط فاصل أسفل موجز الخدمات للحفاظ على الشكل التنسيقي للصفحة، وذلك بالضغط على إدراج "مقسم" من الشريط الجانبي في علامة التبويب إدراج
11. راح يظهر بالشكل التالي
12. الان راح نضيف فراغ فاصل أسفل الخط المقسم، لكن لأن خيارات التنسيق محدودة راح نضطر نسوي واحد بطريقتي الخاصة 😅، ركز معي
13. أدرج مربع نسخ زي ما وضحنا سابقا
14. اكتب كلمة فاصل وحطها بالمنتصف وحول لونها للون الأبيض بحيث يصير غير مرئي، كما في الصورة
وبكذا صار عندنا فراغ فاصل، ضروري جدا لتنسيق الفراغات ✨
15. الان درج مربع نص جديد ونضيف فيه عنوان، في المثال كتبت "بعض مشاريعنا"
16. مرة ثانية نسقه بالطريقة اللي تناسب موقعك من ناحية حجم الخط واللون
17. الان راح نسوي قسم المشاريع عن طريق ادراج نموذج نص وصورة والخطوات كالتالي:
- من الشريط الجانبي اضغط علامة تبويب إدراج وفي قسم "التنسيقات" اختر اول نموذج اللي موضح في الصورة
- راح نكرر القسم ثلاث مرات من خيار تكرار على جهة اليمين من خلال الضغط عليها 3 مرات
- راح تصير بالشكل هذا
18. الان بين كل قسم والثاني راح نضيف فاصل شفاف لاتزان التنسيق ... تابع معي
19. راح ننسخ الفاصل الشفاف اللي سوينا سابقاً (مرتين) ونوزعه بين العناصر، كما في الصور، وذلك عن طريق سحب الفاصل من مكانه ل بين الاقسام، ركز في اتجاه السهم
20. نلاحظ الان شكل الأقسام بعد توزيع الفراغات الفاصلة ⬇️
21. الحين نبغى نغير مواضع العناصر اللي في القسم الأوسط، عشان يصير في تنسيق في شكل التصميم، وذلك من خلال سحب المربع اللي في اليسار الى اليمين والنص الى اليسار، كما في الشكل المقصود في الصورة الرابعة
22. الان نجي نضيف محتوى لهذه الأقسام من خلال إضافة صور من خلال الضغط على تحميل ونختار الصور المناسبة ونسوي لها ادراج وسرد مختصر يوضح تفاصيل المشاريع المنجزة
23. بالتنسيق التالي: العنوان خط حجم 18 سميك لون ذهبي أو أي لون اخر- تنسيق خط السرد أسود حجم 12 رفيع لون أسود
24. في شيء بسيط نحتاج نعدله وهو حجم التنسيقات داخل القسم، لو تلاحظ التنسيق عريض مرا، ويحتاج تصغير ... من خلال النقطة الزرقاء الكبيرة اللي في الطرف اليمين . راح نضغط عليها ونعلق ونسحبها لليسار الين ما نشوف انه حجمها مناسب
كذلك نفس الشيء مع مربعات الصور
25. الان نحاول نخلي العناصر في المنتصف، وذلك من خلال سحبها ووزنها في المنتصف حسب اللي نشوفه مناسب
26. بعد ما نخلص من هذا الجزء، ندرج خط "مقسم" راح يظهر اسفل النموذج
27. في آخر جزئية من الصفحة راح نضيف رسالة Call To Action CTA بحيث تحث الزائر أو العميل على اتخاذ اجراء
28. اضف فراغ فاصل بنفس الطريقة السابقة (ادراج مربع نص - كتابة كلمة فاصل - تلوينها باللون الأبيض)
بعدها ندرج "مربع نص" وتكب فيه التالي: تواصل معنا الآن وحول فكرتك إلى واقع، تنسيق الخط سميك مقاس 24 وزر اتصل الان
29. طريقة إضافة الزر كالتالي: من الشريط اليسار نمر لأسفل راح نلاقي خيار زر نضغط عليه
30. راح تظهر لنا نافذة منبثقة، ندخل فيها اسم الزر والرابط، في هذه الحالة راح نختار من القائمة المنسدلة صفحة تواصل معنا
31. الان راح نعدل على الزر وبنغير لونه من اللون الأصفر للأزرق ... نضغط على الزر بعدها ننتقل للتبويب "المظاهر" ومن ثم نضغط على كلمة تلقائي ونختار اللون الأزرق
32. في هذه الخطوة نبغى نخلي النص والزر في مستوى واحد من خلال بإننا نسحب الدائرة الزرقاء لمربع النص الى اليمين كما هو موضح، بعدها نسحب الزر لأعلى في مكانه الجيد ونحاول نوازن نص الرسالة والزر في منتصف الصفحة
33. اخر شيء نضيف فراغ فاصل نفس اللي فوق النموذج ولكن هذه المرة تحت
34 عشان تسوي معاينة كاملة للصفحة اضغط على ايقونة المعاينة أعلى الصفحة وفي اسفل الصفحة راح نلاحظ وجود 3 خيارات لتحديد شكل المعاينة سواء كمبيوتر أو جهاز لوحي أو جوال
أخيرا، كذا نكون خلصنا الصفحة الرئيسية كاملة، وهذا شكلها النهائي 😍😍👍
صفحة من نحن 🔉
أول شيء راح ننسق البانرالرئيسي للصفحة وذلك من خلال تغيير خلفية الصفحة بخلفية ثانية مناسبة وذلك بالضغط على "تغيير الصورة" ومن ثم نختار تحميل، بعدها نختار الصورة المناسبة من الجهاز وطبعا نضغط على زر فتح أو open اسفل نافذة الويندوز لرفع الصورة
الان راح نضيف نموذج نص مع صورة من علامة التبويب "إدراج" وراح نعدل على خصائصه كالتالي
1. من أيقونة الوان القسم راح نغير النمط للون الأصفر
2. راح نحذف صف النص العلوي ونترك السفلي زي ما هو واضح في الصور
3. اكتب المحتوى التعريفي الخاص بك في منطقة النص وفي منطقة الصورة ادرج شعارك الخاص
4. لاحظ كيف ح يكون شكل التصميم
5. اضف فراغ فاصل مثل اللي في الصورة تحت البانر مباشرة
6. أدرج مربع نص، اكتب فيه عبارة محمسة تمثلك مع خصائص التنسيق الموضحة في اللي الصورة تحت
7. الان أدرج فراغ فاصل تحت العبارة ومن ثم ادرج زر اتصل الان، وخصص الزر، زي ما سوينا قبل (كتابة اسم الزر في النافذة المنبثقة - اختيار الرابط اللي هو الصفحة) واسحب الزر لمنتصف الصفحة بالضبط
8. اخر شيء نضيف فراغ فاصل تحت الزر بتطبيق نفس الخطوات السابقة (إدراج نص - نكتب كلمة فاصل- نغير لون النص للون الأبيض)
وبكذا خلصنا صفحة من نحن وهذا الشكل النهائي للصفحة 👍
صفحة خدماتنا 💼
نفس الخطوة للصفحة السابقة راح ننسق الباترالرئيسي من خلال تغيير الخلفية من خلال الضغط على "تغيير الصورة" ومن ثم نختار تحميل، بعدها نختار الصورة المناسبة من الجهاز وطبعا نضغط على زر فتح أو open اسفل نافذة الويندوز لرفع الصورة
الان ندرج فراغ فاصل بتطبيق الخطوات السابقة (إدراج نص - نكتب كلمة فاصل- نغير لون النص للون الأبيض)
ومن بعده ندرج نموذج صورة واسفلها وصف ... نكرر النموذج مرة ثانية ونحط بينه فراغ فاصل وكذلك في الأسفل
بعد ما جهزت تنسيق الصفحة ابدأ بإدخال المحتوى الخاص فيها من صور ووصف للخدمات
كما في الصورة، ولو خدماتك اكثر كرر النموذج وعدل عليه
تنسيق خط العناوين والنصوص: حجم 12 نزع خط سميك
الشكل النهائي للصفحة، اذكرك مرة ثانية لو تبغى تسوي معاينة للصفحة من أيقونة معاينة في الأعلى ✅
صفحة تواصل معنا ☎️
نسق البانر الرئيسي بتغيير الخلفية من خلال الضغط على "تغيير الصورة" ومن ثم نختار تحميل، بعدها نختار الصورة المناسبة من الجهاز وطبعا نضغط على زر فتح أو open اسفل نافذة الويندوز لرفع الصورة
بعدها ندرج فراغ فاصل بتطبيق الخطوات السابقة (إدراج نص - نكتب كلمة فاصل- نغير لون النص للون الأبيض)
ومن ثم نختار نموذج نص من الشريط الجانبي مثل م اتعلمنا سابقاً، نكتب في نموذج النص هذا تفاصيل اكثر عن معلومات التواصل ونميز المعلومة بمقاس خط معين حسب أهميتها في العرض
ننتقل الان لبناء أهم جزء في الصفحة وهو نموذج التواصل، مواقع جوجل ما عندها نموذج جاهز ممكن نستخدمه لذلك راح نسوي نموذجنا الخاص من خلال خدمة ثانية تابعة لجوجل وهي "نماذج او استبيانات جوجل" 🔥🔥
تقدر تدخل لها عن طريق الرابط
docs.google.com
راح ننشأ نموذج تواصل من خلال الضغط على علامة زائد اللي تحت
عبي النموذج بالمعطيات التالية
1. عنوان النموذج
2. الاسم ثنائي
3. الايميل
4. محتوى الرسالة
نوع الإجابة المدخلة خليها إجابة قصيرة لخانة الاسم والايميل - وفقرة لخانة الرسالة
وراعي ان جميع الخانات تكون مطلوبة مو اختيارية
بعد ما تخلص غير لون النموذج حسب اللي يناسبك من ايقونة تنسيق اعلى يسار الصفحة
واخر شيء اضغط ارسال
نرجع الان للموقع في الشريط الجانبي من تبويب "ادراج" ونختار النموذج اللي سويناه ونضغط إدراج كما هو موضح في الصورة
بعد ادرج النموذج، راح تلاحظ انه تحت شوي وغير متسق، قم بسحبه من الأسفل للأعلى بجوار النص
مثل الموضح في الصورة
الشكل النهائي للصفحة 😎😎
اخر شيء نسويه هو تسمية الموقع وإنشاء الفوتر اللي هو الجزء في آخر الموقع
- في اعلى الصفحة منطقة المؤشر اللي في الصورة ندخل اسم الموقع
- اسفل الصفحة نضغط على "إضافة تذييل" راح يظهر لنا مستطيل ابيض نغير لونه للون الأصفر ونكتب أي عبارة توضح حقوق الموقع
وبكذا نكون خلصنا بناء وتصميم الموقع بشكل كامل، جا الوقت إننا ننشر موقعنا ونظهره للعلن
في اعلى الصفحة عندنا زر اسمه "نشر" - نضغط عليه - راح يظهر لنا صندوق منبثق - ندخل فيه اسم الموقع بالإنجليزي ومن ثم نضغط نشر
وبكذا يكون تم نشر موقعنا بنجاح ونقدر نشارك الرابط تبعه مع أي أحد 🤩🤩
وهذا رابط الموقع للي حاب يشوفه sites.google.com
7️⃣نصيحة لك عزيزي المتعلم
التعلم بدون تطبيق م راح يفيد، في ثريد اليوم في كثير من النقاط أنا تعمدت إعادتها عشان ترسخ عندك المعلومة
- ابدأ من اليوم تعلم وطبق خطوة خطوة لو ع الأقل صفحة أهم شيء تجرب
- مع الوقت بتصير جاهز انك تدخل سوق العمل وتقدم اللي تعلمته اليوم كخدمة لغيرك
ختاماً، أتمنى لكم التوفيق واعذروني على الاطالة أو القصور - وكتحدي لكم أبغى منك تطبيق هذه الدورة مو شرط الموقع كامل لو صفحة وحدة كفاية وتوريني تنفيذك تحت هذا الثريد، أو إنك ترفعه في حسابك وأسوي لك ريتويت، أبغى أشوف إبداعاتكم 😍😍😍

جاري تحميل الاقتراحات...