compile for publish

ideabook.md

@@ -17,7 +17,7 @@
 
 这是一个Web生成的界面，通过Elastic.js向搜索引擎查询数据，将再这些数据渲染到地图上。
 
-###Hadoop + Pig + Jython + AmMap + ElasticSearch
+### Hadoop + Pig + Jython + AmMap + ElasticSearch
 
 我们使用的技术栈有上面这些，他们的简介如下：
 
@@ -37,7 +37,7 @@
  - 转换IP为GEO信息
  - 展示数据到地图上
 
-###Step 1: 搭建基础设施
+### Step 1: 搭建基础设施
 
 在这一些系列的实战中，比较麻烦的就是安装这些工具，我们需要安装上面提到的一系列工具。对于不同的系统来说，都有相似的安装工具：
 
@@ -65,7 +65,7 @@ brew install jython
 
 下面我们就可以尝试去解析我们的日志了。
 
-###Step 2: 解析access.log
+### Step 2: 解析access.log
 
 在开始解析之前，先让我们来看看几条Nginx的日志：
 
@@ -115,7 +115,7 @@ STORE A INTO 'nginx/log' USING org.elasticsearch.hadoop.pig.EsStorage();
 
 接着，我们就可以对值进行一些特殊的处理，如A是转化时间戳后的结果。B是按时间戳排序后的结果。最后，我们再将这些值存储到ElasticSearch对应的索引``nginx/log``中。
 
-###Step 3: 转换IP为GEO信息
+### Step 3: 转换IP为GEO信息
 
 在简单地完成了一个Demo之后，我们就可以将IP转换为GEO信息了，这里我们需要用到一个名为pygeoip的库。GeoIP是一个根据IP地址查询位置的API的集成。它支持对国家、地区、城市、纬度和经度的查询。实际上，就是在一个数据库中有对应的国家和地区的IP段，根据这个IP段，我们就可以获取对应的地理位置。
 
@@ -193,7 +193,7 @@ def get_geo(ip):
 
 代码相应的简单，和一般的Python代码也没有啥区别。这里一些用户自定义函数，在函数的最前面有一个``outputSchema``，用于返回输出的结果。
 
-###Step 4: 展示数据到地图上
+### Step 4: 展示数据到地图上
 
 现在，我们终于可以将数据转化到可视化界面了。开始之前，我们需要几个库
 
@@ -361,7 +361,7 @@ var create_map = function(mapData){
 
 我们可以看到比较麻烦的地方就是生成地图上的数量点，也就是create_map函数。
 
-###练习建议
+### 练习建议
 
 书籍录入移动应用：条形码扫描
 ===
@@ -492,7 +492,10 @@ function saveToDatabase(data, barcodeData) {
 	return self;
 })
 ```	
-###练习建议
+
+### 上传数据
+
+### 练习建议
 
 制作专属Badge
 ===
@@ -540,7 +543,7 @@ function saveToDatabase(data, barcodeData) {
 
 代码： GitHub: [https://github.com/phodal/brand](https://github.com/phodal/brand)
 
-###SVG与SVGWrite
+### SVG与SVGWrite
 
 SVG就是一个XML
 
@@ -617,6 +620,10 @@ dwg.save()
 ![Finally](http://ideabook.phodal.com/images/finally-brand.jpg)
 
 
+### Step 3: 完成
+
+练习建议
+---
 
 
 微信文章编辑器
@@ -652,7 +659,7 @@ Ractive这个框架比React诞生早了一个月，还是以DOM为核心。Racti
  - 重构代码
 
 
-###Step 1: hello,world
+### Step 1: hello,world
 
 下面是一个简单的hello，world。
 
@@ -757,7 +764,7 @@ require(['scripts/app', 'ractive', 'scripts/views/titleView', 'scripts/views/hrV
 
 在那之前，你自然需要先clone代码。然后在这里我们不同的几个模块进行初始化，并且为colorPicker配置了相应的监听事件。现在，让我们先到App模块中，看看我们做了些什么事？
 
-###Step 3: 初始化
+### Step 3: 初始化
 
 初始化模块一共分为两部分，一部分是对CKEditor的初始化，一部分则是对colorPicker的初始化。
 
@@ -835,7 +842,7 @@ CKEditor自身的编辑器配置比较长，我们就不在这里面列出这些
 
 而实际上在这里我们已经完成了大部分的工作。
 
-###Step 4: 创建对应的View
+### Step 4: 创建对应的View
 
 在这个项目里，比较麻烦的地方就是使用同样的颜色来显示一个模板，如下的代码是用于显示水平线的模板：
 
@@ -883,7 +890,7 @@ parasView.on('changeColor', function(args) {
 });
 ```      
 
