طراحی وب سایت سپید

افزایش سرعت تولید نرم افزارهای تحت وب ASP.NET

Sat, 11 Feb 2012 15:29:00 +1700

بسیاری از اوقات نرم افزارهای تحت وب asp.net مجموعه ای از پروژه های web application هستند که تنها یکی از آنها web application نهایی است که همه ی کدهای نهایی پروژه ها را در خود دارد. گاهی تغییرات کوچکی در کد باعث ریست کل application و کامپایل مجدد کد و در نتیجه مدت زمان بسیار طولانی انتظار برای تغییرات کوچک اعمال شده می شود.

اما با تنظیمات بسیار ساده نرم افزاری می توان سرعت تولید نرم افزار را افزایش داد و زمان انتظار را بسیار کم کرد.

در کل در سه زمینه امکان بهبود سرعت را داریم:

زمان کامپایل
اولین زمان اجرای نرم افزار تحت وب
کارایی نرم افزار / سرعت دسترسی به پایگاه داده

چیزی که در این مقاله برای ما اهمیت دارد موارد 1 و 2 هستند تا بتوانیم سرعت تولید نرم افزار را بالا ببریم.

برای مورد سوم می توانیم از نرم افزارهای پر قدرتی نظیر dotTrace استفاده کنیم که به خوبی ما را در پیدا کردن گلوگاه های نرم افزار و رفع آنها کمک می کنند.

قرار دادن فایل های موقت IIS در یک Ramdisk

بسته به حجم نرم افزار تحت وب و نیز میزان حجم Ramای که دستگاه شما دارد، ممکن است استفاده از RAM disk برای نگهداری فایل های موقت IIS باعث افزایش باور نکردنی سرعت اجرای نرم افزار تحت وب گردد.

همانطور که از نام Ramdisk نیز مشخص است این نرم افزارها بخشی از حافظه Ram را در اختیار می گیرند و با آن مانند یک disk معمولی رفتار می کنند و بدین ترتیب با معرفی آدرس یک ramdisk به IIS برای نگهداری داده های موقت، تمامی این داده ها در RAM نگهداری خواهند شد و سرعت نوشتن و خواندن آنها به خوبی بهبود پیدا خواهد کرد.

با تغییر تنظیمات زیر در فایل web.config می توانیم آدرسی که می خواهیم فایل های موقت در آن قرار گیرند را مشخص کنیم. به فرض q: آدرس Ramdisk ما است.

در صورتی که بخواهیم همه ی پروژه های تحت وب در سیستم از این Ramdisk استفاده کنند، می توانیم فایل web.config کل سیستم را تغییر دهیم. برحسب اینکه از نگارش 4 یا قبل از آن استفاده می کنید، و نیز برحسب اینکه از سیستم 32 بیتی یا 64 بیتی استفاده می کنید باید یکی از این فایل های web.config را تغییر دهید:

   1:  C:\Windows\Microsoft.NET\Framework\v2.0.50727\CONFIG\Web.config

   2:  C:\Windows\Microsoft.NET\Framework\v4.0.30319\Config\Web.config

   3:  C:\Windows\Microsoft.NET\Framework64\v2.0.50727\CONFIG\Web.config

   4:  C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Config\Web.config

تغییر یکی دو تنظیم مربوط به compilation در web.config

زمانی که یک سایت ASP.NET برای اولین بار فراخوانی می شود، تمامی صفحات و user controlها برای اولین بار کامپایل می شوند. زمانی که این کامپایل انجام شد، از آن به بعد نرم افزار همیشه سریعتر اجرا می شود. این موضوع وقتی سایت در محیط نهایی قرار گرفت فوق العاده است. اما وقتی هنوز در حال تولید و توسعه نرم افزار هستیم باعث اتلاف وقت زیادی می شود. چون وقتی در حال برنامه نویسی هستیم معمولا فقط یکی دو صفحه، یا چند خط کد تغییر می کنند. پس معمولا فرایند به صورت تغییر چند خط کد، کامپایل، فراخوانی سایت، تست و مجددا تغییر کد برای چندین بار در روز ادامه پیدا می کند. در چنین شرایطی وقتی کامپایل و اجرا دو دقیقه طول بکشد علاوه بر اینکه باعث اتلاف وقت می شود، باعث عدم تمرکز برنامه نویس می شود و معمولا نمی تواند به خوبی به کار خود برسد.

تنظیمات زیر وقتی در حال توسعه نرم افزار هستید باعث می شود اولین اجرای نرم افزار بسیار بسیار سریعتر اتفاق بیفتد و زمان اجرای اولیه را بسیار کاهش می دهد.

همچنین در صورتی که پروژه های شما در .NET 4 نوشته می شوند، می توانید از تنظیمات زیر نیز برای کاهش سرعت کامپایل و استفاده از بهینه سازی هایی برای جلوگیری از کامپایل مجدد استفاده کنید.

<compilation ... optimizeCompilations="true"> ... </compilation>

البته لازم به ذکر است که ممکن است در شرایط خاصی کد دوم به درستی تشخیص ندهد و بعضی کدهایی که نیاز به کامپایل مجدد دارند را کامپایل نکند که در این شرایط و نیز یک بار قبل از نصب نرم افزار نهایی می توانید این تنظیمات را حذف کرده و یک بار کامپایل کامل انجام دهید.

مطمئنا توسعه نرم افزارهای تحت وب پس از این تغییرات بسیار دلپذیرتر می شود.

