记-------

You jump，i jump。

上次小编发完文章后，就有好多小伙伴问我GIF图是在哪里找的。哈哈哈，哪里是找的，是小编自己做的。真是有种车到山前必有路的感觉。本来想着写公号，写好代码就ok啦，一旦真正处在这个环境才发现，有太多东西需要学习，包括今天给大家分享的工具---GifCam。

好啦，言归正传，今天的主题就是教会每个人制作高大上的GIF图，不需要ps，不需要安装复杂的软件（明天就520啦，说不定你还能用上奥）。接下来就follow me：

第一步：一个很小很小的文件GifCam.exe可执行文件。没有很复杂的安装包，双击exe文件就可直接打开。

第二步：接下来你就可以录制你的GIF图啦。首先你打开你要录制的视频，然后把GIFcam窗口放到你视频窗口（GIFcam的窗口大小是可调节的）。然后点击录制（Rec）就开始啦，然后根据你录制的时间长短，点击结束，再点击保存，一张高清无码的GIF图就呈现在你面前啦。

当然，这些都是很简单的操作。如果仅仅是这些功能，岂不是小看了小编。

大家可能也看到了，在GIFcam的右侧，有四个功能条，第一个就是录制的，里面的10 FPS（默认设置，每帧图片在屏幕上显示0.1秒）16 FPS（每帧图片在屏幕上显示0.06，秒）33 FPS（每帧图片在屏幕上显示0.03秒）分别是这三个意思。所以大家要选择好自己喜欢的帧率，还有一个就是捕捉光标，就是可以再gif上显示那个鼠标的动态。

第二种就是单帧方式，就是你没点一次单帧按钮，它就会录制一张图片，最后就把这些图片合成，就成一个GIF

录制好了还可以编辑那么这个编辑是怎么样的呢，如果是编辑就可以在里面添加，帧数，或者减少帧数，还可以加入文本啊，或者剪载等等都可以，其中一些自己回去探索，注意编辑是从左往右来编辑的。这就是它的第三个功能

第四个功能，录制完成后，那么我们就可以保存了，保存了又有几个选项量化、仿色、灰度、256色等，他们分别是什么意思呢。量化，颜色保持的最好，图片体积也最大，仿色的官方说法是用算法减小图片体积，256色图片会有明显的噪点，体积却不一定比量化的小，还有自定义等功能，不过可以自己定义。还有一些小功能，用户自己体验咯。

OK,基本的功能就是这些，小编为了这个素材，特意重温了一遍《泰坦尼克号》，对啦，高潮部分在2小时18分45秒。

最后送上我之前做的一个HTML5特效，录制成的表白GIF，只能帮你们到这啦，希望你们，你们明天成功。

你的支持和鼓励，是我最大的动力。如果感觉是干货，欢迎收藏和分享。

言：万物之始，大道至简，演化至繁。水滴不染尘世浮华，方能纯净如冰川灵动如丝绒。落红不逐春日绚烂，方有一年春尽一年春。

一、html5的介绍

1.1介绍

html号称超文本标记语言，代表着浏览器技术发展的一个阶段。html版本1到版本5的更新迭代都是由组织W3C管理的。当时到html4.1的时候，W3C组织就声称不再更新版本了。而改用XHTML。但是由于浏览器的各种不兼容的问题，于是乎W3C这个组织就和其他的浏览器产商一起联合起来将这门语言再次更新到html5

比喻：

html5 >机器人的骨骼

css3 >机器人的外在修饰

js > 机器人的行为如行走、抬腿

Jquery > 封装好的控制行为的库，可以提高效率

1.2优势

• 易用性

• 支持视频和音频

• 互动性高

• 支持移动设备

• 未来的趋势

1.3开发工具

HBuild、WebStrom、sublime Text

二、代码规范

2.1代码规范

新建一个Web项目

相比html4来说，html5的语法更加简洁并且在规定上也更加宽松。

• 单标签不用写关闭符号

• 双标签省略结束标签

• html、head、body、colgroup、tbody可以完全省略

• 删除其中一些，打开浏览器的检查元素功能，也不会报错

三、各类标签

3.1文本标签

• b标签：表示关键字和产品名称。<b>html</b>其实它的实际作用就是将一段文字加粗。但是并不是特别强调它的重要性。比如说：在一段文字当中出现的某些关键字或者产品的名称就可以用b标签

