揭秘H5是什么,附N个H5项目必备网站

公司经常要做H5,但对它的理解只是它显示出来的结果。

有时问开发者、设计师,这个能做吗?那个能做吗?

当答案是“YES”,后面开发时间耗时长就很难理解,不是说能做吗?

当答案是“NO”,也容易感慨:大概是技术水平不够硬吧。

但可能有些东西是H5本身的天然限制。

以下内容是对H5的入门解释,以及一些H5项目制作常用的参考工具。

H5是什么?

H5,HTML5,the Fifth HyperText Markup Language。

the Fifth,第五版——2014年10月制成。

HyperText,超文本——打破传统文本顺序,引入超链接。

Markup,标记——规定信息的结构、格式、语法、含义。

Language,语言——用于交流的符号系统。

HTML5,一套浏览器与服务器对谈的新型语言规范。

遵从HTML5规范的文档即对话内容。

开发者按照HTML5规范说一大段话,传到服务器;

服务器把这些话通过网络发到浏览器;

浏览器“翻译”给我们看。

HTML5的革命性,在于标记的极大丰富化,以至让这门语言脱胎换骨。

比如“他”、“妈”、“的”本是三个独立的字,合起来呢?

让人憋火!但脏话这门全新的“技术”也诞生了。

有新语言,就要有会说这门语言的人。

这两年浏览器更新换代,主要是紧跟HTML5步伐。

浏览器一直在学新的“翻译”技巧,否则我们收到内容也看不懂。

因为HTML5加入很多本来软件才有的功能,现在很难分清APP和网页的区别。

APP和Web APP什么关系?

图像软件的矢量绘制、拼贴、滤镜、蒙板,HTML5会。

动画软件的3D变形、粒子特效、关键帧、骨骼,HTML5会。

游戏软件的重力、弹力、加速度、光照,HTML5会。

应用软件的表单验证、数据存取、数值运算,HTML5也会。

HTML5实现这些要CSS、Javascript、WebGL、SVG、SQL等规范的配合。

但它们都可以通过网络进行连接,我们只需要准备一个最新版浏览器。

试想,下载一个Photoshop软件要1G内存。

就算你每次只用移动、文字的简单功能,也要占几百M内存。

如果你用网络版PS,在线加载一个简单功能可能只占几百K。

现在有非官方Photoshop网页版,可没有Adobe那么多滤镜库。

但其实滤镜库的本地化不是必要的,难道联网使用就不行吗?

世上有“云”,还一定留备几百G内存放东西?

只因为它适应于传统的软件售卖机制与内存加载体验。

HTML5的局限性

APP和Web APP还是有区别,除却功能外,一是流量,二是适配。

流量困局,源于网速的客观条件。

如果想5秒内加载出1G的游戏,我们网速得进步到2000兆。

流量没有质的飞越之前,大软件还得乖乖下载。

适配困局,软件开发也有。

APP需要给iOS、Android等移动系统分别开发,适配部分机型的DIY配置。

电脑应用也一样,苹果、微软等桌面系统要分别开发。

而H5网页,首先是不同设备的浏览器版本不同,“翻译”能力不同。

其次,虽然电脑手机可以打开同个页面,但尺寸相差极大。

怎么解决?

一、大家都用新版浏览器,或开发回退方案;

二、前期开发适配不同屏幕大小。

目前H5支持最好的是谷歌的Chrome浏览器。

还好,国内很多浏览器基于Chrome背后的引擎开发。

今天我们在微信上能做各种各样的事。

这么看,它不也是一个装载腾讯服务的浏览器?

N个H5实用学习网站

(需长按选中后用浏览器打开)

国内移动广告资讯与案例

数英网(国内知名数字广告公司集中地)

http://www.digitaling.com

H5案例分享(公众号同名,每天有案例分享)

http://www.h5-share.com/

酷5网(建议查阅“动效”、“声效”栏目)

http://www.ku-h5.com

哇呸网(案例更新快又全)

http://thewap.cn/

世界优秀HTML5网页合集

Awwwards(每日/周/月评比最佳网页,大多特效和适配俱佳)

https://www.awwwards.com/websites/

SiteInspire(世界优秀网页合集)

https://www.siteinspire.com/

HTML5SHOWCASE(各类H5 Web应用)

http://html5-showcase.com/

PIXID(日系为主的优秀网页)

https://www.iiiimg.com

网页特效与应用案例

Codepen(国际前沿H5特效示例与源码)

http://codepen.io/

Codrops(各类设计特效示例)

https://tympanus.net/codrops/

Sizmek(网页嵌入广告示例)

http://showcase.sizmek.com

TRESENSA(HTML5游戏合集)

http://www.tresensa.com/games/

Mobile Design Inspiration(移动网页动效参考)

http://inspirationmobile.tumblr.com/

免费可商用音乐音效

DigCCmixter(歌曲,风格偏老旧,但量大)

http://dig.ccmixter.org/free

Freesfx(主要是音效,也有少量音乐)

http://www.freesfx.co.uk/

Audionautix(主要是轻音乐,风格偏电子)

http://audionautix.com/

Freepd(主要是轻音乐,风格偏古典,使用需著名来源)

http://freepd.com/

NCS(国外一个开放所有音乐使用的电子厂牌,网址为网友热心收集的音乐合集)

http://music.163.com/#/playlist/50631203/5623472/?userid=44653897

【写在最后】

这个公众号不具备超链接功能,不能直接打开网址,后面会把以上网站导航加入菜单,并不定时更新。

篇幅与能力限制,有些内容没有细说,有疑问可留言。

如果你有什么好的网站/工具,希望能顺便分享给大家。

脑洞DT Seed

实用数字工具与知识

肉飞仙:ID hibeatsall,超人肉。为敏捷折叠重复性脑洞,内部新开张的纯HIPGC数据后台。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180116G0PDKY00?refer=cp_1026

相关快讯

扫码关注云+社区