-###练习建议
+### 练习建议
 
 
 JavaScript制作Slide框架

index.html

@@ -103,6 +103,7 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
 <li><a href="#步骤-1">步骤</a><ul>
 <li><a href="#step-1-zxing扫描与douban-api">Step 1: ZXing扫描与Douban API</a></li>
 <li><a href="#step-2-存储数据库">Step 2: 存储数据库</a></li>
+<li><a href="#上传数据">上传数据</a></li>
 <li><a href="#练习建议-1">练习建议</a></li>
 </ul></li>
 </ul></li>
@@ -115,7 +116,9 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
 <li><a href="#步骤-2">步骤</a><ul>
 <li><a href="#step-1-基本图形">Step 1: 基本图形</a></li>
 <li><a href="#step-2-高级badge">Step 2: 高级Badge</a></li>
+<li><a href="#step-3-完成">Step 3: 完成</a></li>
 </ul></li>
+<li><a href="#练习建议-2">练习建议</a></li>
 </ul></li>
 <li><a href="#微信文章编辑器">微信文章编辑器</a><ul>
 <li><a href="#概况-3">概况</a><ul>
@@ -128,7 +131,7 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
 <li><a href="#step-2-require.js模块化">Step 2: Require.js模块化</a></li>
 <li><a href="#step-3-初始化">Step 3: 初始化</a></li>
 <li><a href="#step-4-创建对应的view">Step 4: 创建对应的View</a></li>
-<li><a href="#练习建议-2">练习建议</a></li>
+<li><a href="#练习建议-3">练习建议</a></li>
 </ul></li>
 </ul></li>
 <li><a href="#javascript制作slide框架">JavaScript制作Slide框架</a><ul>
@@ -144,7 +147,7 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
 <li><a href="#step-4-解析字幕">Step 4: 解析字幕</a></li>
 <li><a href="#step-5-进度条">Step 5: 进度条</a></li>
 <li><a href="#step-6-同步">Step 6: 同步</a></li>
-<li><a href="#练习建议-3">练习建议</a></li>
+<li><a href="#练习建议-4">练习建议</a></li>
 </ul></li>
 </ul></li>
 <li><a href="#编辑-发布-分离的博客系统">编辑-发布-分离的博客系统</a><ul>
@@ -207,7 +210,7 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
 <li><a href="#step-3-寻找所需要的函数">Step 3: 寻找所需要的函数</a></li>
 <li><a href="#step-4-整合">Step 4: 整合</a></li>
 <li><a href="#step-5-测试">Step 5: 测试</a></li>
-<li><a href="#练习建议-4">练习建议</a></li>
+<li><a href="#练习建议-5">练习建议</a></li>
 </ul></li>
 </ul></li>
 <li><a href="#制作简易mac-os上的伪锁屏工具">制作简易Mac OS上的伪锁屏工具</a><ul>
@@ -261,7 +264,7 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
 <li><a href="#step-3-node-oculus-websocket">Step 3: Node Oculus WebSocket</a></li>
 <li><a href="#step-4-oculus-effect-dk2-control">Step 4: Oculus Effect + DK2 Control</a></li>
 <li><a href="#step-5-three.js-keyhandler">Step 5: Three.js KeyHandler</a></li>
-<li><a href="#练习建议-5">练习建议</a></li>
+<li><a href="#练习建议-6">练习建议</a></li>
 </ul></li>
 </ul></li>
 <li><a href="#手动制作照片地图">手动制作照片地图</a><ul>
@@ -273,7 +276,7 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
 <li><a href="#步骤-14">步骤</a><ul>
 <li><a href="#step-1-解析读取照片信息">Step 1: 解析读取照片信息</a></li>
 <li><a href="#step-2-上传数据">Step 2: 上传数据</a></li>
-<li><a href="#练习建议-6">练习建议</a></li>
+<li><a href="#练习建议-7">练习建议</a></li>
 </ul></li>
 </ul></li>
 <li><a href="#d3.js打造技能树">D3.js打造技能树</a><ul>
