جعبه ابزار

jQuery Plugins

me — Tue, 09 Mar 2010 16:05:00 +0300

پلاگین در جی کوئری

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

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

تبلیغات: سفارش خرید The Smashing Book در ایران؛ کلیک کنید.

استفاده از پلاگین در jQuery
استفاده از پلاگین‌ها در جی‌کوئری بسیار ساده هست و می‌توان آن را مرحله به مرحله به صورت زیر نشون داد:

1. پیدا کردن پلاگین مورد نظر با استفاده از جستجو در سایت پلاگین‌های جی‌کوئری و یا در سرچ انجین‌های اینترنت مثل بینگ و گوگل و یاهو.

2. دانلود کردن فایل js مربوط به پلاگین. توجه کنید در برخی موارد ممکن است این پلاگین در یک CDN پیوست شده باشه و دیگر نیازی با دانلود کردن اون نیست و فقط باید از آدرس اینترنتی اون CDN استفاده کنید. (در مورد CDN بیشتر بخوانید.)

3. اضافه کردن پلاگین به سورس html با استفاده از تگ <script>. دقت کنید که این پلاگین بعد از کتابخونه اصلی jQuery به سورس اضافه بشه.

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

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

پلاگین فید خوان
در پست قبلی دیدید که چگونه با استفاده از یک API از گوگل، تونستیم RSS Feed سایت دیگری را به JSONP تبدیل کرده و با jQuery بخوانیم. در ادامه پلاگینی معرفی میشه که فقط کافی هست اون رو در سورس html اضافه کرده و با دستورالعملی که در ادامه خواهید دید، از اون در خواندن فید های دیگر استفاده کنید.

نسخه اصلی این پلاگین که jGFeed نام داره رو میتونید از آدرس اصلی سازنده اون دانلود کنید. البته شما میتونید این پلاگین رو بعد از اعمال یک سری تغییرات برای Error Handling بهتر و استفاده ساده تر، از سایت جعبه ابزار دانلود کنید. برای دانلود این پلاگین، روی لینک زیر کلیک کنید و فایل دانلود شده را از حالت زیپ خارج کنید.
پلاگین فیدخوان برای جی‌کوئری، بر اساس پلاگین اصلی jGFeed

سپس این پلاگین را به همراه کتابخونه اصلی jQuery در سورس html اضافه کنید. مثال پست قبلی رو با استفاده از پلاگین، به صورت زیر تغییر بدید: (در این مثال از RSS Feed مربوط به سایت iDevCenter برای پیشفرض استفاده شده‌است.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>jQuery Feed Reader Plugin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="jgfeed.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
    $("#getfeed").click(function() {
        $("#feeds").text("loading...");
        var feedcount =4 ;
        $.jGFeed($("#feedinput").val(), feedcount, function(feeds){
              // کنترل خطا
            if(!feeds){
                // خطایی رخ داده
                $("#feeds").html("ERROR!");
                return false;
            }
            // اطلاعات فید به درستی برگشت داده شده
            var webtitle;//Website title
            webtitle = feeds.title;
            var weblink;//Website Link
            weblink = feeds.link;
            $("#feeds").html("<div><b><a href=\"" + weblink + "\">" + webtitle + "</a></b></div>");
            for(var i=0; i<feeds.entries.length; i++){
                var entry = feeds.entries[i];
                $("#feeds").append("<div><a href=\"" + entry.link + "\">" + entry.title + "</a></div>" );
            }

});
});
});
</script>
<div>
<input id="feedinput" style="width:300px;" type="text"
value="http://www.idevcenter.com/links/upcoming/feed/"/>
<br />
<input type="button" value="Load" id="getfeed" />
<hr />
<div id="feeds"></div>
</div>
</body>
</html>

در این مثال از Google CDN استفاده شده (در مورد CDN بیشتر بخوانید.) و فایل پلاگین jgfeed.js هم بعد از آن به سورس اضافه شده. اگر در مثال دقت کنید، از دستور jGFeed استفاده شده که در واقع این دستور از پلاگین به کد جی‌کوئری ارسال میشود.

برای اینکه سادگی استفاده از پلاگین رو ببینید، به کد زیر دقت کنید که تنها نشان دهنده استفاده از پلاگین هست:

