بررسی وجود پیاده سازی محتویات MasterPage

شاید در استفاده از MasterPage ها زمانی پیش آمده باشد که لازم شده وجود پیاده سازی یک ContentPlaceHolder را در صفحه خاص رو بررسی کنید. مثلا زمانی رو در نظر بگیرید که در صفحه خاصی نباید بلوک خلاصه محتویات صفحه یا لینکها نمایش داده شود و این کادر نیز در MasterPage پیاده سازی شده است.

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

خوشبختانه ویژگی داخلی و مخفی در کلاس MasterPage وجود دارد به نام ContentTemplates که لیستی از ContentPlaceHolder هست که توسط صفحه جاری پیاده سازی شده است. کاری که لازم است استفاده از قدرت Reflection دات نت هست تا به آن ویژگی دسترسی پیدا کنیم.

همراه با این باید ContentPlaceHolder برای وجود کنترل در داخلی خودش هم بررسی بشه. تابع زیر برای همین کار هست:

public static bool HasNonEmptyControls(ContentPlaceHolder cph)
{
    if (cph.Controls.Count == 0)
    {
        return false;
    }
    else if (cph.Controls.Count == 1)
    {
        LiteralControl c = cph.Controls[0] as LiteralControl;

        if (string.IsNullOrEmpty(c.Text) || IsWhiteSpace(c.Text))
            return false;
    }

    return true;
}

static bool IsWhiteSpace(string s)
{
    for (int i = 0; i < s.Length; i++)
        if (!char.IsWhiteSpace(s[i]))
            return false;

    return true;
}

در ادامه تابع اصلی منظور ما که وجود پیاده سازی از یک ContentPlaceHolder به خصوص رو بررسی خواهد کرد:

static readonly Type _masterType = typeof(MasterPage);
static readonly PropertyInfo _contentTemplatesProp = _masterType.GetProperty("ContentTemplates", BindingFlags.GetProperty | BindingFlags.NonPublic | BindingFlags.Instance);

public static bool HasContentPageContent(ContentPlaceHolder cph)
{
    IDictionary templates = null;
    MasterPage master = cph.Page.Master;

    while (templates == null && master != null)
    {
        templates = (IDictionary)_contentTemplatesProp.GetValue(master, null);
        master = master.Master;
    }

    if (templates == null)
        return false;

    bool isSpecified = false;

    foreach (string key in templates.Keys)
    {
        if (key == cph.ID)
        {
            isSpecified = true;

            break;
        }
    }

    return isSpecified;
}

همانطور که از کد مشخصه با بدست آوردن ویژگی ContentTemplates که یک لسیت دیکشنری است وجود ContentPlaceHolder مورد نظر رو بررسی می کنیم.

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

public static bool HasContentOrControls(ContentPlaceHolder cph)
{
    return HasNonEmptyControls(cph) || HasContentPageContent(cph);
}

و تمام. به راحتی می توانید از این تابع استفاده کنید. مانند نمونه زیر:

<%if (HasContentOrControls(plhOptions)){ %>
<div id="options">
 <div>
 <h2>
 <asp:ContentPlaceHolder ID="plhOptionsTitle" runat="server" />
 </h2>
 <asp:ContentPlaceHolder ID="plhOptions" runat="server" />
 </div>
</div>
<%}%>

همانطور که در این مثال مشاهده می کنید، فقط در صورتی که plhOptions در صفحه پیاده سازی شده باشد کادر مربوط به آن همراه با محتویات بخش plhOptionsTitle نمایش داده خواهند شد.

منبع

خوش باشید.

رفع باگ موجود در CookieContainer

قبلا نوشته بودم که ماکروسافت قراره باگی رو که در کلاس CookieContainer هست رو رفع کنه، که اون باگ باعث 7 ماه سرگردانی من شده است. خبر خوبی بود، اما اگر به سایت ماکروسافت که لینکش رو گذاشته بودم مراجعه کنید می بینید که هیچ وصله ای قرار نیست برای دات نت 2 منتشر بشه. و این یعنی اینکه همچنان با مشکل باید دست و پنجه نرم کنیم!

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

• مقدمه ای در مورد Domain در کوکی ها
  

تمام مشکل حول محور نحوه مدیریت domain در کلاس Cookiecontainer بر میگرده. پس میخوام مختصر توضیحی در مورد دامین در کوکی ها بدم.

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

یک مثال ساده مانند زیر هست؛ در این مثال  کوکی با نام Hello رو برای دامین site.org ثبت می کنیم:

Hello=cookieValue value; domain=site.org; path=/

توجه کنید که این کوکی فقط به دامین site.org ثبت شده و فقط برای آن قابل مشاهده خواهد بود. هیچ زیر دامنه ای مانند www.site.org نمی تواند این کوکی رو مشاهده کند. برای اینکه کوکی به زیر دامنه های سایت site.org هم قابل دسترسی باشه باید یک نقطه (.) به اول دامنه اضافه کنیم. مانند این نمونه:

Hello=cookieValue value; domain=.site.org; path=/

