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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
							<!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="#无处不在的css"><span class="toc-section-number">1</span> 无处不在的CSS</a><ul>
<li><a href="#css"><span class="toc-section-number">1.1</span> CSS</a></li>
<li><a href="#关于css"><span class="toc-section-number">1.2</span> 关于CSS</a></li>
<li><a href="#代码结构"><span class="toc-section-number">1.3</span> 代码结构</a></li>
<li><a href="#样式与目标"><span class="toc-section-number">1.4</span> 样式与目标</a><ul>
<li><a href="#选择器"><span class="toc-section-number">1.4.1</span> 选择器</a></li>
</ul></li>
<li><a href="#更有趣的css"><span class="toc-section-number">1.5</span> 更有趣的CSS</a></li>
</ul></li>
</ul>
</div>
<h1 id="无处不在的css"><span class="header-section-number">1</span> 无处不在的CSS</h1>
<p>或许你觉得CSS一点儿也不重要，而事实上，如果说HTML是建筑的框架，CSS就是房子的装修。那么Javascript呢，我听到的最有趣的说法是小三——还是先让我们回到代码上来吧。</p>
<h2 id="css"><span class="header-section-number">1.1</span> CSS</h2>
<p>下面就是我们之前说到的代码，css将Red三个字母变成了红色。</p>
<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
<span class="kw">&lt;html&gt;</span>
<span class="kw">&lt;head&gt;</span>
<span class="kw">&lt;/head&gt;</span>
<span class="kw">&lt;body&gt;</span>
    <span class="kw">&lt;p</span><span class="ot"> id=</span><span class="st">&quot;para&quot;</span><span class="ot"> style=</span><span class="st">&quot;color:red&quot;</span><span class="kw">&gt;</span>Red<span class="kw">&lt;/p&gt;</span>
<span class="kw">&lt;/body&gt;</span>
    <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="ot"> src=</span><span class="st">&quot;app.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span>
<span class="kw">&lt;/html&gt;</span></code></pre></div>
<p>只是，</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> para<span class="op">=</span><span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&quot;para&quot;</span>)<span class="op">;</span>
<span class="va">para</span>.<span class="va">style</span>.<span class="at">color</span><span class="op">=</span><span class="st">&quot;blue&quot;</span><span class="op">;</span></code></pre></div>
<p>将字体变成了蓝色，CSS+HTML让页面有序的工作着，但是Javascript却打乱了这些秩序，有着唯恐世界不乱的精彩，也难怪被冠以小三之名了——或许终于可以理解，为什么以前人们对于Javascript没有好感了——不过这里要讲的是正室，也就是CSS，这时还没有Javascript。</p>
<div class="figure">
<img src="./images/redfonts.png" alt="Red Fonts" />
<p class="caption">Red Fonts</p>
</div>
<h2 id="关于css"><span class="header-section-number">1.2</span> 关于CSS</h2>
<p>这不是一篇专业讲述CSS的书籍，所以我不会去说CSS是怎么来的，有些东西我们既然可以很容易从其他地方知道，也就不需要花太多时间去重复。诸如重构等这些的目的之一也在于去除重复的代码，不过有些重复是不可少的，也是有必要的，而通常这些东西可能是由其他地方复制过来的。</p>
<p>到目前为止我们没有依赖于任何特殊的硬件或者是软件，对于我们来说我们最基本的需求就是一台电脑，或者可以是你的平板电脑，当然也可以是你的智能手机，因为他们都有个浏览器，而这些都是能用的，对于我们的CSS来说也不会有例外的。</p>
<p>CSS(Cascading Style Sheets)，到今天我也没有记得他的全称，CSS还有一个中文名字是层叠式样式表，事实上翻译成什么可能并不是我们关心的内容，我们需要关心的是他能做些什么。作为三剑客之一，它的主要目的在于可以让我们方便灵活地去控制Web页面的外观表现。我们可以用它做出像淘宝一样复杂的界面，也可以像我们的书本一样简单，不过如果要和我们书本一样简单的话，可能不需要用到CSS。HTML一开始就是依照报纸的格式而设计的，我们还可以继续用上面说到的编辑器，又或者是其他的。如果你喜欢DreamWeaver那也不错，不过一开始使用IDE可无助于我们写出良好的代码。</p>
<p>忘说了，CSS也是有版本的，和windows，Linux内核等等一样，但是更新可能没有那么频繁，HTML也是有版本的，JS也是有版本的，复杂的东西不是当前考虑的内容。</p>
<h2 id="代码结构"><span class="header-section-number">1.3</span> 代码结构</h2>
<p>对于我们的上面的Red示例来说，如果没有一个好的结构，那么以后可能就是这样子。</p>
<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
<span class="kw">&lt;html&gt;</span>
<span class="kw">&lt;head&gt;</span>
<span class="kw">&lt;/head&gt;</span>
<span class="kw">&lt;body&gt;</span>
    <span class="kw">&lt;p</span><span class="ot"> style=</span><span class="st">&quot;font-size: 22px;color:#f00;text-align: center;padding-left: 20px;&quot;</span><span class="kw">&gt;</span>如果没有一个好的结构<span class="kw">&lt;/p&gt;</span>
    <span class="kw">&lt;p</span><span class="ot"> style=</span><span class="st">&quot;  font-size:44px;color:#3ed;text-indent: 2em;padding-left: 2em;&quot;</span><span class="kw">&gt;</span>那么以后可能就是这样子。。。。<span class="kw">&lt;/p&gt;</span>
