Designveloper Overview of Web and App development process March 11 th, 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  Ref:  2.html 2.html

HTML/CSS  HTML5  Tags  Attributes  Validate your HTML -  CSS3  CSS selector -  CSS specificity - specificity-things-you-should-know/ specificity-things-you-should-know/  Validate your CSS -

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

Frameworks  Bootstrap  Zurb Foundation -  jQuery Mobile -

CSS preprocessor  LESS / SASS 

Animation manipulation  HTML5 Canvas - and-Animation-with-Canvas/ htmlhttp:// and-Animation-with-Canvas/ html  CSS Transforms/ html  jQuery

JavaScript  Animation manipulation  Database and logic manipulation  Focus:  Objects – how it works, define objects  Events -  JSON -  Ajax  Ref:

NoSQL  Not Only SQL 2.html  Saves data as BSON objects (Binary JSON)  MongoDB  Redis:  Pub/Sub for realtime processing

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

Backbonejs  MVC for frontend  Event  Model  Collection  View  Backbonejs/ html Backbonejs/ 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  Training/ html Training/ html

JS template  Mustache.js mustachejs/114901/ html  Handlebar  EJS