2012年11月16日星期五

HOW TO: iPhone, iPad, Apple iOS PPTP, IPSEC & L2TP VPN Setup Guide

refer:https://www.witopia.net/support/setting-up-and-using-your-vpn/apple-ios/

apple ios


IPsec – Tends to be the most secure (we support up to AES 256bit encryption!), the fastest, and has the most cities available.
L2TP over IPsec – Very secure and performs well. Not as many cities available as IPsec and PPTP.
PPTP – an older protocol. “Usually” not as fast and is not as secure. Still, it’s a plucky little VPN that performs well when there is network congestion so it shouldn’t be dismissed.

Setup IPSEC VPN
  1. Choose “Settings” from your iPhone/iPod Touch/iPad home screen.
  2. Choose “General”
  3. Choose “Network”
  4. Choose “VPN”
  5. Choose “Add VPN Configuration”
  6. Add VPN Connection
  7. Choose “IPSEC”
  8. Choose IPSEC
Configure your Cisco IPsec VPN Client
    IOS IPSEC Setup Example
  • Description = WiTopia IPsec (or whatever you want to call it)
  • Server: CLICK HERE FOR OPTIONS
  • Account: Enter your VPN Username
  • There are TWO formats for usernames and they are NOT interchangeable. Please see the “details” under your active services via the portal to see your correct username.
    Format 1: username@witopia (not that there is no .net at the end)
    Format 2: W\your@email.com (the W MUST be capital and the \ must be present)
  • Password: Your VPN Password
  • Use Certificate: OFF
  • Group Name: witopia
  • Secret: witopia
  • Proxy: OFF
  • Click SAVE at the top
Connecting and Disconnecting
Go back to VPN screen found at:
Settings –> General –> Network –> VPN
or
Settings –>VPN
and slide selector to ON.

back to top

Setup L2TP VPN
  1. Choose “Settings” from your iPhone/iPod Touch/iPad home screen.
  2. Choose “General”
  3. Choose “Network”
  4. Choose “VPN”
  5. Choose “Add VPN Configuration”
  6. Choose “L2TP”
Configure your L2TP VPN Client
  • Description = WiTopia L2TP (or whatever you want to call it)
  • Server: CLICK HERE TO CHOOSE A CONNECTION LOCATION
  • Account: Enter your VPN username
  • There are TWO formats for usernames and they are NOT interchangeable. Please see the “details” under your active services via the portal to see your correct username.
    Format 1: username@witopia (not that there is no .net at the end)
    Format 2: W\your@email.com (the W MUST be capital and the \ must be present)
  • RSA SecurID: OFF
  • Password: Your WiTopia VPN Password
  • Secret: witopia1
  • Send all Traffic: ON

  • Click SAVE at the top
Connecting and Disconnecting
Go back to VPN screen found at:
Settings –> General –> Network –> VPN
or
Settings –>VPN
and slide selector to ON.
back to top

Setup PPTP VPN
  1. Choose “Settings” from your iPhone/iPod Touch/iPad home screen.
  2. Choose “General”
  3. Choose “Network”
  4. Choose “VPN”
  5. Choose “Add VPN Configuration”
  6. Choose “PPTP”
Configure your PPTP VPN Client
  • Description = WiTopia PPTP (or whatever you want to call it)
  • Server: CLICK HERE FOR OPTIONS
  • Account: Enter your vpn username
  • There are TWO formats for usernames and they are NOT interchangeable. Please see the “details” under your active services via the portal to see your correct username.
    Format 1: username@witopia (not that there is no .net at the end)
    Format 2: W\your@email.com (the W MUST be capital and the \ must be present)
  • Password: Your VPN Password
  • RSA SecurID: OFF
  • Encryption Level: Auto
  • Send all Traffic: ON
  • Click SAVE at the top
Connecting and Disconnecting
Go back to VPN screen found at:
Settings –> General –> Network –> VPN
or
Settings –>VPN
and slide selector to ON.

2012年9月21日星期五

