Media Query

1、Media Query是什么?

Media Query 是CSS3中用来查询设备类型(Media Type),并且通过条件语句,加载满足条件的样式表。

2、关于设备类型:

–Media Query可以检测出以下设备–

设备名称 指代
all 匹配所有设备
braille 匹配触觉反馈设备
embossed 凸点字符印刷设备
handheld 手持设备(尤其是小屏幕,有限带宽,不过注意:现在的Android,iPhone都不是Handheld设备,他们都是screen设备。所以,不要试图用handheld来识别iphone或者ipad,android等设备)PSP,NDS这种规格一般可以叫作Handheld,不过没有测试过,如有疏漏还请指正)
print 打印机设备
projection 投影仪设备
screen 彩色计算机显示器设备
speech 语音合成器设备
tty 栅格设备(终端,或者电传打字机)
tv 电视设备

3、Media Query的语法:

用法1:

@media 设备类型 { //…满足该设备条件的css属性… }

用法2:

[逻辑表达式only或者not] 设备类型{ …//如果逻辑表达式是only:代表只有这一种设备,调用如下css …//如果逻辑表达式是not : 代表除此之外的设备,调用如下css }

用法3:

@media [逻辑表达式only或者not] 设备类型 [and 设备特征表达式]{ …//用法3比用法2多了一个[and 媒体特征表达式],@media的强大之处在于, …//他不但能选择设备类型,还能对设备的不同配置(如屏幕宽度,色彩等的)进行选择。 //(这就是设备特征表达式所做的事情) …//这个用法,就是对相同设备的不同属性进行选择,而后条用满足条件的css表达式 …//现在你可能还不明白[and 媒体特征表达式],不过没有关系,后面我将认真介绍 //媒体特征表达式的用法,你一定会惊叹@media query的强大。 }

用法4:

@media 设备特征表达式 | 设备特征表达式 |….{ …//满足所给出的媒体特征表达式后,调用以下css代码块 …//注意:只要满足设备特征就可以了,不一定要是相同设备。 }

下面,我们用一个例子,来一步一步介绍这四种表达式的用法。

熊孩子的故事

想想这一种场景,你开发了个小有名气的在线阅读网站,不过后来有小孩子吐槽说:“我常常在NDS上看电子书,能不能在NDS上,将背景变为深色,字变成白色,夜里看小说,背景太亮很刺眼。”
这时,你有两种做法:
1、对设备UA进行检测,完全为NDS重新做一个适合手机的站点。(这是传统的做法,虽然现在多数站点都在用,在现在看来,很不聪明了!)
2、利用css3的强大特性,轻松完成(我们当然要选择这种聪明些的做法!)
让我们来考虑考虑实现思路:

首先利用media query检查是否是手持设备 如果是: 背景为黑色,字为白色 如果不是: 不做处理

我们现在来看media query的第一种用法:

@media 设备类型 { //…满足该设备条件的css属性… }

用法1正好符合我们在此情形下的筛选条件,那么我们书写的css如下:

@media handheld{ body{ color:white; background-color:black; } }

我们的html页面便类似这个样子:

代码家
我们来测试Handheld,手持设备和screen显示器设备。

用chrome打开该html,发现如下图:

好像没有看到黑底白字啊?当然啦,你现在是在用电脑显示器来访问的页面,也就是满足了screen设备特征,handheld设备所书写的css都被忽略了。

那我们要如何测试在手持设备中的样式呢?难道一定要用NDS访问么,可是我没有NDS啊?!
当然不是,我们这里要用Chrome的一个设置功能,来覆盖一些属性,模拟手持设备,按照如下操作,便可以调用Chrome中模拟各种设备的功能。
1.首先,点击右键->审查元素

2.而后,在弹出的控制窗口中,点下设置按钮

3.左上角切到overrides中,寻找Emulate选项,勾上后,选中HandHeld,你就会惊奇的发现,网页整个变了个风格。正如我们预期的那样,黑底白字。

做到此处,是否已经对media query有些了解,而且有很强的成就感,不过先按捺住不要激动,这才是media query功能的一部分,还有一些更为实用的用法还没有接触到。还需慢下心来继续看下去。

后来,过了一段时间,上次的那个小盆友又发来吐槽反馈,说:“哈哈哈哈,我买了个iPad2,可是我发现iPad2在横屏看书的时候字体有点儿小啊,能不能在横屏的时候把字改大一点儿?”。
这时候,技术人员抓狂了,这可怎么改啊,iPad2也是screen设备,电脑显示器也是screen设备?! 让我怎么识别!

冷静

我们下面介绍的东西就能很好的处理这种情形:那就是 设备特征表达式

设备特征表示 看起来是是这个样子的:设备特征:设备特征值

留意一下用法3:

@media [逻辑表达式only或者not] 设备类型 [and 设备特征表达式]{ …//我们现在就要用用法3来识别iPad2 }

现在考虑一下,虽然iPad2和电脑显示器都是screen设备,可是他们之间还是有不同之处的。比如说,ipad是有横屏特征的设备,电脑却没有。
这个问题先搁浅到这里,我们先来研究一下设备表达式究竟是什么,等弄懂后,你自然就知道该怎么做了。

前面说到过,media query是可以识别设备特征的,可是设备特征是什么?想想,屏幕宽度算不算设备特征?设别分辨率算不算设备特征呢?设备色彩支持情况,横竖屏情况?
没错,这些都是我们在使用电子设备时候的设备特征。Media query支持很多种设备特征的识别属性。

媒体特性 说明/值 可用媒体类型 接受min/max
width 长度正数值(单位一般为px下同) 视觉屏幕/触摸设备
heigth 长度正数值 视觉屏幕/触摸设备
device-width 长度正数值 视觉屏幕/触摸设备
device-heigth 长度正数值 视觉屏幕/触摸设备
orientation 设备手持方向(portait横向/landscape竖向) 位图介质类型
aspect-ratio 浏览器、纸张长宽比 位图介质类型
device-aspect-ratio 设备屏幕长宽比 位图介质类型
color 颜色模式(例如旧的显示器为256色)整数 视觉媒体
color-index 颜色模式列表整数 视觉媒体
monochrome 整数 视觉媒体
resolution 解析度 位图介质类型
scan progressive逐行扫描/interlace隔行扫描 电视类
grid 整数,返回0或1 栅格设备

扫了一眼表格发现不明白min/max?没有关系,后面会说到。
这张表格来自:zzjyingzi,尊重原创,转载请保留。

留意一下那个蓝色的orientation,这不正是我们可以用来识别ipad横屏的状态么?

我们在原来的html中加上:

@meida screen and (orientation:landscape){ font-size:25px; }

这样,你可以测试一下,在ipad横屏时。会正如我们所预料的那样,25px字体展示。一切都太完美了。
在此之前,你或许需要用js去获取,而后调整属性。现在,只需简单几行就能实现,css3的强大之处当然不止如此,以后我也会给大家介绍更多关于css3的新特性。

正在我们说话之际,小盆友又发来消息:“我最近买了个iPhone,我也要黑底白字,保护眼睛。”

我想你也猜到了,我们这次需要识别的是同为screen设备的iPhone….

Here we go!

先来考虑iPhone与台式机显示器的不同之处:最大的区别就是屏幕大小。

那我们这次就要介绍一个属性,device-width,指代的是设备的宽度,注意,这可不是网页渲染的区域宽度。这个是与设备相关的。

iPhone的device-width就是320px,那么我们继续补充一个media-query在css中。

@media screen and (device-width:320px){ body{ background-color:black; color:white; } }

好啦,加上以后,那个小盆友就每天很happy的看上了小数,可是过了几日,我们又收到了这个倒霉孩子的来信:“我的iPhone坏了…555555….我妈给我买了个小手机先用着,屏幕可小了,烦。。。能不能把这个小屏幕的手机也让黑体白字、”。

忽然觉得技术部门就是为他开的。

好吧,冷静。

这个时候,就要介绍min/max属性了。device-width:320px 其实类似于divice-width==320px;
min/max 其实就是 >= 和 <=
min-device-width : 320px; 等价于 device-width >= 320px;
max-device-width : 320px; 等价于 device-width <= 320px;
明白了吧,我们只要在device-width前加个max 就能轻松解决这个熊孩子的要求了(让iPhone或者iPhone屏幕小的设备都能黑底白字)。来自Apple官方

@media screen and (max-device-width:320px){ body{ background-color:black; color:white; } }

从此之后,这个熊孩子就成了网站的忠实用户。。

关于Media Query的初步介绍就随着这个熊孩子安静下来而在此结束,不过我们的教程还未完结,熊孩子或许有一天又会发信来吐槽。

你可以在这个gist中查看目前多数设备的Media Query语句:点此

作者:代码家
来源:代码家的博客
你可以订阅我的Blog以获取最新的知识文章。
请尊重版权,转载请注明来源!

在上一篇Responsive系列之知识储备 – SASS高阶教程(1)中,我带大家介绍了一些sass的高级特性。在这篇中,我将介绍另外一些比较常用的@指令。

如果你还不知道什么是sass,可以看Responsive系列之知识储备 – SASS基础教程

@extend

@extend 是一种扩展功能,通常用在有一定递进关系的样式中。
比如说有两个class,一个叫 .error ,一个叫 .seriousError。很明显 .seriousError应该是 .error的一个扩展。

假设所有的 .error 都用红体字显示:

.error{ color:red; }

.seriousError不但要红体字,还要粗体!

.seriousError{ font-weight:bold; }

过去,我们通常是这样来表现这个seriousError的

其实这种写法并不合理,有语义学上的重叠。 seriousError本身就是一种error,而我们重复的写下error 和 seriousError 是不合理的,并且当一个div有两个class样式同时作用时,我们在维护的时候就得小心翼翼了,无疑增加了维护负担。
我们如果能写成如下,就显得合理和精简了许多

但是想要写成这样,我们就得对css做一番修改。

.error, .seriousError{ color:red; } .seriousError{ font-weight:bold; }

很明显seriousError扩展了error样式。我们前面说到的@extend指令便实现了这种开发逻辑。

.error{ color:red; } .seriousError{ @extend .error; /请留意此处的语法/ font-weight:bold; }

生成的css:

.error, .seriousError{ color:red; } .seriousError{ font-weight:bold; }

@extend不但可以扩展class,也可以扩展伪类。

.hoverlink { @extend a:hover; } a:hover { text-decoration: underline; }

生成的css如下:

a:hover, .hoverlink { text-decoration: underline; }

@extend还能保持被扩展元素的父子关系。
假使 error类下还有个 instruction 类用来显示错误的说明信息,因为字比较多的原因,为了让他能放得下,我们指定他的字体是小号的字体。

.error{ color:red; } .error.instruction{ font-size:small }

.seriousError下自然也有关于错误的说明,也就是instruction.
sass对此考虑周到,对父类的子类在扩展的时候也考虑了进来。

.error{ color:red; } .error .instruction{//instruction可以理解为error的子类 font-size:small; } .seriousError{ @extend .error; font-weight:bold; }

请留意生成的css:

.error, .seriousError { color: red; } .error .instruction, .seriousError .instruction { //.seriousError也包含了.instruction font-size: small; } .seriousError { font-weight: bold; }

@extend同样支持多重扩展
前面我们有了一个error和seriousError的例子,想想后来,我们又生成了一种attention的样式,为了提起人们的注意,为此我们设置了边框为红色。

.error{ color:red; } .attention{ border:1px solid red; }

现在,我们相对seriousError进行一番修改,毕竟是serious,一定要确保引起了用户的注意,因此,我们也需要将attention样式集成进来,这时多重扩展便起了作用。

.error{ color:red; } .attention{ border:1px solid red; } .seriousError{ @extend .error; @extend .attention; /* 当然,也可以这样书写 @extend .error, .attention; */ font-weight:bold; }

生成的css如下:

.error, .seriousError { color: red; } .attention, .seriousError { border: 1px solid red; } .seriousError { font-weight: bold; }

这样的样式用着用着,有一天发现又有一种更危险的error出现了,情况极其严重,一旦出现,就一定要引起用户注意并且修改,如果不改,简直要天崩地裂。

好吧,我们姑且叫他 criticalError ,他依旧用鲜艳的红色,粗体,并且要有像attention一样的红色边框,只不过他需要更大,达到40px才解气。

很显然,criticalError是seriousError情况的加深。因此我们选择extend seriousError。

这样,便形成了一种链式extend结构。

.error{ color:red; } .attention{ border:1px solid red; } .seriousError{ @extend .error, .attention; font-weight:bold; } .criticalError{ @extend .seriousError; font-size:40px; }

生成的css如下:

.error, .seriousError, .criticalError { color: red; } .attention, .seriousError, .criticalError { border: 1px solid red; } .seriousError, .criticalError { font-weight: bold; } .criticalError { font-size: 40px; }

现在,这个error系统用着很棒,但是忽然有一天,技术总监说:“上面又发了一个新的error系统我们需要完成,我认为我们应当用现在的sass错误系统建立一个快速的error开发框架
这时,问题来了,如何用sass建立一个error开发框架呢?这时,让我们引出extend的另一个特性,这个特性就是为建立框架而生的。

让我们先来做个简单的实验,粘贴下面的sass代码然后编译看看:

%baseError{ color:red; }

是不是发现生成的css空空如也。
现在 试试这个

%baseError{ color:red; } .Error{ @extend %baseError; }

生成的css是否如下:

.Error { color: red; }

这便是一个最最简单的框架结构。%Name 告诉sass这时框架结构,不要输出这些。 @extend %name告诉sass我要扩展这个name选择器样式,调用一下这个框架。

框架在书写的时候,需要debug,在用户使用的时候需要对错误的输入警告,这时就需要@debug和@warn

@debug

用在测试时候的输出,可以在控制台看到。

@debug 10em + 12em;
你就会在控制台看到:
Line 1 DEBUG: 22em

@warn

看个例子:

@mixin adjust-location($x, $y) { @if unitless($x) { @warn “没有赋予单位,假设#{$x}按像素来算”; $x: 1px * $x; } @if unitless($y) { @warn “没有赋予单位,假设#{$y}按像素来算”; $y: 1px * $y; } position: relative; left: $x; top: $y; } .box{ @include adjust-location(10,20);//我们在这里故意不加入像素值 }

生成的css如下:

.box { position: relative; left: 10px; top: 20px; }

但是这不是重点,请留意你的控制台。

WARNING: 没有赋予单位,假设10按像素来算 on line 3 of style.scss, in adjust-location' from line 13 of style.scss WARNING: 没有赋予单位,假设20按像素来算 on line 7 of style.scss, inadjust-location’ from line 13 of style.scss

至此,我大致介绍了大致85%左右关于sass的常用知识,随后我将推荐和分析几个sass框架,来带着大家一起摸索sass的开发模式。
在探索过程中,我们将一起来制作一个基于Responsive和SASS的站点。

作者:代码家
来源:代码家的博客
你可以订阅我的Blog以获取最新的知识文章。
请尊重版权,转载请注明来源!

SASS系列:
Responsive系列之知识储备 – SASS基础教程
Responsive系列之知识储备 – SASS高阶教程(1)
Responsive系列之知识储备 – SASS高阶教程(2)

如果你还不了解什么是sass,请点击Responsive系列之知识储备 – SASS基础教程

SASS中的控制指令

sass支持一些基本的控制指令,通过条件判断来输出某些特定的样式。

1、@if :

@if 条件语句 {…(返回的样式)}

如;

p { @if 1 + 1 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } }

生成的css如下:

p { border: 1px solid; }

@if 同样可以跟 @else if
如:

$type: monster; p { @if $type ocean { color: blue; } @else if $type matador { color: red; } @else if $type monster { color: green; } @else { color: black; } }

生成的css如下:

p { color: green; }

2、@for
@for指令用来重复输出一系列的样式,通过一个循环语句,指定一个变量名,一个开始和一个结尾,而后在执行体中写入想要输出的样式格式,sass会自动循环的输出一系列的样式结构。
注:sass的循环 包含 开始和结尾
如:

@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }

生成的css如下:

.item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }

3、@each
@each指令用来遍历一个序列,每次将序列中的一个值设为声明的一个变量,并且进行特定操作,操作完成后,循环到下一个值,直到结束。
如:

@each $animal in dog, cat, bird { .#{$animal}-icon { background-image: url(‘/images/#{$animal}.png’); } }

生成的css如下:

.dog-icon { background-image: url(‘/images/dog.png’); } .cat-icon { background-image: url(‘/images/cat.png’); } .bird-icon { background-image: url(‘/images/bird.png’); }

设想如果有很多重复性的css要生成,sass多么的方便。
4、@while
@while语句首先判断是否满足给定条件,满足条件的情况下重复输出某一样式表达式,直到条件为false为止。
@while是一个比较少用的表达式,通常用来实现@for语句难以实现的复杂循环结构.
如:

$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i – 2; }

生成的css如下:

.item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }

Mixins高级用法

Responsive系列之知识储备 – SASS基础教程中,介绍了Mixins的基础用法,@include以及传递参数。
现在我将介绍一下关于Mixins的更多功能:
1、Mixins的声明内部可以@include其他的Mixins
如:

@mixin compound { @include highlighted-background; @include header-text; } @mixin highlighted-background { background-color: #fc0; } @mixin header-text { font-size: 20px; }

2、Mixins的参数传递功能可以有默认值
如:

@mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue); } h1 { @include sexy-border(blue, 2in); }

生成的css如下:

p { border-color: blue; border-width: 1in; border-style: dashed; } h1 { border-color: blue; border-width: 2in; border-style: dashed; }

3、Mixins同样可以显式声明要传递的参数/也可以叫作关键字传参 (Keyword arguments)
如:

p { @include sexy-border($color: blue); } h1 { @include sexy-border($color: blue, $width: 2in); }

显式传递会让sass代码更加易读,而且在有很多参数的情况下,不用过多的在意参数传递的顺序,建议多用这种方式去传递参数。

4、Mixins也支持不定参数传递
在某些情况下,我们可能无法确定一个Mixins要传递的参数个数,这个时候,我们就可以利用这一特性来传递参数。参数书写规则类似其他语言,在参数变量后加 代表不定参数。
如我们要实现shadow效果,而shadow的参数往往比较多样,无法确定:

@mixin box-shadow($shadows…) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } .shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); }

生成的css如下:

.shadowed { -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; }

5、调用Mixins,也可以用类似不定参数的方法调用。
可以提前声明一个数值List,而后在调用时传入这个List+,sass会自动分配List中的value给每个参数。
如下:

@mixin colors($text, $background, $border) { color: $text; background-color: $background; border-color: $border; } $values: #ff0000, #00ff00, #0000ff; .primary { @include colors($values…);/留意这里/ }

生成的css如下:

.primary { color: #ff0000; background-color: #00ff00; border-color: #0000ff; }

6、如果你想扩展一个已有的Mixins(如:添加某些新的属性),又不希望打破旧的结构,这时新的Mixins可以包装旧的Mixins,并且可以利用不定参数的方式来实现参数传递,是不是听起来略微抽象,没有关系,看个例子就明白了。
假如有个Mixins叫stylish-mixin,我们现在想扩展出一个新的Mixins,让他的字体变为bold

@mixin stylish-mixin($color,$width){ color:$color; font-size:$width; } @mixin wrapped-stylish-mixin($args…) { font-weight: bold; @include stylish-mixin($args…); } .stylish { @include wrapped-stylish-mixin(#eeeeee,$width: 100px); }

生成的css如下:

.stylish { font-weight: bold; color: #eeeeee; font-size: 100px; }

7、传递内容块(content blocks)给Mixins
这个比较抽象,我会从一个例子下手,而后讲解此功能的用法。
首先,我们在此引入一个@指令,即@content,@content表示一个未来要被替换的文本。
看如下scss文件:

@mixin apply-to-ie6-only { * html { @content; /这个@content,表示未来此处会被传递的值重新替换的样式文本/ } } /而后,我们利用@include指令来调用 apply-to-ie6-only mixins/ /但是在调用的时候,我们得考虑到替换@content , 因而我们要使用 @include 的另一种使用方式 ,如下:/ @include apply-to-ie6-only {/*这个代码段内的文本将替换 apply-to-ie6-only中的@content部分 */ #logo { background-image: url(/logo.gif); } }

而后sass在编译后的文本内容其实如下:

@mixin apply-to-ie6-only { * html { #logo { background-image: url(/logo.gif); } } } @include apply-to-ie6-only;

最终生成的 css文件如下:

  • html #logo { background-image: url(/logo.gif); }

这种看似麻烦的方法是用来做什么的呢?
实际上是用来提供抽象接口的,看看这种结构像不像C++中的abstract类(抽象类)。想想C++的抽象类是用来干什么的?

函数指令

sass允许你定义自己的函数。
使用方法:
@function 函数名(参数1,参数2…){
…一些处理语句;
@return 返回的内容;
}
举个例子:

$grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n – 1) * $gutter-width; } #sidebar { width: grid-width(5); }

生成如下css:

sidebar { width: 240px; }

函数跟mixin的传参方法很类似,同样支持关键字传参,如上面的grid-width也可以如下调用:

sidebar { width: grid-width($n: 5); }

同样函数也支持不定参数的传递方式。
注意:为了不发生命名冲突或者为了不使阅读你代码的人误以为函数是sass内部提供的函数,建议在属于你自己的函数上加入前缀,如你在google工作,可以在grid-width前加入google,变成为google-grid-width

下一节,我将补充介绍一些@规则指令,并且介绍一些常用的css格式。
也会补充介绍一些平台下的便利开发工具。

作者:代码家
来源:代码家的博客
你可以订阅我的Blog以获取最新的知识文章。
请尊重版权,转载请注明来源!

SASS系列:
Responsive系列之知识储备 – SASS基础教程
Responsive系列之知识储备 – SASS高阶教程(1)
Responsive系列之知识储备 – SASS高阶教程(2)

这里记载着我常用的一些工具,以及常关注的一些站点。

手头在用的是

一台Nexus 5 16G白色 购于2014年3月29日

一发SanDisk CZ80 16G 3.0 U盘 购于2014年3月18日

一个SAMSUNG 840 Pro 256G SSD 购于2014年3月18日

一台iPhone5s (Gold) 32G 购于2014年2月20日

一台Sony 1R耳机 购于2013年11月

一台华硕VX239H显示器 购于2013年10月

一台N828 购于2013年4月

一台树莓派 购于2012年11月

一台Macbook Pro 15′ (自己更换了16G内存),购于2012年3月

一台IPad2 购于2011年X月

一台G7 购于2010年3月

一台M8 购于2009年10月

一台hp 4411s 购于2009年6月

钟爱的语言: Java , PHP , Python , CSS , Javascript , NodeJs

钟爱的库: JQuery, Laravel, CasperJS, gMap.js, Bootstrap, FlatUI, Ink, JSoup,express….(too much…)

钟爱的平台: Mac >>>>> Windows > Ubuntu

钟爱的技术平台:Android , Web , OS X ,  SASS , Responsive

钟爱的前端开发工具:

钟爱的前端插件:当年的Zen Coding ,  现在的Emmet

钟爱的Android开发工具:

  1. Eclipse
  2. Android Studio

钟爱的Eclipse插件:

  • Color Theme : 集成了很多编辑器主题的插件。

钟爱的浏览器排序:

Chrome (75%) > Firefox (10%) >  Safari (10%) > Opera (5%)

钟爱的浏览器插件:

  • AdBlock : 屏蔽广告用
  • RegExp Tester App : 测试正则表达式
  • Post man : REST Api工具
  • Edit This Cookie : 编辑Cookies工具
  • Evernote , Pocket , Readability :收集知识剪辑,随后再读
  • XMarks : 书签同步服务

钟爱的搜索服务:Only Google

钟爱的问答社区:StackOverFlow

钟爱的Git社区:     GitHub BitBucket

钟爱的GTD服务:WunderList

钟爱的稍后阅读服务: Pocket , Readability

钟爱的科技资讯集中服务: CnBeta , ReadWise , Google Reader(默泪) , Feedly , Reeder

钟爱的壁纸服务:Desktoppr

钟爱的同步服务:Dropbox , 快盘

钟爱的分享服务:Droplr JumpShare ZeoSpace Evernote

钟爱的新技术:Riak,Unqlite,WebRTC ,Sails , Firebase , PeerCDN,Node-Webkit,ejdb , appjspeerkit(不定期更新或者改变…)

期待的小玩意:GitHub Shop的小零碎

SASS 是一 CSS 的预处理标记语言。为CSS加入了如 变量、判断、嵌套、导入等功能。

安装:

第一步:SASS需要Ruby环境

Windows下的安装点此:Ruby Installer

Mac OS 是自带Ruby环境的,所以无需再装

第二步:在命令行下安装SASS

在命令行下执行:

gem install sass

等待片刻就可以装上了。

入门:

1、新建一个style.scss文件

2、输入并且保存

/* style.scss / $width:23px; /此处是sass变量*/ #navbar { height: 80%; width: $width; }

3、在控制台中,cd到所在目录,然后输入

sass –watch style.scss:style.css

输入后,sass会自动监测style.scss文件的变化,并且重新生成style.css。

4、观察在该目录下是否生成了一个style.css文件,并且是否发现width属性被设置成了23px呢?这就是scss的基本操作流程。

语法

一、变量:**

sass允许使用变量,变量以$符号开始,类似属性的声明方式,值可以为颜色,数字(带单位),以及文本,而后以分号结尾。

变量可以使你不用重复去书写一些属性值,而且为修改提供了很大的便利,可以在一处轻松修改整体风格。

例子:

/* style.scss */ $color:#eeeeee; $width:960px; div.header{ width:$width; background-color:$color; }

生成的style.css如下

/* style.css */ div.header{ width:960px; background-color:#eeeeee; }

二、嵌套

在书写css的过程中,经常会利用后代选择器(也叫上下文选择器)

如:想对p元素下的em元素做特殊样式处理,就可以用后代选择器

p{…}

p em{…}

在sass中可以对一书写进行简化。

p{ … em{ … } }

来一个稍微复杂一点儿的例子:

/* style.scss / #navbar { width: 80%; height: 23px; ul { list-style-type: none; } /嵌套样式/ li { /嵌套样式/ float: left; a { font-weight: bold; }/嵌套样式*/ } }

由sass处理后css的如下:

/* style.css / #navbar { width: 80%; height: 23px; } /sass将嵌套元素拆解成后代选择器*/ #navbar ul { list-style-type: none; } #navbar li { float: left; } #navbar li a { font-weight: bold; }

三、父元素简写

常用在伪类中,如 a:hover , li:hover,sass将伪类也添加了嵌套写法。
在嵌套中用符号 & 来指代 父元素。如下例子,&:hover {…} 中 &就指代 父元素 a

/* style.scss / a { color: #ce4dd6; &:hover { color: #ffb3ff; }/嵌套样式/ &:visited { color: #c458cb; }/嵌套样式*/ }

生成的style.css如下

/* style.css */ a { color: #ce4dd6; } a:hover { color: #ffb3ff; } a:visited {color: #c458cb; }

四、融合/代码片段( Mixins )

Mixins 是sass很强大的一个特征,他可以让你重复使用样式,属性,选择器。就类似于代码片段的重复使用。
Mixins 的定义是以 @mixin 声明作为开始,而后给一个调用名称,紧跟可以被融合的代码块片段。
在需要使用这一代码片段的时候,使用 @include 片段名
比如下面的例子,通常我们我们想让css某一部分圆角,就得给某一元素加入以下css

-webkit-border-radius: 20px; border-radius: 20px;

如果想要圆角的部分非常多,就得不断地复制粘贴这一代码片段,而且如果以后想同意修改圆角大小,就得一个一个改,sass就将这一过程简化,提供了更方便的书写,修改起来也变得易如反掌。

/style.scss/ $radius:20px; @mixin rounded{/可以将这个视为一个代码片段/ -webkit-border-radius: $radius; border-radius: $radius; } /比如我想在header上圆角/ div.header{ @include rounded;/引入这一代码片段/ }

产生的css如下:

/比如我想在header上圆角/ div.header { -webkit-border-radius: 20px; border-radius: 20px; }

五、融合/代码片段 传参

sass最强大的地方就是你可以为你的代码片段进行参数传递。
回想刚才的那个rounded代码片段,可能我们不想要全局的设置radius为20px,我们想要在div.footer中设置为10px,在div.header中设置为20px,这个时候传参显得很有意义。并且我们可能还想给border加入一个色彩属性。

如下代码所示:

/style.scss/ @mixin rounded($radius,$border-color){/支持参数传入和参数列表/ -webkit-border-radius: $radius; border-radius: $radius; border-color:$border-color; } div.header{ @include rounded(20px,#ff0000); } div.footer{ @include rounded(10px,#0000ff); }

生成的css如下:

/style.css/ div.header { -webkit-border-radius: 20px; border-radius: 20px; border-color: red; } div.footer { -webkit-border-radius: 10px; border-radius: 10px; border-color: blue; }

六、利用@import来管理mixins片段和变量

如果我们的一个页面的css文件很多,这无疑会浪费一部分时间在http request上。
但是
又如果我们在一个scss文件中写入大量的mixins片段,又使得整个文件结构变得不清晰,想要修改某一部分时,又得找半边天。
这时
将不同的mixins分文件存放,需要哪个载入哪个,这样就实现了分块管理。一旦某部分需要修改,只要找到该文件并且修改即可。
sass利用@import实现了这一功能

用刚才的rounded的例子:
在目录下建立名为 _rounded.scss 文件,写入rounded的mixin:

/_rounded.scss/ @mixin rounded($radius,$border-color){ -webkit-border-radius: $radius; border-radius: $radius; border-color:$border-color; }

/style.scss/ @import “rounded”; div.header{ @include rounded(25px,#ff0000); }

生成的css文件如下:

/style.css/ div.header { -webkit-border-radius: 25px; border-radius: 25px; border-color: red; }

sass对Minis文件命名约定如下:
1、以下划线开始。 如刚才的rounded,如果要以mixins存放,就得以 _rounded.scss 文件名存放。
2、后缀可以是scss或者sass

@import约定如下:
1、无需添加下划线
2、无需加入文件后缀名

例如想要加入rounded的mixin: @import “rounded”;

*七、插值 Interpolation *

变量不仅仅可以用在属性值上,还可以用 #{} 的方式,将变量插入到属性名中。**

/* style.scss */ $vert: top; $horz: left; $radius: 10px; .rounded-#{$vert}-#{$horz} { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius; }

生成的css文件如下:

/* style.scss */ .rounded-top-left { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }

八、操作和函数 (Operations and Functions)

sass支持变量的数学运算,同时也可以调用一些预设的函数方法来实现计算元素大小和动态着色以及处理字符串,条件判断等等。
这个我将会重新开一篇文章详细介绍函数的一些用法和技巧。

以上只是sass的一些基本用法,后续我将继续介绍sass的一些高级用法。你可以订阅我的blog,随时获取更新。

作者:代码家
来源:代码家的博客
你可以订阅我的Blog以获取最新的知识文章。
请尊重版权,转载请注明来源!

SASS系列:
Responsive系列之知识储备 – SASS基础教程
Responsive系列之知识储备 – SASS高阶教程(1)
Responsive系列之知识储备 – SASS高阶教程(2)

一、出身

HTML5

二、使命

HTML5 Web Socket并不是像Ajax那样用来增强传统HTTP协议的功能,而是由w3c带来的全新的改变,尤其适用于在需要实时通信(real-time)和 事件驱动(event-drive)的web程序中。

:扫盲real-time和event-drive

real-time 即时消息,就类似于在线炒股,监控系统(如电厂即时电压,电流稳定性等),这类事务一般都需要实时而且可靠的消息,通常哪怕几秒的延迟都是难以忍受的。

event-drive 事件驱动,就类似于当你按下 Alt+F4 的键盘组合键,浏览器会把这个当成一个关闭事件处理,在web中,就类似于新浪微博的私信提醒一样,有消息到来会通知浏览器弹出消息框。

现在网页通常使用ajax来实现此类架构,浏览器按一定的时间间隔不断请求服务器看有没有新消息到来,服务器不断做查询处理,而后返回相应数据,这是一种单通道式的响应(就好比一条单向公路),即客户浏览器只能通过HTTP协议主动联系服务器而后在建立的一个HTTP链接中服务器做出响应,随后该链接被中断,服务器无法主动联系用户浏览器建立连接做出改变或传递信息。

这样很多情况下,即便传递一个1byte的数据,都需要经过一段复杂的流程(各种协议头包装),而且会使实际的数据包变大很多。HTTP的设计本身就不是Real-time和Full-duplex(全双工)的。

html5 Web Socket就将这条通道打通,能双向的交换信息(全双工),并且减少了数据包大小。

因而优势如下

三、优势

  1. Reducing kilobytes of data to 2 bytes (数据减少到2bytes)
  2. Reducing latency from 150ms to 50ms (延迟从150毫秒减少到50毫秒)

四、Web Socket出现前的尝试方案和解决方案

  1. Polling (轮询):  浏览器按一定间隔发送http请求,服务器做出响应,类ajax。最好的情形就是服务器端新消息到来的间隔是已知的,不然会做出很多无意义的查询或处理行为。
  2. Long-Polling (长轮询):  浏览器发送一个请求给服务器端,服务器端做出响应建立连接,并且保持一段时间的连接(通过阻塞来实现),在这一段时间内,如果服务器端收到与你相关的消息,就会给你发个response回来。如果在这一段时间内没有消息,则会主动断开连接。这个看似解决了问题,但是考虑一下,如果你的消息非常多,而且此时同时使用此服务的其他人消息也非常多,服务器是没法保证能够及时给你发回response,因为后台实现只能通过循环来处理。
  3. Streaming (流): 在介绍这种解决方案之前,先要介绍一下 流 。最长接触到的 流 方式就是在线听歌的方式传递数据。将streaming 封装在 http协议中,浏览器首先请求服务器端,服务器建立连接,并且不再切断该连接,用类似传送音乐的形式远远不断的发送当前消息状态。 这种方式会使得IE永远显示网页未加载完成(不过可以解决)… 而且会加重服务器端的负载,极大的浪费服务器资源。在有防火墙或者代理环境下,防火墙会对数据进行buffering,并且扫描安全性,无疑又增加了延迟。

具体可以看以下链接:

IBM Developer

四、如今有了web socket

  1. 数据头被简化
  2. 数据可双向发送
  3. 文本和二进制帧均可发送,并且最小帧只有2bytes  Note:虽然可以发送2进制数据,但是由于javasccript不支持,所以客户端会忽略此种数据。不过可以在其他支持平台发送。
五、支持情况
IE 10+
Chrome 4+
Safari 5+
Firefox 4+
Opera 11+

更多详细支持情况在[WikiPedia](http://en.wikipedia.org/wiki/WebSocket#Browser_support)上。
六、相关开源库/产品
[SocketIO](http://socket.io/)
– [Sails](https://github.com/balderdashy/sails)
– [Meteor](http://meteor.com/)
– [PeerCDN](http://peercdn.com/)
– [FireBase](https://www.firebase.com/)

一、工具类:

  1. Requests: 一个更简洁、实用的python http库,虽然他是对原生的封装,但是接口更加人性化,个人感觉比用原生更顺手和方便(我一直怀疑是我太蠢学不透原生,经常用着用着出问题)。官方地址
  2. BeautifulSoup: Python下类似jSoup的HTML/XML的解析器。官方文档
  3. python-goose:HTML内容提取库,能提取一个html中,主要的内容、图片、以及一些描述信息。这货还支持去掉停用词(比如的、地、了这些没有借鉴意义的词汇,取消停用词主要用在数据挖掘中、搜索引擎的排序、还有自然语言处理中)。GitHub
  4. python-oauth2:python的oauth认证库。GitHub
  5. pinyin.py: Python汉字转拼音库。GitHub

二、Web框架类:

  1. Flask:Flask 是一个用于 Python 的微型网络开发框架。官方文档
  2. Web.py:同样是一个mini web框架。(感觉是句废话…明明跟上面说的一样…不过说真的,他们之间的差别只有用过才能体会到,而且没有好与坏,只有适不适合自己)。官方文档
  3. django: python下大型web框架,支持ORM,自动创建管理面板,支持模板,支持URL美化,支持Cache等… 据说django以前特别悲催,后来被解救了,然后就大发了,人们把他拍成了一部电影《被解救的django》,同样推荐。

三、跨平台App框架:

kivy: 跨平台开发桌面应用,支持Windows/Linux/Android… 是一个令人振奋人心的项目。官方网址

我是酷爱前后端开发的,擅长PHP,正在努力学习NodeJs。

推崇Responsive和Ajax。使用库和框架的目的就是为了更高效和稳妥。

在这个页面,我为大家推荐一些提高效率的开发库,这里不定期更新或改变…

一、整体框架

前端:

  1. bootstrap: Bootstrap是由twitter主导的一个前端框架项目,也是目前GitHub上Star数最多的项目。个人认为非常适合程序员单枪匹马开发网站,因为bootstrap有很美观的UI,能使开发者全心投入到功能的开发中。而且bootstrap的衍生项目也非常多,从bootstrap主题,到bootstrap组合控件和扩展控件。数以百计的项目,可谓想要的功能应有尽有。后面我也将为大家列出一些主题和扩展组件。  兼容性:IE7及以上,具体 点此。想要Bootstrap兼容IE6?看这个项目 Bootstrap-IE6。另:Bootstrap支持sass,less。 GitHub   Demo
  2. Ink: 名气虽有些抵不过Bootstrap,但质量却极其的高,UI舒适大方,个人觉得还很可爱  ( ´´ิ∀´ิ` ) Ink在UI组件上的便捷度甚至超过了bootstrap,如,Ink提供了可拖拽排序的列表,日期选择器,表格验证,支持分页及排序的table(ajax实现),这些都是在前端开发中很常用的一些功能。如果你厌倦了Bootstrap,不想跟很多类似网站UI重复,那就选用ink吧。 GitHub Demo
  3. kube: 一个很小清新的前端库,简约为主。没有复杂的色彩,主色调黑白,像是我小时候常看的黑白电视。看完前两个后,猛然看这个的Demo,还是会有些不适应的,不过如果想做个极简风格的站点,这个还是不错的,支持IE8+ 以及其他现代浏览器。 GitHub Demo
  4. Almost Flat UI: 扁平化UI前端库,扁平化UI,更像是去掉了阴影,渐变。组件多使用纯色设计,配合上舒适的色彩搭配形成的一种UI设计风格。如下图: GitHub Demo 再给大家推荐一个拥有很多Flat UI设计展示的站点。Fltdsgn.com
  5. Metro-UI:  仿Windows8 metro风格的一整套CSS框架。 Demo GitHub
  6. topcoat: 如果你已经对Bootstrap产生了审美疲劳,那你一定得试试topcoat,带有极简风格的一套css框架。Demo GitHub
Responsive框架:
1. pure: 由Yahoo YUI推出的一款很mini的Responsive框架,YUI出品,当然精品。Demo GitHub

后端:

  1. phpLaravel: Laravel整洁、优雅、强大,是我最爱的一个PHP框架,力荐!查看– MVC模式
  2. IOC支持
  3. ORM支持
  4. 表单验证支持
  5. Redis支持
  6. 加密支持
  7. Yii: Yii也是很强大的一个框架,但是跟Laravel比起来,Laravel是女神,Yii只能说是美女,漂亮却不够优雅,推荐查看
  8. Pagon:拥有大志向的Express Style、奋斗中的一个PHP框架。作者 GitHub

NodeJs:

  • geddy:比较Simple的一个MVC框架。查看
  • express:很强大 查看

二、前端库

  1. JQuery Nested: 很酷很实用的一个无间隙多列布局库,可以实现类似Pinterest或者Responsive布局。Demo GitHub
  2. unveil: Jquery image lazy load (迟加载)库,轻量,用法简单。Demo GitHub

三、网页字体/图标:

  1. Font-Awesome:bootstrap下的图标库,因为是做成了Font格式,所以大小随意缩放和设置。推荐原因:质量极高,设计的很精美!Get Start

注:前端优秀的库太多太多,如果你想看更多,可以点开我的GitHub,看我的star,单选javascript,里面都是我认真关注的每一个优秀的开发库。

四、前端炫技

  1. 纯CSS制作品牌网站Logo GitHub Demo 

你也可以关注我的Gist,我会不定期fork or create片段。

自己一直很喜欢Android开发,就如博客副标题一样,我想做个好的App。

在摸索过程中,GitHub上搜集了很多很棒的Android第三方库,推荐给在苦苦寻找的开发者,而且我会不定期的更新这篇文章。

首先感谢以下盆友对本文的捐助:

  • *文光       2014/4/24
  • *建宏       2014/3/16
  • *洋           2014/6/12

同时,我会更新另一个我前几日(2014/4/21)创办的一个英文Blog,专门收集优质的开发库,希望能帮助更多的开发者,多数时候那个会更新的快一些,欢迎大家捧场,加入收藏夹。

____点击此处到达____

捐助:如果对你有帮助的话,可不可以来一发,5毛1快都可以呀

支付宝 扫一扫右侧二维码即可完成捐助:

Android下的优秀开发库数不胜数,在本文中,我列举的多是开发流程中最常用的一些。如果你还想了解更多的Android开源库,可以查看我的GitHub Star,过滤Java选项,每一个库都是我认真查看或者编译运行的,希望对你产生帮助。

一、兼容类库

  1. ActionBarSherlock : Action Bar是Android 3.0后才开始支持的,ActionBarSherlock是让Action Bar功能支持2.X后的所有平台,而且他会自动的判断是调用原生Action Bar还是使用扩展ActionBar。在我的小熊词典里有用到这个库,而且很多非常知名的App也在使用这个库。GitHub Official ActionBar科普 最新消息(2013年7月):Android官方发布的的Support Library Revision 18 开始支持ActionBar的兼容。所以可以不用再使用ActionBarSherlock了。
  2. Android-ViewPagerIndicator : 这是与ViewPager兼容的一个分页指示器库。分页指示器(Friends 和 Suggested就是分页,而下面蓝色的小条就是指示器,ViewPagerIndicator支持多种样式的指示器。):GitHub
  3. NineOldAndroids  : NineOldAndroids 将 Honeycomb (Android 3.0) 的动画 API 扩展到了Android 1.0以上。这个库的作者即是ActionBarSherlock的作者,也是Android-ViewPagerIndicator的作者,Jake Wharton, *非常厉害的一个人,Github关注量超过1.6K*,如果你也做Android开发或者即将开始学习Android开发,一定要去Follow他,而且留意一下他每次的star和follow信息,经常会有很惊奇的发现。Jake Wharton
  4. HoloEverywhere:在Android 4.0时,Google引入了新的主题风格—Holo,多数厂商都想统一界面设计UI,因此更加具有兼容性的Holo主题库HoloEveryWhere便成为很多开发者的选择。在Android的官方Blog中也对HoloEveryWhere这个库有所推荐,点此查看官方博客对HoloEveryWhere的介绍。HoloEveryWhereGithub
  5. Android-Datepicker: 兼容Android 4.0的datepicker至Android 2.2。 GitHub

二、*扩展功能库*

  1. SlidingMenu : SlidingMenu 能非常容易的让开发者实现程序的抽屉效果,所谓的抽屉效果如下图所示,通常被用作呼出菜单。而且SlidingMenu能很方便的与ActionBarSherlock融合,在官方GitHub上有关于如何融合的说明。 GitHub  同时,想要达到相同功能也可以看另一个Drawer设计:Android-Undergarment
    滑动效果演示
  2. AppMsg : 优雅的弹出类似Toast的消息提示,支持3种状态Alert,Confirm以及Info。GitHub
  3. Drag-Sort-ListView : 很多人都用过在一个ListView中通过拖拽对已有的数据进行排序操作。Drag-Sort-Listview就是实现这一功能的开源库。GitHub
  4. Android-Flip : 轻松实现类似FlipBoard的翻页功能。 GitHub
  5. Android-PullToRefresh : Android下拉刷新组件。 GitHub    此外,该作者还有另外一个实用度和关注量极高的项目–另一种Android ActionBar的实现:GitHub  另:GitHub上另一个Android-PullToRefresh的实现。GitHub
  6. ActionBar-PullToRefresh: 基于ActionBar的下拉刷新组件,在下拉的时候会替换掉ActionBar,显示更新中… GitHub Demo下载
  7. picasso:  程序中经常面临加载网络图片的情况,成熟做法:异步下载->缓存->显示,Picasso一行代码就可这三步轻松完成。GitHub GitHubPage ,GitHub上图片异步加载缓存类库很多,你也可尝试使用Android-Universal-Image-Loader 或者 LazyList 后面将介绍到的afinal(国人项目)也具有此功能。
  8. Card-UI: Google很早之前开始在自家的App内使用卡片式布局,CardUI极其美观大方,想要在自己的App中集成卡片UI布局,那么就轻松地用这个项目吧。GitHub 或者你也可以使用这个库来完成卡片布局。CardLib 另一个卡片式布局: GitHub
  9. Android-DragArea:Android拖拽排序,拖拽移动 库。GitHub (Opera Android浏览器的拖拽排序就是用的这个库)
  10. Android-StaggeredGrid: Android 下类pinterest布局。GitHub
    Android 类 Pinterest 布局

11. FlipImageView: 通过扩展ImageView,实现了ImageView的各种翻转效果。GitHub 体验地址
12. aChartEngine: Android绘制K线图,以及各种丰富功能的图表。Official Site average_temperature
13. SmoothProgressBar:平滑的ProgressBar,各种效果。GitHub 体验地址

各式各样的ProgressBar

14. SuperToasts: 一个愤青对Toast的超强扩展,支持Toast中显示Progressbar,显示图片,显示文等等效果,快去感受下吧!Play GitHub
15. AndroidFloatLabel:Android Textview 浮动提示,效果是类似下图的。GitHub

浮动提示

16. cropper:Android截图和旋转库,轻松实现头像和一些场景下的图片操作。GitHub

Android Cropper

17. StickyGridHeaders:给GridView加上Header。GitHub

GridHeader

18. avatar-android: 一个用来展示头像的库,支持多种展示方式(圆形,方形)。GitHub 下载感受
19. Background-ViewPage:支持背景图同时滑动的ViewPager。感受地址 GitHub
20. pinned-section-listview: 类似Google联系人里的分类列表效果,通过关键字设置不同的分类。GitHub 感受地址
21. DraggablePanel:实现类似Youtube的拖拽缩小,滑动删除效果。GitHub 另一个 原文地址 查看效果图(图片较大)
22. Progress-Button: 支持Progress-bar的Button。GitHub 体验地址
23. GoogleStyle-Datatime-Picker:做的很精致的Google风格的时间选择器。 Play GitHub
24. Caldroid:另一个很棒的Android-Calendar。GitHubCaldroid
25. 有一个很棒的Date Time Number Picker。 GitHub
26. Android-CircleButton:Android圆形按钮。 GitHub
27. FreeFlow: 支持多种展示方式的布局方法。GitHub
28. AsymmetricGridView: 另一个类似FreeFlow的很酷的布局库。GitHub Apk Demo AsymmetricGridView
29. JazzViewPager:提供多种ViewPager的过场动画。 GitHub
30. Photo-Process:Android下给照片加各种滤镜。GitHub  Apk Demo

31. Android-UndoBar: 类似Google Gmail中的Undo bar实现。GitHub 另一个
32. ScrollBarPanelWithClock:类Path侧边滚动条时钟效果。 感受地址
33. activity-animation:一个库,收集Activity animation 动画 GitHub Apk体验
34. shake-detector: android晃动检测。GitHub
35. parallaxlistview:这种视差效果最早是由Path引入的,优美的效果一下抓住了用户的眼球,无聊的时候就会拽啊拽的,Android下也有一个仿Path的第三方库: GitHub Apk体验 Path
36. poppyview: 提供类似Google Plus和Chrome上的下滑浮出View效果。GitHub APK体验地址
android-circlebutton

*  三、工具类库:*

*  *首先,就我个人开发经验,总结一下平常用到的一些最常用的功能:

  1. 必不可少的调试功能
  2. 下载,比如图片,文件。
  3. 将下载的文件进行解压。
  4. 请求服务器,比如说上传登陆信息,更新某些数据,又或者上传头像文件。
  5. 从文件系统中选择要操作的文件(图片,拍照,视频,拍摄视频)。
  6. 有时候也需要爬取某些网页数据。
  7. 存储一些配置信息
  8. 播放视频
  9. 再有一个特殊需求就是关乎Android程序UI设计,图标是个很麻烦的问题。每次都难以找到合适的Android 设计UI。

随后,我将很有针对性的推荐一些功能库,来简化上面的问题。

  1. DebugLog:更加机智的调试功能,能够友好的显示调试信息所在类和函数。GitHub
  2. afinalafinal是一个很方便的工具库。GitHub  作者博客(注:国人项目哟) – 一行代码就可以对数据库进行增删改查。 
  3. 完全注解方式就可以进行UI绑定和事件绑定。无需findViewById和setClickListener等。
  4. 轻松实现Android上传文件,POST数据,下载文件(支持断点续传,随时停止下载任务 或者 开始任务)。
  5. 一行代码加载网络图片。
  6. android-async-http: Android下的异步HTTP库。GitHub   文档  PS:作者的GitHub值得关注。发送异步http请求,并且可在回调函数中处理返回响应Response。
  7. http请求在thread线程,不会阻塞UI线程。
  8. 请求使用线程池(ThreadPool)实现,优化了并发的资源使用。
  9. 支持Multipart 文件上传。
  10. 如果Request请求失败,会自动请求。
  11. 支持Json解码。
  12. 支持存储Cookies到Preference中。
  13. 支持gzip处理Request以及Response。
  14. 整个库只有19KB。
  15. http-requests: Java http请求库,设计的很优雅的一个库,推荐。 GitHub
  16. async-http-client: Android下的异步 Http 和 WebSocket 库。  GitHub– 支持代理设置
  17. 支持分片儿处理请求返回内容
  18. 支持WebSocket
  19. zt-zip: 压缩和解压库。 GitHub– 压缩和解压
  20. 单独操作文件压缩和解压。
  21. 替换zip文件中的某个文件
  22. jarchivelib: 另一个zip的压缩解压库。 GitHub
  23. aFileChooser:文件选择器,用于选择需要操作的文件 GitHub
  24. image-chooser-library: 图片和视频的选择库。 GitHub Demo
  25. jsoup: HTML解析,并且能很好理解DOM,CSS,以及JQuery。GitHub 官方  PS:这是java库。做网页爬虫(Crawler,Robot)必备。
  26. toml:这是个跨语言的配置信息存取方案。GitHub
  27. Androiton-Action-Bar-Icons:一个针对Android 优化过的ICON图标集。 GitHub Demo
  28. 推荐一个Android整体框架:ThinkAndroid 集成了ioc,orm,下载,缓存等模块,能让开发更加快速和高效,同时还是国人项目。GitHub
  29. 如果你想要更快的网络传输和加载速度可以试试OKHTTP,他实现了Google开发的SPDY协议,通过复用一个Socket,缩短网络加载时间。关于SPDY看这里  OKHTTP
  30. Android-ProgressFragment:等待数据的时候,支持显示等待符号的Fragment控件。GitHub
  31. 关于播放视频,不要再去研究什么FFMPEG了,too slow,国人有个非常非常出色的开源项目叫Vitamio,让你播放视频简单如abc。GitHub 官方网站
  32. AndroidCommon:Android常用的一些库和功能,如缓存,下拉列表,下载管理,静默安装等。感谢Trinea GitHub
  33. ion: 让Android的网络操作变得极其简单,支持异步获取和处理JSON,支持Android文件下载(同时支持下载进度条绑定),支持安全链接和代理。超级推荐! GitHub
  34. IcePick: onSaveInstance的辅助类,用于快速恢复Activity状态。GitHub

四、图标资源:

http://iconsparadise.com/ 质量一般,但也是一种选择
http://iconbench.com/ 在线产生一些小图标
http://www.androidicons.com/ 图标质量很不错,但是要付费($25刀),如果有想合买的可以联系我~
https://code.google.com/p/android-ui-utils/  用来在线生成符合Android Design风格的设计图标。 项目地址
http://www.flaticon.com/ 高质量矢量图,推荐之~
http://subtlepatterns.com/ 背景素材集合
Android-Iconify:一个将AweomeICON和Android结合起来的项目,推荐。
IonIconView:Android下的一个基于AwesomeICON的图标组件,力荐~ 

五、一些手册

Android图形界面设计手册,可以用来快速查看图标的大小、ActionBar的Height等琐碎的Android Design要求。GitHub
– Android 官方UI设计手册:下载 另:中文翻译版本 源地址 (需要梯子) 镜像1镜像2镜像3 离线版本打包   项目发起人:SunJW (需要梯子)

七、一些视频(以下均为Google 2013 I/O大会的现场视频,视频较多持续更新中…)

  • Android Studio 的新特性官方讲解视频,我在官方技术博客上下载下来,上传到网盘,希望对大家有帮助。下载地址
  • Android引入Gradle的官方讲解视频 下载地址
  • Google 2013 IO大会上抽出40多分钟时间讲解了Android Custom View的底层原理和书写方法。非常值得一看!下载地址
  • IO大会上还讲解了高性能Android RenderScript的原理和使用方法,搞图形图像必备良品。下载地址
  • 大会上还向开发者讲解了如何实现简洁、快速的网络请求。包括常用的JSON、AsyncTask,还提出了一种网络负荷较重情况下的解决方案RequestQueue(请求队列),提升自己技术必备视频。下载地址
  • Android 蓝牙 操作最佳实践。下载地址
  • Android ui 设计官方指南 下载地址
  • Android游戏开发 官方讲解视频 下载地址

八、高价值链接

  • Android官方博客 提供一些跟Android相关的即时咨询。(需要梯子)
  • Android官方技术博客 主要提供一些新工具(如Android Studio),新技术(如每次更新带来新特性)的演示和讲解。(需要梯子)
  • 23code.com: 超强烈推荐,里面收集了非常多漂亮的Android开源项目。
  • StylingAndroid: 时常介绍Android的新特性。
  • AndroidViews Android View组件收集站点。
  • 那两年炼就的Android内功修养 (这是一篇Android入门到提高的文章,内容很全面,而且由浅入深,强烈推荐,来自老罗的Android之旅)
  • Android-er :专注Android好多年的一个老外的Blog。(需要梯子)
  • Android-Pattern:Android的一些设计模式。
  • Android-Nicetices:博客收录了很多优秀的Android设计样式。
  • Android-Newbie: 收录了Android图像处理相关的教程。
  • MooDroid: 我创办的另一个关于Android 开源库的分享站点。
  • Chris Banes: 很酷!

九、集成其他开发特性(懒人专用)

  • ORM: Object-relationship mapping,如果你不知道什么是ORM设计,Google。 目前Android上主要有三个ORM开源库。greenDAOOrmLiteAndrORM。排序基本代表性能。greenDao和Ormlite性能测试  Ormlite和Androrm性能对比,主要是原理实现决定的性能差异(GreenDao采用生成数据表类文件,其他的则采用了反射…)。如果对数据库性能要求很高,那么采用greenDao,如果想图方便采用OrmLite或者AndrORM。
  • ORM2: ActiveAndroid,另一个Android ORM组件,做的非常棒,推荐。GitHub
  • sprinkles: 有一个ORM组件。 GitHub
  • android-priority-jobqueue:Android Job队列。轻松实现后台task管理,保证代码更清晰,低耦合。GitHub
  • androidquery: 简单的Android框架,让写代码变得更简单。Google Code
  • Android-Templates-And-Utilities: 集合了Android开发中一些常用的工具类和模板以及一些代码片段。GitHub
  • Android key value 引擎: MooDroid

十、专注Android的Blog

  1. http://www.trinea.cn/ 关注Android性能还有一些小细节的,感谢VilenEera推荐。
  2. http://blog.csdn.net/jj120522 解决很多关于Android生产环节的开发细节,感谢star的推荐。
  3. https://github.com/Trinea/android-open-project 由Trinea收集的很多关于Android第三方特征库的Repo。
  4. http://linkyan.com/ 就职于花瓣,专注于Android。

十一、有用的Android Studio 和 Eclipse插件

  1. android-parcelable-intellij-plugin: 快速为类实现Parcelable接口。 GitHub
  2. sdk-manager-plugin: 自动下载和安装缺失的SDK和依赖库,建议所有开源项目集成,使得第三方更加容易编译。GitHub
  3. android_dbinspector:开发过程中经常要看数据库的结构和数据库内容,这个第三方工具就能快速帮助你完成所有数据库校验工作。GitHub
  4. AndroidStudioTemplate:开发过程中,帮助你快速创建一些开发模板。GitHub

十二、从这些项目中学习组件的用法

  1. repay-android : 一个和朋友之间管理账务的App,做的很精致。
  2. Android-GitHub: GitHub官方Android客户端(感谢Liu Chong推荐),用到了以下几个项目: – ActionBarSherlock
  3. ViewPagerIndicator
  4. RoboGuice
  5. android-maven-plugin
  6. CodeMirror

十三、有用文章收集

  1. 提交AAR包到Maven center. Link Link2

文章类型:原创

最后更新时间:2014-06-12

文章标题:Android 开源库

作者:代码家  ,转载请注明出处。

协议:Creative Common

捐助:此渣文如果对你有帮助的话,考虑来一发小额捐助如何!

支付宝 扫一扫右侧二维码即可完成捐助: