Thursday, August 8, 2013

Open localhost web aplication on iphone from your local IIS

Find how to open and test your ASP.NET application located on your Win 7.0 from your iPhone.



  • 1. turn on WLAN on your PC

  • 2. place your ASP.NET application on your IIS 7.0
    For example I deployed simple WebTest ASP.NET application to my IIS 7.0. Try click "Browse *:80 (http)" from IIS to be sure your application properly running















  • 3. find your computer IPv4 Address
    - open Command Prompt (All Programs --> Accessories --> Command Prompt)
    - type ipconfig
    - remember IPv4Address (in format 192.x.x.x)

  • 4. try to open your ASP.NET application from your PC
    - instead of localhost type IPv4Address, in my case it is "http://192.x.x.x/WebTest/"
    - if it works proceed to next step

  • 5. connect your iPhone to your WLAN
    - on your iPhone: Settings --> Wi-Fi
    - Wi-Fi should be "ON" and you need to choose your WLAN Network

















  • 6. try to type address in your browser on your iphone (in my example something like this "http://192.x.x.x/WebTest/")

  • 7. if "http://192.x.x.x" open IIS page on your iphone but "http://192.x.x.x/WebTest/" (of course WebTest is in only in my example) does not open web application try open Control Panel --> Window Firewall --> Allow a Program through Windows Firewall
    - in "Allowed programs" click "Change setting" button and check "World Wide Web Services (HTTP)" and "Home/Work (Private)"
    - after this change you should see your web applicatio in your iPhone browser

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

Wednesday, February 20, 2013

How to Make Older Browsers Compatible with HTML5

In the past couple of years the web industry has seen a sudden boom in regards to HTML5. Although technically for the full specification to get approved we'll have to wait till the end of 2014, this is not stopping developers from writing codes in HTML5. Most, if not all, modern browsers have done a more or less good job in implementing the features of HTML5 (we all know which one doesn't!).

Unfortunately not all browsers have been able to implement all the new features that HTML5 is offering. So the developers often have to pay some extra care to make their code compatible with older browsers. In this article I'll try to point out some ways by which we can make older browsers compatible with HTML5. A little heads up though, this is about making browsers compatible with HTML5, not CSS3 (actually some aspects described are related to both, but our target is HTML5).

Getting to Know the Browsers

Before we get into making our code compatible and all that, we first need to have a clear idea on what actually the browsers can do. After all, what's the point of trying to teach someone what he/she already knows, right? Much to our advantage, there are some great sites which offer us considerable insight on browser features.

  • FindMeByIP
    On this site you'll find several charts where you can see a list of HTML5 features (and also CSS3) and info about which browser supports what feature. You can actually do it two ways, you can go to fmbip.com, in which case you'll get the info on the browser you are visiting the url by; or you can go to findmebyip.com/litmus, in which case you'll get a list of info on opera, chrome, mozilla, safari and IE versions 6, 7, 8, 9.
  • CanIUse
    This site also has a comprehensive listing of compatibility info (color coded, always helps). You can search for a particular feature or just skim through all that are listed. This is actually one of the sites I have been frequently visiting since I first started coding in HTML5 and CSS3.
  • HTML5Please
    This site is a bit different than the previous two. It does not contain a pin pointed list of what each browser can do, rather it gives us suggestions about what measures we should take regarding various features: whether we should totally avoid, use backup (i.e. polyfills, more on this later), use with caution or freely use a particular feature. According to the front page of this site, the recommendations are based on the experience of web developers. So it can turn out to be really handy in practical usage.
  • Browsershots
    Browsershots makes screenshots of your web design in different operating systems and browsers. Not really informative, but to have a quick glimpse of what our page will look in different browsers, quite an impressive site.
  • Spoon.net
    I personally think this is an awesome site. The Spoon.net Browser Sandbox provides us a method of cross-browser testing. All we have to do is just click run for any browser from the given list to launch it instantly. By the way you have to have an account to use its feature, and guess what, account creation is free!

Now that we know we can thoroughly investigate abilities of various browsers, let's get them compatible with HTML5. One thing that you'll see in common in most of these methods is the use of JavaScript. Let's list our options first and then we'll start cracking them one by one.