• strong标签：表示比较重要的文字<strong>html</strong>它的作用也是加粗，只是它在强调一段比较重要的文本

• br单标签：换行

• wbr标签：安全换行you've no idea how worried <wbr> i was当用户对网页进行缩放的时候可能会有一些单词被挤到下一行。如果不行某个单词被分离的话，可以使用安全换行标签

• i标签：倾斜。em标签语义一样，但em表示强调<i>倾斜标签</i>它用于表示外文词汇或科技术语

• s标签：删除线。del标签表示强调。<s>html</s>删除线

• u标签：给文字加下划线。ins标签表示强调<u>html</u>下划线

• small标签：添加小号字体<small>放小一号</small>将文本放小一号。通常用于免责声明和澄清声明。

• sub和sup标签：添加上标和下标X₅和Y²（sub和sup长差不多，这个要如何去记忆呢？大家可以看到b的肚子在下面，所以呢它是下标，而p的头部在上方，所以记录是上标。那这样一来是不是就感觉清晰了许多呢）

• q标签：引用来自其它出处的内容<q>有朋自远方来</q>

• ruby标签：语言元素。常用于帮助读者正确发音。<ruby>夔<rp>（</rp><rt>kui</rt><rp>）</rp></ruby><rp><rt>用来帮助读者掌握表意语言文字的正确发音。比如说汉语拼音在文字的上方。

• bdo标签：设置文字方向<bdo dir="rtl">设置文字方向</bdo>dbo必须使用属性dir才可以设置，一共两个值：rtl从右到左和ltr从左到右。一般默认是ltr。还有一个bdi元素也是处理方向的，由于是特殊语言的效果，并且主流浏览器有些不支持，所以可以忽略。

• mark标签：突出显示文本<mark>突出显示文本</mark>加上一个黄色的背景，黑色的字。从语义上来看，与上下文相关而突出的文本，用于记号。

• a标签：超链接a元素属于文本元素，有一些私有属性。

  href属性 <a href="http://www.baidu.com">百度</a> 这个属性是必须的，否则a元素就变得毫无意义。它的属性值意味着点击跳转到指定的外部网站去。

  target属性<a href="http://www.baidu.com" target="_blank">百度</a> 这个属性告诉浏览器希望打开的新窗口显示在哪里。_blank表示在新窗口中打开文档。_self表示在当前窗口打开文档。默认_self。(_parent和_top这些要结合框架来使用，但是基本上用得已经很少了。)

  锚点设置：用于将同一个文档中的另一个元素移入视野。说通俗一点就是通过点击这个锚点定位到页面中的某个位置。

<a href="#1">第一节</a>

<a href="#2">第二节</a>

<a href="#3">第三节</a>

</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

<a name="1">第一节的内容 我?应该说点啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

&hellip;&hellip;以上省略一万行&hellip;&hellip;

==========以下全都是分隔符============</br>

<a name="2">第二节的内容 我?应该说点啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

3.2分组标签

顾名思义，分组元素就是用来组织相关内容的html元素，对它们进行清晰有效的分类。

• p标签：表示段落<p>这是一个段落</p> <p>这是一个段落</p>p标签就是将内部包含的文本形成一个段落。它们可以自动换行，而且段落与段落之间保持一定量的空隙。

• div标签：通用分组<div>这是一个块标签</div> <div>这是另一个块标签</div>在早期的版本中经常用到，用div将其他数据或标签包裹起来，进而进行布局。但是在html5中，渐渐被其他元素替代。（它与p标签的区别就是两段文本间没有空隙。空隙间隔和br标签换行一样）

• blockquite标签：引用大段其他地方的内容<blockquote>引用别人的内容的辅导费打发打发可以换行哦他也有首尾缩进的效果</blockquote>有段落空隙的功能，还包含了首尾缩进的功能。

• pre标签：按照原格式展示数据<pre> 我就是 长这样的 参差不齐 </pre>（有时候某些文字就想要按照原来的格式显示出来就要用到pre标签。它就是将数据原封不动的显示出来）

• hr标签：单标签。添加一条分割线。

• ul和li标签：添加无限列表

<ul>

<li>貂蝉</li>

<li>大乔</li>

<li>小乔</li>

<li>孙尚香</li>

</ul>

ul标签表示无序列表（就像咱们平时说的无符号整形，在前面也是加了一个u），而li标签则表示内部的列表项

