计算思维的基础知识

网页设计师需要以计算机可以理解的方式思考问题，因此“计算思维”是他们不可或缺的技能。它提供了解决客户复杂任务所需的系统工具。

计算思维使网页设计师能够分解问题，发现数据中的模式，识别并专注于任务的绝对必要方面，同时忽略会使流程陷入困境的不必要信息。

作为全面规划的工具，它避免了由于匆忙完成项目而没有考虑手头问题的不同方面而导致的代价高昂的错误。

什么是计算思维？

计算思维作为一个概念听起来可能令人生畏。但每一天，在我们生活的方方面面，我们都在进行计算思维。想想以下行动和决定：

• 你想给自己泡一杯茶或咖啡。
• 你想买一辆车。
• 你想转行。
• 你想搬到另一个城市。
• 你想买房子。
• 你想写一本书。
• 您想要创建一个应用程序。

规划和实现这些目标的过程涉及某种计算思维。

计划包括将这些问题分解为可管理的部分，并提出一系列解决方案，使我们能够实现我们心目中的目标。

就我们的目的而言，由于作为网页设计师，我们希望使用计算机来帮助我们解决手头的问题，因此计算思维实际上是关于理解手头的复杂问题，然后将其分解为一系列较小的可管理问题。

然后，我们提出如何解决这些较小的单个问题的想法，最后通过一系列可以被计算机理解和处理的步骤来传达由此产生的想法。

这种方法遵循我们所说的“计算思维原则”。但在我们讨论这些细节之前，首先，让我们简要地谈谈计算思维的使用。

计算思维在网页设计中的应用

虽然在下面讨论所谓的“伪代码”时，我们会更多地讨论这个主题，但让我们花点时间分解一下网页设计中的计算思维是如何工作的：

1. UI/UX设计：应用逻辑和结构来创建直观和用户友好的界面。
2. 响应式设计：将复杂的布局分解为更简单的组件，适用于各种屏幕尺寸。
3. 交互功能：为动态元素（如滑块、弹出窗口或表单）设计算法。
4. SEO优化：分析用户行为和搜索引擎算法中的模式，以优化网站可见性。
5. 内容管理：构建和组织 Web 内容，以便高效访问和显示。
6. 性能优化：分析和优化代码和设计元素，以缩短加载时间和更好的用户体验。

这些应用程序展示了计算思维如何成为解决复杂网页设计挑战不可或缺的一部分。

计算思维原理

现在，我们来谈谈构成这个计算过程的关键原则。有四个这样的原则：

1. 分解
2. 抽象化
3. 模式识别
4. 算法编写

这些是关键技术，可帮助您在编写一行代码之前通过计算方式思考复杂的问题（挑战或任务）。让我们来看看它们。

1.分解

这是将复杂的问题或系统分解成更小、更容易解决的部分。这些较小的问题一个接一个地解决，直到更大的复杂问题得到解决。

2. 模式识别

一旦你把复杂的问题分解成更小的问题，下一步就是看看它们有的相似之处。

模式是每个问题中出现的共同特征。你观察到哪些相似之处？在小的分解问题中找到这些相似之处可以帮助我们更有效地解决复杂的问题。

3. 抽象

“抽象”是指只关注重要信息，忽略不相关的细节。为了达成解决方案，我们需要忽略不必要的特征，以便专注于我们所做的那些。

那么，我们需要关注的重要信息是什么？在抽象中，重点主要是每个元素共有的一般特征，而不是具体的细节。

一旦你有了一般特征，你就可以创建一个问题的“模型”;模型是我们试图解决的问题的一般思想。

一旦我们有了模型，我们就可以设计一个算法。

4. 算法编写

你已经把大问题分解成更小的、易于管理的问题。您已经确定了这些问题之间的相似之处。你专注于相关的细节，而忽略了任何无关紧要的东西。

现在是时候制定分步说明来解决每个较小的问题，或者解决问题时要遵循的规则。这些简单的步骤或规则用于对计算机进行编程，以帮助以最佳方式解决复杂问题。它们也被称为“算法”。

定义： 算法是一个计划，是一组用于解决问题的分步指令。

