نوبهار است، در آن کوش که خوش دل باشی

happy-nowruz_pedram-khoshbakht

پیشنهاد می‌کنم این ویدیو را ببینید :)

امسال را با نوشتن چند آرزو شروع کردم دقایقی قبل از سال تحویل که دوست دارم آن‌ها را با شما به اشتراک بذارم

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

چجوری با SASS یکبار کد بزنیم و دو خروجی RTL و LTR بگیریم؟

یکی از مشکلاتی که همیشه در طراحی سایت درگیرش بودیم و ساعت‌ها وقتمون را در شرکت می‌گرفت طراحی سایت‌های دو زبانه و ماجرای RTL کردن بود. اما با استفاده از Sass و ایده گرفتن از روشی که Foundation برای راست به چپ کردن استفاده کرده به روشی رسیدم که به راحتی می‌توانید یکبار کد بزنید اما با تغییر مقدار یک متغیر خروجی متفاوتی از فایل CSS خود بگیرید.

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

// Choose your site direction. LTR or RTL?
$text-direction: ltr;

// We equal $text-direction to $dir, you can use both of them in your code
@import "direction-controller";

body {
    direction: $dir;
    text-align: $left;

    // For different image in your code, you can use this solution. Use
    background-image: url(../img/#{$dir}/bg.png);
    background-position: $left top;

	@include if-ltr {
		line-height: 18px;
	}
	@include if-rtl {
		line-height: 22px;
		h1 {
			line-height: 25px;
		}
	}
}

#container {
    float: $left;
    line-height: dir-check(52px, 30px);
    padding: dir-values(1px 2px 3px 0);
}

#sidebar {
    float: $right;
    margin-#{$left}: 50px;
}
.next {
	content: dir-check('>', '<');
}
.br {
	border-radius: br-values(0 0 25px 0);
}

همانطور که میبینید فقط کافی است یکسری قوانین را در نوشتن رعایت کنید. برای گرفتن خروجی rtl یا ltr مقدار متغیر text-direction را تغییر دهد.(خروجی را ببینید: RTL، LTR)

روش استفاده

یک مجموعه توابع و میکسین نوشتم که پس از متغیر text-direction آن را import می‌کنیم. نگاهی به این فایل بیاندازید.

متغیر‌ها

در این فایل دو متغیر right و left تعریف شده که این دو بر اساس rtl بودن یا نبودن مقدار آن‌ها تغییر می‌کند:

ادامه مطب…

Sass چی داره که Less نداره؟

Syntactically Awesome Style Sheets NOT SASS

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

Sass ابزار‌های قدرتمندی در اختیار میذاره که هیجان کار و سر و کله زدن با آن ها را بالا می‌بره:

 

Mixin Directives

Mixinها یکی از قدرت‌ترین ویژگی‌هایی است که از تکرار کد جلوگیری کرده و باعث تمیز شدن کد می‌شود. در واقع کد را یکبار نوشته و چندجا استفاده می‌کنید. مثال زیر را ببینید:

ادامه مطب…

کدهای پایه SASS و شروع با Compass

sass-compass-power

در این مطلب قصد دارم کد‌های پایه را برای شروع کار بگم اما قبل از آن می‌خوام یکی از فریم‌ورک‌هایی که بر پایه SASS ساخته شده به نام Compass را نصب کنید. یکی از ویژگی‌های منحصربفرد sass فریم‌ورکای زیادی که براش وجود داره. و کامپس اولین فریم‌ورکی که توسط Chris Eppstein از نویسندگان هسته sass برایش نوشته شده.

Compass با تمرکز بر قدرت‌مندتر ساختن و راحت‌تر کردن SASS ساخته شده که Mixin و توابع مختلفی را در رابطه با CSS3 ،Typography ،Utilities ،Layout ،Reset ارایه کرده است.

ادامه مطب…

از Sass نترسید!

در همایش استانداردهای وب که هفته پیش برگذار شد(+)، محسن براتی در مورد Sass ارائه‌ایی داشت و قبل از شروع ارائه سوالی مطرح کرد:

