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

طراحی ساده و نسبتا قابل قبولی داره. ولی بین این وبلاگ ها با این موضوع من وبلاگ ReadWriteWeb رو ترجیح می دم از نظر طراحی و چیدمان …

در اینجا می تونید ۲ طرح قبلی TechCrunch رو هم ببینید…

+ نقد طراحی جدید تچ کرانچ

توقف و بدون ایده بودن توی دنیای رقابتی امروز یعنی نابودی … ایده های طراحی جدید قسمت مدیریت وردپرس رو در این PDF ببینید …

۱۱ ساعت پیش، شروع به کار طراحی پوسته جدید برای عصرونه، و حالا… فعلا یکسری از کارهاش مونده ولی خب جای انتقادات و پیشنهادات بازه … :-)

پی نوشت: نوع نوشتن نیز به کوتاه و مختصر تغییر می کنه
پی نوشت ۲: اگه مشکلی دیدید حتما بگید ;-)

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

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

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

قالب جدید جدای از زیبایی باید یکسری مشخصه ها داشته باشه که در هنگام طراحی روی اون ها تمرکز بشه. بطور مثال موارد زیر توی ذهنم هست :

• ساده ، سبک و سریع
• امکان گرفتن اطلاعات مهم توسط کاربر با سرعتی بالا
• قرار دادن اطلاعات مهم در صفحه اول
• احساس راحتی کاربر با سایت یا وبلاگ
• مانور روی RSS
• و …

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

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

در آخر: ما منتظر نظرات سازنده شما در مورد طراحی یک قالب خوب هستیم …

پی نوشت: پوسته شیراز رو سعی می کنم هرچه زودتر برای انتشار عمومی آماده کنم.

پی نوشت ۲: من سعی دارم بیشتر با نظرات دیگران در مورد طراحی یه قالب خوب آشنا بشم. شاید مطلبی در آینده در مورد نظرات دیگران در رابطه با این مطلب و آنالیز اونا نوشتم. سایت هایی که از نظر طراحی مورد علاقه خودتون هست همراه با دلیلشون رو حتما بنویسید …

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

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

- نمایش یکسان در مرورگر های فایرفاکس ۲ و ۳ – اپرا ۹ – سافاری ۳ – اینترنت اکسپلورر ۶ و ۷
- دارای فایل زبان
- دارای فایل rtl.css
- کدنویسی و خروجی XHTML صد در صد استاندارد
- استایل ( CSS ) معتبر و استاندارد
- بدون استفاده از حتی ۱ عدد جدول
- پشتیبانی از افزونه وردپرس فارسی
- پشتیبانی از ابزارک ها
- قابل نصب بر روی وردپرس نسخه ۲٫۲ – ۲٫۳ – ۲٫۵
- پشتیبانی از Gravatar با نصب افزونه و بدون نصب افزونه در نسخه ۲٫۵
- جداسازی نظرات و بازتاب ها
- متفاوت بودن استایل نظر نویسنده مطلب با دیگر نظرات یک مطلب
- صفحه اختصاصی برای بایگانی ماهانه، صفحه اختصاصی برای نویسنده ها، برچسب ها، موضوعات، جستجو و …
- ساخت منوی بالا بصورت دینامیک با قابلیت نمایش زیر صفحات بصورت لیست باز شو
- متغییر بودن تصویر بالای سایت و تغییر بصورت تصادفی
- و …

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

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

تیم طراحی موزیلا امروز اعلام کرد که در حال کار بر روی طراحی جدید سایت موزیلا در زمان آمدن فایرفاکس ۳ هست.

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

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

راستی به نظر شما کدامیک از این ۴ طرح بهتر هست؟

منبع: CyberNet

یکی از مهمترین قسمت های یک سایت ( و وبلاگ ) ستون کناری اون هست. در این مطلب قصد داریم آموزش کوتاهی داشته باشیم در رابطه با یکی ۲ تا ترفند در رابطه با طراحی این ستون با استفاده از زبان CSS.

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

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

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

تمام کد های بکار رفته در منوهایی که در این صفحه مشاهده می کنید تقریبا به یک صورت می باشد. ما برای آنالیز کد Tab Menu 2 رو انتخاب کردیم.

منوی ما در داخل یک تگ div با شناسه menu2 قرار گرفته. در ابتدا ما یک استایل کلی به این تگ می دهیم. استایل داده شده مشابه زیر می باشد:

#menu2 {
border: 1px solid #D8D5D1;
width: 200px;
}

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

حالا به قسمت بعد می رویم. این منو نیز همانند دیگر منو ها در بین تگ های ul قرار گرفته. در اینجا ما باید یک استایل کلی به این تگ بدیم:

ul {
list-style-type:none;
margin:0;
padding:0;
}

