در ضمن به جز این کتاب ها، 26 مهر، سمینار CSS هم برگزار می شود که در این سمینار من فصل اول کتاب bulletproof web desgin نوشته آقای دن سدرهولم را آموزش می دهم. این کتاب برای افرادی نوشته شده که با CSS آشنایی دارند و مایلند که شیوه های مناسب طراحی وب با CSS را بیاموزند. در این سمینار به شما آموزش خواهم داد که سایز متن صفحه را به شکلی تنظیم کنید که در تمامی مرورگر ها قابل تنظیم باشد. در خلال آموزش این تکنیک ها، برخی از باگ های مرورگر IE نیز توضیح داده می شود و هک های مورد استفاده نیز توضیح داده خواهد شد.

برای این سمینار، حدود 70 دقیقه فیلم آموزش با فرمت AVI و با کیفیت بسیار بالا و سایز 1024 در 768 نیز آماده شده که بعد از پایان سمینار به شرکت کنندگان اهدا خواهد شد. سعی می کنیم این فیلم ها رو با codec H.264 نیز فشرده کنیم تا کم حجم شود و آن را بر روی وب نیز قرار دهیم تا عزیزانی که نمی توانند در سمینار شرکت کنند نیز از این فیلم ها استفاده کنند.

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

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

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

2- در مرکز قرار گرفتن طرح

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

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

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

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

کجا و چه وقت طرح ها را در مرکز صفحه قرار دهیم

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

3- تعداد ستون های کمتر

چند سال قبل طرح های 3 ستونی جزء طرح های رایج محسوب می شد و گاها طرح های 4 ستونی نیز دیده می شد ولی در حال حاضر بیشتر طرح ها دو ستونی است و طرح های سه ستونی نیز بین طرح ها دیده می شود.

چرا داشتن ستون کمتر، بهتر است

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

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

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

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

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

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

1- قابلیت وب گردی بدون به جا گذاشتن رد پا (incognito) در کروم را با توسعه دهنده stealther به فایرفاکس اضافه کنید

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

اکستنشنی به نام Stealther extension برای فایرفاکس وجود دارد که دقیقا همین قابلیت را به مرورگر شما اضافه می کند. تنها تفاوت این توسعه دهنده با قابلیت مرورگر کروم این است که مرورگر کروم این قابلیت را در یک پنجره جدید در اختیار شما قرار می دهد ولی این اکستنشن، این قابلیت را به طور کلی برای تمامی TAB های باز فایرفاکس فعال می کند. این اکستنشن بخش تنظیمات کاملی دارد که می توانید مشخص کنید که چه اطلاعاتی بر روی سیستم شما ذخیره نشود و یا حتی برای اجرای این قابلیت یه short cut تعریف کنید.

2- توسعه دهنده download statusbar دانلود های شما را در status bar نمایش می دهد.

محیط مرورگر chrome به شکلی طراحی شده است که از فضا نهایت استفاده برده شود و به جای اینکه دانلود های شما در صفحه ای مجزا نمایش داده شود، دانلود ها را به استیتوس بار می برد و در آنجا نمایش می دهد. ولی کافیست بدانید که اکستنشن download statusbar از 5 سال قبل این ویژگی را به فایرفاکس اضافه می کرده است. در ضمن این توسعه دهنده تنظیماتی بسیار بیشتر از مرورگر کروم دارد.

3- tab های خالی خود را با speed dial پر کنید

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

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

4- اضافه کردن Domain Highlighting به نوار آدرس فایرفاکس

نوار omni bar مرورگر کروم قابلیتی دارد که دومین اصلی سایت را با رنگ مشکلی نمایش می دهد و باقی آدرس صفحه را با رنگ خاکستری روشن نشان می دهد. این قابلیت به شما کمک می کند که در دام Phishing سایت های مخرب گرفتار نشوید. شاید فکر کنید که این قابلیت فقط برای کروم وجود دارد ولی حقیقت این است که این قابلیت با نصب توسعه دهنده Locationbar2 امکان پذیر است و این اکستنشن نیز از یک سال قبل در اختیار کاربران قرار داشته است.

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

5- توسعه دهنده prism هر صفحه وبی را به نرم افزاری مستقل تبدیل می کند

در کروم قابلیتی وجود دارد که از طریق آن می توانید یک صفحه وب را به اپلیکیشنی مستقل تبدیل کنید که در پنجره ای مستقل و بدون داشتن نوار آدرس و کاملا مجزا از مرورگر شما اجرا شود. این قابلیت چیز جدیدی نیست. از مدتی قبل موزیلا Prism را توسعه می دهد که عملکردی مشابه دارد و با نصب توسعه دهنده Prism for Firefox می توانید از منوی tools هر صفحه ای را به اپلیکیشنی مستقل تبدیل کنید.

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

