HTML5 Developer Conference header

Training

Note: All training courses are offered as one (1) day classes and tickets are only valid for a single day. Some courses may be offered on multiple dates to accomodate the number of participants who wish to take the class.



Programming 3D Applications in HTML5 and WebGL

Instructor: Tony Parisi (ViZi)


HTML5 is becoming the platform of choice for building 3D applications. The advanced programming, animation and multimedia capabilities of HTML5, combined with hardware-accelerated 3D rendering provided by WebGL, represents a combination with limitless possibilities. With HTML5 and WebGL, developers can create immersive 3D games, integrated 2D/3D presentations, product displays, social media sites, content editing systems and more, all running in your web browser.

This hands-on course covers developing 3D applications in HTML5 and WebGL, with topics including rendering, animation, CSS3, the Canvas 2D API, 3D libraries and frameworks, multi-threaded programming with web workers, and 2D and 3D tools pipelines. The instructor will present several working in examples using Three.js, Tween.js and other JavaScript frameworks, with an emphasis on practical deployment and best practices.


Course Level:Intermediate

Prerequisites:

  • Intermediate JavaScript and CSS
  • jQuery
  • Experience with Flash, Canvas 2D and other web rendering/animation APIs is a plus
  • DateThursday, October 24 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
    Room 673 (6th Floor)
  • Friday, October 25 (NEWLY ADDED)
    Limited number still available
  • $150
  • 9:00am - 4:00pm
  • SFSU @ 835 Market St
    Room 612 (6th Floor)
Register for this class

Introduction to Responsive Web Design

Instructor: Matt Kelly (ZURB)


Learn how to design and build responsive web sites. We practice Responsive Web Design every day here at ZURB, heck we even built Foundation on these principles back when we launched it in 2011. This class covers both the Design patterns and code bits that all designers and front-end coders should know.


Course Level:Beginner

Prerequisites:

  • Basic understanding of The Web, HTML, and CSS
  • DateThursday, October 24 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
    Room 612 (6th Floor)
Register for this class

Up & Running with Bootstrap

Instructor: Jen Kramer (jenkramer.org)


Bootstrap, an open source front-end framework, is one of the hottest front-end frameworks for building responsive websites. Follow along and learn how to build a Bootstrap-based website from scratch, incorporating the responsive grid system, see the basic CSS in action, incorporate Javascript-based components, and customize CSS using LESS.

In this workshop, Jen Kramer will lead you in:

  • Downloading Bootstrap and incorporating it into an HTML document
  • Working with the Bootstrap responsive grid system
  • Exploring Bootstrap’s core CSS, overriding this CSS using standard CSS techniques
  • Incorporating Bootstrap’s image formatting elements and icons
  • Creating and styling interactive menus with Bootstrap, including dropdown menus
  • Incorporating jQuery plugins with Bootstrap, including alerts, modal windows, image carousels, accordion windows, and more
  • Customizing Bootstrap using CSS LESS

Course Level:Beginner/Intermediate

Prerequisites:

  • Knowledge of hand-coded HTML5 and CSS3 are required
  • Javascript and/or jQuery knowledge are helpful, but not required
  • Knowledge of LESS is helpful, but not required
  • DateThursday, October 24 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
    Room 664 (6th Floor)
Register for this class

Up & Running with Foundation

Instructors: Jen Kramer (jenkramer.org) & Matt Kelly (ZURB)


Learn one of the hottest emerging front-end frameworks and incorporate it into your work tomorrow. Follow along and learn how to build a ZURB Foundation-based website from scratch, incorporating the responsive grid system, see the basic CSS in action, incorporate Javascript-based components, and customize CSS using Sass and Compass.

In this hands-on workshop, Jen Kramer & Matt Kelly will lead you in:

  • Downloading Foundation and incorporating it into an HTML document
  • Working with the Foundation responsive grid system
  • Exploring Foundation's core CSS, overriding this CSS using standard CSS techniques
  • Creating and styling interactive menus with Foundation, including dropdown menus
  • Incorporating jQuery plugins with Foundation, including alerts, modal windows, image carousels, accordion windows, and more
  • Customizing Foundation using Sass and Compass

Course Level:Beginner/Intermediate

Prerequisites:

  • Knowledge of hand-coded HTML5 and CSS3 are required
  • Javascript and/or jQuery knowledge are helpful, but not required
  • Knowledge of Sass is helpful, but not required
  • DateFriday, October 25 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
    Room 612 (6th Floor)