با این کار این کوکی به تمامی زیر دامنه ها قابل مشاهده خواهد بود.

همچنین توجه کنید که این قانون به کوکی های خود زیر دامنه ها هم اعمال میشه. برای مثال کوکی زیر فقط برای sub.site.org قابل مشاهده خواهد بود:

Hello=cookieValue value; domain=sub.site.org; path=/

و کوکی زیر، هم برای دامنه اصلی و هم برای تمامی زیر دامنه های آن قابل مشاهده خواهد بود:

Hello=cookieValue value; domain=.sub.site.org; path=/

• بررسی مشکل

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

احتمالا تا حالا متوجه شدید که مشکل کلاس CookieContainer در نحوه مدیریت نقطه (.) هایی هست که در ابتدای دامین قرار می گیره و به شیوه اعمال اونها تاثیر میذاره.

برای نمونه مشکل زمانی اتفاق می افته که یک کوکی رو به آدرس site.org ثبت کنید و درخواست خودتون رو آدرس www.site.org ارسال کنید.
طبق مقدمه انتظار میره که هیچ کوکی ارسال نشه ولی برخلاف انتطار کوکی مزبور ارسال خواهد شد. متن کوکی این مثال:

Hello=CookieValue value; domain=site.org; path=/

همچینین مشکل دیگر و البته بدتر زمانی هست که کوکی رو به آدرس www.site.org ثبت کنید و درخواست خودتون رو به آدرس www.site.org ارسال کنید. انتظار می ره که کوکی به سلامتی ارسال بشه ولی در کمال ناباوری هیچ کوکی ارسال نخواهد شد. متن کوکی این مثال:

Hello=CookieValue value; domain=www.site.org; path=/

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

• نحوه رفع باگ

مشکل اصلی به نحوه پیاده سازی یکی از متد ها داخلی و پنهان کلاس CookieContainer بر می گرده. در نتییجه توابعی که از اون تابع استفاده می کنند این مشکل زو خواهند داشت. متاسفانه همه سه تابعی که برای افزودن کوکی قابل دسترسی هستند از مشکل رنج می برند! این سه تابع و توضیح مختصر در مورد اونها:

• Add(Uri,Cookie) این تابع کوکی را اضافه کرده و به مسیر تعیین شده ارتباط میدهد
• Add(Cookie) این تابع کوکی رو اضافه کرده و دامینهای قابل اعمال رو از دامین کوکی تعیین می کنه
• SetCookies(CookieHeader) این تابع کوکی که به صورت هدر کوکی ارسال شده رو تولید کرده و اضافه می کنه.

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

به صورت خلاصه تابع زیر برای رفع این نقیصه نوشته شده. این تابع رو همراه با یک سری تمهیدات باید به کار ببرد که در ادامه توضیح خواهد داد:

private static Type _cookieContainerType = Type.GetType("System.Net.CookieContainer, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089");
private static Type _pathListType = Type.GetType("System.Net.PathList, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089");
///<summary>
/// This method is aimed to fix a goddamn CookieContainer issue,
/// It adds missed path for cookies which are not started with dot.
/// This is a dirty hack
///</summary>
///<remarks>
/// This method is only for .NET 2.0 which is used by .NET 3.0 and 3.5 too.
/// The issue will be fixed in .NET 4, I hope!
///</remarks>
/// Many thanks to CallMeLaNN "dot-net-expertise.blogspot.com" to complete this method
private void BugFix_AddDotCookieDomain(CookieContainer cookieContainer)
{
	Hashtable table = (Hashtable)_cookieContainerType.InvokeMember("m_domainTable",
									 System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.GetField | System.Reflection.BindingFlags.Instance,
									 null,
									 cookieContainer,
									 new object[] { });

	ArrayList keys = new ArrayList(table.Keys);

	object pathList1;
	object pathList2;

	SortedList sortedList1;
	SortedList sortedList2;
	ArrayList pathKeys;

	CookieCollection cookieColl1;
	CookieCollection cookieColl2;

	foreach (string key in keys)
	{
		if (key[0] == '.')
		{
			string nonDotKey = key.Remove(0, 1);
			// Dont simply code like this:
			// table[nonDotKey] = table[key];
			// instead code like below:

			// This codes will copy all cookies in dot domain key into nondot domain key.

			pathList1 = table[key];
			pathList2 = table[nonDotKey];
			if (pathList2 == null)
			{
				pathList2 = Activator.CreateInstance(_pathListType); // Same as PathList pathList = new PathList();
				lock (cookieContainer)
				{
					table[nonDotKey] = pathList2;
				}
			}

			// merge the PathList, take cookies from table[keyObj] copy into table[nonDotKey]
			sortedList1 = (SortedList)_pathListType.InvokeMember("m_list", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.GetField | System.Reflection.BindingFlags.Instance, null, pathList1, new object[] { });
			sortedList2 = (SortedList)_pathListType.InvokeMember("m_list", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.GetField | System.Reflection.BindingFlags.Instance, null, pathList2, new object[] { });

			pathKeys = new ArrayList(sortedList1.Keys);

			foreach (string pathKey in pathKeys)
			{

				cookieColl1 = (CookieCollection)sortedList1[pathKey];
				cookieColl2 = (CookieCollection)sortedList2[pathKey];
				if (cookieColl2 == null)
				{
					cookieColl2 = new CookieCollection();
					sortedList2[pathKey] = cookieColl2;
				}

				foreach (Cookie c in cookieColl1)
				{
					lock (cookieColl2)
					{
						cookieColl2.Add(c);
					}
				}
			}
		}
	}
}

