Rss Feed Like Us on facebook Google Plus

January 11, 2012

New Features of HTML5 You must Know

1. New Doctype

Still using that pesky, impossible-to-memorize XHTML doctype? 

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If so, why? Switch to the new HTML5 doctype. You’ll live longer — as Douglas Quaid might say.
  1. <!DOCTYPE html>  
In fact, did you know that it truthfully isn’t even really necessary for HTML5? However, it’s used for current, and older browsers that require a specified doctype. Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to throw caution to the wind, and embrace the new HTML5 doctype.

2. The Figure Element

Consider the following mark-up for an image:
  1. <img src="path/to/image" alt="About image" />  
  2. <p>Image of Mars. </p>  
There unfortunately isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts.
  1. <figure>  
  2.     <img src="path/to/image" alt="About image" />  
  3.     <figcaption>  
  4.         <p>This is an image of something interesting. </p>  
  5.     </figcaption>  
  6. </figure>  

3. <small> Redefined

Not long ago, I utilized the <small> element to create subheadings that are closely related to the logo. It’s a useful presentational element; however, now, that would be an incorrect usage. The small element has been redefined, more appropriately, to refer to small print. Imagine a copyright statement in the footer of your site; according to the new HTML5 definition of this element; the <small> would be the correct wrapper for this information.
The small element now refers to “small print.”

4. No More Types for Scripts and Links

You possibly still add the type attribute to your link and script tags.
  
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />  
  1. <script type="text/javascript" src="path/to/script.js"></script>  
This is no longer necessary. It’s implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together.
  1. <link rel="stylesheet" href="path/to/stylesheet.css" />  
  2. <script src="path/to/script.js"></script>  

5. To Quote or Not to Quote.

…That is the question. Remember, HTML5 is not XHTML. You don’t have to wrap your attributes in quotation marks if you don’t want to you. You don’t have to close your elements. With that said, there’s nothing wrong with doing so, if it makes you feel more comfortable. I find that this is true for myself.
  1. <p class=myClass id=someId> Start the reactor.  
Make up your own mind on this one. If you prefer a more structured document, by all means, stick with the quotes.

6. Make your Content Editable

Content Editable
The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>untitled</title>  
  7. </head>  
  8. <body>  
  9.     <h2> To-Do List </h2>  
  10.      <ul contenteditable="true">  
  11.         <li> Break mechanical cab driver. </li>  
  12.         <li> Drive to abandoned factory  
  13.         <li> Watch video of self </li>  
  14.      </ul>  
  15. </body>  
  16. </html>  
Or, as we learned in the previous tip, we could write it as:
  1. <ul contenteditable=true>  

7. Email Inputs

If we apply a type of “email” to form inputs, we can instruct the browser to only allow strings that conform to a valid email address structure. That’s right; built-in form validation will soon be here! We can’t 100% rely on this just yet, for obvious reasons. In older browsers that do not understand this “email” type, they’ll simply fall back to a regular textbox.
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>untitled</title>  
  7. </head>  
  8. <body>  
  9.     <form action="" method="get">  
  10.         <label for="email">Email:</label>  
  11.         <input id="email" name="email" type="email" />  
  12.   
  13.         <button type="submit"> Submit Form </button>  
  14.     </form>  
  15. </body>  
  16. </html>  
Email Validation
At this time, we cannot depend on browser validation. A server/client side solution must still be implemented.
It should also be noted that all the current browsers are a bit wonky when it comes to what elements and attributes they do and don’t support. For example, Opera seems to support email validation, just as long as the name attribute is specified. However, it does not support the placeholder attribute, which we’ll learn about in the next tip. Bottom line, don’t depend on this form of validation just yet…but you can still use it!

8. Placeholders

Before, we had to utilize a bit of JavaScript to create placeholders for textboxes. Sure, you can initially set the value attribute how you see fit, but, as soon as the user deletes that text and clicks away, the input will be left blank again. The placeholder attribute remedies this.
  1. <input name="email" type="email" placeholder="doug@givethesepeopleair.com" />  
Again, support is shady at best across browsers, however, this will continue to improve with every new release. Besides, if the browser, like Firefox and Opera, don’t currently support the placeholder attribute, no harm done.
Validation