Amazon EC2使用感受

Amazon EC2使用:
1、创建Key Pairs,如:test,此时会获得一个test.pem保存到本地、可以使用putty工具获得test.ppk私钥,使用Conversions -> Import Key导入test.pem,然后导出test.pem.pub公钥和test.ppk私钥
2、创建安全组,如:test,允许SSH端口访问
3、创建实例,可以选择Amazon AMI、Ubuntu AMI等,然后使用默认选项,Key Pairs和安全组选择test。
4、Amazon会创建、启动实例
5、用户可以reboot、stop实例,Terminate会终止实例,然后Amazon会回收资源
Amazon提供一了个micro版的实例可以供用户免费使用,你可以安装需要的环境,然后通过Create Image(EBS AMI)创建镜像,然后新建实例的时候可以选择镜像,非常方便。

2012年9月19日星期三

Mercurial(HG)版本控制服务用户名验证

在之前的文章中,在Windows使用apache搭建Mercurial版本控制服务,并没有说到如何验证用户,而是允许所有人都提交。当时还不会怎么配置。
以下就是配置方法:
1,用htpasswd.exe建立用户密码文件
htpasswd.exe在apache的bin目录可以找到,使用方法主要有
htpasswd -c 文件名 用户名               //参数-c创建密码文件,输入后会提示你输入密码
htpasswd 文件名 用户名                 //如果用户名一样会更新密码
举个例子,我现在要建两个用户
htpasswd -c hguser fatkun.com
htpasswd hguser aaaa
这时会得到一个hguser的文件,把它拷贝到conf目录下
2,修改httpd.conf配置
在httpd.conf配置最末尾加入,注意路径改为你的
<Location /hg>
    AuthType Basic
    AuthName "Mercurial repositories"
    AuthUserFile "D:/Program Files/Apache2.2/conf/hguser"
 <LimitExcept GET>
        Require valid-user
    </LimitExcept>
</Location>
这样就可以了,重启apache服务以后,试试从浏览器访问hg的网页?会提示你输入用户名和密码。
3,针对某些项目的权限设置
在服务器存放项目的文件中,在.hg目录新建一个hgrc文件,里面可以配置为
这里是配置单个项目的,如果需要对所有项目配置,可以修改hgweb.config文件
[web]
allowpull = false //不允许所有人下载该项目
allow_read = "John Doe, PhD", fatkun//允许哪些人可以下载,如果有空格或特殊字符用引号""括起来
//还有deny_read,allow_push 等等
更多的配置可以查看这里http://www.selenic.com/mercurial/hgrc.5.html

2012年9月4日星期二

Custom Scrollbars in WebKit



原文链接:http://css-tricks.com/custom-scrollbars-in-webkit/

Way back in the day, you could customize scrollbars in IE (5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the <body>) and do totally rad things. IE dropped that.

These days, customizing scrollbars is back, but it's WebKit this time. It's a bit better now, because the properties are vendor-prefixed (e.g. ::-webkit-scrollbar) and use the "Shadow DOM". This has been around for a couple of years. David Hyatt blogged it in early 2009 and put together an example page of just about every combination of scrollbar possibilities you could ever want.

The Goods
The Different Pieces
These are the pseudo elements themselves. The actual parts of the scrollbars.

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }


The Different States
These are the pseudo class selectors. They allow for more specific selection of the parts, like when the scrollbar is in different states.

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
I'm going to steal this whole section from David's blog post on the WebKit blog because it explains each part well:

:horizontal – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation.

:vertical – The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation.

:decrement – The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view’s position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).

:increment – The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view’s position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).

:start – The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb.

:end – The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb.

:double-button – The double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons.

:single-button – The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.

:no-button – Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.

:corner-present – Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present.

:window-inactive – Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)
All together now
These pseudo elements and pseudo class selectors work together. Here are some random examples:

::-webkit-scrollbar-track-piece:start {
   /* Select the top half (or left half) or scrollbar track individually */
}