$.jGFeed(feedurl, feedcount, function(feeds){
// کنترل خطا در متغیر و خواندن و نوشتن آن
}

در واقع در مثالی که زده شد، برنامه کامل نوشته شد، اما اصل قضیه دستور jGFeed هست که به آن 2 مقدار آدرس فید و تعداد فید رو پاس میدیم و این پلاگین به ما مقدار feeds رو برمیگردونه. اگر feeds برابر false باشد یعنی خطایی رخ داده، مثلا آدرس فید اشتباه است.

اگر مقدار feeds برابر false نباشد، بنابراین حاوی فید مورد نظر به فرمت JSON هست که میتوان آن را به هر شکل و فرمتی خواند و نوشت که یک نمونه آن در کد بالا گفته شد. در واقع، انتظار نداشته باشید با استفاده از پلاگین، از نوشتن کد جی‌کوئری بی‌نیاز هستید. می‌بینید که در این مثال بعد از استفاده از پلاگین حدود 15 خط دستورات JQuery نوشته شده. البته پلاگین مربوط به این مثال، یک نمونه ساده بود و برخی پلاگین‌ها کدهای بسیار سنگینی دارند که فوق العاده کار رو راحت تر و سریعتر میکنند.

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

jQuery Cross Domain RSS Reader

me — Sun, 28 Feb 2010 16:19:34 +0300

خواندن آر اِس اِس فید سایتهای دیگر با استفاده از جی کوئری

در سری مطالب قبلی، چگونگی استفاده از فرمت XML و متد JSONP برای خواندن فایلهای موجود در سایتهای دیگر از طریق جاوا اسکریپت را دیدیم. برای کار با JSONP نیاز هست که سرور مورد نظر از این روش پشتیبانی کند. حالا فرض کنید می‌خواهید RSS Feed سایتهای انتخاب شده رو در وبلاگ یا وب‌سایت خودتون نشون بدید. البته با استفاده از جاوا اسکریپت در سمت کلاینت!

به صورت مستقیم نمیتونید آدرس یک RSS Feed را در صفحه خود بخوانید مگر اینکه اون فید، مربوط به دامین خودتون باشه. در اکثر موارد هم سایتهای مختلف برای تشکیل خروجی RSS خودشون از JSONP پشتیبانی نمیکنند. پس چه باید کرد؟

تبلیغات: سفارش خرید The Smashing Book در ایران؛ کلیک کنید.

ارسال درخواست به سایتها و دامین‌های دیگر از طرف برنامه نویسی سمت سرور مثل ASP.Net مشکلات حالت جاوا اسکریپت را ندارد و محدود نیست. بنابراین برای خواندن RSS های دیگران، میتوانیم با برنامه سمت سرور، آنها را بخوانیم و سپس مطالب خوانده شده را به سمت کلاینت منتقل کنیم. در واقع در این روش، از سایت خود به عنوان یک واسطه بین جاوااسکریپت و سایت مورد نظر استفاده میکنیم و در سمت کلاینت، فرمت XML را که از سرور و دامین خودمان رسیده میخوانیم، بنابراین دیگر محدودیت Cross Domain وجود ندارد.

علاوه بر روش بالا، میتوان از Google API هم استفاده کرد. یکی از API های گوگل، فید خوان گوگل هست که در واقع یک پیوندی هست بین شما و RSS Feed سایت مورد نظر؛ یعنی همان کار واسطه را انجام میدهد. کاری که API فید خوان گوگل انجام میدهد بسیار مورد پسند jQuery هست چرا که از JSONP پشتیبانی میکند و فقط کافیست به آدرس مشخص شده از این API، از جی کوئری یک درخواست getJSON داده شود تا گوگل فید را در سرور خودش خوانده و نتیجه را با فرمت JSON برای ما می‌فرستد.

برای استفاده از این API فقط کافیست یک درخواست به آدرس زیر فرستاده شود. به جای آدرس فید نوشته شده، شما هر آدرسی که بنویسید، فید مورد نظر را با فرمت تبدیل شده به JSON تحویل میگیرید. برای تعیین تعداد فیدهای برگشتی هم باید متغیر num رو تغییر بدید. در این مطلب، از RSS Feed سایت iDevCenter، قسمت لینکهای تازه ارسال شده، برای مثال استفاده میشه و درخواست 2 مقدار شده است:

http://ajax.googleapis.com/ajax/services/feed/load?
v=1.0&callback=?&q=http://www.idevcenter.com/links/upcoming/feed/&num=2

این آدرس رو اگر در مرورگر خودتون بنویسید، پیغام خطا میگیرید. چون برای تابع برگشتی JSONP اسم تعیین نشده (متغیر callback) و به جای آن ؟ گذاشته شده. به جای علامت سوال، هر اسمی که دوست دارید بنویسید و نتیجه رو مشاهده کنید. این که چرا از ؟ استفاده میشه، در ادامه متوجه خواهید شد.

حالا با jQuery یک درخواست به این آدرس میدهیم. در جی‌کوئری تابع getJSON برای گرفتن پاسخ به فرمت JSON استفاده میشود به این صورت که آدرس مورد نظر را به آن پاس داده و نامی برای تابع برگشتی از JSONP تعیین نمیکنیم (callback) و علامت سوال ؟ به جای آن میگذاریم. علت استفاده از ؟ این است که برای سادگی کار، خود jQuery در هر درخواستی که ارسال میکند یک نام به صورت تصادفی برای این تابع انتخاب کند و ما دیگر درگیر نام تابع نشویم.

برای خواندن این تابع، چون نام آن را نمیدونیم، از این روش استفاده میشه که در خود getJSON یک تابع را به صورت داینامیک و بدون اسم تعریف کرده و برای آن یک ورودی در نظر میگیریم. به این صورت، جی‌کوئری خودش میاد یه تابع با اسم رندوم درست میکنه، اون رو به جای ؟ پاس میده و بعد تابع برگشتی رو مرتبط میکنه با این تابع بدون اسمی که نوشتیم و مقدار بازگشتی با فرمت JSON به ورودی این تابع پاس داده میشه:

var googleapi = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&";
var feedurl = "http://www.idevcenter.com/links/upcoming/feed/";
var num = 2
var fullurl = googleapi + "q=" + feedurl + "&num=" + num;
$.getJSON(fullurl, function(data){

//data is the RSS Feed converted to JSON
}

یک نمونه فرمت JSON رو که از گوگل API برمیگرده و توسط jQuery در متغیر data قرار داده میشه، در کد زیر ببینید. به نام تابع که به صورت رندوم توسط jQuery ایجاد شده دقت کنید.

jsonp1267359064813(
    {"responseData":
        {"feed":
            {"title":"iDevCenter Upcoming Links",
             "link":"http://www.idevcenter.com/links/upcoming/",
             "entries":[
                 {
                  "title":"\u202bسیستم\u200cهای متن\u200cباز مشابه StackOverflow",
                  "link":"http://www.idevcenter.com/link/1156/",
                  "author":"lajevardi",
                  "publishedDate":"Fri, 26 Feb 2010 03:19:08 -0800"
                 },
                 {
                  "title":"\u202bطراحی برنامه یا سایت تحت وب با استفاده از فونت های ویندوز",
                  "link":"http://www.idevcenter.com/link/1153/",
                  "author":"hajloo",
                  "publishedDate":"Thu, 25 Feb 2010 00:34:11 -0800"
                }
             ]
            }
        },
        "responseDetails": null,
        "responseStatus": 200
    }
)

هر چه که داخل تابع jsonp1267359064813 برمیگردد، توسط جی کوئری، به متغیر data که در تابع getJSON معرفی کردیم، پاس داده می‌شود. مقدار data در واقع همون RSS Feed سایت idevcenter هست که توسط سویس گوگل به JSON تبدیل میشه و به تابع ما پاس داده میشه. بنابراین در حال حاضر، اطلاعاتی که نیاز داشتیم رو داریم، حالا باید اون رو بخونیم و در صفحه بنویسیم.

خوندن فرمت JSON در جاوااسکریپت خیلی ساده هست. فقط کافیه ساختار درختی JSON رو شناسایی کنید و سپس به صورت سلسله مراتبی، به قسمت های مختلفش دست پیدا کنید. مثلا برای رسیدن به آدرس وب سایت مربوط به فید، باید این مسیر را طی کنید: responseData.feed.link و برای رسیدن به عنوان مورد دوم در فید ها به این صورت responseData.feed.entries[1].title عمل میکنیم.

در JSON آرایه ها در [ ] قرار میگیرند و entries هم یک آرایه از فید های سایت هست که در این مثال تعداد 2 فید برگشت داده شده است. برای بیشتر شدن فید های ارسالی، مقدار num را در API گوگل تغییر بدهید. برای خواندن entries از یک حلقه for استفاده میکنیم و مقادیر هر فید رو در قسمتی از html که تعیین کردیم مینویسیم.

for(var i=0; i<responseData.feed.entries.length; i++){
    var entry = responseData.feed.entries[i];
    var feedtitle = entry.title;
    var feedlink= entry.link;
    var feeddate= entry.publishedDate;
    // add variables to html

}

در مدل کار ما، تمامی این اطلاعات با فرمت JSON داخل متغیر data ریخته میشود. بنابراین شروع ساختار JSON از data میشود. در زیر کد کامل این مثال رو میتونید ببینید. در این مثال، از Google CDN برای استفاده از JQuery استفاده شده. (در مورد CDN بیشتر بخوانید)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>jQuery RSS Reader</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>

<body>
<script type="text/javascript">
$(function() {
    var googleapi = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&";
    var feedurl = "http://www.idevcenter.com/links/upcoming/feed/";
    var num = 5
    var fullurl = googleapi + "q=" + feedurl + "&num=" + num;
    $.getJSON(fullurl, function(data){
        //Website title
        var webtitle;
        webtitle = data.responseData.feed.title;
        //Website Link
        var weblink;
        weblink = data.responseData.feed.link;

        $("#feeds").html("<div><b><a href=\"" + weblink + "\">" + webtitle + "</a></b></div>");
        for(var i=0; i<data.responseData.feed.entries.length; i++){
            var entry = data.responseData.feed.entries[i];
            $("#feeds").append("<div><a href=\"" + entry.link + "\">" + entry.title + "</a></div>" );
        }
    });

});
</script>

</body>

</html>

Cross Domain Javascript

me — Wed, 24 Feb 2010 15:42:39 +0300

ایجاد ارتباط در وب از طریق جاوا اسکریپت بین دامین‌های متفاوت

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

مثلا اگر در صفحه mytoolbox.ir/blog/FeedReader.html با استفاده از جاوا اسکریپت و ای‌جکس، درخواستی برای msn.com/test/test.xml بفرستیم، پیغام خطا برای مرورگر ما برگشت خواهد خورد با این عنوان که اجازه دسترسی به text.xml را در دامین msn.com نداریم و از FeedReader.html فقط میتوان به فایلهای XML موجود در آدرس mytoolbox.ir بدون پیغام خطا، درخواست داد.

تبلیغات: سفارش خرید The Smashing Book در ایران؛ کلیک کنید.

در شکل زیر، همونطور که مشخص شده، یک فایل در آدرس localhost اجرا شده و درخواستی رو برای mytoolbox.ir فرستاده؛ این ارتباط موفقیت آمیز بوده (200 OK) اما هیچ اطلاعاتی به localhost فرستاده نمیشود و در واقع یک فایل xml خالی فرستاده شده که کلاینت هم در خوندن اون دچار مشکل شده و پیغام خطا میده که چیزی در فایل درخواستی نیست.

همونطور که میدونید، RSS Feed هم به فرمت XML هست. بنابراین اگر بخواهیم فید وبسایت و یا وبلاگ دیگری را در سایت خودمون به کتر ببریم، با توجه به محدودیت فوق، این کار امکان پذیر نیست. قبل‌تر در جعبه ابزار نحوه خواندن فایلهای XML با جی‌کوئری را دیدید (تجزیه و تحلیل ایکس اِم اِل در جی‌کوئری). همونطور که اونجا هم اشاره شد، این روش برای وقتی هست که فایل XML روی سرور خود شما قرار گرفته باشد.

بر خلاف حالت کلاینت ساید، ارسال درخواست به سرورهای دیگر از طریق برنامه نویسی سمت سرور مثل ASP.Net و PHP، هیچ مشکلی ندارد و در صورت اجازه دسترسی به منابع سایتی مکه به آن درخواست میدهیم، پاسخ مناسب به سرور ما خواهد رسید. بنابریان به صورت سرورساید به سادگی و بدون مشکل می‌شود RSS سایتهای دیگر رو خواند و استفاده کرد.

اهمیت استفاده از جاوا اسکریپت و AJAX (بخوانیم ای جکس!) در طراحی های مدرن و به اصطلاح Web2.0 برخی مواقع شما رو مجبور می‌کنه که از تکنیکی برای خواندن فید و XML در کلاینت استفاده کنید. برای این کار، روشی به اسم JSONP ابداع شده است.

JSONP چیست؟
با توجه به مطالب بالا فهمیدیم که domain1 نمی‌تواند با domain2 انتقال اطلاعات در جاوا اسکریپت داشته باشد. اما آیا به این فکر نیوفتادید که پس CDN ها چطور کار میکنند؟ (در مورد CDN بیشتر بدانید.) در محدودیت ارتباط مرورگرها یک استثنا وجود داره و اون هم تگ اسکریپت <script> هست. تگ اسکریپت میتواند توسط src به یک فایل در دامین دیگری اشاره کند و آن فایل را بخواند.

بنابراین از همین روش میتوان محدودیت موجود را دور زد. سناریوی زیر را بخاونید تا کامل متوجه موضوع شوید؛ در این متن، mytoolbox.ir میخواهد با جاوا اسکریپت، RSS Feed سایت msn.com را بخواند:

اول: سایت msn.com یک آدرس رو معرفی میکند مثلا msn.com/feed/load.aspx و آن را در اختیار اشخاصی قرار میدهد که قصد دارند با جاوااسکریپت به فید دسترسی داشته باشند. پاسخ این فایل، همان مقادیر فید به صورت متنی خواهد بود.
دوم: سایت mytoolbox.ir آدرس فوق را در یک تگ اسکریپت به کار می‌برد به این صورت:

طرح مشکل: در حال حاضر، با اجرای صفحه حاوی اسکریپت، فید از سایت msn.com دانلود میشود اما چگونه باید به آن دسترسی داشته باشیم؟ در جاوا اسکریپت برای گرفتن مقادیر لود شده از یک فایل دیگر، باید از AJAX استفاده کنیم. اما دیدیم که در این مورد با AJAX اجازه نداریم این کار را بکنیم، پس با تکنیک کنونی باید چه کرد؟

راه حل: برای رفع این مشکل، msn.com اطلاعات خودش را به صورت یک تابع جاوااسکریپت برمی‌گرداند. یعنی در این مثال، اگر load.aspx را در مرورگر اینترتی ببینیم، به صورت زیر هست: (دقت کنید این مثال به صورت شماتیک قصد دارد موضوع رو بیان کند، بنابراین فرمت اطلاعات برگشتی خارج از بحث میباشد و فقط به صورت شماتیک data مینویسیم.)

ReadData("data data data ...")

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

سوم: تعریف تابع بازگشتی از msn.com در صفحه مورد نظر در mytoolbox.ir :

حالا وقتی اطالاعات از سرور msn.com لود شد، در واقع تابع ReadData صدا زده میشود که در آن گفته‌ایم مثلا این فید ارسالی را با فلان فرمت در فلان جای صفحه بنویسد. بدین ترتیب مشکل خواندن از دامین های دیگر، به این صورت حل می‌شود. به این مدل JSONP گفته میشود.

چرا به اسمِ JSONP ؟
در انتقال اطلاعات بین منابع مختلف، یکی از فرمتهای رایج XML هست، اما فرمت و ساختارهای دیگری هم وجود دارد. یکی از این فرمت ها که بسیار هم طرفداران پیدا کرده و روز به روز رواج بیشتری پبدا میکنه، فرمت JSON هست. این فرمت بیشتر در انتقال اطلاعات بین یک زبان سمت سرور مثل ASP.Net و برنامه نویسی سمت کلاینت یعنی جاوا اسکریپت استفاده میشود. شاید دلیلش این باشه که خوندن JSON (تلفظ: جِی سان) در جاوا اسکریپت خیلی ساده تز خوندن XML هست و نکته بعدی اینکه حجم فایلهای JSON در اکثر موارد مخصوصا زمانی که اطلاعات در حال انتقال حجم زیادی داشته باشند، نسبت به فرمت XML، کم حجم تر هست. (در مورد JSON بیشتر بدانید)
نمونه کد JSON بازگشتی از تکنیک JSONP به صورت زیر می‌باشد. دقت کنید که کد اصلی JSON از خط دوم شروع میشود و myfunc نام تابع جاوا اسکریپت هست.

myfunc(
      {
        "wesbite":"http://mytoolbox.ir",
        "language":"Persian",
        "post": {
           "title":"Cross Domain Javascript",
           "date":"25 Feb 2010"
        }
      }
);

تکنیک ذکر شده برای ایجاد ارتباط بین دامین های مختلف در سمت کلاینت، اولین بار که مطرح شد در مورد انتقال اطلاعات در فرمت JSON بود که توسط سرویس های یاهو استفاده شد. برای همین اسم این روش رو هم JSON with Padding و به اختصار JSONP نامیده شد. و البته این تکنیک با هر فرمتی میتونه اعمال شه چرا که در روش پیاده سازی این تکنیک، هیچ محدودیتی برای اطلاعات منتقل شده وجود ندارد، چه XML باشد چه JSON چه یک خط متن!

به دلیل استفاده سرویس‌های بزرگ در اینترنت از فرمت JSON در انتقال اطلاعات به وسیله API های خودشون، تقریبا این فرمت در حال همه گیر شدن هست و یه جورایی داره استاندارد میشه و البته شخصا عقیده ندارم که JSON بتونه جای XML رو بگیره. حداقل اینکه مایکروسافت همچنان از فرمت XML در سرویس‌های دات نت مثل WCF و XAML استفاده میکنه.

کتابخونه jQuery برای سهولت کار، از JSONP پشتیبانی می‌کند و شما نیازی نیست به صورت دستی اقدام به پیاده سازی تکنیک ذکر شده در این مطلب، کنید. در مورد نحوه استفاده از JSONP در jQuery در مطالب آینده جعبه ابزار خواهم نوشت.

مطلب آخر این که توجه کنید، برای استفاده از تکنیک JSONP، سروری که شما به آن درخواست میفرستید، باید از این تکنیک پشتیبانی کنه وگرنه سروری که به اون درخواست داده‌ایم اگر منظور ما رو از درخواست JSONP متوجه نشود، پاسخ مناسب رو به ما نخواهد داد. از کجا بفهمیم از JSONP پشتیبانی میکند؟ در 99% موارد میشه گفت اگر سرویسی پاسخ خود به درخواست رسیده رو به فرمت JSON بدهد، از JSONP پشتیبانی میکند.

*این مطالب از خودم میباشد! اگر در اون مورد اشتباهی میبینید، ممنون میشم که اعلام کنید و استفاده از این مطلب آزاد هست و اگر دوست دارید با انصاف باشید، منبع رو هم ذکر کنید.

Parse XML in jQuery

me — Sat, 20 Feb 2010 16:57:36 +0300

تجزیه و تحلیل ایکس اِم اِل در جی‌کوئری

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

یکی از بارزترین مثالهایی که میشه از استفاده از فرمت XML در انتقال اطلاعات دنیای وب، عنوان کرد، RSS Feed هست. RSS در واقع شکلی از XML به همراه ساختار استاندارد و ثابت می‌باشد که همین تعریف ساختار یکسان برای اون باعث میشه تا کاربردپذیری اون در وب بسیار بالا باشه. مثلا شما اگر یک برنامه بنویسید که RSS Feed یک سایت رو بخونه، میتونید مطمئن باشید که این برنامه شما هر RSS Feed رو میتونه بخونه چون ساختار این فایلها یکسان هستند.

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

راه اول استفاده از برنامه‌نویسی سمت سرور برای سایت شماست. برای این کار شما اول نیاز به داشتن دسترسی به سورس سایت و هاست سایت دارید. بعد از فراهم شدن این امکانات، میتوانید RSS وبلاگ را از طریق برنامه نویسی سمت سرور مثلا با استفاده از تکنیک Linq to XML خوانده و به شکل دلخواه بنویسید.

در حالتی که امکانات بیشتری نیاز دارید، باید با ساختار دیتابیس وبلاگ و یا نحوه دسترسی به اطلاعات اون رو از طریق کدنویسی آشنا باشید. مثلا با ASP.Net از دیتابیس وبلاگ (و یا لایه دیتا و یا هر الگوی دیگری که در کدنویسی دارید) پست های آخر رو بخونید و اونها رو توسط مثلا یک Repeater در وب فرم خودتون قرار بدید. مثلا شما از بلاگ انجین دات نت و یا وردپرس برای وبلاگ شرکت در کنار سایت اصلی اون، استفاده کرده‌اید. برای اینکه در سمت سرور بتونید به پست های وردپرس دسترسی داشته باشید، نیاز به شناخت از API وردپرس و یا هر سیستمی که از اون استفاده کردید، دارید.

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

خواندن XML در jQuery

همونطور که اشاره شد، RSS هم از فرمت XML استفاده میکنه، پس نحوه خواندن XML در jQuery ، خواندن RSS هم در برمیگیره. خواندن فایلهای XML در jQuery بر خلاف جاوا اسکریپت معمولی، بسیار ساده هست. فایل info.xml را به صورت زیر را در نظر بگیرید:

<?xml version="1.0" encoding="UTF-8"?>
<products>
    <product>
        <productname>Product one</productname>
        <productprice>100</productprice>
    </product>
    <product>
        <productname>Product two</productname>
        <productprice>200</productprice>
    </product>
    <product>
        <productname>Product three</productname>
        <productprice>300</productprice>
    </product>
</products>

برای خواندن مطالب این فایل، ابتدا نیاز به دسترسی به این فایل رو داریم. بنابراین یک درخواست برای دسترسی به این فایل به سرور ارسال میکنیم؛ البته document.ready که نشان دهنده آغاز jQuery هست رو فراموش نمی‌کنیم:

$(document).ready(function() {

   $.ajax({
      type: "GET",
      url: "info.xml",
      dataType: "xml",
      success: ReadXML
   });

});

با استفاده از دستور ajax در jQuery، درخواستی را به سرور ارسال می‌کنیم تا فایلی که در url مشخص شده است به ما بازگرداند. چون اطلاعاتی را به سرور منتقل نمیکنیم و هدف فقط خواندن هست از متد GET استفاده کرده و نوع مقدار بازگشتی هم که xml هست، توسط dataType مشخص می‌کنیم و نکته مهم اینکه باید به jQuery، تابعی که قرار است اطلاعات رسیده از سرور رو تجزیه تحلیل کنه، معرفی کنیم. در این مثال، فایل info.xml از سرور گرفته میشود و اطلاعات داخل آن به تابع ReadXML پاس داده می‌شود.

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

function ReadXML(xmldata) {

$(xmldata).find("product").each(function() {

          $("#fromxml").append('<p>' + 'Name: '
          + $(this).find("productname").text()
          + '<br />Price: '
          + $(this).find("productprice").text()
          + '</p>');

});
}

تابع ReadXML داری یک ورودی به اسم xmldata هست که در واقع همان مطالب info.xml هست که از طریق ajax (بخوانیم اِی‌جکس و نخوانیم آژاکس) به تابع پاس داده میشود و من هم اسم اون رو xmldata گذاشتم. شما هر اسمی خواستید بگذارید!

سادگی کار با xml در jQuery از اینجا شروع می‌شود که با استفاده از find تگ تگرار شونده رو پیدا میکنیم که در مثال ما product هست. بعد از پیدا کردن تگ تکرارشونده که در واقع همان سرفصل اطلاعات xml هستند، با استفاده از each، یک تابع را به هرکدام از این product ها که در فایل هستند نسبت می‌دهیم. تابع each را مثل یک حلقه for در برنامه‌نویسی تصور کنید که ابتدا و انتهای آن در این مثال از اولین تگ product هست تا آخرین.

سپس برای خواندن اطلاعات زیرشاخه‌های هر product باز هم از find استفاده میکنیم با نسبت دادن آن به this که this در این مثال برمی‌گردد به آبجکتی که این تابع برای آن نوشته میشود یعنی product و در نهایت با استفاده از قابلیت text مقدار داخل تگهای داخلی را میخوانیم و با استفاده از append به قسمتی از صفحه که تعیین شده، اضافه میکنیم. با استفاده از each، این پروسه برای تمامی product های موجود در فایل، تکرار میشود و در نهایت به هدف خود میرسیم.

نکته: اگر از IE استفاده میکنید، به دلایل نا معلومی، وقتی فایل html نهایی را از روی هارد خود به صورت لوکال باز میکنید، این روش جواب نمیدهد. البته اگر روی وب سرور، چه در لوکال خودتون چه روی اینترنت، امتحان کنید، همه چیز به درستی کار خواهد کرد. برای تست لوکال اگر با فایل html کار میکنید و میخواهید با اجرا کردن فایل با کلیک، کد را تست کنید از فایرفاکس استفاده کنید. اگر هم که از php یا asp و یا هر فرمت تحت سرور دیگری استفاده میکنید که خوب مجبورید فایل رو از طریق وب سرور ببینید و در این صورت اصلا مشکلی شما رو تهدید نمیکنه!

همه چیز با هم به صورت زیر خواهد شد:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Read XML with jQuery</title>
<script type="text/javascript" src="path_to_jquery"></script>
<script type="text/javascript">
$(document).ready(function() {

$("#fromxml").text("loading...");

$.ajax({
   type: "GET",
   url: "info.xml",
   dataType: "xml",
   success: ReadXML
});

function ReadXML(xmldata) {
    $("#fromxml").empty();
    $(xmldata).find("product").each(function() {
        $("#fromxml").append('<p>' + 'Name: '
        + $(this).find("productname").text()
        + '<br />Price: '
        + $(this).find("productprice").text()
        + '</p>');
    });
}

});
</script>
</head>
<body>
<div id="fromxml"></div>
</body>
</html>

اگر به کد کامل دقت کرده باشید، قبل از ارسال ajax، عبارتی در formxml نوشته میشود تا کاربر در هنگام دیدن این صفحه، متوجه شود که در قسمتی از صفحه، اطلاعاتی در حال لود شدن هست؛ و البته در نهایت، در تابع ReadXML یعنی وقتی که پاسخ درخواست رسیده است، اول formxml زا با استفاده از روش empty خالی میکنیم و سپس اطلاعات خوانده شده و به شکل دلخواه درآمده را در آن قسمت اضافه میکنیم.

در ضمن برای استفاده از کتابخونه اصلی jQuery که در مثال به صورت path_to_jquery آمده است، آدرس دهی مناسب رو یا از روی فایلهای خودتان و یا از طریق CDN انجام دهید. این نکته رو برای این یادآوری کردم چون اگر همین کد را copy-paste کنید، کار نخواهد کرد :دی

به همین ترتیب می‌توان RSS را هم در قسمتی از صفحه وب اضافه کرد. تنها تفاوت با نمونه کد نوشته شده، نام تگ های موجود در RSS هست که به سادگی میتوان آن ها را در کد نوشته شده، جایگزین کرد. مثلا در RSS، تگ تکرار شونده item هست و تگ های داخلی اون هم تگ هایی مثل title، description و link هست که این تگ ها رو به سادگی با دیدن سورس RSS سایت خودتون میتونید پیدا کنید.

نکته: در جاوا اسکریپت به علت رعایت مسائل امنیتی، فقط و فقط درخواست ajax باید از فایلهای موجود در دامین مشابه با جایی که درخواست دهنده هست، صورت بپذیرد. مثلا از mytoolbox.ir نمی‌توان به styles.ir درخواست فایل RSS را توسط jQuery داد.

برای استفاده از jQuery یرای درخواست های بین دو سایت با دامین مختلف که به اصطلاح به اون Cross Domain گفته میشه، راه های دیگری وجود دارد که در پست های آینده جعبه ابزار به اونها اشاره خواهد شد؛ پس منتظر باشید.

VB.Net Extension Methods

me — Wed, 03 Feb 2010 22:02:02 +0300

توسعه و گسترش توابع و کلاسها در ویژوال بیسیک دات نت

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

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

خوب، اگه به سورس کلاس دسترسی نداشته باشیم چی؟ و یا در یک تیم برنامه نویسی، اجازه تغییر سورس کلاس‌های نوشته شده توسط بخشهای دیگه رو نداشته باشیم، یا کلا این تابع مورد نظر ما اونقدر استفاده به خصوص و شخصی داره که نیازی به وارد کردن اون در ساختار اصلی کلاس نباشه. حالا باید چه کرد؟
اگر به این فکر می‌کنید که میشه کلاس جدیدی ساخت و از کلاس مورد نظر ارث برد و متدهای جدید رو به اون اضافه کرد، بیخیال بشید. چون از هر کلاسی که نمیشه ارث پذیری داشت. ممکنه جلوی این قابلیت در کل کلاس گرفته شده باشه (NotInheritable) و یا این محدودیت در مورد برخی توابع وجود داشته باشه. خیلی دردسر داره نه؟

یک راه معمول دیگه در برنامه‌نویسی استفاده از کلاس‌های کمکی هست که به صورت Shared در VB.Net ساخته میشه (همون static دز سی شارپ). به این کلاس‌ها معمولا اسم Helper یا Utility گفته میشه چون که نقش کمکی در کدنویسی دارند و ممکن است چندین بار در یک برنامه از اونها استفاده بشه.

برای مثال نیاز به کنترل کردن آدرس ای‌‍میل وارد شده از طرف کاربر سایت هست تا ببینیم این ای‌میل درست نوشته شده یا نه؟ برای این کار یک کلاس به اسم AppUtility ایجاد می‌کنیم و یک تابع به اسم CheckEmail در اون به صورت Shared می‌سازیم:

Public Class MyUtility

Public Shared Function CheckEmail(ByVal email As String) As Boolean

Dim regex = New Regex("^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$")
Return regex.IsMatch(email)

End Function

End Class

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

Dim inputEmail = EmailTextbox.Text
If MyUtility.CheckEmail(inputEmail) Then
    'Email is valid..
    SubscribeUser()
Else
    'Email is invalid
    Throw New Exception("Email is invalid")
End If

همونطور که می‌بینید نیازی به ساختن یک آبجکت جدید از کلاس MyUtility نیست چرا که به صورت Shared تعریف شده. در کلاس MyUtility هر تعدادی از این مدل توابع که نیاز دارید می‌توانید بنویسید و از آن هر چند بار که نیاز دارید در طول برنامه، استفاده کنید.

Extension Methods
از ورژن دات نت 3 به بعد، یک قابلیت جدید با عنوان Extension Methods در همین راستا اضافه شد که کار را بسیار راحت تر کرد. با استفاده از Extension Methods شما میتوانید به هر کلاسی قابلیت های جدید رو اضافه کنید بدون اینکه به سورس و حتی ساختار اون کلاس دسترسی داشته باشید و هیچ نیازی به دوباره کامپایل کردن کلاس مورد نظر هم نیست. در واقع شما تابع مورد نظر خودتون رو نوشته و اون رو با این تکنیک وصل میکنید به کلاس مورد نظر.

برای استفاده از اکستنشن متد در VB.Net ابتدا باید یک Module بسازید. سپس باید مشخص کنید که تابع جدید را به چه نوع کلاسی میخواهید اضافه کنید؛ هر کلاسی که بود، باید اولین مقدار پاس شونده به تابع از نوع این کلاس باشد. نمونه کد زیر را ببینید:

Imports System.Runtime.CompilerServices
Public Module MyExtenstionMethods

   <Extension()> _
    Function CheckEmail(ByVal email As String) As Boolean
        Dim regex = New Regex("^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$")
        Return regex.IsMatch(email)
    End Function

    <Extension()> _
    Function MathWork(ByVal Number1 As Integer, ByVal Number2 As Integer) As Decimal
        Return (Number1 * Number2)/((Number1 + Number2)^2/3)
    End Function

End Module

در این مثال دو تابع به صورت Extension Method ساخته شده. تابع اول به اسم CheckEmail یک تابع کمکی برای کلاس String هست. چرا؟ به اولین مقدار پاس داده شده به تابع دقت کنید. متغیر email از نوع string هست. نام انتخاب شده برای email مهم نیست. چیزی که مهمه اینه که تون این متغیر از توع کلاس String هست. پس این تابع به کلاس String اضافه میشود و میتوان از آن استفاده کرد:

همونطور که در شکل میبینید، متغیر mystring از نوع String ساخته شده و امکان استفاده از تابع CheckEmail برای آن فراهم شده است. در واقع در تابع CheckEmail متغیر اول الان در واقع خود mystring می‌باشد.
و البته مشخص است که ویژوال استودیو در هنگام کدنویسی، توابع اضافه شده را هم به سیستم intellisense خودش اضافه کرده که کار را بسیار راحت میکند. به علامتی که برای توابع اکتنشن استفاده شده است دقت کنید.

تابع دوم هم برای کلاس Integer تعریف می‌کنیم تا یک عملیات ریاضی را بین دو عدد انجام دهد (زیاد روی فرمول نوشته شده فکر نکنید!). برای همین متغیر اول باید از نوع Integer تعریف شود تا این تابع به صورت خودکار به کلاس Integer اضافه شود. به این تابع میخواهیم یک عدد دیگر هم بفرستیم تا بین 2 عدد این فرمول ریاضی، یک عدد جدید را محاسبه کرده و تحویل دهد. نحوه استفاده از این اکستنشن به صورت زیر هست:

Dim FirstNumber as Integer = 22
ResultTextbox.Text = FirstNumber.MathWork(45)

در این حالت متغیر اول پاس داده شده به اکستنشن، FirstNumber یعنی عدد 20 هست و متغیر دوم هم عدد 45 میباشد. دقت کنید که Extension Method نوشته شده همواره تعداد ورودی های آن از تعداد متغیرهایی که باید هنگام کدنویسی به آن پاس دهید یکی بیشتر هست. چون متغیر اول پاس داده شده، همون آبجکتی هست که این اکستنشن رو برای کلاسش نوشتیم.

مثالی که در ابتدا با روش Helper Class نوشته شده بود را میتوان به صورت زیر نوشت:

If EmailTextbox.Text.CheckEmail Then
    'Email is valid..
    SubscribeUser()
Else
    'Email is invalid
    Throw New Exception("Email is invalid")
End If

چند نکته بسیار مهم وجود داره که اگر رعایت نکنید،ممکن هست Extension Method های شما کار نکند و برای زمان زیادی سر کار باشید:

حتما از Public Module استفاده کنید. اگر کلمه Public رو فراموش کنید، Extension Method شما کار نخواهد کزد.

نکته بعدی اینکه Imports System.Runtime.CompilerServices فراموش نشود و برای هر تابعی که میخواهید نقش Extension را بازی کند از فیلتر <Extension> همونطور که در نمونه کد می‌بینید استفاده کنید.

و در نهایت، بعد از نوشتن Module همواره حواستون باشه که ابتدا این فایل رو کامپایک کرده باشید و بعدا به سراغ استفاده از اون در قسمتهای دیگه مد بروید. اگر این کار را نکنید، ویژوال استودیو توابع اکستنشن شما رو در intellisense نمیاره. برای کامپایل کردن در ویژوال استودیو از منو Build و بعد از اون Build class name استفاده کنید.

jQuery 1.4 New Features

me — Wed, 20 Jan 2010 16:18:04 +0300

بررسی قابلیتهای جدید جی‌کوئری در ورژن 1.4

نسخه جدید jQuery که در حال حاضر یکی از پرطرفدارترین کتابخونه‌های جاوا اسکریپت هست، معرفی شده‌است. نسخه جدید یعنی ورژن 1.4 نسبت به ورژن‌های قبلی خودش، تغییرات بسیار چشمگیری داشته که اکثر اونها در جهت بهبود jQuery هستند و چندین قابلیت جدید هم به اون اضافه شده. این نسخه در CDN ها هم اکنون موجود میباشد و میتوانید از آن استفاده کنید. (در مورد CDN بیشتر بخوانید)

معرفی برخی ویژگی‌ها و امکانات جدید در jQuery 1.4

اضافه کردن چندین Event Handler در یک زمان
در نسخه‌های قبلی، اگر نیاز به نسبت دادن چندین event handler در یک خط دستور داشتیم باید اصطلاحا آنها را به صورت زنجیروار پشت سر هم مینوشتیم. مثلا:

$("p").click(fucntion() {
//do something on click event
}).mouserover(function(){
//do something on mouse over event
}).dblclick(function() {
//do something on double click event
});
});

