新媒体中的前端

在接触了一年的新媒体和小半年的前端开发后， 想对过去的一些学习和想法总结一下，希望能对想从事新媒体和前端的童鞋一定的启发的作用，但由于个人水平有限，文章中如有疏漏还请指出，个人联系方式在网页最下方。

什么是新媒体？

新媒体（New Media）是指当下万物皆媒的环境，简单说：新媒体是一种环境。
新媒体涵盖了所有数字化的媒体形式。包括所有数字化的传统媒体、网络媒体、移动端媒体、数字电视、数字报刊杂志等。
一个相对的概念，是报刊、广播、电视等传统媒体以后发展起来的新的媒体形态，包括网络媒体、手机媒体、数字电视等。
新媒体亦是一个宽泛的概念，利用数字技术、网络技术，通过互联网、宽带局域网、无线通信网、卫星等渠道，以及电脑、手机、数字电视机等终端，向用户提供信息和娱乐服务的传播形态。严格地说，新媒体应该称为数字化新媒体。
————摘自「百度百科」

上面的内容应该已经定义了什么是新媒体，简单地说，新媒体应该是一种当代的，以数字化内容为形式，网络作为载体的一种媒体形式。相较于传统媒体，新媒体有着丰富多彩的展现形式。因此，新媒体是当下最为重要的一种媒体形式，也是当下十分重要的信息传播和获取途径。我们最常使用的新媒体平台有微信公众号、新浪微博、今日头条等等平台，同时这些平台也是新媒体从业者最为重要的传播平台。同时，这些平台也与我们的前端技术结合得异常紧密。

什么是前端？

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。
————摘自「百度百科」

前端即我们在上网浏览网页时所在屏幕上所能看到的那一部分，前端技术指的便是我们所见到的这部分所采用的技术，而前端开发则是对前端进行开发定制。

新媒体中的前端

既然我们已经知道新媒体就是数字化媒体，前端即为我们常见的网页，所以，我们是不是可以将前端技术应用在我们的新媒体中，让我们新媒体的传播形式变得更加丰富多彩？

微信生态大部分基于前端技术

此外，不知你有没有发现，我们所浏览的微信公众号文章就是一个简单的网页，微博文章、微信小程序、支付宝小程序、百度小程序、WebAPP、H5等等都是采用的前端技术，可以说前端在新媒体中无处不在。

网页制作

前面已经说了，微信文章、H5等均是网页，那我们就来了解一下网页制作。

网页制作主要分为以下几点：

交互和视觉设计
前端制作
后端制作
测试与完善

由此可以看出，一个网页先是经过交互和视觉设计后，才会交由前端开发人员进行定制开发，然后再进行后端开发，最终完成一个网页。在一些小公司或者工作室中，一个前端开发人员往往需要完成网页的交互和视觉设计，以及简单的后端开发这些本不属于前端的活，所以导致许多人对前端一只有种 前端就是做设计的 的偏见。但事实上，前端开发是一个信息技术活，而不是一个设计的活。当然，这样说不并是说你做前端的就不需要懂设计和后端，恰恰相反，只有你懂得设计与后端，才能做出更优秀的前端产品，只是说前端应该把重心放在技术上，而不是一些本应该由更加专业的人来做的事情。

现在，我们就来说一说前端技术。

目前，网页中呈现的内容主要由以下三种语言构成的（写出来的）：

HTML
CSS
Javascript

上边三种语言被称为「前端三剑客」，正是由以上三种语言构成了丰富多彩的网页。

HTML

HTML 全称 HyperText Markup Language （译为：超文本标记语言），是一种用于创建网页的标记语言（标记语言：能够将文本和文本相关信息整合起来并呈现文本结构的一种计算机编码，例如Word中我们设置一个标题就是将文本和文本相关信息整合起来，文本就是你需要设置标题的那段文字，文本相关信息就是它是一个标题）。当前最新的HTML版本为HTML5，即H5，由W3C指定标准。

本页面的HTML内容

使用 HTML 能够说明一个网页的每一个部分的内容（如上图即为本页面的HTML内容），当中清楚地指明了一级标题，二级标题，加粗内容，引用内容等等，对文本的每一部分都进行了标注说明，并插入了图片链接，让文本中能呈现出图片。但是，这也仅仅是对文本进行了标注说明，并没有进行美化，于是，没有美化的界面就像下边这样丑陋。

没有美化的HTML的页面