::-webkit-scrollbar-thumb:window-inactive {
   /* Select the thumb when the browser window isn't in focus */
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
   /* Select the down or left scroll button when it's being hovered by the mouse */
}
Very Simple Example
To make a really simple custom scrollbar we could do this:

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
In which we'd get this on a simple div with vertically overflowing text:



In The Wild
Check out the very subtle and nice scrollbars on Tim Van Damme's blog Maxvoltar:



The particularly nice bit here is that the scrollbar is on the body element, yet the scrollbar isn't stuck to the top, bottom, or right edge of the browser window as scroll bars normally are. I made a test page with copy-and-pasteable code to achieve that a similar effect:

View Demo

On Forrst, they use custom scollbars on code snippets which are also pretty nice. They are less visually intense and so don't fight as much with the code highlighting.



Related
Dion Almaer has a useful little "debug" page for scrollbars with all the parts in bold colors to see what's what. (from this article)
Similar article on Beautiful Pixels.
Opinions by Daniel Eckhart
Google Wave went kinda overboard with them back when that was still a thing.
Plugin for replicating OS X Lion scrollbars.

【新闻】微软力推IE浏览器 发布8款HTML5游戏



报道称,使用者可在Atari网站新设立的网站下载《Asteroids》、 《Pong》、《Centipede》、《Super Breakout》、《Combat》、《Lunar Lander》、《Missile Command》、《Super Breakout》和《Yar’s Revenge》等8款重新开发的经典游戏。这些游戏将能够在最新版的IE、Chrome、Safari、火狐和其它流行的支持HTML5的浏览器上运行,其中包括了移动版IE和Safari。

微软与Atari将携手发布8款支持HTML5游戏
微软与Atari的结盟,是微软通过独特方式向消费者和开发者推广IE浏览器的努力之一──这凸显了HTML5内容在网络中的力量。微软此前已经发布了HTML5版本的《Cut the Rope》,并携手发行公司狮门公司连手发布《饥饿游戏》的HTML5网页版,网站里面有电影上映前的独家内幕。
微软表示,自发布游戏《Pong》以来,Atari与公司的接触已有40年。两家公司此次的携手,旨在创造一种方式把Atari的游戏推向新一代用户。除了为触摸进行优化之外,绝大多数的游戏包括了多角色选择,可通过特殊的连结或通过Facebook账户进行连接。所有重新发布的Atari游戏均为免费游戏,但是非IE用户将看到网站上的显示和前拉广告。Atari同时还推出了一种方式,让第三方开发者使用现有的开源SDK和JavaScript库为该门户开发游戏。
Atari发言人表示,HTML5版游戏目前尚未正式上线,但将会很快上线。

【新闻】HTML5将让电视产业重洗牌



有没有想过,下一代的电视将是什么模样?只是一台有浏览器的大电脑,还是一台有联网功能的大电视呢?事实上,在新一代的HTML5架构下,电视的定义早就已经逐渐被改写了。HTML5已经跳脱原本电脑上网的范畴,走入行动上网的新境界,更让电视产业的发展重新洗牌。未来的电视使用者,可以透过HTML5技术,获得更有智慧的电视体验,以及更多样化的节目选择方式。



         Opera技术长罗志宇指出,HTML5架构浏览器可以活动在多种显示装置上,这包括近年来盛行的智慧手机与平板电脑,为什么反而电视是比较受到关注的新应用呢?罗志宇解释,有时候,消费者会希望电视能够不仅只做一件事,而能够同时执行不同的应用程式,例如以电视来执行的Opera线上应用商店。如此一来,电视前的观众能透过另一种全新的方式来使用网际网路。

          由于电视的萤幕够大,可以同时显示很多不同的资讯动态,并且不会影响使用者正在观看的节目内容。例如想在观赏棒球赛的同时,同时关心最新的台风动向;或者家人在看电视节目时,可以同时玩自己喜欢的游戏。在HTML5的架构下,过去那种大家争着看电视的时代已经结束了,电视萤幕也成为可以共享的新装置。

          当然,这看似完美的电视新应用,也伴随着全新的挑战。例如,多人可以同时使用电视这个萤幕来显示自己需要的资讯,那么输入方式就变得很重要了。总不能还是跟过去一样,全家人争抢同一个遥控器或键盘。在这样的应用下,第二萤幕就变得很重要,也就是不同使用者可以透过手上的智慧手机、平板电脑或笔电,来各自操作萤幕上所需出现的资讯,直接与电视萤幕进行互动。伴随而来的,是传统遥控选台器的地位将日渐式微。

           另外,为了要多人同时使用,萤幕尺寸也必须要够大才行,而效能更是不能马虎。只不过,由于电视产品一般被归类于消费性产品,在效能与价格之间,还必须取得一个平衡点才行。

          罗志宇认为,电视萤幕共享的时代已经来临。这一切都是归功于HTML5。HTML5应用将于2013年中、最迟2013年底有爆发式的成长。而身为主要流览器厂商,Opera也将为开发者搭建完善的舞台,促进市场发展。

