邱慧玲 明小波
摘 要:针对普通网民获取表情包的途径单一,部分网民不具备PS自制个人特色表情包能力这一现象,设计并开发“来图啦”平台。该网站前端界面使用流行的响应式框架Bootstrap做界面设计,后端使用MySQL作为数据存储工具,PHP作为逻辑编程语言,具备大数据推荐、DIY制作等功能。通过网站的建设,为个人以及企业运营提供信息化、个性化的表情包制作服务,目前网站已经上线正常运营。
关键词:新媒体工具;斗图;PHP;HTML5
中图分类号:TP311.52 文献标识码:A 文章编号:2096-4706(2020)21-0010-04
Design and Development of the New Media Tool Doutu.com “Laitula” Platform
QIU Huiling,MING Xiaobo
(Shangrao Vocational & Technical College,Shangrao 334109,China)
Abstract:In view of the fact that ordinary netizens have a single way to obtain the emoticons and some netizens do not have the ability to make their own personal emoticons by PS,“laitula” platform is designed and developed. The front-end interface of the website uses the popular responsive framework Bootstrap for interface design,the back-end uses MySQL as the data storage tool,PHP as the logic programming language,and has functions such as big data recommendation and DIY production. Through the construction of the website,it provides information-based and personalized emoticon production services for individuals and enterprises. At present,the website has been online and operated normally.
Keywords:new media tool;doutu;PHP;HTML5
0 引 言
随着碎片化阅读的增多,人们的社交习惯正在潜移默化地从文字转为图片,聊天中也越来越喜欢用表情包来表达自己。而新媒体运营时代加大了网络文化影响力的同时,一定程度上增加了表情包题材的丰富性。当下,表情包已然成为一种社交文化,它不仅能传递语言之外的信息,也能恰当的活跃气氛、缓解尴尬,尤其是在陌生人社交中,可以通过表情包为自己建立“人设”。但是,如何获取表情包、现在流行什么样的表情包、怎么做属于自己的表情包却成了人们使用过程中最大的烦恼。通过分析同类型平台的优缺点,作者在与本地多家自媒体服务者交流后,结合用户多元化的个性需求,我们使用LNMP+MVC的架构设计并开发了斗图网“来图啦”,该网站具备了热门表情推荐、流行表情包下载,自制表情包等有趣功能,是一个简洁便利的表情包获取网站。
1 功能介绍
“来图啦”作为一款实用的新媒体工具,主要具备:热门表情推荐、热门表情DIY、热门GIF制作、表情包下载等四大功能。
1.1 热门表情推荐
在时下的社交媒体中,表情包成了不可或缺的部分,人们越来越习惯使用表情来代替文字表达自己。而在微博、QQ、微信等社交互动平台,每天都有新的热门表情产生[1]。如果在朋友圈、广告文案中使用当前流行的表情包,就会获得更高的关注度。但是用户的精力是有限的,他们并不想花费大量时间搜索,为此,本平台定时采集互联网上的热门表情,根据热门推荐算法,展现给用户最热门最新的表情,让用户不用搜索就能接收到热门表情推荐。
1.2 热门表情DIY
随着表情包使用越来越广泛,用户们的需求也逐渐提高,伴随着一系列相应软件的诞生与发展,用户们希望自己成为原创作者,设计并制作特定的表情包。基于这个需求,本平台给不了解作图,不擅长绘画的用户提供傻瓜式的模板表情自定义功能,用户可以在自定义的表情背景上的任意位置添加任意大小、任意颜色的自定义文字,制作属于自己的独一无二的表情。
1.3 热门GIF制作
一些影视剧作或综艺场景里的“名场面”,往往会诞生经典的“梗”,如果把这种场面制作成GIF,替换里面的某些话语,就会成为非常有喜剧效果的GIF表情,比如:“王境泽真香”系列、“有钱为所欲为”系列。本平台将最为流行的几大“名场面”制作成了GIF模板,可以供用户随意编辑GIF字幕内容,方便用户在任何场景使用。
1.4 表情包下载
用户在斗图网中找到自己满意的表情包后,就可以根据网页提示将表情功下载到自己的电脑,方便保存。
2 功能实现
本平台前端基于HTML5+CSS3+jQuery运用了成熟的Bootstrap响应式框架,后端使用PHP作为编程语言,并借助开源的MySQL数据库进行数据存储,使用Nginx作为HTTP Web服务器。平台已经购买了阿里云服务器,并完成公安部、工信部备案的域名:http://www.laitula.com,网站中文名:来图啦,完成了HTTPS证书的认证与使用。
2.1 具体过程
首先购买一台2核2 GB的阿里云服务器,然后购买域名laitula.com,并遵照国家工信部的规定对其进行工信部和公安部备案,之后通过阿里云控制台将域名解析到购买的服务器的外网IP地址。接着在本地电脑上安装PuTTY软件和FileZilla软件,其中PuTTY是一个强大又简单的串行接口连接软件,我们使用该软件远程登录我们的服务器。而FileZilla是一个功能强大的SFTP、FTP文件传输软件,用于上传、下载以及编辑阿里云服务器上的文件。
2.2 开发环境搭建
远程连接Linux实例,在Linux上通过YUM库以及官网下载的安装包安装开发需要的软件,包括Nginx、PHP、MySQL等软件,并进行相应配置的初始化,完成开发环境的搭建,指定项目开发目录为/var/www/html/。前期的准备工作完成后,开始进行Web前后端的开发,前端使用最流行的Bootstrap前端框架,结合jQuery进行设计。后端使用ThinkPHP框架设计并结合FFMpeg等工具对图片进行在线处理。网站的页面布局采用响应式开发,能够完美适配PC端以及移动端的访问,符合现在的Web开发流行趋势。
2.3 平台主界面
“来图啦”网平台主界面由以下四部分组成,效果图如图1所示。
第一部分是顶部菜单栏,包含三个独立的区域,分别是网站Logo区域、菜单区域、以及搜索功能区域。
第二部分是内容显示区域,显示的内容由点击的菜单所决定,包括首页、热门表情页、热门套图、热门GIF制作、表情模板制作等页面。
第三部分是侧边栏,包含了网站搜索关键字、侧边导航,以及站内快讯模块。
第四部分是页面最底部,包含了友请链接、底部导航、以及工信部备案信息等。
2.4 网站后台的开发
网站后台需要开发表情包上传功能,表情包采集功能,以及网站公告的发布功能。
2.5 开发过程中遇到的问题及解决方案
在“斗图网”的开发过程中,并不是一帆风顺的,主要遇到了以下几个问题:
(1)网站访问速度慢。网站上线后出现网站前端因为图片太多,且服务器带宽有限,网站的打开速度变慢的问题。针对这一现象,采用了懒加载技术,以此节省用户流量并提高页面性能。该技术可以在用户浏览到当前资源的时候,再对资源进行请求和加载。
实现原理:当用户访问页面的时候,首先可以把img元素或者是其他元素的图片路径替换成一张预设的默认图片的路径(这样就只需请求一次),首次访问时,通过jQuery设置图片路径加载当前可视区域里的图片的真实路径,当滑动滚动条移动可视区域时,监控滚动事件,加载出现在可视区域的新图片,这就是延时加载技术,即图片懒加载技术。
这里我们使用的是jQuery.lazyload延迟加载插件,使用方法为:
1)引用jQuery和jQuery.lazyload.js到页面:
1.
2)在网站图片标签的src属性填写默认图片路径,然后添加data-original属性,用于保存图片的真实路径。可通过设置自定义类,通过元素选择器,来指定界面中的哪一个模块需要使用懒加载,这里本站是全站懒加载。故不用设置自定义类,直接使用img标签即可,主要代码如下所示:
1.
2.
3.
4.