کامپایل کردن تنها پروژه هایی که تغییر کرده اند

معمولا پس از تعیین dependency tree همه ی پروژه ها بدون توجه به اینکه آیا تغییری در آنها ایجاد شده است یا خیر build می شوند. در چنین شرایطی می توان با مراجعه به منوی build وانتخاب configuration manager زیر build، فقط مواردی که می خواهیم build شوند را علامت بزنیم و علامت باقی موارد را برداریم. همچنین می توانیم برحسب شرایط مختلف configurationهای مختلفی را ایجاد و تعیین کنیم.

دامنه های فارسی

Mon, 31 Jan 2011 17:00:00 +1700

نام های دامنه ای که در آنها از حروفی به غیر از حروف ASCII (حروف معمول انگلیسی) استفاده شده باشد نام های دامنه بین المللی یا به اصطلاح IDN هستند.

از آنجا که برای پیاده سازی حمایت از نام های دامنه بین المللی از جمله نام های دامنه فارسی نیاز به تغییر بسیاری از ساختارها وجود داشت، تصمیم بر این گرفته شد که استانداری برای تبدیل نام های دامنه فارسی به یک معادل ASCII وجود

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

کند. به عنوان مثال وقتی در یک مرورگر مدرن که از این ویژگی پشتیبانی می کند این دامنه را وارد کنید:

طراحیسایت.ایران.ir

مرورگر شما در پس زمینه این نام دامنه را به معادل ASCII آن یعنی xn--mgbajksoy90jca.xn--mgba3a4f16a.ir تبدیل می کند و از آن پس درخواست ها را به این نام دامنه ارسال می کند.

به این معادل ASCII نام دامنه، در اصطلاح punycode گفته می شود.

البته همه ی مرورگر ها از این ویژگی پشتیبانی نمی کنند، مثلا مرورگر اینترنت اکسپلورر 6 (IE6) از این ویژگی پشتیبانی نمی کند و تنها مرورگرهای مدرن از آن پشتیبانی می کنند.

امکان ثبت دامنه های بین المللی برای پسوندهای دامنه مختلفی وجود دارد. از جمله دامنه های .com و .net و دیگر دامنه ها. برای ثبت یک دامنه فارسی تحت نام .net و یا .com کافی است معادل punycode

آن را بیابید و سپس با ثبت آن دامنه فارسی را در اختیار داشته باشید. برای بدست آوردن معادل punycode دامنه های فارسی می توانید از سایت تبدیل دامنه های بین المللی به punycode استفاده نمایید.

اما برای داشتن یک دامنه کاملا فارسی باید به سایت ثبت دامنه های ایرانی مراجعه نمایید.

البته تا به حال ثبت دامنه های کاملا فارسی با پسوند .ایران با یک پسوند اضافه .ir ثبت می شد. اما با موافقت مرکز بین المللی ثبت دامنه ها ICANN و به رسمیت شناختن دامنه .ایران به زودی امکان ثبت دامنه های کاملا فارسی محقق می شود.

(امکان ثبت دامنه های فارسی موقتا تا پیاده سازی کامل غیر فعال است)

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

البته این مشکل با استفاده از یک معادل انگلیسی برای سایت تا حدودی قابل حل است. مثلا می توان برای یک دامنه فارسی طراحیسایت.ایران.ir یک معادل انگلیسی sepidweb.ir هم معین کرد که هر دو به یک سایت اشاره می کنند.

مشکل دیگر چپ به راست بودن پیش فرض نوار آدرس است و همچنین این موضوع که بسیاری از پوشه ها و صفحات سایت انگلیسی هستند و ترکیب عبارات فارسی و انگلیسی شکل خوانایی نخواهد داشت.

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

رفع خطای سریال نامعتبر در Photoshop CS5

Sat, 19 Jun 2010 05:09:00 +1700

Photoshop CS5 دارای قابلیتی است که در صورتی که هنگام کار با آن به اینترنت متصل هستید، شماره سریال وارد شده را بررسی می کند و در صورتی که غیر معتبر باشد در هنگام ورود مجدد از شما شماره سریال جدید می خواهد.
اما برای خلاصی از آن راه حل ساده ای وجود دارد!
دسترسی photoshop به اینترنت را ممنوع کنید!

اگر هنوز photoshop را نصب نکرده اید می توانید از شماره سریال های زیر استفاده کنید:
2313-4367-9577-2338
2345-4354-9565-2348
2642-4624-9262-2648
2313-4367-9577-2338
2642-4624-9262-2648
2534-4544-9235-2373

در ادامه برای ممنوعیت دسترسی photoshop به اینترنت در windows 7 مسیر زیر را دنبال کنید:
control panel -> windows firewall -> advanced settings
سپس مطابق تصویر زیر از سمت چپ Outbound Rules

را انتخاب نمایید و از سپس از سمت راست New Rule را انتخاب کنید

در پنجره بعد مطابق تصویر زیر program را انتخاب نمایید و next را بزنید

در پنجره بعد This program path را انتخاب نموده و مسیری که در آن photoshop نصب شده است را وارد کنید. به طور پیش فرض photoshop در مسیری که در تصویر زیر نشان داده شده است نصب می شود

در پنجره بعد Block the connection را انتخاب نمایید

در مرحله بعد همه ی موارد را علامت بزنید

و در پنجره بعد نام و توضیحات مناسبی را وارد نمایید. می توانید از توضیحاتی که من برای خود انتخاب کرده ام و در تصویر زیر وجود دارد استفاده کنید.

