وبلاگی برای همۀ طراحان وب

شیوه صحیح پیوست فونت به صفحه وب در CSS3 به همراه 40 فونت فارسی اصلاح شده برای فایرفاکس 6

amirabbas — Sat, 10 Sep 2011 08:19:07 +0000

یکی از مشکلاتی که در وب فارسی با آن مواجه هستیم، محدودیت فونت است. متاسفانه در وب فارسی ما محدود به سه فونت هستیم که بر روی تمامی سیستم ها نصب شده است. فونت arial, Tahomaو mono-type تنها فونتهایی هستند که می‌توانیم از آنها استفاده کنیم در حالی که برای زبان انگلیسی حداقل نزدیک به 10 فونت در دسترس است.

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

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

بعد از همه گیر شدن مرورگر فایرفاکس و پس از آن ارائه مرورگرهای اپرا، سافاری برای ویندوز و کروم، پشتیبانی از قابلیت های CSS3 گسترش پیدا کرد در نتیجه پشتیبانی از قابلیت @font-face افزایش یافت. با استفاده از این قابلیت می‌توان فونتی را به صفحه پیوست کرد و در صورتی که این فونت بر روی سیستم کاربر موجود نباشد، از روی server دریافت شده و برروی سیستم کاربر قرار می‌گیرد و شما می‌تواند از هر فونتی که دوست دارید بر روی وب استفاده کنید.

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

در حال حاضر می‌توان فونت ها را با فرمت TTF به صفحه پیوست کرد که این فرمت توسط تمامی مرورگرهای جدید، قابل نمایش است. با استفاده از سرویس ‌های آنلاین نیز می‌توان همین فرمت TTF را به فرمت EOT تبدیل کرد تا مرورگرهای اینترنت اکسپلورر نیز بتوانند فونت های شما را به شکل درستی به نمایش بگذارند. علاوه بر این فرمت، کنسرسیوم جهان وب، فرمت WOFF را هم پیشنهاد کرد که حجم کمتری را ارائه می‌دهد و هم می‌توان حق نشر فونت را هم در آن حفظ کرد. خوشبختانه مرورگرهای فایرفاکس و اپرا و آی ای 9 از این فرمت پشتیبانی کره اند و به نظر می‌رسد که در آینده نزدیک این فرمت در تمامی مرورگرها پشتیبانی شود. با استفاده از این سه فرمت می‌توانید هر فونتی را بر روی وب استفاده کنید و مطمئن خواهید بود که فونتتان در مرورگرهای مختلف جدید و قدیمی به درستی نمایش داده می‌شود. تنها سیستم عامل iOS نسخه قدیمی است که تنها از فرمت فونت SVG پشتیبانی می‌کند ولی این مشکل iOS نیز در نسخه 4.2 حل شده است. اکنون مرورگر این سیستم عامل می‌تواند فونت‌های TTF را نیز بخواند.

حال باید ببینیم که دستور @font-face را به چه شکل باید استفاده کرد. برای استفاده از این دستور تنها کافیست این عبارت را در بالای فایل CSSخود قرار دهید:

@font-face {
font-family: 'yekan’;
src: url('fonts/yekan.ttf') format('truetype');
}

در اینجا در خط اول، font-family را تعیین کرده ایم، هر نامی را که دوست داشته باشید، می‌توانید برای فونت انتخاب کنید. در خط دوم در دستور src باید مسیر فونت بر روی serverرا مشخص کنید و در آخر در دستور format، نوع فونت را مشخص می‌کنید. این دستور را در اول فایل CSSقرار می‌دهید و در ادامه در هر جایی که از فونتی با اسم yekan استفاده کنید، فونت مورد نظر شما از سرور دریافت شده و بر روی سیستم کاربر نمایش می‌یاید. اگر این بخش را در اول فایل CSS قرار ندهید و از فونت yekan در دستوری قبل از دستور font-face استفاده کنید، از آنجائیکه هنوز دستور font-face در دسترس مرورگر نبوده است، فونت مورد نظر شما نمایش داده نمی‌شود پس سعی کنید همیشه این بخش را در اول فایل CSS خود قرار دهید.