شما Sass را ترجیح میدید یا LESS؟

عده‌ایی که LESS را انتخاب کردند معتقد بودند که کار با Sass سخت است و برای همین آن را ترجیح میدن… و این دلیل خوبی برای نوشتن مطلب در مورد Sass عزیزی است که این چند وقت به شدت از کار کردن باهاش لذت میبرم.

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

sass

در مورد CSS Preprocessor ها (مانند: LESS, Sass, Stylus) باید بگم که این زبان‌ها این امکان را به ما می‌دهند که کدهای CSS را شبیه به زبان‌های برنامه‌نویسی استفاده کنیم و بتوانیم توابع و متغیر‌هایی تعیین کنیم که کار ما را وسعت و سرعت بخشد.(البته این توضیح خیلی ناقص و کوتاه است، بد نیست راجبش یکم سرچ کنید)

ادامه مطب…

گزارش تصویری دومین همایش استاندارد‌های وب و بستر وب باز

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

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

ادامه مطب…

تنها اولویت انسان است(HEO)

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

اولویت در پروژه‌های وب با چیست؟

میخواهم بگویم که تنها اولویت با انسان است! یعنی بهینه‌سازی برای انسان HEO :

  • بهینه‌سازی برای چشم انسان                    Human Eye Optimization
  • بهینه‌سازی احساسی انسان              Human Emotion Optimization
  • بهینه‌سازی تجربه انسانی               Human Experience Optimization
تمامی کارهایی که ما میکنیم از SEO بگیریم برای جذب بازدید کننده از موتور‌های جستجو تا گرافیکی که جذابیتی را ایجاد کند و مفهوم کاربردپذیری که سایت ما را برای بیننده کاربردی کند و تجارب کاربری که وبسایت ما را برای کاربر آشنا به نظر می آورد تا راحت‌تر کار کنند همه و همه یک مفهوم دارند وب سایتمان را برای یک انسان طراحی کنیم. نه برای روبوت‌های گوگل که سایتمان را اول کنند در جستجو نه برای یک هنرمند که سایتمان فقط گرافیک و عکس سنگین باشد.
بستگی به هدفمان وبسایتی را بنا میکنیم که قشر خواصی را جذب کنیم پس تمرکزمان نباید فقط بر یک موضوع خواص باشد به عنوان مثال اگر فقط روی SEO تمرکز کنیم بازدید کننده زیادی از طریق جستجو به وبسایت ما می‌آیند ولی فرض کنید فروشگاه ما پر از بازدید کننده شود ولی اگر خرید نکنند تمام تلاش ما برای جذب بیهوده بوده است.
و حالا ما بیاییم روی تجارب کاربری و کاربردپذیری کار کنیم در صورتی که بازدید کننده‌ایی نداشته باشیم فایده‌ایی ندارد باز شکست خوردیم.
یکی از مهم‌ترین دلایلی که توسعه وب را به عنوان حرفم انتخاب کردم تعامل آن مابین تکنولوژی، هنر و اجتماع است. جایی که اگر بخوای موفق باشی باید همه ابعاد را در نظر بگیری و این دقیقا مثل روابط اجتماعی می‌ماند باید انسان را مدنظر داشت بقیه چیزها ابزار هستند و بهانه ارتباط.
مقالات مرتبط:
پی‌نوشت: این مطلب را در محیط عالی کافه کتاب لاله زار نوشتم. محیط بسیار آرامش بخشی، پیشنهاد میکنم حتما به اینجا سر بزنید.

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

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

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

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

 

بحث‌هایی در مورد:

  • مروری بر HTML5 و CSS3
  • مایکروسافت، استانداردهای وب و OSS
  • Web APIs
  • استفاده از فونتهای فارسی در وب
  • طراحی ریسپانسیو – Responsive Design
  • موبایل وب

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

دو واژه: ‘کاربری’ و ‘پذیری’

