قبل أن تبدأ بكتابة تعليق طويل تشرح فيه كيف أن google Sites محدود جدا ولا يمكن إطلاقا استخدامه لتصميم موقع احترافي، أدعوك أولا لزيارة الموقع

...

من باب تجربة الأمور الجديدة ومن باب التحدي كذلك (بالإضافة إلى الوقت الإضافي بسبب الكورونا هههه) قررت تصميم موقعي الخاص باستعمال أكثر الأدوات "بدائية" في مجال تصميم المواقع. وكنت منذ عام حاولت العمل على google sites وأتذرك كم كان محدودا جدا ... مازال محدودا جدا. لكن أردت أن أجرب تلك المقولة التي تقول "قلم رصاص في يد هاو وفي يد محترف ليس سيّان" يعني باختصار، القلم نفسه لكن القدرة على إبداع لوحة فنية لا تتوقف على الأدوات (فقط) بل بالأساس تتوقف على الخبرة والمهارة والقدرة على استخدام "محدودية" الأداة في صالحك.

بالإضافة إلى أنه "مجاني" تاماما هههه

لهذا باشرت العمل على موقعي باستعمال Google Sites. وسوف أشارك معكم الطريقة التي توصلت بها لهذا الموقع الذي أعتبره "جيدا جدا" في نظري... وشاركوني آراءكم حواله.

أولا: لنتعرف على الأدوات المتاحة في google sites:

يعمل google sites بطريقة جمع الـBlocks على شكل طبقات مثل lego ثنائية الأبعاد، اي يمكنك جمعها مع بعضها أفقيا، أو عموديا فقط. لا يمكنك أن جعل هذه الـBlocks تقاطع بينها أو أن تكون مثلا الصورة في منتصف النص.

نوع وعدد هذه الـBlocks محدود كذلك: نص، صورة أو فيديو، وEmbed (الذي هو Block خارق في الحقيقة وقدراته هائلة... سوف نرى كيف نستخدمه لاحقا)

ثم لدينا مجموعة من الـBlocks الخاصة بـGoogle sites : نص قابل للطي Collapsible، جدول محتويات، Carousel لمجوعة صور، زر، فاصل، بالإصافة على القدرة على إضافة أي ملف يدعمه Google (يعني يوتيوب، map او docs...)

 

بالنسبة للتعامل مع النص، Google sites يعطيك القدرة على الاختبار من بين styles محددة ، لايمكنك تغيير نوع الكتابة ولا اللون.

حين تختار شكل موقعك Theme يمكنك الاختيار من بين 6 ستالات لا أكثر، وحين تختار الستايل سوف تكون لك القدرة على تحديد نوع النص من بين ثلاث أنواع فقط

بالنسبة للألوان: لا يمكنك في أن تختار اكثر من لون واحد يكون هو اللون الأساسي في الموقع. يكون هو لون الأزرار ولون الخلفيات (highlighted فقط إذا أردت تحديدها أنت).

بالنسبة للتعامل مع الصفحات: يمكنك أن تضيف عددا غير محدود (نظريا) من الصفحات، وكل صفحة تضيفها تظهر أوتوماتيكيات في Nav Bar . مع القدرة على جعل مجموعة صفحات تندرج تحت عنوان واحد Child Page . او مع القدرة على أن تصنع صفحة لكن لا تظهر في Nav Bar (في حالة كانت صفحة قيد الإنجاز مثلا او صفحة محددة لـTerms and conditions ، لا تريدها أن تظهر في شريط الصفحات لاكن تحتاجها من أجل أن تضع رابطها في الـFooter مثلا)

كل هذه هي أحجار البناء التي عليك استخدامها من أجل بناء موقعك. وهناك قواعد عليك الالتزام بها من. 1- لايمكن للـBlocks أو تتقاطع أن تكون في البعد الثالث (أو z index)

2- كل Block لديه مهمة واحدة. أي لا يمكن أن تضيف صورة وسط النص. 3- على الـBlocks تكون ملزمة باتباع grid (12 column grid) 4- ليس هناك قدرة على تغيير margins or padding

5- ليس لديك القدرة على تحديد ارتفاع الـBlocks (يمكن فقط التحكم من عرضه) 6- شريط العناوين navbar يمكنه أن يكون في أعلى اليسار أو في شكل sandwich فقط

7- لايمكنك جعل الفيديوهات أو الصور full width بل دائما يكون لديك one column تاع فراغ على يمين ويسار الـBlock 8- ليس لديك تحكم في العناوين Headers ... لديك فقط Normal / Title / Heading / Subheading / Small

