Mozilla为将普通网络用户转换为网络制造商提供了一个良好的开端。 对于有抱负的开发人员和设计师,Webmaker工具是一个很好的资源,他们希望在学习和构建方面迈出下一步。
这篇文章将简要介绍三个Mozilla Web Maker工具,分别是Thimble , X-Ray Goggles和Popcorn Maker 。 这三个工具将使您学习如何编码,检查其他已建站点的代码以及生成的视频混搭。
顶针
顶针最适合初学者的网站创建者。 用户可以选择的一些项目包括创建在线投资组合,头像或网络简历,甚至制作自己的Internet Defence League网页。
![Mozilla顶针](https://i-blog.csdnimg.cn/blog_migrate/3f2bcc8327245c8f391e00e92964c799.png)
![Mozilla顶针](https://i-blog.csdnimg.cn/blog_migrate/3f2bcc8327245c8f391e00e92964c799.png)
顶针的编辑器远非传统的成熟编辑器。 它具有简单的工具,例如语法提示帮助器,拼写检查器,预览和文本大小,对于初学者级的设计师和开发人员来说可能是一个很好的工具。
![拇指代码编辑器](https://i-blog.csdnimg.cn/blog_migrate/59d8dc5247421808138ae597d397d579.png)
![拇指代码编辑器](https://i-blog.csdnimg.cn/blog_migrate/59d8dc5247421808138ae597d397d579.png)
Thimble的提示弹出窗口是初学者的另一个出色功能,使用户可以在编辑或查看一行代码或某些CSS / HTML元素时查看一些有用的提示和信息。
Thimble还可以轻松发布您的作品并与朋友分享。
![顶针弹出提示](https://i-blog.csdnimg.cn/blog_migrate/b00c6f0bf9cf9f714ced7d628e3f1b8e.png)
![顶针弹出提示](https://i-blog.csdnimg.cn/blog_migrate/b00c6f0bf9cf9f714ced7d628e3f1b8e.png)
发布功能为您提供了两个链接:一个用于与您的所有朋友和关注者共享,两个用于以后编辑已发布的项目。 在“发布项目”弹出窗口中,还有一个选项卡可以在Google,Twitter,Facebook等上共享您的项目。
![缩略图发布按钮](https://i-blog.csdnimg.cn/blog_migrate/cc5a0cb190498e79ae12ae91a33c78fd.png)
![缩略图发布按钮](https://i-blog.csdnimg.cn/blog_migrate/cc5a0cb190498e79ae12ae91a33c78fd.png)
X射线护目镜
要学习编码,有时您必须查看如何编码其他站点。 Mozilla Webmaker的X射线护目镜被激活后,可让您检查从Hongkiat.com到您自己的博客的任何网页背后的代码。
它的工作原理基本上类似于浏览器的检查工具,但功能较少。 安装它就像将其拖放到浏览器的书签栏中一样容易。 安装后,您可以在以后浏览的任何网站上使用Goggles。
要使用Goggles,请输入您要检查的网站的URL。 默认的Goggles URL向您显示一个基本网页,其中嵌入了图像。
![X射线谷歌](https://i-blog.csdnimg.cn/blog_migrate/d7dbf0b04a1d97066848853fcbaa183b.png)
![X射线谷歌](https://i-blog.csdnimg.cn/blog_migrate/d7dbf0b04a1d97066848853fcbaa183b.png)
Goggles还具有一个方便的内置编辑器,因此您可以在Goggles中实时重新混合和改编网页,并在眼前看到所做的更改。 Goggles还允许您基本上像Thimble一样在Goggles中发布重新混合和创建的作品。 只要确保您要重新混合的内容没有版权。
爆米花机
Popcorn Maker可以轻松增强,重新混合和共享Web媒体和视频。 启动它,输入HTML5,Youtube,Vimeo或Soundcloud的视频URL。
这就是乐趣的开始。 然后,您可以通过在边栏上拖放元素和媒体功能来将视频重新混合,方法是拖放到视频的适当时间范围。
![Mozilla爆米花机](https://i-blog.csdnimg.cn/blog_migrate/54cb5c7730e310c34959ec7d395021af.png)
![Mozilla爆米花机](https://i-blog.csdnimg.cn/blog_migrate/54cb5c7730e310c34959ec7d395021af.png)