چندتا کلمه میتونید بسازید که با کلمات ‘کاربری’ و ‘پذیری’ تمام بشود؟

  1. رابط کاربری
  2. تجارب کاربری
  3. یافت پذیری
  4. کاربردپذیری
  5. کاوش پذیری

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

اسم های زیر برای شما آشنا هستند:

  • بازاریابی
  • محتوا و متن تبلیغاتی
  • طراحی
  • توسعه و برنامه نویسی
  • بهینه سازی برای جستجوگرها

اما مفاهیم زیر چطور؟

  • معماری اطلاعات
  • رابط کاربری
  • تجارب کاربری
  • یافت/کاوش پذیری
  • کاربردپذیری

کجای این چرخه قرار داریم؟

آیا میشود برای یکی از موارد فوق اولویت ویژه‌ایی در نظر گرفت؟

در مطلب بعدی به بررسی اولویت ها میپردازیم

پی‌نوشت: تنها اولویت انسان است(مقدمه HEO)

شروع طراحی واکنشگرا – Responsive

Responsive Web Desgin نوعی از تفکر در طراحی وب است که نسبت به طرح دیدی فراگیر دارد که کاربر با هر نوع دستگاهی وبسایت را متناسب با نیاز و اندازه صفحه نمایش دستگاه ببیند.

برای روشن شدن مسله به معنی کلمه Responsive در فرهنگ لغت Longman نگاهی می‌اندازیم:

Responsive | Longman Dictionary

Responsive | Longman Dictionary

کلمه Responsive را به معنی عکس العمل سریع در جهت مثبت معرفی می‌کند، Responsive Web Design که از آن در نسخه جدید ووردپرس فارسی به عنوان “واکنشگرا” نام برده، به مفهوم جابجایی، نمایش و یا عدم نمایش عناصر صفحه است که نسبت به رزولوشن دستگاه بر اساس اولویت نمایش داده شوند.

این نوع از طراحی موضوعی است که از سال‌ها پیش با عناوینی چون “Progressive enhancement”, “Adaptive web design”, “Graceful degradation” کم و بیش مطرح شده بود اما اصطلاح Responsive Web Design توسط Erhan Marcotte با ظهور CSS3 و قابلیت Media Queries آن به سرعت توسعه یافت و مورد توجه قرار گرفت.

با گسترش روزافزون موبایل و تبلت‌ها و  وجود بیش از ۴ میلیارد موبایل در سراسر جهان دیگر نمی‌توانیم فرض کنیم سایت ما بر روی یک مونیتور با رزولوشن متوسط دیده خواهیم شد. RWD تفاوت‌های مهمی با ساخت نسخه مجزا برای موبایل دارد:

ادامه مطب…

دیدگاه روانشناسان در طراحی تجارب کاربری(UXD)

با توجه به این که تصمیم گرفتم مطلب تکراری در وبلاگ منتشر نکنم و تمرکز را روی مباحث جدید بذارم، از تعاریف اولیه “طراحی تجربه کاربری” یا “User Experience Design” میگذرم. دوستانی که در این مورد اطلاعی ندارند، پیشنهاد میکنم قبل از خواندن این مطلب نگاهی به تعاریف اولیه طراحی تجربه کاربری(UXD) بیاندازند تا درک بهتری نسبت به این مقاله پیدا کنند.

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

نگاه روان شناسان به طراحی تجربه کاربری(UX)

نگاه روان شناسان به طراحی تجربه کاربری(UX)

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

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

Susan Weinschenk روانشناس است که طی مقاله‌ایی که در سایت UX Magazine منتشر کرده: مغز، سیستم بینایی، حافظه و انگیز در طراحی تجربه کاربری را مورد بررسی قرار داده.
نتیجه این بررسی رسیدن به آن تجربه‌هایی از فیل است که هر یک از ما درباره افراد میدانیم و میتوانیم در طراحی تجربه کاربری مورد استفاده قرار دهیم.

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

ادامه مطب…

به نام بی نام دوست

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

اما بهترین کار اینه که به ساده‌ترین روش و با خیالی آسوده شروع کرد  :)

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

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

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