9- بالإضافة إلى كل ما ذكرناه بالنسبة للنصوص ونوع الكتابة والألوان.

ثانيا: ماهي القدرات الخاصة لكل Block

للوهلة الأولى، يظهر لك أن إمكانيات الموقع محدووووودة جدااااا... وليست لديك الحرية الكافية لكل تتعامل مع هذه الـBlocks كيفما تشاء.

لكن لكل Block قدرات خاصة يمكن استخدامها لصالحك. وسوف اقدم بعض الكرق التي استخدمت بها الـBlocks من أجل تجاوز محدوديتها.

1##- اختيار اللون:

لم يكن لدي مشكل في اختيار الألوان في البداية لأن ألواني الأساسية كانت الأسود والذهبي (مع أني كنت أحبذ استخدام Gradient من أجل الذهبي، لأن اللون الحالي أقرب منه للبرتقالي أو البني أكثر من الذهبي... لكن ماعلينا)

إلا اني في بعض الصفحات احتجت إلى ألوان أخرى.

مثال: في هذه الصفحة

حيث أردت أن أشرح ما هو برلمان شعيب لماذا أنا مترشح له (بالمناسبة يمكنك مساعدتي بالتصويت لي إذا أردت هههه) كنت بحاجة إلى ألوان من ألوان البرلمان ... وكذلك الديزاين. لهذا لدأت إلى استعمال "صورة" من أجل اللون. واستخدمت

صور من أجل الخلفية بدل اللون.

نفس الشيء بالنسبة لهذه الصفحة

حيث أردت استخدام خلفية سوداء ولهذا استخدمت صورة سوداء وجعلتها خلفية.

2##- الهوامش Margins

في أكثر من حالة كانت الBlocks ثقريبة جدا من بعضها ، ومن أسس وقواعد الديزاين هل White space أو الاتساع، وهو من أجل راحة العين أولا ومن أجل أن تعطي على عنصر من عناصر الديزاين قيمة ومساحة لكي يعبر عن نفسه.

لكن كما قلنا في القواعد أولا، ليس لديك القدرة على التحكم في الهواش ولا في ارتفاع الـBlocks ... لهذا لجأت إلى استعمال text block فارغ من أجل إصافة مساحة متساوية في أعلى وأسفل الفيديو

3##- الاختيار الجيد للصور.

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

حصلت عليها مجانا من موقع Freepik.com وبالتأكيد كان يلزمها بعض التعديلات في الألوان وغير ذلك.

4##- التحايل على قاعدة: الترتيب العمودي الإجباري.

قلنا أن كل الـBlocks يمكنها أن تكون في شكل أفقي أو عمودي فقط. لكني استطعت الحصول على هذا layout الغريب ههههه

أولا بالنسب للعنوان الكبير. فهو صورة فقط هههه التحايل على عدم القدرة على التحكم في Headers العناوين

أما بالنسبة للصور فكل ما كان علي فعله هو اعتماد ترتيب 2 columns أولا لصورتين (أفقيا) ومن ثم أضفت الصورة الثالثة تحت الأولى وأضفت text block فوق الصورة الثانية.

5##- القدرات الخارقة لـEmbed Block

استخدام هذا الـBlock سوف يفتح لك الكثير من الآفاق.

مثلا أستخدمته لوضع كل أعداد المجلة AL MAGNET في صفحة واحدة.

وكذلك في موقع آخر صممته بسرعة استخدمته لوضع صفحة الاحصائيات من منظمة الصحة العاليمة في صفحة على موقعي.

هذا يجعل الموقع يبدو dynamic بينما هو static جدا هههه

ثالثا: المحدودية ليست في قلم الرصاص

لا تجعل الأدوات هي هاجسك من أجل القاعس عن الإنجاز. عادة من نجري خلف "آخر الصيحات" التكنولوجيا وآخر المنتجات بينما قد يكفينا قلم الرصاص من أجل إنتاج لوحة فنية.

لقد استغرق مني الموقع حوالي أسبوع من العمل (في وقت فراغي) لكني راض بالنتيجة التي حققتها. بعدما كنت أتجول في themeforest باحثا على آخر صيحات الـthemes وغير ذلك، وأبحث عن شيء "واو" ... أنا اليوم مقتنع بما تحصلت عليه من "قلم الرصاص"

أتمنى أن يعجبكم أول مقال لي في الموقع معكم. وإذا كان الامر يمكم يمكنني تقديم فيديو تفصيلي عن كل الخطوات لتصميم الموقع...

شكرا