finish را بزنید و تمام!
دیگر photoshop پیغام ورود شماره سریال جدید را نمی دهد.

گزارش سایت های اسپم به گوگل

Mon, 17 May 2010 01:16:00 +1700

احتمالا شما هم گهگاه به سايت هايي نظير http://agahibank.com و http://www.biyaaziz.net و نظایر آنها که با جمع کردن جستجو هاي کاربران سعي در کسب page rank بالاتري دارند برخورد کرده ايد.
اشکال کار اين است که کاربر معمولا به جواب درستي نمي رسد و فقط در بين چند سايت که ليست نتايج جستجو را قرار داده اند مي چرخد. تعداد چنين سايت هايي براي زبان فارسي اخيرا زياد شده است و گاهي اوقات براي بعضي نتايج جستجو چند نتيجه اول فقط به اين سايت ها اختصاص دارد.
در صورتي که شما هم علاقمند هستيد نتايج فارسي درستي دريافت کنيد مي توانيد با گزارش این سایت ها به گوگل و اعلام آنها به عنوان سايت هاي doorway آنها را از لیست نتایج گوگل حذف نمایید.
درخواست رسمی گوگل برای اعلام سایت های فارسی

آیا Internet Explorer با IE9 باز می گردد؟

Fri, 30 Apr 2010 19:22:00 +1700

بین همه ی طراحان وب یک چیز مشترک وجود دارد، نفرت از Internet Explorer!

مایکروسافت مدت هاست که طراحان وب را از مرورگر خود مأیوس کرده است. در طی دورانی که با وب کار می کنم شاهد ظهور نگارش های بعد از IE6 بودم. امیدوار بودم که شاید مشکلات موجود در IE6 دیگر در IE7 وجود نداشته باشد. اما اصلا اینطور نبود. نه تنها تعداد مشکلات رفع شده قابل توجه نبود، بلکه به مشکلات طراحان یکی دیگر هم اضافه شده بود! اینکه سایت های قدیمی و جدید را با IE7 هم سازگار کنیم. فراموش نکرده ام که وقتی دنبال نسخه ای از clearfix hack می گشتم که با IE7 هم کار کند، چقدر دوست داشتم تا دیگر در هیچ کامپیوتری IE نصب نباشد. مدت ها همه ی طراحان وب آمار کاربران وب را دنبال می کردند تا بدانند چقدر از افرادی که از IE استفاده می کنند کم می شود و هر چه به کاربران Firefox اضافه می شد مسلما ما هم خوشحال تر بودیم.

IE8 اگرچه مرورگر بدی نیست، اما به نظر تنها تقلیدی ناقص از مرورگرهای دیگر است و همچنان ما از ترس آن که مبادا در نگارش بعدی Internet Explorer وضع بدتر شود، کاربران را به استفاده از Firefox ترغیب می کنیم.

اما گویا Microsoft قصد دارد به این وضع خاتمه دهد. من هم وقتی به IE9 Test Drive مراجعه کردم از دیدن قابلیت های جدید IE9 تعجب کردم. برخلاف گذشته که رفتارهای Microsoft تنها در جهت مخالف استاندارد سازی بوده است و قصد ایجاد بازار جداگانه برای خود داشت، اما به نظر می رسد که حالا قصد پشتیبانی صحیح و مناسب از استانداردها را دارد. و البته به همین هم اکتفا نکرده است و به سراغ ویژگی های دیگری رفته است که می تواند یک مرورگر وب را از دیگر رقبا ممتاز کند.

استفاده از GPU برای بهینه سازی سرعت بارگزاری صفحات و تصاویر و نیز قرار دادن امکانات بسیار در خود IE که در Firefox مشابه آنها را از طریق Addonها داشتیم و به آنها وابسته شده ایم.

توصیه می کنم مطالب IEBlog را دنبال کنید. واقعا مطالب نوشته شده در آن جالب است. حداقل من که به شخصه بعد از دیدن بعضی از این موارد دید منفی ام نسبت به IE از بین رفت و مشتاقانه منتظر دیدن IE9 نهایی هستم. آیا ممکن است IE جایگاه خود را دوباره پیدا کند و آیا ممکن است ما هم به عنوان حرفه ای های وب با وجود Firefox از Internet Explorer استفاده کنیم؟ علاوه بر جالب بودن ویژگی های جدید IE9، این تصور که مناسب ترین مرورگر همانی باشد که از ابتدا بر روی سیستم کاربر نصب شده است، واقعا آرامش بخش است! البته به نظر می رسد حداقل باید چند سالی منتظر باشیم تا windows xp منسوخ شود. چون IE9 در XP نصب نمی شود.

برای تست سایت های خود می توانید Internet explorer platform preview را دریافت کنید و اگر اشکالی مشاهده کردید از طریق Provide Feedback آنها را گزارش دهید.

لطفا نظرات خود را در مورد این نوشته بیان کنید. متشکرم.

مزایا و معایب ASP.NET MVC

Fri, 16 Apr 2010 17:29:00 +1700

با وجود اینکه مدت زمان زیادی از پیاده سازی های MVC Design Pattern برای Web در زبان های مختلف نظیر جاوا می گذرد، اما مدت زمان چندانی نیست که Microsoft پیاده سازی خود را تحت نام ASP.NET MVC عرضه کرده است.

بد نیست در مورد مزایا و معایب MVC بیشتر بدانیم.

