A Clever Access Control for Web Pages

You want to access control to a specific web page. You want only visitors from only a specific language speakers. Now you have two options.

• Block IP addresses that are outside your target. But this will block also the people of the same country that are talking same language but living outside the target area.
• Another solution would be something like below.

The Solution

I am putting a screenshot of the solution. That will not be meaningful to you if you can't read below of two parts. But if you read the upper English part and you buy it, that will be an automatic access control mechanism for you. You will think that down part is translation of the English part but it is not. It is completely another phrase that gives the key to the webpage.

Translation of the down part is: "If you know turkish, you can access to webpage by answering the following question. What is the first sibilancy of our country's capital? Press from the keyboard."

Note: Also the source code of the web page doesn't give a hint about what is going on around. You can check the source code and it is encrypted jQuery. (Not that easy to understand if you are an ordinary developer. End users will even not look at the source code.)

The webpage: http://www.dizimag.com

DOT Language

Dot is an abstract grammar defining language. We can use dot to represent graphs also. In this post, I will show how different graphs can be generated with different codes from dot language. I will still use the Java api for dot language which I mentioned in GraphViz Java post.
Since these are just a few examples, you can find other attributes and styles from Graphviz dot attr page or the dot manual.

Simple Directed Graph

digraph G {
    A
    B
    A -> B
    A -> C;
}

Output

Notes
You see that you don't have to introduce each node at the beginning. Any node in the edges will automatically inserted.

Simple Graph without Edges

digraph G {
    A
    B
    C
    D
}

Output

Notes
From this example, we see that we have to introduce all edges if there are no edges that consists of these nodes.

Simple Undirected Graph

graph G {
    A
    B
    A -- B
    A -- C
}

Output

Different Shape and Colors for Nodes

graph G {
    A [shape=box, peripheries=2,color=black, style=filled, fontcolor=white]
    B [style=filled, color=gray84, fillcolor=gray84,fontcolor=white]
    C [color=red, style=filled, fontcolor=white]
    D [shape=polygon,sides=4,distortion=.7]
    A -- B
    A -- C
}

Output

Notes
You can find many different node styles in this manual.

Different Edge Styles

digraph G {
    A
    B
    C
    D
    A -> B [arrowhead=obox, style=dotted, color=red]
    A -> C [taillabel="tail"]
    A -> D [label="g'", weight=4]
}

Output

Notes
Heavier weight means shorter, straighter and more vertical the edge is.