<span class="kw">&lt;/body&gt;</span>
<span class="kw">&lt;/html&gt;</span></code></pre></div>
<p>虽然我们看到的还是一样的:</p>
<div class="figure">
<img src="./images/nostyle.png" alt="No Style" />
<p class="caption">No Style</p>
</div>
<p>于是我们就按各种书上的建议重新写了上面的代码</p>
<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
<span class="kw">&lt;html&gt;</span>
<span class="kw">&lt;head&gt;</span>
    <span class="kw">&lt;title&gt;</span>CSS example<span class="kw">&lt;/title&gt;</span>
    <span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="kw">&gt;</span>
        <span class="fl">.para</span><span class="kw">{</span>
            <span class="kw">font-size:</span> <span class="dt">22px</span><span class="kw">;</span>
            <span class="kw">color:</span><span class="dt">#f00</span><span class="kw">;</span>
            <span class="kw">text-align:</span> <span class="dt">center</span><span class="kw">;</span>
            <span class="kw">padding-left:</span> <span class="dt">20px</span><span class="kw">;</span>
        <span class="kw">}</span>
        <span class="fl">.para2</span><span class="kw">{</span>
            <span class="kw">font-size:</span><span class="dt">44px</span><span class="kw">;</span>
            <span class="kw">color:</span><span class="dt">#3ed</span><span class="kw">;</span>
            <span class="kw">text-indent:</span> <span class="dt">2em</span><span class="kw">;</span>
            <span class="kw">padding-left:</span> <span class="dt">2em</span><span class="kw">;</span>
        <span class="kw">}</span>
    <span class="kw">&lt;/style&gt;</span>
<span class="kw">&lt;/head&gt;</span>
<span class="kw">&lt;body&gt;</span>
    <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;para&quot;</span><span class="kw">&gt;</span>如果没有一个好的结构<span class="kw">&lt;/p&gt;</span>
    <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;para2&quot;</span><span class="kw">&gt;</span>那么以后可能就是这样子。。。。<span class="kw">&lt;/p&gt;</span>
<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="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
<span class="kw">&lt;html&gt;</span>
<span class="kw">&lt;head&gt;</span>
    <span class="kw">&lt;title&gt;</span>CSS example<span class="kw">&lt;/title&gt;</span>
    <span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="ot"> href=</span><span class="st">&quot;style.css&quot;</span><span class="kw">&gt;&lt;/style&gt;</span>
<span class="kw">&lt;/head&gt;</span>
<span class="kw">&lt;body&gt;</span>
    <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;para&quot;</span><span class="kw">&gt;</span>如果没有一个好的结构<span class="kw">&lt;/p&gt;</span>
    <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;para2&quot;</span><span class="kw">&gt;</span>那么以后可能就是这样子。。。。<span class="kw">&lt;/p&gt;</span>