Register for this class

Web Performance Boot Camp

Instructor: Daniel Austin (PayPal)


The art and science of Web performance is the topic for this one-day workshop. Here are some of the topics to be covered:

  • What you really need to know about Web performance
  • Using the MPPC model to figure out what’s important – and what’s not – for your site
  • The Network Effect
  • Testing performance on the Web for fun and profit
  • Performance and availability
  • Optimizing your Web site for HTML5
  • 7 Myths of Web Performance

Course Level:Beginner

Prerequisites:

  • Ability to perform simple numerical analysis
  • Have an open and inquiring mind
  • DateThursday, October 24 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
    Room 613 (6th Floor)
Register for this class

JavaScript Clarity in Under a Day

Instructors:
Marcus Phillips (Hack Reactor)
Shawn Drost (Hack Reactor)
Tony Phillips (Hack Reactor)


We'll cover the fundamentals of practical JavaScript usage in a browser, with a focus on language features that tend to confuse people most in their first year or so of front-end work. This will be an extremely hands-on session, drawing on the accelerated curriculum we use for rapid on-boarding at Hack Reactor, the JavaScript immersion school.


The session will alternate between half-hour lectures and matching half-hour exercises, supported by TA's.

Topics covered:

  • Debugging workflow & tools
  • Properties, methods, brackets, & dots
  • Scopes and closures
  • The keyword 'this'
  • Prototype chains
  • The keyword 'new'
  • Callback usage in practice
  • Bonus: jQuery

Course Level:Intermediate

Prerequisites:

  • Basic JavaScript experience or intermediate experience in another language
  • DateMonday, October 21 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
    Room 607 (6th Floor)
  • Thursday, October 24 (SOLD OUT)
  • $150
  • 9:00am - 4:00pm
  • SFSU @ 835 Market St
    Room 607 (6th Floor)
Register for this class

Real-time: HTML5, Sockets, Peer Connections

Instructor: Kyle Simpson (Getify)


Waiting hundreds of milliseconds for an Ajax request from the browser to server and back... that's so 2009. Welcome the (near)real-time, peer-to-peer-capable web of 2013, where round-trips of communication can take as little as a few dozen milliseconds, nearly indistinguishable from instant, and sometimes don't even *need* a server at all.

We're going to take a look at HTML5's main real-time capabilities: WebSockets and WebRTC. We'll enable these with a powerful but simple node.js back-end. And together, we'll build a multi-user, live-simultaneous-interaction app that helps sort out where these technologies will fit best into our application toolbox.


Course Level:Intermediate/Advanced

Prerequisites:

  • Up to date modern browser (i.e. Chrome or Firefox -- preferably the nightly or beta release)
  • Text editor or IDE
  • Git
  • The ability to run a local web server (i.e. MAMP, XAMPP)
  • Node.js 0.10 or newer and a beginner to intermediate knowledge of it
  • A working and configured `npm` (Windows: Some packages (like socket.io) require `npm` to have a local .Net development environment)
  • Basic knowledge of WebSockets
  • Basic knowledge of HTML
  • Intermediate to advanced knowledge of JavaScript
  • DateMonday, October 21 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
    Room 610 (6th Floor)
Register for this class

Advanced JS: The "What You Need To Know" Parts

Instructor: Kyle Simpson (Getify)


The majority of JavaScript developers use the language "in practice" (that is, they learn on the job) but rarely go beyond a surface understanding. In this workshop, we're going to actually dive pretty deep into how some of the confusing parts of the language actually work. Especially when we talk about prototypes, we'll see some perhaps surprising conclusions that change the way we think about OO in JavaScript. The goal is that you'll know why JavaScript works the way it does, so that you can make informed decisions about how to use it.

Outline

  • events (DOM & JS)
  • this
  • closures
  • encapsulation (module pattern)
  • prototypes
  • common OO patterns in JS
  • inheritance vs. behavior delegation

And as a bonus, if we have time, we'll dive into async code patterns, including:

  • callback styles (continuation passing, etc)
  • generators and coroutines (yield, etc)
  • promises
  • This is an all-day workshop, and includes both lecture and lab exercises. There will be several breaks throughout the day, including a lunch break.

Course Level:Advanced

Prerequisites:

  • Basic programming fundamentals (variables, loops, functions, objects, callbacks, etc)
  • Basic-to-intermediate jQuery familiarity (CSS selectors, events)
  • Intermediate JS syntax ability (types, references, functions as values)
  • Intermediate-to-advanced experience with developer tools in modern browsers