9. Local Storage

Thanks to local storage (not officially HTML5, but grouped in for convenience’s sake), we can make advanced browsers “remember” what we type, even after the browser is closed or is refreshed.
 
“localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage.”
-QuirksBlog
While obviously not supported across all browsers, we can expect this method to work, most notably, in Internet Explorer 8, Safari 4, and Firefox 3.5. Note that, to compensate for older browsers that won’t recognize local storage, you should first test to determine whether window.localStorage exists.
Support matrix
via http://www.findmebyip.com/litmus/

10. The Semantic Header and Footer

Gone are the days of:
  1. <div id="header">  
  2.     ...  
  3. </div>  
  4.   
  5. <div id="footer">  
  6.     ...  
  7. </div>  
Divs, by nature, have no semantic structure — even after an id is applied. Now, with HTML5, we have access to the <header> and <footer> elements. The mark-up above can now be replaced with:
  1. <header>  
  2.     ...  
  3. </header>  
  4.   
  5. <footer>  
  6.     ...  
  7. </footer>  
It’s fully appropriate to have multiple headers and footers in your projects.
Try not to confuse these elements with the “header” and “footer” of your website. They simply refer to their container. As such, it makes sense to place, for example, meta information at the bottom of a blog post within the footer element. The same holds true for the header.

11. More HTML5 Form Features

Learn about more helpful HTML5 form features in this quick video tip.

12. Internet Explorer and HTML5

Unfortunately, that dang Internet Explorer requires a bit of wrangling in order to understand the new HTML5 elements.
All elements, by default, have a display of inline.
In order to ensure that the new HTML5 elements render correctly as block level elements, it’s necessary at this time to style them as such.
  1. header, footer, article, section, nav, menu, hgroup {  
  2.    display: block;  
  3. }  
Unfortunately, Internet Explorer will still ignore these stylings, because it has no clue what, as an example, the header element even is. Luckily, there is an easy fix:
  1. document.createElement("article");  
  2. document.createElement("footer");  
  3. document.createElement("header");  
  4. document.createElement("hgroup");  
  5. document.createElement("nav");  
  6. document.createElement("menu");  
Strangely enough, this code seems to trigger Internet Explorer. To simply this process for each new application, Remy Sharp created a script, commonly referred to as the HTML5 shiv. This script also fixes some printing issues as well.
  1. <!--[if IE]>  
  2. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
  3. <![endif]-->  

13. hgroup

Imagine that, in my site’s header, I had the name of my site, immediately followed by a subheading. While we can use an <h1> and <h2> tag, respectively, to create the mark-up, there still wasn’t, as of HTML4, an easy way to semantically illustrate the relationship between the two. Additionally, the use of an h2 tag presents more problems, in terms of hierarchy, when it comes to displaying other headings on the page. By using the hgroup element, we can group these headings together, without affecting the flow of the document’s outline.
  1. <header>  
  2.     <hgroup>  
  3.         <h1> Recall Fan Page </h1>  
  4.         <h2> Only for people who want the memory of a lifetime. </h2>  
  5.     </hgroup>  
  6. </header>  

14. Required Attribute

Forms allow for a new required attribute, which specifies, naturally, whether a particular input is required. Dependent upon your coding preference, you can declare this attribute in one of two ways:
  1. <input type="text" name="someInput" required>  
Or, with a more structured approach.
  1. <input type="text" name="someInput" required="required">  
Either method will do. With this code, and within browsers that support this attribute, a form cannot be submitted if that “someInput” input is blank. Here’s a quick example; we’ll also add the placeholder attribute as well, as there’s no reason not to.
  1. <form method="post" action="">  
  2.     <label for="someInput"> Your Name: </label>  
  3.     <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>  
  4.     <button type="submit">Go</button>  
  5. </form>  
Required and Placeholder Attributes
If the input is left blank, and the form is submitted, the textbox will be highlighted.

15. Autofocus Attribute

Again, HTML5 removes the need for JavaScript solutions. If a particular input should be “selected,” or focused, by default, we can now utilize the autofocus attribute.
  1. <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>  