Ways to Make Older Browsers HTML5 Compatible

  • Pure ol' JavaScript
  • html5shiv (also known as html5shim)
  • modernizr
  • HTML5 Boilerplate
  • Google Chrome Frame (especially for IE)

Before I proceed further, I'd like to make one thing very clear: using the above mentioned ways does not make our browser all of a sudden capable of implementing all the features that HTML5 offers, in most cases it just makes the browser recognize that there is a tag with a specified name. For example, using the first 3 ways you can make older browsers know that there is a tag named 'canvas', but you can't really perform actions which canvas really offers (note: I am saying HTML5 Boilerplate supports canvas because it actually makes IE render web pages using Google Chrome Frame, which happens to support canvas).

Custom JavaScript

This is the elementary way of letting the browser know what new tags we are going to use if it is not familiar with them already. Say for example we want to use the tag "header". This is a tag which IE versions prior to 9 don't understand. So here's what we can do:

   <!--[if lt IE 9]>
    <script type="text/javascript">
      document.createElement("header");
    </script>
   <![endif]-->
  
It goes without saying that we have to place the piece of code between the "head" tags. The code snippet is quite self explanatory; even then, let's have a quick look at it. At the very first line we are starting a commented section, which basically says if the browser is less than IE version 9, interpret the following code; otherwise ignore what's in between the "if - endif" tags. Inside the script tags, we just have to call the createElement() function with the appropriate parameter. As an instance, if we also wanted to use "nav" tag we would have added the statement document.createElement("nav") in between script tags.

html5shiv

As stated before, it's also known as html5shim. So what is a shim? It is an application compatibility workaround (for those of you who have already googled it, yup, I took it from wikipedia). html5shim is one of the most popular polyfills (remember I stated the term "polyfill" previously? here it comes!). Paul Irish gave a simple definition of polyfills. If you are wondering who is Paul Irish, just know that he is sort of a front-end wizard in web industry. According to him polyfill is “a shim that mimics a future API, providing fallback functionality to older browsers”. You can download html5shiv here.

In case you are interested in technicalities, html5shiv sort of works by following the first method described i.e. creating element through JavaScript. After you download it, all you need to do is include the following snippet inside "head" tag:

   <!--[if lt IE 9]>
    <script src="dist/html5shiv.js"></script>
   <![endif]-->
  

modernizr

