那么以后可能就是这样子。。。。
231 |├── .nojekyll ├── designiot.jpg ├── images ├── pm.png ├── 88x31.png ├── arch.jpeg ├── edit.png ├── flow.png ├── gpio.png ├── hwcnt.png ├── lnmp.gif ├── lnmp.jpg ├── rpi.jpg ├── shell.png ├── star.png ├── uno.png ├── arduino.png ├── change.png ├── getjson.png ├── nostyle.png ├── origin.png ├── python.png ├── box-model.gif ├── dom_tree.jpg ├── gnu_linux.png ├── hardware.jpg ├── redfonts.png ├── temperture.png ├── webkitflow.png ├── linux_kernel.jpg ├── xml-vs-json.png ├── fullconnected.png └── raspberrypi_flow.png ├── .gitignore ├── src ├── end │ └── qa.md ├── 2.0.webservices.md ├── pre │ ├── 1.pre.md │ └── 2.intro.md ├── futrue │ └── 3.2.mqtt.md ├── 2.1.restful.md ├── 1.9.server.md ├── 3.1.iot-coap.md ├── 1.8.rpi.md ├── 4.0.easyiot.md ├── 1.6.arduino.md ├── 2.2.init_env.md ├── 1.1.anywhere-html.md ├── 5.0.android.md ├── 1.3.anywhere-css.md ├── 2.1.http.md ├── 1.4.anywhere-hjc.md ├── 1.7.python.md ├── 2.5.frontend.md ├── 1.2.anywhere-javascript.md ├── 2.3.create_laravel.md ├── 1.5.linux.md └── 3.1.coap.md ├── template ├── headpdf.html ├── head-chapter.html ├── head.html └── template.tex ├── help.md ├── Makefile ├── README.md ├── css └── vendor.css ├── Licence.txt └── end └── iot.md /.nojekyll: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /designiot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/designiot.jpg -------------------------------------------------------------------------------- /images/pm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/pm.png -------------------------------------------------------------------------------- /images/88x31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/88x31.png -------------------------------------------------------------------------------- /images/arch.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/arch.jpeg -------------------------------------------------------------------------------- /images/edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/edit.png -------------------------------------------------------------------------------- /images/flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/flow.png -------------------------------------------------------------------------------- /images/gpio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/gpio.png -------------------------------------------------------------------------------- /images/hwcnt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/hwcnt.png -------------------------------------------------------------------------------- /images/lnmp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/lnmp.gif -------------------------------------------------------------------------------- /images/lnmp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/lnmp.jpg -------------------------------------------------------------------------------- /images/rpi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/rpi.jpg -------------------------------------------------------------------------------- /images/shell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/shell.png -------------------------------------------------------------------------------- /images/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/star.png -------------------------------------------------------------------------------- /images/uno.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/uno.png -------------------------------------------------------------------------------- /images/arduino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/arduino.png -------------------------------------------------------------------------------- /images/change.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/change.png -------------------------------------------------------------------------------- /images/getjson.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/getjson.png -------------------------------------------------------------------------------- /images/nostyle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/nostyle.png -------------------------------------------------------------------------------- /images/origin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/origin.png -------------------------------------------------------------------------------- /images/python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/python.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/* 2 | build/iot.pdf 3 | build/designiot.pdf 4 | Makefile.old 5 | build/pdf.html -------------------------------------------------------------------------------- /images/box-model.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/box-model.gif -------------------------------------------------------------------------------- /images/dom_tree.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/dom_tree.jpg -------------------------------------------------------------------------------- /images/gnu_linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/gnu_linux.png -------------------------------------------------------------------------------- /images/hardware.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/hardware.jpg -------------------------------------------------------------------------------- /images/redfonts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/redfonts.png -------------------------------------------------------------------------------- /images/temperture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/temperture.png -------------------------------------------------------------------------------- /images/webkitflow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/webkitflow.png -------------------------------------------------------------------------------- /images/linux_kernel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/linux_kernel.jpg -------------------------------------------------------------------------------- /images/xml-vs-json.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/xml-vs-json.png -------------------------------------------------------------------------------- /images/fullconnected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/fullconnected.png -------------------------------------------------------------------------------- /images/raspberrypi_flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phodal/designiot/gh-pages/images/raspberrypi_flow.png -------------------------------------------------------------------------------- /src/end/qa.md: -------------------------------------------------------------------------------- 1 | 2 | #尾声 3 | 4 | ##路 5 | 6 | ##其他 7 | 8 | 意见及建议: [https://github.com/phodal/designiot/issues](https://github.com/phodal/designiot/issues) 9 | 10 | 邮箱: [h@phodal.com](h@phodal.com) 11 | -------------------------------------------------------------------------------- /template/headpdf.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
17 |
18 |
19 | ## 作者名单
20 |
21 | Github | Name
22 | |--------| ---------|
23 | [phodal](https://github.com/phodal) |[Phodal Huang](http://www.phodal.com)
24 | [Lboyve](https://github.com/Lboyve) | Xiaobing WANG
25 |
26 | ## License
27 |
28 | [](https://www.phodal.com/)
29 |
30 | © 2014~2016 [Phodal Huang](http://www.phodal.com).
31 |
32 | 本作品采用[知识共享署名-非商业性使用 4.0 国际许可协议](http://creativecommons.org/licenses/by-nc/4.0/)进行许可。
33 |
34 | [待我代码编成,娶你为妻可好](http://www.xuntayizhan.com/blog/ji-ke-ai-qing-zhi-er-shi-dai-wo-dai-ma-bian-cheng-qu-ni-wei-qi-ke-hao-wan/)
35 |
36 |
--------------------------------------------------------------------------------
/src/3.1.iot-coap.md:
--------------------------------------------------------------------------------
1 |
2 | ##使用IoT-CoAP构建物联网
3 |
4 | (``注意``:windows系统npm install失败时,需要自己建立一个C:\Documents and Settings\[USERNAME]\Application Data\npm 文件)
5 |
6 | ```bash
7 | npm install iot-coap
8 | ```
9 |
10 | 1.新建**index.js**
11 |
12 | ``注意``: 如果已经存在一个index.js文件,请将下面内容添加到文件末尾(create index.js, and add)
13 |
14 | ```javascript
15 | var iotcoap = require('iot-coap');
16 |
17 | iotcoap.run();
18 | iotcoap.rest.run();
19 | ```
20 |
21 | ``注意``:在db配置可以选择mongodb和sqlite3,替换所需要的数据库即可。(you can choice db on iot.js with 'sqlite' or 'mongodb')
22 |
23 | 2.创建**iot.js**
24 |
25 | ```javascript
26 | exports.config = {
27 | "db_name": "iot.db",
28 | "mongodb_name": "iot",
29 | "mongodb_documents": "iot",
30 | "db": "mongodb",
31 | "table_name": "basic",
32 | "keys":[
33 | "id",
34 | "value",
35 | "sensors1",
36 | "sensors2"
37 | ],
38 | "db_table": "id integer primary key, value text, sensors1 float, sensors2 float",
39 | "mongodb_init":[
40 | {
41 | id: 1,
42 | value: "is id 1",
43 | sensors1: 19,
44 | sensors2: 20
45 | },
46 | {
47 | id: 2,
48 | value: "is id 2",
49 | sensors1: 20,
50 | sensors2: 21
51 | }
52 | ],
53 | "init_table":[
54 | "insert or replace into basic (id,value,sensors1,sensors2) VALUES (1, 'is id 1', 19, 20);",
55 | "insert or replace into basic (id,value,sensors1,sensors2) VALUES (2, 'is id 2', 20, 21);"
56 | ],
57 | "query_table":"select * from basic;",
58 | "rest_url": "/id/:id",
59 | "rest_post_url": "/",
60 | "rest_port": 8848
61 | };
62 | ```
63 |
64 | 3.运行(run)
65 |
66 | ```bash
67 | node index.js
68 | ```
69 |
70 | show:
71 |
72 | ```bash
73 | coap listening at coap://0.0.0.0:5683
74 | restify listening at http://0.0.0.0:8848
75 | ```
76 |
--------------------------------------------------------------------------------
/src/1.8.rpi.md:
--------------------------------------------------------------------------------
1 | #Raspberry Pi
2 |
3 | 
4 |
5 | ##Geek的盛宴
6 |
7 | Raspberry Pi是一款针对电脑业余爱好者、教师、小学生以及小型企业等用户的迷你电脑,预装Linux系统,体积仅信用卡大小,搭载ARM架构处理器,运算性能和智能手机相仿。在接口方面,Raspberry Pi提供了可供键鼠使用的USB接口,此外还有千兆以太网接口、SD卡扩展接口以及1个HDMI高清视频输出接口,可与显示器或者TV相连。
8 |
9 | Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。
10 |
11 | Raspberry Pi相比于一般的ARM开发板来说,由于其本身搭载着Linux操作系统,可以用诸如Python、Ruby或Bash来执行脚本,而不是通过编译程序来运行,具有更高的开发效率。
12 |
13 | ##Raspberry Pi 初始化
14 |
15 | 今天的Raspbian默认已经安装``openssh-server``,并默认开启了OpenSSH-Server。
16 |
17 | 接着我们就可以看到系统启动了,要我们输入用户名和密码
18 |
19 | ```bash
20 | Raspbian GNU/Linux 7 raspberrypi ttyAMA0
21 |
22 | raspberrypi login: pi
23 | Password:
24 | Last login: Sat Apr 26 05:58:07 UTC 2014 on ttyAMA0
25 | Linux raspberrypi 3.10.25+ #622 PREEMPT Fri Jan 3 18:41:00 GMT 2014 armv6l
26 |
27 | The programs included with the Debian GNU/Linux system are free software;
28 | the exact distribution terms for each program are described in the
29 | individual files in /usr/share/doc/*/copyright.
30 |
31 | Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
32 | permitted by applicable law.
33 | ls
34 |
35 | NOTICE: the software on this Raspberry Pi has not been fully configured. Please run 'sudo raspi-config'
36 | ```
37 |
38 | 然后
39 |
40 | ```bash
41 | sudo raspi-config
42 | ```
43 |
44 | 选择第一个,下面就可以继续了
45 |
46 | ```
47 | Expand Filesystem Ensures that all of the SD card s
48 | ```
49 |
50 | 接着重启后,便可以扩展SD卡成功。
51 |
52 | 注: Raspbian与一般的Debian系统使用起来区别不是太大(ps:命令上),由于CPU是不同的架构,在编译上可能有所区别。通常PC上的软件需要重新编译才能在RPi上运行,所以如果可以用apt-get安装的话,就不要自己编译了。
53 |
54 | ##Raspberry Pi GPIO
55 |
56 | > General Purpose Input Output (通用输入/输出)简称为GPIO,或总线扩展器,利用工业标准I2C、SMBus或SPI接口简化了I/O口的扩展。当微控制器或芯片组没有足够的I/O端口,或当系统需要采用远端串行通信或控制时,GPIO产品能够提供额外的控制和监视功能。
57 |
58 | 
59 |
--------------------------------------------------------------------------------
/template/head.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | | 14 | 15 | | 16 |17 | 18 | | 19 |20 | 21 | | 22 |
hello,world
17 |
18 | 3. 保存为->"helloworld.html",
19 |
20 | 4. 双击打开这个文件。 正常情况下都应该是用你的默认浏览器打开。只要是一个正常工作的现代浏览器,都应该可以看到上面显示的是"Hello,world"。
21 |
22 | 这才是最短的hello,world程序,但是呢?在ruby中会是这样子的
23 |
24 | ``` bash
25 | 2.0.0-p353 :001 > p "hello,world"
26 | "hello,world"
27 | => "hello,world"
28 | 2.0.0-p353 :002 >
29 | ```
30 |
31 | 等等,如果你了解过html的话,会觉得这一点都不符合语法规则,但是他工作了,没有什么比安装完Nginx后看到It works!更让人激动了。
32 |
33 | 遗憾的是,它可能无法在所有的浏览器上工作,所以我们需要去调试其中的bug。
34 |
35 | ###调试hello,world###
36 | 我们会发现我们的代码在浏览器中变成了下面的代码,如果你和我一样用的是chrome,那么你可以右键浏览器中的空白区域,点击审查元素,就会看到下面的代码。
37 |
38 | ``` html
39 |
40 |
41 | hello,world
42 |
43 | ```
44 |
45 | 这个才是真正能在大部分浏览器上工作的代码,所以复制它到编辑器里吧。
46 |
47 | ###说说hello,world##
48 | 我很不喜欢其中的<\*>*>,但是我也没有找到别的方法来代替它们,所以这是一个设计得当的语言。甚至大部分人都说这算不上是一门真正的语言,不过html的原义是
49 | 超文本标记语言50 | 所以我们可以发现其中的关键词是标记——markup,也就是说html是一个markup,head是一个markup,body也是一个markup。 51 | 52 | 然而,我们真正工作的代码是在body里面,至于为什么是在这里面,这个问题就太复杂了。打个比方来说: 53 | 54 | 1. 我们所使用的汉语是人类用智慧创造的,我们所正在学的这门语言同样也是人类创造的。 55 | 56 | 2. 我们在自己的语言里遵循着桌子是桌子,凳子是凳子的原则,很少有人会问为什么。 57 | 58 | 59 | ###想用中文?### 60 | 所以我们也可以把计算机语言与现实世界里用于交流沟通的语言划上一个等号。而我们所要学习的语言,并不是我们最熟悉的汉语语言,所以我们便觉得这些很复杂,但是如果我们试着用汉语替换掉上面的代码的话 61 | ```HTML 62 | <语言> 63 | <头><结束头> 64 | <身体>你好,世界<结束身体> 65 | <结束语言> 66 | ``` 67 | 这看上去很奇怪,只是因为是直译过去的原因,也许你会觉得这样会好理解一点,但是输入上可就一点儿也不方便,因为这键盘本身就不适合我们去输入汉字,同时也意味着可能你输入的会有问题。 68 | 69 | 让我们把上面的代码代替掉原来的代码然后保存,打开浏览器会看到下面的结果 70 | ```HTML 71 | <语言> <头><结束头> <身体>你好,世界<结束身体> <结束语言> 72 | ``` 73 | 74 | 更不幸的结果可能是 75 | 76 | ```HTML 77 | <璇█> <澶�><缁撴潫澶�> <韬綋>浣犲ソ锛屼笘鐣�<缁撴潫韬綋> <缁撴潫璇█> 78 | ``` 79 | 80 | 这是一个编码问题,对中文支持不友好。 81 | 82 | 我们把上面的代码改为和标记语言一样的结构 83 | 84 | ```HTML 85 | <语言> 86 | <头>头> 87 | <身体>你好,世界身体> 88 | <结束语言> 89 | ``` 90 | 91 | 于是我们看到的结果便是 92 | 93 | ```HTML 94 | <语言> <头> <身体>你好,世界 95 | ``` 96 | 97 | 被chrome浏览器解析成什么样了? 98 | 99 | ``` html 100 | <语言> 101 | <头> 102 | <身体>你好,世界 103 | 104 | 105 | ``` 106 | 107 | 以 108 | 109 | 110 | 结尾的是注释,写给人看的代码,不是给机器看的,所以机器不会去理解这些代码。 111 | 112 | 但是当我们把代码改成 113 | 114 | ```HTML 115 |
Red
16 | 17 | 18 | 19 | ``` 20 | 21 | 只是, 22 | 23 | ``` javascript 24 | var para=document.getElementById("para"); 25 | para.style.color="blue"; 26 | ``` 27 | 28 | 将字体变成了蓝色,CSS+HTML让页面有序的工作着,但是Javascript却打乱了这些秩序,有着唯恐世界不乱的精彩,也难怪被冠以小三之名了——或许终于可以理解,为什么以前人们对于Javascript没有好感了——不过这里要讲的是正室,也就是CSS,这时还没有Javascript。 29 | 30 |  31 | 32 | ##关于CSS## 33 | 34 | 这不是一篇专业讲述CSS的书籍,所以我不会去说CSS是怎么来的,有些东西我们既然可以很容易从其他地方知道,也就不需要花太多时间去重复。诸如重构等这些的目的之一也在于去除重复的代码,不过有些重复是不可少的,也是有必要的,而通常这些东西可能是由其他地方复制过来的。 35 | 36 | 到目前为止我们没有依赖于任何特殊的硬件或者是软件,对于我们来说我们最基本的需求就是一台电脑,或者可以是你的平板电脑,当然也可以是你的智能手机,因为他们都有个浏览器,而这些都是能用的,对于我们的CSS来说也不会有例外的。 37 | 38 | CSS(Cascading Style Sheets),到今天我也没有记得他的全称,CSS还有一个中文名字是层叠式样式表,事实上翻译成什么可能并不是我们关心的内容,我们需要关心的是他能做些什么。作为三剑客之一,它的主要目的在于可以让我们方便灵活地去控制Web页面的外观表现。我们可以用它做出像淘宝一样复杂的界面,也可以像我们的书本一样简单,不过如果要和我们书本一样简单的话,可能不需要用到CSS。HTML一开始就是依照报纸的格式而设计的,我们还可以继续用上面说到的编辑器,又或者是其他的。如果你喜欢DreamWeaver那也不错,不过一开始使用IDE可无助于我们写出良好的代码。 39 | 40 | 忘说了,CSS也是有版本的,和windows,Linux内核等等一样,但是更新可能没有那么频繁,HTML也是有版本的,JS也是有版本的,复杂的东西不是当前考虑的内容。 41 | 42 | ##代码结构## 43 | 44 | 对于我们的上面的Red示例来说,如果没有一个好的结构,那么以后可能就是这样子。 45 | 46 | ```HTML 47 | 48 | 49 | 50 | 51 | 52 |如果没有一个好的结构
53 |那么以后可能就是这样子。。。。
54 | 55 | 56 | ``` 57 | 58 | 虽然我们看到的还是一样的: 59 | 60 |  61 | 62 | 于是我们就按各种书上的建议重新写了上面的代码 63 | 64 | ```HTML 65 | 66 | 67 | 68 |如果没有一个好的结构
86 |那么以后可能就是这样子。。。。
87 | 88 | 89 | ``` 90 | 91 | 总算比上面好看也好理解多了,这只是临时的用法,当文件太大的时候,正式一点的写法应该如下所示: 92 | 93 | ```HTML 94 | 95 | 96 | 97 |如果没有一个好的结构
102 |那么以后可能就是这样子。。。。
103 | 104 | 105 | ``` 106 | 107 | 我们需要 108 | 109 | ```HTML 110 | 111 | 112 | 113 |如果没有一个好的结构
118 |那么以后可能就是这样子。。。。
119 | 120 | 121 | ``` 122 | 123 | 然后我们有一个像app.js一样的style.css放在同目录下,而他的内容便是 124 | 125 | ```CSS 126 | .para{ 127 | font-size: 22px; 128 | color:#f00; 129 | text-align: center; 130 | padding-left: 20px; 131 | } 132 | .para2{ 133 | font-size:44px; 134 | color:#3ed; 135 | text-indent: 2em; 136 | padding-left: 2em; 137 | } 138 | ``` 139 | 140 | 这代码和JS的代码有如此多的相似 141 | 142 | ```javascript 143 | var para={ 144 | font_size:'22px', 145 | color:'#f00', 146 | text_align:'center', 147 | padding_left:'20px', 148 | } 149 | ``` 150 | 151 | 而22px、20px以及#f00都是数值,因此: 152 | 153 | ```javascript 154 | var para={ 155 | font_size:22px, 156 | color:#f00, 157 | text_align:center, 158 | padding_left:20px, 159 | } 160 | ``` 161 | 162 | 目测差距已经尽可能的小了,至于这些话题会在以后讨论到,如果要让我们的编译器更正确的工作,那么我们就需要非常多这样的符号,除非你乐意去理解: 163 | 164 | ```lisp 165 | (dotimes (i 4) (print i)) 166 | ``` 167 | 168 | 总的来说我们减少了符号的使用,但是用lisp便带入了更多的括号,不过这是一种简洁的表达方式,也许我们可以在其他语言中看到。 169 | 170 | ```regex 171 | \d{2}/[A-Z][a-z][a-z]/\d{4} 172 | ``` 173 | 174 | 上面的代码,是为了从一堆数据中找出“某日/某月/某年”。如果一开始不理解那是正则表达式,就会觉得那个很复杂。 175 | 176 | 这门语言可能是为设计师而设计的,但是设计师大部分还是不懂编程的,不过相对来说这门语言还是比其他语言简单易懂一些。 177 | 178 | ##样式与目标## 179 | 如下所示,就是我们的样式 180 | 181 | ```css 182 | .para{ 183 | font-size: 22px; 184 | color:#f00; 185 | text-align: center; 186 | padding-left: 20px; 187 | } 188 | ``` 189 | 190 | 我们的目标就是 191 | 192 | 如果没有一个好的结构 193 | 194 | 所以样式和目标在这里牵手了,问题是他们是如何在一起的呢?下面就是CSS与HTML沟通的重点所在了: 195 | 196 | ###选择器### 197 | 我们用到的选择器叫做类选择器,也就是class,或者说应该称之为class选择器更合适。与类选择器最常一起出现的是ID选择器,不过这个适用于比较高级的场合,诸如用JS控制DOM的时候就需要用到ID选择器。而基本的选择器就是如下面的例子: 198 | 199 | p.para{ 200 | color:#f0f; 201 | } 202 | 203 | 将代码添加到style.css的最下面会发现“如果没有一个好的结构”变成了粉红色,当然我们还会有这样的写法 204 | 205 | p>.para{ 206 | color:#f0f; 207 | } 208 | 209 | 为了产生上面的特殊的样式,虽然不好看,但是我们终于理解什么叫层叠样式了,下面的代码的重要度比上面高,也因此有更高的优先规则。 210 | 211 | 而通常我们可以通过一个 212 | 213 | p{ 214 | text-align:left; 215 | } 216 | 217 | 这样的元素选择器来给予所有的p元素一个左对齐。 218 | 219 | 还有复杂一点的复合型选择器,下面的是HTML文件 220 | 221 | 222 | 223 | 224 |如果没有一个好的结构
229 |那么以后可能就是这样子。。。。
231 |那么以后可能就是这样子。。。。
263 |flakjfaklfjalfa
程序应该是具有可读性的短文,它将在计算机上执行,从而解决某些问题41 | 42 | 我们需要去读懂别人的代码,别人也需要去读懂我们的代码。计算机可以无条件地执行你那未经编排过的程序,但是人就不是如此了。 43 | 44 | ```javascript 45 | 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;}}} 46 | ``` 47 | 48 | 上面的代码相对于下面的代码可读性没有那么多,但是计算机可以无条件地执行上面的代码。上面的代码对于网络传输来说是好的,但是对于人来说并不是如此,我们需要一些工具来辅助我们去读懂上面的代码。如果代码上写得没有一点可读性,诸如函数命名没有多少实际意义,如果我们把前面的函数就成这样: 49 | 50 | ```javascript 51 | var c={ 52 | a: function(a,b){ 53 | return a+b; 54 | }, 55 | s: function(a,b){ 56 | return a-b; 57 | }, 58 | d: function(a,b){ 59 | if(a>b){ 60 | return a; 61 | }else{ 62 | return b; 63 | } 64 | } 65 | } 66 | ``` 67 | 68 | 那么只有在我们理解了这个函数是干什么之后才能理解函数是干什么,而不是光看函数名就可以了。 69 | 70 | 在Javascript解决一个函数的办法有很多,在其他一些语言如Ruby或者Perl中也是如此,解决问题的办法有很多,对于写代码的人来说是一个享受的过程,但是对于维护的人来说并非如此。而这个和Python的思想不是很一致的是,Python设计的理念是 71 | 72 |
对于特定的问题,只要有一种最好的方法来解决就够了73 | 74 | 可读性的代码在今天显得比以前重要的多,以前写程序的时候我们需要去考虑使用汇编或者其他工具来提高程序的效率。 75 | 76 | ``` 77 | .global _start 78 | 79 | .text 80 | _start: 81 | # write(1, message, 13) 82 | mov $1, %rax # system call 1 is write 83 | mov $1, %rdi # file handle 1 is stdout 84 | mov $message, %rsi # address of string to output 85 | mov $13, %rdx # number of bytes 86 | syscall # invoke operating system to do the write 87 | 88 | # exit(0) 89 | mov $60, %rax # system call 60 is exit 90 | xor %rdi, %rdi # we want return code 0 91 | syscall # invoke operating system to exit 92 | message: 93 | .ascii "Hello, world\n" 94 | ``` 95 | 96 | 所以上面的代码的可读性在今天新生一代的程序员来说可能没有那么容易理解。芯片运行的速度越来越快,在程序上我们也需要一个越来越快的解决方案,而所谓的越来越快的解决方案指的不是运行速度上,而是开发速度上。如果你没有办法在同样时间内开发出更好的程序,那么你就可能输给你的竞争对手。 97 | 98 | ###开始之前 99 | 100 | 我们终于又从一种语言跳到了另外一种语言,我们可能习惯了一种模式,而不敢于去尝试新的东西,这些或许是我们的一些习惯又或者是因为害怕等等。 101 | 102 | 作为另外一个跨平台能力很强的语言,这里说的是与Javascript、HTML比较,或许你会觉得C算是最好的,但是我们这里讨论更多的是脚本语言,也就是直接可以运行的。在现在主流的大多数移动平台上,python也有良好的支持,如Android,IOS,只是这些算是类Unix系统内核,python还支持之前Nokia的Symbian。 103 | 104 | 开始之前我们需要确认我们的平台上已经有了python环境,也就是可以运行下面的Hello,World,你可以在网上很多地方看到,最简单的地方还是到官网,又或者是所用移动平台的store下载。 105 | 106 | ###Python的Hello,World 107 | 108 | Python的Hello,World有两种形式,作为一种脚本语言来说,Javascript也是一种脚本语言,只是两者之间有太多的不同之处,每个人都会有不同的选择对于一种语言用来作为其的习惯。于是这就是我们的 109 | 110 | print "Hello,World" 111 | 112 | 当我们把我们的脚本在shell环境下运行时 113 | 114 | ```bash 115 | >>> print "Hello,world" 116 | File "
a process or set of rules to be followed in calculations or other problem-solving operations, especially by a computer159 | 160 | 也就是计算或其他解决问题的操作需要遵循的一个过程或者一套规则,书上还提到的说法是——解决问题的诀窍,让我想起了hack一词。我们总会去想某些东西是否有一个更快的计算方法,有时候在处理某些问题上也显示了一个好的算法的重要性。 161 | 162 | ##实用主义哲学 163 | 164 | (来自于:HyryStudio) 165 | 166 | 大多数工程师、科学家使用科学计算软件的目的都是为了快速解决其工作中遇到的问题,而不是开发出一套完整的软件。这就是为什么MATLAB这样的商用科学计算软件十分流行的原因。而Python在这一点上实际上和MATLAB十分相似,我们也可以使用Python众多的扩展库快速写出一次性的数据处理、运算的脚本。然而由于Python语言的一些高级特性,以及众多的科学计算之外的扩展库,我们可以将积累下来的一次性脚本进行改造,为它们提供命令行、GUI、数据库、网络等众多接口,最终成为一套完整的工具包或者实用的计算软件。而且由于是开源的自由软件,我们可以在任何系统中安装Python环境,运行我们 的程序。 167 | 168 | Python一直保持着很强的实用主义,它通常不会去试着重新开发一整套函数库,而是将现有的开源函数库包装成其扩展库。而Python则通过这些扩展库将众多的开源函数库连接在一起,是名符其实的胶水语言。例如由华盛顿大学的教授主导开发的 Sage ,就是一套以代替MATLAB、Mathematica、Maple等商用科学计算软件为目的的开源系统。它通过Python结合了众多的开源科学计算软件,并通过网页浏览器提供了一个与其交互的记事本文档界面。 169 | Python的科学计算扩展库非常多,不同专业的技术人员都可以找到适合自己的扩展库。下面是我经常会用到的一个非常不完全的列表: 170 | 171 | - NumPy + SciPy + matplotlib + IPython : 这几个应该是每位开发者都应具备的扩展库。NumPy提供了多维数组以及众多的处理函数,SciPy提供了各种数值运算功能,matplotlib能绘制 出精美的二维图表,IPython则提供了一个超强的命令行,最新版的IPython还添加于Sage类似的浏览器的记事本界面(notebook)。 172 | - SciKits : 其中包括许多独立的扩展库,作为SciPy的补充。其中 scikit-learn 是一套机器学习库,包含了比较完善的文档以及众多的实例程序。 173 | - Pandas : 以Python世界中 R 的替代品为目标的数据分析库。根据其官方网站的测试,Pandas在许多方面的性能都比R要高。 174 | - ETS : 这是一套Enthought公司开发的函数库,其中的 Mayavi 能很方便地对数据进行三维可视化。 175 | - OpenCV : 这是一套计算机视觉库,目前的最新版本已经提供了十分完备的Python接口,能够调用OpenCV中众多的图像处理、模式识别函数直接对NumPy数组进行处理。 176 | 177 | 178 | ##包管理 179 | 180 | 关于Python的包管理 181 | 182 | - Eggs 格式是 setuptools 引入的一种文件格式,它使用 .egg 扩展名,用于 Python 模块的安装。 183 | - pip 是目前 python 包管理的事实标准,2008年发布。它被用作 easy_install 的替代品,但是它仍有大量的功能建立在 setuptools 组件之上。 184 | 185 | ###python requests 186 | 187 | Requests 是使用 Apache2 Licensed 许可证的 HTTP 库。用 Python 编写,真正的为人类着想。 188 | 189 | Python 标准库中的 urllib2 模块提供了你所需要的大多数 HTTP 功能,但是它的 API太渣了。它是为另一个时代、另一个互联网所创建的。它需要巨量的工作,甚至包括各种方法覆盖,来完成最简单的任务。 190 | 191 | 以安装requests为例: 192 | 193 | 命令: 194 | 195 | ```bash 196 | sudo pip install requests 197 | ``` 198 | 199 | 结果: 200 | 201 | ```bash 202 | Downloading/unpacking requests 203 | Downloading requests-2.4.3-py2.py3-none-any.whl (459kB): 459kB downloaded 204 | Installing collected packages: requests 205 | Successfully installed requests 206 | Cleaning up... 207 | ``` 208 | 209 | 用这个库我们可以做些什么?看看官网的示例: 210 | 211 | ```bash 212 | >>> import requests 213 | >>> r = requests.get('https://github.com/timeline.json') 214 | >>> r.json() 215 | ``` 216 | 217 | 到现在你会发现我们没有说到任何的Python语法,这不是一本关于Python语法的书,如我们在开头所说的。下面是我们将会在后面用到的代码 218 | 219 | ```python 220 | #!/usr/bin/env python 221 | import requests 222 | 223 | url = "http://b.phodal.com/athome/1" 224 | r = requests.get(url) 225 | print r.text 226 | ``` 227 | -------------------------------------------------------------------------------- /src/2.5.frontend.md: -------------------------------------------------------------------------------- 1 | #前端显示 2 | 3 | ##库与车轮子 4 | 5 | 在多数的情况下我们都没有理由也没有必要去重新发明我们的车轮,在这时使用库会是一个比较好的做法。 6 | 7 | ##库 8 | 9 | ###jQuery 10 | 11 | > Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。 12 | 13 | 在我们的代码里用到了jQuery,然而这是一种简单而且快速有速地方法。 14 | 15 | ###jQuery Mobile 16 | 17 | > jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。 18 | 19 | 整个展示页面由三部分组成,即``header``,``content``,``footer``。而我们主要需要关心的是content,也就是真下的内容。 20 | 21 | 我们只需要结合``HighChart``来设计我们的content就可以了,下面是一个简单地``HighChart``示例: 22 | 23 | ``` 24 | 25 | 26 | ``` 27 | 28 | 剩下的事就由``HighChart``来做。 29 | 30 | 最后代码如下所示 31 | 32 | ```HTML 33 | 34 |