Interestingly enough, while I personally tend to prefer a more XHTML approach (using quotation marks, etc.), writing "autofocus=autofocus" feels odd. As such, we’ll stick with the single keyword approach.

16. Audio Support

No longer do we have to rely upon third party plugins in order to render audio. HTML5 now offers the <audio> element. Well, at least, ultimately, we won’t have to worry about these plugins. For the time being, only the most recent of browsers offer support for HTML5 audio. At this time, it’s still a good practice to offer some form of backward compatibility.
  1. <audio autoplay="autoplay" controls="controls">  
  2.     <source src="file.ogg" />  
  3.     <source src="file.mp3" />  
  4.     <a href="file.mp3">Download this file.</a>  
  5. </audio>  
Mozilla and Webkit don’t fully get along just yet, when it comes to the audio format. Firefox will want to see an .ogg file, while Webkit browsers will work just fine with the common .mp3 extension. This means that, at least for now, you should create two versions of the audio.
When Safari loads the page, it won’t recognize that .ogg format, and will skip it and move on to the mp3 version, accordingly. Please note that IE, per usual, doesn’t support this, and Opera 10 and lower can only work with .wav files.

17. Video Support

Much like the <audio> element, we also, of course, have HTML5 video as well in the new browsers! In fact, just recently, YouTube announced a new HTML5 video embed for their videos, for browsers which support it. Unfortunately, again, because the HTML5 spec doesn’t specify a specific codec for video, it’s left to the browsers to decide. While Safari, and Internet Explorer 9 can be expected to support video in the H.264 format (which Flash players can play), Firefox and Opera are sticking with the open source Theora and Vorbis formats. As such, when displaying HTML5 video, you must offer both formats.
  1. <video controls preload>  
  2.     <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />  
  3.     <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />  
  4.     <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>  
  5. </video>  
Chrome can correctly display video that is encoded in both the “ogg” and “mp4″ formats.
There are a few things worth noting here.
  1. We aren’t technically required to set the type attribute; however, if we don’t, the browser has to figure out the type itself. Save some bandwidth, and declare it yourself.
  2. Not all browsers understand HTML5 video. Below the source elements, we can either offer a download link, or embed a Flash version of the video instead. It’s up to you.
  3. The controls and preload attributes will be discussed in the next two tips.

18. Preload Videos

The preload attribute does exactly what you’d guess. Though, with that said, you should first decide whether or not you want the browser to preload the video. Is it necessary? Perhaps, if the visitor accesses a page, which is specifically made to display a video, you should definitely preload the video, and save the visitor a bit of waiting time. Videos can be preloaded by setting preload="preload", or by simply adding preload. I prefer the latter solution; it’s a bit less redundant.
  1. <video preload>  

19. Display Controls

If you’re working along with each of these tips and techniques, you might have noticed that, with the code above, the video above appears to be only an image, without any controls. To render these play controls, we must specify the controls attribute within the video element.
  1. <video preload controls>  
Options
Please note that each browser renders its player differently from one another.

20. Regular Expressions

How often have you found yourself writing some quickie regular expression to verify a particular textbox. Thanks to the new pattern attribute, we can insert a regular expression directly into our markup.
  1. <form action="" method="post">  
  2.     <label for="username">Create a Username: </label>  
  3.     <input type="text"  
  4.        name="username"  
  5.        id="username"  
  6.        placeholder="4 <> 10"  
  7.        pattern="[A-Za-z]{4,10}"  
  8.        autofocus  
  9.        required>  
  10.     <button type="submit">Go </button>  
  11. </form>  
If you’re moderately familiar with regular expressions, you’ll be aware that this pattern: [A-Za-z]{4,10} accepts only upper and lowercase letters. This string must also have a minimum of four characters, and a maximum of ten.
Notice that we’re beginning to combine all of these new awesome attributes!

21. Detect Support for Attributes

What good are these attributes if we have no way of determining whether the browser recognizes them? Well, good point; but there are several ways to figure this out. We’ll discuss two. The first option is to utilize the excellent Modernizr library. Alternatively, we can create and dissect these elements to determine what the browsers are capable of. For instance, in our previous example, if we want to determine if the browser can implement the pattern attribute, we could add a bit of JavaScript to our page:
  1. alert( 'pattern' in document.createElement('input') ) // boolean;  
