Categories
Tips

Preview How Your Facebook Profile Looks To Others

I was looking at my friend’s Facebook profile and suddenly a thought came to my mind that how my profile looks to my friends or others. Can someone view my contact info whom I do not know, I was worried about my profile privacy. Then I asked my friend for his ID and password so that I can check how my profile looks to him.

To view your info how it looks to others no need to do this you can directly preview your profile, nobody else’s password is required. Just enter the name of any of your friend, you will be able to watch the preview how it looks to him.

Steps to view your profile preview:

Go in the Account > Privacy Settings (the below page appears > Select View Settings.

facebook-preview1

Click on Preview My Profile button.

facebook-preview2

Enter the name of your friend or someone in the text box, you want to check how your profile looks to him.

facebook-preview3

This way you can keep your profile more secure. Do you find this article useful, let me know through your comments.

Categories
Analysis

How Color Plays an Important Role in Web Designing

Lets start with the Color Wheel which is nothing but the spectrum twisted around to make a complete color wheel that shows relationships between primary colors, secondary colors and complementary colors. The color wheel is particularly useful for showing how the colors relate to each other and how you can create new colors by mixing two or more colors. The wheel is divided into twelve distinct colors. In the below image you can see by combining primary, secondary and tertiary color we get the complete color wheel.

Every Designer wants to create an eye catching website but how it can be achieved. The answer is simple if he implements pleasant color schemes in his design, because color plays a critical role in graphic designing. Colorsontheweb is Web portal one must know while playing with colors. Below are few things explained, taken from the Colorsontheweb.

Color theory

  • Color Physics
  • The Color Wheel
  • Color Terms
  • Combining Colors
  • Color Contrast
ADVERTISEMENT

Color tools

  • Color Wizard
  • Color Wheel
  • Color Contrast Analyzer

Color Wheel: The color wheel consist of a continual gradient of the colors in the spectrum, below image illustrates how combining primary, secondary and tertiary results in complete color wheel.

color-wheel

Color terms: Most commonly used terms in colors: Hue, Saturation, Tint and Shade, below image shows the difference between these terms.

color-terms

Color Combination: In Various ways you can set the color combo. Choose a color of your choice and you can set different combo. What I used to do while creating a web template, I randomly select any color which I like. Indeed it is a good source one can choose color according to the below pattern to keep harmony in one’s web template.

color-combo

Color Contrast: Below image illustrates different color contrast scheme.

contrast

Color Wizard : Choose a color randomly or manually, after that you can set various combination like Monochromatic, Analogous, Triadic, Tetradic etc. As shown in the image when you select any pattern it appears in the corner of the right-bottom.

color-wizard

Color Wheel : Select color of your choice and check varying it.

spin-color

Color Contrast Analyzer : You can test if your text color is compatible with the background.

color-contrat-analyzer

This is very useful for Graphic or Web Designer. Do you find this helpful let me know through your comments.

To read more details visit link : Colorsontheweb

Categories
Reviews

Syntax Highlighter Compress – Best Syntax Highlighter WordPress Plugin

When I write post and highlight HTML/CSS or PHP or any other languages, I have to replace tags ‘<‘ with ‘&lt;‘ . It consumes a lot of time to convert. An easy way to implement source code or programming language is to implement a WordPress plugin. WordPress plugin Syntax Highlighter Compress has support for many languages listed below. Though there are many similar plugin available but the advantage of using this plugin is that it loads the necessary brush files dynamically. Unlike other plugin based on Syntax Highlighter Script but these cause long page loading time and they are difficult to handle.

When you choose a plugin first look at its rating, compatibility and last updated these are the parameters one must check before testing or implementing any plugin.

Syntax Highlighter Compress

The highlighted code in your post will look like in the image below more highlight styles are available, you can change the highlight setting in setting menu.

image

Supported Mark-up or Available Programming languages

Syntax Highlighter ComPress is a simple WordPress plugin. Code and source text of various programming languages or mark-up can be highlighted in WordPress. This plugin last updated at 2010-9-29, requires WordPress version 2.6 or higher and it is compatible with version 3.0.3. Once you have installed this plugin, activate it then  an icon appears in your post text area, look at the image below, click it select language and paste your code. You can go for a Demo Here.

  • AppleScript
  • ActionScript3
  • Bash/shell
  • Coldfusion
  • C#
  • C++
  • CSS
  • Delphi
  • Diff
  • Erlang
  • Groovy
  • JavaScript
  • Java
  • JavaFX
  • Perl
  • PHP
  • Plain Text
  • Python
  • Ruby
  • Scala
  • SQL
  • Visual Basic
  • XML

You can find more setting option in the admin panel settings menu. Settings option available for stylesheet, Auto-Links, Collapse, Gutter, Smart-Tabs, Tab-size and Toolbar.

Let me know if you have idea about better WordPress plugins.

Link : Syntax Highlighter ComPress

Categories
News

YouTube Feature Enables You To Share Video From Any Point of Time

Sometimes we want to share or send the video that should start playing from certain point of time, avoiding unwanted part of the beginning so that one can enjoy only the important part of it. However YouTube has a newly added feature, it appears when you right-click your mouse button on any YouTube video. Until you could do this manually by appending #t=1m15s or #t=70 to a YouTube URL.

Pause the YouTube video at any point of time, right-click select option Copy video URL at current time from the context menu to copy URL to clipboard. Share or send it to your friend to watch the video that begins from the point you copied.

share-youtube

You can link directly to a certain point inside a YouTube video instead of playing the whole video from the beginning. Whenever someone clicks your YouTube link, he gets the video to the exact point in its timeline. Its a nice feature that saves your time as well as internet usage.

Play any YouTube video and just check it out. Do you find this useful, Share it to your friends and get the most of this awesome feature.

Categories
Tips

A Web Designer Guide of Top Firefox Addons

A web designer must have the following extension for better productivity. It improves ones coding or debugging speed. Many complicated task are solved at a few clicks.

Web Designer Guide to Firefox Extensions

Firefox has a chain of hundreds of Addon, in which I have collected a list of most essential Firefox extension which every Designer must use to boost their productivity.

Click extension link to read about every single article in detail.

designer-guide

#1.Firebug :

Firebug 1.6.0 is available now. This is a production release for Firefox 4 Beta. The most popular and powerful web development tool, You can edit, debug, monitor CSS, HTML, and JavaScript live in any web page.

firebug_thumb

#2.Web Developer :

The Web Developer extension adds various web developer tools to your browser. The extension is available for Firefox and Chrome. It will run on any platform that these browsers support including Windows, Mac OS X and Linux.

web-developer_thumb1

#3.FireShot :

Adds the ability to capture screenshots of the entire page, It provides many rich feature like annotations for images and text.

fireshot_thumb

#4.Bar Tab :

It is furious to restart browser having plenty of tabs open, it can slow down your browser. Bar Tab enables you when you restart your browser it only load the tab which is currently in use results in faster loading speed.

bar-tab

#5.Tile tab :

It split your browser screen. Various display option available.

Tile-Tab_thumb

#6.OutWit Images :

Download images from any Web sources effortlessly. Smoothly scroll through the pictures, filter and sort according to your needs. Drag and drop them into your collection basket, view slide shows, save directly at your hard disk. This add-on compatible with Windows, Mac OS, Linux.

Outwit_thumb

#7.Font Finder :

Easy to find font details on just a single click. Provides all necessary information. Icon appears in the status bar.

font-finder_thumb

#8.Image Zoom :

Zoom your browser screen smoothly with a mouse scroll. Various option available like zoom text or zoom image only, rotate image, zoom with mouse scroll or click.

image-zoom_thumb

#9.Status-Bar-Calculator :

Get a calculator in browser status bar for quick calculations. Sits in the status bar and wont mess up your browser.

status-bar-calculator_thumb

#10.File And Folder Shortcut :

Adds a shortcut in your browser screen for your file and folder for easy and quick access.

file-n-folder-shortcut_thumb

#11.Dust Me Selector :

It detects unused CSS selector, then you can remove unwanted classes from your style sheet. Excellent tool to clean your stylesheet.

dust-me-selector_thumb

#12.FlashGot :

If you are worried of being disconnected while downloading large file or movie. Then manage your download with flash got. Download all the links, movies and audio clips of a page at the maximum speed with a single click, using the most popular, lightweight and reliable external download managers like FlashGet.

flashgot_thumb

#13.Web Mail Notifier :

Web Mail Notifier checks your web mail accounts and notifies the number of unread emails. Notification pops up in the notification bar whenever you have an unread mail.

web-mail-notifier_thumb

#14.Open With Photoshop :

Right click on any web images and open it directly into Photoshop. Isn’t is easy to edit images? No need to first download then open and edit it in Photoshop.

open-with-photoshop_thumb

#15.Progress Bar Tab :

Shows progress meter above each tab simultaneously.

progress-bar-tab

#16.SeoQuake SEO extension :

Find SEO details with Firefox extension SeoQuake SEO extension. Provides lot of necessary information.

seo-quake

#17.Organize Status Bar :

If you have lots of add-on lied in your status bar and want to re-arrange it, then this add-on is for you.

organize-status-bar

#18.CSS Usage :

Clean up your stylesheet using CSS Usage. It integrates in the Firebug interface.

CSS-Usage

Updates

#19. FEBE

This add-on lets you take a backup of all of your Firefox settings like extension, bookmarks, preferences, cookies and everything that Firefox offers. Or you can sync Firefox using this add-on.

If you know more about any useful Addon you can share it through your comment…

alt

chrome seo font-finder image zoom fireshot web mail notifier flashgot dust me selector file and folder shortcut outwit open with photoshop tile tab status bar calculator fire bug Developer tool Image Map

Categories
Tutorial

[Photoshop trick] How To Discard Certain Part of an Image

As you can see the below image, I am going to make the left image look like the image in the right. It looks like a difficult one but not only the Graphic Designer Anyone who knows Photoshop a bit will be able to edit the image as shown below, in just 2-steps.

In below image I am going to discard certain part from the image without affecting its beauty. It’s a simple tutorial you can do it easily.

beftore-after

  • First take an image in Photoshop and copy the layer for backup.

content-aware

  • Select the part which you want to drain out from the image. You can use quick selection tool or Lasso tool to make selection, here I used Lasso tool.

make-selection

  • Go to Edit menu select Fill(Edit –> Fill), you will get the following window pop up make sure Content-Aware is selected click OK.

image

  • And its done, isn’t it a child’s play?

content-aware-applied

More Examples :

example-1

example-2

Try this out for yourself, and let me know if you like the tutorial please share your view through the comments.

Categories
Tutorial

CSS Trick – Best Way To Preload An Image Without Using Javascript

You might have been observed on many web pages, when you mouse over on any image it disappears for 2-3 seconds and when you mouse over next time it works well, why it happens?

The answer is simple the image which is on hover class is not been loaded yet, as a result when you mouse over first time it takes time to load but when you mouse over next time it behaves normal because the image has been loaded to your computer and ready for the next time. Below you can see how various techniques are used to preload an image.

How to Preload an Image?

There are various techniques to preload an image, two methods are mentioned below without using javascript.

ADVERTISEMENT

Method  1

In this method we create a div and keep it at the end of the HTML document or after footer div, a class is assign to a div say preloadClass which hides the image using display:none property but the images are loaded at the end of the document so when you hover an image it will not flash for the first time.

<div class="preloadClass">
     <img src="images/hover-image1.png>
     <img src="images/hover-image2.png />
     <img src="images/hover-image3.png/>
</div>
.preloadClass{ display:none; }

ADVERTISEMENT
.Demo:hover { background-image:url(hover-image1.png); }

Method  2

In this method we call the image from the stylesheet and set its position to –1000px to shift away the image so that it disappears from the page.

.preloadClass {
    background-image:url(hover-image.png);
    background-position: -1000px -1000px;
}

.Demo:hover { background: url(hover-image.png) no-repeat 50% 50%;}
ADVERTISEMENT

I think adding extra markup to preload an image is not a good approach, especially where Web Standards are concerned. Mobile devices, may experience problems when dealing with the following preloading technique. So to avoid this we can implement Method 2.

The best solution is to use a sprite image, you just have to change the background position on hover class and you are done.

The above all technique is tested and compatible with all browsers.

CSS expert out there, do you have a better idea or solution please share it through your comments.

Categories
Tutorial

Using Dynamic URL for .htc File in WordPress Theme

As we all know in Mozilla, Chrome or most of the browsers we can use CSS3 properties, but how those  CSS properties can be used in Internet Explorer. A smart way is to use pie.htc or ie-css3.htc file that supports some new styles available in CSS3 standards. While I work on WordPress project I use pie.htc files, so that I can implement some of the CSS3 property for Internet Explorer here is an example how to use it.

Absolute path for .htc file

An absolute path is applied to htc file in the stylesheet for CSS3 support to IE.

.example {
border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
behavior : url(http://demosite.info/wp-content/themes/twentyten/pie.htc); /*   absolute path  */
}
ADVERTISEMENT

The above syntax works well, as we have set an absolute path for .htc file in the stylesheet but it becomes inconvenient to move styelsheet from one domain to another.

Relative path will not work in case of .htc file

Indeed Internet Explorer does not interpret the path relative to the CSS file, but it interprets the URL for the behavior property relative to the source HTML document. This causes the PIE behavior inconvenient because the path has to be absolute from the domain root this makes the CSS not easily movable to different directory. (Note : Here pie.htc is in js directory)

.example {
border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
behavior : url(js/pie.htc); /*  relative path, pie.htc is in js folder  */
}
ADVERTISEMENT

We can make use of Dynamic URL for accessing .htc file

We can use WordPress function “bloginfo(‘template_directory’)” in header.php file to generate the path dynamically. Put the classes into tag within the section. Now you can use the htc file by adding classes to it separated by commas.

header.php

<style type="text/css" >
        .Class1, .Class2 { behavior : url(<?php bloginfo('template_directory'); ?>/path/to/PIE.htc; }
 </style>

style.css

ADVERTISEMENT
.Class1 {
border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
}

.Class2 {
-moz-box-shadow : 0px 0px 4px #ffffff;
-webkit-box-shadow : 0px 0px 4px #ffffff;
box-shadow : 0px 0px 4px #ffffff;
}

For my WordPress project I tried to access .htc file keeping it at different domain but could not access it, because the IE behavior property does not allow .htc file to access cross domain. You can also visit this link for reference. If you have any updates or idea about this you can share it though your comments.

Categories
Tips

Firefox Extension – Now You Can See The Progress Bar Above Each Tab

Here is the Firefox extension that increases tab utility. Usually progress bar appears in the status bar but this add-on integrates the progress bar above the tabs.  Progress Bar Tab is a Firefox extension that enables us to watch the progress meter above each tab when a web page is loading. The benefit of using this add-on is that you can simultaneously watch the progress bar without switching back to the previous tab.

In the below image you can notice the progress meter which is just above the tab and increases as the web page is loaded.

progress-bar-tab

You might have many add-ons installed in your Firefox browser, one thing you should  take care that it is not compatible with Firefox extension “Tab Mix Plus” since it implements a feature rather similar to one of Tab Mix Plus’s.

Do drop in your comments.

Link : Progress Bar Tab

Go to Parent Post

Categories
Tips

Organize Status Bar With Firefox Extension

Below image is a screenshot of my Firefox browser, as you can see there are many add-ons scattered in the status bar. To arrange these add-ons according to your choice, Firefox has an extension called Organize Status Bar as its name suggest it helps re-arrange add-ons  lied in the status bar of your Firefox browser.

SNAGHTML163e18f

It is useful in case, lets take an example I had the the habit to click at the right-bottom for firebug but when I installed new add-on it took the place of firebug and whenever I wanted to click on the firebug by mistake that new add-on is been clicked everytime. So I searched for an add-on that can organize the status bar icons and I finally found this add-on.

Download and install this add-on.

Option available at menu Tools > Organize status bar.

orgainze status bar

As soon as you select any item the add-on will be highlighted in the status bar.

orgainze status bar-option

Its easy to use one can change the add-ons position using this add-on.

Do drop in your views and comments.

Link : Organize Status Bar

Go to Parent Post