Class preparation: Have a laptop with a recent modern browser (Firefox, Chrome, etc) and a basic development environment (such as a text editor for making changes to HTML, CSS, and JavaScript files).

This class is being offered coutesy of New Circle

  • DateThursday, October 24 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
    Room 619 (6th Floor)
Register for this class

Introduction to jQuery Mobile

Instructor: Ray Villalobos (Lynda.com)


jQuery mobile is a touch optimized framework and the fastest and easiest way to create mobile applications that look and feel like native applications. The great thing about jQuery Mobile is that if you know basic HTML5 you've got everything you need to build great mobile applications. You don't have to learn complex languages like Objective-C or Java. The framework has excellent support for all major mobile platforms including iOs, Android, BlackBerry, Windows Phone and more. In this course, Lynda.com Staff Author Ray Villalobos shows you how easy it is to get started installing, using and customizing a real project. We'll explore all of the major features of the framework and build a real application.

In this workshop, Ray Villalobos will lead you in:

  • Downloading, installing the framework and using CDNs.
  • Making headers that look like Native Apps
  • Creating mobile style buttons
  • Adding footers
  • Using icons for navigation
  • Creating and navigating jQuery Mobile pages
  • Understanding Page transitions
  • Using grids to display image thumbnails
  • Building searchable autocomplete list views
  • Managing Dialogs
  • Adding collapsible Accordions
  • Working with PopUps
  • Using the new Panels features
  • Building dynamic table columns
  • Building Custom icons
  • Using Custom app icons and startup pages

Course Level:Beginner

  • DateThursday, October 24 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
    Room 667 (6th Floor)
Register for this class

jQuery Mobile Web Applications

Instructor: Ray Villalobos (Lynda.com)


jQuery mobile is a touch optimized framework and a great way to build mobile web applications. If you know a little JavaScript and jQuery, then you can build applications that tie into different services like WordPress, Twitter, Flickr and YouTube, creating an app that's easy to update by publishing data from those services. Instead of having to update your app, you simply post a photo, tweet, video or an article to one of those sites and your app is automatically updated.

If you've already attended an introduction to jQuery Mobile, this is a great follow up class. If you know jQuery mobile and you're looking to take your knowledge further and build dynamic applications that get data from external sources, this is a great hands-on session.

In this workshop, Ray Villalobos will lead you in:

  • A quick review of the jQuery Mobile Framework
  • Understanding JSON
  • JSON vs JavaScript Objects
  • Using the Wordpress JSON plugin
  • Reading JSON Feeds
  • Creating a page for your WordPress articles
  • Manipulating data from feeds
  • Understanding the YouTube API
  • Creating a dynamic grid of YouTube Videos
  • Playing videos on your mobile app
  • Testing on Mobile Devices with Edge Inspect
  • Understanding the Flickr Feed
  • Adding a Photo Grid through the Flickr API
  • Understanding the Twitter V1.1 API
  • Parsing hashtags, URLs and mentions with Regular Expressions
  • Auto-updating the twitter stream with setInterval
  • Deploying your App with PhoneGap Build

Course Level:Intermediate

Prerequisites:

  • Basic HTML knowledge
  • Basic JavaScript knowledge useful, but not necessary
  • DateFriday, October 25 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
    Room 610 (6th Floor)
Register for this class

Going Node

Instructor: Richard Key (Modulus)


In this workshop we will be taking a look at Node.js and building a basic web application. Breaking up into teams, each team will be responsible for a simple web site along with a simple Node.js API backed by a pre-filled mongoDB database. After a little introduction to Node.js and MongoDB, teams will be set free to build whatever they wish with the data provided with the help of the teacher.


Course Level:Intermediate

Prerequisites

  • Basic web development/design experience (HTML & CSS)
  • Javascript experience is helpful, but not required
  • Experience with Node.js is helpful not required
  • DateMonday, October 21 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
    Room 667 (6th Floor)
  • Thursday, October 24 (SOLD OUT)
  • $150
  • 9:00am - 4:00pm
  • SFSU @ 835 Market St
    Room 674 (6th Floor)
Register for this class

Prepare for the Future with Web Components

Instructor: Rob Dodson


Web Components are poised to change almost everything we know about Front-End Design and Development. But what are Web Components?!

In this course we'll cover the new W3C specs which make up the component model for the Web ("Web Components"). These include HTML Imports, the new <template> tag, Shadow DOM and Custom Elements. We'll learn how to create our own components which fully encapsulate their styles and scripts and we'll explore how these tools will be used to build the UI frameworks of the future.