In fact, this is a popular method of determining browser compatibility. The jQuery library utilizes this trick. Above, we’re creating a new input element, and determining whether the pattern attribute is recognized within. If it is, the browser supports this functionality. Otherwise, it of course does not.
  1. <script>  
  2. if (!'pattern' in document.createElement('input') ) {  
  3.     // do client/server side validation  
  4. }  
  5. </script>  
Keep in mind that this relies on JavaScript!

22. Mark Element

Think of the <mark> element as a highlighter. A string wrapped within this tag should be relevant to the current actions of the user. For example, if I searched for “Open your Mind” on some blog, I could then utilize some JavaScript to wrap each occurrence of this string within <mark> tags.
  1. <h3> Search Results </h3>  
  2. <p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>  

23. When to Use a <div>

Some of us initially questioned when we should use plain-ole divs. Now that we have access to headers, articles, sections, and footers, is there ever a time to use a…div? Absolutely.
Divs should be utilized when there’s no better element for the job.
For example, if you find that you need to wrap a block of code within a wrapper element specifically for the purpose of positioning the content, a <div> makes perfect sense. However, if you’re instead wrapping a new blog post, or, perhaps, a list of links in your footer, consider using the <article> and <nav> elements, respectively. They’re more semantic.

24. What to Immediately Begin Using

With all this talk about HTML5 not being complete until 2022, many people disregard it entirely – which is a big mistake. In fact, there are a handful of HTML5 features that we can use in all our projects right now! Simpler, cleaner code is always a good thing. In today’s video quick tip, I’ll show you a handful of options.

25. What is Not HTML5

People can be forgiven for assuming that awesome JavaScript-less transitions are grouped into the all-encompassing HTML5. Hey — even Apple has inadvertently promoted this idea. For non-developers, who cares; it’s an easy way to refer to modern web standards. However, for us, though it may just be semantics, it’s important to understand exactly what is not HTML5.
  1. SVG: Not HTML5. It’s at least five years old.
  2. CSS3: Not HTML5. It’s…CSS.
  3. Geolocation: Not HTML5.
  4. Client Storage: Not HTML5. It was at one point, but was removed from the spec, due to the fact that many worried that it, as a whole, was becoming too complicated. It now has its own specification.
  5. Web Sockets: Not HTML5. Again, was exported to its own specification.
Regardless of how much distinction you require, all of these technologies can be grouped into the modern web stack. In fact, many of these branched specifications are still managed by the same people.

26. The Data Attribute

We now officially have support for custom attributes within all HTML elements. While, before, we could still get away with things like:
  1. <h1 id=someId customAttribute=value> Thank you, Tony. </h1>  
…the validators would kick up a fuss! But now, as long as we preface our custom attribute with “data,” we can officially use this method. If you’ve ever found yourself attaching important data to something like a class attribute, probably for JavaScript usage, this will come as a big help!

HTML Snippet

  1. <div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>  

Retrieve Value of the Custom Attribute

  1. var theDiv = document.getElementById('myDiv');  
  2. var attr = theDiv.getAttribute('data-custom-attr');  
  3. alert(attr); // My Val  
It can also even be used in your CSS, like for this silly and lame CSS text changing example.
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.    <meta charset="utf-8">  
  6.    <title>Sort of Lame CSS Text Changing</title>  
  7. <style>  
  8.   
  9. h1 { position: relative; }  
  10. h1:hover { color: transparent; }  
  11.   
  12. h1:hover:after {  
  13.     content: attr(data-hover-response);  
  14.     color: black;  
  15.     position: absolute;  
  16.     left: 0;  
  17.   
  18. }  
  19. </style>  
  20. </head>  
  21. <body>  
  22.   
  23. <h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </h1>  
  24.   
  25. </body>  
  26. </html>  
You can view a demo of the effect above on JSBIN.

27. The Output Element

