Monthly Archives: خرداد 1394

Preserve `this` with recursive setImmediate()

Leave a reply

Salam (means Hello:))

In my node.js app, I need to use setImmediate() to recessively call a function and keep its context intact for next execution.

Consider following example:

var i=3;

function myFunc(){
    console.log(i, this);
    --i && setImmediate(arguments.callee);
}

myFunc();

Output:

3 // a regular `this` object
2 { _idleNext: null, _idlePrev: null, _onImmediate: [Function: myFunc] }
1 { _idleNext: null, _idlePrev: null, _onImmediate: [Function: myFunc] }

As you can see, after first execution this is overwritten. How should I work around this?

Preserve `this` with recursive setImmediate()

Leave a reply

In my node.js app, I need to use setImmediate() to recessively call a function and keep its context intact for next execution.

Consider following example:

var i=3;

function myFunc(){
    console.log(i, this);
    --i && setImmediate(arguments.callee);
}

myFunc();

Output:

3 // a regular `this` object
2 { _idleNext: null, _idlePrev: null, _onImmediate: [Function: myFunc] }
1 { _idleNext: null, _idlePrev: null, _onImmediate: [Function: myFunc] }

As you can see, after first execution this is overwritten. How should I work around this?

نگاهی نو به یک نظریه قدیمی، گشتالت‌ها در رابط کاربری

Leave a reply

Gestalt---Logo

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

Untitled-4

نظریه گشتالت

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

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

  • قانون همجواری (Law of Proximity)
  • قانون شباهت (Law of Similarity)
  • قانون تقارن (Law of Symmetry)
  • قانون نقطه کانونی (Law of Focal Point)
  • قانون سادگی (Law of Simplicity)
  • قانون تصویر و زمینه (Law of Figure and Ground)

قانون همجواری (Proximity)

اشیاء نزدیک به هم در یک گروه به نظر می‌آیند.

proximity

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

Gestalt---Page-Screend

قانون شباهت (Similarity)

اشیایی با مشخصه‌های شبیه به هم در یک گروه به نظر می‌آیند.

similarity

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

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

Gestalt---Similarity

قانون تقارن (Symmetry)

اشکال متقارن کامل به نظر می‌آیند، اشکال نامتقارن ناقص.

symmetry

این قانون به این حقیقت اشاره دارد که اشکال متقارن پایداری، ثبات و سازمان یافته به نظر می‌رسند. اشکال نامتقارن بر خلاف اشکال متقارن حاوی پیام‌های منفی مانند نقص، اشتباه و یا فقدان بالانس را القا می‌کنند.
یکی از ساده‌ترین راه‌های پیاده‌سازی رابط‌های کاربری متقارن طراحی برپایه گرید (Grid-Based Design) در لایه‌بندی است. سیستم‌های گرید از تعدادی ستون هم اندازه تشکلی شدند. و سیستم‌های ۱۲ ستون یکی از رایج‌ترین حالت این سیستم‌ها هستند. این به دلیل است که عدد ۱۲ بیشترین بخش‌پذیری را نسبت به اعداد کمتر از خود دارد (۱ ۲ ۳ ۴ ۶ ۱۲) پیروی از این روال ناخواده باعث ایجاد رابط‌های کاربری متقارن می‌شود.

مثال

Gestalt---Page-Screen

قانون نقطه کانونی (Focal Point)

متمایزترین نقطه توجه را به خود جلب می‌کند

focal_point

گروهی از محققان دانشگاه علوم و تکنولوژی میزوی (MST) آمریکا در سال ۲۰۱۲ آزمایش Eye-tracking را بر روی وب‌سایت‌های مختلف انجام داده‌اند که نتایج تحقیقات آنها نشان داد تاثیر اولیه (First Impression) سایت‌ها بر روی یک کاربر در کمتر از دو دهم ثانیه رخ می‌دهد؛ یعنی زمانی معادل یک پلک زدن! بعد از آن کاربر زمانی حدود ۲٫۶ ثانیه را صرف اسکن کلی صفحه و بعد از گذشت این زمان بر یک قسمت مهم سایت تمرکز می‌کند. شما اگر حساب شده طراحی کرده باشید زمانی حدود ۳ ثانیه خواهید داشت که کاربر خود را متقاعد کنید که سایت شما ارزش دیدن را دارد.

قانون سادگی (Simplicity)

المان‌ها و اشیا به ساده‌ترین شکل ممکن درک می‌شوند.

simplicity

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

جان مائدا در کتابی به نام Law of Simplicity ده قانون را برای ایجاد سادگی شرح داده است:

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

قانون تصویر و زمینه (Figure and Ground)

ذهن انسان به دنبال درک تصویر اصلی از پس‌زمینه است.

figure_and_ground

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

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

Gestalt---Figure-Ground

دوره رایگان مهندسی استارتاپ دانشگاه استنفورد

Leave a reply

startupeng

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

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

  • مقدمه
  • ابزارها: ویرچوال ماشین‌ها، IAAS/PAAS، خط فرمان یونیکسی،‌ ادیتورها،‌ DCVS
  • فرانت اند: اچ تی ام ال، سی اس اس، جاوااسکریپت، وایرفریم، تحقیق بازار
  • بک اند: SSJS، دیتابیس‌ها، فریم‌ورک‌ها، دیتا پایپ‌لاین‌ها
  • ای پی آی‌ها: تمپلیت کلاینت ساید، اچ تی تی پی، SOA/REST/JSON، API as BizDev
  • …

و البته بخش مهمی که حداقل برای من دوره رو بسیار جذاب کرده:

  • تاسیس شرکت: شروع، ساخت و جمع‌آوری سرمایه
  • رشد دادن شرکت: پیش بردن، حسابداری و …

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

اشتراک‌گذاری: