Next-level Web Design with jQuery – #cs4hschch

This session is a taster for interactive web development using jQuery. An understanding of HTML and CSS is required, but no experience with JavaScript or programming is necessary. Learn how to easily add a slideshow to your website, create an interactive image gallery, and dynamically load a set of images from Flickr. If you’ve ever wondered how jQuery and JavaScript fit into web design, this session is for you. The tools used are all freely available for use in your classroom.

Capture

What is jQuery?

  • It is a JavaScript library
  • Adds interactivity to websites
  • DOM manipulation (DOM = Document Object Model) – the structure of objects on your webpage

A web page is made of three main languages – HTML / CSS / JS. Good example using google.co.nz showing HTML only page, then with CSS then JS.

Workshop Mission: Fun with jQuery

Neocities: Getting online fast

jQuery Basics

What is this thing anyway?

jQuery vs JavaScript
  • JavaScript is a programming language.
  • jQuery is a library of code which is written in JavaScript.
Handwritten jQuery
  • Can be used to modify a single element
  • Or to modify a whole lot of elements in the same way
jQuery Plugins
  • A plugin is a pre-written piece of functionality.
  • Plugins need to be included in your site and then initialised.

Workshop Plan

  • Use a plugin to create a slideshow
  • Use a plugin to create an image gallery
  • Write some code to import images from Flickr
Backstretch
  • Allows you to add a dynamically-resized, slideshow-capable background image to any page or element.

Lightbox

  • Popup image gallery
  • Provides a simple way to create a gallery with both thumbnails and full-view images.

Flickr Integration

  • Pulling in themed images
  • Flickr Public API
    Flickr provides a way to search their images from code.
  • This means we can get a list of information about a set of images automatically.
  • The API we will be using is the public feed found here.
  • API = Application Programme Interface (a way to get data in and out of an application)

JSON Data

  • Many APIs offered by web applications use JSON as a way of transferring data.
  • (JavaScript object notation)

My site – http://schuknight.neocities.org/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s