About jQuery/JavaScript

JavaScript has been around since the early days of Netscape and has become the only powerful client-side scripting language that comes built-in most browsers. It is likely to stay around for a while until it eventually becomes obsolete, replaced by W3 web standards. For now however, it is used extensively. Unfortunately, due to the nature of JavaScript (client-side), web browsers can choose how to implement the JavaScript code and in some cases whether to actually implement commands at all (Internet Explorer).

Thanks to jQuery, JavaScript can now be used cross-browser more easily. jQuery is an API for JavaScript that extends JavaScript by adding a jQuery object. This jQuery object allows you to query css quickly, perform animations, access the DOM with ease with no additional code to compensate for browsers that do not follow web standards.

Using jQuery/JavaScript

When implementing JavaScript, it should only be used as an additional extra if JavaScript is enabled and not compromise on the accessibility of the website. For example, a navigation should be generated and fully operational without Javascript and enabling JavaScript should then allow the menus to animate. This being the case, JavaScript should be programmed in a non-obtrusive manner. All of the projects listed here conform to that paradigm.

Projects

Register for jQuery project updates

• (NEW) Scrollbars

  This is an example of using jQuery to create a scrollbar - allowing the system default scrollbar to be replaced when JavaScript is enabled.

• CSS Calendar

  Fast and simple date picker. NO PHP. JavaScript and CSS is used to create a fully themable interactive calendar. Simple reusable code. Accommodates for leap years and works completely client-side.

• Mac-like icon dock v2

  'Mac OS X'-like icon dock with titles, smooth animation and unlimited number of icons/seperators.

• Fast colour selector v2

  Fast 16bit colour chooser. Resizable components, small file size, cross browser.

• Fading .jpg images

  Use an array of .jpgs rather than a .gif. Customise transition easily, small LOC count.

• Fading page

  Small LOC count. Works with any html background. Efficient.

• Fading menus

  Optional JavaScript. Fade transition of buttons styled when hover and clicked.

• Fade background menu colour

  Fade background colours of a menu item on hover and click.

About website design

Design is simply using your imagination to create something unique. Website design is no different except that the website design needs to remain accessible and be easy to transform into a working website. This limits the design of the website in many aspects. One is that the location of a title/slogan/navigation and content need to placed at a particular place, and the other is only desigining what can be incorporated in the website without interfering with the actual XHTML content of the website.

How to design websites

Regardless of popular belief, ANYONE can design. Designing is easy, you don't need a degree in graphics design (although it probably helps). You don't even need to be to draw, as all of the design work will be on computer. An overview of the method of designing a typical website is as follows:

1. Layout
   1. Create a document in an image editing program (like Adobe Fireworks) with a size of 900px width by 700px height.
   2. Create a title/logo and position them in the top left corner of a design.
   3. Create a slogan and position it just under or to the right of the title/logo.
   4. Write out the pages in the website and align them either horizonally or vertically to create a navigation, position it under just under the title/slogan or to the left side of the page.
   5. Create the content and use two or three large images - position them in the centre of the page, under the title/slogan and next to the navigation.
   6. Write out a footer, containing the address, email, telephone/fax number and credit/copyright notice - position this at the bottom of the page.
2. Colours
   1. Choose 2/3 colours for the website.
   2. Make the background colour one of those colours.
   3. Make the text colour one of the others.
   4. Use the last colour to split up the content on the page.
3. Creativity (use one or more of the following creative elements to make the website look better)
   • Round off the corners of the content/navigation.
   • Change opacity of the navigation.
   • Add drop shadows to images.
   • Add frames to images.
   • Use borders to split up content.
   • Justify text to make it look neater.

Description

The projects in this category are not full website designs, nor are they examples of how to design a website. Instead, the projects below represent techniques that can used to achieve certain design effects in a website.

Projects

Register for website design updates

• (New) Glass container

  Glass container done in CSS/XHTML, the end result is similar to the Windows Vista Aero theme.

• (New) Animated Background

  Liven up boring solid colour backgrounds by using a small gif image with rotating colours.

About Jogl

Java applets have been used sparsely online even though they unleash the power of Java in a managable container. The reason for this is that Java applets tend to be a little buggy in web browsers and even crash the browser if an unhandled exception is caught in Java. An advantage of using Java is the same as using Flash Player - most computers have it preinstalled or have needed to install it beforehand. Java is more suitable for 3d computer graphics than Flash as programming 3d polygonal objects in Flash is very slow and so is limited by it's performance. Java on the other hand can implement Jogl, which uses OpenGL for it's rendering so can render a vast range of techniques at very high speeds.

Using Jogl

The introduction of XHTML has made implementing a Java applet a little tricky. However, the code used in the project pages validates to XHTML 1.1 and works on all modern browsers. Using Jogl (OpenGL bindings for Java) requires the Java applet to run an applet-launcher binary, which in turn helps to load the Jogl library files to the client's computer (either .dll for Windows, .so for Linux or .jnilib for Mac OS X). Once the library files have been cached, the applet is launched, using the library files.

Please note that if you have installed the Jogl .jar files manually and inserted them in JRE_Path/lib/ext then the Jogl demos will NOT work. Please remove the files and relaunch the web browser if this happens.

Projects

Register for Jogl project updates

• (New) Vertex, fragment and geometry CG shaders

  Initalise CG shaders, cgFx file usage. REQUIRES GEFORCE G80 SERIES AND ABOVE.

• Rotation and texturing

  Jogl init. OpenGL initialisation, texturing, rotations, keyboad input.

About 3D Computer Graphics

The 3D Computer Graphics industry is booming with millions sold on both console and computer games. Computer graphics is not only used in games however, most noticably, in special effects in films, simulations, medical treatments, etc. Its use and development is likely to continue to grow and be used even more in the future. Programming 3d computer graphics is all about maths, and you will not truly understand 3d computer graphics without looking at the maths behind turning data into 3d objects and mapping them onto your screen.

Projects

Register for 3D Computer Graphics project updates

• (New) A cracking algorithm for exploding objects

  A realistic-looking simulation of cracking a 3D object into pieces while running at real time speeds.