اما در ورژن 1.4 میتوان به صورت زیر عمل کرد:

$("p").bind({
click: function() {
         // do something on click
         },
mouserover: function() {
         //do something on mouse over event
         },
dblclick: function() {
         //do something on double click event
         }
});

می‌بینید که کدنویسی به این صورت بسیار خواناتر و مدیریت آن در آینده بسیار راحت‌تر شده است و دیگر نیازی به قطار کردن توابع پشت سر هم نیست.

انتخاب نوع انیمیشن در چندین حالت مختلف
در نسخه های قبلی هنگام استفاده از تابع animate امکان مقداردهی نوع انیمیشن فقط در حالت کلی امکان داشت. مثلا اگر میخواستیم یک عکس را توسط jQuery حرکت دهیم، باید در تابع animate، مقادیر top و left آن را به طور مثال، تغییر میدادیم و نوع این حرکت یا همون easing رو به طور کلی به کل این انیمیشن اضافه میکردیم. اما در نسخه 1.4، برای هر جهت و یا هر تغییر مشخصه‌ای که برای انیمیشن معرفی کردیم، میتوانیم یک مدل انیمیشن انتخاب کنبم.

این مساله را برای مثال در اینجا ببینید.

سورس این مثال به صورت زیر است:

در این مثال از پلاگین easing استفاده شده که شما هم برای درست کار کردن این مثال باید این پلاگین رو از این آدرس دانلود کنید. خود کتابخونه jQuery فقط 2 مدل انیمیشن دارد که مقادیر آنها "swing" و "linear" هستند. با پلاگین easing که دانلود میکنید، میتونید بیشتر از 20 مدل انیمیشن داشته باشید. مثل همین 2 تایی که در مثال استفاده شده است.