پی نوشت
دوستان هم مقالاتی در مورد اضافه کردن امکانات کورم نوشتن ”
وب گردی با ظاهر گوگل کروم به همراه امنیت و امکانات فایرفاکس

1- توسعه دهنده ها (extensions) و قالب های (themes) نصب شده را به روز کنید

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

موزیلا لیستی از توسعه دهنده های مشکل زا را در اینجا جمع آوری کرده که در همان صفحه، ترفند هایی برای حل مشکل این توسعه دهنده ها نیز ارائه شده.

2- افزونه ها (plugins) را به روز نگه دارید

در بین افزونه ها موجود همیشه adobe reader, flash, shockwave  و java بیشترین مشکلات را ایجاد می کنند. همیشه نسخه افزونه های مربوطه را به روز نگه دارید.

باز شدن فایل های PDF داخل مرورگر همیشه مقدار زیادی RAM و توان CPU را مصرف می کند. می توانید با مراجعه به منوی tools > options > applications ، گزینه adobe acrobat document را بر روی save file تنظیم کنید. به این تصویر دقت کنید:

از این طریق دیگر فایل های PDF داخل مرورگر باز نمی شوند و دانلود شده و بر روی هارد شما قرار می گیرند.

3 - history مربوط به download های خود را پاک کنید.

یکی از مواردی که باعث کند شدن و بالارفتن میزان مصرف رم می شود، لیست download های شماست. شما می توانید فایرفاکس را طوری تنظیم کنید که بعد از دانلود موفقیت آمیز یک فایل، آن فایل را از داخل لیست حذف کند. به این شکل حجم فایل دانلود های شما بی جهت افزایش نمی یابد. برای این کار وارد tools > options > privacy > history شده و تیک گزینه Remember what I’ve downloaded را حذف کنید. به این تصویر دقت کنید:

4- استفاده از config.trim برای خالی کردن RAM در زمان minimize شدن firefox

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

برای این کار باید اول در نوار آدرس عبارت about:config را تایپ کنید. سپس صفحه ای باز خواهد شد:

حال باید بر روی گزینه I’ll be careful, I promise کلیک کنید تا بتوانید وارد بخش تنظیمات فایرفاکس شوید. بر روی صفحه جدیدی که می بینید کلیک راست کنید، گزینه new و سپس Boolean را انتخاب کنید:

بعد از کلیک بر روی این گزینه، پنجره ای جدید باز می شود که باید مقدار config.trim_on_minimize را در آن بنویسید و سپس OK را بزنید.

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

حال روی دکمه OK کلیک کنید. یکبار فایرفاکس خود را ری استارت کنید. اکنون در زمان هایی که فایرفاکس شما رم زیادی مصرف کرده است آن را minimize کنید. مصرف رم شما به شدت کم شده و به حدود 8 مگابایت می رسد ولی کم کم بالا می رود. بعد از چند ثانیه دوباره فایرفاکس خود را maximize کنید. این بار مقدار زیادی از رمی که فایرفاکس اشغال کرده بود آزاد می شود. از طریق این شیوه گاها می توانید بیش از 30 مگابایت رم را آزاد کنید.

هر زمان که RAM سیستم را ارتقا دادید و یا به هر دلیلی مایل به استفاده از این ترفند نبودید. تنها کافیست که همان کلید را پیدا کنید و مقدارش را معادل False قرار دهید.

5- تعیین مقدار رم مصرفی فایرفاکس با browser.cache.memory.capacity

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

برای اینکار اول باید چک کنید تا مطمئن شیود که قابلیت کش کردن در مرورگر فعال است یا خیر. در نوار آدرس about:config را بزنید و در صفحه ای که باز می شود در بخش filter عبارت:
browser.cache.memory.enable را وارد کنید. مقدار این کلید حتما باید true باشد. اگر نیست، آن را معادل true قرار دهید:

سپس بر روی صفحه کلیک راست کنید و از گزینه New گزینه Integer را انتخاب کنید:

بعد از این مرحله در پنجره ای که باز می شود عبارت browser.cache.memory.capacity را وارد کنید:

حال پنجره ای برای وارد کردن مقدار باز می شود. من بر روی سیستم 512 مگابایت رم دارم. اگر 512 مگابایت رم دارید مقدار 8192 را وارد کنید و اگر 256 مگابایت رم روی سیستم در اختیار دارید، مقدار 4096 را وارد کنید:

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

درصورتی که بخواهید این مقدار را به حالت استاندارد و پیش فرض در آورید باید در فیلد مقدار، عدد 1- (منفی یک) را وارد کنید تا دوباره فایرفاکس در مورد مقدار رم مصرفی تصمیم بگیرد.