جزئیات نحوه کار این متد زیاد مهم نخواهد بود پس از ذکر آنها خودداری می کنم.

شیوه به کار گیری:

نکته خیلی خیلی مهم این هست که از هیچ کدام از توابع Add(Uri,Cookie)  و SetCookies(CookieHeader) نباید استفاده کنید. مشکلاتی این دو تابع ایجاد می کنند غیر قابل اصلاح است.

تنها تابع مجاز برای استفاده Add(Cookie) جها اضافه کردن کوکی های به کلاس CookieContainer است.

و سر انجام اینکه تابع BugFix_AddDotCookieDomain رو زمانی باید فراخوانی کنید که کارتان با کلاس CookieContainer به پایان رسیده و آماده ارسال درخواست هستید.

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

نکته پایانی

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

• لینکهای مرتبط

بحث طولانی من و دوستم که منجر به رسیدن به این راه حل شد

وصله ماکروسافت برای رفع مشکل 7 ماهه من

پاسخ ماکروسافت به این مشکل

رفع غلط های املایی سایت با Firefox

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

در این روشی که معرفی می کنم هیچ کاری لازم نیست انجام بدید فقط کد زیر رو در نوار آدرس سایتتون وارد کنید. توجه کنید که مرورگر باید Firefox باشه (روی opera 10 امتحان کردم و جواب داد):

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0


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

Firefox is spell checking a website

در حقیقت این کد تمام صفحه رو در حالت ویرایش قرار میده، در این صورت هست که فایرفاکس و مرورگر های جدید اقدام به یافتم غلط های املایی می کنند.

نکته: برای اینکه این غلط یابی برای فارسی درست کار کنه باید دیکشنری فارسی فایرفاکس رو نصب کنید. اینجا.

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

CKEditor 3.0

نسخه جدید ویرایشگر آنلاین FCKeditor عرضه شد. این ویرایشگر اخیرا به CKEditor تغییر نام پیدا کرده و از این به بعد به این نام عرضه خواهد شد. این تغییر نام با توجه به یک نظر سنجی و نظرات کاربران در مورد مشکل داشتن نام این ابزار بوده!

در این نسخه که تغییرات بسیار زیادی صورت گرفته که می شه گفت اگر از نسخه های FCKEditor استفاده می کردید باید اونها رو کنار بذارید. سرعت بارگذاری این ویرایشگر بهبود قابل ملاحظه کرده. قابلیت تغییر رنگ و پوسته بهتر و پشتیبانی بهتر از زبانهای راست به چپ نیز از سایر امکانات این ویرایشگر هست. API کاربردی این ابزار تغییرات بسیاری کرده که لازمه حتما به مستندات اون مراجعه کنید.

• مشاهده مستندات
• نسخه نمایشی از تمامی امکانات

دریافت CKEditor 3.0

چرخش متون و اشیای صفحه با CSS 3

یکی دیگر از ویژگیهایی که به CSS 3 اضافه شده امکان چرخش دادن به اشیا و متون در جهت دلخواه است.
این چرخش با ویژگی جدیدی با نام transform معرفی شده. هنوز این ویژگی نهایی نشده و ممکنه که در آینده تغییراتی در اون به وجود بیاد و زاویه های دیگری غیر از درجه رو هم پشتیبانی کنه، اما فعلا با این تعریف کنونی مرورگرهای Firefox 3.5 ، Chrome و Safari از اون پشتیبانی می کنند.
این ویژگی قدرت عمل زیادی به طراحان وب خواهد داد و با استفاده ترکیبی ازاین ویژگی می توان انیمیشن های مختلفی برای سایت ایجاد کرد.
دستور این ویژگی به این صورت است:
transform: rotate;
که مقدار rotate یا چرخش به صورت rotate(Xdeg) وارد میشه. مانند این نمونه:
transform: rotate(-90deg);

• به کار گیری

همانطور که گفتن این ویژگی در Firefox 3.5 ، Chrome و Safari پستیبانی میشه. کاری شبیه این رو می شه با استفاده از فیلترهای مخصوص IE در آن مرورگر انجام داد.

برای استفاده در Firefox طبق معمول باید پسوند -moz رو به ویژگی اضافه کنید، برای مرورگر Chrome و safari نیز -webkit لازم خواهد بود. مانند زیر:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
برای مرورگر IE هم از فیلترها برای شبیه سازی عملکردی مانند این استفاده کنید:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