<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="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
<span class="kw">&lt;html&gt;</span>
<span class="kw">&lt;head&gt;</span>
    <span class="kw">&lt;title&gt;</span>CSS example<span class="kw">&lt;/title&gt;</span>
    <span class="kw">&lt;link</span><span class="ot"> href=</span><span class="st">&quot;./style.css&quot;</span><span class="ot"> rel=</span><span class="st">&quot;stylesheet&quot;</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span> <span class="kw">/&gt;</span>
<span class="kw">&lt;/head&gt;</span>
<span class="kw">&lt;body&gt;</span>
    <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;para&quot;</span><span class="kw">&gt;</span>如果没有一个好的结构<span class="kw">&lt;/p&gt;</span>
    <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;para2&quot;</span><span class="kw">&gt;</span>那么以后可能就是这样子。。。。<span class="kw">&lt;/p&gt;</span>
<span class="kw">&lt;/body&gt;</span>
<span class="kw">&lt;/html&gt;</span></code></pre></div>
<p>然后我们有一个像app.js一样的style.css放在同目录下，而他的内容便是</p>
<div class="sourceCode"><pre class="sourceCode css"><code class="sourceCode css"><span class="fl">.para</span><span class="kw">{</span>
    <span class="kw">font-size:</span> <span class="dt">22px</span><span class="kw">;</span>
    <span class="kw">color:</span><span class="dt">#f00</span><span class="kw">;</span>
    <span class="kw">text-align:</span> <span class="dt">center</span><span class="kw">;</span>
    <span class="kw">padding-left:</span> <span class="dt">20px</span><span class="kw">;</span>
<span class="kw">}</span>
<span class="fl">.para2</span><span class="kw">{</span>
    <span class="kw">font-size:</span><span class="dt">44px</span><span class="kw">;</span>
    <span class="kw">color:</span><span class="dt">#3ed</span><span class="kw">;</span>
    <span class="kw">text-indent:</span> <span class="dt">2em</span><span class="kw">;</span>
    <span class="kw">padding-left:</span> <span class="dt">2em</span><span class="kw">;</span>
<span class="kw">}</span></code></pre></div>
<p>这代码和JS的代码有如此多的相似</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> para<span class="op">={</span>
    <span class="dt">font_size</span><span class="op">:</span><span class="st">&#39;22px&#39;</span><span class="op">,</span>
    <span class="dt">color</span><span class="op">:</span><span class="st">&#39;#f00&#39;</span><span class="op">,</span>
    <span class="dt">text_align</span><span class="op">:</span><span class="st">&#39;center&#39;</span><span class="op">,</span>
    <span class="dt">padding_left</span><span class="op">:</span><span class="st">&#39;20px&#39;</span><span class="op">,</span>
<span class="op">}</span></code></pre></div>
<p>而22px、20px以及#f00都是数值，因此：</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> para<span class="op">={</span>
    <span class="dt">font_size</span><span class="op">:</span>22px<span class="op">,</span>
    <span class="dt">color</span><span class="op">:</span>#f00<span class="op">,</span>
    <span class="dt">text_align</span><span class="op">:</span>center<span class="op">,</span>
    <span class="dt">padding_left</span><span class="op">:</span>20px<span class="op">,</span>