دقت کنید که در ورژن های قبلی 1.4 چگونه انیمیشن فقط یک نوع دارد، اما در ورژن 1.4، در دو جهتی که مربع قرمز کوچک و بزرگ می‌شود، در هر جهت با یک مدل انیمیشن easing متفاوت که برای آن تعیین کرده‌ایم، عمل میکند.

همچنین در این مثال میبینید که از CDN گوگل برای استفاده از jQuery 1.4 استفاده شده‌است. (در مورد CDN بیشتر بخوانید)

منتظر پست‌های بعدی در مورد قابلیت‌های جدید jQuery باشید.

CSS Positioning

me — Sun, 10 Jan 2010 14:25:04 +0300

انواع قرارگیری و موقعیتهای عناصر صفحه وب در CSS

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

در CSS یک خاصیت به اسم Position وجود دارد که وظیفه دارد جای هر بخش از کد HTML ما، که در واقع همون اجزاء تشکیل دهنده صفحه وب هستند، را مشخص کند. Position میتواند 5 مقدار Static، Relative، Absolute و Fixed داشته باشد که در ادامه هرکدام توضیح داده میشود.

همجنین 4 خاصیت top،bottom،left و right نیز برای نشان دادن فاصله عناصر صفحه از 4 ضلع صفحه مرورگر، استفاده میشوند. از ترکیب این مقادیر با انواع postition میتوان جایگاه های مختلفی برای اجزاء صفحه وب ایجاد کرد.

انواع حالتهای پوزیشن در CSS به شرح زیر میباشد:

1. حالت استاتیک: Static

حالت استاتیک، مقدار پیش فرض postition میباشد و مفهومش این است که هر تگ اچ‌تی‌ام‌ال همونطور که باید، در صفحه می‌آید. در این حالت مقادیر پیش فرضی که web browser شما میداند در مورد اون تگ اعمال میکند. شما وقتی از یک تگ استفاده میکنی و در استایل اون هیچ مقداری برای position در نظر نمیگیری در واقع داری از استاتیک استفاده میکنی که بر اساس استانداردها در وب، خود web browser اون رو سر جای خودش قرار میده. بنابراین در حالت پیش فرض یا استاتیک، نیازی به تعیین فاصله از 4 جهت یعنی top،left،bottom و up نیست.

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

2. حالت مطلق: Absolute

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

دقت کنید مبدا مختصات در این حالت برای top و left، گوشه بالا سمت چپ صفحه مرورگر شما هست. (البته نیاز به توضیح نیست که برای bottom و right مبدا کدام نقطه میشود!) یعنی وقتی تعیین میکنید left:100px مفهومش این هست که در هر حالتی این تگ شما از ضلع سمت چپ مرورگر شما 100 پیکسل فاصله دارد. بنابراین در صورت تغییر سایز مرورگر شما، این تگ جایش عوض میشود و دیگر آنجایی نیست که شما مثلا در حالت maximize بودن مرورگر خودتون تنظیم کرده بودید.

این کد css را امتحان کنید تا موضوع کاملا مشخص شود:

#absoluteBox {
   position:absolute;
   top:100px;
   left:250px;
   width:300px;
   height:300px;
   background-color:red;
}

3. حالت نسبی: Relative

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

برای روشن شدن موضوع مثالی میزنم: اگر به یک عنصری در صفحه وب مثلا تگ div موقعیت relative بدهیم و بعد مقدار top رو برابر 10 پیکسل قرار بدیم، تگ DIV به اندازه 10 پیکسل از جایگاه پیش فرض خودش میاد پایینتر و البته باعث تغییر جای عناصر پایینی خودش نمیشود.

تا اینجا شاید حالت های Absolute و Relative به نظر بی استفاده بیایند چون کنترل موقعیت تگ html در صفحه از دست شما خارج هست و در سایزها و رزولوشن های مختلف از طرف مرورگر و کاربر شما، طراحی شما به هم میریزد. اما ترکیب این 2 حالت، یک مدل بسیار عالی و پرکاربرد در طراحی وب را به وجود می آورد:

یک تگ اچ‌تی‌ام‌ال با حالت Relative، برای عناصر داخلی خودش در حالت Absolute، نقش مبدا مختصات را پیدا میکند.

نکته اول اینکه واضح هست که تگ مادر باید از نوع بلاک باشد که اکثرا در این مدل از div استفاده میکنیم و نکته دوم اینکه برای تگ مادر که در حالت نسبی هست نیازی نیست که top و left تعریف کنیم. به این ترتیب از نظر موقعیت، مثل حالت استاتیک با آن برخورد خواهد شد.

