تبليغاتX
ScriptSpot | کاملترین مرجع برنامه نویسی و کامپیوتر
S C R I P T  S P O T . b l o g f a . c o m صفحه نخست |   درباره ما |   پست الکترونیک  |  
بایگانی:  ماه: سال:

جستجو (توسط گوگل):
جایگاه شما:

Script Spot وبلاگی است برای به اشتراک گذاری منابع و تبادل نظر درباره برنامه نویسی، اینترنت و دیگر دانشهای کامپیوتری که توسط گروهی از دانشجویان رشته نرم افزار دانشگاه امام رضا مشهد گسترش داده میشود. این وبلاگ بر اساس گواهینامه Creative Commons به صورت as is و غیر انتفاعی ارائه میشود. مسئولیت هر مقاله بر عهده نویسنده آن است. نظرات و پیشنهادات شما اصلی ترین عامل جهت گیری ماست.
ScriptSpot RSS Feed
پذیرایی: (اشتراک در وبلاگ از طریق Feed)
اگر از خواندن این وبلاگ لذت می برید و قصد دارید بهتر و سریعتر در جریان به روز رسانی های آن قرار گیرید، کافیست با کلیک روی این آیکن با RSS Reader تان مشترک خوراک وبلاگ شوید .
ScriptSpot E-Mail NewsLetter
خبرنامه: (اشتراک در وبلاگ از طریق E-Mail)
اگر به feed علاقه ای ندارید، مشکلی نیست، با کلیک روی این آیکن یا وارد کدرن ایمیلتان در جعبه زیر، خیلی ساده، مشترک ایمیلی وبلاگ شوید!          
راهنمای طراحی رابط های کاربری فوق سریع تحت وب با تکنولوژی CSS Sprite
خشایار صباغزاده
نوشتار شماره: 110 / بازدید / نویسنده: خشایار صباغزاده پیوند پایدار  - 
دوشنبه 18 شهریور1387 ، ساعت 10:51 / دسته: HTML و طراحی سایت: مقالات آموزشی.  
مشترک RSS این وبلاگ شوید تا هیچ چیز را از دست ندهید.    /    این نوشتار را بوکمارک کنید:
شاید از CSS Sprite را شنیده باشید. آیا تا به حال از آن استفاده کرده اید ؟ شاید نامی که برای این تکنیک انتخاب شده مناسب نباشد. آیا تا به حال جلو های CSS rollover را دیده اید ؟  در این تکنیک معمولا دو وضعیت یک دکمه را داخل یک تصویر قرار می دهند و با استفاده از CSS زمانی که ماوس روی دکمه قرار می گیرد، تصویر پس زمینه رو جا به جا می کنند تا جلوه مورد نظر ساخته شود. CSS Sprite نیز در اصل توسعه یافته همین تکنیک هست. تفاوت این شیوه با CSS rollover در این است که در اینجا ما محدود به دو یا سه تصویر نیستیم و می توانیم تعداد بسیار زیادی از تصاویر را داخل یک تصویر جای دهیم.

چرا باید تصاویر را با هم ادغام کنیم ؟ اگر هر تصویر به طور مجزا دانلود شود ، سریعتر و بهتر نیست ؟

خیر، نیست. در طراحی های قدیمی ، طراحان، تصاویر بزرگ را slice می کردند و هر کدام را در پس زمینه یکی از خانه های یک table قرار می دادند تا load شدن صفحه سریعتر شود. ولی این شیوه فقط چشم را فریب می دهد و عملا تاثیری در زمان لود شدن صفحه ندارد. تنها این توهم ایجاد می شود که با استفاده از این شیوه ، صفحه سریعتر load می شود. در اصل در زمان لود شدن هر یک از این تصاویر یک HTTP-Request به server ارسال می شود و هر چقدر تعداد این درخواست ها بیشتر باشد، سرعت لود صفحه شما پایینتر می آید !!

به این تصویر دقت کنید. در این جدول در ستون سمت چپ زمان دانلود فایل HTML و در ستون سمت راست زمان دانلود باقی اجزای صفحه به شکل درصدی نمایش داده شده است:

به ادامه مطلب توجه کنید ...

www.p30download.com

ادامه مطلب »

