1. Designveloper Overview of Web and App development process March 11 th, 2014 Hung Vo - CEO

2. 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

3. 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://guideguide.me/ http://www.gridsystemgenerator.com/  Ref: http://www.lynda.com/Photoshop-tutorials/Photoshop-Web-Design/105368-2.htmlhttp://www.lynda.com/Photoshop-tutorials/Photoshop-Web-Design/105368-2.html  http://www.lynda.com/Photoshop-tutorials/Photoshop-CC-One-One-Fundamentals/124096- 2.html http://www.lynda.com/Photoshop-tutorials/Photoshop-CC-One-One-Fundamentals/124096- 2.html

4. HTML/CSS  HTML5  Tags http://www.w3schools.com/tags/http://www.w3schools.com/tags/  Attributes  Validate your HTML - http://validator.w3.org/http://validator.w3.org/  CSS3  CSS selector - http://www.w3schools.com/cssref/css_selectors.asphttp://www.w3schools.com/cssref/css_selectors.asp  CSS specificity - http://coding.smashingmagazine.com/2007/07/27/css- specificity-things-you-should-know/http://coding.smashingmagazine.com/2007/07/27/css- specificity-things-you-should-know/  Validate your CSS - http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/

5. PSD to HTML/CSS  Keyboard shortcuts  How to get info about:  Text  Image  Color  Dimension

6. Frameworks  Bootstrap - http://getbootstrap.com/, http://bootswatch.com/http://getbootstrap.com/http://bootswatch.com/  Zurb Foundation - http://foundation.zurb.com/http://foundation.zurb.com/  jQuery Mobile - http://jquerymobile.com/http://jquerymobile.com/

7. CSS preprocessor  LESS / SASS - http://lesscss.org/ - http://sass-lang.com/http://lesscss.org/http://sass-lang.com/  http://www.lynda.com/CSS-tutorials/CSS-LESS-SASS/107921-2.html http://www.lynda.com/CSS-tutorials/CSS-LESS-SASS/107921-2.html

8. Animation manipulation  HTML5 Canvas - http://www.lynda.com/HTML-5-tutorials/HTML5-Graphics- and-Animation-with-Canvas/80782-2.htmlhttp://www.lynda.com/HTML-5-tutorials/HTML5-Graphics- and-Animation-with-Canvas/80782-2.html  CSS http://www.lynda.com/CSS-tutorials/CSS-Animations/115434-2.htmlhttp://www.lynda.com/CSS-tutorials/CSS-Animations/115434-2.html http://www.lynda.com/Dreamweaver-tutorials/CSS-Transitions- Transforms/101072-2.html  jQuery

9. JavaScript  Animation manipulation  Database and logic manipulation  Focus:  Objects – how it works, define objects  Events - http://www.w3schools.com/js/js_events_examples.asphttp://www.w3schools.com/js/js_events_examples.asp  JSON - http://www.w3schools.com/json/http://www.w3schools.com/json/  Ajax - http://www.w3schools.com/ajax/default.asp https://api.jquery.com/jQuery.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

10. NoSQL  Not Only SQL http://www.lynda.com/NoSQL-tutorials/Up-Running-NoSQL-Databases/111598- 2.html  Saves data as BSON objects (Binary JSON)  MongoDB http://try.mongodb.org/http://try.mongodb.org/  Redis: http://try.redis.io/http://try.redis.io/  Pub/Sub for realtime processing http://redis.io/topics/pubsub

11. jQuery  Write less, do more  $:object  $ = select  $(css expression)  $.

12. Backbonejs  MVC for frontend  Event  Model  Collection  View  http://www.lynda.com/Backbonejs-tutorials/Up-Running- Backbonejs/120900-2.html http://www.lynda.com/Backbonejs-tutorials/Up-Running- Backbonejs/120900-2.html

13. 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-Essential- Training/141132-2.html http://www.lynda.com/JavaScript-tutorials/Nodejs-Essential- Training/141132-2.html

14. JS template  Mustache.js http://www.lynda.com/JavaScript-tutorials/JavaScript-templating- mustachejs/114901/125776-4.html  Handlebar  EJS