博客

《CLI》开发者的第一本任务手册

CLI》是宁皓网的一本蓝皮儿书,因为它的封面是蓝色的 :)还没校对,忍不住先发给大家看看。大家可以 fork 到自己的 Github 仓库里,然后帮着改改错别字儿。不熟悉这个流程,可以参考 Atlassian 的 Git Workflow,我应该也再去写一本 Git 流程手册。

熟悉在命令行界面下工作,可以作为你成为一名开发者要做的第一个任务。在命令行界面下完成一些简单的日常工作,比如进入到某个目录的下面,查看目录里的东西,在目录里创建新的目录,文件,重命名文件或目录,移动文件的位置,编辑文件里的内容。

这些任务在图形界面下操作就是点点鼠标的事儿。在命令行界面下,你需要了解内容的路径,绝对路径与相对路径的区别,使用什么样的命令,要用到哪些参数,怎么获得帮助等等。

或许一开始你会觉得这一切毫无意义,不过我向你保证,越往后你会越觉得自己当初的想法是错的。既然已经决定要当一名开发者,不管您智商有多高,在学习的时候尽量把自己先当成小白。有个人为你提供了一个学习的路线,如果你觉得这人还算靠谱,那就跟着试一下。

在线阅读:《CLI

《 网站 》里使用的 SASS 样式

在《 网站 》系列课程里,设计开发的页面需要的样式用的是 SASS 的形式创建的。这是一种更灵活的创建 CSS 样式的方法,你可以少写很多东西也可以重复利用一些东西。一旦你了解了 SASS,应该不会再直接写 CSS 样式了。在课程里,我们会用到几个 SASS 的重要特性。

组织

用 SASS 创建样式,组织这些样式的方法也很多。你可以创建一个主要的 SASS 样式文件,然后把其它的样式文件包含进来,项目的自动化任务会为你编译好一个普通的 CSS 文件,这个文件你可以直接用在你的项目里。

组织的方法一般像这样,比如你创建了一个主要的 SASS 文件,名字是 main.scss,它里面的内容像这样:

@import "variables";
@import "mixins";
@import "base";
@import "navbar";

这个主样式文件里不包含具体的样式,它可以作为一个入口文件,在这里你可以把其它的样式文件导入进来,项目的自动化任务会把所有的样式编译生成一个普通的 CSS 文件(main.css)。

《 网站 》第五集:移动导航与动态显示的边栏

《 网站 》系列要做的页面都是响应式的,页面在很多不同尺寸的设备上都能很好地显示。用到的一项关键的 CSS 技术就是媒体查询:Media Query,后面我们还会介绍让 JavaScript 也可以根据设备的不同尺寸在页面上应用不同的脚本代码。

媒体查询

CSS 允许我们在样式表里设置一些样式应用的条件,你可以限制设备的类型(Screen,Print),或者视口(Viewport)的宽度范围。

比如你想单独为小尺寸的移动设备上去应用一些样式,这条媒体查询的条件用文字描述应该像这样:在小于等于 767 像素的 Screen 类型的设备上。如果用 CSS 的媒体查询表示出来,应该像这样:

《 网站 》系列里用的工具:Git 版本控制

网站 》系列的一开始, 我们就用 git 去下载了我提前准备好的一个初始项目。后来我一边制作课程,一边修改这个项目。这些修改我都用 git 保存下来,每次修改你都会看到一条日志,你可以使用 git 查看我对项目的每次修改到底都改了哪些地方。我把这些修改推送到了项目的远程仓库里,你可以执行 git 命令把我对项目做的修改拉取到存储在你本地电脑上的项目里面。

直接在 Chrome 浏览器上编辑 SASS 样式

你用 sass 的形式写的样式,需要编译成普通的 css 样式,浏览器才能看懂。你可能创建了几个 sass 文件,但最终编译好的 css 文件确只有一个,如果你在编译 sass 的时候生成了 sourcemap,浏览器就能明白界面上的元素应用的样式到底来自哪一个 sass 文件。

《 网站 》第四集:导航栏

导航栏上的标志

在《 网站 》系列课程隐藏了大量的技巧,它又提供了一个清晰的路线,让你清楚的知道做成一个页面都需要哪些东西,哪里不太理解你可以再找相关的课程去补。第四集,会去把之前设计好的导航栏,用 html,css,javascript 的形式表示出来。

拿到一个界面的设计,作为 Web 设计师,你得了解这个界面应该会用到什么类型的标签(html)去组织这个界面里的内容,你需要设计这些标签之间的关系,谁是谁的爸爸,谁跟谁是兄弟。我们需要使用 css 去给这些元素应用样式,在为页面上特定的元素应用样式的时候,你要写好样式的选择器,定位到页面上的特定的元素,在上面应用你需要的样式。

