Wednesday, March 27, 2013

HTML5 canvas

Canvas is perhaps one of those features of HTML5 which caused a great deal of stir among the web developers. In simple sense, canvas tag allows you to specify a region on your document where you can draw stuff. One thing to be noted is we have to use some sort of a scripting language (usually JavaScript) to interact with canvas. For today's article I'll assume you know the basics of JavaScript.



Creating a Canvas Element

Creating a canvas element is quite simple:


<canvas height = "200" width = "200" id = "canvas1" ></canvas>
It is advised to always give a height and width to canvas element. A id is also necessary as there can be more than one canvas element in a single page.

The above code is actually as far as only HTML will take us, for functionalities of canvas we gotta use JavaScript as mentioned earlier. Please bear in mind any subsequent codes seen in this article must be written inside script tag or an external script file.

Understanding the Context

When we draw something on canvas, we actually retrieve the "context" of the canvas and put stuff on it. Broadly speaking, there are two types of context, 2d (mostly used) and 3d (still experimental). We will use the 2d context. Our first job is to identify our canvas element and create a handler to its 2d context. We do this by the following fragment:


 var canvas = document.getElementById('canvas1');
 var ctx = canvas.getContext('2d');
 
We are first creating a handler to our canvas element (recall it had the id 'canvas1'), then we are retrieving its 2d context through the function getContext().

Basic Canvas Properties

Remember we grabbed the context just on the previous section? Now we are going to set some of its properties. First let's have a look at three basic properties:

  • fillStyle:
    style to use when filling. We can specify CSS colors,gradients or patterns (defaults to black).

  • strokeStyle:
    style to use when filling. Constraints similar to that of fillStyle.

  • lineWidth:
    width of the lines drawn by our imaginary pen on canvas.

Drawing with colors and styles is a two step process. First one is to set the above properties. Other one is to perform the drawing operation i.e. calling the function which performs drawing.

Fill and Stroke

While dealing with canvas you'll find two versions of a function to create rectangles. these are fillRect and strokeRect ("Rect" standing for rectangle). What fill does is it creates the solid shape filled with the designated color/pattern, whereas stroke simply outlines the shape with that color. An example is presented shortly.

Before we append the following fragment to our code, let's have a look at the arguments that the fillRect or strokeRect takes:
x-coord, y-coord, width, height
The coordinates specify the position of upper-left corner of the rectangle, and width and height denotes the size of the rectangle. One reminder, the origin of the coordinate system is situated at the top-left corner of the canvas. Now we can append the following segment:


 ctx.fillStyle = 'tan';
 ctx.fillRect(10, 10, 100, 100);
  
 ctx.lineWidth = 5;
 ctx.strokeStyle = 'red';
 ctx.strokeRect(10 , 10, 100, 100);
 

First we chose the color tan and created a solid rectangle at (10, 10) having height and width of 100. Then we selected the lineWidth to be 5. Next we again selected a color, this time red; and stroked a rectangle at (10, 10) having similar dimensions as the previous rectangle. Notice although we have used colors as the property of fillStyle and such, we could have also used gradients or patterns, which is quite easily possible using CSS3.

Sample:
Your browser does not support the HTML5 canvas tag.

Sample code:
<canvas id="CanvasFill" width="120" height="120">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById('CanvasFill');
    var ctx = canvas.getContext('2d');
    
    ctx.fillStyle = 'tan';
    ctx.fillRect(10, 10, 100, 100);

    ctx.lineWidth = 5;
    ctx.strokeStyle = 'red';
    ctx.strokeRect(10, 10, 100, 100);
    
</script>


Drawing Lines

For drawing a line we are going to use four functions: beginPath, moveTo, lineTo and stroke. The function beginPath tells that we are going to create path. We move the imaginary pen to a location through lineTo function. Notice that by "moving the pen" I mean picking the tip of the pen up and then placing it down again at the designated coordinate. The function lineTo instructs to draw a line starting from the current point to th point passed as parameter of lineTo. But the line is actually not drawn unless we call the stroke function. Let's have a look at the following fragment of code:


  ctx.lineWidth = 1;
  ctx.strokeStyle = 'black';
  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(110, 110);
  ctx.stroke();
  ctx.lineTo(200, 110);
  ctx.stroke();
 

We are setting the line width to be 1 and the color of the stroke to be black. Then we call the beginPath function. We move our imaginary pen to a point, in this case the point (10, 10). In the next line we instruct to create a line from (10, 10) to (110, 110). And finally to ensure the line is drawn, we call the stroke function. Notice that we created another line from the point where the previous line ended. If we wanted to draw a line from a different point we would have needed to call another moveTo function.