این ترفند ها برای کسانی مناسب است که مقدار رم کم (256 یا 512) بر روی سیستم خود دارند و یا در صورت داشتن رم بیشتر (مثلا یک گیگابایت) ، برنامه های سنگینی (همانند photoshop ) را نیز در حین وب گردی باز نگه می دارند. در صورتی که رم کافی بر روی سیستم دارید ، احتیاجی به این ترفند ها نخواهید داشت

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

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

1. JavaScriptCore: این موتور در حال حاضر بر روی safari/webkit نصب شده و تا نسخه 3.1 سافاری از این موتور استفاده می کند
2. Squirrelfish : این موتور برای safari نسخه 4 آماده شده است و در حال حاضر نسخه نهایی آن آماده نیست ولی در نسخه nightly این مروگر می شود آن را تست کرد. توجه : متاسفانه تست Dromaeo بر روی نسخه nightly این مرورگر با شکست مواجه شد لذا این موتور از لیست نتایج حذف گردید.
3. V8 : موتور استفاده شده در مرورگر chrome شرکت گوگل
4. SpiderMonkey : این موتور بر روی فایرفاکس 3 نصب شده و تا آخرین نسخه فایرفاکس از این موتور استفاده می کند
5. TraceMonkey : که برای نسخه 3.1 فایرفاکس آماده شده است و در حال حاضر در نسخه nightly فایرفاکس وجود دارد و در حالت عادی غیر فعال است. مطالبی در مورد این موتور جدید در پست “آیا فایرفاکس با SpiderMonkey وب را متحول خواهد کرد ؟” نوشته ام.
6. Futhark : این موتور بر روی اپرا 9.5 و نسخه های جدیدتر نصب است
7. IE JScript : که بر روی نسخه های مختلف اینترنت اکسپلورر از آن استفاده می شود.

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

ما مرورگر ها را با سه مجموعه تست ، آزمودیم که لیست این آزمون ها به قرار ذیل است:

• SunSpider : یک تست مشهور جاوا اسکریپت است که توسط تیم WebKit ایجاد شده است. این تست فقط موتور های جاوا اسکریپت را از لحاظ کارآیی تست می کند ( هیچ عملیاتی در بخش رندر کردن یا ایجاد تغییرات در درخت DOM انجام نمی شود). این مجموعه دارای تست های زیادی است (مانند آبجکت ها، فراخوانی توابع، معادلات ریاضی، حلقه ها و … ).
• V8 Benchmark : یک تست که توسط تیم V8 ساخته شده و تنها کارایی موتور های جاوا اسکریپت را می سنجد آن هم با تاکید زیاد بر روی کارایی موتور ها در اجرای حلقه ها در برنامه.
• Dromaeo : این مجموعه تست توسط موزیلا طراحی شده است و javascript, DOM و کارایی کتابخانه های جاوااسکریپت را بررسی می کند. این مجموعه شامل تست های فراوانی است و بخش اعظم این تست ها، کارایی  DOM و کتابخانه های جاوااسکریپت را بررسی می کنند.

SunSpider

اجازه بدهید به آمار تست سان اسپایدر تیم وب کیت نگاهی بندازیم (که مجموعه ای از تست ها را برای آزمودن موتور ها در اجرای جاوا اسکریپت خالص و ناب را شامل می شود). نتایج بدین گونه بود:

تقریبا نتایجی نزدیک به هم را مشاهده می کنیم که chrome با اختلافی اندک در این تست پیروز است (به نتیجه افتضاح اینترنت اکسپلورر توجه نکنید). کروم در این تست به یقین سریعترین بوده است. البته دقت کنید که در این تست موتور tracemonkey جدید استفاده نشده است و در حالت عادی تست انجام گرفته است.

Brendan Eich مقایسه ای را شب گذشته بین Tracemonkey و V8 انجام داده که نتیجه اش اینگونه بوده است:

در اینجا کاملا مشهود است که موتور TraceMonkey که تنها 2 ماه بر روی آن کار شده است نتایجی به مراتب بهتر از موتور V8 که بیشتر از دو سال صرف برنامه نویسی آن شده است، عمل کرده است.

چیزی که موتور TraceMonkey را عقب تر از رقیبان قرار می دهد این است که در این لحظه هنوز متد های Tracing بر روی حلقه ها کار نمی کنند [ در این مورد در مقاله قبل توضیح داده بودم ] و همین مورد باعث می شود که در برخی از تست ها موتور V8  تا 10 بار سریعتر از TraceMonkey باشد. هر گاه نسخه 3.1 مرورگر فایرفاکس آماده شد من حتما این تست ها رو از نو انجام خواهم داد.

