Designveloper
Overview of Web and App
development process
March 11th, 2014
Hung Vo - CEO
Agenda
- Web development process
-
-
Design
-
Convert to HTML/CSS
-
Manipulate animation
-
Create JS template
-
Database and logic processing
Focus on
-
What is important
-
How to get things done faster
Design

Using PSD, Illustrator

Arrange workspace

Understand different screen size

Color types, color profile

Layers, layer comp

Text styling

Image Sprite

Image types: JPEG, GIF, PNG

Grid system http://guideguide.me/
http://www.gridsystemgenerator.com/

Ref: http://www.lynda.com/Photoshop-tutorials/Photoshop-Web-Design/105368-2.html

http://www.lynda.com/Photoshop-tutorials/Photoshop-CC-One-One-Fundamentals/1240962.html
HTML/CSS
 HTML5
 Tags http://www.w3schools.com/tags/
 Attributes
 Validate your HTML - http://validator.w3.org/
 CSS3
 CSS selector - http://www.w3schools.com/cssref/css_selectors.asp
 CSS specificity - http://coding.smashingmagazine.com/2007/07/27/cssspecificity-things-you-should-know/
 Validate your CSS - http://jigsaw.w3.org/css-validator/
PSD to HTML/CSS
 Keyboard shortcuts
 How to get info about:
 Text
 Image
 Color
 Dimension
Frameworks
 Bootstrap - http://getbootstrap.com/, http://bootswatch.com/
 Zurb Foundation - http://foundation.zurb.com/
 jQuery Mobile - http://jquerymobile.com/
CSS preprocessor
 LESS / SASS - http://lesscss.org/ - http://sass-lang.com/
 http://www.lynda.com/CSS-tutorials/CSS-LESS-SASS/107921-2.html
Animation manipulation
 HTML5 Canvas - http://www.lynda.com/HTML-5-tutorials/HTML5-Graphicsand-Animation-with-Canvas/80782-2.html
 CSS http://www.lynda.com/CSS-tutorials/CSS-Animations/115434-2.html
http://www.lynda.com/Dreamweaver-tutorials/CSS-TransitionsTransforms/101072-2.html
 jQuery
JavaScript
 Animation manipulation
 Database and logic manipulation
 Focus:
 Objects – how it works, define objects
 Events - http://www.w3schools.com/js/js_events_examples.asp
 JSON - http://www.w3schools.com/json/
 Ajax - http://www.w3schools.com/ajax/default.asp
https://api.jquery.com/jQuery.ajax/
 Ref:
http://www.w3schools.com/js/DEFAULT.asp
http://www.lynda.com/JavaScript-tutorials/Essential-Training/81266-2.html
NoSQL
 Not Only SQL
http://www.lynda.com/NoSQL-tutorials/Up-Running-NoSQL-Databases/1115982.html
 Saves data as BSON objects (Binary JSON)
 MongoDB http://try.mongodb.org/
 Redis: http://try.redis.io/
 Pub/Sub for realtime processing
http://redis.io/topics/pubsub
jQuery
 Write less, do more
 $:object
 $ = select
 $(css expression)
 $.
Backbonejs
 MVC for frontend
 Event
 Model
 Collection
 View
 http://www.lynda.com/Backbonejs-tutorials/Up-RunningBackbonejs/120900-2.html
Nodejs
 JavaScript that runs on server
 Event-driven
 Non-blocking IO model
 Perfect for data intensive real time apps that run across distributed devices
 Soket.io : realtime processing
 http://www.lynda.com/JavaScript-tutorials/Nodejs-EssentialTraining/141132-2.html
JS template
 Mustache.js
http://www.lynda.com/JavaScript-tutorials/JavaScript-templatingmustachejs/114901/125776-4.html
 Handlebar
 EJS