• ol和li：表示有序列表

• start属性：表示从第几个序列开始统计。<ol start="2">

• reversed属性：是否倒序排列。<ol reversed>（不过这个属性有很多的浏览器不支持，所以要谨慎使用）

• type属性：表示列表的编号的类型 <ol type="A">

• value属性：这是属于li的属性。表示强行设置某个项目的编号。<li value="7">安琪拉</li>

• dl、dt、dd：列表标签

<dl>

<dt>第一份内容</dt>

<dd>第一行详细内容</dd>

<dd>第二行详细内容</dd>

<dl>

虽然说这三个标签是一个整体，但是dt和dd标签并非都必须出现

• figure和figcaption标签：使用插图的意思。一般用于图片的布局。

<figure>

<figcaption>这里有一张图哦</figcaption>

<img src="img.png">

</figure>

3.3表格标签

表格的用途是以网格的形式显示二维数据。开发者可以对表格中的元素标签设置不同的属性如边框宽度、颜色等使表格呈现出不同的效果。

3.3.1 标签

• table：表示表格标签

• tr：代表某一行

• td：代表一个单元格。

<table border="1" style="width:300px;">

<tr> <!--相当于行-->

<td>王昭君</td> <!--相当于每行中的每一列-->

<td>沉鱼落雁</td>

<td>法师</td>

</tr>

<tr> <!--相当于行-->

<td>貂蝉</td> <!--相当于每行中的每一列-->

<td>羞花闭月</td>

<td>刺客</td>

</tr>

</table>

• th：代表标题单元格。代表标题，作用是将内部文字居中且加粗。

<tr>

<th>姓名</th>

<th>特征</th>

<th>职业</th>

</tr>

• thead：代表表头。（某些时候，网页上的表头是由js动态生成的。有可能没按照先后的顺序排列，如此一来表头就有可能显示到第二行、第三行甚至是表尾。用thead将tr括起来可以让数据永远显示在第一行）

<thead>

<tr>

<th>姓名</th>

<th>特征</th>

<th>职业</th>

</tr>

• tfoot:表示表尾：与表头相反

• tbody:表示表格的主体部分

• (这里非常建议用分主体、表头、表尾的方式写。因为到后期使用CSS样式的时候只要拿到某个标签就可以设置总体的样式了，这样就会非常方便)

• caption:添加表格的标题

• colgroup:群组。用于设置列的属性。默认设置第一个（有的时候需要设置单独列的属性，如果说我只想设置第二列的属性，则需要把第一列的设置成白色）

<!--<table border="1" style="width:300px;">-->

<colgroup style="background:white;" span="1"></colgroup> <!--设置第一个颜色为白-->

<colgroup style="background:red;" span="1"></colgroup> <!--设置第二个颜色为红 span代表一列-->

• col：群组的子标签。更加灵活的设置列属性。通过占位符设置不需要的属性。

<colgroup>

<col> <!--占位，表示第一列不设置-->

<col style="background: pink;">

</colgroup>

3.3.2属性

• border:表示边框的宽度 <table border="1"></table>

• style:通用属性。在css中做详解。

• colspan：合并列 <td colspan="3">统计</td>这句代码表示共占三个单元格

• rowspan:合并行

<tr>

<th rowspan="4">学员</th>

<th>姓名</th>

<th>特征</th>

<th>职业</th>

</tr>

3.3文档元素

文档元素的主要作用是划分各个不同的内容，让整个布局更加清晰。 进入代替div。让整个布局元素都具有语义。

• header标签：表示页面头部。通常包括标题或导航等内容。下面内容会换行（在页面中一般会用样式将它设置到居中）

• footer标签:表示页面的尾部，一般用于版权声明、友情链接等。

• h1-h6标签：标题标签，有字体加粗的效果。从1-6字号依次减小

<h1>这里是一个大标题</h1> <h3>这里是一个副标题</h3>

• hgroup:组合标题。hgroup的作用就是当多个标题出现，干扰到一对或多个本身需要整合的标题。

<header>

<hgroup>

<h1>这里是一个大标题</h1>

<h3>这里是一个副标题</h3>

</hgroup>

</header>

<footer>

<h4>这里是尾部的副标题</h4>

这里存放页面的尾部：如版权声明，友情链接

</footer>

如上面那段代码，头部的h4标题就能与h1绑定起来，从而和尾部的h4分离。

