کوکيها به فايلهاي کوچکي گفته ميشد که توسط برنامهنويسان سايتها، براي مقاصد مختلفي مانند «ذخيره تنظيمات»، «ذخيره وضعيت احراز هويت» و ... کاربرد داشته و دارند.

يکي از محدوديتهاي کوکيها، «حجم» و فضاي آنها بود که معمولا محدود به 4 کيلوبايت بود. يکي ديگر از معايب آن اين است که هر کسي در مسير کاربر تا سرور باشد، ميتواند با شنود خط، وضعيت رفتارهاي کاربر را متوجه شود (چون کوکي در هر درخواستي، همراه header مربوط به request) ارسال ميشود.

نياز به ذخيره اطلاعات به صورت آفلاين در حجمي بيشتر بر روي کامپيوتر کاربر، موجب شده که طرحهاي مختلفي براي اين نياز ارائه شود. (ببينيد) که در بين اين راهکارها، امکاني به نام DOM storage يا Web Storage با استقبال بيشتري از سوي براوزرها روبرو بوده بطوري که هم اکنون بيش از 91 درصد براوزرها از اين امکان پشتيباني ميکنند. (ليست کامل براوزرهايي که اين امر را ساپورت ميکنند به همراه ورژن آنها)

اين قابليت جزو امکانات HTML5 دانسته ميشود در حالي که اينطور نيست و در IE8 نيز اين امکان وجود دارد. اين قابليت، به راحتي امکان دسترسي به مقادير بر حسب کليد را در فضايي که بيش از هزار برابر کوکيهاست، به شما ميدهد و همچنين عيب امنيتي کوکي (در خصوص شنود خط) را نيز ندارد.

اين فضا در مرورگر کروم 2.5 مگا کاراکتر و در بقيه 5 مگا کاراکتر است. توضيح آنکه در جاوا اسکريپت هر کاراکتر به صورت UTF-16 ذخيره ميشود لذا دو بايت فضا اشغال ميکند. از مهمترين مصارف اين فضا، بارگذاري محتويات استاتيک پرتکرار و پرکاربرد در يک سايت است.

ذکر اين نکته نيز بد نيست که اگر شما هنوز بر پشتيباني از IE6 ببعد اصرار داريد، ميتوانيد از پلاگين localStorage shim استفاده کنيد که با استفاده از قابليت UserData که از نسخه 5.5 اينترنت اکسپلورر وجود داشته، ويژگي DOM Storage را شبيهسازي کرده است.

در چند مقاله زير، علاوه بر توضيحاتي پيرامون اين ويژگي، نمونه کدهايي براي ذخيره و بازيابي (نوشتن و خواندن) با استفاده از DOM Storage مثال زده شده است:

Web storage

Comparing HTTP Cookies with DOM Storage

DOM Storage – The new super cookie you have dreamed of

The Past, Present & Future of Local Storage for Web Applications

Using DOM sessionStorage and localStorage to persist larger amounts of info

يک مثال آموزشي: تهيه يک دفترچه تلفن که اطلاعاتش به صورت آفلاين ذخيره ميشود

پلاگينهاي زيادي براي سادگي کار با DOM Storage و ساير روشهاي کش کردن ديتا بصورت آفلاين وجود دارد اما من پلاگين DSt به خاطر سادگي در ذخيره و بازيابي فرم ترجيح ميدهم.

يک لينک مفيد ديگر در اين رابطه: تست پشتيباني براوزر شما از storage ها و ظرفيت آن

[آپديت 6 شهريور 92] پلاگين محبوب و پرطرفدار store.js پلاگيني کوچک است که هم cross browser است و هم امکان ذخيره انواع دادهها را در ابرکوکي localStorage فراهم ميکند. توضيح آنکه به صورت پيشفرض فقط ميتوان به ازاء يک key يک value از نوع string تعريف کرد اما با کمک اين پلاگين شما ميتوانيد انواع متغيرهاي عددي و آرايهاي و ... را در localStorage ذخيره کنيد.

رنگها و طراحي وب

روانشناسي رنگها

هر رنگي تاثيرات روحي و رواني خاص خود را بر مخاطب دارد. مثلا طراحی وب سایت رنگ قرمز حرارت ايجاد ميکند و رنگ سبز حس مذهبي مخاطب را برانگيختهتر ميکند. (اين و اين مطلب را براي توضيح بيشتر ببينيد)

مطالعه روانشناسي رنگها و توجه به تاثير آن، نقش مهمي در موفقيت و کارايي يک طراحي سايت دارد. با استفاده از رنگ ميتوان اعتماد ايجاد کرد. آرامش القاء کرد و ...

آيا تاثير رنگها بر هر ملتي يکسان است؟

خير. هر رنگي بر هر قوميت و منطقه، ميتواند تاثير و معنايي متفاوت داشته باشد. مثلا در چين و ژاپن قرمز رنگ خوشبختي است برخلاف اغلب جاها که سفيد چنين جايگاهي دارد. براي همين لباس عروس در کشور آنها قرمز است و لباس عروس بقيه سفيد :)

لذا اينکه مخاطب شما در کدام کشور قرار دارد، نوع انتخاب رنگ مناسب براي سايت ميتواند متفاوت باشد.

همچنين کنتراست و شدت درخشندگي رنگها نيز مهم است و برخي مليتها (مثل عرب زبانان) طراحيهاي با کنتراست بالا را ترجيح ميدهند در حالي که بقيه کنتراست متوسط يا حتي پايينتر از متوسط را ترجيح ميدهند.