تست V8 شرکت گوگل

تیم کروم مجموعه تست خودشان را منتشر کرده اند که شامل تست های کمی است (البته این تست ها با SunSpider تفاوت دارند ) و به شدت موتور ها را برای تست قابلیت در حلقه ها تست می کنند. نتایج این تست بدین شکل بود:

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

در ضمن دقت کنید که در این تست TraceMonkey عملکرد ضعیفی دارد ولی به یاد داشته باشید که قبلا توضیح دادم که tracing در حال حاضر بر روی حلقه ها کار نمی کند.

تست Dromaeo به همراه DOM

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

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

نتیجه برای تست DOM ، جاوا اسکریپت و تست کتابخانه ها به این شکل بود:

متاسفانه IE در نتایج تست نیست چون به دفعات در هنگام اجرای این تست crash کرد. در ضمن WebKit نسخه nightly نیز به خاطر وجود یک باگ در آن crash کرده و تست کردن آن امکان پذیر نبود.

اکنون ما نتایج دیگری می بینیم. مرورگر های بر پایه WebKit بهترین عملکرد را دارند در حالی که chrome از نظر سرعت بعد از نسخه قدیمی webkit قرار گرفته است. در اینجا TraceMonkey کمی عملکرد بهتری داشته است ولی باز به علت اینکه متد های tracing بر روی DOM نیز عمل نمی کنند [ این مورد هم در مقاله قبلی توضیح داده شده بود ] نتوانسته نهایت قدرت خود را نشان دهد. قابلیت tracing برای DOM احتمالا برای نسخه 3.2 فایرفاکس یا نسخه های بعدی آماده خواهد شد.

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

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

تیم mozilla firefox هم بی کار ننشسته. اخیرا تیم موزیلا فایرفاکس بر روی موتور رندر جاوااسکریپت جدید به نام SpiderMonkey کار می کنند که از نظر سرعت به مراتب سریعتر از موتور javascript حال حاضر است. این موتور جدید حتی از squirrelFish نیز سریعتر بوده و قرار است همراه با نسخه فایرفاکس 3.1 عرضه گردد.

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

در حال حاضر فعالان بخش جاوااسکریپت موزیلا، افرادی همچون Andreas Gal, Brendan Eich, Dave Anderson, Mike Shaver, بر روی این پروژه کار می کنند و هدف این تیم اضافه کردن تکنیکی به نام trace trees را به موتور جاوااسکریپت فایرفاکس اضافه کنند که در صورت انجام این کار، سرعت رندر شدن فایل های جاوا اسکریپت همانند کدهای کامپایل شده، به صورت تقریبا آنی انجام خواهد گرفت.

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

برای دیدن بقیه تصاویر می توانید به این پست وبلاگ brendan eich (خالق جاوااسکریپت) مراجعه کنید.

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

• در تست SunSpider این موتور 1.83 بار سریعتر است
• در تست SunSpider ubench که توسط تیم سافاری برای تست squirrel طراحی شده که در این تست نیز این موتور 22.5 بار سریعتر از موتور فعلی است
• در تست Image Manipulation Demo که در آن کنتراست و روشنایی تصویر با جاوا اسکریپت تغییر می کند 6.46 بار سریعتر است.
• در تست Matrix Manipulation نیز این موتور 6.26 بار سریعتر است.

اگر شما می خواهید شخصا این موتور رندر جدید را امتحان کنید باید نسخه نسخه nightly مرورگر Firefox 3.1 را نصب کنید. در نوار آدرس about:config و سپس این خط را پیدا کنید:
javascript.options.jit.content
و مقدار آن را معادل true قرار دهید و مرورگر خود را restart کنید. حال می توانید قابلیت این موتور رندر جدید را شخصا امتحان کنید. نکته جالب توجه اینجاست که این موتور رندر جدید محدود به دسکتاپ نمی شود و ابزار هایی مثل گوشی های موبایل نیز می توانند از آن استفاده کنند.

کدهای این پروژه از منابع مختلفی جمع آوری شده است. بخش اعظم کد این پروژه توسط شرکت adobe در اختیار mozilla قرار گرفته است.پروژه tarmin توسط adobe ایجاد شده و بر روی آن کار می شود.

تیم موزیلا از حدود 3 ماه قبل کار بر روی این پروژه را آغاز کرده و سعی دارد تکنولوژی nanojit که از tarmin شرکت abode به دست آمده را به SpiderMonkey اضافه کند. کد کامل این پروژه را میتوانید در اینجا بیابید. در حال حاضر این تکنولوژی بر روی متد های DOM کار نمی کند ولی به زودی این مشکل برطرف می شود و نه تنها محاسبات ریاضی سرعت می گیرد بلکه ویرایش اجزای صفحه با جاوا اسکریپت (DOM manipulation) نیز بسیار سریعتر خواهد شد.