• section标签: 定义一个文档的主题内容

• nav标签: 给文档页面添加一个导航

• aritcle标签：添加一个独立成篇的文档（像平常看到的论坛，贴吧，评论都有自己的头、尾和内容等）

<article>

<header>

<nav>&hellip;&hellip;</nav>

</header>

</article>

• aside标签：生成注释栏。

<aside>这是一个注释栏</aside>

• address表示文档或者是article元素的联系信息

• <address>联系信息</address>

• 本身有倾斜的效果。如果是在article元素下表示其下的联系信息，如果是在body元素下表示整个文档的联系信息

3.4嵌入元素

嵌入元素主要功能是把外部的一些资源插入到html中。

• img标签：用于显示图片

• src：嵌入图像的url

• alt：（如果图片能正常显示则没有任何效果。若图片加载不成功会出现备用内容）

• width/height:定义图片的宽度和高度,单位是像素<img src="img.png" alt="风景图" width="320" height="400"/>

• ismap:获取到图片区域的像素点加入了ismap属性之后，点击图片在浏览器中就会获得图片被点击的地方的像素点。（把文件在目录中打开，讲文件拷贝到谷歌浏览器打开就能看见）

<a href="index.html">

<img ismap src="img_5.jpg" alt="风景图">

</a>

• usemap:创建分区的响应图。比如说点击图片的某一部分，可以跳转到某一个网页。（当点击了coords这块区域时，跳转到指定的网页）

<img src="img_5.jpg" usemap="#Map" />

<map name="Map">

<area shape="circle" coords="31,28,112,100" href="http://www.baidu.com" target="_blank" alt="方形">

</map>

• iframe标签：嵌入另一个文档。表示在一个页面内建立一个区域引入另一个页面。

<a href="index.html" >index</a>

<a href="http://www.baidu.com" target="in">百度</a>

<iframe src="http://www.baidu.com" width="300" heigth="300" name="in"></iframe>

• progress标签：用于显示进度

• 该标签会产生一个进度条，一般我们会用js代码来控制其内部的值。(当前值用value来表示，而最大值用max来表示)

<progress value="30" max="100"></progress>

• meter标签：显示范围里的值（类似于进度条,可以规定最大值和最小值max/min。low值规定它的值过低，high表示值过高。而optimun表示最佳值，但是这个属性是呈现不出效果的）

<meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>

3.5音频和视频标签

音频和视频文件其实都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题字幕等信息。在网页实现中，有很多的浏览器厂商都有自己的标准，所以html5规范也没有强制指定编解码器了。所以在网页上嵌入视频和音频时，最好提供mp4格式和webM格式的视频。否则有可能由于浏览器不兼容的问题导致视频不能播放。

• video标签: 视频标签属性：

• src:视频资源的url

• width：视频宽度

• height:视频高度

• <video src="test.mp4" width="320" height="400"></video>

• controls:设置后显示播放控件（未设置这个属性时，视频就像一张图片，设置controls之后才能显示视频播放控件）

• <video src="test.mp4" width="320" height="400" controls></video>

• autoplay:表示立即播放视频

• loop:反复播放视频（也就是说在播放结束之后会重新播放视频）

• muted:设置之后，视频会处于静音状态

• poster:指定视频数据载入时显示的图片。（相当于视频的一个封面）

<video src="test.mp4" width="320" height="400" controls

poster="img_5.jpg"></video>

• preload:预加载。不设置会在第一次播放自动缓存。如果值为none会直到用户点击时再加载视频。如果值为metadata表示播放之前只加载第一帧。auto是默认的，表示要求浏览器尽快的加载视频。

• 兼容多个浏览器 source标签

<video src="test.mp4" width="320" height="400" controls poster="img_5.jpg">

<source src="test.webm"/>

<source src="test.mp4"/>

</video>

• audio标签：用于嵌套音频内容。属性与视频元素类似。只是没有宽高设置和图片。

• <audio src="test.mp3" controls></audio>

3.6表单标签

表单标签是用于获取用户的输入数据的。

• form标签：表示定义html表单。用该标签包含的标签具有提交功能。也就是说，在浏览器的地址栏里面能获取到用户的信息。(如果不定义表单，那么它是无法提交数据的)

<form>

用户名：<input name="user">

<button>提交</button>

</form>

属性

• action:表示表单提交到的页面(也就是要把数据传入到哪个页面中)

