-
利用H5开发来改进微博移动端体验
adinnet / 2020-04-23 14:53 /用户研究
H5开发引入并加强了一系列功能, 包括表单控制, 应用程序接口(APIs),多媒体,结构化和语义化。都说html5+javascript是flash或者silverlight这类客户端执行环境的杀手,html5推出的最炫的一个功能是标签(cavans),还有视频(video)和音频(audio)等。现在页面版的都还在用flash,flash对于手机来说,速度和资源消耗都成问题。但是利用html5,可以顺利地在iPhone等不支持Flash的平台上将swf显示了出来,尽管并不是所有Flash都能放,但足以证明javascript+SVG的威力了吧。利用html5不但能够更好的完善微博的现有功能,还能结合其他的一些功能,进一步的提升使用体验。
一、功能改善
1.结构元素
利用html5新增的更具语义化的标签,来改善微博的标签结构,比如表示页面的头部,表示底部,表示一个链接导航集合等。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。内容修饰标签将被剔除,而使用 CSS样式实现。
2. 交互元素
HTML5的前身名是Web Applications 1.0。所以HTML5当然不只是随便加几个标签,让代码结构更具语义化这么无聊。另外一些新增的元素,诸如, 等,可以实现控制数据和内容展示等交互能力。input元素的新属性:日期和时间,email, url,可以轻松制造一个Webforms 2.0。例如,details用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如点击)与legend交互才显示出来。这跟现在各种通过JavaScript隐藏一段内容,在点击后才显示出来的做法有些类似。
3. 风格元素
虽然我们现在已经普遍使用了HTML4和CSS2.1,但是我们还可以做得更好!我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在,HTML5和CSS3将会真正将我们的设计提升一个高度。
4. 本地数据库
HTML 5得以在智能手机上普及的理由之一,在于其功能。特别是由于可在本地数据库中保存数据,因此,即便在未接入网络的情况下,应用程序仍可运行。所以基于此不用担心错过离线信息,可以通过选项决定是短信提醒还是定时打包下载。
二、功能扩充
1. 视频和音频
近些年视频网站发展势头较好,随着硬件条件提升、带宽增加,基于网络的视频、音频服务越来越惹人注目,像国外的Youtube,国内的优酷、土豆等,还有其他很多可以让任何一个人更容易的发布视频和音频的网站。然而, 因为当前的HTML缺少必要的方法顺利的插入并控制多媒体, 很多网站都依赖Flash来提供这样的功能. 尽管可能可以用各种各样的插件 (就像是QuickTime, Windows Media等等) 嵌入多媒体, 但是Flash是当前唯一被广泛应用的,提供了开发者们所渴望的跨浏览器兼容解决方案的插件。视频和音频的新元素让这个工作变得更加简单。这两者之间的大部分API都是共享的, 唯一区别就关系到可视和不可视媒体之间的固有区别。Opera和Webkit已经放出了一个部分支持视频元素的版本,Webkit支持所有QuickTime支持的媒体格式, 包括第三方的解码器。随着Html5的发展,插入视频变得越来越简单了,使用video元素, 它会允许浏览器提供一个默认的用户界面,以后微博用户利用手机端上传视频、音频的接口也肯定呼之欲出。
2. 快捷键
通过快捷键来进行一些发微博、发评论、转发、删除、更多等操作。
3. 手绘表情
作为HTML5标准的一部分,Canvas元素允许脚本动态渲染点阵图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 javascript 以使脚本能够把想绘制的东西都绘制到一块画布上。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 canvas 元素都有一个“上下文( context )” (想象成绘图板上的一页),在其中可以绘制任意图形。
微博用户可以用手写输入的方式绘制个性化表情,使发表或回复内容形式感更强,风格更多样。
4. 标签订阅
根据关键词来订阅信息,使信息的浏览和呈现方式更加多样化。
5. 在线笔记
在微博中可以直接进行标记,并选择是以笔记的形式记录在线上,还是拷贝一个镜像保存到线下。
6. 地理位置
通过地理位置API实现发微博显示我所在的位置的功能,并且基于该功能,可以和商家合作,提供优惠券下载、打折信息发布等服务。理论上讲,HTML 5 将培育新 Web 标准的土壤,让各种设想在他的组织者之间分享,但 HTML 5 目前仍处于试验阶段。
- 最新文章
- 1.对话腾讯设计师:微信车票背后的设计故事
- 2.网站开发公司案例介绍:集团网站开发之 金融网站开发方案
- 3.HTML6即将到来,你没有看错是HTML6
- 4.想要让产品用户体验更优秀,你得想明白这5个问题
- 5.全面易懂!写给新手的信息架构设计指南
- 热门文章