Course Level:Intermediate

Prerequisites:

  • Know how to build a basic page in HTML markup
  • An understanding of overrides in CSS and how CSS is scoped
  • An understanding of JavaScript prototypes
  • Google Chrome (latest) and Google Chrome Canary (latest)
  • DateMonday, October 21 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
    Room 619 (6th Floor)
Register for this class

Navigating HTML5 Development

Instructor: Richard Clark


Are you new to HTML or have been away for a while? The world of modern web development can be a bewildering place. There are new HTML5 tags to master, new CSS selectors and features to learn, and an expectation of greater interactivity via JavaScript. There's also the questions that keep web developers up at night: dealing with older browsers, working with the wide range of mobile devices out there, and building high-performance sites.

We'll cut to the heart of web development – the essentials of markup, styling, and code to get you working today. You'll get to practice these essentials and make a plan for building your next web project. Let's give you a great head-start on the conference!


Course Level:Beginner

Prerequisites:

  • No programming experience needed
  • Be comfortable with various web browsers (Will be working with Chrome)
  • Experienced with simple text editing tools
  • DateMonday, October 21 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
    Room 626 (6th Floor)
Register for this class

Crazy Data Circles: Introducing d3.js


Sometimes you want to use circles to clearly present your data; sometimes you just want to fill circles in with pretty colors and have them fly around the screen, because it looks awesome. This off-kilter introduction to D3 will teach you how to do both of those equally valid, time-honored activities. We’ll cover the fundamental concepts of D3 — loading data, generating visual elements based on that data — and then walk through several code samples, illustrating some of the nutty things you can do with this serious tool.

We’ll move quickly, so you should already be familiar with HTML, CSS, and a bit of JavaScript or another programming language. (For example, if you’ve noodled around with jQuery or Processing, and variables and for() loops don’t scare you, you’ll be fine.)


Course Level:Beginner

Prerequisites:

You will need your own laptop with the following installed and ready to go: a text or code editor of your choice, a new web browser (Chrome is best for our purposes), and a local web server (e.g., MAMP or Python simple server).

  • DateMonday, October 21 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
    Room 627 (6th Floor)
Register for this class

Intermediate d3.js

Instructor: Ian Johnson


d3.js is heating up in both the data visualization community as well as the web development world. This course will help you take the simple charts and visualizations you may have already played with and integrate them with larger applications.

d3.js is a toolkit that you can choose from selectively, certain parts of the API can be used in concert with any other html5 technology, and other parts force you to make a choice. This course will help you navigate the API and make informed choices.

This course will balance hands-on visualization with lecture and exploration. Many of the techniques I'll share can be tried quickly in the browser, while some will require longer attempts to fit your unique situation. It is my hope that you walk away empowered and excited by new ideas!


Course Level:Intermediate

Prerequisites:

  • You should be comfortable with Javascript and closures (callback functions)
  • You should also have familiarity with CSS selectors
  • This course is intended for people who want to make the leap from simple charts to interactive visualizations.
  • DateFriday, October 25 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
Register for this class

1/2 Day Backbone JS

Instructor: Sid Maestre


In this hands on lab, we will work through a series of examples that build on each other as I show how the moving parts work together. We'll add the StackMob JavaScript SDK to extend backbone.js and persist your data in the cloud. We'll wrap up our session looking at how require.js allows you to break your backbone.js code into discrete modules during development. Once you are ready to deploy you can use require.js to build an optimized version of your javascript for production.


Course Level:Beginner

1/2 Day Angular JS

Instructor: Ari Lerner


This half-day workshop will introduce you to AngularJS. We will cover the basics, along with lesson's learned from Joel's large-scale AngularJS application he's been working on for the last 1.5 years. You should have a working knowledge of HTML and JavaScript and object oriented principles and patterns (MVC). No prior experience with AngularJS is required.

We will assume that you have a computer with NodeJS and Git installed, as they are required to follow along. This is especially important for Windows users because of the distinct challenges with getting these set up on their machines. Please come prepared!


Course Level:Beginner

  • DateMonday, October 21 (SOLD OUT)
  • Cost$150
  • Time 9:00am - 4:00pm
  • LocationSFSU @ 835 Market St
Register for this class
Sponsors

Interested in
being a sponsor?

Contact us at
cu@html5devconf.com

Newsletter Signup
Signup for our newsletter today!