تحقق این امر بدان معنی است که دیگر جاوااسکریپت آن زبان محدود گذشته نیست و با این تحول جدید این زبان قدرتی معادل زبان برنامه نویسی C پیدا خواهد کرد. در آینده با استفاده از این قابلیت جدید برنامه هایی نوشته خواهند شد که سنگین ترین معادلات را بر روی تصاویر و اجزای داخل DOM انجام خواهند داد.  به نظر می رسد با انتشار firefox 3.1 تحول بزرگی در وب به وجود خواهد آمد.

1 - طراحی جدید friendfeed

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

2 - اضافه کردن تصاویر از روی هارد درایو سیستم

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

3 - لیست دوستان

یکی از تغییرات خوب این نسخه بخش لیست دوستان است. در این نسخه شما می توانید دسته بندی های مختلف ایجاد کنید و دوستان خود را در این دسته ها قرار دهید. به عنوان مثال من می توانم یک دسته به نام طراحی وب ایجاد کنم و آقای X و خانم Y را که در طراحی وب مهارت دارند را در این بخش قرار دهم. هر گاه بخواهم فعالیت های این دو دوست را ببینم ، فقط کافیست که بر روی نام دسته طراحی وب کلیک کنم. سپس وارد صفحه ای می شوم که تمام فعالیت این دو دست در آن به نمایش در آمده. اگر بخواهم فقط فعالیت کاربر خاصی در یک دسته خاص را مشاهده کنم می توانم بر روی مثلث آبی کنار نام دسته طراحی وب کلیک کنم تا لیست نام دوستان باز شود و از داخل لیست روی نام دوست مورد نظر کلیک کنم تا پست ها و کامنت های آن فرد را ببینم. در ضمن ، زمانی که در صفحه مربوط به دسته بندی دوستانتان هستید می توانید از گزینه های best of day  و best of week استفاده کنید تا متوجه شوید که چه پست های پرطرفداری بوده که دوستانتان در آن فعالیت داشته اند.

4 - مدیریت بهتر بخش friend setting

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

5 - پیمایش سریع

در این نسخه تمامی لینک های پر استفاده مثل لینک دسته بندی دوستان و لینک به اتاق ها و فید هایتان در ستون کاری قرار داد و برای ورود به این بخش ها تنها یک کلیک کافی است. در نسخه قبل برای ورود به اتاق خاص مجبور بودید اول وارد tab اتاق ها شوید و اتاق مورد نظر را انتخاب کنید ولی در نسخه جدید تنها با کلیک بر روی اسم اتاق در لیست کناری می توانید به اتاق مورد نظر بروید. در حالت عادی سه اتاق در ستون کناری نمایش داده می شود و باقی اتاق ها در داخل یک لیست قرار دارند که با کلیک بر روی گزینه see all می توانید همه آنها را ببینید. در بخش pref هم می توانید آن سه اتاقی را که در ستون کناری نمایش داده می شوند را مشخص کنید.

6 - قابلیت دیدن صفحه feed اصلی هر کاربر

قابلیت جدید دیگری که در این نسخه اضافه شده است ، قابلیت دیدن صفحه feed اصلی هر کاربر است. قطعا افراد زیادی هستند که من آن ها را subscribe کرده ام ولی بقیه دوستانم این افراد را نمی شناسند. ولی با اضافه شدن دیدن صفحه feed اصلی ، حال هر کس می تواند با مراجعه به صفحه http://beta.friendfeed.com/amirabbas/friends دقیقا همان صفحه ای را ببینند که من بر روی سیستم خودم می بینم. دقیقا همان مطالبی که دوستان من share کرده اند در صفحه ای که لینک شده است نمایش داده می شود. به عنوان مثال اگر من در طراحی اطلاعاتی داشته باشم و کسانی که subscribe کرده ام نیز طراحان خوبی باشند، شما با مراجعه به آن صفحه می توانید آن دوستان را نیز بیابید . از این طریق می توانید افراد با گرایش های خاص را پیدا کنید و آن ها را subscribe کنید.

پی نوشت :

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

استایل ( style ) فارسی برای فرندفید ( friendfeed )

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

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

اگر اشکالی در این استایل مشاهده کردید، حتما اطلاع بدهید که در نسخه های بعدی این اشکالات را برطرف کنم. اشکالات را می توانید در بخش کامنت مطرح کنید یا از طریق ایمیل amirabbas[dot]abdolali[at]gmail[dot]com برایم ارسال کنید.

در ادامه هر مورد را یک به یک بررسی می کنیم:

1- نسخه وردپرسی را که از آن استفاده می کنید، مخفی کنید :

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

