🦄 2024 独立开发者训练营,一起创业!查看介绍 / 立即报名 →

《 网站与应用 》系列课程,您慢慢看

我们一起学了很多,有时又会感觉什么也没学到,有天我听了一个广播受到点启发,这种迷惘地感觉其实是因为没有目标,没有终点,因为学习本身就是一件没有终点的事儿。我想我们可以阶段性地定一些目标,然后完成,这样感觉会好一些,可以验证所学,也可以接受一些挑战。

先从一个商业网站开始吧,功能不会太难,需求又很大,又可以很好地展示网站从设计到开发再到部署的整个过程。我觉得商业网站的主要任务就是去讲故事给目标客户听,让他们了解,接受,使用网站提供的产品与服务,这其实也是任何网站与应用都需要有的功能。

模仿

为了更真实一点,开始我想假装某国际公司找到我们,要求设计与开发一个网站。我还我问过一位在上海某家 Web 开发机构工作的大哥,咨询他想要做的这个网站的报价,如果是机构做的话,大概 30 万左右,个人做大概是 8 万左右。我给这家公司发了邮件,请求使用他们网站的图片与文字。对方非常客气地拒绝了。所以,我们得低调点,偷偷地用一小部分。

我尽量让网站的设计与开发更普遍化,因为大部分商业网站或者说任何网站都有一些共用的东西:导航,幻灯片,图文列表,产品页面 ...   所以不管你以后是不是要做商业网站,也可以学到一些你需要的东西。

设计

我喜欢简洁有效的设计,所以你不会看到我去做多么复杂,多么炫酷的视觉效果。我认为设计要为目的服务,如果一个页面的目的是讲个产品故事,那我们的设计就应该流畅自然地讲完这个故事。如果一种效果或一个设计元素可以帮助我们更好地讲这个故事,那就用一下。如果没有帮助,那就很可能是一种干扰,应该考虑去掉它。

我们真的会拿起设计工具,甚至有个视频我专门去买了一个设计应用(Sketch)。先把最终要展示出来的页面用设计图的形式表示出来。这个设计图是你跟客户或团队的其他成员之间的很好的交流工具。

流程应该像这样:草图 - 线框图 - 设计 - 原型 - 开发。草图是你最初的想法,很可能是在一张白纸或脑子里完成。线框图可以展示页面大体的样子,线框图不会包含具体的内容,用一些形状表示页面上出现的元素。然后去设计具体的元素。完成以后做出原型,原型会带交互,比如点了哪里链接到哪里,页面切换的效果等等,原型非常接近网站与应用最终的样子。最后一步是去开发。我跳过了草图与原型。

我用的这个设计应用(Sketch)目前只能在 macOS 上运行。如果你正好用的也是这种操作系统,并且愿意花 99 美金买一个这样的应用,可以跟着做一下。如果您不愿意花钱去买这个应用,或者用的是 Windows 平台,或者您已经有了自己已经习惯的设计工具,那可以跳过这部分内容。

开发

有了设计,我们会先一点一点把它用 HTML + CSS + JavaScript 的形式表示出来,做出静态的页面,也就是用浏览器能懂的方式把页面表示出来。这部分内容会用到一些样式框架,一些 JavaScript 库,我们也会自定义一部分样式,也会写几行 JavaScript 。这一步还会用到一套完整的工作流程,这个工作流程又会用到一些工具,所以在第一集里我就介绍了这套工作流程,还有它里面包含的工具。了解一下这些工具,非常有必要,这样再遇到它们的时候你就不会怕了。

网站与应用还得有个后台,可以管理内容,可以动态地生成用户请求的页面。后台框架可以选择的就非常多了,WordPress,Drupal,Laravel,Rails,Express  ...   任何能让你完成目的的框架都可以。我会先选择其中的Drupal。首先 Drupal 是有品牌的,有数不尽的大型组织为他背书,所以你很容易说服你的客户使用 Drupal 。还有,Drupal 拥有非常好的社区,不管到哪儿,你都不会感到孤单。另外,他也非常适合我们要做的东西。

部署

我们会一起亲手搭建服务器,把做好的网站部署到服务器上。

工具

我会尽量减少使用的工具。称得上工具的东西,它就是给我们提供帮助地,不是来吓唬我们地。我不算勤快,所以,你得相信有懒病的人(我),他不会喜欢去做不必要的工作。如果由于我得愚蠢,把事情弄复杂了,请你一定要救救我。

慢慢说

我会慢慢说,尽量让大伙都能看懂我在干什么,所以非常适合新手看。虽然如此,如果你是完全的新手,将会听到大量的陌生词汇,这会让你非常头痛,我还没有太好的方法解救你。不过,如果你能坚持跟着做,我保证过了一段时间,等你慢慢熟悉了这些陌生的东西,一定会豁然开朗。这很可能没有快捷方式,一定是要等一段时间才会这样。或许我们的脑袋就是这么工作地。

附注

  1. 《 网站与应用:商业》1:https://ninghao.net/course/4688

如果您之前看过宁皓的课程,并且认同我们的风格,不用想太多,应该马上订阅我们。遇到合适的太难了,真的。

评论

Sketch 我都是用的科学版的啊! 好吧!我这个屌丝买不起正版😔 就这个《Sketch科学版,哈哈》http://xclient.info/s/sketch.html 还可以下载好多mac科学版应用

谢谢分享~~

为什么一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直一直
在安装各种工具!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

工具可以帮助我们工作,可以帮助我们更好的完成任务。实际上,我们一开始只需要两样东西,一个编辑器,一个浏览器。但我假设你已经了解了这些工具的使用,我们要再往下走一两步,你就需要接触到一些新的工具,开始会看起来很恐怖,但我保证,一段时间以后,有些工具你就不能离开了。而且,这个系列课程,我已经为你准备好了所有需要的工具,你只需要把项目克隆到本地,然后执行 yarn install 或 npm install ,所有的东西都会为你安装好了。

不过一开始,我故意多花了一些时间,去解释每个工具的意思。我觉得理解一下他们是有好处的,不然以后你遇到他们仍然会感到陌生,或许有点恐惧。这种陌生与恐惧感我是不太喜欢,我用的东西,如果我能多了解一些,或者知道他们是怎么回事,会让我感觉好一些。

Semantic UI多么简单的一个玩意,给初学者引用一个外部链接不就完了吗?
上瘾,上瘾,上瘾!!!!!!!!!!!!!!!!!!!!!!

直接引用一个外部链接也行,最开始我们就是这么干的。 如果想更进一步,就需要用我现在介绍的这个方法了。最大的好处就是可定制,因为 Semantic UI 提供了一套定制的方法,你需要了解这套方法,才能更好的去使用这套框架。不仅如此,你可以从他的这套方法里学到一些东西,这对以后我们创建前端项目也会有帮助。

可定制才是框架的正确玩法!

微信好友

用微信扫描二维码,
加我好友。

微信公众号

用微信扫描二维码,
订阅宁皓网公众号。

240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点