• نمونه های انجام شده

ساعت با جاوا اسکریپت و این ویژگی

نمایش تاریخ میلای در کنار متون

تاریخ میلادی به سبک دیگر (منبع این پست)

نمایش دهنده گالری عکس با ترکیبی از JQuery و این ویژگی(safari)

• مطالب مرتبط

ویژگیهای جدید در CSS 3 بخش اول

ویژگیهای جدید در CSS 3 بخش دوم

راهنمای سریع و مرجع کامل Html و CSS

افزونه فایرفاکس: تشخیص تغییرات DOM و CSS در صفحات وب

بررسی کامل Google Webmaster Tools

Webmaster Tools یکی از سرویس های ویژه مدیران سایتها است که با هدف افزایش کیفیت سایتها با توجه به معیارهایی شرکت گوگل است. این کار برای افزایش کیفیت نتیایج مرتبط با عبارات جستجو طراحی شده است. این سرویس مدت چندین سال است که راه اندازی شده و اخیرا بازبینی بر روی برخی امکانات و ظاهر آن صورت گرفته است.

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

• بررسی ویژگی و مزایا

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

بخش Dashboard

در این صفحه که صفحه آغازین سایتی که ثبت کرده اید است، اطلاعات مختصری از آخرین وضعیت سایت نمایش داده می شود. اینها شامل اطلاعاتی در مورد وضعیت sitemap ها، وضعیت بازبینی سایت توسط موتور گوگل و وضعیت کلمات کلیدی جستجو شده برای ورود به سایتتان است.

در منوی سمت چپ لیستی منویی می بینید که از طریق آن را سایر قسمت های این سرویس می توانید دست پیدا کنید.

مدیریت Sitemap

Sitemap یا به فارسی نقشه سایت، به صورت تعدادی استاندارد عرضه شده که اکثر آنها را گوگل در این سرویس پشتیبانی می کنه. همچنین گوگل این امکان رو میده که نقشه سایت رو به صورت Feed یا “خوراک” ثبت کنید.

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

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

مدیریت دسترسی به قسمتهای سایت (Crawler access)

قبل از پیدایش سرویس هایی مانند Webmaster Tools صاحبان سایت برای جلوگیری از دسترسی و اندیس شدن برخی صفحات مجبور به استفاده از فایلی به نام robots.txt بودند. این فایل فرمت خاصی دارد که این امکان را می دهد که به صفحات خاص دسترسی داد و یا دسترسی را ممنون اعلام کرد.

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

همچنین در این بخش می توان به تولید فایل robots.txt پرداخت و آن را در موتور های جستجوی مختلف گوگل مورد آزمایش قرار داد.

مدیریت SiteLinks

در صورتی که خوش شانس باشید و سایت شما دارای بازدید زیاد و همچنین PageRank بالایی باشد در این صورت ممکن است که گوگل لینک سایت شما را به صورت دیگری نشان بدهد. مانند زیر:

Sitelinks

در این قسمت می توانید لینکهایی که در Sitelinks داده شده را ویرایش کنید.

تنظیمات کلی سایت (Settings)

این تنظیمات در داخل بخش Site configuration با نام Settings قرار دارند. کارهای می توانید انجام بدهید به شرح زیر است.

Site Settings

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

همچنین می توانید به گوگل بگویید که آدرس سایت شما را با www نمایش بدهد یا نه و یا اینکه با توجه به لینک ها این کار را انجام دهد. این گزینه با نام Preferred domain مشخص شده است.

و سرانجام تنظیم تعداد دفعات مراجعه موتور کاوشگر گوگل به سایت در قسمت Crawl rate قابل تنظیم است. ممکن است که به علت بزرگ بودن سایت و مشکلات سرور نتوان پاسخ گوی درخواستهای اضافی بود که در این صورت این مقدار باید کم شود. در صورتی هم که از عدم شناسایی به موقع تغییرات سایت ناراضی هستید مقدار آن را افزایش دهید.

توجه کنید که این گزینه بر ترافیک سایت و همچنین به روز بودن لینکها تاثیر زیادی دارد و در تغییر این مقادیر دقت کند.

بهترین کلمات کلیدی – Top search queries
در این قسمت کلمات کلیدی که در موتور جستجو بیشترین مراجعه را به سایت شما کرده است نمایش داده می شود. همچنین موقعیت شما در نتایج جستجو با استفاده از کلمات کلیدی که در سایت استفاده کرده اید نمایش داده می شود.

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

Top search queries

لینک ها به سایت – Links to your site
در این صفحاتی که لینکهایی از سایت های دیگر به آن داده شده است لیست می شوند. همچنین می توان متن لینکی که برای لینک دادن استفاده شده است را مشاهده کرد.

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

کلمات کلیدی – Keywords

در این صفحه لیست پر کاربردترین کلمات کلیدی قرار دارد. برای درک ساختار مطالب صفحات شما برای تنظیم مقادیر Keyword مناسب است.

برای فارسی این مشکل وجود دارد که حروف اضافه مانند “در” در بالاترین مکان قرار می گیرند.

