البحث في الموقع

تصبح التصاميم حيوية ومفعمة بالحياة والحركة عند إضافة الصور والرسوميات إليها. فالصورة لها تأثير فعّال إن استخدمت في موضعها الصحيح ضمن التصميم أو المحتوى، وكما يقال دومًا في أوساط المصممين "الصورة بألف كلمة"، حيث يمكن للصورة أن تساعد الجمهور على فهم الرسالة المطلوب إيصالها من خلال التصميم بسرعة أكبر من الكلمات، ولكن عند استخدامها يجب مراعاة مبادئ التصميم المتعلقة بها مثل التباين والمحاذاة وغيرها. ولتحقيق أقصى استفادة منها في التصميم يجب اتباع قواعد معينة، كما يجب علينا أن نختار مصادر هذه الصور بعناية، إذ يوجد مصادر مجانية وأخرى ليست كذلك. لنتعرّف بداية على القواعد الواجب اتباعها عند استخدام هذه العناصر. قواعد استخدام الصور هي تعليمات وتلميحات تفيد في بناء تصميم ذو جودة عالية ويحقق تجربة مستخدم ممتازة وقد تبنّاها المصممون وشركات التصميم بناءً على الخبرة والمعرفة والتجربة، ويختلف موضع استخدام هذه القواعد باختلاف نوعية التصميم والهدف منه ومكان استخدامه، فقد تصلح بعض القواعد لاستخدامها على تصاميم منشورات مواقع التواصل الاجتماعي أكثر من مواضع أخرى. التحضير العديد من الصور جيدة ويمكنك استخدامها مباشرة ولكن ليس دائمًا هي كذلك، فهناك الكثير من الصور تحتاج إلى معالجة كتعديل الألوان والتباين والمستويات، وقد نحتاج أحيانًا إلى جزء من الصورة فقط وليس إليها كاملة لذا سنعمد إلى قطع الأجزاء المطلوبة. كل هذا يستوجب منا العمل على معالجة الصورة قبيل استخدامها في التصميم وذلك عبر أحد برامج معالجة الصور، مثل: أدوبي فوتوشوب، أو جيمب، أو عبر تطبيقات الويب مثل بكسلر (راجع مقال برامج تصميم الرسوميات). هذه الصورة من موقع piqsels وهي مجانية ولكنها بحجم كبير جدًا 3989x5983px لذلك لا يمكننا استخدامها بحجمها الحالي للتصميم. صُغّرت حجم الصورة وعولجت ألوانها لتتناسب مع غرض التصميم الاقتران لكل صورة معنى ودلالة، ولكن هل جربت وضع صورتين بجانب بعضهما مثلًا؟ إن اخترت صورتين بطريقة صحيحة ستحصل على معنى مختلف للصورة الأولى. إذًا يمكننا استخدام الاقتران للحصول على معنى جديد من خلال وضع صورتين متجاورتين بحيث نضيف المزيد من المعاني وتفيد في سرد قصة أو رواية بسيطة من خلال الصور فقط دون الحاجة للكلمات. في الصورة التالية نجد رجلًا يشعر بالضيق، ولكن إن وضعنا بجوارها صورة أخرى مناسبة فسوف نحصل على معنى أكثر تفصيلًا وتتحدث الصورة الجديدة المجمعة من كلا الصورتين قصة كاملة بدلًا من الكلمات. هذه الصورة الأولى للرجل الذي يشعر بالضيق - الصورة بوساطة Alex Green من موقع Pexels لاحظ كيف ظهر المعنى بصورة مختلفة نوعًا ما حيث يظهر على الرجل الشعور بخيبة الأمل بسبب تأخر الوقت. التعليق يستخدم هذا الأسلوب على الأغلب في منشورات مواقع التواصل الاجتماعي وفي المدونات، حيث يتم وضع تعليق معين على الصورة نفسها بغرض شرح الصورة أو إيصال رسالة معينة من خلال الصورة، لأن الصورة التي تتضمن تعليقًا سترسخ في الأذهان أكثر من مجرد تعليق مكتوب بدون صورة. في المثال التالي ستجد تعليقًا عاديًا مكتوبًا في صفحة أو منشور أو تدوينة وهي حكمة من أقوال الراحل ستيف جوبز. ويمكنك التحقق من المثال التالي الذي وضعنا فيه صورة ستيف نفسه ومقولته كتعليق بداخل الصورة وهذا جعل المحتوى والمتمثل بالمقولة هنا أكثر إثارة للاهتمام وراسخة أكثر في الذهن من الطريقة الأولى التي لم نستخدم فيها الصورة. مراعاة لوحة الألوان والهوية البصرية عندما تعمل على استيراد رسومات شعاعية أو أيقونات جاهزة من موقع ما، فإن هذه الرسومات قد تختلف ألوانها عن النمط العام المتبع في تصميمك كما في حالة تصميم الواجهات، لذلك يجب العمل على هذه الرسومات عبر تغيير ألوانها لتتناسب مع النمط العام المتبع في التصميم عبر استخدام ألوان لوحة الألوان الخاصة بالتصميم والتي قد تتوافر تلقائيًا في كتيب إرشادات الهوية البصرية للعلامة التجارية في حال توافر هذا الكتيب، أو قد يضطر المصمم إلى استخدام رؤيته الفنية لتعديل الألوان لتتناسب مع نمط ألوان التصميم. في حال حصول المصمم على الرسومات أو الأيقونات بصيغة المصدر المفتوح فإن تعديلها سيكون سهلًا عبر استخدام البرنامج المناسب بحسب صيغة الملف، وإلا فسيكون على المصمم العمل عبر برنامج الفوتوشوب بصورة رئيسية لتعديل الملفات للرسومات والأيقونات غير المصدرية وغير القابلة للتعديل ببرنامج تصميم الرسومات الشعاعية، وهنا سيستخدم مهاراته في تعديل الصور والرسومات عبر الفوتوشوب للحصول على الرسوم بالألوان المطلوبة. وأيضًا يجب مراعاة نوعية تصاميم الهوية البصرية أو النمط العام للتصميم عند اختيار هذه الرسومات والأيقونات، من حيث وزن خطوط الرسومات وحدة انحناءاتها. وذلك لتطبيق مبادئ الوحدة والتكرارية في التصميم، راجع مقال مبادئ تصميم الرسوميات. ولشرح هذا الأمر سنستعرض المثال التالي، إذا أردنا إدخال رسوميات كأيقونات ضمن هذا الموقع الذي صممناه كتجربة. وأحضرنا مجموعة أيقونات جاهزة كما في الشكل التالي. مجموعة الأيقونات الرسومية هذه من موقع Freepik. ثم أدخلنا الأيقونات المطلوبة ضمن الموقع دون تعديل، ستبدو كما يلي. نلاحظ أن ألوان الأيقونات لا تتناسب مع نمط ألوان الموقع لذلك سنعمل على تعديل ألوان الموقع كما يلي. الآن أصبحت رسومات الأيقونات متناسبة ومتناسقة مع نمط ألوان الموقع وحققنا مبدأ الوحدة في التصميم. التركيز على الجمهور اختيار الصور التي تستخدمها في تصاميمك مسألة تتعلق بنوع الجمهور المستهدف، حيث يجب التفكير في نوعية الجمهور المستهدف وموضع استخدام التصميم سواء أكان مطبوعًا أو للشاشات، ونوعية المواقع التي سيعرض عليها التصميم مثل المدونات أو مواقع التواصل الاجتماعي أو غير ذلك، ويجب التأكد من أن الصورة المستخدمة ذات صلة بالتصميم وتثير المشاعر الصحيحة. ففي المثال التالي استخدمتُ طائر البوم لتصميم حملة إعلانية تدعو للاستثمار في مقاطعة (بابنيكا)، ولكن استخدام رسمة البوم هنا خاطئ لأن هنالك فهمًا شائعًا يربط طائر البوم بالتشاؤم من هذا الطائر ويعد ظهوره فألًا سيئًا، لذلك لن تنجح الحملة الإعلانية في جذب شريحة من المستثمرين لأن من يؤمن بالتشاؤم من طائر البوم لن يستجيب للإعلان. مراعاة التصميم المتجاوب أصبحت هذه المسألة ملحة، فعند عرض صورة أو رسم معين على شاشة الحاسوب أو التلفاز فإنك لن تعاني من أية صعوبات تذكر في حال عرضت كامل الصورة، بينما ستكون الصورة صغيرة الحجم والتفاصيل غير واضحة في حال عرضها على شاشات الهواتف المحمولة، الأمر الذي يضيّع الهدف من استخدام الصورة، لذلك يجب استخدام صورة يمكنك أن تقصها ضمن أطر محددة مع إمكانية تكبيرها قليلًا حتى تكون جيدة للرؤية في الشاشات الصغيرة. كما يجب مراعاة استخدام الصورة ذاتها أحيانًا في منشورات وسائل التواصل الاجتماعي أو في غلاف هذه المواقع وحتى في صور الملفات التعريفية، لهذا يجب الانتباه إلى هذه المسائل قبل اعتماد الصورة في التصميم. الصورة بواسطة Italo Melo من موقع Pexels التأكد من حقوق الملكية يجب التحقق دومًا من حقوق الملكية لأي صورة نريد باستخدامها، فمع أنه يوجد العشرات من مخازن الصور المجانية على الإنترنت إلا أنها لا تفي بالغرض في بعض الأحيان حيث تكون الصورة المطلوبة نادرة أو بكميات محدودة أو غير متوفرة حتى، فلو جربت البحث عن صور رسومات الكهوف على سبيل المثال فإنك ستجد عددًا قليلًا محدودًا من هذه الصور بالمجان وهي ليست منوعة ولا بالجودة المطلوبة، بينما يمكنك أن تجد العشرات وربما المئات منها في مخازن الصور غير المجانية بدقة وجودة عاليتين. لكن تبقى مخازن الصور المجانية جيدة كفاية لمعظم التصاميم ونادرًا ما ستحتاج لصور غير مجانية. ومن السهل معرفة حقوق ملكية الصورة من المخازن المستخدمة ولكن من الصعب معرفتها من مواقع الويب الأخرى كالمواقع الإخبارية أو المدونات أو الموسوعات أو حتى من محركات البحث، وفي معظم الحالات تكون الصورة محفوظة الحقوق لتلك المواقع، والحل الوحيد لاستخدامها هو أخذ الإذن من مالكها ضمن شروطه هو، فقد يطلب الإشارة إلى موقعه أو إلى اسمه أو قد يطلب قيمة مالية معينة لقاء تلك الصورة. وفي حال استخدمت صورًا محمية بدون الحصول على الترخيص أو التصريح الذي يسمح لك باستخدامها فإن ذلك سيتسبب في مشكلة كبيرة لعملائك اللذين صممت لهم علامتهم البصرية حيث أن علامتهم التجارية لن تتصدر محركات البحث وقد لا تعرض أبدًا بل وقد يحذف المحتوى الخاص بهم بسبب حقوق ملكية الصور المستخدمة في تصميم علامتهم التجارية. نلاحظ كيف أن الصورة مجانية بما في ذلك للاستخدام التجاري ولا يترتب أية التزامات على استخدامها - الصورة من واجهة موقع Pixabay مصادر الصور والرسوميات هناك الآلاف من المصادر المتنوعة للصور والرسوميات عبر الإنترنت، البعض منها ذات حقوق ملكية وتحتاج لشراء ترخيص من الموقع لاستخدام الصور، والبعض الآخر ذو تراخيص مجانية بشروط معينة، ويوجد مواقع تمنحك صورًا مجانية بالكامل دون شروط. لنستعرض أهم هذه المواقع. مصادر الصور والرسوميات ذات حقوق ملكية سنستعرض هنا أهم المواقع التي تقدم صورًا ورسوميات ذات حقوق ملكية ولتتمكن من استخدام صورها ورسومياتها فعليك شراء الترخيص لذلك، ولكن حتى الترخيص له أنواع، فهناك تراخيص تسمح لك باستخدام الصور شخصيًّا ولا تسمح لك بالاستخدام التجاري وأخرى تسمح لك باستخدامه في موضع واحد أو أكثر وهناك تراخيص تسمح لشخص واحد أو عدة أشخاص باستخدام الصورة. يوجد تراخيص بأنواع كثيرة تحدد كيفية استخدام الصورة أو الرسوميات بطريقة محددة ولكل ترخيص منها سعره الخاص. Shutterstock: يحتوي على صور فوتوغرافية ورسوميات نقطية وشعاعية. Adobe Stock: يحوي صور وفيديوهات ورسوميات وصوتيات ونماذج ثلاثية الأبعاد. Getty Images: يحوي صور فوتوغرافية وفيديوهات فقط. DepositPhotos: يحوي صور وفيديوهات ورسومات شعاعية ورسوميات فنية. Creative Market: ويحوي كل شيء تقريبًا من الصور والخلفيات والخامات والملمس والرسوميات الشعاعية والفنية والأنماط والأيقونات والشعارات والقوالب لكل أنواع التصاميم والنماذج ثلاثية الأبعاد والخطوط وغيرها. StockUnlimited: يضم الصور الفوتوغرافية والرسوميات الشعاعية والأيقونات. istockphoto: يحوي صور فوتوغرافية ورسوميات شعاعية وفنية وفيديوهات. fotolia: يحوي صور فوتوغرافية ورسوميات شعاعية وفنية وفيديوهات أيضًا. iclipart: يحوي قصاصات فنية (كليب آرت) وصورًا وفيديوهات ورسوميات شعاعية وفنية ورسومات متحركة وغيرها. Bigstock: يحوي صور وفيديوهات فقط. dreamstime: يحوي صور وفيديوهات عالية الدقة. 123rf: يحوي صور وفيديوهات ورسوميات شعاعية وصوتيات. مصادر الصور والرسوميات المجانية هناك عدة أنواع للصور والرسوميات المجانية، حيث يوجد مصادر تسمح باستخدام الصور والرسوميات بترخيص المشاع الإبداعي Creative Commons وله أنواع منها المجاني بالكامل أو ما يطلق عليه النطاق العام Public domain ويعرف أيضًا بالترخيص CC0 ويمكنك الاطلاع على جميع التراخيص وسماتها الخاصة من خلال ويكيبيديا أو من خلال موقعهم الرسمي، المهم أنه يجب فهم تراخيص الصور والإيفاء بالتزاماتنا تجاهها. هذا رسم توضيحي يبين أنواع تراخيص المشاع الإبداعي وسمات كل منها. وإليك أهم مصادر الصور المجانية بمختلف التراخيص: Freepik: يتضمن مجموعة كبيرة من الصور ولكنه مختص أكثر بالرسوميات الشعاعية والفنية النقطية، وهو من أشهر المصادر التي يعتمد عليها المصممون. ومع أن غالبية محتوياته مجانية للتحميل إلا أن ذلك بشرط إسنادها إلى الموقع. Unsplash: يحوي صورًا مذهلة من المصورين المحترفين والمبتدئين. Pixabay: أكبر مجموعة من الصور والرسوميات الشعاعية والفنية المجانية عبر الإنترنت. Gratisography: مجموعة من الصور للمصور الموهوب ومصمم الرسوميات Ryan McGuire. Pexels : صور مجانية ضمن النطاق العام من جميع أنحاء العالم. Pikwizard: مصدر ممتاز إذا كنت بحاجة إلى صور ذات مظهر طبيعي للأشخاص. Negative Space: موقع صور مجانية من المصورين الصاعدين. StockSnap.io: يضيف الموقع مئات الصور يوميًا ويتم إصدار جميع الصور ضمن النطاق العام للمشاع الإبداعي CC0. Burst: هو مصدر من شوبيفي Shopify يوفر صورًا مجانية لصالح رجال الأعمال. بعض الصور مرخصة بموجب الترخيص Creative Commons CC0 بينما تندرج الأخرى تحت رخصة الصورة الخاصة بشوبيفي. Reshot: هي مكتبة ضخمة من الصور المجانية المنتقاة بعناية والتي لن تجدها في أي مكان آخر. unDraw: أنشأت كاترينا ليمبيتسوني مكتبة من الرسوم البيانية المذهلة والقابلة للتخصيص والمرخصة من معهد ماساتشوستس للتكنولوجيا، إنها مجانية وليس هناك حاجة للإسناد أيضًا. flaticon: يضم أكثر من 4 ملايين أيقونة على شكل رسوميات شعاعية ونقطية. Vector4Free: تضاف كل يوم الرسوميات الشعاعية المجانية بواسطة فنانين من جميع أنحاء العالم وتتراوح من الرسوم الكرتونية الهزلية إلى الرموز والرسوم البيانية الخاصة بالأعمال والتكنولوجيا. ترخيصهم يفرض الإسناد إليهم. Vecteezy: يحتوي Vecteezy على أكثر من 100000 من الرسوميات الشعاعية المجانية، ويدّعي أنه أكبر مجتمع للرسوميات الشعاعية في العالم، بعض رسوماته مجانية بشرط الإسناد والأخرى ليست مجانية. Free Vector: يحوي مجموعات من الشعارات والرسوميات الشعاعية والأيقونات والفئات لتسهيل البحث. هناك أكثر من 16000 صورة متوفرة. بعض رسوماته مجانية بشرط الإسناد والأخرى ليست مجانية. خاتمة بعد معرفتنا بقواعد استخدام الصور والرسومات في التصاميم، وأهم مصادرها والفرق بينها، أصبح بإمكاننا الآن البدء في تحضير وتجهيز الصور لاستخدامها في تصاميمنا دونما قلق وبثقة كبيرة، حيث يمكننا التعبير عن محتوى التصميم بسهولة، وإيصال الرسالة بطريقة سلسة وواضحة وسريعة.