در حقیقت ۳ خط کد استفاده شده در قسمت بالا پیش فرض مرورگرها رو صفر و از بین می بره. برای از بین نخوردن طرح باید این دستورات اجرا بشه. با این کد دستورات نوشته شده به تمام تگ های ul اعمال می شه. اگه شما اینو دوست ندارید می تونید به جای استفاده از ul برای استایل دادن از عبارت div#menu2 ul استفاده کنید که دستورات به کار رفته فقط برای این قسمت اعمال بشه.

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

#menu2 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

3 خط اول مربوط به یک هک در CSS برای رفع مشکل مرورگر اینترنت اکسپلورر نسخه ۵٫۵ هست.
در خط چهارم ما یک ارتفاع ۲۴ پیکسلی دادیم. در مورد اینکه چرا این ارتفاع انتخاب شده در ادامه توضیح می دهیم. در خط آخر نیز ما تعیین کردیم که لینک ها در این قسمت خط زیرشون حذف بشه.
در ادامه ما به تگ a در زمانی که بصورت لینک است و زمانی که اون لینک بصورت بازدید شده است استایل می دهیم:

#menu2 li a:link, #menu2 li a:visited {
color: #3688BA;
display: block;
background: url(menu2.gif);
padding: 8px 0 0 30px;
}

در خط اول ما به لینک ها رنگ مورد نظر رو دادیم. در خط بعدی با دستور display: block تگ a موجود در این قسمت رو از حالت inline به block تغییر می دهیم. با استفاده از این کار عمل لینک به کل قسمت اعمال می شه.
در خط بعدی ما یک تصویر رو برای پشت زمینه این قسمت قرار دادیم. تصویر ما ۲۰۰ پیکسل عرض و ۶۴ پیکسل طول داره.
در آخرین خط نیز ما با دستور padding ما ۸ پیکسل از بالا به ارتقاع تگ a اضافه کردیم.
اگر توجه داشته باشید ما در قسمت قبل نیز یک ارتفاع ۲۴ پیکسلی داده بودیم که با این ۸ پیکسل مجموعا ۳۲ پیکسل می شه.
بدین صورت و دادن ارتفاع مشخص تنها ۳۲ پیکسل اول تصویر به نمایش در میاد و این یعنی ما دقیقا نصفه اول تصویر رو می بینیم.

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

#menu2 li a:hover {
color: #3688BA;
background: url(menu2.gif) 0 -32px;
padding: 8px 0 0 32px;
}

خط اول و سوم تقریبا کارشون رو توضیح دادیم در قسمت قبل. تنها تغییر مهم در این قسمت خط دوم هست. ما مثل قسمت قبل همون تصویر رو به عنوان پس زمینه به این قسمت دادیم و تنها با اضافه کردن عبارت ۰ -۳۲ طوری نمایش تصویر رو تنظیم کردیم که از ارتفاع -۳۲ پیکسلی به نمایش دربیاد و این یعنی نمایش قسمت دوم تصویر.

همانطور که ملاحظه کردید نحوه کار بسیار ساده و راحت هست.
این یکی از ترفند های بسیار جالب CSS هست که در قسمت های دیگه هم می شه ازش استفاده های جالبی کرد.
× توجه داشته باشید که نسخه ۶ اینترنت اکسپلورر دستور :hover را فقط به تگ a قبول می کنه.
× در کل این دستور بعضی مواقع با اینترنت اکسپلورر ۶ با مشکل مواجه می شه بنابراین حتما بعد از انجام این مراحل حتما کارتون رو در این مرورگر تست کنید.

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

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

.transparent_class {

 filter:alpha(opacity=50);

 -moz-opacity:0.5;

 -khtml-opacity: 0.5;

 opacity: 0.5;

}

توضیح کد بالا:
- دستور opacity :
این دستور مهمترین دستور بین کدهای بالا هست. این دستور بین در مرورگرهای جدید و استاندارد نظیر فایرفاکس – اپرا – سافاری بدون مشکل کار می کنه.
- دستور filter : این دستور مختص مرورگر اینترنت اکسپلورر هست که متاسفانه هنوز از استاندارد ها پشتیبانی نمی کنه و استاندارد های خاص خودش رو داره.
- دستور -moz-opacity : این دستور برای مرورگرهای قدیمی موزیلا که از دستور اول پشتیبانی نمی کنند استفاده می شه.
- دستور -khtml-opacity : این دستور نیز برای مرورگرهایی که از موتور پردازشی وب کیت ( نسخه های قدیمی ) استفاده می کردند استفاده می شه نظیر نسخه های قدیمی سافاری.

× مثال بالا کلاس transparent_class را ۵۰% شفاف می کند.
× با توجه به اینکه کاربران گروه سوم و چهارم بسیار کم هستند بنابراین شما می تونید از این دستورات صرف نظر کرده و در کدهای خود از ۲ دستور اول استفاده کنید.
× ترتیب دستورات مهمه.

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

