基于HTML5技术的移动Web前端设计与开发
2021-09-24 06:12曹华山
科技与创新 2021年18期
曹华山
（湖南大众传媒职业技术学院，湖南 长沙410100）
1 引言
随着市场竞争的日益激烈，产品生产正逐步向快速交付、频繁迭代方向发展，互联网产品也是如此。人们对互联网产品的交付周期要求越来越高。近年来，随着移动应用的兴起，移动终端的数量不断增多[1]。目前，智能手机已经作为人们日常生活乃至工业生产中必不可少的移动工具。互联网技术和移动应用的充分融合可以有效提升人们的工作效率、生活质量，移动互联网正改变着人们的生活。随着物联网概念的提出，移动互联网显得更加重要[2]。因此，未来的发展方向势必是移动互联网。
目前，人们日常使用的移动终端操作系统主要分为三大操作系统，分别是IOS、Andriod、Windows。但是真正兼容移动前端系统的开发语言较少，以往的开发中往往需要在电脑终端和移动终端分别配置和开发两套不同的系统[3]。此种开发模式导致了开发成本高，开发周期长，开发工作难以满足快速交付的基本要求。因此，从前台界面入手，寻找可以兼容三大平台的开发语言和架构势在必行。
2移动Web及HTML5技术特点
2.1 移动Web
随着4G、5G、大数据技术的不断发展，催生出一大批移动社交及服务软件，如微信、抖音等，以上软件对于移动互联网的发展起到了很好的推动作用。在社交和服务软件的使用过程中，人们对于移动应用的前端使用体验要求不断提高。
2.2 HTML5技术及特点
近年来，逐步兴起了HTML5技术，这是移动互联网技术中应用最为广泛的技术。此种技术最早产生于20世纪90年代，最先应用于移动APP的开发过程中，很好地解决了用户体验迭代优化以及兼容不同操作系统的问题[4]。随着H5技术的不断发展，Web开发逐步进入了一个新阶段，在设计标准、开发的标准化等方面取得了较大进步，基于HTML5技术的Web开发技术有了质的提升，例如用户在使用H5技术时，可以将视频、动画、图像和音频等组件嵌入至网页中，很好地提升了用户的使用体验感[5]。
HTML技术经历了多个发展历程，例如HTML1主要用于搭建网页架构，而HTML5则是在在HTML1的基础上不断进行发展和更新，创建了自己特有的标签和语法，使得图片的画面等可以嵌套在网页中，实现最终设计的效果。与HTML1相比，HTML5具有以下几个方面的创新：①使用了结构化的标签语言，如hgroud、footer、section、header等，便于使得代码结构的清晰性和可读性得到了很大程度提升；②可以利用localStorage技术支撑离线存储技术；③借助HTML5的IndexedDE技术可以实现复杂数据的存储，使用缓存技术将文件资料等信息进行本地化下载，这便使得用户可在离线状态下使用移动应用；④HTML5可以发挥其独特的多媒体优势，实现移动应用音频视频、图像功能的展示。在开发移动应用过程中，借助网页技术构建起组织形式。
3 Web前端系统及HTML5关键技术
3.1 Web前端系统
Web前端系统的团队主要包括三个：交互设计师、视觉设计师和前端开发工程师。其中交互设计涉及到从基础界面设计到软件开发、运维等全寿命周期的工作中，设计过程中，应该充分考虑目标用户在面对界面时可能作出的反应。
交互设计的注意点主要有：有用户掌握界面的主动权，对于错误的提示要清晰，语言可读性和易懂性要强，能够快速地得到反馈，导航和定位功能要有效协调，可以方便退出。视觉设计主要从文字、图像、版式布局、色彩四个方面入手，图文并茂，实现文字和图像的优化布局，对文字要进行艺术字处理，加强文字在界面中的艺术感，从而给用户带来良好的视觉体验。图像的表现力比文字更加直观，在图像和文字的配合下，可以使信息的传递感染力更强，图像和文字、音频不同，降低了由于地域的不同而产生的交流障碍，是一种可以进行全球范围内沟通的语言形式。版式布局是对复杂的信息碎片进行统一的组织梳理，将不同的图像和文字等元素进行综合排版，达到视觉上的和谐和美化，方便用户在阅读过程中可以准确把握脉络，快速找准重点。色彩的不同搭配可以为用户带来独特的感受，选择合理的搭配方式，可以强化界面效果。视觉设计师在进行视觉设计过程中，需要了解Photoshop等工具，采用布局、色彩和表单等设计方法。
Web开发是各种技术的融合，包含HTML技术、CSS技术和Javascript技术，给用户开发出体验较好的界面。Web前端的标准主要有结构标准（HTML标准、XML标准和XHTML标准）。表现标准主要是CSS层，借助CSS技术可以定制和改善网页的效果，还可以实现图像的淡化、淡入和淡出等，并且可以进行初步的设计交互，从而实现网页整体美观度的提升。借助CSS技术可以实现结构码和表现码的业务分离，降低了站点维护的难度，简化了HTML文档。行为标准是ECMA国际标准ECMAScript262标准。另外DOM（Document Object Model，文档对象模型）是处置超文本协议的标准程序接口，借助DOM建立的文档树形结构和API，开发者便可以掌握对页面操作的主动权，可以轻松地实现节点的增删改。网页DOM结构如下：
3.2 HTML5关键技术
3.2.1 canvas技术
H1界面中相比于传统的前端技术，新增了
3.2.2 Device API技术
Device API是一种可以访问摄像头、麦克风和地理位置的标准API接口。此种标准定义了一套可以实现对本地设备产生的多媒体数据的在线传输，如进行视频的录制和保存。Geolocation定位API是HTML5的重要组件，通过调用此种API可以帮助用户获取当前位置。目前，市场上的浏览器种类较多，但并非所有浏览器均支持Geolocation定位API。
3.2.3 表单技术
表单技术是Web应用中最常用的技术，在电脑端可以使用HTML和javascript技术实现用户基本信息的输入，在移动应用端，由于键盘输入受限。HTML5根据用户的输入方式进行了一套方案优化，并对表单做了一些功能优化，如对表单的结构进行自由化，在传统HTML架构中，表单中的各个元素必须防止在form标签中，比如select和input标签，在HTML5中，取消了此种限制，而是根据自身ID实现元素的定位，此种方式让表单的自由度更高。另外，表单的输入类型变得更加多样化，HTML5技术引入了email、color、search、date等多种类型的输入元素，例如：。
4 基于HTML5的移动Web前端系统搭建步骤
4.1 基本流程
构建Web前端的基本流程分为需求调研分析、原型设计、前端代码开发。其中原型设计及中分为低保真和高保真设计。用户的需求分析包含分析用户群分析和人物角色分析，用户调研可以采用问卷调查、可用性测试两种方式进行。低保真设计主要进行交互设计，高保真设计主要负责视觉设计、初期前端开发。
4.2 移动Web前端开发
首先对代码进行分层，分为结构层、表现层和行为层三层。三层在代码级别分别对应HTML、CSS和JaveScript三种不同的代码文件。结构层要实现对页头、导航、内容和页脚的定义，然后在其基础上实现HTML标签的定义，在标签定义过程中，要注意几点问题。首先要使用带具体语意的标签元素；其次，只把