As you probably have guessed, the output element is used to display some sort of calculation. For example, if you’d like to display the coordinates of a mouse position, or the sum of a series of numbers, this data should be inserted into the output element.
As a simple example, let’s insert the sum of two numbers into an empty output with JavaScript, when a submit button is pressed.
  1. <form action="" method="get">  
  2.     <p>  
  3.         10 + 5 = <output name="sum"></output>  
  4.     </p>  
  5.     <button type="submit"> Calculate </button>  
  6. </form>  
  7.   
  8. <script>  
  9. (function() {  
  10.     var f = document.forms[0];  
  11.   
  12.     if ( typeof f['sum'] !== 'undefined' ) {  
  13.         f.addEventListener('submit', function(e) {  
  14.             f['sum'].value = 15;  
  15.             e.preventDefault();  
  16.         }, false);  
  17.     }  
  18.     else { alert('Your browser is not ready yet.'); }  
  19. })();  
  20. </script>  
Please note that support for the output element is still a bit wonky. At the time of this writing, I was only able to get Opera to play nice. This is reflected in the code above. If the browser does not recognize the element, the browser will simply alert a notice informing you of as much. Otherwise, it finds the output with a name of “sum,” and sets its value to 15, accordingly, after the form has been submitted.
Output element
This element can also receive a for attribute, which reflects the name of the element that the output relates to, similar to the way that a label works.

28. Create Sliders with the Range Input

HTML5 introduces the new range type of input.
  1. <input type="range">  
Most notably, it can receive min, max, step, and value attributes, among others. Though only Opera seems to support this type of input right now fully, it’ll be fantastic when we can actually use this!
For a quick demonstration, let’s build a gauge that will allow users to decide how awesome “Total Recall” is. We won’t build a real-world polling solution, but we’ll review how it could be done quite easily.

Step 1: Mark-up

First, we create our mark-up.
  1. <form method="post">  
  2.     <h1> Total Recall Awesomness Gauge </h1>  
  3.     <input type="range" name="range" min="0" max="10" step="1" value="">  
  4.     <output name="result">  </output>  
  5. </form>  
Unstyled range input
Notice that, in addition to setting min and max values, we can always specify what the step for each transition will be. If the step is set to 1, there will then be 10 values to choose. We also take advantage of the new output element that we learned about in the previous tip.

Step 2: CSS

Next, we’ll style it just a bit. We’ll also utilize :before and :after to inform the user what our specified min and max values are. Thanks so much to Remy and Bruce for teaching me this trick, via “Introducing HTML5.”
  1. body {  
  2.     font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;  
  3.     text-align: center;  
  4. }  
  5. input { font-size: 14px; font-weight: bold;  }  
  6.   
  7. input[type=range]:before { content: attr(min); padding-right: 5px; }  
  8. input[type=range]:after { content: attr(max); padding-left: 5px;}  
  9.   
  10. output {  
  11.     display: block;  
  12.     font-size: 5.5em;  
  13.     font-weight: bold;  
  14. }  
Above, we create content before and after the range input, and make their values equal to the min and max values, respectively.
Styled Range

Step 3: The JavaScript

Lastly, we:
  • Determine if the current browser knows what the range input is. If not, we alert the user that the demo won’t work.
  • Update the output element dynamically, as the user moves the slider.
  • Listen for when the user mouses off the slider, grab the value, and save it to local storage.
  • Then, the next time the user refreshes the page, the range and output will automatically be set to what they last selected.
  1. (function() {  
  2.     var f = document.forms[0],  
  3.         range = f['range'],  
  4.         result = f['result'],  
  5.         cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;   
  6.   
  7.     // Determine if browser is one of the cool kids that  
  8.     // recognizes the range input.  
  9.     var o = document.createElement('input');  
  10.     o.type = 'range';  
  11.     if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');  
  12.   
  13.     // Set initial values of the input and ouput elements to  
  14.     // either what's stored locally, or the number 5.  
  15.     range.value = cachedRangeValue;  
  16.     result.value = cachedRangeValue;  
  17.   
  18.     // When the user makes a selection, update local storage.  
  19.     range.addEventListener("mouseup", function() {  
  20.         alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");  
  21.         localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");  
  22.     }, false);  
  23.   
  24.     // Display chosen value when sliding.  
  25.     range.addEventListener("change", function() {  
  26.         result.value = range.value;  
  27.     }, false);  
  28.   
  29. })();  