لینک های داخلی – Internal Links

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

از این سرویس می توان برای شناسایی لینک هایی که صفحات به یکدیگر می دهند استفاده کرد.

مشترکین خوراک – Subscriber stats

در صورتی که سایت شما Feed یا خوراک ارائه میده در این صفحه می تونید وضعیت مشتریک خود را در سرویس Google Reader مشاهده کنید. در صورتی که این feed ها را قبلا در قسمت sitemap ثبت نکرده باشید می توانید آنها را مستقیما از اینجا به لیست Sitemap ها اضافه کنید.

خطاهای موتور کاوشکر – Crawl errors

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

این خطاها در سه گروه عمده Web و Mobile-Chtml و Mobile-Xhtml تقسیم بندی شده که نشان دهنده وجود سه موتور کاوشگر متفاوت برای این نوع صفحات است.

به غیر از Web بقیه موارد زمانی نشان داده می شود که سایت سرویس هایی برای موبایل ارائه کند.

بخش های فرعی شامل جزئیات خطاها هستند که درتصویر مشاهده می کنید:

Crawl Errors

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

در این لیست تنها موردی که ممکن شما را به اشتباه بیاندازد و باید به آن توجه کنید قسمت “Restricted by robots.txt” است. صفحات لیست شده در این قسمت دارای اشکال نیستند و فقط توسط robots.txt که قبلا گفته شد، از لیست نتایج حذف شده اند و در نتیجه موتور کاوشکر آنها را کاوش نکرده است. این لیست کمک خواهد کرد که بدانید دقیقا کدام صفحات از نتایج جستجو حذف شده اند.

گزارش موتور کاوشگر – Crawl stats
این گزارش عملکرد موتور کاوشگر بر روی سایت است که شامل میانگین مدت زمان صرف شده برای دریافت صفحات و تعداد روزانه صفحات بازدید شده و همچنین حجم باند مصرفی است.

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

Crawl Stats

همچنین در زیر این آمار خلاصه وضعیت سایت از نظر Page Rank نمایش داده شده است. یعنی در حالت کلی سایت بیشتر در بالای نتایج نمایش داده می شود یا نه.

در ادامه صفحه ای که در هر ماه دارای بیشترین Page Rank بوده نیز نمایش داده می شود.

پیشنهادات بهینه سازی – HTML suggestions

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

برای نمونه در صورتی که دو صفحه از یک عنوان استفاده کنند، این مورد در قسمت Duplicate title tags با عنوان وجود یک مشکل نمایش داده خواهد و با ورود به جزئیات امکان مشاهده صفحاتی که دارای اشکال هستند نمایش داده خواهد شد.

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

• نحوه ثبت سایت در این سرویس

پس از اینکه وارد صفحه Webmaster Tools شدید بر روی گزینه Add site کلیک کرده و آدرس سایت رو وارد کنید. پس از آن آدرس سایت نمایش داده خواهد شد که نیاز به تایید دارد. برای تایید سایت بر روی گزینه Verify this site کلیک کنید:

افزودن سایت به Webmaster Tools

تایید هویت سایت را به دو صورت می توانید انجام دهید. اول اینکه یک تکه کد Html را به صفحه اصلی سایت اضافه کنید و راه دوم اینکه یک فایل با نام مشخص در مسیر اصلی سایت قرار دهید.

در صورتی که به ساختار صفحات html آشنایی ندارید بهتر است که از روش دوم و قرار دادم فایل در مسیر اصلی سایت استفاده کنید. این فایل یک فایل خالی خواهد بود که نام آن را با انتخاب گزینه HTML file در قسمت Verification method به شما نمایش خواهد داد. این نام معمولا فرمتی مانند googlee30bf8a27611ecb4.html دارد.

تایید سایت

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

نکته ای برای وبلاگها: سرویس های وبلاگ در صورتی می توانند از این سرویس گوگل استفاده کنند که اجازه ویرایش صفحه Html وبلاگ را داشته باشند. به این علت که برای تایید سایت نیاز به افزودن کدی به صفحه است. خوشبختانه بیشتر سرویس ها شامل blogfa، mihanblog ، blogspot و غیره این امکان را می دهند. توجه کنید که این امکان در سرویس wordpress.com وجود ندارد.

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

موفق باشید.

افزونه فایرفاکس: تشخیص تغییرات DOM و CSS در صفحات وب

FireDiff یک افزونه جدید برای فایرفاکس است که به افزونه Firebug اضافه می شود.

این افزونه این امکان را فراهم می کنه که تمامی تغییراتی که توسط جاوا اسکریپت به DOM صفحه و یا CSS آن اعمال می شود را ثبت نمابد.

این افزونه برای کسانی که در حال برنامه نویسی javascript و کار با صفحه وب هستند بسیار مفید خواهد بود.

FireDiff

FireDiff صفحه ای رو به FireBug با نام changes اضافه می کنه که لیست آخرین تغییرات در آن نمایش داده می شوند.

دریافت