ASP.NET Web Forms چیست؟

ASP.NET Web Forms در تلاش برای فراهم کردن بستری مشابه برنامه نویسی ویندوز (و البته راحتی به برنامه نویسی در VB) ایجاد شد که در آن برنامه نویس نیازی نیست تا خود را درگیر جزئیات وب نماید. در ASP.NET Web Forms برنامه نویس از eventها استفاده می کند، بدون اینکه در وب event ای وجود داشته باشد. در برنامه نویسی برای ASP.NET Web Forms برنامه نویس به session و viewstate دسترسی دارد، با وجودی که web در طبیعت خود session-state ندارد.
کار کردن با ASP.NET Web Forms فوق العاده است. اما مشکلاتی نیز دارد که برای رفع بعضی از آنها می توان از مدل های دیگر برنامه نویسی نظیر MVC for Web استفاده کرد.

MVC چیست؟

قصد تشریح کامل MVC را ندارم. تنها مختصری در مورد آن. MVC مخفف Model-View-Controller است. model مسئول نگهداری وضعیت (state) با نگهداری داده ها و به هنگام سازی آنها در پایگاه داده است.
controller مسئول انتخاب یک نمایش خاص، براساس وضعیت است، و view نمایش خاص داده ها است که توسط controller انتخاب می شود.

برخلاف ASP.Net Web Forms که در آن View و Controller در یک صفحه قرار دارند (aspx معادل view است و aspx.cs معادل controller) در ASP.NET MVC این دو به دو جزء مجزا تقسیم می شوند، View و Controller که بر روی یک Model از داده ها کار می کنند.

شاید بتوان گفت یک سایت را می توان با استفاده از ASP.NET Web Forms به گونه ای توسعه داد که مطابق با MVC Pattern طراحی شده باشد. اما استفاده از ASP.NET MVC برنامه نویسان را تا حد بسیار زیادی مجبور می کند تا MVC را پیاده سازی کنند.

مزایای ASP.NET MVC و معایب Web Forms

با توجه به ساختار MVC برنامه نویسان بیشتر مجبور خواهند شد تا کد خوانا تولید کنند. زیرا به طور طبیعی در ASP.NET MVC هر بخش باید کاری که بر عهده آن است انجام دهد و حداقل اطلاع از کاری که بخش های دیگر مسئول آن هستند داشته باشد. اما در Web Forms با ساختار Code-Behind در صفحات، Controller و View ترکیب شده اند.
Unit Testing در صورت استفاده از ASP.NET MVC فوق العاده آسان تر است. بیشتر بخوانید
در Web Forms صفحات در بین ارسال ها وضعیت خود را حفظ می کردند. کارها کمی آسانتر می شد، اما اینکه ارتباط client و server حقیقتا چگونه اتفاق می افتد مخفی بود. با حذف viewstate و postback توسعه وب برای متخصصان وب آسان تر خواهد بود و کنترل بیشتری بر ارتباط client و server وجود دارد. زیرا مطابق با طبیعت وب طراحی شده است.
با حذف viewstate و postback خروجی HTML بسیار خواناتر خواهد بود و کد HTML فارغ از کدهای اضافه مربوط به viewstate خواهد بود.
تقریبا بر روی کد HTML تولید شده کنترل کامل خواهیم داشت که در ASP.NET Web Forms ممکن نیست.
استفاده از javascript/ajax/jquery/asp.net ajax بسیار آسانتر خواهد بود. زیرا دیگر کدهای کنترل ها تغییر نخواهد کرد و دیگر چیزی شبیه به ctl501_panelContainer_GridView1 نخواهیم داشت.
SEO و بهینه سازی آدرس ها برای سایت های جستجو آسانتر خواهد بود. در Web Forms نیازمند این بودیم که آدرس های اینترنتی rewrite شوند، اما در ASP.NET MVC به این کار نیازی نخواهد بود
با کنترل کامل بر کد HTML تولید شده، امکان SEO بر اساس کد HTML نیز خواهیم داشت.
با جدا شدن view از controller طراحی صفحات وب استاندارد و زیبا دیگر پیچیده نیست و طراح وب می تواند بدون توجه به کار برنامه نویس viewها را آنگونه که می خواهد ایجاد کند و برنامه نویس آنگاه viewها را به کار خواهد گرفت و دیگر کار آنها با هم تداخل نخواهد کرد.
برای agile development فوق العاده است. زیرا در هر زمان باید یک قسمت کامل از نرم افزار ایجاد شود.
ASP.NET MVC به علت حذف لایه بندی های اضافی در معماری، فوق العاده سریعتر اجرا می شود.
آدرس های اینترنتی (urlها) RESTful هستند
در ASP.NET MVC امکان استفاده از ویژگی های کنونی ASP.NET وجود دارد. ویژگی هایی نظیر forms/windows authentication, URL authorization, membership/roles, output and data caching, session/profile state management, health monitoring, configuration systme, the provider architecture.
ویژگی های بسیاری در MVC Frameworkهای مشابه نظیر struts 2 وجود دارد که اگر توسط Microsoft پیاده سازی شود امکان کدنویسی برای سایت های پیچیده با حداقل کد امکان پذیر خواهد بود. ویژگی هایی نظیر انتقال خودکار داده ها، تبدیل خودکار انواع داده، تعیین صحت داده ها و موارد دیگر.
ASP.NET Web Forms سعی می کند تا پیچیدگی های HTML را از برنامه نویس دور کند. اما اگر طراح قصد داشته باشد ظاهر کنترل ها را تغییر دهد، مخصوصا اینکه از روش های مرسوم Web 2.0 برای طراحی ظاهر صفحات استفاده کند، گاهی به پیچیدگی های بیشتری برخورد خواهد کرد.
امکان تبدیل سایت های ساخته شده با استفاده از asp 3.0 به ASP.NET MVC راحت است.

