ITP Camp: HTML5 Canvas with Javascript

Where are you at?
Poll: http://goo.gl/cJWcGJ

Tools you’ll need

Text Editor
(Use any one you like, sales but here are a couple)
TextWrangler (Mac)
TextPad (Windows)

FTP
Many FTP applications to choose from. One option is:
Cyberduck

Web Hosting
You can get one relatively inexpensively at Dreamhost, pfizer  BluehostWebFaction, and many other places. (Steer clear of GoDaddy and 1and1 if you can, IMHO.)

Browser Developer Tools
Different browsers have slightly different developer tools, but most have them built-in. I’ll be demo-ing in Chrome.
Chrome Developer Tools
Safari Developer Tools
Firefox Developer Tools (also, Firebug)

Code Examples: https://github.com/robynitp/itpcamp-htmlcssjs/

Intro to HMTL

Intro to CSS

CSS Layout

Slides: CSS and CSS3

Event Listeners in Javascript and jQuery

[jsfiddle] Javascript Keyboard Listener: http://jsfiddle.net/rover/3jK9h/

[jsfiddle] DOM Manipulation and Javascript objects: http://jsfiddle.net/rover/9H3PH/  (uses jQuery)

Creating a slideshow in HTML5 and javascript: https://github.com/robflaherty/html-slideshow 
Find the code on github: https://github.com/robynitp/itpcamp-canvas

Slideshow: ITPCamp_Canvas2014 [pdf]

Links and such:

HTML5 Canvas Tutorials

How to make a simple HTML5 Canvas Game

Comparison of Javascript drawing libraries

UPDATE: Thanks, cialis everyone, for coming yesterday! I had fun — hope you did too. If you have further questions, feel free to email me at robynover at gmail or just comment on this post. See you around Camp!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>