مبحث كاربرد رنگ در طراحی وب بسیار گسترده است كه در این مجال نمی گنجد . بحث هایی هم چون رنگ های عملی در وب ، رنگ های مطمئن در مرورگر ، تصحیح گاما جز این مقوله به شمار می رود كه تنها در این پست به بررسی هارمونی رنگ ها در طراحی وب بسنده می كنیم .

همان طور كه می دانید رنگ ها بر روی وب نه تنها به منظور جالب تر كردن بیشتر سایت ها استفاده می شود بلكه برای تحریك كردن ، سرگرم كردن و یا حتی بر انگیختن احساسات كاربر به كار می روند . جدای از آن عوامل دیگری نیز وجود دارند كه بر قابلیت استفاده از رنگ ها برروی وب تاثیر می گذارند . برای مثال ، یك برداشت نادرست از اهمیت فرهنگی بعضی از رنگ ها ی خاص ممكن است تاثیری منفی در كاربر داشته باشد و یا برعكس .

وقتی از رنگ استفاده می شود ، طراحان سعی دارند تا اشیا را در یك حالت تعادل قرار دهند . استفاده زیاد از رنگ تحریك كنندگی و بی نظمی را به دنبال دارد ، در حالی كه استفاده كم از رنگ ها خسته كننده است . وقتی كه از رنگ استفاده می كنیم ، برای به وجود آوردن هماهنگی تقلا می كنیم . به عبارت دیگر از رنگ ها به روش خوشایندی استفاده می كنیم . البته ، با وجودی كه به نظر می رسد این كار یك مسئله كاملا سلیقه ای است ، تئوری رنگ مدت هاست كه نشان می دهد چگونه تركیبات به خصوصی از رنگ ها با یكدیگر خوب كار می كنند .

چند راهنمایی اساسی در مورد استفاده خوب از رنگ ها : 1) فقط از چند رنگ متفاوت بر روی یك صفحه استفاده كنید . 2) از مقدار زیادی از رنگ ها استفاده نكنید. 3) رنگ های سرد و گرم را با یكدیگر استفاده كنید .

می توانیم با چرخه رنگی كه در اینجا ارائه شده است با چند طرح رایج برای پیدا كردن تركیبات رنگی خوشایند مواجه شویم . آسانترین راه برای انجام این كار انتخاب رنگ های نزدیك به هم در چرخه است . كه با عنوان همتراز یا analogous خوانده می شود . رنگ هایی كه بر روی چرخه به طور مستقیم به صورت متضاد قرار گرفته اند نیز با یكدیگر خوب كار می كنند و به نظر مكمل هم می آیند . ادامه مطلب …

منظور از پیوند گرافیكی ساده در اینجا همون منو گرافیكی هست كه در اغلب وب سایت ها حتما دیدید . بعضی از اون ها قابلیت Rollover رو هم دارن و خلاصه اینكه از افكت های ویژه ایی برای تزیین پیوندها استفاده می كنند .

Rollover هم همون جور كه مطلع هستید یه مكانیزم برای نشان دادن اینكه چیزی فعال است ، می باشد و یك پیوند Rollover هم پیوندی است كه در بعضی مدها ، معمولا با یك رنگ یا تغییر شكل ، وقتی موس كاربر روی آن قرار می گیرد فعال می شود . فكر نكنم كسی تا به حال این جور پیوندی ندیده باشه . چون استفاده از اون ها تحت وب آن قدر رایجه كه به صورت كلیشه ای در آمدند .

این مكانیزم برای یه پیوند معمولی متنی خیلی ساده است و از توضیح اون خودداری می كنیم . در عوض در این تمرین ، این مكانیزم رو برای یك پیوند گرافیكی تشریح می كنیم . اما قبل از اون باید بگم كه پیوندهای گرافیكی یه چندتا عیب اساسی دارن ؟ اول اینكه وقتی بهینه می شوند ، می توانند روی زمان دریافت تاثیر بگذارند ، به خصوص وقتی كه همراه با Rollover باشند . دوم اینكه پیوندهای متنی در مقایسه با این مدل حجم و اندازه خیلی كمتری خواهند داشت . بنابراین من توصیه می كنم از این پیوندها خیلی كم استفاده بشه .

اما وقتی اصرار فردی كه دارین واسش وب طراحی می كنید ، در طراحی این چنین منوهایی ، بالای سرتون باشه مجبور هستید . اما باز هم راه حل هایی داره . من ترجیح می دم در این موارد به CSS متوسل بشم چون اون می تونه تا حدودی كار رو حل كنه . هر چند با جاوا اسكریت هم این كار عملیه . اما قابلیت های CSS در این مورد مخفی نیست . برای مقایسه ما هر دو صورت رو در این تمرین پیاده می كنیم .