حالا در داخل تگ relative از حالت absolute استفاده میکنیم. این بار برای top و left، گوشه بالا سمت چپ تگ relative میشود مبدا مختصات. بنابراین در این حالت میتوانیم اطمینان داشته باشیم که صفحه همانطور که ما میخواهیم نشان داده میشود بدون نگرانی از سایز مرورگر! در مثال زیر اندازه مرورگر خودرا عوض کنید و resize کنید، نباید تغییری در حالت دو مربع بزرگ و کوچیک به وجود آید. به کد آن دقت کنید:

</div>

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

4. حالت ثابت: Fixed

مدل ثابت را میتوان همان مدل absolute دانست با این تفاوت که در حالت fixed، تگ شما به نسبت پنجره مرورگر ثابت خواهد ماند. یعنی اگر یک تصویر را به صورت fixed در top:0px و left:0px قرار دهید، این تصویر همواره در گوشه بالای سمت چپ صفحه نمایش داده میشود، حتی اگر شما اسکرول کنید به قسمت های پایینی صفحه، این عکس باز هم در جای خود ثابت خواهد ماند. از این مدل در تبلیغات و منوی سایت ها معمولا استفاده میکنند.
نمونه کد زیر را برای خود امتحان کنید:

نکته اینکه یک div که در حالت fixed (و همچنین absolute) میباشد، اصلا مهم نیست کد آن در کجای صفحه قرار گرفته باشد. میتوانید آن را دقیقا قبل از بستن تگ body وارد کنید.

*این مطالب از خودم میباشد! اگر درآن اشتباهی میبینید، ممنون میشم که اعلام کنید. استفاده از این مطلب آزاد هست و اگر دوست دارید با انصاف باشید، منبع رو هم ذکر کنید.

Clicky: Web Analytics in Real Time

me — Sat, 09 Jan 2010 14:48:25 +0300

گزارش آمار سایت خود را از سرویس کلیکی بخواهید

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

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

شاید وقتی صحبت از یک سیستم و نرم افزار آمارگیری برای سایت، میشه خیلی ها از گوگل نام ببرند. اما اگر با این سیستم کار کرده باشید، متوجه یه سری کمبود در سیستم گوگل میشوید که تعدادیش رو من در پایین مینویسم:
- آمار گوگل، لحظه ای نیست. بنابراین بازدیدکندده های فعال در 1 دقیقه اخیر را نمیتوانید ببینید یا تعداد کاربرانی که الان در حال بازدید از سایت شما هستند.
- اگر بازدیدکننده سایت شما، جاوا اسکریپت نداشته باشد، آمار گوگل نمیتواند این کاربر را شناسایی کند. یعنی اصلا کار نمیکند!
- آمار سایت شما را به حالت عمومی نشان نمیدهد و اگر هم بخواهید از API های گوگل استفاده کنید، کار بسیار پیچیده خواهد شد.
- آمار کلیک های روی لینک هایی که شما به آدرس هایی به غیر از سایت خودتان داده اید در حالت عادی توسط گوگل قابل دسترسی نیست. این مورد برای شما هنگامی مهم هست که اگر لینکی به سایت دیگری دادید و یا بنر تبلیغاتی بر روی سایت خود قرار دادید، ببینید که آمار کلیک شدن روی آن چقدر بوده.
- اطلاعات آماری به صورت تجمعی هست و شما به ازای تک تک بازدید ها نمیتوانید ریز اطلاعات همون بازدیدکننده رو ببینید.

البته سیستم گوگل مزیتهای خیلی زیادی هم داره مثلا برای وبمسترهایی که از adsence یا adword استفاده میکنند، از طریق سرویس آمار گوگل، اطلاعات خوبی در مورد اکانت تبلیغاتشون میتونن بگیرن.

سیستم آمارگیری که قراره معرفی کنم، تمامی مشکلاتی که در بالا گفته شده رو حل میکنه و به نظر من کامل ترین سیستم آمارگیری بوده که تا به حال با اون کار کردم. اسم این سیستم کلیکی (Clicky) هست به آدرس: getclicky.com

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

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

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

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

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

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

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

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

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

ASP.Net Database Connection Errors

me — Sun, 03 Jan 2010 16:38:02 +0300

خطاهای معمول در ارتباط با دیتابیس در ASP.NET

در برنامه نویسی وب مخصوصا از مدل ASP.Net همه چیز بعد از نوشتن کامل سایت و برنامه روی کامپیوتر خودتان، تمام نمیشود. قسمت بسیار مهمی در پیش است:
انتقال سایت به هاست اصلی در اینترنت

اگر در کدنویسی و طراحی HTML اصول لازم رو رعایت کرده باشید، از بابت آدرس دهی تصاویر و فایلهای استایل و اسکریپت نگرانیی نخواهید داشت. بیشترین نگرانی زمانی هست که شما از دیتابیس استفاده کرده اید. این مساله زمانی خودش رو مهمتر نشون میده که از SQL Server استفاده شده باشه.

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

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

- آدرس اینترنتی دیتابیس که میتواند هم به صورت IP باشد هم یک آدرس URL
- یوزرنیم و پسورد یا همون نام کاربری و کلمه عبور!

با داشتن این سه مورد به سادگی میتوانید کانکشن استرینگ Connection String جدید را بسازید و آن را در وب کانفیگ web.config ذخیره کنید. دقت کنید که اسمی که برای connection قبلا روی سیستم خودتون تعریف کرده اید و تمامی دیتا کنترل ها و کدهای شما با این اسم کار میکنند، حالا باید به این connection string جدید داده شود و connection string قبلی رو چون باهاش کاری ندارید میتونید پاک کنید.

البته لازم به گفتن نیست که کار وقتی انقدر ساده هست که از connection string در تک تک قسمتهای کد خودتون که به دیتابیس نیاز داشته، به صورت مستقیم استفاده نکرده باشید! وگرنه مجبورید تو کل کد خودتون همه این قسمتها رو عوض کنید. خوب به هر حال یکی از خوبیهای استفاده از web.config برای ذخیره دستورات و متغیر هایی که در کل برنامه قابل استفاده هست، همین هست.

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

تا اینجای کار اگر همه چی از روی اصول و سیستماتیک انجام شده باشه، زیاد سخت نبود. اما زمانی که از App_Data در ASP.Net استفاده میکنید باید نیم نگاهی هم به امنیت و اجازه های دسترسی هم داشته باشید.

App_Data یکی از Folder (بخوانید فلدر؛ نخوانید فولدر!) های مخصوص در ASP.Net هست که مخصوص نگه داری فایلهای از نوع دیتابیس میباشد. از ویژگی هاش اینه که IIS فایلهای داخل اون رو به کاربر بر نمیگردونه حتی اگه آدرس درست و کامل زده شده باشه. مثلا: mysite.com/app_data/password.mdb برای شما دانلود این دیتابیس رو نتیجه نمیدهد بلکه پیغام خطایی از طرف سرور برای شما میاد با این مفهوم که شما اجازه دسترسی به این بخش رو ندارید.

بنابراین اگر از دیتابیس های فایلی مثل access یا excel یا xml یا حتی notepad استفاده میکنید میتونید اونها در داخل این فلدر قرار داده و در برنامه خودتون با آدرس دهی مناسب، به اونها دسترسی داشته باشید. وقتی اسم فلدر و فایل به میون میاد، در ویندوز بحث امنیت و اجازه دسترسی به این فایل ها و فلدر ها هم مطرح میشه.

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

Failed to update database "Path to your DB" because the database is read-only

دو مورد را چک کنید:

1. فلدر APP_Data در حالت Read Only نباشد. البته شما ممکن است به این صورت در هاست خود به فلدر ها دسترسی نداشته باشید. باید ببینید از طریق کنترل پنل هاست میتونید attribute فلدرها و فایلهاها رو تغییر بدید یا نه. اگر اجازه این کار را نداشتید، باید به مسسول هاست تماس بگیرید و از آنها درخواست این کار را بکنید.

2. در ASP.Net در حالت پیشفرض وب سرور شما که همون IIS باشه و حداقل دیگه الان ورژن 6 باید باشه، توسط کاربر Network Service به دیتابیس شما دسترسی داره. بنابراین این حساب کاربری باید به فلدر و فایلهای شما دسترسی داشته باشه هم از نوع خوندن و هم از نوع نوشتن.

بنابراین این حساب کاربری رو باید از بخش اجازه دسترسی یا user access یا security یا ACL یا هر چی که کنترل پنل سایت شما به اون اشاده کرده در این مورد، اضافه کنید و به اون full access بدید.

اگر روی لوکال و سیستم خودتون به چنین پیغامی برخورد کردید، در App_Data Folder Properties به قسمت Security رفته و Network Service را اضافه کنید و تیک Full Control را بزنید.

در کنار این مشکل، ممکنه خطاهای دیگه ای هم از برنامه شما گرفته بشه که با رعایت دو نکته زیر از پس اونها هم بر خواهید آمد:
1. حتما به این موضوع دقت کنید که ورژن دات نت نصب شده روی سرور از ورژن مورد استفاده شما بیشتر یا برابر باشه.
2. در وب کانفیگ web.config قسمت customErrors را به صورت زیر تغییر دهید تا تمامی خطاهای ایجاد شده به شما نشان داده شود:

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

وقتی که روی لوکال از SQL Express استفاده میکنیم.

روی سیستم خودتان و در Visual Studio کدنویسی و طراحی خود را انجام داده اید و همه چی در سرور ویژوال استودیو خوب و کامل به نظر میرسد. یعنی در ویژوال استودیو وقتی F5 را میزنید سایت کار میکند، اطلاعات دیتابیس خونده میشه، میتونید اطلاعات جدید رو وارد کنید و خلاصه همه چی همونطور هست که باید باشه

به علت یک سری محدودیت های وب سرور ویژوال استودیو، مجبور میشید سایت رو در IIS که روی سیستم خودتان نصب شده هم ببینید. Virtual Directory را در IIS اضافه کرده و تنظیمات مربوطه را انجام میدهید. زمانی که میخواهید سایت را از طریق IIS ببینید به مشکل زیر برمیخورید:

Login failed for user NT AUTHORITY\NETWORK SERVICE

به ویژوال استودیو برمیگردید، F5 را میزنید. همه چیز درست کار میکند. مجوزهای دسترسی رو چک میکنید. همه چیز درست است. پس اشکال از کجاست؟

اگر به اینجا رسیدید، میتوان یقین داشت شما از ورژن Express در SQL Server استفاده میکنید. باید بدانید این نسخه به صورت رایگان پخش شده است و فقط برای استفاده شخصی شما در سیستم خودتان در زمان برنامه نویسی هست. بنابراین دقت کنید که:

در SQL Server Express Edition در یک زمان فقط امکان ایجاد یک ارتباط میباشد.

خوب، پس باید ویژوال استودیو را ببندید، چند ثانیه صبر کنید.. و حالا از طریق IIS دوباره امتحان کنید. می بینید که سایت شما به درستی کار خواهد کرد.

اگر از خاصیت Attach کردن فایل mdf یه sql server express استفاده میکنید، مثلا در حالت استفاده از membership پیش فرض دات نت، ممکن است مشکل برطرف نشود. ممکن است (به هر دلیلی) این فایل mdf شما به sql server به صورت فیزیکی attach شده باشد. در این حالت باید از طریق نرم افزار SSMS یا همون نرم افزار Sql Server Management Studio به سرور express نصب شده روی لوکال خود برید و با رایت کلیک کردن روی دیتابیس مربوطه، آن را Detach کنید.

چند پیشنهاد برای مواجهه با خطای کمتر

- از خاصیت Attach کردن فایلهای Mdf در sql server استفاده نکنید. درصد بالایی از هاست ها مخصوصا از نوع Shared Hosting، این امکان را در SQL Server خودشون به طور کامل غیر فعال کرده اند.

- هنگام ساختن قسمتهایی از web.config که نیاز به تعریف یک اسم دارند، مثل تعریف Provider ها و همچنین connection string ها از اسامی مخصوص به خودتان استفاده کنید و از نامهای پیش فرض که در web.config یا machine.config استفاده میشه، استفاده نکنید تا جلوی تداخل های احتمالی رو بگیرید.

