Upload
udita-plaha
View
3.205
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Coding House presents a Crash Course in HTML/Rails. Find out more info on Coding House at codinghouse.co
Citation preview
Web Dev Crash CourseZane Staggs - CodingHouse.co
1
Your instructorHusband, Father and DeveloperLiving the dream...
Coding House
MIS graduate U of Arizona
BetterDoctor
2
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
3
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,
4
Why would you want to do this?
Career
Fame and Fortune
Fun, creative
Wild West days of the internet
Technology
Startups
5
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 quick and dirty.
6
The web browserVery 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_browsers
7
How the web worksClient/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
8
Client/Server Communications
Client requests data from a server, server responds
Cloud based/virtualization = many servers on one box sharing resources through software virtualization
9
DNS requestsBrowser 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
Nameservers
10
APIsAPI = Application Programming Interface - good for decoupling your application. Data access.
JSON = Preferred format for describing and transferring data 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
11
DatabasesLike 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
12
Markup LanguagesHTML5 - modern html lots of new features, not even an official approved spec but 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
13
Example Dom Tree
14
Let’s create a websiteHTML
CSS
Javascript
General Programming Concepts
15
HTMLDescendant 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
16
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/examples-of-html5-1233547
http://www.html5rocks.com/en/
17
CSSStyle definitions for look and feel can be inline, in 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 stuff.
Modern stuff, table layout, flexbox, not supported yet everywhere
18
Javascript (not java)
Most ubiquitous language, also can be inline, in the head, or in a separate file.
Similar to C syntax lots of brackets
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
19
General coding tipsGood editor with code completion and syntax 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
20
JqueryJavascript 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
Plugins
$.ready = when document (DOM) is completely loaded and ready to be used
21
Jquery Plugin Example
Add the jquery language to your code
Add carousel plugin js file
Wire up the necessary components and start the plugin
http://jquery.malsup.com/cycle2/
22
BootstrapCSS Framework from Twitter.
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-Landscape-Of-Front-end-Development-Automation-Slides
24
Server sideServer 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 AdminWindows 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
Ruby on RailsRuby = another programming language with very nice syntax almost natural sounding and less code to write
Rails = framework for developing web applications
Model = data & business logic
View = html, erb, haml
Controller = decides where to go, where to get data, and view
Gems = packages of ruby code for reuse, easy management system.
Active Record, Rake: DB Migrations
MVC = model (data), view (view), controller (routing)
Development process: Bundler
Write once, convention over configuration
28
29
RubyRuby is "an interpreted scripting language for quick and easy object-oriented programming" -- what does this mean?
interpreted scripting language:ability to make operating system calls directlypowerful string operations and regular expressionsimmediate feedback during development
quick and easy:variable declarations are unnecessaryvariables are not typedsyntax is simple and consistentmemory management is automaticobject oriented programming:
everything is an objectclasses, methods, inheritance, etc.singleton methods"mixin" functionality by moduleiterators and closures
http://www.rubyist.net/~slagell/ruby/index.html
30
MVC
31
Let’s build a Rails applicationrails --version
rails new blog
rails server
Controller: receive specific requests for the application
Model: encapsulates the data access and business logic
View: displays the collected information in a human readable format: ERB, Haml
Routes: mapping urls to controllers and actions
http://guides.rubyonrails.org/getting_started.html#creating-a-new-rails-project
32
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
33
Key TakeawaysDon’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
34
Questions
Have any questions speak up!
35