This document provides an overview of HTML5, Backbone.js, and web development. It introduces key concepts like client-server architecture, APIs, databases, markup languages, and frameworks like jQuery, Bootstrap, and Backbone. It discusses modern front-end development practices and server-side programming. Mobile web development options like native, hybrid, and PhoneGap are also covered. The document emphasizes learning resources and stresses attention to details, user experience, and adaptability to new technologies in the field.

1. HTML5 and Backbone
JS Crash Course
Zane Staggs - CodingHouse.co

2. Your instructor
Husband, Father and Developer
Living the dream...
MIS graduate U of Arizona
Coding House BetterDoctor

3. Coding House
Learn how to code 60 days of Intensive training
Physical activities and food provided
Full time immersion in coding environment
Hands on mentorship and career placement
Accessible to bart
First class in January

4. So you want to be a
web/ mobile developer?
Coding languages:
html/php/ruby/java/javascript/c
Design skills: user interface, photoshop,
illustrator, optimizing graphics
Business skills: communication,
group/team dynamics,
Everything else: optimization, seo, sem,
marketing, a/b testing, unit testing,
bugs, debugging, operating systems,
browser bugs/quirks, devices,
responsiveness, speed,

5. Why would you want to
do this? West days of the internet
Wild
Fun, creative
Fame and Fortune
Startups
Technology
Career

6. It’s actually not that hard
Today we will do a high level overview so you
are at least familiar with the concepts that a
web developer must deal with on a daily basis.
It’s the bigger picture that matters when dealing
with business people and engineers.
I’m here to show you the how to get it done
fast.
It’s important to know how to think like a
developer and use the resources that are
available to you including google

7. The web browser
Very complicated client software.
Lots of differences between
platforms (os) and rendering
engines: gecko (firefox), webkit
(safari/chrome)
Reads markup, css, and js to
combine to a web page
IE is the underdog now, always a
pain for web devs but getting
better slowly
http://en.wikipedia.org/wiki/Comparison_of_web_bro

8. How the web works
Client/Server (front vs back end), networking, ip
addresses, routers, ports, tcp/ip = stateless
protocol
Request/Response Life Cycle
DNS (translates readable requests to map to
servers)
API’s (rest, xml, json, etc)
Databases (mysql, mssql, mongodb)
Markup languages (html, xml, xhtml) Doctypes

9. Client/Server
Client requests data from a server, server
Communications
responds
Cloud based/virtualization = many servers on
one box sharing resources through software
virtualization

10. DNS requests
Browser requests to look up a website
address, hits the closest DNS server says yes I
know where that is it’s at this IP address.
Cacheing, propagation,
TTL

11. APIs
API = Application Programming Interface - good
for decoupling your application. Data access.
JSON = Preferred format for describing and
transferring data, also native js object, nested
attributes and values
XML = brackets and tags, old school and heavier
REST = (REpresentational State Transfer) - url
scheme for getting and updating/creating data
based on http requests
HTTP Requests: GET, POST, UPDATE, DELETE
Error codes: 200, 404, 500, etc

12. Databases
Like a big excel sheet, way to organize and
retrieve data through columns and rows
(schemas)
Runs on the server responds to requests for
data using specified syntax like SQL, JSON
Example SQL: “select type from cars where
color = blue”
Mysql, MSSQL = traditional relational database
MongoDB = schema-less, nosql database

13. Markup Languages
HTML5 - modern html lots of new features, not
even an official approved spec but browser
vendors started implementing them anyway.
W3C/standards
Doctype tells the browser what spec to adhere
to.
DOM = Document Object Model: tree of
elements in memory, accessible from javascript
and the browser

14. Example Dom Tree

15. Let’s create a website
HTML
CSS
Javascript
General Programming Concepts

16. HTML
Descendant of xml so it relies on markup
<p>text inside</p>, a few are “self closing” like
<img />
Nesting Hierarchy: html, head, body - DOM
Can have values inside the tag or as attributes
like this: <p style=”....”>some value inside</p>
http://www.w3schools.com/html/html_quick.asp

17. HTML5
Latest spec
New html5 tags: article, section, header, footer,
video, audio, local storage, input types, browser
history, webrtc
http://www.creativebloq.com/web-design-tips/exam
http://www.html5rocks.com/en/

18. CSS (Cascading Style
Sheets) for look and feel can be inline, in
Style definitions
a separate file, or in the <head> of the
document.
Describe color, size, font style and some
interaction now blurring the lines a bit
Media queries = responsive
Paths can be relative or absolute
Floating, scrolling, and centering.
Modern stuff, table layout, flexbox, not
supported yet everywhere

19. Javascript
(not java)
Most ubiquitous language, also can be inline, in the head,
or in a seperate file.
Similar to C syntax lots of brackets
Variables vs Functions vs Objects {}
Actually a lot of hidden features and very flexible
Scope is important concept, window object, event
propagation
Console, debugging with developer tools or firebug
Polyfills for patching older browsers to give them support