مزایای Web Forms و معایب ASP.NET MVC

RAD! (توسعه سریع نرم افزار). با استفاده از ASP.NET MVC همه ی لایه ها باید ساخته شوند تا بتوانیم اجرای نرم افزار را ببینیم. اما توسعه برنامه ها در ASP.NET Web Forms سریعتر است. در ASP.NET Web Forms می توانیم کنترل ها را بر روی فرم بکشیم و بعد فرم قابل استفاده است. ASP.NET Web Forms را می توانیم Visual Basic در وب نام نهیم.
ASP.NET Web Forms در نرم افزارهای زیادی به کار گرفته شده است و اشکالات زیادی از آن رفع شده است، برنامه نویسان زیادی با آن آشنا هستند و توسعه نرم افزار در آن برای برنامه نویسانی که از برنامه نویسی ویندوز می آیند راحت تر است، اما برای استفاده از ASP.NET MVC برنامه نویسان باید آموزش ببینند. از آنجایی که ASP.NET MVC کمتر سعی می کند تا جزئیات http و html را از کاربر پنهان کند، استفاده از آن برای بعضی برنامه نویسان سخت تر است.
در طی سالیان، کنترل های بسیاری برای آن ساخته شده است که در نرم افزارهای تحت وب مختلف می توان از آنها استفاده کرد، مانند کنترل های Telerik اما این کنترل ها اگر در آنها از postback یا viewstate استفاده شده باشد دیگر در ASP.NET MVC قابل استفاده نیستند.
در ASP.NET MVC امکان استفاده از Eventها وجود ندارد.
grid control و update panel هنوز برای ASP.NET MVC ایجاد نشده اند.
برای استفاده از آن باید بسته جداگانه ای را دانلود کرد. (البته در نگارش های جدید به صورت پیش فرض همراه ASP.NET خواهد بود)

نکات دیگری نیز قابل توجه است. استفاده از ASP.NET MVC با استفاده از Visual Studio Express نیز امکان پذیر است.
سایت مشهور stack overflow با استفاده از ASP.NET MVC توسعه داده شده است.
فراموش نباید کرد که نظر Microsoft این است که نه ASP.NET MVC بهتر از ASP.NET Web Forms است و نه جایگزین آن. بلکه هر دو اجزاء اساسی ASP.NET خواهند بود و تا مدت قابل توجهی هر دو پشتیبانی می شوند و توسعه داده خواهند شد.

تعیین تصویر دلخواه برای وضعیت یاهو در ASP.NET

Sun, 14 Mar 2010 23:31:00 +1700

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

به طور پیش فرض یاهو 24 تصویر دارد که با تعیین پارامتر t در انتهای کد می توانیم معین کنیم کدام تصویر برای تعیین وضعیت نمایش داده شود. البته امکان دارد تعداد این تصاویر در آینده افزایش یابد.
برای دیدن این تصاویر می توان آدرس
http://opi.yahoo.com/online?u=sepidweb&m=g&t=1

را در مرورگر وارد کرد و با تغییر عدد انتهای آدرس که در آدرس بالا 1 است، باقی 23 تصویر ممکن را نیز دید.

همانطور که در ستون سمت چپ این سایت نیز مشاهده می کنید، در سایت ما تصویر دلخواهی برای تعیین وضعیت یاهو نشان داده شده است. در این پست قصد دارم نحوه نمایش یک تصویر دلخواه برای وضعیت یاهو را شرح دهم.
مراحل کار بسیار ساده است. ابتدا باید معین کنیم آیا فرد مورد نظر در یاهو آنلاین هست یا خیر. سپس براساس وضعیت فرد دو تصویر آنلاین و آفلاین دلخواه خود را نشان دهیم.
تعیین آنلاین یا آفلاین بودن ساده است. کافی است آدرس یکی از تصاویر بالا را به طور نرم افزاری درخواست کنیم، و تصویر برگردانده شده را بررسی کنیم. اگر تصویر همانی بود که به عنوان آنلاین نشان داده می شود، پس فرد مورد نظر آنلاین است.
برای این کار من از تصویر با t=5 استفاده می کنم. سپس دو تصویر آنلاین و آفلاین را در یک hex editor باز کردم تا اختلاف آن دو را مشاهده کنم. براساس اولین بایتی که اختلاف دارند معین می شود کدام تصویر برگردانده شده است.
برای t=5 دو تصویر در بایت دوازدهم با هم اختلاف دارند و تصویر آنلاین مقدار بایت دوازدهم آن 109 است.

کد زیر آنلاین یا آفلاین بودن کاربر یاهو را معین می کند

(البته با دانلود SepidYahooStatus.dll و استفاده از SepidWeb.Yahoo.IsOnline می توانید در کد خود معین کنید آیا کاربر مورد نظر آنلاین است یا آفلاین)

using System;
using System.Configuration;
using System.Web;
using System.Net;

