Month: April 2015

April 27, 2015

关于大型网站技术演进的思考（七）–存储的瓶颈（7）

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments
本文开篇提个问题给大家，关系数据库的瓶颈有哪些？我想有些朋友看到这个问题肯定会说出自己平时开发中碰到了一个跟数据库有关的什么什么问题，然后如何 解决的等等，这样的答案没问题，但是却没有代表性，如果出现了一个新的存储瓶颈问题，你在那个场景的处理经验可以套用在这个新问题上吗？这个真的很难说。   其实不管什么样的问题场景最后解决它都要落实到数据库的话，那么这个问题场景一定是击中了数据库的某个痛点，那么我前面的六篇文章里那些手段到底是在解决数据库的那些痛点，下面我总结下，具体如下：   　 　痛点一：数据库的连接数不够用了。换句话说就是在同一个时间内，要求和数据库建立连接的请求超出了数据… Read More
Read More
April 27, 2015

关于大型网站技术演进的思考（八）–存储的瓶颈终篇（8）

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments
在开始本篇主要内容前，我们一起看看下面的几张截图，首先是第一张图，如下图所示： 这是一家电商网站的首页，当我们第一次打开这个首页，网站会弹出一个强制性的对话框，让用户选择货物配送的地址，如果是淘宝和京东的话，那么这个选择配货地址的选项是在商品里，如下图是淘宝的选择配送地点： 下图是京东选择配货地点： 那么图一 跟京东和淘宝有什么区别呢？图一的电商强制用户选择地区后，那么我们在查询这个商品时候会因为地区不同，显示的查询结果会不一样，这个就和网站做国际化有 点像，不过网站国际化是切语言和语言相关的静态资源，但是电商这个地域的选择是和业务相关的，不同的地域查询结果是不相同的，这个选择地域的弹出框很像一 个路由器… Read More
Read More
April 27, 2015

jQuery实现的测试答题功能

By  Javascript /Jquery / React / Bootstrap / Web  0 Comments
有时在网页中要加入一个在线测试功能，例如在线调查，在线测试各类知识等应用，这类应用需要用到很多前后端技能。今天我给大家分享一个基于jQuery的前端应用——测试答题功能。 查看演示 下载源码 HTML 首先载入jquery库文件和quiz.js以及所需的CSS样式文件styles.css。 <script src="jquery.js"></script> <script src="quiz.js"></script> <link rel="stylesheet" href="styles.css" /> 然后在需要放置测试题的位置加入div#quiz-con… Read More
Read More
April 27, 2015

HTML5获取地理位置定位信息

By  Div / Css / XML / HTML5 / SVG, Google / Facebook / Amazon / Twitter / Network  0 Comments
HTML5获取地理位置定位信息
HTML5提供了地理位置定位功能（Geolocation API），能确定用户位置，我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5，借助百度、谷歌地图接口来获取用户准确的地理位置信息。 查看演示 下载源码 如何使用HTML5地理位置定位功能 定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，特别是手持设备如iphone，地理定位 更加精确。首先我们要检测用户设备浏览器是否支持地理定位，如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是 不可用的，所以我们在访问该应用时会… Read More
Read More
April 27, 2015

PHP+jQuery+MySql实现红蓝投票功能

By  Php / Pear / Mysql / Node.js  0 Comments
这是一个非常实用的投票实例，应用在双方观点对抗投票场景。用户可以选择支持代表自己观点的一方进行投票，本文以红蓝双方投票为例，通过前后台交互，直观展示红蓝双方投票数和所占比例，应用非常广泛。 查看演示 下载源码 本文是一篇综合知识应用类文章，需要您具备PHP、jQuery、MySQL以及html和css方面的基本知识。本文在《PHP+MySql+jQuery实现的“顶”和“踩”投票功能》一文基础上做了适当改进，共用了数据表，您可以先点击了解这篇文章。 HTML 我们需要在页面中展示红蓝双方的观点，以及对应的投票数和比例，以及用于投票交互的手型图片，本例以#red和#blue分别表示红蓝双 方。.redhan… Read More
Read More
April 26, 2015