في هذه السلسلة من الدروس، سنتحدث عن مكتبة jQuery Mobile ونتعرف عليها عن كثب والتي تساعدك على إنشاء مواقع ويب متجاوبة ومتوافقة مع الهواتف. تتضمن هذه السلسلة أكثر من 65 مثال تطبيقي عملي مع شيفراتها الكاملة. هذا الدرس جزء من سلسلة دروس تشرح jQuery Mobile: الدرس الأول: البداية، بناء وتقديم محتوى الدرس الثاني: التضمين، تهيئة الصفحة، التنقل بين الصفحات وأحداث التحميل الدرس الثالث: اتجاه الصفحة وأحداثها الدرس الرابع: ربط صفحات خارجية وتنظيم المحتوى بنظام الشبكة وبناء محتوى قابل للطي الدرس الخامس: الأيقونات والأزرار وإنشاء تنسيقات مخصصة الدرس السادس: إنشاء القوائم وتنسيقها وإنشاء نماذج البحث وتسجيل الدخول بدايتك مع jQuery Mobile ما هو jQuery Mobile المحمول يوفرjQuery Mobile مجموعة وفيرة من أدوات التطوير التي تجعل موقع ويب الموجه للهواتف متجاوبًا ومرنًا وبسيطًا. يُعرّف jQuery ببساطة على أنه مجموعة من إضافات وودجات (widgets) jQuery تهدف إلى توفير API متعدد المنصات لإنشاء تطبيقات ويب للهواتف. من حيث الشيفرات البرمجية، jQuery Mobile يشبه jQuery UI، لكن في حين أن jQuery UI موجه لتطبيقات سطح المكتب، فإن jQuery Mobile موجه للهواتف المحمولة. ما يجب معرفته حول إنشاء مواقع ويب للهواتف يجب عليك معرفة ثلاثة كلمات رئيسية عند تطوير مواقع ويب للهواتف، وهي أنه يجب أن يكون الموقع الموجه للهواتف: متجاوبًا: يتضمن كيف يبدو شكل الصفحة عند التنقل، وكيف يُضْغط على الزر وكيف تُحمّل البيانات على الهاتف. مرنًا: يعني أنه يمكن تخصيص الموقع عن طريق المستخدم ليناسب رغباته. بسيطًا: يعني أن الموقع يسهل تصفحه عن طريق الهاتف. ما يجب معرفته حول jQuery Mobile للمطورين أثّرت jQuery بشكل كبير على العالم الناشئ من تطوير وتصميم الويب، فلقد غيّرت من طريق تنفيذ واستخدام جافا سكربت على مواقع وتطبيقات الويب ولذلك اختارتها مايكروسوفت كإطار جافا سكربت المفضل، وضمّنت دعم الإكمال التلقائي (auto-completion) لـ jQuery داخل visual studio، وبالتالي فإن jQuery mobile هي امتداد مدعوم وموثوق لمكتبة jQuery. لماذا jQuery Mobile؟ (تحتاج إلى معرفة jQuery Mobile كمطور) كما أشرت في "ما يجب معرفته حول jQuery Mobile للمطورين”، أدى ظهور جيل أجهزة الهواتف إلى الحاجة إلى تطبيقات ويب متجاوبة ومرنة وبسيطة وبالتالي ارتفعت بسرعة الحاجة والطلب على jQuery mobile (إطار عمل jQuery)، وحان الآن الوقت بالنسبة لك كمعلم أو مبتدئ في API مواقع الهواتف الجوالة للقفز والمشاركة مع هذا المشروع. الجهاز الذي يُشغل jQuery Mobile يعتمد عمل jQuery في مختلف الأجهزة على المتصفح ونظام التشغيل. فالمتصفحات التي تدعم jQuery Mobile هي المتصفحات الحديثة التي تدعم وسوم HTML5 والقليل من CSS3. فالأجهزة التي تدعم jQuery mobile هي الحواسيب المكتبية والمحمولة، أنظمة الكل في واحد (all-in-one)، الأجهزة اللوحيّة، الهواتف الذكية، أندرويد، iOS، بلاك بيري (النسخ الحديثة)، webOS، ويندوز للهواتف، وأجهزة القراءة الإلكترونية، فيدعم jQuery mobile أجهزة كيندل kindle التي تتضمن متصفح مبني على Webkit تجريبي. ما يحتاجه المطور المحترف لإنشاء مواقع ويب للهواتف باستخدام jQuery Mobile لتطوير التطبيقات، ستستخدم: بالنسبة لنظام ويندوز التطبيقات: Komodo IDE، eclipse، iWeb، Microsoft FrontPage، Aptana studio، Dreamweaver، notepad++. وسنستخدم Dreamweaver في هذا الدرس. بالنسبة لنظام OsX التطبيقات: Coda، espresso، textwrangler، kod. لغات البرمجية التي يجب على مطور الويب معرفتها هي HTML5 و CSS3 وجافا سكربت. يتكون jQuery Mobile من أربعة ملفات: ملف جافا سكربت، ملف CSS، وملفي PNG. يُحمَّل ملف جافا سكربت بشكل مقصود بعد تحميل مكتبة jQuery الأساسية، ويقوم هذا الملف بمهام كثيرة مثل إنشاء الويدجات وتطبيق مستمعي الحدث (event listeners) وتفعيل API. ورقة أنماط CSS تحدد مخطط ومظهر عناصر صفحة jQuery Mobile، بالإضافة إلى تحديد الانتقالات (transitions) والرسوم المتحركة مع تحويلات CSS3. يمكنك تحميل كامل حزمة jQuery Mobile (مكتبة جافا سكربت، CSSـ والرسومات) أو يمكنك الوصول إليها عن طريق مشروع CDN، راجع صفحة تحميل مشروع jQuery Mobile للتفاصيل، سنستخدم CDN في أمثلتنا لهذا الدرس. DOCTYPE لبناء محتوى HTML لموقع الهاتف DOCTYPE انتقالي لـ HTML4 بالنسبة للمطورين الراضين باستخدام وسوم HTML المهملة لكن يريدون الانتقال إلى HTML 4 يمكنهم استخدام DOCTYPE الانتقالي والذي يسمح للمتصفح تحليل الوسوم المهملة وعرضها دون رمي (throw) أية أخطاء. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> DOCTYPE الصارم لـ HTML4 يمكن للمطورين الذي لا يرغبون بتضمين دعم للوسوم المهملة وإمكانية وجود أخطاء تنسيق عند استخدام وضع التوافق 'compatibility' استخدام DOCTYPE الصارم والذي يخبر المتصفح برمي أخطاء عند تضمين وسوم مهملة في ملف HTML عند محاولة تحميله، وسيكون هذا مفيدًا لضمان عملك على معيار HTML4. DOCTYPE من أجل HTML5 يعمل DOCTYPE للإصدار HTML5 تقريبًا على جميع المتصفحات القديمة وهو يُستخدم بالفعل على مواقع عديدة اليوم. لاستخدام HTML5 DOCTYPE في ملف HTML، استخدم المقتطف التالي: <!DOCTYPE html> هيكل الموقع الأساسي باستخدام HTML5 DOCTYPE <!DOCTYPE html> <html> <head><title></title></head> <body></body> </html> العمل مع هيكل HTML5 و CSS و جافا سكربت بناء وتقديم المحتوي في HTML5 <!DOCTYPE html> <html> <head> <title>Titles should be short descriptions of the page</title> <meta charset="utf-8"> </head> <body> <div> <h1>h1 tags should contain the most important information on your site</h1> <p>Paragraph tags should be where most of your text content lives, or used as a separation between sections.</p> <ul> <li>This is a list element</li> <li>This is another element, notice the bullets and indentation </li> </ul> <p>You probably noticed that I used a "div" tag to wrap these other tags in. I'm using it as a container.</p> </div> </body> </html> نعرف بالفعل ما تفعله هذه الشيفرة البرمجية، لكن دعنا نلقي نظرة حول شكله في الواقع. ستظهر لك الصورة في الأسفل شكل HTML الذي كتبناه: CSS في بناء وتقديم محتوى HTML5 اضغط على زر الإدخال بعد الوسم <title> </title> وأضف المقتطف كما هو موضح في رابط الصورة التالية لربط ملف الأنماط css. إلى ملف html. الرئيسي. يجب وضع الشيفرة البرمجية التالية في الملف hist.css @charset "utf-8"; /* CSS Document */ body { background:#0CF; font-family: Helvetica, Arial, sans-serif; font-size: 0.75em; } h1 { font-size: 200% } p { margin: 5px 0; padding: 0 3px; } #year{ text-align:center; font-weight:bold; font-size:200%; } .small { font-size: 80%; } تُظهر لك الصورة في الأسفل مظهر HTML الجديد بعد ربط ملف CSS . جافا سكربت في بناء وتقديم محتوى HTML5 ملخص لوضع وسوم جافا سكربت في ملفك: تحميل السكربتات في عنصر head: يجعلها تُحمّل أولا لكن قد تُؤثّر سلبا على وقت التحميل. تحميل السكربتات في body : تبدو فكرة جديدة لكنها تخلق مشاكل مع الصيانة وترمي (trows) تأخيرات التحميل المحتملة. تحميل السكربتات قبل إغلاق وسم body : سيبدو تحميل موقع أسرع لكن قد يؤدي ذلك إلى نتيجة غير مقصودة لنقص وظائف الموقع في الثواني الأولى للتحميل. دعنا نضع السكربتات في وسم head والتي هي الحالة المفضلة لكل مطور. <script src="js/javascript.js" type="text/javascript"></script> </head> يجب وضع السكربت التالي في ملف javascript.js // JavaScript Document window.onload = setYear; function setYear() { var currentYear = new Date(); document.getElementById('year').innerHTML = currentYear.getFullYear(); } ستوضح لك الصورة أدناه شكل HTML الجديد بعد ربط ملف js .. تعلمنا قليلا جول استخدام الحالي لهيكل HTML وربط CSS وتحميل السكربت (جافا سكربت)، والآن لنتعلم كيف نستخدم المهارات التي تعلمناها في jQuery mobile. ترجمة -وبتصرّف- للمقال jQuery Mobile Lesson 1 لصاحبه Andrew اقرأ أيضًا الدرس التالي: التضمين، تهيئة الصفحة، التنقل بين الصفحات وأحداث التحميل