Sample:

Your browser does not support the HTML5 canvas tag.
Sample code:

<canvas id="CanvasStroke" width="200" height="150">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById('CanvasStroke');
    var ctx = canvas.getContext('2d');
    
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.lineTo(110, 110);
    ctx.stroke();
    ctx.lineTo(200, 110);
    ctx.stroke();
    
</script>

Rendering Text

We can draw texts on canvas using fillText and strokeText functions. The arguments are:
text x-coord y-coord
Before calling these functions, we can also specify properties by assigning values to the font property of our context. The order in which these properties are assigned is:
font-style font-weight font-size font-face
The following code illustrates the complete method:


  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.font = "normal normal 24px Tahoma";
  ctx.fillText("Hello world", 10, 140);
 
Sample:
Your browser does not support the HTML5 canvas tag.
Sample code:

<canvas id="CanvasText" width="200" height="100">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById('CanvasText');
    var ctx = canvas.getContext('2d');
    
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = "normal normal 24px Tahoma";
    ctx.fillText("Hello world", 10, 40);
    
</script>



The canvas of HTML5 has a vast domain. In this article I've tried to point out just some of the basic ideas. From here I'd suggest you search the net for a bit more info. As always w3schools has a precise collection of more or less all the features of canvas. Besides this mozilla developer site can also turn out to be really helpful. Although at first canvas might seem a bit intimidating, it is actually quite a great tool to have at hand. Bottom line, this is by far the best light-weight option to create graphic objects on the fly.


Wednesday, March 20, 2013

Javascript disable right click

In some situations some web admins think disabling a right click on their web page is a good idea.

The reason for disabling a right click could be to:

  • protect and hide source code

  • protect images on web page

  • disable copy and paste functionality...

There are opinions that disabling right mouse click is a bad practice and you shouldn't do it on your site (find out why here). It can prevent some novice users from stealing on your site but more advanced users will find a way (to get image or take a look on your source code).

In this article you will find how to:

  • disable right click on whole HTML web page using onmousedown event

  • disable right click on whole page using attribute inside body tag

  • disable right click on some part of HTML page

  • disable right click on image using javascript
No Right click (disabled) with javascript

Disable right click using javascript on HTML page

You can disable right click on your web page using javascript function which will show message box if right mouse button is clicked.

Here is a code:


    <script type="text/javascript">
        function catch_click(e) {
            if (!e) var e = window.event;
            var right_click = (e.which ? (e.which == 3) : (e.button == 2));
            if (right_click) {
                alert('Right clicking on this page is not allowed.');
                return false;
            }
        }
        document.onmousedown = catch_click;
    </script>

Brief explanation of code: When mouse button is clicked javascript function catch_click is called. If right button is clicked message box pop up and right click is canceled.


Disable right click on HTML page using body attribute

This method prevents context menu to appear when right click happened without message box on HTML page. It is very easy to implement.

You just need to add this attribute to body element:

<body oncontextmenu="return false">

Disable right click on only part of HTML page

On the beginning of this article it was said that preventing users from using right click is a bad practice. So if you want to protect something on your page maybe is better practice to protect only this specific element.

It is possible to use oncontext attribute on specific HTML element.

To better explain we will show the example with HTML table with two columns. We will forbid right click only on First column. On Second column right click is possible.

<Table>
   <tr>
    <td oncontextmenu="return false">
     First column (no right click)
   </td>
   <td>
     Second column
   </td>
  </tr>
</Table>

On td tag attribute oncontextmenu is added and set to "return false". So on First column right click is disabled.


No right click Second column

Disable right click on image using javascript

You can disable right click on image using the technique described in previous chapter. Just add oncontextmenu attribute inside img element.

<img src="../PathToImage" oncontextmenu="return false" />

On the beginning of the article you can find image "No right click!" which can not be right clicked.


Wednesday, March 13, 2013

Keep Your Blogging Secure

Blogging is an important outlet for many people. Whether they do it for business, for school, or simply as a way to fill their free time, the number of people who write blogs for one reason or another increases every day, and as the years go by, blogs will only become an even more central part of our culture and how we communicate.

But when writing a blog, it is important to keep your information secure. Surfing the internet is fraught with danger, and the process of publishing a blog only compounds the risks that the internet involves. So for bloggers who are interested in keep their online activity safe, here are a couple tips on how to manage risk and stay secure.

Keep Private Information Private

Remember, the information that goes on a blog is going to be forever public. Even if you delete your blog, there are websites like Google and Archive.com that scrape everything that is published on the internet and store it on their servers permanently. So consider what you want to be public, and what might better be kept private. There are no doubt many young people who are blogging today who will wish they had been more circumspect when the information they publish comes back to haunt them in the future.

