一个可以把web表单变成会话形式的开源框架

简介:

我们需要一种方式将web表单转换为会话,但是找不到任何合适的解决方案。所以我们决定建立一个我们自己的开源框架。Conversational Form可以将web表单转换为会话,使开发人员和设计人员能够以更具吸引力和更像会话的方式与用户互动。

去Github上查看演示

在过去几个月里,我们一直将会话接口视为下一个重大革命,不断询问自己“设计是如何被我们看不到的东西所转变的”,并研究不同国家如何处理消息传递。现在,我们想要通过一些实验来采取进一步行动。

我们首先问自己:今天的哪些接口可能会被明天的会话接口替代?

Web表单

我们每天都与接口交互 —— 从ATM的现金提取到电梯里的楼层按钮。然而,与接口最常见的交互之一就发生在你浏览互联网并填写web表单时。

一个web表单(webform, web form 或者HTML form)可以将用户输入的数据发送到服务器进行处理。因为互联网用户使用复选框、单选按钮或文本字段填写表格,所以web表单的形式类似文件或数据库。例如,表单可以用于输入航运或信用卡资料以订购产品,或者可以用于从搜索引擎中检索数据。—— 维基百科

无聊的web表单

基本上,web表单是一种与web服务器交换信息的方式。无论你是搜索内容还是登录到电子邮件帐户或Facebook页面,都在使用简单的web表单进行交互。这些都是从互联网诞生以来就有的。毫无疑问,你每天都在网络上与至少一个表单打过交道。

在我们看来,是时候该有人来改进一下它们了。  

介绍

我们相信我们可以做得比我们今天在网上见到的形式更好。因此,我们决定构建一个开源框架,将web表单转换为会话,从而使开发和设计人员能够以更具吸引力和更像会话的方式与用户互动。

开始

开始很简单。先把这段代码放到脚本里:

 

然后将它自动初始化:

或者手动初始化:

new cf.ConversationalForm({
  formEl: 
});

Or via jQuery…

或者通过jQuery初始化:

$("form").conversationalForm();

当当当——你的表单现在变成会话了。

个性化

我们增加了几种将会话设置得更个性化的方式。最简单的一种方式就是给机器人或者人设置自定义图片:

new cf.ConversationalForm({
  formEl:  ,
  userImage: "http://example.com/user.png"
});

人类之所以为人的一个特征就是多样性,所以我们提供了一种简单的方法来给会话增加变化(变体)。只需使用cf-questions标签,并用管道符号("|")分隔每个变体,比如这个:  

最后一个选项是使用前面的答案进行回答:

让我们知道你是怎么想的!

Conversational Form是从一个叫做你说的是人话吗?(Do you speak human?)的试验开始的,这是SPACE10实验室对会话界面和人工智能的未来的一个探索。

给我们发邮件:daniel@space10.io 或者来Twitter上找我们。我们等不及要跟你聊聊了!  

Conversational Form是由SPACE10提出的概念。它由Felix Nielsen,RWATGG带入现实生活,由Charlie Isslander设计。

感谢Daniel Friis。

原文发布时间为:2017-5-09

本文来自云栖社区合作伙伴“大数据文摘”,了解相关信息可以关注“BigDataDigest”微信公众号

