非技术人员的 Web 开发概念

非技术人员的 Web 开发概念

Photo by 哈尔盖特伍德 on 不飞溅

本文提供了有关如何开发交互式 Web 应用程序的高级概述，以及您在技术对话中可能听到的所有这些术语的含义。此信息面向非技术读者，因此省略了许多细节。例如，我们将讨论前端开发并省略 Web 服务器和数据库等后端概念。

网页开发流程

构建复杂的 Web 应用程序需要将其分解为不同的功能，然后按顺序或并行构建它们。构建每个功能都涉及多个学科执行的几个步骤。我们将讨论构建功能的 4 个主要步骤：

1. 指定业务需求
2. 定义用户体验
3. 创建视觉设计
4. 使用前端技术实现用户界面

我们不会讨论测试和部署等其他步骤。

指定业务需求

想象一下，我们正在为 Mountain Vacations 构建一个 Web 应用程序，这是一家向热门山区目的地销售度假套餐的公司。他们想要构建的第一个

需求通常来自了解运营业务的来龙去脉的业务或产品专家。他们与能够研究客户面临的问题的设计师合作。

以下是业务专家可能提出的一些要求：

1. 在系统中维护目标包
2. 向潜在客户展示目的地包裹清单
3. 显示目标包的详细信息
4. 允许客户注册套餐

定义用户体验 (UX)

既然我们了解了客户面临的问题，设计师就会尝试打造一种可以解决这些问题并为业务产生积极影响的体验。

设计师传达理想体验的一种方式是通过线框图。线框是网页或网络应用程序的低保真轮廓。这是 Mountain Vacations 注册功能的线框图：

Mountain Vacations Wireframe

创建视觉设计

为了使线框具有更高的保真度，设计师创建了视觉设计。在这种保真度下，他们定义了客户会看到、触摸和互动的任何东西。

设计师指定颜色托盘、字体、按钮样式、动画和设计元素的其他方面。他们考虑营销和品牌元素来影响产品方向。

这是 Mountain Vacations 注册功能的视觉设计。对于具有复杂交互的设计，设计师还可以创建交互式原型以在 Figma 等工具中传达他们的意图。

Mountain Vacations Visual Design

实现用户界面

现在我们已经有了注册功能的可视化设计，我们已经准备好实现用户界面了。

Web 开发人员的工作是进行视觉设计并为其注入活力，即使用前端技术使其成为现实。

上面展示的视觉设计可以分为三个方面：

1. 内容 ：这包括页面上的文字（如“Mountain Vacations”）、图片和注册按钮。
2. 美学 ：这推动了内容的外观和感觉。它包括各种元素的布局和颜色，用于排版的字体等。
3. 功能性 ：这是用户与功能交互时的行为。例如，单击左侧的目的地会在右侧显示其详细信息。单击“注册我”按钮将用户带到注册表格。

下图直观地展示了这个概念：

这三个方面大致对应 3 种流行的 Web 技术，即 HTML、CSS 和 JavaScript。

让我们使用这些技术中的每一种来实现我们的视觉设计。我们将从 HTML 开始创建内容。然后我们将使用 CSS 来添加美感。最后，我们将使用 JavaScript 添加功能。

使用 HTML 创建内容

HTML 的缩写 超文本标记语言。 它是用于编写要在 Web 浏览器中显示的内容的标准标记语言。您可以使用不同的标签来定义您正在编写的内容的类型。例如， <h1> 标签引入了一个标题：

 <h1>尼泊尔珠穆朗玛峰大本营</h1>

同样，一个 <button> 标签引入了一个按钮：

 <button>注册我</button>

更进一步，我从我们的视觉设计中复制了所有内容，一次一个元素，并使用适当的标签将其添加到 HTML 文件中。

您可以在下面看到我的浏览器如何呈现我的文件。如果单击“Open Sandbox”按钮，您可以看到 HTML 文件的全部内容（名为 索引.html ）。尝试识别此文件中的每条内容。

Signup Page Raw Content

现在内容都在那里，但它不符合我们想要的美学。它从上到下流动，而不是在左侧显示目的地列表，在右侧显示目的地详细信息。字体不匹配。颜色是非品牌的。让我们使用 CSS 解决所有这些问题。

使用 CSS 创建美学

CSS 的缩写 层叠样式表 .它是一种样式语言，用于为用 HTML 编写的网页添加美感（例如布局、颜色和字体）。 CSS 通常写在一个单独的 .css 文件中，它允许将美学与内容分离。

注意：如果您对此部分不感兴趣，可以跳到“CSS 详细信息末尾”。

CSS 文件由可应用于 HTML 文件中的一个或多个元素的格式规则组成。格式规则可能如下所示：

 .destination__title {  
 字体大小：1.5rem；  
 字体粗细：500；  
 行高：1.875；  
 边距底部：0.5rem；  
 }

这条规则的“名称”是 目的地__title 因为它旨在应用于我们网页上的度假目的地的标题。它指定标题的美学细节，例如字体大小、字体粗细、行高和下边距。

请记住，目标标题是内容，因此它作为 HTML 文件中的标记存在。我们以前见过：

 <h1>尼泊尔珠穆朗玛峰大本营</h1>

现在让我们应用 目的地__title CSS 规则到我们 HTML 文件中的目标标题。我们可以将它作为类属性应用到 <h1> 标签：

 <h1 class="destination__title">尼泊尔珠穆朗玛峰大本营</h1>

