2016 年 8 月 2 日

Web设计开发资源分享

从08年开始创业以来,世界变了很多,但是有一个观点我一直坚信不疑:软件吞噬一切,而Web吞噬软件。

我看好Web的原因很简单:技术开发成本很低、代码和UI设计相对独立的架构、跨平台兼容性更好、迭代更新速度更快,完全符合未来的发展趋势。我相信未来Web会成为大部分软件应用的一部分,甚至是主要部分,而其他技术很有可能会沦为Web的一个外壳或者管道而已。这种关系,就好像是微信和运营商,最开始移动联通主宰了我们的通讯方式,而现在它们沦落为了微信的一个数据管道。

基于这样的判断,过去几年我一直都把我全部的投资都放在了Web领域。

你会问,既然Web技术那么优秀,为什么现在大部分的web应用还只是低技术含量的网站而已,而赚钱最多、最流行的却是非web的桌面软件和手机app呢?

其实这是一个社会问题,就好像IE6那么烂,但几十年来市场占有率一直稳居第一,但是从趋势上看,你会发现IE6的份额一直在降,业界也是怨声载道,退出历史舞台只是时间问题。软件行业也是如此,如Java,C,Perl之类的古老语言,几十年来几乎没有什么变化,稳定的躺在教科书里,学的人也很多,社会必须要消化掉这么多程序员,所以必须有这么多相应的开发岗位和产品。但是从趋势上看,你会发现这些古老语言的份额逐年下滑,而新的语言如Go,Node JS,Swift,Ruby等则会逐步成为新的主宰。

另外一方面,Web技术在2010年之前整体上还是很落后的,只能拿来做做普通网站而已;最近几年突然开始迅猛成长,出现了一大批优秀的新技术和框架,用途也变得越来越广泛,真正开始显示了其吞噬一切的潜力,这个速度到底有多迅猛呢? 举个例子,你现在去书店里买任何一本Web方面的教科书,都会发现它已经是严重过时了,即使是最新出版的,从出版那天起就已经过时了。这样的发展速度,并不是我们这个世界可以承受的了的,至少需要几年来学习和消化,才能产生足够的人才积累和成熟的解决方案,去把这些技术大规模带入工业界,让我们拭目以待吧。

作为一个非科班出身的Web开发者和伪设计师,我最擅长的事情之一,就是找到这个行业最实用的开发和设计工具,用简单、高效的工作环境为自己的项目提供服务。

每次当我发现了某个靠谱的工具或产品,就会有冲动公开出来分享给更多人,尤其是跟我一样非科班出生的Web创业者,所以才有了这篇文章,本文会不定期更新。

自学编程/代码:

小白自学各种编程(入门):http://www.codecademy.com/
小白自学各种编程(进阶):http://teamtreehouse.com/ 和 http://code.tutsplus.com/
小白自学Html+CSS:http://www.codecademy.com/en/tracks/web
最适合初学者的两种web后台脚本语言:
PHP:http://wulijun.github.io/php-the-right-way/
Ruby:http://rubyonrails.org/
最适合产品工匠们的PHP框架:http://laravel.com/ (也是2014年和2015年美国最受欢迎的php框架调查双料第一),最新的版本是5。如果你对PHP不是特别熟,可以下载4.2的版本,更容易学习
在Mac系统下安装任意版本的PHP(及其插件)的最简单办法:http://phpbrew.github.io/phpbrew/
如果Laravel太庞大,可以找一些Micro Framework,比如:
Lumen:http://lumen.laravel.com/
Slim:http://www.slimframework.com/
PHP语言的常用库管理:http://getcomposer.org/
代码编辑器:
这款适合所有人:http://www.sublimetext.com/
这款是PHP工匠专用:https://www.jetbrains.com/phpstorm/
每天值得一读的Web开发优质信息:
http://www.sitepoint.com/
http://sixrevisions.com/
遇到无法解决的技术问题,去这里提问:http://stackoverflow.com/
产品+设计:

必备硬件:http://store.apple.com/cn/mac
同事之间互传文件:Mac OS系统自带的Air Drop
矢量/图标/UI设计软件:http://bohemiancoding.com/sketch/
照片/位图处理软件:http://www.adobe.com/content/dotcom/cn/products/photoshop.html
各类设计灵感:http://designspiration.net/
设计大牛的聚集地(适合招人):https://dribbble.com
UI素材的购买下载:
http://pixelbuddha.net
https://creativemarket.com/
http://market.envato.com/
https://ui8.net/
APP UI汇合:http://www.pttrns.com/
做产品的建议起床后翻一翻:http://www.smashingmagazine.com
prototype设计必备的高清图片库:https://unsplash.com/
更新率较高的一些国外设计资源:
http://theneodesign.com
http://speckyboy.com
http://www.webdesignerdepot.com
Web前端/CSS/JS:

使用最广泛的JS框架:http://jquery.com/
jQuery功能齐全但是体积庞大,一些轻量级的替代方案:
http://zeptojs.com/
https://github.com/lelandrichardson/dolla
https://github.com/remy/min.js
https://github.com/bendc/sprint
使用最广泛的响应式CSS+JS框架: http://getbootstrap.com
在线测试响应式设计的结果:http://resizr.co/
更加轻量级的响应式CSS框架:
https://www.qinco.net/humancss (注:这是我自己写的一个框架,也是我自己认为最实用的一个)
http://getskeleton.com
http://eiskis.net/layers/
http://rwdgrid.com
https://www.qinco.net/humancss

