How to take a screenshot on Windows PC computers

Take screenshot everyone on your monitor (or monitors for dual screens):

1. Press the ‘Prt Scr‘ button on your keyboard. This will save the screen shot to your clipboard.
2. Open Word, Paint, Photoshop and use Ctrl + V to paste the image to your program.
3. Save the file.

TIP: Got multiple monitors? Use Alt + Prt Scr to only capture the currently active screen.

How to take a screenshot of a certain area of the screen

Windows computers come with a utility called Snipping Tool which allows you to take screen shots of your entire screen or just a selection. You can then draw and annotate. You can easily save the snippet or send as email attachment.

Open Snipping Tool by clicking the Start button, clicking All Programs, clicking Accessories, and then clicking Snipping Tool. More info on using snipping tool…

How to take a screenshot on a Mac

Mac computers have a range of keyboard shortcuts for taking screenshots. These first set of shortcuts take an image and save it to the desktop as an image:

• Command-Shift-3: Take a screenshot of the screen
• Command-Shift-4, then click are drag to select an area: Take a screenshot of a selected area
• Command-Shift-4, then space, then click a window: Take a screenshot of a window

If you want to save the screenshot to the clip board instead of as a file hold down Control key as well, eg:

• Command-Control-Shift-3: Screenshot of the screen
• Command-Control-Shift-4, then select an area: Screenshot of an area
• Command-Control-Shift-4, then space, then click a window: Screenshot of a window

If you are using Leopard (OS 10.5) you can also hold down these keys whilst using the select an area options to do the following:

• Space: lock the size of the selected region
• Shift: resize one edge of selection
• Option: resize from center

How take a screenshot on an iPad or iPhone

1. Press the power button the iPad/iPhone home at the same time. You will see a little white flash on the screen and hear a shutter noise to indicate the screen shot has been taken.
2. Go to the Photos App.
3. Find your photo and you can then choose to email the photo if you wish to share it.

How to take a screenshot on an Android Phone

Unfortunately its not as simple as a press combination. Android devices require your to change some of the default settings to allow you to take screen shots or have your Android phone/tablet connected to your computer. For more details on how to do this check out this article on How to Takes Screen Shots on an Android from PC World.

Visit www.meggerwatt.com.au

The Form

Here is a our basic form. I’ve used labels in the form not just for accessibility but also to allow styling with CSS. Here is our form markup. Check out Specifying keyboard type for web forms on mobile devices post for info on the using HTML5 mobile attributes.

<form id="form1" name="form1" method="post" action="">
<label for="email">Name:</label><input name="name" id="name" type="text" /><br />
<label for="email">Email:</label><input name="email" id="email" type="email" /><br />
<label for="email">Phone:</label><input name="phone" id="phone" type="tel" /><br />
<input name="submit" type="button" value="Submit" />
</form>

Without any CSS this is how it looks:

Basic Styling

Lets add some basic CSS to align our labels to the left of our input fields and use some CSS3 to round the corners.

label {
    width:60px;
    float:left;
    font-size:12px;
    line-height:24px;
    font-weight:bold;

}
input {
    width:300px;
    margin-bottom:5px;
    line-height:18px;
    padding:2px 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #CCC;
}

Styling by field types

It’s looking better but as you will see the submit button is using the same styles as the other input fields. By specifying the input type via input[type=text] in your CSS to can specify the style for each input type. Also, as we used HTML5 form attributes we can also have different styles for each type of field.

/*General rules*/
#form3 input {
    line-height:18px;
}
/*Text, email & tel input fields*/
#form3 input[type=text],
#form3 input[type=email],
#form3 input[type=tel] {
    width:300px;
    margin-bottom:8px;
    padding:2px 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #CCC;
}
/*Just the tel field*/
#form3 input[type=tel] {
    width:150px;
}
/*The Submit Button */
#form3 input[type=button] {
    margin-top:5px;
    margin-left:60px;
    padding:2px 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:2px solid #06C;
    background-color:#09F;
    color:#fff;
    font-weight:bold;
}

 Styling on Focus

Lets add some user feedback. When they select a field (it comes into focus) we want it to change appearance. To do this we use the input:focus selector and will add an outline and a drop shadow. We only want to use this happen for a text fields so we’ll use the code from above to restrict the input types this effects.

#form3 input[type=text]:focus,
#form3 input[type=email]:focus,
#form3 input[type=tel]:focus{
    border:1px solid #09F;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

 Image as submit button

Lastly lets change the submit button to an image. We can do this via HTML or CSS. If your form uses GET as its method than you want to use the CSS option or it will append submit button x and y values to the query string.

Input Button as image using HTML

Replace the submit button HTML with the following code:

<input type="image" name="submit" src="submit_button.jpg" width="97" height="26">

Input Button as image using CSS

Add the following to your CSS document. You will also need to make the value of your submit button blank so no text appears

HTML:
<input name="submit" type="button" value="" />
CSS:
#form4 input[type=button] {
    margin-top:5px;
    margin-left:60px;
    border:none;
    width:97px;
    height:27px;
    background-color:#FFF;
    background-image:url(submit_button.jpg);
    background-repeat:no-repeat;
}

The finished result!

This is just the basics. Get creative and use some gradients and other effects to jazz it up even more. Try www.css3generator.com if your not familiar with CSS3.

The Kerrie Stanley Fashion Blog has been especially designed to work on a range of devices meaning you can read the blog whilst on the go on your phone, whilst on your iPad or at your computer.