— — — CSS 细节结束 — — —

我们现在可以将 CSS 规则应用于 HTML 文件以使页面看起来更好。

我们首先修复布局，使目的地列表和目的地详细信息并排显示。这是结果页面。您可以查看 main.css 文件以查看 CSS 规则和 index.html 文件以查看这些规则在何处以及如何应用于 HTML 元素。

Signup Page with CSS Layout

最后，让我们增强 CSS 以呈现视觉设计的完整保真度。看下面的结果：

Signup page with CSS Layout, Colors and Fonts

非常好！现在内容就在那里，看起来很棒。但是，功能仍然缺失。单击左侧的各个目的地。你会注意到什么都没有发生。让我们使用 JavaScript 来添加这个功能。

使用 JavaScript 添加功能

Javascript 是一种编程语言，Web 开发人员使用它来创建动态和交互式网页。 JavaScript 通常写在一个单独的 .js 文件中，它允许将功能与内容和美学分离。

继续我们的示例，让我们创建一个名为 index.js 的 JavaScript 文件，以在目标列表上添加点击交互。生成的 Web 应用程序如下所示。尝试单击左侧的 3 个目的地。您应该在右侧看到相应的详细信息。查看 JavaScript 文件以了解该语言的外观。

Signup Page with Selection Functionality

转向基于组件的开发

从技术上讲，我们已经完全实现了我们的前端，符合业务需求、用户体验设计和视觉设计。我们能做得更好吗？答案是肯定的。

请注意，我们在一个文件中编写了整个页面的 HTML。同样适用于 CSS 和 JavaScript。如果我们对整个应用程序继续采用相同的方式会发生什么？随着我们应用程序复杂性的增加，这些文件的大小和复杂性也会增加，直到它们变得无法管理。更不用说如果多个开发人员想要同时处理代码。这几乎是不可能的。

为避免此类问题，开发 Web 应用程序的一种更成熟的方法是将它们分解为更小的组件并在单独的文件中实现它们。然后，您可以像乐高积木一样将这些文件组装在一起，以构建一个成熟的应用程序。这种方法称为 基于组件的开发 .如果组件被仔细识别和实现，它们可以在我们的应用程序中的多个地方使用，从而减少冗余。

有几个流行的前端框架可以很容易地采用基于组件的开发—— 反应 , 角 和 Vue 仅举几例。细节可能会有所不同，但想法是相同的。

让我们探索如何为我们的 Mountain Vacations Web 应用程序使用基于组件的开发。下图从我们的视觉设计开始，并将其分解为 3 个组件：标题、目的地列表和目的地详细信息。

Signup Page Component Breakdown

这是使用基于组件的开发从头开始重新实现我们的 Web 应用程序的结果。我在单独的文件中创建了上面的组件，然后将它们组装成一个应用程序。最终结果与以前完全相同，但该方法可扩展到更大的复杂应用程序。随意查看 CodeSandbox 中的代码。

Signup Page using React Components

组件术语说明

设计组件与代码组件

在设计与开发的背景下，术语“组件”经常被混淆。设计人员经常将设计工件称为组件，例如卡片组件，而开发人员则使用相同的术语来表示工作代码。事实上，两者都指的是同一个概念，即卡片的概念。设计人员和开发人员协作以确保组件背后的意图在不同上下文中使用时不会改变，这一点很重要。例如，如果设计人员将组件命名为“卡片”，开发人员不应该开始将其称为“面板”——这会非常混乱。

组件可以嵌套

组件是一个非常通用的术语。有些人将其与按钮等小东西相关联，而另一些人将其与购物车和登录对话框等大东西相关联。事实是，他们都没有错。将基于组件的开发视为一种将大型事物分解为较小事物，然后将这些较小事物分解为更小的事物的方法。继续前进，直到您拥有不需要分解的非常简单的东西！因此，您可以拥有非常大的组件（例如整个页面）到较小的组件（例如购物车），甚至更小的组件（例如按钮）。有时人们使用原子、分子和有机体等术语（见 原子设计 由 Brad Frost 创作）以赋予组件一种尺寸感。归根结底，它们都是组件。理解大小和复杂性的诀窍是创建具有清晰边界和命名的视觉分解。请参见下面的示例：

Nested Components Example

结论

这是我们学到的：

1. Web 开发过程从定义一个或多个特性的需求开始。
2. UX 设计师接受需求并创建线框来指定用户体验。
3. 视觉设计师通过向线框添加美学（颜色、字体等）、应用营销和品牌考虑来创建视觉设计。
4. Web 开发人员使用 HTML、CSS 和 JavaScript 等 Web 技术实现视觉设计。这些技术为网页添加了内容、美学和功能。
5. 基于组件的开发是一种用于开发 Web 应用程序的更有组织性和可扩展性的方法。它涉及将网页分解为可以独立实现的较小的独立组件。
6. 识别使用术语“组件”的上下文。设计人员和开发人员必须协作以确保组件背后的意图在不同上下文中使用时不会改变。
7. 组件有各种粒度，从大（例如页面）到小（例如按钮）。它有助于显示较大组件的视觉分解，以了解它们的结构和复杂性。

希望本文对 Web 开发概念的解释对您有所帮助。如果是这样，请通过鼓掌来表示您的支持。如果有不清楚的地方，请在下面发表评论——我会尽力澄清。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/22950/00090910