الثلاثاء، 29 مارس 2005

كيف نستفيد من حديقة التصاميم؟

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

ملاحظة: بعض ما سأكتبه هنا مقتبس من كتاب The Zen of CSS Desgin.

ما هي حديقة التصاميم؟

في آيار (مايو) من عام 2003 قام Dave Shea بإنشاء حديقة التصاميم كموقع فرعي ثم انتقلت إلى موقع منفصل، والحديقة عبارة عن ملف XHTML واحد منظم بطريقة معينة تسمح للمصممين بتعديل تصميم وترتيب المحتويات بمرونة عالية، كل ما على المصممين فعله هو إنشاء التصاميم باستخدام تقنية CSS وبدون إجراء أي تعديل على ملف XHTML، ثم يرسلون هذه التصاميم لديف وهو يضعها في الموقع ويعلن عنها، طبعاً لا يعرض كل تصميم يصل إلى الموقع بل التصاميم الجيدة فقط هي التي تعرض، وهناك قائمة بالتصاميم الرسمية وهي التصاميم التي يستضيفها الموقع، أما باقي التصاميم فهي تستضاف في مواقع أخرى وقد تجد الكثير منها لا يظهر بشكل صحيح، لأن ملفات التصميم حذفت من المستضيف أو حدث شيء ما لها.

هدف حديقة التصاميم هي إثبات أن CSS يمكنها أن تصنع تصاميم جميلة وعملية، وقد تحقق هذا الهدف، والهدف الآن هو تقديم مصدر لإثراء خيال المصممين وتقديم أمثلة إبداعية لتصاميم المواقع وألوانها والخطوط المستخدمة فيها.

كيف نتعلم من تصاميم الحديقة؟

في التصميم الأساسي للموقع ستجد عموداً في يمين الصفحة، يحوي آخر ثمانية تصاميم أضيفت إلى الموقع، ثم رابط يعرض لك ثمانية تصاميم سابقة (next desgins)، ثم رابط يعرض لك كل التصاميم، بعد ذلك ستجد عدة روابط تحت عنوان المصادر (resources)، إذا أعجبك تصميم ما وأردت رؤية ملف CSS الخاص به فاضغط على رابط (View This Design’s CSS)، ولا تنسى أن تتطلع على رابط CSS Resources لتجد الكثير من المصادر المفيدة لتعلم واستخدام تقنية CSS، ورابط FAQ لتعرف المزيد حول موقع حديقة التصاميم.

الصفحة التي ستفيدك حقاً لتصفح التصاميم هي صفحة التصاميم الرسمية، إحفظها في مفضلتك، وابدأ في تصفح التصاميم التي وصلت إلى 158 تصميم وقت كتابة هذه الكلمات وستزداد مع مرور الأيام.

قبل أن تدرس التصاميم قم بدراسة ملف XHTML الذي يعتمد عليه الموقع، تعرف على بنيته وكيف رتبت محتوياته واقرأ محتوياته أيضاً، واحفظ هذا الرسم التخطيطي في حاسوبك فهو يبسط عملية التعرف على بنية الملف.

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

أما إن ضغطت على اسم التصميم فبكل تأكيد سترى التصميم! يمكنك أن تتعلم من التصميم أشياء كثيرة، من أسهلها الألوان المستخدمة، الكثير منا يحتار عند اختياره للألوان، وحديقة التصاميم مصدر ممتاز لتعلم اختيار الألوان، يمكنك أن تستخدم ألوان التصاميم في المواقع التي تصممها، تأمل الألوان وحاول أن تعطي لكل تشكيلة منها صفات خاصة، فمثلاً تصميم Atlantis يستخدم اللون الأسود كلون أساسي مع الأزرق واستخدم اللون البرتقالي لموازنة الألوان (دخلنا في الفلسفة!)، لو كانت الصورة كلها تعتمد على اللون الأزرق لافتقد التصميم التباين الذي يجعله جميلاً، اسم التصميم يشير إلى قارة أطلنتس الغامضة والتي ظهرت نظريات كثيرة حولها، التصميم والألوان تشعرني بالغموض، وتشعرني بأن التصميم غارق في بحر عميق، كذلك تشعرني بتاريخ قديم وأساطير.

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

بعد ذلك يمكنك تعلم كيفية تنسيق واختيار الخطوط، وما تعلمناه في الألوان ينطبق أيضاً على الخطوط، تستطيع الخطوط أن تعطينا انطباعاً عن التصميم، فمثلاً تصميم Dead or Alive يستخدم خطوطاً تذكرنا بالغرب الأمريكي، وقد أراد المصمم مزج شيء من الثقافة اليابانية بشيء من الثقافة الأمريكية، لذلك ترون في أعلى يمين التصميم شجرة بونزاي (bonsai) ورجلان من الساموراي، وفي أعلى يسار التصميم حيث تجدون الشعار سترون بيتاً يابانياً تقليدياً، أما الخطوط المستخدمة في العناوين فيه الخطوط التي تستخدم في الغرب الأمريكي قديماً وكذلك النجوم الخماسية تذكرنا بالنجمة التي يضعها رجال الشرطة الأمريكيون على صدورهم.

ويمكننا أيضاً أن نتعلم من مخططات التصاميم (Layout)، وأعني بذلك أن بعض التصاميم تستخدم عمود واحداً لوضع المحتويات، بعضها يستخدم عمودين أو ثلاثة، بعضها يضع المحتويات الرئيسية في يمين الصفحة وبعضها في يسارها، والبعض منها يرتب المحتويات بشكل غير تقليدي، يمكننا تعلم الكثير من مخططات التصاميم، ويمكننا أيضاً استخدام هذه المخططات في إنشاء مواقعنا.

وبالطبع يمكننا أن نتعلم الكثير عن CSS من كل تصميم، فندرس ملفات CSS ونتعلم كيف رتب المصمم المحتويات وكيف وضع الصور في التصميم ونسقها، وبعض التصاميم تستخدم تقنيات متقدمة في CSS لا يدعمها متصفح إكسبلورر وتدعمها بقية المتصفحات، مما يعني أن التصميم سيظهر بشكل ما في إكسبلورر وبشكل مختلف في بقية المتصفحات، يمكننا تعلم كيفية إنشاء مثل هذه التصاميم عن طريق دراسة ملفات CSS.

ماذا عن الحقوق؟

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