Styled Range with JS
Ready for the real world? Probably not yet; but it’s still fun to play with and prep for!

Read More

January 7, 2012

Cool Shortcut Keys for Windows 7

previewpane 350x211 Coolest Windows 7 Tips and Tricks – Shortcut KeysALT + P
This opens a preview pane at the right side of explorer. Next time when you have to view some picture or movie or any other file, you don’t have to open it, just select the file and press ALT+P and see the preview.

Windows Key + Up
This combination maximized the current window. You can press it to Make window maximized. It works the same as double clicking the Title Bar

Windows Key + Down
This combination of keys, when pressed, restores the windows if it is maximized or minimizes it if not maximized. This combination should be used with Windows Key + Up to minimize, restore, and maximize any window.

Windows + Shift + Up and Windows + Shift + Down
This Key Combination makes the window Vertically maximum (Up) and back to its original place(Down). In doing so, the width of the windows remains the same. Only the height is changed.

magnifier Coolest Windows 7 Tips and Tricks – Shortcut KeysWindows Key + +(Plus) and Windows Key+-(Minus)
This combination of keys launches the built-in magnifier program and zooms in or out (depend on + or -) the screen. You can further play with this magnifier tools and use it for your own needs.

Windows Key + Left and Windows Key + Right
These are my favorite Shortcut Keys. The combination shift the opened windows to left or right of the screen. The windows then  takes exactly half of the screen. Keep pressing Windows Key + Left and your window will go to left of the screen, then right of the screen, and then back to its original place.

Windows Key + Home
There is a cool feature in Windows 7 that makes using windows easy and increase productivity by hiding all other windows and letting only one window shown. This feature is called Jitter. Using mouse you can select your windows and give it a nudge (moving mouse left and right while mouse key is pressed). This hides all other windows and keep your window opened. Repeat the same again and all other windows will appear.

Alternatively, you can use  Windows Key + Home to do the same. Press it to hide all other windows, press it again to show them.

ALT + Tab and Windows Key + Tab
windowskey tab 350x216 Coolest Windows 7 Tips and Tricks – Shortcut KeysSince long, windows is coming with these shortcut keys that come in very handy when switching between windows. The ALT+TAB key shows all the opened programs and you can switch between the windows. Press ALT (Keep Pressing) and press Tab until you find your desired program. Release the ALT key when your desired program is selected. The program windows will appear on the top.Since Windows Vista, Microsoft introduced another such feature that you can use by pressing (keep pressing) Windows Key and Pressing Tab. This feature is much cooler and lets your switch between open Programs.

Windows Key + T and Windows Key + [Number]
Window T 350x156 Coolest Windows 7 Tips and Tricks – Shortcut Keys
Windows + T is a wonder full shortcut key that lets you toggle between the programs listed in Taskbar. Press Windows Key (Keep Pressing) and Press T to move from one icon to another. The icons in Taskbar can be opened programs as well as Tabbed Programs. Windows Key + T toggle between all the icons on Taskbar and opens any program for you.

Similarly, Windows Key + [Number ] (1,2,3,…) can open the program listed at that number. If the program is tabbed, a new instance of it will be launched and if the program is running, its window will be minimized / maximized.

Windows Key + E
There is always a need to open Explorer window. But is one of its instance is running, and you click on it, the same windows appears on screen. To open a new instance of Explorer, you can either Press Shift + Click or Middle Key of your Mouse or you can simply use Windows Key + E.

Windows Key+ P and Windows Key+ shift + [Left, Right]
Window + P 350x75 Coolest Windows 7 Tips and Tricks – Shortcut KeysIf you have multiple monitors attached to you system you can easily switch between them using these Keys. Windows Key + P open the Panel from where you can select different settings for your multiple Displays. Also, you can use Window Key + Shift + Left to change between multiple screens.

Windows Key+ Space
windows7 preview desktop 350x218 Coolest Windows 7 Tips and Tricks – Shortcut KeysAnother cool feature of Windows 7 is its Peek feature. The right most button on your Task-bar is the Show Desktop / Peek button. Just hover your mouse over it and it will show your desktop by hiding all the open windows. The peek feature can also be accessed using Windows Key + Space. Press Windows Key(keep pressing) and press space to Peek at the desktop.