كُنّا في درس سابق قد تحدثنا عن كيفية تخطيط صفحات الويب باستعمال CSS2 وكيف أنّ ذلك لم يكن بالأمر السهل، لذلك في هذا الدرس سوف نقوم بنفس التخطيط ولكن باستعمال تقنيات CSS3 الجديدة. تٌقدّم لنا CSS3 مجموعة من التقنيات والتحسينات لتساعدنا على تخطيط صفحات الويب بشكل أفضل وأسهل ودون الحاجة إلى الكثير من الأكواد كما كان الحال في CSS2. كما أنها مُصممة لتدعم السلوكات المتغيرة/الديناميكية وبالتالي يمكننا القول بأنها " لغة قابلة للبرمجة". دعونا إذًا نرى بعض الخصائص والتقنيات الجديدة التي توفرها هذه اللغة ونحاول استخدامها لدعم حالة الاستخدام التي كنّا قد بدأنا بها في الدرس السابق. دالة ()calc الخاصة بلغة CSS3تُستخدم دالة ()calc الجديدة لحساب القيم بشكل ديناميكي (ضع في الحسبان أن دعم هذه الدالة يختلف من متصفح لآخر). وفي داخل هذه الدالة يمكنك كتابة أي معادلة/تعبير (expression) باستخدام المعاملات الحسابية المعروفة (+، -، *، /). سوف يساعدنا استخدام هذه الدالة على التخلص من الكثير من الأكواد التي كان لا بد منها في CSS2، وفي حالتنا هذه فإنها سوف تساعدنا في تمدد العناصر بشكل أفضل (سوف يصبح استخدام تقنية CSS Expansion التي ذكرناها سابقًا أكثر سهولة). أنظر للكود الموجود في الأسفل: #nav, #subnan { position: fixed; height: calc(100% - 10em); /* replaces */ z-index: 20; }لاحظ أننا استخدمنا الدالة ()calc في الخاصية height وهذا سوف يساعدنا بالحصول على نفس النتيجة التي حصلنا عليها باستخدام CSS2 عندما استخدمنا الخاصيتين top: 6em و bottom: 4em، وبهذا يمكن للأمور أن تصبح أكثر مرونة وسوف نحتاج إلى خاصية واحدة (height مع ()calc) بدل اثنتين (top وbottom). استخدام CSS3 Flexbox في تخطيط الصفحاتتُعتبر Flexbox من الخصائص والتقنيات الجديدة التي ظهرت في CSS3 وهي تجعل من تخطيط الصفحات وترتيب عناصرها أمرًا سهلًا ومتشابهًا في مختلف أحجام الشاشات والأجهزة، وبالتالي فهي مفيدة جدًا عند القيام بتصميم مواقع متجاوبة. وهذه بعض الخصائص والميزات التي تتمع بها Flexbox: تمكننا من موضعة العناصر الأبناء (child elements) بشكل أسهل ويصبح تخطيط الصفحات المعقدة أبسط وأسهل ودون الحاجة إلى الكثير من الأكواد فيصبح لدينا كود أنظف وقابل للقراءة بشكل أفضل.يمكن وضع العناصر الأبناء بأي إتجاه نريده وتصبح أبعاد تلك العناصر مرنة أكثر بحيث يمكنها التجاوب مع مساحة العرض.تستطيع العناصر الأبناء أن تتمدد وتتقلص تلقائيًا لتشغل المساحة الفارغة.كما أنّ Flexbox يقدم مجموعة خاصة به من المفاهيم والمصطلحات، ونذكر بعض منها: Flex container: العنصر الذي يحتوي على الخاصية display بالقيمة flex أو inline-flex بحيث يصبح هذا العنصر هو العنصر الحاوي (الأب) للعناصر التي نريد التعامل معها.Flex item: هو أي عنصر موجود في الـFlex container. (ملاحظة: أي نص موجود بشكل مباشر داخل الـFlex container سيتم احتواؤه داخل anonymous flex item).Axes: أي flexbox يجب أن يحتوي على الخاصية flex-direction بحيث تُحدد هذه الخاصية المحور الرئيسي (main axis) الذي سوف تتموضع حوله الـflex items. ويوجد أيضًا المحور العرضي (cross axis) ويكون هذا المحور عموديًا على المحور الرئيسي.Lines: يمكن للـflex items أن تصطف/تتموضع في خط واحد أو خطوط متعددة وذلك ما تحدده الخاصية flex-wrap.Dimensions: يحتوي flexbox على main size و cross size كبديل عن height وwidth بحيث تُحدد هاتين القيمتين حجم المحور الرئيسي (main axis) والعرضي (cross axis) على التوالي.بعد هذه المقدمة القصيرة عن flexbox يمكننا الآن استخدامها في تخطيط الصفحات. <body class="layout-flexbox"> <header id="header"></header> <div class="content-area"> <nav id="nav"></nav> <aside id="subnav"></aside> <main id="main"></main> </div> <footer id="footer"></footer> </body>نريد في حالة الاستخدام التي نعمل عليها أن تكون العناصر الرئيسية (header ،content ،footer) مصفوفة بشكل عمودي، وبالتالي سوف نستخدم القيمة column في الخاصية flex-direction كما يلي: .layout-flexbox { display: flex; flex-direction: column; }ومع أنّ العناصر الرئيسية يجب أن تكون مصفوفة بشكل عمودي إلّا أنّ العناصر في منطقة المحتوى (nav ،subnav ،main) نريدها مصفوفة بشكل أفقي. وبما أنّ كل flex container يمكن أن يحتوي على خاصية flex-direction واحدة فقط فإننا سنقوم بتعريف العديد من flex containers داخل بعضها البعض حتى يمكننا التحكم في تخطيط الصفحة كما نشاء (أي حتى يصبح بإمكاننا أن نجعل العناصر تصطف كما نريد وألّا نصبح مقيدين باتجاه واحد فقط). ولهذا السبب قمنا بإضافة حاوي (container) آخر (<div class="content-area">) ليحتوي على عناصر nav ،#subnav# و main#. وبهذا يمكن للعناصر الرئيسية أن تصطف بشكل عمودي بينما تصطف عناصر منطقة المحتوى بشكل أفقي. نريد الآن أن نقوم بموضعة الـflex items لذلك سوف نستخدم الخاصية flex وهي اختصار(shorthand) للخصائص flex-grow ،flex-shrink وflex-basis. وهذه الخصائص تُحدد كيف تقوم الـflex items بتوزيع المساحة الفارغة المتبقية بينها، وهذا تعريف بسيط بهذه الخصائص: flex-grow: تُحدد كم يمكن للعنصر (flex item) أن ينمو/يتمدد نسبة للعناصر الأخرى في نفس الحاوي.flex-shrink: تُحدد كم يمكن للعنصر (flex item) أن يتقلص نسبة للعناصر الأخرى في نفس الحاوي.flex-basis: يُحدد الحجم الافتراضي للعنصر (أي حجمه قبل أن ينمو أو يتقلص). عندما نقوم بإعطاء الخاصيتين flex-grow وflex-shrink القيمة "صفر" فإننا نقوم بمنع العنصر من أن يتقلص أو ينمو حتى لو كان هناك مساحة فارغة (أي أنّ حجم العنصر يبقى ثابتًا). وهذا ما سوف نقوم به للترويسة (header) والتذييل (footer) لأننا نريد أن يبقى حجمهما ثابتًا: #header { flex: 0 0 5em; } #footer { flex: 0 0 3em; }وإذا أردنا لعنصر أن يستغل أي مساحة ثابتة فإننا نعطي الخاصيتين flex-grow وflex-shrink القيمة "1" ونعطي الخاصية flex-basis القيمة auto. وهذا ما نريده بالنسبة لمنطقة المحتوى (نريدها أن تستغل أي مساحة فارغة). وكما ذكرنا سابقًا فإننا نريد للعناصر الموجودة داخل <div class="content-area"> أن تصطف بشكل أفقي، لذلك سوف نعطيها الخاصية display: flex حتى يصبح هذا العنصر عبارة عن flex container وسوف نعطيها أيضًا الخاصية flex-direction: row حتى نجعل العناصر الموجودة في داخله (nav ،#subnav# و main#) تصطف بشكل أفقي، وبالتالي نحصل على تنسيقات CSS التالية: .content-area { display: flex; flex-direction: row; flex: 1 1 auto; margin: 1em 0; min-height: 0; }في منطقة المحتوى نريد أن يكون حجم كلا العنصرين nav# وsubnav# ثابت وبالتالي سوف نعطيها الخاصية flex بقيم مناسبة: #nav { flex: 0 0 5em; margin-right: 1em; overflow-y: auto; } #subnav { flex: 0 0 13em; overflow-y: auto; margin-right: 1em; }لاحظ أنني استعملت الخاصية overflow-y: auto وذلك حتى نتعامل مع المحتوى إذا ما تجاوز ارتفاع الحاوي. متصفح Firefox هو من يحتاج لهذه الخاصية. سوف يأخذ العنصر main# المساحة الفارغة المتبقية: #main { flex: 1 1 auto; overflow-y: auto; }كل شيء يبدو جيدًا إلى الآن، لذلك دعونا نقوم بإضافة السلوك المتغير/الديناميكي ونرى ما يحصل. سوف تكون أكواد الجافاسكربت مشابهة لما استخدمناه سابقًا باستثناء أن اسم الـclass للعنصر الحاوي سيكون layout-flexbox بدلًا من layout-classic: $('.layout-flexbox #nav’).on('click', 'li.nav-toggle', function() { $('#nav').toggleClass('expanded'); });سوف نضيف "class expanded" إلى تنسيقات CSS كما يلي: #nav { flex: 0 0 5em; /* collapsed size */ margin-right: 1em; overflow-y: auto; &.expanded { flex: 0 0 10em; /* expanded size */ } }لاحظ أننا هذه المرة لم نحتج إلى أن ندع العناصر الأخرى تعلم بشأن تغير العرض وذلك لأنّ flexbox تعالج الأمر دون تدخل منا. الشيء الوحيد المتبقي هو إخفاء القائمة الفرعية، ولكن احزر ماذا؟ لن نحتاج لكتابة أي أكواد إضافية لأن flexbox سيعلم بشأن المساحة الفارغة وسوف يتكفل بجعل كل شيء يعمل كما هو مطلوب. يوفر لنا flexbox أيضًا مجموعة من الطرق التي تمكننا من توسيط العناصر في الاتجاهين العمودي والأفقي. يمكننا الآن معرفة أهمية وجود مثل هذه التقنية في لغة CSS وكيف أنّها تساعد على جعل الكود أفضل وله القابلية للتطور والتوسع. ولكن على الناحية الأخرى فإنّ هذه التقنيات تحتاج إلى وقت أكثر لإتقانها مقارنة بخصائص CSS الأخرى. تخطيط الصفحات باستخدام CSS3 Gridإذا كنت تعتقد أن flexbox شيء جديد فأنت حتمًا لم تسمع عن CSS3 Grid، فهي ما زالت في مرحلة مبكرة (مرحلة draft) ودعم المتصفحات لها شبه معدوم (يمكنك تفعيلها في متصفح Google Chrome عن طريق الدخول إلى chrome://flags واختيار "experimental Web Platform features"). وفائدتها هي أنها تعمل في طبقة العرض (presentation layer) وبالتالي لن نحتاج إلى معرفة كيفية ظهور العناصر في التوصيف (markup) الخاص بملفات HTML (أي أنّ كل شيء سيتم باستخدام CSS بعض النظر عن ترتيب العناصر في HTML). الفكرة العامة هي أن يكون هناك شبكة تخطيط (grid) مرنة ومُعرّفة بشكل مسبق يمكن أن نستخدمها لموضعة العناصر بداخلها. وكما هو الحال في flexbox فإنها تعمل على مفهوم المساحات الفارغة وتسمح لنا بتعريف إتجاهين (عمودي وأفقي) في نفس العنصر مما يؤدي إلى تقليل حجم الكود وزيادة مرونته. يُقدّم لنا Grid Layout نوعين من الـgrids وهما explicit وimplicit، ولجعل الأمور بسيطة سوف نركز على explicit فقط. وكما هو الحال مع flexbox فإنّ Grid يقدم مجموعة خاصة به من المفاهيم والمصطلحات، ونذكر بعض منها: Grid container: هو أي عنصر يملك الخاصية display بالقيمة "grid" أو "inline-grid" بحيث تتموضع العناصر داخله ويتم محاذاتها بناءً على grid مُعرّف مسبقًا (explicit mode). والـgrid هو عبارة عن مجموعة من الخطوط العمودية والأفقية المتقاطعة والتي تفصل الـGrid container إلى مجموعة من الخلايا (cells). وهناك مجموعتين من الخطوط؛ الأولى لتعريف الأعمدة (columns) والثانية تكون عمودية على هذه الأعمدة لتعريف الصفوف (rows).Grid track: هي المسافة بين خطّين متجاورين، وكل Grid track يتم إعطاؤه دالة تحجيم (sizing function) للتحكم بكيفية نمو كل عمود أو صف وبالتالي التحكم في البعد بين الخطوط المحيطة بكل خط.Grid cell: هي المسافة بين صفّين متجاورين وعمودين متجاورين من خطوط الـgrid، وهو أصغر وحدة من الـgrid يمكن الرجوع والاستناد إليها عندما نقوم بموضعة عناصر الـgrid.Flexible length: هو بُعد يتم تحديده بوحدة fr وهو يُمثّل جزء من المساحة الفارغة في الـGrid container. إليك عناصر HTML التي سوف نستخدمها: <body class="layout-grid"> <header id="header"></header> <nav id="nav"></nav> <aside id="subnav"></aside> <main id="main"></main> <footer id="footer"></footer> </body>لاحظ بأننا في تخطيط الصفحة هذا لن نحتاج إلى عنصر إضافي يعمل كحاوٍ لمنطقة المحتوى كما كان الحال مع flexbox، وذلك لأنّ هذا النوع من تخطيط الصفحات (Grid layout) يسمح لنا بتعريف مساحة كل عنصر في كلا الإتجاهين وبنفس الـGrid container. لنبدأ الآن بإضافة تنسيقات CSS: .layout-grid { display: grid; grid-template-columns: auto 0 auto 1em 1fr; grid-template-rows: 5em 1em 1fr 1em 3em; }قمنا باستخدام الخاصية display: grid على الحاوي (Grid container)، وكذلك استخدمنا الخاصيتين grid-template-columns وgrid-template-rows وهما تمثلان المساحة بين الـGrid tracks. بمعنى آخر، فإنّ هاتين القيمتين لا تمثلان مكان تواجد خطوط الـgrid وإنّما تمثلان مقدار المساحة بين الـGrid tracks. ضع في الحسبان أنّ وحدات القياس يمكن أن تكون أي واحدة من التالية: وحدة طول (length).نسبة مئوية معينة من حجم الحاوي (Grid container).مساحة من المحتوى الذي يحتله العمود أو الصف.جزء من المساحة الفارغة في الـgrid.فعلى سبيل المثال، في الخاصية grid-template-column: auto 0 auto 1em 1fr سيكون لدينا التالي: track واحد لتعريف عمودين بعرض auto (مساحة القائمة الرئيسية nav#).gutter واحد بقيمة "صفر" (الـmargin الخاص بالعنصر subnav# موجود في مستوى العنصر، ويمكن أن يكون موجودًا أو لا وبهذه الطريقة نضمن أن لا يكون هناك gutter مزدوج).track واحد لتعريف عمودين بعرض auto (مساحة القائمة الفرعية subnav#).gutter واحد بقيمة 1em.track واحد بقيمة 1fr للعنصر main# (سوف يأخذ المساحة المتبقية).لاحظ أننا استخدمنا القيمة auto في الـtrack، وهذا يسمح لنا بالحصول على أعمدة ديناميكية بحيث يتم تعريف مكان وحجم خطوط الـgrid بناءً على المحتوى الخاص بها. (سوف نحتاج أيضًا إلى تعريف حجم العنصرين nav# وsubnav# وهذا ما سنفعله بعد قليل). وبطريقة مشابهة، سوف تملك الصفوف الخاصية grid-template-row: 5em 1em 1fr 1em 3em مما يجعل العنصرين header# و footer# ثابتين ويؤدي أيضًا إلى أنّ العناصر الموجودة بين هذين العنصرين سوف تستخدم المساحة الفارغة المتبقية في حين تكون قيمة الـgutters بقيمة 1em. لنرى الآن كيف سنقوم بموضعة العناصر داخل الـgrid الذي قمنا بتعريفه: #header { grid-column: 1 / 6; grid-row: 1 / 2; } #footer { grid-column: 1 / 6; grid-row: 5 / 6; } #main { grid-column: 5 / 6; grid-row: 3 / 4; overflow-y: auto; }إنّ تنسيقات CSS الخاصة بالعنصر header# تُخبرنا بأننا نريد أن تكون الترويسة موجودة بين الخطين 1 و6 (أي العرض كامل) بالنسبة للأعمدة وبين الخطين 1 و2 بالنسبة للصفوف. ونفس الشيء بالنسبة للعنصر footer# فنريده أن يكون موجودًا بين الخطين 1 و6 (أي العرض كامل) بالنسبة للأعمدة وبين الخطين 5 و6 بالنسبة للصفوف. أمّا بالنسبة لمنطقة المحتوى فقد تمّ إعطاؤها الخصائص المناسبة حتى تشغل المساحة التي يفترض بها أن تشغلها. لاحظ أنّ الخاصية grid-column هي اختصار (shorthand) للخاصيتين grid-column-start وgrid-column-end و أنّ الخاصية grid-row هي اختصار للخاصيتين grid-row-start وgrid-row-end. لنعد الآن إلى العنصرين nav# وsubnav#. بما أننا قمنا مسبقًا بوضع هذين العنصرين داخل الـtrack بقيم auto فسوف نحتاج إلى تحديد مساحتهما (نفس الشيء سيكون بالنسبة لـ"expanded" فسوف نقوم فقط بتغيير عرضها وسوف يتكفل Grid بالباقي). #nav { width: 5em; grid-column: 1 / 2; grid-row: 3 / 4; &.expanded { width: 10em; } } #subnav { grid-column: 3 / 4; grid-row: 3 / 4; width: 13em; margin-left: 1em; }يمكننا الآن أن نقوم بتغيير وضع القائمة الرئيسية nav# وإخفاء أو إظهار القائمة الفرعية subnav# وكل شيء سيعمل بشكل جيد وملائم. كما أنّ Grid Layout تسمح لنا باستعمال أسماء مستعارة لتسمية الخطوط حتى نستطيع أن نُغير في الـgrid كما نريد دون أن يؤدي ذلك إلى خلل في الأكواد لأنّها ستكون مربوطة باسم معين وليس بأحد خطوط الـgrid. خاتمةحتى باستخدام تقنيات CSS القديمة فإنّ هناك الكثير مما يستطيع مطورو الويب فعله واستغلاله. ومع ذلك فقد يكون ذلك مهمة ليست سهلة وتحتاج إلى الكثير من الأكواد والتي قد تكون مكررة في كثير من الأحيان. ولكن كما شاهدنا فإنّ CSS3 بدأت تقدم طرق وتقنيات أفضل لتخطيط صفحات الويب والتي بدورها تُسهّل العمل على مطوري الويب. لذلك أعتقد أنه يجب على أي مطور ويب أن يتقن ويتعلم هذه التقنيات حتى يُحسّن من تجربة المستخدم وحتى يقوم بكتابة كود أنظف وأفضل. وهذه المقالة قدمت جزءًا صغيرًا فقط مما يمكن فعله باستخدام تقنيات CSS3 وهناك الكثير مما يجب عليك تعلمه. ترجمة -وبتصرّف- للمقال CSS Layout Tutorial: From Classic Approaches to the Latest Techniques لصاحبه Laureano Martin Arcanio.

