Advanced Web Bootcamp

Course Dates

Click below to book your place or call us on 0800 156 0777


RRP: £1,150.00
Web Special: £995.00

Maximum Class Size

In order to ensure every student gets the most out of the course we have a maximum class size of:

London

8 Delegates

York

5 Delegates

The Advanced Web Bootcamp is a 5 day course aimed at those who have either completed the Web Developer Bootcamp or have equivalent experience.  

In this hands on course you will learn about the various events and methods that will allow you to control audio and video, you will create and using 2D and 3D elements within web browsers making use of SVG and WebGL. You will learn how to create banners, slideshows, animations, and simple games - all using HTML5 and JavaScript, and will look at various HTML5 apps and JavaScript libraries that will help when working with animation and games.

Additionally you will learn how to develop web content for mobile devices, and how to leverage JQuery to create powerful online experiences for your users.

Audience

You should have completed the Web Developer Bootcamp or have equivalent experience.

Content

Day 1 - Audio and Video

On the first day you will learn to control audio and video elements with HTML5. You will learn about the various events and methods that will allow you to do this and go through several JavaScript libraries that will make your job easier.

HTML5 Video

  • Video events
  • Video methods
  • Controlling video
  • Monitoring progress
  • Fullscreen video
  • Styling your video
  • Subtitling

HTML5 Audio

  • Audio events
  • Audo methods
  • Controlling audio
  • Monitoring audio
  • Subtitling
  • Audio visualiser

HTML5 User Interface

  • Creating a user interface for controlling your web page assets
  • HTML Audio and Video JavaScript Libraries
  • Skinning your audio and video assets

Day 2 - 2D and 3D

On day 2 we will go through creating and using 2D and 3D elements within web browsers. This will mean using SVG and WebGL. We will discuss both the creation and usage of these assets as well as use various JavaScript libraries to help us in our work.

SVG

  • Creating SVGs
  • Using Illustrator to create SVGs
  • Exporting SVGs from Illustrator

Loading them into a web page

  • How to load svgs into a web page
  • Using the Raphaël JavaScript library to load SVGs

Controlling SVGs 

  • Using the Raphaël library to animate your SVGs

WebGL

  • What is WebGL
  • Which browsers can use WebGL
  • WebGL basics
  • Creating 3D shapes
  • Colouring 3D shapes
  • Animating 3D shapes

Threejs

  • Using three.js to create 3D shapes
  • Using three.js to control 3D shapes
  • Exporting a 3D shape from a 3D package (e.g. Blender)
  • Using three.js to control a 3D shape exported from a 3D package
  • Creating 3D scenes

Day 3 - HTML5 Animation and HTML5 Games

Here you will create banners, slideshows, animations, and simple games - all using HTML5 and JavaScript. You will also look at various HTML5 apps and JavaScript libraries that will help when working with animation and games

    JavaScript Animation

    • Using the canvas
    • Sprites and Sprite sheets
    • Animation
    • requestAnimationFrame()
    • Useful JavaScript libraries

    JavaScript Math

    • Formulae for moving things
    • Circular motion

    CSS3 Animation

    • Animating with CSS3
    • Easing
    • Non-linear motion

    JQuery basic effects

    • Introducing JQuery
    • JQuery effects

    Overview of current HTML5 Applications

    • Hype, Radi, Edge, Construct2, Balsamiq

    Creating Banners and Slideshows

    • Hype
    • Edge
    • Using animate.css
    • Using Deck.js
    • Using html5slides

    Creating simple games

    • Noughts & Crosses
    • Other JavaScript libraries
    • (Trident.js, Easel.js, etc)


Day 4 - HTML5 and Mobile Devices

Mobile Devices

  • Background / history
  • Operating systems
  • Desktop vs smart phone
  • Graphics resolution
  • Mobile web browsers

Setting up your development environment/ framework

  • Aptana Studio/Dreamweaver
  • Android SDK Manager
  • PhoneGap
  • jQuery Mobile
  • Sencha Touch
  • jQTouch
  • appMobi
  • html5boilerplate mobile
  • SproutCore
  • Jo

Development tools

  • debugging
  • emulators & simulators
  • multi-touch for the desktop
  • performance testing

Developing with jQuery Mobile

  • CSS DOM control
  • Data control
  • Visual effects
  • Events
  • DOM manipulation
  • Properties
  • Selectors

jQTouch

  • Building a basic jQTouch site
  • Adding pages
  • Creating lists
  • Adding buttons
  • Richer form elements
  • Creating a floating toolbar
  • Auto titling
  • Location aware solutions
  • Creating your own extensions
  • Animation effects

Developing with Sencha Touch

  • Creating the first page
  • User interface elements
    • Buttons
    • Forms
    • Lists
    • Toolbars
    • Enhancing content with carousel and tabs
    • Controlling video

PhoneGap

  • Overview of PhoneGap
  • Using PhoneGap with DreamWeaver

Day 5 - JQuery

Introduction to JQuery

  • About JavaScript & JQuery
  • Review of JavaScript syntax and custom functions
  • The JQuery Object
  • Downloading & Installing JQuery
  • JQuery Feature overview
  • The Query part: retrieving and traversal
  • Overview of Filters
  • Understanding basic filters

Manipulating content

  • Copying and creating content
  • changing and adding content

Working with CSS

  • Getting & Setting properties
  • finding selectors
  • applying styles to matched elements
  • adding and removing classes
  • toggling classes

Handling Events

  • Events overview
  • The JQuery Event Object

Controlling opacity

  • fading functions
  • controlling speed
  • slide functions
  • slide toggling
  • Object syntax overview
  • Animations