ＥＬＥＣＴＲＯＮＩＣＳ ＷＯＲＬＤ・探索与观察 基￣ｈｔｍｌ５技术宾现移动前瑞开发研究 广州＿Ｔ－商学院彭梅 【摘要】随着ＨＴＭＬ５技术在国内的推广与应用，浏览器逐步支持更丰富＃￣ＨＴＭＬ５特性，它在给新的移动应用带来无限可能性的同时，还 能带来更快、更好、更炫的用户体验。ＨＴＭＬ５作为移动互联网新一代的核心技术，具有更低的开发及维护成本，我们就现今ＨＴＭＬ５技术在 移动前端开发作用进行了深刻的分析。 【关键词】ＨＴＭＬ５；移动应用；前端开发 １．弓ｌ亩 据统计２０ｌ ３年全球将有ｌ０亿手机浏览器支持ＨＴＭＬ５，同时 ＨＴＭＬ ｗｅｂ开发者数量将达￣Ｕ２００万。从如今层出不穷的移动应用 就知道，在这个智能手机和将平板电脑大爆炸的时代，移动优先已 成趋势，不管是开发什么，都以移动为主。毫无疑问，ＨＴＭＬ５将 成为未来５．１０年内，移动互联网领域的主宰者。因此，对ＨＴＭＬ５ 技术在移动Ｗｅｂ前端设计开发研究有着鲜明的现实意义。 ２．ＨＴＭＬ５的发展历程 ２００４年Ｏｐｅｒａ、Ｍｏｚｉｌｌａ和苹果这些浏览器厂商联合起来，组成 网页超文本应用技术工作小组（ＷＨＡＴＷＧ），致力于完善ＨＴＭＬ 标准。ｗＨＡＴｗＧ通过论坛讨论进行多人决策，推出一系列优势明 显的ＨＴＭＬ５规范文档，促使Ｗ３Ｃ于２００７年放弃ＸＨＴＭＬ，转而 对ＨＴＭＬ５进行标准化。ＨＴＭＬ５是第五版超文本标记语言，于２０１４ 年１０月由万维网联盟（Ｗ３Ｃ）发布为正式推荐标准。它是ＨＴＭＬ自 １９９１年问世以来，最具变革价值的技术规范，历经多年修订与完 善才制定完成。相较ＨＴＭＬ４，ＨＴＭＬ５有了很大变化。它以健壮性 为原则，结合ＨＴＭＬ和ＸＭＬ的各种规范，并摒弃ＸＨＴＭＬ过于严格 的语法，具备较好的浏览器向后兼容性。 ３．ＨＴＭＬ５应用现状 ＨＴＭＬ５增加的新功能及新特性，并且更适合开发当今流行的 移动应用，因此从刚面世的那天，它就受到了开发人员及用户的青 睐，主要有３个方向的应用： （１）ＨＴＭＬ５用来开发游戏 ＨＴＭＬ５新增了ｃａｎｖａｓ对象，可以在浏览器中绘画图像，因此 ｃａｎｖａｓ对象可以实现原来ｆｌａｓｈ的功能，且不用额外安装插件，因此 可以利用这个新增加的功能，再辅以Ｊａｖａ、ＣＳＳ等开发ＨＴＭＬ５游 戏，尤其是移动端的小游戏。因为移动设备的便携性，可以通过各 种移动应用接口或者浏览器加载设计精巧的ＨＴＭＬ５小游戏，随时 随地玩乐，所以ＨＴＭＬ５游戏借助各种社交平台的传播，例如微信 朋友圈、微博或其他社交网站，一度风靡。 （２）ＨＴＭＬ５用来进行网络营销 网络营销是建立在互联网基础上、借助于互联网来更有效地满足 顾客的需求和愿望，从而实现企业营销目标的一种手段。ＨＴＭＬ５页面 设计美观、功能强大、互动性强、适合移动端操作，营销设计人员们 趋之若鹜，基于ＨＴＭＬ５创建各种营销页面十分流行，甚至有了简称的 Ｈ５营销这一概念。Ｈ５营销通常用于活动运营、品牌宣传、产品介绍、 总结报告 形式多样，可以是游戏、邀请函、贺卡、测试题等形式。 （３）ＨＴＭＬ５用来开发ＷｅｂＡＰＰ ｗｅｂ ＡＰＰ就是运行于网络和标准浏览器上，基于网页技术开发实 现特定功能的应用。Ｗｅｂ ＡＰＰ和一般Ｗｅｂ网站的区别在于使用网页技 术做信息的展示，包括文字和媒体文件等，而Ｗｅｂ Ａｐｐ更侧重执行某 个任务。使用ＨＴＭＬ５的描述文件功能，可以实现离线应用。虽然Ｗｅｂ 应用使用的基础就是要在线，然而并不能保证永远不掉线。离线应用 可以保证Ｗｅｂ ＡＰＰ应对间歇性的网络中断，不会中断任务，用户体验 如同原生ＡＰＰ。此外，ＨＴＭＬ５新增的本地存储功能、音视频播放功 能以及更多的ＡＰＩ，可以更便捷地实现更丰富的功能以及更良好的交 互，虽然这些功能或者交互在以前只有原生ＡＰＰ才可以实现。 ・７６・ 电子世界 ４．ＨＴＭＬ５在移动Ｗｅｂ前端关键技术 （１）ＨＴＭＬ５ ｃａｎｖａｓ技术 Ｃａｎｖａｓ技术最先由苹果公司提出，他通过ｃｏｎｔｅｓｔ进行绘图和图像 处理。在ＨＴＭＬ５中定义了一个新的标签＜ｃａｎｖａｓ＞来进行图像的处理， ＜ｃａｎｖａｓ＞￣￥签提供了一个２Ｄ ＰｒｏｇｒａｍｍａｔｉｃＡＰＩ可以以较低代价来处理图 像。Ｃａｎｖａｓ绘图ＡＰＩ主要将整个操作定义在一个ｇｅｔＣｏｎｔｅｘ（）方法上。 开发者可以通过Ｃｏｎｔｅｘｔ进行操作图像元素，在绘图方面，提供的绘图 主要有ｓｔｒｏｋｅ（）、ｌｉｎｅＴＯ（）、ｆｉｌｌＲｅｃｔ（）等绘图方法，在图形处理 方面，提供ＴｉｎｍａｇｅＤａｔａ接口实现图片文件与数据流形式的转换。 此外，ＨＴＭＬ５还提供了ＷｅｂＧＬ（３Ｄ ｒｇａｐｈｉｃＡＰＩ），它可以使得ｗｅｂ 工作人员在工作环境下生成生动的动画效果。虽然，目前ｗｅｂＧＬ技术 还并不完善，但不久后的将来会给用户不输于ｎａｔｉｖｅ的体验效果。 （２）ＨＴＭＬ５ Ｄｅｖｉｃｅ ＡＰＩ技术 ＨＴＭＬ５ Ｄｅｖｉｃｅ ＡＰＩ技术主要包括摄像头和麦克风的Ｍｅｄｉａ Ｃａｐａｔｕｒｅ ＡＰＩ和地理位置定位Ｇｅｌｏｃａｔｉｏｎ ＡＰＩ。Ｍｅｄｉａ Ｃａｐａｔｕｒｅ ＡＰＩ技术现在还处 于草案阶段，最终还未确定，改标准主要定义一套ＡＰＩ用于访问本地 设备而产生的多媒体数据流，还可以通过Ｊａｃａｓｃｒｉｐｔ来控制和处理媒 体流数据。Ｇｅｌｏｃａｔｉｏｎ ＡＰＩ地理位置定位是ＨＴＭＬ５的主要组成部分， ＨＴＭＬ５提供了地理位置定位ＡＰＩ，在Ｗｅｂ应用中调用ＡＰＩ，就能非常便 捷的获取用户的当前位置。但是，能支持该ＡＰＩ的浏览器要求的版本都 比较高，例如需要ＩＥ９、Ｆｉｒｅｆｏｘ３．５、Ｏｐｅｒａ１０．６、Ｃｈｒｏｍｅ４．０、Ｓａｆａｒｉ４．０ 版本或更高时候才能有更好的定位体验。支持支持地理位置的ＡＰＩ的浏 览器会定义ｎａｖｉｇａｔｏｒ．ｇｅｏｌｏｃａｔｉｏｎ。支持地理位置的ＡＰＩ的浏览器会定义 ｎａｖｉｇａｔｏｒ．ｇｅｏｌｏｃａｔｉｏｎ属性，此属性拥有三个方法的对象分别为： ｎａｖｉｇａｔｏｒ．ｇｅｏｌｏｃａｔｉｏｎ．ｇｅｔＣｕｒｒｅｎｔＰｏｓｉｔｉｏｎ０获取用户当前位置 ｎａｖｉｇａｔｏｒ．ｇｅｏｌｏｃａｔｉｏｎ．ｗａｔｃｈＰｏｓｉｔｉｏｎ０获取并不断监视当前位 置，一当有更改就会触发指定函数 ｎａｖｉｇａｔ０ｒ．ｇｅｏｌｏｃａｔｉｏｎ．ｃｌｅａｒＷａｔｃｈ０ 停止监听用户位置 （３）ＨＴＭＬ５表单技术 在Ｗｅｂ前端开发中实现用于的输入信息是最基础的功能，但在 移动端由于键盘受限对用户输入信息构成一定的影响，ＨＴＭＬ５工 作组根据用户在键盘输入中遇到的问题对原来的技术升级使得原有 的表单技术被更新。主要的更新有： １）表单结构更自由 ＸＨＴＭＬ中需要放在ｆｏｒｍ之中的诸￣Ｄｉｎｐｕ／ｂｕｔｔｏｒｄｓｅｌｅｃｔ／ｔｅｘｔａｒｅａ等标签 元素，在ＨＴＭＬ５中完全可以放在页面任何位置，然后通过新增的ｆｏｒｍ 属性指向元素所属表单的ＩＤ值，即可关联起来，可以节省不少时间。 ２）专为移动平台定制的表单元素 ＨＴＭＬ５表单引入了许多输入类型，主要有ｅｍａｉｌ、ｕｒｌ、ＢＵｍ． ｂｅｒ、ｒａｎｇｅ、ｓｅａｒｃｈ、ｔｅｌ和ｃｏｌｏｒ等输入类型来方便移动端用户输入和 简化移动端开发。 ３）新增的表单属性 ＨＴＭＬ５表单还新增Ｙｐｌａｃｅｈｏｌｄｅ、ｒｅｑｕｉｒｅ／ｐａｔｔｅｒｎ、ａｕｔｏｆｏｃｕｓ、 ｌｉｓｔ、ｍａｒｄｍｉｎ／ｓｔｅｐ、ａｕｔｏｃｏｍｐｌｅｔｅ－－些表单属性。 ｐｌａｃｅｈｏｌｄｅｒ属性：＜ＩＮＰＵＴ Ｔｔｙｐｅ＝”ｔｅｘｔ”ｉｄ＝口１ａｃｅｈ０ｌｄｅｒ ｐｌａｃｅｈｏｌｄｅｒ＝’’ＸＸＸＸＸＸ“ ｐｌａｃｅｈｏｌｄｅｒ属性不仅免去了用Ｊｓ去实现点击清除表单初始值，而且 浏览器支持也还不错，ＭＳ除ＴＦｉｒｅｆｏｘ，其他标准浏览器都能很好的支持。 ｍａｘ／ｍｉｎ／ｓｔｅｐ属性：＜ＩＮＰＵＴ ｔｙｐｅ－－ｒａｎｇｅ ｓｔｅｐ＝”２０”ｒａｉｎ＝”１” ｍａｘ＝’’１００” （下转第７８页） ＥＬＥＣＴＲＯＮＩＣＳ ＷＯＲＬＤ・探索与观察 教育一定在云上，教师课前完成视频的录制、编辑与上传，学生根 加强监督以防其出现聊天、走神等一些与学习无关的行为出现。 据自身需求制定视频学习进程。 ３）作品展示阶段。聋哑学生以小组合作形式完成任务，让每位学生 课前知识速递以学习先行理念，在家长监督下自主观看视频、 都有机会站在讲台展示成果，增强聋哑学生自信心。同时评价机制应考 针对性小练，并以微信、ＱＱ群为媒介进行交流。教师通过网络及 虑多方面因素，包括教师评价、生生评价以及学生自评等方式。 时掌握学情，为备课环节做准备。 ４）教学反思阶段。针对翻转课堂笔者设计了“创设情境，导 入新知”一“教师操作，学生模仿”一“当堂测验，展示自我”一 “自我评价，不断完善”四个环节。这个设计体现了新课程理 念，展现了新的教学方式和学习方式在教学中的应用，让学生能亲 自参与自主学习、合作交流的过程，使学生得到不同程度的发展。 ４总结与展望 ４．１研究总结 翻转课堂以学生为主体，精心设计课堂互动环节，教学过程注 重启发，提问由浅入深，并在重点处辅以手语，帮助学生在理解基 础上进行知识灌输，提高了聋哑学生自主探究和合作学习的能力。 ４．２展望 鉴于国内外对翻转课堂教学模式在特殊教育领域的研究不多， 图２基于“课内翻转”的翻转课堂教学模式 且高效率的翻转要求学生必须具有良好的自制、合作探究以及学习 课内翻转流程包括课堂内化（交流、作业、合作、个性化指 能力，加之中国家长对学生期望过高，使这种“在家学习，到校作 导）、评价反馈（作业、考试、集体辅导与个别化指导）以及总结 业”模式的实施存在一定难度。因此基于翻转课堂模式在特殊学校 反思（教学反思、交流互助、作品优化）三部分。 信息技术课程中的应用设计的可行性需进一步验证。 ３．２翻转课堂教学模式教学流程设计 ３．２．１课前知识速递 参考文献 １）教学目标分析。从知识与技能、过程与方法以及情感态度价 ［１】聋校义务教育课程标准（２０１６年版）［ＥＢ／ＯＬ］ｈｔｔｐ：／／ｍｏｅ．ｇｏｖ 值观三个维度来理解。 ｃｎ／ｓｒｃｓｉｔｅ／Ａ２６／ｓ８００１／２０１６１２／ｔ２０１６１２１３＿２９１７２２．ｈｔｍ１． ２）教学重难点分析。根据教材和课程标准，结合学生具体情况 【２】国ｇｑ，－￣期教育发展规划纲要（２Ｏ１Ｏ一２０２Ｏ年）【Ｉ狙／ｏ Ｌ】．ｈｔｔｐ：／／ｗｗｗ 确定教学重难点。 ｒｎｏｅ．ｅｄｕ．ｃｎ／ｐｕｂｌｉｃｆｉｌｅｓ／ｂｕｓｉｎｅｓｓ／ｈｔｍｌｉｆｌｅｓ／ｍｏｅ／ｓ４６９３／２０１４０７／ｘｘｇｋ＿１７１９０４．ｈｔｍ１． ３）教学视频制作。课程视频以重难点为切入点，以５．１５分钟的 【３】王勇．翻转课堂的理论与实践Ｕ１＿浙江大学出版社，２０１６． 视频呈现完整的教学过程。 【４】吴猛．聋校小学信息技术课程翻转教学研究『Ｄ】．河北：河北师 ４）学习任务单。《中国信息技术教育》２０１３年第三期指出学习 范大学，２０１５． 任务单应满足每个人自定义的进度需求，同时涵盖学习指南、学习 ｆ５１张攀峰，张瑞，赵一，何嫜媛，刘迪．翻转课堂在聋哑类特殊教育 任务、建构性学习资源等内容。 学校中应用的可行性分析Ⅱ１＿中国教育信息化，２０１６． ３．２．２课内翻转教学流程 【６１张金磊．翻转课堂教学模式研究［１１遗程教育杂志，２０１２． １）创设情境，导入新课。新知识的学习多以任务、游戏、故事 等方式来提高聋哑学生课堂参与度。 作者简介： ２）自主探究、合作交流。特教学校教师往往忽视学生学习自主性， 赵苏亚（１９９４～），女，河北邢台人，河北师范大学教育技术 翻转课堂教学呼吁将课堂还给学生，帮助学生利用学习任务单对知识进 学专业本科在读。 行归类整理。同时考虑到聋哑学生课堂缺乏一定自制力，因此建议教师 指导教师：张攀峰。 （上接第７６页） 这组属性配合ｒａｎｇｅ类型使用，分别指定了最大值、最小值和 帮助下，新媒体内容能通过应用母版进行编辑，用户只需后期进行 步长，比以前的控件实现简单多了。 图文内容的替换，因此很有可能成为传媒业转型的契机。ＨＴＭＬ５ 取代Ｆｌａｓｈ已经是不可逆的趋势，而伴随着虚拟现实（ＶＲ）、增 ５．ＨＴＭＬ５技术在移动Ｗｅｂ前端设计开发前景 强现实（ＡＲ）等高新技术的兴起，ＨＴＭＬ５的未来更增添了不少机 遇，可预见的是它会比Ｆｌａｓｈ走得更远。 随着４Ｇ网络，大数据时代的到来，社交、移动和位置服务的融合 （４）内容往重度化方向发展。 发展，以及使用户能够随时随地的获取信息资源，使得ＨＴＭＬ５不仅在 在用户对页面交互能力和ＨＴＭＬ５拓展功能的要求提高之际， 电脑端，而且在移动端也一定会得到广泛的应用。目前ＨＴＭＬ５技术已 轻度营销的市场份额会逐渐降低，往重度营销内容转化。重度营销 经日趋成熟，我国国内ＨＴＭＬ５行业在未来几年有四个发展前景： 并不完全意味着大项目、高预算、长周期、大团队，而是相对轻度 （１）垂直领域解决方案往在线应用方向发展。 营销以用户生产内容为主，它更注重专业内容的生产。 与ＨＴＭＬ５行业密切相关的垂直行业主要包括在线教育、电商和 流媒体三种类型。近年来，“慕课”在国内兴起，在线课堂测评成为 ６．结束语 ＨＴＭＬ５行业的发展预测。Ｈ］咖５能方便地对视频播放位置进行标记， 在无需插件的前提下嵌入一系列反馈机制，有利于课程线上考核。 ｈｔｍｌ５作为一个前端的编程语言，其发展前景是非常好的。随着谷 （２）网页游戏往交互游戏方向发展。 歌、Ｔｗｉｔｃｈ、ＹｏｕＴｕｂｅ、谷歌等大型企业将视线投向ＨＴＭＬ５，更加确认 根据中国游戏产业年会上发布的｛２ｏ１５年中国游戏产业报告》， 了ＨＴＭＬ５在互联网时代的发展前景，总有一天它将成为主流技术。 这一年国内游戏市场规模高达１４０７亿，其中网页游戏占１５．６％，约为 移动游戏的５０％。而据ＤａｔａＥｙｅ２０１５年发布的ＨＴＭＬ５游戏数据报告， 参考文献 在网页游戏中ＨＴＭＬ５游戏占比并不高，且付费率较低。尽管ＨＴＭＬ５ ［１】黄悦深．基于ＨＴＭＬ５的移动ｗｅｂ Ａｐｐ开发Ｕ】．图书馆杂志，２０１４￣７） 游戏具备无需下载、包含社交属性、开发成本低等优势，但如果没有 ３２－４３ 充分利用ＨＴＭＬ５的新特性，加强移动游戏的交互能力，它很难在游 ［２】严琦，朱治国．ＨＴＭＬ５对移动应用的影响Ⅱ】．信息通信技术，２０１２（０６） 戏市场中异军突起。由此，网页游戏未来更有可能结合ＨＴＭＬ５优良的 １５－１６． 通信功能，往跨屏互动等交互特征更明显的形式发展。 【３】盛婷婷．基于ＨＴＭＬ５技术的移动ｗｅｂ前端设计与开发分析Ⅲ． （３）传媒业往内容直接填充方向发展。 电子制作，２０１６，（１９）：４６－４７． 统传媒业依赖于纸质出版，只需在母版和排版规范的基础上对 ［４】黄海玲．ＨＴＭＬ５ Ｗｅｂ－￣￣术Ｔ＂￣ＡＰＰ快速开发分析卟无线互联 内容进行版式设计，但新媒体的内容编排却往往依赖于发布平台， 科技，２０１６，（０８）：６９—７０． 不同平台所提供的多媒体支持性能更大相径庭。在ＨＴＭＬ５模板的 【５］Ｈ５研究院２０１５年中国ＨＴＭＬ５行业发展报告ｌＩ ．２０１６，（０１）：５—１５ ・７８・屯子＇Ｉ｜界