اول با استفاده از جاوا اسكریپت . این كد جاوا اسكریپت نسبتا به سادگی نوشته می شود ، و در ابتدا فقط نیازمند تصاویری جهت بارگذاری است و پشتیبانی از شی JavaScript Image باید وجود داشته باشد . كد زیر این rollover پایه را نشان می دهد : ادامه مطلب …

در HTML قدیمی و حتی CSS اصلی ، انتخاب قلم بر روی وب بسیار محدود شده است . طراحان غالبا به قرار دادن متن درون فرم تصویری متوسل می شوند تا بتوانند یك قلم غیر استاندارد را در صفحه استفاده كنند . ولی این راه حل بهینه نیست . خوشبختانه ، فروشنده های عمده مرورگرها شروع به پشتیبانی از قلم های قابل دریافت یا به اصطلاح Downloadable Font از اینترنت كرده اند .

راه حل مایكروسافت Open Type نامیده می شود و از نگارش 4 در اینترنت اكسپلرر ساخته شده است . مرورگرهای نت اسكیپ 4.x از فناوری قلم معمولی به صورت بومی استفاده كردند . متاسفانه مرورگرهای اپرا ، 6.7 نت اسكیپ و موزیلا 1 قلم های قابل دریافت از اینترنت را در بر نمی گیرند ، بنابراین استفاده از قلم در پلت فرم های مختلف می تواند دشوار باشد .

فناوری مایكروسافت تنها روش معقول برای گذاشتن قلم ها در صفحه وب است . برای اضافه كردن یك قلم ، اول باید با استفاده از عنصر <font> یا قوانین شیوه نامه كه قلم هایی متعلق به شما را نصب می كند یك صفحه بسازید . وقتی صفحه تان را ساختید ، در مورد اینكه آیا كاربر نهایی قلم نصب شده دارد یا خیر نگران نباشید ، زیرا خودش از اینترنت دریافت خواهد شد .

سپس از Microsofts Web Embedding Font Tool (WEFT) كه در اینجا در دسترس است برای تحلیل كاربرد قلم بر روی صفحه استفاده كنید . این برنامه باید یك فایل .eot كه شامل قلم های جایگزین شده می باشد را ایجاد كند . سپس ، اطلاعات استفاده از قلم را به صفحه و به شكل قوانین CSS كه در CSS2 به طور اساسی تعریف شده اند اضافه كنید ، همان گونه كه در زیر نشان داده شده است : ادامه مطلب …

در ادامه مقاله قبل قصد داریم به بررسی ویژگی فرمت های دیگر تصاویر از جمله JPEG و PNG بپردازیم . فرمت JPEG :
قالب دیگر تصویر كه در وب متداول است JPEG است و پسوند فایل آن jpeg یا jpg می باشد . JPEG مخفف Joint Photographic Experts Group است كه نام انجمنی می باشد كه این اسم استاندارد را نوشته است . این قالب تصویر با اتلاف ( Lossy ) است كه جهت فشرده سازی تصاویر فتوگرافیی كه ممكن است شامل هزاران یا حتی میلیون ها رنگ یا سایه ی خاكستری باشند طراحی شده است .
به دلیل اینكه jpeg یك قالب تصویر با اتلاف است ، تعادلی بین كیفیت تصویر و اندازه ی فایل برقرار می شود . با وجود اینكه قالب jpeg تصاویر رنگی با كیفیت بالای 24 بیت را نسبت به GIF در فضای كوچكتر ذخیره می كنند ، ذخیره كردن دیسك های با ارزش در وب باعث حفظ فضای گران بهای دیسك و زمان بارگذاری كمتری خواهد شد . نمونه ایی از كیفیت در مقابل تعادل بین اندازه فایل در JPEG در اینجا نشان داده شده است . با كمی صرفنظر از كیفیت می توان به حجم بالاتری از دیسك دست یافت .
ممكن است كه قالب JPEG تصاویر عكسبرداری شده را به خوبی فشرده كند ، اما این كار برای خط كشی ها ، زمینه هایی با تصاویر رنگی ، یا متن ها مناسب نیست . در اینجا می توانید اندازه های دوفایل JPEG و GIF را باهم مقایسه كنید . اما انتخاب بین این دو خلی ساده است . عكس ها را با JPEG و شكل ها را با GIF نمایش دهید .
شواهدی وجود دارد كه نشان می دهد ، سازندگان صفحات ممكن است بخواهند یك عكس را به قالب GIF جهت استفاده از ویژگی های آن تغییر بدهند ، زیرا تصاویر jpeg از انیمیشن یا هیچگونه شفافیتی پشتیبانی نمی كنند . با وجود این تصاویر jpeg از یك ویژگی شبیه به عمل ظهور در تصویر به صورت بافتی در GIF در قالبی به نام JPEG پی رونده یا همان Progressive JPEG پشتیبانی می كنند . این مدل از وضوح تصویر در سطح پایین شروع به آشكار شدن می كند تا در سطح بالا ، و همچنین از مات و كدر بودن به طرف واضح بودن می رود . ادامه مطلب …