Visit Kerrie Stanley Fashion Blog

Standard WordPress Page Titles

Let’s just start with how WordPress adds a page title by default when inside the loop. (If you’re not familiar with the loop read more on WordPress Codex.)

<h1><?php the_title(); ?></h1>

Putting the Post title outside the loop

If you need to put your title outside the loop you will first need to call  global $wp_query and then query your post using $thePostID = $wp_query->post->ID. Now that you have queried and found your posts ID you can use the get_the_title($thePostID) WordPress function to return your page title. All together it looks like this:

<?php global $wp_query; ?>
<?php $thePostID = $wp_query->post->ID; ?>
<h1><?php echo get_the_title($thePostID); ?></h1>

Including a sub title

To include a sub title you can use a custom field. To get the value of the custom field you use get_post_meta($post_id, $key, $single). I’ve added this to the previous example, just checking that the custom field has been set before outputting it to the page. On the pages I wished to include a sub heading I added a custom field called ‘page_subtitle’.

<?php global $wp_query; ?>
<?php $thePostID = $wp_query->post->ID; ?>
<?php $subTitle = get_post_meta($thePostID, 'page_subtitle', true); ?>

<h1><?php echo get_the_title($thePostID); ?></h1>
<?php if($subTitle) { ?>
  <h2><?php echo $subTitle; ?> </h2>
<?php } ?>

Including the parent title for child pages

Finally lets show how to display the name of the parent page. All you need to do is call get_the_title($post->post_parent). If a parent page doesn’t exists the output will just be blank. So you may want to check it’s returned a value before adding to your template.

<?php global $wp_query; ?>
<?php $thePostID = $wp_query->post->ID; ?>
<?php $subTitle = get_post_meta($thePostID, 'page_subtitle', true); ?>
<?php $parentTitle = get_the_title($post->post_parent);

<h1>
<?php if($parentTitle) {
   echo $parent_title." : ";
} ?>
<?php echo get_the_title($thePostID); ?>
</h1>
<?php if($subTitle) { ?>
  <h2><?php echo $subTitle; ?></h2>
<?php } ?>

The final output will look something like:

Parent Page : The Page
Subtitle

The Mathieu Salem Fashion & Wedding Couture Blog has been especially designed to work on a range of devices meaning you can read the blog whilst on the go on your phone, whilst on your iPad or at your computer.

Visit Mathieu Salem Fashion & Wedding Couture Blog

HTML5 has introduced a new properties for the type attribute for input elements. The new values are for contact details and include:

• an email address (type=’email’)
• a website address (type=’url’)
• telephone number (type=’tel’)

You won’t see any difference when viewing on your desktop HTML5 compatible browsers however if you view the forms with Mobile Safari it will automatically use the appropriate keyboard for the job.

The Code

By default text fields are given the type=”text” attribute. Simple change the type value from text to the relevant type of contact detail such as email for an email address field.

<label for="email">Name:</label><input name="name" id="name" type="text" />
<label for="email">Email:</label><input name="email" id="email" type="email" />
<label for="email">Phone:</label><input name="phone" id="phone" type="tel" />
<label for="email">Website:</label><input name="web" id="web" type="url" />

The iOS keyboards

The image below shows the different types of keyboards you will see for each of the HTML5 type attributed fields.

A very simple enhancement that is sure to pleasantly enhance your users web experience!

WordPress (3+) vs Drupal (7+) Glossary

Street Address

There a few different options available here and after testing on various devices I have found that using a Google Maps link to be the best option as both iPhone and Android will intercept this link and prompt the user to choose to view on Google Maps or the internet (or other Map App). The other options I trialled included Embedding a Google Map and using the Geo prefix in link. The issue with embedding the Google Map is your not giving the user the freedom to use the map App of their choice and it also takes up screen real estate which you may not want to use. The issue with the Geo prefix is that is currently not very supported. It worked on Android but not iPhone, making it fairly useless for mobile.

Linking to the address to Google Maps
Simple go to maps.google.com, find the address, press the link icon in the top right and copy the Google maps link. Add this link to your address or a view on map link like so:

<a href="http://maps.google.com.au/maps?q=melbourne+gpo&ll=-37.813547,144.963613&spn=0.0099,0.026157&oe=utf-8&client=firefox-a&fb=1&gl=au&hq=gpo&hnear=0x6ad642af0f11fd81:0x5045675218ce7e0,Melbourne+VIC&cid=0,0,16491477996227855296&t=m&z=16&vpsrc=0&iwloc=A">Melbourne GPO</a>

Embedding a Google Map
To embed a Google Map you need to go to maps.google.com, find the address and then press the link icon in the top right. This time select the iframe code and paste this into your website.

Use the geo prefix in your link
Simple add the ‘geo:’ prefix follow by the longitude and latitude like so:

<a href="geo:-37,45">location</a>

Phone Number

To make a phone number or text call simply include the ‘tel:’ prefix in your link, making sure you remove any spaces, + signs or special characters.

<a href="tel:0395075301">Call us</a>

Note: Using this style link will not work on non-mobile browsers.

Email Tag

We’ve all been doing this on for a long time and is common practice but here it is again to remind us all.

<a href="mailto:info@yourdomain.com.au">Email us</a>

Why not help the user out a little and add the subject line in for them too, like so:

<a href="mailto:info@yourdomain.com.au?subject=Enquiry">Email us</a>