• method:表示表单的提交方式。默认是get。而get和post请求的区别就是post后面不跟请求体。也就是用户信息。相对来说更加的安全。（一般来说，get是用于超链接提交居多，post用作表单提交居多）

• <form method="post" action="http://www.haosou.com"></from>

• enctype:表示浏览器对发送给服务器的数据采用的编码格式。有三种格式。默认是不能将文件上传到服务器&rdquo;application/x-www-form-urlencoded&ldquo;、multipart/form-data用于将文件上传到服务器、text/plain不建议使用

• name:设置表单名称，以便程序调用

• target:提交的目标，与超链接无异

• autocomplete:设置浏览器记录用户输入的信息。分为on和off两个值。默认为on。

• novalidate：设置是否执行客户端数据有效性检查

• input标签：表示用来收集用户输入数据的控件。它默认会出现一个单行的文本框。

• type:文本框的类型。值为text时表示单行文本框；值为password表示密码框；值为search时，除了火狐浏览器的其他浏览器外，会显示一个叉来取消搜索内容，值为number时，表示只限于数字输入；值为range时，生成一个数值范围文本框；当type为date系列时，可以获取日期和时间的值，有六种形态date、month、time、week、datetime、datetime-local；当值为color代表可以获取不同的颜色；当值为checkbox、radio时表示复选框和单选。单选的name值必须一样。checked表示默认勾选状态值为img是表示产生一张图片按钮，后面可以接src,alt,width等熟悉值为email,tel,url时表示输入电子邮件、电话和网址格式值为hidden时，生成一个隐藏控件（看不见，但提交的时候会显示，一般用于关联主键id提交）值为file的时候，表示上传文件。accept属性表示限制文件<input type="text">

音乐<input type="checkbox" checked>

体育<input type="checkbox">

<input type="radio" name="sex" value="男" checked>男

<input type="radio" name="sex" value="女">女

<input type="hidden" value="1" name="id">

<input type="file" accept="image/gif">

• maxlength:设置文本框最大字符长度

• readonly:设置文本框为只读状态。可以提交但是不能修改文本框的值。

• placeholder:占位符

• size:设置文本框的宽度

• required:表明用户必须输入一个值，否则无法通过输入验证

• <input type="text" list="abc" required>

• autofocus:让光标聚焦在某个input元素上，方便用户直接输入。<input name="user" autofocus>

• disabled:禁止input元素 （连点击都不能）

• list：为文本框提供建议值

<form>

<input type="text" list="abc">

<button>提交</button>

</form>

<datalist id="abc">

<option value="1">湖南</option>

<option value="2">海南</option>

</datalist>

• value:默认在输入框内出现的值

• form：与表单外的数据挂钩一遍提交

<form id="register" name="reg" action="index.html">

用户名：<input name="user">

<button>提交</button>

</form>

年龄：<input name="age" form="register">

• label标签:把文字和input标签包裹起来可以方便设置样式，并且当用户点击文字的时候，光标会自动移入到对应的input框。（如果只是设置了文字用label包裹，又想点击文字将标签自动移入对应的框，可以将label的属性for的值设置成与input的id设置成一样）

<label for="user"> 用户名：</label>

<input id="user" name="user">

• fieldset标签:对表单进行编组。三个属性name、form、disabled

• legend标签：添加分组说明的标签（也就是说给分组加上一个标题）

<fieldset>

<legend>注册分组</legend>

<label for="user"> 用户名：</label>

<input id="user" name="user">

<button>提交</button>

</fieldset>

• button标签:创建一个按钮。type属性有三个值，submit表示提交，reset表示重置，也就是把input的值变成初始值。button表示一个普通的按钮。

• select标签：下拉列表。需要和option标签配合使用。

• name属性：设定提交时的名称

• disabled属性：将下拉列表禁用

• form属性：将表单外部与内部挂钩

• size属性：下拉列表的个数

• multiple属性：设置是否可以多选

• required:选择验证，必须选择后才能通过

<select name="fruit" size="5" multiple >

<!--value值是真正要提交上去的值，而后面的是显示到页面的值-->

<option value="1">花花菇凉</option>

<option value="2">文小喵</option>

</select>

optgroup标签:对列表进行分组选择。

<form action="http://www.baidu.com">

<select name="fruit" multiple size="5">

<optgroup label="表情包">