A really worthy name, it does make us modern (at least in regards to front-end development, that's for sure!). The best place to learn about modernizr is its official site. But don't worry; I'm not leaving you empty-handed. In short, what modernizr does is perform feature detection first. Note that I said "feature" detection, not "browser" detection. That basically means it finds out what our browser can do, not what browsers we are using. It then attaches necessary classes to our "html" tag. Say for example our browser does not support "canvas" tag, so a class named "no-canvas" will be added to our "html" tag. In the opposite case the class added would have been "canvas". So what do we do to use modernizr? Same as before, we download a copy of modernizr.js (you can find a link in the official site) and add the following code inside "head" tag:

   <script src="js/modernizr.js"></script>
  
It's worth noting that we can use modernizr to detect feature within our JavaScript, such as:

   if(Modernizr.geolocation){
    
   }
  

HTML5 Boilerplate

This is what I'd like to say is the ultimate blueprint. The package contains modernizr and jquery library. It also has normalize.css (I left out normalize from previous descriptions as it is related to CSS). You can find a link to download html5boilerplate from its website. Once downloaded, if you explore the folder you'll find all the files I've previously mentioned. The index.html is where your html goes. To simply define, this is a template for implementing HTML5.

Google Chrome Frame (Abbreviated as GCF)

For those of you who are really frustrated with IE, I saved the best for the last. Google Chrome Frame is simply a plug-in for IE which lets it render a webpage the same way google chrome would. Of course the downside is you can't use the features not supported by google chrome, but trust me, the amount of such features is negligible compared to IE. As far as I know, chrome ranks the second in regards to adopting HTML5 features (Maxthon being first). You can check the current standings from the site html5test. We basically have to do two things to make a page be displayed using Google Chrome Frame in IE.

Firstly, we have to make sure that the viewer's IE already has the plug-in installed. Frankly speaking, there is no way to force the user to install GCF, but at least we can prompt the user to install it. The developer's site chromium.org gives a way to use a JavaScript file named "CFInstall.js" which exactly does that. You can find an example of using "CFInstall.js" here. For your convenience I'm presenting the code below:

<html>

<body>
 <script type="text/javascript" 
 src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

  <style>
  /* 
  CSS rules to use for styling the overlay:
   .chromeFrameOverlayContent
   .chromeFrameOverlayContent iframe
   .chromeFrameOverlayCloseBar
   .chromeFrameOverlayUnderlay
   */
   </style> 

   <script>

   // You may want to place these lines inside an onload handler
   CFInstall.check({
       mode: "overlay",
       destination: "http://www.waikiki.com"
            });
   </script>
   </body>
   </html>
  
Secondly, we have to give instructions to our page to use GCF. We do this by adding the following simple meta inside "head" tag:
   <meta http-equiv="X-UA-Compatible" content="chrome=1">
  

HTML5 Cross Browser Polyfills

Remember I said taking certain measures as stated above will not actually make our browser able to use all the features provided by HTML5, but rather make our browser knowledgeable on the fact that there are certain tags? For those of you who became heartbroken, take a look at this site.. It provides a list of fallback options for HTML5 features.

Before I conclude I'd like to mention one thing. HTML5 is gaining popularity at a very high rate, and the browsers are also catching up nicely. After a few years I think there won't be the concept of making browsers "compatible with HTML5" (and sadly my so thoughtful article will become obsolete). But till then, we certainly have to keep our eyes open and take necessary measures.


Thursday, February 14, 2013

Using Images to Make Your Pages Pop

So, you've set up a blog, invested in some quality WordPress premium themes to make it look amazing, and now you're ready to add some images. Adding images to a blog post is quite simple; adding quality images, however, is something else altogether.

Cell Phone Cameras

With the advent of cell phone cameras, suddenly everyone's a photographer. Whether it's blogs or social media pages, tweets or whatever, you can't swing a run-on sentence without hitting a camera-phone pic. What's wrong with that? A picture paints a thousand words, doesn't it? Exactly! And if you post a fuzzy, poor quality cell phone picture, the word that's going to come across loud and clear is amateur!

Poor Resolution

Cell phone cameras are great; you can take candid shots and send them out to friends and family almost instantly. These images are great for viewing in the window of a cell phone, but probably won't look as good blown up on a large computer screen. Technology is improving all the time, but by and large, most cell phone cameras have poor resolution and not a lot of great features.

Why More Resolution is Better

Your photos should have at least 5 megapixels of resolution, and 10 is even better. While some will argue that you don't need so much resolution unless you intend to blow your photos up into posters, the added resolution allows you to crop to your heart's desire. If you start with a 10 megapixel photo and crop out 50 percent of it, what remains is a basically a 5 megapixel photo. You might decide you only want one face out of a whole crowd, and starting with higher resolution will allow you to crop it out and enlarge it and still have a decent photo.

Crop, Crop, Crop Your Photos

Cropping sets the professional apart from the amateur. In professional artwork, photos are seldom used as they are taken. Don't be afraid to crop out the extraneous detail. Cropping a photo puts more emphasis on the subject, and allows you to frame it more clearly. Cropping also allows you to get rid of that extra arm, shoulder, or half a person on the edge of the photo. Done artistically, cropping can also make your photos look more edgy and modern. Another consideration is cropping to fit the layout of your WordPress theme where you want to post the image.

Adjust the Lighting

Whether you use a professional program or simply the software that came with your camera, you should always adjust lighting levels, brightness, contrast, hue and saturation. Even in "auto" mode, most point and shoot camera photos will need light and color adjustments for optimal image results. Take some time and play with the results. Changing the hue can give your image a cooler or warmer look, and increasing the saturation can make the colors pop.

Bag the Flash

Use flash sparingly. A good camera will take photos quite well without a flash. Using flash tends to white out the picture. Dark photos can be lightened; the information is still there in the darkness. Black is rarely truly black. The reverse is not true for white, however. White in a photo means lost information. Even the best editing tools cannot bring it back.

Image Stabilization

Sometimes referred to as "anti-shake" or "blur reduction," this feature is a must if you're not using your camera on a tripod. Even the steadiest of hands can shake imperceptibly, and most photos are taken "on the fly" with subjects and cameras all moving at once. Since you're not a professional shooting dozens of shots every few seconds, this will guarantee that your "money" shot doesn't end up blurry.

Rename Your Image File

Give your image file a descriptive name to help it pop up on Internet image searches. WordPress themes usually allows you to input a description when you upload an image, but including a keyword in the file name itself is a sure sign of a pro.

About author:
Olga Ionel is a creative writer at ThemeFuse – a top provider of WordPress themes. She is passionate about studying online marketing industry and sharing informative tips.

Wednesday, February 6, 2013

How to make clickable picture in HTML

This short tutorial will learn you how to make a clickable picture in HTML web page.


What is clickable picture?

Clickable picture is picture which will lead you to specific web page when you click on that picture.


To better explain what is clickable picture take a look at image below this text. If you click this image, post "Make clickable links and clickable images" will be opened.

Clickable picture




HTML code for: How to make clickable picture

<a href="URLToLinkedWebPage"><img src="URLImageLocation" /></a>

In HTML code for clickable image you need to replace:

  • URLToLinkedWebPage - with URL to web page you want to be opened when user click on image

  • URLImageLocation - with location of image


Example:

<a href="https://www.google.com"><img src="https://www.google.com/images/srpr/logo3w.png" /></a>

Above HTML code display Google logo ("www.google.com/images/srpr/logo3w.png") and links to "www.google.com" when picture is clicked.


Tuesday, January 29, 2013

Make clickable links and clickable images

How to create clickable links?

Let's first explain what are clickable links.

Clickable link is a text which reference on some web place. So, when clickable link is clicked referenced page is opened. Common term for clickable link is hyperlink.

Example of clickable link:

Some tips for clickable link

When above clickable link is clicked user is redirected to "HTML link code tips" page (http://interestingwebs.blogspot.com/2009/06/tips-for-html-link-code.html).

Guide to make scrollable link on web page

<a href="Web address">Here type clickable text</a>
    We have:

  • the <a> that tag defines a clickable link, which is used to link from one page to another

  • href attribute specifies the web address of the page where link lead

Code for above example of clickable link would be:

<a href="http://interestingwebs.blogspot.com/2009/06/tips-for-html-link-code.html">Some tips for clickable link</a>

To better explain making of clickable links there is one more sample with hyperlink inside sentence.


Example of clickable link in setnence:

This link go to Google.

HTML code for scrollable link inside sentence (above example):

This <a href="https://www.google.com/">link</a> go to Google.

In this example word link is a clickable link while other words in a sentence are not. The word link is enclosed inside <a> and </a> tag.

How to make clickable image in HTML

Clickable image would be an image which will open linked web page when visitor click on this image. It is easy to make such an clickable image.

Sample:

Clickable image sample

When this image is clicked it will lead you to How to make clickable image tutorial!


Wednesday, January 23, 2013

Remove blogger navbar

How to remove blogger (blogspot) navbar?

Main reason why people want to remove blogger navbar from their blogspot blogs is that navbar does not fit with their blog design.

In this post you will find short tutorial how to remove blogger navbar.

It is relatively easy to remove it!

You just need to follow steps in this article!


What is blogger navbar

The Blogger Navbar appears by default at the top of every Blogger blog. Take a look at a below image to see how blogger nvabars looks like.

Blogspot NavBar




Steps for removing the Blogger Navigation bar

  • in blogger Dashboard click Template

  • under "Live on Blog" click on button Edit HTML












  • inside "Template › Edit HTML" find:
  • ]]></b:skin>
    

  • replace this code with:
  • #navbar-iframe,#navbar { display: none !important; }
    ]]>
    

  • after replacing code you should save template and your blog will be without navbar. And be very careful when edit HTML layout of your blogger blog.