HTML5 Geolocation API : 实时跟踪应用

By  Div / Css / XML / HTML5 / SVG, Google / Facebook / Amazon / Twitter / Network, Javascript /Jquery / React / Bootstrap / Web  0 Comments
HTML5 Geolocation API : 实时跟踪应用
getCurrentPosition与watchPosition   watchPosition会监视你的移动，并在位置改变时向你报告位置。watchPPosition方法看上去确实与getCurrentPosition方法很像，不过行为稍有不同，每次位置比阿奴啊时会重复调用你的成功处理程序 watchPosition调用步骤： 你的应用watchPosition，传入一个成功处理函数 watchPosition在后台不断监视你的位置 你的位置改变时，watchPostion调用成功处理函数来报告你的新位置 watchPostion继续监视你的位置（并向成功处理程序报告），直至你调用clearWa… Read More
Read More
April 26, 2015

HTML5 Geolocation API应用：计算两地距离

By  Div / Css / XML / HTML5 / SVG, Google / Facebook / Amazon / Twitter / Network, Javascript /Jquery / React / Bootstrap / Web  0 Comments
HTML5 Geolocation API应用：计算两地距离
找出HTML5COL学院的位置   在HTML5COL学院的前面几个章节中我们已经对HTML5 Geolocation API有了一定认识，接下来我们要对位置做些更有意思的处理；看看你与我们HTML5COL学院的办公室秘密位置相距多远。为此我们需要HTML5COL学院的坐标，而且需要知道如何计算两个坐标之间的距离。   增加一个<div>   首先，在HTML中增加一个 <div>: <!DOCTYPE html> <html> <head> <meta='keywords' content='HTML5COL学院,HTML5C… Read More
Read More
April 26, 2015

利用行动装置GPS定位寻找临近地点

By  Google / Facebook / Amazon / Twitter / Network, Javascript /Jquery / React / Bootstrap / Web  0 Comments
早先已展示过，在网页内嵌Google地图、将地址转换为经纬度座标、在地图上显示自订地标图示等技巧，最后来个综合应用当作期末考。本次的练习题是”依使用者所在位置，找出距离最近的五个台北市消防分队”。 简单整理值得留意的技术细节: 在网页嵌入Google地图并放上自订标示点(Marker)的做法，可参考笔记-网页内嵌Google地图与地理位置模拟一文。 由市政府网站取得台北市消防分队地址，透过地理编码算出经纬度座标，可参考Google Maps API地址转换一文。而在本次范例中，我们预先将查到的经纬度数字一并写入CSV档中，不必每次重新查询。 要计算两个经纬度座标间的直线距离，Hav… Read More
Read More
April 26, 2015

利用HTML5 Canvas动态产生文字图示

By  Google / Facebook / Amazon / Twitter / Network  0 Comments
前几篇Google Map API文章，一直有用到Google地图加上Marker的做法。(即下图的红色大头针图案) 不过，若全部的标示点用一样的图示，会显得无趣且容易混淆(如下图所示)，虽然将滑鼠移到标示图案上方会显示名称，在使用者体验上总觉得还有改善空间。 事实上，Google Maps API在新增地标时，是可以自订图示的。MarkerOptions提供icon参数可指定图档URL，另外有shadow参点可指定阴影图档的URL，以取代预设的黑点红色大头针图示。 只是有个小问题，在消防分队位置显示范例中，台北市共有44个消防分队，即使能自订图示，可能也只是用44台消防车换掉44根大头针，对于识别度并没有… Read More
Read More
April 26, 2015

Google Maps API地址转换