Color Meanings by Culture مطلبي است که در آن به معناي رنگهاي مختلف، در ملتهاي مختلف پرداخته و در انتهاي جدول مفيدي که ارائه کرده است، منابع و رفرنسهاي بيشتري نيز معرفي نموده است.

رنگهاي مناسب طراحي وب

با معيار RGB ما امکان تعريف 16,777,216 رنگ را داريم و اغلب نمايشگرهاي امروزي و LCD/LED هاي ما نيز توانايي نمايش اين 16 ميليون رنگ متفاوت را دارا هستند اما فقط 216 رنگ مناسب وب در نرم افزارهاي طراحي وب (فوتوشاپ و ...) ميبينيم:

رنگ هاي مناسب براي طراحي وب در نرم افزار فوتوشاپ photoshop

ليست رنگهاي مناسب براي طراحي وب که در نرم افزارهاي مختلف طراحي ديده ميشود

دليل اينکه از بين 16 ميليون رنگ اين رنگها انتخاب شد، وسايلي هستند که تنها 256 رنگ را ميتوانند نمايش دهند. در صورتي که شما از اين 256 رنگ استفاده کنيد، ميتوانيد مطمئن باشيد که نمايشگرهاي قديمي و همچنين نمايشگرهاي وسايل ارزان (مثل برخي موبايلها و وسايلي که تعداد محدودي رنگ را ميتوانند نمايش دهند) دقيقا سايت شما را به همان رنگي ميبينند که شما طراحي کردهايد.

البته ممکن است شما اين محدوديت را نپسنديد و بگوييد من ميخواهم حتما از 1D6F97 يا 00588C يا 93A93F استفاده کنم و نميخواهم محدود به آن 256 رنگ باشم که خب انتخاب با شماست و اين کار مزايايي مثل زيباتر بودن را براي سايت شما دارد اما همانطور که گفتيم، نميتوانيد اطمينان داشته باشيد که رنگبندي سايت شما در همه وسايل لزوما خوش ترکيب خواهد ماند هرچند شما ممکن است با توجه به شناختي که از مخاطبين يا آمار آنها داريد، رعايت اين مساله برايتان مهم نباشد.

انتخاب طرح رنگ (color scheme)

يک سايت فقط از يک رنگ تشکيل نشده است بلکه از يک مجموعه رنگ تشکيل شده است که اين مجموعه نيز بايد با هم تناسب و همخواني داشته باشند و اين تناسب و همخواني، امري نيست که توسط فرمولها قابل بيان باشد بلکه امري سليقهاي بوده و افرادي که طبع هنري و سليقههاي بهتري دارند، در اين زمينه انتخابهاي جالبتري خواهند داشت اما من که طبع هنري و سليقه ندارم، آيا راه يا ابزاري براي کمک به من وجود دارد؟

پاسخ مثبت است!

سايتهاي زيادي وجود دارند که به شما مجموعه رنگهاي مختلف را ارائه ميدهند و شما ميتوانيد حسب محبوبيت آنها و همچنين نزديک بودنش ترکيب رنگهايش به کار شما، يکي از آنها را انتخاب نماييد.

kuler که يکي از سرويسهاي شرکت گرافيکي معروف Adobe است، ميتواند ايده هاي بسيار خوبي در مورد ترکيب رنگهايي را که توسط کاربران پيشنهاد شده است، به شما معرفي کند.

سايت color scheme designer نيز يکي از بهترين سايتهايي است که در زمينه انتخاب طرح رنگ سايت به شما کمک زيادي ميتواند بکند.

سرويس image palette همانطور که از نامش پيداست، براي ساخت پلت رنگ با الهام از يک تصوير است. شما ممکن است از ترکيب رنگ موجود در يک تصوير خوشتان بيايد و بخواهيد يک تناسب رنگ سايتتان را بر اساس آن پياده کنيد. در اينصورت ميتوانيد تصوير مربوطه را در لينک فوق آپلود و پالت رنگ آن را تحويل بگيريد.

سايت Pictaculous و ColourGrab نيز سرويسي مشابه ارائه کرده است.

تناسب رنگ متن با رنگ پس زمينه

يک نکته ساده و بديهي که هر طراح وبي سعي ميکند آن را رعايت کند، تناسب کنتراست متن و بکگراند است تا متن به راحتي خوانده شود.

منتها گاهي ممکن است رنگ انتخابي طراح، رنگ مناسبي نباشد يا حواس طراح به يک تداخل رنگ نباشد. سرويس check my colours براي کمک به طراحان در همين زمينه ايجاد شده است.

گاهي طراحان وب، بجاي رنگ از تصوير به عنوان بکگراند استفاده ميکنند که امري طبيعي است اما يک اشتباه بزرگ اکثر طراحان، اين است که لود شدن تصوير بکگراند را حتمي ميانگارند! در حالي که ممکن است کاربري نمايش تصاوير را غيرفعال کرده باشد (بدليل سرعت پايين يا کاهش مصرف پهناي باند) يا به هر دليل ديگر تصوير براي وي لود نشود، خب در اين صورت اگر طراح وب براي خوانا شدن متن سفيدش، «تصوير» سياهي را در بکگراند آن قرار داده باشد اما بدليل لود نشدن آن تصوير، بکگراند سفيد آن نمايش داده شود، متن براي کاربر قابل خواندن نيست (متن سفيد روي زمينه سفيد!)

لذا طراحاني که براي المانهاي صفحه در CSS يک بکگراند تصويري قرار ميدهند، حتما رنگ پيشفرض را نيز تعريف کنند تا اگر تصوير لود نشد، مشکلي پيش نيايد:

background:#597 url(...);