Wednesday, January 16, 2013

How often Google crawl

You make a new web page and ask yourself when Googe will crawl my new web page (or new blog post)?

Let's try to understand how Google crawl the web.

Google spiders

Google use spiders to crawl the web.

Spiders (also called GoogleBots) are software robots which discovers new and updated web pages and add those pages to the Google index.

Google crawling

When Googlebot (or a Google spider) visit one web site it detects all links on each page of this web site and adds them to its list of pages to crawl.

So Googlebot crawl from one page to another and follow their links. This is how Google crawl almost all pages on the internet.

When Google find some web site it will come back to crawl this site again and reindex it.


























How often Google crawl

How often Google will crawl some web site depends on many factors such us PageRank, links to a page...

One of the factors is how often you change your site or add new pages. If changes are happening more frequently then Google will probably crawl your web site more frequently.

If your site or blog is new and is not indexed by google find out how to force google to crawl your web site or blog.


Tuesday, January 8, 2013

Blogger tips for beginners

Here you will find a few links to blogger tips for beginners. Those are tips that every blogger should know.

Tips are primarily for blogspot blog. Learn few basic techniques which will help you to blog better.

Learn how to make and arrange categories in blogger, how to have recent posts in your side bar, expandable summaries, display HTML code in blogger post...


Arrange your posts by categories in blogger

