Blog | Phodal - A Growth Engineerhttp://www.phodal.com/blog/2015-09-14T15:12:15.774135+00:00Blog网站更新小日志2015-09-05T12:00:07+00:002015-09-14T15:12:15.774135+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/website-update-use-matrial-design-lite/在上一次小更新之后,又进行了一次小规模更新。
1.更换前端框架为Material Design Lite
主要原因: ``BootStrap``太重了,意思是太大了。
2.部分API改为Django REST Framework
似乎DRF比Tastypie,有空了也把剩余的API一换
3.有App了。。。
4.全新设计的新首页当我们打开网页时发生了什么2014-09-08T07:13:21+00:002014-09-09T03:21:06.310659+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/what-happen-when-we-open-a-website/原文是写在[http://designiot.phodal.com/](http://designiot.phodal.com/),在写设计物联网系统的时候重新整理一下这些东西,总的来说还是有用的。
###打开网页时发生了什么
简单地来说,当我们在浏览器上输入URL的敲下回车的时候。
- 浏览器需要查找域名[^domain]的IP,从不同的缓存直至DNS服务器。
- 浏览器会给web服务器发送一个HTTP请求
- 服务器“处理”请求
- 服务器发回一个HTML响应
- 浏览器渲染HTML到页面。
在[StackOverflow](http://stackoverflow.com/questions/2092527/what-happ`enter code here`ens-when-you-type-in-a-url-in-browser)上有一个这样的回答会比较详细。
- browser checks cache; if requested object is in cache and is fresh, skip to #9
- browser asks OS for server's IP address
- OS makes a DNS lookup and replies the IP address to the browser
- browser opens a TCP connection to server (this step is much more complex with HTTPS)
- browser sends the HTTP request through TCP connection
- browser receives HTTP response and may close the TCP connection, or reuse it for another request
- browser checks if the response is a redirect (3xx result status codes), authorization request (401), error (4xx and 5xx), etc.; these are handled differently from normal responses (2xx)
- if cacheable, response is stored in cache
- browser decodes response (e.g. if it's gzipped)
- browser determines what to do with response (e.g. is it a HTML page, is it an image, is it a sound clip?)
- browser renders response, or offers a download dialog for unrecognized types
忽略一些细节便剩下了
1. 从浏览器输入URL
2. 浏览器找到服务器,服务器返回HTML文档
3. 从对应的服务器下载资源
说说第一步,开始时我们输入的是URI(统一资源标识符,Uniform Resource Identifier),它还有另外一个名字叫统一资源定位器(URL[^URL],Uniform Resource Locator)。
###URL组成
网址算是URL的一个俗称,让我们来看看一个URL的组成,以HTTP版IOT中的URL为例。
``http://b.phodal.com/athome/1``
开始之前,我们需要标出URL的80端口以及json文件的全称,那么上面的网址就会变成
``http://b.phodal.com:80/athome/1.json``
那么对于这个URL的就有下面几部分组成
- ``http://`` http说的是这个URL用的是HTTP协议,至于``//``是一个分隔符,用法和C语言中的``;``一样。这样的协议还可以是coap,https,ftp等等。
- ``b`` 是子域名,一个域名在**允许**的情况下可以有不限数量的子域名。
- ``phodal.com`` 代表了一个URL是phodal.com下面的域名
- ``80`` 80是指80端口,默认的都是80,对于一个不是80端口的URL应该是这样的``http://iot-coap.phodal.com:8896/``
- ``athome`` 指的是虚拟目录部分,或者文件路径
- ``1.json``看上去就是一个文件名,然而也代表着这是一个资源。
对就一个稍微复杂点的例子就是
``http://designiot.phodal.com/#你所没有深入的http``
这里的``#``后面是锚部分,如果你打开这个URL就会发现会直接跳转到相应的锚部分,对就于下面这样的一个例子来说
``http://www.phodal.com/search/?q=iot&type=blog``
``?``后面的``q=iot&type=blog``的部分是参数部分,通常用于查询或者、搜索。
####HTTP响应 响应报头
在这次响应中,返回了两个报头,即
Content-Type: application/json
Date: Fri, 05 Sep 2014 15:05:49 GMT
Content-Type和Date,在这里的Context-Type是application/json,而通常情况下我们打开一个网站时,他的Content-Type应该是text/html。
Content-Type: text/html;
Content-Type是最重要的报头。
####HTTP响应 响应正文
正文才是我们真正想要的内容,上面的都是写给浏览器看的,一般的人不会去关注这些。
[{"id":1,"temperature":19,"sensors1":31,"sensors2":7.5,"led1":0}]
通常这是以某种格式写的,在这里是以JSON写的,而对于一个网站的时候则是HTML。寻ta分析与网站内容2014-05-08T13:53:48+00:002014-05-13T13:46:55.784605+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/xunta-analytics-and-website-content/从 [寻ta][0] 突然来的访问量就开始在想,网站内容是否才是真正需要的东西。
#寻ta分析
作为一篇文章带来的影响,我们可以看看访问会话。
日期 访问量
5.5 9
5.6 4618
5.7 1216
5.8 522
在5月6日的时候达到最高,而后慢慢往下降,直到回到正常,这就是一个突然来的流量,意料之外的。
而在上一个高峰是4月15号,不过只有148。而这其中的流量和逻辑有点符号长尾理论,也体现了社交网络传统的有趣的几点。
流量的主要来源是CSDN.
1. geek.csdn.net 5,366(92.41%)
2. news.cnblogs.com 138(2.38%)
3. user.qzone.qq.com 81(1.39%)
4. ituring.com.cn 65(1.12%)
这些就是主要的流量来源,主要是来自于CSDN,这是没错,但是由于用户点分享的时候,带来了额外的流量,就是上面的QQ空间。当然还有微博、人人等等
12. weibo.com 9(0.15%)
16. share.renren.com 5(0.09%)
和自己的博客不同的是,自己的博客主要是通过搜索引擎进来的,而不是流量进来的,这样的结果是流量是稳定增长的。而不会像[寻ta][0]一样出像高峰,而后回落,而研究[寻ta][0]比自己的博客来得有意思得多。。
#寻ta
从某个角度来说,[寻ta][0]做到了下面两点
- 提供了有用的信息,但是没有打响网站品牌
- 提供用户需要的内容
然而对于一个网站来说除了``拉``还需要``推``。
现在只是把用户拉了进来,而没有让用户真正的留下,因为没有足够的信息。
还需要把东西``推销``出去。
对于寻ta来说,虽然不是带有全部的正能量,但是有一个问题是很有趣的,怎么可能只有正能量,而没有一点儿负能量。没有负能量的发泄,那么人都会累死的。
[0]:http://xunta.phodal.netangular restify,网站重构三,angularjs前端2014-03-16T01:49:25+00:002014-08-13T04:52:03.727542+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/restify-json-angularjs-website-refactory/有趣的是angularjs可以简化前端的开发,但是可以让我们把计算都放到桌面上,而不是服务器,在某种意义上来说可以减少系统的负担。
值得注意的是,在这里我们只需要用到的是模板(Template)。
##Angular JS##
<blockquote>
AngularJS是一款开源 JavaScript函式库,由Google维护,用来协助单一页面应用程式运行的。它的目标是透过MVC模式 (MVC) 功能增强基于浏览器的应用,使开发和测试变得更加容易。
函式库读取包含附加自定义(标签属性)的HTML, 遵从这些自定义属性中的指令,并将页面中的输入或输出与由JavaScript变量表示的模型绑定起来。这些JavaScript变量的值可以手工设置,或者从静态或动态JSON资源中获取。
</blockquote>
###安装Angularjs###
这里还没有整合到nodejs中,所以还是用这个
<script src="js/angular.min.js"></script>
###ng-app##
使用ng-app指令告诉Angular应该管理DOM中的哪一部分,使用ng-app申明Angular的边界
<blockquote>
在DOMContentLoaded事件触发时执行angular.js脚本,运行后将会寻找含有ng-app指令的标签,该标签即定义了AngularJS应用的作用域。在html中添加ng-app属性即说明整个html都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令,如在div上添加ng-app,则AngularJS脚本仅在该div中运行。
</blockquote>
###ng-controller###
申明控制器,把对象或基本数据设置到$scope对象上
##angular json##
<!DOCTYPE html>
<html lang="en" ng-app="blogposts">
<head>
<meta charset="utf-8"/>
<title>Phodal's New Homepage</title>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="postlistCtrl">
<div class="container-fluid">
<div class="row-fluid">
<div class="span10">
<ul class="posts">
{{lengths}}
<article ng-repeat="post in posts">
<h1>{{post.title}}</h1>
<p>{{post.description}}</p>
</article>
</ul>
</div>
</div>
</div>
</body>
</html>
这里用的是官网的示例,加以需要的功能。
<pre><code class="javascript">
var blogposts = angular.module('blogposts', []);
blogposts.controller('postlistCtrl', function($scope, $http) {
$http.get('data/posts.json').success(function(data) {
$scope.posts = data;
});
});
</code></pre>