مع بداية كل عام جديد تجدنا نفكر في الطرق التي تمكننا من تحسين أنفسنا للأفضل، فلا ضَير من توجيه البعض من تلك الطاقة لتحسين مظهر الموقع والقيام بعملية تجميل خفيفة له. حينما يتعلق الأمر بتجديد مواقع الانترنت فليس هناك حاجة للقيام بعملية تجديد كاملة ما لم يتحتم ذلك. وإلا فبعض الشّد والتزيين يكون كافيًا لإعطاء موقع الوردبريس حلة جديدة. اقتراحي هو البدء بتغيير خطوط الطباعة. الخطوة الأولى: تقييم خطوط الموقع الحالية قبل الشروع في إحداث أي تغييرات كانت من الأحسن إلقاء نظرة تحليلية لتقييم الموقع حتى نتمكن من معرفة نقاط الضعف و كذا المجال المتاح لإحداث التغييرات. من أجل تقييم خطوط الموقع، يتوجب علينا التحقق من النقاط الآتية 1- مصدر اختيار الخط الحالي هل نعلم من أين جاءت خيارات الخطوط الحالية للموقع، هل هي الخطوط الافتراضية للوردبريس أم أنها كانت مختارة وفق نزوةٍ آنيةٍ. على الرغم من أنها تبدو بمظهر جيد إلا أن هذه الخطوط لم تكن مختارة بعناية لتناسب علامة الموقع التجارية الفريدة من نوعها فمفتاح التصميم هو التناسق، بداية من الصور المستخدمة وصولًا إلى نوعية الخطوط. خطوط جوجل مكان رائع للبحث عن الخطوط وزيادة عن ذلك فهو مجاني 2-هل نملك مجموعة الحروف كاملة؟ لنفرض أنه قد حددنا نوع الكتابة التي تتماشى مع تصميم الموقع، فما العمل إن اكتشفنا أن نوع الخط لا يحتوي على كل مجموعة الأحرف كاملة. هل سنُجبِر الكُتاب والمحررين على تجنب الأحرف التي لا يتضمنها نوع الخط. لتجنب ذلك يتعين علينا قبل اختيار نوع الخط التحقق من أنه يتضمن كل الأحرف، الأرقام والرموز عبر الرجوع إلى مصدره، هناك يوجد حقل معاينة يتيح لنا معرفة ما إذا كان يحتوي على مجموعة الحروف كاملة أو لا. للتحقق من أن نوع الخط يحتوي على كل الأحرف اللاتينية أدخل السطور التالية للتحقق ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz àèéïöùüçûæÆœŒ .،؛:؟! / [] {} () * - - ... "" '' _ 0123456789 ≤≥ ÷ + = ≈ ≠ ± - · √ ° @ € £ $٪ & * | «» \ <> / ~ "" §¶ © ® ™ 3- مسألة القابلية للقراءة بإمكان مستخدمي نظام التشغيل ماك تنزيل برنامج Font Book حيث يسمح هذا البرنامج لمستخدميه بالقيام بما يلي: التحقق من وجود مجموعة الحروف كاملة. معاينة الخط رقميًا، لمعرفة كيفية ظهوره على الموقع. طباعة مجموعة الأحرف كاملة في أحجام وأنماط مختلفة لتحديد أكثرها ملاءمة للقارئ. تخزين الخطوط وحفظها منظمةً لإعادة استعمالها لاحقًا. 4-ملائمة نوع الخط للجوال يتواجد العديد من البرامج على الإنترنت مثل Responsinator تسمح بالتحقق من مدى توافق مواقع الإنترنت على شاشات الجوال، نفس هذه الاداة تتيح معاينة توافق نوع الخط مع الجوال. إن التوصية القياسية لضبط حجم الخط للتوافق مع عديد المنصات هو مقياس 16 نقطة أو أكثر. قد لا يكون هذا هو الحال الأمثل في حالة الخطوط المنمقة جدًا، لذلك يتوجب التأكد باستعمال واحدة من هذه الأدوات قبل الالتزام بخط معين. 5- مناسبة لون الخط للقراء إن تحسين نوع خطوط الموقع لا يقتصر على العثور على نوع الخط أو الحجم الصحيح فقط، بل يتعدى إلى إيجاد اللون المناسب أيضًا. استخدام لوحة التصميم يُبًّيِن أنه بغض النظر عن الألوان المختارة فلون الخط الأساسي والثانوي دائمًا ما يكون أسودًا أو بدرجات ظل اللون الرمادي. لوحة التصميم 6-اختبار إمكانية وصول الخط يعرف مطورو الويب المحترفين كل التقنيات التي تجعل من مواقع الويب متاحة للجميع. مع ذلك، فإذا أردنا إعطاء خطوط الموقع مدى عالمي، فلا بد من إيلاء من يعانون قصورًا بصريًا أو من عمى الألوان اهتمامًا بالغًا. برنامج Color Oracle يحاكي كيف تظهر مواقع الانترنت للمصابين بعمى الألوان. باستعراض ودراسة التوصيات التي قدمتها المؤسسة الأمريكية للمكفوفين. تجعل الكتابة والخطوط أكثر قابلية للقراءة، من حيث حجم الخطوط، نوعها، ولونها، مدى التباين والبعد بين الكلمات والأسطر. الخطوة الثانية: اتباع أفضل الخطوات للمساعدة في اختيار الخطوط ان اختيار الخطوط هو قرار شخصي بحت، يشبه إلى حد كبير اختيار تصاميم مواقع الإنترنت فكل وذوقه واختياراته. لكن بإمكاننا دائمًا تنظيم و ذِكر الخطوات الواجب إتباعها أثناء اختيار نوع جديد من الخطوط. مطابقة العلامة التجارية: عند اختيار الخطوط يتوجب احترام قواعد التصميم المتبعة أثناء إنشاء العلامة التجارية للموقع. البساطة: تَجَنُب استعمال أكثر من ثلاثة أنواع من الخطوط في الموقع الواحد، مع الحرص على ضمان سهولة مقروئية الخطوط المختارة. الاتساق: يتوجب استعمال نمط خطٍ مُوَحَد في كل الموقع، حيث يجب المحافظة على نفس نوع الخط، حجمه، لونه وأسلوبه في جميع عناوين الموقع. ونفس الشيء ينطبق أيضًا على نصوص الموقع. التباين: بجانب المحافظة على الاتساق يتوجب إنشاء تباين بين عنوان النص ومحتوى النص. على التباين أن يكون لافتًا للنظر دون أن يكون خارجًا عن الإطار. على سبيل المثال يمكننا استعمال خط cursive مع خط handwritten. التحقق من الالوان: كما ذكرنا سابقًا، يعتبر اللون الأسود أو درجات ظِل اللون الرمادي الداكن من أفضل الألوان المناسبة للقراءة. دون نسيان الأخذ بعين الاعتبار لون الخلفية (نص فاتح على خلفية داكنة و نص داكن على خلفية فاتحة). استعمال الاحرف اللاتينية الكبيرة: يتوجب الحذر عند استعمال الأحرف اللاتينية الكبيرة فهي صعبة القراءة نوعًا لذلك يجب استعمالها بتحفظ. إنشاء تسلسل هرمي: على الرغم من أن القاعدة العامة هي استخدام حجم خط لا يقل عن 16 نقطة فهذا لا يعني أن يكون حجم كل خطوط الموقع مماثلًا لذلك. فيجب أن يتم تحديد حجم خاص بكل من العناوين، العناوين الفرعية والنص الأساسي لتحديد تسلسل هرمي واضح. احترام المسافات: بعد اختيار نوع خطوط الموقع، يجب تفقد شكل و مظهر النصوص. والعمل على تحسين المسافات بين الأسطر و الكلمات لجعلها سهلة القراءة والفهم. كقاعدة عامة كل سطر يجب أن لا يتعدى خمسة عشر (15) كلمة. إجراء إختبار أ/ ب : طرح مظهرين عامين للموقع بإختيار مجموعتين مختلفتين من أنواع النصوص و إجراء نوع من سبر الآراء لمعرفة شعور المستخدمين إزاء المظهرين واختيار الأنسب بينهما. ترجمة –وبتصرّف- للمقال How to Give Your WordPress Site a Font Facelift لصاحبته Brenda Barron حقوق الصورة البارزة محفوظة لـ Freepik

