مبانی تفکر محاسباتی

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

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

تفکر محاسباتی چیست؟

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

• می خواهید برای خودتان یک فنجان چای یا قهوه درست کنید.
• میخوای ماشین بخری
• شما می خواهید شغل خود را تغییر دهید.
• می خواهید به شهر دیگری نقل مکان کنید.
• میخوای خونه بخری
• شما می خواهید کتاب بنویسید.
• شما می خواهید یک برنامه ایجاد کنید.

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

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

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

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

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

جایی که از تفکر محاسباتی در طراحی وب استفاده می شود

اگرچه هنگام بحث در مورد چیزی به نام “شبه کد” در زیر بیشتر به این موضوع خواهیم پرداخت، بیایید یک لحظه کوتاه به بررسی نحوه کارکرد تفکر محاسباتی در طراحی وب بپردازیم:

1. طراحی UI/UX: استفاده از منطق و ساختار برای ایجاد رابط های بصری و کاربر پسند.
2. طراحی تعاملی: تجزیه طرح‌بندی‌های پیچیده به اجزای ساده‌تر برای اندازه‌های مختلف صفحه نمایش.
3. ویژگی های تعاملی: ابداع الگوریتم‌هایی برای عناصر پویا مانند لغزنده، پنجره‌های بازشو یا فرم‌ها.
4. بهینه سازی سئو: تجزیه و تحلیل الگوهای رفتار کاربر و الگوریتم های موتور جستجو برای بهینه سازی دید سایت.
5. مدیریت محتوا: ساختار و سازماندهی محتوای وب برای دسترسی و نمایش کارآمد.
6. بهینه سازی عملکرد: تجزیه و تحلیل و اصلاح کد و عناصر طراحی برای زمان بارگذاری سریعتر و تجربه کاربری بهتر.

این برنامه ها نشان می دهند که چگونه تفکر محاسباتی برای حل چالش های پیچیده طراحی وب یکپارچه است.

اصول تفکر محاسباتی

حال، به اصول کلیدی که این فرآیند محاسباتی را تشکیل می دهند. چهار اصل از این قبیل وجود دارد:

1. تجزیه
2. انتزاع – مفهوم – برداشت
3. الگو شناسی
4. الگوریتم نویسی

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

1. تجزیه

این تجزیه یک مشکل یا سیستم پیچیده به بخش‌های کوچک‌تر و راحت‌تر است. این مسائل کوچکتر یکی پس از دیگری حل می شوند تا زمانی که مشکل پیچیده بزرگتر حل شود.

“اگر مشکلی تجزیه نشود، حل آن بسیار سخت تر است. پرداختن به چندین مرحله مختلف در یک زمان بسیار دشوارتر از تجزیه یک مشکل به تعدادی مشکل کوچکتر و حل هر یک در یک زمان است. – BBC Bitesize

2. تشخیص الگو

هنگامی که مشکل پیچیده را به مشکلات کوچکتر تجزیه کردید، گام بعدی این است که به شباهت های مشترک آنها نگاه کنید.

الگوها ویژگی های مشترکی هستند که در هر مشکل فردی رخ می دهند. چه شباهت هایی را مشاهده می کنید؟ یافتن این شباهت ها در مسائل کوچک تجزیه شده می تواند به ما کمک کند تا مسائل پیچیده را با کارایی بیشتری حل کنیم.

3. انتزاع

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

بنابراین این اطلاعات مهمی که باید روی آن تمرکز کنیم چیست؟ در انتزاع، به جای جزئیات خاص، تمرکز عمدتاً بر ویژگی های کلی است که برای هر عنصر مشترک است.

هنگامی که ویژگی های کلی را دارید، می توانید یک “مدل” از مشکل ایجاد کنید. یک مدل ایده کلی مشکلی است که ما سعی در حل آن داریم.

“اگر انتزاع نکنیم ممکن است در نهایت به راه حل اشتباهی برای مشکلی که سعی در حل آن را داریم برسیم.” – BBC Bitesize

هنگامی که یک مدل داریم، می توانیم یک الگوریتم طراحی کنیم

4. الگوریتم نویسی