ابتدا باید افزونه Firebug رو از اینجا دریافت کنید.

سپس خود FireDiff از این آدرس http://www.incaseofstairs.com/firediff دریافت کنید.

SyntaxHighlighter با طعم JQuery

اگه تا حالا از اسکریپت SyntaxHighlighter استفاده کرده باشین میدونین که با استفاده از این اسکریپت می شه کدها یا همون Code Snipped ها را رنگی و فرمت کرد.
برای استفاده از این اسکریپت در حالت عادی لازم است که علاوه بر موتور اصلی این اسکریپت (shCore.js) اسکرپیت مخصوص زبان استفاده شده در کدتون رو هم اضافه کنید. برای مثال برای سی شارپ shBrushCSharp.js

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

در زیر اسکریپتی رو که با استفاده از JQuery نوشته ام اگر در صفحه خود استفاده کنید علاوه بر کاهش تعداد درخواست ها به سرور و کاهش حجم دریافتی، اعمال SyntaxHighlighter به صورت خودکار خواهد بود و نیازی به درج هیچ کد اضافه ای نخواهید داشت. این امکان هم هست که اگر در صفحه هیچ کدی(منظور code snipped) وجود نداشته باشد هیچ کدام از اسکریپتهای SyntaxHighlighter استفاده نشود.
پس برای استفاده، به جای لینک مستقیم به SyntaxHighlighter باید از اسکریپت زیر استفاده کنید:

// Coded by Salar Khalilzadeh 2009-01-29
// http://salarblog.wordpress.com/

if($){
// SyntaxHighlighter scripts path
var BrushBasePath='http://www.YourSite.com/SyntaxHighlighter/scripts/';

// SyntaxHighlighter style sheet
var StyleFilePath='http://www.YourSite.com/SyntaxHighlighter/styles/SyntaxHighlighter.css';
var BrushFileName='shBrushXXX.js';
var BrushCoreFile='shCore.js';
var BrushAliases=[
	['xml','xml'], ['xhtml','xml'], ['xslt','xml'], ['html','xml'] , ['xhtml','xml'],
	['vb','vb'], ['vb.net','vb'],
	['sql','sql'],
	//['asm','asm'], uncomment if you have assmbly brush
	['ruby','ruby'], ['rails','ruby'], ['ror','ruby'],
	['py','python'], ['python','python'],
	['php','php'],
	['js','jscript'], ['jscript','jscript'], ['javascript','jscript'],
	['java','java'],
	['delphi','delphi'], ['pascal','delphi']
];

var codeTags=$('pre,code');
var matchedElements=[];
codeTags.each(function(){
	var $item = $(this);
	var href = $item.attr("href");
	var i;
	for(i=0;i<BrushAliases.length;i++){
		var attr=$item.attr("class");
		if(attr.indexOf(BrushAliases[i][0])!=-1 && matchedElements[BrushAliases[i][1]]==null){
			matchedElements.push(BrushAliases[i][1]);
		}
	}
})

// Highlighter core, if there is any language
if(matchedElements.length>0){
	document.write("<link rel='stylesheet' type='text/css' href='"+StyleFilePath+"' />");
	var jsCore=BrushBasePath+BrushCoreFile;
	document.write(unescape("%3Cscript%20type%3D%27text/javascript%27%20src%3D%27")+ jsCore + unescape("%27%3E%3C/script%3E"));
}

// Brushes
for(i=0;i<matchedElements.length;i++){
	var jsSrc=BrushFileName.replace('XXX',matchedElements[i]);
	jsSrc=BrushBasePath+jsSrc;
	document.write(unescape("%3Cscript%20type%3D%27text/javascript%27%20src%3D%27")+ jsSrc + unescape("%27%3E%3C/script%3E"));
}}

نحوه استفاده: این کد رو در حتما در آخر صفحه درج کنید. علت این کار رو در ادامه توضیح می دم.
در این کد در مقدار BrushBasePath آدرس محل brush های SyntaxHighlighter خواهد بود که با توجه به اینکه آن ها را در کجای وبسایت خود قرار داده اید باید آن را مسیر دهی کنید.
StyleFilePath آدرس فایل CSS مورد استفاده SyntaxHighlighter است.

شیوه کار این کد به این صورت هست که با استفاده از لیست زبانهای قابل استفاده، در تگ های pre به جستجو می پردازد و در صورت یافتن، اسکریپت مربوط به آن زبان را به صفحه اضافه می کند.
تنها نکته مهمی که وجود داره عدم استفاده از $(document).ready() مربوط به JQuery هست. به این علت که این تکه کد مقداری اسکریپت در صفحه درج می کند و زمان وقوع رویداد ready کد html کامل دریافت شده است و درج مجدد یک اسکریپت جدید باعث refresh شده صفحه و از دست رفتن ظاهر اون میشه.

موفق باشید

• مطالب مرتبط
• تعریف ویژگی ها (Properties) در جاوا اسکریپت
• بررسی فعال بودن Javascript در ASP.NET
• راهنمای کامل توابع JQuery و MooTools به صورت CHM 