التوازن هو مفهوم هام في عملية تصميم المواقع الإلكترونية. لتحقيق التوازن، لا بد من معرفة كيفية استخدام التناظر (Symmetry) والتباين (Asymmetry) للوصول الى الجمال والوضوح. هذه الأدوات هي جزء لا يتجزأ في عملية تصميم موقع إنترنت موحد وجميل. من المهم أن نفهم هذه الفكرة بشكل صحيح قبل استخدامها. ما هو التناظر (Symmetry)؟نحن نرى الجمال في الأشياء المتناظرة وفي الناس المتناسقين. التناظر هو عامل أساسي في علوم الجمال والجماليات. ولكن ماذا يعني ذلك حقاً؟ التناظر هو نوع من توازن الانسجام والتناسب. في جميع الكائنات هناك تناظر وتوازن. وهذا الأمر قد تم إثباته بواسطة علوم الهندسة والفيزياء. الجاذبية هي عامل مهم في التناظر الطبيعي. وهذا هو السبب في أن معظم الأشياء في الطبيعة تتطور نحو التناظر. ولهذا نرى الجمال في التماثل والتناظر. أكثر أنواع التناظر شيوعاً هو التناظر الانعكاسي. والذي يعرف أيضاً بالتناظر الثنائي. هذا يعني أساساً وجود "نصفين متطابقين". أي أنه إذا قمت بطي الكائن على محوره الأوسط، فإنك ستلاحظ أن كلا الجانبين هما نصفين متطابقين أصلاً. الطبيعة مليئة بالأمثلة عن التناظر الثنائي كالفراشات، الأوراق، الحياة البحرية والخ. إنها تُظهر هذا الشكل من التناظر. كل الحياة النباتية والحيوانات تقريباً تُظهر هذا النوع من التناظر. هناك القليل فقط لا يتمتع بالتناظر الثنائي. وطبعاً التناظر الثنائي في الطبيعة هو تقريبي، ولا تتطابق الأنصاف بشكل تام عند طيها على محورها الأوسط. أحد أفضل الأمثلة عن هذا التناظر هو الجسم البشري. كل نصف من الجسم البشري إن كان الأيمن أو الأيسر هو انعكاس للنصف الآخر. أمّا داخلياً، فالأمر مختلف. حيث أن أعضاء الجسم الداخلية لا تعكس أنصاف بعضها البعض. وهناك أنواع عديدة من التناظر الانعكاسي (الثنائي) في الطبيعة، مثل التناظر الأفقي (وهو الأكثر شيوعاً)، العمودي، القطري والخ. التباين (Asymmetry)التباين (Asymmetry) يظهر جلياً في غياب التناظر. ويمكن تحقيق التوازن التركيبي في التباين. التباين شائع أيضاً في الطبيعة وعلم الأحياء. معظمنا إما أيمن أو أعسر في استخدام اليد. وإما أن يكون نصف دماغنا الأيمن أو الأيسر هو المهيمن. أعضاؤنا الداخلية ليست متطابقة تماماً. التباين يخلق الطاقة والتوتر. في حين أن التناظر هو ثابت ومنتظم. الجمال في التباين (الصورة من WIKI) التباين في لوحة فنية رائعة للفنان Wassily Kandinsky إنك تشعر بالحركة في التباين. ولهذا السبب تبدو التصاميم المعمارية واللوحات الفنية المتباينة أكثر إثارةً للاهتمام. في التباين حرية، لا يمكن احتواؤها أو منعها، على عكس التناظر. ولكن إذا نظرنا إلى سلبيات التناظر فهو قد يكون مملاً ومُنهِكاً للعين إن لم يكن دقيقاً وصحيحاً وسيكون المنظر العام فوضوياً ومربكاً. التناظر (Symmetry) ضد التباين (Asymmetry) في تصميم المواقعالتوازن جزء لا يتجزأ في تصميم المواقع، ولهذا فإن الاستخدام المناسب لكلا الحالتين (التناظر والتباين) مهم جداً. التناظر والتناسق في مواقع الانترنت غالباً ما تكون محبـِطة لأنها تجعل التصميم يبدو مملاً وساكناً، وسيكون هناك نقص في الطاقة الحيوية للتصميم وهذا ما يجعل مهمة جذب اهتمام المتابعين صعبة. ولكن مواقع الانترنت المتناظرة ليست دائماً بهذا السوء، وهذا يعتمد على ماهية مواضيع الموقع. المواقع المتناظرة لها مزاياها الخاصة، التناظر في تصميم الموقع يعطيه التنظيم والتوازن، سيبدو الموقع نظيفاً ومرتباً، وهذا مهم خصوصاً إذا كان الموقع محترفاً ويحوي مثلاً معلومات عن المركبات والسيارات بأنواعها. تصاميم المواقع المتباينة وغير المتناسقة هي أكثر إثارةً للاهتمام وأكثر ديناميكية، بالمختصر المواقع المتناظرة تساعد على التذكّر أما المتباينة فهي مثيرة للاهتمام. وهذه أمثلة عن مواقع متناظرة: هذا مثال رائع لإظهار التناظر في مواقع الإنترنت، موقع Duuel مخصص لإيجاد أفضل المصممين "بشرط أن يكونوا" مغامرين ممن يستطيعون التنافس مع زملائهم المصممين، حيث أن التنافس مع الآخرين يُظهر أفضل المواهب لدى المصمم، ولا يحق لهم سوى استخدام التناظر الثنائي، والذي يُظهِر التناغم بين الموهبة والذكاء في تقديم عروضهم. يوجد شكل آخر من أشكال التناظر والتناسق وهو التناظر الدوراني (Rotational Symmetry) والذي يساعد على خلق الإيقاع والتناغم والتدفق. وهو يوجّه عيون المشاهدين إلى أين ستكون البداية وأين ستكون الخطوة التالية. التناظر الانسحابي (Translational) ويطلق عليه أيضاً التناظر التعددي أو التناظر الانتقالي، وهو شكل آخر من أشكال التناظر والذي يكون فيه الكائن مكرراً خلال سير مخطط التصميم، مع الإبقاء على نفس التوجه، الجحم والشكل. إن كنت تعرف مبدأ الجشطالت (Gestalt principle) فيجب أن يكون مألوفاً لديك أن دماغنا سينخدع ليقودنا الى أين يتجه التصميم، وأيضاً لتحقيق التوازن في رؤوسنا. Duplos هو موقع رائع يستخدم تقنية التباين، فعلى الرغم من أن العناصر في الموقع لا تعكس بعضها البعض، إلا أنها تحقق التوازن التركيبي للموقع، وهو ما يجعل الموقع يبدو جميلاً و مثيراً للاهتمام في نفس الوقت. يمكنك أيضاً أن تجمع بين التناظر والتباين معاً، حيث يمكنك تحقيق توازن متناغم من خلال دمج التناظر والتباين في تصميم موقعك. استخدم عناصر متناظرة لجعل مخطط التصميم احترافياً وأنيقاً، ضع المعلومات ضمن هذا السياق ليصبح تذكّرُها سهلاً، واستخدم العناصر المتباينة لجذب الانتباه، خصوصاً أن جذب اهتمام المشاهد هو الأهم. خير مثال على عملية الدمج بين الأسلوبين هو موقع جوجل الجديد، جميعنا نعرف الموقع القديم لجوجل، إنه متناظر تماماً، لقد اعتمدوا على المساحة البيضاء بدون استخدام أية عناصر إبداعية على الاطلاق، وهو موقع مفيد جداً، ومع ذلك هو ممل وجامد. الآن يتيح لك الموقع الجديد الاختيار بين عدة تصاميم وتغييرها، كما يتيح لك الاختيار ضمن مجموعة كبيرة من الثيمات (المواضيع) والصور، حتى أنه يمكنك الاختيار من ضمن صورك على موقع Picasa. شعار جوجل الآن أصبح أبيضاً عوضاً عن الشعار الملون المألوف، ولكن كل الأشياء الأخرى على حالها: الروابط، موقع الشعار وحجمه وشريط البحث وسط الموقع. الموقع الجديد مزَجَ بين التناظر والتباين بشكل هادئ ولطيف بنجاح تام. العناصر المتباينة أكثر ظهوراً ولفتاً للانتباه من العناصر المتناظرة، لهذا يجب أن يكون التخطيط العام والخلفية خاملة بصرياً، وبالتالي التناظر مهم لهذه العناصر، وينبغي استخدام التباين للتصاميم الفردية التي تهدف إلى لفت الانتباه وكسر الملل. المزيد من الأمثلة عن مواقع مثيرة للإعجابإن معظم المواقع لا تتبع أسلوباً واحداً فقط (متناظر أو متباين) إنما تستخدم كلا الطريقتين معاً، وفيما يلي بعض الأمثلة عن مواقع رائعة تستخدم التناظر والتباين معاً: خلاصةسنلخص هذه المقالة بتقديم بعض النصائح التي تساعدك على استخدام التناظر (Symmetry) والتباين (Asymmetry) لصالحك: التناظر عظيم جداً لهيكل التصميم الأساسيالعناصر المتكررة تخلق مساحة هادئة ومتوازنة. التصميم المتناظر يستطيع أن يخلق التوازن، وفي نفس الوقت يحافظ على المساحة من أجل النصوص والصور. التباين رائع للفت انتباه المشاهدينالإكثار من التناظر يسبب الملل حيث ستبدو وكأنها عُرضت مرات لا حصر لها. لجعل تصميم الموقع أكثر إثارةً للاهتمام أضف بعض العناصر المتباينة هنا وهناك وذلك لجذب الانتباه والتخلص من الرتابة في التصميم. التباين أثقل بصرياً، لهذا يوجّه عيون المشاهدين إلى المنطقة المنشودة. مع التباين، يجب أن يتم التركيز على التوازن التركيبي دائمانعم، التباين مثير للاهتمام ولكنه يبدو ناقصاً وغير مصقول كما يجب، بما أن العناصر المختلفة لها أوزان مختلفة، فيجب الحذر عند ترتيب العناصر حتى تبقى متوازنة من جميع الجوانب، هذا سيمكّنك من التحكم بسير العمل على التصميم وسيجعله يبدو جميلاً، مثيراً للاهتمام ومصقول. اتبع غريزتك في التصميمإننا نملك عيوناً تمكننا من رؤية ما هو جميل وما هو عكس ذلك، لقد تدربنا على ما يبدو لنلاحظ التوازن البصري من عدمه. فإذا كنا نرى التصميم يبدو مشوشاً، مربكاً أو حتى مملاً، لربما هو كذلك فعلاً. اللجوء الى الأساسياتلا تبالغ في تصميم الموقع ككل، كن فناناً، لكن تذكّر أن غالبية المشاهدين ليسوا كذلك. لا تبالغ في التفكير أو زيادة العناصر في التصميم، فقط انظر إلى التصميم كشخص عادي، تجنب الخلط والتشابك في التصميم لتجعل المعلومات تتدفق بسهولة وسلاسة إلى المشاهدين. ترجمة -وبتصرّف- للمقال: Web Design Symmetry and Asymmetry. حقوق الصورة البارزة: Designed by Freepik.

