|
|
@@ -4,7 +4,7 @@
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="generator" content="pandoc">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
|
|
- <title>Phodal's Idea实战指南 - </title>
|
|
|
+ <title>Phodal's Idea实战指南 – </title>
|
|
|
<style type="text/css">code{white-space: pre;}</style>
|
|
|
<style type="text/css">
|
|
|
div.sourceCode { overflow-x: auto; }
|
|
|
@@ -319,7 +319,7 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
|
|
|
<h3 id="showcase">ShowCase</h3>
|
|
|
<p>最后的效果如下图如示：</p>
|
|
|
<figure>
|
|
|
-<img src="./images/map_with_bg.jpg" alt="Demo" /><figcaption>Demo</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/map_with_bg.jpg" alt="Demo" /><figcaption>Demo</figcaption>
|
|
|
</figure>
|
|
|
<p>这是一个Web生成的界面，通过Elastic.js向搜索引擎查询数据，将再这些数据渲染到地图上。</p>
|
|
|
<h3 id="hadoop-pig-jython-ammap-elasticsearch">Hadoop + Pig + Jython + AmMap + ElasticSearch</h3>
|
|
|
@@ -625,7 +625,7 @@ def get_geo(ip):
|
|
|
<h3 id="showcase-1">ShowCase</h3>
|
|
|
<p>最后的效果如下图所示：</p>
|
|
|
<figure>
|
|
|
-<img src="./images/bookshelf.jpg" alt="Bookshelf" /><figcaption>Bookshelf</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/bookshelf.jpg" alt="Bookshelf" /><figcaption>Bookshelf</figcaption>
|
|
|
</figure>
|
|
|
<p>代码见： <a href="https://github.com/phodal/bookshelf/" class="uri">https://github.com/phodal/bookshelf/</a></p>
|
|
|
<h3 id="ionic-zxing">Ionic + Zxing</h3>
|
|
|
@@ -710,11 +710,11 @@ def get_geo(ip):
|
|
|
<h3 id="背景-2">背景</h3>
|
|
|
<p>前几天，再次看到一些CI的Badge的时候，就想着要做一个自己的Badge:</p>
|
|
|
<figure>
|
|
|
-<img src="./images/badge.png" alt="Badge" /><figcaption>Badge</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/badge.png" alt="Badge" /><figcaption>Badge</figcaption>
|
|
|
</figure>
|
|
|
<p>接着，我就找了个图形工具简单地先设计了下面的一个Badge:</p>
|
|
|
<figure>
|
|
|
-<img src="./images/demo.png" alt="Demo" /><figcaption>Demo</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/demo.png" alt="Demo" /><figcaption>Demo</figcaption>
|
|
|
</figure>
|
|
|
<p>生成的格式是SVG，接着我就打开SVG看看里面发现了什么。</p>
|
|
|
<div class="sourceCode"><pre class="sourceCode xml"><code class="sourceCode xml"><span class="kw"><?xml</span> version="1.0" encoding="UTF-8" standalone="no"<span class="kw">?></span>
|
|
|
@@ -737,7 +737,7 @@ def get_geo(ip):
|
|
|
<p>看了看代码很简单，我就想这可以用代码生成——我就可以生成出不同的样子了。</p>
|
|
|
<h3 id="showcase-2">ShowCase</h3>
|
|
|
<figure>
|
|
|
-<img src="./images/finally-brand.jpg" alt="Finally" /><figcaption>Finally</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/finally-brand.jpg" alt="Finally" /><figcaption>Finally</figcaption>
|
|
|
</figure>
|
|
|
<p>代码： GitHub: <a href="https://github.com/phodal/brand" class="uri">https://github.com/phodal/brand</a></p>
|
|
|
<h3 id="svg与svgwrite">SVG与SVGWrite</h3>
|
|
|
@@ -774,7 +774,7 @@ dwg.save()</code></pre></div>
|
|
|
<h3 id="step-2-高级badge">Step 2: 高级Badge</h3>
|
|
|
<p>第一眼看到</p>
|
|
|
<figure>
|
|
|
-<img src="./images/brand-idea-prototype.jpg" alt="Idea Prototype" /><figcaption>Idea Prototype</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/brand-idea-prototype.jpg" alt="Idea Prototype" /><figcaption>Idea Prototype</figcaption>
|
|
|
</figure>
|
|
|
<p>我就想着要不和这个一样好了，不就是画几条线的事么。</p>
|
|
|
<div class="sourceCode"><pre class="sourceCode python"><code class="sourceCode python">
|
|
|
@@ -796,14 +796,14 @@ dwg.save()</code></pre></div>
|
|
|
draw_for_bg_plus()</code></pre></div>
|
|
|
<p>就有了下面的图，于是我又按照这种感觉来了好几下</p>
|
|
|
<figure>
|
|
|
-<img src="./images/finally-brand.jpg" alt="Finally" /><figcaption>Finally</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/finally-brand.jpg" alt="Finally" /><figcaption>Finally</figcaption>
|
|
|
</figure>
|
|
|
<h1 id="web文本编辑器">Web文本编辑器</h1>
|
|
|
<h2 id="概况-3">概况</h2>
|
|
|
<h3 id="背景-3">背景</h3>
|
|
|
<h3 id="showcase-3">ShowCase</h3>
|
|
|
<figure>
|
|
|
-<img src="./images/congee.jpg" alt="Screenshot" /><figcaption>Screenshot</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/congee.jpg" alt="Screenshot" /><figcaption>Screenshot</figcaption>
|
|
|
</figure>
|
|
|
<p>GitHub: <a href="https://github.com/phodal/congee" class="uri">https://github.com/phodal/congee</a></p>
|
|
|
<h3 id="ckeditor-ractive">CKEditor + Ractive</h3>
|
|
|
@@ -1004,7 +1004,7 @@ dwg.save()</code></pre></div>
|
|
|
<p>又开始造一个新的轮子了，不过这次的起因比较简单，是想重新发明一个更好的Slide框架 —— EchoesWorks。如名字所言，我所需要的是一个<code>回声</code>工坊，即将博客、Slide重新回放。</p>
|
|
|
<h3 id="showcase-4">Showcase</h3>
|
|
|
<figure>
|
|
|
-<img src="./images/echoesworks.jpg" alt="EchoesWorks" /><figcaption>EchoesWorks</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/echoesworks.jpg" alt="EchoesWorks" /><figcaption>EchoesWorks</figcaption>
|
|
|
</figure>
|
|
|
<p>GitHub代码： <a href="https://github.com/phodal/echoesworks" class="uri">https://github.com/phodal/echoesworks</a></p>
|
|
|
<h3 id="需求">需求</h3>
|
|
|
@@ -1146,7 +1146,7 @@ dwg.save()</code></pre></div>
|
|
|
</blockquote>
|
|
|
<p>为了实现之前说到的<code>编辑-发布-开发分离</code>的CMS，我还是花了两天的时间打造了一个面向普通用户的编辑器。效果截图如下所示：</p>
|
|
|
<figure>
|
|
|
-<img src="./images/eche-editor-screenshot.png" alt="Echeveria Editor" /><figcaption>Echeveria Editor</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/eche-editor-screenshot.png" alt="Echeveria Editor" /><figcaption>Echeveria Editor</figcaption>
|
|
|
</figure>
|
|
|
<p>作为一个普通用户，这是一个很简单的软件。除了Electron + Node.js + React作了一个140M左右的软件，尽管打包完只有40M左右 ，但是还是会把用户吓跑的。不过作为一个快速构建的原型已经很不错了——构建速度很快、并且运行良好。</p>
|
|
|
<p>尽管这个界面看上去还是稍微复杂了一下，还在试着想办法将链接名和日期去掉——问题是为什么会有这两个东西？</p>
|
|
|
@@ -1187,7 +1187,7 @@ dwg.save()</code></pre></div>
|
|
|
<h4 id="git作为nosql数据库">git作为NoSQL数据库</h4>
|
|
|
<p>在控制台中运行一下 <code>man git</code>你会得到下面的结果:</p>
|
|
|
<figure>
|
|
|
-<img src="./images/man-git.png" alt="Man Git" /><figcaption>Man Git</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/man-git.png" alt="Man Git" /><figcaption>Man Git</figcaption>
|
|
|
</figure>
|
|
|
<p>这个答案看起来很有意思——不过这看上去似乎无关主题。</p>
|
|
|
<p>不同的数据库会以不同的形式存储到文件中去。blob是git中最为基本的存储单位，我们的每个content都是一个blob。redis可以以rdb文件的形式存储到文件系统中。完成一个CMS，我们并不需要那么多的查询功能。</p>
|
|
|
@@ -1212,11 +1212,11 @@ dwg.save()</code></pre></div>
|
|
|
<li>git push Carrot使用了下面的方案来搭建他们的静态内容的CMS。</li>
|
|
|
</ol>
|
|
|
<figure>
|
|
|
-<img src="./images/carrot.png" alt="Carrot" /><figcaption>Carrot</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/carrot.png" alt="Carrot" /><figcaption>Carrot</figcaption>
|
|
|
</figure>
|
|
|
<p>在这个方案里内容是用Contentful来发布他们的内容。而在我司<a href="https://www.thoughtworks.com/">ThoughtWorks</a>的官网里则采用了Github来管理这些内容。于是如果让我们写一个基于Github的CMS，那么架构变成了这样：</p>
|
|
|
<figure>
|
|
|
-<img src="./images/travis-edit-publish-code.png" alt="Github 编辑-发布-开发" /><figcaption>Github 编辑-发布-开发</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/travis-edit-publish-code.png" alt="Github 编辑-发布-开发" /><figcaption>Github 编辑-发布-开发</figcaption>
|
|
|
</figure>
|
|
|
<p>或许你也用过Hexo / Jekyll / Octopress这样的静态博客，他们的原理都是类似的。我们有一个代码库用于生成静态页面，然后这些静态页面会被PUSH到Github Pages上。</p>
|
|
|
<p>从我们设计系统的角度来说，我们会在Github上有三个代码库：</p>
|
|
|
@@ -1246,8 +1246,8 @@ dwg.save()</code></pre></div>
|
|
|
<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">travis</span> encrypt-file ssh_key --add</code></pre></div>
|
|
|
<p>加密后的Key就会保存到<code>.travis.yml</code>文件里，然后就可以在Travis CI上push你的代码到Github上了。</p>
|
|
|
<p>接着，你需要创建个deploy脚本，并且在<code>after_success</code>执行它：</p>
|
|
|
-<pre class="yml"><code>after_success:
|
|
|
- - test $TRAVIS_PULL_REQUEST == "false" && test $TRAVIS_BRANCH == "master" && bash deploy.sh</code></pre>
|
|
|
+<div class="sourceCode"><pre class="sourceCode yml"><code class="sourceCode yaml"><span class="fu">after_success:</span>
|
|
|
+ <span class="kw">-</span> test $TRAVIS_PULL_REQUEST == <span class="st">"false"</span> && test $TRAVIS_BRANCH == <span class="st">"master"</span> && bash deploy.sh</code></pre></div>
|
|
|
<p>在这个脚本里，你所需要做的就是clone content和code中的代码，并执行code中的生成脚本，生成新的内容后，提交代码。</p>
|
|
|
<pre><code>#!/bin/bash
|
|
|
|
|
|
@@ -1345,7 +1345,7 @@ git push -q upstream HEAD:gh-pages</code></pre>
|
|
|
<h3 id="背景-5">背景</h3>
|
|
|
<h3 id="showcase-5">Showcase</h3>
|
|
|
<figure>
|
|
|
-<img src="./images/gmap-solr.jpg" alt="Google Map Solr" /><figcaption>Google Map Solr</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/gmap-solr.jpg" alt="Google Map Solr" /><figcaption>Google Map Solr</figcaption>
|
|
|
</figure>
|
|
|
<p>GitHub <a href="https://github.com/phodal/gmap-solr" class="uri">https://github.com/phodal/gmap-solr</a></p>
|
|
|
<h3 id="solr">Solr</h3>
|
|
|
@@ -1414,7 +1414,7 @@ api.add_resource(All, <span class="st">'/geo/'</span>)</code></pre></div
|
|
|
<h3 id="showcase-6">ShowCase</h3>
|
|
|
<p>截图合并如下：</p>
|
|
|
<figure>
|
|
|
-<img src="./images/growth-full-platforms.jpg" alt="growth-full-platforms.png" /><figcaption>growth-full-platforms.png</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/growth-full-platforms.jpg" alt="growth-full-platforms.png" /><figcaption>growth-full-platforms.png</figcaption>
|
|
|
</figure>
|
|
|
<h3 id="ionic-electron-cordova">Ionic & Electron & Cordova</h3>
|
|
|
<p>而更重要的是它们使用了同一份代码——除了对特定设备进行一些处理就没有其他修改。相信全栈的你已经看出来了：</p>
|
|
|
@@ -1437,13 +1437,13 @@ api.add_resource(All, <span class="st">'/geo/'</span>)</code></pre></div
|
|
|
</ul>
|
|
|
<p>接着我用Ionic创建了这个应用，这是一个再普通不过的过程。在这个过程里，我一直使用Chrome在调度我的代码。因为我是Android用户，我有Google Play的账号，便发布了Android版本。这时候遇到了一个问题，我并没有Apple Developer账号(现在在申请ing。。)，而主要的用户对象程序员，这是一群<strong>不土</strong>的土豪。</p>
|
|
|
<figure>
|
|
|
-<img src="./images/iphone.jpg" alt="iPHONE" /><figcaption>iPHONE</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/iphone.jpg" alt="iPHONE" /><figcaption>iPHONE</figcaption>
|
|
|
</figure>
|
|
|
<p>偶然间我才想到，我只要上传Web版本的代码就可以暂时性实现这个需求了。接着找了个AWS S3的插件，直接上传到了AWS S3上托管成静态文件服务。</p>
|
|
|
<p>几天前在Github上收到一个issue——关于创造桌面版， 我便想着这也是可能的，我只需要写一个启动脚本和编译脚本即可。</p>
|
|
|
<p>所以，最后我们的流程图就如下所示：</p>
|
|
|
<figure>
|
|
|
-<img src="./images/growth-arch.png" alt="Growth Arch" /><figcaption>Growth Arch</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/growth-arch.png" alt="Growth Arch" /><figcaption>Growth Arch</figcaption>
|
|
|
</figure>
|
|
|
<p>除了显示到VR设备上，好像什么也不缺了。并且在我之前的文章《<a href="https://github.com/phodal/oculus-nodejs-threejs-example">Oculus + Node.js + Three.js 打造VR世界</a>》，也展示了Web在VR世界的可能性。</p>
|
|
|
<p>在这实现期间有几个点可以分享一下：</p>
|
|
|
@@ -1454,11 +1454,11 @@ api.add_resource(All, <span class="st">'/geo/'</span>)</code></pre></div
|
|
|
<h3 id="step-2-响应式设计">Step 2: 响应式设计</h3>
|
|
|
<p>响应式设计可以主要依赖于Media Query，而响应式设计主要要追随的一点是不同的设备不同的显示，如：</p>
|
|
|
<figure>
|
|
|
-<img src="./images/full-platforms.jpg" alt="full-platforms.jpg" /><figcaption>full-platforms.jpg</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/full-platforms.jpg" alt="full-platforms.jpg" /><figcaption>full-platforms.jpg</figcaption>
|
|
|
</figure>
|
|
|
<p>这也意味着，我们需要对不同的设备进行一些处理，如在大的屏幕下，我们需要展示菜单：</p>
|
|
|
<figure>
|
|
|
-<img src="./images/gnu-linux.jpg" alt="gnu-linux.png" /><figcaption>gnu-linux.png</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/gnu-linux.jpg" alt="gnu-linux.png" /><figcaption>gnu-linux.png</figcaption>
|
|
|
</figure>
|
|
|
<p>而这可以依赖于Ionic的<strong>expose-aside-when=“large”</strong>，而并非所有的情形都是这么简单的。如我最近遇到的问题就是图片缩放的问题，之前的图片针对的都是手机版——经过了一定的缩放。</p>
|
|
|
<p>这时在桌面应用上就会出现问题，就需要限定大小等等。</p>
|
|
|
@@ -1471,14 +1471,14 @@ api.add_resource(All, <span class="st">'/geo/'</span>)</code></pre></div
|
|
|
<h4 id="数据分析">数据分析</h4>
|
|
|
<p>为了开发方便，我使用Google Analytics来分析用户的行为——毕竟数据对我来说也不是特别重要，只要可以看到有人使用就可以了。</p>
|
|
|
<p>这时候遇到的一个问题是，我不需要记录Web用户的行为，但是我希望可以看到有这样的请求发出。于是对于Web用户来说，只需要：</p>
|
|
|
-<pre class="js"><code> trackView: function (view) {
|
|
|
- console.log(view);
|
|
|
- }</code></pre>
|
|
|
+<div class="sourceCode"><pre class="sourceCode js"><code class="sourceCode javascript"> trackView<span class="op">:</span> <span class="kw">function</span> (view) <span class="op">{</span>
|
|
|
+ <span class="va">console</span>.<span class="at">log</span>(view)<span class="op">;</span>
|
|
|
+ <span class="op">}</span></code></pre></div>
|
|
|
<p>而对于手机用户则是:</p>
|
|
|
-<pre class="js"><code> trackView: function (view) {
|
|
|
- $window.analytics.startTrackerWithId('UA-71907748-1');
|
|
|
- $window.analytics.trackView(view)
|
|
|
- }</code></pre>
|
|
|
+<div class="sourceCode"><pre class="sourceCode js"><code class="sourceCode javascript"> trackView<span class="op">:</span> <span class="kw">function</span> (view) <span class="op">{</span>
|
|
|
+ <span class="va">$window</span>.<span class="va">analytics</span>.<span class="at">startTrackerWithId</span>(<span class="st">'UA-71907748-1'</span>)<span class="op">;</span>
|
|
|
+ <span class="va">$window</span>.<span class="va">analytics</span>.<span class="at">trackView</span>(view)
|
|
|
+ <span class="op">}</span></code></pre></div>
|
|
|
<p>这样在我调试的时候我只需要打个Log，在产品环境时就会Track。</p>
|
|
|
<h4 id="自动更新">自动更新</h4>
|
|
|
<p>同样的，对于Android用户来说，他们可以选择自行下载更新，所以我需要针对Android用户有一个自动更新：</p>
|
|
|
@@ -1497,7 +1497,7 @@ if(isAndroid) {
|
|
|
<p>类似的问题还有许多，不过由于应用内容的限制，这些问题就没有那么严重了。</p>
|
|
|
<p>如果有一天，我有钱开放这个应用的应用号，那么我就会再次献上这个图：</p>
|
|
|
<figure>
|
|
|
-<img src="./images/hexoarch.png" alt="六边形架构" /><figcaption>六边形架构</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/hexoarch.png" alt="六边形架构" /><figcaption>六边形架构</figcaption>
|
|
|
</figure>
|
|
|
<h3 id="未来">未来</h3>
|
|
|
<p>我就开始思索这个问题，未来的趋势是合并到一起，而这一个趋势在现在就已经是完成时了。</p>
|
|
|
@@ -1509,15 +1509,15 @@ if(isAndroid) {
|
|
|
<h3 id="showcase-7">Showcase</h3>
|
|
|
<p>最后效果图</p>
|
|
|
<figure>
|
|
|
-<img src="./images/elasticsearch_ionic_map.jpg" alt="elasticsearch_ionic_map" /><figcaption>elasticsearch_ionic_map</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/elasticsearch_ionic_map.jpg" alt="elasticsearch_ionic_map" /><figcaption>elasticsearch_ionic_map</figcaption>
|
|
|
</figure>
|
|
|
<figure>
|
|
|
-<img src="./images/elasticsearch_ionic_info_page.jpg" alt="elasticsearch_ionic_info_page" /><figcaption>elasticsearch_ionic_info_page</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/elasticsearch_ionic_info_page.jpg" alt="elasticsearch_ionic_info_page" /><figcaption>elasticsearch_ionic_info_page</figcaption>
|
|
|
</figure>
|
|
|
<h3 id="构架设计">构架设计</h3>
|
|
|
<p>对我们的需求进行简要的思考后，设计出了下面的一些简单的架构。</p>
|
|
|
<figure>
|
|
|
-<img src="./images/struct.png" alt="Django ElasticSearch Ionic 架构" /><figcaption>Django ElasticSearch Ionic 架构</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/struct.png" alt="Django ElasticSearch Ionic 架构" /><figcaption>Django ElasticSearch Ionic 架构</figcaption>
|
|
|
</figure>
|
|
|
<h4 id="服务端">服务端</h4>
|
|
|
<p>简单说明:</p>
|
|
|
@@ -1982,7 +1982,7 @@ $cordovaGeolocation
|
|
|
<span class="op">}</span>)<span class="op">;</span></code></pre></div>
|
|
|
<p>当用户点击时，调用Bootstrap的Popover来显示信息。</p>
|
|
|
<figure>
|
|
|
-<img src="./images/elasticsearch_ionit_map.jpg" alt="ElasticSearch Map" /><figcaption>ElasticSearch Map</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/elasticsearch_ionit_map.jpg" alt="ElasticSearch Map" /><figcaption>ElasticSearch Map</figcaption>
|
|
|
</figure>
|
|
|
<h1 id="一步步搭建javascript框架-lettuce">一步步搭建JavaScript框架: Lettuce</h1>
|
|
|
<h2 id="概况-9">概况</h2>
|
|
|
@@ -2146,7 +2146,7 @@ root.Lettuce = Lettuce;
|
|
|
<p>当我们在写一些UI测试的时候，我们总需要到浏览器去看一下一些DOM的变化。比如，我们点击了某个下拉菜单，会有另外一个联动的下拉菜单发生了变化。而如果这个事件更复杂的时候，有时我们可能就很难观察出来他们之间的变化。</p>
|
|
|
<h3 id="showcase-8">ShowCase</h3>
|
|
|
<figure>
|
|
|
-<img src="./images/luffa.jpg" alt="Luffa Screenshot" /><figcaption>Luffa Screenshot</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/luffa.jpg" alt="Luffa Screenshot" /><figcaption>Luffa Screenshot</figcaption>
|
|
|
</figure>
|
|
|
<p>源码见：<a href="https://github.com/phodal/luffa" class="uri">https://github.com/phodal/luffa</a></p>
|
|
|
<h3 id="基本原理">基本原理</h3>
|
|
|
@@ -3122,10 +3122,10 @@ require(['../app'], function(App){
|
|
|
<h3 id="showcase-10">Showcase</h3>
|
|
|
<p>这个repo的最后效果图如下所示:</p>
|
|
|
<figure>
|
|
|
-<img src="./images/demo.jpg" alt="最后效果图" /><figcaption>最后效果图</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/demo.jpg" alt="最后效果图" /><figcaption>最后效果图</figcaption>
|
|
|
</figure>
|
|
|
<figure>
|
|
|
-<img src="./images/oculus-vr.jpg" alt="Three.js Oculus Effect" /><figcaption>Three.js Oculus Effect</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/oculus-vr.jpg" alt="Three.js Oculus Effect" /><figcaption>Three.js Oculus Effect</figcaption>
|
|
|
</figure>
|
|
|
<p>效果：</p>
|
|
|
<ol type="1">
|
|
|
@@ -3344,7 +3344,7 @@ yaw = (rotation about (Pitch • Raw • Z));”</code></pre>
|
|
|
<p>就是，我们需要设置camera和controller的旋转。</p>
|
|
|
<p>这使我有足够的理由相信Oculus就是一个手机 + 一个6轴运动处理组件的升级板——因为，我玩过MPU6050这样的传感器，如图。。。</p>
|
|
|
<figure>
|
|
|
-<img src="./images/mpu6050.jpg" alt="Oculus 6050" /><figcaption>Oculus 6050</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/mpu6050.jpg" alt="Oculus 6050" /><figcaption>Oculus 6050</figcaption>
|
|
|
</figure>
|
|
|
<p><strong>Three.js DK2Controls</strong></p>
|
|
|
<p>虽然下面的代码不是我写的，但是还是简单地说一下。</p>
|
|
|
@@ -3511,7 +3511,7 @@ yaw = (rotation about (Pitch • Raw • Z));”</code></pre>
|
|
|
<p>我使用的Nokia Lumia 920没有一个好的照片应用</p>
|
|
|
<h3 id="showcase-11">Showcase</h3>
|
|
|
<figure>
|
|
|
-<img src="./images/onmap-demo.jpg" alt="Phodal’s Image" /><figcaption>Phodal’s Image</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/onmap-demo.jpg" alt="Phodal’s Image" /><figcaption>Phodal’s Image</figcaption>
|
|
|
</figure>
|
|
|
<h3 id="框架-exif-exifread-cartodb">框架： EXIF & ExifRead & CartoDB</h3>
|
|
|
<p><strong>EXIF</strong></p>
|
|
|
@@ -3642,7 +3642,7 @@ jsonFile.close()</code></pre></div>
|
|
|
<h3 id="showcase-12">Showcase</h3>
|
|
|
<p>代码见： <a href="https://github.com/phodal/sherlock" class="uri">https://github.com/phodal/sherlock</a></p>
|
|
|
<figure>
|
|
|
-<img src="./images/sherlock.png" alt="Sherlock" /><figcaption>Sherlock</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/sherlock.png" alt="Sherlock" /><figcaption>Sherlock</figcaption>
|
|
|
</figure>
|
|
|
<h3 id="graphviz">Graphviz</h3>
|
|
|
<blockquote>
|
|
|
@@ -3658,7 +3658,7 @@ jsonFile.close()</code></pre></div>
|
|
|
<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">dot</span> -Tjpg lz.dot -o lz.jpg</code></pre></div>
|
|
|
<p>就会生成下面的图片</p>
|
|
|
<figure>
|
|
|
-<img src="./images/lz.jpg" alt="lz" /><figcaption>lz</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/lz.jpg" alt="lz" /><figcaption>lz</figcaption>
|
|
|
</figure>
|
|
|
<p>接着我们便可以建立一个简单的模型来构建我们的技能树。</p>
|
|
|
<h2 id="步骤-14">步骤</h2>
|
|
|
@@ -3676,7 +3676,7 @@ jsonFile.close()</code></pre></div>
|
|
|
<p>即Web前端依赖于JavaScript、HTML、CSS，而Node.js依赖于JavaScript，当然我们也需要数据的支持，大部分的网站都是数据驱动型的开发。而构成完成的开发链的则是前端 + 服务端。</p>
|
|
|
<p>于是我们有了这张图:</p>
|
|
|
<figure>
|
|
|
-<img src="./images/tree.jpg" alt="Tree" /><figcaption>Tree</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/tree.jpg" alt="Tree" /><figcaption>Tree</figcaption>
|
|
|
</figure>
|
|
|
<p>而我们的代码是这样的:</p>
|
|
|
<div class="sourceCode"><pre class="sourceCode dot"><code class="sourceCode dot"><span class="kw">digraph</span> <span class="fu">tree</span>
|
|
|
@@ -3698,7 +3698,7 @@ jsonFile.close()</code></pre></div>
|
|
|
<h3 id="step-3-d3.js-tooltipster">Step 3: D3.js Tooltipster</h3>
|
|
|
<p>使用D3.js与Darge-d3构建一个简单的技能树的时候，需要一个简单的类似于小贴士的插件。</p>
|
|
|
<figure>
|
|
|
-<img src="./images/tips.jpg" alt="Tooltips" /><figcaption>Tooltips</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/tips.jpg" alt="Tooltips" /><figcaption>Tooltips</figcaption>
|
|
|
</figure>
|
|
|
<h4 id="tooltipster">Tooltipster</h4>
|
|
|
<p>Tooltipster是一个jQuery tooltip 插件，兼容Mozilla Firefox, Google Chrome, IE8+。</p>
|
|
|
@@ -3758,7 +3758,7 @@ jsonFile.close()</code></pre></div>
|
|
|
<p>在线预览： <a href="http://phodal.github.io/techstack" class="uri">http://phodal.github.io/techstack</a></p>
|
|
|
<p>最后的效果如下图:</p>
|
|
|
<figure>
|
|
|
-<img src="./images/tech-stack.jpg" alt="Screenshot" /><figcaption>Screenshot</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/tech-stack.jpg" alt="Screenshot" /><figcaption>Screenshot</figcaption>
|
|
|
</figure>
|
|
|
<h3 id="d3.js">D3.js</h3>
|
|
|
<h2 id="步骤-15">步骤</h2>
|
|
|
@@ -3836,7 +3836,7 @@ jsonFile.close()</code></pre></div>
|
|
|
<h3 id="背景-14">背景</h3>
|
|
|
<p>在设计技能树的时候需要做一些简单的Logo，方便我们来识别，这时候就想到了PIL。加上一些简单的圆角，以及特殊的字体，就可以构成一个简单的Logo。做成的图标看上去还不错:</p>
|
|
|
<h3 id="showcase-14">ShowCase</h3>
|
|
|
-<p><img src="./images/node.png" alt="Node" /> <img src="./images/refactor.png" alt="Refactor" /> <img src="./images/tdd.png" alt="TDD" /> <img src="./images/clean_code.png" alt="Clean Code" /></p>
|
|
|
+<p><img src="http://ideabook.phodal.com/images/node.png" alt="Node" /> <img src="http://ideabook.phodal.com/images/refactor.png" alt="Refactor" /> <img src="http://ideabook.phodal.com/images/tdd.png" alt="TDD" /> <img src="http://ideabook.phodal.com/images/clean_code.png" alt="Clean Code" /></p>
|
|
|
<p>代码见:<a href="https://github.com/phodal/text2logo" class="uri">https://github.com/phodal/text2logo</a></p>
|
|
|
<h3 id="需求说明">需求说明</h3>
|
|
|
<p>简单的说一些我们的附加需求</p>
|
|
|
@@ -3903,11 +3903,11 @@ colors_length <span class="op">=</span> ConfigColor.items(<span class="st">'
|
|
|
<p>在线Demo见： <a href="http://vmap.phodal.com/" class="uri">http://vmap.phodal.com/</a></p>
|
|
|
<p>或者你已经使用过了相应多的省市区与地图联动，但是这些联动往往是单向的、不可逆。并且这些数据往往都是在线使用的，不能离线使用。下图是一个结合百度地图的省市区与地图联动：</p>
|
|
|
<figure>
|
|
|
-<img src="./images/general-province-city-map.png" alt="一般的省市区与地图联动" /><figcaption>一般的省市区与地图联动</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/general-province-city-map.png" alt="一般的省市区与地图联动" /><figcaption>一般的省市区与地图联动</figcaption>
|
|
|
</figure>
|
|
|
<p>我们可以在这个应用里选择，相应的省市区然后地图会跳转到相应的地图。当我们在地图上漫游的时候，如果没有显示当前的省市区是不是变得很难使用。于是，我们就来创建一个吧：</p>
|
|
|
<figure>
|
|
|
-<img src="./images/anti-map-action.jpg" alt="地图到省市区联动" /><figcaption>地图到省市区联动</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/anti-map-action.jpg" alt="地图到省市区联动" /><figcaption>地图到省市区联动</figcaption>
|
|
|
</figure>
|
|
|
<h3 id="jquery-mustache-leaflet">jQuery + Mustache + Leaflet</h3>
|
|
|
<p>相关技术栈：</p>
|
|
|
@@ -3932,7 +3932,7 @@ colors_length <span class="op">=</span> ConfigColor.items(<span class="st">'
|
|
|
</blockquote>
|
|
|
<p>换句话来说，根据这个文件里面的多边形，我们可以绘制出中国地图。由于上面的点是真实的地理位置信息，所以无论我们怎样的缩放这些点的位置都不会发生变化。如下图是GitHub对这个数据文件的解析：</p>
|
|
|
<figure>
|
|
|
-<img src="./images/china-geojson.jpg" alt="中国GeoJSON文件" /><figcaption>中国GeoJSON文件</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/china-geojson.jpg" alt="中国GeoJSON文件" /><figcaption>中国GeoJSON文件</figcaption>
|
|
|
</figure>
|
|
|
<p>（PS: 预览可以打开这个页面：<a href="https://github.com/phodal/vmap/blob/gh-pages/static/data/china.json">Vmap GeoJSON</a></p>
|
|
|
<p>当然这似乎不是一个专业人员维护的数据，所以存在一些偏差。但是这些数据意味着，我们不需要依靠于在线地图就可以完成大部分的功能了。在线地图一直都是一个缓慢的存在，并且Google Map在多数人那都是不可用的。</p>
|
|
|
@@ -3940,7 +3940,7 @@ colors_length <span class="op">=</span> ConfigColor.items(<span class="st">'
|
|
|
<h4 id="多边形搜索">多边形搜索</h4>
|
|
|
<p>所谓的多边形搜索就是画一个圈圈（任意多边形），然后你就可以去约这个圈圈里的人，如下图所示：</p>
|
|
|
<figure>
|
|
|
-<img src="./images/geopoly2d-small.png" alt="多边形搜索" /><figcaption>多边形搜索</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/geopoly2d-small.png" alt="多边形搜索" /><figcaption>多边形搜索</figcaption>
|
|
|
</figure>
|
|
|
<p>而圈圈搜索依赖于圈圈上的连续的点构建的形状来进行搜索，上面的每个点都包含了相应的经纬度。因此，只要是在这个圈圈里的用户都是可以搜索得到的。</p>
|
|
|
<p>这样实现的前提是：</p>
|
|
|
@@ -3953,7 +3953,7 @@ colors_length <span class="op">=</span> ConfigColor.items(<span class="st">'
|
|
|
<p>拿Bootstrap实现一个Dropdown是一件很容易的事，我们只要动用一下相应的模板就好了。难就难在，如果去与地图交互。</p>
|
|
|
<p>最初的时候要用Event的形式来实现，但是发现这样似乎会让其紧耦合。就改用了监听Hash Change的形式来实现，在总的地图上每一个省都有一个对应的ID，这个ID会对应相应的省的数据。如下图所示：</p>
|
|
|
<figure>
|
|
|
-<img src="./images/province-hash-with-map.jpg" alt="Province Hash" /><figcaption>Province Hash</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/province-hash-with-map.jpg" alt="Province Hash" /><figcaption>Province Hash</figcaption>
|
|
|
</figure>
|
|
|
<p>接着，我们就需要从这个Hash中判断它的级别和ID，随后转由相应的函数来处理这些逻辑即可。随后，我们要做两件事：</p>
|
|
|
<ul>
|
|
|
@@ -3970,13 +3970,13 @@ colors_length <span class="op">=</span> ConfigColor.items(<span class="st">'
|
|
|
<p>在这个过程中遇到的最大的坑是：中国有北京、上海、天津、重庆等直辖市，还有港、澳等自治区（PS：台湾是一个省）。对于这些特殊的地点，那么的缩放级别肯定会更高。</p>
|
|
|
<p>同理，我们也可以对上面的市运行处理。但是因为这些市并不存在GEO信息，所以我只是从其多连形信息取了一个点，再将这个点放到data-geo中：</p>
|
|
|
<figure>
|
|
|
-<img src="./images/city-with-geo.jpg" alt="Data GEO" /><figcaption>Data GEO</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/city-with-geo.jpg" alt="Data GEO" /><figcaption>Data GEO</figcaption>
|
|
|
</figure>
|
|
|
<p>对应于省市的，对于区的处理也是如此。这样，我们就完成了地点到地图的显示了。</p>
|
|
|
<h3 id="step-3-从地图到地点上显示">Step 3: 从地图到地点上显示</h3>
|
|
|
<p>从地图上到地点就比较简单了，点击时修改对应的text即可。</p>
|
|
|
<figure>
|
|
|
-<img src="./images/vmap-click-handler.jpg" alt="VMap Click" /><figcaption>VMap Click</figcaption>
|
|
|
+<img src="http://ideabook.phodal.com/images/vmap-click-handler.jpg" alt="VMap Click" /><figcaption>VMap Click</figcaption>
|
|
|
</figure>
|
|
|
</body>
|
|
|
</html>
|
Fengda HUANG