Add categories to the blogger and give your visitors opportunity to view your posts sorted by categories. Accomplish this in a few simple steps.

Posts sorted by categories in blogger

List recent posts in blogspot

You can easily display links to last (recent) five posts on your blog. Or maybee last ten posts.
Don't know how? Read this post, it is easy!

Learn how to display recent posts on your blogspot blog









Expandable post summaries on main blog page

If you want to have post summaries on main blog page which will expand on click on "read more". Read this article to learn how to accomplish it.
















Display HTML code in blogger post

Want to write blogger post about HTML code, but HTML code is not properly displayed in your blog post.

For example this text will not be displayed correctly:

<h3>I want <h3> tags not heading format</h3>

Follow the link and you will find guide how to display HTML code in your blog posts!

Make google search for your blog

Add search capability on your blog with AdSense for Search. Allow your visitors to search content of your site in a Google like manner and try to earn some money.

Add Google search box in your blog which search your blog only






How to add java script in your blogger post

You need to add some cool javascript functionality inside blogspot post but do not know how? Here is a short tutorial how to do this.


Increase visits with title change

Short guide to change title structure in blogger which have significant impact of SEO performance.

The default title structure is : [Blog title]: [Post title]

The structure : [Post title]: [Blog title] could improve your traffic performance.


Wednesday, January 2, 2013

Add meta description on blogger post

How to add unique meta description tag to each post post in blogspot (blogger) blog?

If you searching answer on that question this article is right place to find solution. It give simple easy to implement solution.

This article is divided on two parts:

  • what is purpose of meta description tags

  • how to implement meta description tags to every post in blogger

WHY TO USE META DESCRIPTION TAGS?

What is Meta Description Tags?

Meta Description Tags are HTML elements used to provide description about a HTML page.

Why Meta Description Tags are important?

It is important because Meta Description Tag content might be used in Search Engine Result Page (SERP) for snippets. So if user find snippet text usable there is better chance he will open your page.

Example of SERP code snippet

Google SERP code snippet sample







We get above code snippet and here is a content of Meta Description tag!

<meta content='This blog have blog tutorial, Javascript and HTML tips (including jQuery).'
name='description'/>

ADD DIFFERENT META DESCRIPTION TAG TO EVERY POST IN YOUR BLOGGER BLOG

Now blogger make it easy to add meta descriptions for each post throug blogspot interface.

Recently it was much harder to accomplish it, you must make a change inside HTML template edit for each post and it was very impractical.

Now it is enough to follow this steps:

  • Inside blogger dashboard click Settings > Search Settings

    Bloggers interface Setting - Search preferences










  • Under Meta tags switch "Enable search description" (to Yes) and type text you want to be meta description for your blog. Of course don't forget to Save changes.

    Blogger meta tags description in blogspot interface









  • Last step is to inside "Edit post interface" find Post settings --> Search Description and type description you want to appear for meta description tag in current post.