HTML5: Geolocation has never been this easy
You'd have to have been under a rock (a massive one) if you missed everything going on at BUILD with Windows 8 last week. Everyone was talking about it, a bunch of my friends all came back with their fancy new tablets hailing the arrival of Metro and all that it shall bring us. And yeah it's cool, and yeah it's going to do a lot (and offer a lot in the way of new paradigms for software developers) but last week as I was doing some reading I found something that I could work on today that is currently available in HTML5 and supported by a number of the current browsers - Geolocation.
What is the Geolocation? Geolocation is the way in which systems attempt to determine your location based on IP address, wireless connections, cell phone towers or your own built in GPS chip. Sometimes its right and sometimes its wrong but it is always a freaky thing to see your phone tell you where you are or (as is the case with HTML5), go to a webpage and see it give you a pretty good approximation of where you are without having entered any of your information.
So how does the Geolocation API work? Well first off, its not an immediate give and go, you get the option to opt out of this functionality when you got a page that makes use of this API. That is the warning that every user gets presented to them so they can decide if they want to share their information with that site and have it attempt to triangulate their position.
In Internet Explorer, this warning looks like this;
Once I clicked "Allow once", I was able to render a map that attempted to show my (i.e., your) current position when you accessed that page. Pretty impressive for a mere 22 lines of code. I didn't write out any code samples with this blog, mainly because the demos and explanations on DiveIntoHTML5 and HTMLGoodies were so good that I would not have done them justice.
More than anything new in HTML5, this little API made me think of all that could be done with it and brought be back to the Windows 8 debut last week at BUILD - new Metro tabs that could push store deals to you based on where you are, the weather channel that takes your location and shows you the weather for where you are, and more and more. This little API offers up a world of possibilities (okay no pun intended but you get the idea, it's pretty cool).
HTML5: Where For Art Thou Forms?
The biggest thing to ever come to HTML were forms, these were the first, base form of interaction between people and servers. Want something? Give me your information. Without forms as the mechanism for data entry on the internet, there really would not be much of an internet (except for the browsing of photos, content and video, but no way to interact with the writer, post comments to the photographer or thumbs up that video).
So tonight I took a look at the changes to forms in HTML5. Now I have to admit, when I first started going through the forms and running through the demos on w3schools of what forms worked and didn't I was really surprised to see that a lot of the examples were broken. As I continued my journey into DiveIntoHTML5, I started to gain a little more background on where the real potential for these new elements existed - mobile - phones and tablets.
Form Input Types
Take for instance our new groovy "email" form type that works like this;
<form action="demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" />
</form>
It looks pretty sweet and solely exists to validate your input type. Now try browsing to this page with your Ipad? Did you notice it? Your keyboard input changed to only show the relevant input that could be applied to an email address. That is pretty cool and it doesn't only apply to email, but the new URL type as well. One deficiency I did notice with this control was that it only validates improper email addresses, but not blank fields itself, for that you need to add an additional required attribute onto the email form type (see below).
In keeping with the push to make the internet experience more like the desktop experience there are a number of new controls which are very familiar to windows developers now - numeric up/down, sliders, date and colour pickers.
Form Attributes
Apart from all your new fancy, dancy form types you also have the new attributes that you can use on any apply to your controls to up their game that include; autocomplete (auto-fill the previous data on a form), autofocus (bring autofocus to any element on load), pattern (some basic regex validation on fields) and my personal favourite multiple. The multiple attribute tells your HTML5 file input types if they can upload multiple files all from one file input control. I can think of a half-dozen webapps I've written that I'd like to rewrite to use this control solely for the simplicity and grace they offer the end user. The most used attribute will most likely become the "required" attribute that very nicely states that you need to fill in the following field before moving on, no more javascript examining every field in your form.
Check out this sample form I did which walks through using a couple of the new form types and attributes all being driven off of the following code;
<!DOCTYPE HTML>
<html>
<body>
<form action="" method="get">
Name: <input type="text" name="usr_name" required="required" autofocus="autofocus" required="required"/><br />
Numeric Up/Down: <input type="number" name="points" min="0" max="10" step="3"/><br />
E-mail: <input type="email" name="user_email" required="required"/><br />
Upload your files: <input type="file" name="img" multiple="multiple" /><br />
<input type="submit" />
</form>
</body>
</html>
We're still playing that game of what browser does what and where they all exist in the long line of who supports what but the really great thing is that all these controls are backwards compatible and render gracefully on unsupported browsers (email, URL and slider form types will render as text boxes if not supported) so this is great news (and a great play) so that when support is there you get it, but you don't have to wait for it to happen because you have a fallback.
HTML5: Storage Containers and Browser Fails
What I was so keen to get into turned out to be a feature with mixed blessings. I've read a lot about the new storage containers for HTML5 and how they way exceed cookies (not just in storage capacity but in flexibility and ease of use) but as I started to dig deeper I got hit by the age old HTML/Javascript problem: Cross Browser support.
So far things had been pretty smooth between the browsers, but the cool feature I really wanted to try out was the different storage events that could fire when changes are made. Take for example if I have a very simple web dashboard (maybe using my slick Canvas control graphs) and buddy is working with 1 dashboard in particular - updating it, moving colours around, etc, etc. Well, wouldn't it be cool that when he commits these changes for his session I save them to the localstorage and trigger an event to update the additional tabs? Yeah that would be cool, but now I am back to writing different listener and handlers for each browser.
To give you some background, here is some really basic code you can do with the new session (for the immediate browsing session) and local (for ever until someone destroys it) storage objects. It does not get more complicated then that. If you click the following link in two separate windows and refresh a bunch of times, you'll see the localStorage staying consistent while the sessionStorage also remains consistent, albeit just for that particular session.
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) + 1;
}
else
{
localStorage.pagecount=1;
}
if (sessionStorage.pagecount) {
sessionStorage.pagecount=Number(sessionStorage.pagecount) + 1;
}
else {
sessionStorage.pagecount=1;
}
As I continued on trying to get something going with storage events I found myself going down an all too familiar path of trying to get one browser to work, knowing it might not work in another at all and having to write a bunch of IF statements to guide where I am. I found a pretty good article on StackOverflow discussing the issue in much greater detail (recent as of Jan 2011).
Maybe we are just predispositioned to handle this in our every day life, these problems existed 10 years ago when I was starting javascript and it seems we're still having the same issues.
For eg;
if (in McDonalds)
{
!askFor(Whopper);
}
else
{
!askFor(BigMac);
}
On the support-side, Chrome seems to bte big winner so far (and the browser I have been using for all my development). Check out this wicked infographic on HTML5 - Why should we care - it lays it all out for you.
Now one massive element of the new local and session storage containers which shows massive potential is the ability to store a complete database into your local storage container (seeing as how you now have a limit of 10MB to accomplish this task). DiveIntoHTML5 has a great little piece on this, with sadly, 0 support in IE or Firefox! ARRRGGHHH - I feel like a kid who's got the biggest gift under the tree, but can't open it until Easter!
HTML5: Give me a Canvas and I'll give you Freedom
Alright, so I'm back at it tonight playing with the Canvas control in HTML5. I shook things up tonight by looking at some new blogs and came across some brilliant gems;
I'm not gonna spend too much time on the basics but in a nutshell here's what you need to; render the canvas control (it doesn't come up with a border, hence the CSS style), get a handle on the context of the control and from there you have a couple of options for creating some basic rectangles and circles et al. See the code below for how I created my gradient square and the overlaying, opaque canvas with multiple objects. It was pretty simple and took me about 10 minutes to get it going and come up with the following little sample.
<canvas id="FirstShape" width="200px" height="200px" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var c = document.getElementById("FirstShape");
var cxt = c.getContext("2d");
cxt.fillStyle = "rgba(200,30,190,0.5)";
cxt.fillRect (10,50,150,100);
cxt.fillStyle = "#6699aa";
cxt.fillRect (30,60,150,100);
cxt.fillStyle = "rgb(200,30,50)";
cxt.fillRect (50,70,100,100);
</script>
<canvas id="GradientShape" width="200px" height="200px" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var c = document.getElementById("GradientShape");
var cxt = c.getContext("2d");
var grd = cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#aacccc");
grd.addColorStop(1,"#447799");
cxt.fillStyle = grd;
cxt.fillRect (10,50,150,100);
</script>
And here was the end result of this little experiment.
I can't count the number of times I have created gradient images on a website to make the size look polished and not flat. The next time I need to do this, I'm going to bring try out this gradient control, with the right colour palette it looks quite polished and the savings on load time alone would be impressive.
But at the end of the day, you could do boxes and with HTML v1, it's called a table and a background colour. Circles and curves, those have been the holy grail that have alluded HTML for too long and now we have functions like Arc, QuadraticCurveTo and BezierCurveTo that can give you some really slick curves and let's you really your lines gracefully. The following is me playing around with a Bezier Curve, again I'm not going into all the math on this but if you are looking for a great resource I highly recommend Eric Rowell's HTML5CanvasTutorial, it is a masterpiece on this control and all its capabilities. Eric does a great job explaining all the elements of this control and goes way beyond my little birdie below (see the birdie) in his explanations.
Again some code;
<canvas id="BabyCurve" width="300px" height="260px" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var c = document.getElementById("BabyCurve");
var cxt = c.getContext("2d");
cxt.fillStyle = "rgb(255,242,0)";
cxt.strokeStyle = "rgb(90,90,90)";
cxt.beginPath();
cxt.lineWidth = 2;
cxt.moveTo(20,240);
cxt.bezierCurveTo(50,80,50,10,90,200);
cxt.bezierCurveTo(80,50,80,20,250,100);
cxt.stroke();
</script>
Now the goal here is to try and find a business application for all this goodness and the first thing that came to mind was a graph. I put this gem together in about an hour.
Here's the code that accomplished this feet of mastery (this looks and is a lot of hard-coded javascript), but you could easily build this into a javascript function that took your data and started to graph it as it appeared on the page.
<canvas id="CurveShape" width="300px" height="260px" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var c = document.getElementById("CurveShape");
var cxt = c.getContext("2d");
cxt.fillStyle = "rgba(200,30,190,0.5)";
cxt.fillRect (230,40,50,240);
cxt.fillStyle = "rgba(200,160,190,0.5)";
cxt.fillRect (160,80,50,180);
cxt.fillStyle = "rgba(200,160,90,0.5)";
cxt.fillRect (90,160,50,120);
cxt.fillStyle = "rgba(90,255,160,0.5)";
cxt.fillRect (20,220,50,80);
cxt.fillStyle = "rgb(255,242,0)";
cxt.strokeStyle = "rgb(90,90,90)";
cxt.beginPath();
cxt.lineWidth = 2;
cxt.moveTo(20,240);
cxt.quadraticCurveTo(140,260,250,60);
cxt.stroke();
cxt.font = "10pt Calibri";
cxt.fillStyle = "#000000";
cxt.fillText("10",35,210);
cxt.fillText("60",105,150);
cxt.fillText("90",175,70);
cxt.fillText("130",245,30);
cxt.font = "16pt Calibri";
cxt.fillStyle = "#000000";
cxt.fillText("HTML5 Canvas Graph",40,30);
</script>
The applications for the canvas control is huge, removing the workload previously dedicated solely to images and third-party controls to create very simplistic graphs. Think about the implementations in your own applications. I'm actually trying to work a graph into the next blog I write just so I can new up one of these beauties.
HTML5: The Beginning - Audio and Video
So I wanted to see what the big deal with HTML5 is that everyone ranting and raving about it as of late AND I wanted to start a little self-experiment on my own. You see, whenever I go to learn a new technology, I buy a book and get a primer, from there I read blogs, articles and forums as I work through issues. With HTML5 (and the ensuing CSS and javascript code that comes with it) I am only going to learn it from blogs et al, no book.
So what did I do tonight?
Well, I started searching for some sites to give me a primer and found a couple of great ones;
The HTML5 Doctor - http://html5doctor.com/
- Besides being beautifully laid out, it is a wealth of information and it looks like a very lively RSS feed.
W3Schools - http://www.w3schools.com/html5/
- I remember way back when I was doing a lot of web work that I was constantly going to this site for reference information and here I find myself tonight going through the tutorials they have on their site.
Learn HTML5: 10 Must Read Lessons - http://www.webhostingsecretrevealed.com/featured-articles/learn-html5-10-must-read-lessons/
- Yeah this site had a lot of great jump off points, particularily the one below.
Semantics - Dive into HTML5 - http://diveintohtml5.org/semantics.html
- I think after I finish running through the basic tutorials on W3Schools I am going to cruise through this guy's blog, the initial page (link above) was a real solid read though.
So apart from doing some reading tonight and getting up to speed on what the whole HTML5 thing is I did the easiest couple of demos on playing audio and video (mainly because it just seemed to easy to be true). The code is entirely simplistic with video supporting OGG, MP4 and WEBM formats and audio supporting OGG, MP3 and WAV formats.
Check them out here - my audio and video samples. Oddly enough, when I uploaded my ogg file to my site, I couldn't view it correctly (although the video control shows fine), not sure if this is a problem with the my hoster, I tried putting in an absolute reference to the video file, but that didn't work either.
Really cool stuff, but now it is off to do more learning on other subjects