Ok, so in my last blog i was going to try and get my textures working by base64 encoding them. This worked in so much that i no longer got that error, but i ended up getting a different error to do with 'cross-origin resource sharing'. So after a bit of research i came across this blog post http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html. Which means that because of a security issue, using textures is a hassle. So i'm moving on from that and on to looking at THREE.js.
while using textures in webGL i came across this error, which i managed to find out is to do with images locally and HTML5 canvas.
The work around i found is to base64 encode the images your working with so you can test locally and don't have to deploy to see if something's working. i've not yet applied this but i'll try it out and let you know how i get on with it in my next post. where i should have something with textures and keboard input to show off.
So after the last blog i wanted to get some proper 3d shapes going on. They can be seen here http://demo.creative-jar.com/webgl3d/ (don't forget about using chrome). Again they're nothing special or fancy, but it's a step forwards from where i was. The next step from here is to try and get textures working and possibly some keyboard input.
I've been looking into making 3d shapes in browser using webGL. I've been working through some lessons at http://learningwebgl.com/blog/ and so far i've got to lesson 3. As you can see http://demo.creative-jar.com/webgl/. It's not too fancy at the moment but it's a start. The next step is to do some proper 3d stuff. Oh, and to view the demo you will probably need chrome.
So you're writing some code and you need to check for a null value.
You'd write something like this, right?
string MyName;
if (GivenName == null)
MyName = "Lyle Kelly";
else
MyName = GivenName;
Great, it does exactly what we want right? Well, it does but it's a little bit long winded, why not like this then?
string MyName = (GivenName == null) ? "Lyle Kelly" : GivenName;
That's good, we've condensed it down to one line, but it could still be better. How about we do this instead then?
string MyName = GivenName ?? "Lyle Kelly";
There, isn't it pretty. So, what have we just done. Well we've just used the null coalescing operator. Which checks for a null value and sets a default value if a null value is found.
So in the example above it's checking the variable GivenName and if it's not null then set MyName to be GivenName, otherwise (if it is null) set MyName to be the string "Lyle Kelly". Simple.
Ok so i've been trying to recreate an existing flash ad banner into an HTML5/Jquery format using Adobe Edge.
I've now finished working on it and it can be seen here along with the original flash banner.
As you can see there's not too much difference between them, and for an early version of the software Adobe Edge didn't do a bad job at recreating what Flash is capable of. It did take a little while to get used to using Edge but as with most things the more i used it the more i understood it.
So is Adobe Edge a viable alternative to creating ad banners, I'd say that it sort of is. By that i mean it can do simple banners well, but to do something fancy in it will take a lot of time and effort. If you want to do a really fancy banner then i'd stick to doing them in Flash for now. Or at least until Adobe release a newer version of Edge with more features in it, which hopefully won't be too long.
After my recent research into HTML5 ad banners as an alternative to flash, i've come across Adobe Edge which Adobe have recently previewed.
Adobe have described Edge as "A new web motion and interactive design tool". Which basicaly means you can create animations using HTML5, javascript and CSS3, using a handy timeline tool to make it easier. More info on it can be found here http://labs.adobe.com/technologies/edge/ and there's a preview video of it in action here http://youtu.be/8FnNtX73v8k.
Edge seems like the ideal way for me to recreate an existing flash ad banner in HTML5 and CSS3, rather than doing it all manually from scrath. So i'm going to give it a whirl and see what it will allow me to do.
So, we all know that HTML5 is the future of the web. But what about the future of web advertising?
Currently, flash is one of the most popular formats for web banner ads, which is all well and good if you've got flash. If you don't have it or aren't allowed it then you don't get to see all these lovely adverts. If you're lucky enough to have flash then you can see the lovely adverts, or not, as people use ad blocking so they don't have to see them.
So why isn't HTML5 used more for banner ads if it's compatible with a wider variety of devices and is not as easy to block as flash? I'm going to attempt to find out by converting an existing flash web banner as closely as possible into HTML5 to find out what is and isn't possible and whether or not it's worth the effort.
I had the idea of using HTML5 Canvas and Audio and a bit of jQuery to create a small interactive site. The end goal is to create something that has both mouse and keyboard interaction to play and change sounds and animations.
The first thing I had to do was decide on a browser to use, as not all browsers are equal when it comes to HTML5 as http://html5test.com will tell you. As I'm using audio it made sense to use chrome as my browser of choice because it supports the use of mp3.
With my browser choice made I moved on to creating the HTML5 canvas and audio element. I'm using jQuery to deal with the keyboard input and the drawing onto the canvas.
Next on my list of things to add is some basic animations and mouse interactivity, which there'll be more on next time.