Windows Key + G
Gadgets are a nice addition to windows plate form since the days of Vista. There are dozen of Gadgets out there for Weather, Calender, RSS Feeds, and much more. Unfortunately, the Show Desktop button shows the Desktop with out Gadgets. Thus there is not easy way to access gadgets in time of need. But there is a trick to peek at your gadgets even if you have a dozen windows opened. Press Windows Key + G and all your gadgets will show on the top of every thing.

Windows Key + X
Mobility Center is not new to Windows. It was there in Vista too. But it is a cool feature and many of us would like to access it. Press Windows Key + X and the mobility center will appear.

Ctrl + Alt + [Left, Right, Up, Down]
Last but not the least. This is a cool feature that changes the orientation of your screen. Just give it a try and see for your self.


follow me on twitter
Subscribe me on Facebook 
 
Read More

January 5, 2012

checkout some hidden features of your Window 7 PC

Microsoft Windows 7 has some really cool Hidden Perks for its users. Today we are going to explore some of these.

psr.exe – Hidden Tutorial Maker in Windows 7...............................

During testing of Windows 7, the engineers working on the Operating System wrote a program to document movements made by mouse in order to debug the Operating System. The program is still in Windows 7 but it is hidden from public. You can access it using command psr.exe.  

Just click on Start, type psr.exe and hit enter. The following Toolbar will appear.
  Press record and go on with whatever work you want to record doing. The program will  save it in a .mhtml file that you can later use for presenting, teaching, etc. This tool also allows you to add comments. With this tool, it is very easy to make presentation and show it to people who want step by step procedure to do any work.

problem step recorder Coolest Windows 7 Tips and Tricks – Hidden Perks
By the way, there is another tool in windows called Snipping Tool that you can use to take snap shot of any thing on the screen(the above picture is taken using this tool). 

You can find it in Start >> Accessories >> Snipping Tool.

Hidden Themes in Windows 7...............................

There are a few beautiful themes and Wallpapers hidden in windows 7 that you can use. The idea by Microsoft was to Install only that theme which matches your location i.e. if you live in USA United States theme is installed automatically. The other themes that are there and not installed by default are Australia, South Africa, Canada, and United Kingdom. The themes contain  1920 x 1200 resolution wallpapers from the respective countries. Just open explorer and type

C:\Windows\Globalization\MCT 

in the address bar , hit enter. It will open the folders containing Wallpapers and themes.
Hope you like our set of hidden Perks. Do let us know in the comments. Stay tuned for more...


follow me on twitter
Subscribe me on Facebook 
 
Read More

IRCTC launches website for booking rail tickets on mobile phone

Booking train ticket was never so easy as you can now get it done through your mobile phone.IRCTC launches a smarter way to book tickets. Now book your rail ticket -ANYWHERE ANYTIME through your Mobile Phones.


"After initial registration and downloading of suitable software on the mobile handset with internet facility, it will be possible for the mobile users to book a ticket through their own mobile."

IRCTC brings to you the mobile website https://www.irctc.co.in/mobile with just a few clicks you can book your tickets using your Mobile Phones. IRCTC mobile website is convenient and easy to use, can be accessed from any browser enabled mobile having basic GPRS activated on phone.

The following features are available:

Book Ticket/ Enquiry - Book tickets by providing source and destination.
Booked History - Tickets whose Date of Journey is due will be visible.
Cancel Ticket - Cancel any of the tickets whose date of journey is due.

Browse the URL using your mobile and book tickets using any of your credit/debit card for payment.

Help for booking
1. Login to URL with your existing IRCTC user id and password.
2. Fill in details for plan my travel.
3. Select the train and continue the booking.
4. Use existing passenger list on add passengers.
5. Confirm booking details and pay through Credit/debit card to get successful booking.


Launched by Indian Railway Catering and Tourism Corporation ( IRCTC), a PSU under Railway Ministry, has been offering the service of booking e-ticket over the mobile phone, said a senior Railway Ministry official.