شما مشکل بزرگ را به مشکلات کوچکتر و به راحتی قابل کنترل تقسیم کرده اید. شما شباهت هایی را بین این مشکلات شناسایی کرده اید. شما روی جزئیات مرتبط تمرکز کرده اید و هر چیز نامربوطی را پشت سر گذاشته اید.

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

تعریف: الگوریتم یک طرح است، مجموعه ای از دستورالعمل های گام به گام که برای حل یک مسئله استفاده می شود.

الگوریتم ها همیشه شامل شاهکارهای پیچیده برنامه نویسی نمی شوند. در قلب، آنها دنباله ای از مراحل برای حرکت به سمت یک هدف هستند.” – جان ویلاسنور

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

استفاده از فلوچارت ها

فلوچارت ها راهی عالی برای نمایش تفکر محاسباتی و الگوریتمی ارائه می دهند.

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

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

با استفاده از کد شبه

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

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

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

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

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

نحوه نوشتن کد شبه (برای مبتدیان)

به عنوان مثال، این شبه کد (برگرفته از دانشگاه تنسی) ممکن است پرداخت را محاسبه کند:

1

Begin

2

INPUT hours

3

INPUT rate

4

pay = hours * rate

5

OUTPUT pay

6

End

و این مثال کمی پیچیده تر ممکن است پرداخت را با اضافه کاری محاسبه کند:

1

Begin

2

INPUT hours, rate

3

IF hours ≤ 40

4

THEN

5

      pay = hours * rate

6

ELSE

7

      pay = 40 * rate + (hours – 40) * rate * 1.5

8

OUTPUT pay

9

END

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

• STOP/END کامپیوترها به معنای واقعی کلمه هستند. شما باید به آنها بگویید وقتی یک بیانیه یا دستورالعمل انجام می شود. این کار را با نوشتن انجام دهید STOP یا END.
• IF/ELSE/THEN کامپیوترها شرایط را درک می کنند: اگر A اتفاق افتاد، B را انجام دهید، اگر نه، C را انجام دهید.
• INPUT/OUT برخی از کدها برای اجرا و ایجاد یک نتیجه خروجی به ورودی نیاز دارند. ورودی برای داده هایی است که کاربر یا منبع دیگری به رایانه می دهد. خروجی برای نشان دادن نتیجه نهایی یک سری دستورات استفاده می شود.
• STORE/SAVE اصطلاح شبه کدی که به رایانه دستور می دهد هر زمان که لازم است مقداری را ذخیره یا ذخیره کند.

نحوه استفاده از کد شبه به عنوان ابزار حل مسئله

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

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

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

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

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

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

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

ارزیابی راه حل ها

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

شما برای شروع برنامه نویسی احساس خارش دارید، اما قبل از شروع باید راه حل را ارزیابی کنید. چرا؟

“بدون ارزیابی، هیچ نقصی در الگوریتم تشخیص داده نخواهد شد، و برنامه ممکن است مشکل را به درستی حل نکند، یا ممکن است آن را به بهترین شکل حل نکند.” – BBC Bitesize

به ارزیابی الگوریتم خود به عنوان “اشکال زدایی” فکر کنید.

نتیجه

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

به یاد داشته باشید، تفکر محاسباتی شامل مراحل زیر است:

1. تجزیه: تجزیه یک مسئله به اجزای سازنده آن.
2. تشخیص الگو: شناسایی شباهت ها در اجزای یک مسئله.
3. انتزاع: تمرکز بر اطلاعات کلی مهم و کنار گذاشتن اطلاعاتی که به راه حل بی ربط هستند.
4. نوشتن الگوریتم: نوشتن کدی که راه حل مورد نظر را ایجاد می کند. نوشتن دستورالعمل گام به گام که توسط کامپیوتر قابل خواندن و پردازش است. دستورالعمل ها با استفاده از اطلاعات مرتبط جمع آوری شده از تجزیه، تشخیص الگو و انتزاع نوشته شده اند.
5. ارزیابی: یافتن اشکالات در الگوریتم و تصحیح آنها برای اطمینان از کارکرد بدون هیچ اشکالی.

منابع مفید