如果你是Mac系统,又得测试IE,可以装这个虚拟机:http://dev.modern.ie/tools/vms/
测试其他浏览器的工具:
http://browserstack.com/
https://saucelabs.com
http://netrenderer.com
Web设计全屏截图工具:https://derailer.org/paparazzi/
最佳WYSIWYG编辑器:http://imperavi.com/redactor/
最佳CSS博客:https://css-tricks.com
字体大小/em/rem/px:https://css-tricks.com/rems-ems/
SVG格式的图片:https://css-tricks.com/using-svg/
把图标文字化(font icons)工具:https://icomoon.io/app/
Retina屏幕下的图片自适应:
http://alistapart.com/article/responsive-images-in-practice
http://imulus.github.io/retinajs/
实用的前端代码片段:http://tympanus.net/codrops/
压缩CSS文件:http://cssminifier.com
压缩JS文件:http://skalman.github.io/UglifyJS-online/
文件上传框架:http://plupload.com/
压缩web图片体积:https://imageoptim.com/
JS代码加密:https://jscrambler.com
JS图表化插件:http://www.chartjs.org/
基于JS的2D物理引擎 :http://brm.io/matter-js-demo/
一些常用的JS或CSS库:
常用的HTML特殊字符:http://www.typewolf.com/cheatsheet
顶部菜单自动隐藏:http://wicky.nillia.ms/headroom.js/
照片集浏览:http://brutaldesign.github.io/swipebox/
日期选择:http://amsul.ca/pickadate.js/
Lightbox #1: http://osvaldas.info/image-lightbox-responsive-touch-friendly
Lightbox #2: http://brutaldesign.github.io/swipebox/
JS动态图表:http://www.highcharts.com
Auto-Complete: http://leaverou.github.io/awesomplete/
全屏页面插件:http://alvarotrigo.com/pagePiling/
图片轮播1:http://kenwheeler.github.io/slick/
图片轮播2:http://meandmax.github.io/lory/
侧边菜单:https://mango.github.io/slideout/
基于Web的Hybrid App:

入门版框架:http://www.ionic.io/ 目前使用最广泛的框架之一,本质是用WebView嵌套一个手机版网站
进阶版框架:利用JS调用更加底层的硬件API,实现真正Native的体验:
http://facebook.github.io/react-native/
http://www.telerik.com/nativescript
https://muut.com/riotjs/
一些跟App相关的工具:
内测版分发测试:
以色列公司:http://www.testfairy.com/
中国公司:http://fir.im/
截屏自动化:https://launchkit.io/screenshots
App评论管理:https://launchkit.io/reviews
Web后端/服务器:

最常用的服务器系统之一:http://www.centos.org/
这几年最受欢迎的服务器软件非Nginx莫属:http://wiki.nginx.org/
针对个人免费的SSL认证CA机构:https://www.startssl.com/
在Nginx下如何安装SSL证书:https://www.linode.com/docs/websites/nginx/startssl-wth-latest-nginx-debian-7
实时监控服务器CPU/内存/性能:推荐Linode提供的Longview服务
PHP性能分析工具:https://blackfire.io/
图表化的服务器压力/负载测试服务:http://blitz.io
适合自己DIY的服务器压力/负载测试工具:https://www.joedog.org/siege-home/
实时监控网站是否宕机:
国内:http://www.jiankongbao.com/
国外:https://updown.io
服务器端的图片处理:http://imagemagick.org/
基于PHP和Imagemagick的图片处理库:http://image.intervention.io/
服务器端的文件同步:http://linux.die.net/man/1/rsync
网站安全漏洞测试:http://ce.wooyun.org
域名/主机/CDN:

域名注册:http://www.godaddy.com
除了.com,.net等主流后缀外,还有上千种后缀可以选:https://www.godaddy.com/tlds/gtld.aspx
国外最具性价比的高性能VPS:http://www.linode.com
国内做的最好的VPS之一:http://www.ucloud.cn
国内网站的首选DNS托管:http://www.dnspod.cn
国外常用的CDN服务:
http://aws.amazon.com/cloudfront/
https://www.cloudflare.com/
国内最好的CDN服务:
http://www.qiniu.com/
https://www.upyun.com/
防御DDOS攻击/流量清洗服务:
国内:http://anquanbao.com
国外:https://www.cloudflare.com
邮件/短信/支付等第三方服务:

在线支付,首选支付宝的即时到账接口
在线支付API的一站式服务:https://pingplusplus.com/
邮件托管的最佳选择,没有之一:http://mail.google.com/a (设置需翻墙)
重要提醒:千万不要用腾讯企业邮,因为各种莫名其妙的限制会让你的email发不出去
简单好用的邮件发送服务: http://mailgun.com/
API做得最好的国内短信服务:http://luosimao.com
网站整体评估:http://nibbler.silktide.com/
插一条广告:HTML5响应式网站定制+租用:http://www.qinco.net/
项目管理:

代码的版本管理工具,最好且唯一的选择:git
入门教程:https://codewords.recurse.com/issues/two/git-from-the-inside-out
进阶教程:https://progit.org/
常见git问题整理:http://ricardofilipe.com/projects/firstaidgit/#/
基于Git的代码托管服务商:http://github.com/
工作日志记录:http://teamcola.com/
团队项目协作工具:
https://www.teambition.com/
https://tower.im/
给设计师用的协作平台:http://www.invisionapp.com/
看看其他网站在用什么技术方案:http://stackshare.io/stacks

最新文章

  1. 如何制作网站?制作网站有哪些流程?
  2. 为什么网页设计制作最好是交给专业的公司来做
  3. 北京网页设计制作流程都有哪些
  4. 网页设计制作前后应该注意哪些事情
  5. 北京网站设计需要注意哪些方面的问题
  6. 网站优化如何做好外部和内部链接
  7. 做网站优化要具备哪些好习惯
  8. 成功的北京网站建设不可或缺的因素
  9. 北京网站建设的后期要注意哪些方面的问题
  10. 北京网站设计制作需要多长时间

最新案例