برای حذف این شماره باید حداکثر دو فایل را ویرایش کنید. مورد اول در داخل فایل header.php است که باید به دنبال این خط از کد بگردید:

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

که باید این خط را به این شکل تغییر دهید :

<meta name="generator" content="WordPress" />

ولی در بعضی از قالب ها این شماره نسخه در دو جا نمایش داده می شود. برای حذف شماره نسخه در مکان دوم باید این کد را به فایل function.php موجود در داخل پوشه theme اضافه کنید:

<?php remove_action('wp_head', 'wp_generator'); ?>

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

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

http://www.example.com/readme.html

به جای example نام سایت مورد نظر را قرار دهید. خواهید دید که بسیاری از کاربران ورد پرس این فایل را از روی سرور خود حذف نکرده اند !!

2- دایرکتوری هایی که صفحه index ندارند ، می توانند مشکل ساز شوند !

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

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

برای رفع این مشکل دو راه وجود دارد. راه حل ساده این است که یک فایل Index.html بسازید و داخل دایرکتوری پلاگین قرار دهید و شیوه دوم و اصولی تر این است که دستوری را به فایل htaccess. موجود در root اضافه کنید تا هر کس سعی کرد ، دایرکتوری هایی را که صفحه index ندارند را ببیند، به صفحه پیغام خطای 404 هدایت شود. برای این کار باید این خط را به آخر فایل htaccess. خود اضافه کنید

# Prevents directory listing
Options -Indexes

بعد از اضافه شدن این دستور دیگر کسی نمی تواند محتوای دایرکتوری هایی که ایندکس ندارند را ببیند. به عنوان مثال می توانید دایرکتوری پلاگین همین وبلاگ در آدرس http://www.4goosh.com/wp-content/plugins را چک کنید.

3- نسخه وردپرس را همیشه به روز نگه دارید

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

4- سطوح دسترسی (premissions) را به درستی تنظیم کنید

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

5- دسترسی به پوشه wp-admin را محدود کنید

اگر دسترسی ها را به این پوشه محدود کنید ، به میزان زیادی امنیت سیستم خود را افزایش داده اید. این پوشه را به دو شکل می توان محدود کرد. شیوه اول محدود کردن دسترسی به این پوشه با استفاده از فایل htaccess. و آدرس IP است. این شیوه فقط زمانی کاربرد دارد که شما از IP Static استفاده می کنید. بیشتر کاربران ایرانی از ip های داینامیک استفاده می کنند و این شیوه برای آنها مناسب نیست ولی اگر احیانا کسانی باشند که از آی پی استاتیک استفاده می کنند، کافیست که داخل پوشه wp-admin یک فایل htaccess. بسازند و این تکه کد را داخل آن قرار دهند:

order deny,allow
deny from all
# allow my home IP address
allow from XX.XX.XXX.XXX
# allow my work IP address
allow from XX.XX.XXX.XXX

به جای X ها باید آدرس آی پی خود را قرار دهند. می توانید به تعداد دلخواه به آدرس آی پی اضافه کنید و تنها همین آدرس ها می توانند به آن پوشه دسترسی داشته باشند و باقی افرادی که سعی داشته باشند وارد دایرکتوری wp-admin شوند، به صفحه پیغام خطای 404 هدایت می شوند.

افرادی که از آدرس های IP داینامیک استفاده می کنند می توانند پوشه wp-admin را پسورد گذاری کنند. با استفاده از قابلیت موجود در داخل CPanel هاست خود می توانید این کار را به راحتی انجام دهید.

توجه: شخصا موفق نشدم که پوشه wp-admin را بر روی یکی از سرور هایی که از آن استفاده میکنم ، پسورد گذاری کنم. به نظر میرسد تحت شرایط خاص و در صورت فعال بودن rewrite rule های مربوط به پیوند های یکتا ( permalinks ) این قابلیت به درستی کار نمی کند و شما در هر حالت به صفحه 404 هدایت می شوید. این مورد را در فورم پشتیبانی وردپرس سوال کردم ام. در صورت به نتیجه رسیدن ، راه حل را در همین بخش قرار خواهم داد.

6- پسورد های خود را مطمئن و طولانی انتخاب کنید

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

همچنین سعی کنید که username وارد شدن به بخش ادمین را که به شکل پیش فرض admin است را تعویض کنید. در حالت پیش فرض این یوزنیم admin است و نیمی از زحمت هکر برای وارد شدن به بخش ادمین را کم کرده است. حتما این کلمه را تغییر دهید.

[شیوه تغییر کلمه عبور admin را فراموش کرده بودم که بنویسم. ممنون از دوستان که در کامنت ها این نکته را یادآوری کردند]

