湖州广电台新媒体中心承担了“相约G20・空中看浙江”专题网站的开发工作，而我有幸成为网站前端开发负责人。web前端是用户客户端（浏览器）中网站的直观视觉呈现，是用户体验最为核心的部分。一定程度上，web前端的好坏，直接影响到用户对于整个网站的整体感受，是用户评价网站成功与否的关键因素，因此接到这个任务的时候，我们感到压力大、责任重。
　　前端技术目前仍是一个很新的名词，它包含了HTML（超文本标记语言）、CSS（层叠样式表）和Javascript（脚本语言）三大要素，分别决定了网页的基础框架、表现层以及页面的动态效果及交互性能。随着互联网的高速发展和用户体验标准的不断提升，还出现了一些性能优良的前端框架，如Bootstrap、React等。另外，时下移动互联网炒得火热的“H5”其实也是前端的一个新的标准、新的方向。
　　由于本次专题所站的高度高，信息来源广（由全省11地市联合提供），同时面向全国乃至全世界的用户，因此对网站的稳定性、安全性以及呈现的效果都有很高的要求。综合考虑入口的便捷性和快捷传播的需求，我们将本次专题的总体架构定位为B/S架构（即浏览器和服务器结构）。在此基础上，我们重点在以下几个方面去实现网页的前端布局和交互展示。
　　1.整屏显示、滚动翻页
　　由于主流人群的浏览习惯，传统的PC端网站基本上都采用了纵向展开的方式。即当网站内容不足以在一屏显示的时候，往往采用添加纵向滚动条的方式，将网站其余部分滚动展示。这种展示的好处在于顺着用户的阅读习惯，只需滚动鼠标滚轮，就可以查看剩余内容。随着时下移动互联网的盛行，手机屏上的很多专题页面越来越多地采用了整屏显示效果，单手上下或者左右滑动，进行翻页阅读。这种布局具备很强的视觉冲击力，能够将重要的内容分页面集中进行展示，方便用户分类阅读，往往具有更好的用户体验。本次专题布局综合了用户纵向阅读习惯和单屏翻页的显示效果，将网页前端布局为整屏显示、上下滚动翻页的展示模式。对于实现过程，我们主要采用了Jquery框架，结合设置div块纵向高度百分比来完成。既保证了翻页的效果，也实现了不同屏幕尺寸下页面内容整屏的自适应显示。整屏显示也将网站整体的布局清晰地分成了“首页”、“美丽浙江”、“律动浙江”、“浙里故事”和G20时间五大板块，便于分类阅读；同时每页页眉上的导航能够方便用户快速切换到需要阅读的分类页面。
　　2.CSS3动画效果
　　CSS3是CSS发布的3.0版本，HTML5（H5）标准的重要组成部分，历经近10年的编制，于2014年10月29日，由万维网联盟发布。CSS3标准里，发布了许多新的元素样式，能够实现原先只能用javascript或者图片才能实现的显示效果，大大减少了编程的代码量，也提升了浏览器渲染的效率。更重要的是，CSS3可以实现动画！它可以取代许多网页动画图像、Flash动画，使得浏览器不需要安装flash插件即可呈现网页动画。在专题开发中，CSS3动画是我们重点引入的对象。配合整屏的显示效果，CSS3动画能够将原本静止的文字、图片动起来，通过关键帧（@keyframe）的设置，即可完成各种高难度的动作。我们将首屏的所有图文均设置了不同的动画效果，营造一种影片播放的视觉效果，冲击力较强。同时，每个分页面的导航也均设置了出场动画，更容易引起用户的关注，提示用户可以方便的分页面切换。不过考虑到只有IE9版本以上的浏览器才支持CSS3，因此重要的滑屏效果和轮播图动画效果则采用了传统的javascript编程实现，使其在更早的IE浏览器版本中也能够获得支持。
　　3.Jquery时间轴
　　“律动浙江”版块是此次专题的一个重要分页面，其中的”“城市点亮日”更是重点中的亮点，因此“城市日”如何“点亮”便成为一个重要的议题。鉴于奥运火炬的点亮和传递过程，时间上具有连续性，每天一个节点，又具有可操作性，不会出现争相点亮的混乱局面，因此城市点亮日也设计成了这种方式，而时间轴则是串联整个点亮过程的核心。
　　时间轴的布局和样式主要通过设置进度条和当前节点的div块的position属性来实现；而点亮日城市间的切换则主要通过脚本自动完成。我们将不同的城市进行编码，通过对系统获取的时间进行匹配，来控制浏览器渲染当前页面应该显示的内容，以及相关元素、控件的可用性。这种方式能够及时、可靠地将城市日点亮过程变成一个精度高的自动切换模块。
　　4.伪ajax局部渲染重构
　　AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）,是一种交互式网页开发技术，简单来说就是前端通过与后台服务器进行少量数据交换，使网页实现异步、局部更新。这种技术因为在google地图上的使用而被公众广泛接受。这种技术能够经常在一些网页中看到，由于能够实现前后端的数据交互，同时不必刷新整个网页，大幅度提升了用户体验。
　　在我们的专题网站开发实践中，由于需要保证后台系统的安全性，减少不必要的数据查询和数据交互，同时减轻服务器压力和CPU消耗，我们在网页的一些城市标签（tab）切换中采用了伪ajax的设计。当用户访问网站时，数据一次性加载到客户端/浏览器，当用户切换城市按钮时，并没有跟后台进行数据交互，而是通过简单的DOM（文档对象模型）操作，改变相关其display属性，实现不同城市的转换。
　　5.“H5/CSS3”其他应用
　　(1)圆角按钮
　　圆角按钮是H5/CSS3中新设置的功能，在CSS2.1时代，所有的圆角按钮基本上都是图片，由于图片加载会占用额外的网络带宽，在网络环境较差的情况下，网页中的一些按钮效果往往不能够及时显示；而CSS3中则添加了border-radius属性，通过改变这个属性的数值，原本方形的div块就能添加各类圆角。在专题的移动版首页中，“律动浙江”等四个圆形按钮就是通过设置这一属性实现的，这在不稳定的移动网络访问时，能够较快地实现加载并渲染成功。
　　(2)播放器自适应
　　本次专题针对PC用户和移动端用户进行了浏览器的自动适配检测，页面的布局也会根据浏览的特征发生相应的变化。特别是播放器，传统的PC页面上目前仍主要采用flash播放器，但高级的移动端浏览器已经不再支持flash技术，H5有专门的视频播放标准和技术。因此我们在前端播放器布局时，采用了兼容模式，即用脚本测试浏览器版本，从而确定播放器的技术形式。
　　6.小结
　　“相约G20・空中看浙江”专题从7月份启动上线到9月份顺利完成报道任务，经历了近两个月的考验，共上载265篇稿件，主流客户端环境（浏览器IE7+、chrome、safari、firefox等）均能够准确无误地显示专题内容，为顺利完成报道工作提供了保障。此次专题也是我们对一些最新的前端技术、标准的实践和应用，也包含了我们对整体架构、布局风格、交互方式、用户体验等方面的思考。这些经验的积累对于进一步提升新媒体参与重大事项的报道能力和业务水平具有重要的借鉴意义。