يُثير مصممي مواقع الإنترنت الجدل من حولهم، فهم على قدر عالي من الإبداع وقادرين على بناء وتصميم كل ما قد يخطر على البال، ولكن وخلف الكواليس يرتكبون العديد من الأخطاء، أخطاء من شأنها أن تهدد مستقبلهم الوظيفي. لا يهم إن كنت مصمم مواقع مبتدئ أو خبير، هذه الأخطاء الخمس لا بد من النظر في أمرها، فهي لا تميز بين أحد والجميع عرضة للوقوع فيها. 1. حضور ضعيف على الشبكة العنكبوتيةيجب عل مصمم مواقع الإنترنت إن يُثبت وجوده في الشبكة العنكبوتية، ويكون له من اسمه نصيب، وتجاهل ذلك هو من أكبر الأخطاء التي قد يقع بها المصمم، فنحن الآن في عصر الإعلام الاجتماعي social media، حيث تُبنى الثقة وتتشكّل من خلال عدد الأشخاص الذين يعرفون ويقدرون أعمال المصمم وإبداعاته، بمعنى آخر لا تتوقّع استلام المشاريع أو الانضمام إلى فريق من المحترفين إن لم يكن لك صفحة أعمال قوية تتحدث عنك وعن خبراتك. يوجد المئات من الآلاف من مصممي المواقع في الشبكة العنكبوتية بلا شك، ولكن من يعرفهم؟ القلة فقط من يَستمتع بمهنة التصميم، وذلك لأنهم أصحاب مهارات تواصل وقادرين على بناء شبكة من العلاقات والتي ستخدمهم في عملهم وستصب في مصلحتهم. يَلجأ بعض مصممو المواقع إلى التدوين لسد هذه الفجوة، أو بناء شبكة من المُتابعين على مواقع التواصل الاجتماعي، أو حتى إنشاء معرض أعمال فريد من نوعه ولا نظير له، استعرض موقع Deviant Art وبالأخص قسم Web Interfaces وسترى ما أقصده، أو ربما متجر التصاميم بيكاليكا، فمن المجدي جدًا تقديم تصاميمك إلى هذا النوع من المواقع في سبيل الحصول على المزيد من الاهتمام ونشر أعمالك إلى أكبر شريحة ممكنة. وعليه وباختصار فإن الحلول المقترحة لحل هذه المشكلة تتلخّص بالتالي: إنشاء مدونة والبدء بالتدوين أو على أقل تقدير المشاركة بالمجتمعات التقنية مثل مجتمع حسوب I/O ومنه مجتمع التصميم وقابلية الاستخدام.استفد من مواقع الإعلام الاجتماعي، وحاول أن تبدع في مجالك وليكن لك شخصية تميزك عن أقرانك من المصممين، فالجميع يحب اللمسة الإبداعية، المصممون وغيرهم، والشبكات الاجتماعية خير منصة وأكبر شبكة للانتشار.انضم إلى مجتمعات تعنى بالتصميم وما يدور في فلكه مثل أو Dribbble أو Behance.خذ بعين الاعتبار إنشاء صفحة أعمال portfolio مركزية شاملة لجميع أعمالك.قد تبدو هذه النصائح مملة في التطبيق وخاصة للمبتدئين، ولكنها الأساسات التي ستضمن للمصمم الانتشار والشهرة. 2. عدم تعلم مفاهيم جديدةلا يكلّف بعض المصممون أنفسهم بتعلّم البرمجة أو على الأقل أساسياتها، وذلك بحجة أنهم مصممين وليسوا مبرمجين، وهذا خطأ لا يُغتفر في رأيي، فلم يعد يقتصر احتراف تصميم مواقع الإنترنت على احتراف برنامج الفوتوشوب فقط، حيث يبحث أصحاب المشاريع والمواقع عن المصمم الشامل، ويعتقدون أنه بما أنك تستطيع التصميم وتملك الحس الفني في ذلك فمن المفترض أن تكتب الشيفرة التي تحوّل فيها تصميمك إلى شيفرة برمجية، بمعنى آخر، مهنة تصميم المواقع تغيّرت وتطوّرت ولا يمكن تجاهل هذا الأمر، وهذه حقيقة قد لا تعجب البعض، وأصبح من يَبرع في أكثر من مجال هو من له نصيب الأسد مقارنة بالذي يُركّز على شيء واحد فقط. إن كنت مصممًا لا يعرف أساسيات البرمجة، فأنصحك بالتعلم من الآن وعدم إضاعة المزيد من الوقت، ولمن يعرف أساسيات البرمجة ولكنه يهاب تعلم تقنيات مثل jQuery وجافا سكريبت أو لغة التوصيف HTML5 أو تقنيّة مثل CSS3، ستخطو خطوة كبيرة في مسيرتك المهنية لو تعلمت الأساسيات فقط، فالمسألة مسألة وقت قبل تجد نفسك مجبر على تعلّم هذه التقنيات، ويمكنك الاستفادة من الأكاديمية في هذه الجزئية فيوجد العديد من الدروس والمقالات في هذه الصدد. تتلخّص الحلول لهذا الخطأ القاتل بالنصائح التالية: تعلّم كتابة الشيفرة أو على الأقل اقرأ وافهم الأساسيات، الأمر الذي سيسمح لك بالنظر للأمور بمنظور مختلف.تابع المدونات التي تهتم بتصميم المواقع وآخر تقنياتها ومستجداتها.نصيحة أخيرة: لا يدوم شيء في عالم التكنولوجيا وما فات مات، وسيتميّز فقط من هم قادرين على التكيّف والتلاؤم وتقبّل كل ما هو جديد. 3. الطموح الزائد عن حدهوقعت في هذا الفخ سابقًا، وذلك من خلال قبول العديد من المشاريع، طبعًا يعود السبب إلى الطمع، والعواقب كانت وخيمة، فإن كنت تعمل بمفردك من دون فريق عمل كامل فلا يمكنك بأي شكل من الأشكال قبول جميع المشاريع والطلبات، لذا يجب أن تعتمد على جدول زمني بالمشاريع والمهام التي تعمل عليها وليكن عملاؤك بصورة الوضع، لكيلا يتوقعون استلام مشاريعهم بسرعة لا تستطيع الالتزام بها، بالمختصر إن تحميل نفسك أكثر مما يجب واستلام مشاريع من كل صوب وحدب هو مغامرة محفوفة بالمخاطر وعليك تجنبها والمسألة مسألة وقت قبل أن ينقلب السحر على الساحر. ستقود المبالغة والطموح الزائد عن حدّه دائمًا إلى عواقب لا يُحمد عقباها، فمثلًا مشكلة الحضور الضعيف على الشبكة العنكبوتية لا يُحل من خلال المبالغة وتحميل نفسك ما لا طاقة لك به، لا بل قد تزيد الطين بلّة، واليد الواحدة لا تصفق، فمن الصعب الموازنة بين التدوين وتنفيذ المشاريع وكتابة كتاب إلكتروني، ولذلك يجب التركيز على هدف واحد والتقيد بجدول زمني لا تحيد عنه. تتلخّص حلول هذه المشكلة كما في التالي، وذلك من خلال اتباع خطة محكمة قادر على تطبيقها والالتزام بها يوميًا: استخدم تطبيقًا يسمح لك بمتابعة مهامك وتصنيفها، أنصح بـِ Trello فهو خيار جيّد ويعتمد عليه الكثير من المصممين.خذ قسطًا من الراحة، ربما السفر إلى مكان لطالما رَغبت بزيارته وفكّر بما تريد التركيز عليه في المستقبل القريب.وتذكّر دائمًا أنه لا يمكنك حمل بطيختين بيد واحدة. 4. لا طموح أبدانجد البعض يبحث هنا وهناك ويريد التهام الأخضر واليابس وطموحه لا يقف عند حد معيّن، وبالمقابل يوجد ممن لا يحرّك ساكنًا في سبيل التغيير والتجديد، ما أقصده لا يجب على المستقل قضاء أكثر من سنتين في العمل على نفس النمطية، قد لا يكون هذا بالخطأ القاتل والذي قد يُهدد مسيرتك المهنية، ولكن من الممكن أن يكون سببًا يدعوك إلى الندامة في المستقبل جراء الملل والروتين القاتل، وعليه اطلب تظفر ومفاتيح الأمور العزائم. خذ زمام المبادرة، وابحث عن الجديد وتعلمه وفكّر خارج الصندوق، واعمل على أشياء جديدة كنت تخشى الخوض فيها: اكتب كتابًا إلكترونيًا عن الأشياء التي تبرع بها واطرحه للبيع ليكون لك دخلًا إضافيًا.سجّل فيديوهات تعليمة تخصصية في مجالك واطرحها بين مجاني وبين مدفوع.إن كنت تعمل بمفردك، ابحث عمن يشاركك ميولك واهتماماتك واعمل على بناء فريق للشروع في قبول مشاريع كبيرة ما كان لك لتقبل بها بمفردك.ابدأ بتعلّم تقنيّة جديدة.يمكنك تنفيذ النصيحة الأولى والثانية حتى لو كنت تعمل بوظيفة دوام كامل. 5. الحساسية الزائدةهذا من أكثر الأخطاء القاتلة التي أخشاها، حيث يَعتقد المصمم بأنه صاحب النظرة التصميمة المبدعة والصائبة، وعلى العميل الأخذ بها وعدم التشكيك فيها، ولكن وفي كثير من الأحيان هذا ليس الحال ومن المستحسن المثول لرغبة العميل وطلباته. عندما تتحدّث مع العميل، لا تخلط الأمور الشخصية بالعمل، بمعنى من الطبيعي جدًا أن يُشير لك العميل إلى علّة ما في التصميم، ويطلب تعديل/تنقيح منك، لا بل قد يرفض التصميم ككل ويطلب آخر، وهذه أمور شائعة وتحدث بين الحين والآخر، وإن تعاملت مع هذه الأمور بشيء من الغضب والغيظ فستكون الحلقة الأضعف والخاسر الأكبر. يمكن التغلّب على هذه العادة من خلال التروي والتفكير بالأمر وقبول حقيقة أنه ليس كل ما تفعله هو الحل الأمثل، وطلبات التعديل والانتقادات لا مفر منها، وستساعدك هذه الأمور على النضج كمصمم مواقع لا العكس. لا أقصد أن المستقل دائمًا هو المخطئ والعميل دائمًا على حق، ولهذا يوجد بعض الإرشادات والأفكار عليك أخذها بعين الاعتبار لتتجنّب شخصنة الأمور بينك وبين العميل: لا تغتر بنفسك وتعتقد أنك الأفضل في مجالك.تقبّل الانتقاد بصدرٍ رحب وتعامل معه بروحٍ رياضية.النقاش وتبادل الآراء هو المفتاح لفهم العميل.يجب على الجميع التغلّب على مسألة الحساسية تجاه الانتقاد، فالجميع معرّض له، والفطن هو من يعرف كيف يتجاوز الأمر بعيدًا عن تضخيم الأمور. هل هذا كل شيء؟لا تُعتبر مهمّة تصميم المواقع بالمهمة السهلة شئنا أم أبينا، ويوجد العديد من المطبات هنا وهناك، وباعتبار أن مسألة التصميم مرتبطة ربما بذوق الشخص وإبداعه لذلك نجد أن المصمم قد يأخذ الأمور على محمل جدي بعض الشيء، ولكن الالتزام بالنصائح السابقة سيتكفّل بالمطلوب والتقليل من الأضرار، ما رأيك هل يوجد أخطاء قاتلة أخرى يمكن لك أن تضيفها إلى القائمة السابقة شاركنا بها؟ ترجمة وبتصرّف للمقال C5Career-Threatening Mistakes Web Designers Make and How to Fix Them. حقوق الصورة البارزة: Designed by Freepik.

