Winnipeg Web Design
a winnipeg website design company.
a winnipeg website design company.
Wednesday, July 7th, 2010
Reading time: 3 – 4 minutes
You’ve undoubtedly heard of HTML5 multiple times in the past. It was started in June 2004 and is currently in the ‘Working Draft’ state. Ian Hickson (a Google Inc. employee) is the editor of HTML5, and he estimates that HTML5 will become a Candidate Recommendation in 2012, and a W3C Recommendation in 2022. Seems like I’ll be old and gray by the time it’s the norm!
The great thing is that despite the fact that HTML5 will not be a W3C Recommendation until 2022, you can use many of the elements of it today! The website caniuse.com reports that this percentage of features in HTML5 are currently supported:
I’ll be using Safari 5.0 as it currently has the highest percentage and seems to run the best in my current setup. Let’s dive right in, shall we?
Geolocation is already being used all over the web today. Many websites will ask for your current location to display information like weather or local news. Some or all of your information including your IP address, RFID, MAC addresses, GSM/CDMA information will be used to determine your information. It can only be used if the user gives permission.
Try it here.
One of the main reasons why Apple is not supporting Flash on any iOS devices is because they believe so strongly in the HTML5 Video element. It couldn’t get any simpler than this markup:
<video src='movie.mp4' autoplay controls></video>
Provided the feature is fully supported, video plays smoothly, fullscreen works great, and it doesn’t eat up your CPU cycles like some HD flash players can.
Try it here.
Creating simple graphics for the web in Photoshop then saving and inserting them in the correct place in your web page can be a complete time waster, especially if you get it wrong and have to go through the whole process again. That’s where the Canvas element comes in.
Take the simple ‘loading’ image. Instead of searching high and low for the perfect looking image, you can create exactly what you want with a canvas element. Here’s an example: link.
@font-face is really more of a CSS feature, but it ties in directly with HTML5. Inserting custom fonts into web pages is always a pain. My tool of choice is Cufón, for its sole use of JavaScript. There are others that get more complicated like sIFR using Flash all to get a font on a web page. No more! Custom Web Fonts are now as easy as uploading the .ttf or .otf file to your server, linking it into your CSS file and creating a font-family, and displaying your text! Typography lovers unite!
@font-face {
font-family: 'LeagueGothic';
src: url(LeagueGothic.otf);
}
header {
font-family: 'LeagueGothic';
}
Try it here.
All of the demo links included in this post are courtesy of Google, Inc. Check out the rest of html5rocks.com for some great resources!
These four features are just a taste of what HTML5 really can do. I look forward to what the world’s web developers will be making in the years to come!
Posted in Web Programming | 4 Comments »
Monday, May 10th, 2010
Reading time: 2 – 4 minutes
I am going to show how to build a simple way to add a “star” rating at the bottom of a post using WordPress’ Custom Fields. The custom fields are a great way of adding extra bits of information such as paragraphs, images or content which you want to be displayed differently.
When adding a new post we want to scroll down to the area called “Custom Fields” and then add a new one. Its good to give this field a useful name as once you have added the custom field you can select it from the drop down box. Next in the value field add what your rating will be. So a value of “3/5″ is what I used.
WordPress has a useful documentation showing how to get started with the custom fields. For this custom field we want to add the following code inside the post loop.
<?php if( get_post_meta(get_the_ID(), 'rating') ){
$rating = get_post_meta(get_the_ID(), 'rating');
$rating = explode("/", $rating[0]);
$good = round($rating[0]);
$total = round($rating[1]);
echo "<h2>This was rated:</h2><p class='rating'>";
if(!empty($good) && !empty($total) && ($good <= $total) && is_numeric($good) && is_numeric($total) ){
$i=0;
while($i < $good){
echo "<img src='http://localhost/wordpress/wp-content/themes/default/images/stars/star_on.png' border='0' />";
$i++;
}
$i = 0;
while($i < ($total - $good)){
echo "<img src='http://localhost/wordpress/wp-content/themes/default/images/stars/star_off.png' border='0' />";
$i++;
}
}else{
echo "Invalid input for the rating.";
}
echo "</p>";
};
?>
To get the meta data we need to use get_post_meta(); which uses 2 (optional 3rd) values. The first is the post ID, next the key/name of the field and the last optional value is either “true” or “false” to say if you want the information returned as a string.
That script will use the post ID to check if there is any information “rating” that has been set. Next, if it has we assign it to a variable and explode it at the “/”, this means we have the two numbers for the light star and the dark star. After splitting up the rating we run a few checks to make sure that it is valid before we loop through them.
Next we run the two loops that will produce the stars by using the split data and a while loop. And then its done!
As you can see, its very easy to add extra bits of data to your post. This is just one example of how to use the custom fields.
Posted in Web Programming | 1 Comment »
Monday, April 19th, 2010
Reading time: 1 – 2 minutes
The amount of users on Twitter has increased dramatically recently! It is now a great way to get your product noticed, talked about (and if your very popular) trending. People like MacHeist often do a Tweetblast to spread the word about something new and by participating you get something in return. In the tutorial you will see how to build an AJAX-ed twitter tweetblast that will search twitter for a hash tag, and if it has been found it will then show a thanks slide. There are many things you can adapt this script to do, such as putting the users username in the database to make sure a user can only Tweet once, finding that users pictures and show all the users that have tweeted so far or just sending an email to say thanks.
For this we just need an index page, some nice CSS, JavaScript for the AJAX, and PHP to search through Twitter using Twitters’ search API.
Posted in Web Programming | 1 Comment »
Monday, April 5th, 2010
Reading time: < 1 minute
In this tutorial I will be showing you how to build a PHP mailing list web app. In this web app, users will be able to sign up. Once they do they will be added to the database and an unsubscribe hash will be generated. Admins will be able to send emails and add [unsubscribe] within the email in order to show a way for the subscribers to remove themselves. Javascript will also be added to the sign up process to make it nicer for the users.
Live Demo
Username: alex
Password: password
Download
(more…)
Posted in Web Programming | No Comments »
Monday, March 22nd, 2010
Reading time: < 1 minute
Today I will be showing you how to use cURL to get your Twitter status and cache it into a file on your server. This file will then be read with JavaScript and displayed on the web-page. Before we start you can view a demo and download the final files below:
The widget will have the following file structure
Posted in Web Programming | 8 Comments »
Twitter
Follow me on Twitter to keep up to date!
RSS Feed
Keep up with all of our updates by subscribing to our RSS feed!
FaceBook
Join our group on Facebook and become a fan of us!