相关文章
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`<select>` 和 `<option>`)、文本域(`<textarea>`)、标签解释(`<label>`)、各类按钮(`<button>`)及表单重置功能、无语义布局标签(`<div>` 和 `<span>`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
219 6
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
前端开发 数据安全/隐私保护
【前端web入门第二天】02 表单-input标签-单选框-多选框
本文介绍了HTML中`<input>`标签的基本使用方法及其应用场景,如登录、注册页面和搜索区域。通过设置`type`属性,可以实现文本框、密码框、单选框、多选框及文件上传等功能。此外,还详细说明了占位文本的使用、单选框的常用属性及多选框的默认选中状态,并提供了示例代码与效果展示。
451 7
|
安全 Go PHP
Web安全-会话ID漏洞
Web安全-会话ID漏洞
159 3
|
安全 前端开发 PHP
构建与验证表单:传统PHP与Laravel框架的比较分析——探索Web开发中表单处理的优化策略和最佳实践
【8月更文挑战第31天】在 Web 开发中,表单构建与数据验证至关重要。传统 PHP 方法需手动处理 HTML 表单和数据验证,而 Laravel 框架则提供了一种更现代、高效的解决方案。本文通过对比传统 PHP 和 Laravel 的方法,探讨表单构建与验证的最佳实践。Laravel 通过简洁的语法糖、内置的数据过滤和验证机制,显著提升了代码的安全性和可维护性,适用于大型项目或需要快速开发的场景。然而,在追求灵活性的小型项目中,直接使用 PHP 仍是不错的选择。了解两者的优劣,有助于开发者根据项目需求做出最佳决策。
109 0
|
存储 安全 搜索推荐
【JavaWeb 秘籍】Cookie vs Session:揭秘 Web 会话管理的奥秘与实战指南!
【8月更文挑战第24天】本文以问答形式深入探讨了Web开发中关键的会话管理技术——Cookie与Session。首先解释了两者的基本概念及工作原理,随后对比分析了它们在存储位置、安全性及容量上的差异。接着,通过示例代码详细介绍了如何在JavaWeb环境中实现Cookie与Session的操作,包括创建与读取过程。最后,针对不同应用场景提供了选择使用Cookie或Session的指导建议,并提出了保障二者安全性的措施。阅读本文可帮助开发者更好地理解并应用这两种技术。
216 1
|
C# 开发者 Windows
WPF遇上Office:一场关于Word与Excel自动化操作的技术盛宴,从环境搭建到代码实战,看WPF如何玩转文档处理的那些事儿
【8月更文挑战第31天】Windows Presentation Foundation (WPF) 是 .NET Framework 的重要组件,以其强大的图形界面和灵活的数据绑定功能著称。本文通过具体示例代码,介绍如何在 WPF 应用中实现 Word 和 Excel 文档的自动化操作,包括文档的读取、编辑和保存等。首先创建 WPF 项目并设计用户界面,然后在 `MainWindow.xaml.cs` 中编写逻辑代码,利用 `Microsoft.Office.Interop` 命名空间实现 Office 文档的自动化处理。文章还提供了注意事项,帮助开发者避免常见问题。
848 0
|
前端开发 开发者 安全
JSF表单处理大揭秘:数据绑定与事件处理,如何让Web应用更加智能?
【8月更文挑战第31天】在现代Web应用开发中,JSF(JavaServer Faces)框架因强大的表单处理能力而广泛应用。其数据绑定机制可实现表单控件与后端模型的双向传输,降低前后端耦合度,提高代码维护性和类型安全性。事件处理机制则支持丰富的内置与自定义事件,进一步增强应用灵活性。本文通过示例代码展示这些特性,帮助开发者更好地利用JSF构建高效、灵活的Web应用。然而,JSF也存在组件库较小和学习成本较高等局限,需根据具体需求权衡使用。
106 0
|
开发者 Java Spring
JSF 牵手社交登录,如魔法风暴席卷 Web 世界,开启震撼便捷登录之旅!
【8月更文挑战第31天】在互联网时代,便捷登录成为用户的核心需求。社交登录凭借其便捷性、安全性和社交化的特点,在各类Web应用中广泛应用。JavaServer Faces(JSF),作为一款流行的Java Web框架,能够轻松集成社交登录功能,显著提升用户体验。本文详细介绍社交登录的优势,并提供两种JSF集成社交登录的常见方法:一是利用Spring Social等第三方库简化开发;二是自行实现社交登录流程。开发者可根据项目需求选择适合的方案。
135 0
|
安全 Java 云计算
JSF 应用究竟何去何从?云端部署能否成为其全新突破点?快来一探究竟!
【8月更文挑战第31天】本文介绍了将JavaServer Faces(JSF)应用部署到云平台的过程。首先,根据成本、功能、可靠性和安全性选择合适的云平台。接着,展示了构建简单JSF应用的示例代码。最后,以AWS Elastic Beanstalk为例,详细说明了部署流程。部署至云端可提升应用的可用性、扩展性和安全性。
133 0
|
开发者 数据管理 Java
表单革命:Vaadin Forms如何重塑你的Web表单体验,打造用户互动新纪元
【8月更文挑战第31天】在现代Web开发中,表单是用户与应用交互的关键。Vaadin框架提供了强大的表单处理工具,简化了高效且用户友好表单的创建。本文深入探讨Vaadin Forms的工作原理,包括数据绑定、验证和事件处理等功能,并通过详细代码示例,帮助开发者掌握其使用方法,从而构建出满足各种需求的表单。
118 0