namespace SepidWeb
{
    /// <summary>
    /// Gets the status of the provided yahoo id (either online or offline) in boolean. true for online.
    /// </summary>
    public class Yahoo
    {
        public static bool IsOnline(string YahooId)
        {
            try
            {
                string yahooStatusImageUrl = "http://opi.yahoo.com/online?u=" + YahooId + "&m=g&t=5";

                HttpWebRequest YahooStatusRequest = (HttpWebRequest)WebRequest.Create(yahooStatusImageUrl);

                YahooStatusRequest.Accept = "image/*";
                YahooStatusRequest.AllowAutoRedirect = true;

                HttpWebResponse YahooStatusResponse = (HttpWebResponse)YahooStatusRequest.GetResponse();

                //first read 11 bytes which are equal in both online and offline streams.
                for (int i = 0; i < 11; i++)
                    YahooStatusResponse.GetResponseStream().ReadByte();

                //decide based on the different byte.
                int decidingByte = YahooStatusResponse.GetResponseStream().ReadByte();

                if (decidingByte == 109)
                    return true;
                else
                    return false;
            }
            catch (WebException e)
            {
                //possibly theres a problem with the internet connection.
                //simply show it offline.
                e.ToString();
                return false;
            }
        }
    }
}

اکنون که می توانیم وضعیت یک کاربر را در یاهو تشخیص دهیم، تعیین تصاویر برای دو وضعیت آنلاین و آفلاین کار سختی نیست.
کافی است براساس یک if ساده وضعیت کاربر معین شود و سپس براساس وضعیت وی آدرس تصویر مورد نظر استفاده گردد. مثلا

