三亚网站建设美工,开发者应用,哈尔滨网站关键字优化,福州短视频seo网站继影片《饥饿游戏》获得票房成功后#xff0c;《饥饿游戏2#xff1a;火星燎原》也于2012年宣布开拍#xff0c;将在今年的11月22日登陆全球各大院线。值此之际#xff0c;微软携手美国狮门影业公司和 RED Interactive Agency 一起为影迷打造了一个基于 HTML5 现代网页规范…继影片《饥饿游戏》获得票房成功后《饥饿游戏2火星燎原》也于2012年宣布开拍将在今年的11月22日登陆全球各大院线。值此之际微软携手美国狮门影业公司和 RED Interactive Agency 一起为影迷打造了一个基于 HTML5 现代网页规范开发的沉浸式体验网站——饥饿游戏浏览器The Hunger Games Explorer地址为 http://www.thehungergamesexplorer.com. 在这里全世界的饥饿游戏迷们可以获得影片上映前的一切资讯包括狮门影业官方放出的海报、预告片等等同时也可以参与到全球社交媒体关于饥饿游戏的讨论中来。 今天消费者们可以与我一同看看一个优秀的 HTML5 站点能给我们大家带来怎样的新体验而开发者们也可以参考这个网站所使用的一些 HTML5 特性去开发出您自己的优秀 HTML5 站点。 网站亮点 从功能上看该网站为所有的影迷们提供了一站式的影讯资源平台不仅可以看到狮门公司所发布的官方讯息更可以实时查看到来自全球的社交媒体上关于饥饿游戏的讨论。所有的内容包括图像、视频和文字都是通过一个个的方块区域组织到一起的内容也是直观地呈现在了不同的方块里面并且很多区块中的内容是动态的给网站增添了视觉上的活力。而且如果您有触摸屏的话不难发现这个站点是支持多点触控的用双指可以进行自然的缩放来调整页面内容的呈现很好地支持直接用手指去与整个网站进行交互。 这些社交媒体的数据抓取和整合自全球热门的社交媒体网站例如 Facebook、Twitter、YouTube、Pinterest 和 Tumblr. 同时这个饥饿游戏浏览器网站也支持通过 Facebook 和 Twitter 账号登录登录后用户可以创建自己的页面来组织你所关注的资源和内容也可以去赞别人发布的内容因此这个站点本身通过对第三方社交媒体网络的整合为用户轻松提供了一个新的影迷专用社交平台。这样的做法是值得推荐给开发者们的。 在UI设计方面网站整体呈现出一种现代感借助 HTML5 的一些功能网站可以使用自定义的字体并且可以设计出与影片主题契合的配色风格和界面元素。在我们点击某一内容方块时可以看见该方块放大且周遭方块缩小重排的动画效果这样会让内容的切换不显得过于突兀。用户在刚打开这个网站的同时也可以看见方块向中间堆叠铺陈的效果虽然很快但能给人舒适的感受。在功能上用户还可以对某一关键字进行检索也可以进行筛选。该网站也采用了瀑布流的方式网站不设底边一直往下滚动会看见越来越多的来自社交媒体网站的内容被整合进来并得以呈现。 横跨不同设备并提供一致用户体验也是该网站的一个亮点因为不论是从 PC 端的 IE10 还是智能手机或平板的支持 HTML5 的浏览器访问该站点都可以看到一致的内容与风格只不过里面的方块大小和排列方式会根据用户的屏幕分辨率来自动调整。对于这样的自适应效果我们也可以通过 PC 端的 IE10 浏览器看到具体做法是改变窗口的尺寸。 幕后的技术 网站的瀑布式内容呈现方式借助了 JavaScript 将大大小小的信息方块无缝地组织到一起。这是一个典型的网格布局只不过它使用的不是传统的网格布局技术而是使用了 JS 将每一块内容放到合适的位置并且使用 3D CSS 变换来实现块移动和旋转时候的效果。 而对于触摸的支持它利用了 Microsoft Pointers Model因此可以做到使用一个 API 就可以同时管理鼠标和手指触摸这两种用户输入。 对于 3D 翻转动画网站运用了使用 requestAnimationFrame API 优化的 CSS3 变换这样能确保动画效果在不同的浏览器和设备上都一样流畅。requestAnimationFrame 技术能够在不牺牲运算能力的同时进一步提高响应度响应度的提高也是让用户感觉到动画流畅的一个关键。 如果您想查看这些技术范例的代码可以移步此处 http://www.thehungergamesexplorer.com/behind-the-scenes 创作用户喜爱的网站 如今的互联网不再单以信息内容为第一要务用户对参与和交互的要求已经越来越高因为 Web 2.0 是一个强调用户为中心、用户创造内容和参与交互的一个时代。因此用户体验是越来越重要的一个环节。要做好用户体验并且兼顾这一需求在未来的发展旧有的一些技术似乎已不再能很好地支撑用户体验的今天和明天。虽然现在 Flash 等插件在网页中有很多运用但是我们已经通过这些优秀的 HTML5 网站看到了无插件网页带来的一些优势例如高性能、省电与浑然天成的视觉效果等。对于熟知旧有技术的开发者而言做出改变虽然看似有些困难但是我们应当看到现代网页技术的发展给我们带来的喜悦以及能够给用户带来的惊喜与价值。我们值得为用户做出改变也同样值得为网站用户体验及网页技术的未来做出改变。 微软通过参与研究和推动 HTML5 等现代网页技术规范改进了 IE 浏览器对 HTML5 等现代网页技术的支持也正不断为开发者提供越来越多的指引和资源。我们看到已经有越来越多的开发者步入到 HTML5 开发的行列中来也期待在不久的将来能有更多的网站构建于新的技术之上 如果您需要更多了解HTML5 等现代网页技术可以前往 http://www.ietestdrive.com 查看更多技术示例及代码。前不久微软也新推出了 http://www.modern.ie 网站帮助开发者更轻松地评估现有在线网站当然您也可以选择下载一个用于本地的 modern.IE 程序用来简化您的开发测试工作。试试身手吧转载于:https://www.cnblogs.com/mvperic/archive/2013/05/09/3069250.html
