html5消息和震动api

在html5中提供了越来越多的API,一些是专门针对移动端的,比如手机的倾斜和旋转、还有桌面提示和机体震动。这些功能都和我们日常使用手机息息相关,移动端页面开发中我们可以把它们作为一种通知用户的形式。本文就来说下这两个API。

桌面提示—Notification

首先,我们要知道什么是桌面提示。或许你在浏览网页时经常会发现网页底部弹出一些消息框,这些只能是针对某个网页的消息弹框,假设我们在浏览其他网页,或最小化浏览器则看不到这个消息框。

而html5里面notification是桌面提示,它是针对桌面的,它不受你在浏览某个网页,或者浏览器处于最小化状态的限制,所以只要某个页面有Notification事件发生,则会在桌面右下角显示桌面提示弹框。而在手机端,这个以浏览器消息推送的形式展现。是不是非常cool?

要做到桌面提示,需要注意的是,首先你的浏览器需要支持Notification api ,然后必须 继续阅读

发表在 前端技术 | 标签为 , , , | 留下评论

使用weinre进行跨终端调试

记得去年11月份我写过一篇名为《chrome开发工具中emulation的详解》的文章,介绍了pc端chrome浏览器下开发工具的emulation,它可以模拟终端设备各种特性,这使得我们可以在开发手机页面时用它来模拟页面在手机上的展示情况。尽管emulation做的很不错了,但毕竟是模拟,当测试拿着在终端有bug页面来问你时,你知道仅仅用emulation还是不够的。

如你所知,跨终端调试是非常繁琐的一个过程。起初为了快速开发,只是将页面边开发边放在emulation里测试,如果展示没有问题就交给了开发。但事后总会有测试跑到你面前来对你说,“这个页面在我的手机上好像有点问题哎”。

或许你会说,“是嘛?可是我用电脑模拟手机测试了页面没问题啊!?”可是你知道,bug终究还是要解决的。

然后为了尽量保证测试那边零bug,也为了避免在写代码时不被测试打断,于是,在开发WAP页面时,我会先在emulation中测试一边,然后再将页面传到我的网站上,再用终端机测试一边。如果没问题,则直接发给需求人。目前看来,这个方案看上很不错,但也存在一些问题 继续阅读

发表在 前端技术 | 标签为 , | 留下评论

css混合模式之background-blend-mode

我们在对图片进行色彩处理时,通常会用ps里的蒙版加色彩模式(如图),我们可以通过下拉去选择不同的模式种类,从而形成一张图片的不同效果。而如今随着css3的发展,这种只有在软件中的色彩模式也被应用到了css3的属性中,即background-blend-mode。

ps色彩模式 继续阅读

发表在 前端技术 | 标签为 | 留下评论

Grunt-自动化构建工具

一般而言,我会把项目代码分成两份,这两份代码内容是相同的,一份用于本地开发或者修改,另一份放在svn。在svn上的代码是与开发的工程并存的,我们前端只需要把本地开发好的文件提交到svn,开发再将svn的文件同步到服务器。在提交的过程中,我们需要做如下处理:

首先,js压缩工具压缩js

其次,css压缩工具压缩css

然后,合并多个js和css

最后,压缩和优化图片,进行覆盖

对于多个文件还需要重复以上操作…

如果我说上述工作只需要一两行命令就能完成 继续阅读

发表在 前端技术 | 标签为 , , , | 留下评论

富文本编辑器的实现

如果你还不知道什么是富文本编辑器(Rich Text Editor),那么我强烈建议你先去百度了解一下。富文本编辑器(以下简称RTE)是一种所见即所得的网页编辑器。最常见的比如论坛发帖编辑发布框、写作类网站的编辑器。此文并不是详细描述如何用js去开发一个RTE,主要目的是介绍制作富文本编辑器的思路以及方法,还有就是在开发过程中遇到的问题。若你想详细知道如何去开发一个RTE,可在阅读完本文之后查看demo源代码。

我们知道,可以让网页处于编辑状态可以通过以下三种形式 继续阅读

发表在 前端技术 | 标签为 , , | 留下评论