《物联网web应用技术》课件 项目一 物联网与web技术

《web应用技术》课程核心知识：HTML基础、CSS网页布局、JavaScript事件处理、使用JavaScript设计脚本化CSS、BootstrapWeb开发框架等知识。课程介绍：以能力为本位、以职业实践为主线、以项目课程为主体。培养技能目标：HTML页面设计、CSS样式布局、JavaScript代码编程、HTMLDOM、Web开发框架使用、Web图表设计各环节的技能要素。课程简介课时分配基础篇

Web网页的内容和布局解析物联网Web应用技术1989年3月，蒂姆·伯纳斯·李（TimBernersLee）编写了第一份万维网项目开发计划。网络从一个不起眼的开始，在短短三十年内彻底改变了世界。篇章引入章节任务2022年3月1日黄冈教育谷《Web应用技术》物联网Web应用技术项目一物联网与web技术任务一

物联网概述任务引入世界各国和地区对物联网给予高度关注，中国政府也积极谋划布局物联网发展，2009年8月，总理温家宝在无锡考察时做出关于“建立感知中国中心”的重要指示精神。2011年11月《物联网“十二五”发展规划》，2013年2月《关于推进物联网有序健康发展的指导意见》，明确了物联网发展的方向和重点，提出了发展目标、主要任务和保障措施。任务描述:物联网的概念；物联网体系架构；行业应用。任务教学目标：了解物联网的概念；掌握物联网体系架构；了解物联网行业应用。任务概要教学内容物联网概念物联网体系架构常见物联网行业应用政府支持措施一二三四物联网概念知识点一物联网是指通过信息传感设备，按约定的协议，将任何物体与网络相连接，物体通过信息传播媒介进行信息交换和通信，以实现智能化识别、定位、跟踪、监管等功能。物联网物联网概念2009中国移动2009年8月24日，中国移动总裁王建宙在台湾公开演讲中，也提到了物联网这个概念。物联网概念中国工业运行2009年夏季报告会工信部总工程师朱宏任在中国工业运行2009年夏季报告会上表示，物联网是个新概念，是指各类传感器和现有的“互联网”相互衔接的一种新技术《ITU互联网报告2005:物联网》2005年11月27日，在突尼斯举行的信息社会峰会上，国际电信联盟(ITU)发布了《ITU互联网报告2005:物联网》，正式提出了物联网的概念1999年中国启动传感网研究我国的技术研发水平处于世界前列，具有重大影响力物联网的体系架构知识点二（一）三层架构应用层是物联网和用户的接口，它与行业需求结合，实现物联网的智能应用。Web应用技术是应用层的一项技术。网络层由各种网络，包括互联网、广电网、网络管理系统和云计算平台等组成，是整个物联网的中枢，负责传递和处理感知层获取的信息。感知层由各种传感器构成，包括温湿度传感器、二维码标签、RFID标签和读写器、摄像头、红外线、GPS等感知终端。感知层是物联网识别物体、采集信息的来源。感知层网络层应用层（二）四层架构常见物联网应用知识点三常见物联网应用政府支持措施知识点四政府支持措施推动典型示范，带动发展制订发展规划全面布局突破关键核心技术利用物联网校企联盟“三角平台”发挥优势政府启动专项资金加强国际国内标准，保障发展政府支持措施Web应用技术物联网体系架构中的那个层次？思考问题本任务学习了物联网的概述。包括如下内容：1.物联网的概念；2.物联网体系架构；3.行业应用。任务小结1.查阅资料至少3个列举身边的物联网应用案例。作业谢谢！THANKS!黄冈教育谷2022年3月1日《Web应用技术》物联网Web应用技术项目一物联网与web技术任务二Web技术概述任务引入自从1989年由

TimBerners-Lee(蒂姆·伯纳斯·李)

发明了

WorldWideWeb

以来，Web主要经历了3个阶段，分别是静态文档阶段（Web1.0）、动态网页阶段（Web1.5）和Web2.0阶段。随着区块链、人工智能和物联网在内的多项技术迅速发展，人们又提出了Web3.0的构想。任务描述:Web技术概述；网络程序开发的体系结构；前端开发的工作内容；web前端开发环境搭建。任务教学目标：了解web技术和发展历程；了解网络开发的体系结构和前端开发的工作内容；完成HBuilderX软件的下载安装；会创建HTML项目。任务概要教学内容Web技术概述Web的发展历程网络程序开发的体系结构前端开发一二三四Web技术在物联网行业中的应用Web前端开发环境搭建五六Web技术概述知识点一页面通常都是HTML格式的；网页可以展示文字、图片、媒体等内容；网页需要通过浏览器来阅读。Web在计算机网页开发设计中就是网页的意思。网页是网站中的一个页面。Web（一）什么是Web（二）Web应用程序的工作原理（二）Web应用程序的工作原理web应用程序工作过程：用户使用浏览器通过HTTP协议请求服务器上的Web页面；Web服务器接受到用户的请求；服务器处理后发送给客户端浏览器；客户端浏览器显示页面。Web的发展历程知识点二Web的发展历程自从1989年由

TimBerners-Lee(蒂姆·伯纳斯·李)

发明了