By  Google / Facebook / Amazon / Twitter / Network  0 Comments
将地址转换成地理座标的程序被称为地理编码 (Geocoding)，Google Maps API亦支援地理编码服务(注意:有每天查询次数不可超过2,500次的限制，申请Google Maps API Premier可以提高到100,000次) ，呼叫方法很简单，使用URL “http: //maps.googleapis.com/maps/api/geocode/json?address=要转换的地址&sensor=ture或false”，便可得到一份JSON格式的地址座标资讯，address参数除了完整地址，也可以输入一般性地名或片段地址，另外也能指定传回XML格式、使用语系、… Read More
Read More
April 26, 2015

笔记-网页内嵌Google地图与地理位置模拟

By  Div / Css / XML / HTML5 / SVG, Google / Facebook / Amazon / Twitter / Network  0 Comments
终于有机会开始玩HTML5中行动装置GPS整合应用。 我的第一步是希望能在网页整合Google地图，即便实际需求不一定需要显示地图，但在开发测试阶段，要求开发人员直接由25.1234, 121.5678之类数字判断结果是否正确未免太不人道，因此用地图方式呈现特定经纬度资料是绝对必要的。第一个练习题就来试试在网页中显示特定经纬度的地图吧! Google地图Javascript API已经发展到了V3，整合应用起来相当方便省事，而官方的说明文件写得颇为详细(甚至有中文)，要上手一点也不困难。以下便是我写的超简单的入门范例，试着在网页显示以政大校园八角亭为中心的地图。(八角亭是我每次猫空LSD的起点，经纬度… Read More
Read More
April 26, 2015

利用HTML5中Geolocation获取地理位置在Google Map上定位

By  Div / Css / XML / HTML5 / SVG  0 Comments
利用HTML5中Geolocation获取地理位置在Google Map上定位
本小菜刚开始学习HTML5，现在对其中的Geolocation颇感兴趣，结合Google Map的API实现基本的地图定位功能。 1.获取当前地理位置 调用方法 void getCurrentPosition(onSuccess, onError, options);即可。 其中onSuccess是获取当前位置信息成功时执行的回调函数，onError是获取当前位置信息失败时所执行的回调函数，options是一些可选熟悉列表。其中第二和第三个参数为可选属性。 在onSuccess回调函数中，用到了参数position，代表一个具体的position对象，表示当前位置。其具有如下属性： latitude：当前地理位置… Read More
Read More
April 26, 2015

awk的3个例子(成长篇)

By  Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux  0 Comments
awk的3个例子(成长篇)
最近看到论坛里面有几个不错的小例子，对于学习awk还是有帮助，在这儿详细的说一下 一，类似数据库中的left join查询 [root@krlcgcms01 mytest]# cat a.txt //a.txt 111 aaa 222 bbb 333 cccc 444 ddd [root@krlcgcms01 mytest]# cat b.txt //b.txt 111 123 456 2 abc cbd 444 rts 786   要求输出结果是 111,aaa,123,456 444,ddd,rts,786 实现方法1， [root@krlcgcms01 mytest]# awk 'NR==FNR{a[$1]=$2;}NR!=FNR && a… Read More
Read More
April 26, 2015

实例说明shell i/o常用重定向

By  Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux  0 Comments
实例说明shell i/o常用重定向
每个打开的文件都会被分配一个文件描述符.stdin (键盘), stdout (屏幕), 和 stderr (错误消息输出到屏幕上)的文件描述符分别是0, 1, 和 2. 对于正在打开的额外文件, 保留了描述符3到9. 文件描述符是文件系统为了跟踪这个打开的文件而分配给它的一个数字。 下面以实例说明 1，>的用法 [zhangy@localhost ~]$ echo "11111" > 1.txt [zhangy@localhost ~]$ cat 1.txt 11111 [zhangy@localhost ~]$ echo "11111" 1> 1.txt //这个用法和上面的用法是一样 [zhangy@localhost ~]$ cat 1.… Read More
Read More