The Mozilla Foundation (best known for the Firefox browser) recently launched its Teach the Web initiative (#TeachTheWeb). The aim of this project is to support and encourage web literacy, helping more people take their first steps into developing for the web and connecting with a vast support community.
Mozilla基金会(以Firefox浏览器而闻名)最近启动了“ 教网络”计划(#TeachTheWeb)。 该项目的目的是支持和鼓励网络素养,帮助更多的人迈出第一步开发网络并与庞大的支持社区联系。
Webmaker is a Mozilla site offering lots of tools that promote web literacy, such as Appmaker, a desktop tool that makes it easy to create mobile apps.
Webmaker是Mozilla的网站,提供许多可提高网络素养的工具,例如Appmaker ,这是一种桌面工具,可轻松创建移动应用程序。
More recently, Mozilla has started work on another project called the Webmaker App. This project provides a very simple interface for creating mobile applications directly from mobile. The project is still in beta mode and hence is currently hosted on Mozilla’s staging servers.
最近,Mozilla开始着手另一个名为Webmaker App的项目。 该项目提供了一个非常简单的界面,可直接从mobile创建移动应用程序。 该项目仍处于beta模式,因此当前托管在Mozilla的登台服务器上。
![Webmaker-App-Home-Page](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/03/1427438273Webmaker-App-Home-Page.jpg)
The Webmaker App can be utilized on devices running Android or Firefox OS. With more and more devices supporting Firefox OS worldwide, this is great news for learners in developing countries, as it enables easy development and distribution of applications.
Webmaker应用程序可以在运行Android或Firefox OS的设备上使用。 随着全球越来越多的设备支持Firefox OS,这对于发展中国家的学习者来说是个好消息,因为它使应用程序的开发和分发变得容易。
回答了一些问题 (Some Questions Answered)
I recently had the opportunity to speak with some people at Mozilla who are closely associated with this project. They were able to shed some light on why Mozilla felt the need for another app creation tool next to Appmaker.
最近,我有机会与Mozilla中与该项目密切相关的一些人交谈。 他们能够阐明为什么Mozilla认为需要在Appmaker旁边添加另一个应用程序创建工具。
Andrew Sliwinski, Director of Learning Products at the Mozilla Foundation, explained that –
Mozilla基金会学习产品总监Andrew Sliwinski解释说–
Both the Webmaker App and Appmaker allow users to create web apps. The differences between the two applications are in platform and barrier to entry. The Webmaker app is designed to allow users to build a web app on a mobile device itself without ever needing to use a desktop computer. Because of this, we believe that it will be more accessible to many people who are unable to access a desktop product like Appmaker.
Webmaker App和Appmaker都允许用户创建Web应用程序。 两种应用程序之间的差异在于平台和进入障碍。 Webmaker应用程序旨在允许用户无需使用台式计算机即可在移动设备本身上构建Web应用程序。 因此,我们相信许多无法访问桌面产品(如Appmaker)的人都可以使用它。
Kate Hudson, Lead developer on the project, also explained that –
该项目的首席开发人员Kate Hudson也解释说–
The Webmaker App will allow anyone with a smart phone to create and author apps, and be part of an online community of people who create for the Web. Creating apps has previously been something that requires specialized programming knowledge, and at least a desktop computer. People will be able to create apps in their own language, specific to the needs of their local communities.
Webmaker应用程序将允许任何拥有智能手机的人创建和创作应用程序,并成为为Web创建人员的在线社区的一部分。 以前,创建应用程序一直需要专业的编程知识,至少需要台式计算机。 人们将能够使用自己的语言来创建应用程序,以适应当地社区的需求。
Mozilla showed a public beta of the Webmaker App at Mobile World Congress in March. In a few months after the publication of this article, the app will be released to the Firefox Marketplace and Google Play stores.
Mozilla在三月的世界移动通信大会上展示了Webmaker应用的公开测试版。 在本文发布后的几个月内,该应用程序将发布到Firefox Marketplace和Google Play商店。
让我们来看看! (Let’s Check It Out!)
We decided to check out the application by launching it in WebIDE, running Firefox OS (2.2).
我们决定通过在运行Firefox OS(2.2)的WebIDE中启动应用程序来检出该应用程序。
![Webmaker App running on WebIDE](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/03/1427438269Webmaker-App-running-on-WebIDE.jpg)
Whereas Appmaker (the desktop app) focuses more on teaching fundamental programming concepts like input/output, the Webmaker App’s focus is on empowering people to create useful local apps. We think it’s important for app creation to be accessible to everyone with a smart phone.
Appmaker(台式机应用程序)更侧重于教授诸如输入/输出之类的基本编程概念,而Webmaker App的重点在于使人们能够创建有用的本地应用程序。 我们认为,拥有智能手机的所有人都可以使用应用程序创建,这一点很重要。
![Creating an app from scratch](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/03/1427438292Creating-an-app-from-scratch.jpg)
With the Webmaker App, one can create apps from scratch, adding different components to it such as text, images, SMS sender, caller, textbox, counter and submit button. That is, essentially all the components required for a minimalist and easy-to-make application. The framework currently has seven default templates on its home screen – Start from Scratch, Create a Blog, Create a Survey, Promote your Business, Share Community News, Create a How To Guide and Create a Safety App.
使用Webmaker应用程序,可以从头开始创建应用程序,并向其中添加不同的组件,例如文本,图像,SMS发件人,呼叫者,文本框,计数器和提交按钮。 也就是说,本质上来说,简约和易于制作的应用程序需要所有组件。 该框架当前在其主屏幕上有七个默认模板- 从头开始 , 创建博客 , 创建调查 , 促进业务 , 共享社区新闻 , 创建指南和创建安全应用程序 。
![Adding different components to an app](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/03/1427438296Adding-different-components-to-an-app.jpg)
The Webmaker App has a simplified user interface that is being tested to ensure users who are unfamiliar with traditional coding or computer science concepts can use it to create their own content.
Webmaker应用程序具有经过简化的用户界面,正在对其进行测试,以确保不熟悉传统编码或计算机科学概念的用户可以使用它来创建自己的内容。
让我们做点什么! (Let’s Make Something!)
Let us build a small app for SitePoint that displays its name, a cover image and a button to enable users to visit the website. We select the Start from Scratch template and start editing the title of the app.
让我们为SitePoint构建一个小型应用程序,该应用程序显示其名称,封面图像和一个按钮,以使用户能够访问该网站。 我们选择从头开始模板,然后开始编辑应用程序的标题。
![Editing the title](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/03/1427438285Editing-the-title.jpg)
We then add a new text block and enter the description of SitePoint.
然后,我们添加一个新的文本块并输入SitePoint的描述。
![Editing the description](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/03/1427438288Editing-the-description.jpg)
Now, let’s make the app attractive by adding that fabulous cover image of SitePoint!
现在,让我们添加精美的SitePoint封面图片,使该应用程序具有吸引力!
![Adding an image](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/03/1427438300Adding-an-image.jpg)
We finally add a button and rearrange the order of the blocks in the app.
我们最终添加了一个按钮,并重新排列了应用程序中块的顺序。
![Rearranging the blocks](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/03/1427438277Rearranging-the-blocks.jpg)
That pretty much concludes the work of building our little app. You can click on the preview button to have a look at your application before publishing. There is a share button as well, which allows the users to share their apps on the go and make them discoverable on the Webmaker gallery. This whole operation took less than five minutes!
到此结束了构建我们的小应用程序的工作。 在发布之前,您可以单击预览按钮来查看您的应用程序。 还有一个共享按钮,允许用户随时随地共享他们的应用程序,并使它们在Webmaker画廊中可被发现。 整个操作不到五分钟!
![Preview of the app](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/03/1427438280Preview-of-the-app.jpg)
参与其中! (Get involved!)
The Webmaker App is an open-source project, with its code repository located at GitHub. Anyone interested in contributing can join in, by filing issues for bugs, feature requests or suggestions. Though the project started in vue.js, the developers are planning to port the project to react.js by the end of March.
Webmaker应用程序是一个开源项目,其代码存储库位于GitHub上 。 任何有兴趣贡献的人都可以通过提交有关 bug,功能请求或建议的问题来加入。 尽管该项目从vue.js开始,但是开发人员计划在三月底之前将项目移植到react.js 。
Developers can build blocks/bricks on topics such as HTML5 geolocation and animations for the application. You can even contribute to the existing templates that are displayed on the gallery or add new templates that are more relevant to your region/country. Are you interested in being a Test Driver for the project? You can read the guide on field testing here.
开发人员可以针对应用程序HTML5地理位置和动画等主题构建块/块。 您甚至可以为图库中显示的现有模板做出贡献,或者添加与您所在地区/国家/地区更相关的新模板。 您是否有兴趣成为该项目的测试驱动程序? 您可以在此处阅读有关现场测试的指南。
Viva La网络素养 (Viva La Web Literacy)
Web Literacy is a global issue that we all should care about. The Teach the Web initiative gives us a chance to make contributions to the open web by making content from which others can learn and which can be remixed or modified by others. Read the Webmaker Whitepaper to know more about web literacy and the Teach the Web initiative.
网络素养是我们所有人都应该关注的全球性问题。 “教网络”计划使我们有机会通过制作可供其他人学习并可以被他人重新混合或修改的内容来为开放式Web做出贡献。 阅读Webmaker白皮书,以了解有关Web素养和“教网络”计划的更多信息。
翻译自: https://www.sitepoint.com/creating-mobile-apps-webmaker-app/