- در هنگامی که روی لوکال و با IIS کار میکنید، بعد از تغییراتی که روی تنظیمات IIS و مجوز های دسترسی دادید، IIS را یکبار restart کنید.

در مواجهه با خطا در برنامه خودتون، نه الکی عصبی بشید نه اینکه بیخیال! به دنبال راه حل اون مشکل باشد و مطمئن باشید در این راه مطالب جدیدی را حتما یاد میگیرید.

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

E-Banking in Iran

me — Mon, 28 Dec 2009 14:04:45 +0300

بانکداری الکترونیکی در ایران از نگاهی دیگر

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

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

سناریو اول
مکان: اتاق خودم، پشت میز

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

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

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

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

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

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

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

انتقال پول همیشه در مقیاس میلیون تومن نیست که بگیم 500 تومن چیزی نیست. اگر بخواهید 3000 تومن برای کسی واریز کنید باید 3500 خرج کنید. خیلی ها برای همین 500 تومن میرن بانک و قید اینترنت رو میزنن. ای بابا، پس دوباره شد بانکداری بی الکترونیکی که.

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

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

برای یک سری کار چکی و بانکی و این چیزا رفتم بانک ملت. به حساب بانک ملی شخصی هم باید پول واریز میکردم. یادم افتاد که تو تبلیغ روزنامه خونده بودم یا تو تلویزیون دیده بودم که بانک ملت سرویسی به اسم “ساتنا” راه اندازی کرده که میتونه به حسابهای بانکهای دیگه پول رو به صورت لحظه ای واریز کنه.

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

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

و البته اگر هم این ساتنا قراره در شعبه ای خدمات بده که اونجا حساب داری، چرا این رو واضح در تبلیغات اعلام نمیکنند؟ دیگه این هم مگه تبلیغ ماشینه که نگران باشند با نشان دادن کامل ماشین از چند زاویه مردم منصرف از پیش خرید بشن و فقط به تصویرهای بسیار مرموز و نامفهوم تکیه کنند؟ البته از شفافیت هایی نظیر “دارای ساعت” “دارای زیرسیگاری” و البته امکانات به روزی مثل “دارای کمربند ایمنی عقب” در تبلیغات خودروهای داخلی نباید گذشت.

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

سناریو سوم
مکان:تجریش، مغازه موبایل فروشی

بعد از گشت زدن در طبقه سوم پاساژ قائم (یا چندم؛ یادم نیست، 100 بار دیگه هم برم، بازم این طبقات قائم رو حفظ نمیشم.. البته این یکی ربطی به مشکلات بانکداری الکترونیکی نداره! :دی ) و تعجب چندباره از اینکه از اول تا آخر پاساژ، اختلاف قیمتی در حدود 30 هزار تومن برای یک گوشی 150 هزار تومنی وجود داشت، بالاخره گوشی رو از یه مغازه که منصف ترین بود گرفتم.

موقع پرداخت صورتحساب، کارت بانکم رو دادم به فروشنده تا بکشه تو دستگاه و من به عنوان شهروند الکترونیک، پرداخت الکترونیک انجام بدم.
- بفرمایید، از این کارت حساب کنید. رمزش هم اینه..
- شرمنده، پول نقد دارید؟
- چرا؟ دستگاه خرابه؟
- نه والا، اگه از دستگاه پرداخت بشه، 3 هزار تومن کارمزد کم میشه. من قیمت پایین دادم برای سود کم، که اونم میره برای کارمزد دستگاه

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

سناریو چهارم
مکان: مغازه لباس فروشی

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

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

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

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

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

Proper Way of Embedding Flash Movies in Webpages

me — Wed, 23 Dec 2009 15:58:45 +0300

بهترین راهکار برای قراردادن فلش در صفحات وب

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

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

توجه به نکاتی مثل افزایش حجم صفحه و طولانی شدن مدت دانلود و نمایش صفحه همواره باید مورد توجه باشد. اگر یک بنر فلش که باید بالافاصله در چشم بازدید کننده بیاد تا نظر اون رو جلب کنه، انقدر حجم بالایی داشته باشه که تا بخواد لود بشه، بازدیدکننده از صفحه رفته، اون وقت دیگه این بنر به چه دردی میخوره؟

و یا برای طراحی های حجیم که لود شدن فلش ممکن است طول بکشد، نشان دادن یه چیزی به بازدیدکننده مثل درصد لود شدن فلش و یا حتی یک کلمه “Loading” ضروری به نظر میرسد.

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

اما این کد به علت وجود تگ embed استاندارد نیست!

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

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

این کد هم استاندارد هست و هم با تمامی مرورگرهای امروزی سازگار.

نقش swfobject چیست؟
توسط این کتابخونه جاوا اسکریپتی، امکانات اضافی در اختیار ما قرار داده میشود. ابتدا باید این فایل رو به صفحه خودمون اضافه کنیم. گوگل این فایل را در شبکه CDN خودش قرار داده است. پس چه بهتر که به صورت زیر استفاده کنیم:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title></title>
         <script type="text/javascript"
         src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
         </script>
        <script type="text/javascript">
            var flashvars = {};
            var params = {};
            params.menu = "false";
            params.quality = "high";
            params.allowfullscreen = "false";
            var attributes = {};
            swfobject.embedSWF("untitled.swf", "movieDIV", "800", "600", "9.0.0", false, flashvars, params, attributes);
        </script>
    </head>
    <body>
        <div id="movieDIV">
           شما باید فلش پلیر نصب کنید
        </div>
    </body>
</html>

در این مثال یک تگ div با آی دی movieDIV ایجاد کرده ایم و توسط جاوا اسکریپت، فلش را داخل آن قرار میدهیم. کار بسیار ساده هست. اگر فلش پلیر موجود نباشد، متن داخل div نمایش داده خواهد شد: “شما باید فلش پلیر نصب کنید”

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

شما نیازی نیست این کدها رو خودتون بنویسید! تیم سازنده swfobject برای شما یک برنامه نوشته که شما فقط پارامترها را مشخص میکنید و اون خودش چه به صورت داینامیک و چه به صورت قطعه کد استاتیک، کد نهایی را به شما میدهد. از آنجا که دسترسی به گوگل کد، برای ما مقدور نیست، من این برنامه تولید کننده کد رو آپلود کردم که میتونید از لینک زیر دانلود کنید:
swfobject generator 1.2 html

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

در مجموعه swfobject یک فایل فلش با اکشن اسکریپت های مناسب طراحی شده است تا این کار را برای شما انجام دهد. پس اگر از این امکان میخواهید استفاده کنید، در هنگام ساختن کد مورد نظر از طریق swfobject generator تیک این گزینه را بزنید. همچنین نیاز به خود این فایل هم دارید که به همون دلیل گفته شده در بالا، من تمامی فایلهای مربوط به این پروژه در گوگل کد را آپلود کردم که میتونید از لینک زیر دانلود کنید:
swfobject version 2.2

جلوگیری از خطای Nested Object
در حالت استفاده از قطعه کد استاتیک، اگر به خطای زیر برخورد کردید:

Active Server Pages error 'ASP 0139'
Nested Object

An object tag cannot be placed inside another object tag.

فقط کافی هست که اولین تگ object را به صورت زیر تغییر دهید تا مشکل دیدن دو تگ object داخل هم از بین برود:

<%="<"%>object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="movie" value="movie.swf" />
.
.
.


<object type="application/x-shockwave-flash" data="movie.swf">
.
.
.

شما باید فلش پلیر نصب کنید

</object>

Google Pagerank

me — Mon, 14 Dec 2009 15:30:34 +0300

کاهش pagerank سایت شما در گوگل

Pagerank در گوگل یک عدد بین 0 تا 10 میباشد که به مفهوم رتبه صفحه وب از دید گوگل است. این مقدار بستگی به شرایط زیادی دارد و گوگل برای محاسبه آن الگوریتم های پیچیده ای را در نظر گرفته که البته در مدل محاسبه خودش هم تغییراتی رو هر سال انجام میده. شاید به زبان خیلی ساده بشه گفت که pagerank یک صفحه میزان محبوبیت اون صفحه رو در اینترنت “از دید گوگل” بیان میکند.

pagerank به طور کلی موجود پیچیده و ناشناخته‌ای هست که به نظر من بیش از حد به اون پرداخته شده در حالیکه انقدر هم مهم و تعیین کننده برای یک وبسایت نیست! چه داخل و چه خارج ایران برخی شرکت ها و اشخاص با روشهایی در برابر پرداخت هزینه از طرف شما، pagerank سایت شما را بالا می برند و کم نیستند اشخاصی هرچند متخصص که برای رتبه بندی و مقایسه وب سایتها فقط به همین pagerank گوگل توجه میکنند.

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

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

- سایتهایی که به هر شکلی قصد گول زدن گوگل رو در جهت افزایش رتبه اونها در جستجوها، دارند. توضیح بیشتر

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

- رعایت نکردن استانداردهای وب و ضعف صفحهات از نظر وب مفهومی semantic web

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

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

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

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

در نهایت، به فکر تبلیغات سایت خود باشید، به دنبال لینک گذاشتن در وب سایت و وب لاگ دوستان باشید، اما نه برای بالا بردن pagerank؛ بلکه برای بالا بردن ترافیک و بازدید کننده های وبسایت خودتون، این کار رو بکنید!

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

Webmaster Tools

me — Tue, 08 Dec 2009 22:52:42 +0300

بالا بردن کیفیت وب‌سایت، با کمک ابزار بهینه سازی؛ مخصوص وب‌مسترها

یکی از مهمترین مسایلی که همواره چه در زمان طراحی، چه در زمان اجرا و همچنین در زمان نگهداری و به روزرسانی یک وب‌سایت همواره باید به آن توجه داشت، رتبه سایت در موتورهای جستجو و نحوه ایندکس شدن آن توسط این سرویس ها می‌باشد.

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

برای افزایش محبوبیت سایت خود در موتورهای جستجو چه باید کرد؟ به راه های متعددی می توان اشاره کرد:
- استفاده از کدها و الگوهای طراحی استاندارد و اصولی
- رعایت اصول سئو SEO
- به روز نگاه داشتن سایت و یا وبلاگ با مطالب پرطرفدار، جدید و خلاقانه
- تبلیغات آنلاین و یا تبادل لینک
- و …

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

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

ابزار وب‌مستر گوگل
http://www.google.com/webmasters

ابزار وب‌مستر بینگ مایکروسافت
http://www.bing.com/webmaster

ابزار وب‌مستر یاهو
http://siteexplorer.search.yahoo.com

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

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

روش اول، اضافه کردت کد اچ‌تی‌ام‌ال:
این روش مناسب صاحبین سرویس های وبلاگ و یا CMS ها میباشد که ممکن است به فضای FTP سایت خودشون دسترسی نداشته باشند. به این ترتیب که به شما یک کد HTML که معمولا یک کد meta tag هست داده میشه و از شما خواسته میشه که این کد رو در سورس سایت و یا وبلاگ خودتون قرار بدید تا به این صورت سرویس بتونه سایت شما رو اعتبارسنجی کنه و مطمئن شه شما صاحب آن هستید.

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

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

معرفی لینک sitemap و feed سایت شما به این سرویس ها:
با این کار، هم لطف بزرگی به این سرچ انجین ها کرده اید هم کمک زیادی به بالارفتن میزان ایندکس شدن سایت خودتون کردید. به این ترتیب سرچ انجین ها میتوانند اسکلت سایت شما رو از روی سایت مپ متوجه شده و مطالب شما رو از روی فید، دنبال کنند.

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

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

http://mytoolbox.ir/article.aspx?view=25&sessionID=66658
http://mytoolbox.ir/article.aspx?view=25&sessionID=25419

sessionID برای اهداف برنامه نویسی ممکن است به کار رفته باشد و یا حتی برای جلوگیری از کش شدن صفحه، به هر حال، تاثیری در صفحه نهایی ندارد. بنابراین باید در این سرویس ها، کلمه sessionID تنظیم شود که ignore یا exclude شود.

