The Course

Postings

Assignments

Misc

Javascript for Beginners

An event handler can be considered a trigger that executes code when something happens, in the ‘event’ of a click or move your mouse over a link, submit a form etc. onClick onClick handlers execute something only when users click on buttons, links, etc. Let’s see an example: <html> <script> function specialsauce() { alert("Thank you!") […] Read more – ‘Event handlers’.

Prose is structured in sentences and paragraphs in the english language. In Javascript we structure our code in lines of instruction and functions. To create javascript that is easy to understand and maintain the code must be broken into smaller modules. These modules or packages of instructions are called functions and can be called upon […] Read more – ‘Functions’.

Let’s first look at an example: <script type="text/javascript"> var x=window.confirm("Are you sure you want to quit") if (x) window.alert("Thank you.") else window.alert("Good choice.") </script> <script type="text/javascript"> var x=window.confirm("Are you sure you want to quit") if (x) window.alert("Thank you.") else window.alert("Good choice.") </script> There are several concepts that we should know. First of all, var x= […] Read more – ‘Variables and Conditions’.

We can’t talk about JavaScript without mentioning the DOM, an important concept to understand about how javascript works. The Document Object Model or DOM provides a structural representation of an HTML or XML document, enabling us to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages or alternately, […] Read more – ‘Document Object Model’.

Javascript is a programming language that is usually included or embedded into HTML files to add behaviours that HTML is not capable of. Embedding Here’s a simple example of how javascript is embedded in an HTML page: <html> <head> <title>This is a JavaScript example</title> <script language="JavaScript"> <!-- document.write("Hello World!"); //--> </script> </head> <body> Hey there! […] Read more – ‘Embedding and Including Javascript’.

This is a quick introduction to Javascript for people new to programming. I’ve broken down the fundamentals of coding in Javascript into the following small chunks: Embedding and Including Javascript Write and Writeln Document Object Model Message Boxes Variables and Conditions Functions Event Handlers Read more – ‘Javascript for Beginners’.

There are two approaches to building Custom WordPress Themes, take an existing theme and customize it or write a custom theme from scratch. We’re going to do both and then you can decide which approach makes more sense to you. Customizing an Existing Theme http://freelanceswitch.com/industry-tips/customize-wordpress-theme/ Theming from Scratch How to code a WordPress 3.0 Theme […] Read more – ‘Creating a Custom WordPress Theme #1’.

Over the past 6 years WordPress has steady grown in popularity into the most used Content Management System (CMS) on the web. There are a number of reasons why WordPress is so widely used and such a great choice for a CMS: 1. Ease of Use: WordPress is not only easy to use for administrators […] Read more – ‘WordPress 01: Basics’.

There are many ways to create a prototype for the mobile platform, the most easiest and most effective approaches use HTML & CSS. The first method that we’ll look at uses Adobe’s Fireworks and requires no actual coding. Here’s the tutorial we will be following: http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/ Read more – ‘Mobile Prototyping with Fireworks’.

Getting good at CSS3 animations and transitions takes practise. The only way to become proficient is by spending hours of working through different examples. Here are a number of good tutorials that generate some great effects. CSS3 Navigation effect http://www.alessioatzeni.com/blog/css3-menu-navigation-effect/ Animated Buttons http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/ Animated Bubble Buttons http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/ 3D Image Gallery http://inspectelement.com/tutorials/create-a-css3-image-gallery-with-a-3d-lightbox-animation/ Read more – ‘Practising CSS Animation & Transitions’.

First read the introduction on Keyframe Animations. intro-to-keyframe-animation. Smashing Magazine has a great article on basic animation principles with CSS3 examples: http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/ Mozilla Dev Team Article on Animation Events in Javascript https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations We’ll be going over it in our next class Read more – ‘Introduction to Keyframe Animation’.

For a while now, we have taken notice of how many designers are reluctant to embrace the new technologies such as CSS3 or HTML5 because of the lack of full cross-browser support for these technologies. Many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and […] Read more – ‘Why We Should Start Using CSS3 and HTML5 Today’.

A good place to start with CSS3 visual effects is transitioning a basic CSS property like color, background-color, or border on hover. To kick it off, let’s take a link color CSS property and connect it to a .4 second transition. Start with a basic unordered list for a navigation system: <!DOCTYPE html> <html> <head> […] Read more – ‘Example 1: CSS3 Transitions’.

For your first assignment in this course I would like you to choose one of the classic title sequences from the list below (or find your own that is under 2:30 mins) and create an HTML5/CSS3 version. Please keep in mind that you are not expected to use embedded video in this assignment and should […] Read more – ‘Asmt1: Title Sequence’.

For our first foray into the new version of CSS we’ll read an article about the exciting new features of CSS3 and also follow some simple tutorial exercises that help us see some of the immediate benefits. Trent Walton’s article does a great job of describing the following improvements to CSS: CSS3 Transitions Background Clip […] Read more – ‘Introduction to CSS3’.

For this course students will be taught how to develop using industry standard software practices. What do Web developers typically use to build websites? Of course, the answer is not entirely consistent across the board but there are some standard tools that make creating websites easier. Here is what you’ll need: Mac laptop or desktop computer […] Read more – ‘Software & Server Requirements’.

This is the site for ISMA 309: Web Practices: Intermediate. This course is the second in a series of courses that focus on merging the strategic, conceptual and developmental aspects of web technology. ISMA 309 has a prerequisite of the ISMA209. If you’re curious about other courses that I teaches you can find a full […] Read more – ‘Welcome’.