公司经常要做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数据后台。
领取专属 10元无门槛券
私享最新 技术干货