<option value="1">花花菇凉</option>

<option value="2">文小喵</option>

</optgroup>

<optgroup label="书">

<option value="4" selected>微微一笑很倾城</option>

<option value="5">神雕侠侣</option>

</optgroup>

</select>

<button>提交</button>

</form>

• textarea标签:生成一个可变大小的多行文本框

<!--wrap表示是否插入换行符 有soft和hard两种。hard提交之后在地址栏可以看见%插入的隐藏换行符-->

<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>

• pattern：正则表达式。开头和结尾用^和$ novalidate属性表示不要验证该表单

<input type="text" placeholder="请输入区号和座机" pattern="^[\d]{2,4}\-[\d]{6,8}$">

html对网页页面的布局或者是表单验证等功能都相对简陋，并且不同的浏览器支持的成熟度是不尽相同的。因此在大部分情况下，还是要借助js或jqury等前端库，来呈现丰富多彩的验证效果。

要：我们应满足用户需求的建议，调整了内容的方向，最开始是写写科技吐槽的内容，后来写评测，然后写盘点硬件产品、软件产品，再而又写创业知识分享和办公工具分享，但作为一个科技自媒体，走过了多个年头，总想给用户提供一些有价值的内容，这一次，我们会从软件系列拓展到网站、公司、书籍、创业项目等角度，为大家带来新的变化与期望。来，再分享一大波酷站，吐槽哥希望可以帮助你找到实用又好玩的工具与网站。

简报可视化PPT设计神器：iSlide

PPT在日常生活工作的方便性相信很多用户都体验到了，而且制作过程也简单易学，网上各种大量的PPT也层出不穷，但为了避免在工作中使用幻灯片模板遇到“撞衫”的情况，有没有想过自己设计一套属于自己的PPT模板呢？又如何设计幻灯片模板？iSlide是一款PPT设计神器，即使你是小白，你也可以快速做出高大上的PPT。它将具有更多的实用功能：图示库、智能图表、智能排布、色彩库等。将PPT中不规则的字体，段落，色彩，参考线布局，风格样式等一键化全局统一设置，构建专业和规范。拥有100000+扁平化图标素材资源，任意下载，一键插入PPT，可随时根据需求修改替换，用户可以随时随地快速检索，一键插入到ppt文档中，再配合富有吸引力的ppt图表，可以让你的数据呈现个性化，将PPT页面按需排列组合，一键导出为长图，参数化调节可自由控制输出图片质量和尺寸大小，同类产品还有Slidebean等。

多人实时协作的设计工具：Figma

随着Sketch越来越流行，基于矢量的绘图软件也变得越来越热门。 Figma的实时协作功能在其核心设计工具集中尤为突出。 就像多个程序员可以将自己的代码实时添加到一个项目中一样，Figma允许多个设计师在远程协同工作。 你可能会想多个设计师实时准备同一个项目的情况或许不太多见，但例如这个设计师经常遇到的场景：在会议中，团队成员同时在看一个项目，并实时提供反馈来修改项目，Figma将是最合适不过的解决方案。大家都在一个画板上工作，设计、讨论，甚至直接在别人的工作上继续修改，这些都是实时的。

帮助清理你的上网痕迹的工具：Deseat.Me

网络在传递知识、开拓视野的同时也充斥着各种危机，除了容易遭受网络攻击之外最大的困扰就是个人信息被窃。瑞典开发者Wille Dahlbo和Linus Unneb?ck共同开发了，这款网络应用只需几个点击就能轻松帮你清理你在网络上留存的信息。使用帐号登陆该页面之后，该网页应用就会自动检索通过帐号所使用的应用和服务，并创建相关列表能够让你轻松删除你在这些网站和应用上的使用记录。然后你的帐号捆绑的应用和服务，并通过轻松点击的方式来移除这些内容。如果你对社交媒体或者网络已经感到厌倦，那么不妨使用这款工具来清理你的网上信息。

员工无需垫资的报销神器：报销吧

