Ver código fonte

add the highlight for the epub version

Fengda HUANG 10 anos atrás
pai
commit
312d9273d7

BIN
build/designiot.epub


Diferenças do arquivo suprimidas por serem muito extensas
+ 371 - 369
build/designiot.mobi


BIN
build/iot.pdf


Diferenças do arquivo suprimidas por serem muito extensas
+ 368 - 367
build/pdf.html


Diferenças do arquivo suprimidas por serem muito extensas
+ 368 - 367
index.html


+ 45 - 30
src/1.1.anywhere-html.md

@@ -58,35 +58,42 @@ Hello,world是一个传统,所以在这里也遵循这个有趣的传统,我
 
 ###想用中文?###
 所以我们也可以把计算机语言与现实世界的语言划上一个等号。而我们所要学习的语言,因为没有一门真正意义上的汉语语言,所以我们便觉得这些很复杂,如果我们可以用汉语代换掉上面的代码的话
-
-    <语言>
-    	<头><结束头>
-    	<身体>你好,世界<结束身体>
-    <结束语言>
-    
+```HTML
+<语言>
+	<头><结束头>
+	<身体>你好,世界<结束身体>
+<结束语言>
+```    
 看上去很奇怪,只是因为是音译过去的原因,也许你会觉得这样会好理解一点,但是输入上可能一点儿也不方便,因为这键盘都不适合我们去输入汉字,也意味着可能你输入的会有问题。
 
 让我们把上面的代码代替掉原来的代码然后保存,打开浏览器会看到下面的结果
-
-	<语言> <头><结束头> <身体>你好,世界<结束身体> <结束语言>
+```HTML
+<语言> <头><结束头> <身体>你好,世界<结束身体> <结束语言>
+```
 
 更不幸的结果可能是
 
-    <璇█> <澶�><缁撴潫澶�> <韬綋>浣犲ソ锛屼笘鐣�<缁撴潫韬綋> <缁撴潫璇█>
-    
+```HTML
+<璇█> <澶�><缁撴潫澶�> <韬綋>浣犲ソ锛屼笘鐣�<缁撴潫韬綋> <缁撴潫璇█>
+```
+
 这是一个编码问题,对中文支持不友好。
 
 所以我们把上面的代码改为和标记语言一样的结构
 
-    <语言>
-    	<头></头>
-    	<身体>你好,世界</身体>
-    <结束语言>
-    
+```HTML
+<语言>
+	<头></头>
+	<身体>你好,世界</身体>
+<结束语言>
+```
+
 于是我们看到的结果便是
 
-    <语言> <头> <身体>你好,世界
-    
+```HTML
+<语言> <头> <身体>你好,世界
+```
+
 被chrome浏览器解析成什么样了?
 
 ``` html
@@ -104,12 +111,16 @@ Hello,world是一个传统,所以在这里也遵循这个有趣的传统,我
 
 但是当我们把代码改成
 
-    <whatwewanttosay>你好世界</whatwewanttosay>
-    
+```HTML
+<whatwewanttosay>你好世界</whatwewanttosay>
+```
+
 浏览器上面显示的内容就变成了
 
-    你好世界
-    
+```HTML
+你好世界
+```
+
 或许你会觉得很神奇,但是这一点儿也不神奇,虽然我们的中文语法也遵循着标记语言的标准,但是我们的浏览器不支持中文标记。
     
 结论:
@@ -128,13 +139,15 @@ Hello,world是一个传统,所以在这里也遵循这个有趣的传统,我
 
 添加一个标题,
 
-	<html>
-		<head>
-			<title>标题</title>
-		</head>
-		<body>hello,world</body>
-	</html>
-	
+```HTML
+<html>
+	<head>
+		<title>标题</title>
+	</head>
+	<body>hello,world</body>
+</html>
+```
+
 我们便可以在浏览器的最上方看到“标题”二字,真实世界的淘宝网也包含了上面的东西,只是还包括了更多的东西,所以你也可以看懂那些我们可以看到的淘宝的标题。
 
 ``` html
@@ -160,8 +173,10 @@ hello,world
 ###美妙之处###
 我们简单地上手了一门不算是语言的语言,浏览器简化了这其中的大部分过程,虽然没有C和其他语言来得有专业感,但是我们试着去开始写代码了。我们可能在未来的某一篇中可能会看到类似的语言,诸如python,我们所要做的就是
 
-    $ python file.py
-    =>hello,world
+```bash
+$ python file.py
+=>hello,world
+```
    
 然后在终端上返回结果。只是因为在我看来学会html是有意义的,简单的上手,而后再慢慢地深入,如果一开始我们就开始去理解指针,开始去理解类。我们甚至还知道程序是怎么编译运行的时候,在这个过程中又发生了什么。虽然现在我们也没能理解这其中发生了什么,但是至少展示了
 

+ 15 - 7
src/1.2.anywhere-javascript.md

@@ -183,13 +183,17 @@ printResult(3, 4)
 ###object和函数###
 我们还没有说清楚之前我们遇到过的document.write以及Math.sin的语法看上去很奇怪,所以让我们看看他们到底是什么,修改app.js为以及内容
 
-    document.write(typeof document);
-    document.write(typeof Math);
+``` javascript
+document.write(typeof document);
+document.write(typeof Math);
+```
 
 typeof document会返回document的数据类型,就会发现输出的结果是
 
-    object object
-    
+``` javascript
+object object
+```
+
 所以我们需要去弄清楚什么是object。对象的定义是
 
 <blockquote>无序属性的集合,其属性可以包含基本值、对象或者函数。</blockquote>
@@ -364,12 +368,16 @@ document.write(phodal.country);
 	
 我们需要修改一下helloworld.html添加	
 
-	<p id="para" style="color:red">Red</p>
+```HTML
+<p id="para" style="color:red">Red</p>
+```
 
 同时还需要将script标签移到body下面,如果没有意外的话我们会看到页面上用红色的字体显示Red,修改app.js。
 
-	var para=document.getElementById("para");
-	para.style.color="blue";
+``` javascript
+var para=document.getElementById("para");
+para.style.color="blue";
+```
 	
 接着,字体就变成了蓝色,有了DOM我们就可以对页面进行操作,可以说我们看到的绝大部分的页面效果都是通过DOM操作实现的。
 

+ 133 - 110
src/1.3.anywhere-css.md

@@ -6,21 +6,25 @@ CSS或许你觉得他一点儿也不重要,HTML好比是建筑的框架,CSS
 
 下面就是我们之前说到的代码,css将Red三个字母变成了红色。
 
-	<!DOCTYPE html>
-	<html>
-	<head>
-	</head>
-	<body>
-		<p id="para" style="color:red">Red</p>
-	</body>
-		<script type="text/javascript" src="app.js"></script>
-	</html>
-	
+```HTML
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+	<p id="para" style="color:red">Red</p>
+</body>
+	<script type="text/javascript" src="app.js"></script>
+</html>
+```
+
 只是,
 
-	var para=document.getElementById("para");
-	para.style.color="blue";
-	
+``` javascript
+var para=document.getElementById("para");
+para.style.color="blue";
+```
+
 将字体变成了蓝色,CSS+HTML让页面有序的工作着,但是Javascript打乱了这些秩序,不过却也让生活多姿多彩,小三不都是这样的么——终于可以理解,为什么以前人们对于Javascript没有好感了?不过这里要讲的是正室,也就是CSS,这时还没有Javascript。
 	
 ![Red Fonts](./images/redfonts.png)
@@ -39,117 +43,134 @@ CSS是来自于(Cascading Style Sheets),到今天我也没有记得他的全
 
 对于我们的上面的Red示例来说,如果没有一个好的结构,那么以后可能就是这样子。
 