با همین دو کار که گفته شد، بعد از چند هفته، حتما تاثیر مثبت ان را در سایت و یا وبلاگ خودتون خواهید دید.
هر کدام از این سرویس ها، تنظیمات مخصوصی هم دارد. مثلا در گوگل شما این امکان رو دارید که تنظیم کنید گوگل سایت شما را با www نگاه کند یا بدون آن. مثلا اگر تنظیم کنید بدون www یعنی به صورت mytoolbox.ir به سایت نگاه کند، به صورت اتوماتیک تمامی آدرسهایی که از سایت شما با www دارد را به مدل جدید تغییر میدهد که البته این تغییر، چند هفته ای طول خواهد کشید!

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

مشکلاتی که سرچ انجین در زمان بازدید سایت شما به آنها برخورد کرده است. مثل نداشتن فایل robots.txt یا نداشتن اجازه دسترسی به صفحات و یا وجود صفحات تکراری
سایتهای که به سایت شما لینک داده اند و سایت هایی که شما از سایت خودتون به آنها لینک داده اید.
کلمات کلیدی سایت شما به تشخیص سرچ انجین و همچنین کلماتی که کاربران با جستجوی انها به سایت شما رسیده اند.
صفحات ایندکس شده شما در سرچ انجین

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

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

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

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

Spam Report from Google Webmaster Tools

me — Sat, 28 Nov 2009 03:33:32 +0300

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

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

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

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

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

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

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

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

Hidden text or links

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

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

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

Misleading or repeated words

این مورد در سایتهایی که در زمینه آگهی های اینترنتی هستند و ماشاالله کم هم نیستند، بسیار واضح دیده میشه. اسکریپتی که برای این مدل سایت ها استفاده میشه، در هر آگهی که مشتریان در سایت وارد کرده‌اند کلماتی رو به صورت کاملا آشکار و با عنوان جستجوهای مرتبط با صفحه اضافه میکنه که کاملا مشخص هست که این کار برای گول زدن سرچ انجین هست و عنوان “بر چسب” یا تگ برای این کار به هیچ وجه قابل قبول نیست. چون اولا تگ برای یک موضوع به مفهوم کلمات کلیدی اون مضوع هست و دوما تعداد این کلمات کلیدی چهار تا، پنج تا خیلی دیگه اصرار کنی ده تا میتونه باشه! نه اینکه برای یک محصول که فرضا دی وی دی یانگو قسمت 18 هست، شما بیای و براش تگ بذاری: جومونگ، لاست، پشت صحنه امپراطور دریا، اوشین… به این صورت شما داری حقه میزنی، پس حقته که گوگل هم شما رو در لیست سیاه قرار بده. و یا مورد دیگه ای که کاملا میشه مشاهده کرد استفاده از کلمات تکراریه که حتی استفاده از تگ های h1 تا h6 هم در دستور کار قرار گرفته تا از این حربه سئو، بر ضد خودش استفاده بشه که به این صورت گوگل فکر کنه این کلمه در متن شما اهمیت زیادی داره و رنک اون رو بالا ببره:

Page does not match Google's description

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

Cloaked page

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

Deceptive redirects

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

نوع دیگر این نوع تقلب، استفاده از انواع تکنیک ها مثل RSS reader یا استفاده از فریم و آی‌فریم برای خواندن مطالب سایتهای دیگر و استفاده آنها در سایت خود است تا از ارزشی که گوگل برای اون مطالب اعمال میکنه، سایت متقلب هم شریک بشه. به هر حال این روش هر چه هست، همون دزدی مطلب به زبون عامیانه خودمون هست. این کار، وجدانی، قانونی(کپی رایت) و گوگلی! ممنوعه و جزو راه های اسپم شناخته میشه.

Doorway pages

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

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

نوع دیگر این روش اسپم استفاده از ساب دامین به عنوان کلمه کاربردی هست. مثل keyword1.domain.com another-keyword.domain.com این مدل آدرسها به صورت داینامیک توسط سرور سایت ساخته میشوند و در واقع وجود فیزیکی ندارند. گوگل بسیاری از این مدل اسپم رو در سالهای اخیر شناسایی کرده و حذف کرده، اما همچنان میشه این مورد رو دید. نمونه این مدل اسپم رو میشه در همین اسکریپت های رایج برای ساختن سیستم های آگهی فارسی پیدا کرد. این حرکت نیز اسپم میباشد و ممنوع.

Duplicate site or pages

گوگل به شدت مخالف مطالب تکراری در سایت های اینترنتی هست. نه فقط مطالب، حتی اگر <title> صفحات هم مثل هم باشه، اون رو به عنوان فاکتور منفی حساب میکنه. بنابراین اصلا به دنبال این نباشید که صفحات تکراری داشته باشید که حجم مطالب رو بالا ببرید یا از اون بدتر، چند سایت با یک مضمون با مثلا طراحی مختلف داشته باشید که گوگل رو گول بزنید! یا خودش میفهمه یا کسی پیدا میشه که شما رو گزارش بده. در نهایت شما اسپمر شناخته میشوید!

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

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

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

Live Writer 2009 Full Setup

me — Thu, 26 Nov 2009 18:58:47 +0300

مشکل نصب ویندوز لایو رایتر

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

فایل ستاپ اولیه که تقریبا 1 مگابایت حجم دارد، بر روی بعضی ورژن های ویندوز مثل ورژن های ویندوز سرور، نصب نمیشه و از فایل ایراد میگیره. در این صورت نیاز به فایل ستاپ کامل داریم. برای این کار باید این فایل رو از روی سیستمی که یک بار لایو رایتر روی اون نصب شده، کپی کنیم. در ویندوز ایکس پی از این ادرس میشه فایل رو پیدا کرد:

C:\Program Files\Common Files\Windows Live\.cache\9d9d24601ca6ea6

اگر به یک سیستم دیگه دسترسی ندارید، من آخرین ورژن یعنی ورژن 2009 (14.0.8089.726) رو آپلود کردم که میتونید از آدرس زیر دانلود کنید.

Live Writer 2009 Full Setup

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

Windows Live Writer 2009

me — Mon, 23 Nov 2009 15:51:35 +0300

ویندوز لایو رایتر به زبان ساده

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

با استفاده از لایو رایتر (که البته به اسم WLW هم شناخته میشود) نیازی به دسترسی به سیستم مدیریت وبلاگ خود ندارید و مستقیما از طریق کامپیوتر شخصی خود، پست جدید را نوشته و ویرایش میکنید و هر وقت که خواستید پست جدید به وبلاگ شما منتقل شود، کافیست به اینترنت متصل شده و آن را پابلیش کنید.

تمامی تصاویری که در ادامه می‌بینید، مربوط به ورژن 14.0.8089.726 می‌باشد.

برای نصب لایو رایتر که خود مجموعه ای از نرم افزارهای سری لایو مایکروسافت است، به آدرس زیر بروید:
http://download.live.com/writer

پس از دانلود و نصب، برنامه Windows Live Writer را اجرا کنید. برای بار اول یک ویزارد به شما نشان داده میشود به صورت زیر:

اگر وبلاگ شما در لایو اسپیس (Live Spaces) یا شیرپوینت (SharePoint) نیست (که معمولا نیست!) گزینه آخر را انتخاب کنید.

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

در این مرحله آدرس کامل وبلاگ خود را به همراه نام کاربری و کلمه عبور وارد کنید. برای امنیت بیشتر، پیشنهاد میشه Remember my password را انتخاب نکنید.

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

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

اگر نیاز به تگ های RTL و LTR در تولبار نرم افزار هستید باید از طریق منوی Blogs –> Edit blog setting –> Editting مقدار Text Direction را به Right to Left تغییر بدهید. همچنین از طریق لایو رایتر و قسمتی که در پایین آن وجود دارد میتوانید تمامی تنظیماتی که برای پست شما موجود هست را انجام بدهید. مثل انتخاب Category یا برچسب ها و تعیین لینک ثابت و غیره. توجه کنید تنظیماتی که در این قسمت موجود هستند ممکن است به نسبت سیستم های مختلف وبلاگ نویسی متفاوت باشند. مثلا اگر سیستم شما، اجازه انتخاب تاریخ ارسال پست را بدهد، این گزینه در لایو رایتر هم فعال خواهد شد و یا اینکه انتخاب کنید برای این پست شما، سیستم نظر سنجی فعال باشد یا خیر.

تصویری که در زیر میبینید مربوط به سیستم بلاگ انجین دات نت (BlogEngine.Net) می‌باشد.

لایو رایتر مطلب شما را در فاصله زمانی تعیین شده توسط شما، به صورت خودکار ذخیره میکند (Drafts)، بنابراین نگران از دست رفتن متن خود نباشید. پس میتوانید مطلب خود را شروع به نوشتن کرده و آن را ذخیره کنید و ادامه آن را در زمانی دیگر کامل کنید و هر وقت که خواستید پست شما به وبلاگ اضافه شود کافیست دکمه Publish را بزنید.

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

در صورت پشتیبانی سیستم وبلاگ شما از آپلود کردن عکس، به سادگی در لایو رایتر میتوانید عکس های مورد نظر را از کامپیوتر خود انتخاب کنید و در متن قرار بدهید و در هنگام Publish این عکسها به صورت خودکار به وبلاگ و سرور شما منتقل خواهند شد. البته یک سری امکانات خوب هم برای کار با عکس ها در اختیار شما قرار داده میشود. ( به سایه عکسهای این پست و عبارت MyToolbox.ir بر روی آنها دقت کنید.) و البته امکان قرار دادن عکس در ابعاد کوچک و لینک شدن آن به عکس اصلی نیز موجود است.

استفاده از Microsoft Maps و Youtube به صورت مستقیم وجود دارد و به سادگی میتوانید آنها را در متن خود جای دهید.

از طریق لایو رایتر، امکان ویرایش پست هایی که قبلا ارسال کرده‌اید نیز وجود دارد و بعد از ویرایش باید دوباره آن را پابلیش کنید.

Use jQuery CDN from Microsoft or Google

me — Sat, 17 Oct 2009 14:19:00 +0300

افزایش سرعت لود شدن jQuery با استفاده از CDN

برای استفاده از فایل اصلی کتابخونه jQuery ، پیشنهاد میشه که از CDN استفاده کنید، به دلایل زیر:

- امکان اینکه این فایل در دستگاه بازدید کننده (کش = Cache) شما وجود داشته باشه بالا هست. بنابراین دیگه زمانی برای دانلود این فایل صرف نمیشود و سرعت لود شدن سایت بالاتر میرود.
- اگر هم نیازی به دانلود شدن این فایل باشه، CDN به دلیل داشتن داشتن سرورهای متعدد، نزدیک ترین و سریعترین راه رو برای دانلود فایل به سیستم بازدیدکننده انتخاب میکنه.
- CDN ها از سیستم متراکم سازی gzip استفاده میکنند و شما نیازی به کد نویسی یا تغییر ساختار وب سرور برای این کار ندارید.
- به دلیل اینکه این فایل بر روی سرور شما نیست بنابراین هزینه ای بابت پهنای باند این فایل نمی پردازید.

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

برای استفاده از سی دی ان مایکروسافت:
http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js

برای استفاده از سی دی ان گوگل:
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

نکته در مورد گوگل:
گوگل برای دسترسی به فایلهایی که میزبانی میکنه چندین روش رو معرفی کرده. برای jQuery اگر از آدرس بالا استفاده کنید همواره آخرین ورژن jQuery در نسخه شماره 1 رو به شما میده. این ورژن در زمان نوشتن این پست 1.3.2 هست. بنابراین اگر از این آدرس استفاده میکنید، پس فردا که ورژن جدید تر 1.6 اومد، این آدرس به صورت خودکار اون فایل رو نشون خواهد داد. اما برای ورژن 2 و بالاتر باید آدرس رو عوض کنید به
libs/jquery/2/jquery.min.js
اگر میخواهید دقیقا ورژن 1.3.2 رو استفاده کنید از این آدرس استفاده کنید:
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