راهنمای کامل توابع JQuery و MooTools به صورت CHM

در زیر لینک دانلود مرجع کامل توابع اصلی JQuery همراه با توابع UI رو گذاشتم. حجم فایل 184 کیلوبایت و در فرمت chm هست.

برای آشنایی با JQuery می تونید به این پست و این پست آقای امیر عباس مراجعه کنید.

به روز رسانی 7 بهمن: JQuery 1.3  لینک دانلود

JQuery 1.2.1  لینک دانلود 1
JQuery 1.2.1  لینک دانلود 2

این هم لینک دریافت مرجع توابع کتابخانه MooTools:

MooTools لینک دانلود:

http://www.adrive.com/public/15c1ff4378301e96b18a9a56a1fa591f4ec46972ba49a5b5ad2ab0126e5570c5.html

منبع: http://charupload.wordpress.com/2007/12/07/jquery-documentation-chm

ویژگیهای جدید در CSS 3 بخش دوم

این مقاله ادامه مقاله بخش اول هست که به بررسی ویژگی های جدید در CSS 3 می پردازیم.

تعدادی از ویژگی ها با صورت لیست وار

بخش اول

• Selector ها - انتخاب کننده های عناصر
• text-shadow – سایه در زیر متن
• border-image – تصاویر برای حاشیه عناصر
• border-radius – خمیده کردن حاشیه عناصر
• box-shadow – سایه در زیر یک کادر
• text-overflow – از محدوده خارج شدن متن
• word-wrap – خط شکن در متون طولانی
• resize – قابلیت تغییر اندازه کادر ها توسط کاربر
• outline – خطوط پیرامون اشیا

بخش دوم

• @page – انتخابگرهای صفحه
• multiple backgrounds - چندین زمینه برای اشیا
• background-origin و background-clip – تعیین محدوده و موقعیت به صورت پیشرفته برای پس زمینه ها
• Opacity – تعیین شفافیت یا آلفای یک شیئ
• رنگهای HSL و HSLA و RGBA
• Multi-column – چند سطونی کردن متون
• Web fonts – فونت های سفارشی برای سایت
• Speech - برای تعیین نحوه خواندن متون توسط نرم افزار

توضیح پیرامون ویژگی های فوق در بخش دوم

انتخابگر @page

ویژگی که در CSS 3 تغییر زیادی کرده انتخابگر page@ هست. این نوع انتخابگر ها با نام media شناخته می شن و با کارکتر @ مشخص میشوند. چون این موارد هنوز تکمیل نشده است و احتمال تغییر در اونها خیلی زیاده در موردشون توضیح نمی دم اما برای اطلاعات بیشتر می تونید به اینجا مراجعه کنید: http://www.w3.org/TR/css3-mediaqueries

انتخابگر مورد نظر من که خیلی جالب هست page@ هست. این انتخابگر یا selector این قدرت رو میده که به صفحه به صورت تکه تکه استیل تعیین کنید. نحوه کار این ویژگی اینطور هست که صفحه را به چندین قسمت تقسیم کرده و امکان تنظیم ویژگی های css رو به آنها میده. در تصویر زیر می بینید که صفحه به چندین قیمت تقسیم شده و سه قسمت از راست پر رنگ نشان داده شده اند:

CSS3 Paged Media Margin Boxes

به این کد توجه کنید

@page {
size: 8.5in 11in;
margin: 10%;

@right-top {
content: “Hamlet”;
}
@right-middle {
content: “Page ” counter(page);
}
@right-bottom {
font-size: 14pt;
}
}

در این کد ابتدا صفحه به عنوان یک مدیا در نظر گرفته میشه و سپس طول 8.5 اینچ و ارتفاع 11 اینج و مقدار margin 10 درصد از کل صفحه داده میشه. در انتخابگر بعدی قسمت بالا راست right-top از صفحه انتخاب شده و متن اون Hamlet قرار داده میشه. همونطور که میبینید امکان تعریف تو در توی انتخابگر های مدیا وجود داره. بخش های بعدی هم right-middle برای سمت راست وسط و right-bottom برای راست پایین هستند.

قسمت هایی که قابل استفاده هستند و در شکل بالا با نقطه چین نمایش داده شد اند شامل موارد زیر هستند:

top-left-corner, top-left, top-center, top-right, top-right-corner, left-top, left-middle, left-bottom, right-top, right-middle, right-bottom, bottom-left-corner, bottom-left, bottom-center, bottom-right, bottom-right-corner

اطلاعات بیشتر: http://www.w3.org/TR/css3-page

multiple backgrounds

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

امکان تنظیم چندین پس زمینه برای من یک آرزو بود تا زمانی که این ویژگی رو تو CSS 3 دیدم. تصور اینکه چه قدرتی این ویژگی به شما خواهد دور از انتظار هست. پس برای اینکه گوشه ای از قدرت این ویژگی رو ببینید به تصویر زیر نگاه کنید:

Multiple backgrounds

در آدرس: http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html