-	<!DOCTYPE html>
-	<html>
-	<head>
-	</head>
-	<body>
-		<p style="font-size: 22px;color:#f00;text-align: center;padding-left: 20px;">如果没有一个好的结构</p>
-		<p style="	font-size:44px;color:#3ed;text-indent: 2em;padding-left: 2em;">那么以后可能就是这样子。。。。</p>
-	</body>
-	</html>
-	
+```HTML
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+	<p style="font-size: 22px;color:#f00;text-align: center;padding-left: 20px;">如果没有一个好的结构</p>
+	<p style="	font-size:44px;color:#3ed;text-indent: 2em;padding-left: 2em;">那么以后可能就是这样子。。。。</p>
+</body>
+</html>
+```
+
 虽然我们看到的还是一样的:
 	
 ![No Style](./images/nostyle.png)
 
 于是我们就按各种书上的建议重新写了上面的代码
 
-	<!DOCTYPE html>
-	<html>
-	<head>
-		<title>CSS example</title>
-		<style type="text/css">
-			.para{
-				font-size: 22px;
-				color:#f00;
-				text-align: center;
-				padding-left: 20px;
-			}
-			.para2{
-				font-size:44px;
-				color:#3ed;
-				text-indent: 2em;
-				padding-left: 2em;
-			}
-		</style>
-	</head>
-	<body>
-		<p class="para">如果没有一个好的结构</p>
-		<p class="para2">那么以后可能就是这样子。。。。</p>
-	</body>
-	</html>
-	
+```HTML
+<!DOCTYPE html>
+<html>
+<head>
+	<title>CSS example</title>
+	<style type="text/css">
+		.para{
+			font-size: 22px;
+			color:#f00;
+			text-align: center;
+			padding-left: 20px;
+		}
+		.para2{
+			font-size:44px;
+			color:#3ed;
+			text-indent: 2em;
+			padding-left: 2em;
+		}
+	</style>
+</head>
+<body>
+	<p class="para">如果没有一个好的结构</p>
+	<p class="para2">那么以后可能就是这样子。。。。</p>
+</body>
+</html>
+```
+
 总算比上面好看也好理解多了,这只是临时的用法,当文件太大的时候,正式一点的写法应该是下面:
 
-	<!DOCTYPE html>
-	<html>
-	<head>
-		<title>CSS example</title>
-		<style type="text/css" href="style.css"></style>
-	</head>
-	<body>
-		<p class="para">如果没有一个好的结构</p>
-		<p class="para2">那么以后可能就是这样子。。。。</p>
-	</body>
-	</html>
-	
+```HTML
+<!DOCTYPE html>
+<html>
+<head>
+	<title>CSS example</title>
+	<style type="text/css" href="style.css"></style>
+</head>
+<body>
+	<p class="para">如果没有一个好的结构</p>
+	<p class="para2">那么以后可能就是这样子。。。。</p>
+</body>
+</html>
+```
+
 我们需要
-	
-	<!DOCTYPE html>
-	<html>
-	<head>
-		<title>CSS example</title>
-		<link href="./style.css" rel="stylesheet" type="text/css" />
-	</head>
-	<body>
-		<p class="para">如果没有一个好的结构</p>
-		<p class="para2">那么以后可能就是这样子。。。。</p>
-	</body>
-	</html>
+
+```HTML		
+<!DOCTYPE html>
+<html>
+<head>
+	<title>CSS example</title>
+	<link href="./style.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+	<p class="para">如果没有一个好的结构</p>
+	<p class="para2">那么以后可能就是这样子。。。。</p>
+</body>
+</html>
+```
 
 然后我们有一个像app.js一样的style.css放在同目录下,而他的内容便是
 
-	.para{
-		font-size: 22px;
-		color:#f00;
-		text-align: center;
-		padding-left: 20px;
-	}
-	.para2{
-		font-size:44px;
-		color:#3ed;
-		text-indent: 2em;
-		padding-left: 2em;
-	}
-	
+```CSS
+.para{
+	font-size: 22px;
+	color:#f00;
+	text-align: center;
+	padding-left: 20px;
+}
+.para2{
+	font-size:44px;
+	color:#3ed;
+	text-indent: 2em;
+	padding-left: 2em;
+}
+```			
 
 这代码和JS的代码有如此多的相似
 
-	var para={
-		font_size:'22px',
-		color:'#f00',
-		text_align:'center',
-		padding_left:'20px',
-	}
-	
+```javascript
+var para={
+	font_size:'22px',
+	color:'#f00',
+	text_align:'center',
+	padding_left:'20px',
+}
+```
+
 而22px、20px以及#f00都是数值,因此。。
 
-	var para={
-		font_size:22px,
-		color:#f00,
-		text_align:center,
-		padding_left:20px,
-	}	
-	
+```javascript
+var para={
+	font_size:22px,
+	color:#f00,
+	text_align:center,
+	padding_left:20px,
+}	
+```
+
 目测差距已经尽可能的小了,至于这些话题会在以后讨论到,如果要让我们的编译器更正确的工作,那么我们就需要非常多的这种符号,除非你乐意去理解:
 
-	(dotimes (i 4) (print i))
-	
+```lisp
+(dotimes (i 4) (print i))
+```
+
 总的来说我们减少了符号的使用,但是用lisp便带入了更多的括号,不过这是一种简洁的表达方式,也许我们可以在其他语言中看到,或者说用这个去。。
-	
-    \d{2}/[A-Z][a-z][a-z]/\d{4}
-    
+
+```regex	
+\d{2}/[A-Z][a-z][a-z]/\d{4}
+```
+
 没有什么会比一开始不理解那是正则表达式,然后去修改上面的代码,为的是去从一堆数据中找出某日/某月/某年。
 
 这门语言可能是为设计师而设计的,但是设计师大部分还是不懂编程的,不过相对来说还是比其他语言好理解一些。
@@ -157,12 +178,14 @@ CSS是来自于(Cascading Style Sheets),到今天我也没有记得他的全
 ##样式与目标##
 下面也就是我们的样式
 
-	.para{
-		font-size: 22px;
-		color:#f00;
-		text-align: center;
-		padding-left: 20px;
-	}
+```css
+.para{
+	font-size: 22px;
+	color:#f00;
+	text-align: center;
+	padding-left: 20px;
+}
+```
 	
 我们的目标就是
 

+ 99 - 78
src/1.4.anywhere-hjc.md

@@ -25,21 +25,23 @@
 
 多数情况下我们的HTML是类似于下面这样子的
 
-    <div class="col-md-3 right">
-        {% nevercache %}
-        {% include "includes/user_panel.html" %}
-        {% endnevercache %}
-        <div class="panel panel-default">
-        <div class="panel-body">
-        {% block right_panel %}
-        {% ifinstalled mezzanine.twitter %}
-        {% include "twitter/tweets.html" %}
-        {% endifinstalled %}
-        {% endblock %}
-        </div>
-        </div>
+```html
+<div class="col-md-3 right">
+    {% nevercache %}
+    {% include "includes/user_panel.html" %}
+    {% endnevercache %}
+    <div class="panel panel-default">
+    <div class="panel-body">
+    {% block right_panel %}
+    {% ifinstalled mezzanine.twitter %}
+    {% include "twitter/tweets.html" %}
+    {% endifinstalled %}
+    {% endblock %}
     </div>
-    
+    </div>
+</div>
+```
+
 换句话说HTML只是基础,而不是日常用到的。我们的HTML是由template生成的,我们可以借助于mustache.js又或者是angluarjs之类的js库来生成最后的HTML,所以这里只是一个开始。
 
 还需要了解的一部分就是HTML的另外一个重要的部分,DOM树形结构
@@ -52,77 +54,92 @@
 
 在zepto.js下面判断一个值是否是函数的方面如下,
 
-    function isFunction(value) { return type(value) == "function" }
+```javascript
+function isFunction(value) { return type(value) == "function" }
+```
 
 而在jQuery下面则是这样的
 
-	isFunction: function( obj ) {
-		return jQuery.type(obj) === "function";
-	},
-	
+```javascript
+isFunction: function( obj ) {
+	return jQuery.type(obj) === "function";
+}
+```	
+
 而他们的用法是一样的,都是
 
-    $.isFunction();
-    
+```javascript
+$.isFunction();
+```
+
 jQuery的作法是将诸如isFunction,isArray这些函数打包到jQuery.extend中,而zepto.js的则是
 也是这样的,只不过多了一行
 