تمامی این آدرس ها به صورت جی زیپ به مرورگر شما فرستاده میشوند.

جی زیپ gzip به زبون خیلی ساده یعنی که وب سرور، فایل رو به صورت فشرده ( فکر کنید یه چیزی مثل همون zip یا rar ) به سمت کلاینت میفرسته و مرورگر در کلاینت اون فایل رو از حالت فشرده در میاره. اگر مرورگر شما این قابلیت رو نداشته باشه، سرور تشخیص میده و اصلا عمل جی زیپ رو انجام نمیده. البته تمام مرورگر های غیرمتنی کنونی، جی زیپ رو پشتیبانی میکنند.

تست کردن فعال بودن امکان gzip توسط فایرباگ:

تست آنلاین این قابلیت در سایت http://www.gidnetwork.com/tools/gzip-test.php :

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

Speed up your website using Sub-Domains and CDNs

me — Sat, 03 Oct 2009 16:01:00 +0300

سرعت سایت خود را با استفاده از subdomain و CDN بالاتر ببرید

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

اکثر مرورگرهای وب میتوانند در لحظه فقط 2 ارتباط موازی با یک سرور مشترک و در کل 6 ارتباط موازی با سرورهای مختلف داشته باشند.

مفهوم این جمله به زبان ساده تر یعنی اگر سایت شما دارای 20 عکس در صفحه اول باشه، مرورگر وب فقط میتونه در لحظه، 2 عکس رو دانلود کنه چون این عکسها رو داره از یک سرور مشترک میخونه مثلا:
http://mytoolbox.ir/1.jpg
http://mytoolbox.ir/2.jpg
حالا فکر کنید که از طریقی بتوانید مرورگر رو مجبور کنید که بیشتر از 2 ارتباط داشته باشه، مثلا کل 6 ارتباط مجاز رو بتونه با یک سرور مشترک داشته باشه؛ اون موقع میشه گفت سرعت لود شدن عکسهای شما تقریبا 3 برابر میشه، بنابراین سایت شما با سرعت بیشتری روی مرورگر کاربر سایت شما، کامل لود خواهد شد و از نظر کاربر "سرعت سایت" بالاتر خواهد رفت و این موفقیت بسیار خوبی میتونه باشه!

استفاده از ساب دامین در ساده ترین حالت
برای اینکه بتوانیم این محدودیت 2 تایی رو از پیش رو برداریم، باید برای قسمتهای استاتیک سایت مثل عکسها و اسکریپتها و فایلهای سی اس اس، آدرس های جداگانه در نظر بگیریم. مثلا i.mytoolbox.ir برای عکسها و s.mytoolbox.ir برای اسکریپتها و c.mytoolbox.ir برای فایلهای سی اس اس. بنابراین میتونیم ارتباطات موازی بیشتری با سرور داشته باشیم به نسبت حالت قبل که همه از آدرس mytoolbox.ir بود. مثال زیر رو ببنید:
http://i.mytoolbox.ir/image1.jpg
http://i.mytoolbox.ir/image2.jpg
http://s.mytoolbox.ir/site.js
http://s.mytoolbox.ir/menu.js
http://c.mytoolbox.ir/style1.css
http://c.mytoolbox.ir/style2.css
این آدرس ها در واقع از یک محل از نظر فیزیکی هستند، اما چون آدرس سروری که به اونها اشاره میکنیم با هم متفاوت هستند بنابراین ارتباط موازی با این فایلها به صورت همزمان خواهد بود.
حالا اگر عکسهای سایت زیاد هست میشه چند ساب دامین ایجاد کرد که همه آنها به مکان نگهداری عکسها یعنی یکجا در سرور ما اشاره میکنند اما از نظر مرورگر، آدرسهای متفاوتی هستند. مثلا i1.mytoolbox.ir , i2.mytoolbox.ir . با استفاده از این روش، سرعت لود شدن سایتی که از عکس های زیادی استفاده میکنه رو میشه تا دو برابر رسوند.

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

Content Delivery Network چیست؟
همونطور که گفته شد، عوامل زیادی در سرعت لود شدن سایت شما در کامپیوتر کاربر دخیل هستند که ترفند اشاره شده در قسمت قبل مربوط میشه به رفتار مرورگر و نحوه ارتباط اون با سرور. نکته بعدی که باید در مورد اون شناخت داشت، همین ارتباط مرورگر با سرور هست.
برای لود شدن سایت، مرورگر باید درخواست تک تک فایلهای مربوط به اون صفحه وب رو به سرور ارسال کنه و سرور هم در پاسخ مرورگر، اون فایل رو براش ارسال کنه. بنابراین یک زمانی برای درخواست مرورگر و پاسخ سرور در نظر بگیرید و زمانی رو برای دانلود شدن اون فایل در کامپیوتر بازدیدکننده.
هدف ما کم کردن این زمان هست. این زمان بستگی داره به پهنای باند سرور و پهنای باند کاربر. اما عامل سومی هم هست که میتونیم بهش زمان انتقال بگیم. یعنی فاصله سرور تا کاربر. این فاصله زمانی رو میشه تشبیه کرد به فاصله زمانی که شما نیاز دارید از منزل به بانک مورد نظر خودتون برسید. فرض کنید بانکی که شما به اون نیاز دارید فقط یک شعبه در شهر شما داشته باشه، بنابراین شما اگه شانس داشته باشید خونه نزدیک به بانک باشه، میتونین با پای پیاده و در چند دقیقه به اون برسید، اما اگر شما در سمت دیگر شهر باشید، شاید با حساب ترافیک، یک ساعتی در راه باشید! ( میدونم شما عادت به بانکداری الکترونیکی دارید اما در این مثال، بیخیال شوید!) حالا فرض کنید بانک شما در چهار گوشه شهر، شعبه های جدید ایجاد کنه. حتما این دفعه که به بانک میروید، زمان کمتری رو صرف میکنید چون این بار میتونین انتخاب کنید و بانکی که به شما نزدیک تره رو به عنوان مسیر انتخاب کنید. در حالت بهتر اینکه این بانک در تمام محله های شهر، شعبه بزنه. حالا شما انتخاب های بیشتری دارید. اگر در محل کار هستید میتونید به شعبه شماره 45 که نزدیک محل کار هست برید و اگر در خانه هستید به شعبه 18.
همین مثال رو در مورد یک سایت در نظر بگیرید. اگر سایت شما یک سرور داشته باشه و اون هم مثلا در کشور کانادا باشه، تمامی بازدیدکننده های سایت شما باید با سروری در کانادا ارتباط برقرار کنند. چه اونی که تو ژاپن هست و چه اونی که تو خود کانادا هست. واضح هست که سرعت برای اشخاصی که به سرور دورتر هستند، کندتر خواهد بود. مثل همون بانک مثال ما در حالت اول که فقط یکی بود. در حالت دوم، ما سروری رو برای سایت خودمون انتخاب میکنیم که از طریق تکنولوژی های موجود در مهندسی شبکه، میتونه در چندین مکان فیزیکی قرار بگیره. مثلا در کانادا و ژاپن و اسپانیا و ایران(!) حالا اگر کاربر ایرانی درخواست این سایت رو داشته باشه، مجموعه سرور، متوجه یک درخواست از ایران میشه و کاربر رو به سرور ایران میفرسته یا اگر کاربری از فرانسه بخواد سایت رو ببینه، مجموعه ما اون رو به نزدیکترین سرور خودش یعنی اسپانیا میفرسته. بنابراین به این صورت، سرعت لود شدن صفحه، به علت کم کردن زمان انتقال، بیشتر خواهد شد.

به این مجموعه که در نقاط مختلفی داری سرور هست و بسته به محل درخواست، اون رو به نزدیکترین سرور هدایت میکنه، Content Delivery Network میگوییم. در واقع CDN رو میشه به صورت شبکه ای از کامپیوترهایی با وظیفه ارسال اطلاعات درخواستی به کاربر در کمترین زمان و انتخاب مناسبترین مسافت، تعریف کرد.
شرکتهای بزرگ مثل یاهو، مایکروسافت، فیسبوک و گوگل، برای خودشون چنین شبکه ای رو به صورت خصوصی دارند. و شرکتهای دیگری هم هستند که این سرویس رو به مشتری هاشون در قبال پرداخت هزینه ای ارایه میدهند. برای نمونه میشه از شرکتهایی مثل http://www.akamai.com و سرویس cloudfront شرکت آمازون نام برد.
CDN رو یکی از اهداف Cloud Computing هم میشه نام برد به این مفهوم که فایلهای شما مهم نیست در چه مکان فیزیکی قرار گرفته اند، مهم اینه که چجوری میشه به اون دسترسی پیدا کرد.

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

به صورت مستقیم از این آدرس در src مربوط به اسکریپت استفاده میکنید:

البته مایکروسافت هم اخیرا اعلام کرده که فایلهای مربوط به Microsoft Ajax و jQuery رو به صورت رایگان در CDN خودش قرار داده و ما میتونیم استفاده کنیم. در مورد استفاده از jQuery CDN، یک مطلب خواهم نوشت.

مزیت استفاده از یک فایل در یک CDN بزرگ مثل گوگل و مایکروسافت چیست؟
مزیت اول که در تعریف CDN توضیح داده شد یعنی به نسبت محل ما، سروری انتخاب میشه که فایل رو به ما زودتر برسونه. و اما مزیت دوم چیست؟ تعداد بسیار زیادی از سایتهای اینترنتی هستند از این CDN های اعلام شده رایگان (گوگل و مایکروسافت) استفاده می کنند. چون آدرس این فایلها ثابت هست و همه سایت ها دارن از این آدرس استفاده میکنند بنابراین شانس اینکه این فایل روی کامپیوتر کاربر شما قرارگرفته شده باشه بسیار بالاست. زیرا اگر کاربر، به اولین سایتی بره که از این قابلیت استفاده میکنه، این فایل مثل همه فایلهای دیگه برای مرورگر، در هارد کامپیوتر دانلود میشه و ذخیره میشه. به این ترتیب، مرورگر اگر در سایت دیگه ای به همین آدرس فایل برسه، اون رو دیگه دانلود نمیکنه و به همون فایلی که قبلا دانلود کرده رجوع میکنه و استفاده میکنه. بنابراین شما میتونین به اندازه حجم اون فایل، سرعت لود شدن سایت خودتون رو جلو بندازید.

Smashing Book Pre-Order

me — Tue, 29 Sep 2009 11:57:00 +0300

پیش فروش کتاب Smashing Book

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

کتاب اسمشینگ و سفارش خرید در ایران

حدود دو ماه پیش سایت Smashing Magazine اعلام کرد در حال چاپ کتابی هست با عنوان Smashing Book که این کتاب رو حاوی مطالبی برای طراحی وب سایت های مدرن، معرفی کرده که دارای 300 صفحه تمام رنگی هست که با قیمت بسیار مناسبی به نسبت این کیفیت قرار هست ارایه بشه.

این کتاب در حال حاضر در مراحل پایانی آماده شدن هست که طبق اعلام مسوولین، تا اواخر مهرماه، برای ارسال آماده خواهد شد.

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

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

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

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

آپدیت هفتم آذر:

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

آپدیت چهاردهم آذر:

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

آپدیت بیست و سوم آذر:

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

T-SQL new line

me — Wed, 23 Sep 2009 12:59:00 +0300

ایجاد خط جدید در T-SQL

اگر به صورت مستقیم نیاز به وارد کردن یک جمله در دیتابیس باشه، باید خط های جدید یا به قول خودمون اینتر های جمله رو به صورت دستی به T-SQL بفهمونیم.
print 'line 1' + char(13) + char(10) + 'line 2'
کاراکتر 13 مربوط به Carriage Return و کاراکتر 10 مربوط به Line Feed هست. بهتره هر دو با هم نوشته بشوند تا سیستم عاملهای مختلف، نتیجه رو یکسان نشان بدهند.