a img:hover {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

جواب: متاسفانه در اینترنت اکسپلورر نسخه ۶ دستور hover تنها برای لینک ها کار می کنه بنابراین کد مورد نظر در این مرورگر مشکل خواهد داشت ( مشکلی در نسخه ۷ اینترنت اکسپلورر نمی باشد ).
راه حل: شما می تونید به لینک های مورد نظرتون یک کلاس بدید بعد با توجه به اون کلاس و تگ لینک این دستور را اجرا کنید :

a.transeffect:hover {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

منبع: CSS Tricks

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

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

Trident: موتور استفاده شده در مرورگر اینترنت اکسپلورر که پراستفاده ترین در بین کاربران است. این موتور توسط مایکروسافت ساخته و توسعه داده می شود ( می شود؟ ).
Trident نسخه ۴ در اینترنت اکسپلورر ۶ و نسخه ۵ در نسخه ۷ اینترنت اکسپلورر مورد استفاده قرار گرفته.
آمار استفاده در دنیا:
- نسخه ۳ ( استفاده شده در نسخه ۵٫۵ اینترنت اکسپلورر ): حدود ۱٫۵%
- نسخه ۴: حدود ۳۵%
- نسخه ۵: حدود ۲۰%
آمار استفاده در ایران:
- نسخه ۳: حدود ۰%
- نسخه ۴: حدود ۵۰%
- نسخه ۵: حدود ۱۶%

× پشتیبانی از استاندارد ها: بسیار ضعیف
- نسخه ۴ :
HTML / XHTML > حدود ۷۳%
CSS 2.1 > حدود ۵۱%
CSS 3 > حدود ۱۰%
DOM > حدود ۵۰%
- نسخه ۵ :
HTML / XHTML > حدود ۷۳%
CSS 2.1 > حدود ۵۶%
CSS 3 > حدود ۱۳%
DOM > حدود ۵۱%

موتور پردازشی Trident علاوه بر اینترنت اکسپلورر در دیگر محصولات مایکروسافت نظیر اوت لوک و مدیاپلیر نیز استفاده می شود.
از دیگر مرورگرهایی که از این موتور پردازشی استفاده می کنن می شه به Avant ، Maxthon ، نت اسکیپ اشاره کرد.
از برنامه هایی که از این موتور استفاده می کنند می شه به بیشتر فید خوان های تحت ویندوز ، winamp و Real Player اشاره کرد.

Gecko: این موتور پردازشگر توسط موزیلا ساخته و گسترش داده می شود. از نظر کاربران رتبه دوم رو در اختیار داره و در مرورگرهایی مثل فایرفاکس ، نت اسکیپ ، Flock و … استفاده می شود.
نسخه ۱٫۸ آن در مرورگر هایی که هم اکنون موجود هستند مورد استفاده قرار گرفته و نسخه ۱٫۹ آن در مرورگرهای بتا نظیر فایرفاکس ۳ در حال استفاده و گسترش است.
آمار استفاده در دنیا:
- حدود ۳۷%
آمار استفاده در ایران:
- حدود ۳۰%

× پشتیبانی از استاندارد ها: بسیار عالی
- نسخه ۱٫۸ :
HTML / XHTML > حدود ۹۰%
CSS 2.1 > حدود ۹۲%
CSS 3 > حدود ۲۴%
DOM > حدود ۷۹%

معروفترین مرورگرهایی که از این موتور استفاده می کنند عبارتند از: فایرفاکس – موزیلا – نت اسکیپ – مکستون – Camino – SeaMonkey
از برنامه هایی که از این موتور پردازشی استفاده می کنند می شه به محصولات موزیلا از جمله تاندربیرد اشاره کرد و بعضی از فید ریدر ها در ویندوز و لینوکس.

Presto: موتور پردازشی مرورگر اپرا که تنها در این مرورگر مورد استفاده قرار می گیره و توسط سازندگان آن گسترش پیدا می کنه.
آمار استفاده در دنیا:
- حدود ۱٫۵%
آمار استفاده در ایران:
- حدود ۵%

× پشتیبانی از استاندارد ها: بسیار عالی
- نسخه استفاده شده در اپرا ۹ :
HTML / XHTML > حدود ۸۵%
CSS 2.1 > حدود ۹۴%
CSS 3 > حدود ۱۹%
DOM > حدود ۸۴%

از برنامه هایی که از این موتور پردازشی استفاده می کنند می توان به مرورگرهای نینتندو Wii ، نوکیا ۷۷۰ اشاره کرد.

WebKit: موتور پردازشی مرورگر سافاری شرکت اپل.
آمار استفاده در دنیا:
- حدود ۱٫۶%
آمار استفاده در ایران:
- حدود ۰%
× پشتیبانی از استاندارد ها: در حد مطلوب و خوب

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

× موتور های Gecko و WebKit اپن سورس هستند.
× مرورگرهای مکستون و نت اسکیپ ۲ موتور پردازشی Trident و Gecko را درون خود دارند.
× مرورگر Epiphany از موتور های Gecko و WebKit استفاده می کند.

منابع: ویکی پدیا – Farhadi’s Blog – w3schools