Posts under HTML5
About 7 or 8 months ago I built a tile based launch page at work to launch learning modules which looked similar to the Windows 8 start screen. When I had spare time I kept building on and adding 3D animations to match it even closer to Windows 8. Then I kind of forgot about it until this week when I stumbled upon this article Creating Windows-8-like 3D animations with CSS3 and jQuery which provides a tutorial on creating a similar effect.
I had been meaning to do a post on my laucher when I first started making it but it never happened. So now that that article reminded me I thought I should post it. I am not going to provide any explanations of the code or tutorials but rather just show a demo (It’s HTML and javascript so you can just view the source anyway). I have ripped a bunch of LMS related code out of it and turned it into a web page launcher.
Click a tile to launch an ‘app’ (in this case a website). Hover you mouse over the top or bottom right corner for the ‘charms’ bar to close the site and return to the start screen. I have currently only tested it in Chrome and on an iPad and there isn’t a way to get to the charms bar on iPad yet.
21 APR
The other day I was playing around with Mozilla’s Popcorn Maker and I had the idea of using HTML/JS/CSS to create transformable divs using transform handles and a bounding box. I did a quick search for any existing examples of HTML transform handles but i couldn’t find anything so I decided to give it a go myself. Below is a demo of what I came up with. It might not be the best solution but it works pretty well. I even implemented rotation but I had some issues with the scaling when the element was rotated. The demo has the rotation disabled but you can get the source by view the source of the frame. All JS, and CSS is in the one HTML file. Enabling the rotation is as simple as removing display none from the rotation handles CSS style.
The main reason I wanted to create transformable DIVs is for the next version of my Module Builder. I had experimented with transforming HTML via the AIR app but I think doing it directly in the HTML page.
17 NOV
Just another quick post tonight. I have bigger one lined up for tomorrow I promise. I just wanted to show a little experiment I did a while back with JavaScript – accessing the Accelerometer and Compass data in Safari on the iPad. Below is a short video demonstrating it if you don’t have access to an iPad. If you do have one – visit the link following the video. I might also mention that the arrow/circle image was all created using CSS3 too!
And here’s the link to the demo.
To get the source – just go to the above link and right click > view source.
31 OCT
As you may know I have been mucking around with HTML5′s canvas element lately. Here is an evolution of the paint mixing example I showed a couple posts back. I decided to turn it into a simple iPad web app. Check out the video below and visit the following URL on an iPad to try it out. I also plan to make it multitouch in the not too distant future!
http://www.purplesquirrels.com.au/blogstuff/canvasdraw/index-touch.html
Video demo:
14 AUG
Here is an experiment I did to learn how the HTML5 Canvas tag works. I wanted to know how to manipulate pixels so I attempted to port my AS3 paint mixing to Javascript. I was surprised by the performance although it doesn’t seem to be as fast as the Flash version, and it is definitely a lot more work getting and setting pixels with Javascript and Canvas. Check out the demo below. The brush will lag at higher drawing speeds when the size is large. But it if you don’t draw too fast it works pretty well. So far it seems to work best in Safari.
Supported browsers:
- Chrome (Only tested in Chrome 12)
- Safari (Only tested in Safari 5)
- IE9
Note: Doesn’t work in Firefox and haven’t tried Opera
23 JUN
Below is some videos taken at the Adobe MAX 2010 conferences during Sneaks sessions. Sneaks sessions are a chance for Adobe to demonstrate prototypes and new technologies that may or may not make it into future Adobe products. Some pretty interesting stuff!
Typography of Code- a new way of displaying and reading code for designers
Wallaby – Exporting an FLA to HTML
Flash StageVideo – a performance demo showing smooth playback with low CPU usage when overlaying vector graphics on 1080p video
Flash StageVideo – smooth playback of 4K video in Flash
Video Tapestry – a new way to navigate a video
Photoshop Future – matching colours in photos
Pixel Bender 3D – shaders for the new ‘Molehill’ 3D api coming to Flash