@@ -713,6 +716,7 @@ def get_geo(ip):
     <span class="op">};</span>
     <span class="cf">return</span> self<span class="op">;</span>
 <span class="op">}</span>)</code></pre></div>
+<h3 id="上传数据">上传数据</h3>
 <h3 id="练习建议-1">练习建议</h3>
 <h1 id="制作专属badge">制作专属Badge</h1>
 <h2 id="概况-2">概况</h2>
@@ -807,6 +811,8 @@ dwg.save()</code></pre></div>
 <figure>
 <img src="http://ideabook.phodal.com/images/finally-brand.jpg" alt="Finally" /><figcaption>Finally</figcaption>
 </figure>
+<h3 id="step-3-完成">Step 3: 完成</h3>
+<h2 id="练习建议-2">练习建议</h2>
 <h1 id="微信文章编辑器">微信文章编辑器</h1>
 <h2 id="概况-3">概况</h2>
 <h3 id="背景-3">背景</h3>
@@ -1006,7 +1012,7 @@ dwg.save()</code></pre></div>
 <pre><code>parasView.on(&#39;changeColor&#39;, function(args) {
   parasView.findComponent(&#39;Grid&#39;).set(&#39;hrStyle.*.color&#39;, args.color);
 });</code></pre>
-<h3 id="练习建议-2">练习建议</h3>
+<h3 id="练习建议-3">练习建议</h3>
 <h1 id="javascript制作slide框架">JavaScript制作Slide框架</h1>
 <h2 id="概况-4">概况</h2>
 <h3 id="背景-4">背景</h3>
@@ -1136,7 +1142,7 @@ dwg.save()</code></pre></div>
 <p>正常情况下，我们只用一个标签来展示我们的slide。当我们有另外一个标签的时候，我们就可以存储当前的slide。</p>
 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">localStorage</span>.<span class="at">setItem</span>(<span class="st">&#39;echoesworks&#39;</span><span class="op">,</span> index)<span class="op">;</span></code></pre></div>
 <p>这样就可以实现，在一个页面到下一页时，另外一个标签也会跳到下一页。</p>
-<h3 id="练习建议-3">练习建议</h3>
+<h3 id="练习建议-4">练习建议</h3>
 <h1 id="编辑-发布-分离的博客系统">编辑-发布-分离的博客系统</h1>
 <h2 id="概况-5">概况</h2>
 <h3 id="背景-编辑-发布-开发分离">背景: 编辑-发布-开发分离</h3>
@@ -2148,7 +2154,7 @@ root.Lettuce = Lettuce;
 <h3 id="step-3-寻找所需要的函数">Step 3: 寻找所需要的函数</h3>
 <h3 id="step-4-整合">Step 4: 整合</h3>
 <h3 id="step-5-测试">Step 5: 测试</h3>
-<h3 id="练习建议-4">练习建议</h3>
+<h3 id="练习建议-5">练习建议</h3>
 <h1 id="制作简易mac-os上的伪锁屏工具">制作简易Mac OS上的伪锁屏工具</h1>
 <h2 id="概况-10">概况</h2>
 <h3 id="背景-9">背景</h3>
@@ -3573,7 +3579,7 @@ yaw = (rotation about (Pitch • Raw • Z));”</code></pre>
     <span class="kw">this</span>.<span class="va">camera</span>.<span class="va">position</span>.<span class="at">y</span> <span class="op">=</span> <span class="op">-</span><span class="dv">10</span><span class="op">;</span>
 <span class="op">}</span></code></pre></div>
 <p>快接上你的HMD试试吧~~</p>
-<h3 id="练习建议-5">练习建议</h3>
+<h3 id="练习建议-6">练习建议</h3>
 <h1 id="手动制作照片地图">手动制作照片地图</h1>
 <h2 id="概况-14">概况</h2>
 <h3 id="background把照片放在地图上">Background:把照片放在地图上</h3>
@@ -3702,7 +3708,7 @@ jsonFile.writelines(<span class="st">&#39;]}</span><span class="ch">\n</span><sp
 jsonFile.close()</code></pre></div>
 <h3 id="step-2-上传数据">Step 2: 上传数据</h3>
 <p>注册CartoDB，然后上传数据。</p>
-<h3 id="练习建议-6">练习建议</h3>
+<h3 id="练习建议-7">练习建议</h3>
 <p>无</p>
 <h1 id="d3.js打造技能树">D3.js打造技能树</h1>
 <h2 id="概况-15">概况</h2>