برای تغییر کلمه عبور admin می توانید از phpmyadmin موجود بر روی هاست خود استفاده کنید ولی اگر تا به حال با این برنامه کار نکرده اید می توانید از پلاگین change admin username استفاده کنید. بعد از نصب این پلاگین و فعال کردنش ، به بخش کاربران مراجعت کنید، در این بخش گزینه change username به لینک های بالای همان بخش اضافه شده است. دقت کنید که بعد از تغییر کلمه عبور حتما باید یکبار logout  کرده و دوباره login کنید.

7- جلوی ایندکس شدن احتمالی محتوای پوشه های wp  رو بگیرید

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

Disallow: /wp-

اگر در حال حاضر هیچ فایل robots.txt ای روی سرور خود ندارید، می توانید از این دستورات را در داخل یک فایل با نام robots و پسوند txt ذخیره کنید و بر روی root سرور خود قرار دهید

User-agent: *
# disallow all files in these WordPress directories
Disallow: /wp-content/
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /wp-
# disallow all files in these directories
Disallow: /tag/
Disallow: /cgi-bin/
# disallow robots from parsing individual post feeds and trackbacks
Disallow: /feed/
Disallow: /trackback/
Disallow: */trackback*
# disallow any files that are stats related
Disallow: /stats*
Disallow: /about/legal-notice/
Disallow: /about/copyright-policy/
Disallow: /about/terms-and-conditions/
Disallow: /tag
Disallow: /docs*
Disallow: /manual*
Disallow: /category/uncategorized*
# disallow files ending with the following extensions
User-agent: Googlebot
Disallow: /*.php$
Disallow: /*.js$
Disallow: /*.inc$
Disallow: /*.css$
Disallow: /*.gz$
Disallow: /*.cgi$
Disallow: /*.wmv$
Disallow: /*.php*
Disallow: /*.gz$
Allow: /wp-content/uploads/
#disallow WayBack archiving site
User-agent: ia_archiver
Disallow: /

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

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

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

عزیزانی که دوست دارند در طراحی های خود از ظاهر سایت های wrb 2.0 پیروی کنند، می توانند به بخش وب 2.0 سایت template monster مراجعه کنند. سایت go2web20.net نیز گزینه مناسبی برای دیدن سایت های وب 2.0 است.

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

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

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

1- سادگی

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

چرا سادگی خوب است

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

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

چه وقت و چگونه باید طرحمان را ساده کنیم

چه وقت ؟
همیشه

چگونه ؟
دو اصل مهم برای موفقیت در استفاده از سادگی این موارد هستند:

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

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

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

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

سادگی به این معناست:
از تصاویر فقط زمانی استفاده کنید که به آنها نیاز دارید و از آنها در جای مناسب استفاده کنید تا بتوانید از طریق آنها با کاربر ارتباط برقرار کنید.

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

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

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

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

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

در بخش های بعدی در مورد جنبه های دیگر طراحی های وب 2.0 بحث خواهیم کرد.

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

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

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

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

      <script type='text/javascript' src='jquery-1.2.6.pack.js'></script>
      <script type='text/javascript' src='design.js'></script>
</body>

در بین دستورات CSS ، کلاسی به نام quote آماده شده است. می خواهیم این کلاس را به تمامی blockquote های داخل صفحه اختصاص دهیم. حال باید فایل design.js را بسازیم. نام فایل مهم نیست. می توانید نام آن را هر چه دوست دارید بگذارید. برای ساخت این فایل می توانید از notepad استفاده کنید. Notepad را باز کنید و file > save as را بزنید، در بخش file name باید نام فایل را به همراه پسوند js بنویسید و کل عبارت را داخل علامت نقل قول ( ” ” )  قرار دهید و ذخیره کنید تا فایل شما آماده شود.

حال همین فایل design.js را باز می کنیم تا دستورات را داخل آن بنویسیم.

نخست ما باید تمامی تگ های blockquote داخل صفحه خود را با استفاده از جی کوئری پیدا کنیم. در جی کوئری هر گاه بخواهیم چیزی را داخل صفحه جستجو کنیم از ( )$ استفاده می کنیم. هر چیزی که داخل دو پرانتز قرار بگیرید در داخل صفحه جستجو خواهد شد. ما هر چیزی را داخل صفحه می توانیم جستجو کنیم. می توانیم تگ مربوطه را در بین پرانتز وارد کنیم و یا نام کلاس یا ID عنصر مورد نظر را وارد کنید. در اینجا ما می خواهیم که تگ های blockquote داخل صفحه را بیابیم تا بتوانیم کلاس مورد نظرمان را به آن اضافه کنیم. برای یافتن blockquote های داخل صفحه باید کدی به این شکل بنویسیم

$('blockquote')

دقت کنید که نام تگ را باید بدون علامت های < و > بنویسید و نام تگ باید حتما در بین علامت نقل قول ” یا ‘ قرار بگیرد.

در مرحله بعدی ما باید از یک متد استفاده کنیم تا کلاس مورد نظرمان را به تگ های blockquote اضافه کنیم. متدی در جی کوئری وجود دارد که دقیقا به همین منظور طراحی شده است. متد addClass به شما این قدرت را می دهد که به هر عنصری که در صفحه جستجو کرده اید ، هر کلاسی که دوست دارید را اختصاص بدهید. کلاسی که ما آماده کرده بودیم ، quote بود. حال این کلاس را به blockquote ها اضافه می کنیم. کدی که می نویسیم باید به این شکل باشد:

$('blockquote').addClass('quote');

نام کلاس را باید بدون نقطه آغازین بنویسیم و مانند بخش قبل ، نام کلاس باید بین علامت نقل قول باشد. در پایان خط هم سمیکالن ( ; ) قرار می دهیم. در جاوا اسکریپت هر زمان که دستورات یک خط تمام می شود باید در پایان خط علامت سمیکالن را قرار دهیم.

اکنون جی کوئری در داخل کد صفحه جستجو می کند و لیستی از تمامی تگ های blockquote ایجاد می کند. سپس کلاس quote را به همه آنها اضافه می کند ( در فایل مثالی که آماده شده است تنها یک تگ blockquote وجود دارد ولی شما می توانید فایل را ویرایش کنید و به تعداد دلخواه تگ blockquote به آن اضافه کنید و نتیجه را ببینید. )

اگر ما تنها همین یک خط را در داخل فایل design.js قرار دهیم کافیست ولی این کد به محض لود شدن صفحه اجرا خواهد شد. گاهی اوقات این اجرا شدن به قدری سریع اتفاق می افتد که هنوز صفحه لود نشده و عملا اتفاق خاصی نمیافتد و کلاس مورد نظر ما به blockquote ها اختصاص نمی یابد. ما باید زمان اجرا شدن جاوا اسکریپت را به تاخیر بیندازیم تا اول صفحه load شود ، سپس فایل جاوا اسکریپت اجرا شود. به همین خاطر باید از event handler ها استفاده کنیم. event handler های مختلفی وجود دارد و اگر jQuery یک event handler مخصوص به خودش برای این منظور نداشت ما مجبور بودیم از handler ای به نام onload استفاده کنیم . این handler اجرای جاوا اسکریپت را به تاخیر می اندازد تا صفحه به طور کامل به همراه تصاویرش load شود و پس از آن فایل جاوا اسکریپت اجرا خواهد شد. برای استفاده از این handler ما باید یک تابعی (function) بنویسیم که دستورمان داخل آن قرار گیرد. بدین شکل :

function quoteclass() {
     $('blockquote').addClass('quote');
     }

سپس باید این تابع را به تگ body پیوست کنیم. بدین شکل:
<body onload="quoteclass();">

استفاده از این handler سه ضعف عمده دارد :
1- شما مجبور خواهید بود که فایل HTML خود را ویرایش کرده و تابع را به تگ body اضافه کنید
2- برای اجرا شدن جاوا اسکریپت باید صبر کنید تا تمامی تصاویر نیز load بشوند. در صورتی که صفحه مملو از تصاویر باشد باید زمان زیادی را منتظر باشید تا جاوا اسکریپت اجرا شود.
3- در هر بار تنها می توان یک behavior را به body اضافه کرد و در صورتی که بخواهید behavior های دیگر را نیز به صفحه اضافه کنید، این کار به راحتی امکان پذیر نیست و مجبورید توابع دیگری برای این منظور بنویسید.

جی کوئری برای راحتی کاربران یک handler مخصوص به خود دارد که هیچ یک از ضعف های ذکر شده را ندارد. نخست اینکه این handler منتظر لود شدن تصاویر نمی ماند و بعد از load شدن فایل HTML اجرا خواهد شد، دیگر اینکه هر تعداد behavior را که بخواهید می توانید استفاده کنید و محدودیتی بابت تعداد behavior ها نخواهید داشت و علاوه بر این مواردی که ذکر شد هیچ احتیاجی به ویرایش فایل XHTML خود ندارید. از این handler باید به این شکل استفاده کنیم

$(document).ready(function() {
});

اکنون هر وقت بخواهیم دستوری را به جمع دستورات اضافه کنیم باید آن را در میان این handler بنویسیم به این شکل :

$(document).ready(function() {
    $('blockquote').addClass('quote');
});

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

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

فایل های تمرینی این مقاله را می توانید از اینجا دریافت کنید.