# web report **Repository Path**: XIEIC/web-report ## Basic Information - **Project Name**: web report - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-07-03 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 网站运营与管理期末项目报告 | | | |---|---| | 网站名称 | Color Movie | | 站长 | 谢依希 | | 网站url | https://ic-space.top/ | | 网站制作 | 中山大学南方学院 文学与传媒学院 2018级网络与新媒体专业 谢依希 | | 网站内容 | 由站长从各大网络平台搜索整合 | | 内容主要来源| 豆瓣+知乎+简书 | | 核心课程学期期末作品 | 由吴雪老师、胡美香老师指导 | | 网站搭建和模拟资源 |阿里云服务器+域名、wordpress架站资源| ## ⭕策划 #### 1. 网站建设目标: Color Movie是一个集经典电影与色彩艺术为一体的网站，以分享电影美学中的色彩艺术为主，通过电影剧情点缀增加用户的阅读兴趣。 #### 2. 目标用户画像： * 目标用户年龄在16-25岁之间，一般多为大学生与初入职场者，学生群体主要为电影或摄影爱好者，希望可以在看电影的同时学习到色彩搭配；上班族多以设计或电影制作领域相关，希望能将色彩艺术融合到自己的作品。 * 行为习惯：①看电影的类型更偏向复古文艺风的老电影；②使用视频播放app的频率较高；③看电影的同时会截图电影场景。 #### 3. 网站规划（根据阶段性的用户调研做适当调整）： * 前期市场分析：充分考察网站的目的与核心价值以及目标用户，适当规划建设周期； * 架站准备工作：建立wordpress后台，申请并链接云服务器，绑定阿里云域名； * 内容准备工作：整合配色极佳的经典电影资源，剖析场景色彩艺术，呈现形式为图文结合； * 网站建设方案：①保证网站的页面与文章高质量与网站的美观性；②使用SEO优化以增加网站的搜索引擎排名； ③个性化制定功能吸引新用户及增加用户粘性；④通过监控插件监控网站性能；⑤通过安全插件保护网站尽量少受攻击。 #### 4. DVF模型描述如何定义需求 * Desirability用户需求：学习电影画面的色彩搭配，网站操作简易，文章可读性强； * viability可持续性：通过为用户提供网站内的电影配色方案实现商业收益，为同类型写手提供发表文章的平台，当网站用户达到一定数量，可在网站上投放广告达到宣传目的，网站内容的可持续优化； * Feasibility可行性：网站的主题内容偏小众，为用户提供具有针对性的内容，规范的排版与定期提升网站性能，使用户可以无障碍浏览网站。 ![](https://images.gitee.com/uploads/images/2020/0717/020252_cd18b585_2230257.png "DVF模型.png") #### 5. 网站地图（Process on制作） ![](https://gitee.com/XIEIC/web-report/raw/master/%E7%BD%91%E7%AB%99%E5%9C%B0%E5%9B%BE.jpg) ## ⭕版权声明 #### 在"电影美学分享"页面描述版权交代，并附有跳转链接 ![](https://images.gitee.com/uploads/images/2020/0706/164145_0b15dd0c_2230257.png "tpbq.png") #### 图片附有超链接，一般情况下点击即可跳转 ![](https://images.gitee.com/uploads/images/2020/0707/130214_4e7b7ac6_2230257.png "tuyuan.png") #### 非原创文章于结尾处的声明 ![](https://images.gitee.com/uploads/images/2020/0706/165525_65116da0_2230257.jpeg "wzbqsm.jpg") ## ⭕图库风格及配色 ![](https://gitee.com/XIEIC/web-report/raw/master/tuku.png) #### 由上图的媒体库一览可看出本网站的图片色彩较多样，为了不干扰用户对配图的观感，故网站的配色主调选用中性色黑色为背景。 ![](https://images.gitee.com/uploads/images/2020/0707/005219_21a0d232_2230257.png "peise.png") ## ⭕平面设计 #### 考虑到本网站的建设目标为电影与色彩结合分享，故首页设置轮播图，以图片的形式向用户呈现网站的视觉风格（图片选用风格贴合文章内容）。 ![](https://images.gitee.com/uploads/images/2020/0707/000919_ce399035_2230257.png "zhuti.png") #### 文章的页面背景色与配图搭配和谐，使用FooGallery制作照片墙，并且排版美观，可读性卓越。 ![](https://images.gitee.com/uploads/images/2020/0707/010349_e3f29e42_2230257.png "paiban.png") ## ⭕插件运用 ### Animate it! ##### [页面链接](https://ic-space.top/dianyingmeixue/)（由于网站加载速度有限，个别动画可能会在下拉至相关区域时已结束，希望老师可以理解，站长也有在尽力尝试加快网站运行速度！） * 直接在内容添加动画 ![](https://images.gitee.com/uploads/images/2020/0706/235837_d4bc9cec_2230257.png "animate2.png") * 使用类生成器制作样式 ![](https://images.gitee.com/uploads/images/2020/0706/235343_6833a3c2_2230257.png "anmate2.png") ### Siteorigin * 在页面[电影美学分享](https://ic-space.top/index.php/dianyingmeixue/)上使用 **PostCarousel** 以幻灯片的形式展示文章。 ![](https://images.gitee.com/uploads/images/2020/0707/012540_d3cf45df_2230257.png "PC.png") * 使用FooGallery以图片墙的形式呈现文章内的配图 ![](https://images.gitee.com/uploads/images/2020/0707/112136_f8fae9b0_2230257.png "FG.png") * 使用Image Grid增添照片墙 ![](https://images.gitee.com/uploads/images/2020/0707/013230_d5bee7fc_2230257.png "img.png") ## ⭕云端架站 #### 三篇架站文章 * [站长认证教程](https://ic-space.top/index.php/2020/06/08/zhanzhangrenzheng/) * [快速了解建站准备工作](https://ic-space.top/index.php/2020/06/05/jianzhanzhunbei/) * [轻松避开建站雷点](https://ic-space.top/index.php/2020/05/30/jetpack/) ## ⭕云端网站管理 #### 1. 正常可用的云端网站：绑定域名且使用https ![](https://images.gitee.com/uploads/images/2020/0707/014222_1866d6df_2230257.png "yuming.png") ##### 2. 网站安全：在Wordpress上用 **Wordfence** 对网站的安全性进行监控 ![](https://images.gitee.com/uploads/images/2020/0707/015222_62596fb8_2230257.png "saomiao.png") ![](https://images.gitee.com/uploads/images/2020/0715/141346_8b7e19e7_2230257.png "wwff.png") ![](https://images.gitee.com/uploads/images/2020/0715/141419_dc6c5d5a_2230257.png "fhq.png") ![](https://images.gitee.com/uploads/images/2020/0715/142150_8327265d_2230257.png "wf.png") #### 由以上图表数据发现以下几点： * 当前服务器的状态需要优化，且存在漏洞需要修复； * 当前网站的安全指数不是很高，Wordfence防火墙有在阻止恶意攻击，但存在受恶意攻击的危险，说明网站的安全性有待提高 ； * 对网站防火墙的设置从“Learning mode”到“Enabled and Protecting”和开启“蛮力保护”，网站的受攻击次数基本在平均每天在150，000，000次之下（未开启防火墙之前受攻击次数曾超过150，000，000次），说明开启防火墙和蛮力保护是有积极作用的，但是如果出现有黑客刻意攻击网站，可能会存在危险。 #### 3. 网站性能：使用 **site24x7** ，添加 **8** 个监控地点 ![](https://images.gitee.com/uploads/images/2020/0707/022134_ab74925d_2230257.png "wzxn.png") ![](https://images.gitee.com/uploads/images/2020/0707/022215_0e3a89bd_2230257.png "xyzt.png") ![](https://images.gitee.com/uploads/images/2020/0707/022428_a19d2c76_2230257.png "xysj.png") ##### 由以上数据说明，网站可用性强，性能基本正常，响应时间较稳定且有待提高。 ![](https://images.gitee.com/uploads/images/2020/0714/231140_b1c8156d_2230257.png "wangzhanxingneng14.png") ##### 截至0714，查看网站性能，可以发现网站的可用性持续在100%，但是响应时间仍然有待提高。 ## ⭕网站备份 #### ● 手动备份主程序文件：WinSCP ![](https://images.gitee.com/uploads/images/2020/0707/110307_eb1d4d30_2230257.png "beifen1.png") ![](https://images.gitee.com/uploads/images/2020/0707/110349_a0b5e1d4_2230257.png "wordpress1.1.png") #### ● 使用插件备份数据库 ![](https://images.gitee.com/uploads/images/2020/0707/024145_a9179b1c_2230257.png "beifen2.png") ![](https://images.gitee.com/uploads/images/2020/0707/024326_a87e9fae_2230257.png "beifen2.1.png") #### ● 使用wordpress自带工具备份配置文件 ![](https://images.gitee.com/uploads/images/2020/0707/024508_15fa929b_2230257.png "beifen3.png") ![](https://images.gitee.com/uploads/images/2020/0707/024629_33bcee16_2230257.png "beifen3.1.png") ## ⭕站长工具 #### 使用站长工具前，通过site口令无法搜索到我的网站，说明网站未被收录，并且网站的索引次数为0，以下分析网站被收录后的情况。 #### 百度（已被收录） ![](https://images.gitee.com/uploads/images/2020/0707/024939_59f403aa_2230257.png "baidu.png") ##### 索引情况 ![](https://images.gitee.com/uploads/images/2020/0709/233816_7495336d_2230257.png "bdsy.png") #### Bing（已被收录） ![](https://images.gitee.com/uploads/images/2020/0707/030123_899f6aee_2230257.png "bing.png") ##### Bing网站动态 ![](https://images.gitee.com/uploads/images/2020/0709/233945_2b25a746_2230257.png "bysy.png") ##### 通过获取站长工具验证码，申请百度与Bing两大平台收录我的网站，申请之后一周内即被百度和Bing收录，推测原因是站长在申请收录之后的每天均有持续性的向网站更新内容。 ## ⭕SEO优化 #### 方法一：主动向搜索引擎提交网站链接 ![](https://images.gitee.com/uploads/images/2020/0709/235657_6ac94d0a_2230257.png "seo1.png") ![](https://images.gitee.com/uploads/images/2020/0709/235709_296a11a4_2230257.png "seo1.1.png") #### 方法二：主动向搜索引擎提交网站地图sitemap ![](https://images.gitee.com/uploads/images/2020/0710/000411_0e948c13_2230257.png "site1.png") #### 方法三：添加外链 * 朋友圈分享 ![](https://images.gitee.com/uploads/images/2020/0710/000646_2dd461fc_2230257.jpeg "anli.jpg") * 知乎上与本网站内容相关的文章下评论 ![](https://images.gitee.com/uploads/images/2020/0711/233657_e9511268_2230257.png "zhihu.png") #### 方法四：添加文章的焦点关键词以及元描述 ![](https://images.gitee.com/uploads/images/2020/0710/004838_e0780469_2230257.png "youhuaqian.png") ![](https://images.gitee.com/uploads/images/2020/0710/005148_fbfbb2ba_2230257.png "youhuahou.png") #### 方法五:添加内链 ![](https://images.gitee.com/uploads/images/2020/0709/100305_30dd2974_2230257.png "gaijin2.png") 在电影美学分享页面，以电影名称的标题将该部分的内容分为三类，用户看到喜欢的电影可以直接点击进入文章页面。 #### 方法六：为部分合适的配图编写合理的alt说明 在设定alt标签的时候不宜使用过多文字，这样搜索引擎会无法识别其中的关键词，无法抓住网站的重点。 #### Jetpack流量截图 * 虽然每日的访客数量不多，但是仍然可以看出通过发表内容是可以增加浏览量的，说明向网站持续性增添内容的可行性较高，且了解到如果内容是原创的效果会更佳。 ![](https://images.gitee.com/uploads/images/2020/0712/000009_6ad5f3b0_2230257.jpeg "Jecpack wenzhang.jpg") * 近期Jetpack流量图：从6月20日之后陆陆续续进行seo优化，从图中可以得出，SEO效果比较有效的目前是向社交朋友圈分享自己的网站。 ![](https://images.gitee.com/uploads/images/2020/0712/000703_09d3871c_2230257.png "seo hou.png") ## ⭕用户研究 #### 方法一：线上访谈（10人） * 问题设置 1. 针对页面设计，您浏览网站之后的观感如何？ 2. 您认为网站有哪些地方可以改进？ 3. 你认为网站最大的缺点是什么？ * 访谈总结 1. 100%的用户进入网站后观感不错，认为背景与图片搭配和谐并且文章排版美观； 2. 80%的用户反应网站加载速度缓慢； 3. 40%的用户希望可以直接看到电影的名称以查看自己想要了解的影片； 4. 30%的用户（均为本专业同学）认为在"架站经验分享"页面可增添一个搜索框； 5. 100%的用户喜欢首页点击电影配图即可跳转至文章页面这个设计。 * 改进措施 1. 添加适当插件，提高网站速度以提升用户体验； 2. 在"电影美学分享"页面设计一个以电影剧名为标题的网站地图； 3. 在"建站经验分享"页面增加一个搜索框。 #### 改进之后的界面 ![](https://images.gitee.com/uploads/images/2020/0709/100245_ebab4645_2230257.png "gaijin1.png") ![](https://images.gitee.com/uploads/images/2020/0709/100305_30dd2974_2230257.png "gaijin2.png") #### 方法二：A/B text * A小组页面无音乐播放选择 ![](https://images.gitee.com/uploads/images/2020/0709/132131_09c1e37c_2230257.png "wumusic.png") * B小组页面有音乐播放选择 ![](https://images.gitee.com/uploads/images/2020/0709/132015_56a14ce8_2230257.png "youmusic.png") * A小组用户行为:80%的用户浏览该页面的时间少于1分钟并且没有关注到图片说明（世界第一部彩色电影），20%的用户浏览该页面的时间大约1-3分钟. * B小组用户行为：90%的用户在进入页面时会点开音乐并且浏览时间多于1分钟，60%的用户关注到图片下的文字说明。 * A/B text总结：通过不同方案的用户行为对比，发现增添了音乐播放设计的B方案更满足用户的使用情况，用户不会在进入页面之后直接下拉，并且注意到音乐播放按钮周围的信息，音乐与电影的搭配可以提升用户的使用满意度。 ## ⭕定制化 * 通过线上访谈的方式了解到，大部分用户希望网站的加载速度能够得到一定的提升，故综合了插件商城的几个下载量较高以及更新时间较频繁的插件，最终选择了Autoptimize这个插件，同时在该插件介绍页的用户评价处了解到，大部分用户对Autoptimize的功能是比较认可的，由于我的网站的配图较多，所以我主要选择对图片的加载设置了优化。 ![](https://images.gitee.com/uploads/images/2020/0710/003832_9a193a72_2230257.jpeg "jiasu.jpg") * 由于网站加载速度较缓慢，当用户在信号不好的条件下进入网站时，屏幕可能会出现一片空白。用户可能会产生网站是否存在问题的想法并且当空白持续几秒之后将很有可能点击关闭，因此选择了有预加载动画的主题并且使用它，目的在于让用户知道我的网站是有在运行的，能降低用户的疑虑，符合以人为本的设计。