HTML5 and JavaScript course and tutorials

In the last two weeks, I’ve been teaching the Software Studies for Media Designers course at Media Lab, with Markku Reunanen. I taught HTML5 Canvas with JavaScript, and Markku taught Processing.

The objective of this course was to teach the basics of programming to an audience of designers and artists. In the end, we published quite a lot of teaching material in the course blog.

You can visit the course blog here:
http://softwarestudies.mlog.taik.fi/

If you’re interested in HTML5 and JS in particular, you can check out my tutorials here:
http://softwarestudies.mlog.taik.fi/category/html5-js/

And we’ve also included links to many external resources here:
http://softwarestudies.mlog.taik.fi/material/

Posted in Courses, HTML5-JS, Software Studies for Media Designers 2011 | Leave a comment

Codify for iPad

Codify, an app that brings touch-based programming to the iPad – http://twolivesleft.com/Codify/:

“Codify for iPad lets you create games and simulations — or just about any visual idea you have. Turn your thoughts into interactive creations that make use of iPad features like Multi-Touch and the accelerometer. (…) Codify is built on the Lua programming language. A simple, elegant language that doesn’t rely too much on symbols — a perfect match for iPad.”

Limited, certainly, but might be useful for quick prototyping or teaching (via MacRumors).

Posted in iOS, Platforms | Tagged | Leave a comment

Kinetic JS

Kinetic JS is “is an HTML5 Canvas library that extends the 2d context by adding region events for desktop and mobile applications, extends the 3d context by wrapping WebGL (…), and also provides animation support for both contexts.”
More info, and downloads: http://www.kineticjs.com/

Posted in HTML5-JS | Tagged | Leave a comment

GameSketchLib

GameSketchLib is a new open-source game library for processing and processing-js, by Michal J Wallace. It grew out of video game programming tutorials he made for absolute beginners.
Link: http://www.gamesketchlib.org/
GitHub link: https://github.com/sabren/GameSketchLib

Posted in Processing | Tagged | Leave a comment

EaselJS

EaselJS is a JavaScript library that “provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.” Easel’s API “is loosely based on Flash’s display list, and should be easy to pick up for both JS and AS3 developers”.
Link: http://www.easeljs.com/

To make it even easier to convert projects from Flash to JS, the makers of Easel have released Zoe, “a tool for exporting swf animations as EaselJS sprite sheets”.
Link: http://easeljs.com/zoe.html

Posted in HTML5-JS | Tagged | Leave a comment

d3.js – Data-Driven Documents

From http://mbostock.github.com/d3/:

D3.js is a small, free JavaScript library for manipulating documents based on data. D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. As a trivial example, you can use D3 to generate a basic HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

Via Miska Knapek.

Posted in HTML5-JS | Tagged | Leave a comment

Dive into HTML5 – tutorial website

Dive into HTML5 is a website by Mark Pilgrim that “seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards”.
The site is based on a book that has been published by O’Reilly: “HTML5: Up & Running“. It contains many useful tutorials, and an excellent introduction section on HTML5.

UPDATE, 11/10/2011
Apparently, last week Mark Pilgrim, or someone on his behalf, took down his websites from the web. There are a few alternative ways to still access Dive into HTML5, in places such as:
http://diveintohtml5.info/
http://mislav.uniqpath.com/diveintohtml5/
http://mislav.uniqpath.com/2011/10/dive-into-html5/
https://github.com/diveintomark/diveintohtml5
And a bit more on the story, with more links:
http://meyerweb.com/eric/thoughts/2011/10/04/searching-for-mark-pilgrim/

Posted in HTML5-JS | Leave a comment

Unity and Flash

Unity will soon be able to publish to Flash. This will allow for powerful 3D web applications, integrating physics and advanced 3D techniques.
“This means that next to the already existing build targets of a Unity project, one will be able to target Flash with Stage3D, announced for Flash Player 11.”
Via blogs.unity3d.com, including image:
http://blogs.unity3d.com/2011/09/01/unity-and-flash-a-sneak-peek/

Posted in Flash | Tagged | Leave a comment

PhoneGap – HTML5 mobile app development

Via TechCrunch:
PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best… HTML and JavaScript.”
More info and download: http://www.phonegap.com/

Posted in HTML5-JS | Tagged , | Leave a comment

Bootstrap from Twitter

Twitter has released Bootstrap:
“a front-end toolkit for rapidly developing web applications. It is a collection of CSS and HTML conventions. It uses some of the latest browser techniques to provide you with stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a super tiny (only 6k with gzip) resource.”
https://dev.twitter.com/blog/bootstrap-twitter
Via TechCrunch

Posted in HTML5-JS | Tagged | Leave a comment