ISMA309


Amazing CSS3 Animations

Event handlers
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: The function specialsauce() is invoked when the […] Read more – ‘Event handlers’.
Functions
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’.
Variables and Conditions
Let’s first look at an example: There are several concepts that we should know. First of all, var x= is a variable declaration. If you want to create a variable, you must declare the variable using the var statement. x will get the result, namely, true or false. Then we use a condition statement if […] Read more – ‘Variables and Conditions’.
Message Boxes
Message Boxes There are three message boxes: alert, confirm, and prompt. Alert Let’s look at the first one: You can put whatever you want inside the quotation marks. Confirm An example for confirm box: window.confirm("Are you sure you want to quit?") Prompt Prompt box is used to allow a user to enter something according the […] Read more – ‘Message Boxes’.
Document Object Model
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’.
Write and Writeln
In order to output text in JavaScript you must use write() or writeln(). Here’s an example: Welcome to my site Note: the document object write is in lowercase as JavaScript is case sensitive. The difference between write and writeln is: write just outputs a text, writeln outputs the text and a line break. Next up: […] Read more – ‘Write and Writeln’.
Embedding and Including Javascript
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: This is a JavaScript example Hey there! Usually, JavaScript code starts with the tag . The javascript code […] Read more – ‘Embedding and Including Javascript’.
Javascript for Beginners
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’.
Creating a Custom WordPress Theme #1
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’.
Installing WordPress Locally
Install WordPress 1. Download WordPress source code – put it in MAMP (“user/Sites” folder) 2. Make a blank Database for WordPress from the MAMP Start (click on PhpMyAdmin), configure wp-config.php file database name: wp-tutorial-db username: root password: ******** 3. Run the WordPress installer: Specify a Site name, Username, password 4. Download WordPress Importer plugin, activate […] Read more – ‘Installing WordPress Locally’.
WordPress 01: Basics
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’.
Mobile Prototyping with Fireworks
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’.
Practising CSS Animation & Transitions
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’.
Amazing CSS3 Animations
The Man From Hollywood http://lab.tylergaw.com/themanfromhollywood/ Making Clouds with CSS http://www.clicktorelease.com/tutorials/css3dclouds/ Walking Man http://andrew-hoyer.com/experiments/walking/ Read more – ‘Amazing CSS3 Animations’.
Introduction to Keyframe Animation
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’.
Why We Should Start Using CSS3 and HTML5 Today
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’.
Example 1: CSS3 Transitions
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: Page Title item 1 […] Read more – ‘Example 1: CSS3 Transitions’.
Asmt1: Title Sequence
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’.
Introduction to CSS3
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’.
Software & Server Requirements
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’.
Welcome
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’.