<span class="op">}</span>   </code></pre></div>
<p>目测差距已经尽可能的小了，至于这些话题会在以后讨论到，如果要让我们的编译器更正确的工作，那么我们就需要非常多这样的符号，除非你乐意去理解:</p>
<pre class="lisp"><code>(dotimes (i 4) (print i))</code></pre>
<p>总的来说我们减少了符号的使用，但是用lisp便带入了更多的括号，不过这是一种简洁的表达方式，也许我们可以在其他语言中看到。</p>
<pre class="regex"><code>\d{2}/[A-Z][a-z][a-z]/\d{4}</code></pre>
<p>上面的代码，是为了从一堆数据中找出“某日/某月/某年”。如果一开始不理解那是正则表达式，就会觉得那个很复杂。</p>
<p>这门语言可能是为设计师而设计的，但是设计师大部分还是不懂编程的，不过相对来说这门语言还是比其他语言简单易懂一些。</p>
<h2 id="样式与目标"><span class="header-section-number">1.4</span> 样式与目标</h2>
<p>如下所示，就是我们的样式</p>
<div class="sourceCode"><pre class="sourceCode css"><code class="sourceCode css"><span class="fl">.para</span><span class="kw">{</span>
    <span class="kw">font-size:</span> <span class="dt">22px</span><span class="kw">;</span>
    <span class="kw">color:</span><span class="dt">#f00</span><span class="kw">;</span>
    <span class="kw">text-align:</span> <span class="dt">center</span><span class="kw">;</span>
    <span class="kw">padding-left:</span> <span class="dt">20px</span><span class="kw">;</span>
<span class="kw">}</span></code></pre></div>
<p>我们的目标就是</p>
<pre><code>如果没有一个好的结构</code></pre>
<p>所以样式和目标在这里牵手了，问题是他们是如何在一起的呢？下面就是CSS与HTML沟通的重点所在了:</p>
<h3 id="选择器"><span class="header-section-number">1.4.1</span> 选择器</h3>
<p>我们用到的选择器叫做类选择器，也就是class，或者说应该称之为class选择器更合适。与类选择器最常一起出现的是ID选择器，不过这个适用于比较高级的场合，诸如用JS控制DOM的时候就需要用到ID选择器。而基本的选择器就是如下面的例子:</p>
<pre><code>p.para{
    color:#f0f;
}</code></pre>
<p>将代码添加到style.css的最下面会发现“如果没有一个好的结构”变成了粉红色，当然我们还会有这样的写法</p>
<pre><code>p&gt;.para{
    color:#f0f;
}</code></pre>
<p>为了产生上面的特殊的样式，虽然不好看，但是我们终于理解什么叫层叠样式了，下面的代码的重要度比上面高，也因此有更高的优先规则。</p>
<p>而通常我们可以通过一个</p>
<pre><code>p{
    text-align:left;
}</code></pre>
<p>这样的元素选择器来给予所有的p元素一个左对齐。</p>
<p>还有复杂一点的复合型选择器，下面的是HTML文件</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;CSS example&lt;/title&gt;
    &lt;link href=&quot;./style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p class=&quot;para&quot;&gt;如果没有一个好的结构&lt;/p&gt;
    &lt;div id=&quot;content&quot;&gt;
        &lt;p class=&quot;para2&quot;&gt;那么以后可能就是这样子。。。。&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>还有CSS文件</p>
<pre><code>.para{
    font-size: 22px;
    color:#f00;
    text-align: center;
    padding-left: 20px;
}
.para2{
    font-size:44px;
    color:#3ed;
    text-indent: 2em;
    padding-left: 2em;
}

p.para{
    color:#f0f;
}
div#content p {
    font-size:22px;
}</code></pre>
<h2 id="更有趣的css"><span class="header-section-number">1.5</span> 更有趣的CSS</h2>
<p>一个包含了para2以及para_bg的例子</p>
<pre><code>    &lt;div id=&quot;content&quot;&gt;
        &lt;p class=&quot;para2 para_bg&quot;&gt;那么以后可能就是这样子。。。。&lt;/p&gt;
    &lt;/div&gt;
    </code></pre>
<p>我们只是添加了一个黑色的背景</p>
<pre><code>.para_bg{
    background-color:#000;
}</code></pre>
<p>重新改变后的网页变得比原来有趣了很多，所谓的继承与合并就是上面的例子。</p>
<p>我们还可以用CSS3做出更多有趣的效果，而这些并不在我们的讨论范围里面，因为我们讨论的是be a geek。</p>
<p>或许我们写的代码都是那么的简单，从HTML到Javascript，还有现在的CSS，只是总有一些核心的东西，而不是去考虑那些基础语法，基础的东西我们可以在实践的过程中一一发现。但是我们可能发现不了，或者在平时的使用中考虑不到一些有趣的用法或者说特殊的用法，这时候可以通过观察一些精致设计的代码中学习到。复杂的东西可以变得很简单，简单的东西也可以变得很复杂。</p>
</body>
</html>