» Javascript

JavaScript animation – using EaselJS pt 2

Jan 062012

In this post I am continuing my foray into Easel.js. Here I am now actually displaying and animating pictures. So this post is about JavaScript animation – using EaselJS pt 2. We will be making this…

EaselJS animation v1

…and it will be the car that is moving across the screen.

Again you need to make up a simple html5 page and link to the easljs library…

First you need to create a stage and link it to your canvas element…

var page = document.getElementById(“canvas”);
var stage = new Stage(page); Read more...

Which web technologies?

Flash, HTML5 No Responses »

Oct 032011

In a flash class recently I was asked which technologies some one needs to be aware of and competent with when dealing with web design. In answer I quickly knocked a simple ideas chart to showcase which web technologies you need to know, and also some notes about where things are/were and where they are going…

Which web technologies

The big thing of course is html5 and Flash. As you can see from the diagram, everything Flash can do (broadly speaking) can be done in HTML5, with the caveat that HTML5 covers CSS3/JavaScript/HTML5 and things like WebGL. Read more...

Learning three.js

HTML5 No Responses »

Sep 232011

In my foray into the world of WebGL, I came across three.js, a JavaScript library for doing 3D in a web browser, with no plug-ins needed. It can render in three types – WebGL, SVG, or directly into the canvas. So I thought I would go through Three.js and see how easy it is to create a 3D scene. So, in this my first post into learning Three.js I will just create a simple shape – a sphere. Read more...

More JavaScript libraries

HTML5 No Responses »

Sep 162011

Just a quick update to my JavaScript libraries collection. Here are some more JavaScript libraries – things just seem to be getting better and better as far as JavaScript and HTML5 and the web are concerned!

three.js – A brilliant lightweight 3D engine (works with WebGL, amongst other things)

https://github.com/mrdoob/three.js/

newton.js – box2d plus raphael (does not seem to be released yet, but looks fantastic)

[tubepress video="bJ_ONON90fo"]

paper.js - The Swiss Army Knife of Vector Graphics Scripting (looks like great fun)

http://paperjs.org/about/

processingjs - Processing.js is the sister project of the popular processing visual programming language, designed for the web – superb for data visualisations Read more...

Bookmarklets

HTML5 No Responses »

Jan 042011

What are bookmarklets? For those of you who do not know, they are a browser bookmark that has JavaScript inside them – instead of a url. What this means is that these bookmarklets as they are called, actually run a series of JavaScript commands. As a result they have become an important tool for me when I am teaching and surfing the web. Let me share with you some of my favourite bookmarklets…

Markup - http://markup.io/

MarkUp lets you draw on any webpage with a variety of tools to express your ideas etc. You can even share the resulting image. Read more...

Illustrator and SVG, an example of getting your vectors onto the web

HTML5, Illustrator 1 Response »

Oct 192010

Hot on the heels of an HTML5 pack for Dreamweaver, comes an HTML5 pack for Illustrator…

http://labs.adobe.com/technologies/illustrator_html5/

…however Illustrator has been able to output its work to the web for a while, particularly using SVG, so I thought I would do a little experiment and see how Illustrator outputs to SVG.

When you create some artwork you now have several choices in getting that artwork onto a web page. You can…

illustrator export

File > Export > canvas (html)

File > Export > png Read more...

Some cheat sheets regarding HTML5 and CSS3 and JQuery

HTML5 No Responses »

Sep 212010

With everyone talking about HTML5, CSS3, JavaScript, etc I thought it would be a good idea to put together some simple cheat sheets regarding HTML5, CSS3 and JQuery.

They are by no means exhaustive – and they are not meant to be. They are just simple sheets indicating some basic elements, with a few examples thrown in. I plan to use these in future courses, and over time I might expand upon them, but I thought it would be useful for people to get a simple overview of what these topics are about. Read more...

Javascript libraries

HTML5 5 Responses »

Jun 062010

With the recent advent of all the hoopla over flash and html 5 and the iphone/ipad, I decided to go back to Javascript and have a look to see what is around.

I was particularly looking for Javascript libraries to help me with the new drawing features for HTML5 etc, and in my research I came across three that I think are well worth further investigation…

jQuery

jQTouch

Raphael

Now I am sure there are more out there, and I would love to hear from anyone as to what Javascript tools/libraries do you use, but the three above I was particularly taken with and so I recommend to everyone, have a look and let me know what you think. Read more...