WorldWideWeb

以来，Web主要经历了3个阶段。Web1.0Web1.5Web2.0静态文档阶段受低版HTML语言和旧式浏览器的制约；Web页面只能包括单纯的文本内容；浏览器页只能显示呆板的文字信息。动态网页阶段在传统的静态网页中加入各种程序和逻辑控制，从而实现动态和个性化的交流与互动。Web2.0阶段以用户为中心，通过网络应用（WebApplications）促进网络上人与人间的信息交换和协同合作。网络程序开发的体系结构知识点三网络程序开发的体系结构Web网络程序开发的体系架构分为三种：C/S架构、B/S架构和混合架构。（一）C/S架构Client/Server：所有的显示和业务逻辑全部在客户端（胖客户端），服务端提供数据，典型的两层架构。（二）B/S架构Browse/Server：浏览器负责网页显示（瘦客户端），Web服务器负责业务逻辑，数据放在数据库服务器，典型的三层/多层架构。（三）混合架构使用Client（单独开发的客户端，而非通用的浏览器）替代B/S程序中的浏览器。如：使用Java桌面程序（JavaSE）或手机应用程序（AndroidApp）向Web服务器发送http请求。Web前端开发知识点四前端开发Web应用程序中，所有的程序逻辑都在Web服务器中，网页的交互功能极其有限，一般模式都是：点击链接，跳转到另一个网页。HTML中也可以增加程序逻辑，提升用户体验。如：浏览器中的插件（Flash）和HTML5的JavaScript。JavaScript在HTML中执行：可控制HTML中的所有的标记、内容；控制浏览器的动作；提交异步http请求（同步/异步）。（一）网站/Web项目开发工作流程（二）前端开发的工作内容前端开发工作向上与美工结合，向下与后端开发（JavaEE/PHP/ASP.NET等）结合，实现HTML网页布局/动画/交互逻辑，通过Ajax(异步HTTP请求)获取后端接口数据将数据以网页的方式呈现。Web技术在物联网行业中的应用知识点五Web技术在物联网行业中的应用应用程序的设计开发困难不同子系统之间平台异构不同传感器之间硬件、数据差别较大采集系统和数据库系统之间差别大物联网应用系统跨平台统一接口松耦合交互性好可扩展性强Web服务优势利用Web技术，搭建良好的系统架构，提高系统各方面的性能，解决物联网中的异构问题，最终构造满足业务需求的应用系统Web服务应用于物联网系统Web前端开发环境搭建知识点六快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilderX，H是HTML的首字母，Builder是开发者，X是HBuilder的新一代版本。我们也简称HX。HX是轻如编辑器、强如IDE的合体版本。HBuilderX（一）HBuilderX特点这里插入主标题高效极客操作更强大的多光标、智能双击；文字处理的效率大幅提升。专为vue打造提供更优秀的vue支持；大幅提升vue开发效率。轻巧、极速10M的绿色发行包；启动速度；文档打开速度、编码提示极速响应。markdown优先唯一新建文件默认是markdown的编辑器；可以直接粘贴表格、图片。清爽护眼界面清爽简洁，绿柔主题经过科学的脑疲劳测试；最适合人眼长期观看的主题界面。强大的语法提示语法提示精准、全面、细致；提供准确的代码提示和转到定义（Alt+鼠标左键）。（一）HBuilderX特点下载地址：https://www.dcloud.io/index.html。在浏览器搜索HBuilder，进入HBuilder官网下载最新版的HBuilder。HBuilder官网下载界面（二）HBuilderX下载与安装创建快捷方式解压安装包找到HBuilderX.exe，直接右击创建桌面快捷方式。选中HBuilderX的zip包，点击右键菜单，点击解压到当前文件夹。（特别注意：解压过程中，不要中断解压。）解压安装包创建桌面快捷方式（二）HBuilderX下载与安装依次点击“文件”、“新建”、“选择Web项目”（按下Ctrl+N,W可以触发快速新建）。（三）HBuilder项目创建第一步，新建Web项目依次点击“文件”、“新建”；选择“HTML文件”；选择“空白文件”；按下Ctrl+N,W可以触发快速新建；MacOS请使用Command+N，然后左键点击HTML文件。（三）HBuilder项目创建第二步，新建HTML页面在打开的new_file.html中输入H；然后按下“9”自动生成HTML的基本代码。（三）HBuilder项目创建第三步，添加HBuilder代码块HBuilder常用快捷键知识点四新建：ctrl+N关闭：ctrl+w全部关闭：ctrl+shift+w保存：ctrl+s全部保存：ctrl+shift+s刷新：F5属性：Alt+Enter编辑操作开启/关闭注释整行：Ctrl+/开启/关闭注释已选内容：Ctrl+Shift+/撤销：Ctrl+Z重做：Ctrl+Y文件操作（四）HBuilder常用快捷键运行：Ctrl+R搜索条（查找、替换）：Ctrl+F隐藏搜索条：Esc其他操作活动视图或编辑最大化：Ctrl+M放大字体：Ctrl+Shift+=减小字体：Ctrl+-其他操作（四）HBuilder常用快捷键

更多快捷键可参考：

/qq_36595013/article/deta