البته در حال حاظر فقط مرورگر safari امکان نمایش چندین پس زمینه را دارد.

تو این صفحه فقط به یک تگ div برای تنظیم زمینه پس زمینه داده شده است! در ضمن از هیچ تگ اضافه هم استفاده نشده است.

background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg)  top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

اطلاعات بیشتر: http://www.w3.org/TR/css3-background/#the-background-image

background-origin

این ویژگی موقعیت اعمال ویژگی موقعیت یا background-position را تحت تاثیر قرار میده و موقعیت کلی را تغییر می دهد.

این ویژگی سه مقدار می گیرد که border، padding و content هستند. در صورت انتخاب padding موقعیت یا position با توجه گوشه بالایی سمت چپ ویژگی padding شیئ در نظر گرفته خواهد شد. در صورت انتخاب border موقعیت با توجه به گوشه بالایی سمت چپ ویژگی border شیئ در نظر گرفته خواهد شد و در صورت انتخاب content موقعیت با توجه به گوشه بالایی سمت چپ محتویات یا متن داخل شئ در نظر گرفته خواهد شد.

برای دیدن نمونه به تصویر بعدی نگاه کنید.

background-clip

این ویزگی تعیین می کند اعمال ویژگیهای پس زمینه در قسمت حاشیه به چه صورت باشد. این ویژگی دو مقدار می گیرد که اولی border هست و تایین می کند اعمال پس زمینه فقط تا border ادامه داشته باشد. مقدار دوم padding هست که مشخص می کند که اعمال پس زمینه تا ناحیه Padding باشد.

ویژگی های background-clip و background-origin در تصویر زیر مشخص شده اند.

در تصویر زیر در سطر اول برای background-clip مقدار border و در سطر دوم مقدار padding انتخاب شده است.
همچنین برای ویژگی background-clip ردیف اول اعمال مقدار border ردیف دوم padding و ردیف سوم content را نشان می دهد.

background origin and clip

اطلاعات بیشتر: http://www.w3.org/TR/2005/WD-css3-background-20050216

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

رنگهای HSL و HSLA و RGBA
امکان انتخاب رنگ ها را طیف رنگهای مختلف میدهد. در گذشته باید زنگها حتما در استاندارد RGB رنگ انتخاب میشد.

برای مطالعه پیرامون Opacity و رنگها به این مقاله مراجعه کنید: A brief introduction to Opacity and RGBA

Multi-column
ویژگی جالب دیگری که اضافه شده امکان ستون بندی متون است. این ستون یندی به دو صورت قابل تعریف است؛ اولی با تعیین عرض برای هر ستون و دومی با تعریف تعداد ستون ها.
در حال حاضر این ویژگی به طور غیر رسمی توسط مرورگرها FireFox و Safari پشتیبانی می شود.

FireFox
-moz-column-width: 13em;
-moz-column-gap: 1em;

Safari
-webkit-column-width: 13em;
-webkit-column-gap: 1em;

توضیحات کامل: http://www.w3.org/TR/css3-multicol

Web fonts

امکان تغییر فونت های سایت به فونت هایی سفارشی را می دهد.

تغییر دادن فونت های سایت به فوت سفارشی ویژگی کاملا جدیدی نیست و توسط IE 5 پشتیبانی شده بود. ولی به این علت که نوع فونتی که مورد استفاده قرار می گرفت (Embedded Open Type .eot) مورد استقبال سایر مرورگر ها قرار نگرفت؛ تا الان که به صورت استاندارد درآمده است.
در حال حاظر امکان استفاده از فونت های TrueType .ttf و OpenType .otf باید توسط مرورگر ها فراهم شود. نکته ای که در اینجا مهم است لایسنس داشتن فونت ها است.
اعمال فونت های سفارشی توسط ویژگی @font-face فراهم شده است.

@font-face {
font-family: Delicious;
src: url(‘Delicious-Roman.otf’);
}

جالب است بدانید که یکی از دلایل عقب افتادن عرضه FireFox 3.1 پیاده سازی این ویژگی است.

نمونه اعمال شده: http://www.css3.info/preview/web-fonts-with-font-face
توضیحات کامل: http://www.w3.org/TR/css3-webfonts/#font-descriptions

Speech
Speech یا خواندن متون توسط نرم افزار ویزگی جدیدی در Css 3 نیست ولی دچار تغییرات زیادی شده است. این دسته از ویژگی ها امکان تعیین سرعت، کلفتی صدا، جنسیت خواننده و .. را می دهد.
این ویزگی ها این امکان را به شما می دهد که در زمانی که خسته هستید به چشمان خود استراحت دهید تا نرم افزار برای شما متون را بخواند.
در میان مرورگر ها، مرورگر Opera از چندین نسخه قیلی این ویژگی را دارا می باشد که متون را بخواند، ولی در حالت عادی این امکان در ان غیر فعال است و برای فعال کردن آن باید بسته مربوطه را دریافت و نصب نمایید.

توضیحات کامل: http://www.w3.org/TR/css3-speech