Web 编程的重新设计
4.81/5 (10投票s)
触摸屏上的可视化编程。
Web 语言——HTML、CSS 和 JavaScript 是孩子们和业余程序员的最佳选择，因为它们非常简单，并且可以用来创建许多有趣的东西：网站、移动和桌面应用程序、Web 服务器和机器人——业余程序员还需要什么才能获得幸福？
可视化编程！
可视化编程使程序员无需监控程序语法的正确性，这在学习初期非常有用。这是基于文本的编程语言发展的下一个阶段。
以及触摸屏编程！
我建议使用触摸屏创建应用程序。你可以在平板电脑上创建应用程序，例如，躺在沙发上，或者在公园里散步。我开发了一种基于 Flexbox 的在触摸屏上处理文本的新方法。
但普通的 Web 编程存在两个问题
- Web 语言有许多不必要的功能。要创建真正好的程序，你不需要完全了解这些语言。一开始，你可以掌握核心，即基本功能。其余的你可以以后学习，或者永远不用。
- 在专业的 Web 行业中，除了了解这些语言，你还需要了解许多其他工具。学习它们需要花费大量时间和精力。但孩子们不需要这些复杂的工具，他们需要简单。业余程序员不需要符合行业标准。
我们必须清楚地理解 Web 语言的美妙之处。编程工具可以是而且应该简单。
让我们区分编程的三个领域
- 专业行业——复杂的标准工具和压力
- 教导孩子，在学校或独自学习——最小的压力和复杂性
- 业余编程——为自己创建必要的程序
第二和第三组程序员可以使用我提出的一个简单工具。第一组的程序员可能不理解其含义。
基于 HTML、CSS 和 JavaScript 语言，我为孩子们以及所有需要最小编程复杂性的业余程序员（如我）开发了三种可视化编程语言。如此简单的东西以前从未有过。
我重新设计了 Web 语言，剔除了所有不必要的东西，并 выде 了足以创建普通 Web 应用程序的核心。
HTML®
文档内容可以使用仅 10 个元素来描述
group— 用于分组元素string— 用于字符串，行组形成段落link— 用于链接，在网站上使用window— 用于附加窗口，在网站上使用picture— 用于嵌入图形文件video— 用于嵌入视频文件audio— 用于嵌入音频文件input— 用于从计算机选择和下载文件SVG— 可伸缩矢量图形canvas— 用于着色像素
完整的 HTML 包含大约十倍的元素。例如，对于分组，大约有十个元素，每个都有自己的角色。但你只能使用一个基本元素进行分组，并通过 WAI-ARIA 添加角色。如果你愿意，可以添加更多元素，但实际上这没有意义，这是一种毫无意义的语言复杂化。
文档的可视化编辑器中只有七个元素
CSS®
装饰在样式中描述，其中包含规则，其中包含声明。
样式
样式包含一组规则。程序可以通过其标识符动态启用和禁用它。因此，你可以更改应用程序的装饰。此外，样式更改可以根据屏幕尺寸及其方向自动发生。
规则
规则包含一组装饰声明，用于一个或多个元素，或包含动画声明。
装饰声明
所有装饰属性都按用途分组——11 个主要组，其中包含 52 个子组，每个子组包含一个或多个属性。
动画声明
动画声明描述装饰属性的初始值、中间值和最终值。
Flexbox 优先
我建议使用三种定位方法
- 你可以使用 Flexbox 代替通常的经典流。结果将类似，除了可以使用“
float”功能。对于所有元素，默认值为“display:flex”。此属性的另一个可能值为“display:none”。 - 相对于父容器或屏幕的绝对或固定位置。对于所有元素，默认值为“
position:relative”。 - 相对于自身位置的位移。“
position: relative”的位移无法动画化，因此使用“transform:translate”。
文本由单词组成。一个单词是一个string，例如一个按钮。组内的string序列是文本段落。编辑单词时，其每个字母都会临时转换为单独的string。string内的文本在文本装饰声明中格式化。组内的string序列通过 Flexbox 格式化。
JivoScript®
JivoScript 是 JavaScript 语言的一个子集。它只使用 JavaScript 语言中简单易懂的功能，并且只使用其优点，并且只使用严格模式。JivoScript® 是 JavaScript 语言原始名称 LiveScript 的俄语对应词。
程序总共由 50 个图形元素组成
程序是元素的序列。空程序
每个程序元素都是一个动作或一组动作。你可以从 12 个元素创建任何程序
值分配
删除对象或数组的元素
逻辑分支。此操作包含一个或两个动作组，根据右侧的值执行。如果右侧的值为“是”，则执行第一个动作组。如果为“否”，则执行第二个动作组
变体分支。此操作包含几个动作组变体。如果其相应右侧的值与左侧地址的值一致，则执行动作组。此外，还有一个动作组，如果右侧没有值与左侧地址的值对应，则执行该动作组
验证后动作循环。首先，此动作检查右侧的值。如果值为“是”，则执行此循环的动作组。然后此循环从头开始。如果值为“否”，则此循环终止，并执行以下动作
动作后验证循环。首先，此动作执行其动作组。然后检查右侧的值。如果值为“是”，则此循环从头开始。如果值为“否”，则此循环终止并执行以下动作
数组元素循环。此动作执行其动作组。执行次数对应于数组的长度。左侧有一个仅在循环动作组内可访问的地址。每次执行时，此地址的值增加一，从零开始
对象元素循环。此动作执行其动作组。执行次数对应于对象属性的数量。左侧有一个仅在循环动作组内可访问的地址。每次执行时，此地址的值与一个对象属性相关联
在线可视化代码编辑器
在此编辑器中，程序员编辑一个由以下部分组成的单页应用程序
- 应用程序标题
- 应用程序描述
- 文档代码
- 样式代码
- 程序代码
此外，程序员还编辑应用程序的备件，包括
- 备件标题
- 文档备件
- 样式备件
- 规则备件
- 程序备件
- 图像文件
- 音频文件
- 视频文件
程序员可以将数据（应用程序和备件）保存到自己的服务器，并从自己的或他人的服务器下载数据到编辑器。要创建自己的服务器——在你的 php 服务器上下载并解压 _server.zip_。你可以从编辑器服务器下载已完成的演示应用程序。
当你点击运行按钮时，编辑器会在单独的窗口中启动应用程序。
当你点击导出按钮（在线和离线版本）时，编辑器会在其窗口中启动应用程序。你可以将已完成应用程序的 html 文件保存到磁盘。
如果运行应用程序时出现错误，则会在应用程序窗口上方打开一个包含代码和错误消息的窗口。
编辑器包含你可以使用的标准字体集（约 300 种）。
现成的应用程序可以使用内置的 js 库：localforage 和 howler。
视频课程
现在可以在一天内学习编程语言和代码编辑器。