After booking, the passenger will receive a reservation message with full details of the ticket including PNR, train no, date of journey and class.

"This virtual message would be treated at par with the print-out of the e-ticket which at present is taken out by the passengers and is known as Electronic Reservation Slip ( ERS)," he said.

Hence, with the virtual message, passengers would not be required to take a print-out of e-ticket to be carried with them. Showing the reservation message of the confirmed ticket on their mobile during travel will be sufficient. Internet is required on mobile phones to book tickets through mobile.

The passenger has to register at the time of first transaction and thereafter book the ticket using his ID and password.The service was introduced on a pilot basis for a few and now the more than a thousand users are availing this facility everyday, he said.

The service charge is similar to e-tickets-- Rs 10 for Sleeper class and Rs 20 for other higher class.


follow me on twitter
Subscribe me on Facebook 
 
Read More

January 4, 2012

Window 7 Sticky Notes - Features & Effective Uses

Windows 7 is one of the best products that came out from Microsoft. Along with it, came a very handy application called “Sticky Notes”.

Sticky Notes Coolest Windows 7 Tips and Tricks: Use Sticky Notes Effectively
Sticky Notes is a very handy and useful application for almost all kind of users. It allow you to take notes quickly and easily without getting into the trouble of creating a file and then saving it. Sticky Notes require just one click to start and it is auto-safe enabled which means every thing you write of paste in it is saved instantly even if you close the application, your notes are safe. 

Moreover, it serves the purpose of a reminder application where the things you wrote are in front of you always and remind you of any actions you have planned.  You can color them to distinguish between any two set of tasks and so on.

But nothing is perfect. Sticky Notes application is very easy to use but it does not allow you to change the font-style. It uses Segoe Print as default font. Though Segoe Print is a pretty neat font at first, eventually one gets tired of it and would like to change it. Moreover, there are lack of visual controls on sticky note to format text (probably dropped in favor of keeping it simple).

How to Change Font Style

There are two things you can do to change the font-style of your Stick Note from Segoe Print to any other Font you like.
  1. You can copy the text into a notepad window and change the font there to whatever you like and then copy the text back into the note and the font will stick.
  2. Registry Tweak:
    1. Press Start and Type “REGEDIT” then press Enter
    2. Navigate to: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts
    3. Export that key so you have a backup (Optional)
    4. Find Segoe Print (TrueType)
    5. Change the value to the file name of any other font that you wish to use that is already installed (navigate that registry key to find others).
    6. Restart the computer.
This will change the font-settings of Segoe Print to another font and where ever Segoe Print is being use, your newly selected font shall be used.

How to Format Text

StickyNotes Color Coolest Windows 7 Tips and Tricks: Use Sticky Notes Effectively
This is more fun than changing the Font Style. By using a number of Shortcut Keys, you can very easily and neatly change your Sticky Notes appearance, thus making them more user friendly. Below is a List of Shortcut Keys that you can use to format your Sticky Notes:
Shortcut KeyFunction
Ctrl+BBold text
Ctrl+IItalic text
Ctrl+TStrikethrough
Ctrl+UUnderlined text
Ctrl+Shift+LBulleted (press once) or Numbered (press twice) list (Press more for more options)
Ctrl+Shift+>Increased text size
Ctrl+Shift+<Decreased text size
Ctrl+ASelect all
Ctrl+Shift+AToggles all caps
Ctrl+LLeft aligns text
Ctrl+RRight aligns text
Ctrl+ECenters text
Ctrl+Scroll WheelIncrease/Decrease text size
Ctrl+1Single-space lines
Ctrl+2Double-space lines
Ctrl+5Set 1.5-line spacing
Ctrl+=Subscript
Ctrl+Shift++Superscript
Ctrl+ZUndo
Ctrl+YRedo
Ctrl+XCut
Ctrl+CCopy
Ctrl+VPaste
Ctrl+NNew sticky note


Hope you liked this article. Please do share with us your experience with Sticky Notes.


follow me on twitter
Subscribe me on Facebook 
 
Read More
Subscribe to: Posts (Atom)

© 2011-2016 Techimpulsion All Rights Reserved.


The content is copyrighted to Tech Impulsion and may not be reproduced on other websites.