如何报的快又爽是每一家企业面临的问题，员工不用担心垫钱出差、采购，这款华为人也在使用的牛逼的报销利器，你可以试试。报销吧是一家在线的企业级差旅和费用报销管理工具，也支持移动端。平时我们商务、销售、市场、活动、老板人员出差要订票、打车、住酒店，而报销吧整合国内的众多旅游服务商，比如：飞鹤航空、携程与同程网的机票酒店、滴滴出行企业版、京东企业购等，一款软件内可以实现商务出差全过程，从出差到报销，无需再下载多个软件应用，只需一个报销吧，就可以实现应用内一站式预订机票、酒店、火车及打车和出差比价的功能。报销吧打通了订购、报销、支付、记账的全流程，提交报销（告别手写）-领导审批（多级审批）-出纳支付（网银/第三方）-财务记账（ERP接口），帮助企业简化工作流程，更好的协作。

在线时间追踪录制工具：Teamito

这个工具对于做自由职业者的也很有用哦。Teamito是一款简单高效的团队项目管理和记录工具，一键开始录像，再次点击即可停止，每一个条目都可以在见客户或者分配项目或者任务的时候记录项目内容，所有参与的团队都可以在线收听。快速和简单的实时追踪记录，简单的操作即可记录下来各种项目的说明和要点，比下载纸质上的方式要便捷的多，透明组织构架，每个新建的条目客户、项目、任务三层构架，多个工作区，每一个账户下都有多个工作区，每个人可以有合作的成员。Teamito旨在帮助企业建立团队精神，你可以轻松的邀请成员加入你的团队，一起在工作区里实施项目，每一个部件都有不同的使用权限，管理员可以灵活控制。

在线思维组织工具（不是思维导图）：CheckVist

在你的工作生活中，是否有很多的想法，却无法很好的表达出来，你有一个好的想法，但是想要写出来是比较难的，或许一闪而过的想法在你提笔的瞬间就消失了。抑或你工作在一堆混乱的工作笔记中，苦于翻看和寻找，就像思维导图，CheckVist是是一个非常简洁方便的知识、任务、大纲管理工具，适合于团队和个人，记录你的想法和计划清单，可以与好友或者同事分享，其特点是可以分层列表、共享和协作，支持搜索、筛选、注释等。checkvist的好处就是可以非常方便自然地将任务细分。我也一直提到方便的力量，如果一个工具很方便，你就容易朝这个方向积累，虽然每天的积累很慢，但是长期的效果还是很不错的，就像复利。有了checkvist，你就自然地要划分子任务。

在线表格制作转图片工具：Venngage

信息图表（Infographics）顾名思义就是信息（Information）+图表（Graphics），用直观的图形来表现所要告诉人们的信息。那么，如何制作信息图表呢？俗话说：“工欲善其事必先利其器”，Venngage是一个比较适合市 场销售人员和出版商的强大的信息图在线创作平台。它帮助用户创建和发布信息图表，提高用户作品的体验，并跟踪用户反馈 。可以帮你设计无数的信息图表，用作业务展示、营销材料甚至一些教学项目中去。同样是选模板、主题再细化图标等小的视觉元素的流程，如果你想进行完全的品牌定制也是可以的，甚至可以拿它制作动画。

创建Html5动画并生成移动网站：KoolMoves

想要创建高影响力的网站和动画？KoolMoves是一个Html5，动画GIF，AVI和Flash创作工具，用于创建文字和图像效果，幻灯片，游戏，动画人物和整个网站。KoolMoves使用PhoneGap和Adobe AIR SDK将HTML5，AVI，MP4，SVG，动画GIF，SWF和移动应用程序导出，你可以从大型图库中选择效果和组件，导入矢量剪贴画，附加音频，填充颜色渐变或图像，并向按钮和框架添加操作。能够制作动画GIF、制作文字特效、导入矢量剪贴画、附加WAV 音频文件；为文字按钮和帧增加动作... 完全支持汉字的文字特效。支持自定义文本效果，按钮和剪贴画、导出为移动友好的Html5，GIF和AVI、添加令人印象深刻的3D文字和形状效果、使用模板或创建自己的设计。

1000家网站：这是一个从0到1的历程，是一个自媒体肩负起互联网普及的历程，是一段为了理想重新上路、累并快乐着的历程。嗯，1000家网站，互联网发展这么多年，很多人经常使用的还是那些常用的网站（资讯、影视、社交、搜索....），有许多（优秀的、好玩的、特色的、有趣的、实用的.....国内外网站）未被发掘过，也没有人去真正了解过，为此，我们推出了这个系列计划，先让这1000家网站走近大众化，我们的理念是：让人人都能了解，人人都会利用互联网学习、工作、提升效率，增长见识。如果你也喜欢，请关注我们的动态。