بلوک های سفارشی: بهترین روش ها

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

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

1. سبک حاشیه

در دهه 2000، ظاهر «آکوا» شیک بود و هر شیء روی صفحه با برجسته‌سازی و سایه‌ها تزئین می‌شد. در دهه 2010، ظاهر «طراحی مواد» شیک است و هر شیء روی صفحه به شکلی تمیز، صاف و بدون حاشیه ساده شده است. اکثر محیط‌های برنامه‌نویسی بلوک دارای برجسته‌سازی و سایه‌هایی در اطراف هر بلوک هستند، بنابراین وقتی طراحان گرافیک امروزی این را می‌بینند، همیشه این تزئینات قدیمی را از بین می‌برند.

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

توصیه: اگر Blockly را مجدداً تغییر می دهید، اجازه ندهید مدهای امروزی برنامه شما را خراب کنند.

2. تو در تو زیر پشته ها

بلوک‌های C شکل همیشه دارای یک رابط در قسمت داخلی بالایی هستند، اما برخی از محیط‌ها همچنین دارای یک رابط در قسمت پایین داخلی هستند (مثلاً Wonder Workshop) در حالی که سایر محیط‌ها این اتصال را ندارند (مانند Blockly و Scratch). از آنجایی که اکثر بلوک‌های دستورات دارای هر دو رابط بالا و پایین هستند، برخی از کاربران بلافاصله متوجه نمی‌شوند که عبارت‌ها در یک «C» قرار می‌گیرند که رابط پایینی ندارد.

هنگامی که کاربران متوجه شدند که یک بلوک عبارت در داخل یک "C" قرار می گیرد، سپس باید بفهمند که تعداد بیشتری از یک عبارت نیز جا می شود. برخی از محیط‌ها اتصال پایین عبارت اول را در پایین «C» قرار می‌دهند (مثلاً Wonder Workshop و Scratch) در حالی که برخی دیگر یک شکاف کوچک ایجاد می‌کنند (مانند Blockly). تودرتوی راحت هیچ اشاره ای به این ندارد که بلوک های بیشتری می توانند روی هم چیده شوند.

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

تجربه ما این بود که اتصال بیانیه اولیه چالش کمتری برای کاربران نسبت به کشف انباشته است. و پس از کشف، اولی هرگز فراموش نمی شود، در حالی که دومی نیاز به تلقین دارد. Blockly هر دو روش Wonder Workshop و Scratch را امتحان کرد تا اینکه یک روز یک اشکال رندر رخ داد که شکاف کوچکی را اضافه کرد. به دلیل این اشکال، ما شاهد بهبود قابل توجهی در مطالعات کاربران با Blockly بودیم (اکنون یک «ویژگی» که ما به آن افتخار می کنیم).

توصیه: اگر Blockly را مجدداً تغییر می‌دهید، رابط کاربری موجود را ترک کنید.

3. اتصالات متقارن

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

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

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

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

4. نام متغیرها و توابع

برنامه نویسان مبتدی انتظار ندارند که location_X و location_x متغیرهای متفاوتی باشند. در نتیجه، Blockly از BASIC و HTML با غیر حساس کردن متغیرها و توابع به حروف بزرگ پیروی می کند. Scratch از رویکرد ظریف تری استفاده می کند (همانطور که در سمت راست مشاهده می شود) و برای نام متغیرها به حروف بزرگ و کوچک حساس است اما برای بررسی برابری حساس نیست.

همچنین، Blockly نیازی به مطابقت متغیرها و توابع با طرح معمولی [_A-Za-z][_A-Za-z0-9]* ندارد. اگر کسی بخواهد یک متغیر List of zip codes یا רשימת מיקודים نامگذاری کند کاملاً مشکلی ندارد.

توصیه: از حروف بزرگ صرف نظر کنید، هر نامی را مجاز کنید.

5. متغیرهای جهانی

برنامه نویسان تازه کار نیز در درک محدوده مشکل دارند. در نتیجه، Blockly با جهانی کردن همه متغیرها از Scratch پیروی می کند. تنها جنبه منفی متغیرهای سراسری این است که بازگشت پیچیده‌تر است (شخص باید متغیرها را فشار داده و در فهرست قرار دهد)، اما این یک تکنیک برنامه‌نویسی است که فراتر از محدوده کاربران هدف Blockly است.

توصیه: محدوده خارج از محدوده است، آن را برای بعد بگذارید.

6. دستورالعمل

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

در نهایت ما پنجره هایی ایجاد کردیم که نمی توان آنها را بسته کرد. آنها برای نظارت بر اعمال دانش آموز برنامه ریزی شده اند و تنها زمانی خود را می بندند که دانش آموز عمل مورد نیاز را انجام داده باشد. برنامه‌نویسی این پنجره‌های بازشو که از متن آگاه هستند، چالش برانگیز هستند، اما کاملاً مؤثر هستند. همچنین برای آنها مهم بود که در میدان دید بدون تداخل با فضای کار باشند.

توصیه: دستورالعمل ها باید کوتاه و مداوم باشد، اما مضر نباشد.

7. مالکیت کد

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

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

توصیه: برای کاربر کد ننویسید.

8. چیدمان فضای کاری

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

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

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

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

البته کل سفارش باید برای ترجمه های عربی و عبری تغییر داده شود.

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

توصیه: تجسم برنامه را در کنار نوار ابزار قرار دهید.

9. استراتژی خروج

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

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

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

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

توصیه: اهداف نهایی کاربر را در نظر بگیرید و به طور مناسب طراحی کنید.