موقعك ميّت؟ يوجد أمل في ذلك. إن المواقع العظيمة لا توجد بالصدفة. يُعتبر الموقع ناجحًا إذا كان مفيدًا، ملائمًا للغرض الذي صُمّم من أجله، ومصمّمًا بصورة جيّدة. أقوم، بصفتي مدير قسم UX في منصّة تصميم المواقع بدون شِفرات، بقضاء الكثير من الوقت بالتفكير حول التصاميم العظيمة وكيفية استخدامها لإنشاء مواقع عظيمة. توجد لمشاريع المواقع المختلفة احتياجات مختلفة، وعلى الرغم من ذلك توجد بعض مبادئ وممارسات التصميم التي تعمّ جميع المواقع. سنلقي نظرة في هذا المقال على خمس نصائح تساعدك على إنعاش موقعك الميّت. 1. فكر في التحويلات Conversionيجب أن يجد العملاء سببًا مبررًا من شأنه إن يؤدي إلى التحويل. التصميم لا يتعلّق بمفهوم الجمال فحسب وإنّما يذهب إلى أبعد من ذلك. نعم أنت تريد من الموقع أن يكون جذّابًا بصريًّا، لكن يجب أن تأخذ بنظر الاعتبار إنّ الموقع ليس عمًلا فنيّا. لا يأتي العملاء إلى الموقع فقط ليُعجبوا بالمظهر المرئي، وإنّما لسبب مبرر؛ كأن يبحثوا عن معلومات معيّنة أو لتنفيذ مهمّة معيّنة. إنّ الموقع الناجح هو الذي يفهم هذه الاحتياجات؛ أي يجب أن يرشد الأشخاص إلى فعل الشيء الذي جاؤوا من أجله بالضبط. عليك أن تتذكّر إنّ إمكانية التحويل للموقع هي عنصر متكامل من تصميم الموقع. إن عملية التحويل تعني تحويل الشخص من مجرد كونه زائر عادي إلى عميل؛ يصبح عضوًا في الموقع، يشترك للحصول معلومات إضافية في المستقبل، أو مجرّد يقوم بملء نموذج استطلاع. يلعب كل جانب من جوانب تصميم الموقع دورًا في قيادة العملاء إلى وجهاتهم وتحويلهم. الصور: يجب أن تكون الصور مثيرة للاهتمام، فريدة من نوعها، وذات جودة عالية.اللون: هل نظام الألوان جذّاب وملفت للنظر؟النص: ويشمل النص المستخدم للمراسلة وكذلك الوصف، التعليمات، والبطاقات.التصفّح: كيف يمكن للأشخاص أن يتنقلوا بسلاسة خلال موقع؟هذه ليست سوى بعض العناصر التي تساهم في التحويلات الناجحة. وبشكل أساسي، كل جزء من أجزاء التصميم يُعتبر عاملًا في تحويل العملاء. انظر إلى المثالين أدناه وقرر أي من هذه المواقع سيحصل على تحويل أكثر؟ موقع Device Magic يمتلك جميع عناصر التحويل الجيد. مفاجأة! هذا الموقع هو موقع حقيقي. إذًا، كيف تعرف أنّ موقعك يمتلك خيارات التصميم الصحيحة فيما يتعلّق بالتحويلات؟ الأمر ليس أن تتخذ قرارًا ثم تجلس آملًا الأفضل، لا بل يجب عليك اختبار قرارات التصميم هذه وأن تكون قادرًا على عمل التعديلات الضرورية. إنّ اختبار A/B هو وسيلة رائعة لمقارنة النتائج بين تصميمين مختلفين. على سبيل المثال، إذا كان لديك زر دعوة إلى إجراء (call-to-action button) كبير على الصفحة الرئيسية لموقعك؛ يجب عليك معرفة اللون، الخط، وحتّى الموضع الذي سيكون أكثر فعّالية لهذا الزرّ. اختبار A/B ضروري لمعرفة ما يصلح أو لا يصلح لتحويل أفضل. عندما تُجري الاختبار الذي يرى فيه بعض المستخدمين الخيار (A) والبعض الآخر يرى الخيار (B) يمكنك بذلك دراسة النتائج لمعرفة البُنية ذات الأداء الأفضل والتي ينتج عنها تحويل أكبر للعملاء. عندئذ يمكنك عمل تغييرات وإجراء تجارب إضافية في محاولة إيجاد أفضل خيار مُتاح للزرّ. وهذا هو الشيء الذي يجب أن تفعله للتصميم النهائي لموقعك. 2. لا تخش المساحات البيضاءالمساحات الكافية بين العناصر تعني تجربة قراءة ممتعة أكثر. الاستخدام الفعّال للمساحات البيضاء هو خاصيّة أخرى مهمّة لتصميم موقع عظيم. يُنظر إلى المساحات البيضاء من قِبل غير المصمّمين على أنها المساحات من الموقع التي لم يُطبّق عليها تصميمًا معيّنًا. بينما يعتبرها خبراء تصميم المواقع مساحات مصمّمة بتأنٍّ، سواءً استُخدمت هذه المساحات حول الصور، المحتوى النصّي، أزرار التحويل، أو أي عنصر آخر من عناصر الموقع. ويصِف المصمم البارز Ellen Lupton المساحات البيضاء أفضل وصفٍ بقوله: (أي إنّ المساحات البيضاء مهمّة بقدر المساحات المملوءة بعناصر التصميم). في بعض الأحيان، تتصور الشركات صفحات مواقعها على أنها صحيفة، حيث تسعى إلى ملء كل بكسل متوفّر بمحتوى معين، واحِدًا تِلوَ الآخر، تمامًا كالذي يحاول ملء كل بوصة من الصحيفة بأعمدة من النصوص. قد يصلُح هذا الاستخدام العدواني للمساحات في مجال الصحف، لكنّ المواقع ليست صحف، والأشخاص لا يستخدمون محتويات المواقع بنفس الطريقة التي يستخدمون بها الصفحات المطبوعة. إنّ المباعدة الكافية بين عناصر الصفحة تُتيح لزوّار الموقع تجربة قراءة أكثر متعة، كما تسمح لهم بالتركيز على أجزاء معيّنة من الصفحة بدون تشتيتهم بالأشياء الأخرى حولها. تُتيح المساحات البيضاء التألق للمحتوى دون الحاجة إلى قتال ما يجاوره من أجل جذب الانتباه. توجد طريقة رائعة لاستخدام المساحات وهي Parallax Scrolling. يُعرّف Parallax على أنّه اختلاف المنظر، وهو تأثير يحدث عندما تتحرك الصور الأمامية في الموقع بسرعة مختلفة عن الصور الخلفية مما يعطي الموقع إحساسًا بالعمق والحركة. يمكن استخدام هذا التأثير بصورة فعّالة جدًّا كأداة رواية القصّة Storytelling. تظهر العناصر الأخرى للصفحة (كالصور، النصوص، الخ) على الشاشة في أوقات مختارة عندما يقوم المستخدم بالتمرير خلال الصفحة. ومن الضروري استخدام التوقيت المناسب والمُباعدة الفعّالة لجعل العناصر تمتلك الوقْع الأقوى. يخاف العديد من المصمّمين من المتطلبات التقنية لإضافة Parallax Scrolling، لأن الشفرة البرمجية للمواقع والضرورية لتشغيله يمكن أن تكون شاقّة لغير المطوّرين. مع ذلك، تتوفر إضافات Parallax Scrolling والتي تجعل، وبشكل بديهي، تطبيق هذه التأثيرات أكثر سهولة، بالإضافة إلى المساحات المناسبة بين هذه العناصر المتحرّكة، كلّ ذلك دون الحاجة إلى كتابة سطر واحد من الشفرات. 3. تنسيق النصوص، تنسيق النصوص، تنسيق النصوصلا تستخفّ أبدًا بالخطوط. على الرغم من أن الفيديوهات الرائعة والصور المذهلة لها مكانة عظيمة على الإنترنت، ألا أنّ حقيقة الأمر إنّ المواقع هي في الغالب عبارة عن محتوى نصّي. فلو كانت هنالك مساحة واحدة في موقعك يمكن من خلالها جلب انتباه إضافي إلى التصميم، سيكون ذلك عن طريق أسلوب تنسيق النص لهذا الموقع. اقتصرت إمكانية المواقع، ولعدة سنوات، على استخدام مجموعة من "الخطوط الآمنة للمواقع" مثل: ArialVerdanaTimes New RomanGeorgiaTahomaLucidaImpactوغيرها الكثيرهذه هي الخطوط المؤكّد تثبيتها أساسًا على جهاز الحاسوب الخاص بك (لأن المواقع ستقرأ الخطوط من جهاز الحاسوب). على الرغم من ذلك، اتخذ اختيار الخطوط في السنوات الأخيرة قفزة كبيرة إلى الأمام وذلك بعد استحداث خاصيّة font-face@. بهذه الخاصيّة يمكن إرفاق ملفات الخطوط مع المصادر الأخرى، كالصور، والتي يحتاج الموقع استخدامها لغرض العرض بصورة صحيحة. لذلك، وبدلًا من جلب الخطوط من حاسوب المستخدم يمكن للموقع استخدام ملفات الخطوط المرفقة، مما يسمح لهذا الموقع الوصول إلى مجموعة مذهلة من خيارات الخطوط المستخدمة في ذلك التصميم. إنّ امتلاك إمكانية وصول إلى أنواع كثيرة من الخطوط يُعتبر أمرًا رائعًا، لكنّ طريقة الاستفادة من هذه الخطوط هي النقطة المهمّة هنا. ومع تعدد الإمكانيات المتوفّرة لمصممي المواقع في الوقت الحاضر، ما تزال المهارات العالية في فن تنسيق النصوص هي الجزء الحاسم أكثر من أي وقت مضى. فضلًا على ذلك، يجب اختيار نوع الخط المناسب لغرض استخدامه في مشروع معيّن بالرغم من وجود العديد من أنواع الخطوط المذهلة. المفتاح هنا هو أن تعرف إي نوع من الخطوط يكون مناسبًا لتصميمك (serif، sans-serif، slab-serif، إلخ). لا يقتصر فن تنسيق النصوص على اختيار نوع الخط فقط، وإنمّا اختيار حجم ولون الخط الذي يستخدم لكتابة النص، بالإضافة إلى سُمْك الحروف، المسافات بين الحروف والكلمات وحولها، وغيرها الكثير من الأمور. وقبل كل شيء يُعنى هذا الفن بالمحتوى النصّي الممتع والسهل للقراءة. صفحة Design Can Change هي مثال جيد على التوازن. موقع Design Can Change هو مثال جيّد على استخدام العناصر الصحيحة المذكورة في هذا المقال. تجعل النصوص باللون الأسود والأبيض ذات الأحجام المختلفة من الرسالة واضحة داخل الخلفية ذات اللون الأحمر الزاهي، بالإضافة إلى المساحات البيضاء الكافية التي ترشدك إلى قراءة الرسالة التي قد تكون قصيرة ولكنّها مؤثّرة. تذكّر، الموقع ليس مجرّد صورة جميلة وُجدت لغرض الإعجاب بها. إذا احتوى الموقع على نصوص (وأي موقع لا يحتوي على نصوص؟) فإنّ ذلك يعني أنه وُجِد لكي يُقرأ. قد يكون إيصال الرسالة من خلال موقعك هو من مهام كاتب المحتوى، لكنّ تنسيق النصوص بشكل رائع سيضمن وصول الرسالة بشكل واضح ومؤثّر. 4. أقل وليس أكثرقد تكون بضع كلمات جيّدة المعاني أقوى تأثيرًا من مجموعة من المعلومات إذا أردت توضيح نقطة معيّنة. هنالك مقولة لِـ Antoine de Saint-Exupery من المقولات المتعلّقة بالتصميم المفضّلة لديّ: هنالك دائمًا ميلان لإضافة المزيد من الأشياء عند تصميم المواقع. يطلب العملاء المزيد من الخصائص لإضافتها، يريدون المزيد من الأزرار المحشورة للتصفّح، أو يطلبون بعض الأشياء الأخرى لتكويمها في موقهم الجديد. إن إضافة العناصر أو المحتويات الضرورية لنجاح الموقع يُعتبر شيئًا جيّدًا، لكنّ أيّ شخص يكون قد أجرى هذه المحادثات سيُقرّ بحقيقة أن كل شيء يتم إضافته هو بالتأكيد أمرٌ غير ضروريّ. تؤدّي هذه الإضافات في كثير من الأحيان إلى فوضى في التصميم بدلًا من الوضوح. لذلك فكّر فيما تمتلكه في الموقع وحدّد ما يمكن إزالته عِوضًا عن التفكير فيما يمكن إضافته إلى الموقع. لنأخذ شريط التنقّل Navigation Bar كمثال. إذا كانت لديك عشرة روابط أو ألسنة tabs في ذلك الشريط، فإنّ ذلك سيستغرق الزوّار وقتًا أطول لتحديد الرابط الذي يحتاجونه. وسيقلّ هذا الوقت إذا كانت لديك ثمانية خيارات. وإذا استطعت تقليلها إلى خمسة أو ستّة خيارات فسيكون ذلك أفضل بكثير. الأقل هو الأكثر في هذه الحالة هو لأن العدد القليل من الخيارات سيؤدي إلى السرعة في اتّخاذ القرار. إنّ مستوى الوضوح الذي يمكن تحقيقه من خلال تقليل العناصر (في هذه الحالة روابط التصفّح) ستكون ذات فائدة عظيمة خصوصًا مع الصبر القليل للزوّار والوصول الفوري إلى المحتوى الذي يطالبون به. مثال آخر على مبدأ "الأقل هو الأكثر" هو عندما تحاول التأكيد على شيء معيّن في الموقع. فكّر لدقيقة في موقع نموذجيّ. تستخدم معظم الشركات الصفحة كمنصة لتعزيز أي جزء ممكن من المحتوى قد يحتاجه عملائهم. فهم يقومون بإضافة محتوى كبير للصفحة والتأكيد عليه بجعله كبيرًا، ساطِعًا، وسميكًا. وعلى الرغم من كلّ ذلك فإن النتيجة تكون معاكسة، حيث لا يتم التأكيد على أي شيء رغبوا في التأكيد عليه. عندما تصرخ جميع العناصر من أجل جذب الانتباه يضيع كلّ من هدف ورسالة الموقع في تنافر من الضوضاء. وبإزالة بعض العناصر، ستحظى العناصر المتبقّية بمزيد من التركيز تلقائيًّا. عندما ترغب في التأكيد على جزء معيّن من الصفحة حاول إزالة بعض الأشياء المحيطة به، واستخدم مبدأ المساحات البيضاء، بدلًا من معالجتها بصريًّا بجعلها أكبر أو أكثر سُمكًا. في اللحظة التي تتحرر فيها العناصر المتبقّية من الفوضى المحيطة ستبرز تلقائيًّا، لأنّه أصبح بإمكانها أن تتألق دون أن تتنافس مع عناصر الصفحة الأخرى. هذا الموقع هو مثال جيَد على هذا المبدأ. 5. أضف بعض المرح ولكن لا تتجاوز المعقولإنّ أحد الأهداف التي تملكها، على الأرجح، لموقعك وتواجدك على الأنترنت هو أنك تريد أن تترك انطباعًا معيّنًا لدى الزوّار؛ تريد منهم أن يتذكروا عملك. وإحدى الطرق لتحقيق ذلك هي إضافة بعض "المرح" إلى التجربة. التجربة الممتعة هي عندما يستمتع الأشخاص، وإذا امتلك الأشخاص تجربة ممتعة فهي على الأغلب تجربة لا تُنسى. ربّما تكون ردّة فعلك الأولية هي أنّك لا تستطيع أن تمتلك موقعًا ممتِعًا. لكن لنعرّف المقصود بالممتع هنا. لا يُقصد بالممتع أن يكون تافهًا، الموقع يمكن أن يكون ممتعًا ومِهنيّا في نفس الوقت بإضافة لمسة من البهجة إلى التجربة. وهذا يعني إزالة ما هو ممل واستبداله بشيء آخر بارز. لنأخذ موقع "The Dangers of Fracking" كمثال. هذا الموقع يدور حول مخاطر التكسير الهيدروليكي، لن يتبادر إلى ذهنك المرح إذا فكّرت بهذا الموضوع، مع ذلك هو موقع جذّاب، لافت للانتباه، وبارز بسبب استخدام الرسوم التوضيحية، الرسوم المتحرّكة، وتأثير parallax-style storytelling. يعتبر هذا مثالًا رائعًا على استخدام "المرح" في موقع جادّ لجعل الرسالة والتجربة أكثر قوّةً وتأثيرًا. على الرغم من ذلك يجب ألّا تنسى أنّ هنالك خط لا يجب تجاوزه عند إضافة المرح. من السهل أن تذهب بعيدًا وتنحرف عن الأهداف الأساسية للموقع. من المهم أن تعرف مكان هذا الخط عندما تستخدم هذه الطريقة لكي تتجنّب التجاوز. تذكّر فقط أن هنالك دائمًا فسحة للمرح والبهجة في تجربة الموقع، لكن عملك كمصمّم هو أن تعرف الخط الفاصل بين "الكثير" و "الكافي" ولجلب موقعك عند هذه النقطة. ختاماإذا كان موقعك يحتاج إلى علاج، فإنّ جرعة صحيّة من التصميم، متضمّنة النصائح الخمس المذكورة في هذا المقال، قد تكون هي ما ينصح به الطبيب. أخبر مصمّم موقعك عن أهداف الموقع، وكيف إن إدخال التحسينات إلى التصميم من الممكن أن يساعد على إنعاش موقعك الميّت. ترجمة -وبتصرّف- للمقال 5Web Design Best Practices For a Great Website لصاحبه: Tomer Lerner.

أفكارك هي التى تحدد قيمتك وقيمة أعمالك، كلما كانت لديك الأفكار الرائعة والتي تسعى لتنفيذها فستكون قيمتك كبيرة وستحقق أرباحاً أفضل، البُعد عن التقليدي والتفكير خارج الصندوق من السمات المهمة إذا أردت أن تستمر بهذا المجال. فأول منتج ربما تجده ممتازاً بذلت فيه ما بوسعك ووضعت فيه كمية أفكار رائعة، ولكن يتوجب عليك الحفاظ على هذه الجودة والسعي للأفضل دائماً. توجد طرق كثيرة لاستلهام الأفكار الجيدة والتي قد تأتيك أثناء نشاطاتك الاعتيادية كممارسة الرياضة والمشي صباحاً. من الطرق الجيدة أيضا العصف الذهني والاطلاع المتواصل علي المصادر الجيدة لتستقي منها الإلهام، هذه بعض المصار التي سيفيدك قضاء بعض الوقت فيها لتستقي بعض الأفكار الجيدة لعمل منتجك الرقمي القادم . مجتمعات حسوب I/O : توفر منصة حسوب I/O مناخاً مناسباً لتبادل الأفكار والنصائح والنقاشات بين مستخدميها وباللغة العربية، يوجد بها الكثير من المجتمعات التي قد تفيدك في الكثير من المجالات من برمجة وتصميم وصناعة محتوى، فإذا كنت تبحث عن حل لمشكلة ما بمنتجك فيمكنك مناقشتها علي حسوب I/O، أو حتى إن خطرت لك فكرة جديدة واستطلاع الرأي أولاً حولها. من الأشياء التي تفيدك في حسوب I/O هو حفظ المواضيع التي قد تجد أنك تحتاجها فيما بعد في المفضلة، فربما كنت تعمل على منتج جديد وتذكرت تفصيلة معينة قرأتها بمجتمع بمجتمعات أربيا فيمكنك الرجوع إليها حينها.محاضرات TED: الجيد هنا في محاضرات تيد أنها تكون من قبل المتخصصين، لذا فسماع بعض المحاضرات من أساتذة المجال قد يعطيك صورة مجملة لمنتج ما، منتج يحل مشكلة صعبة وبأبسط الإمكانيات، توجد ترجمة للمحاضرات حتى يمكنك التركيز فقط علي المحتوى، ويفضل أن تدون عند سماعك للمحاضرة الأفكار التي قد تجد أن بإمكانك تنفيذها للرجوع إليها فيما بعد.موقع Stumbleupon: يوجد علي الويب كم هائل من الأفكار والإبداعات التي لا حصر لها، بالتأكيد ربما يصادفك محتوى ما يأتيك بالفكرة المرغوبة، فقط إذا كانت لديك الإمكانية لتصفح محتوى موضوع معين وهذا ما يتيحه لك هذا الموقع، حيث يجمع أفضل المحتوى في شبكة الانترنت،وكل ماعليك فعله هو اختيار الموضوع الذي تريد محتوى عنه والضغط على زر stumple.موقع Quora: إذا كنت تتقن اللغة الانجليزية وواجهتك مشكلة ما مع المنتج أو في مرحلة من مراحل العمل به، يمكنك طلب المساعدة عن طريق الأسئلة المتاحة بموقع كورا، أو البحث عن حل لها بالموقع، اسأل مباشرة أو ابحث عن المواضيع المشابهة لمشكلتك أو فكرة المنتج التي تريدها.قضاء بعض الوقت بمناقشات حسوب I/O أو مشاهدة محاضرة لتيد أو إلقاء أسئلتك بكورا أو تصفحك للمقالات المختلفة بموقع stumpleupon سيمدك بكم هائل من الأفكار التي قد تصل بها لتصميم أو لفكرة تطبيق أو كتاب رقمي تبدأ بعمله، أو ربما تنبهك هذه المواقع لبعض الأشياء التي غابت عنك، لتقوم بعمل منتج إبداعي جديد. حقوق الصورة البارزة: Icon vector designed by Freepik.