روان شناسی رنگ ها در طراحی صفحات وب
ناصر تراب زاده
نوشتار شماره: 62 / بازدید / نویسنده: ناصر تراب زاده پیوند پایدار  - 
جمعه 1 شهریور1387 ، ساعت 17:0 / دسته: HTML و طراحی سایت: مقالات آموزشی.  
مشترک RSS این وبلاگ شوید تا هیچ چیز را از دست ندهید.    /    این نوشتار را بوکمارک کنید:
یکی از اصول بسیار مهم و کلیدی در طراحی صفحات وب ، توجه به اصل رنگ بندی صفحات و استفاده از رنگ های مکمل و ترکیبی مطلوبی است که کاربران بتوانند بر اساس اصل سهولت و جذابیت صفحه ، به مشاهده مطالب آن بپردازند. این که چه رنگی متناسب سایت های وب است ، پرسشی است که کارشناسان وب ، خیلی پاسخ جامع و کاملی برای ان ارایه نکرده اند و کم تر متخصصات طراحی وب به مسیله روان شناسی رنک ها در طراحی سایت ، توجه کرده اند.
اما به هر حال یک اصل کلی وجود دارد که می گوید : در رنگ بندی یک صفحه ، باید به این موضوع توجه شود که این رنگ قرار است در چه صفحه ای و با چه موضوعی به کار رود. یعنی اصل توجه به عملکرد و موضوعیت سایت ، در رنگ بندی مطالب مهم است . سایت های دولتی و به طور کل ، سایت هایی با بازدیدکننده بسیار بالا ، معمولا از رنک سفید برای زمینه صفحات و رنگ آبی برای لینک های صفحه و رنگ بنفش برای لینکهای مشاهده شده که به عنوان default برنامه فرانت پیج نیز به کار می رود ، استفاده می کنند.
سایت هایی که بیش تر جنبه شخصی دارند ، از رنگ های مکمل استفاده می کنند. مثلا رنگ سبز پر رنگ در کنار سرمه ای ، جذابیت خاصی به سایت هایی با موضوعیت بازرگانی می دهد . و یا در طراحی سایت های کودکان ، از رنگ های خیلی شاد استفاده می شود.
به هر حال توجه به کارکرد کد رنگ ها در طراحی صفحات وب از اهمیت مهمی برخوردار است . در ادام این مطلب ، فقط قصد یادآوری نوع روان شناسی هر رنگ درمخاطبان از دید روان شناسان داریم و فعلا در مورد این که چه نوع رنگی برای چه سایتی مناسب است ، صحبت نمی کنیم. اگر چه این توضیحات ، خود نیز بیان گر استنتاجات خوبی هستند که وب مسترها را در گرافیک سایت ، به خوبی هدایت می کند.
یک بهترین رنگ نداریم!
در مدیریت نوین یک اصل پذیرفته شده وجود دارد که یک بهترین شیوه مدیریت در کار وجود ندارد. ترکیب و هماهنگی و استقرار یک نظام در رنگ بندی صفحات وب نیز ، چنین رویکردی دارد. تجربه و نوع علاقه و هنر web designer هست که سایتی را برای ما جذاب و سایتی دیگر را next می کنیم. نکاتی که می بایست در زمان طراحی گرافیکی سایت در نظر داشته باشیم به شرح زیر هستند :