<% if(SepidYahooStatus.Yahoo.IsOnline("sepidweb")
{%>
<asp:Image ImageUrl="images/online.png" runat="server" />
<%}else(){ %>
<asp:Image ID="Image1" ImageUrl="images/offline.png" runat="server" />
<%} %>

بهینه سازی تصاویر برای استفاده در وب

Thu, 04 Mar 2010 23:40:00 +1700

یکی از اساسی ترین کارهایی که برای کم کردن زمان بارگذاری صفحات وب باید انجام داد، بهینه سازی حجم تصاویر استفاده شده در صفحات وب است.
منظور از بهینه سازی استفاده از روش هایی است که حجم تصاویر در فرمت های png, jpg و gif را بدون هیچ گونه تغییر در کیفیت آنها به حد بسیار قابل توجهی کاهش می دهند.
البته نباید فراموش کرد که قبل از بهینه سازی تصاویر، ابتدا بایستی براساس کیفیت مورد نیاز آنها را در پایین ترین حجمی که کیفیت عکس در آن قابل قبول است ذخیره کرد، و سپس از ابزارهای بهینه سازی تصاویر استفاده نمود.
گزینه save for web & devices... در photoshop معمول ترین جایی است که تصاویر را با حداقل حجم برای کیفیت مناسب ذخیره می کنیم.
پس از آن نوبت به استفاده از ابزارهای بهینه ساز حجم تصاویر می رسد. با وجود ابزارهای بسیار متنوع، ابزارهایی که به شخصه از آنها بیشتر استفاده می کنم و کار با آنها به نظر راحت تر است و به نسبت بهینه سازی مناسب تری را انجام می دهند معرفی می کنم.

optipng برای فرمت png

ابزار متن بازی که به خوبی کار بهینه سازی تصاویر png را انجام می دهد.
برای بهینه سازی یک تصویر، باید از command prompt استفاده کرد و فایل png باید در همان پوشه ای باشد که optipng قرار دارد. سپس با دستوری مانند دستور زیر تصویر با حداکثر میزان ممکن بهینه سازی می شود.
optipng -o7 my.png

http://optipng.sourceforge.net/

jpegtran برای فرمت jpeg

ابزار مناسبی برای بهینه سازی فایل های jpeg که تحت command prompt باید آن را اجرا کرد.
به طور پیش فرض jpegtran نتیجه کار را در خروجی می نویسد. بنابراین برای این که نتیجه بهینه سازی را در یک فایل jpg ذخیره کنیم بایستی نام فایلی که می خواهیم در آن ذخیره شود را بعد از علامت < قرار دهیم
jpegtran -copy none source.jpg > destination.jpg

http://sylvana.net/jpegcrop/jpegtran/

Supergif برای فرمت gif

supergif که برخلاف دو مورد قبلی دارای رابط گرافیکی کاربر است.

از آدرس زیر می توانید آن را دریافت کنید
http://www.boxtopsoft.com/supergif.html

smushit برای بهینه سازی آنلاین

در صورتی که بخواهید همه ی تصاویر سایت خود را پس از قرار دادن بر روی سرور بهینه سازی کنید می توانید از ابزار smushit که اکنون بخشی از افزونه yslow برای Firefox است استفاده کنید و تصاویر بهینه شده را در قالب یک بسته دریافت کنید.
برای استفاده از آن باید پس از راه اندازی Firebug به yslow رفت و از طریق tools, All Smush.it را انتخاب کرد.

افزونه yslow برای Firefox
https://addons.mozilla.org/en-US/firefox/addon/5369

برترین سیستم های متن باز برای دات نت

Fri, 26 Feb 2010 12:12:00 +1700

معمولا وقتی از من در مورد انتخاب بین asp.net و php می پرسند، برجسته ترین ویژگی هایی که برای انتخاب یکی از این دو ذکر می کنم این است که اگرچه ممکن است #C یا VB بهترین زبان برای کد زدن نباشند، ولی در مقابل visual studio اگر بهترین IDE نباشد، حداقل یکی از بهترین هاست. به شخصه با IDE های مختلفی مخصوصا با IDEهای جاوا (که معمولا برای php نیز به کار می روند) کار کرده ام. شاید از نظر امکانات از Visual Studio کم نداشته اند، چه بسا امکانات بیشتری هم داشتند. اما هیچ وقت با آنها به اندازه Visual Studio راحت نبوده ام. به نظر تنها IDE جامعی است که تقریبا همه ی امکانات مورد نیاز را در دسترس برنامه نویس قرار می دهد. از این نظر asp.net بهترین است. اما مهمترین نقطه ضعف آن نبود سیستم های کد باز یا متن باز است. نبود سیستم هایی برای دات نت که طراحان و توسعه دهندگان وب بتوانند برای پروژه های خود از آنها استفاده کنند گاهی در مقابل سیستم های آماده php واقعا باعث حسرت می شد.

از آن طرف همیشه بزرگترین نقطه قوت php وجود انواع و اقسام سیستم های متن باز است که همچنان بر تعداد و کیفیت آنها افزوده می شود. برخلاف مورد قبلی، هیچ وقت با سیستم های open source در net. احساس راحتی نمی کردم. راحتی نصب و کار کردن با wordpress با پیچیدگی، زشتی و مشکلات متعدد DotNetNuke قابل مقایسه نیست. DotNetNuke برخلاف wordpress به طور پیش فرض زشت است. معمولا تغییرات کوچک در DotNetNuke آن را بهتر و یا تغییر در ظاهر، آن را زیباتر می کند، اما در wordpress، عکس این موضوع صادق است.

اما خوشبختانه سیستم های متن باز بسیار مناسبی برای .net نیز وجود دارند که به نظر می رسد تا مدتی دیگر دست کمی از رقبای php خود نداشته باشند. براساس تجربیاتی که با نرم افزارهای مختلف دات نت داشته ام سیستم های زیر به خوبی جوابگوی تولید کنندگان نرم افزار و نیز کاربران دات نت هستند.

وبلاگ

فروشگاه

مدیریت محتوا و پورتال

تالار گفتگو (Forum)

ویکی

نمایش صحیح صفحات وب در IE6

Fri, 02 Oct 2009 07:14:00 +1700

یکی از بزرگترین مشکلاتی که طراحان وب با آن مواجه هستند، هیچ ارتباطی با طراحی ندارد. مرورگری به نام Internet Explorer 6. فقط به علت اینکه بسیاری از کاربران وب هنوز از این مرورگر استفاده می کنند، طراحان وب نمی توانند از تمام ظرفیت های CSS برای طراحی سایت هایشان استفاده کنند. شاید برای بسیاری از طراحان وب مثل خودم، بهترین راه مقابله با IE6 راهنمایی کاربران برای کنار گذاردن این مرورگر باشد. روش هایی نظیر نشان دادن سایت در پایین ترین ظرفیت ممکنه برای کاربران IE6، و یا نشان دادن هشدار به این عنوان که نمی توانید با استفاده از این مرورگر از امکانات سایت استفاده کنید، و یا حتی ارسال کاربران به breakIE6.com دلپذیرترین روش ها برای مقابله با این مرورگر است.

اما به هر حال بسیاری از کاربران وب از این مرورگر استفاده می کنند و معمولا در بسیاری از اوقات مخصوصا در سایت های تجاری یا دولتی چاره ای نیست جز اینکه به هر طریق ممکن سایت را به گونه ای طراحی کرد که کسانی که از IE6 استفاده می کنند نیز بتوانند به سایت دسترسی داشته باشند.

در ادامه سعی کرده ام تا برای بعضی مشکلات اساسی که در IE6 وجود دارد راه حل های موجود را بیان کنم.

نوشتن کد فقط برای IE6

خوشبختانه با وجود همه ی مشکلات اساسی موجود در IE6 و خودخواهی های مایکروسافت برای عدم انطباق با استانداردهای وب، راهی برای نوشتن کدهایی که فقط در IE6 دیده شوند وجود دارد. با استفاده از Conditional Comments.

بدین ترتیب می توان کدهایی در صفحات وب قرار داد که تنها در نگارش های خاص از IE دیده شود. مثلا در کد بالا، در صورتی که IE نگارش 6 باشد، کدی که در درون comment قرار دارد نیز جزئی از صفحه وب خواهد بود. اما بقیه نگارش های IE و باقی مرورگرها همه ی آن را به عنوان توضیحات درنظر می گیرند و چیزی در صفحه وب قرار نمی گیرد.

با استفاده از این روش می توان یک کد javascript خاص، یا یک style sheet مجزا را برای نگارش خاصی از IE در صفحه وب وارد کرد. به عنوان مثال:

بعد می توان همه ی styleهایی که مربوط به IE6 هستند را در این فایل css قرار داد.

البته Conditional comments فقط در IE6 کاربرد ندارند و می توان هر نسخه ای، یا مجموعه ای از نگارش های IE را تعیین کرد. مثلا نگارش های کمتر یا معادل IE7. برای اطلاعات بیشتر می توانید به Microsoft - About Conditional Comments مراجعه نمایید.

درست نمایش دادن تصاویر alpha-transparent PNG در IE6

این مشکل باعث می شود تا مناطقی از تصاویر PNG که از transparency یا همان شفافیت که باعث می شود قسمتهای شفاف دیده نشوند و تصاویر زیر آنها دیده شود استفاده می کنند، به مانند تصویر زیر نشان داده شوند:

این مشکل برای فایل های تصویری PNG از نوع 32 بیتی است که برای حل این مشکل scriptهای خاصی نوشته شده اند که ازAlpha Image Loader filter که مخصوص IE است استفاده می کنند.

یکی از بهترین آنها iepngfix است که تنها نیازمند قرار دادن دو فایل در وب سرور است، و پس از آن با تعیین کردن کلاس css می توان تصاویری که می خواهیم filter بر روی آنها اعمال شود را معین کنیم. بدین ترتیب تغییر بسیار ناچیزی در کد html وارد می شود. علاوه بر آن با انواع تصاویر مانند background و inline و غیره سازگار است.

بنابراین در IE6 نیز می توان تصاویر Transparent 32bit PNG را نیز به درستی نمایش داد.

برای اطلاعات بیشتر به TwinHelix IE PNG Fix مراجعه نمایید.

Float Clear

مشکلی که نه فقط در IE6 و بلکه در مرورگرهای بسیاری وجود دارد، انجام ندادن clearing برای عناصر داخلی float شده است.

بدین معنا که انتظار می رود که مثلا اگر یک تصویر را در یک div قرار دهیم و آن تصویر را به یک سمت float کنیم، آن div به طور کامل تصویر را در بر گرفته باشد و حداقل طول و عرض معادل تصویر داشته باشد.

اما گاهی چنین اتفاقی نمیفتد و به اطلاح می گویند عنصر شناور داخلی به درستی توسط دربرگیرند خود clear نشده است.

خوشبختانه راه حل بسیار مشهور clearfix وجود دارد که به اصطلاح یک css hack .است

برای استفاده از این css hack کافی است کد css مربوطه را در فایل های css قرار دهیم و سپس به کلاس های div کلاس clearfix را نیز اضافه کنیم.

.clearfix:after{
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{display:inline-table}
/* Hides From IE-mac */
* html .clearfix{height:1%;}
.clearfix{display:block}
/* End Hide From IE-mac */

البته راه حل ساده تر این است که برای خصیصه overflow از div مقداری تعیین کنیم.

overflow:hidden;
width:100%;

البته می توان مقادیر دیگری را نیز برای width و overflow تعیین کرد و یا حتی به جای width به height مقدار داد.

همچنین در صورتی که مقداردهی به overflow باعث به هم ریختگی طراحی بشود، می توان تنها به یکی از overflow-x و overflow-y مقدار داد.

رفع مشکل دوبرابر شدن حاشیه

در صورتی که عنصری مانند <div> را در یک سمت float کنیم، و بعد در همان سمت یک حاشیه یا همان margin برای آن قرار دهیم، IE6 مقدار آن margin را دوبرابر می کند!

ساده ترین راه حل برای این مشکل آن است که خصیصه display برای آن عنصر را از block به inline تغییر دهیم.

رفع بعضی از مشکلات IE6 با تعیین hasLayout

به عنوان آخرین نکته، بسیاری از مشکلات IE6 را می توان با به اصطلاح set کردن hasLayout رفع کرد. hasLayout یکی از تعیین کننده های داخلی مرورگر IE6 است که در صورتی که همه چیز به خوبی کار می کرد نیازی نبود تا هیچ وقت در مورد آن بدانیم.

hasLayout یک خصیصه برای هر یک از عناصر html است که خود IE6 در درون خود برای بررسی نحوه نمایش عناصر مقدار آن را تعیین می کند. معمولا برای اینکه نمایش عناصر وقت گیر نباشد و بازدهی بالا رود، IE6 برای بعضی عناصر مقدار آن را false قرار می دهد.

گاهی اوقات مشکلات نمایش عناصر در صورتی که hasLayout در آنها true باشد رفع می شود. بنابراین خوب است بدانیم چه طور می توانیم کاری کنیم که IE6 مقدار آن را true قرار دهد.

با تعیین مقادیر زیر برای خصیصه های عناصر، آنها دارای layout می شوند

width: anything other than "auto"
height: anything other than "auto"
float: left or right
display: inline-block
zoom: anything other than "normal"

بنابراین یکی از سریع ترین روش ها برای حل مشکل نمایش در IE6 این است که فرضا برای آن عنصر width یا height تعیین کنیم.

برای اطلاعات بیشتر در مورد hasLayout می توانید به Concept of hasLayout in IE\Win مراجعه نمایید.

در پایان

در این نوشته سعی کردم اصلی ترین نکات مورد نیاز برای اینکه صفحات وب تا حد قابل قبولی در IE6 به درستی نمایش داده شود را بیان کنم. اگرچه مشکلات IE6 به همین موارد ختم نمی شود و البته راه حل ها هم بسیار است، ولی به عنوان یک نوشتار کلی، به نظر کافی می رسد.

مخصوصا که عقیده دارم حالا که نمی توانیم کاربران IE6 را متقاعد کنیم تا از آن دست بردارند، و یا شاید برای آنها امکان این موضوع وجود نداشته باشد، بهتر است لااقل متوجه شوند که همه چیز در مرورگر آنها به درستی کار نمی کن.

اکثر نکات از Definitive Guide To Tamming the IE6 Beast گرفته شده است و البته براساس تجاربی که از طراحی وب برای IE6 داشتم مهمترین نکات آن را جدا کردم. در صورتی که بخواهید بیشتر بدانید حتما به مقاله اصلی سری بزنید.