编写算法需要进行广泛的规划才能使其正常工作。您的计算机提供的解决方案与您编写的算法一样好。如果算法不好，那么你的解决方案也不会好。

使用流程图

流程图提供了一种完美的方法来表示计算和算法思维。

流程图是一种表示算法、工作流程或过程的图表，将步骤显示为各种框，并通过箭头连接它们来显示它们的顺序。这种图示形式说明了给定问题的解决方案模型。

流程图是绘制算法的一种简单方法，尤其是当它们需要在此过程中输出不同的结果时。它们使用标准样式约定。流程图从上到下，从左到右流动。

使用伪代码

在将手头的问题分解为更小的可管理部分时，您一直在用简单的英语（或您用来交流的任何语言）交流您的发现、想法和可能的解决方案。

计算机听不懂英语指令。他们了解代码。代码或算法，它们形成一组具有非常特定语法的指令。

但是，在你使用你的发现来编写计算机可以理解的代码之前，通常建议将它们写在伪代码中。

伪代码可帮助您规划问题的解决方案，以避免在编写代码时出现任何错误。这是一种以简化的方式编写指令的方式，读起来像代码。然而，伪代码不是代码，它没有代码使用的特定语法。

伪代码最好使用关键字和变量编写。编程中的变量代表一个值、一个单词或代码块。在编程中，变量的值会根据您在代码中的位置而变化。

如何编写伪代码（面向初学者）

例如，此伪代码可能会计算工资：

Begin
INPUT hours
INPUT rate
pay = hours * rate
OUTPUT pay
End

这个稍微复杂一点的例子可能会计算加班费：

Begin
INPUT hours, rate
IF hours ≤ 40
THEN
      pay = hours * rate
ELSE
      pay = 40 * rate + (hours – 40) * rate * 1.5
OUTPUT pay
END

伪代码使用类似代码的术语，这些术语在将其转换为代码时很有帮助。

• STOP/END计算机是字面意思。您需要在完成声明或指示时告诉他们。通过编写 或 来执行此操作。STOPEND
• IF/ELSE/THEN 计算机理解条件：如果 A 发生，则执行 B，如果没有，则执行 C。
• INPUT/OUT某些代码需要输入才能运行和创建输出结果。输入用于用户或其他源将提供给计算机的数据。输出用于指示一系列命令的最终结果。
• STORE/SAVE 伪代码术语，指示计算机在必要时保存或存储值。

伪代码如何用作解决问题的工具

可以想象，伪代码在解决问题方面也非常方便。

以下是它的实际使用方法：

1. 网站导航结构：设计网站导航系统的流程和结构，包括下拉菜单和页面之间的链接。
2. 用户身份验证流程：概述以安全和用户友好的方式进行用户登录、验证和错误处理的步骤。
3. 交互式元素：规划滑块、弹出窗口或交互式表单的逻辑，包括用户输入验证和动态内容显示。
4. 响应式设计逻辑：构建代码逻辑，使网站响应不同的屏幕尺寸和设备。
5. 数据处理：在网站上以用户友好的格式概念化从数据库中检索、显示和更新数据的过程。

评估解决方案

整个过程实际上还有第五部分。你已经使用计算思维来得出解决方案。该解决方案是一种可用于对计算机进行编程的算法。

你很想开始编程，但在你继续之前，你必须评估解决方案。为什么？

结论

计算思维贯穿于21世纪商业的各个方面和功能。对于网页设计师来说，这是一项不可或缺的解决问题的技能，他们最终必须用计算机可以理解和处理的语言来表示解决方案。

请记住，计算思维包括以下步骤：

1. 分解：将问题分解为各个组成部分。
2. 模式识别：识别问题组成部分的相似性。
3. 抽象：专注于重要的一般信息，而忽略与解决方案无关的信息。
4. 算法编写：编写创建预期解决方案的代码。编写可由计算机读取和处理的分步指令。这些指令是使用从分解、模式识别和抽象中收集的相关信息编写的。
5. 评估：发现算法中的错误并纠正它们，以确保其正常工作，没有任何故障。