حال با استفاده از سرویس های آنلاینی چون Kirsle (تنها این سایت توانست فونت‌های فارسی را به درستی تبدیل کند) فونت را به فرمت EOT تبدیل می کنیم و دستورمان را نیز ویرایش می‌کنیم:

@font-face {
    font-family: 'yekan’;
    src:url('fonts/yekan.eot') format('eot'),
          url('fonts/yekan.ttf') format('truetype');
}

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

حال ما از یک هک استفاده می‌کنیم تا IE را به اشتباه بیاندازیم تا تنها خط اول را ببیند. کد خود را ویرایش می‌کنیم و دو علامت ?#را بعد از آدرس فرمت EOTاضافه می‌کنیم:

@font-face {
    font-family: 'yekan’;
    src:url('fonts/yekan.eot?#’) format(‘eot’),
          url(‘fonts/yekan.ttf’) format(‘truetype’);
}

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

@font-face {
    font-family: 'yekan’;
    src:url('fonts/yekan.eot?#’) format(‘eot’),
          url('fonts/yekan.woff') format('woff'),
          url(‘fonts/yekan.ttf’) format(‘truetype’);
}

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

با دریافت این فایل به 40 فونت فارسی اصلاح شده با سه فرمت TTF, WOFFو EOT دسترسی خواهید داشت که می‌توانید آنها را در هر صفحه ای که دوست دارید، به کار ببرید. برای سهولت کار یک فایل به نام fonts-demo.html داخل فایل زیپ است. با باز کردن این فایل می‌توانید نمایی از تمامی فونت ها ببینید و نام هر فونت را نیز در کنارش مشاهده کنید. با دیدن source صفحه نیز می‌توانید دستور @font-face را هم مشاهده کنید و در صورت نیاز آن را کپی کرده و در فایل CSSخود قرار دهید. همچنین یک پوشه به نام fonts نیز وجود دارد که هر 40 فونت با سه فرمت مختلف درون آن جای گرفته. فونتهایی را که می‌خواهید به صفحه پیوست کنید را از داخل آن انتخاب کرده (هر سه فرمت را انتخاب کنید) و بر روی سرور خود قرار دهید.

توجه داشته باشید که نمی‌توانید چند فونت را به طور همزمان با یک دستور @font-face به صفحه پیوست کنید و برای پیوست چند فونت مختلف باید برای هر فونت از یک دستور @font-face استفاده کنید.

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

البته بعد از ارائه فایرفاکس 6 به خاطر مشکل فونت‌های غیر استاندارد فارسی، حروف جدا از هم نمایش داده میشد که با اصلاح فونت ها از طریق سایت Online Font Convertor این مشکل هم برطرف شده است. دقت داشته باشید که فونت‌های فارسی همچنان غیراستاندارداند و احتیاج به ویرایش شدن توسط متخصصین طراحی فونت دارند منتها با همین تغییری که اکنون ایجاد شده است می‌توان این فونت را به کاربرد و در مرورگرهای مختلف نیز فونتها را به شکل درستی به نمایش می‌گذارند.

در حال حاضر در تست ما این شیوه بر روی مرورگرهای فایرفاکس 3.6 به بعد، کروم 13 به بعد، اپرا 11 به بعد و اینرنت اکسپلورر 7 و نسخه های بعد از آن به درستی کار کرد. امیدواریم با ارائه این فونت‌ها بتوانیم اندکی به دوستان همکار و طراحان وب، کمک کرده باشیم.

دانلود فونت های اصلاح شده

دانلود پیکیج فونت اصلاح شده

پی نوشت:

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

5 راه برای جذب مشتریان مناسب جهت طراحی سایت

amirabbas — Fri, 26 Nov 2010 07:36:17 +0000

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

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

1- ناامید و درمانده نباشید - مشتریان را به خود وابسته کنید

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

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

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

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

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

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

2- قیمت ها را کاهش ندهید اما بخشی از طراحی را به طور رایگان یا با هزینه پایین انجام دهید

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

3- نیاز بازار را بدانید و در زمینه ای تخصصی فعالیت کنید سعی کنید نیاز بازار را بدانید و بر روی زمینه این فعالیت کنید که در تخصص شماست

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

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

4- با مشتریان خود در تماس باشید

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

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

5- خود را بشناسانید اگر طراحی حرفه ای هستید باید خود را به دیگران بشناسانید

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

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

روز جهانی کاربردپذیری - world usability day

amirabbas — Tue, 09 Nov 2010 19:06:11 +0000

در طراحی تعامل، کاربردپذیری (به انگلیسی: Usability) شاخصه‌ای است که میزان سهولت کاربری یک ابزار را نشان می‌دهد.
تعریف کاربردپذیری از دیدگاه « سازمان بین‌المللی استانداردسازی »: میزانی که یک محصول می‌تواند توسط کاربران خاصی برای رسیدن به هدفی معین، مورد استفاده قرار گرفته و در حین استفاده، ضمن داشتن اثربخشی و کارایی، رضایت کاربر را در زمینهٔ مورد استفاده تأمین کند.

روز جهانی کاربردپذیری از سال 2005 هر ساله در سراسر جهان برگزار شده و اکنون در بیش از 43 کشور دنیا در این روز سمینارهایی درباره کاربردپذیری برگزار می شود. هدف از برگزاری این سمینار ها،‌ آشنایی با مباحث کاربردپذیری و مهندسی کاربردپذیری است و در این سمینار ها شیوه های طراحی کاربر محور تبلیغ می شود. برای اولین بار در ایران هم به همت پرهام باغستانی،‌ در روز 20 آبان (12 نوامبر) سمیناری در فرهنگ سرای رسانه برگزار می شود و جمعی از دوستان فعال در وب در مورد usability صحبت خواهند کرد. مراسم در روز پنجشنبه از ساعت 10 صبح الی 14 در محل فرهنگسرای رسانه در میدان ولیعصر، بلوار کشاورز برگزار می شود

سخنرانان این مراسم بدین قرارند:
- پرهام باغستانی
- امیرعباس عبدالعلی
- محمدرضا محمدعلی
- سید مهدی حسینی
- آیدا رنگی
- شایان شلیله
- فرشاد ذوالفقاری
- بهزاد علی بیگی
- فرید ارض پیما

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

برای کسب اطلاعات بیشتر درباره این سمینار به سایت usability.ir مراجعه کنید.
در ضمن شرکت برای عموم آزاد و رایگان است.

آیا طراحی وب در حال مرگ است ؟

amirabbas — Thu, 22 Apr 2010 15:46:13 +0000

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

آیا طراحی وب در حال مرگ است ؟
ابزار‌های توسعه جدید از تویتر
تاثیر سرعت سرور های سایت در پیج رنک سایت

آیا طراحی وب در حال مرگ است ؟

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

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

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

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

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

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

ابزارهای جدید تویتر

تویتر ابزارهای جدیدی در اختیار توسعه دهندگان وب قرار داده که با استفاده از آنها می توانید، تویتر را در سایت خود ادغام کنید. کنفرانس رسمی تویتر (chirp) در هفته گذشته در سانفراسیکو برگزار شد و این ابزارهای جدید هم اکنون در دسترس است و از بخش http://dev.twitter.com در اختیار توسعه دهندگان وب قرار گرفته است.

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

Auto-link @usernames به طراحان اجازه می دهد که با اضافه کردن یک فایل جاوا اسکریپت به صفحه، تمامی نام های کاربری مربوط به اکانت تویتر که در داخل پست صفحه نوشته شده است را به صفحه پروفایل آن کاربران لینک کند. به عنوان مثال اگر فایل anywhere.js به سایت شما اضافه شده باشد و از دستورات مربوط به auto-link استفاده کنید، در صورتی که در میان پست از نام کاربری @amirabbas استفاده کنید. این کلمه به شکل اتوماتیک به صفحه تویتر من لینک خواهد شد.
Hovercards اگر در سایت استفاده شود، در صورتی که کاربر نشانگر ماوس را بر روی نام کاربری شخص قرار دهد، جعبه شناوری باز خواهد شد که حاوی لینک های follow کردن فرد مورد نظر و دکمه های مشابه است.
Tweet Box به کاربران اجازه می دهد که با اکانت خودشان از داخل سایت شما تویت کنند که این مورد نیز می تواند بسیار برای کاربران جذاب باشد.

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

تاثیر سرعت سرور های سایت در پیج رنک سایت

گوگل در روز های اخیر در بلاگ رسمی خود اشاره کرده است که سرعت server شما بر روی پیج رنک تاثیر گذار است. البته ماه های گذشته نیز خبر هایی مبنی بر تاثیر سرعت بالای سرور بر روی موقعیت سایت در موتور جستجوی گوگل منتشر شده بود ولی هیچگاه این مورد از سوی خود سایت گوگل تایید نشده بود. اما اکنون گوگل اعلام کرده که سرعت سرور نیز یکی از 200 معیار برای تعیین رتبه سایت به حساب می آید. البته گفته شده در حال حاضر تنها 1 درصد از سایت های اینترنت تحت تاثیر این معیار قرار می گیرند ولی در مجموع این مورد نیز خبری بسیار جذاب برای علاقه مندان به مسائل بهینه سازی سایت برای موتور های جستجو (SEO) بود.

در ضمن تصمیم بر آن شده که در پایان پادکست های بعدی در صورتی که سوالی از طرف کاربران ارسال شود، در پایان پادکست به آن سوالات پاسخ دهیم. در صورتی که سوالی در مورد طراحی وب دارید می توانید سوال خود را به آدرس ایمیل:
Amirabbas[dot]abdolali[at]gmail[dot]com ارسال کنید. در صورتی تمایل می توانید سوال خود را در قالب یک فایل صوتی (حداکثر 2 دقیقه) برای ما ارسال کنید.

podcast:

podcast1.mp3

طراحی وب و کوررنگی در کاربران

amirabbas — Sat, 10 Apr 2010 19:44:22 +0000

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

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

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

کوررنگی چیست ؟

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

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

انواع کوررنگی

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

مونوکروماسی

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

دی کروماسی

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

سه رنگی غیر عادی

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

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

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

کنتراست، رمز موفقیت در طراحی است

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

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

طرح را در قدم اول، در حالت سیاه و سفید، تست کنید

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

اگر بخواهید از نرم‌افزار هایی مانند فوتوشاپ استفاده کنید، تنها کافیست که به مسیر Image> Mode> Grayscale بروید تا بتوانید طرح خود را در حالت سیاه و سفید ببینید. البته ابزارهای آنلاینی نیز وجود دارد که می‌تواند به شما در این کار کمک کند. سایت graybit.com یکی از سایت‌هایی است که می‌تواند طراح های آنلاین را به شکل سیاه و سفید به شما نشان دهد. با استفاده از این سایت می‌توانید وضعیت کنتراست رنگ‌ها را در طرح های آنلاین ببینید.

بعد از سیاه و سفید کردن تصویر در فوتوشاپ و یا دیدن سایت در سایت graybit باید از خود بپرسید :

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

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

سایت‌های مفید جهت انتخاب رنگ صحیح برای طراحی

سایت‌های بسیاری وجود دارند که می‌توانند به شما در انتخاب رنگ‌ها کمک کنند. اگر می‌خواهید رنگ مورد نظرتان را از دید یک فرد کوررنگ ببینید، می‌توانید از سایت color scheme designer استفاده کنید. در این سایت در بالای صفحه بخشی به عنوان vision simulation وجود دارد که می‌تواند رنگ مورد نظر شما را از دید فرد کوررنگ به شما نمایش دهد. در این بخش تمامی انواع کوررنگی که در قسمت قبل بررسی کردیم، وجود دارد و می‌توانید رنگ مورد نظر خود را در هر یک از حالات مختلف کوررنگی ببینید.

تصویر بالا، رنگ سبز را از دید افراد مبتلا به دوترانوپی، نمایش می دهد. ابزار coblis-color blindness simulator نیز می‌تواند بسیار مفید باشد. در این سایت می‌توانید تصویر مورد نظر خود را آپلود کنید و نتیجه را از دید انواع مختلف کوررنگی، مشاهده کنید.

اگر بخواهید یک طرح آنلاین را از دید فردی کوررنگ ببینید، می‌توانید از ابزار colorblind web page filter استفاده کنید. در این سایت تنها کافیست که آدرس سایت مورد نظر را وارد کنید و نوع کوررنگی را انتخاب کنید تا بتوانید نتیجه را ببینید.

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

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

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

منابع:
http://www.alistapart.com/articles/contrast-is-king/
http://en.wikipedia.org/wiki/Color_blindness