But this isn’t only about the future. Being too forthcoming now can expose you to online predators who want to use your information against. The amount of information necessary to commit cyber fraud or identity theft can be surprisingly small. Be careful that you are not disclosing too much on your blog. If you do, strangers who come across that information can use it in all sorts of ways that can wreak havoc on your personal and financial dealings.

Protect Your Site from Viruses

Many people host their own blogs, either on servers they administer or with cloud-hosting companies. In these cases, their blogs can become vectors of online viruses without them even realizing it. They can inadvertently transmit viruses to their servers and websites without intending to. Those viruses are then passed along to their visitors. The best way to avoid this is to conduct all blogging activities over a VPN service , which will stop the transmission of viruses and prevent third-parties from injecting viruses into your online data. This not only protects you, the author of the blog, but it also protects all your readers from all potential harm.

Veronica Clyde is a dedicated writer at VPNServices.net – a website where you can read about VPN services and Online Security. She also loves to share VPN technology, Wordpress and Blogging tips.


Tuesday, March 5, 2013

Group pages for reporting in GA

Ok, using Google Anlytics make a easy to find how many pageviews get your web site or specific web page.

But what if you want to know how many visitors get specific group of pages. For example you want to track only pages written in 2013 or just pages written by specific author or only pages about specific topic...

This article is a guide how to make report for specific group of individually picked pages from your web site.


To better explain how to make reports of specific pages in GA we will explain:

  • How to report only on specifically picked pages

  • How to report pages written in 2012 instantly

  • How to make customized report for year 2012


Track visits from all pages about some topic in GA

Maybe you want to know how many visits coming from some specific topic. For example how many visits drive topics about javacript.

If it is the case you can easily get report in Google Analytics with the number of visits for all pages on your site which include keyword javascript in title. Just follow instructions.

  • In Google Analytics click on Content --> Overview --> Site Content --> All Pages


  • Find and click link "advanced" next to the search bar


  • new container will appear, in third button choose Containing and in empty textbox type desired term. For purpose of this example it is "javascript".


  • click on "Apply" and you will get report for all pages on your site or blog which have term "javascript" in title

Track specifically picked pages on your site instantly in GA

Let's say I want to make a report for group of only two pages on my blog and those two pages are: http://interestingwebs.blogspot.com//2009/01/jscript-in-blogger-post.html and http://interestingwebs.blogspot.com//2009/06/javascript-in-external-file.html.

  • In Google Aalytics click on Content --> Overview --> Site Content --> All Pages


  • Find and click advanced near search bar


  • new container will appear, in third button choose Matching RegExp and in empty textbox type second part of URL of page you want to track. We want to track two pages so we can use or operator : |.

    In our example it would be: "2009/01/jscript-in-blogger-post.html|2009/06/javascript-in-external-file.html".


  • click on "Apply" and you will get report for only two specific pages

Get visits report for all pages written in selected year with Google Analytics

It can be useful to find how many visit drive all pages on your site written in one year. For example I want to know how many visits get my pages written in 2012 for last month.

This can be done with Google Analytics but only if the year in URL of your individual pages. I use blogspot blog and year can be read from URL.

For example:

http://interestingwebs.blogspot.com/2013/02/how-to-make-clickable-picture-in-html.html

From this URL we can conclude article is written in year 2013 and in second (2) month (February).

So, if permalinks on your site are structured in similar way you can use this method to make reports based on year when article is published.

  • In Google Aalytics click on Content --> Overview --> Site Content --> All Pages


  • Find and click advanced near search bar


  • new container will appear, in third button choose Containing and in empty textbox type year in this case 2012.

  • click on "Apply" and you will get report only for two specific pages

Make custom report for posts written in selected year whch can be reused

Now you know how to group pages by specific criteria and make a reports for them. But it have no sense to every time you need such a report you must to create it from scratch. To avoid this you can make custom report which can be used later.

So here is example which will help you to learn some basic steps for creating custom reports. This example learn you how to create and use custom report which will report number of Pageviews for all pages written in 2012 year.

  • Find and click "Customization" in Google Analytics

  • click "New Custom Report"

  • in "General information" enter title, for example "2012 pages"

  • in Report content choose Name, Metric Groups and Dimension Drilldowns. For this example for Name type "2012 pages", for Metric Group choose Pageviews, for Dimension Drilldowns choose Pages.

  • in Filter tab set first button to "Include", second button to "Page"
  • , third button to "Regex" and fourth Textbox to 2012


  • Save custom report and now you can see your Custom Report by clicking Custom Report --> 2012 pages