# WebOperation **Repository Path**: luojiachun/WebOperation ## Basic Information - **Project Name**: WebOperation - **Description**: 存放网站运营与管理课程内容 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-06-30 - **Last Updated**: 2020-12-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 网站运营期末项目--[可视电台](https://cc020.top) | 网站名称 | 可视电台 | | :----: | :----: | | 网站简介 | 一个分享与展示经典电影的网站 | | 网址 | [https://cc020.top](https://cc020.top) | | 站长 | 罗佳莼 181042166 | # 一、网站策划 ### 1.1 网站建设目标 - 为了搭建一个分享与展示经典电影的平台 - 分享一些经典的佳作以及站长喜欢的电影，为同样热爱电影的用户构建一个浏览交流的平台 - 为想看电影但不知道看什么的用户时时刻刻提供选择 - 吸引更多用户使用此网站进行分享与交流，从中得到他人的见解与看法 ### 1.2 目标用户画像 | 信息 | 画像1 | | :----: | :---- | | 姓名 | 宋敏 | | 年龄 | 20岁 | | 职业 | 大学生 | | 人物简介 | 在大学生活里忙碌于平衡学习瑜生活，可以很好地分配自己的时间，喜欢在闲暇之余看电影并热爱发表自己的看法与见解 | | 人物喜好 | 喜欢沉稳安静的风格，相比于高深难懂的电影更喜欢具有生活气息的类型 | | 用户痛点 | 大学生活课业繁重，没有大量的时间可以认真地看一部电影 | | 信息 | 画像2 | | :----: | :---- | | 姓名 | 朱小宇 | | 年龄 | 35岁 | | 职业 | 影视行业工作者 | | 人物简介 | 在影视行业摸爬滚打近十年，对电影有深刻的理解与想法，电影主角的人生对他而言都很有吸引力 | | 人物喜好 | 喜欢尝试各种新鲜事物，对生活积极热情，喜欢发表对电影的见解 | | 用户痛点 | 工作忙碌，没有时间与平台与其他电影观众交流新的体验 | ### 1.3 网站规划： - 前期规划：面对广泛的用户群，尽可能满足大部分群体需求，解决用户痛点，具体实施： - 根据不同的类型进行划分，放入经典电影及相关影评 - 根据不同的年代进行划分，尽可能覆盖到各个年龄层的用户需求 - 中期规划：在网站的非更新性内容(关于页面、联系方式、导航栏、网站标题及logo)基础上，提高网站的浏览量与使用量，具体实施： - 通过SEO改进现有文章的可读性，使文章内容更加优质 - 稳定产出优质原创文章，时常更新网站内容 - 维护网站安全，保障用户隐私安全，让用户及自己的作品更有安全感 - 后期规划：网站向着更大规模发展，吸引更多的用户，争取大流量，具体实施： - 提升网站运营模式，向大流量网站学习 - 保持稳定且优质的更新，吸引更多的创作者 ### 1.4 DVF模型 - **用户需求** - 用户对电影学习交流平台有需求 - 需要一个可以进行电影相关交流的网站 - 可以通过此网站了解近期相关电影资讯 - **商业延续性** 通过完善网站内容与样式，形成初期的完整的网站，借助周边力量达到宣传推广的效果，吸引更多用户浏览使用本网站；中期不断更新网站文章及内容，吸引更有流量的用户使用，并进行发表言论评价，形成稳定的互动关系；后期得到数量庞大的用户群后与相关行业进行电影推广等合作，从中获取商业价值。 - **可行性** - 总的来说是一条漫长且困难的道路 - 前期的运营维护并不困难，但实时地更新文章工作量巨大，众多资讯的筛选与撰写需要充足的时间与精力 - 吸引用户使用也需要多方面的考虑，如何在拥有众多优质内容的网络市场中将自己推销出去，值得思考 - 与电影公司进行推广合作需要网站有庞大且稳定的用户群，并且确保网站将在未来有持续优质的更新 ### 1.5 [网站地图](https://www.processon.com/view/link/5f0354b7e401fd3908b56fc3)（用proceeon流程图制作） - 明确区分网站的“页面”与“文章”，表明页面、文章、分类标签的关系 - 矩形代表页面、圆角矩形代表文章、菱形代表标签 ![网站地图](https://images.gitee.com/uploads/images/2020/0719/210218_eac24eab_4866566.png "屏幕截图.png") --- # 二、平面设计插件运用 ### 2.1 Animate it! 1. [首页搜索框的摆动效果](https://cc020.top/)：使用Animate it!为搜索框加入了摆动的效果，看起来更加生动，并且提醒用户可以使用这一功能找到自己想要的内容 2. [首页日历的弹跳效果](https://cc020.top/)：使用Animate it!为搜索框加入了弹跳的效果，使网站在安静沉稳的环境下不失可爱 ### 2.2 SiteOrigin 1. [年份页面](https://cc020.top/index.php/years/)：将文本与列表并列，使用户在阅读页面中文本内容的同时可以更方便地选择到其他页面 2. [新闻页面](https://cc020.top/index.php/category/news/)：文本单独一栏下将近期文章与分类目录并列，方便用户在阅读完新闻信息后选择其他文章进行阅读或选择其他类型文章 3. [类型页面](https://cc020.top/index.php/type/)：将文本和音频并列，使用户在选择电影类型使拥有更轻松愉快的心情 ![SiteOrigin使用](https://images.gitee.com/uploads/images/2020/0716/230717_230bb7c8_4866566.png "屏幕截图.png") --- # 三、平面设计 ### 3.1 网站配色、对比度与可读性 - 网站配色 网站整体呈现暗色系，根据看电影时需要黑暗的环境作为考量，将重要的文字链接及信息部分设置为金色，给人以在黑暗中发现光亮的感觉，黑色与金色的配色增加了网站的高级感，给予用户生活中可贵的艺术感。在页面暗色的情况下使用了更加有生活气息的banner图，贴近电影源于生活的特性。 - 对比度 黑色与金色的碰撞使网站在整体的风格下有了对比性，一亮一暗的搭配使网站在沉稳安静的风格中增添了一丝高级感，但又相当贴近生活与主题。 - 可读性 - 通过将较长的文章只在首页中显示简介来增强首页的可读性，使使用者阅读负担减轻 - 通过选取适合网站整体风格的图片来增强文章可读性，图片选择较为沉静深刻的风格来搭配网站的氛围 - 文章长度适中并配有相关的图片辅助，不会增加阅读负担，具有一定的可读性 - 通过选择打印的方式查看网站的可读性 ![可读性](https://images.gitee.com/uploads/images/2020/0719/210838_4767ec37_4866566.png "屏幕截图.png") ![网站配色](https://images.gitee.com/uploads/images/2020/0716/231514_87478265_4866566.png "屏幕截图.png") ### 3.2 图片的使用 - 首页页头媒体图片来源于微博知名摄影博主[小武拉莫](https://weibo.com/u/3412668714?nick=%E5%B0%8F%E6%AD%A6%E6%8B%89%E8%8E%AB) - 新闻文章中的图片来源于[电影网](https://www.1905.com/) - 架站自述文章中的图片来源于本人亲身操作的[截图](https://gitee.com/luojiachun/WebOperation/tree/master/WebMaster/pictures) - 不同类型的电影简介图片来源于[百度图片](https://image.baidu.com/) - 文章图片下有引用说明及超链接 ![图片引用说明](https://images.gitee.com/uploads/images/2020/0719/212522_173c94dc_4866566.png "屏幕截图.png") - 文章结尾处有文章引用说明 ![文章引用说明](https://images.gitee.com/uploads/images/2020/0719/212702_9d3b968e_4866566.png "屏幕截图.png") ### 3.3 图库风格及配色 - 紧扣网站的沉静深刻有生活感的风格以及沉稳的配色进行选图，整体文章中的图片的风格都保持一致 - 图库中图片的选择多偏向黑色与金色的配色，暗色与轻微的亮色的配合增加了网站的高级感与艺术感 ![图库风格及配色](https://images.gitee.com/uploads/images/2020/0716/234505_49d7dc69_4866566.png "屏幕截图.png") --- # 四、3篇原创云端架站图文文章： - [插件Animate It!的使用历程](https://cc020.top/index.php/2020/07/05/animate-it/)：介绍wordpress中插件Animate It!的使用经历与方法 - [你的网站安全了吗？](https://cc020.top/index.php/2020/07/05/safety/)：讲解如何为您的网站加密 - [educationpack申请流程](https://cc020.top/index.php/2020/07/07/educationpack/)：讲述如何申请educationpack获取福利 --- # 五、管理 ### 5.1 云端架站 - 正常可用的云端网站：[https://cc020.top/](https://cc020.top/) - 使用域名：利用阿里云进行架站，进行了域名申请并通过审核，后续对域名进行加密 ![使用域名](https://images.gitee.com/uploads/images/2020/0716/235331_276eac61_4866566.png "屏幕截图.png") ### 5.2 管理之网站安全：使用Wordfence - 通过数据截图可以知道，我的网站安全系数中等偏上，疏于较为安全的范围。作为站长，时刻关注网站的安全是重中之重的任务，我于6月16日安装Wordfence插件，通过此插件对我的网站进行监控与安全防护，实时得到的数据返回让我知道，我的网站虽然也有受到攻击，但总体没有较大的风险，是安全的，而Wordfence提醒我网站存在的不算严重的问题就是：其他下载了的插件的版本更新。 ![安全风险](https://images.gitee.com/uploads/images/2020/0717/000525_460b188a_4866566.png "屏幕截图.png") - 进入Wordfence插件后，显示网站目前存在的问题，进入后发现都是搭建网站所使用的其他插件的版本更新问题，暂时并不存在安全威胁，Wordfence可以时刻告诉我我的网站的安全系数，就目前而言，网站存在的不算严重。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0717/002236_e02f41d9_4866566.png "屏幕截图.png") - 截止到7月16日为止，使用Wordfence监管我的网站刚好一个月，通过Wordfence返回的数据来看，我的网站近一个月来不断地受到攻击，且攻击的次数较多，但总体而言对我的网站影响不大，Wordfence也告诉我我的网站是安全的，通过此插件的安全管理，我可以实时地了解网站的安全动向。 - 通过30天的Total Attacks Blocked可以看出七月后的被攻击次数较七月前有了较为明显的提升，对此我推断，是因为在六月末我对网站进行了大范围的修改与凭借较有风格的设计吸引了更多的浏览者，并且在**百度**与**bing**站长工具中提交了我的网站链接，因此受到了更多的“关注”。 ![攻击次数24H](https://images.gitee.com/uploads/images/2020/0717/004038_6501d591_4866566.png "屏幕截图.png") ![攻击次数30D](https://images.gitee.com/uploads/images/2020/0717/002516_9c7e9e2e_4866566.png "屏幕截图.png") ### 5.3 网站性能 - 通过site24x7返回的数据来看，我的网站性能较好，到目前为止并不存在宕机或者故障的情况发生，当然如果有相关的问题发生时，site24x7会第一时间将问题详情信息发送至我的邮箱，以便管理者实时了解网站的性能及情况。 - 通过site24x7对网站的可用性进行监控，下面两张图一张是行业平均的可用性情况，一张是我的网站的可用性，通过两张图可以看出： - 行业平均的可用性平均值为100% - 我的网站可用性达到了行业平均水平，可用性为100%，性能水平较高 ![行业平均](https://images.gitee.com/uploads/images/2020/0717/011031_acf4c634_4866566.png "屏幕截图.png") ![可用性100%](https://images.gitee.com/uploads/images/2020/0717/010405_38a76304_4866566.png "屏幕截图.png") - 通过site24x7对网站的响应时间进行监控，下面两张图一张是行业平均的响应时间情况，一张是我的网站的响应时间，通过两张图可以看出： - 行业平均的响应时间为0.71s - 我的网站响应时间未达到了行业平均水平，响应时间为1.736s，但总体响应水平中等，暂不会对使用造成较大的影响 ![行业平均](https://images.gitee.com/uploads/images/2020/0717/010954_f185d1ed_4866566.png "屏幕截图.png") ![响应时间](https://images.gitee.com/uploads/images/2020/0717/010715_ff9cbbb3_4866566.png "屏幕截图.png") ![site24x7数据](https://images.gitee.com/uploads/images/2020/0707/094656_99136fd0_4866566.png "屏幕截图.png") - 我为网站性能的监控添加了8个监控地点，我选择了涉及亚洲的广州、上海、北京、张家口、台北和青岛，欧洲的巴黎和曼彻斯特，以此来更加全面客观的反应不同位置的可用性与反应时间。 ![监控地点](https://images.gitee.com/uploads/images/2020/0719/214003_75ea1625_4866566.png "屏幕截图.png") - site24x7返回的数据显示 离我较近的及各地区响应时间较短，巴黎和青岛的响应时间较长 ### 5.4 网站备份 使用了三种备份方式 ![三种备份方式](https://images.gitee.com/uploads/images/2020/0717/021033_1ee31549_4866566.png "屏幕截图.png") 1. 使用winscp将wp-config.php备份本地 ![winscp](https://images.gitee.com/uploads/images/2020/0717/014028_a92c0e12_4866566.png "屏幕截图.png") 2. 使用插件备份数据库（sql文件） ![BackWPup](https://images.gitee.com/uploads/images/2020/0717/020521_83e7d1a9_4866566.png "屏幕截图.png") 3. 通过wordpress后台导出工具导到本地 ![工具导出](https://images.gitee.com/uploads/images/2020/0717/020239_c4767cf9_4866566.png "屏幕截图.png") --- # 六、网站运营 ### 6.1 站长工具使用 我使用了百度和bing站长工具对网站进行运营管理 ![站长认证](https://images.gitee.com/uploads/images/2020/0630/112142_46e11298_4866566.png "shoulu .png") ### 6.2 百度站长工具 - 百度收录 - 百度抓取时间时间较长，建议时常手动提交url - 在六月中旬我申请来站长认证后并未主动提交链接，也没用对网站进行较好的管理与优化，以至于近两周的时间我的网站都没有被百度收录，在百度检索不到我的网站相关；后续了解到可以手动提交自己网页的链接，以便百度爬虫爬取到你的网页后，我添加了网站拥有的页面的链接，不到一周就可以通过百度检索到我的网站了 - 网站优质的内容也会吸引爬虫，有同学在未向百度等站长工具网站提交自己的网页链接时，已经可以通过搜索网站检索到自己的网站，主要原因是网站已经拥有了部分流量，爬虫也会对你的网站“感到好奇” ![百度收录](https://images.gitee.com/uploads/images/2020/0707/004146_ac27ce4c_4866566.png "屏幕截图.png") - 百度数据 - 百度当前只抓取到的页面的索引情况显示，在6月29日成功收录后有持续的索引 - 截止到7月7日，网站的展现量和点击量有了提升，但较不明显，需要对网站内容进行更优质的创作，并且持续给百度提交自己的链接，以便他及时地爬到创作的网站，方便网站更好地了解网站的实时状态，进行下一步地运营管理 ![百度数据](https://images.gitee.com/uploads/images/2020/0707/003629_83fcc3d3_4866566.png "屏幕截图.png") ![热点趋势](https://images.gitee.com/uploads/images/2020/0719/215755_8efc9547_4866566.png "屏幕截图.png") ### 6.3 bing站长工具 - bing收录 - bing的收录也可以通过手动提交url来增加收录的概率 - 与百度相同，我在六月中旬申请来bing的站长认证后并未主动提交链接，直到了解到可以手动提交自己网页的链接，我添加了网站拥有的页面的链接，不到一周就可以通过bing检索到我的网站了 - 当我同时向bing和百度提交了相同的链接后，我的网站被bing收录的更快一点 ![bing收录](https://images.gitee.com/uploads/images/2020/0630/112222_eb779f94_4866566.png "shoulubing.png") - bing数据 - 在月初及月末的浏览量最大：在六月中旬我建立其选择的网站，当时只是对网站进行简单的文章编写与管理，没有很优质的原创内容，对于网站的设计也没有改变，在六月末我丰富了网站的内容并且改善了网站页面的结构，因此吸引了部分流量；七月中旬开始改变为自己的个人网站，对于网站整体的风格都有了明显的改变 - 在文章优化后浏览量明显提升：在学习SEO优化前我网站中的文章只是简单的样式，后续对文章内容及格式包括图片的应用，在SEO优化的指导下进行了改善，使阅读量有了明显提升 ![bing数据](https://images.gitee.com/uploads/images/2020/0630/112532_86909868_4866566.png "bing01.png") ![bing数据](https://images.gitee.com/uploads/images/2020/0707/003546_28948c88_4866566.png "屏幕截图.png") ![bing数据](https://images.gitee.com/uploads/images/2020/0707/003616_2e0d0e13_4866566.png "屏幕截图.png") ![bing数据](https://images.gitee.com/uploads/images/2020/0719/220707_b1cfa75c_4866566.png "屏幕截图.png") #### 运营总结 - 网站不仅仅是搭建好，有了内容就ok了，后续的运营管理才是重头戏，把重心放在提供优质的内容与满足用户需求的创作中，网站的存在才更有意义 - 站长工具可以帮助新生站长更清晰直观地了解到你的网站实时的状态与数据，通过站长工具返回给你的信息，进行总结与经验整理，对网站相关内容进行修改与优化，以此让你的网站一步步向前发展，这些累计的经验有助于你对网站更好的掌握与把控 - 感谢[百度资源平台](https://ziyuan.baidu.com/)与[bing网站管理](https://www.bing.com/webmaster)对我的帮助，有助于我的网站一点点进步 --- # 七、SEO优化 ### 方法一 文章&页面SEO优化 - 在Yoast里添加文章的关键词同时补充完善描述文本，需要优化的内容会有清晰明了的提示，只需要根据提示进行一步步完善即可让文章或者页面更加优质。SEO标题、别名、元描述都会出行在搜索页面中，因此他们的选择与填写相当重要，对提示出的问题进行修改后即可得到更拥有被用户青睐的网站 - 对于某一篇文章编辑好后直接发布，SEO分析出存在的问题，如下图👇 ![SEO报告](https://images.gitee.com/uploads/images/2020/0630/112314_3ed3c7ed_4866566.png "seo01.png") - 在对文章进行简单修改后，文章显示可读性优良，SEO显示不可用 ![SEO不可用](https://images.gitee.com/uploads/images/2020/0630/112332_a93816b1_4866566.png "seo02.png") - SEO标题、别名、元描述都是进行SEO评价的重要特征 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0630/112412_edfa403f_4866566.png "seo03.png") - 针对列出的问题进行文章修改后，SEO变橘色并显示好👍 ![优化后](https://images.gitee.com/uploads/images/2020/0630/112422_78f424c6_4866566.png "seo04.png") ### 方法二 在百度站长工具和bing站长工具主动提交文章页面url - 普通收录工具可以向站长工具搜索主动推送资源，缩短爬虫发现网站链接的时间，手动提交自己网页的链接，可以被检索到网站 ![百度站长工具](https://images.gitee.com/uploads/images/2020/0719/224357_2a476e97_4866566.png "屏幕截图.png") ![bing站长工具](https://images.gitee.com/uploads/images/2020/0719/224603_d977d6cd_4866566.png "屏幕截图.png") ### 方法三 修改文章url - 通过修改文章url，使得其更加规范化以便于搜索引擎收录，清晰有逻辑的链接可以让爬虫更轻易地爬到你的网站，实践表明，链接中含有中文会增大链接的使用出错率，例如被译为乱码等情况 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0719/224932_c5cdca15_4866566.png "屏幕截图.png") ### 方法四 提交网站的sitemap - 提交网站的sitemap到bing和baidu的站长工具,更容易让网站被爬取，有助于优化 ![baidu](https://images.gitee.com/uploads/images/2020/0719/225237_fe27c18f_4866566.png "屏幕截图.png") ![bing](https://images.gitee.com/uploads/images/2020/0719/225401_ba291148_4866566.png "屏幕截图.png") ### 数据对比及分析原因 - 数据对比 - 浏览状态：在完成了站长认证和SEO的方法优化后，浏览量得到了明显的提升 ![Jetpack数据](https://images.gitee.com/uploads/images/2020/0630/112637_31c8eccd_4866566.png "jetpack01.png") ![Jetpack数据](https://images.gitee.com/uploads/images/2020/0630/112652_4beec5bd_4866566.png "jetpack02.png") - 分析原因 - 优化后有了更优质的内容 - 对提示出的问题进行修改后即可得到更拥有被用户青睐的网站 - 对文章内容及格式包括图片的应用，在SEO优化的指导下进行了改善，使阅读量有了明显提升 # 七、用户研究 #### 方法一 用户访谈 - 访谈目的：了解用户最真实的需求，帮助用户解决痛点，成为更贴近用户需求的网站 - 研究方法的成果：经过用户访谈，大部分用户觉得网站主题风格可以接受且符合主题，侧边栏“我的文档”与主题不相符，建议改在页脚或者去除 - 网站设计方案影响：让我知道了我的网站的不足之处，知道了用户心中的网站的样子，为我提供了修改的意见与建议，便于我更清晰地了解到了用户最真实的需求，帮助用户解决痛点，成为更贴近用户需求的网站 - 前后方案对比说明： ![输入图片说明](https://images.gitee.com/uploads/images/2020/0719/232153_117c8b14_4866566.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0719/232412_c46ed954_4866566.png "屏幕截图.png") - 通过此次用户访谈，我更直观地了解了用户对于网站的苛刻的一面，任何与网站或者页面信息无关的东西，在他们看来都是无用的，这对于我的网站设计有着较大的影响，在信息爆炸的今天，我们更喜欢的是对我们有帮助的信息，而不是多而杂，毫无头绪与价值的信息，在我今后对于网站的运营中，我会仔细辨别什么是对用户有用的，什么是我自己认为有用但实际用户毫不在意的。 #### 方法二 AB测试 ### A方案 将文章显示简介，优化用户阅读体验，但在阅读全文时多了一个步骤 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0719/231734_487f2ed7_4866566.png "屏幕截图.png") ### B方案 将文章显示为全部展现，方便用户在浏览时可以直观地了解文章内容，帮助用户深度阅读 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0719/233046_98c32e5c_4866566.png "屏幕截图.png") - 用户对网站提出的需求极大影响了网站的设计，任何设计都应该”以人为本“，把用户放在中间，一切设计都围绕着用户的需求与痛点。通过此次AB测试，我切实了解到用户对于现代化社会资讯网站的看法与思考，我曾认为将最完整真实的信息展现给用户，才是用户想要的，但在时代飞速发展的今天，用户更倾向于简介形式，人们似乎对深度阅读的耐心渐渐减少，但确实简介形式在浏览时有更好的阅读体验，节省用户停留时间。 # 八、定制化 ### 1. 将文章显示为简介： - 不会在任何的页面中浏览过于长的文章，对用户造成时间浪费与视觉疲劳，加入简介形式后，方便用户在浏览时有更好的阅读体验，不必处理大量且繁杂的对于用户而言无意义的文字 - 一个代码即可搞定 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0719/225846_a20e67b0_4866566.png "屏幕截图.png") ### 2. 使用插件添加“回到顶部”按钮 - 使用Simple Scroll to Top Button插件，便于用户在页面浏览时可以时刻返回网站顶部 - 大大减少了用户在无意义的时间的浪费，避免出行在较长的页面中浪费过多时间回到顶部，防止用户在界面中走失或者对网站浏览失去耐心 ![回到顶部](https://images.gitee.com/uploads/images/2020/0719/234228_d1238f9a_4866566.png "屏幕截图.png") ### 3. 改变首页字体大小 - 通过定制的css样式，将其运用到首页部分字体中，实现字体大小的改变，让用户在文字阅读中有更好的体验，让网页更具有可读性 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0719/232602_ddd906d4_4866566.png "屏幕截图.png") # 九、加分项 - 使用了https加密 ![安全](https://images.gitee.com/uploads/images/2020/0719/230031_22165477_4866566.png "屏幕截图.png")