20. General coding tips syntax
Good editor with code completion and
highlighting (webstorm or rubymine
recommended)
Close all tags first then fill it in.
Test at every change in all browsers if possible.
Get a virtual box and free vm’s from ms:
modern.ie
Get a simulator, download xcode and android
simulator
Minimize the tags to only what you need.
Semantics: stick to what the tags are for

21. Jquery
Javascript framework, used everywhere. Free
and open source.
Simplifies common tasks with javascript and the
DOM
$ = get this element or group of elements using
a selector
Vast selection of Plugins
$.ready = when document (DOM) is completely
loaded and ready to be used

22. Bootstrap
CSS and JS Framework from Twitter for rapid
development of User Interfaces (Prototyping)
Include the CSS file and js file
Use the various components as needed.
Override styles as necessary
http://getbootstrap.com/
Available themes: wrapbootstrap.com (paid),
bootswatch.com (free)

23. Modern front end web
development
HAML and SASS, Compass, Less,
Static site generators: middleman, jekyll
Coffeescript (simpler syntax for javascript)
Grunt and Yeoman (build anddependency
management)
Node JS (back end or server side javascript)
MVC frameworks: backbone js, angular js
http://updates.html5rocks.com/2013/11/The-Landsca

24. Server side
Server sits and wait for requests. It responds with
some data depending on the type of the request
and what’s in it.
Port 80 is reserved for website traffic so anything
coming on that port is routed to the webserver on
the machine. Apache, Nginx
The server says oh this is a request for a rails page
so let’s hand this off to rails let it do its thing then
respond with the result.
Rails runs some logic based on the request
variables, session values and checks the database
if needed to look up more data

25. Basic Server Admin
Windows vs Linux
Terminal basics: cp, rm, cd, whoami, pwd
Services need to be running and healthy like
mail, bind (dns), os level stuff disk space etc
Security
Backups
http://community.linuxmint.com/tutorial/view/100

26. Version Control
Git/Github - distributed version control
SVN/CVS - older non distributed
Branching
Merging diffs
Pushing to master
https://www.atlassian.com/git/workflows

27. Backbone JS
Front End Framework loosely based on MVC
M = Model, V = View, C = Controller
Model = Data/Business Logic
View = Display/HTML
Controller = Handles site operational logic, pull
some data show a view
http://backbonejs.org/ (docs and annotated
source)
Requires underscore and jquery or equivalent $
function

28. Backbone Model
Ecapsulates an object’s data properties
and storage/retrieval methods
var myModel = Backbone.Model.extend({...})
myModel.on(“someEvent”, doSomething()) Listen to attribute
changes and update view
Getting/Setting properties:
myModel.get(“myPropertyName”)
myModel.set(“myPropertyName”, “someValue”)
myModel.set(“myPropertyName”, {various:”properties”, ...})
myModel.toJSON() - convert to json string
URL property - points to the url of the json data source
sync/fetch/save - pull and save data from the server

29. Backbone Collection
Ordered sets of Models - updating and
retrieving models from a set easier.
var Library = Backbone.Collection.extend({
model: Book
});
A lot of the same methods as models
Can sync them with data source just like
models
add - adds a model
remove - removes a model

30. Backbone View
Encapsulates a dom element on the
page
El property - dom element
If you don’t use El, it creates a div
unless you give the view “tagName”
Rendering - use render() function
Templates - reusable pieces of html
Events - trigger and listen to events

31. Example Backbone
View
var DocumentRow = Backbone.View.extend({ tagName: "li", className:
"document-row", events: { "click .icon":
"open", "click
.button.edit": "openEditDialog", "click .button.delete": "destroy" },
initialize: function() { this.listenTo(this.model, "change", this.render); },
render: function() { ... }});

32. Backbone Events
Events is a module that can be mixed in to any object, giving the object the
ability to bind and trigger custom named events
_.extend(myObject, Backbone.Events);
myObject.on(“someEvent”, function(msg)
{alert(“msg: ”+msg)})
myObject.trigger(“someEvent”, msg)
Models, Views and Collections all extend from
events so you have them already.

33. Backbone Router
Manages urls and browser history
extend router then call Backbone.history.start()
extend router then call Backbone.history.start()
routes match url patterns:
var Workspace = Backbone.Router.extend({ routes: { "help":
"help", // #help "search/:query":
"search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7 }, help:
function() { ... }, search: function(query, page) { ... }});

34. Backbone Resources
http://arturadib.com/hello-backbonejs
http://tutorialzine.com/2013/04/services-chooser-b
http://ricostacruz.com/backbone-patterns
http://backbonetutorials.com
https://github.com/jashkenas/backbone/wiki/T
utorials,-blog-posts-and-example-sites

35. Mobile web
development
HTML5 vs Native vs Hybrid
PhoneGap
Appgyver - fast way to get an app on the
phone and development
Objective C/xcode - Native Iphone
Android: Java

36. Key Takeaways
Don’t give up the more you see it the more it
will sink in
Do free/cheap work until you get good
Pay attention to the minor details
User experience is paramount
Always do what it takes to meet goals while
managing the tradeoffs and complete as fast
as possible
Stay on top of new tech

37. Questions
Have any questions speak up!