数字媒体技术基于HTML5的生活分享平台开发与实现Word格式文档下载.docx
- 文档编号:17074298
- 上传时间:2022-11-28
- 格式:DOCX
- 页数:26
- 大小:1.04MB
数字媒体技术基于HTML5的生活分享平台开发与实现Word格式文档下载.docx
《数字媒体技术基于HTML5的生活分享平台开发与实现Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《数字媒体技术基于HTML5的生活分享平台开发与实现Word格式文档下载.docx(26页珍藏版)》请在冰豆网上搜索。
Abstract
Thisprojectisalifesharingplatformbasedontheweb.Lifesharingisawayofsocializing.Withthegradualimprovementoflivingstandards,manyusersrecordtheirbitbybitandbeautifulmomentsinlifebypostingtext,pictures,videos,etc.Waystoreleaseyourmoodandmeetmorelike-mindednetizenstocommunicatewitheachotherandunderstandeachother.Ihopethatthroughthedevelopmentofthissystem,userscanmoreconvenientlyrecordandpublishthebeautifulmomentsintheirlives.
ThefrontendofthewebsiteisdesignedbasedonHTML5,andthebackendisdevelopedincombinationwithPHPtechnologyandMYSQLdatabase,whichisconvenientforrecordingandmanaginguserinformation.Userscanrecordinformationbasedontheweb,whichimprovestheconvenienceofmodernsocialnetworking.Thesystemitselfshouldhavepracticability,reliability,andsecurity;
thesystembackgroundhasselectedtheMYSQLdatabaseasthesystem'
sdatabaserecordinformation,andtheadministratorcanmanageusers,userdynamics,andusercomments.Thisarticlemainlydescribesthedevelopmentprocessofthesocialnetworkingsite,includingwebdesign,functionalimplementation,andfunctionaltesting.
Thisprojectprovidestheopportunityfortheseuserswholovetorecord,andcanalsopromotefurthercommunicationbetweenusersthroughthetopicsintheplatform.Accordingtotheaestheticdesignconcept,thewebsitepresentsasimplebutnotsimpleeffect,andtheoverallpageisharmonious.Thevariousfunctionalinterfacesonthewebsiteareclosertothedesignofmodernsocialplatforms,makingiteasierforuserstolearnanduseandeasytouse.Itishopedthatthewebsiteplatformwillenableuserstogainconvenienceinsocialnetworking.
Keywords:
HTML5;
WebDevelopment;
PHPtechnology;
MYSQLdatabase
第一章绪论
一.1选题的目的和意义
随着互联网的发展,各种各样的网络社交平台应运而生。
它作为分享平台,为大众提供了记录生活方式的机会,人们通过各种图片文字来表达自己的想法,这对于记录者来说记录的是自己的故事,而对于观看者来说这又是另一种体验。
因此,通过HTML5设计开发一个分享平台也是为大众开拓了又一个便利的记录平台。
随着社交平台不断发展,越来越多的平台出现了。
通过宣传运营,不少社交平台早已成为大众日常生活中重要的工具。
生活水平的提高促使人们更多地通过电脑,手机等发表记录生活瞬间,记录心情,因此此类社交生活记录平台才得以发展,更多不同设计不同种类不同动能的平台被开发出来。
而本次开发的主打生活方式分享网站,它的前端基于HTML5,后端基于PHP及数据库,以此实现用户在网上进行社交的系统。
该网站的开发也将贴合大众使用社交网络分享平台的实际,能开阔社交范围,提高人们社交效率,为人们的社交提供便利。
一.2国内外研究现状
HTML5在当代大放异彩与其一步步发展离不开关系。
回首HTML5的发展历程,在1999年W3C发布HTML4以后,网络世界的发展速度开始加快,其进步性与发展性一度使人们认为HTML4已经是HTML中发展的最高标准。
而正当人们在自我满足时,W3C开始了发展HTML5的步伐,随着年代科技的发展,用户的需求在不断的更新,在技术的推动以及商业的投资的基础上,HTML5得到了不断地完善与更新,而随着其功能不断地开发与完善,网络世界的新兴行业也不断兴起,HTML5的发展推动了这些行业的发展,用户的需求得以满足。
而随着科技的发展,我们相信,用户的需求将会继续更新,HTML也将会推出更多种多样的新兴版本。
我国拥有十分庞大的互联网群体,据统计,2019年中国就有超过8亿的互联网使用用户,可以说,市场需求十分庞大。
游戏、生活、才艺类等直播行业的兴起也与HTML5强大的兼容性息息相关,因为HTML5提供了前所未有的新颖的方式,即数据与应用可以接入开放的接口,使外部硬件应用等可以直接与浏览器内部的数据直接相连,如视频影音等可以直接与麦克风和摄像头相关联,而将内容传送到前端,用户即可以作为观众与主播进行互动等。
而HTML5突出的特点就是强化了网页的表现性,追加了本地数据库,可以用作离线应用的开发,离线应用就是把需要的资源先缓存到本地,下次再查看时无需联网。
HTML5还有更多的功能特点,其开发与发展对互联网发展的促进作用无可比拟。
所以我国在HTML5开发方面的人才需求也是十分庞大的,我国作为HTML5的后起之国,其发展程度与完善程度还达不到国外HTML5发展的高度,毕竟国外作为HTML5的发源国家,其HTML在历史上通过一步步不断开发与完善,甚至拥有了自己的多年以来的经验体系,是我国目前还不能达到的。
一.3课题研究内容
本次课题是基于HTML5的社交网站平台,结合PHP技术和MYSQL数据库等技术开发出由用户自身管理个人专属社交平台的信息以及推出对应的管理员管理端,用于管理全部用户信息。
正文开头阐述了基于HTML5社交网站的功能特点及开发需要的相关技术知识。
结合开发的功能特性,首先是基于HTML5结合CSS的网站前端设计,通过Bootstrap框架等辅助排版设计装饰社交网站,使其能呈现更美观的页面效果与更简约的用户交互界面,结合市场上众多社交类平台的平面设计,设计出贴合社交用户使用习惯直接简约方便上手的社交记录平台,同时又应该保持自身网站的设计风格,设计出使用户耳目一新的交互界面。
其次是结合PHP技术和MYSQL数据库,实现网站实时记录用户信息、用户动态、用户评论等功能,并将这些信息上传至管理员管理端,管理员能实时发现删除修改用户不文明动态信息,做到保持文明美好的社交平台环境。
基于HTML5结合PHP技术+MYSQL数据库开发出贴合用户的功能性社交网站。
第二章系统开发环境
2.1HTML概述
HTML作为一种优秀的超文本标记语言,它在页面内可以包含包括文字、图片、链接、视频、音乐及程序等元素,实现在页面与页面之间跳转。
其中,HTML结构包括头部分(<
head>
<
/head>
)、和主体部分(<
body>
/body>
)。
其中头部<
定义了网页的头部份,而在头部中也包含了一些元素供开发者使用。
例如可以在头部中通过<
link>
引入想要用到的文件,以此定义HTML文档与引入的外部资源关系。
也可以通过<
title>
定义网页的标题,通过<
base>
去定义页面的链接标签的链接地址,通过<
meta>
去定义HTML文档中的数据,通过<
script>
去定义页面的脚本,还可以通过<
style>
去定义HTML文档中的样式,如改变颜色、字体样式、超链接样式等网页中众多的样式的设置。
而主体部分<
则提供了网页的具体内容,呈现由开发者编译的内容,是网页实际展现的内容部分。
在<
中通过不同的元素编写网页,如<
b>
元素则是代表加粗,<
p>
元素则是代表换行等等,而元素中又有不同的属性如<
pstyle=“”>
中的“style”则是元素<
的属性,<
ahref=“”>
中的“href”则是元素<
a>
元素所没有的属性。
在元素与元素期间也可以层层嵌套,如<
h1>
标题<
/h1>
,而“标题”则可以实现两个元素的效果。
元素虽然可以层层嵌套,但是在结束标签时需要注意要分清结束标签的先后,做到先开头后结束,层层对映的原则。
而HTML的标签则是由一对尖括号及标签名组成,分为起始标签和结束标签,如<
h5>
/h5>
。
HTML实际上只是文本,它还需要通过浏览器来解释展现文本中编译的内容。
首先,可以通过最简单的文档编辑软件编辑,如使用微软电脑中自带的记事本即可实现,编写结束时将文档保存.html为拓展名则可以通过浏览器执行。
其次可以通过半所见即得软件如SublimeText代码编辑器等在线网页编辑器。
最后,还可以通过所见即得软件如AdobeDreamweaver、WebStorm等专业网页编辑器编辑,这些软件上手更快,对于初学者来学习更适合。
相对于SublimeText代码编辑器等在线网页编辑器它只需要刷新即可显示修改过任何一小块地方代码的网页,实时显示错误的地方提示,且用其开发网页的效率更高,不论是在文件中编辑的代码还是在网页中展示其直观表现性更强。
编写网页时可根据开发者自己的情况去选择适合自己,更方便简易的编辑方式。
2.2CSS概述
CSS,又称为层叠样式表,对网页的页面设计效果、排版效果及最后在网页中展示的页面效果起到了无可比拟的作用。
2001年W3C完成推出了CSS3的工作草案,为网站开发的页面效果设计贡献了巨大作用。
在网页中,若想要实现一个旋转移动效果,可能需要在JavaScript中编写大量代码来实现,而正因为有了CSS,只需要几行代码即可实现这个效果,这为网站开发者带来了巨大便利。
在CSS中,可以直接通过background-image设置网页背景图片,并且通过background-position、background-repeat等属性直接调整背景图片,直接避免因为页面多层次的问题而要反复设计协同布局。
还可以通过CSS文本对网页中的文字效果进行设计,如通过line-height设置文字行高,还可以通过文本阴影text-shadow为文字加上阴影效果。
而在CSS3版本中,更添加了box-shadow为盒子添加阴影。
在CSS中还可以设置链接在不同状态如link、visted、hover、active时的效果,大大节省了在JavaScript中编写代码实现效果的时间,而对于超链接有下划线的效果,更可以通过一句简单的text-decoration:
none;
去掉,这些效果的实现都是十分便捷的。
CSS列表与表格中的多个属性更使原本在网页中输出的僵硬表格更生动,视觉效果更好。
在浏览图片网页时,可以发现图片都呈瀑布流布局排列,这也是CSS的作用之一,在CSS中可以通过几句简单的代码实现图片瀑布流效果布局,整个页面就能让人看起来更舒适,更整洁,在淘宝京东等购物网站中,都可以发现这种瀑布流的效果布局十分实用。
而在CSS中极具亮点之一的便是其转换过渡与动画效果,通过位移函数translate()、缩放函数scale()、旋转函数rotate()、倾斜函数skew()四个函数实现页面中某些元素从静到动的变化效果,更可以通过过渡效果,在元素从这到那变化过程中添加过渡的视觉效果,更能抓住用户的眼球。
同样的,CSS中的动画也是如此。
通过CSS,开发者不用借助Adobe中的Flash、Photoshop等软件实现复杂的页面效果,也不需要冗长的JavaScript代码实现一些交互效果。
但CSS在兼容性问题上仍存在一些问题,实现某一些效果时我们需要针对不用的浏览器输入不同的前缀如Chrome:
-webkit-、Firefox:
-moz-linear-gradient再加上想要实现的动画效果,但这仅仅是针对CSS中动画、瀑布流效果、过渡效果等,大部分CSS中的样式仍正常受用,且仅仅面对兼容性问题仅仅是多加一句前缀,这对于网站开发者来说都是正常可以接受范围内的。
毕竟CSS所实现的页面效果是无可比拟的。
2.3Bootstrap概述
Bootstrap作为前端开发框架,是由美国Twitter公司的设计师MarkOtto和JacobThornton合作开发的。
Bootstrap包含了基本结构、CSS、组件及部分JavaScript插件以及定制功能。
通过CSS网站开发者可以轻易设计不同的页面效果,但有一些效果是不同网站开发者普遍共同需要的,例如导航栏、页面分块、下拉菜单等,这些效果对于不同网站的开发者是重复的编写,因此,Bootstrap就出现了。
通过下载安装包引入css、js文件,开发者在文本中通过在<
divclass=“”>
中的class属性即可以标识这个<
div>
在bootstrap中定义好的css部分,通过两句简单的代码即可在里面开始编写导航栏的内容,所展现的导航栏页面效果基本是当代众多网站的大体导航栏布局,正因为引入了bootstrap,前端开发者不用自己再一次又一次编写重复的CSS代码,只需要简单的代码即可获得想要的效果。
在bootstrap官网中,官方给出了许多例子有关前端页面排版等效果,这些都是十分实用的。
还包含了一些在网页中十分实用的图标,如聊天闹钟箭头图片等,这些图标在前端的引用中既简洁又是用户生活中所熟悉的。
引用时十分方便,还可以根据自己的喜好设置其大小。
最贴心的是,在bootstrap中还有定制功能。
通过改变代码前端开发者可以控制bootstrap生成自己想要的呈现的页面效果,定制的功能细致到可以整体改变文字颜色甚至按钮的颜色样式等再生成压缩包下载引用,开发效率更高,且前端开发者还能定制出属于自己构思独一无二的页面效果,布局统一和谐。
2.4B/S结构
随着HTML的发展,Web技术发展也在不断地完善。
相对于C/S架构(客户机/网络/服务器)如腾讯QQ等,B/S架构(浏览器/服务器)模式有更强地适应范围。
其建立在广域网之上,用户只需要下载一个浏览器如InternetExplorer、firefox等,服务器安装了SQLServer等数据库就可以通过访问web服务器实现数据交互,不需要像QQ、微信等C/S架构安装特定的软件才能进行访问。
这样做大大简化了用户在使用客户端时的过程,也降低了开发成本,节约资源。
2.5PHP简介
PHP作为一种开源的脚本语言,在Web开发领域中扮演了至关重要的角色,其混合了C、Perl、Java和PHP本身自创的语法,有利于开发者的学习,在Web开发领域中使用十分广泛,更是众多实现动态网站开发中的首选。
PHP技术加数据库的结合是众多初学者在开发动态网站的选择。
在Web开发中,PHP相对于其他脚本语言更具这几点好处,首先,它作为一种开源的语言加上它的免费性,这更有利于激励更多想要学习的开发者去学习去使用,是一种非常容易学习并且上手的语言,而我国市场在这部分的需求也不断地吸引激励人才发展PHP技术,不断去更新去完善;
其次,PHP还可以直接通过代码地编写实现与数据库相连接,如MySQL、Oracle等主流数据库,使开发者可以通过代码的编写对数据库中存储的数据直接处理并输出在网页前端,处理效率更高,更简化了处理步骤,执行效率高。
正如进入网站时的登录注册步骤,通过PHP将用户注册的账号与设定的密码传到数据库中保存,在登录的时候再通过调用数据库中已注册的数据对比用户输入的账号密码是否正确而允许用户访问进入网站;
最后,开发者在使用PHP语言时,可以同时将其面向过程及面向对象,将二者一起混合使用,这也是PHP相较于其它一些编程语言的一个重要特点。
它可植入性强,在拓展性方面也相对完善。
2.6MYSQL数据库
MYSQL作为当代数据库管理系统主流之一,在存储管理数据上受到了绝大多数开发者的青睐,它是开放源代码的类型,方便任何开发者下载编写,更方便初学者学习理解使用,简易上手。
它处理数据效率高,同时存放的信息可以很好归类整理,可以根据存放数据的不同类型不同使用人群建立不同的数据库,库内又可以建立不同的表格,表格中插入不同的标志信息,这样在存放数据时就能做到井然有序,而在查询时又可以更根据关键字进行查询并且输出结果,即使是面对大量数据储存都可以轻易通过SQL语言进行“增删改查”,是数据的“文件柜”。
PHP技术加上MYSQL数据库的组合是绝大多数前端开发者的选择,特别是作为前端开发初学者,其免费性与开源兼容性都对开发者很友好,且处理数据高,节省了不必要的过程,节约成本,开发效率高等优点。
通过这两个组合,为开发者营造了很好的开发环境。
2.7总结
综上所述,网站以B/S为架构,前端基于HTML5,加入了CSS样式及框架的使用,后端则采用PHP技术结合MYSQL数据库完成。
第三章系统分析
3.1可行性分析
本次开发的网站是基于HTML5的社交类网站,首先可以先通过现代各大社交类网站功能特性,结合用户沟通调查而分析出的目标需求初步确定本次网站开发的目标及所要实现的用户需求。
通过上面两步确立目标后,接下来开始讨论开发网站的可行性。
3.1.1技术可行性
本次开发的网站主要前端由HTML5加上后端由PHP技术+MYSQL数据库实现,网站基于B/S架构,即浏览器/服务器模式开发。
开发中,在前端页面部分借助HTML5结合CSS中的样式进行网站布局,还将引用Bootstrap框架利用它们结合设计出简约美观的用户界面,并将PHP嵌入基于HTML5的前端开发中,实现简单的动态交互网页。
后端通过PHP技术+MYSQL实现用户管理员管理数据功能,能完整存储所有数据并能对数据进行操作。
这几者的结合,完全可以保证及实现本次网站开发的目标,是本次网站开发不可或缺的。
综上所述,本次网页的开发具备了技术的可行性。
3.1.2操作可行性
本次开发的网站基于B/S架构前端由HTML5加上后端由PHP技术+MYSQL数据库能基本实现网站的完整开发。
而用户在运用该网站时不需要专业的代码知识,只需要使用电脑进行访问即可快速上手。
与用户使用现代大多社交网站一样,
通过简单的注册登录即可访问页面,浏览发布自己所想要发布的内容。
对于管理员来说,则需要熟悉社交网站用户基本准则,对部分发布敏感言论的用户进行言论管理及注销用户。
本次开发的网站十分便于用户及管理员操作,无需学习额外更多的操作知识,易于使用与管理。
综上所述,本次网页的开发具备了操作的可行性。
3.1.3经济可行性
在本次开发的网站中,基于HTML5、PHP、MYSQL数据库技术支持的开源性及免费性,及开发所需要的设备软件都是开发者日常生活中具备的,因此开发成本较低,综上所述,本次网页的开发具备了经济的可行性。
3.1.4法律可行性
在本次开发的网站中,基于HTML5、PHP、MYSQL数据库技术支持都是开源性的,代码可以供网站开发者随意参考学习改写使用,没有触犯任何法律,且网站思想内容健康向上,网站皆由开发者构思布局,不存在触及法律等非法问题,综上所述,本次网页的开发具备了法律的可行性。
3.2系统设计流程分析
3.2.1系统开发流程分析
本次开发的网站是基于HTML5的社交类网站,首先通过现代各大社交类网站功能特性,结合用户沟通调查而分析出的目标需求初步确定本次网站开发的目标及所要实现的用户需求,进行开发最后开发者进行网站测试,网站开发流程分析如图所示:
图3-1系统开发流程分析图
3.2.2系统操作流程分析
首先进入网站时有登录注册步骤,网站通过PHP技术将用户注册的账号与设定的密码传到数据库中保存,在登录的时候再通过调用数据库中已注册的数据对比用户输入的账号密码是否正确而允许用户访问进入网站,操作流程如图所示:
图3-2系统操作流程分析图
3.2.3系统用户登录流程分析
在用户进入网站时首先要先登录注册步骤,用户将自己注册的账号,账号则是用户的用户名,用户在正确输入对应注册的账号密码时则可以访问进入网站,系统用户登录流程分析如图所示:
图3-3系统用户登录流程分析图
3.3系统用例分析
用户进入网站后,可以看到社交网站的首页、公告、广告、话题等内容,还可以编辑删除发布动态记录,编辑发表删除评论,用户用例分析如图所示:
图3-4系统用户用例分析图
第四章系统设计
4.1系统概述
本次开发的社交网站以B/S为架构,所以用户只需要下载Chrome、Firefox等其中一个浏览器,通过在服务器上配置数据库连接,即可与网站进行数据交互。
系统的工作原理如图:
图4-1系统工作原理图
4.2系统结构设计
在系统的设计开发中,首先针对了当代众多社交类网站的功能模块对比,再根据调查的用户需求,网站分为
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 数字 媒体 技术 基于 HTML5 生活 分享 平台 开发 实现
![提示](https://static.bdocx.com/images/bang_tan.gif)