14个非常棒的 JavaScript 游戏开发框架推荐



随着JavaScript结合HTML5开发越来越受欢迎,很多浏览器支持的新功能正被用户使用,与此同时,许多新的游戏正在使用JavaScript进行开发。基于JavaScript开发的游戏是唯一一个能够跨桌面,Web和移动三种平台的。今天,本文向大家推荐一些非常棒的JavaScript游戏框架。
http://www.limejs.com/
这是一个基于HTML5游戏框架,用于快速构建运行于现代触摸屏和桌面浏览器的游戏(需要翻墙访问)。
http://impactjs.com/
这是一个专业的JavaScript游戏引擎,帮助你方便快捷的开发基于HTML5的游戏。
该引擎有一个功能丰富的Weltmeister关卡编辑器,不管是多么复杂的游戏,Weltmeister都可以帮助你实现它。
http://www.renderengine.com/
一个跨浏览器的引擎,非常灵活,配备可拓展的API,内置Box2D引擎,支持触摸输入。
http://jawsjs.com/
一个基于HTML5的2D游戏引擎,对击键事件处理非常好。
http://gogomakeplay.com/gmp
GMP是免费的、快速的JavaScript游戏引擎,缺点是不支持音效。
http://gammajs.org/
这个JavaScript引擎可用来构建2.5D的游戏,借助强大的HTML、JavaScript、CSS和WebGL。
http://www.kesiev.com/akihabara/
这是一个游戏工具包,提供的主要组件有:Gamebox、Gamecycle、Toys和用于支持触屏设备的Iphopad。
http://gamequery.onaluf.org/
一款jQuery插件,通过游戏相关的类来构建JavaScript游戏。
http://www.propulsionjs.com/
支持用于创建各种类型的二位游戏,内置很多可绘制图形和用于控制加速度的物理引擎。
http://craftyjs.com/
这是一个轻量、模块化的JavaScript游戏引擎,内置动画、事件管理、碰撞检测等等。
http://mccormick.cx/projects/jsGameSoup/
支持跨浏览器的鼠标、键盘和触摸事件处理,对形状的绘制支持很好。
http://gamejs.org/
GameJs是一个轻量的JavaScript游戏引擎,用于基于HTML5 Canvas的游戏开发。
http://www.getxc.org/
这是一个新推出的框架,没有上面那些成熟,其核心是场景、节点、动作和事件。
其它相关资源

Simple Game Framework (simpler JS game framework)
Diggy (JS game engine)
friGame (jQuery powered game engine)
Raphaël (JS library for vector graphics)
C3DL (JS library for 3D canvas)
GLGE (JS WebGL library)
PhiloGL (JS WebGL framework)
SoundManager (JavaScript sound API)
jPlayer (HTML5 audio and video for jQuery)
(编译来源:梦想天空 原文来自:Free JavaScript Game Frameworks To Create A Web-Based Fun)