这一集你会看到怎么样把一个界面组件用代码的形式表示出来,用 html 组织内容,用 css 去添加样式,用 javascript 为界面添加交互功能。几乎都是实践,每个视频你都可以跟着动手练习,节奏适中。如果之前你没有了解过 Web 技术,这一集将是一个非常好的入门课。

《 网站 》第三集:导航的设计

设计:导航 - 移动端

在《 网站 》这个系列里面,我们会一起设计与制作一些页面上常用的界面元素,导航是页面上必备的元素之一。主导航的功能就是展示网站的内容结构, 它是用户访问网站不同区域的一个入口。这一集会先使用设计工具,设计导航在桌面设备与移动设备上的样子。课程后半部分介绍了使用 sass 创建的样式。

导航栏在桌面尺寸的设备上会显示在页面的顶部,导航栏上一般会有标志,菜单,还有一些工具,比如搜索或登录。我们设计的导航栏有两个状态,一个是正常状态,还有一个是搜索状态,就是点击导航栏上的搜索图标以后,会把导航栏上的标志与菜单隐藏起来,显示一个搜索框。

导航栏在小尺寸移动设备上有不同的样式,导航栏上的菜单会被隐藏起来,导航栏左边会显示一个菜单图标(汉堡包),点击这个菜单图标会在页面左侧显示一个边栏,边栏上的内容就是导航栏上的菜单。在下一集,我们会介绍使用代码的形式表示这个导航栏的方法。

《 网站 》 第二集:页面的雏形 - 线框图

商业网站

线框图(Wireframe)就是抽象化以后的具体的页面。页面的线框图一般没有具体的设计元素,都是用一些图形来表示页面上即将要出现的元素。制作页面的线框图,一般是在确定了想法之后,在具体设计之前。用最简单的东西把你的网站或应用的界面表示出来,主要就是把页面的布局,或者框架先定下来。然后再去设计具体的元素。

《 网站 》第二集,我们用 Sketch 设计工具,为即将要设计与制作的网站首页先做了一张线框图,让你对页面的结构有个大概的印象。在做线框图的时候,你应该已经先确定了想法,就是要做的页面的功能是什么。比如一张产品介绍页面,它的主要功能就是介绍产品本身,你的设计要配合页面的功能来完成目的。

我们要先做一张网站的首页,假设网站属于一家生产汽车的公司。首页是最常用的登陆页(Landing Page), 你的用户很可能是通过首页认识你的。首页也就经常是用户对你的第一印象。我们可以通过一些常见的元素来传达一些信息,我是谁,我能为你做什么,我提供了什么样的产品与服务,我的用户如何使用我们的产品,我需要你做些什么,比如下载试用版的应用,报名参加体验活动。

《 网站 》第一集:工作流

本地服务器

工欲善其事,必先利其器。

做什么都需要一套工具,你使用这套工具完成任务,这个过程就是工作流(Workflow)。我们要开始学习 Web 设计与开发,同样需要一套工具,也要有自己的一套工作流。在《 网站与应用:商业 》第一集里,介绍了 Web 页面设计与开发的一套工作流。了解自己要使用的工具可以更有效地工作。

我们的会员去了上海的 Drupal 公司

这么多年一直不太了解会员的情况,比如他们在宁皓学到了什么,去了哪里,做了什么。这让我有点惭愧。今天收到一位会员的微信,说要聊点事情。我们用语音聊了将近一个小时,感觉非常地亲切。我也非常开心,得知他去了一家上海挺有名气的 Drupal 公司。更让我兴奋的是,他是远程办公(Remote)。我跟他说,如果我决定做强,也想实施远程办公。

他人在广西,平时除了正常的工作,周末还会在一所职业学院里教书。一开始,教一些前端的东西,后来得知学校要开 CMS 开发课程,就申请了,后来他把 Drupal 引入了这所高校。我说这所学校的学生有福气啊。

两年前他成为宁皓网的会员,学习了 Drupal,他把 Drupal 引入学校,又入职一家专做 Drupal 的公司,而且是远程办公。这让我感到很幸福。其实他跟我联系的主要目的是合作开发一套系统化的课程给他们的学生,因为这家上海的公司想在全国推广 Drupal 。他们非常重视对 Drupal 人才的培养,最近也在公司内部开了对外的培训班。



微信好友

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



微信公众号

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



240746680

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

统计

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

社会化网络

关于

微信订阅号

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