-    $.isFunction = isFunction
-
+```javascript
+$.isFunction = isFunction
+```
 遗憾的是我也没去了解过为什么,之前我也没有看过这些库的代码,所以这个问题就要交给读者去解决了。jQuery里面提供了函数式编程接口,不过jQuery更多的是构建于CSS选择器之上,对于DOM的操作比javascript自身提供的功能强大得多。如果我们的目的在于更好的编程,那么可能需要诸如Underscore.js之类的库。或许说打包自己常用的函数功能为一个库,诸如jQuery
 
-    function isFunction(value) { return type(value) == "function" }
-    function isWindow(obj)     { return obj != null && obj == obj.window }
-    function isDocument(obj)   { return obj != null && obj.nodeType == obj.DOCUMENT_NODE }
-    function isObject(obj)     { return type(obj) == "object" }
+```javascript
+function isFunction(value) { return type(value) == "function" }
+function isWindow(obj)     { return obj != null && obj == obj.window }
+function isDocument(obj)   { return obj != null && obj.nodeType == obj.DOCUMENT_NODE }
+function isObject(obj)     { return type(obj) == "object" }
+```
 
 我们需要去了解一些故事背后的原因,越来越害怕GUI的原因之一,在于不知道背后发生了什么,即使是开源的,我们也无法了解真正的背后发生什么了。对于不是这个工具、软件的用户来说,开源更多的意义可能在于我们可以添加新的功能,以及免费。如果没有所谓的危机感,以及认为自己一直在学习工具的话,可以试着去打包自己的函数,打包自己的库。
 
-	var calc={
-		add: function(a,b){
-			return a+b;
-		},
-		sub: function(a,b){
-			return a-b;
-		},
-		dif: function(a,b){
-			if(a>b){
-				return a;
-			}else{
-				return b;
-			}
+```javascript
+var calc={
+	add: function(a,b){
+		return a+b;
+	},
+	sub: function(a,b){
+		return a-b;
+	},
+	dif: function(a,b){
+		if(a>b){
+			return a;
+		}else{
+			return b;
 		}
 	}
-	
+}
+```
+
 然后用诸如jslint测试一下代码。
 
-	$ ./jsl -conf jsl.default.conf
-	JavaScript Lint 0.3.0 (JavaScript-C 1.5 2004-09-24)
-	Developed by Matthias Miller (http://www.JavaScriptLint.com)
+```bash
+$ ./jsl -conf jsl.default.conf
+JavaScript Lint 0.3.0 (JavaScript-C 1.5 2004-09-24)
+Developed by Matthias Miller (http://www.JavaScriptLint.com)
+
+app.js
+/Users/fdhuang/beageek/chapter4/src/app.js(15): lint warning: missing semicolon
+	}
+........^
 
-	app.js
-	/Users/fdhuang/beageek/chapter4/src/app.js(15): lint warning: missing semicolon
-		}
-	........^
 
+0 error(s), 1 warning(s)
+```
 
-	0 error(s), 1 warning(s)
-	
 于是我们需要在第15行添加一个分号。
 
 最好的方法还是阅读别人的代码,而所谓的别人指的是一些相对较大的网站的,有好的开发流程,代码质量也不会太差。而所谓的复杂的代码都是一步步构建上去的,罗马不是一天建成的。
 
 有意思的是多数情况下,我们可能会用原型去开发我们的应用,而这也是我们需要去了解和掌握的地方,
 
-	function Calc(){
+```javascript
+function Calc(){
 
-	}
-	Calc.prototype.add=function(a,b){
-		return a+b;
-	};
-	Calc.prototype.sub=function(a,b){
-		return a-b;
-	};
+}
+Calc.prototype.add=function(a,b){
+	return a+b;
+};
+Calc.prototype.sub=function(a,b){
+	return a-b;
+};
+```
 
 我们似乎在这里展示了更多的Javascript的用法,但是这不是一好的关于Javascript的介绍,有一天我们还要用诸如qunit之类的工具去为我们的function写测试,这时就是一个更好的开始。
 
@@ -134,21 +151,23 @@ jQuery的作法是将诸如isFunction,isArray这些函数打包到jQuery.extend
 
 CSS有时候很有趣,但是有时候有很多我们没有意识到的用法,这里以Bootstrap为例,这是一个不错的CSS库。最令人兴奋的是没有闭源的CSS,没有闭源的JS,这也就是前端好学习的地方所在了,不过这是一个开源的CSS库,虽然是这样叫的,但是称之为CSS库显然不合适。
 
-    a,
-    a:visited {
-      text-decoration: underline;
-    }
-    a[href]:after {
-      content: " (" attr(href) ")";
-    }
-    abbr[title]:after {
-      content: " (" attr(title) ")";
-    }
-    a[href^="javascript:"]:after,
-    a[href^="#"]:after {
-      content: "";
-    }
-    
+```css
+a,
+a:visited {
+  text-decoration: underline;
+}
+a[href]:after {
+  content: " (" attr(href) ")";
+}
+abbr[title]:after {
+  content: " (" attr(title) ")";
+}
+a[href^="javascript:"]:after,
+a[href^="#"]:after {
+  content: "";
+}
+```
+
 这里有一些有趣的,值得一讲的CSS用法。
 
 - 伪类选择器,如a:visited这样需要其他条件来对元素应用样式,用于已访问的链接。
@@ -160,11 +179,13 @@ CSS有时候很有趣,但是有时候有很多我们没有意识到的用法
 
 诸如
 
-	* {
-      margin: 0px;
-      padding: 0px;
-      font-family: Helvetica;
-    }
+```css
+* {
+  margin: 0px;
+  padding: 0px;
+  font-family: Helvetica;
+}
+```
 
 这样的通用器用来进行全局选择的工具和我们用于抵消某个body对于子选择器的影响一样值得注意得多。
 

+ 30 - 13
src/1.5.linux.md

@@ -123,13 +123,16 @@ GNU GRUB的前身为Grand Unified Bootloader。它主要用于类Unix系统;
 
 1.下载这个软件的源码包
 
-    wget http://nginx.org/download/nginx-1.7.4.tar.gz
-
-  wget是一个用于下载的软件,当然你也可以用软件,只是用wget似乎会比图形界面快哦。
+```bash
+wget http://nginx.org/download/nginx-1.7.4.tar.gz
+```
+wget是一个用于下载的软件,当然你也可以用软件,只是用wget似乎会比图形界面快哦。
 
 2.解压软件包
 
-    tar -vf nginx-1.7.4.tar.gz
+```bash
+tar -vf nginx-1.7.4.tar.gz
+```
 
   -vf的意思是Extract,也就是解压,而tar则是这个解压软件的名字。看上去似乎比WinRAR来得复制得多,但是你可以计时一下,从下载到解压完,和你用鼠标比哪个比较快。
 
@@ -139,24 +142,32 @@ GNU GRUB的前身为Grand Unified Bootloader。它主要用于类Unix系统;
 
   1).列出所有文件
 
-    ls -al
+```bash
+ls -al
 
-	drwxr-xr-x   15 fdhuang  staff   510B Sep  2 13:44 nginx-1.7.4
-	-rw-r--r--    1 fdhuang  staff   798K Aug  5 21:55 nginx-1.7.4.tar.gz
+drwxr-xr-x   15 fdhuang  staff   510B Sep  2 13:44 nginx-1.7.4
+-rw-r--r--    1 fdhuang  staff   798K Aug  5 21:55 nginx-1.7.4.tar.gz
+```
 
   2).到nginx-1.7.4目录
 
-    cd nginx-1.7.4 
+```bash
+cd nginx-1.7.4 
+```
 
 4.配置nginx
 
  一次简单的配置如下
 
-    ./configure
+```bash
+./configure
+```
 
  当你熟练以后,你可能和我一样用下面的配置(``注意``:用下面的代码会出错。)  
 
-    ./configure --user=www --group=www --add-module=../ngx_pagespeed-1.8.3.4-beta --add-module=../ngx_cache_purge --prefix=/usr/local/nginx --with-pcre --with-http_spdy_module --with-http_ssl_module --with-http_realip_module --with-http_addition_module --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_random_index_module --with-http_secure_link_module --with-http_stub_status_module --with-mail --with-mail_ssl_module --with-ipv6
+```bash
+./configure --user=www --group=www --add-module=../ngx_pagespeed-1.8.3.4-beta --add-module=../ngx_cache_purge --prefix=/usr/local/nginx --with-pcre --with-http_spdy_module --with-http_ssl_module --with-http_realip_module --with-http_addition_module --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_random_index_module --with-http_secure_link_module --with-http_stub_status_module --with-mail --with-mail_ssl_module --with-ipv6
+```
 
    过程中可能会提示你其中出了多少错误,而这时你便可以很愉快地去用搜索引擎搜索他们。
 
@@ -164,19 +175,25 @@ GNU GRUB的前身为Grand Unified Bootloader。它主要用于类Unix系统;
 
   这里就会用到GCC等等。
 
-    make
+```bash
+make
+```
 
 6.运行
 
   如果运行顺利的话,应该可以直接
 
-    ./objs/nginx   
+```bash
+./objs/nginx   
+```
 
 ###其他
 
 1.如果没有wget,make,gcc等命令的时候可以用类似于下面的方法安装,
 
-    sudo apt-get install gcc,make,wget
+```bash
+sudo apt-get install gcc,make,wget
+```
 
 2.正常情况下一个开源项目都会有一个README,会告诉你应该如何去做。
 

+ 40 - 34
src/1.6.arduino.md

@@ -22,13 +22,15 @@ Arduino的出现很大程度上降低了电子制作的难度,初学者甚至
 
 开发环境如上图,十分简洁,编写代码需要知道两个基本的函数:
 
-    void setup(){
-    
-    }
-    
-    void loop(){
-    
-    }
+```cpp
+void setup(){
+
+}
+
+void loop(){
+
+}
+```
     
 "setup()"函数用于初始化(如GPIO初始化,串口初始化,定时器初始化等)特点是只执行一次;"loop()"函数是一个死循环,可以看做C语言的"while(1)"函数。
 
@@ -42,19 +44,21 @@ Arduino的出现很大程度上降低了电子制作的难度,初学者甚至
 
 上一段代码分析:
 
-    int led=13; 
-
-    void setup()
-    {
-        pinMode(led,OUTPUT);
-    }
-    void loop()
-    {
-        digitalWrite(led,HIGH);
-        delay(1000);
-        digitalWrite(led,LOW);
-        delay(1000);
-    }
+```cpp
+int led=13; 
+
+void setup()
+{
+    pinMode(led,OUTPUT);
+}
+void loop()
+{
+    digitalWrite(led,HIGH);
+    delay(1000);
+    digitalWrite(led,LOW);
+    delay(1000);
+}
+```
 
 该程序实现Arduino单片机13号引脚以1S时间电平翻转,如果外接一个led,就可以看到led以1S的间隔闪烁;函数"pinMode()"有两个参数pin、value,pin参数用来指定引脚号,本程序中设置为13号引脚,mode用于设置引脚模式,有三个值:
 
@@ -84,24 +88,26 @@ Arduino的出现很大程度上降低了电子制作的难度,初学者甚至
 
 在此项目中需要使用串口,Arduino串口初始化使用"Serial.begin(9600);",其传输波特率为9600,其他波特率也行,函数位于"setup()"中,之后可以使用"Serial.read()"、"Serial.write()"读入一个字符,输出一个字符,使用"Serial.print()"输出字符串.代码如下:
 
-    char ch='1';
-    void setup()
+```cpp
+char ch='1';
+void setup()
+{
+    Serial.begin(9600);
+}
+void loop()
+{
+    Serial.write(ch);
+    while(1)
     {
-        Serial.begin(9600);
-    }
-    void loop()
-    {
-        Serial.write(ch);
-        while(1)
+        if(Serial.available())    
         {
-            if(Serial.available())    
-            {
-                ch = Serial.read();
-                Serial.print(ch);
-            }
+            ch = Serial.read();
+            Serial.print(ch);
         }
     }
-    
+}
+```
+
 以上程序实现字符的输出(Serial.write(),Serial.print())和读入(Serial.read())。如果需要了解更多,可以参考:[Arduino官网](www.arduino.cc)
 
 

+ 55 - 43
src/1.7.python.md

@@ -13,47 +13,57 @@
 ##代码与散文##
 你可能听过,也可能了解过,不过在这里我们可能不会去讲述那些基础的语法的东西,我们想说的是代码格式的重要性,在html中你可以这样去写你的代码
 
-	<html><head><title>This is a Title
-	</title></head><body><div class="content">
-	<p>flakjfaklfjalfa</p></div>
-	</body></html>
-	
+```html
+<html><head><title>This is a Title
+</title></head><body><div class="content">
+<p>flakjfaklfjalfa</p></div>
+</body></html>
+```
+
 又或者是js的minify,它可能会使你的代码看起来像是这样的:
 
-	function NolTracker(b,a){this.pvar=b;this.mergeFeatures(a)}
-	
+```javascript
+function NolTracker(b,a){this.pvar=b;this.mergeFeatures(a)}
+```	
+
 可能的是如果是python的话,你可能会遇到下面的问题。。
 
-    File "steps.py", line 10
-       try:
-       ^
-    IndentationError: expected an indented block
-    
+```bash
+File "steps.py", line 10
+   try:
+   ^
+IndentationError: expected an indented block
+```
+
 如果你对JSLint、Lint这类的工具有点印象的话,你也可以认为python集成了这类工具。整洁的代码至少应该看上去要有整洁的衣服,就好像是我们看到的一个人一样,而后我们才会有一个好的印象。更主要的一点是代码是写给人看的,而衣服更多的时候对于像我这样的人来说,他首先应该是要保暖的,其次对于一个懒的人来说。。。
 
 <blockquote>程序应该是具有可读性的短文,它将在计算机上执行,从而解决某些问题</blockquote>
 
 我们需要去读懂别人的代码,别人也需要去读懂我们的代码。计算机可以无条件地执行你那未经编排过的程序,但是人就不是如此了。
 
+```javascript
 	var calc={add: function(a,b){return a+b;},sub: function(a,b){return a-b;},dif: function(a,b){if(a>b){return a;}else{return b;}}}
-	
+```
+
 上面的代码相对于下面的代码可读性没有那么多,但是计算机可以无条件地执行上面的代码。上面的代码对于网络传输来说是好的,但是对于人来说并不是如此,我们需要一些工具来辅助我们去读懂上面的代码。如果代码上写得没有一点可读性,诸如函数命名没有多少实际意义,如果我们把前面的函数就成这样:
 
-	var c={
-		a: function(a,b){
-			return a+b;
-		},
-		s: function(a,b){
-			return a-b;
-		},
-		d: function(a,b){
-			if(a>b){
-				return a;
-			}else{
-				return b;
-			}
+```javascript
+var c={
+	a: function(a,b){
+		return a+b;
+	},
+	s: function(a,b){
+		return a-b;
+	},
+	d: function(a,b){
+		if(a>b){
+			return a;
+		}else{
+			return b;
 		}
 	}
+}
+```
 
 那么只有在我们理解了这个函数是干什么之后才能理解函数是干什么,而不是光看函数名就可以了。
 
@@ -63,23 +73,25 @@
 
 可读性的代码在今天显得比以前重要的多,以前写程序的时候我们需要去考虑使用汇编或者其他工具来提高程序的效率。
 
-                .global _start
-
-                .text
-        _start:
-                # write(1, message, 13)
-                mov     $1, %rax                # system call 1 is write
-                mov     $1, %rdi                # file handle 1 is stdout
-                mov     $message, %rsi          # address of string to output
-                mov     $13, %rdx               # number of bytes
-                syscall                         # invoke operating system to do the write
-
-                # exit(0)
-                mov     $60, %rax               # system call 60 is exit
-                xor     %rdi, %rdi              # we want return code 0
-                syscall                         # invoke operating system to exit
-        message:
-                .ascii  "Hello, world\n"
+```
+        .global _start
+
+        .text
+_start:
+        # write(1, message, 13)
+        mov     $1, %rax                # system call 1 is write
+        mov     $1, %rdi                # file handle 1 is stdout
+        mov     $message, %rsi          # address of string to output
+        mov     $13, %rdx               # number of bytes
+        syscall                         # invoke operating system to do the write
+
+        # exit(0)
+        mov     $60, %rax               # system call 60 is exit
+        xor     %rdi, %rdi              # we want return code 0
+        syscall                         # invoke operating system to exit
+message:
+        .ascii  "Hello, world\n"
+```
 
 所以上面的代码的可读性在今天新生一代的程序员来说可能没有那么容易理解。芯片运行的速度越来越快,在程序上我们也需要一个越来越快的解决方案,而所谓的越来越快的解决方案指的不是运行速度上,而是开发速度上。如果你没有办法在同样时间内开发出更好的程序,那么你就可能输给你的竞争对手。
 

+ 68 - 49
src/2.1.http.md

@@ -81,27 +81,33 @@ Internet有两个核心协议: IP和TCP,这样讲述起来似乎会很漫长
 
 我们在浏览器上看到的结果是
 
-	[
-	  {
-	    "id": 1,
-	    "temperature": 19,
-	    "sensors1": 31,
-	    "sensors2": 7.5,
-	    "led1": 0
-	  }
-	]
+```javascript
+[
+  {
+    "id": 1,
+    "temperature": 19,
+    "sensors1": 31,
+    "sensors2": 7.5,
+    "led1": 0
+  }
+]
+```
 
 只是我们看到的是结果,忽略了这其中的过程,于是我们用curl[^curl]命令来看看详细的情况。
 
-    curl -I -s http://b.phodal.com/athome/1.json
-    
+```bash
+curl -I -s http://b.phodal.com/athome/1.json
+```
+
 出于某种原因考虑,删去了其中一些元素,剩下下面这些。
 
-	HTTP/1.1 200 OK
-	Content-Type: application/json
-	Date: Fri, 05 Sep 2014 15:05:49 GMT
-	
-	[{"id":1,"temperature":19,"sensors1":31,"sensors2":7.5,"led1":0}]
+```bash
+HTTP/1.1 200 OK
+Content-Type: application/json
+Date: Fri, 05 Sep 2014 15:05:49 GMT
+
+[{"id":1,"temperature":19,"sensors1":31,"sensors2":7.5,"led1":0}]
+```
 
 我们用curl命令向服务器发起了GET请求,服务器返回了上面的结果。
 
@@ -117,15 +123,19 @@ Internet有两个核心协议: IP和TCP,这样讲述起来似乎会很漫长
 
 在上面的结果中,状态行是
 
-	HTTP/1.1 200 OK
-	
+```bash
+HTTP/1.1 200 OK
+```
+
 返回的状态码是200,OK是状态码的原因短语。
 
 如果是一个跳转的页面,它就可能是下面的结果:
 
-	HTTP/1.0 301 MOVED PERMANENTLY
-	Date: Mon, 08 Sep 2014 12:04:01 GMT
-	Content-Type: text/html; charset=utf-8	
+```bash
+HTTP/1.0 301 MOVED PERMANENTLY
+Date: Mon, 08 Sep 2014 12:04:01 GMT
+Content-Type: text/html; charset=utf-8	
+```
 
 HTTP Status有五种状态,而这五种状态又有所细分,提一下这五种状态,详细可参见[http://zh.wikipedia.org/wiki/HTTP%E7%8A%B6%E6%80%81%E7%A0%81](http://zh.wikipedia.org/wiki/HTTP%E7%8A%B6%E6%80%81%E7%A0%81)
 
@@ -139,49 +149,58 @@ HTTP Status有五种状态,而这五种状态又有所细分,提一下这五
 
 在这次响应中,返回了两个报头,即
 
-	Content-Type: application/json
-	Date: Fri, 05 Sep 2014 15:05:49 GMT
+```bash
+Content-Type: application/json
+Date: Fri, 05 Sep 2014 15:05:49 GMT
+```
 
 Content-Type和Date,在这里的Context-Type是application/json,而通常情况下我们打开一个网站时,他的Content-Type应该是text/html。
 
-    Content-Type: text/html;
-    
+```bash
+Content-Type: text/html;
+```
+
 Content-Type是最重要的报头。
 
 ####HTTP响应 响应正文
 
 正文才是我们真正想要的内容,上面的都是写给浏览器看的,一般的人不会去关注这些。
 
-	[{"id":1,"temperature":19,"sensors1":31,"sensors2":7.5,"led1":0}]
+```javascript
+[{"id":1,"temperature":19,"sensors1":31,"sensors2":7.5,"led1":0}]
+```
 
 通常这是以某种格式写的,在这里是以JSON写的,而对于一个网站的时候则是HTML,如:
 
-	<html>
-	<head>
-		<meta charset="UTF-8">
-		<title>Document</title>
-	</head>
-	<body>
-		
-	</body>
-	</html>		
+```html
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>Document</title>
+</head>
+<body>
+	
+</body>
+</html>		
+```
 
 那么这次GET请求返回的就是:
 
-
-	HTTP/1.0 200 OK
-	Date: Mon, 08 Sep 2014 12:04:01 GMT
-	Content-Type: text/html; charset=utf-8	
-
-	<html>
-	<head>
-		<meta charset="UTF-8">
-		<title>Document</title>
-	</head>
-	<body>
-		[{"id":1,"temperature":19,"sensors1":31,"sensors2":7.5,"led1":0}]		
-	</body>
-	</html>	
+```bash
+HTTP/1.0 200 OK
+Date: Mon, 08 Sep 2014 12:04:01 GMT
+Content-Type: text/html; charset=utf-8	
+
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>Document</title>
+</head>
+<body>
+	[{"id":1,"temperature":19,"sensors1":31,"sensors2":7.5,"led1":0}]		
+</body>
+</html>	
+```
 
 虽然与第一次请求的结果在游览器上看似乎是一样的(ps:可能有微小的差异),然而其本质是不同的。
 

+ 363 - 319
src/2.3.create_restful.md

@@ -59,58 +59,75 @@ ps: 在下文中我会继续用MySQL,而不是MariaDB,MairaDB是MySQL的一
 
 Ubuntu/Debian/Mint
 
-    $ sudo apt-get install mariadb-server
+```bash
+$ sudo apt-get install mariadb-server
+```
 
 Fedora/Centos
 
-    $ sudo yum install mariadb-server    
+```bash    
+$ sudo yum install mariadb-server    
+```
 
 openSUSE
 
-    $ sudo zypper install mariadb-server
+```bash
+$ sudo zypper install mariadb-server
+```
 
 Mac OS    
- 
-     $ brew install mariadb
+
+```bash 
+$ brew install mariadb
+```
 
 ###配置MySQL
 
 修改database.php
 
-    app/config/database.php
+```bash
+app/config/database.php
+```
 
 要修改的就是这个
 
-	'mysql' => array(
-        'driver'    => 'mysql',
-        'host'      => 'localhost',
-        'database'  => 'iot',
-        'username'  => 'root',
-        'password'  => '940217',
-        'charset'   => 'utf8',
-        'collation' => 'utf8_unicode_ci',
-        'prefix'    => '',
-    ),
+```php
+'mysql' => array(
+    'driver'    => 'mysql',
+    'host'      => 'localhost',
+    'database'  => 'iot',
+    'username'  => 'root',
+    'password'  => '940217',
+    'charset'   => 'utf8',
+    'collation' => 'utf8_unicode_ci',
+    'prefix'    => '',
+),
+```
 
 如果你已经有phpmyadmin,似乎对你来说已经很简单了,如果没有的话,就直接用
 
-    $ mysql -uroot -p
-
+```bash
+$ mysql -uroot -p
+```    
 来创建一个新的
 
-	CREATE DATABASE IF NOT EXISTS iot default charset utf8 COLLATE utf8_general_ci;
+```sql
+CREATE DATABASE IF NOT EXISTS iot default charset utf8 COLLATE utf8_general_ci;
+```
 
 [composer]: https://getcomposer.org/Composer-Setup.exe
 
 数据库的目的在于存储数据等等的闲话这里就不多说了,创建一个RESTful的目的在于产生下面的JSON格式数据,以便于我们在Android、Java、Python、jQuery等语言框架或者平台上可以调用,最主要的是可以直接用Ajax来产生更炫目的效果。
 
-    {
-    "id": 1,
-    "temperature": 14,
-    "sensors1": 12,
-    "sensors2": 12,
-    "led1": 0
-    }
+```javascript
+{
+"id": 1,
+"temperature": 14,
+"sensors1": 12,
+"sensors2": 12,
+"led1": 0
+}
+```
 
 ##数据库迁移
 
@@ -121,34 +138,38 @@ Mac OS
 表的概念,类似于在Excel中的表,如果你真实不懂数据库。
 让我们创建一个athomes的表,为什么是athomes,因为以前在写android程序的时候就叫的是athome,忽略掉这些次要的因素吧。
 
-    $ php artisan migrate:make create_athomes_table
+```bash
+$ php artisan migrate:make create_athomes_table
+```
 
 打开 app/database/migrations/***create_athomes_table.php这里的***是由日期和某些东西组成的,修改生成的代码为下面。
 
-    use Illuminate\Database\Schema\Blueprint;  
-    use Illuminate\Database\Migrations\Migration;  
+```php
+use Illuminate\Database\Schema\Blueprint;  
+use Illuminate\Database\Migrations\Migration;  
 
-    class CreateAthomesTable extends Migration {  
+class CreateAthomesTable extends Migration {  
 
-        public function up()  
-        {  
-            Schema::create('athomes', function(Blueprint $table)  
-            {  
-                $table--->increments('id');  
-                $table->float('temperature');  
-                $table->float('sensors1');  
-                $table->float('sensors2');  
-                $table->boolean('led1');  
-                $table->timestamps();  
-            });  
-        }  
-
-        public function down()  
+    public function up()  
+    {  
+        Schema::create('athomes', function(Blueprint $table)  
         {  
-            Schema::drop('athomes');  
-        }  
-
-    }
+            $table--->increments('id');  
+            $table->float('temperature');  
+            $table->float('sensors1');  
+            $table->float('sensors2');  
+            $table->boolean('led1');  
+            $table->timestamps();  
+        });  
+    }  
+
+    public function down()  
+    {  
+        Schema::drop('athomes');  
+    }  
+
+}
+```
 
 意思大致就是id是自加的,也就是我们在localhost/athome/{id},当我们创建一个新的数据的时候,会自动加上去,最后一个timestamps批的是时间,会包含创建时间和修改时间。
 剩下的temperature,sensors1,sensors2是小数,以及只有真和假的led1。
@@ -157,14 +178,20 @@ Mac OS
 
 我们只是写了我们需要的数据的格式而并没有丢到数据库里,
 
-    $ php artisan migrate
+```bash
+$ php artisan migrate
+```
 
 这个就是我们执行迁移的命令,如果你用phpmyadmin可以直接打开查看,没有的话,可以。
 
+```bash
     $ mysql -uroot -p
+```
 
-    use iot;
-    select * from athomes;
+```sql
+use iot;
+select * from athomes;
+```
 
 就可以看到我们写的东西,那么接下来就是创建RESTful服务了
 
@@ -173,41 +200,45 @@ Mac OS
 
 用下面的代码实现我们称之为Athomes控制器的创建
 
-    $ php artisan controller:make AthomesController  
+```bash
+$ php artisan controller:make AthomesController  
+```
 
 就会在app/controllers下面生成下面的代码
 
-    class AthomesController extends \BaseController {  
+```php
+class AthomesController extends \BaseController {  
 
-        public function index()  
-        {  
-        }  
+    public function index()  
+    {  
+    }  
 
-        public function create()  
-        {  
-        }  
+    public function create()  
+    {  
+    }  
 
-        public function store()  
-        {  
-        }  
-  
-        public function show($id)  
-        {  
-        }  
-  
-        public function edit($id)  
-        {  
-        }  
-  
-        public function update($id)  
-        {  
-        }  
-  
-        public function destroy($id)  
-        {  
-        }  
+    public function store()  
+    {  
+    }  
 
-    }
+    public function show($id)  
+    {  
+    }  
+
+    public function edit($id)  
+    {  
+    }  
+
+    public function update($id)  
+    {  
+    }  
+
+    public function destroy($id)  
+    {  
+    }  
+
+}
+```
 
 ##Laravel Resources
 
@@ -226,148 +257,151 @@ DELETE | /resource/{resource}   | destroy | resource.destroy
 所以我们只需要专注于创建 create, edit, show, destory 等等。好吧,你可能没有耐心了,但是在修改这个之前我们需要先在 
 app/model 加个 class
 
-    class Athomes extends Eloquent {  
-        protected $table = 'athomes';  
-    }
+```php
+class Athomes extends Eloquent {  
+    protected $table = 'athomes';  
+}
+```
 
 如果你想要的只是控制器Athomes的代码的话。。
 
+```php
+class AthomesController extends \BaseController {
 
-    class AthomesController extends \BaseController {
-
-        public $restful=true;
-
-        protected $athome;
-
-    	public function __construct(Athomes $athome)
-    	{
-    	    $this--->athome = $athome ;
-    	 }
-
-    	public function index()
-    	{
-    		$maxid=Athomes::all();
-    	    return Response::json($maxid);
-    	}
-
-    	public function create()
-    	{
-    		$maxid=Athomes::max('id');
-    		return View::make('athome.create')->with('maxid',$maxid);
-    	}
-
-    	public function store()
-    	{
-
-    		$rules = array(
-    			'led1'=>'required',
-    			'sensors1' => 'required|numeric|Min:-50|Max:80',
-    			'sensors2' => 'required|numeric|Min:-50|Max:80',
-    			'temperature' => 'required|numeric|Min:-50|Max:80'
-    		);
-    		$validator = Validator::make(Input::all(), $rules);
-
-    		if ($validator->fails()) {
-    			return Redirect::to('athome/create')
-    				->withErrors($validator)
-    				->withInput(Input::except('password'));
-    		} else {
-    			$nerd = new Athomes;
-    			$nerd->sensors1       = Input::get('sensors1');
-    			$nerd->sensors2       = Input::get('sensors2');
-    			$nerd->temperature    = Input::get('temperature');
-    			$nerd->led1			  = Input::get('led1');
-    			$nerd->save();
-
-    			Session::flash('message', 'Successfully created athome!');
-    			return Redirect::to('athome');
-    		}
-    	}
-
-    	public function show($id)
-    	{
-    		$myid=Athomes::find($id);
-            $maxid=Athomes::where('id','=',$id)
-    						->select('id','temperature','sensors1','sensors2','led1')
-    						->get();
-    	    return Response::json($maxid);
-    	}
-
-    	public function edit($id)
-    	{
-    		$athome = Athomes::find($id);
-
-    		return View::make('athome.edit')
-    			->with('athome', $athome);
-    	}
-
-    	public function update($id)
-    	{
-
-    		$rules = array(
-    			'led1'=>'required|',
-    			'sensors1' => 'required|numeric|Min:-50|Max:80',
-    			'sensors2' => 'required|numeric|Min:-50|Max:80',
-    			'temperature' => 'required|numeric|Min:-50|Max:80'
-    		);
-    		$validator = Validator::make(Input::all(), $rules);
-
-    		if ($validator->fails()) {
-    			return Redirect::to('athome/' . $id . '/edit')
-    				->withErrors($validator);
-    		} else {
-    			$nerd = Athomes::find($id);
-    			$nerd->sensors1       = Input::get('sensors1');
-    			$nerd->sensors2       = Input::get('sensors2');
-    			$nerd->temperature    = Input::get('temperature');
-    			$nerd->led1			  = Input::get('led1');
-    			$nerd->save();
-
-    			Session::flash('message', 'Successfully created athome!');
-    			return Redirect::to('athome');
-    		}
-    	}
-
-    	public function destroy($id)
-    	{
-
-    		$athome = Athomes::find($id);
-    		$athome->delete();
-            if(is_null($athome))
-            {
-                 return Response::json('Todo not found', 404);
-            }
-
-    		Session::flash('message', 'Successfully deleted the nerd!');
-    		return Redirect::to('athome');
-    	}
+    public $restful=true;
 
-    }
+    protected $athome;
 
-希望你能读懂,没有的话,关注下一节。
+	public function __construct(Athomes $athome)
+	{
+	    $this--->athome = $athome ;
+	 }
+
+	public function index()
+	{
+		$maxid=Athomes::all();
+	    return Response::json($maxid);
+	}
+
+	public function create()
+	{
+		$maxid=Athomes::max('id');
+		return View::make('athome.create')->with('maxid',$maxid);
+	}
+
+	public function store()
+	{
+
+		$rules = array(
+			'led1'=>'required',
+			'sensors1' => 'required|numeric|Min:-50|Max:80',
+			'sensors2' => 'required|numeric|Min:-50|Max:80',
+			'temperature' => 'required|numeric|Min:-50|Max:80'
+		);
+		$validator = Validator::make(Input::all(), $rules);
+
+		if ($validator->fails()) {
+			return Redirect::to('athome/create')
+				->withErrors($validator)
+				->withInput(Input::except('password'));
+		} else {
+			$nerd = new Athomes;
+			$nerd->sensors1       = Input::get('sensors1');
+			$nerd->sensors2       = Input::get('sensors2');
+			$nerd->temperature    = Input::get('temperature');
+			$nerd->led1			  = Input::get('led1');
+			$nerd->save();
+
+			Session::flash('message', 'Successfully created athome!');
+			return Redirect::to('athome');
+		}
+	}
+
+	public function show($id)
+	{
+		$myid=Athomes::find($id);
+        $maxid=Athomes::where('id','=',$id)
+						->select('id','temperature','sensors1','sensors2','led1')
+						->get();
+	    return Response::json($maxid);
+	}
+
+	public function edit($id)
+	{
+		$athome = Athomes::find($id);
+
+		return View::make('athome.edit')
+			->with('athome', $athome);
+	}
+
+	public function update($id)
+	{
+
+		$rules = array(
+			'led1'=>'required|',
+			'sensors1' => 'required|numeric|Min:-50|Max:80',
+			'sensors2' => 'required|numeric|Min:-50|Max:80',
+			'temperature' => 'required|numeric|Min:-50|Max:80'
+		);
+		$validator = Validator::make(Input::all(), $rules);
+
+		if ($validator->fails()) {
+			return Redirect::to('athome/' . $id . '/edit')
+				->withErrors($validator);
+		} else {
+			$nerd = Athomes::find($id);
+			$nerd->sensors1       = Input::get('sensors1');
+			$nerd->sensors2       = Input::get('sensors2');
+			$nerd->temperature    = Input::get('temperature');
+			$nerd->led1			  = Input::get('led1');
+			$nerd->save();
+
+			Session::flash('message', 'Successfully created athome!');
+			return Redirect::to('athome');
+		}
+	}
+
+	public function destroy($id)
+	{
+
+		$athome = Athomes::find($id);
+		$athome->delete();
+        if(is_null($athome))
+        {
+             return Response::json('Todo not found', 404);
+        }
+
+		Session::flash('message', 'Successfully deleted the nerd!');
+		return Redirect::to('athome');
+	}
+
+}
+```
+
+希望你能读懂,没有的话,继续。
 
 下面这部分来自于之前的博客,这里就不多加论述了。
 这个也就是我们要的模板,
 
 ###修改Create()
 
-<pre><code class="php">
-	public function create()
-	{
-	    $maxid=Athomes::max('id');
-	    return View::make('athome.create')->with('maxid',$maxid);
-	}
-</code></pre>
+```php
+public function create()
+{
+    $maxid=Athomes::max('id');
+    return View::make('athome.create')->with('maxid',$maxid);
+}
+```
 
 
 这里需要在app/views/创建一个athome里面创建一个create.blade.php,至于maxid,暂时还不需要,后面会用到show。如果只需要模板,可以简化为
 
-<pre><code class="php">
-	public function create()
-    {
-        return View::make('athome.create');
-    }
-</code></pre>
+```php
+public function create()
+{
+    return View::make('athome.create');
+}
+```
 
  这里只是对其中代码的进行一下说明。
 
@@ -377,53 +411,58 @@ app/model 加个 class
 
 由于使用到了bootstrap以及bootstrap-select,记得添加css。
 
-	<link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap.min.css') ?>" />
-	<link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap-select.min.css') ?>" />
+```html
+<link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap.min.css') ?>" />
+<link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap-select.min.css') ?>" />
+```
 
  以及javascript
 
-	<script type="text/javascript" src="<?= url('js/jquery.min.js')?>"></script>
-	<script type="text/javascript" src="<?= url('js/bootstrap.min.js') ?>"></script>
-	<script type="text/javascript" src="<?= url('js/bootstrap-select.min.js') ?>"></script>
-	<script>
-	$('.selectpicker').selectpicker();
-	</script>
-
+```html
+<script type="text/javascript" src="<?= url('js/jquery.min.js')?>"></script>
+<script type="text/javascript" src="<?= url('js/bootstrap.min.js') ?>"></script>
+<script type="text/javascript" src="<?= url('js/bootstrap-select.min.js') ?>"></script>
+<script>
+$('.selectpicker').selectpicker();
+</script>
+```
 
 ####创建表单
 
 这里用到的是之前提到的那个作者写下的,稍微修改了一下。
 
-    <div class="row-fluid">
-      {{ HTML::ul($errors->all()) }}
-      {{ Form::open(array('url' => 'athome')) }}
+```html
+<div class="row-fluid">
+  {{ HTML::ul($errors->all()) }}
+  {{ Form::open(array('url' => 'athome')) }}
 
-         <div class="form-group">
-              {{ Form::label('led1', '开关1') }}
-              {{ Form::select('led1',array('关','开'),$selected=NULL,array('class'=>'selectpicker')) }}
+     <div class="form-group">
+          {{ Form::label('led1', '开关1') }}
+          {{ Form::select('led1',array('关','开'),$selected=NULL,array('class'=>'selectpicker')) }}
 
-          </div>
+      </div>
 
-          <div class="form-group">
-              {{ Form::label('sensors1', 'sensors1') }}
-              {{ Form::text('sensors1', Input::old('sensors1'), array('class' => 'form-control')) }}
-          </div>
+      <div class="form-group">
+          {{ Form::label('sensors1', 'sensors1') }}
+          {{ Form::text('sensors1', Input::old('sensors1'), array('class' => 'form-control')) }}
+      </div>
 
-          <div class="form-group">
-              {{ Form::label('sensors2', 'sensors2') }}
-              {{ Form::text('sensors2', Input::old('sensors2'), array('class' => 'form-control')) }}
-          </div>
+      <div class="form-group">
+          {{ Form::label('sensors2', 'sensors2') }}
+          {{ Form::text('sensors2', Input::old('sensors2'), array('class' => 'form-control')) }}
+      </div>
 
-          <div class="form-group">
-              {{ Form::label('temperature', 'temperature') }}
-              {{ Form::text('temperature', Input::old('temperature'), array('class' => 'form-control')) }}
-          </div>
+      <div class="form-group">
+          {{ Form::label('temperature', 'temperature') }}
+          {{ Form::text('temperature', Input::old('temperature'), array('class' => 'form-control')) }}
+      </div>
 
-          {{ Form::submit('Create!', array('class' => 'btn btn-primary')) }}
+      {{ Form::submit('Create!', array('class' => 'btn btn-primary')) }}
 
-      {{ Form::close() }}
+  {{ Form::close() }}
 
-      </div>
+  </div>
+```
 
 开关一开始打算用 checkbox,加上 bootstrap-switch 实现
     ON OFF
@@ -431,116 +470,121 @@ app/model 加个 class
 
 还需要修改一下之前的 create(),添加一行
 
-    return Redirect::to('athome');
-
- 也就是添加完后,重定向到首页查看,最后例子给出的 create 如下
-
-    public function store()
-    {
-        $rules = array(
-            'led1'=>'required',
-            'sensors1' => 'required|numeric|Min:-50|Max:80',
-            'sensors2' => 'required|numeric|Min:-50|Max:80',
-            'temperature' => 'required|numeric|Min:-50|Max:80'
-        );
-        $validator = Validator::make(Input::all(), $rules);
-
-        if ($validator->fails()) {
-            return Redirect::to('athome/create')
-                ->withErrors($validator);
-        } else {
-            // store
-            $nerd = new Athomes;
-            $nerd->sensors1       = Input::get('sensors1');
-            $nerd->sensors2       = Input::get('sensors2');
-            $nerd->temperature    = Input::get('temperature');
-            $nerd->led1            = Input::get('led1');
-            $nerd->save();
-
-            Session::flash('message', 'Successfully created athome!');
-            return Redirect::to('athome');
-        }
+```php
+return Redirect::to('athome');
+```
+
+也就是添加完后,重定向到首页查看,最后例子给出的 create 如下
+
+```php
+public function store()
+{
+    $rules = array(
+        'led1'=>'required',
+        'sensors1' => 'required|numeric|Min:-50|Max:80',
+        'sensors2' => 'required|numeric|Min:-50|Max:80',
+        'temperature' => 'required|numeric|Min:-50|Max:80'
+    );
+    $validator = Validator::make(Input::all(), $rules);
+
+    if ($validator->fails()) {
+        return Redirect::to('athome/create')
+            ->withErrors($validator);
+    } else {
+        // store
+        $nerd = new Athomes;
+        $nerd->sensors1       = Input::get('sensors1');
+        $nerd->sensors2       = Input::get('sensors2');
+        $nerd->temperature    = Input::get('temperature');
+        $nerd->led1            = Input::get('led1');
+        $nerd->save();
+
+        Session::flash('message', 'Successfully created athome!');
+        return Redirect::to('athome');
     }
+}
+```
 
 ###编辑模板
 
 完整的 blade 模板文件
 
-    <!DOCTYPE html lang="zh-cn">
-    <html>
-        <head>
-            <meta http-equiv="Content-type" content="text/html; charset=utf-8">
-            <meta name="keywords" content="">
-            <meta name="viewport" content="width=device-width">
-            <meta name="description" content="">
-            <title>@yield('title')</title>
-            <link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap.min.css') ?>" />
-            <link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap-select.min.css') ?>" />
-            <link rel="stylesheet" href="<?= url('css/justified-nav.css') ?>" type="text/css" media="screen" />
-        </head>
-    <body>
+```html
+<!DOCTYPE html lang="zh-cn">
+<html>
+    <head>
+        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+        <meta name="keywords" content="">
+        <meta name="viewport" content="width=device-width">
+        <meta name="description" content="">
+        <title>@yield('title')</title>
+        <link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap.min.css') ?>" />
+        <link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap-select.min.css') ?>" />
+        <link rel="stylesheet" href="<?= url('css/justified-nav.css') ?>" type="text/css" media="screen" />
+    </head>
+<body>
 
 
-    <div class="container">
+<div class="container">
 
-    <div class="container">
-      <div class="row-fluid">
+<div class="container">
+  <div class="row-fluid">
 
-    <h1>Edit {{ $athome->id }}</h1>
+<h1>Edit {{ $athome->id }}</h1>
 
-    <!-- if there are creation errors, they will show here -->
-    {{ HTML::ul($errors->all()) }}
+<!-- if there are creation errors, they will show here -->
+{{ HTML::ul($errors->all()) }}
 
-    {{ Form::model($athome, array('route' => array('athome.update', $athome->id), 'method' => 'PUT')) }}
+{{ Form::model($athome, array('route' => array('athome.update', $athome->id), 'method' => 'PUT')) }}
 
-            <div class="form-group">
-                {{ Form::label('led1', '开关1') }}
-                {{ Form::select('led1',array('关','开'),$selected=NULL,array('class'=>'selectpicker')) }}
+        <div class="form-group">
+            {{ Form::label('led1', '开关1') }}
+            {{ Form::select('led1',array('关','开'),$selected=NULL,array('class'=>'selectpicker')) }}
 
-            </div>
+        </div>
 
-            <div class="form-group">
-                {{ Form::label('sensors1', '传感器1') }}
-                {{ Form::text('sensors1', Input::old('sensors1'), array('class' => 'form-control')) }}
-            </div>
+        <div class="form-group">
+            {{ Form::label('sensors1', '传感器1') }}
+            {{ Form::text('sensors1', Input::old('sensors1'), array('class' => 'form-control')) }}
+        </div>
 
-            <div class="form-group">
-                {{ Form::label('sensors2', '传感器2') }}
-                {{ Form::text('sensors2', Input::old('sensors2'), array('class' => 'form-control')) }}
-            </div>
+        <div class="form-group">
+            {{ Form::label('sensors2', '传感器2') }}
+            {{ Form::text('sensors2', Input::old('sensors2'), array('class' => 'form-control')) }}
+        </div>
 
-            <div class="form-group">
-                {{ Form::label('temperature', '温度传感器') }}
-                {{ Form::text('temperature', Input::old('temperature'), array('class' => 'form-control')) }}
-            </div>
+        <div class="form-group">
+            {{ Form::label('temperature', '温度传感器') }}
+            {{ Form::text('temperature', Input::old('temperature'), array('class' => 'form-control')) }}
+        </div>
 
 
-        {{ Form::submit('Edit the Nerd!', array('class' => 'btn btn-primary')) }}
+    {{ Form::submit('Edit the Nerd!', array('class' => 'btn btn-primary')) }}
 
-    {{ Form::close() }}
+{{ Form::close() }}
 
-        </div>
     </div>
+</div>
 
 
-    <div class="footer">
-            <p>© Company 2013</p>
-          </div>
-    </div>
-
-    </div>
-    <script type="text/javascript" src="<?= url('js/jquery.min.js')?>"></script>
-    <script type="text/javascript" src="<?= url('js/bootstrap.min.js') ?>"></script>
-    <script type="text/javascript" src="<?= url('js/bootstrap-select.min.js') ?>"></script>
-    <script>
-     $('.selectpicker').selectpicker();
-     </script>
-    <script type="text/javascript" src="<?= url('js/log.js') ?>"></script>
+<div class="footer">
+        <p>© Company 2013</p>
+      </div>
+</div>
 
+</div>
+<script type="text/javascript" src="<?= url('js/jquery.min.js')?>"></script>
+<script type="text/javascript" src="<?= url('js/bootstrap.min.js') ?>"></script>
+<script type="text/javascript" src="<?= url('js/bootstrap-select.min.js') ?>"></script>
+<script>
+ $('.selectpicker').selectpicker();
+ </script>
+<script type="text/javascript" src="<?= url('js/log.js') ?>"></script>
 
-    </body>
-    </html>
 
+</body>
+</html>
+```
 
 最后效果见:[http://b.phodal.com/][bphodal]
 

+ 3 - 3
src/2.4.restful_everywhere.md

@@ -21,7 +21,7 @@
 
 使用urllib2库时
 
-```
+```python
 #!/usr/bin/env python
 import json
 import urllib2
@@ -39,7 +39,7 @@ result=json.load(date)
 
 GET请求
 
-```
+```python
 #!/usr/bin/env python
 import requests
 
@@ -50,7 +50,7 @@ print r.text
 
 POST请求
 
-```
+```python
 #!/usr/bin/env python
 import requests
 

+ 1 - 2
src/pre/1.pre.md

@@ -1,5 +1,4 @@
-
-##前言##
+#前言##
 
 设计物联网系统是一种有意思的事情,我们需要考虑到软件、硬件、通讯等等不同的几个方案。探索不同的语言,不同的框架,形成不同的解决方案。
 

Alguns arquivos não foram mostrados porque muitos arquivos mudaram nesse diff