github
/
designiot
mirror de https://github.com/phodal/designiot.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta name="generator" content="pandoc" />
  <title></title>
  <style type="text/css">code{white-space: pre;}</style>
  <style type="text/css">
div.sourceCode { overflow-x: auto; }
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
  margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
code > span.dt { color: #902000; } /* DataType */
code > span.dv { color: #40a070; } /* DecVal */
code > span.bn { color: #40a070; } /* BaseN */
code > span.fl { color: #40a070; } /* Float */
code > span.ch { color: #4070a0; } /* Char */
code > span.st { color: #4070a0; } /* String */
code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
code > span.ot { color: #007020; } /* Other */
code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
code > span.fu { color: #06287e; } /* Function */
code > span.er { color: #ff0000; font-weight: bold; } /* Error */
code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
code > span.cn { color: #880000; } /* Constant */
code > span.sc { color: #4070a0; } /* SpecialChar */
code > span.vs { color: #4070a0; } /* VerbatimString */
code > span.ss { color: #bb6688; } /* SpecialString */
code > span.im { } /* Import */
code > span.va { color: #19177c; } /* Variable */
code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code > span.op { color: #666666; } /* Operator */
code > span.bu { } /* BuiltIn */
code > span.ex { } /* Extension */
code > span.pp { color: #bc7a00; } /* Preprocessor */
code > span.at { color: #7d9029; } /* Attribute */
code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
  </style>
  <link rel="stylesheet" href="css/vendor.css" type="text/css" />
</head>
<body>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wb="http://open.weibo.com/wb" >
	<head>
		<title>一步步搭建物联网系统(教你设计物联网系统)</title>
		<meta name="keywords" content="设计物联网系统,物联网系统设计">
		<meta name="description" content="一份关于如何设计物联网系统的文档">
		<link rel="stylesheet" href="../css/vendor.css" />
	</head>
	<body class="container inner wrap">
		<h1>一步步搭建物联网系统(教你设计物联网系统)</h1>
	</body>
</html>
<div id="TOC">
<ul>
<li><a href="#无处不在的html"><span class="toc-section-number">1</span> 无处不在的HTML</a><ul>
<li><a href="#html的helloworld"><span class="toc-section-number">1.1</span> html的hello,world</a><ul>
<li><a href="#调试helloworld"><span class="toc-section-number">1.1.1</span> 调试hello,world</a></li>
<li><a href="#说说helloworld"><span class="toc-section-number">1.1.2</span> 说说hello,world</a></li>
<li><a href="#想用中文"><span class="toc-section-number">1.1.3</span> 想用中文？</a></li>
</ul></li>
<li><a href="#其他html标记"><span class="toc-section-number">1.2</span> 其他html标记</a><ul>
<li><a href="#美妙之处"><span class="toc-section-number">1.2.1</span> 美妙之处</a></li>
<li><a href="#更多"><span class="toc-section-number">1.2.2</span> 更多</a></li>
</ul></li>
</ul></li>
</ul>
</div>
<p>某一天，正走在回学校的路上的我突然想到：“未来将会是一个科技的时代——虽然现在也是——只是在未来，科技将会无处不在。如果我们依旧对周围这些无处不在的代码一无所知的话，或许我们会成为黑客帝国之中被控制的普通人。”于是开始想着，有一天人们会像学习一门语言一样开始学习编程，直到又有一天我看到了学习编程如同学习一门语言的说法。这又恰好在我做完最小物联网系统之后，算是一个有趣的时间点，我开始想着像之前做最小物联网系统的那些步骤一样，写一个简单的入门。也可以补充好之前在这个最小物联网系统缺失的那些东西，给那些正在开始试图去解决编程问题的人。</p>
<p>让我们先从身边的语言下手，也就是现在无处不在的html+javascript+css。</p>
<h1 id="无处不在的html"><span class="header-section-number">1</span> 无处不在的HTML</h1>
<p>之所以从html开始，是因为我们不需要配置一个复杂的开发环境，也许你还不知道开发环境是什么东西，不过这也没关系，毕竟这些知识需要慢慢的接触才能有所了解，尤其是对于普通的业余爱好者来说，当然，对于专业选手言自然不是问题。HTML是Web的核心语言，也算是比较基础的语言。</p>
<h2 id="html的helloworld"><span class="header-section-number">1.1</span> html的hello,world</h2>
<p>Hello,world是一个传统，所以在这里也遵循这个有趣的传统，我们所要做的事情其实很简单，虽然也有一点点hack的感觉。——让我们先来新建一个文并命名为“helloworld.html”。</p>
<p>(PS:大部分人应该都是在windows环境下工作的，所以你需要新建一个文本，然后重命名，或者你需要一个编辑器，在这里我们推荐用<strong>sublime text</strong>。破解不破解，注册不注册都不会对你的使用有太多的影响。)</p>
<ol style="list-style-type: decimal">
<li><p>新建文件</p></li>
<li>输入
<pre><code class="html">hello,world</code></pre></li>
<li><p>保存为-&gt;“helloworld.html”，</p></li>
<li><p>双击打开这个文件。 正常情况下都应该是用你的默认浏览器打开。只要是一个正常工作的现代浏览器，都应该可以看到上面显示的是“Hello,world”。</p></li>
</ol>
<p>这才是最短的hello,world程序，但是呢？在ruby中会是这样子的</p>
<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">2.0.0-p353</span> :001 <span class="kw">&gt;</span> p <span class="st">&quot;hello,world&quot;</span>
<span class="st">&quot;hello,world&quot;</span>
    =<span class="kw">&gt;</span> <span class="st">&quot;hello,world&quot;</span>
<span class="kw">2.0.0-p353</span> :002 <span class="kw">&gt;</span></code></pre></div>
<p>等等，如果你了解过html的话，会觉得这一点都不符合语法规则，但是他工作了，没有什么比安装完Nginx后看到It works!更让人激动了。</p>
<p>遗憾的是，它可能无法在所有的浏览器上工作，所以我们需要去调试其中的bug。</p>
<h3 id="调试helloworld"><span class="header-section-number">1.1.1</span> 调试hello,world</h3>
<p>我们会发现我们的代码在浏览器中变成了下面的代码，如果你和我一样用的是chrome，那么你可以右键浏览器中的空白区域，点击审查元素，就会看到下面的代码。</p>
<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;html&gt;</span>
    <span class="kw">&lt;head&gt;&lt;/head&gt;</span>
    <span class="kw">&lt;body&gt;</span>hello,world<span class="kw">&lt;/body&gt;</span>
<span class="kw">&lt;/html&gt;</span></code></pre></div>
<p>这个才是真正能在大部分浏览器上工作的代码，所以复制它到编辑器里吧。</p>
<h3 id="说说helloworld"><span class="header-section-number">1.1.2</span> 说说hello,world</h3>
我很不喜欢其中的&lt;*&gt;&lt;/*&gt;，但是我也没有找到别的方法来代替它们，所以这是一个设计得当的语言。甚至大部分人都说这算不上是一门真正的语言，不过html的原义是
<blockquote>
超文本标记语言
</blockquote>
<p>所以我们可以发现其中的关键词是标记——markup，也就是说html是一个markup，head是一个markup，body也是一个markup。</p>
<p>然而，我们真正工作的代码是在body里面，至于为什么是在这里面，这个问题就太复杂了。打个比方来说：</p>
<ol style="list-style-type: decimal">
<li><p>我们所使用的汉语是人类用智慧创造的，我们所正在学的这门语言同样也是人类创造的。</p></li>
<li><p>我们在自己的语言里遵循着<strong>桌子是桌子，凳子是凳子</strong>的原则，很少有人会问为什么。</p></li>
</ol>
<h3 id="想用中文"><span class="header-section-number">1.1.3</span> 想用中文？</h3>
<p>所以我们也可以把计算机语言与现实世界里用于交流沟通的语言划上一个等号。而我们所要学习的语言，并不是我们最熟悉的汉语语言，所以我们便觉得这些很复杂，但是如果我们试着用汉语替换掉上面的代码的话</p>
<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="er">&lt;</span>语言&gt;
    <span class="er">&lt;</span>头&gt;<span class="er">&lt;</span>结束头&gt;
    <span class="er">&lt;</span>身体&gt;你好，世界<span class="er">&lt;</span>结束身体&gt;
<span class="er">&lt;</span>结束语言&gt;</code></pre></div>
<p>这看上去很奇怪，只是因为是直译过去的原因，也许你会觉得这样会好理解一点，但是输入上可就一点儿也不方便，因为这键盘本身就不适合我们去输入汉字，同时也意味着可能你输入的会有问题。</p>
<p>让我们把上面的代码代替掉原来的代码然后保存，打开浏览器会看到下面的结果</p>
<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="er">&lt;</span>语言&gt; <span class="er">&lt;</span>头&gt;<span class="er">&lt;</span>结束头&gt; <span class="er">&lt;</span>身体&gt;你好，世界<span class="er">&lt;</span>结束身体&gt; <span class="er">&lt;</span>结束语言&gt;</code></pre></div>
<p>更不幸的结果可能是</p>
<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="er">&lt;</span>璇█&gt; <span class="er">&lt;</span>澶�&gt;<span class="er">&lt;</span>缁撴潫澶�&gt; <span class="er">&lt;</span>韬綋&gt;浣犲ソ锛屼笘鐣�<span class="er">&lt;</span>缁撴潫韬綋&gt; <span class="er">&lt;</span>缁撴潫璇█&gt;</code></pre></div>
<p>这是一个编码问题，对中文支持不友好。</p>
<p>我们把上面的代码改为和标记语言一样的结构</p>
<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="er">&lt;</span>语言&gt;
    <span class="er">&lt;</span>头&gt;<span class="er">&lt;</span>/头&gt;
    <span class="er">&lt;</span>身体&gt;你好，世界<span class="er">&lt;</span>/身体&gt;
<span class="er">&lt;</span>结束语言&gt;</code></pre></div>
<p>于是我们看到的结果便是</p>
<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="er">&lt;</span>语言&gt; <span class="er">&lt;</span>头&gt; <span class="er">&lt;</span>身体&gt;你好，世界</code></pre></div>
<p>被chrome浏览器解析成什么样了？</p>
<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;</span><span class="er">&lt;</span>语言&gt;
        <span class="er">&lt;</span>头&gt;<span class="co">&lt;!--头--&gt;</span>
        <span class="er">&lt;</span>身体&gt;你好，世界<span class="co">&lt;!--身体--&gt;</span>
    <span class="co">&lt;!--语言--&gt;</span>
<span class="kw">&lt;/body&gt;&lt;/html&gt;</span>      </code></pre></div>
<p>以 <!--开头，--></p>
<p>结尾的是注释，写给人看的代码，不是给机器看的，所以机器不会去理解这些代码。</p>
<p>但是当我们把代码改成</p>
<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;whatwewanttosay&gt;</span>你好世界<span class="kw">&lt;/whatwewanttosay&gt;</span></code></pre></div>
<p>浏览器上面显示的内容就变成了</p>
<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html">你好世界</code></pre></div>
<p>或许你会觉得很神奇，但是这一点儿也不神奇，虽然我们的中文语法也遵循着标记语言的标准，但是我们的浏览器不支持中文标记。</p>
<p>结论:</p>
<ol style="list-style-type: decimal">
<li>浏览器对中文支持不友好。</li>
<li>浏览器对英文支持友好。</li>
</ol>
<p>刚开始的时候不要对中文编程有太多的想法，这是很不现实的:</p>
<ol style="list-style-type: decimal">
<li>现有的系统都是基于英语语言环境构建的，对中文支持不是很友好。</li>
<li>中文输入的速度在某种程度上来说没有英语快。</li>
</ol>
<p>我们离开话题已经很远了，但是这里说的都是针对于那些不满于英语的人来说的，只有当我们可以从头构建一个中文系统的时候才是可行的，而这些就要将cpu、软件、硬件都包含在内，甚至我们还需要考虑重新设计cpu的结构，在某种程度上来说会有些不现实。或许，需要一代又一代人的努力。忘记那些吧，师夷长之技以治夷。</p>
<h2 id="其他html标记"><span class="header-section-number">1.2</span> 其他html标记</h2>
<p>添加一个标题，</p>
<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;html&gt;</span>
    <span class="kw">&lt;head&gt;</span>
        <span class="kw">&lt;title&gt;</span>标题<span class="kw">&lt;/title&gt;</span>
    <span class="kw">&lt;/head&gt;</span>
    <span class="kw">&lt;body&gt;</span>hello,world<span class="kw">&lt;/body&gt;</span>
<span class="kw">&lt;/html&gt;</span></code></pre></div>
<p>我们便可以在浏览器的最上方看到“标题”二字，就像我们常用的淘宝网，也包含了上面的东西，只是还包括了更多的东西，所以你也可以看懂那些我们可以看到的淘宝的标题。</p>
<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;html&gt;</span>
<span class="kw">&lt;head&gt;</span>
    <span class="kw">&lt;title&gt;</span>标题<span class="kw">&lt;/title&gt;</span>
<span class="kw">&lt;/head&gt;</span>
<span class="kw">&lt;body&gt;</span>
hello,world
<span class="kw">&lt;h1&gt;</span>大标题<span class="kw">&lt;/h1&gt;</span>
<span class="kw">&lt;h2&gt;</span>次标题<span class="kw">&lt;/h2&gt;</span>
<span class="kw">&lt;h3&gt;</span>...<span class="kw">&lt;/h3&gt;</span>
<span class="kw">&lt;ul&gt;</span>
    <span class="kw">&lt;li&gt;</span>列表1<span class="kw">&lt;/li&gt;</span>
    <span class="kw">&lt;li&gt;</span>列表2<span class="kw">&lt;/li&gt;</span>
<span class="kw">&lt;/ul&gt;</span>
<span class="kw">&lt;/body&gt;</span>
<span class="kw">&lt;/html&gt;</span></code></pre></div>
<p>更多的东西可以在一些书籍上看到，这边所要说的只是一次简单的语言入门，其他的东西都和这些类似。</p>
<h3 id="美妙之处"><span class="header-section-number">1.2.1</span> 美妙之处</h3>
<p>我们简单地上手了一门不算是语言的语言，浏览器简化了这其中的大部分过程，虽然没有C和其他语言来得有专业感，但是我们试着去开始写代码了。我们可能在未来的某一篇中可能会看到类似的语言，诸如python，我们所要做的就是</p>
<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash">$ <span class="kw">python</span> file.py
=<span class="kw">&gt;hello</span>,world</code></pre></div>
<p>然后在终端上返回结果。只是因为在我看来学会html是有意义的，简单的上手，然后再慢慢地深入，如果一开始我们就去理解指针，开始去理解类。我们甚至还知道程序是怎么编译运行的时候，在这个过程中又发生了什么。虽然现在我们也没能理解这其中发生了什么，但是至少展示了</p>
<ol style="list-style-type: decimal">
<li>中文编程语言在当前意义不大，不现实，效率不高兼容性差</li>
<li>语言的语法是固定的。（ps:虽然我们也可以进行扩充，我们将会在后来支持上述的中文标记。）</li>
<li>已经开始写代码，而不是还在配置开发环境。</li>
<li>随身的工具才是最好的，最常用的code也才是实在的。</li>
</ol>
<h3 id="更多"><span class="header-section-number">1.2.2</span> 更多</h3>
<p>我们还没有试着去解决“某商店里的糖一颗5块钱，小明买了3颗糖，小明一共花了多少钱”的问题。也就是说我们学会的是一个还不能解决实际问题的语言，于是我们还需要学点东西，比如javascript,css。我们可以将Javascript理解为解决问题的语言，html则是前端显示，css是配置文件，这样的话，我们会在那之后学会成为一个近乎专业的程序员。我们刚刚学习了一下怎么在前端显示那些代码的行为，于是我们还需要Javascript。</p>
</body>
</html>