是不是看到这样的内容难以入目？在当今这个颜值即正义的时代，这么丑的网页怎么能端得出手？？于是，该我们的CSS登场了！

CSS

讲HTML的时候说了，纯HTML是很丑的，根本拿不出手，所以我们需要对HTML进行美化，而对HTML进行美化的工具就是————CSS语言。

CSS 全称Cascading Style Sheets （译为：层叠样式表），是一种用来为结构化文档（如HTML文档或XML应用(另一种标记语言)）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护，目前被广泛使用的是CSS2.1和CSS3。

CSS 不能独立呈现，必须与HTML等文本标记语言共同使用，起到修饰美化作用，比如设置背景颜色，文本颜色，字间距等等，最终让丑陋的纯HTML呈现出丰富多彩的页面，也就是你们现在所看到的网页形式。但是，采用HTML和CSS写出来的网页是静态的，并不是说网页中有元素会动，而是说网页中的一些内容不能实时刷新，例如时间、天气，购物网站上的库存余量等等，这些都是需要实时刷新的内容，而纯HTML和CSS构成的网页是不能完成这些功能的，实现这些功能就需要Javascript脚本的协助了。

Javascript

Javascript 简称JS，是一种高级解释语言（类似Python语言），是一门强大的面向对象的脚本语言，目前主要用于网页中，是网页中不可或缺的一门语言。

Javascript语言目前是GitHub上排名前三的编程语言，得益于其的广泛适用性，仅仅需要一个浏览器就能运行，所以被当下广泛使用。在网页中，JS主要用于完成网页中的动态部分，例如需要实时刷新的内容，或者一些精美的动画等等都需要JS脚本来完成，是前端开发中十分重要也是几乎唯一的编程语言（HTML和CSS算不上编程语言），网页中许多的功能都需要Javascript语言实现。

目前，前端开发中有许多基于Javascript的框架，例如React.js、vue.js等，使用这些框架能够快速进行Javascript开发，快速实现我们需要的功能。

前端的延申——小程序和PWA应用

上边已经简单说了前端技术，那现在就来说说前端技术除了网页方面的应用吧！

目前比较火热的应用领域主要是：

小程序开发（微信、支付宝、百度、今日头条）
快应用快发（手机厂商为狙击势头迅猛的小程序而诞生的）
PWA应用（由Google主导，浏览器支持的一种网页程序）

小程序开发

说到小程序，想必大家都用过微信小程序和支付宝小程序，百度小程序应该也有部分同学使用过，最近（2018/9）听说今日头条也在开启小程序内测了，由此可见小程序的势头迅猛，这个当初由微信提出来的概念，现在已经在互联网上遍地生花，足以见得小程序是一个不错的发展方向。

微信小程序

而入门小程序开发，采用的几乎就是前端技术，只是名字变了而已，以微信小程序为例，微信小程序开发中也有三门语言，分别是

WXML模板
WXSS样式
Javascript逻辑交互

由名字就可以看出来，微信小程序中的WXML、WXSS分别对应的是HTML和CSS，而Javascript中主要采用了类似vue.js的开发框架，由以上三门语言，最终构成了一个微信小程序，与传统网页不同的是，微信对源码进行了编译（加密）打包，使之成为一个类似手机APP的存在，只是这个程序是基于微信的，可以类比地说微信就是一个系统，上面可以运行小程序。

关于小程序的优点，想必大家都体验到了，那就是——免安装，启动快，占用储存空间小，用完即走等等特点，缺点就是——功能不够全面。如果需要功能全面，为什么不去下载这个小程序的手机APP呢？

所以，对于许多厂商来说，微信小程序是一个不错的引流手段，既可以让你体验到某个软件的优秀功能，还能让你为了某些特殊功能而去下载这个手机软件，既赚取了口碑，也获得了流量。除此之外，对用户来说，也是十分不错的，为了一些软件的一点点功能，就需要去下载某一个软件，占用手机空间不说，还会影响手机运行速度，降低用户体验。对于新媒体从业者来讲，微信小程序是一个不错的变现渠道，例如许多新媒体的收入来源很大程度依赖电商销售产品，但是以往依靠网页或者第三方平台的形式来进行销售的话，不仅效果不好，还需要一笔花费不小的平台费，对于本身收入就微薄的一些新媒体从业者来讲，门槛过于高昂。而小程序，正好可以解决这些痛点，花几千块钱定制一个小程序，就可以实现自己售卖商品的需求，同时小程序更利于在用户之间传播分享，为自己的店铺带来流量，简直美滋滋。