۱- اثر روان شناسی رنگ
۲- قابلیت خواندن متون صفحات سایت . مثل سایت : (www.irna.com)
۳- رنگ متمم رنگهای انتخابی برای بک گراند ، گرافیک ها ، لینک ها و متون ( مثل سایت http://www.HiGrade.ir)
۴- وجود تطبیق رنگی بین لوگوها و آرم های صفحات با رنگ بندی متون و مطالب به کار گرفته شده (مثل سایت http://www.karvarz.com)
۵- توجه به نوع مخاطب و بازدیدکننده بخش های مختلف سایت . سایتی مانند یاهو ، که روزانه میلیون ها مخاطب دارد و از صدها بخش متنوع تشکیل شده است ، برای هر بخش خود از یک چیدمان و رنگ بندی خاصی در طراحی صفحات اکتیو ، استفاده کرده است . مثلا بخش کودکان یاهو با بخش بازرگانی ان بسیار تفاوت دارد
۵ اصل مهم
لیست زیر مشخصه هایی از رنگ ها را که هنگام طراحی باید مدنظر داشته باشید بیان میکند:
۱- رنگ ها اثر زیادی روی احساسات ما در ۹۰ ثانیه اول دیدن میگذارند .
۲- اثر رنگ میتواند بیننده را ترغیب به خرید یک جنس از شما کند.
۳- رنگ ها رفتار ما را در برابر یک موضوع فقط تشدید نمیکنند ، بلکه اثر خود را کاملا در رفتار ما نشان میدهند .
۴- اثر گذاری رنگ در فرهنگ های مختلف گوناگون است !
۵- هر رنگ به تنهایی یک پیام مخصوص به چشم بیننده میفرستد .به قول مک لوهان ، رسانه همان پیام است !
روان شناسی رنگ ها
به طور کل ، رنگ ها دارای خصیصه های خاصی هستند که در زیر به بخشی از این مولفه های موجود در رنگ ها اشاره شده است :

• سفید : اشاره دارد به صداقت ، پاکیزگی ، صمیمیت ، ملایمت و معاصر بود ن چیزی . سفید بهترین رنگ برای بک گراند های وب است . در تجارت سفید رنگ خستگی گیر و انرژی بخش است .

• سیاه : اشاره دارد به ظرافت ، قدرت ، دلیری ، شهامت ، فریبندگی ، شیطان ، مهارت و باستان . مشکی برای رنگ متن روی یک پس زمینه روشن ایده آل است. این رنگ بعنوان رنگ پس زمینه چشم را خسته میکند .

• قرمز : توانایی ، هیجان ، احساسات شدید ، سرعت ، خطر و تهاجم . این رنگ از بیننده توجه به خود را طلب میکند . در تجارت بمعنی وام و بدهی است . این رنگ شدید ترین رنگ احساس است و ضربان قلب و تنفس را تسریع میکند .

• آبی : امنیت ، اعتماد ، مسیولیت پذیری ، سرما ، ایمان ، وفاداری ، وابستگی وجاه و جلال . آبی دومین رنگ عوام پسند است . در تجارت بمعنای ضمانت مالی است .

• سبز : تندرستی ، فراوانی ، حاصلخیزی ، آزادی ، شفا و بهبودی ، طبیعت ، پیشرفت ، حسادت و خونسردی . در تجارت بیانگر مقام و ثروت است. این رنگ در چشم ها راحت تر از همه دیده میشود .

• قهوه ای : تاثیر گذاری ، متانت ، توانگری مالی و کمک کننده بودن . قهوه ای رنگ کره خاکی ماست و در طبیعت بسیار فراوان است .

• خاکستری : صمیمیت زیاد ، اعتبار و نفوذ و عملی بودن . در تجارت بمعنای سنت گرایی است .

• صورتی : ملایمت ، شیرینی ، ظرافت و زنانگی ، خوب بودن ، بی گناهی و پرورش کودک .

• بنفش : وقار ، معنویت ، شاهانه بودن ، عیش و نعمت ، دارایی ، اعتبار و نفوذ ، سوگواری و مهارت . در تجارت بزرگ نشان دادن است . بنفش طرفداری از سبک های هنرمندانه است.

• نارنجی : سرزندگی و شوخی ، لذت و خوشگذرانی ، تعادل گرمایی ، تشویق کردن ، چالاکی و نیرو ، تحمل و بلند همتی .

• زرد : نور خورشید ، گرمی ، خوشی ، نامردی ، ترسویی و حسادت . در تجارت درخواست از نوع روشنفکرانه است و برای تاکید نیز خوب است . زرد باعث افزایش تمرکز شده ، سوخت و ساز را زیاد میکند و سخت ترین رنگ برای چشم هاست .

• طلایی : نشانگر گران بودن و پرستیژ است .

• نقره ای : سرما ، علمی بودن و اعتبار و پرستیژ است .

پس وقتی میخواهید رنگی انتخاب کنید باید درباره بازار نهایی کار خود باندیشید . چه احساساتی را میخواهید برانگیخته کنید ؟ اول کمی درباره چشم انداز احساسی هدفتان فکر کنید و نیز پیامی که از راه دید میخواهید منتقل کنید .
بعد رنگ خود را انتخاب کنید ! توجه داشته باشید که گرافیک صفحات وب ، امروزه نقش زیادی را در ارایه دکترین رفتار سازمانی الکترونیکی مراکز رسانه ای غرب به مخاطبان در اختیار دارند و LOGO ، BANNER ، TIZER ها ، فوق العاده در تحکیم مفاهیم به مخاطبان وبی موثر هستند.

باز انتشاری بود از: www.bedanid.com 

نحوه ی استفاده از رنگها در HTML + جدول کد رنگها
ناصر تراب زاده
نوشتار شماره: 11 / بازدید / نویسنده: ناصر تراب زاده پیوند پایدار  - 
جمعه 23 فروردین1387 ، ساعت 20:2 / دسته: HTML و طراحی سایت: مقالات آموزشی.  
مشترک RSS این وبلاگ شوید تا هیچ چیز را از دست ندهید.    /    این نوشتار را بوکمارک کنید:
نحوه ی کدگذاری رنگ ها در HTML:
همانطور که میدانید رنگهای پیرامون ما از ترکیب سه رنگ اصلی زرد، آبی و قرمز تشکیل میشوند اما در زبان HTML رنگها بر اساس ترکیب سه منبع نوری قرمز(Red)، سبز(Green) و آبی(Blue) کدگذاری میشوند و هر منبع نوری میتواند شدتی بین 0 تا 255 را داشته باشد. در این استاندارد نور سفید رنگی است حاصل از تداخل سه منبع نوری با شدت کامل یعنی 255 و رنگ سیاه حاصل تداخل سه نور با شدت 0 خواهد بود.(در واقع هر نقطه رنگی يا پیکسل بر روی صفحه مانیتور حاصل برخورد سه اشعه نوری قرمز، سبز و آبی ساخته شده توسط تفنگ الکترونی لامپ تصویر در مانیتورهای CRT ویا زاویه ی چرخش کریستالهای مایع در مانیتورهای LCD میباشد.) بنابر این واضح است که تمامی رنگهای طیف خاکستری باید مقدارهای برابری برای هر منبع RGB داشته باشند، که تیرگی آن با افزایش این مقدار مشترک افزایش میابد.

توجه داشته باشید که مطابق تعریف ذکر شده امکان استفاده از 256×256×256 یا حدود 16 میلیون (16,777,216) رنگ مختلف وجود داشته و در شناسه های مختلف به یکی از سه روش زیر قادر به تعیین رنگ متن یا ناحیه ای خواهید بود:

  1. استفاده از مقادیر شدت نور در مبنای 16 با فرمت #RRGGBB که RR، GG, BB مقادیر مبنای شانزده نورهای قرمز، سبز و آبی میباشند.
  2. استفاده از مقادیر شدت نور در مبنای 10 با فرمت rgb(RRR,GGG,BBB) که RRR، GGG, BBB مقادیر مبنای ده نورهای قرمز، سبز و آبی میباشند.
  3. استفاده از نامهای استاندارد رنگها مانند red ، green و ... که چند تایی از این نامها را در جدول زیر میبینید:

جدول نام کد رنگهای ترکیبی در مبنای ده و شانزده:
Colorمبنای 16 (Color HEX) مبنای 10 (Color RGB) نام رنگ
  #000000rgb(0,0,0)Black
  #FF0000rgb(255,0,0)Red
  #00FF00rgb(0,255,0)Lime
  #0000FFrgb(0,0,255)Blue
  #FFFF00rgb(255,255,0)Yellow
  #00FFFFrgb(0,255,255)Cyan
  #FF00FFrgb(255,0,255)Fuchsia
  #FFFFFFrgb(255,255,255)White
  #C0C0C0rgb(192,192,192)Silver


صفحه را چطور رنگ کنیم؟
برخی تگهای HTML صفت color را میشناسند که میتواند برابر با هر کد رنگی باشد. همچنین امکان تعریف خصوصیات رنگی المانها با استفاده از فایلهای stylesheet و یا تگ

Test Text!
تعیین رنگ نوشته المان body در Style sheet ها: body{ color: #444400; } تعیین رنگ زمینه صفحه در Style sheet ها: body{ background-color:#FFFFFF; }

این کدها را از کجا بیاوریم؟
هر چند ابزارهای اختصاصی زیادی برای انتخاب رنگ و دریافت کد وجود دارند اما شاید هنوز هم ساده ترین راه برای دسترسی به کد رنگهای مورد نیازتان، استفاده از ابزار ColorPicker فوتوشاپ باشد. ColorPicker با کلیک کردن روی جعبه ی رنگ پیش زمینه یا پس زمینه در photoshop فعال میشود و با این ابزار به سادگی میتوانید رنگ مورد نظرتان را ازطیف گسترده ی رنگ ها با یک کلیک انتخاب کرده و کد hex آن را کپی کرده و با افزودن # به ابتدای کد از آن استفاده کنید. ( تصویر زیر )

همچنین در ادامه ی این نوشتار و به منظور کامل شدن بحث، جدولی از رنگهای رایج اینترنت و کدهای آنها را میبینید، که سعی کرده ایم تمامی رنگها را پوشش دهیم ام با این وجود برای استفاده از دیگر رنگها باز هم به Photoshop نیاز دارید.


جدول راهنمای رنگها رایج در اینترنت و کد آنها
#EEEEEE #DDDDDD #CCCCCC #BBBBBB #AAAAAA #999999
#888888 #777777 #666666 #555555 #444444 #333333
#000000 #000033 #000066 #000099 #0000CC #0000FF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#CC6600 #CC6633 #CC6666 #CC3399 #CC66CC #CC66FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

لیست کامل مقاله های ارائه شده در ScriptSpot از ابتدا تا امروز
صفحه نخست | درباره ما | بایگانی نوشتارها | پست الکترونیک | RSS |

طراحی شده توسط ناصر تراب زاده و قدرت گرفته با افتخار از بلاگفا. بهترین حالت نمایش : 1024 × 768 (یا بالاتر)
هرگونه کپی برداری یا نقل قول از این وبلاگ تنها با ذکر منبع و درج لینک مستقیم مقاله مجاز است.
برخی از حقوق محفوظ است. برای اطلاعات بیشتر قوانین سایت را بخوانید.
Designed by: Nasser Torabzade. Powered by: Blogfa.
CopyRight © 2008 by : Script Spot™ - Some Rights Reserved. (Terms of Use)
'); ');